/* joinpage-06.html */




:root{--disp:"Michroma",sans-serif;--mono:"Kode Mono",monospace;--txt:"Instrument Sans",sans-serif;--lab:"Selawik","Segoe UI",sans-serif;
  --bg:#131517;--black:#0a0b0c;--panel:#191c1f;--line:#2a2e32;--white:#fff;--text:#d6d8db;--muted:#8b9096;--dim:#565b61;--ac:#ff4a3a;--ink:#0d0e10;
  --m:56px;--gut:24px;--sec:112px;--nav:60px;--cc:#ff4a3a;--cc-ink:#0d0e10}
@media (max-width:1440px){:root{--m:28px}}
@media (max-width:900px){:root{--m:20px;--sec:72px}}
@media (max-width:560px){:root{--m:16px;--sec:56px;--nav:52px}}

*{box-sizing:border-box}
 html{color-scheme:dark;scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--txt);-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}
 svg{display:block}

.M{font-family:var(--disp);text-transform:uppercase;font-weight:400;color:var(--white)}

.K{font-family:var(--mono);text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:11px;color:var(--muted)}
 .K b{font-weight:500;color:var(--text)}
 .K i{font-style:normal;color:var(--dim);padding:0 7px}

.L{font-family:var(--lab);text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--dim)}

.btn{display:inline-block;background:var(--cc);color:var(--cc-ink);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:10px 14px 9px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .25s ease}
 .btn:before{content:"> ";display:inline-block;white-space:pre;transition:transform .25s ease}
 .btn:hover{background:color-mix(in oklch,var(--cc),black 12%)}
 .btn:hover:before{transform:translateX(3px)}
 .btn.w{background:var(--white)}

.lnk{display:inline-block;background:var(--line);color:var(--text);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:10px 14px 9px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .25s ease,color .25s ease}
 .lnk:before{content:"> ";color:var(--muted);display:inline-block;white-space:pre;transition:transform .25s ease,color .25s ease}
 .lnk:hover{background:var(--dim);color:var(--white)}
 .lnk:hover:before{transform:translateX(3px);color:var(--white)}

.rh dd .lnk{padding:3px 8px 2px;font-size:10px;vertical-align:1px}
 .rh dd .lnk:before{content:""}

.ctl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer}
 .ctl{position:relative}
 .ctl:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:8px}
 .act .ctl:before{position:static;margin-right:8px}
 .ctl:hover{color:var(--text)}

.plate{display:inline-block;background:var(--muted);color:var(--ink);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;line-height:1.5;vertical-align:1px}

.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--m);max-width:1640px;margin:0 auto}

.sec{padding:var(--sec) 0}


.sh{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:40px;min-height:42px}

.sh .h{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);position:relative}
 .sh .h:after{content:"";display:inline-block;width:7px;height:11px;background:var(--cc);margin-left:10px;vertical-align:-1px;opacity:0}
 .sh .h.live:after{opacity:1;animation:bl 1s steps(1) infinite}
 @keyframes bl{50%{opacity:0}}
 .sh .h:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:10px;white-space:nowrap}

.body{font-size:16px;line-height:1.65;color:var(--text)}
 .body p{margin:0 0 1em}
 .body p:last-child{margin:0}
 .body a{border-bottom:1px solid var(--dim)}

.act{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

.rh .ctx{display:block;position:relative;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
 .rh .ctx b{color:var(--text);font-weight:500}
 .rh .ctx .num{margin-right:14px}
 .rh .ctx i{font-style:normal;color:var(--dim);padding:0 7px}

.rh .nm{display:block;font-family:var(--disp);font-size:30px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-top:14px}
 .rh .nm.p{font-size:22px;letter-spacing:.04em;line-height:1.15}

.rh .rec{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
 .rh .rec b{color:var(--text);font-weight:500}
 .rh .rec i{font-style:normal;color:var(--dim);padding:0 7px}

.rh dl{margin:26px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:8px 28px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;align-items:baseline}
 .rh dt{color:var(--dim);margin:0}
 .rh dd{margin:0;color:var(--text)}
 .rh dd .plate{margin-right:6px}
 .rh dd i{font-style:normal;color:var(--dim);padding:0 7px}


/* nav */
.bar{display:flex;align-items:center;padding:0 var(--m);height:var(--nav);gap:44px;background:var(--black);position:sticky;top:0;z-index:20;max-width:1640px;margin:0 auto}

.barwrap{background:var(--black);position:sticky;top:0;z-index:20;transition:background-color .3s ease}
 .barwrap.glass{background:rgba(10,11,12,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
 .barwrap.glass .bar{background:transparent}

.logo{color:var(--white);height:19px;flex:none}
 .logo svg{height:100%;width:auto}
 .logo .mk{display:none}

.nav{display:flex;gap:30px;align-items:center;height:100%;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.nav a{position:relative;line-height:1;padding:6px 0}
 .nav a:before{content:"> ";color:transparent}
 .nav a:hover{color:var(--text)}
 .nav a:hover:before{color:var(--dim)}

.nav a.on{background:var(--ac);color:var(--ink);padding:6px 9px 5px}
 .nav a.on:before{color:var(--ink)}

.right{margin-left:auto;display:flex;align-items:center;gap:36px}

.find{display:flex;align-items:center;gap:9px;height:12px;box-sizing:content-box;padding:7px 0 6px;line-height:1;border-bottom:1px solid var(--dim);min-width:150px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
 .find svg{color:var(--muted)}

.rt{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1;height:12px;box-sizing:content-box;padding:7px 0 6px;border-bottom:1px solid transparent}


/* 1 hero: in the container, FACETS-style; type directly on the art in the ink the slide chooses (Home 08); record line under the name; caption and index bottom right */
.herowrap{background:var(--black)}
 @keyframes bloom{from{filter:brightness(1.7) saturate(.6)}to{filter:brightness(1) saturate(1)}}
 @keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}
 @keyframes settle{from{filter:brightness(1.35) saturate(.8)}to{filter:brightness(1) saturate(1)}}

.tb{display:inline-block}


/* 2 chapter notes: on black in 26; in 25 the section is inverted, the light set of the tokens (piece-04), a nod to the 2010 site, and the break to the spotlight beneath */
.relsec{background:var(--black)}

.light{background:#f1f1ee;--black:#f1f1ee;--bg:#f1f1ee;--panel:#e3e4e0;--line:#cfd1cc;--white:#0d0e10;--text:#2a2d31;--muted:#6b7075;--dim:#9a9ea3;--ink:#fff}

.relsec .cols{padding-top:var(--sec);padding-bottom:var(--sec)}

.rel .sh{grid-row:1;margin-bottom:0}

.rel .hd{grid-column:1/7;grid-row:2;margin-top:40px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--line);position:relative}

.rel .hd:after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--cc)}

.rel .hd .K b{color:var(--white)}
 .rel .hd .num{color:var(--text);margin-right:14px}
 .rel .hd>.K:first-child{position:relative}

.rel .rh{grid-column:1/7;grid-row:3;margin-top:26px}
 .rel .rh dl{margin-top:0;grid-template-columns:calc((100% - 5*var(--gut))/6) 1fr;column-gap:var(--gut)}

.rel .body{grid-column:1/7;grid-row:4;margin-top:36px;max-width:62ch}

.rel .sig{grid-column:1/7;grid-row:5;margin-top:32px;font-size:14px;color:var(--muted)}
 .rel .sig b{font-weight:400;color:var(--text)}

.rel .act{grid-column:1/7;grid-row:6;margin-top:30px}

.rel .blk{grid-column:8/13;grid-row:2/7;margin-top:40px;display:flex;flex-direction:column;align-self:stretch}

.rel .win{position:relative;overflow:hidden;flex:1;min-height:420px}

.rel .win .img{position:absolute;left:0;right:0;top:-8%;height:116%;background-size:cover;background-position:center;will-change:transform}

.rel .wcap{margin-top:0;background:var(--panel);padding:10px 12px 11px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}

.rel .wcap{display:block}
 .rel .wcap .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
 .rel .wcap .pt .pa{display:block;margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
 .rel .wcap>.K{display:none}


/* 3 spotlight: on black. Header row, a headline sentence and a standfirst, then eight squares four across with one-line captions */
.fillsec{position:relative;overflow:hidden}
 .fillsec .hbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
 .fillsec .hbg.on{opacity:1}
 .fillsec .hdim{position:absolute;inset:0;background:rgba(10,11,12,.72);pointer-events:none}
 .fillsec .cols{position:relative;z-index:1}

.spot{background:var(--black)}

.spot .lede{grid-column:1/7;margin:-8px 0 48px}
 .spot .lede p{margin:0;font:400 16px/1.65 var(--txt);color:var(--text)}
 .spot .lede p+p{margin-top:1em;color:var(--muted)}

.spot .lede .K{display:block;margin-top:18px}

.spot .grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px var(--gut)}

/* the card: image, caption; hover H2 (thumbs-02): the caption tints to the piece colour at 62% over the panel, the art breathes to 1.015 inside its box */
.sq{aspect-ratio:1;background-size:cover;background-position:center;position:relative;overflow:hidden}
 .sq:after{content:"";position:absolute;inset:0;background:inherit;transition:transform 1.2s ease}
 .card:hover .sq:after{transform:scale(1.015)}

.card{position:relative;display:block;--pc:var(--cc);--pi:#fff}
 .card>i,.card .sq>i{display:none}

.card:hover .cap{background:color-mix(in oklch,var(--pc) 62%,var(--panel))}
 .card:hover .cap .pt,.card:hover .cap .pa{color:var(--pi)}

/* the one caption (thumbs-02 E): two lines in the record register, the title Kode 12/500 white, the artist Kode 11 muted; no resolution */
.cap{margin-top:0;background:var(--panel);padding:10px 12px 11px;transition:background-color .5s ease}
 .cap .l1{display:block}
 .cap .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s ease}
 .cap .n{display:none}
 .cap .pa{display:block;margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);transition:color .5s ease}


/* 4 featured artist: a piece as the ground, a solid block for the text, his pieces beside */
.feat{position:relative;overflow:hidden;background:var(--black)}

.feat .bgimg{position:absolute;left:0;right:0;top:-10%;height:120%;background-size:cover;background-position:center;will-change:transform}

.feat .dim{position:absolute;inset:0;background:rgba(10,11,12,.58)}

.feat .cols{position:relative;z-index:1;align-items:center;align-content:start;grid-template-rows:auto 1fr;min-height:80vh;padding-top:var(--sec);padding-bottom:var(--sec)}

.feat .sh{grid-row:1;align-self:start;border-bottom-color:rgba(255,255,255,.18)}
 .feat .blk,.feat .four{grid-row:2}

.feat .blk{grid-column:1/6;background:var(--black);padding:36px;margin-left:-36px;margin-right:-36px}

.feat .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:36px}
 .feat .hd .h{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
 .feat .hd .h:before{content:":: ";color:var(--dim)}

.feat .who{display:grid;grid-template-columns:calc((100% - 4*var(--gut))/5) 1fr;column-gap:var(--gut);align-items:center}

.feat .av{width:100%;aspect-ratio:1;background-size:cover;background-position:center top}

.feat .who .rh .nm{margin-top:12px}
 .feat .who .rh .rec{margin-top:12px}

.feat .body{margin-top:26px}
 .feat .body p:first-child{color:var(--white)}
 .feat .body q{color:var(--muted)}

.feat .act{margin-top:26px}

.feat .four{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:26px var(--gut)}
 .feat .four .sq{background-color:var(--black)}

.feat .four .cap .pa{color:rgba(255,255,255,.7)}


/* 5 archive: black. The approved lockup on the ground; a captioned strip that travels with scroll; a typeset ruler as the door to every chapter */
.arc{background:var(--black);padding:var(--sec) 0 0;overflow:hidden}
 .arc .stripwrap,.arc .ruler{position:relative;z-index:1}

.arc .sh{border-bottom-color:var(--line)}

.arc .txt{grid-column:1/8}
 .arc .txt .nm{margin-top:0}
 .arc .hd{margin-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--line);position:relative}
 .arc .hd:after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--cc)}
 .arc .hd .K b{color:var(--white)}
 .arc .hd .num{color:var(--text);margin-right:14px}

.arc .stripwrap{position:relative}
 .arc .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;padding:12px 14px 11px;font-size:16px;background:var(--black)}
 .arc .arr:before{content:""}
 .arc .arr span{display:inline-block;transition:transform .25s ease}
 .arc .arr.l:hover span{transform:translateX(-3px)}
 .arc .arr.r:hover span{transform:translateX(3px)}
 .arc .arr.l{left:16px}
 .arc .arr.r{right:16px}

.arc .body{margin-top:26px;max-width:58ch;height:calc(5 * 1.65em);overflow:hidden}
 .arc .act{margin-top:30px}

.arc .stripwrap{margin-top:56px}
 .arc .strip{display:flex;gap:var(--gut);will-change:transform;padding-left:max(var(--m),calc((100% - 1640px)/2 + var(--m)));align-items:flex-start}

.arc .strip figure{margin:0;flex:none;--pc:var(--cc);--pi:#fff}
 .arc .strip .pic{height:420px;background-size:cover;background-position:center;position:relative;overflow:hidden}
 .arc .strip .pic:after{content:"";position:absolute;inset:0;background:inherit;transition:transform 1.2s ease}
 .arc .strip figure:hover .pic:after{transform:scale(1.015)}
 .arc .strip figcaption{transition:background-color .5s ease}
 .arc .strip figure:hover figcaption{background:color-mix(in oklch,var(--pc) 62%,var(--panel))}
 .arc .strip figure:hover .pt,.arc .strip figure:hover .pa{color:var(--pi)}

.arc .strip{cursor:grab}
 .arc .strip.drag{cursor:grabbing}

.arc .strip figcaption{background:var(--panel);padding:10px 12px 11px}
 .arc .strip .pt{font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s ease}
 .arc .strip .pa{margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);transition:color .5s ease}

.arc .ruler{padding:72px var(--m) var(--sec);position:relative}

.arc .ruler .read{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:22px}

.arc .ruler .read .name{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);position:relative}
 .arc .ruler .read .name:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:10px}
 .arc .ruler .read .name.hov{color:var(--muted)}

.arc .ruler .read .K{margin-left:22px}

.arc .ruler .ticks{height:22px;border-bottom:1px solid var(--line);position:relative}

.arc .ruler .ticks a{display:block;box-sizing:content-box;width:1px;height:8px;background:var(--dim);background-clip:content-box;padding:0 6px;cursor:pointer;position:absolute;bottom:-1px;transform:translateX(-50%)}

.arc .ruler .ticks a.has{background-color:var(--text)}

.arc .ruler .ticks a.y{height:16px;background-color:var(--muted)}
 .arc .ruler .ticks{padding-left:0}

.arc .ruler .ticks a.on{background-color:var(--cc);height:22px}

.arc .ruler .ticks a:hover{background-color:var(--text)}

.arc .ruler .years{position:relative;height:34px;margin-top:9px;font-family:var(--lab);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
 .arc .ruler .years span{position:absolute;top:0;white-space:nowrap}
 .arc .ruler .years span b{display:block;font-weight:400;color:var(--muted)}


.foot{display:flex;justify-content:space-between;align-items:center;padding:24px var(--m);border-top:1px solid var(--line);background:var(--bg);gap:20px;flex-wrap:wrap}

.foot .K{display:flex;gap:26px;flex-wrap:wrap}
@media (max-width:1200px){
  .rel .hd,.rel .rh,.rel .body,.rel .sig,.rel .act{grid-column:1/-1} .rel .body{max-width:70ch}
  .arc .txt{grid-column:1/-1}
  .rel .blk{grid-column:1/-1;grid-row:7;margin-top:48px} .rel .win{aspect-ratio:16/10;min-height:0;flex:none}
  .feat .blk{grid-column:1/8} .feat .four{grid-column:8/13}
  .arc .strip .pic{height:260px}}
@media (max-width:900px){
  .bar{gap:28px} .nav{gap:20px} .find{display:none} .feat .blk{margin:0}
  .spot .lede{grid-column:1/-1} .spot .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px var(--gut)}
  .feat .cols{min-height:0} .feat .blk{grid-column:1/-1;padding:32px 32px 28px} .feat .four{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:var(--gut)}
  .arc .strip .pic{height:200px} .arc .ruler .years span:nth-child(even){display:none} .arc .ruler .read{flex-direction:column;gap:8px}}
@media (max-width:560px){
  .bar{gap:18px} .nav{gap:16px} .nav a:before{content:""} .nav a.on{padding:6px 7px 5px} .logo .lg{display:none} .logo .mk{display:block} .logo{height:22px} .rt{display:none}
  .spot .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat .who{grid-template-columns:80px 1fr;column-gap:16px} .feat .av{width:80px} .feat .blk{padding:24px 20px} .feat .four{grid-template-columns:1fr 1fr}
  .arc .strip .pic{height:160px} .arc .strip{gap:12px}
  .body{font-size:15px}}
@media (prefers-reduced-motion:reduce){[data-py],[data-px]{transform:none!important}}


/* piece page: the piece fitted to the first screen, its record panel beneath on the same width */
.pv{background:var(--black);padding:36px 0 var(--sec);position:relative;--ph:126px}
 .pv.one{--ph:55px}

.pv .frame{max-width:1640px;margin:0 auto;padding:0 var(--m);display:flex;justify-content:center}

.pv .fit{display:inline-flex;flex-direction:column;max-width:100%}

.pv .pic{display:block;max-width:100%;max-height:calc(100vh - var(--nav) - 36px - var(--ph) - 36px);width:auto;height:auto}

.pv .arr{position:absolute;top:calc(50% - var(--ph)/2);transform:translateY(-50%);z-index:2;padding:12px 14px 11px;font-size:16px}
 .pv .arr:before{content:""}
 .pv .arr span{display:inline-block;transition:transform .25s ease}
 .pv .arr.l:hover span{transform:translateX(-3px)}
 .pv .arr.r:hover span{transform:translateX(3px)}
 .pv .arr.l{left:16px}
 .pv .arr.r{right:16px}

.pv .panel{background:var(--panel);padding:22px 26px 24px}

.pv .panel .r1{display:flex;justify-content:space-between;align-items:center;gap:36px}
 .pv .panel .r1 .nm{font-family:var(--disp);font-size:30px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}

.pv .panel .r2{display:flex;justify-content:space-between;align-items:center;gap:36px;margin-top:14px}

.pv .panel .K a{color:var(--text)}
 .pv .panel .K a:hover{color:var(--white)}
 .pv .panel .idx{color:var(--dim)}
 .pv .panel .idx b{color:var(--text)}

.pv .panel.one{padding:12px 16px 13px;display:flex;justify-content:space-between;align-items:center;gap:36px}
 .pv .panel.one .nm{font-family:var(--disp);font-size:13px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
 .pv .panel.one .sep i{padding:0 12px}
 .pv .panel.one .right{display:flex;align-items:center;gap:22px;flex:none}

/* more from the artist */
.more{background:var(--black);padding-top:0}
 .more .ar{grid-column:1/-1;margin-top:-14px;display:flex;justify-content:space-between;align-items:center;gap:20px}

.more .ar .K b{color:var(--white)}
 .more .ar .lnk{padding:3px 8px 2px;font-size:10px;vertical-align:1px;margin-left:8px}
 .more .ar .lnk:before{content:""}
 .more .ar .K>a:first-child{color:var(--text);margin-right:10px}

.more .grid{grid-column:1/-1;margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px var(--gut)}
@media (max-width:1200px){.more .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pv .pic{max-height:none}}
@media (max-width:900px){.pv .panel .r1,.pv .panel .r2,.pv .panel.one{flex-direction:column;align-items:flex-start;gap:10px} .pv .arr{top:30%} .more .ar{flex-direction:column;align-items:flex-start;gap:8px}}

.more{background:#f1f1ee;--black:#f1f1ee;--bg:#f1f1ee;--panel:#e3e4e0;--line:#cfd1cc;--white:#0d0e10;--text:#2a2d31;--muted:#6b7075;--dim:#9a9ea3}
 .foot{background:var(--bg)}
 .more{padding-top:56px}

.pv .panel .K .num{color:var(--cc)}
 .pv .panel .K a .num{color:var(--cc)}

.more .cap .pa .num{color:var(--cc);margin-right:6px}
 .more .cap .pa .num.lab{color:#b8860b}

.pv .ras{position:absolute;left:0;right:0;top:0;pointer-events:none}
 .pv .frame{position:relative;z-index:1}


/* the ground in place of the raster band: a window stuck to the top of the screen, the plate slid through it */
section:has(>.ras.gnd){overflow:clip}

.ras.gnd{position:sticky!important;top:0!important;bottom:auto!important;left:auto!important;right:auto!important;height:100vh!important;width:auto;overflow:hidden;pointer-events:none;z-index:0;opacity:1!important;transition:none!important;
 background:none!important;-webkit-mask-image:linear-gradient(#000,#000 6%,transparent var(--gfade,75%))!important;mask-image:linear-gradient(#000,#000 6%,transparent var(--gfade,75%))!important}

.ras.gnd .gp{position:absolute;left:0;right:0;top:0;will-change:transform;transition:opacity .6s ease}

.fillsec:has(.hbg.on) .ras.gnd .gp{opacity:0}

body.pageoff .cols,body.pageoff .abc,body.pageoff .mru{visibility:hidden}

body.gndoff .ras.gnd{display:none}


.pv .panel .K a.who{color:var(--text)}
 .pv .panel .K a.who:hover{color:var(--white)}

.pv .panel .kind{margin-left:14px;color:var(--muted)}

.more .unf{grid-column:1/-1}
 .more .unf .pane{max-height:0;overflow:hidden;transition:max-height .5s ease}
 .more .unf .pane.on{max-height:1200px}

.more .unf .pane .grid{padding-top:56px}

.more .doors{grid-column:1/-1;margin-top:40px;display:flex;gap:12px;align-items:center}

.more .doors .lnk:before{content:">";margin-right:7px;display:inline-block;width:7px;text-align:center;transform-origin:50% 50%;transition:transform .3s ease}

.more .doors .lnk:before{transform:rotate(90deg)}
 .more .doors .lnk.on:before{transform:rotate(-90deg)}

.more .unf .pane .seeall{margin-top:40px}
 .more .unf .pane .seeall .lnk:before{content:">";margin-right:7px;display:inline-block;width:7px;text-align:center}


.pv{padding-bottom:36px}
 .pv .fit{max-width:none}
 .pv .pic{max-height:none;max-width:none;width:100%;height:auto}

.lnk.soc:before{content:none}
 .lnk.soc{display:inline-flex;align-items:center}
 .lnk.soc .ico{display:inline-block;width:12px;height:12px;fill:currentColor;margin-right:8px}
 .lnk.soc .ico-x{width:10px;height:10px;margin:0 9px 0 1px}
 .lnk.soc .ico-x{fill:var(--cc)}
 .lnk.soc .ico-facebook{fill:#1877f2}
 .lnk.soc .ico-instagram{fill:url(#dc-ig)}

.more .ar .lnk.soc{padding:3px 8px 2px}
 .more .ar .lnk.soc .ico{width:10px;height:10px;margin-right:6px}

.chsec{position:relative}
.chsec .cols{position:relative;z-index:1}
.chsec{background-repeat:no-repeat;background-position:top center;background-size:100% auto}
.chsec .lock{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;position:relative;margin-bottom:14px}
.chsec .lock>div:first-of-type{grid-column:1/10}
.chsec .lock .anm{font-family:var(--disp);font-size:26px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin:0 0 14px;position:relative}
.chsec .lock .K b{color:var(--white)}
.chsec .lock .anm:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:14px;top:0}
.chsec .lock .srt{grid-column:10/13;display:flex;align-items:baseline;gap:12px;margin:0}
.chsec .srt span{color:var(--dim)}
.chsec .srt b{color:var(--muted);cursor:pointer;transition:color .25s ease}
.chsec .srt b:hover{color:var(--text)}
.chsec .srt b.on{color:var(--cc)}
.chsec .rule{grid-column:1/-1;border-bottom:1px solid var(--line);margin-bottom:40px}
.chsec .read .K .num{color:var(--cc)}
.chsec .read .K .num.lab{color:var(--lab)}
.chsec .grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px var(--gut)}
.chsec .cap .pa .num{color:var(--cc);transition:color .5s ease}
.chsec .cap .pa .num.lab{color:var(--lab)}
.chsec .card:hover .cap .pa .num{color:var(--pi)}
.chsec .cap .pt{font-family:var(--disp);font-size:16px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.chsec .cap .l1{margin-bottom:4px}
.chsec{--lab:#e8b84a}
.chsec .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.chsec .sq{aspect-ratio:3/2}
.chsec .cap .pa{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chsec .cap .pa i{font-style:normal;color:var(--dim);padding:0 7px}
.chsec .ras{position:absolute;left:0;right:0;top:0;pointer-events:none}
.chsec{background:var(--black)}
.chsec .cap .pt{font:500 12px/1.4 var(--mono);letter-spacing:.05em}
.chsec .cap .l1{margin-bottom:2px}
.lnk.soc:before{content:none}
 .lnk.soc{display:inline-flex;align-items:center}
 .lnk.soc .ico{display:inline-block;width:12px;height:12px;fill:currentColor;margin-right:8px}
 .lnk.soc .ico-x{width:10px;height:10px;margin:0 9px 0 1px}
 .lnk.soc .ico-x{fill:var(--cc)}
 .lnk.soc .ico-facebook{fill:#1877f2}
 .lnk.soc .ico-instagram{fill:url(#dc-ig)}

.abh{background:var(--black);padding-bottom:0}
 .abh .rule{margin-bottom:0}

.abb+.abb{padding-top:0}
 .abb .sh{margin-bottom:40px}

.abb .col{grid-column:3/10;max-width:68ch;color:var(--text)}
 .abb .col p{margin:0 0 1em;font-size:17px;line-height:1.7}
 .abb .col p:last-child{margin-bottom:0}

.abb .col p.first{color:var(--white);font-weight:500}

.abb .col .alk{display:flex;align-items:center;gap:12px;margin-top:26px}

.foot{padding:36px var(--m);gap:26px}
 .foot .flogo{display:inline-flex;align-items:center;height:16px;color:var(--white)}
 .foot .flogo svg{height:16px;width:auto}
 .foot>.K{display:inline}
@media (max-width:1100px){.abb .col{grid-column:1/-1}}

.lnk.soc:before{content:none}
 .lnk.soc{display:inline-flex;align-items:center}
 .lnk.soc .ico{display:inline-block;width:12px;height:12px;fill:currentColor;margin-right:8px}
 .lnk.soc .ico-x{width:10px;height:10px;margin:0 9px 0 1px}
 .lnk.soc .ico-x{fill:var(--cc)}
 .lnk.soc .ico-facebook{fill:#1877f2}
 .lnk.soc .ico-instagram{fill:url(#dc-ig)}

.abh{background:var(--black);padding-bottom:0}
 .abh .rule{margin-bottom:0}
 .abh .lock .srt{grid-column:7/13;justify-content:flex-end;gap:12px;align-items:center}

/* an art band: the piece behind with parallax, dimmed, the head bar, the glass block, the credit */
.aband{position:relative;overflow:hidden;padding-bottom:84px}

.aband .bgimg{position:absolute;left:0;right:0;top:-60px;height:max(calc(100% + 120px),1100px);background-size:cover;background-position:center;will-change:transform}

.aband .dim{position:absolute;inset:0;background:rgba(10,11,12,.72);pointer-events:none}

.aband .cols{position:relative;z-index:1}

.aband .blk{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:36px;background:rgba(10,11,12,.5);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}

.aband .hcap{position:absolute;z-index:1;right:max(var(--m),calc((100% - 1640px)/2 + var(--m)));bottom:22px;color:rgba(255,255,255,.7);text-decoration:none}
 .aband .hcap b{color:#fff}
 .aband .hcap i{color:rgba(255,255,255,.35)}
 .aband .hcap:hover b{color:var(--cc)}

.read{grid-column:1/9;color:var(--text)}
 .read.half{grid-column:1/7}
 .read p{margin:0 0 1em;font-size:17px;line-height:1.7}
 .read p:last-child{margin-bottom:0}

.read p.lede{font-size:20px;line-height:1.6;color:var(--white);margin-bottom:26px}

/* the ruler */
.tline{grid-column:1/-1;position:relative;margin-top:56px;height:120px}

.tline .rule{position:absolute;left:0;right:0;top:66px;border-top:1px solid var(--muted)}

.tline .yrs{position:absolute;left:0;right:0;top:76px;height:14px}
 .tline .yr{position:absolute;transform:translateX(-50%);font-family:var(--lab);font-size:11px;color:var(--muted);letter-spacing:.04em}

.tline .yr:first-child{transform:none}
 .tline .yr:last-child{transform:translateX(-100%)}

.tline .tks{position:absolute;left:0;right:0;top:0;height:66px}

.tline .tk{position:absolute;bottom:0;width:1px;height:26px;background:var(--white);display:block}
 .tline .tk.lab{background:var(--lab)}
 .tline .tk:hover{background:var(--cc)}

.tline .tk .tc{position:absolute;bottom:34px;left:0;transform:translateX(-50%);width:220px;display:none;background:var(--panel);z-index:3}

.tline .tk:hover .tc{display:block}
 .tline .tk .tc .sq{display:block;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--black)}

.tline .tk .tc .cap{display:block;padding:10px 12px 11px}
 .tline .tk .tc .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white)}

.tline .tk .tc .pa{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
 .tline .tk .tc .num{color:var(--cc)}
 .tline .tk .tc .num.lab{color:var(--lab)}
 .tline .tk .tc i{font-style:normal;color:var(--dim);padding:0 7px}

.tline .tks .tk:nth-child(-n+3) .tc{transform:none}
 .tline .tks .tk:nth-last-child(-n+3) .tc{transform:translateX(-100%)}

/* the field of artists: eighteen tiles scattered on a 6 x 4 cell grid at right, the name on hover */
.field{grid-column:7/13;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gut);aspect-ratio:6/4}

.field a{position:relative;display:block;background-size:cover;background-position:center;background-color:var(--black);overflow:hidden}

.field a span{position:absolute;left:0;right:0;bottom:0;background:var(--panel);padding:6px 8px 7px;font:500 9px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);transform:translateY(100%);transition:transform .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.field a:hover span{transform:none}

/* contact: the application fold-down */
.aband .doors{grid-column:1/-1;margin-top:26px;display:flex;gap:12px;align-items:center}

.aband .doors .lnk:before{content:">";margin-right:7px;display:inline-block;width:7px;text-align:center;transform-origin:50% 50%;transition:transform .3s ease;transform:rotate(90deg)}
 .aband .doors .lnk.on:before{transform:rotate(-90deg)}

.aband .unf{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
 .aband .unf .pane{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
 .aband .unf .pane{max-height:0;overflow:hidden;transition:max-height .5s ease}
 .aband .unf .pane.on{max-height:900px}

.app{grid-column:1/9;display:grid;grid-template-columns:1fr;row-gap:26px;padding-top:40px}

.app .f{display:block}
 .app .f.wide{grid-column:1/-1}
 .app .L{display:block;margin-bottom:8px;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.app .fld{display:block;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--dim);color:var(--white);font:400 15px/1.5 var(--txt);padding:6px 0 8px;outline:none;border-radius:0}
 .app .fld:focus{border-bottom-color:var(--white)}
 .app textarea.fld{resize:vertical}

.app .ups{display:flex;gap:12px;align-items:center}
 .app .act{display:flex;gap:18px;align-items:center}
@media (max-width:1100px){.read,.read.half{grid-column:1/-1} .field{grid-column:1/-1;margin-top:36px} .app{grid-column:1/-1} .abh .lock .srt{grid-column:1/-1;justify-content:flex-start;margin-top:18px}}


/* one screen of art at the top, pinned behind a window; the page slides over it */
.abhero{position:relative;clip-path:inset(0);height:calc(100vh - var(--nav));min-height:560px;display:flex;flex-direction:column;justify-content:flex-end}

.abhero .win{position:absolute;inset:0;pointer-events:none}
 .abhero .win .pin{position:fixed;inset:0;background-size:cover;background-position:center;background-color:var(--black)}
 .abhero .win .dim{position:fixed;inset:0;background:rgba(10,11,12,.45)}

.abhero .cols{position:relative;z-index:1;padding-top:0;padding-bottom:64px}

.abhero .lock{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:36px}

.abhero .lock .anm{font-family:var(--disp);font-size:26px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px;position:relative}

.abhero .lock .anm:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:14px;top:0}
 .abhero .lock .K{color:rgba(255,255,255,.7)}
 .abhero .lock .K b{color:#fff}
 .abhero .lock .K i{color:rgba(255,255,255,.35)}

.abhero .lock .alk{display:flex;gap:12px;align-items:center;flex:none}

.abhero .hcap{position:absolute;z-index:1;right:max(var(--m),calc((100% - 1640px)/2 + var(--m)));bottom:22px;color:rgba(255,255,255,.7);text-decoration:none}
 .abhero .hcap b{color:#fff}
 .abhero .hcap i{color:rgba(255,255,255,.35)}
 .abhero .hcap:hover b{color:var(--cc)}

/* the rest on the light break */
.abs+.abs{padding-top:0}
 .abs .sh{margin-bottom:40px}

.read{grid-column:1/8;color:var(--text)}
 .read.half{grid-column:1/7}
 .read p{margin:0 0 1em;font-size:17px;line-height:1.7}
 .read p:last-child{margin-bottom:0}

.read p.lede{font-size:20px;line-height:1.6;color:var(--white);margin-bottom:26px}

.tline{grid-column:1/-1;position:relative;margin-top:56px;height:120px}
 .tline .rule{position:absolute;left:0;right:0;top:66px;border-top:1px solid var(--dim)}

.tline .yrs{position:absolute;left:0;right:0;top:76px;height:14px}
 .tline .yr{position:absolute;transform:translateX(-50%);font-family:var(--lab);font-size:11px;color:var(--muted);letter-spacing:.04em}
 .tline .yr:first-child{transform:none}
 .tline .yr:last-child{transform:translateX(-100%)}

.tline .tks{position:absolute;left:0;right:0;top:0;height:66px}
 .tline .tk{position:absolute;bottom:0;width:1px;height:26px;background:var(--text);display:block}
 .tline .tk.lab{background:#b8860b}
 .tline .tk:hover{background:var(--cc)}

.tline .tk .tc{position:absolute;bottom:34px;left:0;transform:translateX(-50%);width:220px;display:none;background:var(--panel);z-index:3}
 .tline .tk:hover .tc{display:block}

.tline .tk .tc .sq{display:block;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--line)}
 .tline .tk .tc .cap{display:block;padding:10px 12px 11px}

.tline .tk .tc .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
 .tline .tk .tc .pa{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.tline .tk .tc .num{color:var(--cc)}
 .tline .tk .tc .num.lab{color:#b8860b}
 .tline .tk .tc i{font-style:normal;color:var(--dim);padding:0 7px}

.tline .tks .tk:nth-child(-n+3) .tc{transform:none}
 .tline .tks .tk:nth-last-child(-n+3) .tc{transform:translateX(-100%)}

.field{grid-column:8/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);align-self:start}
 .field a{position:relative;display:block;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--panel);overflow:hidden;transition:opacity .6s ease}
 .field a.out{opacity:0}

.field a span{position:absolute;left:0;right:0;bottom:0;background:var(--panel);padding:6px 8px 7px;font:500 9px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);transform:translateY(100%);transition:transform .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .field a:hover span{transform:none}

.app{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:26px;margin-top:40px}
 .app .f{display:block}
 .app .f.wide{grid-column:1/-1}

.app .L{display:block;margin-bottom:6px;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.app .fld{display:block;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--dim);color:var(--white);font:400 15px/1.5 var(--txt);padding:6px 0 8px;outline:none;border-radius:0}
 .app .fld:focus{border-bottom-color:var(--white)}
 .app textarea.fld{resize:vertical}
@media (max-width:1100px){.read,.read.half{grid-column:1/-1} .field{grid-column:1/-1;margin-top:36px} .abhero .lock{flex-direction:column;align-items:flex-start}}


.abhero .cols{padding-bottom:44px;width:100%;box-sizing:border-box}
 .hero.abhero{overflow:visible}
 .hero.abhero .ft{position:static;padding:0;display:block;color:#fff}
 .abhero .ft{grid-column:1/-1}
 .abhero .ft .k{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1;display:flex;align-items:center;height:11px;color:#fff}

.abhero .ft .k .hlg{height:18px;width:auto;fill:currentColor;margin-left:3.7px}
 .abhero .ft .t{font-family:var(--disp);font-size:clamp(48px,7.4vw,124px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:-6px 0 0 -.06em}

.abhero .win .dim{background:rgba(10,11,12,.3)}

/* the ground under every section, no fade; inverted on the light break */
.abs{position:relative}
 .abs .cols{position:relative;z-index:1}

.abs .ras.gnd{-webkit-mask-image:none!important;mask-image:none!important}
 .abs.light .ras.gnd{filter:invert(1)}

.abs:not(.light){background:var(--black)}

.read{grid-column:1/8}
 .side{grid-column:9/13;align-self:start}

.fig{margin:0}
 .fig .im{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--panel)}
 .fig.chfig .im{aspect-ratio:1}

.fig figcaption{display:block;background:var(--panel);padding:10px 12px 11px}
 .fig figcaption b{color:var(--white)}
 .fig figcaption .num{color:var(--cc)}
 .fig figcaption .num.lab{color:#b8860b}

.tline .tk{transition:background .2s ease}
 .tline .tk.on{background:var(--cc)}
 .tline .tk.on.lab{background:var(--cc)}

.abs .alk{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.side .app{margin-top:0}
 .field{grid-column:auto}
@media (max-width:1100px){.side{grid-column:1/-1;margin-top:36px}}

.pfoot{background:#0a0b0c;padding-bottom:48px;cursor:default}
 .pfoot .fin{max-width:1640px;margin:0 auto;padding:0 var(--m);display:flex;align-items:center;justify-content:center;gap:18px;color:#9a9ea3}
.pfoot .flg{display:block;height:14px;width:auto;fill:currentColor}
 .pfoot .K{color:#9a9ea3;white-space:nowrap}
 .pfoot .K i{color:#5c6065}

/* the hero: no dim; the lockup and the credit above the dissolve band */
.abhero .cols{padding-bottom:140px}
 .abhero .hcap{bottom:118px}

/* the sections: 160px each side, the band inside the top 160 */
.abs,.abs+.abs{padding:160px 0}

/* the contact forms */
.side .tabs{display:flex;align-items:center;gap:12px;margin-bottom:26px}
 .side .app{display:none;margin-top:0}
 .side .app.on{display:grid}
@media (max-width:1100px){.abs,.abs+.abs{padding:128px 0}}


.abs,.abs+.abs{padding:128px 0}

.abhero{height:min(566px,60vh);min-height:420px}
 .abhero .cols{padding-bottom:44px}
 .abhero .hcap{bottom:22px}

.pfoot{padding-top:48px;border-top:1px solid #2a2e32}

.read .tabs{display:flex;align-items:center;gap:12px;margin-top:40px}
 .read .app{display:none;margin-top:26px}
 .read .app.on{display:grid}
@media (max-width:1100px){.abs,.abs+.abs{padding:96px 0}}

:root{--slice:min(566px,60vh)}
.abhero{position:relative;clip-path:inset(0);height:var(--slice);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible}
.abhero .win{position:absolute;inset:0;pointer-events:none}
 .abhero .win .pin{position:fixed;inset:0;background-size:cover;background-position:center;background-color:var(--black)}
.abhero .cols{position:relative;z-index:1;padding-top:0;padding-bottom:44px;width:100%;box-sizing:border-box}
.abhero .lock{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:36px}
.abhero .lock .anm{font-family:var(--disp);font-size:26px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px;position:relative}
.abhero .lock .anm:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:14px;top:0}
 .abhero .lock .K{color:rgba(255,255,255,.7)}
 .abhero .lock .K b{color:#fff}
 .abhero .lock .K i{color:rgba(255,255,255,.35)}
.abhero .lock .rgt{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none}
 .abhero .rgt .doors{display:flex;align-items:center;gap:12px}
 .abhero .rgt .doors:empty{display:none}
.abhero .rgt .hcap{position:static;padding:0;line-height:1;display:block}
 .abhero .rgt .hcap b{color:#fff}
.abhero .srt{display:flex;align-items:baseline;gap:12px}
 .abhero .srt span{color:rgba(255,255,255,.45)}
 .abhero .srt b{color:rgba(255,255,255,.6);cursor:pointer}
 .abhero .srt b:hover{color:#fff}
 .abhero .srt b.on{color:var(--cc)}
@keyframes bloom{from{filter:brightness(1.7) saturate(.6)}to{filter:brightness(1) saturate(1)}}
 @keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}

.abs .cols{min-height:calc(var(--slice) - 96px)}
 .side{align-self:stretch;display:flex;flex-direction:column}
 .side .fig{flex:1;display:flex;flex-direction:column}
 .side .fig>a{flex:1;display:flex}
 .side .fig .im{flex:1;aspect-ratio:auto;min-height:320px}

.side .fig.chfig>a{flex:none}
 .side .fig.chfig .im{aspect-ratio:1;flex:none}

/* the ground arrives: each plate fades in over its top 200px and out over its bottom 200px */
.abs .ras.gnd .gp{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 200px),transparent)}

.side .field{align-self:stretch;width:100%}

.abs .read .alk{margin:0 0 26px}
 .abs .read .alk+p.lede{margin-top:0}

.side .fig.chfig>a{flex:none;display:block}
 .side .fig.chfig .im{display:block;width:100%;aspect-ratio:1;flex:none}

.abs:not(.light) .side{grid-column:1/5;grid-row:2}
 .abs:not(.light) .read{grid-column:6/13;grid-row:2}
@media (max-width:1100px){.abs:not(.light) .side,.abs:not(.light) .read{grid-column:1/-1;grid-row:auto}}
.abhero .lock{align-items:last baseline}

/* the header band from his pool, drawn as covers.html draws it (canon R25) */.abhero{--tc:#fff}
 .abhero .win .pin{position:absolute}
 .abhero .lock .anm{color:var(--tc)}
 .abhero .lock .K{color:color-mix(in srgb,var(--tc) 70%,transparent)}
 .abhero .lock .K b,.abhero .rgt .hcap b{color:var(--tc)}
 .abhero .lock .K i{color:color-mix(in srgb,var(--tc) 35%,transparent)}
 .abhero .lock .anm:before{color:var(--mk,var(--cc))}
 .abhero .plates,.abhero .shade{position:absolute;inset:0;z-index:1;pointer-events:none}
 .abhero .plates i{position:absolute;display:block;background:var(--plate)}

/* the band's animation over its still (U16) */ .abhero .win .pin .hv{position:absolute;display:block;max-width:none;object-fit:fill;opacity:0;transition:opacity .6s ease;pointer-events:none}
 .abhero .win .pin .hv.on{opacity:1}

/* the three application links, one under the other across the form (About 28) */
.app .lk3 .fld+.fld{margin-top:14px}


/* the forms sent, and a field missing or refused (About 29) */
.tabs .lnk.on{background:var(--cc);color:var(--cc-ink)}

.tabs .lnk.on:before{color:var(--cc-ink)}

.app .f.err .L{color:var(--cc)}

.app .fld.err,.app .f.err:not(.lk3)>.fld{border-bottom-color:var(--cc)}

.app .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.app .sn{display:none;grid-column:1/-1;margin:0}

.app.sent>:not(.sn){display:none}

.app.sent>.sn{display:block}


/* the join page (Join page 01, canon U30) */
/* the bar: the logo alone, not a link */
.bar .logo{cursor:default}

/* nothing links behind the gate: the credit keeps its colour under the mouse */
.abhero .rgt .hcap:hover b{color:var(--tc)}

a:not([href]){cursor:default}

/* the FAQ: each question a lede, 40px after the answer before it */
.read p+p.lede{margin-top:40px}



body.locked .abs{display:none}
@media (max-width:900px){.abhero .win{overflow:hidden}}


/* the ground (groundpage.py, ground7.js): one SVG layer under each section's content */
.g20{position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity .6s ease}

.g20 svg{position:absolute;left:0;top:0;display:block;overflow:visible}

.fillsec:has(.hbg.on) .g20{opacity:0}

section.abs:nth-of-type(2){position:relative}
section.abs:nth-of-type(2)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(3){position:relative}
section.abs:nth-of-type(3)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(4){position:relative}
section.abs:nth-of-type(4)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(5){position:relative}
section.abs:nth-of-type(5)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(6){position:relative}
section.abs:nth-of-type(6)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(7){position:relative}
section.abs:nth-of-type(7)>.cols{position:relative;z-index:1}

section.abs:nth-of-type(8){position:relative}
section.abs:nth-of-type(8)>.cols{position:relative;z-index:1}

/* the sections the ground runs in clip at their edges, as under the drafting ground (groundsecs.py) */
section:has(>.g20){overflow:clip}


/* Join page 02: a figure that moves, its video over its still, muted and looping; the still alone with reduced motion */
.fig .im{position:relative;overflow:hidden}

.fig .im video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.fig .im video{display:none}}

/* The surface's four screens, two across under the copy */
.shots{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:56px}

.shots .fig .im{display:block;aspect-ratio:16/10;background-size:cover;background-position:center top}
@media (max-width:1100px){.shots{grid-template-columns:minmax(0,1fr)}}

/* a plate after the copy (the Wayback Machine) */
.read .alk{display:flex;gap:12px;margin-top:26px}
/* Join page 04: the home's hero (home-62, canon 3.5) as the page's head */
 .hero{position:relative;height:calc(100vh - var(--nav));min-height:560px;overflow:hidden}

.hero .slides{position:absolute;left:0;right:0;top:0;height:100%}
 .hero .sl{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;transform:scale(1)}
 .hero .sl.on{opacity:1}


.hero .sl img,.hero .sl video{position:absolute;display:block;max-width:none;left:0;top:0;width:100%;height:100%;object-fit:cover}

.hero .sl video{opacity:0;transition:opacity .6s ease;pointer-events:none}

.hero .sl video.on{opacity:1}
 .hero .sl.on.bl{animation:settle 1.4s ease-out both}
 @keyframes settle{from{filter:brightness(1.35) saturate(.8)}to{filter:brightness(1) saturate(1)}}

.hero .ft{position:absolute;left:max(var(--m),calc((100% - 1640px)/2 + var(--m)));right:max(var(--m),calc((100% - 1640px)/2 + var(--m)));bottom:0;padding:0 0 44px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;color:#fff;transition:color 1.2s ease;z-index:2}

.hero .k{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1;position:relative}
 .hero .k:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:10px}

.hero .t{font-family:var(--disp);font-size:clamp(48px,7.4vw,124px);line-height:1;letter-spacing:.02em;text-transform:uppercase;margin:-6px 0 0 -.06em}

.hero .rec{margin-top:11px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1;opacity:.8}

.hero .btn{margin-top:15px}

.hero .hcap{text-align:right;flex:none}
 .hero .hcap .pt{font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
 .hero .hcap .pa{margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;opacity:.7}

.hero .idx{display:inline-flex;align-items:baseline;gap:12px;margin-top:12px}
 .hero .idx span{font-family:var(--mono);font-size:11px;font-weight:500;opacity:.45;cursor:pointer}
 .hero .idx span.on{opacity:1;color:var(--cc)}

.hero .door{position:absolute;left:40px;top:36px;z-index:2}
@media (max-width:900px){
  .hero{min-height:480px} .hero .ft{flex-direction:column;align-items:flex-start;gap:22px;padding:0 0 28px} .hero .hcap{text-align:left}}
@media (max-width:560px){
  .hero{height:calc(100svh - var(--nav));min-height:420px} .hero .t{font-size:40px} .hero .rec i{padding:0 4px}}



.hero .k{display:flex;align-items:center;gap:14px;height:11px}

.hero .k .hlg{width:auto;fill:currentColor;flex:none;position:relative}

.hero .k .hlg{height:14px;margin-left:4.1px;top:1.5px}


.hero .k .hlg{height:18px;margin-left:3.7px;top:0px}


.hero .k:before{content:none}
 .hero .k .g{color:var(--cc);font-weight:400}


.hero .k:before{content:"::";position:absolute;right:100%;margin-right:10px;color:var(--cc)}
.hero .k .num{color:var(--cc);margin-left:4px}
.hcap{position:absolute;z-index:1;right:max(var(--m),calc((100% - 1640px)/2 + var(--m)));bottom:22px;color:rgba(255,255,255,.7);display:block;text-decoration:none}
.hcap b{color:#fff}
 .hcap i{color:rgba(255,255,255,.35)}
 .hcap:hover b{color:var(--cc)}

.hcap{position:absolute;z-index:1;right:max(var(--m),calc((100% - 1640px)/2 + var(--m)));bottom:22px;color:rgba(255,255,255,.7);display:block;text-decoration:none}
.hcap b{color:#fff}
 .hcap i{color:rgba(255,255,255,.35)}
 .hcap:hover b{color:var(--cc)}


.hero .hcap{display:flex;align-items:baseline;gap:10px;text-align:left}
 .hero .hcap .pa{margin:0}
 .hero .hcap .pa:before{content:"/";opacity:.5;margin-right:10px}
 .hero .hcap .idx{margin-left:16px}


.hero .hcap{position:static;padding-bottom:6px}

.hero .hcap{padding-bottom:9px}

.hero .hcap .cl{line-height:1;color:inherit;white-space:nowrap}

.hero .hcap .cl b{color:inherit;font-weight:500}

.hero .hcap .cl span{opacity:.7}

.hero .hcap .cl i{color:inherit;font-style:normal;opacity:.35;padding:0 7px}

.hero .hcap .idx,.hero .hcap .idx span{line-height:1}
/* the password screen: Password and Enter under the record lines, in the slide's type colour */
.hero .app.pw{display:none;grid-column:auto;grid-template-columns:1fr;row-gap:26px;margin:30px 0 0;width:min(360px,100%)}
body.locked .hero .app.pw{display:grid}
.hero .app.pw .L{color:color-mix(in srgb,currentColor 70%,transparent)}
.hero .app.pw .fld{color:inherit;border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
.hero .app.pw .fld:focus{border-bottom-color:currentColor}
.hero .app.pw .f.err .L{color:var(--cc)}
.hero .app.pw .f.err>.fld{border-bottom-color:var(--cc)}
.hero .app.pw .L.dl{display:none;margin:8px 0 0}
.hero .app.pw .f.wrong .L.dl{display:block}
/* the ruler's ticks 3px, centred on the day, hovered over 9px */
.tline .tk{width:3px;margin-left:-1px}
.tline .tk:after{content:"";position:absolute;left:-3px;right:-3px;top:-8px;bottom:0}
/* the players (piece-38's and piece-30's bars): a track beside the copy, the stages */
.jp .player{display:flex;flex-direction:column;gap:0;height:calc(100vh - var(--nav) - 150px - 72px - var(--ph));min-height:420px;background:var(--panel);padding:0;box-sizing:border-box;border-bottom:1px solid var(--line)}
.jp .player .vis{position:relative;flex:1;min-height:0;background:#08020d}
.jp .player .vis canvas{position:absolute;left:0;top:0;display:block;width:100%;height:100%}
.jp .player .vis canvas.nogl{display:none}
.jp .player .vis.nogl{background-position:center;background-size:contain;background-repeat:no-repeat}
.jp .vbar .row{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:12px 16px 13px}
.jp .vbar .vc{display:flex;align-items:center;gap:12px}
.jp .vbar .pp{margin:0}
.jp .vbar .pp.on:before{content:":: "}
.jp .vbar .row{display:grid;grid-template-columns:1fr auto 1fr}
.jp .vbar .vc{justify-self:start}
.jp .vbar .tc{justify-self:center}
.jp .vbar .vol{justify-self:end;display:flex;align-items:center;gap:14px}
.jp .vbar .mu{display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--text);cursor:pointer}
.jp .vbar .mu:hover{color:var(--white)}
.jp .vbar .mu svg{display:block;width:18px;height:18px}
.jp .vbar .mu .c{fill:currentColor}
.jp .vbar .mu .w,.jp .vbar .mu .x{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.jp .vbar .mu.off .w,.jp .vbar .mu:not(.off) .x{display:none}
.jp .vbar .vol input{-webkit-appearance:none;appearance:none;display:block;width:96px;height:20px;margin:0;padding:0;background:none;cursor:pointer;--v:0%}
.jp .vbar .vol input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--cc) var(--v),var(--line) var(--v))}
.jp .vbar .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:0;border-radius:0;background:var(--text)}
.jp .vbar .vol input::-moz-range-track{height:2px;background:var(--line)}
.jp .vbar .vol input::-moz-range-progress{height:2px;background:var(--cc)}
.jp .vbar .vol input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:0;background:var(--text)}
.jp .vbar .vol input:hover::-webkit-slider-thumb{background:var(--white)}
.jp .vbar .vol input:hover::-moz-range-thumb{background:var(--white)}
.jp .vbar .vol input:focus{outline:none}
.jp .vbar .vol input:focus-visible{outline:1px solid var(--dim);outline-offset:4px}
.jp .vbar .vol input[hidden]{display:none}
.jp .vbar .tc{color:var(--dim);flex:none}
.jp .vbar .tc b{color:var(--text)}
@container (max-width:480px){.jp .vbar .vol input{display:none}}
.jp .player{container-type:inline-size}
.jp .player .vbar{flex:none;background:var(--panel);border:0}
.jp .player .vis{overflow:hidden}
.jp .vbar .prog{position:relative;height:2px;background:var(--line);cursor:pointer}
.jp .vbar .prog:after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.jp .vbar .prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cc)}
.jp .vbar{background:var(--panel);border-bottom:1px solid var(--line)}
.jp .player .vis{background-size:cover;background-position:center}
.side .fig.au{flex:1;display:flex;flex-direction:column}
.side .fig.au .player{flex:1;height:auto;min-height:320px;border-bottom:0}
.shots .stg .im{position:relative;overflow:hidden;background:var(--black);container-type:inline-size}
.shots .stg .player{position:absolute;inset:0;height:auto;min-height:0;border-bottom:0}
.jp .vplayer{position:absolute;inset:0;display:flex;flex-direction:column;container-type:inline-size}
.jp .vbox{position:relative;flex:1;min-height:0;background:#000}
.jp .vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.jp .vplayer .vbar{flex:none;border:0}
/* the credit over the eleven numbers, the two on the two record lines: the numbers on the last, with no door (canon
   3.5), on Enter's text line when locked; under the lockup under 900px, the credit wrapping under 561px */
#jh .hcap{flex-direction:column;align-items:flex-end;gap:11px;padding-bottom:0}
/* the credit in the slide's type colour, as the lockup (canon 3.5: the type colour on .ft and the credit) */
.hero .hcap{color:inherit}
#jh .hcap .idx{margin:0}
body.locked #jh .hcap{padding-bottom:9px}
@media (max-width:900px){#jh .hcap{align-items:flex-start}}
@media (max-width:560px){#jh .hcap .cl{white-space:normal;line-height:1.4}}
/* the Home stage: the home's hero at the frame's size, as the home under 900px (the credit under the lockup), its title
   sized to the frame */
.stg .hero{position:absolute;inset:0;height:auto;min-height:0}
.stg .hero .ft{left:22px;right:22px;padding:0 0 22px;flex-direction:column;align-items:flex-start;gap:14px}
.stg .hero .hcap{text-align:left}
.stg .hero .k{flex-wrap:wrap;height:auto;row-gap:10px}
.stg .hero .hcap{flex-wrap:wrap;row-gap:10px}
@container (max-width:480px){.stg .hero .hcap .cl{white-space:normal;line-height:1.4}}
.stg .hero .t{font-size:clamp(28px,9cqw,76px)}
@media (max-width:560px){.shots .stg .im{aspect-ratio:4/5}}
/* the Animation stage (r0929j23): its video cropped to fill its picture (his 29 Sept, of Icarus in the stage: "shit i was
   hoping we'd have something that filled the player. can we fake that with icarus?"); on a phone Yours Truly in place of
   Icarus ("yeah bring yours truly back on mobile good call"), its picture 4:5 with the bar and the record under it, the
   stage as tall as they are; each the other's `display:none`, join.js giving the file to the one showing */
.shots .anim .vbox video{object-fit:cover}
.shots .anim.ph{display:none}
@media (max-width:560px){.shots .anim.dk{display:none}.shots .anim.ph{display:block}.shots .anim.ph .im{aspect-ratio:auto}.shots .anim.ph .vplayer{position:relative}.shots .anim.ph .vbox{flex:none;aspect-ratio:4/5}}
/* the Music stage left out under 901px, Extrinsic beside the words the page's one track on a phone (his 28 Sept, of the
   two tracks one after the other on his phone: "lose the second one") */
@media (max-width:900px){.shots .stg.mus{display:none}}

/* Join page 05: a head bar written "I. History / What's a Depthcore?", its slash as a record line's */
.sh .h i{font-style:normal;color:var(--dim);padding:0 7px}
/* the credit and the numbers on the record line, one row, as the home has them (eight slides); under 901px under the
   lockup, the numbers under the credit where the two do not fit a line */
#jh .hcap{flex-direction:row;align-items:baseline;gap:10px}
#jh .hcap .idx{margin-left:16px}
@media (max-width:900px){#jh .hcap{align-items:baseline;flex-wrap:wrap;row-gap:10px}#jh .hcap .idx{margin-left:0}}
section.abs:nth-of-type(8){position:relative}section.abs:nth-of-type(8)>.cols{position:relative;z-index:1}

/* Join page 06, the players as the site's (piece-music.css, piece-video.css, mobile.css; the page's players for .pv): the record under
   each, the line over it the player's; a record in a frame 720px or narrower stacked (the video page's); a phone's record
   under 900px */
.jp .panel.one{flex:none;background:var(--panel);padding:12px 16px 13px;display:flex;justify-content:space-between;align-items:flex-end;gap:36px;border-top:1px solid var(--line)}
.jp .panel.one .nm{font-family:var(--disp);font-size:13px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.jp .panel.one .kind{margin-left:14px;color:var(--muted)}
.jp .panel.one .sep i{padding:0 12px}
.jp .panel.one .right{display:flex;align-items:center;gap:22px;flex:none;margin-bottom:-3px}
.jp .panel.one .K a{color:var(--text);white-space:nowrap}
.jp .panel.one .K .num{color:var(--cc)}
.jp .panel.one .idx{color:var(--dim)}
.jp .panel.one .idx b{color:var(--text)}
.jp .panel.one .nw{white-space:nowrap}
.jp .panel.one .btn .sz{opacity:.6;margin-left:6px}
@container (max-width:720px){.jp .panel.one{flex-direction:column;align-items:flex-start;gap:10px}.jp .panel.one .right{margin:0}}
/* a track's record on the desk: its Download plate the phone's download mark at the right of the record's last line,
   centred on it (his 29 Sept, of About's player: "the player showing a giant download button here is ridiculous ... it
   should compress to a small download icon on the metadata line"; r0929j20, where the record stacked; then "yeah i think
   we can use the download icon everywhere instead of the giant download zip button"; r0929j21) */
@media (min-width:901px){.jp .player>.panel.one{position:relative}.jp .player>.panel.one>span:first-child{padding-right:22px}.jp .player>.panel.one>.right{display:none}.jp .player>.panel.one .K .dl{display:inline}.jp .player>.panel.one .K .dl>.nw,.jp .player>.panel.one .K .dl>.ix{display:none}.jp .player>.panel.one .K .dli{position:absolute;right:10px;bottom:12px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text)}.jp .player>.panel.one .K .dli:hover{color:var(--white)}.jp .player>.panel.one .K .dli svg{width:12px;height:12px;display:block}}
/* a record's two lines on the desk, as the music page's (canon 3.7; his 29 Sept, of the join page's Music stage: "all
   metadata after the artists name should be on the second line"; r0929j24): one line where it fits, else the title and
   the names over the rest; where the rest does not fit either (.wrap), the chapter on its own line and the rest under
   it, as a phone's, so no line ends on a slash; players.js marks .ln1, .ln2 and .wrap (.meas while it measures) */
@media (min-width:901px){.jp .panel.one .tx{white-space:nowrap;min-width:0}.jp .panel.one.meas .l1,.jp .panel.one.meas .l2{display:inline-block}.jp .panel.one.ln2{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l1 l1" "l2 r";gap:0 36px;align-items:center}.jp .panel.one.ln2 .tx{display:contents}.jp .panel.one.ln2 .l1{grid-area:l1;line-height:18px}.jp .panel.one.ln2 .l2{grid-area:l2;min-width:0}.jp .panel.one.ln2 .right{grid-area:r;margin:0}.jp .panel.one.ln2 .l2 i.br{display:none}.jp .panel.one.ln2:not(:has(>.right)){row-gap:6px}.jp .panel.one.ln2.wrap .l1,.jp .panel.one.ln2.wrap .l2{white-space:normal}.jp .panel.one.ln2.wrap .l2>.tq,.jp .panel.one.ln2.wrap .l2>.dl{display:block}.jp .panel.one.ln2.wrap .l2>.tq>i:first-child,.jp .panel.one.ln2.wrap .l2>i.bd{display:none}}
@media (max-width:900px){
  html .jp .panel.one{flex-direction:column;align-items:flex-start;gap:10px}
  html .jp .panel.one .K.sep,html .jp .panel.one .K .tq{display:none}
  html .jp .panel.one>.tx>.l1>.K:not(.kind):not(.sep){display:block;margin-top:6px}
  html .jp .panel.one>.tx>.l2{display:block}
  html .jp .panel.one .K i.br{display:block;height:0;overflow:hidden}
  html .jp .panel.one .K>.nw:first-child{white-space:normal}
  html .jp .panel.one .K a{white-space:nowrap}
  html .jp .panel.one .K i{display:inline-block}
  html .jp .panel.one>.right{display:none}
  html .jp .panel.one>span:first-child{align-self:stretch}
  html .jp .panel.one .K i.bd{display:none}
  html .jp .panel.one .K .dl{display:flex;align-items:baseline}
  html .jp .panel.one .K .ix{display:inline}
  html .jp .panel.one .K i.ixs{display:inline}
  html .jp .panel.one .K .dli{display:flex;align-items:center;justify-content:center;align-self:center;width:24px;height:24px;margin:-6px -6px -6px auto;color:var(--text)}
  html .jp .panel.one .K .dli svg{width:12px;height:12px;display:block}
}
/* the track beside V at the music page's player's least height, its picture 16:10 at the least, its record in it */
.side .fig.au .player{min-height:420px}
.side .fig.au .player .vis{flex:1 0 auto;aspect-ratio:16/10}
/* VII. Coda: its words under its head bar, the section at the page's least height (.abs .cols) */
.abs.coda .cols{align-content:start}
/* the site's rules for these sections under 900px (mobile.css), which the mockups have not carried: the copy and the side
   the full width, the side 36px under the copy (Join page 05 set a light section's copy in half the width on a phone) */
@media (max-width:900px){html .abs .read,html .abs .read.half,html .abs .side{grid-column:1/-1}html .abs .side{margin-top:36px}}
/* Visualiser settings (piece-music.css, mobile.css): the plate beside Play, the panel over the foot of the picture; one
   column in a frame 900px or narrower, Holes wrapping and the bar's buttons wrapping in one 560px or narrower (the site's
   under 900px and 560px); the panel scrolling where the frame is shorter than it */
.jp .vbar .vsb.on:before{content:":: "}
/* Visualiser settings a gear in a player 560px wide or narrower, where the words ran Play's line onto a second (his
   28 Sept, of the bar on his phone: "I think it's because visualiser settings is a long ass word. Just make it say
   settings or make it a setting cog on mobile."): the portal's phone gear, 14.6px, its strokes 1.25px, on no plate in
   the speaker's 30px box; the text colour, white under the mouse, the red while the panel is open */
.jp .vbar .vsb .cog{display:none}
@container (max-width:560px){.jp .vbar .vsb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;color:var(--text)}.jp .vbar .vsb:before,.jp .vbar .vsb.on:before{content:none}.jp .vbar .vsb .vl{display:none}.jp .vbar .vsb .cog{display:block;width:14.6px;height:14.6px}.jp .vbar .vsb .cog *{vector-effect:non-scaling-stroke;stroke-width:1.25px}.jp .vbar .vsb:hover{background:none;color:var(--white)}.jp .vbar .vsb.on,.jp .vbar .vsb.on:hover{color:var(--cc)}}
.jp .player .vset{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow-y:auto;transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
.jp .player .vset.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
.jp .vset .gp{background:rgba(10,11,12,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);font:500 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.jp .vset .bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h1 h2" "a p0" "b p1";column-gap:40px;row-gap:12px;align-items:center;padding:16px}
.jp .vset .h1{grid-area:h1}
.jp .vset .h2{grid-area:h2}
.jp .vset .a{grid-area:a}
.jp .vset .b{grid-area:b}
.jp .vset .p0{grid-area:p0}
.jp .vset .p1{grid-area:p1}
.jp .vset .b2{grid-area:b2}
.jp .vset .c{grid-area:c}
.jp .vset .d{grid-area:d}
.jp .vset .ho{grid-area:ho}
.jp .vset .rm{grid-area:rm}
/* the two styles (r0928v39), as the music page's */
.jp .vset .h1 .sty,.jp .vset .h1 .opt{display:flex;gap:6px;align-items:center}.jp .vset .h1 .sty{margin-left:10px}.jp .vset .h1 .opt{margin-left:auto}
.jp .vset .t{grid-area:t}
.jp .vset:not(.tri) .t,.jp .vset.tri .a,.jp .vset.tri .b,.jp .vset.tri .b2,.jp .vset.tri .c,.jp .vset.tri .d,.jp .vset.tri .ho,.jp .vset.tri .rm,.jp .vset.tri .h1 a[data-a=adv]{display:none}
.jp .vset.tri .bd,.jp .vset.tri.adv .bd{grid-template-areas:"h1 h2" "t p0" ". p1"}
.jp .vset:not(.adv) .b2,.jp .vset:not(.adv) .c,.jp .vset:not(.adv) .d,.jp .vset:not(.adv) .ho,.jp .vset:not(.adv) .rm,.jp .vset.adv .b{display:none}
.jp .vset.adv .bd{grid-template-areas:"h1 h2" "a p0" "b2 p1" "c ho" "d rm"}
.jp .vset .row.ho .v{min-width:74px}
.jp .vset .row a.on,.jp .vset .row a.on:hover{background:var(--cc);color:var(--cc-ink)}
.jp .vset .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;align-items:center}
.jp .vset label{display:grid;grid-template-columns:70px 1fr 16px;align-items:center;column-gap:10px;color:var(--muted);line-height:1}
.jp .vset label b{font-weight:500;color:#fff;text-align:right}
.jp .vset input[type=range]{width:100%;height:12px;margin:0;accent-color:#d6d8db;background:transparent}
.jp .vset .row{display:flex;gap:6px;align-items:center;line-height:1}
.jp .vset .row a{background:var(--line);text-decoration:none;white-space:nowrap;color:var(--text);padding:3px 8px 2px}
.jp .vset .row a:hover{color:var(--white)}
.jp .vset .row .v{color:var(--muted);padding:0 2px;min-width:52px}
.jp .vset .row .pn{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp .vset .row .v b{font-weight:500;color:#fff}
.jp .vset .row .k{min-width:0;color:var(--dim)}
.jp .vset .row .v:first-child{padding-left:0}
.jp .vset .h1 a:first-of-type{margin-left:auto}
.jp .vset .vn{min-width:16px;text-align:right}
.jp .vset .vn b{font-weight:500;color:#fff}
.jp .vset .pals{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:6px}
.jp .vset .pals a{display:flex;height:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.jp .vset .pals a i{flex:1 1 0}
.jp .vset .pals a.on{box-shadow:0 0 0 1px #fff}
@container (max-width:900px){.jp .vset .bd{grid-template-columns:minmax(0,1fr);grid-template-areas:"h1" "a" "b" "h2" "p0" "p1"}.jp .vset .h2{margin-top:6px}.jp .vset.adv .bd{grid-template-areas:"h1" "a" "b2" "c" "d" "ho" "rm" "h2" "p0" "p1"}.jp .vset.tri .bd,.jp .vset.tri.adv .bd{grid-template-areas:"h1" "t" "h2" "p0" "p1"}.jp .vset .h1{flex-wrap:wrap;row-gap:8px}.jp .vset .h1 .opt{flex-basis:100%;justify-content:flex-end}.jp .vset.tri .t{grid-template-columns:minmax(0,1fr);row-gap:12px}}
@container (max-width:560px){.jp .vbar .row{grid-template-columns:1fr auto auto;column-gap:10px}.jp .vbar .vc{flex-wrap:wrap;gap:8px}.jp .vset .row.ho{flex-wrap:wrap;row-gap:6px;padding-left:80px}.jp .vset .row.ho .v{margin-left:-80px}}
/* the players' bars as the piece pages' (canon 3.7, U30, U36; his 28 Sept: "let's go slimmer for animation, slim for
   music."): a track's slim, 41px; the animation's slimmer, 33px, its plates the small link plate's size */
.jp .player .vbar .row{padding:4px 16px 4px}
.jp .vplayer .vbar .row{padding:5px 16px 5px}
.jp .vplayer .vbar .btn.pp{position:relative;padding:3px 8px 2px;font-size:10px}
.jp .vplayer .vbar .mu{position:relative;width:20px;height:20px}
.jp .vplayer .vbar .mu svg{width:14px;height:14px}
.jp .vplayer .vbar .vol input{height:14px}
.jp .vplayer .vbar .tc{font-size:10px}
.jp .vplayer .vbar .btn.pp:after,.jp .vplayer .vbar .mu:after{content:"";position:absolute;inset:-5px}
/* Play in the middle of a track's stage, as the music page's (canon 3.7, U30; his 28 Sept: "yes i want the middle play
   pause everywhere"): the action plate, > PLAY and :: PAUSE; .gone fades it out, a press going through it to the stage */
.jp .player .vis .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s linear 0s,background-color .25s ease}
.jp .player .vis .mid.on:before{content:":: "}
.jp .player .vis .mid.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s,background-color .25s ease}
@media (prefers-reduced-motion:reduce){.jp .player .vis .mid,.jp .player .vis .mid.gone{transition:none}}
/* and in the middle of the animation (piece-video.css; his 28 Sept: "sure, but make sure they autoplay"), away while it plays */
.jp .vbox .mid{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);margin:0;opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s linear 0s,background-color .25s ease}
.jp .vbox .mid.on:before{content:":: "}
.jp .vbox .mid.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s,background-color .25s ease}
@media (prefers-reduced-motion:reduce){.jp .vbox .mid,.jp .vbox .mid.gone{transition:none}}
/* the middle's Play and Pause as icons (his 28 Sept, of the join page's player on his phone: "Especially on mobile this
   central play button needs to be an icon and not the word "play" - looks silly doubled up"; asked, "Everywhere" and
   "Red plate, triangle"): the action plate square at its height, its word kept for a screen reader, a play triangle in
   its ink, two bars while it says Pause; the plate darker under the mouse, the icon still */
.jp .player .vis .mid,.jp .vbox .mid{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;font-size:0;letter-spacing:0}
.jp .player .vis .mid:before,.jp .vbox .mid:before{content:"";width:9px;height:10px;margin-left:1px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transform:none}
.jp .player .vis .mid.on:before,.jp .vbox .mid.on:before{content:"";margin-left:0;clip-path:none;background:linear-gradient(90deg,currentColor 3px,transparent 3px 6px,currentColor 6px)}
/* an invite's form at the page's end (r1002f10, app/site/join.php join_activate_form()): About's fields; a field's answer
   under it in the red */
.app.aci .L.dl{margin:8px 0 0;color:var(--cc)}