/* ============ tokens ============ */
:root{
  --ink:#191320;
  --ink-2:#241A2F;
  --ink-3:#0F0B14;
  --paper:#EFEAE9;
  --paper-2:#E2DAD9;
  --rose:#C0325F;
  --rose-hi:#F08FA8;
  --rose-lo:#8E1F45;
  --slate:#5C5464;

  --display:"Anton", Impact, sans-serif;
  --util:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Newsreader", Georgia, serif;

  --pad:clamp(1.15rem, 5vw, 4rem);
  --gap:clamp(1.5rem, 3.2vw, 3.25rem);
  --hair:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  --hair-lite:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.62;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; line-height:.94;
  text-transform:uppercase; letter-spacing:.005em}
p{margin:0 0 1.05rem}

.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--pad)}
.band{padding-block:clamp(3.5rem, 8vw, 6.5rem)}
.band--ink{background:var(--ink); color:var(--paper)}
.band--ink2{background:var(--paper-2)}

.h1{font-size:clamp(3.2rem, 12vw, 8rem)}
.h2{font-size:clamp(2.1rem, 5.2vw, 3.9rem)}
.h3{font-size:clamp(1.25rem, 2.4vw, 1.75rem)}
.lead{font-size:clamp(1.08rem, 1.6vw, 1.3rem); max-width:56ch; color:var(--slate)}
.band--ink .lead{color:color-mix(in srgb, var(--paper) 76%, transparent)}
.muted{color:var(--slate)}
.band--ink .muted{color:color-mix(in srgb, var(--paper) 62%, transparent)}

/* ============ signature: marquee bulb rule ============ */
.bulbs{
  height:10px; margin:0; border:0;
  background-image:radial-gradient(circle at 5px 5px, var(--rose) 3px, transparent 3.4px);
  background-size:24px 10px; background-repeat:repeat-x;
}
.band--ink .bulbs, .bulbs--lit{
  background-image:radial-gradient(circle at 5px 5px, var(--rose-hi) 3px, transparent 3.4px);
}

/* ============ eyebrow ============ */
.eyebrow{
  font-family:var(--util); font-size:.95rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--rose-lo);
  margin:0 0 .85rem;
}
.band--ink .eyebrow{color:var(--rose-hi)}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--util); font-size:1.02rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:.7rem 1.35rem; border:2px solid var(--rose); color:var(--rose-lo);
  background:transparent; transition:background .22s, color .22s, border-color .22s;
}
.btn:hover{background:var(--rose); color:#fff; border-color:var(--rose)}
.btn--solid{background:var(--rose); color:#fff}
.btn--solid:hover{background:var(--rose-lo); border-color:var(--rose-lo)}
.btn--lite{border-color:var(--rose-hi); color:var(--rose-hi)}
.btn--lite:hover{background:var(--rose-hi); color:var(--ink-3); border-color:var(--rose-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--rose); outline-offset:2px
}

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:60; background:var(--ink-3); color:var(--paper);
  border-bottom:3px solid var(--rose);
}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.nav__name{
  font-family:var(--display); text-transform:uppercase; font-size:1.15rem;
  letter-spacing:.04em; text-decoration:none; white-space:nowrap;
}
.nav__name span{color:var(--rose-hi)}
.nav__links{display:flex; align-items:center; gap:1.35rem; list-style:none; margin:0; padding:0}
.nav__links a{
  font-family:var(--util); font-size:1rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; padding-block:.35rem;
  border-bottom:2px solid transparent;
}
.nav__links a:hover{border-bottom-color:var(--rose-hi)}
.nav__links .btn{padding:.45rem 1rem; font-size:.95rem}
.nav__toggle{
  display:none; background:none; border:2px solid var(--rose); color:var(--paper);
  font-family:var(--util); font-size:1rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:.4rem .85rem; cursor:pointer;
}
@media (max-width:960px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute; top:64px; left:0; right:0; display:none; flex-direction:column;
    align-items:stretch; gap:0; background:var(--ink-3); padding:.25rem var(--pad) 1.25rem;
    border-bottom:3px solid var(--rose);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{display:block; padding:.8rem 0; border-bottom:var(--hair-lite)}
  .nav__links .btn{margin-top:1rem; justify-content:center; border-bottom:2px solid var(--rose)}
}

/* ============ hero ============ */
.hero{background:var(--ink-3); color:var(--paper); overflow:hidden}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--gap); align-items:end;
  padding-block:clamp(2.5rem,6vw,4.5rem) 0;
}
.hero h1{font-size:clamp(3.4rem, 13vw, 9rem); line-height:.82; margin-bottom:1.1rem}
.hero h1 span{display:block; color:var(--rose-hi)}
.hero__roles{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; list-style:none; margin:0 0 1.4rem; padding:0;
  font-family:var(--util); font-size:1.05rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.hero__roles li{display:flex; align-items:center; gap:1.1rem}
.hero__roles li+li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--rose)}
.hero__body{max-width:44ch; color:color-mix(in srgb, var(--paper) 78%, transparent)}
.hero__actions{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.8rem 0 clamp(2.5rem,6vw,4rem)}
.hero__portrait{position:relative; align-self:end}
.hero__portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
  filter:grayscale(.15) contrast(1.04);
}
.hero__portrait .bulbs{position:absolute; top:-10px; left:0; right:0}
.hero__strip{
  border-top:3px solid var(--rose); background:var(--ink);
  font-family:var(--util); font-size:1rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.hero__strip .wrap{display:flex; flex-wrap:wrap; gap:.5rem 2rem; padding-block:.9rem;
  color:color-mix(in srgb, var(--paper) 72%, transparent)}
.hero__strip b{color:var(--rose-hi); font-weight:600}
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr; align-items:start}
  .hero__portrait{max-width:26rem; margin-top:.5rem}
  .hero__portrait img{aspect-ratio:5/4; object-position:center 15%}
  .hero__actions{margin-bottom:2rem}
}

/* ============ section head ============ */
.sechead{margin-bottom:clamp(1.8rem,4vw,3rem)}
.sechead .h2{margin-bottom:.9rem}
.sechead .bulbs{max-width:190px; margin-bottom:1.3rem}

/* ============ on stage ============ */
.stage{display:grid; gap:0}
.stage__item{
  display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;
  gap:1rem var(--gap); align-items:start;
  padding-block:1.6rem; border-top:var(--hair);
}
.stage__item:last-child{border-bottom:var(--hair)}
.stage__when{
  font-family:var(--util); font-size:1.15rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rose-lo); padding-top:.35rem;
}
.stage__item--next .stage__when{color:var(--rose)}
.stage__what h3{margin-bottom:.5rem}
.stage__what p{margin-bottom:.5rem}
.stage__where{
  font-family:var(--util); font-size:1.05rem; letter-spacing:.06em; color:var(--slate);
  margin:0; text-transform:uppercase;
}
.stage__go{align-self:center}
@media (max-width:820px){
  .stage__item{grid-template-columns:1fr}
  .stage__when{padding-top:0}
}

/* ============ lessons ============ */
.lessons__top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:var(--gap); align-items:center; margin-bottom:clamp(2rem,5vw,3.5rem)}
.lessons__top img{aspect-ratio:4/3; object-fit:cover}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.card{border-top:3px solid var(--rose); padding-top:1.1rem}
.card h3{font-size:1.35rem; margin-bottom:.6rem}
.card p{font-size:1.02rem; margin-bottom:.7rem}
.card ol{margin:0; padding-left:1.15rem; font-size:1.02rem}
.card li{margin-bottom:.3rem}
@media (max-width:900px){.lessons__top{grid-template-columns:1fr} .cards{grid-template-columns:1fr}}

/* ============ media ============ */
.reel{margin-bottom:var(--gap)}
.frame{position:relative; aspect-ratio:16/9; background:#000; border:1px solid color-mix(in srgb,var(--rose) 40%,transparent)}
.frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vidgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.vid{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
}
.vid__thumb{display:block; position:relative; aspect-ratio:16/9; background:#000; overflow:hidden}
.vid__thumb img{width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .25s, transform .4s}
.vid:hover .vid__thumb img{opacity:1; transform:scale(1.04)}
.vid__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:52px; height:52px; border-radius:50%; background:var(--rose);
  display:grid; place-items:center;
}
.vid__play::after{content:""; border-left:16px solid #fff; border-block:10px solid transparent; margin-left:4px}
.vid__label{
  display:block; margin-top:.55rem; font-family:var(--util); font-size:1.02rem;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.25;
}
.band--ink .vid__label{color:color-mix(in srgb,var(--paper) 84%,transparent)}
.audio{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.audio iframe{width:100%; height:120px; border:0}
@media (max-width:900px){.vidgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.vidgrid,.audio{grid-template-columns:1fr}}

/* ============ gallery ============ */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-top:var(--gap)}
.gallery a{display:block; overflow:hidden; background:var(--ink-3)}
.gallery img{aspect-ratio:3/2; object-fit:cover; transition:transform .45s ease, opacity .3s}
.gallery a:hover img{transform:scale(1.06); opacity:.9}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ============ biography ============ */
.bio{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:var(--gap)}
.bio__figure{margin:0; position:sticky; top:96px; align-self:start}
.bio__figure img{aspect-ratio:3/4; object-fit:cover}
.bio__figure figcaption{font-family:var(--util); font-size:1rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin-top:.6rem}
.chap{margin-bottom:2rem}
.chap h3{font-size:1.2rem; color:var(--rose-lo); margin-bottom:.7rem}
.bio details{margin-top:.5rem}
.bio summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--util); font-size:1.05rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rose-lo); padding:.5rem 0;
}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+"; font-family:var(--body); font-size:1.3rem; line-height:1}
.bio details[open] summary::after{content:"\2013"}
.trivia{border-left:3px solid var(--rose); padding:.2rem 0 .2rem 1.1rem; font-style:italic; color:var(--slate)}
@media (max-width:900px){.bio{grid-template-columns:1fr} .bio__figure{position:static; max-width:24rem}}

/* ============ credits / playbill ============ */
.tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem}
.tab{
  font-family:var(--util); font-size:1.02rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:.5rem 1rem; cursor:pointer;
  background:transparent; color:color-mix(in srgb,var(--paper) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--paper) 25%,transparent);
}
.tab:hover{color:var(--paper); border-color:var(--rose-hi)}
.tab[aria-selected="true"]{background:var(--rose); border-color:var(--rose); color:#fff}
.panel[hidden]{display:none}
.credit{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);
  gap:.2rem var(--gap); padding-block:1rem; border-top:var(--hair-lite); align-items:baseline;
}
.credit:last-child{border-bottom:var(--hair-lite)}
.credit__show{font-family:var(--display); text-transform:uppercase; font-size:1.22rem; line-height:1.1}
.credit__role{font-style:italic; color:color-mix(in srgb,var(--paper) 88%,transparent); font-size:1.02rem}
.credit__meta{
  font-family:var(--util); font-size:1rem; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 62%,transparent);
}
.credit__meta b{display:block; font-weight:500; color:color-mix(in srgb,var(--paper) 80%,transparent)}
.notecol{margin-top:1.6rem; font-size:1rem}
@media (max-width:820px){.credit{grid-template-columns:1fr; padding-block:1.15rem}}

/* ============ press ============ */
.press{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gap)}
.press a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:1.05rem; border-top:var(--hair); text-decoration:none;
}
.press a:hover .press__t{color:var(--rose-lo)}
.press__t{font-size:1.05rem; max-width:34ch}
.press__o{font-family:var(--util); font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap}
.pullquote{
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.6rem);
  line-height:1.05; color:var(--rose-lo); margin:0 0 1.5rem; max-width:20ch;
}
@media (max-width:820px){.press{grid-template-columns:1fr}}

/* ============ contact ============ */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap)}
.contact dl{display:grid; gap:1.2rem; margin:1.6rem 0 0}
.contact dt{font-family:var(--util); font-size:1rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rose-hi); margin-bottom:.15rem}
.contact dd{margin:0; font-size:1.1rem}
.contact dd a{text-decoration:none; border-bottom:1px solid var(--rose)}
.form{display:grid; gap:.9rem}
.field label{display:block; font-family:var(--util); font-size:1rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rose-hi); margin-bottom:.3rem}
.field input,.field textarea{
  width:100%; font:inherit; font-size:1rem; padding:.7rem .8rem;
  background:var(--paper); color:var(--ink); border:1px solid transparent;
}
.field textarea{min-height:130px; resize:vertical}
.form button{
  justify-self:start; font-family:var(--util); font-size:1.05rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:.7rem 1.5rem; cursor:pointer;
  background:var(--rose); color:#fff; border:2px solid var(--rose);
}
.form button:hover{background:var(--rose-lo); border-color:var(--rose-lo)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* ============ footer ============ */
.footer{background:var(--ink-3); color:var(--paper); padding-block:clamp(2.5rem,5vw,3.5rem)}
.footer__in{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between;
  align-items:center}
.social{display:flex; gap:.5rem; list-style:none; margin:0; padding:0}
.social a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid color-mix(in srgb,var(--rose) 55%,transparent); text-decoration:none;
  font-family:var(--util); font-size:.95rem; font-weight:600; letter-spacing:.06em;
}
.social a:hover{background:var(--rose); color:#fff; border-color:var(--rose)}
.footer small{font-family:var(--util); font-size:.98rem; letter-spacing:.1em;
  text-transform:uppercase; color:color-mix(in srgb,var(--paper) 55%,transparent)}

/* ============ print: the credits become a clean resume ============ */
@media print{
  .nav,.hero__portrait,.hero__actions,.hero__strip,.reel,.vidgrid,.audio,.gallery,
  .form,.social,.tabs,.stage__go,.bulbs,.press,.pullquote,.lessons__top img,.bio summary{display:none}
  body{background:#fff; color:#000; font-size:10.5pt; line-height:1.45}
  .hero,.band,.band--ink,.band--ink2,.footer{background:#fff !important; color:#000 !important;
    padding-block:.6rem}
  .hero__in{display:block; padding-block:0}
  .hero h1{font-size:2.4rem}
  .h2{font-size:1.5rem}
  .lead,.muted,.credit__meta,.credit__role,.credit__meta b,.stage__where,.eyebrow,.contact dt,.footer small{
    color:#000 !important}
  .panel[hidden]{display:block}
  .panel{break-inside:auto}
  .credit{border-top:1px solid #bbb; padding-block:.45rem; break-inside:avoid}
  .credit:last-child{border-bottom:1px solid #bbb}
  .credit__show{font-size:1rem}
  .contact dd a{border:0}
  a{text-decoration:none; color:#000}
  .sechead{margin-bottom:.8rem}
}

/* ============ motion ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .gallery img,.vid__thumb img{transition:none}
}