/* ============================================================
   HOMEMADE BY COLLEEN: shared design system, warm neobrutalism
   Token architecture inherited from nicepest.com:
   3-layer oklch color, semantic tracking, per-component
   namespaces, hard offset shadow via pseudo-element.

   Linked by every page on the site. Page-specific components
   (things only one page needs) live in that page's own inline
   <style> block, appended after this file so the cascade lets
   them override shared rules where a page genuinely differs.
   ============================================================ */

/* ---- 1. PRIMITIVES ---- */
:root{
  --c-ink:          oklch(20.0% 0.040 252);
  --c-ink-soft:     oklch(42.0% 0.030 252);
  --c-cream:        oklch(97.4% 0.014 84.6);
  --c-cream-2:      oklch(94.5% 0.022 84.6);
  --c-paper:        oklch(99.5% 0.004 84.6);
  --c-green:        oklch(75.9% 0.209 131.7);
  --c-green-deep:   oklch(46.0% 0.130 138);
  --c-yellow:       oklch(86.5% 0.177 92.8);
  --c-yellow-pale:  oklch(95.5% 0.070 92.8);

  /* ---- 2. SEMANTICS ---- */
  --surface:        var(--c-cream);
  --surface-raised: var(--c-paper);
  --surface-alt:    var(--c-cream-2);
  --fg:             var(--c-ink);
  --fg-muted:       var(--c-ink-soft);
  --fg-inverse:     var(--c-cream);
  --edge:           var(--c-ink);

  /* type */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --tr-display: -0.03em;
  --tr-heading: -0.015em;
  --tr-label:    0.12em;
  --tr-button:   0.05em;
  --tr-nav:      0.02em;
  --tr-numeral: -0.05em;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.62rem, 1.42rem + 1vw, 2.15rem);
  --step-3:  clamp(2.05rem, 1.68rem + 1.85vw, 3rem);
  --step-4:  clamp(2.6rem, 1.95rem + 3.2vw, 4.2rem);
  --step-5:  clamp(3.1rem, 2rem + 5.4vw, 6rem);

  /* structure */
  --bd-hard: 3px solid var(--edge);
  --bd-hair: 1.5px solid var(--edge);
  --sh-x: -6px;  --sh-y: 6px;
  --gutter: clamp(1.15rem, 3vw, 3.5rem);
  --measure: 68ch;
  --wide: 82rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* button namespace */
  --btn-sh-x: -5px; --btn-sh-y: 5px;
  --btn-x: 0px;     --btn-y: 0px;
  --btn-lift-dur: 140ms;
  --btn-press-dur: 70ms;

  /* label (kitchen label sticker) namespace */
  --lbl-rot: -2.2deg;
  --lbl-fill: var(--c-yellow);
  --lbl-sh-x: -4px; --lbl-sh-y: 4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  letter-spacing:0.005em;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-green-deep);outline-offset:3px}

/* Visible to a screen reader only. The star row is decorative markup, so
   the rating still needs to be readable as text. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:var(--tr-display);
  margin:0;
  text-wrap:balance;
}
h3{font-weight:700;line-height:1.12;letter-spacing:var(--tr-heading)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
/* For a section whose content is one narrow column (the FAQ). Narrowing the
   shell centres the heading and the column together, so they stay aligned with
   each other instead of the column drifting away from its own heading. */
.shell--narrow{max-width:calc(58rem + var(--gutter) * 2)}
.prose{max-width:var(--measure)}
.stack>*+*{margin-top:var(--s,1.5rem)}

/* ---- SECTION SKELETON ---- */
section{position:relative}
.band{border-bottom:var(--bd-hard)}
.band--cream{background:var(--c-cream)}
.band--alt{background:var(--c-cream-2)}
.band--green{background:var(--c-green)}
.band--paper{background:var(--c-paper)}
.pad{padding-block:clamp(3.25rem,7vw,7rem)}

/* ---- KITCHEN LABEL (named system: carries the source's repeated section labels) ---- */
.lbl{
  display:inline-block;
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step--1);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  padding:0.45em 0.85em;
  background:var(--lbl-fill);
  color:var(--c-ink);
  border:var(--bd-hair);
  rotate:var(--lbl-rot);
  margin-bottom:1.4rem;
  box-shadow:var(--lbl-sh-x) var(--lbl-sh-y) 0 var(--c-ink);
}
.lbl--green{--lbl-fill:var(--c-green);--lbl-rot:1.8deg}
.lbl--pale{--lbl-fill:var(--c-yellow-pale);--lbl-rot:-1.4deg}
.lbl--paper{--lbl-fill:var(--c-paper);--lbl-rot:2.4deg}

/* ---- BUTTONS ---- */
.btn{
  --btn-fill:var(--c-yellow);
  position:relative;
  display:inline-flex;align-items:center;gap:0.55em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-0);
  letter-spacing:var(--tr-button);
  text-transform:uppercase;
  text-decoration:none;
  padding:0.85em 1.5em;
  min-height:3rem;
  background:var(--btn-fill);
  color:var(--c-ink);
  border:var(--bd-hard);
  cursor:pointer;
  translate:var(--btn-x) var(--btn-y);
  box-shadow:var(--btn-sh-x) var(--btn-sh-y) 0 var(--c-ink);
  transition:translate var(--btn-lift-dur) var(--ease-out-expo),
             box-shadow var(--btn-lift-dur) var(--ease-out-expo),
             background-color 160ms var(--ease-out-expo);
}
.btn:hover{--btn-x:1px;--btn-y:-2px;--btn-sh-x:-7px;--btn-sh-y:8px}
.btn:active{
  --btn-x:-4px;--btn-y:4px;--btn-sh-x:-1px;--btn-sh-y:1px;
  transition-duration:var(--btn-press-dur);
}
.btn--lg{font-size:var(--step-1);padding:1em 1.75em}
.btn--ghost{--btn-fill:transparent}
.btn--ghost:hover{--btn-fill:var(--c-yellow-pale)}
.btn--green{--btn-fill:var(--c-green)}
.btn--paper{--btn-fill:var(--c-paper)}
.btn-link{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-0);
  letter-spacing:var(--tr-button);
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  border-bottom:var(--bd-hair);
  padding-bottom:0.15em;
  transition:background-color 160ms var(--ease-out-expo);
}
.btn-link:hover{background:var(--c-yellow)}

/* Links inside running text keep the paragraph's own voice. .btn-link is
   uppercase display type, meant for a link standing on its own line; used
   mid-sentence it reads as a heading dropped into the paragraph. */
.prose a:not(.btn):not(.btn-link){
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--c-green-deep);
  text-underline-offset:0.18em;
  transition:background-color 160ms var(--ease-out-expo);
}
.prose a:not(.btn):not(.btn-link):hover{
  background:var(--c-yellow);
  text-decoration-color:var(--c-ink);
}


/* ---- FRAMED PHOTO ---- */
.shot{position:relative;isolation:isolate}
.shot img:not(.hero-flower){border:var(--bd-hard);width:100%;object-fit:cover}
.shot::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--c-ink);
  translate:calc(var(--sh-x) * 1.6) calc(var(--sh-y) * 1.6);
}

/* Square source photos (the about page ships three at 1:1) keep 1:1
   instead of the 5/4 the split media defaults to, so nothing is cropped.
   Both class names are needed: a single one ties on specificity with
   .split-media img, which is declared later and would win. */
.split-media.split-media--square img{aspect-ratio:1/1}

/* ---- CONTACT ----
   The three ways to reach the kitchen are the page, so they are set large
   and are the tap target themselves rather than a line of body copy with a
   link buried in it. ---- */
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
.contact-list li{border-bottom:var(--bd-hair);padding-bottom:clamp(1rem,2vw,1.4rem)}
.contact-label{
  display:block;margin-bottom:0.45rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-green-deep);
}
.contact-list a{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-1);line-height:1.25;
  letter-spacing:var(--tr-heading);
  text-decoration:none;border-bottom:2.5px solid transparent;
}
.contact-list a:hover{border-bottom-color:var(--c-green);background:var(--c-yellow)}
.hours h2{font-size:var(--step-1);margin-bottom:0.5rem}
.hours p{color:var(--fg-muted);margin:0}

.contact-form{
  display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(2rem,3.5vw,2.75rem);
}
.contact-form .field{margin:0;display:grid;gap:0.4rem}
.contact-form .field--wide{grid-column:1 / -1;justify-items:start}
.contact-form label{
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:var(--tr-label);text-transform:uppercase;
}
.contact-form input{
  font:inherit;padding:0.75em 0.9em;
  background:var(--c-paper);color:var(--fg);
  border:var(--bd-hard);border-radius:0;
}
@media (max-width:48rem){ .contact-form{grid-template-columns:1fr} }

/* ---- BLOG ARCHIVE ----
   Both covers are 16:9, so the cards share one ratio and the grid is even.
   The card is the link, like the review cards. ---- */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,3rem);margin-top:clamp(2.25rem,4vw,3.25rem)}
.post-card{display:block;text-decoration:none;color:inherit}
.post-card .shot img{aspect-ratio:16/9}
.post-card h3{font-size:var(--step-2);margin-top:1.4rem}
.post-card:hover h3{background:var(--c-yellow)}
.post-card .post-meta{margin-top:0.7rem}
.post-card p{color:var(--fg-muted);margin-top:0.9rem}
@media (max-width:60rem){ .posts{grid-template-columns:1fr} }

.post-meta{
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-green-deep);margin:0;
}

/* ---- ARTICLE ----
   A four thousand word piece with nine sections needs a way in, so the
   headings become a contents rail that stays with the reader. The body
   keeps a real reading measure rather than stretching to the shell, and
   the pair is centred: widening the prose to fill the band would be the
   opposite of what a long read needs. ---- */
.post{
  display:grid;justify-content:center;
  grid-template-columns:minmax(0,16rem) minmax(0,70ch);
  gap:clamp(2rem,5vw,4.5rem);
}
/* An article title is a sentence, not a slogan, so it gets the wider half
   of the hero and one step down from the home page's display size. */
.post-hero .shell{grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr)}
/* An article headline sits beside its own cover and reads like a headline,
   not a billboard, so it drops a step and loses the 16ch cap the shared
   .hero h1 imposes. Both class names are needed: a single one ties with
   .hero h1, which is declared later and was winning, which is why the
   title stayed at the poster size and at a third of its column. */
.hero.post-hero h1{font-size:var(--step-3);max-width:none}
@media (max-width:60rem){ .post-hero .shell{grid-template-columns:1fr} }

.post-toc-stick{position:sticky;top:7.5rem}
.post-toc-title{font-family:var(--font-display);font-weight:800;font-size:var(--step--1);letter-spacing:var(--tr-label);text-transform:uppercase;margin:0 0 0.9rem}
.post-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0.55rem;counter-reset:toc}
.post-toc li{counter-increment:toc;display:flex;gap:0.6em;font-size:var(--step--1);line-height:1.35}
.post-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-weight:800;color:var(--c-green-deep)}
.post-toc a{text-decoration:none;border-bottom:1.5px solid transparent}
.post-toc a:hover{border-bottom-color:var(--c-green)}

.post-body>*+*{margin-top:1.1em}
.post-body h2{font-size:var(--step-2);margin-top:clamp(2.5rem,5vw,4rem);scroll-margin-top:7rem}
.post-body h3{font-size:var(--step-1);margin-top:clamp(1.75rem,3vw,2.5rem)}
.post-body p{margin-bottom:0}
.post-body .checks{margin-top:1.25rem}
.post-figure{margin-top:clamp(2rem,4vw,3rem)}
.post-figure img{aspect-ratio:4/3}
.post-cta{
  margin-top:clamp(2rem,4vw,3rem);
  border:var(--bd-hard);box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-yellow-pale);
  padding:clamp(1.35rem,2.5vw,2rem);
}
.post-cta h3{font-size:var(--step-1);margin:0}
.post-cta p{color:var(--fg-muted);margin:0.6rem 0 1.2rem}
.post-cta .btn+.btn{margin-left:0.75rem}
@media (max-width:70rem){
  .post{grid-template-columns:1fr}
  .post-toc-stick{position:static}
  /* stacked, the body would otherwise stretch to the shell and lose its
     reading measure, which is the one thing a long read cannot give up */
  .post-body{max-width:70ch;margin-inline:auto}
}

/* ---- GOOGLE REVIEWS ----
   The whole card is the link, so there is no separate "open this one"
   affordance to hunt for, and the lift on hover is the same gesture the
   buttons use. Truncated quotes keep the ellipsis they arrive with: the
   rest of the review lives on Google, which is where the card goes. */
.greviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2.25rem,4vw,3.25rem)}
.greviews-col{display:grid;align-content:start;gap:clamp(1.25rem,2.5vw,2rem)}
.greview{
  display:block;text-decoration:none;color:inherit;
  border:var(--bd-hard);box-shadow:-5px 5px 0 var(--c-ink);
  background:var(--c-paper);
  padding:clamp(1.15rem,2vw,1.6rem);
  transition:translate 140ms var(--ease-out-expo),
             box-shadow 140ms var(--ease-out-expo),
             background-color 160ms var(--ease-out-expo);
}
.greview:hover{translate:1px -2px;box-shadow:-7px 8px 0 var(--c-ink);background:var(--c-yellow-pale)}
.greview .stars{display:block;font-size:var(--step-1);line-height:1}
.greview p{margin:0.85rem 0 0}
.greview-by{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.7rem;
  margin-top:1.15rem;padding-top:0.9rem;border-top:var(--bd-hair);
}
.greview-by b{font-family:var(--font-display);font-weight:800;font-size:var(--step-0)}
.greview-by span{font-size:var(--step--1);color:var(--fg-muted)}
.greviews-col:nth-child(2) .greview:first-child{background:var(--c-yellow-pale)}
.greviews-col:nth-child(3) .greview:first-child{background:var(--c-cream-2)}
@media (max-width:70rem){ .greviews{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:48rem){ .greviews{grid-template-columns:1fr} }

/* ---- TEAM ----
   All three portraits are 1:1, so the grid is three even columns and each
   photo keeps its own ratio. No card box around them: the framed
   photograph already carries the edge, and boxing it as well would flatten
   the hierarchy into one more grid of identical tiles. */
.team{
  display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.member .shot img{aspect-ratio:1/1}
.member h3{font-size:var(--step-1);margin-top:1.4rem}
.member .role{
  display:block;margin-top:0.4rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-green-deep);
}
.member p{color:var(--fg-muted);margin:0.9rem 0 0}
@media (max-width:70rem){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:48rem){ .team{grid-template-columns:1fr} }

/* Three paragraphs side by side. The source has no sub-headings here and
   none are invented, so the columns carry the paragraphs as they are. */
.prose-cols{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2rem,3.5vw,2.75rem);
}
.prose-cols p{color:var(--fg-muted);margin:0}
@media (max-width:70rem){ .prose-cols{grid-template-columns:1fr 1fr} }
@media (max-width:48rem){ .prose-cols{grid-template-columns:1fr} }

/* A statement band: no photograph, one colour, the copy set large. It is
   the breather between the photo-led sections. Two columns so the band is
   filled, and the paragraph stays in the body face: set in display bold it
   outshouted the heading above it. */
.statement{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,52ch);
  gap:clamp(2rem,5vw,4.5rem);
}
.statement h2{font-size:var(--step-3)}
.statement p{font-size:var(--step-1);line-height:1.5;margin:0}
@media (max-width:60rem){ .statement{grid-template-columns:1fr} }

/* This page's h1 runs long. One step down, plus a wider text column than
   the cutout needs, so the headline stops breaking at the hyphen in
   "Home-Cooked". The cutout is a 4:5 block and does not want half the page. */
.about-hero h1{font-size:var(--step-4)}
.about-hero .shell{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:60rem){ .about-hero .shell{grid-template-columns:1fr} }

/* ---- EMBEDDED VIDEO ----
   Same hard border and offset shadow as the framed photo, so an embed
   reads as one more object in the system and not as a pasted widget.
   The iframe's own width/height attributes are overridden by the
   aspect-ratio box, which keeps it responsive down to phone width. ---- */
.videoframe{
  width:100%;max-width:44rem;margin-inline:auto;
  border:var(--bd-hard);box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-ink);aspect-ratio:16/9;
}
.videoframe iframe{display:block;width:100%;height:100%;border:0}

/* ---- MAP FRAME ----
   Same treatment as the framed photo and the video embed, so a Google
   Maps iframe reads as one more object in the system. The aspect-ratio
   box overrides the iframe's own width/height attributes. ---- */
.mapbox{
  border:var(--bd-hard);box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  overflow:hidden;aspect-ratio:4/3;background:var(--c-cream-2);
}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ---- FLOWERS: decorative system ----
   Saturated yellow, the same as the buttons. Discipline rule:
   no flower sits next to a CTA, so it never competes with it. ---- */
.flowers{position:relative}
.flowers > .shell{position:relative;z-index:1}
.seam-host{position:relative}
.flower{
  position:absolute;z-index:0;pointer-events:none;
  width:auto;
}
.flower img{display:block;height:100%;width:auto}

/* garden strip: the flowers rest on the band's bottom edge */
/* the newsletter band reserves room for the garden;
   without this the tall flowers crossed behind the paragraph */
.news.flowers{padding-bottom:clamp(8.5rem,15vw,12rem)}
.garden{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  height:clamp(4.5rem,11vw,9rem);
  display:flex;align-items:flex-end;justify-content:space-around;
  padding-inline:clamp(0.5rem,3vw,3rem);
  pointer-events:none;
}
.garden img{display:block;width:auto}
.garden img:nth-child(odd){height:100%}
.garden img:nth-child(even){height:72%}
.garden img:nth-child(3n){height:86%}

/* seam flower: alone, no stem, straddling the section's top edge.
   It lives in the section BELOW the seam so it paints on top of
   the previous band. */
.seam-flower{
  --sf: clamp(6.5rem, 11vw, 10.5rem);
  position:absolute;z-index:2;pointer-events:none;
  width:var(--sf);height:var(--sf);
  top:calc(var(--sf) / -2);
}
.seam-flower img{display:block;width:100%;height:100%;
  animation:sf-spin 34s linear infinite}
@keyframes sf-spin{ from{rotate:0deg} to{rotate:360deg} }
@media (prefers-reduced-motion:reduce){ .seam-flower img{animation:none} }
@media (max-width:48rem){ .seam-flower{--sf:clamp(4.5rem,17vw,6.5rem)} }

/* on mobile nine flowers pile up on top of each other: keep five */
@media (max-width:48rem){
  .garden img:nth-child(2n){display:none}
  .garden{height:clamp(3.6rem,13vw,5.5rem);padding-inline:0.25rem}
}

/* =========================================================
   UTILITY BAR
   ========================================================= */
.util{
  background:var(--c-ink);color:var(--fg-inverse);
  font-size:var(--step--1);
  border-bottom:var(--bd-hard);
}
.util .shell{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1.5rem;
  padding-block:0.6rem;
}
.util a{text-decoration:none;border-bottom:1.5px solid transparent}
.util a:hover{border-bottom-color:var(--c-green)}
.util-rate{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;
}
.stars{color:var(--c-yellow);letter-spacing:0.08em}
.util-sep{margin-left:auto;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem}
.util-tel{font-family:var(--font-display);font-weight:700;color:var(--c-yellow)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--c-cream);
  border-bottom:var(--bd-hard);
}
.nav .shell{
  display:flex;align-items:center;gap:clamp(0.75rem,2vw,2rem);
  padding-block:0.85rem;
}
.brand{display:block;flex:0 0 auto;line-height:0}
.brand img{
  width:clamp(8.5rem,13vw,11rem);height:auto;
  /* the mark is already green and yellow, so it carries no frame */
}
.nav-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 1.15rem;
  margin-left:auto;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--step--1);letter-spacing:var(--tr-nav);
}
.nav-links a{text-decoration:none;padding:0.35em 0;border-bottom:2.5px solid transparent}
.nav-links a:hover,.nav-links a[aria-current]{border-bottom-color:var(--c-green)}
.nav-cta{flex:0 0 auto}

/* ---- NAV DROPDOWN (Delivery areas) ----
   No JavaScript: hover opens it on a pointer, :focus-within opens it from the
   keyboard, and below 60rem it flattens into an indented inline list, because
   hover does not exist on touch and the nav already wraps at that width. ---- */
.nav-drop{position:relative;display:inline-flex}
.nav-drop>a,.nav-drop>.nav-drop-toggle{display:inline-flex;align-items:center;gap:0.4em}
/* The About parent has no page of its own, so it is a toggle, not a link.
   A button rather than a bare span: it stays keyboard reachable, which is
   what opens the panel through :focus-within with no JavaScript. */
.nav-drop-toggle{
  font:inherit;color:inherit;letter-spacing:inherit;
  background:none;border:0;padding:0.35em 0;margin:0;cursor:pointer;
  border-bottom:2.5px solid transparent;
}
.nav-drop:hover>.nav-drop-toggle,.nav-drop:focus-within>.nav-drop-toggle{border-bottom-color:var(--c-green)}
.nav-drop>a::after,.nav-drop>.nav-drop-toggle::after{
  content:"";width:0.4em;height:0.4em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -0.15em;
}
/* invisible bridge across the gap, so the pointer can travel from the
   link down to the panel without the hover dropping out on the way */
.nav-drop::after{content:"";position:absolute;inset-inline:0;top:100%;height:0.95rem}
.nav-menu{
  position:absolute;left:0;top:calc(100% + 0.9rem);z-index:60;
  display:grid;min-width:15rem;
  background:var(--c-paper);
  border:var(--bd-hard);
  box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  padding:0.3rem;
  opacity:0;visibility:hidden;translate:0 -6px;
  transition:opacity 150ms var(--ease-out-expo),
             translate 150ms var(--ease-out-expo),
             visibility 150ms;
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;translate:0 0}
.nav-menu a{padding:0.55em 0.75em;border-bottom:0;white-space:nowrap}
.nav-menu a:hover,.nav-menu a[aria-current]{background:var(--c-yellow)}

@media (max-width:60rem){
  .nav-drop{display:block}
  .nav-drop::after{content:none}
  .nav-menu{
    position:static;opacity:1;visibility:visible;translate:none;
    display:flex;flex-wrap:wrap;gap:0 1.15rem;
    min-width:0;padding:0.2rem 0 0 0.9rem;
    background:none;border:0;box-shadow:none;
    border-left:var(--bd-hair);
  }
  .nav-menu a{padding:0.35em 0}
  .nav-menu a:hover,.nav-menu a[aria-current]{background:none;border-bottom:2.5px solid var(--c-green)}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--c-cream);border-bottom:var(--bd-hard);overflow:hidden}
.hero .shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block:clamp(3rem,6vw,6rem);
}
.hero h1{font-size:var(--step-5);max-width:16ch}
.hero-tag{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-1);line-height:1.15;
  letter-spacing:var(--tr-heading);text-transform:uppercase;
  background:var(--c-yellow);
  border:var(--bd-hair);
  padding:0.35em 0.6em;
  box-shadow:-4px 4px 0 var(--c-ink);
  max-width:24ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.6rem 1.5rem;align-items:center}
.hero-shot{position:relative}
.hero-shot img{aspect-ratio:4/5}
.seal{
  position:absolute;
  right:-1.1rem;bottom:-1.4rem;
  z-index:2;
  width:clamp(6.5rem,12vw,9.5rem);
  aspect-ratio:1;
  display:grid;place-content:center;
  text-align:center;
  background:var(--c-green);
  color:var(--c-ink);
  border:var(--bd-hard);
  border-radius:999px;
  rotate:-9deg;
  box-shadow:-5px 5px 0 var(--c-ink);
  font-family:var(--font-display);font-weight:800;
  line-height:1;
}
.hero-flower{
  position:absolute;z-index:2;
  left:-1.6rem;top:-1.8rem;
  width:clamp(3.5rem,7vw,5.5rem);
  rotate:-12deg;
}
.seal b{display:block;font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:var(--tr-numeral)}
.seal span{font-size:0.6rem;letter-spacing:var(--tr-label);text-transform:uppercase;margin-top:0.3em;display:block}

/* =========================================================
   HOW IT WORKS: steps
   ========================================================= */
.section-head{max-width:46ch}
.section-head h2{font-size:var(--step-3)}
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.step{
  position:relative;
  border:var(--bd-hard);
  box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-paper);
  padding:1.4rem 1.25rem 1.25rem;
  overflow:hidden;
  min-height:9.5rem;
  display:flex;align-items:flex-end;
}

.step-num{
  position:absolute;top:-0.32em;right:0.1em;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(5rem,9vw,7.5rem);
  letter-spacing:var(--tr-numeral);
  line-height:1;
  color:color-mix(in oklab, var(--c-ink) 12%, transparent);
  pointer-events:none;
}
.step-word{
  position:relative;
  font-family:var(--font-display);font-weight:800;
  font-size:var(--step-2);
  letter-spacing:var(--tr-heading);
  text-transform:uppercase;
}
.step:nth-child(2){background:var(--c-yellow-pale)}
.step:nth-child(3){background:var(--c-yellow)}
.step:nth-child(4){background:var(--c-cream)}

/* =========================================================
   TRUST: three claims, stencil numerals inside the phrase
   ========================================================= */
.claims{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.claim{
  border:var(--bd-hard);
  box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-paper);
  padding:clamp(1.25rem,2.2vw,1.85rem);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-1);line-height:1.1;
  letter-spacing:var(--tr-heading);
  position:relative;
}

.claim em{
  font-style:normal;
  display:inline-block;
  font-size:2.05em;
  font-weight:800;
  letter-spacing:var(--tr-numeral);
  line-height:0.85;
  vertical-align:-0.12em;
}
.claim:nth-child(2){background:var(--c-green)}
.claim:nth-child(3){background:var(--c-yellow)}

/* =========================================================
   SPLIT (Colleen / on-demand / story)
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.split--flip>.split-media{order:-1}
.split-media img{aspect-ratio:5/4}
/* A portrait source (Colleen's is 9:16) overhangs the text column badly
   at any fixed ratio. Side by side it stretches to the row height instead,
   so the frame ends flush with the copy beside it and the layout keeps its
   line. The crop is anchored near the top because a centred crop of a 9:16
   original cuts off the top of the head. Stacked, there is no row to match,
   so it falls back to a square. */
.split-media--portrait img{aspect-ratio:4/5;object-position:50% 0}
@media (min-width:60.01rem){
  .split-media--portrait{align-self:stretch;min-height:0}
  /* Absolute, so the photo does not size the grid row: the row is set by
     the copy, the frame stretches to it, and the photo fills the frame.
     Left in flow it would feed its own 9:16 height back into the row. */
  .split-media--portrait img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}
.split h2{font-size:var(--step-3)}

/* =========================================================
   REVIEWS: deliberately unequal, not a card grid
   ========================================================= */
.reviews{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.reviews-col{display:grid;align-content:start;gap:clamp(1.25rem,2.5vw,2rem)}
.review{
  border:var(--bd-hard);
  box-shadow:-5px 5px 0 var(--c-ink);
  background:var(--c-paper);
  padding:clamp(1.15rem,2vw,1.6rem);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
  position:relative;
}

.review p{font-size:var(--step-0);margin-bottom:0.9em}
.review--big p{font-size:var(--step-1);line-height:1.35;font-weight:500}
.review--pale{background:var(--c-yellow-pale)}
.review--cream{background:var(--c-cream)}
.review-by{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  font-size:var(--step--1);
  display:flex;align-items:center;gap:0.6rem;
}
.review-by .stars{color:var(--c-green-deep)}

/* =========================================================
   WHY: asymmetric feature layout, not four equal cards
   ========================================================= */
.whys{
  display:grid;
  align-items:start;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.why{
  grid-column:span 2;
  border:var(--bd-hard);
  box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-paper);
  padding:clamp(1.25rem,2.2vw,1.85rem);
  position:relative;
}

.why h3{font-size:var(--step-1);margin-bottom:0.6em}
.why p{color:var(--fg-muted);margin:0}
.why--wide{grid-column:span 4}
.why--shot{
  grid-column:span 2;padding:0;border:none;background:none;box-shadow:none;
  display:flex;align-self:stretch;
}
.why--shot img{box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink)}
.why--shot img{border:var(--bd-hard);width:100%;height:100%;min-height:13rem;object-fit:cover;object-position:50% 60%}
.why--pale{background:var(--c-yellow-pale)}
.why--cream{background:var(--c-cream)}

/* =========================================================
   OFFER: drenched yellow
   ========================================================= */
.offer{background:var(--c-yellow);border-bottom:var(--bd-hard);text-align:center}
.offer-kick{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  font-size:var(--step-0);
}
.offer h2{font-size:var(--step-4);margin:0.4em auto 1.1em;max-width:24ch}
.offer-terms{font-size:var(--step--1);margin-top:1.5rem}
.offer-terms a{font-weight:700}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:58rem;margin-top:clamp(2rem,3.5vw,2.75rem);border-top:var(--bd-hard)}
.faq details{border-bottom:var(--bd-hard);background:var(--c-paper)}
.faq details[open]{background:var(--c-yellow-pale)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem clamp(1rem,2vw,1.5rem);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-1);letter-spacing:var(--tr-heading);
  line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  flex:0 0 auto;
  font-size:1.4em;line-height:1;
  width:1.6em;height:1.6em;
  display:grid;place-content:center;
  border:var(--bd-hair);
  background:var(--c-yellow);
}
.faq details[open] summary::after{content:"–";background:var(--c-green)}
.faq-body{padding:0 clamp(1rem,2vw,1.5rem) 1.35rem;max-width:var(--measure)}

/* =========================================================
   DELIVERY AREAS
   ========================================================= */
.areas h2{font-size:var(--step-2)}
.areas-sub{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--step-3);letter-spacing:var(--tr-display);
  line-height:1.05;margin:0.35em 0 0;max-width:30ch;
  text-transform:uppercase;
}
.pills{
  display:flex;flex-wrap:wrap;gap:0.75rem;
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;list-style:none;
}
.pill{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-0);letter-spacing:var(--tr-nav);
  text-decoration:none;
  padding:0.55em 1.1em;
  background:var(--c-paper);
  border:var(--bd-hard);
  border-radius:999px;
  box-shadow:-3px 3px 0 var(--c-ink);
  transition:background-color 160ms var(--ease-out-expo),
             box-shadow 160ms var(--ease-out-expo),
             translate 160ms var(--ease-out-expo);
}
.pill:hover{background:var(--c-green);translate:0 -3px;box-shadow:-4px 5px 0 var(--c-ink)}
.areas-note{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
}
.areas-note p{max-width:46ch;margin:0}

/* =========================================================
   SERVICE AREA PAGES
   Shared by the overview and by every town page, so they live here
   rather than being repeated in each page's inline block.
   ========================================================= */

/* hero link row, also used by the how-it-works page */
/* A town page's tagline is a full sentence, too long for the yellow
   .hero-tag block used on the home page, where it is four words. */
.hero-lead{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-1);line-height:1.2;
  letter-spacing:var(--tr-heading);
  color:var(--fg-muted);max-width:28ch;margin:0;
}

.hero-links{display:flex;flex-wrap:wrap;gap:0.7rem 1.8rem;margin-top:0.3rem}
.hero-links a{
  display:inline-flex;align-items:baseline;gap:0.4em;
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:var(--tr-nav);text-transform:uppercase;text-decoration:none;
  border-bottom:var(--bd-hair);padding-bottom:0.1em;
}
.hero-links a:hover{background:var(--c-yellow)}

/* ---- EDITORIAL RAIL ----
   Asymmetric section skeleton for long prose. The heading takes a narrow
   left column and sticks while the body scrolls past it, which removes the
   dead half these sections used to carry and gives the heading real weight.
   The sticky element has to be a child of the grid item, not the item
   itself: a stretched grid item is already the full row height, so it has
   nowhere to travel. ---- */
.rail{
  display:grid;
  /* the body column is sized by its own reading measure and the heading
     takes whatever is left, so the two together fill the shell exactly
     instead of the body hitting a max-width and leaving a strip behind */
  grid-template-columns:minmax(0,1fr) minmax(0,62ch);
  gap:clamp(2rem,5vw,4.5rem);
}
.rail-head-stick{position:sticky;top:7.5rem}
.rail-body .prose{max-width:none}

/* two subsections side by side inside a rail body */
.subgrid{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.subgrid h3{font-size:var(--step-1);margin-bottom:0.5rem}
.subgrid p{color:var(--fg-muted);margin:0}

/* the ZIP codes are one sentence and one number, so they get a strip
   rather than a full band of their own */
.ziplane{padding-block:clamp(1.75rem,3vw,2.75rem)}
.zipstrip{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(1.25rem,3vw,2.5rem);
}
.zipstrip h2{font-size:var(--step-1)}
.zipstrip p{margin:0.45rem 0 0;color:var(--fg-muted);max-width:52ch}
.zipstrip .zips{margin:0}

@media (max-width:60rem){
  .rail{grid-template-columns:1fr}
  .rail-head-stick{position:static}
  .rail-body{max-width:none}
}

/* ticked list: reasons to order, core services, what you get */
.checks{
  list-style:none;margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;padding:0;
  display:grid;gap:0.7rem;
  grid-template-columns:repeat(var(--cols,auto-fit),minmax(0,1fr));
}
.checks li{
  display:flex;align-items:flex-start;gap:0.7em;
  border:var(--bd-hair);background:var(--c-paper);
  padding:0.75em 0.9em;
}
.checks li::before{
  content:"";flex:0 0 auto;
  width:0.5em;height:0.85em;margin-top:0.15em;
  border-right:3px solid var(--c-green-deep);
  border-bottom:3px solid var(--c-green-deep);
  rotate:45deg;
}

/* promise cards: a bold term followed by its explanation */
.promises{
  display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  margin-top:clamp(2rem,3.5vw,2.75rem);
}
.promise{
  border:var(--bd-hard);box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-paper);padding:clamp(1.25rem,2.2vw,1.85rem);
}
.promise:nth-child(even){background:var(--c-yellow-pale)}
.promise h3{font-size:var(--step-1);margin-bottom:0.5rem}
.promise p{color:var(--fg-muted);margin:0}

/* ZIP codes: a short row of stencilled numerals */
.zips{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:1.5rem;padding:0;list-style:none}
.zips li{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--step-2);letter-spacing:var(--tr-numeral);
  border:var(--bd-hard);box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  background:var(--c-yellow);padding:0.35em 0.7em;
}

/* sign-up note: Colleen's photo, her invitation and the button */
.signote{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
  background:var(--c-yellow-pale);border:var(--bd-hard);
  box-shadow:var(--sh-x) var(--sh-y) 0 var(--c-ink);
  padding:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(1.5rem,3vw,2rem);
}
.signote img{
  width:clamp(6rem,10vw,8rem);height:clamp(6rem,10vw,8rem);
  border-radius:50%;object-fit:cover;border:var(--bd-hard);flex:0 0 auto;
}
.signote .prose{flex:1 1 20rem;margin:0}
.signote .btn{flex:0 0 auto}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.news{background:var(--c-green);border-bottom:var(--bd-hard)}
.news .shell{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
.news-kick{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;font-size:var(--step--1);
}
.news h2{font-size:var(--step-3);margin:0.3em 0 0.8em;text-transform:uppercase}
.news form{display:grid;gap:1rem;justify-items:start}
.news label{justify-self:start}
.news label{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;font-size:var(--step--1);
}
.news input{
  font-family:var(--font-body);font-size:var(--step-1);
  padding:0.75em 0.85em;
  background:var(--c-paper);color:var(--c-ink);
  border:var(--bd-hard);
  width:100%;
  box-shadow:-5px 5px 0 var(--c-ink);
}
.news input::placeholder{color:var(--fg-muted)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--c-ink);color:var(--fg-inverse)}
.foot a{text-decoration:none;border-bottom:1.5px solid transparent}
.foot a:hover{border-bottom-color:var(--c-green)}
.foot-top{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--step-2);letter-spacing:var(--tr-display);
  line-height:1.05;max-width:34ch;
  padding-bottom:clamp(2rem,4vw,3rem);
}
.foot-grid{
  border-top:1.5px solid color-mix(in oklab, var(--c-cream) 25%, transparent);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:clamp(2rem,3.5vw,3rem);
  padding-top:clamp(2rem,4vw,3rem);
}
.foot h2,.foot h3{
  font-size:var(--step--1);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-green);
  margin-bottom:0.9rem;
}
.foot p,.foot li{font-size:var(--step--1);line-height:1.65}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.foot-social{display:flex;gap:0.6rem;margin-top:1rem;flex-wrap:wrap}
.foot-social a{
  font-family:var(--font-display);font-weight:700;font-size:0.72rem;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  padding:0.5em 0.8em;border:1.5px solid var(--c-cream);border-bottom-width:1.5px;
}
.foot-social a:hover{background:var(--c-green);color:var(--c-ink);border-color:var(--c-green)}
.foot-links{display:grid;gap:0.9rem}
.foot-links .btn{font-size:var(--step--1);padding:0.7em 1em;min-height:0}
.foot-legal{
  padding-block:1.25rem;
  border-top:1.5px solid color-mix(in oklab, var(--c-cream) 25%, transparent);
  font-size:var(--step--1);
}

/* =========================================================
   ENTRANCE MOTION
   ========================================================= */
.js .reveal{opacity:0;translate:0 18px}
.js .reveal.in{
  opacity:1;translate:0 0;
  transition:opacity 620ms var(--ease-out-expo),
             translate 620ms var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:60rem){
  .hero .shell,.split,.news .shell{grid-template-columns:1fr}
  .split--flip>.split-media{order:0}
  .hero-shot img{aspect-ratio:5/4}
  .whys{grid-template-columns:1fr}
  .why,.why--wide,.why--shot{grid-column:auto}
  .why--shot img{aspect-ratio:16/9}
  .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:48rem){
  :root{--sh-x:-4px;--sh-y:4px;--btn-sh-x:-4px;--btn-sh-y:4px;--bd-hard:2.5px solid var(--edge)}
  .nav .shell{flex-wrap:wrap}
  .nav-links{order:3;width:100%;margin-left:0;padding-top:0.6rem;border-top:var(--bd-hair)}
  .nav-cta{margin-left:auto}
  .util-sep{margin-left:0;width:100%}
  .reviews{grid-template-columns:1fr}
  .hero h1{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;translate:none}
  .btn:hover,.btn:active,.pill:hover{translate:none}
}

/* The per-list column count is set inline as --cols, and an inline style
   beats a stylesheet rule, so these override grid-template-columns itself
   rather than the variable. Overriding --cols here would never apply. */
@media (max-width:75rem){ .checks{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:60rem){ .checks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:40rem){ .checks{grid-template-columns:1fr} }