:root {
  --ink: #17140f;
  --paper: #f1eadf;
  --paper-deep: #e5dacb;
  --muted: #7f786d;
  --line: rgba(23, 20, 15, .18);
  --wine: #5b1d25;
  --olive: #535743;
  --display: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--wine); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }

.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 24px clamp(22px, 4vw, 64px);
  color: var(--paper);
  mix-blend-mode: difference;
}
.wordmark { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--display); font-size: 23px; line-height: 1; }
.wordmark em { font-weight: 400; }
.site-header nav { display: flex; gap: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.site-header nav a, .header-cta { opacity: .82; transition: opacity .2s ease; }
.site-header nav a:hover, .header-cta:hover { opacity: 1; }
.header-cta { justify-self: end; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.hero {
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  position: relative;
}
.hero-copy {
  padding: 18vh clamp(28px, 6vw, 96px) 10vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 950px;
}
.eyebrow, .section-kicker {
  margin: 0 0 28px;
  font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}
.hero h1, .manifesto h2, .menu-heading h2, .table-card h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.03em; margin: 0;
}
.hero h1 { font-size: clamp(68px, 8.8vw, 144px); line-height: .78; max-width: 920px; }
.hero h1 i, .manifesto h2 i, .menu-heading h2 i { font-weight: 400; color: #c9b59c; }
.lede { max-width: 610px; margin: 56px 0 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: rgba(241,234,223,.72); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(241,234,223,.2); max-width: 650px; }
.hero-meta div { display: grid; gap: 6px; }
.hero-meta span { color: rgba(241,234,223,.45); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.hero-meta strong { font-size: 12px; font-weight: 400; }
.hero-image { margin: 0; min-height: 100svh; position: relative; overflow: hidden; background: #29251d; }
.hero-image img { filter: saturate(.82) contrast(1.02); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,20,15,.36), transparent 24%), linear-gradient(0deg, rgba(23,20,15,.38), transparent 40%); pointer-events:none; }
.hero-image figcaption { position: absolute; z-index: 2; left: 30px; bottom: 30px; display:flex; gap: 16px; font-size: 11px; letter-spacing:.08em; text-transform:uppercase; }
.hero-image figcaption span { opacity:.5; }
.hero-note { position:absolute; right: calc(50% - 10px); bottom: 42px; transform: translateX(100%); z-index:3; color: var(--paper); display:none; }
.script-mark { font-family: var(--display); font-style: italic; font-size: 100px; line-height:.7; opacity:.2; }

.section-pad { padding: clamp(90px, 11vw, 170px) clamp(24px, 6vw, 96px); }
.manifesto { background: var(--paper); }
.manifesto-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 9vw, 150px); align-items:start; }
.manifesto h2 { font-size: clamp(58px, 7vw, 112px); line-height:.9; }
.manifesto h2 i { color: var(--wine); }
.manifesto-copy { max-width: 560px; padding-top: 12px; }
.manifesto-copy p { margin:0 0 30px; font-size: clamp(16px,1.4vw,20px); line-height:1.72; }

.feature-pair { display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(45px, 9vw, 150px); align-items:center; background: var(--paper-deep); }
.feature-photo { aspect-ratio: 4 / 5; margin:0; overflow:hidden; background:#cabda9; }
.feature-copy { max-width: 620px; }
.course-number { font-family:var(--display); font-size: 44px; color: var(--wine); display:block; margin-bottom:70px; }
.feature-copy h3 { font-family:var(--display); font-weight:400; font-size:clamp(62px,7vw,110px); line-height:.82; letter-spacing:-.03em; margin:0 0 40px; }
.feature-copy > p:last-child { max-width:500px; line-height:1.75; font-size:16px; }

.menu-section { background: var(--ink); color: var(--paper); }
.menu-heading { display:grid; grid-template-columns: .7fr 1.3fr .7fr; gap:40px; align-items:end; padding-bottom:70px; border-bottom:1px solid rgba(241,234,223,.2); }
.menu-heading .section-kicker { align-self:start; }
.menu-heading h2 { font-size:clamp(60px,7vw,106px); line-height:.86; }
.menu-heading p:last-child { color:rgba(241,234,223,.58); line-height:1.65; font-size:14px; max-width:340px; }
.menu-list { display:grid; }
.menu-item { display:grid; grid-template-columns: 70px 1.1fr 1.4fr 112px; gap:32px; align-items:center; min-height:155px; border-bottom:1px solid rgba(241,234,223,.16); padding:22px 0; transition: background .25s ease, padding .25s ease; }
.menu-item:hover { background: rgba(241,234,223,.035); padding-left:12px; padding-right:12px; }
.menu-index { font-size:10px; letter-spacing:.15em; color:rgba(241,234,223,.4); }
.menu-name h3 { margin:0; font-family:var(--display); font-size:clamp(30px,3vw,46px); font-weight:400; }
.menu-name p { margin:6px 0 0; color:#c9b59c; font-family:var(--display); font-style:italic; font-size:18px; }
.menu-description { max-width:520px; color:rgba(241,234,223,.57); line-height:1.6; font-size:13px; }
.menu-thumb { width:88px; height:108px; border:0; padding:0; justify-self:end; overflow:hidden; background:#2b2822; cursor:default; }
.menu-thumb img { transition:transform .5s ease; }
.menu-item:hover .menu-thumb img { transform:scale(1.05); }

.interlude { background:var(--paper); display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(45px,8vw,130px); align-items:end; }
.wide-photo { aspect-ratio: 16 / 9; margin:0; position:relative; background:#c7b9a5; overflow:hidden; }
.wide-photo figcaption { position:absolute; left:18px; bottom:16px; color:white; font-size:10px; letter-spacing:.13em; text-transform:uppercase; text-shadow:0 1px 20px rgba(0,0,0,.5); }
.interlude blockquote { margin:0 0 6%; font-family:var(--display); font-size:clamp(34px,3.8vw,60px); line-height:1.02; font-weight:400; }

.table-section { background:var(--wine); color:var(--paper); display:grid; grid-template-columns:1fr .9fr; gap:clamp(60px,8vw,130px); overflow:hidden; }
.table-card { align-self:center; max-width:700px; }
.table-card h2 { font-size:clamp(65px,7.4vw,118px); line-height:.84; }
.table-intro { max-width:560px; font-size:16px; line-height:1.7; color:rgba(241,234,223,.75); margin:45px 0; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(241,234,223,.25); border-left:1px solid rgba(241,234,223,.25); margin:42px 0; }
.details-grid div { padding:18px; border-right:1px solid rgba(241,234,223,.25); border-bottom:1px solid rgba(241,234,223,.25); display:grid; gap:7px; }
.details-grid span { font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.details-grid strong { font-size:12px; font-weight:400; }
.primary-cta { display:flex; justify-content:space-between; align-items:center; width:100%; border-top:1px solid rgba(241,234,223,.7); border-bottom:1px solid rgba(241,234,223,.7); padding:20px 4px; font-family:var(--display); font-size:28px; }
.primary-cta span { font-family:var(--sans); font-size:18px; transition: transform .2s ease; }
.primary-cta:hover span { transform:translate(4px,-4px); }
.small-note { font-size:10px; letter-spacing:.08em; opacity:.55; margin-top:14px; }
.dessert-stack { position:relative; min-height:690px; }
.dessert-photo { position:absolute; margin:0; width:62%; aspect-ratio:3/4; top:0; right:0; overflow:hidden; background:#6f2530; transform:rotate(2.5deg); box-shadow:0 30px 80px rgba(0,0,0,.17); }
.dessert-photo.lower { width:56%; top:36%; right:41%; transform:rotate(-4deg); }

footer { background:var(--ink); color:rgba(241,234,223,.65); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; padding:48px clamp(24px,6vw,96px); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.footer-mark { color:var(--paper); text-transform:none; justify-self:start; }
footer p:nth-child(2) { justify-self:center; }
footer p:last-child { justify-self:end; }

.media-shell.image-fallback { position:relative; background: linear-gradient(135deg, #5b1d25, #2a2119 58%, #7d6f57); }
.media-shell.image-fallback::before { content:"La Maison de Mo"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-style:italic; font-size:clamp(24px,3vw,48px); color:rgba(241,234,223,.5); letter-spacing:.01em; }
.menu-thumb.image-fallback::before { font-size:15px; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.65,.2,1); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 960px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { padding-top:150px; padding-bottom:80px; }
  .hero h1 { font-size:clamp(68px,17vw,110px); }
  .hero-image { min-height:70svh; }
  .manifesto-grid, .feature-pair, .interlude, .table-section { grid-template-columns:1fr; }
  .menu-heading { grid-template-columns:1fr; }
  .menu-heading .section-kicker { margin-bottom:0; }
  .menu-heading p:last-child { max-width:520px; }
  .menu-item { grid-template-columns:48px 1fr 82px; gap:16px; }
  .menu-description { grid-column:2/3; margin-top:-18px; }
  .menu-thumb { grid-column:3; grid-row:1/3; width:72px; height:94px; }
  .interlude blockquote { max-width:620px; }
  .dessert-stack { min-height:650px; }
  footer { grid-template-columns:1fr; gap:20px; }
  footer p:nth-child(2), footer p:last-child { justify-self:start; }
}

@media (max-width: 620px) {
  .site-header { padding:20px; }
  .header-cta { display:none; }
  .hero-copy { padding-left:22px; padding-right:22px; }
  .hero-meta { grid-template-columns:1fr; }
  .section-pad { padding-left:22px; padding-right:22px; }
  .feature-copy .course-number { margin-bottom:42px; }
  .menu-item { grid-template-columns:34px 1fr 66px; gap:12px; }
  .menu-name h3 { font-size:29px; }
  .menu-description { font-size:12px; }
  .menu-thumb { width:60px; height:78px; }
  .details-grid { grid-template-columns:1fr; }
  .dessert-stack { min-height:500px; }
  .dessert-photo { width:65%; }
  .dessert-photo.lower { width:59%; top:34%; right:38%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}