/* ═══════════════════════════════════════════════════════════
   The Squeeze — design system
   Warm, dimensional, sunlit. Playful without being retro.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* brand — lifted from the badge logo */
  --forest-900:#07281B;
  --forest-800:#0C3A28;
  --forest-700:#124F37;
  --forest-600:#1A6E4C;
  --leaf:#3FA34D;
  --leaf-300:#8CC63F;

  --lemon:#FFD617;
  --lemon-300:#FFE87A;
  --lemon-600:#F2B705;
  --tangerine:#F27438;
  --coral:#E4572E;

  --cream:#FFFCF2;
  --cream-2:#FDF6E3;
  --cream-3:#F6EBD2;
  --ink:#123024;
  --ink-2:rgba(18,48,36,.74);
  --ink-3:rgba(18,48,36,.52);
  --hair:rgba(18,48,36,.10);
  --hair-2:rgba(18,48,36,.16);
  --hair-dark:rgba(255,252,242,.14);

  /* layered soft depth — not one hard offset */
  --e1:0 1px 2px rgba(7,40,27,.05), 0 2px 6px rgba(7,40,27,.04);
  --e2:0 2px 4px rgba(7,40,27,.05), 0 8px 20px -6px rgba(7,40,27,.10);
  --e3:0 4px 8px rgba(7,40,27,.06), 0 18px 40px -12px rgba(7,40,27,.18);
  --e4:0 8px 16px rgba(7,40,27,.07), 0 34px 70px -22px rgba(7,40,27,.28);
  --glow-lemon:0 12px 34px -10px rgba(242,183,5,.55);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --display:"Baloo 2",system-ui,sans-serif;
  --ui:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.62;
  font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--cream);
}
body.locked{overflow:hidden}
html:has(body.locked){overflow:hidden;overscroll-behavior:none}
/* The footer sits on the floor of the window, never partway up it. On a
   short page the spare height goes to <main>, instead of showing as a band
   of empty cream under the footer. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lemon-600);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10000;background:var(--forest-800);color:var(--cream);padding:.7rem 1.1rem;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ─────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.9rem,6.4vw,5.4rem);letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,4.3vw,3.4rem);letter-spacing:-.028em}
h3{font-size:1.35rem;font-weight:700;letter-spacing:-.012em}
h4{font-size:1.02rem;font-weight:700}
p{margin:0}

.grad{
  background:linear-gradient(102deg,var(--lemon-600) 0%,var(--tangerine) 48%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-size:.88rem;font-weight:700;letter-spacing:.02em;color:var(--forest-700);
  background:rgba(63,163,77,.10);border:1px solid rgba(63,163,77,.22);
  border-radius:999px;padding:.28rem .9rem;margin-bottom:1.1rem;
}
.eyebrow.on-dark{color:var(--lemon);background:rgba(255,214,23,.12);border-color:rgba(255,214,23,.28)}
.lede{font-size:1.16rem;color:var(--ink-2);max-width:56ch;margin-top:1.2rem;line-height:1.6}
.lede.on-dark{color:rgba(255,252,242,.82)}
.on-dark{color:var(--cream)}
.fine{font-size:.9rem;color:var(--ink-3);max-width:52ch;margin-top:.9rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;box-shadow:0 0 0 4px rgba(63,163,77,.18)}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  --bg:var(--forest-800); --fg:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  background:var(--bg);color:var(--fg);border:0;border-radius:999px;
  padding:.72rem 1.5rem;box-shadow:var(--e2);
  transition:box-shadow .28s var(--ease),filter .2s ease,translate .28s var(--spring);
}
.btn:hover{box-shadow:var(--e3);filter:brightness(1.06);translate:0 -2px}
.btn:active{translate:0 0;box-shadow:var(--e1)}
.btn-lemon{
  --bg:linear-gradient(140deg,var(--lemon) 0%,var(--lemon-600) 100%); --fg:var(--forest-900);
  box-shadow:var(--glow-lemon);
}
.btn-lemon:hover{box-shadow:0 18px 44px -10px rgba(242,183,5,.7)}
.btn-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--forest-600)}
.btn-lg{padding:.95rem 2rem;font-size:1.15rem}
.btn-sm{padding:.5rem 1.1rem;font-size:.92rem}

/* ── header ───────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:90;background:var(--cream);
  border-bottom:1px solid var(--hair);transition:box-shadow .3s var(--ease);
}
.site-head.stuck{box-shadow:0 8px 24px -20px rgba(7,40,27,.8)}
.head-inner{display:flex;align-items:center;gap:1rem;padding:.375rem 0;min-height:68px}

/* The mark from the coming-soon page, not the old badge. With no disc around
   it the lettering reads smaller at the same height, so it stands a little
   taller — and the header stays 68px, because the padding gives it back. */
.brand{flex:none;line-height:0;margin-right:.4rem}
.brand img{
  height:clamp(48px,4.6vw,56px);width:auto;transform-origin:center;
  filter:drop-shadow(0 2px 3px rgba(7,40,27,.14));
  transition:scale .26s var(--spring),filter .26s var(--ease);
}
.brand:hover img,.brand:focus-visible img{scale:1.07;filter:drop-shadow(0 5px 9px rgba(7,40,27,.18)) saturate(1.06)}
.brand:active img{scale:1.02;transition-duration:.09s}

/* the homepage hero owns search, so the header one stands down there */
body[data-page="home"] .head-search{display:none}

/* inline directory search — the header's job on every other page */
.head-search{
  flex:1 1 260px;min-width:0;max-width:430px;
  display:flex;align-items:center;gap:.6rem;
  background:var(--cream-2);border:1.5px solid var(--hair);border-radius:999px;
  padding:.15rem .9rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
.head-search:focus-within{background:#fff;border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.13)}
.head-search svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2.3;stroke-linecap:round}
.head-search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:.55rem 0;font-size:1rem;font-weight:500}
.head-search input::-webkit-search-cancel-button{display:none}
.head-search kbd{
  flex:none;font-family:var(--display);font-size:.78rem;font-weight:700;color:var(--ink-3);
  background:#fff;border:1px solid var(--hair);border-radius:6px;padding:.05rem .38rem;
}
.head-search:focus-within kbd{opacity:0}

/* The nav always sits hard against the buttons on the right, so it lands in
   exactly the same place on every page. It used to trail the search box, and
   re-centre itself on the pages that hide that box (home and Find a stand
   have their own search), so it jumped as you clicked from page to page. */
.nav{display:flex;gap:.15rem;flex:none;margin-left:auto}
.nav a{
  text-decoration:none;font-family:var(--display);font-weight:700;font-size:.98rem;
  padding:.45rem .8rem;border-radius:10px;white-space:nowrap;
  transition:background .18s,color .18s;
}
.nav a:hover{background:rgba(18,48,36,.055)}
.nav a[aria-current]{color:var(--forest-700);background:rgba(63,163,77,.12)}

.head-tools{display:flex;align-items:center;gap:.55rem;flex:none}
/* wide enough for a two-digit count from the start, so saving a tenth stand
   cannot widen it and nudge the nav beside it */
.savebtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:none;min-width:76px;
  border:1.5px solid var(--hair);border-radius:999px;padding:.45rem .75rem;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.savebtn:hover{border-color:var(--coral);background:rgba(228,87,46,.06)}
.savebtn .hrt{width:17px;height:17px;fill:none;stroke:var(--coral);stroke-width:2.2}
.savebtn.any .hrt{fill:var(--coral)}
.savebtn .n{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--hair);color:var(--ink-2);
  font-family:var(--display);font-size:.76rem;font-weight:700;display:grid;place-items:center;
}
.savebtn.any .n{background:var(--coral);color:#fff}
.head-cta .plus{font-size:1.1em;line-height:1;margin-top:-2px}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.28s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── atmosphere ───────────────────────────────────────── */
.sun{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  background:
    radial-gradient(46% 62% at 16% 6%,  rgba(255,214,23,.42) 0%, rgba(255,214,23,.16) 42%, transparent 72%),
    radial-gradient(40% 55% at 88% -6%, rgba(242,116,56,.24) 0%, rgba(242,116,56,.08) 46%, transparent 74%);
}

/* ── hero ─────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(2.6rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem);overflow:hidden;isolation:isolate}

.field{
  flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;
  background:var(--cream-2);border:1.5px solid var(--hair);border-radius:999px;padding:.1rem .3rem .1rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.field:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.field svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round}
.field input{flex:1;min-width:0;border:0;background:none;outline:none;padding:.7rem 0;font-size:1rem;font-weight:500}
.linkish{background:none;border:0;padding:0;cursor:pointer;font-size:.92rem;font-weight:700;color:var(--forest-700);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.linkish:hover{color:var(--coral)}
.ok-only{font-size:.8rem;font-weight:700;color:var(--lemon-600)}
.trust{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.trust li{font-size:.88rem;font-weight:700;color:var(--forest-700);background:rgba(63,163,77,.10);border:1px solid rgba(63,163,77,.2);border-radius:999px;padding:.28rem .85rem}

/* live board */
.board-today{
  position:relative;overflow:hidden;border-radius:var(--r-xl);color:var(--cream);
  background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);
  box-shadow:var(--e4);padding:1.6rem 1.6rem 1.4rem;
}
.board-today::before{
  content:"";position:absolute;right:-80px;top:-80px;width:250px;height:250px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--lemon) 0 42deg,transparent 42deg 45deg,var(--lemon) 45deg 87deg,transparent 87deg 90deg,var(--lemon) 90deg 132deg,transparent 132deg 135deg,var(--lemon) 135deg 177deg,transparent 177deg 180deg,var(--lemon) 180deg 222deg,transparent 222deg 225deg,var(--lemon) 225deg 267deg,transparent 267deg 270deg,var(--lemon) 270deg 312deg,transparent 312deg 315deg,var(--lemon) 315deg 357deg,transparent 357deg 360deg);
  opacity:.14;
}
.bt-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding-bottom:.9rem;border-bottom:1px solid var(--hair-dark)}
.bt-live{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;color:var(--lemon)}
.bt-live .dot{background:var(--leaf-300);box-shadow:0 0 0 4px rgba(140,198,63,.22);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.bt-date{font-size:.84rem;font-weight:700;color:rgba(255,252,242,.5)}
.bt-list{position:relative;list-style:none;margin:0;padding:0}
.bt-list li{display:flex;align-items:baseline;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--hair-dark)}
.bt-list a{display:contents;text-decoration:none}
.bt-town{font-family:var(--display);font-size:1.16rem;font-weight:700;flex:none}
.bt-dots{flex:1;border-bottom:1px dotted rgba(255,252,242,.28);transform:translateY(-5px)}
.bt-name{font-size:.9rem;font-weight:600;color:rgba(255,252,242,.68);text-align:right}
.bt-foot{
  position:relative;margin-top:1.2rem;display:flex;align-items:center;gap:.9rem;
  background:linear-gradient(140deg,var(--lemon) 0%,var(--lemon-600) 100%);color:var(--forest-900);
  border-radius:var(--r);padding:.85rem 1.1rem;text-decoration:none;box-shadow:var(--e2);
  transition:translate .28s var(--spring),box-shadow .28s var(--ease);
}
.bt-foot:hover{translate:0 -2px;box-shadow:var(--e3)}
.bt-foot .sw-label{display:block;font-family:var(--display);font-size:.8rem;font-weight:700;opacity:.72}
.bt-foot strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:800;line-height:1.1}
.bt-foot .arw{margin-left:auto;font-size:1.3rem}

/* ── stats ────────────────────────────────────────────── */
.stats{padding:clamp(2rem,4vw,3rem) 0 clamp(2.6rem,5vw,4rem)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:1.35rem 1.5rem;box-shadow:var(--e1);
}
.stat::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--sc,var(--lemon))}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.3rem,4.4vw,3.1rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.stat b i{font-style:normal;font-size:.4em;color:var(--ink-3)}
.stat b span{font:inherit;color:inherit}
.stat>span{display:block;font-size:.9rem;font-weight:700;color:var(--ink-3);margin-top:.35rem}
.stat em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-3);margin-top:.5rem;font-weight:500}

/* ── sections ─────────────────────────────────────────── */
.section{padding:clamp(3rem,6vw,5.5rem) 0;position:relative}
.section.tint{background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);border-block:1px solid var(--hair)}
/* a section that ends on a centred button already reads as finished — the button
   carries its own breathing room, so the seam below it does not need full padding */
.section.tuck{padding-bottom:clamp(1.5rem,2.6vw,2.6rem)}
.sec-cta{text-align:center;margin-top:2.4rem}
/* heading and its supporting line read as one block, not a heading on the left
   with a paragraph stranded in the opposite corner */
.sec-head{display:grid;gap:.65rem;margin-bottom:2.4rem;max-width:64ch}
.sec-head.center{justify-items:center;text-align:center;margin-inline:auto;max-width:56ch}
.sec-head.center>div{max-width:none;display:grid;gap:.65rem;justify-items:center}
.sec-note{font-size:1.06rem;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0}

/* ── chips ────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.chip{
  background:#fff;border:1.5px solid var(--hair);border-radius:999px;cursor:pointer;
  font-family:var(--display);font-size:.94rem;font-weight:700;padding:.4rem 1.05rem;
  display:inline-flex;align-items:center;gap:.45rem;
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s;
}
.chip:hover{border-color:var(--forest-600);box-shadow:var(--e1)}
.chip[aria-pressed="true"],
.chip[aria-selected="true"]{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
.chip .sw{width:10px;height:10px;border-radius:50%;background:var(--c)}

/* ── stand cards ──────────────────────────────────────── */
/* min(300px,100%): a 300px floor is wider than a 320px phone's content area,
   which pushed every stand grid sideways. The track now shrinks to fit. */
.stand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1.5rem}

.card{
  position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--e1);overflow:hidden;display:flex;
  transition:box-shadow .3s var(--ease),border-color .3s,translate .3s var(--spring);
}
.card:hover{box-shadow:var(--e3);border-color:var(--hair-2);translate:0 -4px}

/* the whole card is one link, laid out as a column so footers align */
.card-face{
  display:flex;flex-direction:column;flex:1;min-width:0;
  text-decoration:none;color:inherit;
}

/* photo */
.card-shot{position:relative;display:block;line-height:0;background:var(--cream-2)}
.card-shot img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:scale .55s var(--ease);
}
.card:hover .card-shot img{scale:1.05}
.card-shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(7,40,27,.22));
}
/* A real photo shows whole, whatever shape the phone took it in. The frame
   keeps its ratio so the row still lines up; the photo sits inside it, and a
   blurred copy of itself fills whatever the shape leaves over, so the frame
   never shows a hard letterbox. The placeholders are drawn for the frame and
   keep filling it. --shot is set on the frame by whatever writes the card. */
/* overflow:hidden keeps the blur inside the frame — without it the soft edge
   ran down into the card's town and county line */
.has-photo{isolation:isolate;overflow:hidden}
.has-photo::before{
  content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:var(--shot) center / cover no-repeat;filter:blur(22px) saturate(1.2) brightness(.86);
}
.card-shot.has-photo img{object-fit:contain}
/* on the photo the chip must beat .status.open / .status.weekend, hence the
   extra class on each selector */
.status.on-shot{
  position:absolute;left:.85rem;bottom:.85rem;z-index:3;line-height:1.55;
  backdrop-filter:none;box-shadow:0 2px 10px rgba(7,40,27,.28);
}
.status.on-shot.open,
.status.on-shot.weekend{background:#FFFDF6}
.status.on-shot.open{color:#15691F}
.status.on-shot.open i{background:#2E9E3A}
.status.on-shot.weekend{color:#7A5303}
.status.on-shot.weekend i{background:#E39A05}

/* body */
.card-body{display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.3rem 1.25rem}
.card-town{
  font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
/* a stand's name is whatever its owner typed: one unbroken word longer than
   the card wraps inside it rather than running out of the side */
.card h3{font-size:1.4rem;line-height:1.18;letter-spacing:-.018em;overflow-wrap:anywhere}
/* two lines are reserved whether the address needs them or not, so every card
   below this point lines up across the row */
.card-spot{
  display:flex;gap:.4rem;font-size:.92rem;color:var(--ink-2);line-height:1.45;margin-top:.1rem;
  min-height:calc(2 * 1.45 * .92rem);
}
.card-spot svg{width:14px;height:14px;flex:none;fill:var(--coral);margin-top:.28em}
.card-spot > span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem;min-height:1.35rem}
.mini{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  border-radius:999px;padding:.1rem .6rem;white-space:nowrap;
}
.give-mini{background:rgba(255,214,23,.28);color:#7A5A03}
.tip-mini{background:rgba(228,87,46,.12);color:var(--coral)}

/* footer, pinned so every card lines up */
.card-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;
  margin:0 1.3rem 1.25rem;padding-top:.95rem;border-top:1px solid var(--hair);
  margin-top:auto;
}
.card-hours{font-size:.88rem;font-weight:700;color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-price{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--tangerine);flex:none}

/* heart */
.heart{
  position:absolute;top:.8rem;right:.8rem;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.9);
  border:1px solid var(--hair);box-shadow:var(--e1);transition:transform .3s var(--spring),background .2s;
}
.heart:hover{transform:scale(1.12);background:#fff}
.heart svg{width:18px;height:18px;fill:none;stroke:var(--coral);stroke-width:2.2}
.heart[aria-pressed="true"] svg{fill:var(--coral)}
.heart[aria-pressed="true"]{animation:pop-heart .38s var(--spring)}
@keyframes pop-heart{40%{transform:scale(1.3)}}

/* ── county index ─────────────────────────────────────── */
.county-tools{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem}
.county-tools .field{max-width:360px;background:#fff}
.county-count{font-family:var(--display);font-weight:700;color:var(--ink-3);margin-bottom:1.3rem}
.county-groups{display:grid;gap:2.4rem}
.cgroup{position:relative;padding-top:1.2rem;border-top:3px solid var(--c)}
.cg-head{display:grid;gap:.2rem;margin-bottom:1.1rem}
.cg-head h3{display:flex;align-items:center;gap:.6rem;font-size:1.6rem}
.cg-head h3 .sw{width:13px;height:13px;border-radius:50%;background:var(--c);flex:none}
.cg-where{font-family:var(--display);font-size:.85rem;font-weight:700;color:var(--c)}
.cg-blurb{font-size:.96rem;color:var(--ink-2)}
.cg-meta{font-size:.88rem;font-weight:700;color:var(--ink-3)}
.cg-meta b{color:var(--leaf)}
/* The county links — the All 77 counties page, and "Also in …" on every
   county page. A column is wide enough for the widest county, its seat and a
   two-digit count on one line (Pottawatomie · Shawnee, measured at 234px),
   and no name is ever cut short: should a longer one come along, the seat
   drops whole onto the line below. The browser decides how many columns fit;
   balanceCountyLists() in site.js then deals the counties down them, A to Z,
   with the same number in every column or one fewer — never three full
   columns and a lone county in the fourth. */
.cg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));gap:.3rem .5rem}
.cg-list a{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45rem;text-decoration:none;padding:.45rem .75rem;
  border-radius:10px;border:1px solid transparent;transition:background .18s,border-color .18s;
}
.cg-list a:hover{background:#fff;border-color:var(--hair)}
.cg-list b{font-family:var(--display);font-size:1.04rem;font-weight:700;overflow-wrap:anywhere}
.cg-list span{font-size:.82rem;font-weight:500;color:var(--ink-3);overflow-wrap:anywhere}
.cg-list em{font-style:normal;font-family:var(--display);font-size:.78rem;font-weight:700;background:var(--lemon);border-radius:999px;padding:.02rem .5rem;flex:none;margin-left:auto}
.cg-list a.has b{color:var(--forest-700)}

/* ── steps ────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1.3rem}
.steps li{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.7rem 1.5rem;box-shadow:var(--e1)}
.step-n{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--forest-900);
  background:linear-gradient(140deg,var(--lemon),var(--lemon-600));box-shadow:var(--glow-lemon);
}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--ink-2);font-size:.98rem}

/* ── home: Got a stand? (2026-10-17) ─────────────────────
   Three steps of equal weight strung on a dotted lemon trail, a big pale
   number behind each, then the guides as a forest panel of chips. Prefixed gs-. */
.gs-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.gs-steps::before{content:"";position:absolute;left:12%;right:12%;top:3.1rem;border-top:3px dotted rgba(242,183,5,.75);z-index:0}
.gs-step{position:relative;z-index:1;overflow:hidden;padding:1.5rem 1.4rem 1.45rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
  transition:transform .2s var(--ease),box-shadow .2s}
.gs-step:hover{transform:translateY(-3px);box-shadow:var(--e2)}
.gs-n{position:absolute;right:1.1rem;top:.55rem;font-family:var(--display);font-size:4.6rem;font-weight:800;line-height:1;color:rgba(242,183,5,.2);pointer-events:none}
.gs-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:1rem;border-radius:16px;
  background:linear-gradient(140deg,var(--lemon),var(--lemon-600));box-shadow:var(--glow-lemon);color:var(--forest-900)}
.gs-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-step h3{margin:0 0 .35rem;font-size:1.25rem;line-height:1.2}
.gs-step p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.gs-help{margin-top:1.2rem;padding:1.4rem 1.5rem 1.5rem;border-radius:var(--r-lg);background:var(--forest-800);box-shadow:var(--e2);
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.4rem;align-items:center}
.gs-help-hd b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:800;line-height:1.2;color:var(--lemon)}
.gs-help-hd span{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.75)}
.gs-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.gs-links a{display:inline-block;padding:.5rem .95rem;line-height:1.3;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-family:var(--display);font-size:.9rem;font-weight:700;color:#fff;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.gs-links a i{margin-left:.3rem;font-style:normal;font-weight:600;color:rgba(255,255,255,.62)}
.gs-links a:hover{background:var(--lemon);border-color:var(--lemon);color:var(--forest-900)}
.gs-links a:hover i{color:rgba(18,48,36,.65)}
.gs-links .is-all a{background:var(--lemon);border-color:var(--lemon);color:var(--forest-900)}
@media (max-width:900px){
  .gs-steps{grid-template-columns:minmax(0,1fr)}
  .gs-steps::before{display:none}
  .gs-help{grid-template-columns:minmax(0,1fr);gap:1rem}
}
@media (max-width:520px){
  .gs-step{padding:1.15rem 1.1rem}
  .gs-help{padding:1.15rem 1.1rem 1.2rem}
}

/* ── dark panel ───────────────────────────────────────── */
.panel{
  position:relative;overflow:hidden;color:var(--cream);
  background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 50% at 8% 0%,rgba(63,163,77,.35),transparent 62%),
             radial-gradient(36% 46% at 96% 100%,rgba(255,214,23,.18),transparent 66%);
}
.panel>*{position:relative}

/* ── modal ────────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:200;display:block;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
/* The wash is its own fixed layer, not a background on .scrim, so the panel is
   never a child of a backdrop-filtered box — that would soften its own text.
   The blur is only declared while open, so a closed modal costs the page nothing. */
.scrim::before{content:"";position:fixed;inset:0;background:rgba(7,40,27,.52)}
.scrim.on::before{
  backdrop-filter:blur(10px) saturate(.82);
  -webkit-backdrop-filter:blur(10px) saturate(.82);
}
.scrim.on{opacity:1;pointer-events:auto}
/* min-height flex wrapper: centres a short panel, scrolls a tall one cleanly */
.scrim-pad{
  position:relative;z-index:1;
  min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,5vh,3.5rem) 1.2rem;
}
/* the panel is one continuous piece — it has no scroller of its own */
.modal{
  width:min(100%,720px);background:var(--cream);
  border-radius:var(--r-xl);box-shadow:var(--e4);position:relative;
  translate:0 18px;scale:.985;transition:translate .38s var(--spring),scale .38s var(--spring);
}
.scrim.on .modal{translate:0 0;scale:1}
/* close is anchored in the panel's own top-right corner and scrolls with it */
.modal-x-dock{
  position:absolute;top:0;right:0;z-index:12;height:0;
  display:flex;justify-content:flex-end;pointer-events:none;
}
.modal-x,.drawer-x{
  flex:none;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,252,242,.93);border:1px solid rgba(7,40,27,.10);
  box-shadow:var(--e2);
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.modal-x svg,.drawer-x svg{width:15px;height:15px;fill:none;stroke:var(--forest-800);stroke-width:2.4;stroke-linecap:round}
.modal-x:hover,.drawer-x:hover{transform:scale(1.05);background:var(--cream);box-shadow:var(--e3)}
.modal-x:active,.drawer-x:active{transform:scale(.97)}
.modal-x:focus-visible,.drawer-x:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
.modal-x{pointer-events:auto;position:relative;top:14px;right:14px}
.modal:has(.sm-shot) .modal-x{box-shadow:var(--e3)}
/* The right padding clears the close button, which sits 14px in and is 40px
   wide. Without it a long stand name wrapped straight underneath the X. */
.modal-hd{
  position:relative;padding:2rem 4.3rem 1.4rem 2rem;color:var(--cream);
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-hd::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--ac,var(--lemon))}
.modal-bd{border-radius:0 0 var(--r-xl) var(--r-xl)}
.modal > #modalBody > *:first-child{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.modal-hd .eyebrow{margin-bottom:.7rem}
.modal-hd h2{font-size:clamp(1.9rem,4vw,2.6rem);overflow-wrap:anywhere}
.modal-hd .where{font-weight:700;color:rgba(255,252,242,.72);margin-top:.3rem}
.modal-bd{padding:1.6rem 2rem 2rem;display:grid;gap:1.3rem}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1rem}
.kv div{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:.85rem 1rem}
.kv dt{font-size:.78rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.kv dd{margin:.2rem 0 0;font-family:var(--display);font-size:1.1rem;font-weight:700}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.hours li{display:flex;justify-content:space-between;padding:.45rem .8rem;background:#fff;border:1px solid var(--hair);border-radius:10px;font-weight:600}
.hours b{font-family:var(--display)}
.modal-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}

/* forms */
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font-weight:700;font-size:.94rem}
/* the stand's photo: a dashed tile that becomes the picture once one is chosen
   (photoPicker() in js/site.js, 2026-10-16) */
.ph{display:grid;gap:.35rem}
.ph > .lbl{font-weight:700;font-size:.94rem}
.ph-tile{position:relative;display:grid;place-items:center;min-height:150px;border-radius:16px;cursor:pointer;overflow:hidden;
  border:2px dashed rgba(18,48,36,.22);background:var(--cream-2);transition:border-color .2s,background .2s}
.ph-tile:hover{border-color:var(--lemon-600);background:#FFF8D9}
.ph-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ph-in:focus-visible + .ph-img,.ph-in:focus-visible ~ .ph-empty{outline:3px solid var(--lemon-600);outline-offset:-3px}
.ph-empty{display:grid;justify-items:center;gap:.2rem;padding:1rem;text-align:center;pointer-events:none}
.ph-empty svg{width:34px;height:34px;fill:none;stroke:var(--forest-700);stroke-width:1.7;stroke-linejoin:round;margin-bottom:.15rem}
.ph-empty b{font-family:var(--display);font-size:1.02rem;color:var(--forest-800)}
.ph-empty small{font-size:.84rem;font-weight:600;color:var(--ink-3)}
.ph-img{display:block;width:100%;max-height:260px;object-fit:contain;background:#fff;pointer-events:none}
.ph-img[hidden],.ph-empty[hidden],.ph-change[hidden]{display:none}
.ph.has-img .ph-tile{border-style:solid;border-color:var(--hair-2);min-height:0}
.ph-change{position:absolute;right:.6rem;bottom:.6rem;padding:.35rem .8rem;border-radius:999px;pointer-events:none;
  font-family:var(--display);font-size:.84rem;font-weight:800;color:var(--forest-900);background:var(--lemon);box-shadow:0 4px 12px -4px rgba(7,40,27,.35)}
.ph.is-busy .ph-tile{opacity:.6;pointer-events:none}
.ph-note{margin:0}
/* a label a script has hidden stays hidden: "Which town is it in?" showed on every
   new listing form because display:grid above beat the hidden attribute (2026-10-14) */
.form label[hidden]{display:none}
.form input,.form textarea,.form select{
  border:1.5px solid var(--hair);border-radius:12px;background:#fff;padding:.7rem .9rem;
  font-size:1rem;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.form textarea{min-height:120px;resize:vertical;font-family:inherit}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.86rem;color:var(--ink-3)}
.ok-msg{background:rgba(63,163,77,.12);border:1px solid rgba(63,163,77,.3);border-radius:var(--r);padding:1rem 1.1rem;font-weight:700;color:var(--forest-700)}

/* ── footer ───────────────────────────────────────────── */
.site-foot{background:var(--forest-900);color:var(--cream);padding:clamp(2.8rem,5vw,4.2rem) 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(1.8rem,4vw,3.2rem)}
/* the guides: one quiet band under the columns, a label and a run of pills
   that wraps however wide the screen is (2026-10-14) */
.site-foot .foot-guides{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem 1.6rem;
  margin-top:clamp(2rem,4vw,2.8rem);padding:1rem 1.2rem;border-radius:18px;
  background:rgba(255,252,242,.04);border:1px solid var(--hair-dark)}
.site-foot .foot-guides h4{margin:0;white-space:nowrap}
.site-foot .foot-guides h4 a{color:var(--lemon);font-weight:inherit}
.site-foot .foot-guides h4 a:hover{color:#fff}
.foot-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.site-foot .foot-pills a{display:inline-flex;align-items:center;padding:.3rem .8rem;border-radius:999px;font-size:.86rem;font-weight:700;line-height:1.3;
  color:rgba(255,252,242,.8);border:1px solid rgba(255,252,242,.16);background:rgba(255,252,242,.03);
  transition:color .18s,border-color .18s,background .18s}
.site-foot .foot-pills a:hover{color:var(--lemon);border-color:rgba(255,214,23,.55);background:rgba(255,214,23,.08)}
@media (max-width:780px){
  .site-foot .foot-guides{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:1rem .9rem}
  .site-foot .foot-guides h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
  .foot-pills{justify-content:center;gap:.4rem}
  .site-foot .foot-pills a{font-size:.84rem;padding:.28rem .7rem}
}
/* the same mark as the header, with the soft lemon glow it has on the
   coming-soon page — without it the dark outline sinks into the green */
.foot-logo{height:100px;width:auto;filter:drop-shadow(0 0 20px rgba(255,214,23,.24))}
.foot-tag{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--lemon);margin-top:1rem;line-height:1.35}
/* Facebook and Ko-fi under the tagline: quiet outlined pills, each led by a small
   lemon coin carrying the mark; the coin warms and the text turns lemon on hover (2026-10-14) */
.foot-socials{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.foot-social{display:inline-flex;text-decoration:none;align-items:center;gap:.55rem;min-height:40px;padding:.3rem .95rem .3rem .32rem;border-radius:999px;
  font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:.01em;color:rgba(255,252,242,.82);
  background:rgba(255,252,242,.04);border:1px solid rgba(255,252,242,.15);
  transition:color .2s,border-color .2s,background .2s}
.fs-coin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 58%,var(--lemon-600));box-shadow:inset 0 -2px 0 rgba(0,0,0,.14);
  transition:rotate .35s var(--spring),scale .25s var(--spring)}
.fs-coin svg{width:17px;height:17px;overflow:visible}
.fs-coin .fs-fill{fill:var(--forest-900)}
.fs-coin .fs-line{fill:none;stroke:var(--forest-900);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.site-foot .foot-social:hover,.foot-social:hover{color:var(--lemon);border-color:rgba(255,214,23,.5);background:rgba(255,214,23,.07)}
.foot-social:hover .fs-coin{rotate:-10deg;scale:1.06}
.foot-social:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .fs-coin{transition:none} .foot-social:hover .fs-coin{rotate:none;scale:1} }
.site-foot h4{color:var(--lemon);margin-bottom:.9rem}
.site-foot nav{display:grid;gap:.5rem;align-content:start}
.site-foot a{color:rgba(255,252,242,.78);text-decoration:none;font-weight:600;width:fit-content;transition:color .18s}
.site-foot a:hover{color:var(--lemon)}
.foot-fine{font-size:.86rem;color:rgba(255,252,242,.55);margin-top:1rem;max-width:36ch}
/* team-only door: quiet enough that nobody else notices it */
.admin-link{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:rgba(255,252,242,.34);
  transition:color .18s;
}
.admin-link:hover{color:rgba(255,252,242,.7)}
.foot-dash{margin:0 .45rem;color:rgba(255,252,242,.28)}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--hair-dark);font-size:.86rem;color:rgba(255,252,242,.55)}
.report-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(255,252,242,.08);
  border:1px solid var(--hair-dark);border-radius:999px;padding:.44rem 1.1rem;cursor:pointer;
  font-weight:700;font-size:.88rem;color:rgba(255,252,242,.85);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),
             translate .2s var(--ease),box-shadow .2s var(--ease);
}
.report-btn:hover{
  background:rgba(255,214,23,.15);border-color:rgba(255,214,23,.45);color:var(--lemon);
  translate:0 -2px;box-shadow:0 10px 24px -12px rgba(255,214,23,.55);
}
.report-btn:active{translate:0 0;box-shadow:none}
.report-btn:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
/* the flag leans into it */
.rb-flag{display:inline-block;transform-origin:bottom left;transition:rotate .25s var(--ease)}
.report-btn:hover .rb-flag{rotate:-14deg}

/* ── page hero (interior pages) ───────────────────────── */
.phero{position:relative;overflow:hidden;isolation:isolate;padding:1.35rem 0 clamp(2rem,4vw,3rem)}
.phero > .wrap{position:relative;z-index:1}
.phero .lede{max-width:60ch}
.crumbs{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-size:.9rem;font-weight:700;color:#3F5C4B;
  margin:0 0 clamp(1.5rem,3.4vw,2.6rem);
}
.crumbs a{text-decoration:none;color:#1A6E4C}
.crumbs a:hover{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.crumbs > span{color:#7D9086}
.crumbs > span:last-child{color:#3F5C4B}

/* ── motion ───────────────────────────────────────────── */
.rise{animation:rise .8s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;translate:0 20px}}
.reveal{opacity:0;transition:opacity .6s var(--ease)}
.reveal.in{opacity:1}

/* ── responsive ───────────────────────────────────────── */
@media(max-width:1040px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:1100px){ .head-search{max-width:280px} .nav a{padding:.45rem .6rem;font-size:.94rem} }
/* below 960px the search box would be squeezed under 200px and cut off its
   own hint, so it steps aside; the nav does not move either way */
@media(max-width:960px){ .head-search{display:none} }
@media(max-width:780px){
  .nav{display:none}
  .burger{display:flex}
  .head-inner{justify-content:space-between;gap:.5rem}
  .head-cta{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  /* left and body only — the header's right side has to keep clear of the X */
  .modal-bd{padding-inline:1.3rem}
  .modal-hd{padding-left:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── layout helpers ───────────────────────────────────── */
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.btn-ghost.on-ghost{--fg:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(255,252,242,.28)}
.btn-ghost.on-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lemon)}
.board-today.soft{background:rgba(255,252,242,.07);box-shadow:none;border:1px solid rgba(255,252,242,.16)}
.board-today.soft::before{display:none}

.heart-big{gap:.55rem}
.heart-big .hrt{width:19px;height:19px;stroke:currentColor}
.heart-big[aria-pressed="true"] .hrt{fill:currentColor}

/* ── scrollbars: hidden everywhere, scrolling still works ─ */
html{scrollbar-width:none;-ms-overflow-style:none}
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-corner{background:transparent;display:none}

/* these all wrap, so they can never push the page sideways — no clipping needed */
.chips,.trust,.btn-row,.flavors{flex-wrap:wrap;overflow:visible}

/* ── toasts ───────────────────────────────────────────── */
.toasts{
  position:fixed;z-index:300;left:50%;bottom:1.4rem;translate:-50% 0;
  display:flex;flex-direction:column-reverse;gap:.6rem;
  width:min(100% - 2rem,420px);pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:.7rem;pointer-events:auto;
  background:var(--forest-800);color:var(--cream);
  border-radius:16px;padding:.85rem 1rem;box-shadow:var(--e4);
  font-weight:600;font-size:.96rem;line-height:1.45;
  /* a copied-link fallback puts a whole URL in here, and a URL has no spaces */
  overflow-wrap:anywhere;min-width:0;
  opacity:0;translate:0 14px;scale:.97;
  transition:opacity .32s var(--ease),translate .38s var(--spring),scale .38s var(--spring);
}
.toast.in{opacity:1;translate:0 0;scale:1}
.toast .t-ico{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:800;background:rgba(255,252,242,.16);
}
.toast .t-x{
  margin-left:auto;flex:none;background:none;border:0;cursor:pointer;
  color:rgba(255,252,242,.55);font-size:.9rem;padding:.1rem .2rem;line-height:1;
  transition:color .18s;
}
.toast .t-x:hover{color:var(--cream)}
.t-ok  .t-ico{background:var(--leaf);color:#fff}
.t-warn{background:#8A3410}
.t-warn .t-ico{background:var(--lemon);color:var(--forest-900)}
.t-heart .t-ico{background:var(--coral);color:#fff}

/* invalid field marker (replaces the browser bubble) */
.form .bad{border-color:var(--coral)!important;box-shadow:0 0 0 4px rgba(228,87,46,.16)!important}

@media(max-width:520px){ .toasts{bottom:.9rem} }

/* ── location tags & tips ─────────────────────────────── */
.loc-tag{
  display:inline-flex;align-items:center;gap:.35rem;width:fit-content;
  font-family:var(--display);font-size:.82rem;font-weight:700;
  padding:.16rem .7rem;border-radius:999px;white-space:nowrap;
}
.loc-tag.drive{background:rgba(242,183,5,.18);color:#8A6503}
.loc-tag.pub{background:rgba(63,163,77,.14);color:#1E7A2E}
.card-meta-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tip-chip{
  font-family:var(--display);font-size:.82rem;font-weight:700;
  background:rgba(228,87,46,.12);color:var(--coral);
  padding:.16rem .7rem;border-radius:999px;white-space:nowrap;
}
.tip-total{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:linear-gradient(140deg,rgba(255,214,23,.22),rgba(242,116,56,.14));
  border:1px solid rgba(242,183,5,.35);border-radius:var(--r);padding:1rem 1.2rem;
}
.tip-total span{font-weight:700;color:var(--ink-2)}
.tip-total b{font-family:var(--display);font-size:1.9rem;font-weight:800;line-height:1}
.tip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.tip-amt{
  flex:1;min-width:70px;background:#fff;border:1.5px solid var(--hair);border-radius:14px;
  padding:.7rem .6rem;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;
  transition:border-color .18s,background .18s,color .18s;
}
.tip-amt:hover{border-color:var(--forest-600)}
.tip-amt.on{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
/* the line to paste on Ko-fi, set out like a ticket stub so it reads as a thing to take with you */
.tip-msg{display:grid;gap:.35rem;padding:.85rem 1rem;border-radius:var(--r);background:#fff;border:1.5px dashed var(--hair-2)}
.tip-msg-k{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.tip-msg-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.tip-msg code{font-family:var(--display);font-size:1.12rem;font-weight:800;color:var(--forest-800);overflow-wrap:anywhere}
.tip-msg .linkish{flex:none}

/* ═══════════════════════════════════════════════════════
   LISTING PAGE
   ═══════════════════════════════════════════════════════ */
.listing-hero{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.listing-hero h1{font-size:clamp(2.6rem,5.4vw,4.2rem);overflow-wrap:anywhere}
.pillbadge.big{font-size:.9rem;padding:.3rem .95rem}
.listing-where{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.85rem;
  font-size:1.08rem;font-weight:600;color:var(--ink-2);
}
.listing-where span{color:var(--ink-3)}
/* the dot travels with the county, so it never hangs alone at the end of a line */
.listing-where .lw-county{display:inline-flex;gap:.6rem;white-space:nowrap;color:var(--ink-2)}

.listing{
  display:grid;grid-template-columns:minmax(0,1fr) 350px;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.6rem) 0 clamp(2.6rem,5vw,4rem);
}
.listing-main{display:grid;gap:0}

/* at a glance */
/* auto-fit would happily leave the fourth tile stranded on its own line at
   the wrong width, so the splits are chosen rather than computed */
.glance{
  list-style:none;margin:0 0 2.2rem;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;
}
.glance:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.glance:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){ .glance{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){
  .glance:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}
@media(max-width:480px){ .glance{grid-template-columns:1fr} }
.glance li{
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:.9rem 1rem;display:grid;gap:.1rem;box-shadow:var(--e1);
}
.g-ico{font-size:1.1rem;line-height:1}
.g-k{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:.35rem}
.g-v{font-family:var(--display);font-size:1.05rem;font-weight:700;line-height:1.25}

/* content blocks */
.blk{padding:1.9rem 0;border-top:1px solid var(--hair)}
.blk:first-of-type{border-top:0;padding-top:0}
.blk h2{font-size:1.55rem;margin-bottom:.9rem}
.prose{font-size:1.08rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
.byline{margin-top:1rem;font-size:.96rem;color:var(--ink-3)}
.byline b{color:var(--ink);font-family:var(--display)}

.flavors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.flavors li{
  font-family:var(--display);font-weight:700;font-size:1rem;
  background:linear-gradient(140deg,rgba(255,214,23,.28),rgba(255,214,23,.12));
  border:1px solid rgba(242,183,5,.35);border-radius:999px;padding:.32rem 1rem;
}

.sched{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-width:460px}
.sched li{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:.6rem .95rem;
}
.sched b{font-family:var(--display);font-size:1.02rem}
.sched span{font-weight:600;color:var(--ink-2)}
.sched li.now{
  background:linear-gradient(140deg,rgba(63,163,77,.16),rgba(63,163,77,.07));
  border-color:rgba(63,163,77,.4);
}
.sched li.now b::after{content:" · today";font-size:.8rem;color:var(--leaf);font-weight:700}

.addr{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:1.1rem 1.25rem;max-width:520px;box-shadow:var(--e1)}
.addr-line{font-family:var(--display);font-size:1.2rem;font-weight:700;margin-top:.6rem;line-height:1.35}

/* sticky sidebar */
.listing-side{position:sticky;top:92px;display:grid;gap:1rem}
.tipcard{
  background:linear-gradient(155deg,var(--forest-700),var(--forest-900));
  color:var(--cream);border-radius:var(--r-lg);padding:1.4rem;
  box-shadow:var(--e4);display:grid;gap:.75rem;
}
.tc-k{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,252,242,.6)}
.tc-v{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1;color:var(--lemon)}
.tc-note{font-size:.86rem;color:rgba(255,252,242,.6);text-align:center}
.tc-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.tc-row .btn{--fg:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(255,252,242,.26);padding:.6rem .8rem;font-size:.94rem}
.tc-row .btn:hover{box-shadow:inset 0 0 0 1.5px var(--lemon)}
.tc-row .heart-big[aria-pressed="true"]{--fg:var(--coral);box-shadow:inset 0 0 0 1.5px var(--coral)}

.sidecard{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--e1)}
.sidecard h3{font-size:1.1rem;margin-bottom:.9rem}
.sidecard dl{margin:0;display:grid;gap:.55rem}
.sidecard dl div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--hair)}
.sidecard dl div:last-child{border-bottom:0;padding-bottom:0}
.sidecard dt{font-size:.86rem;color:var(--ink-3);font-weight:600}
.sidecard dd{margin:0;font-family:var(--display);font-weight:700;font-size:.98rem;text-align:right}
.side-link{display:inline-block;margin-top:1.1rem;font-weight:700;font-size:.94rem;color:var(--forest-700);text-decoration:none}
.side-link:hover{color:var(--coral)}

@media(max-width:940px){
  .listing{grid-template-columns:1fr}
  .listing-side{position:static;order:-1}
  .tc-row{grid-template-columns:1fr 1fr}
}

/* ── custom select ────────────────────────────────────── */
.sel{position:relative}
.sel select{
  position:absolute;top:0;left:0;width:1px;height:1px;
  padding:0;border:0;margin:0;opacity:0;pointer-events:none;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;appearance:none;
}
.sel-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  background:#fff;border:1.5px solid var(--hair);border-radius:12px;
  padding:.7rem .9rem;cursor:pointer;text-align:left;font-size:1rem;font-weight:600;
  transition:border-color .18s,box-shadow .18s;
}
.sel-btn:hover{border-color:var(--hair-2)}
.sel[data-open] .sel-btn,
.sel-btn:focus-visible{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14);outline:none}
.sel.is-empty .sel-val{color:var(--ink-3);font-weight:500}
.sel.bad .sel-btn{border-color:var(--coral);box-shadow:0 0 0 4px rgba(228,87,46,.16)}
/* the form-wide .bad glow is for the button above, not the square wrapper
   around it, which drew a second, square-cornered frame (2026-10-18) */
.form .sel.bad{border-color:transparent!important;box-shadow:none!important}
.sel-btn .chev{width:19px;height:19px;flex:none;color:var(--ink-3);transition:transform .24s var(--ease)}
.sel[data-open] .sel-btn .chev{transform:rotate(180deg);color:var(--forest-700)}

.sel-list{
  position:absolute;top:calc(100% + .45rem);left:0;right:0;z-index:40;
  margin:0;padding:.35rem;list-style:none;
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--e4);
  max-height:min(56vh,368px);overflow-y:auto;overscroll-behavior:contain;
  display:none;
}
.sel[data-open] .sel-list{display:block;animation:selIn .18s var(--ease)}
.sel[data-open].is-long::after{
  content:"";position:absolute;left:1px;right:1px;bottom:1px;height:38px;z-index:41;
  border-radius:0 0 15px 15px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);
}
@keyframes selIn{from{opacity:0;translate:0 -6px}}

.sel-opt{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.58rem .8rem;border-radius:11px;cursor:pointer;font-weight:600;font-size:.98rem;
  transition:background .12s,color .12s;
}
.sel-opt[data-placeholder]{color:var(--ink-3);font-weight:500}
.sel-opt:hover,.sel-opt[data-active]{background:var(--cream-2)}
.sel-opt[aria-selected="true"]{background:rgba(63,163,77,.13);color:var(--forest-700);font-weight:700}
.sel-opt[aria-selected="true"]::after{content:"✓";font-weight:800;color:var(--leaf)}
.sel-opt[aria-selected="true"][data-active]{background:rgba(63,163,77,.2)}

/* ── address picker ────────────────────────────────────────
   Real Oklahoma addresses and places as you type, in a list drawn like the
   dropdowns above. A picked address turns the pin green and says the town
   and county it settled. */
.ap{display:grid;gap:.35rem;min-width:0}
.ap-box{position:relative}
.ap-box > svg{
  position:absolute;left:.85rem;top:50%;translate:0 -50%;width:18px;height:18px;pointer-events:none;
  fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
}
.form .ap-q{width:100%;padding-left:2.5rem}
.form .ap.is-set .ap-q{border-color:rgba(63,163,77,.5);background:#FBFEF7}
.ap.is-set .ap-box > svg{stroke:var(--leaf)}
.form .ap.is-bad .ap-q{border-color:var(--coral);box-shadow:0 0 0 4px rgba(228,87,46,.16)}
.ap-pop{
  position:absolute;top:calc(100% + .45rem);left:0;right:0;z-index:45;overflow:hidden;
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--e4);
  animation:selIn .18s var(--ease);
}
.ap-list{list-style:none;margin:0;padding:.35rem;max-height:min(48vh,330px);overflow-y:auto;overscroll-behavior:contain}
.ap-opt{display:flex;align-items:center;gap:.65rem;padding:.5rem .65rem;border-radius:11px;cursor:pointer;transition:background .12s}
.ap-opt:hover,.ap-opt[aria-selected="true"]{background:var(--cream-2)}
.ap-o-ico{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--cream-3);color:var(--forest-700);transition:background .12s,color .12s;
}
.ap-o-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-opt[aria-selected="true"] .ap-o-ico{background:var(--lemon);color:var(--forest-900)}
.ap-o-txt{display:grid;min-width:0;line-height:1.3}
/* an address and its town are never cut short — a long one wraps */
.ap-o-txt b{font-size:.97rem;font-weight:700;overflow-wrap:anywhere}
.ap-o-txt small{font-size:.82rem;font-weight:600;color:var(--ink-3);overflow-wrap:anywhere}
.ap-say{padding:.65rem .75rem;font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.ap-credit{margin:0;padding:.38rem .85rem .45rem;border-top:1px solid var(--hair);background:var(--cream);font-size:.72rem;font-weight:600;color:var(--ink-3)}
.ap-credit a{color:inherit}
.ap-got{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.88rem;font-weight:600;color:var(--forest-700)}
.ap-got:empty{display:none}
.ap-got svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--leaf);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ap-got b{font-weight:800}
@media (pointer:coarse){ .ap-opt{padding:.68rem .7rem} }

/* how to spot it, under the address wherever the address shows */
.sm-note{margin:-.45rem 0 .7rem 1.4rem;font-size:.92rem;font-weight:600;color:var(--ink-3)}
.addr-note{margin-top:.25rem;font-weight:600;color:var(--ink-2)}

.sub-note{display:block;margin-top:.15rem;font-size:.84rem;font-weight:600;color:var(--ink-3)}

/* an owner's edit in the admin queue: what changes, old then new */
.sub.is-edit{box-shadow:inset 4px 0 0 var(--lemon-600),var(--e1)}
.edit-mini{background:var(--forest-800);color:var(--lemon)}
.sub-h{margin:.8rem 0 .4rem;font-family:var(--ui);font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.sub-diff{margin:0;display:grid;gap:.35rem}
.sub-diff div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.6rem;padding:.45rem .6rem;border-radius:10px;background:var(--cream)}
.sub-diff dt{padding-top:.12rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.sub-diff dd{margin:0;display:grid;gap:.15rem;font-size:.92rem;overflow-wrap:anywhere}
.sub-diff del{color:var(--ink-3);text-decoration-color:rgba(228,87,46,.6)}
.sub-diff ins{text-decoration:none;font-weight:700;color:var(--forest-700)}
.sub-diff i{font-weight:600;color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════
   OWNER DASHBOARD — /manage/
   The owner's own page: the listing and its switches up top, how it is
   doing underneath, then contests, then the details behind Edit.
   ═══════════════════════════════════════════════════════ */
.od-sec{padding:clamp(1rem,2.4vw,1.8rem) 0 clamp(2rem,4vw,3rem)}
.od{container-type:inline-size;display:grid;gap:.9rem}
.od-wait{padding:2rem 0;text-align:center;font-weight:700;color:var(--ink-3)}

/* the header: the stand, its state, and the two switches */
.od-head{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem 1.1rem;
  padding:1.15rem 1.2rem 0;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e2);
}
.od-head::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--ac)}
.od-shot{width:96px;height:72px;object-fit:cover;border-radius:14px}
.od-kick{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.od-id{min-width:0}
.od-id h1{margin-top:.1rem;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.025em;overflow-wrap:break-word;hyphens:auto}
.od-where{font-size:.95rem;font-weight:700;color:var(--ink-2)}
.od-state{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.2rem .45rem;margin-top:.45rem;padding:.22rem .7rem;border-radius:999px;font-size:.84rem}
.od-state i{width:8px;height:8px;border-radius:50%;background:currentColor}
.od-state b{font-weight:800}
.od-state span{font-weight:600;opacity:.85}
.od-state.is-live{background:rgba(63,163,77,.13);color:#1B6B2A}
.od-state.is-live i{animation:blink 2.4s ease-in-out infinite}
.od-state.is-paused{background:rgba(242,183,5,.2);color:#6E4F02}
.od-state.is-removed{background:rgba(228,87,46,.13);color:#A8341A}
.od-state.is-closed{background:rgba(18,48,36,.08);color:var(--ink-2)}
.od-state.is-waiting{background:rgba(255,214,23,.24);color:#6E4F02}
.od-head-act{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;align-self:start}
.od-view{gap:.4rem}
.od-view .ai{width:15px;height:15px;stroke-width:2.1}

.od-sw{
  grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem;
  margin:0 -1.2rem;padding:.1rem 1.2rem;border-top:1px solid var(--hair);background:var(--cream);
}
.od-sw-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.od-sw-txt{display:grid;gap:.1rem;min-width:0}
.od-sw-txt b{font-family:var(--display);font-size:1.02rem;font-weight:800}
.od-sw-txt small{font-size:.84rem;font-weight:600;line-height:1.35;color:var(--ink-3)}
.od-confirm{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;
  margin:0 0 .8rem;padding:.75rem .9rem;border-radius:14px;background:#FFF1EA;border:1px solid rgba(228,87,46,.3);
}
.od-confirm[hidden]{display:none}
.od-confirm p{font-size:.92rem;font-weight:600;color:#7A2A12}
.od-confirm-act{display:flex;flex-wrap:wrap;gap:.5rem}
.od-yes{--bg:var(--coral);--fg:#fff}

/* a proper switch: on is lemon, and coral for taking a listing down */
.tgl{
  position:relative;flex:none;width:52px;height:30px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--cream-3);box-shadow:inset 0 0 0 1.5px var(--hair-2);transition:background .2s,box-shadow .2s;
}
.tgl i{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(7,40,27,.28);transition:translate .24s var(--spring);
}
.tgl[aria-checked="true"]{background:var(--lemon-600);box-shadow:none}
.tgl[aria-checked="true"] i{translate:22px 0}
.tgl-down[aria-checked="true"]{background:var(--coral)}
.tgl:disabled{opacity:.4;cursor:not-allowed}
.tgl:focus-visible{outline:3px solid var(--lemon-600);outline-offset:3px}

/* the numbers */
.od-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .8rem;margin-top:.5rem}
.od-label h2{font-size:1.25rem;letter-spacing:-.015em}
.od-label span{font-size:.84rem;font-weight:700;color:var(--ink-3)}
.od-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.od-card{min-width:0;padding:.95rem 1rem 1.05rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1)}
.od-card > header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .8rem;margin-bottom:.8rem}
.od-card h3{font-size:1.1rem}
.od-card > header span{font-size:.82rem;font-weight:700;color:var(--ink-3)}
.od-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.8rem}

/* search → click → view */
.fn{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fn li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .6rem}
.fn-k{display:flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;color:var(--ink-2)}
.fn-k .ai{width:17px;height:17px;color:var(--ink-3)}
.fn li > b{font-family:var(--display);font-size:1.2rem;font-weight:800}
.fn-bar{grid-column:1 / -1;height:10px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.fn-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lemon),var(--lemon-600))}
.fn li:nth-child(2) .fn-bar i{background:linear-gradient(90deg,var(--leaf-300),var(--leaf))}
.fn li:nth-child(3) .fn-bar i{background:linear-gradient(90deg,var(--tangerine),var(--coral))}
.fn small{grid-column:1 / -1;font-size:.78rem;font-weight:600;color:var(--ink-3)}
.fn-more{margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--hair);font-size:.84rem;font-weight:600;color:var(--ink-3)}

/* contests */
.od-contests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
/* entering the contests: three ticks and the button for whatever is missing (2026-10-16) */
.od-enter{margin-bottom:.8rem;border-top:4px solid var(--lemon-600)}
.od-enter.is-in{border-top-color:var(--leaf);background:linear-gradient(180deg,rgba(63,163,77,.06),#fff 60%)}
.od-steps{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.od-steps li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.6rem .7rem;border-radius:13px;background:var(--cream);border:1px solid var(--hair)}
.od-steps li > i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:800;color:#fff;background:var(--cream-3);box-shadow:inset 0 0 0 2px var(--hair-2)}
.od-steps li.is-done > i{background:var(--leaf);box-shadow:none}
.od-steps li span{display:grid;gap:.05rem;min-width:0}
.od-steps b{font-family:var(--display);font-size:1rem;font-weight:800}
.od-steps small{font-size:.84rem;font-weight:600;color:var(--ink-3);line-height:1.35}
.od-steps li .btn{white-space:nowrap}
.od-enter-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;margin:.75rem 0 0;font-size:.88rem;font-weight:700}
.od-enter-foot a{color:var(--forest-700)}
.od-short{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.45rem}
.od-short li{position:relative;padding:.55rem .75rem .55rem 2rem;border-radius:12px;background:var(--cream-2);font-size:.94rem;line-height:1.45}
.od-short li::before{content:"";position:absolute;left:.8rem;top:1.05rem;width:8px;height:8px;border-radius:50%;background:var(--lemon-600)}
.od-short-link{margin:0 0 1rem;font-weight:800}
.od-short-link a{color:var(--forest-700)}
@media (max-width:520px){
  .od-steps li{grid-template-columns:30px minmax(0,1fr)}
  .od-steps li .btn{grid-column:2;justify-self:start}
}
.od-contest{
  display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,translate .24s var(--spring);
}
.od-contest:hover{border-color:var(--hair-2);box-shadow:var(--e2);translate:0 -2px}
.od-c-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,214,23,.24);color:#8A6503}
.od-c-ico .ai{width:22px;height:22px}
.od-c-txt{flex:1;display:grid;min-width:0;line-height:1.3}
.od-c-txt small{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.od-c-txt b{margin-top:.1rem;font-family:var(--display);font-size:1.3rem;font-weight:800}
.od-c-txt span{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.od-contest > i{font-style:normal;font-weight:800;color:var(--ink-3);transition:translate .2s var(--ease)}
.od-contest:hover > i{translate:3px 0;color:var(--forest-700)}

/* the details, as people see them */
.od-pending{
  display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;border-radius:14px;
  background:#FFF8DB;border:1px solid rgba(242,183,5,.45);font-size:.9rem;font-weight:600;color:#6E4F02;
}
.od-pending .ai{width:18px;height:18px;margin-top:.1rem;color:#8A6503}
.od-listing{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:1.1rem}
.od-l-shot{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:14px}
.od-l-body{display:grid;gap:.5rem;min-width:0}
.od-l-body h3{font-size:1.35rem}
.od-l-addr{display:flex;gap:.45rem;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.od-l-addr .ai{width:17px;height:17px;margin-top:.22rem;color:var(--coral)}
.od-l-addr small{display:block;font-size:.86rem;color:var(--ink-3)}
.od-l-meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.92rem;font-weight:700}
.od-l-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.od-l-give{font-size:.9rem;color:var(--ink-2)}
.od-l-give b{margin-right:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.od-l-story{
  font-size:.92rem;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.od-l-act{margin-top:.3rem}
.od-l-act .btn .ai{width:17px;height:17px;stroke-width:2.2}
.od-foot{margin-top:.3rem;text-align:center;font-size:.86rem;font-weight:600;color:var(--ink-3)}
.od-form textarea{min-height:0}

/* signed out: ask for a link right here */
.od-ask{max-width:460px;margin:0 auto;padding:1rem 0 2rem;display:grid;justify-items:center;gap:.7rem;text-align:center}
.od-ask h1{font-size:clamp(1.7rem,4.5vw,2.3rem)}
.od-ask > p{color:var(--ink-2)}
.od-ask .form{width:100%;margin-top:.4rem;text-align:left}
.od-ask .ok-msg{width:100%}
.od-ask-note{font-size:.92rem;color:var(--ink-2)}

@container (min-width:1000px){ .od-kpis{grid-template-columns:repeat(6,minmax(0,1fr))} }
@container (max-width:760px){
  .od-grid{grid-template-columns:1fr}
  .od-sw{grid-template-columns:1fr}
  .od-sw-row + .od-sw-row{border-top:1px solid var(--hair)}
}
@container (max-width:640px){
  .od-listing{grid-template-columns:1fr}
  .od-l-shot{max-height:220px}
  .od-contests{grid-template-columns:1fr}
}
@container (max-width:560px){
  .od-head{grid-template-columns:auto minmax(0,1fr);padding:.95rem .95rem 0}
  .od-shot{width:72px;height:56px;border-radius:12px}
  .od-head-act{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
  .od-sw{margin:0 -.95rem;padding:.1rem .95rem}
  .od-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .od-l-act .btn{width:100%}
}
/* a small phone: the photo becomes a short banner across the top of the card,
   so a long stand name gets the whole width and never breaks mid-word (2026-10-14) */
@container (max-width:440px){
  .od-head{grid-template-columns:minmax(0,1fr);row-gap:.7rem}
  .od-shot{width:100%;height:110px;border-radius:12px}
  .od-id h1{font-size:clamp(1.45rem,7.2vw,1.9rem)}
  .od-state{display:flex;width:fit-content;max-width:100%}
}
/* thumb-sized on a touch screen: the switches, the hours, signing out */
@media (pointer:coarse){
  .tgl::before{content:"";position:absolute;inset:-9px -6px}
  .od-head-act .linkish{padding:.6rem .3rem;margin:-.6rem -.3rem}
}
@media (hover:none){ .od-contest:hover, .od-contest:hover > i{translate:none} }

/* ── status chip (replaces the old eyebrow / pillbadge) ── */
.status{
  display:inline-flex;align-items:center;gap:.45rem;width:fit-content;
  font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:-.005em;
  padding:.2rem .8rem .2rem .6rem;border-radius:999px;white-space:nowrap;
}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.status.open{background:rgba(63,163,77,.14);color:#1B7A2B}
.status.open i{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.status.weekend{background:rgba(242,183,5,.2);color:#8A6503}
.modal-hd .status,.listing-hero .status{
  background:rgba(255,252,242,.15);color:var(--cream);
}
.modal-hd .status.open i,.listing-hero .status.open i{background:var(--leaf-300)}
.modal-hd .status.weekend i,.listing-hero .status.weekend i{background:var(--lemon)}
.listing-hero .status{background:rgba(63,163,77,.16);color:#1B7A2B}
.listing-hero .status.weekend{background:rgba(242,183,5,.2);color:#8A6503}

/* hero kicker: a label, not a pill */
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:.92rem;font-weight:700;
  color:var(--forest-700);background:none;border:0;padding:0;margin-bottom:1.1rem;
}
.kicker .dot{width:9px;height:9px;box-shadow:0 0 0 4px rgba(63,163,77,.16)}

/* section headings now carry themselves */
.sec-head h2{margin-top:0}

/* file input */
.filefield{
  border:1.5px dashed var(--hair-2);border-radius:12px;background:var(--cream-2);
  padding:.85rem .9rem;font-size:.94rem;font-weight:600;cursor:pointer;width:100%;
  transition:border-color .2s,background .2s;
}
.filefield:hover{border-color:var(--forest-600);background:#fff}
.filefield::file-selector-button{
  font-family:var(--display);font-weight:700;font-size:.9rem;cursor:pointer;
  background:var(--forest-800);color:var(--cream);border:0;border-radius:999px;
  padding:.4rem 1rem;margin-right:.8rem;
}
.filefield::file-selector-button:hover{background:var(--forest-700)}
.form-hint{font-size:.85rem;color:var(--ink-3);font-weight:500}

/* the "recommended" marker on a form field */
.rec{
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(140deg,var(--lemon),var(--lemon-600));color:var(--forest-900);
  border-radius:999px;padding:.08rem .6rem;margin-left:.4rem;vertical-align:middle;
}
.form .lbl{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}

/* ── stand photo (sidebar) ────────────────────────────── */
.stand-photo{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--e2);background:var(--cream-2);
}
.stand-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.stand-photo.has-photo img{object-fit:contain}
.stand-photo figcaption{
  position:absolute;left:.7rem;right:.7rem;bottom:.7rem;
  background:rgba(255,252,242,.94);border-radius:12px;
  padding:.5rem .8rem;font-size:.86rem;font-weight:700;color:var(--ink-2);
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
}
.stand-photo figcaption a{color:var(--forest-700);text-decoration:underline;text-underline-offset:3px}
.stand-photo figcaption a:hover{color:var(--coral)}
.stand-photo.is-placeholder img{filter:saturate(.92)}
/* a tablet: the photo and the tip card side by side instead of one tall stack,
   so "Tip this stand" is on the first screen (2026-10-14) */
@media (min-width:600px) and (max-width:940px){
  .listing-side{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
  .listing-side > :not(.stand-photo):not(.tipcard){grid-column:1 / -1}
}

/* ── empty / blank states ─────────────────────────────── */
.blank{
  text-align:center;max-width:52ch;margin-inline:auto;padding:clamp(2rem,5vw,3.4rem) 1rem;
  display:grid;gap:.6rem;justify-items:center;
}
.blank-ico{
  font-size:2.4rem;line-height:1;width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:.4rem;
  background:radial-gradient(circle,rgba(255,214,23,.35),rgba(255,214,23,.08));
}
.blank h3{font-size:clamp(1.5rem,3vw,2rem)}
.blank p{color:var(--ink-2);font-size:1.02rem}
.blank .btn-row{margin-top:1.1rem}

/* ── county page ──────────────────────────────────────── */
.county-hero{padding-bottom:clamp(2rem,4vw,3rem)}
.county-sub{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;margin-top:.8rem;font-size:.95rem;color:var(--ink-3);font-weight:600}
.county-sub b{color:var(--ink)}
.region-chip{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:700;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);
  border-radius:999px;padding:.16rem .8rem;font-size:.88rem;
}
.region-chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}


/* ── county coverage ──────────────────────────────────── */
.coverage{margin-bottom:2rem}
.cov-bar{
  height:14px;border-radius:999px;background:var(--cream-3);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(7,40,27,.12);
}
.cov-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--lemon),var(--tangerine));
  transition:width 1.4s var(--ease);
}
.cov-line{margin-top:.8rem;font-size:1.02rem;color:var(--ink-2);font-weight:600}
.cov-line b{font-family:var(--display);font-size:1.25rem;color:var(--forest-700)}
.cov-line span{color:var(--ink-3)}

/* exactly six regions, so a fixed 3x2 beats auto-fit leaving an orphan */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){ .region-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .region-grid{grid-template-columns:1fr} }
.rcard{
  display:grid;gap:.2rem;align-content:start;text-decoration:none;
  background:#fff;border:1px solid var(--hair);border-top:4px solid var(--c);
  border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--e1);
  transition:box-shadow .3s var(--ease),translate .3s var(--spring);
}
.rcard:hover{box-shadow:var(--e3);translate:0 -4px}
.rc-where{font-family:var(--display);font-size:.82rem;font-weight:700;color:var(--c)}
.rcard b{font-family:var(--display);font-size:1.28rem;font-weight:800;line-height:1.15}
.rc-blurb{font-size:.92rem;color:var(--ink-2);margin-top:.15rem}
.rc-foot{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.rc-n,.rc-live,.rc-none{font-family:var(--display);font-size:.82rem;font-weight:700;border-radius:999px;padding:.12rem .65rem}
.rc-n{background:var(--cream-2);color:var(--ink-3)}
.rc-live{background:rgba(63,163,77,.15);color:#1B7A2B}
.rc-none{background:var(--cream-2);color:var(--ink-3)}

/* ── hooks ────────────────────────────────────────────── */
.hooks{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.hook{
  display:grid;gap:.35rem;align-content:start;text-decoration:none;color:var(--cream);
  background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.16);
  border-radius:var(--r-xl);padding:2rem;
  transition:background .25s,border-color .25s,translate .3s var(--spring);
}
.hook:hover{background:rgba(255,252,242,.12);border-color:rgba(255,214,23,.4);translate:0 -4px}
.hook.lemon{background:linear-gradient(155deg,rgba(255,214,23,.2),rgba(242,116,56,.12));border-color:rgba(255,214,23,.32)}
.hook-ico{font-size:2.2rem;line-height:1;margin-bottom:.5rem}
.hook h3{font-size:1.7rem;color:var(--cream)}
.hook p{color:rgba(255,252,242,.76);font-size:1rem;margin-top:.2rem}
.hook-go{margin-top:1rem;font-family:var(--display);font-weight:700;color:var(--lemon)}
/* the one entry line under both cards (2026-10-18) */
.hooks-entry{grid-column:1 / -1;justify-self:center;display:flex;align-items:center;gap:.6rem;margin:0;padding:.7rem 1.2rem;
  border-radius:999px;background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.14);
  font-size:.98rem;line-height:1.45;color:rgba(255,252,242,.82);text-align:left}
.hooks-entry > span:first-child{font-size:1.3rem;line-height:1}
.hooks-entry b{color:var(--cream)}
.hooks-entry a{font-family:var(--display);font-weight:700;color:var(--lemon);text-decoration:none;white-space:nowrap}
.hooks-entry a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){ .hooks-entry{border-radius:var(--r);align-items:flex-start} }
@media(max-width:820px){ .hooks{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════
   404 — the big number (2026-10-18 redesign)
   A giant 404 in forest green with a lemon slice for the zero and a little
   spill under it ("Well, we spilled it"), a stand search, then the ways back
   in: nine signposts, the popular guides, and a band to list a stand. The
   squeeze-the-lemon toy and js/lost.js are gone. Prefixed lost-/ll-.
   ═══════════════════════════════════════════════════════ */
.lost{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding-block:clamp(1.4rem,3.5vw,2.6rem) clamp(2.2rem,5vw,3.6rem)}
.lost-hero{position:relative;z-index:1;display:grid;justify-items:center}
.lost-kick{display:inline-block;padding:.3rem .95rem;border-radius:999px;background:rgba(63,163,77,.13);
  font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-700)}
.lost-num{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.04em;
  margin-top:.15em;font-family:var(--display);font-weight:800;font-size:clamp(8rem,40vw,19rem);
  line-height:.84;letter-spacing:-.04em;color:var(--forest-800);
}
.lost-d{display:block;text-shadow:.04em .045em 0 var(--lemon)}
.lost-d:first-child{rotate:-7deg}
.lost-d:nth-child(3){rotate:6deg}
/* the rind, the pith ring, the shine and the dark disc behind stay put;
   only the flesh and its segments (::before) turn */
.lost-slice{
  position:relative;display:block;flex:none;width:.7em;height:.7em;margin-inline:.03em;border-radius:50%;
  background:#FFFBEA;border:.05em solid var(--lemon-600);
  box-shadow:.04em .045em 0 var(--forest-800);
}
.lost-slice::before{
  content:"";position:absolute;inset:.035em;border-radius:50%;
  background:
    radial-gradient(circle,#FFFBE3 0 8%,transparent 8.6%),
    repeating-conic-gradient(from 6deg,#FFE36A 0 32deg,#FFF8D2 32deg 36deg);
  animation:lost-turn 28s linear infinite;
}
.lost-slice i{position:absolute;z-index:1;top:14%;left:17%;width:30%;height:15%;border-radius:50%;background:rgba(255,255,255,.6);rotate:-28deg}
@keyframes lost-turn{to{rotate:360deg}}
.lost-spill{position:absolute;left:50%;bottom:-.1em;z-index:-1;translate:-50% 0;width:min(118%,620px);height:auto;fill:var(--lemon);opacity:.5}
.lost h1{margin-top:clamp(.9rem,2vw,1.3rem);font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.05}
.lost-lede{max-width:54ch;margin:.7rem auto 0}
.lost-q{
  display:flex;align-items:center;gap:.55rem;width:min(100%,560px);margin:1.4rem auto 0;padding:.4rem .4rem .4rem 1rem;
  background:#fff;border:1.5px solid var(--hair-2);border-radius:999px;box-shadow:var(--e2);transition:border-color .2s,box-shadow .2s;
}
.lost-q:focus-within{border-color:var(--lemon-600);box-shadow:0 0 0 4px rgba(255,214,23,.3),var(--e2)}
.lost-q svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.lost-q input{flex:1;min-width:0;padding:.45rem 0;border:0;background:none;outline:0;font:inherit;font-size:1rem;font-weight:600;color:var(--ink)}
.lost-q .btn{flex:none}
.lost-act{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}

.lost-more{padding-block:clamp(2.2rem,5vw,3.6rem);background:#fff;border-top:1px solid var(--hair)}
.lost-h{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem)}
.lost-links{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.lost-links a{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.12rem;align-content:start;height:100%;
  padding:1rem 1.1rem;border:1px solid var(--hair);border-radius:var(--r);background:var(--cream);color:inherit;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s,border-color .18s;
}
.lost-links a:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--lemon-600)}
.lost-links a:focus-visible{outline:3px solid var(--lemon-600);outline-offset:2px}
.ll-ico{grid-row:1 / 3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--forest-800);color:var(--lemon)}
.ll-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lost-links b{font-family:var(--display);font-size:1.08rem;font-weight:800;line-height:1.2;color:var(--forest-900)}
.lost-links a > span:last-child{font-size:.88rem;font-weight:600;line-height:1.4;color:var(--ink-3)}
.lost-guides{margin-top:2rem;text-align:center}
.lost-guides h3{font-size:1.15rem}
.lost-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.7rem}
.lost-pills a{padding:.42rem .95rem;border-radius:999px;background:var(--cream-2);border:1px solid var(--hair);
  font-size:.9rem;font-weight:700;color:var(--forest-800);text-decoration:none;transition:background .18s,border-color .18s}
.lost-pills a:hover{background:var(--lemon);border-color:var(--lemon-600)}
.lost-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-top:2.2rem;
  padding:1.4rem 1.6rem;border-radius:var(--r-lg);text-align:left;color:var(--cream);box-shadow:var(--e2);
  background:linear-gradient(110deg,#1F6B4B 0%,var(--forest-800) 45%,var(--forest-900) 100%);
}
.lost-band-k{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lemon)}
.lost-band-h{margin-top:.1rem;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;line-height:1.15;color:#fff}
.lost-facts{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.lost-facts b{margin-right:.35rem;font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--lemon)}
.lost-facts span{font-size:.9rem;font-weight:600;color:rgba(255,252,242,.8)}

@media (max-width:900px){ .lost-links{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .lost-links{grid-template-columns:minmax(0,1fr)}
  .lost-q{padding-left:.85rem}
  .lost-q .btn{padding-inline:1rem}
  .lost-act .btn{width:100%}
  .lost-band{padding:1.2rem}
  .lost-band .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ .lost-slice::before{animation:none} .lost-links a:hover{transform:none} }


/* ═══════════════════════════════════════════════════════
   HERO — one column, search first
   ═══════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.8rem,4vw,3.2rem) 0 clamp(3.4rem,7vw,6rem);
}
.hero-stack{
  position:relative;z-index:1;display:grid;justify-items:center;text-align:center;
  gap:0;max-width:900px;
}
.hero-stack .kicker{margin-bottom:1.4rem}
.hero-stack h1{
  font-size:clamp(2.9rem,7vw,5.6rem);line-height:.98;letter-spacing:-.038em;max-width:16ch;
}
.hero-stack .lede{margin-top:1.3rem;max-width:52ch;font-size:clamp(1.05rem,1.7vw,1.25rem)}

/* the one control that matters */
.bigsearch{
  display:flex;align-items:center;gap:.75rem;width:min(100%,620px);margin-top:2.2rem;
  background:#fff;border:1px solid var(--hair);border-radius:999px;
  padding:.5rem .5rem .5rem 1.5rem;box-shadow:var(--e4);
  transition:box-shadow .25s var(--ease),border-color .25s;
}
.bigsearch:focus-within{border-color:var(--forest-600);box-shadow:var(--e4),0 0 0 5px rgba(63,163,77,.16)}
.bigsearch svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round}
.bigsearch input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:1.1rem;font-weight:500;padding:.85rem 0;
}
.bigsearch input::placeholder{color:var(--ink-3)}
.bigsearch input::-webkit-search-cancel-button{display:none}
.bigsearch .btn{padding:.85rem 1.9rem;font-size:1.05rem;flex:none}

.quick{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .7rem;
  margin-top:1.1rem;font-size:.94rem;
}
.quick-k{font-weight:700;color:var(--ink-3)}
.quick-links{display:flex;flex-wrap:wrap;gap:.45rem}
.quick-links a{
  text-decoration:none;font-weight:700;color:var(--forest-700);
  background:rgba(63,163,77,.1);border-radius:999px;padding:.16rem .8rem;
  transition:background .18s,color .18s;
}
.quick-links a:hover{background:var(--forest-800);color:var(--cream)}
.quick .linkish{margin-left:.3rem}
/* a little taller under a finger; the same pill to the eye */
@media (pointer:coarse){ .quick-links a{padding:.3rem .85rem} }
.hero-stack .trust{justify-content:center;margin-top:1.8rem}

/* interior heroes use the same stack, left aligned */
.hero-stack.left{justify-items:start;text-align:left;max-width:none;margin:0}
.hero-stack.left h1{max-width:20ch}
.hero-stack.left .lede{margin-top:1rem}

/* supporting facts sit in a full-width row, never a floating sidecar */
/* A stat row is a grid whose column count follows how many items are in it,
   so it can never orphan one tile onto a line of its own. Four splits to a
   2x2 square rather than 3+1; three drops straight to a single column rather
   than 2+1; six starts as two rows of three. The rules between cells are
   drawn per position -- vertical between columns, horizontal between rows --
   so they stay correct in whichever shape is in force. */
.factrow{
  list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--hair-2);
}
.factrow > li{
  display:grid;gap:.1rem;padding:1.1rem 1.4rem 0;position:relative;
}
/* vertical rule, inset top and bottom, between columns */
.factrow > li::before{
  content:"";position:absolute;left:0;top:1.2rem;bottom:.2rem;width:1px;background:var(--hair);
}
/* horizontal rule above any row after the first */
.factrow > li::after{
  content:"";position:absolute;left:0;right:1.4rem;top:0;height:1px;background:var(--hair);display:none;
}
/* the opening cell of the row never carries a rule */
.factrow > li:first-child{padding-left:0}
.factrow > li:first-child::before{display:none}

/* ---- the column count is the item count ---- */
.factrow:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.factrow:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.factrow:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.factrow:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
/* six across is too thin to read, so it opens as two rows of three */
.factrow:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.factrow:has(> :nth-child(6):last-child) > li:nth-child(3n+1){padding-left:0}
.factrow:has(> :nth-child(6):last-child) > li:nth-child(3n+1)::before{display:none}
.factrow:has(> :nth-child(6):last-child) > li:nth-child(n+4){margin-top:1.1rem;padding-top:1.1rem}
.factrow:has(> :nth-child(6):last-child) > li:nth-child(n+4)::after{display:block}

@media(max-width:900px){
  /* four squares off rather than leaving one behind */
  .factrow:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .factrow:has(> :nth-child(4):last-child) > li:nth-child(2n+1){padding-left:0}
  .factrow:has(> :nth-child(4):last-child) > li:nth-child(2n+1)::before{display:none}
  .factrow:has(> :nth-child(4):last-child) > li:nth-child(n+3){margin-top:1.1rem;padding-top:1.1rem}
  .factrow:has(> :nth-child(4):last-child) > li:nth-child(n+3)::after{display:block}
  /* five is prime -- 3+2 is the only split that leaves nobody alone */
  .factrow:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}
  .factrow:has(> :nth-child(5):last-child) > li:nth-child(3n+1){padding-left:0}
  .factrow:has(> :nth-child(5):last-child) > li:nth-child(3n+1)::before{display:none}
  .factrow:has(> :nth-child(5):last-child) > li:nth-child(n+4){margin-top:1.1rem;padding-top:1.1rem}
  .factrow:has(> :nth-child(5):last-child) > li:nth-child(n+4)::after{display:block}
}

@media(max-width:620px){
  /* three across crushes the numbers here, and any wrap would orphan --
     so odd counts go to one clean column */
  .factrow:has(> :nth-child(3):last-child),
  .factrow:has(> :nth-child(5):last-child),
  .factrow:has(> :nth-child(6):last-child){grid-template-columns:1fr}
  .factrow:has(> :nth-child(3):last-child) > li,
  .factrow:has(> :nth-child(5):last-child) > li,
  .factrow:has(> :nth-child(6):last-child) > li{padding-left:0;margin-top:0;padding-top:1.1rem}
  .factrow:has(> :nth-child(3):last-child) > li::before,
  .factrow:has(> :nth-child(5):last-child) > li::before,
  .factrow:has(> :nth-child(6):last-child) > li::before{display:none}
  .factrow:has(> :nth-child(3):last-child) > li + li::after,
  .factrow:has(> :nth-child(5):last-child) > li + li::after,
  .factrow:has(> :nth-child(6):last-child) > li + li::after{display:block;right:0}
}

@media(max-width:480px){
  /* a phone gets one column, whatever the count */
  .factrow:has(> :nth-child(2):last-child),
  .factrow:has(> :nth-child(4):last-child){grid-template-columns:1fr}
  .factrow > li{padding-left:0;margin-top:0;padding-top:1.1rem}
  .factrow > li::before{display:none}
  .factrow > li::after{display:none}
  .factrow > li + li::after{display:block;right:0}
}
.factrow b{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1;color:var(--forest-700)}
.factrow span{font-size:.94rem;font-weight:600;color:var(--ink-3)}
.factrow a{color:var(--forest-700);font-weight:700}
.factrow .fact-live b{color:var(--tangerine)}

/* ── live bar under the header ─────────────────────────── */
.livebar{
  background:linear-gradient(100deg,var(--forest-800),var(--forest-900));
  color:var(--cream);border-bottom:3px solid var(--lemon);
}
.lb-inner{display:flex;align-items:center;gap:1.2rem;min-height:52px;padding:.4rem 0}
.lb-tag{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--lemon);
  text-transform:uppercase;letter-spacing:.06em;
}
.lb-tag .dot{background:var(--leaf-300);box-shadow:0 0 0 4px rgba(140,198,63,.2);animation:pulse 2.4s ease-in-out infinite}
.lb-list{
  display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;
  flex:1;min-width:0;overflow-x:auto;
}
.lb-list li{flex:none}
.lb-list li + li{border-left:1px solid rgba(255,252,242,.16)}
.lb-list a{
  display:flex;align-items:baseline;gap:.45rem;text-decoration:none;
  padding:.25rem 1rem;white-space:nowrap;transition:color .18s;
}
.lb-list b{font-family:var(--display);font-size:.98rem;font-weight:700}
.lb-list span{font-size:.88rem;color:rgba(255,252,242,.62)}
.lb-list a:hover b{color:var(--lemon)}
.lb-list a:hover span{color:rgba(255,252,242,.85)}
.lb-all{
  flex:none;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.9rem;
  color:var(--lemon);white-space:nowrap;
}
.lb-all:hover{text-decoration:underline;text-underline-offset:3px}

/* The fact-row rules that used to sit here predated the :has() column system
   above. They could not change the column count (the :has() rules outrank
   them) but they did zero the horizontal padding, so between 621px and 820px —
   an iPad mini is 768 — three columns of facts ran together with no space
   between them. The column system handles every width on its own now. */
@media(max-width:820px){
  .lb-tag{display:none}
}
@media(max-width:560px){
  .bigsearch{flex-wrap:wrap;border-radius:26px;padding:1rem}
  .bigsearch input{width:100%;flex:1 1 100%;padding:.4rem 0}
  .bigsearch .btn{width:100%}
  .bigsearch svg{display:none}
}

/* footer admin link — quiet on purpose */
.foot-copy{display:inline-flex;align-items:center}
.foot-dash{margin:0 .5rem;color:rgba(255,252,242,.22)}
.admin-link{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:inherit;font-weight:600;color:rgba(255,252,242,.2);
  transition:color .2s;
}
.admin-link:hover{color:rgba(255,252,242,.62);text-decoration:underline;text-underline-offset:3px}
.foot-base{align-items:center}
/* terms and privacy (2026-10-18): plain, readable, one pair on every screen */
.foot-legal{display:inline-flex;align-items:center;gap:1rem}
.foot-legal a{font-weight:600;color:rgba(255,252,242,.62);text-decoration:none;transition:color .2s}
.foot-legal a:hover{color:var(--lemon);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════
   ADMIN PORTAL
   ═══════════════════════════════════════════════════════ */

/* A working tool, not a page of the site: its own frame, a sidebar on the
   left and the work on the right. Tight on purpose — the numbers and the
   queues start at the top of the screen, not under a hero. */

.adm-page{background:var(--cream-2)}
/* several admin blocks set their own display, which would otherwise beat the
   hidden attribute and show a closed panel */
.adm-page [hidden]{display:none!important}

/* one set of line icons, drawn by admin.js */
.ai{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[data-ico]{display:inline-grid;place-items:center;flex:none;font-style:normal}
.adm-loading{padding:.6rem 0;color:var(--ink-3);font-weight:700}

/* the waiting count on a tab: quiet at zero, coral when it needs you */
.tab-n{
  display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .4rem;
  border-radius:999px;font-family:var(--ui);font-size:.74rem;font-weight:800;line-height:1;
  background:var(--hair);color:var(--ink-3);
}
.tab-n.hot{background:var(--coral);color:#fff}

/* ── signed out ── */
.adm-gate{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem 1rem;
  background:radial-gradient(90% 70% at 50% 0%,var(--forest-700),var(--forest-900) 72%);
}
.adm-gate-card{
  width:min(100%,380px);display:grid;justify-items:center;gap:.6rem;text-align:center;
  background:var(--cream);border-radius:var(--r-xl);box-shadow:var(--e4);padding:1.8rem 1.6rem 1.5rem;
}
.adm-gate-card img{width:120px;margin-bottom:.2rem}
.adm-gate-card h1{font-size:2.1rem}
.adm-gate-card p{color:var(--ink-2);font-size:.98rem}
.adm-gate-card .btn{width:100%;margin-top:.5rem}

/* ── the frame ── */
.adm-app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.adm-scrim{display:none}

.adm-side{
  position:sticky;top:0;z-index:80;height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:.9rem .75rem calc(.8rem + env(safe-area-inset-bottom));
  background:linear-gradient(185deg,var(--forest-800),var(--forest-900) 70%);
  color:var(--cream);isolation:isolate;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
}
.adm-side::-webkit-scrollbar{display:none}
/* the same low sun as the site's own menu, kept inside the panel */
.adm-side::before{
  content:"";position:absolute;inset:0 0 auto 0;height:280px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(255,214,23,.16),transparent 62%);
}

.adm-brand{
  display:flex;align-items:center;gap:.6rem;
  padding:.1rem .35rem .8rem;margin-bottom:.5rem;border-bottom:1px solid var(--hair-dark);
}
.adm-brand img{width:46px;height:auto}
.adm-brand b{font-family:var(--display);font-size:1.4rem;font-weight:800;letter-spacing:-.015em;line-height:1}
.adm-side-x{display:none;margin-left:auto}

.adm-nav{display:grid;gap:2px;align-content:start;margin-bottom:1rem}
.adm-nav [role="tab"]{
  position:relative;display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.55rem .65rem;border:0;border-radius:11px;background:none;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:.98rem;font-weight:700;line-height:1.2;
  color:rgba(255,252,242,.7);transition:background .16s,color .16s;
}
.adm-nav [role="tab"] span{flex:1;min-width:0}
.adm-nav [role="tab"]:hover{background:rgba(255,252,242,.07);color:var(--cream)}
.adm-nav [role="tab"][aria-selected="true"]{background:rgba(255,214,23,.12);color:var(--lemon)}
.adm-nav [role="tab"][aria-selected="true"]::before{
  content:"";position:absolute;left:-.75rem;top:.45rem;bottom:.45rem;width:4px;
  border-radius:0 4px 4px 0;background:var(--lemon);
}
.adm-nav [role="tab"]:focus-visible{outline:2px solid var(--lemon);outline-offset:-2px}
/* a hairline between the groups: listings and messages · contests and merch ·
   reports and security */
.adm-nav .adm-gap{margin-top:.95rem}
.adm-nav .adm-gap::after{
  content:"";position:absolute;left:.65rem;right:.65rem;top:-.5rem;height:1px;background:var(--hair-dark);
}
.adm-nav .tab-n{background:rgba(255,252,242,.1);color:rgba(255,252,242,.62)}
.adm-nav .tab-n.hot{background:var(--coral);color:#fff}
.adm-nav [aria-selected="true"] .tab-n{background:rgba(255,214,23,.2);color:var(--lemon)}
.adm-nav [aria-selected="true"] .tab-n.hot{background:var(--lemon);color:var(--forest-900)}

.adm-out{
  margin-top:auto;display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.6rem .65rem;border-radius:11px;cursor:pointer;
  background:rgba(255,252,242,.05);border:1px solid var(--hair-dark);
  font-family:var(--display);font-size:.98rem;font-weight:700;color:rgba(255,252,242,.82);
  transition:background .16s,border-color .16s,color .16s;
}
.adm-out:hover{background:rgba(228,87,46,.18);border-color:rgba(228,87,46,.5);color:#fff}

/* ── the header over the work ── */
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-head{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:.75rem;min-height:62px;
  padding:.55rem clamp(1rem,2.2vw,1.6rem);
  background:rgba(253,246,227,.88);border-bottom:1px solid var(--hair);
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
}
.adm-menu{display:none}
.adm-title{flex:1;min-width:0;font-size:1.45rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-tools{display:flex;align-items:center;gap:.5rem;flex:none}
.adm-bell-wrap{position:relative}
.adm-bell{
  position:relative;width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:#fff;border:1px solid var(--hair);box-shadow:var(--e1);
  color:var(--forest-800);transition:border-color .16s,box-shadow .16s;
}
.adm-bell:hover,.adm-bell[aria-expanded="true"]{border-color:var(--forest-600);box-shadow:var(--e2)}
.adm-bell .ai{width:19px;height:19px}
.adm-bell .tab-n{
  position:absolute;top:-5px;right:-6px;min-width:1.2rem;height:1.2rem;padding:0 .3rem;
  font-size:.66rem;box-shadow:0 0 0 2px var(--cream-2);
}
.adm-view{gap:.4rem}
.adm-view .ai{width:16px;height:16px;stroke-width:2.1}

/* the bell's list: a menu, so a tap anywhere else closes it */
.adm-notes{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:70;
  width:min(320px,calc(100vw - 1.5rem));padding:.45rem;
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--e4);
  animation:selIn .18s var(--ease);
}
.adm-notes-hd{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.35rem .55rem .45rem}
.adm-notes-hd b{font-family:var(--display);font-size:1.05rem}
.adm-notes-hd span{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.adm-notes-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adm-notes-list button{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .55rem;border:0;border-radius:10px;
  background:none;cursor:pointer;text-align:left;font-size:.92rem;font-weight:600;color:var(--ink-2);
}
.adm-notes-list button:hover{background:var(--cream-2)}
.adm-notes-list .ai{width:18px;height:18px;color:var(--coral)}
.adm-notes-list span{flex:1;min-width:0}
.adm-notes-list b{font-family:var(--display);font-weight:800;color:var(--ink)}
.adm-notes-list i{font-style:normal;color:var(--ink-3)}
.adm-notes-empty{padding:.25rem .55rem .6rem;font-size:.92rem;font-weight:600;color:var(--ink-3)}

/* ── the work ──
   A size container, so the panels answer to the room they actually have —
   the sidebar takes 240px of the window on a laptop. */
.adm-content{
  flex:1;min-width:0;container-type:inline-size;
  padding:clamp(.9rem,2vw,1.4rem) clamp(1rem,2.2vw,1.6rem) 2.5rem;
}
.adm-content [role="tabpanel"]:focus-visible{outline-offset:6px}
.adm-content .county-count{margin-bottom:.8rem}
/* an empty inbox is good news, not a reason to fill the screen */
.adm-content .blank{padding:1.5rem .5rem 1rem;gap:.35rem}
.adm-content .blank-ico{width:54px;height:54px;font-size:1.6rem;margin-bottom:.15rem}
.adm-content .blank h3{font-size:1.3rem}
.adm-content .blank p{font-size:.96rem}

/* ── dashboard ── */
/* six tiles: three by two on a laptop, one row on a wide screen, two by
   three on a phone — never a row with holes in it */
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:.8rem}
.kpi{
  --tone:var(--forest-700);--wash:rgba(63,163,77,.12);
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:.55rem;row-gap:.15rem;overflow:hidden;
  padding:.9rem .95rem .9rem;text-align:left;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);
}
/* each number keeps its own colour along the top edge */
.kpi::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tone)}
.kpi-ico{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--wash);color:var(--ink-tone,var(--tone));
}
.kpi-ico .ai{width:17px;height:17px}
.kpi-label{font-size:.75rem;font-weight:800;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--ink-3)}
.kpi-val{
  grid-column:1 / -1;margin-top:.4rem;font-family:var(--display);font-size:2.15rem;font-weight:800;
  line-height:1;letter-spacing:-.025em;color:var(--forest-900);overflow-wrap:anywhere;
}
.kpi-val i{font-style:normal;font-size:.5em;font-weight:700;letter-spacing:0;color:var(--ink-3);margin-left:.06em}
.kpi-bar{grid-column:1 / -1;height:6px;margin:.45rem 0 .1rem;border-radius:99px;background:var(--cream-3);overflow:hidden}
.kpi-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--leaf),var(--leaf-300))}
.kpi-note{grid-column:1 / -1;font-size:.85rem;font-weight:600;line-height:1.35;color:var(--ink-3)}
.kpi.hot .kpi-note{color:var(--coral);font-weight:700}
button.kpi{cursor:pointer;transition:border-color .18s,box-shadow .18s,translate .24s var(--spring)}
button.kpi .kpi-label{padding-right:1rem}   /* clear of the arrow */
button.kpi::before{
  content:"\2192";position:absolute;top:.8rem;right:.9rem;font-weight:800;color:var(--ink-3);
  transition:translate .2s var(--ease),color .2s;
}
button.kpi:hover{border-color:var(--hair-2);box-shadow:var(--e2);translate:0 -2px}
button.kpi:hover::before{translate:3px 0;color:var(--forest-700)}
.k-lemon{--tone:var(--lemon-600);--wash:rgba(255,214,23,.22);--ink-tone:#8A6503}
.k-tangerine{--tone:var(--tangerine);--wash:rgba(242,116,56,.13)}
.k-leaf{--tone:var(--leaf);--wash:rgba(63,163,77,.13);--ink-tone:var(--forest-600)}
.k-forest{--tone:var(--forest-700);--wash:rgba(18,79,55,.1)}
.k-coral{--tone:var(--coral);--wash:rgba(228,87,46,.12)}
.k-ink{--tone:var(--ink);--wash:rgba(18,48,36,.08)}

.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;align-items:start}
.dash-card{min-width:0;background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:.9rem .95rem 1rem;box-shadow:var(--e1)}
.dash-card > header{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.65rem}
.dash-card h3{font-size:1.1rem}
.dash-card > header span{font-size:.82rem;font-weight:700;color:var(--ink-3)}
.dash-card > header .linkish{font-size:.86rem}
.dash-empty{font-size:.92rem;font-weight:600;color:var(--ink-3)}

.needs{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.need{
  display:flex;align-items:center;gap:.65rem;width:100%;padding:.58rem .7rem;cursor:pointer;text-align:left;
  background:var(--cream);border:1px solid var(--hair);border-radius:12px;
  font-size:.93rem;font-weight:600;color:var(--ink-2);transition:border-color .16s,background .16s;
}
.need .ai{width:18px;height:18px;color:var(--ink-3)}
.need span{flex:1;min-width:0}
.need b{font-family:var(--display);font-weight:800;color:var(--ink)}
.need > i{font-style:normal;font-weight:800;color:var(--ink-3);transition:translate .2s var(--ease)}
.need:hover{border-color:var(--forest-600);background:#fff}
.need:hover > i{translate:3px 0}
.need.hot{background:#FFF6F1;border-color:rgba(228,87,46,.28);color:var(--ink)}
.need.hot .ai{color:var(--coral)}

/* stands per county, as a row of lemon bars */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bars li{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 1.8rem;align-items:center;gap:.6rem;font-size:.9rem;font-weight:700}
.bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars i{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--lemon),var(--lemon-600))}
.bars b{font-family:var(--display);font-weight:800;text-align:right}

.dash-si{list-style:none;margin:0;padding:0;display:grid}
.dash-si li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.8rem;row-gap:.15rem;padding:.5rem 0;border-top:1px solid var(--hair)}
.dash-si li:first-child{border-top:0;padding-top:0}
.dash-si .linkish{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.dash-si time{font-size:.8rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.dash-si small{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--ink-3)}

/* ── security ── */
.ipc-ip{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;font-weight:600;
  padding:.05rem .35rem;border-radius:6px;background:var(--cream-2);border:1px solid var(--hair);
  color:var(--ink-2);word-break:break-all;
}

.apill{
  display:inline-flex;align-items:center;border-radius:999px;padding:.16rem .55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.35;white-space:nowrap;
}
.apill.ok{background:rgba(63,163,77,.13);color:#1B6B2A}
.apill.sus{background:rgba(242,183,5,.22);color:#6E4F02}
.apill.ban{background:rgba(228,87,46,.14);color:#A8341A}
.apill.flag{background:#FFF1EA;color:#A8341A;box-shadow:inset 0 0 0 1px rgba(228,87,46,.32)}
.apill.ip{background:var(--cream-3);color:var(--ink-2)}
.apill.appeal{background:var(--forest-800);color:var(--lemon)}

.sec-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-bottom:.9rem}
.sec-sum{font-size:.86rem;font-weight:700;color:var(--ink-3)}
.seg{
  display:inline-flex;gap:2px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:#fff;border:1px solid var(--hair);border-radius:999px;box-shadow:var(--e1);
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;
  border:0;border-radius:999px;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--ink-2);
  transition:background .16s,color .16s;
}
.seg button:hover{color:var(--ink);background:var(--cream-2)}
.seg button[aria-pressed="true"]{background:var(--forest-800);color:var(--cream)}
.seg button[aria-pressed="true"] .tab-n{background:rgba(255,252,242,.18);color:var(--cream)}
.seg button[aria-pressed="true"] .tab-n.hot{background:var(--lemon);color:var(--forest-900)}
.seg.sm button{padding:.34rem .75rem;font-size:.88rem}

.sec-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.75rem}
.sec-search{
  flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:.5rem;padding:.05rem .9rem;
  background:#fff;border:1.5px solid var(--hair);border-radius:999px;transition:border-color .2s,box-shadow .2s;
}
.sec-search:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.13)}
.sec-search .ai{width:17px;height:17px;color:var(--ink-3)}
/* 16px, so iOS never zooms the page when it takes focus */
.sec-search input{flex:1;min-width:0;border:0;outline:none;background:none;padding:.5rem 0;font-size:1rem;font-weight:500}
.sec-search input::-webkit-search-cancel-button{display:none}
.sec-h{display:flex;align-items:center;gap:.45rem;font-size:1.1rem;margin:1.2rem 0 .55rem}
.sec-h:first-child{margin-top:0}
.sec-note{font-size:.88rem;font-weight:500;color:var(--ink-3);max-width:72ch;margin:-.2rem 0 .7rem}

.accts{display:grid;gap:.4rem}
.acct{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.75rem;width:100%;
  padding:.6rem .85rem .6rem .75rem;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--e1);
  transition:border-color .16s,box-shadow .16s;
}
.acct:hover{border-color:var(--hair-2);box-shadow:var(--e2)}
.acct.is-sus::before,.acct.is-ban::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.acct.is-sus::before{background:var(--lemon-600)}
.acct.is-ban::before{background:var(--coral)}
.acct-av{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.05rem;font-weight:800;line-height:1;text-transform:uppercase;
  background:var(--cream-3);color:var(--forest-800);
}
.acct.is-sus .acct-av{background:rgba(242,183,5,.22);color:#6E4F02}
.acct.is-ban .acct-av{background:rgba(228,87,46,.14);color:#A8341A}
.acct-id{display:grid;min-width:0;line-height:1.3}
.acct-id b{font-size:.97rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-id small{font-size:.83rem;font-weight:600;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem}
.acct-go{font-weight:800;color:var(--ink-3);transition:translate .2s var(--ease),color .2s}
.acct:hover .acct-go{translate:3px 0;color:var(--forest-700)}

/* an appeal reads like the queue: the case on the left, the decision on the right */
.ap-card .ap-who{font:inherit;color:inherit;text-align:left;overflow-wrap:anywhere;text-decoration-thickness:2px}
.ap-reason{margin-top:.6rem;font-size:.92rem;color:var(--ink-2)}
.ap-reason b{display:block;margin-bottom:.1rem;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.ap-msg{
  margin:.7rem 0 0;padding:.75rem .95rem;border-left:3px solid var(--lemon-600);border-radius:0 12px 12px 0;
  background:var(--cream-2);font-size:.98rem;line-height:1.55;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.ap-note{display:block;margin-top:.8rem;font-size:.88rem;font-weight:700}
.ap-note span{font-weight:600;color:var(--ink-3)}
.ap-note textarea{
  display:block;width:100%;min-height:62px;margin-top:.3rem;resize:vertical;padding:.55rem .75rem;
  border:1.5px solid var(--hair);border-radius:12px;background:#fff;outline:none;
  font:inherit;font-size:1rem;font-weight:500;transition:border-color .2s,box-shadow .2s;
}
.ap-note textarea:focus{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.ap-done{display:grid;gap:.35rem}
.ap-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;width:100%;
  padding:.55rem .8rem;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--hair);border-radius:12px;
}
.ap-row:hover{border-color:var(--hair-2)}
.ap-row b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-row time{font-size:.8rem;font-weight:700;color:var(--ink-3)}

.si-list{display:grid;gap:.35rem}
.si{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:.75rem;
  padding:.55rem .85rem;background:#fff;border:1px solid var(--hair);border-radius:12px;font-size:.9rem;
}
.si .linkish{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.si .ipc-ip{justify-self:start}
.si-dev{font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si time{font-size:.82rem;font-weight:700;color:var(--ink-3);white-space:nowrap;text-align:right}

.ipl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:.55rem}
.ipc{min-width:0;padding:.7rem .75rem;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--e1)}
.ipc.hot{background:#FFF8F4;border-color:rgba(228,87,46,.35)}
.ipc-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .6rem;margin-bottom:.5rem}
.ipc-hd span{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.ipc.hot .ipc-hd span{color:#A8341A}
.ipc-list{display:grid;gap:3px}
.ipc-acct{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-width:0;
  padding:.42rem .55rem;border:0;border-radius:9px;background:var(--cream);cursor:pointer;text-align:left;
  font:inherit;font-size:.88rem;font-weight:700;color:var(--ink);
}
.ipc-acct > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipc-acct:hover{background:var(--cream-3)}

/* a stand in the queue sent from an address a restricted account has used */
.ipwarn{
  display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .7rem;padding:.6rem .75rem;
  border-radius:12px;background:#FFF1EA;border:1px solid rgba(228,87,46,.3);
  font-size:.9rem;font-weight:600;color:#7A2A12;
}
.ipwarn .ai{width:18px;height:18px;margin-top:.12rem;color:var(--coral)}
.ipwarn .linkish{font-size:inherit;color:#A8341A}

/* ── one account, in a popup ── */
.acm-k{margin-bottom:.35rem;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lemon)}
.modal-hd h2.acm-email{font-size:clamp(1.25rem,3.4vw,1.75rem);letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere}
.acm-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.65rem}
/* the same pills, re-inked for the dark header */
.acm-pills .apill{background:rgba(255,252,242,.13);color:var(--cream)}
.acm-pills .apill.ok{background:rgba(140,198,63,.2);color:var(--leaf-300)}
.acm-pills .apill.sus{background:var(--lemon);color:var(--forest-900)}
.acm-pills .apill.ban{background:var(--coral);color:#fff}
.acm-pills .apill.flag{background:rgba(228,87,46,.26);color:#FFD9CC;box-shadow:inset 0 0 0 1px rgba(255,160,130,.45)}
.acm-pills .apill.appeal{background:var(--lemon-300);color:var(--forest-900)}

.acm{gap:1rem}
.acm > section:first-child{padding-top:0;border-top:0}
.acm-h{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.5rem;font-size:1.02rem}
.acm-h span{font-family:var(--ui);font-size:.8rem;font-weight:700;letter-spacing:0;color:var(--ink-3)}
.acm-fine{margin-bottom:.55rem;font-size:.88rem;font-weight:600;color:var(--ink-3)}

.acm-now{padding:.85rem .95rem;border-radius:16px;border:1px solid}
.acm-now.is-sus{background:#FFF8DB;border-color:rgba(242,183,5,.45)}
.acm-now.is-ban{background:#FFF1EA;border-color:rgba(228,87,46,.35)}
.acm-now-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.acm-now-hd b{font-family:var(--display);font-size:1.2rem;font-weight:800}
.acm-now.is-sus .acm-now-hd b{color:#6E4F02}
.acm-now.is-ban .acm-now-hd b{color:#A8341A}
.acm-now-hd span{font-size:.86rem;font-weight:700;color:var(--ink-2)}
.acm-reason{margin:.45rem 0 .7rem;font-size:.95rem}
.acm-reason.quiet{font-style:italic;color:var(--ink-3)}
.acm-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}

.acm-form{gap:.8rem}
.form.acm-form textarea{min-height:70px}
.acm-kind{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:#fff;border:1px solid var(--hair);border-radius:999px}
.acm-form .acm-kind label{position:relative;display:block;cursor:pointer}
.acm-kind input{position:absolute;opacity:0;pointer-events:none}
.acm-kind span{
  display:block;padding:.5rem .8rem;border-radius:999px;text-align:center;
  font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--ink-2);
  transition:background .16s,color .16s;
}
.acm-kind input:checked + span{background:var(--forest-800);color:var(--cream)}
.acm-kind input[value="ban"]:checked + span{background:var(--coral);color:#fff}
.acm-kind input:focus-visible + span{outline:3px solid var(--lemon-600);outline-offset:2px}
.acm-go{justify-self:start}
.acm-go.is-ban{--bg:var(--coral);--fg:#fff}
.acm-go[data-armed]{--bg:#B8391A;box-shadow:0 0 0 4px rgba(228,87,46,.25)}
.acm-go:disabled{opacity:.6;cursor:progress}

.acm-list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.acm-list li{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-width:0;
  padding:.45rem .7rem;background:#fff;border:1px solid var(--hair);border-radius:10px;font-size:.92rem;font-weight:600;
}
.acm-list li > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acm-list a{font-weight:700;color:var(--forest-700)}
.acm-log{list-style:none;margin:0;padding:0;display:grid}
.acm-log li{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .7rem;padding:.45rem 0;
  border-top:1px solid var(--hair);font-size:.88rem;font-weight:600;color:var(--ink-2);
}
.acm-log li:first-child{border-top:0;padding-top:0}
.acm-log time{font-weight:700;color:var(--ink)}
.acm-hist em{flex-basis:100%;font-style:normal;font-size:.86rem;color:var(--ink-3)}

/* ── contests: one page per event ─────────────────────────
   The event up top, its schedule as a line with today on it, the numbers,
   votes by day beside the details, then the board. The form is a popup. */
.ev{display:grid;gap:.8rem}

.ev-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;
  padding:1.25rem 1.35rem 1.4rem;border-radius:var(--r-lg);color:var(--cream);
  background:linear-gradient(140deg,var(--forest-700),var(--forest-900) 76%);box-shadow:var(--e2);
}
/* a low sun in the corner, and the contest's own colour along the bottom */
.ev-hero::before{
  content:"";position:absolute;top:-55%;right:-12%;width:440px;height:440px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(140,198,63,.24),transparent 62%);
}
.ev-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--leaf),var(--leaf-300))}
.ev-hero.ev-juicer::before{background:radial-gradient(circle,rgba(255,214,23,.26),transparent 62%)}
.ev-hero.ev-juicer::after{background:linear-gradient(90deg,var(--lemon),var(--tangerine))}
.ev-hero-main{flex:1 1 300px;min-width:0}
.ev-kick{margin-bottom:.35rem;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lemon)}
.ev-name{font-size:clamp(1.7rem,3.6vw,2.4rem);letter-spacing:-.025em;color:var(--cream)}
.ev-tag{margin-top:.3rem;font-size:1.02rem;font-weight:600;color:rgba(255,252,242,.78)}
.ev-state{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.85rem;font-size:.9rem;font-weight:700;color:rgba(255,252,242,.86)}
.ev-phase{
  display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .7rem;border-radius:999px;
  font-size:.8rem;font-weight:800;letter-spacing:.02em;background:rgba(255,252,242,.12);color:var(--cream);
}
.ev-phase i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ev-phase.is-voting{background:var(--lemon);color:var(--forest-900)}
.ev-phase.is-voting i{animation:blink 2.4s ease-in-out infinite}
.ev-phase.is-running{background:rgba(140,198,63,.22);color:var(--leaf-300)}
.ev-phase.is-closed{background:rgba(255,252,242,.1);color:rgba(255,252,242,.72)}
.ev-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ev-view{--bg:transparent;--fg:var(--cream);gap:.4rem;box-shadow:inset 0 0 0 1.5px rgba(255,252,242,.34)}
.ev-view:hover{box-shadow:inset 0 0 0 1.5px var(--lemon)}
.ev-view .ai{width:15px;height:15px;stroke-width:2.1}

.ev-card{min-width:0;padding:.95rem 1rem 1.05rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1)}
.ev-card > header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .8rem;margin-bottom:.85rem}
.ev-card h3{font-size:1.1rem}
.ev-card > header span{font-size:.82rem;font-weight:700;color:var(--ink-3)}
.ev-card > header .linkish{font-size:.86rem}

/* the schedule: evenly spaced milestones on a track, filled up to today */
.tl{
  --dot:14px;--pad:0px;position:relative;list-style:none;margin:0;padding:var(--pad) 0 0;
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
}
.tl.has-now{--pad:1.7rem}
.tl::before,.tl::after{
  content:"";position:absolute;top:calc(var(--pad) + var(--dot) / 2 - 2px);height:4px;border-radius:4px;
  left:calc(100% / var(--n) / 2);
}
.tl::before{right:calc(100% / var(--n) / 2);background:var(--cream-3)}
.tl::after{width:calc((100% - 100% / var(--n)) * var(--f));background:linear-gradient(90deg,var(--leaf),var(--leaf-300))}
.tl li{position:relative;z-index:1;display:grid;justify-items:center;gap:.12rem;padding:0 .25rem;text-align:center}
.tl li i{width:var(--dot);height:var(--dot);margin-bottom:.4rem;border-radius:50%;background:#fff;border:3px solid var(--cream-3)}
.tl li.is-done i{background:var(--leaf);border-color:var(--leaf)}
.tl li.is-next i{border-color:var(--lemon-600);box-shadow:0 0 0 4px rgba(255,214,23,.28)}
.tl b{font-size:.84rem;font-weight:800;line-height:1.2}
.tl time{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.tl li:not(.is-done) b{color:var(--ink-2)}
.tl-now{
  position:absolute;top:0;z-index:2;translate:-50% 0;
  left:calc(100% / var(--n) / 2 + (100% - 100% / var(--n)) * var(--f));
  padding:.08rem .5rem;border-radius:999px;background:var(--lemon);color:var(--forest-900);
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}

.ev-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.kpi-val.is-text{font-size:1.3rem;line-height:1.15;letter-spacing:-.01em}
.ev-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:.8rem;align-items:stretch}

/* votes by day: one bar a day, days to come drawn faint */
.vc{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:minmax(0,1fr);
  align-items:end;gap:2px;height:150px;border-bottom:1px solid var(--hair-2);
}
.vc-bar{height:max(3px,calc(var(--h) * 100%));border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--lemon),var(--lemon-600))}
.vc-bar.is-zero{height:3px;background:var(--cream-3)}
.vc-bar.is-future{background:var(--cream-2)}
.vc-bar:hover{filter:brightness(.9)}
.vc-axis{display:flex;justify-content:space-between;gap:.5rem;margin-top:.4rem;font-size:.76rem;font-weight:700;color:var(--ink-3)}

.ev-facts dl{margin:0;display:grid}
.ev-facts dl div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.7rem;padding:.48rem 0;border-top:1px solid var(--hair);font-size:.9rem}
.ev-facts dl div:first-child{padding-top:0;border-top:0}
.ev-facts dt{padding-top:.14rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ev-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.ev-facts em{font-style:normal;font-weight:600;color:var(--ink-3)}

/* the Cup's board */
.cb{display:grid;gap:.35rem}
.cb-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.3fr) minmax(60px,1fr) 2.4rem;
  align-items:center;gap:.8rem;padding:.6rem .8rem;border:1px solid var(--hair);border-radius:12px;background:var(--cream);
}
.cb-row.is-waiting{background:#fff;border-style:dashed}
.cb-county{display:grid;min-width:0;line-height:1.25}
.cb-county b{font-family:var(--display);font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-county small{font-size:.78rem;font-weight:700;color:var(--ink-3)}
.cb-lead{min-width:0;font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-lead em{font-style:normal;font-weight:600;color:var(--ink-3)}
.cb-bar,.lbd-bar{height:8px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.cb-bar i,.lbd-bar i{display:block;height:100%;border-radius:inherit}
.cb-bar i{background:linear-gradient(90deg,var(--leaf),var(--leaf-300))}
.cb-votes,.lbd-votes{font-family:var(--display);font-weight:800;text-align:right}

/* Best Stand's leaderboard */
.lbd{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.lbd li{
  display:grid;grid-template-columns:2rem minmax(0,1.4fr) minmax(60px,1fr) 2.4rem 2.8rem;
  align-items:center;gap:.8rem;padding:.55rem .8rem;border:1px solid var(--hair);border-radius:12px;background:var(--cream);
}
.lbd li.is-top{background:linear-gradient(90deg,rgba(255,214,23,.2),var(--cream) 62%);border-color:rgba(242,183,5,.42)}
.lbd-place{font-family:var(--display);font-size:1.15rem;font-weight:800;text-align:center;color:var(--forest-700)}
.lbd-place small{font-size:.7em;color:var(--ink-3)}
.lbd-name{display:grid;min-width:0;line-height:1.25}
.lbd-name a{font-family:var(--display);font-weight:800;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbd-name a:hover{color:var(--forest-600)}
.lbd-name small{font-size:.78rem;font-weight:700;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbd-bar i{background:linear-gradient(90deg,var(--lemon),var(--tangerine))}
.lbd-share{font-size:.8rem;font-weight:700;text-align:right;color:var(--ink-3)}
.ev-more{margin-top:.6rem;font-size:.86rem;font-weight:600;color:var(--ink-3)}

/* the one destructive thing on the page, kept at the foot and out of the way */
.ev-danger{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.2rem;
  padding:.8rem 1rem;border:1.5px dashed rgba(228,87,46,.32);border-radius:var(--r);background:#FFFBF8;
}
.ev-danger-txt{flex:1 1 260px;display:grid;gap:.1rem;min-width:0}
.ev-danger-txt b{font-family:var(--display);font-size:1rem;color:#A8341A}
.ev-danger-txt span{font-size:.86rem;font-weight:600;color:var(--ink-3)}
.ev-wipe{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ev-sure{font-size:.88rem;font-weight:600;color:var(--ink-2)}

/* the edit popup */
.ev-mk{margin-bottom:.35rem;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lemon)}
.ev-form{gap:1.1rem}
.ev-fs{display:grid;gap:.75rem;min-width:0;padding-top:1rem;border-top:1px solid var(--hair)}
.ev-fs:first-child{padding-top:0;border-top:0}
.ev-leg{font-family:var(--ui);font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--forest-700)}
.ev-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.form.ev-form textarea{min-height:0}
.ev-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-top:1rem;border-top:1px solid var(--hair)}

/* rules: a numbered box for each one, never a block of lines to get right */
.ev-rules{display:grid;gap:.45rem;min-width:0}
.ev-rules-hd{font-size:.94rem;font-weight:700}
.rl{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;counter-reset:rule}
.rl-row{
  counter-increment:rule;
  display:grid;grid-template-columns:1.9rem minmax(0,1fr) auto;align-items:start;gap:.5rem;
  padding:.35rem .35rem .35rem .4rem;background:#fff;border:1.5px solid var(--hair);border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.rl-row:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.rl-n{
  width:1.9rem;height:1.9rem;border-radius:9px;display:grid;place-items:center;
  background:var(--cream-2);color:var(--forest-700);
  font-family:var(--display);font-size:.95rem;font-weight:800;line-height:1;transition:background .2s,color .2s;
}
.rl-n::before{content:counter(rule)}
.rl-row:focus-within .rl-n{background:var(--lemon);color:var(--forest-900)}
/* the box is the row; the text inside it has no frame of its own */
.form.ev-form .rl-in{
  display:block;width:100%;min-height:0;margin:0;padding:.28rem .1rem;
  border:0;border-radius:0;background:none;box-shadow:none;resize:none;overflow:hidden;
  font-size:1rem;font-weight:500;line-height:1.45;
}
.form.ev-form .rl-in:focus{border:0;box-shadow:none}
.rl-act{display:flex;align-items:center;gap:1px}
.rl-btn{
  width:30px;height:30px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;
  background:none;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s;
}
.rl-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rl-btn:hover{background:var(--cream-2);color:var(--ink)}
.rl-x:hover{background:rgba(228,87,46,.12);color:var(--coral)}
.rl-btn:disabled{opacity:.28;cursor:default;background:none;color:var(--ink-3)}
.rl-add{
  display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.55rem .9rem;
  border:1.5px dashed var(--hair-2);border-radius:12px;background:none;cursor:pointer;
  font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--forest-700);
  transition:border-color .2s,background .2s;
}
.rl-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.rl-add:hover{border-color:var(--forest-600);background:#fff}
.rl-add:disabled{opacity:.45;cursor:default;background:none;border-color:var(--hair-2)}
@media (pointer:coarse){ .rl-btn{width:32px;height:32px} }

/* ── the room the panels actually have ── */
@container (min-width:1180px){
  .dash-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@container (max-width:820px){
  .adm-cols{grid-template-columns:1fr}
  .adm-aside{position:static}
}
@container (max-width:720px){
  .dash-grid{grid-template-columns:1fr}
  .ev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-grid{grid-template-columns:1fr}
}
@container (max-width:640px){
  .sub{grid-template-columns:1fr}
  .sub-actions{grid-template-columns:1fr 1fr}
  .sub-actions .btn-lemon{grid-column:1 / -1}
  .sub.is-queue .sub-actions{position:static}
  .sub-act-k,.sub-act-note{grid-column:1 / -1}
  .ap-card .sub-actions .btn-lemon{grid-column:auto}
  .si{grid-template-columns:minmax(0,1fr) auto;row-gap:.25rem}
  .si .ipc-ip{grid-column:1;grid-row:2}
  .si-dev{grid-column:2;grid-row:2;text-align:right}
  .si time{grid-column:2;grid-row:1}
  /* board rows stack:  county ....... status
                        leader
                        bar ......... votes   */
  .cb-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.4rem}
  .cb-county{grid-column:1;grid-row:1}
  .cb-row .apill{grid-column:2;grid-row:1;justify-self:end}
  .cb-lead{grid-column:1 / -1;grid-row:2}
  .cb-bar{grid-column:1;grid-row:3}
  .cb-votes{grid-column:2;grid-row:3}
  /* leaderboard rows:  place  name ....... votes
                               bar ........ share  */
  .lbd li{grid-template-columns:1.6rem minmax(0,1fr) auto;row-gap:.35rem}
  .lbd-place{grid-column:1;grid-row:1}
  .lbd-name{grid-column:2;grid-row:1}
  .lbd-votes{grid-column:3;grid-row:1}
  .lbd-bar{grid-column:2;grid-row:2}
  .lbd-share{grid-column:3;grid-row:2}
}
/* the schedule turns on its side when it has no room to run across */
@container (max-width:560px){
  .tl,.tl.has-now{--pad:0px;grid-template-columns:1fr;gap:.55rem}
  .tl::before{top:.35rem;bottom:.35rem;left:calc(var(--dot) / 2 - 2px);right:auto;width:4px;height:auto}
  .tl::after,.tl-now{display:none}
  .tl li{grid-template-columns:var(--dot) minmax(0,1fr) auto;justify-items:start;align-items:center;column-gap:.7rem;padding:0;text-align:left}
  .tl li i{margin:0}
  .ev-hero{padding:1.05rem 1rem 1.2rem}
  .ev-hero-act{width:100%}
  .ev-hero-act .btn-lemon{flex:1 1 auto}
}
@container (max-width:600px){
  .acct{grid-template-columns:auto minmax(0,1fr) auto;row-gap:.4rem}
  .acct-tags{grid-column:2 / -1;grid-row:2;justify-content:flex-start}
}
@container (max-width:520px){
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .kpi{padding:.75rem .8rem .8rem}
  .kpi-ico{width:26px;height:26px;border-radius:8px}
  .kpi-ico .ai{width:15px;height:15px}
  .kpi-label{font-size:.68rem;letter-spacing:.04em}
  .kpi-val{font-size:1.75rem;margin-top:.35rem}
  .kpi-note{font-size:.8rem}
  button.kpi::before{top:.65rem;right:.7rem}
  .kpi-val.is-text{font-size:1.1rem}
  .bars li{grid-template-columns:minmax(0,6rem) minmax(0,1fr) 1.6rem}
  .vc{height:120px;gap:1px}
  /* the three views share the row evenly instead of scrolling sideways */
  .sec-top .seg{width:100%}
  .sec-top .seg button{flex:1 1 0;justify-content:center;padding:.38rem .5rem;font-size:.9rem}
}

/* ── phones and small tablets: the sidebar becomes a side sheet ── */
@media (max-width:900px){
  .adm-app{grid-template-columns:minmax(0,1fr)}
  .adm-side{
    position:fixed;inset:0 auto 0 0;z-index:210;width:75vw;height:100%;
    translate:-100% 0;visibility:hidden;
    box-shadow:24px 0 60px -20px rgba(7,40,27,.55);
    transition:translate .36s var(--ease),visibility 0s linear .36s;
  }
  .adm-side.on{translate:0 0;visibility:visible;transition:translate .36s var(--ease)}
  .adm-side-x{display:grid}
  .adm-scrim{
    display:block;position:fixed;inset:0;z-index:205;background:rgba(7,40,27,.5);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  .adm-scrim.on{
    opacity:1;pointer-events:auto;
    backdrop-filter:blur(10px) saturate(.82);-webkit-backdrop-filter:blur(10px) saturate(.82);
  }
  .adm-menu{
    display:grid;align-content:center;gap:4px;flex:none;width:40px;height:40px;padding:0 10px;cursor:pointer;
    background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:var(--e1);
  }
  .adm-menu span{display:block;height:2px;border-radius:2px;background:var(--forest-800)}
  .adm-head{min-height:58px;padding:.5rem 1rem;gap:.6rem}
  .adm-title{font-size:1.25rem}
  .ap-card .sub-actions .btn-lemon{grid-column:auto}
}
@media (max-width:560px){
  .adm-head{padding:.45rem .8rem}
  .adm-content{padding:.8rem .8rem 2rem}
  /* the button keeps its words for a screen reader and loses them on screen */
  .adm-view{width:40px;height:40px;padding:0}
  .adm-view span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* the bell sits mid-header on a phone, so its list hangs from the header's
     edges rather than the bell's — otherwise it runs off the left side */
  .adm-bell-wrap{position:static}
  .adm-notes{left:.8rem;right:.8rem;width:auto;top:calc(100% + .35rem)}
  .acm-go{justify-self:stretch}
  /* the edit popup: one column, and Save across the full width */
  .ev-2{grid-template-columns:1fr}
  .ev-foot .btn-lemon{flex:1 1 100%}
}
@media (hover:none){
  button.kpi:hover,.need:hover > i,.acct:hover .acct-go,button.kpi:hover::before{translate:none}
}

/* ── an owner who is suspended or banned ──────────────────
   Signed in, and that is all: the whole page is the notice, the reason and
   their one appeal. */
.rs-card{
  width:min(100%,640px);margin:0 auto;overflow:hidden;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--e3);
}
.rs-hd{
  position:relative;display:flex;align-items:center;gap:1rem;padding:1.4rem 1.5rem;color:var(--cream);
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));
}
.rs-hd::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--lemon)}
.rs-card.is-ban .rs-hd{background:linear-gradient(150deg,#B8391A,#7A2410)}
.rs-card.is-ban .rs-hd::after{background:var(--coral)}
.rs-ico{
  flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-size:1.9rem;line-height:1;background:rgba(255,252,242,.14);
}
.rs-hd h1{font-size:clamp(1.5rem,4vw,2.05rem);letter-spacing:-.02em;color:var(--cream)}
.rs-hd p{margin-top:.25rem;font-weight:700;color:rgba(255,252,242,.82)}
.rs-bd{display:grid;gap:.8rem;padding:1.3rem 1.5rem 1.5rem}
.rs-k{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rs-reason{margin-top:-.5rem;padding:.75rem .9rem;border-radius:12px;background:var(--cream-2);font-weight:600;overflow-wrap:anywhere}
.rs-what{color:var(--ink-2)}
.rs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.2rem}
.rs-fine{order:3;flex-basis:100%;font-size:.86rem;color:var(--ink-3)}
.rs-appeal{flex:1 1 100%;display:grid;gap:.15rem;padding:.8rem .95rem;border-radius:12px}
.rs-appeal.is-open{background:rgba(63,163,77,.1);border:1px solid rgba(63,163,77,.28)}
.rs-appeal.is-denied{background:rgba(228,87,46,.08);border:1px solid rgba(228,87,46,.28)}
.rs-appeal b{font-family:var(--display);font-size:1.05rem}
.rs-appeal span{font-size:.92rem;color:var(--ink-2)}
@media (max-width:560px){
  .rs-hd{gap:.8rem;padding:1.1rem 1.1rem 1.2rem}
  .rs-ico{width:46px;height:46px;border-radius:13px;font-size:1.55rem}
  .rs-bd{padding:1.05rem 1.1rem 1.2rem}
  .rs-actions .btn{width:100%}
}

.sub-list{display:grid;gap:1.1rem}
.sub{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:1.5rem;align-items:start;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:1.5rem;box-shadow:var(--e1);transition:opacity .22s var(--ease);
}
.sub-top{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem}
.sub h3{font-size:1.5rem}
.sub-where{font-size:.86rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:.15rem}
/* the photo sent with a submission, seen before it is approved (2026-10-16) */
.sub-photo{display:grid;grid-template-columns:132px minmax(0,1fr);gap:.4rem .9rem;align-items:center;margin:.9rem 0 0;padding:.6rem;border-radius:14px;background:var(--cream);border:1px solid var(--hair)}
.sub-photo img{display:block;width:132px;height:99px;object-fit:cover;border-radius:10px;background:var(--cream-3)}
.sub-photo figcaption{font-size:.84rem;font-weight:600;line-height:1.45;color:var(--ink-2)}
@media (max-width:520px){ .sub-photo{grid-template-columns:minmax(0,1fr)} .sub-photo img{width:100%;height:auto;aspect-ratio:4/3} }
.sub-story{color:var(--ink-2);margin-top:.7rem;max-width:62ch}
.sub-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:.7rem;
  margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--hair);
}
/* addresses and emails have no spaces to break at */
.sub-facts dd{overflow-wrap:anywhere}
.sub-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.sub-facts dd{margin:.1rem 0 0;font-size:.95rem;font-weight:600}
.sub-actions{display:grid;gap:.5rem}
.sub-actions .btn{width:100%}
.sub-no{--fg:var(--coral);box-shadow:inset 0 0 0 1.5px rgba(228,87,46,.35)}
.sub-no:hover{box-shadow:inset 0 0 0 1.5px var(--coral)}

/* ── the approval queue card, compact (2026-10-17) ──
   The owner: "make this look better, a little bit more compact, and remove the
   map, but put a link to Google Maps." One pass, top to bottom: the photo as
   a square beside the name, the AI's read, the story in one quiet line, the
   address with its Maps button, then the facts as a tight ledger of label
   over value with hairlines between — no boxes. The three buttons ride in a
   slim rail that stays put while a long card scrolls. The reports and
   appeals cards share the .sub pieces but not this layout. */
.sub.is-queue{grid-template-columns:minmax(0,1fr) 200px;gap:1.2rem;padding:1.05rem 1.15rem 1.1rem}
.sub.is-queue h3{font-size:1.32rem;line-height:1.15}
.sub.is-queue .sub-top{margin-bottom:.35rem;gap:.35rem}
.sub.is-queue .sub-where{margin-top:.1rem;font-size:.78rem}
.qc-hd{display:grid;align-items:center;gap:.9rem}
.qc-hd.has-pic{grid-template-columns:96px minmax(0,1fr)}
.qc-id{min-width:0}
.qc-pic{
  position:relative;display:block;width:96px;height:96px;overflow:hidden;border-radius:14px;
  background:var(--cream-3);box-shadow:0 0 0 1px var(--hair),var(--e1);
}
.qc-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .35s var(--ease)}
.qc-pic:hover img{scale:1.06}
.qc-pic span{
  position:absolute;left:5px;bottom:5px;padding:.05rem .4rem;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.03em;color:var(--forest-900);background:rgba(255,252,242,.92);
}
.qc-nopic{background:var(--cream-2);color:var(--ink-3)}
.sub.is-queue .ipwarn{margin-top:.75rem}
.qc-body{display:grid;gap:.6rem;margin-top:.8rem}
.qc-story{
  margin:0;padding-left:.75rem;border-left:3px solid var(--lemon);
  font-size:.95rem;font-weight:600;line-height:1.5;color:var(--ink-2);
}
.qc-where{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.25rem .6rem;
  padding:.5rem .55rem .5rem .6rem;border-radius:12px;background:var(--cream);border:1px solid var(--hair);
}
.qc-where-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(228,87,46,.12);color:var(--coral)}
.qc-where-ico .ai{width:16px;height:16px}
.qc-where-txt{display:grid;min-width:0;line-height:1.3;overflow-wrap:anywhere}
.qc-where-txt b{font-size:.95rem;font-weight:700}
.qc-where-txt small{font-size:.8rem;font-weight:600;color:var(--ink-3)}
.qc-maps{white-space:nowrap}
.qc-maps .ai{width:15px;height:15px}
.qc-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:0 1.1rem;margin:0;
}
.qc-facts > div{min-width:0;padding:.45rem 0;border-bottom:1px solid var(--hair)}
.qc-facts dt{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.qc-facts dd{margin:.05rem 0 0;font-size:.93rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.qc-facts .linkish{font-size:inherit;text-align:left}
.sub.is-queue .sub-diff{margin-bottom:.1rem}
.sub.is-queue .sub-h{margin:.75rem 0 .35rem}
.sub.is-queue .sub-actions{position:sticky;top:calc(62px + 1rem);align-content:start;gap:.4rem;padding:.75rem;border-radius:16px;background:var(--cream);border:1px solid var(--hair)}
.sub-act-k{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.1rem}
.sub.is-queue .sub-actions .btn{justify-content:center;padding:.6rem 1rem;font-size:.95rem}
.sub-act-note{margin-top:.3rem;font-size:.78rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
/* narrow: the listing, then the buttons under it — after the rules above,
   so it wins over them */
@container (max-width:640px){
  .sub.is-queue{grid-template-columns:minmax(0,1fr)}
  .qc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qc-hd.has-pic{grid-template-columns:80px minmax(0,1fr)}
  .qc-pic{width:80px;height:80px}
  .qc-where{grid-template-columns:auto minmax(0,1fr)}
  .qc-maps{grid-column:1 / -1;justify-self:start}
}

.tbl{display:grid;gap:.4rem}
.tr{
  display:grid;grid-template-columns:1.3fr 1.4fr 1fr .6fr .6fr;gap:1rem;align-items:baseline;
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:.85rem 1.1rem;
}
.td-name{font-family:var(--display);font-weight:700;font-size:1.05rem}
.td-loc,.td-hrs{font-size:.9rem;color:var(--ink-2)}
.td-tip{font-family:var(--display);font-weight:700;color:var(--coral)}
.td-go{text-align:right;font-weight:700;font-size:.9rem}
.td-go a{color:var(--forest-700);text-decoration:none}
.td-go a:hover{color:var(--coral)}
.td-go em{font-style:normal;color:var(--leaf);font-size:.85rem}

@media(max-width:900px){
  .sub{grid-template-columns:1fr}
  /* The main action takes the full row, the other two share the next. A fixed
     three-across crushed "Approve & publish" to ~70px on a phone, and left a
     report's single "Mark handled" button at a third of the width. Auto-fit
     was no better: it split three buttons 2 + 1 and stranded "Decline". */
  .sub-actions{grid-template-columns:1fr 1fr}
  .sub-actions .btn-lemon{grid-column:1 / -1}
  .tr,.merch-tbl .tr{grid-template-columns:1fr 1fr;row-gap:.3rem}
  .td-go{text-align:left}
}
/* The same split by the room the table actually has. Between 901 and 1100px
   the sidebar still takes 240px, which left five columns in ~610px — the
   window was wide enough for the rule above not to fire, the table was not. */
@container (max-width:760px){
  .tr,.merch-tbl .tr{grid-template-columns:1fr 1fr;row-gap:.3rem}
  .td-go{text-align:left}
}

/* ── saved stands: a list, not six full cards ─────────── */
.savedlist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.savedrow{
  position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--e1);overflow:hidden;
  transition:box-shadow .25s var(--ease),border-color .25s;
}
.savedrow:hover{box-shadow:var(--e2);border-color:var(--hair-2)}
.sr-face{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:1rem;align-items:center;
  text-decoration:none;color:inherit;padding:.7rem 3.4rem .7rem .7rem;
}
.sr-shot{width:88px;height:66px;object-fit:cover;border-radius:11px;display:block}
.sr-body{display:grid;gap:.15rem;min-width:0}
.sr-town{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.sr-body strong{
  font-family:var(--display);font-size:1.18rem;font-weight:800;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.2rem}
.sr-meta .status{font-size:.8rem;padding:.08rem .6rem .08rem .45rem}
.sr-hrs{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.savedrow .heart{top:50%;right:.8rem;translate:0 -50%;width:34px;height:34px;box-shadow:none;background:var(--cream-2)}
.savedrow .heart:hover{transform:none;scale:1.1;background:#fff}

/* ═══════════════════════════════════════════════════════
   STAND MODAL
   ═══════════════════════════════════════════════════════ */
/* photo banner carries the name, so no separate dark header */
.sm-shot{
  position:relative;margin:0;line-height:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;
}
.sm-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sm-shot.has-photo img{object-fit:contain}
.sm-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,40,27,.15) 0%,transparent 34%,rgba(7,40,27,.82) 100%);
}
.sm-shot figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;line-height:1.3;
  padding:1.4rem clamp(1.3rem,3vw,2rem);display:grid;gap:.3rem;justify-items:start;
}
.sm-shot h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.05;overflow-wrap:anywhere}
.sm-shot figcaption p{color:rgba(255,255,255,.82);font-weight:600;font-size:.98rem}
.sm-shot .status.on-shot{position:static;margin-bottom:.2rem}
/* the caption is in the photo's own grid cell, not pinned over it: a long stand
   name makes the banner taller instead of pushing "Open today" off the top
   (seen at 320px with a 60-letter name, 2026-10-14) */
.sm-shot{display:grid;background:linear-gradient(180deg,var(--forest-700),var(--forest-900))}
.sm-shot > img,.sm-shot > figcaption{grid-area:1 / 1}
.sm-shot > img{align-self:start}
.sm-shot figcaption{position:relative;inset:auto;align-self:end}

/* one horizontal strip of facts, no boxes */
.sm-facts{
  list-style:none;margin:0;padding:1.1rem clamp(1.3rem,3vw,2rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  background:var(--cream-2);border-bottom:1px solid var(--hair);
}
.sm-facts li{display:grid;gap:.05rem;min-width:0}
.sm-facts span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sm-facts b{font-family:var(--display);font-size:1.06rem;font-weight:700;line-height:1.25}
.sm-tip b{color:var(--coral)}

.modal-bd .sm-story{font-size:1.06rem;line-height:1.65;color:var(--ink-2)}
.sm-cols{
  display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--hair);
}
.sm-cols h4,.modal-bd section h4{margin-bottom:.6rem}
.sm-addr{display:flex;gap:.45rem;font-size:1rem;color:var(--ink-2);margin-bottom:.7rem}
.sm-addr svg{width:15px;height:15px;flex:none;fill:var(--coral);margin-top:.3em}
.sm-hours{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.sm-hours li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.45rem .8rem;background:var(--cream-2);border-radius:10px;font-size:.94rem;
}
.sm-hours b{font-family:var(--display)}
.sm-hours span{color:var(--ink-2);font-weight:600}
.modal-bd > section{padding-top:1.3rem;border-top:1px solid var(--hair)}
.sm-actions{
  display:flex;gap:.6rem;flex-wrap:wrap;
  padding-top:1.3rem;border-top:1px solid var(--hair);
}
.sm-actions .btn{flex:1 1 auto}

@media(max-width:640px){
  .sm-facts{grid-template-columns:repeat(2,1fr);gap:.9rem 1rem}
  .sm-cols{grid-template-columns:1fr;gap:1.3rem}
  .sm-cols > section + section{padding-top:1.3rem;border-top:1px solid var(--hair)}
}


/* ── owner + manage ───────────────────────────────────── */
/* the quiet strip under a listing: the two things only an owner or a
   worried neighbour ever needs, kept out of the way of everyone else */
.owner-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:1.3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hair);
  font-size:.92rem;font-weight:600;color:var(--ink-3);
}
.owner-row .linkish{font-size:.92rem}
.owner-row .linkish.quiet{color:var(--ink-3)}
.owner-row .linkish.quiet:hover{color:var(--coral)}
.listing-side .owner-row{margin-top:0;border-top:0;padding-top:0;justify-content:center;text-align:center}
/* on a phone the row wraps: the dot between the two links goes, and each link
   gets a thumb-sized tap area without looking any bigger (2026-10-14) */
@media (max-width:520px){ .owner-row > span[aria-hidden]{display:none} .owner-row{column-gap:1rem} }
@media (pointer:coarse){
  .owner-row .linkish{padding:.6rem .2rem;margin:-.6rem -.2rem}
  .tip-msg-row .linkish{padding:.65rem .5rem;margin:-.65rem -.5rem}   /* the tip popup's Copy */
}

/* the three-step explainer above the email field */
.howlink{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:none}
.howlink li{
  display:grid;grid-template-columns:26px 1fr;gap:.7rem;align-items:start;
  font-size:.96rem;line-height:1.55;color:var(--ink-2);
}
.howlink b{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lemon);color:var(--forest-900);
  font-family:var(--display);font-size:.86rem;
}

/* local stand-in for the mail that is not wired yet */
.outbox{
  border:1.5px dashed var(--hair-2);border-radius:var(--r);
  background:var(--cream-2);padding:1rem 1.1rem;display:grid;gap:.5rem;
}
.ob-k{
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);
}
.outbox p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-3)}
.ob-link{
  font-family:var(--display);font-size:.9rem;font-weight:700;word-break:break-all;
  color:var(--forest-600);background:#fff;border:1px solid var(--hair);
  border-radius:10px;padding:.6rem .75rem;
}
.ob-link:hover{background:var(--lemon-300);color:var(--forest-900)}
.dev-hint{margin:0;color:var(--ink-3)}
.dev-hint b{color:var(--forest-600)}

/* the manage screen */
.mg-hero .factrow li:last-child b{font-size:1rem;word-break:break-all}
.mg-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.mg-main{min-width:0}
.mg-form{
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--e1);
}
.mg-h{margin:0;font-size:clamp(1.4rem,3vw,1.8rem)}
.mg-form .fine{margin-top:-.4rem}
.mg-side{display:grid;gap:1rem;position:sticky;top:1.5rem}
.sidecard.danger{border-color:rgba(228,87,46,.28)}
.sidecard.danger h3{color:var(--coral)}
.mg-danger{border-color:rgba(228,87,46,.4);color:var(--coral)}
.mg-danger:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)}
.mg-danger[disabled]{opacity:.5;pointer-events:none}

@media (max-width:900px){
  .mg-grid{grid-template-columns:1fr}
  .mg-side{position:static}
}


/* ── mobile drawer ───────────────────────────────── */
/* A side sheet, not a dropdown: three quarters of the screen, floor to
   ceiling, over a page that is blurred and held still. Nothing dismisses on
   the scrim — on a phone, the edge of the screen is where thumbs live. */
.dr-scrim{
  position:fixed;inset:0;z-index:150;
  background:rgba(7,40,27,.52);
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.dr-scrim.on{
  opacity:1;pointer-events:auto;
  backdrop-filter:blur(10px) saturate(.82);
  -webkit-backdrop-filter:blur(10px) saturate(.82);
}
.drawer{
  position:fixed;inset:0 0 0 auto;z-index:151;
  width:75vw;height:100dvh;
  display:none;grid-template-rows:auto auto 1fr auto;
  background:linear-gradient(200deg,var(--forest-800),var(--forest-900) 62%);
  color:var(--cream);box-shadow:-24px 0 60px -20px rgba(7,40,27,.55);
  translate:100% 0;transition:translate .38s var(--spring);
  overflow:hidden;isolation:isolate;
}
.drawer.on{translate:0 0}
.dr-glow{
  position:absolute;inset:-30% -40% auto auto;width:420px;height:420px;z-index:-1;
  background:radial-gradient(circle,rgba(255,214,23,.20),transparent 62%);
}
.dr-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem .4rem 1.3rem;
}
.dr-logo{height:56px;width:auto;filter:drop-shadow(0 0 16px rgba(255,214,23,.26))}
.dr-search{
  display:flex;align-items:center;gap:.6rem;margin:.6rem 1.3rem 1rem;
  background:rgba(255,252,242,.09);border:1px solid var(--hair-dark);
  border-radius:999px;padding:.62rem .95rem;
}
.dr-search svg{width:17px;height:17px;flex:none;fill:none;stroke:rgba(255,252,242,.6);stroke-width:2.3;stroke-linecap:round}
/* 16px, not .98rem: iOS Safari zooms the whole page when a field under 16px
   takes focus, and never zooms back out. This field only exists on phones.
   (It also pointed at var(--body), which is not defined anywhere.) */
.dr-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--ui);font-size:16px;font-weight:600;color:var(--cream);
}
.dr-search input::placeholder{color:rgba(255,252,242,.45)}
/* seven rows, each led by a small coin with its mark; the page you are on is a
   lit row with a full lemon coin (refreshed 2026-10-14) */
.dr-nav{display:flex;flex-direction:column;gap:.2rem;overflow-y:auto;padding:0 .8rem;min-height:0}
.dr-nav a{
  position:relative;display:flex;align-items:center;gap:.85rem;
  padding:.6rem .8rem .6rem .55rem;min-height:54px;border-radius:16px;
  font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.005em;
  color:rgba(255,252,242,.92);text-decoration:none;border:1px solid transparent;
  transition:color .18s,background .2s,border-color .2s;
}
.dr-ico{
  display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:rgba(255,214,23,.1);box-shadow:inset 0 0 0 1px rgba(255,214,23,.22);
  transition:background .2s,box-shadow .2s,rotate .35s var(--spring);
}
.dr-ico svg{width:18px;height:18px;fill:none;stroke:var(--lemon);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dr-nav a::after{
  content:"\2192";margin-left:auto;color:var(--lemon);
  opacity:0;translate:-6px 0;transition:opacity .22s,translate .22s var(--ease);
}
.dr-nav a:hover,.dr-nav a:focus-visible{color:var(--lemon);background:rgba(255,252,242,.05)}
.dr-nav a:hover .dr-ico{rotate:-8deg}
.dr-nav a:hover::after,.dr-nav a:focus-visible::after{opacity:1;translate:0 0}
.dr-nav a[aria-current]{color:var(--lemon);background:rgba(255,214,23,.09);border-color:rgba(255,214,23,.22)}
.dr-nav a[aria-current] .dr-ico{background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 58%,var(--lemon-600));box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.dr-nav a[aria-current] .dr-ico svg{stroke:var(--forest-900)}
.dr-nav a[aria-current]::after{content:"\2022";opacity:1;translate:0 0}
/* Facebook and Ko-fi: the footer's pills, two across */
.dr-socials{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dr-socials .foot-social{justify-content:center}
/* a short phone (iPhone SE and the like): everything a notch tighter so all seven fit */
@media (max-height:720px){
  .dr-top{padding-top:.6rem;padding-bottom:.2rem}
  .dr-logo{height:44px}
  .drawer .dr-search{margin:.35rem 1.1rem .55rem;padding:.5rem .9rem}
  .drawer .dr-nav{gap:.1rem}
  .drawer .dr-nav a{min-height:45px;padding-block:.3rem}
  .dr-ico{width:32px;height:32px}
  .dr-ico svg{width:16px;height:16px}
  .drawer .dr-foot{gap:.45rem;padding-top:.6rem}
  .drawer .dr-foot .btn-lg{padding-block:.75rem}
  .dr-saved{padding-block:.55rem}
}
.drawer.on .dr-nav a{animation:drIn .42s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes drIn{from{opacity:0;translate:14px 0}}
.dr-foot{display:grid;gap:.7rem;padding:1rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom))}
.dr-foot .btn{width:100%;justify-content:center}
.dr-saved{
  display:flex;align-items:center;gap:.6rem;width:100%;cursor:pointer;
  background:rgba(255,252,242,.07);border:1px solid var(--hair-dark);border-radius:999px;
  padding:.68rem 1rem;font-weight:700;font-size:.94rem;color:rgba(255,252,242,.88);
  transition:background .2s,border-color .2s,color .2s;
}
.dr-saved:hover{background:rgba(255,214,23,.13);border-color:rgba(255,214,23,.4);color:var(--lemon)}
.dr-saved .hrt{width:17px;height:17px;flex:none;fill:none;stroke:var(--coral);stroke-width:2.2}
.dr-saved b{margin-left:auto;font-family:var(--display);color:var(--lemon)}

@media(max-width:780px){
  .drawer{display:grid}
  /* On a phone the report button is the thing worth reaching, so it sits
     above the rule at full width; the rule and the fine print close the
     footer underneath it. */
  .foot-base{
    flex-direction:column;align-items:center;text-align:center;gap:0;
    border-top:0;padding-top:0;margin-top:2.2rem;
  }
  .report-btn{
    order:-1;width:100%;max-width:360px;
    padding:.78rem 1.4rem;font-size:.94rem;margin-bottom:1.6rem;
  }
  .foot-copy{
    order:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem;
    border-top:1px solid var(--hair-dark);padding-top:1.4rem;
  }
  .foot-dash{display:none}
  .foot-brand{text-align:center;justify-items:center}
  .foot-tag{margin-inline:auto}
  .foot-socials{justify-content:center}
}


/* ── admin panels ─────────────────────────────────────── */
.adm-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.6rem;align-items:start}
.adm-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:var(--e1)}
/* clears the sticky admin header, 62px */
.adm-aside{display:grid;gap:1rem;position:sticky;top:calc(62px + 1rem)}
.merch-tbl .tr{grid-template-columns:minmax(0,1.4fr) 1fr .7fr .8fr auto}
.mstat{font-style:normal;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.2rem .55rem}
.mstat.live{background:rgba(63,163,77,.14);color:var(--forest-700)}
.mstat.soon{background:var(--cream-3);color:var(--ink-3)}
.mstat.hidden{background:rgba(228,87,46,.12);color:var(--coral)}
.td-go .linkish{margin-left:.6rem;font-size:.84rem}

@media(max-width:900px){
  .adm-cols{grid-template-columns:1fr}
  .adm-aside{position:static}
}


/* ── the bot check ───────────────────────────── */
/* Cloudflare draws the widget in an iframe it owns, so the job here is only
   to give it room and stop it looking bolted on. Zero height until it
   renders, so a form never opens with a gap waiting to be filled. */
.guard{ margin:.2rem 0 .1rem; min-height:0; }
.guard.ready{ min-height:65px; }
.guard iframe{ border-radius:10px; max-width:100%; }
/* 'compact' is 150x140. Chosen by mountGuard() when the form is narrower than
   the 300px 'flexible' needs — which is every popup form on a phone. */
.guard.compact{ display:flex; justify-content:center; }
.guard.ready.compact{ min-height:140px; }


/* ═══════════════════════════════════════════════════════════
   MOBILE PASS

   Everything below exists for phones and touch screens. It sits last on
   purpose, so it wins over the desktop rules without a single !important.
   The aim throughout: nothing pushes the page sideways, nothing sticks after
   a tap, and no space on a small screen is spent on nothing.
   ═══════════════════════════════════════════════════════════ */

/* ── two-tap confirms in a side card stack, full width ──── */
/* A side card is ~300px even on desktop, so "Yes, take it down" and "Keep it
   up" never fit side by side — they wrapped into two lopsided rows. */
.sidecard .btn-row{display:grid;grid-template-columns:1fr;gap:.45rem;margin-top:0}
.sidecard .btn-row .btn{width:100%}

/* ── the 404 hint speaks to whichever device is reading it ─ */
.on-touch{display:none}
@media (hover:none){ .on-touch{display:inline} .on-mouse{display:none} }

/* ── a tap is not a hover ────────────────────────────────
   On a touch screen :hover switches on when you tap and stays on until you tap
   something else, so every lift, zoom and tilt below got stuck in its hovered
   pose. Movement only — colour changes on tap are harmless and stay. */
@media (hover:none){
  .btn:hover,.card:hover,.rcard:hover,
  .hook:hover,.bt-foot:hover,.report-btn:hover{translate:none}
  .card:hover .card-shot img{scale:none}
  .heart:hover{transform:none}
  .brand:hover img{scale:none;filter:drop-shadow(0 2px 3px rgba(7,40,27,.14))}
  .report-btn:hover .rb-flag{rotate:none}
  .savedrow .heart:hover{scale:none}
}

/* ── bigger targets for a finger ─────────────────────────── */
@media (pointer:coarse){
  .sel-opt{padding:.72rem .85rem}
  .toast .t-x{padding:.4rem .5rem;font-size:1rem}
  .cx-vote{padding:.56rem .95rem}
}

/* ── tablets and phones ──────────────────────────────────── */
@media (max-width:780px){
  /* vertical rhythm: 32px between sections instead of 48 top and bottom */
  .section{padding:2rem 0}
  .section.tuck{padding-bottom:1.3rem}
  .hero{padding:1.3rem 0 2.1rem}
  .phero{padding:1rem 0 1.5rem}
  .crumbs{margin-bottom:1rem;font-size:.84rem}
  .sec-head{margin-bottom:1.3rem;gap:.45rem}
  .sec-cta{margin-top:1.4rem}
  .sec-note{font-size:1rem}
  .lede{font-size:1.04rem;margin-top:.8rem}
  .hero-stack .lede{margin-top:.8rem}
  .hero-stack.left .lede{margin-top:.6rem}
  .kicker,.eyebrow{margin-bottom:.8rem}
  .fine{margin-top:.6rem}

  /* home hero */
  .bigsearch{margin-top:1.4rem}
  .quick{margin-top:.8rem}
  .hero-stack .trust{margin-top:1.1rem}
  .trust{gap:.4rem}
  .lb-inner{gap:.8rem;min-height:46px}
  .lb-list a{padding:.25rem .8rem}

  /* stats: a 2x2 square, not four full-width slabs */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}
  .stats{padding:1.4rem 0 1.8rem}
  .stat{padding:1rem 1.05rem;border-radius:var(--r)}
  .stat b{font-size:clamp(1.8rem,8vw,2.3rem)}
  .stat>span{font-size:.84rem;line-height:1.35}
  .stat em{font-size:.78rem;margin-top:.35rem}

  .coverage{margin-bottom:1.2rem}

  /* the footer: one tight block, links flowing inline under each heading */
  .site-foot{padding:1.8rem 0 1.1rem}
  .foot-grid{gap:1.2rem}
  /* the footer is centred on a phone, and an image is a block, so the text
     centring never reached the logo — it sat off to the left on its own */
  .foot-logo{height:72px;margin-inline:auto}
  .foot-tag{font-size:1rem;margin-top:.55rem}
  .foot-grid > nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem 1.1rem;text-align:center}
  .foot-grid > nav h4{flex:1 0 100%;margin-bottom:.3rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
  .foot-grid > nav a{width:auto;font-size:.92rem;padding:.28rem 0}
  .foot-base{margin-top:1.4rem}
  .report-btn{margin-bottom:1.1rem}
  .foot-copy{padding-top:1rem}

  /* the side sheet */
  .dr-top{padding:.8rem .9rem .3rem 1.1rem}
  .dr-logo{height:52px}
  .dr-search{margin:.4rem 1.1rem .7rem}
  .dr-nav a{min-height:50px;padding:.45rem .7rem .45rem .5rem}
  .dr-foot{padding:.8rem 1.1rem calc(1rem + env(safe-area-inset-bottom));gap:.55rem}

  /* county index */
  .county-groups{gap:1.6rem}
  .cg-head{margin-bottom:.7rem}
  .cg-head h3{font-size:1.35rem}

  /* home: the two hooks */
  .hooks{gap:.8rem}
  .hook{padding:1.25rem;border-radius:var(--r-lg)}
  .hook h3{font-size:1.45rem}
  .hook-ico{font-size:1.8rem;margin-bottom:.3rem}
  .hook-go{margin-top:.6rem}

  /* stand page */
  .listing{gap:1.2rem;padding:1.1rem 0 1.8rem}
  .blk{padding:1.3rem 0}
  .blk h2{font-size:1.35rem;margin-bottom:.6rem}
  .glance{margin-bottom:1.3rem;gap:.55rem}
  .glance li{padding:.7rem .8rem}
}

/* On a phone the stand page's sidebar moves above the story, and its "Stand
   card" repeats Run by / Town / County / Since — all four already shown in the
   hero, the tiles and the byline. Four facts twice is four facts too many. */
@media (max-width:940px){
  .listing-side .sidecard{display:none}
}

/* ── phones ──────────────────────────────────────────────── */
@media (max-width:620px){
  /* Fact rows become one tidy list with each number beside its label, rather
     than a stack of tall two-line cells. Triple class so it outranks the
     :has() column counters above without resorting to !important. */
  .factrow.factrow.factrow{grid-template-columns:1fr;gap:0;margin-top:1.1rem}
  .factrow.factrow.factrow > li{
    display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7rem;row-gap:0;
    padding:.6rem 0;margin:0;border-top:1px solid var(--hair);
  }
  .factrow.factrow.factrow > li:first-child{border-top:0}
  .factrow.factrow.factrow > li::before,
  .factrow.factrow.factrow > li::after{display:none}
  .factrow.factrow.factrow b{flex:0 1 auto;min-width:0;font-size:1.35rem;overflow-wrap:anywhere}
  .factrow.factrow.factrow span{line-height:1.35}
  .mg-hero .factrow.factrow.factrow li:last-child b{font-size:1rem}
}

@media (max-width:560px){
  /* cards and panels: about 16px of padding, not 24–32 */
  .card-body{padding:.95rem 1rem 1rem}
  .card-foot{margin:0 1rem 1rem;padding-top:.75rem}
  .card h3{font-size:1.28rem}
  .stand-grid{gap:.9rem}
  .steps{gap:.7rem}
  .steps li{padding:1.1rem 1.05rem}
  .step-n{width:40px;height:40px;margin-bottom:.7rem;font-size:1.05rem}
  .sidecard{padding:1.05rem}
  .mg-form,.adm-form{padding:1.1rem}
  .tipcard{padding:1.1rem;gap:.6rem}
  .board-today{padding:1.1rem}
  .blank{padding:1.6rem .5rem}
  .blank-ico{width:64px;height:64px;font-size:2rem}
  .addr{padding:.95rem 1rem}

  /* six regions as two columns of compact cards, not six full-width slabs */
  .region-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .rcard{padding:.9rem;border-top-width:3px}
  .rcard b{font-size:1.08rem}
  .rc-blurb{font-size:.84rem}
  .rc-foot{margin-top:.6rem}

  /* the search pill wraps into input-over-button, so it needs less padding */
  .bigsearch{padding:.6rem;gap:.5rem}
  .bigsearch input{padding:.5rem .5rem}

  /* admin cards */
  .sub-list{gap:.7rem}
  .sub{padding:1.05rem;gap:1rem}
  .sub h3{font-size:1.25rem}
  .sub-facts{gap:.5rem;margin-top:.8rem;padding-top:.75rem}

  /* admin tables: each row reads as a small card —
     name ........ tipped
     town · county
     hours ....... open        */
  .tr,.merch-tbl .tr{
    grid-template-columns:minmax(0,1fr) auto;column-gap:.8rem;row-gap:.2rem;
    padding:.75rem .9rem;align-items:center;
  }
  .tr .td-name{grid-column:1;grid-row:1}
  .tr .td-tip{grid-column:2;grid-row:1;text-align:right}
  .tr .td-loc{grid-column:1 / -1;grid-row:2}
  .tr .td-hrs{grid-column:1;grid-row:3}
  .tr .td-go{grid-column:2;grid-row:3;text-align:right}

  /* ── popups ── */
  /* less frame around the panel, so the panel gets the screen */
  .scrim-pad{padding:.7rem .55rem}
  .modal{border-radius:24px}
  .modal-hd{padding:1.35rem 4rem 1.05rem 1.1rem;border-radius:24px 24px 0 0}
  .modal-hd h2{font-size:1.6rem}
  .modal-hd .where{font-size:.94rem}
  .modal-bd{padding:1.1rem 1.1rem 1.25rem;gap:1rem;border-radius:0 0 24px 24px}
  .modal > #modalBody > *:first-child{border-top-left-radius:24px;border-top-right-radius:24px}
  .modal-x{top:10px;right:10px}
  /* a 16:9 photo on a phone is ~160px tall — shorter than the caption it
     carries, which then crept up under the close button */
  .sm-shot{border-radius:24px 24px 0 0}
  .sm-shot img{aspect-ratio:4/3}
  .sm-shot figcaption{padding:1rem 1.1rem}
  .sm-shot h2{font-size:1.6rem}
  .sm-facts{padding:.85rem 1.1rem;gap:.7rem .9rem}
  .sm-cols{gap:1rem;padding-top:1rem}
  .modal-bd > section,.sm-actions{padding-top:1rem}
  .owner-row{margin-top:1rem;padding-top:.9rem}
  /* tip across the top, save and full page underneath (the share button, a
     later addition, takes a row of its own — see the share-card rules below) */
  .sm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .sm-actions .btn-lemon{grid-column:1 / -1}
  .tip-total{padding:.85rem 1rem}
  .tip-total b{font-size:1.6rem}
  .form{gap:.85rem}
  .form textarea{min-height:104px}
}

/* ── small phones ────────────────────────────────────────── */
@media (max-width:480px){
  .wrap{width:min(100% - 2rem,var(--wrap))}
  h2{font-size:1.75rem}
  .hero-stack h1{font-size:clamp(2.15rem,10vw,2.8rem)}
  .listing-hero h1{font-size:clamp(2rem,9.5vw,2.6rem)}
  /* the fourth stat's footnote repeats its own label */
  .stat em{display:none}
  /* four tiles make a square; three still go to one column */
  .glance{grid-template-columns:repeat(2,1fr)}
}

/* below ~420px two buttons side by side cannot hold "Ask for changes" */
@media (max-width:420px){
  .sub-actions{grid-template-columns:1fr}
}

@media (max-width:360px){
  .region-grid{grid-template-columns:1fr}
}


/* ── date field ──────────────────────────────────────────
   A native <input type="date"> opens the browser's own picker popup, which
   this site never shows. Same arrangement as the custom select: the real input
   stays in the form holding YYYY-MM-DD so FormData is untouched, and the
   trigger and month grid are drawn on top. */
.dp-input{
  position:absolute;top:0;left:0;width:1px;height:1px;padding:0;border:0;margin:0;
  opacity:0;pointer-events:none;clip-path:inset(50%);
}
.dp .cal{width:18px;height:18px;flex:none;color:var(--ink-3)}
.dp[data-open] .cal{color:var(--forest-700)}
.dp-pop{
  position:absolute;top:calc(100% + .45rem);left:0;z-index:40;
  width:min(304px,100%);padding:.65rem;
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--e4);
  display:none;
}
.dp[data-open] .dp-pop{display:block;animation:selIn .18s var(--ease)}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.4rem}
.dp-title{font-family:var(--display);font-weight:800;font-size:1.02rem}
.dp-nav{
  width:36px;height:36px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:10px;border:1px solid var(--hair);background:#fff;color:var(--ink);
}
.dp-nav:hover{border-color:var(--forest-600)}
.dp-nav svg{width:16px;height:16px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-dow{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:.2rem 0}
.dp-day{
  aspect-ratio:1;min-width:0;border:0;background:none;border-radius:9px;cursor:pointer;
  font-weight:700;font-size:.9rem;color:var(--ink);padding:0;
}
.dp-day:hover{background:var(--cream-2)}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.dp-day[aria-selected="true"]{background:var(--forest-800);color:var(--cream)}
.dp-day:focus-visible{outline:2px solid var(--lemon-600);outline-offset:1px}
.dp-foot{display:flex;justify-content:space-between;gap:.5rem;margin-top:.45rem;padding-top:.45rem;border-top:1px solid var(--hair)}
.dp-foot .linkish{font-size:.86rem}


/* ═══════════════════════════════════════════════════════════
   PUBLIC PAGES — Find a stand · How it works · Shop · Contact
   Rebuilt 2026-09-26. The four share one compact header: the title and what
   the page is for on the left, its live numbers or promises on the right,
   and a lemon slice turning slowly behind. Sections sit close together, and
   every page closes on the same lemon card. All of it is prefixed (pg- dir-
   dl- dt- hw- sp- ct- fq-) so none of it reaches the pages left as they were.
   ═══════════════════════════════════════════════════════════ */

/* ── the shared header ── */
.pg-hero{position:relative;overflow:hidden;isolation:isolate;padding:1.1rem 0 clamp(1.6rem,3vw,2.5rem)}
.pg-hero > .wrap{position:relative;z-index:1}
.pg-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(540px,70vw);aspect-ratio:1;top:-170px;
  right:max(-140px,calc((100vw - var(--wrap)) / 2 - 190px));
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2797%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.30%27 stroke-width=%275%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2788%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.16%27 stroke-width=%273%27/%3E%3Cpath fill=%27%23FFD617%27 fill-opacity=%27.20%27 d=%27M101.8 89.1L103.2 22.1A78 78 0 0 1 143.2 35.1L105.0 90.2ZM107.8 92.2L148.4 38.8A78 78 0 0 1 173.1 72.9L109.8 95.0ZM110.9 98.3L175.1 79.0A78 78 0 0 1 175.1 121.0L110.9 101.7ZM109.8 105.0L173.1 127.1A78 78 0 0 1 148.4 161.2L107.8 107.8ZM105.0 109.8L143.2 164.9A78 78 0 0 1 103.2 177.9L101.8 110.9ZM98.2 110.9L96.8 177.9A78 78 0 0 1 56.8 164.9L95.0 109.8ZM92.2 107.8L51.6 161.2A78 78 0 0 1 26.9 127.1L90.2 105.0ZM89.1 101.7L24.9 121.0A78 78 0 0 1 24.9 79.0L89.1 98.3ZM90.2 95.0L26.9 72.9A78 78 0 0 1 51.6 38.8L92.2 92.2ZM95.0 90.2L56.8 35.1A78 78 0 0 1 96.8 22.1L98.2 89.1Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  animation:pgSpin 120s linear infinite;
}
@keyframes pgSpin{to{rotate:360deg}}
.pg-hero .crumbs{margin-bottom:clamp(.8rem,1.8vw,1.3rem)}
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,390px);gap:clamp(1.4rem,3.6vw,3.4rem);align-items:center}
.pg-copy{min-width:0}
.pg-hero h1{font-size:clamp(2.3rem,4.7vw,3.7rem);line-height:1.02;letter-spacing:-.035em;max-width:17ch}
.pg-lede{margin-top:.75rem;max-width:54ch;font-size:clamp(1.02rem,1.3vw,1.13rem);line-height:1.55;color:var(--ink-2)}
.pg-act{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}

/* a short stack of promises: the number or word, then what it means */
.pg-facts{
  list-style:none;margin:0;padding:.2rem 1.2rem;display:grid;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e3);
}
.pg-facts li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.9rem;row-gap:.1rem;padding:.85rem 0;border-top:1px solid var(--hair)}
.pg-facts li:first-child{border-top:0}
.pg-f-ico{grid-row:1 / 3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--wash);color:var(--ink-tone,var(--tone))}
.pg-f-ico .ai{width:21px;height:21px}
.pg-facts b{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--forest-900)}
.pg-facts li > span:last-child{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink-3)}

/* ── sections ── */
.pg-sec{position:relative;padding:clamp(1.8rem,3.6vw,3rem) 0}
.pg-sec.tint{background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);border-block:1px solid var(--hair)}
/* clears the sticky header when a link jumps to one */
.pg-sec[id],.hw-where[id]{scroll-margin-top:84px}
.pg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;margin-bottom:1.1rem}
.pg-head h2{font-size:clamp(1.55rem,2.7vw,2.15rem);letter-spacing:-.025em}
.pg-head p{max-width:54ch;font-size:.98rem;font-weight:600;color:var(--ink-3)}

/* ── the closing card every page ends on ── */
.pg-cta{padding:0 0 clamp(2rem,4vw,3.2rem)}
/* After a tinted band the card would sit right on the band's bottom hairline
   (the band's own padding is inside its border), so it gets the same room
   above as it has below. After a plain section that section's padding does it. */
.pg-sec.tint + .pg-cta{padding-top:clamp(2rem,4vw,3.2rem)}
.pg-cta-in{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.8rem;
  padding:clamp(1.25rem,2.6vw,1.9rem) clamp(1.25rem,3vw,2.3rem);border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--lemon) 0%,var(--lemon-600) 100%);color:var(--forest-900);
  box-shadow:var(--glow-lemon);
}
.pg-cta-in::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:300px;aspect-ratio:1;right:-70px;top:50%;translate:0 -50%;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2797%27 fill=%27none%27 stroke=%27%23FFFCF2%27 stroke-opacity=%27.55%27 stroke-width=%275%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2788%27 fill=%27none%27 stroke=%27%23FFFCF2%27 stroke-opacity=%27.35%27 stroke-width=%273%27/%3E%3Cpath fill=%27%23FFFCF2%27 fill-opacity=%27.30%27 d=%27M101.8 89.1L103.2 22.1A78 78 0 0 1 143.2 35.1L105.0 90.2ZM107.8 92.2L148.4 38.8A78 78 0 0 1 173.1 72.9L109.8 95.0ZM110.9 98.3L175.1 79.0A78 78 0 0 1 175.1 121.0L110.9 101.7ZM109.8 105.0L173.1 127.1A78 78 0 0 1 148.4 161.2L107.8 107.8ZM105.0 109.8L143.2 164.9A78 78 0 0 1 103.2 177.9L101.8 110.9ZM98.2 110.9L96.8 177.9A78 78 0 0 1 56.8 164.9L95.0 109.8ZM92.2 107.8L51.6 161.2A78 78 0 0 1 26.9 127.1L90.2 105.0ZM89.1 101.7L24.9 121.0A78 78 0 0 1 24.9 79.0L89.1 98.3ZM90.2 95.0L26.9 72.9A78 78 0 0 1 51.6 38.8L92.2 92.2ZM95.0 90.2L56.8 35.1A78 78 0 0 1 96.8 22.1L98.2 89.1Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  animation:pgSpin 90s linear infinite reverse;
}
.pg-cta-in > div:first-child{max-width:56ch}
.pg-cta-in h2{font-size:clamp(1.45rem,2.6vw,1.95rem);letter-spacing:-.022em}
.pg-cta-in p{margin-top:.3rem;font-weight:600;line-height:1.5;color:rgba(7,40,27,.74)}
.pg-cta-act{display:flex;flex-wrap:wrap;gap:.55rem}
.pg-cta-in .btn-ghost{--fg:var(--forest-900);box-shadow:inset 0 0 0 1.5px rgba(7,40,27,.28)}
.pg-cta-in .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--forest-800)}
.fq + .pg-cta-in{margin-top:1.2rem}

/* ── questions and answers ── */
/* two independent columns, so opening one answer never reshuffles the other */
.fq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;align-items:start}
.fq-col{display:grid;gap:.6rem;min-width:0}
.fq details{background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fq details[open]{border-color:var(--hair-2);box-shadow:var(--e2)}
.fq summary{
  list-style:none;cursor:pointer;position:relative;padding:.9rem 3.1rem .9rem 1.05rem;
  font-family:var(--display);font-size:1.05rem;font-weight:700;line-height:1.3;transition:background .15s;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{
  content:"";position:absolute;right:.95rem;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M6 1.5v9M1.5 6h9%27 stroke=%27%230C3A28%27 stroke-width=%272%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 11px no-repeat;
  transition:rotate .3s var(--spring),background-color .2s;
}
.fq summary:hover{background:var(--cream)}
.fq details[open] summary::after{rotate:45deg;background-color:var(--lemon)}
.fq details p{padding:0 1.05rem 1rem;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.fq details a{color:var(--forest-700);font-weight:700}
.fq details a:hover{color:var(--coral)}

/* ── Find a stand ── */
/* the page has its own search, so the header's stands down, as on home —
   the nav stays exactly where it is on every other page */
body[data-page="stands"] .head-search{display:none}

.dir-search{
  display:flex;align-items:center;gap:.55rem;width:min(100%,600px);margin-top:1.15rem;
  padding:.3rem .35rem .3rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:999px;
  box-shadow:var(--e3);transition:border-color .2s,box-shadow .2s;
}
.dir-search:focus-within{border-color:var(--forest-600);box-shadow:var(--e3),0 0 0 5px rgba(63,163,77,.15)}
.dir-search > .ai{width:20px;height:20px;color:var(--ink-3);stroke-width:2.2}
.dir-search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:.74rem 0;font-size:1.06rem;font-weight:600}
.dir-search input::placeholder{color:var(--ink-3);font-weight:500}
.dir-search input::-webkit-search-cancel-button{display:none}
.dir-kbd{
  flex:none;margin-right:.6rem;font-family:var(--display);font-size:.8rem;font-weight:700;color:var(--ink-3);
  background:var(--cream-2);border:1px solid var(--hair);border-radius:6px;padding:.02rem .42rem;transition:opacity .15s;
}
.dir-search:focus-within .dir-kbd{opacity:0}
.dir-search.has-q .dir-kbd{display:none}
.dir-clear{
  flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--cream-2);color:var(--ink-2);transition:background .15s,color .15s;
}
.dir-clear:hover{background:var(--cream-3);color:var(--ink)}
.dir-clear .ai{width:15px;height:15px;stroke-width:2.6}
.dir-clear[hidden]{display:none}
/* the / shortcut only means something with a keyboard */
@media (hover:none){ .dir-kbd{display:none} }

.dir-try{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem;margin-top:.75rem;font-size:.88rem;font-weight:700;color:var(--ink-3)}
.dir-try:empty{display:none}
.dir-try > span{margin-right:.15rem}
.dir-try button{
  border:0;cursor:pointer;font:inherit;font-weight:700;color:var(--forest-700);
  background:rgba(63,163,77,.1);border-radius:999px;padding:.16rem .75rem;transition:background .15s,color .15s;
}
.dir-try button:hover{background:var(--forest-800);color:var(--cream)}
@media (pointer:coarse){ .dir-try button{padding:.3rem .8rem} }

/* today across the state: a dark card, like the board on the home page */
.dt{
  position:relative;overflow:hidden;isolation:isolate;display:grid;gap:.75rem;
  padding:1.05rem 1.1rem 1.1rem;color:var(--cream);border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);box-shadow:var(--e4);
}
.dt::before{
  content:"";position:absolute;z-index:-1;right:-70px;top:-70px;width:210px;aspect-ratio:1;opacity:.6;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2797%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.30%27 stroke-width=%275%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2788%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.16%27 stroke-width=%273%27/%3E%3Cpath fill=%27%23FFD617%27 fill-opacity=%27.20%27 d=%27M101.8 89.1L103.2 22.1A78 78 0 0 1 143.2 35.1L105.0 90.2ZM107.8 92.2L148.4 38.8A78 78 0 0 1 173.1 72.9L109.8 95.0ZM110.9 98.3L175.1 79.0A78 78 0 0 1 175.1 121.0L110.9 101.7ZM109.8 105.0L173.1 127.1A78 78 0 0 1 148.4 161.2L107.8 107.8ZM105.0 109.8L143.2 164.9A78 78 0 0 1 103.2 177.9L101.8 110.9ZM98.2 110.9L96.8 177.9A78 78 0 0 1 56.8 164.9L95.0 109.8ZM92.2 107.8L51.6 161.2A78 78 0 0 1 26.9 127.1L90.2 105.0ZM89.1 101.7L24.9 121.0A78 78 0 0 1 24.9 79.0L89.1 98.3ZM90.2 95.0L26.9 72.9A78 78 0 0 1 51.6 38.8L92.2 92.2ZM95.0 90.2L56.8 35.1A78 78 0 0 1 96.8 22.1L98.2 89.1Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.dt-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.86rem;font-weight:700;color:rgba(255,252,242,.62)}
.dt-live{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:1rem;font-weight:800;color:var(--lemon)}
.dt-live i{width:8px;height:8px;border-radius:50%;background:var(--leaf-300);box-shadow:0 0 0 4px rgba(140,198,63,.22);animation:pulse 2.4s ease-in-out infinite}
.dt-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.dt-n{
  display:grid;gap:.15rem;align-content:start;min-width:0;padding:.7rem .75rem;border-radius:14px;text-align:left;text-decoration:none;
  font:inherit;color:inherit;cursor:pointer;background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.12);
  transition:background .18s,border-color .18s;
}
.dt-n:hover{background:rgba(255,214,23,.12);border-color:rgba(255,214,23,.38)}
.dt-n b{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--lemon)}
.dt-n b small{font-size:.48em;font-weight:700;letter-spacing:0;color:rgba(255,252,242,.5)}
.dt-n span{font-size:.8rem;font-weight:700;line-height:1.25;color:rgba(255,252,242,.72)}
.dt-next{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.05rem .8rem;padding:.72rem .9rem;
  border-radius:14px;text-decoration:none;color:var(--forest-900);box-shadow:var(--e2);
  background:linear-gradient(140deg,var(--lemon) 0%,var(--lemon-600) 100%);transition:translate .24s var(--spring),box-shadow .24s;
}
.dt-next:hover{translate:0 -2px;box-shadow:var(--e3)}
.dt-k{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
/* the stand and its town in full — a long pair wraps rather than being cut */
.dt-next strong{grid-column:1;min-width:0;font-family:var(--display);font-size:1.08rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.dt-next em{grid-column:2;grid-row:1 / 3;font-style:normal;font-family:var(--display);font-size:1.05rem;font-weight:800;white-space:nowrap}
.dt-next em:empty{display:none}

/* the panel holds what to show; the line under it, how many and in what order */
.dir-main{padding-top:clamp(.3rem,1vw,.8rem)}
.dir-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .7rem;padding:.55rem;
  background:#fff;border:1px solid var(--hair);border-radius:22px;box-shadow:var(--e2);scroll-margin-top:84px;
}
.dir-seg,.dir-view{display:inline-flex;gap:2px;padding:3px;background:var(--cream-2);border:1px solid var(--hair);border-radius:999px}
.dir-seg button{
  display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;background:none;border-radius:999px;padding:.38rem .85rem;
  font-family:var(--display);font-size:.93rem;font-weight:700;color:var(--ink-2);white-space:nowrap;
  transition:background .18s,color .18s,box-shadow .18s;
}
.dir-seg button:hover{color:var(--ink);background:rgba(255,255,255,.75)}
.dir-seg button[aria-checked="true"]{background:var(--forest-800);color:var(--cream);box-shadow:var(--e1)}
.dir-seg .l-short{display:none}
.dir-n{
  min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;display:inline-grid;place-items:center;
  font-family:var(--ui);font-size:.72rem;font-weight:800;line-height:1;background:rgba(18,48,36,.08);color:var(--ink-3);
}
[aria-checked="true"] > .dir-n,[aria-pressed="true"] > .dir-n{background:rgba(255,252,242,.18);color:var(--cream)}
.dir-bar .is-zero:not([aria-pressed="true"]):not([aria-checked="true"]){opacity:.5}
.dir-x{display:flex;flex-wrap:wrap;gap:.4rem}
.dir-x .chip{padding:.36rem .8rem;font-size:.92rem;gap:.4rem}
.dir-x .chip .hrt{width:15px;height:15px;fill:none;stroke:var(--coral);stroke-width:2.3}
.dir-x .chip[aria-pressed="true"] .hrt{fill:var(--coral)}
.dir-tools{display:flex;align-items:center;gap:.45rem;margin-left:auto}
.dir-pick{display:flex;align-items:center;gap:.35rem;min-width:0}
.dir-pick > .ai{width:17px;height:17px;color:var(--ink-3)}
/* at least 11.4rem, and wider when a county's name needs it — never cut */
.dir-pick .sel{width:auto;min-width:11.4rem}
.dir-pick .sel-btn{padding:.42rem .75rem;border-radius:999px;gap:.4rem;font-family:var(--display);font-size:.93rem;font-weight:700}
.dir-pick .sel-val{min-width:0;text-align:left;overflow-wrap:anywhere}
.dir-pick .sel-btn .chev{width:16px;height:16px}
.dir-pick .sel-list{min-width:100%;width:max-content;max-width:min(84vw,300px)}
.dir-pick + .dir-pick .sel-list{left:auto;right:0}
.dir-view button{
  width:36px;height:32px;border:0;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  background:none;color:var(--ink-3);transition:background .18s,color .18s,box-shadow .18s;
}
.dir-view button:hover{color:var(--ink)}
.dir-view button[aria-pressed="true"]{background:#fff;color:var(--forest-800);box-shadow:var(--e1)}
.dir-view .ai{width:17px;height:17px}

/* above the cards, so an open menu drops over them */
.dir-meta{position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:.8rem .15rem .85rem}
.dir-meta p{font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink-3)}
.dir-meta p b{color:var(--ink)}
.dir-meta .linkish{font-size:.9rem}
.dir-main .stand-grid{gap:1.1rem}
/* results fade up in a short cascade whenever the list changes */
.dir-in > *{animation:dirIn .42s var(--ease) backwards;animation-delay:calc(var(--i,0) * 32ms)}
@keyframes dirIn{from{opacity:0;translate:0 10px}}

/* the list view: one row a stand, for scanning */
.dl{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.dl-row{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);
  transition:box-shadow .22s var(--ease),border-color .22s,translate .24s var(--spring);
}
.dl-row::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ac,var(--lemon))}
.dl-row:hover{box-shadow:var(--e2);border-color:var(--hair-2);translate:0 -2px}
.dl-face{
  display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.6rem 3.7rem .6rem .85rem;text-decoration:none;color:inherit;
}
.dl-shot{width:104px;height:78px;object-fit:cover;border-radius:12px;display:block;background:var(--cream-2)}
.dl-main{display:grid;gap:.1rem;min-width:0}
/* town, county and name are never cut short: a long one takes a second line */
.dl-town{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);overflow-wrap:anywhere}
.dl-main strong{font-family:var(--display);font-size:1.22rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.dl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;margin-top:.2rem}
.dl-meta .status{font-size:.8rem;padding:.06rem .6rem .06rem .45rem}
.dl-hrs{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.dl-side{display:grid;justify-items:end;gap:.3rem;text-align:right}
.dl-price{font-family:var(--display);font-size:1.02rem;font-weight:800;color:var(--tangerine);white-space:nowrap}
.dl-row .heart{top:50%;right:.8rem;translate:0 -50%;width:36px;height:36px;box-shadow:none;background:var(--cream-2)}
.dl-row .heart:hover{transform:none;scale:1.1;background:#fff}

/* ── How it works ── */
.hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.hw-step{
  position:relative;display:grid;align-content:start;gap:.4rem;padding:1.1rem 1.15rem 1.15rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
}
/* a dotted thread from one step to the next */
.hw-step + .hw-step::before{
  content:"";position:absolute;left:-.8rem;top:2.05rem;width:.8rem;height:2px;
  background:repeating-linear-gradient(90deg,var(--hair-2) 0 4px,transparent 4px 7px);
}
.hw-step-top{display:flex;align-items:center;gap:.65rem;margin-bottom:.15rem}
.hw-num{
  width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;
  font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--forest-900);
  background:linear-gradient(140deg,var(--lemon),var(--lemon-600));box-shadow:var(--glow-lemon);
}
.hw-step:nth-child(2) .hw-num{background:linear-gradient(140deg,#BFE0C6,var(--leaf));color:#0A2E1B;box-shadow:0 10px 26px -10px rgba(63,163,77,.65)}
.hw-step.is-live .hw-num{background:linear-gradient(140deg,var(--tangerine),var(--coral));color:#fff;box-shadow:0 10px 26px -10px rgba(228,87,46,.65)}
.hw-who{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.hw-step h3{font-size:1.32rem}
.hw-step p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.hw-tags{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.hw-tags li{font-family:var(--display);font-size:.8rem;font-weight:700;padding:.1rem .6rem;border-radius:999px;background:rgba(63,163,77,.1);color:var(--forest-700)}
.hw-step.is-live{background:linear-gradient(155deg,#fff 35%,#FFF5CC);border-color:rgba(242,183,5,.45)}
.hw-step.is-live .hw-tags li{background:rgba(242,183,5,.24);color:#7A5303}
.hw-then{
  display:flex;align-items:center;gap:.65rem;margin-top:.8rem;padding:.7rem .95rem;border-radius:14px;
  background:var(--cream-2);border:1px dashed var(--hair-2);font-size:.94rem;font-weight:600;line-height:1.45;color:var(--ink-2);
}
.hw-then .ai{width:19px;height:19px;color:var(--forest-600)}
.hw-then a{font-weight:800;color:var(--forest-700);white-space:nowrap}
.hw-then a:hover{color:var(--coral)}

.hw-prep{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.8rem;align-items:stretch}
.hw-need,.hw-where{min-width:0;padding:1.1rem 1.15rem 1.15rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.hw-prep h3{font-size:1.22rem;margin-bottom:.75rem}
.hw-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
.hw-list li{position:relative;display:grid;align-content:start;gap:.05rem;padding:.6rem .7rem .62rem 2.35rem;background:var(--cream);border:1px solid var(--hair);border-radius:12px}
.hw-list li::before{
  content:"";position:absolute;left:.7rem;top:.66rem;width:20px;height:20px;border-radius:50%;
  background:rgba(63,163,77,.16) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.5 6.3l2.3 2.3L9.6 3.6%27 fill=%27none%27 stroke=%27%233FA34D%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 12px no-repeat;
}
.hw-list b{font-family:var(--display);font-size:1rem;font-weight:700;line-height:1.25}
.hw-list span{font-size:.86rem;font-weight:600;line-height:1.4;color:var(--ink-3)}
.hw-extra{display:grid;gap:.5rem;margin-top:.85rem;padding-top:.8rem;border-top:1px dashed var(--hair-2)}
.hw-extra p{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .45rem;font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-2)}
.hw-extra b{margin-right:.2rem;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.hw-extra s{
  font-family:var(--display);font-weight:700;color:var(--ink-3);padding:.04rem .6rem;border-radius:999px;background:var(--cream-2);
  text-decoration-color:rgba(228,87,46,.65);text-decoration-thickness:2px;
}
.hw-where{display:grid;align-content:start;gap:.55rem}
.hw-where h3{margin-bottom:.2rem}
.hw-spot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.8rem;padding:.85rem .9rem;border-radius:14px;border:1px solid var(--hair);background:var(--cream)}
.hw-spot.is-lead{background:linear-gradient(150deg,#FFF9DE,#fff);border-color:rgba(242,183,5,.45)}
.hw-spot-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(63,163,77,.13);color:var(--forest-600)}
.hw-spot.is-lead .hw-spot-ico{background:rgba(255,214,23,.32);color:#8A6503}
.hw-spot-ico .ai{width:21px;height:21px}
.hw-spot b{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-family:var(--display);font-size:1.12rem;font-weight:800;line-height:1.2}
.hw-spot em{font-style:normal;font-family:var(--ui);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.1rem .5rem;border-radius:999px;background:var(--cream-3);color:var(--ink-3)}
.hw-spot.is-lead em{background:rgba(242,183,5,.26);color:#7A5303}
.hw-spot p{margin-top:.2rem;font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* running it: the dark panel, with a picture of the owner's page */
.hw-panel{overflow:hidden;color:var(--cream);background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%)}
.hw-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 50% at 8% 0%,rgba(63,163,77,.35),transparent 62%),
             radial-gradient(36% 46% at 96% 100%,rgba(255,214,23,.18),transparent 66%);
}
.hw-panel-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.hw-panel h2{color:var(--cream);font-size:clamp(1.75rem,3.2vw,2.5rem)}
.hw-panel-lede{margin-top:.6rem;max-width:50ch;font-size:1.05rem;line-height:1.6;color:rgba(255,252,242,.8)}
.hw-magic{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.hw-magic li{
  display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:.75rem;padding:.72rem .85rem;
  border-radius:14px;background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.13);
}
.hw-magic li > span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:.95rem;font-weight:800;background:var(--lemon);color:var(--forest-900)}
.hw-magic b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--cream)}
.hw-magic p{margin-top:.05rem;font-size:.88rem;line-height:1.45;color:rgba(255,252,242,.66)}
.hw-panel .pg-act{margin-top:1.15rem}

.hw-mock{margin:0;display:grid;justify-items:center;gap:.8rem}
.hw-mock-card{
  width:100%;display:grid;gap:.55rem;padding:.75rem;color:var(--ink);background:var(--cream);border-radius:22px;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,252,242,.12);
  rotate:-2deg;transition:rotate .6s var(--spring);
}
.hw-mock:hover .hw-mock-card{rotate:0deg}
.hw-mock figcaption{font-size:.84rem;font-weight:700;color:rgba(255,252,242,.55)}
.hwm-head{position:relative;overflow:hidden;display:flex;align-items:center;gap:.7rem;padding:.8rem .75rem .7rem;background:#fff;border:1px solid var(--hair);border-radius:16px}
.hwm-head::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--lemon-600)}
.hwm-shot{width:60px;height:46px;flex:none;border-radius:10px;background:var(--lemon) url("/assets/stands/placeholder-lemon.webp") center / cover}
.hwm-id{display:grid;min-width:0;line-height:1.2}
.hwm-id small{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hwm-id b{font-family:var(--display);font-size:1.18rem;font-weight:800}
.hwm-live{justify-self:start;display:inline-flex;align-items:center;gap:.3rem;margin-top:.2rem;padding:.04rem .5rem;border-radius:999px;background:rgba(63,163,77,.13);color:#1B6B2A;font-size:.7rem;font-weight:800}
.hwm-live i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hwm-sw{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.hwm-sw span{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .6rem;border-radius:12px;background:#fff;border:1px solid var(--hair);font-family:var(--display);font-size:.84rem;font-weight:800}
.hwm-tgl{position:relative;width:34px;height:20px;flex:none;border-radius:999px;background:var(--cream-3);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.hwm-tgl::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(7,40,27,.3)}
.hwm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.hwm-kpis > span{position:relative;overflow:hidden;display:grid;gap:.12rem;padding:.6rem .55rem .5rem;background:#fff;border:1px solid var(--hair);border-radius:12px}
.hwm-kpis > span::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tone)}
.hwm-kpis small{font-size:.58rem;font-weight:800;letter-spacing:.05em;line-height:1.2;text-transform:uppercase;color:var(--ink-3)}
.hwm-kpis b{font-family:var(--display);font-size:1.4rem;font-weight:800;line-height:1;color:var(--forest-900)}
.hwm-kpis em{font-style:normal;font-size:.64rem;font-weight:800;color:var(--leaf)}
.hwm-chart{
  display:grid;grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:minmax(0,1fr);align-items:end;gap:3px;
  height:72px;padding:.6rem .65rem 0;background:#fff;border:1px solid var(--hair);border-radius:12px;
}
.hwm-chart i{height:calc(var(--h) * 1%);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--lemon),var(--lemon-600))}

/* ── Shop ── */
.sp-pill{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.85rem;padding:.24rem .85rem .24rem .65rem;border-radius:999px;
  font-family:var(--display);font-size:.9rem;font-weight:700;color:#7A5303;background:rgba(255,214,23,.3);border:1px solid rgba(242,183,5,.42);
}
.sp-pill i{width:8px;height:8px;border-radius:50%;background:var(--lemon-600);box-shadow:0 0 0 4px rgba(242,183,5,.22);animation:pulse 2.4s ease-in-out infinite}
.sp-facts{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.sp-facts li{padding:.26rem .85rem;border-radius:999px;background:#fff;border:1px solid var(--hair);box-shadow:var(--e1);font-size:.9rem;font-weight:700;color:var(--ink-2)}
.sp-facts b{font-family:var(--display);font-weight:800;color:var(--forest-700)}

/* the lead piece, pinned up like a sticker */
.sp-feature{position:relative;margin:0;justify-self:center;width:min(100%,380px)}
.sp-feature .sp-shot{border-radius:var(--r-xl);box-shadow:var(--e4);rotate:-2.5deg;transition:rotate .6s var(--spring)}
.sp-feature:hover .sp-shot{rotate:0deg}
.sp-feature .sp-art{width:74%}
.sp-sticker{
  position:absolute;top:-16px;right:-10px;z-index:2;width:88px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-size:.95rem;font-weight:800;line-height:1.02;color:#fff;rotate:12deg;
  background:linear-gradient(150deg,var(--tangerine),var(--coral));box-shadow:0 12px 26px -8px rgba(228,87,46,.7);
}
.sp-feature figcaption{display:grid;gap:.1rem;margin-top:1rem;text-align:center}
.sp-feature figcaption b{font-family:var(--display);font-size:1.15rem;font-weight:800}
.sp-feature figcaption span{font-size:.9rem;font-weight:600;color:var(--ink-3)}

/* the kinds: a quiet row of words with a lemon underline, not a wall of pills */
.sp-cats{display:flex;flex-wrap:wrap;gap:0 1.6rem;margin-bottom:1.3rem;border-bottom:1px solid var(--hair)}
.sp-cats .chip{
  position:relative;padding:.6rem 0 .7rem;border:0;border-radius:0;background:none;box-shadow:none;
  font-size:.98rem;font-weight:700;color:var(--ink-3);
}
.sp-cats .chip::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:var(--lemon-600);scale:0 1;transition:scale .3s var(--spring);
}
.sp-cats .chip:hover{color:var(--forest-800);box-shadow:none}
.sp-cats .chip[aria-pressed="true"]{background:none;color:var(--forest-900)}
.sp-cats .chip[aria-pressed="true"]::after{scale:1 1}
.sp-cats .chip:focus-visible{outline:2px solid var(--forest-700);outline-offset:2px;border-radius:6px}

/* a 300px floor gives three across on a laptop and two on a tablet — six
   things always make even rows, never five and one left over */
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1rem}
.sp-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--e1);transition:box-shadow .25s var(--ease),translate .28s var(--spring),border-color .25s;
  animation:dirIn .42s var(--ease) backwards;animation-delay:calc(var(--i,0) * 40ms);
}
.sp-card:hover{box-shadow:var(--e3);border-color:var(--hair-2);translate:0 -3px}
/* the preview board: a flat drawing of the thing, the real mark printed on it */
.sp-shot{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;aspect-ratio:4 / 3}
.sp-shot::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,rgba(18,48,36,.03) 0 10px,transparent 10px 20px)}
.sp-art{display:block;width:78%;height:auto;filter:drop-shadow(0 10px 14px rgba(7,40,27,.15));transition:scale .5s var(--spring)}
.sp-card:hover .sp-art{scale:1.05}
.sp-shot.is-lemon {background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.55),transparent 55%),linear-gradient(150deg,var(--lemon-300),var(--lemon))}
.sp-shot.is-forest{background:radial-gradient(circle at 72% 18%,rgba(255,214,23,.24),transparent 55%),linear-gradient(150deg,var(--forest-600),var(--forest-900))}
.sp-shot.is-leaf  {background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.6),transparent 55%),linear-gradient(150deg,#E6F4D8,#C5E2AE)}
.sp-shot.is-coral {background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.6),transparent 55%),linear-gradient(150deg,#FFEADF,#F8C7AE)}
.sp-shot.is-cream {background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.75),transparent 55%),linear-gradient(150deg,var(--cream-2),var(--cream-3))}
.sp-shot.is-sun   {background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.55),transparent 55%),linear-gradient(150deg,#FFF1C6,#FFD189)}
.sp-shot.is-forest::before{background:repeating-linear-gradient(45deg,rgba(255,252,242,.04) 0 10px,transparent 10px 20px)}
.sp-tag{
  position:absolute;left:.7rem;top:.7rem;padding:.14rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,252,242,.94);color:var(--ink-2);box-shadow:0 2px 8px rgba(7,40,27,.14);
}
.sp-tag.is-live{background:var(--forest-800);color:var(--lemon)}
.sp-body{display:grid;gap:.25rem;padding:.9rem 1rem .6rem}
.sp-cat{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-600)}
.sp-body h3{font-size:1.15rem;line-height:1.2}
.sp-body p{font-size:.88rem;line-height:1.5;color:var(--ink-3)}
.sp-foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:auto;padding:.75rem 1rem .9rem;border-top:1px solid var(--hair)}
.sp-price{font-family:var(--display);font-weight:800;color:var(--ink)}
.sp-price.is-tbd{font-family:var(--ui);font-size:.86rem;font-weight:700;color:var(--ink-3)}

/* the real products: Printify's studio photos sit on warm cream, the white
   backdrop multiplied away so every shot shares the page's paper */
.sp-shot.is-photo{
  aspect-ratio:1 / 1;display:block;
  background:radial-gradient(circle at 50% 38%,#FFFDF6 0,var(--cream-2) 62%,var(--cream-3) 100%);
}
.sp-shot.is-photo::before{display:none}
.sp-shot.is-photo::after{
  content:"";position:absolute;inset:auto 18% 5% 18%;height:7%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(7,40,27,.16),transparent);
}
.sp-pic{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:opacity .45s var(--ease),scale .6s var(--spring);
}
.sp-pic.is-next{opacity:0}
@media (hover:hover){
  .sp-card:hover .sp-shot.has-next .sp-pic:not(.is-next){opacity:0}
  .sp-card:hover .sp-pic.is-next{opacity:1;scale:1.03}
  /* one photo only: no swap, a small zoom */
  .sp-card:hover .sp-shot:not(.has-next) .sp-pic{scale:1.04}
  /* picking a color: hold the front in that color, never the hover shot */
  .sp-card:has(.sp-dots:hover) .sp-shot.has-next .sp-pic:not(.is-next){opacity:1}
  .sp-card:has(.sp-dots:hover) .sp-pic.is-next{opacity:0}
}
.sp-flip{
  position:absolute;right:.6rem;bottom:.6rem;z-index:2;display:inline-flex;align-items:center;gap:.2rem;
  padding:.28rem .45rem .28rem .7rem;border:1px solid rgba(18,48,36,.12);border-radius:999px;cursor:pointer;
  font:700 .74rem/1 var(--ui);color:var(--forest-800);background:rgba(255,252,242,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px -4px rgba(7,40,27,.25);
  transition:background .2s,translate .25s var(--spring);
}
.sp-flip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-flip:hover{background:var(--lemon);translate:2px 0}
.sp-flip:focus-visible{outline:3px solid var(--lemon-600);outline-offset:2px}
/* just an arrow in a circle; with a mouse it waits for the card to be hovered */
.sp-flip{width:32px;height:32px;padding:0;justify-content:center}
@media (hover:hover){
  .sp-card .sp-flip{opacity:0;transition:opacity .25s,background .2s,translate .25s var(--spring)}
  .sp-card:hover .sp-flip,.sp-card .sp-flip:focus-visible{opacity:1}
}

/* the whole card opens the product's page */
.sp-card{cursor:pointer}
.sp-link{color:inherit;text-decoration:none}
.sp-link:hover{color:var(--forest-700)}
.sp-link:focus-visible{outline:2px solid var(--forest-700);outline-offset:2px;border-radius:4px}
.sp-feature figcaption a{color:inherit;text-decoration:none}
.sp-feature figcaption a:hover{color:var(--forest-700)}
.sp-feature .sp-shot{cursor:pointer}
.sp-see{
  display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap;
  font-family:var(--display);font-size:.88rem;font-weight:800;color:var(--forest-700);
}
.sp-see svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .25s var(--spring)}
.sp-card:hover .sp-see svg{translate:3px 0}
.sp-tag.is-made{background:var(--forest-800);color:var(--cream)}

.sp-cat i{font-style:normal;font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.sp-dots{display:flex;align-items:center;gap:.4rem;margin-top:.45rem}
.sp-dot{
  width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;background:var(--dot);
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(18,48,36,.22);transition:box-shadow .2s,scale .25s var(--spring);
}
.sp-dot.is-light{box-shadow:0 0 0 1px rgba(18,48,36,.32)}
.sp-dot:hover{scale:1.12}
.sp-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lemon-600)}
.sp-dot:focus-visible{outline:2px solid var(--forest-700);outline-offset:3px}
.sp-dot-name{margin-left:.15rem;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.sp-price small{font-family:var(--ui);font-size:.72rem;font-weight:700;color:var(--ink-3)}
/* one-color pieces: the dot is a label, not a control */
.sp-dots.is-one .sp-dot{width:16px;height:16px;cursor:default;scale:1}
/* a colour dot is 20px and the flip arrow 28px on a phone — too small for a
   thumb, so each gets an invisible hit area out to about 38px around it */
@media (pointer:coarse){
  .sp-dot{position:relative}
  .sp-dot::before,.sp-flip::before{content:"";position:absolute;inset:-8px;border-radius:50%}
  /* the footer's quiet Admin door: thumb-sized on a touch screen (2026-10-14) */
  .admin-link{padding:.7rem .45rem;margin:-.7rem -.45rem}
}
/* made, store not connected yet: a quiet state, never a link */
.sp-soon{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-family:var(--display);font-size:.84rem;font-weight:700;color:var(--forest-700);
}
.sp-soon i{
  width:7px;height:7px;border-radius:50%;background:var(--lemon-600);
  box-shadow:0 0 0 3px rgba(242,183,5,.22);animation:sp-soon 2.4s ease-in-out infinite;
}
@keyframes sp-soon{50%{box-shadow:0 0 0 6px rgba(242,183,5,0)}}
@media (prefers-reduced-motion:reduce){.sp-soon i{animation:none}}

/* the hero piece is a real photo now: square, pinned at a tilt */
.sp-feature .sp-shot.is-photo{aspect-ratio:1 / 1}
.sp-feature .sp-flip{right:.8rem;bottom:.8rem}

/* ── one product's page: /shop/<slug>/ ──
   The photos on a big cream board, pinned in place while the choices scroll;
   colors are plain circles, sizes are squares, and Buy now is the one loud
   thing on the page. */
.pi{position:relative;padding:1.2rem 0 2.6rem;overflow:clip}
.pi::before{
  content:"";position:absolute;z-index:-1;left:-12%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,23,.26),transparent);pointer-events:none;
}
.pi-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:start;margin-top:1rem}
.pi-gallery{position:sticky;top:92px;min-width:0}
.pi-stage{
  position:relative;isolation:isolate;aspect-ratio:1 / 1;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hair);
  background:radial-gradient(circle at 50% 38%,#FFFDF6 0,var(--cream-2) 62%,var(--cream-3) 100%);box-shadow:var(--e3);
}
.pi-stage::after{
  content:"";position:absolute;inset:auto 20% 5% 20%;height:6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(7,40,27,.16),transparent);
}
.pi-stage > .sp-shot{height:100%;aspect-ratio:auto}
.pi-main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;animation:piIn .45s var(--ease)}
@keyframes piIn{from{opacity:0;scale:.985}}
.pi-sticker{
  position:absolute;top:1rem;right:1rem;z-index:2;width:94px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;
  font-family:var(--display);font-size:1.12rem;font-weight:800;line-height:1;color:#fff;rotate:10deg;
  background:linear-gradient(150deg,var(--tangerine),var(--coral));box-shadow:0 12px 26px -8px rgba(228,87,46,.7);
}
.pi-sticker small{display:block;margin-bottom:.15rem;font-family:var(--ui);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.pi-nav{
  position:absolute;top:50%;z-index:2;width:44px;height:44px;translate:0 -50%;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(18,48,36,.12);border-radius:50%;color:var(--forest-800);background:rgba(255,252,242,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 16px -6px rgba(7,40,27,.3);
  transition:background .2s,scale .25s var(--spring);
}
.pi-nav.is-prev{left:.8rem}
.pi-nav.is-next{right:.8rem}
.pi-nav:hover{background:var(--lemon);scale:1.06}
.pi-nav:focus-visible{outline:3px solid var(--lemon-600);outline-offset:2px}
.pi-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pi-count{
  position:absolute;left:50%;bottom:.9rem;z-index:2;translate:-50% 0;padding:.28rem .8rem;border-radius:999px;white-space:nowrap;
  font:700 .78rem/1.2 var(--ui);color:var(--forest-800);background:rgba(255,252,242,.9);box-shadow:0 2px 8px rgba(7,40,27,.12);
}
.pi-thumbs{display:flex;gap:.6rem;margin-top:.85rem;padding:.25rem;overflow-x:auto;scrollbar-width:none}
.pi-thumbs::-webkit-scrollbar{display:none}
.pi-thumb{
  flex:none;width:78px;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;border-radius:14px;border:2px solid transparent;
  background:radial-gradient(circle at 50% 38%,#FFFDF6 0,var(--cream-2) 70%,var(--cream-3) 100%);box-shadow:0 0 0 1px var(--hair);
  transition:border-color .2s,box-shadow .2s,translate .25s var(--spring);
}
.pi-thumb img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pi-thumb:hover{translate:0 -2px}
.pi-thumb[aria-pressed="true"]{border-color:var(--forest-800);box-shadow:0 0 0 3px rgba(242,183,5,.45)}
.pi-thumb:focus-visible{outline:2px solid var(--forest-700);outline-offset:3px}

.pi-info{min-width:0;padding-top:.4rem}
.pi-kicker a{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-600);text-decoration:none}
.pi-kicker a:hover{color:var(--coral)}
.pi-name{margin:.35rem 0 .75rem;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.02;letter-spacing:-.01em}
.pi-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .75rem}
.pi-price b{font-family:var(--display);font-size:1.95rem;font-weight:800;line-height:1;color:var(--forest-800)}
.pi-price small{font-size:.86rem;font-weight:700;color:var(--ink-3)}
.pi-note{max-width:46ch;margin-top:.85rem;font-size:1.04rem;line-height:1.6;color:var(--ink-2)}
.pi-opt{margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed var(--hair-2)}
.pi-opt-h{margin-bottom:.75rem;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pi-opt-h b{margin-left:.3rem;font-size:.98rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.pi-opt-h span{font-weight:600;letter-spacing:0;text-transform:none}
.pi-swatches{display:flex;flex-wrap:wrap;gap:.7rem}
.pi-swatch{
  width:44px;height:44px;padding:0;cursor:pointer;border-radius:50%;border:3px solid #fff;background:var(--dot);
  box-shadow:0 0 0 1px rgba(18,48,36,.25);transition:box-shadow .2s,scale .25s var(--spring);
}
.pi-swatch:hover{scale:1.08}
.pi-swatch[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--forest-800),0 0 0 6px rgba(242,183,5,.4)}
.pi-swatch:focus-visible{outline:2px solid var(--forest-700);outline-offset:6px}
.pi-sizes{display:flex;flex-wrap:wrap;gap:.5rem;max-width:440px}
.pi-size{
  position:relative;min-width:58px;height:50px;padding:0 .85rem;cursor:pointer;white-space:nowrap;
  border:1.5px solid var(--hair-2);border-radius:12px;background:#fff;
  font-family:var(--display);font-size:.98rem;font-weight:800;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s,translate .25s var(--spring);
}
.pi-size:hover{border-color:var(--forest-600);translate:0 -2px}
.pi-size[aria-pressed="true"]{background:var(--forest-800);border-color:var(--forest-800);color:var(--lemon);translate:none}
.pi-size:focus-visible{outline:2px solid var(--forest-700);outline-offset:3px}
.pi-size sup{margin-left:1px;font-size:.7em;color:var(--coral)}
.pi-size[aria-pressed="true"] sup{color:var(--lemon-300)}
.pi-one{font-weight:700;color:var(--ink-2)}
.pi-need{margin-top:.65rem;font-size:.9rem;font-weight:800;color:var(--coral)}
.pi-opt.is-need .pi-sizes{animation:piShake .42s var(--ease)}
@keyframes piShake{25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}

.pi-act{margin-top:1.7rem}
.pi-buy{
  display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;max-width:440px;height:60px;border:0;border-radius:18px;
  font-family:var(--display);font-size:1.18rem;font-weight:800;text-decoration:none;color:var(--forest-900);background:var(--lemon);
  box-shadow:0 16px 28px -14px rgba(242,183,5,.95),inset 0 -3px 0 rgba(12,58,40,.1);cursor:pointer;
  transition:background .2s,translate .25s var(--spring),box-shadow .25s;
}
.pi-buy span{padding-left:.7rem;border-left:1.5px solid rgba(12,58,40,.22)}
.pi-buy:hover{background:var(--lemon-300);translate:0 -2px}
.pi-buy:focus-visible{outline:3px solid var(--forest-700);outline-offset:3px}
.pi-buy.is-soon{gap:.6rem;cursor:default;color:var(--cream);background:var(--forest-800);box-shadow:none;translate:none}
.pi-buy.is-soon i{
  width:8px;height:8px;border-radius:50%;background:var(--lemon);
  box-shadow:0 0 0 3px rgba(255,214,23,.28);animation:sp-soon 2.4s ease-in-out infinite;
}
.pi-act-note{max-width:440px;margin-top:.7rem;font-size:.87rem;line-height:1.55;color:var(--ink-3)}
.pi-facts{max-width:520px;margin:1.9rem 0 0;border-top:1px solid var(--hair)}
.pi-facts div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--hair)}
.pi-facts dt{padding-top:.12rem;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pi-facts dd{margin:0;font-weight:600;color:var(--ink-2)}
.pi-more-h{margin-bottom:1rem;font-size:clamp(1.5rem,3vw,2rem)}
.pi-gone{margin:2rem auto}
@media (prefers-reduced-motion:reduce){
  .pi-main{animation:none}
  .pi-buy.is-soon i{animation:none}
  .pi-opt.is-need .pi-sizes{animation:none}
}
@media (max-width:860px){
  .pi-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .pi-gallery{position:static}
}
@media (max-width:560px){
  .pi{padding-top:.8rem}
  .pi-stage{border-radius:var(--r-lg)}
  .pi-sticker{top:.7rem;right:.7rem;width:74px;font-size:.95rem}
  .pi-nav{width:38px;height:38px}
  .pi-nav.is-prev{left:.5rem}
  .pi-nav.is-next{right:.5rem}
  .pi-thumb{width:62px;border-radius:12px}
  .pi-price b{font-size:1.7rem}
  .pi-size{min-width:52px;height:46px;padding:0 .7rem}
  .pi-buy{max-width:none}
  .pi-facts div{grid-template-columns:6.8rem minmax(0,1fr);gap:.7rem}
}

/* ── Contact ── */
.ct-groups{display:grid;gap:1.15rem}
.ct-gh{margin-bottom:.55rem;font-family:var(--ui);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ct-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ct-tile{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.85rem;row-gap:.1rem;
  width:100%;padding:.85rem .95rem;text-align:left;text-decoration:none;cursor:pointer;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);
  transition:border-color .18s,box-shadow .18s,translate .24s var(--spring);
}
.ct-tile:hover{border-color:var(--hair-2);box-shadow:var(--e2);translate:0 -2px}
.ct-tile.is-top{background:linear-gradient(140deg,#FFF8D8 0%,#fff 70%);border-color:rgba(242,183,5,.45)}
.ct-ico{grid-row:1 / 3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--wash);color:var(--ink-tone,var(--tone))}
.ct-ico .ai{width:21px;height:21px}
.ct-tile b{grid-column:2;font-family:var(--display);font-size:1.06rem;font-weight:800;line-height:1.2}
.ct-tile small{grid-column:2;font-size:.86rem;font-weight:600;line-height:1.35;color:var(--ink-3)}
.ct-go{grid-column:3;grid-row:1 / 3;font-weight:800;color:var(--ink-3);transition:translate .2s var(--ease),color .2s}
.ct-tile:hover .ct-go{translate:3px 0;color:var(--forest-700)}

/* inside the message popup */
.ct-hint{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;padding:.65rem .8rem;border-radius:12px;
  background:#FFF8DB;border:1px solid rgba(242,183,5,.45);font-size:.9rem;font-weight:600;line-height:1.45;color:#6E4F02;
}
.ct-hint[hidden]{display:none}
.ct-hint .linkish{font-size:.9rem}
.ct-done{display:grid;justify-items:center;gap:.55rem;padding:.5rem 0 .2rem;text-align:center}
.ct-done-ico{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:rgba(63,163,77,.14);color:var(--leaf);animation:ctPop .55s var(--spring) both}
.ct-done-ico .ai{width:32px;height:32px;stroke-width:2.6}
.ct-done h3{font-size:1.5rem}
.ct-done p{max-width:44ch;color:var(--ink-2)}
.ct-done .modal-actions{justify-content:center;margin-top:.3rem}
@keyframes ctPop{from{opacity:0;scale:.6}}

/* ── a tap is not a hover, here either ── */
@media (hover:none){
  .dt-next:hover,.dl-row:hover,.sp-card:hover,.ct-tile:hover{translate:none}
  .sp-card:hover .sp-art{scale:none}
  .ct-tile:hover .ct-go{translate:none}
  .hw-mock:hover .hw-mock-card{rotate:-2deg}
  .sp-feature:hover .sp-shot{rotate:-2.5deg}
  .dl-row .heart:hover{scale:none}
}

/* ── narrower screens ── */
@media (max-width:980px){
  .pg-grid{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
  /* a narrower card: two numbers read better than three squeezed */
  .dt-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-nums > .dt-n:last-child{display:none}
  .hw-panel-in{grid-template-columns:1fr}
  .hw-mock{width:min(100%,520px);justify-self:center}
}
@media (max-width:860px){
  .hw-steps{grid-template-columns:1fr}
  .hw-step + .hw-step::before{left:2.05rem;top:-.8rem;width:2px;height:.8rem;background:repeating-linear-gradient(180deg,var(--hair-2) 0 4px,transparent 4px 7px)}
  .hw-prep{grid-template-columns:1fr}
  .fq{grid-template-columns:1fr}
}
@media (max-width:780px){
  .pg-hero{padding:.75rem 0 1.4rem}
  .pg-hero .crumbs{margin-bottom:.7rem}
  .pg-grid{grid-template-columns:1fr;gap:1.1rem}
  .pg-hero h1{max-width:none}
  .pg-act{margin-top:1rem}
  .pg-sec{padding:1.6rem 0}
  .pg-head{margin-bottom:.85rem}
  .pg-cta{padding-bottom:1.6rem}
  .pg-sec.tint + .pg-cta{padding-top:1.6rem}
  .pg-cta-in{padding:1.15rem 1.1rem;border-radius:var(--r-lg)}
  .pg-cta-act{width:100%}
  .pg-cta-act .btn{flex:1 1 auto}

  /* the promises become one strip of three */
  .pg-facts{grid-template-columns:repeat(3,minmax(0,1fr));padding:.1rem .2rem}
  .pg-facts li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:.15rem;padding:.7rem .4rem;border-top:0}
  .pg-facts li + li{border-left:1px solid var(--hair)}
  .pg-f-ico{display:none}
  .pg-facts b{font-size:1.2rem}
  .pg-facts li > span:last-child{font-size:.78rem}

  /* today becomes one slim strip: the two numbers, then the next to close */
  .dt{grid-template-columns:auto auto minmax(0,1fr);align-items:stretch;gap:.4rem;padding:.45rem;border-radius:18px}
  .dt::before,.dt-top,.dt-nums > .dt-n:last-child{display:none}
  .dt-nums{display:contents}
  .dt-n{gap:0;padding:.45rem .6rem;border-radius:12px}
  .dt-n b{font-size:1.35rem}
  .dt-n span{font-size:.7rem}
  .dt-next{gap:0 .5rem;padding:.45rem .65rem;border-radius:12px}
  .dt-k{font-size:.6rem}
  .dt-next strong{font-size:.9rem}
  .dt-next em{font-size:.86rem}

  /* the panel stacks: when, then the extras. Under it: the count, Clear all
     and the cards/list switch on one line, then County and Sort each on a
     row of their own, so a county's full name always fits */
  .dir-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.5rem;border-radius:18px}
  .dir-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .dir-seg button{justify-content:center;padding:.42rem .4rem}
  .dir-meta{gap:.55rem .5rem;margin:.75rem 0}
  .dir-meta > p{order:1;flex:1 1 auto;min-width:0;padding-left:.2rem}
  #dirReset{order:2}
  .dir-tools{display:contents}
  .dir-view{order:3}
  .dir-pick{order:4;flex:1 1 100%}
  .dir-pick > .ai{display:none}
  .dir-pick .sel{width:auto;flex:1;min-width:0}
  .dir-pick .sel-btn{padding:.42rem .7rem;font-size:.9rem}

  .hw-panel-in{gap:1.4rem}
  .hw-mock-card{rotate:0deg}
  .sp-feature{display:none}
  .ct-groups{gap:1rem}
  /* the three do-it-yourself tiles one to a row, the six topics two across */
  .ct-tiles{grid-template-columns:minmax(0,1fr)}
  .ct-ask .ct-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  /* on a phone the title and the box say it all */
  .dir-hero .pg-lede{display:none}
  .dir-search{margin-top:.8rem;padding-left:.9rem}
  .dir-search input{padding:.66rem 0;font-size:1rem}
  .dir-try{margin-top:.6rem}
  .dir-x .chip{padding:.32rem .7rem;font-size:.88rem}
  .dir-seg button{font-size:.88rem}
  .dir-main .stand-grid{gap:.9rem}

  .dl{gap:.45rem}
  .dl-face{grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;column-gap:.75rem;row-gap:.25rem;padding:.55rem 3.2rem .55rem .7rem}
  .dl-shot{grid-row:1 / 3;width:78px;height:64px;border-radius:10px}
  .dl-main strong{font-size:1.1rem}
  .dl-meta .dl-hrs{display:none}
  .dl-side{grid-column:2;display:flex;align-items:center;gap:.45rem;text-align:left}
  .dl-price{font-size:.95rem}
  .dl-row .heart{right:.6rem;width:34px;height:34px}

  .hw-step{padding:1rem}
  .hw-list{grid-template-columns:minmax(0,1fr)}
  .hw-need,.hw-where{padding:1rem}
  .hwm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hwm-chart{height:60px}

  .sp-cats{
    flex-wrap:nowrap;overflow-x:auto;margin-inline:-1rem;padding:0 1rem .1rem;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1rem,#000 calc(100% - 2.2rem),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 1rem,#000 calc(100% - 2.2rem),transparent);
  }
  .sp-cats .chip{flex:none;scroll-snap-align:start;font-size:.92rem}
  .sp-cats{gap:0 1.2rem}
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .sp-body{padding:.7rem .75rem .45rem}
  .sp-body h3{font-size:1rem}
  .sp-body p{font-size:.82rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sp-foot{padding:.55rem .75rem .7rem;flex-wrap:wrap;row-gap:.2rem}
  .sp-tag{left:.45rem;top:.45rem;font-size:.6rem;padding:.12rem .5rem}
  .sp-flip{right:.4rem;bottom:.4rem;width:28px;height:28px}
  .sp-see{font-size:.76rem}
  .sp-dots{gap:.32rem}
  .sp-dot{width:20px;height:20px}
  .sp-dot-name{display:none}
  .sp-dots.is-one .sp-dot{width:14px;height:14px}
  .sp-dots.is-one .sp-dot-name{display:inline;font-size:.74rem}
  .sp-soon{font-size:.74rem;gap:.3rem}
  .sp-cat i{display:block;margin-top:.1rem}

  .ct-tile{padding:.75rem .85rem}
  .ct-ask .ct-tile{grid-template-columns:auto minmax(0,1fr);column-gap:.5rem;padding:.6rem}
  .ct-ask .ct-tile small,.ct-ask .ct-go{display:none}
  .ct-ask .ct-tile b{grid-row:1 / 3;font-size:.96rem}
  .ct-ask .ct-ico{width:30px;height:30px;border-radius:10px}
  .ct-ask .ct-ico .ai{width:17px;height:17px}

  /* today: the two numbers side by side, the stand closing next underneath
     with the full width, so its name is not cut short */
  .dt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-n{display:flex;align-items:baseline;gap:.4rem;padding:.5rem .7rem}
  .dt-next{grid-column:1 / -1}

  .fq summary{padding:.85rem 2.9rem .85rem .95rem;font-size:1rem}
  .fq details p{padding:0 .95rem .95rem}
}
@media (max-width:480px){
  .pg-hero h1{font-size:clamp(2.1rem,9.6vw,2.6rem)}
  .dir-seg .l-long{display:none}
  .dir-seg .l-short{display:inline}
  .dir-seg button{gap:.3rem;padding:.42rem .3rem}
  .dir-seg .dir-n{min-width:1.2rem;height:1.2rem;padding:0 .25rem;font-size:.68rem}
  .dir-try button:nth-of-type(n+4){display:none}
  /* three across is too tight for "Every message": one short list instead,
     each word beside what it means, as the fact rows do on a phone */
  .pg-facts{grid-template-columns:minmax(0,1fr);padding:.1rem .95rem}
  .pg-facts li{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:baseline;text-align:left;column-gap:.75rem;padding:.62rem 0}
  .pg-facts li + li{border-left:0;border-top:1px solid var(--hair)}
  .pg-facts b{font-size:1.12rem;white-space:nowrap}
  .pg-facts li > span:last-child{font-size:.86rem}
}
/* the smallest phones: the when switch keeps its words and drops the counts,
   and the topics go one to a row */
@media (max-width:350px){
  .dir-seg .dir-n{display:none}
  .ct-ask .ct-tiles{grid-template-columns:minmax(0,1fr)}
}


/* ═══════════════════════════════════════════════════════════
   CONTEST PAGES — The County Cup · Best Stand in Oklahoma
   Rebuilt 2026-09-26 on the same header as the four public pages. A pill
   over the title says where the season is, a line under the copy shows it,
   and the showpiece sits beside them: the county map for the Cup, the prize
   for Best Stand. Then the board gets the room. Prefixed cx- (shared), cq-
   (the Cup) and bs- (Best Stand).
   ═══════════════════════════════════════════════════════════ */

/* ── the header ── */
/* The copy and its season line on the left, the showpiece beside them. The
   empty first and last rows take whatever height the showpiece adds, so the
   copy and the line stay together, centred against it. */
.cx-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:1fr auto auto 1fr;
  column-gap:clamp(1.4rem,3.6vw,3.2rem);
}
.cx-grid > .pg-copy{grid-column:1;grid-row:2}
.cx-grid > .cx-when{grid-column:1;grid-row:3;margin-top:1.35rem}
.cx-grid > .cx-show{grid-column:2;grid-row:1 / 5;align-self:center}
.bs-grid{grid-template-columns:minmax(0,1fr) minmax(0,350px)}
.cx-hero h1{font-size:clamp(2.2rem,4.2vw,3.4rem);max-width:none}
.cx-hero .pg-lede{max-width:48ch}

/* where the season is, in a word or two, over the title */
.cx-pill{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .85rem;padding:.26rem .95rem .26rem .75rem;border-radius:999px;
  font-family:var(--display);font-size:.92rem;font-weight:700;line-height:1.3;
  color:#7A5303;background:rgba(255,214,23,.3);border:1px solid rgba(242,183,5,.42);
}
.cx-pill:empty{display:none}
.cx-pill i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--lemon-600)}
.cx-pill[data-p="voting"]{color:#15691F;background:rgba(63,163,77,.13);border-color:rgba(63,163,77,.3)}
.cx-pill[data-p="voting"] i{background:#2E9E3A;box-shadow:0 0 0 4px rgba(46,158,58,.2);animation:pulse 2.4s ease-in-out infinite}
.cx-pill[data-p="closed"]{color:var(--ink-2);background:rgba(18,48,36,.06);border-color:var(--hair-2)}
.cx-pill[data-p="closed"] i{background:var(--ink-3)}
/* the tie-break runoff: a short, sharp extra round — forest and lemon, pulsing */
.cx-pill[data-p="runoff"]{color:var(--lemon);background:var(--forest-800);border-color:var(--forest-800)}
.cx-pill[data-p="runoff"] i{background:var(--lemon);box-shadow:0 0 0 4px rgba(255,214,23,.25);animation:pulse 1.6s ease-in-out infinite}

/* the season as a line: its days evenly spaced, the part gone by in lemon,
   and today flagged between two of them */
.cx-when{
  padding:.75rem 1rem .8rem;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
}
.cx-when:empty{display:none}
.cx-when-k{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cx-line{position:relative;padding-top:22px}
.cx-track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.cx-track::before,.cx-track::after{content:"";position:absolute;top:9px;height:4px;border-radius:99px;left:calc(50% / var(--n))}
.cx-track::before{right:calc(50% / var(--n));background:var(--cream-3)}
.cx-track::after{width:calc((100% - 100% / var(--n)) * var(--f));background:linear-gradient(90deg,var(--lemon),var(--lemon-600))}
.cx-track li{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;min-width:0;padding:0 .15rem;text-align:center}
.cx-track i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2.5px var(--hair-2)}
.cx-track .is-done i{background:var(--lemon-600);box-shadow:none;color:var(--forest-900)}
.cx-track .ai{width:13px;height:13px;stroke-width:3}
.cx-track .is-next i{box-shadow:inset 0 0 0 2.5px var(--forest-700),0 0 0 5px rgba(63,163,77,.15)}
.cx-track b{margin-top:.4rem;font-family:var(--display);font-size:.84rem;font-weight:700;line-height:1.15;color:var(--ink-2)}
.cx-track .is-next b{color:var(--forest-900)}
.cx-track time{margin-top:.1rem;font-size:.78rem;font-weight:700;color:var(--ink-3)}
.cx-now{
  position:absolute;top:0;z-index:2;left:calc((.5 + var(--f) * (var(--n) - 1)) / var(--n) * 100%);translate:-50% 0;
  font-size:.64rem;font-weight:800;line-height:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--coral);white-space:nowrap;
}
.cx-now::after{content:"";position:absolute;left:50%;top:13px;width:2px;height:20px;margin-left:-1px;border-radius:2px;background:var(--coral)}

/* ── the Cup: finding your county ── */
.cq-find{
  position:relative;display:flex;align-items:center;gap:.55rem;width:min(100%,460px);margin-top:1.1rem;
  padding:.26rem .32rem .26rem 1.05rem;background:#fff;border:1px solid var(--hair);border-radius:999px;box-shadow:var(--e3);
  transition:border-color .2s,box-shadow .2s;
}
.cq-find:focus-within{border-color:var(--forest-600);box-shadow:var(--e3),0 0 0 5px rgba(63,163,77,.15)}
.cq-find > .ai{width:19px;height:19px;color:var(--ink-3);stroke-width:2.2}
.cq-find input{flex:1;min-width:0;border:0;background:none;outline:none;padding:.66rem 0;font-size:1.02rem;font-weight:600}
.cq-find input::placeholder{color:var(--ink-3);font-weight:500}
.cq-find-x{
  flex:none;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--cream-2);color:var(--ink-2);transition:background .15s,color .15s;
}
.cq-find-x:hover{background:var(--cream-3);color:var(--ink)}
.cq-find-x .ai{width:14px;height:14px;stroke-width:2.6}
.cq-find-x[hidden]{display:none}
.cq-find-list{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + .4rem);margin:0;padding:.35rem;list-style:none;
  background:#fff;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--e4);animation:selIn .16s var(--ease);
}
.cq-find-list[hidden]{display:none}
.cq-opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;border-radius:12px;cursor:pointer}
.cq-opt[aria-selected="true"],.cq-opt:hover{background:var(--cream-2)}
.cq-opt-n{display:grid;min-width:0;line-height:1.25}
.cq-opt-n b{font-family:var(--display);font-size:1rem;font-weight:700;overflow-wrap:anywhere}
.cq-opt-n small{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.cq-opt-st{
  flex:none;padding:.14rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--cream-3);color:var(--ink-3);
}
.cq-opt-st.is-race{background:var(--lemon);color:var(--forest-900)}
.cq-opt-st.is-wait{background:rgba(242,183,5,.2);color:#7A5303}
.cq-none{padding:.6rem .7rem;font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.cq-jump{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:.95rem;font-size:.94rem;font-weight:700}
.cq-jump a{display:inline-flex;align-items:center;gap:.3rem;color:var(--forest-700);text-decoration:none}
.cq-jump a:hover{color:var(--coral)}
.cq-jump .ai{width:16px;height:16px;stroke-width:2.2}

/* ── the Cup: the map ── */
/* Drawn to match the Open right now map: the same road-atlas board, forest
   slab, county palette, stand dots and floating county name. The outlines are
   the Census's (okmap.py); strokes stay one width at any zoom, and --k (set
   by okZoom in js/live.js) keeps pins, dots and the slab one size. */
.cq-mapbox{position:relative;margin:0;min-width:0}
.cq-map{
  position:relative;overflow:hidden;padding:clamp(.8rem,2.2vw,1.3rem) clamp(.6rem,1.8vw,1.1rem) clamp(1rem,2.4vw,1.5rem);
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e3);
  background:radial-gradient(rgba(18,48,36,.075) 1px,transparent 1.3px) 0 0 / 14px 14px,
             radial-gradient(circle at 78% 18%,rgba(255,214,23,.16),transparent 55%),#FFFDF6;
}
.cq-svg{display:block;width:100%;height:auto;overflow:visible;--k:1}
.cq-shade{fill:var(--forest-800);opacity:.9;transform:translate(calc(6px * var(--k,1)),calc(12px * var(--k,1)))}
.cq-c{fill:#EEF2E3;stroke:#FFFCF2;stroke-width:1.15px;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .22s}
.cq-c:hover{fill:#DFE9CF}
.cq-c.is-wait{fill:#CFE2B4}
.cq-c.is-wait:hover{fill:#BFD89E}
.cq-c.is-race{fill:var(--lemon)}
.cq-c.is-race:hover{fill:#FFC700}
.cq-c.is-on{fill:#FFF1A8}
.cq-c.is-wait.is-on{fill:#B6D594}
.cq-c.is-race.is-on{fill:#FFC700}
.cq-edge{fill:none;stroke:var(--forest-800);stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cq-hi{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cq-hi-sel{stroke:var(--forest-900);stroke-width:3px}
.cq-hi-hover{stroke:var(--forest-600);stroke-width:2.2px}
/* every listed stand is a dot; it only shows where they are on this page */
.cq-dots{pointer-events:none}
/* a lemon pin on every county that is racing, so a small one is not missed;
   it pulses while voting is open */
.cq-pin{pointer-events:none}
.cq-pin circle{fill:var(--lemon-600);stroke:#fff;stroke-width:2.6px;vector-effect:non-scaling-stroke}
.cq-pin .cq-pin-core{fill:var(--forest-900);stroke:none}
.cq-pin .cq-pin-ring{fill:rgba(242,183,5,.32);stroke:none;transform-box:fill-box;transform-origin:center}
.cq-map[data-p="voting"] .cq-pin-ring,.cq-map[data-p="runoff"] .cq-pin.is-runoff .cq-pin-ring{animation:cqPing 2.4s ease-out infinite}
@keyframes cqPing{0%{transform:scale(.55);opacity:1}75%,100%{transform:scale(1.5);opacity:0}}
/* the key sits in the corner the Panhandle leaves empty */
.cq-key{position:absolute;left:clamp(.7rem,2vw,1.2rem);bottom:clamp(.8rem,2.2vw,1.3rem);margin:0;padding:0;list-style:none;display:grid;gap:.3rem;pointer-events:none;transition:opacity .2s}
.cq-key:empty{display:none}
.cq-map.is-zoomed .cq-key{opacity:0}
.cq-key li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;line-height:1.2;color:var(--ink-2)}
.cq-key i{width:13px;height:13px;flex:none;border-radius:4px;background:#EEF2E3;box-shadow:inset 0 0 0 1px rgba(18,48,36,.18)}
.cq-key .is-race i{background:var(--lemon);box-shadow:inset 0 0 0 1px rgba(170,120,0,.42)}
.cq-key .is-wait i{background:#CFE2B4}
.cq-key .is-dot i{width:9px;height:9px;margin:0 2px;border-radius:50%;background:var(--forest-700);box-shadow:0 0 0 1.5px #FFFCF2}
.cq-key b{min-width:1.3rem;font-family:var(--display);font-size:.95rem;font-weight:800;color:var(--ink);text-align:right}

/* the card under the map: the county pointed at or picked, and what to do.
   Tall enough for its longest sentence on two lines, so moving the mouse from
   county to county never nudges the page under it. */
.cq-read{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;min-height:110px;margin-top:.9rem;padding:.8rem .9rem .8rem 1.05rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e2);
}
.cq-read.is-race{border-color:rgba(242,183,5,.5);background:linear-gradient(120deg,#FFF9DE,#fff 55%)}
.cq-hint{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.cq-hint > .ai{width:20px;height:20px;color:var(--coral)}
.cq-r{flex:1 1 15rem;min-width:0;display:grid;gap:.12rem}
.cq-r-k{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cq-r-st{padding:.08rem .5rem;border-radius:999px;background:var(--cream-3);color:var(--ink-2)}
.cq-read.is-race .cq-r-st{background:var(--lemon);color:var(--forest-900)}
.cq-read.is-wait .cq-r-st{background:rgba(242,183,5,.22);color:#7A5303}
.cq-r h3{font-size:1.28rem;line-height:1.15;overflow-wrap:anywhere}
.cq-r h3 a{color:inherit;text-decoration:none}
.cq-r h3 a:hover{color:var(--forest-600)}
.cq-r-say{font-size:.9rem;font-weight:600;line-height:1.4;color:var(--ink-2)}
.cq-read .btn{flex:none}
.cq-read .btn .ai{width:16px;height:16px;stroke-width:2.2}

/* ── the rows people vote on (both pages) ── */
/* Each board is its own container, so a row lays itself out for the room it
   has: one line on a wide board, two in a half-width card, and on a phone
   the picture steps aside so the name keeps its width. */
.cx-rows{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;container-type:inline-size}
.cx-row{
  position:relative;display:grid;grid-template-columns:40px 64px minmax(0,1fr) minmax(150px,1.1fr) auto;align-items:center;gap:.9rem;
  padding:.6rem .8rem .6rem .7rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);
  transition:border-color .2s,background-color .2s;
}
.cx-rows.is-final .cx-row{grid-template-columns:40px 64px minmax(0,1fr) minmax(150px,1.1fr)}
.cx-rows.is-entries .cx-row{grid-template-columns:64px minmax(0,1fr) auto}
.cx-row::before{content:"";position:absolute;inset:-1px auto -1px -1px;width:4px;border-radius:var(--r) 0 0 var(--r);background:var(--leaf);opacity:0;transition:opacity .2s}
.cx-row.is-lead{border-color:rgba(242,183,5,.55);background:linear-gradient(90deg,rgba(255,214,23,.17),#fff 55%)}
.cx-row.is-mine{border-color:rgba(63,163,77,.42)}
.cx-row.is-mine::before{opacity:1}
.cx-place{position:relative;width:34px;height:34px;justify-self:center;border-radius:50%;display:grid;place-items:center;background:var(--cream-2)}
.cx-place b{font-family:var(--display);font-size:1rem;font-weight:800;line-height:1;color:var(--ink-3)}
.cx-row.is-lead .cx-place{background:linear-gradient(140deg,var(--lemon),var(--lemon-600));box-shadow:var(--glow-lemon)}
.cx-row.is-lead .cx-place b{color:var(--forest-900)}
.cx-place .ai{position:absolute;top:-13px;left:50%;translate:-50% 0;width:19px;height:19px;fill:var(--lemon);stroke:#C99400;stroke-width:1.7}
.cx-shot{width:64px;height:48px;border-radius:10px;object-fit:cover;display:block;background:var(--cream-2)}
.cx-name{display:grid;justify-items:start;gap:.05rem;min-width:0;text-decoration:none;color:inherit}
.cx-name b{font-family:var(--display);font-size:1.08rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere;transition:color .15s}
.cx-name span{font-size:.84rem;font-weight:600;line-height:1.35;color:var(--ink-3);overflow-wrap:anywhere}
.cx-name:hover b{color:var(--forest-600)}
.cx-tag{
  display:inline-flex;align-items:center;gap:.25rem;margin-top:.25rem;padding:.08rem .5rem;border-radius:999px;
  font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(242,183,5,.24);color:#7A5303;
}
.cx-tag.is-win{background:var(--forest-800);color:var(--lemon)}
.cx-tag .ai{width:12px;height:12px;stroke-width:2.4}
.cx-count{display:flex;align-items:center;gap:.75rem;min-width:0}
.cx-bar{flex:1;min-width:24px;height:8px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.cx-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lemon),var(--lemon-600));transition:width .5s var(--ease)}
.cx-n{flex:none;display:grid;justify-items:end;min-width:3.2rem;line-height:1.05}
.cx-n b{font-family:var(--display);font-size:1.22rem;font-weight:800}
.cx-n small{font-size:.72rem;font-weight:700;color:var(--ink-3)}
/* one width for all three labels, so the bars line up down the board */
.cx-vote{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:7.8rem;padding:.5rem .9rem;cursor:pointer;
  font-family:var(--display);font-size:.92rem;font-weight:800;line-height:1.2;border-radius:999px;
  border:1.5px solid var(--forest-800);background:var(--forest-800);color:var(--cream);
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,translate .22s var(--spring);
}
.cx-vote:hover{background:var(--lemon);border-color:var(--lemon-600);color:var(--forest-900);translate:0 -1px;box-shadow:var(--e2)}
.cx-vote.is-move{background:#fff;color:var(--forest-800)}
.cx-vote.is-move:hover{background:var(--lemon);color:var(--forest-900)}
.cx-vote.is-on{background:linear-gradient(140deg,var(--lemon),var(--lemon-600));border-color:var(--lemon-600);color:var(--forest-900);box-shadow:var(--glow-lemon)}
.cx-vote .ai{width:16px;height:16px;stroke-width:2.8}
.cx-vote[aria-busy="true"]{opacity:.55;pointer-events:none}
@container (max-width:620px){
  .cx-row{grid-template-columns:34px 52px minmax(0,1fr) auto;column-gap:.7rem;row-gap:.45rem;padding:.6rem .7rem}
  .cx-place{grid-column:1;grid-row:1 / 3}
  .cx-shot{grid-column:2;grid-row:1 / 3;width:52px;height:42px}
  .cx-name{grid-column:3 / -1;grid-row:1}
  .cx-count{grid-column:3;grid-row:2}
  .cx-vote{grid-column:4;grid-row:2}
  .cx-rows.is-final .cx-row{grid-template-columns:34px 52px minmax(0,1fr)}
  .cx-rows.is-entries .cx-row{grid-template-columns:52px minmax(0,1fr) auto}
  .cx-rows.is-entries .cx-shot{grid-column:1;grid-row:1}
  .cx-rows.is-entries .cx-name{grid-column:2}
}
@container (max-width:430px){
  .cx-row{grid-template-columns:30px minmax(0,1fr) auto;column-gap:.6rem}
  .cx-rows:not(.is-entries) .cx-shot{display:none}
  .cx-place{grid-row:1;width:30px;height:30px}
  .cx-name{grid-column:2 / -1}
  .cx-count{grid-column:2}
  .cx-vote{grid-column:3}
  .cx-rows.is-final .cx-row{grid-template-columns:30px minmax(0,1fr)}
  .cx-rows.is-entries .cx-row{grid-template-columns:46px minmax(0,1fr) auto}
  .cx-rows.is-entries .cx-shot{width:46px;height:36px}
}
/* the narrowest boards (a race card on a small phone): the number stays, the
   bar steps aside rather than squeezing it */
@container (max-width:286px){
  .cx-bar{display:none}
}
.cx-mine{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;padding:.65rem .9rem;border-radius:14px;
  background:rgba(63,163,77,.1);border:1px solid rgba(63,163,77,.3);font-size:.93rem;font-weight:600;line-height:1.45;color:#1B5E2A;
}
.cx-mine .ai{width:20px;height:20px;flex:none;color:#2E9E3A;stroke-width:2.6}
.cx-mine b{font-family:var(--display);font-weight:800}
.cx-more{margin-top:.9rem;text-align:center}
.cx-none{padding:1.2rem;text-align:center;font-weight:600;color:var(--ink-3);background:#fff;border:1px dashed var(--hair-2);border-radius:var(--r)}

/* ── the Cup: the races ── */
.cq-grid-races{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
/* an odd one out takes the whole row, rather than sitting beside a gap */
.cq-grid-races > :last-child:nth-child(odd){grid-column:1 / -1}
.cq-race{position:relative;overflow:hidden;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e2);scroll-margin-top:92px}
.cq-race::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--rc,var(--lemon))}
.cq-race:target{animation:cqFlash 1.8s var(--ease)}
@keyframes cqFlash{0%,35%{box-shadow:0 0 0 4px var(--lemon),var(--e3)}}
.cq-race-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.15rem .8rem}
.cq-race-id{min-width:0}
.cq-race-id h3{font-size:1.4rem;line-height:1.1;overflow-wrap:anywhere}
.cq-race-id p{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .9rem;margin-top:.28rem;font-size:.84rem;font-weight:700;color:var(--ink-3)}
.cq-reg{display:inline-flex;align-items:center;gap:.4rem}
.cq-reg::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rc,var(--lemon))}
/* a race in the tie-break runoff: a forest frame, a lemon stripe, a small badge */
.cq-race.is-runoff{border-color:var(--forest-800);box-shadow:0 0 0 2px var(--forest-800),var(--e2)}
.cq-race.is-runoff::before{background:repeating-linear-gradient(-45deg,var(--lemon) 0 10px,var(--forest-800) 10px 20px)}
.cq-ro{display:inline-flex;align-items:center;padding:.08rem .5rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--lemon);background:var(--forest-800)}
.cq-race-v{flex:none;display:grid;justify-items:end;font-size:.7rem;font-weight:800;letter-spacing:.07em;line-height:1.1;text-transform:uppercase;color:var(--ink-3)}
.cq-race-v b{font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:-.02em;line-height:1;text-transform:none;color:var(--forest-900)}
.cq-race .cx-rows{padding:0 .75rem;gap:.4rem}
.cq-race .cx-row{background-color:var(--cream);box-shadow:none}
.cq-race-ft{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;margin-top:.75rem;
  padding:.75rem 1.15rem .9rem;border-top:1px solid var(--hair);font-size:.9rem;font-weight:700;line-height:1.4;color:var(--ink-2);
}
.cq-race-ft a{display:inline-flex;align-items:center;gap:.3rem;color:var(--forest-700);text-decoration:none;white-space:nowrap}
.cq-race-ft a:hover{color:var(--coral)}
.cq-race-ft .ai{width:16px;height:16px;stroke-width:2.2}
.cq-blank{background:#fff;border:1px dashed var(--hair-2);border-radius:var(--r-lg)}

/* the counties one stand short: two columns that fill downward, so they
   always end level or one apart */
.cq-wait{margin-top:clamp(1.4rem,3vw,2rem)}
.cq-wait-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1.2rem;margin-bottom:.7rem}
.cq-wait-hd h3{font-size:1.3rem}
.cq-wait-hd p{font-size:.93rem;font-weight:600;color:var(--ink-3)}
.cq-wait-list{list-style:none;margin:0;padding:0;columns:2;column-gap:.6rem}
.cq-wait-list li{
  break-inside:avoid;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:.55rem;
  padding:.65rem .75rem .65rem .95rem;background:var(--cream-2);border:1px dashed var(--hair-2);border-radius:var(--r);
}
.cq-w-txt{flex:1 1 11rem;min-width:0;display:grid;line-height:1.3}
.cq-w-txt b{font-family:var(--display);font-size:1.05rem;font-weight:800;overflow-wrap:anywhere}
.cq-w-txt span{font-size:.86rem;font-weight:600;color:var(--ink-3);overflow-wrap:anywhere}
.cq-w-need{flex:none;padding:.16rem .6rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(228,87,46,.1);color:var(--coral)}
.cq-wait-list .btn{flex:none}

/* ── how it works (both pages) ── */
.cx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.cx-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;padding:1rem 1.1rem 1.05rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
}
.cx-step-n{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;font-weight:800;
  color:var(--forest-900);background:linear-gradient(140deg,var(--lemon),var(--lemon-600));box-shadow:var(--glow-lemon);
}
.cx-step:nth-child(2) .cx-step-n{background:linear-gradient(140deg,#BFE0C6,var(--leaf));color:#0A2E1B;box-shadow:0 10px 26px -10px rgba(63,163,77,.65)}
.cx-step.is-win .cx-step-n{background:linear-gradient(140deg,var(--tangerine),var(--coral));color:#fff;box-shadow:0 10px 26px -10px rgba(228,87,46,.65)}
.cx-step-n .ai{width:21px;height:21px;stroke-width:2.1}
.cx-step h3{font-size:1.2rem;line-height:1.15}
.cx-step p{margin-top:.3rem;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
/* Best Stand (2026-10-16), the County Cup (2026-10-18): one forest bar under the
   steps in place of the rules box and the side card, which only repeated them.
   The whole bar is the link. */
.cx-rules-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:.8rem;padding:1rem 1.1rem 1rem 1.2rem;
  border-radius:var(--r-lg);background:var(--forest-800);color:#fff;text-decoration:none;box-shadow:var(--e2);transition:transform .18s var(--ease),box-shadow .18s}
.cx-rules-bar:hover{transform:translateY(-2px);box-shadow:var(--e3)}
.cx-rules-bar-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,214,23,.16);color:var(--lemon)}
.cx-rules-bar-ico .ai{width:24px;height:24px}
.cx-rules-bar-txt b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:800;line-height:1.2;color:#fff}
.cx-rules-bar-txt span{display:block;margin-top:.15rem;font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.78)}
.cx-rules-bar-go{pointer-events:none;white-space:nowrap}
@media (max-width:640px){
  .cx-rules-bar{grid-template-columns:auto minmax(0,1fr);align-items:start;row-gap:.85rem}
  .cx-rules-bar-go{grid-column:1 / -1;justify-content:center}
}

/* ── Best Stand: the prize ── */
.bs-prize{position:relative;margin:0;justify-self:center;width:min(100%,340px)}
.bs-board{
  position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;padding:9% 8% 5%;
  border-radius:var(--r-xl);box-shadow:var(--e4);rotate:-2deg;transition:rotate .6s var(--spring);
  background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.6),transparent 55%),linear-gradient(150deg,#FFF3CC,#FFD98A);
}
.bs-board::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,rgba(18,48,36,.03) 0 10px,transparent 10px 20px)}
.bs-prize:hover .bs-board{rotate:0deg}
.bs-art{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(7,40,27,.16))}
.bs-sticker{
  position:absolute;top:-16px;right:-10px;z-index:2;width:92px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;font-family:var(--display);font-size:1rem;font-weight:800;line-height:1.02;color:#fff;rotate:12deg;
  background:linear-gradient(150deg,var(--tangerine),var(--coral));box-shadow:0 12px 26px -8px rgba(228,87,46,.7);
}
.bs-prize figcaption{display:grid;gap:.2rem;margin-top:1.05rem;text-align:center}
.bs-prize figcaption b{font-family:var(--display);font-size:1.15rem;font-weight:800;line-height:1.25}
.bs-prize figcaption span{font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.cx-facts{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.cx-facts:empty{display:none}
.cx-facts li{
  display:inline-flex;align-items:baseline;gap:.35rem;padding:.26rem .85rem;border-radius:999px;
  background:#fff;border:1px solid var(--hair);box-shadow:var(--e1);font-size:.9rem;font-weight:700;color:var(--ink-2);
}
.cx-facts b{font-family:var(--display);font-weight:800;color:var(--forest-700)}

/* ── Best Stand: the board ── */
.bs-tools[hidden]{display:none}
.bs-find{
  display:flex;align-items:center;gap:.55rem;width:min(100%,420px);margin-bottom:.8rem;padding:.15rem .9rem;
  background:#fff;border:1px solid var(--hair);border-radius:999px;box-shadow:var(--e1);transition:border-color .2s,box-shadow .2s;
}
.bs-find:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.bs-find .ai{width:18px;height:18px;color:var(--ink-3)}
.bs-find input{flex:1;min-width:0;border:0;background:none;outline:none;padding:.6rem 0;font-size:1rem;font-weight:600}
.bs-find input::-webkit-search-cancel-button{display:none}

/* ── a tap is not a hover, here either ── */
@media (hover:none){
  .cx-vote:hover{translate:none}
  .bs-prize:hover .bs-board{rotate:-2deg}
  /* a tapped county would keep its hover colour; the picked outline says it instead */
  .cq-c:hover{fill:#EEF2E3}
  .cq-c.is-wait:hover{fill:#CFE2B4}
  .cq-c.is-race:hover{fill:var(--lemon)}
}

/* ── narrower screens ── */
@media (max-width:980px){
  /* the map needs the width: the header stacks, and the map takes all of it */
  .cq-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .cq-grid > .pg-copy,.cq-grid > .cx-show,.cq-grid > .cx-when{grid-column:1;grid-row:auto}
  .cq-grid > .cx-show{margin-top:1.4rem}
  .cq-grid > .cx-when{margin-top:1rem}
  .bs-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
}
@media (max-width:860px){
  .cx-steps{grid-template-columns:minmax(0,1fr)}
  .cq-grid-races{grid-template-columns:minmax(0,1fr)}
  .cq-wait-list{columns:1}
}
@media (max-width:780px){
  .bs-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .bs-grid > .pg-copy,.bs-grid > .cx-show,.bs-grid > .cx-when{grid-column:1;grid-row:auto}
  .bs-grid > .cx-show{margin-top:1.8rem;width:min(100%,280px)}
  .bs-grid > .cx-when{margin-top:1.2rem}
  .cx-pill{margin-bottom:.7rem}
  .cq-find{width:100%;margin-top:.95rem}
  .cq-race-hd{padding:1rem 1rem .7rem}
  .cq-race .cx-rows{padding:0 .6rem}
  .cq-race-ft{padding:.7rem 1rem .85rem}
}
@media (max-width:560px){
  /* the key comes out from the map's corner and sits under it, two by two */
  .cq-key{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.7rem}
  .cq-map.is-zoomed .cq-key{opacity:1}
  .cq-key li{flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .3rem;text-align:center;font-size:.76rem;
             background:rgba(255,255,255,.8);border:1px solid var(--hair);border-radius:12px}
  .cq-key li i{order:-1}
  .cq-key b{min-width:0;font-size:1.05rem;text-align:center}
  .cq-read{min-height:0;padding:.75rem .85rem;gap:.6rem}
  .cq-read .btn{width:100%}
  .cq-hint{font-size:.9rem}
  .cx-when{padding:.7rem .75rem .75rem}
  .cx-track b{font-size:.76rem}
  .cx-track time{font-size:.74rem}
  .cx-step{padding:.95rem}
  .cq-wait-list li .btn{width:100%}
  /* three facts as one even strip, never two and a lone one */
  .cx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-facts li{flex-direction:column;align-items:center;gap:0;padding:.45rem .3rem;border-radius:14px;text-align:center;font-size:.78rem;line-height:1.25}
  .cx-facts b{font-size:1.15rem}
  .bs-sticker{width:78px;font-size:.88rem;top:-12px;right:-6px}
}
@media (max-width:360px){
  .cx-pill{border-radius:14px}
  /* four stops across 264px: every word of every label still fits its quarter */
  .cx-track li{padding:0}
  .cx-track b{font-size:.7rem}
}

/* ═══════════════════════════════════════════════════════════
   TEN THINGS THAT DRAW A CROWD (2026-10-13)
   the hot strip · open right now · near me · numbers and founders ·
   Stand of the Week · the stand kit · the Starter Kit ·
   share cards · the owner's switches
   ═══════════════════════════════════════════════════════════ */

/* ── the strip under the header: weather as lemonade weather ── */
/* .hotbar, not .hot: the admin already uses .hot for "needs you" badges */
.hotbar{
  background:linear-gradient(100deg,var(--forest-800),var(--forest-900));
  color:var(--cream);border-bottom:3px solid var(--lemon);
}
.hotbar[hidden]{display:none}
.hot-in{display:flex;align-items:center;gap:1.1rem;min-height:56px;padding:.5rem 0}
.hot-wx{display:flex;align-items:center;gap:.7rem;flex:none;text-decoration:none;color:inherit}
.hot-deg{font-family:var(--display);font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--lemon)}
.hot-txt{display:grid;gap:.05rem;line-height:1.2}
.hot-where{font-size:.8rem;font-weight:700;color:rgba(255,252,242,.66)}
.hot-word{font-family:var(--display);font-size:.98rem;font-weight:700}
.hot-ix{display:inline-flex;gap:1px;margin-left:.25rem}
.hot-ix i{display:block;width:20px;height:20px}
.hot-ix svg{width:100%;height:100%}
.hot-ix .lv-bd{fill:transparent;stroke:rgba(255,252,242,.35);stroke-width:1.6}
.hot-ix .lv-lf{fill:rgba(255,252,242,.25)}
.hot-ix .on .lv-bd{fill:var(--lemon);stroke:var(--lemon-600)}
.hot-ix .on .lv-lf{fill:var(--leaf-300)}
.hot-say{flex:none;max-width:30ch;font-size:.9rem;font-weight:600;color:rgba(255,252,242,.78);border-left:1px solid rgba(255,252,242,.16);padding-left:1.1rem}
.hot-list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.hot-list::-webkit-scrollbar{display:none}
.hot-list li{flex:none}
.hot-list li + li{border-left:1px solid rgba(255,252,242,.16)}
.hot-list a{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;padding:.25rem 1rem;white-space:nowrap;color:inherit;transition:color .18s}
.hot-list a i{width:7px;height:7px;border-radius:50%;background:var(--leaf-300);box-shadow:0 0 0 4px rgba(140,198,63,.2);animation:pulse 2.4s ease-in-out infinite;align-self:center}
.hot-list b{font-family:var(--display);font-size:.96rem;font-weight:700}
.hot-list span{font-size:.85rem;color:rgba(255,252,242,.62)}
.hot-list a:hover b{color:var(--lemon)}
.hot-go{flex:none;margin-left:auto;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--lemon);white-space:nowrap}
.hot-go:hover{text-decoration:underline;text-underline-offset:3px}
.hot-dot{display:none}   /* the status dot is the phone layout's; the desktop line stays as it was */

/* ── open right now, wherever a stand shows ── */
.status.open-now{background:rgba(63,163,77,.16);color:#15691F}
.status.open-now i{background:#2E9E3A;box-shadow:0 0 0 3px rgba(46,158,58,.22);animation:pulse 2s ease-in-out infinite}
.status.on-shot.open-now{background:#F3FBEF}
.modal-hd .status.open-now,.listing-hero .status.open-now{background:rgba(63,163,77,.16);color:#15691F}
.card.is-open-now{border-color:rgba(63,163,77,.45);box-shadow:0 0 0 3px rgba(63,163,77,.14),var(--e1)}
.dl-row.is-open-now,.savedrow.is-open-now{box-shadow:inset 4px 0 0 var(--leaf)}

/* ── the number and the Founder badge ── */
.num-mini{background:rgba(18,48,36,.07);color:var(--ink-2)}
.founder-mini{background:linear-gradient(140deg,var(--lemon) 0%,var(--lemon-600) 100%);color:var(--forest-900)}
.mi-mini{background:rgba(63,163,77,.13);color:#1B6B2A}
.sm-badges{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.sm-badges .mini{box-shadow:0 2px 8px rgba(7,40,27,.22)}
/* over the photo the number sits on dark green, so it goes cream like the chip above it */
.sm-badges .num-mini{background:rgba(255,252,242,.94);color:var(--forest-900)}
.listing-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.listing-badges:empty{display:none}
.listing-badges .mini{font-size:.86rem;padding:.18rem .75rem}
.addr-go{margin-top:.8rem}
.cov-first{margin-top:.6rem;font-size:.98rem;color:var(--ink-2);font-weight:600;line-height:1.55}
.cov-first a{font-weight:800;color:var(--forest-700)}
.cov-first b{color:var(--ink)}
.quick-near{
  display:inline-flex;align-items:center;gap:.35rem;margin-left:.3rem;padding:.3rem .85rem;border-radius:999px;
  background:var(--forest-800);color:var(--cream);text-decoration:none;font-family:var(--display);font-size:.9rem;font-weight:700;
  transition:background .18s,translate .24s var(--spring);
}
.quick-near svg{width:14px;height:14px;fill:var(--lemon)}
.quick-near:hover{background:var(--forest-900);translate:0 -1px}

/* ── share a picture ── */
.sc-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font:inherit}
.sc-btn .ai{width:17px;height:17px;flex:none}
.sc-btn[aria-busy="true"]{opacity:.6;cursor:progress}
/* lives at the end of the count (bar · number · share), or in the last column
   of an entries row, so it rides the row's own line and never adds a second */
.cx-share{
  position:relative;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--hair);border-radius:50%;background:#fff;color:var(--ink-3);
  display:inline-grid;place-items:center;transition:color .18s,border-color .18s,background .18s;
}
.cx-share span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cx-share .ai{width:15px;height:15px}
.cx-share:hover{color:var(--forest-700);border-color:var(--forest-600);background:var(--cream)}
.cq-race-share{
  display:inline-flex;align-items:center;gap:.35rem;margin-right:auto;padding:.25rem .7rem;border:1px solid var(--hair);border-radius:999px;
  background:#fff;font-family:var(--display);font-size:.84rem;font-weight:700;color:var(--ink-2);cursor:pointer;transition:border-color .18s,color .18s;
}
.cq-race-share:hover{border-color:var(--forest-600);color:var(--forest-700)}

/* ── Stand of the Week on the front page ── */
.sotw{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);border-block:1px solid var(--hair)}
.sotw-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
.sotw-card{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--e3);text-decoration:none;color:var(--cream);
  background:var(--forest-900);isolation:isolate;transition:translate .3s var(--spring),box-shadow .3s;
}
.sotw-card:hover{translate:0 -4px;box-shadow:var(--e4)}
.sotw-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sotw-card.has-photo img{object-fit:contain}
.sotw-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,40,27,.86))}
.sotw-id{position:absolute;left:1.3rem;right:1.3rem;bottom:1.2rem;z-index:1;display:grid;gap:.15rem}
.sotw-k{font-family:var(--display);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lemon)}
.sotw-id strong{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.sotw-id > span{font-size:.92rem;font-weight:600;color:rgba(255,252,242,.78)}
.sotw-qa{display:grid;gap:1rem;align-content:start}
.sotw-note{font-size:1.05rem;font-weight:600;color:var(--ink-2);line-height:1.55}
.sotw-q{display:grid;gap:.35rem}
.sotw-ask{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--ink-3)}
.sotw-q blockquote{
  position:relative;margin:0;padding:.95rem 1.2rem .95rem 1.5rem;background:#fff;border:1px solid var(--hair);border-radius:20px 20px 20px 6px;
  box-shadow:var(--e1);font-size:1.08rem;line-height:1.55;color:var(--ink);
}
.sotw-q blockquote::before{content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:4px;border-radius:4px;background:var(--lemon)}
.sotw-by{font-family:var(--display);font-weight:700;color:var(--ink-2)}
.sotw-qa .btn{justify-self:start}

/* ── /open-now/ ── */
.on-grid{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
.on-find{gap:.5rem}
.on-find .ai{width:18px;height:18px}
.on-find.is-on{--bg:var(--forest-800);--fg:var(--cream)}
.on-fine{margin-top:.8rem;font-size:.84rem;font-weight:600;color:var(--ink-3);max-width:44ch}
/* the map: a road-atlas board — dotted paper, the state cut out and lifted on
   a forest slab, the Census county lines in white. Counties with stands go
   leaf green, a county with a stand pouring goes lemon. */
.on-mapbox{margin:0;min-width:0}
.on-map{
  position:relative;overflow:hidden;padding:clamp(.8rem,2.2vw,1.3rem) clamp(.6rem,1.8vw,1.1rem) clamp(1rem,2.4vw,1.5rem);
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e3);
  background:radial-gradient(rgba(18,48,36,.075) 1px,transparent 1.3px) 0 0 / 14px 14px,
             radial-gradient(circle at 78% 18%,rgba(255,214,23,.16),transparent 55%),#FFFDF6;
}
.on-svg{display:block;width:100%;height:auto;overflow:visible;--k:1}
.on-shade{fill:var(--forest-800);opacity:.9;transform:translate(calc(6px * var(--k,1)),calc(12px * var(--k,1)))}
.on-c{fill:#EEF2E3;stroke:#FFFCF2;stroke-width:1.15px;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .22s}
.on-c:hover{fill:#DFE9CF}
.on-c.is-has{fill:#CFE2B4}
.on-c.is-has:hover{fill:#BFD89E}
.on-c.is-on{fill:var(--lemon)}
.on-c.is-on:hover{fill:#FFC700}
.on-c.is-sel{fill:#FFF1A8}
.on-c.is-has.is-sel{fill:#B6D594}
.on-c.is-on.is-sel{fill:#FFC700}
/* a tapped county would keep its hover colour; the picked outline says it instead */
@media (hover:none){
  .on-c:hover{fill:#EEF2E3}
  .on-c.is-has:hover{fill:#CFE2B4}
  .on-c.is-on:hover{fill:var(--lemon)}
}
.on-edge{fill:none;stroke:var(--forest-800);stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.on-hi,.on-sel{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.on-hi{stroke:var(--forest-600);stroke-width:2.2px}
.on-sel{stroke:var(--forest-900);stroke-width:3px}
/* pins and dots keep one size at any zoom: --k is one over the zoom */
.ok-sz{transform-box:fill-box;transform-origin:center;transform:scale(var(--k,1));transition:transform .1s linear}
.ok-dot,.on-pin{cursor:pointer;outline:none}
.ok-dot circle{fill:var(--forest-700);stroke:#FFFCF2;stroke-width:1.6px;vector-effect:non-scaling-stroke;transition:fill .2s}
.ok-dot .ok-hit{fill:transparent;stroke:none}
.ok-dot:hover circle:not(.ok-hit),.ok-dot:focus-visible circle:not(.ok-hit){fill:var(--coral)}
.on-pin circle{fill:var(--lemon-600);stroke:#fff;stroke-width:2.6px;vector-effect:non-scaling-stroke;transition:fill .2s}
.on-pin .on-pin-core{fill:var(--forest-900);stroke:none}
.on-pin .on-pin-ring{fill:rgba(242,183,5,.32);stroke:none;transform-box:fill-box;transform-origin:center;animation:cqPing 2.4s ease-out infinite}
.on-pin.is-approx circle:not(.on-pin-ring):not(.on-pin-core){stroke-dasharray:3 2}
.on-pin:hover circle:not(.on-pin-ring):not(.on-pin-core),.on-pin:focus-visible circle:not(.on-pin-ring):not(.on-pin-core){fill:var(--coral)}
.ok-dot:focus-visible .ok-sz,.on-pin:focus-visible .ok-sz{filter:drop-shadow(0 0 3px var(--forest-900))}
.on-me circle{fill:var(--forest-700);stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}
.on-me .on-me-ring{fill:rgba(63,163,77,.18);stroke:var(--forest-700);stroke-width:2px}
/* the county named over the map while it is pointed at */
.ok-tag{pointer-events:none;opacity:0;transition:opacity .15s}
.ok-tag.is-on{opacity:1}
.ok-tag text{font-family:var(--display);font-size:calc(17px * var(--k,1));font-weight:800;text-anchor:middle;dominant-baseline:central}
.ok-tag-halo{fill:none;stroke:#FFFCF2;stroke-width:5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ok-tag-txt{fill:var(--forest-900)}
/* the key sits in the corner the Panhandle leaves empty */
.on-key{position:absolute;left:clamp(.7rem,2vw,1.2rem);bottom:clamp(.8rem,2.2vw,1.3rem);margin:0;padding:0;list-style:none;display:grid;gap:.3rem;pointer-events:none}
.on-key li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;line-height:1.2;color:var(--ink-2)}
.on-key i{flex:none;width:13px;height:13px;border-radius:50%}
.on-key .is-open i{background:var(--lemon-600);box-shadow:0 0 0 3px rgba(242,183,5,.3),inset 0 0 0 3.5px #fff}
.on-key .is-dot i{width:9px;height:9px;margin:0 2px;background:var(--forest-700);box-shadow:0 0 0 1.5px #FFFCF2}
.on-key .is-has i{border-radius:4px;background:#CFE2B4;box-shadow:inset 0 0 0 1px rgba(18,48,36,.18)}
.on-map.is-zoomed .on-key{opacity:0;transition:opacity .2s}
.on-whole{
  position:absolute;top:.7rem;right:.7rem;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem .42rem .7rem;cursor:pointer;
  border:1px solid rgba(18,48,36,.14);border-radius:999px;font:800 .84rem/1 var(--display);color:var(--forest-800);
  background:rgba(255,252,242,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 16px -8px rgba(7,40,27,.4);
  animation:rise .35s var(--ease) both;
}
.on-whole[hidden]{display:none}   /* only once a map is zoomed in: display above beat the hidden attribute (2026-10-14) */
@media (pointer:coarse){ .on-whole{min-height:40px;padding:.55rem .95rem .55rem .8rem} }   /* thumb-sized */
.on-whole .ai{width:16px;height:16px}
.on-whole:hover{background:var(--lemon)}
/* the card under the map: the county or stand pointed at. Tall enough that
   moving from county to county never nudges the page under it. */
.on-read{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;min-height:104px;margin-top:.75rem;padding:.75rem .9rem .75rem 1rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e2);
}
.on-read.is-open{border-color:rgba(242,183,5,.55);background:linear-gradient(120deg,#FFF9DE,#fff 58%)}
.on-hint{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.on-hint svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.on-r{flex:1 1 15rem;min-width:0;display:grid;gap:.12rem}
.on-r-k{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.on-r-st{padding:.08rem .5rem;border-radius:999px;background:var(--cream-3);color:var(--ink-2)}
.on-read.is-has .on-r-st{background:#DCEBC6;color:var(--forest-800)}
.on-read.is-open .on-r-st{background:var(--lemon);color:var(--forest-900)}
.on-r h3{font-size:1.25rem;line-height:1.15;overflow-wrap:anywhere}
.on-r h3 a{color:inherit;text-decoration:none}
.on-r h3 a:hover{color:var(--forest-600)}
.on-read.is-stand h3{display:flex;align-items:center;gap:.45rem}
.on-read.is-stand h3::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--ac,var(--forest-700))}
.on-r-say{font-size:.9rem;font-weight:600;line-height:1.4;color:var(--ink-2)}
.on-r-act{display:flex;flex-wrap:wrap;gap:.45rem}
.on-r-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0;padding:0;list-style:none}
.on-r-list button{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;cursor:pointer;border:1px solid var(--hair);border-radius:10px;
  font:700 .84rem var(--ui);color:var(--ink);background:var(--cream);transition:border-color .2s,background .2s;
}
.on-r-list button:hover{border-color:var(--forest-600);background:#fff}
.on-r-list small{font-weight:600;color:var(--ink-3)}
.on-r-list i{width:8px;height:8px;border-radius:50%;background:var(--forest-700)}
.on-r-list i.is-open{background:var(--lemon-600);box-shadow:0 0 0 2.5px rgba(242,183,5,.3)}
@media (prefers-reduced-motion:reduce){.on-pin .on-pin-ring{animation:none}.ok-sz{transition:none}}
.on-rows{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.on-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.6rem .8rem .6rem .6rem;
  background:#fff;border:1px solid var(--hair);border-left:5px solid var(--ac);border-radius:var(--r);box-shadow:var(--e1);
  animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms);
}
.on-face{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-width:0;text-decoration:none;color:inherit}
/* .on-pic, not .on-shot: .on-shot is the status chip on every stand card */
.on-pic{width:96px;height:72px;object-fit:cover;border-radius:12px;flex:none}
.on-main{display:grid;gap:.15rem;min-width:0}
.on-town{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.on-main strong{font-family:var(--display);font-size:1.25rem;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.on-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;font-size:.88rem;font-weight:700;color:var(--ink-2)}
.on-until{color:#15691F}
.on-mi{color:var(--forest-700)}
.on-spot{display:flex;gap:.35rem;font-size:.88rem;color:var(--ink-2);line-height:1.4}
.on-spot svg{width:13px;height:13px;flex:none;fill:var(--coral);margin-top:.22em}
.on-dir{gap:.4rem;white-space:nowrap}
.on-dir .ai{width:15px;height:15px}
.on-near{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:.7rem}
.on-near-face{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.7rem .85rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1);text-decoration:none;color:inherit;
  transition:border-color .18s,translate .24s var(--spring);
}
.on-near-face:hover{border-color:var(--hair-2);translate:0 -2px}
.on-near-mi{display:grid;justify-items:center;min-width:3.6rem;padding:.4rem .5rem;border-radius:12px;background:rgba(63,163,77,.12);color:#1B6B2A}
.on-near-mi b{font-family:var(--display);font-size:1.05rem;font-weight:800;line-height:1}
.on-near-mi small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.on-near-txt{display:grid;gap:.1rem;min-width:0}
.on-near-txt strong{font-family:var(--display);font-size:1.08rem;line-height:1.15;overflow-wrap:anywhere}
.on-near-txt span{font-size:.86rem;font-weight:600;color:var(--ink-3)}
.on-near-face .ai{width:18px;height:18px;color:var(--ink-3)}
.on-blank{margin-top:.4rem}

/* ── the Starter Kit ── */
.sk-batch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:stretch}
.sk-dial{display:grid;gap:1rem;align-content:start;padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e2)}
.sk-dial-l{display:grid;gap:.15rem}
.sk-dial-l span{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sk-dial-l b{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--forest-800)}
.sk-dial input[type="range"]{width:100%;accent-color:var(--lemon-600);height:2rem;cursor:pointer}
.sk-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.sk-presets .chip{padding:.32rem .8rem;font-size:.86rem}
.sk-price-l b{display:flex;align-items:baseline;gap:.2rem;font-size:1.5rem}
.sk-price-l input{
  width:4.2rem;padding:.25rem .4rem;border:1.5px solid var(--hair-2);border-radius:10px;font:inherit;font-size:1.5rem;font-weight:800;color:var(--forest-800);text-align:center;outline:none;
}
.sk-price-l input:focus{border-color:var(--forest-600)}
.sk-out{display:grid;gap:.8rem;align-content:start;padding:1.3rem 1.4rem;color:var(--cream);border-radius:var(--r-lg);background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);box-shadow:var(--e4)}
.sk-out-k{font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lemon)}
.sk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.sk-list li{display:grid;gap:.1rem;padding:.6rem .7rem;border-radius:12px;background:rgba(255,252,242,.08);border:1px solid rgba(255,252,242,.12)}
.sk-list b{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--lemon)}
.sk-list span{font-size:.78rem;font-weight:700;line-height:1.25;color:rgba(255,252,242,.72)}
.sk-math{font-size:1rem;font-weight:600;line-height:1.55;color:rgba(255,252,242,.86)}
.sk-math b{color:var(--cream)}
.sk-keep{color:var(--lemon)!important}
.sk-out .fine{color:rgba(255,252,242,.6)}
.sk-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.sk-prices{padding:1.2rem 1.3rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.sk-pfacts{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.sk-pfacts li{display:grid;gap:.05rem;padding:.6rem .75rem;border-radius:12px;background:var(--cream-2)}
.sk-pfacts b{font-family:var(--display);font-size:1.4rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--forest-800)}
.sk-pfacts span{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.sk-bars{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.sk-bars li{display:grid;grid-template-columns:5.2rem minmax(0,1fr) 2rem;align-items:center;gap:.6rem;font-size:.9rem;font-weight:700}
.sk-bar-k{color:var(--ink-2)}
.sk-bar{height:12px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.sk-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lemon),var(--lemon-600))}
.sk-bars b{font-family:var(--display);text-align:right;color:var(--ink-2)}
.sk-tips h3,.sk-h2{font-size:1.35rem;margin-bottom:.8rem}
.sk-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.sk-card{position:relative;padding:1.2rem 1.2rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden}
.sk-card::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--tone)}
.sk-card-n{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;margin-bottom:.6rem;background:var(--wash);color:var(--ink-tone,var(--tone));font-family:var(--display);font-weight:800}
.sk-card h3{font-size:1.15rem;margin-bottom:.3rem}
.sk-card p{font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.sk-card a{font-weight:700;color:var(--forest-700)}
.sk-say{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.sk-bubble{
  position:relative;margin:0;padding:1.1rem 1.2rem 1rem;background:#fff;border:1px solid var(--hair);border-radius:22px 22px 22px 6px;box-shadow:var(--e1);
}
.sk-bubble-k{font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.sk-bubble > p:not(.sk-bubble-k){font-family:var(--display);font-size:1.2rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--forest-900)}
.sk-bubble small{display:block;margin-top:.6rem;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
/* ── Stand day: the clipboard and the coins (2026-10-14) ──
   The checklist is a clipboard — a forest clip across the top with a lemon
   under it, the count big on the right, the glass filling underneath, then
   the eight things in two columns with round lemon boxes that go green. The
   money part sits beside it as four gold coins on a dashed line. */
.sk-day{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.sk-clip{position:relative;padding:0 1.25rem 1.1rem;background:#FFFCF0;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e2);overflow:hidden}
.sk-clip-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;margin:0 -1.25rem 1rem;padding:.95rem 1.25rem .9rem;
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));color:var(--cream)}
.sk-clip-lemon{width:40px;height:40px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle,#FFF4B8 0 22%,var(--lemon) 23% 100%);border:3px solid var(--lemon-600);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.sk-clip-lemon::before{content:"";position:absolute;inset:1px;border-radius:50%;background:repeating-conic-gradient(transparent 0 40deg,rgba(255,255,255,.9) 40deg 45deg)}
.sk-clip-id{min-width:0}
.sk-clip-id h3{font-size:1.25rem;line-height:1.1;color:#fff;margin:0}
.sk-clip-id p{margin:.15rem 0 0;font-family:var(--display);font-size:.84rem;font-weight:700;color:var(--lemon)}
.sk-clip-n{font-family:var(--display);font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.sk-clip-n i{font-style:normal;font-size:1.05rem;color:rgba(255,252,242,.6)}
.sk-clip .sk-meter{margin:0 0 1rem}
.sk-clip-ft{margin:.9rem 0 0;font-size:.82rem;font-weight:600;color:var(--ink-3)}

.sk-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .7rem}
.sk-check li{position:relative}
.sk-check label{position:relative;display:flex;align-items:center;gap:.75rem;min-height:3.1rem;padding:.55rem .8rem .55rem .7rem;border-radius:14px;background:#fff;border:1.5px solid var(--hair);cursor:pointer;font-weight:600;line-height:1.3;
  transition:background .18s,border-color .18s,box-shadow .18s}
.sk-check label:hover{border-color:var(--lemon-600);box-shadow:0 0 0 3px rgba(242,183,5,.16)}
.sk-check label:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.18)}
.sk-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sk-check label::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--lemon-600);
  background:radial-gradient(circle,#FFF4B8 0 24%,var(--lemon) 25% 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:background .2s,border-color .2s}
.sk-check label::after{content:"";position:absolute;left:calc(.7rem + 9px);top:50%;width:10px;height:5px;translate:0 -4px;rotate:-45deg;
  border-left:3px solid #fff;border-bottom:3px solid #fff;opacity:0;transition:opacity .15s}
.sk-check .is-done label{background:rgba(63,163,77,.09);border-color:rgba(63,163,77,.4);animation:skTick .35s cubic-bezier(.3,1.5,.5,1)}
.sk-check .is-done label::before{background:var(--leaf);border-color:var(--forest-700)}
.sk-check .is-done label::after{opacity:1}
.sk-check .is-done span{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(63,163,77,.6);color:var(--ink-3)}
@keyframes skTick{45%{scale:1.025}}

.sk-money{padding:1.3rem 1.35rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.sk-money h3{font-size:1.25rem;margin:0}
.sk-money-k{margin:.2rem 0 .9rem;font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sk-steps{list-style:none;margin:0;padding:0;display:grid}
.sk-steps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:.85rem;align-items:start;padding:.55rem 0 .95rem}
.sk-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:3.1rem;bottom:.2rem;border-left:2px dashed var(--hair-2)}
.sk-coin{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-family:var(--display);font-size:1.1rem;font-weight:800;color:#5A3F00;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 55%,var(--lemon-600));border:2px solid #C98F00;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 2px 4px rgba(18,48,36,.12)}
.sk-steps b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:800;line-height:1.2;color:var(--ink)}
.sk-steps li > div > span{display:block;margin-top:.15rem;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:900px){ .sk-day{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .sk-check{grid-template-columns:minmax(0,1fr)}
  .sk-clip{padding:0 1rem 1rem}
  .sk-clip-hd{margin:0 -1rem 1rem;padding:.85rem 1rem}
  .sk-clip-n{font-size:1.7rem}
}

/* ── the checklist meter: a glass that fills a tick at a time, with a lemon
   slice riding the pour line; and the finish, when the eighth box goes ── */
.sk-meter{margin:0 0 1rem}
.sk-meter-bar{position:relative;height:18px;border-radius:999px;background:#fff;border:1.5px solid var(--hair-2);box-shadow:inset 0 2px 4px rgba(18,48,36,.07)}
.sk-meter-fill{position:absolute;top:2px;bottom:2px;left:2px;width:0;max-width:calc(100% - 4px);border-radius:999px;
  background:repeating-linear-gradient(135deg,var(--lemon) 0 10px,var(--lemon-600) 10px 20px);background-size:28px 28px;
  transition:width .55s cubic-bezier(.2,.8,.2,1);animation:skPour 1.2s linear infinite}
@keyframes skPour{to{background-position:28px 0}}
.sk-meter.is-empty .sk-meter-fill{animation:none}
.sk-meter-lemon{position:absolute;top:50%;left:0;width:30px;height:30px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,#FFF4B8 0 20%,var(--lemon) 21% 100%);border:3px solid var(--lemon-600);box-shadow:0 2px 6px rgba(18,48,36,.2);
  transition:left .55s cubic-bezier(.2,.8,.2,1)}
.sk-meter-lemon::before{content:"";position:absolute;inset:1px;border-radius:50%;
  background:repeating-conic-gradient(transparent 0 40deg,rgba(255,255,255,.9) 40deg 45deg);opacity:.9}
.sk-meter.is-full .sk-meter-fill{background:linear-gradient(90deg,var(--lemon),var(--lemon-600));animation:none;box-shadow:0 0 0 4px rgba(242,183,5,.22)}
.sk-meter.is-full .sk-meter-lemon{animation:skLemonPop .7s cubic-bezier(.3,1.6,.4,1)}
@keyframes skLemonPop{50%{scale:1.45;rotate:25deg}}
.sk-meter-k{display:flex;justify-content:space-between;gap:1rem;margin-top:.55rem;font-family:var(--display);font-size:.9rem;font-weight:800;color:var(--ink-2)}
.sk-meter-k span:last-child{color:var(--ink-3)}
.sk-meter.is-full .sk-meter-k span{color:var(--forest-700)}

/* the finish runs the full width under both columns: the words on the left,
   the two buttons stacked on the right, so the columns above end even */
.sk-done{position:relative;overflow:hidden;margin-top:1.4rem;padding:1.6rem 1.6rem 1.55rem;border-radius:var(--r-lg);color:var(--cream);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.4rem;align-items:center;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,214,23,.28),transparent 55%),linear-gradient(150deg,var(--forest-700),var(--forest-900));box-shadow:var(--e2)}
.sk-done[hidden]{display:none}   /* display:grid above would otherwise beat the hidden attribute */
.sk-done.is-on{animation:skDoneIn .65s cubic-bezier(.2,.9,.3,1.15)}
@keyframes skDoneIn{from{opacity:0;translate:0 18px;scale:.96}}
.sk-done-say{position:relative;min-width:0}
.sk-done-k{display:inline-block;padding:.15rem .7rem;border-radius:999px;background:rgba(255,214,23,.2);color:var(--lemon);font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.sk-done h3{margin:.55rem 0 .45rem;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--lemon),#FFF4B8);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.sk-done-say > p:not(.sk-done-k){max-width:56ch;font-size:1rem;line-height:1.55;color:rgba(255,252,242,.88)}
.sk-done .btn-row{position:relative;margin:0;flex-direction:column;align-items:stretch;gap:.6rem;min-width:15rem}
.sk-done .btn-row .btn{justify-content:center}
@media (max-width:700px){
  .sk-done{grid-template-columns:minmax(0,1fr);padding:1.35rem 1.2rem 1.3rem}
  .sk-done .btn-row{min-width:0}
}
.sk-done .btn-ghost{color:var(--cream);background:transparent;border-color:rgba(255,252,242,.5)}
.sk-done .btn-ghost:hover{background:rgba(255,252,242,.12);border-color:var(--cream)}
.sk-confetti{position:absolute;inset:0;pointer-events:none}
.sk-confetti i{position:absolute;top:-16px;left:var(--x);width:11px;height:11px;border-radius:50%;background:var(--lemon);opacity:0}
.sk-confetti i:nth-child(even){border-radius:2px;width:8px;height:13px;background:var(--leaf)}
.sk-confetti i:nth-child(3n){background:var(--coral)}
.sk-confetti i:nth-child(1){--x:4%;--d:0s}    .sk-confetti i:nth-child(2){--x:12%;--d:.15s}  .sk-confetti i:nth-child(3){--x:19%;--d:.05s}
.sk-confetti i:nth-child(4){--x:27%;--d:.3s}  .sk-confetti i:nth-child(5){--x:34%;--d:.1s}   .sk-confetti i:nth-child(6){--x:42%;--d:.25s}
.sk-confetti i:nth-child(7){--x:49%;--d:0s}   .sk-confetti i:nth-child(8){--x:57%;--d:.2s}   .sk-confetti i:nth-child(9){--x:64%;--d:.35s}
.sk-confetti i:nth-child(10){--x:72%;--d:.08s} .sk-confetti i:nth-child(11){--x:79%;--d:.28s} .sk-confetti i:nth-child(12){--x:87%;--d:.12s}
.sk-confetti i:nth-child(13){--x:93%;--d:.22s} .sk-confetti i:nth-child(14){--x:97%;--d:.4s}
.sk-done.is-on .sk-confetti i{animation:skFall 2s cubic-bezier(.3,.5,.6,1) var(--d) forwards}
@keyframes skFall{0%{opacity:0;translate:0 0;rotate:0deg}12%{opacity:1}100%{opacity:0;translate:0 300px;rotate:560deg}}
@media (prefers-reduced-motion:reduce){
  .sk-meter-fill,.sk-meter-lemon,.sk-done,.sk-confetti i,.sk-check .is-done label{animation:none!important;transition:none}
}

/* ── the owner's page: open right now, the kit, the story ── */
.od-open{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 1.5rem;padding:1.1rem 1.3rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
}
.od-open.is-on{background:linear-gradient(140deg,#F3FBEF 0%,#fff 60%);border-color:rgba(63,163,77,.4)}
.od-open.is-off{opacity:.75}
.od-open-k{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:.84rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.od-open-k i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.od-open.is-on .od-open-k{color:#15691F}
.od-open.is-on .od-open-k i{background:#2E9E3A;box-shadow:0 0 0 4px rgba(46,158,58,.2);animation:pulse 2s ease-in-out infinite}
.od-open h2{font-size:1.4rem;letter-spacing:-.015em;margin-top:.2rem}
.od-open-txt p:last-child{font-size:.92rem;line-height:1.5;color:var(--ink-2);margin-top:.3rem;max-width:56ch}
.od-open-act{display:grid;gap:.6rem;justify-items:stretch;min-width:200px}
.od-hours{display:inline-flex;gap:2px;padding:3px;background:var(--cream-2);border:1px solid var(--hair);border-radius:999px}
.od-hours button{flex:1;border:0;background:none;cursor:pointer;border-radius:999px;padding:.38rem .7rem;font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--ink-2);white-space:nowrap;transition:background .18s,color .18s}
.od-hours button[aria-checked="true"]{background:var(--forest-800);color:var(--cream)}
@media (pointer:coarse){ .od-hours button{min-height:40px} }   /* thumb-sized (2026-10-14) */
.od-open-dot{width:10px;height:10px;border-radius:50%;background:var(--forest-900);margin-right:.5rem;box-shadow:0 0 0 3px rgba(7,40,27,.18)}
.od-kit p{font-size:.92rem;line-height:1.5;color:var(--ink-2);max-width:70ch}
.od-kit .od-l-act{margin-top:.8rem}
.od-story{margin-top:.8rem}
.od-qa{margin:0 0 .8rem;display:grid;gap:.4rem}
.od-qa div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.6rem;padding:.5rem .7rem;border-radius:10px;background:var(--cream)}
.od-qa dt{font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
.od-qa dd{margin:0;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.od-story-why{font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.od-story .od-l-act{margin-top:.8rem}
.od-check{display:flex!important;align-items:flex-start;gap:.7rem;padding:.7rem .85rem;border-radius:12px;background:var(--cream-2);font-size:.92rem;line-height:1.45;cursor:pointer}
.od-check input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--leaf);flex:none}

/* ── the admin: Stand of the Week ── */
.adm-spot{margin-bottom:1.2rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--e1)}
.adm-spot.has-pick{background:linear-gradient(140deg,#FFF9DF 0%,#fff 55%);border-color:rgba(242,183,5,.45)}
.adm-spot-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.6rem 1.2rem}
.adm-spot-hd h2{font-size:1.5rem;letter-spacing:-.02em;margin-top:.1rem}
.adm-spot-sub{font-size:.9rem;font-weight:600;color:var(--ink-2);margin-top:.2rem}
.adm-spot-act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.adm-spot-act .btn{gap:.35rem}
.adm-spot-act .ai{width:15px;height:15px}
.adm-spot-qa{margin:.9rem 0 0;display:grid;gap:.35rem}
.adm-spot-qa div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.6rem;padding:.45rem .65rem;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid var(--hair)}
.adm-spot-qa.in-modal{margin:0 0 1rem}
.adm-spot-qa dt{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
.adm-spot-qa dd{margin:0;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
.adm-spot-qa dd i{color:var(--ink-3)}
.tr.is-pick{box-shadow:inset 4px 0 0 var(--lemon-600)}
/* a stand that cannot be picked yet says why, quietly, where the button would be */
.td-nospot{margin-right:.6rem;font-size:.82rem;font-weight:600;color:var(--ink-3)}
.td-num{font-family:var(--ui);font-size:.72rem;font-weight:800;color:var(--ink-3);margin-right:.4rem}
.td-founder{font-family:var(--ui);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8A6503;margin-left:.3rem}

/* ── the directory: near me, the weather line ── */
.dir-near{gap:.35rem}
.dir-near .ai{width:15px;height:15px;color:var(--coral)}
.dir-near[aria-pressed="true"] .ai{color:var(--lemon)}
.dt-wx{font-size:.84rem;font-weight:600;color:rgba(255,252,242,.72);margin-top:-.3rem}
.dt-wx[hidden]{display:none}
.dt-wx b{font-family:var(--display);font-size:1rem;color:var(--lemon)}

/* ── the stand kit on screen: two letter sheets, each two horizontal cards ──
   A sheet is 8.5in × 11in; a card 8.5in × 5.5in (a take-away card 4.25in ×
   2.75in), all in print units. A card's base type is 10pt and every size on
   it is in em of that base, so kit.js can step a crowded card down a notch.
   Each card is printed on stationery art (assets/kit) that leaves blank
   zones for the words; the zones below are those blanks, measured on the
   art. On screen the sheet zooms to the page (--kz, set by kit.js); in
   print zoom is 1 and the sheet is the page. ── */
.kt-sec{padding-top:clamp(1rem,2.4vw,1.8rem)}
.kt-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 2rem}
.kt-head h1{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.025em;margin-top:.1rem}
.kt-lede{margin-top:.5rem;max-width:60ch;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}
.kt-lede b{color:var(--ink)}
.kt-act{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.kt-act .btn{gap:.45rem}
.kt-act .ai{width:18px;height:18px}
.kt-tip{margin:1rem 0 1.4rem;padding:.7rem .9rem;border-radius:12px;background:var(--cream-2);border:1px solid var(--hair);font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-2)}
.kt-sheets{display:grid;gap:2.2rem;justify-items:center}
.kt-page{margin:0;display:grid;gap:.7rem;justify-items:center;width:100%;min-width:0}
.kt-cap{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink-2)}
.kt-cap b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--forest-800);color:var(--lemon);font-size:.8rem}
.kt-cap span{font-weight:600;font-size:.8rem;color:var(--ink-3)}
.kt-sheet{
  position:relative;width:8.5in;height:11in;overflow:hidden;background:#fff;color:var(--ink);line-height:1.3;
  border:1px solid var(--hair);box-shadow:var(--e3);zoom:var(--kz,1);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
/* the reset is written at zero specificity, so a card's own spacing rule
   (.kt-law-foot{margin-top:auto}, .kt-cert-of{margin-top:4pt}…) always wins */
:where(.kt-sheet) :is(h2,p,ul,dl,dd){margin:0}
:where(.kt-sheet) ul{padding:0;list-style:none}
/* a card: the art underneath, the words in a zone on top */
.kt-card{position:absolute;left:0;top:0;width:8.5in;height:5.5in;overflow:hidden;font-size:10pt}
.kt-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:0}
.kt-in{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.kt-logo{display:block;height:auto;flex:none}
.kt-name{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.025em;color:var(--coral);overflow-wrap:anywhere;text-wrap:balance;max-height:2.1em;overflow:hidden}
.kt-blank{display:inline-block;width:100%;height:1.25em;border-bottom:1pt solid var(--ink-3);vertical-align:bottom}
.kt-blank-in{display:inline-block;min-width:1.2in;height:1.1em;border-bottom:1pt solid var(--ink-3);vertical-align:bottom;margin-left:.2em}
/* the cut line between the two halves */
.kt-cut{position:absolute;left:0;right:0;top:5.5in;z-index:3;border-top:1.5pt dashed var(--ink-3)}
.kt-cut span{position:absolute;left:.35in;top:-.1in;padding:0 .09in;border-radius:99px;background:#fff;font-family:var(--display);font-size:7.5pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
/* the certificate: the art is a frame with lemons in its corners; the words sit in the middle */
.kt-cert .kt-art{object-position:center}
/* top to bottom: the logo at the top, the no-permit line at the foot, and the two
   blocks between them (the words, then the facts) spaced evenly */
.kt-cert .kt-in{top:.42in;left:1in;width:6.5in;height:4.55in;align-items:center;justify-content:space-between;text-align:center}
.kt-cert .kt-logo{width:1.45in}
.kt-cert-main{display:flex;flex-direction:column;align-items:center}
.kt-cert-k{padding-bottom:4pt;border-bottom:.75pt solid var(--lemon-600);font-family:var(--display);font-size:.8em;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-700)}
.kt-cert-say{margin-top:6pt;font-size:1em;font-style:italic;color:var(--ink-3)}
.kt-cert .kt-name{margin-top:3pt;width:100%;font-size:5.2em;color:var(--forest-900)}
.kt-cert-of{margin-top:4pt;font-size:1.15em;font-weight:700;color:var(--ink-2)}
.kt-cert-num{margin-top:4pt;font-family:var(--display);font-size:2em;font-weight:800;line-height:1.2;color:var(--forest-900)}
.kt-cert-num span{display:inline-block;padding:0 .5em;border-radius:99px;background:linear-gradient(140deg,var(--lemon),var(--lemon-600));color:var(--forest-900)}
.kt-cert-badge{margin-top:7pt;font-family:var(--display);font-size:.95em;font-weight:700;padding:2pt 11pt;border-radius:99px;background:var(--forest-800);color:var(--lemon)}
.kt-cert-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24pt;width:4.6in}
.kt-cert-facts div{display:grid;gap:1pt;align-content:start}
.kt-cert-facts dt{font-size:.72em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kt-cert-facts dd{font-family:var(--display);font-size:1.1em;font-weight:700;line-height:1.2;color:var(--forest-900);overflow-wrap:anywhere;max-height:2.5em;overflow:hidden}
.kt-cert-law{max-width:5.6in;font-size:.8em;line-height:1.4;font-style:italic;color:var(--ink-2)}
/* the stand card: the art has a band on top, a splash below, and a lemon over a white square at the right */
.kt-stand{top:5.5in}
.kt-stand .kt-in{top:.38in;left:.42in;width:5.2in;height:3.95in;align-items:center;text-align:center}
.kt-stand .kt-name{width:100%;font-size:6.4em;max-height:2.05em}
.kt-stand-sub{margin-top:5pt;font-family:var(--display);font-size:1.45em;font-weight:800;line-height:1.15;color:var(--forest-900)}
.kt-stand-sub b{font-weight:700;color:var(--ink-2)}
.kt-stand-sub b::before{content:" · "}
.kt-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9pt;margin-top:10pt;width:100%;text-align:left}
.kt-facts li{display:grid;gap:2pt;align-content:start;padding:7pt 11pt 8pt;border-radius:8pt;background:rgba(255,214,23,.18);border:1pt solid rgba(242,183,5,.55)}
.kt-facts li.is-wide{grid-column:1 / -1}
.kt-facts small{font-size:.74em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kt-facts b{font-family:var(--display);font-size:2em;font-weight:800;line-height:1.1;color:var(--forest-900);overflow-wrap:anywhere;max-height:2.25em;overflow:hidden}
.kt-stand-foot{margin-top:auto;padding-top:8pt;width:100%;display:flex;align-items:center;gap:10pt;text-align:left}
.kt-stand-foot .kt-logo{width:1.05in}
.kt-stand-foot span{font-family:var(--display);font-size:1em;font-weight:700;line-height:1.25;color:var(--forest-700)}
.kt-stand-qr{position:absolute;z-index:1;left:5.98in;top:1.86in;width:2.12in;height:2.24in;display:grid;justify-items:center;align-content:start;gap:2pt;padding-top:.08in;text-align:center}
.kt-stand-qr svg{display:block;width:1.62in;height:1.62in}
.kt-stand-qr p{font-family:var(--display);font-size:.95em;font-weight:800;line-height:1.15;color:var(--forest-800)}
/* the law card: a quiet sheet with a stripe, a border, and a lemon in the bottom-right corner */
.kt-law .kt-in{top:.55in;left:.5in;width:7.5in;height:4.72in}   /* the foot is pinned to the bottom of this zone, just above the border */
.kt-law-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12pt;padding-bottom:7pt;border-bottom:1pt solid var(--hair-2)}
.kt-law-head .kt-logo{width:1in}
.kt-law .kt-name{font-size:4.2em;max-height:1.1em}
.kt-law-kick{margin-top:2pt;font-family:var(--display);font-size:1.1em;font-weight:700;color:var(--forest-700)}
.kt-law-list{width:100%;margin-top:6pt;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22pt}
.kt-law-list div{display:grid;grid-template-columns:1in minmax(0,1fr);gap:8pt;align-items:baseline;padding:5pt 0;border-bottom:.75pt solid var(--hair-2)}
.kt-law-list dt{font-size:1em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kt-law-list dd{font-size:1.1em;line-height:1.3;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.kt-law-say{margin-top:10pt;max-width:6.7in;padding:8pt 12pt;border-radius:7pt;background:var(--forest-800);color:var(--cream);font-family:var(--display);font-size:1.15em;font-weight:700;line-height:1.3}
.kt-law-foot{margin-top:auto;max-width:6.5in;font-size:.82em;line-height:1.4;font-weight:600;color:var(--ink-3)}
.kt-law-foot b{color:var(--forest-800)}
/* four take-away cards on the lower half of sheet 2 */
.kt-takes{position:absolute;left:0;top:5.5in;width:8.5in;height:5.5in;z-index:1;display:grid;grid-template-columns:repeat(2,4.25in);grid-template-rows:repeat(2,2.75in)}
.kt-take{position:relative;top:auto;left:auto;width:4.25in;height:2.75in;font-size:10pt;line-height:1.15}
.kt-take:nth-child(odd){border-right:1pt dashed var(--ink-3)}
.kt-take:nth-child(-n+2){border-bottom:1pt dashed var(--ink-3)}
.kt-take .kt-in{top:.24in;left:.26in;width:3.8in;height:2.35in;gap:2.5pt}
/* the logo and the name share the top row, clear of the lemon in the corner */
.kt-take-head{display:flex;align-items:center;gap:5pt;max-width:3.05in}
.kt-take .kt-logo{width:.52in}
.kt-take .kt-name{font-size:2.2em;max-height:1.1em}
.kt-take-rows{width:100%;display:grid;gap:1.5pt}
.kt-take-rows div{display:grid;grid-template-columns:.95in minmax(0,1fr);gap:5pt;align-items:baseline}
.kt-take-rows div.is-short{padding-right:.6in}
.kt-take-rows dt{font-size:.8em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kt-take-rows dd{font-size:1em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.kt-take p{font-size:1em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.kt-take-law{font-style:italic;font-weight:600}
.kt-take-url{margin-top:auto;font-family:var(--display);font-size:.9em;font-weight:700;color:var(--forest-700)}
.kt-take .kt-blank-in{min-width:.9in}

/* ── the law, said plainly ── */
/* the statute line at the foot of every stand page */
.law-line{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;margin-top:1.4rem;padding:1rem 1.1rem;
  border:1px solid var(--hair);border-left:4px solid var(--leaf);border-radius:var(--r);background:var(--cream-2);
}
.law-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(63,163,77,.13);color:var(--forest-600)}
.law-ico .ai{width:19px;height:19px}
.law-line p{font-size:.95rem;line-height:1.55;font-style:italic;color:var(--ink-2)}
.law-line p b{font-style:normal;color:var(--ink)}
.law-line small{display:block;margin-top:.5rem;font-size:.82rem;font-weight:600;line-height:1.45;color:var(--ink-3)}
.law-line small a{color:var(--forest-700);font-weight:800}
/* the vote block on every stand page: the kit's one QR code lands here */
.vote-line{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;margin-top:1.4rem;padding:1rem 1.1rem;
  border:1px solid rgba(242,183,5,.45);border-left:4px solid var(--lemon-600);border-radius:var(--r);
  background:linear-gradient(180deg,#FFF9DF 0%,var(--cream-2) 100%);
}
.vote-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,214,23,.4);color:var(--forest-800);font-size:1.15rem;line-height:1}
.vote-line p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.vote-line p b{color:var(--ink)}
.vote-line a{font-weight:800;color:var(--forest-700)}
/* a stand not entered yet: the same line, quieter (2026-10-16) */
.vote-line.is-out{background:var(--cream-2);border-color:var(--hair);border-left-color:var(--hair-2)}
.vote-line.is-out .vote-ico{background:var(--cream-3);color:var(--ink-3)}
.sm-law{margin-top:.5rem;font-size:.9rem;color:var(--ink-3)}
.sm-law a{font-weight:700;color:var(--forest-700)}
.trust li a{color:inherit;text-decoration:none}
.trust li a:hover{text-decoration:underline;text-underline-offset:3px}
/* the Starter Kit's answer */
.sk-law{background:linear-gradient(180deg,#F3FBEF 0%,var(--cream) 100%);border-block:1px solid var(--hair);scroll-margin-top:84px}
.sk-law-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1rem;align-items:stretch}
.sk-no{
  position:relative;overflow:hidden;display:grid;gap:.8rem;align-content:start;padding:1.5rem 1.5rem 1.4rem;color:var(--cream);
  border-radius:var(--r-lg);background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);box-shadow:var(--e4);
}
.sk-no-word{font-family:var(--display);font-size:clamp(4.2rem,9vw,6.4rem);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--lemon)}
.sk-no p{font-size:1.06rem;line-height:1.55;color:rgba(255,252,242,.88)}
.sk-no p b{color:var(--cream)}
.sk-no-facts{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.4rem}
.sk-no-facts li{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:1.02rem;font-weight:700}
.sk-no-facts .ai{width:20px;height:20px;color:var(--leaf-300);flex:none}
.sk-statute{margin:0;display:grid;gap:.9rem;align-content:center;padding:1.5rem 1.6rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e2)}
.sk-statute blockquote{position:relative;margin:0;padding-left:1.2rem;border-left:4px solid var(--lemon-600)}
.sk-statute blockquote p{font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--forest-900)}
.sk-statute figcaption{font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.sk-statute figcaption b{color:var(--ink)}
.sk-law-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1rem}
.sk-law-card{padding:1.2rem 1.25rem 1.15rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.sk-law-card h3{font-size:1.2rem;margin-bottom:.5rem}
.sk-law-card p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.sk-law-card p + p{margin-top:.6rem}
.sk-law-card.is-sign{background:linear-gradient(180deg,#FFF9DF 0%,#fff 60%);border-color:rgba(242,183,5,.4)}
/* the other two cards get their own tint and their own two-row answer, so the
   three read as a set: lemon for the sign, sage for the town, peach for the tax */
.sk-law-card.is-town{background:linear-gradient(180deg,#EAF5EC 0%,#fff 60%);border-color:rgba(63,163,77,.35)}
.sk-law-card.is-tax{background:linear-gradient(180deg,#FFF0E8 0%,#fff 60%);border-color:rgba(228,87,46,.32)}
.sk-law-rows{list-style:none;margin:.7rem 0 .2rem;padding:0;display:grid;gap:.5rem}
.sk-law-rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:start;padding:.6rem .75rem;border-radius:12px;background:rgba(255,255,255,.75);border:1px solid var(--hair)}
.sk-law-rows li i{width:22px;height:22px;margin-top:.1rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-size:.8rem;font-weight:800;line-height:1}
.sk-law-rows li i::before{content:"\2713"}
.sk-law-rows li.is-yes i{background:var(--leaf);color:#fff}
.sk-law-rows li.is-ask i{background:rgba(242,183,5,.25);color:#7A5A03}
.sk-law-rows li.is-ask i::before{content:"?"}
.sk-law-rows li.is-no i{background:rgba(228,87,46,.15);color:var(--coral)}
.sk-law-rows li.is-no i::before{content:"\2715"}
.sk-law-rows li.is-you i{background:var(--forest-800);color:var(--lemon)}
.sk-law-rows li.is-you i::before{content:"\2605"}
.sk-law-rows li b{display:block;font-family:var(--display);font-size:.98rem;font-weight:800;line-height:1.25;color:var(--ink)}
.sk-law-rows li span{display:block;margin-top:.1rem;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.sk-law-list{margin:.6rem 0 .2rem;padding-left:1.3rem;display:grid;gap:.3rem;font-size:.95rem;line-height:1.45;color:var(--ink)}
.sk-law-list li::marker{font-family:var(--display);font-weight:800;color:var(--lemon-600)}
.sk-law-note{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--hair)}
.sk-law-note a{font-weight:800;color:var(--forest-700)}
.sk-law-foot{margin-top:1rem;display:grid;gap:.6rem}
.sk-law-plain{font-size:.95rem;line-height:1.55;font-style:italic;color:var(--ink-2)}
.sk-law-plain b{font-style:normal;color:var(--ink)}
.sk-sources{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:.2rem .9rem}
.sk-sources summary{cursor:pointer;padding:.55rem 0;font-family:var(--display);font-weight:700;color:var(--forest-700)}
.sk-sources ul{margin:0 0 .6rem;padding-left:1.2rem;display:grid;gap:.3rem;font-size:.9rem;line-height:1.45}
.sk-sources a{color:var(--forest-700);font-weight:600;overflow-wrap:anywhere}
/* a bill that is NOT law, kept apart from the law and marked as such (2026-10-14) */
.sk-law-watch{margin-top:.4rem;padding:1rem 1.15rem 1.05rem;background:var(--cream);border:1.5px dashed var(--hair-2);border-radius:var(--r-lg)}
.sk-law-watch-k{display:inline-block;margin-bottom:.45rem;padding:.12rem .65rem;border-radius:999px;background:rgba(228,87,46,.12);color:var(--coral);font-family:var(--display);font-size:.78rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.sk-law-watch h3{font-size:1.08rem;margin-bottom:.4rem}
.sk-law-watch p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.sk-law-watch p b{color:var(--ink)}
.sk-law-watch a{font-weight:800;color:var(--forest-700)}
/* ── printing the kit: one letter sheet per page, nothing else. The page
   size rule itself is added by kit.js, on that page alone. ── */
@media print{
  body[data-page="kit"]{background:#fff;display:block;min-height:0}
  body[data-page="kit"] > main{display:block}
  body[data-page="kit"] .site-head,body[data-page="kit"] .site-foot,body[data-page="kit"] .skip,
  body[data-page="kit"] .kt-head,body[data-page="kit"] .kt-tip,body[data-page="kit"] .kt-cap,
  body[data-page="kit"] .toasts,body[data-page="kit"] .scrim{display:none!important}
  body[data-page="kit"] .section,body[data-page="kit"] .kt-sec{padding:0;margin:0}
  body[data-page="kit"] .wrap{width:100%;max-width:none;margin:0;padding:0}
  body[data-page="kit"] .kt-sheets{display:block}
  body[data-page="kit"] .kt-page{display:block;margin:0;break-after:page;page-break-after:always}
  body[data-page="kit"] .kt-page:last-child{break-after:auto;page-break-after:auto}
  body[data-page="kit"] .kt-sheet{zoom:1;border:0;box-shadow:none;border-radius:0}
}

/* ── narrower screens ── */
@media (max-width:980px){
  .on-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .on-grid > .pg-copy,.on-grid > .cx-show{grid-column:1;grid-row:auto}
  .on-grid > .cx-show{margin-top:1.4rem}
  .sk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sotw-in{grid-template-columns:minmax(0,1fr)}
  .sk-batch,.sk-two{grid-template-columns:minmax(0,1fr)}
  .sk-say{grid-template-columns:minmax(0,1fr)}
  .sk-law-top{grid-template-columns:minmax(0,1fr)}
  .sk-law-grid{grid-template-columns:minmax(0,1fr)}
  .od-open{grid-template-columns:minmax(0,1fr)}
  .od-open-act{justify-items:start}
  .od-hours{display:flex}
}
@media (max-width:780px){
  /* the strip on a phone (redesigned 2026-10-14): two tiers. On top, the
     temperature on a lemon tile, where and what the weather is, and the lemon
     meter in its own little pill; underneath, one full-width status bar with a
     dot that pulses green when anyone is open. The weather words may shrink and
     wrap, so a long town name never pushes past a 320px screen. */
  .hotbar{background:radial-gradient(160px 110px at 34px 34%,rgba(255,214,23,.17),transparent 70%),linear-gradient(100deg,var(--forest-800),var(--forest-900))}
  .hot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;min-height:0;padding:.7rem 0 .75rem}
  .hot-wx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;min-width:0}
  .hot-deg{display:grid;place-items:center;min-width:56px;height:48px;padding:0 .55rem;border-radius:15px;
    font-size:1.5rem;color:var(--forest-900);
    background:radial-gradient(circle at 32% 28%,#FFF1A8,var(--lemon) 56%,var(--lemon-600));
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 6px 14px -6px rgba(242,183,5,.55)}
  .hot-txt{min-width:0;gap:.12rem}
  .hot-where{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,252,242,.6)}
  .hot-word{font-size:1.02rem;line-height:1.15}
  .hot-ix{margin:0;padding:.32rem .5rem;border-radius:999px;gap:2px;background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.12)}
  .hot-say{display:none}
  /* who is open: a swipeable row of small chips */
  .hot-list{order:0;gap:.4rem;margin:0}
  .hot-list li + li{border-left:0}
  .hot-list a{padding:.32rem .75rem .32rem .6rem;border-radius:999px;background:rgba(255,252,242,.07);border:1px solid rgba(255,252,242,.1)}
  .hot-list li:first-child a{padding-left:.6rem}
  .hot-go{display:flex;align-items:center;gap:.6rem;margin:0;padding:.6rem .9rem;border-radius:13px;white-space:normal;
    font-size:.9rem;line-height:1.25;background:rgba(255,252,242,.06);border:1px solid rgba(255,252,242,.11);transition:background .2s,border-color .2s}
  .hot-go:hover{text-decoration:none;background:rgba(255,214,23,.1);border-color:rgba(255,214,23,.35)}
  .hot-go > span[aria-hidden]{margin-left:auto;padding-left:.4rem}
  .hot-dot{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,252,242,.35);box-shadow:0 0 0 4px rgba(255,252,242,.07)}
  .hot-dot.is-on{background:var(--leaf-300);box-shadow:0 0 0 4px rgba(140,198,63,.22);animation:pulse 2.4s ease-in-out infinite}
  .on-row{grid-template-columns:minmax(0,1fr)}
  .on-dir{justify-self:start;margin-left:calc(96px + .85rem)}
}
@media (max-width:560px){
  .hot-deg{font-size:1.4rem;min-width:52px;height:44px}
  .hot-ix{padding:.26rem .42rem}
  .hot-ix i{width:14px;height:14px}
  .hot-in{padding:.6rem 0 .65rem;gap:.5rem}
  .hot-go{padding:.5rem .85rem}
  /* in the stand popup "Share a picture" with its icon needs ~180px, and a
     half-width button on a phone is 130–165px, so it broke onto two lines;
     it takes a full row under Save and Full page instead */
  .sm-actions .sc-btn{grid-column:1 / -1}
  .sk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-cards{grid-template-columns:minmax(0,1fr)}
  .sk-pfacts{grid-template-columns:minmax(0,1fr)}
  .on-pic{width:72px;height:54px}
  .on-dir{margin-left:0;width:100%}
  /* the key comes out of the map's corner and sits under it, three across:
     on a phone the map is ~270px wide and the key ~160px, so in the corner
     it lay over the south-west counties (as the Cup's key did, fixed the same way) */
  .on-key{position:static;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.7rem}
  .on-map.is-zoomed .on-key{opacity:1}
  .on-key li{flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .3rem;text-align:center;font-size:.72rem;
             background:rgba(255,255,255,.8);border:1px solid var(--hair);border-radius:12px}
  .on-whole{top:.5rem;right:.5rem;font-size:.78rem}
  .on-read{min-height:0;padding:.7rem .8rem}
  .on-r-act{width:100%}
  .od-qa div,.adm-spot-qa div{grid-template-columns:minmax(0,1fr)}
  .law-line{grid-template-columns:minmax(0,1fr)}
  .law-ico{display:none}
  .sk-no{padding:1.2rem 1.2rem 1.1rem}
  .kt-head .btn{width:100%}
}
@media (max-width:420px){
  .sk-bars li{grid-template-columns:4.4rem minmax(0,1fr) 1.6rem}
}

/* ═══════════════════════════════════════════════════════════
   SOMETHING COLD IS COMING — the site-wide popup (js/soon.js)
   A miniature of /coming-soon/: the same dusk ground with lemon light
   pooling from above, the grain, the citrus wheels, the bento of facts and
   the one lit object, the sign-up pill. Closing it leaves a little glass of
   lemonade pulsing in the bottom-left corner. Comes out at launch.
   ═══════════════════════════════════════════════════════════ */
.sn-scrim{
  position:fixed;inset:0;z-index:250;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;transition:opacity .4s var(--ease);
}
.sn-scrim::before{content:"";position:fixed;inset:0;background:rgba(4,22,15,.62)}
.sn-scrim.on{opacity:1}
.sn-scrim.on::before{backdrop-filter:blur(10px) saturate(.8);-webkit-backdrop-filter:blur(10px) saturate(.8)}
.sn-pad{
  position:relative;z-index:1;min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:calc(clamp(.8rem,4vh,2.6rem) + env(safe-area-inset-top)) clamp(.6rem,2.4vw,1.4rem) calc(clamp(.8rem,4vh,2.6rem) + env(safe-area-inset-bottom));
}

/* the panel: the holding page's ground, cut to a card */
.sn-panel{
  --sn-cream:#FFFCF2;--sn-lemon:#FFD617;--sn-lemon-3:#FFE87A;--sn-leaf:#3FA34D;
  position:relative;isolation:isolate;overflow:hidden;width:min(100%,1000px);
  padding:clamp(.75rem,1.8vw,1.15rem);border-radius:clamp(22px,2.6vw,30px);outline:none;
  color:var(--sn-cream);font-family:var(--body,'Nunito',system-ui,sans-serif);
  background:#07281B;border:1px solid rgba(255,214,23,.16);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(7,40,27,.6),0 0 80px -20px rgba(255,214,23,.25);
  translate:0 26px;scale:.97;transition:translate .55s var(--spring),scale .55s var(--spring);
  user-select:none;-webkit-user-select:none;
}
.sn-scrim.on .sn-panel{translate:0 0;scale:1}
.sn-sky{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(120% 80% at 50% -12%,rgba(255,214,23,.30),transparent 58%),
    radial-gradient(80% 60% at 82% 8%,rgba(242,183,5,.20),transparent 62%),
    radial-gradient(70% 55% at 12% 88%,rgba(63,163,77,.22),transparent 66%),
    radial-gradient(90% 70% at 50% 118%,rgba(228,87,46,.12),transparent 60%),
    linear-gradient(170deg,#124F37 0%,#0C3A28 42%,#07281B 100%);
}
.sn-pool{
  position:absolute;top:0;left:0;z-index:-2;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease);will-change:transform;
  background:radial-gradient(circle closest-side,rgba(255,232,122,.16) 0%,rgba(255,214,23,.10) 34%,rgba(63,163,77,.05) 62%,transparent 78%);
}
.sn-pool.on{opacity:1}
.sn-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* citrus wheels drifting in the dark, a slow bob and a slower turn */
.sn-wheels{position:absolute;inset:0;z-index:-2;pointer-events:none}
.sn-wh{position:absolute;display:block;width:var(--s);aspect-ratio:1;opacity:var(--o,.1);animation:snBob var(--t,14s) ease-in-out infinite alternate}
.sn-wh svg{display:block;width:100%;height:100%;animation:snTurn var(--r,90s) linear infinite}
.sn-wh-1{--s:clamp(220px,34vw,380px);left:-9%;top:-16%;--t:16s;--r:140s;--o:.09}
.sn-wh-2{--s:clamp(200px,30vw,330px);right:-8%;bottom:-20%;--t:18s;--r:120s;--o:.085}
.sn-wh-3{--s:clamp(150px,20vw,230px);right:6%;top:-11%;--t:13s;--r:100s;--o:.08}
.sn-wh-4{--s:72px;left:44%;bottom:7%;--t:11s;--r:60s;--o:.12}
.sn-wh-5{--s:54px;left:6%;bottom:34%;--t:9s;--r:50s;--o:.12}
.sn-w-rind{fill:none;stroke:#FFE87A;stroke-width:4.5}
.sn-w-pith{fill:none;stroke:rgba(255,232,122,.6);stroke-width:2.8}
.sn-w-seg{fill:none;stroke:rgba(255,232,122,.75);stroke-width:2.2;stroke-linecap:round}
.sn-w-flesh{fill:rgba(255,214,23,.16)}
@keyframes snBob{from{translate:0 -8px}to{translate:6px 10px}}
@keyframes snTurn{to{rotate:360deg}}

/* close, sitting inside the lemon cell's own corner (the panel's padding plus
   a little more), not straddling the panel's edge; no click outside closes it */
.sn-x{
  position:absolute;top:calc(clamp(.75rem,1.8vw,1.15rem) + .7rem);right:calc(clamp(.75rem,1.8vw,1.15rem) + .7rem);z-index:4;
  width:40px;height:40px;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,252,242,.2);background:#07281B;color:var(--sn-cream);
  box-shadow:0 6px 16px -8px rgba(7,40,27,.6);
  transition:background .2s,border-color .2s,color .2s,rotate .3s var(--spring);
}
.sn-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* it sits on the lemon cell, so the hover stays a solid dark disc — a lemon
   wash here made it vanish into the yellow mid-spin. The spin stays; the
   stroke and the ring go lemon instead. */
.sn-x:hover{background:var(--forest-700);border-color:var(--sn-lemon);color:var(--sn-lemon);rotate:90deg}
.sn-x:focus-visible{outline:2px solid var(--sn-lemon);outline-offset:3px}

/* the bento, as on the holding page: the mark and the promise, the facts, the ask */
.sn-bento{
  display:grid;grid-template-columns:1.62fr 1fr;grid-template-areas:"hero facts" "ask ask";
  gap:clamp(.5rem,1vw,.75rem);
}
.sn-cell{
  position:relative;display:flex;flex-direction:column;padding:clamp(.95rem,1.9vw,1.4rem);border-radius:18px;
  border:1px solid rgba(255,252,242,.11);
  background:linear-gradient(157deg,rgba(255,252,242,.062),rgba(255,252,242,.012) 62%),rgba(7,40,27,.46);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.95);
}
.sn-hero{grid-area:hero;align-items:center;justify-content:center;text-align:center;gap:clamp(.45rem,1.2vh,.85rem);padding:clamp(1.2rem,2.6vw,2rem) clamp(1rem,2.4vw,1.8rem)}
.sn-logo{
  display:block;width:min(100%,clamp(170px,26vw,300px),34dvh);height:auto;pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 26px rgba(255,214,23,.26)) drop-shadow(0 14px 30px rgba(7,40,27,.8));
}
.sn-hero h2{
  margin:0;font-family:var(--display);font-size:clamp(1.4rem,2.5vw + .3rem,2.3rem);font-weight:800;line-height:1.02;
  letter-spacing:-.03em;color:var(--sn-cream);text-wrap:balance;
}
.sn-glow{background:linear-gradient(100deg,var(--sn-lemon) 12%,var(--sn-lemon-3) 55%,var(--sn-lemon) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sn-pour{width:min(260px,70%);height:3px;overflow:hidden;border-radius:99px;background:rgba(255,252,242,.13)}
.sn-pour i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sn-lemon-3),var(--sn-lemon),var(--sn-leaf))}
.sn-scrim.on .sn-pour i{animation:snPour 1.5s var(--ease) .55s forwards}
@keyframes snPour{to{width:100%}}
.sn-lede{margin:0;max-width:44ch;font-size:clamp(.88rem,1.05vw + .3rem,1rem);font-weight:500;line-height:1.5;color:rgba(255,252,242,.78);text-wrap:pretty}

.sn-facts{grid-area:facts;padding:0;justify-content:stretch;overflow:hidden}
.sn-fact{flex:1 1 0;display:flex;align-items:center;gap:clamp(.6rem,1.1vw,.9rem);padding:clamp(.55rem,1.2vh,.85rem) clamp(.85rem,1.6vw,1.2rem)}
.sn-fact + .sn-fact{border-top:1px solid rgba(255,252,242,.09)}
.sn-ico{
  flex:none;width:clamp(29px,2.3vw,34px);aspect-ratio:1;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,214,23,.09);border:1px solid rgba(255,214,23,.22);color:var(--sn-lemon);
}
.sn-ico svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sn-ft{min-width:0;display:flex;flex-direction:column;gap:.12rem}
.sn-k{font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,232,122,.6)}
.sn-fact p{margin:0;font-size:clamp(.82rem,.5vw + .5rem,.93rem);font-weight:600;line-height:1.34;color:rgba(255,252,242,.88);text-wrap:pretty}
.sn-fact p em{font-style:normal;font-weight:700;color:var(--sn-lemon)}
.sn-hit{flex:1.06 1 0;gap:clamp(.65rem,1.3vw,1rem);background:linear-gradient(150deg,var(--sn-lemon-3),var(--sn-lemon) 62%,#F2B705)}
.sn-n{flex:none;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;line-height:.82;color:#07281B}
.sn-hit .sn-k{color:rgba(7,40,27,.58)}
.sn-hit p{font-weight:700;color:rgba(7,40,27,.8)}
.sn-live .sn-k{display:inline-flex;align-items:center;gap:.4rem}
.sn-live .sn-k i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--sn-lemon);box-shadow:0 0 0 3px rgba(255,214,23,.16);animation:snBlip 2.6s var(--ease) infinite}
@keyframes snBlip{50%{box-shadow:0 0 0 9px rgba(255,214,23,0)}}

/* the ask: the one lit object, field and button in one vessel */
.sn-ask{grid-area:ask;padding:clamp(.9rem,1.8vw,1.25rem)}
.sn-form{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,560px);align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  user-select:auto;-webkit-user-select:auto;
}
.sn-say,.sn-do{min-width:0}
.sn-label{display:block;margin:0 0 .3rem;font-family:var(--display);font-size:clamp(1.1rem,2vw,1.38rem);font-weight:800;line-height:1.15;color:var(--sn-cream);cursor:pointer}
.sn-note{margin:0;font-size:.82rem;font-weight:600;line-height:1.5;color:rgba(255,252,242,.55);transition:color .3s}
.sn-note.warn{color:#FFC2AE}
.sn-pill-in{
  position:relative;display:flex;align-items:center;gap:.4rem;width:100%;overflow:hidden;padding:5px 5px 5px 1.15rem;
  border:1px solid rgba(255,252,242,.17);border-radius:999px;background:rgba(7,40,27,.55);
  box-shadow:0 14px 34px -18px rgba(7,40,27,.9);transition:border-color .3s,background .3s,box-shadow .3s;
}
.sn-pill-in:focus-within{border-color:rgba(255,214,23,.55);background:rgba(7,40,27,.72);box-shadow:0 0 0 4px rgba(255,214,23,.1),0 18px 40px -16px rgba(7,40,27,1)}
.sn-pill-in input{
  flex:1 1 auto;min-width:0;padding:.72rem 0;border:0;outline:none;background:none;cursor:text;
  font-family:var(--body,'Nunito',sans-serif);font-size:1rem;font-weight:600;color:var(--sn-cream);
}
.sn-pill-in input::placeholder{color:rgba(255,252,242,.34);font-weight:500}
.sn-pill-in input:-webkit-autofill{-webkit-text-fill-color:#FFFCF2;transition:background-color 9999s ease-in-out 0s}
.sn-pill-in button{
  flex:none;padding:.72rem 1.3rem;cursor:pointer;border:0;border-radius:999px;
  font-family:var(--display);font-size:.94rem;font-weight:800;color:#07281B;
  background:linear-gradient(180deg,var(--sn-lemon-3),var(--sn-lemon));box-shadow:0 6px 16px -6px rgba(255,214,23,.55);
  transition:transform .22s var(--ease),filter .22s,box-shadow .22s;
}
@media (hover:hover){.sn-pill-in button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 22px -8px rgba(255,214,23,.7)}}
.sn-pill-in button:active{transform:scale(.97);filter:brightness(.95)}
.sn-pill-in button:disabled{opacity:.5;cursor:default;transform:none;filter:none}
.sn-pill-in button:focus-visible{outline:2px solid #07281B;outline-offset:-4px}
.sn-fill{
  position:absolute;inset:0;z-index:0;border-radius:999px;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--sn-lemon-3),var(--sn-lemon) 60%,var(--sn-leaf));animation:snFill .85s var(--ease) forwards;
}
.sn-fill.is-full{animation:none;transform:none}
@keyframes snFill{to{transform:scaleX(1)}}
.sn-form.done .sn-pill-in{border-color:rgba(255,214,23,.5);background:none;box-shadow:0 16px 38px -18px rgba(255,214,23,.55)}
.sn-done{
  position:relative;z-index:1;width:100%;padding:.86rem 1rem;text-align:center;
  font-family:var(--display);font-size:1rem;font-weight:800;color:#07281B;opacity:0;animation:snDone .45s var(--ease) .36s forwards;
}
@keyframes snDone{to{opacity:1}}
/* the bot check: out of the flow, invisible until Cloudflare wants a person */
.sn-guard{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;border-radius:17px;
  background:rgba(7,40,27,.94);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sn-guard.live{opacity:1;pointer-events:auto}
.sn-ask:has(.sn-guard.live){min-height:172px}
.sn-guard iframe{display:block;border-radius:12px}

body.sn-locked{overflow:hidden}

/* ── the pill: a little glass of lemonade, always in the corner ── */
.sn-chip{
  position:fixed;left:calc(1rem + env(safe-area-inset-left));bottom:calc(1rem + env(safe-area-inset-bottom));z-index:190;
  display:flex;align-items:center;gap:.55rem;padding:.38rem .95rem .38rem .38rem;cursor:pointer;
  border:1px solid rgba(255,214,23,.38);border-radius:999px;color:#FFFCF2;
  background:radial-gradient(120% 140% at 10% 0%,rgba(255,214,23,.22),transparent 60%),linear-gradient(160deg,#124F37,#07281B);
  box-shadow:0 14px 30px -12px rgba(7,40,27,.7),0 0 0 4px rgba(255,214,23,.08);
  transition:translate .3s var(--spring),box-shadow .3s;
}
.sn-chip[hidden]{display:none}
/* the phone menu and every popup lock the page: the floating pill steps aside
   instead of sitting on top of the menu's own buttons (2026-10-14) */
body.locked .sn-chip{opacity:0;pointer-events:none}
.sn-chip:hover{translate:0 -2px;box-shadow:0 18px 34px -12px rgba(7,40,27,.75),0 0 0 5px rgba(255,214,23,.16)}
.sn-chip:focus-visible{outline:3px solid var(--lemon-600);outline-offset:3px}
.sn-chip.is-back{animation:snBack .55s var(--spring)}
@keyframes snBack{from{opacity:0;scale:.6;translate:0 10px}}
/* the pulse: a soft lemon ring breathing out from the glass */
.sn-chip-ring{
  position:absolute;left:.38rem;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,214,23,.55);animation:snRing 2.6s var(--ease) infinite;
}
@keyframes snRing{0%{box-shadow:0 0 0 0 rgba(255,214,23,.55)}70%,100%{box-shadow:0 0 0 14px rgba(255,214,23,0)}}
.sn-glass{
  position:relative;flex:none;width:38px;height:38px;padding:5px 6px 4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF6C8,#FFE87A 55%,#F2B705);overflow:visible;
  animation:snSip 2.6s ease-in-out infinite;transform-origin:50% 90%;
}
@keyframes snSip{0%,100%{rotate:0deg}40%{rotate:-6deg}60%{rotate:4deg}}
.sn-g-cup{fill:rgba(255,252,242,.55);stroke:#07281B;stroke-width:1.7;stroke-linejoin:round}
.sn-g-drink{fill:#FFD617;stroke:none}
.sn-g-ice{fill:rgba(255,255,255,.85)}
.sn-g-straw{fill:none;stroke:#E4572E;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 2.2}
.sn-g-lemon{fill:#FFE87A;stroke:#07281B;stroke-width:1.5}
.sn-g-spoke{fill:none;stroke:#F2B705;stroke-width:1;stroke-linecap:round}
.sn-chip-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left}
/* the pill sits in the corner where the footer's copyright line — and the
   Admin door in it — comes to rest at the foot of the page; while the pill
   is showing the footer keeps that much clear beneath its last line */
body:has(.sn-chip:not([hidden])) .site-foot{padding-bottom:calc(1.6rem + 58px + env(safe-area-inset-bottom))}
.sn-chip-txt b{font-family:var(--display);font-size:.92rem;font-weight:800;color:#FFFCF2;white-space:nowrap}
.sn-chip-txt small{font-size:.7rem;font-weight:700;color:#FFE87A;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .sn-wh,.sn-wh svg,.sn-live .sn-k i,.sn-chip-ring,.sn-glass,.sn-chip.is-back{animation:none}
  .sn-scrim.on .sn-pour i{animation:none;width:100%}
  .sn-fill{animation:none;transform:none}
  .sn-done{animation:none;opacity:1}
  .sn-panel{transition:none}
}
@media (pointer:coarse){
  .sn-pill-in button{min-height:46px;padding:.85rem 1.35rem;font-size:1rem}
  .sn-pill-in input{min-height:46px;padding:.85rem 0;font-size:16px}
}
@media print{.sn-scrim,.sn-chip{display:none!important}}

/* the bento folds down, as the holding page does */
@media (max-width:820px){
  .sn-form{grid-template-columns:minmax(0,1fr);gap:.85rem}
}
@media (max-width:760px){
  .sn-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "facts" "ask"}
  .sn-facts{flex-direction:row;flex-wrap:wrap}
  .sn-fact{flex:1 1 46%}
  .sn-fact + .sn-fact{border-top:0}
  .sn-fact:nth-child(2),.sn-fact:nth-child(4){border-left:1px solid rgba(255,252,242,.09)}
  .sn-fact:nth-child(n+3){border-top:1px solid rgba(255,252,242,.09)}
  .sn-n{font-size:clamp(1.7rem,7vw,2.2rem)}
  .sn-hero{padding-top:2.2rem}
}
@media (max-width:480px){
  .sn-fact{flex:1 1 100%}
  .sn-fact:nth-child(n){border-left:0;border-top:1px solid rgba(255,252,242,.09)}
  .sn-fact:first-child{border-top:0}
  .sn-lede{display:none}
  .sn-chip{padding:.32rem .8rem .32rem .32rem;gap:.45rem}
  .sn-chip-txt small{display:none}
  .sn-chip-txt b{font-size:.84rem}
}
@media (max-width:400px){
  .sn-pill-in{flex-wrap:wrap;gap:.5rem;padding:.5rem;border-radius:22px}
  .sn-pill-in input{flex:1 1 100%;padding-left:.8rem;padding-right:.8rem}
  .sn-pill-in button{flex:1 1 100%;width:100%}
  .sn-fill,.sn-form.done .sn-pill-in{border-radius:22px}
}
@media (max-height:640px){
  .sn-lede{display:none}
  .sn-logo{width:min(100%,clamp(140px,20vw,210px))}
}

/* ═══════════════════════════════════════════════════════════
   BACK THE SQUEEZE — /sponsor/ (2026-10-13)
   The three sponsor levels, on the public-page header pattern. Prefixed bk-.
   Each level is a tall card with the price as the loud thing; the top level
   is lemon. Under them, the two jars side by side — the site's and the kids'.
   ═══════════════════════════════════════════════════════════ */
.bk-tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
.bk-tier{
  --tone:var(--forest-700);--wash:rgba(63,163,77,.12);
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.35rem;min-width:0;
  padding:1.4rem 1.4rem 1.5rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
  transition:box-shadow .3s var(--ease),translate .3s var(--spring);
}
.bk-tier::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--tone)}
.bk-tier:hover{box-shadow:var(--e3);translate:0 -3px}
.bk-tier.is-top{background:linear-gradient(165deg,#FFF9DE 0%,#fff 55%);border-color:rgba(242,183,5,.5);box-shadow:var(--e2)}
.bk-who{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-tone,var(--tone))}
.bk-name{font-size:1.7rem;line-height:1.05;letter-spacing:-.02em}
.bk-price{display:flex;align-items:baseline;gap:.4rem;margin-top:.3rem}
.bk-price b{font-family:var(--display);font-size:clamp(2.4rem,4vw,3rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--forest-900)}
.bk-price span{font-size:.92rem;font-weight:700;color:var(--ink-3)}
.bk-say{margin-top:.6rem;font-size:.97rem;line-height:1.6;color:var(--ink-2);flex:1}
.bk-tier .btn{margin-top:1.1rem;justify-content:center;gap:.4rem}
.bk-all{margin-top:1.1rem;text-align:center;font-size:.92rem;font-weight:600;color:var(--ink-3)}
.bk-all a{font-weight:800;color:var(--forest-700)}
.bk-all a:hover{color:var(--coral)}

/* the two jars */
.bk-jars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.bk-jar{
  display:grid;gap:.4rem;align-content:start;padding:1.3rem 1.4rem 1.4rem;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);
}
.bk-jar.is-site{border-top:4px solid var(--forest-600)}
.bk-jar.is-kids{border-top:4px solid var(--lemon-600);background:linear-gradient(165deg,#FFF9DE 0%,#fff 60%)}
.bk-jar-ico{width:44px;height:44px;margin-bottom:.35rem;border-radius:14px;display:grid;place-items:center;background:rgba(63,163,77,.13);color:var(--forest-600)}
.bk-jar.is-kids .bk-jar-ico{background:rgba(255,214,23,.32);color:#8A6503}
.bk-jar-ico .ai{width:22px;height:22px}
.bk-jar h3{font-size:1.25rem;line-height:1.15}
.bk-jar p{font-size:.96rem;line-height:1.6;color:var(--ink-2)}
.bk-jar a{font-weight:800;color:var(--forest-700)}
.bk-jar a:hover{color:var(--coral)}

/* the jar: a dark card straight under the header, the thanks as its heading,
   two numbers, and a lemon bar that fills to the season's goal */
.bk-goal-sec{padding-top:0}
.bk-goal{
  position:relative;overflow:hidden;isolation:isolate;display:grid;gap:.9rem;
  padding:clamp(1.3rem,3vw,2rem) clamp(1.3rem,3.4vw,2.4rem);color:var(--cream);border-radius:var(--r-xl);
  background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-900) 100%);box-shadow:var(--e4);
}
.bk-goal::before{
  content:"";position:absolute;right:-90px;top:-90px;z-index:-1;width:300px;aspect-ratio:1;opacity:.55;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2797%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.30%27 stroke-width=%275%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2788%27 fill=%27none%27 stroke=%27%23F2B705%27 stroke-opacity=%27.16%27 stroke-width=%273%27/%3E%3Cpath fill=%27%23FFD617%27 fill-opacity=%27.20%27 d=%27M101.8 89.1L103.2 22.1A78 78 0 0 1 143.2 35.1L105.0 90.2ZM107.8 92.2L148.4 38.8A78 78 0 0 1 173.1 72.9L109.8 95.0ZM110.9 98.3L175.1 79.0A78 78 0 0 1 175.1 121.0L110.9 101.7ZM109.8 105.0L173.1 127.1A78 78 0 0 1 148.4 161.2L107.8 107.8ZM105.0 109.8L143.2 164.9A78 78 0 0 1 103.2 177.9L101.8 110.9ZM98.2 110.9L96.8 177.9A78 78 0 0 1 56.8 164.9L95.0 109.8ZM92.2 107.8L51.6 161.2A78 78 0 0 1 26.9 127.1L90.2 105.0ZM89.1 101.7L24.9 121.0A78 78 0 0 1 24.9 79.0L89.1 98.3ZM90.2 95.0L26.9 72.9A78 78 0 0 1 51.6 38.8L92.2 92.2ZM95.0 90.2L56.8 35.1A78 78 0 0 1 96.8 22.1L98.2 89.1Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  animation:pgSpin 110s linear infinite;
}
.bk-goal-k{font-family:var(--display);font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lemon)}
.bk-goal h2{max-width:24ch;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.1;letter-spacing:-.025em;color:var(--cream)}
.bk-goal-row{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:.2rem}
.bk-goal-n{display:grid;gap:.1rem}
.bk-goal-n b{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--lemon)}
.bk-goal-n span{font-size:.88rem;font-weight:700;color:rgba(255,252,242,.66)}
.bk-bar{height:14px;border-radius:999px;background:rgba(255,252,242,.14);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.bk-fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--lemon),var(--tangerine));transition:width 1.4s var(--ease)}
.bk-goal.is-full .bk-fill{background:linear-gradient(90deg,var(--leaf-300),var(--leaf))}
.bk-goal-note{font-size:.9rem;font-weight:600;color:rgba(255,252,242,.66)}
.bk-goal-note a{color:var(--lemon);font-weight:800}
.bk-goal-note a:hover{color:var(--lemon-300)}
/* the quiet way to the thank-you wall (2026-10-18) */
.bk-wall{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;font-size:.86rem;font-weight:700;color:rgba(255,252,242,.7);text-decoration:none}
.bk-wall:hover{color:var(--lemon);text-decoration:underline;text-underline-offset:3px}
/* the quiet way to give a prize itself (2026-10-18) */
.bk-give{margin-top:1rem}

@media (hover:none){ .bk-tier:hover{translate:none} }
@media (max-width:980px){ .bk-tiers{gap:.8rem} .bk-tier{padding:1.2rem 1.15rem 1.3rem} .bk-name{font-size:1.5rem} }
@media (max-width:860px){
  .bk-tiers{grid-template-columns:minmax(0,1fr)}
  .bk-tier .btn{align-self:start;min-width:14rem}
  .bk-jars{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bk-tier{padding:1.05rem 1rem 1.15rem}
  .bk-tier .btn{align-self:stretch;min-width:0}
  .bk-jar{padding:1.05rem 1rem 1.15rem}
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — LIVE LISTINGS (2026-10-13)
   The numbers, the Stand of the Week with its photo and three answers, and
   every live stand as a searchable row. Prefixed lv- (classes only; the
   script's names are admLv…, because live.js owns the lv names).
   ═══════════════════════════════════════════════════════════ */
.lv-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:1rem}

/* the pick */
.lv-spot{padding:0;overflow:hidden}
.lv-spot-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.1rem}
.lv-spot-pic{width:120px;height:90px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--cream-3);color:var(--ink-3)}
.lv-spot-pic img{width:100%;height:100%;object-fit:cover;display:block}
.lv-spot-pic.is-empty .ai{width:30px;height:30px}
.lv-spot-id{min-width:0}
.lv-spot-id .adm-spot-sub em{font-style:italic;color:var(--ink-2)}
.lv-qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding:0 1.1rem 1.1rem}
.lv-q{position:relative;margin:0;padding:.8rem .95rem .9rem 1.15rem;border-radius:14px;background:rgba(255,255,255,.78);border:1px solid var(--hair)}
.lv-q::before{content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:4px;border-radius:4px;background:var(--lemon)}
.lv-q span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.lv-q p{margin-top:.25rem;font-family:var(--display);font-size:1.02rem;font-weight:700;line-height:1.35;color:var(--forest-900);overflow-wrap:anywhere}
.lv-q p i{font-family:var(--ui);font-weight:600;color:var(--ink-3)}
.lv-ready{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:0 1.1rem 1rem}
.lv-ready > span{margin-right:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

/* search and the switch */
.lv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.2rem 0 .8rem}
.lv-q-box{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:.5rem;padding:.05rem .9rem;background:#fff;border:1.5px solid var(--hair);border-radius:999px;transition:border-color .2s,box-shadow .2s}
.lv-q-box:focus-within{border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(63,163,77,.13)}
.lv-q-box .ai{width:17px;height:17px;color:var(--ink-3)}
.lv-q-box input{flex:1;min-width:0;border:0;outline:none;background:none;padding:.5rem 0;font-size:1rem;font-weight:500}
.lv-q-box input::-webkit-search-cancel-button{display:none}
.lv-count{margin-left:auto;font-size:.86rem;font-weight:700;color:var(--ink-3)}
/* the season in one line: listings open, the season, the cutoff (2026-10-18) */
.lv-season{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 1.1rem;padding:.75rem 1rem;border-radius:14px;background:#fff;border:1px solid var(--hair);font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-2)}
.lv-season .ai{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--forest-600)}
.lv-season b{color:var(--forest-800)}

/* the rows */
.lv-rows{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lv-row{
  display:grid;grid-template-columns:auto minmax(0,1.7fr) minmax(0,1fr) auto auto auto;align-items:center;gap:1rem;
  padding:.6rem .8rem .6rem .6rem;background:#fff;border:1px solid var(--hair);border-left:5px solid var(--ac);border-radius:var(--r);box-shadow:var(--e1);
  transition:box-shadow .2s,border-color .2s;
}
.lv-row:hover{box-shadow:var(--e2);border-color:var(--hair-2);border-left-color:var(--ac)}
.lv-row.is-pick{background:linear-gradient(90deg,rgba(255,214,23,.16),#fff 45%);border-color:rgba(242,183,5,.5);border-left-color:var(--lemon-600)}
.lv-pic{width:96px;height:72px;object-fit:cover;border-radius:12px;background:var(--cream-2)}
.lv-main{min-width:0;display:grid;gap:.15rem}
.lv-name{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.lv-name b{font-family:var(--display);font-size:1.15rem;font-weight:800;line-height:1.15}
.lv-name small{font-size:.74rem;font-weight:800;color:var(--ink-3)}
.lv-pick-mini{background:var(--forest-800);color:var(--lemon)}
.lv-sub{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.lv-sub i{font-style:normal;color:var(--ink-3)}
.lv-meta{display:contents}
.lv-open{display:inline-flex;align-items:center;gap:.4rem;min-width:0;font-size:.84rem;font-weight:800;color:#15691F;white-space:nowrap}
.lv-open:empty{visibility:hidden}
.lv-open i{width:8px;height:8px;border-radius:50%;background:#2E9E3A;box-shadow:0 0 0 3px rgba(46,158,58,.22);animation:pulse 2s ease-in-out infinite}
.lv-tip{display:grid;justify-items:end;line-height:1.05}
.lv-tip b{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--tangerine)}
.lv-tip small{font-size:.7rem;font-weight:700;color:var(--ink-3)}
.lv-meter{display:inline-flex;align-items:center;gap:4px}
.lv-meter i{width:10px;height:10px;border-radius:50%;background:var(--cream-3);box-shadow:inset 0 0 0 1px var(--hair-2)}
.lv-meter i.on{background:var(--leaf);box-shadow:none}
.lv-meter small{margin-left:.3rem;font-size:.74rem;font-weight:800;color:var(--ink-3)}
.lv-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem;justify-self:end}
.lv-act .btn{gap:.3rem;white-space:nowrap}
/* hidden rows sit back; Remove is quiet until it is armed, then it is not */
.lv-row.is-hidden{opacity:.78;border-style:dashed;background:var(--cream)}
.lv-hid-mini{background:rgba(18,48,36,.08);color:var(--ink-2)}
.lv-rm{--fg:var(--ink-3)}
.lv-rm.is-armed{--bg:var(--coral);--fg:#fff;box-shadow:0 0 0 4px rgba(228,87,46,.22)}
.lv-act .ai{width:14px;height:14px}
.lv-none{padding:1.2rem;text-align:center;font-weight:600;color:var(--ink-3);background:#fff;border:1px dashed var(--hair-2);border-radius:var(--r)}

@container (max-width:1180px){ .lv-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:900px){
  /* photo · name, then the chips on a line of their own, then the buttons */
  .lv-row{grid-template-columns:auto minmax(0,1fr);row-gap:.45rem}
  .lv-pic{grid-row:1 / 4;align-self:start}
  .lv-main{grid-column:2}
  .lv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;grid-column:2}
  .lv-tip{display:flex;align-items:baseline;gap:.3rem}
  .lv-act{grid-column:2;justify-self:start}
  .lv-qa{grid-template-columns:minmax(0,1fr)}
}
/* ═══════════════════════════════════════════════════════════
   ADMIN — MESSAGES, THE INBOX (2026-10-13)
   Threads stacked on the left, the open one on the right: their message in
   cream, ours in forest green marked "You", the composer underneath.
   Prefixed ms-. On a phone it is one pane at a time, with a way back.
   ═══════════════════════════════════════════════════════════ */
.ms-wrap{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:1rem;align-items:stretch;min-height:min(72vh,760px)}
.ms-list{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden}
.ms-tools{display:grid;gap:.5rem;padding:.75rem .75rem .6rem;border-bottom:1px solid var(--hair);background:var(--cream)}
.ms-tools .seg{width:100%}
.ms-tools .seg button{flex:1 1 0;justify-content:center}
.ms-items{list-style:none;margin:0;padding:.4rem;display:grid;gap:.25rem;align-content:start;overflow-y:auto;flex:1;min-height:0}
.ms-item{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;row-gap:.2rem;width:100%;
  padding:.65rem .75rem .7rem .7rem;border:1px solid transparent;border-radius:14px;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background .15s,border-color .15s;
}
.ms-item:hover{background:var(--cream)}
.ms-item.is-sel{background:var(--cream-2);border-color:var(--hair-2)}
.ms-dot{grid-row:1 / 4;width:9px;height:9px;margin-top:.45rem;border-radius:50%;background:var(--cream-3);box-shadow:inset 0 0 0 1px var(--hair-2)}
.ms-item.is-open .ms-dot{background:var(--lemon-600);box-shadow:0 0 0 3px rgba(242,183,5,.25)}
.ms-who{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;min-width:0}
.ms-who b{font-family:var(--display);font-size:1.02rem;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-item.is-open .ms-who b{color:var(--forest-900)}
.ms-who time{flex:none;font-size:.74rem;font-weight:700;color:var(--ink-3)}
.ms-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0}
.ms-tags i{font-style:normal;font-family:var(--display);font-size:.72rem;font-weight:700;padding:.04rem .5rem;border-radius:999px;background:rgba(255,214,23,.28);color:#7A5A03}
.ms-tags small{font-size:.76rem;font-weight:700;color:var(--ink-3)}
.ms-tags .ms-n{color:var(--forest-700)}
.ms-snip{font-size:.86rem;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-item.is-open .ms-snip{color:var(--ink)}
.ms-none{padding:1.2rem .8rem;text-align:center;font-size:.92rem;font-weight:600;color:var(--ink-3)}
.ms-keep{margin:0;padding:.5rem .9rem .6rem;border-top:1px solid var(--hair);font-size:.74rem;font-weight:600;color:var(--ink-3);text-align:center}

.ms-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden}
.ms-empty{margin:auto;display:grid;justify-items:center;gap:.4rem;padding:2rem 1rem;text-align:center;color:var(--ink-3)}
.ms-empty h3{font-size:1.25rem;color:var(--ink)}
.ms-empty p{max-width:34ch;font-size:.94rem;font-weight:600}
.ms-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--hair);background:var(--cream)}
.ms-back{display:none;width:36px;height:36px;padding:0;border:1px solid var(--hair);border-radius:50%;background:#fff;cursor:pointer;place-items:center;color:var(--forest-800)}
.ms-back .ai{width:18px;height:18px;rotate:90deg}
.ms-hd-id{min-width:0}
.ms-hd-id h2{font-size:1.3rem;letter-spacing:-.015em;line-height:1.15}
.ms-hd-id p{margin-top:.15rem;font-size:.84rem;font-weight:600;color:var(--ink-3);overflow-wrap:anywhere}
.ms-hd-id p a{color:var(--forest-700);font-weight:700}
.ms-hd-id p i{font-style:normal;font-family:var(--display);font-weight:700;padding:.02rem .5rem;border-radius:999px;background:rgba(255,214,23,.28);color:#7A5A03}
.ms-hd-act{display:flex;align-items:center;gap:.5rem}
.ms-thread{flex:1;min-height:0;overflow-y:auto;display:grid;gap:.75rem;align-content:start;padding:1rem 1rem 1.2rem;
  background:radial-gradient(rgba(18,48,36,.055) 1px,transparent 1.3px) 0 0 / 14px 14px,var(--cream)}
.ms-b{position:relative;max-width:min(78%,60ch);padding:.75rem .95rem .8rem;border-radius:18px;box-shadow:var(--e1)}
.ms-b p{font-size:.97rem;line-height:1.55;overflow-wrap:anywhere}
.ms-b-k{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem;font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.01em}
.ms-b-k time{font-family:var(--ui);font-size:.72rem;font-weight:700;opacity:.7}
.ms-b-k em{font-family:var(--ui);font-style:normal;font-size:.72rem;font-weight:800;color:var(--coral)}
.ms-b.is-them{justify-self:start;background:#fff;border:1px solid var(--hair);border-bottom-left-radius:6px;color:var(--ink)}
.ms-b.is-them .ms-b-k{color:var(--forest-700)}
.ms-b.is-us{justify-self:end;background:linear-gradient(150deg,var(--forest-700),var(--forest-900));color:var(--cream);border-bottom-right-radius:6px}
.ms-b.is-us .ms-b-k{color:var(--lemon)}
.ms-b.is-us.is-failed{background:#fff;color:var(--ink);border:1.5px dashed rgba(228,87,46,.5)}
.ms-b.is-us.is-failed .ms-b-k{color:var(--coral)}
.ms-compose{display:grid;gap:.5rem;padding:.75rem .9rem .85rem;border-top:1px solid var(--hair);background:#fff}
.ms-compose textarea{
  width:100%;min-height:84px;resize:vertical;padding:.7rem .9rem;border:1.5px solid var(--hair);border-radius:14px;background:var(--cream);
  font:inherit;font-size:1rem;line-height:1.5;outline:none;transition:border-color .2s,box-shadow .2s;
}
.ms-compose textarea:focus{border-color:var(--forest-600);background:#fff;box-shadow:0 0 0 4px rgba(63,163,77,.14)}
.ms-compose-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .9rem}
.ms-hint{flex:1 1 240px;min-width:0;font-size:.78rem;font-weight:600;line-height:1.4;color:var(--ink-3)}
.ms-hint b{color:var(--ink-2);overflow-wrap:anywhere}
.ms-compose .btn{gap:.35rem}
.ms-compose .btn .ai{width:15px;height:15px;rotate:90deg}
@container (max-width:760px){
  /* one pane at a time: the list, or the thread with a way back */
  .ms-wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .ms-wrap.is-open .ms-list{display:none}
  .ms-wrap:not(.is-open) .ms-pane{display:none}
  .ms-back{display:grid}
  .ms-thread{max-height:52vh}
  .ms-b{max-width:88%}
}

@container (max-width:520px){
  .lv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-spot-hd{grid-template-columns:auto minmax(0,1fr)}
  .lv-spot-hd .adm-spot-act{grid-column:1 / -1}
  .lv-spot-pic{width:84px;height:63px}
  .lv-pic{width:72px;height:54px}
  .lv-bar .seg{width:100%}
  .lv-bar .seg button{flex:1 1 0;justify-content:center;padding:.38rem .4rem;font-size:.84rem}
  .lv-count{margin-left:0}
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — SUBSCRIBERS, THE LAUNCH LIST (2026-10-13)
   How big the list is and how it is growing (four numbers and twelve weeks
   of bars), then every address as a row: who, where they signed up, when,
   whether they are still on. Copy or download what is showing. Prefixed sl-.
   ═══════════════════════════════════════════════════════════ */
.sl-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1rem}

.sl-trend{display:grid;gap:.7rem;padding:1rem 1.15rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.sl-trend-k{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .8rem}
.sl-trend-k b{font-family:var(--display);font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.sl-trend-k span{font-size:.8rem;font-weight:700;color:var(--ink-3)}
.sl-bars{list-style:none;margin:0;padding:.2rem 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.35rem;height:92px;align-items:end}
.sl-bars li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;min-width:0}
.sl-bars li b{font-family:var(--ui);font-size:.72rem;font-weight:800;line-height:1;text-align:center;color:var(--ink-2);margin-bottom:.25rem}
.sl-bars li i{display:block;height:max(4px,var(--h,0%));border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--forest-600),var(--forest-800));transition:height .5s cubic-bezier(.2,.8,.2,1)}
.sl-bars li[style*="--h:0%"] i{background:var(--cream-3)}
.sl-bars li.is-now i{background:linear-gradient(180deg,var(--lemon),var(--lemon-600));box-shadow:0 0 0 3px rgba(242,183,5,.18)}
.sl-bars li.is-now[style*="--h:0%"] i{background:rgba(242,183,5,.35);box-shadow:none}

.sl-bar .sl-tools{display:flex;flex-wrap:wrap;gap:.4rem;flex:none}
.sl-tools .ai{width:15px;height:15px}
.sl-tools .btn:disabled{opacity:.45;cursor:not-allowed}

.sl-rows{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.sl-row{
  display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto auto auto auto;align-items:center;column-gap:1rem;
  padding:.7rem 1rem .7rem .9rem;background:#fff;border:1px solid var(--hair);border-left:4px solid var(--forest-600);border-radius:var(--r);
  transition:box-shadow .18s,border-color .18s;
}
.sl-row:hover{box-shadow:var(--e2);border-color:var(--hair-2);border-left-color:var(--forest-600)}
.sl-row.is-gone{opacity:.74;border-style:dashed;border-left-style:solid;border-left-color:var(--hair-2);background:var(--cream)}
.sl-n{font-family:var(--ui);font-size:.74rem;font-weight:800;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.sl-mail{min-width:0;overflow-wrap:anywhere;line-height:1.2}
.sl-mail b{font-family:var(--display);font-size:1.08rem;font-weight:800}
.sl-mail i{font-style:normal;font-weight:600;color:var(--ink-3)}
.sl-meta{display:contents}
.sl-src{font-family:var(--display);font-size:.74rem;font-weight:700;line-height:1.4;padding:.1rem .6rem;border-radius:999px;white-space:nowrap}
.sl-src.is-popup{background:rgba(255,214,23,.3);color:#7A5A03}
.sl-src.is-page{background:rgba(18,48,36,.08);color:var(--ink-2)}
.sl-src.is-other{background:var(--cream-2);color:var(--ink-2);border:1px solid var(--hair)}
.sl-when{font-size:.84rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.sl-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:700;color:var(--forest-700);white-space:nowrap}
.sl-state i{width:8px;height:8px;border-radius:50%;background:var(--forest-600);box-shadow:0 0 0 3px rgba(63,163,77,.18)}
.sl-row.is-gone .sl-state{color:var(--ink-3)}
.sl-act{display:flex;gap:.4rem;justify-self:end}
.sl-off{--fg:var(--ink-3)}
.sl-foot{margin:1rem 0 0;max-width:72ch;font-size:.82rem;font-weight:600;line-height:1.5;color:var(--ink-3)}

@container (max-width:1180px){ .sl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width:900px){
  /* number · address, the chips on their own line, the buttons under them */
  .sl-row{grid-template-columns:auto minmax(0,1fr);row-gap:.4rem}
  .sl-n{grid-row:1 / 4;align-self:start;margin-top:.3rem}
  .sl-mail{grid-column:2}
  .sl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;grid-column:2}
  .sl-act{grid-column:2;justify-self:start}
}
@container (max-width:520px){
  .sl-bar .sl-tools{width:100%}
  .sl-bar .sl-tools .btn{flex:1 1 0;justify-content:center}
  .sl-bars{height:70px;gap:.25rem}
  .sl-bars li b{font-size:.66rem}
  .sl-act{width:100%}
  .sl-act .btn{flex:1 1 0;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — TIPS & JAR (2026-10-14)
   Built on the Subscribers pieces (sl-kpis, sl-trend, sl-rows): the jar's four
   numbers, how the jar counts, then every Ko-fi payment as a row, the ones
   that still need a stand lit lemon. Prefixed tj-.
   ═══════════════════════════════════════════════════════════ */
.tj-jar{margin-bottom:1rem}
.tj-jar .sl-trend-k{align-items:center}
.tj-facts{margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.tj-facts div{min-width:0;padding:.6rem .75rem;border-radius:var(--r);background:var(--cream);border:1px solid var(--hair)}
.tj-facts dt{font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.tj-facts dd{margin:.15rem 0 0;font-family:var(--display);font-size:1.02rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}

.tj-row{grid-template-columns:6.2rem minmax(0,1fr) auto auto auto auto}
.tj-row.is-lost{border-left-color:var(--lemon-600);background:linear-gradient(90deg,rgba(255,214,23,.12),#fff 40%)}
.tj-row.is-lost:hover{border-left-color:var(--lemon-600)}
.tj-row.is-member{border-left-color:var(--tangerine)}
.tj-row.is-other{border-left-color:var(--hair-2)}
.tj-amt{font-family:var(--display);font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tj-amt i{font-style:normal;font-size:.72rem;font-weight:800;color:var(--ink-3)}
.tj-who i{display:block;margin-top:.1rem;font-size:.86rem;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.tj-kind.is-tip{background:rgba(255,214,23,.3);color:#7A5A03}
.tj-kind.is-member{background:rgba(242,116,56,.14);color:#8A3A12}
/* a first payment: the same tangerine, filled, with a small spark ahead of it */
.tj-kind.is-member.is-new{background:var(--tangerine);color:#fff;box-shadow:0 0 0 3px rgba(242,116,56,.16)}
.tj-kind.is-member.is-new::before{content:"\2726";margin-right:.3rem;font-size:.7rem}
.tj-kind.is-test{background:var(--cream-2);color:var(--ink-3);border:1px dashed var(--hair-2)}
.tj-kind.is-other{background:rgba(18,48,36,.08);color:var(--ink-2)}
.tj-home i{font-style:normal}
.tj-home > i:not(:first-child){width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--ink-3)}
.tj-row.is-lost .tj-home{color:#7A5A03}
.tj-sw{padding:.4rem 0 0}

@container (max-width:1180px){ .tj-facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:900px){
  .tj-row{grid-template-columns:minmax(0,1fr)}
  .tj-amt,.tj-row .sl-mail,.tj-row .sl-meta,.tj-row .sl-act{grid-column:1}
}
@container (max-width:520px){ .tj-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ═══════════════════════════════════════════════════════════
   ADMIN — VOTES (2026-10-16)
   Every vote, on the Subscribers rows: who (the confirmed email), for whom and
   in which race, then the chips, the time and the connection. A flagged row —
   several emails into one race from one connection — is lit tangerine, a
   runoff vote carries the forest-and-lemon chip the public board uses.
   Prefixed vt-.
   ═══════════════════════════════════════════════════════════ */
/* the chip column is a fixed width, so the stand column lines up row to row */
.vt-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 21rem auto}
.vt-row .sl-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.35rem .8rem}
.vt-row.is-flag{border-left-color:var(--tangerine);background:linear-gradient(90deg,rgba(242,116,56,.09),#fff 45%)}
.vt-row.is-flag:hover{border-left-color:var(--tangerine)}
.vt-for{min-width:0;line-height:1.2;overflow-wrap:anywhere}
.vt-for b{display:block;font-family:var(--display);font-size:1rem;font-weight:800}
.vt-for span{font-size:.84rem;font-weight:600;color:var(--ink-3)}
.vt-chip.is-runoff{background:var(--forest-800);color:var(--lemon)}
.vt-chip.is-flag{background:rgba(242,116,56,.16);color:#8A3A12}
.vt-ip{font-family:var(--ui);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.vt-ip:hover{color:var(--forest-700)}
.vt-row .is-armed{--fg:#fff;background:#B4361C;border-color:#B4361C;color:#fff}

@container (max-width:900px){
  .vt-row{grid-template-columns:minmax(0,1fr)}
  .vt-row .sl-mail,.vt-for,.vt-row .sl-meta,.vt-row .sl-act{grid-column:1}
  .vt-row .sl-meta{justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — AI REVIEW (2026-10-17)
   The desk up top is the one dark panel in the admin: forest, with the
   switches on a cream card — off greys it out, live lights its edge lemon.
   Below it, every review as a ledger row led by a verdict stamp (leaf
   approve, lemon hold, coral deny) with its confidence as a bar. The same
   stamp colours tint the AI strip on each approval-queue card.
   Prefixed ai- (not .ai, which is the icon svg).
   ═══════════════════════════════════════════════════════════ */
/* one slim bar: what mode it is in, in a line, then the three controls side by side */
.ai-desk{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.4rem;
  margin-bottom:.9rem;padding:.7rem .75rem .7rem 1.15rem;overflow:hidden;border-radius:var(--r);color:var(--cream);
  background:linear-gradient(100deg,#1F6B4B 0%,var(--forest-800) 38%,var(--forest-900) 100%);
  box-shadow:var(--e2);
}
.ai-desk.is-live{box-shadow:inset 0 0 0 2px var(--lemon),0 0 0 4px rgba(255,214,23,.16),var(--e2)}
.ai-desk.is-off{background:linear-gradient(100deg,#3B4A43,#27332D)}
.ai-desk-hd{min-width:0;flex:1 1 18rem}
.ai-desk-hd h2{
  display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:1.18rem;font-weight:800;
  line-height:1.15;letter-spacing:-.01em;color:#fff;
}
.ai-desk-hd h2 .ai{flex:none;width:18px;height:18px;color:var(--lemon)}
.ai-desk.is-live .ai-desk-hd h2::after{
  content:"";flex:none;width:.5em;height:.5em;border-radius:50%;
  background:var(--lemon);box-shadow:0 0 0 0 rgba(255,214,23,.6);animation:ai-pulse 2.2s ease-out infinite;
}
@keyframes ai-pulse{ 70%{box-shadow:0 0 0 .5em rgba(255,214,23,0)} 100%{box-shadow:0 0 0 0 rgba(255,214,23,0)} }
@media (prefers-reduced-motion:reduce){ .ai-desk.is-live .ai-desk-hd h2::after{animation:none} }
.ai-desk-hd p{margin-top:.15rem;font-size:.84rem;font-weight:600;line-height:1.4;color:rgba(255,252,242,.74)}
.ai-ctl{
  display:flex;flex-wrap:wrap;align-items:stretch;flex:none;
  background:var(--cream);color:var(--ink);border-radius:14px;box-shadow:0 8px 22px -12px rgba(0,0,0,.5);
}
.ai-ctl-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem}
.ai-ctl-item + .ai-ctl-item{border-left:1px solid var(--hair)}
.ai-ctl-k{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ai-ctl .tgl{width:44px;height:26px}
.ai-ctl .tgl i{width:20px;height:20px}
.ai-ctl .tgl[aria-checked="true"] i{translate:18px 0}
.ai-cap{
  display:inline-flex;align-items:baseline;gap:.2rem;padding:.25rem .3rem .25rem .1rem;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--ink);border-radius:8px;
}
.ai-cap b{font-family:var(--display);font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.ai-cap i{font-style:normal;font-size:.84rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ai-cap span{margin-left:.35rem;font-size:.8rem;font-weight:800;color:var(--forest-700);text-decoration:underline;text-underline-offset:2px}
.ai-cap:hover span{color:var(--coral)}
.ai-cap:focus-visible{outline:3px solid var(--lemon-600);outline-offset:2px}
.ai-mode{flex:none;display:inline-flex;padding:3px;border-radius:999px;background:var(--cream-3);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.ai-mode button{
  min-width:3.9rem;padding:.26rem .75rem;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--display);font-size:.9rem;font-weight:800;color:var(--ink-3);transition:background .2s,color .2s;
}
.ai-mode button:hover{color:var(--ink)}
.ai-mode button[aria-pressed="true"]{background:var(--forest-800);color:var(--cream)}
.ai-mode button[data-aimode="live"][aria-pressed="true"]{background:var(--lemon);color:var(--forest-900)}
.ai-mode button:focus-visible{outline:3px solid var(--lemon-600);outline-offset:2px}
.ai-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the ledger */
.ai-log{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ai-row{
  --vc:var(--ink-3);--vw:var(--cream-2);
  display:grid;grid-template-columns:7.4rem minmax(0,1fr) auto;gap:1.1rem;align-items:start;
  padding:.95rem 1.1rem .95rem .95rem;background:#fff;border:1px solid var(--hair);border-left:4px solid var(--vc);border-radius:var(--r);
  transition:box-shadow .18s,border-color .18s;
}
.ai-row:hover{box-shadow:var(--e2);border-color:var(--hair-2);border-left-color:var(--vc)}
.ai-row.is-approve{--vc:var(--leaf);--vw:rgba(63,163,77,.12)}
.ai-row.is-hold{--vc:var(--lemon-600);--vw:rgba(255,214,23,.24)}
.ai-row.is-deny{--vc:var(--coral);--vw:rgba(228,87,46,.12)}
.ai-row.is-none{--vc:var(--ink-3);--vw:var(--cream-2)}
.ai-row.is-new{background:linear-gradient(90deg,var(--vw),#fff 38%)}
.ai-row.is-undone{border-style:dashed;border-left-style:solid;background:var(--cream)}
.ai-stamp{display:grid;justify-items:start;gap:.3rem;padding-top:.1rem}
.ai-stamp b{
  display:inline-block;padding:.12rem .55rem;border:2.5px solid var(--vc);border-radius:9px;rotate:-3deg;
  font-family:var(--display);font-size:1.05rem;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vc);background:var(--vw);
}
.ai-row.is-hold .ai-stamp b{color:#8A6503}
.ai-row.is-undone .ai-stamp b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.ai-stamp span{font-size:.8rem;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ai-meter{display:block;width:100%;height:5px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.ai-meter i{display:block;height:100%;border-radius:inherit;background:var(--vc)}
.ai-main{display:grid;gap:.4rem;min-width:0}
.ai-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem}
.ai-name{font-family:var(--display);font-size:1.12rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.ai-where{font-size:.86rem;font-weight:600;color:var(--ink-3)}
.ai-kind{align-self:center;padding:.06rem .5rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.03em;color:var(--ink-2);background:var(--cream-2);border:1px solid var(--hair)}
.ai-kind.is-live{background:var(--forest-800);border-color:var(--forest-800);color:var(--lemon)}
.ai-why{max-width:78ch;font-size:.94rem;font-weight:600;line-height:1.5;color:var(--ink-2)}
.ai-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.ai-tag{padding:.08rem .55rem;border-radius:999px;font-size:.74rem;font-weight:800;line-height:1.5;white-space:nowrap}
.ai-tag.is-flag{background:rgba(228,87,46,.12);color:#9A3417}
.ai-tag.is-check{background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.ai-tag.is-photo{background:var(--cream-2);color:var(--ink-2)}
.ai-out{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem;font-size:.86rem;font-weight:700;color:var(--forest-700)}
.ai-out b{font-weight:800}
.ai-out-ico{display:inline-grid;place-items:center;width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.ai-out-ico.is-live{background:var(--leaf);box-shadow:0 0 0 3px rgba(63,163,77,.18)}
.ai-out-ico.is-no{background:var(--coral);box-shadow:0 0 0 3px rgba(228,87,46,.16)}
.ai-out-ico.is-wait{background:var(--lemon-600);box-shadow:0 0 0 3px rgba(242,183,5,.2)}
.ai-out-ico:has(.ai){width:auto;height:auto;background:none;box-shadow:none}
.ai-out-ico .ai{width:15px;height:15px}
.ai-agree.is-yes{color:var(--forest-600)}
.ai-agree.is-no{color:#B4361C}
.ai-note{font-size:.84rem;font-weight:600;font-style:italic;color:var(--ink-3)}
.ai-side{display:grid;justify-items:end;gap:.35rem;text-align:right}
.ai-thumb{display:block;width:64px;height:48px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.ai-thumb img{width:100%;height:100%;object-fit:cover}
.ai-cost{font-family:var(--ui);font-size:.76rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ai-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem;margin-top:.15rem}
.ai-acts .ai,.ai-say-btn .ai{width:15px;height:15px}
.ai-undo{--fg:#B4361C}
.ai-btn-down{--bg:var(--coral);--fg:#fff}
.ai-live-list{display:grid;gap:.55rem;margin:0 0 .4rem;padding-left:1.1rem;font-size:.96rem;font-weight:600;line-height:1.45;color:var(--ink-2)}

/* the strip on a queue card */
.ai-say{
  --vc:var(--ink-3);--vw:var(--cream);
  display:flex;align-items:flex-start;gap:.75rem;margin-top:.75rem;padding:.55rem .7rem;
  background:var(--vw);border:1px solid var(--hair);border-left:4px solid var(--vc);border-radius:14px;
}
.ai-say.is-approve{--vc:var(--leaf);--vw:#F1F8EE}
.ai-say.is-hold{--vc:var(--lemon-600);--vw:#FFF8D9}
.ai-say.is-deny{--vc:var(--coral);--vw:#FFF1EA}
.ai-say.is-busy{--vc:var(--forest-600)}
.ai-say-k{
  flex:none;display:inline-flex;align-items:center;gap:.25rem;padding:.14rem .5rem;border-radius:999px;
  font-family:var(--display);font-size:.78rem;font-weight:800;color:var(--lemon);background:var(--forest-800);
}
.ai-say-k .ai{width:13px;height:13px}
.ai-say.is-busy .ai-say-k .ai{animation:ai-spin 2.4s linear infinite}
@keyframes ai-spin{ to{rotate:360deg} }
@media (prefers-reduced-motion:reduce){ .ai-say.is-busy .ai-say-k .ai{animation:none} }
.ai-say > p,.ai-say-bd{flex:1;min-width:0;font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink-2)}
.ai-say-bd{display:grid;gap:.3rem}
.ai-say b{font-family:var(--display);font-weight:800;color:var(--ink)}
.ai-say-c{font-size:.8rem;font-weight:800;color:var(--ink-3)}
.ai-say-why{color:var(--ink-2)}
.ai-say-btn{flex:none}

@container (max-width:1180px){ .ai-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width:900px){
  .ai-desk{padding:.75rem}
  .ai-desk-hd{flex-basis:100%;padding:0 .3rem}
  .ai-ctl{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr)}
  .ai-ctl-item{justify-content:space-between;padding:.4rem .75rem}
  .ai-ctl-item + .ai-ctl-item{border-left:0;border-top:1px solid var(--hair)}
  .ai-row{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .ai-stamp{grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:.6rem}
  .ai-side{justify-items:start;text-align:left;grid-template-columns:auto;}
  .ai-acts{justify-content:flex-start}
  .ai-say{flex-wrap:wrap}
}
/* a narrow queue card: the AI's note gets the full width, its button goes under it */
@container (max-width:640px){
  .sub.is-queue .ai-say{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem .6rem}
  .sub.is-queue .ai-say-btn{grid-column:2;justify-self:start}
}

/* ═══════════════════════════════════════════════════════════
   COUNTY PAGES — ABOUT THIS COUNTY (2026-10-14)
   Four cards filled from real data (data/ok-places.json): the land and its
   towns, where stands set up, the law here, the Cup here. Prefixed ca-.
   ═══════════════════════════════════════════════════════════ */
.ca-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ca-card{position:relative;padding:1.25rem 1.3rem 1.2rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden}
.ca-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--ca,var(--lemon))}
.ca-card.is-land{--ca:var(--lemon);background:linear-gradient(180deg,#FFF9DF 0%,#fff 55%)}
.ca-card.is-spots{--ca:var(--leaf);background:linear-gradient(180deg,#EAF5EC 0%,#fff 55%)}
.ca-card.is-law{--ca:var(--forest-700);background:linear-gradient(180deg,#E9F1EC 0%,#fff 55%)}
.ca-card.is-cup{--ca:var(--coral);background:linear-gradient(180deg,#FFF0E8 0%,#fff 55%)}
.ca-k{margin:.2rem 0 .45rem;font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ca-say{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.ca-say b{color:var(--ink)}
.ca-facts{list-style:none;margin:.9rem 0 .8rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.ca-facts li{display:grid;gap:.05rem;padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid var(--hair)}
.ca-facts b{font-family:var(--display);font-size:1.35rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--forest-800)}
.ca-facts span{font-size:.76rem;font-weight:700;line-height:1.3;color:var(--ink-3)}
.ca-towns{display:flex;flex-wrap:wrap;gap:.35rem}
.ca-town{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--hair);font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--ink-2);text-decoration:none}
.ca-town.is-seat{background:rgba(255,214,23,.3);border-color:rgba(242,183,5,.5);color:#5A3F00}
.ca-town.is-live{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
.ca-town.is-live i{font-style:normal;font-family:var(--ui);font-size:.68rem;font-weight:800;padding:.02rem .4rem;border-radius:999px;background:var(--lemon);color:#5A3F00}
.ca-town.is-live:hover{background:var(--forest-700)}
.ca-town.is-more{background:none;border-style:dashed;color:var(--ink-3)}
.ca-rows{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
.ca-rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:start;padding:.55rem .7rem;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid var(--hair)}
.ca-rows li i{width:22px;height:22px;margin-top:.1rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-size:.8rem;font-weight:800;line-height:1}
.ca-rows li.is-yes i{background:var(--leaf);color:#fff}
.ca-rows li.is-yes i::before{content:"\2713"}
.ca-rows li.is-ask i{background:rgba(242,183,5,.3);color:#7A5A03}
.ca-rows li.is-ask i::before{content:"?"}
.ca-rows li b{display:block;font-family:var(--display);font-size:.96rem;font-weight:800;line-height:1.25;color:var(--ink)}
.ca-rows li span{display:block;margin-top:.1rem;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.ca-links{display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--hair)}
.ca-links a{display:inline-flex;align-items:center;padding:.38rem .85rem;border-radius:999px;border:1.5px solid var(--forest-700);background:#fff;font-family:var(--display);font-size:.88rem;font-weight:800;color:var(--forest-800);text-decoration:none;transition:background .15s,color .15s}
.ca-links a:hover{background:var(--forest-800);color:var(--cream)}
@media (max-width:860px){ .ca-grid{grid-template-columns:minmax(0,1fr)} }

/* ═══════════════════════════════════════════════════════════
   GUIDES — THE FIELD MANUAL (2026-10-14)
   A hub of numbered cards and one reading page per guide: a kicker pill, a
   big title, measured body copy with numbered steps on coin markers, one
   "Try this" box, the questions, three more guides. Prefixed gd-.
   ═══════════════════════════════════════════════════════════ */
.gd-hero .pg-copy{max-width:60ch}
.gd-copy{min-width:0}
.gd-kick{display:inline-flex;align-items:center;gap:.45rem;padding:.22rem .8rem;border-radius:999px;background:var(--forest-800);color:var(--lemon);font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.gd-hero h1{margin-top:.7rem;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.02em;max-width:18ch}
.gd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.gd-card{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.2rem 1.1rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1);color:inherit;text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.gd-card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:rgba(242,183,5,.5)}
.gd-card-n{position:absolute;top:.9rem;right:.9rem;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:var(--display);font-size:.95rem;font-weight:800;color:#5A3F00;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 55%,var(--lemon-600));border:2px solid #C98F00;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.gd-card-k{font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-right:2.6rem}
.gd-card-k i{font-style:normal;margin:0 .35rem;color:var(--hair-2)}
.gd-card b{font-family:var(--display);font-size:1.18rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--forest-900)}
.gd-card-say{font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.gd-card-go{margin-top:auto;padding-top:.5rem;font-family:var(--display);font-size:.9rem;font-weight:800;color:var(--forest-700)}
.gd-cards.is-hub .gd-card{padding-top:1.3rem}
/* the coin owns the top-right corner: the kicker and the title stop short of it at every width */
.gd-cards.is-hub .gd-card-k,.gd-cards.is-hub .gd-card b{padding-right:calc(34px + 1.4rem)}
.gd-strip{margin-top:2.2rem}
.gd-strip + .pg-cta-in{margin-top:clamp(1.8rem,3.5vw,2.8rem)}   /* the Starter Kit: room between the strip and the lemon closing card */
.gd-strip-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin-bottom:.8rem}
.gd-strip-hd h3{font-size:1.35rem;margin:0}
.gd-strip-hd p{font-size:.92rem;font-weight:600;color:var(--ink-3)}
.gd-strip-hd a{font-weight:800;color:var(--forest-700)}

.gd-read{padding-top:0}
.gd-body{max-width:66ch;margin:0;padding:.4rem 0 0}
.gd-sec{padding:1.4rem 0 .4rem}
.gd-sec + .gd-sec{border-top:1px solid var(--hair)}
.gd-sec h2{font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.015em;line-height:1.15;margin-bottom:.7rem}
.gd-sec p{font-size:1.06rem;line-height:1.65;color:var(--ink-2);margin:0 0 .9rem}
.gd-sec p b{color:var(--ink)}
.gd-sec .hw-list{margin:.4rem 0 1rem;grid-template-columns:minmax(0,1fr)}   /* one column inside the reading measure */
.gd-sec .hw-list span{font-size:.92rem;color:var(--ink-2)}
.gd-steps{list-style:none;margin:.5rem 0 1rem;padding:0;display:grid;gap:.55rem;counter-reset:gd}
/* the coin is column one and spans both rows; the title and the text stack in column two */
.gd-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:.8rem;row-gap:.1rem;align-items:start;padding:.65rem .9rem .65rem .7rem;background:#fff;border:1px solid var(--hair);border-radius:14px;counter-increment:gd}
.gd-steps li::before{content:counter(gd);grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-family:var(--display);font-size:1rem;font-weight:800;color:#5A3F00;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 55%,var(--lemon-600));border:2px solid #C98F00;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.gd-steps b{grid-column:2;display:block;font-family:var(--display);font-size:1.05rem;font-weight:800;line-height:1.25;color:var(--ink);align-self:center;min-height:36px;display:flex;align-items:center}
.gd-steps span{grid-column:2;display:block;margin-top:.05rem;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.gd-tip{position:relative;margin:1.6rem 0 .6rem;padding:1.2rem 1.3rem 1.15rem;border-radius:var(--r-lg);color:var(--cream);
  background:radial-gradient(120% 90% at 100% 0,rgba(255,214,23,.25),transparent 55%),linear-gradient(150deg,var(--forest-700),var(--forest-900));box-shadow:var(--e2)}
.gd-tip{display:grid;gap:.55rem;justify-items:start}
.gd-tip p.gd-tip-k{display:inline-block;margin:0;padding:.14rem .7rem;border-radius:999px;background:rgba(255,214,23,.2);color:var(--lemon);font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.gd-tip h3{font-size:1.3rem;line-height:1.15;color:#fff;margin:.1rem 0 0}
.gd-tip p{font-size:1rem;line-height:1.6;color:rgba(255,252,242,.88);margin:0;max-width:60ch}
@media (max-width:900px){ .gd-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .gd-cards{grid-template-columns:minmax(0,1fr)} .gd-sec p{font-size:1rem} }

/* ── the keyword pass (2026-10-14) ──────────────────────────
   A real photo beside the reading column (the recipe), held in view while the
   steps scroll past; on a phone it sits at the top of the text instead. */
/* gd-with-photo, never has-photo: that one is the stand photo's blurred backdrop, site-wide */
.gd-body.gd-with-photo{max-width:none;display:grid;grid-template-columns:minmax(0,66ch) minmax(220px,360px);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.gd-body.gd-with-photo > *{grid-column:1}
.gd-photo{grid-column:2 !important;grid-row:1 / span 40;position:sticky;top:6.5rem;margin:1.4rem 0 0}
.gd-photo img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--e2);border:6px solid #fff;outline:1px solid var(--hair)}
@media (max-width:960px){
  .gd-body.gd-with-photo{display:block;max-width:66ch}
  .gd-photo{position:static;max-width:400px;margin:1.2rem 0 .2rem}
}
/* the official contest rules (/contest-rules/, rebuilt 2026-10-16): one shape
   all the way down. Jump-to chips, then a stack of identical cards — a lemon
   number, a title, and one list of rows, each a bold label beside one plain
   sentence. The dates are rows like everything else. */
.cr-toc,.cr-sheet{max-width:860px;margin-inline:auto}
.cr-toc{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.cr-toc a{display:inline-flex;align-items:center;min-height:34px;padding:.25rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--hair);
  font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--forest-800);text-decoration:none;transition:background .18s,border-color .18s}
.cr-toc a:hover{background:#FFF3B8;border-color:rgba(242,183,5,.6)}
.cr-sheet{display:grid;gap:1rem}
.cr-sec{scroll-margin-top:6rem;padding:1.35rem 1.5rem .55rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.cr-sec h2{display:flex;align-items:center;gap:.75rem;margin:0 0 .5rem;font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:800;line-height:1.2;color:var(--forest-900)}
.cr-n{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--lemon);color:var(--forest-900);font-size:1rem;font-weight:800;box-shadow:inset 0 -2px 0 rgba(122,83,3,.18)}
.cr-rows{list-style:none;margin:0;padding:0}
.cr-rows li{display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);column-gap:1.4rem;padding:.8rem 0;border-top:1px solid var(--hair)}
.cr-rows li:first-child{border-top:0}
.cr-rows b{font-family:var(--display);font-size:1rem;font-weight:800;line-height:1.55;color:var(--forest-800)}
.cr-rows span{font-size:1rem;font-weight:500;line-height:1.55;color:var(--ink-2)}
.cr-rows a{color:var(--forest-700);font-weight:700;text-decoration-color:rgba(63,163,77,.45);text-underline-offset:.16em}
@media (max-width:640px){
  .cr-sec{padding:1.1rem 1.1rem .4rem}
  .cr-rows li{grid-template-columns:minmax(0,1fr);row-gap:.15rem;padding:.7rem 0}
}
/* links inside running text: forest green, a soft underline */
.gd-sec a,.ca-say a,.ca .sec-note a,.steps p a,.gd-hero .pg-lede a{color:var(--forest-700);font-weight:700;text-decoration-color:rgba(63,163,77,.45);text-underline-offset:.16em}
.gd-sec a:hover,.ca-say a:hover,.ca .sec-note a:hover,.steps p a:hover,.gd-hero .pg-lede a:hover{text-decoration-color:currentColor}
/* one sentence at the foot of a guide, pointing at the Starter Kit and the law */
.gd-next{margin:1.5rem 0 0;padding:.9rem 1.1rem;border-radius:14px;background:var(--cream-2);border:1px solid var(--hair);font-size:1rem;line-height:1.6;color:var(--ink-2)}
.gd-next a{font-weight:800;color:var(--forest-700)}
/* a page of names: small cards, three across, a lemon dot ahead of each */
.gd-names{list-style:none;margin:.5rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.gd-names li{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.5rem .7rem;background:#fff;border:1px solid var(--hair);border-radius:12px;
  font-family:var(--display);font-size:.98rem;font-weight:700;line-height:1.25;color:var(--ink)}
.gd-names li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1A8,var(--lemon) 60%,var(--lemon-600));box-shadow:0 0 0 2px rgba(201,143,0,.35)}
@media (max-width:640px){ .gd-names{grid-template-columns:repeat(2,minmax(0,1fr))} .gd-names li{font-size:.92rem} }
/* a plan to fill in: a notebook page with a dotted line after each prompt */
.gd-blank{list-style:none;margin:.5rem 0 1rem;padding:.6rem 1.2rem .9rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e1)}
.gd-blank li{display:flex;align-items:baseline;gap:.6rem;padding:.7rem 0 .2rem;font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink)}
.gd-blank li::after{content:"";flex:1 1 4rem;min-width:4rem;border-bottom:2px dotted var(--hair-2)}

/* the search phrase as the small first line of a page's h1: the site's
   eyebrow pill, inside the heading so the heading carries the words */
.h1-k{display:block;width:fit-content;max-width:100%;margin:0 0 .9rem;padding:.28rem .9rem;border-radius:18px;
  font-family:var(--display);font-size:.88rem;font-weight:700;line-height:1.3;letter-spacing:.02em;text-transform:none;
  color:var(--forest-700);-webkit-text-fill-color:var(--forest-700);background:rgba(63,163,77,.10);border:1px solid rgba(63,163,77,.22)}
.hero-stack:not(.left) .h1-k{margin-inline:auto}
@media (max-width:480px){ .ca-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem} .ca-facts li{padding:.5rem .5rem} .ca-facts b{font-size:1.1rem} }

/* ═══════════════════════════════════════════════════════════
   DONATE A PRIZE — the standalone form (2026-10-18)
   The popup sponsors offer a prize through, apart from the contact form.
   It wears the site's form styles; only its own pieces are here. Prefixed pz-.
   ═══════════════════════════════════════════════════════════ */
.pz-form .pz-other[hidden]{display:none}
.pz-ok{display:flex!important;align-items:flex-start;gap:.65rem;padding:.75rem .9rem;border-radius:14px;
  background:var(--cream);border:1px solid var(--hair);font-weight:600;line-height:1.45;color:var(--ink-2);cursor:pointer}
.pz-ok input{flex:none;width:20px;height:20px;margin-top:.1rem;accent-color:var(--forest-700)}
.pz-ok a{color:var(--forest-700);font-weight:800}
/* the contest field follows the gift: locked to the one contest a stand or a
   juicer belongs to, waiting until a prize is picked, or a short choice */
.pz-for{display:grid;gap:.35rem;align-content:start;font-size:.94rem}
/* the hint under the contest makes its column taller; the prize field beside
   it must not stretch to match, or its box drops below the contest box */
.pz-form .row{align-items:start}
.pz-for > .lbl{font-weight:700}
/* no fill: a held transform would keep each piece on its own layer, and the
   hint under an open contest list would sit on top of it */
.pz-for > *{animation:pzIn .28s var(--ease)}
@keyframes pzIn{from{opacity:0;transform:translateY(-3px)}}
/* same padding, border and line height as the dropdown beside it, so the two
   boxes are exactly the same height */
.pz-fixed{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;border-radius:12px;font-size:1rem;
  background:rgba(63,163,77,.08);border:1.5px solid rgba(63,163,77,.38);color:var(--forest-800)}
.pz-fixed svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--forest-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pz-fixed b{font-weight:700}
.pz-fixed.is-wait{background:var(--cream);border-style:dashed;border-color:var(--hair-2);color:var(--ink-3);font-weight:500}
.pz-for .form-hint{line-height:1.45}
/* while the contest list is open, the hint under it steps out of sight, so not
   even a sliver shows in the gap between the box and its list */
.pz-for:has(.sel[data-open]) .form-hint{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .pz-for > *{animation:none} }

/* ═══════════════════════════════════════════════════════════
   ADMIN — SPONSORS (2026-10-18)
   The people on /our-sponsors/: hand-added sponsors as rows (logo, name, what
   they gave, kind / contest / season chips, an on-the-page switch, edit,
   delete), then the Ko-fi names with a switch each. Prefixed sps-.
   ═══════════════════════════════════════════════════════════ */
.sps-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-bottom:1rem;
  padding:.8rem 1rem;border-radius:var(--r);background:#fff;border:1px solid var(--hair);box-shadow:var(--e1)}
.sps-say{font-weight:600;color:var(--ink-2)}
.sps-say b{font-family:var(--display);font-size:1.1rem;color:var(--forest-800)}
.sps-tools{display:flex;flex-wrap:wrap;gap:.45rem}
.sps-tools .ai{width:15px;height:15px}
.sps-h{margin:1.4rem 0 .6rem;font-size:1.15rem}
.sps-note{max-width:72ch;margin:-.2rem 0 .7rem;font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-3)}
.sps-row{grid-template-columns:48px minmax(0,1fr) auto auto}
.sps-logo{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--cream);border:1px solid var(--hair)}
.sps-logo img{width:100%;height:100%;object-fit:contain}
.sps-logo i{font-style:normal;font-family:var(--display);font-weight:800;color:var(--forest-700)}
.sps-logo.is-big{width:96px;height:96px;border-radius:16px}
.sps-logo.is-big i{font-size:.85rem;color:var(--ink-3)}
.sps-who{display:grid;min-width:0;line-height:1.25}
.sps-who b{font-family:var(--display);font-size:1.05rem;font-weight:800;overflow-wrap:anywhere}
.sps-who span{font-size:.86rem;font-weight:600;color:var(--ink-3);overflow-wrap:anywhere}
.sps-meta{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.sps-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem}
.sps-sw{display:inline-flex;align-items:center;gap:.4rem;margin-right:.3rem}
.sps-sw small{min-width:5.6em;font-size:.78rem;font-weight:700;color:var(--ink-3)}
.sps-act .is-armed{--fg:#fff;background:#B4361C;border-color:#B4361C;color:#fff}
.sps-names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.45rem}
.sps-names li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .8rem;border-radius:12px;background:#fff;border:1px solid var(--hair)}
.sps-names li.is-off{background:var(--cream);border-style:dashed}
.sps-names li.is-off b{color:var(--ink-3);text-decoration:line-through}
.sps-nm{display:grid;min-width:0;line-height:1.25}
.sps-nm b{overflow-wrap:anywhere}
.sps-nm small{font-size:.78rem;font-weight:600;color:var(--ink-3)}
.sps-opt{font-weight:600;color:var(--ink-3)}
.sps-logo-pick{display:flex;align-items:center;gap:1rem;margin:.4rem 0 .6rem}
.sps-logo-pick > div{display:grid;gap:.4rem;justify-items:start}
.sps-file{cursor:pointer}
/* the prize offers inbox: the report card layout, a 2x2 "where it stands" control */
.pzo-list{margin-bottom:.4rem}
.pzo.is-declined{opacity:.72}
.pzo .sub-facts a{color:var(--forest-700);text-decoration:underline;text-underline-offset:2px}
.pzo-st{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.2rem}
.pzo-st button{font:inherit;font-family:var(--display);font-size:.84rem;font-weight:700;padding:.45rem .5rem;border-radius:10px;cursor:pointer;
  background:var(--cream);color:var(--ink-2);border:1px solid var(--hair);transition:background .15s var(--ease),color .15s var(--ease)}
.pzo-st button:hover{background:var(--cream-2)}
.pzo-st button[aria-pressed="true"]{background:var(--forest-800);border-color:var(--forest-800);color:#fff}
.pzo-st button:focus-visible{outline:3px solid var(--lemon);outline-offset:2px}
.pzo .sub-actions .is-armed{--fg:#fff;background:#B4361C;border-color:#B4361C;color:#fff}
.pzo-done{margin:.6rem 0 0}
.pzo-done > summary{cursor:pointer;width:fit-content;padding:.45rem .9rem;border-radius:999px;font-family:var(--display);font-weight:700;
  background:var(--cream);border:1px solid var(--hair);color:var(--ink-2)}
.pzo-done > summary b{margin-left:.3rem;color:var(--forest-800)}
.pzo-done[open] > summary{margin-bottom:.9rem}
@container (max-width:900px){
  .sps-row{grid-template-columns:48px minmax(0,1fr)}
  .sps-meta,.sps-act{grid-column:1 / -1;justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════
   OUR SPONSORS — the thank-you wall (2026-10-18)
   Prize sponsors as wide featured cards (a logo tile and, big, what they gave),
   businesses as a grid of smaller cards, backers as tier cards, friends as
   name chips. Drawn live by js/our-sponsors.js; the empty state is built in.
   Prefixed os-.
   ═══════════════════════════════════════════════════════════ */
.os-head{max-width:760px}
.os-kick{display:inline-block;padding:.28rem .9rem;border-radius:999px;background:rgba(63,163,77,.12);
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-700)}
.os-head h1{margin-top:.6rem;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05}
.os-wall > .wrap > div + div{margin-top:clamp(2rem,4vw,3rem)}
.os-sec-hd{margin-bottom:1.1rem}
.os-sec-hd h2{font-size:clamp(1.5rem,3vw,2rem)}
.os-sec-hd p{margin-top:.2rem;font-weight:600;color:var(--ink-3)}
.os-season{margin:1.4rem 0 .7rem;font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.os-k{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-600)}
.os-gave{font-family:var(--display);font-weight:800;color:var(--forest-900)}
.os-visit{display:inline-flex;align-items:center;gap:.3rem;width:fit-content;font-weight:800;font-size:.9rem;color:var(--forest-700);text-decoration:none}
.os-visit:hover{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.os-mono{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:var(--forest-800);
  font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--lemon)}

.os-prizes{display:grid;gap:1rem}
.os-prize{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.4rem;align-items:center;padding:1.3rem;
  border-radius:var(--r-lg);border:1px solid rgba(242,183,5,.45);box-shadow:var(--e2);
  background:linear-gradient(120deg,#FFF6CF 0%,#fff 55%);
}
.os-prize-logo{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r);background:#fff;border:1px solid var(--hair);padding:1rem;overflow:hidden}
.os-prize-logo img{width:100%;height:100%;object-fit:contain}
.os-prize-logo .os-mono{font-size:3.4rem}
.os-prize-body{display:grid;gap:.35rem;min-width:0}
.os-prize h3{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1}
.os-prize .os-gave{font-size:clamp(1.1rem,2vw,1.3rem)}
.os-blurb{font-size:.96rem;font-weight:600;line-height:1.5;color:var(--ink-2)}

.os-bizs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.os-biz{display:grid;gap:.3rem;align-content:start;justify-items:start;padding:1.1rem;border-radius:var(--r);background:#fff;border:1px solid var(--hair);box-shadow:var(--e1)}
.os-biz-logo{display:grid;place-items:center;width:84px;height:84px;margin-bottom:.4rem;border-radius:16px;background:var(--cream);border:1px solid var(--hair);padding:.55rem;overflow:hidden}
.os-biz-logo img{width:100%;height:100%;object-fit:contain}
.os-biz h3{font-size:1.15rem;line-height:1.15}
.os-biz .os-gave{font-size:.98rem}

.os-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.os-tier{padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--cream);border:1px solid var(--hair)}
.os-tier h3{font-size:1.1rem;color:var(--forest-800)}
.os-tier ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.3rem}
.os-tier li{font-weight:700;color:var(--ink-2)}

.os-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.os-chips li{padding:.4rem .9rem;border-radius:999px;background:var(--cream-2);border:1px solid var(--hair);font-weight:700;color:var(--forest-800)}
.os-quiet{margin-top:.9rem;font-weight:600;color:var(--ink-3)}
.os-quiet b{color:var(--forest-800)}

.os-empty{display:grid;justify-items:center;gap:.6rem;max-width:640px;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem);text-align:center;
  border-radius:var(--r-lg);border:2px dashed rgba(242,183,5,.6);background:linear-gradient(160deg,#FFF8DA,#fff 70%)}
.os-empty[hidden]{display:none}
.os-empty-ico{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--forest-800);color:var(--lemon)}
.os-empty-ico .ai{width:30px;height:30px}
.os-empty h2{font-size:clamp(1.5rem,3vw,2rem)}
.os-empty p{max-width:46ch;font-weight:600;color:var(--ink-2)}
.os-empty-act{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.4rem}

@media (max-width:640px){
  .os-prize{grid-template-columns:minmax(0,1fr);gap:1rem}
  .os-prize-logo{width:140px}
  .os-empty-act .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   CLOSED FOR THE SEASON, AND PRIZE CREDITS (2026-10-18)
   A stand closed for the season keeps its page and its tips; its address,
   hours and voting step out. Greyed cards in their own group under the open
   stands (cfs-), the calm note on its own page (so-), and the "Prize donated
   by" lines on the contest pages and the rules (pzc).
   ═══════════════════════════════════════════════════════════ */
.status.closed{background:rgba(18,48,36,.08);color:var(--ink-2)}
.status.closed i{background:#9AA79F}
.status.on-shot.closed{background:#FFFDF6;color:var(--ink-2)}

/* the greyed group */
.cfs{margin-top:2.6rem}
.cfs:first-child{margin-top:0}
.cfs-head{display:grid;gap:.25rem;margin-bottom:1.1rem;padding-top:1.4rem;border-top:1px dashed var(--hair-2)}
.cfs:first-child .cfs-head{border-top:0;padding-top:0}
.cfs-head h3{display:flex;align-items:center;gap:.55rem;font-size:1.25rem;color:var(--ink-2)}
.cfs-n{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .45em;border-radius:999px;
  font-size:.82rem;font-weight:800;background:rgba(18,48,36,.07);color:var(--ink-2)}
.cfs-head p{max-width:62ch;font-size:.94rem;font-weight:500;color:var(--ink-3)}
.card.is-closed{background:var(--cream);box-shadow:none}
.card.is-closed .card-shot img{filter:grayscale(.85) contrast(.92);opacity:.8;transition:filter .3s var(--ease),opacity .3s var(--ease),scale .5s var(--ease)}
.card.is-closed:hover .card-shot img{filter:grayscale(.35);opacity:1}
.card.is-closed h3{color:var(--ink-2)}
.card.is-closed .card-hours{font-style:italic;color:var(--ink-3)}
.cfs-tip{flex:none;font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--forest-700)}

/* the closed stand's own page */
.listing-hero.is-closed .sun{filter:grayscale(.7);opacity:.55}
.so-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;margin-bottom:2rem;padding:1.4rem 1.5rem;
  border-radius:var(--r-lg);background:var(--cream);border:1.5px dashed var(--hair-2)}
.so-sign{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#fff;border:1px solid var(--hair)}
.so-sign svg{width:40px;height:40px;fill:none;stroke:var(--forest-700);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.so-card h2{margin-bottom:.35rem;font-size:1.4rem}
.so-card p{max-width:60ch;color:var(--ink-2);line-height:1.6}
@media (max-width:520px){ .so-card{grid-template-columns:minmax(0,1fr)} }

/* "Prize donated by ___" */
.pzc{margin:.7rem 0 0;font-size:.88rem;font-weight:700;line-height:1.45;color:var(--ink-2)}
.pzc a{color:var(--forest-700);text-decoration:underline;text-underline-offset:2px}
.pzc.is-under{text-align:center;margin-top:.9rem}
.pzc.is-inline{display:inline;margin:0;font-size:inherit;font-weight:600}
.pzc[hidden]{display:none}

/* listing early: the List-your-stand popup says when it goes live (2026-10-18) */
.ls-early{margin-top:.8rem;padding:.7rem .9rem;border-radius:12px;font-size:.92rem;font-weight:600;line-height:1.5;
  background:rgba(255,214,23,.13);border:1px solid rgba(255,214,23,.4);color:#FFFCF2}
.ls-early b{color:var(--lemon)}