/* The Register: ink on paper, 1px rules, square corners, one signal colour used only as a fill. */
:root {
  --bg: #f1f1ee;
  --sheet: #ffffff;
  --text: #111110;
  --muted: #5b5b56;
  --rule: #111110;
  --hair: #cfcfc8;
  --tint: #e6e6e1;
  --band: #111110;
  --band-text: #f1f1ee;
  --band-muted: #b5b5ae;
  --band-rule: #3a3a36;
  --accent: #ff5b14;
  --on-accent: #111110;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --gutter: clamp(20px, 4vw, 48px);
  /* Motion: hover feedback, the entrance everything shares, and rules drawing across. */
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --dur-quick: .12s;
  --dur-enter: .4s;
  --dur-draw: .8s;
  --stagger: 40ms;
  /* Dims the page behind the mobile menu; the same ink in light and dark, so it always darkens. */
  --scrim: rgb(17 17 16 / 55%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110;
    --sheet: #1b1b19;
    --text: #f1f1ee;
    --muted: #b5b5ae;
    --rule: #f1f1ee;
    --hair: #3a3a36;
    --tint: #1f1f1d;
    --band: #1f1f1d;
    --band-rule: #444440;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* Condensed capitals for anything that names something */
.display { font-weight: 800; font-stretch: 62%; line-height: .86; text-transform: uppercase; }
.label { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons: square, mono, uppercase */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 0 18px; border: 1px solid var(--rule); background: transparent; color: var(--text);
  font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; transition: background var(--dur-quick), color var(--dur-quick), filter var(--dur-quick);
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.25); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
.btn-lg { min-height: 56px; padding: 0 20px; font-size: 14px; }
.btn-sm { min-height: 44px; padding: 0 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Top bar */
.topbar { position: relative; border-bottom: 1px solid var(--rule); background: var(--bg); }
.topbar-inner { display: flex; align-items: center; gap: 12px 32px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; text-decoration: none; font-weight: 800; font-stretch: 75%; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.mark { display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--text); color: var(--bg); font-weight: 800; font-stretch: 62%; font-size: 20px; letter-spacing: .02em; }
.nav { display: flex; gap: 28px; margin-left: auto; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.nav a { text-decoration: none; padding: 16px 0; }
.nav a:hover { color: var(--muted); }
.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .i-close, .is-open .menu-btn .i-open { display: none; }
.is-open .menu-btn .i-close { display: inline; }
.nav-head, .scrim { display: none; }
/* Phones: the links move into a drawer that slides in from the right, over a scrim. */
@media (max-width: 720px) {
  .brand { font-size: 20px; }
  .topbar-cta { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: min(320px, 85vw); margin: 0; padding: 0 var(--gutter) 24px; overflow-y: auto;
    flex-direction: column; gap: 0; counter-reset: nav;
    background: var(--bg); border-left: 1px solid var(--rule);
    transform: translateX(100%); visibility: hidden;
  }
  /* It animates only while opening (.is-open) or closing (.is-closing), never when a resize or a
     rotation switches between the inline links and the drawer. */
  .is-open .nav { transform: none; visibility: visible; transition: transform var(--dur-enter) var(--ease-out), visibility 0s; }
  .is-closing .nav { transition: transform var(--dur-enter) var(--ease-out), visibility 0s linear var(--dur-enter); }
  .nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 72px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
  .nav a {
    display: flex; align-items: baseline; gap: 16px; min-height: 64px; padding: 18px 0 14px; border-bottom: 1px solid var(--hair);
    font: 800 32px/1 var(--font); font-stretch: 68%; letter-spacing: 0;
  }
  .nav a::before { counter-increment: nav; content: counter(nav, decimal-leading-zero); font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
  .js-motion .is-open .nav a { animation: rise var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(var(--stagger) * 3); }
  .js-motion .is-open .nav a:nth-of-type(2) { animation-delay: calc(var(--stagger) * 4); }
  .js-motion .is-open .nav a:nth-of-type(3) { animation-delay: calc(var(--stagger) * 5); }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: var(--scrim); opacity: 0; visibility: hidden;
  }
  .is-open .scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-enter) var(--ease-out), visibility 0s; }
  .is-closing .scrim { transition: opacity var(--dur-enter) var(--ease-out), visibility 0s linear var(--dur-enter); }
}
/* The shared entrance as a keyframe, for things that appear rather than scroll into view. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
#main:focus { outline: none; }
/* Pre-rendered pages: <main> arrives with the page already written, for search engines and AI
   assistants that read the HTML. When scripts run, app.js draws it again with its entrances, so the
   copy stays hidden until then. Without scripts, or if one fails to load, the copy is the page. */
.js main[data-prerendered] { visibility: hidden; }

/* Hero */
.hero { padding-top: 28px; padding-bottom: clamp(56px, 8vw, 96px); }
.hero-index { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 28px; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hero h1 { font-size: clamp(56px, 9.4vw, 140px); letter-spacing: -.005em; }
.hero h1 .dot { color: var(--accent); }
.hero-foot { display: flex; flex-wrap: wrap; gap: 40px 48px; margin-top: clamp(32px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--rule); }
.hero-list { flex: 1 1 240px; max-width: 300px; }
.hero-list ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 17px; line-height: 1.3; }
.hero-list li { padding: 7px 0; border-bottom: 1px solid var(--hair); }
.hero-list li:last-child { border-bottom: 0; }
.hero .lead { flex: 2 1 380px; max-width: 40em; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.hero-actions { flex: 1 1 240px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .hero-list { display: none; } .hero-actions { max-width: none; } .hero-index span:nth-child(n + 4) { display: none; } }

/* Section headings */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.section-head h2 { font-size: clamp(48px, 6vw, 88px); line-height: .9; }
.section-head .label { margin-bottom: 12px; }
.section-head p { max-width: 34em; font-size: 17px; color: var(--muted); }

/* Register of work */
.register { border-top: 1px solid var(--rule); padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 112px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer;
  font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.chip span { opacity: .6; }
.chip:hover { background: var(--tint); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--text); color: var(--bg); }
@media (max-width: 640px) { .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .chip { flex: none; } }

.reg-cols, .row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 190px 150px 150px 216px; column-gap: 24px; align-items: center; }
.reg-cols { margin-top: 32px; padding-bottom: 10px; }
.reg { border-bottom: 1px solid var(--rule); }
/* Paging under the register, laid out like the screenshot viewer's bar: page numbers on the left,
   where you are and previous / next on the right. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; }
.pager[hidden] { display: none; }
.pager-nav { display: flex; align-items: center; gap: 16px; }
.pager-status { font: 500 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pager-pages, .pager-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.square:disabled { opacity: .35; cursor: default; }
.square:disabled:hover { background: transparent; color: var(--text); }
.row { padding: 24px 0; border-top: 1px solid var(--rule); text-decoration: none; transition: background var(--dur-quick); }
.row:hover { background: var(--tint); }
.row-no { align-self: start; padding-top: 8px; font: 14px/1 var(--mono); }
.row h3 { font-weight: 800; font-stretch: 68%; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; text-transform: uppercase; }
.row p { margin-top: 8px; max-width: 36em; color: var(--muted); }
.row-stack { display: block; margin-top: 10px; font: 12px/1.4 var(--mono); color: var(--muted); }
.row-meta { display: none; margin-top: 10px; font: 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.row-sector, .row-platform { font-size: 15px; }
.row-end { display: flex; align-items: center; gap: 16px; }
.row-thumb { width: 176px; height: 110px; flex: none; object-fit: cover; object-position: top; border: 1px solid var(--rule); background: var(--sheet); }
.row-go { width: 24px; height: 24px; flex: none; }
.empty { padding: 32px 0; color: var(--muted); border-top: 1px solid var(--rule); }

@media (max-width: 1180px) {
  .reg-cols, .row { grid-template-columns: 48px minmax(0, 1fr) 150px 216px; }
  .reg-cols .c-sector, .reg-cols .c-platform, .row-sector, .row-platform { display: none; }
  .row-meta { display: block; }
}
@media (max-width: 760px) {
  .reg-cols { display: none; }
  .reg { margin-top: 24px; }
  .row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no sector access" "main main main"; column-gap: 12px; row-gap: 12px; padding: 20px 0; }
  .row-no { grid-area: no; align-self: center; padding-top: 0; font-size: 12px; letter-spacing: .06em; }
  .row-no::before { content: "No. "; }
  .row-sector { grid-area: sector; display: block; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-main { grid-area: main; }
  .row-access { grid-area: access; }
  .row-end, .row-meta, .row-stack { display: none; }
}

/* Status tags */
.tag { display: inline-block; padding: 6px 10px; border: 1px solid var(--rule); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.tag-live { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tag-live::before { content: "● "; }

/* Three ways to see it: the dark band */
.band { background: var(--band); color: var(--band-text); padding: clamp(64px, 8vw, 96px) 0; }
.band .section-head h2 { max-width: 12ch; }
.band .section-head p { color: var(--band-muted); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--band-rule); }
.way { display: flex; flex-direction: column; gap: 16px; padding: 32px 32px 8px; border-left: 1px solid var(--band-rule); color: inherit; text-decoration: none; transition: background var(--dur-quick); }
.way:first-child { border-left: 0; padding-left: 0; }
.way:last-child { padding-right: 0; }
.way-key { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--band-muted); }
.way-live .way-key { color: var(--accent); }
.way h3 { font-weight: 800; font-stretch: 68%; font-size: 36px; line-height: 1; text-transform: uppercase; }
.way p { color: var(--band-muted); line-height: 1.55; }
.way-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.way-cta svg { width: 16px; height: 16px; }
.way:hover h3 { color: var(--accent); }
@media (max-width: 860px) {
  .ways { grid-template-columns: 1fr; }
  .way, .way:first-child, .way:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--band-rule); }
}

/* Contact */
.contact { display: flex; flex-wrap: wrap; gap: 56px 64px; padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 112px); }
.contact-intro { flex: 1 1 420px; }
.contact h2 { font-size: clamp(56px, 7.6vw, 112px); line-height: .88; max-width: 9ch; }
.contact-intro p { margin-top: 28px; max-width: 30em; font-size: 19px; }
.contact-list { flex: 1 1 520px; border-top: 1px solid var(--rule); }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.contact-row .label { flex: 0 0 120px; }
.contact-value { flex: 1 1 220px; display: flex; align-items: center; min-height: 44px; font-weight: 700; font-stretch: 85%; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.contact-value:hover { color: var(--muted); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-qr img { width: 112px; height: 112px; flex: none; border: 1px solid var(--rule); background: #fff; }
.contact-qr p { flex: 1 1 200px; font-size: 15px; color: var(--muted); }
.contact-qr b { color: var(--text); }
@media (max-width: 640px) {
  .contact-row .label { flex-basis: 100%; }
  .contact-buttons { flex: 1 1 100%; }
  .contact-buttons .btn { flex: 1; justify-content: center; }
}
/* A phone can't scan its own screen, so the QR code is only for computers. */
@media (max-width: 760px), (hover: none) { .contact-qr { display: none; } }

/* Project page */
.crumbs { border-bottom: 1px solid var(--hair); }
.crumbs-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 52px; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.back svg { width: 16px; height: 16px; }
.back:hover { color: var(--muted); }
.crumbs-inner span { color: var(--muted); }

.p-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px 64px; padding: clamp(40px, 5vw, 56px) 0 clamp(40px, 5vw, 64px); }
.p-title { flex: 999 1 560px; min-width: 0; }
.p-title h1 { margin-top: 16px; font-size: clamp(48px, 13vw, 200px); line-height: .82; overflow-wrap: break-word; }
.p-title .lead { margin-top: 24px; max-width: 24em; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; }
.facts { flex: 1 1 340px; margin: 0; border-top: 1px solid var(--rule); font-size: 15px; }
.facts div { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.facts div:last-child { border-bottom-color: var(--rule); align-items: center; }
.facts dt { flex: 0 0 96px; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts dd { margin: 0; }

.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; }
.seg { display: flex; gap: 8px; }
.viewer-nav { display: flex; align-items: center; gap: 16px; font: 500 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.viewer-nav div { display: flex; gap: 8px; }
.square { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer; }
.square:hover { background: var(--text); color: var(--bg); }
.square svg { width: 18px; height: 18px; }
.stage { margin: 0; display: flex; justify-content: center; padding: clamp(16px, 3vw, 40px); border: 1px solid var(--rule); background: var(--tint); }
.stage-zoom { display: block; width: 100%; max-width: 1240px; padding: 0; border: 0; background: none; cursor: zoom-in; }
.stage.mobile .stage-zoom { width: min(340px, 100%); }
.stage img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--rule); background: var(--sheet); }
.stage.mobile img { aspect-ratio: 780 / 1688; }
.is-broken { visibility: hidden; }
.stage-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border: 1px dashed var(--muted); color: var(--muted); font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 16px; }
.thumbs { display: flex; gap: 16px; overflow-x: auto; padding-top: 16px; scrollbar-width: thin; }
.thumbs button { flex: none; display: flex; flex-direction: column; gap: 10px; width: 224px; padding: 0 0 10px; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.thumbs button.mobile { width: 96px; }
.thumbs img { width: 100%; height: 140px; object-fit: cover; object-position: top; border: 1px solid var(--rule); background: var(--sheet); opacity: .55; transition: opacity var(--dur-quick); }
.thumbs button.mobile img { height: 180px; }
.thumbs button:hover img { opacity: .85; }
.thumbs button[aria-current="true"] { border-bottom-color: var(--accent); }
.thumbs button[aria-current="true"] img { opacity: 1; }
.thumbs span { display: flex; gap: 10px; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.thumbs span i { font-style: normal; color: var(--muted); }
@media (max-width: 640px) { .thumbs button { width: 160px; } .thumbs img { height: 100px; } .thumbs button.mobile { width: 80px; } .thumbs button.mobile img { height: 150px; } }

.p-body { display: flex; flex-wrap: wrap; gap: 64px; padding: clamp(64px, 8vw, 96px) 0 clamp(64px, 8vw, 112px); }
.p-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
.p-sec { display: flex; flex-wrap: wrap; gap: 16px 40px; padding-top: 20px; border-top: 1px solid var(--rule); }
.p-sec h2 { flex: 0 0 180px; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.p-sec > :not(h2) { flex: 1 1 380px; min-width: 0; }
.statement { font-weight: 600; font-stretch: 85%; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; }
.p-sec .body { max-width: 38em; font-size: 18px; line-height: 1.6; }
.features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 32px; }
.features li { flex: 1 1 260px; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); line-height: 1.4; }
.features li i { flex: none; padding-top: 3px; font: normal 12px/1.2 var(--mono); color: var(--muted); }
.roles { display: flex; flex-wrap: wrap; gap: 16px; }
.role { flex: 1 1 220px; padding: 20px; border: 1px solid var(--rule); }
.role b { display: block; margin-top: 10px; font-weight: 800; font-stretch: 68%; font-size: 30px; line-height: 1; text-transform: uppercase; }

.p-aside { flex: 1 1 340px; display: flex; flex-direction: column; gap: 40px; }
.access { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--rule); background: var(--sheet); }
.access h2 { font-weight: 800; font-stretch: 68%; font-size: 40px; line-height: .95; text-transform: uppercase; }
.access p { font-size: 15px; color: var(--muted); }
.access .btn { width: 100%; }
.creds { font: 13px/1.5 var(--mono); background: var(--tint); padding: 10px 12px; white-space: pre-wrap; }
.stack h2 { margin-bottom: 12px; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.stack dl { margin: 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.stack div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.stack div:last-child { border-bottom-color: var(--rule); }
.stack dt { flex: 0 0 88px; padding-top: 2px; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stack dd { margin: 0; }

.next-band { display: block; background: var(--band); color: var(--band-text); text-decoration: none; }
.next-band .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: 56px; }
.next-band .label { color: var(--band-muted); }
.next-band b { display: block; margin-top: 12px; font-size: clamp(44px, 7vw, 104px); line-height: .88; }
.next-band svg { width: 64px; height: 64px; flex: none; color: var(--accent); }

/* Not found */
.not-found { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(72px, 10vw, 128px); }
.not-found h1 { margin-top: 16px; font-size: clamp(56px, 11vw, 160px); }
.not-found h1 .dot { color: var(--accent); }
.not-found .lead { margin-top: 28px; max-width: 30em; font-size: clamp(18px, 1.6vw, 22px); }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
@media (max-width: 640px) { .not-found-actions .btn { flex: 1 1 100%; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgb(17 17 16 / 96%); display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; padding: 24px 8px; }
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; justify-content: center; min-width: 0; }
.lb-figure img { max-height: calc(100vh - 110px); max-width: 100%; object-fit: contain; border: 1px solid #3a3a36; }
.lb-figure figcaption { color: #f1f1ee; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.lb-nav, .lb-close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #f1f1ee; background: transparent; color: #f1f1ee; cursor: pointer; justify-self: center; }
.lb-nav:hover, .lb-close:hover { background: #f1f1ee; color: #111110; }
.lb-nav[hidden] { display: none; }
.lb-nav svg, .lb-close svg { width: 20px; height: 20px; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; }
@media (max-width: 600px) { .lightbox { grid-template-columns: 1fr; } .lb-nav { position: absolute; bottom: 20px; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } }

/* Footer: the motto on the signal colour */
.footer { background: var(--accent); color: var(--on-accent); }
.footer .wrap { padding-top: 56px; padding-bottom: 32px; }
.motto { font-size: clamp(52px, 11.4vw, 168px); line-height: .84; }
.motto:empty { display: none; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid currentColor; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.to-top svg { width: 16px; height: 16px; }
.to-top:hover { text-decoration: underline; }

/* Motion. app.js puts .js-motion on <html> unless the visitor's device asks for reduced motion;
   without that class nothing below hides or moves anything. */
.js-motion [data-reveal] {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), background var(--dur-quick);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
/* A printout shows everything, scrolled to or not. */
@media print { .js-motion [data-reveal] { opacity: 1; transform: none; } .js-motion [data-rule] { border-top-color: var(--rule-color, var(--rule)); } .js-motion [data-rule]::before { display: none; } }
/* A top rule draws across from the left as its block comes into view. */
.js-motion [data-rule] { position: relative; border-top-color: transparent; }
.js-motion [data-rule]::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--rule-color, var(--rule)); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-draw) var(--ease-out);
}
.js-motion [data-rule].is-in::before { transform: none; }
.ways[data-rule] { --rule-color: var(--band-rule); }
.footer-row[data-rule] { --rule-color: currentColor; }
.w { display: inline-block; }

/* Arrows lean the way they point while their link or button is hovered (4px; the diagonal 3px + 3px). */
.i-arrow, .i-back, .i-down, .i-up, .i-out { transition: transform var(--dur-quick) var(--ease-out); }
a:hover .i-arrow, button:hover .i-arrow { transform: translateX(4px); }
a:hover .i-back, button:hover .i-back { transform: translateX(-4px); }
a:hover .i-down { transform: translateY(4px); }
button:hover .i-up { transform: translateY(-4px); }
a:hover .i-out { transform: translate(3px, -3px); }
.next-band:hover .i-arrow { transform: translateX(8px); }
button:disabled .i-arrow, button:disabled .i-back { transform: none; }

/* The projects' stacks running past under the hero; the register's top rule closes it. Hover pauses it. */
.ticker { overflow: hidden; border-top: 1px solid var(--rule); font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ticker-track { display: flex; width: max-content; animation: ticker var(--ticker-time, 60s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 24px; padding: 14px 24px 14px 0; white-space: nowrap; }
.ticker span::after { content: "·"; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* A new screenshot slides in from the side it came from. */
.js-motion .stage-zoom img { animation: stage-in var(--dur-enter) var(--ease-out); }
@keyframes stage-in { from { opacity: 0; transform: translateX(var(--dx, 0)); } }