/* =================================================================
   1987 HOMETOWN MENSWEAR — bespoke stylesheet
   Heritage Americana · brick + neon + brass on aged bone paper.
   Hand-written; no framework, no build step.
   ================================================================= */

:root{
  /* palette */
  --bone:       #F1EBDE;
  --bone-2:     #EAE2D1;
  --bone-3:     #DCD0B8;
  --charcoal:   #181512;
  --charcoal-2: #221D18;
  --ink:        #211C17;
  --ink-soft:   #574C40;
  --brick:      #A8492A;
  --brick-2:    #8F3B22;
  --brass:      #C1964A;
  --brass-2:    #A87E37;
  --brass-deep: #8A6A2E;
  --neon:       #F18A4A;

  /* type */
  --display: "Big Shoulders Display","Arial Narrow",sans-serif;
  --slab: "Zilla Slab",Georgia,serif;
  --body: "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;

  --maxw: 1280px;
  --gutter: clamp(1.25rem,5vw,5rem);
  --radius: 3px;

  --shadow-sm: 0 2px 10px rgba(24,21,18,.12);
  --shadow-md: 0 22px 46px -20px rgba(24,21,18,.5);
  --shadow-lg: 0 50px 90px -34px rgba(20,17,14,.62);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  background:var(--bone);
  color:var(--ink);
  line-height:1.62; font-weight:400;
  overflow-x:hidden; position:relative;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1100px 560px at 82% -8%, rgba(193,150,74,.12), transparent 60%),
    radial-gradient(880px 520px at -12% 16%, rgba(168,73,42,.08), transparent 55%);
}

/* aged-paper grain over the whole page */
.paper{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.42'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion:no-preference){ .paper{ opacity:.4; } }

main, .marquee, .footer{ position:relative; z-index:2; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; }
::selection{ background:var(--brick); color:var(--bone); }

/* a11y */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:-60px; left:1rem; z-index:200; background:var(--charcoal); color:var(--bone); padding:.7rem 1.1rem; border-radius:var(--radius); transition:top .2s var(--ease); }
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:2.5px solid var(--brick); outline-offset:3px; border-radius:2px; }

/* ---- Shared type ------------------------------------------------ */
.h2{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,5.4vw,4.4rem); line-height:.9;
  letter-spacing:-.012em; text-transform:uppercase; color:var(--ink); }
.h2--xl{ font-size:clamp(2.6rem,7vw,6rem); }
.h2__brick{ color:var(--brick); }

.eyebrow{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:.84rem; color:var(--brick); display:inline-flex; align-items:center; gap:.7em; }
.eyebrow--light{ color:var(--brass); }
.idx{ font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  color:var(--brass-deep); background:rgba(193,150,74,.14); padding:.12em .5em; border-radius:2px; }
.idx--light{ color:var(--brass); background:rgba(193,150,74,.16); }
.tick{ width:30px; height:2px; background:currentColor; display:inline-block; }

.section-head{ max-width:var(--maxw); margin:0 auto clamp(2.4rem,5vw,3.8rem); padding:0 var(--gutter); }
.section-head__row{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.4rem; }
.section-head__rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--bone-3),transparent); }
.section-head__meta{ font-family:var(--slab); font-size:.86rem; color:var(--ink-soft); letter-spacing:.02em; white-space:nowrap; }
.section-head__link{ color:var(--brick); font-weight:600; transition:color .25s var(--ease); }
.section-head__link:hover{ color:var(--brick-2); }

/* ---- Buttons ---------------------------------------------------- */
.btn{ --bg:var(--brick); --fg:var(--bone);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.04rem; line-height:1; padding:1.02rem 1.7rem; border-radius:var(--radius);
  background:var(--bg); color:var(--fg); position:relative; isolation:isolate; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
  box-shadow:var(--shadow-sm); }
.btn::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px); }
.btn__icon{ width:1.05em; height:1.05em; fill:currentColor; }
.btn--brick{ --bg:var(--brick); } .btn--brick:hover{ background:var(--brick-2); }
.btn--brass{ --bg:var(--brass); --fg:var(--charcoal); } .btn--brass:hover{ background:var(--brass-2); color:var(--bone); }
.btn--charcoal{ --bg:var(--charcoal); --fg:var(--bone); } .btn--charcoal:hover{ background:#000; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.6px rgba(33,28,23,.32); }
.btn--ghost:hover{ background:var(--charcoal); color:var(--bone); box-shadow:inset 0 0 0 1.6px var(--charcoal),var(--shadow-md); }
.btn--outline{ --bg:transparent; --fg:var(--bone); box-shadow:inset 0 0 0 1.6px rgba(241,235,222,.5); }
.btn--outline:hover{ background:var(--bone); color:var(--charcoal); box-shadow:var(--shadow-md); }

/* ---- Crest badge ------------------------------------------------ */
.crest{ width:46px; height:46px; color:var(--brass); flex:none; }
.crest--lg{ width:122px; height:122px; }
.crest__ring{ fill:none; stroke:currentColor; }
.crest__ring--out{ stroke-width:2.4; opacity:.95; } .crest__ring--in{ stroke-width:1; opacity:.55; }
.crest__micro{ font-family:var(--display); font-weight:600; font-size:8.2px; letter-spacing:1.2px; fill:currentColor; }
.crest__year{ font-family:var(--display); font-weight:900; font-size:30px; fill:currentColor; letter-spacing:-.5px; }
.crest__est{ font-family:var(--display); font-weight:600; font-size:7px; letter-spacing:1.5px; fill:currentColor; opacity:.85; }
.crest__rule{ stroke:currentColor; stroke-width:1.2; opacity:.6; } .crest__star{ fill:currentColor; }

/* =================================================================
   1 · NAV
   ================================================================= */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease); }
.nav__inner{ max-width:var(--maxw); margin:0 auto; padding:1.05rem var(--gutter); display:flex; align-items:center; gap:1.5rem; }
.nav__brand{ display:inline-flex; align-items:center; gap:.7rem; margin-right:auto; }
.nav__brand .crest{ transition:transform .5s var(--ease); }
.nav__brand:hover .crest{ transform:rotate(-8deg); }
.nav__wordmark{ display:flex; flex-direction:column; line-height:.95; }
.nav__wordmark-top{ font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:.02em; color:var(--bone); text-transform:uppercase; transition:color .4s var(--ease); }
.nav__wordmark-sub{ font-family:var(--slab); font-weight:600; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.96rem; color:var(--bone); position:relative; padding:.3rem 0; display:inline-flex; align-items:baseline; gap:.45em; transition:color .3s var(--ease); }
.nav__idx{ font-size:.62rem; color:var(--brass); font-weight:700; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--brick); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{ padding:.72rem 1.15rem; font-size:.9rem; }

.nav.is-scrolled{ background:rgba(241,235,222,.9); backdrop-filter:saturate(1.2) blur(12px);
  box-shadow:0 1px 0 rgba(33,28,23,.1), 0 14px 30px -22px rgba(33,28,23,.5); }
.nav.is-scrolled .nav__wordmark-top{ color:var(--ink); }
.nav.is-scrolled .nav__links a{ color:var(--ink); }
.nav.is-scrolled .nav__brand .crest{ color:var(--brick); }
.nav.is-scrolled .nav__idx{ color:var(--brass-deep); }

.nav__toggle{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.nav__toggle span{ width:24px; height:2px; background:var(--bone); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav.is-scrolled .nav__toggle span{ background:var(--ink); }
.nav__toggle[aria-expanded="true"] span{ background:var(--bone); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{ display:flex; flex-direction:column; gap:.2rem; padding:1.4rem var(--gutter) 2rem; background:var(--charcoal); min-height:calc(100svh - 68px); }
.nav__mobile[hidden]{ display:none; }
.nav__mobile a:not(.btn){ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:1.7rem; color:var(--bone); padding:.85rem 0; border-bottom:1px solid rgba(241,235,222,.12); display:flex; align-items:baseline; gap:.6em; }
.nav__mobile a:not(.btn) span{ font-family:var(--display); font-size:.8rem; color:var(--brass); }
.nav__mobile .btn{ margin-top:.9rem; }

/* =================================================================
   2 · HERO
   ================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--gutter) clamp(3rem,7vw,5.5rem); overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,17,14,.55) 0%, rgba(20,17,14,.12) 28%, rgba(20,17,14,.3) 58%, rgba(20,17,14,.9) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 42%, rgba(20,17,14,.42) 100%); }
.grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.hero__rail{ position:absolute; left:clamp(.6rem,2.4vw,1.6rem); top:50%; transform:translateY(-50%) rotate(180deg); z-index:2;
  writing-mode:vertical-rl; display:flex; align-items:center; gap:1.2rem;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; color:rgba(241,235,222,.62); }
.hero__rail-line{ width:1px; height:64px; background:rgba(241,235,222,.4); }
@media (max-width:900px){ .hero__rail{ display:none; } }

.hero__content{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; }
.hero__eyebrow{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.92rem; color:var(--brass); display:inline-flex; align-items:center; gap:.7em; margin-bottom:1.3rem; }
.hero__eyebrow .tick{ width:34px; background:var(--brass); }
.hero__title{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.9rem,9vw,7.4rem); line-height:.86; letter-spacing:-.02em; color:var(--bone); margin-bottom:1.5rem; }
.hero__line{ display:block; overflow:hidden; }
.hero__line > span{ display:block; }
.hero__title em{ font-style:normal; color:var(--neon); text-shadow:0 0 24px rgba(241,138,74,.55), 0 0 64px rgba(241,138,74,.28); }
.hero__lede{ max-width:42ch; font-family:var(--slab); font-size:clamp(1.08rem,1.6vw,1.34rem); color:rgba(241,235,222,.9); margin-bottom:2.1rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:clamp(3rem,7vw,5.5rem); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:rgba(241,235,222,.8); }
.hero__scroll svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (max-width:680px){ .hero__scroll{ display:none; } }

@keyframes flicker{ 0%,18%,22%,25%,53%,57%,100%{ opacity:1; text-shadow:0 0 24px rgba(241,138,74,.55),0 0 64px rgba(241,138,74,.28); } 20%,24%,55%{ opacity:.55; text-shadow:none; } }
.js [data-neon].neon-on{ animation:flicker 2.6s 1 var(--ease); }

/* =================================================================
   3 · IN-STORE DIRECTORY (static heritage inventory band)
   ================================================================= */
.directory{ background:var(--charcoal); color:var(--bone); padding:clamp(1.8rem,4vw,2.8rem) var(--gutter);
  border-top:2px solid var(--brass-deep); border-bottom:2px solid var(--brass-deep);
  position:relative; }
.directory::before,.directory::after{ content:""; position:absolute; left:0; right:0; height:1px;
  background:rgba(193,150,74,.35); }
.directory::before{ top:5px; } .directory::after{ bottom:5px; }
.directory__inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.directory__eyebrow{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.32em;
  font-size:.78rem; color:var(--brass); display:flex; align-items:center; justify-content:center; gap:1em;
  margin-bottom:1.1rem; }
.directory__star{ font-size:.7rem; opacity:.9; }
.directory__list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.2rem 0; }
.directory__list li{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,2.15rem); letter-spacing:.02em; line-height:1.1; color:var(--bone);
  padding:0 clamp(.7rem,1.6vw,1.35rem); position:relative; transition:color .25s var(--ease); }
.directory__list li:not(:last-child)::after{ content:"✦"; position:absolute; right:-.35em; top:50%;
  transform:translateY(-50%); font-size:.5em; color:var(--brick); opacity:.95; }
.directory__list li:hover{ color:var(--brass); }
.directory__foot{ font-family:var(--slab); font-style:italic; font-size:.92rem; color:rgba(241,235,222,.6);
  margin-top:1.1rem; letter-spacing:.02em; }

/* =================================================================
   4 · ABOUT (dark "step inside")
   ================================================================= */
.about{ position:relative; isolation:isolate; background:
    radial-gradient(90% 130% at 18% 0%, rgba(168,73,42,.16), transparent 55%),
    linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color:var(--bone); padding:clamp(4.5rem,9vw,8rem) var(--gutter); overflow:hidden; }
.about .grain{ position:absolute; opacity:.3; }
.about__grid{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.about__media::before{ content:""; position:absolute; inset:16px -16px -16px 16px; z-index:-1; border:1.6px solid var(--brass); border-radius:var(--radius); opacity:.7; }
.stamp{ position:absolute; right:-18px; bottom:-26px; width:138px; height:138px; border-radius:50%; background:var(--brick); color:var(--bone); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:var(--shadow-md); transform:rotate(-8deg); border:2px solid var(--bone); }
.stamp svg{ position:absolute; inset:0; width:100%; height:100%; }
.stamp__arc{ font-family:var(--display); font-weight:600; font-size:8px; letter-spacing:1.4px; fill:var(--bone); opacity:.78; }
.stamp em{ font-family:var(--display); font-weight:900; font-style:normal; font-size:2rem; text-transform:uppercase; line-height:1; }
.stamp span{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.6rem; line-height:1.25; margin-top:.2rem; }

.about__copy .eyebrow{ color:var(--brass); margin-bottom:1.2rem; }
.about__copy .h2{ color:var(--bone); margin-bottom:1.3rem; }
.about__copy .h2__brick{ color:var(--neon); }
.about__copy p{ color:rgba(241,235,222,.82); font-size:1.08rem; margin-top:1.1rem; max-width:48ch; }
.pull{ font-family:var(--slab); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.34; color:var(--bone); margin:1.8rem 0; padding-left:1.3rem; border-left:3px solid var(--brick); max-width:34ch; }
.sign{ font-family:var(--slab); font-style:italic; color:var(--brass) !important; font-size:1.05rem !important; margin-top:1rem !important; }
.ledger{ display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin-top:2.2rem; padding-top:1.7rem; border-top:1px solid rgba(241,235,222,.16); }
.ledger li{ display:flex; flex-direction:column; }
.ledger strong{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.3rem; color:var(--brass); letter-spacing:.01em; }
.ledger span{ font-size:.9rem; color:rgba(241,235,222,.7); }

/* =================================================================
   5 · WHAT WE CARRY — editorial bento
   ================================================================= */
.carry{ padding:clamp(4rem,8vw,7rem) 0 clamp(4.5rem,9vw,8rem); }
.carry__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(150px,15vw,215px); gap:clamp(.7rem,1.2vw,1.1rem); }
.cat--a{ grid-column:1/7;  grid-row:1/3; } /* feature, tall */
.cat--b{ grid-column:7/10; grid-row:1/2; }
.cat--c{ grid-column:10/13;grid-row:1/2; }
.cat--d{ grid-column:7/13; grid-row:2/3; } /* wide */
.cat--e{ grid-column:1/7;  grid-row:3/4; }
.cat--f{ grid-column:7/13; grid-row:3/4; }

.cat{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--charcoal);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.cat__media{ position:absolute; inset:0; overflow:hidden; }
.cat__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); filter:saturate(.95) brightness(.94); }
.cat__label{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.5rem 1.4rem 1.3rem;
  background:linear-gradient(0deg, rgba(20,17,14,.92) 6%, rgba(20,17,14,.5) 52%, transparent); }
.cat__num{ font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.1em; color:var(--brass); display:block; margin-bottom:.3rem; }
.cat__label h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.95; letter-spacing:.01em; color:var(--bone); font-size:clamp(1.35rem,2.2vw,1.9rem); }
.cat--a .cat__label h3{ font-size:clamp(2rem,3.2vw,3rem); }
.cat__sub{ font-family:var(--slab); font-size:.92rem; color:var(--brass-lt,#d6b478); display:flex; align-items:center; gap:.5em; margin-top:.2rem; }
.cat__sub{ color:#d6b478; }
.cat__sub i{ font-style:normal; opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.cat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.cat:hover .cat__media img{ transform:scale(1.07); filter:saturate(1.05) brightness(1.02); }
.cat:hover .cat__sub i{ opacity:1; transform:translateX(0); }

@media (max-width:840px){
  .carry__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(220px,30vw); }
  .cat--a,.cat--b,.cat--c,.cat--d,.cat--e,.cat--f{ grid-column:auto; grid-row:auto; }
  .cat--a{ grid-column:1/3; }
  .cat--d{ grid-column:1/3; }
}
@media (max-width:460px){
  .carry__grid{ grid-template-columns:1fr; }
  .cat--a,.cat--d{ grid-column:auto; }
}

/* =================================================================
   6 · LOOKBOOK
   ================================================================= */
.look{ padding:clamp(4rem,8vw,7rem) 0 clamp(4.5rem,9vw,7rem); background:linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 100%); }
.look__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,14vw,210px); gap:clamp(.6rem,1.2vw,1rem); }
.look__cell{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--charcoal); box-shadow:var(--shadow-sm); }
.look__cell--tall{ grid-row:span 2; }
.look__cell img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); filter:saturate(.96); }
.look__cell figcaption{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:1rem 1.1rem; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:1.02rem; color:var(--bone); background:linear-gradient(0deg, rgba(20,17,14,.85), transparent 58%); opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.look__cell:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.look__cell:hover figcaption{ opacity:1; transform:translateY(0); }
.look__cta{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }
@media (max-width:720px){ .look__grid{ grid-template-columns:repeat(2,1fr); } .look__cell--tall{ grid-row:span 2; } }

/* =================================================================
   7 · GIFTING (dark)
   ================================================================= */
.gift{ position:relative; isolation:isolate; overflow:hidden; color:var(--bone); padding:clamp(4.5rem,10vw,8rem) var(--gutter); text-align:center;
  background: radial-gradient(80% 120% at 50% -10%, rgba(241,138,74,.2), transparent 55%), linear-gradient(180deg, var(--charcoal-2), var(--charcoal)); }
.gift .grain{ opacity:.34; }
.gift__inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.gift .eyebrow{ justify-content:center; margin-bottom:1.2rem; }
.gift__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2.8rem,8vw,6rem); line-height:.88; letter-spacing:-.01em; color:var(--bone); margin-bottom:1.3rem; }
.gift__brass{ color:var(--brass); }
.gift__lede{ font-family:var(--slab); font-size:1.2rem; color:rgba(241,235,222,.85); max-width:50ch; margin:0 auto 2.1rem; }
.gift__cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* =================================================================
   8 · VISIT
   ================================================================= */
.visit{ padding:clamp(4.5rem,9vw,8rem) var(--gutter); max-width:var(--maxw); margin:0 auto; }
.visit__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:stretch; }
.visit__info .h2{ margin:1.2rem 0 2rem; }
.visit__info .eyebrow{ display:inline-flex; }
.visit__block{ display:grid; gap:1.3rem; margin-bottom:2.1rem; }
.visit__block li{ display:flex; flex-direction:column; gap:.2rem; }
.visit__k{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--brass-2); }
.visit__v{ font-size:1.16rem; font-weight:500; color:var(--ink); transition:color .25s var(--ease); }
a.visit__v:hover{ color:var(--brick); }
.hours{ width:100%; border-collapse:collapse; margin-bottom:2.1rem; text-align:left; }
.hours caption{ text-align:left; margin-bottom:.6rem; }
.hours th,.hours td{ padding:.7rem 0; border-bottom:1px solid var(--bone-3); font-size:1.05rem; }
.hours th{ font-weight:600; } .hours td{ text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hours__closed{ color:var(--brick); font-weight:600; }
.visit__cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.visit__map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); min-height:440px; position:relative; border:1.6px solid var(--bone-3); }
.visit__map::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(193,150,74,.4); border-radius:var(--radius); }
.visit__map iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; filter:sepia(.2) saturate(1.05) contrast(.98); }

/* =================================================================
   9 · NEWSLETTER
   ================================================================= */
.news{ background:var(--brick); color:var(--bone); padding:clamp(3.5rem,7vw,6rem) var(--gutter); position:relative; overflow:hidden; }
.news::before{ content:"1987"; position:absolute; right:-2vw; top:50%; transform:translateY(-50%); font-family:var(--display); font-weight:900; font-size:26vw; line-height:1; color:rgba(241,235,222,.08); pointer-events:none; }
.news__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; position:relative; z-index:2; }
.news .eyebrow--light{ color:rgba(241,235,222,.8); }
.news .idx--light{ color:var(--bone); background:rgba(241,235,222,.18); }
.news__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,5vw,3.6rem); line-height:.92; color:var(--bone); margin:1rem 0 .8rem; }
.news__lede{ font-family:var(--slab); color:rgba(241,235,222,.88); max-width:46ch; }
.news__form{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.news__form input{ flex:1 1 240px; min-width:0; padding:1.05rem 1.2rem; border-radius:var(--radius); border:1.6px solid rgba(241,235,222,.42); background:rgba(241,235,222,.12); color:var(--bone); font-size:1.02rem; font-family:var(--body); transition:border .25s var(--ease), background .25s var(--ease); }
.news__form input::placeholder{ color:rgba(241,235,222,.62); }
.news__form input:focus{ outline:none; border-color:var(--bone); background:rgba(241,235,222,.2); }
.news__note{ flex-basis:100%; font-family:var(--slab); font-size:.96rem; min-height:1.2em; color:var(--bone); font-weight:600; }
.news__note.is-error{ color:#2c0c06; }

/* =================================================================
   10 · FOOTER
   ================================================================= */
.footer{ background:var(--charcoal); color:var(--bone); padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) 2rem; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3rem); padding-bottom:3rem; border-bottom:1px solid rgba(241,235,222,.14); }
.footer__brand .crest{ color:var(--brass); }
.footer__tag{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.4rem; line-height:1.05; margin-top:1.1rem; color:var(--bone); }
.footer__tag span{ color:var(--brass); }
.footer__col h3{ font-family:var(--slab); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--brass); margin-bottom:1.1rem; }
.footer__col address{ font-style:normal; line-height:1.9; color:rgba(241,235,222,.82); }
.footer__col a{ transition:color .25s var(--ease); }
.footer__col a:hover{ color:var(--brass); }
.footer__hours li,.footer__social li{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; color:rgba(241,235,222,.82); }
.footer__social li{ justify-content:flex-start; }
.footer__bottom{ max-width:var(--maxw); margin:1.6rem auto 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:.86rem; color:rgba(241,235,222,.55); }
.footer__credit a{ color:rgba(241,235,222,.75); text-decoration:underline; text-underline-offset:3px; transition:color .25s var(--ease); }
.footer__credit a:hover{ color:var(--brass); }

/* =================================================================
   MOTION — progressive reveals
   ================================================================= */
[data-reveal],[data-hero]{ opacity:1; }
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
.js [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-stagger] > *{ opacity:0; transform:translateY(26px) scale(.98); }
.js [data-stagger].is-in > *{ opacity:1; transform:none; }

/* Hero reveal — CSS-driven (class toggled by JS on load); reliable w/o GSAP */
.js .hero__eyebrow,.js .hero__lede,.js .hero__cta{ opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .hero__line > span{ transform:translateY(110%); transition:transform .95s var(--ease); }
.hero.is-revealed .hero__line > span{ transform:translateY(0); }
.hero.is-revealed .hero__line:nth-child(1) > span{ transition-delay:.16s; }
.hero.is-revealed .hero__line:nth-child(2) > span{ transition-delay:.28s; }
.hero.is-revealed .hero__line:nth-child(3) > span{ transition-delay:.40s; }
.hero.is-revealed .hero__eyebrow{ opacity:1; transform:none; transition-delay:.08s; }
.hero.is-revealed .hero__lede{ opacity:1; transform:none; transition-delay:.58s; }
.hero.is-revealed .hero__cta{ opacity:1; transform:none; transition-delay:.7s; }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger] > *,.js [data-hero]{ opacity:1 !important; transform:none !important; }
  .js .hero__line > span,.js .hero__eyebrow,.js .hero__lede,.js .hero__cta{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }
@media (max-width:880px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:460px; margin:0 auto 2.5rem; }
  .visit__grid{ grid-template-columns:1fr; }
  .news__inner{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  :root{ --gutter:1.25rem; }
  .hero__cta .btn,.gift__cta .btn{ flex:1 1 auto; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; }
  .section-head__meta{ display:none; }
}