/* ==========================================================================
   Smoked Inc — confirmed design language (Variation A, full-bleed photography)

   Two colours only. Near-black ground, warm off-white type, nothing else:
   no gold, no ember, no greys that are not the photograph. One typeface.
   The picture carries the whole page, so the scrim — not a solid panel —
   is what keeps the type readable.
   ========================================================================== */

:root{
  --ink:#0B0A09;
  /* Read off the client's beige sample. Warmer and creamier than the old
     bone; every piece of type and every rule comes from this one value. */
  --bone:#E3D6BA;

  /* Hairlines are the only "third colour" and they are just bone at low
     alpha. Two weights: one for structure, one for the quieter divisions. */
  --hair:rgba(227,214,186,.30);
  --hair-soft:rgba(227,214,186,.16);

  /* Helvetica proper is not installed on most machines; Arial is the same
     skeleton at the same widths, so the fallback does not shift the layout. */
  --ui:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(18px,2.2vw,34px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  /* One screen, no scrolling. The page is a door, not a document. */
  overflow:hidden;
}

/* ---------------------------------------------------------------- stage --
   The photograph is the page. Desaturated to sit inside the two-colour
   rule, and pushed dark enough that bone type reads anywhere on top. */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
/* <picture> is only a wrapper for the art direction; the img keeps the box. */
.stage picture{display:contents}
.stage img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.28) brightness(.92);
}
/* Heavy at the bottom where the cells sit, almost clear across the middle
   so the picture keeps its highlights, and a light top wash so the
   wordmark has something to sit against. */
.stage__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(11,10,9,.96) 0%,
      rgba(11,10,9,.86) 20%,
      rgba(11,10,9,.30) 46%,
      rgba(11,10,9,.10) 74%,
      rgba(11,10,9,.42) 100%);
}

/* Film grain, always on. Kept faint enough to read as stock, not texture. */
.grain{
  position:fixed;inset:-50%;z-index:1;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");
}

/* ----------------------------------------------------------------- page -- */
.page{
  position:relative;z-index:2;
  height:100dvh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}

.top{padding:clamp(16px,2vw,30px) var(--pad) 0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.mark{
  margin:0;font-weight:700;line-height:.84;letter-spacing:-.025em;
  font-size:clamp(52px,7.6vw,132px);
}
.hours{
  font-size:clamp(9px,.62vw,11px);letter-spacing:.16em;text-transform:uppercase;
  opacity:.9;white-space:nowrap;padding-top:.6em;
}

.gap{flex:1 1 auto}

/* ------------------------------------------------------------------ nav --
   Four cells, hairline-divided, sitting in the bottom third where the
   scrim is heaviest. Full-bleed rules; the padding lives in the cells.
   One equal column per cell, however many the owner fills in. */
.nav{
  border-top:1px solid var(--hair);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
}
.cell{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(14px,1.5vw,22px) var(--pad) clamp(16px,1.7vw,26px);
  border-left:1px solid var(--hair-soft);
  transition:background .45s var(--ease);
}
.cell:first-child{border-left:0}
.cell:hover,.cell:focus-visible{background:rgba(227,214,186,.05);outline:0}

.num{display:block;font-size:9px;letter-spacing:.18em;opacity:.64;margin-bottom:.7em}
.cell h2{
  margin:0 0 .35em;font-weight:400;letter-spacing:-.012em;line-height:1;
  font-size:clamp(20px,2.2vw,34px);
}
.cell p{margin:0;font-size:clamp(11px,.85vw,13px);line-height:1.4;opacity:.82;max-width:26ch}
.arrow{display:inline-block;margin-top:.9em;transition:transform .5s var(--ease)}
.cell:hover .arrow{transform:translateX(6px)}

.foot{
  border-top:1px solid var(--hair);
  padding:9px var(--pad) 12px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;
  display:flex;justify-content:space-between;gap:16px;
}
.foot a{color:inherit;text-decoration:none}
.foot__r{display:flex;gap:22px}
.foot a:hover{opacity:.7}

/* One line the handset door carries and the desktop one does not: on a phone
   the wordmark has the room to say what the place is, on a desktop the hours
   sit alone on a single line at the top right. Declaring it here keeps the
   responsive door at / and the pinned build at /v2/phone.html identical on a
   handset, so it does not matter which of the two you land on. */
.only-phone{display:none}

/* ---------------------------------------------------------------- phone --
   Same design language, restacked: the four cells become four rows, with
   the heading on the left and its one line of copy on the right, so each
   row stays a single line high and all four still fit above the fold.

   Keyed to the width rather than to a class, so one file serves the
   responsive door at / and the pinned reference build in /v2/.

   The gutter also widens here rather than narrowing: a handset has no
   surrounding chrome to hold type off the glass, and a rounded screen eats
   the corners. 26px, plus whatever the notch and home indicator claim. */
@media (max-width:699px){
  :root{--pad:26px}
  .only-phone{display:inline}

  .page{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .top{
    flex-direction:column;align-items:flex-start;gap:.55em;
    padding-top:max(22px,env(safe-area-inset-top));
  }
  .mark{font-size:clamp(44px,15vw,72px)}
  .hours{padding-top:0;font-size:10px;letter-spacing:.14em;white-space:normal}
  .nav{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
  .cell{
    border-left:0;border-top:1px solid var(--hair-soft);
    padding:14px var(--pad) 16px;
    display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 14px;
  }
  .cell:first-child{border-top:0}
  .num{grid-column:1/-1;margin-bottom:.5em}
  .cell h2{font-size:clamp(24px,7vw,32px);margin:0}
  .cell p{font-size:11px;text-align:right;max-width:18ch;justify-self:end}
  .arrow{display:none}
  /* The safe area is paid for once, by .page; the foot only needs its own
     breathing room above the line. */
  .foot{justify-content:center;letter-spacing:.14em;padding-bottom:2px}
  .foot a,.foot__r{display:none}

  /* The whole door still fits one screen — nothing is below the fold — but
     the document is a little taller than the viewport so the page answers a
     thumb instead of feeling dead. Everything moves together at one speed:
     no parallax, no scaling, no fade. What the scroll reveals is ink. */
  body{overflow:visible}
  /* svh, not dvh: the small viewport is the one with the browser chrome
     showing, which is the state the page actually opens in. dvh measures the
     chrome-hidden viewport, so the last row ends up under Safari's bar. */
  .page{
    height:100svh;
    /* svh is the viewport with the browser bars fully out, so its bottom edge
       is the top of Safari's address bar. The address line is set right on
       that edge by request: no reserve at all beyond the safe area, so the
       row reads as sitting on the chrome rather than floating above it. */
    padding-bottom:env(safe-area-inset-bottom);
  }
  .stage,.grain{position:absolute;inset:0;height:100svh}
  /* A thumb's worth of give, no more. The door is already whole above it. */
  body::after{content:"";display:block;height:5svh}
}


@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}