/* ==========================================================================
   Smoked Inc — interior pages, confirmed design language

   Same rules as the landing pages: two colours, one typeface, hairlines
   instead of boxes, photography carried full-bleed under a scrim. The only
   difference is that these pages are documents, so they scroll.

   Class names are unchanged from the previous build so js/site.js keeps
   working untouched; everything here is a reskin, not a rewrite.
   ========================================================================== */

:root{
  --ink:#0B0A09;
  --ink-2:#100E0C;
  /* One value drives every piece of type and every rule on the site. */
  --bone:#E3D6BA;

  --hair:rgba(227,214,186,.30);
  --hair-soft:rgba(227,214,186,.15);

  --ui:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(18px,2.2vw,34px);
  --shelf:clamp(56px,7vw,104px);
  --max:1480px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--bone);color:var(--ink)}
:focus-visible{outline:1px solid var(--bone);outline-offset:3px}

/* Film grain, always on, same weight as the door. */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--shelf)}
.pagehead + .sec{padding-top:clamp(38px,4.5vw,68px)}

/* Small tracked caps. This is the only "label" style on the site; the old
   gold variant now just sits at full strength instead of a second colour. */
.label{
  display:inline-block;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.64;
}
.label--gold{opacity:.9}
.meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.66}

/* --------------------------------------------------------------- titles --
   Two tiers, both lifted straight off the landing page so a heading here is
   the same object as the wordmark there.

   Tier 1 is the SMOKED treatment: uppercase, 700, tracked in hard.
   Tier 2 is the ABOUT US / MENU / ORDER treatment: uppercase, 400, tracked
   in lightly. Everything that is a title on this site is one of the two. */
.display,
.pack__body h3,
.fig b,
.brand__name{
  font-weight:700;line-height:.84;letter-spacing:-.025em;
  text-transform:uppercase;
}
.row__name,
.strip__cell h3,
.line h4,
.about__copy h3{
  font-weight:400;line-height:1;letter-spacing:-.012em;
  text-transform:uppercase;
}

.display{margin:0;font-size:clamp(46px,7vw,116px)}
.display em{font-style:normal;font-weight:700;opacity:.55}
.lede{
  margin:1.1em 0 0;max-width:52ch;
  font-size:clamp(14px,1.05vw,17px);line-height:1.5;opacity:.82;
}

/* --------------------------------------------------------------- header -- */
.hdr{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--hair-soft);
}
/* The frosted glass lives on a layer behind the header, not on the header:
   a backdrop-filter on .hdr makes it the box that position:fixed children
   measure from, and the full-screen menu inside it shrank to the header's
   62px in Chrome, leaving the page showing through behind the links. */
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(11,10,9,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.hdr__in{
  max-width:var(--max);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__name{font-size:17px}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------------------------------------------------------------- burger --
   Three stacked rules, the same hairline the rest of the site is built from.
   It is the only navigation on every page but the door, so it sits at the
   top right on every width — no separate desktop bar to fall out of sync. */
.burger{
  width:38px;height:38px;display:grid;place-content:center;gap:5px;
  border:1px solid var(--hair);
  transition:background .35s var(--ease);
}
.burger:hover{background:rgba(227,214,186,.07)}
.burger span{display:block;width:17px;height:1px;background:var(--bone)}

/* ---------------------------------------------------------------- sitenav --
   Full screen, because there are only five places to go and a small dropdown
   would make them look like an afterthought. */
.sitenav{
  position:fixed;inset:0;z-index:70;
  background:rgba(11,10,9,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;
  padding:clamp(16px,2vw,30px) var(--pad) calc(24px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.sitenav.on{opacity:1;visibility:visible}
.sitenav__hd{display:flex;align-items:center;justify-content:flex-end;min-height:38px}
.sitenav ul{
  list-style:none;margin:auto 0;padding:0;
  border-top:1px solid var(--hair-soft);
}
.sitenav li{border-bottom:1px solid var(--hair-soft)}
.sitenav li a{
  display:flex;align-items:baseline;gap:16px;
  padding:clamp(12px,1.6vw,20px) 0;text-decoration:none;
  transition:opacity .3s var(--ease),padding-left .45s var(--ease);
}
.sitenav li a:hover{padding-left:14px}
.sitenav li a[aria-current]{opacity:.45}
.sitenav .n{font-size:10px;letter-spacing:.18em;opacity:.5;min-width:2.4em}
.sitenav .t{
  font-weight:700;line-height:.9;letter-spacing:-.025em;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,68px);
}
.sitenav__foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--hair);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;
}
.sitenav__foot a{text-decoration:none}
.sitenav__links{display:flex;gap:10px 22px;flex-wrap:wrap}
/* Instagram and TikTok under the address in the footer. */
.ftr__social{margin:1em 0 0;display:flex;gap:18px}
.ftr__social a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px}
.ftr__social a:hover{border-color:var(--bone)}

.bag{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--hair);padding:8px 14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s var(--ease);
}
.bag:hover{background:rgba(227,214,186,.07)}
.bag__n{
  min-width:18px;height:18px;padding:0 5px;
  display:inline-grid;place-items:center;
  border:1px solid var(--hair);font-size:10px;letter-spacing:0;
}
.bag__n.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ------------------------------------------------------------- pagehead --
   The interior echo of the door: one photograph, full-bleed, under the same
   bottom-heavy scrim, with the headline sitting on the dark. */
.pagehead{position:relative;isolation:isolate;padding:clamp(80px,13vh,190px) 0 clamp(38px,5vw,74px)}
.pagehead__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.pagehead__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:grayscale(1) contrast(1.3) brightness(.66);
}
.pagehead__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(11,10,9,.97) 0%,rgba(11,10,9,.86) 24%,
    rgba(11,10,9,.42) 58%,rgba(11,10,9,.26) 100%);
}
.pagehead__in{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.eyelet{display:flex;align-items:center;gap:12px;margin-bottom:1.6em}
.rule{display:block;width:clamp(28px,4vw,64px);height:1px;background:var(--bone);opacity:.5}

/* ----------------------------------------------------------------- menu --
   A price list, so it is set as one: name and price on a baseline, a rule
   under every row, nothing boxed. */
.group{margin-bottom:clamp(38px,5vw,72px)}
.group > .label{display:block;margin-bottom:1.4em}
.group__list{border-top:1px solid var(--hair)}
.row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--hair-soft);
}
.row__name{margin:0 0 5px;font-size:clamp(16px,1.2vw,19px)}
.row__desc{font-size:13px;line-height:1.4;opacity:.62;max-width:56ch}
.row__right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.row__price{
  font-size:clamp(16px,1.2vw,19px);font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.add{
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--hair);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.add:hover{background:rgba(227,214,186,.09)}
.add.done{background:var(--bone);color:var(--ink);border-color:var(--bone)}



/* ============================================================== menu board ==
   The menu is not a document, it is a board. It is set to a screen's
   proportion — 16:9 lying down on a desktop, 9:16 standing up on a handset —
   and everything inside it is sized in container units, so the whole card
   scales as one object instead of reflowing piece by piece. That is what a
   printed menu does: the type does not get bigger when the paper does, the
   whole thing does.

   The card is sized off the viewport height first, so it always lands whole
   on one screen with the header above it, and never has to be scrolled to be
   read. Below it the page carries on as a normal document. */
.board{
  padding:clamp(16px,2.2vw,30px) var(--pad) clamp(26px,3.4vw,54px);
  display:flex;justify-content:center;
}
.menucard{
  /* 16:9, as wide as the page allows, but never taller than the screen
     minus the header and the breathing room above and below it. */
  --room:calc(100svh - 152px);
  width:min(100%, var(--max), calc(var(--room) * 16 / 9));
  aspect-ratio:16/9;
  container-type:size;
  border:1px solid var(--hair);
  background:var(--ink-2);
  display:flex;flex-direction:column;
  padding:2.7cqw 3.2cqw 2.3cqw;
  overflow:hidden;
}
/* Inside the card nothing fades in on scroll: it all arrives at once, the
   way a board does when you look up at it. */
.menucard .rv{opacity:1;transform:none}

.menucard__hd{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:end;gap:2.6cqw;
  padding-bottom:1.2cqw;border-bottom:1px solid var(--hair);
}
.menucard__hd .eyelet{margin-bottom:.9cqw;gap:.9cqw}
.menucard__hd .label{font-size:.86cqw;letter-spacing:.2em}
.menucard__hd .rule{width:3.4cqw}
.menucard__title{margin:0;font-size:3.9cqw}
.menucard__lede{
  margin:0 0 .5cqw;justify-self:end;text-align:right;
  font-size:.96cqw;line-height:1.5;opacity:.66;max-width:38ch;
}

/* Three columns, balanced by the browser rather than by hand, so the list
   can be reordered upstairs without the layout having to be re-cut. */
.menucard__body{
  flex:1 1 auto;min-height:0;
  padding-top:1.5cqw;
  column-count:3;column-gap:2.8cqw;
  column-rule:1px solid var(--hair-soft);
}
.menucard__body .group{
  break-inside:avoid;margin:0 0 .9cqw;
  display:inline-block;width:100%;   /* keeps the group whole in a column */
}
.menucard__body .group > .label{
  display:block;margin-bottom:.55cqw;
  font-size:.76cqw;letter-spacing:.22em;opacity:.55;
}
.menucard__body .group__list{border-top:1px solid var(--hair-soft)}
.menucard__body .row{
  gap:1.3cqw;padding:.44cqw 0;border-bottom:1px solid var(--hair-soft);
  align-items:baseline;
}
.menucard__body .row:last-child{border-bottom:0}
.menucard__body .row__name{margin:0 0 .12cqw;font-size:1.08cqw;letter-spacing:-.006em}
.menucard__body .row__desc{
  font-size:.72cqw;line-height:1.26;opacity:.5;max-width:none;
  /* Two lines is the whole allowance. A menu that needs three is a paragraph. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.menucard__body .row__price{font-size:1.08cqw;letter-spacing:0}

.menucard__ft{
  display:flex;align-items:center;gap:2cqw;
  padding-top:1.2cqw;border-top:1px solid var(--hair);
  font-size:.8cqw;letter-spacing:.16em;text-transform:uppercase;opacity:.72;
}
.menucard__ft .sp{margin-left:auto}
.menucard__ft .btn{
  opacity:1;padding:.85cqw 1.7cqw;font-size:.8cqw;letter-spacing:.18em;
  border-width:1px;
}

/* ------------------------------------------------------------ board, phone --
   Stood up: 9:16, two columns, and the descriptions come off. At this size a
   line of explanation under every item turns the board into a wall of grey —
   the name and the price are what a phone is being asked for. */
@media (max-width:699px){
  .board{padding:14px var(--pad) 30px}
  .menucard{
    --room:calc(100svh - 120px);
    width:min(100%, calc(var(--room) * 9 / 16));
    aspect-ratio:9/16;
    padding:5cqw 5cqw 4.4cqw;
  }
  .menucard__hd{
    grid-template-columns:1fr;gap:1.6cqw;
    padding-bottom:2.6cqw;
  }
  .menucard__hd .eyelet{margin-bottom:2.2cqw;gap:2.2cqw}
  .menucard__hd .label{font-size:2.5cqw}
  .menucard__hd .rule{width:8cqw}
  .menucard__title{font-size:11cqw}
  .menucard__lede{display:none}

  .menucard__body{
    padding-top:3cqw;
    column-count:2;column-gap:4.4cqw;
  }
  .menucard__body .group{margin-bottom:3.4cqw}
  .menucard__body .group > .label{font-size:2.2cqw;letter-spacing:.18em;margin-bottom:1.5cqw}
  .menucard__body .row{gap:2.2cqw;padding:1.65cqw 0}
  .menucard__body .row__name{font-size:3.05cqw;margin:0}
  .menucard__body .row__desc{display:none}
  .menucard__body .row__price{font-size:3.05cqw}

  .menucard__ft{
    padding-top:3.4cqw;font-size:2.3cqw;gap:3cqw;letter-spacing:.14em;
  }
  .menucard__ft .hide-s{display:none}
  .menucard__ft .btn{padding:2.4cqw 4.4cqw;font-size:2.3cqw}
}

/* --------------------------------------------------- pagehead, no photo --
   The menu and the order page carry no photography: they are lists of what
   things are and what they cost, and a picture only gets between the reader
   and the price. The head keeps the same rhythm, just on flat ink. */
.pagehead--plain{padding-top:clamp(64px,10vh,140px)}
.pagehead--plain::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--hair-soft);
}

/* A pack with no shot is a single column; the body was already the whole
   argument, the picture was only ever decoration. */
.pack--plain{grid-template-columns:1fr;align-items:start}

/* ---------------------------------------------------------------- packs -- */
.packs{display:grid;gap:clamp(28px,3.4vw,54px)}
.pack{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,46px);align-items:center;
  padding-bottom:clamp(28px,3.4vw,54px);border-bottom:1px solid var(--hair-soft);
}
.pack:last-child{border-bottom:0;padding-bottom:0}
.pack__shot{overflow:hidden;background:var(--ink-2)}
.pack__shot img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(.94);
  transition:transform 1.1s var(--ease);
}
.pack:hover .pack__shot img{transform:scale(1.03)}
.pack__body > .label{display:block;margin-bottom:1em}
.pack__body h3{margin:0 0 .5em;font-size:clamp(28px,3.2vw,50px)}
.pack__desc{margin:0 0 1.4em;max-width:46ch;font-size:14px;line-height:1.5;opacity:.8}
.pack__spec{
  margin:0 0 1.6em;padding:0;border-top:1px solid var(--hair-soft);
  display:grid;
}
.pack__spec > div{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--hair-soft);
}
.pack__spec dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.pack__spec dd{margin:0;font-size:13px}
.pack__buy{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.price{font-size:clamp(24px,2.4vw,34px);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price sup{font-size:.55em;vertical-align:super;opacity:.7;margin-right:.1em}

.btn{
  display:inline-block;padding:12px 22px;text-decoration:none;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--bone);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn--solid{background:var(--bone);color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--bone)}
.btn--solid:disabled{opacity:.32;cursor:not-allowed}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--bone);color:var(--ink)}

.foot-note{
  margin-top:clamp(28px,3.4vw,56px);padding-top:20px;
  border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

/* ---------------------------------------------------------------- about -- */
.about__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,80px);align-items:start}
.about__copy p{margin:0 0 1.2em;max-width:56ch;font-size:clamp(14px,1.05vw,17px);line-height:1.6;opacity:.86}
/* Lists in the legal pages, set like the paragraphs around them. */
.about__copy ul{margin:0 0 1.2em;padding-left:1.2em;max-width:56ch;font-size:clamp(14px,1.05vw,17px);line-height:1.6;opacity:.86}
.about__copy li{margin-bottom:.35em}
.figures{
  margin-top:clamp(28px,3.4vw,52px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
}
.fig{padding:18px 14px 0;border-left:1px solid var(--hair-soft)}
.fig:first-child{border-left:0;padding-left:0}
.fig b{display:block;font-size:clamp(26px,3vw,44px)}
.fig .label{margin-top:.6em}

/* ----------------------------------------------------------------- band -- */
.band{position:relative;isolation:isolate;padding:clamp(80px,11vw,180px) 0;text-align:center}
.band__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.24) brightness(.62)}
.band__scrim{position:absolute;inset:0;z-index:-1;background:rgba(11,10,9,.62)}
.band__in{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.band blockquote{margin:0 0 1.4em}
.band .label{opacity:.72}

/* ---------------------------------------------------------------- strip -- */
.strip{border-top:1px solid var(--hair);padding-block:clamp(38px,4.6vw,74px)}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip__cell{padding:0 clamp(16px,2vw,34px);border-left:1px solid var(--hair-soft)}
.strip__cell:first-child{border-left:0;padding-left:0}
.strip__cell h3{margin:.9em 0 .55em;font-size:clamp(17px,1.5vw,22px)}
.strip__cell p{margin:0;font-size:13px;line-height:1.5;opacity:.7}
.ln{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px}
.ln:hover{border-color:var(--bone)}

/* --------------------------------------------------------------- footer -- */
.ftr{border-top:1px solid var(--hair);padding-block:clamp(38px,4.4vw,68px) 20px}
.ftr__top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(22px,3vw,54px)}
.ftr__mark{display:flex;align-items:center;gap:10px;margin-bottom:1em}
.ftr h4{margin:0 0 1.2em;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;font-weight:400}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{margin-bottom:.7em}
.ftr a,.ftr address{font-size:13px;font-style:normal;line-height:1.7;opacity:.8;text-decoration:none}
.ftr a:hover{opacity:1}
.ftr__base{
  margin-top:clamp(34px,4vw,64px);padding-top:16px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;
}

/* ---------------------------------------------------------------- drawer -- */
.veil{
  position:fixed;inset:0;z-index:48;background:rgba(11,10,9,.72);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.veil.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:50;
  width:min(420px,100%);
  background:var(--ink-2);border-left:1px solid var(--hair);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .6s var(--ease);
}
.drawer.on{transform:none}
.drawer__hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);border-bottom:1px solid var(--hair-soft);
}
.x{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--hair)}
.x:hover{background:rgba(227,214,186,.09)}
.drawer__body{flex:1 1 auto;overflow:auto;padding:6px var(--pad)}
.line{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--hair-soft);
}
.line h4{margin:0 0 5px;font-size:15px}
.line .u{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.line__right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.line__sum{font-size:15px;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--hair)}
.qty button{width:26px;height:26px;display:grid;place-items:center;font-size:14px}
.qty button:hover{background:rgba(227,214,186,.09)}
.qty span{min-width:24px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.empty{font-size:14px;line-height:1.6;opacity:.7;padding:28px 0}
.empty a{text-decoration:none;border-bottom:1px solid var(--hair)}
.drawer__ft{padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--hair-soft)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9em}
.tot .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.tot .v{font-size:22px;font-variant-numeric:tabular-nums}
.fine{margin:0 0 1.1em;font-size:11px;line-height:1.5;opacity:.55}
.drawer__ft .btn{width:100%;text-align:center}
.notice{
  display:none;margin-top:14px;padding:12px 14px;
  border:1px solid var(--hair);font-size:12px;line-height:1.5;opacity:.8;
}
.notice.on{display:block}

/* --------------------------------------------------------------- reveal -- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- phone --
   Everything that sits side by side becomes stacked, and the dividing rules
   turn from vertical to horizontal so the structure survives the fold. */
@media (max-width:899px){
  .hdr__in{gap:12px}
  .pagehead{padding-top:clamp(56px,16vh,120px)}
  .pack{grid-template-columns:1fr;gap:18px}
  .about__grid{grid-template-columns:1fr}
  .figures{grid-template-columns:repeat(2,1fr)}
  .fig{border-left:0;border-top:1px solid var(--hair-soft);padding:16px 0 0}
  .fig:nth-child(-n+2){border-top:0}
  .fig:nth-child(2){padding-left:0}
  .strip__grid{grid-template-columns:1fr}
  .strip__cell{
    padding:20px 0;border-left:0;border-top:1px solid var(--hair-soft);
  }
  .strip__cell:first-child{border-top:0;padding-top:0}
  /* The strip is the one block that used to run edge to edge; on a handset
     it takes the same gutter as the rest so no text touches the glass. */
  .strip .shell{padding-inline:var(--pad)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .row{gap:14px}
  .row__desc{font-size:12px}
  .foot-note{flex-direction:column;align-items:flex-start}
  .drawer{width:100%;border-left:0}
}

/* Same reasoning as the landing page: a handset needs a wider gutter than
   the desktop, not a narrower one, and the safe-area insets sit on top of
   it so nothing runs under a notch or a rounded corner. */
@media (max-width:699px){
  :root{--pad:26px}
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .ftr__base{padding-bottom:env(safe-area-inset-bottom)}
}

@media (max-width:520px){
  .ftr__top{grid-template-columns:1fr}
  .pack__buy{gap:14px}
  /* Long dish names and their price need room to sit on one line. */
  .row{gap:12px}
  .row__desc{max-width:34ch}
}

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

/* ============================================================== checkout ==
   The one place on the public site that asks for something. It is set as a
   form, not a shop: hairline rules, no boxes, the summary sitting alongside on
   a desktop and beneath on a phone, and the total always visible next to the
   button that charges it.
   ======================================================================== */
.checkout__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}

.fieldset{margin-bottom:clamp(26px,3vw,44px)}
.fieldset > .label{display:block;margin-bottom:1.2em}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,28px)}
.field{display:block;margin-bottom:20px}
.field--wide{grid-column:1/-1}
.field > span{
  display:block;margin-bottom:8px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;
}
.field input,.field textarea{
  width:100%;padding:11px 0;
  background:none;border:0;border-bottom:1px solid var(--hair);
  color:var(--bone);font-size:16px;font-family:inherit;
  border-radius:0;                     /* iOS rounds inputs by default */
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--bone)}
.field input::placeholder{color:var(--bone);opacity:.3}

/* Radio rows, set as a list rather than as dots: the whole row is the target,
   which is the difference between usable and not on a handset. */
.choices{border-top:1px solid var(--hair)}
.choice{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--hair-soft);
  cursor:pointer;position:relative;
}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__t{font-size:clamp(16px,1.3vw,19px);letter-spacing:-.01em}
.choice__n{grid-column:1;font-size:12px;opacity:.55;line-height:1.4}
.choice__p{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums;font-size:14px;opacity:.8}
.choice.on .choice__t{font-weight:700}
.choice.on::before{
  content:"";position:absolute;left:-14px;top:22px;
  width:5px;height:5px;background:var(--bone);
}
.choice:hover{background:rgba(227,214,186,.03)}

.summary{
  border:1px solid var(--hair-soft);padding:clamp(20px,2.4vw,30px);
  position:sticky;top:calc(var(--pad) + 44px);
}
.summary > .label{display:block;margin-bottom:1.2em}
.summary__lines{border-top:1px solid var(--hair-soft);margin-bottom:18px}
.summary .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7em;gap:16px}
.summary .tot .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.summary .tot .v{font-size:15px;font-variant-numeric:tabular-nums}
.summary .tot--strong{
  padding-top:.8em;margin-top:.2em;border-top:1px solid var(--hair);
}
.summary .tot--strong .k{opacity:1}
.summary .tot--strong .v{font-size:24px}
.summary .btn{width:100%;text-align:center;margin-top:1.2em;cursor:pointer}
.summary .btn:disabled{opacity:.32;cursor:not-allowed}
.fine--warn{opacity:.9}

.simulate__acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:1.4em}
.simulate__acts .btn{cursor:pointer}

@media (max-width:899px){
  .checkout__grid{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:520px){
  .fields{grid-template-columns:1fr}
}

/* ================================================================ dishes ==
   The order page is the menu, so every dish is shown with its photograph.
   Desktop: a grid of pictures with the name and price under each. Phone: one
   row per dish, a square picture on the left and the words beside it, which is
   how people actually scroll a menu on a handset.
   ======================================================================== */
.jump{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  padding-bottom:18px;margin-bottom:clamp(26px,3vw,44px);
  border-bottom:1px solid var(--hair-soft);
}
.jump a{
  text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.62;transition:opacity .3s var(--ease);
}
.jump a:hover{opacity:1}

.course{margin-bottom:clamp(40px,5vw,76px);scroll-margin-top:90px}
.course__label{display:block;margin:0 0 1.3em;font-weight:400}

.dishes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(22px,2.4vw,36px) clamp(16px,1.8vw,26px);
}
.dish{display:flex;flex-direction:column;gap:14px;min-width:0}
.dish__photo{aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.photo{display:block;width:100%;height:100%;object-fit:cover}
img.photo{transition:transform 1.1s var(--ease)}
.dish:hover img.photo{transform:scale(1.03)}

/* No photograph yet: the brand's own mark on ink, labelled for what belongs
   there. Deliberately quiet, so a half-photographed menu still looks built. */
.photo--empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--bone);border:1px solid var(--hair-soft);
  background:
    repeating-linear-gradient(135deg,transparent 0 11px,rgba(227,214,186,.025) 11px 12px),
    var(--ink-2);
}
.photo--empty svg{opacity:.34}
.photo--empty span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.42;text-align:center;padding:0 8px}

.dish__body{display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.dish__name{
  margin:0;font-size:clamp(15px,1.15vw,18px);
  font-weight:400;line-height:1.1;letter-spacing:-.012em;text-transform:uppercase;
}
.dish__desc{
  margin:0;font-size:13px;line-height:1.45;opacity:.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dish__foot{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--hair-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.dish__price{font-size:16px;font-variant-numeric:tabular-nums}
.dish--out .dish__photo{opacity:.4}
.dish--out .dish__price{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

@media (max-width:599px){
  .dishes{grid-template-columns:1fr;gap:0}
  .dish{
    display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;
    padding:14px 0;border-bottom:1px solid var(--hair-soft);
  }
  .dish:first-child{padding-top:0}
  .dish__photo{aspect-ratio:1}
  .photo--empty span{display:none}
  .dish__desc{font-size:12px;-webkit-line-clamp:2}
  .dish__foot{padding-top:6px;border-top:0}
}

/* =============================================================== gallery ==
   The kitchen's own photographs of the fire. One lead picture and five
   around it; on a phone, a sideways swipe, one photo at a time with the next
   one peeking in, and dots underneath.
   ======================================================================== */
.gallery{border-top:1px solid var(--hair);padding-block:var(--shelf)}
.gallery__hd{margin-bottom:clamp(22px,2.6vw,40px)}
.gallery__hd .eyelet{margin-bottom:1em}
.gallery__title{
  margin:0;font-size:clamp(34px,5vw,76px);
  font-weight:700;line-height:.86;letter-spacing:-.025em;text-transform:uppercase;
}
.gallery__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(150px,19vw,290px);gap:clamp(8px,1vw,14px);
}
.tile{margin:0;overflow:hidden;background:var(--ink-2)}
.tile--lead{grid-column:span 2;grid-row:span 2}
.tile img.photo{filter:contrast(1.04)}

.gallery__dots{display:none}

@media (max-width:699px){
  /* The track runs edge to edge of the screen. Each photo is 82% of the screen
     wide and snaps to the exact centre, so the neighbours peek in equally on
     both sides; the 9vw padding lets the first and last photo centre too. */
  .gallery__grid{
    display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad));padding-inline:9vw;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .gallery__grid::-webkit-scrollbar{display:none}
  .tile,.tile--lead{flex:0 0 82vw;height:61.5vw;scroll-snap-align:center}
  .gallery__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .gallery__dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:var(--bone);opacity:.28;cursor:pointer;transition:opacity .25s,transform .25s;
  }
  .gallery__dots button[aria-current]{opacity:1;transform:scale(1.25)}
}

/* =============================================================== reviews ==
   What customers have said, word for word. Three quotes in a row on a wide
   screen, stacked on a phone. */
.reviews{
  --gold:#E8B04A;
  border-top:1px solid var(--hair);padding-block:var(--shelf);position:relative;overflow:hidden;
  /* A warm glow behind the section, so it reads as a moment of its own. */
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(232,176,74,.10),transparent 70%);
}
.reviews .eyelet{margin-bottom:1em}
.reviews .eyelet .label{color:var(--gold);opacity:1}
.reviews .eyelet .rule{background:var(--gold)}
.reviews__title{
  margin:0 0 clamp(26px,3vw,46px);font-size:clamp(34px,5vw,76px);
  font-weight:700;line-height:.86;letter-spacing:-.025em;text-transform:uppercase;
}
.reviews__title em{font-style:normal;color:var(--gold)}
.reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.review{
  margin:0;padding:clamp(26px,2.6vw,38px);position:relative;
  display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(160deg,rgba(232,176,74,.08),rgba(255,255,255,.015) 45%,rgba(0,0,0,0));
  border:1px solid rgba(232,176,74,.28);border-top:3px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.review:hover{transform:translateY(-4px);border-color:rgba(232,176,74,.55);box-shadow:0 26px 60px rgba(0,0,0,.55)}
/* The big quote mark in the corner. */
.review::before{
  content:"“";position:absolute;top:-6px;right:18px;
  font:700 110px/1 Georgia,'Times New Roman',serif;color:var(--gold);opacity:.22;pointer-events:none;
}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--bone)}
.review figcaption{margin-top:auto;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.review__stars{margin:0;display:flex;gap:4px;line-height:0}
.review__stars svg{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.4}
.review__stars svg.on{fill:var(--gold);opacity:1;filter:drop-shadow(0 0 6px rgba(232,176,74,.35))}
.review__stars .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:899px){.reviews__grid{grid-template-columns:1fr}}

/* ============================================================== products ==
   Nothing to sell yet: one plain statement, not an empty shop. */
.soon{max-width:40rem}
.soon__title{
  margin:0 0 .5em;font-size:clamp(40px,6.5vw,104px);
  font-weight:700;line-height:.86;letter-spacing:-.025em;text-transform:uppercase;
}
.soon__copy{margin:0 0 2em;font-size:clamp(15px,1.2vw,18px);line-height:1.55;opacity:.8;max-width:44ch}

/* ================================================================== menu ==
   The menu as text, set with the price-list rows above (.group, .row). Two
   columns on a desktop, one on a phone; a section never splits between
   columns. */
.menulist{columns:2;column-gap:clamp(40px,6vw,120px)}
.menulist .group{break-inside:avoid}
.menulist h2.label{margin-top:0;font-weight:400}
.menulist .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px}
/* Name and price share the first line; the description runs the full width
   under both, so a long price never squeezes it into a narrow column. */
.menulist .row > div{display:contents}
.menulist .row__name{grid-column:1;grid-row:1}
.menulist .row__price{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.menulist .row__desc{grid-column:1/-1;grid-row:2}
.menulist__note{margin:12px 0 0;font-size:13px;line-height:1.4;opacity:.62;max-width:56ch}
@media (max-width:899px){.menulist{columns:1}}

/* ============================================================ about/contact */
.about__copy--solo{max-width:62rem}
.about__copy--solo > div p{max-width:62ch}
.contact__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.contact__cols h3{margin-top:0}
@media (max-width:899px){
  .contact__cols{grid-template-columns:1fr;gap:28px}
}

/* The second word in a headline is set in the dimmed weight, never italic —
   the same treatment .display em gives every other headline on the site. */
.gallery__title em,.soon__title em{font-style:normal;opacity:.55}