:root{
  --cream:#f6f1e7;
  --milk:#fffdf8;
  --ink:#1f1a17;
  --tomato:#b82a21;
  --basil:#3f6b36;
  --oil:#d2b24a;
  --muted:#6b605a;
  --max:1180px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --shadow-text:0 2px 4px rgba(0,0,0,.6),0 0 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.02;margin:0 0 .5em}
h1{font-size:clamp(3rem,8.5vw,6.5rem);font-style:italic}
h2{font-size:clamp(2rem,4.5vw,3.2rem)}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.btn{display:inline-block;background:var(--tomato);color:#fff;text-decoration:none;padding:.7rem 1.3rem;border-radius:999px;font-weight:600;border:0;cursor:pointer;font-size:1rem;transition:transform .15s,background .15s}
.btn:hover{background:#951f18;transform:translateY(-1px)}
.btn-big{padding:1rem 2rem;font-size:1.1rem;box-shadow:0 8px 30px rgba(0,0,0,.45)}

.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.9rem 5vw;background:rgba(246,241,231,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(31,26,23,.08)}
.brand{font-family:var(--serif);font-size:1.5rem;text-decoration:none}
.brand em{color:var(--tomato);font-style:italic}
.nav nav{display:flex;gap:1.4rem;align-items:center}
.nav nav a:not(.btn){text-decoration:none;font-weight:500;color:var(--muted)}
.nav nav a:not(.btn):hover{color:var(--ink)}

/* Hero: text always sits on a guaranteed-dark scrim plus a text shadow, whatever the photo does. */
.hero{position:relative;min-height:90vh;display:grid;align-items:end;color:#fff;isolation:isolate;background:#160e0c}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 60%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%),
    linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 75%)}
.hero-copy{padding:8vh 5vw 9vh;max-width:860px;text-shadow:var(--shadow-text)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;font-weight:600;margin:0 0 1rem;color:#f3d9b5}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:36rem;margin:0 0 1.8rem;color:#fff}

.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.5rem;padding:1rem 5vw;background:var(--ink);color:var(--cream);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em}

.gallery{padding:6rem 5vw 4rem;max-width:var(--max);margin:0 auto}
.sub{color:var(--muted);max-width:42rem;margin:0 0 2.5rem;font-size:1.1rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid figure{margin:0;position:relative;overflow:hidden;border-radius:14px;background:#1a1412;aspect-ratio:3/2}
.grid .wide{grid-column:span 2;grid-row:span 2}
.grid .wide2{grid-column:span 2;aspect-ratio:3/1}
.grid .wide2 img{object-position:50% 45%}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.grid figure:hover img{transform:scale(1.05)}
/* Captions get an opaque-enough band so they never fight the cream. */
.grid figcaption{position:absolute;left:.8rem;bottom:.8rem;padding:.45rem .9rem;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.02em;background:rgba(15,10,9,.88);border-radius:999px;backdrop-filter:blur(6px)}

.why{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;padding:5rem 5vw;max-width:var(--max);margin:0 auto;align-items:center}
.why p{font-size:1.15rem;color:#3d3531}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.why li{background:var(--milk);border:1px solid rgba(31,26,23,.08);border-radius:12px;padding:1rem 1.2rem}
.why strong{color:var(--basil)}

.pairings{background:#2a1a16;color:var(--cream);padding:5rem 5vw}
.pairings>*{max-width:var(--max);margin:0 auto}
.pairings{display:grid;grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:center}
.pairings .eyebrow{color:#e0a978}
.pairings h2{color:#fff}
.pairings p{font-size:1.12rem;color:#efe6da}
.pairings ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.8rem}
.pairings li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.9rem 1.1rem;color:#efe6da}
.pairings strong{color:#f0b98a}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair-grid figure{margin:0;position:relative;overflow:hidden;border-radius:14px;background:#1a1412;aspect-ratio:3/2}
.pair-grid .wide{grid-column:span 2}
.pair-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.pair-grid figure:hover img{transform:scale(1.05)}
.pair-grid figcaption{position:absolute;left:.8rem;bottom:.8rem;padding:.45rem .9rem;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.02em;background:rgba(15,10,9,.88);border-radius:999px}

.pull{background:var(--ink);color:var(--cream);padding:4rem 5vw;text-align:center}
.pull blockquote{margin:0 auto;max-width:44rem;font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;font-style:italic}
.pull cite{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;font-size:.9rem;color:#c9bfb3}

.order{background:var(--tomato);color:#fff;padding:5rem 5vw;text-align:center}
.order p{max-width:38rem;margin:0 auto 2rem;font-size:1.1rem}
.order form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.order input{padding:.85rem 1.1rem;border-radius:999px;border:0;min-width:min(22rem,80vw);font-size:1rem;color:var(--ink)}
.order .btn{background:var(--ink)}
.order .btn:hover{background:#000}
.order .fine{margin-top:1.6rem;color:#fbe3df}

footer{padding:2.5rem 5vw;text-align:center;color:var(--muted);font-size:.9rem}
footer p{margin:.3rem 0}
.fine{font-size:.78rem}

@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid .wide{grid-column:span 2;grid-row:span 1}
  .grid .wide2{grid-column:span 2;aspect-ratio:3/2}
  .why,.pairings{grid-template-columns:1fr;gap:2rem}
  .nav nav a:not(.btn){display:none}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.9) 100%)}
}
@media (max-width:480px){
  .grid,.pair-grid{grid-template-columns:1fr}
  .grid .wide,.grid .wide2,.pair-grid .wide{grid-column:span 1}
  .grid .wide2{aspect-ratio:3/2}
}