@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Italianno&display=swap');

:root { --ink:#090806; --ink-soft:#15120e; --gold:#c99637; --gold-light:#f0ce83; --cream:#f8eee0; --muted:#b9aa92; --line:rgba(226,184,98,.42); --serif:'Cormorant Garamond', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --script:'Italianno', cursive; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--cream); background:radial-gradient(circle at 80% 0%, rgba(134,91,23,.16), transparent 31rem), var(--ink); font-family:var(--sans); line-height:1.45; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:radial-gradient(rgba(255,255,255,.32) .55px, transparent .7px); background-size:5px 5px; mix-blend-mode:soft-light; z-index:5; }
a { color:inherit; } .skip-link { position:absolute; left:1rem; top:-4rem; padding:.7rem 1rem; background:var(--gold-light); color:var(--ink); z-index:9; } .skip-link:focus { top:1rem; }
.hero { min-height:660px; padding:1.25rem clamp(1.25rem, 5vw, 6rem) 3rem; position:relative; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; }
.hero::before, .hero::after { content:""; position:absolute; inset:18px; border:1px solid var(--line); border-radius:30px; pointer-events:none; } .hero::after { inset:25px; border-color:rgba(240,206,131,.2); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; position:relative; z-index:2; } .wordmark { margin:0; font:italic 700 clamp(4.3rem, 12vw, 9rem)/.66 var(--script); color:var(--gold-light); letter-spacing:-.06em; text-shadow:0 5px 32px rgba(201,150,55,.18); } .wordmark span { display:block; margin-left:62%; font:700 .18em/1 var(--sans); letter-spacing:.5em; text-transform:uppercase; color:var(--cream); white-space:nowrap; } .wordmark--small { font-size:2.6rem; text-decoration:none; } .wordmark--small span { margin-left:48%; }
.category-nav { display:flex; gap:1.25rem; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } .category-nav a { text-decoration:none; } .category-nav a:hover, .category-nav a:focus { color:var(--gold-light); } .nav-toggle { display:none; }
.hero__orb { position:absolute; top:70px; left:50%; width:min(560px,76vw); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; border:2px solid var(--gold); box-shadow:0 0 0 14px rgba(201,150,55,.04), inset 0 0 80px rgba(201,150,55,.08); z-index:-1; } .hero__orb::after { content:"✦"; position:absolute; bottom:-14px; left:calc(50% - 11px); color:var(--gold-light); font-size:1.4rem; }
.hero__brand { max-width:680px; margin:auto; text-align:center; padding-top:4rem; position:relative; } .chef-mark { width:clamp(115px, 15vw, 172px); height:clamp(86px, 11vw, 126px); display:block; margin:0 auto -.15rem; background-image:url('assets/client-menu-reference.jpeg'); background-size:310% auto; background-position:50% 0%; background-repeat:no-repeat; filter:drop-shadow(0 20px 16px rgba(0,0,0,.45)); } .eyebrow, .section-kicker { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light); } .eyebrow { margin:0 0 1.1rem; } .tagline { margin:1.25rem 0 0; letter-spacing:.38em; font-size:clamp(.62rem, 1.3vw, .82rem); text-transform:uppercase; color:var(--cream); } .scroll-cue { margin:1rem auto 0; position:relative; text-decoration:none; color:var(--muted); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; } .scroll-cue span { display:block; color:var(--gold); text-align:center; font-size:1.2rem; }
.menu-intro { max-width:720px; margin:0 auto; padding:5.5rem 1.5rem 3.2rem; text-align:center; } .menu-intro h2 { margin:.25rem 0 .75rem; font:600 clamp(2.4rem,5vw,4rem)/.9 var(--serif); color:var(--gold-light); } .menu-intro > p:last-child { margin:auto; color:var(--muted); max-width:420px; font-size:.9rem; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:1280px; margin:auto; padding:0 clamp(1rem, 4vw, 4rem) 5rem; align-items:start; } .menu-group { position:relative; background:linear-gradient(145deg,rgba(255,255,255,.028),transparent 34%),rgba(20,16,11,.72); border:1px solid var(--line); padding:1.5rem clamp(1rem,3vw,2.2rem); overflow:hidden; scroll-margin-top:2rem; } .menu-group:nth-child(3n) { grid-column:span 2; } .menu-group::before { content:""; position:absolute; inset:8px; border:1px solid rgba(201,150,55,.16); pointer-events:none; } .section-rule { display:flex; align-items:center; gap:.8rem; margin-bottom:.35rem; } .section-rule span { height:1px; background:var(--line); flex:1; } .section-rule h3 { color:var(--gold-light); margin:0; text-align:center; font:700 clamp(2rem,3.5vw,3rem)/1 var(--serif); text-transform:uppercase; letter-spacing:.06em; } .group-subtitle { color:var(--muted); text-align:center; margin:.2rem 0 1.2rem; font-size:.69rem; letter-spacing:.08em; text-transform:uppercase; } .menu-items { position:relative; z-index:1; } .subhead { color:var(--gold); margin:1rem 0 .25rem; font:700 1.05rem var(--serif); text-transform:uppercase; letter-spacing:.1em; } .menu-item { padding:.35rem 0 .75rem; border-bottom:1px solid rgba(248,238,224,.08); } .menu-item:last-child { border-bottom:0; } .item-line { display:flex; align-items:baseline; gap:.45rem; } .item-line h4 { margin:0; color:var(--cream); font:600 clamp(1.2rem,2vw,1.55rem)/1 var(--serif); } .dots { flex:1; border-bottom:1px dotted rgba(201,150,55,.48); transform:translateY(-.22rem); } .item-line strong { color:var(--gold-light); white-space:nowrap; font:600 .9rem var(--sans); } .item-description { margin:.25rem 0 0; color:#d0c4b3; font-size:.75rem; line-height:1.42; max-width:96%; } .group-note { position:relative; z-index:1; margin:1rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); color:var(--gold-light); font-size:.69rem; letter-spacing:.04em; }
.menu-photo { position:absolute; width:43%; max-height:220px; object-fit:cover; opacity:.68; filter:saturate(.88) contrast(1.04); pointer-events:none; } .menu-photo--pasta { right:-4%; bottom:-4%; mask-image:linear-gradient(135deg,transparent 0,black 30%); } .menu-photo--sweet { right:-4%; bottom:-3%; mask-image:linear-gradient(135deg,transparent 0,black 35%); } .menu-group:has(.menu-photo) .menu-items, .menu-group:has(.menu-photo) .group-note { max-width:65%; }
.tapioca-note { max-width:760px; margin:0 auto 4rem; border:1px solid var(--gold); background:linear-gradient(90deg, rgba(201,150,55,.2), transparent); padding:1rem 1.2rem; display:flex; align-items:center; justify-content:center; gap:.55rem; text-align:center; color:var(--gold-light); } .tapioca-note span { font-size:1.45rem; } .tapioca-note strong { font:600 1.35rem var(--serif); } .tapioca-note em { font-size:.77rem; color:var(--cream); font-style:normal; }
.site-footer { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; padding:2.5rem clamp(1.2rem,5vw,6rem); border-top:1px solid var(--line); background:#060504; } .site-footer .section-kicker { margin:0 0 .35rem; } .footer-note { margin:0; color:var(--muted); font-size:.8rem; } .socials { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; color:var(--gold-light); font-size:.8rem; } .socials a { text-underline-offset:.22em; }
@media (max-width:720px) { .hero { min-height:610px; padding:1.15rem 1.2rem 2.3rem; } .hero::before { inset:10px; border-radius:22px; } .hero::after { inset:16px; border-radius:18px; } .category-nav { display:none; position:absolute; right:0; top:calc(100% + .7rem); min-width:165px; padding:1rem; background:#16110b; border:1px solid var(--line); flex-direction:column; gap:.8rem; } .category-nav.is-open { display:flex; } .nav-toggle { display:inline-flex; align-items:center; gap:.45rem; color:var(--cream); background:transparent; border:1px solid var(--line); padding:.55rem .7rem; font:600 .65rem var(--sans); text-transform:uppercase; letter-spacing:.1em; } .nav-toggle span { color:var(--gold-light); font-size:1rem; } .hero__brand { padding-top:5rem; } .hero__orb { top:104px; width:92vw; } .chef-mark { margin-bottom:-.4rem; } .wordmark { font-size:5rem; } .menu-grid { display:block; padding:0 1rem 3rem; } .menu-group, .menu-group:nth-child(3n) { margin-bottom:1rem; } .section-rule h3 { font-size:2rem; } .site-footer { align-items:flex-start; flex-direction:column; } .socials { justify-content:flex-start; } .tapioca-note { margin:0 1rem 3rem; display:block; } }
@media (prefers-reduced-motion: no-preference) { .chef-mark { animation:float 6s ease-in-out infinite; } @keyframes float { 50% { transform:translateY(-7px) rotate(-1deg); } } }
@media print { @page { size:8.5in 13in; margin:.25in; } body { background:#090806; print-color-adjust:exact; -webkit-print-color-adjust:exact; } .topbar, .scroll-cue, .menu-intro, .tapioca-note, .site-footer, .skip-link { display:none; } .hero { min-height:2.05in; padding:.15in .1in; break-after:page; } .hero::before, .hero::after { display:none; } .hero__brand { padding:0; } .chef-mark { width:.82in; margin:0 auto -.15in; } .eyebrow { display:none; } .wordmark { font-size:3.2rem; } .tagline { margin:.5rem 0 0; font-size:.48rem; } .menu-grid { display:block; padding:0; max-width:none; } .menu-group { break-inside:avoid; margin:0 0 .11in; padding:.1in .13in; } .menu-group.side-back:first-of-type { break-before:page; } .section-rule h3 { font-size:1.2rem; } .item-line h4 { font-size:.83rem; } .item-line strong, .item-description, .group-note, .group-subtitle { font-size:.5rem; } .menu-item { padding:.02in 0 .045in; } .subhead { margin:.06in 0 .02in; font-size:.6rem; } .menu-photo { display:none; } }