/* The site's one stylesheet. Colours, type and the focus corners are the Visibility Atlas's own tokens
   (dataviz-lab/motion/css/theme.css and design/principles.md), so the site and the atlas read as one system.
   The atlas never loads this file: it keeps its own page, styles and scripts under /atlas/. */

/* IBM Plex Mono from the site's own fonts/ folder (the author's decision of 29 October 2026): Google Fonts' @font-face rules, copied with
   their unicode-range lines so a browser fetches only the subsets a page uses, and the woff2 files Google serves, renamed. SIL Open Font
   License 1.1 (fonts/IBMPlexMono-OFL.txt). Every page preloads the three Latin files. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexMono-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexMono-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexMono-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexMono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexMono-700-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; }

:root {
  --stage: #03060E;          /* the atlas's near-black navy */
  --panel: #091023;
  --ink: #ECEEF1;            /* text */
  --muted: #B4C0D0;          /* the second voice */
  --dim: #7D889C;            /* rules, numbers, captions */
  --cursor: #FF45C8; --cursor-live: #FF8FDF;   /* fuchsia: what you act on */
  --context: #4DFF7F;        /* green: what you read */
  --font: "IBM Plex Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --split: 50%;              /* the image panel's share of the width: half and half (layout C4, the author's pick of 28 October 2026) */
  --mk-tl-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 7V1h6' fill='none' stroke='%237D889C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-tr-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1h6v6' fill='none' stroke='%237D889C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-br-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M7 1v6H1' fill='none' stroke='%237D889C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-bl-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M7 7H1V1' fill='none' stroke='%237D889C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 7V1h6' fill='none' stroke='%23FF8FDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1h6v6' fill='none' stroke='%23FF8FDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M7 1v6H1' fill='none' stroke='%23FF8FDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M7 7H1V1' fill='none' stroke='%23FF8FDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --corners: var(--mk-tl) top left / 8px no-repeat, var(--mk-tr) top right / 8px no-repeat, var(--mk-br) bottom right / 8px no-repeat, var(--mk-bl) bottom left / 8px no-repeat;
  --corners-dim: var(--mk-tl-dim) top left / 8px no-repeat, var(--mk-tr-dim) top right / 8px no-repeat, var(--mk-br-dim) bottom right / 8px no-repeat, var(--mk-bl-dim) bottom left / 8px no-repeat;
  color-scheme: dark;
  --safe-l: env(safe-area-inset-left, 0px);    /* the notch and the home indicator, with viewport-fit=cover (zero elsewhere) */
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS enlarges text on rotation without it */
html, body { margin: 0; background: var(--stage); color: var(--ink); font-family: var(--font); }
body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* The striped display style: large type cut by 1 px gaps at a 3 px pitch, the atlas's title treatment. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .striped { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 3px); mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 3px); }
}

/* The focus corners: the atlas mark's four brackets around a link under the pointer or the keyboard. Hover applies only where the
   device can hover, so a tap on a phone leaves no stuck state; a press shows the live colour for as long as the finger is down. The same
   corners mark the index's rows and the film's chapters. The ::before box exists only in those states, when it gets its content. */
.cornered { position: relative; text-decoration: none; }
.cornered::before, .index .label::before, .film .chapters button::before { position: absolute; inset: -3px -7px; pointer-events: none; }
.film .chapters button::before { inset: -1px -7px; }
.cornered:focus-visible, .cornered:active { color: var(--cursor-live); outline: none; }
.cornered:focus-visible::before, .index a:focus-visible .label::before, .film .chapters button:focus-visible::before { content: ""; background: var(--corners); }
@media (hover: hover) {
  .cornered:hover { color: var(--cursor-live); }
  .cornered:hover::before, .index a:hover .label::before, .film .chapters button:hover::before { content: ""; background: var(--corners); }
}

hr { border: 0; height: 2px; margin: 0; background: var(--dim); }

/* Home, layout A "Index" (the author's pick of 29 October 2026). The image panel at the left, the content at the right, and one
   line across the page: the photo's top edge is the index's top rule, and the photo's height (--band, 0.7 of the panel's width,
   capped so the top block keeps its rows) is the index's height. The name, the headshot and the bio sit on the stream's 22 px rows,
   which start 4 px from the top. Widths come from the page (cqw), so a scroll bar never makes the photo wider than its panel. */
.home { --band: min(35vw, 100vh - 330px); container-type: inline-size; display: grid; grid-template-columns: var(--split) 1fr; min-height: 100vh; min-height: 100dvh; }   /* dvh where the browser has it, so Safari's toolbars never cover the panel */
@supports (height: 100dvh) { .home { --band: min(35vw, 100dvh - 330px); } }
@supports (width: 1cqw) and (height: 100dvh) { .home { --band: min(35cqw, 100dvh - 330px); } }
.visual { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--stage); }
.visual canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
/* The photo's scan lines over the stream too (the author's request of 29 October 2026), so the panel reads as one surface: the same
   1 px line of rgba(3, 6, 14, .38) every 3 px, above the stream's canvas (painted after it at the same level) and below the photo, its
   caption bar and the slogan card, taking no pointer events. The 3 px tiles are placed from the photo's top edge (the band line, which
   need not be a multiple of 3 px from the panel's top), so the pitch runs on through the photo with no seam. A deliberate exception to
   the rule that stripes belong to large type only: this is the photo's overlay extended over the panel, not stripes on the 11 px text. */
.visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(3, 6, 14, .38) 0 1px, transparent 1px) 0 calc(100% - var(--band)) / 100% 3px repeat-y; }

/* The photo on the floor at the centre line, its caption bar above it. Inside its frame, bottom to top: the photo, the previews of
   the index's pages, and the scan lines. */
.photo { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0; height: var(--band); aspect-ratio: 10 / 7; }
.photo > img, .photo .pv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.photo .pv { opacity: 0; transition: opacity .15s linear; }
.photo .lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(3, 6, 14, .38) 0 1px, transparent 1px 3px); }
.photo .pv.live { opacity: 1; }   /* js/home.js marks the preview of the row under the pointer or the keyboard */
.photo .card { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--band) * .03); padding: 0 40px; background: var(--panel); }   /* the pages without a picture, set like the film's title cards */
.photo .card .k { font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--dim); }
.photo .card .big { font-size: calc(var(--band) * .072); line-height: 1.12; font-weight: 700; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.photo .card .sub { max-width: 52ch; font-size: 14px; color: var(--muted); }
.photo .above { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column; align-items: flex-start; }
/* The slogan, its translation and the pun, while a mouse or a pen is over the photo (or after a tap on a phone): the slogan as the
   card's title in the reading green, as on the atlas's cards (the author's pick of 29 October 2026). */
.photo .gloss { display: none; margin: 0 0 10px max(14px, var(--safe-l)); padding: 8px 12px 9px; max-width: calc(100% - 28px); background: rgba(9, 16, 35, .92); border: 2px solid var(--context); }
.photo .gloss .t { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--context); }
.photo .gloss .q { margin-top: 3px; font-size: 14px; color: var(--ink); }
.photo .gloss .w { font-size: 12px; color: var(--muted); }
.photo.on:not([data-show]) .gloss, .photo.tapped .gloss { display: block; }
.photo .bar { align-self: stretch; display: flex; flex-wrap: wrap; column-gap: 3em; padding: 6px 14px 6px max(14px, var(--safe-l)); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: rgba(3, 6, 14, .88); }
.photo .bar [data-k] { display: none; color: var(--cursor-live); }   /* while a preview shows, the caption names its page */
.photo[data-show] .bar .cap { display: none; }
.photo .bar [data-k].live { display: inline; }

/* The content: the top block on the 22 px rows, the index in the photo's band. */
.content { display: grid; grid-template-rows: 1fr var(--band); min-height: 100vh; min-height: 100dvh; }
.content .top { --shot: 198px; padding: 26px max(44px, var(--safe-r)) 0 40px; }
@supports (width: round(down, 10px, 1px)) and (height: 100dvh) and (width: 1cqw) {   /* the headshot fills the rows left above the band, in whole rows, and at most half the column's width (the author's pick of 29 October 2026) */
  .content .top { --shot: clamp(132px, round(down, min(100dvh - var(--band) - 140px, (50cqw - 84px) * .5), 22px), 572px); }
}
/* Small laptop screens (761 to 1400 px wide, up to 860 px tall): the bio runs to more lines there than the rows above the band hold,
   so the top block keeps one more row, the headshot stays at 132 px, which widens the bio's column, and the dissertation runs on after
   the degree rather than on its own line (the author's pick (ii) of 29 October 2026: the pipeline photo keeps its size). Other screens
   are unchanged. */
@media (min-width: 761px) and (max-width: 1400px) and (max-height: 860px) {
  .home { --band: min(35vw, 100vh - 352px); }
  @supports (height: 100dvh) { .home { --band: min(35vw, 100dvh - 352px); } }
  @supports (width: 1cqw) and (height: 100dvh) { .home { --band: min(35cqw, 100dvh - 352px); } }
  .content .top { --shot: 132px; }
  .content .lede p .dis { display: inline; }   /* the dissertation runs on after the degree, a row shorter */
}
.content h1 { margin: 0 0 22px; font-size: 46px; line-height: 44px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.content .top hr { margin: 0 0 20px; }
.content .id { display: grid; grid-template-columns: var(--shot) minmax(0, 1fr); column-gap: 26px; align-items: start; }
.content .portrait { display: block; width: var(--shot); height: var(--shot); }
.content .lede { color: var(--muted); }
.content .lede p { margin: 0; font-size: 13px; line-height: 22px; text-wrap: pretty; }   /* pretty: no last line of one word where the browser supports it */
.content .lede .lead { margin-bottom: 22px; font-size: 16px; color: var(--ink); }
/* The statement's capitals start on the headshot's top edge: the bio moves up 4 px, the space above the capitals in its first 22 px row, a
   shift of the glyphs only, so the layout and the rows stay as they are. Where the headshot is 440 px or more, the statement is set at
   18 px (a step: below 440 px the clamp gives 16 px). */
.content .lede { position: relative; top: -4px; }
.content .lede .lead { font-size: clamp(16px, (var(--shot) - 439px) * 1000, 18px); }
.content .lede .dis { display: block; }   /* the dissertation on its own line, under the degree */
.nb { white-space: nowrap; }

/* The index: seven rows, each a number, the page and a dim note of what it opens; the whole row is the link. */
.index { display: grid; grid-auto-rows: minmax(0, 80px); padding: 0 max(44px, var(--safe-r)) 0 40px; }
.index a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border-top: 1px solid rgba(125, 136, 156, .38); color: var(--ink); text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.index a:first-child { border-top: 2px solid var(--dim); }
.index a:last-child { border-bottom: 2px solid var(--dim); }   /* a rule under CONTACT as over RÉSUMÉ (the author's request of 29 October 2026) */
.index .n { padding-right: 1ch; font-size: clamp(20px, 1.65vw, 28px); font-weight: 500; line-height: 1; letter-spacing: .08em; color: var(--dim); }   /* "1." at the page names' size, as on benschulman.com (the author's pick of 29 October 2026; "01" at 13 px before) */
.index .label { position: relative; justify-self: start; font-size: clamp(20px, 1.65vw, 28px); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.index .tag { padding-left: 16px; font-size: 11px; letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.index a:focus-visible .label, .index a:active .label { color: var(--cursor-live); }
.index a:focus-visible .tag { color: var(--muted); }
@media (hover: hover) {
  .index a:hover .label { color: var(--cursor-live); }
  .index a:hover .tag { color: var(--muted); }
}

/* Subpages: one reading column, no image panel and no stream. */
.page { max-width: 820px; padding: 13px max(18px, var(--safe-r)) max(48px, calc(var(--safe-b) + 24px)) max(18px, var(--safe-l)); }
.page h1 { margin: 0 0 14px; font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.page .body { margin: 14px 0; color: var(--muted); }
.page .body p { margin: 0 0 12px; max-width: 66ch; text-wrap: pretty; }
.page .label { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.page .links { list-style: none; margin: 0; padding: 0; }
.page .links li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; line-height: 1.9; }   /* the label on the link's baseline */
.page .links .label { min-width: 9ch; line-height: inherit; }
.page .links a { overflow-wrap: anywhere; }   /* a long address wraps rather than widening a phone's page */
.page .note { font-size: 12px; color: var(--dim); }
/* The film page: the player as large as leaves the title above it and the chapter list below it in one screen (the author's request
   of 29 October 2026), never narrower than 520 px unless the page is; the chapter list in four columns across the page. */
.page.film { max-width: none; }
.film video { display: block; width: min(100%, max(520px, calc((100vh - 310px) * 16 / 9))); width: min(100%, max(520px, calc((100dvh - 310px) * 16 / 9))); height: auto; aspect-ratio: 16 / 9; background: var(--panel); margin: 14px 0 8px; }
.film .chapters { list-style: none; margin: 14px 0; padding: 0; columns: 4 17rem; column-gap: 28px; font-size: 13px; }
.film .chapters li { break-inside: avoid; }
.film .chapters button { font: inherit; color: var(--muted); background: none; border: 0; padding: 2px 0; margin: 0; text-align: left; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.film .chapters .t { display: inline-block; min-width: 6ch; color: var(--dim); }
.film .chapters button[aria-current="true"], .film .chapters button[aria-current="true"] .t { color: var(--context); }   /* the chapter playing, in the reading green */
.film .chapters button:focus-visible, .film .chapters button:active { color: var(--cursor-live); outline: none; }
@media (hover: hover) { .film .chapters button:hover { color: var(--cursor-live); } }

/* The way home: HOME inside the mark's corners, dim at rest and fuchsia under the pointer or the keyboard. */
.homelink { display: inline-block; margin: 16px 7px 0; font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.homelink::before { content: ""; background: var(--corners-dim); }

/* The home page stacked, on phones (the author's rule of 29 October 2026) and wherever the split has too little room: tablets in
   portrait and landscape, phones in landscape, windows narrower than 1200 px or lower than 600 px. The name, the headshot, the bio
   and the index first, in the subpages' 820 px column; the stream and the photo below them, the photo whole at the screen's width
   on the page's floor. Each note sits under its page in the index. js/home.js uses the same limits. */
@media (max-width: 1199px), (max-height: 599px) {
  .home { display: flex; flex-direction: column; }
  .content { order: -1; display: block; min-height: 0; max-width: 820px; }
  .content .top { --shot: 160px; padding: 14px max(16px, var(--safe-r)) 0 max(16px, var(--safe-l)); }
  @supports (width: round(down, 10px, 1px)) and (width: 1cqw) { .content .top { --shot: clamp(110px, round(down, (min(100cqw, 820px) - 32px) * .43, 2px), 286px); } }   /* 0.43 of the column, at most 286 px on tablets */
  .content h1 { margin-bottom: 14px; font-size: 30px; }
  .content .id { column-gap: 16px; }
  .content .lede { display: contents; }
  .content .lede .lead { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; position: relative; top: -5px; }   /* the capitals on the headshot's top edge */
  .content .lede .lead + p { grid-column: 1 / -1; grid-row: 2; margin-top: 22px; }
  .index { grid-auto-rows: 60px; padding: 22px max(16px, var(--safe-r)) 30px max(16px, var(--safe-l)); }
  .index a { grid-template-columns: auto minmax(0, 1fr); align-content: center; }
  .index .n { grid-row: 1; font-size: 18px; }   /* on the page name's line, at its size */
  .index .label { font-size: 18px; }
  .index .tag { grid-column: 2; padding: 3px 0 0; font-size: 10px; }
  .visual { --above: 154px; position: relative; height: auto; padding-top: var(--above); }   /* a band of the stream above the caption and the photo, tall enough for the slogan's card */
  .visual::after { background-position: 0 var(--above); }   /* the scan lines placed from the photo's top, below that band (one value for both, so they cannot part) */
  .photo { position: relative; right: auto; bottom: auto; width: 100%; height: auto; }
  .photo .bar { padding: 8px max(16px, var(--safe-r)) 8px max(16px, var(--safe-l)); }
  .photo .gloss { margin-left: max(16px, var(--safe-l)); }
}

/* Phones: the subpages' column to the screen's edges. */
@media (max-width: 760px) {
  .page { padding: 14px max(16px, var(--safe-r)) max(40px, calc(var(--safe-b) + 24px)) max(16px, var(--safe-l)); }
  .page h1 { font-size: 30px; }
  .film .chapters button { padding: 5px 0; }   /* taller rows for a finger */
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }