html{scrollbar-gutter:stable}
body{margin:0;background:#050505;font-family:Archivo,Helvetica,sans-serif;color:#e9e6de}
a{color:#e9e6de;text-decoration:none}a:hover{color:#c9b98a}
::selection{background:#c9b98a;color:#161512}
@keyframes tcPulse{0%,100%{opacity:1}50%{opacity:.35}}
.tc-dd .tc-dd-menu{display:none}
.tc-dd:hover .tc-dd-menu{display:flex}
/* contained column inside full-width section bands */
.wrap{max-width:1240px;margin:0 auto;padding:0 56px;box-sizing:border-box}
/* hover states */
.nl:hover{color:#c9b98a!important}
.dmi:hover{background:rgba(201,185,138,.08)!important;color:#c9b98a!important}
.btn-gold:hover{background:#e9e6de!important}
.btn-ghost:hover{border-color:#c9b98a!important;color:#c9b98a!important}
input::placeholder{color:rgba(233,230,222,.35)}
/* split hero — copy on ink left, image masked into the ink on the right (no text over faces) */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:620px;background:#050505}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:72px 48px 72px max(56px,calc((100vw - 1240px)/2 + 56px));box-sizing:border-box}
.hero-visual{position:relative;overflow:hidden}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.92) contrast(1.06) saturate(1.02);-webkit-mask:linear-gradient(90deg,transparent 0,#000 22%);mask:linear-gradient(90deg,transparent 0,#000 22%);animation:heroImgIn 1.3s .05s both ease}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0,rgba(5,5,5,.55) 12%,transparent 34%),linear-gradient(180deg,rgba(5,5,5,.35) 0,transparent 28%,transparent 68%,rgba(5,5,5,.6) 100%)}
.hero-visual .over{position:absolute;z-index:2}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroImgIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hi1{animation:heroIn .85s .05s both cubic-bezier(.2,.75,.2,1)}
.hi2{animation:heroIn .85s .2s both cubic-bezier(.2,.75,.2,1)}
.hi3{animation:heroIn .85s .35s both cubic-bezier(.2,.75,.2,1)}
.hi4{animation:heroIn .85s .5s both cubic-bezier(.2,.75,.2,1)}
.hi5{animation:heroIn .85s .65s both cubic-bezier(.2,.75,.2,1)}

/* ---- movement layer ---- */

/* title emphasis: bronze text, uniform site-wide (block-highlight experiment retired) */
.hl{color:#c9b98a}
section[style*="ece7db"] .hl{color:#96782f}
/* on the brass band bronze text disappears: emphasis becomes ink + underline */
section[style*="background:#c9b98a"] .hl{color:#161512;border-bottom:2px solid rgba(22,21,18,.75);padding-bottom:1px}

/* the mark: the open seat breathes */
@keyframes tcSeat{
  0%,100%{box-shadow:0 0 5px rgba(201,185,138,.55);border-color:#c9b98a}
  50%{box-shadow:0 0 13px rgba(201,185,138,.95);border-color:#e6d9b3}
}
.logo-seat{animation:tcSeat 2.6s ease-in-out infinite}

/* scroll reveal: elements rise in as they enter the viewport */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1);transition-delay:var(--rvd,0s)}
.rv.in{opacity:1;transform:none}

/* series rows: lift on hover, image eases in scale */
.srow{transition:transform .5s cubic-bezier(.2,.75,.25,1),border-color .5s ease,box-shadow .5s ease}
.srow:hover{transform:translateY(-5px);border-color:rgba(201,185,138,.7)!important;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.srow img{transition:transform 1.4s cubic-bezier(.2,.6,.25,1)}
.srow:hover img{transform:scale(1.045)}

/* episode play badge: present but dormant — the episode hasn't landed yet */
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play-badge .tri{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(233,230,222,.35);background:rgba(5,5,5,.45);backdrop-filter:blur(3px);transition:border-color .5s ease,background .5s ease}
.play-badge .tri::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent rgba(233,230,222,.45);margin-left:4px;transition:border-left-color .5s ease}
.epi:hover .play-badge .tri{border-color:rgba(233,230,222,.55);background:rgba(5,5,5,.6)}
.epi:hover .play-badge .tri::after{border-left-color:rgba(233,230,222,.7)}

/* episode cards + question rows: hover life */
.epi{overflow:hidden;transition:transform .5s cubic-bezier(.2,.75,.25,1),border-color .5s ease,box-shadow .5s ease}
.epi:hover{transform:translateY(-4px);border-color:rgba(201,185,138,.45)!important;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.epi img{transition:transform 1.4s cubic-bezier(.2,.6,.25,1)}
.epi:hover img{transform:scale(1.045)}
.qrow{transition:background .4s ease,transform .4s cubic-bezier(.2,.75,.25,1)}
.qrow:hover{background:rgba(201,185,138,.045);transform:translateX(6px)}

/* roster: open chairs */
.chair-card{position:relative;aspect-ratio:4/5;background:linear-gradient(180deg,#101012 0%,#0b0b0c 100%);border:1px solid rgba(233,230,222,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform .5s cubic-bezier(.2,.75,.25,1),border-color .5s ease}
.chair-card:hover{transform:translateY(-4px);border-color:rgba(201,185,138,.5)}
.chair-card .seat{width:26px;height:26px;border:4px solid rgba(201,185,138,.75);box-sizing:border-box;box-shadow:0 0 10px rgba(201,185,138,.25);transition:box-shadow .5s ease,border-color .5s ease}
.chair-card:hover .seat{border-color:#c9b98a;box-shadow:0 0 22px rgba(201,185,138,.55)}
.chair-card.reserved{border-color:rgba(201,185,138,.45);background:linear-gradient(180deg,#13110c 0%,#0c0b09 100%)}
.chair-card.reserved .seat{background:#c9b98a;border-color:#c9b98a;box-shadow:0 0 16px rgba(201,185,138,.5)}

/* planning cards */
.plan-card{background:#0d0d0e;border:1px solid rgba(233,230,222,.12);padding:26px 28px;transition:transform .5s cubic-bezier(.2,.75,.25,1),border-color .5s ease}
.plan-card:hover{transform:translateY(-4px);border-color:rgba(201,185,138,.45)}

/* respect reduced-motion: everything lands instantly, nothing loops */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .logo-seat,.hi1,.hi2,.hi3,.hi4,.hi5,.hero-visual img{animation:none!important}
  .srow,.srow img,.plan-card{transition:none}
}
