/* Components: document chrome, TOC, menu, search, share, reading level, Q&A. */
#doc { min-width: 0; }
#doc > :first-child { margin-top: 0; }
#doc p { margin: 0 0 0.85em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* the proof's link names, set as its formula sets them: an italic letter and its subscript, never split at a line's end */
#doc .sym { white-space: nowrap; font-style: italic; }
#doc .sym var { font-style: inherit; }
#doc .sym sub { font-size: 0.7em; line-height: 0; vertical-align: -0.3em; }
/* a range of verses or numbers, never broken at its dash */
#doc .range { white-space: nowrap; }
#doc li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 700px) { #doc p, #doc li { text-align: justify; } }
#doc a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
         text-decoration-color: var(--gold-2); }
#doc em { font-style: italic; }
#doc strong { font-weight: 700; }

/* section openers: a gold point of light on the rule, an eyebrow, and a large display title */
#doc h2 { position: relative; margin: 2.6em 0 0.75em; padding-top: 1.15em; border-top: 1px solid var(--rule-2);
          font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 5.6vw, 2.55rem); line-height: 1.1;
          letter-spacing: -0.005em; text-wrap: balance; color: var(--fg); }
#doc h2::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%;
                  background: var(--gold); box-shadow: 0 0 12px 2px var(--glow); }
#doc h2 .eyebrow, #doc h3 .eyebrow { display: block; margin-bottom: 0.45em; font-family: var(--font-body); font-weight: 700;
          font-size: 0.42em; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
          font-variant-numeric: lining-nums; }
#doc h3 { margin: 2.1em 0 0.65em; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 4.4vw, 1.8rem);
          line-height: 1.18; text-wrap: balance; color: var(--fg); }
#doc h3 .eyebrow { font-size: 0.5em; }
#doc h3.step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6em; align-items: start; }
#doc h3.step .stepnum { display: inline-grid; place-items: center; width: 1.95em; height: 1.95em; margin-top: -0.18em; border-radius: 50%;
          border: 1.5px solid var(--gold); color: var(--gold); font-size: 1.02em; font-variant-numeric: lining-nums;
          box-shadow: 0 0 0 5px var(--glow-soft), 0 0 24px var(--glow); }
#doc h3.step .stepnum span:first-child { line-height: 1; transform: translateY(0.03em); }

/* the doc's marks: Stated, Measured, Inference, each with its own color and a point of light */
#doc strong.lab::before { content: ""; display: inline-block; width: 0.46em; height: 0.46em; margin-right: 0.36em; border-radius: 50%;
          background: currentColor; vertical-align: 0.1em; box-shadow: 0 0 9px currentColor; }
#doc strong.lab-stated { color: var(--stated); }
#doc strong.lab-measured { color: var(--measured); }
#doc strong.lab-inference { color: var(--inference); }
#doc p.label { margin-bottom: 0.4em; }

/* verdicts: the conclusions the doc draws, set in gold */
#doc .verdict { padding: 0.85em 1.05em; border: 1px solid var(--verdict-line); border-radius: 14px; background: var(--verdict-bg);
                box-shadow: inset 0 0 32px var(--glow-soft); }
#doc p.verdict { margin-block: 1em; }
#doc li.verdict { list-style: none; }

/* lists */
#doc ul, #doc ol { margin: 0 0 0.95em; padding-left: 1.25em; }
#doc li { margin: 0 0 0.45em; }
#doc li > p { margin: 0 0 0.35em; }
#doc li::marker { color: var(--gold); }
/* an item that opens with one of the doc's marks wears that mark alone, not a bullet as well */
#doc ul > li:has(> strong.lab:first-child), #doc ul > li:has(> p:first-child > strong.lab:first-child) { list-style: none; }
#doc ul > li:has(> strong.lab:first-child) > strong.lab:first-child::before,
#doc ul > li:has(> p:first-child > strong.lab:first-child) > p:first-child > strong.lab:first-child::before { margin-left: -1.2em; margin-right: 0.74em; }
#doc ol > li::marker { font-variant-numeric: lining-nums; font-weight: 700; }

/* the quoted passages: one card per witness, its reference on its own line */
#doc blockquote { margin: 1.1em 0; padding: 0.85em 1.05em 0.9em; border: 1px solid var(--rule); border-radius: 14px;
                  background: var(--surface); font-size: 0.92em; line-height: 1.56; }
#doc blockquote p { margin: 0; text-align: left; }
#doc blockquote strong.ref { display: block; margin-bottom: 0.3em; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase;
                             color: var(--gold); font-variant-numeric: lining-nums; }

/* tables */
#doc .table-wrap { margin: 1.2em 0; overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
#doc table { width: 100%; border-collapse: collapse; font-size: 0.86em; line-height: 1.45; }
#doc th, #doc td { padding: 0.62em 0.8em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
#doc tbody tr:last-child td { border-bottom: 0; }
#doc th { font-weight: 700; font-size: 0.86em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
          border-bottom: 1px solid var(--rule-2); }
@media (max-width: 640px) {
  #doc table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #doc table.stack, #doc table.stack tbody, #doc table.stack tr, #doc table.stack td { display: block; }
  #doc table.stack tr { padding: 0.75em 0.95em; border-bottom: 1px solid var(--rule); }
  #doc table.stack tbody tr:last-child { border-bottom: 0; }
  #doc table.stack td { padding: 0.1em 0; border: 0; }
  #doc table.stack td:first-child { font-weight: 700; color: var(--fg); margin-bottom: 0.25em; }
  #doc table.stack td + td::before { content: attr(data-label) " · "; font-size: 0.78em; letter-spacing: 0.08em;
                                     text-transform: uppercase; color: var(--gold); font-weight: 700; }
}

/* figures */
#doc figure.dia { margin: 1.5em auto 1.1em; max-width: 520px; }
#doc figure.dia svg { display: block; width: 100%; height: auto; font-family: var(--font-dia); }
#doc figure.dia + p { font-size: 0.9em; color: var(--fg-2); }
#doc .dia [fill="#1f1e1d"] { fill: var(--dia-ink); }
#doc .dia [fill="#6b6a66"] { fill: var(--dia-ink-2); }
#doc .dia [fill="#8a8986"] { fill: var(--dia-line); }
#doc .dia [stroke="#8a8986"] { stroke: var(--dia-line); }
#doc .dia [stroke="#d9d7d2"] { stroke: var(--dia-sep); }
#doc .dia [fill="#f3f2ee"] { fill: var(--dia-panel); }
#doc .dia [stroke="#2f6fdf"] { stroke: var(--dia-blue); }
#doc .dia [fill="#2f6fdf"] { fill: var(--dia-blue); }

/* the textual equation */
#doc .math { margin: 1.2em 0; padding: 0.95em 1.05em; overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px;
             background: var(--surface); }
#doc .math .katex { font-size: clamp(11.5px, 3vw, 17px); }
#doc .math .mrow { padding: 0.12em 0; white-space: nowrap; }
#doc .math .mgroup + .mgroup, #doc .math .mgroup + .mrow, #doc .math .mrow + .mgroup { margin-top: 0.1em; }

/* sources */
#doc section.sources { margin-top: 1em; font-size: 0.86em; line-height: 1.5; }
#doc section.sources h2 { font-size: clamp(1.8rem, 5.6vw, 2.55rem); }
#doc section.sources p, #doc section.sources li { text-align: left; }
#doc section.sources > ul { list-style: none; padding-left: 0; }
#doc section.sources > ul > li { margin-bottom: 0.9em; }
#doc section.sources > ul > li > p:first-child strong { display: block; font-size: 0.82em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
#doc section.sources > ul > li > ul { margin-top: 0.3em; padding-left: 1.1em; }

/* ---- contents: the rail (wide screens) and the menu ---- */
.toc { font-size: 0.9rem; line-height: 1.32; }
.toc h2 { margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: flex; gap: 0.6em; align-items: flex-start; padding: 0.42em 0.55em; border-radius: 10px; color: var(--fg-2); text-decoration: none; }
@media (hover: hover) { .toc a:hover { color: var(--fg); background: var(--surface); } }
.toc a[aria-current="true"] { color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); }
.toc .sec > a { margin-top: 0.7em; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--fg); }
.toc .sec:first-child > a { margin-top: 0; }
.toc .eb { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.toc .n { flex: none; display: inline-grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; margin-top: -0.08em;
          border: 1px solid var(--gold-2); color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 0.92em; font-variant-numeric: lining-nums; }
.toc a[aria-current="true"] .n { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); box-shadow: 0 0 14px var(--glow); }
.toc .sub > a { padding-left: 0.55em; }

/* ---- the menu: over the page and under the bar, always in the cover's night (its tones are the night's, whatever the
   page's theme). A search that answers questions, a few questions to try, the reading level, and the contents, which
   stand in columns on wide screens ---- */
html { scrollbar-gutter: stable; }
/* while it is open the page cannot scroll; where a system scroll bar keeps its gutter, the gutter takes the night too */
html.menu-open { overflow: hidden; background: var(--night); }
.menu { position: fixed; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + var(--bar)); z-index: 35;
        overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
        background: radial-gradient(ellipse 120% 60% at 50% 0%, var(--night-2) 0%, var(--night) 72%); color: var(--hero-fg);
        color-scheme: dark; --fg: var(--hero-fg); --fg-2: var(--night-fg-2); --gold: var(--hero-gold); --gold-2: var(--night-gold-2);
        --gold-ink: #1A1305; --surface: var(--night-surface); --rule: var(--night-rule); --rule-2: var(--night-rule-2); --glow: var(--night-glow); }
@media (prefers-reduced-motion: no-preference) { .menu:not([hidden]) { animation: menu-in 0.22s ease-out; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu-in { max-width: 640px; margin: 0 auto; padding-top: 18px; }
.menu .narrow { max-width: 760px; margin-inline: auto; }
.menu-eb { margin: 0 0 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; line-height: 1.3; letter-spacing: 0.2em;
           text-transform: uppercase; color: var(--gold); }
.search { position: relative; }
.search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; }
.search input { box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 0 50px 0 48px; border-radius: 16px;
                border: 1px solid var(--rule-2); background: var(--surface); color: var(--fg); font-family: var(--font-body);
                font-size: 1.08rem; line-height: 1.2; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--fg-2); opacity: 1; }
.search input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.16), 0 0 30px rgba(245, 196, 81, 0.1); }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px;
                 border: 0; border-radius: 12px; background: transparent; color: var(--fg-2); cursor: pointer; }
@media (hover: hover) { .search .clear:hover { color: var(--fg); } }
.search .clear svg { position: static; transform: none; width: 16px; height: 16px; color: currentColor; }
.search input:placeholder-shown + .clear { display: none; }
.try { margin-top: 20px; }
.try ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.try a { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 7px 14px; border-radius: 999px;
         border: 1px solid var(--rule-2); background: var(--surface); color: var(--fg); text-decoration: none; font-family: var(--font-body);
         font-size: 0.9rem; line-height: 1.3; }
@media (hover: hover) { .try a:hover { border-color: var(--gold-2); color: var(--gold); } }
@media (max-width: 599px) { .try li:nth-child(n+5) { display: none; } }
.menu .level { margin-top: 24px; }
.menu-eb-toc { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.menu .toc { font-size: 1rem; }
@media (min-width: 720px) {
  .menu .toc > ol { columns: 2; column-gap: 36px; }
  .menu .toc > ol > li { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .menu-in { font-size: var(--fs, 1rem); max-width: var(--frame, 1180px); padding-top: 40px; }
  .menu .toc > ol { columns: 3; column-gap: 44px; }
  .menu .try ul { justify-content: center; }
  .menu .try .menu-eb, .menu .level { justify-content: center; text-align: center; }
}

/* the answers: where each sits, its title, and the study's own words around the visitor's */
.results { margin-top: 16px; }
.res-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 6px; }
.res-head .menu-eb { margin: 0; }
.res-n { font-family: var(--font-body); font-size: 0.8rem; color: var(--fg-2); white-space: nowrap; }
.res { list-style: none; margin: 0; padding: 0; }
.res li + li { border-top: 1px solid var(--rule); }
.res a { display: block; margin: 0 -10px; padding: 14px 10px 15px; border-radius: 14px; color: var(--fg); text-decoration: none; }
.res a:focus-visible { background: var(--surface); }
@media (hover: hover) { .res a:hover { background: var(--surface); } }
.res a:focus-visible { outline-offset: -2px; }
.res .r-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.res .r-top:empty { display: none; }
.res .r-eb { font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase;
             color: var(--gold); }
.res .r-best { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(245, 196, 81, 0.14); color: var(--gold); font-family: var(--font-body);
               font-weight: 700; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.res .r-t { display: block; margin-top: 3px; font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; line-height: 1.22; text-wrap: balance; }
.res .r-x { display: block; margin-top: 7px; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; color: var(--fg-2); }
.res mark { color: var(--fg); background: rgba(245, 196, 81, 0.18); border-radius: 3px; padding: 0 2px; }
.res-none { margin: 6px 2px 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--fg); }
.res-none button { margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gold-2); background: transparent;
                   color: var(--gold); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; }

/* where an answer was found, a gold light that fades */
@keyframes hit { 0%, 35% { background-color: var(--hl-bg); box-shadow: 0 0 0 0.3em var(--hl-bg); }
                 100% { background-color: transparent; box-shadow: 0 0 0 0.3em transparent; } }
#doc .hit { animation: hit 2.8s ease-out; border-radius: 0.3em; }

/* ---- sections: drawn only as they near the screen, so the first frame and every tap stay light ---- */
/* A section not yet drawn stands at a guessed height; drawn, it takes its own, and everything below it moves. A
   browser that anchors scrolling (overflow-anchor) holds the reader's place through that; one that does not (Safari)
   would carry the reader thousands of pixels from a link's target, so there every section is drawn from the start.
   Each section's box reaches 32px past the text on both sides, so the glows at the text's edge are drawn whole. */
.read { overflow-x: clip; }
#doc .unit { padding: 0 32px 0.6em; margin-inline: -32px; }
@supports (overflow-anchor: auto) {
  #doc .unit { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
  #doc .unit.group { contain-intrinsic-size: auto 160px; }
}
#doc .unit :is(p, ul, ol, li, blockquote, figure, .table-wrap, .math, .full, .plain):last-child { margin-bottom: 0; }

/* ---- the gold highlights: the words that carry each passage and each verdict ---- */
mark.hl { color: var(--hl-fg); background: var(--hl-bg); border-radius: 0.24em; padding: 0.04em 0.08em;
          -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: inset 0 -0.1em 0 var(--hl-edge); }
#doc .skim-key { font-size: 0.94em; color: var(--fg-2); }
#doc .skim-key strong.lab-key { color: var(--fg); }
#doc .skim-key strong.lab-key::before { color: var(--gold); }

/* ---- the close: the study shared, and its author ---- */
.colophon { margin-top: 56px; padding-block: 44px calc(56px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule);
            text-align: center; }
.colophon-eb { margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--gold); }
.share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share-btn { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gold-2);
             background: transparent; color: var(--gold); cursor: pointer; text-decoration: none; font-family: var(--font-body);
             font-weight: 700; font-size: 0.88rem; }
@media (hover: hover) { .share-btn:hover { background: var(--surface); } }
/* on a phone the buttons stand three to a row, so no row holds one alone */
@media (max-width: 559px) { .share { max-width: 372px; margin-inline: auto; }
                            .share-btn { flex: 0 0 calc((100% - 20px) / 3); justify-content: center; padding: 0 8px; } }
.share-status { min-height: 1.5em; margin: 12px 0 30px; font-size: 0.9rem; color: var(--fg-2); overflow-wrap: anywhere; }
.colophon-by { margin: 0; font-size: 1rem; color: var(--fg); }
.colophon-by a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
                 text-decoration-color: var(--gold-2); }

/* ---- reading level: plain words or the full study ---- */
.level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rail .level { margin: 0 0 22px; }
.level-label { font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.level-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface); }
.level button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); cursor: pointer;
                font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; line-height: 1; white-space: nowrap; }
.level button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 16px var(--glow); }
.rail .level button { min-height: 38px; padding: 0 12px; font-size: 0.82rem; }

/* plain words: one paragraph opens each step and section; the full study can open under it */
#doc .plain { display: none; }
/* the plain words' paragraphs are broken into lines as a whole (pretty), so none ends on a lone word; the full study's
   long lists and paragraphs are broken line by line, because breaking them as a whole costs Safari's engine seconds
   each time the study is laid out (measured in WebKit: 2.55 s for the whole study, against 0.91 s line by line) */
#doc .plain p { font-size: 1.06em; line-height: 1.66; text-align: left; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
#doc .plain .more { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; margin: 0.15em 0 0; padding: 0 1.05em;
                    border-radius: 999px; border: 1px solid var(--gold-2); background: transparent; color: var(--gold); cursor: pointer;
                    font-family: var(--font-body); font-weight: 700; font-size: 0.86em; letter-spacing: 0.02em; }
#doc .plain .more::after { content: ""; width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
                           transform: translateY(-0.12em) rotate(45deg); }
#doc .plain .more[aria-expanded="true"]::after { transform: translateY(0.12em) rotate(-135deg); }
html.level-plain #doc .plain { display: block; margin-bottom: 0.9em; }
html.level-plain #doc .full, html.level-plain #doc .unit.full-only, html.level-plain .toc li[data-full-only] { display: none; }
html.level-plain #doc .unit.open > .full { display: block; margin-top: 1.4em; padding-top: 1.2em; border-top: 1px dashed var(--rule-2); }
html.level-plain #doc .unit.group h2 { margin-bottom: 0.2em; }

/* ---- the questions the page answers, each linked to its answer; the rest fold under a native disclosure ---- */
#doc .qa { margin: 1em 0 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); overflow: hidden; }
#doc .qa ol { list-style: none; margin: 0; padding: 0; }
#doc .qa li { margin: 0; border-top: 1px solid var(--rule); text-align: left; }
#doc .qa > ol > li:first-child { border-top: 0; }
#doc .qa a, #doc .qa summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 18px;
                               padding: 0.82em 1.05em; color: var(--fg); text-decoration: none; }
#doc .qa a:focus-visible .q { color: var(--gold); }
@media (hover: hover) { #doc .qa a:hover .q { color: var(--gold); } }
#doc .qa .q { font-family: var(--font-display); font-weight: 600; font-size: 1.16em; line-height: 1.24; text-wrap: pretty; }
#doc .qa .where { font-family: var(--font-body); font-weight: 700; font-size: 0.7em; line-height: 1.3; letter-spacing: 0.16em;
                  text-transform: uppercase; color: var(--gold); white-space: nowrap; }
#doc .qa summary { align-items: center; border-top: 1px solid var(--rule); cursor: pointer; list-style: none; }
#doc .qa summary::-webkit-details-marker { display: none; }
#doc .qa .more-n { grid-column: 1; font-family: var(--font-body); font-weight: 700; font-size: 0.78em; line-height: 1.3;
                   letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
#doc .qa .more-on { grid-column: 1; font-size: 0.92em; line-height: 1.4; font-style: italic; color: var(--fg-2); text-wrap: pretty; }
#doc .qa summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 0.5em; height: 0.5em; margin: 0 0.25em 0.25em 0;
                          border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
#doc .qa details[open] summary::after { margin: 0.25em 0.25em 0 0; transform: rotate(-135deg); }
#doc .qa summary:focus-visible .more-n { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) { #doc .qa summary:hover .more-n { text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 520px) { #doc .qa a { grid-template-columns: minmax(0, 1fr); } }