/* Words, Wings & Wine: shared styles for the keyword pages.
   Same tokens as index.html so every page reads as one site. */
:root{
  --ink:#1b0e09; --ink-2:#24130d; --bar:#0e0704;
  --bone:#f3e9da; --smoke:#c3b29c; --dim:#a08d77;
  --gold:#d4a017; --gold-deep:#c69214; --gold-light:#e0a93a;
  --wine:#3b0c16; --wine-2:#4e1222;
  --rule:rgba(212,160,23,.26);
  --head:4.25rem;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --data:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 1rem)}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--serif);font-weight:500;font-size:1.3125rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:500;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.7rem,6vw,5rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.6rem,2.4vw,2.05rem);line-height:1.1}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--bone)}
.wrap{max-width:1260px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow > :not(.people):not(.cards):not(.quotes):not(.crew){max-width:860px}
.data{font-family:var(--data);font-weight:400;letter-spacing:.035em;line-height:1}
.lede{font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.42}
.role{margin:0 0 .4rem;font-style:italic;color:var(--gold-light);font-size:1.1rem}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--gold);color:var(--ink);padding:.6rem 1rem}
.skip:focus{left:16px}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.72em 1.35em .58em;background:var(--gold);color:var(--ink);border:1px solid var(--gold);border-radius:2px;font-family:var(--data);font-size:1.3rem;letter-spacing:.06em;line-height:1.05;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn.ghost{background:transparent;color:var(--bone);border-color:rgba(243,233,218,.42)}
.btn.ghost:hover{color:var(--gold-light);border-color:var(--gold-light)}
.btn.sm{min-height:40px;font-size:1.15rem;padding:.6em 1.05em .48em;white-space:nowrap}
.link{color:var(--gold-light);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;overflow-wrap:anywhere}
.link:hover{color:var(--bone)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem}

/* header */
.head{position:sticky;top:0;z-index:40;background:var(--bar);border-bottom:1px solid var(--rule)}
.head-in{height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.head-logo{flex:none}
.head-logo img{height:38px;width:auto}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--smoke);font-size:1.125rem;font-weight:600}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-light)}
.head-act{display:flex;align-items:center;gap:.75rem}
.menu-btn{display:none;min-height:40px;padding:0 .9rem;background:transparent;color:var(--bone);border:1px solid rgba(243,233,218,.35);border-radius:2px;font:600 1.1rem var(--serif);cursor:pointer}
@media (max-width:1080px){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bar);border-bottom:1px solid var(--rule);padding:.5rem 20px 1.25rem}
  .nav.open ul{flex-direction:column;gap:0}
  .nav.open a{display:block;padding:.8rem 0;font-size:1.35rem;color:var(--bone);border-bottom:1px solid var(--rule)}
}
@media (max-width:420px){.head-logo img{height:28px}.head-in{gap:.6rem}.head-act{gap:.45rem}.head-act .btn.sm{padding-inline:.75em;font-size:1.05rem}.menu-btn{padding:0 .65rem}}
@media (max-width:340px){.head-act .btn.sm{display:none}}

/* hero */
.hero{background:var(--bar);padding-block:clamp(2.25rem,5vw,4.5rem) clamp(2.75rem,6vw,5rem);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-copy .lede{margin-top:1.25rem;color:var(--bone)}
.hero-copy .row{margin-top:1.9rem}
.crumbs{display:flex;gap:.55rem;align-items:baseline;margin-bottom:1.1rem;font-size:1.05rem;color:var(--smoke);font-style:italic}
.crumbs a{color:var(--smoke)}
.crumbs a:hover{color:var(--gold-light)}
.crumbs [aria-current]{color:var(--gold-light)}
.hero-pic{margin:0}
.hero-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 0 0 1px rgba(212,160,23,.3)}
.hero-wide .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-wide .hero-pic img{aspect-ratio:3/2}
.hero-narrow .hero-pic{max-width:320px;justify-self:center}
.hero-narrow .hero-pic img{aspect-ratio:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(212,160,23,.25)}
@media (max-width:860px){
  .hero-grid,.hero-wide .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-pic{max-width:520px}
  .hero-tall .hero-pic img{aspect-ratio:4/4.4}
}

/* next show ticket */
.tickets{background:var(--wine);padding-block:clamp(3rem,7vw,5rem)}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,250px);background:var(--ink)}
.ticket-main{padding:clamp(1.6rem,4vw,3.25rem)}
.ticket-main h2{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.ticket-main .lede{margin-top:.9rem;color:var(--smoke)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 1.6rem;margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule)}
.facts dt{font-style:italic;color:var(--smoke);font-size:1.0625rem}
.facts dd{margin:.2rem 0 0;font-family:var(--data);font-size:clamp(1.4rem,2vw,1.7rem);letter-spacing:.03em;line-height:1.05}
.stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:clamp(1.6rem,4vw,2.75rem) 1.5rem;border-left:2px dashed rgba(212,160,23,.5)}
.stub::before,.stub::after{content:"";position:absolute;left:-15px;width:28px;height:28px;border-radius:50%;background:var(--wine)}
.stub::before{top:-14px}.stub::after{bottom:-14px}
.stub .admit{margin:0;font-family:var(--data);font-size:3rem;line-height:.9;letter-spacing:.07em;color:var(--gold)}
.stub p{font-size:1.0625rem;color:var(--smoke);max-width:22ch}
@media (max-width:980px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:780px){
  .ticket{grid-template-columns:minmax(0,1fr)}
  .stub{border-left:0;border-top:2px dashed rgba(212,160,23,.5)}
  .stub::before{left:-14px;top:-15px}
  .stub::after{left:auto;right:-14px;top:-15px;bottom:auto}
}

/* content blocks */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.block + .block{padding-top:0}
.block h2{margin-bottom:1.25rem}
.block p{color:var(--smoke)}
.block p strong{color:var(--bone)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.media-tall .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.flip .pic{order:-1}
.media-tall.flip .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pic{margin:0}
.media-wide .pic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.media-tall .pic img{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:640px}
@media (max-width:860px){
  .split,.media-tall .split,.media-tall.flip .split{grid-template-columns:minmax(0,1fr)}
  .flip .pic{order:0}
  .media-tall .pic{max-width:460px}
}
.after{margin-top:1.4rem}

.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:1.15rem}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;align-items:start;color:var(--smoke);line-height:1.45}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-family:var(--data);font-size:1.45rem;line-height:1;padding-top:.12em}
.steps li span{padding-top:.3rem}

.ticks{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.25rem;border-top:1px solid var(--rule)}
.ticks li{padding:.8rem 0 .8rem 1.6rem;border-bottom:1px solid var(--rule);color:var(--smoke);position:relative;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:1.35rem;width:.6rem;height:.6rem;background:var(--gold);transform:rotate(45deg)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:.5rem}
.card{background:var(--ink-2);border:1px solid var(--rule);padding:clamp(1.4rem,3vw,2.1rem)}
.card h3{margin-bottom:.65rem}
.card p{color:var(--smoke);font-size:1.18rem}
.card .link{display:inline-block;margin-top:.9rem}
@media (max-width:700px){.cards{grid-template-columns:minmax(0,1fr)}}

.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.1rem 1.6rem;align-items:start}
.feature img{width:100%;aspect-ratio:9/10;object-fit:cover}
.feature h3{margin-bottom:.35rem}
.from{margin:0 0 .6rem;font-weight:600;color:var(--bone)!important}
.bio{font-size:1.12rem;line-height:1.5}
@media (max-width:1040px){.people{grid-template-columns:minmax(0,1fr)}}
@media (max-width:540px){.feature{grid-template-columns:minmax(0,1fr)}.feature img{max-width:340px}}

.crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem 2rem;border-top:1px solid var(--rule);padding-top:1.4rem}
.crew li{display:grid;gap:.2rem}
.crew .k{font-style:italic;color:var(--smoke);font-size:1.05rem}
.crew strong{font-family:var(--data);font-weight:400;font-size:1.8rem;letter-spacing:.04em;line-height:1}

.jifs{margin:0;display:grid;border-top:1px solid var(--rule)}
.jifs div{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:1rem;border-bottom:1px solid var(--rule)}
.jifs dt{font-family:var(--data);font-size:2.7rem;line-height:.8;color:var(--gold)}
.jifs dd{margin:0;color:var(--smoke)}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.75rem 2.5rem;margin-top:1.75rem}
.quotes blockquote{margin:0;padding-left:1.2rem;border-left:3px solid var(--gold);font-style:italic;font-size:clamp(1.3rem,1.8vw,1.5rem);line-height:1.38}
.quotes blockquote p{color:var(--bone)}
.quotes footer{margin-top:.7rem;font-style:normal;font-size:1.02rem;color:var(--smoke)}

/* ledger + press */
.proof{background:var(--ink-2);border-block:1px solid var(--rule)}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:flex;align-items:baseline;gap:.8rem;padding-block:.6rem}
.ledger .dots{flex:1 1 1.5rem;min-width:1.5rem;border-bottom:2px dotted rgba(212,160,23,.45);transform:translateY(-.32em)}
.ledger .v{font-size:clamp(2rem,3.4vw,2.8rem);color:var(--gold)}
.press-h{margin-top:2.25rem;font-size:1.6rem}
.press{list-style:none;margin:1rem 0 0;padding:0;columns:2 15rem;column-gap:2.25rem}
.press li{break-inside:avoid;padding-block:.55rem;border-top:1px solid var(--rule);font-size:1.12rem;line-height:1.35}
.press li span{display:block;color:var(--smoke);font-style:italic;font-size:1.02rem}
.press-a{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(212,160,23,.5);text-decoration-thickness:1px;text-underline-offset:.2em}
.press-a:hover{color:var(--gold-light)}
@media (max-width:860px){.proof-grid{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq h2{margin-bottom:1.5rem}
.faq-list{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;gap:1rem;align-items:center;padding:1.15rem 0;font-size:clamp(1.3rem,1.9vw,1.55rem);font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--data);font-size:2rem;line-height:1;color:var(--gold);text-align:center;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-light)}
.ans{padding:0 2.5rem 1.35rem 0}
.ans p{color:var(--smoke)}

/* related */
.related{padding-top:clamp(3rem,7vw,5rem)}
.related h2{margin-bottom:1.5rem}
.rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem}
.rel a{display:grid;gap:.45rem;height:100%;padding:1.3rem 1.4rem 1.5rem;background:var(--ink-2);border:1px solid var(--rule);text-decoration:none;transition:border-color .2s}
.rel a:hover{border-color:var(--gold-light)}
.r-k{font-style:italic;color:var(--gold-light);font-size:1.05rem}
.r-t{font-size:1.4rem;line-height:1.2;font-weight:600}

/* footer */
.foot{background:var(--bar);border-top:1px solid var(--rule);padding-block:4rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2.5rem 2rem}
.foot-logo img{width:min(280px,100%)}
.foot p{font-size:1.08rem;color:var(--smoke)}
.foot-brand p{margin-top:1rem}
.foot-h{margin:0 0 .75rem;font-style:italic;color:var(--bone)!important;font-size:1.15rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot ul a{text-decoration:none;color:var(--smoke);font-size:1.08rem}
.foot ul a:hover{color:var(--gold-light)}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.fine p{margin:0;font-size:1rem;color:var(--dim)}
.fine a{color:inherit}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* YouTube: thumbnail first, the player loads on click */
.watch-yt h2{margin-bottom:1.6rem}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(1.2rem,3vw,2rem)}
.yt-grid.one{max-width:760px}
.yt{margin:0}
.yt-play,.yt iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--bar);padding:0;cursor:pointer;overflow:hidden}
.yt-play img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.yt-play:hover img{opacity:1}
.yt-btn{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--ink)}
.yt-btn svg{width:1.5rem;height:1.5rem;margin-left:.2rem}
.yt figcaption{margin-top:.8rem;color:var(--smoke);font-size:1.1rem;line-height:1.45}
.yt figcaption strong{display:block;color:var(--bone);font-size:1.25rem}