/* Redaction — Forest Young & Jeremy Mickel (OFL), served via jsDelivr/Fontsource.
   Supreme — Indian Type Foundry (free for commercial use), served via Fontshare. */

@import url("https://cdn.jsdelivr.net/npm/@fontsource/redaction-35@5.3.0/index.css");

:root{
  --bg:#FFFFFF; --ink:#292727; --ink-2:#666666; --ink-3:#8C8C8C;
  --rule:#DCDCD8; --hair:#EEEEEA;
  --serif:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --name:"Redaction 35",Georgia,"Times New Roman",serif;
  --side:196px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink-2);font-family:var(--serif);
  font-size:12px;line-height:18px;-webkit-font-smoothing:antialiased;font-kerning:normal}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
em{font-style:italic}

.lbl{font-size:12px;color:var(--ink-3)}

/* ---- frame: persistent left index, like a printed table of contents ---- */
.frame{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{padding:26px 20px 26px 26px;position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;gap:26px}
.side .name{font-family:var(--name);font-size:19px;line-height:1.15;font-weight:400;letter-spacing:.005em;color:var(--ink)}
.side>div:first-child{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.menu{display:none;background:none;border:0;padding:4px 0;cursor:pointer;width:26px;flex:none;
  -webkit-tap-highlight-color:transparent}
.menu:focus{outline:none}
.menu:focus-visible{outline:1px solid var(--rule);outline-offset:3px}
.menu span{display:block;height:1px;background:var(--ink-2);margin:5px 0}
.side nav{display:flex;flex-direction:column}
.side nav a,.side nav .branch{padding:0;font-size:12px;color:var(--ink-2);border-bottom:1px solid transparent;width:fit-content}
.side nav a:hover,.side nav .branch:hover{color:var(--ink);border-color:var(--ink)}
.side nav .branch{background:none;border:0;border-bottom:1px solid transparent;font:inherit;
  color:var(--ink-2);text-align:left;cursor:pointer;width:fit-content;-webkit-tap-highlight-color:transparent}
.side nav .branch[aria-current="page"]{color:#BDB7AC}
.side nav .branch:focus{outline:none}
.side nav a[aria-current="page"]{color:#BDB7AC;border-color:transparent}
.side nav a[aria-current="page"]:hover{color:#BDB7AC;border-color:transparent}
.side nav .sub{display:flex;flex-direction:column;margin:3px 0 6px 12px;gap:0}
.side nav .sub[hidden]{display:none}
.side nav .sub .subgap{height:8px}
.side nav .sub a{font-size:12px;color:var(--ink-3);padding:1.5px 0}
.side nav .sub a:hover{color:var(--ink)}
.side nav .subhead{font-size:11px;
  color:var(--ink-3);opacity:.7;margin:6px 0 2px}
.side .grp{margin-top:14px}
.side .ext a{display:block;padding:2px 0;color:var(--ink-2)}
.side .ext a:hover{color:var(--ink)}
.cr{margin-top:56px;color:var(--ink-3);font-size:11.5px}

.main{padding:30px 40px 90px;max-width:1180px}
.hair{height:1px;background:var(--hair);margin:20px 0}

h1.pt{font-size:14px;line-height:18px;font-weight:700;color:var(--ink)}
h2.st{font-size:12px;line-height:18px;font-weight:700;color:var(--ink);margin-bottom:2px}
.intro{max-width:62ch;margin-top:14px;color:var(--ink-2)}

/* ---- home: everything visible at once ---- */
.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 46px;margin-top:34px}
.toc section h3{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:lowercase;
  font-weight:500;color:var(--ink-3);padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:2px 0;color:var(--ink-2);width:fit-content;border-bottom:1px solid transparent}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.toc .n{color:var(--ink-3);font-size:12.5px}

/* ---- home: one image at a time ---- */
.viewer{height:calc(100vh - 120px);min-height:420px}
.viewer .plate{height:100%;display:flex;align-items:center;justify-content:flex-start}
.viewer img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  transition:opacity .7s ease}
.viewer img.fade{opacity:0}

/* ---- releases ---- */
.rels{margin-top:10px}
.rel{display:grid;grid-template-columns:56px minmax(0,1.4fr) minmax(0,1fr) 108px;gap:16px;
  padding:7px 0;align-items:start}

.rel .cover{display:block;width:56px;height:56px;border:1px solid var(--hair)}
.rel .cover img{width:100%;height:100%;object-fit:cover;display:block}
.rel .rt{line-height:1.35}
.rel .rt a{border-bottom:1px solid var(--rule)}
.rel .rt a:hover{border-color:var(--ink)}
.rel .ra{color:var(--ink-2);font-size:14px}
.rel .rd{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-align:right}
.relhead{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start;margin-top:6px}
.relhead .art img{width:100%;height:auto;display:block;border:1px solid var(--hair)}
.relhead blockquote{margin:0 0 16px;padding-left:14px;border-left:1px solid var(--rule);
  color:var(--ink-2);font-style:italic;max-width:56ch}
.relhead .tx{max-width:60ch;margin-bottom:12px}
.credits{font-size:13px;color:var(--ink-2);line-height:1.7}
.tracklist{counter-reset:trk;margin-top:8px}
.tracklist li{counter-increment:trk;list-style:none;padding:2px 0}
.tracklist li::before{content:counter(trk,decimal-leading-zero);font-family:var(--sans);font-size:10px;
  letter-spacing:.1em;color:var(--ink-3);margin-right:12px}
.backlink{display:inline-block;margin-bottom:20px;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--ink-3)}
.backlink:hover{color:var(--ink)}
/* ---- work detail ---- */
.detail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:38px;align-items:start;margin-top:4px}
.detail .dt-t{font-size:12px;line-height:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.detail .counter{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:7px}
.picker{display:grid;grid-template-columns:repeat(3,50px);gap:10px;margin-bottom:14px}
.picker .thumb{padding:0;border:0;background:#F2F2EE;width:50px;height:50px;cursor:pointer;overflow:hidden;opacity:.55}
.picker .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.picker .thumb.on,.picker .thumb:hover{opacity:1}
.detail .facts{font-size:12.5px;color:var(--ink-2);line-height:1.65}
.detail .dlinks{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.detail .dlinks a{font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--rule);width:fit-content}
.detail .dlinks a:hover{border-color:var(--ink)}
.detail .dtext{margin-top:14px}
.detail .dtext .tx{font-size:13px;line-height:1.6}
.detail .credit{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-top:10px}
.credit{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-top:10px}
.detail .stage img{width:100%;height:auto;display:block;max-width:640px}
.detail .stage .vid{margin-top:18px;max-width:640px}
.detail .stage .vwrap{position:relative;padding-top:56.25%;background:#F2F2EE}
.detail .stage .vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail .stage video{width:100%;height:auto;display:block;background:#F2F2EE;max-width:640px}
.detail .stage .vid figcaption{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);padding-top:6px}
.statement{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:12px}
.statement .tx{font-size:13.5px;line-height:1.72;max-width:52ch;margin-bottom:12px}
.txt{padding:0 0 22px;max-width:60ch}
.txt .dt{color:var(--ink-3);font-size:12px;margin:2px 0 10px}
.txt .tx{margin-bottom:10px}
.resrow{margin-bottom:36px}
.rescover{display:block;width:220px;margin-top:14px}
.rescover .ph{background:#F2F2EE;aspect-ratio:17/10;overflow:hidden}
.rescover .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rescover:hover .ph{opacity:.82}
.rescover .tt{display:block;padding-top:7px;font-size:11px;color:var(--ink-3)}
.textlist{list-style:none;margin-top:22px;max-width:78ch}
.textlist li{padding:1px 0;padding-left:1.4em;text-indent:-1.4em}
.textlist a{color:var(--ink-2);border-bottom:1px solid transparent}
.textlist a:hover{color:var(--ink);border-color:var(--ink)}
.d3{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:start;margin-top:10px}
.d3 .tx{max-width:56ch;margin-bottom:10px}
.d3 .genre{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-top:12px}
.d3 .members{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.d3 .members .ph{background:#F2F2EE;aspect-ratio:1/1;overflow:hidden}
.d3 .members img{width:100%;height:100%;object-fit:cover;display:block}
.d3 .members figcaption{font-size:11.5px;color:var(--ink-3);padding-top:6px}

/* ---- works index (the spine) ---- */
.switch{display:flex;gap:16px;align-items:baseline;margin:26px 0 6px}
.switch button{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:lowercase;
  background:none;border:0;padding:0 0 2px;cursor:pointer;color:var(--ink-3);border-bottom:1px solid transparent}
.switch button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.switch .count{margin-left:auto;color:var(--ink-3);font-size:12.5px}

.wgroup{margin-top:26px}
.wgroup>h3{font-size:12px;font-weight:400;color:var(--ink-3);padding-bottom:2px}
.wrow{display:grid;grid-template-columns:52px minmax(0,1.35fr) minmax(0,1fr) 128px;gap:16px;
  padding:3px 0;align-items:baseline}

.wrow .wy{color:var(--ink-3);font-size:13px}
.wrow .wt{line-height:1.35}
.wrow .wt a{border-bottom:1px solid var(--rule)}
.wrow .wt a:hover{border-color:var(--ink)}
.wrow .wv{color:var(--ink-2);font-size:14px}
.wrow .wm{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-align:right}
.wrow .wk,.rel .wk{font-style:italic;color:var(--ink-3);font-size:13px}

/* ---- entries ---- */
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;
  padding:30px 0;border-bottom:1px solid var(--rule);align-items:start}
.entry .dt{margin-top:10px;color:var(--ink-2);font-size:14px}
.entry .dt div+div{margin-top:2px}
.entry .tx{margin-top:16px;max-width:56ch}
.entry .media{display:flex;flex-direction:column;gap:8px}
.entry .media img{width:100%;background:#F2F2EE}
.entry .media video{width:100%;background:#F2F2EE}
.entry .more{display:inline-block;margin-top:14px;border-bottom:1px solid var(--rule)}
.entry .more:hover{border-color:var(--ink)}

/* ---- plates ---- */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.plates figure{background:#F2F2EE}
.plates img{width:100%;height:100%;object-fit:cover}
.plates figcaption{font-size:11px;color:var(--ink-3);padding-top:7px;line-height:16px}
.plates.art figcaption{font-size:11px}
.plates figcaption .pt-t{font-style:italic;font-weight:700;color:var(--ink-2)}
/* artwork plates: never crop a painting */
.plates.art{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:20px;row-gap:24px;align-items:start}
.plates.art figure{background:none;display:flex;flex-direction:column}
.plates.art .ph{background:#F2F2EE;aspect-ratio:1/1;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px}
.plates.art button.ph{border:0;width:100%;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.plates.art button.ph:hover{opacity:.85}
.plates.art button.ph:focus{outline:none}
.lightbox{position:fixed;inset:0;background:rgba(255,255,255,.97);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:40px;z-index:50;cursor:zoom-out}
.lightbox[open]{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto;object-fit:contain}
.lightbox figcaption{font-size:11px;color:var(--ink-3);text-align:center}
.lightbox .close{position:absolute;top:18px;right:22px;background:none;border:0;font:inherit;
  font-size:12px;color:var(--ink-3);cursor:pointer}
.plates.art .ph img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* ---- thumbnail tiles ----
   Proportions taken from inbetweennoise.com: 170x100 thumb (17:10), 20px column
   gap, 7px between image and caption, title italic with the year on its own line
   beneath it, everything small and grey. Sizes are scaled up slightly because
   Redaction runs smaller than Helvetica at the same px. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  column-gap:20px;row-gap:24px;margin-top:16px;align-items:start}
.tiles figure{display:flex;flex-direction:column;max-width:220px}
.tiles .ph{background:#F2F2EE;aspect-ratio:17/10;flex:none;overflow:hidden}
.tiles.covers{grid-template-columns:repeat(auto-fill,170px);justify-content:start;column-gap:18px;row-gap:22px}
.tiles.covers .ph{aspect-ratio:1/1}
.tiles.covers figure{max-width:170px}
.tiles .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tiles .ph[data-empty]{background:repeating-linear-gradient(135deg,#F4F4F0,#F4F4F0 6px,#EFEFEA 6px,#EFEFEA 12px)}
.tiles .ph-link{display:block}
.tiles .ph-link:hover .ph{opacity:.82}
.tiles .tt a{border-bottom:1px solid var(--rule)}
.tiles .tt a:hover{border-color:var(--ink)}
.tiles a.ph:hover{opacity:.82}
.tiles figcaption{padding-top:7px;line-height:1.45}
.tiles .tt{font-style:italic;font-weight:700;font-size:11px;line-height:16px;color:var(--ink-2)}
.tiles .ty,.tiles .tr,.tiles .tv{display:block;font-size:11px;line-height:16px;color:var(--ink-3)}
.tiles .tr{margin-top:2px}

/* ---- cv ---- */
.cvblock{margin-top:26px}
.cvblock h3{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.cve{padding:1px 0}
.cve .y{color:var(--ink-3);margin-right:10px}
.cve a{border-bottom:1px solid var(--rule)}
.cve a:hover{border-color:var(--ink)}
.cve .nt{color:var(--ink-3);font-style:italic}

.bio{max-width:64ch}
.bio p+p{margin-top:15px}
.bio h1.pt{margin-bottom:18px}
.contact{margin-top:26px;max-width:64ch}
.contact a{border-bottom:1px solid var(--rule)}
.contact a:hover{border-color:var(--ink)}
.contact .row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:3px 0}
.contact .row .k{color:var(--ink-3);font-size:13px}

audio{width:100%;max-width:460px;margin-top:12px;height:34px}

@media(max-width:1080px){ .toc{grid-template-columns:repeat(2,minmax(0,1fr))} .plates{grid-template-columns:repeat(3,1fr)} }
@media(max-width:860px){
  .frame{grid-template-columns:1fr}
  .side{position:static;height:auto;padding:24px 22px}
  .menu{display:block}
  .side nav{display:none;flex-direction:column;margin-top:18px}
  .side.open nav{display:flex}
  .side nav a{font-size:13px;padding:7px 0;letter-spacing:.02em}
  .side nav .sub[hidden]{display:none}
  .side nav .sub{flex-direction:column;margin:0 0 0 14px;
    border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule);padding:4px 0}
  .side nav .sub a{font-size:13px;padding:5px 0}
  .side nav .sub .subgap{height:10px}
  .main{padding:26px 22px 70px}
  .entry{grid-template-columns:1fr;gap:20px}
  .wrow{grid-template-columns:44px 1fr;gap:8px}
  .wrow .wv,.wrow .wm{grid-column:2;text-align:left}
  .rel{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .rel .ra,.rel .rd{grid-column:2;text-align:left}
  .detail{grid-template-columns:1fr;gap:20px}
  .d3{grid-template-columns:1fr;gap:18px}
  .statement{grid-template-columns:1fr;gap:6px}
  .relhead{grid-template-columns:1fr;gap:18px}
  .relhead .art{max-width:260px}
  .toc{grid-template-columns:1fr}
  .plates{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}