:root{--ink:#fff;--olive:#2b3927;--accent:#d8e7ad;--line:rgba(255,255,255,.27);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--olive)}body{margin:0;color:var(--ink);background:#11150f}a{color:inherit;text-decoration:none}.skip-link{position:fixed;left:1rem;top:-4rem;z-index:40;padding:.7rem 1rem;background:#fff;color:#111}.skip-link:focus{top:1rem}
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;height:72px;padding:0 clamp(1.5rem,3.5vw,4rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-transform:uppercase;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-shadow:0 1px 10px rgba(0,0,0,.75)}.monogram{justify-self:start;border:1px solid currentColor;width:37px;height:37px;display:grid;place-items:center}nav{display:flex;gap:clamp(1.5rem,2.7vw,3.2rem)}nav a,.socials a{padding:.8rem 0;border-bottom:1px solid transparent;transition:border-color .2s}nav a:hover,nav a:focus-visible,.socials a:hover,.socials a:focus-visible{border-color:currentColor}.socials{justify-self:end;display:flex;gap:1rem;align-items:center}.socials a{display:grid;place-items:center}.socials svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}.socials svg .fill{fill:currentColor;stroke:none}.socials svg .play{fill:#2b3927;stroke:none}
.hero{position:relative;isolation:isolate;min-height:112svh;overflow:clip}.portrait{position:fixed;z-index:-4;inset:0;background-color:#263522;background-image:url("claudius-portrait.jpg");background-repeat:no-repeat;background-size:contain;background-position:center center}.shade{position:fixed;z-index:-3;inset:0;background:linear-gradient(90deg,rgba(9,17,8,.27) 0%,rgba(10,18,9,.1) 42%,rgba(0,0,0,0) 66%)}
.hero-content{position:relative;z-index:3;padding-top:clamp(7.2rem,13vh,9rem);padding-bottom:clamp(4rem,8vh,7rem);margin-left:clamp(2rem,3.5vw,4.3rem);width:min(52vw,760px);text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.75)}.name,.genre{margin:0;font-size:clamp(1.6rem,2.85vw,3.15rem);font-weight:600;line-height:1;letter-spacing:.015em}.name{margin-bottom:.16em}h1{margin:0;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(3.25rem,4.8vw,5.65rem);font-weight:800;line-height:.92;letter-spacing:-.018em;white-space:nowrap}.genre{margin-top:.24em;color:var(--accent)}
.dates-desktop{margin-top:1.05rem;width:min(35rem,42vw)}.date-row{padding:.72rem 0 .68rem;border-top:1px solid var(--line);text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.78)}.date-primary,.date-secondary{display:grid;align-items:baseline}.date-primary{grid-template-columns:auto 1.2rem 1fr;font-size:clamp(.94rem,1.14vw,1.12rem);letter-spacing:.045em}.date-secondary{grid-template-columns:1fr auto;margin-top:.18rem;font-size:.69rem;letter-spacing:.14em}.date-secondary a{font-weight:700;padding:.22rem .05rem;transition:transform .2s ease}.date-secondary a:hover,.date-secondary a:focus-visible{transform:translateX(.3rem)}.scroll-cue,.mobile-dates{display:none}
.future{min-height:86vh;padding:clamp(5rem,12vw,10rem) clamp(1.4rem,7vw,8rem);display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:4rem;background:rgba(17,22,18,.97);position:relative;z-index:8}.future h2{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.035em;margin:.5rem 0 0;text-transform:uppercase}.future>p{max-width:30rem;font-size:1.1rem;line-height:1.55}footer{position:relative;z-index:8;display:flex;justify-content:space-between;padding:2rem clamp(1.4rem,5vw,5.5rem);background:#101310;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:900px) and (min-width:761px){.hero-content{width:54vw}h1{font-size:4.35vw}}
@media(max-width:760px){.site-header{height:60px;grid-template-columns:1fr auto;padding:0 1rem}.monogram{width:33px;height:33px;font-size:.7rem}nav{display:none}.socials{gap:.85rem}.hero{min-height:100svh}.portrait{position:absolute;height:63svh;background-size:auto 100%;background-position:72% center}.shade{position:absolute;background:linear-gradient(180deg,rgba(22,31,23,.01) 33%,rgba(22,31,23,.94) 65%,var(--olive) 80%)}.hero-content{position:relative;padding:0;top:auto;margin:0 1.1rem;padding-top:64svh;padding-bottom:5.5rem;width:auto}.name,.genre{font-size:clamp(1.15rem,5.4vw,1.55rem)}h1{font-size:clamp(2.55rem,10.8vw,4rem);letter-spacing:-.012em;white-space:normal}.dates-desktop{display:none}.scroll-cue{display:flex;position:absolute;z-index:5;left:1.1rem;right:1.1rem;bottom:1.2rem;justify-content:space-between;padding-top:.7rem;border-top:1px solid var(--line);text-transform:uppercase;font-size:.7rem;letter-spacing:.16em}.mobile-dates{display:block;position:relative;z-index:8;padding:4.2rem 1.1rem 5rem;background:var(--olive)}.mobile-dates h2{margin:.25rem 0 2rem;font-size:clamp(3.3rem,16vw,5.4rem);line-height:.9;letter-spacing:-.025em;text-transform:uppercase}.date-row{padding:1rem 0 .9rem}.date-primary{font-size:1.05rem}.date-secondary{font-size:.69rem}.future{min-height:70vh;padding:5rem 1.1rem;display:block}.future h2{font-size:clamp(2.8rem,14vw,5rem)}.future>p{margin-top:3rem;font-size:1rem}footer{gap:1rem;flex-direction:column;padding:2rem 1.1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.date-row{border-top:1px solid var(--line)}
@media(min-width:761px){
  .hero{min-height:100svh}
  .hero-content{position:fixed;top:clamp(7.2rem,13vh,9rem);padding:0;margin-left:clamp(2rem,3.5vw,4.3rem)}
  .dates-desktop{max-height:calc(100svh - 335px);overflow-y:auto;overscroll-behavior:contain;padding-right:.8rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent}
  .date-primary{grid-template-columns:8.5rem 1fr}
}
.scrabble-title.name-scrabble{
  grid-template-columns:repeat(8,var(--tile));
  width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 14px);
}
.name-scrabble .horizontal{transform:translateY(var(--shift-y,0)) rotate(var(--turn))}
.name-scrabble+.genre{margin-top:1.45rem;text-align:center}
.event-note{font-style:normal;color:var(--accent);font-weight:700}
.event-status{justify-self:start;color:var(--accent);font-size:.69rem;font-weight:800;letter-spacing:.12em}
.dates-error,.dates-empty{padding:1rem 0;border-top:1px solid var(--line);font-size:.8rem;letter-spacing:.08em}
@media(max-width:760px){
  .scrabble-title.name-scrabble{
    --tile:min(10.4vw,3.7rem);
    grid-template-columns:repeat(8,var(--tile));
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 14px);
  }
  .name-scrabble+.genre{width:100%;margin-top:1.3rem;text-align:center}
}

.portrait{background-color:#2b3927;background-image:url("claudius-portrait.jpg"),linear-gradient(90deg,#1e2b1c 0%,#2a3926 45%,#35472f 100%);background-repeat:no-repeat,no-repeat;background-size:auto 100%,100% 100%;background-position:right center,center}
.portrait::before,.portrait::after{content:none!important}
.about-grid,.contact{display:grid;grid-template-columns:minmax(10rem,.55fr) minmax(20rem,1fr);gap:clamp(3rem,8vw,9rem);align-items:start}
.about .eyebrow,.contact .eyebrow{margin:.25rem 0 0;font-size:.76rem;font-weight:600;line-height:1.2;letter-spacing:.28em}
.contact-address{margin:0;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.62}
.contact-address a{border-bottom:1px solid currentColor}
@media(max-width:760px){.about-grid,.contact{display:grid;grid-template-columns:1fr;gap:2rem}.portrait{background-size:auto 100%,100% 100%;background-position:center,center}.about .eyebrow,.contact .eyebrow{font-size:.76rem}.contact-address{font-size:1rem}}
.about,.contact,.legal{position:relative;z-index:8;background:rgba(16,21,17,.98);padding:clamp(5rem,10vw,9rem) clamp(1.4rem,7vw,8rem)}
.about-grid{display:grid;grid-template-columns:minmax(18rem,1fr) minmax(20rem,1fr);gap:clamp(3rem,8vw,9rem);align-items:start}
.about h2{margin:.6rem 0 0;font-size:clamp(3.5rem,7vw,7rem);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.about-copy{max-width:43rem;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.62}
.about-copy p{margin:0 0 1.25em}
.contact{background:#d5e4a6;color:#182016}
.contact h2{margin:1rem 0 0;font-size:clamp(2rem,5.3vw,5.5rem);letter-spacing:-.035em}
.contact h2 a{border-bottom:2px solid currentColor}
.legal{padding-top:5rem;padding-bottom:5rem;font-size:.93rem;line-height:1.6}
.legal h2{font-size:clamp(2rem,4vw,4rem);margin:0 0 2rem;text-transform:uppercase}
.legal p{max-width:48rem}
@media(max-width:760px){.about,.contact,.legal{padding:4.5rem 1.1rem}.about-grid{display:block}.about h2{margin-bottom:2.5rem}.contact h2{font-size:clamp(1.55rem,7vw,3rem)}}
.date-row{display:grid;grid-template-columns:8.2rem minmax(10rem,14rem) auto;column-gap:clamp(.65rem,1.4vw,1.15rem);align-items:center}
.date-value{font-size:clamp(.94rem,1.14vw,1.12rem);letter-spacing:.045em}
.date-place{display:flex;flex-direction:column;gap:.18rem}
.date-place strong{font-size:clamp(.94rem,1.14vw,1.12rem);letter-spacing:.045em}
.date-place span{font-size:.69rem;letter-spacing:.14em}
.ticket-link{justify-self:start;font-size:.69rem;font-weight:700;letter-spacing:.14em;padding:.3rem .05rem;transition:transform .2s ease}
.ticket-link:hover,.ticket-link:focus-visible{transform:translateX(.3rem)}
.about h2{font-size:clamp(2.6rem,5vw,5rem);font-weight:500;line-height:.94;letter-spacing:-.02em}
.contact h2{font-size:clamp(1.8rem,3.7vw,3.8rem);font-weight:500;letter-spacing:-.02em}
.legal-page{min-height:100vh;background:linear-gradient(135deg,#1b2519 0%,#31402c 100%);color:var(--ink)}
.legal-header{height:76px;padding:0 clamp(1.4rem,5vw,5.5rem);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font-size:.72rem;font-weight:700;letter-spacing:.14em}
.legal-main{width:min(58rem,calc(100% - 2.2rem));margin:0 auto;padding:clamp(4rem,10vw,8rem) 0}
.legal-main>h1{white-space:normal;font-size:clamp(3.6rem,9vw,8.5rem);margin:0 0 clamp(4rem,8vw,7rem);letter-spacing:-.025em}
.legal-main section{max-width:48rem;padding:2rem 0;border-top:1px solid var(--line)}
.legal-main section h2{font-size:1rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 1.2rem}
.legal-main section p{font-size:1rem;line-height:1.65;margin:.6rem 0}
.legal-main section a{border-bottom:1px solid currentColor}
@media(max-width:760px){.date-row{grid-template-columns:6.8rem 1fr auto;column-gap:.65rem}.date-value,.date-place strong{font-size:.92rem}.date-place span,.ticket-link{font-size:.62rem}.about h2{font-size:clamp(2.5rem,12vw,4.2rem);font-weight:500}.contact h2{font-size:clamp(1.45rem,6.8vw,2.7rem)}.legal-header{height:68px;padding:0 1.1rem}.legal-main{padding-top:4rem}}
@media(min-width:761px){
  .hero{min-height:100svh;overflow:hidden}
  .portrait{position:absolute;z-index:-2;inset:0;overflow:hidden;background-image:none;background-color:#293825}
  .portrait::before,.portrait::after{content:"";position:absolute;inset:-3%;background-image:url("claudius-portrait.jpg");background-repeat:no-repeat}
  .portrait::before{background-size:cover;background-position:center;filter:blur(34px) saturate(.92);transform:scale(1.08)}
  .portrait::after{inset:0;background-size:contain;background-position:center}
  .shade{position:absolute;z-index:-1}
  .hero-content{position:relative;top:auto;padding-top:clamp(7.2rem,13vh,9rem);padding-bottom:clamp(5rem,9vh,8rem)}
  .dates-desktop{max-height:none;overflow:visible;padding-right:0;scrollbar-width:none}
}
/* Final layout overrides */
.portrait{background-color:#2b3927;background-image:url("claudius-portrait.jpg"),linear-gradient(90deg,#1e2b1c 0%,#2a3926 45%,#35472f 100%);background-repeat:no-repeat,no-repeat;background-size:auto 100%,100% 100%;background-position:right center,center}
.portrait::before,.portrait::after{content:none!important;background-image:none!important}
.about-grid,.contact{display:grid;grid-template-columns:minmax(10rem,.55fr) minmax(20rem,1fr);gap:clamp(3rem,8vw,9rem);align-items:start}
.about .eyebrow,.contact .eyebrow{margin:.25rem 0 0;font-size:.76rem;font-weight:600;line-height:1.2;letter-spacing:.28em}
.contact-address{margin:0;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.62}
@media(max-width:760px){.about-grid,.contact{grid-template-columns:1fr;gap:2rem}.portrait{background-size:auto 100%,100% 100%;background-position:center,center}.contact-address{font-size:1rem}}
.portrait{background-color:#2b3927;background-image:url("claudius-wide-v1.png");background-repeat:no-repeat;background-size:cover;background-position:center top}
@media(max-width:760px){.portrait{background-image:url("claudius-portrait.jpg");background-size:auto 100%;background-position:center}}
@media(min-width:761px){
  .portrait{background-size:auto 100%;background-position:right center}
  .dates-desktop{margin-left:clamp(1.5rem,5vw,5rem)}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.title-scrabble{display:block;width:min(38vw,520px);height:auto;max-height:46vh;object-fit:contain;object-position:left top;margin:.55rem 0 .2rem;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
@media(max-width:760px){.title-scrabble{width:min(88vw,470px);max-height:42vh;margin:.5rem 0 .15rem}}

/* Code-native wooden tiles: no bitmap transparency grid can appear. */
.scrabble-title{
  --tile:clamp(3rem,4.8vw,4.75rem);
  display:grid;
  grid-template-columns:repeat(7,var(--tile));
  grid-template-rows:repeat(9,var(--tile));
  gap:2px;
  width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 12px);
  pointer-events:none;
}
.tile{
  grid-column:var(--col);
  grid-row:var(--row);
  display:grid;
  place-items:center;
  width:var(--tile);
  height:var(--tile);
  color:#11130f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(1.8rem,2.95vw,2.9rem);
  font-weight:700;
  line-height:1;
  text-shadow:none;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.32),transparent 38%),
    repeating-linear-gradient(7deg,rgba(116,66,22,.045) 0 1px,transparent 1px 9px),
    linear-gradient(145deg,#eec98b 0%,#d9a95f 100%);
  border:1px solid rgba(105,61,20,.55);
  border-radius:10%;
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.5),inset -3px -4px 5px rgba(91,47,13,.2),0 4px 2px rgba(24,13,5,.34),0 8px 10px rgba(0,0,0,.18);
  transform:rotate(var(--turn));
}
.mobile-h{display:none}
@media(min-width:761px){
  .hero-content{width:min(61vw,900px)}
  .name,.genre{font-size:clamp(1.6rem,2.2vw,2.3rem)}
  .scrabble-schedule{
    --tile:clamp(3rem,4.8vw,4.75rem);
    position:relative;
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 12px);
    margin-top:.12rem;
    padding-top:calc(var(--tile) + 8px);
  }
  .scrabble-title{
    --tile:inherit;
    position:absolute;
    z-index:1;
    top:calc(0px - var(--tile) - var(--tile) - 4px);
    left:0;
  }
  .scrabble-schedule .genre{position:relative;z-index:2;margin-top:.32rem}
  .scrabble-schedule .dates-desktop{
    position:relative;
    z-index:2;
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 6px);
    min-width:0;
    max-width:none;
    margin-left:0;
  }
  .scrabble-schedule .date-row{
    grid-template-columns:minmax(5rem,1.05fr) minmax(6.8rem,1.45fr) auto;
    column-gap:clamp(.4rem,.75vw,.75rem);
  }
}
@media(max-width:760px){
  .scrabble-title{
    --tile:min(9.4vw,3.45rem);
    position:relative;
    grid-template-columns:repeat(9,var(--tile));
    grid-template-rows:repeat(2,var(--tile));
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 16px);
    margin:.7rem 0 .45rem;
  }
  .scrabble-title .horizontal{grid-row:1!important}
  .scrabble-title .vertical,.scrabble-title .mobile-h{
    display:grid;
    grid-column:var(--mobile-col);
    grid-row:2;
    transform:translateY(var(--mobile-y)) rotate(var(--mobile-turn));
  }
  .tile{font-size:min(5.8vw,2.1rem)}
}

@media(min-width:761px){
  .scrabble-schedule{
    --tile:clamp(3rem,4.5vw,4.5rem);
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 16px);
    margin-top:.35rem;
    padding-top:0;
  }
  .scrabble-title{
    --tile:inherit;
    position:relative;
    inset:auto;
    grid-template-columns:repeat(9,var(--tile));
    grid-template-rows:repeat(2,var(--tile));
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 16px);
  }
  .scrabble-title .horizontal{grid-row:1!important}
  .scrabble-title .vertical,.scrabble-title .mobile-h{
    display:grid;
    grid-column:var(--mobile-col);
    grid-row:2;
    transform:translateY(var(--mobile-y)) rotate(var(--mobile-turn));
  }
  .scrabble-schedule .genre{margin-top:.7rem}
  .scrabble-schedule .name-scrabble+.genre{
    width:calc(var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + var(--tile) + 14px);
    margin-top:1.45rem;
    text-align:center;
  }
  .scrabble-schedule .dates-desktop{
    width:min(35rem,50vw);
    max-width:100%;
  }
  .scrabble-schedule .date-row{
    grid-template-columns:8.2rem minmax(10rem,14rem) auto;
    column-gap:clamp(.65rem,1.4vw,1.15rem);
  }
}

.title-wordmark{
  display:block;
  width:min(55vw,880px);
  max-width:100%;
  height:auto;
  margin:.28rem 0 .45rem;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.28));
}
@media(min-width:761px){
  .hero-content{width:min(61vw,920px)}
  .title-wordmark{width:min(56vw,880px)}
  .hero-content>.dates-desktop{margin-left:0}
}
@media(max-width:760px){
  .title-wordmark{width:100%;margin:.38rem 0 .5rem}
}

/* Mobile hero: image-led first screen with one clear dates heading. */
@media(max-width:760px){
  .hero{
    isolation:auto;
    overflow:visible;
  }
  .hero .portrait{
    position:fixed;
    z-index:0;
    inset:0;
    height:100svh;
    background-size:cover;
    background-position:center top;
  }
  .hero .shade{
    position:fixed;
    z-index:1;
    inset:0;
    background:linear-gradient(180deg,rgba(22,31,23,.01) 28%,rgba(22,31,23,.52) 62%,rgba(22,31,23,.82) 100%);
  }
  .hero-content{
    position:relative;
    z-index:3;
    padding-top:75svh;
  }
  .mobile-dates{
    min-height:100svh;
    background:linear-gradient(180deg,rgba(28,39,26,.42),rgba(22,31,23,.78));
  }
  .mobile-dates h2{
    margin:0 0 1.7rem;
    font-size:clamp(2rem,9vw,3.2rem);
    line-height:1;
    letter-spacing:.02em;
  }
}

.about .about-identity .eyebrow,.contact .contact-identity .eyebrow{margin:0}
@media(max-width:760px){
  .about .about-identity .eyebrow,.contact .contact-identity .eyebrow{margin:0}
}

/* Microphone is intentionally omitted on mobile. */
.microphone{
  display:none;
}
@media(min-width:761px){
 .microphone{
  display:block;
  position:absolute;
  z-index:2;
  top:auto;
  right:auto;
  bottom:max(-135px,-12svh);
  left:49.5%;
  height:min(855px,82svh);
  width:auto;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.32));
 }
}