/* Luseland & District Chamber of Commerce — design system

   Direction, 2026-10-20: high-key and quiet. Near-white ground, one dark ink,
   almost no colour, and photographs that fade into the page instead of sitting
   in boxes. Headings are a high-contrast serif in Title Case; everything that
   is not a heading is small, light and widely tracked. The air between things
   is the design.

   On colour. The reference this is built from is essentially monochrome, and
   that restraint is most of why it works. Rather than throw the Chamber's
   palette away to copy it, the dark ink IS the shelterbelt green -- at this
   value it reads as near-black, but it is the crest's green and not a generic
   charcoal. Prairie gold survives as the one warm mark on the page and is
   spent on almost nothing: the thing to press, and the thing currently chosen.

   Light is the design. Dark remains available through the masthead toggle for
   anyone who needs it, and every component is specified in both. */

@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,400..600&display=swap");

:root{
  /* ---- palette, taken off the crest ----
     Sampled from assets/img/logo.png rather than chosen: navy #30486C is the
     single most-used colour in the mark -- the oval, the wordmark and the
     bottom wave -- followed by gold #FCD878 and the greens #60A854 and
     #A8CCA8. The site had been built in shelterbelt green with no navy in it
     at all, which is why it never quite matched the logo sitting on top of it.

     Confirm these against the brand book: a sampled PNG gives the colours as
     exported, not as specified, and the two can differ by a few points. */
  --paper:#F7F8F8;      /* near-white, barely cool */
  --plate:#FFFFFF;
  --plate-2:#EDEFF0;
  /* The ink ramp is near-neutral on purpose. Body text set at the crest
     navy made every sentence on the site read blue, which is a brand colour
     doing the one job it is bad at: text wants to be ink. The navy keeps what
     it is good at -- the bands, the footer, the masthead -- where it reads as
     the Chamber rather than as a font colour. A trace of the cool cast stays
     in the ramp so the two still belong to each other. */
  --ink:#1E242C;        /* 15.0:1 on paper */
  --ink-2:#434C57;      /* 8.3:1 */
  --ink-3:#566069;      /* small tracked labels — 6.1:1, 5.5:1 on the tint */
  --rule:#E2E5E6;
  --rule-2:#C6CBCE;

  --field:#30486C;      /* the crest navy exactly — 9.2:1 against white type */
  --field-2:#243654;
  --on-field:#F3F6FA;
  --on-field-2:#BDC8DA;

  --wheat:#FCD878;      /* the crest gold exactly. A fill, never text: on white
                           it is 1.3:1. Anything set on it is navy. */
  --wheat-2:#F6C94E;
  --wheat-soft:#FEF6E2;
  --on-wheat:#243654;   /* navy on gold — 6.6:1 */
  --accent-ink:#2C6B3A; /* the crest green, deepened to carry text — 6.1:1 on
                           paper. The gold and the mid green are both too light
                           to be read as type on white, so this is the one that
                           marks the chosen thing. */
  --leaf:#60A854;       /* the crest green as a fill */
  --leaf-soft:#E8F2E6;

  --link:#1E242C;      /* links are ink plus an underline, not a blue */
  --focus:#2C6B3A;

  /* The reference lays white type over a pale, misty mountain and can afford a
     whisper of a scrim. The Chamber's hero is a bright gold wheat field at
     midday, which eats white text alive. Same look, much more scrim. */
  --scrim-1:rgba(18,28,22,.72);
  --scrim-2:rgba(18,28,22,.34);
  --shadow:0 1px 2px rgba(27,42,34,.04), 0 18px 48px rgba(27,42,34,.07);
  --shadow-lift:0 2px 6px rgba(27,42,34,.06), 0 30px 70px rgba(27,42,34,.11);

  /* Open Sans is the Chamber's official typeface, from the brand book. One
     family does the whole site: hierarchy is carried by weight and size, not
     by a second face. The crest sets its own name in the same humanist sans,
     so the masthead now matches the logo instead of arguing with it. */
  --f-display:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;

  /* Soft, not sharp. Nothing in the reference has a hard architectural corner. */
  --r:10px;
  --r-sm:6px;
  --r-lg:20px;
  --r-pill:999px;

  --measure:66ch;
  --shell:74rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="dark"]{
  /* The same crest colours after dark: navy deepened to a ground, gold and
     green brought up to carry type on it. */
  --paper:#111A28;
  --plate:#192434;
  --plate-2:#223049;
  --ink:#EAEEF5;
  --ink-2:#B3C0D4;
  --ink-3:#93A2BA;
  --rule:#2A3950;
  --rule-2:#3E5070;
  --field:#0C1422;
  --field-2:#080E18;
  --on-field:#EAEEF5;
  --on-field-2:#B3C0D4;
  --wheat:#FCD878;
  --wheat-2:#FDE5A0;
  --wheat-soft:#2A2413;
  --on-wheat:#1A2338;
  --accent-ink:#FCD878;
  --leaf:#7DC46F;
  --leaf-soft:#16301A;
  --link:#FCD878;
  --focus:#FDE5A0;
  --scrim-1:rgba(6,12,22,.66);
  --scrim-2:rgba(6,12,22,.24);
  --shadow:0 1px 2px rgba(0,0,0,.26), 0 14px 40px rgba(0,0,0,.34);
  --shadow-lift:0 2px 4px rgba(0,0,0,.26), 0 26px 60px rgba(0,0,0,.44);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}
img{max-width:100%;height:auto;display:block;}

a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--wheat);color:var(--on-wheat);
  padding:.6rem 1rem;font-family:var(--f-mono);font-size:.8rem;z-index:99;
}
.skip:focus{left:0;}

/* Hidden from sight, present for a screen reader and for the document outline.
   Unlike .skip it never comes back on focus, so it carries no visual styling. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:700;line-height:1.12;
  margin:0;text-wrap:balance;letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,5vw,3.1rem);}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1rem;max-width:var(--measure);}
.lede{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-2);max-width:50ch;}

.label{
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 .9rem;display:block;
}

/* ---------- masthead ---------- */
.masthead{background:var(--field);color:var(--on-field);}
.masthead a{color:var(--on-field);}
.mast-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;}
.brand{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;}
.brand strong{font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;}
.brand span{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-field-2);
}
.mast-util{
  /* align-items:center, not the flex default. Stretch made all three
     boxes 25.6px tall, but a link puts its 17px line box at the top of
     that box while the button centres its text inside its own padding --
     so the two links sat 4.8px above the pill's lettering and the row
     read as two lines rather than one. nowrap keeps "Town of
     Luseland" whole; see the 640px rule for why that cut-off moved. */
  display:flex;align-items:center;gap:1.1rem;white-space:nowrap;
  font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.mast-util a{color:var(--on-field-2);text-decoration:none;}
.mast-util a:hover{color:var(--on-field);}

nav.primary{border-top:1px solid rgba(255,255,255,.14);}
nav.primary ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 1.6rem;
  list-style:none;margin:0;padding:0;
}
nav.primary a{
  display:block;padding:.85rem 0;text-decoration:none;font-weight:600;font-size:.93rem;
  border-bottom:3px solid transparent;
}
nav.primary a:hover{border-bottom-color:var(--wheat);}
nav.primary a[aria-current="page"]{border-bottom-color:var(--wheat);}
nav.primary li.spacer{flex:1;}
nav.primary a.btn-join{
  background:var(--wheat);color:var(--on-wheat);padding:.5rem 1.1rem;font-weight:700;
  border-bottom:3px solid transparent;margin:.35rem 0;font-size:.9rem;
}
nav.primary a.btn-join:hover{border-bottom-color:transparent;filter:brightness(1.07);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--f-body);font-weight:700;font-size:.95rem;
  padding:.75rem 1.4rem;text-decoration:none;border:2px solid transparent;cursor:pointer;
  border-radius:var(--r-sm);
}
.btn-primary{background:var(--wheat);color:var(--on-wheat);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-on-field{background:transparent;color:var(--on-field);border-color:rgba(255,255,255,.35);}
.btn-on-field:hover{border-color:var(--on-field);}

/* ---------- bands ---------- */
.band{padding:clamp(3rem,6vw,4.75rem) 0;}
.band + .band{border-top:1px solid var(--rule);}
.band-field{background:var(--field);color:var(--on-field);border-top:none;}
.band-field h1,.band-field h2,.band-field h3{color:var(--on-field);}
.band-field p{color:var(--on-field-2);}
.band-field .label{color:var(--on-field-2);}
.band-field a{color:var(--on-field);}
/* `.band-field a` is 0-1-1 and would otherwise beat `.btn-primary` at 0-1-0,
   bleaching the button text to near-invisible on the wheat fill. */
.band-field a.btn-primary{color:var(--on-wheat);}
.sec-title{margin-bottom:1.5rem;}

/* ---------- hero: the search IS the thesis ---------- */
.hero{
  background:var(--field);color:var(--on-field);
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);
}
.hero h1{color:var(--on-field);max-width:16ch;}
.hero p{color:var(--on-field-2);max-width:46ch;margin-top:1rem;}
.hero .label{color:var(--on-field-2);}
/* `.crumbs a` is 0-1-1 and paints ink-dark, which disappears on the hero's
   dark ground. The hero is always dark, so the breadcrumb is always light here. */
.hero .crumbs{color:var(--on-field-2);}
.hero .crumbs a{color:var(--on-field);}
.searchbar{
  display:flex;margin-top:2rem;max-width:38rem;border:2px solid var(--wheat);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
}
.searchbar input{
  flex:1;min-width:0;border:none;background:var(--plate);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;padding:.85rem 1rem;
}
.searchbar button{
  border:none;background:var(--wheat);color:var(--on-wheat);font-family:var(--f-body);
  font-weight:700;font-size:.95rem;padding:.85rem 1.3rem;cursor:pointer;
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.6rem;
  max-width:none;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-field-2);
}

/* ---------- the plat grid: shared section lines ---------- */
/* The 1px gap used to be filled by the container's own background, which meant a row
   that did not fill left a slab of rule colour hanging off the end. Cells now draw
   their own section lines with an outline — outlines sit outside the box, so
   neighbours meet in the gap and an unfilled tail simply is not there. */
.plat{display:grid;gap:1px;background:var(--plate);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;}
.plat-3{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
.plat-4{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));}
.plat > *{background:var(--plate);outline:1px solid var(--rule);}

.card{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.15rem 1.25rem 1.35rem;text-decoration:none;color:inherit;
}
a.card:hover{background:var(--plate-2);}
/* The directory filter hides cards rather than rebuilding the grid, and
   .card{display:flex} would otherwise outrank the browser rule for [hidden]. */
.card[hidden]{display:none;}
.card .cat{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.card h3{font-size:1.05rem;}
/* One membership, several businesses: marks a resident of a shared space, or
   a space that houses residents. Quiet — it qualifies the name, it is not a badge. */
.card .nest{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--ink-3);margin-top:-.15rem;
}
.card .desc{font-size:.92rem;color:var(--ink-2);margin:0;max-width:none;}
/* Member descriptions are real prose. Four lines on a search result, the whole thing on the
   member's own page. Scoped to the directory grid — elsewhere a card's text IS the content. */
#results .card .desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;
}
.card .go{
  margin-top:auto;padding-top:.6rem;font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.08em;color:var(--link);
}

.cat-tile{padding:1.05rem 1.15rem 1.2rem;text-decoration:none;color:inherit;display:block;}
.cat-tile:hover{background:var(--plate-2);}
.cat-tile strong{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1rem;margin-bottom:.2rem;
}
.cat-tile span{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);}
/* A fifth tile in a four-column grid leaves three empty cells and reads as a
   mistake. Spanning the row makes the odd one out look deliberate instead. */
.cat-tile--wide{grid-column:1 / -1;}
@media (max-width:52rem){.cat-tile--wide{grid-column:auto;}}

/* ---------- free-standing illustration ----------
   An illustration is not a photograph: it carries its own sky and its own
   edge, so a frame, a shadow and a cropped aspect box all fight it. This is
   the artwork on the page and nothing around it. */
.illus{
  display:block;width:100%;max-width:46rem;height:auto;
  margin-inline:auto;border-radius:var(--r-sm);
}
.illus-cap{
  max-width:46rem;margin:.7rem auto 0;text-align:center;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.band-field .illus-cap{color:var(--on-field-2);}

/* ---------- people: board and staff ---------- */
.person{display:flex;flex-direction:column;padding:0;}
.person img,.person .initials{
  width:100%;aspect-ratio:1;display:block;background:var(--plate-2);
  object-fit:cover;object-position:50% 12%;
}
/* Nobody gets a stock face standing in for them. A board member without a
   photograph gets their initials, set in the same type as the headings. */
.person .initials{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:2.6rem;
  color:var(--ink-3);letter-spacing:.03em;
}
.person-body{padding:1.1rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.3rem;}
.person .role{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.person h3{font-size:1.05rem;}
.person .affil{font-size:.92rem;color:var(--ink-2);margin:0;}
.person .bio{font-size:.92rem;color:var(--ink-2);margin:.5rem 0 0;max-width:none;}
.person .bio a{color:var(--link);}

/* ---------- directory controls ---------- */
.controls{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:.9rem 0;margin-bottom:1.75rem;
}
.controls-inner{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
.controls input[type="search"]{
  border-radius:var(--r-sm);
  flex:1 1 16rem;min-width:0;border:1px solid var(--rule-2);
  background:var(--plate);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;padding:.65rem .85rem;
}
.controls select{
  border-radius:var(--r-sm);
  border:1px solid var(--rule-2);background:var(--plate);color:var(--ink);
  font-family:var(--f-body);font-size:.95rem;padding:.65rem .85rem;
}
.readout{
  max-width:none;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.empty{padding:2.5rem 1.25rem;text-align:center;color:var(--ink-2);max-width:none;}

/* ---------- member page ---------- */
.crumbs{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ink-3);padding:1.25rem 0 0;
}
.crumbs a{color:var(--ink-2);}
.member-head{padding:1.5rem 0 2rem;border-bottom:1px solid var(--rule);}
.legal{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem;
}
.member-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:2.5rem;padding:2rem 0 3rem;align-items:start;
}
.factbox{border:1px solid var(--rule);background:var(--plate);border-radius:var(--r);overflow:hidden;}
.factbox dl{margin:0;}
.factbox dt{
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:.85rem 1rem 0;
}
.factbox dd{margin:0;padding:.1rem 1rem .85rem;font-size:.95rem;word-break:break-word;}
.factbox dd + dt{border-top:1px solid var(--rule);}
.placeholder{
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-left:3px solid var(--wheat);background:var(--wheat-soft);
  padding:.85rem 1rem;font-size:.92rem;color:var(--ink-2);max-width:var(--measure);
}
.placeholder b{
  display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem;
}

/* ---------- misc content ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:2rem;}
.stack > * + *{margin-top:1rem;}
ul.plain{list-style:none;padding:0;margin:0 0 1rem;max-width:var(--measure);}
ul.plain li{padding:.55rem 0;border-bottom:1px solid var(--rule);}
.notice{
  border-radius:var(--r);
  border:1px solid var(--rule);border-left:3px solid var(--wheat);
  background:var(--plate);padding:1.1rem 1.25rem;max-width:var(--measure);
}
.notice p:last-child{margin-bottom:0;}
.event-row{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);
  gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid var(--rule);
}
.event-date{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--ink-3);text-transform:uppercase;
}
.event-row h3{margin-bottom:.3rem;}
.event-row p{font-size:.94rem;color:var(--ink-2);margin:0;}

.price{display:flex;align-items:baseline;gap:.6rem;margin:.5rem 0 1.25rem;}
.price b{font-family:var(--f-display);font-size:2.4rem;font-weight:700;line-height:1;}
.price span{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}

form.demo{max-width:34rem;}
form.demo label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:1rem 0 .3rem;
}
form.demo input,form.demo textarea,form.demo select{
  border-radius:var(--r-sm);
  width:100%;border:1px solid var(--rule-2);background:var(--plate);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;padding:.65rem .8rem;
}
form.demo button{margin-top:1.4rem;}

/* ---------- footer ---------- */
footer.site{background:var(--field);color:var(--on-field-2);padding:3rem 0 2rem;}
footer.site a{color:var(--on-field);text-decoration:none;}
footer.site a:hover{text-decoration:underline;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem;}
.foot-grid h2{
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-field-2);margin-bottom:.7rem;
}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:.93rem;}
.foot-grid li{margin-bottom:.4rem;}
.foot-sub{max-width:22rem;}
.foot-sub form{
  display:flex;margin-top:.6rem;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-sm);overflow:hidden;
}
.foot-sub input{
  flex:1;min-width:0;border:none;background:transparent;color:var(--on-field);
  font-family:var(--f-body);padding:.6rem .75rem;font-size:.92rem;
}
.foot-sub input::placeholder{color:var(--on-field-2);}
.foot-sub button{
  border:none;background:var(--wheat);color:var(--on-wheat);font-weight:700;
  padding:.6rem 1rem;cursor:pointer;font-family:var(--f-body);font-size:.88rem;
}
.foot-legal{
  border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.25rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
}

/* ---------- prototype flag ---------- */
/* These are <p> elements that must escape the global reading measure. */
.proto-flag{
  background:var(--wheat);color:var(--on-wheat);font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:.5rem 1rem;font-weight:600;
  margin:0;max-width:none;
}
.proto-flag a{color:var(--on-wheat);}

@media (max-width:820px){
  .member-body{grid-template-columns:1fr;gap:1.75rem;}
}
@media (max-width:640px){
  /* The utility row goes before it would stop being one row. nowrap keeps
     "Town of Luseland" whole, and below about 640px that squeezes the
     Chamber name onto four or five lines -- 114px of masthead instead of
     71px. Both links are in the footer, so nothing is lost by dropping
     them here; this only moves a cut-off the design already had at 560. */
  .mast-util{display:none;}
}

@media (max-width:560px){
  body{font-size:16px;}
  nav.primary ul{gap:0 1.1rem;}
  nav.primary a{font-size:.86rem;padding:.7rem 0;}
  .event-row{grid-template-columns:1fr;gap:.35rem;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ================================================================
   PHOTOGRAPHY
   Added 2026-08. Every photograph on the prototype came off the live
   ldchamber.com; see assets/img/CREDITS.md for source and attribution.
   ================================================================ */

figure{margin:0;}

/* --- frames --- */
.media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r);background:var(--plate-2);
}
.media img{width:100%;height:100%;object-fit:cover;display:block;}
.media-21x9{aspect-ratio:21/9;}
.media-16x9{aspect-ratio:16/9;}
.media-4x3 {aspect-ratio:4/3;}
.media-3x2 {aspect-ratio:3/2;}
.media-1x1 {aspect-ratio:1/1;}
.media-3x4 {aspect-ratio:3/4;}

.figure .media{box-shadow:var(--shadow);}
.figure figcaption{
  font-family:var(--f-mono);font-size:.68rem;line-height:1.5;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.7rem;max-width:44ch;
}
.band-field .figure figcaption{color:var(--on-field-2);}

/* --- hero laid over a photograph --- */
.hero-photo{position:relative;isolation:isolate;background:var(--field);}
.hero-photo > .hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,var(--scrim-1) 0 46%,var(--scrim-2) 100%);
}
.hero-photo .shell{position:relative;z-index:1;}
.hero-credit{
  position:absolute;right:0;bottom:0;z-index:2;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-field-2);background:var(--scrim-1);padding:.35rem .7rem;margin:0;
  max-width:none;border-top-left-radius:var(--r-sm);
}

/* --- three-up photo strip --- */
/* Two rows, and the second one is the caption band. Every figure spans both
   and takes them as a subgrid, so the three caption bars share one row and
   that row is as tall as the tallest caption needs -- at any width, with no
   number to keep in sync. The bars were pinned to the bottom before, which
   lined up their bottoms but not their tops: the caption carrying the
   photographer credit wraps, so its bar began half a line higher than the
   other two and the line where bar meets photograph read as a mistake.

   A fixed two-line height was the first attempt and it was a guess: at a
   760px viewport the long caption wraps to three lines, not two. */
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:1fr auto;
  gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;
}
.strip figure{
  position:relative;background:var(--plate-2);
  grid-row:span 2;display:grid;grid-template-rows:subgrid;
}
/* A spacer, not decoration. aspect-ratio on the figure itself does nothing --
   a grid item spanning rows takes its height from the rows, so the frames
   silently fell back to whatever ratio each source file happened to have:
   4:3 on the home page, 1.48:1 on invest. This empty item spans the same two
   rows with a definite 4:3 height, which is what sizes them. The frame is
   then 4:3 whatever shape the photograph arrives in. */
.strip figure::before{
  content:"";grid-area:1 / 1 / 3 / 2;
  width:100%;aspect-ratio:4/3;align-self:start;pointer-events:none;
}
/* The photograph spans both rows, so the band sits over it rather than under
   it. Without subgrid the declaration is dropped, each figure keeps its own
   rows, and the strip falls back to what it looked like before -- captions at
   their natural heights, nothing broken. */
.strip img{grid-area:1 / 1 / 3 / 2;width:100%;height:100%;object-fit:cover;display:block;}
/* The caption bar is opaque enough to hold AA over a blown-out sky (worst case 6.3:1);
   the fade above it is decorative and carries no text. */
.strip figure::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6.5rem;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,30,25,0) 0%,rgba(20,30,25,.55) 100%);
}
.strip figcaption{
  grid-area:2 / 1 / 3 / 2;position:relative;z-index:1;
  padding:.6rem .9rem .65rem;
  font-family:var(--f-mono);font-size:.66rem;line-height:1.5;letter-spacing:.11em;
  text-transform:uppercase;color:#F2F5EF;
  background:linear-gradient(180deg,rgba(20,30,25,.74) 0%,rgba(20,30,25,.9) 100%);
}

/* --- photograph beside prose --- */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.split--wide-media{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.split--tall-media{grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start;}

/* --- person --- */
.portrait{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.4rem;}
.portrait img{
  width:5rem;height:5rem;flex:none;border-radius:50%;object-fit:cover;object-position:50% 22%;
  box-shadow:var(--shadow);
}
.portrait .who{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.25;}
.portrait .role{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.2rem;
}
.band-field .portrait .role{color:var(--on-field-2);}

/* --- crest in the masthead and footer --- */
.brand{align-items:center;}
.brand .crest{height:2.45rem;width:auto;flex:none;}
/* The crest keeps its white oval, so its lettering reads on any ground. In
   the footer there is no name beside it, so the crest has to carry that
   lettering itself: below about 150px wide its type falls under 9px and
   stops reading. */
.foot-crest{width:10rem;height:auto;margin-bottom:1.25rem;}

/* --- quiet alternating band --- */
.band-linen{background:var(--plate-2);}
.band-linen + .band{border-top-color:var(--rule);}

/* --- motion: a card should feel like it lifts, not like it jumps --- */
a.card,.cat-tile,.btn,.media img{transition:background-color .18s ease,transform .3s ease,filter .18s ease;}
a.card:hover .go{text-decoration:underline;}
.figure:hover .media img,a:hover > .media img{transform:scale(1.02);}

@media (max-width:820px){
  .split--wide-media,.split--tall-media{grid-template-columns:1fr;}
  /* Narrow: prose fills the full width, so the scrim has to as well. */
  .hero-photo::after{background:var(--scrim-1);}
  .split--tall-media{align-items:center;}
  /* Stacked, a 3:4 frame at full width swallows the screen. */
  .split--tall-media > .figure,.split--wide-media > .figure{max-width:22rem;}
}
@media (max-width:560px){
  /* Stacked, the subgrid has to go. Three figures spanning two rows each need
     six rows, but only two are declared, so rows 3-6 were implicit and sized
     differently from the 1fr -- the middle photograph came out 36px shorter
     than the other two. Each figure keeps its own two rows instead, which
     still puts the band over the photograph. Nothing is lost: in one column
     there is no row to line the captions up against. */
  .strip{grid-template-columns:1fr;grid-template-rows:none;}
  .strip figure{grid-row:auto;grid-template-rows:1fr auto;}
  .strip figcaption{font-size:.62rem;}
  .brand .crest{height:2.1rem;}
  .portrait img{width:4.2rem;height:4.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .figure:hover .media img,a:hover > .media img{transform:none;}
}

/* ================================================================
   SERVICE LISTINGS
   Added 2026-08 for /moving and /business-support. Pattern borrowed from
   forsythmtchamber.com: a category, then the actual provider — who they are,
   where they are, and the number you dial. Never a description of a service
   without the means to reach it.
   ================================================================ */

.svc{list-style:none;margin:0;padding:0;max-width:none;}
.svc > li + li{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--rule);}
.band-field .svc > li + li{border-top-color:rgba(255,255,255,.16);}
.svc em{
  display:block;font-style:normal;font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem;
}
.band-field .svc em{color:var(--on-field-2);}
.svc b{display:block;font-weight:700;font-size:.97rem;line-height:1.3;}
.svc span{display:block;font-size:.9rem;color:var(--ink-2);}
.band-field .svc span{color:var(--on-field-2);}
.svc .num{font-family:var(--f-mono);font-size:.88rem;letter-spacing:.01em;}
.svc .note{font-size:.86rem;color:var(--ink-3);}

/* A card that holds a service list rather than a paragraph. */
.card-svc{padding:1.15rem 1.25rem 1.35rem;}
.card-svc > .cat{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.2rem;
}
.card-svc > h3{font-size:1.05rem;margin-bottom:.85rem;}

/* Tiles that lead somewhere, used for the section hubs. */
.hub{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));}
.hub > *{background:var(--plate);}
.hub a.card:hover{background:var(--plate-2);}

/* ======================================================================
   THE 2026 SURFACE
   Everything below reshapes the existing components to the new direction.
   Class names are unchanged on purpose: all fifty pages inherit this
   without being touched.
   ====================================================================== */

/* ---------- bands become inset plates ----------
   The strongest move in the reference is that no section touches the page
   edge. Each one is a rounded plate floating on the field, so the page reads
   as a stack of objects rather than a scroll of stripes. */
.band{
  padding:clamp(2.75rem,5.5vw,4.5rem) 0;
  position:relative;
}
.band + .band{border-top:none;}

.band-linen{
  background:none;
  padding:0;
  margin:clamp(1rem,2.5vw,2rem) auto;
  max-width:calc(var(--shell) + 4rem);
}
.band-linen > .shell{
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:clamp(2.25rem,5vw,4rem) clamp(1.25rem,4vw,3.25rem);
  max-width:none;
}

.band-field{
  background:none;
  padding:0;
  margin:clamp(1rem,2.5vw,2rem) auto;
  max-width:calc(var(--shell) + 4rem);
  color:var(--on-field);
}
.band-field > .shell{
  background:var(--field);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:clamp(2.25rem,5vw,4rem) clamp(1.25rem,4vw,3.25rem);
  max-width:none;
  position:relative;
  overflow:hidden;
}
/* The gold shape that bleeds off the edge in the reference. Decorative only:
   it sits behind the content and never carries meaning on its own. */
.band-field > .shell::before{
  content:"";position:absolute;z-index:0;
  left:-14%;top:-30%;width:34%;aspect-ratio:1;
  background:var(--wheat);opacity:.12;
  border-radius:var(--r-pill);
  pointer-events:none;
}
.band-field > .shell > *{position:relative;z-index:1;}

/* ---------- controls become pills ---------- */
.btn{
  border-radius:var(--r-pill);
  padding:.72rem 1.5rem;
  font-weight:600;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{background:var(--wheat);color:var(--on-wheat);border-color:transparent;}
.btn-primary:hover{background:var(--wheat-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(232,193,105,.26);}
.btn-ghost{border-color:var(--rule-2);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn-on-field:hover{transform:translateY(-2px);}
.btn-join{border-radius:var(--r-pill);}

input,select{border-radius:var(--r-pill);}
textarea{border-radius:var(--r);}

/* ---------- plats: rounded, and they lift ---------- */
.plat{
  border-radius:var(--r);
  overflow:hidden;
  background:var(--rule);
}
.plat > *{background:var(--plate);outline:none;}
a.card{transition:background-color .3s var(--ease);}
a.card:hover{background:var(--plate-2);}
a.card .go{transition:color .25s var(--ease);}
a.card:hover .go{color:var(--accent-ink);}

/* ---------- the hero becomes an inset plate ----------
   Rounded, held away from the page edge, photograph bleeding to its own
   corners. The most recognisable thing in the reference. */
/* The hero is itself the plate: the photograph and the credit line are its
   siblings of .shell, so the rounded, clipped box has to be the section. */
.hero{
  margin:clamp(.5rem,1.5vw,1.25rem) auto clamp(1rem,2.5vw,2rem);
  max-width:calc(var(--shell) + 4rem);
  padding:0;
  background:var(--field);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero > .shell{
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,4vw,3.25rem);
  max-width:none;
  position:relative;
  z-index:1;
}
/* The photo layering itself is unchanged from the block further up: image at
   z-index -2, scrim at -1, content above, all contained by the isolation on
   .hero. Only the shape is new. */
.hero h1{max-width:18ch;}

/* One word in gold. The reference does exactly this and nothing more. */
.hl{color:var(--wheat);}

/* ---------- type gets louder ----------
   Section titles in the reference are heavy, tight and upper case. Public Sans
   at 800 did that. Superseded by the high-key surface below, which sets
   headings in Playfair Display and drops the slab and the mono entirely. */
h1,h2{letter-spacing:-.015em;}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.08;}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.14;}
.sec-title{margin-bottom:1.75rem;}
.sec-title h2{
  font-family:var(--f-body);font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(1.5rem,3.2vw,2.15rem);
}

/* ---------- the numbered index ----------
   The catalogue pattern: a numbered list on one side, a large image on the
   other that changes with the row being pointed at. Here it carries the
   directory by category. With JavaScript off it is an ordinary list of links
   to the filtered directory, which is the whole reason it is built this way. */
.index{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3vw,3rem);align-items:start;}
.index-list{list-style:none;margin:0;padding:0;}
.index-row{border-top:1px solid var(--rule);}
.index-row:last-child{border-bottom:1px solid var(--rule);}
.index-row a{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem .35rem;text-decoration:none;color:var(--ink);
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.index-row a:hover,.index-row a:focus-visible,.index-row.is-on a{
  color:var(--accent-ink);padding-left:.9rem;
}
.index-num{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--ink-3);min-width:1.9rem;transition:color .25s var(--ease);
}
.index-row a:hover .index-num,.index-row.is-on a .index-num{color:var(--accent-ink);}
.index-name{
  font-family:var(--f-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:.95rem;flex:1;
}
.index-count{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);}
.index-arrow{
  color:var(--accent-ink);opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.index-row a:hover .index-arrow,.index-row.is-on a .index-arrow{opacity:1;transform:none;}

.index-stage{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/4;background:var(--plate-2);
}
.index-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s var(--ease);
}
.index-stage img.is-on{opacity:1;}

/* ---------- circular icon badge ---------- */
.icon-badge{
  width:2.6rem;height:2.6rem;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--wheat-soft);color:var(--wheat);
  font-family:var(--f-mono);font-size:.85rem;font-weight:600;
  margin-bottom:.9rem;
  border:1px solid var(--wheat);
}

/* ---------- media ---------- */
.media,.figure .media,.illus{border-radius:var(--r);}
.figure .media img{transition:transform .9s var(--ease-out);}
.figure:hover .media img{transform:scale(1.035);}

/* ---------- masthead and footer ---------- */
/* The masthead keeps the dark field in both themes. Making it transparent
   looked right on the dark page and put near-white nav text on linen in
   the light one -- 1:1 contrast, i.e. invisible. */
.masthead{background:var(--field);color:var(--on-field);}
.masthead a{color:var(--on-field);}
.primary{border-bottom:1px solid var(--rule);}
footer.site{background:var(--field-2);border-top:1px solid var(--rule);}

/* The theme toggle. Light is available to anyone who needs it; it is just not
   what the site looks like by default. */
.theme-toggle{
  background:transparent;border:1px solid var(--rule-2);
  color:inherit;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem .7rem;cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.theme-toggle:hover{border-color:var(--wheat);color:var(--wheat);}

/* ======================================================================
   MOTION
   Nothing here moves on its own except the marquee. Everything else is a
   response: to arriving on screen, or to a pointer. A site that animates at
   you is a site people stop reading.

   The whole block is switched off for anyone whose system asks for less
   motion -- see the media query at the end.
   ====================================================================== */

/* Sections arrive as they are reached. The start state is applied only once
   the script confirms it is running, so with JavaScript off nothing hides. */
.js-motion [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js-motion [data-reveal].is-in{opacity:1;transform:none;}
.js-motion [data-reveal][data-reveal-delay="1"]{transition-delay:.08s;}
.js-motion [data-reveal][data-reveal-delay="2"]{transition-delay:.16s;}
.js-motion [data-reveal][data-reveal-delay="3"]{transition-delay:.24s;}
.js-motion [data-reveal][data-reveal-delay="4"]{transition-delay:.32s;}

.hero-photo .hero-img{will-change:transform;}

/* A running line of member names. The only thing on the site that moves
   without being asked, which is why it is slow, quiet, and stops on hover. */
.marquee{
  overflow:hidden;position:relative;
  border-block:1px solid var(--rule);
  padding:.9rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;gap:2.5rem;width:max-content;
  animation:marquee 72s linear infinite;
}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused;}
.marquee span{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.marquee span::after{content:"\00b7";margin-left:2.5rem;color:var(--accent-ink);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Counters tick up once, when they arrive. */
.tally{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);}
.tally-num{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;
  color:var(--wheat);font-variant-numeric:tabular-nums;
}
.tally-lab{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.45rem;
}
/* .band-field p (0-1-1) outranks .tally-num (0-1-0), so inside a field band the
   figures came out body-grey instead of gold. The same specificity trap that
   bleached the primary buttons earlier in this system. */
.band-field .tally-num{color:var(--wheat);}
.band-field .tally-lab{color:var(--on-field-2);}

@media (max-width:52rem){
  .index{grid-template-columns:1fr;}
  .index-stage{aspect-ratio:16/10;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js-motion [data-reveal]{opacity:1;transform:none;}
  .marquee-track{animation:none;}
}

/* A stage panel for a trade the Chamber has no photograph of yet. It is a
   designed absence, not a placeholder: it carries the name and the count, and
   it stops a streetscape from being borrowed to stand in for a trade it has
   nothing to do with. */
.index-stage > *{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .55s var(--ease);
}
.index-stage > *.is-on{opacity:1;}
.index-plate{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.25rem,3vw,2rem);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(232,193,105,.16), transparent 60%),
    var(--plate-2);
  border:1px solid var(--rule);
}
.index-plate span{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.06;color:var(--ink);
}
.index-plate em{
  font-family:var(--f-mono);font-style:normal;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-top:.6rem;
}

/* ======================================================================
   THE HIGH-KEY SURFACE
   Replaces the plate-and-gold surface from 89c465f. Class names are
   unchanged, so all fifty pages take this without being edited.

   Where this departs from the reference, and why: the reference is a travel
   landing page with six things on it, and it can afford to give each one a
   screen. This site has a 35-business directory, a grants page and an events
   archive, and they are tools. The air, the serif, the tracking and the
   feathered photographs are applied everywhere; the spacing is not. A
   directory stretched to travel-brochure rhythm is a directory nobody
   scrolls to the end of.
   ====================================================================== */

/* ---------- type ----------------------------------------------------
   A high-contrast serif in Title Case for anything that is a heading, and
   small, light, widely tracked sans for everything else. The old slab and
   the mono are gone; the mono variable now points at the sans so any rule
   still asking for it gets the tracked treatment rather than a fallback. */

body{font-weight:400;line-height:1.72;letter-spacing:.005em;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.18;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem);}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);}
h3{font-size:1.2rem;font-weight:600;}

.lede{
  font-size:clamp(1.02rem,1.5vw,1.14rem);
  font-weight:300;color:var(--ink-2);max-width:54ch;line-height:1.8;
}
p{font-weight:400;}

/* The reference sets every small label as widely tracked uppercase sans.
   That replaces the mono land-description labels wholesale. */
.label,.cat,.index-num,.index-count,.tally-lab,.hero-credit,.illus-cap,
.theme-toggle,.readout,.btn,.btn-join,.role,.note,.foot-grid h2{
  font-family:var(--f-body);
}
.label{
  font-size:.68rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1rem;
}
.sec-title{margin-bottom:2rem;}
.sec-title h2{
  font-family:var(--f-display);font-weight:500;
  text-transform:none;letter-spacing:-.005em;
  font-size:clamp(1.65rem,3.2vw,2.5rem);
}

/* A centred opener, the way the reference introduces every section. Opt-in
   per block: it suits a statement, never a list. */
.centred{text-align:center;}
.centred p,.centred .lede{margin-inline:auto;}
.centred .label{display:block;}

/* ---------- bands: air, not plates ----------
   The rounded floating plates were right for the last direction and are
   wrong for this one. Sections are now separated by space and the occasional
   hairline, nothing else. */
.band{
  padding:clamp(3.5rem,8vw,7rem) 0;
  background:none;margin:0 auto;max-width:none;
}
.band + .band{border-top:none;}
.band-linen{
  background:var(--plate-2);
  padding:clamp(3.5rem,8vw,7rem) 0;margin:0;max-width:none;
}
.band-linen > .shell{
  background:none;border:0;border-radius:0;padding:0 clamp(1rem,4vw,2.5rem);
  max-width:var(--shell);
}
.band-field{
  background:var(--field);color:var(--on-field);
  padding:clamp(3.5rem,8vw,7rem) 0;margin:0;max-width:none;
}
.band-field > .shell{
  background:none;border:0;border-radius:0;padding:0 clamp(1rem,4vw,2.5rem);
  max-width:var(--shell);overflow:visible;
}
.band-field > .shell::before{content:none;}   /* the gold blob belonged to the old direction */

/* ---------- controls: outline pills ---------- */
.btn{
  border-radius:var(--r-pill);
  padding:.82rem 2rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--rule-2);background:none;color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease),
             background-color .3s var(--ease);
}
.btn-primary{background:none;color:var(--ink);border-color:var(--ink);}
.btn-primary:hover{background:var(--ink);color:var(--paper);transform:none;box-shadow:none;}
.btn-ghost{border-color:var(--rule-2);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);transform:none;}
.btn-on-field{border-color:rgba(255,255,255,.4);color:var(--on-field);}
.btn-on-field:hover{background:var(--on-field);color:var(--field);transform:none;}
.band-field a.btn-primary{border-color:var(--on-field);color:var(--on-field);background:none;}
.band-field a.btn-primary:hover{background:var(--on-field);color:var(--field);}
.btn-join{
  border-radius:var(--r-pill);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}

input,select{
  border-radius:var(--r-pill);
  border:1px solid var(--rule-2);
  font-weight:300;
}
textarea{border-radius:var(--r);}

/* ---------- photographs that fade into the page ----------
   Nothing in the reference sits in a hard rectangle. Images are desaturated
   towards the page and their edges are feathered, so a photograph ends by
   dissolving rather than by stopping. */
.figure .media,.media{
  border-radius:var(--r);
  overflow:hidden;
}
.figure .media img,.illus{
  filter:saturate(.72) contrast(1.02);
  transition:filter .7s var(--ease), transform 1.1s var(--ease-out);
}
.figure:hover .media img{filter:saturate(.92);transform:scale(1.03);}
.figure figcaption{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.9rem;font-weight:500;
}

/* The soft vignette the reference uses on its inline photographs. Applied to
   the tall and wide feature images only -- on a small card it just looks like
   a rendering fault. */
.split--wide-media .figure .media,
.split--tall-media .figure .media{
  -webkit-mask-image:radial-gradient(118% 118% at 50% 50%,#000 58%,transparent 99%);
          mask-image:radial-gradient(118% 118% at 50% 50%,#000 58%,transparent 99%);
  border-radius:0;
}

/* ---------- the hero ----------
   Full-bleed desaturated photograph, very light scrim, and the headline set
   enormous, thin and widely tracked across it. */
.hero{
  margin:0;max-width:none;padding:0;
  background:var(--field);
  border-radius:0;position:relative;overflow:hidden;isolation:isolate;
}
.hero > .shell{
  padding:clamp(5rem,13vw,10rem) clamp(1rem,4vw,2.5rem) clamp(6rem,14vw,11rem);
  max-width:var(--shell);position:relative;z-index:1;
}
.hero-photo > .hero-img{filter:saturate(.92) contrast(1.04) brightness(.9);}
.hero-photo::after{
  background:
    linear-gradient(180deg,var(--scrim-1) 0%,var(--scrim-2) 32%,var(--scrim-1) 92%),
    linear-gradient(90deg,var(--scrim-1) 0%,transparent 62%);
}
.hero h1{
  font-family:var(--f-body);
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:clamp(2.1rem,7.4vw,5.6rem);
  line-height:1.02;
  max-width:none;
  color:var(--on-field);
}
.hero p{font-weight:300;max-width:46ch;}
.hero .label{color:var(--on-field-2);letter-spacing:.3em;}
.hero-credit{font-size:.58rem;letter-spacing:.22em;}

/* The hero photograph used to end in a torn white wave -- a mask on the
   section, no extra markup. It is gone, and the photograph now ends on a
   straight edge. Two of the four surfaces had already switched it off, which
   was the tell: it was a flourish the rest of the page never answered, and
   at the width of a laptop the band read as a deckle-edged sticker rather
   than as part of the design. The previous shape is in git history. */
.hl{color:inherit;font-style:italic;font-family:var(--f-display);text-transform:none;letter-spacing:0;}

/* ---------- cards: hairlines, no fills ---------- */
.plat{
  border-radius:0;overflow:visible;background:none;border:0;
  gap:0;
}
.plat > *{
  background:none;outline:none;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.plat{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.card{padding:1.6rem 1.5rem 1.8rem;}
.card h3{font-family:var(--f-display);font-weight:600;}
.card .cat{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.card .desc{font-weight:400;color:var(--ink-2);}
.card .go{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink);
}
a.card{transition:background-color .35s var(--ease);}
a.card:hover{background:var(--plate);}
a.card:hover .go{color:var(--accent-ink);}

.cat-tile{padding:1.5rem 1.4rem 1.7rem;}
.cat-tile strong{font-family:var(--f-display);font-weight:600;}
.cat-tile span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- the numbered index ---------- */
.index-name{
  font-family:var(--f-display);font-weight:600;
  text-transform:none;letter-spacing:0;font-size:1.1rem;
}
.index-num,.index-count{
  font-size:.66rem;letter-spacing:.2em;font-weight:600;
}
.index-stage{border-radius:var(--r);}
.index-stage img{filter:saturate(.72);}
.index-plate{
  background:var(--plate-2);
  border:1px solid var(--rule);
}
.index-plate span{font-family:var(--f-display);font-weight:500;color:var(--ink);}
.index-plate em{font-size:.62rem;letter-spacing:.22em;color:var(--accent-ink);font-weight:600;}

/* ---------- masthead and footer ---------- */
.masthead{background:none;color:var(--ink);border-bottom:0;}
.masthead a{color:var(--ink);}
.mast-util a,.theme-toggle{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.theme-toggle{border-color:var(--rule-2);color:var(--ink-2);}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink);}
.brand strong{font-family:var(--f-display);font-weight:600;letter-spacing:0;}
.brand span{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;}
.primary{background:none;border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);}
.primary a{
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--ink-2);
}
.primary a:hover,.primary a[aria-current="page"]{color:var(--ink);}

footer.site{background:var(--field);color:var(--on-field-2);border-top:0;}
.foot-grid h2{
  font-family:var(--f-body);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:var(--on-field);
}

/* ---------- tally ---------- */
.tally-num{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4rem);color:var(--ink);
}
.band-field .tally-num{color:var(--on-field);}
.tally-lab{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.band-field .tally-lab{color:var(--on-field-2);}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--rule);padding:1.1rem 0;}
.marquee span{
  font-family:var(--f-body);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.marquee span::after{color:var(--accent-ink);}

/* ---------- icon badge ---------- */
.icon-badge{
  background:none;border:1px solid var(--rule-2);color:var(--ink-2);
  width:2.9rem;height:2.9rem;font-family:var(--f-display);font-size:.95rem;
}

/* ---------- notices and lists ---------- */
.notice{
  background:var(--plate);border:1px solid var(--rule);
  border-radius:var(--r);
}
.band-field .notice{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);}
.plain li,.svc > li{border-color:var(--rule);}

@media (max-width:52rem){
  .hero h1{letter-spacing:.04em;}
  .split--wide-media .figure .media,
  .split--tall-media .figure .media{-webkit-mask-image:none;mask-image:none;}
}

/* Uppercase plus wide tracking made the seven nav items long enough to push
   "Join the Chamber" onto a second row at 1024 and 1280. Tighter gap, smaller
   join button, and the row holds down to the point where the nav stacks
   deliberately anyway. */
nav.primary ul{gap:0 clamp(.9rem,1.9vw,1.5rem);}
nav.primary a.btn-join{
  padding:.52rem 1.15rem;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;
}
nav.primary a{border-bottom-width:2px;}
nav.primary a:hover,nav.primary a[aria-current="page"]{border-bottom-color:var(--accent-ink);}

/* The brand lock-up used to sit on the dark masthead and took --on-field-2.
   On the near-white page that is 1.6:1. */
.brand span{color:var(--ink-3);}
.brand strong{color:var(--ink);}
[data-theme="dark"] .brand span{color:var(--on-field-2);}
[data-theme="dark"] .brand strong{color:var(--on-field);}
.mast-util a{color:var(--ink-2);}
.mast-util a:hover{color:var(--ink);}
[data-theme="dark"] .mast-util a{color:var(--on-field-2);}
[data-theme="dark"] .mast-util a:hover{color:var(--on-field);}

/* The newsletter Subscribe is a <button>, so .band-field a.btn-primary never
   reached it and it inherited dark ink on the dark field: 1:1. */
.band-field .btn-primary{
  border-color:var(--on-field);color:var(--on-field);background:none;
}
.band-field .btn-primary:hover{background:var(--on-field);color:var(--field);}

/* When the nav wraps, the flex spacer collapses and the Join button lands on
   the left of its own row, which reads as a mistake. Pinning it right keeps
   the wrapped row looking intended. */
nav.primary li:last-child{margin-left:auto;}

/* Five donor labels on one row. Explicit columns rather than auto-fit, because
   auto-fit would fit seven of them at this width and split the five across two
   rows again at the next breakpoint down. */
.plat-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:60rem){.plat-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:36rem){.plat-5{grid-template-columns:repeat(2,1fr);}}

/* The two puzzle-piece coupons. Narrower than the full measure, because at
   full width they shouted louder than the donor labels above them and louder
   than the story they illustrate. The floor is set by the QR code on the EV
   coupon, which is about a third of the image width: below roughly 300px of
   rendered coupon it stops being scannable, and a QR that will not scan is
   worse than no QR. At this width it lands near 130px. */
.plat-coupons{grid-template-columns:repeat(2,1fr);max-width:46rem;}
@media (max-width:40rem){.plat-coupons{grid-template-columns:1fr;max-width:22rem;}}

/* A caption can carry a tracked uppercase label or a sentence, not both in the
   same voice -- four lines of tracked caps is a wall nobody reads. The label
   keeps the treatment; the fact beneath it goes back to sentence case. */
.cap-note{
  display:block;margin-top:.45rem;
  font-size:.82rem;letter-spacing:0;text-transform:none;
  font-weight:400;color:var(--ink-2);line-height:1.55;
}

/* Story beside its illustration: the text leads on the left, Mr. Fox and Oddi
   sit to the right at about 60% of the width the artwork used to take. Top
   aligned, so the picture starts level with the heading rather than floating
   in the middle of four paragraphs. */
.split--story{
  grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  align-items:start;
}
.illus-fig{margin:0;}
.illus-fig .illus{max-width:100%;}
.illus-fig .illus-cap{max-width:100%;margin-top:.8rem;}
@media (max-width:52rem){
  .split--story{grid-template-columns:1fr;}
  .illus-fig{max-width:27rem;margin-inline:auto;}
}

/* ======================================================================
   SURFACE: SLATE
   The third direction — cool dark slate, one electric green, bold grotesque
   headings, and the giant gradient numerals the reference builds its project
   list from.

   Switched on with ?theme=slate (remembered), so directions can be compared
   on the real site instead of rebuilt one after another. Everything here is
   scoped to [data-surface="slate"] and overrides the light serif default
   without touching it.

   On the green. The reference uses a pure neon that belongs to a design
   agency in a city. Pulled here toward new growth — spring wheat coming up —
   so it still reads electric against the slate but is a colour this district
   actually contains. It is also the only saturated thing on the page.
   ====================================================================== */

:root[data-surface="slate"]{
  --paper:#111A22;      /* cool slate, a touch blue */
  --plate:#18242E;
  --plate-2:#1F2E39;
  --ink:#EEF3F5;
  --ink-2:#A9BAC4;      /* 8.0:1 on paper */
  --ink-3:#8498A4;      /* 5.5:1 on paper */
  --rule:#27353F;
  --rule-2:#3A4C58;

  --field:#0C1319;
  --field-2:#080D12;
  --on-field:#EEF3F5;
  --on-field-2:#A9BAC4;

  --wheat:#4ADE5E;      /* new growth green — the one saturated colour */
  --wheat-2:#6BE87B;
  --wheat-soft:#12291A;
  --on-wheat:#06130A;
  --accent-ink:#4ADE5E; /* on this ground the accent reads as text too: 9.6:1 */

  --link:#4ADE5E;
  --focus:#6BE87B;

  --scrim-1:rgba(8,14,19,.80);
  --scrim-2:rgba(8,14,19,.38);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.4);
  --shadow-lift:0 2px 6px rgba(0,0,0,.3), 0 30px 70px rgba(0,0,0,.5);

  --r:4px;
  --r-sm:2px;
  --r-lg:6px;
  --r-pill:2px;         /* the reference has no pills: corners are square */
}

/* ---------- type: bold grotesque, Title Case, tight ---------- */
[data-surface="slate"] h1,
[data-surface="slate"] h2,
[data-surface="slate"] h3,
[data-surface="slate"] .sec-title h2,
[data-surface="slate"] .card h3,
[data-surface="slate"] .index-name,
[data-surface="slate"] .cat-tile strong,
[data-surface="slate"] .tally-num,
[data-surface="slate"] .index-plate span,
[data-surface="slate"] .brand strong{
  font-family:var(--f-body);
  font-weight:800;
  letter-spacing:-.022em;
  text-transform:none;
}
[data-surface="slate"] h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;}
[data-surface="slate"] h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;}
[data-surface="slate"] .hero h1{
  font-weight:800;text-transform:none;letter-spacing:-.022em;
  font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.04;max-width:20ch;
}
[data-surface="slate"] body{font-weight:400;line-height:1.68;}
[data-surface="slate"] .lede{font-weight:400;}

/* The green rule under the hero headline — the reference's clearest signature. */
[data-surface="slate"] .hero h1::after{
  content:"";display:block;
  width:min(22rem,60%);height:5px;
  background:var(--wheat);
  margin-top:1.4rem;
}

/* ---------- sections: full-bleed bands, square edges ---------- */
[data-surface="slate"] .band-linen{background:var(--plate);}
[data-surface="slate"] .band-field{background:var(--field);}
[data-surface="slate"] .hero{border-radius:0;}
[data-surface="slate"] .hero-photo > .hero-img{filter:saturate(.85) contrast(1.05) brightness(.8);}

/* ---------- controls: square, bold, green ---------- */
[data-surface="slate"] .btn{
  border-radius:var(--r-sm);
  font-size:.72rem;letter-spacing:.14em;font-weight:700;
  padding:.85rem 1.8rem;
}
[data-surface="slate"] .btn-primary{
  background:var(--wheat);color:var(--on-wheat);border-color:var(--wheat);
}
[data-surface="slate"] .btn-primary:hover{background:var(--wheat-2);border-color:var(--wheat-2);}
[data-surface="slate"] .band-field .btn-primary,
[data-surface="slate"] .band-field a.btn-primary{
  background:var(--wheat);color:var(--on-wheat);border-color:var(--wheat);
}
[data-surface="slate"] .btn-ghost,
[data-surface="slate"] .btn-on-field{border-color:var(--rule-2);color:var(--ink);}
[data-surface="slate"] .btn-ghost:hover,
[data-surface="slate"] .btn-on-field:hover{border-color:var(--wheat);color:var(--wheat);background:none;}
[data-surface="slate"] nav.primary a.btn-join{
  background:var(--wheat);color:var(--on-wheat);border-radius:var(--r-sm);
}
[data-surface="slate"] input,
[data-surface="slate"] select{border-radius:var(--r-sm);}

/* ---------- the numbered index: giant gradient numerals ----------
   The reference sets its project numbers enormous, in a white-to-dark
   gradient that fades into the field. Here they carry the trades. */
[data-surface="slate"] .index-row a{
  align-items:center;gap:1.4rem;padding:.9rem .35rem;
}
[data-surface="slate"] .index-num{
  font-family:var(--f-body);font-weight:800;
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  letter-spacing:-.04em;min-width:2.6em;
  line-height:1;
  background:linear-gradient(180deg,var(--ink) 20%,rgba(238,243,245,.30) 98%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:none;
}
[data-surface="slate"] .index-row a:hover .index-num,
[data-surface="slate"] .index-row.is-on a .index-num{
  background:linear-gradient(180deg,var(--wheat) 20%,rgba(74,222,94,.34) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-surface="slate"] .index-name{font-size:1.05rem;}
[data-surface="slate"] .index-row a:hover,
[data-surface="slate"] .index-row.is-on a{color:var(--wheat);padding-left:.35rem;}
[data-surface="slate"] .index-stage{border-radius:var(--r);}
[data-surface="slate"] .index-stage img{filter:saturate(.62) brightness(.92);}
[data-surface="slate"] .index-plate{
  background:var(--plate-2);border:1px solid var(--rule);
}
[data-surface="slate"] .index-plate em{color:var(--wheat);}

/* ---------- a thin green outline frames the thing being argued ---------- */
[data-surface="slate"] .notice{
  background:none;
  border:1px solid var(--wheat);
  border-radius:var(--r-sm);
}
[data-surface="slate"] .band-field .notice{background:none;border-color:var(--wheat);}

/* ---------- cards ---------- */
[data-surface="slate"] .plat{border-color:var(--rule);}
[data-surface="slate"] .plat > *{border-color:var(--rule);}
[data-surface="slate"] a.card:hover{background:var(--plate-2);}
[data-surface="slate"] .card .cat,
[data-surface="slate"] .label{color:var(--ink-3);letter-spacing:.2em;}
[data-surface="slate"] a.card:hover .go{color:var(--wheat);}

/* ---------- photographs keep their edges here ---------- */
[data-surface="slate"] .figure .media img,
[data-surface="slate"] .illus{filter:saturate(.74) contrast(1.04);}
[data-surface="slate"] .split--wide-media .figure .media,
[data-surface="slate"] .split--tall-media .figure .media{
  -webkit-mask-image:none;mask-image:none;border-radius:var(--r);
}

/* ---------- masthead, footer, misc ---------- */
[data-surface="slate"] .masthead{background:var(--field);color:var(--on-field);}
[data-surface="slate"] .masthead a,
[data-surface="slate"] .brand strong{color:var(--on-field);}
[data-surface="slate"] .brand span,
[data-surface="slate"] .mast-util a{color:var(--on-field-2);}
[data-surface="slate"] .primary{background:var(--field);border-color:var(--rule);}
[data-surface="slate"] .primary a{color:var(--on-field-2);}
[data-surface="slate"] .primary a:hover,
[data-surface="slate"] .primary a[aria-current="page"]{color:var(--wheat);}
[data-surface="slate"] nav.primary a:hover,
[data-surface="slate"] nav.primary a[aria-current="page"]{border-bottom-color:var(--wheat);}
[data-surface="slate"] footer.site{background:var(--field-2);}
[data-surface="slate"] .marquee span::after{color:var(--wheat);}
[data-surface="slate"] .tally-num{color:var(--wheat);}
[data-surface="slate"] .band-field .tally-num{color:var(--wheat);}
[data-surface="slate"] .icon-badge{border-color:var(--wheat);color:var(--wheat);}
[data-surface="slate"] .proto-flag,
[data-surface="slate"] .skip{background:var(--wheat);color:var(--on-wheat);}
[data-surface="slate"] .cap-note{color:var(--ink-2);}
[data-surface="slate"] .hl{
  color:var(--wheat);font-style:normal;font-family:var(--f-body);
}

/* The preview banner as a full green bar made the loudest thing on the page a
   temporary notice. The accent is rationed everywhere else here, so it is
   rationed here too: dark bar, green rule, green text. The skip link keeps
   the solid fill, because a skip link has to be unmissable the moment it
   takes focus. */
[data-surface="slate"] .proto-flag{
  background:var(--field-2);color:var(--wheat);
  border-bottom:2px solid var(--wheat);
}

/* The numerals are set in a gradient that my contrast sweep cannot read:
   background-clip:text means the computed colour is transparent. They fade,
   but only to 30% rather than to nothing, so the bottom of a numeral stays
   visible. They are ordinals and carry no information the trade name beside
   them does not already give, which is why a gradient is acceptable here at
   all -- it would not be on anything load-bearing. */

/* The credit used to be lifted clear of the torn wave by the wave's own
   height, so the two could not drift apart. With the wave gone there is
   nothing to clear, and the lift is replaced by a plain inset: the credit
   lines up with the gutter the hero text uses rather than with the window
   edge, which is why it is not simply tucked into the corner. */
.hero-photo .hero-credit{
  bottom:clamp(.9rem,2.2vw,1.5rem);
  right:clamp(1rem,4vw,2.5rem);
  border-radius:var(--r-sm);
  z-index:3;
}

/* ---------- the masthead lockup ----------
   It is one name. It was being set as two -- "Luseland & District" in one
   face and weight, "CHAMBER OF COMMERCE" tracked out in another -- which
   read as a company and a department rather than as the Chamber. The crest
   beside it already sets the whole name on two lines in Open Sans, so the
   text was also arguing with the logo it sits next to. One name, one face,
   one weight. */
/* .brand span (0-1-1) outranks .brand-name (0-1-0) and was still applying
   the old tracked-uppercase treatment, so the one name came out looking like
   the two-part lockup it replaced. */
.brand .brand-name{
  font-family:var(--f-body);
  font-weight:600;
  font-size:1.06rem;
  letter-spacing:-.005em;
  text-transform:none;
  color:var(--ink);
  line-height:1.25;
}
.masthead .brand .brand-name{color:var(--ink);}
[data-surface="slate"] .brand .brand-name,
[data-theme="dark"] .brand .brand-name{color:var(--on-field);}
@media (max-width:30rem){ .brand-name{font-size:.95rem;} }

/* ======================================================================
   VARIANT: BUTTER
   ?theme=butter — the crest gold #FCD878 swapped for butter yellow #FFF4BD.

   One measurement decides how this has to be built. Butter yellow is 1.04:1
   against the page: as a filled shape on near-white it has no visible edge at
   all, and WCAG asks for 3:1 on the boundary of anything you are meant to
   press. The crest gold is only 1.30 and was already leaning on its darker
   value to be seen.

   So in this variant gold stops being a fill that stands on its own and
   becomes a tint inside a navy outline. Navy on butter is 10.9:1, better than
   on the crest gold, so everything set on it reads beautifully. On the dark
   theme it needs no help: 15.7:1.
   ====================================================================== */

:root[data-surface="butter"]{
  --wheat:#FFF4BD;
  --wheat-2:#FFEFA6;
  --wheat-soft:#FFFBEA;
  --on-wheat:#243654;
}
:root[data-surface="butter"][data-theme="dark"]{
  --wheat:#FFF4BD;
  --wheat-2:#FFFAD9;
  --wheat-soft:#2A2616;
  --accent-ink:#FFF4BD;
  --link:#FFF4BD;
}

/* The outline is what makes the fill legible as an object. Without it the
   Join button is a word floating on a page. */
[data-surface="butter"] nav.primary a.btn-join,
[data-surface="butter"] .btn-primary,
[data-surface="butter"] .searchbar button,
[data-surface="butter"] .foot-sub button{
  border:1px solid var(--ink);
}
[data-surface="butter"] .proto-flag{
  border-bottom:1px solid var(--ink);
}
/* On the dark field the page itself supplies the contrast, so the outline
   would only add noise. */
[data-surface="butter"][data-theme="dark"] nav.primary a.btn-join,
[data-surface="butter"][data-theme="dark"] .btn-primary,
[data-surface="butter"][data-theme="dark"] .proto-flag{
  border-color:transparent;
}

/* The Join button sits on the page, not on a coloured bar, and a gold fill is
   1.3:1 against near-white -- below the 3:1 WCAG asks for on the boundary of
   a control. It has been failing that since the masthead stopped carrying its
   own background. A navy edge takes it to 11.4:1 and costs nothing: the
   button already wanted an edge to sit properly beside the nav. */
nav.primary a.btn-join{border:1px solid var(--ink);}
[data-theme="dark"] nav.primary a.btn-join,
[data-surface="slate"] nav.primary a.btn-join{border-color:transparent;}

/* ======================================================================
   SURFACE: SWISS
   ?theme=swiss — pale concrete grey, a visible hairline grid, headings in a
   light grotesque at size, and photography that breaks out of the text
   column instead of sitting beside it.

   This is the closest of the directions to where the default already is, and
   deliberately so: it keeps Open Sans and the crest navy and changes the
   things the reference actually changes. The ground goes from near-white to a
   cool grey, so white panels and photographs lift off it. Headings lose their
   weight and gain size. And the grid stops being implied and starts being
   drawn -- thin rules that run past the content they head, which is the move
   that makes the reference look designed rather than merely clean.

   Gold and green stay where they were. The reference spends its one accent
   on a thin outlined label and nothing else, and that restraint is the point.
   ====================================================================== */

:root[data-surface="swiss"]{
  --paper:#E7EAEA;      /* concrete, not white — panels and photos lift off it */
  --plate:#F4F6F6;
  --plate-2:#DCE0E1;
  --ink:#1D2630;
  --ink-2:#4A565F;      /* 7.2:1 on the grey */
  --ink-3:#515C64;      /* small labels. 5.2:1 on the page ground was not the
                           number that mattered: labels also sit on --plate-2,
                           the tinted band, where #5E6A73 measured 4.15 and
                           failed. This is 5.0:1 on the darker of the two. */
  --rule:#C3C9CB;       /* the hairline is meant to be seen here */
  --rule-2:#A7AFB2;

  --field:#1D2630;
  --field-2:#141B23;
  --on-field:#EDF0F1;
  --on-field-2:#B4BEC4;

  --wheat:#FCD878;
  --wheat-2:#F6C94E;
  --wheat-soft:#F2EFE3;
  --on-wheat:#1D2630;
  --accent-ink:#8A2B2B;   /* the reference's one accent is a deep red outline */
  --leaf:#60A854;
  --leaf-soft:#E2EAE2;

  --link:#1D2630;
  --focus:#8A2B2B;

  --r:0px;              /* nothing is rounded in this one */
  --r-sm:0px;
  --r-lg:0px;
  --r-pill:0px;
}

/* ---------- type: light, large, sentence case ---------- */
[data-surface="swiss"] h1,
[data-surface="swiss"] h2,
[data-surface="swiss"] .sec-title h2{
  font-weight:300;
  letter-spacing:-.012em;
  text-transform:none;
}
[data-surface="swiss"] h2,
[data-surface="swiss"] .sec-title h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;}
[data-surface="swiss"] h3,
[data-surface="swiss"] .card h3,
[data-surface="swiss"] .index-name{font-weight:400;letter-spacing:-.005em;}
[data-surface="swiss"] .lede{font-weight:300;}
[data-surface="swiss"] .label{letter-spacing:.24em;font-weight:600;font-size:.64rem;}

/* The hero keeps its weight — the reference does the same, one heavy
   uppercase statement and light everywhere after it. */
[data-surface="swiss"] .hero h1{
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2rem,5.6vw,4.2rem);line-height:1.02;
}

/* ---------- the grid, drawn ----------
   A rule above each section title that runs out past the text it heads. This
   is the single device that separates the reference from an ordinary clean
   layout, and it costs one pseudo-element. */
[data-surface="swiss"] .sec-title{position:relative;padding-top:2.1rem;}
[data-surface="swiss"] .sec-title::before{
  content:"";position:absolute;top:0;left:-2.5rem;
  width:min(26rem,52%);height:1px;background:var(--ink);
}
[data-surface="swiss"] .band-field .sec-title::before{background:var(--on-field-2);}

/* ---------- controls: square, ruled, no fill ---------- */
[data-surface="swiss"] .btn{
  border-radius:0;border:1px solid var(--ink);
  font-size:.68rem;letter-spacing:.18em;font-weight:600;padding:.8rem 1.7rem;
}
[data-surface="swiss"] .btn-primary{background:none;color:var(--ink);}
[data-surface="swiss"] .btn-primary:hover{background:var(--ink);color:var(--paper);}
[data-surface="swiss"] nav.primary a.btn-join{
  background:none;color:var(--ink);border:1px solid var(--ink);border-radius:0;
}
[data-surface="swiss"] nav.primary a.btn-join:hover{background:var(--ink);color:var(--paper);}
[data-surface="swiss"] input,
[data-surface="swiss"] select{border-radius:0;}
[data-surface="swiss"] .proto-flag{
  background:none;color:var(--ink);border-bottom:1px solid var(--ink);
}

/* "Read more" — a word with a rule under it, set apart from the paragraph. */
[data-surface="swiss"] .card .go,
[data-surface="swiss"] .index-row a{letter-spacing:.14em;}
[data-surface="swiss"] .card .go{
  border-bottom:1px solid var(--rule-2);padding-bottom:.3rem;align-self:flex-start;
}
[data-surface="swiss"] a.card:hover .go{border-bottom-color:var(--ink);color:var(--ink);}

/* ---------- photography breaks the column ----------
   In the reference the picture runs past the text block rather than lining up
   with it. Widened and pulled out of the gutter, with the overlap only where
   there is room for it. */
[data-surface="swiss"] .figure .media,
[data-surface="swiss"] .media,
[data-surface="swiss"] .illus{border-radius:0;}
[data-surface="swiss"] .figure .media img{filter:saturate(.58) contrast(1.06);}
[data-surface="swiss"] .figure:hover .media img{filter:saturate(.85);}
[data-surface="swiss"] .split--wide-media .figure .media,
[data-surface="swiss"] .split--tall-media .figure .media{
  -webkit-mask-image:none;mask-image:none;
}
@media (min-width:64rem){
  [data-surface="swiss"] .split--wide-media > .figure,
  [data-surface="swiss"] .split--tall-media > .figure{
    margin-right:calc(-1 * clamp(1rem,4vw,2.5rem));
  }
}

/* ---------- plates and cards ---------- */
[data-surface="swiss"] .plat{border-color:var(--rule);}
[data-surface="swiss"] .plat > *{border-color:var(--rule);background:var(--plate);}
[data-surface="swiss"] a.card:hover{background:#fff;}
[data-surface="swiss"] .band-linen{background:var(--plate-2);}
[data-surface="swiss"] .notice{
  background:none;border:1px solid var(--ink);border-left-width:3px;border-radius:0;
}

/* ---------- the outlined label ----------
   The reference's one spot of colour: a thin red rule around a two-word
   caption sitting on a photograph. Used here for the hero credit. */
[data-surface="swiss"] .hero-credit{
  border:1px solid var(--accent-ink);
  color:var(--on-field);
  background:rgba(20,27,35,.55);
  padding:.5rem .75rem;
  right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.5rem);
  max-width:16rem;
}

/* ---------- masthead, footer ---------- */
[data-surface="swiss"] .masthead{background:none;color:var(--ink);}
[data-surface="swiss"] .masthead a,
[data-surface="swiss"] .brand .brand-name{color:var(--ink);}
[data-surface="swiss"] .mast-util a{color:var(--ink-2);}
[data-surface="swiss"] .primary{background:none;border-color:var(--ink);}
[data-surface="swiss"] .primary a{color:var(--ink-2);letter-spacing:.14em;}
[data-surface="swiss"] .primary a:hover,
[data-surface="swiss"] .primary a[aria-current="page"]{color:var(--ink);}
[data-surface="swiss"] nav.primary a:hover,
[data-surface="swiss"] nav.primary a[aria-current="page"]{border-bottom-color:var(--ink);}
[data-surface="swiss"] footer.site{background:var(--field);}
[data-surface="swiss"] .marquee{border-color:var(--rule);}
[data-surface="swiss"] .marquee span::after{color:var(--accent-ink);}
[data-surface="swiss"] .tally-num{font-weight:300;color:var(--ink);}
[data-surface="swiss"] .band-field .tally-num{color:var(--on-field);}
[data-surface="swiss"] .index-stage,
[data-surface="swiss"] .index-plate{border-radius:0;}
[data-surface="swiss"] .index-stage img{filter:saturate(.58);}
[data-surface="swiss"] .icon-badge{border-radius:0;border-color:var(--ink);color:var(--ink);background:none;}


/* The swiss .btn-primary rule has the same specificity as .band-field
   .btn-primary and comes later, so it was winning and putting dark ink on
   the dark field. Third time this trap has bitten; third surface. */
[data-surface="swiss"] .band-field .btn-primary,
[data-surface="swiss"] .band-field a.btn-primary{
  border-color:var(--on-field);color:var(--on-field);background:none;
}
[data-surface="swiss"] .band-field .btn-primary:hover,
[data-surface="swiss"] .band-field a.btn-primary:hover{
  background:var(--on-field);color:var(--field);
}

/* ======================================================================
   EVERY SURFACE IN BOTH THEMES
   Each direction now has a light and a dark version, and the toggle works
   on all of them.

   It did not before, and the reason is specificity. :root[data-surface="x"]
   and :root[data-theme="dark"] both score 0-2-0, so the one written later in
   the file wins — and the surfaces are written later. Toggling dark on swiss
   or slate therefore did nothing at all: the surface simply overwrote the
   theme. The dark halves below are :root[data-surface="x"][data-theme="dark"],
   which is 0-3-0 and settles it by weight rather than by luck of ordering.
   ====================================================================== */

/* ---------- swiss after dark ----------
   The same drawn grid and the same light grotesque, on graphite instead of
   concrete. The hairline has to come up in value to stay visible, because a
   rule that is the whole structural device cannot be allowed to disappear. */
:root[data-surface="swiss"][data-theme="dark"]{
  --paper:#1A1F24;
  --plate:#222930;
  --plate-2:#2B333B;
  --ink:#EEF1F2;
  --ink-2:#B9C2C8;
  --ink-3:#A7B1B8;   /* 4.8:1 on the card plate. #98A3AB measured 4.08
                           on the directory, where every card carries one. */
  --rule:#3C464E;
  --rule-2:#55616A;
  --field:#10151A;
  --field-2:#0B0F13;
  --on-field:#EEF1F2;
  --on-field-2:#B9C2C8;
  --wheat:#FCD878;
  --wheat-2:#FDE5A0;
  --wheat-soft:#2A2616;
  --on-wheat:#1A1F24;
  --accent-ink:#E8857F;   /* the reference's red, lifted to carry on graphite */
  --leaf:#7DC46F;
  --leaf-soft:#172A18;
  --link:#EEF1F2;
  --focus:#E8857F;
  --scrim-1:rgba(8,11,14,.66);
  --scrim-2:rgba(8,11,14,.24);
}
[data-surface="swiss"][data-theme="dark"] .proto-flag{
  background:none;color:var(--ink);border-bottom-color:var(--ink-3);
}
[data-surface="swiss"][data-theme="dark"] .masthead a,
[data-surface="swiss"][data-theme="dark"] .brand .brand-name{color:var(--ink);}
[data-surface="swiss"][data-theme="dark"] .primary{border-color:var(--rule-2);}
[data-surface="swiss"][data-theme="dark"] nav.primary a.btn-join,
[data-surface="swiss"][data-theme="dark"] .btn,
[data-surface="swiss"][data-theme="dark"] .btn-primary{
  border-color:var(--ink);color:var(--ink);background:none;
}
[data-surface="swiss"][data-theme="dark"] .btn-primary:hover,
[data-surface="swiss"][data-theme="dark"] nav.primary a.btn-join:hover{
  background:var(--ink);color:var(--paper);
}
[data-surface="swiss"][data-theme="dark"] .sec-title::before{background:var(--ink-2);}
[data-surface="swiss"][data-theme="dark"] .notice{border-color:var(--rule-2);}

/* ---------- slate in daylight ----------
   The bold grotesque, the giant numerals and the green stay; the ground goes
   to paper. The green has to darken sharply to survive the change: #4ADE5E is
   1.8:1 on white and unreadable as type, so text-weight green becomes a deep
   forest value while the bright one keeps its job as a fill. */
:root[data-surface="slate"]:not([data-theme="dark"]){
  --paper:#F4F6F7;
  --plate:#FFFFFF;
  --plate-2:#E9EDEF;
  --ink:#141D26;
  --ink-2:#48545F;
  --ink-3:#5A6771;
  --rule:#D5DBDF;
  --rule-2:#B4BDC4;
  --field:#141D26;
  --field-2:#0D141B;
  --on-field:#F0F3F5;
  --on-field-2:#B7C2CA;
  --wheat:#27753A;       /* the fill green, darkened far enough that white type
                            on it clears AA. #2E8B41 measured 4.30 -- close
                            enough to look fine and not close enough to pass. */
  --wheat-2:#1D5C2C;
  --wheat-soft:#E6F3E8;
  --on-wheat:#FFFFFF;
  --accent-ink:#1F6B30;  /* 5.4:1 on the page */
  --link:#1F6B30;
  --focus:#1F6B30;
  --scrim-1:rgba(14,22,30,.70);
  --scrim-2:rgba(14,22,30,.30);
}
[data-surface="slate"]:not([data-theme="dark"]) .masthead{background:var(--field);}
[data-surface="slate"]:not([data-theme="dark"]) .primary{background:var(--field);}
[data-surface="slate"]:not([data-theme="dark"]) .proto-flag{
  background:var(--wheat);color:#fff;border-bottom-color:var(--wheat-2);
}
/* The gradient numerals are built from --ink, which has just inverted, so the
   gradient has to invert with it or they vanish into the page. */
[data-surface="slate"]:not([data-theme="dark"]) .index-num{
  background:linear-gradient(180deg,var(--ink) 20%,rgba(20,29,38,.26) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-surface="slate"]:not([data-theme="dark"]) .index-row a:hover .index-num,
[data-surface="slate"]:not([data-theme="dark"]) .index-row.is-on a .index-num{
  background:linear-gradient(180deg,var(--accent-ink) 20%,rgba(31,107,48,.28) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-surface="slate"]:not([data-theme="dark"]) .index-plate{background:var(--plate-2);}
[data-surface="slate"]:not([data-theme="dark"]) .notice{border-color:var(--accent-ink);}

/* slate-light keeps a dark masthead and dark field bands, but the slate
   surface sets .label and .primary a from --ink-3 / --ink-2, which just
   inverted to dark values. Anything sitting on a dark band has to come back
   to the on-field pair. The generic .band-field rules already say this; they
   are simply outranked by the surface, so they are restated at its weight. */
[data-surface="slate"]:not([data-theme="dark"]) .primary a{color:var(--on-field-2);}
[data-surface="slate"]:not([data-theme="dark"]) .primary a:hover,
[data-surface="slate"]:not([data-theme="dark"]) .primary a[aria-current="page"]{color:var(--on-field);}
[data-surface="slate"]:not([data-theme="dark"]) .masthead a,
[data-surface="slate"]:not([data-theme="dark"]) .brand .brand-name{color:var(--on-field);}
[data-surface="slate"]:not([data-theme="dark"]) .mast-util a,
[data-surface="slate"]:not([data-theme="dark"]) .brand span{color:var(--on-field-2);}
[data-surface="slate"]:not([data-theme="dark"]) .theme-toggle{color:var(--on-field-2);border-color:var(--rule-2);}
[data-surface="slate"]:not([data-theme="dark"]) .band-field .label,
[data-surface="slate"]:not([data-theme="dark"]) .band-field .card .cat,
[data-surface="slate"]:not([data-theme="dark"]) .band-field .tally-lab{color:var(--on-field-2);}
[data-surface="slate"]:not([data-theme="dark"]) .btn-on-field{
  color:var(--on-field);border-color:rgba(255,255,255,.4);
}
[data-surface="slate"]:not([data-theme="dark"]) .btn-on-field:hover{
  background:var(--on-field);color:var(--field);
}

/* The head of a member page is short: the crumbs, the name, the first button. */
.member-top{padding-block:clamp(1rem,3vw,2rem);}

/* ---------- the member logo on a card ----------
   Shown where the member has a logo; a card without one starts straight
   with its category and name. The files are already 3:2 tiles, built by
   tools/logo-tiles.py: each mark trimmed, set on its own ground and sized
   by area rather than by box, so a wide wordmark and a square badge carry
   the same weight. The CSS only frames them. */
.card-logo{
  display:block;
  width:6rem;height:4rem;flex:none;
  margin-bottom:1rem;
  border-radius:var(--r-sm);
  object-fit:cover;
  /* An inset hairline instead of a border: it reads on a white tile on a
     white card, and disappears into a coloured one. */
  box-shadow:0 0 0 1px rgba(20,28,38,.08) inset, 0 1px 2px rgba(20,28,38,.06);
  /* Member logos arrive in every colour there is. Held back a little so a
     grid of thirty-four does not turn into a patchwork, and brought up to
     full strength when the card is pointed at. */
  filter:saturate(.92);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
a.card:hover .card-logo{filter:none;transform:translateY(-1px);}
/* A directory card without a logo keeps the logo's space, empty, so every
   category line, name and description starts at the same height across the
   grid -- the text reads in level rows whether or not a card has a logo. */
a.card[data-cat]:not(:has(.card-logo))::before{
  content:"";display:block;flex:none;
  height:4rem;margin-bottom:1rem;
}
/* In one column there is no row to line up with, so the space goes. The grid
   drops to one column below two 16rem cards. */
@media (max-width:34rem){ a.card[data-cat]:not(:has(.card-logo))::before{display:none;} }
/* After dark a white tile is the brightest thing on the card. Taken down a
   step so it sits in the page instead of glowing out of it. */
[data-theme="dark"] .card-logo,[data-theme="dark"] .member-logo{filter:brightness(.9) saturate(.92);}
[data-theme="dark"] a.card:hover .card-logo{filter:brightness(.97);}
[data-theme="dark"] .card-logo,[data-theme="dark"] .member-logo{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;}

/* ---------- the member's own logo, on their page ---------- */
.member-logo{
  display:block;width:10.5rem;height:7rem;max-width:100%;
  object-fit:cover;margin:.5rem 0 1.1rem;
  border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(20,28,38,.08) inset, 0 1px 2px rgba(20,28,38,.05), 0 10px 24px rgba(20,28,38,.07);
}

/* ---------- "Find them online" ----------
   Round buttons carrying each network's mark. They sit in the page's ink and
   take the network's own colour only under the pointer, so a row of three
   does not shout three brand colours at once. */
.social{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem;}
.social-btn{
  display:grid;place-items:center;
  width:2.9rem;height:2.9rem;border-radius:50%;
  color:var(--ink);background:var(--plate);
  border:1.5px solid var(--rule-2);
  text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .25s var(--ease);
}
.social-btn svg{width:1.4rem;height:1.4rem;}
.social-btn:hover,.social-btn:focus-visible{color:#fff;transform:translateY(-2px);}
.social-web:hover,.social-web:focus-visible{background:var(--field);border-color:var(--field);}
.social-facebook:hover,.social-facebook:focus-visible{background:#1877F2;border-color:#1877F2;}
.social-instagram:hover,.social-instagram:focus-visible{background:#C13584;border-color:#C13584;}
@media (prefers-reduced-motion:reduce){ .social-btn:hover{transform:none;} }

/* ---------- the search bar ----------
   The field and the button are one object inside one border, so the rounding
   belongs to the container and nothing else. The global `input` pill rule was
   rounding the field a second time inside that border, which left a gold
   crescent at each end of the white -- the field curving away from a box that
   was not curving with it.

   Radius comes from --r-pill so the bar follows whichever surface is on: a
   pill on the default, square under swiss, barely rounded under slate. */
.searchbar{border-radius:var(--r-pill);}
.searchbar input,
.searchbar button{border-radius:0;}
.searchbar input{padding-inline:clamp(1rem,2.5vw,1.4rem);}
.searchbar button{padding-inline:clamp(1.2rem,3vw,1.75rem);}


/* Below the breakpoint the index stacks and the stage went full width -- 739px
   at 820, against sources that are 424 to 570 wide, so every illustration was
   being blown up. Capped just under the narrowest source and centred. */
@media (max-width:52rem){
  /* width:100% matters: an auto inline margin on a grid item turns off the
     stretch, and every child of the stage is absolutely positioned, so the
     box collapses to nothing without it. */
  .index-stage{width:100%;max-width:26rem;margin-inline:auto;}
}

/* ---------- the district strip ----------
   Three photographs of the same place by three different hands, so they need
   a shared grade to read as one set rather than three. Measured before and
   after: the originals ran from luminance 114 to 149 and warmth +18 to +102.
   The grade pulls the saturation back so the golden autumn stops shouting
   over the quieter frame, and lifts contrast a touch so all three sit at a
   similar weight.

   The night fireworks frame was dropped rather than graded. At luminance 50
   and no warmth at all it was not a member of this set and no filter was
   going to make it one. */
.strip img{
  /* A touch of sepia is what actually does the joining. Pulling the
     saturation back stops the golden frames shouting, but it cannot warm a
     grey overcast sky -- sepia can, and at this strength it tints without
     turning anybody's photograph into a period piece. */
  filter:saturate(.72) sepia(.16) contrast(1.05) brightness(1.03);
  transition:filter .5s var(--ease);
}
.strip figure:hover img{filter:saturate(.95) contrast(1.03);}

/* ---------- the Harvest Hunt route map ----------
   Events page. The twelve stops are drawn as a sketch of downtown: Grand
   Avenue across the middle, Pacific Avenue up the west end, the CPR line
   along the top, and Mr. Fox's route in gold from the Garden Club through
   every stop in order and back. The stops are laid out in the order the
   game was played, one loop with no backtracking, so a child can follow the
   numbers; each card still gives its real address. Not to scale.

   One list serves both layouts. From 60rem it is laid over the drawing,
   each card at its block; below that the drawing would shrink the logos to
   nothing, so it goes and the list becomes a numbered route down the page.
   The map scales as a single piece through container units, so a card and
   its block never drift apart. */
.hunt-map{position:relative;container-type:inline-size;}
.hunt-streets,.hunt-pin,.hunt-flag{display:none;}
/* Narrow: a strip map -- the stops as a numbered route down the page, the
   gold line running through the numbers the way it runs through the streets. */
.hunt-stops{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;position:relative;}
.hunt-stops::before{content:"";position:absolute;left:.85rem;top:1rem;bottom:1rem;
  border-left:3px dotted var(--wheat-2);}
.hunt-stops li{position:relative;padding-left:2.4rem;}
.hunt-stops a{display:grid;grid-template-columns:5.25rem 1fr;grid-template-rows:auto 1fr;column-gap:.85rem;
  align-items:start;padding:.5rem;background:var(--plate);border:1px solid var(--rule-2);
  border-radius:var(--r-sm);color:inherit;text-decoration:none;
  transition:transform .2s var(--ease-out),box-shadow .2s ease;}
.hunt-stops a:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.hunt-stops img,.hunt-nologo{grid-row:1 / 3;display:block;width:100%;aspect-ratio:3/2;height:auto;border-radius:4px;}
.hunt-nologo{display:grid;place-items:center;background:var(--plate-2);color:var(--ink-3);
  font:600 1.8rem/1 var(--f-display);}
.hunt-stops strong{font-size:.92rem;line-height:1.25;font-weight:600;align-self:end;}
.hunt-addr{font-size:.78rem;color:var(--ink-3);}
.hunt-n{position:absolute;left:0;top:50%;margin-top:-.85rem;z-index:1;width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;background:var(--wheat);color:var(--on-wheat);
  font:700 .8rem/1 var(--f-body);box-shadow:0 0 0 3px var(--paper);}
@media (min-width:40rem) and (max-width:59.99rem){
  .hunt-stops{grid-template-columns:1fr 1fr;column-gap:1.25rem;}
  .hunt-stops::before{display:none;}
}

@media (min-width:60rem){
  .hunt-map{aspect-ratio:1200/780;border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--rule-2);box-shadow:var(--shadow);}
  .hunt-streets{display:block;position:absolute;inset:0;width:100%;height:100%;}
  .hunt-stops{display:block;position:static;}
  .hunt-stops::before{display:none;}
  .hunt-stops li{position:absolute;left:var(--x);top:var(--y);width:10.42cqi;padding:0;}
  .hunt-stops a{display:flex;flex-direction:column;gap:.3cqi;padding:.5cqi .5cqi .6cqi;border-radius:.6cqi;}
  .hunt-stops strong{align-self:auto;}
  .hunt-stops strong{font-size:1.02cqi;}
  .hunt-addr{font-size:.86cqi;}
  .hunt-nologo{font-size:3cqi;}
  .hunt-n{top:-.7cqi;left:-.7cqi;margin:0;width:2cqi;height:2cqi;font-size:.95cqi;box-shadow:0 0 0 2px var(--paper);}
  .hunt-pin{display:grid;place-items:center;position:absolute;left:var(--x);top:var(--y);
    width:1.9cqi;height:1.9cqi;margin:-.95cqi 0 0 -.95cqi;border-radius:50%;
    background:var(--field);color:var(--on-field);font:700 .9cqi/1 var(--f-body);
    box-shadow:0 0 0 .25cqi var(--wheat);}
  .hunt-flag{display:block;position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);
    text-align:center;font-size:.9cqi;line-height:1.3;color:var(--accent-ink);}
  .hunt-flag strong{display:block;font-size:1.15cqi;color:var(--ink);}
}

/* The drawing. Ground is the page's own plate; streets are wide pale bands
   with a hairline edge; the route is the crest gold, dashed like footsteps. */
.hm-ground{fill:var(--plate-2);}
.hm-park{fill:var(--leaf-soft);stroke:var(--leaf);stroke-width:1.5;stroke-dasharray:4 4;}
.hm-street path{fill:none;stroke:var(--plate);stroke-width:44;}
.hm-street .hm-minor{stroke-width:22;}
.hm-rail path{fill:none;stroke:var(--ink-3);stroke-width:2;}
.hm-rail .hm-ties{stroke-width:10;stroke-dasharray:2 10;}
.hm-elev path{fill:var(--rule-2);}
.hm-route{fill:none;stroke:var(--wheat-2);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 13;}
.hm-lead{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 4;}
.hm-names text{font:700 13px/1 var(--f-body);letter-spacing:.22em;fill:var(--ink-3);}
.hm-names .hm-quiet{font-weight:600;opacity:.75;}

/* ======================================================================
   THE JOURNAL: the inner pages join the homepage
   2026-10-27. The homepage moved to "Prairie Journal" (home.css) and the
   inner pages were left in the high-key surface: thin uppercase headings on
   a cool near-white, with a dozen kinds of tracked micro-label at 9-11px.
   Two sites under one masthead. This layer brings them together without
   touching a class name:

   - the homepage's warm paper and its headlines, set in Open Sans' own
     condensed width at 800 -- the brand face, its narrow cut;
   - no eyebrow labels over headings: the opening of each page is a
     breadcrumb now, and the heading speaks for itself;
   - a floor of 12px for anything set in tracked capitals, and buttons and
     captions at a size that can be read on a phone;
   - the browser's own surfaces -- selection, caret, scrollbars, checkboxes --
     in the crest palette.

   Scoped to the default surface; the ?theme= comparison surfaces keep their
   own rules. Dark keeps its navy tokens, with the same type.
   ====================================================================== */
:root:not([data-surface]){
  --paper:#F6F3EC;
  --plate:#FCFBF7;
  --plate-2:#EEE9DE;
  --ink:#16202B;
  --ink-2:#3E4954;
  --ink-3:#59636D;     /* 5.6:1 on the paper */
  --rule:#E0DACD;
  --rule-2:#CBC3B1;
  --cond:75%;
}
:root:not([data-surface])[data-theme="dark"]{
  --paper:#111A28;
  --plate:#192434;
  --plate-2:#223049;
  --ink:#EAEEF5;
  --ink-2:#B3C0D4;
  --ink-3:#93A2BA;
  --rule:#2A3950;
  --rule-2:#3E5070;
}

/* ---------- browser surfaces ---------- */
:root:not([data-surface]){accent-color:var(--field);caret-color:var(--field);
  scrollbar-color:var(--rule-2) transparent;}
:root:not([data-surface])[data-theme="dark"]{accent-color:var(--wheat);caret-color:var(--wheat);}
:root:not([data-surface]) ::selection{background:var(--wheat);color:var(--on-wheat);}
:root:not([data-surface]) body{background:var(--paper);}

/* ---------- headlines: the homepage's condensed voice ---------- */
:root:not([data-surface]) :is(h1,h2,h3){
  font-family:var(--f-display);font-stretch:var(--cond);font-weight:800;
  text-transform:none;letter-spacing:-.015em;line-height:1.02;text-wrap:balance;
}
:root:not([data-surface]) h1{font-size:clamp(2.6rem,6.2vw,5.25rem);letter-spacing:-.02em;line-height:.96;}
:root:not([data-surface]) h2,
:root:not([data-surface]) .sec-title h2{font-size:clamp(1.9rem,3.8vw,3rem);text-transform:none;letter-spacing:-.015em;}
:root:not([data-surface]) h3{font-size:clamp(1.2rem,1.9vw,1.45rem);font-stretch:87.5%;font-weight:700;letter-spacing:-.005em;line-height:1.15;}
:root:not([data-surface]) .hero h1{max-width:15ch;}
:root:not([data-surface]) :is(p,li,dd,figcaption){text-wrap:pretty;}

/* The page opens on where you are, not on a label. */
:root:not([data-surface]) .crumbs{font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--ink-2);margin:0 0 1rem;}
:root:not([data-surface]) .crumbs a{color:inherit;text-decoration-color:var(--rule-2);}
:root:not([data-surface]) .crumbs a:hover{text-decoration-color:currentColor;}
:root:not([data-surface]) .hero .crumbs,
:root:not([data-surface]) .hero .crumbs a{color:var(--on-field-2);}
:root:not([data-surface]) .hero .crumbs a{text-decoration-color:rgba(255,255,255,.35);}
:root:not([data-surface]) .meta{font-size:.95rem;font-weight:600;color:var(--on-field-2);margin:.6rem 0 0;}
:root:not([data-surface]) .band:not(.band-field) .meta{color:var(--ink-2);}

/* ---------- the small-type floor ----------
   Tracked capitals at 12px, never below; ordinary small text at 13-14px. */
:root:not([data-surface]) :is(.label,.cat,.go,.role,dt,.tally-lab,.nest,.index-num,.index-count){
  font-size:.75rem;letter-spacing:.1em;
}
:root:not([data-surface]) .card .go,
:root:not([data-surface]) .go a{font-size:.8125rem;letter-spacing:.04em;}
:root:not([data-surface]) .mast-util :is(a,button){font-size:.8125rem;letter-spacing:.06em;}
:root:not([data-surface]) .btn-join{font-size:.875rem;letter-spacing:.04em;}
:root:not([data-surface]) .btn{font-size:.9375rem;letter-spacing:.01em;}
:root:not([data-surface]) figcaption,
:root:not([data-surface]) .illus-cap{font-size:.875rem;letter-spacing:0;text-transform:none;line-height:1.5;}
:root:not([data-surface]) .cat-tile span{font-size:.875rem;letter-spacing:0;text-transform:none;}
:root:not([data-surface]) .foot-legal span{font-size:.8125rem;}
:root:not([data-surface]) footer h2{font-size:.8125rem;font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;}
:root:not([data-surface]) .svc em,
:root:not([data-surface]) li em{font-size:.8125rem;}
:root:not([data-surface]) .hero-credit{font-size:.75rem;}
:root:not([data-surface]) label{font-size:.875rem;}
:root:not([data-surface]) .proto-flag{font-size:.8125rem;letter-spacing:0;text-transform:none;font-weight:600;}

/* The route map keeps a readable floor however narrow its container. */
@media (min-width:60rem){
  .hunt-stops strong{font-size:max(12px,1.02cqi);}
  .hunt-addr{font-size:max(11px,.86cqi);}
  .hunt-n,.hunt-pin{font-size:max(11px,.95cqi);}
  .hunt-flag{font-size:max(11px,.9cqi);}
  .hunt-flag strong{font-size:max(13px,1.15cqi);}
}

/* ---------- masthead and buttons in the homepage's voice ----------
   The homepage sets its navigation and buttons in sentence case at 600;
   the inner pages had them in tracked capitals. One voice for both. */
:root:not([data-surface]) .primary a,
:root:not([data-surface]) .mast-util :is(a,button),
:root:not([data-surface]) :is(.btn,.btn-join){
  text-transform:none;letter-spacing:0;font-weight:600;
}
:root:not([data-surface]) .primary a{font-size:.9375rem;}
:root:not([data-surface]) .mast-util :is(a,button){font-size:.875rem;}
:root:not([data-surface]) .theme-toggle{min-height:2rem;padding-inline:.85rem;}
:root:not([data-surface]) h1 + :is(p,.lede){margin-top:1.1rem;}
:root:not([data-surface]) h2 + :is(p,.lede){margin-top:.85rem;}

/* The primary button is the homepage's gold pill on every ground. The
   high-key surface had made it an ink outline, which on a hero photograph
   left dark text on a dark picture -- "Talk to the EDO" could not be seen. */
:root:not([data-surface]) .btn-primary,
:root:not([data-surface]) .band-field .btn-primary,
:root:not([data-surface]) .band-field a.btn-primary{
  background:var(--wheat);color:var(--on-wheat);border-color:var(--wheat);
}
:root:not([data-surface]) .btn-primary:hover,
:root:not([data-surface]) .band-field .btn-primary:hover,
:root:not([data-surface]) .band-field a.btn-primary:hover{
  background:var(--wheat-2);border-color:var(--wheat-2);color:var(--on-wheat);
}
:root:not([data-surface]) h1{font-size:clamp(2.6rem,5.6vw,4.5rem);}
@media (min-width:60rem){
  .hunt-addr,.hunt-flag{font-size:max(12px,.86cqi);}
}
/* A card's category follows its heading: the heading leads, the category
   files it. On a figure card ($100, ~600) it reads as the figure's label. */
:root:not([data-surface]) .card h3 + .cat{display:block;margin:.4rem 0 .55rem;}
:root:not([data-surface]) main p{max-width:64ch;}  /* Open Sans runs about 1.2 characters to the ch: this is ~76 */

/* Page to page, the browser crossfades instead of flashing white
   (cross-document View Transitions; ignored where unsupported). */
@view-transition{navigation:auto;}
@media (prefers-reduced-motion: reduce){ @view-transition{navigation:none;} }

/* ---------- page heads ----------
   Every inner page opens the same way: the breadcrumb, then the page title,
   top left in the page column, at one size and one distance from the top of
   the page. Over a photograph or a film the title is white on a scrim; on
   the paper it is ink. The inline spacing the heads used to carry, each a
   little different, is gone from the pages. */
:root:not([data-surface]){--head-top:clamp(2.25rem,4.5vw,3.75rem);}
:root:not([data-surface]) .crumbs{padding-top:0;}
:root:not([data-surface]) main h1,
:root:not([data-surface]) .hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);margin-top:0;max-width:18ch;}
:root:not([data-surface]) .hero > .shell{padding-top:var(--head-top);}
:root:not([data-surface]) main > section.band:first-child{padding-top:var(--head-top);}
:root:not([data-surface]) .member-top > .shell{padding-top:var(--head-top);}

/* ---------- the archive film ----------
   About opens on the 1910 film (and Events on the fireworks over the town
   sign, so the horse-and-buggy monument stays in), set like every other photo hero -- title
   white, top left, on a scrim -- with two differences. The hero is held to
   16:9 so the film shows its whole frame, and it does not zoom or drift.
   It is no wider than fits the window's height. The scrim only darkens the
   top half, the sky and the clapboard behind the title; the people on the
   platform below it are left as they are. On a phone the hero is taller
   than 16:9 to hold the title, so there the film is cropped at the sides
   like any other hero photograph. */
@media (min-width:48rem){
  .hero.hero-film{aspect-ratio:16/9;max-width:calc(88svh * 16 / 9);margin-inline:auto;}
  .hero.hero-film > .shell{padding-bottom:clamp(2rem,4vw,3rem);}
}
.hero-photo.hero-film > .hero-img{filter:none;transform:none;object-position:50% 50%;}
.hero.hero-photo.hero-film::after{
  background:linear-gradient(180deg,rgba(10,16,26,.62) 0%,rgba(10,16,26,.4) 24%,rgba(10,16,26,0) 50%);
}
.hero-film h1{text-shadow:0 1px 2px rgba(10,16,26,.5),0 0 22px rgba(10,16,26,.45);}

/* The two heads that broke the rule. Membership sets its title beside a
   photograph, and the split centred it vertically; a member page put the
   category line and the logo above the business's name. Both now start
   with the breadcrumb and the title, like every other page. */
:root:not([data-surface]) main > section.band:first-child .split{align-items:start;}
:root:not([data-surface]) .member-top{padding-top:0;}
:root:not([data-surface]) .member-head{display:flex;flex-direction:column;align-items:flex-start;padding-top:0;}
:root:not([data-surface]) .member-head h1{order:-1;margin-bottom:.9rem;}

/* A board member's business, with its logo where it has one: the same 3:2
   tile the directory uses, at the size of a line of text. */
.person .affil{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;}
.affil-link{display:inline-flex;align-items:center;gap:.6rem;}
.person .affil-logo{
  width:3.6rem;height:2.4rem;aspect-ratio:auto;flex:none;object-fit:cover;object-position:50% 50%;margin:0;
  border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--rule) inset;
}

/* The Garden Club opens and closes the hunt. On the map it is the flag, and
   a flag on the route where the loop starts and ends; in the strip route on
   a narrow screen it is the first and the last entry. */
.hunt-gc > div{display:grid;grid-template-columns:5.25rem 1fr;grid-template-rows:auto 1fr;column-gap:.85rem;
  align-items:start;padding:.5rem;background:var(--leaf-soft);border:1px dashed var(--leaf);
  border-radius:var(--r-sm);}
.hunt-gc .hunt-nologo{background:transparent;color:var(--leaf);}
.hunt-gc .hunt-n{background:var(--leaf);color:#16202B;}
@media (min-width:60rem){
  .hunt-stops li.hunt-gc{display:none;}
  .hunt-pin.hunt-pin-gc{width:2.6cqi;height:2.6cqi;margin:-1.3cqi 0 0 -1.3cqi;background:var(--leaf);color:#16202B;
    font-size:1.4cqi;box-shadow:0 0 0 .25cqi var(--wheat);}
}

/* ---------- drop-down menus (assets/nav.js) ----------
   A chevron beside each main link opens that page's sections and sub-pages.
   The link itself still goes to the page. */
nav.primary li.has-sub{position:relative;display:flex;align-items:center;gap:.2rem;}
.sub-btn{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;margin:0 -.2rem 0 0;
  background:none;border:0;border-radius:var(--r-sm);color:inherit;cursor:pointer;opacity:.7;
}
.sub-btn:hover,.has-sub.open .sub-btn{opacity:1;}
.sub-btn:focus-visible{outline:2px solid var(--accent-ink,currentColor);outline-offset:1px;}
.sub-btn svg{width:.75rem;height:.75rem;transition:transform .2s var(--ease);}
.has-sub.open .sub-btn svg{transform:rotate(180deg);}
.sub{
  position:absolute;top:100%;left:-.85rem;z-index:40;min-width:15.5rem;
  padding:.4rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;
}
.has-sub.open > .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.sub ul{list-style:none;margin:0;padding:0;display:block;}
.sub ul.sub-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:.25rem;min-width:30rem;}
nav.primary .sub a{
  display:block;padding:.5rem .7rem;border:0;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.35;
  color:var(--ink);white-space:normal;
}
nav.primary .sub a:hover,nav.primary .sub a:focus-visible{background:var(--leaf-soft);color:var(--ink);}
nav.primary .sub li:first-child a{font-weight:700;}
nav.primary .sub li:last-child{margin-left:0;} /* not the Join button rule */
@media (max-width:48rem){
  /* The nav wraps here; a panel spans the whole row instead of hanging off
     one item and running past the screen edge. */
  nav.primary .shell{position:relative;}
  nav.primary li.has-sub{position:static;}
  .sub-btn{width:2rem;height:2rem;}
  .sub{left:clamp(1rem,4vw,2.5rem);right:clamp(1rem,4vw,2.5rem);min-width:0;margin-top:.25rem;}
  .sub ul.sub-cols{min-width:0;}
}
@media (max-width:30rem){ .sub ul.sub-cols{grid-template-columns:1fr;} }

/* ======================================================================
   PRAIRIE NIGHT: the inner pages follow the homepage
   2026-10-29. The homepage moved to "Prairie Night" (home.css): night navy,
   cream and wheat gold, display lines in Libre Caslon Display, photographs
   with soft rounded corners and a real shadow, cards that stand apart. This
   layer carries the same world through the fifty inner pages without
   touching a class name:

   - the masthead and the footer turn night, like the top and the foot of
     the homepage, and the navy bands with them;
   - h1 and h2 are set in the Caslon at 400; h3 and everything read stays in
     Open Sans, now at its normal width;
   - the hairline grids of cards become separate rounded cards;
   - photographs keep their colour and their edges: no wash, no vignette.

   Scoped to the default surface, like the Journal layer above it. The dark
   theme keeps working: the night parts stay night, the cream turns deep.
   ====================================================================== */
:root:not([data-surface]){
  --paper:#F4F0E6;
  --plate:#FBF9F3;
  --plate-2:#ECE5D3;
  --ink:#16202B;
  --ink-2:#3E4954;
  --ink-3:#5A646E;
  --rule:#DDD6C6;
  --rule-2:#C9C0AC;
  --field:#111B29;
  --field-2:#172435;
  --on-field:#F1F3F6;
  --on-field-2:#B9C4D2;
  --line-field:rgba(241,243,246,.14);
  --f-serif:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(22,32,43,.05),0 18px 44px rgba(22,32,43,.09);
  --shadow-lift:0 2px 6px rgba(22,32,43,.07),0 28px 64px rgba(22,32,43,.15);
}
:root:not([data-surface])[data-theme="dark"]{
  --paper:#0D1520;
  --plate:#152031;
  --plate-2:#1A2739;
  --ink:#EAEEF5;
  --ink-2:#B3C0D4;
  --ink-3:#97A5BB;
  --rule:#26354B;
  --rule-2:#3A4C68;
  --field:#172435;
  --field-2:#1E2E44;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.3),0 28px 64px rgba(0,0,0,.45);
}

/* ---------- type ---------- */
:root:not([data-surface]) :is(h1,h2){
  font-family:var(--f-serif);font-weight:400;font-stretch:100%;
  letter-spacing:-.01em;line-height:1.06;
}
:root:not([data-surface]) main h1,
:root:not([data-surface]) .hero h1{font-size:clamp(2.8rem,6vw,4.75rem);line-height:1.02;}
:root:not([data-surface]) h2,
:root:not([data-surface]) .sec-title h2{font-size:clamp(2rem,4vw,3.15rem);}
:root:not([data-surface]) h3{font-stretch:100%;font-weight:700;letter-spacing:-.005em;line-height:1.25;font-size:clamp(1.08rem,1.5vw,1.22rem);}
:root:not([data-surface]) footer h2,
:root:not([data-surface]) .foot-grid h2{font-family:var(--f-body);font-size:.75rem;font-weight:700;letter-spacing:.14em;line-height:1.3;}

/* ---------- masthead: night, like the top of the homepage ---------- */
:root:not([data-surface]) .masthead{background:var(--field);color:var(--on-field);}
:root:not([data-surface]) .masthead a,
:root:not([data-surface]) .masthead .brand-name{color:var(--on-field);}
:root:not([data-surface]) .masthead .mast-util a{color:var(--on-field-2);}
:root:not([data-surface]) .masthead .mast-util a:hover{color:var(--on-field);}
:root:not([data-surface]) .masthead .theme-toggle{color:var(--on-field-2);border-color:var(--line-field);background:none;}
:root:not([data-surface]) .masthead .theme-toggle:hover{color:var(--on-field);border-color:var(--on-field-2);}
:root:not([data-surface]) .masthead .crest{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
:root:not([data-surface]) nav.primary{border-top:1px solid var(--line-field);border-bottom:0;background:none;}
:root:not([data-surface]) nav.primary a{color:var(--on-field-2);}
:root:not([data-surface]) nav.primary a:hover,
:root:not([data-surface]) nav.primary a[aria-current="page"]{color:var(--on-field);border-bottom-color:var(--wheat);}
:root:not([data-surface]) .masthead .sub-btn{color:var(--on-field-2);}
:root:not([data-surface]) nav.primary a.btn-join,
:root:not([data-surface])[data-theme="dark"] nav.primary a.btn-join{
  background:var(--wheat);color:var(--on-wheat);border:0;border-radius:999px;padding:.6rem 1.25rem;
}
:root:not([data-surface]) nav.primary a.btn-join:hover{background:var(--wheat-2);color:var(--on-wheat);}
:root:not([data-surface]) nav.primary .sub a{color:var(--ink);border-bottom:0;}
:root:not([data-surface]) nav.primary .sub a:hover{background:var(--plate-2);}

/* ---------- page heads ---------- */
:root:not([data-surface]) .crumbs{color:var(--ink-3);}
:root:not([data-surface]) .hero-photo::after{
  background:linear-gradient(90deg,rgba(17,27,41,.78) 0%,rgba(17,27,41,.42) 50%,rgba(17,27,41,.12) 100%),
             linear-gradient(180deg,rgba(17,27,41,.35) 0%,rgba(17,27,41,0) 40%,rgba(17,27,41,.55) 100%);
}

/* ---------- bands ---------- */
:root:not([data-surface]) .band-field{background:var(--field);color:var(--on-field);}
:root:not([data-surface]) .band-linen{background:var(--plate-2);}

/* ---------- cards stand apart ---------- */
:root:not([data-surface]) .plat{gap:1rem;background:none;border:0;border-radius:0;overflow:visible;}
:root:not([data-surface]) .plat > *{
  background:var(--plate);outline:0;border:1px solid var(--rule);border-radius:var(--r);
}
:root:not([data-surface]) .card{padding:1.5rem 1.4rem 1.6rem;}
:root:not([data-surface]) a.card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s;}
:root:not([data-surface]) a.card:hover{background:var(--plate);transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--rule-2);}
:root:not([data-surface]) .band-field .plat > *{background:var(--field-2);border-color:var(--line-field);color:var(--on-field);}
:root:not([data-surface]) .band-field .card .desc,
:root:not([data-surface]) .band-field .card .cat{color:var(--on-field-2);}
:root:not([data-surface]) .card .go{color:var(--accent-ink);}
:root:not([data-surface])[data-theme="dark"] .card .go{color:var(--wheat);}
:root:not([data-surface]) .band-field .card .go{color:var(--wheat);}
:root:not([data-surface]) .factbox,
:root:not([data-surface]) .notice{border-radius:var(--r);}

/* ---------- photographs keep their colour and their edges ---------- */
:root:not([data-surface]) .figure .media img,
:root:not([data-surface]) .illus{filter:none;}
:root:not([data-surface]) .figure:hover .media img{filter:none;transform:scale(1.02);}
:root:not([data-surface]) .split--wide-media .figure .media,
:root:not([data-surface]) .split--tall-media .figure .media{-webkit-mask-image:none;mask-image:none;border-radius:var(--r);}
:root:not([data-surface]) .figure .media,
:root:not([data-surface]) .media{border-radius:var(--r);box-shadow:var(--shadow);}

/* ---------- buttons ---------- */
:root:not([data-surface]) .btn{border-radius:999px;}

/* ---------- footer: night ---------- */
:root:not([data-surface]) footer.site{background:var(--field);color:var(--on-field-2);}
:root:not([data-surface]) footer.site a{color:var(--on-field-2);}
:root:not([data-surface]) footer.site a:hover{color:var(--on-field);}
:root:not([data-surface]) .foot-legal{border-top-color:var(--line-field);}
:root:not([data-surface]) footer.site{border-top:1px solid var(--line-field);}  /* a night band can run straight into it */

/* A hero that shows its whole frame (.hero-film: the 1910 film on About, the
   fireworks over the town sign and the horse-and-buggy monument on Events)
   keeps its light, top-only scrim. The full night scrim above is for photo
   heroes that are cropped anyway. */
:root:not([data-surface]) .hero.hero-photo.hero-film::after{
  background:linear-gradient(180deg,rgba(10,16,26,.62) 0%,rgba(10,16,26,.4) 24%,rgba(10,16,26,0) 50%);
}
.hero-film :is(.lede,.crumbs){text-shadow:0 1px 2px rgba(10,16,26,.7),0 0 18px rgba(10,16,26,.6);}  /* the scrim is light here; the words carry their own shade */
@media (max-width:47.99rem){ :root:not([data-surface]) .hero.hero-photo.hero-film::after{background:linear-gradient(180deg,rgba(10,16,26,.72) 0%,rgba(10,16,26,.55) 55%,rgba(10,16,26,.1) 85%);} }  /* on a phone the words cover most of the frame */

/* Events: the fireworks clip is cut to 2:1 (the bottom strip with the
   photographer's marks is off; the credit sits on the hero instead), so its
   whole-frame hero is 2:1 rather than 16:9. */
@media (min-width:48rem){
  .hero.hero-film.hero-wide{aspect-ratio:2/1;max-width:calc(88svh * 2);}
}
:root:not([data-surface]) .hero-wide .hero-credit{text-wrap:nowrap;letter-spacing:.12em;}  /* one line, so on a phone it stays clear of the sign; text-wrap, because the Journal layer sets text-wrap:pretty on every p */

/* ---------- the survey (membership/survey.html, assets/survey.js) ----------
   Eight questions, every one optional. Each answer is a whole card you can
   press, not a 16px box to aim at: most people will do this on a phone. */
.survey-note{margin-top:1rem;font-size:.95rem;color:var(--ink-3);}
.survey{max-width:52rem;display:grid;gap:1.25rem;}
.survey[hidden]{display:none;}
.survey .q{margin:0;padding:1.5rem 1.5rem 1.6rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--plate);min-width:0;}
.survey legend{float:left;width:100%;display:flex;gap:.8rem;align-items:baseline;padding:0;margin:0;
  font-family:var(--f-serif,var(--f-display));font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;color:var(--ink);}
.survey legend + *{clear:both;}
.q-n{flex:none;display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--field);color:var(--wheat);font-family:var(--f-body);font-size:.85rem;font-weight:700;transform:translateY(-.15em);}
.q-hint{margin:.5rem 0 1rem;font-size:.85rem;font-weight:600;color:var(--ink-3);}
.q-open .q-hint{margin-bottom:.75rem;}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem;}
.opts label{position:relative;display:flex;align-items:flex-start;gap:.7rem;padding:.75rem .9rem;margin:0;
  border:1px solid var(--rule);border-radius:10px;background:var(--paper);cursor:pointer;
  font-size:.95rem;line-height:1.4;color:var(--ink);transition:border-color .2s,background .2s;}
.opts label:hover{border-color:var(--rule-2);}
.opts input{position:absolute;opacity:0;width:1px;height:1px;}
.opts span::before{content:"";flex:none;display:inline-block;width:1.1rem;height:1.1rem;margin:.12em .65rem 0 0;vertical-align:top;
  border:1.5px solid var(--rule-2);border-radius:5px;background:var(--plate) center/.8rem no-repeat;transition:background-color .15s,border-color .15s;}
.opts input[type="radio"] + span::before{border-radius:50%;}
.opts span{display:block;padding-left:1.75rem;text-indent:-1.75rem;}
.opts label:has(input:checked){border-color:var(--field);background:var(--plate);box-shadow:0 0 0 1px var(--field) inset;}
.opts input:checked + span::before{border-color:var(--field);background-color:var(--field);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.8 8.4 2.7 2.6 5.7-6' fill='none' stroke='%23FCD878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.opts label:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px;}
.opts label:has(input:disabled){opacity:.45;cursor:not-allowed;}
[data-theme="dark"] .opts label:has(input:checked){border-color:var(--wheat);box-shadow:0 0 0 1px var(--wheat) inset;}
[data-theme="dark"] .opts input:checked + span::before{border-color:var(--wheat);background-color:var(--wheat);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.8 8.4 2.7 2.6 5.7-6' fill='none' stroke='%23111B29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.q-open textarea,.q-open input[type="email"],.q-open input[type="text"]{display:block;width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);border-radius:10px;padding:.75rem .9rem;}
.q-open textarea{resize:vertical;min-height:6rem;}
.s-email-l{display:block;margin:1.25rem 0 .4rem;font-size:.9rem;font-weight:600;color:var(--ink-2);}
.s-consent{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;font-size:.9rem;color:var(--ink-2);cursor:pointer;}
.survey-send{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.5rem;}
.survey-msg{margin:0;font-size:.92rem;font-weight:600;color:var(--accent-ink);}
[data-theme="dark"] .survey-msg{color:var(--wheat);}
.survey-thanks{max-width:44rem;padding:clamp(2rem,5vw,3rem);border-radius:var(--r-lg,20px);background:var(--field);color:var(--on-field);}
.survey-thanks h2{color:var(--on-field);}
.survey-thanks p{margin-top:1rem;color:var(--on-field-2);font-size:1.05rem;}
.survey-thanks:focus{outline:none;}
@media (max-width:40rem){
  .survey .q{padding:1.25rem 1rem 1.35rem;}
  .opts{grid-template-columns:1fr;}
}

/* An event with its own poster: the text, and the poster beside it as a
   thumbnail that opens the full PDF. */
.event-with-poster{display:grid;grid-template-columns:1fr minmax(9rem,12rem);gap:1.5rem 2rem;align-items:start;}
.event-poster{display:block;text-decoration:none;color:var(--ink-2);font-size:.85rem;font-weight:600;}
.event-poster img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--rule);box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);}
.event-poster:hover img{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.event-poster span{display:block;margin-top:.55rem;}
@media (max-width:40rem){ .event-with-poster{grid-template-columns:1fr;} .event-poster{max-width:14rem;} }

/* ---------- Business Support: the five "I want to..." tiles ----------
   Each tile is a card with a short loop on top. Pointed at or focused, the
   whole card answers: it lifts, its edge turns to the night navy, the title
   takes the accent, and the loop plays and leans in a touch. */
:root:not([data-surface]) .cat-tile.has-clip{
  display:flex;flex-direction:column;padding:0;overflow:hidden;position:relative;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s,background-color .2s;
}
.cat-tile.has-clip .tile-media{aspect-ratio:16/9;overflow:hidden;background:var(--plate-2);}
.cat-tile.has-clip video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .4s;filter:saturate(.9);}
:root:not([data-surface]) .cat-tile.has-clip > strong{display:block;margin:1.15rem 1.35rem .35rem;font-size:1.08rem;transition:color .2s;}
:root:not([data-surface]) .cat-tile.has-clip > span{display:block;margin:0 1.35rem 1.4rem;font-size:.92rem;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--ink-3);}
:root:not([data-surface]) .cat-tile.has-clip > strong::after{content:" \2192";color:var(--accent-ink);opacity:0;display:inline-block;margin-left:.35em;transform:translateX(-4px);transition:opacity .2s,transform .3s var(--ease-out);}
:root:not([data-surface]) .cat-tile.has-clip:is(:hover,:focus-visible){
  transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--field);background:var(--plate);
}
:root:not([data-surface]) .cat-tile.has-clip:is(:hover,:focus-visible) > strong{color:var(--accent-ink);}
:root:not([data-surface]) .cat-tile.has-clip:is(:hover,:focus-visible) > strong::after{opacity:1;transform:none;}
.cat-tile.has-clip:is(:hover,:focus-visible) video{transform:scale(1.04);filter:none;}
:root:not([data-surface])[data-theme="dark"] .cat-tile.has-clip:is(:hover,:focus-visible){border-color:var(--wheat);}
:root:not([data-surface])[data-theme="dark"] .cat-tile.has-clip:is(:hover,:focus-visible) > strong,
:root:not([data-surface])[data-theme="dark"] .cat-tile.has-clip > strong::after{color:var(--wheat);}
/* The wide tile lays its loop beside the words. */
@media (min-width:52rem){
  :root:not([data-surface]) .cat-tile.has-clip.cat-tile--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-rows:1fr auto 1fr;}
  .cat-tile--wide.has-clip .tile-media{grid-row:1 / -1;aspect-ratio:auto;min-height:11rem;}
  :root:not([data-surface]) .cat-tile--wide.has-clip > strong{grid-column:2;grid-row:2;margin:0 1.75rem .35rem;align-self:end;}
  :root:not([data-surface]) .cat-tile--wide.has-clip > span{grid-column:2;grid-row:3;margin:0 1.75rem;align-self:start;}
}
/* Four tiles to a row, whatever the width: auto-fit made a fifth, empty
   column at 1280 and the row stopped short of the wide tile below it. */
.plat-4:has(.has-clip){grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:60rem){ .plat-4:has(.has-clip){grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:36rem){ .plat-4:has(.has-clip){grid-template-columns:1fr;} }
:root:not([data-surface]) .hero-photo .shell > p:not(.crumbs) a:not(.btn){color:var(--on-field);text-decoration-color:rgba(241,243,246,.5);}  /* a plain link in a photo head was ink on the dark picture */

/* An event whose announcement was a short video rather than a poster. */
.event-poster video{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--rule);box-shadow:var(--shadow);background:var(--plate-2);}
figure.event-poster{margin:0;}
.event-poster figcaption{margin-top:.55rem;font-size:.85rem;font-weight:600;color:var(--ink-2);}

/* ---------- the history article (about/history.html) ----------
   A single reading column; photographs sit in it at full column width and a
   tall one is held back so it does not fill the window. */
.history{max-width:calc(46rem + 2 * clamp(1rem,4vw,2.5rem));}
.history h2{margin:clamp(2.5rem,6vw,4rem) 0 1rem;}
.history > p{margin:0 0 1.15rem;}
.history-pitch{margin:1.75rem 0 2.25rem;padding:0;font-family:var(--f-serif,var(--f-display));font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.2;color:var(--ink);}
.history-pitch cite{display:block;margin-top:.9rem;font-family:var(--f-body);font-size:.875rem;font-style:normal;line-height:1.5;color:var(--ink-3);}
.history-fig{margin:2rem 0;}
.history-fig img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow);}
.history-fig figcaption{margin-top:.7rem;font-size:.875rem;line-height:1.5;color:var(--ink-3);}
.history-fig-tall{max-width:26rem;}
.history-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:2rem 0;}
.history-pair .history-fig{margin:0;}
.history-source{margin-top:clamp(2.5rem,6vw,4rem) !important;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3);}
.history-hero > .hero-img{object-position:50% 72%;}
@media (max-width:36rem){ .history-pair{grid-template-columns:1fr;} }
.history-hero .lede{color:var(--on-field);text-shadow:0 1px 2px rgba(10,16,26,.7),0 0 18px rgba(10,16,26,.6);}  /* a busy photograph behind it */

/* The six things membership gets you: one drawn icon each, in one stroke. */
.benefit-ico{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.65rem;border-radius:50%;background:var(--field);color:var(--wheat);}
.benefit-ico svg{width:1.55rem;height:1.55rem;}
[data-theme="dark"] .benefit-ico{background:rgba(252,216,120,.12);}
/* Six cards, so three to a row: auto-fit made four at 1280 and left two over. */
.plat-3:has(.benefit-ico){grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:60rem){ .plat-3:has(.benefit-ico){grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:36rem){ .plat-3:has(.benefit-ico){grid-template-columns:1fr;} }

/* A cut-out figure standing on a wheat panel: the dark clothes and hair would
   sink into the night band without it. It stands on the panel's foot, and the
   bags run off its left edge as they do in the photograph. */
.cutout-stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--wheat);box-shadow:var(--shadow);}
.cutout-stage img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none;}

/* The Events menu in two labelled groups. */
.sub-grouped{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 .5rem;min-width:36rem;}
.sub-head{margin:0;padding:.5rem .7rem .3rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--ink-3);}
nav.primary .sub-grouped li:first-child a{font-weight:500;}
@media (max-width:48rem){ .sub-grouped{grid-template-columns:1fr;min-width:0;} }
nav.primary .sub-grouped ul{display:block;}  /* not the nav row's flex */
.cutout-stage img{width:90%;}  /* headroom above the figure */

/* A portrait film beside the text: held to a height that fits the window. */
.promo-fig video{display:block;width:auto;max-width:100%;height:auto;max-height:min(80svh,42rem);margin-inline:auto;border-radius:var(--r);box-shadow:var(--shadow);background:var(--field);}
/* The board: six cards, three to a row. */
.plat-3:has(.person){grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:60rem){ .plat-3:has(.person){grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:36rem){ .plat-3:has(.person){grid-template-columns:1fr;} }

/* ---------- sector blocks (Business Support) ----------
   Funding and training grouped by sector, each group a <details> card. Closed
   they sit two or three to a row; the one you open takes the full width and
   lays its programs out as small cards. */
.sectors-tools{margin:1rem 0 0;}
.sectors-toggle{font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);background:none;border:1px solid var(--rule-2);border-radius:999px;padding:.4rem 1rem;cursor:pointer;}
.sectors-toggle:hover{background:var(--plate-2);}
.sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem;}
.sector:not([open])>summary{height:100%;}
.sectors-stack{grid-template-columns:1fr;}
.sector{background:var(--plate);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:6rem;}
.sector[open]{grid-column:1/-1;}
.sector>summary{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.25rem;cursor:pointer;list-style:none;transition:background .15s ease;}
.sector>summary::-webkit-details-marker{display:none;}
.sector>summary:hover{background:var(--plate-2);}
.sector>summary:focus-visible{outline:3px solid var(--wheat-2);outline-offset:-3px;}
.sector>summary .benefit-ico{margin:0;flex:none;}
.sector-head{flex:1;min-width:0;}
.sector>summary h3{margin:0;color:var(--ink);}
.sector-sub{display:block;margin-top:.15rem;font-size:.88rem;line-height:1.4;color:var(--ink-2);}
.sector-count{display:block;margin-top:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.sector-chev{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--rule-2);border-radius:50%;color:var(--ink-2);transition:transform .2s ease;}
.sector-chev::before{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
.sector[open] .sector-chev{transform:rotate(180deg);}
.sector-body{padding:0 1.25rem 1.35rem;border-top:1px solid var(--rule);}
.sector-lede{margin:1rem 0 0;max-width:68ch;color:var(--ink-2);}
.prog-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
.sectors-stack .prog-list{grid-template-columns:repeat(3,minmax(0,1fr));}
.sectors-stack .prog-list:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
.prog{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:.85rem 1rem 1rem;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);}
.prog-kind{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.prog-name{font-weight:700;color:var(--ink);line-height:1.3;}
.prog p{margin:0;font-size:.93rem;line-height:1.5;color:var(--ink-2);}
.prog-gone{grid-column:1/-1;background:var(--wheat-soft);border-color:var(--rule-2);}
/* Inside the navy training band the cards stay paper: undo the band's light type. */
.band-field .sector,.band-field .sector h3,.band-field .sector a{color:var(--ink);}
.band-field .sector p{color:var(--ink-2);}
.band-field .sector .sector-sub{color:var(--ink-2);}

/* Skills Bridge, featured above the training blocks. */
.sb-card{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.25rem 2.5rem;align-items:center;margin-top:1.75rem;padding:1.6rem 1.75rem;background:var(--plate);color:var(--ink);border-radius:var(--r-lg);border:1px solid var(--wheat-2);box-shadow:var(--shadow-lift);scroll-margin-top:6rem;}
.band-field .sb-card h3{margin:.35rem 0 .5rem;color:var(--ink);font-size:clamp(1.4rem,2.4vw,1.8rem);}
.band-field .sb-card p,.band-field .sb-card .label{color:var(--ink-2);}
.band-field .sb-card a:not(.btn){color:var(--ink);}
.sb-topics{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;}
.sb-topics li{margin:0;padding:.3rem .7rem;font-size:.82rem;border-radius:999px;background:var(--plate-2);color:var(--ink);}
.sb-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;}
.sb-actions p{margin:.4rem 0 0;font-size:.9rem;}

@media (max-width:60rem){
  .sectors-stack .prog-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sb-card{grid-template-columns:1fr;}
}
@media (max-width:44rem){
  .sectors,.prog-list,.sectors-stack .prog-list{grid-template-columns:1fr;}
  .sector>summary{gap:.75rem;padding:.95rem 1rem;}
  .sector>summary .benefit-ico{width:2.5rem;height:2.5rem;}

  .sector-body{padding:0 1rem 1.1rem;}
  .sb-card{padding:1.3rem 1.2rem;}
}
@media (prefers-reduced-motion:reduce){ .sector-chev,.sector>summary{transition:none;} }

/* A reading column for the plain pages (privacy, 404). */
.shell.narrow{max-width:46rem;}
.shell.narrow h2{margin-top:2.25rem;font-size:clamp(1.5rem,2.6vw,1.9rem);}
.shell.narrow code{font-size:.88em;padding:.05em .35em;border-radius:4px;background:var(--plate-2);}

/* The office on a map (Contact). */
.map-fig{margin:1.5rem 0 0;}
.map-fig iframe{display:block;width:100%;height:auto;aspect-ratio:16/10;border:0;border-radius:var(--r);box-shadow:var(--shadow);background:var(--plate-2);}
.map-fig figcaption{margin-top:.6rem;font-size:.9rem;}

/* ---------- Moving Here: service cards with icons and buttons ----------
   Each card title carries an icon; every phone number, email and website in
   an entry sits in one row of buttons; a Chamber member gets the crest badge
   under its name, linking to its directory page. */
.svc-rich .card-svc > h3{display:flex;align-items:center;gap:.7rem;}
.svc-ico{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--field);color:var(--wheat);}
.svc-ico svg{width:1.3rem;height:1.3rem;}
[data-theme="dark"] .svc-ico{background:rgba(252,216,120,.12);}
.svc-rich .svc em{font-size:.72rem;}
.svc-acts{display:flex !important;flex-wrap:wrap;gap:.4rem;margin-top:.55rem;}
:is(.svc-acts a,a.lnk){
  display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.3rem .8rem;
  font-family:var(--f-body);font-size:.85rem;font-weight:600;line-height:1.2;text-decoration:none;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:999px;
  transition:background .15s ease,border-color .15s ease;
}
:is(.svc-acts a,a.lnk):hover{background:var(--wheat-soft);border-color:var(--wheat-2);}
:is(.svc-acts a,a.lnk):focus-visible{outline:3px solid var(--wheat-2);outline-offset:2px;}
:is(.svc-acts a,a.lnk)::before{
  content:"";flex:none;width:1rem;height:1rem;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* The number you dial is the one that matters most: it gets the navy fill. */
:is(.svc-acts a,a.lnk)[href^="tel:"]{background:var(--field);border-color:var(--field);color:var(--on-field);font-variant-numeric:tabular-nums;}
:is(.svc-acts a,a.lnk)[href^="tel:"]:hover{background:var(--field-2);border-color:var(--field-2);}
[data-theme="dark"] :is(.svc-acts a,a.lnk)[href^="tel:"]{background:var(--wheat);border-color:var(--wheat);color:var(--on-wheat);}
:is(.svc-acts a,a.lnk)[href^="tel:"]::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");}
:is(.svc-acts a,a.lnk)[href^="mailto:"]::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 7 8.5-7'/%3E%3C/svg%3E");}
:is(.svc-acts a,a.lnk)[href^="http"]::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18'/%3E%3C/svg%3E");}


/* Chamber member: the crest on a wheat pill. */
.member-badge{
  display:inline-flex !important;align-items:center;gap:.45rem;margin:.35rem 0 .15rem;
  padding:.2rem .7rem .2rem .3rem;border-radius:999px;background:var(--wheat-soft);border:1px solid var(--wheat-2);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;
  color:var(--ink) !important;text-decoration:none;
}
.member-badge img{width:auto;height:1.35rem;border-radius:50%;background:#fff;}
.member-badge:hover{background:var(--wheat);color:var(--on-wheat) !important;}
.member-badge:focus-visible{outline:3px solid var(--wheat-2);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ :is(.svc-acts a,a.lnk){transition:none;} }

/* Events menu: the dated list in two sections, dates in their own column. */
.sub-grouped{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);min-width:40rem;padding:.6rem;}
.sub-grouped > div + div{border-left:1px solid var(--rule);padding-left:.5rem;}
.sub-grouped .sub-head ~ .sub-head{margin-top:.45rem;padding-top:.75rem;border-top:1px solid var(--rule);}
nav.primary .sub a.sub-dated{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.6rem;align-items:baseline;}
.sub-date{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
nav.primary .sub a.sub-dated:hover .sub-date{color:var(--ink-2);}
@media (max-width:48rem){
  .sub-grouped{grid-template-columns:1fr;min-width:0;}
  .sub-grouped > div + div{border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:.35rem;padding-top:.35rem;}
}

/* News: quotes from members, two side by side. */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2rem;align-items:start;}
.quote{margin:0;padding:1.6rem 1.6rem 1.4rem;background:var(--plate);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);}
.quote blockquote{margin:0;padding:0;border:0;}
.quote blockquote p{margin:0 0 .8rem;font-size:1rem;line-height:1.6;color:var(--ink);}
.quote blockquote p:first-child::before{content:"\201C";display:block;height:2.2rem;font-family:var(--f-serif);font-size:3.6rem;line-height:1;color:var(--wheat-2);}
.quote figcaption{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.88rem;color:var(--ink-2);}
.quote figcaption b{display:block;font-size:1rem;color:var(--ink);}
.news-list{list-style:none;margin:.4rem 0 0;padding:0;}
.news-list li{margin:0;padding:.55rem 0;border-top:1px solid var(--rule);font-size:.9rem;line-height:1.5;color:var(--ink-2);}
.news-list li:first-child{border-top:0;padding-top:.2rem;}
.news-list b{color:var(--ink);font-weight:700;}
@media (max-width:48rem){ .quotes{grid-template-columns:1fr;} }

/* ---------- One button for every standalone link ----------
   A link that stands on its own (a phone number, an email, a website, a
   poster, "read more") is a.lnk, drawn exactly like the contact buttons on
   Moving Here; links inside a sentence stay underlined text. The icon comes
   from where the link goes, so the markup never names one. */
.lnk-row{display:flex !important;flex-wrap:wrap;align-items:center;gap:.45rem;}
dd.lnk-row{margin-top:.15rem;}
a.lnk[href$=".pdf"]::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");}
:is(.svc-acts a,a.lnk):is([href*="youtube.com"],[href*="youtu.be"],[href*="facebook.com/reel"],[href*="facebook.com/watch"],[href*="/videos/"])::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10 8.5 5.5 3.5-5.5 3.5Z' fill='black'/%3E%3C/svg%3E");}
:is(.svc-acts a,a.lnk):is([href*="google.com/maps"],[href*="maps.google"])::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");}
a.lnk.lnk-back::before{transform:scaleX(-1);}
/* On the navy bands and photo heroes the button turns over: outline in light, number in wheat. */
:is(.band-field,.hero-photo) :is(.svc-acts a,a.lnk){background:transparent;border-color:var(--line-field,rgba(255,255,255,.2));color:var(--on-field);}
:is(.band-field,.hero-photo) :is(.svc-acts a,a.lnk):hover{background:rgba(255,255,255,.08);border-color:var(--on-field-2);}
.band-field :is(.svc-acts a,a.lnk)[href^="tel:"]{background:var(--wheat);border-color:var(--wheat);color:var(--on-wheat);}

/* A card that is itself the link: its label carries the same arrow. */
:root:not([data-surface]) .card .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.6rem;font-size:.86rem;font-weight:700;color:var(--ink);text-decoration:none;}
:root:not([data-surface]) .card .go::after{content:"";width:1rem;height:1rem;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease,ease);}
:root:not([data-surface]) a.card:hover .go{color:var(--ink);text-decoration:none;}
:root:not([data-surface]) a.card:hover .go::after{transform:translateX(3px);}

@media (prefers-reduced-motion:reduce){ :root:not([data-surface]) .card .go::after{transition:none;} }
:root:not([data-surface]) .card .go.lnk-row::after{display:none;}

/* Finger-sized hit areas for the small text links in the masthead and footer,
   without moving the text: the padding is taken back by a negative margin. */
:root:not([data-surface]) :is(.mast-util a,.foot-legal a){display:inline-block;padding-block:.65rem;margin-block:-.65rem;}
:root:not([data-surface]) .placeholder b{font-size:.72rem;}