/* Well Made Plays · the homepage (/), loaded after house.css.
   The five pages are the homepage: their names stacked large, and the one
   in focus floods the screen with that page. Chosen by Dougie 2026-10-11.
   Two faces: Sohne Breit for display, Sohne for everything else. */

:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --t-l:clamp(1.35rem,2.2vw,2rem);
  --t-m:1.0625rem;
  --t-s:.875rem;
  --bar:clamp(16px,2vw,26px);
}
body.front{overflow-x:hidden;background:var(--bg);color:var(--fg)}
body.front.menu-open{overflow:hidden}
body.front ::selection{background:var(--yellow);color:var(--yellow-on)}
/* the ring takes the ink of the screen under it (cream on the ground and the
   photos, the plate's own pair on salmon, green and blue): home.js puts
   --plate and --on on <body> */
body.front :focus-visible{outline:2px solid var(--on,var(--fg));outline-offset:4px}

/* ---------- top bar ---------- */
.hb{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:var(--bar) var(--pad);pointer-events:none}
.hb>*{pointer-events:auto}
.hb-mark{font-family:var(--breit);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:var(--t-m);line-height:1;white-space:nowrap;
  color:var(--on,var(--fg));transition:color .5s var(--ease)}
.hb-act{display:flex;align-items:center;gap:8px}
/* the first step, one tap from the front door: the same cal.com link as the cream header */
.hb-call{display:inline-flex;align-items:center;font-weight:500;font-size:var(--t-m);min-height:44px;white-space:nowrap;
  color:var(--fg);background:var(--bg);border:1px solid var(--fg-38);padding:9px 20px;border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.hb-call:hover{background:var(--yellow);color:var(--yellow-on);border-color:var(--yellow)}
.hb-call:active{transform:scale(.96)}
.hb-menu{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:var(--t-m);min-height:44px;
  color:var(--bg);background:var(--fg);padding:10px 18px 10px 20px;border-radius:999px;transition:background .3s var(--ease),transform .3s var(--ease)}
.hb-menu:hover{background:var(--yellow);color:var(--yellow-on)}
.hb-menu:active{transform:scale(.96)}
.hb-menu i{display:grid;gap:4px;width:16px}
.hb-menu i::before,.hb-menu i::after{content:"";height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease)}
.hb-menu:hover i::before{transform:translateX(3px)}
.hb-menu:hover i::after{transform:translateX(-3px)}

/* ---------- full-screen menu ---------- */
.menu2{position:fixed;inset:0;z-index:100;background:var(--fg);color:var(--bg);overflow-y:auto;
  display:grid;grid-template-rows:auto 1fr auto;padding:var(--bar) var(--pad) clamp(20px,3vw,36px);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s linear .7s}
.menu2.open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
.menu2 ::selection{background:var(--bg);color:var(--fg)}
body.front .menu2 :focus-visible{outline-color:var(--bg)}
.m2-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.m2-top .hb-mark{color:var(--bg)}
.m2-close{font-weight:500;font-size:var(--t-m);min-height:44px;color:var(--fg);background:var(--bg);padding:10px 20px;border-radius:999px;transition:background .3s var(--ease)}
.m2-close:hover{background:var(--salmon);color:var(--salmon-on)}
.m2-list{align-self:center;display:flex;flex-direction:column;padding-block:clamp(20px,4vh,40px)}
.m2-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:20px;
  border-top:1px solid rgba(11,11,12,.16);padding-block:clamp(6px,1.2vh,14px);color:var(--bg)}
.m2-list a:last-child{border-bottom:1px solid rgba(11,11,12,.16)}
.m2-list .t{display:block;overflow:hidden;font-family:var(--breit);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,6.4vw,6rem);line-height:.98;letter-spacing:-.02em}
.m2-list .t>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease),color .25s}
.m2-list sup{font-family:var(--sans);font-weight:500;font-size:var(--t-s);letter-spacing:0;vertical-align:top;margin-left:10px;position:relative;top:.6em}
.m2-list .d{font-size:var(--t-s);color:rgba(11,11,12,.7);max-width:44ch;text-wrap:balance;text-align:right;opacity:0;transition:opacity .5s var(--ease)}
.menu2.open .m2-list .t>span{transform:none}
.menu2.open .m2-list .d{opacity:1}
.menu2.open .m2-list a:nth-child(1) .t>span{transition-delay:.12s}
.menu2.open .m2-list a:nth-child(2) .t>span{transition-delay:.17s}
.menu2.open .m2-list a:nth-child(3) .t>span{transition-delay:.22s}
.menu2.open .m2-list a:nth-child(4) .t>span{transition-delay:.27s}
.menu2.open .m2-list a:nth-child(5) .t>span{transition-delay:.32s}
.m2-list:hover a .t>span{color:rgba(11,11,12,.3)}
.m2-list a:hover .t>span,.m2-list a:focus-visible .t>span{color:var(--bg);transform:translateX(.08em)}
.m2-foot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;font-size:var(--t-s);color:rgba(11,11,12,.72)}
.m2-foot a{border-bottom:1px solid rgba(11,11,12,.3);padding-bottom:2px}
.m2-foot a:hover{color:var(--bg);border-color:var(--bg)}
.m2-foot .sp{margin-left:auto}
/* phones: the wordmark has the first row to itself and the two pills sit
   under it at the right, so nothing overlaps at 320; Close lands where Menu was */
@media(max-width:560px){
  .hb,.m2-top{flex-wrap:wrap;row-gap:10px}
  .hb-mark{flex:1 0 100%}
  .hb-act,.m2-close{margin-left:auto}
}
@media(max-width:360px){
  .hb-call,.hb-menu,.m2-close{font-size:var(--t-s)}
  .hb-call{padding-inline:14px}
  .hb-menu{padding-inline:14px 16px;gap:10px}
}
@media(max-width:700px){
  .m2-list a{grid-template-columns:1fr;gap:2px}
  .m2-list .d{text-align:left;max-width:none}
  .m2-foot .sp{margin-left:0}
}

/* ---------- the page ---------- */
.c{--ink:var(--on,var(--fg));--wash-top:170px;position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--bg);color:var(--ink);transition:color .5s var(--ease)}
.c-bg{position:absolute;inset:0}
.pvw{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path .85s var(--ease);background:var(--bg)}
.pvw.prev{clip-path:inset(0);z-index:0}
.pvw.on{clip-path:inset(0);z-index:1}
.pvw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pvw img[hidden]{display:none}
.pv-roster img{opacity:0}
.pv-roster img.on{opacity:1}
/* the wash sits where the names and caption are: bottom and left */
.pv-roster::after,.pv-events::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.45) 0,rgba(11,11,12,.45) var(--wash-top),rgba(11,11,12,0) calc(var(--wash-top) + 130px)),
    linear-gradient(0deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.7) 45%,rgba(11,11,12,.52) 80%,rgba(11,11,12,.5) 100%),linear-gradient(90deg,rgba(11,11,12,.5),rgba(11,11,12,0) 70%)}
.pv-artists{background:var(--salmon);color:var(--salmon-on)}
.pv-toolkit{background:var(--green);color:var(--green-on)}
.pv-involved{background:var(--blue);color:var(--blue-on)}
.pv-tag{position:absolute;right:var(--pad);top:calc(var(--bar) + 76px);z-index:2;max-width:16ch;text-align:right;
  font-family:var(--breit);font-weight:700;text-transform:uppercase;font-size:var(--t-l);line-height:1.02;letter-spacing:-.01em}
.pv-roster .pv-tag,.pv-events .pv-tag{color:var(--fg)}
.pv-date{font-size:clamp(4rem,9vw,9rem);line-height:.84;letter-spacing:-.03em;max-width:none}
.pv-date small{display:block;margin-top:14px;font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:0;font-size:var(--t-m);line-height:1.35}

.c-about{position:absolute;left:var(--pad);top:calc(var(--bar) + 40px);z-index:3;max-width:34ch;font-size:var(--t-m);line-height:1.45}
.c-list{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(64px,9vh,96px);z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.c-list a{position:relative;display:flex;align-items:flex-start;gap:14px;max-width:100%;color:inherit}
.c-list .t{display:block;flex:none;white-space:nowrap;overflow:hidden;font-family:var(--breit);font-weight:700;text-transform:uppercase;
  line-height:.92;letter-spacing:-.025em;font-size:var(--fs,96px);padding-block:.02em;padding-right:.06em}
.c-list .t>span{display:inline-block;-webkit-text-stroke-width:2px;-webkit-text-stroke-color:transparent;transition:transform 1s var(--ease),color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease)}
/* the names rise in once on load; the animation finishes on its own, so nothing waits on script */
.js .c-list .t>span{animation:rise 1.1s var(--ease) backwards}
.c-list a:nth-child(2) .t>span{animation-delay:.07s}.c-list a:nth-child(3) .t>span{animation-delay:.14s}
.c-list a:nth-child(4) .t>span{animation-delay:.21s}.c-list a:nth-child(5) .t>span{animation-delay:.28s}
@keyframes rise{from{transform:translateY(108%)}}
.c.lit .c-list .t>span{color:transparent;-webkit-text-stroke-color:color-mix(in srgb,var(--ink) 86%,transparent)}
.c.lit .c-list a.on .t>span{color:var(--ink);-webkit-text-stroke-color:transparent;transform:translateX(.05em)}
.c-list sup{flex:none;font-size:var(--t-s);font-weight:500;margin-top:.5em;opacity:.85}
.c-list .d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the caption sits beside the shorter rows, above GET INVOLVED, so the stack can run wide */
.c-side{position:absolute;right:var(--pad);bottom:calc(clamp(64px,9vh,96px) + var(--fs,96px) * .92 + 14px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.c-cap{max-width:22ch;font-size:var(--t-m);line-height:1.4;min-height:2.8em}
.c-cap.in{animation:capIn .45s var(--ease)}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}}
.c-pause{font-size:var(--t-s);font-weight:500;min-height:44px;padding:0 4px;color:inherit;border-bottom:1px solid color-mix(in srgb,var(--ink) 45%,transparent)}
.c-pause:hover{border-color:currentColor}

@media(max-width:760px){
  .c{min-height:560px}
  .c-about{max-width:26ch;top:calc(var(--bar) + 47px + 14px)}
  .c-list{bottom:84px}
  .c-list .t{line-height:1}
  .c-list .t>span{-webkit-text-stroke-width:1.25px}
  .c-side{bottom:24px;left:var(--pad);right:var(--pad);flex-direction:row;justify-content:space-between;align-items:center}
  .c-cap{min-height:0;text-align:left;font-size:var(--t-s)}
  .pv-tag{top:auto;bottom:calc(84px + var(--n,5) * var(--fs,40px) + 28px);max-width:18ch}
  .pv-date{font-size:clamp(3.4rem,17vw,6rem)}
}
@media(max-width:560px){
  .c{--wash-top:200px}
  .c-about{top:calc(var(--bar) + 17px + 10px + 47px + 16px)}
}
@media(max-width:360px){
  .c-about{top:calc(var(--bar) + 17px + 10px + 44px + 14px)}
}
@media(prefers-reduced-motion:reduce){
  .hb-mark,.hb-call{transition:none}
  .pvw,.c-list .t>span,.menu2,.menu2.open,.m2-list .t>span,.m2-list .d{transition:none!important}
  .c-cap.in{animation:none}
  .js .c-list .t>span{animation:none}
  .m2-list .t>span{transform:none}
  .m2-list .d{opacity:1}
}