/* ===========================================================================
   Town of Arlington, Vermont — prototype theme  (stoa.works/arlington-vt)
   World: "Battenkill & Marble." Covered-bridge motif, town-report type voice,
   open-meeting transparency. OKLCH-derived spruce accent (WCAG 2.2 verified).
   A faithful static render of the proposed WordPress site. Reduced-motion default.
   =========================================================================== */

/* ---- Fonts (self-hosted woff2, OFL) ---- */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/publicsans.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("fonts/spline-mono.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  /* OKLCH spruce ramp (gamut-fit, contrast-verified) */
  --spruce-50:#f0faf5; --spruce-100:#dcf3e9; --spruce-200:#b7e5d2; --spruce-300:#85d0b3;
  --spruce-400:#52b392; --spruce-500:#089772; --spruce-600:#007a5c; --spruce-700:#006048;
  --spruce-800:#004734; --spruce-900:#002d20; --spruce-950:#001d13;
  /* neutrals — Vermont marble & ink */
  --marble:#f6f2e7; --marble-2:#efe9d8; --paper:#fbf9f1; --line:#e2dcc9; --line-2:#d4cdb6;
  --ink:#16201c; --ink-soft:#3c4642; --ink-mute:#5c655f;
  /* signals — amber not red (house rule); barn red heritage only */
  --amber:#9a5b00; --amber-bg:#fbf0d8; --barn:#8a2b21;
  /* roles */
  --bg:var(--marble); --surface:var(--paper); --text:var(--ink); --muted:var(--ink-mute);
  --accent:var(--spruce-700); --accent-strong:var(--spruce-800); --border:var(--line);
  --focus:var(--spruce-600);
  /* fluid type scale via clamp() (320 → 1280) */
  --step--1:clamp(.83rem,.79rem + .18vw,.94rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.13rem);
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.5rem);
  --step-2:clamp(1.44rem,1.31rem + .64vw,2rem);
  --step-3:clamp(1.73rem,1.52rem + 1.02vw,2.66rem);
  --step-4:clamp(2.07rem,1.74rem + 1.6vw,3.55rem);
  --step-5:clamp(2.49rem,2rem + 2.4vw,4.5rem);
  --wrap:74rem; --wrap-narrow:42rem;
  --r:10px; --r-lg:18px; --shadow:0 1px 2px rgba(22,32,28,.06),0 6px 22px rgba(22,32,28,.07);
  --shadow-lg:0 2px 6px rgba(22,32,28,.08),0 22px 50px rgba(0,45,32,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Public Sans",system-ui,sans-serif;
  font-size:var(--step-0);line-height:1.62;font-weight:380;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,serif;font-weight:560;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5em}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)}
p{margin:0 0 1rem;max-width:64ch} a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--accent-strong)}
img{max-width:100%;height:auto;display:block} ul,ol{padding-left:1.2em}
strong{font-weight:640}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace;font-weight:480;letter-spacing:-.02em}
.serif{font-family:"Newsreader",Georgia,serif}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--spruce-800);color:#fff;padding:.7rem 1rem;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.eyebrow{font-family:"Spline Sans Mono",monospace;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--spruce-700);font-weight:520}

/* ---- Prototype banner ---- */
.proto-banner{background:var(--spruce-950);color:var(--spruce-100);font-size:.82rem;text-align:center;
  padding:.5rem 1rem;font-family:"Spline Sans Mono",monospace;letter-spacing:.01em}
.proto-banner a{color:#fff;text-decoration:underline}

/* ---- Header / nav ---- */
.util{background:var(--spruce-900);color:var(--spruce-100)}
.util .wrap{display:flex;gap:1rem;align-items:center;justify-content:flex-end;min-height:38px;font-size:var(--step--1);flex-wrap:wrap}
.util a{color:var(--spruce-100)} .util a:hover{color:#fff}
.util .util-left{margin-right:auto;font-family:"Spline Sans Mono",monospace;letter-spacing:.02em;color:var(--spruce-200)}
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:1rem;padding:.8rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink)}
.brand img{width:54px;height:54px;border-radius:8px}
.brand b{font-family:"Newsreader",serif;font-weight:600;font-size:var(--step-2);display:block;line-height:1}
.brand span{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--spruce-700)}
.masthead-actions{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.menu-btn{display:none}
nav.primary{background:var(--spruce-800);position:sticky;top:0;z-index:40;box-shadow:0 2px 0 var(--spruce-950)}
nav.primary ul{display:flex;flex-wrap:wrap;gap:.1rem;list-style:none;margin:0;padding:0;width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
nav.primary a{display:block;color:var(--spruce-100);text-decoration:none;padding:.85rem .95rem;font-weight:500;font-size:.96rem;border-bottom:3px solid transparent}
nav.primary a:hover{background:var(--spruce-900);color:#fff}
nav.primary a[aria-current="page"]{color:#fff;border-bottom-color:var(--spruce-300);background:var(--spruce-900)}
@media(max-width:820px){
  .menu-btn{display:inline-flex}
  nav.primary ul{flex-direction:column;display:none;padding-block:.4rem}
  nav.primary.open ul{display:flex}
  nav.primary a{padding:.9rem .4rem;border-bottom:1px solid var(--spruce-900)}
  nav.primary a[aria-current="page"]{border-bottom-color:var(--spruce-900);border-left:4px solid var(--spruce-300);padding-left:.8rem}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1.15rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:1.5px solid transparent;font-family:inherit;transition:transform .15s var(--ease),background .15s}
.btn-primary{background:var(--spruce-700);color:#fff}
.btn-primary:hover{background:var(--spruce-800);color:#fff}
.btn-ghost{background:transparent;color:var(--spruce-800);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--spruce-600);background:var(--spruce-50)}
.btn-light{background:var(--spruce-300);color:var(--ink)} .btn-light:hover{background:var(--spruce-200);color:var(--ink)}

/* ---- Layout helpers ---- */
section{padding-block:clamp(2.5rem,1.8rem + 3vw,4.5rem)}
.section-head{max-width:60ch;margin-bottom:1.8rem}
.grid{display:grid;gap:1.1rem}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---- Cards / tiles ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--shadow)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.25rem;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:.35rem;box-shadow:var(--shadow);position:relative;border-top:4px solid var(--spruce-600)}
.tile h3{font-size:var(--step-1);margin:0}
.tile p{margin:0;color:var(--muted);font-size:var(--step--1)}
.tile .tile-go{margin-top:auto;font-weight:600;color:var(--spruce-700);font-size:.9rem}
a.tile:hover{border-color:var(--spruce-400)}

/* ---- Hero ---- */
.hero{position:relative;background:var(--spruce-950);color:var(--marble);overflow:hidden}
.hero .plate{position:absolute;inset:0}
.hero .plate img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.92)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--spruce-950) 24%,rgba(0,32,22,.82) 46%,rgba(0,40,28,.34) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(3rem,2rem + 6vw,6rem)}
.hero h1{color:#fff;max-width:18ch;font-size:var(--step-5);font-weight:520}
.hero p.lede{color:var(--spruce-100);font-size:var(--step-1);max-width:46ch}
.hero .eyebrow{color:var(--spruce-300)}

/* ---- Search box ---- */
.search{display:flex;gap:.5rem;background:#fff;border-radius:999px;padding:.4rem .4rem .4rem 1.1rem;box-shadow:var(--shadow-lg);
  border:1px solid var(--line)}
.search input{flex:1;border:0;background:transparent;font-size:1.05rem;font-family:inherit;color:var(--ink);min-width:0}
.search input::placeholder{color:#7d837b}
.search input:focus{outline:none}
.search .btn{flex:none}

/* ---- Autocomplete listbox ---- */
.ac-listbox{position:absolute;top:100%;left:0;right:0;margin-top:.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:50;max-height:360px;overflow-y:auto}
.ac-listbox::-webkit-scrollbar{width:6px}
.ac-listbox::-webkit-scrollbar-track{background:var(--marble)}
.ac-listbox::-webkit-scrollbar-thumb{background:var(--spruce-300);border-radius:3px}
.ac-listbox::-webkit-scrollbar-thumb:hover{background:var(--spruce-400)}
.ac-group{padding:.6rem 0}
.ac-group:not(:first-child){border-top:1px solid var(--line)}
.ac-group-label{font-family:"Spline Sans Mono",monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--spruce-700);font-weight:600;padding:.4rem .85rem 0}
.ac-option{padding:.7rem .85rem;cursor:pointer;display:flex;align-items:flex-start;gap:.7rem;min-height:44px;color:var(--ink);text-decoration:none;border:0;background:transparent;width:100%;text-align:left;font-family:inherit;font-size:1rem;transition:background .12s}
.ac-option:hover{background:var(--spruce-50)}
.ac-option.is-active{background:var(--spruce-100)}
.ac-option:focus{outline:3px solid var(--focus);outline-offset:-3px}
.ac-option-content{flex:1;min-width:0}
.ac-option-title{display:block;font-weight:600;color:var(--ink);word-break:break-word}
.ac-option-meta{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem;font-family:"Spline Sans Mono",monospace}
.ac-option-icon{flex:none;width:32px;height:32px;border-radius:6px;background:var(--spruce-100);color:var(--spruce-800);display:grid;place-items:center;font-family:"Spline Sans Mono",monospace;font-size:.66rem;font-weight:600;text-transform:uppercase}

/* ---- Rooms (dark band) ---- */
.room-dark{background:var(--spruce-900);color:var(--marble);background-image:linear-gradient(rgba(0,29,19,.86),rgba(0,29,19,.92))}
.room-dark.planks{background-image:linear-gradient(rgba(0,29,19,.9),rgba(0,29,19,.94)),url("img/plank-texture.png");background-size:auto,520px}
.room-dark h1,.room-dark h2,.room-dark h3{color:#fff}
.room-dark a{color:var(--spruce-300)} .room-dark .eyebrow{color:var(--spruce-300)}
.room-dark .card{background:rgba(255,255,255,.05);border-color:rgba(133,208,179,.25);color:var(--marble)}
.room-dark p{color:var(--spruce-100)}
/* light cards/tiles/chips inside a dark room keep dark-on-light text */
.room-dark .tile,.room-dark .tile h3{color:var(--ink)} .room-dark .tile p{color:var(--ink-soft)} .room-dark .tile .tile-go{color:var(--spruce-700)}
/* `.room-dark a` (0,1,1) outspecifies `.btn-light` (0,1,0), so a light button
   inside a dark room inherited spruce-300 text on its spruce-300 background —
   1:1 contrast, invisible. Found 2026-07-27 by scripts/audit-site-ux.mjs; axe
   reported zero violations on this page. */
.room-dark .btn-light{color:var(--ink)} .room-dark .btn-light:hover{color:var(--ink)}
.room-dark .chip{color:var(--spruce-800)} .room-dark .chip.rec{color:#fff}
.room-dark .card .record .rmeta b{color:var(--ink)} .room-dark .card .record .rmeta span{color:var(--ink-mute)}
.room-dark .notice{color:#4a3206}

/* ---- Meeting record card ---- */
.record{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem 1.1rem;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--spruce-500);border-radius:var(--r);padding:.85rem 1.1rem}
.record .rtype{font-family:"Spline Sans Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.2rem .5rem;border-radius:99px;background:var(--spruce-100);color:var(--spruce-800);white-space:nowrap;font-weight:520}
.record .rtype.agenda{background:var(--amber-bg);color:var(--amber)}
.record .rtype.warning{background:var(--marble-2);color:var(--ink-soft)}
.record .rmeta b{display:block;font-family:"Newsreader",serif;font-weight:560;font-size:1.05rem;color:var(--ink)}
.record .rmeta span{color:var(--muted);font-size:var(--step--1);font-family:"Spline Sans Mono",monospace}
.record .rlinks{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:.78rem;padding:.32rem .7rem;border-radius:99px;border:1px solid var(--line-2);text-decoration:none;color:var(--spruce-800);background:#fff;white-space:nowrap;min-height:28px;display:inline-flex;align-items:center;gap:.3rem}
.chip:hover{border-color:var(--spruce-500);background:var(--spruce-50)}
.chip.rec{background:var(--spruce-700);color:#fff;border-color:var(--spruce-700)}
@media(max-width:620px){.record{grid-template-columns:1fr;align-items:start}.record .rlinks{justify-content:flex-start}}

/* ---- Pills / filters ---- */
.pills{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0}
.pill{font-size:.88rem;padding:.45rem .9rem;border-radius:99px;border:1px solid var(--line-2);background:#fff;color:var(--ink-soft);
  cursor:pointer;text-decoration:none;font-family:inherit;min-height:36px;display:inline-flex;align-items:center}
.pill[aria-pressed="true"],.pill.is-on{background:var(--spruce-800);color:#fff;border-color:var(--spruce-800)}

/* ---- Stat / scorecard ---- */
.stat{font-family:"Newsreader",serif;font-size:var(--step-4);font-weight:600;color:var(--spruce-700);line-height:1}
.stat-row{display:flex;gap:.6rem;align-items:baseline}
.bignum{font-variant-numeric:tabular-nums}

/* ---- Notices / callouts (amber, never red) ---- */
.notice{background:var(--amber-bg);border:1px solid #e9c97f;border-left:4px solid var(--amber);border-radius:var(--r);padding:.9rem 1.1rem;color:#5b3a08}
.notice b{color:var(--amber)}

/* ---- Source cards (Ask) ---- */
.answer{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.answer .a-body{font-size:var(--step-1);line-height:1.55;font-family:"Newsreader",serif;color:var(--ink)}
.sources{display:grid;gap:.6rem;margin-top:1.1rem}
.source-card{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem;background:#fff;text-decoration:none;color:var(--ink)}
.source-card:hover{border-color:var(--spruce-400)}
.source-card .sc-ico{flex:none;width:34px;height:34px;border-radius:8px;background:var(--spruce-100);color:var(--spruce-800);
  display:grid;place-items:center;font-family:"Spline Sans Mono",monospace;font-size:.66rem;font-weight:600}
.source-card b{font-size:.96rem} .source-card span{color:var(--muted);font-size:var(--step--1)}

/* ---- Plates (photo system) ---- */
.plate-frame{border:1px solid var(--line-2);padding:.5rem;background:var(--paper);box-shadow:var(--shadow)}
.plate-frame img{border:1px solid var(--line)}
.plate-cap{font-family:"Spline Sans Mono",monospace;font-size:.72rem;color:var(--muted);margin-top:.5rem;letter-spacing:.02em}

/* ---- Bridge divider motif ---- */
.bridge-rule{height:46px;margin:0;border:0;background:center/auto 44px no-repeat url("img/bridge-mark.png");opacity:.8}

/* ---- Directory / roster ---- */
.roster{display:grid;gap:.2rem}
.roster li{list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:.55rem .2rem;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.roster b{font-weight:580} .roster .role{color:var(--ink-mute);font-size:var(--step--1);font-family:"Spline Sans Mono",monospace}
.roster li>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
.roster a{overflow-wrap:anywhere}

/* ---- Forms (concept demos) ---- */
.field{margin-bottom:1rem} label{display:block;font-weight:560;margin-bottom:.3rem;font-size:.95rem}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:.7rem .85rem;border:1.5px solid var(--line-2);border-radius:var(--r);font-family:inherit;font-size:1rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--spruce-600);box-shadow:0 0 0 3px var(--spruce-100)}
fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem;margin:0 0 1.2rem}
legend{font-family:"Newsreader",serif;font-weight:560;font-size:var(--step-1);padding:0 .4rem}

/* ---- Footer ---- */
footer.site{background:var(--spruce-950);color:var(--spruce-100);padding-block:3rem 2rem;margin-top:3rem}
footer.site a{color:var(--spruce-200)} footer.site a:hover{color:#fff}
footer.site .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media(max-width:760px){footer.site .fgrid{grid-template-columns:1fr;gap:1.4rem}}
footer.site h2{color:#fff;font-size:1rem;font-family:"Spline Sans Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin:0 0 .4rem}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
footer.site .stoa-note{border-top:1px solid var(--spruce-800);margin-top:2rem;padding-top:1.2rem;font-size:.8rem;color:var(--spruce-300);font-family:"Spline Sans Mono",monospace}

/* ---- Breadcrumb / page header ---- */
.page-head{background:var(--marble-2);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-block:2.2rem 1.8rem}
.crumb{font-family:"Spline Sans Mono",monospace;font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:.6rem}
.crumb a{color:var(--spruce-700)}

/* ---- Misc ---- */
.lead{font-size:var(--step-1);color:var(--ink-soft);font-family:"Newsreader",serif;max-width:54ch}
.kicker-list{display:grid;gap:.5rem;padding:0;margin:0;list-style:none}
.kicker-list li{padding-left:1.5rem;position:relative}
.kicker-list li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:.65rem;border:2px solid var(--spruce-600);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.tag{display:inline-block;font-family:"Spline Sans Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--spruce-800);background:var(--spruce-100);padding:.2rem .55rem;border-radius:99px}
.concept-tag{background:var(--amber-bg);color:var(--amber)}

/* ===========================================================================
   Motion — opt-in only (reduced-motion is the default; WCAG 2.2 SC 2.3.3)
   =========================================================================== */
@media (prefers-reduced-motion: no-preference){
  a.tile,.source-card,.record{transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
  a.tile:hover,.source-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
  .reveal{opacity:0;transform:translateY(14px);animation:reveal both linear;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes reveal{to{opacity:1;transform:none}}
  /* scroll-driven transparency timeline (base opacity stays contrast-safe) */
  .tl-step{opacity:.78;transform:translateX(-8px);animation:tl both linear;animation-timeline:view();animation-range:entry 10% cover 35%}
  @keyframes tl{to{opacity:1;transform:none}}
}

/* ---- Print / readable ---- */
@media print{
  .proto-banner,.util,nav.primary,.menu-btn,.masthead-actions,.search,footer.site .stoa-note,.bridge-rule{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero::after,.hero .plate{display:none} .hero{background:#fff;color:#000} .hero h1,.hero p{color:#000}
  a{color:#000;text-decoration:underline} .card,.tile,.record{box-shadow:none;border:1px solid #999;break-inside:avoid}
}
body.readable{--paper:#fff;--marble:#fff;--bg:#fff}
body.readable .hero .plate,body.readable .room-dark{filter:none}