: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; }
  /* The tap target, and the ONLY thing here that takes a tap. The marks
     are decoration: a mark is hit-testable even when its group is at
     opacity 0, so a neighbour's relic chop - a filled 17-unit square -
     or its ~50-unit pencil scribble would otherwise swallow the taps
     meant for the place underneath it. That is what made the clustered
     markers unhittable, and no hit-radius change alone could fix it. */
  .sm-hit{ fill:transparent; pointer-events:all; }
  .sm-ring, .sm-pencil, .sm-stamp, .sm-relic{ pointer-events:none; }
  .sm-halo{ fill:var(--shell); opacity:0; }
  .sm-dest:hover .sm-halo{ fill:rgba(162,68,43,.18); opacity:1; }

  /* The printed chart. Quiet, uniform, never rotated - everything the user or
     the game applies on top of it is hand-drawn and leans. */
  .sm-ring{ fill:none; stroke:var(--driftwood); stroke-linecap:round; opacity:.85; }

  /* Circled: someday. Graphite, two passes, the second lighter. Written only
     by the tap card. */
  .sm-pencil{ opacity:0; transition:opacity .15s ease-out; }
  .sm-pencil path{ fill:none; stroke:var(--driftwood); stroke-linecap:round; }
  .sm-pencil-a{ opacity:.9; }
  .sm-pencil-b{ opacity:.45; }
  .sm-dest[data-circled="1"] .sm-pencil{ opacity:1; }

  /* Stamped: been there. Round, double-ringed, broken ink. Written only by the
     tap card - no game event may set this. */
  .sm-stamp{ opacity:0; transition:opacity .15s ease-out, transform .15s ease-out; }
  .sm-stamp circle{ fill:none; stroke:var(--postmark); }
  .sm-stamp-pip{ fill:var(--postmark); stroke:none; }
  .sm-dest[data-stamped="1"] .sm-stamp{ opacity:.87; }

  /* Relic: found with Tally. Square chop, so it is a different KIND of mark and
     not a shade of one. Written only by the game. */
  .sm-relic{ opacity:0; transition:opacity .15s ease-out; }
  .sm-relic rect{ fill:var(--marsh); stroke:none; }
  .sm-relic-star{ fill:var(--shell); stroke:none; }
  .sm-dest[data-relic="1"] .sm-relic{ opacity:.92; }

  .sm-dest:hover .sm-ring{ stroke:var(--postmark); }
  .sm-dest:focus{ outline:none; }
  .sm-dest:focus-visible .sm-halo{ fill:var(--brass); opacity:.5; }
  .sm-dest.is-focus .sm-ring{ stroke:var(--postmark); stroke-width:2.4; }


  /* The progress line: typewriter small-caps, muted, zero segments dropped
     by the builder rather than printed as "0 relics". */
  .sm-tally{ font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
             text-transform:uppercase; color:var(--driftwood);
             margin:14px 0 0; text-align:center; }
  .sm-tally b{ color:var(--postmark); font-weight:700; }
  /* With nothing marked, Tally asks for the first one. Caveat is his
     handwriting and is never used for UI - this is him speaking, and it
     is signed. */
  .sm-tally.is-empty{ font-family:"Caveat",cursive; font-size:1.3rem;
                      letter-spacing:0; text-transform:none;
                      color:var(--marsh); line-height:1.4; }
  .sm-empty-sign{ color:var(--brass); white-space:nowrap; }
  .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-ring,.sm-pencil,.sm-stamp,.sm-relic{ transition:none; } }

  /* ---- the tap card ----
     Anchored to the marker it describes, replacing the panel that used to sit
     under the map. Opening or closing it writes nothing; the two toggles are
     the only writers on the page. */
  .sm-card{ position:absolute; z-index:20; width:294px; max-width:calc(100% - 16px);
            background:var(--shell); border:1.6px solid var(--marsh); border-radius:4px;
            padding:12px 16px 15px; box-shadow:0 10px 26px rgba(28,38,30,.20);
            text-align:left; opacity:0; visibility:hidden; transform:translateY(4px);
            transition:opacity .15s ease-out, transform .15s ease-out,
                       visibility 0s linear .15s; }
  .sm-card.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .sm-card-notch{ position:absolute; width:11px; height:11px; background:var(--shell);
                  border:1.6px solid var(--marsh); transform:rotate(45deg); }
  .sm-card[data-side="above"] .sm-card-notch{ bottom:-6.5px; border-top:none; border-left:none; }
  .sm-card[data-side="below"] .sm-card-notch{ top:-6.5px; border-bottom:none; border-right:none; }

  .sm-card-kicker{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .sm-card-from{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
                 text-transform:uppercase; color:var(--postmark); padding-top:13px; }
  .sm-card-x{ flex:none; width:44px; height:44px; margin:-10px -14px 0 0; padding:0;
              border:none; background:none; color:var(--driftwood); cursor:pointer;
              font-family:var(--body); font-size:1.05rem; line-height:1; border-radius:3px; }
  .sm-card-x:hover{ color:var(--postmark); background:rgba(162,68,43,.08); }
  .sm-card-x:focus-visible{ outline:2px solid var(--postmark); outline-offset:2px; }

  .sm-card-name{ font-family:var(--display); font-style:italic; font-weight:600;
                 font-size:1.5rem; line-height:1.18; color:var(--marsh); margin:1px 0 5px; }
  .sm-card-where{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
                  text-transform:uppercase; color:var(--driftwood); margin:0 0 13px; }

  /* Tally's line. Caveat is his handwriting and is never used for UI - this
     is him speaking, and it is signed, which is the whole test. A left rule
     like the site's blockquotes, in BRASS rather than the blockquote's
     postmark red: postmark is the stamp's ink, and this card already uses it
     a few millimetres below for "been there". Brass is Tally's colour
     everywhere else on the site, so it is his here too.
     A place with no diary renders no block at all - the builder omits the
     field, the card omits the div, and there is no empty rule left behind. */
  .sm-card-tally{ border-left:3px solid var(--brass); padding:1px 0 1px 13px;
                  margin:0 0 14px; }
  .sm-card-tally p{ font-family:"Caveat",cursive; font-size:1.12rem;
                    line-height:1.34; color:var(--marsh); margin:0; }
  .sm-card-sign{ display:block; font-family:"Caveat",cursive; font-size:1rem;
                 color:var(--brass); margin-top:2px; }

  .sm-card-read{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--marsh); text-decoration:none;
                 border-bottom:1.6px solid var(--postmark); padding-bottom:2px; }
  .sm-card-read:hover{ color:var(--postmark); }
  .sm-card-read:focus-visible{ outline:2px solid var(--postmark); outline-offset:3px; }

  .sm-card-rule{ border:none; border-top:1.6px dashed rgba(169,133,69,.65); margin:15px 0 12px; }

  .sm-card-toggles{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .sm-toggle{ min-height:48px; display:flex; align-items:center; gap:8px; padding:7px 9px;
              border:1.4px dashed rgba(169,133,69,.7); border-radius:3px; background:none;
              color:var(--marsh-ink); cursor:pointer; text-align:left;
              transition:background .15s, border-color .15s; }
  .sm-toggle svg{ width:19px; height:19px; flex:none; overflow:visible; }
  .sm-toggle-txt{ display:block; }
  .sm-toggle-t{ display:block; font-family:var(--mono); font-size:.61rem;
                letter-spacing:.13em; text-transform:uppercase; line-height:1.35; }
  .sm-toggle-s{ display:block; font-family:var(--display); font-style:italic;
                font-size:.79rem; color:var(--driftwood); line-height:1.2; }
  .sm-toggle:hover{ background:rgba(169,133,69,.12); }
  .sm-toggle:focus-visible{ outline:2px solid var(--postmark); outline-offset:2px; }
  /* Pressed reads as a solid border and a tint, not colour alone - the same
     rule the markers follow. */
  .sm-toggle[aria-pressed="true"]{ border-style:solid; }
  .sm-toggle-circled[aria-pressed="true"]{ border-color:var(--driftwood);
              background:rgba(119,107,88,.13); }
  .sm-toggle-stamped[aria-pressed="true"]{ border-color:var(--postmark);
              background:rgba(162,68,43,.10); color:var(--postmark); }
  .sm-toggle[aria-pressed="true"] .sm-toggle-s{ color:var(--marsh); }

  /* A record of a find, not a control: no hover, no pointer, no href. */
  .sm-card-relic{ display:flex; align-items:center; gap:9px; margin:12px 0 0;
                  padding:9px 11px; border-radius:3px; background:rgba(44,58,46,.09);
                  border:1px solid rgba(44,58,46,.22); font-family:var(--mono);
                  font-size:.59rem; letter-spacing:.1em; text-transform:uppercase;
                  color:var(--marsh); line-height:1.5; }
  .sm-card-relic svg{ width:17px; height:17px; flex:none; }
  .sm-cr-chop{ fill:var(--marsh); }
  .sm-cr-star{ fill:var(--shell); }

  /* The hover label: a name, offset from the marker, and nothing clickable. */
  .sm-chip{ position:absolute; z-index:15; pointer-events:none; white-space:nowrap;
            background:var(--shell); border:1px solid rgba(169,133,69,.75);
            border-radius:2px; padding:3px 7px; font-family:var(--mono);
            font-size:.62rem; letter-spacing:.07em; color:var(--marsh);
            opacity:0; transition:opacity .12s ease-out; }
  .sm-chip.is-on{ opacity:1; }

  .sm-dest.is-selected .sm-halo{ fill:rgba(162,68,43,.25); opacity:1; }
  .sm-dest.is-selected .sm-ring{ stroke:var(--postmark); stroke-width:2.4; }
  .sm-dest{ cursor:pointer; }

  /* Under 600px the card stops being a popover and becomes a bottom sheet: a
     294px card anchored on a phone would cover the marker it describes. */
  @media (max-width:600px){
    .sm-card{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
              max-width:none; border-radius:6px 6px 0 0; border-bottom:none;
              padding:16px 20px 22px; transform:translateY(14px); }
    .sm-card-notch{ display:none; }
    .sm-chip{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .sm-card{ transition:none; }
    .sm-chip{ transition:none; }
  }
  /* ---- 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; } }