/* ============================================================
   The Tollhouse — pitch build · SOMETHINGCOOL
   "The riverside room": warm ivory paper base, deep-charcoal
   feature sections, one restrained gold accent. Playfair display.
   Tokens per design-system.md. Their real photography only.
   ============================================================ */

:root{
  --paper:    #ffffff;
  --stone:    #f6f3ec;
  --ink:      #303133;
  --ink-soft: rgba(48,49,51,.66);
  --ink-faint:rgba(48,49,51,.42);
  --char:     #1b1d1f;
  --char-2:   #232628;
  --gold:     #b4975a;
  --gold-ink: #7d6531;            /* deepened gold for text on light */
  --cream:    rgba(255,255,255,.74);
  --cream-faint: rgba(255,255,255,.5);
  --rule:     rgba(48,49,51,.15);
  --rule-d:   rgba(180,151,90,.24); /* gold hairline on dark */

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--gold); color:var(--char); }

img,svg{ display:block; max-width:100%; }
a{ color:var(--ink); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* Layout ------------------------------------------------------ */
.wrap{ max-width:1160px; margin:0 auto; padding-left:24px; padding-right:24px; }
/* vertical padding never lives on .wrap (specificity trap — see brain/patterns) */
section{ position:relative; }
.section-pad{ padding-top:clamp(72px,11vw,140px); padding-bottom:clamp(72px,11vw,140px); }

.label{
  font-family:var(--sans);
  font-size:11.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 20px;
}
.dark .label, .char .label{ color:var(--gold); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; color:var(--ink); }
.dark h1,.dark h2,.dark h3,.dark h4,.char h1,.char h2,.char h3,.char h4{ color:#fff; }
.display{ font-weight:600; line-height:1.02; letter-spacing:-.01em; }
h2.display{ font-size:clamp(2rem,4.4vw,3.5rem); margin-bottom:24px; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.24rem); color:var(--ink-soft); max-width:34em; }
.dark .lede,.char .lede{ color:var(--cream); }
p strong{ color:var(--ink); font-weight:600; }
.dark p strong,.char p strong{ color:#fff; }
.gold-word{ color:var(--gold-ink); font-style:italic; }
.dark .gold-word,.char .gold-word{ color:var(--gold); }

/* Buttons ------------------------------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:17px 30px 15px;
  background:var(--gold); color:var(--char);
  text-decoration:none; border:1px solid var(--gold);
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ background:#c4a969; border-color:#c4a969; transform:translateY(-2px); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--rule);
}
.btn-ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.dark .btn-ghost,.char .btn-ghost{ color:#fff; border-color:var(--rule-d); }
.dark .btn-ghost:hover,.char .btn-ghost:hover{ border-color:var(--gold); color:#fff; }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* Demo honesty tag -------------------------------------------- */
.demo-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:var(--char);
  border-radius:999px; padding:6px 14px 5px; vertical-align:middle;
}
.demo-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* Nav ---------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
/* over-hero (transparent → solid on scroll) */
.nav.on-hero{ background:transparent; border-color:transparent; }
.nav.on-hero .nav-mark, .nav.on-hero .nav-links a{ color:#fff; }
.nav.on-hero .nav-links a{ color:var(--cream); }
.nav.on-hero .nav-burger span{ background:#fff; }
.nav-inner{
  max-width:1240px; margin:0 auto; padding:0 24px;
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-mark{
  font-family:var(--serif);
  font-weight:700; font-size:1.5rem; line-height:1;
  color:var(--ink); text-decoration:none; letter-spacing:.01em;
  transition:color .4s var(--ease);
}
.nav-mark span{ color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--gold-ink); }
.nav.on-hero .nav-links a[aria-current="page"]{ color:var(--gold); }
.nav .btn{ padding:12px 22px 10px; font-size:11px; }
.nav-burger{
  display:none; background:none; border:0; cursor:pointer; padding:10px;
  width:44px; height:44px; position:relative;
}
.nav-burger span{
  display:block; width:24px; height:2px; background:var(--ink);
  margin:5px auto; transition:transform .3s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-links{
    position:fixed; top:74px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(255,255,255,.98); border-bottom:1px solid var(--rule);
    padding:12px 24px 28px;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s var(--ease), visibility 0s .35s;
  }
  .nav.open .nav-links{
    transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .35s var(--ease), opacity .35s var(--ease);
  }
  .nav.open.on-hero .nav-links a{ color:var(--ink-soft); }
  .nav.open.on-hero .nav-links a[aria-current="page"]{ color:var(--gold-ink); }
  .nav-links li{ width:100%; border-bottom:1px solid var(--rule); }
  .nav-links li:last-child{ border-bottom:0; }
  .nav-links a{ display:block; padding:18px 2px; font-size:13px; }
  .nav-burger{ display:block; }
}
@media (max-width: 520px){
  .nav-mark{ font-size:1.28rem; }
  .nav .btn{ padding:10px 14px 9px; font-size:10px; letter-spacing:.14em; }
  .nav-inner{ gap:12px; }
}

/* Photography — their real imagery, gently warm-graded --------- */
.photo{
  position:relative; overflow:hidden; margin:0;
  background:var(--stone);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
  transition:transform .8s var(--ease);
}
.photo figcaption{
  position:absolute; left:18px; right:18px; bottom:15px; z-index:1;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.photo.cap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent 42%);
}
.r43{ aspect-ratio:4/3; } .r32{ aspect-ratio:3/2; }
.r45{ aspect-ratio:4/5; } .r11{ aspect-ratio:1/1; } .r219{ aspect-ratio:21/9; }
.photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.5vw,26px); }
@media (max-width:700px){ .photo-row{ grid-template-columns:1fr; } .r219{ aspect-ratio:16/10; } }

/* Hero --------------------------------------------------------- */
.hero{
  position:relative; min-height:92vh; min-height:92svh;
  display:flex; align-items:flex-end;
  padding-top:130px; padding-bottom:clamp(56px,8vw,110px);
  overflow:hidden; background:var(--char);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1) contrast(1.02) brightness(.82);
  animation:heroPan 22s ease-out both;
}
@keyframes heroPan{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero-bg img{ animation:none; } }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,16,17,.9) 4%, rgba(15,16,17,.5) 42%, rgba(15,16,17,.42) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero .label, .hero-mark, .hero-tagline, .hero-meta{ text-shadow:0 1px 22px rgba(10,11,12,.55); }
.hero .label{ color:#d8c193; }  /* brighter gold for kicker legibility over photos */
.hero-mark{
  font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(3rem,9.5vw,7rem);
  line-height:.98; letter-spacing:-.015em;
  margin:0 0 26px; max-width:12em;
}
.hero-mark em{ font-style:italic; color:var(--gold); }
.hero-tagline{
  font-size:clamp(1.08rem,1.8vw,1.4rem);
  color:var(--cream); max-width:32em; margin:0 0 38px; line-height:1.5;
}
.hero .cta-row{ margin-bottom:34px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 0; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-faint); margin:0; padding:0; list-style:none;
}
.hero-meta li{ display:flex; align-items:center; }
.hero-meta li + li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--gold); margin:0 16px; }

/* Ethos band (marquee of seasonal words over stone) ----------- */
.ethos{
  background:var(--stone);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:26px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{ display:inline-flex; animation:marquee 52s linear infinite; will-change:transform; }
.marquee-seq{
  display:inline-flex; align-items:baseline;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.65rem); color:var(--ink-soft);
}
.marquee-seq span{ padding:0 .05em; }
.marquee-seq span::after{ content:"·"; color:var(--gold); padding:0 .6em; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* Split ------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.split.top{ align-items:start; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:44px; } .split.rev-m > *:first-child{ order:2; } }
.copy p{ color:var(--ink-soft); margin:0 0 1.2em; max-width:38em; }
.dark .copy p,.char .copy p{ color:var(--cream); }

.feature-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.feature-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:19px 2px; border-bottom:1px solid var(--rule);
}
.feature-list .f-name{ font-family:var(--serif); font-weight:500; font-size:1.2rem; }
.feature-list .f-note{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); text-align:right; }
.char .feature-list, .dark .feature-list{ border-top-color:var(--rule-d); }
.char .feature-list li, .dark .feature-list li{ border-bottom-color:var(--rule-d); }
.char .feature-list .f-name, .dark .feature-list .f-name{ color:#fff; }
.char .feature-list .f-note, .dark .feature-list .f-note{ color:var(--cream-faint); }

/* Dark / stone section skins ---------------------------------- */
.char{ background:var(--char); color:#fff; }
.char .photo{ background:#0f1011; }
.stone{ background:var(--stone); }

/* Menu / dish lists ------------------------------------------- */
.kindly{
  font-style:italic; font-family:var(--serif); font-weight:400;
  color:var(--ink-soft); font-size:1.05rem; max-width:40em;
}
.char .kindly{ color:var(--cream); }
.menu-course{ margin-top:clamp(44px,6vw,72px); }
.menu-course:first-of-type{ margin-top:0; }
.course-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--gold); padding-bottom:14px; margin-bottom:8px;
}
.course-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0; }
.course-head .course-sub{ font-style:italic; font-family:var(--serif); color:var(--gold-ink); margin:0; font-weight:400; font-size:1.02rem; }
.dish-list{ list-style:none; margin:0; padding:0; }
.dish{ padding:20px 2px; border-bottom:1px solid var(--rule); }
.dish:last-child{ border-bottom:0; }
.dish-name{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.12rem,1.7vw,1.32rem);
  color:var(--ink);
}
.dish-chain{ display:block; font-family:var(--sans); font-size:.92rem; font-weight:400; color:var(--ink-soft); margin-top:5px; letter-spacing:.01em; }
.dish-note{ font-size:.82rem; color:var(--ink-faint); font-style:italic; }

/* Pull quote / press ------------------------------------------ */
.pull{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.5rem,3.3vw,2.6rem); line-height:1.28;
  max-width:24em; margin:0;
}
.pull em{ color:var(--gold-ink); font-style:inherit; }
.char .pull em,.dark .pull em{ color:var(--gold); }
.press-quote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.4; max-width:27em; margin:0;
}
.press-cite{ display:block; margin-top:22px; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); }
.char .press-cite{ color:var(--gold); }

/* Teaser cards ------------------------------------------------- */
.tease-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,30px); }
@media (max-width:880px){ .tease-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.tease{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--paper);
}
.tease .photo{ aspect-ratio:4/5; margin-bottom:20px; }
.tease:hover .photo img{ transform:scale(1.05); }
.tease .t-label{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 8px; }
.tease h3{ font-size:clamp(1.35rem,2vw,1.65rem); line-height:1.15; margin:0 0 12px; }
.tease p{ color:var(--ink-soft); margin:0 0 16px; font-size:.97rem; flex-grow:1; }
.tease .go{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.tease .go::after{ content:"→"; margin-left:10px; color:var(--gold-ink); transition:margin .3s var(--ease); }
.tease:hover .go::after{ margin-left:16px; }

/* Community / donation callout -------------------------------- */
.note-card{
  border:1px solid var(--gold); padding:clamp(28px,4vw,52px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,48px); align-items:center;
}
@media (max-width:680px){ .note-card{ grid-template-columns:1fr; gap:22px; } }
.note-card .big{ font-family:var(--serif); font-weight:700; font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; color:var(--gold-ink); white-space:nowrap; }
.char .note-card .big{ color:var(--gold); }
.note-card h2{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 0 12px; }
.note-card p{ margin:0; color:var(--ink-soft); max-width:40em; }
.char .note-card p{ color:var(--cream); }

/* Page headers (subpages) ------------------------------------- */
.page-head{ padding-top:clamp(140px,19vh,210px); padding-bottom:clamp(40px,6vw,72px); }
.page-head h1{
  font-size:clamp(2.5rem,6.2vw,4.8rem); font-weight:600; line-height:1.02; margin:0 0 22px;
}
.char.page-head h1{ color:#fff; }

/* Forms -------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field input, .field select, .field textarea{
  background:var(--paper); border:1px solid var(--rule);
  color:var(--ink); font-family:var(--sans); font-size:16px;
  padding:15px 16px; border-radius:0; width:100%;
  transition:border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 21px) 55%, calc(100% - 16px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.form-success{ border:1px solid var(--gold); padding:34px 32px; display:none; }
.form-success.show{ display:block; }
.form-success h3{ font-size:1.6rem; margin-bottom:12px; }
.form-success p{ color:var(--ink-soft); margin:0; }

/* Booking (ResDiary) callout ---------------------------------- */
.book-band{ background:var(--char); color:#fff; overflow:hidden; }
.book-band::before{
  content:""; position:absolute; inset:auto -10% -60% 40%; height:120%;
  background:radial-gradient(ellipse at center, rgba(180,151,90,.16), transparent 62%);
  pointer-events:none;
}
.book-inner{ position:relative; text-align:center; max-width:40em; margin:0 auto; }
.book-inner h2{ color:#fff; margin-bottom:20px; }
.book-inner .lede{ margin:0 auto 30px; }
.book-alt{ margin-top:22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-faint); }
.book-alt a{ color:var(--gold); text-decoration:none; }
.book-alt a:hover{ text-decoration:underline; }

/* Info strip (hours/contact) ---------------------------------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
@media (max-width:760px){ .info-grid{ grid-template-columns:1fr; gap:34px; } }
.info-grid h4{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 14px; font-family:var(--sans); }
.info-grid p{ margin:0; color:var(--ink-soft); line-height:1.7; }

/* Footer ------------------------------------------------------ */
footer{ background:var(--char); color:#fff; }
.foot-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(32px,4vw,64px);
  padding-top:clamp(56px,7vw,90px); padding-bottom:clamp(40px,5vw,60px);
}
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-mark{ font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1; margin:0 0 18px; color:#fff; }
.foot-mark span{ color:var(--gold); }
.foot-grid p, .foot-grid li{ color:var(--cream); font-size:.93rem; }
.foot-grid h4{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-family:var(--sans); }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid ul li{ margin-bottom:10px; }
.foot-grid a{ text-decoration:none; color:var(--cream); }
.foot-grid a:hover{ text-decoration:underline; color:#fff; }
.foot-bottom{
  border-top:1px solid var(--rule-d);
  padding-top:26px; padding-bottom:30px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.1em; color:var(--cream-faint);
}

/* Hub (pitch package page) ------------------------------------ */
.nav-x{
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
.nav-x b{ color:var(--gold-ink); font-weight:600; }
.hub-head{
  padding-top:clamp(150px,22vh,228px); padding-bottom:clamp(44px,7vw,80px);
  overflow:hidden;
}
.hub-head::before{ /* soft gold wash, top-right */
  content:""; position:absolute; top:-30%; right:-12%; width:62%; height:120%;
  background:radial-gradient(ellipse at center, rgba(180,151,90,.14), transparent 66%);
  pointer-events:none;
}
.hub-head .wrap{ position:relative; }
.hub-head h1{
  font-size:clamp(2.9rem,8vw,6rem); font-weight:600; line-height:1;
  margin:0 0 26px; letter-spacing:-.015em;
}
.hub-head h1 em{ font-style:italic; color:var(--gold-ink); }
.hub-lede{ font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:35em; line-height:1.55; }

/* 01 · the video — dark riverside band */
.hub-video{ background:var(--char); color:#fff; overflow:hidden; }
.hub-video::before{
  content:""; position:absolute; inset:auto -10% -55% 34%; height:120%;
  background:radial-gradient(ellipse at center, rgba(180,151,90,.16), transparent 62%);
  pointer-events:none;
}
.hub-video .wrap{ position:relative; }
.hub-video h2{ color:#fff; }
.hub-video .lede{ color:var(--cream); margin-bottom:clamp(28px,4vw,44px); }
.video-slot{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--rule-d); background:#0f1011;
  text-decoration:none;
}
@media (max-width:640px){ .video-slot{ aspect-ratio:4/3; } }
.video-slot > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1) contrast(1.02) brightness(.6);
  transition:transform .8s var(--ease);
}
.video-slot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 56%, rgba(15,16,17,.22), rgba(15,16,17,.66) 78%);
}
.video-face{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:24px;
}
.play-ring{
  width:clamp(72px,10vw,96px); height:clamp(72px,10vw,96px);
  border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,16,17,.4);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.play-ring::before{
  content:""; display:block; margin-left:5px;
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--gold);
}
a.video-slot:hover .play-ring{ transform:scale(1.06); background:rgba(15,16,17,.6); }
a.video-slot:hover > img{ transform:scale(1.03); }
.video-note{
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; max-width:30em; text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* 02–04 · the package cards (reuse .tease, add static deck variant) */
.hub-cards .tease-grid{ align-items:stretch; }
.hub-cards .tease{ background:transparent; }
.hub-cards .tease .photo{ aspect-ratio:4/3; }
.tease.static{ cursor:default; }
.tease.static:hover .photo img{ transform:none; }
.tease .demo-tag{ align-self:flex-start; margin-top:auto; }

/* close band */
.hub-close{ background:var(--char); color:#fff; overflow:hidden; }
.hub-close::before{
  content:""; position:absolute; inset:auto -15% -60% -15%; height:120%;
  background:radial-gradient(ellipse at 50% 100%, rgba(180,151,90,.15), transparent 64%);
  pointer-events:none;
}
.hub-close .wrap{ position:relative; text-align:center; max-width:40em; margin:0 auto; }
.hub-close h2{ color:#fff; }
.hub-close .lede{ color:var(--cream); margin:0 auto 34px; }

/* Reveal system (transform+opacity ONLY — paint-stall lesson) --- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease), transform .65s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .tease .go::after, .photo img{ transition:none; }
  .tease:hover .photo img{ transform:none; }
}
.noanim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }