/* ============================================================
   Ember & Oak — small-batch fermented hot sauce
   Single-page marketing site styles
   ============================================================ */

:root{
  --bg:            #120E0B;
  --bg-2:          #1A1310;
  --panel:         #1E1611;
  --panel-2:       #241A13;
  --line:          #3A2A20;
  --line-soft:     #2A1F18;

  --ink:           #F7EFE4;   /* primary text on dark  */
  --ink-2:         #E4D3BE;   /* secondary            */
  --ink-3:         #B29E88;   /* muted (AA on --bg)   */

  --ember:         #E06A22;
  --ember-bright:  #F4A24D;
  --ember-deep:    #C2410C;
  --focus:         #FFC061;

  --s-ember:       #C2410C;
  --s-oak:         #8A5A2B;
  --s-field:       #6C8B3D;
  --s-ash:         #3A2A20;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow: 0 18px 48px -24px rgba(0,0,0,.85);
  --maxw: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .25vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem,1.35rem + 4.6vw,4.1rem); }
h2{ font-size:clamp(1.65rem,1.15rem + 2.4vw,2.75rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem); }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

a{ color:var(--ember-bright); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:#FFD9A6; }

::selection{ background:var(--ember); color:#170F0A; }

/* ---------- focus: always visible on keyboard nav ---------- */
:focus{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.btn:focus-visible,.nav a:focus-visible,.skip:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

.skip{
  position:absolute; left:12px; top:-72px; z-index:100;
  background:var(--ember); color:#170F0A; font-weight:700;
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .15s ease;
}
.skip:focus{ top:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
section{ padding-block:clamp(2.75rem,6vw,5rem); }
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ember-bright); margin:0 0 .85rem;
}
.lede{ font-size:clamp(1.05rem,1rem + .5vw,1.3rem); color:var(--ink-2); max-width:60ch; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:inherit; font-weight:650; line-height:1;
  padding:.9rem 1.35rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
  min-height:44px;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--ember); color:#170F0A; border-color:var(--ember); }
.btn--primary:hover{ background:var(--ember-bright); border-color:var(--ember-bright); color:#170F0A; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ember-bright); color:var(--ink); }
.btn--sm{ padding:.6rem 1rem; font-size:.92rem; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(18,14,11,.93);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{ display:flex; align-items:center; gap:clamp(.75rem,3vw,2rem); flex-wrap:wrap; padding-block:.7rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink);
        font-family:var(--serif); font-size:1.2rem; letter-spacing:.01em; margin-right:auto; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand b{ font-weight:600; }
.brand span{ color:var(--ink-3); font-size:.82rem; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; display:block; line-height:1; }

.nav{ display:flex; flex-wrap:wrap; gap:.35rem .35rem; }
.nav a{
  color:var(--ink-2); text-decoration:none; font-size:.93rem; font-weight:550;
  padding:.5rem .7rem; border-radius:999px;
}
.nav a:hover{ color:var(--ink); background:var(--panel-2); }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(120% 90% at 88% 120%, rgba(224,106,34,.34), transparent 62%),
    radial-gradient(80% 60% at 10% -10%, rgba(120,74,44,.28), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:1px solid var(--line-soft);
}
.hero__grid{ display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:820px){ .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.hero h1{ margin-bottom:.35em; }
.hero h1 em{ font-style:normal; color:var(--ember-bright); }
.hero .lede{ margin-bottom:1.6rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1.75rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.hero__meta li{ list-style:none; display:flex; align-items:center; gap:.5rem; }
.hero__meta li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none; }

.lineup{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(.5rem,2.4vw,1.4rem); }
.lineup figure{ margin:0; text-align:center; }
.lineup .bottle{ height:clamp(120px,20vw,208px); width:auto; color:var(--accent); }
.lineup figcaption{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:.55rem; }
.lineup .b1{ --accent:var(--s-ember); } .lineup .b2{ --accent:var(--s-oak); }
.lineup .b3{ --accent:var(--s-field); } .lineup .b4{ --accent:var(--s-ash); }

/* ---------- claim strip ---------- */
.strip{ background:var(--panel); border-block:1px solid var(--line-soft); padding-block:1rem; }
.strip ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.75rem; margin:0; padding:0;
           list-style:none; font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.strip li{ display:flex; align-items:center; gap:.6rem; }
.strip li::before{ content:"◆"; color:var(--ember); font-size:.6rem; }

/* ---------- sauce cards ---------- */
.cards{ display:grid; gap:1.25rem; margin-top:2.25rem;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); }
.sauce{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:1.4rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.85rem;
  box-shadow:var(--shadow);
}
.sauce__art{
  --accent:var(--s-ember);
  height:170px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--panel-2);
  background:radial-gradient(90% 80% at 50% 110%, color-mix(in srgb,var(--accent) 55%,transparent), transparent 70%), var(--panel-2);
  border:1px solid var(--line-soft);
}
.sauce__art .bottle{ height:148px; width:auto; color:var(--accent); }
.sauce--ember .sauce__art{ --accent:var(--s-ember); }
.sauce--oak   .sauce__art{ --accent:var(--s-oak); }
.sauce--field .sauce__art{ --accent:var(--s-field); }
.sauce--ash   .sauce__art{ --accent:var(--s-ash); }
.sauce h3{ margin:0; display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.sauce h3 .tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400; }
.sauce__notes{ color:var(--ink-2); margin:0; }
.sauce__meta{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-3); margin:0; text-transform:uppercase; }
.sauce__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.35rem; border-top:1px solid var(--line-soft); }
.price{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); }
.price small{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); letter-spacing:.08em; }

.heat{ display:inline-flex; gap:3px; align-items:center; }
.heat i{ width:6px; height:14px; border-radius:2px; background:var(--line); display:block; }
.heat i.on{ background:var(--ember-bright); }
.heat-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); margin-left:.5rem; }

/* ---------- process ---------- */
.process{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.steps{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:1.5rem;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); counter-reset:step; }
.step{ position:relative; padding-top:3.1rem; border-top:1px solid var(--line); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; top:.7rem; left:0; font-family:var(--mono); font-size:.9rem;
  color:var(--ember-bright); letter-spacing:.1em;
}
.step h3{ font-size:1.15rem; }
.step p{ color:var(--ink-2); margin:0; }

/* ---------- club ---------- */
.tiers{ display:grid; gap:1.25rem; margin-top:2.25rem;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.tier{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.75rem; position:relative;
}
.tier--best{ border-color:#7C3A16; border-color:color-mix(in srgb,var(--ember) 55%,var(--line)); background:linear-gradient(180deg,var(--panel-2),var(--panel)); }
.tier__badge{
  position:absolute; top:-.7rem; left:1.4rem; background:var(--ember); color:#170F0A;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:999px; font-weight:700;
}
.tier h3{ margin:0; }
.tier .price{ font-size:1.9rem; }
.tier .price small{ display:block; margin-top:.2rem; }
.tier ul{ margin:.25rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem; color:var(--ink-2); }
.tier li{ display:flex; gap:.6rem; align-items:flex-start; }
.tier li::before{ content:"✓"; color:var(--ember-bright); font-weight:700; }
.tier .btn{ margin-top:auto; }
.club__perks{ display:grid; gap:.5rem 1.5rem; margin:2rem 0 0; padding:0; list-style:none;
              grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); color:var(--ink-2); }
.club__perks li{ display:flex; gap:.6rem; }
.club__perks li::before{ content:"—"; color:var(--ember); }

/* ---------- stockists ---------- */
.stockists{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.stockist-grid{ display:grid; gap:clamp(1.5rem,4vw,3rem); margin-top:2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .stockist-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.shop-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.shop-list li{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
               padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.shop-list b{ font-weight:600; }
.shop-list span{ color:var(--ink-3); font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; }
.wholesale{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1.5rem; }

/* ---------- faq ---------- */
.faq{ margin-top:2rem; border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:1rem;
  padding:1.05rem 0; font-family:var(--serif); font-size:clamp(1.05rem,1rem + .4vw,1.28rem); color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--ember-bright); font-family:var(--sans); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 1.15rem; color:var(--ink-2); max-width:70ch; }

/* ---------- contact / footer ---------- */
.contact{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); border-top:1px solid var(--line-soft); }
.contact-grid{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; }
@media (min-width:760px){ .contact-grid{ grid-template-columns:repeat(3,1fr); } }
.contact h3{ font-size:1.05rem; font-family:var(--mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ember-bright); }
.contact p, .contact address{ color:var(--ink-2); font-style:normal; margin:0 0 .6rem; }
.contact address{ line-height:1.7; }

.site-foot{ border-top:1px solid var(--line-soft); padding-block:2rem; background:var(--bg); }
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between; }
.site-foot p{ margin:0; color:var(--ink-3); font-size:.85rem; }
.site-foot nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.site-foot nav a{ color:var(--ink-3); font-size:.85rem; }
.legal{ border-top:1px solid var(--line-soft); padding-top:1.25rem; margin-top:.5rem; color:var(--ink-3); font-size:.78rem; }

/* small screens */
@media (max-width:560px){
  .brand span{ display:none; }
  .hero__cta .btn{ width:100%; }
  .site-head .wrap{ gap:.5rem; }
  .nav a{ padding:.45rem .55rem; font-size:.88rem; }
}
@media (max-width:379px){
  .nav a{ font-size:.82rem; padding:.4rem .45rem; }
  .lineup{ gap:.4rem; }
}