/* Case study detail page. 1:1 with Figma "project.com":
   desktop frame 87:347 (1440 wide) and mobile frame 119:1525 (440 wide).
   Values below are Figma's, not rounded. Desktop applies from 1200px up. */

:root {
  --cs-ground: #1a1614;
  --cs-panel: #14100e;                      /* one warm panel for every card, hero and table (was green-black on Ansarr only) */
  --cs-hairline: rgba(226, 194, 153, 0.12); /* the one edge for panels and frames */
  --cs-radius: 14px;                        /* panels, frames, heroes */
  --cs-radius-inner: 12px;                  /* a screen inside a frame */
  --cs-muted: #a4a09a;                      /* descriptions under a title */
  --cs-accent: #1c5cf2;                     /* the page's own colour for bars: Ansarr blue, overridden per study */
  --cs-gold: #e2c299;
  --cs-gold-strong: #dfab68;
  --cs-cream: #f5e6d3;
  --cs-title: rgba(245, 230, 211, 0.66);
  --cs-tab: #292828;
  --cs-violet-btn: #32147e;
  --cs-font: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --cs-screens-gradient: rgb(86, 32, 209) 0%, rgb(83, 31, 202) 7.1429%, rgb(81, 30, 196) 14.286%, rgb(78, 29, 189) 21.429%, rgb(76, 29, 182) 28.571%, rgb(73, 28, 176) 35.714%, rgb(71, 27, 169) 42.857%, rgb(68, 26, 163) 50%, rgb(63, 25, 149) 57.143%, rgb(57, 23, 136) 64.286%, rgb(52, 21, 123) 71.429%, rgb(47, 20, 110) 78.571%, rgb(42, 18, 97) 85.714%, rgb(37, 16, 85) 92.857%, rgb(32, 14, 73) 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cs-ground); color: var(--cs-cream); font-family: var(--cs-font); font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--cs-gold); outline-offset: 3px; border-radius: 4px; }

/* Skip link: first thing a keyboard reaches, out of sight until then */
.cs-skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 16px; border-radius: 1000px; background: var(--cs-tab); color: var(--cs-cream); font-size: 14px; line-height: 16px; transform: translateY(-200%); }
.cs-skip:focus { transform: none; }

/* Pause / play for a looping recording (case.js adds it; the browser's own controls replace it under reduced motion) */
.cs-media-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 1000px; background: rgba(26, 22, 20, 0.78); box-shadow: inset 0 0 0 1px var(--cs-hairline); color: var(--cs-cream); }
.cs-media-btn svg { width: 12px; height: 12px; }
.cs-media-btn .cs-media-play { display: none; }
.cs-media-btn.is-held .cs-media-play { display: block; }
.cs-media-btn.is-held .cs-media-pause { display: none; }
.cs-screen-nav .cs-media-btn { position: static; width: auto; height: auto; padding: 8px; background: var(--cs-violet-btn); box-shadow: none; color: #fff; }
.cs-screen-nav .cs-media-btn svg { width: 16px; height: 16px; }

/* ================= Mobile first (Figma 119:1525, 440 wide) ================= */
.cs { position: relative; width: 100%; max-width: 440px; margin-inline: auto; background: var(--cs-ground); }

/* Tick bar + tabs. At rest the layout is Figma's (162 + the 20px margin = the 182px bar). Once you scroll,
   the empty band above the ruler scrolls away and 98px stays pinned: the ruler and the tabs. */
.cs-bar { position: sticky; top: -64px; z-index: 10; height: 162px; margin-top: 1px; margin-bottom: 20px; background: var(--cs-ground); overflow: hidden; }
html { scroll-padding-top: 110px; }   /* keyboard focus never lands under the pinned bar */
.cs-ticks { position: absolute; left: 0; right: 0; top: 74px; height: 32px; display: flex; gap: 8px; align-items: flex-start; }
.cs-ticks i { flex: none; width: 1px; height: 16px; background: var(--cs-gold); }
.cs-ticks i.is-tall { height: 32px; background: var(--cs-gold-strong); }
/* Reading ruler: a cursor slides along the ticks as you scroll; ticks behind it are lit */
.cs-ticks { position: relative; }
.cs-ticks i { transition: background-color 0.25s ease, height 0.25s ease; }
.cs-ticks i.is-read { background: var(--cs-gold-strong); }
.cs-ticks i.is-tall.is-read { background: var(--cs-cream); }
.cs-cursor { position: absolute; left: 0; top: 0; width: 1px; height: 32px; background: var(--cs-cream); box-shadow: 0 0 6px rgba(245, 230, 211, 0.7); will-change: transform; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cs-ticks i { transition: none; } }
.cs-ticks--desktop { display: none; }
/* The tabs are placed from the centre and the ticks from the left edge of Figma's 440 frame, so the ruler
   is offset by as much as the tabs are. The tall tick stays under the active tab at any width below desktop. */
.cs-ticks--mobile { margin-left: calc(50% - 220px); }
.cs-tabs { position: absolute; top: 110px; left: calc(50% - 39px); display: flex; gap: 12px; align-items: flex-start; transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cs-bar[data-view="engineering"] .cs-tabs { left: calc(50% - 136px); }
@media (prefers-reduced-motion: reduce) { .cs-tabs { transition: none; } }
.cs-tab { padding: 12px; border-radius: 1000px; font-size: 14px; line-height: 16px; color: var(--cs-gold); opacity: 0.9; white-space: nowrap; }
.cs-tab { transition: background-color 0.2s ease; }
.cs-tab.is-active { background: var(--cs-tab); opacity: 1; color: rgba(226, 194, 153, 0.9); }

/* Panels: each tab of a study (Design, and Engineering, Leading or Operations) */
.cs-panel { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.cs-panel[hidden] { display: none; }
.cs-sr, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sound toggle. Phones and tablets: in the band above the ruler, clear of the tabs (the home page's
   three tabs reach the right edge on a phone). Desktop: level with the tabs, see below. */
.cs-sound { position: absolute; right: 24px; top: 25px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 1000px; color: var(--cs-gold); opacity: 0.55; transition: opacity 0.15s ease; }
.cs-sound:hover, .cs-sound:focus-visible { opacity: 1; }
.cs-sound .cs-sound-off { display: none; }
.cs-sound[aria-pressed="false"] .cs-sound-wave { display: none; }
.cs-sound[aria-pressed="false"] .cs-sound-off { display: block; }
.cs-sound .cs-sound-wave { transform-origin: 10.5px 8px; }
.cs-sound.is-ticking .cs-sound-wave { animation: cs-sound-pulse 0.25s ease-out; }
@keyframes cs-sound-pulse { 0% { transform: scale(0.7); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } }

/* Column */
.cs-col { display: flex; flex-direction: column; align-items: flex-start; padding-inline: 24px; }
.cs-crumbs, .cs-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: 32px; }
.cs-foot { border-top: 1px solid var(--cs-gold); }
.cs-crumb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); white-space: nowrap; }
.cs-crumb--light { font-weight: 300; }
.cs-crumb img { width: 16px; height: 16px; }

/* Hero */
.cs-hero { width: 100%; background: var(--cs-panel); padding: 24px; overflow: clip; }
.cs-hero img { width: 100%; height: auto; aspect-ratio: 344 / 670.909; object-fit: cover; }

/* Hero on a print (luciana-study.html): the same dithered backdrop and bezel as the stills further down */
.cs-hero--print { position: relative; border-radius: var(--cs-radius); }
.cs-hero .cs-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.cs-hero--print::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(226, 194, 153, 0.12), inset 0 0 90px rgba(0, 0, 0, 0.45); }
.cs-hero--print picture { position: relative; z-index: 2; }
.cs-hero--print picture img { border-radius: var(--cs-radius-inner); border: 1px solid rgba(245, 230, 211, 0.28); box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.55), 0 40px 70px -24px rgba(0, 0, 0, 0.8); }
.cs-hero--print .cs-live { z-index: 3; }

/* Zart (zart-study.html): a mobile app, so the hero and the stills are phones on the print (the
   mockup PNG carries its own device frame and shadow). The second tab is Leading, not Engineering. */
.cs--zart { --cs-accent: #fa4812; }
.cs--zart .cs-hero { display: flex; align-items: center; justify-content: center; }
.cs--zart .cs-hero picture { display: flex; justify-content: center; }
.cs--zart .cs-hero picture img { width: auto; height: 560px; max-width: 100%; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.8)); }
.cs-shot-frame.cs-shot-frame--phones, .cs-shot-frame.cs-shot-frame--film { aspect-ratio: 1 / 1; }
.cs-shot-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* the print and the phone are baked into the clip */   /* square on phones so the phone screens have room; 16:10 on desktop like the other stills */
.cs-shot-phone { position: absolute; z-index: 2; top: 8%; left: 50%; height: 84%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.8)); }
.cs-shot-frame--pair .cs-shot-phone--a { transform: translateX(-104%); }
.cs-shot-frame--pair .cs-shot-phone--b { transform: translateX(4%); }
.cs-bar[data-view="leading"] .cs-tabs { left: calc(50% - 121.5px); }
/* Everything African (ea-study.html): the same warm card and table, bars in the shop's green. Second tab: Operations. */
.cs--ea { --cs-accent: #007a5c; --cs-accent-text: #1e906f; }   /* the green as text: the same hue lighter, 4.51:1 on the ground (the green is 3.37:1) */
.cs-bar[data-view="operations"] .cs-tabs { left: calc(50% - 131.5px); }   /* measured, with the same nudge as Design */
   /* measured: the Leading tab centred under the tall tick, with the same nudge as Design */

/* The 404 (404.html): the bead crown on a print as the hero. */
.cs--404 { --cs-accent: var(--cs-gold); }   /* the crown's colour; everything else stays gold */
.hm-hero { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.hm-hero-frame { position: relative; }   /* the print sizes to the crown, so a caption of any length sits below it */
.hm-hero-frame > .cs-shot-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--cs-radius); }
.hm-hero-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--cs-radius); box-shadow: inset 0 0 0 1px var(--cs-hairline), inset 0 0 90px rgba(0, 0, 0, 0.45); }
.hm-hero #crown { position: relative; z-index: 2; display: block; width: calc(100% - 32px); margin: 24px 16px 40px; touch-action: pan-y; }
/* The crown's height is a formula of its width (crown3d.js heightFor, change both together), held here before the
   beads are drawn so nothing below jumps. The canvas is the frame less its side margins; the name goes onto two lines
   below 700px. */
.hm-hero-frame { container-type: inline-size; }
.hm-hero #crown { height: calc((100cqw - 32px) * 0.45 + 114px); }
.cs--404 .hm-hero #crown { height: calc((100cqw - 32px) * 0.3 + 150px); }
@media (min-width: 480px) {
  .hm-hero #crown { height: calc((100cqw - 64px) * 0.45 + 114px); }
  .cs--404 .hm-hero #crown { height: calc((100cqw - 64px) * 0.3 + 150px); }
}
@container (min-width: 764px) { .hm-hero #crown { height: calc((100cqw - 64px) * 0.24 + 98px); } }
canvas[data-gl] { cursor: pointer; }   /* the lit crown (crown3d.js): a click restrings it */
.hm-veil-tag, .ld-tag { position: absolute; z-index: 3; right: 16px; bottom: 14px; padding: 5px 10px; border: 1px solid var(--cs-hairline); border-radius: 999px; background: rgba(20, 16, 14, 0.72); color: var(--cs-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.cs-shot-cap a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ================= Landing (index.html, Figma 313:5688) =================
   Lagos at dusk over the whole screen (lagos.js), and one dock of glass at the bottom. The crop is the <img>'s
   object-position, which lagos.js reads, so the shader and the photograph always line up: centred on wide screens,
   on the pylon on tall ones. */
html:has(.ld-body), .ld-body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #0b1b30; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no double-tap zoom: two quick taps on the dock would zoom the page past its edges */
.ld { position: fixed; inset: 0; }
.ld-scene { position: absolute; inset: 0; overflow: hidden; background: #0b1b30; cursor: pointer; touch-action: none; isolation: isolate; }   /* the page never scrolls: a finger drags ripples. Isolated, the scene is one flat layer to the glass above it */
.ld-img, .ld-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ld-img { object-fit: cover; object-position: 50% 50%; }
@media (max-aspect-ratio: 1 / 1) { .ld-img { object-position: 72% 50%; } }
.ld-gl { opacity: 0; transition: opacity 0.8s ease; }
.ld-gl.is-on { opacity: 1; }
.ld-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ld.is-ready .ld-scene::after { display: none; }   /* with WebGL the grain is drawn in the scene itself: a blended layer over the live canvas left stale patches in the frosted glass above it */
.ld-tag { top: calc(68px + env(safe-area-inset-top)); right: calc(24px + env(safe-area-inset-right)); bottom: auto; }   /* under Lagos, NG */

/* The frame of the still: BA top left, the place top right, and the line directly above the dock. All three
   ease out with the dock on Immerse, and the line steps aside while the menu or the show's caption is open. */
.ld-top { position: fixed; z-index: 10; top: calc(20px + env(safe-area-inset-top)); left: calc(24px + env(safe-area-inset-left)); right: calc(24px + env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ld-logo { pointer-events: auto; font-size: 22px; font-weight: 800; line-height: 28px; letter-spacing: -0.02em; color: var(--cs-cream); text-decoration: none; text-shadow: 0 1px 16px rgba(4, 8, 20, 0.6); }
.ld-place { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--cs-gold); text-shadow: 0 1px 12px rgba(4, 8, 20, 0.6); }
/* The place, and under it the time there, live: Lagos time (West Africa Time), whatever the visitor's own */
.ld-top { align-items: flex-start; }
.ld-where { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 6px; }   /* Lagos, NG level with the middle of BA, as before */
.ld-clock { display: flex; align-items: baseline; gap: 6px; margin: 0; font-family: "Geist", var(--cs-font); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--cs-cream); text-shadow: 0 1px 12px rgba(4, 8, 20, 0.6); transition: color 1.2s ease, text-shadow 1.2s ease; }
.ld-clock[hidden] { display: none; }
.ld-clock-zone { font-family: var(--cs-font); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; color: var(--cs-gold); opacity: 0.85; transition: color 1.2s ease; }
.ld-weather { display: flex; gap: 6px; font-family: var(--cs-font); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); opacity: 0.85; transition: color 1.2s ease; }
.ld-weather[hidden] { display: none; }
html[data-time="day"] .ld-clock, html[data-time="day"] .ld-clock-zone, html[data-time="day"] .ld-weather { color: #0b1b30; text-shadow: none; }
.ld-title { --ld-dock-h: 65px; position: fixed; z-index: 9; left: 50%; bottom: calc(clamp(24px, 13vh, 133px) + env(safe-area-inset-bottom) + var(--ld-dock-h) + 28px); width: min(760px, calc(100vw - 32px)); margin: 0; font-size: clamp(22px, 1.1rem + 1.4vw, 38px); font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: rgba(245, 230, 211, 0.9); text-shadow: 0 2px 24px rgba(4, 8, 20, 0.65); pointer-events: none; transform: translateX(-50%); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ld-title em { font-style: italic; font-weight: 500; color: var(--cs-cream); }
@media (min-width: 600px) { .ld-title-line { display: block; } }   /* the claim on its own line, under the name and the role */
.is-immersed .ld-title, .has-menu .ld-title { opacity: 0; transform: translate(-50%, 12px); }
.is-immersed .ld-top { opacity: 0; transform: translateY(-8px); }
.is-immersed .ld-logo { pointer-events: none; }

/* By day (the visitor's clock, from the script in index.html's head; Figma 331:406): BA and Lagos, NG turn dark on
   the bright sky, and a soft shade under the line and the dock keeps them clear of the water and the jetty. Notes
   that differ between day and night carry .ld-by-day or .ld-at-night. */
html:not([data-time="day"]) .ld-by-day, html[data-time="day"] .ld-at-night { display: none; }
html[data-wet] .ld-when-dry, html:not([data-wet]) .ld-when-wet { display: none; }   /* rain in Lagos (weather.js): the drones are grounded */
.ld-logo, .ld-place { transition: color 1.2s ease, text-shadow 1.2s ease; }
html[data-time="day"] .ld-logo, html[data-time="day"] .ld-place { color: #0b1b30; text-shadow: none; }
.ld-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 16, 28, 0) 55%, rgba(8, 16, 28, 0.22) 75%, rgba(8, 16, 28, 0.42)); opacity: 0; transition: opacity 1.2s ease; }
html[data-time="day"] .ld-body:not(.is-immersed) .ld-scene::before { opacity: 1; }   /* immersed, the line and the dock have gone, and so has the shade */
html[data-time="day"] .ld-scene { background: linear-gradient(#74a4d1, #aec8dc 30%, #989085 50%, #4a4941 54%, #8999a2 60%, #5f655c 80%, #5b5c50); }   /* the day's colours while the photograph loads */
.ld-tag.is-on, .hm-veil-tag.is-on { opacity: 1; transform: none; }

/* The dock: glass on glass, as in Figma (the dock at 30% of #0b0e18, each link the same again) */
.ld-nav, .ld-exit { --ld-glass: rgba(11, 14, 24, 0.3); --ld-edge: rgba(18, 22, 35, 0.5); }
/* The dock and the menu are siblings in one positioned wrapper: a backdrop blur nested inside another one only blurs its parent */
.ld-nav { position: fixed; z-index: 10; left: 50%; bottom: calc(clamp(24px, 13vh, 133px) + env(safe-area-inset-bottom)); transform: translateX(-50%); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ld-dock { position: relative; display: flex; align-items: stretch; gap: 16px; padding: 8px; border: 1px solid var(--ld-edge); border-radius: 24px; background: var(--ld-glass); -webkit-backdrop-filter: blur(17px) saturate(1.4); backdrop-filter: blur(17px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.ld-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--ld-edge); border-radius: 16px; background: var(--ld-glass); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); white-space: nowrap; transition: background 0.2s ease; }
.ld-link--group { gap: 16px; }
.ld-link--group a, .ld-immerse { color: inherit; letter-spacing: inherit; text-decoration: none; opacity: 0.9; transition: opacity 0.15s ease; }
.ld-link--group a:hover, .ld-immerse:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button.ld-link:hover { background: rgba(226, 194, 153, 0.1); }
.ld-divider { position: relative; flex: none; width: 1px; height: 21px; }
.ld-divider img { position: absolute; top: 50%; left: 50%; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.ld-caret { transition: transform 0.25s ease; }
.ld-link--menu[aria-expanded="true"] .ld-caret { transform: rotate(180deg); }
.ld-link--icon { padding: 12px; }

/* The projects menu opens above the dock, in the same glass, a little denser so the names read over the water */
.ld-menu { position: absolute; left: 0; bottom: calc(100% + 8px); max-height: calc(100dvh - clamp(24px, 13vh, 133px) - 90px); overflow-y: auto; overscroll-behavior: contain; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--ld-edge); border-radius: 24px; background: rgba(11, 14, 24, 0.62); -webkit-backdrop-filter: blur(17px) saturate(1.4); backdrop-filter: blur(17px) saturate(1.4); opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ld-menu[hidden], .ld-exit[hidden] { display: none; }   /* the display above would otherwise beat the hidden attribute */
/* The music button, a link to the studio: the same glass as the other buttons, and the pressed tint on the studio's own page */
a.ld-link:hover, .ld-music[aria-current] { background: rgba(226, 194, 153, 0.1); }
/* The ON AIR light, in the bars of About's reading and the studio */
.ld-onair-light { flex: none; padding: 3px 7px; border-radius: 6px; background: #e0402b; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; font-weight: 500; color: #fff; }
.ld-menu.is-open { opacity: 1; transform: none; }
.ld-menu-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 16px; color: var(--cs-gold); text-decoration: none; }
.ld-menu-item:hover, .ld-menu-item:focus-visible { background: rgba(226, 194, 153, 0.1); outline-offset: -1px; }
.ld-menu-item[aria-current] { background: rgba(226, 194, 153, 0.14); }   /* the page you're on (All work, on the Work page): the dock's pressed tint, as the pill behind ABOUT on About */
.ld-menu-name { font-size: 16px; line-height: 20px; }
.ld-menu-tag { font-size: 11px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cs-muted); }
.ld-menu-item--all { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--cs-hairline); border-radius: 0 0 16px 16px; }
.ld-menu-item--all .ld-menu-name { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Immerse: the dock goes, and one quiet way back stays */
.ld-exit { position: fixed; z-index: 10; left: 50%; bottom: calc(clamp(24px, 13vh, 133px) + 9px + env(safe-area-inset-bottom)); display: flex; gap: 8px; opacity: 0; transform: translateX(-50%); transition: opacity 0.6s ease 0.3s; }
.ld-exit.is-on { opacity: 0.45; }
.ld-exit.is-on:hover, .ld-exit.is-on:focus-within { opacity: 1; transition-delay: 0s; }
.ld-pill { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid var(--ld-edge); border-radius: 16px; background: var(--ld-glass); -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); transition: background 0.2s ease; }
.ld-pill:hover { background: rgba(226, 194, 153, 0.1); }
.ld-mute { padding: 12px; }
.ld-mute .ld-mute-off { display: none; }
.ld-mute[aria-pressed="false"] .ld-mute-wave { display: none; }
.ld-mute[aria-pressed="false"] .ld-mute-off { display: block; }
.ld-exit:has(.ld-mute[aria-pressed="false"]) { opacity: 0.8; }   /* muted: the switch stays easy to find */
.is-immersed .ld-nav { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
.ld-scene { cursor: default; }
.is-immersed .ld-scene { cursor: pointer; }

/* Immerse: the note on what to do, top centre, in the dock's glass; it goes after a few seconds or once the lights change */
.ld-notice { position: fixed; z-index: 11; top: calc(clamp(20px, 7vh, 72px) + env(safe-area-inset-top)); left: 50%; width: min(420px, calc(100vw - 32px)); padding: 20px 24px; border: 1px solid var(--ld-edge); border-radius: 24px; background: rgba(11, 14, 24, 0.55); -webkit-backdrop-filter: blur(17px) saturate(1.4); backdrop-filter: blur(17px) saturate(1.4); color: var(--cs-gold); opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.ld-notice { --ld-edge: rgba(18, 22, 35, 0.5); }
.ld-notice.is-on { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.35s; }
.ld-notice-kicker { margin: 0 0 6px; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; color: var(--cs-muted); }
.ld-notice-title { margin: 0 0 14px; font-size: 18px; line-height: 24px; text-wrap: balance; }
.ld-notice-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--cs-cream); }
.ld-notice-list li { display: flex; gap: 12px; }
.ld-notice-key { flex: none; width: 52px; font-size: 11px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); }
.ld-hint-touch { display: none; }
@media (pointer: coarse) { .ld-hint-fine { display: none; } .ld-hint-touch { display: inline; } }
.ld-notice-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--cs-hairline); font-size: 12px; line-height: 16px; color: var(--cs-muted); }

/* The marker on the pylon: a pulsing light that says where the bridge's lights are changed */
.ld-spot { position: fixed; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 0; transform: translate(-7px, -50%); opacity: 0; transition: opacity 0.6s ease 0.6s; }
.ld-spot.is-on { opacity: 1; }
.ld-spot-dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #f4e8d0; box-shadow: 0 0 0 3px rgba(244, 232, 208, 0.25), 0 0 18px 4px rgba(170, 230, 255, 0.55); }
.ld-spot-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(244, 232, 208, 0.8); }
.ld-spot-label { padding: 6px 12px; border: 1px solid rgba(18, 22, 35, 0.5); border-radius: 999px; background: rgba(11, 14, 24, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.ld-spot:hover .ld-spot-label, .ld-spot:focus-visible .ld-spot-label, .ld-spot.is-hinting .ld-spot-label { opacity: 1; transform: none; }
.ld-spot:focus-visible { outline: 0; }
.ld-spot:focus-visible .ld-spot-dot { outline: 1px solid var(--cs-gold); outline-offset: 5px; }
.ld-notice[hidden], .ld-spot[hidden] { display: none; }
.ld-spot.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.ld-spot.is-left .ld-spot-label { transform: translateX(4px); }
.ld-spot.is-left:hover .ld-spot-label, .ld-spot.is-left:focus-visible .ld-spot-label, .ld-spot.is-left.is-hinting .ld-spot-label { transform: none; }
@media (max-width: 599px) {
  .ld-notice { top: calc(16px + env(safe-area-inset-top)); padding: 16px 18px; border-radius: 20px; }
  .ld-notice-title { margin-bottom: 10px; font-size: 16px; line-height: 22px; }
  .ld-notice-list { font-size: 13px; line-height: 18px; }
  .ld-notice-key { width: 48px; line-height: 18px; }
  .ld-notice-foot { margin-top: 10px; padding-top: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ld-spot-dot::after { animation: ld-ping 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  @keyframes ld-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
  .ld-immerse.is-inviting { animation: ld-invite 3.2s ease-in-out 2s infinite; }
  @keyframes ld-invite { 0%, 60%, 100% { text-shadow: none; opacity: 0.9; } 30% { text-shadow: 0 0 10px rgba(226, 194, 153, 0.9); opacity: 1; } }
}

@media (prefers-reduced-motion: no-preference) {
  .ld-nav { animation: ld-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards; }
  .ld-title { animation: ld-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; }
  .ld-top { animation: ld-fade 0.9s ease 0.2s backwards; }
  @keyframes ld-fade { from { opacity: 0; } }   /* backwards, not both: an opacity animation still filling makes the dock a backdrop root, and the glass stops blurring */
  @keyframes ld-rise { from { opacity: 0; transform: translate(-50%, 16px); } }
}
@media (prefers-reduced-motion: reduce) { .ld-title, .ld-top, .ld-nav, .ld-menu, .ld-exit, .ld-caret, .ld-tag, .hm-veil-tag, .ld-notice, .ld-spot, .ld-spot-label { transition: none; } .ld-menu, .ld-tag, .hm-veil-tag { transform: none; } .ld-notice { transform: translate(-50%, 0); } }

@media (max-height: 520px) { .ld-title { font-size: clamp(18px, 3.4vh + 4px, 24px); bottom: calc(clamp(24px, 13vh, 133px) + env(safe-area-inset-bottom) + var(--ld-dock-h) + 14px); } }

/* Phones: the dock as in Figma is 441px wide; below 480 it tightens so it always fits with a margin */
@media (max-width: 479px) {   /* every phone, the largest (440 wide) included: the full dock is 441 wide and would touch the edges */
  .ld-title { --ld-dock-h: 57px; width: calc(100vw - 48px); bottom: calc(clamp(24px, 13vh, 133px) + env(safe-area-inset-bottom) + var(--ld-dock-h) + 20px); }
  .ld-top { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); top: calc(16px + env(safe-area-inset-top)); }
  .ld-dock { gap: 6px; padding: 6px; border-radius: 20px; }
  .ld-link { padding: 10px; font-size: 11px; border-radius: 14px; }
  .ld-link--group { gap: 8px; }
  .ld-link--menu { gap: 6px; }
}
@media (max-width: 379px) {
  .ld-title { --ld-dock-h: 55px; }
  .ld-link { padding: 9px 8px; font-size: 10px; letter-spacing: 0.02em; }
  .ld-link--group { gap: 6px; }
  .ld-link--menu { gap: 4px; }
}
@media (max-width: 339px) {
  .ld-title { --ld-dock-h: 51px; }
  .ld-dock { gap: 4px; padding: 4px; border-radius: 18px; }
  .ld-link { padding: 9px 6px; }
  .ld-link--group { gap: 5px; }
}
.hm-hero .cs-shot-cap { position: relative; z-index: 2; }
.hm-hero .cs-shot-cap span { flex: none; }
/* Selected work (work.html): each study is a still on its own print, then its name, my part and year, and one
   line ending on the outcome. One under another, in About's column of 560. */
.cs-shots.hm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-work { color: inherit; }
.hm-work-text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hm-work-name { font-size: 20px; line-height: 24px; font-weight: 500; color: var(--cs-cream); }
.hm-work-desc { font-size: 14px; line-height: 20px; color: var(--cs-muted); }
.hm-open { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); opacity: 0.7; transition: opacity 0.15s ease; }
.hm-open img { width: 16px; height: 16px; }
.hm-work:hover .hm-open, .hm-work:focus-visible .hm-open { opacity: 1; }
.hm-work:hover .cs-shot-screen, .hm-work:hover .cs-shot-phone { transform: translate(-50%, -50%) scale(1.01); }
.hm-work:hover .cs-shot-phone { transform: translateX(-50%) scale(1.01); }
.hm-pending { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-top: 24px; border-top: 1px solid var(--cs-hairline); }   /* Bani and this site: no study yet, so no still */
@media (min-width: 720px) { .cs-shots.hm-grid { gap: 48px; } }
.hm-foot-links { display: inline-flex; gap: 24px; }

/* Live hero: a real site, rendered full width and scaled to fit over the fallback image */
.cs-hero.has-live picture { visibility: hidden; }
.cs-hero.has-live { position: relative; }
.cs-live { position: absolute; inset: 24px; overflow: hidden; background: var(--cs-panel); }
.cs-live iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.cs-live-shield { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.cs-live.is-active .cs-live-shield { display: none; }

/* Intro */
.cs-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; width: 100%; padding-block: 32px; text-align: center; }
.cs-title-block { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.cs-title { font-size: 36px; line-height: 36px; font-weight: 400; color: var(--cs-title); }
.cs-title em { font-weight: 500; font-style: italic; }
.cs-tags { font-size: 14px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); text-wrap: balance; }   /* wraps on narrow phones (nowrap on desktop) */
.cs-body { width: 100%; font-size: 16px; line-height: 24px; color: var(--cs-cream); }
.cs-body p + p { margin-top: 16px; }

/* Year / role / outcome */
.cs-meta { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.cs-meta-item { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; width: 100%; }
.cs-meta-item h2 { font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: 400; color: var(--cs-gold); white-space: nowrap; }
.cs-meta-item p { font-size: 16px; line-height: 24px; color: var(--cs-cream); }
.cs-meta-link { font-style: italic; }   /* Figma 190:4499: the store address, Host Grotesk Italic 16/20 */
.cs-side { display: none; }

/* Card: the 404's list of the studies (the studies themselves are plain sections now, .cs-flow) */
.cs-card { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; margin-block: 32px; padding: 32px 16px; background: var(--cs-panel); border-radius: var(--cs-radius); box-shadow: inset 0 0 0 1px var(--cs-hairline); overflow: clip; }
.cs-card-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }

.cs-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-block: 12px; }
.cs-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.cs-step-text { order: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cs-step-num { font-size: 14px; line-height: 16px; color: var(--cs-cream); }
.cs-step-name { font-size: 16px; line-height: 22px; color: #a4a09a; white-space: normal; min-width: 0; }   /* a long step wraps instead of running into the next column */
.cs-step-bar { order: 2; width: 4px; height: 40px; background: var(--cs-accent); }

.cs-livebars { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.cs-livebar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; padding: 12px; background: #0f1116; overflow: hidden; }
.cs-livebar-title { font-family: "Geist", var(--cs-font); font-weight: 500; font-size: 14px; line-height: 20px; color: #05a36f; }
.cs-livebar-count { font-size: 14px; line-height: 16px; color: #c0c1c2; white-space: nowrap; }
.cs-livebar-bars { position: relative; height: 24px; }
.cs-livebar-row { display: flex; gap: 4px; align-items: center; height: 24px; }
.cs-livebar-row i { flex: none; width: 1px; height: 24px; background: #d9d9d9; }
.cs-livebar-row--fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0); }
.cs-livebar-row--fill i { background: #05a36f; }
/* Still matching: the green sweeps across, snaps back, repeats. One animated property. */
@keyframes cs-matchsweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cs-livebar.is-sweeping .cs-livebar-row--fill { animation: cs-matchsweep 1.5s linear infinite; }
/* With motion off, hold the frame Figma shows: 46 of 67 bars green */
@media (prefers-reduced-motion: reduce) { .cs-livebar.is-sweeping .cs-livebar-row--fill { animation: none; clip-path: inset(0 calc(100% - 68.6%) 0 0); } }

/* Three steps a row (the 404's card of the studies): the step's name over its line, a bar above them on a wide
   screen and down their left on a phone. */
.cs-steps--three .cs-step-num { font-size: 16px; line-height: 24px; font-weight: 500; white-space: normal; }
.cs-steps--three .cs-step-name { font-size: 14px; line-height: 20px; color: var(--cs-muted); }
/* On phones these steps carry a line of description, so the bar runs down the left of its text */
.cs-steps--three .cs-step { flex-direction: row; align-items: stretch; gap: 12px; }
.cs-steps--three .cs-step-bar { order: 1; width: 4px; height: auto; align-self: stretch; }
.cs-steps--three .cs-step-text { order: 2; flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
.cs--luciana { --cs-accent: #b3202a; --cs-accent-text: #d95250; }   /* the red as text: the same hue lighter, 4.51:1 on the ground (the red is 2.70:1) */

/* Sections */
.cs-label { font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: 400; color: var(--cs-gold); }   /* long labels wrap below 375 rather than push the page sideways (nowrap on desktop) */



/* App screens */
.cs-screens { position: relative; width: 100%; height: 831px; overflow: clip; border-radius: var(--cs-radius); background-image: linear-gradient(115.25422752137786deg, var(--cs-screens-gradient)); }
.cs-wave { position: absolute; left: calc(-351px - 2628px * 0.0126); top: calc(312.25px - 424.5px * 0.0924); width: calc(2628px * 1.0332); height: calc(424.5px * 1.2496); max-width: none; }
.cs-stars--desktop { display: none; }
.cs-stars-wrap { position: absolute; left: 50%; top: 0.09px; width: 392px; height: 831px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.cs-stars--mobile { flex: none; width: 831px; height: 392px; max-width: none; transform: rotate(-90deg); }
.cs-phone, .cs-device { position: absolute; left: 50%; top: 70.09px; width: 232px; height: 490.769px; transform: translateX(-50%); object-fit: cover; }
.cs-screen-text { position: absolute; left: calc(50% - 0.5px); top: 584px; width: 357px; max-width: calc(100% - 35px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; text-align: center; color: #fff; }
.cs-screen-text h3 { font-size: 20px; line-height: 20px; font-weight: 400; }
.cs-screen-text p { font-size: 14px; line-height: 20px; }
.cs-screen-nav { position: absolute; right: 17px; top: 752px; display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.cs-slide-btn { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 1000px; background: var(--cs-violet-btn); }
.cs-slide-btn[hidden] { display: none; }
.cs-slide-btn img { width: 16px; height: 16px; }
.cs-slide-btn:focus-visible { outline-color: #fff; }
.cs-phone, .cs-device, .cs-screen-text { transition: opacity 0.18s ease; }
.cs-screens.is-changing .cs-phone, .cs-screens.is-changing .cs-device, .cs-screens.is-changing .cs-screen-text { opacity: 0; }
.cs-screens { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .cs-phone, .cs-device, .cs-screen-text { transition: none; } }

/* A recording in the plain phone outline from the earlier Ansarr page (.phone in site.css:
   7px #0E1116 border, 34px radius, 9:20, at 340px wide), scaled to this slot's height. */
.cs-screens .cs-device { width: auto; aspect-ratio: 9 / 20; border: 4.5px solid #0e1116; border-radius: 22px; overflow: hidden; background: #0e1116; }
.cs-device-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-screens--video .cs-screen-nav { right: 18px; }
.cs-screens--video .cs-slide-btn { padding: 8px; }

.cs-body p { text-wrap: pretty; }   /* no single word left on a last line */

/* Middle scroll: hidden on mobile, where there is no second column to divide */
.cs-scroll { display: none; }

/* ============ Tablet and small laptops (480 to 1199): one column, wider than a phone ============
   The mobile ruler keeps its phone geometry as a centred strip, so the tabs still sit under the tall tick. */
@media (min-width: 480px) and (max-width: 1199px) {
  .cs { max-width: 760px; }
  .cs-ticks--mobile { width: 459px; }   /* placed as on a 440 phone, centred (margin-left from the phone rule) */
  .cs-col { padding-inline: 32px; }
  .cs-title-block, .cs-body, .cs-meta--inline { max-width: 560px; }
  .cs-title { font-size: 40px; line-height: 40px; }
  .cs-steps { flex-direction: row; gap: 12px; }
  .cs-step { flex: 1 1 0; min-width: 0; gap: 12px; }
  .cs-step-bar { order: 1; width: 100%; height: 4px; }
  .cs-step-text { order: 2; flex-direction: column; align-items: flex-start; }
  .cs-steps--three .cs-step { flex-direction: column; align-items: flex-start; }
  .cs-steps--three .cs-step-bar { width: 100%; height: 4px; align-self: auto; }
  .cs-shot-frame.cs-shot-frame--phones, .cs-shot-frame.cs-shot-frame--film { aspect-ratio: 16 / 10; }
  .cs-hero--print picture { display: flex; justify-content: center; }
  .cs-hero--print picture img { width: auto; max-width: 100%; max-height: 520px; }
  .hm-hero #crown { margin: 32px 32px 48px; width: calc(100% - 64px); }
}

/* ================= Desktop (Figma 87:347, 1440 wide) ================= */
@media (min-width: 1200px) {
  .cs { max-width: 1440px; display: flex; align-items: flex-start; }
  .cs-main { flex: 1 1 0; min-width: 0; }

  .cs-bar { top: 0; height: 140px; margin-left: 2px; margin-bottom: 0; overflow: visible; }
  html { scroll-padding-top: 152px; }
  .cs-tags, .cs-label { white-space: nowrap; }
  .cs-ticks { top: 32px; justify-content: center; }
  .cs-ticks--mobile { display: none; }
  .cs-ticks--desktop { display: flex; }
  .cs-tabs { top: 68px; left: calc(50% - 49px); gap: 16px; }
  .cs-sound { right: 0; top: 76px; }
  .cs-bar[data-view="engineering"] .cs-tabs { left: calc(50% - 160.5px); }
  .cs-bar[data-view="leading"] .cs-tabs { left: calc(50% - 142.5px); }
  .cs-bar[data-view="operations"] .cs-tabs { left: calc(50% - 153.5px); }
  .hm-hero #crown { margin: 32px 32px 48px; width: calc(100% - 64px); }
  .cs--zart .cs-hero picture img { height: 100%; }
  .cs-shot-frame.cs-shot-frame--phones, .cs-shot-frame.cs-shot-frame--film { aspect-ratio: 16 / 10; }
  .cs-tab { font-size: 16px; }

  .cs-col { padding-inline: 50px 2px; padding-bottom: 11px; }

  .cs-hero { height: 626px; padding: 32px; display: flex; align-items: flex-start; }
  .cs-hero picture { flex: 1 0 0; min-width: 0; height: 562px; }
  .cs-hero img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }

  .cs-live { inset: 32px; }
  .cs-hero--print picture { display: flex; justify-content: center; }
  .cs-hero--print picture img { width: auto; max-width: 100%; }

  .cs-title-block { width: 534px; }
  .cs-title { font-size: 40px; line-height: 40px; }
  .cs-body { width: 560px; }
  .cs-meta--inline { display: none; }

  .cs-steps { flex-direction: row; gap: 12px; }
  .cs-step { flex: 1 1 0; min-width: 0; gap: 12px; }
  .cs-step-bar { order: 1; width: 100%; height: 4px; }
  .cs-step-text { order: 2; flex-direction: column; align-items: flex-start; }
  .cs-steps--three .cs-step { flex-direction: column; align-items: flex-start; }
  .cs-steps--three .cs-step-bar { width: 100%; height: 4px; align-self: auto; }

  .cs-screens .cs-device { width: auto; border-width: 5.3px; border-radius: 25.6px; }
  .cs-screens--video .cs-screen-text { top: 254px; transform: none; }
  .cs-screens--video .cs-screen-nav { right: 56px; }



  .cs-screens { max-width: 938px; height: 626px; background-image: linear-gradient(146.28174960393062deg, var(--cs-screens-gradient)); }
  .cs-stars-wrap { display: none; }
  .cs-stars--desktop { display: block; position: absolute; left: 50%; top: 0; width: 938px; height: 626px; max-width: none; transform: translateX(-50%); }
  .cs-phone, .cs-device { left: max(5.97%, calc(50% - 278.5px - 134.5px)); top: calc(50% - 0.32px); width: 269px; height: 569.356px; transform: translateY(-50%); }
  .cs-screen-text { left: max(43%, 345px); top: 50%; width: min(479px, calc(100% - max(43%, 345px) - 40px)); max-width: none; transform: translateY(-50%); text-align: left; }
  .cs-screen-text h3 { font-size: 32px; line-height: 40px; }
  .cs-screen-text p { font-size: 16px; line-height: 22px; }
  .cs-screen-nav { right: 56px; top: auto; bottom: 23px; }
  .cs-slide-btn { padding: 8px; }

  /* Right-hand details column: 450 wide, starts 50 from the top with 124 of padding */
  /* Middle scroll. Zero-width in the row so the Figma column widths (988 + 450) stay exact;
     the track hangs into the details column's 32px left padding. */
  .cs-scroll { display: block; flex: none; width: 0; align-self: flex-start; position: sticky; top: 0; height: 100vh; z-index: 5; }
  .cs-scroll-track { position: absolute; left: 9.5px; top: 8px; bottom: 0; width: 11px; border-radius: 1000px; background: rgba(226, 194, 153, 0.09); cursor: pointer;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%); }
  .cs-scroll-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 72px; border-radius: 1000px; background: rgba(226, 194, 153, 0.42); cursor: grab; touch-action: none; transition: background-color 0.15s ease; will-change: transform; }
  .cs-scroll-thumb:hover { background: rgba(226, 194, 153, 0.62); }
  .cs-scroll.is-dragging .cs-scroll-thumb { background: var(--cs-gold); cursor: grabbing; }
  /* It replaces the browser's own scrollbar, but only once the script is running */
  html.has-cs-scroll { scrollbar-width: none; }
  html.has-cs-scroll::-webkit-scrollbar { display: none; }

  /* Pinned: stays put while the left column scrolls (Figma: top 50, bottom 56) */
  .cs-side { display: flex; flex: none; width: 450px; position: sticky; top: 50px; align-self: flex-start; max-height: calc(100vh - 106px); overflow: clip; margin-top: 50px; padding: 124px 50px 32px 0; align-items: flex-start; justify-content: center; }
  .cs-side .cs-meta { padding-left: 32px; }
  .cs-side .cs-meta-item { align-items: flex-start; }
  .cs-side .cs-meta-item h2 { text-align: center; }
}

/* Selected screens as stills (luciana-study.html): two or three desktop screens, one after the
   other, each large on a dithered print of the project's own photo (.cs-shot-bg, an <img> so the
   path resolves from the page). Each still fades up as it scrolls into view (case.js). */
.cs-shots { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.cs-shot { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cs-shot-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: clip; border-radius: 12px; background: var(--cs-ground); box-shadow: inset 0 0 0 1px rgba(226, 194, 153, 0.12); }
.cs-shot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-shot-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(226, 194, 153, 0.12), inset 0 0 90px rgba(0, 0, 0, 0.45); }
.cs-shot-screen { position: absolute; z-index: 2; left: 50%; top: 50%; width: 88%; height: auto; transform: translate(-50%, -50%); border-radius: 10px;
  border: 1px solid rgba(245, 230, 211, 0.28); box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.55), 0 40px 70px -24px rgba(0, 0, 0, 0.8); }
.cs-shots--video .cs-shot-screen { background: #0e1116; }
.cs-shot-cap { display: flex; gap: 12px; font-size: 14px; line-height: 20px; color: var(--cs-gold); }
.cs-shot-cap span { opacity: 0.6; }
@media (min-width: 1200px) {
  .cs-shots { max-width: 938px; }
  .cs-shot-frame { aspect-ratio: 16 / 10; border-radius: 14px; }
  .cs-shot-screen { width: 82%; border-radius: 12px; }
}

/* Not found (404.html): the home template, with the beads spelling 404 and a card of the four
   studies, each bar in that study's own colour. The whole step is the link. */
.cs--404 .cs-title { text-wrap: balance; }
.cs--404 .cs-step { position: relative; }
.cs--404 .cs-step-num a::after { content: ""; position: absolute; inset: 0; }
.cs--404 .cs-step-num a:focus-visible { outline: 0; }
.cs--404 .cs-step:has(a:focus-visible) { outline: 1px solid var(--cs-gold); outline-offset: 4px; border-radius: 4px; }
.cs--404 .cs-step:hover .cs-step-num { text-decoration: underline; text-underline-offset: 3px; }
.nf-ansarr .cs-step-bar { background: #1c5cf2; }
.nf-luciana .cs-step-bar { background: #b3202a; }
.nf-zart .cs-step-bar { background: #fa4812; }
.nf-ea .cs-step-bar { background: #007a5c; }

/* ================= Section marks, page transitions ================= */



/* Split headings: each word rises on its own (case.js); the heading keeps its full text as its name */
.cs-w { display: inline-block; }

/* Section marks on the ruler: a taller tick for each section. Lit in the page's colour once you
   have passed it; each has a button over it that jumps to the section, labelled on hover and focus. */
.cs { --cs-mark-lit: var(--cs-accent); }
.cs-ticks i.is-mark { height: 24px; background: var(--cs-cream); }
.cs-ticks i.is-mark.is-read { background: var(--cs-mark-lit); }
.cs-marks { position: absolute; inset: 0; pointer-events: none; }
.cs-mark { position: absolute; width: 20px; height: 32px; margin-left: -10px; pointer-events: auto; border-radius: 4px; }
.cs-mark span { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 4px 10px; border-radius: 1000px; background: var(--cs-tab); color: var(--cs-cream); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.cs-mark:hover span, .cs-mark:focus-visible span { opacity: 1; }
.cs-mark:focus-visible { outline-offset: 0; }
@media (max-width: 1199px) { .cs-mark span { bottom: auto; top: calc(100% + 4px); z-index: 2; } }   /* phones and tablets: the band above the ruler scrolls away, so the label shows below */

/* Page transitions (between pages of this site, where the browser supports them): the ruler stays put and a
   study's still becomes that study's hero. A plain page load everywhere else, and with reduced motion. */
/* The fade between pages is switched on in each page's own <head>, first thing (see the note there). The dock is one
   element on the landing and the About page, so it slides from where it was to where it is (its rise is skipped then).
   The name is on the dock itself, not on .ld-nav round it and the menu: a named element is a backdrop root, so there
   the menu's glass and the dock's blurred nothing and showed the page through them, sharp (the studio's desk, most). */
.ld-dock { view-transition-name: ld-dock; }
.ld-vt-in .ld-nav { animation: none; }
.cs-bar { view-transition-name: cs-ruler; }
.hm-work .cs-shot-frame, .cs-hero { view-transition-class: study; }
.hm-work[href="case-study.html"] .cs-shot-frame, .cs--ansarr .cs-hero { view-transition-name: study-ansarr; }
.hm-work[href="luciana-study.html"] .cs-shot-frame, .cs--luciana .cs-hero { view-transition-name: study-luciana; }
.hm-work[href="zart-study.html"] .cs-shot-frame, .cs--zart .cs-hero { view-transition-name: study-zart; }
.hm-work[href="ea-study.html"] .cs-shot-frame, .cs--ea .cs-hero { view-transition-name: study-ea; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(*.study), ::view-transition-new(*.study) { height: 100%; object-fit: cover; }

/* Lenis (smooth wheel scrolling on desktop; case.js turns it on only for a mouse or trackpad) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ================= About (about.html, Figma 355:6077) =================
   One column of 560 on the warm ground: the name and the story, where I grew up and trained, the experience, and a
   quieter close. The landing's dock stays fixed at the bottom of the window, at the landing's own height so it doesn't
   move between the two (low on phones, where this is a page to read), at 56% like the close above it; it comes up to full on hover or focus (on the dock itself: an opacity on
   .ld-nav would make it a backdrop root and stop the glass blurring what's behind it). The text fades into the ground
   just above the dock, so the dock always sits on plain ground and nothing shows through its glass. At the end of
   the page the colophon stops 112 above the dock, as in Figma. */
.ab-body { --ab-dock-at: calc(clamp(24px, 13vh, 133px) + env(safe-area-inset-bottom)); --ab-dock-h: 65px; }
.ab { display: flex; flex-direction: column; gap: 64px; width: min(560px, 100% - 48px); margin: 0 auto; padding: 100px 0 calc(112px + var(--ab-dock-h) + var(--ab-dock-at)); }
.ab-body::after { content: ""; position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; height: calc(var(--ab-dock-at) + var(--ab-dock-h) + 56px); background: linear-gradient(rgba(26, 22, 20, 0), var(--cs-ground) 40px); pointer-events: none; }
.ab-sec { display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 24px; color: var(--cs-cream); }
.ab-head { font-size: 24px; font-weight: 400; line-height: 24px; color: var(--cs-gold); text-wrap: balance; }
.ab-name { color: rgba(226, 194, 153, 0.66); }
.ab-sec--quiet { opacity: 0.56; transition: opacity 0.3s ease; }
.ab-sec--quiet:hover, .ab-sec--quiet:focus-within { opacity: 1; }
.ab-contact { display: flex; flex-direction: column; gap: 16px; }
.ab-links a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.ab-links a:hover, .ab-links a:focus-visible { text-decoration-color: currentColor; }
/* Experience: a row a job, the place on the left and the role and the years on the right, a hairline under each */
.ab-jobs { display: flex; flex-direction: column; gap: 24px; }
.ab-job { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; padding: 24px 0; border-bottom: 1px solid rgba(226, 194, 153, 0.2); font-weight: 500; }
.ab-job-where { flex: none; color: var(--cs-cream); }
.ab-job-what { flex: 1 0 auto; text-align: right; color: var(--cs-gold); }   /* too long to share the line (a phone): the whole of it goes under, still on the right */
.ab-body .ld-nav { bottom: var(--ab-dock-at); }
/* BA, top left and pinned, as on the landing: the way home. On a wide window it sits in the margin beside the
   column; on a narrow one the column runs under it, so the text fades into the ground there, as above the dock. */
/* iPhone Safari (iOS 26) draws the page under its status bar and its floating address bar, and cuts every pinned
   element off at their edges, fades included, so text showed through both. What it does do: carry the colour of a
   pinned, full-width element with a solid background at the top or bottom edge out under the bar. A real element:
   a pseudo-element or a gradient isn't taken up (tried in the simulator). So two thin strips of the ground, which
   read as nothing anywhere else. Above the fades, since Safari looks at whatever is frontmost at the edge. */
.ab-edge { position: fixed; z-index: 11; left: 0; right: 0; height: 8px; background-color: var(--cs-ground); pointer-events: none; }
.ab-edge--top { top: 0; }
.ab-edge--bottom { bottom: 0; }
.ab-home { position: fixed; z-index: 10; top: calc(20px + env(safe-area-inset-top)); left: calc(24px + env(safe-area-inset-left)); }
/* Lagos, now, top right as on the landing: the place, the time there and its sky, which the light on the page follows */
.ab-where { position: fixed; z-index: 10; top: calc(20px + env(safe-area-inset-top)); right: calc(24px + env(safe-area-inset-right)); opacity: 0.72; transition: opacity 0.3s ease; }
.ab-where:hover { opacity: 1; }
/* Lagos through the window (about/window.js), behind the text: by day the light of a window across the page, where
   the sun in Lagos puts it (--ab-sun-x, --ab-sun-skew), dimmer under cloud (--ab-sun-k), swaying a little and coming
   and going as clouds pass; at night the room goes darker (window.js sets the ground) and a reading lamp lights the
   column; and the rain on the glass, a canvas, and a storm's lightning. --ab-day runs from 0 at night to 1 by day. */
.ab-window { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ab-window:not(.is-on) { display: none; }
.ab-window > * { position: absolute; }
.ab-lamp { inset: 0; opacity: calc(1 - var(--ab-day, 1)); background: radial-gradient(max(380px, 46vw) max(320px, 44vh) at 50% 38%, rgba(255, 176, 98, 0.2), rgba(255, 176, 98, 0.13) 38%, rgba(255, 176, 98, 0.05) 70%, rgba(255, 176, 98, 0)); }
/* and past the lamp's pool the words fall into the dark: a shade over the text, clear in the middle, at night only */
.ab-shade { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: calc(1 - var(--ab-day, 1)); background: radial-gradient(max(420px, 60vw) max(360px, 58vh) at 50% 38%, rgba(12, 10, 9, 0) 55%, rgba(12, 10, 9, 0.42)); }
.ab-window:not(.is-on) + .ab-shade { display: none; }
.ab-daylight { inset: 0; -webkit-mask-image: linear-gradient(#000 45%, transparent 80%); mask-image: linear-gradient(#000 45%, transparent 80%); }   /* gone before the ground above the dock */
.ab-sun { position: absolute; top: -6%; left: var(--ab-sun-x, 60%); width: min(86vmax, 1240px); aspect-ratio: 10 / 11; color: var(--ab-sun-color, #fff0d8); opacity: calc(var(--ab-day, 1) * var(--ab-sun-k, 1) * var(--ab-sun-t, 1)); transform: translateX(-50%) skewX(var(--ab-sun-skew, -12deg)); transition: opacity 6s ease, left 60s linear, transform 60s linear; }
.ab-sun-drift { width: 100%; height: 100%; animation: ab-sun-sway 23s ease-in-out infinite alternate; }
.ab-sun svg { display: block; width: 100%; height: 100%; }
.ab-window.is-clouded .ab-sun svg { animation: ab-sun-clouds 47s ease-in-out infinite; }
@keyframes ab-sun-sway { from { transform: translate(-0.8%, -0.4%) rotate(-0.35deg); } to { transform: translate(0.8%, 0.5%) rotate(0.35deg); } }
@keyframes ab-sun-clouds { 0%, 100% { opacity: 1; } 30% { opacity: 0.45; } 42% { opacity: 0.8; } 70% { opacity: 0.35; } }
.ab-rain { inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.ab-rain[hidden] { display: none; }
.ab-flash { inset: 0; background: rgba(214, 224, 255, 0.07); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ab-sun-drift, .ab-window.is-clouded .ab-sun svg { animation: none; } .ab-sun { transition: none; } }
.ab-body .ld-dock { opacity: 0.56; transition: opacity 0.3s ease; }
.ab-body .ld-nav:hover .ld-dock, .ab-body .ld-nav:focus-within .ld-dock, .ab-body .ld-dock:has([aria-expanded="true"]) { opacity: 1; }
/* ABOUT, on its own page: a pill behind it in the dock's pressed tint, as a case study marks its current tab. Drawn
   under the word, so the dock keeps its size; kept clear of the dividers, whose gap narrows on phones. Any current link:
   the page itself ("page"), or the section you're in (WRITING on an essay, "true"). */
.ab-body .ld-link--group { --ab-pill-x: -8px; --ab-pill-y: -7px; isolation: isolate; }
.ab-body .ld-link--group a[aria-current] { position: relative; opacity: 1; text-decoration: none; }
/* About's and Writing's dock, a moment after arriving: the link to the other page steps out and a × steps in at the end
   of the group; the × brings the link back. Each part is its item and the divider beside it; landing.js sets the widths
   it moves between, and a shut part's margin takes back the gap beside it, so the group closes up evenly */
.ab-dock-part { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; }
.ab-dock-part.is-opening { transition-property: width, margin, opacity; transition-delay: 0s, 0s, 0.15s; }
.ab-dock-part.is-shut, .ab-dock-part.is-moving { overflow: hidden; }
.ab-dock-part.is-shut { opacity: 0; }
.ab-dock-close.is-shut { width: 0; margin-left: -16px; }   /* before landing.js runs: the group's gap, per width (as the landing's dock) */
@media (max-width: 479px) { .ab-dock-close.is-shut { margin-left: -8px; } }
@media (max-width: 379px) { .ab-dock-close.is-shut { margin-left: -6px; } }
@media (max-width: 339px) { .ab-dock-close.is-shut { margin-left: -5px; } }
.ab-dock-x { position: relative; display: grid; place-items: center; width: 16px; height: 16px; color: inherit; opacity: 0.9; transition: opacity 0.15s ease; }
.ab-dock-x::after { content: ""; position: absolute; inset: -12px -8px; }   /* a finger-sized target */
.ab-dock-x:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ab-dock-part { transition: none; } }
.ab-body .ld-link--group a[aria-current]::before { content: ""; position: absolute; z-index: -1; inset: var(--ab-pill-y) var(--ab-pill-x); border-radius: 10px; background: rgba(226, 194, 153, 0.14); }
@media (max-width: 599px) {
  .ab-body { --ab-dock-at: calc(20px + env(safe-area-inset-bottom)); }
  .ab { padding: 88px 0 calc(64px + var(--ab-dock-h) + var(--ab-dock-at)); }
  .ab-head { line-height: 28px; }
}
@media (max-width: 479px) {
  .ab-body { --ab-dock-h: 57px; }   /* the phone dock (see the landing's) */
  .ab-body .ld-link--group { --ab-pill-x: -4px; --ab-pill-y: -6px; }
  .ab-home { top: calc(16px + env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); }   /* where the landing's BA is on a phone */
  .ab-where { top: calc(16px + env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }
}
@media (max-width: 379px) { .ab-body .ld-link--group { --ab-pill-x: -3px; --ab-pill-y: -5px; } }
@media (max-width: 959px) {   /* the column reaches under BA and Lagos, NG */
  .ab-body::before { content: ""; position: fixed; z-index: 9; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + 84px); background: linear-gradient(var(--cs-ground) calc(env(safe-area-inset-top) + 56px), rgba(26, 22, 20, 0)); pointer-events: none; }
}

/* The camera beside a few words (my name, on air, the field, Gurudemy): it shows the photograph from that part of
   my life, in a card over the text. Hover or focus shows it, a click or a tap keeps it; about.js places the card.
   The first time, it develops in the darkroom (about/darkroom.js). The room goes dark under a red safelight
   (.ab-safelight, multiplied over the page, brightest over the tray), the card sits in a shallow tray (its rim is
   .ab-peek::before; the liquid in it is the canvas's) and the print comes up on a canvas (.ab-peek-bath, 8px into the
   tray) over blank paper (--ab-paper), until the lights come on (.is-lit) and the <img> is the photograph. Without the
   canvas (.is-css) the <img> develops itself, multiplied over the paper, the shadows first as its brightness comes
   down. Under reduced motion (.is-quiet), only the safelight's tint, then the photograph. When the reading brings the
   photograph up, darkroom.js sets --ab-pace below 1 and the stages here keep in step with its quicker develop. */
.ab-cam { position: relative; display: inline-flex; vertical-align: top; width: 24px; height: 24px; margin: 0 1px; border-radius: 6px; transition: background-color 0.15s ease; }
.ab-cam::after { content: ""; position: absolute; inset: -8px; }   /* a finger-sized target round the 24px icon */
.ab-cam img { width: 24px; height: 24px; }
.ab-cam:hover, .ab-cam[aria-expanded="true"] { background: rgba(226, 194, 153, 0.12); }
.ab-peek { --ab-paper: rgb(105, 31, 19); position: absolute; z-index: 20; top: 0; left: 0; width: min(220px, 100vw - 32px); margin: 0; pointer-events: none; opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; transition: opacity 0.18s ease-out, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ab-peek.is-below { transform-origin: 50% 0; transform: translateY(-6px) scale(0.98); }
.ab-peek.is-on { opacity: 1; transform: none; }
.ab-peek[hidden] { display: none; }
.ab-peek-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--cs-radius); overflow: clip; background: var(--cs-panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.ab-peek-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--cs-hairline), inset 0 0 50px rgba(0, 0, 0, 0.3); }
.ab-peek-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* In the darkroom: the tray's rim, 10px round the card, where about.js leaves the gap to the camera */
.ab-peek::before { content: ""; position: absolute; z-index: -1; inset: -10px; border-radius: 24px; background: #0c0403; box-shadow: inset 0 1px 0 rgba(255, 122, 92, 0.2), inset 0 0 0 1px rgba(255, 110, 80, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.45s ease; }
.ab-peek.is-dark::before { opacity: 1; }
.ab-peek.is-dark.is-lit::before { opacity: 0; transition-duration: calc(0.7s * var(--ab-pace, 1)); }
.ab-peek.is-dark .ab-peek-frame, .ab-peek.is-quiet .ab-peek-frame { background-color: var(--ab-paper); }
.ab-peek.is-dark:not(.is-css) .ab-peek-photo { opacity: 0; }   /* blank paper, until there's a print on it */
.ab-peek.is-bath .ab-peek-frame { overflow: visible; }         /* the canvas reaches into the tray */
.ab-peek.is-bath:not(.is-lit) .ab-peek-frame::after { opacity: 0; }
.ab-peek.is-lit .ab-peek-frame::after { transition: opacity calc(0.7s * var(--ab-pace, 1)) ease; }
.ab-peek-bath { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
@keyframes ab-develop { from { opacity: 0; filter: brightness(8); } 12% { opacity: 1; } to { opacity: 1; filter: brightness(1); } }
.ab-peek.is-css .ab-peek-photo, .ab-peek.is-quiet .ab-peek-photo { mix-blend-mode: multiply; }
.ab-peek.is-css .ab-peek-photo { animation: ab-develop calc(2.65s * var(--ab-pace, 1)) calc(0.3s * var(--ab-pace, 1)) cubic-bezier(0.25, 0, 0.35, 1) both; }
.ab-peek.is-lit .ab-peek-frame { transition: background-color calc(0.7s * var(--ab-pace, 1)) ease; }
.ab-peek.is-css.is-lit .ab-peek-frame, .ab-peek.is-quiet.is-lit .ab-peek-frame { background-color: #fff; }   /* multiplied over white: the photograph */
.ab-safelight { position: fixed; inset: 0; z-index: 12; pointer-events: none; background: radial-gradient(circle max(360px, 75vmax) at var(--ab-safe-at, 50% 40%), rgb(196, 78, 50), rgb(122, 36, 22) 45%, rgb(70, 18, 11)); mix-blend-mode: multiply; opacity: 0; transition: opacity calc(0.7s * var(--ab-pace, 1)) ease; }
.ab-safelight.is-on { opacity: 1; transition-duration: calc(0.45s * var(--ab-pace, 1)); }
.ab-safelight[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ab-peek, .ab-peek.is-below { transform: none; transition: none; } }

/* About, on air (IMMERSE, about.js): the copy written to be heard takes the place of the page copy, each word dim until
   I say it, gold while I'm saying it; the close comes up to full and the colophon goes quieter. An ON AIR bar with a
   level meter, pause and leave stands where the dock was (the dock steps aside, as on the landing). */
div.ab-page, .is-onair .ab-say { display: contents; }
.ab-say, .is-onair .ab-page { display: none; }
.ab-w { transition: opacity 0.3s ease, color 0.3s ease; }
.is-onair .ab-say .ab-w { opacity: 0.34; }
.is-onair .ab-say .ab-w.is-said { opacity: 1; }
.is-onair .ab-say .ab-w.is-now { opacity: 1; color: var(--cs-gold); }
.is-onair .ab-head .ab-w.is-now { color: var(--cs-cream); }
.is-onair .ab-say .ab-w { cursor: pointer; }   /* any word plays from there */
@media (hover: hover) and (pointer: fine) { .is-onair .ab-say .ab-w:hover { opacity: 0.9; text-decoration: underline; text-decoration-color: rgba(226, 194, 153, 0.5); text-decoration-thickness: 1px; text-underline-offset: 4px; } }
.is-onair .ab-sec--quiet { opacity: 1; }
.is-onair .ab-sec[aria-labelledby="ab-colophon"] { opacity: 0.3; }
.ab-links a.is-lit { color: var(--cs-gold); text-decoration-color: currentColor; }
.ab-body.is-immersed .ab-home { pointer-events: auto; }   /* the landing's Immerse puts BA out of reach; here it stays the way home */
.ab-air { --ld-glass: rgba(11, 14, 24, 0.3); --ld-edge: rgba(18, 22, 35, 0.5); position: fixed; z-index: 12; left: 50%; bottom: calc(var(--ab-dock-at) + 10px); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ab-air.is-on { opacity: 1; transform: translate(-50%, 0); }
.ab-air[hidden] { display: none; }
.ab-air-now { display: flex; align-items: center; gap: 10px; min-width: 0; height: 42px; margin: 0; padding: 0 14px 0 8px; border: 1px solid var(--ld-edge); border-radius: 16px; background: rgba(11, 14, 24, 0.55); -webkit-backdrop-filter: blur(17px) saturate(1.4); backdrop-filter: blur(17px) saturate(1.4); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-cream); white-space: nowrap; }
.ab-air-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ab-air-meter { flex: none; display: flex; align-items: center; gap: 2px; height: 14px; }
.ab-air-meter i { width: 3px; height: 14px; border-radius: 2px; background: var(--cs-gold); transform: scaleY(0.15); }
.ab-air .ld-pill { flex: none; height: 42px; }
.ab-air .ab-air-skip { padding: 12px; }
.ab-air.is-paused .ld-onair-light { background: #5a524c; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 479px) { .ab-air { gap: 6px; } .ab-air-now { gap: 8px; padding-right: 10px; } .ab-air .ld-pill { padding: 12px 10px; font-size: 11px; } .ab-air .ab-air-skip { padding: 12px 8px; } .ab-air-title { display: none; } }
@media (max-width: 379px) { .ab-air { gap: 4px; } .ab-air-meter { display: none; } .ab-air-now { gap: 6px; padding: 0 8px 0 6px; } .ab-air .ld-pill { padding: 12px 8px; } .ab-air .ab-air-skip { padding: 12px 6px; } }
@media (prefers-reduced-motion: reduce) { .ab-air, .ab-w { transition: none; } .ab-air-meter i { transform: scaleY(0.5); } }

/* My name, to hear: a dotted underline says it can be tapped; the card has my voice, the line of its tones as I said
   it, drawn as it plays, the five syllables with their tones (high, mid, low from the spelling), and the meaning */
.ab-name-btn { color: inherit; text-decoration: underline dotted rgba(226, 194, 153, 0.75); text-decoration-thickness: 1px; text-underline-offset: 5px; border-radius: 4px; transition: color 0.15s ease; }
.ab-name-btn:hover, .ab-name-btn[aria-expanded="true"] { color: var(--cs-gold); }
.ab-namecard { position: absolute; z-index: 20; top: 0; left: 0; width: min(304px, 100vw - 32px); padding: 18px 20px 16px; border: 1px solid var(--cs-hairline); border-radius: var(--cs-radius); background: rgba(20, 16, 14, 0.97); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); color: var(--cs-cream); opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; transition: opacity 0.18s ease-out, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ab-namecard.is-below { transform-origin: 50% 0; transform: translateY(-6px) scale(0.98); }
.ab-namecard.is-on { opacity: 1; transform: none; }
.ab-namecard[hidden] { display: none; }
.ab-nc-word { position: relative; width: fit-content; max-width: 100%; padding-top: 34px; font-size: 28px; font-weight: 500; line-height: 34px; letter-spacing: -0.01em; }
.ab-nc-word.is-full { font-size: 22px; line-height: 30px; }
.ab-nc-line { position: absolute; left: 0; top: 0; width: 100%; height: 30px; overflow: visible; }
.ab-nc-line path { fill: none; stroke: var(--cs-gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ab-nc-syl { display: flex; gap: 16px; margin-top: 12px; }
.ab-nc-syl li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; color: var(--cs-muted); transition: color 0.2s ease; }
.ab-nc-syl li.is-said { color: var(--cs-cream); }
.ab-nc-syl li.is-now { color: var(--cs-gold); }
.ab-nc-syl i { position: relative; width: 6px; height: 16px; }
.ab-nc-syl i::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ab-nc-syl [data-tone="high"] i::before { top: 0; }
.ab-nc-syl [data-tone="mid"] i::before { top: 5px; }
.ab-nc-syl [data-tone="low"] i::before { top: 10px; }
.ab-nc-mean { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--cs-muted); }
.ab-nc-actions { display: flex; gap: 8px; margin-top: 14px; }
.ab-nc-say { padding: 8px 12px; border: 1px solid var(--cs-hairline); border-radius: 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-gold); transition: background-color 0.15s ease; }
.ab-nc-say:hover, .ab-nc-say[aria-pressed="true"] { background: rgba(226, 194, 153, 0.1); }
@media (prefers-reduced-motion: reduce) { .ab-namecard, .ab-namecard.is-below, .ab-nc-syl li { transform: none; transition: none; } }

/* ================= Print / Save as PDF =================
   A light, one-column version for hiring panels. case.js adds the rest: the contact line,
   a heading for each tab (every tab prints, each from a new page), the carousels as a grid
   of captioned screens, and a poster for each recording. A4 is about 690px wide, so the
   tablet layout above is the starting point. */
.cs-print-head, .cs-print-part, .cs-print-grid, .cs-print-poster { display: none; }
/* Writing (writing.html): About's frame. The field notes, each a title, the problem and the fix, a hairline under each;
   then the essays, a title and a line under it. What only the notebook shows (.wr-margin, and the pencil line under
   .wr-u) is plain here. */
.wr-notes { display: flex; flex-direction: column; }
.wr-note { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: 1px solid rgba(226, 194, 153, 0.2); }
.wr-note-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--cs-cream); text-wrap: balance; }
.wr-part { position: relative; padding-left: 80px; color: rgba(245, 230, 211, 0.84); }
.wr-k { position: absolute; left: 0; top: 1px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); }   /* hanging, beside its text */
@media (max-width: 479px) { .wr-part { padding-left: 0; } .wr-k { position: static; display: block; } }   /* a phone: above it */
mark.wr-u { background: none; color: inherit; }
.wr-essays .ab-job { flex-direction: column; gap: 4px; }
.wr-essay-what { font-weight: 400; color: var(--cs-gold); }
/* An essay that's out: the whole row is the link, and its title underlines on hover or focus, as the links below it do */
.wr-essay-link { display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.wr-essay-link .ab-job-where { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.wr-essay-link:hover .ab-job-where, .wr-essay-link:focus-visible .ab-job-where { text-decoration-color: currentColor; }
/* Work (work.html): About's frame. After the studies, the three sides of the work and how I work with clients: About's
   Experience rows, each a name and its line, the line under the name as Writing's essays have it (a sentence is too
   long to share the row) */
.wk-list .ab-job { flex-direction: column; gap: 4px; }
.wk-list .ab-job-what { flex: none; font-weight: 400; text-align: left; }

/* An essay (ansarr-design-system.html, both-sides-of-a-marketplace.html, designing-as-the-owner.html): Writing's
   frame and About's type. The title, the line under it that says what the essay is about, and a quiet line (what it
   is, when, how long); then a section a heading. A figure is a panel the column's width, on the site's radius and
   hairline, the thing centred in it, and a quieter caption under it. In it, the livebar from the Ansarr case study,
   one above the other here (a desktop case study sets them side by side), or a recording in the plain phone outline
   of the case study's carousel: .cs-shots makes it one of case.js's stills, so it plays while it's on screen, with
   its pause button in the corner, and waits to be played under reduced motion. Or two phone screens side by side
   (.es-pair, one above the other on the smallest phones), a still of one in its phone (.es-still), or part of a
   desktop screen (.es-crop: the region given in the page, in the image's own pixels, --crop-x/y/w/h of --img-w, so
   the words in it can be read at the column's width). The panel and the phone narrow on a phone so nothing runs out
   of the column. */
.es { display: flex; flex-direction: column; gap: inherit; }
.es-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.es-stand { font-size: 18px; line-height: 28px; color: var(--cs-cream); text-wrap: pretty; }
.es-meta { font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--cs-muted); }
.es-fig { display: flex; flex-direction: column; gap: 12px; margin-block: 8px; }
.es-frame { position: relative; display: grid; place-items: center; padding: 32px 24px; border-radius: var(--cs-radius); background: var(--cs-panel); box-shadow: inset 0 0 0 1px var(--cs-hairline); overflow: clip; }
.es-frame .cs-livebars { flex-direction: column; align-items: center; }
.es-rec { width: 200px; height: auto; aspect-ratio: 9 / 20; border: 4.5px solid #0e1116; border-radius: 22px; background: #0e1116; object-fit: cover; }
video.es-rec { display: block; }   /* its print poster (.cs-print-poster) stays hidden till it prints */
.es-still { width: 212px; height: auto; }   /* a still of a screen in its phone (its frame is in the image): a figure of its own, or printed in a recording's place */
.es-cap { font-size: 14px; line-height: 20px; color: var(--cs-muted); text-wrap: pretty; }
.es-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; gap: 24px; width: 100%; }
.es-pair img { width: 100%; height: auto; }
.es-crop { position: relative; width: 100%; aspect-ratio: var(--crop-w) / var(--crop-h); overflow: hidden; border-radius: var(--cs-radius-inner); background: #fff; }
.es-crop img { position: absolute; left: calc(var(--crop-x) / var(--crop-w) * -100%); top: calc(var(--crop-y) / var(--crop-h) * -100%); width: calc(var(--img-w) / var(--crop-w) * 100%); max-width: none; height: auto; }
@media (max-width: 479px) {
  .es-stand { font-size: 17px; line-height: 26px; }
  .es-frame { padding: 24px 12px; }
  .es-rec { width: 176px; }
  .es-pair { gap: 12px; }
  .es-still { width: 188px; }
}
@media (max-width: 379px) { .es-pair { grid-template-columns: minmax(0, 200px); gap: 16px; } }   /* the smallest phones: one above the other, big enough to read */
@media (max-width: 426px) { .es-frame .cs-livebar-row { gap: 3px; } }   /* a phone: the bars closer, so all 67 fit the panel (4 apart, they need a window 427 wide) */
@media (max-width: 360px) { .es-frame .cs-livebar-row { gap: 2px; } }   /* the smallest phones: closer still */
/* The essays before and after (.es-pn), after the way on: under a hairline, the essay before on the left and the one
   after on the right, each cell one link, the whole of it the target. A small label (Previous, Next) with a chevron
   the way it goes, the essay's title, and under it the line Writing gives it. The first has no essay before it and the
   last none after: that side goes to Writing instead (All writing), so the row always has two cells. The title
   underlines on hover or focus, as Writing's list does, and the chevron steps a little the way it points. A phone:
   one above the other, the essay before first, both on the left. */
.es-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; padding-top: 24px; border-top: 1px solid rgba(226, 194, 153, 0.2); }
.es-pn-link { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.es-pn-link--next { grid-column: 2; align-items: flex-end; text-align: right; }
.es-pn-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); }
.es-pn-arrow { flex: none; width: 12px; height: 12px; transition: transform 0.15s ease; }
.es-pn-link--prev .es-pn-arrow { margin-left: -3px; }   /* the chevron's stroke, not its box, on the column's edge */
.es-pn-link--next .es-pn-arrow { margin-right: -3px; }
.es-pn-title { font-weight: 500; color: var(--cs-cream); text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.es-pn-what { font-size: 14px; line-height: 20px; color: var(--cs-muted); text-wrap: pretty; }
.es-pn-link:hover .es-pn-title, .es-pn-link:focus-visible .es-pn-title { text-decoration-color: currentColor; }
.es-pn-link--prev:hover .es-pn-arrow, .es-pn-link--prev:focus-visible .es-pn-arrow { transform: translateX(-2px); }
.es-pn-link--next:hover .es-pn-arrow, .es-pn-link--next:focus-visible .es-pn-arrow { transform: translateX(2px); }
@media (max-width: 479px) { .es-pn { grid-template-columns: minmax(0, 1fr); } .es-pn-link--next { grid-column: auto; align-items: flex-start; text-align: left; } }   /* a phone: one above the other */
@media (prefers-reduced-motion: reduce) { .es-pn-arrow, .es-pn-title { transition: none; } .es-pn-link:hover .es-pn-arrow, .es-pn-link:focus-visible .es-pn-arrow { transform: none; } }

/* A case study in About's frame (body.ab-study: case-study.html, luciana-study.html, zart-study.html, ea-study.html;
   the 404 keeps the two-column .cs template above). About's column of 560, BA top left and the dock at the bottom,
   with the study's own bar across the top of the page: the ruler, the tabs and the sound, as designed. BA is pinned
   where About has it, so below 1200 the band above the ruler scrolls away only as far as BA and the ruler pins just
   under it (144 of bar); on a wide screen the ruler starts well clear of BA and the bar pins whole, as before. The
   hero, the stills, the phones, the carousels and the recordings (.cs-wide) are 940 at most, wider than the column,
   with their headings still in it; on a phone everything is the column. The old cards are plain sections now: a step's
   number, or its name, in the study's colour (the bars are gone), and Ansarr's matching bars one above the other,
   closer on a phone so all 67 fit, as an essay has them. The decisions are Writing's field notes, WHY and COST
   hanging beside their text as PROBLEM and FIX do there. */
.ab-study { --cs-mark-lit: var(--cs-accent); }
.ab-study .ab-home { z-index: 11; }   /* over the bar's ground where the two meet */
.ab-study::before { content: none; }  /* the fade under BA: the bar's ground does that here */
.ab-study .ab { width: 100%; align-items: center; padding-top: 12px; }
.ab-study .cs-panel { align-items: center; gap: inherit; }
.ab-study .ab > *, .ab-study .cs-panel > * { width: min(560px, 100% - 48px); }
.ab-study .ab > .cs-panel { width: 100%; }
.ab-study .cs-panel > .cs-wide { width: min(940px, 100% - 48px); }
.ab-study .cs-wide > .ab-head { width: 100%; max-width: 560px; margin-inline: auto; }
.ab-study .cs-intro { padding-block: 0; margin-top: -24px; }   /* the title closer to the hero than a section is to the next */
.ab-study .cs-screens, .ab-study .cs-shots { max-width: none; }
.ab-study .wr-note:last-child { border-bottom: 0; }   /* the next study's hairline follows */
.ab-study .cs-mark span { text-transform: uppercase; }   /* the marks read as they did, from sentence-case headings */
.cs-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.cs-flow-step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-flow-num { font-size: 24px; line-height: 24px; color: var(--cs-accent-text, var(--cs-accent)); }   /* a number, at 24px: Ansarr blue on the ground is large text's 3:1. A study whose colour is too dark for text sets --cs-accent-text; bars keep --cs-accent */
.cs-flow-step--gold .cs-flow-num { color: var(--cs-gold); }   /* building the survey */
.cs-flow-step--green .cs-flow-num { color: #00a667; }         /* green only where money moves */
.cs-flow-name { color: var(--cs-muted); }
.cs-flow--named .cs-flow-num { font-size: 16px; line-height: 24px; font-weight: 500; }   /* a named step: its name in the colour, its line under it */
.cs-flow--named .cs-flow-name { font-size: 14px; line-height: 20px; }
@media (max-width: 479px) { .cs-flow--three { grid-template-columns: minmax(0, 1fr); gap: 16px; } }   /* three steps with a line each: one under another on a phone */
@media (max-width: 426px) { .ab-study .cs-livebar-row { gap: 3px; } }
@media (max-width: 360px) { .ab-study .cs-livebar-row { gap: 2px; } }
@media (max-width: 1199px) {
  .ab-study .cs-bar { top: -18px; }   /* pinned, the ruler sits 12 under BA (BA is 28 tall, 16 or 20 from the top) */
  html:has(.ab-study) { scroll-padding-top: 156px; }
}
@media (min-width: 1200px) {
  .ab-study .cs-bar { margin-left: 0; }
  .ab-study .cs-sound { right: calc(50% - 493px); }   /* at the end of the ruler (971 wide, centred), level with the tabs, as before */
  /* YEAR and ROLE side by side, OUTCOME the width of the column under them (three across left OUTCOME a narrow column
     of eight or nine lines on Zart): no details column to hold them now */
  .ab-study .cs-meta--inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
  .ab-study .cs-meta--inline .cs-meta-item:last-child { grid-column: 1 / -1; }
}

/* The notebook (IMMERSE on Writing, writing.js): a surveyor's field book on a dark desk under a lamp. A page is 400 x 540
   (a phone's 340 x 520), the book scaled to the window (--nb-k). Paper with a grain; the left page ruled with a margin
   line, the right one squared, the gutter shaded; the type on the rules (24 apart); my notes pencilled in the outer
   margin, or at the foot when a word is too long for it; a pencil line under the words that matter. The cover is dark
   leather stamped in gold, with an elastic band. A turning page is .nb-leaf: its front the page lifting, its back the
   one it shows as it lands, shaded as it stands on edge (--nb-shade). */
@property --nb-shade { syntax: '<number>'; inherits: true; initial-value: 0; }
.nb-open, .nb-open body { overflow: hidden; }
.nb { position: fixed; inset: 0; z-index: 12; background: radial-gradient(ellipse 72% 62% at 50% 44%, #2b2119, #16120f 68%, #110e0c); opacity: 0; transition: opacity 0.4s ease; overscroll-behavior: contain; }
.nb.is-on { opacity: 1; }
.nb[hidden] { display: none; }
.nb-stage { position: absolute; left: 0; right: 0; top: 0; display: grid; place-items: center; perspective: 2600px; touch-action: none; -webkit-user-select: none; user-select: none; }
.nb-book { --nb-w: 400px; --nb-h: 540px; position: relative; width: calc(var(--nb-w) * 2); height: var(--nb-h); transform: scale(var(--nb-k, 1)) translateX(0); transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.25, 1); cursor: pointer; }
.nb-book.is-closed { transform: scale(var(--nb-k, 1)) translateX(calc(var(--nb-w) / -2)); }
.nb.is-narrow .nb-book { --nb-w: 340px; --nb-h: 520px; width: var(--nb-w); transform: scale(var(--nb-k, 1)); }
.nb-book::before { content: ""; position: absolute; inset: -8px -10px; border-radius: 10px; background: #3a2a1f; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.3s ease 0.35s; transform: translateZ(-2px); }   /* the boards, open */
.nb-book.is-open::before { opacity: 1; }
.nb.is-narrow .nb-book::before { inset: -6px -8px -8px -4px; border-radius: 4px 10px 10px 4px; }
.nb-page, .nb-leaf { position: absolute; top: 0; width: var(--nb-w); height: var(--nb-h); }
.nb-page--left { left: 0; }
.nb-page--right { left: var(--nb-w); }
.nb.is-narrow .nb-page--left { display: none; }
.nb.is-narrow .nb-page--right { left: 0; }
.nb-page.is-empty { visibility: hidden; }
.nb-leaf { left: var(--nb-w); z-index: 3; transform-origin: 0 50%; transform-style: preserve-3d; visibility: hidden; pointer-events: none; }
.nb-leaf.is-back { left: 0; transform-origin: 100% 50%; }
.nb.is-narrow .nb-leaf { left: 0; transform-origin: 0 50%; }
.nb-leaf.is-turning { visibility: visible; }
.nb-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nb-face--back { transform: rotateY(180deg); }
.nb-face::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #120d09; opacity: var(--nb-shade); }
.nb-face.is-empty { visibility: hidden; }

/* Paper */
.nb .is-ruled, .nb .is-grid, .nb .is-end { overflow: hidden; background-color: #efe6d3; color: #2c2622; }
.nb .is-ruled::after, .nb .is-grid::after, .nb .is-end::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.47 0 0 0 0 0.36 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }   /* the grain */
.nb .is-l { border-radius: 4px 1px 1px 4px; box-shadow: inset -26px 0 30px -18px rgba(70, 45, 20, 0.34), -1px 1px 0 #ddd1b8, -2px 2px 0 #cfc2a7, -3px 3px 0 #ddd1b8; }   /* the gutter, and the leaves under it */
.nb .is-r { border-radius: 1px 4px 4px 1px; box-shadow: inset 26px 0 30px -18px rgba(70, 45, 20, 0.34), 1px 1px 0 #ddd1b8, 2px 2px 0 #cfc2a7, 3px 3px 0 #ddd1b8; }
.nb.is-narrow .is-r { border-radius: 2px 4px 4px 2px; box-shadow: inset 14px 0 18px -14px rgba(70, 45, 20, 0.3), 1px 1px 0 #ddd1b8, 2px 2px 0 #cfc2a7, 3px 3px 0 #ddd1b8; }
.nb .is-ruled { --nb-rule: rgba(84, 112, 150, 0.26); }
.nb .is-ruled { background-image: linear-gradient(to right, transparent 97px, rgba(176, 72, 58, 0.34) 97px 98px, transparent 98px), repeating-linear-gradient(transparent 0 23px, var(--nb-rule) 23px 24px); background-size: 100% 100%, 100% calc(100% - 96px); background-position: 0 0, 0 60px; background-repeat: no-repeat; }
.nb .is-ruled.is-r { background-image: linear-gradient(to left, transparent 97px, rgba(176, 72, 58, 0.34) 97px 98px, transparent 98px), repeating-linear-gradient(transparent 0 23px, var(--nb-rule) 23px 24px); }
.nb .is-grid { background-image: linear-gradient(rgba(84, 112, 150, 0.16) 1px, transparent 1px), linear-gradient(to right, rgba(84, 112, 150, 0.16) 1px, transparent 1px); background-size: 12px 12px; background-position: 30px 60px; }
.nb .is-end { background-color: #e5d7bb; }
.nb-text { position: absolute; z-index: 1; top: 36px; bottom: 36px; font-size: 15px; line-height: 24px; }
.nb .is-l .nb-text { left: 112px; right: 34px; }
.nb .is-r .nb-text { left: 34px; right: 112px; }
.nb.is-narrow .is-r .nb-text { left: 30px; right: 26px; top: 32px; }
.nb.is-narrow .is-ruled { background-image: linear-gradient(to right, transparent 21px, rgba(176, 72, 58, 0.34) 21px 22px, transparent 22px), repeating-linear-gradient(transparent 0 23px, var(--nb-rule) 23px 24px); background-position: 0 0, 0 56px; }
.nb-label { font-size: 11px; line-height: 24px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(44, 38, 34, 0.55); }
.nb-title { font-size: 17px; line-height: 24px; font-weight: 500; color: #231d19; text-wrap: balance; margin-bottom: 24px; }
.nb-body { color: #2c2622; }
.nb-body + .nb-label { margin-top: 24px; }
.nb-pgno { position: absolute; z-index: 1; bottom: 18px; font-size: 11px; line-height: 16px; color: rgba(44, 38, 34, 0.5); }
.nb .is-l .nb-pgno { left: 28px; }
.nb .is-r .nb-pgno { right: 28px; }
.nb-index { margin-top: 24px; counter-reset: nb; }
.nb-index li { display: flex; align-items: baseline; gap: 8px; counter-increment: nb; }
.nb-index li::before { content: counter(nb) "."; flex: none; width: 18px; color: rgba(44, 38, 34, 0.55); }
.nb-index button { flex: 1; text-align: left; color: #231d19; line-height: 24px; margin-bottom: 24px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.nb-index button:hover, .nb-index button:focus-visible { text-decoration-color: rgba(44, 38, 34, 0.5); }
.nb-index span { flex: none; font-size: 12px; color: rgba(44, 38, 34, 0.55); }
.nb .nb-text :focus-visible { outline-color: #6b5230; }

/* The pencil: my notes in the margin and at the foot, and a line under the words that matter */
.nb-hand, .nb-margin { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 500; color: #4b4642; filter: url(#nb-pencil); }
.nb-margin { position: absolute; z-index: 2; font-size: 19px; line-height: 21px; overflow-wrap: anywhere; }
.nb-margin--side { top: 132px; width: 84px; transform: rotate(-4deg); }
.nb .is-l .nb-margin--side { left: 12px; }
.nb .is-r .nb-margin--side { right: 12px; top: 84px; transform: rotate(3deg); }
.nb-margin--foot { left: 34px; right: 34px; bottom: 44px; font-size: 20px; line-height: 22px; transform: rotate(-2deg); }
.nb .is-l .nb-margin--foot { left: 112px; }
.nb .is-r .nb-margin--foot { right: 112px; }
.nb-foot { position: absolute; z-index: 2; left: 30px; right: 26px; bottom: 40px; display: flex; flex-direction: column; gap: 6px; }
.nb-foot .nb-margin { position: static; transform: rotate(-1.5deg); }
.nb-foot .nb-margin + .nb-margin { transform: rotate(1deg); margin-left: 24px; }
.nb-margin .nb-w, .nb-hand-img { display: inline-block; clip-path: inset(-4px 100% -6px -2px); opacity: 0; }
.nb-margin.is-written .nb-w { clip-path: inset(-4px -4px -6px -2px); opacity: 1; transition: clip-path 0.16s linear, opacity 0.05s linear; }
.nb-margin.is-written .nb-hand-img { clip-path: inset(-4px -4px -6px -2px); opacity: 1; transition: clip-path 1.2s linear, opacity 0.05s linear; }
.nb-hand-img { max-width: 100%; height: auto; mix-blend-mode: multiply; }
.nb .wr-u { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C20 2.2 38 4.4 58 3.1S97 2.4 119 3.9' fill='none' stroke='%234b4642' stroke-opacity='.75' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 0% 6px; background-position: 0 100%; padding-bottom: 2px; transition: background-size 0.6s ease-out; }
.nb .wr-u.is-drawn { background-size: 100% 6px; }
.nb-owner { position: absolute; z-index: 1; left: 64px; right: 40px; top: 150px; display: flex; flex-direction: column; gap: 2px; }
.nb-owner .nb-hand { font-size: 26px; line-height: 32px; transform: rotate(-2deg); }
.nb-owner .nb-found { margin-top: 64px; font-size: 21px; line-height: 26px; transform: rotate(-1deg); }
.nb.is-narrow .nb-owner { left: 44px; }

/* The cover: dark leather, the title stamped in gold, the band */
.nb .is-cover { border-radius: 3px 12px 12px 3px; background: radial-gradient(ellipse at 30% 20%, #4a3727, #33251b 60%, #2a1e16); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 230, 190, 0.06), inset 10px 0 14px -8px rgba(0, 0, 0, 0.5); overflow: hidden; }
.nb .is-cover::after { content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); }
.nb-cover { position: absolute; z-index: 1; inset: 22px 58px 22px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid rgba(217, 185, 140, 0.28); border-radius: 4px; text-align: center; }
.nb-cover-title { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #d9b98c; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 235, 200, 0.12); padding-left: 0.3em; }
.nb-cover-name { font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(217, 185, 140, 0.7); }
.nb-band { position: absolute; z-index: 2; top: -2px; bottom: -2px; right: 26px; width: 13px; background: linear-gradient(90deg, #120d0a, #251c16 45%, #120d0a); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.35), 2px 0 4px rgba(0, 0, 0, 0.25); }

/* The bar under it: back and on a page, where you are, leave (About's ON AIR bar, without the light) */
.nb-bar { z-index: 13; }
.nb .nb-where { padding: 0 14px; min-width: 0; max-width: min(420px, calc(100vw - 196px)); overflow: hidden; text-overflow: ellipsis; display: block; line-height: 42px; }
.nb-bar .ld-pill[disabled] { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .nb, .nb-book, .nb-book::before, .nb .wr-u, .nb-margin.is-written .nb-w, .nb-margin.is-written .nb-hand-img { transition: none; } }

/* The typewriter (IMMERSE on an essay, typewriter.js): a dark desk under a reading lamp (About's lamp at night, its pool
   and its shade), the machine on it in points (--tw world units: a point is a pixel at scale 1, so the type is 12px),
   moved and scaled as one (.tw-world) for the camera. The machine: its body an SVG, and what moves on top of it
   HTML (iOS Safari won't animate a transform inside an SVG): the carriage with the platen, the paper, the scale and the
   lever; the typebars, fanned in the basket and each swinging up to the strike point; the ribbon's guide; the keys.
   A sheet is A4 (595 x 842), warm paper with a grain; the type Courier Prime, on its lines 15 apart, each letter a
   little lighter or heavier and a hair off the line (--dx, --dy); an x-out or an underline struck over what's there
   (.ov, at its column, --c). A figure is a photograph with a white border, rotated a touch, a paperclip over the
   sheet's edge; it comes up as a print does (.tw-dev fading). The pile is the sheets lying on the desk. At the end a
   sheet is held up to read (.tw-leaf), the rest of the room dimmed. */
.tw-open, .tw-open body { overflow: hidden; }
.tw { --tw-sat: env(safe-area-inset-top); position: fixed; inset: 0; z-index: 12; overflow: hidden; background: #0c0a09; opacity: 0; transition: opacity 0.4s ease; overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; outline: none; }
.tw.is-on { opacity: 1; }
.tw[hidden] { display: none; }
.tw > * { position: absolute; }
.tw-room { inset: 0; background: radial-gradient(ellipse 82% 70% at 50% 40%, #211913, #120e0c 60%, #0a0807); }
.tw-lamp { inset: 0; pointer-events: none; background: radial-gradient(max(380px, 46vw) max(320px, 44vh) at 50% 38%, rgba(255, 176, 98, 0.2), rgba(255, 176, 98, 0.13) 38%, rgba(255, 176, 98, 0.05) 70%, rgba(255, 176, 98, 0)); }
.tw-shade { inset: 0; pointer-events: none; background: radial-gradient(max(420px, 60vw) max(360px, 58vh) at 50% 38%, rgba(12, 10, 9, 0) 55%, rgba(12, 10, 9, 0.42)); }
.tw-view { inset: 0; overflow: hidden; transition: opacity 0.6s ease; }
.tw.is-leaf .tw-view { opacity: 0.32; }
.tw-world { left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.tw-world > *, .tw-machine > *, .tw-carriage > * { position: absolute; }
.tw-desk { left: -2400px; top: -40px; width: 4800px; height: 2800px; background: radial-gradient(1200px 560px at 50% 14%, rgba(255, 176, 98, 0.1), rgba(255, 176, 98, 0) 72%), repeating-linear-gradient(0.4deg, rgba(0, 0, 0, 0) 0 13px, rgba(0, 0, 0, 0.1) 13px 15px, rgba(255, 210, 160, 0.018) 15px 22px), linear-gradient(#1c1511, #130f0c 26%, #0d0a08); box-shadow: inset 0 1px 0 rgba(255, 196, 140, 0.1); }
.tw-machine { left: 0; top: 0; width: 0; height: 0; }
.tw-body { left: -500px; top: -60px; width: 1000px; height: 640px; overflow: visible; }
.tw-ten { font: 400 28px/1 Georgia, "Times New Roman", serif; letter-spacing: 1px; fill: #d9cfbf; fill-opacity: 0.86; }
.tw-carriage { left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.tw-platen { left: -160px; top: -96px; width: 920px; height: 136px; }
.tw-paperwin { left: -100px; top: -2400px; width: 800px; height: 2408px; overflow: hidden; }
.tw-paperwin .tw-sheet { left: 100px; top: 2400px; will-change: transform; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }
.tw-rail { left: -160px; top: 0; width: 920px; height: 26px; }
.tw-lever { left: 700px; top: -26px; width: 0; height: 0; transform-origin: 0 0; }
.tw-lever svg { position: absolute; left: -20px; top: -20px; overflow: visible; }
.tw-bars, .tw-keys { left: 0; top: 0; width: 0; height: 0; }
.tw-tb { position: absolute; width: 3.4px; transform-origin: 50% 100%; border-radius: 1px; background: linear-gradient(90deg, #191614, #807467 50%, #221e1b); }
.tw-tb::before { content: ""; position: absolute; left: -1.7px; top: -1px; width: 6.8px; height: 10px; border-radius: 1.5px; background: linear-gradient(90deg, #463f38, #bdb09d 50%, #463f38); }
.tw-rib { left: -9px; top: 22px; width: 18px; height: 9px; border-radius: 1px; background: linear-gradient(#121110 0 52%, #5a1914 52%); box-shadow: 0 0 0 1.4px #8f8475; }
.tw-guide { left: -30px; top: 0; }
.tw-key { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: radial-gradient(circle at 50% 44%, #f1e9d9 0 45%, #d7ccb8 53%, #16120f 56% 61%, #d2c6b2 64%, #8a7e70 76%, #3a342e 100%); box-shadow: 0 3px 0 #080706, 0 7px 9px rgba(0, 0, 0, 0.55); }
.tw-key b { font: 700 10px/1 "Courier Prime", "Courier New", monospace; color: #1a1614; transform: translateY(-0.5px); }
.tw-key::after { content: ""; position: absolute; left: 50%; top: calc(100% + 2px); width: 4px; height: 7px; margin-left: -2px; background: #1f1b18; }   /* the stem, under the cap */
.tw-key--small { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.tw-key--tab { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: radial-gradient(circle at 50% 44%, #9b9387 0 50%, #6c645a 58%, #cbbfab 66%, #7a6f62 80%, #37312c 100%); }
.tw-key.tw-space { left: -200px; top: 446px; width: 400px; height: 15px; margin: 0; border-radius: 8px; background: linear-gradient(#e0d4c0, #978b7b 42%, #4a433c 80%, #2a2521); }
.tw-key.tw-space::after { display: none; }
.tw-pile { left: 0; top: 0; width: 0; height: 0; }
.tw-pile .tw-sheet { left: 0; top: 0; transform-origin: 50% 50%; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 30px 40px rgba(0, 0, 0, 0.45); }

.tw-sheet { position: absolute; width: 595px; height: 842px; overflow: visible; background-color: #efe8d9; color: #1b1715; font: 400 12px/15px "Courier Prime", "Courier New", Courier, monospace; font-kerning: none; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; }
.tw-sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.47 0 0 0 0 0.36 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.tw-ln { position: absolute; height: 15px; white-space: pre; }   /* at its line and the left margin (typewriter.js) */
.tw-ln span { position: relative; left: var(--dx, 0); top: var(--dy, 0); }
.tw-ln .i0 { opacity: 0.97; } .tw-ln .i1 { opacity: 0.9; } .tw-ln .i2 { opacity: 0.83; } .tw-ln .i3 { opacity: 0.75; } .tw-ln .i4 { opacity: 0.64; }
.tw-ln .hv { text-shadow: 0.3px 0 0 currentColor, 0 0.25px 0 rgba(27, 23, 21, 0.45); }
.tw-ln .ov { position: absolute; left: calc(var(--c) * 0.6em + var(--dx, 0px)); }
.tw-ln .w1 { display: inline-block; width: 0.6em; text-align: center; }   /* a character the face hasn't got (the naira sign), still a letter wide */
.tw-ln .tw-struck span { position: relative; }
.tw-ln .tw-struck, .tw-ln .ov { -webkit-user-select: none; user-select: none; }
.tw-ln .is-new { animation: tw-ink calc(0.05s * var(--tw-f, 1)) calc(0.045s * var(--tw-f, 1)) both; }
@keyframes tw-ink { from { opacity: 0; } }
.tw-print { position: absolute; z-index: 2; padding: 8px 8px 10px; border-radius: 2px; background: #f7f3eb; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(40, 24, 10, 0.22); transform: rotate(var(--r, 0deg)); }
.tw-pic { position: relative; overflow: hidden; background: #14100e; }
.tw-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%); }   /* the gloss */
.tw-shot { position: absolute; left: 0; top: 0; display: grid; place-items: center; padding: 24px; background: #14100e; transform-origin: 0 0; font: 400 16px/24px var(--cs-font); color: var(--cs-cream); }
.tw-shot .cs-livebars { flex-direction: column; align-items: center; }
.tw-shot .cs-livebar-row--fill { animation: none !important; clip-path: inset(0 calc(100% - var(--fill, 68.6%)) 0 0); }
.tw-shot .cs-print-poster { display: block; }
.tw-shot .es-rec { width: 200px; } .tw-shot .es-still { width: 212px; } .tw-shot .es-pair { grid-template-columns: repeat(2, minmax(0, 240px)); gap: 24px; }   /* the figures at one size on every screen, so every device types the same sheets */
.tw-dev { position: absolute; inset: 0; z-index: 1; background: #ebe4d6; opacity: 0; }
.tw-print.is-new { animation: tw-clip-on 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tw-print.is-new .tw-dev { animation: tw-develop 2.4s 0.5s cubic-bezier(0.35, 0, 0.35, 1) both; }
@keyframes tw-clip-on { from { opacity: 0; transform: translate(46px, -8px) rotate(calc(var(--r, 0deg) + 5deg)); } }
@keyframes tw-develop { from { opacity: 1; } }
.tw-clip { position: absolute; z-index: 3; right: -12px; top: 12px; filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.35)); }
.tw-measure { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.tw-measure .tw-shot { position: relative; }

/* Leafing through: a sheet held up to read, as big as it reads (a phone: its column across the screen, scrolled) */
.tw-leaf { left: 0; right: 0; top: 0; bottom: 70px; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.tw.is-leaf .tw-leaf { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.tw-leaf-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; scrollbar-width: none; }
.tw-leaf-scroll::-webkit-scrollbar { display: none; }
.tw-leaf-box { position: relative; }
.tw-leaf-box .tw-sheet { left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 30px 60px rgba(0, 0, 0, 0.55); -webkit-user-select: text; user-select: text; }
.tw-read { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: normal; }
.tw-read .cs-print-poster { display: block; }
.tw-pdf { display: none; }

/* The bar: About's ON AIR bar, where the dock is (as the notebook's): the dock goes under the dialog and the bar comes up in its place */
.tw .tw-bar { z-index: 4; }
.tw .tw-where { display: block; min-width: 0; padding: 0 14px; line-height: 42px; font-variant-numeric: tabular-nums; }
.tw .tw-speed { min-width: 46px; font-variant-numeric: tabular-nums; }
.tw-bar [hidden] { display: none; }
.tw-bar .ld-pill[disabled] { opacity: 0.35; cursor: default; }
@media (max-width: 379px) { .tw .tw-where { padding: 0 8px; } .tw .tw-speed { min-width: 38px; } }
@media (prefers-reduced-motion: reduce) { .tw, .tw-view, .tw-leaf, .tw.is-leaf .tw-leaf { transition: none; } .tw-ln .is-new, .tw-print.is-new, .tw-print.is-new .tw-dev { animation: none; } }

/* The projector (IMMERSE on the case studies, projector.js): a dark screening room in the typewriter's warm dark.
   A pull-down screen at the top (its roller case, the fabric with a weave, the slat and its cord), the caption under
   it, and at the bottom the carousel projector on a table, the bar where the dock is. What the lamp lights (.pj-light:
   the slide, the beam, the dust in it, the glow round the slide on the fabric and on the wall, the lens) goes dark
   together as the shutter closes. A slide's frame is placed on the screen by projector.js (a mount's 2:3, or a card as
   the screen allows); a card's type is sized there (--pj-fs), everything on it in em. The machine is drawn in its own
   units and scaled as one (.pj-machine); its tray turns on HTML elements (.pj-disc, and the numbers on its side), as
   iOS Safari won't move a transform inside an SVG. Only transforms and opacity move. */
@media screen {
  .pj-open, .pj-open body { overflow: hidden; }
  .pj-dark body > :not(.pj) { visibility: hidden; }   /* the page behind, once the room covers it: not drawn */
}
.pj { --pj-sat: env(safe-area-inset-top); --pj-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); position: fixed; inset: 0; z-index: 12; overflow: hidden; background: #0a0807; opacity: 0; transition: opacity 0.4s ease; overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; outline: none; -webkit-tap-highlight-color: transparent; }
.pj.is-on { opacity: 1; }
.pj img, .pj video { -webkit-user-drag: none; -webkit-touch-callout: none; }   /* a swipe over a picture is a swipe, not a drag of it (iOS) */
.pj[hidden] { display: none; }
.pj > * { position: absolute; }
.pj-room { inset: 0; background: radial-gradient(ellipse 85% 72% at 50% 30%, #1e1713, #120e0c 56%, #090706); }
.pj-spill { border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 214, 162, 0.1), rgba(255, 214, 162, 0.04) 55%, rgba(255, 214, 162, 0)); }   /* the wall round the screen, catching its light */

/* The screen: the roller case, the fabric (a fine weave, the case's shadow at its head), the slat and the cord */
.pj-screen { cursor: pointer; }
.pj-screen > * { position: absolute; }
.pj-case { left: -10px; right: -10px; top: 0; height: var(--pj-case); border-radius: calc(var(--pj-case) / 2); background: linear-gradient(#4c433a, #2b2520 38%, #120f0d 78%, #211c18); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); }
.pj-case::before, .pj-case::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 12px; border-radius: 4px; background: linear-gradient(#3b332c, #15110e); }
.pj-case::before { left: -5px; }
.pj-case::after { right: -5px; }
.pj-fabric { left: 0; right: 0; top: var(--pj-case); height: var(--pj-fab); overflow: hidden; background: #27211d; box-shadow: inset 0 12px 12px -10px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 0, 0, 0.35); }
.pj-fabric::before { content: ""; position: absolute; inset: 0; opacity: 0.3; mix-blend-mode: overlay; background-image: var(--pj-noise); background-size: 160px; }
.pj-fabric::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0.2)); }
.pj-glow { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 226, 184, 0.17), rgba(255, 226, 184, 0.05) 62%, rgba(255, 226, 184, 0)); }   /* the light round the slide, on the fabric */
.pj-slat { left: -3px; right: -3px; top: calc(var(--pj-case) + var(--pj-fab)); height: var(--pj-slat); border-radius: 2px; background: linear-gradient(#41372f, #1a1512 70%, #0f0c0a); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.pj-cord { left: 50%; top: calc(var(--pj-case) + var(--pj-fab) + var(--pj-slat)); bottom: 5px; width: 1.5px; margin-left: -0.75px; background: #3d342c; }
.pj-cord::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 5px; margin-left: -4.5px; border-radius: 2px; background: #4a4037; }

/* A slide on the screen: the aperture's round corners, the light scattered round it, the lamp's hot middle and dim edges */
.pj-frames { inset: 0; pointer-events: none; }
.pj-frame { position: absolute; overflow: hidden; border-radius: calc(min(var(--pj-w), var(--pj-h)) * 0.03); pointer-events: auto; cursor: pointer; box-shadow: 0 0 36px rgba(255, 222, 176, 0.1); }
.pj-focus, .pj-slide { position: absolute; inset: 0; }
.pj-soft { filter: blur(6px); }                           /* the slide out of focus as it drops in: blurred once, faded out (opacity) */
.pj-lamp { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse 72% 68% at 50% 46%, rgba(255, 244, 224, 0.06), rgba(255, 244, 224, 0) 52%, rgba(8, 5, 3, 0.24)); }
.pj-frame--up::after, .pj-frame--land::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #fff0da; mix-blend-mode: multiply; }   /* a photograph in the lamp's warm light */

/* A picture on its mount, on the carousel's violet with its wave and stars: a phone screen, or a recording in the carousel's plain phone */
.pj-mount { position: absolute; inset: 0; overflow: hidden; background: var(--pj-stars, none) 50% 50% / cover no-repeat, linear-gradient(115deg, var(--cs-screens-gradient)); }
.pj-wave { position: absolute; left: -120%; top: 36%; width: 340%; max-width: none; height: auto; }
.pj-phone { position: absolute; left: 50%; top: 50%; height: 91%; width: auto; max-width: none; transform: translate(-50%, -50%); }
.pj-device { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: 9 / 20; transform: translate(-50%, -50%); border: calc(var(--pj-h) * 0.008) solid #0e1116; border-radius: calc(var(--pj-h) * 0.04); overflow: hidden; background: #0e1116; }
.pj-video, .pj-device img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj .pj-media { z-index: 6; right: calc(var(--pj-pad) * 0.5); bottom: calc(var(--pj-pad) * 0.5); }
/* A recording in the beam: a film's grain, the lamp flickering, the frame weaving a hair in the gate */
.pj-grain { position: absolute; inset: -40%; z-index: 3; pointer-events: none; opacity: 0.13; mix-blend-mode: overlay; background-image: var(--pj-noise); background-size: 140px; animation: pj-grain 0.5s steps(5) infinite; }
.pj-flick { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; opacity: 0; animation: pj-flick 2.1s steps(1, end) infinite; }
.is-film .pj-device, .is-film .pj-shot, .is-film .pj-film { animation: pj-weave 1.9s steps(1, end) infinite; }
/* A still or a recording on the study's print (Luciana, Zart, Everything African), as the page frames it: a desktop
   screen in its bezel, a phone (the mockup carries its own frame), a pair of phones side by side, or a clip that has
   the print and the phone in it (Zart's payout, round the phone on an upright mount) */
.pj-mount--print { background: var(--cs-panel); }
.pj-mount--print::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 calc(var(--pj-h) * 0.14) rgba(0, 0, 0, 0.45); }   /* the page frame's shade at its edges */
.pj-print { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-shot { position: absolute; z-index: 2; left: 50%; top: 50%; width: 82%; height: auto; max-width: none; transform: translate(-50%, -50%); border-radius: calc(var(--pj-w) * 0.013); border: 1px solid rgba(245, 230, 211, 0.28); box-shadow: 0 0 0 calc(var(--pj-w) * 0.003 + 1px) rgba(14, 17, 22, 0.55), 0 calc(var(--pj-h) * 0.06) calc(var(--pj-h) * 0.1) calc(var(--pj-h) * -0.035) rgba(0, 0, 0, 0.8); }
.pj-shot--film { overflow: hidden; background: #0e1116; }
@media (max-width: 1199px) { .pj-shot { width: 88%; } }   /* as the page: 88% of the frame, 82% on a wide screen */
.pj-mount--print .pj-phone { z-index: 2; height: 86%; filter: drop-shadow(0 calc(var(--pj-h) * 0.035) calc(var(--pj-h) * 0.05) rgba(0, 0, 0, 0.75)); }
.pj-pair { position: absolute; z-index: 2; inset: 7% 5%; display: flex; align-items: center; justify-content: center; gap: 4%; }
.pj-pair img { height: 100%; width: auto; max-width: 48%; min-width: 0; object-fit: contain; filter: drop-shadow(0 calc(var(--pj-h) * 0.035) calc(var(--pj-h) * 0.05) rgba(0, 0, 0, 0.75)); }
.pj-film { position: absolute; left: 50%; top: 50%; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; transform: translate(-50%, -50%); object-fit: cover; }
@keyframes pj-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(-6%, -4%); } }
@keyframes pj-flick { 0% { opacity: 0.03; } 11% { opacity: 0.075; } 13% { opacity: 0.015; } 29% { opacity: 0.05; } 31% { opacity: 0.01; } 52% { opacity: 0.065; } 55% { opacity: 0.025; } 74% { opacity: 0.085; } 76% { opacity: 0.02; } 90% { opacity: 0.05; } }
@keyframes pj-weave { 0% { transform: translate(-50%, -50%); } 23% { transform: translate(calc(-50% + 0.4px), calc(-50% - 0.3px)); } 41% { transform: translate(calc(-50% - 0.3px), calc(-50% + 0.45px)); } 67% { transform: translate(calc(-50% + 0.2px), calc(-50% + 0.5px)); } 85% { transform: translate(calc(-50% - 0.4px), calc(-50% - 0.2px)); } }

/* A card: the site's type on the page's ground, lit. Everything in em of --pj-fs, which projector.js sizes to the card */
.pj-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.9em; padding: var(--pj-pad); overflow: hidden; font-size: var(--pj-fs, 18px); line-height: 1.45; color: var(--cs-cream); background: radial-gradient(ellipse 95% 85% at 50% 40%, #211b17, #1a1614 70%, #151210); }
.pj-run { flex: none; font-size: 0.5em; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-gold); opacity: 0.8; }   /* the running head: the tray, or the section */
.pj-cardbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.8em; }
.pj-cardbody > :first-child { margin-top: auto; }         /* in the middle of the card, and never past its top when it's full */
.pj-cardbody > :last-child { margin-bottom: auto; }
.pj-card a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(226, 194, 153, 0.55); pointer-events: auto; }
.pj-card a:hover, .pj-card a:focus-visible { text-decoration-color: currentColor; }
.pj-h { font-size: 1.36em; line-height: 1.15; font-weight: 400; color: var(--cs-gold); text-wrap: balance; }
.pj-card--prose .pj-cardbody > p { font-size: 1.08em; line-height: 1.5; text-wrap: pretty; }
.pj-card--prose .pj-h + p { font-size: 1em; }
/* The title: the hero across the top, the title and the tags under it, as the page has them */
.pj-card--title { padding: 0; gap: 0; }
.pj-hero { flex: none; height: 52%; overflow: hidden; background: var(--cs-panel); }
.cs--ansarr .pj-hero { background: #6c35f0; }
.pj-card--title.is-tall .pj-hero { height: 46%; }
.pj-hero--phone { position: relative; display: flex; align-items: center; justify-content: center; }   /* a phone as the hero (Zart): on the study's print */
.pj-hero .pj-hero-print { position: absolute; inset: 0; }
.pj-hero .pj-hero-phone { position: relative; width: auto; height: 86%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.7)); }
.pj-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.pj-titleblock { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7em; padding: calc(var(--pj-pad) * 0.6) var(--pj-pad); text-align: center; }
.pj-titleblock > :first-child { margin-top: auto; }
.pj-titleblock > :last-child { margin-bottom: auto; }
.pj-title { font-size: 1.5em; line-height: 1.1; font-weight: 400; color: var(--cs-title); text-wrap: balance; }
.pj-title em { font-weight: 500; font-style: italic; }
.pj-tags { font-size: 0.56em; line-height: 1.4; letter-spacing: 0.06em; color: var(--cs-gold); text-wrap: balance; }
/* YEAR, ROLE and OUTCOME: YEAR and ROLE side by side, OUTCOME under them (one under another on an upright card) */
.pj-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em 1.4em; }
.pj-card.is-tall .pj-meta { grid-template-columns: minmax(0, 1fr); gap: 1.1em; }
.pj-meta-item { display: flex; flex-direction: column; gap: 0.35em; }
.pj-meta-item:last-child { grid-column: 1 / -1; }
.pj-meta-item h3 { font-size: 0.5em; line-height: 1.4; letter-spacing: 0.12em; font-weight: 400; color: var(--cs-gold); }
.pj-meta-item p { font-size: 1em; line-height: 1.4; text-wrap: pretty; }
.pj-meta-item .cs-meta-link { font-style: italic; }
/* The steps, each number in its colour, as the page has them */
.pj-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em 1em; }
.pj-card.is-tall .pj-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-step { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.pj-step-num { font-size: 2em; line-height: 1; color: var(--cs-accent-text, var(--cs-accent)); }
.pj-step--gold .pj-step-num { color: var(--cs-gold); }
.pj-step--green .pj-step-num { color: #00a667; }
.pj-step-name { font-size: 0.82em; line-height: 1.3; color: var(--cs-muted); }
.pj-flow--named { gap: 1.1em 1.4em; }
.pj-flow--named .pj-step-num { font-size: 1.1em; line-height: 1.3; font-weight: 500; }   /* a named step: its name in the colour, its line under it, as the page has them */
.pj-flow--named .pj-step-name { font-size: 0.86em; line-height: 1.4; }
.pj-card.is-tall .pj-flow--three { grid-template-columns: minmax(0, 1fr); gap: 0.9em; }   /* three steps, one under another on an upright card, as on a phone's page */
/* The matching bars, the page's own, all 67 across the card; the sweep moves as two opposite slides (transforms) */
.pj-card--bars .cs-livebars { gap: 0.7em; }
.pj-card--bars .cs-livebar { max-width: none; padding: 0.55em; gap: 0.35em; }
.pj-card--bars .cs-livebar-title { font-size: 0.62em; line-height: 1.4; }
.pj-card--bars .cs-livebar-count { font-size: 0.6em; line-height: 1.3; }
.pj-card--bars .cs-livebar-bars, .pj-card--bars .cs-livebar-row { height: 1.2em; }
.pj-card--bars .cs-livebar-row { gap: var(--pj-bgap, 4px); }
.pj-card--bars .cs-livebar-row i { width: var(--pj-bw, 1px); height: 1.2em; }
.pj-sweep { position: absolute; inset: 0; overflow: hidden; animation: pj-sweep-a 1.5s linear infinite; }
.pj .cs-livebar.is-sweeping .cs-livebar-row--fill { clip-path: none; animation: pj-sweep-b 1.5s linear infinite; }
@keyframes pj-sweep-a { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes pj-sweep-b { from { transform: translateX(100%); } to { transform: none; } }
/* A decision: its title, WHY and COST hanging beside their text as on the page (above it on an upright card) */
.pj-h--note { font-size: 1.2em; line-height: 1.25; font-weight: 500; color: var(--cs-cream); }
.pj-part { position: relative; padding-left: 4.6em; font-size: 0.94em; line-height: 1.5; color: rgba(245, 230, 211, 0.86); text-wrap: pretty; }
.pj-k { position: absolute; left: 0; top: 0.3em; font-size: 0.56em; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gold); }
.pj-card.is-tall .pj-part { padding-left: 0; }
.pj-card.is-tall .pj-k { position: static; display: block; margin-bottom: 0.25em; }
/* The last: the next study, then how to reach me */
.pj-card--end .pj-cardbody { gap: 1.5em; }
.pj-pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3em 2em; padding-bottom: 1.3em; border-bottom: 1px solid rgba(226, 194, 153, 0.2); }
.pj-pn--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* the study before on the left, the one after on the right, as on the page */
.pj-card a.pj-nextlink { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; text-decoration: none; }
.pj-pn--two .pj-nextlink--next { align-items: flex-end; text-align: right; }
.pj-card.is-tall .pj-pn--two { grid-template-columns: minmax(0, 1fr); }
.pj-card.is-tall .pj-pn--two .pj-nextlink--next { align-items: flex-start; text-align: left; }
.pj-next-k { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.52em; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gold); }
.pj-next-k svg { width: 1em; height: 1em; }
.pj-next-title { font-size: 1.5em; line-height: 1.15; font-weight: 500; color: var(--cs-cream); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 0.15s ease; }
.pj-nextlink:hover .pj-next-title, .pj-nextlink:focus-visible .pj-next-title { text-decoration-color: currentColor; }
.pj-next-what { font-size: 0.8em; line-height: 1.4; color: var(--cs-muted); text-wrap: pretty; }
.pj-contact { display: flex; flex-direction: column; gap: 0.6em; }
.pj-contact-h { font-size: 1.1em; line-height: 1.2; font-weight: 400; color: var(--cs-gold); }
.pj-contact p { font-size: 0.82em; line-height: 1.5; }

/* The caption, under the screen */
.pj-cap { display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; text-shadow: 0 1px 14px rgba(10, 7, 5, 0.85); }
.pj-cap-in { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.pj-cap-label { font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); opacity: 0.75; }
.pj-cap-h { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--cs-cream); text-wrap: balance; }
.pj-cap-p { max-width: 84ch; font-size: 15px; line-height: 22px; color: rgba(245, 230, 211, 0.82); text-wrap: pretty; }
.pj-measure { visibility: hidden; left: 0; top: 0; height: auto !important; }
.pj-cap.is-scroll, .pj-card.is-scroll { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; scrollbar-width: none; }
.pj-cap.is-scroll { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.pj-cap.is-scroll .pj-cap-in { padding-bottom: 14px; }
.pj-cap.is-scroll::-webkit-scrollbar, .pj-card.is-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 599px) { .pj-cap-in { gap: 4px; } .pj-cap-h { font-size: 15px; line-height: 21px; } .pj-cap-p { font-size: 14px; line-height: 20px; } }
@media (max-width: 359px) { .pj-cap-label { font-size: 10px; line-height: 14px; } .pj-cap-h { font-size: 14px; line-height: 19px; } .pj-cap-p { font-size: 13px; line-height: 19px; } }
.pj-cap-p.pj-cap-shot { max-width: 72ch; font-size: 16px; line-height: 23px; color: var(--cs-cream); }   /* a still's own caption, its number first, as on the page */
.pj-cap-n { margin-right: 0.7em; color: var(--cs-gold); opacity: 0.6; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .pj-cap-p.pj-cap-shot { font-size: 15px; line-height: 21px; } }
@media (max-width: 359px) { .pj-cap-p.pj-cap-shot { font-size: 14px; line-height: 20px; } }

/* The beam, the dust in it, the table the machine stands on */
.pj-beams, .pj-dust { pointer-events: none; mix-blend-mode: screen; }
.pj-beams { inset: 0; }
.pj-beam { position: absolute; left: 0; top: 0; overflow: visible; }
.pj-table { left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(ellipse 34% 60% at 50% 24%, rgba(255, 206, 150, 0.06), rgba(255, 206, 150, 0) 70%), repeating-linear-gradient(0.3deg, rgba(0, 0, 0, 0) 0 11px, rgba(0, 0, 0, 0.12) 11px 13px, rgba(255, 210, 160, 0.014) 13px 19px), linear-gradient(#18130f, #0e0b09 40%, #090706); -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }

/* The machine: its body (an SVG), the tray on it (its side, the turning top, the hub, the numbers), the lens's glow */
.pj-machine { width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.pj-machine > *, .pj-tray > *, .pj-trayin > * { position: absolute; }
.pj-body { left: -175px; top: -128px; width: 350px; height: 240px; overflow: visible; }
.pj-tray { left: 0; top: -10px; width: 0; height: 0; }
.pj-trayin { left: 0; top: 0; width: 0; height: 0; }
.pj-wall, .pj-hub { left: -140px; top: -90px; width: 280px; height: 160px; overflow: visible; }
.pj-plane { left: -130px; top: -150px; width: 260px; height: 260px; transform: scaleY(0.46); }
.pj-disc { position: absolute; inset: 0; will-change: transform; }
.pj-disc svg { display: block; width: 100%; height: 100%; }
.pj-shine { border-radius: 50%; background: linear-gradient(rgba(255, 222, 180, 0.16), rgba(255, 222, 180, 0) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3)); }
.pj-nums { left: 0; top: 0; width: 0; height: 0; }
.pj-nums span { position: absolute; left: 0; top: 0; font: 500 12.5px/1 var(--cs-font); font-variant-numeric: tabular-nums; color: #b9a990; opacity: 0; white-space: nowrap; }
.pj-nums span.is-here { color: #ffd49c; text-shadow: 0 0 6px rgba(255, 184, 100, 0.7); }
.pj-idx { fill: #3b2b1c; }
.pj-machine.is-lit .pj-idx { fill: #ffb45e; }             /* the index lamp: lit, under the slot in the gate */
.pj-lensglow { border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 246, 228, 0.9), rgba(255, 222, 170, 0.45) 22%, rgba(255, 200, 140, 0.12) 56%, rgba(255, 200, 140, 0)); mix-blend-mode: screen; }

/* The bar: About's ON AIR bar, where the dock is (as the notebook's and the typewriter's). A phone: two rows, the trays,
   play and sound over back, the count, forward and LEAVE, every control 44 high */
.pj .pj-bar { z-index: 6; }
.pj-g { display: flex; align-items: center; gap: 8px; }
.pj .pj-where { position: relative; display: block; min-width: 78px; padding: 0 14px; line-height: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.pj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pj .pj-g--trays { gap: 0; padding: 0 5px; }
.pj-traybtn { position: relative; height: calc(100% + 2px); margin: -1px 0; padding: 0 10px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cs-gold); opacity: 0.78; isolation: isolate; transition: opacity 0.15s ease; }
.pj-traybtn:hover { opacity: 1; }
.pj-traybtn[aria-pressed="true"] { opacity: 1; }
.pj-traybtn[aria-pressed="true"]::before { content: ""; position: absolute; z-index: -1; inset: 6px 1px; border-radius: 10px; background: rgba(226, 194, 153, 0.14); }   /* the dock's pressed tint, as the page you're on is marked there */
.pj-g--trays .ld-divider { margin: 0 2px; }
.pj-bar .ld-pill[disabled] { opacity: 0.35; cursor: default; }
.pj-break { display: none; }
@media (max-width: 599px) {
  .pj .pj-bar { width: calc(100vw - 24px); max-width: 440px; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .pj-break { display: block; flex-basis: 100%; height: 0; }
  .pj-g { gap: 6px; }
  .pj-g--trays { order: 1; } .pj-g--show { order: 2; } .pj-break { order: 3; } .pj-g--nav { order: 4; } .pj-leave { order: 5; }
  .pj .pj-bar .ld-pill { height: 44px; }
  .pj .pj-bar .ab-air-skip { min-width: 44px; padding: 12px 10px; }
  .pj .pj-where { height: 44px; min-width: 66px; padding: 0 8px; line-height: 44px; }
  .pj-traybtn { padding: 0 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pj, .ab-air.pj-bar, .pj-traybtn, .pj-next-title { transition: none; }
  .pj-grain, .pj-flick, .pj-dust { display: none; }
  .pj-sweep, .pj .cs-livebar.is-sweeping .cs-livebar-row--fill, .is-film .pj-device, .is-film .pj-shot, .is-film .pj-film { animation: none; }
  .pj .cs-livebar.is-sweeping .cs-livebar-row--fill { clip-path: inset(0 calc(100% - 68.6%) 0 0); }   /* the frame the page holds */
}


/* The contact sheet (IMMERSE on All work, contactsheet.js): a light table in the projector's warm dark, a contact
   sheet on it, the bar where the dock is. The table's light (.ct-lit: the glass, its spill into the room, the paper's
   border lit through from under it) flickers on as a tube does and goes off for the darkroom, all as opacity. The
   sheet is drawn in millimetres: every size on it is a number of --u (px to the mm, which contactsheet.js sets to fit)
   and the loupe's sheet (.ct-sheet--mag) is the same sheet laid out at three times --u, not a picture of it scaled up,
   moved under the lens by a transform. A frame is its study's screen as photographed on the study's print, drawn by
   contactsheet.js; a pick is circled in the grease pencil (stroke-dashoffset, the notebook's #nb-pencil for its grain)
   and a strip's name and a blank strip's note are in the same pencil, in Caveat. The print that's chosen goes into
   About's darkroom (.ab-peek, its tray and states, above), under its safelight, over the sheet. */
@media screen {
  .ct-open, .ct-open body { overflow: hidden; }
  .ct-dark body > :not(.ct) { visibility: hidden; }   /* the page behind, once the room covers it: not drawn */
}
.ct-open .hm-work .cs-shot-frame { view-transition-name: none; }   /* the print takes its study's name on the way there; the card mustn't have it too */
.ct { --ct-sat: env(safe-area-inset-top); --ct-wax: #e3473a; position: fixed; inset: 0; z-index: 12; overflow: hidden; background: #0a0807; opacity: 0; transition: opacity 0.4s ease; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; outline: none; -webkit-tap-highlight-color: transparent; }
.ct.is-on { opacity: 1; }
.ct[hidden] { display: none; }
.ct img, .ct canvas { -webkit-user-drag: none; -webkit-touch-callout: none; }
.ct-defs { position: absolute; }
.ct-room { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 72% at 50% 42%, #1d1714, #120e0c 58%, #080605); }
.ct-desk { position: absolute; left: 0; right: 0; overflow: hidden; touch-action: none; overscroll-behavior: contain; }
.ct.is-scroll .ct-desk { overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }   /* a sheet taller than the room (a phone on its side): it scrolls, a finger up or down; a hold or a move across takes the loupe */
.ct-desk::-webkit-scrollbar { display: none; }
.ct-desk.is-looking, .ct-desk.is-looking .ct-cell { cursor: none; }   /* the loupe is the pointer */
.ct-deskin { position: relative; overflow: clip; }   /* the table's light spills into the room, not past it (a sheet that scrolls scrolls no further than the table) */
/* The light table: its rim, the glass (dark till it's on), the light under it with a faint grid, and its spill */
.ct-spill { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(255, 228, 188, 0.14), rgba(255, 224, 180, 0.045) 55%, rgba(255, 224, 180, 0)); }
.ct-table { position: absolute; border-radius: calc(var(--ct-rim) + 8px); background: linear-gradient(170deg, #4a4139, #2a2420 40%, #1a1613); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 236, 210, 0.16); }
.ct-glass { position: absolute; inset: var(--ct-rim); border-radius: 8px; overflow: hidden; background: #26211d; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55); }
.ct-glow { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(90deg, rgba(150, 110, 60, 0.07) 0 1px, rgba(150, 110, 60, 0) 1px 48px), repeating-linear-gradient(0deg, rgba(150, 110, 60, 0.07) 0 1px, rgba(150, 110, 60, 0) 1px 48px), radial-gradient(ellipse 70% 68% at 50% 46%, #fff8ea, #f8e9cf 50%, #e3cba6); }
/* The sheet: the paper's white border, the black round the strips (a glossy print), the strips */
.ct-sheet { position: absolute; width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 26px rgba(0, 0, 0, 0.3); }
.ct-sheet--mag { left: 0; top: 0; box-shadow: none; }
.ct-paper { position: absolute; inset: 0; background: #4d4740; }
.ct-paperlit { position: absolute; inset: 0; opacity: 0; background: linear-gradient(160deg, #fbf6ee, #f1e8da); }
.ct-black { position: absolute; inset: calc(var(--u) * var(--wb)); background: linear-gradient(162deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 38%), #0c0b0a; box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.6); }
.ct-strip { position: absolute; left: calc(var(--u) * var(--x0)); top: calc(var(--u) * (var(--wb) + 13 + var(--k) * 46)); width: calc(var(--u) * 228); height: calc(var(--u) * 35); }
/* A strip: the film's base, its holes (eight to a frame, at each edge), the edge code and the numbers printed with it */
.ct-film { position: absolute; inset: 0; background: #23201e; }
.ct-film::before, .ct-film::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--u) * 1.98); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 198'%3E%3Crect x='98' width='279' height='198' rx='52' fill='%23050404'/%3E%3C/svg%3E") 0 0 / calc(var(--u) * 4.75) 100% repeat-x; }
.ct-film::before { top: calc(var(--u) * 0.95); }
.ct-film::after { bottom: calc(var(--u) * 0.95); }
.ct-code { position: absolute; left: 0; right: 0; top: calc(var(--u) * 3.4); height: calc(var(--u) * 1.2); opacity: 0.45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 12' fill='%23d6ccbd'%3E%3Crect x='24' width='5' height='12'/%3E%3Crect x='33' width='3' height='12'/%3E%3Crect x='39' width='3' height='12'/%3E%3Crect x='45' width='5' height='12'/%3E%3Crect x='53' width='7' height='12'/%3E%3Crect x='64' width='3' height='12'/%3E%3Crect x='70' width='3' height='12'/%3E%3Crect x='76' width='3' height='12'/%3E%3Crect x='83' width='3' height='12'/%3E%3Crect x='89' width='3' height='12'/%3E%3Crect x='95' width='3' height='12'/%3E%3Crect x='101' width='7' height='12'/%3E%3Crect x='111' width='3' height='12'/%3E%3Crect x='118' width='3' height='12'/%3E%3Crect x='125' width='5' height='12'/%3E%3Crect x='133' width='3' height='12'/%3E%3Crect x='139' width='7' height='12'/%3E%3Crect x='210' width='7' height='12'/%3E%3Crect x='223' width='5' height='12'/%3E%3Crect x='231' width='7' height='12'/%3E%3Crect x='244' width='5' height='12'/%3E%3Crect x='253' width='3' height='12'/%3E%3Crect x='262' width='3' height='12'/%3E%3Crect x='271' width='3' height='12'/%3E%3Crect x='280' width='5' height='12'/%3E%3Crect x='289' width='7' height='12'/%3E%3Crect x='300' width='3' height='12'/%3E%3Crect x='307' width='7' height='12'/%3E%3Crect x='318' width='3' height='12'/%3E%3Crect x='325' width='5' height='12'/%3E%3C/svg%3E") 0 0 / calc(var(--u) * 38) 100% repeat-x; }
.ct-n { position: absolute; left: calc(var(--u) * var(--x)); bottom: calc(var(--u) * 3.2); font: 500 calc(var(--u) * 1.9)/1 "Geist", var(--cs-font); letter-spacing: 0.02em; color: #d6ccbd; opacity: 0.72; white-space: nowrap; transform: translateX(-50%); }
.ct-void { position: absolute; left: 0; right: 0; top: calc(var(--u) * 5.5); height: calc(var(--u) * 24); background: repeating-linear-gradient(90deg, rgba(25, 23, 21, 0) 0 calc(var(--u) * 1), #191715 calc(var(--u) * 1) calc(var(--u) * 37), rgba(25, 23, 21, 0) calc(var(--u) * 37) calc(var(--u) * 38)); }   /* never exposed: the film's own dark */
/* A frame: a button the size of its place on the strip (a finger's width on a phone), the picture 36 by 24 in it */
.ct-cell { position: absolute; left: calc(var(--u) * var(--x)); top: 0; width: calc(var(--u) * 38); height: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ct-cell:focus-visible { outline: none; }
.ct-frame { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * 5.5); width: calc(var(--u) * 36); height: calc(var(--u) * 24); overflow: hidden; border-radius: calc(var(--u) * 0.5); background: #181614; }
.ct-cell:focus-visible .ct-frame { outline: 2px solid #f2c27c; outline-offset: 2px; }
.ct-img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.ct-cell.is-in .ct-img { opacity: 1; }
.ct-cell.is-lifted .ct-img { opacity: 0; transition-duration: 0.12s; }   /* its print is away in the tray */
/* The grease pencil: a pick's circle, a strip's name, a blank strip's note */
.ct-ring { position: absolute; left: calc(var(--u) * (var(--x) - 6)); top: calc(var(--u) * -5); width: calc(var(--u) * 50); height: calc(var(--u) * 45); overflow: visible; pointer-events: none; filter: url(#nb-pencil); }
.ct-wax { fill: none; stroke: var(--ct-wax); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.ct-sheen { fill: none; stroke: rgba(255, 204, 186, 0.34); stroke-width: 0.34; stroke-linecap: round; }
.ct-name, .ct-note { margin: 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 500; line-height: 1; color: var(--ct-wax); white-space: nowrap; pointer-events: none; filter: url(#nb-pencil); }
.ct-name { position: absolute; left: calc(var(--u) * 1.5); bottom: calc(100% + var(--u) * 1.3); font-size: calc(var(--u) * 6.4); transform: rotate(-1.4deg); transform-origin: 0 100%; }
.ct-note { position: absolute; left: 50%; top: 50%; font-size: calc(var(--u) * 10); transform: translate(-50%, -52%) rotate(-2.2deg); }
/* The loupe: the lens (the sheet at three times, moved under it), its curve (a vignette and a highlight), its rim,
   a reticle while a mouse steers it, and its shadow on the sheet */
.ct-loupe { position: absolute; left: 0; top: 0; z-index: 5; width: var(--ct-d); height: var(--ct-d); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; will-change: transform; }
.ct-loupe.is-on { opacity: 1; }
.ct-loupe.is-settling { transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ct-loupe::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; box-shadow: calc(var(--ct-d) * 0.02) calc(var(--ct-d) * 0.07) calc(var(--ct-d) * 0.13) rgba(0, 0, 0, 0.42), 0 calc(var(--ct-d) * 0.02) calc(var(--ct-d) * 0.04) rgba(0, 0, 0, 0.32); }
.ct-lens { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0c0b0a; -webkit-mask-image: radial-gradient(closest-side, #000 99%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(closest-side, #000 99%, rgba(0, 0, 0, 0) 100%); }   /* the mask: iPhone Safari clips a moving layer to a round corner only so */
.ct-mag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.ct-lensfx { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0) 36%), radial-gradient(circle, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.55) 97%); box-shadow: inset 0 0 0 calc(var(--ct-d) * 0.03) #231e1b, inset 0 0 0 calc(var(--ct-d) * 0.03 + 1.5px) rgba(255, 230, 200, 0.3), inset 0 0 calc(var(--ct-d) * 0.06) calc(var(--ct-d) * 0.03) rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 calc(var(--ct-d) * 0.012 + 1px) #3a332d; }
.ct-lensfx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; opacity: 0; transition: opacity 0.15s ease; background: linear-gradient(var(--ct-wax), var(--ct-wax)) 50% 0 / 1px 3.5px no-repeat, linear-gradient(var(--ct-wax), var(--ct-wax)) 50% 100% / 1px 3.5px no-repeat, linear-gradient(var(--ct-wax), var(--ct-wax)) 0 50% / 3.5px 1px no-repeat, linear-gradient(var(--ct-wax), var(--ct-wax)) 100% 50% / 3.5px 1px no-repeat; }
.ct-desk.is-looking ~ .ct-loupe .ct-lensfx::after { opacity: 0.6; }
.ct:has(.ct-cell:focus-visible) .ct-loupe::after { content: ""; position: absolute; inset: calc(var(--ct-d) * -0.012 - 5px); border-radius: 50%; border: 2px solid #f2c27c; }   /* the keyboard's focus, round the loupe that sits on the frame (the frame's own ring is under it) */
/* The darkroom: the sheet goes dark under the scrim, the print over it in About's tray, the safelight between */
.ct-scrim { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 5, 4, 0.62), rgba(5, 3, 2, 0.84)); }
.ct .ct-print.ab-peek { position: absolute; z-index: 20; margin: 0; opacity: 1; transform: none; transform-origin: 0 0; transition: none; }
.ct-print .ab-peek-frame { aspect-ratio: 3 / 2; }
.ct-print .ab-peek-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The bar: About's ON AIR bar, where the dock is: what's under the loupe, the sound, SKIP in the darkroom, LEAVE */
.ct .ct-bar { z-index: 30; }
.ct .ct-where { display: block; min-width: 124px; padding: 0 14px; line-height: 42px; text-align: center; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.ct-bar [hidden] { display: none; }
@media (max-width: 599px) {
  .ct .ct-bar .ld-pill { height: 44px; }
  .ct .ct-bar .ab-air-skip { min-width: 44px; padding: 12px 10px; }
  .ct .ct-where { height: 44px; min-width: 0; max-width: 46vw; padding: 0 10px; line-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct, .ab-air.ct-bar, .ct-img, .ct-loupe, .ct-loupe.is-settling, .ct-lensfx::after { transition: none; }
}

/* ================= The studio (studio.html; studio.js, studio/scene.js) =================
   The desk in 3D over the whole screen, as dark as the room, with BA top left and the dock at the bottom as on About
   (lower down, to give the desk the room); on air, the show's bar where the dock was. The desk's controls on the page
   (.st-desk) stay out of sight till the keyboard is in them, then show as a panel of the dock's glass; with no 3D they
   are the desk, under a still of the console (.st-is-still). A phone or a tablet takes the desk a part at a time
   (.st-parts, the page's own scrolling, snapped), with the running order under the meter bridge. */
html:has(.st-body) { height: 100%; overflow: hidden; overscroll-behavior: none; background: #0c0907; }
.st-body { --st-ground: #0c0907; --ab-dock-at: calc(20px + env(safe-area-inset-bottom)); height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--st-ground); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.st-body::before, .st-body::after { content: none; }   /* About's fades into its ground: nothing to fade here */
.st-body .ab-edge { background-color: var(--st-ground); }
.st { position: fixed; inset: 0; }
.st-stage { position: absolute; inset: 0; overflow: hidden; }
.st-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; opacity: 0; transition: opacity 0.9s ease; }
.st-gl.is-on { opacity: 1; }
.st-gl[hidden] { display: none; }
.st-dragging, .st-dragging .st-gl { cursor: ns-resize; }
.st-parts, .st-pager, .st-still-frame[hidden] { display: none; }
.st-nojs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* without JavaScript: the still, and nothing to press */
.st-hint { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--ab-dock-at) + var(--ab-dock-h) + 14px); margin: 0; transform: translateX(-50%); font-size: 11px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-gold); opacity: 0.8; white-space: nowrap; pointer-events: none; }
.st-hint[hidden] { display: none; }
/* The projects menu open (landing.js's .has-menu): the hint and the dots go from under it, as the landing's title does,
   and the desk takes no tap or click while it's open, so one beside the menu closes it and doesn't work a control too */
.st-hint, .st-pager { transition: opacity 0.4s ease; }
.has-menu .st-hint, .has-menu .st-pager { opacity: 0; }
.has-menu .st { pointer-events: none; }
.st-air .ab-air-now { max-width: min(520px, calc(100vw - 32px - 96px)); }

/* The desk's controls: out of sight (still there for a screen reader), a panel while the keyboard is in them */
.st-desk { position: fixed; z-index: 12; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-desk:focus-within, .st-is-still .st-desk { left: 50%; top: calc(16px + env(safe-area-inset-top)); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 1.2fr); align-items: start; gap: 16px; width: min(900px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 32px - var(--ab-dock-at) - var(--ab-dock-h)); overflow: auto; clip-path: none; white-space: normal; padding: 16px; border: 1px solid rgba(18, 22, 35, 0.5); border-radius: 24px; background: rgba(11, 14, 24, 0.72); -webkit-backdrop-filter: blur(17px) saturate(1.4); backdrop-filter: blur(17px) saturate(1.4); color: var(--cs-cream); transform: translateX(-50%); }
@media (max-width: 759px) { .st-desk:focus-within, .st-is-still .st-desk { grid-template-columns: minmax(0, 1fr); } }
.st-desk-low .st-desk:focus-within { top: auto; bottom: calc(var(--ab-dock-at) + var(--ab-dock-h) + 12px); }   /* the control it's on is high on the desk: the panel goes low */
.st-strips { display: flex; flex-direction: column; gap: 6px; }
.st-strip { display: grid; grid-template-columns: 74px auto auto minmax(72px, 1fr); align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.st-strip legend { float: left; padding: 0; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); white-space: nowrap; }
.st-btn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(226, 194, 153, 0.2); border-radius: 12px; background: rgba(11, 14, 24, 0.3); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.st-btn:hover { background: rgba(226, 194, 153, 0.1); }
.st-btn[data-act="pgm"][aria-pressed="true"] { border-color: rgba(122, 222, 150, 0.45); background: rgba(70, 190, 110, 0.18); color: #a6ecbd; }
.st-btn--on[aria-pressed="true"] { border-color: #e0402b; background: #c8321f; color: #fff; }
.st-pad.is-lit { border-color: rgba(255, 176, 96, 0.6); background: rgba(255, 158, 72, 0.28); color: #ffe0b6; }
.st-cams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.st-cams-label { grid-column: 1 / -1; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); }
.st-cam { padding: 0 6px; }
.st-cam[aria-pressed="true"] { border-color: #e0402b; background: rgba(224, 64, 43, 0.28); color: #ffd9d0; }   /* the live shot (and AUTO while it's on): a tally light */
body:not(.st-is-3d) .st-cams, .st-is-still .st-cams { display: none; }   /* shots need the 3D */
.st-btn:disabled { opacity: 0.4; cursor: default; }
.st-fader { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--cs-gold); cursor: pointer; }
.st-side { display: flex; flex-direction: column; gap: 10px; }
.st-mon { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold); }
.st-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-pad { padding: 0 8px; }
.st-ro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-ro-show { font-size: 13px; line-height: 18px; color: var(--cs-cream); }
.st-ro-list { display: flex; flex-direction: column; gap: 2px; counter-reset: ro; }
.st-ro-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 5px 10px; border-radius: 10px; text-align: left; color: var(--cs-cream); font-size: 13px; line-height: 17px; counter-increment: ro; }
.st-ro-row::before { content: counter(ro, decimal-leading-zero); grid-row: span 2; font-family: Geist, var(--cs-font); font-size: 11px; color: var(--cs-muted); }
.st-ro-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ro-artist { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--cs-muted); }
.st-ro-time { grid-column: 3; grid-row: 1 / span 2; font-family: Geist, var(--cs-font); font-size: 11px; font-variant-numeric: tabular-nums; color: #f0a14c; }
button.st-ro-row:hover:not(:disabled) { background: rgba(226, 194, 153, 0.08); }
button.st-ro-row:disabled { cursor: default; }
.st-ro-row.is-now { background: rgba(240, 146, 58, 0.16); box-shadow: inset 3px 0 0 #f0923a; }
.st-ro-row.is-now .st-ro-title { color: #ffe6c4; }
.st-ro-row.is-next { counter-increment: none; }   /* past the hour, the show coming up: not one of this show's items, so no number */
.st-ro-row.is-next::before { content: ''; }
.st-ro-row.is-next .st-ro-title { color: #f0a14c; }

/* A phone, or a tablet: the desk a part at a time, swiped along; dots under it for the parts; the running order under the meter bridge */
@media (max-width: 699px), (pointer: coarse) and (max-width: 1199px) {
  .st-parts { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
  .st-parts::-webkit-scrollbar { display: none; }
  .st-part { position: relative; flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .st-pager:not([hidden]) { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--ab-dock-at) + var(--ab-dock-h) + 2px); display: flex; transform: translateX(-50%); }
  .st-pager button { display: grid; place-items: center; width: 44px; height: 44px; }
  .st-pager button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(226, 194, 153, 0.35); transition: background 0.2s ease, transform 0.2s ease; }
  .st-pager button[aria-current]::before { background: var(--cs-gold); transform: scale(1.3); }
  .st-hint { bottom: calc(var(--ab-dock-at) + var(--ab-dock-h) + 50px); }
  .st-part--bridge .st-ro { position: absolute; left: 16px; right: 16px; top: 39%; bottom: calc(var(--ab-dock-at) + var(--ab-dock-h) + 76px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
  .st-part--bridge .st-ro-show { display: none; }   /* the screen above says it */
  .st-cams { display: none; }   /* a phone takes the desk a part at a time: no camera shots */
}
.st-is-still .st-parts, .st-is-still .st-pager { display: none !important; }

/* No 3D: the still of the console, its clock kept to Lagos's time and its sign lit on air, and the controls under it */
html:has(.st-is-still) { height: auto; overflow: auto; }
.st-body.st-is-still { height: auto; overflow: visible; -webkit-user-select: auto; user-select: auto; }
.st-is-still .st { position: static; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: calc(72px + env(safe-area-inset-top)) 16px calc(var(--ab-dock-at) + var(--ab-dock-h) + 32px); }
.st-is-still .st-stage { position: relative; inset: auto; width: min(900px, 100%); }
.st-is-still .st-hint { position: static; transform: none; }
.st-is-still .st-desk { position: static; transform: none; width: min(900px, 100%); max-height: none; }
.st-still-frame { position: relative; aspect-ratio: 1600 / 1000; container-type: inline-size; overflow: hidden; border-radius: var(--cs-radius); background: #0b0908; }
.st-still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-still-clock { position: absolute; left: 22.35%; top: 50.35%; width: 8.1%; height: 3.3%; display: grid; place-items: center; margin: 0; font-family: Geist, var(--cs-font); font-size: 1.95cqi; line-height: 1; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: #ff4a2a; text-shadow: 0 0 0.5cqi rgba(255, 60, 30, 0.85); }
.st-still-sign { position: absolute; left: 58.2%; top: 11.9%; width: 13.5%; height: 6.6%; border-radius: 2px; opacity: 0; background: rgba(255, 60, 36, 0.5); mix-blend-mode: screen; box-shadow: 0 0 3cqi 1cqi rgba(255, 40, 20, 0.5); transition: opacity 0.4s ease; }
.st-still-sign.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .st-gl, .st-still-sign, .st-btn, .st-hint, .st-pager, .st-pager button::before { transition: none; } }
@media print {
  .ld-gl, .ld-tag, .ld-nav, .ld-exit, .ld-top, .ld-title, .ld-notice, .ld-spot, .ld-scene::before, .ld-scene::after, .ab-body::after, .ab-body::before, .ab-home, .ab-where, .ab-window, .ab-shade, .nb, .tw, .ab-edge, .ab-air, .ab-namecard, .ab-safelight, .ab-peek-bath { display: none !important; }   /* the landing prints as its photograph */
  .ld-body, html:has(.ld-body) { height: auto; overflow: visible; }
  .ld, .ld-scene, .ld-img { position: static; }
  @page { size: A4; margin: 14mm 14mm 16mm; }
  :root { --cs-ground: #fff; --cs-panel: #f5f1ea; --cs-gold: #6e5230; --cs-gold-strong: #6e5230; --cs-cream: #1a1614; --cs-title: #1a1614; }
  html, body { background: #fff; }
  html { scroll-padding-top: 0; }

  /* Screen furniture: the ruler and tabs, the details column (its facts print inline), links out, carousels */
  .cs-bar, .cs-scroll, .cs-side, .cs-crumbs, .cs-foot, .cs-live, .cs-screens, .cs-shots video, .hm-open, .cs-skip, .cs-media-btn { display: none !important; }
  .cs { max-width: none; }
  .cs-col { padding-inline: 0; }

  .cs-print-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; width: 100%; padding-bottom: 8px; border-bottom: 0.5pt solid #d8d0c4; font-size: 8.5pt; line-height: 1.4; color: #4a4540; }
  .cs-print-head b { font-weight: 500; color: #1a1614; }
  .cs-print-head span + span { margin-left: 16px; }
  /* Block layout, not flex: Chrome keeps a heading with what follows it only in block flow */
  .cs-col, .cs-panel, .cs-panel[hidden] { display: block !important; }
  .cs-print-part { display: block; width: 100%; margin: 18px 0 14px; font-size: 9pt; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-gold); }
  .cs-panel + .cs-panel .cs-print-part { margin-top: 30px; padding-top: 12px; border-top: 0.5pt solid #d8d0c4; }   /* the next tab follows on, under a rule */

  /* Hero: the wide desktop capture, kept to a third of a page */
  .cs-hero { padding: 14px; break-inside: avoid; }
  .cs-hero img { aspect-ratio: auto; height: auto; }
  .cs-hero--print picture img, .cs--zart .cs-hero picture img { max-height: 100mm; }
  .cs--zart .cs-hero picture img { height: 100mm; }

  .cs-intro { padding-block: 22px 18px; gap: 16px; }
  .cs-title { font-size: 28px; line-height: 30px; }
  .cs-body, .cs-meta-item p { font-size: 10.5pt; line-height: 1.45; }
  .cs-body p + p { margin-top: 8px; }
  .cs-meta--inline { flex-direction: row; align-items: flex-start; gap: 24px; max-width: none; }
  .cs-meta--inline .cs-meta-item { flex: 1 1 0; gap: 4px; }

  /* Cards and tables drop the dark fills; the coloured bars and the matching bar keep theirs */
  .cs-card { background: var(--cs-panel) !important; box-shadow: none !important; margin-block: 16px; padding: 18px 16px; gap: 14px; }
  .cs-step-name { color: #4a4540; }
  .cs-step-bar, .cs-livebar, .cs-livebar * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-livebar.is-sweeping .cs-livebar-row--fill { animation: none; clip-path: inset(0 calc(100% - 68.6%) 0 0); }


  /* Stills two to a row, fully shown (no fade-in), with a poster in place of each recording */
  .cs-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .cs-shot-frame, .cs-shot-frame.cs-shot-frame--phones, .cs-shot-frame.cs-shot-frame--film { aspect-ratio: 16 / 10; box-shadow: none; }
  .cs-shot-cap { font-size: 8.5pt; line-height: 1.35; }
  .cs-print-poster { display: block; }

  /* Every carousel screen, four to a row, each with its heading and caption */
  .cs-print-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; width: 100%; }
  .cs-print-grid figure { display: flex; flex-direction: column; gap: 8px; }
  .cs-print-grid img { width: 100%; height: auto; }
  .cs-screens--video + .cs-print-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* the recordings, one row */
  .cs-screens--video + .cs-print-grid img { border: 3px solid #0e1116; border-radius: 14px; }
  .cs-print-grid h3 { font-size: 9.5pt; line-height: 1.3; font-weight: 500; color: #1a1614; }
  .cs-print-grid p { font-size: 8pt; line-height: 1.4; color: #4a4540; }

  .cs-card, .cs-livebar, .cs-shot, .cs-print-grid figure, .hm-hero { break-inside: avoid; }
  /* An essay: its figures whole, the recording as its first frame (the poster), in the middle of its panel */
  .es-fig { break-inside: avoid; }
  .es-frame.cs-shots { display: grid; grid-template-columns: none; gap: 0; }
  .es-head, .es .ab-head { break-after: avoid; }
  .es ~ .ab-sec { break-inside: avoid; }   /* after an essay, the way on and the close each stay on one page */
  .es-pn { border-top: 0.5pt solid #d8d0c4; }   /* the essays before and after, as plain text under the print's rule, like the way on above it */
  .es-pn-arrow { display: none; }
  .es-pn-what { color: #4a4540; }
  /* A case study in About's frame: one column, as the two-column studies print; the next study and the close are the
     way on from the page, and the contact line is at the top */
  .ab-study .es-pn, .ab-study .ab-sec--quiet { display: none !important; }
  .ab-study .ab { padding-top: 0; }
  .ab-study .ab, .ab-study .ab-sec { display: block; }
  .ab-study .ab > *, .ab-study .cs-panel > *, .ab-study .cs-panel > .cs-wide { width: 100%; }
  .ab-study .cs-wide > .ab-head { max-width: none; }
  .ab-study .ab-sec { padding-block: 18px; }
  .ab-study .ab-sec > * + * { margin-top: 14px; }
  .ab-study .cs-intro { margin-top: 0; padding-block: 22px 18px; }
  .ab-study .ab-head { break-after: avoid; }
  .cs-flow, .ab-study .wr-note, .ab-study .ab-sec:has(> .cs-flow), .ab-study .ab-sec:has(> .cs-livebars) { break-inside: avoid; }   /* a section of steps or bars, its note with it */
  .cs-flow-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-flow-name { color: #4a4540; }
  .ab { padding-bottom: 0; }   /* About, Writing and the essays: the room kept for the dock is not needed on paper, and it pushed the last line onto a page of its own */
  .ab-peek::before { display: none; }   /* a photograph open on About, even mid-develop: as it is once developed, out of the tray */
  .ab-peek .ab-peek-frame { overflow: clip !important; background: var(--cs-panel) !important; }
  .ab-peek .ab-peek-frame::after { opacity: 1 !important; }
  .ab-peek .ab-peek-photo { opacity: 1 !important; animation: none !important; filter: none !important; mix-blend-mode: normal !important; }
  .es-head .ab-name, .ab-sec > .ab-name { color: var(--cs-gold); }   /* the title (an essay's, About's, Writing's) in the print's gold: its screen tint is too pale on paper */
  .cs-label, .cs-print-part { break-after: avoid; }
  .cs-print-part + * { break-before: avoid; }

  /* Writing page (writing.html): field notes print clearly with dark text */
  .wr-note-title { color: var(--cs-gold); }   /* note titles in dark brown */
  .wr-k { color: var(--cs-gold); }   /* problem/fix labels in dark brown */
  .wr-part { color: var(--cs-cream); }   /* problem/fix body text in dark (was cream-on-dark, unreadable on white) */
  .wr-essay-what { color: var(--cs-gold); }   /* essay descriptions in dark brown */

  /* The typewriter open (typewriter.js): the typed sheets are what prints, one A4 page each, on white, the prints and
     the x-outs as they are on the sheets (typewriter.js sets the page's margins to nothing while it's open) */
  /* The projector open (projector.js): the room isn't printed; the page prints as ever */
  .pj { display: none !important; }
  /* The contact sheet open (contactsheet.js): the room isn't printed either; All work prints as ever */
  .ct { display: none !important; }
  html.tw-open body > :not(.tw) { display: none !important; }
  html.tw-open .tw { display: block !important; position: static; opacity: 1; overflow: visible; background: none; }
  html.tw-open .tw > :not(.tw-pdf) { display: none !important; }
  html.tw-open .tw-pdf { display: block !important; position: static; }
  .tw-page { position: relative; width: 210mm; height: 296.5mm; overflow: hidden; break-inside: avoid; }
  .tw-page + .tw-page { break-before: page; }
  .tw-page .tw-sheet { transform: scale(1.3333); transform-origin: 0 0; background: #fff; box-shadow: none; }
  .tw-page .tw-sheet::before { display: none; }
  .tw-page .tw-print { margin-left: -18px; }   /* on the page, its edge on the page's edge (typewriter.js keeps its caption clear of it) */
  .tw-page .tw-print, .tw-page .tw-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}