html,body{height:100%;overflow:hidden;background:var(--ink)}
:root{--t:.46s;--strip:.74s var(--ease-both)}

/* Layer order never changes: case at the back, one media stage, index in front.
   Nothing is created or swapped during a transition, it is only uncovered. */
#case{position:fixed;inset:0;z-index:1;background:var(--ink);color:var(--paper);visibility:hidden}
#stage{position:fixed;left:0;top:0;width:100vw;height:100svh;z-index:2;background:#000;transform-origin:0 0;overflow:hidden;pointer-events:none;will-change:transform}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.m.on{visibility:visible}

/* Home and All Work are one strip. Opening All Work moves the strip so its row lands on top as the header. */
#rows{position:fixed;inset:0;z-index:4;height:100svh;display:flex;flex-direction:column;transition:transform var(--strip)}
#all{position:fixed;inset:0;z-index:3;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding-top:var(--hdr,0);transform:translate3d(0,var(--drop,100vh),0);visibility:hidden;transition:transform var(--strip),visibility 0s .74s}
#all::-webkit-scrollbar{display:none}
body.all #rows{transform:translate3d(0,var(--lift,0),0);pointer-events:none}
body.all #allRow{pointer-events:auto}
body.all #all{transform:none;visibility:visible;transition:transform var(--strip),visibility 0s}
body.flying #all{pointer-events:none}
.tail{background:var(--paper);color:var(--ink);padding:32px 18px 72px;border-top:2px solid var(--ink)}

.row{flex:var(--f,1) 1 0;min-height:0;position:relative;overflow:hidden;display:block;width:100%;text-align:left;color:var(--ink);border-top:2px solid var(--ink);transition:flex-grow var(--t) var(--ease);will-change:transform}
#all .row{flex:none;height:var(--h,120px);transition:height var(--t) var(--ease)}
.row.name{background:var(--hot);border-top:0;cursor:default}
.w{position:absolute;left:18px;top:50%;font-size:300px;font-weight:900;font-stretch:62.5%;line-height:1;text-transform:uppercase;white-space:nowrap;transform-origin:0 50%;transform:translateY(-50%) scale(var(--s,.5));transition:transform var(--t) var(--ease),color .16s}
.name .w{line-height:.88}
.name br{display:none}
/* The paper wipes off the row; the word underneath is already in place on the stage. */
.plain{position:absolute;inset:0;background:var(--paper);clip-path:inset(0 0 0 0);transition:clip-path .3s var(--ease)}
.row[data-on] .plain{clip-path:inset(0 0 0 100%)}
.row[data-on]{border-top-color:transparent}
.meta{position:absolute;right:18px;top:50%;transform:translateY(-50%);text-align:right;line-height:1.35;transition:color .2s}
.meta span{display:block;color:var(--mute);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:12px;transition:color .2s}
.row[data-on] .meta,.row[data-on] .meta span{color:#fff}
#allRow:hover .w,#allRow:focus-visible .w{color:var(--hot)}
.row:focus-visible{outline:none}   /* the hot row is the focus state */
.bar{position:absolute;left:20px;right:20px;top:12px;display:flex;justify-content:space-between;color:#000}
.still,.still *{transition:none!important}

/* Case */
.edge{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--hot)}
.ghost{position:absolute;left:6vw;right:0;font-weight:800;font-stretch:112%;font-size:12.5vw;line-height:1;white-space:nowrap;pointer-events:none;letter-spacing:.01em}
.ghost.t{top:0;transform:translateY(-62%)}
.ghost.b{bottom:0;transform:translateY(58%)}
.ghost span{-webkit-text-stroke:1px rgba(247,245,244,.13);color:transparent;display:block}
.ghost .fillp{position:absolute;inset:0;color:var(--hot);-webkit-text-stroke:0;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);transition:clip-path .6s var(--ease)}
#bar{position:fixed;left:var(--gutter);right:var(--edge);top:18px;z-index:7;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none}
#bar.live{pointer-events:auto}
#read{position:fixed;inset:0;width:100%;height:100%;z-index:6;border:0;background:transparent;visibility:hidden;color-scheme:normal}
#read.on{visibility:visible}
.cue{position:absolute;left:calc(50% + 2.5vw);bottom:clamp(14px,3vh,28px);width:max-content;color:var(--paper);opacity:0;transition:opacity .4s;z-index:2}
.cue.on{opacity:1}
.two{position:absolute;left:6vw;right:6vw;top:clamp(70px,12vh,110px);bottom:clamp(70px,12vh,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center}
.card{height:100%}
.body>.label{color:inherit}
.body h2{font-size:clamp(46px,7.4vw,124px);font-weight:900;font-stretch:66%;font-style:italic;line-height:.88;text-transform:uppercase;margin:12px 0 26px}
.body h3{font-size:18px;font-weight:500;margin-bottom:6px}
.body p:not(.label){font-size:clamp(14px,1.1vw,16px);line-height:1.42;color:var(--mute-dark);max-width:50ch;margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px;margin-top:26px;border-top:1px solid var(--rule-dark);padding-top:14px}
.stats b{display:block;font-size:clamp(20px,2.3vw,34px);font-weight:600;letter-spacing:-.01em}
.stats i{font-style:normal;font-size:11.5px;color:var(--mute-dark);display:block;margin-top:4px}
@media (max-width:760px){
  .meta{display:none}
  .bar span+span{display:none}
  .name br{display:inline}
  .name .w{top:56%}
  .two{grid-template-columns:1fr;grid-template-rows:34% 1fr;gap:16px;align-items:start;top:52px;bottom:48px}
  .body h2{margin:6px 0 14px}.body p:not(.label){margin-bottom:10px}.stats{margin-top:10px}
  .ghost{font-size:15vw}
  .cue{left:var(--gutter)}
}