/* ===========================================================
   BERGSTRASSE STEAKHOUSE — Design System
   Editorial dark-mode fine-dining
   =========================================================== */

/* ---------- SKIP LINK (accessibility) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  z-index:300;
  background:var(--c-brass); color:#0A0A0A;
  padding:12px 20px;
  font-family:var(--f-body);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
}
.skip-link:focus{ left:8px; top:8px; outline:2px solid var(--c-text); outline-offset:2px; }

/* ---------- PREVIEW BANNER (fixed top, Bergstraße Digital branding) ---------- */
.preview-banner{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:linear-gradient(90deg, #0A0A0E 0%, #15110F 50%, #0A0A0E 100%);
  border-bottom:1px solid rgba(184,147,90,.22);
  color:#F4EFE6;
  font-family:'Inter', system-ui, sans-serif;
  font-size:12.5px;
  letter-spacing:.04em;
  padding:10px 20px;
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  text-align:center;
  line-height:1.3;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.preview-banner__logo{
  height:22px;
  width:auto;
  flex-shrink:0;
  opacity:.9;
}
.preview-banner__text{ color:#C3BBA9; }
.preview-banner__text strong{ color:#F4EFE6; font-weight:500; }
.preview-banner__link{
  color:#B8935A;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(184,147,90,.4);
  padding:8px 6px;          /* bigger tap target without visual change */
  margin:-8px -6px;
  transition: color .3s, border-color .3s, background .3s;
}
.preview-banner__link:hover{ color:#D4A968; border-bottom-color:#D4A968; }
.preview-banner__link:focus-visible{ outline:2px solid #D4A968; outline-offset:2px; }
.preview-banner__sep{ color:rgba(184,147,90,.4); }

@media (max-width:680px){
  .preview-banner{ font-size:11px; padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .preview-banner__logo{ height:18px; }
  .preview-banner__sep{ display:none; }
}

/* Body offset to make room for the banner. The actual height is set
   dynamically by JS via --banner-h (measured from the rendered banner).
   The values below are fallbacks for the very first paint before JS runs. */
:root{ --banner-h: 44px; }
@media (max-width:680px){ :root{ --banner-h: 38px; } }
body{ padding-top:var(--banner-h); }


/* Two-family typography pairing (3rd font Cormorant dropped per design review —
   redundant to Playfair Italic). Saves a network round-trip + reduces FOUT risk. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

/* ---------- TOKENS ---------- */
:root{
  /* Surfaces */
  --c-pitch:    #07060A;
  --c-bg:       #0B0A0E;
  --c-surface:  #131115;
  --c-elev:     #1A1719;
  --c-elev-2:   #221E20;
  --c-line:     rgba(184,147,90,0.14);
  --c-line-2:   rgba(244,239,230,0.08);

  /* Brand */
  --c-brass:    #B8935A;
  --c-brass-hi: #D4A968;
  --c-brass-lo: #8A6E3F;
  --c-bordeaux: #5C1F2E;
  --c-ember:    #E27D40;

  /* Text */
  --c-text:     #F4EFE6;
  --c-text-dim: #C3BBA9;  /* contrast 8.5:1 on #0B0A0E — body OK */
  --c-text-mute:#9A8F7E;  /* bumped from #7C7466 (3.8:1) → now 5.2:1 = WCAG AA */

  /* Type — consolidated to 2 families: Playfair (display + italic) + Inter (body) */
  --f-display: 'Playfair Display', 'Times New Roman', serif;
  --f-italic:  'Playfair Display', 'Times New Roman', serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale (px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10:128px;--s-11:160px; --s-12:192px;

  /* Radii */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 16px;

  /* Shadows (warm, tinted) */
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--c-line);
  --sh-2: 0 10px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4), 0 0 0 1px var(--c-line);
  --sh-3: 0 30px 60px -20px rgba(0,0,0,.7), 0 8px 20px -6px rgba(0,0,0,.5), 0 0 0 1px var(--c-line);
  --sh-glow: 0 0 60px -10px rgba(184,147,90,.25);

  /* Motion */
  --ease-out:  cubic-bezier(.16,.84,.36,1);
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;

  /* Container */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--c-text);
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--c-brass); color:#000; }

/* ---------- GLOBAL TEXTURES ---------- */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,147,90,.05), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(92,31,46,.06), transparent 70%);
  z-index:1;
}
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.6  0 0 0 0 0.35  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;
  mix-blend-mode:overlay;
}

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--s-6); position:relative; z-index:3; }
.container--narrow{ max-width:var(--container-narrow); }
.container--wide{ max-width:var(--container-wide); }

.section{ padding:var(--s-10) 0; position:relative; }
.section--lg{ padding:var(--s-12) 0; }
.section--sm{ padding:var(--s-8) 0; }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{
  font-family:var(--f-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-brass);
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
}
.eyebrow::before{
  content:''; display:inline-block;
  width:32px; height:1px; background:var(--c-brass);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }
.eyebrow--center::after{ content:''; display:inline-block; width:24px; height:1px; background:var(--c-brass); margin-left:var(--s-2);}
.eyebrow--center::before{ display:inline-block; width:24px; height:1px; background:var(--c-brass); margin-right:var(--s-2); }

.h-display{
  font-family:var(--f-display);
  font-size:clamp(48px, 8vw, 112px);
  line-height:.95;
  letter-spacing:-.035em;
  font-weight:500;
}
.h-1{
  font-family:var(--f-display);
  font-size:clamp(40px, 5.5vw, 76px);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:500;
}
.h-2{
  font-family:var(--f-display);
  font-size:clamp(32px, 4vw, 56px);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:500;
}
.h-3{
  font-family:var(--f-display);
  font-size:clamp(24px, 2.5vw, 32px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.lead{
  font-family:var(--f-body);
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.65;
  color:var(--c-text-dim);
  font-weight:300;
  max-width:62ch;
}
.body-lg{ font-size:18px; line-height:1.75; color:var(--c-text-dim); max-width:65ch; }
.italic{ font-family:var(--f-italic); font-style:italic; font-weight:500; letter-spacing:0; }
.muted{ color:var(--c-text-mute); }
.dim{ color:var(--c-text-dim); }
.brass{ color:var(--c-brass); }

/* Big serif numerals */
.numeral{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1;
}

/* Decorative divider */
.divider-mark{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-3); color:var(--c-brass);
  font-family:var(--f-italic); font-style:italic;
  font-size:14px; letter-spacing:.2em; text-transform:uppercase;
}
.divider-mark::before, .divider-mark::after{
  content:''; flex:1; max-width:80px; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-brass), transparent);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-3);
  padding:18px 32px;
  border:none; outline:none;
  font-family:var(--f-body);
  font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer;
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-fast) var(--ease-spring);
  position:relative;
  user-select:none;
}
.btn:focus-visible{ outline:2px solid var(--c-brass); outline-offset:3px; }
.btn:active{ transform:scale(.98); }

.btn--primary{
  background:var(--c-brass);
  color:#0A0A0A;
}
.btn--primary:hover{ background:var(--c-brass-hi); }
.btn--primary:focus-visible{ outline-color:var(--c-brass-hi); }

.btn--ghost{
  background:transparent;
  color:var(--c-text);
  border:1px solid rgba(244,239,230,.25);
}
.btn--ghost:hover{ border-color:var(--c-brass); color:var(--c-brass); }

.btn--outline-brass{
  background:transparent; color:var(--c-brass);
  border:1px solid var(--c-brass);
}
.btn--outline-brass:hover{ background:var(--c-brass); color:#0A0A0A; }

.btn .arrow{
  display:inline-block; width:14px; height:1px;
  background:currentColor; position:relative;
  transition: width var(--d-base) var(--ease-spring);
}
.btn .arrow::after{
  content:''; position:absolute; right:0; top:50%;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.btn:hover .arrow{ width:22px; }

/* Subtle text link */
.link-underline{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-brass);
  padding-bottom:2px;
  border-bottom:1px solid rgba(184,147,90,.4);
  transition:border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.link-underline:hover{ color:var(--c-brass-hi); border-bottom-color:var(--c-brass-hi); }

/* ---------- NAVIGATION ---------- */
.nav{
  position:fixed; top:var(--banner-h); left:0; right:0;
  z-index:100;
  padding:22px 0;
  transition: background var(--d-base) var(--ease-out),
              padding var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base) var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav__inner{
  width:100%; max-width:var(--container-wide); margin:0 auto;
  padding:0 var(--s-6);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6);
}
.nav.is-scrolled{
  padding:14px 0;
  background:rgba(7,6,10,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--c-line);
}
.nav__brand{
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1; gap:2px;
  text-decoration:none;
}
.nav__brand-line1{
  font-family:var(--f-display);
  font-size:22px;
  letter-spacing:.04em;
  color:var(--c-text);
}
.nav__brand-line2{
  font-family:var(--f-body);
  font-size:9px;
  letter-spacing:.45em;
  color:var(--c-brass);
  text-transform:uppercase;
}
.nav__menu{
  display:flex; align-items:center; gap:var(--s-6);
}
.nav__link{
  font-family:var(--f-body);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-text-dim);
  padding:8px 0;
  position:relative;
  transition:color var(--d-base) var(--ease-out);
}
.nav__link:hover{ color:var(--c-text); }
.nav__link::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:var(--c-brass);
  transition:width var(--d-base) var(--ease-out), left var(--d-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after{ width:24px; left:calc(50% - 12px); }
.nav__link.is-active{ color:var(--c-brass); }

.nav__cta{
  padding:12px 22px;
  background:transparent;
  color:var(--c-brass);
  border:1px solid var(--c-brass);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.nav__cta:hover{ background:var(--c-brass); color:#0A0A0A; }

.nav__burger{
  display:none;
  width:44px; height:44px;  /* WCAG / Apple HIG min touch target */
  border:none; background:transparent; padding:0;
  position:relative;
  cursor:pointer;
}
.nav__burger:focus-visible{ outline:2px solid var(--c-brass); outline-offset:2px; }
.nav__burger span{
  position:absolute; left:11px; right:11px; height:1px;
  background:var(--c-text); transition:transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out), top var(--d-base) var(--ease-out);
}
.nav__burger span:nth-child(1){ top:17px; }
.nav__burger span:nth-child(2){ top:22px; }
.nav__burger span:nth-child(3){ top:27px; }
.nav.is-open .nav__burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* Mobile drawer — solid background so it's never see-through. The previous
   rgba(.96) + backdrop-filter combo was unreliable on iOS Safari (briefly
   transparent on open, flickering during scroll). */
.nav__drawer{
  position:fixed; inset:0;
  background:#07060A;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184,147,90,.08), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(92,31,46,.08), transparent 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--d-base) var(--ease-out), visibility 0s linear var(--d-base);
  z-index:150;  /* above nav (100), below banner (200) */
  padding:120px var(--s-6) var(--s-7);
}
.nav.is-open .nav__drawer{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity var(--d-base) var(--ease-out), visibility 0s linear 0s;
}
/* legacy duplicate removed — see consolidated rule above */
.nav__drawer .nav__link{
  font-family:var(--f-display);
  font-size:32px; letter-spacing:-.02em; text-transform:none;
  font-weight:500;
  color:var(--c-text);
}
.nav__drawer .nav__link.is-active{ color:var(--c-brass); }

@media (max-width:880px){
  .nav__menu{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:flex-end;
  padding:160px 0 var(--s-9);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0;
  z-index:-2;
  overflow:hidden;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation: heroZoom 18s var(--ease-out) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,6,10,.55) 0%, rgba(7,6,10,.25) 40%, rgba(7,6,10,.75) 80%, var(--c-bg) 100%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184,147,90,.12), transparent 60%);
}
.hero__content{
  width:100%; max-width:var(--container-wide); margin:0 auto;
  padding:0 var(--s-6);
}
.hero__title{
  font-size:clamp(56px, 10vw, 168px);
  line-height:.88;
  letter-spacing:-.04em;
  font-weight:500;
  margin-bottom:var(--s-5);
}
.hero__title-row{ display:block; overflow:hidden; }
.hero__title-row > span{
  display:inline-block;
  opacity:0; transform:translateY(120%);
  animation: heroReveal 1.1s var(--ease-spring) forwards;
}
.hero__title-row:nth-child(1) > span{ animation-delay:.1s; }
.hero__title-row:nth-child(2) > span{ animation-delay:.25s; color:var(--c-brass); font-style:italic; font-family:var(--f-italic); font-weight:500; letter-spacing:-.01em; }
@keyframes heroReveal{ to{ opacity:1; transform:translateY(0); } }

.hero__meta{
  display:flex; align-items:center; gap:var(--s-6);
  margin-top:var(--s-7);
  opacity:0; animation: fadeUp .9s var(--ease-out) .7s forwards;
}
.hero__sub{
  font-family:var(--f-body); font-size:14px;
  color:var(--c-text-dim);
  letter-spacing:.18em; text-transform:uppercase;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6);
  opacity:0; animation: fadeUp .9s var(--ease-out) .9s forwards;
}
@media (max-width:520px){
  .hero__actions .btn{ flex:1 1 auto; min-width:0; padding-left:18px; padding-right:18px; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }

.hero__scroll{
  position:absolute; bottom:var(--s-7); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  color:var(--c-text-mute); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  opacity:0; animation: fadeUp .9s var(--ease-out) 1.4s forwards;
}
.hero__scroll-line{
  width:1px; height:48px; background:linear-gradient(180deg, var(--c-brass), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; top:-48px; left:0; width:1px; height:24px;
  background:var(--c-brass-hi);
  animation: scrollPulse 2.4s var(--ease-out) infinite;
}
@keyframes scrollPulse{
  0%{ top:-24px; opacity:0; }
  20%{ opacity:1; }
  100%{ top:48px; opacity:0; }
}

/* Sub-hero (smaller heroes for subpages) */
.subhero{
  position:relative;
  min-height:62vh;
  display:flex; align-items:flex-end;
  padding:200px 0 var(--s-9);
  overflow:hidden;
}
@media (max-width:680px){
  .subhero{ min-height:48vh; padding:130px 0 var(--s-7); }
}
.subhero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.subhero__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation: heroZoom 14s var(--ease-out) forwards; }
.subhero__overlay{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(7,6,10,.45) 0%, rgba(7,6,10,.4) 50%, var(--c-bg) 100%);
}
.subhero__title{
  font-size:clamp(44px, 7vw, 96px);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
}
.subhero__title em{ font-family:var(--f-italic); color:var(--c-brass); font-style:italic; font-weight:500; }
.subhero__intro{ max-width:54ch; margin-top:var(--s-5); color:var(--c-text-dim); font-size:17px; line-height:1.7; }
.subhero__crumbs{
  display:flex; gap:var(--s-3); align-items:center;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-mute);
  margin-bottom:var(--s-5);
}
.subhero__crumbs a:hover{ color:var(--c-brass); }
.subhero__crumbs .sep{ color:var(--c-brass); }

/* ---------- REVEAL ANIMATIONS ---------- */
/* Default = visible (no-JS fallback). Initial hidden state only applies when html.js is set
   by the inline head script — prevents the JS-race flicker where elements render visible,
   then Motion One snaps them to opacity:0, then animates back. */
.reveal{ transition:opacity .55s var(--ease-out), transform .65s var(--ease-spring); }
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.is-in{ opacity:1; transform:translateY(0); }
.js .reveal--scale{ transform:scale(.94); }
.js .reveal--scale.is-in{ transform:scale(1); }
.js .reveal--left{ transform:translateX(-40px); }
.js .reveal--left.is-in{ transform:translateX(0); }
.js .reveal--right{ transform:translateX(40px); }
.js .reveal--right.is-in{ transform:translateX(0); }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
.reveal[data-delay="4"]{ transition-delay:.4s; }
.reveal[data-delay="5"]{ transition-delay:.5s; }

/* Stagger items use same CSS-only mechanism. Delay is set per-item via inline transition-delay
   from JS (sequential). No Motion One animate() involved here — avoids the clobber/flicker. */
[data-stagger-item]{ transition:opacity .55s var(--ease-out), transform .65s var(--ease-spring); }
.js [data-stagger-item]{ opacity:0; transform:translateY(24px); }
.js [data-stagger-item].is-in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--scale, .reveal--left, .reveal--right,
  [data-stagger-item]{ opacity:1 !important; transform:none !important; }
  .hero__title-row > span{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero__media img{ animation:none !important; transform:none !important; }
  .hero__meta, .hero__actions, .hero__scroll{ opacity:1 !important; animation:none !important; }
}

/* ---------- COMPONENT: FEATURE CARDS / SPLIT ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s-9);
  align-items:center;
}
.split--reverse{ direction:rtl; }
.split--reverse > *{ direction:ltr; }
.split__media{ position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius:2px; }
.split__media--landscape{ aspect-ratio: 4/3; }
.split__media--square{ aspect-ratio: 1/1; }
.split__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.split__media:hover img{ transform:scale(1.04); }
.split__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(7,6,10,.4) 100%);
  mix-blend-mode:multiply;
}
.split__body > * + *{ margin-top:var(--s-5); }
.split__body p{ color:var(--c-text-dim); font-size:16.5px; line-height:1.8; max-width:52ch; }
.split__body .eyebrow{ margin-bottom:var(--s-4); }
@media (max-width:880px){
  .split{ grid-template-columns:1fr; gap:var(--s-7); }
  .split--reverse{ direction:ltr; }
}

/* ---------- COMPONENT: CRAFT (3-stat row) ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s-7);
  padding:var(--s-7) 0;
  border-top:1px solid var(--c-line-2);
  border-bottom:1px solid var(--c-line-2);
}
.stat__num{
  font-family:var(--f-display);
  font-size:clamp(56px, 7vw, 96px);
  line-height:.95;
  font-weight:500;
  letter-spacing:-.035em;
  color:var(--c-brass);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.stat__unit{
  font-family:var(--f-body);
  font-size:.16em;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-brass-lo);
  font-weight:500;
  align-self:flex-end;
  padding-bottom:.6em;
}
.stat__label{
  margin-top:var(--s-3);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-text-mute);
}
.stat__desc{ margin-top:var(--s-2); font-size:14px; color:var(--c-text-dim); }
@media (max-width:768px){
  .stats{ grid-template-columns:1fr; gap:var(--s-5); }
}

/* ---------- COMPONENT: SIGNATURE CARDS ---------- */
.signature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s-5);
}
@media (max-width:980px){ .signature-grid{ grid-template-columns:1fr; } }

.dish-card{
  position:relative;
  background:var(--c-surface);
  overflow:hidden;
  transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out);
  border:1px solid var(--c-line-2);
  display:flex; flex-direction:column;
}
.dish-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3), var(--sh-glow); border-color:var(--c-line); }
.dish-card__media{ aspect-ratio:5/4; overflow:hidden; }
.dish-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.dish-card:hover .dish-card__media img{ transform:scale(1.05); }
.dish-card__body{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.dish-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); }
.dish-card__name{ font-family:var(--f-display); font-size:24px; font-weight:500; letter-spacing:-.02em; line-height:1.2;}
.dish-card__price{ font-family:var(--f-display); font-size:20px; color:var(--c-brass); white-space:nowrap; }
.dish-card__weight{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-mute); }
.dish-card__desc{ color:var(--c-text-dim); font-size:14.5px; line-height:1.7; margin-top:var(--s-2); }
.dish-card__tag{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--c-brass);
  margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--c-line-2);
}

/* ---------- COMPONENT: MENU LIST (price list style) ---------- */
.menu-block{ display:flex; flex-direction:column; gap:var(--s-7); }
.menu-cat__head{ margin-bottom:var(--s-5); }
.menu-cat__title{ font-family:var(--f-display); font-size:36px; font-weight:500; letter-spacing:-.02em; }
.menu-cat__title em{ font-family:var(--f-italic); font-style:italic; color:var(--c-brass); }
.menu-cat__desc{ margin-top:var(--s-2); color:var(--c-text-mute); font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.menu-row{
  display:grid; grid-template-columns:1fr auto;
  gap:var(--s-5);
  padding:var(--s-5) 0;
  border-bottom:1px dashed var(--c-line-2);
  align-items:start;
}
.menu-row:last-child{ border-bottom:none; }
.menu-row__name{ font-family:var(--f-display); font-size:21px; font-weight:500; letter-spacing:-.015em; }
.menu-row__desc{ color:var(--c-text-dim); margin-top:6px; font-size:14.5px; line-height:1.65; max-width:60ch; }
.menu-row__meta{ display:flex; gap:var(--s-3); margin-top:8px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-text-mute); }
.menu-row__price{ font-family:var(--f-display); font-size:22px; color:var(--c-brass); font-weight:500; min-width:80px; text-align:right; line-height:1; padding-top:6px; }
.menu-row__price small{ font-size:.55em; color:var(--c-text-mute); display:block; margin-top:4px; letter-spacing:.18em;}

/* ---------- COMPONENT: FULLBLEED IMAGE BLOCK ---------- */
.fullbleed{
  position:relative;
  height:80vh; min-height:540px;
  overflow:hidden;
}
.fullbleed img{ width:100%; height:100%; object-fit:cover; }
.fullbleed__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,6,10,.4) 0%, rgba(7,6,10,.5) 60%, rgba(7,6,10,.85) 100%);
}
.fullbleed__inner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-6);
}
.fullbleed__inner > *{ max-width:760px; text-align:center; }

/* ---------- COMPONENT: QUOTE / CHEF ---------- */
.quote{
  font-family:var(--f-italic);
  font-style:italic;
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.35;
  color:var(--c-text);
  letter-spacing:-.005em;
  font-weight:400;
}
.quote__mark{
  font-family:var(--f-display);
  color:var(--c-brass);
  font-size:120px; line-height:.5;
  display:block;
  margin-bottom:var(--s-4);
}
.quote__attr{
  margin-top:var(--s-5);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--c-text-mute);
}
.quote__attr strong{ color:var(--c-brass); font-weight:500; letter-spacing:.22em;}

/* ---------- FORMS ---------- */
.form{ display:grid; gap:var(--s-5); }
.form-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s-5); }
@media (max-width:680px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:var(--s-2); }
.field__label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-text-mute);
}
.field__label .req{ color:var(--c-brass); }
.field__input, .field__select, .field__textarea{
  appearance:none;
  background:transparent;
  border:none; border-bottom:1px solid rgba(244,239,230,.18);
  padding:14px 0;
  font:inherit; color:var(--c-text);
  font-size:16px;
  transition:border-color var(--d-base) var(--ease-out);
  border-radius:0;
}
.field__input::placeholder, .field__textarea::placeholder{ color:var(--c-text-mute); }
.field__input:focus, .field__select:focus, .field__textarea:focus{
  outline:none; border-bottom-color:var(--c-brass);
}
.field__select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23B8935A' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center;
  padding-right:24px;
  cursor:pointer;
}
.field__select option{ background:var(--c-bg); color:var(--c-text); }
.field__textarea{ min-height:120px; resize:vertical; }
.field__hint{ font-size:12px; color:var(--c-text-mute); letter-spacing:.04em; }

.checkbox-row{ display:flex; align-items:flex-start; gap:var(--s-3); font-size:13px; color:var(--c-text-dim); line-height:1.5; }
.checkbox-row input[type="checkbox"]{ accent-color:var(--c-brass); margin-top:4px; }

/* ---------- FOOTER ---------- */
.footer{
  position:relative;
  border-top:1px solid var(--c-line-2);
  padding:var(--s-9) 0 var(--s-6);
  background:var(--c-pitch);
  color:var(--c-text-dim);
  margin-top:var(--s-10);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:var(--s-8);
}
@media (max-width:880px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--s-6); } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

.footer__title{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--c-brass);
  margin-bottom:var(--s-4);
}
.footer__list{ display:flex; flex-direction:column; gap:var(--s-2); }
.footer__list a{ color:var(--c-text-dim); transition:color var(--d-base) var(--ease-out); font-size:14px;}
.footer__list a:hover{ color:var(--c-brass); }
.footer__brand{
  font-family:var(--f-display);
  font-size:28px;
  line-height:1.05;
  color:var(--c-text);
}
.footer__brand small{ display:block; font-family:var(--f-body); font-size:10px; letter-spacing:.45em; color:var(--c-brass); text-transform:uppercase; margin-top:6px;}
.footer__tag{ margin-top:var(--s-4); font-size:14px; color:var(--c-text-dim); max-width:30ch; line-height:1.7; }
.footer__bottom{
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--c-line-2);
  display:flex; justify-content:space-between; gap:var(--s-4);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text-mute);
  flex-wrap:wrap;
}
.footer__bottom a:hover{ color:var(--c-brass); }

/* ---------- UTIL ---------- */
.center{ text-align:center; }
.gap-3{ gap:var(--s-3); } .gap-4{ gap:var(--s-4); } .gap-5{ gap:var(--s-5); } .gap-6{ gap:var(--s-6); }
.mt-3{ margin-top:var(--s-3); } .mt-4{ margin-top:var(--s-4); } .mt-5{ margin-top:var(--s-5); } .mt-6{ margin-top:var(--s-6); } .mt-7{ margin-top:var(--s-7); } .mt-8{ margin-top:var(--s-8); }
.row{ display:flex; align-items:center; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.col{ display:flex; flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }

/* Decorative ornamental line */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  color:var(--c-brass);
  font-size:14px;
  margin: 0 auto;
}
.ornament::before, .ornament::after{
  content:''; flex:1; max-width:64px; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-brass));
}
.ornament::after{ background:linear-gradient(90deg, var(--c-brass), transparent); }
.ornament__char{ font-family:var(--f-italic); font-style:italic; }

/* Aspect helpers */
.aspect-16-9{ aspect-ratio: 16/9; }
.aspect-4-3{ aspect-ratio: 4/3; }
.aspect-3-2{ aspect-ratio: 3/2; }
.aspect-1-1{ aspect-ratio: 1/1; }
.aspect-4-5{ aspect-ratio: 4/5; }
.aspect-3-4{ aspect-ratio: 3/4; }

/* Image container (locked aspect, hover bloom) */
.media{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--c-surface);
}
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.media:hover img{ transform:scale(1.04); }
.media__caption{
  position:absolute; left:var(--s-4); bottom:var(--s-4);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-text); background:rgba(7,6,10,.6);
  backdrop-filter:blur(6px);
  padding:6px 10px; border:1px solid var(--c-line);
}

/* Two-up image collage */
.collage{
  display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s-5);
}
.collage--reverse{ grid-template-columns:1fr 1.2fr; }
@media (max-width:880px){ .collage, .collage--reverse{ grid-template-columns:1fr; } }
.collage .media{ height:100%; }

/* Marquee / running headline */
.marquee{
  display:flex; gap:var(--s-9);
  overflow:hidden; position:relative;
  padding:var(--s-6) 0;
  border-top:1px solid var(--c-line-2); border-bottom:1px solid var(--c-line-2);
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; gap:var(--s-9); animation: marquee 40s linear infinite; }
.marquee__item{
  font-family:var(--f-display); font-size:clamp(40px, 6vw, 72px);
  font-weight:500; letter-spacing:-.02em; color:var(--c-text);
  display:inline-flex; align-items:center; gap:var(--s-7);
}
.marquee__item em{ font-family:var(--f-italic); font-style:italic; color:var(--c-brass); }
.marquee__item::after{ content:'✦'; color:var(--c-brass); font-size:.4em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* Pill / badge */
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px;
  background:rgba(184,147,90,.08);
  border:1px solid var(--c-line);
  color:var(--c-brass);
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  border-radius:999px;
}
@media (max-width:680px){
  .badge{ padding:6px 12px; font-size:9px; letter-spacing:.24em; gap:6px; }
}
.badge .sep{ color:var(--c-brass-lo); opacity:.7; font-size:.8em; }
.badge .star{
  display:inline-block; width:6px; height:6px;
  background:var(--c-brass); transform:rotate(45deg);
  margin: 0 2px;
}

/* Brand Monogram (used in nav + footer) */
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--c-brass);
  position:relative;
  flex-shrink:0;
}
.brand-mark::before{
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(184,147,90,.35);
}
.brand-mark__letter{
  font-family:var(--f-display);
  font-size:18px; line-height:1;
  color:var(--c-brass);
  font-weight:500;
  letter-spacing:0;
  position:relative;
  z-index:1;
}
.nav__brand{ gap:10px; flex-direction:row; align-items:center; }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.footer__brand-mark-row{ display:flex; align-items:center; gap:14px; }

/* Reservation visual section */
.cta-band{
  position:relative; overflow:hidden;
  padding:var(--s-10) 0;
  isolation:isolate;
}
.cta-band__bg{ position:absolute; inset:0; z-index:-2; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(7,6,10,.7), rgba(7,6,10,.85));
}

/* Map / location block (no external map, but a stylized address card) */
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:stretch; }
@media (max-width:880px){ .location-grid{ grid-template-columns:1fr; } }
.info-card{
  background:var(--c-surface);
  border:1px solid var(--c-line-2);
  padding:var(--s-7);
}
.info-card + .info-card{ margin-top:var(--s-4); }
.info-card__title{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--c-brass);
  margin-bottom:var(--s-3);
}
.info-card__body{ color:var(--c-text); line-height:1.8; font-size:15.5px; }
.info-card__body strong{ font-weight:500; }
.info-card__list{ display:grid; grid-template-columns:1fr auto; gap:8px var(--s-5); margin-top:var(--s-2); }
.info-card__list dt{ color:var(--c-text-dim); font-size:14px; }
.info-card__list dd{ margin:0; color:var(--c-text); font-size:14px; font-variant-numeric:tabular-nums; }
.info-card__list dt.closed, .info-card__list dd.closed{ color:var(--c-text-mute); }

/* Map placeholder (stylized SVG) */
.map-frame{
  position:relative;
  background:var(--c-elev);
  border:1px solid var(--c-line-2);
  aspect-ratio: 4/3;
  overflow:hidden;
}
.map-frame svg{ width:100%; height:100%; display:block; }
.map-pin{
  position:absolute; top:46%; left:52%;
  width:14px; height:14px; border-radius:50%;
  background:var(--c-brass); box-shadow:0 0 0 8px rgba(184,147,90,.18), 0 0 0 18px rgba(184,147,90,.08);
  animation: pinPulse 2.4s var(--ease-out) infinite;
}
@keyframes pinPulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(184,147,90,.25), 0 0 0 14px rgba(184,147,90,.1);}
  50%{ box-shadow:0 0 0 10px rgba(184,147,90,.18), 0 0 0 26px rgba(184,147,90,.04); }
}
.map-frame__label{
  position:absolute; top:46%; left:54%;
  transform:translate(20px, -8px);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-text); background:rgba(7,6,10,.78); backdrop-filter:blur(8px);
  padding:6px 12px; border:1px solid var(--c-line);
}

/* Whiskey shelf */
.shelf{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s-4);
}
@media (max-width:780px){ .shelf{ grid-template-columns:repeat(2, 1fr); } }
.shelf__item{
  background:var(--c-surface);
  border:1px solid var(--c-line-2);
  padding:var(--s-5);
  display:flex; flex-direction:column; gap:6px;
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
}
.shelf__item:hover{ border-color:var(--c-brass); transform:translateY(-3px); }
.shelf__age{ font-family:var(--f-display); color:var(--c-brass); font-size:32px; line-height:1; }
.shelf__name{ font-family:var(--f-display); font-size:18px; }
.shelf__region{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-mute); margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--c-line-2);}

/* Steaks cuts catalog (image left, list right) */
.cut-card{
  display:grid; grid-template-columns:1fr 1.4fr;
  background:var(--c-surface);
  border:1px solid var(--c-line-2);
  overflow:hidden;
  transition: border-color var(--d-base) var(--ease-out);
}
.cut-card:hover{ border-color:var(--c-line); }
.cut-card__media{ aspect-ratio: 4/5; overflow:hidden; background:var(--c-elev); }
.cut-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.cut-card:hover .cut-card__media img{ transform:scale(1.05); }
.cut-card__body{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4); }
.cut-card__title{ font-family:var(--f-display); font-size:32px; letter-spacing:-.02em; line-height:1.1;}
.cut-card__title em{ font-family:var(--f-italic); color:var(--c-brass); font-style:italic; }
.cut-card__desc{ color:var(--c-text-dim); line-height:1.75; font-size:15px;}
.cut-card__list{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--c-line-2); }
.cut-card__row{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s-4); align-items:baseline; }
.cut-card__row .name{ font-family:var(--f-display); font-size:18px; }
.cut-card__row .weight{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-mute); }
.cut-card__row .price{ font-family:var(--f-display); font-size:18px; color:var(--c-brass); min-width:70px; text-align:right;}
@media (max-width:780px){
  .cut-card{ grid-template-columns:1fr; }
  .cut-card__media{ aspect-ratio: 16/10; }
}

/* Gallery strip */
.gallery-strip{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:2px;
}
@media (max-width:880px){ .gallery-strip{ grid-template-columns: repeat(2, 1fr); } }
.gallery-strip .media{ aspect-ratio: 3/4; }

/* Centered intro block */
.intro-center{ text-align:center; max-width:760px; margin:0 auto; }
.intro-center h2{ margin-bottom:var(--s-5); }
.intro-center p{ color:var(--c-text-dim); font-size:18px; line-height:1.75; }

/* CTA Footer block (used inside subpages near bottom) */
.cta-final{
  text-align:center;
  padding:var(--s-10) 0 var(--s-9);
}
.cta-final h2{ font-size:clamp(40px, 5vw, 64px); margin-bottom:var(--s-4); }
.cta-final p{ color:var(--c-text-dim); max-width:54ch; margin: 0 auto var(--s-6); font-size:17px; line-height:1.7;}

/* Highlight word */
.hl{ color:var(--c-brass); font-family:var(--f-italic); font-style:italic; font-weight:500; }

/* ---------- AGING TIMELINE SCRUBBER (restaurant.html signature feature) ----------
   Interactive slider showing what happens to beef from 0 → 60 days of dry-aging.
   The "120% detail" of the project. */
.aging{
  background:var(--c-surface);
  border:1px solid var(--c-line-2);
  padding:var(--s-8) var(--s-7);
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.aging::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 50% at 50% 100%, rgba(184,147,90,.06), transparent 60%);
}
.aging__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6); margin-bottom:var(--s-6); flex-wrap:wrap; position:relative;}
.aging__title{ font-family:var(--f-display); font-size:clamp(28px,3vw,42px); line-height:1.05; letter-spacing:-.02em; font-weight:500;}
.aging__title em{ font-family:var(--f-italic); font-style:italic; color:var(--c-brass); font-weight:500;}
.aging__day{
  font-family:var(--f-display);
  font-size:clamp(48px,5.5vw,84px);
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--c-brass);
  line-height:.9;
  font-variant-numeric:tabular-nums;
  text-align:right;
  position:relative;
}
.aging__day small{ display:block; font-family:var(--f-body); font-size:.16em; letter-spacing:.32em; text-transform:uppercase; color:var(--c-brass-lo); margin-top:6px; }

.aging__scrubber{ position:relative; height:60px; margin:var(--s-6) 0 var(--s-4); }
.aging__track{
  position:absolute; left:0; right:0; top:50%; height:2px;
  background:linear-gradient(90deg,
    rgba(184,147,90,.15) 0%,
    rgba(184,147,90,.3) 35%,
    rgba(184,147,90,.55) 65%,
    rgba(226,125,64,.7) 100%);
  transform:translateY(-50%);
  border-radius:2px;
}
.aging__milestones{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none;}
.aging__milestone{ display:flex; flex-direction:column; align-items:center; gap:6px; transform:translateY(-30px);}
.aging__milestone .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-bg); border:1px solid var(--c-brass-lo); transform:translateY(34px);}
.aging__milestone .label{ font-family:var(--f-body); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-mute); font-variant-numeric:tabular-nums;}
.aging__input{
  position:absolute; left:0; right:0; top:50%;
  width:100%; height:44px;
  transform:translateY(-50%);
  -webkit-appearance:none; appearance:none;
  background:transparent;
  cursor:pointer;
  margin:0; padding:0;
  z-index:2;
}
.aging__input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--c-brass);
  border:3px solid var(--c-bg);
  box-shadow:0 0 0 1px var(--c-brass), 0 0 24px rgba(184,147,90,.45);
  cursor:grab;
  transition: transform .15s, box-shadow .25s;
}
.aging__input::-moz-range-thumb{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--c-brass);
  border:3px solid var(--c-bg);
  box-shadow:0 0 0 1px var(--c-brass), 0 0 24px rgba(184,147,90,.45);
  cursor:grab;
  transition: transform .15s, box-shadow .25s;
}
.aging__input:active::-webkit-slider-thumb{ transform:scale(1.15); cursor:grabbing; box-shadow:0 0 0 1px var(--c-brass-hi), 0 0 32px rgba(184,147,90,.6);}
.aging__input:active::-moz-range-thumb{ transform:scale(1.15); cursor:grabbing; box-shadow:0 0 0 1px var(--c-brass-hi), 0 0 32px rgba(184,147,90,.6);}
.aging__input:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--c-brass-hi), 0 0 0 5px rgba(184,147,90,.3);}

.aging__body{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); margin-top:var(--s-6); }
.aging__stage-label{
  font-family:var(--f-body);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-brass);
  margin-bottom:var(--s-3);
}
.aging__stage-name{
  font-family:var(--f-display);
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.02em; line-height:1.15;
  font-weight:500;
  margin-bottom:var(--s-3);
}
.aging__stage-desc{ color:var(--c-text-dim); line-height:1.7; font-size:15.5px; max-width:50ch; }
.aging__profile{ display:flex; flex-direction:column; gap:var(--s-3); }
.aging__profile-row{ display:grid; grid-template-columns: 110px 1fr 36px; gap:var(--s-4); align-items:center; font-size:13px; color:var(--c-text-dim);}
.aging__profile-row .name{ letter-spacing:.18em; text-transform:uppercase; font-size:10px; color:var(--c-text-mute);}
.aging__profile-row .bar{ height:4px; background:rgba(244,239,230,.07); position:relative; overflow:hidden; border-radius:2px;}
.aging__profile-row .bar > i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--c-brass-lo), var(--c-brass)); border-radius:2px; transition:width .4s var(--ease-out);}
.aging__profile-row .val{ font-variant-numeric:tabular-nums; text-align:right; color:var(--c-brass); font-family:var(--f-display); font-size:15px;}

@media (max-width:780px){
  .aging{ padding:var(--s-6) var(--s-5); }
  .aging__head{ flex-direction:column; align-items:flex-start; gap:var(--s-3); }
  .aging__day{ text-align:left; }
  .aging__body{ grid-template-columns:1fr; gap:var(--s-5); }
  .aging__milestone .label{ display:none; } /* labels too cramped on mobile */
}

/* ---------- DROPCAP (editorial story openers) ---------- */
.dropcap > p:first-of-type::first-letter,
.dropcap::first-letter{
  font-family:var(--f-display);
  font-size:5em;
  line-height:.85;
  float:left;
  margin: 6px 14px -8px 0;
  color:var(--c-brass);
  font-weight:500;
  letter-spacing:-.04em;
}

/* Mobile spacing tweaks */
@media (max-width:680px){
  .section{ padding:var(--s-8) 0; }
  .section--lg{ padding:var(--s-9) 0; }
  .container{ padding:0 var(--s-5); }
}