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

: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;
  --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;font-weight:700;color:var(--ink-2)}

/* ---- 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{border-right:1px solid var(--rule);padding:26px 20px 26px 26px;position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;gap:26px}
.side .name{font-size:12px;line-height:18px;font-weight:700;color:var(--ink)}
.side nav{display:flex;flex-direction:column}
.side nav a{padding:0;font-size:12px;color:var(--ink-2);border-bottom:1px solid transparent;width:fit-content}
.side nav a:hover{color:var(--ink);border-color:var(--ink)}
.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}
.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)}
.side .cr{margin-top:auto;color:var(--ink-3);font-size:12px;padding-top:20px}

.main{padding:30px 40px 90px;max-width:1180px}
.rule{height:1px;background:var(--rule);margin:30px 0}
.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:10px 0;border-bottom:1px solid var(--hair);align-items:start}
.rel:hover{background:#FAFAF7}
.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:5px 0;border-bottom:1px solid var(--hair)}
.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 .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:22px 0;border-bottom:1px solid var(--hair);max-width:60ch}
.txt .dt{color:var(--ink-3);font-size:12px;margin:2px 0 10px}
.txt .tx{margin-bottom:10px}
.textlist{list-style:none;margin-top:20px;max-width:70ch}
.textlist li{padding:2px 0}
.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-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:lowercase;font-weight:500;
  color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:7px}
.wrow{display:grid;grid-template-columns:52px minmax(0,1.35fr) minmax(0,1fr) 128px;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.wrow:hover{background:#FAFAF7}
.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 .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 .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-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:lowercase;font-weight:500;
  color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:7px;margin-bottom:8px}
.cve{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;padding:3.5px 0;align-items:baseline}
.cve .y{color:var(--ink-3);font-size:13px}
.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:32px;padding-top:18px;border-top:1px solid var(--rule);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;border-right:0;border-bottom:1px solid var(--rule);padding:24px 22px}
  .side nav{flex-direction:row;flex-wrap:wrap;gap:0 16px;align-items:baseline}
  .side nav .sub{flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:0 12px;
    margin:2px 0 4px;align-items:baseline}
  .side nav .subhead{flex-basis:100%;margin:7px 0 0}
  .side .cr{margin-top:16px}
  .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}}