/* Mamaw Knipp's Bakery — one page.
   Direction lives in DIRECTION.md. The short version: warm paper with real grain,
   her ink, her line art, her photographs bleeding off the edge, and a hairline
   under everything the way a recipe card has. Nothing on this page runs on a clock. */

@import "fonts.css";

:root{
  /* sampled off the business card and the logo, not chosen */
  --paper:#FBF3EA;
  --card:#F5E5D3;
  --tan:#EBCFB9;
  --cocoa:#2A1A11;
  --cocoa-2:#3A2618;
  --ink:#4A2C1C;
  --ink-soft:#7A5B45;
  --ink-faint:#A9846A;
  --line:rgba(74,44,28,.16);
  --line-soft:rgba(74,44,28,.09);

  /* orange is HEADING-ONLY on paper (4.35:1). Small text uses --orange-ink. */
  --orange:#C0500F;
  --orange-ink:#A34209;
  --orange-bright:#E05C00;

  /* her cakes supply the accents */
  --butter:#EFC968;
  --blush:#E7A5A0;
  --sage:#9FB18E;
  --navy:#33506E;

  --wrap:1180px;
  --gut:clamp(20px,4vw,56px);
  --r:14px;
  --shadow:0 18px 40px -22px rgba(74,44,28,.45), 0 3px 10px -6px rgba(74,44,28,.30);

  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-text:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Caveat","Bradley Hand",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 clamp(16px,1.02vw + 12px,18.5px)/1.65 var(--f-text);
  font-variation-settings:"opsz" 11;
  overflow-x:hidden;
}
/* the paper itself — cold-press watercolour tooth, 260px seamless tile from
   gen/paint.py. It replaced a fine film grain that read as a JPEG artefact
   rather than as paper. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url(../img/paper-tooth.png) repeat; background-size:260px 260px;
  opacity:.115; mix-blend-mode:multiply;
}
main,header,footer{position:relative; z-index:1}
img{max-width:100%; display:block}
a{color:var(--orange-ink)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{
  font-family:var(--f-disp); font-weight:600; line-height:1.06;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 90;
  margin:0 0 .5em; letter-spacing:-.012em;
}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:clamp(21px,1.7vw,27px); line-height:1.18}
p{margin:0 0 1.05em; max-width:62ch}
.lede{font-size:clamp(18px,1.25vw,21px); color:var(--ink-soft); line-height:1.6}
.hand{font-family:var(--f-hand); font-size:1.32em; line-height:1.3; color:var(--orange-ink)}
.cap{font-family:var(--f-disp); font-style:italic; font-size:15px; color:var(--ink-soft);
     font-variation-settings:"SOFT" 80,"opsz" 20; line-height:1.45; margin:.7rem 0 0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto}
.wrap--wide{width:min(1420px,100% - var(--gut)*2)}
section{padding:clamp(64px,7.5vw,120px) 0; position:relative; overflow-x:clip}

/* the brand marks, cut off the business card and painted with mask-image */
.mark{display:block; background:var(--orange);
      -webkit-mask:var(--m) no-repeat center/contain; mask:var(--m) no-repeat center/contain}
.mark--word{--m:url(../brand/wordmark.png); aspect-ratio:1520/220}
.mark--mamaw{--m:url(../brand/mamaw.png);   aspect-ratio:375/642}
.mark--apron{--m:url(../brand/apron.png);   aspect-ratio:360/504}
.mark--stand{--m:url(../brand/cakestand.png);aspect-ratio:720/845}
.mark--sig  {--m:url(../brand/signature.png);aspect-ratio:652/147}

/* ⭐ Every colour change on this page is a brush edge, not a ruled line. A strip of
   the incoming colour, masked with a generated dry-brush stroke, sits in normal flow
   between the two sections — so the section needs no overflow tricks and the page
   behind shows through the torn part. Three stroke variants, rotated, so no two joins
   on the page are the same.

   ⛔ The mask URL is set HERE, in a class, and never passed in through a custom
   property. A url() inside a custom property resolves against the STYLESHEET, not the
   page that set it — an inline `--edge-m:url(assets/img/…)` silently became
   `/assets/css/assets/img/…`, 404'd, and every edge rendered fully transparent.
   Only the colour travels through a custom property. */
/* When the section ABOVE the join is not the page's own cream, the torn part must
   show that colour and not the paper underneath — otherwise the join reads as three
   colours with a gap in the middle. .edgewrap carries the outgoing colour, unmasked,
   behind the masked strip. */
.edgewrap{position:relative; z-index:3}
.edgewrap .edge{z-index:auto}
.edge{height:clamp(24px,3vw,42px); margin-bottom:-1px; position:relative; z-index:3;
      background:var(--edge-c,var(--cocoa)); pointer-events:none;
      -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
      -webkit-mask-position:bottom; mask-position:bottom;
      -webkit-mask-size:100% 100%; mask-size:100% 100%}
.edge--0{-webkit-mask-image:url(../img/paint-edge-0.png); mask-image:url(../img/paint-edge-0.png)}
.edge--1{-webkit-mask-image:url(../img/paint-edge-1.png); mask-image:url(../img/paint-edge-1.png)}
.edge--2{-webkit-mask-image:url(../img/paint-edge-2.png); mask-image:url(../img/paint-edge-2.png)}
/* the same stroke turned over, for the underside of a band */
.edge--up{margin:-1px 0 0; transform:scaleY(-1)}

/* a soft watercolour bloom. Low opacity, behind everything, never near small text. */
.wash{position:absolute; pointer-events:none; z-index:-1; background:var(--w-c,var(--blush));
      -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
      -webkit-mask-position:center; mask-position:center;
      -webkit-mask-size:contain; mask-size:contain}
.wash--0{-webkit-mask-image:url(../img/wash-0.png); mask-image:url(../img/wash-0.png)}
.wash--1{-webkit-mask-image:url(../img/wash-1.png); mask-image:url(../img/wash-1.png)}
.wash--2{-webkit-mask-image:url(../img/wash-2.png); mask-image:url(../img/wash-2.png)}

/* ⭐ Ruled like a recipe card. Faint hand-drawn lines across the cream sections —
   seamless both ways, so they run unbroken down the whole page. z-index:-1 keeps
   them above the section's own ground and under every word. */
#bakes::after,#wall::after,#how::after,#faq::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--ink); opacity:.052;
  -webkit-mask:url(../img/paint-lines.png) repeat top left/1400px 184px;
          mask:url(../img/paint-lines.png) repeat top left/1400px 184px;
}
/* a dusting of flour over the tinted grounds */
.hero::after,.story::after,.order::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#fffdf8; opacity:.5;
  -webkit-mask:url(../img/flour.png) repeat top left/340px 340px;
          mask:url(../img/flour.png) repeat top left/340px 340px;
}

/* header */
.hdr{position:sticky; top:0; z-index:60; background:rgba(251,243,234,.93);
     backdrop-filter:saturate(1.2) blur(9px); border-bottom:1px solid transparent;
     transition:border-color .25s, box-shadow .25s}
.hdr.is-stuck{border-bottom-color:var(--line-soft); box-shadow:0 10px 26px -24px rgba(74,44,28,.7)}
.hdr__in{display:flex; align-items:center; gap:clamp(14px,2.5vw,34px); padding:13px 0}
.hdr__mark{flex:0 0 auto; width:clamp(148px,15vw,214px); text-decoration:none}
.hdr__nav{margin-left:auto; display:flex; align-items:center; gap:clamp(12px,1.9vw,28px)}
/* ⚠️ `:not(.btn)` is load-bearing. `.hdr__nav a` is (0,1,1) and `.btn--go` is only
   (0,1,0), so without it the nav rule WINS over the button: the CTA lost its padding
   to `5px 1px` and its white label to var(--ink), and rendered as dark text jammed
   against the edges of an orange pill. It also grew the hover underline INSIDE it. */
.hdr__nav a:not(.btn){font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none;
            position:relative; padding:5px 1px; white-space:nowrap}
.hdr__nav a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:1px; height:2px;
                   background:var(--orange); transition:right .28s ease}
.hdr__nav a:not(.btn):hover::after,.hdr__nav a:not(.btn):focus-visible::after{right:0}
/* the header CTA — roomier than the in-page small buttons, and explicitly white */
.hdr__nav .btn--go{padding:12px 24px; font-size:15px; color:#FFF8F2; white-space:nowrap}
.hdr__tel{font-weight:700; color:var(--orange-ink); text-decoration:none; font-size:15.5px; white-space:nowrap}
.hdr__burger{display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line);
             background:transparent; border-radius:10px; padding:10px 9px; cursor:pointer}
.hdr__burger span{display:block; height:2px; background:var(--ink); border-radius:2px;
                  transition:transform .28s, opacity .2s}
.hdr__burger span+span{margin-top:5px}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{display:inline-flex; align-items:center; gap:.55em; font:700 16px/1 var(--f-text);
     padding:15px 25px; border-radius:999px; text-decoration:none; border:1.5px solid transparent;
     cursor:pointer; white-space:nowrap; transition:transform .16s ease, background .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn--go{background:var(--orange); color:#fff8f2; box-shadow:0 12px 24px -14px rgba(192,80,15,.9)}
.btn--go:hover{background:#a94509}
.btn--ghost{border-color:rgba(74,44,28,.34); color:var(--ink); background:transparent}
.btn--ghost:hover{background:rgba(74,44,28,.06)}
.btn--light{background:var(--butter); color:#3A2312}
.btn--light:hover{background:#f4d47c}
.btn--sm{padding:11px 18px; font-size:15px}

/* hero */
.hero{background:var(--tan); padding:clamp(46px,5.5vw,74px) 0 0; overflow:hidden}
.hero__in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
          gap:clamp(24px,4vw,64px); align-items:end}
.hero__txt{padding-bottom:clamp(52px,6vw,92px)}
.hero__place{font-family:var(--f-hand); font-size:23px; color:#8A3D0B; margin:0 0 14px;
             display:flex; align-items:center; gap:10px}
.hero__place::after{content:""; flex:0 0 76px; height:9px; background:#8A3D0B; opacity:.55;
  -webkit-mask:url(../img/paint-rule-0.png) no-repeat center/100% 100%;
          mask:url(../img/paint-rule-0.png) no-repeat center/100% 100%}
.hero__word{width:min(100%,520px); background:#B94A0C}
.hero__tag{font-family:var(--f-disp); font-style:italic; font-weight:500;
           font-size:clamp(20px,1.9vw,27px); font-variation-settings:"SOFT" 90,"opsz" 40;
           color:#5A3520; line-height:1.28; margin:20px 0 18px; max-width:19ch}
.hero__txt p{color:#5F3A24; max-width:44ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.hero__note{margin-top:20px; font-size:15px; color:#7A4C2E}
.hero__note a{color:#8A3D0B; font-weight:700}

.hero__pics{position:relative; padding-bottom:clamp(30px,4vw,54px); min-height:340px}
/* a warm ground, not white: the rotated photo leaves a subpixel seam at its edge
   and against #fff that seam reads as a bright hairline down the picture */
.hero__pic{border-radius:var(--r); overflow:hidden; background:#7C5B3E;
           box-shadow:0 26px 54px -26px rgba(60,32,16,.62), 0 4px 12px -8px rgba(60,32,16,.4)}
.hero__pic img{width:100%; height:100%; object-fit:cover}
.hero__pic--main{width:min(100%,560px); margin-left:auto; transform:rotate(-1.4deg); border:9px solid #fffaf3}
.hero__pic--in{position:absolute; left:0; bottom:0; width:min(42%,208px); transform:rotate(4.5deg);
               border:7px solid #fffaf3}
.hero__scrap{position:absolute; left:min(46%,244px); bottom:6px; width:clamp(76px,8vw,104px);
             background:#B94A0C; opacity:.85}

/* the cocoa ribbon */
.ribbon{background:var(--cocoa); color:#F0DCC9; padding:0; overflow:hidden}
.ribbon__in{display:flex; gap:clamp(20px,3.4vw,44px); align-items:center; justify-content:center;
            flex-wrap:wrap; padding:20px var(--gut); text-align:center}
.ribbon b{font-family:var(--f-disp); font-weight:600; font-variation-settings:"SOFT" 70,"opsz" 20;
          font-size:17px; color:#FFF3E4}
.ribbon span{font-size:15.5px; color:#C9AE95}
.ribbon i{color:var(--butter); font-style:normal}
.ribbon__sep{color:#6B5240}

/* section heads */
.head{margin-bottom:clamp(34px,4vw,56px)}
.head__kick{font-family:var(--f-hand); font-size:24px; color:var(--orange-ink); margin:0 0 4px}
.head h2{max-width:16ch}
.head p{color:var(--ink-soft)}
.head--split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
             gap:clamp(18px,4vw,60px); align-items:end}
.head--split p{margin-bottom:.2em}

/* what she bakes — numbered editorial entries, alternating */
.bake{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4.4vw,72px);
      align-items:center; padding:clamp(34px,4vw,54px) 0; position:relative}
/* a dry-brush stroke instead of a 1px rule */
.bake::before{content:""; position:absolute; left:0; right:0; top:0; height:9px; opacity:.26;
  background:var(--ink); pointer-events:none;
  -webkit-mask:url(../img/paint-rule-1.png) no-repeat center/100% 100%;
          mask:url(../img/paint-rule-1.png) no-repeat center/100% 100%}
.bake:first-of-type::before{display:none}
.bake--flip .bake__pic{order:-1}
.bake__n{font-family:var(--f-disp); font-size:15px; font-weight:700; letter-spacing:.08em;
         color:var(--orange-ink); display:block; margin-bottom:10px; font-variation-settings:"opsz" 12}
.bake__txt h3{margin-bottom:.45em}
.bake__txt p{color:var(--ink-soft); margin-bottom:.8em}
.bake__list{list-style:none; padding:0; margin:16px 0 0; max-width:44ch}
.bake__list li{padding:9px 0 9px 22px; border-top:1px solid var(--line-soft); font-size:16px; position:relative}
.bake__list li::before{content:""; position:absolute; left:2px; top:17px; width:7px; height:7px;
                       border-radius:50%; background:var(--orange); opacity:.72}
.bake__pic{position:relative}
.bake__pic img{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow)}
.bake__pic--pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.bake__pic--pair img:last-child{margin-top:34px}

/* celebration band.
   ⚠️ This was a full-bleed background image first and it was wrong: every cake she
   photographs is PORTRAIT, so covering a 1440×640 band cropped a 25th-anniversary
   cake down to two pearl numerals and read as an abstract blur. The photo now gets
   a tall column of its own and is shown at the shape it was taken in. */
.band{background:var(--cocoa); color:#FFF4E7; padding:0; overflow:hidden}
.band__in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); align-items:center;
          width:100%; max-width:none}
.band__txt{padding:clamp(52px,7vw,104px) clamp(28px,4.5vw,72px) clamp(52px,7vw,104px)
           max(var(--gut),calc((100vw - var(--wrap))/2))}
.band__pic{position:relative; align-self:stretch; min-height:min(84vh,700px)}
.band__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%}
/* feathered into the cocoa so it reads as part of the page, not a pasted rectangle */
.band__pic::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,var(--cocoa) 0%,rgba(42,26,17,.55) 9%,rgba(42,26,17,0) 26%)}
.band h2{color:#FFF4E7; max-width:15ch}
.band p{color:#EBD6C2; max-width:52ch}
.band .cap{color:#C9AE95}
.band__kick{font-family:var(--f-hand); font-size:25px; color:var(--butter); margin:0 0 6px}

/* cookie club — the dark ground */
.club{background:var(--cocoa); color:#F2E1D0; overflow:hidden}
.club__in{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
          gap:clamp(28px,4.5vw,74px); align-items:center}
.club{padding-block:0}
.club__in>*:last-child{padding-block:clamp(56px,7vw,104px)}
.club h2{color:#FFF4E7}
.club .head__kick{color:var(--butter)}
.club p{color:#CDB29A}
/* bleeds off the left edge of the viewport — a rectangle floating in the middle of
   a dark band is the thing that made this section read as a slide */
.club__pic{position:relative; overflow:hidden; align-self:stretch;
           margin-left:calc((100vw - min(1420px,100vw - var(--gut)*2))/-2);
           border-radius:0 var(--r) var(--r) 0; min-height:min(72vh,600px)}
.club__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%}
.club__tiers{list-style:none; margin:26px 0 0; padding:0}
.club__tiers li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
                padding:18px 0; border-top:1px solid rgba(242,225,208,.16)}
.club__tiers li:last-child{border-bottom:1px solid rgba(242,225,208,.16)}
.club__tiers b{font-family:var(--f-disp); font-size:19px; font-weight:600; color:var(--butter);
               font-variation-settings:"SOFT" 70,"opsz" 20; white-space:nowrap}
.club__tiers span{font-size:16px; color:#CDB29A}
.club__cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px}
.club__cta .hand{color:#C9AE95; font-size:20px}

/* the wall */
/* ⚠️ Was `columns:4 220px`. CSS multicol BALANCES by height, so nine square photos
   settled into three columns of three and left the fourth column empty — the count
   silently decides the layout. Every image here is square and the same size, so a
   grid is both simpler and immune to that. */
.wall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.wall figure{margin:0; border-radius:11px; overflow:hidden;
             box-shadow:0 12px 26px -18px rgba(74,44,28,.5); background:#fff; position:relative}
.wall img{width:100%; height:auto; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wall figure:hover img{transform:scale(1.035)}
.wall figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  font-family:var(--f-hand); font-size:19px; color:#FFF3E4; opacity:0; transition:opacity .3s;
  background:linear-gradient(to top,rgba(30,16,8,.82),transparent)}
.wall figure:hover figcaption,.wall figure:focus-within figcaption{opacity:1}
.wall__more{text-align:center; margin-top:30px}

/* mamaw's story */
.story{background:var(--card)}
.story__in{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
           gap:clamp(26px,4.5vw,70px); align-items:center}

/* ⭐ A photograph of a person is not a texture, so it is not bled off the edge and
   cropped to fit a slot like the cakes are. It is printed: a white border, a real
   shadow, sitting very slightly off square the way a print does when it is put down.
   The ONE picture of Mamaw is shown whole. Nothing here crops a face. */
.snap{margin:0; background:#FFFDF9; padding:11px 11px 0; border-radius:3px;
      box-shadow:0 22px 44px -24px rgba(74,44,28,.55), 0 3px 9px -5px rgba(74,44,28,.30);
      transform:rotate(var(--tilt,-1.1deg)); transform-origin:50% 60%;
      transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.snap img{display:block; width:100%; height:auto; border-radius:1px}
.snap figcaption{font-family:var(--f-hand); font-size:20px; line-height:1.25;
                 color:var(--ink-soft); padding:9px 4px 12px; text-align:center}
.snap--big{--tilt:-1.4deg; max-width:520px; margin-left:auto}
.snap--big figcaption{font-size:23px; padding:13px 6px 16px}

/* the album — how it started, in her mother's kitchen */
.album{margin-top:clamp(46px,6vw,78px)}
.album__head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:26px}
.album__head h3{font-family:var(--f-disp); font-weight:600; font-size:clamp(21px,2vw,27px);
                font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 26; color:var(--orange); margin:0}
.album__head p{margin:0; color:var(--ink-soft); font-size:15.5px}
.album__row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
            gap:clamp(14px,2.4vw,34px); align-items:start}
.album__row .snap:nth-child(2n){--tilt:1.5deg}
.album__row .snap:nth-child(3n){--tilt:-2deg}
.album__row .snap:hover{transform:rotate(0deg) translateY(-5px)}
@media (prefers-reduced-motion:reduce){.snap{transition:none} .album__row .snap:hover{transform:rotate(var(--tilt,-1.1deg))}}
.story__marks{display:flex; align-items:flex-end; gap:clamp(16px,2.5vw,30px); margin-top:30px}
.story__sig{width:min(230px,52%); background:var(--orange)}
.story__art{width:clamp(64px,7vw,88px); background:var(--orange); opacity:.6; flex:0 0 auto}
.story__by{font-size:14.5px; color:var(--ink-soft); margin:10px 0 0; letter-spacing:.02em}

/* a wide photograph, bled to both edges, so the steps and the questions are not two
   text-only sections back to back */
/* ⚠️ Was 26vw/320px, which was cut for a stock photo of a flat wooden board. Her
   own kitchen photograph has a loaf standing up in it, and at 320px the frame sliced
   through the crust top AND bottom, which reads as a mistake rather than a crop. */
.strip{position:relative; height:clamp(210px,29vw,420px); overflow:hidden;
       margin:0 0 clamp(38px,5vw,64px);
       -webkit-mask:url(../img/paint-band.png) no-repeat center/100% 100%;
               mask:url(../img/paint-band.png) no-repeat center/100% 100%}
.strip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%}
.strip figcaption{position:absolute; left:0; bottom:0; padding:44px clamp(20px,4vw,56px) 30px; margin:0;
  width:100%; color:#F0DCC9; font-family:var(--f-disp); font-style:italic; font-size:15px;
  background:linear-gradient(to top,rgba(30,16,8,.78),transparent)}

/* how ordering works */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); margin-top:8px}
.step{padding-top:22px; position:relative}
.step::before{content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:var(--orange); pointer-events:none;
  -webkit-mask:url(../img/paint-rule-0.png) no-repeat left center/100% 100%;
          mask:url(../img/paint-rule-0.png) no-repeat left center/100% 100%}
.step b{display:block; font-family:var(--f-disp); font-size:14px; font-weight:700; letter-spacing:.1em;
        color:var(--orange-ink); margin-bottom:9px; font-variation-settings:"opsz" 12}
.step h3{font-size:21px; margin-bottom:.4em}
.step p{font-size:15.6px; color:var(--ink-soft); margin:0}

/* the form */
.order{background:var(--tan)}
.order__in{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
           gap:clamp(28px,4.5vw,72px); align-items:start}
.order__aside h2{color:#4A2C1C}
.order__aside p{color:#5F3A24}
.order__facts{list-style:none; padding:0; margin:24px 0 0}
.order__facts li{padding:12px 0; border-top:1px solid rgba(74,44,28,.18); font-size:16px; display:flex; gap:12px}
.order__facts b{font-family:var(--f-disp); font-weight:600; font-variation-settings:"SOFT" 70,"opsz" 16;
                flex:0 0 92px; color:#6A4128}
.order__facts a{color:#8A3D0B; font-weight:700; text-decoration:none}
.order__facts a:hover{text-decoration:underline}
.order__art{width:clamp(88px,9vw,124px); background:#8A3D0B; opacity:.55; margin-top:30px}

.form{background:#FFFBF5; border-radius:18px; padding:clamp(22px,3vw,38px); box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.f{margin-bottom:16px}
.f label{display:block; font-weight:700; font-size:14.5px; margin-bottom:6px; color:#5F3A24}
.f label .opt{font-weight:400; color:var(--ink-faint)}
.f input,.f select,.f textarea{
  width:100%; font:400 16px/1.45 var(--f-text); color:var(--ink); background:#fff;
  border:1.5px solid rgba(74,44,28,.22); border-radius:10px; padding:12px 13px;
  transition:border-color .18s, box-shadow .18s}
.f textarea{min-height:112px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:0; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(192,80,15,.16)}
.f.is-bad input,.f.is-bad select,.f.is-bad textarea{border-color:#B3341B; background:#FFF6F4}
.f__err{display:none; font-size:13.5px; color:#9B2C14; margin-top:5px; font-weight:600}
.f.is-bad .f__err{display:block}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips label{display:inline-flex; align-items:center; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(74,44,28,.24); font-size:15px; font-weight:600; margin:0; color:var(--ink);
  transition:background .18s, border-color .18s, color .18s}
.chips input:checked + label{background:var(--orange); border-color:var(--orange); color:#fff8f2}
.chips input:focus-visible + label{outline:3px solid var(--orange); outline-offset:2px}
.form__foot{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:6px}
.form__fine{font-size:13.5px; color:var(--ink-faint); margin:14px 0 0}
.form__done{display:none; text-align:center; padding:14px 4px}
.form__done h3{color:var(--orange-ink)}
.form__done p{margin-inline:auto}
.form.is-sent .form__body{display:none}
.form.is-sent .form__done{display:block}
.form__stand{width:104px; margin:0 auto 14px; background:var(--orange); opacity:.8}

/* faq */
.faq-in{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(20px,4vw,64px); align-items:start}
.faq-in .head{margin-bottom:0; position:sticky; top:96px}
.faq{max-width:none}
.faq details{border-top:1px solid var(--line-soft); padding:2px 0}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-family:var(--f-disp); font-weight:600; font-size:19px; font-variation-settings:"SOFT" 70,"opsz" 24}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:26px; width:10px; height:10px;
  border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(45deg); transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq details p{color:var(--ink-soft); font-size:16px; margin:0 0 18px; max-width:70ch}

/* footer */
.foot{background:var(--cocoa); color:#CDB29A; padding:clamp(52px,6vw,84px) 0 30px}
.foot__in{display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px)}
.foot__word{width:min(300px,90%); background:#E8A97C; margin-bottom:16px}
.foot p{font-size:15.5px; color:#B79A81}
.foot h4{font-family:var(--f-disp); font-size:14px; font-weight:700; letter-spacing:.1em;
         color:var(--butter); margin:0 0 14px; font-variation-settings:"opsz" 12}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:10px; font-size:15.5px}
.foot a{color:#E6D2BE; text-decoration:none}
.foot a:hover{color:#fff; text-decoration:underline}
.foot__bar{margin-top:clamp(36px,5vw,58px); padding-top:22px; border-top:1px solid rgba(242,225,208,.14);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13.5px; color:#A2856B}
.foot__bar a{color:#B79A81}

/* the honest banner every DDD preview carries */
.pv{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:80;
  display:flex; align-items:center; gap:14px; max-width:calc(100% - 24px);
  background:rgba(42,26,17,.95); color:#F0DCC9; border-radius:999px; padding:10px 12px 10px 20px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.75); font-size:14.5px; backdrop-filter:blur(6px)}
.pv b{color:var(--butter); font-weight:700}
.pv span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv a{background:var(--butter); color:#3A2312; font-weight:700; text-decoration:none;
  padding:8px 15px; border-radius:999px; white-space:nowrap}
.pv button{background:transparent; border:0; color:#A2856B; font-size:20px; line-height:1;
  cursor:pointer; padding:4px 6px}

/* reveals — fire once, no clock */
.rv{opacity:0; transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.rv-2{transition-delay:.09s} .rv-3{transition-delay:.18s}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .wall figure:hover img{transform:none}
}

/* responsive */
@media (max-width:1000px){
  .hdr__nav{position:fixed; inset:64px 0 auto; flex-direction:column; align-items:stretch;
    background:var(--paper); padding:8px var(--gut) 24px; gap:0; border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px -26px rgba(74,44,28,.7); display:none}
  .hdr__nav.is-open{display:flex}
  .hdr__nav a:not(.btn){padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:18px}
  .hdr__nav a:not(.btn)::after{display:none}
  .hdr__nav .btn{margin-top:16px; justify-content:center}
  .hdr__burger{display:block}
  .hdr__tel{margin-left:auto}
  .hero__in,.club__in,.story__in,.order__in,.head--split{grid-template-columns:minmax(0,1fr)}
  .head--split{gap:14px}
  .hero__txt{padding-bottom:8px}
  .hero__pics{padding-bottom:0; margin-right:calc(var(--gut)*-1)}
  .hero__pic--main{margin-right:0; width:100%; transform:none;
                   border-width:8px 0 8px 8px; border-radius:var(--r) 0 0 var(--r)}
  .hero__pic--in{width:34%; max-width:170px; left:8px}
  .hero__scrap{left:min(42%,190px)}
  .band__in{grid-template-columns:minmax(0,1fr)}
  .band__pic{order:-1; min-height:min(60vh,440px)}
  .band__pic::after{background:linear-gradient(to bottom,rgba(42,26,17,0) 55%,var(--cocoa) 100%)}
  .band__txt{padding:clamp(28px,5vw,52px) var(--gut) clamp(52px,7vw,80px)}
  .club__pic{order:-1; margin-left:calc(var(--gut)*-1); margin-right:calc(var(--gut)*-1);
             border-radius:0; min-height:min(52vh,400px)}
  .faq-in{grid-template-columns:minmax(0,1fr)}
  .faq-in .head{position:static; margin-bottom:22px}
  /* the print stays a print on a phone — centred, not bled, never cropped */
  .snap--big{order:-1; margin:0 auto; max-width:420px}
  .album__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:880px){
  .bake{grid-template-columns:minmax(0,1fr); gap:22px}
  .bake__pic,.bake--flip .bake__pic{order:-1}
  .bake__pic--pair{max-width:560px}
}
@media (max-width:760px){
  .steps{grid-template-columns:minmax(0,1fr); gap:24px}
  .form__row{grid-template-columns:minmax(0,1fr); gap:0}
  .foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__in>*:first-child{grid-column:1/-1}
  .club__tiers li{grid-template-columns:minmax(0,1fr); gap:5px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .wall figure{margin-bottom:10px}
  .band{min-height:auto}
  .band__bg img{object-position:center 38%}
  .pv{font-size:13px; padding:8px 8px 8px 14px; gap:9px; bottom:10px}
  .pv span{max-width:44vw}
  .ribbon__in{gap:8px; padding:16px var(--gut)}
  .ribbon__sep{display:none}
}
@media (max-width:420px){
  .hero__pic--in,.hero__scrap{display:none}
  .hero__pic--main{transform:none}
}

/* ── flavours & prices ─────────────────────────────────────────────────────
   A price list is a table and pretending otherwise helps nobody — a screen
   reader announces "8 inch, 14-16 servings, $70" as one row, which is exactly
   what a sighted reader gets. It is styled like the rest of the page: ruled the
   way a recipe card is ruled, never boxed in a grey grid. */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.pri-hero{padding:clamp(44px,6vw,84px) 0 clamp(26px,3.5vw,48px); position:relative}
.pri-hero__in{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
              gap:clamp(26px,4vw,64px); align-items:center}
.pri-hero__in h1{max-width:20ch}
.pri-hero__in .lede{max-width:48ch}
.pri-hero__pic{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.pri-hero__pic img{display:block; width:100%; height:auto}
/* natural height each — a short card should not stretch to match a tall one */
.pri__pair{align-items:start}
.pri{padding:clamp(34px,5vw,66px) 0; position:relative}
.pri--card{background:var(--card)}
.pri__top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
          gap:18px; margin-bottom:clamp(20px,2.6vw,34px)}
.pri__hand{margin:0; color:var(--orange-ink); text-align:right; line-height:1.25}
.pri__cta{margin:clamp(24px,3vw,36px) 0 0}

.ptable{width:100%; border-collapse:collapse; text-align:left}
.ptable th,.ptable td{padding:16px 12px; border-top:1px solid var(--line-soft); vertical-align:baseline}
.ptable thead th{border-top:0; border-bottom:1px solid var(--line);
                 font:700 12.5px/1 var(--f-text); letter-spacing:.09em; text-transform:uppercase;
                 color:var(--ink-faint); padding-bottom:11px}
.ptable tbody th{font-family:var(--f-disp); font-weight:600; font-size:20px;
                 font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 20; white-space:nowrap}
.ptable td{color:var(--ink-soft); font-size:16px}
.ptable__note{color:var(--ink-faint)}
.ptable__num{text-align:right; white-space:nowrap}
.ptable tbody .ptable__num b{font-family:var(--f-disp); font-size:23px; font-weight:600;
                             color:var(--orange); font-variation-settings:"SOFT" 60,"opsz" 24}

.pri__pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,44px)}
.pcard{padding:clamp(22px,2.6vw,32px); background:var(--card); border-radius:var(--r);
       box-shadow:0 14px 34px -26px rgba(74,44,28,.55)}
.pri--card .pcard{background:var(--paper)}
.pcard h3{margin:0 0 8px; color:var(--orange)}
.pcard__note{margin:0; color:var(--ink-soft); font-size:15.5px}
.pcard__rows{list-style:none; margin:20px 0 0; padding:0}
.pcard__rows li{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
                padding:14px 0; border-top:1px solid var(--line-soft)}
.pcard__rows li:last-child{border-bottom:1px solid var(--line-soft)}
.pcard__rows span{font-size:16.5px}
.pcard__rows b{font-family:var(--f-disp); font-size:22px; font-weight:600; color:var(--orange);
               font-variation-settings:"SOFT" 60,"opsz" 24}

/* her one surcharge, said in her voice, not buried in small print */
.upcharge{margin-top:clamp(26px,3.4vw,42px); padding:clamp(22px,2.8vw,34px);
          border-radius:var(--r); background:rgba(239,201,104,.22);
          border:1px solid rgba(192,80,15,.20); max-width:62ch}
.upcharge .hand{margin:0 0 4px}
.upcharge p:last-child{margin:0; color:var(--ink)}

.flav{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px)}
.flav__col h3{margin:0 0 12px; font-size:clamp(19px,1.5vw,23px); color:var(--orange)}
.flav__col ul{list-style:none; margin:0; padding:0}
.flav__col li{padding:10px 0 10px 20px; border-top:1px solid var(--line-soft);
              font-size:16px; position:relative}
.flav__col li::before{content:""; position:absolute; left:2px; top:19px; width:6px; height:6px;
                      border-radius:50%; background:var(--orange); opacity:.55}
.flav__club{margin:clamp(24px,3vw,38px) 0 0; font-family:var(--f-hand); font-size:22px;
            color:var(--ink-soft)}
.flav__club a{color:var(--orange-ink)}

@media (max-width:880px){
  .pri__top{flex-direction:column; align-items:flex-start}
  .pri__hand{text-align:left}
  .pri-hero__in,.pri__pair,.flav{grid-template-columns:minmax(0,1fr)}
  /* the headline's typeset break is for a wide measure only */
  .pri-hero__in h1 br{display:none}
  .pri-hero__pic{order:-1; max-width:420px}
  /* the "what it's for" column is the first thing to go on a phone */
  .ptable__note,.ptable thead th:nth-child(3){display:none}
  .ptable th,.ptable td{padding:14px 8px}
}

/* == the build-out, 2026-08-23 ============================================
   Nine pages instead of one. Nothing below changes the direction — same paper,
   same ink, same painted joins — it is the furniture the extra pages needed. */

/* the top of an inner page */
.phero{padding:clamp(44px,6vw,84px) 0 clamp(26px,3.5vw,48px); position:relative}
.phero--tight{padding-bottom:clamp(14px,2vw,26px)}
.phero__in{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
           gap:clamp(26px,4vw,64px); align-items:center}
.phero h1{max-width:20ch}
.phero .lede{max-width:50ch}
.phero__pic{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.phero__pic img{display:block; width:100%; height:auto}

/* a closing band on the dark ground. Every page ends on one, so no page ends
   on a paragraph and leaves the reader with nowhere to go. */
.cband{background:var(--cocoa); color:#F2E1D0; padding:clamp(38px,5vw,66px) 0}
.cband__in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
           gap:clamp(20px,3vw,50px); align-items:center}
.cband h2{color:#FFF3E4; font-size:clamp(25px,2.7vw,38px); max-width:18ch; margin:0}
.cband p{margin:12px 0 0; color:#CDB29A; max-width:46ch}
.cband__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.btn--onDark{border-color:rgba(242,225,208,.34); color:#F2E1D0; background:transparent}
.btn--onDark:hover{background:rgba(242,225,208,.10)}

/* the piping vocabulary — alternating rows, big pictures */
.pipe__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
           gap:clamp(22px,3.5vw,56px); align-items:center;
           padding:clamp(24px,3vw,44px) 0; border-top:1px solid var(--line-soft)}
.pipe__row:first-child{border-top:0}
.pipe__row:nth-child(even) .pipe__pic{order:2}
.pipe__pic{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.pipe__pic img{display:block; width:100%; height:auto}
.pipe__n{font-family:var(--f-disp); font-size:clamp(30px,3.4vw,46px); font-weight:600;
         font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40; color:var(--orange);
         opacity:.45; margin:0 0 2px; line-height:1}
.pipe__txt h3{margin:0 0 10px; color:var(--ink)}
.pipe__txt p{margin:0; color:var(--ink-soft)}

/* three-up reason cards, used on cupcakes and the Cookie Club */
.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px)}
.why__c{padding-top:22px; position:relative}
.why__c::before{content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:url(../img/paint-rule-0.png) no-repeat center/100% 100%; opacity:.5}
.why__n{font-family:var(--f-disp); font-size:15px; font-weight:700; letter-spacing:.1em;
        color:var(--orange-ink); margin:0 0 8px}
.why__c h3{margin:0 0 8px; font-size:clamp(19px,1.5vw,23px)}
.why__c p{margin:0; color:var(--ink-soft); font-size:16px}

/* wedding steps */
.wsteps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px)}
.wstep{padding-top:22px; position:relative}
.wstep::before{content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:url(../img/paint-rule-1.png) no-repeat center/100% 100%; opacity:.5}
.wstep__n{font-family:var(--f-hand); font-size:23px; color:var(--orange-ink); margin:0 0 4px}
.wstep h3{margin:0 0 8px; font-size:clamp(19px,1.5vw,23px)}
.wstep p{margin:0; color:var(--ink-soft); font-size:16px}
.wgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.2vw,26px)}
.wgrid figure{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); position:relative}
.wgrid img{display:block; width:100%; height:auto}
.wgrid figcaption{position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px;
  font-family:var(--f-hand); font-size:19px; color:#FFF3E4;
  background:linear-gradient(to top,rgba(30,16,8,.80),transparent)}

/* delivery towns */
.towns{list-style:none; margin:0; padding:0;
       display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,60px)}
.towns li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
          padding:15px 0; border-top:1px solid var(--line-soft)}
.towns b{font-family:var(--f-disp); font-weight:600; font-size:18px; white-space:nowrap;
         font-variation-settings:"SOFT" 60,"opsz" 18}
.towns span{color:var(--ink-soft); font-size:15.5px}

/* inline flavour pills, where a bulleted column would be too heavy */
.flav__inline{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.flav__inline li{font-size:15px; padding:7px 13px; border-radius:999px;
                 background:rgba(192,80,15,.10); color:var(--orange-ink)}
.flav--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* a "from $x" line under a heading on the home page */
.bake__from{margin:0 0 10px; font-family:var(--f-disp); font-size:17px; color:var(--ink-soft);
            font-variation-settings:"SOFT" 60,"opsz" 18}
.bake__from b{color:var(--orange); font-size:21px; font-weight:600}

/* == the gallery filter ===================================================
   ⭐ No JavaScript. Radios + sibling selectors: exactly one is always on, the
   browser owns the state, and it works with JS off. Every figure is in the DOM
   either way, so there is nothing to fetch and nothing to get out of step. */
.gal{padding:0 0 clamp(30px,4vw,56px)}
.gfil__r{position:absolute; opacity:0; pointer-events:none}
.gfil > label{display:inline-block; cursor:pointer; font:600 15px/1 var(--f-text);
  padding:10px 17px; margin:0 8px 10px 0; border-radius:999px; color:var(--ink-soft);
  border:1px solid var(--line); transition:background .2s,color .2s,border-color .2s}
.gfil > label:hover{background:rgba(74,44,28,.05)}
.gwall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(18px,2.4vw,30px)}
.gitem{margin:0; border-radius:11px; overflow:hidden;
       box-shadow:0 12px 26px -18px rgba(74,44,28,.5); background:#fff; position:relative}
.gitem img{width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gitem:hover img{transform:scale(1.035)}
.gitem figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  font-family:var(--f-hand); font-size:19px; color:#FFF3E4; opacity:0; transition:opacity .3s;
  background:linear-gradient(to top,rgba(30,16,8,.82),transparent)}
.gitem:hover figcaption,.gitem:focus-within figcaption{opacity:1}
.gempty{display:none; padding:40px 0; color:var(--ink-soft); font-family:var(--f-hand); font-size:22px}

/* the checked chip */
.gfil__r:checked + label{background:var(--orange); border-color:var(--orange); color:#fff8f2}
/* and what it hides. `~` reaches the wall because both are children of .gfil. */
.gfil__r--birthdays:checked     ~ .gwall .gitem:not(.gitem--birthdays),
.gfil__r--anniversaries:checked ~ .gwall .gitem:not(.gitem--anniversaries),
.gfil__r--cupcakes:checked      ~ .gwall .gitem:not(.gitem--cupcakes),
.gfil__r--cookies:checked       ~ .gwall .gitem:not(.gitem--cookies),
.gfil__r--pies:checked          ~ .gwall .gitem:not(.gitem--pies){display:none}

/* the honeypot. Off-screen rather than display:none — a bot that skips hidden
   fields is exactly the bot worth catching. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (max-width:1000px){
  .cband__in{grid-template-columns:minmax(0,1fr)}
  .cband__cta{justify-content:flex-start}
  .gwall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:880px){
  .phero__in{grid-template-columns:minmax(0,1fr)}
  .phero__in h1 br{display:none}
  .phero__pic{order:-1; max-width:440px}
  .pipe__row{grid-template-columns:minmax(0,1fr); gap:18px}
  .pipe__row:nth-child(even) .pipe__pic{order:0}
  .why,.wsteps,.wgrid,.towns,.flav--2{grid-template-columns:minmax(0,1fr)}
  .wgrid figure:nth-child(n+3){display:none}
}
@media (max-width:620px){
  .gwall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .gitem img{transition:none}
  .gitem:hover img{transform:none}
}