/* GMK Specialty Foods — shared stylesheet */

:root{
  --ground:#F4F5F1;
  --surface:#FFFFFF;
  --surface-2:#EAEBE4;
  --ink:#171A16;
  --ink-2:#4C5248;
  --ink-3:#7E8478;
  --rule:#DDDED5;
  --rule-2:#C6C8BB;
  --basil:#2C5039;
  --basil-2:#567A5A;
  --basil-wash:#E4EBE2;
  --awning:#A5342B;
  --awning-wash:#F6E9E6;
  --f-display:"Bodoni Moda","Bodoni MT",Didot,"Hoefler Text",Georgia,"Times New Roman",serif;
  --f-body:"Karla","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --wrap:1080px;
  --text:760px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14170F;--surface:#1C1F19;--surface-2:#252921;
    --ink:#EDEEE6;--ink-2:#B6BBAE;--ink-3:#878D7F;
    --rule:#333829;--rule-2:#4B5240;
    --basil:#93BA92;--basil-2:#6E9A6D;--basil-wash:#222B21;
    --awning:#DE8878;--awning-wash:#2A1E1A;
  }
}
:root[data-theme="dark"]{
  --ground:#14170F;--surface:#1C1F19;--surface-2:#252921;
  --ink:#EDEEE6;--ink-2:#B6BBAE;--ink-3:#878D7F;
  --rule:#333829;--rule-2:#4B5240;
  --basil:#93BA92;--basil-2:#6E9A6D;--basil-wash:#222B21;
  --awning:#DE8878;--awning-wash:#2A1E1A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px}
.narrow{max-width:var(--text)}

h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(2.4rem,7vw,4rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,4.2vw,2.3rem)}
h3{font-family:var(--f-body);font-size:1.05rem;font-weight:600;line-height:1.3;letter-spacing:-.005em}
p{margin:0}
a{color:var(--basil);text-underline-offset:2px}
strong{font-weight:600}
em{font-style:italic}

.label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--basil-2)}
.lede{font-size:1.18rem;color:var(--ink-2)}
.fine{font-size:.85rem;color:var(--ink-3);line-height:1.55}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule);background:var(--ground)}
.nav-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;padding-block:20px 18px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--ink);
  text-decoration:none;letter-spacing:.01em;margin-right:auto}
.brand span{display:block;font-family:var(--f-body);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);margin-top:2px}
.nav a.n{font-size:.9rem;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav a.n:hover,.nav a.n[aria-current="page"]{color:var(--basil);text-decoration:underline}
.nav a.cta{font-size:.88rem;font-weight:600;color:var(--ground);background:var(--basil);
  padding:8px 15px;text-decoration:none;white-space:nowrap}
.nav a.cta:hover{background:var(--basil-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav a.cta{color:#14170F}}
:root[data-theme="dark"] .nav a.cta{color:#14170F}

/* ---------- sections ---------- */
section{padding-block:54px}
section.tight{padding-block:38px}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}

.hero{padding-block:60px 46px;border-bottom:1px solid var(--rule)}
.hero .rules{display:flex;flex-direction:column;gap:3px;margin-bottom:24px;max-width:120px}
.hero .rules span{display:block;height:1px;background:var(--rule-2)}
.hero .rules span:last-child{height:3px;background:var(--basil)}
.hero h1 em{color:var(--basil)}

/* ---------- two doors ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.door{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--basil);
  padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.door.soon{border-top-color:var(--awning)}
.door h2{font-size:1.6rem}
.door p{color:var(--ink-2);font-size:.98rem}
.door .status{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--basil)}
.door.soon .status{color:var(--awning)}
.door .go{margin-top:auto;padding-top:6px}

/* ---------- generic cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--rule);padding:22px;display:flex;
  flex-direction:column;gap:9px}
.card p{font-size:.95rem;color:var(--ink-2)}

/* ---------- zones ---------- */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.zone{border-top:3px solid var(--basil);padding-top:15px;display:flex;flex-direction:column;gap:9px}
.zone h3{font-family:var(--f-display);font-size:1.3rem;font-weight:500}
.zone .day{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.zone .towns{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* ---------- steps ---------- */
ol.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;counter-reset:s}
ol.steps li{display:grid;grid-template-columns:42px 1fr;gap:18px;counter-increment:s}
ol.steps li::before{content:counter(s);font-family:var(--f-display);font-size:1.7rem;
  color:var(--basil);line-height:1}
ol.steps h3{margin-bottom:5px}
ol.steps p{font-size:.97rem;color:var(--ink-2)}

/* ---------- lists ---------- */
ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.ticks li{display:grid;grid-template-columns:16px 1fr;gap:12px;font-size:.98rem}
ul.ticks li::before{content:"—";color:var(--basil-2);line-height:1.6}

/* ---------- faq ---------- */
.qa{border-top:1px solid var(--rule);padding-block:20px;display:flex;flex-direction:column;gap:9px}
.qa:last-of-type{border-bottom:1px solid var(--rule)}
.qa h3{font-size:1.05rem}
.qa p{color:var(--ink-2);font-size:.98rem}

/* ---------- callout ---------- */
.note{background:var(--basil-wash);border-left:3px solid var(--basil);padding:20px 22px;
  display:flex;flex-direction:column;gap:9px}
.note.warm{background:var(--awning-wash);border-left-color:var(--awning)}
.note h3{color:var(--basil)}
.note.warm h3{color:var(--awning)}
.note p{font-size:.97rem;color:var(--ink-2)}

/* ---------- forms ---------- */
.formbox{background:var(--surface);border:1px solid var(--rule-2);padding:30px 26px;
  display:flex;flex-direction:column;gap:18px}
form{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;min-width:0}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
input,select,textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--ground);
  border:1px solid var(--rule-2);padding:12px 13px;border-radius:0;width:100%;min-width:0;
}
textarea{resize:vertical;min-height:96px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--basil);outline-offset:1px}
button{font-family:var(--f-body);font-size:1rem;font-weight:600;background:var(--basil);
  color:var(--ground);border:none;padding:13px 28px;cursor:pointer;border-radius:0;align-self:flex-start}
button:hover{background:var(--basil-2)}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button{color:#14170F}}
:root[data-theme="dark"] button{color:#14170F}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.confirm{background:var(--basil-wash);border-left:3px solid var(--basil);padding:16px 18px;
  font-size:.97rem;color:var(--ink-2)}
.confirm strong{color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:20px;padding-block:34px 46px}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.foot h3{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);margin-bottom:10px}
.foot a{display:block;font-size:.92rem;color:var(--ink-2);text-decoration:none;padding-block:3px}
.foot a:hover{color:var(--basil);text-decoration:underline}
.foot-base{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule)}

@media (max-width:560px){
  body{font-size:16px}
  .nav-in{gap:8px 16px}
  .brand{flex:1 1 100%;margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--basil);outline-offset:2px}

/* ---------- club offer ---------- */
.offer{background:var(--surface);border:1px solid var(--rule-2);border-top:4px solid var(--awning);
  padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.offer-math{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.offer-math>div{display:flex;flex-direction:column;gap:2px}
.o-n{font-family:var(--f-display);font-size:2rem;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.o-n.strike{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.o-l{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3)}
.o-x{font-family:var(--f-display);font-size:1.3rem;color:var(--rule-2);align-self:center}
.offer-line{border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.o-big{font-family:var(--f-display);font-size:1.5rem;line-height:1.2;color:var(--ink)}
.o-big strong{color:var(--awning);font-weight:500}
.o-sub{font-size:.93rem;color:var(--ink-2)}

/* ---------- club months ---------- */
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.month{background:var(--surface);border:1px solid var(--rule);padding:22px;
  display:flex;flex-direction:column;gap:10px}
.m-when{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--basil-2)}
.m-name{font-family:var(--f-display);font-size:1.3rem;font-weight:500;line-height:1.15}
.m-note{font-size:.93rem;color:var(--ink-2)}
.m-items{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:6px}
.m-items li{font-size:.9rem;color:var(--ink-2);display:grid;grid-template-columns:14px 1fr;gap:9px}
.m-items li::before{content:"\00B7";color:var(--basil);font-weight:700;line-height:1.5}

/* ---------- photography ---------- */
figure{margin:0}
.shot{display:block;overflow:hidden;background:var(--surface-2);border:1px solid var(--rule)}
.shot img{width:100%;display:block}
figcaption{margin-top:10px;font-size:.84rem;line-height:1.5;color:var(--ink-3);
  max-width:46ch}

/* hero with a photo beside the type */
.hero-split{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:880px){
  .hero-split{grid-template-columns:1.02fr .98fr;gap:56px}
  .hero-split .hs-type{padding-block:10px}
}
.hero-split .shot{border:none}

/* full-bleed-ish wide band */
.band{margin-block:0}
.band .shot{border-inline:none}

/* editorial gallery — every photo keeps its own shape, nothing is cropped */
.gallery{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:720px){
  .gallery{grid-template-columns:1fr 1fr;gap:30px}
  .gallery .g-wide{grid-column:1 / -1}
}
.gallery figcaption{max-width:none}

/* ---------- dark product band (pasta shapes) ---------- */
.dark{background:#0B0B0B;color:#EDEEE6;padding-block:58px}
.dark h1,.dark h2,.dark h3{color:#F6F3E9}
.dark h1 em,.dark h2 em{color:#E8C44A}
.dark .label{color:#E8C44A}
.dark .lede,.dark p{color:#BDBCB2}
.dark a{color:#E8C44A}

.shapes{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 4px;margin-top:30px}
@media(min-width:640px){.shapes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.shapes{grid-template-columns:repeat(4,1fr)}}
.shape{background:#000;padding-bottom:16px}
.shape img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
.shape .sn{font-family:var(--f-display);font-size:1.12rem;line-height:1.2;color:#F6F3E9;
  margin:12px 14px 0}
.shape .sw{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#8C8A7E;
  margin:6px 14px 0}
.shape .sd{font-size:.86rem;line-height:1.5;color:#A8A79C;margin:8px 14px 0}

/* ---------- order block ---------- */
.order{background:var(--surface);border:1px solid var(--rule-2);border-top:3px solid var(--basil);
  padding:28px;display:flex;flex-direction:column;gap:22px}
@media(min-width:760px){.order{padding:34px 38px}}
.order-top{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline}
.order-top h2{flex:1 1 auto;min-width:0}
.order-price{font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--basil);
  font-variant-numeric:tabular-nums;flex:none}
.order-price small{font-family:var(--f-body);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:6px}
ul.inbox{list-style:none;margin:0;padding:0;display:grid;gap:9px}
@media(min-width:620px){ul.inbox{grid-template-columns:1fr 1fr;gap:9px 26px}}
ul.inbox li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.96rem;
  color:var(--ink-2);line-height:1.45}
ul.inbox li::before{content:"";width:7px;height:7px;background:var(--basil);
  border-radius:50%;margin-top:8px}
.pick{border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.pick > p{font-size:.93rem;color:var(--ink-2)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(min-width:620px){.opts{grid-template-columns:repeat(4,1fr)}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;text-align:center;padding:13px 8px;border:1px solid var(--rule-2);
  background:var(--ground);font-size:.95rem;cursor:pointer;transition:background .12s,border-color .12s}
.opt input:checked + span{background:var(--basil);border-color:var(--basil);color:var(--ground);
  font-weight:600}
.opt input:focus-visible + span{outline:2px solid var(--basil);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .opt input:checked + span{color:#14170F}}
:root[data-theme="dark"] .opt input:checked + span{color:#14170F}
.buy{display:block;text-align:center;background:var(--basil);color:var(--ground);
  font-family:var(--f-body);font-size:1.05rem;font-weight:700;letter-spacing:.01em;
  padding:17px 20px;text-decoration:none;border:none;cursor:pointer}
.buy:hover{background:var(--basil-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .buy{color:#14170F}}
:root[data-theme="dark"] .buy{color:#14170F}
.order-fine{font-size:.85rem;color:var(--ink-3);line-height:1.55}