/* The pages past the home page, in the opening scene's world: its dusk paper,
   square halftone dots, the pixel-arrow name and the star stickers. */
:root {
  --paper: #ece7dd; --panel: #efebe2; --ink: #2a2826; --muted: #5c554b; --soft: #c8c1b3;
  --red: #c47064; --violet: #a874bc; --gold: #a9852f; --green: #5f8a68;
  --serif: "Spectral", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 13px/1.55 var(--mono); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: #f4c964; color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* The name, as on the opening: Spectral, with the three-pixel arrow after it. */
.site-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(20px, 4vh, 36px) clamp(20px, 5vw, 64px) 0; }
.masthead { position: relative; font: 500 clamp(19px, 1.7vw, 22px)/1 var(--serif); letter-spacing: -0.02em; text-decoration: none; }
.masthead .flecks {
  position: absolute; left: 100%; top: 0; margin-left: 8px; display: grid;
  grid-template: repeat(3, 6px) / repeat(2, 6px); gap: 1px; transform: rotate(14deg); transform-origin: 0 100%;
}
/* The home page's bar, on paper, held between two outer brackets: a pixel
   between the links, the page you're on at full strength, the others faded. */
.site-bar nav { display: flex; align-items: baseline; gap: 1.4ch; font: 400 14px/1 var(--mono); letter-spacing: 0.03em; }
.site-bar nav::before { content: "["; margin-right: -0.9ch; color: var(--muted); }
.site-bar nav::after { content: "]"; margin-left: -0.9ch; color: var(--muted); }
.site-bar nav a { color: var(--ink); opacity: 0.55; text-decoration: none; transition: opacity 0.2s ease; }
.site-bar nav a:hover, .site-bar nav a:focus-visible { opacity: 0.85; }
.site-bar nav a[aria-current="page"] { opacity: 1; }
.site-bar nav .px { align-self: center; width: 4px; height: 4px; background: var(--c); }


/* Behind everything, a faint pixel city map. */
.map { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.2; pointer-events: none; }

/* The bar and the pages held to one measure, so a wide screen frames them
   rather than spreading the work out thin. */
.site-bar, main { box-sizing: border-box; max-width: 1480px; margin-inline: auto; }
main { padding: clamp(32px, 6vh, 56px) clamp(20px, 5vw, 64px) clamp(72px, 12vh, 140px); }
/* The title, its line and the subway lines share one pale panel, so they read as
   one header; its padding is taken back out, keeping the text in line with the name. */
/* Tall enough for the strip even on a page with no subtitle, the title centred in it. */
.intro { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 140px; box-sizing: border-box; padding: 26px 30px; margin: 0 -30px;
  /* Stepped corners, two pixels deep, like the home page's nav strip. */
  --steps: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  background: var(--panel); clip-path: var(--steps); }
.intro p { max-width: 96ch; }
/* Out of the flow, so its height never spreads the title and subtitle apart. */
.lines { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: min(calc(100% - 46ch - 60px), 430px); height: 100px; }
.lines svg { display: block; overflow: visible; }
.lines path { fill: none; stroke: var(--lc); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
/* The paper-coloured edge each line carries, so a line crossing over another cuts cleanly across it. */
.lines path.edge { stroke: var(--panel); stroke-width: 16; }
/* Each line faded toward the paper rather than made see-through, so where lines
   cross, the one on top hides the one beneath. */
/* The fade itself is on each stroke and fill: animating the mix amount instead
   flashes the terminals' centres black for a frame as it starts. */
.lines .line { --k: 34%; --lc: color-mix(in srgb, var(--c) var(--k), var(--panel)); }
.lines .line path, .lines .line circle { transition: stroke 0.35s ease, fill 0.35s ease; }
.lines a .line { cursor: pointer; }
.lines a:hover .line, .lines .line.lit { --k: 80%; }
.lines .line.on { --k: 100%; }
.lines .line.on path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw-line 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
/* Stations, as on a transit map: white dots in the line, a ringed terminal at
   each end, and the transfer a white stop on each line. */
.lines .stations circle { stroke-width: 2.4; }
.lines .stations .end { fill: #f6f2e9; stroke: var(--lc); }
.lines .stations .hub { fill: var(--lc); }
.lines .stations .stop { fill: #f6f2e9; }
.lines .ticks line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.lines .transfer line { stroke: var(--ink); stroke-width: 2; }
.lines .transfer circle { fill: #f6f2e9; stroke: var(--ink); stroke-width: 2; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
/* On a phone the strip moves under the text at the panel's full width: the lines
   are the way between the pages, so they stay, big enough to tap. */
@media (max-width: 1000px) {
  .lines { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 560px; height: 92px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lines .line.on path { animation: none; stroke-dashoffset: 0; } }
.intro p { margin: 16px 0 0; color: var(--ink); }
.intro h1 { margin: 0; font: 400 clamp(26px, 2.6vw, 34px)/1 var(--serif); letter-spacing: -0.02em; }

/* The pieces: pinned up loosely rather than in a ruled grid. */
.wall { list-style: none; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; display: grid; gap: clamp(48px, 7vh, 72px) clamp(28px, 4vw, 56px); align-items: start; }
.wall li { position: relative; }
.wall figure { margin: 0; }
.wall a { text-decoration: none; }
.wall canvas { display: block; width: 100%; }
.wall figcaption { margin-top: 14px; }
.wall figcaption b { display: block; font: 500 21px/1.15 var(--serif); letter-spacing: -0.02em; }
/* The info's log line: a chevron, then the detail. */
.wall figcaption span { display: block; margin-top: 3px; color: var(--muted); }
.wall figcaption span::before { content: "> "; color: var(--c, var(--gold)); }

/* The art three across: the first row's frames tall, the rest wide, each piece
   cropped to fill its frame so the columns and rows line up. */
.art { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vh, 48px) clamp(16px, 2vw, 28px); }
.art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Like the info's log on the home page, each line in its own colour, a shade deeper for the paper. */
.art figcaption span, .cards figcaption span { margin-top: 2px; color: var(--c); font-weight: 500; }
.art .tall img { aspect-ratio: 5 / 6; object-position: top; }
/* Shown whole in a frame a little wider than it, on a plain mat of a quiet colour from the
   painting with a little of its blur, like a canvas hung on a painted wall. */
.art .mat { position: relative; overflow: hidden; aspect-ratio: 0.9; display: flex; justify-content: center; }
.art .mat { background: var(--mat); }
/* A hint of the painting, blurred, showing through the mat. */
.art .mat::before { content: ""; position: absolute; inset: -12%; background: var(--img) center / 140% 140%; filter: blur(28px) saturate(0.8); opacity: 0.55; }
.art .whole .mat img { position: relative; width: auto; height: 100%; aspect-ratio: 3 / 4; object-position: center; }
.art .square img { aspect-ratio: 1; }
/* The wide pieces start their own row after the tall ones, so the rows stay even. */
.art .tall + .wide { grid-column-start: 1; }
/* A section per kind of work, headed like the nav: a pixel, then the name. */
.art-section { margin-top: clamp(28px, 4vh, 40px); }
.art-section + .art-section { margin-top: clamp(48px, 7vh, 72px); }
.art-section h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.art-section h2 .px { width: 6px; height: 6px; background: var(--c); }
.art-section .wall { margin-top: 24px; }
.art figcaption b { font-size: 17px; line-height: 1.05; }
@media (max-width: 640px) { .art { grid-template-columns: minmax(0, 1fr); } }

/* Room above for the pixel copies, which sit up and to the left of each card. */
.wall.cards { margin-top: clamp(48px, 6vh, 60px); }
/* Five across on a wide screen, fewer as it narrows. */
.cards { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: clamp(40px, 6vh, 60px) clamp(24px, 3vw, 44px); }
.cards figcaption b { font-size: 15px; line-height: 1.1; }
.cards li:nth-child(even) { margin-top: clamp(0px, 1.5vh, 14px); }
/* Toned down toward the paper, so a wall of bright cards stays quiet. */
.cards .card { position: relative; z-index: 1; aspect-ratio: 85.6 / 54; transform: rotate(var(--tilt)); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cards .card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cards .face { filter: saturate(0.68) contrast(0.9) brightness(1.03); transition: filter 0.5s ease; }
/* The pixel copy sits up and to the left behind the card, like a second print slipped out of register. */
/* Turned back against the card's tilt, so the squares sit square to the page and stay crisp. */
.cards .echo { transform: translate(-16px, -14px) rotate(calc(-1 * var(--tilt))); opacity: 0.38; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cards li:hover .card { transform: rotate(0deg); }
.cards li:hover .face { filter: none; }
.cards li:hover .echo { transform: translate(-21px, -19px) rotate(0deg); }

/* Star stickers, the opening's own, stuck over a corner here and there. */
.sticker { position: absolute; z-index: 2; width: clamp(24px, 2.6vw, 34px); height: clamp(24px, 2.6vw, 34px); transform: rotate(var(--r)); pointer-events: none; }
.sticker path { fill: var(--c); stroke: var(--c); stroke-width: 1.4; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .cards .card, .cards canvas { transition: none; } }

/* Some stars tucked behind a card, peeking out past its edge. */
.cards .sticker.behind { z-index: auto; }

/* Phones: one column of everything, sized for a hand rather than shrunk from the desk. */
@media (max-width: 640px) {
  .site-bar { padding: 22px 20px 0; gap: 12px; }
  .site-bar nav { font-size: 13px; gap: 1.2ch; }
  main { padding: 26px 20px 88px; overflow-x: clip; }
  /* The panel keeps a sliver of page either side rather than running off the edges. */
  .intro { min-height: 0; padding: 24px 12px 14px; margin: 0 -12px; }
  .intro h1 { font-size: 30px; }
  .intro p { margin-top: 12px; font-size: 12.5px; line-height: 1.6; }
  /* Its line break was set for the desk's measure; here the text wraps on its own. */
  .intro p br { display: none; }

  /* Two cards abreast, like a wallet's worth, the stagger and tilts kept. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
  .wall.cards { margin-top: 40px; }
  .cards li:nth-child(even) { margin-top: 12px; }
  .cards .echo { transform: translate(-7px, -6px) rotate(calc(-1 * var(--tilt))); }
  .cards figcaption { margin-top: 10px; }
  .cards figcaption b { font-size: 14px; }
  .cards figcaption span { font-size: 11.5px; line-height: 1.4; }
  .sticker { width: 22px; height: 22px; }

  .art-section h2 { font-size: 12.5px; }
  .art figcaption b { font-size: 18px; }
  .wall figcaption { margin-top: 10px; }
  .art-section .wall { margin-top: 18px; gap: 36px; }
}
/* No hover on a touchscreen: pressing a card does what pointing at one does. */
@media (hover: none) {
  .cards li:active .card { transform: rotate(0deg); }
  .cards li:active .face { filter: none; }
  .lines a:active .line { --k: 80%; }
}
@media (pointer: coarse) {
  .site-bar nav a { padding: 12px 2px; margin: -12px -2px; }
}