/* TunmoreForLO — shared stylesheet.
   Extracted from index.html when the site went multi-page. Every page links
   this; there is no build step, so the nav and footer markup are duplicated
   per page by hand. Keep them in sync. */

:root{
  --pine:#10352A;
  --moss:#2F6B52;
  --bone:#F2EEE4;
  --copper:#A64F22;
  --ink:#1A1F1D;
  --body:#414A46;
  --line:#DCD6C8;
  --panel:#FFFFFF;
  --ph:#DFDACD;
  --phtext:#8A8579;
  /* Light text on dark. Copper is 1.07:1 over the hero screen-back and cannot
     clear 4.5:1 against any background dark enough for light text, so anything
     small and copper-coloured on dark uses sand instead: 4.52:1 on the hero,
     6.86:1 on flat pine. The .eyebrow and .tag labels that proved this out came
     off the last page on 18 Aug; keep the ratios for whatever needs them next. */
  --sand:#C9B8A4;
  --onpine:#D6D2C6; /* body copy on pine, 8.86:1 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Sticky footer. With the Get involved band gone the home page is short enough
   to end above the fold on a tall screen, and the bone body background showed
   as a slab under the footer. The column pushes the footer to the bottom of the
   viewport; on the home page the hero takes up the slack, since the band above
   the footer there is coloured and a bone gap would read as a mistake. */
body{
  min-height:100dvh;display:flex;flex-direction:column;
  margin:0;
  background:var(--bone);
  color:var(--body);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
}
.shell{max-width:1080px;margin:0 auto;padding:0 28px}
body > main{flex:1 0 auto}
.mainHome{display:flex;flex-direction:column}
.mainHome .hero{flex:1 0 auto}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--bone);color:var(--pine);
  padding:10px 16px;z-index:50;text-decoration:none;font-weight:500;
}
.skip:focus{left:8px;top:8px}

/* ---- the campaign lockup ----
   Transcribed from docs/brand/tunmore-identity-pine-2026-08-10.html.html. Kept
   as inline SVG rather than an exported raster: it is type on a fixed grid, so
   it stays crisp at any size and takes its colour from `currentColor`. The bar
   is the full width of TUNMORE by construction — do not size it independently,
   and do not stretch the lockup to fit a box. Needs Archivo 600 and 800, which
   is why every page's font link asks for the 800 weight. */
.mk{display:block;width:100%;height:auto;overflow:visible}
.mk text{font-family:"Archivo",sans-serif;fill:currentColor}
.mk .t-first{font-size:58px;font-weight:600;letter-spacing:20px}
/* 190, not the spec's 210. The spec asks for both "210 units" and "exactly 1000
   wide", and in Archivo those two cannot both hold: TUNMORE measures 1137.8 at
   210, so textLength was clawing back 23 units per gap (-0.11em) and welding the
   letters together. Width is the load-bearing half of that pair — the copper rule
   is the width of TUNMORE by construction — so the size gives way. At 190 the
   natural measure is 1029, leaving -0.026em: ordinary display tracking. */
.mk .t-last{font-size:190px;font-weight:800}
.mk .t-office{font-size:44px;font-weight:600;letter-spacing:6px}
.mk .h-first{font-size:50px;font-weight:600;letter-spacing:22px}
/* Same correction, plus the slot re-cut in the markup: NEIL now takes 200 units
   instead of 230 (its true measure), so TUNMORE starts at 224 and runs 776. The
   old 230/270 split left ~51 units of dead air mid-word — 22 of it NEIL's
   trailing letter-space, which the eye reads as a hole, not as tracking. */
.mk .h-last{font-size:147px;font-weight:800}
.mk .h-office{font-size:27px;font-weight:600;letter-spacing:4px}
.mk .t-bar{fill:var(--copper)}
.mk.mono1 .t-bar{fill:currentColor}  /* one-colour: copper drops out */

/* ---- nav ---- */
.nav{background:var(--pine);color:var(--bone);position:sticky;top:0;z-index:20}
.nav .shell{display:flex;align-items:center;gap:22px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
/* Horizontal variant — the office line is micro-type here, the same supporting
   role it plays on a palm card, so 250px is the floor before it stops reading.

   Clear space: the spec sets the minimum at the cap height of TUNMORE, 153 of
   the 1000 grid units — 15.3% of the mark's width, so 38px at 250px wide. The
   nav deliberately runs under that at 8% (20px), the figure the identity file
   itself uses for the horizontal lockup in its header mock-up. Honouring the
   full 153 here would make a sticky nav 131px tall, which costs more on a phone
   than the extra air buys. The sign-off below gets the full rule instead — that
   is where the lockup is the object rather than furniture.

   Left edge is the exception: the mark aligns with the page content beneath it,
   so the shell's 28px gutter is the clear space and must not be padded further. */
.mark{display:block;flex:0 0 auto;width:250px;margin-right:18px;color:var(--bone);text-decoration:none;line-height:0}
.mark:hover .t-bar{fill:#C2622C}
.mark .t-bar{transition:fill .15s}
.navlinks{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
/* Home page: no mark in the bar, so the links start at the left edge instead of
   being pushed right by the margin-left:auto that clears it. */
.navHome .navlinks{margin-left:0}
.navlinks a{color:var(--bone);opacity:.86;text-decoration:none;font-size:14.5px}
.navlinks a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.navlinks a[aria-current="page"]{
  opacity:1;text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--copper);
}
.cta{
  display:inline-block;background:var(--copper);color:var(--bone);
  padding:9px 18px;border-radius:4px;font-weight:500;font-size:14.5px;
  text-decoration:none;white-space:nowrap;transition:background .15s;
}
.cta:hover{background:#8E4119}
.ghost{
  display:inline-block;border:1.5px solid var(--pine);color:var(--pine);
  padding:9px 18px;border-radius:4px;font-weight:500;font-size:14.5px;
  text-decoration:none;transition:background .15s,color .15s;
}
.ghost:hover{background:var(--pine);color:var(--bone)}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.nav a:focus-visible{outline-color:var(--bone)}

/* ---- home hero ----
   Background is a pre-baked pine duotone (tools/screenback.py), darkened until
   bone text clears 7.5:1 over the region the copy occupies. Baked rather than
   blended at runtime so the ratio is verifiable and identical across browsers —
   see assets/img/hero-report.json. Text colours below are measured against that
   image; changing either means re-running the tool. */
.hero{
  padding:66px 0 58px;
  background-color:var(--pine);   /* fallback before the image loads */
  background-image:image-set(
    url("../img/hero-1920.webp") type("image/webp"),
    url("../img/hero-1920.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:50% 42%;
  color:var(--bone);
}
@media (max-width:1280px){
  .hero{background-image:image-set(
    url("../img/hero-1280.webp") type("image/webp"),
    url("../img/hero-1280.jpg") type("image/jpeg"))}
}
@media (max-width:768px){
  .hero{background-image:image-set(
    url("../img/hero-768.webp") type("image/webp"),
    url("../img/hero-768.jpg") type("image/jpeg"))}
}
@media (max-width:480px){
  .hero{background-image:image-set(
    url("../img/hero-480.webp") type("image/webp"),
    url("../img/hero-480.jpg") type("image/jpeg"))}
}
.hero .shell{display:flex;gap:46px;align-items:center;flex-wrap:wrap}
.heroCopy{flex:1 1 340px}
h1{
  font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(32px,5.2vw,52px);line-height:1.08;letter-spacing:-.025em;
  color:var(--pine);margin:0 0 20px;max-width:15ch;
}
.hero h1{color:var(--bone)}
.heroCopy .sub{font-size:19px;color:var(--bone);margin:0 0 28px;max-width:46ch}
.hero .ghost{border-color:var(--bone);color:var(--bone)}
.hero .ghost:hover{background:var(--bone);color:var(--pine)}
.hero a:focus-visible{outline-color:var(--bone)}
.heroBtns{display:flex;gap:12px;flex-wrap:wrap}
/* Landscape, not portrait. The source frame is 5:4, so a 4:5 crop threw away
   the sides and left the column narrow enough that the hero copy sat with a
   wide dead gap beside it. Wider basis, native ratio, no crop. */
.portrait{
  flex:0 0 440px;aspect-ratio:5/4;background:var(--ph);border-radius:6px;
  overflow:hidden;box-shadow:0 0 0 1px rgba(242,238,228,.22),0 18px 40px rgba(0,0,0,.34);
}
.portrait img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}

/* ---- home hero, brand-led variant ----
   The agreed structure: the lockup leads, then the slogan, then the quote.
   The lockup is wrapped in the h1, so the h1 rules above have to be undone —
   they set a font size, colour and 15ch measure that mean nothing around an
   SVG and would cap the mark's width at roughly nothing. */
.lockupHead{
  margin:0;max-width:none;font-size:0;line-height:0;letter-spacing:normal;
}
/* 420 is the ceiling, not the width. The mark is type on a 1000-unit grid, so
   it scales cleanly, but past ~420 in this column it starts crowding the
   photo and the office line outgrows the copy it is meant to sit above. */
.heroBrand .lockupHead .mk{max-width:420px;color:var(--bone)}
.slogan{
  font-family:"Archivo",sans-serif;font-weight:600;
  font-size:clamp(20px,2.7vw,27px);line-height:1.25;letter-spacing:-.01em;
  color:var(--bone);margin:30px 0 0;max-width:30ch;
  /* The two halves of the slogan are centred on each other, not on the column:
     fit-content keeps the block flush left with the lockup above it, while
     text-align centres the shorter first line over the longer second. */
  width:fit-content;text-align:center;
}
/* The hero's own buttons need more air here than in the old copy-led layout:
   the quote above them is set in Archivo and reads as a block, so without the
   gap the two run together into one grey mass. */
.heroBrand .heroBtns{margin-top:32px}
.heroBrand{padding:58px 0 62px}

/* ---- pull quote ----
   Built for the hero but written to work anywhere: pine copy on bone, bone on
   pine, with the copper rule doing the same job in both. Copper on the
   screen-back is only 1.07:1, which would fail as text — as a 3px rule it is
   ornament, not information, so the ratio does not apply. The attribution
   carries the name, and it is set in sand, which does clear AA on both. */
.pullquote{
  margin:30px 0 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--copper);max-width:48ch;
}
.pullquote p{
  font-family:"Archivo",sans-serif;font-weight:500;
  font-size:clamp(16px,1.9vw,18.5px);line-height:1.5;
  color:var(--pine);margin:0;max-width:none;
}
/* One treatment for every attribution. This was the .sig variant, used only on
   the quotes in Neil's own voice while the endorsements kept a small mono label;
   it is now the rule for all of them, names and titles alike, so every quote on
   the site signs off the same way. Archivo italic at the quote's own size, pine
   on bone at 11.6:1. */
.pullquote cite{
  display:block;margin-top:15px;
  font-family:"Archivo",sans-serif;font-weight:700;font-style:italic;
  font-size:17px;letter-spacing:0;text-transform:none;color:var(--pine);
}
.hero .pullquote p{color:var(--bone)}
.hero .pullquote cite{color:var(--bone)}

/* ---- interior page header ----
   Flat pine rather than the screen-back. The eyebrow this band used to carry
   measured 4.45:1 in sand over the brightest part of the photo, just under AA,
   against 6.86:1 on flat pine — so the flat colour stays, and anything small
   added here later has the headroom the photo would not have given it. */
.pagehead{background:var(--pine);color:var(--bone);padding:56px 0 50px}
.pagehead h1{
  color:var(--bone);margin:0;max-width:22ch;
  font-size:clamp(30px,4.6vw,44px);
}
/* One-line variant. The cap comes off and the type scales with the viewport
   rather than the 4.6vw the wrapped headings use, which holds the longest
   headline on the site to a single line down to about 700px. Below that it
   wraps — nowrap there would push the page sideways, which is worse. */
.pagehead h1.oneline{max-width:none;font-size:clamp(25px,3.65vw,39px)}
.pagehead .lede{font-size:19px;color:var(--onpine);margin:20px 0 0;max-width:52ch}
.pagehead + section.band{border-top:0}

/* ---- contact strip ----
   Was the campaign-updates signup. The email capture came off on 15 Aug, so the
   dummy input field went with it and the row is now heading, button, address.
   The heading takes the space the field used to hold, which keeps the button on
   the right where people already expect to find it. */
.capture{background:var(--moss);color:var(--bone)}
.capture .shell{display:flex;align-items:center;gap:16px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.capture h2{font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;margin:0;flex:1 1 auto}
/* Bone rather than copper: copper on moss is under 3:1 and this is text, not a
   rule. Underlined so it does not rely on colour alone to read as a link. */
.capture .mailto{
  color:var(--bone);font-size:14.5px;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--sand);
}
.capture .mailto:hover{text-decoration-color:var(--bone)}
/* The focus ring goes bone here for the same reason the text did: the default
   copper measures 1.12:1 against moss, which is no ring at all — a keyboard
   user tabbing across this band had nothing to follow. Bone is 5.42:1 and
   clears the 3:1 that WCAG 1.4.11 asks of a focus indicator. Matches the
   overrides already carried by .nav and .hero. */
.capture a:focus-visible{outline-color:var(--bone)}

/* ---- generic section ---- */
section.band{padding:64px 0;border-top:1px solid var(--line)}
h2.sec{
  font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.02em;
  color:var(--pine);margin:0 0 22px;max-width:20ch;
}
p{margin:0 0 18px;max-width:64ch}
p:last-child{margin-bottom:0}

/* ---- priorities: lead photograph and bullets ----
   Bullet points, not boxes — settled 15 Aug. The three-card grid that used to
   carry this page is gone. Cards give every item the same visual weight and a
   hard edge, which is right for three peers and wrong for six points under one
   heading — a list reads in order, which is what these are.

   The marker is drawn rather than left to list-style-type: the copper square
   ties the run to the rule under the lockup, and a real ::marker cannot be
   coloured separately in every browser we care about. */
/* Copy left, photograph right. The photo column is a fixed 360 rather than a
   share of the row: this is one landscape frame, and at half the page it read
   as the subject of the page instead of a picture of the person whose points
   these are. align-items:start pins it to the top of the copy — the list runs
   far taller, and a centred photo would float in the middle of nothing.

   The swap is done here, not in the markup, so the source stays photo-first and
   the stacked phone layout leads with the picture without a second rule. */
.priorow{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:start}
.priorow > .leadphoto{order:2}
.leadphoto{margin:0}
.leadphoto img{display:block;width:100%;height:auto;border-radius:6px;background:var(--ph)}
/* One measure for the whole column. The quote and the list carry their own
   max-widths for use elsewhere on the site, and side by side those two caps
   land at different pixel widths — the quote is Archivo at 18.5, the list is
   Plex at 16.5 — which reads as a ragged left column. The cap moves up here so
   both flush to the same edge, and any slack falls into the gutter. */
.priocopy{max-width:62ch}
.priocopy .pullquote,.priocopy .plist{max-width:none}
/* .pullquote carries a 30px top margin for use mid-page, which here pushed the
   opening quote below the top of the photograph beside it. The column starts
   flush so the two tops line up. */
.priocopy > :first-child{margin-top:0}
/* Side by side, the picture fills its column top to bottom rather than ending
   partway down and leaving a hole beside the closing quote. Centring it was the
   other option and looked worse — it empties the top right corner, which is
   where the eye enters the section. The 2:3 crop is taller than wide, so cover
   only trims the sides, and 40% keeps the faces off centre-frame. Desktop only:
   stacked on a phone the picture keeps its own proportions. */
@media (min-width:901px){
  .priorow{align-items:stretch}
  .priorow > .leadphoto{display:flex}
  .priorow .leadphoto img{height:100%;object-fit:cover;object-position:50% 40%}
}
@media (max-width:900px){
  .priorow{grid-template-columns:1fr;gap:0}
  .priorow > .leadphoto{order:0;max-width:420px;margin-bottom:34px}
}

.plist{list-style:none;margin:26px 0 0;padding:0;max-width:62ch}
.plist li{position:relative;padding-left:26px;margin-top:16px;font-size:16.5px;line-height:1.65}
.plist li:first-child{margin-top:0}
.plist li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--copper);border-radius:1px;
}

/* ---- home: the four pointer cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:32px}
.card{background:var(--panel);border-radius:6px;padding:26px 24px 28px;border-top:3px solid var(--copper)}
.card h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;color:var(--pine);margin:0 0 12px;line-height:1.25}
.card p{font-size:15.5px;margin-bottom:0}

/* ---- screened-back lockup ----
   A watermark, not a second logo. Pine at 8% on bone, one-colour (mono1) so the
   copper rule tints down with everything else rather than staying the one bright
   thing on the page. It sits bottom-right, opposite the buttons, and is sized to
   stay clear of the cards — those are opaque white, so anything behind them is
   simply lost. Whole, never cropped, and aria-hidden with pointer-events off: it
   is decoration, so it must not reach the accessibility tree or eat a click.
   Hidden below 860px, where there is no empty ground left to put it on. */
.watermarked{position:relative;overflow:hidden}
/* The extra floor is the watermark's room. Without it the mark tucks under the
   last card, which reads as a mistake rather than as a ground. Needs both
   classes to outrank section.band's own padding shorthand. */
.band.watermarked{padding-bottom:118px}
.watermarked > .shell{position:relative;z-index:1}
.wm{
  position:absolute;bottom:38px;width:min(340px,36%);
  /* Ranges to the content column, not the window: .shell is 1080 wide with a
     28px gutter, so its right edge sits (100% - 1080)/2 + 28 in from the
     section. Below 1080 the shell is fluid and the gutter alone is correct. */
  right:max(28px, calc((100% - 1080px) / 2 + 28px));
  color:var(--pine);opacity:.08;pointer-events:none;user-select:none;
}
@media (max-width:860px){.wm{display:none}}

/* ---- home: pointers to the interior pages ---- */
/* Four across needs a smaller minimum than the three-up .cards default:
   .shell leaves 1024px of content, and 4 x 250 + 3 x 20 gaps = 1060 wraps the
   fourth card onto its own row. */
.cards.four{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.linkcard{
  display:block;text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s;
}
.linkcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,53,42,.13)}
.linkcard h3{margin-bottom:10px}
.linkcard .go{
  display:block;margin-top:14px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--copper);
}

/* ---- timeline (signature) ---- */
.tl{margin-top:36px;border-left:2px solid var(--line);padding-left:0}
.tl .step{position:relative;padding:0 0 30px 30px}
.tl .step:last-child{padding-bottom:0}
.tl .step::before{
  content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--bone);border:2.5px solid var(--moss);
}
.tl .step.peak::before{background:var(--copper);border-color:var(--copper)}
.tl .yr{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.08em;color:var(--copper);display:block;margin-bottom:3px;
}
.tl .role{font-family:"Archivo",sans-serif;font-weight:600;font-size:17px;color:var(--pine);display:block;margin-bottom:5px}
.tl .note{font-size:15px;margin:0;max-width:56ch}

/* ---- about ---- */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-top:26px}
.factbox{background:var(--panel);border-radius:6px;padding:26px 24px;align-self:start}
.factbox h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;color:var(--pine);margin:0 0 14px}
.factbox dl{margin:0;font-size:15px}
.factbox dt{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--phtext);margin-top:14px;
}
.factbox dt:first-child{margin-top:0}
.factbox dd{margin:2px 0 0;color:var(--ink)}

/* ---- about: photo-led narrative ----
   The agreed structure: four sections, one photograph each, sides
   alternating down the page. Two equal columns rather than a photo sidebar —
   the pictures are the argument here as much as the copy is, and a narrow rail
   would make them illustration.

   Explicit 1fr 1fr instead of auto-fit: the columns must swap in a fixed
   rhythm, and auto-fit collapses on content width, which would put two photos
   on the same side whenever a paragraph ran short. */
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.story + .story{margin-top:64px}
.story figure{margin:0}
.story img{
  display:block;width:100%;height:auto;
  border-radius:6px;background:var(--ph);
}
/* The swap. Source order stays photo-then-copy on every row so that the
   stacked phone layout leads with the picture each time without a second set
   of order rules. */
.story.flip figure{order:2}
.story h2{
  font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(22px,2.9vw,29px);line-height:1.18;letter-spacing:-.02em;
  color:var(--pine);margin:0 0 18px;max-width:22ch;
}
.story p{font-size:16.5px;max-width:52ch}
/* One frame in the set is portrait. Left at full column width it stands about
   650px tall and dwarfs the three landscape rows either side of it, so it is
   capped and centred instead — the row keeps its height, the sequence keeps
   its rhythm. */
.story.tall figure{max-width:400px;margin:0 auto}

/* ---- social buttons ----
   Top right of the nav, every page — moved up out of the footer, where the
   accounts sat below the fold on every page and nobody following the campaign
   day to day would have found them. The mark is the campaign's; these are other
   people's, so they stay monochrome glyphs at the bar's own text colour rather
   than arriving in three competing brand colours beside the lockup. */
.socials{display:flex;gap:8px;align-items:center}
.socials a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid #3C433F;color:#D3D7D4;
  transition:background .15s,color .15s,border-color .15s;
}
.socials a:hover{background:#D3D7D4;color:var(--ink);border-color:#D3D7D4}
.socials svg{width:16px;height:16px;fill:currentColor;display:block}

/* In the nav they sit last, past the donate button, so they hold the corner
   itself. Two changes from the footer set: bone rather than the footer's grey,
   because the ground is pine and the rest of the bar is bone; and 30px rather
   than 34, since the row's height is set by the 250px lockup and full-size
   circles push the sticky bar taller than the mark needs it to be. */
.navSocials{margin-left:2px}
/* Home has no mark in the bar, so nothing pushes the right-hand end over: the
   links, the button and the buttons would all pack against the left edge. The
   auto margin moves here, which keeps the links at the left where that page
   wants them and still puts the buttons in the corner. */
.navHome .navSocials{margin-left:auto}
.nav .socials a{
  width:30px;height:30px;
  border-color:rgba(242,238,228,.32);color:var(--bone);
}
.nav .socials a:hover{background:var(--bone);color:var(--pine);border-color:var(--bone)}
.nav .socials svg{width:15px;height:15px}

/* ---- endorsements ---- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:28px}
.slot{
  height:76px;border:1px dashed #C6C0B1;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#9A9488;letter-spacing:.1em;
}

/* ---- forms ----
   Netlify takes the POST, so there is no JavaScript here and no validation
   beyond what the browser gives us for `required` and type="email". Labels sit
   above their inputs, never beside: at 375px there is no room for a two-column
   label/field pair, so stacking is the only arrangement that survives the
   narrow end without a second breakpoint.

   The measure is capped at 34rem rather than the .shell width. A single-line
   input as wide as a desktop window reads as a mistake, and a long field gives
   the eye no cue how much is expected in it. */
/* Form left, endorsement right. The form keeps its own 34rem cap, so the
   columns are sized to it rather than split evenly — an equal split would
   stretch the quote across ground the form never uses. */
.formrow{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:56px;align-items:start}
.formaside{margin-top:32px}
@media (max-width:900px){
  .formrow{grid-template-columns:1fr;gap:0}
  .formaside{margin-top:44px}
}

.form{margin-top:32px;max-width:34rem}
.form .fld{margin-bottom:26px}
.form label,.form legend{
  display:block;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:15px;color:var(--pine);margin-bottom:8px;padding:0;
}
/* "optional" rides on the label rather than sitting in the placeholder, which
   disappears the moment someone types and is invisible to a screen reader.
   Which only works if it can be read: --phtext was 3.17:1 on bone at 10.5px,
   so --body at 7.91:1, the same swap the quote attributions took. It still
   reads as an aside beside the pine label, which is 11.58:1. */
.form .opt{
  font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--body);
  margin-left:7px;
}
.form .hint{display:block;font-size:14px;color:var(--body);margin:-3px 0 8px}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea{
  display:block;width:100%;background:var(--panel);
  border:1px solid #C6C0B1;border-radius:4px;padding:12px 13px;
  font-family:inherit;color:var(--ink);line-height:1.5;
  /* 16px exactly. Anything smaller and iOS Safari zooms the page on focus,
     which strands the rest of the form off-screen. */
  font-size:16px;
}
.form textarea{resize:vertical;min-height:120px}
.form input:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--copper);outline-offset:2px;border-color:var(--moss);
}
.form fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}

/* Checkbox group. Two-up where there is room, one-up at 375px — auto-fit does
   that on its own, so no media query. Each label is the hit target, which is
   why the whole row is the flex container and not just the box. */
.checks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px 22px;margin-top:4px;
}
.checks label{
  display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;
  font-size:16px;color:var(--body);min-height:24px;
}
.checks input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--pine)}

/* .cta is written for anchors; a <button> needs the reset. Padding is bumped
   over the anchor's because this one is a touch target on a phone. */
.form button.cta{
  border:0;font-family:inherit;font-size:15.5px;padding:13px 28px;cursor:pointer;
}

/* The honeypot. A real, submittable field that no sighted user can reach, so
   anything that fills it in is a bot and Netlify bins the submission. Moved
   off-canvas rather than display:none because the cruder bots skip fields that
   are actually hidden — same trick as .skip, and it must never come back into
   view on focus the way .skip does. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- endorser list ----
   One list on get-involved.html: twenty-four endorsers, of whom the first
   seven carry a title and the rest do not. Set in three columns — Elaine's
   call on 21 Aug, and the reason she gave is the one that decides the row
   treatment below: the list is going to be added to between now and November.

   Multi-column rather than a grid of fixed tracks, despite "grid" being the
   word asked for. Columns fill top-to-bottom before moving right, which is the
   only order an alphabetical run can be read in, and they rebalance on their
   own as names arrive. A grid with a set number of rows would have to be
   re-counted by hand every time somebody signs up, and would get it wrong the
   first time it was forgotten.

   Name and title stack rather than sitting on one line. At three columns a row
   has about 310px, and the longest of these — "Liz Hartman — Former School
   Board Chair" — measures within about twenty of that. It would technically
   fit today and break the first time a longer name or title is added, and it
   would break by wrapping mid-row, which looks like a mistake rather than a
   layout. Stacked, every titled row is two lines by design and no addition can
   disturb it. The generated em dash goes with the change: it separated two
   things on one line, and there is no longer a line to separate them on.

   Title-less rows are simply one line, so the seventeen without a title need
   no special handling and nothing dangles where a title would have been.

   The top rule sits on the ul, not the first row: a per-row border would leave
   columns two and three opening with no rule above them, and the ul's own
   border draws one line across the full width instead. */
.endorse{
  list-style:none;margin:26px 0 0;padding:0;max-width:none;
  columns:3;column-gap:44px;border-top:1px solid var(--line);
}
.endorse li{padding:13px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.endorse li:first-child{border-top:0}
.endorse .nm{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:17px;color:var(--pine)}
.endorse .ttl{display:block;font-size:14.5px;line-height:1.4;color:var(--body)}
@media (max-width:760px){.endorse{columns:2;column-gap:36px}}
@media (max-width:460px){.endorse{columns:1}}

/* The lead row: an organisation at the top of a list of people.
   The Chamber of Commerce endorsement arrived 22 Aug and Neil asked for it
   above the names. It is not a name among names -- an organisation endorses by
   vote, and the row has to say so -- but it is still a row, and everything
   here is in service of keeping it one.

   column-span is the only structural difference. Left in the column flow it
   would sit at the top of column one, level with the tops of two and three,
   which is the top left of the list rather than the top of it. Spanning the
   full width puts the three columns underneath, so it reads as the row the
   list opens with. It stays inside the <ul>: still an item in the list, not a
   banner over one. Browsers without column-span -- none current -- fall back
   to it being first in column one, which is still first and still labelled,
   so there is nothing to guard.

   Beyond that it is a copper tag and four points of type. No panel, no rule of
   its own, no shadow. The white-card treatment drafted alongside this one was
   the louder answer and was not taken: an organisation among people needs to
   be told apart, not shouted about. The tag is the label idiom .pager and the
   form's "optional" already use, so no new device enters the page.

   The row keeps .endorse li's own padding-top and bottom border; only the
   bottom padding grows, by the four points the name gained. */
.endorse li.lead{column-span:all;padding-bottom:17px}
.endorse li.lead .tag{
  display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper);margin-bottom:7px;
}
.endorse li.lead .nm{font-size:21px}

/* ---- next-page pager ---- */
.pager{border-top:1px solid var(--line);padding:28px 0 64px}
.pager a{
  text-decoration:none;color:var(--pine);font-family:"Archivo",sans-serif;
  font-weight:600;font-size:18px;
}
.pager a:hover{text-decoration:underline;text-underline-offset:4px}
/* --body, not --phtext: 7.91:1 rather than 3.17:1 on bone. Same swap as the
   quote attributions and the form's "optional". */
.pager .lbl{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--body);
  margin-bottom:5px;font-weight:500;
}

/* ---- sign-off ----
   The one place the primary lockup is the whole object rather than furniture.
   Bone ground so it sits clear of both the pine band that often precedes it and
   the ink footer below. Copper on bone is 4.8:1 — large-text only, which the
   26-unit rule comfortably is. */
.signoff{background:var(--bone);border-top:1px solid var(--line);padding:56px 0 60px}
.signoff .mk{max-width:360px;margin:0 auto;color:var(--pine)}

/* ---- footer ---- */
footer.site{background:var(--ink);color:#B9BDBA;padding:26px 0;font-size:13.5px}
/* Three text items, one line each, and with the social buttons gone they fit
   on a single row again. align-items:center, not the flex default, so the
   "paid for" line and the domain sit on the footer nav's centre line. */
footer.site .shell{display:flex;justify-content:space-between;align-items:center;gap:16px 20px;flex-wrap:wrap}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap}
footer.site a{color:#D3D7D4;text-decoration:none}
footer.site a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- nav between a phone and a full desktop window ----
   The single-row bar needs roughly 975px: 268 for the mark and its margin,
   390 of links, 145 for the donate button, 108 of social buttons and 66 of
   shell gaps. The content column tops out at 1,024px — .shell is capped at
   1080 with a 28px gutter — so the row fits at full width with about 50px in
   hand, and below about 830px of content it cannot fit at all even after
   .navlinks has wrapped its own links onto a second line.

   That 50px is the whole margin, and the links are what eats it: this figure
   is for the four labels as they stand, and "Why I'm running" alone is 110 of
   the 390. A longer label here drops the bar to two rows at every width.

   Left alone, the outer wrap happens in source order, which puts the social
   buttons bottom left underneath the donate button — the exact outcome the
   phone rules below were written to prevent, just 200px too high up to be
   covered by them. So the rows are set explicitly here as well:

     with a mark   row 1 is the mark, then donate and the buttons pushed right
                   row 2 is the links, full width, flush left
     home page     row 1 is the links (there is no mark on this page)
                   row 2 is donate and the buttons, right

   .navlinks takes width:100% so the break lands in the same place every time
   rather than depending on how long the link labels happen to be. Sticky
   stays on here — two rows is about 140px, which a tablet can spare; the
   phone block below is where it comes off. */
@media (max-width:1080px){
  .navlinks,.navHome .navlinks{order:3;width:100%;margin-left:0}
  .navHome .navlinks{order:0}
  .nav .cta{order:2;margin-left:auto}
  .navHome .navSocials{margin-left:2px}
}

@media (max-width:640px){
  /* Phone nav. Four items in one wrapping row is three rows on a 375px screen,
     and left to source order the buttons land last — bottom left, under the
     donate button, which is neither the corner nor anywhere a thumb looks.

     So the rows are set explicitly with `order`: the mark and the buttons take
     the top row, the links the next, the donate button the last. The markup is
     untouched — it keeps the buttons after the CTA so that tab order on a
     desktop still runs links, donate, buttons, left to right as they appear.

     Row one measures 196 + 14 + 96 = 306px, which clears the 319px a 375
     screen leaves inside the gutters. At 360 it does not — the content box is
     304px, two short — so the buttons wrap to their own row, right-aligned,
     which is the graceful version of the same layout rather than a break. */
  /* Not sticky on a phone. Three rows stand about 180px tall, and pinned that
     is a quarter of a 667px screen held back from the page for the whole
     scroll — the bar costs more than it returns at this width. It scrolls away
     with the rest and comes back at the top, where the mark and the buttons
     are anyway. Every page is short enough that the footer's own nav is never
     far. Sticky resumes above 640, where the bar is a single 70px row. */
  .nav{position:static}
  .nav .shell{gap:14px;padding-top:14px;padding-bottom:14px}
  .mark{width:196px;order:1;margin-right:0}
  .navSocials,.navHome .navSocials{order:2;margin-left:auto}
  .navlinks,.navHome .navlinks{order:3;margin-left:0;gap:8px 16px;width:100%}
  /* margin-left is reset: the block above hands it an auto margin to push it
     right on row one, and here it leads a row of its own at the left edge. */
  .nav .cta{order:4;margin-left:0}
  /* 28px, not 30: the row above is the widest thing in the bar and these are
     the item that gives way, since the mark cannot shrink further and stay
     readable. Still a 28px target with 14px of gap around it. */
  .nav .socials{gap:6px}
  .nav .socials a{width:28px;height:28px}
  .nav .socials svg{width:14px;height:14px}
  .navlinks a{font-size:14px}
  /* 15.3% of 280px is 43px — the old 42px top clipped the rule by a hair. */
  .signoff{padding:46px 0 50px}
  .signoff .mk{max-width:280px}
  .hero{padding:44px 0 40px}
  /* The lockup gives way first on a phone. At 300px the office line is still
     legible and the slogan below it keeps its own weight; any larger and the
     mark eats the fold on its own. */
  .heroBrand .lockupHead .mk{max-width:300px}
  .slogan{font-size:20px;margin-top:24px}
  .portrait{flex:1 1 100%;max-width:440px;margin:0 auto}
  section.band{padding:48px 0}
  .pagehead{padding:40px 0 36px}
}

/* Two columns of story need roughly 420px each before the copy measure gets
   too tight to read; below that they stack. This is its own breakpoint rather
   than the 640 one above because the failure happens well before a phone. */
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:28px}
  .story + .story{margin-top:52px}
  /* Order is reset with the columns: stacked, every row leads with its photo. */
  .story.flip figure{order:0}
  .story.tall figure{max-width:400px}
}