/* ─── PALETTE TOKENS ──────────────────────────────────────
       Production palette is fixed at "ink". The token sets for
       slate and newsprint are kept so a future issue can switch
       by changing body[data-palette] without restyling. The
       palette switch in the header offers Auto (default, follows
       system), Light, and Dark.
    ─────────────────────────────────────────────────────────── */

    /* SHARED */
    :root {
      --clowder: #3D3966;      /* logo purple — never changes */
      --clowder-mid: #5954A0;
      --clowder-light: #C4C2E0;
      --white: #FFFFFF;
      --rule: 1px solid var(--accent);
      /* Accessibility floor: nothing renders below 1rem (16px). */
    }

    /* LIGHT — Ink & Ivory (default). The "Light" switcher option. */
    [data-palette="light"] {
      --bg:       #F6F3EC;
      --bg-2:     #EDEAE0;
      --fg:       #1A1830;
      --fg-muted: #5A5875;
      --accent:   #B08840;   /* aged gold — borders/markers only (fails 4.5:1 as text on ivory) */
      --accent-fg:#FFFFFF;
      --eyebrow-fg: #735A20;  /* darkened gold — mono eyebrows, passes 5.9:1 on ivory, 5.4:1 on bg-2 */
      --link-fg:    #735A20;   /* same darkened gold for in-body links on the light ground */
      --header-bg: var(--clowder);
      --header-fg: var(--white);
      --tag-bg:    var(--clowder-light);
      --tag-fg:    var(--clowder);
    }

    /* DARK — Slate & Signal. The "Dark" switcher option. */
    [data-palette="dark"] {
      --bg:       #111018;
      --bg-2:     #1E1C2A;
      --fg:       #E8E6F0;
      --fg-muted: #8E8CAA;
      --accent:   #38C9B4;
      --accent-fg:#111018;
      --eyebrow-fg: var(--clowder-light);  /* light purple — passes 10.9:1 on slate; --clowder itself fails 1.6:1 as text */
      --link-fg:    var(--accent);          /* teal — passes 9.2:1 on slate */
      --header-bg: #1E1C2A;
      --header-fg: var(--white);
      --tag-bg:    #2B2948;
      --tag-fg:    var(--clowder-light);
    }

    /* ─── BASE ────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: var(--bg);
      color: var(--fg);
      font-size: 17px;          /* prose baseline; nothing on the page goes below 16px */
      line-height: 1.65;
    }

    a { color: var(--link-fg); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* Section label — the small mono eyebrow over each titled block.
       Hierarchy comes from family (mono), color (accent), and letter
       spacing — NOT from uppercase transforms and NOT from sub-16px
       sizing. */
    .section-title {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .14em;
      color: var(--eyebrow-fg);
      margin-bottom: 1rem;
    }

    /* ─── PALETTE FLYOUT (header) ──────────────────────────────────
       A compact dropdown in the header bar. The trigger is a small
       pill showing the current scheme's icon + label + a chevron;
       opening the native <details> drops a three-option panel
       (Auto / Light / Dark) below it. Auto (default) follows the
       system color-scheme via prefers-color-scheme; Light and Dark
       are explicit overrides. setPalette() resolves 'auto', sets
       body[data-palette], updates the trigger label, and marks the
       active option. A matchMedia listener re-resolves auto when
       the system preference flips. Compact on every viewport so it
       never forces horizontal overflow on mobile.
    ─────────────────────────────────────────────────────────── */
    .palette-flyout {
      margin-left: auto;
      position: relative;
      flex-shrink: 0;
    }
    .palette-flyout-trigger {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      color: white;
      background: rgba(255,255,255,.14);
      border: 0;
      border-radius: 1.5rem;
      padding: .4rem .75rem;
      cursor: pointer;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      white-space: nowrap;
    }
    .palette-flyout-trigger::-webkit-details-marker { display: none; }
    .palette-flyout-trigger .pf-icon { width: 1em; text-align: center; }
    .palette-flyout-trigger .pf-chevron { opacity: .7; font-size: .8em; }
    .palette-flyout[open] .palette-flyout-trigger .pf-chevron { transform: rotate(180deg); }
    .palette-flyout-panel {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: .4rem;
      background: var(--clowder);
      padding: .4rem;
      border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,.3);
      display: flex;
      flex-direction: column;
      gap: .15rem;
      min-width: 8rem;
      z-index: 80;
    }
    .palette-flyout-panel button {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      color: rgba(255,255,255,.8);
      background: transparent;
      border: 0;
      border-radius: 4px;
      padding: .45rem .6rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: .5rem;
      text-align: left;
      transition: background .15s, color .15s;
    }
    .palette-flyout-panel button:hover { background: rgba(255,255,255,.12); color: white; }
    .palette-flyout-panel button.active { background: rgba(255,255,255,.2); color: white; }
    .palette-flyout-panel button .pf-icon { width: 1.2em; text-align: center; }

    /* ─── HEADER ──────────────────────────────────────────── */
    header {
      background: var(--header-bg);
      color: var(--header-fg);
      border-bottom: 3px solid var(--accent);
    }

    .header-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 1.25rem 2rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }
    /* The palette switch sits at the right end of the header bar.
       margin-left:auto pushes it right of the masthead. */

    .logo-wrap {
      position: relative;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* Lift the logo up so it clears the header's bottom border line.
         margin-top: -25% would resolve against the container's WIDTH
         (~1160px -> -290px) and throw the logo off-screen. translateY
         is relative to the element's own height (64px -> -16px), the
         real intent. The spotlight travels with the logo. */
      align-self: flex-start;
      transform: translateY(-15%);
    }
    /* Spotlight behind the logo. A soft radial-gradient glow sits
       behind the cat so the purple-on-purple logo reads against the
       purple header ground. Subtle: a light-tinted radial that fades
       to transparent before the wrap edge, so the header stays one
       calm field and the logo just lifts off it. */
    .logo-wrap::before {
      content: "";
      position: absolute;
      inset: -18px -22px;
      background: radial-gradient(
        ellipse 55% 75% at 50% 50%,
        color-mix(in srgb, var(--header-bg) 0%, #fff 0%) 0%,
        transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    /* The glow color is a per-palette token so the spotlight reads on
       both the light (purple header) and dark (slate header) palettes. */
    [data-palette="light"] .logo-wrap::before,
    [data-palette="dark"] .logo-wrap::before {
      background: radial-gradient(
        ellipse 58% 52% at 58% 62%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.5) 45%,
        transparent 72%);
    }

    .logo-img {
      height: 64px;
      width: auto;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .masthead { display: flex; flex-direction: column; }

    .masthead-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -.5px;
      line-height: 1;
    }

    .masthead-tagline {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .12em;
      opacity: .7;
      margin-top: .35rem;
    }

    /* ─── DATELINE STRIP ──────────────────────────────────── */
    .dateline-strip {
      max-width: 1160px;
      margin: 0 auto;
      padding: .5rem 2rem;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      color: var(--fg-muted);
      letter-spacing: .04em;
      border-bottom: var(--rule);
    }

    /* ─── CONTENT SHELL ───────────────────────────────────── */
    main { display: block; }
    .content {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .hero-label {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .1em;
      color: var(--eyebrow-fg);
      margin-bottom: .6rem;
    }

    .hero-headline {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 2.6rem;
      line-height: 1.15;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .hero-deck {
      font-size: 1.0625rem;
      color: var(--fg-muted);
      margin-bottom: 1.25rem;
    }

    .pack-breadcrumb {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      margin-bottom: 1.5rem;
    }

    /* ─── DIVIDER ─────────────────────────────────────────── */
    .rule-block {
      max-width: 1160px;
      margin: 2rem auto;
      padding: 0 2rem;
      border-top: var(--rule);
    }

    /* ─── INDEX: THE ASK (two-column hero) ───────────────────
       The original ask is the hero on the top left — not boxed,
       not quoted, just the ask set large. Detected bias, intent,
       and the clean ask live inside a single native <details>
       accordion ("The Breakdown") on the top right, collapsed by
       default (no "open" attr). Each of the three parts is a
       labeled sub-block, not its own accordion. Native
       <details>/<summary> is keyboard- and screen-reader-
       accessible with no JS.
    ─────────────────────────────────────────────────────────── */
    .ask-hero {
      max-width: 1160px;
      margin: 2.5rem auto 0;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: start;
    }

    .ask-original {
      border-top: 3px solid var(--accent);
      padding-top: 1.25rem;
    }
    .ask-original .section-title { margin-bottom: 1.25rem; }
    .ask-original-body {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: var(--fg);
    }
    .ask-original-body p { margin-bottom: .75rem; }
    .ask-original-body p:last-child { margin-bottom: 0; }

    .ask-accordions {
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }
    .ask-accordions details {
      position: relative;
      border: 1px solid var(--clowder-light);
      border-radius: 6px;
      background: var(--bg-2);
    }
    .ask-accordions summary {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      font-weight: 500;
      color: var(--eyebrow-fg);
      padding: .85rem 1.1rem;
      cursor: pointer;
      list-style: none;            /* hide default triangle */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .ask-accordions summary::-webkit-details-marker { display: none; }
    .ask-accordions summary::after {
      content: "＋";
      color: var(--eyebrow-fg);
      font-size: 1.125rem;
      line-height: 1;
    }
    .ask-accordions details[open] summary::after { content: "−"; }
    /* Open-state body floats as an overlay panel so expanding the
       accordion does NOT grow the .ask-hero grid row — "Thoughts
       from Big Whisker" below stays anchored. The body leaves
       normal flow, sits under the summary with a solid ground +
       shadow, and scrolls if it runs past 70vh. */
    .ask-accordions details[open] {
      border-radius: 6px 6px 0 0;
      border-bottom-color: transparent;
    }
    .ask-accordions details[open] .accordion-body {
      position: absolute;
      top: 100%;
      left: -1px;
      right: -1px;
      max-height: 70vh;
      overflow-y: auto;
      background: var(--bg-2);
      border: 1px solid var(--clowder-light);
      border-top: 0;
      border-radius: 0 0 6px 6px;
      box-shadow: 0 12px 28px rgba(0,0,0,.16);
      z-index: 20;
    }
    .ask-accordions .accordion-body {
      padding: 0 1.1rem 1.1rem;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--fg);
    }
    .ask-accordions .accordion-body p { margin-bottom: .6rem; }
    .ask-accordions .accordion-body p:last-child { margin-bottom: 0; }
    .ask-accordions .accordion-body ul,
    .ask-accordions .accordion-body ol { padding-left: 1.5rem; margin: 0 0 .6rem; }
    .ask-accordions .accordion-body li { margin-bottom: .4rem; }
    /* Part labels inside the single "The Breakdown" accordion.
       Each of the three parts (bias, intent, clean ask) is a
       labeled sub-block, not its own accordion. */
    .ask-accordions .breakdown-part-title {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--eyebrow-fg);
      margin: 1.25rem 0 .5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--clowder-light);
    }
    .ask-accordions .breakdown-part-title:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
    /* Close affordance for the mobile full-screen breakdown modal.
       Hidden on desktop (the overlay panel closes via its summary);
       revealed on narrow viewports inside the modal. */
    .breakdown-close {
      display: none;
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 201;
      width: 2.5rem;
      height: 2.5rem;
      border: 1px solid var(--clowder-light);
      border-radius: 50%;
      background: var(--bg-2);
      color: var(--eyebrow-fg);
      font-family: 'DM Mono', monospace;
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
    }
    .breakdown-close:hover { background: var(--clowder-light); }
    /* Heading for the mobile full-screen breakdown modal. Fixed
       top-left of the modal (the X sits top-right), hidden on
       desktop. */
    .breakdown-modal-title {
      display: none;
      position: fixed;
      top: 1.6rem;
      left: 1.25rem;
      z-index: 201;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .14em;
      color: var(--eyebrow-fg);
      margin: 0;
    }

    /* ─── INDEX: BIG WHISKER SAYS ───────────────────────────
       A short letter from the editor (Big Whisker) reflecting on
       the ask and the office's read of it. The portrait floats
       left and the body flows around it at full container width —
       no column split. Voice lives in the pack; here it's just a
       framed editorial block under the ask.
    ─────────────────────────────────────────────────────────── */
    .whisker-block {
      max-width: 1160px;
      margin: 2.75rem auto 0;
      padding: 0 2rem;
    }
    .whisker-row {
      display: flow-root;       /* contain the float, no column split */
    }
    .whisker-portrait {
      float: left;
      width: 110px;
      height: auto;
      margin: 0;          /* the image carries its own padding; no CSS gap */
      padding-right: 2%;
    }
    .whisker-body p { margin-bottom: 1rem; }
    .whisker-body p:last-child { margin-bottom: 0; }

    /* ─── INDEX: PACKS INTRO + LIST ──────────────────────────
       A short intro to the packs (what the reader is about to
       read and how to move through them) sits above the packs
       list, in the same block.
    ─────────────────────────────────────────────────────────── */
    .packs-intro-block {
      max-width: 1160px;
      margin: 2.75rem auto 0;
      padding: 0 2rem;
    }
    .packs-intro-body {
      margin-bottom: 1.5rem;
      color: var(--fg-muted);
    }
    .packs-intro-body p { margin-bottom: .75rem; }
    .packs-intro-body p:last-child { margin-bottom: 0; }

    .packs-list {
      list-style: none;
      counter-reset: pack;
      border-top: 1px solid var(--clowder-light);
    }
    .packs-list li {
      counter-increment: pack;
      border-bottom: 1px solid var(--clowder-light);
    }
    .packs-list a {
      display: flex;
      flex-direction: column;
      gap: .25rem;
      padding: 1rem .25rem 1rem 2.75rem;
      color: var(--fg);
      position: relative;
    }
    .packs-list a::before {
      content: counter(pack, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 1rem;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      color: var(--eyebrow-fg);
      letter-spacing: .04em;
    }
    .packs-list a:hover { text-decoration: none; background: var(--bg-2); }

    .packs-list .pack-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--fg);
    }
    .packs-list .pack-role {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .02em;
      color: var(--fg-muted);
    }

    /* ─── INDEX: EDITOR ANGLES + FOLLOWUP INTERVIEWS ─────────
       Two new bottom-of-home blocks. Editor angles: one-line
       story angles with a short why-paragraph each, for a human
       reporter approaching the report. Follow-up interviews:
       people/orgs to follow up with per angle. Both are asker-
       facing and flow full-width — no measure constraint on the
       prose so the angles and the follow-up subjects breathe.
    ─────────────────────────────────────────────────────────── */
    .editor-angles-block,
    .editor-followup-block {
      max-width: 1160px;
      margin: 2.75rem auto 0;
      padding: 0 2rem;
    }
    .editor-angles-body,
    .editor-followup-body { max-width: none; }
    .editor-angles-body h3,
    .editor-followup-body h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.25rem;
      line-height: 1.3;
      margin: 1.75rem 0 .5rem;
    }
    .editor-angles-body h3:first-child,
    .editor-followup-body h3:first-child { margin-top: 0; }
    .editor-angles-body p,
    .editor-followup-body p { margin-bottom: 1rem; }
    .editor-angles-body p:last-child,
    .editor-followup-body p:last-child { margin-bottom: 0; }
    .editor-followup-body ul { padding-left: 1.5rem; margin: 0 0 1rem; }
    .editor-followup-body li { margin-bottom: .4rem; }

    /* ─── INDEX: OVERHEARD AT THE CLOWDER ────────────────────
       A light, conversational two-paragraph snippet of the
       office's characters reminiscing about something that
       happened in the newsroom's past. Inside-baseball flavor —
       the reader listens in on a couple of the cats talking
       shop. Full-width, no measure constraint; prose reads as
       overheard dialogue, lightly italic.
    ─────────────────────────────────────────────────────────── */
    .overheard-block {
      max-width: 1160px;
      margin: 2.75rem auto 0;
      padding: 0 2rem;
    }
    .overheard-body { max-width: none; }
    .overheard-body p { margin-bottom: 1rem; }
    .overheard-body p:last-child { margin-bottom: 0; }
    .overheard-body em {
      font-family: 'DM Mono', monospace;
      font-style: normal;
      font-size: 1rem;
      color: var(--eyebrow-fg);
      letter-spacing: .04em;
    }

    /* Bottom-of-pack Back to The Ask nav — sits after the research
       output so a reader at the end can return without scrolling up.
       Same breadcrumb treatment as the top one, with top margin so it
       clears the research output. */
    .pack-bottom-nav {
      max-width: 1160px;
      margin: 3rem auto 0;
      padding: 1.5rem 2rem 0;
      border-top: 1px solid var(--clowder-light);
    }
    .pack-bottom-nav .pack-breadcrumb { margin-bottom: 0; }

    /* ─── PACK PAGE: FROM THE WRITERS ────────────────────────
       Short (2-paragraph max) flourish from the writers at the
       top of each pack. Only the <p> elements are held to a half
       measure; lists, blockquotes, and tables flow wider.
    ─────────────────────────────────────────────────────────── */
    .writer-narrative-block,
    .research-summary-block,
    .research-output,
    .research-toc {
      max-width: 1160px;
      margin: 2.5rem auto 0;
      padding: 0 2rem;
    }

    .writer-narrative-body p,
    .research-summary-body p {
      margin-bottom: 1rem;
    }
    .writer-narrative-body p:last-child,
    .research-summary-body p:last-child { margin-bottom: 0; }

    /* Research summary subheadings — the digger writes thematic ####
       subheadings to break a long summary; render them as a lighter
       hierarchy than the research-output findings below (the summary
       is a lead-in, not the findings themselves). h3 = the part-name
       separator when a pack draws on multiple research packs; h4 = the
       digger's thematic subheads. */
    .research-summary-body h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.25rem;
      line-height: 1.3;
      margin: 1.75rem 0 .5rem;
    }
    .research-summary-body h3:first-child { margin-top: 0; }
    .research-summary-body h4 {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--eyebrow-fg);
      margin: 1.5rem 0 .4rem;
      padding-top: .25rem;
    }
    .research-summary-body h4:first-child { margin-top: 0; }

    /* ─── PACK PAGE: RESEARCH TABLE OF CONTENTS ───────────────
       Desktop: fully visible inline (open by default) — the reader
       sees the whole list and scrolls past it. Not sticky, not
       collapsed, no height cap. Mobile: collapsed disclosure by
       default, capped at 50vh when expanded so it never eats the
       small viewport. Per-finding "Back to Table of Contents" links
       handle return navigation on both. The native <details>/
       <summary> is the disclosure; the open/closed default is set by
       JS off the 860px breakpoint.
    ─────────────────────────────────────────────────────────── */
    .research-toc {
      border-bottom: 1px solid var(--clowder-light);
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .research-toc-details { width: 100%; }
    .research-toc-trigger {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .14em;
      color: var(--eyebrow-fg);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0;
      margin-bottom: 1rem;
    }
    .research-toc-trigger::-webkit-details-marker { display: none; }
    .research-toc-trigger::after {
      content: "＋";
      color: var(--eyebrow-fg);
      font-size: 1.125rem;
      line-height: 1;
    }
    .research-toc-details[open] .research-toc-trigger::after { content: "−"; }
    .research-toc-details[open] .research-toc-trigger { margin-bottom: 1rem; }

    /* ─── PACK PAGE: RESEARCH TABLE OF CONTENTS ──────────────
       A navigable list of the findings/sections in this pack so
       the reader can see how many there are and jump between
       them. Each entry links to the matching id anchor the
       publisher stamps on the finding heading. Kept compact:
       numbers + title only. The author/institution is NOT listed
       here (it lives on the finding itself) so the row never
       overflows the container.
    ─────────────────────────────────────────────────────────── */
    .research-toc-list {
      list-style: none;
      counter-reset: toc;
      border-top: 1px solid var(--clowder-light);
      /* Desktop: no height cap — the ToC is fully visible inline and the
         reader scrolls past it. Mobile caps at 50vh (in the @media block
         below) so an expanded disclosure never eats the small viewport. */
    }
    .research-toc-list li {
      counter-increment: toc;
      border-bottom: 1px solid var(--clowder-light);
    }
    .research-toc-list a {
      display: flex;
      align-items: baseline;
      gap: .75rem;
      padding: .6rem .25rem .6rem 2.5rem;
      position: relative;
      color: var(--fg);
    }
    .research-toc-list a::before {
      content: counter(toc, decimal-leading-zero);
      position: absolute;
      left: 0;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      color: var(--eyebrow-fg);
    }
    .research-toc-list a:hover { background: var(--bg-2); text-decoration: none; }
    .research-toc-list .toc-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--fg);
      flex: 1 1 auto;
      min-width: 0;
    }

    /* "Back to Table of Contents" link — injected by the template
       at the end of each finding so the reader can jump back to the
       ToC after reading one. Template-owned (not publisher-owned)
       so it can't be forgotten. Right-aligned, small mono link. */
    .back-to-toc-row {
      margin: 1.5rem 0 2rem;
      text-align: right;
    }
    .back-to-toc {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      color: var(--link-fg);
    }

    /* ─── PACK PAGE: RESEARCH OUTPUT ─────────────────────────
       The findings stand on their own. Headings, lists,
       blockquotes, tables, and links from the rendered pack flow
       through these styles. Prose <p> is held to a half measure
       for scannability; structured content (lists, tables,
       blockquotes, headings) uses the full content width.
    ─────────────────────────────────────────────────────────── */
    .research-output-body { }
    .research-output-body h2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.6rem;
      line-height: 1.25;
      margin: 2.25rem 0 .75rem;
      padding-top: .5rem;
    }
    .research-output-body h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.25rem;
      line-height: 1.3;
      margin: 1.75rem 0 .5rem;
    }
    .research-output-body h4 {
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 1.25rem 0 .4rem;
    }
    /* Prose paragraphs and structured content (lists, tables,
       blockquotes, headings, hr, code) all span the full content
       width. */
    .research-output-body p {
      margin: 0 0 1rem;
    }
    .research-output-body ul,
    .research-output-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
    .research-output-body li { margin-bottom: .4rem; }

    /* Finding meta — the small field list under each finding,
       rendered by the publisher as <ul class="finding-meta"> and
       laid out as a wrapping chip row (masonry-style) so it takes
       a fraction of the vertical space a stacked list would. The
       publisher emits exactly these fields in this order: Date,
       Source (as a link), Author, Institution, Origin type.
       Query branch is NOT included. Each field is its own chip so
       a long author or institution wraps inside its chip instead
       of stretching the row past the container. */
    .research-output-body ul.finding-meta {
      list-style: none;
      padding-left: 0;
      display: flex;
      flex-wrap: wrap;
      gap: .35rem .75rem;
      margin: 0 0 .75rem;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      color: var(--fg-muted);
    }
    .research-output-body ul.finding-meta li {
      background: var(--bg-2);
      border: 1px solid var(--clowder-light);
      border-radius: 4px;
      padding: .2rem .55rem;
      margin-bottom: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .research-output-body ul.finding-meta li strong {
      color: var(--eyebrow-fg);
      font-weight: 500;
    }
    /* Source chip link — the Source field carries the external
       link inside its chip, not as a trailing paragraph. */
    .research-output-body ul.finding-meta li a {
      color: var(--link-fg);
      text-decoration: none;
      overflow-wrap: anywhere;
    }
    .research-output-body ul.finding-meta li a:hover { text-decoration: underline; }

    .research-output-body blockquote {
      margin: 1rem 0;
      padding: .75rem 1.1rem;
      background: var(--bg-2);
      border-left: 3px solid var(--accent);
      color: var(--fg-muted);
      font-style: italic;
    }
    .research-output-body code {
      font-family: 'DM Mono', monospace;
      font-size: .95em;
      background: var(--bg-2);
      padding: .1rem .3rem;
      border-radius: 3px;
    }
    .research-output-body table {
      border-collapse: collapse;
      width: 100%;
      margin: 0 0 1rem;
      font-size: 1rem;
    }
    .research-output-body th,
    .research-output-body td {
      border: 1px solid var(--clowder-light);
      padding: .5rem .7rem;
      text-align: left;
    }
    .research-output-body th { background: var(--bg-2); }
    .research-output-body hr {
      border: 0;
      border-top: 1px solid var(--clowder-light);
      margin: 2rem 0;
    }

    /* ─── SOURCE TRAIL PAGE ──────────────────────────────────
       The N.A.P. Protocol compendium: every authority assignment
       and why, every source used and why, every source rejected
       and why. One HTML file (source-trail.html) linked from the
       footer of every page. Reuses the research-output styles.
    ─────────────────────────────────────────────────────────── */
    .source-trail-intro {
      margin-bottom: 1.5rem;
      color: var(--fg-muted);
    }

    /* ─── FOOTER ──────────────────────────────────────────── */
    footer {
      background: var(--clowder);
      color: rgba(255,255,255,.7);
      padding: 2rem;
      text-align: center;
      margin-top: 3rem;
    }

    footer .footer-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      margin-bottom: .75rem;
    }

    footer img { height: 36px; }

    footer .footer-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      color: white;
    }

    footer p {
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
    }

    /* Source-trail link — prominent, sits on its own line. */
    footer .nap-link {
      margin: 1rem 0;
    }
    footer .nap-link a {
      display: inline-block;
      font-family: 'DM Mono', monospace;
      font-size: 1rem;
      letter-spacing: .04em;
      border: 1px solid rgba(255,255,255,.45);
      border-radius: 4px;
      padding: .5rem 1rem;
    }
    footer .nap-link a:hover { background: rgba(255,255,255,.12); text-decoration: none; }

    /* Footer links render white on the clowder-purple ground. */
    footer a,
    footer a:visited,
    footer a:hover,
    footer a:focus {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ─── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 860px) {
      .ask-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 0 1rem;
      }
      .whisker-block,
      .packs-intro-block,
      .editor-angles-block,
      .editor-followup-block,
      .overheard-block,
      .writer-narrative-block,
      .research-summary-block,
      .research-output,
      .research-toc { padding: 0 1rem; }
      .hero-headline { font-size: 2rem; }
      /* Mobile ToC: cap the expanded list at 50vh so the disclosure
         never eats the small viewport. Desktop has no cap — the
         ToC is fully visible inline and the reader scrolls past. */
      .research-toc-list { max-height: 50vh; overflow-y: auto; }
      /* Big Whisker on phones: portrait shrinks, body keeps
         flowing around it at full width. */
      .whisker-portrait { width: 88px; }

      /* ── "The Breakdown" as an aside button + full-screen modal ──
         On phones the breakdown stops being an in-flow accordion
         (which pushed the document down) and becomes a button on
         the same line as "The Ask". Opening it launches a full-
         screen modal with an X close top-right; the body scrolls
         inside the modal. */
      .ask-hero { position: relative; }
      .ask-accordions {
        position: absolute;
        top: calc(3px + 1.25rem);  /* align with "The Ask" text, below its border + padding-top */
        right: 0;
        width: auto;
      }
      /* no box — reads as a plain inline "The Breakdown +" link,
         not a button, so it sits naturally beside "The Ask" */
      .ask-accordions details {
        border: 0;
        background: transparent;
        border-radius: 0;
      }
      .ask-accordions summary {
        padding: 0;
        justify-content: flex-start;
        gap: .35rem;
      }
      /* reset the desktop open-box overrides so nothing visually
         attaches the link to the full-screen modal */
      .ask-accordions details[open] {
        border-radius: 6px;
        border-bottom-color: var(--clowder-light);
      }
      .ask-accordions details[open] .accordion-body {
        position: fixed;
        inset: 0;
        max-height: none;
        overflow-y: auto;
        background: var(--bg);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 3.5rem 1.25rem 1.5rem;
        z-index: 200;
      }
      .breakdown-close { display: block; }
      .breakdown-modal-title { display: block; }

      /* ── Mobile header: palette upper-right, logo + masthead centered ──
         Desktop lifts the logo with translateY(-15%) + align-self
         flex-start so the cat clears the header border. On a phone
         that lift reads as a wonky float — the masthead sits
         centered while the logo pokes up. Pin the palette flyout to
         the upper-right corner of the header and let the logo +
         masthead row re-center vertically. */
      header { position: relative; }
      .header-inner {
        padding: 1rem 1rem 1.1rem;
        gap: 1rem;
        align-items: center;
      }
      /* drop the desktop lift on mobile so the logo re-centers */
      .logo-wrap {
        align-self: center;
        transform: none;
      }
      /* the spotlight can shrink a touch on a small header */
      .logo-img { height: 52px; }
      /* pin the palette flyout to the header's upper-right corner */
      .palette-flyout {
        position: absolute;
        top: .65rem;
        right: .75rem;
        margin-left: 0;
      }
      /* keep the open panel anchored under the trigger, not the header */
      .palette-flyout-panel {
        right: 0;
        top: 100%;
      }
    }