/* ==========================================================================
   The sidebar layout: a skin over Website 2.0 (v4), loaded after v4.css only on pages the
   generator builds with the layout on (hub.json "layout": "sidebar", lib/sidebar.js).
   Spec and decisions: docs/design/SIDEBAR-LAYOUT.md. Geometry follows the reference
   (kidz.studio): the layout is centred, a fixed left column, a 4 column grid, a 16px gutter.

   Dark only: this layout has one ground, so the theme the visitor's system asks for does not
   change it. Every rule is scoped to body.sb / html[data-layout="sidebar"], so v4.css stays as is.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 900; font-display: swap; src: url("fonts/inter-latin-900-normal.woff2") format("woff2"); }

/* ---------- ground and tokens ---------- */
html[data-layout="sidebar"][data-design="v4"] {
  --ink: #f2f2f0; --page: #0a0a0a; --rule: rgba(255, 255, 255, .18); --muted: #9b9b97;
  --room: #000; --room-ink: #f2f2f0; --room-rule: rgba(255, 255, 255, .14); --err: #f2b8b5;
  --pv-fg: #f2f2f0; --pv-mute: #9b9b97;
  --gap: 16px;
  --wrap: calc(40vw + 570px);          /* the whole layout, centred */
  --side: max(360px, 16vw);            /* the left column, including its gap to the page */
  --x: max(32px, calc((100vw - var(--wrap)) / 2));
  color-scheme: dark;
}
body.sb { background: #0a0a0a; color: #f2f2f0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* a short page ends with the footer on the window's bottom edge, with no script */
body.sb > main { flex: 1 0 auto; box-sizing: border-box; }
body.sb > main .g { padding-inline: 0; }

/* ---------- the column ---------- */
body.sb .side { font: 400 17px/1.7 var(--f-mono); }
body.sb .side a { color: inherit; text-decoration: none; display: block; }
body.sb .side .logo { font: 900 51px/.96 "Inter", var(--f-sans); letter-spacing: .008em; text-transform: lowercase; font-kerning: normal; font-optical-sizing: none; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1, "liga" 0; color: #fff; margin: 0 0 84px; }
body.sb .side .cta { font-weight: 500; color: #fff; margin: 0 0 56px; white-space: nowrap; }
body.sb .side .cats { display: grid; gap: 0; }
body.sb .side .cats a { color: #d6d6d3; font-weight: 400; }
body.sb .side .more { margin-top: 48px; display: grid; }
body.sb .side .more a { color: var(--pv-mute); font-weight: 400; }
body.sb .side .icons { display: flex; gap: 20px; margin-top: 48px; }
body.sb .side .icons a { color: var(--pv-mute); }
body.sb .side .icons svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.sb .side .icons svg .dot { fill: currentColor; stroke: none; }
body.sb .side .icons svg.li { width: 27px; height: 22px; fill: currentColor; stroke: none; margin: 0 -2px; }
/* hover fades to grey (menu) or to white (the quiet links); nothing here ever moves or underlines */
body.sb .side a, body.sb .side a:hover, body.sb .side a:focus-visible, body.sb .side [aria-current] { text-decoration: none; }
body.sb .side .cta, body.sb .side .cats a, body.sb .side .more a, body.sb .side .icons a { transition: color .3s ease; }
body.sb .side .cta:hover, body.sb .side .cats a:hover { color: var(--pv-mute); }
body.sb .side .more a:hover, body.sb .side .icons a:hover { color: var(--pv-fg); }
body.sb .side .cats a[aria-current], body.sb .side .cta[aria-current] { color: #fff; }
body.sb .side .more a[aria-current] { color: var(--pv-fg); }
body.sb .side .logo:hover, body.sb .side .logo:focus-visible { color: #fff; }
/* the phone's menu: from 600px up the sheet is not drawn, and its wrapper adds no box of its own,
   so the column's children are the column's own flex items exactly as before */
body.sb .side .menu { display: contents; }
body.sb .side .burger, body.sb .side .sb-x { display: none; }

/* ---------- the footer ---------- */
body.sb .pv-foot { text-align: center; padding: 40px 0 36px; font: 400 16px/1.5 var(--f-mono); color: var(--muted); }
body.sb .pv-foot a { color: inherit; text-decoration: none; transition: color .3s ease; }
body.sb .pv-foot a:hover, body.sb .pv-foot a:focus-visible { color: var(--pv-fg); text-decoration: none; }
body.sb .pv-foot .up { display: none; font-size: 20px; }
body.sb .pv-foot.long { padding: 56px 0 56px; }
body.sb .pv-foot.long .up { display: inline-block; }
body.sb .pv-foot .places { margin: 0 0 28px; }
body.sb .pv-foot.long .places { margin: 56px 0 28px; }
body.sb .pv-foot .addr { margin: 0; }
body.sb .pv-foot .fl { margin: 20px 0 0; font-size: 14px; }

/* ---------- the photo viewer is black ---------- */
body.sb .lb, body.sb .lb::backdrop { background: #000; color: #f2f2f0; }
body.sb .lb button, body.sb .lb .lb-x, body.sb .lb .lb-p, body.sb .lb .lb-n { color: #f2f2f0; background: transparent; }
body.sb .lb figcaption, body.sb .lb .cap { color: #9b9b97; }

/* ---------- the grid (the Work page, the three disciplines, the role pages, the home page) ----------
   Every tile is placed by the generator from the photograph's stored proportions (lib/sidebar.js):
   left/top/width are inline and the grid is a size container, so there is nothing to measure and
   nothing moves when an image arrives. */
body.sb .index.g { display: block; padding: 0; }
body.sb .index-grid { position: relative; display: block; container-type: inline-size; padding: 0; }
body.sb .index-grid > .pl { position: absolute; margin: 0; max-width: none; }
body.sb .mas-sp { display: block; width: 0; }
body.sb .index-grid .pl-media { overflow: hidden; }
body.sb .index-grid .pl-media picture, body.sb .index-grid .pl-media img, body.sb .index-grid .pl-media video { width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease; }
/* the caption: one line of fixed height, 8px under its photograph (the gap above the next one is 8px too) */
body.sb .index-grid .pl .cap { display: block; margin: 8px 0 0; height: 20px; min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 14px/20px var(--f-mono); letter-spacing: .02em; color: var(--muted); }
body.sb .index-grid .pl .cap--2 { height: 40px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
body.sb .index-grid .pv-cap-link { color: inherit; text-decoration: none; transition: color .3s ease; }
/* the cover and its title are one target: hovering either darkens the photograph */
body.sb .index-grid .pl:hover .pl-media img, body.sb .index-grid .pl:hover .pl-media video { filter: brightness(.82); }
body.sb .index-grid .pl:hover .pv-cap-link { color: var(--pv-fg); }
/* the role filters stay: one quiet row of links above the grid */
body.sb .sb-roles { padding: 0 0 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font: 400 14px/1.4 var(--f-mono); color: var(--muted); text-transform: none; letter-spacing: .02em; }
body.sb .sb-roles .role-k { margin: 0; color: var(--muted); text-transform: none; letter-spacing: .02em; }
body.sb .sb-roles .role-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
body.sb .sb-roles a { color: var(--muted); transition: color .3s ease; text-transform: none; letter-spacing: .02em; }
body.sb .sb-roles a:hover, body.sb .sb-roles a[aria-current] { color: var(--pv-fg); text-decoration: none; }
body.sb .index-lead { margin: 0 0 24px; max-width: 60ch; color: var(--muted); }
body.sb .page-head .visually-hidden { margin: 0; }

/* ---------- project pages, in the reference's pattern ----------
   One centred title (mono, bold, 30px, uppercase), a centred grey paragraph, the photographs,
   then the credits centred and grey. */
body.sb article.project { padding-top: 40px; }
body.sb article.project .page-head { display: block; text-align: center; margin: 0 0 8px; padding: 0; }
body.sb article.project .page-head .field { padding: 0; display: block; }
body.sb article.project .page-head h1, body.sb article.project .page-head .cut--page { font: 700 30px/32px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: normal; text-transform: uppercase; color: #eee; margin: 0; text-align: center; white-space: normal; clip-path: none; transform: none; }
body.sb article.project .p-cover { display: flex; flex-direction: column; align-items: center; padding: 0; row-gap: 0; }
body.sb article.project .p-context { max-width: 800px; width: 100%; text-align: center; display: block; margin: 12px auto 36px; font: 400 16px/24px "IBM Plex Mono", ui-monospace, monospace; color: #888; }
body.sb article.project .p-context p { font: inherit; color: inherit; margin: 0 0 16px; text-wrap: balance; max-width: none; }
body.sb article.project .p-cover-plate { width: 100%; display: flex; justify-content: center; padding: 0; }
body.sb article.project .p-cover-plate .pl { width: min(100%, calc(88svh * var(--ar, 1.5))); max-width: 100%; margin: 0 auto; }
body.sb article.project .p-cover-plate .pl-media { view-transition-name: none; }
/* Cookie choices (site.js builds .cc-banner; v4.css places it): black, flat, mono, no fade or slide.
   Geometry stays v4's (bottom bar on a phone, the top bar on a short landscape one). Decline and
   Accept are the same button, so neither is easier to miss. Colour only; widths come from v4. */
body.sb .cc-banner { background: #0a0a0a; color: #9b9b97; border-style: solid; border-color: #2a2a2a; opacity: 0; transform: none; transition: none; }
body.sb .cc-banner.is-in { opacity: 1; transform: none; }
body.sb .cc-text { font: 400 14px/1.5 var(--f-mono); letter-spacing: .02em; color: #9b9b97; }
body.sb .cc-text a { color: #f2f2f0; text-decoration: underline; text-underline-offset: 3px; }
body.sb .cc-btn { background: transparent; color: #f2f2f0; border: 1px solid #888; font: 400 14px/1 var(--f-mono); letter-spacing: .02em; text-transform: none; transition: border-color .3s ease, color .3s ease; }
body.sb .cc-accept, body.sb .cc-decline { background: transparent; color: #f2f2f0; }
@media (max-width: 560px) { body.sb .cc-text { font-size: 12px; line-height: 1.35; } body.sb .cc-btn { font-size: 12px; padding: 0 12px; } }
body.sb .cc-btn:hover { border-color: #fff; color: #fff; }
body.sb .cc-btn:focus-visible, body.sb .cc-text a:focus-visible { outline: 1px solid #f2f2f0; outline-offset: 2px; }
/* Privacy: the project page's voice. A centred mono title, grey mono text in a readable measure
   (about 66 characters), 16px between paragraphs. The words are the page's own; its section
   carries an inline max-width and margin, so these two are !important. */
body.sb.p-privacy > main { padding: 40px 0 0; }
@media (max-width: 599px) { body.sb.p-privacy > main { padding-top: 32px; } }
body.sb.p-privacy .prose { max-width: 640px !important; width: 100%; margin: 0 auto 40px !important; padding: 0; flex: 0 0 auto; grid-column: 1 / -1; }
body.sb.p-privacy .prose h1 { font: 700 30px/32px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: normal; text-transform: uppercase; color: #eee; text-align: center; margin: 0 0 24px; }
body.sb.p-privacy .prose p { font: 400 16px/24px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: normal; color: #888; text-align: left; margin: 0 0 16px; max-width: none; }
body.sb.p-privacy .prose strong { font-weight: 500; color: #bbb; }
body.sb.p-privacy .prose a { color: #bbb; text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease; }
body.sb.p-privacy .prose a:hover, body.sb.p-privacy .prose a:focus-visible { color: #fff; }
body.sb article.project .colophon { display: block; text-align: center; border-top: 0; margin-top: 56px; padding: 0 0 56px; }
body.sb article.project .colophon-tb { display: block; max-width: 800px; margin: 0 auto; }
body.sb article.project .colophon-tb, body.sb article.project .colophon-tb * { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 16px; line-height: 24px; font-weight: 400; color: #888; text-transform: none; letter-spacing: normal; }
body.sb article.project .colophon-tb .tb { display: block; border: 0; text-align: center; }
body.sb article.project .colophon-tb .tb > div { display: block; padding: 0; margin-bottom: 8px; border: 0; }
body.sb article.project .colophon-tb .tb > div::after { display: none; }
body.sb article.project .colophon-tb dt, body.sb article.project .colophon-tb dd { display: inline; margin: 0; }
body.sb article.project .colophon-tb dt::after { content: ": "; }
body.sb article.project .colophon-tb a { text-decoration: none; transition: color .3s ease; }
body.sb article.project .colophon-tb a:hover { color: #fff; }
/* galleries: one even gap (16px) everywhere. Every pair, row and film is a justified row (one
   height, each photograph its own width), so nothing leaves a dark hole beside a smaller one,
   and the field is the full column. */
@media (min-width: 1000px) {
  body.sb article.project .mods, body.sb .p-seq .mods { max-width: none; padding-block: 16px 0; --gut: 16px; }
  body.sb article.project .mods > .mod + .mod { margin-top: 16px; }
  body.sb article.project .mod--rows > .row + .row { margin-top: 16px; }
  body.sb article.project .p-seq, body.sb article.project .room { padding: 0; }
  body.sb article.project .room { background: none; }
  body.sb article.project .mod--pair, body.sb article.project .row, body.sb article.project .mod--film.row { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; justify-content: flex-start; }
  body.sb article.project .mod--pair.is-flip { flex-direction: row; }
  body.sb article.project .mod--pair > .pl, body.sb article.project .mod--pair > .pl--small, body.sb article.project .row > .pl, body.sb article.project .mod--pair.is-narrow > .pl { flex: var(--ar, 1) 1 0%; width: auto; max-width: none; margin: 0; min-width: 0; }
  body.sb article.project .mod--solo { display: flex; justify-content: center; }
  body.sb article.project .mod--solo > .pl, body.sb article.project .mod--film.row--1 > .pl { width: min(100%, calc(88svh * var(--ar, 1.5))); flex: none; margin: 0 auto; }
}

/* the datum rule belonged to the label column: with that gone it would be a stray line */
body.sb .datum::before { display: none; }
body.sb .datum { padding-left: 0; }
/* the label column of the old grid is gone: everything below the cover uses the full width */
body.sb article.project > .g:not(.p-cover):not(.page-head) > .rail, body.sb article.project .room > .g > .rail { display: none; }
body.sb article.project > .g:not(.p-cover):not(.page-head) > :not(.rail), body.sb article.project .room > .g > .field { grid-column: 1 / -1; }

/* ---------- the other pages: Profile, Contact, Resources, guides, privacy ---------- */
body.sb:not(.p-index):not(.p-project) main > .page-head { display: block; margin: 0; }
body.sb:not(.p-index):not(.p-project) main > .page-head > .rail { display: none; }
body.sb:not(.p-index):not(.p-project) main > .page-head .field { padding: 0; }
body.sb:not(.p-index):not(.p-project):not(.p-contact):not(.p-resources):not(.p-guide):not(.p-prose) main > .page-head { margin: 0; }
body.sb .p-index main > .page-head, body.sb.p-index main > .page-head { margin: 0; }
body.sb .dossier.g { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 56px; align-items: start; }
body.sb .dossier.g > .rail { display: none; }
body.sb .dossier.g > .dossier-plate, body.sb .dossier.g > .dossier-text { grid-column: auto; grid-row: auto; }
body.sb .dossier-plate { padding: 0; }
body.sb .dossier-plate .pl { max-width: none; width: 100%; }
body.sb section.sec.g { display: block; margin-top: 0; padding-top: 96px; border-top: 0; }
body.sb section.sec.g > .rail { display: none; }
body.sb .credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
body.sb .contact.g { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; }
body.sb .contact.g > .contact-main { grid-column: 1; grid-row: 1; max-width: 640px; }
body.sb .contact.g > .rail { grid-column: 2; grid-row: 1; position: static; display: block; }
body.sb main a:not(.pl-link):not(.pv-cap-link):not(.btn) { color: var(--pv-fg); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(242, 242, 240, .35); transition: color .3s ease; }
body.sb main a:not(.pl-link):not(.pv-cap-link):hover { color: var(--pv-mute); }
body.sb .btn, body.sb main button, body.sb main a.btn { color: var(--pv-fg); border-color: rgba(242, 242, 240, .45); background: transparent; }
body.sb main input, body.sb main textarea, body.sb main select { color: var(--pv-fg); background: transparent; border-color: rgba(242, 242, 240, .3); }
body.sb main select { color: var(--pv-mute); }
body.sb main select option { color: #000; background: #fff; }
body.sb .sheet-cta a { color: var(--pv-fg); }

/* Profile: the running band of client logos (white on the dark ground) */
body.sb .pv-clients { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
body.sb .pv-clients-label { margin: 0 0 22px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pv-mute); }
body.sb .pv-clients .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); transform: translateZ(0); }
body.sb .pv-clients .logo-track { display: flex; align-items: center; width: max-content; will-change: transform; animation: sb-logos 40s linear infinite; }
body.sb .pv-clients .logo-track img { width: auto; margin: 0 clamp(24px, 2.6vw, 40px); opacity: .7; -webkit-user-drag: none; user-select: none; filter: brightness(0) invert(1); }
@keyframes sb-logos { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  body.sb .pv-clients .logo-track { animation: none; flex-wrap: wrap; width: auto; row-gap: 16px; }
  body.sb .pv-clients .logo-track img.dup { display: none; }
}

/* ---------- /onboard: the same shell (no top bar, no wordmark of its own; the footer is shared) ---------- */
body.sb .onb-shell { box-sizing: border-box; flex: 1 0 auto; width: auto; margin: 0; max-width: none; }

/* ==========================================================================
   Wide windows: the column is fixed, the page sits to its right, both centred as one block
   ========================================================================== */
@media (min-width: 1000px) {
  body.sb .side { position: fixed; top: 100px; left: var(--x); width: calc(var(--side) - 24px); z-index: 50; display: flex; flex-direction: column; }
  body.sb > main, body.sb > .pv-foot, body.sb > .onb-shell { margin-left: calc(var(--x) + var(--side)); margin-right: var(--x); max-width: calc(var(--wrap) - var(--side)); }
  body.sb > main { padding-top: 40px; }
  body.sb.p-index > main { padding-top: 16px; }
  body.sb > .onb-shell { padding: 40px 0 0; }
  body.sb > main > .page-head:first-child, body.sb > main > .g:first-of-type { padding-top: 0; margin-top: 0; }
  body.sb .onb-wordmark, body.sb .onb-bar { display: none; }
  body.sb .onb-shell .wrap { max-width: none; width: 100%; padding-inline: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 56px; align-items: start; }
  body.sb .onb-shell .intro, body.sb .onb-shell .formcol { grid-column: auto; width: auto; max-width: none; margin: 0; padding: 0; position: static; }
  body.sb .onb-shell .intro h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; margin: 0 0 24px; }
  body.sb .onb-shell .intro .kicker { margin-top: 0; }
}

/* ==========================================================================
   Tablets, either way up (600 to 999px, and a landscape tablet's 1000 to 1399px): two columns
   by CSS multi-column, so a tile keeps its real proportion and there are no holes. In 1000 to
   1399px the fixed column stays and the page beside it is only 600 to 756px wide, so four
   columns made a cover 138 to 177px; two make it 292 to 370px, the size of the portrait
   tablet's. 1400px and up keeps the four column grid (Chris, 2026-11-09).
   ========================================================================== */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1399px) {
  body.sb .index-grid { container-type: normal; column-count: 2; column-gap: 16px; }
  body.sb .index-grid > .pl { position: static; left: auto !important; top: auto !important; width: auto !important; break-inside: avoid; margin: 0 0 8px; }
  body.sb .mas-sp { display: none; }
  body.sb .index-grid .pl .cap { margin-bottom: 8px; }
}

/* ==========================================================================
   Narrow windows (under 1000px): the column becomes a header at the top of the page, in the
   flow; the grid is two columns, then one on a phone.
   ========================================================================== */
@media (max-width: 999px) {
  body.sb .side { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 20px 16px 8px; font-size: 15px; line-height: 1.5; }
  body.sb .side .logo { flex: 0 0 100%; font-size: 34px; margin: 0 0 12px; }
  body.sb .side .cats { display: flex; flex-wrap: wrap; gap: 0 18px; }
  body.sb .side .cta { order: 5; margin: 0; }
  body.sb .side .more { margin: 0; }
  body.sb .side .icons { margin: 0 0 0 auto; gap: 16px; }
  body.sb .side .cats a, body.sb .side .more a, body.sb .side .cta, body.sb .side .icons a { min-height: 44px; display: inline-flex; align-items: center; }
  body.sb > main, body.sb > .pv-foot, body.sb > .onb-shell { margin-left: 16px; margin-right: 16px; }
  body.sb > main { padding-top: 12px; }
  body.sb > .onb-shell { padding: 12px 0 0; }
  body.sb .onb-wordmark, body.sb .onb-bar { display: none; }
  body.sb .dossier.g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.sb .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sb .contact.g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.sb article.project { padding-top: 16px; }
  body.sb article.project .page-head h1, body.sb article.project .page-head .cut--page { font-size: 24px; line-height: 28px; }
}
@media (max-width: 599px) {
  body.sb .index-grid { column-count: 1; }
  body.sb .credits { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Phones (under 600px), in the reference's pattern: the name at the left and a menu button at
   the right; one column of photographs inside 20px gutters, each kept at its own proportion with
   its caption 8px under it and 40px to the next project; the links in a full-screen sheet.
   ========================================================================== */
@media (max-width: 599px) {
  body.sb > main, body.sb > .pv-foot, body.sb > .onb-shell { margin-left: 20px; margin-right: 20px; }
  body.sb .side { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 0; }
  body.sb .side .logo { flex: 0 1 auto; font-size: 30px; margin: 0; }
  body.sb .side .burger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 7px -10px 0 0; color: var(--pv-mute); transition: color .3s ease; }
  body.sb .side .burger:hover, body.sb .side .sb-x:hover { color: var(--pv-fg); }
  body.sb .side .burger svg, body.sb .side .sb-x svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
  /* the sheet: shut until the menu button is used (script: html.sb-open; no script: :target) */
  body.sb .side .menu { display: none; }
  html.sb-open body.sb .side .menu, body.sb .side .menu:target { display: flex; flex-direction: column; align-items: center; position: fixed; inset: 0; z-index: 200; box-sizing: border-box; padding: 88px 20px 32px; background: #0a0a0a; overflow-y: auto; overscroll-behavior: contain; text-align: center; font: 400 18px/24px var(--f-mono); }
  html.sb-open, html.sb-open body { overflow: hidden; }
  body.sb .side .menu a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; box-sizing: border-box; color: #f2f2f0; }
  body.sb .side .menu .cta { order: 0; margin: auto 0 0; font-weight: 700; color: #fff; white-space: normal; }
  body.sb .side .menu .cats { display: grid; justify-items: center; gap: 0; }
  body.sb .side .menu .more { margin: 0; }
  body.sb .side .menu .more a { color: var(--pv-mute); }
  body.sb .side .menu .icons { margin: auto 0 0; padding-top: 32px; gap: 0; }
  body.sb .side .menu .icons a { width: 48px; padding: 0; color: var(--pv-mute); }
  body.sb .side .menu .cta:hover, body.sb .side .menu .cats a:hover { color: var(--pv-mute); }
  body.sb .side .menu .sb-x { display: flex; position: absolute; top: 27px; right: 10px; width: 44px; min-height: 44px; padding: 0; color: var(--pv-mute); }
  body.sb .side .menu a:focus-visible, body.sb .side .burger:focus-visible, body.sb .side .logo:focus-visible { outline: 1px solid #f2f2f0; outline-offset: -2px; }
  /* the footer's links are 44px targets */
  body.sb .pv-foot .addr a { display: inline-flex; align-items: center; min-height: 44px; }
  body.sb .pv-foot .fl { margin-top: 4px; }
  body.sb .pv-foot .fl a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  body.sb .pv-foot.long .up { line-height: 44px; }
  /* project galleries: one column, every photograph the full width at its own proportion and one
     16px gap between them (v4's pairs, rows and small plates are for a wider field) */
  body.sb article.project .mods { padding-block: 16px 0; }
  body.sb article.project .mods > .mod + .mod, body.sb article.project .mod--rows > .row + .row { margin-top: 16px; }
  body.sb article.project .row, body.sb article.project .mod--pair, body.sb article.project .mod--pair.is-narrow, body.sb article.project .mod--film.row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px; align-items: stretch; }
  body.sb article.project .row > .pl, body.sb article.project .row--3 > .pl:first-child, body.sb article.project .row--4 > .pl, body.sb article.project .mod--pair > .pl, body.sb article.project .mod--pair > .pl--small, body.sb article.project .mod--pair.is-narrow > .pl, body.sb article.project .mod--solo > .pl, body.sb article.project .mod--film.row--1 > .pl { flex: none; width: 100%; max-width: none; margin: 0; }
  /* the tiles: one column, a title wraps instead of clipping, 40px between projects */
  body.sb .index-grid > .pl { margin: 0 0 40px; }
  body.sb .index-grid .pl .cap, body.sb .index-grid .pl .cap--2 { display: block; height: auto; min-height: 20px; margin-bottom: 0; overflow: visible; white-space: normal; text-overflow: clip; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  html.sb-open body.sb .side .menu, body.sb .side .menu:target { animation: sb-sheet .2s ease both; }
  @keyframes sb-sheet { from { opacity: 0; } to { opacity: 1; } }
}
/* a film is not a control here (Chris, 2026-11-10): v4's "Play film" label never draws, and nothing on a film shows a pointer */
body.sb .pl--film .pl-media::after { content: none; }
body.sb .pl--film video { cursor: default; }