/* yanaross.com
   Layout: a theatre programme, not a portfolio grid. Titles large in condensed type,
   dates and venues in a quiet mono like a premiere slip, credits as a cast list. */
:root{
  --paper:#EDEEEA;
  --ink:#121419;
  --muted:#5B5F68;
  --rule:#C5C8C2;
  --tile:#D8DAD4;
  --accent:#2236C2;
  --on-accent:#FFFFFF;
  --display:"Archivo Variable","Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4 Variable","Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101115; --ink:#E9EAE6; --muted:#9A9EA8; --rule:#2B2E35; --tile:#1C1E24; --accent:#8F9DFF; --on-accent:#0B0C10;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#101115; --ink:#E9EAE6; --muted:#9A9EA8; --rule:#2B2E35; --tile:#1C1E24; --accent:#8F9DFF; --on-accent:#0B0C10;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);padding-top:env(safe-area-inset-top,0px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.label{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spacer{height:64px}
.arrow{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:13px}
.arrow:hover{text-decoration:underline}

/* Header */
header.site{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;padding-block:28px 20px}
.mark{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
nav.main{display:flex;gap:24px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
nav.main a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
nav.main a:hover{border-color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}

/* Home hero */
.hero{padding-block:clamp(24px,6vw,72px) clamp(32px,6vw,64px);border-bottom:1px solid var(--ink)}
.hero h1{font-family:var(--display);font-stretch:62%;font-weight:850;text-transform:uppercase;line-height:.82;letter-spacing:-.005em;font-size:clamp(5rem,22vw,17rem)}
.hero .role{margin:22px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.lede{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;max-width:36ch;margin:28px 0 0;text-wrap:pretty}

/* Now playing */
.now{padding-block:32px 8px}
.now-head{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.now-head .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.now-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--ink)}
.now-item{display:flex;flex-direction:column;gap:10px;padding-block:20px 24px;border-bottom:1px solid var(--rule);min-width:0}
.now-item .t{font-family:var(--display);font-stretch:70%;font-weight:750;font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:.95;text-decoration:none;text-wrap:balance}
.now-item .t:hover{color:var(--accent)}
.now-item .by{font-style:italic;color:var(--muted);margin-top:-4px}
.now-item .v{font-family:var(--mono);font-size:13px;color:var(--muted);line-height:1.5}
.tickets{align-self:flex-start;display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--on-accent);background:var(--accent);padding:9px 14px;border-radius:2px;margin-top:4px}
.tickets:hover{background:var(--ink);color:var(--paper)}

/* Upcoming */
.upcoming{padding-block:24px 8px}
.season{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.up-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.up-list li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) minmax(0,18rem);gap:4px 24px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--rule)}
.up-list .d{font-family:var(--mono);font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.up-list .t{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1}
.up-list .t.tba{color:var(--muted);font-weight:500}
.up-list .by{display:block;font-family:var(--serif);font-stretch:100%;font-weight:400;font-style:italic;font-size:1rem;color:var(--muted);margin-top:4px}
.up-list .v{font-family:var(--mono);font-size:13px;color:var(--muted);line-height:1.45}

/* Repertoire list */
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:28px 12px}
.section-head a{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-decoration:none;color:var(--accent)}
.rep{list-style:none;margin:0;padding:0}
.rep li{border-top:1px solid var(--rule)}
.rep li:last-child{border-bottom:1px solid var(--rule)}
.rep a,.rep .row{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,17rem);gap:4px 24px;align-items:baseline;padding-block:14px;text-decoration:none}
.rep .yr{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.rep .t{font-family:var(--display);font-stretch:70%;font-weight:700;font-size:clamp(2rem,6vw,4.4rem);line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.rep .by{display:block;font-family:var(--serif);font-stretch:100%;font-weight:400;font-style:italic;font-size:1rem;letter-spacing:0;margin-top:6px;color:var(--muted)}
.rep .v{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--muted)}
.rep a:hover .t{color:var(--accent)}

/* Work index */
.page-title{font-family:var(--display);font-stretch:62%;font-weight:850;text-transform:uppercase;font-size:clamp(3.5rem,13vw,9rem);line-height:.85;padding-block:clamp(16px,4vw,40px) 8px}
.table-wrap{overflow-x:auto}
.index{width:100%;border-collapse:collapse;margin-block:20px 64px}
.index th{text-align:left;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 16px 10px 0;border-bottom:1px solid var(--ink)}
.index td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.index td.y{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;width:4.5rem}
.index td.ti{font-family:var(--display);font-stretch:75%;font-weight:650;font-size:1.35rem;line-height:1.15}
.index td.ti a{text-decoration:none;border-bottom:1px solid var(--accent);color:var(--accent)}
.index td.ti a:hover{border-bottom-width:2px}
.index td.au{font-style:italic;color:var(--muted)}
.index td.ve{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tag{display:inline-block;font-family:var(--mono);font-stretch:100%;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--muted);color:var(--muted);padding:1px 6px;margin-left:8px;vertical-align:3px;border-radius:2px}
.tag.now-tag{border-color:var(--accent);color:var(--accent)}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.filter button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--rule);padding:6px 12px;cursor:pointer;border-radius:2px}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Production page */
.prod-head{padding-block:clamp(16px,4vw,40px) 28px;border-bottom:1px solid var(--ink);display:flex;flex-direction:column;align-items:flex-start}
.prod-head h1{font-family:var(--display);font-stretch:62%;font-weight:850;text-transform:uppercase;font-size:clamp(4rem,17vw,13rem);line-height:.82;margin-top:16px;text-wrap:balance;overflow-wrap:anywhere}
.prod-head h1.long{font-size:clamp(3rem,10vw,8rem);line-height:.86}
.prod-head .by{font-style:italic;font-size:1.35rem;margin-top:14px;max-width:60ch}
.subtitle{font-size:1rem;color:var(--muted);margin-top:6px;max-width:70ch}
.slip{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.slip span:first-child{color:var(--ink);font-weight:500}
.prod-head .tickets{margin-top:20px}
.back{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--accent)}
.badges{display:flex;gap:8px;margin-top:14px}
.badges:empty{display:none}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:3px 8px;border-radius:2px}
.badge.quiet{background:transparent;color:var(--muted);border:1px solid var(--muted)}

.gallery{padding-block:28px 8px;display:flex;flex-direction:column;gap:10px}
.gallery:empty{display:none}
.gallery figure{margin:0}
.lead img{width:100%;max-height:78vh;object-fit:cover;background:var(--tile)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.thumbs a{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--tile)}
.thumbs img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.thumbs a:hover img{opacity:.82}
.credit{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:2px 0 0}

.prod-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;padding-block:28px 56px}
.prod-body .col{min-width:0}
.prod-body p{max-width:62ch;margin:0 0 1em}
.prod-body .about{font-size:1.2rem;line-height:1.5}
.warning{font-family:var(--mono);font-size:12.5px;color:var(--muted);border-left:2px solid var(--rule);padding-left:12px}
.links{display:flex;flex-direction:column;gap:8px;margin-top:8px;font-family:var(--mono);font-size:13px}
.links a{color:var(--accent);text-decoration:none}
.links a:hover{text-decoration:underline}
dl.credits{margin:0;display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:7px 18px;font-size:15.5px}
dl.credits dt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);padding-top:3px}
dl.credits dd{margin:0}
dl.credits dd.full{grid-column:1/-1}
.block{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.block h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.block video{width:100%;background:var(--tile)}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15.5px}
ul.plain a{color:var(--accent);text-decoration:none}
ul.plain a:hover{text-decoration:underline}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--ink);padding-block:20px 56px}
.pn a{display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.pn .next{text-align:right;align-items:flex-end}
.pn .pt{font-family:var(--display);font-stretch:70%;font-weight:700;font-size:clamp(1.4rem,3.5vw,2.2rem);line-height:1}
.pn a:hover .pt{color:var(--accent)}

/* Statement, quotes, press archive */
.statement{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.quotes{display:flex;flex-direction:column;gap:22px;margin:12px 0 36px;padding-left:18px;border-left:2px solid var(--accent)}
.pull{margin:0}
.pull blockquote{margin:0;font-size:1.2rem;line-height:1.45;font-style:italic;max-width:56ch;text-wrap:pretty}
.pull figcaption{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted)}
.archive-wrap{border-top:1px solid var(--rule);padding-block:8px 32px}
.press-archive summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;padding-block:14px;font-family:var(--display);font-stretch:75%;font-weight:700;font-size:1.6rem}
.press-archive summary::-webkit-details-marker{display:none}
.press-archive summary::before{content:"+";font-family:var(--mono);font-weight:400;color:var(--accent);width:1ch}
.press-archive[open] summary::before{content:"–"}
.press-archive .count{font-family:var(--mono);font-stretch:100%;font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.review{max-width:68ch;padding-block:18px 8px;border-top:1px solid var(--rule)}
.review h3{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.03em;margin-bottom:12px}
.review p{margin:0 0 1em;font-size:16px;line-height:1.6}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;padding-block:28px 72px}
.portrait{margin:0 0 28px;max-width:440px}
.portrait img{width:100%;background:var(--tile)}
.about-grid .bio p{font-size:1.2rem;line-height:1.55;max-width:58ch;margin:0 0 1em}
.facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.facts li,.facts p{font-size:15.5px;margin:0}
.facts li span{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:inline-block;min-width:4.5rem;font-variant-numeric:tabular-nums}

/* Contact */
.contact{padding-block:28px 96px;display:flex;flex-direction:column;align-items:flex-start}
.email{font-family:var(--display);font-stretch:70%;font-weight:700;font-size:clamp(2rem,7vw,4.5rem);line-height:1;overflow-wrap:anywhere;text-decoration:none}
.email:hover{color:var(--accent)}
.copy{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;padding:10px 16px;cursor:pointer;border-radius:2px}

footer.site{border-top:1px solid var(--ink);padding-block:20px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted);padding-bottom:max(32px,env(safe-area-inset-bottom,0px))}
footer.site a{text-decoration:none}

/* Lightbox */
dialog.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(8,9,12,.96);color:#E9EAE6}
dialog.lb::backdrop{background:rgba(8,9,12,.96)}
.lb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 16px}
.lb-inner img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;background:transparent;border:0;color:#E9EAE6;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:14px 16px}
.lb .lb-close{top:max(8px,env(safe-area-inset-top,0px));right:8px}
.lb .lb-prev{left:8px;top:50%;transform:translateY(-50%);font-size:28px}
.lb .lb-next{right:8px;top:50%;transform:translateY(-50%);font-size:28px}
.lb .lb-count{position:absolute;bottom:max(14px,env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-family:var(--mono);font-size:12px;color:#9A9EA8}

@media (max-width:760px){
  .now-list{grid-template-columns:minmax(0,1fr)}
  .up-list li{grid-template-columns:minmax(0,1fr)}
  .rep a,.rep .row{grid-template-columns:3.4rem minmax(0,1fr)}
  .rep .v{grid-column:2}
  .prod-body,.about-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index thead{display:none}
  .index tr{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:2px 12px;padding-block:12px;border-bottom:1px solid var(--rule)}
  .index td{padding:0;border:0}
  .index td.au,.index td.ve{grid-column:2}
  dl.credits{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .rep .t,nav.main a,.pn .pt,.now-item .t{transition:color .15s ease,border-color .15s ease}
}
@media (prefers-reduced-motion:reduce){
  .thumbs img{transition:none}
}