/* ============================================================
   WELL MADE PLAYS · the house pages: home, /roster, /events,
   /get-involved, /partners. One sticky identity rail beside a
   content canvas. Was inline in index.html until 2026-10-10,
   when the one-page scroll was split into pages.
   The rail, mobile header, menu and footer markup are written
   into each page by tools/house-chrome.mjs.
   ============================================================ */

@font-face{font-family:"Sohne";src:url("/assets/fonts/Sohne-Buch.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Sohne";src:url("/assets/fonts/Sohne-Leicht.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Sohne";src:url("/assets/fonts/Sohne-Kraftig.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Sohne";src:url("/assets/fonts/Sohne-Halbfett.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Sohne Breit";src:url("/assets/fonts/SohneBreit-Halbfett.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Sohne Breit";src:url("/assets/fonts/SohneBreit-Dreiviertelfett.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Sohne Mono";src:url("/assets/fonts/SohneMono-Buch.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --bg:#0B0B0C;
  --ink:#141312;
  --fg:#F4EEDC;
  --fg-72:rgba(244,238,220,.72);
  --fg-55:rgba(244,238,220,.55);
  --fg-38:rgba(244,238,220,.38); /* hairlines and rules only: 3.19:1 on the ink, under the 4.5:1 text floor */
  --line:rgba(244,238,220,.14);

  --salmon:#F94E3E;  --salmon-on:#12080a;
  --yellow:#FFD60A;  --yellow-on:#171203;
  --green:#2C7A2E;   --green-on:#F4EEDC;
  --purple:#7A3CF0;  --purple-on:#F4EEDC;
  --blue:#2435E6;    --blue-on:#F4EEDC;

  --sans:"Sohne",Helvetica,Arial,sans-serif;
  --breit:"Sohne Breit","Sohne",Helvetica,sans-serif;
  --mono:"Sohne Mono",ui-monospace,monospace;

  --t-lead:clamp(1.05rem,1.5vw,1.25rem);
  --t-body:1.0625rem;
  --t-mono:.75rem;

  --railw:clamp(320px,34vw,520px);
  --pad:clamp(20px,2.6vw,44px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;text-align:left;padding:0}
::selection{background:var(--fg);color:var(--bg)}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase}

/* ========================= SHELL ============================== */
.shell{display:grid;grid-template-columns:var(--railw) 1fr;min-height:100svh}
@media(max-width:900px){.shell{grid-template-columns:1fr}}

/* ========================= RAIL =============================== */
.rail{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;
  padding:var(--pad);
  border-right:1px solid var(--line);
  z-index:10;
}
.rail .mast{display:flex;flex-direction:column;width:100%}
.rail .mast .ml{
  font-family:var(--breit);font-weight:700;text-transform:uppercase;
  line-height:.84;letter-spacing:-.015em;white-space:nowrap;width:max-content;
  font-size:60px; /* fitted per line by JS to rail width */
}
.rail .statement{
  margin-top:clamp(18px,2.4vh,30px);
  font-size:var(--t-lead);font-weight:300;line-height:1.5;color:var(--fg-72);max-width:30ch;
}
.rail .proof{
  margin-top:clamp(12px,1.6vh,18px);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-55);line-height:1.9;
}
.rail .idx{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-block:clamp(20px,3vh,40px)}
.rail .idx a{
  display:flex;gap:18px;align-items:baseline;
  font-weight:600;font-size:clamp(1.25rem,1.6vw,1.6rem);letter-spacing:-.018em;line-height:1.5;
  color:var(--fg-55);transition:color .3s;
}
.rail .idx a b{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.1em;color:var(--fg-55);transform:translateY(-2px)}
.rail .idx a i{font-family:var(--mono);font-style:normal;font-size:.75rem;letter-spacing:.06em;color:var(--fg-55);margin-left:auto}
.rail .idx a:hover{color:var(--fg-72)}
.rail .idx a.active{color:var(--fg)}
.rail .foot{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:clamp(14px,2vh,22px)}
.rail .foot a{font-weight:300;font-size:.95rem;color:var(--fg-72);transition:color .3s;width:max-content}
.rail .foot a:hover{color:var(--fg)}
.rail .foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.rail .foot .clock{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--fg-55);font-variant-numeric:tabular-nums}
.rail .foot .city{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--fg-55);text-transform:uppercase}

/* mobile: the rail becomes the first full screen + a bottom frame-bar */
.m-rail{display:none}
.m-bar{display:none}
@media(max-width:900px){
  .rail{display:none}
  .m-rail{
    display:flex;flex-direction:column;
    min-height:100svh;
    padding:var(--pad);
    padding-bottom:calc(var(--pad) + 52px); /* clear the frame-bar */
    border-bottom:1px solid var(--line);
  }
  .m-rail .mast{display:flex;flex-direction:column;width:100%;padding-top:2vh}
  .m-rail .mast .ml{
    font-family:var(--breit);font-weight:700;text-transform:uppercase;
    line-height:.84;letter-spacing:-.015em;white-space:nowrap;width:max-content;
    font-size:80px; /* fitted by JS to full width */
  }
  .m-rail .statement{margin-top:20px;font-weight:300;font-size:1.05rem;line-height:1.5;color:var(--fg-72);max-width:28ch}
  .m-rail .proof{margin-top:12px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55);line-height:1.9}
  .m-rail .idx{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-block:26px}
  .m-rail .idx a{
    display:flex;gap:16px;align-items:baseline;
    font-weight:600;font-size:1.55rem;letter-spacing:-.02em;line-height:1.55;
    color:var(--fg);
  }
  .m-rail .idx a b{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.1em;color:var(--fg-55);transform:translateY(-3px)}
  .m-rail .idx a i{font-family:var(--mono);font-style:normal;font-size:.75rem;letter-spacing:.06em;color:var(--fg-55);margin-left:auto}
  .m-rail .foot{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:16px}
  .m-rail .foot a{font-weight:300;font-size:.95rem;color:var(--fg-72)}
  .m-rail .foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px}
  .m-rail .foot .clock,.m-rail .foot .city{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--fg-55);text-transform:uppercase;font-variant-numeric:tabular-nums}

  /* bottom frame-bar: section tracker + menu */
  .m-bar{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    position:fixed;inset-inline:0;bottom:0;z-index:860;
    background:rgba(11,11,12,.92);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding:12px var(--pad);
  }
  .m-bar .sec{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-72)}
  .m-bar .menu-btn{font-weight:500;font-size:.98rem}
  .canvas{padding-bottom:52px}
  .modes{bottom:60px}
}

/* mobile menu overlay: the list sits at the bottom when it fits and scrolls
   from the top when it does not (a phone held sideways), so no item is ever
   cut off above the screen */
.menu{position:fixed;inset:0;z-index:890;background:var(--bg);display:none;
  flex-direction:column;justify-content:flex-start;padding:64px var(--pad) var(--pad);gap:8px;
  overflow-y:auto;overscroll-behavior:contain}
.menu.open{display:flex}
.menu>a:first-of-type{margin-top:auto}
.menu a{font-family:var(--breit);font-weight:600;font-size:clamp(2.1rem,9.5vw,3.2rem);letter-spacing:-.015em;line-height:1.16;color:var(--fg)}
@media(max-height:500px){.menu a{font-size:clamp(1.5rem,7vh,2.1rem)}}
.menu .m-close{position:absolute;top:12px;right:var(--pad);min-height:44px;display:inline-flex;align-items:center;font-size:1.02rem;font-weight:500;color:var(--fg)}
.menu .m-foot{margin-top:34px;display:flex;flex-direction:column;gap:6px;color:var(--fg-55);font-size:.95rem;font-weight:300}
.menu .m-foot a{width:max-content;font-family:var(--sans);font-size:.95rem;font-weight:300;letter-spacing:0;line-height:1.6;color:var(--fg-72)}
.menu .m-foot a:hover{color:var(--fg)}
.menu a i{font-family:var(--mono);font-style:normal;font-size:.75rem;letter-spacing:.06em;color:var(--fg-55);margin-left:14px;vertical-align:super}
.menu .m-foot .row{display:flex;justify-content:space-between;gap:12px}
.menu .m-foot .clock{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--fg-55);font-variant-numeric:tabular-nums}

/* ========================= CANVAS ============================= */
.canvas{min-width:0}
.c-sec{padding:var(--pad);border-bottom:1px solid var(--line)}
.c-sec:last-of-type{border-bottom:0}
.sec-h{font-family:var(--breit);font-weight:600;font-size:clamp(1.4rem,2vw,2rem);letter-spacing:-.01em;color:var(--fg);
  border-bottom:2px solid var(--fg);padding-bottom:14px;
  margin-bottom:clamp(28px,3.6vw,52px)}

/* --- roster: editorial sequence — lead plate, staggered pairings, spine captions --- */
.r-grid{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2vw,28px);row-gap:clamp(64px,7vw,120px)}
.tile{cursor:pointer}
.tile .head{margin-bottom:12px}
.tile .head .nm{font-family:var(--breit);font-weight:600;font-size:clamp(1.5rem,2.2vw,2.3rem);letter-spacing:-.012em;line-height:1.02}
/* 4:5 unless the sequence below sets the tile's shape; the plate shows until the photo loads */
.tile .ph{position:relative;overflow:hidden;background:var(--plate);aspect-ratio:4/5}
.tile .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  clip-path:inset(0);
  transition:clip-path .5s cubic-bezier(.22,1,.36,1)}
/* colorway mat: hover insets the photo, revealing the artist's plate as a gallery mat */
.tile:hover .ph img,.tile:focus-visible .ph img{clip-path:inset(clamp(10px,1.1vw,16px))}
/* record-spine caption along the frame edge */
.tile .spine{
  position:absolute;top:14px;right:12px;z-index:2;
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.45);
  transition:color .3s;
}
.tile:hover .spine{text-shadow:none;opacity:1}
/* the sequence: lead / big-left + offset-right / indented-left + big-right */
.t-0{grid-column:1/-1}
.t-0 .ph{aspect-ratio:21/10}
.t-1{grid-column:1/8}
.t-1 .ph{aspect-ratio:4/5}
.t-2{grid-column:8/13;margin-top:clamp(70px,10vw,160px)}
.t-2 .ph{aspect-ratio:3/4}
.t-3{grid-column:2/7;margin-top:clamp(40px,6vw,110px)}
.t-3 .ph{aspect-ratio:5/6}
.t-4{grid-column:7/13}
.t-4 .ph{aspect-ratio:3/4}
.t-5{grid-column:1/7;align-self:end}
.t-5 .ph{aspect-ratio:4/5}
.t-6{grid-column:8/13;margin-top:clamp(70px,10vw,160px)}
.t-6 .ph{aspect-ratio:3/4}
/* an eighth artist onward, before the sequence is redrawn: half a row each */
.r-grid>.tile:nth-child(n+8){grid-column:span 6}
@media(max-width:760px){
  .r-grid{grid-template-columns:1fr;row-gap:clamp(44px,10vw,64px)}
  .t-0,.t-1,.t-2,.t-3,.t-4,.t-5,.t-6,.r-grid>.tile:nth-child(n+8){grid-column:auto;margin-top:0;align-self:auto}
  .t-0 .ph{aspect-ratio:16/11}
  .t-1 .ph,.t-2 .ph,.t-3 .ph,.t-4 .ph,.t-5 .ph,.t-6 .ph{aspect-ratio:4/5}
  .tile .head .nm{font-size:1.45rem}
}
[data-img="flat"] .tile .ph img{display:none}

/* --- SERVICES: the material cut — a rate card, ink on paper --- */
#services{border-top:1px solid var(--line)}

/* --- EVENTS: a designed calendar — month stubs + day rows --- */
.ev{border-top:1px solid var(--line)}
.ev-month{display:grid;grid-template-columns:clamp(90px,9vw,140px) 1fr;
  gap:clamp(16px,2.4vw,40px);border-bottom:1px solid var(--line);
  padding-block:clamp(22px,3vw,34px)}
.ev-month .stub{
  font-family:var(--breit);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1;letter-spacing:-.01em;
  color:var(--fg-55);padding-top:4px;
}
.ev-month .rows{display:flex;flex-direction:column}
@media(max-width:640px){
  .ev-month{grid-template-columns:1fr;gap:12px}
  .ev-month .stub{font-size:1.3rem}
}
/* the smallest phones: the ticket link drops under the show, so a row never runs past the screen */
@media(max-width:360px){
  .ev-row{grid-template-columns:44px 1fr;row-gap:4px}
  .ev-row .mid{min-width:0}
  .ev-row .tik{grid-column:2;justify-self:start;white-space:normal}
}

/* --- GET INVOLVED: one screen, three lines, air --- */
#involved{min-height:72svh;display:flex;flex-direction:column}
#involved .gi{border:0;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(30px,6vh,56px);padding-block:clamp(20px,4vh,40px)}
#involved .gi-row{display:block;border:0;padding:0;background:none;color:var(--fg)}
#involved .gi-row:hover{background:none;color:var(--fg)}
#involved .gi-row .k{color:var(--fg-55);margin-bottom:8px}
#involved .gi-row:hover .k{color:var(--fg-55)}
#involved .gi-row h3{font-family:var(--breit);font-size:clamp(1.8rem,3.2vw,3rem);font-weight:600;letter-spacing:-.015em;line-height:1.02;
  display:inline-block;transition:color .25s}
#involved .gi-row:hover h3{text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:2px}
#involved .gi-row .go{display:block;margin-top:10px;color:var(--fg-55)}
#involved .gi-row:hover .go{color:var(--fg-72)}

/* --- canvas closing beat --- */
.c-end .theend{
  font-family:var(--breit);font-weight:700;text-transform:uppercase;
  line-height:.87;letter-spacing:-.015em;white-space:nowrap;width:max-content;
  font-size:10vw; /* fitted by JS */
  margin:clamp(40px,6vw,80px) 0 clamp(20px,3vw,36px);
}

/* --- services / events / involved (v5 rows; redesigns follow) --- */
.svc,.ev,.gi{border-top:1px solid var(--line)}
.svc-row,.gi-row{
  display:grid;grid-template-columns:1fr auto;gap:clamp(16px,2.4vw,40px);
  align-items:baseline;padding-block:clamp(20px,2.6vw,30px);
  padding-inline:clamp(6px,.8vw,14px);
  border-bottom:1px solid var(--line);
  transition:background .25s,color .25s;
}
.svc-row:hover,.gi-row:hover{background:var(--fg);color:var(--ink)}
.svc-row h3,.gi-row h3{font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.018em;line-height:1.08}
.svc-row .pr,.gi-row .go{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-72);white-space:nowrap;transition:color .25s}
.svc-row:hover .pr,.gi-row:hover .go{color:var(--ink)}
.gi-row .k{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);transition:color .25s;margin-bottom:5px}
.gi-row:hover .k{color:rgba(20,19,18,.55)}
.ev-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:clamp(14px,2.4vw,36px);
  align-items:baseline;padding-block:clamp(12px,1.6vw,18px);
  padding-inline:clamp(6px,.8vw,14px);
  transition:background .25s,color .25s;
}
.ev-month .rows .ev-row+.ev-row{border-top:1px solid var(--line)}
.ev-row .dd{font-weight:600;font-size:1.15rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ev-row:hover{background:var(--fg);color:var(--ink)}
.ev-row .dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-72);font-variant-numeric:tabular-nums;transition:color .25s}
.ev-row:hover .dt{color:rgba(20,19,18,.62)}
.ev-row .mid .who{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;letter-spacing:-.01em}
.seg{white-space:nowrap}
.ev-row .mid .where{color:var(--fg-55);font-weight:300;font-size:.92rem;transition:color .25s}
.ev-row:hover .mid .where{color:rgba(20,19,18,.62)}
.ev-row .tik{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--fg-55);padding:10px 0 3px;transition:.25s;white-space:nowrap}
.ev-row:hover .tik{color:var(--ink);border-color:rgba(20,19,18,.4)}

/* --- canvas footer --- */
.c-end .wm{max-width:min(300px,60vw);margin-bottom:26px}
.c-end .wm img{width:100%;mix-blend-mode:screen}
.c-end .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.c-end .founder .nm{font-weight:500;font-size:1.05rem}
.c-end .founder .rl{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);margin:6px 0 10px}
.c-end .founder a{display:block;color:var(--fg-72);font-weight:300;font-size:.95rem;line-height:1.65;transition:color .3s}
.c-end .founder a:hover{color:var(--fg)}
.c-end .socials{display:flex;gap:20px}
.c-end .socials a{font-size:.95rem;font-weight:400;color:var(--fg-72);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.3s}
.c-end .socials a:hover{color:var(--fg);border-color:var(--fg)}
.c-end .bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(36px,5vw,60px);
  border-top:1px solid var(--line);padding-top:18px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}

/* ====================== ARTIST OVERLAY ========================= */
.overlay{position:fixed;inset:0;z-index:900;display:none;background:var(--bg);opacity:0;transition:opacity .45s}
.overlay.open{display:block;opacity:1}
.overlay .panel{position:absolute;inset:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:860px){.overlay .panel{grid-template-columns:1fr;grid-auto-rows:min-content}}
.overlay .visual{position:relative;min-height:100svh;background:#101011}
@media(max-width:860px){.overlay .visual{min-height:56svh}}
.overlay .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-img="flat"] .overlay .visual img{display:none}
.overlay .content{
  background:var(--plate);color:var(--on);
  padding:clamp(80px,9vw,120px) clamp(28px,5vw,72px) clamp(48px,6vw,80px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.4vh,26px);
}
.overlay .content .ix{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.overlay .content h2{font-family:var(--breit);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.8rem);letter-spacing:-.012em;line-height:.96}
.overlay .content .bio{font-size:var(--t-lead);font-weight:300;line-height:1.45;max-width:34ch}
.overlay .links{display:flex;gap:22px;flex-wrap:wrap;margin-top:4px}
.overlay .links a{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding:8px 0 4px;transition:opacity .25s}
.overlay .links a:hover{opacity:.72}
.overlay .shows{margin-top:clamp(16px,3vh,28px);border-top:1px solid currentColor;padding-top:22px}
.overlay .shows .lab2{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.overlay .shows .row{display:grid;grid-template-columns:max-content 1fr auto;column-gap:20px;align-items:baseline;padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.overlay .shows .row .dt{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;white-space:nowrap}
@media(max-width:480px){.overlay .shows .row{grid-template-columns:max-content 1fr}.overlay .shows .row .ct{grid-column:2;justify-self:start}}
.overlay .shows .row .vn{font-weight:400}
.overlay .shows .row .ct{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding:10px 0 3px;white-space:nowrap;transition:opacity .25s}
.overlay .shows .row .ct:hover{opacity:.72}
.overlay .close{position:fixed;top:20px;right:var(--pad);z-index:950;
  font-size:1.02rem;font-weight:500;color:var(--on,var(--fg));
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .3s}
.overlay .close:hover{opacity:.72}
@media(max-width:860px){.overlay .close{color:var(--fg);background:rgba(11,11,12,.68);padding:6px 10px;border-bottom:0}}

/* ======================== MISC ================================ */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .tile .ph img{transition:none}
}
[data-still] .reveal{opacity:1!important;transform:none!important;transition:none!important}
html[data-still]{scroll-behavior:auto}
html[data-solo] .c-sec{padding-top:36px}

a:focus-visible,button:focus-visible,.tile:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* on an artist plate the ring takes the plate's own ink, so it shows on yellow and salmon too */
.overlay a:focus-visible,.overlay button:focus-visible{outline-color:var(--on)}

.modes{position:fixed;bottom:18px;right:18px;z-index:850;display:flex;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.modes button{background:rgba(11,11,12,.8);border:1px solid var(--line);color:var(--fg-55);
  padding:8px 12px;cursor:pointer;transition:.25s;text-align:center}
.modes button.on{color:var(--bg);background:var(--fg);border-color:var(--fg)}

/* --- audit fixes: a11y helpers, spine contrast, empty events --- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:60}
.skip:focus{left:var(--pad);top:var(--pad);background:var(--fg);color:var(--bg);padding:10px 16px;font-weight:600}
.tile .spine{font-size:.75rem;opacity:1;background:rgba(11,11,12,.68);padding:9px 5px;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.ev-empty{padding:clamp(20px,3vw,34px) 2px;font-weight:300;color:var(--fg-72);max-width:56ch;line-height:1.6}
.ev-empty a{border-bottom:1px solid var(--fg-38);transition:border-color .3s}
.ev-empty a:hover{border-color:var(--fg)}
#involved .gi-row .go{font-size:1rem;letter-spacing:.06em}

/* ================= SPLIT PAGES (2026-10-10) ==================== */
.rail .mast{color:inherit}
.rail .idx a[aria-current="page"],.menu a[aria-current="page"]{color:var(--fg)}
/* every phone-menu link is full cream, so the current page is marked by a rule under it */
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.menu a i{display:inline-block}
body.home .rail .idx a{color:var(--fg-72)}
body.home .rail .idx a:hover{color:var(--fg)}
.rail .idx a:empty,.idx a i:empty{display:none}

/* mobile, inner pages: a slim header instead of the full opening screen */
.m-top{display:none}
@media(max-width:900px){
  body:not(.home) .m-rail{display:none}
  .m-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:18px var(--pad);border-bottom:1px solid var(--line)}
  .m-top .mk{font-family:var(--breit);font-weight:700;text-transform:uppercase;font-size:1.15rem;letter-spacing:-.01em;line-height:1}
  .m-top .city{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
}

/* page intro line under a section heading */
.pg-lede{font-weight:300;font-size:var(--t-lead);line-height:1.5;color:var(--fg-72);max-width:52ch;
  margin:calc(-1 * clamp(12px,1.8vw,26px)) 0 clamp(28px,3.6vw,48px)}

/* ---- home: one door per page ---- */
.door{padding:var(--pad);border-bottom:1px solid var(--line)}
.door .ev{margin-top:clamp(16px,2vw,24px)}
.door .ev-month{padding-block:clamp(14px,2vw,22px)}

/* roster strip: every artist, one row */
.strip{margin-top:clamp(18px,2.4vw,30px);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.strip a{display:block;color:var(--fg)}
.strip .ph{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--plate)}
.strip .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0);transition:clip-path .45s cubic-bezier(.22,1,.36,1)}
.strip a:hover .ph img,.strip a:focus-visible .ph img{clip-path:inset(6px)}
.strip .nm{display:block;margin-top:8px;font-weight:500;font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
@media(max-width:1100px){
  .strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(112px,30vw,180px);
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .strip::-webkit-scrollbar{display:none}
  .strip a{scroll-snap-align:start}
}

/* get involved, as its own page */
.gi-page{min-height:calc(100svh - 2 * var(--pad));display:flex;flex-direction:column}
.gi-page .gi{border:0;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(30px,6vh,56px);padding-block:clamp(20px,4vh,40px)}
.gi-page .gi-row{display:block;border:0;padding:0;background:none;color:var(--fg)}
.gi-page .gi-row:hover{background:none;color:var(--fg)}
.gi-page .gi-row .k,.gi-page .gi-row:hover .k{color:var(--fg-55);margin-bottom:8px}
.gi-page .gi-row h3{font-family:var(--breit);font-size:clamp(1.8rem,3.2vw,3rem);font-weight:600;letter-spacing:-.015em;line-height:1.02;display:inline-block}
.gi-page .gi-row:hover h3{text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:2px}
.gi-page .gi-row .d{margin-top:10px;font-weight:300;color:var(--fg-72);max-width:48ch}
.gi-page .gi-row .go{display:block;margin-top:10px;color:var(--fg-55);font-size:1rem;letter-spacing:.06em}

/* footer on inner pages: no closing beat */
.c-end.slim{padding-top:clamp(40px,5vw,64px)}

/* ---- trusted partners: the roster's tiles, cut for a longer list ----
   Each section runs a three-across stagger, restarting per section; a
   section's leftover single tile goes wide. Every tile sits on its plate
   colour, and the photo stops short of the right edge so the craft runs
   up a strip of that plate, like a record spine. Photos fill their frame;
   logos sit on a cream plate. Name, line and links stay visible.
   Sizes: page title 2rem (house .sec-h), section 1.6rem, name 1.3rem,
   lede var(--t-lead), body 1rem, mono .7rem. */
body.partners .sec-h{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.pt-sec{margin-top:clamp(72px,9vw,140px);--cream:var(--fg);--cream-on:var(--bg);--gut:clamp(24px,2vw,28px)}
.pt-sec:first-of-type{margin-top:0}
.pt-sec h2,.pt-close h2{font-family:var(--breit);font-weight:600;font-size:clamp(1.3rem,1.7vw,1.6rem);letter-spacing:-.01em;line-height:1.05}
.pt-sec h2{border-bottom:1px solid var(--line);padding-bottom:12px}
.pt-note{margin-top:12px;font-weight:300;font-size:1rem;color:var(--fg-55);max-width:56ch}
.pt-grid{margin-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);row-gap:clamp(40px,4vw,72px);align-items:start}
.pt-nm{font-family:var(--breit);font-weight:600;font-size:clamp(1.1rem,1.35vw,1.3rem);letter-spacing:-.012em;line-height:1.08;margin-bottom:12px;text-wrap:balance}
.pt-nm a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s}
.pt-nm a:hover,.pt-nm a:focus-visible{text-decoration-color:currentColor}
.pt-ph{display:block;position:relative;overflow:hidden;background:var(--plate);aspect-ratio:4/5}
/* the photo: oversized by a pixel so no plate fringe shows at rest, and
   stopped short of the spine strip on the right */
.pt-ph img{position:absolute;top:-1px;left:-1px;bottom:-1px;right:var(--gut);width:calc(100% - var(--gut) + 1px);height:calc(100% + 2px);
  object-fit:cover;clip-path:inset(0);transition:clip-path .5s cubic-bezier(.22,1,.36,1)}
.pt-tile:hover .pt-ph img,.pt-tile:focus-within .pt-ph img{clip-path:inset(clamp(10px,1.1vw,16px))}
.pt-tile.is-logo .pt-ph img{object-fit:contain;padding:14%;clip-path:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pt-tile.is-logo:hover .pt-ph img,.pt-tile.is-logo:focus-within .pt-ph img{transform:scale(.94)}
.pt-ph .spine{position:absolute;top:12px;right:0;width:var(--gut);z-index:2;display:flex;justify-content:center;
  writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--on)}
.pt-mono{position:absolute;inset:0 var(--gut) 0 0;display:grid;place-items:center;font-family:var(--breit);font-weight:700;
  font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.02em;color:var(--on)}
.pt-body{margin-top:14px;max-width:46ch}
.pt-line{font-weight:300;font-size:1rem;color:var(--fg-72);line-height:1.5}
.pt-disc{margin-top:8px;font-size:1rem;font-weight:300;color:var(--fg-55);line-height:1.45}
.pt-links{margin-top:12px;display:flex;gap:4px 18px;flex-wrap:wrap}
.pt-links a{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--fg-38);padding:6px 0 3px;transition:border-color .2s}
.pt-links a:hover,.pt-links a:focus-visible{border-color:var(--fg);outline:none}
/* the stagger: three across, each column dropped a different amount so
   the rows never line up into a plain grid */
.p-0{grid-column:1/5}
.p-1{grid-column:5/9;margin-top:clamp(48px,7vw,120px)}
.p-1 .pt-ph{aspect-ratio:3/4}
.p-2{grid-column:9/13;margin-top:clamp(20px,3vw,48px)}
.p-2 .pt-ph{aspect-ratio:5/6}
.p-3{grid-column:1/5;margin-top:clamp(24px,3vw,56px)}
.p-3 .pt-ph{aspect-ratio:5/6}
.p-4{grid-column:5/9;margin-top:clamp(48px,7vw,120px)}
.p-5{grid-column:9/13;margin-top:clamp(20px,3vw,48px)}
.p-5 .pt-ph{aspect-ratio:3/4}
/* a section's leftover single tile: photo left, words right, across the row */
.p-wide{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);
  grid-template-areas:"ph ph ph ph ph nm nm nm nm nm nm nm" "ph ph ph ph ph bd bd bd bd bd bd bd";grid-template-rows:auto 1fr;
  margin-top:clamp(8px,1vw,16px)}
.p-wide .pt-nm{grid-area:nm;align-self:end;margin-bottom:0}
.p-wide .pt-ph{grid-area:ph;aspect-ratio:4/3}
.p-wide .pt-body{grid-area:bd;margin-top:14px}
@media(max-width:1100px) and (min-width:761px){
  .pt-tile{margin-top:0!important}
  .p-0,.p-2,.p-4{grid-column:1/7}
  .p-1,.p-3,.p-5{grid-column:7/13;margin-top:clamp(48px,7vw,96px)!important}
}
@media(max-width:760px){
  .pt-grid{grid-template-columns:1fr;row-gap:clamp(44px,10vw,64px)}
  .pt-tile{grid-column:auto!important;margin-top:0!important}
  .pt-tile .pt-ph{aspect-ratio:4/5!important}
  .p-wide{display:block}
  .p-wide .pt-nm{margin-bottom:12px}
  .pt-tile.is-logo .pt-ph{aspect-ratio:3/2!important}
}
.pt-todo{margin-top:10px;display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--yellow);color:var(--yellow-on);padding:4px 8px}
.pt-tile.draft .pt-ph{outline:2px dashed var(--yellow);outline-offset:4px}
.pt-preview{position:sticky;top:0;z-index:20;background:var(--yellow);color:var(--yellow-on);padding:10px var(--pad);font-size:.92rem}
.pt-close{margin-top:clamp(80px,10vw,150px);border-top:2px solid var(--fg);padding-top:20px}
.pt-close p{margin-top:8px;font-weight:300;color:var(--fg-72);max-width:56ch}
.pt-close a{display:inline-block;margin-top:14px;border-bottom:1px solid var(--fg-55);padding-bottom:3px}
.pt-close a:hover{border-color:var(--fg)}
.menu-btn{min-height:44px;display:inline-flex;align-items:center}

/* /roster: how artists join the roster (site-review ledger decision 21(c)) */
.mg p{font-weight:300;font-size:var(--t-lead);line-height:1.5;color:var(--fg-72);max-width:52ch}
.mg p+p{margin-top:12px}
.mg a{color:var(--fg);border-bottom:1px solid var(--fg-55);transition:border-color .3s}
.mg a:hover{border-color:var(--fg)}