:root{
    --ground:#0A0A0C; --panel:#121218; --text:#EDEDF0; --muted:#8C8D96;
    --dim:#62636C; --line:rgba(255,255,255,.5); --rule:#26262E;
    --cream:#E3D3BC; --exposed:#D62B80;
    --display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
    --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,monospace;
    --rail:54px; --head:104px;
  }
  *{box-sizing:border-box}
  #static{position:absolute;left:-99999px;top:0;width:1px;overflow:hidden}
  body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);
       font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img,video{display:block;max-width:100%}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--exposed);outline-offset:-3px}

  /* ---------------- masthead ---------------- */
  .topband{position:sticky;top:0;z-index:30;display:flex;align-items:flex-start;
    justify-content:space-between;gap:26px;padding:18px 24px 14px;flex-wrap:wrap;
    background:rgba(10,10,12,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .name{font-family:var(--display);font-weight:700;font-size:1.08rem;
    letter-spacing:-.026em;margin:0 0 12px}
  .sorter{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .sorter .lab{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--dim);margin-right:2px}
  .sorter button{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
    text-transform:uppercase;background:transparent;color:var(--muted);
    border:1px solid var(--rule);border-radius:2px;padding:5px 10px;cursor:pointer;
    transition:color .18s,border-color .18s,background .18s}
  .sorter button:hover{color:var(--text);border-color:var(--muted)}
  .sorter button[aria-pressed="true"]{color:var(--ground);background:var(--exposed);
    border-color:var(--exposed)}
  /* no text-transform here: each nav item renders with the casing it is written in */
  .topnav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
    /* the band is align-items:flex-start, which put the links level with the name.
       Sitting them at the bottom instead lines them up with the sort row, which is
       the other row of controls. margin-left:auto keeps them right when the header
       wraps on a narrow screen, where space-between would otherwise send a lone
       wrapped item to the start. */
    align-self:flex-end;margin-left:auto;justify-content:flex-end;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
  /* The nav reads as a sibling of the sort row, so it takes the same geometry: mono
     10px, 1px border, 2px radius, 5px/10px padding. The colour scheme is inverted to
     mark it as a different kind of control. Sort buttons are hollow and fill with the
     accent when active; these are filled by default and invert on hover, and they
     never use the accent, which belongs to sort state alone. Casing is left as
     written rather than uppercased, so About and SEAM Lab keep their own shape. */
  .topnav button,.topnav a{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
    background:var(--rule);color:var(--muted);border:1px solid var(--rule);
    border-radius:2px;padding:5px 10px;cursor:pointer;text-decoration:none;
    transition:color .18s,background .18s,border-color .18s}
  .topnav button:hover,.topnav a:hover{background:var(--muted);color:var(--ground);
    border-color:var(--muted)}

  /* ---------------- bands ---------------- */
  .band{display:grid;grid-template-columns:var(--rail) 1fr}
  .band + .band{border-top:1px solid var(--line)}
  .rail span{position:sticky;top:calc(var(--head) + 16px);display:block;
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cream);white-space:nowrap;padding:18px 0;margin-left:20px}
  .rail span b{font-weight:500}
  .rail span i{font-style:normal;color:var(--dim);letter-spacing:.14em;margin-left:11px}
  .cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
    border-left:1px solid var(--line)}

  /* The pinned mark holds row 1 of the last column. Explicitly placed grid items
     are positioned before auto-placed ones, so the works flow around it. */
  /* nothing is clickable while the grid is dealing itself, so a visitor cannot
     open a card mid-flight and land in a half-sorted state */
  body.intro #grid, body.intro #sorter, body.intro .topnav{pointer-events:none}
  body.intro #sorter button{opacity:.55;transition:opacity .35s ease}
  /* ---- constellation ---- */
  .band.constel{display:block}
  .stage .skymark{position:absolute;top:0;right:0;width:196px;height:196px;
    max-width:34vw;max-height:34vw;background:var(--ground);display:grid;place-items:center;
    z-index:1;color:#fff;border:0;padding:0;font:inherit;cursor:inherit}
  .stage .skymark svg{width:52%;height:auto;display:block;opacity:.88}
  /* how to move around in here. Nothing else on the site needs instructions, but
     a pannable, zoomable field does: without a nudge most people will assume the
     constellation is a static picture. */
  .stage .navhint{position:absolute;left:14px;top:12px;z-index:3;
    font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted);pointer-events:none}
  .stage .navhint .touchonly{display:none}
  .band.constel .stage{position:relative;width:100%;height:min(80vh,900px);
    border-left:1px solid var(--line);overflow:hidden;cursor:grab;
    touch-action:none;               /* we handle pinch and drag ourselves */
    user-select:none;-webkit-user-select:none}
  .band.constel .stage.dragging{cursor:grabbing}
  .stage .sky{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
    z-index:2;pointer-events:none}
  .stage .sky .card.star{pointer-events:auto}
  .stage .weave{position:absolute;left:0;top:0;overflow:visible}
  .stage .weave line{stroke:var(--line);stroke-width:1;opacity:.5;
    transition:stroke .3s ease,opacity .3s ease,stroke-width .3s ease}
  .stage.focus .weave line{opacity:.16}
  .stage .weave line.lit{stroke:var(--text);opacity:.85;stroke-width:1.5}
  .card.star{position:absolute;border:1px solid var(--line);overflow:visible;
    transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease}
  .clusterlab{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;
    font-family:var(--mono);font-size:15px;letter-spacing:.34em;text-transform:uppercase;
    color:var(--line);pointer-events:none;z-index:0}
  .card.star .label{display:none}          /* the grid's hover plate is for tile size */
  .starname{display:none}
  .card.star .starname{display:-webkit-box;position:absolute;left:50%;top:calc(100% + 6px);
    transform:translateX(-50%);width:17ch;text-align:center;
    font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.02em;
    color:var(--dim);pointer-events:none;
    -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:visible;
    transition:color .3s ease}
  .card.star:hover .starname,.card.star:focus-visible .starname,
  .card.star.near .starname{color:var(--text)}
  .stage.focus .card.star:not(.near) .starname{color:var(--line)}
  .stage.focus .card.star{opacity:.28}
  .stage.focus .card.star.near{opacity:1}
  .card.star:hover,.card.star:focus-visible{transform:scale(1.14);z-index:3;
    box-shadow:0 0 0 1px var(--text)}
  /* the links view fills the stage, so the rail column is not wanted */
  body.weaving .band.constel .rail{display:none}
  .cells .card.pinned{grid-row:1;grid-column:-2/-1}
  .card.markcard .art{display:grid;place-items:center;background:var(--ground)}
  .card.markcard{border:0;background:var(--ground)}
  .card.markcard .markart{width:52%;color:#fff;opacity:.88}
  .card.markcard .markart svg{display:block;width:100%;height:auto}
  /* the mark carries no label, so the usual hover plate must not appear over it */
  .card.markcard .label{display:none}
  /* the small mark beside the name, so the square reads as a logo, not a work */
  .name{display:flex;align-items:center;gap:9px}
  /* At 15px wide against a 498-unit viewBox the card's stroke lands under a third of
     a pixel and reads as grey fuzz. Doubling it still looked thin on a 1x display;
     2.6x reads at both densities, and past about 32 the strokes start to swallow the
     arrowhead. CSS beats the presentation attribute on the svg, and the arrowhead is
     filled rather than stroked, so it keeps its shape as the lines thicken. */
  .namemark{width:15px;flex:0 0 15px;color:var(--text);opacity:.95}
  .namemark svg{display:block;width:100%;height:auto;stroke-width:26}

  /* ---------------- square ---------------- */
  .card{position:relative;aspect-ratio:1;border:0;margin:0;padding:0;font:inherit;
    color:inherit;background:var(--ground);cursor:pointer;overflow:hidden;display:block;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .art{position:absolute;inset:0;opacity:.36;filter:saturate(.18);
    transition:opacity .5s ease,filter .5s ease}
  .card.seen .art,.card:hover .art,.card:focus-visible .art{opacity:1;filter:saturate(1)}
  .art img,.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .art video{opacity:0;transition:opacity .25s}
  .card:hover .art video{opacity:1}
  .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
  .ph b{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.07em;
    color:rgba(255,255,255,.26);text-align:center;line-height:1.6}
  .label{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 13px;text-align:left;
    background:linear-gradient(to top,rgba(6,6,9,.95),rgba(6,6,9,.7) 45%,transparent);
    opacity:0;transform:translateY(7px);transition:opacity .26s,transform .26s;
    pointer-events:none}
  .card:hover .label,.card:focus-visible .label{opacity:1;transform:none}
  .label h3{font-family:var(--display);font-weight:500;font-size:.87rem;line-height:1.25;
    letter-spacing:-.015em;margin:0;color:#fff}
  .label .c{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
  /* the mark is a logo, not a photograph, so it does not develop on exposure: it is
     always on, the same exception the live colour square already takes above */
  .card.markcard .art{opacity:1;filter:none}
  .card.live .swatch{position:absolute;inset:0;transition:background .12s linear}
  .card.live .hint{position:absolute;left:0;right:0;top:0;padding:14px 15px;
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.75);opacity:0;transition:opacity .25s;pointer-events:none}
  .card.live:hover .hint{opacity:1}
  /* Phones have no cursor, so :hover never fires and the grid would stay dim and
     unlabelled. There, exposure is driven by dwell instead: see exposeByDose(). */
  @media (hover:none){
    /* A phone develops slowly on purpose: the colour should creep in over a couple
       of seconds so the change is something you catch happening, not a switch. */
    .card .art{transition:opacity 2.4s ease-out,filter 2.4s ease-out}
    .card.seen .art{opacity:1;filter:saturate(1)}
    .card.seen .art video{opacity:1}
    .card .label{transition:opacity 1.8s ease-out,transform 1.8s ease-out}
    .card.seen .label{opacity:1;transform:none}
    .card.live .hint{opacity:1}
    /* constellation: a shorter stage, and a gentler dim since there is no
       cursor to explain why everything faded */
    .band.constel .stage{height:min(72vh,680px)}
    .stage.focus .card.star{opacity:.45}
    .stage .navhint .deskonly{display:none}
    .stage .navhint .touchonly{display:inline}
  }
  .card.unlaunched .art{opacity:1;filter:none}
  .card.unlaunched .ph{inset:13px;border:1px dashed rgba(214,43,128,.5)}
  .card.unlaunched .ph b{color:var(--exposed);letter-spacing:.15em}

  /* ---------------- panel ---------------- */
  .scrim{position:fixed;inset:0;background:rgba(6,6,8,.75);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}
  .scrim.open{opacity:1;pointer-events:auto}
  .panel{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);z-index:50;
    background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.8,.3,1)}
  .panel.open{transform:none}
  .panel .inner{padding:26px 32px 64px}
  .panel .close{position:sticky;top:0;float:right;background:var(--panel);
    border:1px solid var(--rule);color:var(--muted);font-family:var(--mono);
    font-size:10.5px;letter-spacing:.08em;padding:6px 11px;cursor:pointer}
  .panel .close:hover{color:var(--text);border-color:var(--exposed)}
  .panel .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--exposed);margin:0}
  .panel h2{font-family:var(--display);font-weight:500;font-size:1.46rem;
    letter-spacing:-.026em;line-height:1.16;margin:13px 0 0}
  .panel .one{color:var(--cream);margin:11px 0 0}
  .panel .hero{margin:20px 0 0;border:1px solid var(--rule);aspect-ratio:1;
    position:relative;overflow:hidden;background:var(--ground)}
  .panel .hero .herolink{position:absolute;inset:0;display:block;cursor:pointer;
    padding:0;border:0;background:none;width:100%;height:100%}
  .panel .hero img,.panel .hero video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover}
  /* hero.natural keeps a non-square clip's own framing instead of cropping to a square */
  .panel .hero.natural video,.panel .hero.natural img{object-fit:contain;background:#000}
  /* a mark's hero is the logo itself on black, at the same footing as the square */
  .panel .hero .markhero{position:absolute;inset:0;display:grid;place-items:center;background:#000}
  .panel .hero .markhero svg{width:66%;height:auto;color:#fff;display:block}
  .panel .credit{font-family:var(--mono);font-size:9px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--dim);margin:9px 0 0;text-align:right}
  .panel .credit a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule)}
  .panel .credit a:hover{color:var(--exposed);border-color:var(--exposed)}
  .panel .body{color:var(--muted);margin:20px 0 0}
  .panel .body p{margin:0 0 13px}
  .panel .body.lead{margin-top:14px}
  .panel .body.after{margin-top:20px}
  .panel .body .blist{margin:0 0 13px;padding:0 0 0 17px;list-style:none}
  .panel .body .blist li{position:relative;margin:0 0 9px;line-height:1.55}
  .panel .body .blist li:last-child{margin-bottom:0}
  .panel .body .blist li::before{content:"";position:absolute;left:-13px;top:.62em;
    width:5px;height:5px;border-left:1px solid var(--dim);border-bottom:1px solid var(--dim);
    transform:rotate(45deg)}
  .panel .body a{color:inherit;text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.13);
    transition:color .18s,border-color .18s}
  .panel .body a:hover{color:var(--cream);border-color:rgba(227,211,188,.55)}
  .panel .fig{margin:20px 0 0;border:1px solid var(--rule);background:var(--ground)}
  .panel .fig img{width:100%;height:auto;display:block}
  .panel .figcap{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);margin:9px 0 0}
  /* figures placed between body paragraphs, via object entries in card.body */
  .panel .bodyfig{margin:22px 0 20px;padding:0}
  .panel .bodyfig .fr{border:1px solid var(--rule);background:var(--ground);
    line-height:0;overflow:hidden}
  .panel .bodyfig .figdoor{display:block;width:100%;padding:0;cursor:pointer;
    transition:border-color .2s,opacity .2s}
  .panel .bodyfig .figdoor:hover{border-color:var(--exposed);opacity:.88}
  .panel .bodyfig img,.panel .bodyfig video{width:100%;height:auto;display:block}
  .panel .bodyfig video{background:#000}
  .panel .bodyfig figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);margin:9px 0 0;line-height:1.5}
  .srsect{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    margin:46px 0 18px;padding-top:14px;border-top:2px solid var(--exposed)}
  .srsect h3{font-family:var(--display);font-weight:500;font-size:1.28rem;
    letter-spacing:-.02em;color:var(--cream);margin:0}
  .srnote{font-family:var(--mono);font-size:9px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--dim);flex:0 0 auto}
  .doors.inline{margin:14px 0 0;border-top:0;padding-top:0}
  .panel .bodyfig.pending .fr{display:flex;align-items:center;justify-content:center;
    aspect-ratio:16/10;border-style:dashed}
  .panel .bodyfig.pending span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim)}
  .panel .bodyfig.raw .fr{border:0;background:none;line-height:normal;padding:4px 0;overflow-x:auto}
  .panel .bodyfig.raw svg{min-width:640px}
  .panel .bodyfig.raw svg{width:100%;height:auto;display:block}
  /* morphogenR8: magenta on the first six letters, and the whole name set bold
     wherever it appears in prose */
  .mg{color:var(--exposed)}
  .r8{font-weight:700}
  .panel .bodyfig.punch .fr{border-color:var(--exposed)}
  .panel .bodyfig.punch figcaption{color:var(--exposed)}
  /* one prominent call to action per card, for work you can actually go and buy */
  .cta{margin:30px 0 0}
  .cta a{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:17px 20px;background:var(--exposed);color:var(--ground);text-decoration:none;
    border:1px solid var(--exposed);transition:background .18s,color .18s}
  .cta a:hover{background:transparent;color:var(--exposed)}
  .cta .ctal{font-family:var(--display);font-weight:500;font-size:1.02rem;
    letter-spacing:-.01em;line-height:1.2}
  .cta .ctaa{font-family:var(--mono);font-size:13px;flex:0 0 auto}
  .cta .ctanote{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);margin:9px 0 0;line-height:1.6}
  .facts{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
  .facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
    border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:9.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
  .facts li b{font-weight:400;color:var(--text);text-transform:none;letter-spacing:0;
    font-family:var(--body);font-size:13px;text-align:right}
  .links{margin:20px 0 0;display:flex;flex-direction:column;gap:0}
  .links a{display:flex;align-items:baseline;gap:12px;text-decoration:none;
    border-bottom:1px solid var(--rule);padding:10px 0;transition:color .18s}
  .links a:hover{color:var(--exposed)}
  .links .kind{font-family:var(--mono);font-size:9px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--dim);flex:0 0 62px;transition:color .18s}
  .links a:hover .kind{color:var(--exposed)}
  .links .lbl{font-size:13.5px;color:var(--muted);line-height:1.45;transition:color .18s}
  .links a:hover .lbl{color:var(--text)}

  .units{margin:28px 0 0;border-top:1px solid var(--line)}
  /* thumbnail photo credit: present, findable, and as quiet as a caption can be */
  .unit .ucredit{font-family:var(--mono);font-size:8px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);opacity:.55;margin:7px 0 0}
  .unit:hover .ucredit{opacity:1}
  .unit{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:20px 0;
    border-bottom:1px solid var(--line);align-items:start}
  .unit .ph{aspect-ratio:1;position:relative;overflow:hidden;background:var(--ground);
    border:1px solid var(--rule)}
  .unit .ph img,.unit .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .unit .ph.empty{border-style:dashed;display:flex;align-items:center;justify-content:center;
    padding:10px}
  .unit .ph.empty span{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.6}
  .unit .wk{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--exposed)}
  .unit h3{font-family:var(--display);font-weight:500;font-size:1.04rem;letter-spacing:-.018em;
    margin:7px 0 0;line-height:1.25}
  .unit p{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
  @media (max-width:560px){
    .unit{grid-template-columns:104px 1fr;gap:14px}
    .unit h3{font-size:.95rem}
  }
  .sect{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
  .sect h4{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--dim);margin:0 0 10px;font-weight:400}
  .with{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0}
  .with b{font-weight:400;color:inherit}
  .with u{text-decoration:none;color:inherit}

  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
    background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:2px;
    padding:5px 9px;cursor:pointer;font-weight:400;
    transition:color .18s,border-color .18s}
  .chip:hover{color:var(--exposed);border-color:var(--exposed)}
  .chip.static{cursor:default;color:var(--cream);border-style:dashed}
  .chip.static:hover{color:var(--cream);border-color:var(--rule)}

  .see{display:flex;flex-direction:column;gap:0}
  .see button{display:flex;align-items:baseline;gap:12px;background:none;border:0;
    border-bottom:1px solid var(--rule);padding:10px 0;cursor:pointer;text-align:left;
    font:inherit;color:inherit;transition:color .18s}
  .see button:hover{color:var(--exposed)}
  .see .sc{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--dim);flex:0 0 62px}
  .see .st{font-size:13.5px;color:var(--muted)}
  .see button:hover .st{color:var(--text)}

  .doors{margin:30px 0 0;border-top:2px solid var(--exposed);padding-top:4px}
  .doors h4{font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;
    text-transform:none;color:var(--cream);margin:18px 0 10px}
  .doors button{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:18px;
    background:none;border:0;border-bottom:1px solid var(--rule);padding:15px 0;cursor:pointer;
    text-align:left;font:inherit;color:var(--muted);transition:color .18s}
  .doors button:hover{color:var(--exposed)}
  .doors .q{font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:-.015em;
    line-height:1.32}
  .doors .arw{font-family:var(--mono);font-size:12px;opacity:.45;flex:0 0 auto}
  /* a download styled to read as another door, sitting directly under the media */
  .doors.getit{margin:20px 0 0;border-top-width:1px}
  .doors.getit a{display:flex;width:100%;justify-content:space-between;align-items:baseline;
    gap:18px;border-bottom:1px solid var(--rule);padding:15px 0;text-decoration:none;
    color:var(--muted);transition:color .18s}
  .doors.getit a:hover{color:var(--exposed)}
  .doors.getit a:hover .arw{opacity:1}
  .doors button:hover .arw{opacity:1}
  .panel .back{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
    background:none;border:0;color:var(--dim);cursor:pointer;padding:0;margin:0 0 20px;display:block}
  .panel .back:hover{color:var(--exposed)}
  .panel .portrait{margin:20px 0 0;border:1px solid var(--rule);width:100%;display:block}
  .stub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);border:1px dashed var(--rule);padding:12px 14px;margin:18px 0 0}
  .pubmeta{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--dim);margin:12px 0 0}
  .publegend{margin:18px 0 0;border:1px solid var(--rule);border-radius:2px;padding:11px 13px}
  .publegend h5{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);margin:0 0 9px;font-weight:400}
  .publegend .row{display:flex;flex-wrap:wrap;gap:7px 18px;font-family:var(--mono);font-size:9px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
  .publegend b{font-weight:400;color:var(--cream)}
  .pubstats{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin:8px 0 0}
  .pubstats .src{color:var(--dim);text-transform:none;letter-spacing:0}
  .pubfilter{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding-bottom:18px;
    border-bottom:1px solid var(--rule)}
  .pubfilter button{display:flex;align-items:center;gap:6px;
    font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:2px;
    padding:5px 9px;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
  .pubfilter button .sw{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .pubfilter button .ct{opacity:.5}
  .pubfilter button:hover{color:var(--text)}
  .pubfilter button[aria-pressed="true"]{color:var(--ground)}
  .pubfilter button[aria-pressed="true"] .ct{opacity:.7}
  .publist{margin:0}
  .pub{display:grid;grid-template-columns:16px 26px 1fr;gap:10px;padding:14px 0;
    border-bottom:1px solid var(--rule-soft);align-items:start}
  .pub .dots{display:flex;flex-direction:column;gap:3px;margin-top:7px}
  .pub .dot{width:7px;height:7px;border-radius:50%}
  .pub .n{font-family:var(--mono);font-size:10px;color:var(--cream);padding-top:3px}
  .pub .t{font-size:13.5px;line-height:1.42;color:var(--text)}
  .pub .t a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.13)}
  .pub .t a:hover{color:var(--exposed);border-color:var(--exposed)}
  .pub .au{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:4px}
  .pub .vn{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--dim);
    margin-top:5px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
  .pub .vn button{background:none;border:0;padding:0;font:inherit;color:var(--muted);
    cursor:pointer;transition:color .18s}
  .pub .vn button:hover{color:var(--exposed)}
  .sheet{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 0}
  /* the wall: a full-bleed field of squares, nothing else on the page */
  .panel.immersive{width:100%;border-left:0}
  .panel.immersive .inner{padding:26px 0 0}
  .panel.immersive .inner>*:not(.sheet){margin-left:26px;margin-right:26px}
  .panel.immersive .back{display:inline-block}
  .sheet.bare{grid-template-columns:repeat(3,1fr);gap:1px;margin:20px 0 0}
  .sheet.bare figure{margin:0;cursor:pointer}
  .sheet.bare .fr{position:relative;aspect-ratio:1;overflow:hidden;border:0;
    background:var(--ground);transition:opacity .2s}
  .sheet.bare figure:hover .fr{opacity:.72}
  /* a subsection label spans the whole grid row, so the group below it starts on a
     fresh line however many columns the sheet has resolved to */
  .sheet.bare .sech{grid-column:1/-1;margin:14px 0 3px;font-family:var(--mono);
    font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
    font-weight:400}
  .sheet.bare .sech:first-child{margin-top:0}
  /* the dim reads as a hover cue on a still square, but it would only mute a clip
     that is already playing, so a video square brightens instead */
  .sheet.bare figure.hov:hover .fr,
  .sheet.bare figure.hov.playing .fr{opacity:1}
  .sheet.bare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  @media (min-width:701px){
    .sheet.bare{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  }
  .sheet figure{margin:0;cursor:pointer}
  .sheet .fr{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--rule);
    background:var(--ground);transition:border-color .2s}
  .sheet figure:hover .fr{border-color:var(--exposed)}
  .sheet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .sheet figcaption{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.35}
  .sheet figure.hov[data-lb]{cursor:pointer}
  .sheet figure.hov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .22s}
  .sheet figure.hov:hover video{opacity:1}
  .sheet figure.hov:hover .fr{border-color:var(--exposed)}
  .sheet figure.hov.playing video{opacity:1}
  .sheet figure.hov.playing .fr{border-color:var(--exposed)}
  @media (hover:none){
    .sheet figure.hov{cursor:pointer}
    .sheet figure.hov .fr::after{content:"TAP TO PLAY";position:absolute;left:0;right:0;
      bottom:0;padding:7px 8px;font-family:var(--mono);font-size:8px;letter-spacing:.12em;
      color:rgba(255,255,255,.72);background:linear-gradient(to top,rgba(6,6,9,.9),transparent);
      pointer-events:none;transition:opacity .2s}
    .sheet figure.hov.playing .fr::after{opacity:0}
    .unit .ucredit{opacity:1}
  }
  .sheet .mv{position:absolute;right:7px;bottom:7px;font-family:var(--mono);font-size:8px;
    letter-spacing:.12em;background:rgba(6,6,9,.78);color:var(--cream);padding:3px 6px;border-radius:2px}

  .lb{position:fixed;inset:0;z-index:70;background:rgba(6,6,8,.97);display:none;
    flex-direction:column;align-items:center;justify-content:center;padding:52px 26px 74px}
  .lb.open{display:flex}
  .lb img,.lb video{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
  .lb .cap em{font-style:normal;color:var(--dim);text-transform:none;letter-spacing:0;font-size:12px}
  .lb .x{position:absolute;top:18px;right:22px;background:none;border:1px solid var(--rule);
    color:var(--muted);font-family:var(--mono);font-size:11px;padding:6px 11px;cursor:pointer}
  .lb .x:hover{color:var(--exposed);border-color:var(--exposed)}
  .lb .ar{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
    color:var(--muted);font-size:30px;padding:14px 18px;cursor:pointer;line-height:1}
  .lb .ar:hover{color:var(--exposed)}
  .lb .ar.l{left:6px} .lb .ar.r{right:6px}
  .lb .xlink{position:absolute;left:0;right:0;bottom:48px;text-align:center}
  .lb .xlink button{background:none;border:0;font-family:var(--mono);font-size:10px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--cream);cursor:pointer;
    border-bottom:1px solid var(--rule);padding-bottom:3px}
  .lb .xlink button:hover{color:var(--exposed);border-color:var(--exposed)}
  @media (max-width:700px){.lb{padding:44px 10px 70px}.lb .ar{font-size:24px;padding:10px 12px}}
  .pnav{display:flex;justify-content:space-between;gap:14px;margin:30px 0 0;
    padding-top:16px;border-top:1px solid var(--rule)}
  .pnav button{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;
    color:var(--dim);max-width:47%;transition:color .18s}
  .pnav button:hover{color:var(--exposed)}
  .pnav button:disabled{opacity:.25;cursor:default}
  .pnav .dir{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
    text-transform:uppercase;margin-bottom:5px}
  .pnav .t{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .pnav button:hover .t{color:var(--text)}
  .pnav .r{text-align:right}

  @media (max-width:820px){
    :root{--rail:38px;--head:132px}
    .topband{padding:13px 15px 11px;gap:14px}
    .name{font-size:.95rem;margin-bottom:9px}
    .sorter button{font-size:9px;padding:4px 7px;letter-spacing:.08em}
    .topnav{gap:7px}
    .rail span{margin-left:12px;font-size:9px;letter-spacing:.16em}
    .cells{grid-template-columns:repeat(auto-fill,minmax(45%,1fr))}
    .panel{width:100%;top:auto;bottom:0;height:88%;border-left:0;
      border-top:1px solid var(--line);transform:translateY(100%)}
    .panel.open{transform:none}
    .label{opacity:1;transform:none;padding:26px 10px 9px}
    .label h3{font-size:.74rem}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  /* Reduced motion: tile clips never start, so the video layer must stay hidden or a
     hovered or developed square would swap its picture for an empty, unloaded frame. */
  @media (prefers-reduced-motion:reduce){
    .card .art video,.card:hover .art video,.card.seen .art video{opacity:0!important}
  }
  /* Reduced motion with a cursor: hover no longer starts gallery clips, so they are
     clicked instead, the same path a phone takes, and they say so the same way. */
  @media (hover:hover) and (prefers-reduced-motion:reduce){
    .sheet figure.hov{cursor:pointer}
    .sheet figure.hov:hover video{opacity:0}
    .sheet figure.hov.playing video{opacity:1}
    .sheet figure.hov .fr::after{content:"CLICK TO PLAY";position:absolute;left:0;right:0;
      bottom:0;padding:7px 8px;font-family:var(--mono);font-size:8px;letter-spacing:.12em;
      color:rgba(255,255,255,.72);background:linear-gradient(to top,rgba(6,6,9,.9),transparent);
      pointer-events:none}
    .sheet figure.hov.playing .fr::after{opacity:0}
  }