@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Bodoni Moda';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/fonts/bodoni-moda-normal-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Bodoni Moda';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/fonts/bodoni-moda-normal-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Taraka ‘TK’ Tennakoon · the site, after TK's reference (Nora Vale): the work on one screen, small type,
   a five-column grid, and a top bar that inverts whatever sits under it. Public Sans throughout, the clock in Source Serif. */
:root {
  --bg: #ffffff;
  --fg: #0b0b0b;
  --mu: #8c8c8c;
  --hair: #e7e7e7;
  --tile: #f0f0f0;
  --g: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --gap: 16px;
  --sans: 'Public Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --big: clamp(28px, 3vw, 44px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
html.dark {
  --bg: #0b0b0b;
  --fg: #eeeeee;
  --mu: #7d7d7d;
  --hair: #242424;
  --tile: #161616;
  color-scheme: dark;
}
@media (max-width: 759px) {
  :root { --g: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --gap: 12px; }
}
@view-transition { navigation: auto; }
/* changing page from the menu: the bar stays put, the old menu shrinks into the word that was chosen (--vx, --vy, set by
   the new page's head script) while the new page fades in underneath */
.nx-bar { view-transition-name: nx-bar; }
.nx-menu { view-transition-name: nx-menu; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }
::view-transition-old(nx-menu) { animation: nx-away .55s cubic-bezier(.45, 0, .2, 1) both; }
::view-transition-new(nx-menu) { animation: none; opacity: 0; }
@keyframes nx-away {
  0% { clip-path: circle(150vmax at var(--vx, 100%) var(--vy, 0)); opacity: 1; }
  100% { clip-path: circle(0 at var(--vx, 100%) var(--vy, 0)); opacity: 0; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 14px/1.45 var(--sans); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.u:hover, .u[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mu, .g { color: var(--mu); }
.ar { display: inline-block; width: .62em; height: .62em; vertical-align: .05em; }

/* pictures: hold their shape, fade in once decoded */
.m { position: relative; overflow: hidden; background: var(--tile); }
.m img, .m video { width: 100%; height: 100%; object-fit: cover; }
.js .m img { opacity: 0; transition: opacity .6s var(--ease); }
.js .m img.in { opacity: 1; }
.m-none { aspect-ratio: 4 / 5; }
.c45 { aspect-ratio: 4 / 5; }
.c43 { aspect-ratio: 4 / 3; }
.c1610 { aspect-ratio: 16 / 10; }
.c11 { aspect-ratio: 1; }
.c32 { aspect-ratio: 3 / 2; }

/* the big line: a title in black and its second half in grey, as on the reference */
.big { font-size: var(--big); line-height: 1.06; letter-spacing: -.028em; font-weight: 500; max-width: 17em; text-wrap: balance; }
.big .g { display: block; }

/* ------------------------------------------------ the nav: Dubai time, his signature, a +. The whole bar is the button;
   the menu grows out of the exact point you click as a circle of glass, and the pages appear as it reaches them.
   A click anywhere closes it back into that point. */
.nx {
  --bar: 84px; --open: calc(50vh - 64px); --open: calc(50svh - 64px);
  --nf: #0b0b0b; --glass: rgba(255, 255, 255, .96); --bg: rgba(255, 255, 255, .82);
  --grow: cubic-bezier(.3, .72, .12, 1);
  position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--bar); color: var(--nf);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease);
}
html.home .nx, html.dark .nx { --nf: #fff; --glass: rgba(9, 9, 9, .92); --bg: rgba(12, 12, 12, .55); }
.nx-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s linear;
  background: var(--bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nx-y .nx-bg { opacity: 1; }
.nx-on .nx-bg { opacity: 0; }
.nx-bar {
  position: relative; z-index: 2; width: 100%; height: var(--bar); padding: 0 var(--g);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; cursor: pointer;
}
.nx-t { justify-self: start; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.nx-t .tb-t { margin-left: .5em; font-size: 13px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.tb-t { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.nx-sig { display: block; }
.nx-s { display: block; height: 30px; width: auto; }
.nx-plus { justify-self: end; position: relative; width: 24px; height: 24px; transition: transform .8s var(--grow); }
.nx-plus span { position: absolute; left: 50%; top: 50%; width: 20px; height: 1px; margin: -.5px 0 0 -10px; background: currentColor; }
.nx-plus span + span { transform: rotate(90deg); }
.nx-bar:hover .nx-plus { transform: rotate(90deg); }
.nx-on .nx-plus, .nx-on .nx-bar:hover .nx-plus { transform: rotate(135deg); }
/* the growing circle is a plain disc scaled from the click point: the GPU only moves it, nothing repaints or re-blurs */
.nx-menu {
  position: absolute; z-index: 1; inset: 0 0 auto 0; height: var(--open); padding: var(--bar) var(--g) 24px;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden; contain: layout paint;
  visibility: hidden; pointer-events: none; transition: visibility 0s .6s;
}
.nx-on .nx-menu { visibility: visible; pointer-events: auto; transition: none; }
.nx-dot {
  position: absolute; z-index: -1; left: var(--x, 100%); top: var(--y, 0); width: calc(var(--r, 130vmax) * 2); height: calc(var(--r, 130vmax) * 2);
  margin: calc(var(--r, 130vmax) * -1) 0 0 calc(var(--r, 130vmax) * -1); border-radius: 50%; background: var(--glass);
  transform: scale(0); opacity: 0; will-change: transform, opacity;
  transition: transform .6s cubic-bezier(.45, 0, .2, 1), opacity .55s cubic-bezier(.45, 0, .2, 1);
}
.nx-on .nx-dot { transform: scale(1); opacity: 1; transition: transform 1.1s var(--grow), opacity .35s ease-out; }
.nx-menu.snap .nx-dot { transition: none !important; }
.nx-hold .nx-dot, .nx-hold .nx-menu, .nx-hold .nx-menu *, .nx-hold .nx-plus, .nx-hold .nx-bg { transition: none !important; }
.nx-l, .nx-f { position: relative; z-index: 1; }
/* the four pages: one centred row under his signature, equal gaps, each with its number raised to cap height */
.nx-l { --ws: clamp(34px, 4.6vw, 76px); align-self: center; justify-self: center; display: flex; align-items: flex-start; column-gap: calc(var(--ws) * .62); }
.nx-l a { display: flex; align-items: flex-start; transition: opacity .3s var(--ease); }
.nx-l:hover a { opacity: .38; }
.nx-l a:hover, .nx-l a:focus-visible { opacity: 1; }
.nx-w, .nx-i { display: block; overflow: hidden; }
.nx-w { font-size: var(--ws); line-height: 1; letter-spacing: -.035em; padding-bottom: .1em; }
.nx-i { font-size: 10px; line-height: 1; letter-spacing: .08em; margin: calc(var(--ws) * .12) 0 0 .5em; font-variant-numeric: tabular-nums; }
.nx-w > span, .nx-i > span {
  display: block; transform: translate3d(0, 110%, 0); opacity: 0;
  transition: transform .4s cubic-bezier(.45, 0, .2, 1), opacity .3s linear;
}
.nx-on .nx-w > span, .nx-on .nx-i > span { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, .3s), opacity .6s ease-out var(--d, .3s); }
.nx-l a[aria-current] .nx-w > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.nx-go .nx-l a:not([aria-current]), .nx-go .nx-l:hover a:not([aria-current]), .nx-go .nx-f > * { opacity: 0; transition: opacity .12s linear; }
.nx-go .nx-l a[aria-current] { opacity: 1; }
/* email, elsewhere, lights: laid out exactly like the bar above, left, centre, right */
.nx-f { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; font-size: 12px; line-height: 1.4; }
.nx-f > :first-child { justify-self: start; }
.nx-f > :last-child { justify-self: end; }
.nx-f > * { opacity: 0; transition: opacity .25s linear; }
.nx-on .nx-f > * { opacity: 1; transition: opacity .6s linear var(--d, .5s); }
@media (max-height: 540px) and (min-width: 760px) {
  .nx { --bar: 64px; --open: 100vh; --open: 100svh; }
  .nx-l { --ws: clamp(30px, 4.2vw, 48px); }
}
@media (max-width: 759px) {
  .nx { --bar: 68px; --open: min(520px, 100svh); }
  .nx-s { height: 23px; }
  .nx-t { font-size: 10.5px; letter-spacing: .12em; }
  .nx-t .tb-t { display: block; margin: 2px 0 0; font-size: 13px; }
  .nx-l { --ws: 46px; flex-direction: column; align-items: center; row-gap: 12px; }
  .nx-l a { padding-left: 18px; }
  .nx-f { grid-template-columns: 1fr; justify-items: center; row-gap: 3px; }
  .nx-f > :first-child, .nx-f > :last-child { justify-self: center; }
}

/* ------------------------------------------------ the homepage: one screen, five works */
html.home, .home body { background: #000; }
/* the picture is sized to the tallest the screen gets, so a phone's toolbars sliding away never resize or move it */
.st { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; background: #000; }
.st-i { position: absolute; inset: 0; opacity: 0; transition: opacity .38s cubic-bezier(.4, 0, .2, 1); }
.st-i.was { opacity: 1; z-index: 1; transition: none; }
.st-i.on { opacity: 1; z-index: 2; }
.st-i img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.st::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .14) 30%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .14) 70%, rgba(0, 0, 0, .22)); }

/* phones and upright tablets: the works as a list that scrolls over the picture */
.sel { display: none; color: #fff; }
.sel a { display: block; max-width: 360px; opacity: .45; transition: opacity .35s var(--ease); }
.sel a.on { opacity: 1; }
.sel-c { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.sel-l { display: block; font-size: 25px; line-height: 1.16; letter-spacing: -.018em; text-wrap: balance; }  /* TK's provocations, bigger again for an editorial punch (29 Sep) */
@media (max-width: 759px), (max-width: 1100px) and (orientation: portrait) {
  html.home { overscroll-behavior-y: none; }
  .st-i img { object-position: var(--mx, 50%) 50%; }
  .sel { display: grid; position: relative; z-index: 5; row-gap: 64px; padding: 54svh var(--g) 58svh; }
  .sl { display: none; }
}

/* computers and landscape tablets: the works turn like a wheel as you scroll. The client names ride one row; the one at
   the left margin is lit and its line is the masthead below it. tk.js moves the row, the names, the line and the picture
   together with the scroll, so none of them has a transition of its own here. */
@media (min-width: 760px) and (orientation: landscape), (min-width: 1101px) {
  html.home { overflow: hidden; overscroll-behavior: none; }
  .hm { height: 100vh; height: 100svh; touch-action: pinch-zoom; }
  .st { pointer-events: none; }
  html.sl-live .st-i { transition: none; }
  .st::after { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .06) 26%, rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, .46) 100%); }
  .sl { --hs: clamp(44px, 5.9vw, 106px); position: fixed; z-index: 5; left: 0; right: 0; top: 56%; color: #fff; -webkit-user-select: none; user-select: none; }
  /* the five names sit on the page's five columns, one to a column, so a turn of the wheel moves them exactly one column */
  .sl-row { display: flex; gap: var(--gap); padding: 0 var(--g); white-space: nowrap; will-change: transform; }
  .sl-row > li { flex: 0 0 calc((100% - 4 * var(--gap)) / 5); min-width: 0; white-space: normal; }  /* a long name wraps inside its column */
  .js .sl-row:not(.ready) { visibility: hidden; }
  .sl-n { display: block; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .42; -webkit-user-drag: none; }
  .sl-n.on { opacity: 1; }
  .sl-n:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .sl-hs { position: relative; margin: 24px var(--g) 0; height: calc(var(--hs) * 1.03 * 3); }
  .sl-h {
    position: absolute; left: 0; top: 0; max-width: 15em; font-size: var(--hs); line-height: 1.03; letter-spacing: -.035em; font-weight: 500;
    text-wrap: balance; text-shadow: 0 0 40px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; will-change: opacity, transform; -webkit-user-drag: none;
  }
  .sl-h.on { opacity: 1; pointer-events: auto; }
  .sl-h.on:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
}

/* the opening: black, the signature writes itself, then the work */
.is { display: none; }
html.opening .is {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #000; color: #fff;
  transition: opacity .9s var(--ease);
}
html.opening.opened .is { opacity: 0; pointer-events: none; }
.is-sig { width: min(46vw, 400px); }
.is-sig svg { display: block; width: 100%; height: auto; visibility: hidden; }
.is.go svg { visibility: visible; }
html.opening:not(.landing) .nx, html.opening:not(.landing) .sel, html.opening:not(.landing) .sl { opacity: 0; filter: blur(14px); pointer-events: none; }
.sel, .sl { transition: opacity 1.4s var(--ease), filter 1.4s var(--ease); }

/* the reel: twelve scenes, each opening from a slit across the middle, on a fast beat */
.rl { display: none; }
html.opening .rl { display: block; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 4; background: #000; overflow: hidden; }
.sc { position: absolute; inset: 0; clip-path: inset(50% 0 50% 0); }
.sc.on { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.76, 0, .24, 1); }
.sc.now { transition: none; }
.sc img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.sc-bw img { filter: grayscale(1) contrast(1.08); object-position: 50% 22%; }
/* a colour card (TK, 29 Sep: Stockholm Blue, his signature blown up): the signature runs off both edges, a shade deeper
   than the card; on an upright screen it turns to run up the screen, as the word did */
.sc-card { --ink: color-mix(in srgb, var(--card, #5a94d0) 74%, #000); display: grid; place-items: center; overflow: hidden; background: var(--card, #5a94d0); }
.sc-card span { font: 600 min(64vh, 46vw)/.8 var(--sans); color: var(--ink); letter-spacing: -.07em; transform: rotate(-90deg); }
.sc-sig {
  position: absolute; left: 50%; top: 50%; width: 240vw; aspect-ratio: 1042 / 150; transform: translate(-50%, -50%); background: var(--ink);
  -webkit-mask: url(/sig.svg) center / 100% 100% no-repeat; mask: url(/sig.svg) center / 100% 100% no-repeat;
}
@media (orientation: portrait) { .sc-sig { width: 240vh; width: 240svh; transform: translate(-50%, -50%) rotate(-90deg); } }
.rl::after { content: ""; position: absolute; inset: 0; z-index: 99; opacity: 0; transition: opacity 1.4s var(--ease);
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .14) 30%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .14) 70%, rgba(0, 0, 0, .22)); }
html.landing .rl::after { opacity: 1; }
@media (orientation: portrait) { .sc img { object-position: var(--mx, 50%) 50%; } }

/* ------------------------------------------------ inner pages */
.pg { padding-top: clamp(120px, 21vh, 190px); min-height: 70vh; }
.wh {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 30px;
  padding: 0 var(--g); margin-bottom: 44px;
}
.wh-t { grid-column: 1 / -1; font-size: 17px; font-weight: 500; letter-spacing: -.012em; }
.wh-r { display: block; margin-bottom: 3px; color: var(--mu); }  /* the page it stems from, over the arrow */
.wh-a { display: inline-block; margin-right: .15em; }
.wh-f { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 10px; }
.fl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; }
.fl-w { grid-column: 2 / span 4; }
/* the labels, in the clock's serif (TK: so they read as labels, and what follows as the switches) */
.fl-k { margin-right: 8px; font-family: var(--serif); font-size: 12px; letter-spacing: .06em; color: var(--fg); }
.fl button { color: var(--mu); text-transform: uppercase; transition: color .2s; }
.fl button:hover, .fl button[aria-pressed="true"] { color: var(--fg); }

.gr {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 44px; align-items: start;
  padding: 0 var(--g);
}
.gr li[hidden] { display: none; }
.gr a { display: block; }
.t-t, .t-c, .t-r, .t-h { display: block; font-size: 10.5px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.t-t { margin-top: 9px; }
.t-c { color: var(--mu); }
.t-r, .t-h { display: none; }
.gr a:hover .t-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gr[data-view="list"] { display: block; }
.gr[data-view="list"] .m { display: none; }
.gr[data-view="list"] a {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 11px 0 10px; border-top: 1px solid var(--hair);
}
.gr[data-view="list"] .t-t { margin: 0; grid-column: 1 / span 2; }
.gr[data-view="list"] .t-r, .gr[data-view="list"] .t-h { display: block; color: var(--mu); }
/* list view, with a mouse: hovering a line shows its picture in the empty lane beside it, hanging from the line (never
   following the pointer, never over the switches above), and the line goes dark, as on TK's Nora Vale reference.
   Titles keep to the first column so the lane is always clear. */
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
  .gr[data-view="list"] a { position: relative; }
  .gr[data-view="list"] .t-t { grid-column: 1; }
  .gr[data-view="list"] .t-c { grid-column: 3; }
  .gr[data-view="list"] .t-r { grid-column: 4; }
  .gr[data-view="list"] .t-h { grid-column: 5; }
  .gr[data-view="list"] .m {
    display: block; position: absolute; z-index: 3; top: 0; left: calc(20% + var(--gap) * .2);
    width: min(calc(20% - var(--gap) * .8), 300px); height: auto;
    opacity: 0; pointer-events: none; transition: opacity .14s linear;
  }
  .gr[data-view="list"] .m-t { width: min(calc((20% - var(--gap) * .8) * .72), 216px); }  /* an upright picture, narrower */
  .gr[data-view="list"] .m-none { display: none; }
  .gr[data-view="list"] a:hover .m, .gr[data-view="list"] a:focus-visible .m { opacity: 1; }
  .gr[data-view="list"] .t-c, .gr[data-view="list"] .t-r, .gr[data-view="list"] .t-h { transition: color .14s linear; }
  .gr[data-view="list"] a:hover .t-c, .gr[data-view="list"] a:hover .t-r, .gr[data-view="list"] a:hover .t-h { color: var(--fg); }
}
@media (max-width: 759px) {
  .gr { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .wh-f { grid-template-columns: 1fr; }
  .fl-w { grid-column: 1; }
  .gr[data-view="list"] a { grid-template-columns: 1fr 1fr; row-gap: 2px; }
  .gr[data-view="list"] .t-t { grid-column: 1 / -1; }
  .gr[data-view="list"] .t-r, .gr[data-view="list"] .t-h { display: none; }
}

/* meta rows: tiny labels over values, on the grid */
.meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 14px; margin-top: 12vh; font-size: 11.5px; line-height: 1.4; }
.meta dt { color: var(--mu); }
@media (max-width: 759px) { .meta { grid-template-columns: 1fr 1fr; margin-top: 56px; } }

/* project page */
.pj-h0 { padding: 0 var(--g); margin-bottom: 20px; }
/* every page opens the same way (TK, 29 Sep: 'a consistent size in hero images'): the full width at 16:9, never taller
   than the screen, the picture cropped around its centre to fill it */
.pj-hero { padding: 0 var(--g); }
.pj-hero .m { width: 100%; height: min(calc((100vw - 2 * var(--g)) * 9 / 16), calc(100vh - 64px)); height: min(calc((100vw - 2 * var(--g)) * 9 / 16), calc(100svh - 64px)); }
.pj-sec {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); align-content: start;
  padding: 0 var(--g); margin: 120px 0;
}
.pj-sec > * { grid-column: 3 / span 3; max-width: 640px; }
.pj-sec > .pj-k { grid-column: 1 / span 2; }
.pj-k { font-size: 11.5px; line-height: 1.4; color: var(--mu); padding-top: 4px; }
.pj-h, .pj-rh { font-size: 22px; line-height: 1.22; letter-spacing: -.015em; font-weight: 500; margin-bottom: 18px; text-wrap: balance; }
.pj-p { font-size: 15px; line-height: 1.55; }
.pj-p + .pj-p { margin-top: 1em; }
.pj-p b { font-weight: 500; }
.pj-q { padding: 0 var(--g); margin: 120px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
.pj-q p { grid-column: 2 / span 4; font-size: var(--big); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; max-width: 20em; text-wrap: balance; }
.pj-q cite { grid-column: 2 / span 4; margin-top: 18px; font-style: normal; font-size: 11.5px; color: var(--mu); }
.pj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px var(--gap); margin-top: 36px; }  /* the page's columns 3, 4 and 5 */
.pj-sec > .pj-stats { max-width: none; }
@media (max-width: 759px) { .pj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-v { display: block; font-size: var(--big); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.st-l { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--mu); }
.pj-sec > dl { max-width: none; }
.pj-cr dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--gap); font-size: 11.5px; line-height: 1.4; }
.pj-cr dt { color: var(--mu); }
.pj-req { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pj-one, .pj-pair, .pj-film { margin: 8px var(--g); }
/* one picture or film, as large as the screen allows (Ed, 29 Sep: 'ALL images ... FULL screen width'): the full width,
   or, when that would be taller than the screen, the screen's height, centred, so it is always seen whole */
/* Every edge on the margins or the columns (Ed, 2 Oct, of Zero's one picture 3px short of the pair above it: 'ALL images
   and text boxes/cards must align to margins. None must have different squiff placements'). --cap is the widest the
   screen's height lets the picture be; it is then SNAPPED: a picture that would fill 70% of the width or more takes the
   whole width, one between 85% of three columns and that takes exactly three columns (columns 2 to 4), and only a
   picture narrower than that (an upright poster) keeps the width the screen's height gives it, centred in its frame. */
.pj-one { --cap: calc((100vh - 40px) * var(--r)); --cap: calc((100svh - 40px) * var(--r));
  --w: max(min(var(--cap), 0.85 * ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.85 * ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))) * 1000), ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.7 * 100%) * 1000), 100%)); }
.pj-one > .m, .pj-one > .pj-film, .pj-one > .pj-cap { width: var(--w); margin-left: auto; margin-right: auto; }
.pj-one > .pj-film { margin-top: 0; margin-bottom: 0; }
/* one that is narrower than the page sits in an invisible frame (TK, 30 Sep): the same space below it as above it, up
   to the 120px between sections, so the size difference reads as intended; a full-width one keeps the 8px */
.pj-one {
  --side: calc(((100% - 2 * var(--g)) - max(min(var(--cap), 0.85 * (((100% - 2 * var(--g)) - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.85 * (((100% - 2 * var(--g)) - 4 * var(--gap)) * 0.6 + 2 * var(--gap))) * 1000), (((100% - 2 * var(--g)) - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.7 * (100% - 2 * var(--g))) * 1000), (100% - 2 * var(--g))))) / 2);
  margin-top: max(8px, min(120px, var(--side) * 3)); margin-bottom: max(8px, min(120px, var(--side) * 3));
}
.pj-cap { margin-top: 14px; font-size: 15px; line-height: 1.4; min-height: 1.4em; }
.pj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
/* pictures where TK placed them (29 Sep): a row at one height across the full width, each as wide as its shape asks; a
   set of three, the two wide ones stacked beside the upright one, which fills their height */
.pj-row { display: flex; gap: 8px; align-items: flex-start; margin: 8px var(--g); }
.pj-cell { flex: var(--r) 1 0; min-width: 0; }
.pj-cell > .pj-film, .pj-set .pj-film, .pj-car .pj-film { margin: 0; }
/* a carousel (TK, of BMW's colourways): one at a time, each as large as the screen allows with room for its caption,
   swiped, or stepped through with the arrows or a click on the picture */
.pj-car { margin: 64px 0; }
.pj-car-t { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline-offset: -2px; }
.pj-car-t::-webkit-scrollbar { display: none; }
.pj-car-s { flex: 0 0 100%; box-sizing: border-box; margin: 0; padding: 0 var(--g); scroll-snap-align: center; scroll-snap-stop: always;
  --cap: calc((100vh - 150px) * var(--r)); --cap: calc((100svh - 150px) * var(--r));
  --w: max(min(var(--cap), 0.85 * ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.85 * ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))) * 1000), ((100% - 4 * var(--gap)) * 0.6 + 2 * var(--gap))), clamp(0px, calc((var(--cap) - 0.7 * 100%) * 1000), 100%)); }  /* its own padding already holds the margins, so 100% is the content width */
.pj-car-s > * { width: var(--w); margin-left: auto; margin-right: auto; }
.pj-car.on .pj-car-s img { cursor: pointer; }
.pj-car-c { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.pj-car-c .pj-cap { flex: 1; margin: 0; }
.pj-car-b { display: flex; align-items: center; gap: 2px; margin-top: -5px; font-size: 11.5px; color: var(--mu); }
.pj-car-n { margin-right: 8px; font-variant-numeric: tabular-nums; }
.pj-car-b button { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; }
.pj-car:not(.on) .pj-car-b button { visibility: hidden; }
.pj-car-b .ar { width: 14px; height: 10px; }
.pj-set { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px var(--g); }
/* a small cut-out (BMW's colour palettes) floating over the outer edge of a film that is set in from that side */
.pj-flt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); margin: 64px 0; }
.pj-flt-b { position: relative; grid-column: 2 / span 4; }
.pj-flt-r .pj-flt-b { grid-column: 1 / span 4; }
.pj-flt-b > .pj-film { margin: 0; }
.pj-flt-a { position: absolute; z-index: 2; top: 10%; left: 0; width: auto; height: 58%; transform: translateX(-50%); }
.pj-flt-r .pj-flt-a { left: auto; right: 0; transform: translateX(50%); }
/* words beside a picture or film (TK, 2 Oct), on the five columns: an upright picture takes two columns and the words the two
   on the far side of the empty one between; anything wider takes three and the words the two beside it. The words stay in
   view while a tall picture goes by. */
.pj-bs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: 0 var(--g); margin: 120px 0; }
.pj-bs-t { grid-row: 1; position: sticky; top: 110px; }
.pj-bs-t .pj-k { margin-bottom: 14px; }
.pj-bs-m { grid-row: 1; }
.pj-bs-m > .m, .pj-bs-m > .pj-film { width: 100%; margin: 0; }
.pj-bs-r .pj-bs-t { grid-column: 1 / span 2; }
.pj-bs-r .pj-bs-m { grid-column: 3 / span 3; }
.pj-bs-r.pj-bs-up .pj-bs-m { grid-column: 4 / span 2; }
.pj-bs-l .pj-bs-t { grid-column: 4 / span 2; }
.pj-bs-l .pj-bs-m { grid-column: 1 / span 3; }
.pj-bs-l.pj-bs-up .pj-bs-m { grid-column: 1 / span 2; }
.pj-tight { margin-bottom: 48px; }
.pj-tight + .pj-bs { margin-top: 48px; }
/* a thin black frame (TK, of MINI's sign-up film, whose white screens run into the white page): inside the picture's own
   edge, so it still sits exactly on the margins */
.pj-fr video, .pj-fr img { outline: 2px solid #000; outline-offset: -2px; }
.pj-set-s { display: flex; flex-direction: column; gap: 8px; }
.pj-set-t { position: relative; }
@media (min-width: 760px) {  /* the two stacked share one landscape frame, as on the originals; the upright one fills their height */
  .pj-set-s > .m { aspect-ratio: 16 / 10 !important; }
  .pj-set-t > .m, .pj-set-t > .pj-film { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; }
}
.pj-film video { width: 100%; height: auto; background: #000; }
/* a YouTube film on a project page (added in the dashboard): its still, then YouTube's player, and its caption */
.pj-film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.pj-film figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--mu); }
.pj-hero + .pj-sec, .pj-hero + .pj-one, .pj-hero + .pj-pair, .pj-hero + .pj-film,
.pj-hero + .pj-row, .pj-hero + .pj-set, .pj-hero + .pj-car { margin-top: 120px; }
/* a page with its own colour behind its pictures (Festival City's white posters on a white page): past the opening
   picture the page eases into it, so the pictures stand out; the menu bar follows. Not with the lights off. */
html.has-ground, html.has-ground body { transition: background-color 1.6s cubic-bezier(.3, .1, .2, 1); }
html.grounded:not(.dark), html.grounded:not(.dark) body { background-color: var(--ground); }
html.grounded:not(.dark) .nx { --bg: color-mix(in srgb, var(--ground) 82%, transparent); }
@media (prefers-reduced-motion: reduce) { html.has-ground, html.has-ground body { transition: none; } }
.pj[data-ground] .pj-row, .pj[data-ground] .pj-set, .pj[data-ground] .pj-pair { margin-top: 40px; margin-bottom: 40px; }  /* each its own print */
.pj[data-ground] .pj-one { margin-top: max(40px, min(120px, var(--side) * 3)); margin-bottom: max(40px, min(120px, var(--side) * 3)); }
@media (max-width: 759px) {
  .pj[data-ground] .pj-row, .pj[data-ground] .pj-set, .pj[data-ground] .pj-pair { margin-top: 20px; margin-bottom: 20px; }
  .pj[data-ground] .pj-one { margin-top: max(20px, min(64px, var(--side) * 3)); margin-bottom: max(20px, min(64px, var(--side) * 3)); }
}
@media (max-width: 759px) {
  .pj-sec, .pj-q { grid-template-columns: 1fr; margin: 72px 0; }
  .pj-sec > *, .pj-sec > .pj-k, .pj-q p, .pj-q cite { grid-column: 1; }
  .pj-k { margin-bottom: 14px; }
  .pj-pair { grid-template-columns: 1fr; }
  .pj-row { flex-direction: column; }
  .pj-cell { flex: none; width: 100%; }
  .pj-set { grid-template-columns: 1fr; }
  .pj-flt { grid-template-columns: 1fr; margin: 40px 0; }
  .pj-flt-b, .pj-flt-r .pj-flt-b { grid-column: 1; }
  .pj-flt-a { height: 46%; transform: translateX(-18%); }
  .pj-flt-r .pj-flt-a { transform: translateX(18%); }
  .pj-bs { grid-template-columns: 1fr; margin: 72px 0; row-gap: 28px; }
  .pj-bs-t, .pj-bs-r .pj-bs-t, .pj-bs-l .pj-bs-t { grid-column: 1; grid-row: 1; position: static; }
  .pj-bs-m, .pj-bs-r .pj-bs-m, .pj-bs-l .pj-bs-m, .pj-bs-r.pj-bs-up .pj-bs-m, .pj-bs-l.pj-bs-up .pj-bs-m { grid-column: 1; grid-row: 2; }
  .pj-tight { margin-bottom: 32px; }
  .pj-tight + .pj-bs { margin-top: 32px; }
  .pj-cr dl { grid-template-columns: 1fr; }
}

/* previous and next */
.pn { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); padding: 0 var(--g); margin-top: 160px; }
.pn a { display: block; padding-top: 14px; border-top: 1px solid var(--hair); }
.pn a:last-child { text-align: right; grid-column: 2; }
.pn-k { display: block; font-size: 11.5px; color: var(--mu); }
.pn-t { display: block; margin-top: 6px; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; font-weight: 500; }
.pn a:hover .pn-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 759px) { .pn-t { font-size: 17px; } }

/* journal entry: a magazine feature. The title is set in Bodoni Moda, the Journal's face since its masthead; the text
   in Source Serif 4 with a drop cap; the cover leads by its shape (edge to edge, wide, or beside the title when it
   stands upright); pictures in the text break out of the column by shape (edge to edge, wide on alternating sides, tall
   to one side, or several in a row of equal height); one of his sentences is lifted out; more from the Journal ends it. */
.ps { padding-top: clamp(110px, 17vh, 170px); }
.ps-top { padding: 0 var(--g); }
.ps-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.ps-mast { font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 11; font-weight: 600; font-size: 12.5px; letter-spacing: .16em; color: var(--fg); }
.ps-mast:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ps-t { margin-top: 22px; max-width: 16em; font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 96; font-weight: 500;
  font-size: clamp(40px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.ps-dek { margin-top: 22px; max-width: 34em; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--mu); }
.ps-by { margin-top: 22px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ps-hero { margin-top: 56px; }
.ps-hero-full { margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
.ps-hero-full img { display: block; width: 100%; height: min(86vh, calc(100vw / var(--r))); height: min(86svh, calc(100vw / var(--r))); object-fit: cover; }
.ps-hero-wide .m, .ps-hero-split .m { width: min(100%, var(--nw), calc(84vh * var(--r))); width: min(100%, var(--nw), calc(84svh * var(--r))); }
.ps-top-split { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.ps-top-split .ps-hd { grid-column: 1 / span 2; padding: 0 12px 6px 0; }
.ps-top-split .ps-t { font-size: clamp(34px, 3.5vw, 62px); }
.ps-top-split .ps-hero { grid-column: 3 / span 3; margin-top: 0; }
.ps-top-split .ps-hero .m { margin-left: auto; }
.ps-b { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); margin-top: clamp(64px, 10vh, 112px); }
.ps-b > * { grid-column: 3 / span 3; max-width: 680px; }
.ps-b > p, .ps-side-t > p { font-family: var(--serif); font-size: 19.5px; line-height: 1.68; margin-bottom: 1.05em; }
.ps-b > p.ps-drop::first-letter, .ps-side-t > p.ps-drop::first-letter { float: left; font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 96; font-weight: 500;
  font-size: 5.05em; line-height: .76; margin: .08em .1em 0 -.03em; }
.ps-h { font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 60; font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12;
  letter-spacing: -.01em; margin: 1.3em 0 .55em; text-wrap: balance; }
.ps-f { margin: 30px 0 48px; }
.ps-b > .ps-bleed { grid-column: 1 / -1; max-width: none; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
.ps-b > .ps-wide { grid-column: var(--gs) / span var(--gk); max-width: none; }
.ps-b > .ps-in { max-width: min(680px, var(--nw)); }
.ps-b > .ps-inw { grid-column: 3 / span var(--gk); max-width: none; }
.ps-b .ps-inw .m { width: 100%; }
.ps-in .m { width: min(100%, var(--nw), calc(80vh * var(--r))); width: min(100%, var(--nw), calc(80svh * var(--r))); }
/* an upright or small picture in the left column, the text running on beside it */
.ps-b > .ps-side { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; margin: 10px 0 30px; }
.ps-sidef { grid-column: 1 / span 2; margin: 7px 0 0; }
.ps-sidef .m { width: 100%; }
.ps-sidef.ps-sk1 { grid-column: 1 / span 1; }
.ps-sidef.ps-sk1 .m { width: min(100%, max(var(--nw), 250px)); }
.ps-side-t { grid-column: 3 / span 3; max-width: 680px; }
.ps-side-t > .ps-h:first-child { margin-top: 0; }
.ps-b > .ps-row { grid-column: var(--gs) / span var(--gk); max-width: none; display: flex; gap: var(--gap); align-items: flex-start; }
.ps-ri { flex: var(--r) 1 0; min-width: 0; }
.ps-b > p.ps-credit, .ps-side-t > p.ps-credit { font-family: var(--sans); font-size: 10.5px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin: 6px 0 18px; }
.ps-b > .ps-v { grid-column: 2 / span 4; max-width: none; }
.ps-b > .ps-q { grid-column: 1 / span 3; max-width: none; margin: 34px 0 54px; padding-top: 22px; border-top: 1px solid var(--fg);
  font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 96; font-weight: 500; font-size: clamp(30px, 3.3vw, 54px); line-height: 1.08;
  letter-spacing: -.02em; text-wrap: balance; }
.ps-q p::before { content: "\201C"; }
.ps-q p::after { content: "\201D"; }
/* lists and links TK types in the dashboard: set like his paragraphs, links underlined so they read as links */
.ps-b > .ps-l, .ps-side-t > .ps-l { font-family: var(--serif); font-size: 19.5px; line-height: 1.68; margin: 0 0 1.05em; padding-left: 1.1em; list-style: disc; }
.ps-b > ol.ps-l, .ps-side-t > ol.ps-l { list-style: decimal; }
.ps-l li + li { margin-top: .3em; }
.ps-b p a, .ps-b li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ps-end { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); margin-top: 36px; }
.ps-tags { grid-column: 3 / span 3; max-width: none; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; border-top: 1px solid var(--hair); }
.ps-tags li { padding: 6px 12px 5px; border: 1px solid var(--hair); border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ps-more { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin: 120px var(--g) 0; padding-top: 18px; border-top: 2px solid var(--fg); }
.ps-more > .mf-grid { grid-column: 3 / -1; column-gap: var(--gap); }
.ps-more .mf-card + .mf-card::before { display: none; }
.ps-more-h { grid-column: 1 / span 2; margin-bottom: 26px; font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 60; font-weight: 500; font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -.01em; }
.ps .pn { margin-top: 90px; }
@media (min-width: 760px) and (max-width: 1099px) {
  .ps-b > *, .ps-tags { grid-column: 2 / span 4; }
  .ps-b > .ps-side { grid-column: 1 / -1; }
  .ps-b > .ps-v { grid-column: 1 / -1; }
  .ps-b > .ps-q { grid-column: 1 / -1; }
  .ps-more .mg-h3 { font-size: 14.5px; }
}
@media (max-width: 759px) {
  .ps-top-split { grid-template-columns: 1fr; row-gap: 32px; }
  .ps-top-split .ps-hd, .ps-top-split .ps-hero { grid-column: 1; }
  .ps-top-split .ps-hero .m { margin-left: 0; }
  .ps-hero-wide, .ps-top-split .ps-hero { margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
  .ps-hero-wide .m, .ps-hero-split .m { width: 100%; }
  .ps-b { grid-template-columns: minmax(0, 1fr); }
  .ps-b > *, .ps-b > .ps-side, .ps-b > .ps-v, .ps-b > .ps-q, .ps-b > .ps-wide, .ps-b > .ps-row, .ps-b > .ps-inw, .ps-b > .ps-bleed { grid-column: 1; }
  .ps-more { grid-template-columns: minmax(0, 1fr); }
  .ps-more-h, .ps-more > .mf-grid { grid-column: 1; }
  .ps-b > p, .ps-side-t > p, .ps-b > .ps-l, .ps-side-t > .ps-l { font-size: 18px; }
  .ps-b > .ps-side { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .ps-sidef, .ps-side-t { grid-column: 1; padding-right: 0; }
  .ps-sidef .m { width: min(100%, var(--nw)); }
  .ps-b > .ps-wide { max-width: none; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
  .ps-b > .ps-row { gap: 6px; }
  .ps-end { grid-template-columns: minmax(0, 1fr); }
  .ps-tags { grid-column: 1; }
  .ps-more { margin-top: 80px; }
}
/* his films: the still until you press play */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; cursor: pointer; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-p {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s linear;
}
.yt-p span { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-p, .yt:focus-visible .yt-p { background: rgba(0, 0, 0, .65); }
.ps-v iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.ps-v figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--mu); }

/* films take the screen, cushioned (TK, 30 Sep): a layer of its own over the page, so the page is never moved or
   reshaped while a film plays. Soft black and 'Now playing', then (on a phone held upright) his signature turning to
   sideways, then the film fading in; leaving, the same in reverse. --k shortens it all once the visitor knows it. */
.vx {
  position: fixed; inset: 0; z-index: 300; background: #000; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity calc(.55s * var(--k, 1)) ease, visibility 0s linear calc(.55s * var(--k, 1));
}
.vx.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity calc(.55s * var(--k, 1)) ease, visibility 0s; }
.vx-now {
  position: absolute; left: 0; right: 0; top: 50%; margin: -.5em 0 0; text-align: center; color: #fff;
  font: 500 10px/1 var(--sans); letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  opacity: 0; transition: opacity .15s ease;  /* a very quick fade out */
}
.vx.now .vx-now { opacity: .92; transition: opacity .15s ease .15s; }  /* and in, as the black settles; then a full second (Ed, 30 Sep) */
.vx-cue { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vx-cue i {
  display: block; width: min(58vw, 320px); aspect-ratio: 1042 / 150; background: #fff; opacity: 0; transform: rotate(0deg);
  -webkit-mask: url(/sig.svg) center / contain no-repeat; mask: url(/sig.svg) center / contain no-repeat;
  transition: opacity calc(.35s * var(--k, 1)) ease, transform calc(.85s * var(--k, 1)) cubic-bezier(.45, 0, .2, 1);
}
.vx.sig .vx-cue i { opacity: 1; }
.vx.turn .vx-cue i { transform: rotate(90deg); }
.vx-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
@media (orientation: portrait) and (pointer: coarse) {  /* a phone held upright: the film lies across it */
  .vx-stage { width: var(--vh, 100vh); height: var(--vw, 100vw); transform-origin: 0 0; transform: translateX(var(--vw, 100vw)) rotate(90deg); }
}
.vx-media { position: absolute; inset: 0; opacity: 0; transition: opacity calc(.6s * var(--k, 1)) ease; }
.vx.play .vx-media { opacity: 1; }
.vx-media video, .vx-media iframe { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; background: #000; }
.vx-media video[hidden] { display: none; }
.vx-x {
  position: absolute; z-index: 3; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.vx.play .vx-x { opacity: 1; pointer-events: auto; transition-delay: .4s; }
.vx-x svg { width: 12px; height: 12px; }
/* until the browser allows sound: a layer over the whole film, and one tap anywhere on it turns the sound on */
.vx-tap { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vx-tap[hidden] { display: none; }
.vx-tap span {
  padding: 13px 20px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff;
  font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: vx-fade .5s ease .5s both;
}
@keyframes vx-fade { from { opacity: 0; } }
/* a journal card with no picture and no film: the title on the tile */
.m-type { display: flex; align-items: flex-end; padding: 16px; background: var(--fg); color: var(--bg); }
.m-type span { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.16; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; }

/* journal: a magazine front page, after Monocle, in the site's own type. His title is the masthead, the sections
   filter the page, the newest entry leads beside the next and the Alien MixTape box, then every entry by year. */
.mg { padding-top: clamp(104px, 15vh, 150px); }
.mg [hidden] { display: none !important; }
/* the masthead: TK's own artwork for The Alien Aesthete (his 2026 Illustrator file, via ai_logo.py), across exactly the
   page's columns 2 to 4 on a computer (the size of his mockup, give or take 4%, and centred by the grid itself), the whole
   width on tablets and phones, in the page's ink so it turns white with the lights off; its letters rise through a slit */
.mg-top { padding: 0 var(--g) 33px; text-align: center; }
.mg-mast { display: block; }
.mg-art { display: block; width: calc((100% - 4 * var(--gap)) * .6 + 2 * var(--gap)); height: auto; margin: 0 auto; overflow: hidden; }
@media (max-width: 1099px) { .mg-art { width: 100%; } }
.mg-art path { transform-box: view-box; transition: transform .95s cubic-bezier(.2, .75, .15, 1) calc(var(--d) * 620ms), opacity .5s ease calc(var(--d) * 620ms); }
.js .mg-mast:not(.on) .mg-art path { transform: translateY(104%); opacity: 0; }
.mg-tag { margin-top: 34px; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; }
.mg-nav { margin: 0 var(--g); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.mg-nav ul { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 26px; }
.mg-nav button { padding: 12px 0 11px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); transition: color .15s linear; }
.mg-nav button:hover, .mg-nav button[aria-pressed="true"] { color: var(--fg); }
.mg-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.mg-h1 { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.08; letter-spacing: -.028em; font-weight: 500; text-wrap: balance; }
.mg-h2 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.18; letter-spacing: -.016em; font-weight: 500; text-wrap: balance; }
.mg-h3 { margin-top: 14px; font-size: 18px; line-height: 1.22; letter-spacing: -.012em; font-weight: 500; text-wrap: balance; }
.mg-d { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg); opacity: .8; }
.mg-a .mg-d { font-size: 16.5px; max-width: 34em; }
.mg-meta { display: flex; margin-top: 14px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mu); }
.mg-meta span + span::before { content: "|"; margin: 0 8px; }
.mg a:hover .mg-h1, .mg a:hover .mg-h2, .mg a:hover .mg-h3, .mg a:hover .mg-mix-h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mg-lead { display: grid; grid-template-columns: 5fr 3fr 3fr; align-items: start; margin: 32px var(--g) 0; padding-bottom: 48px; }
.mg-a { padding-right: 28px; }
.mg-a .m { margin-top: 24px; }
.mg-b { align-self: stretch; padding: 0 28px; border-left: 1px solid var(--hair); }
.mg-b .m { margin-bottom: 16px; }
.mg-mix { min-width: 0; margin-left: 4px; padding: 20px 20px 6px; border-radius: 6px; background: #0b0b0b; color: #fff; }
html.dark .mg-mix { background: #1b1b1b; }
.mg-mix-t { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .22); font-size: 20px; font-weight: 500; letter-spacing: -.012em; }
.mg-mix-t span { color: rgba(255, 255, 255, .5); }
.mg-mix-f, .mg-mix-x { display: none; }
/* the tapes scroll inside the box, with a soft fade at whichever end has more */
.mg-mix-s {
  --ft: 0px; --fb: 44px;
  overscroll-behavior: contain; outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.mg-mix-s.end { --fb: 0px; }
.mg-mix-s::-webkit-scrollbar { width: 4px; height: 4px; }
.mg-mix-s::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 4px; }
.mg-mix-s::-webkit-scrollbar-track { background: transparent; }
.mg-mix-s:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 4px; }
.mg-mix .m { background: #222; }
.mg-mix-h { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 500; }
.mg-mix-d { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
@media (min-width: 1100px) {
  /* computers: the box runs the full height of the lead row, after the Monocle Radio panel TK sent: the latest tape and
     its Listen button, then the others with his line for each, scrolling in whatever height is left */
  .mg-mix { align-self: stretch; display: flex; flex-direction: column; padding-bottom: 0; }
  .mg-mix-f { display: block; padding: 18px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .mg-mix-fa { display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-items: start; }
  .mg-mix-k { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
  .mg-mix-fh { display: block; font-size: 17px; line-height: 1.22; font-weight: 500; letter-spacing: -.01em; }
  .mg-mix-fa:hover .mg-mix-fh { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .mg-mix-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 5px;
    font-size: 13px; line-height: 1.42; color: rgba(255, 255, 255, .64); }
  .mg-mix-f .mg-mix-x { -webkit-line-clamp: 3; margin-top: 8px; }
  .mg-mix-btn { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 120px; padding: 9px 15px 8px; border-radius: 999px;
    background: #fff; color: #0b0b0b; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .15s linear; }
  .mg-mix-btn:hover { background: rgba(255, 255, 255, .8); }
  .mg-mix-btn .ar { width: 8px; height: 8px; }
  .mg-mix-w { position: relative; flex: 1 1 auto; min-height: 220px; }
  .mg-mix-s { position: absolute; inset: 0; overflow-y: auto;
    -webkit-mask-image: linear-gradient(transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
    mask-image: linear-gradient(transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
  .mg-mix-s.scrolled { --ft: 28px; }
  .mg-mix-s li:first-child { display: none; }
  .mg-mix li a { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .mg-mix li:last-child a { border-bottom: 0; }
}
@media (max-width: 1099px) {
  /* tablets and phones: every tape as a card in a row to swipe, the next one peeking in */
  .mg-mix { padding-bottom: 20px; }
  .mg-mix-s { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin-top: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
  .mg-mix-s.scrolled { --ft: 20px; }
  .mg-mix-s ol { display: flex; gap: 14px; }
  .mg-mix-s li { flex: 0 0 min(62%, 250px); scroll-snap-align: start; }
  .mg-mix li a { display: block; }
  .mg-mix li a > span { display: block; margin-top: 10px; }
}
.mg-yr { margin: 0 var(--g); padding: 16px 0 56px; border-top: 2px solid var(--fg); }
.mg-yr-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.mg-yr-h span:first-child { font-size: 22px; font-weight: 500; letter-spacing: -.012em; }
.mg-yr-n { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mu); }
.mg-wrap { overflow: hidden; }
.mg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 44px; margin: 0 -23px 0 -22px; }
.mg-card { padding: 0 22px; border-right: 1px solid var(--hair); }
.mg[data-f="all"] .is-lead { display: none; }
.mg:not([data-f="all"]) .mg-lead { display: none; }
@media (min-width: 760px) and (max-width: 1099px) {
  .mg-lead { grid-template-columns: 1.4fr 1fr; row-gap: 40px; }
  .mg-mix { grid-column: 1 / -1; margin-left: 0; }
  .mg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; }
  .mg-card { padding: 0; border: 0; }
}
@media (max-width: 759px) {
  .mg-top { padding-bottom: 24px; }
  .mg-art { width: 100%; }
  .mg-tag { margin-top: 16px; font-size: 9.5px; letter-spacing: .2em; }
  .mg-nav { margin: 0; }
  .mg-nav ul { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; column-gap: 22px; padding: 0 var(--g); scrollbar-width: none; }
  .mg-nav ul::-webkit-scrollbar { display: none; }
  .mg-nav li { flex: none; }
  .mg-lead { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .mg-a, .mg-b { padding: 0; border: 0; }
  .mg-mix { margin: 0; }
  .mg-grid { grid-template-columns: 1fr; row-gap: 36px; margin: 0; }
  .mg-card { padding: 0; border: 0; }
}

/* the All view: a newspaper front page that plays with its grid (TK's NYT and Monocle references): a cover with a giant
   headline, a dominant tall portrait between two stories, the page split in halves with modules nested in each, a wide
   feature, a feature beside a numbered list, rows of three and four. A section shows the plain by-year grids instead. */
.mg[data-f="all"] .mg-yr { display: none; }
.mg:not([data-f="all"]) .mg-feed { display: none; }
.mg-feed { margin: 0 var(--g); }
.mf { border-top: 1px solid var(--fg); padding: 22px 0 48px; }
.mf a { display: block; }
.mf-h0 { font-size: clamp(40px, 5.2vw, 84px); line-height: .98; letter-spacing: -.042em; font-weight: 500; text-wrap: balance; }
.mf-h1 { font-size: clamp(28px, 2.9vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.mf-h2 { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.13; letter-spacing: -.02em; font-weight: 500; text-wrap: balance; }
.mf-h3 { font-size: 16px; line-height: 1.24; letter-spacing: -.01em; font-weight: 500; text-wrap: balance; }
.mf-t .mg-d { max-width: 34em; }
.mf a:hover .mf-h0, .mf a:hover .mf-h1, .mf a:hover .mf-h2, .mf a:hover .mf-h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.c219 { aspect-ratio: 21 / 9; }
.c169 { aspect-ratio: 16 / 9; }
.c54 { aspect-ratio: 5 / 4; }
/* cover */
.mf-cover { border-top-width: 3px; }
.mf-cv { display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: end; margin-top: 20px; }
.mf-cv .mg-d { font-size: 17px; }
/* portrait: narrow text, the picture dominant, a second story beside a rule */
.mf-port { display: grid; grid-template-columns: 9fr 3fr; align-items: start; }
.mf a.mf-x { display: grid; grid-template-columns: 1fr 1.7fr; column-gap: 32px; align-items: start; padding-right: 32px; }
.mf-x .mf-p .m { max-height: min(76vh, 720px); }
.mf-yz { align-self: stretch; display: grid; row-gap: 20px; align-content: start; padding-left: 28px; border-left: 1px solid var(--hair); }
.mf-yz .mf-y + .mf-y { padding-top: 20px; border-top: 1px solid var(--hair); }
.mf-yz .m { margin-bottom: 14px; }
.mf-yz .mf-h2 { font-size: clamp(19px, 1.45vw, 23px); }
/* split: two halves, a big story on the left; on the right a feature above three small ones */
.mf-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.mf a.mf-sa { padding-right: 32px; }
.mf-sa .mf-t { margin-top: 18px; }
.mf-sb { align-self: stretch; display: grid; row-gap: 26px; align-content: start; padding-left: 32px; border-left: 1px solid var(--hair); }
.mf a.mf-sbf { display: grid; grid-template-columns: 2fr 3fr; column-gap: 24px; align-items: start; }
.mf-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; padding-top: 24px; border-top: 1px solid var(--hair); }
.mf-mini .mf-h3 { margin-top: 10px; font-size: 14.5px; }
/* wide: text beside a picture two thirds wide */
.mf-wide a { display: grid; grid-template-columns: 4fr 8fr; column-gap: 40px; align-items: start; }
.mf-wide .mf-h1 { font-size: clamp(32px, 3.4vw, 56px); }
.mf-wide .mg-d { font-size: 16.5px; }
.mf-rev a { grid-template-columns: 8fr 4fr; }
.mf-rev .mf-p { order: -1; }
/* list: a feature beside a numbered column */
.mf-list { display: grid; grid-template-columns: 7fr 5fr; align-items: start; }
.mf a.mf-lf { padding-right: 32px; }
.mf-lf .mf-t { margin-top: 18px; }
.mf-ol { align-self: stretch; padding-left: 32px; border-left: 1px solid var(--hair); }
.mf-ol li + li { border-top: 1px solid var(--hair); }
.mf-ol a { display: grid; grid-template-columns: 40px 1fr; padding: 15px 0; }
.mf-ol li:first-child a { padding-top: 0; }
.mf-n { font-size: 24px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--mu); font-variant-numeric: tabular-nums; }
/* rows of three and four */
.mf-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 44px; }
.mf-card { position: relative; }
.mf-card + .mf-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: -22px; border-left: 1px solid var(--hair); }
/* tablets: the modules stack, but every split inside them is on the page's five columns too (three and two) */
@media (min-width: 760px) and (max-width: 1099px) {
  .mf-cv { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-cv > div:first-child { grid-column: 1 / span 3; }
  .mf-cv > div:last-child { grid-column: 4 / span 2; }
  .mf-port, .mf-split, .mf-list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .mf a.mf-x { padding-right: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-x .mf-t { grid-column: 1 / span 2; }
  .mf-x .mf-p { grid-column: 3 / span 3; }
  .mf a.mf-sa, .mf a.mf-lf { padding-right: 0; }
  .mf-yz, .mf-sb, .mf-ol { border-left: 0; padding: 24px 0 0; border-top: 1px solid var(--hair); }
  .mf-yz { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-yz .mf-y:first-child { grid-column: 1 / span 3; }
  .mf-yz .mf-y + .mf-y { grid-column: 4 / span 2; padding-top: 0; border-top: 0; }
  .mf a.mf-sbf { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-sbf .mf-t { grid-column: 1 / span 2; }
  .mf-sbf .mf-p { grid-column: 3 / span 3; }
  .mf-mini { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .mf-mini a { display: grid; grid-template-columns: 88px 1fr; column-gap: 14px; align-items: start; }
  .mf-mini .mf-h3 { margin-top: 0; }
  .mf-wide a, .mf-rev a { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-wide .mf-t { grid-column: 1 / span 2; }
  .mf-wide .mf-p { grid-column: 3 / span 3; }
  .mf-rev .mf-p { grid-column: 1 / span 3; grid-row: 1; }
  .mf-rev .mf-t { grid-column: 4 / span 2; grid-row: 1; }
  .mf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
  .mf-grid .mg-h3 { font-size: 14.5px; }
  .mf-grid .mg-d { display: none; }
  .mf-card + .mf-card::before { display: none; }
  .ps-more .mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .mf { padding: 20px 0 44px; }
  .mf-cv, .mf-port, .mf-split, .mf-list, .mf-wide a, .mf-rev a, .mf a.mf-x, .mf a.mf-sbf { grid-template-columns: 1fr; row-gap: 18px; }
  .mf-cv { margin-top: 16px; }
  .mf-rev .mf-p, .mf-x .mf-p, .mf-sbf .mf-p { order: -1; }
  .mf a.mf-x, .mf a.mf-sa, .mf a.mf-lf { padding-right: 0; }
  .mf-port, .mf-split, .mf-list { row-gap: 26px; }
  .mf-yz, .mf-sb, .mf-ol { border-left: 0; padding: 22px 0 0; border-top: 1px solid var(--hair); }
  .mf-cover .c219 { aspect-ratio: 4 / 3; }
  .mf-mini { grid-template-columns: 1fr; row-gap: 16px; }
  .mf-mini a { display: grid; grid-template-columns: 88px 1fr; column-gap: 14px; align-items: start; }
  .mf-mini .mf-h3 { margin-top: 0; }
  .mf-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .mf-card + .mf-card::before { display: none; }
  .mf-card a { display: grid; grid-template-columns: 104px 1fr; column-gap: 14px; align-items: start; }
  .mf-card .mg-h3 { margin-top: 0; font-size: 16px; }
  .mf-card .mg-d { display: none; }
}

/* the Journal on the site's five columns (Ed, 28 Sep: "be ultra pernickety about how things line up across the whole
   website"): every story, picture and rule of the front page starts and ends on the same column lines as the nav, the
   footer and every other page. A thin rule between neighbouring stories sits in the middle of their gutter. */
@media (min-width: 1100px) {
  /* (the lead row keeps its own proportions: Ed, 28 Sep, 'what it looked like before was great') */
  .mf-yz::before, .mf-sb::before, .mf-ol::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--hair); }
  /* cover: the headline over columns 1 to 3, its words on 4 and 5 */
  .mf-cv { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-cv > div:first-child { grid-column: 1 / span 3; }
  .mf-cv > div:last-child { grid-column: 4 / span 2; }
  /* portrait: the words on column 1, the tall picture on 2 and 3, two more stories on 4 and 5 */
  .mf-port { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf a.mf-x { grid-column: 1 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); padding: 0; }
  .mf-x .mf-p { grid-column: 2 / span 2; }
  .mf-yz { grid-column: 4 / span 2; position: relative; padding: 0; border: 0; }
  /* split: a big story on columns 1 and 2; on 3 to 5 a feature above three small ones, one to a column */
  .mf-split { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf a.mf-sa { grid-column: 1 / span 2; padding: 0; }
  .mf-sb { grid-column: 3 / span 3; position: relative; padding: 0; border: 0; }
  .mf a.mf-sbf { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-sbf .mf-p { grid-column: 2 / span 2; }
  .mf-mini { column-gap: var(--gap); }
  /* wide: the words on columns 1 and 2, the picture on 3 to 5 (or the other way round) */
  .mf-wide a { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-wide .mf-t { grid-column: 1 / span 2; }
  .mf-wide .mf-p { grid-column: 3 / span 3; }
  .mf-rev a { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mf-rev .mf-p { grid-column: 1 / span 3; grid-row: 1; }
  .mf-rev .mf-t { grid-column: 4 / span 2; grid-row: 1; }
  /* list: the feature on columns 1 to 3, the numbered stories on 4 and 5 */
  .mf-list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf a.mf-lf { grid-column: 1 / span 3; padding: 0; }
  .mf-ol { grid-column: 4 / span 2; position: relative; padding: 0; border: 0; }
  /* rows: five to a row, one to each column, like the Work grid */
  .mf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .mf-card + .mf-card::before { display: none; }
  .ps-more .mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* a section's entries by year: five to a row too */
  .mg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; }
  .mg-card { padding: 0; border: 0; }
}

/* masthead options for The Alien Aesthete (preview page): ten typefaces, each under a copy of the nav bar, each with
   one light movement. The resting state is the finished masthead; with JS, a masthead waits in its first frame until it
   comes into view (.on), and Replay runs it again. */
.mo-h0 { padding: 0 var(--g); margin-bottom: 64px; }
.mo { padding: 0 var(--g); margin-bottom: 96px; }
.mo-top { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 12px; align-items: start; margin-bottom: 14px; }
.mo-n { padding-top: 2px; font-size: 13px; color: var(--mu); font-variant-numeric: tabular-nums; }
.mo-t { font-size: 17px; font-weight: 500; letter-spacing: -.012em; }
.mo-t span { margin-left: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.mo-d { margin-top: 4px; max-width: 46em; font-size: 13.5px; color: var(--mu); }
.mo-r { padding: 8px 14px 7px; border: 1px solid var(--hair); border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.mo-r:hover { border-color: var(--fg); }
.mo-frame { border: 1px solid var(--hair); padding: 0 28px; background: var(--bg); overflow: hidden; }
.mo-m { position: relative; overflow: hidden; padding: 26px 0 24px; cursor: pointer; outline: none; }
.fit { display: block; width: max-content; white-space: nowrap; }
.nt, .nt * { transition: none !important; animation: none !important; }
.mh-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.mh-t { justify-self: start; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.mh-t .tb-t { margin-left: .5em; font-size: 13px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.mh-s .nx-s { height: 30px; }
.mh-plus { justify-self: end; width: 20px; height: 20px; background: linear-gradient(currentColor, currentColor) center / 20px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 20px no-repeat; }
.mh-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px; padding: 12px 0 11px; margin-bottom: 26px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.mh-nav span:first-child { color: var(--fg); }
.mo-m .ch { display: inline-block; }
.mo-m .ch.sp { display: inline; }
.m1-f, .m2-t, .m3-t, .m4-t, .m5-t, .m6-t, .m7-t, .m8-t, .m9-t, .m10-t { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

/* 01 broadsheet: blackletter between newspaper rules; the ink settles and the rules draw out from the middle */
.m1 { text-align: center; }
.m1-r { height: 4px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.m1-w { margin: 16px auto 10px; font-family: 'UnifrakturMaguntia', serif; line-height: 1.04;
  transition: opacity 1.3s ease .15s, filter 1.3s ease .15s, transform 1.3s cubic-bezier(.2, .7, .2, 1) .15s; }
.m1-f { display: grid; grid-template-columns: 1fr auto 1fr; padding: 8px 0 7px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); transition: opacity .8s ease .8s; }
.m1-f span:first-child { justify-self: start; }
.m1-f span:last-child { justify-self: end; }
.js .mo-m:not(.on) .m1-r { transform: scaleX(0); }
.js .mo-m:not(.on) .m1-w { opacity: 0; filter: blur(10px); transform: scale(1.03); }
.js .mo-m:not(.on) .m1-f { opacity: 0; }

/* 02 classic: wide English capitals between hairlines; the letters draw together */
.m2 { text-align: center; padding-top: 18px; padding-bottom: 20px; border-top: 1px solid var(--fg); }
.m2-w { margin: 0 auto; font-family: 'Libre Baskerville', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.1;
  transition: letter-spacing 1.7s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.m2-t { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); transition: opacity .8s ease .9s; }
.js .mo-m:not(.on) .m2-w { letter-spacing: .5em; opacity: 0; }
.js .mo-m:not(.on) .m2-t { opacity: 0; }

/* 03 engraved: Roman inscriptional capitals; a light passes across once */
.m3 { text-align: center; }
.m3-the { font-family: 'Cinzel', serif; font-weight: 600; font-size: 13px; letter-spacing: .5em; margin-bottom: 4px; }
.m3-w { margin: 0 auto; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .05em; line-height: 1.05; color: var(--fg);
  transition: opacity 1s ease; }
.m3-t { margin-top: 12px; transition: opacity .8s ease .9s; }
.mo-m.on .m3-w { background: linear-gradient(100deg, var(--fg) 0 40%, #b8b8b8 50%, var(--fg) 60% 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: m3-sheen 1.9s cubic-bezier(.45, 0, .2, 1) .3s both; }
@keyframes m3-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.js .mo-m:not(.on) .m3-w, .js .mo-m:not(.on) .m3-the, .js .mo-m:not(.on) .m3-t { opacity: 0; }
.m3-the { transition: opacity 1s ease; }

/* 04 couture: a fashion Didone; the letters rise through a slit */
.m4 { text-align: center; }
.m4-w { margin: 0 auto; overflow: hidden; padding: .06em 0 .02em; font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 96; font-weight: 500;
  line-height: .96; letter-spacing: -.012em; }
.m4-w .ch { transition: transform .95s cubic-bezier(.2, .75, .15, 1) calc(var(--i) * 34ms), opacity .5s ease calc(var(--i) * 34ms); }
.m4-t { margin-top: 12px; letter-spacing: .32em; transition: opacity .8s ease 1s; }
.js .mo-m:not(.on) .m4-w .ch { transform: translateY(108%); opacity: 0; }
.js .mo-m:not(.on) .m4-t { opacity: 0; }

/* 05 poster: tall condensed capitals across the width; the letters grow up from the baseline */
.m5-w { font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: .9; letter-spacing: .004em; }
.m5-w .ch { transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 30ms); }
.m5-t { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--fg); transition: opacity .8s ease .8s; }
.js .mo-m:not(.on) .m5-w .ch { transform: scaleY(0); }
.js .mo-m:not(.on) .m5-t { opacity: 0; }

/* 06 stretch: a variable face widening until it fills the page */
.m6-the { font-family: 'Anybody', sans-serif; font-variation-settings: 'wdth' 150, 'wght' 800; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 6px; }
.m6-w { font-family: 'Anybody', sans-serif; font-variation-settings: 'wdth' 150, 'wght' 900; text-transform: uppercase; line-height: .9; letter-spacing: -.02em;
  transition: font-variation-settings 1.7s cubic-bezier(.65, 0, .2, 1); }
.m6-t { margin-top: 12px; transition: opacity .8s ease 1.2s; }
.js .mo-m:not(.on) .m6-w { font-variation-settings: 'wdth' 50, 'wght' 900; }
.js .mo-m:not(.on) .m6-t { opacity: 0; }

/* 07 split: contemporary wide capitals; the two halves slide in and lock */
.m7-w { font-family: 'Syne', sans-serif; font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.02em; }
.m7-a, .m7-b { display: inline-block; transition: transform 1.1s cubic-bezier(.2, .75, .15, 1), opacity .8s ease; }
.m7-t { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fg); transition: opacity .8s ease .9s; }
.js .mo-m:not(.on) .m7-a { transform: translateX(-14%); opacity: 0; }
.js .mo-m:not(.on) .m7-b { transform: translateX(14%); opacity: 0; }
.js .mo-m:not(.on) .m7-t { opacity: 0; }

/* 08 eccentric: a soft, wonky old-style serif; the ink thickens as it lands */
.m8 { text-align: center; }
.m8-w { margin: 0 auto; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'wght' 720, 'SOFT' 0, 'WONK' 1; line-height: 1; letter-spacing: -.035em;
  transition: font-variation-settings 1.8s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; }
.m8-t { margin-top: 12px; transition: opacity .8s ease 1.1s; }
.js .mo-m:not(.on) .m8-w { font-variation-settings: 'opsz' 144, 'wght' 120, 'SOFT' 100, 'WONK' 1; opacity: .12; }
.js .mo-m:not(.on) .m8-t { opacity: 0; }

/* 09 future: wide technical capitals; a scanning beam reveals them */
.m9 { text-align: center; }
.m9-x { position: relative; width: max-content; margin: 8px auto 0; }
.m9-w { font-family: 'Michroma', sans-serif; text-transform: uppercase; letter-spacing: .16em; line-height: 1.2; clip-path: inset(-10% 0 -10% 0);
  transition: clip-path 1.5s cubic-bezier(.65, 0, .2, 1); }
.m9-bar { position: absolute; top: -12%; bottom: -12%; left: 100%; width: 1px; background: var(--fg); opacity: 0; }
.mo-m.on .m9-bar { animation: m9-beam 1.5s cubic-bezier(.65, 0, .2, 1) both; }
@keyframes m9-beam { 0% { left: 0; opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.m9-t { margin-top: 14px; letter-spacing: .4em; transition: opacity .8s ease 1.3s; }
.js .mo-m:not(.on) .m9-w { clip-path: inset(-10% 100% -10% 0); }
.js .mo-m:not(.on) .m9-t { opacity: 0; }

/* 10 signal: a transmission decoding letter by letter; a cursor blinks, then goes */
.m10-w { font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; line-height: 1.05; letter-spacing: -.03em; }
.m10-cur { display: inline-block; width: .56em; height: .82em; margin-left: .12em; vertical-align: -.04em; background: var(--fg); opacity: 0; }
.mo-m.on .m10-cur { animation: m10-blink .5s steps(1) 1.4s 7 both; }
@keyframes m10-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.m10-t { margin-top: 12px; font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: .06em; transition: opacity .8s ease 1.2s; }
.js .mo-m:not(.on) .m10-w .ch { visibility: hidden; }
.js .mo-m:not(.on) .m10-t { opacity: 0; }

@media (max-width: 759px) {
  .mo-top { grid-template-columns: 30px 1fr; row-gap: 10px; }
  .mo-r { grid-column: 2; justify-self: start; }
  .mo-frame { padding: 0 14px; }
  .mh-bar { height: 64px; }
  .mh-s .nx-s { height: 22px; }
  .mh-nav { justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
  .m1-f, .m5-t, .m7-t { grid-template-columns: 1fr; display: grid; row-gap: 3px; text-align: center; justify-items: center; }
  .m1-f span:first-child, .m1-f span:last-child { justify-self: center; }
}

/* about, lights down (Ed, 28 Sep: "more vibey"): a dark room with a little film grain. His portrait comes up out of the
   black, looking across at his statement, which rises in word by word over a line of what he is up to now; his first
   paragraph lights up as you read down it; the clients drift past; his address closes the page at full width. */
html.av { --bg: #0b0b0b; --fg: #eeeeee; --mu: #7d7d7d; --hair: #262626; --tile: #161616; --fg2: #c4c4c4; color-scheme: dark;
  --av-sec: clamp(140px, 20vh, 200px); }  /* one gap between every section of the page (the Colophon, a footnote, sits closer) */
html.av .nx { --nf: #fff; --glass: rgba(9, 9, 9, .92); --bg: rgba(12, 12, 12, .55); }
html.av body::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
}
.av.pg { padding-top: 96px; }
/* the first screen: the statement at its foot, as it was; the portrait on the right margin, its edges melting into the
   black, and bigger than it first was (Ed, 28 Sep: the arch reverted, 'just make it bigger'): from just under the top of
   the screen to a little past its foot, where it has already faded away */
.av-hero { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); min-height: calc(100vh - 120px); min-height: calc(100svh - 120px); }
.av-ph {
  /* it reaches left until it almost touches the statement (Ed, 28 Sep): tk.js sets --ae just past the statement's longest
     line; without it, an estimate from the statement's size. Never wider than a little over square, so he stays whole. */
  position: absolute; z-index: 0; top: -76px; right: var(--g); left: var(--ae, calc(var(--g) + min(47.5vw, 840px)));
  height: calc(100vh + 40px); height: calc(100svh + 40px); width: auto; max-width: calc((100vh + 40px) * 1.05); margin-left: auto; background: none;
  --mk: linear-gradient(to right, transparent, #000 24%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
  -webkit-mask-image: var(--mk); mask-image: var(--mk); -webkit-mask-composite: source-in; mask-composite: intersect;
}
.av-ph img { object-position: 55% 60%; }
.js .av-ph img { transition: opacity 2.4s cubic-bezier(.3, 0, .2, 1) .1s; }
.av-hd { grid-column: 1 / span 3; grid-row: 1; align-self: end; position: relative; z-index: 1; padding-bottom: 26px; }
.av-lead { max-width: 11.5em; font-size: clamp(40px, 5.1vw, 88px); line-height: 1.01; letter-spacing: -.038em; font-weight: 500; text-wrap: balance; }
.av-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.av-w > span { display: inline-block; transition: transform 1.15s cubic-bezier(.2, .75, .15, 1) calc(180ms + var(--i) * 48ms), opacity .7s ease calc(180ms + var(--i) * 48ms); }
.js .av-lead:not(.on) .av-w > span { transform: translateY(106%); opacity: 0; }
/* what he is up to now, just under the bio (TK asked for it there): his current colour, Stockholm Blue (#5A94D0, his hex
   and his name for it), as the colour of the words on the black, under a gentle line of the same blue. On a computer the
   items sit on the page's lines (TK, 29 Sep, marked on a screenshot): the left margin, the second column, then the two
   columns of the bio above, so Works in progress starts where the bio's first column does and Latest mixtape where its
   second does. The row is ten half-columns wide to reach the bio's second column exactly; a long item wraps within its
   column rather than crossing into the next. Latest dispatch left it (no line was left for it: TK's own fallback).
   Spacing is measured from the letters, not their boxes (text-box trim). It sits closer to the bio than a new section
   would, as its coda. */
.av-nw { --now: #5a94d0; margin: calc(var(--av-sec) * .55) var(--g) 0; border-top: 1px solid color-mix(in srgb, var(--now) 30%, transparent); color: var(--now); }
.av-now { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px; padding-top: 20px; }
@media (min-width: 1100px) {
  .av-now > div:nth-child(4n + 1) { grid-column: 1 / span 2; }
  .av-now > div:nth-child(4n + 2) { grid-column: 3 / span 2; }
  .av-now > div:nth-child(4n + 3) { grid-column: 5 / span 3; }
  .av-now > div:nth-child(4n + 4) { grid-column: 8 / span 3; }
}
.av-now dt { margin-bottom: 10px; font-size: 10.5px; line-height: 1.4; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--now) 85%, transparent); }
.av-now dd { margin: 0; font-size: 15px; line-height: 1.45; letter-spacing: -.003em; }
.av-now dt, .av-now dd { text-box: trim-both cap alphabetic; }
.av-nb { white-space: nowrap; }
@media (min-width: 1100px) { .av-nt { display: block; } }  /* TK: 'House Of Suns' / by Alastair Reynolds, so the row is balanced */
.av-now .av-eq { height: .7em; margin-left: .5em; }
@media (prefers-reduced-motion: no-preference) {
  .av-nw { transition: clip-path 1s cubic-bezier(.2, .75, .15, 1); }
  .js .av-nw:not(.av-in) { clip-path: inset(50% 0 50% 0); }
}
@media (max-width: 1099px) {
  .av-now { row-gap: 0; padding-top: 0; column-gap: var(--gap); }
  .av-now > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 12px 0; }
  .av-now > div + div { border-top: 1px solid color-mix(in srgb, var(--now) 16%, transparent); }
  .av-now dt { grid-column: 1 / span 2; margin: 0; }
  .av-now dd { grid-column: 3 / -1; line-height: 1.35; }
  .av-now dt, .av-now dd { text-box: normal; }
}
.av-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; margin-left: 8px; }
.av-eq i { width: 2px; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.3); animation: av-eq 1.1s ease-in-out infinite alternate paused; }
.av-eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.4s; }
.av-eq i:nth-child(3) { animation-duration: 1.35s; animation-delay: -.9s; }
.av-run .av-eq i { animation-play-state: running; }
@keyframes av-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.av-bio { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); margin-top: var(--av-sec); }
.av-lit { grid-column: 1 / -1; max-width: 25em; font-family: var(--serif); font-size: clamp(27px, 3.2vw, 52px); line-height: 1.16; letter-spacing: -.02em; text-wrap: pretty; }
@supports (animation-timeline: view()) {
  .js .av-lit { view-timeline: --av-lit block; }
  .js .av-lit span {
    animation: av-lit linear both; animation-timeline: --av-lit;
    animation-range: cover calc(16% + var(--p) * 30%) cover calc(20% + var(--p) * 30%);
  }
}
@keyframes av-lit { from { opacity: .16; } to { opacity: 1; } }
.av-more { grid-column: 3 / -1; margin-top: 96px; columns: 2; column-gap: var(--gap); }  /* two columns: TK finds them easier to read */
.av-more p { font-family: var(--serif); font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.6; color: var(--fg2); }
@media (max-width: 1099px) { .av-more { columns: 1; } }
.av-more p + p { margin-top: 1em; }

.av-s { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); margin-top: var(--av-sec); }
.av-k { grid-column: 1 / span 2; align-self: start; padding-top: 7px; font-size: 11.5px; line-height: 1.4; color: var(--mu); }
.av-n { display: inline-block; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.av-s > .av-rows, .av-s > p { grid-column: 3 / -1; }
.av-rows li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 15px 0 14px; border-top: 1px solid var(--hair); }
.av-rows li > * { grid-row: 1; }
.av-rows .av-r1 { grid-column: 1 / span 2; }
.av-rows .av-r2 { grid-column: 3; }
.av-rows3 .av-r2 + .av-r2 { justify-self: end; text-align: right; }
@media (max-width: 1099px) { .av-rows3 .av-r2 + .av-r2 { grid-row: 2; justify-self: start; text-align: left; } }
.av-rows li:last-child { border-bottom: 1px solid var(--hair); }
.av-r1 { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.25; letter-spacing: -.018em; }
.av-r2 { font-size: 13px; line-height: 1.4; color: var(--mu); }

.av-cl { margin-top: var(--av-sec); }
.av-cl > .av-k { padding: 0 var(--g); }
.av-mq-k { margin: 30px 0 4px; padding: 0 var(--g); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.av-mq { overflow: hidden; font-size: clamp(36px, 5.4vw, 92px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; white-space: nowrap; }
.av-mq-r { color: var(--mu); }
.av-mq-t { display: flex; width: max-content; animation: av-mq 80s linear infinite paused; }
.av-mq-r .av-mq-t { animation-duration: 110s; animation-direction: reverse; }
.av-run .av-mq-t { animation-play-state: running; }
.av-run .av-mq:hover .av-mq-t { animation-play-state: paused; }
.av-mq ul { display: flex; }
.av-mq li { display: flex; align-items: center; }
.av-mq li::after { content: ""; flex: none; width: .12em; height: .12em; margin: .08em .42em 0; border-radius: 50%; background: currentColor; opacity: .5; }
@keyframes av-mq { to { transform: translateX(-50%); } }

.av-ct { padding: 0 var(--g); margin-top: var(--av-sec); }
.av-ct-k { margin-top: 34px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--mu); }
.av-mail { margin-top: 4px; font-size: 11vw; line-height: 1.02; font-weight: 500; letter-spacing: -.05em; white-space: nowrap; }
.av-mail a { display: inline-block; }
.av-mail a:hover { text-decoration: underline; text-decoration-thickness: .03em; text-underline-offset: .1em; }
.av-ct-r { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 40px; font-size: 17px; line-height: 1.45; }
.av-ct-r p:first-child { grid-column: 1 / span 2; }
.av-ct-r p:last-child { grid-column: 3 / -1; }
.av-s.av-colo { margin-top: calc(var(--av-sec) * .7); }
html.av .ft { margin-top: var(--av-sec); }
.av-colo p { font-size: 13px; line-height: 1.5; color: var(--mu); }
.av-colo a { color: var(--fg); }
@media (min-width: 760px) and (max-width: 1199px) and (orientation: portrait) {
  .av-hero { min-height: 0; }
  .av-ph {
    position: relative; top: auto; right: auto; left: auto; grid-column: 2 / -1; grid-row: 1; justify-self: end; height: auto; max-width: none; aspect-ratio: 3 / 4; margin-left: 0;
    width: min(100%, calc((100vh - 360px) * .75));
    --mk: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 62%, transparent 96%);
  }
  .av-hd { grid-column: 1 / -1; grid-row: 2; margin-top: -18vw; }
  .av-lead { max-width: 10em; font-size: 7.2vw; }
}
@media (max-width: 759px) {
  html.av { --av-sec: 110px; }
  .av.pg { padding-top: 64px; }
  .av-hero { grid-template-columns: minmax(0, 1fr); padding: 0; min-height: 0; overflow-x: clip; }
  /* a quarter wider than the screen, so he is bigger, kept in the middle; the words run up over its faded foot */
  .av-ph {
    position: relative; top: auto; right: auto; left: auto; grid-column: 1; grid-row: 1; height: auto; width: 125%; max-width: none; margin-left: -19%; aspect-ratio: 3 / 4;
    --mk: linear-gradient(to right, transparent, #000 22%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 58%, transparent 96%);
  }
  .av-hd { grid-column: 1; grid-row: 2; margin-top: -26vw; padding: 0 var(--g); }
  .av-lead { font-size: clamp(34px, 10.4vw, 52px); }
  .av-bio, .av-s { grid-template-columns: minmax(0, 1fr); }
  .av-lit { font-size: 26px; line-height: 1.2; }
  .av-more { grid-column: 1; columns: 1; margin-top: 56px; }
  .av-more p { font-size: 17px; }
  .av-k { grid-column: 1; margin-bottom: 18px; }
  .av-s > .av-rows, .av-s > p { grid-column: 1; }
  .av-rows li, .av-rows3 li { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  .av-rows li > .av-r1, .av-rows li > .av-r2, .av-rows3 li > .av-r2 + .av-r2 { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .av-mq { font-size: 40px; }
  .av-ct-r { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .av-ct-r p:first-child, .av-ct-r p:last-child { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .av-lit span, .av-eq i { animation: none !important; }
  .av-mq-t { animation: none !important; width: auto; }
  .av-mq ul { flex-wrap: wrap; padding: 0 var(--g); }
  .av-mq ul[aria-hidden], .av-mq li:last-child::after { display: none; }
  .av-mq { white-space: normal; }
}

/* not found */
.nf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--g); min-height: 52vh; align-content: start; }
.nf .big { grid-column: 1 / -1; }
.nf-l { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); font-size: 15px; }
@media (max-width: 759px) { .nf-l { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } }

/* colophon (/colophon/): the title on the page margin, then the project pages' label | text rows, closer together */
.cn-h { padding: 0 var(--g); margin-bottom: 96px; }
.cn .pj-sec { margin: 0 0 48px; }
.cn .pj-sec:last-child { margin-bottom: 120px; }

/* ------------------------------------------------ footer: small, on the grid, signed */
.ft { margin-top: 180px; padding: 0 var(--g) calc(24px + env(safe-area-inset-bottom)); font-size: 11.5px; line-height: 1.5; }
.ft-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; padding-top: 18px; border-top: 1px solid var(--hair); }
.ft-k { color: var(--mu); }
.ft-b { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-top: 88px; }
.ft-sig { grid-column: 1 / span 2; width: min(100%, 300px); color: var(--fg); }
.ft-sig svg { display: block; width: 100%; height: auto; }
.ft-c { grid-column: 4; }
.ft-top { grid-column: 5; justify-self: end; }
@media (max-width: 759px) {
  .ft { margin-top: 120px; }
  .ft-g { grid-template-columns: 1fr 1fr; }
  .ft-b { grid-template-columns: 1fr 1fr; row-gap: 20px; margin-top: 64px; }
  .ft-sig { grid-column: 1 / -1; width: 62%; }
  .ft-c { grid-column: 1; }
  .ft-top { grid-column: 2; }
}

/* phones and tablets: the small type a size up, and every small link or switch gets a fingertip-sized target */
@media (max-width: 759px), (pointer: coarse) {
  .fl, .t-t, .t-c, .t-r, .t-h, .ps-by, .mg-meta, .mg-mix-d, .mg-yr-n { font-size: 11.5px; }
  .ft, .meta, .pj-k, .ps-k, .ab-k, .st-l, .pn-k { font-size: 12.5px; }
  .nx-f { font-size: 13px; }
}
@media (pointer: coarse) {
  .sl-n { padding: 14px 0; margin: -14px 0; }
  .mg-nav button { padding: 15px 0 14px; }
  .fl { row-gap: 0; }
  .fl button, .fl-k { padding: 12px 0; }
  .ft-g p + p { margin-top: 6px; }
  .ft a, .ft button, .nx-f a, .nx-f button { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .nx-f { row-gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}