@font-face { font-family: "Animal Display"; src: url("/static/fonts/ABCMonumentGrotesk-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Animal Mono"; src: url("/static/fonts/ABCMonumentGroteskMono-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Animal Mono"; src: url("/static/fonts/ABCMonumentGroteskMono-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root { --ink:#101820; --paper:#fff; --red:#d6001c; --carrot:#ff9133; --accent:var(--red); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Animal Mono", monospace; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:"Animal Display", Arial Black, sans-serif; font-weight:900; line-height:1.08; letter-spacing:.015em; }

.draft-bar { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:6px 24px; background:var(--ink); color:#fff; font-size:10px; letter-spacing:.08em; }
.concept-switcher { display:flex; flex-wrap:wrap; gap:4px; }
.concept-switcher button { min-height:30px; padding:0 12px; border:1px solid #657078; background:transparent; color:#fff; cursor:pointer; font-size:9px; letter-spacing:.04em; }
.concept-switcher button.active { border-color:var(--accent); background:var(--accent); }

.site-header { position:sticky; top:0; z-index:30; height:112px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 30px; border-bottom:1px solid var(--ink); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.header-mark img { width:clamp(230px,19vw,310px); filter:brightness(0); }
nav { display:flex; gap:42px; font-size:14px; letter-spacing:.035em; text-transform:uppercase; }
nav a { padding:12px 0; border-bottom:2px solid transparent; }
nav a:hover { border-color:var(--accent); }
.language-switcher { justify-self:end; display:flex; border:1px solid var(--ink); }
.language-switcher button { display:grid; width:46px; height:44px; padding:0; border:0; background:#fff; color:var(--ink); place-items:center; cursor:pointer; font-size:11px; }
.language-switcher button.active { background:var(--ink); color:#fff; }

.hero { min-height:calc(100svh - 154px); display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); }
.hero-copy { display:flex; min-width:0; flex-direction:column; justify-content:space-between; gap:40px; padding:34px 30px 30px; background:var(--accent); color:#fff; transition:background .25s ease; }
.eyebrow,.section-label,figcaption,.menu-number,.visit-details span,footer { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
h1 { max-width:860px; font-size:clamp(52px,6.2vw,112px); white-space:pre-line; }
.hero-bottom { display:grid; grid-template-columns:1fr auto; align-items:end; gap:28px; }
.hero-bottom>p { max-width:540px; font-size:clamp(17px,1.4vw,23px); line-height:1.5; }
.hero-cta { display:flex; min-width:145px; height:60px; align-items:center; justify-content:space-between; gap:20px; padding:0 18px; border:1px solid #fff; font-size:11px; }
.hero-cta span { font-size:20px; }
.hero-image { position:relative; min-height:660px; overflow:hidden; background:#eee; }
.hero-image>img { width:100%; height:100%; object-fit:cover; transition:opacity .2s ease; }
.hero-image figcaption { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding:14px 18px; background:#fff; }

[data-concept="direct"] { --accent:#101820; }
[data-concept="direct"] h1 { font-size:clamp(44px,5vw,90px); }
[data-concept="direct"] .hero-image figcaption { background:var(--carrot); }
[data-concept="product"] { --accent:#ff9133; }
[data-concept="product"] .hero-copy { color:var(--ink); }
[data-concept="product"] .hero-cta { border-color:var(--ink); }

.section-pad { padding:38px 30px 84px; }
.section-label { margin-bottom:72px; }
.manifesto-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:8vw; align-items:start; }
.manifesto h2 { max-width:980px; font-size:clamp(46px,5.8vw,100px); }
.manifesto-copy { padding-top:8px; font-size:clamp(18px,1.7vw,27px); line-height:1.35; }
.principles-list { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:48px; padding-top:18px; border-top:5px solid var(--red); font-family:"Animal Display", sans-serif; font-size:clamp(18px,1.6vw,26px); line-height:1.3; letter-spacing:.025em; }

.menu-section { display:grid; grid-template-columns:.72fr 1.28fr; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.menu-section { scroll-margin-top:120px; }
.menu-controls { grid-column:1 / -1; padding:30px; border-bottom:1px solid var(--ink); }
.menu-views,.menu-steps { display:flex; flex-wrap:wrap; gap:10px; }
.menu-views button,.menu-steps a { padding:14px 18px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; }
.menu-views button { font-weight:bold; }
.menu-views button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.menu-views button[data-menu-view="weekly"][aria-pressed="true"] { background:var(--red); border-color:var(--red); }
.menu-view-description { margin:20px 0; max-width:800px; font-size:14px; line-height:1.5; }
.menu-steps a { border-radius:30px; font-size:12px; padding:11px 16px; }
.menu-steps a:hover { background:var(--ink); color:var(--paper); }
.menu-controls :focus-visible { outline:3px solid var(--carrot); outline-offset:3px; }
.menu-heading { display:flex; flex-direction:column; gap:36px; padding:38px 30px; background:var(--ink); color:#fff; }
.menu-heading .section-label { margin-bottom:0; }
.menu-heading h2 { font-size:clamp(40px,4.3vw,78px); color:var(--carrot); }
.menu-heading>p:last-child { max-width:400px; font-size:13px; line-height:1.45; }
.menu-grid { display:grid; }
.menu-column { position:relative; padding:28px 30px; border-bottom:1px solid var(--ink); scroll-margin-top:120px; }
.menu-column:last-child { border-bottom:0; }
.menu-number { position:absolute; top:30px; right:30px; }
.menu-column h3 { margin-bottom:32px; padding-right:100px; font-size:clamp(24px,2.3vw,38px); line-height:1.2; }
.menu-column ul { display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; padding:0; list-style:none; font-size:13px; }
.menu-column li { display:flex; justify-content:space-between; gap:20px; padding-bottom:7px; border-bottom:1px solid rgba(16,24,32,.22); }
.menu-column li b { white-space:nowrap; }
.menu-column .menu-note { margin-top:16px; font-size:13px; }
.menu-column p { max-width:760px; font-size:clamp(16px,1.5vw,23px); line-height:1.45; }
.red-column { background:var(--red); color:#fff; }
.red-column li { border-color:rgba(255,255,255,.35); }
.carrot-column { background:var(--carrot); }
.included { margin-top:26px; font-family:"Animal Display",sans-serif; font-size:25px!important; }

.food-story-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:45px; }
.food-story-heading .section-label { margin:0; align-self:start; }
.food-story-heading h2 { max-width:940px; font-size:clamp(46px,5.8vw,100px); }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gallery-card { position:relative; min-height:560px; overflow:hidden; background:#eee; }
.gallery-wide { grid-column:span 2; min-height:760px; }
.gallery-card img { width:100%; height:100%; object-fit:cover; }
.gallery-card figcaption { position:absolute; left:14px; bottom:14px; padding:8px 10px; background:#fff; }
.gallery-glass-only,.hero-studies { display:none; }
.food-story-heading h2 { white-space:pre-line; }

/* Fourth draft: the original tinted photo studies, using full-resolution sources. */
[data-concept="glass"] { --accent:var(--carrot); }
[data-concept="glass"] .concept-switcher button.active { color:var(--ink); }
[data-concept="glass"] .hero-copy { background:#f7f7f4; color:var(--ink); }
[data-concept="glass"] .hero-cta { border-color:var(--ink); }
[data-concept="glass"] .hero>.hero-image { display:none; }
[data-concept="glass"] .hero-studies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr 1fr; min-height:660px; }
.glass-study { position:relative; min-width:0; min-height:0; overflow:hidden; isolation:isolate; }
.glass-study img { position:absolute; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.glass-study figcaption { position:absolute; left:14px; bottom:14px; padding:7px 9px; background:#fff; color:var(--ink); font-size:10px; }
.glass-study.glass-red,[data-concept="glass"] .gallery-card.glass-red { background:#ef485f; }
.glass-study.glass-white,[data-concept="glass"] .gallery-card.glass-white { background:#f7f7f4; }
.glass-study.glass-carrot,[data-concept="glass"] .gallery-card.glass-carrot { background:var(--carrot); }
.glass-study.glass-sage,[data-concept="glass"] .gallery-card.glass-sage { background:#abb2a5; }
[data-concept="glass"] .gallery-grid { gap:1px; padding:1px; background:var(--ink); }
[data-concept="glass"] .gallery-card { display:block; grid-column:auto; min-height:0; aspect-ratio:1.15; isolation:isolate; }
[data-concept="glass"] .gallery-card img { position:absolute; inset:0; mix-blend-mode:multiply; }
[data-concept="glass"] .hero-studies { gap:1px; background:var(--ink); }

.visit-section { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); }
.visit-title { display:flex; min-height:680px; flex-direction:column; justify-content:space-between; padding:38px 30px; background:var(--red); color:#fff; }
.visit-title h2 { font-size:clamp(50px,6vw,104px); }
.visit-details { display:grid; grid-template-rows:1fr 1fr auto auto; padding:30px; }
.visit-details>div { display:grid; align-content:start; grid-template-columns:120px 1fr; gap:30px; padding:18px 0; border-bottom:1px solid var(--ink); }
.visit-details strong { font-family:"Animal Display",sans-serif; font-size:clamp(22px,2vw,34px); line-height:1.25; letter-spacing:.015em; }
.visit-details a { display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--ink); font-size:12px; }

footer { min-height:130px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:24px 30px; background:var(--ink); color:#fff; }
footer img { width:210px; }
footer p:last-child { justify-self:end; }

@media (max-width:900px) {
  .draft-bar { align-items:flex-start; flex-direction:column; padding:10px 14px; }
  .concept-switcher { width:100%; overflow:auto; }
  .site-header { height:90px; grid-template-columns:1fr auto; padding:0 18px; }
  .header-mark img { width:210px; }
  nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:590px; padding:28px 20px; }
  h1 { font-size:clamp(38px,12vw,78px); }
  .hero-bottom { grid-template-columns:1fr; }
  .hero-cta { width:100%; }
  .hero-image { min-height:510px; }
  [data-concept="glass"] .hero-studies { min-height:0; aspect-ratio:1.15; }
  .section-pad { padding:28px 20px 60px; }
  .section-label { margin-bottom:45px; }
  .manifesto-grid,.menu-section,.visit-section { grid-template-columns:1fr; }
  .manifesto h2,.food-story-heading h2,.menu-heading h2,.visit-title h2 { font-size:clamp(36px,10vw,70px); }
  .manifesto-copy { margin-top:38px; }
  .menu-heading { padding:28px 20px; gap:24px; }
  .menu-controls { padding:24px 20px; }
  .menu-views button { flex:1 1 150px; }
  .menu-column { padding:24px 20px; }
  .menu-column ul { grid-template-columns:1fr; }
  .food-story-heading { align-items:start; flex-direction:column; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-wide { grid-column:auto; min-height:520px; }
  .gallery-card { min-height:480px; }
  .visit-title { min-height:470px; padding:28px 20px; }
  .visit-details { min-height:620px; padding:20px; }
  .visit-details>div { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; }
  footer p:last-child { justify-self:start; }
}

@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} }

.kitchen-copy { margin-top:24px; }
.drink-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; padding:1px 0; background:var(--ink); }
.drink-gallery figure { min-width:0; background:#fff; }
.drink-gallery img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.drink-gallery figcaption { padding:16px; }
@media (max-width:900px) {
  [data-concept="direct"] h1 { font-size:clamp(36px,10vw,70px); }
  .drink-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
