/* ============================================================
   Bon Gou Peyi — the store
   Separate site from the favors business. Same brand, own building.
   Palette and display face are read off the real packaging: the
   REVIVAL bag sets Cinzel-like engraved caps in gold on warm ink.
   ============================================================ */
:root{
  --ink:#100d0a;
  --ink-2:#1a1510;
  --ink-3:#241c15;
  --gold:#c8963e;
  --gold-deep:#a9772a;
  --gold-soft:#dcb968;
  --cream:#f6efe3;
  --paper:#faf6ef;
  --paper-2:#f2e9db;
  --text:#2b241c;
  --text-soft:#6b6154;
  --line:#e6dccb;
  --shadow:0 18px 50px -22px rgba(30,20,8,.45);
  --shadow-sm:0 8px 24px -14px rgba(30,20,8,.4);
  --serif:"Cormorant Garamond",Georgia,serif;
  --display:"Cinzel",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--sans);color:var(--text);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{position:relative}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);
  color:var(--cream);padding:12px 18px;border-radius:0 0 10px 10px;
  font-family:var(--sans);font-size:.9rem;letter-spacing:.04em;transition:top .2s ease;
}
.skip-link:focus{top:0;outline:2px solid var(--gold-soft);outline-offset:2px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.dark :focus-visible,.footer :focus-visible,.nav :focus-visible{outline-color:var(--gold-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .showcase{background-attachment:scroll}
}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:.01em}
h1{font-size:clamp(2.5rem,6.2vw,5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
em{font-style:italic;font-family:var(--serif);color:var(--gold-soft);font-weight:600}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);
  font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2.2em;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:.25s ease;white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#1c1408;box-shadow:var(--shadow-sm)}
.btn-gold:hover{transform:translateY(-2px);background:var(--gold-deep)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(246,239,227,.45);color:var(--cream)}
.btn-ghost:hover{background:rgba(246,239,227,.1);border-color:var(--cream)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:16px clamp(20px,4vw,48px);
  background:rgba(16,13,10,.9);backdrop-filter:blur(10px);
  transition:padding .35s ease,box-shadow .35s ease;
}
.nav.scrolled{padding:10px clamp(20px,4vw,48px);box-shadow:0 10px 30px -18px #000}
.nav-brand img{height:62px;width:auto;transition:height .35s}
.nav.scrolled .nav-brand img{height:48px}
@media(max-width:560px){.nav-brand img{height:50px}}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  color:var(--cream);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.88;transition:.2s;position:relative;
}
.nav-links a:not(.btn):hover{opacity:1;color:var(--gold-soft)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold-soft);transition:width .3s}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:70}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--cream);margin:5px 0;transition:.3s}
@media(max-width:940px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--ink);
    flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);transition:transform .35s ease,visibility .35s;padding:40px;
    visibility:hidden;
  }
  .nav-links.open{transform:none;visibility:visible}
}

/* ---------- Hero ----------
   The photograph is the frame, not half of it. Type sits in the upper
   third, which the still-life deliberately leaves dark and empty. */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
  color:var(--cream);text-align:center;padding:clamp(96px,11vh,150px) 0 0;
  background:
    linear-gradient(180deg,rgba(16,13,10,.9) 0%,rgba(16,13,10,.76) 24%,rgba(16,13,10,.44) 40%,rgba(16,13,10,.08) 56%,rgba(16,13,10,0) 68%),
    url("../img/hero-lineup.jpg?v=3") center bottom/cover no-repeat;
  background-color:var(--ink);
}
.hero h1{max-width:15ch;margin:0 auto;font-size:clamp(2.3rem,5.2vw,4.4rem);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero p{
  font-family:var(--serif);font-size:clamp(1.05rem,1.8vw,1.35rem);
  max-width:44ch;margin:18px auto 0;color:rgba(246,239,227,.88);
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.hero-cta{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px}
.hero-link{font-size:.9rem;letter-spacing:.04em;color:var(--gold-soft);border-bottom:1px solid rgba(220,185,104,.4);padding-bottom:2px}
.hero-link:hover{border-color:var(--gold-soft)}
@media(max-width:760px){
  .hero{background-position:60% bottom;padding-top:132px}
  .hero h1{max-width:none}
}

/* ---------- Bands ---------- */
.band{padding:clamp(72px,9vw,124px) 0}
.band.paper2{background:var(--paper-2)}
.band.dark{background:var(--ink);color:var(--cream)}
.band.dark h2,.band.dark h3{color:var(--cream)}
.band.dark p{color:rgba(246,239,227,.78)}

/* ---------- Statement ---------- */
.statement{text-align:center;max-width:900px;margin:0 auto}
.statement .crest{height:76px;width:auto;margin:0 auto 26px;object-fit:contain;background:var(--ink);border-radius:12px;padding:10px 16px}
.statement .big{font-family:var(--serif);font-size:clamp(1.4rem,2.9vw,2.05rem);line-height:1.45;color:var(--text)}
.statement .big b{color:var(--gold-deep);font-weight:600}
.rule{width:88px;height:2px;background:var(--gold);margin:34px auto 0}

/* ---------- Section heads ---------- */
.sec-head{margin-bottom:clamp(44px,5vw,68px);max-width:760px}
.sec-head p{color:var(--text-soft);margin-top:14px;font-size:1.05rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.band.dark .sec-head p{color:rgba(246,239,227,.72)}

/* ---------- The two roasts: an asymmetric pair, not two equal cards ------- */
.roasts{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,44px);align-items:stretch}
@media(max-width:900px){.roasts{grid-template-columns:1fr}}
/* The bag had the copy laid over it and a scrim in between. A 12 oz bag is
   nearly as tall as the card, so there was no clear part of it to write on and
   the roast name sat across the label. The product gets its own light now, and
   the words get solid ground. */
.roast{
  border-radius:4px;overflow:hidden;background:var(--ink-2);color:var(--cream);
  display:flex;flex-direction:column;min-height:clamp(430px,52vw,610px);
}
.roast-shot{
  flex:1;min-height:220px;display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,3vw,44px) 24px;
  background:radial-gradient(115% 85% at 50% 26%,#2b221a 0%,#191410 55%,#0e0b08 100%);
}
.roast-shot img{height:100%;max-height:clamp(280px,31vw,430px);width:auto;max-width:none;object-fit:contain}
.roast .roast-body{background:var(--ink);padding:clamp(24px,2.6vw,34px);border-top:1px solid rgba(220,185,104,.18)}
.roast h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.roast .grind{
  display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid rgba(220,185,104,.4);
  border-radius:999px;padding:.35em 1em;margin-bottom:14px;
}
.roast .notes{font-family:var(--serif);font-size:1.1rem;color:rgba(246,239,227,.8);margin-top:8px}
.roast .price{font-family:var(--display);font-size:1.5rem;color:var(--gold-soft);margin-top:16px}
.roast .price small{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,239,227,.6);display:block;margin-top:2px}
.roast .btn{margin-top:22px;align-self:flex-start}

/* ---------- Showcase ---------- */
.showcase{
  min-height:62vh;display:flex;align-items:center;color:var(--cream);text-align:center;
  background:
    linear-gradient(180deg,rgba(16,13,10,.5) 0%,rgba(16,13,10,.74) 55%,rgba(16,13,10,.88) 100%),
    url("../img/thiotte.jpg") center/cover fixed;
}
.showcase h2{max-width:18ch;margin:0 auto}
.showcase p{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.35rem);color:rgba(246,239,227,.8);max-width:56ch;margin:22px auto 0}

/* ---------- The pantry ----------
   Products sit ON the tile, not marooned in the middle of one. The photo
   is 88% of the tile height and hangs off the baseline; the tile is only
   as tall as it needs to be. */
.pantry{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.pantry{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pantry{grid-template-columns:1fr}}
.pan{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;transition:.3s ease;
}
.pan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pan-shot{
  position:relative;background:linear-gradient(180deg,#fffdf9,var(--paper-2));
  height:clamp(230px,26vw,300px);display:flex;align-items:flex-end;justify-content:center;
  padding:18px 18px 0;
}
.pan-shot img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom}
.pan-body{padding:22px 24px 26px;border-top:1px solid var(--line)}
.pan-body h3{font-size:1.22rem}
.pan-size{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-top:6px}
.pan-body p{color:var(--text-soft);margin-top:12px;font-size:.96rem}
.pan-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px}
.pan-price{font-family:var(--display);font-size:1.25rem;color:var(--text)}
.pan-add{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--gold);color:var(--gold-deep);
  padding-bottom:3px;cursor:pointer;transition:.2s;
}
.pan-add:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Order form ---------- */
/* Grid children default to min-width:auto, so a column refuses to shrink below
   its min-content and pushes the page sideways on a phone. */
.order-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.order-grid>*{min-width:0}
.order-note li{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){.order-grid{grid-template-columns:1fr}}
.order-note{list-style:none;margin-top:26px;display:grid;gap:12px}
.order-note li{display:flex;gap:12px;align-items:flex-start;color:rgba(246,239,227,.8);font-size:.95rem}
.order-note svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--gold-soft)}
form.order{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:.98rem;color:var(--cream);
  background:rgba(246,239,227,.06);border:1px solid rgba(246,239,227,.18);
  border-radius:3px;padding:.85em 1em;transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:rgba(246,239,227,.1);
}
.field textarea{min-height:120px;resize:vertical}
.field select option{background:var(--ink);color:var(--cream)}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.form-msg{font-size:.92rem;min-height:1.4em}
.form-msg.ok{color:var(--gold-soft)}
.form-msg.err{color:#e79c8a}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(246,239,227,.72);padding:64px 0 32px;font-size:.92rem}
.footer a:hover{color:var(--gold-soft)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(246,239,227,.12)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:30px}}
.foot-top img{height:70px;width:auto}
.foot-col h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;margin-bottom:9px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.84rem;color:rgba(246,239,227,.5)}

/* ---------- Legal pages ---------- */
main.legal{max-width:820px;margin:0 auto;padding:150px 24px 90px}
main.legal h1{font-size:clamp(2rem,4vw,2.9rem)}
main.legal h2{font-size:1.35rem;margin:38px 0 12px}
main.legal p,main.legal li{color:var(--text-soft);margin-bottom:12px}
main.legal ul{padding-left:22px}
main.legal .updated{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:10px 0 30px}