: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; }


   }

  .hub-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
              text-transform:uppercase; color:var(--brass); display:block; margin-bottom:14px; }
  .hubfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
             gap:0; border:1px solid rgba(122,107,88,.35); border-radius:3px;
             margin:34px 0 40px; overflow:hidden; }
  .hubfacts div{ padding:14px 16px; border-right:1px solid rgba(122,107,88,.22); }
  .hubfacts div:last-child{ border-right:none; }
  .hubfacts dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
                text-transform:uppercase; color:var(--driftwood); margin-bottom:5px; }
  .hubfacts dd{ margin:0; font-family:var(--body); font-size:.92rem; color:var(--ink); line-height:1.35; }
  @media (max-width:640px){ .hubfacts div{ border-right:none; border-bottom:1px solid rgba(122,107,88,.22); } }


  .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; }

  /* ---- 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; }
  }
  .memberlist{ list-style:none; padding:0; margin:34px 0 0; }
  .memberlist li{ border-top:1px solid rgba(122,107,88,.28); padding:26px 0; }
  .memberlist li:last-child{ border-bottom:1px solid rgba(122,107,88,.28); }
  .memberlist .no{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
              text-transform:uppercase; color:var(--brass); display:block; margin-bottom:7px; }
  .memberlist h3{ margin:0 0 8px; font-size:1.5rem; font-family:var(--display);
              font-weight:600; line-height:1.2; }
  .memberlist h3 a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--postmark); }
  .memberlist h3 a:hover{ color:var(--postmark); }
  .memberlist .meta{ font-family:var(--mono); font-size:.74rem; color:var(--driftwood);
                letter-spacing:.06em; margin:0 0 10px; }
  .memberlist p.blurb{ margin:0; }
  .memberlist li{ display:grid; grid-template-columns:136px 1fr; gap:20px; align-items:start; }
  .memberlist li.no-thumb{ grid-template-columns:1fr; }
  .memberlist .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){
    .memberlist li{ grid-template-columns:1fr; }
    .memberlist .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; }
  }