/* ============================================================
   CINDER & SALT — a midnight bakery
   Warm dark: near-black kitchen lit by oven-glow.
   ============================================================ */

:root{
  /* palette */
  --void:   #0b0806;   /* page base, warm near-black */
  --char:   #100b08;   /* raised panels */
  --char-2: #17100b;   /* cards */
  --ember:  #ff7a2f;   /* oven ember */
  --amber:  #ffab52;   /* amber glow */
  --glow:   #ffd08a;   /* hottest highlight */
  --crust:  #d99b52;   /* crust gold */
  --crust-line:#3a2413;
  --score:  #f0c98a;
  --seed:   #c9a978;
  --flour:  #f4ead6;   /* flour cream */
  --smoke:  #b8a488;   /* secondary text */
  --ash:    #7c6a58;   /* muted */
  --line:   #2a1f16;   /* hairlines */
  --night:  #4a6b8a;   /* cool night accent (timeline top) */

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 72px);

  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-body: "Petrona", Georgia, serif;
  --f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--flour);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw + 12px,19px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle warm radial wash behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(120% 80% at 30% -10%, rgba(255,122,47,.10), transparent 60%),
    radial-gradient(90% 70% at 90% 8%, rgba(74,107,138,.08), transparent 55%);
  pointer-events:none; z-index:0;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

/* film grain overlay */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* skip link */
.skip{
  position:fixed; left:12px; top:-60px; z-index:60;
  background:var(--amber); color:#160d05; padding:10px 16px; border-radius:8px;
  font-family:var(--f-mono); font-size:13px; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:3px; }

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:linear-gradient(180deg, rgba(11,8,6,.92), rgba(11,8,6,.55) 70%, transparent);
  backdrop-filter:blur(6px);
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--flour); }
.brand__mark{ color:var(--amber); display:inline-flex; filter:drop-shadow(0 0 8px rgba(255,122,47,.4)); }
.brand__word{ font-family:var(--f-display); font-weight:800; letter-spacing:.01em; font-size:19px; }
.topnav{ display:flex; gap:clamp(10px,2vw,26px); flex-wrap:wrap; }
.topnav a{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--smoke); text-decoration:none; text-transform:lowercase;
  transition:color .2s var(--ease);
}
.topnav a:hover{ color:var(--glow); }
@media (max-width:640px){
  .topnav a:nth-child(2),.topnav a:nth-child(3){ display:none; }
}

/* ---------------- shared section furniture ---------------- */
section{ position:relative; z-index:1; }
.section-head{ max-width:var(--maxw); margin:0 auto; padding:clamp(64px,10vh,120px) var(--pad) clamp(28px,5vh,52px); }
.section-kicker{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember); margin:0 0 14px;
}
.section-title{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:.98;
  font-size:clamp(34px,7vw,74px); margin:0; color:var(--flour);
}
.section-intro{
  max-width:52ch; margin:20px 0 0; color:var(--smoke); font-size:clamp(16px,1.2vw+12px,20px);
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ height:230vh; position:relative; }
.hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.oven-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }

.hero__copy{
  position:relative; z-index:2;
  margin-left:auto; width:min(540px,46%);
  padding:0 var(--pad) 0 0;
  transform:translateX(var(--copy-shift,0));
}
.eyebrow{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber); margin:0 0 20px; display:flex; align-items:center; gap:9px;
}
.eyebrow__dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); box-shadow:0 0 12px 2px var(--ember); animation:pulse 3.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.15);} }

.hero__title{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(42px,9vw,96px); margin:0; color:var(--flour);
  text-shadow:0 2px 40px rgba(255,122,47,.25);
}
.hero__lede{ max-width:44ch; margin:22px 0 26px; color:var(--smoke); font-size:clamp(16px,1.1vw+12px,19px); }
.hero__meta{ display:flex; gap:12px; flex-wrap:wrap; }
.stamp{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--crust); border:1px solid var(--line); border-radius:100px; padding:7px 13px;
  background:rgba(255,171,82,.04);
}
.scrollcue{
  position:absolute; left:var(--pad); bottom:26px; z-index:2; margin:0;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash);
}
.scrollcue span{ display:inline-block; animation:bob 2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

@media (max-width:760px){
  .hero{ height:200vh; }
  .hero__stage{ align-items:flex-end; }
  .hero__copy{ width:auto; margin:0; padding:0 var(--pad) 15vh; }
  .hero__title{ font-size:clamp(40px,13vw,64px); }
  .scrollcue{ display:none; }
}

/* ============================================================
   THE BAKES
   ============================================================ */
.bakes{ background:linear-gradient(180deg, transparent, rgba(16,11,8,.6) 20%, var(--char) 100%); padding-bottom:clamp(40px,8vh,90px); }
.bake-list{ list-style:none; margin:0 auto; padding:0 var(--pad); max-width:var(--maxw); display:grid; gap:clamp(20px,3vw,34px); grid-template-columns:repeat(2,1fr); }
.bake{
  grid-column:span 1;
  display:flex; gap:clamp(16px,2.4vw,30px); align-items:center;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,122,47,.07), transparent 60%),
    var(--char-2);
  border:1px solid var(--line); border-radius:20px;
  padding:clamp(18px,2.4vw,30px);
  min-width:0;
}
.bake--wide{ grid-column:1 / -1; }
.bake--wide .bake__plate{ flex:0 0 clamp(180px,26vw,300px); }
.bake__plate{ flex:0 0 clamp(120px,18vw,200px); min-width:0; }
.bake__plate svg{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.plate-shadow{ fill:rgba(0,0,0,.45); }
.bake__body{ min-width:0; flex:1; }
.bake__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bake__name{ font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2.2vw,28px); margin:0; letter-spacing:-.01em; color:var(--flour); }
.bake__price{ font-family:var(--f-mono); font-size:15px; color:var(--amber); }
.bake__note{ margin:10px 0 16px; color:var(--smoke); font-size:15.5px; line-height:1.55; }
.bake__spec{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; }
.bake__spec > div{ min-width:0; }
.bake__spec dt{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); margin:0 0 3px; }
.bake__spec dd{ margin:0; font-family:var(--f-mono); font-size:13px; color:var(--crust); }

@media (max-width:720px){
  .bake-list{ grid-template-columns:1fr; }
  .bake,.bake--wide{ grid-column:1 / -1; flex-direction:column; text-align:left; align-items:stretch; }
  .bake__plate,.bake--wide .bake__plate{ flex:none; max-width:220px; margin:0 auto; }
  .bake__body{ text-align:center; }
  .bake__spec{ justify-content:center; }
  .bake__row{ justify-content:center; gap:16px; }
}

/* ============================================================
   THROUGH THE NIGHT — timeline
   ============================================================ */
.night{ background:var(--char); padding-bottom:clamp(60px,10vh,120px); }
.timeline{
  list-style:none; margin:0 auto; padding:0 var(--pad); max-width:760px; position:relative;
}
.timeline::before{
  content:""; position:absolute; left:calc(var(--pad) + 64px); top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--night), var(--ash) 42%, var(--amber) 78%, var(--ember));
  border-radius:2px;
}
.tl{ position:relative; display:grid; grid-template-columns:64px 1fr; gap:clamp(18px,3vw,34px); padding:14px 0 clamp(20px,3vh,34px); }
.tl__time{
  font-family:var(--f-mono); font-size:14px; color:var(--smoke); text-align:right; padding-top:2px;
  letter-spacing:.02em;
}
.tl__card{ position:relative; padding-left:26px; }
.tl__card::before{
  content:""; position:absolute; left:-4px; top:7px; width:13px; height:13px; border-radius:50%;
  background:var(--char); border:2px solid var(--ash);
  box-shadow:0 0 0 4px var(--char);
}
.tl--hot .tl__card::before{ border-color:var(--ember); background:var(--ember); box-shadow:0 0 16px 3px rgba(255,122,47,.7),0 0 0 4px var(--char); }
.tl--dawn .tl__card::before{ border-color:var(--amber); background:var(--amber); box-shadow:0 0 14px 2px rgba(255,171,82,.6),0 0 0 4px var(--char); }
.tl__card h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(19px,2.2vw,25px); margin:0 0 6px; color:var(--flour); }
.tl--hot .tl__card h3{ color:var(--glow); }
.tl__card p{ margin:0; color:var(--smoke); font-size:15.5px; max-width:46ch; }

@media (max-width:520px){
  .timeline::before{ left:calc(var(--pad) + 46px); }
  .tl{ grid-template-columns:46px 1fr; gap:16px; }
  .tl__time{ font-size:12.5px; }
}

/* ============================================================
   THE GRAIN
   ============================================================ */
.grain-sec{ background:linear-gradient(180deg, var(--char), var(--void)); }
.grain-sec__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(64px,10vh,120px) var(--pad);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px); align-items:start;
}
.pullquote{ margin:26px 0 0; border-left:3px solid var(--ember); padding-left:22px; }
.pullquote p{
  font-family:var(--f-display); font-weight:500; font-size:clamp(21px,2.6vw,30px); line-height:1.2;
  letter-spacing:-.01em; color:var(--flour); margin:0;
}
.pullquote em{ color:var(--amber); font-style:italic; font-family:var(--f-body); }
.grain-sec__body{ margin:24px 0 0; color:var(--smoke); max-width:50ch; }

.grain-stats{ margin:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.gstat{ background:var(--char-2); padding:22px clamp(18px,2.4vw,26px); }
.gstat dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin:0 0 6px; }
.gstat dd{ font-family:var(--f-display); font-weight:700; font-size:clamp(26px,4vw,40px); margin:0; color:var(--crust); letter-spacing:-.01em; }
.gstat p{ margin:8px 0 0; font-size:14px; color:var(--smoke); }

@media (max-width:820px){
  .grain-sec__inner{ grid-template-columns:1fr; }
  .grain-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:440px){ .grain-stats{ grid-template-columns:1fr; } }

/* ============================================================
   FIND US
   ============================================================ */
.find{ background:var(--void); }
.find__grid{
  max-width:var(--maxw); margin:0 auto; padding:clamp(64px,10vh,120px) var(--pad);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.find__addr{ margin:22px 0 0; color:var(--smoke); max-width:44ch; }
.find__coords{ font-family:var(--f-mono); font-size:14px; color:var(--ember); margin:18px 0 0; letter-spacing:.04em; }
.find__hours{
  background:
    radial-gradient(140% 120% at 90% 0%, rgba(255,122,47,.1), transparent 60%),
    var(--char-2);
  border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,38px);
}
.find__hours-h{ font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2.6vw,28px); margin:0 0 18px; color:var(--glow); }
.hours{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:13.5px; }
.hours li:last-child{ border-bottom:none; }
.hours li span:first-child{ color:var(--flour); }
.hours li span:last-child{ color:var(--smoke); text-align:right; }
.hours--dark span:first-child{ color:var(--ash); }
.hours--dark span:last-child{ color:var(--ash); }
.find__foot{ margin:18px 0 0; font-size:14px; color:var(--ash); font-style:italic; }

@media (max-width:760px){ .find__grid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:linear-gradient(180deg, var(--void), var(--char)); }
.contact__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(64px,10vh,120px) var(--pad); }
.contact__intro{ max-width:46ch; margin:20px 0 34px; color:var(--smoke); }
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; max-width:680px; }
.cfield{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.cfield--full{ grid-column:1 / -1; }
.cfield label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); }
.cfield input,.cfield textarea{
  font-family:var(--f-body); font-size:16px; color:var(--flour);
  background:var(--char-2); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; width:100%; resize:vertical;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cfield input::placeholder,.cfield textarea::placeholder{ color:#6b5b4b; }
.cfield input:focus,.cfield textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,171,82,.15); }
.cform__btn{
  grid-column:1 / -1; justify-self:start;
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:.03em;
  color:#180d04; background:linear-gradient(180deg,var(--glow),var(--amber));
  border:none; border-radius:100px; padding:14px 26px; cursor:pointer;
  box-shadow:0 6px 24px rgba(255,122,47,.28);
  transition:transform .18s var(--ease), box-shadow .2s var(--ease);
}
.cform__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,122,47,.4); }
.cform__btn:active{ transform:translateY(0); }
.cform__note{ grid-column:1 / -1; margin:2px 0 0; font-family:var(--f-mono); font-size:13px; color:var(--amber); }

@media (max-width:560px){ .cform{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--char); border-top:1px solid var(--line); padding:clamp(40px,7vh,72px) var(--pad) 40px; position:relative; z-index:1; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 24px; }
.footer__brand{ font-family:var(--f-display); font-weight:800; font-size:clamp(28px,5vw,46px); color:var(--flour); }
.footer__tag{ margin:0; color:var(--smoke); font-style:italic; }
.footer__row{
  max-width:var(--maxw); margin:28px auto 0; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--f-mono); font-size:12px; color:var(--ash);
}
.footer__row a{ color:var(--crust); text-decoration:none; }
.footer__row a:hover{ color:var(--glow); }

/* ============================================================
   GUIDE PAGE (shared identity, own layout)
   ============================================================ */
.guide-wrap{ max-width:820px; margin:0 auto; padding:0 var(--pad); }
.guide-hero{ padding:clamp(60px,12vh,130px) 0 clamp(30px,5vh,50px); border-bottom:1px solid var(--line); }
.guide-hero h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(38px,8vw,72px); line-height:.98; letter-spacing:-.02em; margin:14px 0 0; }
.guide-hero p{ color:var(--smoke); max-width:56ch; margin:18px 0 0; }
.guide-sec{ padding:clamp(40px,7vh,72px) 0; border-bottom:1px solid var(--line); }
.guide-sec h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(24px,4vw,38px); letter-spacing:-.01em; margin:0 0 8px; }
.guide-sec h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(18px,2.4vw,22px); margin:26px 0 6px; color:var(--glow); }
.guide-sec p,.guide-sec li{ color:var(--smoke); }
.guide-sec ul{ padding-left:20px; }
.guide-sec li{ margin:6px 0; }
.guide-sec strong{ color:var(--flour); }
.guide-lead{ font-size:clamp(17px,1.4vw+12px,21px); color:var(--flour) !important; }
pre{
  background:var(--char-2); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; overflow-x:auto; margin:16px 0;
}
pre code{ font-family:var(--f-mono); font-size:13px; color:var(--score); line-height:1.6; white-space:pre; }
:not(pre) > code{ font-family:var(--f-mono); font-size:.9em; color:var(--crust); background:var(--char-2); padding:1px 6px; border-radius:5px; }
.scorecard{ list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.scorecard li{ background:var(--char-2); padding:14px 16px; display:flex; justify-content:space-between; align-items:baseline; font-family:var(--f-mono); font-size:13px; color:var(--smoke); margin:0; }
.scorecard b{ color:var(--amber); font-size:16px; }
.guide-back{ display:inline-block; margin:18px 0 0; font-family:var(--f-mono); font-size:13px; color:var(--crust); text-decoration:none; }
.guide-back:hover{ color:var(--glow); }
.passlist{ list-style:none; padding:0; margin:16px 0 0; }
.passlist li{ padding:16px 0; border-top:1px solid var(--line); }
.passlist li:first-child{ border-top:none; }
.passlist .tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); }

/* ============================================================
   404
   ============================================================ */
.nf{ min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px var(--pad); }
.nf__big{ font-family:var(--f-display); font-weight:800; font-size:clamp(80px,22vw,220px); line-height:.86; letter-spacing:-.03em; color:var(--flour); text-shadow:0 4px 60px rgba(255,122,47,.3); }
.nf h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(22px,4vw,34px); margin:18px 0 0; }
.nf p{ color:var(--smoke); max-width:42ch; margin:16px 0 30px; }
.nf a{ font-family:var(--f-mono); font-size:14px; color:#180d04; background:linear-gradient(180deg,var(--glow),var(--amber)); padding:13px 26px; border-radius:100px; text-decoration:none; box-shadow:0 6px 24px rgba(255,122,47,.28); }