/* ───────────────────────── Grid ─────────────────────────
   The deck's Swiss grid, made fluid. The deck is 1920 wide on a 40px baseline: 80px margins (2 lines),
   12 columns with 40px gutters (1 line), type sizes and leadings built from the line.
   Here the line (--bl) is k·vw, capped at its 1920 value, and margins, gutters and every type size are
   built from it, so each layout is the same composition at any width. Phones: 4 columns, 20px margins.
   Scales (debug S): deck = the slide at 1:1 (40px line at 1920), web = 32, compact = 24.
   C / L show the columns and the baseline. */
:root {
  --font: "SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, "Helvetica Neue", Arial, sans-serif;
  --k: 1.6667; --blmin: 22px;
  --bl: clamp(var(--blmin), calc(var(--k) * 1vw), calc(var(--k) * 19.2px));
  --m: calc(2 * var(--bl));
  --gut: var(--bl);
  --cols: 12;
  --r: calc(0.25 * var(--bl));

  /* Text steps (as in the deck): size n × 0.8 line, leading n lines. T1 is the body. */
  --t1: calc(0.8 * var(--bl)); --l1: var(--bl);
  --t2: calc(1.6 * var(--bl)); --l2: calc(2 * var(--bl));
  --t3: calc(2.4 * var(--bl)); --l3: calc(3 * var(--bl));
  --t4: calc(3.2 * var(--bl)); --l4: calc(4 * var(--bl));
  /* Display steps: capitals a whole number of lines tall (SF Pro cap height 0.7046), leading = cap + 1 line */
  --cap: 0.7046;
  --d2: calc(2 * var(--bl) / var(--cap)); --ld2: calc(3 * var(--bl));
  --d3: calc(3 * var(--bl) / var(--cap)); --ld3: calc(4 * var(--bl));
  --d4: calc(4 * var(--bl) / var(--cap)); --ld4: calc(5 * var(--bl));
}
[data-scale="deck"]    { --k: 2.0833; --blmin: 24px; }
[data-scale="web"]     { --k: 1.6667; --blmin: 22px; }
[data-scale="compact"] { --k: 1.25;   --blmin: 20px; }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #000; --fg: #f5f5f7; --mut: #8e8e93; --hair: rgba(245, 245, 247, 0.22); --plate: #111113;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #fff; --fg: #111113; --mut: #86868b; --hair: rgba(17, 17, 19, 0.16); --plate: #f2f2f4;
}

/* ───────────────────────── Base ───────────────────────── */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; position: relative; min-height: 100svh;
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: var(--t1); line-height: var(--l1); font-weight: 510;
  -webkit-font-smoothing: antialiased;
  transition: background-color 300ms ease, color 300ms ease;
}
:where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--hair); transition: text-decoration-color 200ms ease; }
.u:hover { text-decoration-color: currentColor; }
.mut { color: var(--mut); }
.eye { font-weight: 600; color: var(--mut); }
.ext { display: inline-block; margin-left: 0.25em; font-weight: 510; color: var(--mut); transition: translate 200ms ease, color 200ms ease; }
a:hover .ext { color: var(--fg); translate: 0.08em -0.08em; }

.g { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding-inline: var(--m); }
.t2 { font-size: var(--t2); line-height: var(--l2); font-weight: 600; letter-spacing: -0.025em; }
.links { display: flex; flex-wrap: wrap; column-gap: var(--gut); }

/* Entrance: blocks blur in one after another, like the deck's text (delays set by site.js) */
.anim [data-in] { animation: in 1000ms cubic-bezier(0.2, 0.65, 0.3, 1) var(--d, 0ms) both; }
@keyframes in { from { opacity: 0; filter: blur(8px); transform: translateY(calc(0.4 * var(--bl))); } }
@media (prefers-reduced-motion: reduce) { .anim [data-in] { animation: none; } html { scroll-behavior: auto; } }

/* Media plates: a quiet field the screenshot sits in. Phones stand inside with a line of air; screens fill it. */
.plate { position: relative; overflow: hidden; border-radius: var(--r); background: var(--plate); }
.plate > :is(img, video, iframe) { position: absolute; display: block; }
.fit-cover > :is(img, video, iframe) { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate > iframe { border: 0; pointer-events: none; color-scheme: normal; }   /* same scheme as the cover page, so Chrome keeps the frame transparent */   /* live covers (covers/*.html): the tile, not the frame, takes the clicks */
.fit-phone > :is(img, video) { top: var(--bl); bottom: var(--bl); left: 50%; height: calc(100% - 2 * var(--bl)); width: auto; translate: -50% 0; border-radius: calc(0.5 * var(--bl)); }

/* Ruled lists (the deck's index): a 2px rule on the first item, hairlines between, a line of air under each */
.ls, .ix { display: grid; grid-template-columns: subgrid; align-content: start; }
.ix > *, .ls > li { grid-column: 1 / -1; }
.ix-g { margin-bottom: var(--bl); font-weight: 600; color: var(--mut); }
.ls + .ix-g { margin-top: calc(2 * var(--bl)); }
.ls > li { display: grid; grid-template-columns: subgrid; box-shadow: inset 0 1px var(--hair); padding-bottom: var(--bl); }
.ls > li:first-child { box-shadow: inset 0 2px var(--fg); }
.ls .n { grid-column: 1; font-weight: 600; color: var(--mut); white-space: nowrap; }
.ls li > div { grid-column: 2 / -1; }
.ls b { display: block; }
.ls small { display: block; font-size: inherit; color: var(--mut); }

/* Shared: top bar, list section, chapter, footer */
.bar { padding-top: var(--m); }
.bar-name { grid-column: 1 / span 3; }
.bar-role { grid-column: 4 / span 3; }
.bar-links { grid-column: 7 / -1; justify-self: end; }

.sec { padding-top: calc(6 * var(--bl)); }
.ls-head { grid-column: 1 / span 5; align-self: start; }
.ls-sec .ix { grid-column: 7 / -1; }

.ch { align-items: start; }
.ch-year {
  grid-column: 1 / span 6;
  margin: calc(-1 * var(--bl)) 0 0 -0.06em;     /* capitals start on the rule's line */
  font-size: var(--d3); line-height: var(--ld3); font-weight: 600; letter-spacing: -0.045em; white-space: nowrap;
}
.ch-text { grid-column: 7 / -1; display: grid; grid-template-columns: subgrid; align-content: start; box-shadow: inset 0 2px var(--fg); }
.ch-text > * { grid-column: 1 / -1; }
.ch-title { font-weight: 600; }
.ch-text .mut a { color: var(--fg); }
.ch-media { display: grid; grid-template-columns: subgrid; gap: var(--gut); margin-top: calc(2 * var(--bl)); }
.ch-media .plate { grid-column: span 2; height: calc(8 * var(--bl)); }
.ch-media .plate:only-child { grid-column: span 4; height: calc(10 * var(--bl)); }

.ft { padding-block: calc(8 * var(--bl)) var(--m); row-gap: calc(4 * var(--bl)); }
.ft-l { grid-column: 1 / span 6; }
.ft-r { grid-column: 7 / -1; }
.ft-r > li { padding-bottom: var(--bl); box-shadow: inset 0 1px var(--hair); }
.ft-r > li:first-child { box-shadow: inset 0 2px var(--fg); }
.ft-r a { display: block; }   /* the row holds the rule, the link holds the text: snapping nudges the text, not the rule */
.ft-b { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--gut); }

/* ═════════════════════════ 1 · Cover — the deck's title slide, then the index, about and resume ═════════════════════════ */
.cv { min-height: 100svh; grid-template-rows: auto 1fr auto 1fr auto; padding-block: var(--m); }
.cv-tl { grid-column: 1 / span 6; grid-row: 1; font-weight: 600; }
.cv-tr { grid-column: 7 / -1; grid-row: 1; justify-self: end; }
.cv-title { grid-column: 1 / -1; grid-row: 3; margin-left: -0.05em; font-size: var(--d4); line-height: var(--ld4); font-weight: 600; letter-spacing: -0.04em; }
.cv-title > span { display: block; }
.cv-fl { grid-column: 1 / span 5; grid-row: 5; align-self: end; }
.cv-fr { grid-column: 9 / -1; grid-row: 5; justify-self: end; align-self: end; color: var(--mut); transition: color 200ms ease; }
.cv-fr:hover { color: var(--fg); }

/* ═════════════════════════ 2 · Index — one screen: who, left; the work as the deck's index, right ═════════════════════════ */
.ix1 { min-height: 100svh; padding-block: var(--m); grid-template-rows: auto 1fr auto; }
.ix1-head { grid-column: 1 / span 5; grid-row: 1; }
.ix1-h { margin-top: calc(2 * var(--bl)); text-wrap: balance; }
.ix1-intro { margin-top: var(--bl); }
.ix1-pv { grid-column: 1 / span 4; grid-row: 2; align-self: end; height: calc(9 * var(--bl)); margin-block: calc(2 * var(--bl)); opacity: 0; transition: opacity 250ms ease; }
.ix1-pv.on { opacity: 1; }
.ix1-links { grid-column: 1 / span 5; grid-row: 3; }
.ix1 > .ix { grid-column: 7 / -1; grid-row: 1 / -1; }
.ix1 .ls li { cursor: default; transition: color 200ms ease; }

/* ═════════════════════════ 3 · Statement — a big sentence, four figures, the work as big rows ═════════════════════════ */
.st { padding-top: calc(6 * var(--bl)); }
.st-h { grid-column: 1 / span 11; font-size: var(--t4); line-height: var(--l4); font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.st-intro { grid-column: 7 / span 5; margin-top: calc(2 * var(--bl)); color: var(--mut); }
.nums { padding-top: calc(6 * var(--bl)); }
.num { grid-column: span 3; box-shadow: inset 0 2px var(--fg); }
.num b { display: block; margin-left: -0.05em; font-size: var(--d2); line-height: var(--ld2); letter-spacing: -0.045em; white-space: nowrap; }
.num span { display: block; margin-top: var(--bl); color: var(--mut); }
.rows { padding-top: calc(6 * var(--bl)); }
.rows-eye { grid-column: 1 / -1; margin-bottom: var(--bl); }
.rows-l { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rows-l > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; box-shadow: inset 0 1px var(--hair); padding-bottom: var(--bl); }
.rows-l > li:last-child { box-shadow: inset 0 1px var(--hair), inset 0 -1px var(--hair); }
.r-t { grid-column: 1 / span 6; font-size: var(--t2); line-height: var(--l2); font-weight: 600; letter-spacing: -0.025em; }
.r-k { grid-column: 7 / span 3; color: var(--mut); }
.r-y { grid-column: 10 / -1; justify-self: end; color: var(--mut); white-space: nowrap; }

/* ═════════════════════════ 4 · Spec sheet — the deck's context slide as a CV ═════════════════════════ */
.sp { min-height: 100svh; padding-block: var(--m); grid-template-rows: auto auto 1fr auto; }
.sp-title { grid-column: 1 / -1; margin: calc(-1 * var(--bl)) 0 0 -0.05em; font-size: var(--d3); line-height: var(--ld3); font-weight: 600; letter-spacing: -0.04em; }
.sp-tag { grid-column: 1 / span 9; margin-top: var(--bl); font-size: var(--t2); line-height: var(--l2); letter-spacing: -0.02em; color: var(--mut); text-wrap: balance; }
.sp-table { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; margin-top: calc(4 * var(--bl)); }
.sp-table > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; box-shadow: inset 0 1px var(--hair); padding-bottom: var(--bl); }
.sp-table > div:first-child { box-shadow: inset 0 2px var(--fg); }
.sp-table dt { grid-column: 1 / span 3; color: var(--mut); }
.sp-table dd { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; }
.sp-table dd > * { grid-column: 1 / -1; }
.sp-work { display: grid; grid-template-columns: subgrid; }
.sp-work > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.sp-w-t { grid-column: 1 / span 3; }
.sp-w-k { grid-column: 4 / span 3; }
.sp-w-y { grid-column: 7 / -1; justify-self: end; white-space: nowrap; }

/* ═════════════════════════ 5 · Gallery — the work as tiles on the 12 columns (7·5, 5·7, 6·6) ═════════════════════════ */
.ga-head { padding-top: calc(6 * var(--bl)); }
.ga-h { grid-column: 1 / span 9; font-size: var(--t3); line-height: var(--l3); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.ga { padding-top: calc(4 * var(--bl)); row-gap: calc(3 * var(--bl)); }
.tile { position: relative; grid-column: span var(--span, 6); display: block; }
.tile-a { position: absolute; inset: 0; z-index: 1; }                                       /* the whole tile clicks through to the case */
.tile .cap { position: relative; z-index: 2; pointer-events: none; } .tile .cap a { pointer-events: auto; }   /* …except links in its one-liner */
.tile.is-link:hover .ext { color: var(--fg); translate: 0.08em -0.08em; }
.tile .plate { height: calc(15 * var(--bl)); }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gut); margin-top: var(--bl); }
.cap b { grid-column: 1; }
.cap > span { grid-column: 2; }
.cap small { grid-column: 1 / -1; font-size: inherit; }
.cap .yr { margin-left: 0.6em; font-weight: 510; color: var(--mut); }   /* the case's year(s), after its title */
/* my role on a case (debug R): a line under the one-liner, an eyebrow over the title, or the title row's right side */
.cap .role { grid-column: 1 / -1; color: var(--mut); }
.cap .role-line { margin-top: var(--bl); }   /* a line of air between what it is and what I did */
.cap .role-line::before { content: "Role · "; color: var(--fg); }
.cap .role-eyebrow { order: -1; }
.cap .role-right { grid-column: 2; text-align: right; }
.tile .plate > * { transition: scale 600ms cubic-bezier(0.2, 0.65, 0.3, 1); }
.tile:hover .plate > * { scale: 1.02; }   /* every case, linked or not (e.g. Support Inbox's live cover) */

/* ═════════════════════════ 6 · Split — who on the left, held in place; the work scrolls on the right ═════════════════════════ */
.sp2 { align-items: start; }
.sp2-l { grid-column: 1 / span 5; position: sticky; top: 0; height: 100svh; padding-block: var(--m); display: grid; grid-template-rows: auto auto 1fr auto; }
.sp2-name { margin: calc(-1 * var(--bl)) 0 0 -0.05em; font-size: var(--d2); line-height: var(--ld2); font-weight: 600; letter-spacing: -0.04em; }
.sp2-mid { margin-top: calc(2 * var(--bl)); }
.sp2-h { text-wrap: balance; }
.sp2-intro { margin-top: var(--bl); }
.sp2-foot { grid-row: 4; }
.sp2-r { grid-column: 7 / -1; padding-block: var(--m); display: grid; row-gap: calc(3 * var(--bl)); }
.sp2-r .tile { grid-column: auto; }
.sp2-r .plate { height: calc(20 * var(--bl)); }

/* ═════════════════════════ 7 · Chapters — the resume told as the deck's chapter cards ═════════════════════════ */
.chi { padding-top: calc(6 * var(--bl)); }
.chi-h { grid-column: 1 / span 10; font-size: var(--t3); line-height: var(--l3); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.chi-intro { grid-column: 7 / span 5; margin-top: calc(2 * var(--bl)); color: var(--mut); }
.chs { padding-top: calc(8 * var(--bl)); }
.chs .ch-year { font-size: var(--d4); line-height: var(--ld4); letter-spacing: -0.05em; }

/* ═════════════════════════ 8 · One size — a letterhead: one type size, everything placed by the columns ═════════════════════════ */
.os { min-height: 100svh; padding-block: var(--m); grid-template-rows: auto 1fr auto 1fr auto; }
.os-c { grid-row: 1; grid-column: span 3; }
.os-p { grid-row: 3; grid-column: 4 / span 4; }
.os-t { grid-row: 5; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.os-t > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; box-shadow: inset 0 1px var(--hair); padding-bottom: var(--bl); }
.os-t > li:first-child { box-shadow: inset 0 2px var(--fg); }
.os-n { grid-column: 1; }
.os-ti { grid-column: 2 / span 2; }
.os-k { grid-column: 4 / span 2; }
.os-l { grid-column: 6 / span 5; }
.os-y { grid-column: 11 / -1; justify-self: end; white-space: nowrap; }

/* ═════════════════════════ 9 · One size · Gallery — the letterhead, then the Gallery's tiles ═════════════════════════
   The first screen is One size's, a few lines short, so the first tiles show at the bottom of the window. */
.og-top { min-height: calc(100svh - 8 * var(--bl)); grid-template-rows: auto 1fr auto 1fr; }
.L-onegallery .ga { padding-block: calc(2 * var(--bl)) var(--m); }
.L-onegallery .tile .plate { height: auto; aspect-ratio: 16 / 9; }   /* also on phones; captions are snapped back onto the lines */
/* the footer: the letterhead's four columns under a hairline (drawn on the footer box, inside the margins) */
.og-ft { margin-top: calc(6 * var(--bl)); padding-block: var(--bl) var(--m); row-gap: var(--bl);
  background: linear-gradient(var(--hair), var(--hair)) no-repeat center top / calc(100% - 2 * var(--m)) 1px; }
.og-ft .os-c { grid-row: 1; }

/* Hover preview that follows the cursor (rows, spec, one size, cover index) */
.follow { position: fixed; left: 0; top: 0; z-index: 30; width: calc(8 * var(--bl)); height: calc(6 * var(--bl)); pointer-events: none; opacity: 0; transition: opacity 200ms ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.follow.on { opacity: 1; }
.follow.fit-phone { width: calc(5 * var(--bl)); height: calc(8 * var(--bl)); }
.follow.fit-phone > img { top: calc(0.5 * var(--bl)); height: calc(100% - var(--bl)); border-radius: calc(0.3 * var(--bl)); }

/* ───────────────────────── Grid overlays (C, L) ───────────────────────── */
.ov-cols { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
.ov-cols i { background: rgba(255, 55, 95, 0.07); box-shadow: inset 1px 0 rgba(255, 55, 95, 0.5), inset -1px 0 rgba(255, 55, 95, 0.5); }
.show-cols .ov-cols { display: grid; }
.ov-bl { position: absolute; inset: 0; z-index: 59; pointer-events: none; display: none; background: linear-gradient(rgba(0, 190, 255, 0.5) 1px, transparent 1px) 0 0 / 100% var(--bl); }
.show-bl .ov-bl { display: block; }

/* ───────────────────────── Debug panel (D) — same chrome as the deck's layout bar ───────────────────────── */
.dbg {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  width: 392px; max-width: calc(100vw - 32px); max-height: calc(100svh - 32px); overflow: auto;
  padding: 6px; border-radius: 14px;
  background: rgba(30, 30, 32, 0.94); box-shadow: 0 0 0 1px #3a3b40, 0 10px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; color: #c9c9cd;
  letter-spacing: 0;
}
.dbg[hidden] { display: none; }
.dbg-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; column-gap: 4px; padding: 2px; }
.dbg-row > b, .dbg-row > kbd { padding: 9px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #86868b; }
.dbg-row > kbd { font-family: inherit; letter-spacing: 0.04em; }
.dbg-opts { display: flex; flex-wrap: wrap; gap: 2px; }
.dbg button { font: inherit; color: inherit; background: none; border: 0; border-radius: 8px; padding: 8px 9px; cursor: pointer; }
.dbg button:hover { background: #2c2c2e; }
.dbg button[aria-pressed="true"] { background: #3a3b40; color: #fff; }
.dbg input[type="range"] { width: 100%; margin: 9px 6px; accent-color: #c9c9cd; }   /* debug sliders (Bokeh, Vignette) */
.dbg-row > kbd [data-out] { display: inline-block; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.dbg-note { margin: 2px 6px 6px 70px; font-size: 11px; line-height: 1.35; color: #86868b; }
.dbg-note b { font-weight: 600; color: #c9c9cd; }
.dbg-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 4px 4px 0 10px; border-top: 1px solid #3a3b40; color: #86868b; font-variant-numeric: tabular-nums; }
.dbg-pill { position: fixed; right: 16px; bottom: 16px; z-index: 80; padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(30, 30, 32, 0.94); color: #c9c9cd; font: 500 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 0 0 1px #3a3b40; display: none; }
@media (pointer: coarse) { .dbg-pill:not([hidden]) { display: block; } }

/* ═════════════════════════ Phones: 4 columns ═════════════════════════ */
@media (max-width: 760px) {
  :root { --cols: 4; --m: 20px; --gut: 20px; }
  .ov-cols i:nth-child(n + 5) { display: none; }

  .bar { row-gap: 0; }
  .bar-name { grid-column: 1 / span 2; }
  .bar-role { grid-column: 3 / span 2; }
  .bar-links { grid-column: 1 / -1; justify-self: start; }

  .sec { padding-top: calc(4 * var(--bl)); }
  .ls-head, .ls-sec .ix { grid-column: 1 / -1; }
  .ls-sec .ix { margin-top: calc(2 * var(--bl)); }

  .ch-year, .chs .ch-year { grid-column: 1 / -1; margin-top: 0; font-size: var(--d3); line-height: var(--ld3); }
  .ch-text { grid-column: 1 / -1; margin-top: var(--bl); }

  .ft { padding-top: calc(5 * var(--bl)); row-gap: calc(2 * var(--bl)); }
  .ft-l, .ft-r { grid-column: 1 / -1; }
  .ft-l .t2 { font-size: var(--t1); line-height: var(--l1); letter-spacing: 0; }
  .ft-b { flex-direction: column; }

  .cv { grid-template-rows: auto 1fr auto 1fr auto auto; }
  .cv-tl { grid-column: 1 / span 2; }
  .cv-tr { grid-column: 3 / -1; column-gap: 12px; }
  .cv-title { font-size: var(--d3); line-height: var(--ld3); }
  .cv-fl { grid-column: 1 / -1; }
  .cv-fr { grid-column: 1 / -1; grid-row: 6; justify-self: start; margin-top: var(--bl); }

  .ix1 { grid-template-rows: none; }
  .ix1-head, .ix1-links, .ix1 > .ix { grid-column: 1 / -1; grid-row: auto; }
  .ix1-links { margin-top: var(--bl); }
  .ix1 > .ix { margin-top: calc(3 * var(--bl)); }
  .ix1-pv { display: none; }

  .st { padding-top: calc(4 * var(--bl)); }
  .st-h { grid-column: 1 / -1; font-size: var(--t3); line-height: var(--l3); }
  .st-intro { grid-column: 1 / -1; }
  .nums { padding-top: calc(4 * var(--bl)); row-gap: calc(2 * var(--bl)); }
  .num { grid-column: span 2; }
  .num b { margin-left: 0; font-size: var(--t2); line-height: var(--l2); }
  .num span { margin-top: 0; }
  .rows { padding-top: calc(4 * var(--bl)); }
  .r-t { grid-column: 1 / -1; }
  .r-k { grid-column: 1 / span 3; }
  .r-y { grid-column: 4 / -1; }

  .sp-title { grid-column: 1 / -1; }
  .sp-tag { grid-column: 1 / -1; }
  .sp-table dt, .sp-table dd { grid-column: 1 / -1; }
  .sp-w-t { grid-column: 1 / span 3; }
  .sp-w-k { display: none; }
  .sp-w-y { grid-column: 4 / -1; }

  .ga-head { padding-top: calc(4 * var(--bl)); }
  .ga-h { grid-column: 1 / -1; font-size: var(--t2); line-height: var(--l2); letter-spacing: -0.025em; }
  .ga { padding-top: calc(2 * var(--bl)); row-gap: calc(2 * var(--bl)); }
  .tile { grid-column: 1 / -1; }
  .tile .plate { height: auto; aspect-ratio: 4 / 3; }

  .sp2-l { grid-column: 1 / -1; position: static; height: auto; grid-template-rows: none; row-gap: calc(2 * var(--bl)); }
  .sp2-mid { margin-top: 0; }
  .sp2-foot { grid-row: auto; }
  .sp2-r { grid-column: 1 / -1; padding-top: calc(2 * var(--bl)); row-gap: calc(2 * var(--bl)); }
  .sp2-r .plate { height: auto; aspect-ratio: 4 / 3; }

  .chi { padding-top: calc(4 * var(--bl)); }
  .chi-h { grid-column: 1 / -1; font-size: var(--t2); line-height: var(--l2); letter-spacing: -0.025em; }
  .chi-intro { grid-column: 1 / -1; }
  .chs { padding-top: calc(5 * var(--bl)); }
  .ch-media .plate { height: calc(9 * var(--bl)); }

  .os { grid-template-rows: none; row-gap: var(--bl); }
  .os-c { grid-row: auto; grid-column: span 2; }
  .og-ft .os-c { grid-row: auto; }   /* the footer: two by two */
  .os-p { grid-row: auto; grid-column: 1 / -1; margin-block: calc(2 * var(--bl)); }
  .os-t { grid-row: auto; }
  .os-ti, .os-l { grid-column: 2 / -1; }
  .os-k, .os-y { display: none; }

  .og-top { min-height: 0; }
  .L-onegallery .ga { padding-top: calc(2 * var(--bl)); }
}