/* dscrd. Self-contained: every font and image is local, paths are relative. */
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-cyrillic-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Archivo";src:url(fonts/sofia-sans-extra-condensed-cyrillic.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Cutive Mono";src:url(fonts/pt-mono-cyrillic.woff2) format("woff2");font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cutive Mono";src:url(fonts/cutive-mono-latin.woff2) format("woff2");font-display:swap}

:root{
  --bg:#0d0f11;      /* keep in step with BG in tools/decay.py */
  --slab:#14171a;
  --ink:#8d969b;     /* keep in step with DOT in tools/dither.py */
  --hi:#b0b7b9;
  --top:#d0d5d6;
  --dim:#7d868b;
  --cut:#454c52;     /* section words, pressed into the surface */
  --line:#262b2f;
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
  --type:"Cutive Mono","Courier New",monospace;
  --pad:clamp(14px,2.2vw,28px);
  --cols:clamp(16px,2.4vw,32px);
  --rail:clamp(0px,calc((100vw - 900px)*999),44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg) url(img/concrete.webp);background-size:320px;color:var(--ink);font:400 18px/1.26 var(--serif);-webkit-font-smoothing:antialiased;font-kerning:normal;font-variant-ligatures:common-ligatures}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--top);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
img[src$=".png"]{image-rendering:pixelated}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
strong,b{font-weight:inherit}
i,em,cite{font-style:inherit}
q{quotes:none}
sup{font-size:.7em;line-height:0}

/* slim menu: a thread up the left edge, a single line under the name on small screens */
.menu{position:fixed;left:max(0px,calc((100vw - 1640px)/2));top:0;bottom:0;width:var(--rail);z-index:4;display:flex;align-items:center;justify-content:flex-end;gap:26px;flex-direction:row-reverse;writing-mode:vertical-rl;transform:rotate(180deg);padding:0;font:500 10px/1 var(--sans);font-stretch:85%;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.menu a{display:block;padding:7px 12px}
.menu a:hover,.menu a:focus-visible{color:var(--top)}
.page{padding-left:var(--rail);max-width:1640px;margin:0 auto}

/* top: words, picture, records. The picture dissolves into both neighbours. */
.top{display:grid;grid-template-columns:clamp(220px,20vw,280px) minmax(0,1fr) calc(694px + var(--pad));padding-left:var(--pad)}
.id,#records{padding-top:clamp(18px,3vw,36px)}
.id,.stage{align-self:start}
/* both as tall as the picture, so they leave together and the text never drifts onto it */
@media (min-width:1181px) and (min-height:700px){.id,.stage{position:sticky;top:0}.id{min-height:var(--h)}}
h1{font:800 clamp(46px,5vw,66px)/.95 var(--sans);font-stretch:62%;color:var(--hi);letter-spacing:.005em}
.aka{font:400 13px/1.2 var(--type);color:var(--dim);margin-top:6px}
.bio{margin-top:clamp(24px,3.4vw,44px)}
.bio p{font-size:17px;line-height:1.25}
.bio p+p{margin-top:.8em}
/* the bio's right edge runs along the picture's diagonal. The hero scales with its
   width and sits on its bottom edge, so that line is plain arithmetic, no script needed.
   Measured on hero.webp: x = 336 - .3217y. Measure again if the picture changes. */
@media (min-width:1181px){
  .id{
    --col:clamp(220px,20vw,280px);
    --w:calc(min(100vw,1640px) - var(--rail) - 2*var(--pad) - var(--col) - 294px);   /* hero width */
    --h:min(var(--w)*1.25,100vh);                                                    /* hero height */
    --top:calc(clamp(18px,3vw,36px) + clamp(46px,5vw,66px)*.95 + 21.6px + clamp(24px,3.4vw,44px));   /* where the bio starts */
    --gap:24px;   /* dark margin kept between the text and the edge */
    position:relative;z-index:3   /* above the veil of the records */
  }
  .bio{width:max(var(--col),calc(var(--col) + (var(--h) - var(--top))*.3217 - var(--w)*.0521 - var(--gap)))}
  .bio p{text-align:justify}
  .bio::before{content:"";float:right;width:100%;height:460px;shape-outside:polygon(100% 0,max(var(--col),calc(100% - 148px)) 460px,100% 460px)}
}
.by{margin-top:18px;font:400 12.5px/1.45 var(--type);color:var(--dim)}
.hero{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 50%,#000000c0 66%,#00000050 86%,transparent 100%),linear-gradient(to bottom,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 50%,#000000c0 66%,#00000050 86%,transparent 100%),linear-gradient(to bottom,#000 80%,transparent 100%);mask-composite:intersect}
.hero img{width:100%;max-height:100vh;object-fit:cover;object-position:center bottom}
/* the picture runs on under the records, four sleeves wide */
.stage{margin-right:-400px}
#records{position:relative;z-index:2;padding-left:0}
#records .shelf{grid-template-columns:repeat(3,166px);gap:22px 10px;justify-content:start}
#records strong,#records .ct{text-shadow:0 0 2px var(--bg),0 0 6px var(--bg),0 0 10px var(--bg)}
#records .ct{color:var(--ink)}
/* a veil tied to the records, so captions stay readable wherever the picture falls */
#records::before{content:"";position:absolute;inset:0 0 0 -130px;z-index:-1;pointer-events:none;background:linear-gradient(to right,transparent,#0d0f11b8 130px)}
#records h2{margin-top:0;line-height:1.1}

/* sections */
section{padding:0 var(--pad)}
h2{font:800 clamp(24px,2.3vw,30px)/1 var(--sans);font-stretch:62%;color:var(--dim);letter-spacing:.015em;margin:clamp(28px,3.4vw,44px) 0 10px;white-space:nowrap}
.ct{display:block;font:400 12px/1.25 var(--type);color:var(--dim)}

/* records: a shelf, knocked slightly out of true */
.shelf{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,150px);gap:18px 8px;justify-content:space-between}
.sl{display:block;min-width:0}
.sl img{width:150px;height:150px}
.sl strong{display:block;font:500 16px/1.1 var(--sans);font-stretch:70%;letter-spacing:.01em;color:var(--hi);margin-top:6px}
.sl .ct{margin-top:3px}
#records .lab{margin:20px 0 8px}
#records .lab:first-of-type{margin-top:4px}
.all{margin-top:18px;font:500 16px/1.1 var(--sans);font-stretch:70%;letter-spacing:.01em;color:var(--dim)}
.all a:hover{color:var(--top)}
.lab2{margin-top:20px}
.sl:hover strong{color:var(--top)}
.sl:hover img{opacity:1}

/* press: one cast panel across the page */
.slab{background:var(--slab) url(img/concrete.webp);background-size:320px;background-position:40px 90px;box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #000,0 10px 0 -2px #090a0c;position:relative;padding-bottom:26px;overflow:hidden}
/* tie holes left by the formwork */
.slab::before{content:"";position:absolute;inset:14px;pointer-events:none;background:radial-gradient(circle at 5px 5px,#050607 3px,#ffffff10 3.6px,transparent 4.4px) 0 0/10px 10px no-repeat,radial-gradient(circle at 5px 5px,#050607 3px,#ffffff10 3.6px,transparent 4.4px) 100% 0/10px 10px no-repeat,radial-gradient(circle at 5px 5px,#050607 3px,#ffffff10 3.6px,transparent 4.4px) 0 100%/10px 10px no-repeat,radial-gradient(circle at 5px 5px,#050607 3px,#ffffff10 3.6px,transparent 4.4px) 100% 100%/10px 10px no-repeat}
#press{margin:clamp(30px,4vw,48px) var(--pad) 0;padding:0 clamp(24px,2.8vw,36px) 32px}
#press h2{margin-top:22px}

/* the ledger: length of a year and the silence between years do the talking */
.ledger{columns:2;column-gap:var(--cols)}
.yr{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:8px;break-inside:avoid;margin-top:calc(4px + var(--gap)*7px);padding-top:3px;border-top:1px solid var(--line)}
.yr h3{font:400 12px/1.5 var(--type);color:var(--dim)}
.yr p{font:400 14px/1.3 var(--sans);font-stretch:68%;letter-spacing:.012em;color:var(--dim)}
.g{white-space:nowrap;margin-right:.85em;display:inline-block;max-width:100%;white-space:normal}
.g time{font:400 11px/1 var(--type);color:#6a7378}
.g b{color:var(--dim)}
.g i{color:var(--dim)}
.g q{color:#6a7378}
.g.k b{color:var(--ink)}
.g:hover b,.g:hover i,.g:hover q{color:var(--top)}

.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.works li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);align-content:start}
.works img{width:150px;height:auto}
.works h3{font:500 17px/1.08 var(--sans);font-stretch:70%;letter-spacing:.01em;color:var(--hi)}
.works p{font-size:14.5px;line-height:1.16;margin-top:4px;color:var(--ink)}
.docs{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px;font:400 12.5px/1.25 var(--type);color:var(--dim)}
.docs a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
.docs a:hover{color:var(--top)}


.two{display:grid;grid-template-columns:518px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);position:relative;z-index:1}
.lab{font:500 10px/1 var(--sans);font-stretch:85%;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.vids{display:grid;grid-template-columns:repeat(3,166px);gap:22px 10px;justify-content:start}
.vids a{display:block}
.vids img{width:150px;height:112px}
.vids strong{display:block;font:500 16px/1.1 var(--sans);font-stretch:70%;letter-spacing:.01em;margin-top:6px;color:var(--hi)}
.vids .ct{margin-top:3px}
.vids a:hover strong{color:var(--top)}
.tracks li{border-top:1px solid var(--line)}
.tracks a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:3px 0 4px}
.tracks b{font:500 17px/1.15 var(--sans);font-stretch:70%;letter-spacing:.01em;color:var(--hi)}
.tracks i{grid-row:2;font:400 12.5px/1.2 var(--type);color:var(--dim)}
.tracks time{grid-row:1/3;grid-column:2;font:400 12.5px/1.5 var(--type);color:var(--dim)}
.tracks a:hover b{color:var(--top)}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--cols);position:relative;z-index:1}
blockquote{margin-bottom:17px}
blockquote p{font:italic 400 19px/1.16 var(--serif);color:var(--ink)}
cite{display:block;font:400 12.5px/1.3 var(--type);color:var(--dim);margin-top:8px}
cite a:hover{color:var(--top)}

.foot{display:flex;flex-wrap:wrap;gap:6px 22px;padding:26px var(--pad) 30px;font:500 10px/1.4 var(--sans);font-stretch:85%;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.foot a:hover{color:var(--top)}

/* datamosh on touch: slices of the picture slip sideways, red and blue pulled apart (tools/glitch.py) */
.mo{display:block;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:center bottom/cover;opacity:0;pointer-events:none}
@media (hover:hover){.hero::after{background-image:url(img/rgb/hero.jpg)}.hero:hover::after{animation:slip .5s steps(1) 1}}
/* touch screens can't hover: site.js adds .slip at random moments and on tap */
.hero.slip::after{background-image:url(img/rgb/hero.jpg);animation:slip .5s steps(1) 1}
@keyframes slip{
  0%{opacity:.8;clip-path:inset(12% 0 78% 0);transform:translateX(-9px)}
  14%{clip-path:inset(46% 0 44% 0);transform:translateX(14px)}
  29%{opacity:0}
  43%{opacity:.8;clip-path:inset(70% 0 18% 0);transform:translateX(-20px)}
  58%{opacity:0}
}
.sl:hover .mo img,.vids a:hover .mo img,.works .mo:hover img{animation:tick .3s steps(1) 1}
@keyframes tick{0%{transform:none}30%{transform:translateX(-1px)}60%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.hero:hover::after,.sl:hover .mo img,.vids a:hover .mo img,.works .mo:hover img{animation:none}}
/* rgb glitch on hovered thumbs: a strip of frames, site.js picks one at random */
.rgb{position:absolute;left:0;top:0;pointer-events:none;background-repeat:no-repeat;background-size:600% 100%;image-rendering:pixelated;visibility:hidden}

/* the live player, built by player.js */
.player-open{overflow:hidden}
.player{position:fixed;inset:0;margin:auto;width:min(640px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;padding:18px 20px 14px;border:1px solid var(--line);background:var(--slab);color:var(--ink)}
.player::backdrop{background:#0d0f11d9}
.player h3{font:500 22px/1.1 var(--sans);font-stretch:70%;letter-spacing:.01em;color:var(--hi);padding-right:64px}
.p-note{margin-top:5px}
.p-wave{margin:16px 0 12px;height:72px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.p-wave:focus-visible,.player button:focus-visible{outline:1px solid var(--top);outline-offset:2px}
.p-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.player button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:0 10px;font:400 13px/1 var(--type);color:var(--hi);background:none;border:1px solid var(--line);border-radius:0;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none}
.player button:hover{color:var(--top);border-color:var(--dim)}
.player svg{display:block;width:16px;height:16px;fill:currentColor;pointer-events:none}
.player .p-play{min-width:60px}
.p-play .i-pause,.p-play.is-playing .i-play{display:none}
.p-play.is-playing .i-pause{display:block}
.player .p-close{position:absolute;top:8px;right:8px;border-color:transparent}
.p-time{margin-left:auto;font:400 13px/1 var(--type);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-now{color:var(--hi)}
.p-state{min-height:15px;margin-top:8px}
.p-state a{text-decoration:underline}

/* site.js locks each word's box so nothing moves while it flickers */
.w{display:inline-block;white-space:nowrap}

/* the rail needs about 440px of height: phones held sideways get the single line instead */
@media (max-height:460px){:root{--rail:0px}}
@media (max-width:900px),(max-height:460px){
  .menu{position:static;writing-mode:horizontal-tb;transform:none;width:auto;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:0 14px;margin:6px 0 -4px;letter-spacing:.18em}
  .menu a{padding:9px 0}
}
@media (max-width:1180px){
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top{grid-template-columns:clamp(220px,28vw,280px) minmax(0,1fr)}
  .stage{margin-right:0}
  #records::before{display:none}
  #records{grid-column:1/-1;margin:0;padding:0 var(--pad) 0 0}
  #records .shelf,.vids{grid-template-columns:repeat(auto-fill,166px);max-width:518px}
  .hero{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,#000 80%,transparent 100%)}
  .hero img{aspect-ratio:1/1;max-height:none}
}
@media (max-width:1020px){
  .two{grid-template-columns:minmax(0,1fr)}
  .ledger{columns:1}
}
@media (max-width:900px){
  .top{grid-template-columns:minmax(0,1fr);padding:0}
  .id{padding:12px var(--pad) 0}
  .bio{margin-top:14px;max-width:34em}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .quotes>div+div{margin-top:8px}
  .by{display:flex;flex-wrap:wrap;gap:0 12px}
  .stage{margin-top:12px}
  .hero{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
  .hero img{aspect-ratio:3/2}
  #records{padding:0 var(--pad)}
}
@media (max-width:700px){
  .works{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  body{font-size:17px}
  /* sleeves turn into rows, thumbnails at half so dots stay even */
  .shelf,.vids,#records .shelf{grid-template-columns:minmax(0,1fr);gap:8px;max-width:none}
  .sl,.vids a{display:grid;grid-template-columns:75px minmax(0,1fr);grid-template-rows:min-content 1fr;column-gap:10px;}
  .sl .mo,.vids .mo{grid-row:1/3}
  .sl img{width:75px;height:75px}
  .works li{grid-template-columns:75px minmax(0,1fr)}
  .works img{width:75px}
  .vids img{width:75px;height:56px}
  .sl strong,.vids strong{margin-top:0}
  .yr{grid-template-columns:minmax(0,1fr)}
  .yr h3{color:var(--ink)}
}
/* phone, first view: the picture fills the screen, the name stays at the top. The header's parts become grid items of .top so name, picture
   and menu share one row and the bio falls below it. --u scales the picture and the name together. */
@media (max-width:600px) and (orientation:portrait){
  .top{--u:min(1vw,.47vh);--x:min(0px,calc(50vw - 59*var(--u)));grid-template-rows:max(100vh,560px) auto;grid-template-rows:max(100svh,560px) auto}
  @supports (height:1svh){.top{--u:min(1vw,.47svh)}}
  .id{display:contents}
  h1,.aka,.menu,.stage{grid-area:1/1}
  .stage{position:relative;overflow:hidden;margin:0;align-self:stretch}
  .hero{position:absolute;width:max(100vw,calc(150*var(--u)));left:var(--x);bottom:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 86%,transparent 100%)}
  .hero img{aspect-ratio:auto;max-height:none}
  h1{position:relative;z-index:1;align-self:start;margin:14px 0 0 var(--pad);font-size:calc(24*var(--u));line-height:.8;letter-spacing:.005em;white-space:nowrap}
  .aka{position:relative;z-index:1;align-self:start;margin:calc(14px + 24*var(--u)*.8 + 7px) 0 0 var(--pad)}
  .menu{position:relative;z-index:1;align-self:end;justify-content:space-between;gap:0 8px;margin:0;padding:0 var(--pad) 10px}
  /* the bio takes the slope of the projection's left edge */
  .bio{grid-row:2;margin:0;padding:18px var(--pad) 0;max-width:none}
  .bio::before{content:"";float:left;width:88px;height:292px;shape-outside:polygon(0 0,100% 0,0 100%)}
  .by{grid-row:3;margin:0;padding:14px var(--pad) 0}
  #records{grid-row:4;padding-top:34px}
}
/* tablets and small laptops: the desktop idea at any width. Words and picture share one cell, the
   picture bleeds off the right, and the bio's right edge runs along the projection. --w is the
   picture's width, --x its left edge. The line is the one measured above, x = 336 - .3217y at
   960 wide, so at the bio's top (--t below the page top) it sits .35*--w - .3217*--t from --x. */
@media (min-width:601px) and (max-width:1180px) and (min-height:461px){
  .top{--avail:calc(100vw - var(--rail));--w:min(var(--avail),96vh);--x:max(.26*var(--w),calc(var(--avail) - var(--w)));grid-template-columns:minmax(0,1fr);padding:0}
  .id{grid-area:1/1;position:relative;z-index:2;padding:clamp(12px,3vw,36px) var(--pad) 0;--t:calc(clamp(12px,3vw,36px) + 115px)}
  .stage{grid-area:1/1;margin:0;overflow:hidden}
  .hero{width:var(--w);margin-left:var(--x);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,#000 84%,transparent 100%);mask-composite:intersect}
  .hero img{aspect-ratio:auto;max-height:none}
  .bio{width:calc(var(--x) + .35*var(--w) - .3217*var(--t) - 24px - var(--pad));max-width:none;margin-top:16px}
  .bio p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
  .bio::before{content:"";float:right;width:100%;height:540px;shape-outside:polygon(100% 0,calc(100% - 174px) 540px,100% 540px)}
  .by{display:block}
  #records{grid-column:1;padding:0 var(--pad)}
}
/* too narrow to justify without holes; the wrap still follows the diagonal */
@media (min-width:601px) and (max-width:760px) and (min-height:461px){.bio p{text-align:left}}
/* phone on its side: name and menu in the dark, the figures filling the rest, the bio below */
@media (max-height:460px) and (max-width:1000px) and (orientation:landscape){
  .top{grid-template-columns:minmax(0,1fr);grid-template-rows:max(100vh,280px) auto;grid-template-rows:max(100svh,280px) auto;padding:0}
  .id{display:contents}
  h1,.aka,.menu,.stage{grid-area:1/1}
  .stage{position:relative;overflow:hidden;margin:0 0 0 26vw;align-self:stretch}
  .hero{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
  .hero img{height:100%;aspect-ratio:auto;max-height:none;object-position:50% 82%}
  .hero::after{background-position:50% 82%}
  h1,.aka,.menu{position:relative;z-index:1}
  h1{align-self:start;margin:12px 0 0 var(--pad)}
  .aka{align-self:start;margin:calc(12px + 46px*.95 + 6px) 0 0 var(--pad)}
  .menu{align-self:end;justify-self:start;flex-direction:column;align-items:flex-start;margin:0;padding:0 0 8px var(--pad)}
  .menu a{padding:6px 0}
  .bio{grid-row:2;margin:0;padding:20px var(--pad) 0;max-width:none;columns:2;column-gap:var(--cols)}
  .bio p+p{margin-top:0;break-before:column}
  .by{grid-row:3;margin:0;padding:14px var(--pad) 0}
  #records{grid-row:4;padding-top:34px}
}
/* bigger hit areas for fingers, nothing moves on screen */
@media (pointer:coarse){
  .docs{row-gap:8px}
  .docs a,.foot a,.all a,cite a{padding-block:8px;margin-block:-8px}
}