/* =====================================================================
   DUKE'S TOBACCO - Somerset, KY
   Vintage-Americana design system
   ===================================================================== */

/* ------------------------------- Tokens ------------------------------ */
:root{
  /* Inks / surfaces (warm near-black) */
  --ink:      #14100c;
  --ink-1:    #191309;
  --ink-2:    #1e1710;
  --panel:    #241c12;
  --card:     #20180f;

  /* Brand */
  --red:        #a81d12;
  --red-deep:   #7d1512;
  --red-bright: #c8331d;
  --cream:      #f3e3be;
  --cream-2:    #e7d4a6;
  --gold:       #c9a24e;
  --gold-2:     #e3c173;

  /* Text */
  --text:      #ece1cd;
  --text-dim:  #b7a988;
  --text-mute: #8b7e64;

  /* Lines */
  --line:        rgba(201,162,78,.16);
  --line-strong: rgba(201,162,78,.34);

  /* Type. --f-slab carries the big headings: it's a wood-type slab, the register
     a hand-painted shop sign lives in. --f-display (condensed) handles small caps,
     nav and labels. --f-serif is the pull-quote voice. Playfair used to sit here,
     but a high-contrast Didone reads fashion-magazine, not tobacco barn. */
  --f-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --f-slab:    "Alfa Slab One", Rockwell, Georgia, serif;
  --f-serif:   "Bitter", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Shadows */
  --sh-1: 0 2px 10px rgba(0,0,0,.45);
  --sh-2: 0 20px 55px rgba(0,0,0,.55);
  --sh-card: 0 16px 40px rgba(0,0,0,.5);
  --glow: 0 0 44px rgba(227,193,115,.22);

  /* Layout */
  --wrap: 1200px;
  --radius: 6px;
  --pad: clamp(60px, 9vw, 120px);
}

/* ------------------------------- Reset ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
html.js:not(.age-ok){ overflow:hidden; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--text);
  background:var(--ink);
  line-height:1.65;
  font-size:clamp(15.5px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.05; font-weight:600; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:3px; }

/* Global film-grain + vignette atmosphere */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;
  mix-blend-mode:overlay;
}

/* ------------------------------ Helpers ------------------------------ */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.section{ padding-block:var(--pad); position:relative; }
.ic{ width:1em; height:1em; fill:currentColor; flex:none; }

.eyebrow{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:500;
  font-size:.78rem;
  color:var(--gold-2);
  margin:0 0 .9rem;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:"◆"; font-size:.6em; color:var(--gold); transform:translateY(-1px); }
.eyebrow--gold{ color:var(--gold-2); }

.sec-head{ max-width:680px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.sec-head .eyebrow{ justify-content:center; }
.sec-title{
  font-family:var(--f-slab);
  text-transform:uppercase;
  font-weight:400;              /* Alfa Slab One has ONE weight; 700 fakes a bold */
  letter-spacing:.005em;
  /* smaller than the old Oswald sizing: this face is far wider and heavier */
  font-size:clamp(1.75rem,4.2vw,2.9rem);
  line-height:1.04;
  color:var(--cream);
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.sec-lead{ color:var(--text-dim); font-size:1.06rem; margin-top:1rem; }

/* ------------------------------ Buttons ------------------------------ */
.btn{
  --by:.92em; --bx:1.5em;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--by) var(--bx);
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.86rem;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ --by:.62em; --bx:1.05em; font-size:.78rem; }

.btn--gold{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#2a1c07;
  box-shadow:0 8px 24px rgba(180,140,50,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover{ box-shadow:0 14px 32px rgba(200,160,70,.4), inset 0 1px 0 rgba(255,255,255,.5); }

.btn--red{
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  color:var(--cream);
  box-shadow:0 8px 22px rgba(120,20,15,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn--red:hover{ background:linear-gradient(180deg,var(--red-bright),var(--red)); }

.btn--outline{
  background:rgba(20,16,12,.35);
  color:var(--cream);
  border-color:var(--line-strong);
  backdrop-filter:blur(4px);
}
.btn--outline:hover{ border-color:var(--gold-2); color:var(--gold-2); background:rgba(20,16,12,.6); }

.btn--ghost{ background:transparent; color:var(--text-dim); border-color:var(--line); }
.btn--ghost:hover{ color:var(--cream); border-color:var(--line-strong); }

.link-gold{ color:var(--gold-2); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; font-weight:500; }
.link-gold:hover{ color:var(--cream); }
.link-plain{ color:var(--cream); border-bottom:1px solid var(--line-strong); }
.link-plain:hover{ color:var(--gold-2); }

/* ---------------------------- Announcement --------------------------- */
.topbar{
  background:var(--red-deep);
  color:var(--cream);
  font-family:var(--f-display);
  font-size:.8rem;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(0,0,0,.35);
}
.topbar__row{ display:flex; align-items:center; justify-content:center; gap:.85em; flex-wrap:wrap; padding:.5em 0; text-align:center; }
.topbar__item{ display:inline-flex; align-items:center; gap:.45em; }
.topbar__item .ic{ color:var(--gold-2); }
.topbar__phone:hover,.topbar__coffee:hover{ color:var(--gold-2); }
.topbar__sep{ opacity:.5; }
.topbar__hours .dot{ width:8px; height:8px; border-radius:50%; background:#57d06a; box-shadow:0 0 8px #57d06a; display:inline-block; }
@media (max-width:560px){ .topbar__sep{ display:none; } .topbar__row{ gap:.4em 1em; } }

/* ------------------------------- Header ------------------------------ */
.header{
  position:sticky; top:0; z-index:60;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.7rem 0; }
.header.is-scrolled{
  background:rgba(18,14,10,.9);
  backdrop-filter:blur(12px) saturate(120%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__word{ height:48px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); transition:transform .2s ease; }
.brand:hover .brand__word{ transform:scale(1.03); }

.nav{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav a{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.86rem;
  font-weight:500;
  color:var(--text-dim);
  position:relative;
  padding:.3em 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--red));
  transition:right .28s ease;
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ right:0; }

.header__cta{ display:flex; align-items:center; gap:.7rem; }

.nav-toggle{ display:none; width:44px; height:40px; border:1px solid var(--line-strong); border-radius:var(--radius); background:rgba(20,16,12,.4); position:relative; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:2px; background:var(--cream); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:25px; }
.is-nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.is-nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.is-nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:880px){
  .header__cta .btn{ display:none; }
  .nav-toggle{ display:block; margin-left:.4rem; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(16,12,8,.98);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:.5rem 0;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s;
    box-shadow:var(--sh-2);
  }
  .is-nav-open .nav{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav a{ padding:1rem 6vw; border-bottom:1px solid rgba(201,162,78,.08); font-size:1rem; }
  .nav a::after{ display:none; }
}

/* -------------------------------- Hero ------------------------------- */
.hero{
  position:relative;
  min-height:min(94vh,860px);
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(60px,10vh,120px) 0 90px;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center 42%;
  transform:none;
  /* Was brightness(.5), which crushed the shop into near-black. The scrim below
     now does the contrast work locally, under the text, instead of flattening
     the whole photo. The exterior shot is bright and can carry a lighter tone
     than the old interior interim did, so this sits at .9. */
  filter:brightness(.9) saturate(1.04) contrast(1.02);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    /* a pool of shade directly under the headline, so cream type stays readable */
    radial-gradient(78% 62% at 50% 52%, rgba(10,7,4,.58), rgba(10,7,4,.24) 55%, transparent 78%),
    /* corner vignette, keeps the eye centred */
    radial-gradient(130% 100% at 50% 18%, transparent 34%, rgba(12,9,6,.42) 80%, rgba(12,9,6,.72) 100%),
    /* dark under the sticky header; fades to --ink so the marquee butts up clean */
    linear-gradient(180deg, rgba(12,9,6,.5) 0%, rgba(12,9,6,.08) 28%, rgba(12,9,6,.3) 74%, var(--ink) 100%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
.hero__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero__eyebrow{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.32em;
  font-size:.82rem; color:var(--gold-2); margin:0 0 1.6rem;
  text-shadow:0 1px 3px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.6);
}
.hero__eyebrow span{ color:var(--cream); }
.hero__logo{ position:relative; width:min(720px,86vw); margin-bottom:.4rem; }
.hero__logo img{ width:100%; height:auto; filter:drop-shadow(0 12px 30px rgba(0,0,0,.6)); position:relative; z-index:1; }
.hero__glow{
  position:absolute; inset:-14% -8%; z-index:0;
  background:radial-gradient(ellipse at center, rgba(240,205,120,.42), rgba(220,150,60,.14) 45%, transparent 70%);
  filter:blur(26px);
  animation:flicker 6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity:.9; transform:scale(1); }
  45%{ opacity:1; transform:scale(1.03); }
  70%{ opacity:.82; }
}
/* Bitter, upright. 16ch was tuned to Playfair's narrow italic; Bitter is a much
   wider slab, so that cap forced the line to break mid-phrase. The <br> in the
   markup does the intended break. */
.hero__tag{
  font-family:var(--f-serif); font-style:normal; font-weight:500;
  font-size:clamp(1.4rem,3.1vw,2.2rem); color:var(--cream); line-height:1.28;
  margin:1.4rem 0 0; max-width:34ch;
  text-shadow:0 2px 4px rgba(0,0,0,.62), 0 6px 30px rgba(0,0,0,.7);
}
/* cream-2 rather than --text-dim: tan on a lit photo goes muddy */
.hero__sub{
  color:var(--cream-2); max-width:60ch; margin:1.2rem auto 0; font-size:1.05rem;
  text-shadow:0 1px 3px rgba(0,0,0,.72), 0 2px 18px rgba(0,0,0,.55);
}
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; }
.hero__badges{
  display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin-top:2.4rem;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--cream-2);
  text-shadow:0 1px 3px rgba(0,0,0,.75);
}
.hero__badges li{ display:flex; align-items:center; gap:1.4rem; }
.hero__badges li:not(:last-child)::after{ content:"◆"; color:var(--gold); font-size:.7em; }
.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:2;
  width:26px; height:42px; border:2px solid var(--line-strong); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{ width:4px; height:8px; border-radius:2px; background:var(--gold-2); animation:scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ opacity:0; transform:translateY(-4px);} 40%{opacity:1;} 80%,100%{ opacity:0; transform:translateY(10px);} }
@media (max-width:560px){ .hero__scroll{ display:none; } .hero__badges{ gap:.9rem; } .hero__badges li{ gap:.9rem; } }

/* ------------------------------ Marquee ------------------------------ */
.marquee{
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border-block:1px solid var(--line);
  padding:1.1rem 0; overflow:hidden; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink-1),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--ink-1),transparent); }
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee__group{ display:flex; align-items:center; }
.marquee__group span{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1.1rem,2vw,1.5rem); font-weight:500; color:var(--cream-2);
  padding:0 1.4rem; white-space:nowrap;
}
.marquee__group i{ color:var(--red-bright); font-style:normal; font-size:.7em; opacity:.9; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ------------------------------- Values ------------------------------ */
.values{ background:var(--ink); border-bottom:1px solid var(--line); }
.values__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.value{
  background:linear-gradient(180deg,var(--ink-2),var(--card));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.6rem;
  box-shadow:var(--sh-1);
  position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.value::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--red),var(--gold)); opacity:.7; }
.value:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.value__ic{
  display:grid; place-items:center; width:54px; height:54px; margin-bottom:1.1rem;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(227,193,115,.22), rgba(168,29,18,.12));
  border:1px solid var(--line-strong);
}
.value__ic svg{ width:26px; height:26px; fill:var(--gold-2); }
.value h3{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.16rem; color:var(--cream); margin-bottom:.5rem; }
.value p{ color:var(--text-dim); font-size:.96rem; margin:0; }

/* ---------------------------- Categories ----------------------------- */
.carry{ background:linear-gradient(180deg,var(--ink),var(--ink-1)); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--sh-card);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 26px 54px rgba(0,0,0,.6); }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,11,7,.6)); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media img{ transform:scale(1.08); }
.card__body{ padding:1.4rem 1.5rem 1.6rem; }
.card__body h3{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.3rem; color:var(--cream); margin-bottom:.5rem; }
.card__body p{ color:var(--text-dim); font-size:.96rem; margin:0 0 .8rem; }
.card__brands{ font-family:var(--f-display); font-size:.82rem !important; letter-spacing:.03em; color:var(--gold-2) !important; text-transform:uppercase; margin:0 !important; padding-top:.7rem; border-top:1px solid var(--line); }
.carry__foot{ text-align:center; color:var(--text-mute); font-style:italic; font-family:var(--f-serif); font-size:1.1rem; margin-top:2.6rem; }

/* ------------------------------ Humidor ------------------------------ */
.humidor{ position:relative; overflow:hidden; isolation:isolate; }
.humidor__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transform:scale(1.05); filter:brightness(.42) saturate(.95); }
.humidor__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(12,9,6,.94) 0%, rgba(12,9,6,.8) 42%, rgba(12,9,6,.45) 100%); }
.humidor__inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.humidor__title{ font-family:var(--f-slab); font-weight:400; text-transform:uppercase; font-size:clamp(2rem,4.8vw,3.1rem); color:var(--cream); margin:.2rem 0 1.1rem; letter-spacing:.005em; line-height:1.04; }
.humidor__copy p{ color:var(--text-dim); }
/* Needs the extra class to outrank `.humidor__copy p` (0,1,1) above. */
.humidor__copy p.humidor__lead{ font-size:1.16rem; color:var(--cream); }
.humidor__brands{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 2rem; }
.humidor__brands li{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  color:var(--cream-2); padding:.5em 1em; border:1px solid var(--line-strong); border-radius:40px;
  background:rgba(20,16,12,.5);
}
.humidor__gallery{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:1rem; }
.humidor__gallery img{ width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--line-strong); box-shadow:var(--sh-2); }
.humidor__gallery img:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }
.humidor__gallery img:nth-child(2),
.humidor__gallery img:nth-child(3){ aspect-ratio:1/1; }

/* -------------------------------- Stats ------------------------------ */
.stats{ background:var(--red-deep); border-block:1px solid rgba(0,0,0,.4); position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.06; mix-blend-mode:overlay; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:3.2rem; position:relative; }
.stat{ text-align:center; color:var(--cream); position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:15%; bottom:15%; width:1px; background:rgba(243,227,190,.2); }
.stat__num{ display:block; font-family:var(--f-slab); font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; color:var(--gold-2); text-shadow:0 3px 0 rgba(0,0,0,.25); }
.stat__label{ display:block; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; margin-top:.6rem; color:var(--cream-2); }
@media (max-width:640px){ .stat:nth-child(2)::after{ display:none; } }

/* ------------------------------ Gallery ------------------------------ */
.gallery{ background:linear-gradient(180deg,var(--ink-1),var(--ink)); }
.grid-gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; grid-auto-flow:dense; }
.gitem{
  position:relative; overflow:hidden; border-radius:8px; padding:0; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--sh-1);
}
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; filter:saturate(.96) brightness(.94); }
.gitem::after{
  content:"⤢"; position:absolute; right:10px; bottom:8px; width:32px; height:32px; display:grid; place-items:center;
  color:var(--cream); background:rgba(15,11,7,.6); border:1px solid var(--line-strong); border-radius:50%;
  opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s; font-size:1rem;
}
.gitem:hover img{ transform:scale(1.08); filter:saturate(1.05) brightness(1); }
.gitem:hover::after{ opacity:1; transform:scale(1); }
.gitem--tall{ grid-row:span 2; }
.gitem--wide{ grid-column:span 2; }
@media (max-width:1000px){ .grid-gallery{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; } }
@media (max-width:680px){ .grid-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; } .gitem--wide{ grid-column:span 2; } }
@media (max-width:420px){ .grid-gallery{ grid-auto-rows:130px; } }

/* ------------------------------- Visit ------------------------------- */
.visit{ background:var(--ink); }
.visit__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:stretch; }
.visit__info .sec-title{ text-align:left; }
.visit__info .sec-lead{ margin-bottom:2rem; }
.info-list{ display:flex; flex-direction:column; gap:1.6rem; }
.info-list li{ display:flex; gap:1.1rem; }
.info-list__ic{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, rgba(227,193,115,.2), rgba(168,29,18,.12)); border:1px solid var(--line-strong); }
.info-list__ic svg{ width:22px; height:22px; fill:var(--gold-2); }
.info-list h3{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em; font-size:1rem; color:var(--cream); margin-bottom:.3rem; }
.info-list p{ margin:0 0 .35rem; color:var(--text); }
.muted-note{ font-size:.86rem; color:var(--text-mute); }
.hours{ border-collapse:collapse; margin:.2rem 0 .4rem; }
.hours th, .hours td{ text-align:left; padding:.22rem 0; font-weight:400; }
.hours th{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:var(--text-dim); padding-right:1.6rem; }
.hours td{ color:var(--cream); font-variant-numeric:tabular-nums; }
.visit__pay{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.visit__pay span{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--text-dim); border:1px solid var(--line); border-radius:4px; padding:.4em .8em; }
.visit__map{ border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--sh-2); min-height:420px; position:relative; background:var(--ink-2); }
.visit__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05); }

/* ------------------------------- About ------------------------------- */
.about{ position:relative; overflow:hidden; isolation:isolate; }
.about__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:brightness(.35) saturate(.85); transform:scale(1.05); }
.about__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,9,6,.95), rgba(12,9,6,.7)); }
.about__inner{ display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); max-width:960px; }
.about__mark{ width:clamp(90px,12vw,150px); height:auto; flex:none; filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
/* the only title long enough to wrap; heavy slab needs air between the lines */
.about__copy .sec-title{ text-align:left; margin-bottom:1rem; line-height:1.12; }
.about__copy p{ color:var(--text-dim); }
.about__sign{ font-family:var(--f-serif); font-style:italic; color:var(--gold-2); margin-top:1.2rem; }
@media (max-width:640px){ .about__mark{ display:none; } }

/* -------------------------------- CTA -------------------------------- */
.cta{ background:linear-gradient(180deg,var(--ink),var(--ink-2)); border-top:1px solid var(--line); }
.cta__inner{ text-align:center; padding-block:clamp(50px,7vw,90px); }
.cta h2{ font-family:var(--f-slab); text-transform:uppercase; font-weight:400; font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.06; color:var(--cream); }
.cta p{ color:var(--text-dim); font-size:1.1rem; margin-top:.6rem; }
.cta__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

/* ------------------------------- Footer ------------------------------ */
.footer{ background:#0f0b07; border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.4rem; padding-block:clamp(46px,6vw,72px); }
.footer__brand img{ height:56px; width:auto; margin-bottom:1rem; filter:drop-shadow(0 3px 12px rgba(0,0,0,.6)); }
.footer__brand p{ color:var(--text-mute); font-size:.95rem; max-width:38ch; }
.chip-21{ display:inline-block; margin-top:.6rem; font-family:var(--f-display); font-weight:600; letter-spacing:.12em; font-size:.78rem; color:var(--cream); background:var(--red-deep); border:1px solid var(--red); border-radius:4px; padding:.35em .8em; }
.footer__col h4{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:.86rem; color:var(--gold-2); margin-bottom:1rem; }
.footer__col a{ display:block; color:var(--text-dim); padding:.32rem 0; font-size:.94rem; transition:color .2s; }
.footer__col a:hover{ color:var(--cream); }
.footer__contact p{ color:var(--text-dim); margin:0 0 .5rem; font-size:.94rem; }
.footer__contact a{ color:var(--cream); }
.footer__contact a:hover{ color:var(--gold-2); }
.footer__hours{ font-size:.85rem !important; color:var(--text-mute) !important; }
.footer__warn{ border-top:1px solid var(--line); background:rgba(168,29,18,.08); }
.footer__warn p{ margin:0; padding:1.1rem 0; font-size:.82rem; color:var(--text-dim); text-align:center; letter-spacing:.02em; }
.footer__warn strong{ color:var(--cream); font-family:var(--f-display); letter-spacing:.08em; }
.footer__legal{ border-top:1px solid var(--line); }
.footer__legal-row{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.2rem 0; font-size:.82rem; color:var(--text-mute); }
.footer__legal-row p{ margin:0; }

/* ------------------------------ Age gate ----------------------------- */
.age-gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:6vw 6vw;
  background:radial-gradient(120% 100% at 50% 0%, rgba(30,22,14,.9), rgba(10,7,4,.98));
  backdrop-filter:blur(10px);
  text-align:center;
}
html.age-ok .age-gate{ display:none; }
.age-gate__inner{ max-width:520px; animation:gaterise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gaterise{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.age-gate__logo{ width:min(360px,74vw); height:auto; margin:0 auto 1.8rem; filter:drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
.age-gate__eyebrow{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.3em; font-size:.78rem; color:var(--gold-2); margin:0 0 .8rem; }
.age-gate__title{ font-family:var(--f-display); text-transform:uppercase; font-weight:700; font-size:clamp(1.8rem,5vw,2.6rem); color:var(--cream); }
.age-gate__desc{ color:var(--text-dim); margin:1rem auto 1.8rem; max-width:42ch; }
.age-gate__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.age-gate__actions .btn{ min-width:150px; }
.age-gate__fine{ margin-top:1.6rem; font-size:.78rem; color:var(--text-mute); }
.age-gate__denied{ max-width:420px; }
.age-gate__denied h2{ font-family:var(--f-display); text-transform:uppercase; color:var(--red-bright); font-size:2rem; margin-bottom:.6rem; }
.age-gate__denied p{ color:var(--text-dim); }

/* ------------------------------ Lightbox ----------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:210;
  display:grid; place-items:center; padding:4vw;
  background:rgba(8,5,3,.94); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox__fig{ margin:0; max-width:90vw; max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.lightbox__fig img{ max-width:90vw; max-height:78vh; width:auto; height:auto; border-radius:8px; border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,.7); background:var(--ink); }
.lightbox__fig figcaption{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; color:var(--cream-2); }
.lightbox__close{ position:absolute; top:18px; right:22px; width:48px; height:48px; font-size:2rem; line-height:1; color:var(--cream); background:rgba(20,16,12,.6); border:1px solid var(--line-strong); border-radius:50%; }
.lightbox__close:hover{ color:var(--gold-2); border-color:var(--gold-2); }
.lightbox__nav{ position:absolute; top:50%; translate:0 -50%; width:52px; height:52px; font-size:2rem; color:var(--cream); background:rgba(20,16,12,.55); border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; }
.lightbox__nav:hover{ color:var(--gold-2); border-color:var(--gold-2); }
.lightbox__prev{ left:18px; }
.lightbox__next{ right:18px; }
@media (max-width:560px){ .lightbox__nav{ width:42px; height:42px; top:auto; bottom:20px; translate:0 0; } .lightbox__prev{ left:22%; } .lightbox__next{ right:22%; } }

/* ------------------------------ Reveal ------------------------------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* --------------------------- Responsive ------------------------------ */
@media (max-width:1000px){
  .values__grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .stat:nth-child(2)::after{ display:none; }
  .humidor__inner{ grid-template-columns:1fr; }
  .humidor__gallery{ max-width:520px; }
  .visit__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .values__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .about__inner{ flex-direction:column; text-align:center; }
  .about__copy .sec-title{ text-align:center; }
  .footer__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .footer__legal-row{ justify-content:center; text-align:center; }
}

/* --------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  .hero__bg{ transform:none; }
}

/* No-JS: don't block the page behind the age gate */