/* ============================================================
   Rafi Smoke Shop — Lexington, KY
   Direction: Midnight Apothecary

   Three things keep this specific to the shop rather than
   generically dark:
     · the hexagonal LED ceiling, redrawn as the hero's light
     · the tie-dye storefront sign, surviving as one spectrum thread
     · the window neon, as a live OPEN sign that really lights
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* ink — warm-shifted near-black, never blue */
  --ink:      #0A0908;
  --ink-2:    #0F0D0C;
  --ink-3:    #151211;
  --ink-4:    #1D1817;
  --line:     #262019;
  --line-2:   #3A3027;

  /* brass — their signage yellow, refined */
  --brass:    #C8952E;
  --brass-lit:#F0C45E;
  --brass-dim:#7A5A1C;

  /* bone */
  --bone:     #EDE6DA;
  --bone-2:   #ADA294;
  --bone-3:   #746A5F;

  /* spectrum — the tie-dye sign, used with restraint */
  --sp-1:#FF4D6D; --sp-2:#FFB020; --sp-3:#6FE07A; --sp-4:#4FC3F7; --sp-5:#B57BFF;
  --spectrum: linear-gradient(90deg,var(--sp-1),var(--sp-2),var(--sp-3),var(--sp-4),var(--sp-5));

  /* neon — the window sign. The only non-brass colour on the page,
     and it is an object, not chrome. */
  --neon:      #FF3D7F;
  --neon-hot:  #FFDCE8;
  --neon-deep: #FF1F6B;
  --neon-dead: #35272C;

  /* type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* measure */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1400px;

  /* `vw` counts the scrollbar, so full-bleed maths built on it overflows by the
     scrollbar width. --sbw is measured in JS; --vw is the honest viewport. */
  --sbw: 0px;
  --vw: calc(100vw - var(--sbw));

  --ease: cubic-bezier(.22,.61,.36,1);
  --snap: cubic-bezier(.2,.9,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.94rem + .28vw,1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }   /* UA default is `1em 40px` — it silently shrinks every photo */
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--brass); color:var(--ink); }
:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
/* keep content clear of the notch / rounded corners in landscape */
@supports (padding: max(0px)){
  .wrap{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- type roles ---------- */
.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 12,"WONK" 1;
  font-weight:400;
  line-height:.96;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
.display em{
  font-style:italic; color:var(--brass);
  font-variation-settings:"SOFT" 20,"WONK" 1;
}
.tag{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-3); margin:0;
}
.lede{
  font-size:clamp(1.04rem,.96rem + .4vw,1.24rem);
  line-height:1.58; color:var(--bone-2); max-width:54ch; margin:0;
}

.spectrum-rule{
  height:2px; width:100%; border:0; margin:0;
  background:var(--spectrum); opacity:.85;
}

/* ============================================================
   BUTTONS — built as physical objects: a brass plate with a lit
   top edge and a real press, not a filled rectangle
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:1.02rem 1.7rem;
  font-family:var(--body); font-size:.85rem; font-weight:600;
  line-height:1; letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  border:0; border-radius:2px;
  transition:transform .13s var(--snap), box-shadow .32s var(--ease),
             background .32s var(--ease), color .32s var(--ease);
}
.btn__ico{ width:1.05em; height:1.05em; flex:none; }
.btn__arrow{ transition:transform .34s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.btn--solid{
  color:#150E01;
  background:linear-gradient(180deg,#F3C868 0%,var(--brass) 48%,#A5761D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.7),
    inset 0 -1px 0 rgba(60,38,0,.42),
    0 1px 2px rgba(0,0,0,.6),
    0 10px 24px -12px rgba(200,149,46,.55);
}
.btn--solid:hover{
  background:linear-gradient(180deg,#FFDB86 0%,var(--brass-lit) 48%,#BB8A26 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,249,230,.85),
    inset 0 -1px 0 rgba(60,38,0,.36),
    0 1px 2px rgba(0,0,0,.6),
    0 15px 34px -14px rgba(240,196,94,.62);
}
.btn--solid:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(60,38,0,.5),
    inset 0 1px 0 rgba(255,244,214,.25),
    0 1px 1px rgba(0,0,0,.5);
}

.btn--ghost{
  color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,0));
  box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn--ghost:hover{
  color:var(--brass-lit);
  background:linear-gradient(180deg,rgba(240,196,94,.07),rgba(240,196,94,.01));
  box-shadow:inset 0 0 0 1px var(--brass-dim), inset 0 1px 0 rgba(255,255,255,.09),
             0 12px 28px -16px rgba(200,149,46,.5);
}
.btn--ghost:active{ transform:translateY(1px); }

.btn--sm{ padding:.72rem 1.15rem; font-size:.78rem; }

/* ============================================================
   AGE GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  padding:var(--gutter); text-align:center;
}
.gate[hidden]{ display:none; }
.gate__inner{ max-width:34rem; }
.gate__mark{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:clamp(2.6rem,7vw,4.2rem); line-height:.9;
  letter-spacing:-.03em; margin:0 0 .1em;
}
.gate__mark span{ color:var(--brass); }
.gate__rule{ width:110px; margin:1.6rem auto; }
.gate__q{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.15; margin:0 0 .6rem;
}
.gate__note{ color:var(--bone-3); font-size:.9rem; margin:0 auto 2rem; max-width:34ch; }
.gate__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.gate__deny{
  background:none; border:1px solid var(--line-2); color:var(--bone-3);
  padding:1.02rem 1.5rem; border-radius:2px; cursor:pointer;
  font-size:.85rem; transition:border-color .25s, color .25s;
}
.gate__deny:hover{ border-color:var(--bone-3); color:var(--bone-2); }
.gate__legal{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:#4A423A; margin-top:2.5rem; line-height:2;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,9,8,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.05rem; }
.nav__mark{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:1.35rem; letter-spacing:-.02em; line-height:1;
  text-decoration:none; white-space:nowrap;
}
.nav__mark b{ font-weight:600; }
.nav__mark span{ color:var(--brass); font-weight:400; }
.nav__links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--bone-2); text-decoration:none;
  padding-block:.4rem; position:relative; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
.nav__phone{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  color:var(--bone); text-decoration:none; white-space:nowrap; transition:color .25s;
}
.nav__phone:hover{ color:var(--brass-lit); }

/* mobile menu — the links used to simply vanish below 980px */
.nav__toggle{
  display:none; align-items:center; gap:.55rem;
  padding:.68rem .9rem; border:0; border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:color .25s, box-shadow .25s;
}
.nav__toggle:hover{ color:var(--brass-lit); box-shadow:inset 0 0 0 1px var(--brass-dim); }
.nav__burger{ position:relative; width:14px; height:9px; flex:none; }
.nav__burger::before,
.nav__burger::after{
  content:""; position:absolute; left:0; right:0; height:1.5px;
  background:currentColor; transition:transform .3s var(--ease), opacity .3s;
}
.nav__burger::before{ top:0; }
.nav__burger::after{ bottom:0; }
.nav__toggle[aria-expanded="true"] .nav__burger::before{ transform:translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::after{ transform:translateY(-3.75px) rotate(-45deg); }

.nav__panel{
  background:rgba(10,9,8,.97);
  backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.nav__panel[hidden]{ display:none; }
.nav__panel ul{ list-style:none; margin:0; padding:.5rem 0 1rem; display:grid; }
.nav__panel a{
  display:block; padding:.95rem 0; text-decoration:none;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--bone-2);
  transition:color .25s;
}
.nav__panel li:last-child a{ border-bottom:0; }
.nav__panel a:hover{ color:var(--brass-lit); }

@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav.is-open{ background:rgba(10,9,8,.97); backdrop-filter:blur(14px) saturate(1.2); }
}
@media (min-width:981px){
  .nav__panel{ display:none !important; }
}
@media (max-width:520px){
  /* mark + Directions + a labelled toggle will not fit on a phone;
     the burger keeps its accessible name via aria-label */
  .nav__phone{ display:none; }
  .nav__toggleLabel{ display:none; }
  .nav__toggle{ padding:.68rem .7rem; }
  .nav__bar{ gap:.7rem; }
}
@media (max-width:430px){
  /* at 320px even "Rafi Smoke Shop" + Directions + burger overflows the bar,
     so the wordmark drops to the name alone rather than losing a control */
  .nav__mark span{ display:none; }
}

/* Comfortable touch targets. Keyed to width as well as pointer type so it is
   testable at a viewport size, and so tablets get it too. */
@media (max-width:980px), (pointer:coarse){
  .nav__toggle{ min-width:44px; min-height:44px; justify-content:center; }
  .nav__panel a{ padding-block:1.05rem; }
  .btn--sm{ padding-block:.95rem; }
  .brands__chip{ min-height:40px; padding-block:.72rem; }
  .finder__clear{ min-height:40px; }
  .foot__links a{ padding-block:.8rem; }
  .nav__mark{ padding-block:.6rem; }
  .cat__brand{ padding-block:.42rem; }
  .panel__value a{ display:inline-block; padding-block:.4rem; }
}

/* ============================================================
   NEON — the window sign.
   Real neon is a glass tube with a hot near-white core, the gas
   colour around it, then bloom, then ambient spill. Unlit, the
   tube is still there as dark coloured glass.
   ============================================================ */
.sign{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; gap:.42rem;
  padding:1rem 1.5rem .85rem;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(18,14,13,.94),rgba(9,8,7,.97));
  backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 2px var(--neon-dead), 0 14px 34px -14px rgba(0,0,0,.95);
  transition:box-shadow .7s var(--ease);
}
.sign__word{
  font-family:var(--display);
  font-variation-settings:"SOFT" 20,"WONK" 1;
  font-style:italic;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
  line-height:1; letter-spacing:-.01em;
  color:var(--neon-dead);
  transition:color .7s var(--ease), text-shadow .7s var(--ease);
}
.sign__note{
  font-family:var(--mono); font-size:.53rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:#4A3F42; white-space:nowrap;
  transition:color .7s var(--ease);
}
/* ambient spill onto whatever sits behind the sign */
.sign::after{
  content:""; position:absolute; inset:-40%; z-index:-1; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,45,120,.22),transparent 70%);
  opacity:0; transition:opacity .8s var(--ease); pointer-events:none;
}

.sign.is-lit{
  box-shadow:
    inset 0 0 0 2px var(--neon),
    inset 0 0 14px rgba(255,92,144,.32),
    0 0 3px rgba(255,92,144,.55),
    0 0 18px rgba(255,45,120,.4),
    0 0 52px rgba(255,31,107,.24),
    0 14px 34px -14px rgba(0,0,0,.95);
}
.sign.is-lit .sign__word{
  color:var(--neon-hot);
  text-shadow:
    0 0 1px #fff,
    0 0 6px rgba(255,220,232,.9),
    0 0 14px var(--neon),
    0 0 30px var(--neon-deep),
    0 0 60px rgba(255,31,107,.6);
}
.sign.is-lit .sign__note{ color:#C99FAE; }
.sign.is-lit::after{ opacity:1; }

/* neon does not fade up, it strikes */
.sign.is-lit.is-striking{ animation:strike 1.15s steps(1,end) both; }
@keyframes strike{
  0%{ opacity:.25 } 6%{ opacity:1 }  11%{ opacity:.3 }
  16%{ opacity:1 } 22%{ opacity:.45 } 27%{ opacity:1 }
  31%{ opacity:.7 } 35%{ opacity:1 } 100%{ opacity:1 }
}

/* ============================================================
   HERO + the hexagonal LED ceiling
   ============================================================ */
.hero{
  position:relative;
  padding-top:clamp(7rem,16vh,11rem);
  padding-bottom:clamp(4rem,9vh,7rem);
  overflow:hidden; isolation:isolate;
}
.ceiling{
  position:absolute; inset:0 0 auto; height:min(78vh,760px);
  z-index:-1; pointer-events:none;
  perspective:620px; perspective-origin:50% 0%;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 0%,#000 8%,rgba(0,0,0,.62) 42%,transparent 78%);
          mask-image:radial-gradient(120% 92% at 50% 0%,#000 8%,rgba(0,0,0,.62) 42%,transparent 78%);
}
.ceiling__plane{
  position:absolute; top:-14%; left:-30%; width:160%; height:150%;
  transform:rotateX(64deg); transform-origin:50% 0%; opacity:.5;
}
.ceiling__plane svg{ width:100%; height:100%; display:block; }
.ceiling__glow{
  position:absolute; top:-42%; left:50%; width:130%; height:110%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(240,196,94,.16) 0%, rgba(200,149,46,.07) 38%, transparent 72%);
  animation:breathe 11s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }

.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,5vw,4rem); }
.hero__head{ min-width:0; }
.hero__eyebrow{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.5rem,3vw,2.2rem); }
.hero__title{ font-size:clamp(2.6rem,1.1rem + 5vw,5.5rem); margin-bottom:clamp(1.4rem,2.6vw,2rem); }
.hero__rule{ max-width:180px; margin-block:clamp(1.6rem,3vw,2.2rem); }
.hero__actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:clamp(1.8rem,3.4vw,2.6rem); }

/* review badge — replaces the four-cell big-number strip */
.badge{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
.badge__stars{ color:var(--brass); font-size:.72rem; letter-spacing:.16em; line-height:1; }
.badge__text{
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3);
}

/* hero photo plate */
.plate{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--ink-2); }
.plate img{ width:100%; object-fit:cover; filter:saturate(.88) contrast(1.05) brightness(.82); }
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,9,8,.96) 0%,rgba(10,9,8,.62) 14%,transparent 42%),
    linear-gradient(to right,rgba(10,9,8,.4) 0%,transparent 24%);
}
.plate__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; padding:clamp(1rem,2.4vw,1.75rem); flex-wrap:wrap;
}
.plate__caption .tag{ color:var(--bone-2); }

/* the sign hangs off the plate's edge — the one element that
   crosses the column boundary and ties the two halves together */
.hero__media{ position:relative; isolation:isolate; }
.hero__media img{ aspect-ratio:2000/1500; }
.hero__sign{ position:absolute; z-index:4; top:-1.6rem; left:-2.25rem; }

@media (min-width:1000px){
  .hero__grid{ grid-template-columns:1.06fr .94fr; align-items:end; }
  .hero__head{ padding-bottom:.5rem; }
}
@media (max-width:999px){
  .hero__sign{ top:-1.25rem; left:auto; right:.75rem; }
}
@media (max-width:520px){
  .sign{ padding:.75rem 1.05rem .62rem; }
  .hero__sign{ top:-1rem; right:.5rem; }
}

/* ============================================================
   SECTION SHELL — three head shapes, so the page does not
   repeat one formula five times
   ============================================================ */
.section{ padding-block:clamp(4.5rem,10vh,8rem); position:relative; }
.section--flush{ padding-block:0; }

.head{ display:grid; gap:1.3rem; margin-bottom:clamp(2.4rem,4.5vw,3.5rem); max-width:70ch; }
.head__title{ font-size:clamp(2.1rem,1.3rem + 3.2vw,3.9rem); }

/* title left, supporting copy right, sharing a baseline rule */
.head--split{
  max-width:none;
  display:grid; gap:clamp(1.2rem,3vw,3rem);
  align-items:end;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .head--split{ grid-template-columns:1.15fr .85fr; }
  .head--split .lede{ padding-bottom:.35rem; }
}

/* ============================================================
   THE RACK — categories as the shelving unit they sit on.
   Each tile carries its own rail segment; flush tiles join
   into one continuous shelf.
   ============================================================ */
.rack{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr));
  /* left border closes the unit — every tile carries its own right border, so
     without this the rack is open on one side and closed on the other */
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.cat{
  position:relative;
  display:flex; flex-direction:column; gap:.85rem;
  min-height:308px;
  padding:0 1.6rem 3.2rem;
  background:linear-gradient(180deg,#100E0D 0%,#0B0A09 100%);
  border-right:1px solid var(--line);
  transition:background .4s var(--ease);
}

/* the goods sit above the shelf card, the way they do on the shelf */
.cat__shot{
  position:relative; overflow:hidden;
  margin:0 -1.6rem .5rem;
  aspect-ratio:8/5;
  background:var(--ink-3);
}
.cat__shot img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.96) contrast(1.03) brightness(.82);
  transform:scale(1.01);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.cat:hover .cat__shot img{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.04) brightness(1);
}
/* scrim only where the photo meets the shelf card, so the goods stay readable */
.cat__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,9,8,.34) 0%, rgba(10,9,8,0) 26%, rgba(11,10,9,.55) 78%, rgba(11,10,9,.95) 100%);
}
.cat:hover{ background:linear-gradient(180deg,#171412 0%,#0E0C0B 100%); }

/* the spectrum thread, on hover only */
.cat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--spectrum);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.cat:hover::before{ transform:scaleX(1); }

/* the shelf rail: lit top lip, body, shadow cast beneath */
.cat::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:13px;
  background:linear-gradient(180deg,#282119 0%,#181310 45%,#0A0908 100%);
  box-shadow:
    inset 0 1px 0 rgba(226,200,150,.14),
    0 -7px 16px -6px rgba(0,0,0,.85);
  transition:box-shadow .4s var(--ease);
}
.cat:hover::after{
  box-shadow:
    inset 0 1px 0 rgba(240,196,94,.42),
    0 -7px 18px -6px rgba(0,0,0,.85);
}

/* the location tag, clipped to the rail like a real shelf label */
.cat__where{
  position:absolute; left:1.6rem; bottom:3px; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.32rem .55rem;
  margin:0;
  background:#141110;
  border:1px solid var(--line-2);
  border-radius:2px;
  font-family:var(--mono); font-size:.55rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.cat:hover .cat__where{ color:var(--bone-2); border-color:#4A3E30; }

/* hex marker — ignites like the ceiling fixture it is drawn from */
.cat__hex{ width:12px; height:14px; flex:none; color:var(--line-2); transition:color .4s var(--ease), filter .4s var(--ease); }
.cat:hover .cat__hex{
  color:var(--brass-lit);
  filter:drop-shadow(0 0 4px rgba(240,196,94,.9)) drop-shadow(0 0 11px rgba(200,149,46,.55));
}

.cat__name{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:clamp(1.32rem,1.1rem + .75vw,1.7rem);
  line-height:1.1; letter-spacing:-.018em; margin:0;
  transition:color .4s var(--ease);
}
.cat:hover .cat__name{ color:var(--brass-lit); }
.cat__desc{ font-size:.91rem; line-height:1.6; color:var(--bone-2); margin:0; }

.cat__brands{ margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; gap:.38rem; }
.cat__brand{
  font-family:var(--mono); font-size:.55rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3);
  border:1px solid var(--line-2); padding:.22rem .45rem; border-radius:2px;
  transition:color .3s, border-color .3s, background .3s;
}
.cat:hover .cat__brand{ color:var(--bone-2); border-color:#4A3E30; background:rgba(240,196,94,.03); }

/* Fraunces ships a decorative ampersand that is illegible at heading size */
.amp{ font-family:var(--body); font-weight:400; font-style:normal; }

/* ============================================================
   FULL-BLEED BAND
   ============================================================ */
.band{ position:relative; border-block:1px solid var(--line); }
.band img{
  width:100%; aspect-ratio:2000/1500; max-height:80vh;
  object-fit:cover; object-position:50% 2%;
  filter:saturate(.92) contrast(1.04) brightness(.82);
}
.band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,8,.94) 0%,rgba(10,9,8,.5) 30%,transparent 62%);
}
.band__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding-bottom:clamp(1.4rem,3.4vw,2.6rem);
  display:grid; gap:.7rem;
}
.band__cap p:last-child{
  margin:0; max-width:46ch; color:var(--bone-2);
  font-size:clamp(.92rem,.88rem + .2vw,1.02rem); line-height:1.55;
}
@media (max-width:640px){
  .band img{ aspect-ratio:4/3; }
  .band::after{ background:linear-gradient(to top,rgba(10,9,8,.97) 0%,rgba(10,9,8,.72) 46%,transparent 78%); }
}

/* ============================================================
   SPREAD — editorial overlap. The photo bleeds off the viewport
   edge and the copy panel sits on top of it.
   ============================================================ */
.spread{ position:relative; display:grid; gap:0; }
.spread__media{ position:relative; }
.spread__media img{ width:100%; object-fit:cover; filter:saturate(.93) contrast(1.05) brightness(.86); }
.spread__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 45% 45%,transparent 40%,rgba(10,9,8,.6) 100%);
}
.spread__body{
  position:relative; z-index:2; display:grid; gap:1.25rem;
  background:linear-gradient(180deg,#100E0D 0%,#0B0A09 100%);
}
.spread__title{ font-size:clamp(1.85rem,1.25rem + 2.3vw,3.1rem); }

@media (min-width:900px){
  .spread{ grid-template-columns:repeat(12,1fr); align-items:stretch; }
  .spread__media{
    grid-column:1 / 7; grid-row:1;
    /* bleed off the left edge of the page: back out the gutter, plus whatever
       the centred container leaves either side */
    margin-left:calc(-1 * (var(--gutter) + max(0px,(var(--vw) - var(--maxw)) / 2)));
    /* absolutely-positioned image contributes no intrinsic height, so the row
       is sized by the copy panel and the photo crops to match it */
    position:relative;
    min-height:460px;
  }
  .spread__media img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:50% 40%;
  }
  .spread__body{
    grid-column:6 / 13; grid-row:1;
    align-self:center;
    padding:clamp(2.2rem,3.6vw,3.4rem);
    border:1px solid var(--line); border-radius:3px;
    box-shadow:-40px 0 80px -30px rgba(0,0,0,.95);
  }
}
@media (max-width:899px){
  .spread__media{ margin-inline:calc(var(--gutter) * -1); }
  .spread__media img{ aspect-ratio:3/2; }
  .spread__body{ padding-top:2.2rem; }
}

.spec{ list-style:none; margin:.3rem 0 0; padding:0; border-top:1px solid var(--line); }
.spec li{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:.78rem; border-bottom:1px solid var(--line); font-size:.93rem;
}
.spec b{
  font-family:var(--mono); font-size:.57rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); flex:none; width:8.5rem;
}
.spec span{ color:var(--bone-2); }
@media (max-width:480px){
  .spec li{ flex-direction:column; gap:.3rem; }
  .spec b{ width:auto; }
}

/* ============================================================
   SHELF FINDER — the brands are searchable rather than decorative.
   Replaces an infinite-scrolling logo marquee, which said nothing
   a customer could act on.
   ============================================================ */
.finder{ display:grid; gap:1.05rem; margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }

.finder__field{
  display:flex; align-items:center; gap:.85rem;
  padding-left:1.1rem; padding-right:.4rem;
  border-radius:3px;
  background:linear-gradient(180deg,#090807 0%,#0E0C0B 100%);
  box-shadow:inset 0 0 0 1px var(--line-2), inset 0 2px 7px rgba(0,0,0,.7);
  transition:box-shadow .3s var(--ease);
}
.finder__field:focus-within{
  box-shadow:inset 0 0 0 1px var(--brass), inset 0 2px 7px rgba(0,0,0,.7),
             0 0 0 3px rgba(200,149,46,.15);
}
.finder__ico{ width:16px; height:16px; flex:none; color:var(--bone-3); transition:color .3s; }
.finder__field:focus-within .finder__ico{ color:var(--brass); }

.finder input{
  flex:1; min-width:0;
  background:none; border:0; outline:none; color:var(--bone);
  font-family:var(--body); font-size:1rem; padding-block:1.05rem;
}
.finder input::placeholder{ color:var(--bone-3); }
.finder input::-webkit-search-cancel-button,
.finder input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }

.finder__clear{
  flex:none; background:none; border:0; cursor:pointer;
  padding:.55rem .8rem; border-radius:2px;
  font-family:var(--mono); font-size:.55rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-3);
  transition:color .25s, background .25s;
}
.finder__clear:hover{ color:var(--bone); background:rgba(255,255,255,.05); }
.finder__clear[hidden]{ display:none; }

.finder__out{
  margin:0; min-height:1.35em;
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone-3);
}
.finder__out b{ color:var(--brass-lit); font-weight:500; }
.finder__out a{ color:var(--brass-lit); }

/* the brand wall — dense, static, and every chip is a filter */
.brands{ display:flex; flex-wrap:wrap; gap:.4rem; }
.brands__chip{
  border:0; cursor:pointer; border-radius:2px;
  padding:.46rem .72rem;
  font-family:var(--mono); font-size:.57rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--bone-2);
  background:linear-gradient(180deg,#141110 0%,#0D0B0A 100%);
  box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.04);
  transition:color .25s var(--ease), box-shadow .25s var(--ease), transform .12s var(--snap);
}
.brands__chip:hover{
  color:var(--brass-lit);
  box-shadow:inset 0 0 0 1px var(--brass-dim), inset 0 1px 0 rgba(255,255,255,.07);
}
.brands__chip:active{ transform:translateY(1px); }
.brands__chip.is-on{
  color:#150E01; font-weight:500;
  background:linear-gradient(180deg,#F0C45E 0%,var(--brass) 100%);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.6), 0 6px 16px -8px rgba(200,149,46,.6);
}

/* filtered-out tiles recede rather than disappear, so the shelf
   layout stays legible while you search */
.cat.is-dim{ opacity:.18; filter:saturate(.35); }
.cat.is-dim:hover{ opacity:.34; }
.cat__brand.is-hit{
  color:#150E01; font-weight:500;
  background:var(--brass); border-color:var(--brass);
}

/* ============================================================
   REVIEW REPLIES — Rafi's own words, from his Google responses
   ============================================================ */
.review__reply{
  display:grid; gap:.5rem;
  padding:.95rem 1.05rem; border-radius:3px;
  background:rgba(200,149,46,.045);
  box-shadow:inset 0 0 0 1px rgba(200,149,46,.17);
}
.review__who{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.52rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.review__who svg{ width:11px; height:11px; flex:none; }
.review__reply p{ margin:0; font-size:.86rem; line-height:1.55; color:var(--bone-2); }

/* ============================================================
   REVIEWS — staggered columns with one lead quote, not a
   uniform six-card grid
   ============================================================ */
.reviews{ display:grid; gap:1.4rem; align-items:start; }
.reviews__col{ display:flex; flex-direction:column; gap:1.4rem; }
@media (min-width:860px){
  .reviews{ grid-template-columns:repeat(3,1fr); }
  .reviews__col:nth-child(2){ margin-top:3.4rem; }
  .reviews__col:nth-child(3){ margin-top:1.3rem; }
}

.review{
  position:relative;
  padding:1.65rem 1.6rem;
  border-radius:3px;
  background:linear-gradient(180deg,#100E0D 0%,#0B0A09 100%);
  box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.035),
             0 20px 44px -28px rgba(0,0,0,.95);
  display:flex; flex-direction:column; gap:.95rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px #4A3E30, inset 0 1px 0 rgba(255,255,255,.05),
             0 26px 52px -28px rgba(0,0,0,.95);
}
.review__stars{ color:var(--brass); font-size:.74rem; letter-spacing:.2em; line-height:1; }
.review__quote{
  font-family:var(--display); font-variation-settings:"SOFT" 14,"WONK" 1;
  font-size:1.02rem; line-height:1.45; letter-spacing:-.012em;
  color:var(--bone); margin:0;
}
.review__by{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.review__name{ font-size:.84rem; color:var(--bone-2); }
.review__when{
  font-family:var(--mono); font-size:.52rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); white-space:nowrap;
}

/* the lead quote carries the spectrum thread and sets the hierarchy */
.review--lead{ padding:2rem 1.8rem; }
.review--lead::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  border-radius:3px 3px 0 0;
  background:var(--spectrum); opacity:.9;
}
.review--lead .review__quote{ font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.35; }

/* ============================================================
   VISIT
   ============================================================ */
.visit{ display:grid; gap:clamp(2.2rem,5vw,3.5rem); }
@media (min-width:940px){
  .visit{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .visit__media, .visit__media .plate{ height:100%; }
  .visit__media .plate img{ height:100%; }
}
.visit__media .plate img{ filter:saturate(.85) contrast(1.06) brightness(.76); }
.visit__media .plate::after{
  background:
    linear-gradient(to top,rgba(10,9,8,.96) 0%,rgba(10,9,8,.55) 13%,transparent 36%),
    linear-gradient(to bottom,rgba(10,9,8,.85) 0%,rgba(10,9,8,.3) 18%,transparent 38%);
}

.panel{
  border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,#100E0D 0%,#0B0A09 100%);
  box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel__block{ padding:clamp(1.45rem,3vw,2rem); border-bottom:1px solid var(--line); }
.panel__block:last-child{ border-bottom:0; }
.panel__label{
  font-family:var(--mono); font-size:.55rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); margin:0 0 .7rem;
}
.panel__value{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:clamp(1.12rem,1rem + .65vw,1.45rem);
  line-height:1.28; letter-spacing:-.015em; margin:0;
}
.panel__value a{ text-decoration:none; transition:color .25s; }
.panel__value a:hover{ color:var(--brass-lit); }
.panel__sub{ font-size:.87rem; color:var(--bone-3); margin:.5rem 0 0; }
.panel__actions{ display:flex; gap:.7rem; flex-wrap:wrap; padding:clamp(1.45rem,3vw,2rem); }

.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.48rem; font-size:.89rem; border-bottom:1px solid var(--line);
}
.hours li:last-child{ border-bottom:0; }
.hours__d{
  font-family:var(--mono); font-size:.57rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3);
}
.hours__t{ font-variant-numeric:tabular-nums; color:var(--bone-2); }
.hours li.is-today .hours__d{ color:var(--brass); }
.hours li.is-today .hours__t{ color:var(--brass-lit); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); padding-block:clamp(2.6rem,5vw,3.6rem); }
.foot__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; margin-bottom:2.3rem; }
.foot__mark{
  font-family:var(--display); font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);
  line-height:1; letter-spacing:-.025em; margin:0 0 .6rem;
}
.foot__mark span{ color:var(--brass); }
.foot__links{ display:flex; gap:1.6rem; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.foot__links a{
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-3); text-decoration:none; transition:color .25s;
}
.foot__links a:hover{ color:var(--brass-lit); }

.warn{
  border-radius:3px; padding:1.1rem 1.3rem; margin-bottom:2rem;
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--mono); font-size:.61rem; font-weight:500;
  letter-spacing:.1em; line-height:1.9; color:var(--bone-2);
}
.warn b{ color:var(--bone); }

.foot__fine{
  font-family:var(--mono); font-size:.55rem; letter-spacing:.13em;
  text-transform:uppercase; color:#4E463C; line-height:2.1;
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.6rem;
}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

.hero .lift{ opacity:0; transform:translateY(18px); animation:lift .95s var(--ease) forwards; }
.hero .lift:nth-child(1){ animation-delay:.06s }
.hero .lift:nth-child(2){ animation-delay:.14s }
.hero .lift:nth-child(3){ animation-delay:.22s }
.hero .lift:nth-child(4){ animation-delay:.3s }
.hero .lift:nth-child(5){ animation-delay:.38s }
.hero__media.lift{ animation-delay:.3s }
@keyframes lift{ to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero .lift{ opacity:1; transform:none; }
  .sign.is-lit.is-striking{ animation:none; }
}