: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); }
  .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; }
  }
   }
  .suggest{ border:1px solid rgba(162,68,43,.35); background:rgba(162,68,43,.04);
            border-radius:3px; padding:26px 28px; margin:46px 0 0; }
  .suggest .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
            text-transform:uppercase; color:var(--postmark); display:block; margin-bottom:10px; }
  .suggest h3{ margin:0 0 10px; font-size:1.25rem; }
  .suggest p{ margin:0 0 16px; }
  .suggest a.btn{ display:inline-block; font-family:var(--mono); font-size:.8rem;
            letter-spacing:.1em; text-transform:uppercase; color:var(--shell);
            background:var(--marsh); padding:11px 22px; border-radius:2px; text-decoration:none; }
  .suggest a.btn:hover{ background: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; }
  .sm-note{ font-family:var(--mono); font-size:.68rem; color:var(--driftwood); margin:10px 0 0; }

  /* ---- 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 ---- */

  

  .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 — declared marks on list thumbnails; faint until set */
  .thumb{ position:relative; display:block; }
  .thumb .mk{ position:absolute; width:60px; height:60px; pointer-events:none;
    opacity:.16; transition:opacity .2s, transform .2s; }
  .thumb .mk.someday{ left:-12px; top:-11px; transform:rotate(7deg); }
  .thumb .mk.been{ right:-12px; bottom:-11px; transform:rotate(-12deg); }
  .thumb:hover .mk{ opacity:.42; }
  li[data-mark="circled"] .thumb .mk.someday{ opacity:1; }
  li[data-mark="circled"] .thumb .mk.been{ opacity:0; }
  li[data-mark="stamped"] .thumb .mk.been{ opacity:1; }
  li[data-mark="stamped"] .thumb .mk.someday{ opacity:0; }
  @media (max-width:560px){ .thumb .mk{ width:48px; height:48px; } }
  /* v54.7 - skip link. Region hubs compose CSS from _region_chrome rather than the shared style.css, so the v54.6 rule never reached them and the link rendered as visible unstyled text above the masthead on all seven. Audit v54.6 R1. */
  .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); }
  .entries{ list-style:none; padding:0; margin:34px 0 0; }
  .entries li{ border-top:1px solid rgba(122,107,88,.28); padding:26px 0; }
  .entries li:last-child{ border-bottom:1px solid rgba(122,107,88,.28); }
  .entries .no{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
              text-transform:uppercase; color:var(--brass); display:block; margin-bottom:7px; }
  .entries h2{ margin:0 0 8px; font-size:1.5rem; font-family:var(--display);
              font-weight:600; line-height:1.2; }
  .entries h2 a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--postmark); }
  .entries h2 a:hover{ color:var(--postmark); }
  .entries .meta{ font-family:var(--mono); font-size:.74rem; color:var(--driftwood);
                letter-spacing:.06em; margin:0 0 10px; }
  .entries p.blurb{ margin:0; }
  .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; }
  }
  .thumb{ position:relative; display:block; }
  .thumb .mk{ position:absolute; width:60px; height:60px; pointer-events:none;
    opacity:.16; transition:opacity .2s, transform .2s; }
  .thumb .mk.someday{ left:-12px; top:-11px; transform:rotate(7deg); }
  .thumb .mk.been{ right:-12px; bottom:-11px; transform:rotate(-12deg); }
  .thumb:hover .mk{ opacity:.42; }
  li[data-mark="circled"] .thumb .mk.someday{ opacity:1; }
  li[data-mark="circled"] .thumb .mk.been{ opacity:0; }
  li[data-mark="stamped"] .thumb .mk.been{ opacity:1; }
  li[data-mark="stamped"] .thumb .mk.someday{ opacity:0; }
  .thumb .mk{ width:48px; height:48px; }

  /* 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; }
  }