/* Wyoming's Best Stays: Wyo Stays Network design standard, v1 ("Public Record").
   Every value below is documented, with its reason, in DESIGN.md. Change DESIGN.md
   first, then this file. sheridansbeststays.com is rebuilt from the same spec. */

/* ───────────────────────── 1. Tokens ───────────────────────── */
:root{
  /* Color: semantic roles, not decoration. Contrast ratios are against --paper. */
  --paper:#EDEEE9;        /* page ground: cool unbleached survey paper, not cream */
  --sheet:#F7F7F4;        /* raised document surfaces: tables, clause checks, map */
  --ink:#15171A;          /* graphite: text, heavy rules, primary buttons (15.4:1) */
  --ink-2:#4B5058;        /* secondary text (6.96:1) */
  --rule:#B9BCB4;         /* hairline rules (non-text) */
  --rule-soft:#D5D7D0;    /* row separators (non-text) */
  --verify:#1F3BB3;       /* signature blue: links, verification, current state (7.71:1) */
  --verify-deep:#16298A;  /* hover/pressed verify (10.48:1) */
  --verify-wash:#E2E6F4;  /* hovered/linked row tint */
  --verify-on-ink:#A9B7FF;/* verify on the ink colophon (9.33:1 on --ink) */
  --exception:#B42318;    /* ledger red: scope limits and caveats only (5.64:1) */
  --on-ink:#EDEEE9;
  --on-ink-2:#A7ABB1;

  /* Type */
  --font-record:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-text:"Spectral",Georgia,"Times New Roman",serif;
  --step--2:.72rem;
  --step--1:.8125rem;
  --step-0:1.125rem;
  --step-1:1.3125rem;
  --step-2:clamp(1.5rem,1.3rem + .8vw,1.875rem);
  --step-3:clamp(2rem,1.45rem + 2.2vw,3.125rem);
  --step-4:clamp(2.75rem,1.5rem + 5.2vw,5.75rem);

  /* Space: 4px base, named steps. Sections pick different steps on purpose. */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:7rem;

  /* Shape: documents are square, controls are machined, only map markers are round. */
  --r-doc:0;
  --r-control:2px;
  --r-marker:999px;
  --rule-hair:1px;
  --rule-heavy:3px;

  --measure:38rem;
  --page:78rem;
  --gutter:clamp(1rem,.4rem + 2.4vw,2.25rem);

  /* Motion: two durations, one curve. Motion only ever reports a state change. */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --t-quick:140ms;
  --t-state:220ms;

  interpolate-size:allow-keywords;
}

/* ───────────────────────── 2. Base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:var(--step-0);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--verify);text-decoration-thickness:1px;text-underline-offset:.2em;
  transition:text-underline-offset var(--t-quick) var(--ease-out),color var(--t-quick) var(--ease-out)}
a:hover{color:var(--verify-deep);text-underline-offset:.32em}
:focus-visible{outline:2px solid var(--verify);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-record);font-weight:650;font-stretch:82%;line-height:1;
  letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 var(--s-4);max-width:var(--measure);text-wrap:pretty}
strong{font-weight:600}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--font-record);font-stretch:112%;font-weight:600;font-size:var(--step--2);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1.35}
.num{font-family:var(--font-record);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:20;background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-3)}

/* ───────────────────────── 3. Masthead (nav) ───────────────────────── */
.masthead{border-bottom:var(--rule-heavy) solid var(--ink);view-transition-name:masthead}
.masthead__strip{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding-block:var(--s-2);border-bottom:var(--rule-hair) solid var(--rule)}
.masthead__strip a{color:var(--ink-2);text-decoration:none}
.masthead__strip a:hover{color:var(--verify)}
.masthead__strip .label{white-space:nowrap}
.masthead__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);padding-top:var(--s-4)}
.wordmark{font-family:var(--font-record);font-stretch:70%;font-weight:760;font-size:1.75rem;line-height:.88;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none;padding-bottom:var(--s-3)}
.wordmark:hover{color:var(--ink)}
.nav{display:flex}
.nav a{font-family:var(--font-record);font-weight:560;font-size:.95rem;color:var(--ink);text-decoration:none;
  padding:var(--s-3) var(--s-4);border-bottom:var(--rule-heavy) solid transparent;margin-bottom:calc(-1 * var(--rule-heavy));
  transition:border-color var(--t-quick) var(--ease-out)}
.nav a:hover{border-bottom-color:var(--rule);color:var(--ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--verify)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-family:var(--font-record);font-weight:600;font-size:.95rem;
  padding:var(--s-2) var(--s-3);border:1px solid var(--ink);border-radius:var(--r-control);margin-bottom:var(--s-3)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--paper)}
.menu nav{position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:100%;z-index:10;background:var(--paper);
  border-top:var(--rule-heavy) solid var(--ink);border-bottom:var(--rule-hair) solid var(--ink);padding:var(--s-2) var(--gutter) var(--s-4)}
.menu nav a{display:block;padding:var(--s-3) 0;border-bottom:1px solid var(--rule-soft);font-family:var(--font-record);
  font-weight:560;font-size:1.05rem;color:var(--ink);text-decoration:none}
.menu nav a[aria-current="page"]{color:var(--verify)}

/* ───────────────────────── 4. Controls ───────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-record);font-weight:600;font-size:.95rem;
  letter-spacing:.005em;text-decoration:none;padding:.8rem 1.15rem;border-radius:var(--r-control);
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background-color var(--t-quick) var(--ease-out),border-color var(--t-quick) var(--ease-out)}
.btn:hover{background:var(--verify-deep);border-color:var(--verify-deep);color:#fff}
.arrow{display:inline-block;transition:transform var(--t-quick) var(--ease-out)}
a:hover .arrow{transform:translateX(3px)}
a:hover .arrow--out{transform:translate(2px,-2px)}
.textlink{font-family:var(--font-record);font-weight:600;font-size:.95rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.verify{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);text-decoration:none;color:var(--verify);
  border:1.5px solid var(--verify);border-radius:var(--r-control);padding:var(--s-3) var(--s-4);background:var(--sheet);
  transition:background-color var(--t-quick) var(--ease-out),color var(--t-quick) var(--ease-out)}
.verify svg{width:1.5rem;height:1.5rem}
.verify span{display:block}
.verify strong{display:block;font-family:var(--font-record);font-weight:650;font-size:1rem;line-height:1.2}
.verify small{display:block;font-family:var(--font-record);font-size:.8rem;margin-top:.1rem}
.verify:hover{background:var(--verify);color:#fff}

/* ───────────────────────── 5. Letterhead hero (home) ───────────────────────── */
.letterhead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-bottom:var(--rule-hair) solid var(--ink)}
.letterhead__text{display:flex;flex-direction:column;padding:var(--s-8) var(--s-7) 0 0}
.letterhead h1{font-size:var(--step-4);font-stretch:68%;font-weight:720;letter-spacing:-.02em;line-height:.88;
  margin:var(--s-4) 0 var(--s-5)}
.letterhead__rule{width:4.5rem;height:var(--rule-heavy);background:var(--verify);margin-bottom:var(--s-5)}
.lede{font-size:var(--step-2);line-height:1.32;max-width:31rem}
.letterhead .actions{margin:var(--s-5) 0 var(--s-8)}
.letterhead__attest{margin:auto 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule-hair) solid var(--ink)}
.letterhead__attest div{padding:var(--s-3) var(--s-4) var(--s-4) 0}
.letterhead__attest div + div{padding-left:var(--s-4);border-left:var(--rule-hair) solid var(--rule)}
.letterhead__attest dt{margin-bottom:var(--s-1)}
.letterhead__attest dd{margin:0;font-family:var(--font-record);font-weight:600;font-size:1rem;line-height:1.25}
.letterhead .plate{margin:0 calc(-1 * max(var(--gutter), (100vw - var(--page)) / 2 + var(--gutter))) 0 0;
  display:flex;flex-direction:column;min-height:40rem}
.letterhead .plate img{flex:1;width:100%;height:100%;min-height:0;object-fit:cover}
.letterhead .plate figcaption{padding:var(--s-2) var(--gutter) var(--s-2) var(--s-3)}

/* Plates: photography is evidence, square-cornered and captioned like an exhibit. */
.plate{margin:0}
.plate img{background:var(--rule-soft)}
.plate figcaption{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;border-top:var(--rule-hair) solid var(--ink)}

/* ───────────────────────── 6. Sections ───────────────────────── */
.section{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-4) var(--s-6);padding-block:var(--s-8)}
.section + .section{border-top:var(--rule-hair) solid var(--rule)}
.section__label{padding-top:.35rem}
.section__label .label{display:block}
.sect{display:block;font-family:var(--font-record);font-stretch:68%;font-weight:300;font-size:var(--step-3);line-height:1;margin-bottom:var(--s-2)}
.section h2{font-size:var(--step-3);margin-bottom:var(--s-5)}
.section--full{grid-template-columns:minmax(0,1fr)}
.section--full .section__label{display:flex;align-items:baseline;gap:var(--s-3)}
.section--full .sect{margin:0}
.lede-quiet{font-size:var(--step-1);line-height:1.5}

/* Articles: principles as a ruled definition list, not cards. */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--s-6) 0 0;border-top:var(--rule-heavy) solid var(--ink)}
.articles > div{padding:var(--s-4) var(--s-5) 0 0}
.articles > div + div{padding-left:var(--s-5);border-left:var(--rule-hair) solid var(--rule)}
.articles dt{font-family:var(--font-record);font-weight:650;font-stretch:88%;font-size:var(--step-1);line-height:1.1;margin:var(--s-2) 0 var(--s-3)}
.articles dd{margin:0;font-size:1.02rem;line-height:1.55}

/* ───────────────────────── 7. Plat (region map) ───────────────────────── */
.plat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7);align-items:start;margin-top:var(--s-6)}
.plat__map{position:relative;aspect-ratio:1/1;background:var(--sheet);border:var(--rule-hair) solid var(--ink);overflow:hidden}
.plat__map svg.grid{position:absolute;inset:0;width:100%;height:100%}
.plat__map .grid line{stroke:var(--rule-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.tick{position:absolute;font-family:var(--font-record);font-size:.66rem;letter-spacing:.04em;color:var(--ink-2);line-height:1;pointer-events:none}
.tick--lat{right:.45rem;transform:translateY(-130%)}
.tick--lon{bottom:.45rem;transform:translateX(.3rem)}
.plat__range{position:absolute;left:.5rem;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);white-space:nowrap;
  font-family:var(--font-text);font-style:italic;font-size:.95rem;color:var(--ink-2);pointer-events:none}
.plat__inset{position:absolute;right:.6rem;top:.6rem;width:5.5rem;height:auto;background:var(--sheet)}
.plat__inset .state{fill:none;stroke:var(--ink);stroke-width:1.2}
.plat__inset .region{fill:var(--verify)}
.plat__inset text{font-family:var(--font-record);font-size:9px;fill:var(--ink-2);letter-spacing:.08em}
.marker{position:absolute;transform:translate(-.95rem,-50%);display:flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--ink)}
.marker__dot{display:grid;place-items:center;min-width:1.9rem;height:1.9rem;padding:0 .35rem;border-radius:var(--r-marker);
  background:var(--sheet);border:1.5px solid var(--ink);font-family:var(--font-record);font-weight:650;font-size:.8rem;font-variant-numeric:tabular-nums;
  transition:background-color var(--t-state) var(--ease-out),color var(--t-state) var(--ease-out),border-color var(--t-state) var(--ease-out),transform var(--t-state) var(--ease-out)}
.marker__name{font-family:var(--font-record);font-weight:600;font-size:.88rem;background:var(--sheet);padding:0 .25rem}
.marker:hover,.marker:focus-visible{color:var(--ink)}
.marker:hover .marker__dot,.marker:focus-visible .marker__dot{background:var(--verify);border-color:var(--verify);color:#fff;transform:scale(1.15)}
.peak{position:absolute;transform:translate(-50%,-.3rem);display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-family:var(--font-record);font-size:.74rem;line-height:1.15;color:var(--ink-2);text-align:center;pointer-events:none}
.peak svg{width:.85rem;height:.75rem;fill:none;stroke:var(--ink-2);stroke-width:1.5}
.peak small{display:block;font-size:.9em;font-variant-numeric:tabular-nums}
.plat__caption{margin-top:var(--s-3);font-size:.95rem;color:var(--ink-2)}
.towns{list-style:none;margin:0;padding:0;border-top:var(--rule-heavy) solid var(--ink)}
.towns > li{border-bottom:var(--rule-hair) solid var(--rule);padding-inline:var(--s-2);transition:background-color var(--t-state) var(--ease-out)}
.towns > li:hover,.towns > li:focus-within{background:var(--verify-wash)}
.towns h3{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--step-1);font-stretch:88%;padding:var(--s-3) 0 var(--s-2)}
.towns h3 .num{font-size:.85rem;font-weight:500;color:var(--ink-2)}
.towns ol{list-style:none;margin:0 0 var(--s-3);padding:0;columns:2;column-gap:var(--s-4)}
.towns ol li{font-family:var(--font-record);font-size:.88rem;line-height:1.35;padding:.2rem 0;break-inside:avoid}
.towns ol a{color:var(--ink);text-decoration:none}
.towns ol a:hover{color:var(--verify);text-decoration:underline}
.towns .no{display:inline-block;min-width:1.6rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.register td.no{color:var(--ink-2);width:2.5rem}
.plat .actions{margin-top:var(--s-5)}

/* ───────────────────────── 8. Excerpt / note ───────────────────────── */
.excerpt{background:var(--sheet);border-top:var(--rule-heavy) solid var(--ink);padding:var(--s-6) var(--s-6) var(--s-5)}
.excerpt__text{font-size:var(--step-1);line-height:1.45;max-width:44rem;margin-bottom:var(--s-5)}
.note{border-left:var(--rule-heavy) solid var(--exception);padding:var(--s-1) 0 var(--s-1) var(--s-4);max-width:46rem;margin-block:var(--s-6)}
.note .label{color:var(--exception);display:block;margin-bottom:var(--s-1)}
.note p{font-style:italic;font-size:1rem;color:var(--ink-2);margin:0;max-width:none}

/* ───────────────────────── 9. Page head (subpages) ───────────────────────── */
.pagehead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4) var(--s-6);align-items:end;
  padding-block:var(--s-8) var(--s-6);border-bottom:var(--rule-hair) solid var(--ink)}
.pagehead h1{font-size:var(--step-4);font-stretch:68%;font-weight:720;line-height:.88;letter-spacing:-.02em;margin-top:var(--s-3)}
.pagehead .lede{font-size:var(--step-1);line-height:1.45;margin:0}

/* ───────────────────────── 10. The Standard (document) ───────────────────────── */
.doc{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:var(--s-7);padding-top:var(--s-7)}
.doc__index{position:sticky;top:var(--s-5);align-self:start}
.doc__list{position:relative;margin-top:var(--s-3);border-left:var(--rule-hair) solid var(--rule)}
.doc__list ol{list-style:none;margin:0;padding:0}
.doc__index a{display:grid;grid-template-columns:1.9rem minmax(0,1fr);padding:.45rem 0 .45rem var(--s-4);font-family:var(--font-record);
  font-size:.9rem;line-height:1.25;color:var(--ink-2);text-decoration:none;transition:color var(--t-quick) var(--ease-out)}
.doc__index a:hover{color:var(--ink)}
.doc__index a[aria-current="true"]{color:var(--ink);font-weight:600}
.track{position:absolute;left:-2px;top:0;width:3px;height:var(--h,2.1rem);background:var(--verify);
  transform:translateY(var(--y,0));transition:transform var(--t-state) var(--ease-out),height var(--t-state) var(--ease-out)}
.doc__progress{margin-top:var(--s-4)}
.clause{display:grid;grid-template-columns:4.75rem minmax(0,1fr);border-top:var(--rule-heavy) solid var(--ink);
  padding-block:var(--s-4) var(--s-7);scroll-margin-top:var(--s-5)}
.clause__no{font-family:var(--font-record);font-stretch:66%;font-weight:300;font-size:var(--step-3);line-height:.9}
.clause h2{font-size:var(--step-2);font-stretch:85%;margin:.3rem 0 var(--s-3)}
.checks{list-style:none;margin:var(--s-4) 0;padding:0;border-top:var(--rule-hair) solid var(--rule);max-width:44rem;background:var(--sheet)}
.checks li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:var(--s-3);padding:.7rem var(--s-3);
  border-bottom:var(--rule-hair) solid var(--rule-soft);font-size:1.02rem;line-height:1.45}
.checks li::before{content:"";width:1rem;height:1rem;margin-top:.22rem;border:1.5px solid var(--verify);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6-6.4' fill='none' stroke='%231F3BB3' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat}
.clause .textlink{display:inline-block;margin-top:var(--s-2)}
.attestation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5) var(--s-6);align-items:end;
  border-top:var(--rule-heavy) solid var(--ink);border-bottom:var(--rule-hair) solid var(--ink);padding-block:var(--s-5) var(--s-6)}
.attestation p{margin:0;max-width:40rem}

/* ───────────────────────── 11. Articles (long-form subpages) ───────────────────────── */
.article{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-3) var(--s-6);padding-block:var(--s-7);
  border-bottom:var(--rule-hair) solid var(--rule)}
.article h2{font-size:var(--step-2);font-stretch:85%;line-height:1.05;margin-top:var(--s-2)}
.address{font-style:normal;font-family:var(--font-record);font-size:1.05rem;line-height:1.5;border-left:var(--rule-heavy) solid var(--ink);padding-left:var(--s-4);margin-bottom:var(--s-4)}

/* ───────────────────────── 12. Register (stays directory) ───────────────────────── */
.register-wrap{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--s-6);align-items:start;padding-block:var(--s-6) var(--s-7)}
.filter{border:0;margin:0 0 var(--s-4);padding:0;min-width:0}
.filter legend{padding:0;margin-bottom:var(--s-2)}
.filter__set{display:flex;flex-wrap:wrap}
.filter input{position:absolute;opacity:0;width:1px;height:1px}
.filter label{font-family:var(--font-record);font-weight:560;font-size:.88rem;padding:.45rem .8rem;border:1px solid var(--ink);
  margin:0 -1px -1px 0;cursor:pointer;background:var(--paper);transition:background-color var(--t-quick) var(--ease-out),color var(--t-quick) var(--ease-out)}
.filter label .num{color:inherit;opacity:.7;margin-left:.2rem}
.filter label:hover{background:var(--verify-wash)}
.filter input:checked + label{background:var(--ink);color:var(--paper)}
.filter input:focus-visible + label{outline:2px solid var(--verify);outline-offset:2px;position:relative;z-index:1}
.table-scroll{overflow-x:auto;background:var(--sheet);border-top:var(--rule-heavy) solid var(--ink);border-bottom:var(--rule-hair) solid var(--ink)}
.register{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-record);font-size:.92rem;font-variant-numeric:tabular-nums;counter-reset:shown}
.register caption{text-align:left;padding:var(--s-3) .8rem var(--s-2);caption-side:top}
.register abbr{text-decoration:none;cursor:help}
.register th,.register td{padding:.6rem .65rem;border-bottom:var(--rule-hair) solid var(--rule-soft);text-align:left;vertical-align:middle;white-space:nowrap}
.register thead th{border-bottom:var(--rule-hair) solid var(--ink);padding-block:.55rem}
.register .r{text-align:right}
.register tbody tr{counter-increment:shown;transition:background-color var(--t-quick) var(--ease-out)}
.register tbody tr:hover,.register tbody tr:focus-within,.register tbody tr.is-previewed{background:var(--verify-wash)}
.register th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--sheet);font-weight:600;white-space:normal;min-width:13rem;
  transition:background-color var(--t-quick) var(--ease-out)}
.register tbody tr:hover th[scope="row"],.register tbody tr:focus-within th[scope="row"],.register tbody tr.is-previewed th[scope="row"]{background:var(--verify-wash)}
.prop{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--s-3);align-items:center}
.prop img{width:4rem;height:3rem;object-fit:cover;background:var(--rule-soft)}
.register .feature{color:var(--ink-2);white-space:normal;min-width:9.5rem;font-size:.86rem;line-height:1.35}
.register .book{font-weight:600;text-decoration:none}
.register .book:hover{text-decoration:underline}
.register tfoot td{border-bottom:0;padding-block:.7rem;color:var(--ink-2)}
.register tfoot .count{color:var(--ink);font-weight:650}
.register tfoot .count::before{content:counter(shown)}
.preview{position:sticky;top:var(--s-5)}
.preview .plate img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity var(--t-state) var(--ease-out)}
.preview .plate.is-loading img{opacity:.4}
.preview figcaption{display:grid;gap:var(--s-1);padding-top:var(--s-3)}
.preview__name{font-family:var(--font-record);font-weight:650;font-stretch:88%;font-size:var(--step-1);line-height:1.1}
.preview__meta{font-family:var(--font-record);font-size:.9rem;color:var(--ink-2)}
.preview__feature{font-size:1rem;margin-top:var(--s-3)}

/* Towns: large counts beside ruled blurbs. */
.towngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--rule-heavy) solid var(--ink)}
.towngrid > div{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) var(--s-5) var(--s-5) 0;border-bottom:var(--rule-hair) solid var(--rule)}
.towngrid > div:nth-child(2n){padding-left:var(--s-5);border-left:var(--rule-hair) solid var(--rule)}
.towngrid__n{font-family:var(--font-record);font-stretch:66%;font-weight:300;font-size:var(--step-3);line-height:.85}
.towngrid h3{font-size:var(--step-1);font-stretch:88%;margin-bottom:var(--s-2)}
.towngrid p{font-size:1rem;margin-bottom:var(--s-2)}

/* ───────────────────────── 13. FAQ (disclosures) ───────────────────────── */
.faq{border-top:var(--rule-heavy) solid var(--ink);max-width:54rem;margin-block:var(--s-6) 0}
.faq details{border-bottom:var(--rule-hair) solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1rem;align-items:baseline;
  gap:var(--s-3);padding:var(--s-5) 0;font-family:var(--font-record);font-weight:620;font-stretch:88%;font-size:var(--step-1);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .q{color:var(--verify-deep)}
.faq .q-no{font-stretch:100%;font-weight:500;font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.faq .sign{position:relative;width:1rem;height:1rem;align-self:center}
.faq .sign::before,.faq .sign::after{content:"";position:absolute;left:0;top:calc(50% - .75px);width:100%;height:1.5px;background:var(--ink);
  transition:transform var(--t-state) var(--ease-out)}
.faq .sign::after{transform:rotate(90deg)}
.faq details[open] .sign::after{transform:rotate(0)}
.faq .answer{padding:0 0 var(--s-5) calc(2.75rem + var(--s-3))}
.faq .answer p{margin:0}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow:hidden;
    transition:block-size var(--t-state) var(--ease-out),content-visibility var(--t-state) allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ───────────────────────── 14. Ledger timeline (about) ───────────────────────── */
.ledger{list-style:none;margin:0;padding:0;border-left:1.5px dashed var(--ink);max-width:40rem}
.ledger li{position:relative;padding:0 0 var(--s-6) var(--s-6)}
.ledger li:last-child{padding-bottom:0}
.ledger li::before{content:"";position:absolute;left:-.4rem;top:.3rem;width:.7rem;height:.7rem;background:var(--paper);border:1.5px solid var(--ink)}
.ledger .year{font-family:var(--font-record);font-stretch:68%;font-weight:700;font-size:var(--step-2);line-height:1;display:block;margin-bottom:var(--s-2)}
.ledger p{margin:0}

/* ───────────────────────── 15. Colophon (footer) ───────────────────────── */
.colophon{background:var(--ink);color:var(--on-ink);margin-top:var(--s-9);padding-block:var(--s-7) var(--s-5)}
.colophon a{color:var(--on-ink);text-decoration:none}
.colophon a:hover{color:var(--verify-on-ink);text-decoration:underline}
.colophon .label{color:var(--on-ink-2);margin-bottom:var(--s-3);display:block}
.colophon__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr);gap:var(--s-6)}
.colophon__mark{font-family:var(--font-record);font-stretch:68%;font-weight:760;font-size:2.1rem;line-height:.88;margin-bottom:var(--s-4)}
.colophon__disclosure{font-size:1rem;line-height:1.5;max-width:24rem}
.colophon ul{list-style:none;margin:0;padding:0;font-family:var(--font-record);font-size:.92rem}
.colophon li{padding:.2rem 0}
.colophon address{font-style:normal;font-family:var(--font-record);font-size:.92rem;line-height:1.55;margin-bottom:var(--s-3)}
.colophon .verify-line{color:var(--verify-on-ink);font-family:var(--font-record);font-size:.92rem;font-weight:600}
.colophon__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-7);padding-top:var(--s-4);
  border-top:var(--rule-hair) solid #3A3E44;font-family:var(--font-record);font-size:.8rem;color:var(--on-ink-2)}

/* ───────────────────────── 16. Page transitions ───────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms}

/* ───────────────────────── 17. Responsive ───────────────────────── */
@media (max-width:1040px){
  .register-wrap{grid-template-columns:minmax(0,1fr)}
  .preview{display:none}
  .colophon__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plat{gap:var(--s-6)}
}
@media (max-width:900px){
  .masthead__lic{display:none}
  .nav{display:none}
  .menu{display:block}
  .masthead__bar{position:relative;align-items:center}
  .letterhead{grid-template-columns:minmax(0,1fr)}
  .letterhead__text{padding:var(--s-7) 0 0}
  .letterhead .actions{margin-bottom:var(--s-6)}
  .letterhead .plate{margin:var(--s-6) calc(-1 * var(--gutter)) 0;min-height:0}
  .letterhead .plate img{aspect-ratio:4/3;flex:none;height:auto}
  .section,.article{grid-template-columns:minmax(0,1fr)}
  .section{padding-block:var(--s-7)}
  .plat{grid-template-columns:minmax(0,1fr)}
  .pagehead{grid-template-columns:minmax(0,1fr);padding-block:var(--s-7) var(--s-5)}
  .doc{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .doc__index{position:static}
  .doc__list{border-left:0}
  .track,.doc__progress{display:none}
  .doc__list ol{columns:2}
  .doc__index a{padding-left:0}
  .towngrid{grid-template-columns:minmax(0,1fr)}
  .towngrid > div:nth-child(2n){padding-left:0;border-left:0}
}
@media (max-width:640px){
  .articles{grid-template-columns:minmax(0,1fr)}
  .articles > div + div{padding-left:0;border-left:0;border-top:var(--rule-hair) solid var(--rule);margin-top:var(--s-4)}
  .clause{grid-template-columns:minmax(0,1fr)}
  .register th[scope="row"]{min-width:11.5rem}
  .prop{grid-template-columns:3rem minmax(0,1fr);gap:var(--s-2)}
  .prop img{width:3rem;height:2.25rem}
  .attestation{grid-template-columns:minmax(0,1fr)}
  .towns ol{columns:1}
  .colophon__grid{grid-template-columns:minmax(0,1fr)}
  .excerpt{padding:var(--s-5) var(--s-4)}
  .marker__name{font-size:.8rem}
  .doc__list ol{columns:1}
  .plat__inset{width:4.25rem}
}
@media (max-width:480px){
  .letterhead__attest{grid-template-columns:minmax(0,1fr)}
  .letterhead__attest div + div{padding-left:0;border-left:0;border-top:var(--rule-hair) solid var(--rule)}
  .peak{font-size:.66rem}
  .masthead__strip .label{letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}
@media print{
  .masthead nav,.menu,.filter,.preview,.skip{display:none}
  body{background:#fff}
  .colophon{background:#fff;color:#000}
}