/* =======================================================
   OKAYCAKES — "BAKERY BOX"
   A pastry box: pink lid, kraft edges, cream label stock,
   a red rubber stamp, and a receipt printed in mono.
   Single visual world by intent — every colour is painted.
   ======================================================= */
:root{
  --box:#F2C9D1;        /* pastry box pink */
  --box-deep:#E5AEB9;   /* lid shadow      */
  --pale:#FAE4E8;       /* pink tint       */
  --cream:#FBF7F0;      /* label stock     */
  --cream-2:#F4EDE1;    /* label stock, shaded */
  --kraft:#B9794A;      /* box edge        */
  --kraft-dk:#8C5833;
  --stamp:#C03A2B;      /* rubber stamp red */
  --ink:#2B211E;
  --ink-2:#6B4F47;
  --ink-3:#9A7C72;
  --white:#FFFFFF;
  --edge:0 2px 0 var(--box-deep), 0 12px 24px rgba(43,33,30,.13);
  --edge-kraft:0 2px 0 #C9A18A, 0 12px 24px rgba(43,33,30,.13);
  --maxw:1160px;
  --r:3px;
}

*{box-sizing:border-box}

/* The browser hides [hidden] via its own stylesheet, which ANY author
   display rule outranks — so `.sheet-ref{display:flex}` and
   `.two{display:grid}` silently defeat el.hidden = true. Everything the
   JS shows and hides depends on this line. Do not remove it. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--stamp); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--kraft-dk);
}
.perf{border:0; border-top:2px dashed #D9BBA4; margin:0}

h1,h2,h3{margin:0; text-wrap:balance}
h1{font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(34px,5.6vw,60px); line-height:1.0; letter-spacing:-.038em}
h2{font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(25px,3.4vw,36px); line-height:1.06; letter-spacing:-.032em}
h3{font-family:Fraunces,Georgia,serif; font-size:21px; font-weight:600; letter-spacing:-.012em; line-height:1.15}
.red{color:var(--stamp)}
p{margin:0}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:var(--box); border-bottom:2px solid var(--kraft)}
/* the horizontal value matters: a bare `padding:13px 0` here overrides
   .wrap's own padding and pins the header flush to both screen edges */
.head-in{display:flex; align-items:center; gap:18px; padding:13px 26px}
.brand{display:flex; align-items:baseline; gap:10px; font-family:"Archivo Black",Impact,sans-serif;
  font-size:22px; letter-spacing:-.04em; text-decoration:none}
.brand .wordmark{white-space:nowrap}
.brand em{font-style:normal; color:var(--stamp)}
.brand small{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.16em; color:var(--ink-2); font-weight:500}
.head-right{display:flex; align-items:center; gap:10px}
/* margin-left:auto groups the nav and the CTA over on the right */
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
/* three bars, no flex on the button itself */
.nav-toggle{display:none; width:44px; padding:9px 10px; border:1.5px solid var(--ink);
  border-radius:2px; background:transparent}
.nav-toggle span{display:block; height:2px; border-radius:2px; background:var(--ink)}
.nav-toggle span + span{margin-top:5px}
.nav-toggle[aria-expanded="true"]{background:var(--ink)}
.nav-toggle[aria-expanded="true"] span{background:var(--box)}
/* :not(.btn) keeps these off the CTA — a bare `.nav a` rule outranks
   `.btn-red` and silently repaints the button grey. */
.nav a:not(.btn){
  text-decoration:none; font-size:13.5px; font-weight:600; padding:7px 11px; border-radius:2px;
  color:var(--ink-2); white-space:nowrap;
}
.nav a:not(.btn):hover{color:var(--ink); background:rgba(255,255,255,.45)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink); background:var(--cream); box-shadow:0 1px 0 var(--kraft)}
.nav a.btn{text-decoration:none; white-space:nowrap}
.btn{
  display:inline-block; background:var(--ink); color:var(--cream); font-family:"Archivo Black",sans-serif;
  font-size:13px; letter-spacing:-.01em; padding:11px 19px; border-radius:2px; text-decoration:none;
  box-shadow:0 2px 0 #120C0A; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 3px 0 #120C0A}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 #120C0A}
.btn-red{background:var(--stamp); color:#FFFFFF; box-shadow:0 2px 0 #8C2317}
.btn-red:hover{box-shadow:0 3px 0 #8C2317}
.btn-red:active{box-shadow:0 1px 0 #8C2317}
.btn[disabled],.btn[aria-disabled="true"]{background:#D7C8C2; color:#8B7A74; box-shadow:0 2px 0 #C3B2AB; cursor:not-allowed; transform:none}

/* ---------- header, small screens ----------
   Five links plus a CTA cannot sit on one line below ~860px. Left to wrap
   they stack into a column that eats most of a phone screen, and the header
   is sticky, so it does it on every scroll. Below the breakpoint the links
   collapse behind a toggle and drop down as a panel; the CTA stays out in
   the open, because it is the one thing the header exists to offer. */
@media (max-width:860px){
  .head-in{gap:12px}
  .head-right{margin-left:auto}   /* the nav is out of flow down here */
  .nav-toggle{display:block}
  .head-right .btn{font-size:12.5px; padding:10px 15px}

  /* positioned against .site-head (sticky is a containing block), so the
     panel spans the full width rather than the padded wrap */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:2px solid var(--kraft);
    box-shadow:0 16px 26px rgba(43,33,30,.2); padding:4px 0;
  }
  .nav:not(.is-open){display:none}
  .nav a:not(.btn){padding:15px 26px; font-size:16.5px; border-radius:0; color:var(--ink)}
  .nav a:not(.btn) + a{border-top:1px solid #EDE2D2}
  .nav a:not(.btn)[aria-current="page"]{background:var(--pale); box-shadow:inset 3px 0 0 var(--stamp)}
}
@media (max-width:520px){
  /* the location stacks under the wordmark rather than fighting it for width */
  .brand{font-size:20px; flex-direction:column; align-items:flex-start; gap:2px}
  .brand small{font-size:8.5px; letter-spacing:.2em; color:var(--ink-3)}
  .head-right .btn{font-size:12px; padding:10px 13px}
  .nav a:not(.btn){padding:15px 22px}
}

/* ---------- page switching ---------- */
.page{display:none}
.page.is-on{display:block}

/* ---------- hero ---------- */
.hero{background:var(--box); border-bottom:2px solid var(--kraft); padding:28px 0 32px; position:relative; overflow:hidden}
/* the five inner-page headers: title and lede only, so they sit tighter */
.hero-page{padding:22px 0 26px}
.hero-page h1{margin-top:10px; font-size:clamp(30px,4.6vw,48px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px; align-items:center}
@media (max-width:840px){.hero-grid{grid-template-columns:1fr; gap:30px}}
.hero p.lede{margin-top:18px; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:26px}
.hero-cta .mono{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.stamp{
  justify-self:center; font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.02em; color:var(--stamp); border:4px solid var(--stamp); border-radius:7px;
  padding:16px 26px; transform:rotate(-7deg); opacity:.85; text-align:center; line-height:1.1;
}
.stamp small{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em;
  font-weight:600; margin-top:6px}

/* ---------- section scaffolding ---------- */
.band{padding:64px 0}
.band-cream{background:var(--cream)}
.band-pale{background:var(--pale); border-top:2px solid var(--kraft); border-bottom:2px solid var(--kraft)}
.sec-head{max-width:60ch; margin-bottom:30px}
.sec-head h2{margin:9px 0 10px}
.sec-head p{color:var(--ink-2); font-size:16.5px}

/* ---------- three beats ---------- */
.beats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start}
@media (max-width:760px){.beats{grid-template-columns:1fr}}
.beat{background:var(--cream); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--edge-kraft)}
.band-pale .beat{background:var(--white)}
.beat-bar{background:var(--kraft); color:var(--cream); font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:8px 13px;
  display:flex; justify-content:space-between; gap:10px}
.beat-bar span:last-child{opacity:.72}
.beat figure{margin:0; height:400px; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden}
.beat figure img{width:100%; height:100%; object-fit:cover}
.beat figure.fit{background:var(--white); padding:14px}
.beat figure.fit img{object-fit:contain}
.beat-body{padding:17px 19px 20px; border-top:1px solid #E7DCCB}
.beat-body h3{font-size:22px; margin-bottom:6px}
.beat-body p{font-size:15px; line-height:1.55; color:var(--ink-2)}
.beat-body .cred{display:block; margin-top:11px; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:760px){.beat figure{height:340px}}

/* ---------- gallery ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; padding:8px 13px; border:1.5px solid var(--kraft); color:var(--kraft-dk);
  border-radius:999px; background:transparent; transition:background .12s ease,color .12s ease;
}
.chip:hover{background:rgba(185,121,74,.12)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--cream)}

.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 26px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card,.plate{text-align:left; width:100%; display:flex; flex-direction:column; gap:0; padding:0;
  transition:transform .14s ease}
.card{cursor:pointer}
.card:hover{transform:translateY(-3px)}
.card figure,.plate figure{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--white);
  border-radius:var(--r); box-shadow:var(--edge-kraft)}
.card figure img,.plate figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover figure img{transform:scale(1.035)}
.card h3{margin:15px 0 3px; font-size:23px}
.card .zing{font-size:15px; line-height:1.5; color:var(--ink-2)}
.card .meta{margin-top:9px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.card:hover .meta{color:var(--stamp)}

/* ---------- detail dialog ---------- */
.scrim{position:fixed; inset:0; background:rgba(43,33,30,.62); z-index:60; display:none;
  padding:26px; overflow-y:auto}
.scrim.is-on{display:block}
.sheet{max-width:900px; margin:0 auto; background:var(--cream); border-radius:var(--r);
  box-shadow:0 30px 70px rgba(0,0,0,.4); overflow:hidden}
.sheet-bar{background:var(--kraft); color:var(--cream); display:flex; justify-content:space-between;
  align-items:center; gap:14px; padding:9px 12px 9px 15px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600}
.sheet-close{color:var(--cream); font-size:19px; line-height:1; padding:5px 9px; border-radius:2px}
.sheet-close:hover{background:rgba(0,0,0,.18)}
.sheet img.hero-shot{width:100%; max-height:52vh; object-fit:cover; background:var(--white)}
.sheet-body{padding:24px 26px 30px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px}
@media (max-width:760px){.sheet-body{grid-template-columns:1fr; gap:22px; padding:20px}}
.sheet-body h3{font-size:30px; margin-bottom:7px}
.sheet-body .zing{font-size:17px; color:var(--ink-2); line-height:1.5}
.sheet-body .verdict{margin-top:16px; background:var(--pale); border-left:3px solid var(--stamp);
  padding:13px 15px; font-size:14.5px; line-height:1.55; color:var(--ink)}
.spec{margin:0; font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.5}
.spec div{display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid #E7DCCB}
.spec div:first-child{border-top:1px solid #E7DCCB}
.spec dt{color:var(--kraft-dk); letter-spacing:.11em; text-transform:uppercase; font-size:9.5px; font-weight:600; padding-top:2px}
.spec dd{margin:0; color:var(--ink)}
.sheet-ref{margin-top:16px; display:flex; gap:13px; align-items:center; background:var(--white);
  border:1px solid #E7DCCB; border-radius:var(--r); padding:11px 13px}
.sheet-ref > span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; line-height:1.6;
  letter-spacing:.05em; color:var(--ink-2)}

/* the inset photo is a real button so it is keyboard reachable */
.ref-zoom{display:block; position:relative; padding:0; flex:none; cursor:zoom-in; line-height:0;
  border-radius:2px; transition:transform .12s ease}
.ref-zoom img{width:auto; height:104px; max-width:112px; object-fit:contain; display:block}
.ref-zoom:hover{transform:scale(1.03)}
.ref-zoom-badge{position:absolute; right:4px; bottom:4px; font-style:normal; font-size:11px;
  line-height:1; padding:3px 4px; border-radius:2px; background:rgba(43,33,30,.78); color:var(--cream)}

.lightbox{position:fixed; inset:0; z-index:70; background:rgba(28,20,18,.92);
  display:flex; align-items:center; justify-content:center; padding:40px 26px; cursor:zoom-out}
.lightbox figure{margin:0; max-width:1000px; display:flex; flex-direction:column; gap:14px; align-items:center}
.lightbox img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lightbox figcaption{font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.6;
  letter-spacing:.05em; color:var(--box); text-align:center; max-width:60ch}
.lightbox-close{position:absolute; top:16px; right:20px; font-size:30px; line-height:1;
  color:var(--cream); padding:6px 12px; border-radius:2px; cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.14)}

/* ---------- flavors ---------- */
.flav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:760px){.flav{grid-template-columns:1fr}}
.flav-row{background:var(--cream); border-radius:var(--r); box-shadow:var(--edge-kraft); padding:20px 22px 22px;
  display:flex; flex-direction:column; gap:7px}
.band-pale .flav-row{background:var(--white)}
.flav-row .top{display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.flav-row h3{font-size:22px}
.flav-row .price{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600; color:var(--kraft-dk); white-space:nowrap}
.flav-row p{font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.flav-row .tag{margin-top:4px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.sizes{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; padding-top:18px; border-top:2px dashed #D9BBA4;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); letter-spacing:.04em}
.sizes b{color:var(--ink)}

/* ---------- decoration-only offer ---------- */
.offer{background:var(--ink); color:var(--cream); border-radius:var(--r); padding:26px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center; margin-top:30px}
@media (max-width:720px){.offer{grid-template-columns:1fr; gap:18px}}
.offer .eyebrow{color:var(--box)}
.offer h3{font-family:"Archivo Black",sans-serif; font-size:27px; letter-spacing:-.035em; color:var(--cream); margin:9px 0 9px}
.offer h3 em{font-style:normal; color:var(--box)}
.offer p{font-size:15px; line-height:1.6; color:#C9B9B3; max-width:52ch}
.offer .btn{background:var(--box); color:var(--ink); box-shadow:0 2px 0 var(--box-deep); white-space:nowrap}

/* segmented service picker */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){.seg{grid-template-columns:1fr}}
.seg label{display:block; border:1.5px solid #DCC9BE; border-radius:var(--r); padding:13px 15px;
  cursor:pointer; background:var(--white); transition:border-color .12s ease, background .12s ease}
.seg label:hover{border-color:var(--kraft)}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg b{display:block; font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.seg span{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.45}
.seg label:has(input:checked){border-color:var(--stamp); border-width:2px; background:var(--pale); padding:12.5px 14.5px}
.seg label:has(input:focus-visible){outline:3px solid var(--stamp); outline-offset:2px}
.byo-note{background:var(--pale); border-left:3px solid var(--kraft); padding:13px 15px; font-size:13.5px;
  line-height:1.55; color:var(--ink)}
.byo-note b{font-weight:700}

/* ---------- the dog ---------- */
.dog{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:34px; align-items:center}
@media (max-width:820px){.dog{grid-template-columns:1fr; gap:24px}}
.dog-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dog-pair figure{margin:0}
.dog-pair img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); box-shadow:var(--edge-kraft)}
.dog-pair figcaption{margin-top:9px; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); line-height:1.6}
.dog p{color:var(--ink-2); font-size:16px; line-height:1.7}
.dog p + p{margin-top:13px}
.dog p strong{color:var(--ink); font-weight:700}

/* ---------- request form ---------- */
.form-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:start}
@media (max-width:880px){.form-grid{grid-template-columns:1fr; gap:28px}}
.form-card{background:var(--cream); border-radius:var(--r); box-shadow:var(--edge-kraft); overflow:hidden}
.band-pale .form-card{background:var(--white)}
.form-card-bar{background:var(--kraft); color:var(--cream); padding:9px 16px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600}
.form-inner{padding:22px 24px 26px; display:flex; flex-direction:column; gap:17px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.005em}
.req{color:var(--stamp); font-weight:700}
/* flagged on a failed submit, cleared as soon as they start typing */
.field input.is-err, .field textarea.is-err{border-color:var(--stamp); border-width:2px}
.field .hint{font-size:12.5px; color:var(--ink-2); line-height:1.45}
.field input[type=text],.field input[type=email],.field input[type=date],.field select,.field textarea{
  font:inherit; font-size:15px; padding:10px 12px; border:1.5px solid #DCC9BE; border-radius:2px;
  background:var(--white); color:var(--ink); width:100%;
}
.field textarea{min-height:78px; resize:vertical}
#f-brief{min-height:64px}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--kraft) 50%),linear-gradient(135deg,var(--kraft) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.two{grid-template-columns:1fr}}


.consent{display:flex; gap:12px; align-items:flex-start; background:var(--pale);
  border-left:3px solid var(--stamp); padding:14px 16px}
.consent input{width:19px; height:19px; margin:2px 0 0; accent-color:var(--stamp); flex:none}
.consent label{font-size:14px; line-height:1.5; font-weight:600; color:var(--ink)}
.consent .sub{display:block; font-weight:400; font-size:12.5px; color:var(--ink-2); margin-top:4px}
.submit-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.submit-row .mono{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.big-btn{font-size:17px; padding:14px 30px}

.sidebar-note{background:var(--cream); border-radius:var(--r); box-shadow:var(--edge-kraft); padding:20px 22px 22px}
.band-pale .sidebar-note{background:var(--white)}
.sidebar-note h3{font-size:19px; margin-bottom:11px}
.sidebar-note ul{margin:0; padding-left:17px; font-size:14px; line-height:1.72; color:var(--ink-2)}
.sidebar-note ul b{color:var(--ink)}
.sidebar-note + .sidebar-note{margin-top:16px}

/* sent confirmation */
.sent{display:none; padding:30px 26px 34px; text-align:center}
.sent.is-on{display:block}
.form-inner.is-off{display:none}
.sent h3{font-size:26px; margin-bottom:8px}
.sent > p{font-size:15px; color:var(--ink-2); max-width:44ch; margin:0 auto}
.sent-eyebrow{margin-top:26px}
/* numbered because the steps are an actual order of events */
.sent-steps{list-style:none; counter-reset:step; margin:14px auto 0; padding:0;
  max-width:46ch; text-align:left}
.sent-steps li{counter-increment:step; display:grid; grid-template-columns:24px minmax(0,1fr);
  gap:13px; padding:12px 0; border-top:1px solid #E7DCCB; font-size:15px; line-height:1.55;
  color:var(--ink-2)}
.sent-steps li:last-child{border-bottom:1px solid #E7DCCB}
.sent-steps li::before{content:counter(step); font-family:"IBM Plex Mono",monospace;
  font-size:11px; font-weight:600; color:var(--kraft-dk); padding-top:3px}

/* ---------- reviews ---------- */
.protonote{border:2px dashed var(--stamp); border-radius:var(--r); background:#FBEDEA; padding:13px 16px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.65; color:#7A2B20; margin-bottom:30px}
.protonote b{display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:5px}

/* no margin-top: the grid is the first thing in its band now that the
   prototype notice is gone, so the band's own padding is the only gap */
.rev-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:820px){.rev-grid{grid-template-columns:1fr}}
.rev{background:var(--cream); border-radius:var(--r); box-shadow:var(--edge-kraft);
  padding:22px 24px 20px; display:flex; flex-direction:column; gap:0}
.band-pale .rev{background:var(--white)}
.rev-quote{font-family:Fraunces,Georgia,serif; font-size:19.5px; line-height:1.45; color:var(--ink);
  letter-spacing:-.008em; flex:1}
/* name left, link right — with the town gone there are only two items */
.rev-who{margin-top:16px; padding-top:13px; border-top:1px solid #E7DCCB; display:flex; flex-wrap:wrap;
  gap:4px 14px; align-items:baseline; justify-content:space-between}
.rev-who b{font-size:14px; font-weight:700}
.rev-who span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3)}
/* two classes so this outranks `.rev-who span`, which would otherwise win on colour */
.rev-who .cake-link{color:var(--stamp); font-weight:700; cursor:pointer; text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:2px}
.rev-who .cake-link:hover{background:var(--pale)}

/* homepage pull quote */
.pullq{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px 40px; align-items:center}
@media (max-width:820px){.pullq{grid-template-columns:1fr; gap:20px}}
.pullq blockquote{margin:0; font-family:Fraunces,Georgia,serif; font-size:clamp(20px,2.5vw,27px);
  line-height:1.38; letter-spacing:-.012em; color:var(--ink); text-wrap:balance}
/* the attribution belongs under the words it attributes, not beside the button */
.pullq-who{margin-top:15px}
.pullq-who b{display:block; font-size:14.5px; font-weight:700}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:44px; align-items:start}
@media (max-width:840px){.about-grid{grid-template-columns:1fr; gap:28px}}
.about-grid p{color:var(--ink-2); font-size:16.5px; line-height:1.7}
.about-grid p + p{margin-top:15px}
.about-grid p strong{color:var(--ink); font-weight:700}
.side-shot{margin:20px 0 4px; max-width:340px}
.side-shot img{border-radius:var(--r); box-shadow:var(--edge-kraft); width:100%}
.side-shot figcaption{margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); line-height:1.6}

/* ---------- strips & footer ---------- */
.cta-strip{background:var(--ink); color:var(--cream); padding:44px 0}
/* grid rather than space-between: on a wide screen the two ends drifted
   so far apart they stopped reading as one block */
.cta-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px 44px; align-items:center}
@media (max-width:820px){.cta-in{grid-template-columns:1fr}}
.cta-in h2{color:var(--cream); max-width:20ch}
.cta-in p{color:#CBB9B4; font-size:15.5px; line-height:1.6; margin-top:11px; max-width:46ch}

.cta-btns{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch}
/* inline-flex + stretch so both buttons are exactly the same height
   whatever their label length */
.cta-in .btn{display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--box); color:var(--ink); box-shadow:0 2px 0 var(--box-deep)}
/* The lip must be the SAME COLOUR as the solid button's, not a dark one:
   both boxes are already identical heights, but a near-black lip on a
   near-black band is invisible, so the outline read as 2px shorter. */
.cta-in .btn.ig{background:transparent; color:var(--box);
  box-shadow:inset 0 0 0 2px var(--box), 0 2px 0 var(--box-deep)}
.cta-in .btn.ig:hover{background:rgba(242,201,209,.13)}
@media (max-width:520px){
  .cta-btns{flex-direction:column; align-items:stretch}
}
.foot-in a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:2px}
.foot-in a:hover{color:var(--stamp)}

.site-foot{background:var(--box); border-top:2px solid var(--kraft); padding:34px 0 40px}
.foot-in{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.85; color:var(--ink-2)}
@media (max-width:700px){.foot-in{grid-template-columns:1fr; gap:18px}}
.foot-in b{display:block; color:var(--ink); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:7px}
.foot-rule{margin:26px 0 16px}
.foot-bot{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em; color:var(--ink-3); text-transform:uppercase}