:root{
  --ink:#000000;
  --graphite:#18181a;
  --paper:#f2f2f0;
  --silver:#b7babe;
  --mist:#8a8d92;
  --gold:#c6a35a;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(183,186,190,.14)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--display);font-size:28px;letter-spacing:.02em;text-decoration:none}
.logo span{color:var(--gold)}
.nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none;color:var(--silver)}
.nav ul a:hover{color:var(--paper)}
.nav .cta{color:var(--ink)!important;background:var(--paper);padding:8px 18px}
@media (max-width:760px){.nav ul{gap:16px;font-size:14px}}
@media (max-width:440px){.nav .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;row-gap:4px}.nav ul{width:100%;justify-content:space-between}}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(92vh,860px)}
.hero-text{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,72px)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(88px,15vw,210px);line-height:.82;margin:0 0 28px;letter-spacing:-.02em}
.hero h1 i{font-style:normal;color:var(--gold)}
.hero p{max-width:36ch;font-size:clamp(18px,1.6vw,21px);color:var(--silver);margin:0 0 32px}
.btn{display:inline-block;font:inherit;font-weight:400;font-size:16px;text-decoration:none;padding:14px 28px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);cursor:pointer}
.btn.ghost{background:transparent;color:var(--paper)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.slides{position:relative;overflow:hidden;background:var(--graphite)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;overflow:hidden}
.slide.on{opacity:1}
.slide-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(36px) brightness(.45) saturate(.9)}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(12px,2vw,28px)}
.slide-caption{position:absolute;left:24px;bottom:20px;z-index:2;font-family:var(--display);font-style:italic;font-size:18px;color:var(--paper);text-shadow:0 1px 12px rgba(0,0,0,.6)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.slides{aspect-ratio:4/5;order:-1}.hero-text{padding-top:40px}}

/* section heads */
section{padding:clamp(72px,10vw,128px) 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:56px}
.head h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1;margin:0}
.head p{margin:0;color:var(--silver);max-width:46ch;justify-self:end}
@media (max-width:760px){.head{grid-template-columns:1fr}.head p{justify-self:start}}

/* collection */
.pieces{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,5vw,72px) clamp(20px,3vw,40px)}
.piece{grid-column:span 4}
.piece.wide{grid-column:span 6}
.frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--graphite)}
.frame img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.thumbs{display:flex;gap:8px;margin-top:10px}
.thumbs button{padding:0;border:1px solid transparent;background:none;cursor:pointer;width:52px;aspect-ratio:3/4;overflow:hidden;opacity:.5}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--gold)}
.thumbs button:hover{opacity:1}
.piece h3{font-family:var(--display);font-weight:400;font-size:28px;margin:18px 0 4px}
.piece p{margin:0;color:var(--silver);font-size:15.5px;max-width:42ch}
@media (max-width:900px){.piece,.piece.wide{grid-column:span 6}}
@media (max-width:560px){.piece,.piece.wide{grid-column:span 12}}

/* menu */
.menu{background:var(--paper);color:var(--ink)}
.menu .head p{color:#4a4c50}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #1a1a1a}
.menu-grid div{padding:28px 28px 32px 0;border-bottom:1px solid #c9c9c6}
.menu-grid h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0 0 6px}
.menu-grid p{margin:0;color:#4a4c50;font-size:15.5px;max-width:34ch}
@media (max-width:760px){.menu-grid{grid-template-columns:1fr}}

/* pricing */
.pricing{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.pricing h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1;margin:0 0 20px}
.pricing .note{color:var(--silver);max-width:40ch;margin:0}
table{width:100%;border-collapse:collapse;font-size:17px}
th{font-weight:400;text-align:left;color:var(--mist);font-size:14px;padding:0 0 12px;border-bottom:1px solid rgba(183,186,190,.3)}
th:last-child,td:last-child{text-align:right}
td{padding:22px 0;border-bottom:1px solid rgba(183,186,190,.18)}
td.size{font-family:var(--display);font-size:34px;line-height:1}
td.serves{color:var(--silver)}
td.price{font-size:20px}
@media (max-width:860px){.pricing{grid-template-columns:1fr}}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--gold);padding-top:20px}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--gold);margin-bottom:14px}
.steps h3{font-weight:500;font-size:18px;margin:0 0 6px}
.steps p{margin:0;color:var(--silver);font-size:15.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.story img{aspect-ratio:4/5;object-fit:cover;width:100%}
.story blockquote{font-family:var(--display);font-style:italic;font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:0 0 28px}
.story p{color:var(--silver);max-width:46ch}
@media (max-width:860px){.story{grid-template-columns:1fr}}


footer{padding:48px 0;border-top:1px solid rgba(183,186,190,.14);color:var(--mist);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){.slide{transition:none}html{scroll-behavior:auto}}

/* current page in the menu */
.nav ul a[aria-current="page"]{color:var(--paper);box-shadow:0 1px 0 var(--gold)}

/* inner page header */
.page-head{padding:clamp(64px,9vw,120px) 0 clamp(40px,5vw,64px);border-bottom:1px solid rgba(183,186,190,.14)}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,128px);line-height:.92;margin:0 0 24px;letter-spacing:-.01em}
.page-head p{max-width:52ch;color:var(--silver);font-size:clamp(18px,1.5vw,20px);margin:0}

/* collection page: two large photos per row */
.pieces.gallery .piece{grid-column:span 6}
@media (max-width:560px){.pieces.gallery .piece{grid-column:span 12}}

/* menu page */
.menu-grid.detail div{padding-right:40px}
.menu-grid.detail p{max-width:38ch}
.menu-grid .tag{display:block;margin-top:12px;font-size:14px;color:#6b6d72}
.list-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 48px;list-style:none;margin:0;padding:0}
.list-cols li{padding:16px 0;border-bottom:1px solid rgba(183,186,190,.18)}
.list-cols li b{display:block;font-weight:400;font-size:18px}
.list-cols li span{color:var(--silver);font-size:15.5px}

/* pricing page */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.two-col h3{font-family:var(--display);font-weight:400;font-size:32px;margin:0 0 12px}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:14px 0;border-bottom:1px solid rgba(183,186,190,.18);color:var(--silver)}
.plain li b{color:var(--paper);font-weight:400}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}

/* how to order page */
.steps.detail li p{max-width:32ch}
.lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lead div{border:1px solid rgba(183,186,190,.22);padding:28px}
.lead strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,60px);line-height:1;color:var(--gold);margin-bottom:10px}
.lead span{color:var(--silver)}
@media (max-width:640px){.lead{grid-template-columns:1fr}}
.faq{max-width:820px}
.faq details{border-bottom:1px solid rgba(183,186,190,.22)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:19px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:26px;color:var(--gold);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--silver);max-width:62ch}

/* inner pages: tighter rhythm between stacked dark sections */
.inner .page-head + section:not(.menu){padding-top:clamp(48px,6vw,80px)}
.inner section:not(.menu) + section:not(.menu){padding-top:0}