/* ────────────────────────────────────────────────────────────────
   VISKS & VIPS — Editorial Pastry Atelier
   Wireframe + Hi-Fi Mockup, single HTML deliverable.
   Palette: Warm white → ivory → champagne → soft taupe.
   Accents: cocoa brown, soft gold, dusty rose.
   ──────────────────────────────────────────────────────────────── */

:root{
  --bg:#0e0c0a;            /* near-black page */
  --bg-ivory:#141009;      /* raised */
  --bg-cream:#17120c;      /* raised 2 */
  --bg-taupe:#1f1810;
  --ink:#f3ede1;            /* warm white text */
  --ink-soft:#cabfac;
  --ink-mute:#94886f;
  --rule:#2c271e;           /* hairline */
  --accent-cocoa:#e0a35a;  /* warm tan */
  --accent-gold:#d98a2b;   /* gold */
  --accent-rose:#d8a39a;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1440px;
  --gut: clamp(20px, 4vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ── Typographic primitives ─────────────────────────────────────── */
.serif{ font-family:var(--serif); font-weight:300; letter-spacing:-0.01em; }
.italic{ font-style:italic; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute); }
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.rule{ display:block; height:1px; background:var(--rule); border:0; width:100%; }

/* Display sizes */
.h-display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(56px, 11.5vw, 180px);
  line-height:0.92;
  letter-spacing:-0.025em;
}
.h-1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(40px, 6vw, 88px);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.h-2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(28px, 3.4vw, 48px);
  line-height:1.1;
  letter-spacing:-0.015em;
}
.h-3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.2;
}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.4;
  color:var(--ink-soft);
  max-width:54ch;
}
p.body{
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-soft);
  max-width:60ch;
  font-weight:400;
  text-wrap:pretty;
}

/* ── Layout helpers ────────────────────────────────────────────── */
.page{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); position:relative; }
section{ position:relative; }
.section-label{
  position:absolute;
  top:24px; right:var(--gut);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--ink-mute);
  z-index:5;
  pointer-events:none;
}

/* ── Top bar / Nav ─────────────────────────────────────────────── */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(14,12,10,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.topbar.scrolled{ border-color:var(--rule); background:rgba(14,12,10,0.94); }
.brand{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:0.02em;
}
.brand .amp{ font-style:italic; color:var(--accent-cocoa); padding:0 2px; }
.brand small{ font-family:var(--mono); font-size:12px; letter-spacing:0.3em; color:var(--ink-mute); padding-left:14px; border-left:1px solid var(--rule); }
.nav-links{
  display:flex;
  gap:36px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
.nav-links a{ color:var(--ink-soft); transition:color .2s; }
.nav-links a:hover{ color:var(--accent-cocoa); }
.nav-cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
  transition:color .2s, border-color .2s;
}
.nav-cta:hover{ color:var(--accent-cocoa); border-color:var(--accent-cocoa); }
.nav-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px 4px;
}
.nav-burger span{
  display:block;
  width:22px;
  height:1px;
  background:var(--ink);
  transition:transform .25s, opacity .25s;
}
@media (max-width:880px){
  .nav-burger{ display:flex; }
  .brand small{ display:none; }
  .nav-links{
    display:none;
    position:fixed;
    top:61px; left:0; right:0;
    background:rgba(14,12,10,0.97);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-direction:column;
    gap:0;
    padding:16px var(--gut) 28px;
    border-bottom:1px solid var(--rule);
    z-index:49;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 0; border-bottom:1px solid var(--rule); font-size:13px; }
}

/* ── 01 HERO ───────────────────────────────────────────────────── */
.hero{ padding-top:140px; padding-bottom:80px; }
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px, 4vw, 72px);
  align-items:end;
}
.hero-type{ position:relative; }
.hero-meta{
  display:flex; gap:24px;
  margin-bottom:32px;
  align-items:center;
}
.hero-meta .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-cocoa); }
.hero h1 .line{ display:block; }
.hero h1 em{ font-style:italic; color:var(--accent-cocoa); font-weight:300; }
.hero h1 .indent{ padding-left:0.6em; }

.hero-foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.hero-foot .lede{ max-width:38ch; }

.hero-image{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background:var(--bg-cream);
}
.hero-image img{ width:100%; height:100%; object-fit:cover; }
.hero-image .img-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px;
  background:linear-gradient(transparent, rgba(43,33,23,0.45));
  display:flex; justify-content:space-between;
  color:#f6f1e7;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
}

@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:110px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
}

/* ── 02 BRAND STATEMENT ────────────────────────────────────────── */
.statement{
  padding:clamp(80px,12vw,180px) clamp(24px,4vw,72px);
  text-align:center;
}
.statement blockquote{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(32px, 5vw, 64px);
  line-height:1.12;
  letter-spacing:-0.015em;
  max-width:22ch;
  margin:0 auto;
}
.statement blockquote em{ color:var(--accent-cocoa); font-weight:300; }
.statement .attrib{
  margin-top:40px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ── 03 SELECTED WORKS (feature row) ───────────────────────────── */
.feature{
  padding:80px clamp(24px,4vw,72px) 120px;
  border-top:1px solid var(--rule);
}
.feature-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:56px;
  gap:32px;
  flex-wrap:wrap;
}
.feature-head h2{ flex:1; }
.feature-head .link{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:clamp(16px, 2vw, 32px);
}
.fcard{ position:relative; cursor:pointer; }
.fcard-img{ position:relative; overflow:hidden; }
.fcard-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--bg-cream); transition:transform 0.5s ease; }
.fcard:hover .fcard-img img{ transform:scale(1.015); }
.fcard-img::after{
  content:'View \2192';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,6,5,0.92) 0%, rgba(7,6,5,0.4) 45%, transparent 70%);
  display:flex; align-items:flex-end;
  padding:24px 26px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent-gold);
  opacity:0; transition:opacity 0.35s ease;
  pointer-events:none;
}
.fcard:hover .fcard-img::after{ opacity:1; }
.fcard-meta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.fcard-title{ font-family:var(--serif); font-size:20px; line-height:1.2; }
.fcard-cat{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); }
.fcard-cap{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin-top:6px; max-width:42ch; font-weight:400; text-wrap:pretty; }

.fcard.a{ grid-column: auto; margin-top:0; }
.fcard.b{ grid-column: auto; }
.fcard.c{ grid-column: auto; margin-top:0; }
.fcard.a .fcard-img img, .fcard.b .fcard-img img, .fcard.c .fcard-img img{ aspect-ratio:4/5; }
@media (max-width:880px){
  .fcard.a, .fcard.b, .fcard.c{ grid-column: 1 / -1; margin-top:0; }
  .feature-grid{ grid-template-columns:1fr; }
}

/* ── 04 ABOUT / ATELIER ────────────────────────────────────────── */
.atelier{
  padding:120px 0 60px;
  background:var(--bg-ivory);
}
.atelier-grid{
  display:grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px, 5vw, 96px);
  align-items:start;
}
.atelier-img{
  position:sticky; top:120px;
  aspect-ratio:4/5;
  overflow:hidden;
}
.atelier-img img{ width:100%; height:100%; object-fit:cover; }
.atelier-img .cap{
  margin-top:12px;
  display:flex; justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.atelier-body .eyebrow{ font-size:13px; }
.atelier-body h2{ margin-bottom:32px; }
.atelier-body p.body{ font-family:var(--serif); font-size:19px; line-height:1.65; }
.atelier-body p.body + p.body{ margin-top:18px; }

.timeline{
  margin-top:64px;
  display:grid;
  gap:0;
}
.tl-row{
  display:grid;
  grid-template-columns: 130px 1fr auto;
  gap:24px;
  padding:24px 0;
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.tl-row:last-child{ border-bottom:none; }
.tl-year{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--ink-mute); }
.tl-title{ font-family:var(--serif); font-size:22px; line-height:1.2; }
.tl-org{ font-size:13px; color:var(--ink-soft); margin-top:4px; max-width:46ch; font-weight:300; }
.tl-loc{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--ink-mute); text-transform:uppercase; }
@media (max-width:780px){
  .atelier-grid{ grid-template-columns:1fr; }
  .atelier-img{ position:static; aspect-ratio:1/1; }
  .tl-row{ grid-template-columns: 1fr; gap:6px; }
  .tl-loc{ order:3; }
  .atelier{ padding-bottom:28px; }
}

/* ── 05 GALLERY / CATALOGUE ────────────────────────────────────── */
.catalogue{ padding:120px 0; }
.cat-head{ margin-bottom:64px; max-width:780px; }
.cat-head h2{ margin-bottom:24px; }

.cat-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-bottom:64px;
  padding:18px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.cat-nav button{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding:8px 12px;
  border-radius:99px;
  transition:all .2s;
  position:relative;
}
.cat-nav button .n{ font-size:9px; color:var(--accent-gold); margin-left:4px; vertical-align:super; }
.cat-nav button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.cat-nav button[aria-pressed="true"] .n{ color:var(--accent-rose); }
.cat-nav button:hover{ color:var(--ink); }

.cat-group{
  margin-bottom:120px;
}
.cat-group:last-child{ margin-bottom:0; }
.cat-group-head{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  gap:32px;
  align-items:baseline;
  margin-bottom:40px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.cat-num{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--ink-mute); }
.cat-name{ font-family:var(--serif); font-size:clamp(28px, 3.6vw, 44px); line-height:1; letter-spacing:-0.01em; }
.cat-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); }

.cat-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:clamp(16px, 2vw, 28px);
  row-gap:64px;
}
.work{ position:relative; }
.work img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--bg-cream);
  transition:transform .8s ease;
}
.work:hover img{ transform:scale(1.015); }
.work-body{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px 16px;
  align-items:baseline;
}
.work-title{ font-family:var(--serif); font-size:22px; line-height:1.2; }
.work-no{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--ink-mute); }
.work-desc{
  grid-column:1 / -1;
  font-size:14px;
  line-height:1.62;
  color:var(--ink-soft);
  max-width:48ch;
  font-weight:400;
  text-wrap:pretty;
}
.work-feedback{
  grid-column:1 / -1;
  margin-top:6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-bottom:2px;
  border-bottom:1px solid var(--rule);
  display:inline-flex;
  align-self:flex-start;
  width:fit-content;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.work-feedback:hover{ color:var(--accent-cocoa); border-color:var(--accent-cocoa); }
.work-feedback::before{ content:"↳ "; }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(7,6,5,0.82); z-index:300; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(4px); }
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal-box{ background:#1c1711; border:1px solid var(--rule); padding:clamp(32px,5vw,56px); max-width:480px; width:calc(100% - 48px); position:relative; }
.modal-close{ position:absolute; top:20px; right:24px; font-family:var(--mono); font-size:18px; color:var(--ink-mute); cursor:pointer; background:none; border:none; line-height:1; transition:color .2s; }
.modal-close:hover{ color:var(--ink); }
.modal-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-gold); margin-bottom:8px; }
.modal-work{ font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:32px; font-style:italic; }
.modal-form{ display:grid; gap:20px; }
.modal-form input, .modal-form textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--rule); padding:10px 0; font-family:var(--sans); font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; resize:none; }
.modal-form input::placeholder, .modal-form textarea::placeholder{ color:var(--ink-mute); }
.modal-form input:focus, .modal-form textarea:focus{ border-bottom-color:var(--accent-gold); }
.modal-form textarea{ min-height:100px; }
.modal-submit{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; background:var(--accent-gold); color:#0e0c0a; border:none; padding:14px 28px; cursor:pointer; transition:opacity .2s; margin-top:8px; }
.modal-submit:hover{ opacity:0.85; }
.modal-thanks{ display:none; text-align:center; padding:8px 0 0; }
.modal-thanks-headline{ font-family:var(--serif); font-size:28px; font-style:italic; color:var(--ink); margin-bottom:16px; }
.modal-thanks-rule{ width:40px; height:1px; background:var(--accent-gold); margin:0 auto 20px; }
.modal-thanks-body{ font-family:var(--sans); font-size:14px; color:var(--ink-mute); line-height:1.7; margin-bottom:24px; }
.modal-thanks-link{ font-family:var(--sans); font-size:13px; color:var(--accent-gold); text-decoration:none; letter-spacing:0.05em; }
.modal-thanks-link:hover{ opacity:0.8; }
.modal-thanks-close{ display:block; margin:28px auto 0; font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; background:transparent; border:1px solid var(--rule); color:var(--ink-mute); padding:10px 24px; cursor:pointer; transition:border-color .2s, color .2s; }
.modal-thanks-close:hover{ border-color:var(--accent-gold); color:var(--ink); }

/* Modular row sizes */
.w-6{ grid-column: span 6; }
.w-5{ grid-column: span 5; }
.w-7{ grid-column: span 7; }
.w-4{ grid-column: span 4; }
.w-8{ grid-column: span 8; }
.w-3{ grid-column: span 3; }
.work.offset{ margin-top:80px; }
.work.offset-sm{ margin-top:40px; }
.work img.tall{ aspect-ratio:3/4; }
.work img.short{ aspect-ratio:5/4; }
.work img.portrait{ aspect-ratio:2/3; }
@media (max-width:880px){
  .w-3,.w-4,.w-5,.w-6,.w-7,.w-8{ grid-column: 1 / -1; }
  .work.offset, .work.offset-sm{ margin-top:0; }
}

/* ── 06 PHILOSOPHY ─────────────────────────────────────────────── */
.philosophy{
  padding:60px 0 120px;
  background:var(--bg-cream);
}
.phil-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(32px,5vw,96px);
  align-items:start;
}
.phil-head .eyebrow{ font-size:13px; }
.phil-head h2{ max-width:14ch; }
.phil-list{ display:grid; gap:32px; margin-top:48px; }
.phil-row{
  display:grid;
  grid-template-columns: 32px 1fr;
  gap:20px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.phil-row .num{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--ink-mute); padding-top:4px; }
.phil-row h4{ font-family:var(--serif); font-size:24px; line-height:1.2; font-weight:400; margin-bottom:6px; }
.phil-row p{ font-size:14px; line-height:1.6; color:var(--ink-soft); font-weight:300; max-width:52ch; }
@media (max-width:780px){ .phil-grid{ grid-template-columns:1fr; } .philosophy{ padding:56px 0; } }

/* ── 07 TESTIMONIALS ───────────────────────────────────────────── */
.testimonials{
  padding:140px clamp(48px, 8vw, 140px);
  position:relative;
}
.test-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:88px;
  gap:24px;
  flex-wrap:wrap;
}
.test-stack{
  display:grid;
  gap:96px;
  max-width:1080px;
  margin:0 auto;
}
.test{
  display:grid;
  grid-template-columns: 80px 1fr;
  gap:32px;
  align-items:start;
}
.test .marker{
  font-family:var(--serif);
  font-style:italic;
  font-size:64px;
  line-height:1;
  color:var(--accent-cocoa);
}
.test blockquote{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(22px, 2.6vw, 34px);
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.test blockquote em{ color:var(--accent-cocoa); font-style:italic; }
.test cite{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:28px;
  font-style:normal;
}
.chef-portrait{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  flex-shrink:0;
  filter:grayscale(35%) brightness(0.78) contrast(1.05);
  border:1px solid var(--rule);
  transition:filter .3s;
}
a.chef-link:hover .chef-portrait{ filter:grayscale(0%) brightness(0.9) contrast(1.05); }
a.chef-link{ display:flex; align-items:center; flex-shrink:0; }
.test .by{ font-family:var(--serif); font-size:22px; }
.test .role{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:6px;
}
@media (max-width:780px){
  .test{ grid-template-columns: 1fr; gap:14px; }
  .test .marker{ font-size:48px; }
}
.rec-photo-wrap{ max-width:var(--max); margin:clamp(80px,10vw,140px) auto 0; padding:0 var(--gut) clamp(80px,10vw,140px); }
.rec-photo{ margin:0; }
.rec-photo img{ width:100%; max-width:720px; aspect-ratio:4/3; object-fit:cover; object-position:center center; display:block; }
.rec-photo figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:16px; }

/* ── 08 CONTACT ────────────────────────────────────────────────── */
.contact{
  padding:140px 0 100px;
  background:var(--ink);
  color:var(--bg);
}
.contact .eyebrow{ color:var(--bg-taupe); }
.contact h2{ color:var(--bg); margin-bottom:48px; max-width:14ch; }
.contact h2 em{ color:var(--accent-rose); font-weight:300; }
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:clamp(32px,5vw,96px);
  align-items:start;
}
.contact .lede{ color:#e7dfca; max-width:42ch; }
.contact-block{ margin-top:40px; display:grid; gap:28px; }
.contact-row{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  align-items:baseline;
}
.contact-row .k{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#a89a7a; }
.contact-row .v{ font-family:var(--serif); font-size:22px; line-height:1.3; color:var(--bg); }
.contact-row a.v{ border-bottom:1px solid transparent; transition:border-color .2s; }
.contact-row a.v:hover{ border-color:var(--accent-rose); }

.inquire-card{
  border:1px solid rgba(255,255,255,0.18);
  padding:36px;
}
.inquire-card h4{
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  margin-bottom:14px;
  color:var(--bg);
}
.inquire-card p{ font-size:14px; line-height:1.7; color:#cbbe9f; max-width:36ch; font-weight:300; }
.inquire-card ul{ list-style:none; margin-top:24px; display:grid; gap:10px; }
.inquire-card ul li{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#cbbe9f;
}
.inquire-card ul li::before{ content:"— "; color:var(--accent-rose); }
.inquire-card .btn{
  margin-top:32px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border:1px solid var(--bg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--bg);
  transition:all .2s;
}
.inquire-card .btn:hover{ background:var(--bg); color:var(--ink); }

/* Feedback inline form */
.feedback{
  margin-top:80px;
  padding-top:60px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.feedback-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
.feedback-head h3{ font-family:var(--serif); font-size:36px; font-weight:300; color:var(--bg); }
.feedback-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 24px;
}
.feedback-form .full{ grid-column:1 / -1; }
.feedback-form label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#a89a7a;
  margin-bottom:8px;
}
.feedback-form input,
.feedback-form textarea,
.feedback-form select{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,0.24);
  color:var(--bg);
  font-family:var(--serif);
  font-size:18px;
  padding:8px 0 12px;
  font-weight:300;
  resize:none;
}
.feedback-form input:focus,
.feedback-form textarea:focus,
.feedback-form select:focus{ outline:none; border-bottom-color:var(--accent-rose); }
.feedback-form textarea{ min-height:90px; }
.feedback-form .submit{
  justify-self:start;
  margin-top:8px;
  padding:14px 26px;
  border:1px solid var(--bg);
  background:transparent;
  color:var(--bg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  transition:all .2s;
}
.feedback-form .submit:hover{ background:var(--bg); color:var(--ink); }
@media (max-width:780px){
  .contact-grid{ grid-template-columns:1fr; }
  .feedback-form{ grid-template-columns:1fr; }
}

/* ── Page Nav ──────────────────────────────────────────────────── */
.page-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px var(--gut);
  border-top:1px solid var(--rule);
  background:var(--bg);
}
.page-nav a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-decoration:none;
  transition:color 0.2s;
}
.page-nav a:hover, .page-nav a:active{ color:var(--accent-gold); }

/* ── Footer ────────────────────────────────────────────────────── */
.footer{
  padding:40px var(--gut);
  background:var(--ink);
  color:#a89a7a;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer .brand{ color:var(--bg); }
.footer .brand a{ color:inherit; text-decoration:none; }
.footer .brand small{ color:#a89a7a; border-color:rgba(255,255,255,0.16); text-transform:uppercase; letter-spacing:0.22em; }
.footer-meta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#a89a7a;
}
.footer-meta a{ color:inherit; text-decoration:none; transition:color 0.2s; }
.footer-meta a:hover, .footer-meta a:active{ color:var(--accent-gold); }

/* ── Scroll-to-top ─────────────────────────────────────────────── */
.scroll-top{
  position:fixed;
  bottom:28px;
  right:28px;
  width:38px;
  height:38px;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink-mute);
  font-family:var(--mono);
  font-size:18px;
  font-weight:600;
  letter-spacing:0;
  transform:scaleY(1.3);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s, color 0.2s, border-color 0.2s;
  z-index:200;
}
.scroll-top.visible{ opacity:1; pointer-events:auto; }
.scroll-top:hover, .scroll-top:active{ color:var(--accent-gold); border-color:var(--accent-gold); }
@media (max-width:480px){
  .footer-meta{ letter-spacing:0.1em; font-size:11px; }
}

/* ── Lightbox ───────────────────────────────────────────────────── */
#lightbox{
  position:fixed; inset:0; z-index:400;
  background:rgba(7,6,5,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
  cursor:zoom-out;
}
#lightbox.open{ opacity:1; pointer-events:all; }
#lightbox img{
  max-width:min(92vw,1200px);
  max-height:88vh;
  object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,0.7);
  cursor:default;
}
#lightbox-close{
  position:fixed; top:20px; right:24px;
  font-family:var(--mono); font-size:22px;
  color:var(--ink-mute); background:none; border:none;
  cursor:pointer; line-height:1;
  transition:color .2s;
  z-index:401;
}
#lightbox-close:hover{ color:var(--accent-gold); }
.work img{ cursor:zoom-in; }

/* ── Dev / Spec annotations panel ──────────────────────────────── */
.spec-toggle{
  position:fixed;
  bottom:24px; right:24px;
  z-index:60;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:12px 18px;
  background:var(--ink);
  color:var(--bg);
  border-radius:99px;
  box-shadow:0 8px 28px rgba(43,33,23,0.18);
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.spec-toggle .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-rose); }
.spec-panel{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(440px, 90vw);
  background:#1c1610;
  color:#e7dfca;
  z-index:70;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.7,.1,.3,1);
  overflow-y:auto;
  padding:32px 28px 64px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  border-left:1px solid rgba(255,255,255,0.08);
}
.spec-panel.open{ transform:translateX(0); }
.spec-panel h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  color:#f6f1e7;
  margin-bottom:6px;
}
.spec-panel .intro{ font-size:12px; color:#a89a7a; margin-bottom:24px; }
.spec-section{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 0;
}
.spec-section .id{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--accent-rose); text-transform:uppercase; }
.spec-section h4{
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
  margin:4px 0 8px;
  color:#f6f1e7;
}
.spec-section p{ color:#c4b89c; font-size:12.5px; }
.spec-section ul{ list-style:none; padding:0; margin-top:8px; }
.spec-section ul li{
  position:relative;
  padding-left:18px;
  margin:4px 0;
  font-size:12px;
  color:#a89a7a;
}
.spec-section ul li::before{ content:"–"; position:absolute; left:0; color:var(--accent-rose); }
.spec-section .tech{
  margin-top:10px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.spec-section .tech span{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,0.18);
  color:#c4b89c;
}
.spec-close{
  position:absolute;
  top:18px; right:18px;
  color:#a89a7a;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
}

/* When spec is open, lightly tint annotations on page */
body.spec-on .section-label{ color:var(--accent-cocoa); }
body.spec-on section{ outline:1px dashed transparent; }
body.spec-on .topbar::after{
  content:"WIREFRAME / HANDOFF MODE";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-22px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.3em;
  color:var(--accent-cocoa);
}

/* ── Ship build: hide dev scaffolding ───────────────────────────── */
.section-label{ display:none; }

/* ── Catalogue as a tasting menu (cream grid + black dividers) ───── */
:root{ --noir:#17120c; }
.catalogue{ padding:0 0 clamp(80px,10vw,140px); }
.cat-intro{ max-width:var(--max); margin:0 auto; padding:clamp(96px,12vw,160px) var(--gut) 0; }
.cat-intro .lede{ margin-top:24px; }
.course-nav{
  position:sticky; top:65px; z-index:20;
  display:flex; gap:0;
  background:rgba(14,12,10,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  padding:0 var(--gut);
  margin-top:clamp(24px,3.5vw,48px);
  overflow-x:auto;
  scrollbar-width:none;
}
.course-nav::-webkit-scrollbar{ display:none; }
.cnav-item{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:border-color .25s, color .25s;
  color:var(--ink-mute);
  text-decoration:none;
}
.cnav-item:hover{ color:var(--ink); }
.cnav-item.active{ border-bottom-color:var(--accent-gold); color:var(--ink); }
.cnav-num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em;
  color:var(--accent-gold); text-transform:uppercase;
}
.cnav-name{
  font-family:var(--serif); font-size:16px; font-style:italic;
}
.course{ margin-top:0; scroll-margin-top:130px; }
.course-divider{ background:var(--noir); color:var(--bg); padding:clamp(42px,6vw,88px) 0; margin-top:clamp(12px,2vw,24px); }
.course-divider .inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,76px); align-items:center;
}
.course-rom{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(96px,17vw,250px); line-height:.74; letter-spacing:-0.03em;
  color:var(--accent-gold);
}
.course-info .ceyebrow{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#a89a7a; margin-bottom:18px; }
.course-info .cname{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,68px); line-height:1; letter-spacing:-0.015em; color:var(--bg); }
.course-info .cdesc{ margin-top:18px; font-size:15px; line-height:1.6; color:#cbbe9f; max-width:48ch; font-weight:300; }
.course-grid-wrap{ max-width:var(--max); margin:0 auto; padding:clamp(20px,2.5vw,36px) var(--gut) 0; }
@media (max-width:780px){
  .course-divider .inner{ grid-template-columns:1fr; gap:18px; }
  .course-rom{ font-size:clamp(84px,28vw,150px); }
}

/* signature pieces link into their dish page */
a.work-link{ display:block; color:inherit; }
a.work-link .work-title{ transition:color .25s; }
a.work-link:hover .work-title{ color:var(--accent-cocoa); }
.work.signature .work-title::after{ content:" \2192"; color:var(--accent-cocoa); font-style:normal; }
.work.signature .sig-tag{
  display:inline-block; margin-top:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent-gold);
}

/* text panel inside a course grid */
.work-note{ display:flex; align-items:center; }
.work-note .inner-note p.lede{ font-size:22px; }

/* ════════════════════════════════════════════════════════════════
   DARK THEME (Option A) — committed all-dark Michelin aesthetic.
   Flips the palette, then re-pins the sections that were authored
   as "dark blocks" so they stay dark with light text.
   ════════════════════════════════════════════════════════════════ */


/* nav: dark translucent */

/* image placeholders while loading */
.fcard-img img, .work img, .hero-image, .atelier-img img{ background:#1a150e; }

/* course dividers — keep darkest, light text */
.course-divider{ background:#070605 !important; }
.course-divider .cname, .course-info .cname{ color:var(--ink) !important; }
.course-info .cdesc{ color:var(--ink-soft) !important; }

/* CONTACT — was cocoa-dark via var(--ink); re-pin explicitly */
.contact{ background:#080706 !important; color:var(--ink) !important; border-top:1px solid var(--rule); }
.contact h2{ color:var(--ink) !important; }
.contact h2 em{ color:var(--accent-rose) !important; }
.contact .eyebrow{ color:var(--accent-gold) !important; }
.contact .lede{ color:var(--ink-soft) !important; }
.contact-row .k{ color:var(--ink-mute) !important; }
.contact-row .v{ color:var(--ink) !important; }
.inquire-card{ border-color:var(--rule) !important; }
.inquire-card h4{ color:var(--ink) !important; }
.inquire-card p, .inquire-card ul li{ color:var(--ink-soft) !important; }
.inquire-card .btn{ border-color:var(--ink) !important; color:var(--ink) !important; }
.inquire-card .btn:hover{ background:var(--ink) !important; color:#080706 !important; }
.feedback-form input, .feedback-form textarea, .feedback-form select{ color:var(--ink) !important; }

/* FOOTER */
.footer{ background:#080706 !important; color:var(--ink-mute) !important; }
.footer .brand{ color:var(--ink) !important; }

/* ── Full-bleed black LANDING hero (L'Or language) ──────────────── */
.hero-landing{ position:relative; height:100svh; min-height:600px; width:100%; overflow:hidden; background:#000; }
.hero-landing .hl-media{ position:absolute; inset:0; }
.hero-landing .hl-media img{ width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.06) saturate(1.02) brightness(.9); animation:hero-fadein 1.6s ease-out forwards, kenburns 10s 1.6s ease-in-out infinite alternate; transform-origin:center center; }
@keyframes hero-fadein{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero-landing::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,7,5,.62) 0%, rgba(8,7,5,.12) 38%, rgba(8,7,5,.78) 100%); z-index:1; }
.hl-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--gut) clamp(48px,9vh,108px); }
.hl-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#e9dcc6; margin-bottom:24px; }
.hl-word{ font-family:var(--serif); font-weight:300; font-size:clamp(64px,12vw,184px); line-height:.88; letter-spacing:-.02em; color:#f6f1e7; }
.hl-word em{ font-style:italic; color:var(--accent-gold); padding:0 .06em; }
.hl-tag{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(19px,2.1vw,28px); line-height:1.42; color:#e7dfce; max-width:42ch; margin-top:26px; text-wrap:pretty; }
.hl-enter{ margin-top:40px; display:inline-flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#f6f1e7; }
.hl-enter .ln{ width:48px; height:1px; background:currentColor; transition:width .3s; }
.hl-enter:hover .ln{ width:72px; }
@media (max-width:700px){ .hl-tag{ max-width:92%; } }