/* Hallmark · macrostructure: Broadside (newspaper front page + plate room) · genre: editorial · theme: custom (vibe: "gothic broadside, newsprint, halftone press") · paper #f7f4ed · accent #c9862b press amber, small marks only · Fraunces + Newsreader, Antonio nameplate, Grenze Gotisch project names
 * axes: light / high-contrast-serif / warm · nav: N9 ruled cells · footer: Ft5 statement · contrast: pass (40-41) · mobile: pass (34, 49, 50-57)
 * exception (owner brief): five families, because the studio must match the live Journal's four and adds one blackletter for project names.
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* Lab 5280 studio pages, "broadside" look: the same paper, ink and type as the Journal
   (site/blog/post.css), so the studio and the newspaper read as one publication.
   Additions here: a blackletter for project names, one press amber for state and mid-tones,
   and the halftone plates (press.js prints each screenshot in ink, then shows it as built). */
@property --lr { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* Fraunces draws the a-macron (as in Knā) with its bar out of place, so that one letter comes from Newsreader. */
@font-face { font-family: 'Macron'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/newsreader-latin-ext.woff2) format('woff2'); unicode-range: U+0100-0101; }
:root {
  --paper: #f7f4ed; --wash: #ece7db; --hairline: #d9d3c5; --midstone: #9f9a90;
  --ash: #5f5b54; --sepia: #3e3b36; --ink: #2a2722; --pop: #c4541e; --pop-soft: #e0703a;
  --ink-soft: #d8d2c4; --ink-label: #cfc9bc; --ink-rule: #4a463f; --field: #fbf9f4; --vignette: rgba(20, 18, 15, 0.6); --ink-scrim: rgba(42, 39, 34, 0.9);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --display: 'Macron', 'Fraunces', Georgia, serif;
  --text: 'Newsreader', Georgia, serif;
  --stamp: 'Antonio', 'Arial Narrow', sans-serif;
  --goth: var(--display);   /* project names and the wordmark: the same serif as the headlines (the blackletter was retired) */
  --ui: 'Inter', system-ui, sans-serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4'/%3E%3C/svg%3E");
  --page: 1360px; --pad: clamp(16px, 4vw, 48px); --bar: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); overflow-x: clip; scrollbar-color: var(--ink) var(--wash); accent-color: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 19px; line-height: 1.5;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--ink); color: var(--paper); }
.ink ::selection { background: var(--paper); color: var(--ink); }
input, textarea { caret-color: var(--pop); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }
.pix { font-family: var(--ui); font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; text-transform: uppercase; }
.goth { font-family: var(--goth); font-weight: 400; letter-spacing: -0.02em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -60px; z-index: 80; padding: 8px 12px; background: var(--ink); color: var(--paper); border-radius: 12px; font-family: var(--ui); font-size: 14px; }
.skip:focus { top: 8px; }
.todo { display: inline-block; padding: 2px 8px; border: 1px dashed var(--ash); border-radius: 12px; font-family: var(--ui); font-size: 12px; color: var(--ash); text-transform: none; }
.state { white-space: nowrap; }
.state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; vertical-align: 0.02em; }
.state.live::before { background: var(--pop); border-color: var(--pop); }
.ink .state.live::before, .pl .state.live::before { background: var(--pop-soft); border-color: var(--pop-soft); }

/* buttons: outlined by default, solid for the one main action */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 1px solid currentColor; border-radius: 12px; font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.btn::after, .cell.go::after, .rule a::after { content: ""; flex: none; width: 15px; height: 10px; background: currentColor; transition: transform .25s var(--ease-out);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(4px); }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--sepia); border-color: var(--sepia); }
.btn:active, .cell:active, .views button:active, .press-bar button:active, .ticker button:active, .room-bar button:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ink .btn:hover, .ink .btn:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ink .btn.solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ink .btn.solid:hover, .ink .btn.solid:focus-visible { background: var(--wash); border-color: var(--wash); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- top strip, bar, nameplate ---------- */
.prog { position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 3px; background: var(--pop); transform-origin: 0 0; transform: scaleX(0); pointer-events: none; }
.strip { display: flex; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; padding: 8px var(--pad); border-bottom: 1px solid var(--ink); }
.bar { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--ink); }
.bar .in { display: flex; align-items: stretch; min-height: var(--bar); padding-left: var(--pad); }
.bar .brand { display: flex; align-items: center; font-size: 30px; line-height: 1; text-decoration: none; margin-right: auto; }
.cell { display: flex; align-items: center; gap: 12px; padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid var(--ink); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.cell:hover, .cell:focus-visible { background: var(--wash); }
.cell[aria-current] { box-shadow: inset 0 -4px 0 var(--ink); }
.free { display: inline-block; margin-left: 6px; padding: 3px 6px 2px; border-radius: 6px; background: var(--pop); color: var(--paper); font-size: 10px; line-height: 1; letter-spacing: 0.02em; vertical-align: 0.1em; }
/* Reported, under the front-page lead: a boxed notice, the way a paper runs a public-service box */
.notice { background: var(--paper); border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); }
.notice-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) auto; align-items: center; gap: 16px clamp(24px, 4vw, 56px); padding-top: 24px; padding-bottom: 24px; }
.notice-k { display: grid; gap: 4px; margin: 0; color: var(--ash); }
.notice-k b { color: var(--pop); font-weight: 700; }
.notice-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.notice-h a { text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.notice-d { margin: 8px 0 0; font-size: 17px; line-height: 1.4; color: var(--sepia); }
@media (max-width: 860px) { .notice-in { grid-template-columns: minmax(0, 1fr); } .notice .btn { justify-self: start; } }
.cell.go { background: var(--ink); color: var(--paper); }
.cell.go:hover, .cell.go:focus-visible { background: var(--sepia); }
.cell.go:hover::after { transform: translateX(4px); }
.cell:focus-visible { outline-offset: -4px; }
.sheet-menu a { font-weight: 700; text-decoration: none; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .25s ease; }
.menu { display: none; position: relative; align-self: center; margin-right: var(--pad); }
.menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 12px; }
.menu summary::-webkit-details-marker { display: none; }
.sheet-menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 240px; display: grid; padding: 8px 20px 16px; background: var(--paper); border: 1px solid var(--ink); border-radius: 12px; }
.sheet-menu a { padding: 16px 0; border-bottom: 1px solid var(--hairline); background: none; }
.sheet-menu a:last-child { border-bottom: 0; }
.mast { padding: 16px var(--pad) 0; container-type: inline-size; }
.nameplate { display: block; font-family: var(--stamp); font-weight: 500; text-transform: uppercase; text-decoration: none; white-space: nowrap; text-align: center;
  font-size: 12vw; font-size: calc(100cqi / 7); line-height: 0.86; letter-spacing: -0.012em; padding-bottom: 0.06em; }
.sections { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; margin-top: 12px; padding: 8px 0; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.sections b { font-weight: 400; }
.sections .inside { font-weight: 700; }
.sections span:first-child { margin-right: auto; }
.sections .end { margin-left: auto; }

/* ---------- shared type ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: 8px 12px; font-weight: 700; }
.crumb span { font-weight: 400; color: var(--ash); }
.crumb span::before { content: "/"; margin-right: 12px; }
.crumb a:hover { text-decoration-thickness: 2px; }
.headline, .rows .nm, .sheet-head h1, .close h2, .say .big, .sec-head h2, .turn .goth { overflow-wrap: anywhere; min-width: 0; }
.headline { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6.6vw, 96px); line-height: 0.92; letter-spacing: -0.028em; text-wrap: balance; }
.dek { max-width: 32em; font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; color: var(--sepia); text-wrap: pretty; }
.fine { font-size: 16px; color: var(--ash); }
.sec { padding: clamp(64px, 9vw, 128px) 0 0; }
.sec.tight { padding-top: clamp(32px, 4vw, 56px); }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2, .split h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.022em; text-wrap: balance; max-width: 16em; }
.rule { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 700; }
.rule a { font-weight: 700; text-decoration: none; }
.rule a { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rule a:hover::after { transform: translateX(4px); }
hr.rule { display: block; height: 0; margin: 0; padding: 0; border: 0; border-top: 3px solid var(--ink); }
.rule a:hover { text-decoration: underline; }
.opener { padding: clamp(40px, 6vw, 80px) 0 0; }
.opener .wrap { display: grid; gap: 24px; }
.opener .headline { font-size: clamp(64px, 13vw, 208px); line-height: 0.84; padding-bottom: 0.14em; }

/* ---------- lead picture (home): one large film of a live site at a time, the headline set over its foot ---------- */
.lead.reel { position: relative; margin-top: 0; border-top: 1px solid var(--ink); height: clamp(480px, calc(100svh - 350px), 860px); overflow: hidden; background: var(--ink); isolation: isolate; }
.reel-stage { position: absolute; inset: 0; z-index: 0; }
.reel-stage > img, .reel-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) contrast(1.08) brightness(0.92); transition: filter .7s var(--ease-out), opacity 1.1s var(--ease-in-out); }
.reel-stage > video { opacity: 0; }
.reel-stage > video.on { opacity: 1; }
/* the burnt glow that the Journal's front-page plate carries, and a little press grain */
.reel-stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 52% 78% at 80% 14%, rgba(196, 84, 30, 0.5), rgba(196, 84, 30, 0.12) 56%, transparent 76%); mix-blend-mode: screen; transition: opacity .7s var(--ease-out); }
.reel-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lead.reel::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to top, var(--ink) 0%, var(--ink-scrim) 22%, rgba(42, 39, 34, 0.4) 44%, transparent 70%), linear-gradient(to right, rgba(42, 39, 34, 0.9) 0%, rgba(42, 39, 34, 0.72) 30%, rgba(42, 39, 34, 0.2) 52%, transparent 64%); }
.lead.reel.in-color .reel-stage > img, .lead.reel.in-color .reel-stage > video { filter: none; }
.lead.reel.in-color .reel-stage::before { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .lead.reel:hover .reel-stage > img, .lead.reel:hover .reel-stage > video { filter: none; }
  .lead.reel:hover .reel-stage::before { opacity: 0; }
}
.lead.reel .copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding-bottom: 76px; pointer-events: none; color: var(--paper); }
.lead.reel .copy .acts { pointer-events: auto; }
.lead.reel .headline { font-size: clamp(52px, 7.4vw, 124px); }
.reel-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 24px; min-height: 48px; padding: 0 var(--pad); color: var(--ink-label); border-top: 1px solid rgba(247, 244, 237, 0.22); }
.reel-bar[hidden] { display: none; }
.reel-now { display: flex; flex-wrap: wrap; gap: 4px 14px; text-decoration: none; }
.reel-now b { color: var(--pop-soft); font-weight: 700; }
.reel-now #reel-nm { color: var(--paper); font-weight: 700; }
.reel-now:hover #reel-nm, .reel-now:focus-visible #reel-nm { text-decoration: underline; }
.reel-ticks { display: flex; gap: 6px; margin-left: auto; }
.reel-ticks button { position: relative; width: clamp(28px, 4vw, 56px); height: 32px; }
.reel-ticks button::before, .reel-ticks button i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(247, 244, 237, 0.28); }
.reel-ticks button i { background: var(--pop-soft); transform-origin: 0 50%; transform: scaleX(0); }
.reel-ticks button.on i { transform: scaleX(1); }
.lead.reel.run .reel-ticks button.on i { animation: reel-tick 8s linear both; }
@keyframes reel-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reel-bar > button { font-family: var(--ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; min-height: 32px; padding: 0 12px; border: 1px solid currentColor; border-radius: 12px; }
.reel-bar > button:active { transform: translateY(1px); }
@media (max-width: 860px) {
  .lead.reel { height: auto; display: grid; }
  .lead.reel::before { display: none; }
  .reel-stage { position: relative; aspect-ratio: 4 / 3; }
  .lead.reel .copy { position: static; padding-top: 28px; padding-bottom: 28px; }
  .reel-bar { position: static; order: 1; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .lead.reel > .reel-stage { order: 0; } .lead.reel > .reel-bar { order: 1; } .lead.reel > .copy { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .lead.reel.run .reel-ticks button.on i { animation: none; } }

/* ---------- the older room hero (kept for the work page's room) ---------- */
.lead.room { margin-top: 0; border-top: 1px solid var(--ink); }
.lead .copy { position: relative; z-index: 21; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head dek" "head acts"; gap: 20px clamp(32px, 5vw, 96px); align-items: end; padding-top: 40px; padding-bottom: 44px; }
.lead .copy .headline { grid-area: head; }
.lead .copy .dek { grid-area: dek; max-width: 26em; }
.lead .copy .acts { grid-area: acts; }
.lead .headline { max-width: 9em; }
.lead.is-live .copy { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 44px; pointer-events: none; }
.lead.is-live .copy .acts { pointer-events: auto; }
.lead.is-live::before { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(to top, var(--ink) 0%, var(--ink) 16%, var(--ink-scrim) 46%, transparent 78%); }
.lead.room.is-live { height: clamp(460px, calc(100svh - 420px), 760px); }
.lead.is-live .pl .tag { display: none; }
.lead.is-live .room-bar { z-index: 22; bottom: 14px; }
.lead:not(.is-live) .field { grid-template-columns: minmax(0, 1fr); padding: 8px var(--pad) 40px; }
.lead:not(.is-live) .field .pl:nth-child(n + 2) { display: none; }
.ticker button, .room-bar button { font-family: var(--ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; min-height: 32px; padding: 0 12px; border: 1px solid currentColor; border-radius: 12px; }

/* ---------- plates: moving pictures of the work. Black and white in the paper, colour when touched ---------- */
.plate { position: relative; display: block; overflow: hidden; background: var(--wash); border: 1px solid var(--ink); }
.plate > img, .plate > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease-out); }
.plate > video { position: absolute; inset: 0; }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: multiply; transition: opacity .5s var(--ease-out); background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.plate.in-color > img, .plate.in-color > video, .pl:focus-visible .plate > img, .pl:focus-visible .plate > video, a.plate:focus-visible > img, a.plate:focus-visible > video { filter: none; }
.plate.in-color::after, .pl:focus-visible .plate::after, a.plate:focus-visible::after { opacity: .04; }
@media (hover: hover) and (pointer: fine) {
  .plate:hover > img, .plate:hover > video, .pl:hover .plate > img, .pl:hover .plate > video { filter: none; }
  .plate:hover::after, .pl:hover .plate::after { opacity: .04; }
}
.plate[data-pan] > img { animation: pan 26s ease-in-out infinite alternate; }
@keyframes pan { from { object-position: 50% 0; } to { object-position: 50% 100%; } }

/* ---------- ticker ---------- */
.ticker { position: relative; display: flex; align-items: center; background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker button { position: relative; z-index: 2; margin: 0 0 0 var(--pad); flex: none; background: var(--ink); box-shadow: 0 0 0 20px var(--ink), -60px 0 0 20px var(--ink); }
.ticker button:hover, .room-bar button:hover { background: var(--paper); color: var(--ink); }
.ticker .run { display: flex; flex: none; padding: 16px 0; animation: tick 46s linear infinite; }
.ticker .run span { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; white-space: nowrap; padding: 0 28px; }
.ticker .run span::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 56px; border-radius: 50%; background: var(--pop-soft); vertical-align: 0.12em; }
.ticker.paused .run, .ticker:hover .run, .ticker:focus-within .run { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- project index: big names, one sticky plate ---------- */
.index { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.rows > li { border-bottom: 1px solid var(--ink); }
.rows > li:first-child { border-top: 1px solid var(--ink); }
.rows a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: clamp(20px, 2.4vw, 32px) 0; text-decoration: none; transition: color .2s ease; }
.rows .nm, .rows .kd, .rows .meta { transition: transform .3s var(--ease-out); }
.rows .no { padding-top: 0.9em; color: var(--ash); }
.rows .nm { font-family: var(--goth); font-weight: 400; letter-spacing: -0.025em; font-size: clamp(40px, 6vw, 92px); line-height: 1; }
.rows .kd, .rows .meta, .rows .th { grid-column: 2; }
.rows .kd { max-width: 30em; margin-top: 8px; font-size: 18px; line-height: 1.4; color: var(--sepia); }
.rows .meta { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--ash); margin-top: 4px; }
.rows .th { display: block; margin-top: 16px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--ink); }
.rows .th img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.peek { display: none; }
@media (min-width: 940px) and (hover: hover) {
  .index { grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); }
  .rows .th { display: none; }
  .rows:hover a:not(:hover), .rows:focus-within a:not(:focus-visible):not(:hover) { color: var(--ash); }
  .rows:hover a:not(:hover) .kd, .rows:hover a:not(:hover) .no, .rows:hover a:not(:hover) .meta { color: inherit; }
  .rows a:hover .nm, .rows a:focus-visible .nm { transform: translateX(16px); }
  .rows a:hover .kd, .rows a:hover .meta, .rows a:focus-visible .kd, .rows a:focus-visible .meta { transform: translateX(8px); }
  .peek { display: block; position: sticky; top: calc(var(--bar) + 24px); }
  .peek .frame { position: relative; aspect-ratio: 16 / 10; max-height: calc(100svh - var(--bar) - 96px); width: 100%; overflow: hidden; background: var(--ink); border: 1px solid var(--ink); }
  .peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-in-out); }
  .peek img.was { clip-path: inset(0); transition: none; z-index: 1; }
  .peek img.on { clip-path: inset(0); z-index: 2; transition: clip-path .6s var(--ease-in-out); }
  .peek .cap { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ink); }
}

/* ---------- front-page stories: a broadsheet. Headline across the story, picture on one side, the article in two justified columns on the other ---------- */
.stories { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: clamp(16px, 2vw, 32px); row-gap: 16px; padding: clamp(28px, 4vw, 52px) 0; border-bottom: 1px solid var(--ink); align-items: start; }
.story-name { grid-column: 1 / -1; grid-row: 1; margin: 0 0 8px; font-family: var(--goth); font-weight: 400; letter-spacing: -0.025em; font-size: clamp(44px, 6vw, 100px); line-height: 0.98; overflow-wrap: anywhere; min-width: 0; }
.story-name a { text-decoration: none; }
.story-name a:hover, .story-name a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.08em; }
.story-plate { grid-column: 1 / 8; grid-row: 2 / 4; display: block; }
.story-plate .plate { aspect-ratio: 16 / 10; }
.story-cap { grid-column: 1 / 8; grid-row: 4; display: flex; gap: 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--ink); color: var(--ash); }
.story-cap span:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.story-dek { grid-column: 8 / 13; grid-row: 2; margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.28; color: var(--sepia); }
.story-body { grid-column: 8 / 13; grid-row: 3; columns: 2; column-gap: 28px; column-rule: 1px solid var(--hairline); font-size: 16px; line-height: 1.5; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.story-body p { margin: 0 0 0.85em; break-inside: avoid; }
.story-body b { font-weight: 600; }
.story-body .dateline { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.story-body .dateline::after { content: " \2014 "; }
@supports (initial-letter: 2) { .story-body > p:first-child::first-letter { font-family: var(--display); initial-letter: 2; margin-right: 0.08em; } }
.story-meta { grid-column: 8 / 13; grid-row: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 0; padding-top: 8px; border-top: 1px solid var(--ink); color: var(--ash); }
.story-meta .jump { margin-left: auto; color: var(--ink); font-weight: 700; text-decoration: none; }
.story-meta .jump::after { content: " \2192"; }
.story-meta .jump:hover { text-decoration: underline; }
.story.flip .story-plate, .story.flip .story-cap { grid-column: 6 / 13; }
.story.flip .story-dek, .story.flip .story-body, .story.flip .story-meta { grid-column: 1 / 6; }
.briefs { margin-top: clamp(32px, 4vw, 56px); }
.brief-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief { display: grid; gap: 10px; align-content: start; padding: 20px 24px 24px 0; text-decoration: none; border-left: 1px solid var(--hairline); }
.brief + .brief { padding-left: 24px; }
.brief:first-child { border-left: 0; }
.brief .goth { font-size: clamp(30px, 2.8vw, 44px); line-height: 1; }
.brief > span:nth-child(2) { font-size: 17px; line-height: 1.4; color: var(--sepia); }
.brief .pix { color: var(--ash); }
.brief:hover .goth, .brief:focus-visible .goth { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.1em; }
@media (max-width: 860px) {
  .lead .copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dek" "acts"; }
  .story { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 16px; }
  .story-plate, .story-name, .story-cap, .story-dek, .story-body, .story-meta, .story.flip .story-plate, .story.flip .story-name, .story.flip .story-cap, .story.flip .story-dek, .story.flip .story-body, .story.flip .story-meta { grid-column: 1; grid-row: auto; }
  .story-body { columns: 1; text-align: left; }
  .brief-row { grid-template-columns: minmax(0, 1fr); }
  .brief, .brief + .brief { padding: 16px 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .brief:first-child { border-top: 0; }
}

/* ---------- statement ---------- */
.say .big { margin-top: clamp(24px, 3vw, 40px); font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.026em; max-width: 14em; text-wrap: balance; }
.say .after { display: grid; gap: 24px; margin-top: clamp(28px, 4vw, 48px); margin-left: auto; max-width: 34em; }

/* ---------- ruled cells (services teaser, packages) ---------- */
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cells > * { display: grid; align-content: start; gap: 12px; padding: 24px 24px 32px; text-decoration: none; border-left: 1px solid var(--hairline); transition: background-color .25s; }
.cells > *:first-child { border-left: 0; padding-left: 0; }
.cells > a:hover, .cells > a:focus-visible { background: var(--wash); }
.cells > a:first-child:hover { box-shadow: -24px 0 0 var(--wash); }
.cells.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* An example on each package: a moving picture of real work, or a specimen of the thing itself. */
.cells .eg { display: grid; gap: 8px; text-decoration: none; }
.cells .eg .plate { aspect-ratio: 16 / 10; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
@media (min-width: 1021px) { .cells:not(.two) .eg .plate { aspect-ratio: auto; height: clamp(128px, 12vw, 184px); } }
.cells .eg .plate > img { object-position: 50% 0; }
.cells .eg .pix { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ash); }
.cells .eg b { color: var(--ink); font-weight: 700; }
.cells .eg:hover .pix, .cells .eg:focus-visible .pix { text-decoration: underline; }
.cells .eg + h3, .cells .spec + h3 { margin-top: 12px; }
.cells .spec { display: grid; gap: 10px; align-content: center; min-height: clamp(120px, 12vw, 176px); padding: 20px 24px; background: var(--wash); outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.cells .spec .pix { font-style: normal; font-weight: 700; letter-spacing: -0.01em; color: var(--ash); }
.cells.two p { max-width: 34em; }
.cells h3 { margin-top: clamp(20px, 4vw, 56px); }
.cells h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.015em; }
.cells p { font-size: 17px; line-height: 1.42; color: var(--sepia); }
.cells .from { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); font-family: var(--ui); font-size: 13px; color: var(--ink); }

/* ---------- ink inversion: the closing letter, the plate room ---------- */
.ink { background: var(--ink); color: var(--paper); }
.ink .dek { color: var(--ink-soft); }
.close { margin-top: clamp(72px, 10vw, 144px); padding: clamp(64px, 9vw, 128px) 0; text-align: center; }
.close .wrap { display: grid; justify-items: center; gap: 24px; }

.close h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 112px); line-height: 0.94; letter-spacing: -0.028em; max-width: 12em; text-wrap: balance; }
.close .acts { justify-content: center; margin-top: 12px; }

/* ---------- the plate room (work page) ---------- */
.room { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.room .field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 56px); padding: clamp(28px, 5vw, 72px) var(--pad); }
.pl { display: grid; gap: 12px; text-decoration: none; }
.pl .plate { aspect-ratio: 16 / 10; border-color: var(--ink-rule); }
.pl .tag { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pl .goth { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
.pl .pix { color: var(--ink-label); }
.room.is-live { height: clamp(540px, 86svh, 940px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.room.is-live.dragging { cursor: grabbing; }
.room.is-live .field { position: absolute; inset: 0; display: block; padding: 0; }
.room.is-live .pl { position: absolute; left: 0; top: 0; will-change: transform; }
.room.is-live::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, var(--vignette) 100%); }
.room-bar { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 16px; display: flex; justify-content: space-between; align-items: center; color: var(--ink-label); pointer-events: none; }
.room-bar[hidden] { display: none; }
.room-bar button { pointer-events: auto; background: var(--ink); }
.room-bar span { padding: 8px 12px; background: var(--ink); border-radius: 12px; }
[data-index-sec][hidden] { display: none; }

/* ---------- project sheet ---------- */
.sheet-head { display: grid; gap: 20px; padding-top: clamp(36px, 5vw, 72px); }
.sheet-head h1 { font-size: clamp(56px, 11vw, 176px); line-height: 0.92; letter-spacing: -0.03em; }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 5vw, 64px); align-items: start; }
.facts { display: grid; border-top: 3px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ink); align-items: baseline; }
.facts dt { font-weight: 700; }
.figs { display: grid; gap: clamp(28px, 4vw, 56px); }
.figs .fig { margin: 0; }
.figs .plate { aspect-ratio: 16 / 10; }
.figs figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ink); color: var(--ash); }
.turn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; margin-top: clamp(56px, 8vw, 112px); padding-top: 16px; border-top: 3px solid var(--ink); }
.turn a { display: grid; gap: 8px; text-decoration: none; }
.turn .goth { font-size: clamp(32px, 5vw, 72px); line-height: 0.95; }
.turn .nx { text-align: right; }
.turn .all { align-self: center; text-decoration: underline; }
.turn a:hover .goth { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
@media (min-width: 940px) {
  .sheet-body { grid-template-columns: minmax(240px, 3fr) minmax(0, 8fr); }
  .facts { position: sticky; top: calc(var(--bar) + 24px); }
}

/* ---------- services ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); margin-bottom: 32px; }
.col { padding: 24px 28px 8px; border-left: 1px solid var(--hairline); }
.col:first-child { padding-left: 0; border-left: 0; }
.col h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 16px; }
.col ul { margin-top: 20px; border-top: 1px solid var(--ink); }
.col li { padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 17px; line-height: 1.38; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
@media (min-width: 1021px) { .steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps.five li { padding-left: 20px; padding-right: 20px; } .steps.five li:first-child { padding-left: 0; } .steps.five h3 { font-size: 23px; } }
.steps li { counter-increment: s; display: grid; align-content: start; gap: 12px; padding: 20px 24px 28px; border-left: 1px solid var(--hairline); }
.steps li:first-child { padding-left: 0; border-left: 0; }
.steps li::before { content: counter(s); font-family: var(--display); font-size: clamp(56px, 6vw, 88px); line-height: 0.9; }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.steps p { font-size: 17px; line-height: 1.42; color: var(--sepia); }
/* Services: each service opens on a moving picture of real work, and the three columns share one set of rows
   (picture, heading, intro, list) so the intros and lists start on the same line however the headings wrap. */
.cols3 { grid-template-rows: repeat(4, auto); }
.cols3 .col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cols3 .eg { display: grid; gap: 10px; align-content: start; margin-bottom: 28px; text-decoration: none; }
.cols3 .eg .plate { aspect-ratio: 16 / 10; }
/* The first column has no left gutter, so a ratio would make its picture taller than the others; one height keeps the row level. */
@media (min-width: 1021px) { .cols3 .eg .plate { aspect-ratio: auto; height: clamp(184px, 16vw, 236px); } }
.cols3 .eg .pix { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ash); }
.cols3 .eg b { color: var(--ink); font-weight: 700; }
.cols3 .eg:hover .pix, .cols3 .eg:focus-visible .pix { text-decoration: underline; }
.cols3 .eg:focus-visible .plate > img, .cols3 .eg:focus-visible .plate > video { filter: none; }
.cols3 .eg:focus-visible .plate::after { opacity: .04; }
@media (hover: hover) and (pointer: fine) {
  .cols3 .eg:hover .plate > img, .cols3 .eg:hover .plate > video { filter: none; }
  .cols3 .eg:hover .plate::after { opacity: .04; }
}
@media (max-width: 1020px) {
  .cols3 { grid-template-rows: none; }
  .cols3 .col { grid-row: auto; grid-template-rows: none; padding-bottom: 24px; }
  .cols3 .col h2 { font-size: clamp(32px, 5vw, 44px); }
  .steps.five li:last-child { grid-column: 1 / -1; }
  .steps.five li:last-child p { max-width: 34em; }
}
/* A tablet has room to set each picture beside its service rather than above it. */
@media (min-width: 621px) and (max-width: 1020px) {
  .cols3 .col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; }
  .cols3 .col > * { grid-column: 1; }
  .cols3 .eg { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--bar) + 24px); margin-bottom: 0; }
}

/* ---------- rate sheet ---------- */
.rates { border-top: 3px solid var(--ink); }
.rates .r { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--ink); }
.rates .h { padding: 8px 0; font-weight: 700; }
.rates .pl { display: block; font-family: var(--display); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.rates { font-variant-numeric: tabular-nums lining-nums; }
.rates .rt { font-family: var(--display); font-size: clamp(36px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.02em; }
.rates .rt small { font-family: var(--ui); font-size: 13px; letter-spacing: 0; color: var(--ash); }
.rates + .fine { margin-top: 16px; max-width: 40em; }

/* ---------- interview form + questions ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: 24px; border-top: 3px solid var(--ink); }
.split .wrap { padding: 0; }
.body-p { margin: 20px 0 20px; max-width: 30em; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.form .wide { grid-column: 1 / -1; }
.form label { display: grid; gap: 8px; }
.form label span { font-weight: 700; }
.form input, .form textarea { width: 100%; padding: 12px 16px; font: inherit; font-size: 18px; color: var(--ink); background: var(--field); border: 1px solid var(--ink); min-height: 48px; border-radius: 12px; }
.form textarea { resize: vertical; min-height: 132px; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.form ::placeholder { color: var(--ash); }
.form .bad { box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); }
.form .sent { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--ink); }
.form .sent[hidden] { display: none; }
.form .draft { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 16px; line-height: 1.5; padding: 14px 16px; max-height: 260px; overflow: auto; color: var(--ink); background: var(--field); border: 1px solid var(--ink); border-radius: 12px; }
.form #form-note.is-sent { color: var(--ink); font-weight: 700; }
.btn.plain::after { display: none; }
.faq { border-top: 3px solid var(--ink); max-width: 56em; }
.faq details { border-bottom: 1px solid var(--ink); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; align-self: center; width: 16px; height: 16px; transition: transform .3s var(--ease-out);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 34em; }

/* ---------- colophon ---------- */
.colophon { border-top: 1px solid var(--ink); padding: clamp(36px, 5vw, 64px) 0 24px; }
.is-inner .colophon, .is-home .colophon { margin-top: 0; }
.colophon .cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.colophon .mark { font-size: clamp(64px, 10.5vw, 168px); line-height: 0.9; letter-spacing: -0.03em; white-space: nowrap; }
.colophon li { padding: 4px 0; }
.colophon a { font-weight: 700; text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.colophon .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(28px, 4vw, 48px); padding-top: 12px; border-top: 3px double var(--ink); color: var(--ash); }

/* ---------- narrower screens ---------- */
@media (max-width: 1020px) {
  .cells, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells > *:nth-child(odd), .steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cells > *:nth-child(n+3), .steps li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .cols3 { grid-template-columns: minmax(0, 1fr); }
  .col { padding: 24px 0 8px; border-left: 0; border-top: 1px solid var(--ink); }
  .col:first-child { border-top: 0; }
}
@media (max-width: 860px) {
  .bar .cell { display: none; }
  .menu { display: block; }
  .strip .opt, .sections .inside { display: none; }
  /* fixed rows on a phone, so the lines cannot re-wrap (and push the page down) when the label font arrives */
  .strip { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .strip span, .sections span, .sections b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sections { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; gap: 4px 16px; }
  .sections b[data-today] { text-align: right; }
  .sections .end { grid-column: 1 / -1; margin-left: 0; text-align: right; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .rates .r { grid-template-columns: 1fr auto; }
  .rates .h { display: none; }
  .rates .r > :nth-child(n+3) { font-size: 16px; color: var(--ash); }
  .colophon .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colophon .mark { grid-column: 1 / -1; }
  .turn { grid-template-columns: 1fr 1fr; }
  .turn .all { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 620px) {
  .room .field, .cells, .steps, .form { grid-template-columns: minmax(0, 1fr); }
  .cells > *, .steps li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .cells > *:first-child, .steps li:first-child { border-top: 0; }
  .rows a { grid-template-columns: minmax(0, 1fr); }
  .rows .no { padding-top: 0; }
  .rows .kd, .rows .meta, .rows .th { grid-column: 1; }
}
@media (hover: none) { .hint { display: none; } }

/* ---------- motion layer (GSAP + Lenis, see press.js). Content hides only while the script is in charge. ---------- */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
html.has-motion main h1, html.has-motion main h2, html.has-motion .nameplate, 
html.has-motion main .dek, html.has-motion main .acts, html.has-motion .cells > *, html.has-motion .rows > li,
html.has-motion .col, html.has-motion .steps > li, html.has-motion .facts, html.has-motion .form { visibility: hidden; }
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.w { display: inline-block; will-change: transform; }
.ch { display: inline-block; will-change: transform, opacity; }
html.has-motion .rule { clip-path: inset(0 100% 0 0); }

/* Page to page: the old page tears away like newsprint (fourteen mask frames rendered from the paper-tear project)
   and the new page is already underneath. The bar and the top strip stay put. */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
.strip { view-transition-name: strip; }
::view-transition-group(bar), ::view-transition-group(strip) { animation-duration: 0s; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 0; }
::view-transition-old(root) { z-index: 1; animation: tear 0.7s linear both; -webkit-mask-mode: luminance; mask-mode: luminance; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@keyframes tear {
  0.00% { -webkit-mask-image: url(assets/tear/t01-01.webp); mask-image: url(assets/tear/t01-01.webp); }
  7.14% { -webkit-mask-image: url(assets/tear/t01-02.webp); mask-image: url(assets/tear/t01-02.webp); }
  14.29% { -webkit-mask-image: url(assets/tear/t01-03.webp); mask-image: url(assets/tear/t01-03.webp); }
  21.43% { -webkit-mask-image: url(assets/tear/t01-04.webp); mask-image: url(assets/tear/t01-04.webp); }
  28.57% { -webkit-mask-image: url(assets/tear/t01-05.webp); mask-image: url(assets/tear/t01-05.webp); }
  35.71% { -webkit-mask-image: url(assets/tear/t01-06.webp); mask-image: url(assets/tear/t01-06.webp); }
  42.86% { -webkit-mask-image: url(assets/tear/t01-07.webp); mask-image: url(assets/tear/t01-07.webp); }
  50.00% { -webkit-mask-image: url(assets/tear/t01-08.webp); mask-image: url(assets/tear/t01-08.webp); }
  57.14% { -webkit-mask-image: url(assets/tear/t01-09.webp); mask-image: url(assets/tear/t01-09.webp); }
  64.29% { -webkit-mask-image: url(assets/tear/t01-10.webp); mask-image: url(assets/tear/t01-10.webp); }
  71.43% { -webkit-mask-image: url(assets/tear/t01-11.webp); mask-image: url(assets/tear/t01-11.webp); }
  78.57% { -webkit-mask-image: url(assets/tear/t01-12.webp); mask-image: url(assets/tear/t01-12.webp); }
  85.71% { -webkit-mask-image: url(assets/tear/t01-13.webp); mask-image: url(assets/tear/t01-13.webp); }
  92.86% { -webkit-mask-image: url(assets/tear/t01-14.webp); mask-image: url(assets/tear/t01-14.webp); }
  100% { -webkit-mask-image: url(assets/tear/t01-14.webp); mask-image: url(assets/tear/t01-14.webp); }
}

/* Questions open with a short settle, not a jump. */
.faq details[open] p { animation: settle 0.22s var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(-4px); } }

/* The plate room's own pointer: says what a press will do. */
.room-cursor { position: fixed; left: 0; top: 0; z-index: 65; display: grid; place-items: center; height: 28px; padding: 0 12px; margin: 20px 0 0 20px; border-radius: 12px;
  background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
  pointer-events: none; opacity: 0; scale: 0.9; transition: opacity .18s ease, scale .2s var(--ease-out), background-color .2s ease; will-change: transform; }
.room-cursor.on { opacity: 1; scale: 1; }
.room-cursor.open { background: var(--pop); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .plate[data-pan] > img { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .faq details[open] p { animation: none; }
  .ticker .run { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Footer mark: on hover the wordmark wipes away and the 5280 Labs.ai logo wipes up in its place. */
.colophon .mark { position: relative; }
.colophon .mark .mk-word { display: inline-block; }
.colophon .mark .mk-logo { position: absolute; left: -0.04em; top: 50%; height: 1.5em; width: auto; transform: translateY(-50%); pointer-events: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .colophon .mark .mk-word { clip-path: inset(0 0 0 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .colophon .mark .mk-logo { opacity: 1; clip-path: inset(100% 0 0 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .colophon .mark:hover .mk-word { clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.22, 1, .36, 1); }
  .colophon .mark:hover .mk-logo { clip-path: inset(0 0 0 0); transition: clip-path .52s cubic-bezier(.22, 1, .36, 1) .08s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .colophon .mark .mk-word, .colophon .mark .mk-logo { clip-path: none; transition: opacity .2s linear; }
  .colophon .mark .mk-logo { opacity: 0; }
  .colophon .mark:hover .mk-word { opacity: 0; }
  .colophon .mark:hover .mk-logo { opacity: 1; }
}

/* Header wordmark: the same hover as the footer mark. The wordmark wipes away and the 5280 Labs.ai logo wipes up
   in its place, on hover or keyboard focus. Mark the element .mk and give it .mk-word + .mk-logo children. */
.mk { position: relative; }
.mk .mk-word { display: inline-block; }
.mk .mk-logo { position: absolute; left: -0.04em; top: 50%; height: 1.5em; width: auto; transform: translateY(-50%); pointer-events: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .mk .mk-word { clip-path: inset(0 0 0 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .mk .mk-logo { opacity: 1; clip-path: inset(100% 0 0 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .mk:hover .mk-word, .mk:focus-visible .mk-word { clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.22, 1, .36, 1); }
  .mk:hover .mk-logo, .mk:focus-visible .mk-logo { clip-path: inset(0 0 0 0); transition: clip-path .52s cubic-bezier(.22, 1, .36, 1) .08s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .mk .mk-word, .mk .mk-logo { clip-path: none; transition: opacity .2s linear; }
  .mk .mk-logo { opacity: 0; }
  .mk:hover .mk-word, .mk:focus-visible .mk-word { opacity: 0; }
  .mk:hover .mk-logo, .mk:focus-visible .mk-logo { opacity: 1; }
}

/* Front-page nameplate: "Lab 5280" swaps to the 5280 Labs.ai logo on hover or focus, like the header and footer marks. */
.nameplate .np-lab { position: relative; display: inline-block; }
.nameplate .np-word { display: inline-block; }
.nameplate .np-logo { position: absolute; left: 50%; top: 50%; height: 1.05em; width: auto; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .nameplate .np-word { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .nameplate .np-logo { opacity: 1; clip-path: inset(100% 0 0 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
  .nameplate:hover .np-word, .nameplate:focus-visible .np-word { clip-path: inset(-0.3em -0.1em 100% -0.1em); transition: clip-path .4s cubic-bezier(.22, 1, .36, 1); }
  .nameplate:hover .np-logo, .nameplate:focus-visible .np-logo { clip-path: inset(0 0 0 0); transition: clip-path .52s cubic-bezier(.22, 1, .36, 1) .08s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .nameplate .np-word, .nameplate .np-logo { clip-path: none; transition: opacity .2s linear; }
  .nameplate .np-logo { opacity: 0; }
  .nameplate:hover .np-word, .nameplate:focus-visible .np-word { opacity: 0; }
  .nameplate:hover .np-logo, .nameplate:focus-visible .np-logo { opacity: 1; }
}