/* Kevin T. Ngo: a stack of sheets, each its own paper (bright white, kraft, graph, navy) with its own drawings in real
   media: ballpoint, fineliner, coloured and pastel pencil, gel pen (art/). Every word is in the two hands traced from
   Hershey's engraving faces (art/font). No rounded corners, no gradients: what is not drawn is paper. */

@font-face { font-family: "Kevin Serif"; src: url(/fonts/KevinSerif-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kevin Serif"; src: url(/fonts/KevinSerif-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kevin Sans"; src: url(/fonts/KevinSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kevin Sans"; src: url(/fonts/KevinSans-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #faf9f6;
  --tile: url(/art/paper/white.webp);
  --ink: #21201f;          /* 15.5:1 on the paper */
  --ink-2: #57534f;        /* 7.2:1 */
  --link: #a43a28;         /* the red pencil: 6.2:1 */
  --rule: url(/art/ui/rule-red.webp);
  --rule-2: url(/art/ui/rule-red-2.webp);
  --edge: #ffffff;         /* the white edge of a print */
  --shade: 24, 22, 20;     /* what a print's shadow is made of */
  --serif: "Kevin Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Kevin Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  background: var(--paper) var(--tile) 0 0 / 480px 480px;
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
  font-feature-settings: "calt" 1;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: #f0dc9a; color: var(--ink); }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: var(--paper); padding: 10px 14px; outline: 2px solid var(--ink); }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

/* a link in the sheet's pencil, ruled under once (twice when it is pointed at) */
.link { color: var(--link); text-decoration: none; background: var(--rule) left 100% / 100% 0.5em no-repeat; padding-bottom: 0.2em; }
.link:hover { background-image: var(--rule-2); }
.button {
  display: inline-block; text-decoration: none; font-family: var(--serif); font-size: 1.25rem; padding: 0.55em 1.1em 0.6em;
  border: 14px solid transparent; border-image: url(/art/ui/tag.webp) 28 fill / 14px; color: var(--ink);
}
.button:hover { border-image-source: url(/art/ui/tag-2.webp); }
.small { font-size: 1rem; }
.quiet { color: var(--ink-2); }


/* ------------------------------------------------------------------------------------------- a print */
/* a work's own still, with the white edge the scissors leave, taped to the page a little askew. Pointed at, it does
   what a taped print does when air gets under it: its foot comes up off the page a little, hinged at its top edge
   where the tape holds it; the foot comes nearer (so a touch wider), catches a little more of the light from above,
   and casts a longer, softer shadow; the tape takes the bend, a faint crease along the print's edge */
.pic { position: relative; display: block; transform: rotate(var(--r, 0deg)); --lift: cubic-bezier(0.25, 0.8, 0.3, 1); }
.pic-paper { position: relative; display: block; padding: 7px; background: var(--edge); transform-origin: 50% 0;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.12), 0 8px 18px -8px rgba(var(--shade), 0.3);
  transition: transform 0.8s var(--lift), box-shadow 0.8s var(--lift); }
.pic-paper::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--lift); }
.pic-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tape { position: absolute; z-index: 2; display: block; width: calc(var(--tw) * 1px); pointer-events: none; }
.tape img { display: block; width: 100%; height: auto; }
.tape-top { left: 50%; top: 0; transform: translate(-50%, -46%); --hinge: 46%; }
.tape-l { left: 0; top: 0; transform: translate(-34%, -38%); --hinge: 38%; }
.tape-r { right: 0; top: 0; transform: translate(34%, -38%); --hinge: 38%; }
/* the crease: a fine groove of shade along the print's edge, and below it the tape on the lifted print a shade
   lighter; only where the tape lies over the print (the corner strips are over it on one side of the corner only) */
.pic .tape::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--lift);
  background: linear-gradient(to bottom, transparent calc(var(--hinge) - 1.5px), rgba(var(--shade), 0.2) var(--hinge), rgba(255, 255, 255, 0.2) calc(var(--hinge) + 1.5px), rgba(255, 255, 255, 0.07) calc(var(--hinge) + 7px), transparent);
  -webkit-mask: var(--tape) 0 0 / 100% 100% no-repeat; mask: var(--tape) 0 0 / 100% 100% no-repeat; }
.pic .tape-l::after { left: 34%; -webkit-mask: var(--tape) 100% 0 / calc(100% / 0.66) 100% no-repeat; mask: var(--tape) 100% 0 / calc(100% / 0.66) 100% no-repeat; }
.pic .tape-r::after { right: 34%; -webkit-mask: var(--tape) 0 0 / calc(100% / 0.66) 100% no-repeat; mask: var(--tape) 0 0 / calc(100% / 0.66) 100% no-repeat; }
a:hover .pic-paper, a:focus-visible .pic-paper { transform: perspective(1100px) rotateX(4deg);
  box-shadow: 0 1px 2px rgba(var(--shade), 0.1), 0 21px 24px -15px rgba(var(--shade), 0.36); transition-duration: 0.55s; }
a:hover .pic-paper::after, a:focus-visible .pic-paper::after { opacity: 0.04; transition-duration: 0.55s; }
a:hover .tape::after, a:focus-visible .tape::after { opacity: 1; transition-duration: 0.55s; }
@media (prefers-reduced-motion: reduce) { .pic-paper, .pic-paper::after, .pic .tape::after { transition: none; } }
.pic-title { display: inline-block; margin-top: 14px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; padding-bottom: 0.12em;
  background: var(--rule) left 100% / 0% 0.5em no-repeat; transition: background-size 0.5s steps(6); }
a:hover .pic-title, a:focus-visible .pic-title { background-size: 100% 0.5em; }
.pic-meta { display: block; color: var(--ink-2); font-size: 0.95rem; margin-top: 2px; }
.print a { display: block; text-decoration: none; color: var(--ink); }

/* ------------------------------------------------------------------------------------------- the front */
/* the sky fills the first screen; the name sits where it leaves room (--nx, --ny: that place in the drawing, which
   object-position keeps in the same place of the box however the drawing is cropped) */
/* (never much flatter than the drawing: on a wide, short screen a flat box would crop the sky's top away, and with it
   the open corner the nav sits in; the box grows a little past the screen instead) */
.front { position: relative; height: max(560px, min(100svh, 960px), 50vw); overflow: hidden; --nx: var(--nx-wide, 50%); --ny: var(--ny-wide, 46%); }
.sky-frame { position: absolute; inset: 0; }
.front .sky { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--nx) var(--ny); }
@media (max-width: 700px) { .front { height: max(560px, min(100svh, 960px), 160vw); --nx: var(--nx-tall, 50%); --ny: var(--ny-tall, 49%); } }
.topnav { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; padding: clamp(18px, 2.4vw, 32px) var(--gutter) 0; font-size: 1.05rem; }
.topnav a { text-decoration: none; padding: 4px 0 6px; background: var(--rule) left 100% / 0% 0.45em no-repeat; transition: background-size 0.45s steps(5); }
.topnav a:hover, .topnav a:focus-visible { background-size: 100% 0.45em; color: var(--link); }
/* over the sky, the clouds give way round each word: a soft clearing of paper behind it, and a halo of paper round its
   letters, so whatever part of the drawing a screen crops in under the nav, the words stay clear */
.front .topnav { isolation: isolate; }
.front .topnav a { position: relative; text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 7px var(--paper); }
.front .topnav a::before { content: ""; position: absolute; z-index: -1; inset: -12px -18px -10px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 249, 246, 0.96), rgba(250, 249, 246, 0.9) 55%, rgba(250, 249, 246, 0)); }
.title { position: absolute; z-index: 2; left: var(--nx, 50%); top: var(--ny, 46%); transform: translate(-50%, -50%); text-align: center; padding: 0 16px; }
.name { font-size: clamp(34px, 4.7vw, 72px); font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: 0.005em; }
.role { margin-top: 0.7em; font-size: clamp(15px, 1.35vw, 21px); color: var(--ink-2); }
@media (max-width: 760px) { .topnav { justify-content: center; font-size: 0.98rem; gap: 4px 18px; } }
/* About: a plain paper tag hung a little askew among the words; pointed at (or on the About page) it turns yellow */
.topnav a.tagged { margin: -9px -8px -7px; padding: 1px 5px 2px; border: 9px solid transparent; border-image: url(/art/ui/tag.webp) 28 fill / 9px;
  background: none; text-shadow: none; transform: rotate(-2deg); }
.topnav a.tagged:hover, .topnav a.tagged:focus-visible, .topnav a.tagged[aria-current="page"] { border-image-source: url(/art/ui/tag-2.webp); color: var(--ink); }
.front .topnav a.tagged::before { content: none; }

/* ------------------------------------------------------------------------------------------- the sheets */
/* every section is a sheet of its own paper laid over the one before: its top edge torn (kraft), torn off a pad at
   the perforations (graph) or deckled (navy), the pale fibres of the tear showing, and a soft shadow under the edge */
.sheet-wrap { position: relative; margin-top: -22px; filter: drop-shadow(0 -1px 1.2px rgba(30, 22, 12, 0.24)) drop-shadow(0 -5px 9px rgba(30, 22, 12, 0.09)); }
.sheet { position: relative; background: var(--paper) var(--tile) 0 0 / 480px 480px; color: var(--ink);
  -webkit-mask: var(--torn) 0 0 / 600px 40px repeat-x, linear-gradient(#000 0 0) 0 39px / 100% calc(100% - 39px) no-repeat;
  mask: var(--torn) 0 0 / 600px 40px repeat-x, linear-gradient(#000 0 0) 0 39px / 100% calc(100% - 39px) no-repeat; }
.sheet::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 40px; background: var(--tear, none) 0 0 / 600px 40px repeat-x; pointer-events: none; }
.sheet-kraft { --paper: #c9a880; --tile: url(/art/paper/kraft.webp); --ink-2: #3d342b; --link: #761f12; --torn: url(/art/paper/edge-kraft.webp); --tear: url(/art/paper/tear-kraft.webp); }
.sheet-graph { --paper: #f5f7f2; --tile: url(/art/paper/graph.webp); --torn: url(/art/paper/edge-graph.webp); }
.sheet-navy { --paper: #1b2746; --tile: url(/art/paper/navy.webp); --ink: #f4efe4; --ink-2: #c3c9db; --link: #f0b46a; --rule: url(/art/ui/rule-gold.webp); --rule-2: url(/art/ui/rule-gold-2.webp);
  --torn: url(/art/paper/edge-navy.webp); --tear: url(/art/paper/tear-navy.webp); }

/* ------------------------------------------------------------------------------------------- the shelves */
.shelf { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: clamp(80px, 9vw, 140px) var(--gutter) clamp(100px, 11vw, 170px); }
.shelf h2 { font-size: clamp(40px, 5vw, 76px); margin-bottom: clamp(36px, 4vw, 64px); }
.prints { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 52px); }
.prints-large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.prints-medium { grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); }
.deco { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; }
.sheet { overflow-x: clip; }

/* the short films' sheet (kraft): a web across its top right corner, the forest floor along its foot (1440 x 368,
   never narrower than 960 so the things on it keep their size; the shelf leaves it room) */
.deco-web { top: 0; right: 0; width: min(440px, 34vw); }
.deco-floor { left: 50%; bottom: 0; width: max(100%, 960px); transform: translateX(-50%); }
.sheet-kraft .shelf { padding-bottom: calc(max(100vw, 960px) * 0.2556 + 24px); }
/* the generative art's sheet (graph): great orbits running behind the heading and the prints, and at its foot the
   mission chart (1406 x 934) with the moon's phases beside it; the shelf leaves them room */
.deco-orbits { right: 0; top: 0; width: min(100%, 1440px); }
.deco-chart { bottom: clamp(24px, 3vw, 48px); right: max(var(--gutter), calc(50% - 680px)); width: min(48%, 640px); }
.deco-phases { left: max(var(--gutter), calc(50% - 620px)); bottom: calc(clamp(24px, 3vw, 48px) + min(48vw, 640px) * 0.3); width: min(44%, 560px); }
.sheet-graph .shelf { padding-bottom: calc(min(48vw, 640px) * 0.664 + clamp(60px, 6vw, 100px)); }
/* the foot of the page (navy): the moonlit sea, the words in the sky above it */
.deco-night { left: 50%; bottom: 0; width: max(100%, 1100px); transform: translateX(-50%); }
@media (max-width: 899px) {
  .deco-web { position: relative; top: auto; right: auto; display: block; width: min(92%, 460px); margin: 0 0 -8px auto; }
  .deco-chart { width: 92%; right: 4%; bottom: 20px; }
  .deco-phases { width: 92%; left: 4%; bottom: calc(92vw * 0.664 + 36px); }
  .sheet-graph .shelf { padding-bottom: calc(92vw * 0.664 + 92vw * 0.1 + 80px); }
}

/* ------------------------------------------------------------------------------------------- on x */
/* (on the about page, after the words) a cork board, cut straight across its top; pinned to it, a card with the
   heading, and the posts as index cards (notes) in loose columns, each pinned through its top a little askew: who
   posted it under a red rule, its words on the card's blue lines, its film, and at its foot, small, when it was posted
   and how many saw it and liked it */
.sheet-cork { --paper: #ab8257; --tile: url(/art/paper/cork.webp); -webkit-mask: none; mask: none; }
.sheet-cork::before { content: none; }
.board { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: clamp(64px, 7vw, 110px) var(--gutter) clamp(90px, 9vw, 150px); }
/* (the pins drawn a little larger than they show: --k scales one down, about the point it goes in at) */
.board .pin { --k: 0.72; position: absolute; z-index: 4; left: 50%; top: 14px; width: calc(52px * var(--k)); height: auto; max-width: none;
  margin: calc(-1 * var(--py) * var(--k)) 0 0 calc(-1 * var(--px) * var(--k)); pointer-events: none; }
.board-head, .note { background: #fbfaf6 var(--tile-card, url(/art/paper/white.webp)) 0 0 / 480px 480px; color: #21201f;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.22), 0 12px 24px -12px rgba(var(--shade), 0.55); }
.board-head { position: relative; display: inline-block; margin: 0 0 clamp(36px, 4.4vw, 64px) clamp(0px, 2vw, 24px); padding: 32px 40px 26px; transform: rotate(-0.9deg); }
.board-head h2 { font-size: clamp(40px, 5vw, 76px); padding-bottom: 0.1em; background: var(--rule) left 100% / 100% 0.16em no-repeat; }
.board-note { margin-top: 10px; color: #57534f; font-size: 0.95rem; }
/* the way to the rest of them: in the red pencil, with a drawn arrow; underlined (once) when pointed at */
.board-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.2;
  color: var(--link); text-decoration: none; }
.board-link:hover span, .board-link:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.board-link img { width: 1.25em; height: auto; flex: none; }
.posts { list-style: none; margin: 0; padding: 0; columns: 4 272px; column-gap: clamp(24px, 2.6vw, 40px); }
.post { break-inside: avoid; padding: 22px 2px 30px; }
.note { position: relative; padding: 28px 20px 14px; transform: rotate(var(--r)); transform-origin: 50% 14px; }
.note-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: center; padding-bottom: 14px;
  background: var(--rule) left 100% / 100% 0.45em no-repeat; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(var(--shade), 0.12); }
.who { min-width: 0; line-height: 1.3; }
.who-name { display: block; font-weight: 700; }
.who-handle { display: block; color: #57534f; font-size: 0.88rem; }
/* (the words sit on the card's ruled lines: one line of text to one rule) */
.note-text { padding-top: 10px; margin-bottom: 16px; font-size: 1.02rem; line-height: 28px; background: url(/art/paper/rule-blue.webp) 0 5px / 480px 28px repeat; }
.note-text p + p { margin-top: 28px; }
.note-text a { color: var(--link); text-decoration: none; }
.note-text a:hover { text-decoration: underline; }
.note-film { margin: 0 0 14px; }
.note-film .player { width: 100%; }
.note-film .player:not([data-started]) .player-bar { display: none; }
.note-film-tall .player { width: 68%; }
.note-photo { width: 100%; height: auto; margin-bottom: 14px; border: 1px solid #000; }
/* the foot of a note, quiet: when (the way to the post on X), and how many saw it and liked it */
/* (each piece keeps together; on a card too narrow for all three the counts go to a line of their own) */
.note-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 2px; font-size: 0.8rem; color: #7a736c; font-variant-numeric: tabular-nums; }
.note-stats > * { white-space: nowrap; }
.note-stats .when { color: inherit; text-decoration: none; margin-right: auto; }
.note-stats .when:hover, .note-stats .when:focus-visible { color: var(--link); text-decoration: underline; }
.stat { display: inline-flex; align-items: center; gap: 4px; }
.stat-icon { width: 13px; height: 13px; flex: none; }
.stat-views .stat-icon { color: #9a928a; }
.stat-likes .stat-icon { color: #c9645a; }
/* on a phone the notes run along the board in a row, one at a time, the next showing at the edge */
@media (max-width: 700px) {
  .posts { display: flex; gap: 16px; columns: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .posts::-webkit-scrollbar { display: none; }
  .post { flex: 0 0 min(82vw, 340px); scroll-snap-align: start; padding-bottom: 18px; }
  .board-head { max-width: 100%; margin-left: 0; padding: 28px 22px 22px; }
}

/* ------------------------------------------------------------------------------------------- the colophon */
.colophon { position: relative; min-height: calc(max(100vw, 1100px) * 0.3472); padding: clamp(64px, 6vw, 96px) var(--gutter) 0; text-align: center; }
.colophon-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; display: grid; justify-items: center; gap: 10px; }
/* on a phone the night (pinned to the foot) is as tall as the board, and the words would sit on the sea: a taller board
   keeps them up in the open sky */
@media (max-width: 700px) { .colophon { min-height: 600px; } }
.sign { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; margin-top: 4px; }

/* ------------------------------------------------------------------------------------------- the about page */
/* a sheet of dot-grid paper torn off a pad: up top, beside the title, a connect-the-dots puzzle (a paper plane that
   has looped the loop, the dots behind it joined in red pencil, the ones ahead of it still only dots); the words
   below it on the left, and level with them on the right the photo, a square instant print taped down a little
   askew; the last line runs out under three strips of silver duct tape */
.sheet-dots { --paper: #f8f6f0; --tile: url(/art/paper/dots.webp); --torn: url(/art/paper/edge-dots.webp); }
.about { padding-bottom: clamp(72px, 8vw, 120px); }
.about-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(48px, 6.5vw, 92px) var(--gutter) 0; }
.about-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 32px; margin-bottom: clamp(24px, 3.4vw, 48px); }
.about-title { font-size: clamp(40px, 4.6vw, 66px); font-weight: 700; }
/* (the puzzle rises into the room above the title, short of the torn edge, and sinks into the room below it, so the
   words start about where they would without it) */
.about-dots { display: block; justify-self: end; width: min(600px, 48vw); margin: calc(48px - clamp(48px, 6.5vw, 92px)) -8px calc(8px - clamp(24px, 3.4vw, 48px)) 0; }
.about-dots img { width: 100%; }
/* (the photo's column is the narrower; its print sits level with the first paragraph, a little in from the edge) */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.about-photos { position: relative; display: grid; justify-items: center; padding-top: 14px; }
.polaroid { position: relative; width: min(100%, 420px); margin: 0; padding: 20px 20px 88px; background: var(--edge); transform: rotate(var(--r));
  box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 0 14px 30px -14px rgba(var(--shade), 0.42); }
.polaroid .photo { display: block; width: 100%; height: auto; }
.about-words { font-size: 1.22rem; line-height: 1.75; max-width: 34em; padding-top: 0.2em; }
.about-words p + p { margin-top: 1.1em; }
/* "Next, I'm" and three lines taped over */
.next { margin-top: 2em; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6em; row-gap: 0.35em; align-items: center;
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.5; }
.next-lead { grid-column: 1; }
.redact-line { position: relative; display: block; height: 1.5em; }
.redact-1 { grid-column: 2; }
.redact-2 { grid-column: 1 / -1; }
.redact-3 { grid-column: 1 / -1; width: 62%; }
.duct { position: absolute; left: -12px; top: 50%; width: calc(100% + 24px); height: clamp(48px, 4.4vw, 60px); max-width: none; transform: translateY(-50%); object-fit: fill; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) {
  /* the puzzle under the title, in its squarer layout (on a phone, none); the print first, then the words, the tape last */
  .about-head { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .about-dots { width: min(100%, 440px); margin: 0 -6px 0 auto; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-words, .about-photos { display: contents; }
  .about-words > p { order: 5; margin: 0 0 1.1em; }
  .about-words > p:nth-child(1) { order: 1; }
  .about-words > p:nth-child(2) { order: 3; }
  .about-words > p.next { order: 7; margin-top: 1em; }
  .about-grid .polaroid { order: 0; justify-self: center; width: min(80%, 360px); margin: 6px 0 40px; padding: 14px 14px 64px; }
}
/* the print is taped at its corners; on a phone, by one strip at the middle of its top instead */
.polaroid .tape-phone { display: none; }
@media (max-width: 700px) { .about-dots, .post-wide, .polaroid .tape-l, .polaroid .tape-r { display: none; } .polaroid .tape-phone { display: block; } }

/* the collage at the foot of the about page: a dark board, cut straight across its top, the collage on it filling
   it edge to edge (on a narrow screen, its middle, larger) */
.sheet-board { --paper: #23201d; --tile: none; -webkit-mask: none; mask: none; }
.sheet-board::before { content: none; }
.collage-link { display: block; }
.collage-art { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .collage-art { height: 124vw; object-fit: cover; object-position: 50% 50%; } }

/* ------------------------------------------------------------------------------------------- a work */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; padding: 22px var(--gutter); }
.top .topnav { padding: 0; }
.topnav a[aria-current="page"] { background-size: 100% 0.45em; }
.home-link { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.home-link:hover { color: var(--link); }
.work { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 10vw, 150px); }
.work-head { margin: clamp(8px, 3vw, 40px) 0 clamp(32px, 4vw, 56px); }
.work-head h1 { font-size: clamp(44px, 6vw, 84px); }
.kicker { color: var(--ink-2); font-size: 1rem; margin-bottom: 6px; }
.line { max-width: 34em; margin-top: 14px; font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.actions:empty { display: none; }

/* the film player (kengoworks'): a small, YouTube-shaped player, monochrome, thin rules, square corners; the only
   round thing is the play affordance, which reads as "video" everywhere */
.player { position: relative; margin: 0 auto; width: min(100%, calc(78vh * var(--ar))); aspect-ratio: var(--ar); background: #000; border: 1px solid #000;
  overflow: hidden; isolation: isolate; --fast: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.player-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.player-surface { position: absolute; inset: 0; cursor: pointer; z-index: 1; }
.player-big { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; z-index: 3; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: #fff; background: rgba(18, 18, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 999px; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.player-big[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .player-big:hover { background: rgba(18, 18, 18, 0.8); transform: scale(1.04); } }
.player-big svg { width: 26px; height: 26px; margin-left: 3px; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 0.35rem; padding: 0.5rem 0.6rem 0.55rem; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); opacity: 0; transform: translateY(0.4rem); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.player[data-controls="show"] .player-bar { opacity: 1; transform: none; }
.player-row { display: flex; align-items: center; gap: 0.15rem; }
.player-ctl { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: #fff; background: none; border: 0; border-radius: 0; opacity: 0.92; flex: none; cursor: pointer; }
.player-ctl svg { width: 19px; height: 19px; }
.player-ctl .on, .player-ctl[data-on="true"] svg:not(.on) { display: none; }
.player-ctl[data-on="true"] .on { display: block; }
@media (hover: hover) and (pointer: fine) { .player-ctl:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); } }
.player-ctl:focus-visible, .player-big:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.player-time { font-size: 0.85rem; font-variant-numeric: tabular-nums; padding-inline: 0.4rem 0.2rem; white-space: nowrap; }
.player-sep { opacity: 0.6; }
.player-spacer { flex: 1 1 auto; }
.player-scrub { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.player-track { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.28); transition: height var(--fast) var(--ease); }
.player-buffered, .player-played { position: absolute; inset-block: 0; left: 0; width: 0; }
.player-buffered { background: rgba(255, 255, 255, 0.4); }
.player-played { background: #fff; }
.player-thumb { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background: #fff; border-radius: 999px; transform: translate(-50%, -50%) scale(0); transition: transform var(--fast) var(--ease); }
.player-scrub:hover .player-track, .player-scrub[data-active="true"] .player-track { height: 5px; }
.player-scrub:hover .player-thumb, .player-scrub:focus-visible .player-thumb, .player-scrub[data-active="true"] .player-thumb { transform: translate(-50%, -50%) scale(1); }
.player-scrub:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.player-spinner { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; z-index: 2; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 999px; animation: player-spin 0.8s linear infinite; }
.player-spinner[hidden] { display: none; }
@keyframes player-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player-spinner { animation-duration: 2s; } }
.ico { display: block; width: 26px; height: 26px; background: center / contain no-repeat; }
.ico-left { background-image: url(/art/ui/arrow-left.webp); width: 34px; }
.ico-right { background-image: url(/art/ui/arrow-right.webp); width: 34px; }

.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.still img { width: 100%; border: 8px solid var(--edge); box-shadow: 0 1px 2px rgba(var(--shade), 0.1), 0 8px 18px -10px rgba(var(--shade), 0.28); }
.still figcaption { font-family: var(--serif); font-size: 1.25rem; margin-top: 8px; text-align: center; }
@media (max-width: 700px) { .stills { grid-template-columns: 1fr; } }
.still { margin: 0; }

.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 20px; }
.gallery a { display: block; border: 6px solid var(--edge); box-shadow: 0 1px 2px rgba(var(--shade), 0.1), 0 6px 14px -8px rgba(var(--shade), 0.26); }
.gallery img { width: 100%; height: auto; }

.turn { display: flex; justify-content: space-between; gap: 20px; margin: clamp(56px, 7vw, 96px) 0 0; font-family: var(--serif); font-size: 1.4rem; }
.turn a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px 0; }
.turn a:hover { color: var(--link); }

/* the lightbox */
.lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 56px 16px; background: rgba(250, 249, 246, 0.97) url(/art/paper/white.webp) 0 0 / 480px 480px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; width: auto; height: auto; border: 8px solid var(--edge); box-shadow: 0 2px 4px rgba(var(--shade), 0.1), 0 18px 40px -18px rgba(var(--shade), 0.4); }
.lightbox button { position: absolute; background: none; border: 0; cursor: pointer; padding: 10px; width: 54px; height: 54px; }
.lb-close { top: 10px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.ico-close { background-image: url(/art/ui/close.webp); }

/* the 404 */
.lost { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 10vw, 150px); text-align: center; }
.lost h1 { font-size: clamp(36px, 5vw, 64px); margin: 12px 0 28px; }
.lost-sheet { margin: 0 auto; }
.lost-sheet img { margin: 0 auto; border: 8px solid var(--edge); box-shadow: 0 1px 2px rgba(var(--shade), 0.1), 0 10px 22px -12px rgba(var(--shade), 0.3); }
.lost .actions { justify-content: center; }

/* in forced colours the drawn rules under links give way to plain underlines */
@media (forced-colors: active) { .link { background: none; text-decoration: underline; } }