/* Self-hosted fonts — same faces the live marketing site + article/research
     pages use (styles/main.css). Paths are relative to /drafts/. */
  @font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../assets/CabinetGrotesk_Complete/Fonts/WEB/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Source Serif 4';
    src: url('../assets/fonts/source-serif-4-wght-normal.woff2') format('woff2-variations');
    font-weight: 200 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Source Serif 4';
    src: url('../assets/fonts/source-serif-4-wght-italic.woff2') format('woff2-variations');
    font-weight: 200 900; font-style: italic; font-display: swap;
  }

  :root {
    --ink:        #281207;
    --paper:      #faf6ec;
    --manila:     #f5f0e2;
    --manila-tab: #ede5d2;
    --hairline:   #c5b49f;
    --mustard:    #dba605;
    --muted:      #755c47;
    --green:      #477c51;
    --coral:      #ec886c;
    --red:        #a8301c;
    --purple:     #7f59a1;
    --brown-6:    #4a3324;
    --brown-5:    #6d5441;
    --brown-4:    #8f755e;
    --brown-1:    #f5ebde;
    --eggshell-5: #d3cdbf;
    --yellow-wm:  #f2c94c;

    --content: 1440px;
    --reading: 1280px;

    --card:      var(--manila);
    --card-edge: var(--hairline);
    --rule:      rgba(40, 18, 7, 0.14);
    --tab-shadow: 8px 3px 14px rgba(41, 18, 8, 0.32);

    --f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --f-sans:  'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --gutter: clamp(20px, 5vw, 72px);
    --measure: 62ch;
    --radius: 12px;
    --radius-sm: 4px;
    --f-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --brown-band: #4a3324;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  }

  /* This test build is light-only. The dark palette is kept below as an
     explicit data-theme="dark" override, but auto-following the OS is off. */
  :root[data-theme="dark"] {
    --ink: #f2e9d8; --paper: #1c120b; --manila: #261912; --manila-tab: #2e2018;
    --hairline: #5a4433; --muted: #b39a80; --green: #7fb388; --mustard: #e0b23c;
    --coral: #f0a084; --red: #e0654a;
    --card: var(--manila); --card-edge: var(--hairline);
    --rule: rgba(242, 233, 216, 0.14);
    --tab-shadow: 8px 3px 14px rgba(0, 0, 0, 0.45);
  }
  :root[data-theme="light"] {
    --ink: #281207; --paper: #faf6ec; --manila: #f5f0e2; --manila-tab: #ede5d2;
    --hairline: #c5b49f; --muted: #755c47; --green: #477c51; --mustard: #dba605;
    --coral: #ec886c; --red: #a8301c;
    --card: var(--manila); --card-edge: var(--hairline);
    --rule: rgba(40, 18, 7, 0.14);
    --tab-shadow: 8px 3px 14px rgba(41, 18, 8, 0.32);
  }

  * { box-sizing: border-box; }

  /* CSP-safe utilities: this page ships under the site's strict style-src 'self'
     (no inline style attributes allowed), so these replace former inline styles. */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mt12 { margin-top: 12px; }
  .mt4 { margin-top: 4px; }

  /* Photo-ID match-confidence chiclet — same buckets + colours as the app
     (Figma match_confidence_chip), sized up for these cards. */
  .matchrow { margin: 0 0 6px; }
  .matchchip {
    display: inline-block; padding: 4px 10px 3px; border-radius: 4px;
    font-family: var(--f-sans); font-weight: 500; font-size: 12px; line-height: 14px;
    letter-spacing: 0.8px; color: #FFF5DC; white-space: nowrap;
  }
  .matchchip--high   { background: #477C51; }
  .matchchip--medium { background: #9A710A; }
  .matchchip--low    { background: #4C69AC; }
  /* Photo cards: chip sits directly above the scientific name, and the
     description-to-sci-name gap is halved (16 -> 8 resolved, 12 -> 4 slim). */
  .rec--photo .sci { margin-top: 0; }
  .rec--photo .headrow { margin-bottom: 8px; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-serif);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: var(--content); margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--gutter) 96px; }

  .codepair {
    display: flex;
    gap: 12px;
    align-items: baseline;
    white-space: nowrap;
    color: var(--ink);
  }
  .codepair .num {
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.72px;
  }
  .codepair .lbl {
    font-family: var(--f-sans);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
  }

  h1 {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: clamp(2.75rem, 6vw + 0.5rem, 80px);
    line-height: 1.103;
    letter-spacing: 0;
    color: var(--brown-6);
    text-wrap: balance;
    margin: 0;
  }

  .standfirst { max-width: var(--reading); color: var(--muted); font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 1.35; margin: 0 0 8px; }

  /* ── Location ─────────────────────────────────────────────────── */
  .locbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 14px 18px; background: var(--manila-tab);
    border: 1px solid var(--card-edge); border-radius: var(--radius);
    margin-bottom: 12px; max-width: var(--reading);
  }
  .locbar .place { font-family: var(--f-sans); font-weight: 600; font-size: 15px; }
  .locbar .place.unset { color: var(--muted); font-weight: 500; font-style: italic; }
  .locbar button {
    font-family: var(--f-sans); font-size: 13px;
    background: none; border: 1px solid var(--card-edge); border-radius: 4px;
    color: var(--ink); padding: 5px 12px; cursor: pointer;
  }
  .locbar button:hover { background: var(--card); }
  .locbar button:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
  .locbar button[disabled] { opacity: 0.5; cursor: default; }

  /* Approximate-location note: shown when the browser's geolocation fix is coarse
     (desktop Wi-Fi/IP), which near a county line can resolve the wrong county. */
  .locnote { display: none; margin: 0 0 12px; max-width: var(--reading); padding: 12px 15px; border: 1px solid var(--card-edge); border-left: 3px solid var(--mustard); border-radius: 4px; background: var(--manila-tab); }
  .locnote.open { display: block; }
  .locnote p { margin: 0; font-size: 0.94rem; line-height: 1.5; max-width: 62ch; }
  .locnote-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .locnote-actions button { font-family: var(--f-sans); font-size: 13px; background: none; border: 1px solid var(--card-edge); border-radius: 4px; color: var(--ink); padding: 6px 14px; cursor: pointer; }
  .locnote-actions button:hover { background: var(--card); }
  .locnote-actions button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .locnote-actions button:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }

  .locsearch { margin: -4px 0 12px; display: none; max-width: var(--reading); }
  .locsearch.open { display: block; }
  .locsearch input {
    width: 100%; font-family: var(--f-serif); font-size: 1rem;
    padding: 11px 14px; background: var(--card); color: var(--ink);
    border: 1px solid var(--card-edge); border-radius: 4px;
  }
  .locsearch input:focus-visible { outline: 2px solid var(--mustard); outline-offset: 1px; }
  .locopts { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--card-edge); border-radius: 6px; overflow: hidden; }
  .locopts:empty { display: none; }
  .locopts li {
    font-family: var(--f-sans); font-size: 14px; padding: 9px 14px; cursor: pointer;
    border-top: 1px solid var(--rule);
  }
  .locopts li:first-child { border-top: 0; }
  .locopts li:hover, .locopts li[aria-selected="true"] { background: var(--manila-tab); }
  .locopts li { font-weight: 400; }
  .locopts li .st { font-weight: 600; }

  /* ── Entry ────────────────────────────────────────────────────── */
  .entry { display: flex; margin-bottom: 8px; }
  .entry-actions { display: flex; gap: 10px; margin: 0 0 34px; }
  .entry input {
    flex: 1 1 320px; max-width: 806px; font-family: var(--f-serif); font-size: 1rem;
    padding: 13px 15px; background: var(--card); color: var(--ink);
    border: 1px solid var(--card-edge); border-radius: 4px;
  }
  .entry input::placeholder { color: var(--muted); opacity: 0.75; }
  .entry input:focus-visible { outline: 2px solid var(--mustard); outline-offset: 1px; }
  .entry-actions .go {
    font-family: var(--f-sans); font-size: 14px; font-weight: 600; padding: 13px 22px;
    background: var(--green); color: var(--paper); border: 1px solid var(--green);
    border-radius: 4px; cursor: pointer;
  }
  .entry-actions .go:hover { background: #2c5f39; border-color: #2c5f39; }
  .entry-actions .photo {
    font-family: var(--f-sans); font-size: 14px; font-weight: 600; padding: 13px 18px;
    background: var(--purple); color: var(--paper); border: 1px solid var(--purple);
    border-radius: 4px; cursor: pointer;
  }
  .entry-actions .photo:hover { background: #6e4a8c; }
  .entry-actions .go:focus-visible, .entry-actions .photo:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
  .entry-actions .go[disabled] { opacity: 0.5; cursor: default; }
  .hint { font-family: var(--f-sans); font-size: 13px; color: var(--muted); margin: 0 0 8px; max-width: var(--reading); }
  .hint b { color: var(--ink); font-weight: 700; }

  /* ── Record cards: marketing-site tab structure ───────────────── */
  .records { display: flex; flex-direction: column; gap: 18px; }
  .records:empty { display: none; }

  .rec { display: flex; flex-direction: column; align-items: stretch; }

  .rec .tabrow { width: 100%; }
  .rec .tab {
    display: inline-flex; align-items: center;
    padding: 8px 24px;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
    max-width: 100%;
  }
  .rec .tab .plant {
    font-family: var(--f-sans);
    font-weight: 900;
    font-size: clamp(1.7rem, 2.4vw + 0.4rem, 36px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rec .body {
    background: var(--card);
    border: 1px solid var(--card-edge);
    padding: 24px 28px;
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    display: grid;
    grid-template-columns: 302px 1fr;
    gap: 22px;
    align-items: start;
  }
  .rec.slim .body { grid-template-columns: 1fr; }

  .shot { display: flex; flex-direction: column; gap: 7px; margin: 0; }
  .shot .frame {
    width: 302px; height: 302px;
    border: 1px solid var(--card-edge);
    border-radius: 4px;
    overflow: hidden;
    background: var(--manila-tab);
  }
  .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .shot .frame.empty {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-sans); font-size: 12px; line-height: 1.35;
    color: var(--muted); text-align: center; padding: 0 14px;
  }
  .shot .credit {
    font-family: var(--f-sans);
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
    width: 302px;
  }
  /* Collapsible per-photo licence — carries the full GFDL text when required. */
  .shot .credit .license-box { margin-top: 4px; }
  .shot .credit summary { cursor: pointer; list-style: none; color: var(--muted); }
  .shot .credit summary::-webkit-details-marker { display: none; }
  .shot .credit summary::before { content: '\25B8\00A0'; }
  .shot .credit details[open] summary::before { content: '\25BE\00A0'; }
  .shot .credit summary:hover { color: var(--ink); }
  .shot .credit .license-body { margin-top: 6px; }
  .shot .credit .license-links { margin: 0 0 6px; }
  .shot .credit .license-links a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 2px; }
  .shot .credit .license-full {
    max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.4;
    color: var(--muted); background: var(--paper); border: 1px solid var(--card-edge);
    border-radius: 4px; padding: 8px 10px; margin: 0;
  }

  .rec .sci {
    font-family: var(--f-serif); font-style: italic; color: var(--muted);
    font-size: 24px; margin: 14px 0 4px;
  }
  .rec .verdict { margin: 0; max-width: 62ch; font-size: 18px; }
  .rec .note {
    font-family: var(--f-sans); font-size: 13px; color: var(--muted);
    margin: 10px 0 0; max-width: 54ch;
  }

  .tagrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }

  /* Scientific name + tags share one row (Figma: name left, tags/links right). */
  .headrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
  .headrow .sci { margin: 0; flex: 0 0 auto; }
  .headrow .tagrow { flex: 1 1 260px; }

  .tag {
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    padding: 8px 16px;
    border-radius: 12px;
    white-space: nowrap;
    color: #281207;
  }
  .tag.native     { background: #a1c2a6; }
  .tag.introduced { background: #f9cf4b; }
  .tag.invasive   { background: #ec886c; }
  .tag.notnative  { background: #e2dbcc; }
  .tag.clear      { background: none; border: 1px solid var(--card-edge); color: var(--muted); }
  .tag.pending    { background: none; border: 1px dashed var(--card-edge); color: var(--muted); font-weight: 600; }

  .meta {
    margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    font-family: var(--f-sans); font-size: 12px; color: var(--muted);
  }
  .meta .counties { font-variant-numeric: tabular-nums; }
  .meta a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
  .meta a:hover { text-decoration-color: var(--mustard); }
  .meta a:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }

  /* ── Reference block: tag legend (4-col) + provenance (Figma 537:7205) ── */
  .refblock { margin-top: 62px; display: flex; flex-direction: column; gap: 12px; }
  .ref-label { font-family: var(--f-sans); text-transform: uppercase; color: var(--ink); margin: 0; }
  .ref-label--lg { font-weight: 800; font-size: 20px; letter-spacing: 1.98px; }
  .ref-tags { display: flex; flex-direction: column; gap: 16px; }
  .tag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: start; }
  .tag-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .tag-desc { font-family: var(--f-serif); font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0; }

  /* ── Alternatives ─────────────────────────────────────────────── */
  .alts {
    margin-top: 16px; padding: 18px 20px;
    border: 1px dashed var(--card-edge); border-radius: var(--radius);
    background: var(--manila-tab);
  }
  .alts .lede {
    font-family: var(--f-sans); font-size: 13px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
  }
  .alts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .alts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  .alts .name { font-family: var(--f-sans); font-weight: 700; font-size: 1rem; }
  .alts .lat { font-style: italic; color: var(--muted); font-size: 0.95rem; }
  .alts .why { font-family: var(--f-sans); font-size: 12px; color: var(--muted); }
  .alts .why b { color: var(--ink); font-weight: 700; }

  /* ── States / feedback ────────────────────────────────────────── */
  .banner {
    font-family: var(--f-sans); font-size: 14px; padding: 12px 16px;
    border: 1px solid var(--card-edge); border-left: 3px solid var(--mustard);
    border-radius: 4px; background: var(--manila-tab); margin: 0 0 20px; max-width: var(--measure);
  }
  .banner.err { border-left-color: var(--red); }
  .rec.loading .body { color: var(--muted); font-family: var(--f-sans); font-size: 14px; }
  .spin { display:inline-block; width:13px; height:13px; border:2px solid var(--hairline); border-top-color: var(--ink); border-radius:50%; animation: sp 0.7s linear infinite; vertical-align:-2px; margin-right:8px; }
  @keyframes sp { to { transform: rotate(360deg); } }

  /* Confirm block for low-confidence resolves. */
  .confirm {
    margin: 16px 0 0; padding: 12px 15px;
    border: 1px solid var(--card-edge); border-left: 3px solid var(--mustard);
    border-radius: 4px; background: var(--manila-tab);
  }
  .confirm p { margin: 0; font-size: 0.94rem; max-width: 54ch; }
  .confirm .pct { font-family: var(--f-sans); font-weight: 700; font-variant-numeric: tabular-nums; }

  /* ── Provenance / sources list (divider-ruled rows, 819px) ────────── */
  .ref-sources { display: flex; flex-direction: column; gap: 12px; }
  .ref-sources .ref-label { font-weight: 700; font-size: 12px; letter-spacing: 1.98px; }
  .src-list { margin: 0; max-width: 819px; display: flex; flex-direction: column; gap: 8px; }
  .src-row { display: flex; gap: 20px; align-items: center; }
  .src-row dt { font-family: var(--f-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); width: 140px; flex-shrink: 0; }
  .src-row dd { flex: 1; margin: 0; font-family: var(--f-serif); font-size: 15px; line-height: 1.5; color: var(--ink); }
  .src-row dd a { color: inherit; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
  .src-rule { height: 1px; width: 100%; background: var(--hairline); opacity: 0.5; }
  .refblock .caveat { margin-top: 22px; font-size: 0.95rem; color: var(--muted); max-width: none; }

  /* ── Closing CTA band (Figma 531:5325) ───────────────────────────── */
  .closer { margin-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .closer__cta { font-family: var(--f-sans); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; color: var(--ink); background: var(--mustard); border: 2px solid var(--ink); border-radius: 4px; padding: 12px 32px; text-decoration: none; white-space: nowrap; }
  .closer__cta:hover { background: #c9960a; }
  .closer__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .closer__note { font-family: var(--f-serif); font-style: italic; font-size: 17px; line-height: 1.5; opacity: 0.78; color: var(--ink); max-width: 640px; margin: 0; }

  @media (max-width: 860px) { .tag-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
  @media (max-width: 560px) {
    .tag-grid { grid-template-columns: 1fr; }
    .src-row { flex-direction: column; gap: 2px; align-items: flex-start; }
    .src-row dt { width: auto; }
  }

  /* ── Photo upload (revealed only after "Use a photo") ──────────────
     Figma comment: "this only shows on the use a photo selection". */
  .photozone { display: none; margin: 0 0 34px; }
  .photozone.open { display: block; }
  .photozone .pz-inner {
    border: 1px solid var(--card-edge); border-radius: 8px;
    background: var(--manila-tab); min-height: 200px; padding: 24px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
  }
  .photozone .pz-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .photozone .pz-icon { width: 24px; height: 24px; display: block; }
  .photozone .pz-title { font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; margin: 0; color: var(--brown-6); }
  .photozone .pz-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .photozone .pz-actions button {
    font-family: var(--f-sans); font-weight: 500; font-size: 13px; padding: 8px 24px;
    background: var(--brown-1); color: var(--brown-5); border: 1px solid var(--brown-5);
    border-radius: 4px; cursor: pointer;
  }
  .photozone .pz-actions button:hover { background: #efe4d3; }
  .photozone .pz-actions button:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
  .photozone .cf-turnstile { margin-top: 4px; }
  .photozone .pz-note { font-family: var(--f-sans); font-size: 11.5px; color: var(--muted); margin: 0; }

  /* Photo-upload error / daily-cap state (coral), per the rebuilt design.
     Figma comment: "input error state ... one of the checks in place". */
  .photoerr {
    font-family: var(--f-sans); font-size: 14px; color: var(--red);
    border: 1px solid var(--coral); border-radius: 6px;
    background: rgba(236, 136, 108, 0.10); padding: 12px 16px;
    margin: 0 0 20px; max-width: var(--measure);
  }

  /* ── Masthead (full-width proof-copy bar) ─────────────────────────── */
  .masthead { background: var(--mustard); }
  .masthead-inner {
    max-width: var(--content); margin: 0 auto; padding: 8px var(--gutter);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-family: var(--f-serif); font-size: 11px; letter-spacing: 1.32px;
    text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden;
  }
  .masthead-inner .r { font-weight: 500; }

  /* ── Logo row + watercolor hero ───────────────────────────────────── */
  .topbar { display: flex; align-items: center; padding: 0 0 60px; }
  .topbar .logo { height: 32px; width: auto; display: block; }
  .hero { margin: 0 0 28px; }
  .hero img {
    display: block; width: 100%; aspect-ratio: 1440 / 480; object-fit: cover;
    border-radius: 8px; background: var(--hairline);
  }
  .hero figcaption { font-family: var(--f-serif); font-size: 12px; color: var(--brown-4); margin-top: 8px; }
  .hero figcaption i { font-style: italic; }

  .support { font-family: var(--f-serif); font-style: italic; font-size: 20px; color: var(--muted); margin: 0 0 28px; max-width: var(--reading); }
  .support a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  /* ── Pull quote ───────────────────────────────────────────────────── */
  .pullquote { text-align: center; padding: 60px 0 8px; }
  .pullquote p {
    font-family: var(--f-serif); font-weight: 500; margin: 0 auto;
    font-size: clamp(1.7rem, 3.2vw + 0.4rem, 2.6rem); line-height: 1.16;
    letter-spacing: -0.01em; color: var(--ink); max-width: 944px; text-wrap: balance;
  }
  .pullquote .orn { color: var(--mustard); font-size: 15px; margin-top: 22px; }

  /* ── Footer ───────────────────────────────────────────────────────── */
  .site-footer { background: var(--brown-6); color: var(--eggshell-5); margin-top: 0; position: relative; z-index: 0; }
  .footer-drawer { background: var(--mustard); }
  .footer-drawer-inner { max-width: var(--content); margin: 0 auto; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-family: var(--f-serif); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
  .footer-inner { max-width: var(--content); margin: 0 auto; padding: 112px var(--gutter) 34px; }
  .footer-vol { text-align: center; font-family: var(--f-serif); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow-wm); margin: 0 0 30px; }
  .forwarding {
    max-width: 640px; margin: 0 auto 42px; padding: 20px 22px;
    border: 1px dashed rgba(242, 201, 76, 0.5); border-radius: 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  }
  .forwarding .lbl { font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow-wm); flex: 1 1 100%; text-align: center; }
  .forwarding input {
    flex: 1 1 220px; font-family: var(--f-serif); font-size: 1rem; padding: 11px 14px;
    background: transparent; color: var(--paper); border: 1px solid rgba(242,201,76,0.4); border-radius: 4px;
  }
  .forwarding input::placeholder { color: rgba(211,205,191,0.6); }
  .forwarding button {
    font-family: var(--f-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
    padding: 11px 18px; background: var(--brown-6); color: var(--yellow-wm);
    border: 1px solid var(--yellow-wm); border-radius: 4px; cursor: pointer;
  }
  .footer-cols { display: flex; flex-wrap: wrap; gap: 30px 56px; align-items: flex-start; }
  .footer-cols .col h4 { font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brown-4); margin: 0 0 12px; }
  .footer-cols .col a { display: block; font-family: var(--f-sans); font-size: 13px; color: var(--eggshell-5); text-decoration: none; margin-bottom: 8px; }
  .footer-cols .col a:hover { color: var(--paper); }
  .footer-mark { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .footer-mark img { height: 24px; width: auto; }
  .footer-mark span { font-family: var(--f-serif); font-style: italic; font-size: 12px; color: var(--brown-4); }
  .footer-bottom { border-top: 1px solid rgba(242,201,76,0.16); margin-top: 34px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--f-sans); font-size: 11px; color: var(--brown-4); }

  /* ── Signup ticket — canonical component copied verbatim from main.css so the
     pigment/type match the home page exactly (asset paths adjusted for /drafts/). */
  /* Ticket overlaps down into the footer's mustard drawer (ticket on top),
     so its bottom edge connects with the yellow bar — mirrors the home page. */
  .signup-section { padding: 24px 0 0; position: relative; z-index: 1; margin-bottom: 0; }
  .signup-wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
  .ticket { position: relative; width: 100%; max-width: 720px; margin-inline: auto; }
  .ticket__serration { width: 100%; height: 12px; display: block; background-repeat: repeat-x; background-position: left center; }
  .ticket__serration--top { background-image: url('../assets/Images/serration-top.svg'); background-size: auto 12px; }
  .ticket__serration--bottom { background-image: url('../assets/Images/serration-bottom.svg'); background-size: auto 12px; }
  .ticket__body { background: var(--mustard); color: var(--ink); padding: var(--s7) 56px; display: flex; flex-direction: column; gap: var(--s5); text-align: left; }
  .ticket__head { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
  .ticket__head::before, .ticket__head::after { content: ""; width: 96px; height: 2px; background: var(--ink); }
  .ticket__head span { font-family: var(--f-sans); font-weight: 900; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
  .ticket__field { display: flex; flex-direction: column; gap: var(--s2); }
  .ticket__field > label { font-family: var(--f-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
  .ticket__line { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 4px 0 12px; border-bottom: 2px solid var(--ink); }
  .ticket__line input[type="email"] { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--ink); }
  .ticket__line input::placeholder { color: var(--ink); opacity: 0.5; }
  .ticket__submit { background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-sm); padding: var(--s3) var(--s5); font-family: var(--f-sans); font-weight: 900; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
  .ticket__submit:hover { background: #1a0c04; }
  .ticket__submit[aria-busy="true"] { opacity: 0.6; cursor: progress; }
  .ticket__platform { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s5); border: 0; margin: 0; padding: 0; min-width: 0; }
  .ticket__platform > legend { font-family: var(--f-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; float: left; }
  .legend-short { display: none; }
  .plat { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--f-serif); font-size: 15px; }
  .plat input {
    appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
    width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 2px;
    background: transparent; display: grid; place-content: center;
  }
  .plat input::before { content: ""; width: 8px; height: 8px; background: var(--ink); transform: scale(0); transition: transform .1s ease; }
  .plat input:checked::before { transform: scale(1); }
  .plat input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .signup-section .cf-turnstile { display: flex; justify-content: center; }
  .postage {
    position: absolute; top: -6px; right: 40px; width: 94px; height: 94px; z-index: 2;
    background: var(--paper); border: 2.2px solid var(--ink); transform: rotate(4deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--s2); text-align: center;
  }
  .postage__mark { height: 30px; width: auto; }
  .postage__no { font-family: var(--f-serif); font-weight: 500; font-size: 9px; letter-spacing: 0.12em; opacity: 0.8; }
  .postage__count { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
  .ticket__error { font-family: var(--f-sans); font-weight: 600; font-size: 13px; color: #6e1f12; text-align: center; }
  .form-toast { background: var(--paper); border: 1px solid #6d5441; border-radius: 8px; padding: 20px; }
  .form-toast__inner { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
  .form-toast__title { font-family: var(--f-sans); font-weight: 900; font-size: 32px; line-height: 34px; color: var(--brown-band); margin: 0; }
  .form-toast__body { font-family: var(--f-serif); font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0; }
  .form-toast__mail { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(40, 18, 7, 0.35); }

  @media (max-width: 720px) {
    .ticket__body { padding: 24px 24px 22px; gap: 20px; }
    .ticket__head::before, .ticket__head::after { width: 28px; }
    .ticket__line { flex-wrap: wrap; }
    .ticket__line input[type="email"] { flex-basis: 100%; font-size: 18px; }
    .ticket__submit { width: 100%; margin-top: 4px; }
    .postage { top: 63px; right: -16px; transform: rotate(7deg); }
    .ticket__platform { display: block; }
    .ticket__platform > legend { float: left; margin: 0 12px 0 0; }
    .ticket__platform .plat { margin-right: 14px; }
    .legend-full { display: none; }
    .legend-short { display: inline; }
    .form-toast__body { font-size: 16px; }
  }

  @media (max-width: 620px) {
    .meta { margin-left: 0; width: 100%; }
    .terms dl, .prov dl { grid-template-columns: 1fr; gap: 4px 0; }
    .terms dd { margin-bottom: 10px; padding-top: 2px; }
    .rec .body { grid-template-columns: 1fr; gap: 16px; }
    .shot .frame { width: 100%; height: 190px; }
    .shot .credit { width: 100%; }
  }

  /* ── "How it works" — desktop phone-over-folder cards + mobile tabbed folder.
     Ported from the live home page (§010, styles/main.css); the section head is
     reordered to Figma 524:1379 — ornament on top, big serif title, lede, and
     NO "§ 010 · Chapter One" eyebrow. The row matches Figma 531:5320. ───────── */
  .howworks { text-align: center; padding-top: 56px; }
  .howworks .ornament { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin: 0 auto 40px; }
  .ornament__rule { width: 80px; height: auto; }
  .ornament__rule--r { transform: scaleX(-1); }
  .ornament__mark { height: 28px; width: auto; }
  .how-head { max-width: 820px; margin: 0 auto; }
  .how-title { font-family: var(--f-serif); font-weight: 900; font-size: clamp(2.75rem, 6vw + 0.5rem, 80px); line-height: 1.03; letter-spacing: -0.02em; margin: 0; }
  .how-lede { font-family: var(--f-sans); font-weight: 300; font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem); line-height: 1.4; opacity: 0.78; margin: 12px auto 0; max-width: 720px; }

  /* Manila tab + folder idiom (bare .tab/.folder/.card — no clash with .rec .tab) */
  .tab {
    display: inline-flex; align-items: baseline; gap: var(--s3);
    padding: var(--s3) 20px var(--s3) var(--s4);
    background: var(--manila); border: 1px solid var(--hairline); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--tab-shadow);
  }
  .tab__no { font-family: var(--f-serif); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; opacity: 0.85; }
  .tab__label { font-family: var(--f-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
  .folder { background: var(--manila); border: 1px solid var(--hairline); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 28px; }
  .card { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
  .card > .tab { margin-bottom: -1px; position: relative; z-index: 1; }
  .card > .folder { width: 100%; position: relative; z-index: 2; }
  .cards-row { display: flex; gap: var(--s5); align-items: stretch; isolation: isolate; margin-top: 60px; text-align: left; }
  .cards-row > .card { flex: 1 1 0; min-width: 0; }
  .cards-row > .card:nth-child(1) { z-index: 4; }
  .cards-row > .card:nth-child(2) { z-index: 3; }
  .cards-row > .card:nth-child(3) { z-index: 2; }
  .cards-row > .card > .folder { flex: 1; display: flex; flex-direction: column; }

  /* Phone mockup peeking above each folder (Figma how_it_works_row 531:5320) */
  .card__phone { display: block; width: 79%; max-width: 300px; margin: 0 auto -60px; position: relative; z-index: 0; pointer-events: none; user-select: none; }
  .card__phone-img { display: block; width: 100%; height: auto; filter: drop-shadow(3.5px 6px 10px rgba(0, 0, 0, 0.25)); }
  .card__phone::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(41, 18, 8, 0.55), rgba(41, 18, 8, 0)); }
  .card__phone::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--brown-band); border-radius: 13%; opacity: 0; pointer-events: none; }
  .cards-row--phones > .card > .folder-wrap { flex: 1; display: flex; width: 100%; position: relative; }
  .cards-row--phones .folder-wrap > .folder { flex: 1; display: flex; flex-direction: column; width: 100%; position: relative; z-index: 2; }
  .cards-row--phones .folder-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: 8px -3px 13px rgba(41, 18, 8, 0.14); }
  .cards-row--phones .tab, .cards-row--phones .folder { position: relative; }
  .cards-row--phones .tab::after, .cards-row--phones .folder::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--brown-band); border-radius: inherit; opacity: 0; pointer-events: none; }
  @media (min-width: 981px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .cards-row--phones > .card { transform-origin: center center; transition: transform .4s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
    .cards-row--phones > .card .card__phone::after, .cards-row--phones > .card .tab::after, .cards-row--phones > .card .folder::after { transition: opacity .4s ease; }
    .cards-row--phones:hover > .card { transform: scale(0.9); }
    .cards-row--phones > .card:hover { transform: scale(1.1); z-index: 6; }
    .cards-row--phones:hover > .card:not(:hover) .card__phone::after,
    .cards-row--phones:hover > .card:not(:hover) .tab::after,
    .cards-row--phones:hover > .card:not(:hover) .folder::after { opacity: 0.30; }
  }
  .card__title { font-family: var(--f-sans); font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
  .card__body { font-family: var(--f-serif); font-size: 15px; line-height: 1.55; opacity: 0.85; margin-top: var(--s2); }

  /* Mobile tabbed fallback (Figma node 203:2 idiom) */
  .tabbed { isolation: isolate; }
  .tabbed--mobile { display: none; margin-top: 40px; text-align: left; }
  .panel--plain .card__title { margin-bottom: var(--s2); }
  .tabbed__bar { display: flex; align-items: flex-end; flex-wrap: wrap; }
  .tabbed__tab { display: inline-flex; align-items: center; gap: var(--s2); position: relative; padding: var(--s3) 20px var(--s3) var(--s4); color: var(--ink); background: var(--manila-tab); border: 1px solid var(--hairline); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--tab-shadow); cursor: pointer; }
  .tabbed__tab + .tabbed__tab { margin-left: -1px; }
  .tabbed__tab .tab__no { font-size: 11px; }
  .tabbed__tab .tab__label { font-size: 10px; letter-spacing: 0.16em; }
  .tabbed__bar > .tabbed__tab:nth-child(1) { z-index: 9; }
  .tabbed__bar > .tabbed__tab:nth-child(2) { z-index: 8; }
  .tabbed__bar > .tabbed__tab:nth-child(3) { z-index: 7; }
  .tabbed__tab[aria-selected="true"] { background: var(--manila); z-index: 20 !important; margin-bottom: -1px; padding-bottom: calc(var(--s3) + 1px); }
  .tabbed__body { position: relative; z-index: 30; background: var(--manila); border: 1px solid var(--hairline); border-radius: 0 var(--radius) var(--radius) var(--radius); }
  .panel { padding: var(--s6) 40px var(--s7); margin: 0; }
  .panel[hidden] { display: none; }

  @media (max-width: 980px) {
    .cards-row { flex-direction: column; gap: var(--s7); }
    .cards-row > .card { z-index: auto !important; }
  }
  @media (max-width: 720px) {
    .howworks .cards-row { display: none; }
    .howworks .tabbed--mobile { display: block; }
    .how-title { font-size: 40px; }
    .how-lede { font-size: 16px; }
  }