/* Layout: top bar, hero, reading area, contents rail.
   Responsive rules for these regions remain co-located. */

/* ---- the bar: the name, search and the menu, on every screen. Over the opener it is the cover's night, frosted;
   below it, the page's own ground. Its foot carries the reading progress, a gold line that fills as you read ---- */
.bar { --b-bg: rgba(5, 7, 14, 0.9); --b-fg: var(--hero-fg); --b-fg-2: var(--hero-fg-2); --b-gold: var(--hero-gold);
       --b-line: rgba(245, 196, 81, 0.12); --b-field: rgba(255, 251, 242, 0.06); --b-field-line: rgba(245, 196, 81, 0.3);
       position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px);
       background: var(--b-bg); color: var(--b-fg); border-bottom: 1px solid var(--b-line);
       -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
       transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
html.past-hero:not(.menu-open) .bar { --b-bg: var(--bar-bg); --b-fg: var(--fg); --b-fg-2: var(--fg-2); --b-gold: var(--gold);
       --b-line: var(--bar-line); --b-field: var(--surface); --b-field-line: var(--rule-2); }
html.menu-open .bar { --b-bg: var(--night); }
.bar :focus-visible { outline-color: var(--b-gold); }
/* the bar's content stands on the reading frame's edges: the text column, the rail beside it, the margin notes */
.bar-in { height: var(--bar); display: flex; align-items: center; gap: 6px; margin: 0 auto; font-size: var(--fs, 1rem); max-width: var(--frame, none); }
.mark { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; margin-right: auto; min-width: 0; color: var(--b-fg);
        text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.01em; white-space: nowrap; }
.mark .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--b-gold); box-shadow: 0 0 10px 2px rgba(245, 196, 81, 0.45); }
.mark .name { overflow: hidden; text-overflow: ellipsis; }
.bar button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 0; background: transparent;
              color: var(--b-fg); cursor: pointer; font-family: var(--font-body); font-weight: 700; }
.bar .find { min-width: 44px; padding: 0 10px; border-radius: 999px; }
/* with the menu open, its own search field is the one to use */
html.menu-open .bar .find { visibility: hidden; }
.find svg, .search svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.find .find-l, .find kbd { display: none; }
.bar .menu-btn { padding: 0 2px 0 8px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.menu-btn .ico { position: relative; width: 18px; height: 10px; flex: none; }
.menu-btn .ico span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 0.25s ease; }
.menu-btn .ico span:first-child { top: 0; }
.menu-btn .ico span:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .ico span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .ico span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
/* hover looks only where there is a pointer to hover: on a touch screen a tap would leave them standing */
@media (hover: hover) { .bar .find:hover, .bar .menu-btn:hover { color: var(--b-gold); } }
@media (max-width: 413px) { .mark { font-size: 1.02rem; gap: 9px; } }
@media (max-width: 389px) { .mark { font-size: 0.94rem; gap: 8px; } }
/* the smallest phones: the menu's word stays for assistive tech, its lines say it to the eye */
@media (max-width: 340px) { .bar .menu-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 1024px) {
  .mark { font-size: 1.24rem; }
  /* wide screens: search stands in the bar as a field to click, with its key */
  .bar .find { justify-content: flex-start; width: min(330px, 30vw); min-height: 40px; padding: 0 8px 0 14px; margin-right: 6px; border-radius: 999px;
          background: var(--b-field); box-shadow: inset 0 0 0 1px var(--b-field-line); color: var(--b-fg-2); font-weight: 400; font-size: 0.86rem; }
  .find .find-l { display: inline; margin-right: auto; }
  .find kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--b-field-line);
              font-family: var(--font-dia); font-size: 0.72rem; color: var(--b-fg-2); }
  @media (hover: hover) { .bar .find:hover { color: var(--b-fg); } }
}
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
                 background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 10px var(--glow); }
html.menu-open .progress { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .bar, .menu-btn .ico span, .rail .level { transition: none; } }

/* ---- the opener: the cover, always night, starting under the bar ---- */
.hero { background: radial-gradient(ellipse 120% 70% at 50% 42%, var(--night-2) 0%, var(--night) 64%); color: var(--hero-fg);
        text-align: center; overflow: hidden; padding-top: var(--bar); }
.hero-inner { max-width: 820px; margin: 0 auto; padding-block: clamp(22px, 4svh, 84px) clamp(24px, 4.4svh, 92px);
              display: flex; flex-direction: column; align-items: center; }
.kicker, .hero-ref { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
                     color: var(--hero-gold); font-variant-numeric: lining-nums; }
.kicker { font-size: 0.82rem; line-height: 1.4; }
.hero-quote { margin: clamp(10px, 2.2svh, 22px) 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
              font-size: clamp(1.4rem, min(5.8vw, 4.1svh), 2.4rem); line-height: 1.18; text-wrap: balance; }
.hero-quote .us { color: var(--hero-gold); font-weight: 600; text-shadow: 0 0 18px rgba(245, 196, 81, 0.6); }
.hero-ref { margin-top: clamp(5px, 1.1svh, 10px); font-size: 0.72rem; }
/* the emblem takes the height the words leave, so the whole cover, buttons included, sits in the first screen */
.emblem { --rest: calc(456px + var(--bar)); position: relative; max-width: 100%; aspect-ratio: 1; margin: clamp(8px, 2.1svh, 30px) 0 clamp(4px, 1.1svh, 16px);
          width: clamp(112px, calc(100vh - var(--rest)), min(86vw, 430px));
          width: clamp(112px, calc(100svh - var(--rest)), min(86vw, 430px)); }
@media (min-width: 600px) { .emblem { --rest: calc(580px + var(--bar)); } }
.emblem > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.emblem .glow { inset: 12.2727%; width: auto; height: auto; border-radius: 50%;
                background: radial-gradient(closest-side, #FFF8E6 0%, rgba(252, 228, 170, 0.97) 5%, rgba(245, 196, 81, 0.82) 12%,
                  rgba(245, 196, 81, 0.52) 24%, rgba(245, 196, 81, 0.28) 38%, rgba(245, 196, 81, 0.12) 56%, rgba(245, 196, 81, 0.04) 78%,
                  rgba(245, 196, 81, 0) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .emblem .dots { animation: turn 300s linear infinite; will-change: transform; }
  .emblem .glow { animation: breathe 7s ease-in-out infinite; will-change: transform, opacity; }
}
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.82; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
.hero h1 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, min(11.5vw, 7.2svh), 5.4rem);
           line-height: 1.0; letter-spacing: -0.01em; color: var(--hero-fg); }
.hero .gold-rule { width: 88px; height: 1px; background: var(--hero-gold); margin: clamp(12px, 2.4svh, 22px) 0 clamp(10px, 2svh, 18px); opacity: 0.9; }
.tagline { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.06rem, min(3.9vw, 2.8svh), 1.45rem);
           line-height: 1.35; color: var(--hero-fg-2); text-wrap: balance; }
.hero .byline { margin: clamp(8px, 1.6svh, 16px) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.05em;
                color: var(--hero-fg); font-variant-numeric: lining-nums; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(14px, 2.8svh, 28px); }
.cta .short { display: none; }
@media (max-width: 479px), (orientation: landscape) and (max-height: 600px) and (max-width: 759px) {
  .cta .long { display: none; } .cta .short { display: inline; }
}
@media (max-width: 359px) {
  .kicker { font-size: 0.72rem; letter-spacing: 0.16em; }
  .hero-quote { font-size: 1.3rem; }
  .tagline { font-size: 1rem; }
  .cta { gap: 8px; } .cta .btn { padding: 0 14px; font-size: 0.86rem; }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 999.98px) {
  /* phones on their side: the light on the left, the words on the right, scaled to the short screen */
  .hero-inner { max-width: 980px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 5vw, 56px);
                align-items: center; text-align: left; padding-block: 16px 18px; }
  .hero-inner > * { grid-column: 2; justify-self: start; }
  .hero-inner > .emblem { grid-column: 1; grid-row: 1 / span 9; justify-self: center; margin: 0;
                          width: min(38vw, calc(100vh - 40px - var(--bar))); width: min(38vw, calc(100svh - 40px - var(--bar))); }
  .kicker { font-size: 0.7rem; }
  .hero-quote { margin-top: 6px; font-size: clamp(1.05rem, 5.4svh, 1.7rem); }
  .hero-ref { margin-top: 3px; font-size: 0.64rem; }
  .hero h1 { margin-top: 10px; font-size: clamp(1.8rem, 10.4svh, 3.6rem); }
  .hero .gold-rule { margin: 11px 0 9px; transform-origin: 0 50%; }
  .tagline { font-size: clamp(0.95rem, 4.5svh, 1.25rem); }
  .hero .byline { margin-top: 7px; font-size: 0.92rem; }
  .cta { margin-top: 12px; justify-content: flex-start; }
}
@media (min-width: 1000px) {
  /* wide screens: the light on the left, the title on the right, all in the first frame */
  .hero-inner { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 64px;
                align-items: center; text-align: left; padding-block: clamp(36px, 7svh, 64px) clamp(40px, 8svh, 72px); }
  .hero-inner > * { grid-column: 2; justify-self: start; }
  .hero-inner > .emblem { grid-column: 1; grid-row: 1 / span 9; justify-self: center; margin: 0;
                          width: min(40vw, 470px, calc(100vh - 96px - var(--bar))); width: min(40vw, 470px, calc(100svh - 96px - var(--bar))); }
  .hero-quote { font-size: clamp(1.6rem, 2.5vw, 2.4rem); }
  .hero h1 { margin-top: 30px; font-size: clamp(4rem, 5.6vw, 5rem); }
  .tagline { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
  .hero .gold-rule { margin: 22px 0 18px; transform-origin: 0 50%; }
  .hero .byline { margin-top: 16px; }
  .cta { justify-content: flex-start; margin-top: 28px; gap: 12px; }
}
@media (min-width: 1800px) {
  /* very large screens: the cover grows with the screen */
  .hero-inner { max-width: 1520px; column-gap: 104px; padding-block: 96px 104px; }
  .hero-inner > .emblem { width: min(31vw, 620px, calc(100svh - 150px - var(--bar))); }
  .kicker { font-size: 0.98rem; }
  .hero-quote { font-size: 2.9rem; }
  .hero-ref { font-size: 0.84rem; }
  .hero h1 { font-size: 6rem; }
  .tagline { font-size: 1.75rem; }
  .hero .byline { font-size: 1.24rem; }
  .cta .btn { min-height: 56px; padding: 0 30px; font-size: 1.08rem; }
}
.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
       font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-decoration: none; }
.btn-primary { background: var(--hero-gold); color: #1A1305; box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.7), 0 0 30px rgba(245, 196, 81, 0.35); }
.btn-ghost { color: var(--hero-gold); border: 1px solid rgba(245, 196, 81, 0.55); }
.btn:focus-visible { outline-color: var(--hero-fg); }

/* ---- reading area: one column on phones and tablets, its type growing with the screen; from 1024px the contents
   rail stands beside the text; from 1360px each section's plain-words paragraph stands in the margin beside its full
   text; past 1600px the whole reading area keeps growing, so the page keeps its proportions on any desktop. Widths are
   in em of the reading type, so the measure stays near 75 to 80 characters at every size. ---- */
.read { max-width: 760px; margin: 0 auto; padding-block: clamp(36px, 6vw, 72px) 128px; display: grid; grid-template-columns: minmax(0, 1fr); }
.rail { display: none; }
@media (min-width: 600px) {
  /* the reading frame's measures live on the root, so the bar above can stand on the same edges */
  :root { --fs: clamp(18px, calc(15.8px + 0.36vw), 20.2px); --text: 33em; --frame: var(--text); }
  .read { font-size: var(--fs); max-width: var(--text); }
}
@media (min-width: 1024px) {
  :root { --rail: 12.5em; --g1: 2.4em; --frame: calc(var(--rail) + var(--g1) + var(--text)); }
  .read { max-width: none; grid-template-columns: var(--rail) minmax(0, var(--text)); column-gap: var(--g1);
          justify-content: center; }
  /* the rail: the contents, scrolling on their own, and at their foot the reading-level switch. Under the opener it
     starts below the first screen, so the opener's two buttons and the switch are never on the screen together */
  .rail { display: flex; flex-direction: column; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar) + 28px); align-self: start;
          max-height: calc(100vh - var(--bar) - 56px); }
  .rail .toc { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 6px; padding-bottom: 1.6em;
               -webkit-mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); }
  /* the rail's sizes follow the reading type, so it grows with it */
  .rail .toc { font-size: 0.758em; }
  .rail .toc h2 { font-size: 0.822em; }
  .rail .toc .sec > a { font-size: 1.2em; }
  .rail .toc .eb { font-size: 0.733em; }
  .rail .level { flex: none; margin: 0.9em 0 0; padding-top: 0.9em; border-top: 1px solid var(--rule); transition: opacity 0.3s, visibility 0.3s; }
  /* on a short screen the rail's foot can rise into view while the opener's buttons are still showing: it waits for them to go */
  html:not(.past-hero) .rail .level { opacity: 0; visibility: hidden; }
  .rail .level-label { font-size: 0.606em; }
  .rail .level button { min-height: 2em; padding: 0 0.63em; font-size: 0.69em; }
  #doc h2, #doc section.sources h2 { font-size: 2.15em; }
  #doc h3 { font-size: 1.52em; }
  #doc figure.dia { max-width: 27.4em; }
}
@media (min-width: 1360px) {
  :root { --rail: 12em; --g1: 2.2em; --text: 32em; --g2: 2.2em; --note: 14em;
          --frame: calc(var(--rail) + var(--g1) + var(--text) + var(--g2) + var(--note)); }
  html:not(.level-plain) .read { grid-template-columns: var(--rail) minmax(0, calc(var(--text) + var(--g2) + var(--note))); }
  html:not(.level-plain) #doc > .unit:not(.has-plain) { max-width: calc(var(--text) + 64px); }
  /* a section beside its margin note: in the full study, and in plain words once a section is opened in full */
  html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open { display: grid;
          grid-template-columns: minmax(0, var(--text)) var(--note); grid-template-areas: "head head" "full note"; column-gap: var(--g2);
          align-items: start; }
  :is(html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open) > :is(h2, h3) { grid-area: head; }
  :is(html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open) > .full { grid-area: full; min-width: 0;
          margin-top: 0; padding-top: 0; border-top: 0; }
  :is(html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open) > .plain { display: block; grid-area: note;
          position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar) + 28px); margin: 0.3em 0 0; padding-left: 1.1em;
          border-left: 1px solid var(--gold-2); font-size: 0.84em; color: var(--fg-2); }
  :is(html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open) > .plain::before { content: "In plain words";
          display: block; margin-bottom: 0.55em; font-weight: 700; font-size: 0.72em; letter-spacing: 0.2em; text-transform: uppercase;
          color: var(--gold); }
  :is(html:not(.level-plain) #doc .unit.has-plain, html.level-plain #doc > .unit.has-plain.open) > .plain p { font-size: 1em; line-height: 1.55; }
  html:not(.level-plain) #doc .unit.has-plain > .plain .more { display: none; }
  /* plain words on a wide screen: the sections' short paragraphs set as a storyboard of cards, two to a row, in order.
     A card's share of its row follows its length (the paragraph's characters, and its title's weighted for the larger
     type), so the two cards of a row end together; each card's button stands at its foot. A card alone on its row (the
     last of an odd group, or the one before a card opened in full) fills the row and sets its title beside its
     paragraph. The opening, the group titles, the questions and the sources keep the text measure. */
  html.level-plain .read { grid-template-columns: var(--rail) minmax(0, calc(var(--text) + var(--g2) + var(--note))); }
  html.level-plain #doc { display: flex; flex-wrap: wrap; column-gap: var(--g2); align-content: flex-start; }
  html.level-plain #doc > .unit { flex: 0 0 100%; }
  html.level-plain #doc > .unit:not(.has-plain), html.level-plain #doc > .unit[data-unit="intro"]:not(.open) { max-width: calc(var(--text) + 64px); }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) { --k: 1.2; flex: calc(var(--pl) + var(--k) * var(--tl)) 1 0;
          min-width: 28%; container: card / inline-size; display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
          grid-template-rows: auto 1fr; column-gap: 1.6em; margin: 0 0 var(--g2); padding: 1.15em 1.3em 1.25em;
          border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > :is(h2, h3) { grid-column: 1 / -1; margin: 0 0 0.6em;
          padding-top: 0; border-top: 0; }
  /* a title's size follows its card's width, so a narrow card's title does not stand as a tower of short lines */
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > h2 { font-size: clamp(1.3em, calc(0.92em + 2.78cqi), 1.55em); }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > h2::before { display: none; }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > h3 { font-size: clamp(1.15em, calc(0.92em + 1.72cqi), 1.3em); }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > .plain { grid-column: 1 / -1; display: flex;
          flex-direction: column; margin: 0; }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > .plain p { font-size: 1em; }
  html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > .plain .more { margin-top: auto; align-self: flex-start; }
  html.level-plain #doc > .unit.group > h2 { margin-top: 1.2em; }
  @container card (min-width: 40em) {
    html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > :is(h2, h3) { grid-column: 1; grid-row: 1 / -1; margin: 0; }
    html.level-plain #doc > .unit.has-plain:not(.open):not([data-unit="intro"]) > .plain { grid-column: 2; grid-row: 1 / -1; }
  }
}
@media (min-width: 1600px) {
  :root { --fs: clamp(20.2px, calc(20.2px + (100vw - 1600px) * 0.0047), 26px); --rail: 13em; --g1: 2.6em; --text: 33em; --g2: 2.4em;
          --note: 15.5em; }
}
@media (min-width: 2200px) {
  :root { --rail: 15em; --note: 19em; }
}