:root{
    --shell:      #E7E1D0;
    --shell-deep: #DBD3BE;
    --marsh:      #2C3A2E;
    --marsh-ink:  #1C261E;
    --driftwood:  #645A4A;
    --postmark:   #A2442B;
    --brass:      #A98545;
    --brass-ink:  #6F572D;
    --line:       rgba(28,38,30,0.16);
    --display: 'Besley','Besley Fallback',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:"Karla",system-ui,sans-serif; font-size:.9375rem; 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.125rem; 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:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--driftwood); text-decoration:none; }
  .backlink:hover{ color:var(--pen); }

  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(--pen); }
  /* 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.0625rem; 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-ink); font-size:1rem; margin:38px 0; }

  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.125rem;
    color:var(--marsh-ink); margin:30px 0 10px;
  }
  article p{ margin-bottom:17px; font-size:1rem; }
  article p .brass{ color:var(--brass-ink); font-style:italic; }
  article strong{ font-weight:700; }

  .pull{
    border-left:3px solid var(--edge-strong);
    padding:4px 0 4px 20px; margin:26px 0;
    font-family:var(--display); font-style:italic;
    font-size:1.125rem; 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:1rem; }
  ol.steps li::before{
    content:"№ " counter(step);
    position:absolute; left:0; top:2px;
    font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--pen);
  }
  ul.plain{ list-style:none; margin:4px 0 18px; }
  ul.plain li{ padding-left:20px; position:relative; margin-bottom:8px; font-size:1rem; }
  ul.plain li::before{ content:"·"; position:absolute; left:6px; color:var(--brass-ink); font-weight:700; }

  .faq-q{
    font-family:var(--display); font-weight:600; font-size:1.125rem;
    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:.9375rem; font-weight:700;
    color:var(--pen); flex-shrink:0; width:52px;
  }
  .timeline .ev{ font-size:1rem; }

  .sources{ font-size:.9375rem; color:var(--driftwood); }
  .sources a{ color:var(--driftwood); }
  /* Long addresses and unbroken words in source notes and photo credits wrap
     instead of widening the page (ria-formosa scrolled sideways at 390 px, 30 Oct 2026). */
  .sources, .gal-credit, .hero-credit{ overflow-wrap:anywhere; }

  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.0625rem; color:var(--marsh); }
  .foot-mark sup{ font-family:var(--body); font-size:0.5em; font-weight:700; top:-0.9em; }
  .foot-meta{ font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; 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:"Karla",system-ui,sans-serif; font-size:.9375rem; 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:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--driftwood); margin:10px 0 0; }


   }

  .hub-label{ font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--brass-ink); 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:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--driftwood); margin-bottom:5px; }
  .hubfacts dd{ margin:0; font-family:var(--body); font-size:.9375rem; 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 var(--edge-strong); background:rgba(162,68,43,.04);
            border-radius:3px; padding:26px 28px; margin:46px 0 0; }
  .suggest .lbl{ font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--pen); 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:"Karla",system-ui,sans-serif; font-size:.9375rem;
            color:var(--shell);
            background:var(--marsh); padding:11px 22px; border-radius:2px; text-decoration:none; }
  .suggest a.btn:hover{ background:var(--postmark); }

  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;color:var(--pen) }
  .tally-diary p{ font-size:1.375rem; line-height:1.35; font-style:normal; }
  .tally-react{ font-size:1.25rem; line-height:1.35; }
  .tally-react .t-mark{ font-family:"Karla",system-ui,sans-serif; }


  /* ---- 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:"Karla",system-ui,sans-serif; font-size:.9375rem; line-height:1.45; 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(--pen); border-bottom-color:var(--pen); }
  /* ---- 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:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--brass-ink); display:block; margin-bottom:7px; }
  .memberlist h3{ margin:0 0 8px; font-size:1.375rem; 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(--pen); }
  .memberlist h3 a:hover{ color:var(--pen); }
  .memberlist .meta{ font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; color:var(--driftwood);
                margin:0 0 10px; }
  /* The "Part of Canada" link is 14 px tall; pad its hit area to 24 px without
     moving the line (audit 2026-09-30, finding 6). */
  .memberlist .meta a{ display:inline-block; padding:5px 3px; margin:-5px -3px; }
  .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:40px; height:40px; }
  .hub-intro{ font-size:1rem; line-height:1.65; color:var(--marsh-ink);
    max-width:60ch; margin:16px auto 0; text-align:left; }


  
  .mast-acts{ display:none; }
  @media (max-width:520px){
    .topbar{ padding:6px 0 0; }
    .topbar .wrap{ padding-left:16px; padding-right:8px; gap:0; flex-direction:row; flex-wrap:wrap;
                   justify-content:space-between; align-items:center; text-align:left; }
    .topbar .wordmark{ display:inline-block; padding-top:0; font-size:1.125rem; }
    .mast-acts{ display:flex; gap:2px; }
    .mast-search, .mast-menu{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
      min-height:44px; min-width:44px; padding:0 10px; border:0; background:none; cursor:pointer;
      font-family:"Karla",system-ui,sans-serif; font-weight:700; font-size:.9375rem; color:var(--marsh-ink); text-decoration:none; }
    .mast-acts svg.ng{ width:20px; height:20px; stroke:var(--brass); fill:none; stroke-width:1.9;
      stroke-linecap:round; stroke-linejoin:round; flex:none; }
    .mast-search:focus-visible, .mast-menu:focus-visible{ outline:2px solid var(--pen); outline-offset:-2px; }
    .topbar .sitenav{ gap:0; flex-basis:100%; flex-direction:column; align-items:stretch; padding:2px 0 8px; }
    .mast-js .topbar:not(.mast-open) .sitenav{ display:none; }
    .topbar .sitenav a{ min-height:44px; padding:0 6px; gap:8px; font-size:.9375rem; justify-content:flex-start; border-top:1px dashed rgba(169,133,69,.5); }
    .topbar .sitenav a svg.ng{ width:18px; height:18px; }
  }
  @media (max-width:680px){
    footer .foot-meta a{ display:inline-block; padding:13px 0; }
  }

  /* masthead: marsh band, shell postmark, wordmark and slogan (B + C combo 2) */
  .topbar{ background:var(--marsh); position:relative; padding:14px 0 18px; border-bottom:0; border-image:none; }
  .topbar::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:2px;
    background:repeating-linear-gradient(90deg,rgba(169,133,69,.85) 0 6px,transparent 6px 11px); }
  .topbar .wrap{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:4px 18px; text-align:left; }
  .topbar .lock{ display:flex; align-items:center; gap:13px; text-decoration:none; border:0; padding:0; }
  .topbar .pm2{ width:58px; height:58px; flex:none; transform:rotate(-6deg); }
  .topbar .wm{ display:inline-block; font-family:var(--display); font-weight:900; font-size:1.875rem;
    line-height:1; letter-spacing:.005em; white-space:nowrap; color:var(--shell); }
  .topbar .wm .dot{ color:var(--brass); }
  .topbar .wm sup{ font-family:var(--body); font-weight:700; font-size:.34em; vertical-align:top;
    position:relative; top:.1em; margin-left:.08em; }
  .topbar .slogan{ display:block; font-family:"Karla",system-ui,sans-serif; font-weight:700; font-size:.9375rem;
    color:var(--shell); opacity:.92; margin-top:5px; }
  .topbar .sitenav{ justify-content:flex-end; gap:0 2px; }
  .topbar .sitenav a{ color:var(--shell); font-size:.9375rem; min-height:44px; padding:0 5px; border-radius:2px; border-bottom:0; }
  .topbar .sitenav a[aria-current]{ color:var(--shell); box-shadow:inset 0 -2px 0 var(--brass); }
  .topbar .sitenav a svg.ng, .mast-acts svg.ng{ stroke:var(--brass); }
  @media (hover:hover){ .topbar .sitenav a:hover{ background:rgba(231,225,208,.14); } }
  .topbar a:focus-visible, .topbar button:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }
  @media (min-width:1000px){ .topbar .wrap{ max-width:1120px; } .topbar .sitenav{ flex:none; } }
  @media (min-width:521px){
    .topbar .wrap{ flex-wrap:nowrap; }
    .topbar .lock{ flex:none; }
    .topbar .sitenav{ flex:1 1 0; min-width:0; }
  }
  .hero .lockup-text{ text-align:center; }
  .hero .lockup .sub, .hero .lockup h1{ margin-left:auto; margin-right:auto; }
  @media (max-width:520px){
    .topbar{ padding:7px 0 12px; }
    .mast-search span, .mast-menu span{ position:absolute; width:1px; height:1px; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; }
    .topbar::after{ bottom:4px; }
    .topbar .wrap{ padding-left:16px; padding-right:6px; }
    .topbar .lock{ gap:9px; min-width:0; }
    .topbar .pm2{ width:40px; height:40px; }
    .topbar .wm{ font-size:1.25rem; }
    .topbar .slogan{ font-size:.9375rem; margin-top:3px; }
    .mast-search, .mast-menu{ color:var(--shell); }
    .topbar .sitenav a{ font-size:.9375rem; min-height:44px; padding:0 6px; border-radius:0; }
    .topbar .sitenav a[aria-current]{ box-shadow:none; border-bottom:2px solid var(--brass); }
  }

  /* ---- hub hero banner (v54.13) ---- */
  .wrap.hub-hero-wrap{ max-width:940px; }
  .hub-hero{ position:relative; margin:0 0 26px; padding:15px; background:#FBF8F0;
    border:1px solid var(--line); box-shadow:3px 4px 0 rgba(28,38,30,.12); }
  .hub-hero picture{ display:block; }
  .hub-hero img{ display:block; width:100%; height:auto; aspect-ratio:21/9;
    object-fit:cover; background:var(--shell-deep); }
  .hub-hero .corner{ position:absolute; width:26px; height:26px; pointer-events:none; }
  .hub-hero .c-tl{ top:6px; left:6px; }
  .hub-hero .c-tr{ top:6px; right:6px; transform:rotate(90deg); }
  .hub-hero .c-br{ bottom:6px; right:6px; transform:rotate(180deg); }
  .hub-hero .c-bl{ bottom:6px; left:6px; transform:rotate(270deg); }
  .hub-hero-credit{ font-family:"Karla",system-ui,sans-serif; font-size:.9375rem; line-height:1.45; color:var(--driftwood); margin:11px 0 0; text-align:right; }
  .hub-strip-credits{ list-style:none; padding:0; text-align:left; }
  .hub-strip-credits li{ margin:0 0 3px; }
  .hub-hero-credit a{ color:var(--driftwood); text-decoration:none;
    border-bottom:1px dotted rgba(119,107,88,.55); }
  .hub-hero-credit a:hover{ color:var(--pen); border-bottom-color:var(--pen); }
  .hub-strip-grid{ list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns:repeat(4,1fr); gap:8px; }
  .hub-strip-grid li{ margin:0; padding:0; }
  .hub-strip-grid li::before{ content:none; }
  .hub-strip-grid a{ display:block; color:inherit; text-decoration:none; }
  .hub-strip img{ aspect-ratio:4/3; }
  @media (max-width:600px){
    .hub-hero{ padding:9px; }
    .hub-hero .corner{ width:18px; height:18px; }
    .hub-hero img{ aspect-ratio:4/3; }
    .hub-strip-grid{ grid-template-columns:repeat(2,1fr); }
  }