/* Lumera Creative — the light edition
   Warm paper, one ink, a muted color for each project. A tall LUMERA drawn from Archivo's narrowest cut,
   Geist for everything else. On wide screens the opening and the work share one pinned stage that moves sideways. */

/* ---------- font (self-hosted, SIL OFL — see assets/fonts/OFL-Geist.txt): Geist 400–600, trimmed to what the site uses ---------- */
@font-face { font-family: "Geist"; src: url("../fonts/geist-lumera.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --paper: #EEEAE3;
  --paper-2: #E3DED5;
  --ink: #0E0D0B;
  --ink-2: #1B1A17;
  --muted: #5C574E;
  --line: rgba(14, 13, 11, .22);
  --gold: #D9A860;

  /* each project's color, and the capability panels' */
  --c-rok: #A9B58B;
  --c-rose: #C49C9D;
  --c-tirzahs: #D9897A;
  --c-bbs: #D8C095;
  --c-slate: #BDC9D4;
  --c-terra: #DE966B;
  --c-lilac: #C4BCD2;

  --m: max(3.2rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* clear of a notch on a phone held sideways */
  --text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.165, .84, .44, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  interpolate-size: allow-keywords;
}

/* The layout is drawn on a 1440 × 900 artboard and scales with the window: 1rem is 10 px at 1440.
   Reading sizes never go below their px floor (max()), so zoom still enlarges text. */
html { font-size: clamp(7.2px, .6944vw, 12.5px); }
@media (max-width: 1023px) { html { font-size: clamp(8.4px, 1.3021vw, 11px); } }
@media (max-width: 759px) { html { font-size: clamp(8.4px, 2.5641vw, 11px); } :root { --m: max(1.6rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 max(1.6rem, 15px)/1.45 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, video, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 14px 18px; background: var(--ink); color: var(--paper); font: 600 14px/1 var(--text); }
.skip:focus { top: 12px; }
.small { font-size: max(1.1rem, 12px); font-weight: 600; line-height: 1.35; letter-spacing: .03em; text-transform: uppercase; }
.dim { opacity: .62; }
.num { font-variant-numeric: tabular-nums; }
.i { width: max(1.4rem, 14px); height: max(1.4rem, 14px); flex: none; }
.big { font-size: 9.6rem; font-weight: 400; line-height: .95; letter-spacing: -.045em; }

/* ---------- the wordmark: six letters, each stretched to fill its share of the box ---------- */
.wm { display: flex; align-items: stretch; gap: 2.6%; width: 100%; height: 100%; }
.wm svg { flex-basis: 0; min-width: 0; height: 100%; fill: currentColor; overflow: visible; }

/* ---------- small parts ---------- */
.chip { display: inline-block; padding: .45em 1em; border: 1px solid currentColor; border-radius: 99px; }
.tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; padding: .5em .8em; border-radius: 99px; background: rgba(238, 234, 227, .9); color: var(--ink); font: 600 max(1.1rem, 12px)/1 var(--text); letter-spacing: .04em; text-transform: uppercase; }
.tag--inline { position: static; display: inline-block; margin-right: .6rem; background: none; border: 1px solid currentColor; color: inherit; vertical-align: 1px; }

/* pill: the label and a dot; ink rises through it on hover */
.pill {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem;
  min-height: max(5rem, 44px); padding: 0 2.4rem; border-radius: 99px;
  box-shadow: inset 0 0 0 1px currentColor;
  font: 600 max(1.1rem, 11px)/1 var(--text); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: color .45s var(--ease), transform .45s var(--ease);
}
.pill::after { content: ""; flex: none; width: .7rem; height: .7rem; min-width: 6px; min-height: 6px; border-radius: 50%; background: currentColor; }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); transform: translateY(101%); transition: transform .55s var(--ease); }
.pill:focus-visible::before, .pill[aria-expanded="true"]::before { transform: none; }
@media (hover: hover) { .pill:hover::before { transform: none; } }
.pill:focus-visible, .pill[aria-expanded="true"] { color: var(--paper); }
@media (hover: hover) { .pill:hover { color: var(--paper); } }
.pill .i { margin-left: -.4rem; }
.pill--light::before { background: var(--paper); }
.pill--light:focus-visible { color: var(--ink); }
@media (hover: hover) { .pill--light:hover { color: var(--ink); } }
.pill--gold { background: var(--gold); color: var(--ink); box-shadow: none; }
.pill--gold::before { background: var(--paper); }
.pill--gold:focus-visible { color: var(--ink); }
@media (hover: hover) { .pill--gold:hover { color: var(--ink); } }

/* round arrow button: an outline that fills from the center; the arrow leaves and a new one arrives */
.round {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: grid; place-items: center; width: max(6rem, 48px); height: max(6rem, 48px); border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor; transition: color .35s var(--ease) .05s, transform .45s var(--ease);
}
.round::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .5s var(--ease); }
.round .i { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.round .i + .i { transform: translate(-160%, 160%); }
.round:focus-visible::before { transform: scale(1); }
@media (hover: hover) { .round:hover::before { transform: scale(1); } }
.round:focus-visible { color: var(--paper); }
@media (hover: hover) { .round:hover { color: var(--paper); } }
.round:focus-visible .i:first-child { transform: translate(160%, -160%); }
@media (hover: hover) { .round:hover .i:first-child { transform: translate(160%, -160%); } }
.round:focus-visible .i + .i { transform: none; }
@media (hover: hover) { .round:hover .i + .i { transform: none; } }

/* a press answers immediately under the finger, then springs back on the softer base transition */
.pill:active, .round:active, .copy:active, .menu-close:active { transform: scale(.95); transition-duration: .1s; }
.burger:active { transform: scale(.96); transition-duration: .1s; }
.stream-pill:active { transform: translateX(-50%) scale(.95); }
.list-rows a:active { padding-left: 1rem; }
.hero-nav a:active i { transform: scale(2.6); }

/* ---------- the opening ---------- */
.loader { display: none; }
.intro-run .loader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--ease-io);
  animation: loader-away .6s 5s forwards;          /* if the script never arrives, the page still shows */
}
@keyframes loader-away { to { opacity: 0; visibility: hidden; } }
.loader .wm { width: 24rem; height: 13rem; }
/* each letter shows as a thin slice through its middle */
.loader .wm svg { clip-path: inset(0 48.6%); opacity: 0; transform: scaleY(.4); transition: opacity .5s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k) * 70ms); }
.loader.show .wm svg { opacity: 1; transform: none; }
.loader.out { clip-path: inset(0 100% 0 0); pointer-events: none; }
/* the hero's letters open from those slices once the page has slid in */
.intro-run .hero-mark svg { clip-path: inset(0 48.6%); }
.intro-go .hero-mark svg { clip-path: inset(0 0%); transition: clip-path 1.2s var(--ease-io); transition-delay: calc(240ms + var(--k) * 70ms); }
/* (moved, never hidden: the text is painted under the loader from the start, so it can be the first paint) */
.intro-run .hero-nav a, .intro-run .hero-tag, .intro-run .hero-sub, .intro-run .hero-foot { transform: translateY(2.4rem); }
.intro-go .hero-nav a, .intro-go .hero-tag, .intro-go .hero-sub, .intro-go .hero-foot { transform: none; transition: transform 1.2s var(--ease) .8s; }
.intro-go .hero-nav a:nth-child(2) { transition-delay: .96s; }
.intro-go .hero-nav a:nth-child(3) { transition-delay: 1.02s; }
.intro-go .hero-nav a:nth-child(4) { transition-delay: 1.08s; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: flex-start; justify-content: space-between; padding: 2rem var(--m); pointer-events: none; }
/* the small logo: our owl in its ring, ink on paper and light over the dark sections */
.logo { display: block; width: max(5.2rem, 44px); height: max(5.2rem, 44px); color: var(--ink); pointer-events: auto; transition: opacity .5s var(--ease), transform .7s var(--ease), color .3s; }
.logo-owl { display: block; width: 100%; height: 100%; fill: currentColor; }
.top.on-dark .logo { color: var(--paper); }
.top.logo-away .logo { opacity: 0; transform: translateY(-.8rem); visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.burger {
  pointer-events: auto; display: flex; align-items: center; gap: 1.2rem;
  height: max(5.2rem, 44px); padding: 0 1.4rem 0 2.2rem; border-radius: 99px;
  background: var(--ink-2); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  font: 600 max(1.1rem, 11px)/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.burger-dot { position: relative; display: grid; place-items: center; width: .8rem; height: .8rem; border-radius: 50%; background: var(--gold); transition: width .45s var(--ease), height .45s var(--ease); }
.burger-dot i { position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 1px; margin-left: -.6rem; background: var(--ink); opacity: 0; transition: opacity .2s, transform .45s var(--ease); }
.burger-dot i:first-child { transform: translateY(-.25rem); }
.burger-dot i + i { transform: translateY(.25rem); }
.burger:focus-visible .burger-dot { width: 3rem; height: 3rem; }
@media (hover: hover) { .burger:hover .burger-dot { width: 3rem; height: 3rem; } }
.burger:focus-visible .burger-dot i { opacity: 1; transition-delay: .12s; }
@media (hover: hover) { .burger:hover .burger-dot i { opacity: 1; transition-delay: .12s; } }
/* in the wide opening the hero carries its own menu; the small logo and the pill arrive once it moves away */
/* hidden also means out of the tab order (visibility), switched after the fade so the fade still shows */
.top .logo, .burger { visibility: visible; }
.pin:not(.past-hero) .top .logo, .pin:not(.narrow):not(.past-hero) .burger { opacity: 0; transform: translateY(-140%); visibility: hidden; transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .7s; }
.js:not(.pin):not(.past-hero) .top .logo { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--paper); clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease-io); }   /* leaving is quicker than arriving */
.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); transition-duration: .75s; }
.menu-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; height: 100%; padding: 2rem var(--m) 3rem; overflow: hidden; }
.menu-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; }
.logo--menu { color: var(--paper); }
.menu-close { position: relative; width: max(5.2rem, 44px); height: max(5.2rem, 44px); border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform .5s var(--ease); }
.menu-close i { position: absolute; left: 50%; top: 50%; width: 1.6rem; height: 1.5px; margin: -.75px 0 0 -.8rem; background: currentColor; transform: rotate(45deg); }
.menu-close i + i { transform: rotate(-45deg); }
@media (hover: hover) { .menu-close:hover { transform: rotate(90deg); } }
.menu-nav { grid-column: 1; align-self: center; display: grid; justify-items: start; gap: .4rem; padding-left: 10vw; }
.menu-nav a { overflow: hidden; font-size: max(4.8rem, 34px); line-height: 1.12; letter-spacing: -.03em; }
.menu-nav a span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease), opacity .3s; }
.menu.is-open .menu-nav a span { transform: none; }
.menu.is-open .menu-nav a:nth-child(1) span { transition-delay: .22s; }
.menu.is-open .menu-nav a:nth-child(2) span { transition-delay: .27s; }
.menu.is-open .menu-nav a:nth-child(3) span { transition-delay: .32s; }
.menu.is-open .menu-nav a:nth-child(4) span { transition-delay: .37s; }
@media (hover: hover) { .menu-nav a:hover span { opacity: .55; } }
.menu-info { grid-column: 2; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 12vh; }
.menu-info a { display: block; padding: .6rem 0; }
@media (hover: hover) { .menu-info a:hover { opacity: .6; } }
.menu-mark { grid-column: 2; justify-self: end; width: 100%; height: 34vh; transform: translateY(12%); transition: transform 1.1s var(--ease) .35s; }
.menu:not(.is-open) .menu-mark { transform: translateY(110%); }

/* ---------- the strip: stacked by default (phones, tablets, reduced motion, no JavaScript) ---------- */
.stage { position: relative; }
.panel { position: relative; overflow: hidden; }
.panel--hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 9rem var(--m) 2.4rem; background: var(--paper); }
.hero-nav { display: none; }
.hero-h { display: flex; flex-direction: column; margin-top: auto; font-weight: 400; }
.hero-mark { display: block; height: 32vh; height: 32svh; min-height: 18rem; color: var(--ink); }
.hero-tag { display: block; margin-top: 2rem; font-size: max(2.4rem, 20px); line-height: 1.1; letter-spacing: -.02em; }
.hero-sub { max-width: 34ch; margin-top: 1rem; color: var(--muted); font-size: max(1.6rem, 15px); }
/* the opening hint: only where the page moves sideways; quiet, in the muted ink, gone once the visitor starts to explore */
.cue { display: none; }
.pin .cue { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.2rem; color: var(--muted); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.cue-ico { flex: none; width: max(2.4rem, 22px); height: max(2.4rem, 22px); animation: cue-nudge 3.2s var(--ease-io) infinite; }
@keyframes cue-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, 2px); } }
.cue-off .cue { opacity: 0; transform: translateY(.6rem); pointer-events: none; }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 3.6rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.hero-foot a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -14px 0; }   /* a 44 px target in the same place */
@media (hover: hover) { .hero-foot a:hover { opacity: .6; } }

.panel--proj { display: flex; flex-direction: column; background: var(--pc); }
.p-scroll { position: relative; }
.p-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(14, 13, 11, .06); }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.panel--proj { cursor: pointer; }
@media (hover: hover) {
  .panel--proj:hover .p-media img { transform: scale(1.04); }
  .panel--proj:hover .round::before { transform: scale(1); }
  .panel--proj:hover .round { color: var(--paper); }
  .panel--proj:hover .round .i:first-child { transform: translate(160%, -160%); }
  .panel--proj:hover .round .i + .i { transform: none; }
}
.panel--bbs .p-media img { object-fit: contain; mix-blend-mode: multiply; }
.p-info { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 2.4rem 1rem; min-height: 26rem; padding: 1.6rem 2rem 2rem; }
.p-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 3rem; }
.p-name { grid-column: 1 / -1; align-self: center; justify-self: center; font-size: max(6.4rem, 40px); line-height: 1; letter-spacing: -.04em; text-align: center; }
.p-num { align-self: end; }
.panel--proj .round { align-self: end; }
.stream, .stream-pill { display: none; }

.panel--list { background: var(--paper); padding: 9rem var(--m) 6rem; }
.list-in { display: grid; gap: 4rem; }
.list-label { display: flex; justify-content: space-between; margin-bottom: 1.2rem; }
/* every project: the featured three open their study below, the rest open their live site */
.list-rows a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; min-height: 44px; padding: 1.1rem 0; border-bottom: 1px solid var(--line); transition: padding .45s var(--ease); }
.list-rows li:first-child a { border-top: 1px solid var(--ink); }
.list-rows li:nth-child(3) a { border-bottom-color: var(--ink); }   /* the featured three, then the rest */
.list-rows a:focus-visible { padding-left: 1rem; }
@media (hover: hover) { .list-rows a:hover { padding-left: 1rem; } }
.lr-kind { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); text-align: right; }
.lr-kind .i { width: max(1.1rem, 11px); height: max(1.1rem, 11px); }
@media (hover: hover) { .list-rows a:hover .lr-kind { color: var(--ink); } }
.list-text { max-width: 34ch; font-size: max(2.4rem, 20px); line-height: 1.2; letter-spacing: -.015em; }

/* ---------- the strip on wide screens: one pinned stage; the script sets every panel's width and position ---------- */
.pin .strip { position: relative; }
.pin .stage, .pin .caps-stage, .sys-demo { touch-action: pan-y pinch-zoom; }
.pin.zoomed .stage, .pin.zoomed .caps-stage, .zoomed .sys-demo, .pin.narrow.zoomed .list-in { touch-action: auto; }   /* zoomed in: sideways pans the view */
.pin .stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.pin .panel { position: absolute; top: 0; left: 0; height: 100%; will-change: transform, width; }
.pin .panel--hero { width: 50vw; min-height: 0; padding: 2.4rem 3.2rem 2.4rem; }
/* the resting layout, so the first paint already matches what the script draws */
.pin .panel:nth-child(2) { width: 30vw; transform: translate3d(50vw, 0, 0); }
.pin .panel:nth-child(3) { width: 10vw; transform: translate3d(80vw, 0, 0); }
.pin .panel:nth-child(4) { width: 5vw; transform: translate3d(90vw, 0, 0); }
.pin .panel:nth-child(5) { width: 5vw; transform: translate3d(95vw, 0, 0); }
.pin .hero-nav { display: flex; justify-content: space-between; font-size: max(1.4rem, 13px); }
.pin .hero-nav a { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; }
.hero-nav i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--dot); transition: transform .5s var(--ease); }
.hero-nav a:focus-visible i { transform: scale(2.6); }
@media (hover: hover) { .hero-nav a:hover i { transform: scale(2.6); } }
.pin .hero-mark { height: 42vh; }
.pin .panel--proj { display: block; }
.pin .p-media { aspect-ratio: auto; width: 100%; height: 62vh; }
.pin .p-info { position: absolute; left: 0; bottom: 0; width: 62vw; height: 38vh; min-height: 0; }
.pin .panel--list { padding: 0; }
.pin .list-in { position: absolute; top: 0; left: 0; width: 74vw; height: 100%; padding: 10vh 3.2rem 5vh 4rem; grid-template-columns: 1fr 46rem; grid-template-rows: auto 1fr auto; gap: 0; }
.pin .list-h { grid-column: 1; grid-row: 1; }
.pin .list-all { grid-column: 2; grid-row: 1 / 3; align-self: start; margin-top: 1.6rem; }
.pin .list-text { grid-column: 1 / -1; align-self: end; max-width: 34ch; }
/* the column the last project becomes, and the rest of the work streaming up it */
.pin .stream { display: grid; gap: 8px; margin-top: 8px; opacity: 0; transition: opacity .4s; }
.pin .stream.on { opacity: 1; }
.stream figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.stream img { width: 100%; height: 100%; object-fit: cover; }
.stream .on-white img { mix-blend-mode: multiply; }
.pin .stream-pill { display: inline-flex; position: absolute; left: 50%; bottom: 3.2vh; z-index: 3; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, color .45s var(--ease), visibility 0s linear .4s; }   /* hidden means out of the tab order too */
.pin .stream-pill.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s, color .45s var(--ease), visibility 0s; }
.pin .panel--bbs .p-info { transition: opacity .3s; }

/* phones and portrait tablets: the same stage, drawn for a tall window. The hero rests at 80% with the projects as
   strips beside it; each opens to 84%, then the project list slides in at full width. */
.pin.narrow .panel--hero { width: 80vw; padding: 9rem 2rem calc(2.4rem + 100lvh - 100svh); }
.pin.narrow .panel:nth-child(2) { width: 12vw; transform: translate3d(80vw, 0, 0); }
.pin.narrow .panel:nth-child(3) { width: 5vw; transform: translate3d(92vw, 0, 0); }
.pin.narrow .panel:nth-child(4) { width: 3vw; transform: translate3d(97vw, 0, 0); }
.pin.narrow .panel:nth-child(5) { width: 0; transform: translate3d(100vw, 0, 0); }
.pin.narrow .hero-nav { display: none; }
.pin.narrow .hero-mark { height: 34svh; min-height: 0; }
.pin.narrow .hero-h { min-height: 0; }   /* on a short phone the wordmark gives up height, so the opening's last line clears the pager */
.pin.narrow .hero-foot { flex-direction: column; margin-top: 2.4rem; }
.pin.narrow .p-media { height: 50svh; }
.pin.narrow .p-info { top: 50svh; height: auto; width: 84vw; padding: 1.6rem 1.6rem calc(1.6rem + 100lvh - 100svh); }
.pin.narrow .p-name { font-size: max(4.4rem, 34px); }
.pin.narrow .list-in { width: 100vw; padding: 9rem var(--m) calc(3.2rem + 100lvh - 100svh); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 2.4rem; }
.pin.narrow .list-h { grid-column: 1; grid-row: auto; font-size: max(5.6rem, 40px); }
.pin.narrow .list-all { grid-column: 1; grid-row: auto; margin-top: 0; }
.pin.narrow .list-rows a { padding: .6rem 0; }
.pin.narrow .list-text { grid-column: 1; font-size: max(1.9rem, 17px); }
.pin.narrow .stream, .pin.narrow .stream-pill { display: none; }
/* phones: the project list keeps every row and its closing words. Each row reads name over kind; if a short screen still can't hold
   it all, the panel scrolls on its own before the page moves on (nothing is cut off) */
.pin.narrow .list-in { padding-top: 8.4rem; gap: 1.6rem; overflow-y: auto; overscroll-behavior-y: auto; touch-action: pan-y pinch-zoom; }   /* a scroller re-enables every pan inside it: sideways stays the stage's */
.pin.narrow .list-h { font-size: max(4.4rem, 34px); }
.pin.narrow .list-rows a { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.2rem; row-gap: .3rem; padding: .7rem 0; }
.pin.narrow .lr-kind { grid-column: 2; grid-row: 2; justify-content: flex-start; text-align: left; }
.pin.narrow .list-text { font-size: 16px; line-height: 1.45; letter-spacing: 0; }

/* previous / next on touch screens: a small pill with two round buttons and the current stage, inside the pinned stage */
.pager { display: none; }
.pager:not([hidden]) { z-index: 30; display: flex; align-items: center; gap: .2rem; padding: 4px; border-radius: 99px; background: rgba(238, 234, 227, .94); color: var(--ink); box-shadow: 0 0 0 1px rgba(14, 13, 11, .14), 0 10px 26px -16px rgba(14, 13, 11, .5); }
.pin .stage .pager, .pin .caps-stage .pager { position: absolute; }
.pin.narrow .stage .pager, .pin.narrow .caps-stage .pager { left: 50%; transform: translateX(-50%); bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh); }
/* wide layouts on touch screens: beside the menu button, where no panel puts its words (the script measures the button into --menu-w) */
.pin:not(.narrow) .stage .pager, .pin:not(.narrow) .caps-stage .pager { top: calc(2rem + (max(5.2rem, 44px) - 52px) / 2); right: calc(var(--m) + var(--menu-w, 10rem) + 1.2rem); }
@media (pointer: coarse) { .pin .hero-nav a { min-height: 44px; margin-block: -8px; } }   /* full-size touch targets in the same place */
/* the demonstration's: rides along the bottom of the screen while the stages stand in a column, and rests at the panel's foot */
.pager--demo { position: sticky; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); width: max-content; margin: calc(-52px - 1.6rem) auto 1.6rem; }
.has-pager-demo .sys-demo { padding-bottom: calc(52px + 4rem); }
.pager-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; transition: background-color .3s var(--ease), opacity .3s; }
.pager-btn .i { width: 16px; height: 16px; }
.pager-btn:active { background: rgba(14, 13, 11, .1); }
@media (hover: hover) { .pager-btn:hover { background: rgba(14, 13, 11, .08); } }
.pager-btn:disabled { opacity: .3; }
.pager-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pager-now { display: flex; align-items: baseline; gap: .5rem; min-width: 6.2em; justify-content: center; padding: 0 .4rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pager-now b { font-weight: 600; }
.pager-sep { opacity: .5; }
/* phones: the panels keep their words above the controls */
.pin.narrow.has-pager-strip .panel--hero { padding-bottom: calc(2.4rem + 6.6rem + 100lvh - 100svh); }
.pin.narrow.has-pager-strip .p-info { padding-bottom: calc(1.6rem + 6.6rem + 100lvh - 100svh); }
.pin.narrow.has-pager-strip .list-in { padding-bottom: calc(2.4rem + 6.6rem + 100lvh - 100svh); }
.pin.narrow.has-pager-caps .cap-nav { display: none; }

/* ---------- the studies ---------- */
.study { position: relative; padding: 14rem var(--m) 12rem; background: var(--sc, var(--paper)); color: var(--ink); --fg-2: rgba(14, 13, 11, .72); --rule: var(--line); }
.study-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2.4rem; margin-bottom: 8rem; }
.study-num { grid-column: 1 / -1; }
.study-num span { font-size: 1.3em; }
.study-title { grid-column: 1 / -1; font-size: max(14rem, 48px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.study-meta { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 3rem; align-self: start; }
.study-q { grid-column: 8 / span 5; font-size: max(2.4rem, 19px); line-height: 1.2; letter-spacing: -.015em; }
.study-q .small { display: block; margin-bottom: 1.2rem; }
.study-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; margin-top: 9rem; }
.study--bbs .study-body { margin: 0 0 9rem; }
.study-body--case { align-items: start; }
.rok-media { grid-column: 1 / span 5; }
.bbs-stage { grid-column: 1 / span 6; }

/* the case study: the overview introduces it, then objective and response with equal weight, the scope as one line,
   the context in full-size ink, and how we built it in a fold */
.case-overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; margin-bottom: 9rem; }
.case-overview > * { grid-column: 1 / span 9; }
.case-h { margin: 0 0 1.2rem; color: var(--fg-2); }
.case-lede { max-width: 46ch; font-size: max(2.8rem, 20px); line-height: 1.18; letter-spacing: -.02em; }
.case-detail { display: grid; gap: 4rem; align-content: start; }
.case-detail p { max-width: 56ch; font-size: max(1.8rem, 16px); line-height: 1.45; }
.case-cols { display: grid; gap: 4rem; }
.case-scope p { font-weight: 500; }
.case-context p { max-width: 60ch; font-size: max(1.5rem, 15px); }
.case-end { display: grid; gap: 3.2rem; justify-items: start; }
.case-end .build { justify-self: stretch; }
.study--rok .case-detail { grid-column: 7 / span 6; }
.study--bbs .case-detail { grid-column: 8 / span 5; }
.study--tirzahs .case-detail { grid-column: 8 / span 5; }
figcaption { margin-top: 1.4rem; max-width: 64ch; font-size: max(1.3rem, 13px); line-height: 1.45; color: var(--fg-2); }

/* how we built it */
.build { margin-top: 3.2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.build summary { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: max(5.6rem, 48px); list-style: none; cursor: pointer; font: 600 max(1.1rem, 11px)/1 var(--text); letter-spacing: .04em; text-transform: uppercase; }
.build summary::-webkit-details-marker { display: none; }
.build-h { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.build summary i { position: relative; flex: none; width: 1.4rem; height: 1.4rem; min-width: 12px; min-height: 12px; }
.build summary i::before, .build summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.build summary i::after { transform: rotate(90deg); }
.build[open] summary i::after { transform: rotate(0deg); }
.build-body { display: grid; gap: 1.6rem; padding-bottom: 2.4rem; }
.build-body p { max-width: 56ch; font-size: max(1.6rem, 15px); line-height: 1.45; }
.build::details-content { block-size: 0; overflow-y: clip; transition: block-size .6s var(--ease), content-visibility .6s allow-discrete; }
.build[open]::details-content { block-size: auto; }

/* the whole site on a laptop and a phone, at equal heights. The phone is drawn as an iPhone whose bezel is 3.5% of
   the screen's width, so the device is 1.07 × 2.2341 and its column is .2993 of the laptop's. */
.site { display: flex; flex-direction: column; }
.site > .site-screens { order: 1; }
.site > .site-live { order: 2; }                          /* the toggles come first in the page order (before the screens they open) and sit under them on screen */
.site > figcaption { order: 3; }
.site-screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .2993fr); column-gap: 2rem; align-items: start; }
.site--phone-left .site-screens { grid-template-columns: minmax(0, .2993fr) minmax(0, 1fr); }
.site--phone-left .site-phone { order: -1; }
.site-desk { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #000; border-radius: .6rem; }
.site-phone {
  position: relative; aspect-ratio: 1.07 / 2.2341; padding: 3.271%; border-radius: 16.36% / 7.83%; background: #1B1B1D;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1.5px #4A4A4F, 0 24px 50px -24px rgba(0, 0, 0, .45);
}
.phone-screen { position: relative; overflow: hidden; aspect-ratio: 780 / 1688; border-radius: 14% / 6.47%; background: #000; }
.phone-screen::before { content: ""; position: absolute; left: 50%; top: 1.2%; z-index: 5; width: 26%; height: 3.7%; border-radius: 999px; background: #000; transform: translateX(-50%); pointer-events: none; }
.site-phone::before, .site-phone::after { content: ""; position: absolute; width: 3px; background-repeat: no-repeat; }
.site-phone::before { left: -3px; top: 16%; height: 27%; border-radius: 2px 0 0 2px; background-image: linear-gradient(#2E2E31 0 0), linear-gradient(#2E2E31 0 0), linear-gradient(#2E2E31 0 0); background-size: 100% 13%, 100% 27%, 100% 27%; background-position: 0 0, 0 45%, 0 100%; }
.site-phone::after { right: -3px; top: 25%; height: 12%; border-radius: 0 2px 2px 0; background: #2E2E31; }
.media-video, .scrub-video { width: 100%; height: 100%; object-fit: cover; background: rgba(0, 0, 0, .25); }
.site-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .2993fr); column-gap: 2rem; margin-top: 1.6rem; }
.site--phone-left .site-live { grid-template-columns: minmax(0, .2993fr) minmax(0, 1fr); }
.site--phone-left .site-live [data-live="phone"] { order: -1; }
.live-btn { justify-self: start; }
.site-desk:focus-visible, .phone-screen:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.live-btn[hidden] { display: none; }
.live-btn::after { display: none; }
.live-frame { position: absolute; left: 0; top: 0; z-index: 3; border: 0; background: #fff; transform-origin: 0 0; }
.is-live > video, .is-live > .play { visibility: hidden; }
.is-live:not(.is-loaded)::after { content: attr(data-wait); position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font: 500 12px/1 var(--text); letter-spacing: .08em; color: #EEE8DD; background: #0D0C0A; pointer-events: none; }
.live-slow { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; background: #0D0C0A; color: #EEEAE3; text-align: center; font: 500 13px/1.45 var(--text); }
.live-slow a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(238, 234, 227, .5); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.play { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(14, 13, 11, .82); color: #EEEAE3; box-shadow: 0 0 0 1px rgba(238, 234, 227, .4); }
.play::before { content: ""; width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }   /* pause */
.play[data-state="paused"]::before { width: 0; height: 0; background: none; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }   /* play */
@media (hover: hover) { .play:hover { background: #0E0D0B; } }

/* rōk: the pour, scrubbed by scroll */
.crop { position: relative; width: min(100%, calc(76vh * 780 / 1050)); aspect-ratio: 780 / 1050; overflow: hidden; background: #1b1f14; border-radius: .6rem; }
.scrub-meter { position: absolute; top: 14px; bottom: 14px; right: 14px; z-index: 2; width: 2px; background: rgba(255, 255, 255, .25); }
.scrub-meter i { position: absolute; inset: 0; background: #E9F0C4; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }

/* Tirzahs: the two kitchens, side by side */
.study--tirzahs .study-title { font-size: max(10rem, 40px); }
.study--tirzahs .study-body { margin: 0 0 9rem; }
.tz-stage { grid-column: 1 / span 6; }
.tz-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tz-pane { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .6rem; background: var(--paper-2); }
.tz-pane img { width: 100%; height: 100%; object-fit: cover; }
.tz-label { position: absolute; left: 1.2rem; bottom: 1.2rem; max-width: calc(100% - 2.4rem); padding: .7rem 1.3rem; border-radius: 99px; background: var(--paper); color: var(--ink); font: 600 12px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; }

/* BB's: inside the window the photograph, outside it the pencil sketch */
.bbs-art { position: relative; aspect-ratio: 1; overflow: hidden; background: #F7F2E8; border-radius: .6rem; }
.bbs-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.bbs-photo { position: absolute; inset: 0; clip-path: inset(var(--it, 6%) var(--ir, 6%) var(--ib, 6%) var(--il, 50%)); }
.bbs-window { position: absolute; left: var(--wl, 50%); top: var(--wt, 6%); width: var(--ww, 44%); height: var(--wh, 88%); outline: 1px solid var(--ink); pointer-events: none; }

/* ---------- approach: the dark room ---------- */
.approach { display: grid; grid-template-columns: 5fr 7fr; column-gap: 6rem; padding: 18rem var(--m) 16rem; background: var(--ink); color: var(--paper); }
.ap-side { position: sticky; top: 14rem; align-self: start; }
.ap-lede { max-width: 22ch; margin: 3.2rem 0 4rem; font-size: max(2.4rem, 20px); line-height: 1.2; letter-spacing: -.015em; }
.ap-count { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4rem; }
.ap-num { font-size: 9.6rem; line-height: 1; letter-spacing: -.04em; }
.ap-rows { border-bottom: 1px solid rgba(238, 234, 227, .25); }
.ap-rows li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 2rem; align-items: baseline; padding: 2.8rem 1.6rem; border-top: 1px solid rgba(238, 234, 227, .25); transition: background-color .6s var(--ease); }
.ap-rows .num { transition: color .6s var(--ease); }
@media (hover: hover) { .ap-rows li:hover { background: rgba(238, 234, 227, .06); } .ap-rows li:hover .num { color: var(--gold); } }
.ap-rows h3 { font-size: max(2.4rem, 19px); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.ap-rows p { font-size: max(1.5rem, 14px); opacity: .78; }

/* ---------- capabilities: colored panels ---------- */
.caps { position: relative; background: var(--paper); }
.caps-h { padding: 12rem var(--m) 4rem; }
.cap { background: var(--cc); padding: 6rem var(--m); }
.cap-in { display: grid; gap: 4rem; }
.cap-n { margin-bottom: 1.6rem; }
.cap h3 { font-size: max(4.8rem, 32px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.cap-list { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; max-width: 56rem; margin: 2.4rem 0 3.6rem; }
.cap-list li::before { content: "/ "; }
.cap-media { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cap-media img { align-self: start; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: .4rem; }
.cap-note { align-self: end; font-size: max(2.4rem, 19px); line-height: 1.2; letter-spacing: -.015em; }
.cap-nav { display: none; }
.pin .caps-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.pin .caps-h { position: absolute; top: 10vh; left: 16rem; z-index: 10; padding: 0; }
.pin .cap { position: absolute; inset: 0; padding: 30vh 16rem 16vh; will-change: transform; }
.pin .cap-in { grid-template-columns: 1fr 1fr; column-gap: 8rem; height: 100%; }
.pin .cap-media { display: block; height: 100%; }
/* the three sites, fanned */
.pin .cap-media img { position: absolute; width: 64%; box-shadow: 0 30px 60px -30px rgba(14, 13, 11, .45); }
.pin .cap-media img:nth-child(1) { left: 0; top: 0; }
.pin .cap-media img:nth-child(2) { left: 18%; top: 20%; }
.pin .cap-media img:nth-child(3) { left: 36%; top: 40%; }
.pin .cap-nav { position: absolute; left: 16rem; right: 16rem; bottom: 5vh; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 1.6rem; }
/* phones: the heading at the top, the panel's words, then the sites; the nav keeps only its numbers */
.pin.narrow .caps-h { top: 9rem; left: var(--m); font-size: max(5.6rem, 40px); }
.pin.narrow .cap { padding: 18rem calc(var(--m) + 11vw) calc(9rem + 100lvh - 100svh) var(--m); }
.pin.narrow .cap-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 2.4rem; }
.pin.narrow .cap h3 { font-size: max(3.6rem, 28px); }
.pin.narrow .cap-list { margin: 1.6rem 0 2.4rem; }
.pin.narrow .cap-media img { width: 72%; }
.pin.narrow .cap-media img:nth-child(2) { left: 14%; top: 16%; }
.pin.narrow .cap-media img:nth-child(3) { left: 28%; top: 32%; }
.pin.narrow .cap-note { align-self: start; }
.pin.narrow .cap-nav { left: var(--m); right: var(--m); bottom: calc(3.2rem + 100lvh - 100svh); }
.pin.narrow .cap-nav span { font-size: 0; }
.pin.narrow .cap-nav b { font-size: max(1.1rem, 11px); }
.cap-nav span { color: rgba(14, 13, 11, .78); transition: color .4s; }   /* 4.5:1 or better on every panel color */
.cap-nav span.on { color: var(--ink); }
.cap-nav b { margin-right: 1.6rem; font-weight: 600; }
.cap-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(14, 13, 11, .2); overflow: hidden; }
.cap-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 0; transform: scaleX(var(--p, 0)); }

/* ---------- systems and automation: a quiet technical diagram, text first ---------- */
/* a dark panel (like the approach room), five nodes on a drawn line, each in one of the studio's project colors;
   a small marker carries the inquiry along the line while a record fills in beside the log */
.systems { padding: 14rem var(--m); background: var(--paper); }
.sys-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; margin-bottom: 8rem; }
.sys-head h2 { grid-column: 1 / span 7; }
.sys-intro { grid-column: 8 / span 5; align-self: end; max-width: 40ch; font-size: max(2.4rem, 19px); line-height: 1.2; letter-spacing: -.015em; }
.sys-pin { position: relative; }
html.js .sys-pin.is-pinned .sys-stick { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: grid; align-items: start; padding-top: var(--sys-pt, max(8.4rem, 84px)); }
.sys-demo { --node: max(6.4rem, 52px); --soft: rgba(238, 234, 227, .72); --hair: rgba(238, 234, 227, .24); display: grid; gap: 6rem; padding: 6rem 6.4rem 7rem; border-radius: 1.2rem; background: var(--ink); color: var(--paper); overflow: hidden; }
.sys-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 3rem 4rem; }
.sys-title h3 { margin: 2rem 0 1.6rem; font-size: max(7.2rem, 40px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.sys-note { max-width: 52ch; color: var(--soft); font-size: max(1.5rem, 15px); }
.sys-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.sys-controls .pill:disabled { opacity: .42; pointer-events: none; }
.sys-controls .pill:disabled::before { display: none; }
.sys-hint { margin-top: -3rem; color: var(--soft); }
.sys-track { position: relative; }
.sys-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sys-stage { position: relative; display: grid; justify-items: center; align-content: start; gap: 1.6rem; padding: 0 1.6rem; text-align: center; }
.sys-node { position: relative; z-index: 2; display: grid; place-items: center; width: var(--node); height: var(--node); border: 2px solid rgba(238, 234, 227, .6); border-radius: 50%; background: var(--ink); color: var(--paper); font-size: max(1.5rem, 14px); font-variant-numeric: tabular-nums; transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); }
.sys-stage h4 { margin: 0; font-size: max(2.8rem, 22px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.sys-stage p { max-width: 24ch; color: var(--soft); font-size: max(1.5rem, 15px); line-height: 1.4; }
.sys-state { display: inline-flex; align-items: center; gap: .8rem; min-height: 1.6em; }
.sys-state:empty { visibility: hidden; }
.sys-state:not(:empty)::before { content: ""; flex: none; width: 1rem; height: 1rem; min-width: 9px; min-height: 9px; border: 2px solid currentColor; border-radius: 50%; }
.sys-stage.is-active .sys-state::before { background: currentColor; }
.sys-stage.is-done .sys-state::before { width: 1rem; height: .55rem; min-width: 10px; min-height: 6px; border: 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0; transform: rotate(-45deg) translateY(-2px); }
/* the three states differ by ring (dashed, filled, outlined), by a word and by a mark, never by color alone */
.sys-stage.is-waiting .sys-node { border-style: dashed; }
.sys-stage.is-active .sys-node { border-color: var(--ac); background: var(--ac); color: var(--ink); font-weight: 600; }
.sys-stage.is-done .sys-node { border-color: var(--ac); color: var(--ac); }
.sys-stage.is-active .sys-state { color: var(--ac); }
.sys-stage.is-done .sys-state { color: var(--soft); }
/* the line to the next stage fills in the stage's color as it completes */
.sys-stage:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--node) / 2 - 1px); left: 50%; width: 100%; height: 2px; z-index: 1; background: linear-gradient(var(--ac), var(--ac)) left center / 0% 100% no-repeat, linear-gradient(var(--hair), var(--hair)); transition: background-size .9s var(--ease-io); }
.sys-stage.is-done:not(:last-child)::after { background-size: 100% 100%, 100% 100%; }
/* the marker that carries the inquiry: it moves to the stage that is running (placed by the script) */
.sys-packet { position: absolute; left: 0; top: 0; z-index: 3; width: 1.4rem; height: 1.4rem; min-width: 12px; min-height: 12px; margin: -.7rem 0 0 -.7rem; border-radius: 3px; background: var(--paper); box-shadow: 0 0 0 4px var(--ink); opacity: 0; pointer-events: none; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s var(--ease-io), opacity .4s var(--ease); }
.sys-demo:not([data-mode="idle"]) .sys-packet { opacity: 1; }
/* quiet at first: only the stages and the button. The sample record and the log are folded away and open when the visitor runs it */
.sys-reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .9s var(--ease-io), margin-top .9s var(--ease-io); }
.sys-lower { min-height: 0; overflow: hidden; }
.sys-lower-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8rem; padding-top: 5rem; border-top: 1px solid var(--hair); }
html.js .sys-demo[data-mode="idle"] .sys-reveal { grid-template-rows: 0fr; margin-top: -6rem; }
html.js .sys-demo[data-mode="idle"] { padding-bottom: 4.4rem; }
/* pinned on a large window it has to fit one screen, below the corner logo and menu: a tighter panel, the note beside the title,
   the record showing the stage that is running and the log in two columns. The script checks that the fullest state fits and
   otherwise leaves the panel unpinned. */
.sys-demo.sys-pinned { gap: 1.8rem; padding: 2.4rem 4.4rem 2.6rem; }
.sys-pinned .sys-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 2rem; align-items: end; }
.sys-pinned .sys-title { display: contents; }
.sys-pinned .sys-title > p.small { grid-area: 1 / 1; align-self: center; }
.sys-pinned .sys-controls { grid-area: 1 / 3; gap: .8rem; }
.sys-pinned .sys-title h3 { grid-area: 2 / 1; margin: 1.6rem 0 0; font-size: max(4.8rem, 32px); }
.sys-pinned .sys-note { grid-area: 2 / 3; justify-self: end; max-width: 56ch; padding-bottom: .6rem; font-size: max(1.3rem, 13px); }
.sys-pinned .sys-hint { margin-top: -.4rem; }
.sys-pinned .sys-stage { gap: 1rem; }
.sys-pinned .sys-stage p { font-size: max(1.4rem, 14px); }
html.js .sys-demo.sys-pinned[data-mode="idle"] { padding-bottom: 2.6rem; }
html.js .sys-demo.sys-pinned[data-mode="idle"] .sys-reveal { margin-top: -1.8rem; }
.sys-pinned .sys-lower-in { grid-template-columns: 5fr 7fr; column-gap: 6rem; padding-top: 1.6rem; }
.sys-pinned .sys-card, .sys-pinned .sys-log-wrap { gap: 1.2rem; }
.sys-pinned .sys-record > div[data-stage]:not(.is-now) { display: none; }
.sys-pinned .sys-record, .sys-pinned .sys-log { border-bottom: 0; }
.sys-pinned .sys-record { --row: max(3.6rem, 34px); min-height: calc(var(--row) * 4 + 1px); align-content: start; }   /* room for the most rows any stage shows, so the panel never changes height */
.sys-pinned .sys-record > div { grid-template-columns: 11rem minmax(0, 1fr); min-height: var(--row); padding: .6rem 0; }
.sys-pinned .sys-record dd { font-size: max(1.6rem, 15px); }
.sys-pinned .sys-log { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: 3.2rem; }
.sys-pinned .sys-log li { padding: .6rem 0; grid-template-columns: 4rem minmax(0, 1fr); font-size: max(1.6rem, 15px); }
.sys-card, .sys-log-wrap { display: grid; align-content: start; gap: 1.6rem; }
.sys-card h4, .sys-log-wrap h4 { margin: 0; color: var(--soft); }
.sys-record, .sys-log { counter-reset: ev; display: grid; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hair); }
.sys-record > div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.6rem; padding: 1.2rem 0; border-top: 1px solid var(--hair); }
.sys-record dt { color: var(--soft); align-self: center; }
.sys-record dd { margin: 0; font-size: max(1.8rem, 16px); }
.sys-log li { counter-increment: ev; display: grid; grid-template-columns: 5rem minmax(0, 1fr); padding: 1.2rem 0; border-top: 1px solid var(--hair); font-size: max(1.7rem, 15px); }
.sys-log li::before { content: counter(ev, decimal-leading-zero); color: var(--soft); font-variant-numeric: tabular-nums; }
.sys-log li, .sys-record > div { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sys-log li.is-pending, .sys-record > div.is-pending { visibility: hidden; opacity: 0; transform: translateY(.8rem); }
@media (hover: hover) { .sys-stage:hover .sys-node { border-color: var(--ac); } }
.note-link { text-decoration: underline; text-underline-offset: 3px; }
html:not(.js) .sys-controls, html:not(.js) .sys-hint, html:not(.js) .sys-packet { display: none; }
/* the panel and its stages arrive once, as the section comes into view (not with reduced motion, not without the script) */
@media (prefers-reduced-motion: no-preference) {
  html.js .sys-demo { transition: clip-path 1.2s var(--ease-io), opacity .8s var(--ease); }
  html.js .sys-demo:not(.in) { clip-path: inset(7% 0 0 0 round 1.2rem); opacity: 0; }
  html.js .sys-stage { transition: opacity .9s var(--ease) calc(var(--i) * 110ms + 250ms), transform .9s var(--ease) calc(var(--i) * 110ms + 250ms); }
  html.js .sys-demo:not(.in) .sys-stage { opacity: 0; transform: translateY(2.4rem); }
}
@media (max-width: 1023px) {
  .systems { padding: 10rem var(--m); }
  .sys-head { margin-bottom: 5rem; }
  .sys-head h2, .sys-intro { grid-column: 1 / -1; }
  .sys-demo { gap: 5rem; padding: 4rem 3rem 5rem; }
  .sys-title h3 { font-size: max(5.6rem, 36px); }
  .sys-lower-in { grid-template-columns: minmax(0, 1fr); row-gap: 5rem; }
  /* the workflow reads top to bottom, one stage under the next */
  .sys-stages { grid-template-columns: minmax(0, 1fr); row-gap: 3.6rem; max-width: 60rem; }
  .sys-stage { grid-template-columns: var(--node) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; justify-items: start; column-gap: 2.4rem; row-gap: 1rem; padding: 0; text-align: left; }
  .sys-node { grid-row: 1 / span 4; }
  .sys-stage:not(:last-child)::after { top: var(--node); left: calc(var(--node) / 2 - 1px); width: 2px; height: calc(100% - var(--node) + 3.6rem); background: linear-gradient(var(--ac), var(--ac)) center top / 100% 0% no-repeat, linear-gradient(var(--hair), var(--hair)); }
  .sys-stage.is-done:not(:last-child)::after { background-size: 100% 100%, 100% 100%; }
}
@media (max-width: 759px) {
  .sys-demo { padding: 3.2rem 2rem 4rem; border-radius: .8rem; }
  .sys-title h3 { font-size: max(4.8rem, 34px); }
  .sys-record > div { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  /* the five controls in a tidy two-column grid, Run across the top, each one a full-size target */
  .sys-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sys-controls #sys-run { grid-column: 1 / -1; }
  .sys-controls .pill { justify-content: space-between; }
}

/* ---------- contact + footer: the dark close ---------- */
.contact { display: grid; justify-items: center; padding: 22rem var(--m) 16rem; background: var(--ink); color: var(--paper); text-align: center; }
.contact-h { max-width: 11ch; font-size: max(9.6rem, 44px); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.contact-sub { margin-top: 2.4rem; font-size: max(2rem, 17px); opacity: .78; }
.contact-actions { display: grid; justify-items: center; gap: 2rem; margin-top: 5.6rem; }
.contact-mail { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.6rem; font-size: max(1.6rem, 15px); }
.contact-mail a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.copy { min-height: 44px; padding: 0 1.6rem; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(238, 234, 227, .45); font: 600 12px/1 var(--text); letter-spacing: .04em; text-transform: uppercase; transition: box-shadow .3s, transform .45s var(--ease); }
@media (hover: hover) { .copy:hover { box-shadow: inset 0 0 0 1px var(--paper); } }
.copy.is-done { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.copy-status { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-size: 13px; color: var(--gold); }

.foot { overflow: hidden; padding: 4rem var(--m) 0; background: var(--ink); color: var(--paper); }
.foot-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 3rem 0; border-top: 1px solid rgba(238, 234, 227, .3); border-bottom: 1px solid rgba(238, 234, 227, .3); }
.foot-info a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-info nav { display: grid; justify-items: start; }
@media (hover: hover) { .foot-info a:hover { opacity: .6; } }
.foot-info > p:last-child { text-align: right; }
.foot-note { max-width: 80ch; margin-top: 2rem; font-size: max(1.3rem, 13px); opacity: .62; }
.foot-mark { height: 46vh; margin-top: 4rem; }
.foot-mark .wm svg { transform-origin: 50% 100%; }

/* ---------- focus: an outline you can see on every surface ---------- */
/* pills and round buttons swap their colors when focused, so the outline is set to the surface instead of the text */
.pill:focus-visible, .round:focus-visible, .copy:focus-visible, .live-btn:focus-visible { outline-color: var(--ink); }
.approach :focus-visible, .contact :focus-visible, .foot :focus-visible, .menu :focus-visible, .sys-demo :focus-visible { outline-color: var(--paper); }
/* controls that float over anything (photos, recordings, every color) carry a two-tone ring */
.burger:focus-visible, .logo:focus-visible, .menu-close:focus-visible, .play:focus-visible, .skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px #0E0D0B; }

/* ---------- words that rise into place ---------- */
.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rise .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.rise.in .w > span { transform: none; }

/* ---------- tablets and phones ---------- */
@media (max-width: 1023px) {
  .big { font-size: max(7.2rem, 42px); }
  .study-meta, .study-q { grid-column: 1 / -1; }
  .study-body { grid-template-columns: minmax(0, 1fr); row-gap: 4.8rem; }
  .study-body > *, .study--rok .case-detail, .study--bbs .case-detail, .study--tirzahs .case-detail { grid-column: 1 / -1; }
  .case-overview { margin-bottom: 6rem; }
  .case-lede { font-size: max(2.3rem, 19px); line-height: 1.22; }
  .case-overview > * { grid-column: 1 / -1; }
  .crop { width: min(100%, 44rem); margin-inline: auto; }
  .site-screens, .site--phone-left .site-screens { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; justify-items: center; }
  .site-desk { width: 100%; }
  .site-phone, .site--phone-left .site-phone { order: 0; width: min(76%, 320px); }
  .site-live, .site--phone-left .site-live { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; justify-items: center; }
  .site--phone-left .site-live [data-live="phone"] { order: 0; }
  .live-btn { justify-self: center; }
  .drinks { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; }
  .approach { grid-template-columns: minmax(0, 1fr); row-gap: 6rem; }
  .ap-side { position: static; }
  .foot-info { grid-template-columns: 1fr 1fr; }
  .foot-info > p:last-child { text-align: left; }
  .foot-mark { height: 30vh; }
  .menu-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; }
  .menu-nav { padding-left: 0; }
  .menu-info { grid-column: 1; padding-top: 3rem; }
  .menu-mark { grid-column: 1; height: 22vh; }
}
/* running text never under 16 px on phones, tablets and other touch screens, captions and fine print never under 14 px;
   each keeps its own scale above that (a desktop with a mouse keeps its type as designed) */
@media (max-width: 1023px), (pointer: coarse) {
  .case-context p, .sys-note, .sys-stage p, .ap-rows p { font-size: max(1.5rem, 16px); }
  .build-body p, .hero-sub, .contact-mail { font-size: max(1.6rem, 16px); }
  .sys-log li { font-size: max(1.7rem, 16px); }
  figcaption, .foot-note { font-size: max(1.3rem, 14px); }
}
@media (max-width: 759px) {
  .panel--hero { padding-top: 11rem; }
  .hero-mark { height: 38svh; }
  .hero-foot { flex-direction: column; }
  .p-info { min-height: 22rem; }
  .study { padding: 9rem var(--m) 8rem; }
  .study-head { margin-bottom: 4.8rem; }
  .study-title { font-size: max(6.4rem, 44px); }
  .study--tirzahs .study-title { font-size: max(4.6rem, 34px); }
  .drinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-rows li { grid-template-columns: 4rem minmax(0, 1fr); row-gap: 1rem; padding-inline: .4rem; }
  .ap-rows p { grid-column: 2; }
  .contact { padding: 14rem var(--m) 12rem; }
  .foot-info { grid-template-columns: 1fr; }
  .foot-mark { height: 22vh; }
}

/* ---------- reduced motion: everything in its final place ---------- */
@media (prefers-reduced-motion: reduce) {
  /* zero, not .01ms: a tiny duration makes every property change animate */
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- without JavaScript: the menu and the copy button need the script ---------- */
html:not(.js) video { display: none; }
html:not(.js) .burger, html:not(.js) .copy, html:not(.js) .site-live { display: none; }
html:not(.js) .hero-nav { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin-bottom: 4rem; }
html:not(.js) .hero-nav a { display: flex; align-items: center; gap: 1rem; min-height: 44px; }

/* ---------- legal page ---------- */
.legal .bar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 var(--m); background: rgba(238, 234, 227, .94); border-bottom: 1px solid var(--line); }
.legal .mark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.legal .mark-l { font: 600 17px/1 var(--text); letter-spacing: .12em; }
.legal .mark-c { padding-left: 12px; border-left: 1px solid var(--line); font: 600 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.legal .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; font: 600 12px/1 var(--text); letter-spacing: .04em; text-transform: uppercase; }
@media (hover: hover) { .legal .btn:hover { background: var(--ink); color: var(--paper); } }
.legal .label { font: 600 12px/1.3 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.legal-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: calc(72px + clamp(48px, 7vw, 104px)) var(--m) clamp(64px, 8vw, 120px); }
.legal-head { grid-column: 1 / -1; margin-bottom: clamp(40px, 5vw, 80px); }
.legal-head .label { color: var(--muted); margin-bottom: 18px; }
.legal-head h1 { font-size: clamp(48px, 8vw, 128px); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.legal-head p.lede { margin-top: 22px; max-width: 52ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--muted); }
.legal-toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: 96px; }
.legal-toc ol { counter-reset: s; border-top: 1px solid var(--ink); }
.legal-toc li { counter-increment: s; border-bottom: 1px solid var(--line); }
.legal-toc a { display: grid; grid-template-columns: 2.6em 1fr; min-height: 44px; align-items: center; font-size: 14.5px; color: var(--muted); }
.legal-toc a::before { content: counter(s, decimal-leading-zero); font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .legal-toc a:hover { color: var(--ink); } }
.legal-body { grid-column: 5 / span 8; max-width: 70ch; }
.legal-body section { padding-bottom: clamp(36px, 4.4vw, 60px); scroll-margin-top: 96px; }
.legal-body section + section { padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.legal-body h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.legal-body h2 span { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-body p, .legal-body li { color: var(--muted); }
.legal-body p + p { margin-top: 12px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul { margin: 10px 0 14px; padding-left: 1.1em; list-style: disc; }
.legal-body li { margin: 6px 0; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.notice { margin-top: 20px; padding: 18px 20px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.notice .label { display: block; margin-bottom: 6px; }
.legal .foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 36px; align-items: start; padding: 22px var(--m) 36px; font-size: 13px; line-height: 1.5; }
.legal .foot-copy, .legal .foot-note { padding-top: 12px; margin: 0; }
.legal .foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.legal .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { .legal .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1023px) {
  .legal-toc { grid-column: 1 / -1; position: static; margin-bottom: 44px; }
  .legal-body { grid-column: 1 / -1; }
  .legal .foot { grid-template-columns: 1fr; }
}