:root{
    --shell:      #E7E1D0;
    --shell-deep: #DBD3BE;
    --marsh:      #2C3A2E;
    --marsh-ink:  #1C261E;
    --driftwood:  #776B58;
    --postmark:   #A2442B;
    --brass:      #A98545;
    --line:       rgba(28,38,30,0.16);
    --display: "Fraunces", Georgia, serif;
    --body: "Karla", system-ui, sans-serif;
    --mono: "Courier Prime", "Courier New", monospace;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--body);
    color:var(--marsh-ink);
    background-color:var(--shell);
    background-image:
      radial-gradient(circle at 18% 10%, rgba(169,133,69,0.06), transparent 42%),
      radial-gradient(circle at 84% 74%, rgba(44,58,46,0.07), transparent 46%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{ width:100%; max-width:720px; margin:0 auto; padding:0 26px; }
  .label{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.22em;
    text-transform:uppercase; color:var(--driftwood);
  }
  .topbar{ border-bottom:1px solid var(--line); padding:16px 0; }
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; max-width:940px; }
  .wordmark{ font-family:var(--display); font-weight:900; font-size:1.15rem; color:var(--marsh); text-decoration:none; }
  .wordmark sup{ font-family:var(--body); font-size:0.5em; font-weight:700; top:-0.9em; }
  .backlink{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--driftwood); text-decoration:none; }
  .backlink:hover{ color:var(--postmark); }

  header.page{ padding:56px 0 26px; text-align:center; }
  header.page h1{
    font-family:var(--display); font-weight:600;
    font-size:clamp(2rem,5vw,3.05rem); line-height:1.08;
    letter-spacing:-0.01em; margin:14px auto 18px; max-width:19ch;
  }
  header.page h1 em{ font-style:italic; font-weight:500; color:var(--postmark); }
  /* v54.9 — .lede is this construct's other name. Entries say .standfirst;
     region hubs, 404, explore and map say .lede for the identical intro
     paragraph, and .lede had no rule anywhere, so those ten pages rendered it
     as body text. One rule, both names, per C. Doctrine item 6. */
  .standfirst, .lede{ font-size:1.08rem; color:var(--marsh); max-width:54ch; margin:0 auto; }

  .rule-art{ max-width:600px; margin:40px auto; padding:0 26px; }
  .rule-art img{ width:100%; display:block; opacity:0.9; }
  .entry .ornament{ width:44px; height:44px; margin-bottom:14px; opacity:0.9; }
  .hero-globe{ width:150px; margin:0 auto 10px; display:block; opacity:0.92; }
  .compass{ text-align:center; color:var(--brass); font-size:1rem; margin:38px 0; letter-spacing:0.5em; }

  article h2{
    font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,3vw,1.85rem);
    color:var(--marsh); margin:44px 0 14px; line-height:1.2;
  }
  article h3{
    font-family:var(--display); font-weight:600; font-size:1.16rem;
    color:var(--marsh-ink); margin:30px 0 10px;
  }
  article p{ margin-bottom:17px; font-size:1.02rem; }
  article p .brass{ color:var(--brass); font-style:italic; }
  article strong{ font-weight:700; }

  .pull{
    border-left:3px solid var(--postmark);
    padding:4px 0 4px 20px; margin:26px 0;
    font-family:var(--display); font-style:italic;
    font-size:1.12rem; color:var(--marsh); line-height:1.5;
  }

  .card{
    background:var(--shell-deep); border:1px solid var(--line);
    border-radius:3px; padding:24px 24px 10px; margin:28px 0;
  }
  .card .label{ display:block; margin-bottom:14px; }

  ol.steps{ list-style:none; counter-reset:step; margin:6px 0 0; }
  ol.steps li{ counter-increment:step; margin-bottom:18px; padding-left:44px; position:relative; font-size:0.99rem; }
  ol.steps li::before{
    content:"№ " counter(step);
    position:absolute; left:0; top:2px;
    font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em;
    color:var(--postmark);
  }
  ul.plain{ list-style:none; margin:4px 0 18px; }
  ul.plain li{ padding-left:20px; position:relative; margin-bottom:8px; font-size:0.99rem; }
  ul.plain li::before{ content:"·"; position:absolute; left:6px; color:var(--brass); font-weight:700; }

  .faq-q{
    font-family:var(--display); font-weight:600; font-size:1.12rem;
    color:var(--marsh); margin:26px 0 8px;
  }

  .timeline{ margin:22px 0 8px; }
  .timeline div{ display:flex; gap:18px; margin-bottom:14px; align-items:baseline; }
  .timeline .yr{
    font-family:var(--mono); font-size:0.8rem; font-weight:700;
    color:var(--postmark); flex-shrink:0; width:52px;
  }
  .timeline .ev{ font-size:0.97rem; }

  .sources{ font-size:0.88rem; color:var(--driftwood); }
  .sources a{ color:var(--driftwood); }

  footer{ border-top:1px solid var(--line); padding:36px 0 46px; margin-top:52px; }
  footer .wrap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-end; max-width:940px; }
  .foot-mark{ font-family:var(--display); font-weight:900; font-size:1.05rem; color:var(--marsh); }
  .foot-mark sup{ font-family:var(--body); font-size:0.5em; font-weight:700; top:-0.9em; }
  .foot-meta{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.07em; color:var(--driftwood); line-height:1.9; text-align:right; }

  @media (max-width:680px){
    footer .wrap{ flex-direction:column; align-items:flex-start; }
    .foot-meta{ text-align:left; }
    .timeline div{ flex-direction:column; gap:2px; }
  }

  /* v54.6 — skip link. Every page opens with the same masthead and five-item nav;
     without it a keyboard or screen-reader user tabs through all of it on every
     page load with no way past. Visually hidden until focused. Audit #5. */
  .skiplink{ position:absolute; left:-9999px; top:0; z-index:100;
    font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
    text-transform:uppercase; background:var(--marsh); color:var(--shell);
    padding:12px 18px; text-decoration:none; }
  .skiplink:focus{ left:8px; top:8px; outline:3px solid var(--brass); }

  /* v54.9 — shared constructs. .sm-note is used by the entry minimap note, the
     Collection footer note, the region hubs and the site pages, and was defined
     in three separate files with identical declarations. One source, here,
     because style.css is what the entry and Collection tiers already share.
     Region hubs and site pages still carry their own copies - see the note in
     _lint.py BASELINE; the CSS extraction is where those collapse. */
  .sm-note{ font-family:var(--mono); font-size:.68rem; color:var(--driftwood); margin:10px 0 0; }


  /* Tally — diary voice furniture (D-44/45/46) */
  .tally-diary{ border-left:3px solid var(--brass); background:rgba(169,133,69,.06);
    padding:18px 22px; margin:0 0 36px; border-radius:0 3px 3px 0; }
  .tally-diary .t-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--brass); display:block; margin-bottom:8px; }
  .tally-diary p{ font-family:var(--mono); font-size:.92rem; line-height:1.7;
    color:var(--ink); margin:0; font-style:normal; }
  .tally-list{ border:1px solid rgba(169,133,69,.4); border-radius:3px;
    padding:22px 26px; margin:40px 0; background:rgba(231,225,208,.5); }
  .tally-list .t-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--brass); display:block; margin-bottom:12px; }
  .tally-list ol{ margin:0; padding-left:22px; font-family:var(--mono);
    font-size:.9rem; line-height:1.9; color:var(--ink); }
  .tally-list ol li::marker{ color:var(--postmark); }
  .tally-list .t-note{ font-family:var(--mono); font-size:.78rem; color:var(--driftwood);
    margin:10px 0 0; }
  .tally-react{ font-family:var(--mono); font-size:.88rem; color:var(--marsh);
    margin:14px 0 0; padding-left:18px; border-left:2px solid rgba(169,133,69,.5); }
  .tally-react .t-mark{ color:var(--brass); font-size:.7rem; letter-spacing:.18em;
    text-transform:uppercase; display:block; margin-bottom:4px; }
  .entry-no{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
             text-transform:uppercase; color:var(--brass); display:block; margin-bottom:14px; }
  .factstrip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
              gap:0; border:1px solid rgba(122,107,88,.35); border-radius:3px;
              margin:34px 0 40px; overflow:hidden; }
  .factstrip div{ padding:14px 16px; border-right:1px solid rgba(122,107,88,.22); }
  .factstrip div:last-child{ border-right:none; }
  .factstrip dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--driftwood); margin-bottom:5px; }
  .factstrip dd{ margin:0; font-family:var(--body); font-size:.92rem; color:var(--ink); line-height:1.35; }
  @media (max-width:640px){ .factstrip div{ border-right:none; border-bottom:1px solid rgba(122,107,88,.22); } }
  .relic{ border-left:3px solid var(--brass); background:rgba(169,133,69,.07);
          padding:20px 24px; margin:38px 0; border-radius:0 3px 3px 0; }
  .relic .relic-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
          text-transform:uppercase; color:var(--brass); display:block; margin-bottom:9px; }
  .relic p{ margin:0; font-style:italic; }
  .coords{ font-family:var(--mono); font-size:.86rem; color:var(--postmark); letter-spacing:.04em; }
  .advisory{ border:1px solid rgba(162,68,43,.4); background:rgba(162,68,43,.05);
             padding:16px 20px; margin:30px 0; border-radius:3px; font-size:.94rem; }
  .advisory strong{ color:var(--postmark); }

  /* v39 — the stitch (brass · 5/4 · hand) + nav glyphs + Tally's hand */
  .topbar{ border-bottom:2px solid transparent;
    border-image:repeating-linear-gradient(90deg,rgba(169,133,69,.6) 0 5px,transparent 5px 9px) 2; }
  .wordmark{ border-bottom:2px dashed rgba(169,133,69,.7); padding-bottom:3px; text-decoration:none; }
  .sitenav a{ display:inline-flex; align-items:center; gap:7px; padding:5px 8px; border-radius:2px;
    transition:background .15s,color .15s; }
  .sitenav a svg.ng{ width:16px; height:16px; stroke:var(--brass); fill:none;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .sitenav a:hover{ background:var(--marsh); color:var(--shell); }
  .sitenav a:hover svg.ng{ stroke:var(--shell); }
  .sitenav a[aria-current]{ color:var(--postmark); }
  .sitenav a[aria-current] svg.ng{ stroke:var(--postmark); }
  .sitenav a:focus-visible{ outline:2px solid var(--postmark); outline-offset:3px; }
  footer{ border-top:2px solid transparent;
    border-image:repeating-linear-gradient(90deg,rgba(169,133,69,.6) 0 5px,transparent 5px 9px) 2; }
  .stitch-rule{ width:100%; height:9px; overflow:visible; display:block; margin:34px 0 8px; }
  .stitch-rule path{ fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round;
    stroke-dasharray:5 4; opacity:.6; }
  .factstrip{ border:1.6px dashed rgba(169,133,69,.55); }
  .tally-diary{ border:1.6px dashed rgba(169,133,69,.65); border-radius:6px; position:relative;
    background:rgba(231,225,208,.55); padding:18px 22px; }
  .tally-diary::after{ content:""; position:absolute; inset:4px; border:1px dashed rgba(169,133,69,.3);
    border-radius:4px; pointer-events:none; }
  .tally-diary p, .tally-react p, .tally-react{ font-family:"Caveat",cursive; }
  .tally-diary p{ font-size:1.34rem; line-height:1.35; font-style:normal; }
  .tally-react{ font-size:1.22rem; line-height:1.35; }
  .tally-react .t-mark{ font-family:var(--mono); }

  /* v39.1 — nav prominence + wordmark */
  .sitenav a{ font-size:.85rem; font-weight:700; color:var(--ink); letter-spacing:.12em; }
  .sitenav a svg.ng{ width:18px; height:18px; stroke-width:1.9; }
  .sitenav{ gap:22px; }

  /* v39.2 — sitenav: complete self-sufficient ruleset; wins over all prior generations */
  .sitenav{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  .sitenav a{ font-family:var(--mono); font-size:.85rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
    text-decoration:none; border-bottom:none; display:inline-flex;
    align-items:center; gap:7px; padding:5px 8px; border-radius:2px;
    transition:background .15s,color .15s; white-space:nowrap; }
  .sitenav a svg.ng{ width:18px; height:18px; stroke:var(--brass); fill:none;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .sitenav a:hover{ background:var(--marsh); color:var(--shell); }
  .sitenav a:hover svg.ng{ stroke:var(--shell); }
  .sitenav a[aria-current]{ color:var(--postmark); }
  .sitenav a[aria-current] svg.ng{ stroke:var(--postmark); }
  .sitenav a:focus-visible{ outline:2px solid var(--postmark); outline-offset:3px; }

  /* ---- Map of Everywhere (beta) ---- */
  .sm-mapwrap{ position:relative; }
  .sm-map{ width:100%; height:auto; display:block; background:rgba(219,211,190,.35);
           border:1.6px dashed rgba(169,133,69,.55); border-radius:3px; }
  .sm-sphere{ fill:rgba(231,225,208,.55); stroke:rgba(119,107,88,.35); stroke-width:1; }
  .sm-grat{ fill:none; stroke:rgba(119,107,88,.14); stroke-width:.5; }
  .sm-land{ fill:rgba(44,58,46,.16); stroke:rgba(44,58,46,.5); stroke-width:.6; }
  .sm-dest{ cursor:pointer; }
  .sm-hit{ fill:transparent; }
  .sm-halo{ fill:var(--shell); opacity:.55; }
  .sm-dot{ fill:var(--marsh); stroke:var(--shell); opacity:1; transition:fill .14s; }
  .sm-dest:hover .sm-halo{ fill:rgba(162,68,43,.18); }
  .sm-ring{ fill:none; stroke:var(--postmark); stroke-linecap:round; opacity:0; transition:opacity .18s; }
  .sm-stamp rect{ fill:rgba(44,58,46,.10); stroke:var(--marsh); opacity:0; transition:opacity .18s; }
  .sm-dest[data-state="circled"] .sm-ring{ opacity:1; }
  .sm-dest[data-state="circled"] .sm-dot{ fill:var(--postmark); }
  .sm-dest[data-state="stamped"] .sm-stamp rect{ opacity:1; }
  .sm-dest[data-state="stamped"] .sm-dot{ fill:var(--marsh); }
  .sm-dest:hover .sm-dot{ fill:var(--postmark); }
  .sm-dest:focus{ outline:none; }
  .sm-dest:focus-visible .sm-halo{ fill:var(--brass); opacity:.5; }
  .sm-dest.is-focus .sm-dot{ fill:var(--postmark); }


  .sm-tally{ font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
             color:var(--driftwood); margin:14px 0 0; text-align:center; }
  .sm-tally b{ color:var(--postmark); font-weight:700; }
  .sm-legend{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
              text-transform:uppercase; color:var(--driftwood); display:flex; gap:22px;
              justify-content:center; flex-wrap:wrap; margin:16px 0 0; }
  .sm-legend span{ display:inline-flex; align-items:center; gap:7px; }
  .sm-key{ width:13px; height:13px; display:inline-block; }
  .sm-beta{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
            text-transform:uppercase; color:var(--shell); background:var(--brass);
            padding:3px 8px; border-radius:2px; vertical-align:middle; margin-left:10px; }

  /* ---- per-entry mini map + controls ---- */
  .sm-mini{ margin:38px 0 30px; }
  .sm-mini .sm-map{ max-height:270px; }
  .sm-marks{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 0; align-items:center; }
  .sm-btn{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
           padding:9px 15px; border:1.6px dashed rgba(169,133,69,.7); border-radius:3px;
           background:none; color:var(--ink); cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
  .sm-btn:hover{ background:rgba(169,133,69,.12); }
  .sm-btn[aria-pressed="true"]{ background:var(--marsh); color:var(--shell); border-color:var(--marsh); border-style:solid; }
  .sm-btn.sm-dream[aria-pressed="true"]{ background:var(--postmark); border-color:var(--postmark); }
  .sm-btn:focus-visible{ outline:2px solid var(--postmark); outline-offset:3px; }

  /* ---- hub grid ---- */
  .hubs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin:34px 0 0; list-style:none; padding:0; }
  .hubs li{ border:1px solid var(--line); border-radius:3px; padding:20px 22px; background:rgba(231,225,208,.4); }
  .hubs h2{ font-family:var(--display); font-size:1.15rem; margin:0 0 6px; }
  .hubs h2 a{ color:var(--marsh); text-decoration:none; border-bottom:2px dashed rgba(169,133,69,.6); }
  .hubs .n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:8px; }
  .hubs p{ margin:0; font-size:.92rem; color:var(--ink); }
  @media (prefers-reduced-motion: reduce){ .sm-dot,.sm-ring,.sm-stamp rect{ transition:none; } }

  /* ---- selection panel under the map ---- */
  .sm-panel{ border:1.6px dashed rgba(169,133,69,.6); border-top:none; border-radius:0 0 3px 3px;
             padding:16px 20px; background:rgba(219,211,190,.5); text-align:center; }
  .sm-panel-hint{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
                  color:var(--driftwood); margin:0; }
  .sm-panel-no{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
                text-transform:uppercase; color:var(--brass); display:block; }
  .sm-panel-name{ font-family:var(--display); font-weight:600; font-size:1.25rem;
                  color:var(--marsh); margin:5px 0 12px; line-height:1.25; }
  .sm-panel-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .sm-go{ text-decoration:none; background:var(--marsh); color:var(--shell);
          border-color:var(--marsh); border-style:solid; }
  .sm-go:hover{ background:var(--postmark); border-color:var(--postmark); }
  .sm-dest.is-selected .sm-halo{ fill:rgba(162,68,43,.25); }
  .sm-dest.is-selected .sm-dot{ fill:var(--postmark); }
  .sm-dest{ cursor:pointer; }
  .sm-map{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

  /* ---- hero image (v48) ---- */
  .hero-fig{ margin:0 0 4px; }
  .hero-fig img{ width:100%; height:auto; display:block; border-radius:3px;
    border:1.6px solid rgba(44,58,46,.45); background:var(--shell-deep); }
  .hero-fig.is-wide img{ aspect-ratio:3/2; object-fit:cover; }
  .hero-fig.is-tall img{ max-height:640px; width:auto; margin:0 auto;
    aspect-ratio:auto; object-fit:contain; }
  .hero-credit{ font-family:var(--mono); font-size:.63rem; letter-spacing:.04em;
    color:var(--driftwood); margin:8px 0 34px; text-align:right; }
  .hero-credit a{ color:var(--driftwood); text-decoration:none;
    border-bottom:1px dotted rgba(119,107,88,.55); }
  .hero-credit a:hover{ color:var(--postmark); border-bottom-color:var(--postmark); }
  /* ---- index / hub thumbnails ---- */
  .entries li{ display:grid; grid-template-columns:136px 1fr; gap:20px; align-items:start; }
  .entries li.no-thumb{ grid-template-columns:1fr; }
  .entries .thumb img{ width:136px; height:102px; object-fit:cover; display:block;
    border:1.4px solid rgba(44,58,46,.38); border-radius:3px; background:var(--shell-deep); }
  @media (max-width:560px){
    .entries li{ grid-template-columns:1fr; }
    .entries .thumb img{ width:100%; height:180px; }
  }

  /* v48.2 — centred masthead: five nav items no longer fit beside the wordmark */
  .topbar .wrap{ flex-direction:column; align-items:center; gap:11px; text-align:center; }
  .topbar .wordmark{ font-size:1.32rem; }
  .sitenav{ justify-content:center; gap:8px 20px; flex-wrap:wrap; }
  .sitenav a{ font-size:.78rem; letter-spacing:.1em; padding:5px 7px; }
  .sitenav a svg.ng{ width:16px; height:16px; }
  @media (max-width:520px){
    .sitenav{ gap:6px 14px; }
    .sitenav a{ font-size:.72rem; letter-spacing:.08em; gap:5px; }
  }

  .entrylist li{ display:grid; grid-template-columns:136px 1fr; gap:20px; align-items:start; }
  .entrylist li.no-thumb{ grid-template-columns:1fr; }
  .entrylist .thumb img{ width:136px; height:102px; object-fit:cover; display:block;
    border:1.4px solid rgba(44,58,46,.38); border-radius:3px; background:var(--shell-deep); }
  @media (max-width:560px){
    .entrylist li{ grid-template-columns:1fr; }
    .entrylist .thumb img{ width:100%; height:180px; }
  }

  /* v49 — hero as a mounted print with brass photo corners */
  .hero-fig{ background:#FBF8F0; padding:15px; border:1px solid var(--line);
    box-shadow:3px 4px 0 rgba(28,38,30,.12); position:relative; margin:0 0 6px; }
  .hero-fig img{ border:none; border-radius:0; }
  .hero-fig .corner{ position:absolute; width:26px; height:26px; pointer-events:none; }
  .hero-fig .c-tl{ top:6px; left:6px; }
  .hero-fig .c-tr{ top:6px; right:6px; transform:rotate(90deg); }
  .hero-fig .c-br{ bottom:6px; right:6px; transform:rotate(180deg); }
  .hero-fig .c-bl{ bottom:6px; left:6px; transform:rotate(270deg); }
  .hero-credit{ margin-top:11px; }
  @media (max-width:560px){ .hero-fig{ padding:9px; } .hero-fig .corner{ width:18px; height:18px; } }