@import url("../fonts/fonts.css");

/* ==========================================================================
   STYLINE — Sarhang Dana, Architect
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Motion primitives (masks, reveals)
   06  Cursor
   07  Preloader
   08  Page transition
   09  Header & menu
   10  Hero
   11  Statement
   12  Work index
   13  Figures & marquee
   14  Capabilities
   15  Timeline & stats
   16  Work grid (work.html)
   17  About
   18  Project page
   19  Footer
   20  Responsive
   21  Reduced motion / print
   22  Drawing viewer
   23  Orbs
   24  Curriculum vitae
   ========================================================================== */

/* 01 — Tokens ------------------------------------------------------------ */
/* Registering the semantic colours makes them animatable, so light ↔ dark is a
   real cross-fade of every rule, label and accent on the page rather than six
   values snapping at once. Browsers without @property simply snap, which is
   what they did before. */
@property --bg        { syntax: "<color>"; inherits: true; initial-value: #f3f3f0; }
@property --bg-2      { syntax: "<color>"; inherits: true; initial-value: #e9e9e5; }
@property --fg        { syntax: "<color>"; inherits: true; initial-value: #15120f; }
@property --fg-mute   { syntax: "<color>"; inherits: true; initial-value: #6b6a66; }
@property --rule      { syntax: "<color>"; inherits: true; initial-value: rgba(21, 18, 15, 0.16); }
@property --rule-soft { syntax: "<color>"; inherits: true; initial-value: rgba(21, 18, 15, 0.08); }
@property --accent    { syntax: "<color>"; inherits: true; initial-value: #3e0421; }
@property --veil      { syntax: "<color>"; inherits: true; initial-value: rgba(21, 18, 15, 0.06); }

:root {
  /* Palette — a cool chalk paper and the logo film's ink. The paper is a
     near-neutral white with the faintest grey in it, so drawings and
     photographs sit on it without a cast. */
  --bone: #f3f3f0;
  --bone-2: #e9e9e5;
  --sand: #d4d4cf;
  --taupe: #8c817a;
  --ink: #15120f;
  --ink-2: #1e1a16;
  --wine: #3e0421;
  --wine-lift: #6a1039;

  /* the transition seal — the colour the S floods the screen with. It is the
     taupe of the portfolio's own cover, so the S reads as part of the palette. */
  --seal: #3e0421;

  /* Semantic — remapped by [data-theme] (a section inverting the page) and by
     html[data-mode] (the reader's own light / dark switch). Literal values,
     so they interpolate. */
  --bg: #f3f3f0;
  --bg-2: #e9e9e5;
  --fg: #15120f;
  --fg-mute: #6b6a66;
  --rule: rgba(21, 18, 15, 0.16);
  --rule-soft: rgba(21, 18, 15, 0.08);
  --accent: #3e0421;
  --veil: rgba(21, 18, 15, 0.06);

  /* the loading screen: paper and ink follow the reader's mode */
  --pre-paper: #f3f3f0;
  --pre-ink: #15120f;

  /* Type */
  --f-display: "Jost", "Century Gothic", "Futura", sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-mega: clamp(3.4rem, 13.2vw, 15.5rem);
  --fs-xl: clamp(2.6rem, 7.6vw, 8.2rem);
  --fs-lg: clamp(2rem, 4.9vw, 4.9rem);
  --fs-md: clamp(1.5rem, 2.9vw, 2.6rem);
  --fs-sm: clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body: clamp(0.98rem, 1.02vw, 1.08rem);
  --fs-label: clamp(0.66rem, 0.72vw, 0.74rem);
  /* the header's controls (links, Dark, CV) and the contact space's: one size, one height */
  --ctl-fs: clamp(0.72rem, 0.78vw, 0.8rem);
  --ctl-h: calc(2.5 * var(--ctl-fs) + 10px);

  /* Space */
  --gut: clamp(1.15rem, 3.4vw, 3.4rem);
  --sec: clamp(6rem, 13vw, 14rem);
  --maxw: 1760px;

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);      /* power3.out */
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.36s;
  --t-med: 0.7s;
  --t-slow: 1.15s;

  --header-h: 92px;
}

[data-theme="dark"],
html[data-mode="dark"] {
  --bg: #15120f;
  --bg-2: #1e1a16;
  --fg: #f3f3f0;
  --fg-mute: #8f8c85;
  --rule: rgba(243, 243, 240, 0.18);
  --rule-soft: rgba(243, 243, 240, 0.08);
  --accent: #c58a6e;
  --veil: rgba(243, 243, 240, 0.06);
}
/* the reader's dark mode: the whole page is ink, and the loading screen
   drafts the mark in paper on it */
html[data-mode="dark"] {
  --pre-paper: #15120f;
  --pre-ink: #f3f3f0;
  color-scheme: dark;
}

/* 02 — Reset & base ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* the page ships its own light and dark passages — never let the browser
     force-darken it on top of them */
  color-scheme: only light;
  background: var(--bg);
  /* no native scrollbar: the progress line at the top of the page is the
     position, and without a scrollbar the width of the page never changes —
     so nothing centred (the word in a transition, the hero) can shift when a
     page is locked or a new one arrives */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* data-theme lives here, so the palette cross-fades here: every rule, label
     and accent eases across together instead of six values snapping at once */
  transition:
    --bg 1.15s var(--e-io), --bg-2 1.15s var(--e-io),
    --fg 1.15s var(--e-io), --fg-mute 1.15s var(--e-io),
    --rule 1.15s var(--e-io), --rule-soft 1.15s var(--e-io),
    --accent 1.15s var(--e-io), --veil 1.15s var(--e-io);
}

body.is-locked { overflow: hidden; height: 100vh; }

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* 03 — Typography -------------------------------------------------------- */
.display,
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.t-mega { font-size: var(--fs-mega); line-height: 0.82; letter-spacing: -0.045em; }
.t-xl   { font-size: var(--fs-xl);   line-height: 0.88; letter-spacing: -0.04em; }
.t-lg   { font-size: var(--fs-lg);   line-height: 0.95; letter-spacing: -0.035em; }
.t-md   { font-size: var(--fs-md);   line-height: 1.08; letter-spacing: -0.025em; }
.t-sm   { font-size: var(--fs-sm);   line-height: 1.35; letter-spacing: -0.02em; }

.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.thin { font-weight: 200; }

.label {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fg-mute);
}

.label--fg { color: var(--fg); }

.idx {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: clamp(1.15rem, 1.85vw, 1.7rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  font-weight: 300;
}

.muted { color: var(--fg-mute); }

.spaced { letter-spacing: 0.34em; }

/* Underline that draws on hover */
.u-link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
}
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--e-out);
}
.u-link:hover::after { transform: scaleX(1); transform-origin: left center; }
.u-link.is-on::after { transform: scaleX(1); }

/* Letter roll used on nav + footer links */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.roll__in {
  display: block;
  transition: transform 0.58s var(--e-out);
}
.roll__in span { display: inline-block; }
.roll__out {
  position: absolute;
  left: 0; top: 100%;
  display: block;
  white-space: nowrap;
  transition: transform 0.58s var(--e-out);
}
.roll:hover .roll__in,
.roll.is-on .roll__in { transform: translate3d(0, -100%, 0); }
.roll:hover .roll__out,
.roll.is-on .roll__out { transform: translate3d(0, -100%, 0); }

/* 04 — Layout primitives ------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  /* a phone on its side: the notch never cuts into the text */
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

.shell--wide { max-width: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gut);
  row-gap: clamp(1.2rem, 2.4vw, 2rem);
}

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(4rem, 8vw, 9rem); }
.section--flush-top { padding-top: 0; }

.rule {
  height: 1px;
  width: 100%;
  background: var(--rule);
  transform-origin: left center;
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gut);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* A panel that slides up over the previous section with a rounded lip */
.lift {
  position: relative;
  z-index: 2;
  border-radius: clamp(20px, 2.6vw, 42px) clamp(20px, 2.6vw, 42px) 0 0;
  background: var(--bg);
}

/* 05 — Motion primitives ------------------------------------------------- */
.mask { display: block; overflow: hidden; }
.mask > * { display: block; will-change: transform; }

/* A masked line. The mask is the line box plus room for what a typeface
   hangs outside it — descenders (g, y, p), the tails of the italics, the
   overhang of a swash — and the same amount is taken back in margin, so the
   layout is exactly what it would be without the padding. */
.sp-line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.12em 0.24em;
  margin: -0.08em -0.12em -0.24em;
}
.sp-line__in { display: block; will-change: transform; }
/* a measured word must never break inside itself — including at a hyphen —
   or the rebuilt lines wrap somewhere other than where they were measured */
.w { white-space: nowrap; }

/* JS sets the initial state; this is the no-JS / pre-init guard */
html.js [data-reveal] { visibility: hidden; }
html.js [data-reveal].is-ready { visibility: visible; }

.fig {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--veil);
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Parallax shifts the image inside its frame, so give it overscan on both
   edges — otherwise the frame shows through at the top or bottom. */
.fig img[data-parallax] {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
}
.fig--r { border-radius: 3px; }

/* clip-reveal wrapper */
.reveal-img { display: block; overflow: hidden; position: relative; }
.reveal-img > .fig { will-change: transform; }

.ar-1 { aspect-ratio: 1 / 1; }
.ar-43 { aspect-ratio: 4 / 3; }
.ar-32 { aspect-ratio: 3 / 2; }
.ar-169 { aspect-ratio: 16 / 9; }
.ar-34 { aspect-ratio: 3 / 4; }
.ar-23 { aspect-ratio: 2 / 3; }
.ar-219 { aspect-ratio: 21 / 9; }

/* 06 — Cursor ------------------------------------------------------------ */
/* The cursor is white, blended by difference with whatever is under it, so
   it is ink on paper, paper on ink, and never the colour of what it is over,
   whichever section or picture it crosses. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9000;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor--ring {
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid #fff;
  z-index: 8999;
}
.cursor.is-on { opacity: 1; }
.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.cursor--ring.has-label {
  background: #fff;
  border-color: #fff;
}
.cursor--ring.has-label .cursor__label { opacity: 1; }

html.has-cursor,
html.has-cursor * { cursor: none !important; }
/* the cursor as a thinking orb while something is held (STY.cursor.orb):
   not blended like the dot and ring, so its dots keep their own ink */
.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
  z-index: 9001;
  color: var(--fg);
  will-change: transform, opacity;
}
.cursor-orb .orb__canvas { display: block; }

/* 06b — The mark ---------------------------------------------------------- */
/* One component for every appearance of the logo. The SVG is allowed to spill
   outside its box because in the "line" state the bars stretch well past it. */
.mark {
  display: block;
  position: relative;
}
.mark__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.mark rect,
.mark__svg rect { fill: currentColor; }
.mark__s { fill: none; }

.mark--ink { color: var(--ink); }
.mark--bone { color: var(--bone); }
.mark--fg { color: var(--fg); }

/* A rule with the mark sitting on it, used between sections */
/* The divider: its two lines are the logo's own bars carried on to the edges
   of the page — the left one level with the lower-left bar, the right one
   with the upper-right bar (core.js, LOGO.thread, plays it as one line).
   With script, the lines are drawn *inside the mark's own SVG* as two more
   bars, so they are the same primitive as the logo — same anti-aliasing,
   same sub-pixel position, same weight — and can never sit a pixel off it.
   The two <i> elements only hold the layout (and draw the lines without
   script). */
.mark-rule {
  --mw: clamp(38px, 4.4vw, 62px);
  display: flex;
  align-items: flex-start;
  padding-block: clamp(2.6rem, 6vw, 5.5rem);
  color: var(--fg);
}
.mark-rule--bone { color: var(--bone); }
/* each line is a bar of the mark carried on: the same weight (40 / 818 of
   the mark's width), the same tone, and exactly level with its bar —
   332 / 818 down for the lower-left one, 252 / 818 for the upper-right */
.mark-rule__l,
.mark-rule__r {
  display: block;
  flex: 1 1 auto;
  height: calc(var(--mw) * 0.0489);
  opacity: 0.8;
}
.mark-rule__l {
  margin-top: calc(var(--mw) * 0.4059);
  background: linear-gradient(to right, transparent, currentColor 22%);
}
.mark-rule__r {
  margin-top: calc(var(--mw) * 0.3081);
  background: linear-gradient(to left, transparent, currentColor 22%);
}
.mark-rule.is-threaded .mark-rule__l,
.mark-rule.is-threaded .mark-rule__r { visibility: hidden; }
.mark-rule .mark {
  width: var(--mw);
  flex: 0 0 auto;
  color: inherit;
  opacity: 0.8;
}
/* the carried-on lines, as bars of the SVG: they fade only at the page edge */
.mark__line { fill: currentColor; }



/* 07 — Preloader --------------------------------------------------------- */
.pre {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--pre-paper);
  display: none;
  place-items: center;
  overflow: hidden;
}
/* the head script sets this on every fresh load, before first paint, so the
   loading screen is there from the very first frame — and only then */
html.is-preloading .pre { display: grid; }
html.is-preloading body { overflow: hidden; }
.pre__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  position: relative;
  z-index: 2;
}
.pre__mark {
  position: relative;
  width: clamp(170px, 23vw, 360px);
  aspect-ratio: 818 / 569;
  will-change: transform;
}
/* once the script has it, the paper becomes its own layer (so it can fade on
   the compositor) and the words wait for their cue */
.pre.is-running { background: transparent; }
.pre:not(.is-running) .pre__word,
.pre:not(.is-running) .pre__by,
.pre:not(.is-running) .pre__meta { visibility: hidden; }
.pre__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pre-paper);
  will-change: opacity;
}
/* a construction line, right across the screen */
.pre__guide {
  position: absolute;
  z-index: 1;
  display: block;
  background: rgba(140, 129, 122, 0.6);
  will-change: transform, opacity;
}
.pre__guide--h { left: 0; right: 0; height: 1px; margin-top: -0.5px; }
.pre__guide--v { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
/* a bar: the outer block is its length, the inner one its weight */
.pre__bar {
  position: absolute;
  display: block;
  will-change: transform;
}
.pre__bar b {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--pre-ink);
  will-change: transform;
}

.pre__word {
  display: flex;
  overflow: hidden;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(0.82rem, 1.25vw, 1.15rem);
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  color: var(--pre-ink);
  line-height: 1.5;
}
.pre__word span { display: inline-block; }

.pre__by {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: -0.9rem;
}
.pre__by em {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.35em;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 0.15em;
}

.pre__meta {
  position: absolute;
  z-index: 2;
  left: var(--gut); right: var(--gut);
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: var(--pre-ink);
}


html.is-loading { overflow: hidden; }
html.is-loading body { overflow: hidden; }

/* 08 — Page transition --------------------------------------------------- */
/* The transition is the logo: six bars fly in from the edges of the screen,
   then the S they add up to lights up and opens out until it is the screen. */
.trans {
  position: fixed;
  inset: 0;
  z-index: 7500;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.trans.is-on { visibility: visible; }

.trans__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(230px, 34vmin, 480px);
  translate: -50% -50%;
}
.trans__svg { overflow: visible; }
.trans__svg .mark__bar rect { fill: var(--ink); }
.trans__svg .mark__s { fill: var(--seal); }
/* Arriving from another page: the document is held back behind the ink until
   the bars exist and the uncover can run, so nothing ever flashes. */
html.is-entering .pre { display: none; }

/* The overlay is built by script, so until it exists the arriving document
   stays hidden behind the ink rather than flashing its own content. */
html.is-entering { background: #3e0421; }
html.is-entering--orb { background: #15120f; }
html.is-entering body { visibility: hidden; }
/* through the S, the page is held out of sight until the S has gone */
html.is-arriving main,
html.is-arriving footer { visibility: hidden; }

.trans__label {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.trans__label span {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--bone);
  opacity: 0;
  white-space: nowrap;
}
/* leaving from a dark section, the bars are drawn in paper so they show */
.trans.is-dark .trans__svg .mark__bar rect { fill: var(--bone); }

/* the contact route: an ink circle out of the point you clicked */
.ctrans {
  position: fixed;
  inset: 0;
  z-index: 7560;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.ctrans.is-on { visibility: visible; }
.ctrans__disc {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  will-change: transform, opacity;
}
.ctrans__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  color: var(--bone);
  padding: var(--gut);
}
.ctrans__orb {
  width: clamp(96px, 10.5vw, 146px);
  aspect-ratio: 1;
  color: var(--bone);
}
.ctrans__label {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.ctrans__sub {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 243, 240, 0.5);
}

/* 09 — Header ------------------------------------------------------------ */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6000;
  padding: clamp(1.1rem, 2vw, 1.7rem) var(--gut);
  /* under a status bar (saved to the home screen) or beside a notch */
  padding-top: calc(clamp(1.1rem, 2vw, 1.7rem) + env(safe-area-inset-top));
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  mix-blend-mode: normal;
  transition: transform 0.65s var(--e-out), opacity 0.4s ease;
}
.hdr.is-hidden { transform: translate3d(0, -110%, 0); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--fg);
}
.brand__mark { width: 34px; flex: 0 0 auto; }
.brand__mark svg { width: 100%; height: auto; overflow: visible; }
.brand__mark rect { fill: var(--fg); transition: fill 0.85s var(--e-io); }
/* hover: the mark re-inks itself (core.js, LOGO.redraw) and the name eases
   a touch to the right — no pull, no bounce */
.brand__type { transition: transform 0.7s var(--e-out); }
.brand:hover .brand__type { transform: translate3d(3px, 0, 0); }
.brand__type {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  white-space: nowrap;
}
.brand__sub {
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--fg-mute);
  margin-top: 0.34em;
  display: block;
}

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.8rem); }
.nav a {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav a.is-current { color: var(--fg-mute); }
.nav__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 0.55em;
  vertical-align: 0.1em;
  transform: scale(0);
  transition: transform 0.4s var(--e-out);
}
.nav a.is-current .nav__dot { transform: scale(1); }

.hdr__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

/* the light / dark switch: a pill like the CV button, with the word on it
   and a disc — half ink, half paper — that turns over */
.mode {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.62em 1.05em 0.58em 0.85em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), border-color 0.45s var(--e-out);
}
.mode:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mode__disc {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.2px solid currentColor;
  background: linear-gradient(to right, currentColor 50%, transparent 50%);
  transform: rotate(0deg);
  transition: transform 0.9s var(--e-io);
  flex: 0 0 auto;
}
html[data-mode="dark"] .mode__disc { transform: rotate(180deg); }
.menu__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  text-align: left;
  color: var(--bone);
}
.menu__mode .mode__disc { color: var(--bone); }

.clock {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4caf50;
  margin-right: 0.55em;
  vertical-align: 0.08em;
  animation: pulse 2.4s var(--e-io) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

.burger {
  display: none;
  width: 38px; height: 20px;
  position: relative;
}
.burger i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.5s var(--e-out), opacity 0.3s ease;
}
.burger i:nth-child(1) { top: 4px; }
.burger i:nth-child(2) { bottom: 4px; }
.burger.is-open i:nth-child(1) { transform: translateY(6px) rotate(38deg); }
.burger.is-open i:nth-child(2) { transform: translateY(-6px) rotate(-38deg); }

/* Overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 5900;
  background: var(--ink);
  color: var(--bone);
  padding: calc(var(--header-h) + 2rem) var(--gut) var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__list a {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.menu__list li { overflow: hidden; }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 243, 240, 0.16);
}
.menu__mark {
  width: clamp(46px, 6vw, 84px);
  color: var(--bone);
  opacity: 0.6;
  margin-left: auto;
}

/* Scroll progress */
.prog {
  position: fixed;
  left: 0; top: 0;
  height: 2px;
  width: 100%;
  z-index: 6100;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
  opacity: 0.85;
}

/* 10 — Hero -------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1rem, 4vw, 3rem));
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.4rem);
  position: relative;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gut);
}
.hero__avail {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.hero__avail i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s var(--e-io) infinite;
}

/* The hero lockup: the mark, the name it spells, and whose it is. */
.hero__name {
  /* room under the line for the tails of g and y: the hover's mask covers
     the box, so the box reaches below them (and gives the room back) */
  padding-bottom: 0.32em;
  margin-bottom: -0.32em;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--fs-mega);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__name em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  padding-inline: 0.06em;
}

.hero__markline {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.6vw, 2.6rem);
}
.hero__mark {
  width: clamp(100px, 15.4vw, 300px);
  flex: 0 0 auto;
  color: var(--fg);
  position: relative;
  z-index: 2;
}
/* the name comes out of the mark: once the mark is at rest the word slides
   out from behind its right upright in one movement, through a feathered
   mask set at the upright (motion.js, M.emerge) */
.hero__word {
  letter-spacing: 0.015em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.hero__word .sp-line { padding-left: 0; margin-left: 0; }

.hero__by {
  display: block;
  padding-left: clamp(0px, 5vw, 110px);
  font-size: clamp(1.9rem, 5.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
  margin-top: clamp(0.2rem, 0.8vw, 0.9rem);
}
.hero__by em {
  font-family: var(--f-serif);
  font-style: italic;
  padding-right: 0.12em;
}

/* under the cursor the lockup comes apart into dots (hero-orb.js): a soft
   round hole is cut in the real letters wherever the dots have taken over */
.hero__name.is-broken {
  -webkit-mask-image: radial-gradient(circle var(--hr, 0px) at var(--hx, -999px) var(--hy, -999px), transparent 55%, #000 100%);
  mask-image: radial-gradient(circle var(--hr, 0px) at var(--hx, -999px) var(--hy, -999px), transparent 55%, #000 100%);
}
.hero__dots {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero__strip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  vertical-align: middle;
}
.hero__thumb {
  width: clamp(72px, 9vw, 150px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  flex: 0 0 auto;
  align-self: center;
  transform-origin: center;
}
.hero__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hero__bot {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: end;
}
.hero__bot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gut); }
.hero__cue { text-align: right; }

.cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.cue__track {
  width: 1px; height: clamp(42px, 6vw, 74px);
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.cue__track i {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: top center;
  animation: cue 2.3s var(--e-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* 11 — Statement --------------------------------------------------------- */
.statement { max-width: 22ch; }
.stmt-copy {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.5vw, 3.35rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
.stmt-copy em {
  font-family: var(--f-serif);
  font-style: italic;
  letter-spacing: -0.015em;
}
.stmt-copy .w {
  display: inline-block;
  opacity: 0.16;
  will-change: opacity;
}

.stmt-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.stmt-grid__a { grid-column: 1 / span 3; }
.stmt-grid__b { grid-column: 4 / span 6; }
.stmt-grid__c { grid-column: 11 / span 2; }

/* 12 — Work index (home): the projects as a stack of sheets --------------- */
/* Each project is a sheet — the cover on the left, the writing on the right —
   and the sheets stack as you scroll: every one sticks just under the header,
   a little lower than the one before, and the sheet beneath recedes (scales
   down, dims) as the next slides over it (motion.js, M.workStack). */
.wstack { position: relative; }
.wpanel {
  position: sticky;
  top: calc(var(--header-h) + 0.5rem + var(--i, 0) * 0.85rem);
  display: block;
  height: min(74svh, 740px);
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.wpanel:last-child { margin-bottom: 0; }
.wpanel__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  height: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  border-radius: clamp(14px, 1.8vw, 26px);
  overflow: hidden;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  transition: background-color 1.15s var(--e-io), border-color 1.15s var(--e-io);
}
/* receding, a sheet is veiled rather than made transparent — so the sheet
   beneath can never show through it */
.wpanel__in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  opacity: calc(var(--recede, 0) * 0.6);
  pointer-events: none;
  border-radius: inherit;
}
.wpanel__fig {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--veil);
}
.wpanel__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--e-out);
}
.wpanel:hover .wpanel__fig img { transform: scale(1.035); }
.wpanel__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.3rem, 2.4vw, 2.6rem);
}
.wpanel__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.wpanel__title {
  margin-top: auto;
  padding-top: 2rem;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2rem, 4.1vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.wpanel__title em {
  font-family: var(--f-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
}
.wpanel__sum {
  margin-top: 1.1rem;
  max-width: 36ch;
  color: var(--fg-mute);
  line-height: 1.5;
}
.wpanel__meta {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.wpanel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
}
.wpanel__cta svg {
  width: 0.95em;
  height: auto;
  stroke: currentColor;
  transition: transform 0.55s var(--e-out);
}
.wpanel:hover .wpanel__cta svg { transform: translate3d(3px, -3px, 0); }

/* 13 — Figures & marquee ------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vw, 2.6rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-right: clamp(1.4rem, 3vw, 3rem);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 5rem);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  line-height: 1;
}
.marquee__item em {
  font-family: var(--f-serif);
  font-style: italic;
  text-transform: none;
}
.marquee__dot {
  width: clamp(8px, 1vw, 14px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* 14 — Capabilities ------------------------------------------------------ */
.caps { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); }
.caps__aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.caps__list { grid-column: 5 / span 8; border-top: 1px solid var(--rule); }

.cap {
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.3rem, 2.4vw, 2.1rem) 0;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: var(--gut);
  align-items: start;
  cursor: pointer;
}
.cap__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.cap__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform 0.65s var(--e-out);
}
.cap:hover .cap__title { transform: translate3d(clamp(4px, 0.8vw, 14px), 0, 0); }
.cap__body {
  overflow: hidden;
  height: 0;
}
.cap__body p {
  padding-top: 0.9rem;
  max-width: 52ch;
  color: var(--fg-mute);
}
.cap__plus {
  width: 14px; height: 14px;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
}
.cap__plus::before,
.cap__plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--e-out);
}
.cap__plus::after { transform: rotate(90deg); }
.cap.is-open .cap__plus::after { transform: rotate(0deg); }

/* 15 — Timeline & stats -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.8rem, 3vw, 3rem);
}
.stat__n {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.stat__n sup {
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0;
  translate: 0 -0.2em;
  margin-left: 0.12em;
}
.stat__l { margin-top: 0.9rem; max-width: 18ch; }

.tl { border-top: 1px solid var(--rule); }
.tl__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gut);
  padding: clamp(1.3rem, 2.4vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.tl__yr { color: var(--fg-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl__role {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.tl__org { color: var(--fg-mute); margin-top: 0.4rem; font-size: 0.92em; }
.tl__desc { color: var(--fg-mute); max-width: 46ch; }
.tl__desc li { padding-left: 1.1rem; position: relative; margin-bottom: 0.32rem; }
.tl__desc li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}


/* On site (home): the four projects carried past the drawing — a picture
   from each site and the part played in it, two by two, the right-hand one
   set lower */
.sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.6rem, 5vw, 4.6rem) var(--gut); }
.site { display: block; }
.site:nth-child(even) { margin-top: clamp(3rem, 8vw, 8rem); }
.site .fig img { transition: transform 1.6s var(--e-out); }
.site:hover .fig img { transform: scale(1.04); }
.site__meta {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.3rem 0.8rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 243, 240, 0.18);
}
.site__n { color: var(--fg-mute); padding-top: 0.45em; }
.site__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.site__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
.site__r { grid-column: 2; color: var(--fg-mute); }
@media (max-width: 860px) {
  .sites { grid-template-columns: 1fr; }
  .site:nth-child(even) { margin-top: 0; }
}

/* 16 — Work (work.html): the index and the plates --------------------------- */
/* Every project by name, all of them in full, in a column that stays beside
   the plates as they scroll past: the number, the name, the years. The one
   whose plate is in front of you is marked by a short bar — one of the
   logo's own — and its number turns to the seal. Each plate is the cover at
   its own proportions, the name, one sentence and the facts. Nothing tilts,
   nothing stacks, nothing is cut off. (page-work.js) */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filters button {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.62em 1.15em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--fg-mute);
  transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}
.filters button.is-on {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.windex {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gut);
  align-items: start;
}
.windex__list {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-h) + 1.6rem);
}
.windex__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.windex__rows { position: relative; }
.windex__row { border-bottom: 1px solid var(--rule-soft); transition: opacity 0.5s var(--e-out); }
.windex__row.is-out { opacity: 0.22; pointer-events: none; }
.windex__row a {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.8rem;
  padding: clamp(0.62rem, 1.05vw, 0.95rem) 0;
}
.windex__n {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
  transition: color 0.5s var(--e-out);
}
.windex__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.65vw, 1.7rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  padding-right: 2.2rem;          /* room for the name to step aside for the marker */
  transition: transform 0.7s var(--e-out);
}
.windex__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
.windex__y {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.windex__row a:hover .windex__t { transform: translateX(0.6rem); }
.windex__row.is-on .windex__t { transform: translateX(2.2rem); }
.windex__row.is-on .windex__n { color: var(--accent); }
/* the marker: one of the logo's bars, 495 × 40 */
.windex__bar {
  position: absolute;
  left: 3rem;                     /* where the names begin: 2.2rem number + 0.8rem gap */
  top: 0;
  width: 1.5rem;
  height: calc(1.5rem * 40 / 495);
  min-height: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.windex__foot { margin-top: 1.4rem; }

.windex__plates { grid-column: 5 / span 8; }
.wplate { padding-bottom: clamp(4rem, 9vw, 9rem); }
.wplate.is-out { display: none; }
.wplate__fig { display: block; }
.wplate__fig .fig img { transition: transform 1.6s var(--e-out); }
.wplate__fig:hover .fig img { transform: scale(1.03); }
.wplate__info {
  margin-top: clamp(1.1rem, 2vw, 1.8rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--rule);
}
.wplate__k { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(0.9rem, 1.6vw, 1.3rem); }
.wplate__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.wplate__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.015em; }
/* the four facts in one strip, each its own cell: the word over the fact */
.wplate__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.3rem, 2.2vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.wplate__meta div { min-width: 0; padding: 0.95rem 1rem 0.2rem 0; }
.wplate__meta div + div { padding-left: 1rem; border-left: 1px solid var(--rule-soft); }
.wplate__meta dt { color: var(--fg-mute); }
.wplate__meta dd { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.4; }
/* one way in: a long pill under the facts that fills with ink from the left */
.wgo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.4rem, 2.4vw, 2.1rem);
  padding: 0.42rem 0.42rem 0.42rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: linear-gradient(var(--fg), var(--fg)) no-repeat 0 0 / 0% 100%;
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-size 0.6s var(--e-out), color 0.35s ease 0.08s, border-color 0.45s ease;
}
.wgo__i {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out);
}
.wgo__i svg { width: 0.8rem; height: auto; stroke: currentColor; transition: transform 0.6s var(--e-out); }
.wgo:hover, .wgo:focus-visible, .wplate__fig:hover ~ .wplate__info .wgo, .wgo.is-hover { background-size: 100% 100%; color: var(--bg); border-color: var(--fg); }
.wgo:hover .wgo__i, .wgo:focus-visible .wgo__i, .wplate__fig:hover ~ .wplate__info .wgo__i { background: var(--bg); color: var(--fg); }
.wgo:hover svg, .wgo:focus-visible svg, .wplate__fig:hover ~ .wplate__info .wgo svg { transform: rotate(45deg); }

@media (max-width: 1024px) {
  .windex__list { grid-column: 1 / span 5; }
  .windex__plates { grid-column: 6 / span 7; }
  .wplate__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wplate__meta div:nth-child(3) { padding-left: 0; border-left: 0; }
  .wplate__meta div:nth-child(n + 3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 860px) {
  .windex__list { grid-column: 1 / -1; position: static; margin-bottom: clamp(3rem, 8vw, 4rem); }
  .windex__plates { grid-column: 1 / -1; }
  .windex__t { font-size: clamp(1.25rem, 5.4vw, 1.8rem); }
  .windex__bar { display: none; }
}

/* 17 — About ------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); }
.about-grid__fig { grid-column: 1 / span 5; }
.about-grid__body { grid-column: 7 / span 5; }

/* on site, in person: the photographs at their own proportions, laid as
   a wall of three columns — nothing cropped */
.onsite__wall { columns: 3; column-gap: var(--gut); }
.onsite__i { break-inside: avoid; margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); }
.onsite__i figcaption { margin-top: 0.8rem; color: var(--fg-mute); }
/* -- still learning (about): congresses, fairs, forums ------------------- */
/* An event to a row: when, what and where on the left, held while its
   photographs pass; the photographs on the right, side by side at their own
   proportions and one height (each figure grows by its width over its
   height), the row no taller than the screen allows (--a: the row's
   proportions). */
.events__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.events__intro > * { grid-column: 4 / span 6; }
.events__list { margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--rule); }
.ev {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.6rem var(--gut);
  padding: clamp(2rem, 4vw, 3.6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.ev__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.ev__when { display: flex; gap: 0.8rem; color: var(--fg-mute); }
.ev__t { margin-top: 0.9rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.45rem, 2.3vw, 2.2rem); line-height: 1.08; letter-spacing: -0.01em; }
.ev__where { margin-top: 0.55rem; }
.ev__note { margin-top: 1.1rem; max-width: 40ch; color: var(--fg-mute); font-size: 0.95rem; line-height: 1.55; }
.ev__body { grid-column: 5 / span 8; min-width: 0; }
.ev__pics { display: flex; align-items: flex-start; gap: clamp(0.8rem, 1.6vw, 1.4rem); max-width: calc(var(--a, 2) * min(72vh, 640px)); }
.ev__fig { margin: 0; min-width: 0; }
.ev__fig figcaption, .ev__film figcaption { margin-top: 0.7rem; color: var(--fg-mute); }
.ev__film { margin: clamp(1.2rem, 2.4vw, 2rem) 0 0; }
@media (max-width: 860px) {
  .events__intro > * { grid-column: 1 / -1; }
  .ev { grid-template-columns: minmax(0, 1fr); }
  .ev__head { position: static; grid-column: 1 / -1; }
  .ev__body { grid-column: 1 / -1; }
}
@media (max-width: 1024px) { .onsite__wall { columns: 2; } }
@media (max-width: 540px) { .onsite__wall { columns: 1; } }


.sig {
  width: clamp(190px, 22vw, 330px);
  opacity: 0.92;
}
[data-theme="dark"] .sig { filter: invert(1) brightness(1.6); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.55em 1em;
  color: var(--fg-mute);
}

.skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.skill__bar {
  height: 1px;
  background: var(--rule);
  position: relative;
}
.skill__bar i {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
}

.ref { padding: clamp(1.2rem, 2vw, 1.8rem) 0; border-bottom: 1px solid var(--rule); }
.ref__name { font-family: var(--f-display); font-weight: 400; font-size: 1.12rem; letter-spacing: -0.02em; }

/* 18 — Project page ------------------------------------------------------ */
/* The cover fills the screen with the title set on it; the writing slides up
   over it as a sheet with the facts beside it; the drawings run sideways.
   (page-project.js builds it; motion.js M.projectHero and M.ledger move it.) */
.pstage { height: 160svh; position: relative; }
.phero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: #f3f3f0;
}
.phero__cover {
  position: absolute;
  inset: 0;
  display: block;
}
.phero__cover .fig {
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--ink);
  transform-origin: 50% 50%;
  will-change: transform;
}
.phero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phero__veil {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.phero__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--header-h) + clamp(0.6rem, 2vw, 1.6rem));
  padding-bottom: clamp(1.6rem, 3.4vw, 3rem);
  will-change: transform, opacity;
}
/* a soft foot for the title to sit on, whatever the picture — drawn edge to
   edge of the screen, under the body, and only over its lower part */
.phero__foot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: linear-gradient(to top, rgba(21, 18, 15, 0.72), rgba(21, 18, 15, 0.28) 26%, rgba(21, 18, 15, 0) 46%);
}
.phero__body .label { color: rgba(243, 243, 240, 0.72); }
.phero__top { display: flex; justify-content: space-between; gap: var(--gut); }
.phero__bot {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--gut);
  align-items: end;
}
.phero__title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--fs-mega);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.phero__title em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.02em; }

/* while the cover owns the top of the screen the header is drawn in paper */
html.is-over-hero .hdr {
  --fg: #f3f3f0;
  --fg-mute: rgba(243, 243, 240, 0.66);
  --rule: rgba(243, 243, 240, 0.3);
  --bg: #15120f;
  --veil: rgba(243, 243, 240, 0.12);
}

/* the writing, as a sheet over the cover */
.pintro {
  margin-top: -60svh;
  padding-top: clamp(3.4rem, 7vw, 7rem);
  color: var(--fg);
}
.pintro__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem) var(--gut);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 4rem);
}
.pintro__facts { position: sticky; top: calc(var(--header-h) + 1.4rem); }
.pintro__n {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
}
.pintro__n small {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}
.facts { margin-top: clamp(1.6rem, 3vw, 2.6rem); border-top: 1px solid var(--rule); }
.fact {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.fact dd { font-size: 0.98rem; line-height: 1.4; }
.pintro__text { padding-top: 0.4rem; }

/* the drawings: a ledger. Wide views run full width, pairs sit side by side
   with the right one dropped, every frame carries a large faint number in
   the margin, drawing sheets sit on white like paper, and a count at the
   top right says where you are (motion.js, M.ledger). */
.pledger { position: relative; }
.pledger__count {
  position: sticky;
  top: calc(var(--header-h) + 0.6rem);
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.pledger__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3rem, 7vw, 8rem) var(--gut);
  margin-top: clamp(1rem, 2vw, 2rem);
}
.pledger__i { position: relative; margin: 0; grid-column: span 6; }
.pledger__i--wide { grid-column: 1 / span 12; }
.pledger__i--l { grid-column: 1 / span 7; }
.pledger__i--r { grid-column: 7 / span 6; margin-top: clamp(3rem, 9vw, 10rem); }
.pledger__i--half:nth-child(even) { margin-top: clamp(2rem, 5vw, 5rem); }
/* an upright photograph: a third of the width, in a run of its own (the
   column is set inline by page-project.js — it depends on the run) */
.pledger__i--p { grid-column: span 4; }
.pledger__i--p .pledger__n { font-size: clamp(3rem, 6vw, 6.5rem); }
.pledger__n {
  position: absolute;
  z-index: 0;
  left: -0.08em;
  top: -0.62em;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(4rem, 9vw, 10rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fg);
  opacity: 0.1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.pledger__i--r .pledger__n { left: auto; right: -0.08em; }
.pledger__i .reveal-img { position: relative; z-index: 1; }
.pledger__i--sheet .fig {
  aspect-ratio: auto;
  background: #fff;
  padding: clamp(0.6rem, 1.4vw, 1.4rem);
  box-shadow: 0 24px 60px rgba(21, 18, 15, 0.12);
}
.pledger__i--sheet .fig img { position: static; height: auto; width: 100%; }
.pledger__cap { margin-top: 0.9rem; display: flex; gap: 0.8rem; max-width: 46ch; }

/* the last entry: the next project */
.pnext {
  display: block;
  position: relative;
  overflow: hidden;
  margin-top: clamp(4rem, 9vw, 9rem);
  padding: clamp(2.4rem, 5vw, 5rem) var(--gut);
  border-radius: clamp(14px, 1.8vw, 26px);
  background: var(--ink);
  color: var(--bone);
}
.pnext__bg { position: absolute; inset: 0; opacity: 0.35; transition: opacity 0.9s var(--e-out), transform 1.6s var(--e-out); }
.pnext__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.65); }
.pnext:hover .pnext__bg { opacity: 0.7; transform: scale(1.03); }
.pnext__in { position: relative; display: flex; flex-direction: column; gap: 1rem; min-height: 38vh; justify-content: flex-end; }
.pnext__lbl { color: rgba(243, 243, 240, 0.7); }
.pnext__t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--fs-xl);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.pnext__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; }

@media (max-width: 860px) {
  .pledger__i, .pledger__i--l, .pledger__i--r, .pledger__i--wide { grid-column: 1 / span 12; }
  /* upright photographs two to a row on a phone */
  .pledger__i--p { grid-column: span 6 !important; margin-top: 0 !important; }
  .pledger__i--p .pledger__cap { font-size: 0.92em; }
  .pledger__i--r, .pledger__i--half:nth-child(even) { margin-top: 0; }
  .pledger__n { font-size: 3.4rem; top: -0.7em; }
}

/* narrow screens and touch: the cover does not stay while the sheet comes */
@media (max-width: 1024px), (hover: none) {
  .pstage { height: 100svh; }
  .pintro { margin-top: 0; }
}
@media (max-width: 860px) {
  .phero__bot { grid-template-columns: 1fr; }
  .pintro__grid { grid-template-columns: 1fr; }
  .pintro__facts { position: static; }
  .fact { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

.pgal__cap { margin-top: 0.8rem; display: flex; gap: 0.8rem; }

.films {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
}
.films__i--solo { grid-column: 1 / -1; }

/* Project films — a local poster until someone presses play, then YouTube */
.film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  cursor: pointer;
}
.film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.74) saturate(0.9);
  transition: transform 1.4s var(--e-out), filter 0.9s var(--e-out);
}
.film:hover img { transform: scale(1.04); filter: brightness(0.6) saturate(0.85); }

.film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.film__play i {
  width: clamp(64px, 8vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(243, 243, 240, 0.55);
  background: rgba(21, 18, 15, 0.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  transition: transform 0.7s var(--e-out), background-color 0.5s var(--e-out), border-color 0.5s var(--e-out);
}
.film:hover .film__play i {
  transform: scale(1.09);
  background: rgba(243, 243, 240, 0.16);
  border-color: var(--bone);
}
.film__play i::after {
  content: "";
  width: 0; height: 0;
  margin-left: 0.22em;
  border-left: 0.95em solid var(--bone);
  border-top: 0.58em solid transparent;
  border-bottom: 0.58em solid transparent;
}

.film__meta {
  position: absolute;
  left: clamp(1rem, 2.2vw, 1.8rem);
  bottom: clamp(1rem, 2.2vw, 1.8rem);
  right: clamp(1rem, 2.2vw, 1.8rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--bone);
  pointer-events: none;
}
.film__meta .label { color: rgba(243, 243, 240, 0.72); }

.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.film.is-playing img,
.film.is-playing .film__play,
.film.is-playing .film__meta { display: none; }

/* Interviews: each at the proportions it was filmed in — a broadcast one
   wide, a phone one upright beside it */
.talks { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 3rem); align-items: end; }
.talks__i { margin: 0; }
.talks__i--up { max-width: 24rem; }
.talks__cap { display: flex; gap: 0.8rem; margin-top: 0.9rem; }
.talks__cap > span:last-child { display: grid; gap: 0.3rem; }
.talks__t { font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 860px) {
  .talks { grid-template-columns: 1fr; }
  .talks__i--up { max-width: 62%; }
}

/* A sticky index of the page's chapters */
.chapters {
  position: fixed;
  left: var(--gut);
  bottom: clamp(1.2rem, 3vw, 2.4rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* difference keeps it legible over paper, ink and photographs alike */
  mix-blend-mode: difference;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.6s var(--e-out), transform 0.6s var(--e-out), visibility 0s linear 0.6s;
}
.chapters.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--e-out), transform 0.6s var(--e-out), visibility 0s;
}
.chap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  opacity: 0.38;
  transition: opacity 0.5s var(--e-out);
}
.chap.is-on { opacity: 1; }
/* only the chapter you are in, until you point at it: then all of them
   (a long project would otherwise stack its numbers up over the text) */
.chap { display: none; }
.chap.is-on, .chapters:hover .chap, .chapters:focus-within .chap { display: flex; }
.chap:hover { opacity: 0.8; }
.chap__n {
  font-family: var(--f-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.chap__t {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.6s var(--e-out), opacity 0.4s var(--e-out);
}
.chap.is-on .chap__t,
.chapters:hover .chap__t { max-width: 14rem; opacity: 1; }

/* Scroll-velocity bend, set as a variable so it composes with everything else */
[data-skew] { transform: skewY(var(--skew, 0deg)); }

/* The concept passage — the thinking, lifted off the concept sheet */
.concept { border-radius: clamp(20px, 2.6vw, 42px) clamp(20px, 2.6vw, 42px) 0 0; }
.concept__lede {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.028em;
}
.concept__pairs {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--rule);
}
.concept__pairs li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.concept__k {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.concept__v {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.concept__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.concept__col ul { margin-top: 1rem; }
.concept__col li {
  color: var(--fg-mute);
  padding-left: 1.05rem;
  position: relative;
  margin-bottom: 0.55rem;
  font-size: 0.95em;
  line-height: 1.45;
}
.concept__col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 1px;
  background: currentColor;
  opacity: 0.65;
}
.concept__close {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.5;
}

/* 19 — Footer ------------------------------------------------------------ */
.ftr {
  background: var(--ink);
  color: var(--bone);
  border-radius: clamp(20px, 2.6vw, 42px) clamp(20px, 2.6vw, 42px) 0 0;
  padding: clamp(4rem, 9vw, 9rem) 0 clamp(1.5rem, 3vw, 2.4rem);
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.ftr__cta {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 10.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.ftr__cta em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.025em; }

.ftr__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.3vw, 2rem);
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(243, 243, 240, 0.3);
  padding-bottom: 0.25em;
  transition: border-color 0.5s var(--e-out);
}
.ftr__mail:hover { border-color: var(--bone); }
.ftr__mail svg { width: 0.85em; height: auto; transition: transform 0.55s var(--e-out); }
.ftr__mail:hover svg { transform: translate3d(0.22em, -0.22em, 0); }

.ftr__cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 3rem) var(--gut);
  border-top: 1px solid rgba(243, 243, 240, 0.16);
  padding-top: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(3.4rem, 8vw, 7rem);
}
.ftr__col { grid-column: span 3; }
.ftr__col h4 { font-family: var(--f-body); }
.ftr__col li { margin-bottom: 0.45rem; }

.ftr .shell { position: relative; z-index: 1; }

.ftr__base .sig { width: clamp(118px, 12vw, 168px); }

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  justify-content: flex-start;
  align-items: flex-end;
  border-top: 1px solid rgba(243, 243, 240, 0.16);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
}

/* top right of the footer, level with its first line — clear of the
   watermark mark in the bottom corner */
.ftr .totop {
  position: absolute;
  top: 0;
  right: var(--gut);
  z-index: 2;
}
.totop {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.totop svg { width: 12px; transition: transform 0.55s var(--e-out); }
.totop:hover svg { transform: translateY(-4px); }

.ftr__mark {
  position: absolute;
  z-index: 0;
  right: var(--gut);
  bottom: clamp(1.5rem, 3vw, 2.4rem);
  width: clamp(140px, 20vw, 360px);
  color: var(--bone);
  opacity: 0.16;
  pointer-events: none;
}
.ftr__mark rect,
.ftr__mark .mark__svg rect { fill: var(--bone); }

/* 20 — Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .stmt-grid__a { grid-column: 1 / span 12; }
  .stmt-grid__b { grid-column: 1 / span 12; }
  .stmt-grid__c { grid-column: 1 / span 12; }
  .caps__aside { grid-column: 1 / span 12; position: static; margin-bottom: 2rem; }
  .caps__list { grid-column: 1 / span 12; }
  .about-grid__fig { grid-column: 1 / span 12; }
  .about-grid__body { grid-column: 1 / span 12; margin-top: 2.5rem; }
  .ftr__col { grid-column: span 6; }
}

/* Below the tablet breakpoint every 12-column placement collapses to full
   width, including the inline grid-column values used in the page markup. */
@media (max-width: 1024px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .grid > *[style*="justify-self"] { justify-self: start !important; }
}

@media (max-width: 860px) {
  :root { --header-h: 76px; }
  /* the links live in the dock at the foot of the screen (see 23), so the
     header keeps the mark, the light / dark switch and the CV */
  .hdr .cvbtn { padding: 0.62em 0.95em 0.58em; }
  .nav { display: none; }
  .hdr .clock { display: none; }
  .hero__line--2 { padding-left: 0; }
  .hero__thumb { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .tl__row { grid-template-columns: 1fr; row-gap: 0.7rem; }
  .cap { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .films { grid-template-columns: 1fr; }
  .chapters { display: none; }
  .hero__markline { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .hero__mark { width: clamp(96px, 30vw, 170px); }
  .hero__by { padding-left: 0; }
  .concept__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .concept__pairs li { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .ftr__col { grid-column: span 12; }
  .wpanel { height: auto; }
  .wpanel__in { grid-template-columns: 1fr; height: auto; }
  .wpanel__fig { aspect-ratio: 4 / 3; height: auto; }
  .wpanel__title { padding-top: 0; }
  .wpanel__sum { display: none; }
  .wpanel__meta { margin-top: 1.4rem; }
  .menu__foot { flex-direction: column; gap: 0.8rem; }
}

@media (max-width: 540px) {
  .hero__top { flex-direction: column; gap: 0.9rem; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .stats { grid-template-columns: 1fr; }
}

@media (hover: none) {
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
  .cursor { display: none; }
}

/* -- the writing on a project page: a lede, plain paragraphs, my part ------ */
.pintro__p {
  margin-top: 1.3rem;
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.08vw, 1.12rem);
  line-height: 1.7;
  color: var(--fg-mute);
}
.ppart {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}
.ppart__t { margin-top: 1rem; font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.55; }
.ppart__list { margin-top: 1.1rem; display: grid; gap: 0.7rem; }
.ppart__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fg-mute);
}
.ppart__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}

/* a Facebook film, cut to its stretch, plays in the frame */
.film__fb { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.film__fb .fb-video, .film__fb .fb-video > span, .film__fb iframe { width: 100% !important; }
.film.is-playing { cursor: default; }

/* 24 — Project stories (story.js) ------------------------------------------ */
/* The sections a project's own brief tells (Khanke): drawn in the page's
   ink on its paper, the water a cool grey-blue, the measured values in the
   accent. */
.story {
  --water: #dde6eb;
  --water-line: #6e90a7;
  --earth: #e6e5e0;
}
html[data-mode="dark"] .story, .story[data-theme-section="dark"] {
  --water: #1c252b;
  --water-line: #86a6bb;
  --earth: #24201b;
}
.story__lede { max-width: 46ch; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.sd svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the sections keep their water and ground inside their own frame */
.shist__sticky svg, .stide__fig svg { overflow: hidden; }
.sd .ln { fill: none; stroke: var(--fg); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sd .ln.thin { stroke-width: 0.9; }
.sd .ln.heavy { stroke-width: 2.4; }
.sd .ln.dash { stroke-dasharray: 4 5; }
.sd .ln.mute { stroke: var(--fg-mute); opacity: 0.6; }
.sd .ln.acc { stroke: var(--accent); }
.sd .ln.wline { stroke: var(--water-line); }
.sd .ln.flow { stroke-dasharray: 10 14; animation: sd-flow 1.6s linear infinite; }
@keyframes sd-flow { to { stroke-dashoffset: -24; } }
.sd .f-bg { fill: var(--bg); }
.sd .f-alt { fill: var(--bg-2); }
.sd .f-ink { fill: var(--fg); }
.sd .f-acc { fill: var(--accent); }
.sd .f-water { fill: var(--water); }
.sd .f-earth { fill: var(--earth); }
.sd .hatch { stroke: var(--fg); stroke-width: 1; opacity: 0.18; }
.sd .ripple { fill: none; stroke: var(--water-line); stroke-width: 1; opacity: 0.35; }
.sd text { font-family: var(--f-body); }
.sd .t-lbl { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--fg-mute); }
.sd .t-note { font-size: 11px; letter-spacing: 0.04em; fill: var(--fg-mute); opacity: 0.8; }
.sd .t-num { font-family: var(--f-display); font-weight: 300; font-size: 22px; fill: var(--fg); }
.sd .t-num.t-mute { fill: var(--fg-mute); }
.sd .t-big { font-family: var(--f-display); font-weight: 300; font-size: 44px; letter-spacing: -0.03em; fill: var(--fg); }
.sd .t-city { font-family: var(--f-display); font-weight: 300; font-size: 22px; fill: var(--fg); }
.sd .t-cap { font-size: 18px; font-weight: 500; fill: var(--fg); }
.sd .t-acc { fill: var(--accent); }
.sd .cap { opacity: 0; transition: opacity 0.6s var(--e-out); }
.sd .cap.on { opacity: 1; }
.sd .era { transition: opacity 0.7s var(--e-out); }
.sd .tw { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2.8s cubic-bezier(.45, 0, .25, 1); }
.sd .crack { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--e-out); }
.sd .crack.in { stroke-dashoffset: 0; }

/* the site: its text beside the lake */
.ssite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem) var(--gut); margin-top: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.ssite__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gut); margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.srows ul { margin-top: 0.9rem; border-top: 1px solid var(--rule); }
.srows li { display: grid; gap: 0.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.srows b { font-weight: 500; }
.srows span { color: var(--fg-mute); font-size: 0.94rem; line-height: 1.5; }
.ssite__map { margin: 0; }
.ssite__map .lake { fill: var(--water); stroke: var(--water-line); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ssite__map .route { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.8s var(--e-out) 0.9s; }
.ssite__map.is-in .route { stroke-dashoffset: 0; }
.ssite__map .km, .ssite__map .pin { opacity: 0; transition: opacity 0.8s var(--e-out); }
.ssite__map.is-in .pin { opacity: 1; }
.ssite__map.is-in .pin--k { transition-delay: 0.4s; }
.ssite__map.is-in .km { opacity: 1; transition-delay: 2.2s; }
.ssite__map .ping { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sd-ping 2.2s var(--e-out) infinite; }
@keyframes sd-ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.4); opacity: 0; } }
.ssite__map figcaption { margin-top: 0.8rem; text-align: right; }

/* forty years: the steps scroll past a drawing that stays */
.shist { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--gut); margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.shist__steps { padding: 20vh 0 30vh; }
.shist__step { padding: 2rem 0 2.2rem; border-top: 1px solid var(--rule); opacity: 0.38; transition: opacity 0.6s var(--e-out); min-height: 34vh; }
.shist__step.is-on { opacity: 1; }
.shist__step.is-past { opacity: 0.55; }
.shist__y { font-family: var(--f-display); font-weight: 200; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; }
.shist__t { margin-top: 1rem; max-width: 40ch; font-size: clamp(1.02rem, 1.1vw, 1.15rem); line-height: 1.6; color: var(--fg-mute); }
.shist__t b { color: var(--fg); font-weight: 500; }
.shist__step--ok .shist__y, .shist__step--ok b { color: var(--accent); }
.shist__fig { position: relative; }
.shist__sticky { position: sticky; top: calc(var(--header-h) + 3vh); margin: 0; }

/* the answer: the section, the live level */
.stide__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem var(--gut); align-items: end; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.stide__top .lede { max-width: 44ch; }
.stide__read { justify-self: end; text-align: right; }
.stide__num { margin-top: 0.4rem; font-family: var(--f-display); font-weight: 200; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
.stide__num small { font-size: 0.32em; margin-left: 0.2em; letter-spacing: 0; color: var(--fg-mute); }
.stide__fig { margin: clamp(1.8rem, 3.4vw, 3rem) 0 0; }
.stide__fig .range { opacity: 0; transition: opacity 1s var(--e-out) 1.2s; }
.stide__fig.is-in .range { opacity: 1; }
.stide__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.stide__notes p { display: grid; gap: 0.35rem; max-width: 46ch; color: var(--fg-mute); line-height: 1.55; }
.stide__notes b { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--fg); letter-spacing: -0.02em; }

/* anatomy: the plan and its parts */
.sanat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem) var(--gut); margin-top: clamp(1.8rem, 3.4vw, 3rem); align-items: center; }
.sanat__plan { margin: 0; }
.sanat__plan .pl-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-out); transition-delay: var(--d, 0s); }
.sanat__plan .pl-in { opacity: 0; transition: opacity 0.8s var(--e-out); transition-delay: var(--d, 0s); }
.sanat__plan.is-in .pl-draw { stroke-dashoffset: 0; }
.sanat__plan.is-in .pl-in { opacity: 1; }
.sanat__plan .mk circle { fill: var(--accent); }
.sanat__plan .mk text { fill: var(--bone); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.sanat__spec { border-top: 1px solid var(--rule); }
.sanat__spec > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.sanat__spec dt { display: flex; align-items: center; gap: 0.8rem; color: var(--fg-mute); font-size: 0.95rem; }
.sanat__spec dd { text-align: right; font-size: 0.98rem; }
.sanat__m { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent); color: var(--bone); font-size: 0.72rem; font-weight: 600; flex: none; }
.sanat__m.is-none { background: none; }
.sanat__spec .is-tot dt, .sanat__spec .is-tot dd { color: var(--fg); font-weight: 500; }
.sanat__spec .is-tot dd { font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; color: var(--accent); }

/* in numbers */
.snum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.8rem, 3.4vw, 3rem); border-top: 1px solid var(--rule); }
.snum__i { padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.4rem, 2.6vw, 2.2rem); border-bottom: 1px solid var(--rule); }
.snum__i:not(:nth-child(3n + 1)) { padding-left: var(--gut); border-left: 1px solid var(--rule); }
.snum__n { font-family: var(--f-display); font-weight: 200; font-size: clamp(2.8rem, 5.2vw, 5rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.snum__n small { font-size: 0.34em; margin-left: 0.25em; letter-spacing: 0; color: var(--fg-mute); }
.snum__i--acc .snum__n { color: var(--accent); }
.snum__l { margin-top: 0.9rem; max-width: 30ch; color: var(--fg-mute); font-size: 0.95rem; line-height: 1.5; }
.snum__l b { color: var(--fg); font-weight: 500; }

/* in context: three ranges on one scale */
.srange { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem) var(--gut); margin-top: clamp(1.8rem, 3.4vw, 3rem); align-items: center; }
.srange__rows { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); }
.srange__rows li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.srange__rows b { font-family: var(--f-display); font-weight: 300; font-size: 1.4rem; color: var(--accent); }
.srange__rows span { color: var(--fg-mute); font-size: 0.95rem; line-height: 1.5; }
.srange__chart { margin: 0; }
.srange__chart .bar__r { fill: var(--water); stroke: var(--water-line); stroke-width: 1; vector-effect: non-scaling-stroke; transform: scaleY(0); transition: transform 1.4s var(--e-out); transition-delay: var(--d, 0s); }
.srange__chart .bar--acc .bar__r { fill: var(--accent); stroke: var(--accent); opacity: 0.88; }
.srange__chart .bar text, .srange__chart .bar .ln { opacity: 0; transition: opacity 0.8s var(--e-out); transition-delay: calc(var(--d, 0s) + 0.9s); }
.srange__chart.is-in .bar__r { transform: none; }
.srange__chart.is-in .bar text, .srange__chart.is-in .bar .ln { opacity: 1; }

/* delivery: the months on a line, and who */
.sdel__bar { position: relative; margin-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: 2.6rem; }
.sdel__ends { display: flex; justify-content: space-between; gap: 1rem; }
.sdel__ends p { display: grid; gap: 0.35rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.sdel__ends p:last-child { text-align: right; }
.sdel__ends b { font-weight: 400; color: var(--accent); }
.sdel__track { position: relative; height: 2px; margin-top: 1.2rem; background: var(--rule); }
.sdel__fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.4s cubic-bezier(.45, 0, .2, 1) .3s; }
.sdel__dot { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); transition: left 2.4s cubic-bezier(.45, 0, .2, 1) .3s; }
.sdel__bar.is-in .sdel__fill { transform: none; }
.sdel__bar.is-in .sdel__dot { left: 100%; }
.sdel__ticks { position: relative; height: 1.6rem; }
.sdel__ticks i { position: absolute; top: 0; width: 1px; height: 7px; background: var(--fg-mute); opacity: 0.5; }
.sdel__ticks i.is-yr { height: 14px; background: var(--fg); opacity: 1; }
.sdel__ticks .label { position: absolute; top: 18px; transform: translateX(-50%); }
.sdel__who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.sdel__who > div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.sdel__b { margin-top: 0.7rem; font-size: 1.08rem; font-weight: 500; }
.sdel__s { margin-top: 0.25rem; color: var(--fg-mute); font-size: 0.92rem; line-height: 1.45; }
.sdel__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.6rem var(--gut); margin-top: clamp(2rem, 4vw, 3.4rem); align-items: end; }
.sdel__budget .snum__n { margin-top: 0.6rem; }
.sdel__local ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.sdel__local li { padding: 0.45em 0.9em; border: 1px solid var(--rule); border-radius: 100px; font-size: 0.86rem; }

/* the records, on ink */
.srec { margin-top: var(--sec); padding-top: var(--sec); }
.srec .sec-head { border-color: rgba(243, 243, 240, 0.18); }
.srec .label { color: rgba(243, 243, 240, 0.6); }
.srec__lede { margin-top: clamp(1.4rem, 3vw, 2.4rem); max-width: 52ch; font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.6; color: rgba(243, 243, 240, 0.75); }
.srec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(2rem, 4vw, 3.4rem); }
.srec__i { padding-top: 1.2rem; border-top: 1px solid rgba(243, 243, 240, 0.25); }
.srec__t { margin-top: 1rem; font-size: 1.08rem; line-height: 1.45; color: var(--bone); }
.srec__v { margin-top: 1.2rem; font-family: var(--f-display); font-weight: 200; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--bone); }
.srec__i--p .srec__v { color: #c58a6e; }
.srec__s { margin-top: 0.9rem; color: rgba(243, 243, 240, 0.6); font-size: 0.92rem; line-height: 1.5; }

@media (max-width: 1024px) {
  .ssite, .srange, .sanat { grid-template-columns: minmax(0, 1fr); }
  .snum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snum__i:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .snum__i:nth-child(even) { padding-left: var(--gut); border-left: 1px solid var(--rule); }
  .sdel__who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srec__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* the drawing first, then its steps over the page below it */
  .shist { grid-template-columns: minmax(0, 1fr); }
  .shist__fig { order: -1; position: sticky; top: calc(var(--header-h) + 0.5rem); z-index: 2; background: var(--bg); padding-bottom: 0.6rem; }
  .shist__sticky { position: static; }
  .shist__steps { padding: 4vh 0 10vh; }
  .shist__step { min-height: 42vh; }
  .stide__top, .stide__notes, .sdel__foot { grid-template-columns: minmax(0, 1fr); }
  .stide__read { justify-self: start; text-align: left; }
  .ssite__lists { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .snum { grid-template-columns: minmax(0, 1fr); }
  .snum__i:nth-child(even) { padding-left: 0; border-left: 0; }
  .sdel__who { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sd .ln.flow, .ssite__map .ping { animation: none; }
}

/* 25 — Plain to see: the navigation, what opens, the contact form --------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* the navigation: its links in a pill of their own, a filled pill resting
   on the page you are on and sliding to whichever link you point at
   (site.js, the header) */
.hdr .nav {
  position: relative;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--bg);
  box-shadow: 0 6px 22px rgba(21, 18, 15, 0.06);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .hdr .nav {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.hdr .nav a {
  position: relative;
  z-index: 1;
  padding: 0.78em 1.2em 0.72em;
  border-radius: 100px;
  letter-spacing: 0.14em;
  color: var(--fg);
  transition: color 0.35s var(--e-out);
}
.hdr .nav a.is-current { color: var(--fg); }
.hdr .nav a.is-lit { color: var(--bg); }
.hdr .nav__dot { display: none; }
/* the links move one way only: the pill. No word rolling up from below */
.hdr .nav .roll { overflow: visible; }
.hdr .nav .roll__out { display: none; }
.hdr .nav .roll:hover .roll__in, .hdr .nav .roll.is-on .roll__in { transform: none; }
/* Dark and CV: the same type and the same height as the links' pill */
.hdr .nav a { font-size: var(--ctl-fs); line-height: 1; }
.hdr .mode, .hdr .cvbtn { height: var(--ctl-h); padding-top: 0; padding-bottom: 0; font-size: var(--ctl-fs); letter-spacing: 0.14em; line-height: 1; }
.hdr .mode { padding-left: 1em; padding-right: 1.25em; }
.hdr .cvbtn { padding-left: 1.15em; padding-right: 1.25em; }
.nav__pill {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 100px;
  background: var(--fg);
  opacity: 0;
  transition: transform 0.55s var(--e-out), width 0.55s var(--e-out), opacity 0.3s var(--e-out);
  pointer-events: none;
}

/* the picture opens the project too: it darkens a little under the pointer */
.wplate__fig:hover .fig img { filter: brightness(0.92); }
.wplate__fig .fig img { transition: transform 1.5s var(--e-out), filter 0.8s var(--e-out); }
.wplate__fig .fig { position: relative; }

/* the button under the words */
.wbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding: 0.85em 0.6em 0.8em 1.3em;
  border: 1px solid var(--fg);
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), border-color 0.45s var(--e-out);
}
.wbtn i {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: -0.45em 0;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out);
}
.wbtn svg { width: 0.75rem; height: auto; stroke: currentColor; transition: transform 0.6s var(--e-out); }
.wbtn:hover, .wpanel:hover .wbtn, .wplate:hover .wbtn { background: var(--fg); color: var(--bg); }
.wbtn:hover i, .wpanel:hover .wbtn i, .wplate:hover .wbtn i { background: var(--bg); color: var(--fg); }
.wbtn:hover svg, .wpanel:hover .wbtn svg, .wplate:hover .wbtn svg { transform: rotate(45deg); }
.wpanel__meta .wbtn { margin-top: 0; }
.wplate__t a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.6s var(--e-out); }
.wplate__t a:hover, .wplate:hover .wplate__t a { background-size: 100% 1px; }

/* -- the end of a page: a slim close; the contact is a space of its own ---- */
.ftr--slim { padding-top: clamp(3rem, 6vw, 5rem); }
.ftr--slim .ftr__cols { margin-top: 0; }
.ftr__col { grid-column: span 4; }

/* -- contact, a space of its own (contact.js) ----------------------------- */
/* Opened by Contact (the ink circle comes out of the click and lets go on
   it), left by scrolling up at its top, by Back, by Escape or by the
   browser's back. The page under it keeps its place. */
html.contact-open { overflow: hidden; }
.cspace {
  position: fixed;
  inset: 0;
  z-index: 6500;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ink);
  color: var(--bone);
  visibility: hidden;
  opacity: 0;
  scrollbar-width: none;
}
.cspace::-webkit-scrollbar { display: none; }
.cspace.is-open { visibility: visible; opacity: 1; }
.cspace:focus { outline: none; }
.cspace__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: calc(clamp(1.1rem, 2vw, 1.7rem) + env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) clamp(1.1rem, 2vw, 1.7rem) max(var(--gut), env(safe-area-inset-left));
  background: linear-gradient(var(--ink) 60%, rgba(21, 18, 15, 0));
}
.cspace__k { color: rgba(243, 243, 240, 0.55); }
.cspace__hint { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(243, 243, 240, 0.5); }
.cspace__hint svg { width: 10px; animation: cs-bob 2.4s var(--e-io) infinite; }
@keyframes cs-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.cspace__back {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--ctl-h);
  padding: 0 1.25em;
  border: 1px solid rgba(243, 243, 240, 0.4);
  border-radius: 100px;
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--ctl-fs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), border-color 0.45s var(--e-out);
}
.cspace__back svg { width: 10px; transition: transform 0.5s var(--e-out); }
.cspace__back:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.cspace__back:hover svg { transform: translateY(-3px); }
.cspace__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.4rem, 6vw, 7rem) var(--gut);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 7vh, 5.5rem) max(var(--gut), env(safe-area-inset-right)) clamp(4rem, 14vh, 9rem) max(var(--gut), env(safe-area-inset-left));
  align-items: start;
}
.cspace__aside { position: sticky; top: 7.5rem; }
.cspace__t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.cspace__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.025em; }
.cspace__lede { margin-top: clamp(1.4rem, 3vw, 2.2rem); max-width: 30ch; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.5; color: rgba(243, 243, 240, 0.75); }
.cspace__facts { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(243, 243, 240, 0.16); max-width: 26rem; }
.cspace__facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(243, 243, 240, 0.16); align-items: baseline; }
.cspace__facts dt { color: rgba(243, 243, 240, 0.5); }
.cspace__facts .clock { color: var(--bone); }
.cspace__facts .u-link { color: var(--bone); }

/* the form: five numbered rows, large type, a line that draws as you write */
.cf { position: relative; }
.cf__trap { position: absolute; left: -9999px; opacity: 0; }
.cf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gut); }
.cf__f { position: relative; display: block; grid-column: 1 / -1; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0 clamp(0.9rem, 1.8vw, 1.3rem); }
.cf__f--half { grid-column: span 1; }
.cf__h { display: flex; align-items: center; gap: 0.9rem; }
.cf__n { position: relative; min-width: 1.6em; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; line-height: 1; color: rgba(243, 243, 240, 0.4); font-variant-numeric: tabular-nums; transition: color 0.4s var(--e-out); }
.cf__l { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: rgba(243, 243, 240, 0.62); transition: color 0.4s var(--e-out); }
.cf__req { margin-left: auto; padding: 0.4em 0.75em; border: 1px solid rgba(197, 138, 110, 0.55); border-radius: 100px; font-family: var(--f-body); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: #c58a6e; transition: opacity 0.4s var(--e-out); }
.cf__f.is-filled .cf__req { opacity: 0.35; }
.cf__f input, .cf__f textarea, .cf__pick {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.05em 0 0.15em;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bone);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 2.5vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  outline: none;
  caret-color: #c58a6e;
  -webkit-appearance: none;
  appearance: none;
}
.cf__f textarea { min-height: 2.9em; resize: none; overflow: hidden; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.45; }
.cf__f input::placeholder, .cf__f textarea::placeholder { color: rgba(243, 243, 240, 0.2); opacity: 1; }
.cf__u { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(243, 243, 240, 0.16); transform-origin: 0 50%; }
.cf__u::after { content: ""; position: absolute; inset: 0; background: #c58a6e; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--e-out); }
.cf__f.is-on .cf__u::after { transform: none; }
.cf__f.is-on .cf__l, .cf__f.is-on .cf__n { color: #c58a6e; }
.cf__f.is-filled .cf__u { background: rgba(243, 243, 240, 0.42); }
/* filled: the number turns into a tick */
.cf__f.is-filled .cf__n { color: transparent; }
.cf__f.is-filled .cf__n::after { content: ""; position: absolute; left: 0.25em; top: -0.2em; width: 0.42em; height: 0.78em; border: solid #c58a6e; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cf__f.is-wrong .cf__u, .cf__f.is-wrong .cf__u::after { background: #e08a6a; transform: none; }
.cf__f.is-wrong .cf__l { color: #e8a184; }
/* the service: a button that opens the list */
.cf__pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; cursor: pointer; }
.cf__pickv { color: rgba(243, 243, 240, 0.2); transition: color 0.4s var(--e-out); }
.cf__f--svc.is-filled .cf__pickv { color: var(--bone); }
.cf__picki { position: relative; flex: none; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(243, 243, 240, 0.32); border-radius: 50%; color: var(--bone); transition: transform 0.7s var(--e-out), background-color 0.45s var(--e-out), color 0.45s var(--e-out), border-color 0.45s var(--e-out); }
.cf__picki i { position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; margin: -0.5px 0 0 -6px; background: currentColor; }
.cf__picki i + i { transform: rotate(90deg); }
.cf__pick:hover .cf__picki, .cf__pick:focus-visible .cf__picki { background: var(--bone); color: var(--ink); border-color: var(--bone); transform: rotate(90deg); }
/* the foot: a line of what to do, and the send button with its ring */
.cf__foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.2rem); }
.cf__status { max-width: 34ch; color: rgba(243, 243, 240, 0.55); line-height: 1.5; }
.cf__status .label { color: inherit; }
.cf__status.is-wrong { color: #e8a184; font-size: 0.98rem; }
.cf__send {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(7rem, 9.5vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--ctl-fs);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.5s var(--e-out);
}
.cf__send::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bone); transform: scale(0); transition: transform 0.7s var(--e-out); }
.cf__send:hover::before, .cf__send:focus-visible::before { transform: scale(1); }
.cf__send:hover, .cf__send:focus-visible { color: var(--ink); }
.cf__sendt, .cf__senda { position: relative; z-index: 1; grid-area: 1 / 1; transition: opacity 0.3s var(--e-out), transform 0.6s var(--e-out); }
.cf__sendt { transform: translateY(-0.55rem); }
.cf__senda { width: 0.95rem; height: auto; transform: translateY(1rem); opacity: 0.8; }
.cf__send:hover .cf__senda { transform: translate(0.2rem, 0.8rem); }
.cf__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cf__ring circle { fill: none; stroke: rgba(243, 243, 240, 0.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cf__ring .cf__ring-on { stroke: #c58a6e; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--e-out); }
.cf__orb { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--e-out); }
.cf.is-sending .cf__sendt, .cf.is-sending .cf__senda { opacity: 0; }
.cf.is-sending .cf__orb { opacity: 1; }
.cf.is-sending .cf__send::before { transform: scale(0); }
/* sent: the rows step away and the thank-you comes in */
.cf__grid, .cf__foot { transition: opacity 0.6s var(--e-out), transform 0.8s var(--e-out); }
.cf.is-done .cf__grid, .cf.is-done .cf__foot { opacity: 0; transform: translateY(-16px); visibility: hidden; pointer-events: none; transition: opacity 0.6s var(--e-out), transform 0.8s var(--e-out), visibility 0s linear 0.6s; }
.cf__done { position: absolute; left: 0; right: 0; top: 1.4rem; display: none; }
.cf.is-done .cf__done { display: block; }
.cf__thanks { font-family: var(--f-display); font-weight: 200; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: 1; letter-spacing: -0.03em; }
.cf__sub { margin-top: 1.2rem; max-width: 36ch; color: rgba(243, 243, 240, 0.7); font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.55; }
.cf__again { margin-top: 1.8rem; padding-bottom: 0.3em; border-bottom: 1px solid rgba(243, 243, 240, 0.4); color: var(--bone); }

/* the services: the field opens out into a list that takes the whole space */
.svc {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1c1814;
  color: var(--bone);
  visibility: hidden;
  clip-path: inset(var(--st, 50%) 0 var(--sb, 50%) 0);
  transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.85s;
  scrollbar-width: none;
}
.svc::-webkit-scrollbar { display: none; }
.svc.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s; }
.svc__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(clamp(1.1rem, 2vw, 1.7rem) + env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) 1rem max(var(--gut), env(safe-area-inset-left));
  background: linear-gradient(#1c1814 60%, rgba(28, 24, 20, 0));
}
.svc__bar .label { color: rgba(243, 243, 240, 0.6); }
.svc__k { margin-right: 0.9rem; color: #c58a6e; }
.svc__x { position: relative; width: var(--ctl-h); height: var(--ctl-h); border: 1px solid rgba(243, 243, 240, 0.35); border-radius: 50%; transition: background-color 0.45s var(--e-out), transform 0.7s var(--e-out), border-color 0.45s var(--e-out); }
.svc__x i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: -0.5px 0 0 -7px; background: var(--bone); transform: rotate(45deg); transition: background-color 0.45s var(--e-out); }
.svc__x i + i { transform: rotate(-45deg); }
.svc__x:hover { background: var(--bone); border-color: var(--bone); transform: rotate(90deg); }
.svc__x:hover i { background: var(--ink); }
.svc__list { width: 100%; max-width: var(--maxw); margin: auto; padding: 2vh max(var(--gut), env(safe-area-inset-right)) 8vh max(var(--gut), env(safe-area-inset-left)); }
.svc__i {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 21rem) 3rem;
  align-items: center;
  gap: 0.6rem 2rem;
  padding: clamp(0.85rem, 1.9vh, 1.4rem) 0;
  border-bottom: 1px solid rgba(243, 243, 240, 0.12);
  cursor: pointer;
  outline: none;
}
.svc__i:first-child { border-top: 1px solid rgba(243, 243, 240, 0.12); }
.svc__i::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); background: rgba(243, 243, 240, 0.045); transform: scaleY(0); transition: transform 0.5s var(--e-out); }
.svc__n { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; line-height: 1; color: rgba(243, 243, 240, 0.4); transition: color 0.4s var(--e-out); }
.svc__t { display: block; overflow: hidden; padding-bottom: 0.08em; font-family: var(--f-display); font-weight: 200; font-size: clamp(1.8rem, 4.1vw, 4.3rem); line-height: 1.04; letter-spacing: -0.03em; }
.svc__t > span { display: inline-block; transition: transform 0.7s var(--e-out), color 0.4s var(--e-out); }
.svc__d { color: rgba(243, 243, 240, 0.48); font-size: 0.95rem; line-height: 1.45; transition: color 0.4s var(--e-out); }
.svc__go { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(243, 243, 240, 0.25); border-radius: 50%; color: var(--bone); opacity: 0; transform: scale(0.7) rotate(-45deg); transition: opacity 0.45s var(--e-out), transform 0.6s var(--e-out), background-color 0.4s var(--e-out), border-color 0.4s var(--e-out); }
.svc__go svg { width: 0.9rem; height: auto; }
.svc__i.is-hot::before { transform: none; }
.svc__i.is-hot .svc__t > span { transform: translateX(1.2rem); }
.svc__i.is-hot .svc__n { color: #c58a6e; }
.svc__i.is-hot .svc__d { color: rgba(243, 243, 240, 0.82); }
.svc__i.is-hot .svc__go { opacity: 1; transform: none; background: #c58a6e; border-color: #c58a6e; }
.svc__i[aria-selected="true"] .svc__t > span { color: #c58a6e; }
.svc__i[aria-selected="true"] .svc__n { color: #c58a6e; }

@media (max-width: 1024px) {
  .cspace__in { grid-template-columns: minmax(0, 1fr); }
  .cspace__aside { position: static; }
  .svc__i { grid-template-columns: 2.6rem minmax(0, 1fr) 2.8rem; }
  .svc__d { grid-column: 2 / 3; grid-row: 2; }
  .svc__go { grid-column: 3; grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 640px) {
  .cspace__bar { grid-template-columns: auto 1fr; }
  .cspace__hint { display: none; }
  .cf__grid { grid-template-columns: minmax(0, 1fr); }
  .cf__f--half { grid-column: 1 / -1; }
  .cf__foot { flex-direction: column; align-items: flex-start; }
  .cf__send { align-self: flex-end; }
  .ftr__col { grid-column: span 12; }
  /* the list on a phone: one line a title, the seven within a short scroll */
  .svc__i { grid-template-columns: 1.7rem minmax(0, 1fr) 2.3rem; gap: 0.3rem 0.85rem; padding: 0.9rem 0; }
  .svc__t { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .svc__d { font-size: 0.84rem; line-height: 1.4; }
  .svc__go { width: 2.3rem; height: 2.3rem; }
  .svc__i.is-hot .svc__t > span { transform: translateX(0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cspace__hint svg { animation: none; }
  .svc { transition: none; }
}

/* -- titles that answer the pointer (hovertype.js) ------------------------ */
.ht-l { will-change: transform; }
.ht-l--b { display: inline-block; }
[data-hover] { cursor: default; }
/* draft: the title drawn, not inked, in a ring under the pointer */
.ht-draft { position: relative; }
.ht-draft__wrap { position: absolute; inset: 0; pointer-events: none; }
.ht-draft__over {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
  -webkit-mask-image: radial-gradient(circle var(--hr, 0px) at var(--hx, -999px) var(--hy, -999px), #000 64%, transparent 100%);
  mask-image: radial-gradient(circle var(--hr, 0px) at var(--hx, -999px) var(--hy, -999px), #000 64%, transparent 100%);
}
.ht-draft__over em { -webkit-text-stroke: 1px var(--accent); }
.ht-draft.is-drafting > .sp-line {
  -webkit-mask-image: radial-gradient(circle var(--hr, 0px) at var(--lx, -999px) var(--ly, -999px), transparent 60%, #000 100%);
  mask-image: radial-gradient(circle var(--hr, 0px) at var(--lx, -999px) var(--ly, -999px), transparent 60%, #000 100%);
}
.ht-draft__guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-mask-image: radial-gradient(circle calc(var(--hr, 0px) * 2.4) at var(--hx, -999px) var(--hy, -999px), #000 15%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--hr, 0px) * 2.4) at var(--hx, -999px) var(--hy, -999px), #000 15%, transparent 100%);
}
.ht-draft__g { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.ht-draft__v { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 23 — The dock: retired. On a phone the app (app.js, app.css) has its own tab bar. */

/* 22 — Drawing viewer ----------------------------------------------------- */
html.viewer-open { overflow: hidden; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: none;
}
.viewer.is-open { display: block; }

.viewer__bd {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, 0.95);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.viewer__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.viewer__stage.is-grabbing { cursor: grabbing; }

.viewer__img {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  max-width: none;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-drag: none;
}

.viewer__bar {
  position: absolute;
  left: var(--gut); right: var(--gut);
  bottom: clamp(1rem, 2.4vw, 1.9rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  color: var(--bone);
  pointer-events: none;
}
.viewer__cap { color: var(--bone); flex: 1 1 auto; text-align: center; }
.viewer__idx,
.viewer__hint { color: rgba(243, 243, 240, 0.5); white-space: nowrap; }

.viewer__close {
  position: absolute;
  top: clamp(1rem, 2.4vw, 1.9rem);
  right: var(--gut);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 243, 240, 0.28);
  border-radius: 50%;
  color: var(--bone);
  transition: background-color 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.viewer__close:hover { background: rgba(243, 243, 240, 0.14); border-color: rgba(243, 243, 240, 0.5); }
.viewer__close svg { width: 17px; height: 17px; }

.viewer__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 52px; height: 52px;
  display: none;
  place-items: center;
  border: 1px solid rgba(243, 243, 240, 0.22);
  border-radius: 50%;
  color: var(--bone);
  transition: background-color 0.4s var(--e-out), border-color 0.4s var(--e-out), opacity 0.4s;
}
.viewer.has-nav .viewer__nav { display: grid; }
.viewer.is-zoomed .viewer__nav { opacity: 0.18; }
.viewer__nav:hover { background: rgba(243, 243, 240, 0.14); border-color: rgba(243, 243, 240, 0.45); opacity: 1; }
.viewer__nav svg { width: 18px; height: 18px; }
.viewer__nav--prev { left: clamp(0.6rem, 1.8vw, 1.6rem); }
.viewer__nav--next { right: clamp(0.6rem, 1.8vw, 1.6rem); }

.viewer__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(76px, 8vw, 110px);
  aspect-ratio: 1;
  display: none;
  color: var(--bone);
  pointer-events: none;
}
.viewer__spin.is-on { display: block; }

/* Inside the viewer the native grab cursor is the honest affordance, so the
   custom one steps aside. */
html.viewer-open .cursor { opacity: 0 !important; }
html.viewer-open.has-cursor .viewer__stage { cursor: grab !important; }
html.viewer-open.has-cursor .viewer__stage.is-grabbing { cursor: grabbing !important; }
html.viewer-open.has-cursor .viewer__close,
html.viewer-open.has-cursor .viewer__nav { cursor: pointer !important; }

/* The affordance on the page itself — only for readers without the custom
   cursor, which says "Inspect" instead. */
.zoomable { position: relative; }
.zoomable::after {
  content: "+";
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(21, 18, 15, 0.6);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.45s var(--e-out), transform 0.45s var(--e-out);
  pointer-events: none;
}
.zoomable:hover::after { opacity: 1; transform: scale(1); }
html.has-cursor .zoomable::after { display: none; }

/* On touch there is no hover to reveal it, so the badge simply stays */
@media (hover: none) {
  .zoomable::after { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .viewer__hint,
  .viewer__idx { display: none; }
}

/* 23 — Orbs --------------------------------------------------------------- */
/* Thinking-orbs (Jakub Antalik, MIT) for anything that is loading, and for the
   move between projects. The canvas takes its size from its host. */
.orb__canvas { display: block; }

/* the orb route: an ink sheet with a curved leading edge */
.otrans {
  position: fixed;
  inset: 0;
  z-index: 7550;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.otrans.is-on { visibility: visible; }
.otrans__panel {
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: var(--bone);
  will-change: transform;
}
/* an ellipse straddling the edge: as it flattens, the edge straightens */
.otrans__cap {
  position: absolute;
  left: -14%;
  right: -14%;
  height: 24vh;
  border-radius: 50%;
  background: var(--ink);
  transform-origin: 50% 50%;
}
.otrans__cap--top { top: -12vh; }
.otrans__cap--bot { bottom: -12vh; }
.otrans__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  padding: var(--gut);
}
.otrans__orb {
  width: clamp(92px, 10vw, 138px);
  aspect-ratio: 1;
  color: var(--bone);
}
.otrans__label {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.otrans__sub {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 243, 240, 0.5);
}

/* an orb waiting inside an image frame until the image arrives */
.fig__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 46px;
  aspect-ratio: 1;
  color: var(--fg);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s var(--e-out);
}
.fig__orb.is-out { opacity: 0; }

/* films: an orb while YouTube wakes up */
.film__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(70px, 8vw, 104px);
  aspect-ratio: 1;
  color: var(--bone);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s var(--e-out);
}
.film__orb.is-out { opacity: 0; }
.film.is-playing .film__orb { display: block; }

/* 24 — Curriculum vitae --------------------------------------------------- */
.cvbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.66em 1.1em 0.62em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), border-color 0.45s var(--e-out);
}
.cvbtn svg { width: 0.95em; height: auto; transition: transform 0.5s var(--e-out); }
.cvbtn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cvbtn:hover svg { transform: translateY(2px); }
.cvbtn--lg { font-size: 0.78rem; padding: 1.05em 1.6em 1em; }
.cvbtn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cvbtn--solid:hover { background: transparent; color: var(--fg); }
.about-cv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.menu__cv { text-align: left; }
.menu__cv:hover { color: var(--bone); }

.cvm {
  position: fixed;
  inset: 0;
  z-index: 7100;
  display: none;
}
.cvm.is-open { display: block; }
.cvm__bd {
  position: absolute;
  inset: 0;
  background: rgba(21, 18, 15, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cvm__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(760px, calc(100vw - 2 * var(--gut)));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.cvm__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.4rem) 1.1rem;
  border-bottom: 1px solid rgba(21, 18, 15, 0.12);
}
.cvm__mark { width: 44px; color: var(--ink); flex: 0 0 auto; }
.cvm__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 0.3rem;
}
.cvm__title em { font-family: var(--f-serif); font-style: italic; }
.cvm__close {
  margin-left: auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(21, 18, 15, 0.16);
  border-radius: 50%;
  transition: background-color 0.4s var(--e-out);
}
.cvm__close:hover { background: rgba(21, 18, 15, 0.06); }
.cvm__close svg { width: 15px; height: 15px; }

.cvm__body {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.3rem clamp(1.3rem, 3vw, 2.4rem) 1.6rem;
}
.cvm__lede { color: #6e655d; max-width: 54ch; font-size: 0.95rem; }
.cvm__group { border: 0; margin-top: 1.6rem; }
.cvm__group legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(21, 18, 15, 0.12);
  margin-bottom: 0.4rem;
}
.cvm__all {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e655d;
}
.cvm__all:hover { color: var(--ink); }
.cvm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.6rem;
}

/* a switch: the knob is a short bar, the track a longer one */
.tog {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(21, 18, 15, 0.07);
  cursor: pointer;
}
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.tog__box {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  margin-top: 0.12rem;
  border-radius: 100px;
  border: 1px solid rgba(21, 18, 15, 0.28);
  transition: background-color 0.35s var(--e-out), border-color 0.35s var(--e-out);
}
.tog__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: rgba(21, 18, 15, 0.45);
  transition: transform 0.45s var(--e-out), background-color 0.35s var(--e-out);
}
.tog input:checked + .tog__box { background: var(--ink); border-color: var(--ink); }
.tog input:checked + .tog__box::after { transform: translateX(16px); background: var(--bone); }
.tog input:focus-visible + .tog__box { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.tog__txt { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; line-height: 1.3; }
.tog__txt small { font-size: 0.78rem; color: #6e655d; }

.tog--proj { align-items: center; }
.tog--proj img {
  width: 54px;
  height: 38px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
  background: rgba(21, 18, 15, 0.06);
}

.cvm__hint { margin-top: 0.7rem; font-size: 0.82rem; color: #6e655d; max-width: 56ch; }
fieldset[disabled] .seg { pointer-events: none; }
.seg { display: inline-flex; border: 1px solid rgba(21, 18, 15, 0.2); border-radius: 100px; padding: 3px; margin-top: 0.7rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block;
  padding: 0.55em 1.1em;
  border-radius: 100px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e655d;
  transition: background-color 0.35s var(--e-out), color 0.35s var(--e-out);
}
.seg input:checked + span { background: var(--ink); color: var(--bone); }
.seg input:focus-visible + span { outline: 1.5px solid var(--ink); outline-offset: 2px; }

.cvm__foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem clamp(1.3rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(21, 18, 15, 0.12);
  background: #e9e1d7;
}
.cvm__status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  font-size: 0.85rem;
  color: #6e655d;
  min-height: 40px;
}
.cvm__orb { width: 40px; aspect-ratio: 1; color: var(--ink); display: none; }
.cvm.is-busy .cvm__orb { display: block; }
.cvm__cancel {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9em 1.1em;
  color: #6e655d;
}
.cvm__cancel:hover { color: var(--ink); }
.cvm.is-busy .cvm__go { opacity: 0.45; pointer-events: none; }

html.cv-open { overflow: hidden; }

@media (max-width: 640px) {
  .cvm__panel {
    left: 0; right: 0; top: auto; bottom: 0;
    translate: 0 0;
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }
  .cvm__grid { grid-template-columns: 1fr; }
  .cvm__status { font-size: 0.78rem; }
}

/* 25 — Parametric studies (parametric.html) --------------------------------- */
/* A study: the rule, then the iterations — a picture the reader scrubs
   through with a slider while every parameter's readout moves with it —
   then the outcome as a ledger. (studies.js holds the data, page-parametric.js
   builds it.) */
.study { padding-block: clamp(2rem, 4vw, 4rem) 0; }
.study + .study { margin-top: clamp(2rem, 4vw, 4rem); }
.study__head { margin-bottom: clamp(2rem, 4vw, 3.6rem); }
.study__rule { row-gap: 1rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.study__out { margin-top: clamp(3rem, 6vw, 6rem); }

.iter {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem) var(--gut);
  align-items: start;
}
.iter__stage { min-width: 0; }
.iter__frames {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--fg);
}
.iter__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s var(--e-out), transform 0.9s var(--e-out);
  cursor: pointer;
}
.iter__frame.is-on { opacity: 1; transform: none; }
.iter__frame img, .iter__ph, .iter__ph svg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a cut-out iteration floats in the stage: whole, centred, and free to grow
   and shrink as the reader scrubs */
.iter__frame img { object-fit: contain; object-position: 50% 50%; padding: 4%; box-sizing: border-box; }
.iter__frames { background: radial-gradient(ellipse at 50% 60%, var(--veil), transparent 70%), var(--bg-2); }
.iter__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.9rem;
}
.iter__note { max-width: 46ch; }
.iter__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the slider: a hairline with a stop at every iteration, a handle that
   glides (page-parametric.js moves it continuously) and turns into a
   thinking orb while it is held */
.iter__scrub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.slider {
  position: relative;
  height: 56px;
  margin-inline: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.slider:focus-visible .slider__thumb i { box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--accent); }
.slider__track {
  position: absolute;
  left: 0; right: 0;
  top: 20px;
  height: 1px;
  background: var(--rule);
}
.slider__fill {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.slider__stops b {
  position: absolute;
  top: 20px;
  width: 0;
  height: 0;
}
.slider__stops i {
  position: absolute;
  left: -2.5px; top: -2.5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rule);
  transition: background-color 0.45s var(--e-out), transform 0.6s var(--e-out);
}
.slider__stops b.is-on i { background: var(--fg); }
.slider__stops span {
  position: absolute;
  top: 14px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--f-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  transition: color 0.45s var(--e-out);
}
.slider__stops b.is-at span { color: var(--fg); }
.slider__thumb {
  position: absolute;
  left: 0;
  top: 20px;
  width: 0;
  height: 0;
  will-change: transform;
  pointer-events: none;
}
.slider__thumb i {
  position: absolute;
  left: -8px; top: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.55s var(--e-out);
}
.slider__orb {
  position: absolute;
  left: -23px; top: -23px;
  width: 46px; height: 46px;
  color: var(--fg);
  transform: scale(0);
  transition: transform 0.6s var(--e-out);
}
.slider__orb .orb__canvas { display: block; }
.slider:hover .slider__thumb i { transform: scale(1.35); }
.slider.is-held .slider__thumb i { transform: scale(0); }
.slider.is-held .slider__orb { transform: scale(1); }
html.has-cursor .slider, html.has-cursor .iter__frames { cursor: none; }

/* the readout */
.params { margin-top: 1.2rem; border-top: 1px solid var(--rule); }
.param {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.4rem;
  grid-template-areas: "name val" "bar val" "effect effect";
  column-gap: 1rem;
  row-gap: 0.45rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.param__name { grid-area: name; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.param__bar { grid-area: bar; position: relative; height: 1px; background: var(--rule); }
.param__bar i {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.param__val {
  grid-area: val;
  align-self: end;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3em;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.param__val small { font-family: var(--f-body); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
.param__effect { grid-area: effect; font-size: 0.86rem; color: var(--fg-mute); line-height: 1.45; }

/* the unit the system is made of: a dark stage. The 3D cut-out drifts as the
   page scrolls, on a pool of light; the orthographic views sit beside it
   like a drawing set, each drifting at its own pace. */
.module {
  /* a dark card of its own: its colours are set here rather than by turning
     the whole page over while it passes, which flashed the page black and
     white */
  --fg: var(--bone);
  --fg-mute: rgba(243, 243, 240, 0.6);
  --rule: rgba(243, 243, 240, 0.16);
  --rule-soft: rgba(243, 243, 240, 0.08);
  --bg: var(--ink);
  margin-top: clamp(3rem, 6vw, 6rem);
  border-radius: clamp(14px, 1.8vw, 26px);
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}
.module__in { padding: clamp(1.8rem, 3.4vw, 3.4rem); }
.module__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.module__head .label { color: rgba(243, 243, 240, 0.6); }
.module__dims { text-align: right; max-width: 48ch; }
.module__stage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 3vw, 3rem) var(--gut);
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.8rem);
}
.module__hero { position: relative; margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.module__hero::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 243, 240, 0.14), rgba(243, 243, 240, 0) 68%);
}
.module__float { position: relative; z-index: 1; display: block; width: 86%; will-change: transform; }
.module__float img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
.module__shadow {
  position: absolute;
  left: 18%; right: 18%; bottom: 6%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
}
.module__views { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.module__view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: clamp(0.8rem, 1.4vw, 1.2rem) 0;
  border-top: 1px solid rgba(243, 243, 240, 0.14);
}
.module__view:last-child { border-bottom: 1px solid rgba(243, 243, 240, 0.14); }
.module__viewfig { display: block; max-height: 22vh; will-change: transform; }
.module__viewfig img { width: 100%; height: auto; max-height: 22vh; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.module__view figcaption { display: flex; flex-direction: column; gap: 0.35rem; }
.module__view figcaption .label--fg { color: var(--bone); }
.facts--tight .fact { padding: 0.6rem 0; }

@media (max-width: 1024px) {
  .module__stage { grid-template-columns: 1fr; }
  .module__hero { aspect-ratio: 4 / 3; }
}

/* a picture that is still to come */
.study__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--veil) 0 10px, transparent 10px 22px);
  text-align: center;
  padding: 1rem;
}

@media (max-width: 1024px) {
  .iter { grid-template-columns: 1fr; }
  .study__rule > * { grid-column: 1 / -1 !important; }
}

/* -- the opening: the system's own view, its name woven through it -------- */
/* The render is a PNG with its own transparency. The name is spread across
   the whole width just where the glass begins, every other letter in front
   of it and the rest behind — the steel crosses some letters and is crossed
   by others. The rest of the name and the idea sit in the open sky above;
   callouts reach from fittings on the glass out to the margins. As the page
   scrolls the glass rises, each letter drifts at its own depth and the sky
   clears. (page-parametric.js) */
.study--hero { padding-top: 0; }
.phx {
  --r: 2.56;                            /* the picture's proportions (set per study) */
  --imgh: max(calc(100vw / var(--r)), 44svh); /* the picture's height: full width, or 44% of the screen */
  --sink: var(--sink-wide, 0.2);       /* how much of the picture's foot is below the screen (a study may sink it deeper on a wide screen) */
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
.phx__top {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: calc(var(--header-h) + clamp(1.2rem, 3vw, 2.4rem));
}
/* the open sky: the second half of the name, and the idea */
.phx__sky {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem var(--gut);
  padding-top: calc(var(--header-h) + clamp(1.4rem, 5vh, 3.4rem));
  will-change: transform;
}
.phx__em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.phx__idea {
  max-width: 30ch;
  padding-bottom: 0.5em;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  color: var(--fg-mute);
}
/* the name: letter by letter across the width, its foot in the glass */
.phx__title {
  position: absolute;                    /* no z-index, no transform: the letters weave with the glass */
  left: 0;
  right: 0;
  top: 40%;                              /* placed and sized by page-parametric.js (layoutPhx) */
  display: flex;
  justify-content: space-between;
  padding-inline: var(--gut);
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 18vw;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
}
.phx__l { position: relative; will-change: transform; }
.phx__l--over { z-index: 3; }
.phx__l--under { z-index: 1; }
.phx__glass {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(var(--imgh) * var(--sink) * -1);
  margin: 0;
  pointer-events: none;
}
.phx__pane { display: block; transform-origin: 50% 100%; will-change: transform; }
.phx__plate {
  position: relative;
  left: 50%;
  display: block;
  width: max(100%, calc(44svh * var(--r)));
  transform: translateX(-50%);
}
.phx__plate img { display: block; width: 100%; height: auto; }
/* callouts */
.phx__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.phx__lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--e-io) var(--d, 0s);
}
.phx__lines circle {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s ease var(--d, 0s);
}
.phx__note {
  position: absolute;
  display: flex;
  gap: 0.6em;
  width: max-content;
  max-width: 22em;
  padding: 0.45em 0.7em;
  margin-top: -0.4rem;
  transform: translateY(-100%);
  background: var(--bg);
  border-radius: 2px;
  font-family: var(--f-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.7s var(--e-out) calc(var(--d, 0s) + 0.9s);
}
.phx__note b { font-weight: 600; color: var(--accent); }
.phx__note--r { transform: translate(-100%, -100%); text-align: right; flex-direction: row-reverse; }
.phx.is-drawn .phx__lines path { stroke-dashoffset: 0; }
.phx.is-drawn .phx__lines circle { opacity: 1; }
.phx.is-drawn .phx__note { opacity: 1; }
.phx__bot {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.phx__bot .label { padding: 0.35em 0.6em; margin-left: -0.6em; background: var(--bg); border-radius: 2px; }
.study--hero > .shell:first-of-type { padding-top: clamp(3rem, 7vw, 7rem); }
/* the edge layout (Zunther): the picture fills the height from the bottom
   left, the name steps down the facade's own edge into the corner of sky
   (letters placed by layoutPhx), and the rest of the name sits low in the
   open strip on the right */
@media (orientation: portrait) { .phx { --sink: 0.2; } }
.phx.is-edge .phx__glass { top: 0; bottom: 0; }
.phx.is-edge .phx__pane { height: 100%; }
.phx.is-edge .phx__plate { position: absolute; left: 0; bottom: 0; transform: none; }
.phx.is-edge .phx__plate img { width: 100%; height: 100%; }
.phx.is-edge .phx__title { top: 0; bottom: auto; display: block; padding: 0; }
.phx.is-edge .phx__l { position: absolute; margin: 0; }
.phx.is-edge .phx__sky {
  position: absolute;
  left: auto;
  right: 0;
  bottom: clamp(1.6rem, 7vh, 4.4rem);
  width: auto;
  max-width: none;
  margin: 0;
  padding-top: 0;
  justify-content: flex-end;
  text-align: right;
}
/* the parts, when the unit has no views of its own: in the column beside it */
.parts--beside { margin-top: 0; padding-top: 0; border-top: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-content: center; }
.parts--beside .part--b { margin-top: 0; margin-left: 18%; }
.parts--beside .part__fig img { max-height: 34vh; width: auto; max-width: 100%; }

@media (max-width: 860px) {
  .phx__sky { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .phx__note, .phx__lines { display: none; }
  .phx__idea { display: none; }
}

/* -- the iterations: cut-outs on the page itself --------------------------- */
/* No backdrop: the PNGs float on the paper, every iteration in the same
   place, and the script blends between neighbours as the slider moves. */
.iter__frames--cut {
  aspect-ratio: var(--ar, 0.75);
  width: min(100%, calc(78vh * var(--ar, 0.75)));
  margin-inline: auto;
  overflow: visible;
  background: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.iter__frames--cut .iter__frame { transform: none; transition: none; will-change: opacity; }
/* iterations cut out of something larger fade where they were cut: at the
   foot (trunks running off the picture) or on every edge (a patch of a
   field) — on the stage, the selection's previews alike */
.is-fade-foot {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}
.is-fade-edges {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}
.iter__frames--cut .iter__frame img { padding: 0; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }

/* -- a set of views in third-angle projection ----------------------------- */
/* Top over front, side beside it, at one scale: the grid's columns are the
   front's and the side's own widths, so every edge registers. The dashed
   projection lines draw themselves once the set is in view. */
.study__sys { margin-top: var(--sec); }
.ortho { margin: clamp(1.6rem, 3.4vw, 3rem) 0 0; color: var(--fg); }
.ortho__grid {
  --g: clamp(1.6rem, 4.4vw, 4rem);
  display: grid;
  gap: var(--g);
  align-items: end;
  max-width: min(1040px, 82vh);
  margin-inline: auto;
  padding: 2.2rem 4.4rem 4.2rem 0;
}
.ortho__v { position: relative; display: block; }
.ortho__v img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--e-out), transform 1.3s var(--e-out);
}
.ortho.is-in .ortho__v img { opacity: 1; transform: none; }
.ortho.is-in .ortho__v--front img { transition-delay: 0.14s; }
.ortho.is-in .ortho__v--side img { transition-delay: 0.28s; }
.ortho__v > b {
  position: absolute;
  left: 0.7rem;
  bottom: 100%;
  margin-bottom: 0.55rem;
  font-weight: 500;
  white-space: nowrap;
}
.ortho__v--side > b { left: auto; right: 0; }
.ortho__v--top > b { left: 0; }
/* projection lines: top to front, front to side */
.ortho__v--top::before, .ortho__v--top::after,
.ortho__v--front::before, .ortho__v--front::after {
  content: "";
  position: absolute;
  opacity: 0.4;
  transition: transform 1.1s var(--e-out) 0.45s;
}
.ortho__v--top::before, .ortho__v--top::after {
  top: 100%;
  height: var(--g);
  border-left: 1px dashed currentColor;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.ortho__v--top::before { left: 0; }
.ortho__v--top::after { right: 0; }
.ortho__v--front::before, .ortho__v--front::after {
  left: 100%;
  width: var(--g);
  border-top: 1px dashed currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ortho__v--front::before { top: 0; }
.ortho__v--front::after { bottom: 0; }
.ortho.is-in .ortho__v--top::before, .ortho.is-in .ortho__v--top::after,
.ortho.is-in .ortho__v--front::before, .ortho.is-in .ortho__v--front::after { transform: none; }
/* dimension lines */
.ortho__dim { position: absolute; display: flex; align-items: center; gap: 0.6rem; opacity: 0; transition: opacity 0.9s var(--e-out) 0.9s; }
.ortho.is-in .ortho__dim { opacity: 1; }
.ortho__dim i { position: relative; display: block; flex: 1; }
.ortho__dim--w { left: 0; right: 0; top: 100%; margin-top: 1rem; flex-direction: column; }
.ortho__dim--w i { width: 100%; height: 9px; flex: none; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.ortho__dim--w i::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid currentColor; }
.ortho__dim--h { top: 0; bottom: 0; left: 100%; margin-left: 1rem; }
.ortho__dim--h i { width: 9px; height: 100%; flex: none; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.ortho__dim--h i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; border-left: 1px solid currentColor; }
.ortho__dim--h .label { writing-mode: vertical-rl; transform: rotate(180deg); }
.ortho__cap { margin-top: 0.4rem; text-align: center; }
/* top over front alone (a unit the same both ways): narrow, the height
   dimensioned beside the front, no lines out to a side view */
.ortho--two .ortho__grid { max-width: calc(min(400px, 34vh) + 4.4rem); }
.ortho--two .ortho__v--front::before, .ortho--two .ortho__v--front::after { display: none; }
/* line drawings are ink on transparency: light on the dark page */
html[data-mode="dark"] .ortho--ink .ortho__v img { filter: invert(1); }
.ortho--dark { color: var(--bone); margin: 0; }
.ortho--dark .ortho__grid { padding: 2rem 0.5rem 0.5rem 0; max-width: none; }
.ortho--dark .ortho__v img { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }

/* -- the perspective, on a sky the page paints ---------------------------- */
.sky {
  position: relative;
  /* the full width, always: with an auto width the height cap below would
     narrow it through the proportions and leave a strip of paper beside it */
  width: 100%;
  margin: var(--sec) 0 0;
  aspect-ratio: 1800 / 1157;
  max-height: 120vh;
  overflow: hidden;
  isolation: isolate;
}
.sky__air { position: absolute; inset: 0; }
.sky__air--noon { background: linear-gradient(180deg, #7fa9d1 0%, #b9d2e8 42%, #e9eff2 100%); }
.sky__air--dusk { background: linear-gradient(180deg, #171b36 0%, #4f3a62 34%, #c2674f 70%, #f0b984 100%); opacity: 0; }
.sky__glass { position: absolute; inset: -4.5% 0; z-index: 1; display: block; will-change: transform; }
.sky__glass img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sky__cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: clamp(1rem, 2.6vw, 2rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: #f3f3f0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.sky__cap .label { color: inherit; }
.sky__note { max-width: 34ch; font-size: 0.9rem; line-height: 1.45; text-align: right; }
/* cut-outs that stand in the sky: rising from its foot, whole, the one
   further off smaller beside the near one */
.sky--stand { aspect-ratio: 16 / 10; }
.sky--stand .sky__glass { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1.5rem, 8vw, 8rem); }
.sky--stand .sky__glass img { width: auto; height: 84%; max-width: 48%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 40px rgba(21, 18, 15, 0.18)); }
.sky--stand .sky__glass .sky__far { height: 56%; max-width: 30%; will-change: transform; }

/* -- the parts, on the unit's dark stage ---------------------------------- */
.parts {
  margin-top: clamp(2.4rem, 5vw, 4.6rem);
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(243, 243, 240, 0.14);
}
.parts__head { color: rgba(243, 243, 240, 0.6); }
.parts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 4rem) var(--gut);
  align-items: start;
  margin-top: clamp(1.2rem, 3vw, 2.4rem);
}
.part { margin: 0; }
.part--b { margin-top: clamp(2.4rem, 7vw, 7rem); }
.part__fig { display: block; will-change: transform; }
.part__fig img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.55)); }
.part figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.8rem;
  margin-top: 1.1rem;
  color: rgba(243, 243, 240, 0.6);
}
.part figcaption .label--fg { color: var(--bone); }
.part figcaption .label:last-child { grid-column: 2; }

@media (max-width: 860px) {
  .phx__top { flex-direction: column; gap: 0.4rem; }
  .phx__title { top: 30%; }
  .parts__row { grid-template-columns: 1fr; }
  .part--b { margin-top: 2.4rem; }
  .ortho__grid { padding-right: 3rem; }
  .sky__cap { flex-direction: column; gap: 0.5rem; }
  .sky__note { text-align: left; }
}

/* -- the selection (parametric.html): every system as a still -------------- */
/* Two to a row, the right-hand one set lower. Each card is a stage with no
   backdrop: the system's name woven through one picture of it — every other
   letter in front, the rest behind. Nothing runs under the pointer; the
   iterations are on the system's own page (page-parametric.js). */
.systems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 7vw, 7rem) var(--gut);
}
.sysc { display: block; color: inherit; }
.sysc:nth-child(even) { margin-top: clamp(4rem, 12vw, 12rem); }
.sysc__stage {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
/* the name: no transform on the row, so its letters weave with the frames */
.sysc__name {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 9vw;                       /* fitted to the stage by the script */
  line-height: 0.8;
  text-transform: uppercase;
  pointer-events: none;
}
.sysc__l { position: relative; display: block; will-change: transform; }
.sysc__l--over { z-index: 3; }
.sysc__l--under { z-index: 1; }
/* the outline row: in front of everything, showing only the letters that
   went behind the glass, as a hairline */
.sysc__name--ghost .sysc__l { z-index: 3; color: transparent; -webkit-text-stroke: 1px var(--fg); opacity: 0.32; }
.sysc__name--ghost .sysc__l--over { visibility: hidden; }
.sysc__frames {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  height: 92%;
  aspect-ratio: var(--ar, 0.7);
  max-width: 96%;
  margin: 0;
  translate: -50% -50%;
  will-change: transform;
}
.sysc__frame {
  position: absolute;
  inset: 0;
  will-change: opacity;
}
.sysc__frame img { width: 100%; height: 100%; object-fit: contain; }
/* a wide system (wider than the stage can hold at full height): sized by the
   stage's width instead, so the box is the picture and a fade meets its edges */
.sysc__frames--wide { height: auto; width: 96%; }
.sysc--wide .sysc__stage { aspect-ratio: 6 / 5; }
/* a system shown by one picture of its own (card): the stage takes the
   picture's proportions and the picture fills it, so where it was cut is
   where the card ends; it stays still under the pointer */
.sysc__frames--fill { left: 0; top: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; translate: none; }
.sysc__meta {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.4rem 0.8rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.sysc__n { padding-top: 0.5em; color: var(--fg-mute); }
.sysc__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.8vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.sysc__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
.sysc__facts { grid-column: 2; color: var(--fg-mute); }
@media (max-width: 860px) {
  .systems { grid-template-columns: 1fr; }
  .sysc:nth-child(even) { margin-top: 0; }
}

/* -- the end of a system's page: the next one, and the way back ----------- */
.study__end { padding-bottom: var(--sec); }
.snext { min-height: clamp(16rem, 34vw, 26rem); }
.snext__fig {
  position: absolute;
  top: 8%;
  right: 6%;
  bottom: -30%;
  width: 34%;
  transition: transform 1.4s var(--e-out);
}
/* the cut-out turned over, so its glass and steel read as light on the ink */
.snext__fig img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; filter: invert(1) contrast(1.15); opacity: 0.55; transition: opacity 0.9s var(--e-out); }
.snext:hover .snext__fig { transform: translateY(-4%); }
.snext:hover .snext__fig img { opacity: 0.8; }
.study__back { margin-top: 1.6rem; }

/* 21 — Reduced motion / print -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js [data-reveal] { visibility: visible !important; }
  .cursor { display: none; }
  .wpanel { position: static; height: auto; }
}

html:not(.js) .pre { display: none !important; }

@media print {
  .hdr, .cursor, .pre, .trans, .prog { display: none !important; }
  .wpanel { position: static; height: auto; }
  body { background: #fff; color: #000; }
}

/* -- the writing on a project or a system ---------------------------------
   A lede; the facts as a drawing's title block (ruled cells, a small label
   over each value); then numbered sections, each heading beside its text at
   a reading measure, the heading holding its place as the text passes. */
.pread { padding-bottom: clamp(2rem, 4vw, 4rem); }
.pread__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.4rem, 3vw, 3rem) var(--gut);
  align-items: end;
}
.pread__lede {
  max-width: 38ch;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.3vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
}
/* the facts: a schedule, not a grid of boxes. A label in the heading
   column; the rows in the reading column, in two runs, each the word beside
   its value, a hairline between them, nothing left empty */
.tblock {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.2rem var(--gut);
  margin-top: clamp(2.6rem, 5vw, 4.6rem);
  border-top: 1px solid var(--rule);
}
.tblock__k { padding-top: calc(0.85rem + 0.28em); }
.tblock__l { columns: 2; column-gap: var(--gut); }
.tblock__r {
  display: grid;
  grid-template-columns: minmax(6.6rem, 34%) minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding: 0.85rem 0 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
  break-inside: avoid;
}
.tblock dt {
  padding-top: 0.28em;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.tblock dd { font-size: 0.98rem; line-height: 1.45; }
.psecs { margin-top: clamp(2.6rem, 5vw, 4.6rem); }
.psec {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.2rem var(--gut);
  padding: clamp(1.8rem, 3.4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
.psec__h {
  position: sticky;
  top: calc(var(--header-h) + 1.2rem);
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.psec__n {
  flex: 0 0 auto;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  transform: translateY(-0.25em);
}
.psec__t { max-width: 62ch; }
.psec__t p { font-size: clamp(1.04rem, 1.12vw, 1.16rem); line-height: 1.75; color: var(--fg); opacity: 0.86; }
.psec__t .psec__lead { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.45; opacity: 1; }
.psec__list { display: grid; gap: 0.95rem; margin-top: 1.5rem; list-style: none; }
.psec__list li { position: relative; padding-left: 2rem; font-size: 1rem; line-height: 1.62; color: var(--fg-mute); }
.psec__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.42em;
  width: 0.7rem; height: 0.38rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 1024px) {
  .tblock, .pread__top, .psec { grid-template-columns: minmax(0, 1fr); }
  .psec__h { position: static; }
}

/* -- the index: the approach, and the distance it speaks of ----------------
   The statement large; the paragraph to the right; then the distance drawn
   as an architect dimensions a length (page-home.js adds .is-drawn): the
   extension lines rise, the dimension line runs out from the middle to both,
   the ticks strike, the distance is named. */
.appr__head { display: flex; justify-content: space-between; gap: var(--gut); }
.appr__t {
  margin-top: clamp(1.4rem, 3vw, 2.6rem);
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--fs-xl);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.appr__t em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; }
.appr__p {
  width: min(100%, 44rem);
  max-width: 44ch;
  margin: clamp(2rem, 4vw, 3.4rem) 0 0 auto;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-mute);
}
.dim { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(3.6rem, 8vw, 7rem); }
.dim__end {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.8s var(--e-out) 0.5s, transform 1s var(--e-out) 0.5s;
}
.dim__end--a { grid-column: 1; align-items: flex-start; }
.dim__end--b { grid-column: 2; align-items: flex-end; text-align: right; }
.dim__end b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1; }
.dim__line { position: relative; grid-column: 1 / -1; grid-row: 2; height: clamp(80px, 9vw, 120px); margin-top: 0.9rem; }
.dim__ext {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--e-out);
}
.dim__ext--a { left: 0; }
.dim__ext--b { right: 0; }
.dim__rule {
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transition: transform 1.25s var(--e-io) 0.3s;
}
.dim__tick {
  position: absolute;
  top: 62%;
  width: 24px; height: 1.5px;
  margin: -0.75px 0 0 -12px;
  background: var(--accent);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.55s var(--e-out) 1.3s;
}
.dim__tick--a { left: 0; }
.dim__tick--b { left: 100%; }
.dim__lbl {
  position: absolute;
  left: 50%;
  bottom: calc(38% + 0.9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50%, 10px, 0);
  transition: opacity 0.8s var(--e-out) 1.15s, transform 1s var(--e-out) 1.15s;
}
.dim__lbl em { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.6rem); }
.dim.is-drawn .dim__ext { transform: scaleY(1); }
.dim.is-drawn .dim__rule { transform: scaleX(1); }
.dim.is-drawn .dim__tick { transform: rotate(-45deg) scale(1); }
.dim.is-drawn .dim__lbl { opacity: 1; transform: translate3d(-50%, 0, 0); }
.dim.is-drawn .dim__end { opacity: 1; transform: none; }
@media (max-width: 640px) { .dim__lbl { white-space: normal; width: 70%; } }

/* -- the index: how a project runs, on one line drawn as you pass --------- */
.proc__wrap { position: relative; margin-top: clamp(2.4rem, 5vw, 4rem); }
.proc__line {
  position: absolute;
  top: 7px;
  left: 7px;
  right: calc((100% - 5 * var(--gut)) / 6 - 7px);
  height: 1px;
  background: var(--rule);
}
.proc__line b { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; }
.proc__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem var(--gut); list-style: none; }
.proc__dot {
  display: block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--fg-mute);
  transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s var(--e-out);
}
.proc__i.is-on .proc__dot { background: var(--accent); box-shadow: 0 0 0 5px var(--veil); transform: scale(1.1); }
.proc__n { display: block; margin-top: 1.6rem; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--fg-mute); }
.proc__t { margin-top: 0.7rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.8rem); line-height: 1.1; color: var(--fg-mute); transition: color 0.5s ease; }
.proc__i.is-on .proc__t { color: var(--fg); }
.proc__d { max-width: 26ch; margin-top: 0.7rem; font-size: 0.94rem; line-height: 1.55; color: var(--fg-mute); }
@media (max-width: 1024px) {
  .proc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proc__line { display: none; }
}

/* -- the footer: the end of every page (site.js, STY.footer) ---------------
   The logo heads the left column and answers the pointer; under it the
   studio and the time in Duhok, each digit turning over as it changes. On
   the right the rooms as a large index: under the pointer a word turns
   copper and steps along, its number steps in, a copper rule draws under it. */
.ftx {
  position: relative;
  overflow: hidden;
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  background: var(--ink);
  color: var(--bone);
}
.ftx .label { color: rgba(243, 243, 240, 0.5); }
.ftx__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid rgba(243, 243, 240, 0.14);
}
.ftx .ftx__top { display: inline-flex; align-items: center; gap: 0.7em; color: rgba(243, 243, 240, 0.78); }
.ftx__top svg { width: 0.7em; height: auto; transition: transform 0.6s var(--e-out); }
.ftx__top:hover svg { transform: translateY(-4px); }
.ftx__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4rem) var(--gut);
  padding: clamp(2.4rem, 5vw, 4.4rem) 0;
}
.ftx__side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2.4rem, 5vw, 4rem); }
.ftx__mark { display: block; width: 100%; max-width: clamp(210px, 25vw, 400px); color: var(--bone); cursor: pointer; }
.ftx__mark .mark__svg { overflow: visible; }
.ftx__mark .mark__svg rect { fill: var(--bone); }
.ftx__mark .mark__s { fill: #c58a6e; }
.ftx__info { display: grid; gap: 2rem; }
.ftx__row { display: flex; flex-direction: column; gap: 0.55rem; }
.ftx__v { font-size: 1.05rem; }
.ftx__s { font-size: 0.82rem; color: rgba(243, 243, 240, 0.5); }
.ftx__clock {
  display: flex;
  align-items: baseline;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ftx__colon { margin: 0 0.04em; opacity: 0.45; }
.dg { display: inline-grid; overflow: hidden; height: 1.02em; }
.dg i { grid-area: 1 / 1; display: block; font-style: normal; }
.dg--s { font-size: 0.46em; color: #c58a6e; }
@keyframes dgIn { from { transform: translateY(105%); } to { transform: none; } }
@keyframes dgOut { from { transform: none; opacity: 1; } to { transform: translateY(-105%); opacity: 0; } }
.dg i.is-in { animation: dgIn 0.55s var(--e-out) both; }
.dg i.is-out { animation: dgOut 0.55s var(--e-out) both; }
.ftx__nav { display: flex; flex-direction: column; }
.ftx__a {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: clamp(0.55rem, 1vw, 0.95rem) 0;
  border-bottom: 1px solid rgba(243, 243, 240, 0.12);
  color: var(--bone);
  text-align: left;
}
.ftx__a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: #c58a6e;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--e-out);
}
.ftx__a:hover::after,
.ftx__a:focus-visible::after { transform: scaleX(1); }
.ftx__n {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(243, 243, 240, 0.4);
  transition: color 0.4s ease, transform 0.6s var(--e-out);
}
.ftx__a:hover .ftx__n,
.ftx__a:focus-visible .ftx__n { color: #c58a6e; transform: translateX(0.5rem); }
.ftx__w {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.2rem, 4.8vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ftx__x {
  font-size: 0.86rem;
  color: rgba(243, 243, 240, 0.42);
  transition: color 0.4s ease, transform 0.6s var(--e-out);
}
.ftx__a:hover .ftx__x,
.ftx__a:focus-visible .ftx__x { color: var(--bone); transform: translateX(-0.4rem); }
.ftx__a.is-current .ftx__w { color: rgba(243, 243, 240, 0.4); }
.ftx__a.is-current .ftx__n::after { content: "  ·  here"; color: #c58a6e; }
/* the word: under the pointer it turns copper and steps along, all of it at
   once, so it reads in the moment it is passed over */
.ftx__w { transition: color 0.22s ease, transform 0.45s var(--e-out); }
.ftx__a:hover .ftx__w,
.ftx__a:focus-visible .ftx__w { color: #c58a6e; transform: translate3d(0.18em, 0, 0); }
.ftx__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(243, 243, 240, 0.14);
}
.ftx__base .sig { width: clamp(90px, 9vw, 130px); height: auto; filter: invert(1) brightness(1.7); }
@media (max-width: 1024px) {
  .ftx__grid { grid-template-columns: minmax(0, 1fr); }
  .ftx__side { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ftx__w, .ftx__a::after { transition: none; }
}

/* -- How can I help: a dropdown out of its own field (contact.js, SVC) ----
   It drops over the rows under it, never over the whole screen; a soft band
   slides from row to row under the pointer; the chosen one is ticked. */
.cf__f--svc { z-index: 2; }
.cf__f--svc.is-dropped { z-index: 40; }
.cf__f--svc.is-dropped .cf__picki { transform: rotate(45deg); background: var(--bone); color: var(--ink); border-color: var(--bone); }
.svc.svc--drop {
  position: absolute;
  left: 0; right: 0; bottom: auto;
  top: calc(100% - 0.35rem);
  inset: calc(100% - 0.35rem) 0 auto 0;
  z-index: 40;
  display: block;
  max-height: min(440px, 58vh);
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 22px;
  background: #231e19;
  color: var(--bone);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(243, 243, 240, 0.1);
  clip-path: none;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(0.985);
  transform-origin: 50% 0;
  transition: opacity 0.28s ease, transform 0.45s var(--e-out), visibility 0s linear 0.45s;
}
.svc.svc--drop.is-open {
  visibility: visible;
  opacity: 1;
  clip-path: none;
  transform: none;
  transition: opacity 0.28s ease, transform 0.5s var(--e-out), visibility 0s;
}
.svc--drop .svc__bar { display: none; }
.svc--drop .svc__list { position: relative; max-width: none; margin: 0; padding: 0; list-style: none; }
.svc--drop .svc__hl {
  position: absolute;
  z-index: 0;
  left: 0; right: 0; top: 0;
  height: 0;
  border-radius: 14px;
  background: rgba(243, 243, 240, 0.075);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s var(--e-out), height 0.38s var(--e-out), opacity 0.25s ease;
}
.svc--drop.is-lit .svc__hl { opacity: 1; }
.svc--drop .svc__i {
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.8rem;
  gap: 0.2rem 0.8rem;
  padding: 0.8rem 0.9rem 0.85rem;
  border: 0;
  border-radius: 14px;
  z-index: 1;
}
.svc--drop .svc__i:first-child { border-top: 0; }
.svc--drop .svc__i::before { display: none; }
.svc--drop .svc__n { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 0.55em; }
.svc--drop .svc__t { grid-column: 2; grid-row: 1; font-size: clamp(1.12rem, 1.4vw, 1.38rem); font-weight: 300; letter-spacing: -0.015em; }
.svc--drop .svc__d { grid-column: 2; grid-row: 2; font-size: 0.84rem; line-height: 1.42; }
.svc--drop .svc__go { grid-column: 3; grid-row: 1 / span 2; width: 1.8rem; height: 1.8rem; border: 0; }
.svc--drop .svc__go svg { width: 0.75rem; }
.svc--drop .svc__i.is-hot .svc__t > span { transform: translateX(0.35rem); }
.svc--drop .svc__i[aria-selected="true"] .svc__go { opacity: 1; transform: none; background: transparent; border: 1px solid #c58a6e; color: #c58a6e; }
@media (max-width: 640px) {
  .svc.svc--drop { max-height: min(400px, 56vh); padding: 0.4rem; border-radius: 20px; }
  .svc--drop .svc__i { grid-template-columns: 1.7rem minmax(0, 1fr) 1.6rem; padding: 0.7rem 0.7rem 0.75rem; }
}


/* the chapter index keeps clear of the section headings in the left column */
.chapters { left: auto; right: var(--gut); align-items: flex-end; }
.chap { flex-direction: row-reverse; text-align: right; }

/* -- back and forward: the quick return (site.js, STY.ret) ----------------
   Six bands, one for each of the mark's bars, in the page's opposite colour;
   the name of the page you arrive at on them. They run off the way you went,
   each thinning to a line as it goes. */
.rtrans { position: fixed; inset: 0; z-index: 7560; overflow: hidden; visibility: hidden; pointer-events: none; }
.rtrans.is-on { visibility: visible; pointer-events: auto; }
.rtrans__b {
  position: absolute;
  left: -1px; right: -1px;
  height: calc(100% / 6 + 1px);
  background: var(--ink);
  will-change: transform;
}
.rtrans.is-dark .rtrans__b { background: var(--bone); }
.rtrans__in {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 var(--gut);
  text-align: center;
  color: var(--bone);
}
.rtrans.is-dark .rtrans__in { color: var(--ink); }
.rtrans__arrow svg { display: block; width: 48px; height: auto; }
.rtrans.is-fwd .rtrans__arrow { transform: scaleX(-1); }
.rtrans__label { font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; }
.rtrans .rtrans__sub { color: currentColor; opacity: 0.55; }
html.is-entering--ret { background: #15120f; }
html[data-mode="dark"].is-entering--ret { background: #f3f3f0; }

/* -- the orb, leaving from somewhere dark: a paper sheet, so it shows ----- */
.otrans.is-light .otrans__panel,
.otrans.is-light .otrans__cap { background: var(--bone); color: var(--ink); }
.otrans.is-light .otrans__orb { color: var(--ink); }
.otrans.is-light .otrans__sub { color: rgba(21, 18, 15, 0.5); }
html.is-entering--orb.is-entering--light { background: #f3f3f0; }
/* the contact circle carries a copper rim, so it shows over a dark page */
.ctrans__disc { box-shadow: 0 0 0 1.5px rgba(197, 138, 110, 0.7), 0 0 80px rgba(197, 138, 110, 0.16); }

/* -- the approach: the paragraph is the dimension's caption -------------- */
.appr__p { width: auto; max-width: 46ch; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; text-align: center; }

/* -- the index: further than the drawing ---------------------------------
   Everything a project has asked of me, lit one after another as you pass
   (page-home.js): a rule draws over each as it lights. */
.proc__intro { max-width: 54ch; margin-top: clamp(1.6rem, 3vw, 2.6rem); font-size: var(--fs-sm); line-height: 1.55; }
.proc--range .proc__list { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: clamp(2.6rem, 4vw, 3.6rem); }
.proc--range .proc__i { position: relative; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.proc--range .proc__i::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--e-out);
}
.proc--range .proc__i.is-on::before { transform: scaleX(1); }
.proc--range .proc__dot { position: absolute; left: 0; top: -8px; }
.proc--range .proc__n { margin-top: 0.9rem; }
.proc__end { margin-top: clamp(2.6rem, 4vw, 3.6rem); font-family: var(--f-serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.3; }
@media (max-width: 1024px) { .proc--range .proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -- about: out of my comfort zone ---------------------------------------- */
.range__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem) var(--gut); align-items: start; }
.range__lede { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; }
.range__p { max-width: 52ch; margin-top: 1.2rem; font-size: 1.05rem; line-height: 1.7; color: var(--fg-mute); }
.range__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); list-style: none; border-top: 1px solid var(--rule); }
.range__list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.25;
}
.range__n { flex: 0 0 auto; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--accent); }
.range__list li.is-next .range__t { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--accent); }
@media (max-width: 1024px) { .range__grid { grid-template-columns: minmax(0, 1fr); } }

/* -- hover, with a finger (site.js, STY.touchHover) -----------------------
   A held finger stands in for the pointer: the phone's own long-press menu
   stays away, and the footer's words turn over as they do under a mouse. */
html.has-touch-hover [data-hover],
html.has-touch-hover .hero__name,
html.has-touch-hover .ftx__a,
html.has-touch-hover [data-ftx-mark] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ftx__a.is-hover::after { transform: scaleX(1); }
.ftx__a.is-hover .ftx__n { color: #c58a6e; transform: translateX(0.5rem); }
.ftx__a.is-hover .ftx__x { color: var(--bone); transform: translateX(-0.4rem); }
.ftx__a.is-hover .ftx__w { color: #c58a6e; transform: translate3d(0.18em, 0, 0); }

/* -- about: the tools, by what they are for ------------------------------
   Each a monogram tile, its name and what I use it for; the tile inks in
   under the pointer. */
.tools { display: grid; gap: 1.6rem; }
.tools__k { margin-bottom: 0.6rem; }
.tools__l { list-style: none; border-top: 1px solid var(--rule); }
.tool {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.tool__m {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.7rem;
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--f-display);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.tool:hover .tool__m { background: var(--fg); color: var(--bg); box-shadow: none; }
.tool__n { font-size: 1.02rem; line-height: 1.2; }
.tool__u { font-size: 0.84rem; line-height: 1.35; color: var(--fg-mute); }

/* ── What I do ───────────────────────────────────────────────────────────────
   One section for everything a project has asked of me. Each discipline has an
   icon of its own: it draws itself as it comes on screen, then plays the one
   small motion that is its own (a fan turns, a drop falls, the bars of a
   programme grow), and plays it again under the pointer. */
.wid__intro { max-width: 60ch; font-size: var(--fs-sm); line-height: 1.6; }
.wid__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut);
  margin-top: clamp(2.6rem, 5vw, 4.4rem); list-style: none;
}
.wid__i {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ic n" "t t" "d d"; align-content: start;
  padding: clamp(1.3rem, 1.8vw, 1.7rem) 0 clamp(2rem, 3vw, 2.8rem); border-top: 1px solid var(--rule);
}
.wid__i::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--e-out);
}
.wid__i:hover::before, .wid__i.is-hover::before { transform: scaleX(1); }
.wid__ic { grid-area: ic; display: block; width: clamp(46px, 3.8vw, 58px); color: var(--fg); }
.wid__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wid__n { grid-area: n; justify-self: end; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.wid__t { grid-area: t; margin-top: clamp(1.1rem, 1.6vw, 1.5rem); font-family: var(--f-display); font-weight: 300; font-size: clamp(1.22rem, 1.55vw, 1.6rem); line-height: 1.12; }
.wid__d { grid-area: d; max-width: 30ch; margin-top: 0.55rem; font-size: 0.93rem; line-height: 1.55; color: var(--fg-mute); }
.wid__i--next .wid__t { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.4rem, 1.8vw, 1.85rem); color: var(--accent); }
@media (max-width: 1100px) { .wid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the drawing: every line runs out, column by column */
.wid__svg :is(path, circle) {
  stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s var(--e-out) var(--d, 0s);
}
.wid__svg .acc { stroke: var(--accent); }
.wid__svg .thin { stroke-width: 1; opacity: 0.45; }
.wid__svg { opacity: 0; transition: opacity 0.25s ease var(--d, 0s); }
.wid__i.is-drawn .wid__svg { opacity: 1; }
.wid__i.is-drawn .wid__svg :is(path, circle) { stroke-dashoffset: 0; }

/* each icon's own motion */
.wid__svg :is(g, .a-bar, .a-c1, .a-c2, .a-c3, .a-dot, .a-node, .a-play) { transform-box: fill-box; transform-origin: center; }
.wid__svg .a-bar { transform-origin: 0 50%; }
.wid__svg :is(.a-spin, .a-plus) { transform-box: view-box; transform-origin: 24px 24px; }
.wid__svg .a-turn { transform-box: view-box; transform-origin: 24px 23px; }
.is-play .a-pen { animation: wi-pen 1.1s var(--e-out) both; }
.is-play .a-bob { animation: wi-bob 1s var(--e-out) both; }
.is-play .a-t1 { animation: wi-draw 0.5s var(--e-out) both; }
.is-play .a-t2 { animation: wi-draw 0.5s var(--e-out) 0.28s both; }
.is-play .a-bar { animation: wi-grow 0.7s var(--e-out) both; }
.is-play .a-b2 { animation-delay: 0.1s; }
.is-play .a-b3 { animation-delay: 0.2s; }
.is-play .a-b4 { animation-delay: 0.3s; }
.is-play .a-c1 { animation: wi-stack 0.55s var(--e-out) both; }
.is-play .a-c2 { animation: wi-stack 0.55s var(--e-out) 0.12s both; }
.is-play .a-c3 { animation: wi-stack 0.55s var(--e-out) 0.24s both; }
.is-play .a-slide { animation: wi-measure 0.8s var(--e-out) both; }
.is-play .a-in { animation: wi-arrive 0.8s var(--e-out) both; }
.is-play .a-line { animation: wi-draw 0.9s var(--e-out) both; }
.is-play .a-dot { animation: wi-pop 0.5s var(--e-out) 0.65s both; }
.is-play .a-n1 { animation: wi-pulse 0.5s var(--e-out) both; }
.is-play .a-n2 { animation: wi-pulse 0.5s var(--e-out) 0.12s both; }
.is-play .a-n3 { animation: wi-pulse 0.5s var(--e-out) 0.24s both; }
.is-play .a-n4 { animation: wi-pulse 0.5s var(--e-out) 0.38s both; }
.is-play .a-drop { animation: wi-fall 1.3s ease-in-out both; }
.is-play .a-flick { animation: wi-flick 0.9s linear both; }
.is-play .a-spin { animation: wi-spin 1.4s cubic-bezier(0.45, 0, 0.2, 1) both; }
.is-play .a-turn { animation: wi-turn 1.2s var(--e-io) both; }
.is-play .a-play { animation: wi-pulse 0.5s var(--e-out) both; }
.is-play .a-prog { animation: wi-draw 1.2s linear 0.1s both; }
.is-play .a-key { animation: wi-arrive 0.7s var(--e-out) both; }
.is-play .a-plus { animation: wi-plus 0.9s var(--e-out) both; }
@keyframes wi-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wi-pen { 0% { transform: none; } 35% { transform: translate(-6px, 6px) rotate(-4deg); } 70% { transform: translate(2px, -2px); } 100% { transform: none; } }
@keyframes wi-bob { 0% { transform: none; } 25% { transform: translateY(-6px); } 55% { transform: translateY(1.5px); } 75% { transform: translateY(-0.8px); } 100% { transform: none; } }
@keyframes wi-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wi-stack { 0% { transform: translateY(-10px); opacity: 0; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes wi-measure { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wi-arrive { 0% { transform: translateY(-8px); opacity: 0; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes wi-pop { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes wi-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
@keyframes wi-fall { 0% { transform: none; opacity: 1; } 45% { transform: translateY(6px); opacity: 0; } 46% { transform: translateY(-5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes wi-flick { 0% { opacity: 1; } 10% { opacity: 0.2; } 20% { opacity: 1; } 32% { opacity: 0.35; } 46% { opacity: 1; } 100% { opacity: 1; } }
@keyframes wi-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wi-turn { from { transform: rotate(0deg); } to { transform: rotate(120deg); } }
@keyframes wi-plus { 0% { transform: none; } 60% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .wid__svg, .wid__svg :is(path, circle) { transition: none; }
  .wid__i [class*="a-"] { animation: none !important; }
}

/* the numbers sit in the middle of their columns; the plus hangs off the
   number, out of the flow, so the figure itself is what is centred */
.stat { text-align: center; }
.stat__n { display: block; position: relative; }
.stat__n sup { position: absolute; translate: 0 0.08em; }
.stat__l { margin-inline: auto; }
@media (max-width: 700px) { .tblock__l { columns: 1; } }

/* -- the site, set out plainly (story.js, R.site) --------------------------
   The lede on its own line, at full measure; then why here and why it is
   hard as two short numbered lists beside the map. */
.ssite__lede { max-width: 36ch; margin-top: clamp(1.6rem, 3vw, 2.6rem); font-family: var(--f-display); font-weight: 300; font-size: clamp(1.45rem, 2.3vw, 2.25rem); line-height: 1.28; letter-spacing: -0.015em; }
.ssite__why { display: grid; gap: clamp(2rem, 3.4vw, 2.8rem); }
.swhy__k { display: flex; align-items: center; gap: 0.7rem; }
.swhy__m { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--water-line); }
.swhy--hard .swhy__m { background: var(--accent); }
.swhy ol { margin-top: 0.9rem; list-style: none; border-top: 1px solid var(--rule); }
.swhy li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.8rem; padding: 0.95rem 0 1rem; border-bottom: 1px solid var(--rule-soft); }
.swhy__n { padding-top: 0.32em; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.swhy li b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.25; }
.swhy li p span { display: block; margin-top: 0.3rem; color: var(--fg-mute); font-size: 0.94rem; line-height: 1.5; }

/* -- the result, on the map (story.js, D.reloc) ---------------------------- */
.shist__sticky { position: sticky; }
.shist__sticky > svg { transition: opacity 0.7s var(--e-out); }
.shist__sticky.is-map > svg { opacity: 0; }
.shist__map { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.7s var(--e-out); }
.shist__map svg { width: 100%; height: 100%; }
.shist__sticky.is-map .shist__map { opacity: 1; }
.shist__map .lake { fill: var(--water); stroke: var(--water-line); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.shist__map .route { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s var(--e-out) 0.35s; }
.shist__map .km, .shist__map .pin { opacity: 0; transition: opacity 0.7s var(--e-out); }
.is-map .shist__map .route { stroke-dashoffset: 0; }
.is-map .shist__map .pin { opacity: 1; transition-delay: 0.2s; }
.is-map .shist__map .pin--k { transition-delay: 0.45s; }
.is-map .shist__map .pin--n { transition-delay: 1.5s; }
.is-map .shist__map .km { opacity: 1; transition-delay: 1.6s; }

/* -- Phase 2: the Semel Water Project (story.js) ---------------------------- */
/* two phases, joined by the main that runs from one to the other */
.sph { display: grid; grid-template-columns: minmax(0, 1fr) clamp(3rem, 7vw, 7rem) minmax(0, 1fr); align-items: stretch; margin-top: clamp(2rem, 4vw, 3.4rem); }
.sph__i { padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--rule); border-radius: clamp(16px, 1.6vw, 24px); }
.sph__i--acc { border-color: var(--accent); }
.sph__t { margin-top: 0.7rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em; }
.sph__v { margin-top: clamp(1.2rem, 2vw, 1.8rem); }
.sph__i--acc .sph__v { color: var(--accent); }
.sph__note { margin-top: 0.3rem; color: var(--fg-mute); font-size: 0.92rem; }
.sph__rows { margin-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--rule); }
.sph__rows div { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); }
.sph__rows dt { padding-top: 0.25em; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.sph__rows dd { font-size: 0.95rem; line-height: 1.45; }
.sph__pipe { position: relative; align-self: center; height: 10px; margin: 0 -1px; border-block: 1px solid var(--water-line); background: var(--water); overflow: hidden; }
.sph__pipe i { position: absolute; inset: 3px -40px; background: repeating-linear-gradient(90deg, var(--water-line) 0 10px, transparent 10px 24px); opacity: 0; }
.sph.is-in .sph__pipe i { opacity: 0.9; animation: sph-flow 1.2s linear infinite; transition: opacity 0.6s ease 0.4s; }
@keyframes sph-flow { from { transform: translateX(-24px); } to { transform: translateX(0); } }
.sph__mine { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem var(--gut); margin-top: clamp(1.8rem, 3vw, 2.6rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.6; }
.sph__mine .label { padding-top: 0.35em; color: var(--accent); }

/* designing for 2040: the people as dots */
.sdem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem) var(--gut); margin-top: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.sdem__fig { margin: 0; }
.sdem__fig .dt { fill: var(--fg); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: opacity 0.4s ease, transform 0.5s var(--e-out); transition-delay: calc(var(--i) * 2.4ms); }
.sdem__fig .dt--new { fill: var(--accent); transition-delay: calc(0.9s + var(--i) * 7ms); }
.sdem__fig.is-in .dt { opacity: 0.26; transform: none; }
.sdem__fig.is-in .dt--new { opacity: 1; }
.sdem__key { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.2rem; font-size: 0.88rem; color: var(--fg-mute); }
.sdem__key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.sdem__d { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--fg); opacity: 0.3; }
.sdem__d--new { background: var(--accent); opacity: 1; }
.sdem__one { margin-left: auto; }
.sdem__big .snum__n { margin-top: 0.5rem; color: var(--accent); }
.sdem__notes { margin-top: clamp(1.6rem, 3vw, 2.4rem); list-style: none; border-top: 1px solid var(--rule); }
.sdem__notes li { display: grid; grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.sdem__notes b { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.7rem); letter-spacing: -0.02em; }
.sdem__notes span { color: var(--fg-mute); font-size: 0.94rem; line-height: 1.5; }
.sdem__towns { margin-top: clamp(2rem, 4vw, 3.2rem); }
.sdem__towns ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; list-style: none; }
.sdem__towns li { padding: 0.5em 1em; border: 1px solid var(--rule); border-radius: 100px; font-size: 0.9rem; }
.sdem__towns li:last-child { border-style: dashed; color: var(--fg-mute); }

/* the plant, step by step: six stations on one line, water running through */
.strain { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(2.2rem, 4vw, 3.6rem); list-style: none; }
.strain::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(23px, 2vw, 29px); height: 1px; background: var(--water-line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2s var(--e-io); }
.strain.is-in::before { transform: none; }
.strain__i { position: relative; display: flex; flex-direction: column; }
.strain__ic { position: relative; display: block; width: clamp(46px, 4vw, 58px); padding: 4px; background: var(--bg); border: 1px solid var(--rule); border-radius: 50%; color: var(--fg); }
.strain__ic svg { display: block; width: 100%; height: auto; overflow: visible; }
.strain__ic path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s var(--e-out) calc(0.25s + var(--i) * 0.28s); }
.strain__ic .acc { stroke: var(--accent); }
.strain__ic circle { fill: var(--accent); stroke: none; opacity: 0; transition: opacity 0.5s ease calc(0.7s + var(--i) * 0.28s); }
.strain.is-in .strain__ic path { stroke-dashoffset: 0; }
.strain.is-in .strain__ic circle { opacity: 1; }
.strain__i { opacity: 0.25; transition: opacity 0.6s ease calc(0.25s + var(--i) * 0.28s); }
.strain.is-in .strain__i { opacity: 1; }
.strain__n { margin-top: 1.2rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--accent); }
.strain__t { margin-top: 0.5rem; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.22; }
.strain__d { margin-top: 0.45rem; color: var(--fg-mute); font-size: 0.9rem; line-height: 1.48; }
.strain__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(2.2rem, 4vw, 3.4rem); padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--rule); }
.strain__notes p { display: grid; gap: 0.35rem; color: var(--fg-mute); font-size: 0.94rem; line-height: 1.55; }
.strain__notes b { color: var(--fg); font-weight: 500; font-size: 1rem; }

/* one plant, nine towns: the climb, and the fall by gravity */
.slift { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.6rem var(--gut); margin-top: clamp(2.6rem, 5vw, 4.4rem); align-items: center; }
.slift__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; }
.slift__t { margin-top: 0.9rem; max-width: 40ch; color: var(--fg-mute); line-height: 1.6; }
.slift__fig { margin: 0; }
.slift__fig .lift__p { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--e-out) 0.2s; }
.slift__fig.is-in .lift__p { stroke-dashoffset: 0; }
.slift__fig .ln.flow { opacity: 0; transition: opacity 0.6s ease 1.8s; }
.slift__fig.is-in .ln.flow { opacity: 0.85; }
.slift__fig .lift__pin { opacity: 0; transition: opacity 0.6s ease 0.6s; }
.slift__fig.is-in .lift__pin { opacity: 1; }

@media (max-width: 1024px) {
  .strain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strain::before { display: none; }
  .sdem, .slift, .sph__mine { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .shist__sticky { position: relative; top: auto; }
  .sph { grid-template-columns: minmax(0, 1fr); }
  .sph__pipe { justify-self: center; width: 10px; height: 46px; margin: -1px 0; border-block: 0; border-inline: 1px solid var(--water-line); }
  .sph__pipe i { inset: -40px 3px; background: repeating-linear-gradient(180deg, var(--water-line) 0 10px, transparent 10px 24px); }
  .sph.is-in .sph__pipe i { animation-name: sph-flow-y; }
  @keyframes sph-flow-y { from { transform: translateY(-24px); } to { transform: translateY(0); } }
  .strain__notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .strain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdem__one { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sph.is-in .sph__pipe i { animation: none; }
  .sdem__fig .dt, .strain__i, .strain__ic path, .strain__ic circle, .strain::before, .slift__fig .lift__p { transition: none; }
}

/* -- the Art Center: the idea, drawn (story.js, D.tear) --------------------
   The red of the concept sheet's own diagrams while the bar is torn and
   moved; the four volumes take the massing's colours once the roof is on. */
.stear { --red: #c8402f; }
html[data-mode="dark"] .stear { --red: #e0705f; }
.stear .bx path { fill: var(--bg); stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 0.8s var(--e-out), stroke 0.8s var(--e-out); }
.stear .bx--l { opacity: 0; transition: opacity 0.6s var(--e-out); }
.stear.is-linked .bx--l { opacity: 1; transition-delay: 0.5s; }
.stear.is-color .bx path { stroke: var(--fg); stroke-width: 1.1; }
.stear.is-color .bx--p .ft { fill: var(--c); }
.stear.is-color .bx--p .fx { fill: color-mix(in srgb, var(--c) 82%, #15120f); }
.stear.is-color .bx--p .fy { fill: color-mix(in srgb, var(--c) 66%, #15120f); }
.stear .roof { fill: url(#tear-dots); stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.8s var(--e-out); }
.stear .dot { fill: var(--fg); opacity: 0.5; }
.stear.is-color .roof { opacity: 1; transition-delay: 0.7s; }
.stear .arr path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stear .arr { opacity: 0; transition: opacity 0.5s var(--e-out); }
.stear.s1 .arr--1, .stear.s2 .arr--2 { opacity: 1; transition-delay: 0.9s; }
.stear .lbl { opacity: 0; transition: opacity 0.7s var(--e-out); }
.stear.is-color .lbl { opacity: 1; transition-delay: 1.1s; }
.stear .lbl .lead { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stear .lbl .pt { fill: var(--fg); }
.stear .t-cap { font-size: 22px; font-weight: 400; }

/* the four elements: a small sign for each, always moving a little */
.selm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); margin-top: clamp(2rem, 4vw, 3.4rem); list-style: none; }
.selm__i { padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--rule); }
.selm__ic { display: block; width: clamp(64px, 6vw, 88px); height: auto; overflow: hidden; }
.selm__ic path, .selm__ic circle { stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.selm__ic .acc { stroke: var(--accent); }
.selm__ic circle.acc { fill: var(--accent); }
.selm__k { margin-top: 1.4rem; color: var(--accent); }
.selm__t { margin-top: 0.5rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.e-air { stroke-dasharray: 34 10; animation: e-air 2.6s linear infinite; }
.e-air--2 { animation-duration: 3.2s; }
.e-air--3 { animation-duration: 2.1s; }
@keyframes e-air { to { stroke-dashoffset: -44; } }
.e-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: e-fire 1.6s ease-in-out infinite; }
@keyframes e-fire { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.97, 1.05); } 55% { transform: scale(1.02, 0.97); } 80% { transform: scale(0.99, 1.03); } }
.e-water { animation: e-water 3s linear infinite; }
@keyframes e-water { to { transform: translateX(32px); } }
.e-rock { transform-box: fill-box; transform-origin: center; animation: e-rock 3.4s var(--e-out) infinite; }
@keyframes e-rock { 0% { transform: translate(0, -10px); opacity: 0; } 20% { opacity: 1; } 45% { transform: translate(-6px, 0); } 100% { transform: translate(-6px, 0); opacity: 1; } }
.e-st { animation: e-st 3.4s ease-in-out infinite; }
.e-st--2 { animation-delay: 0.4s; }
@keyframes e-st { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (max-width: 1024px) { .selm { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  .e-air, .e-fire, .e-water, .e-rock, .e-st { animation: none; }
  .stear .bx path, .stear .bx--l, .stear .roof, .stear .arr, .stear .lbl { transition: none; }
}

/* What I do, by category: each a band under a drawn ink line, its number,
   name and one line, then its disciplines in a row */
.wid__cats { margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.wid__cat { position: relative; padding-top: clamp(1.2rem, 2vw, 1.6rem); }
.wid__cat + .wid__cat { margin-top: clamp(2.6rem, 4.4vw, 4rem); }
.wid__cat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--e-out);
}
.wid__cat.is-drawn::before { transform: none; }
.wid__ch { display: grid; grid-template-columns: 3.4rem auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.4rem clamp(1rem, 2vw, 2rem); }
.wid__cn { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--accent); font-variant-numeric: tabular-nums; }
.wid__ct { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em; }
.wid__cd { color: var(--fg-mute); font-size: 0.95rem; line-height: 1.5; }
.wid__cc { color: var(--fg-mute); }
.wid__cat .wid__grid { margin-top: clamp(1.3rem, 2.2vw, 1.9rem); }
.wid__i--next {
  grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "ic t d"; align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2.6rem, 4.4vw, 4rem); padding: clamp(1.2rem, 2vw, 1.6rem) 0;
  border-top: 1px solid var(--fg);
}
.wid__i--next .wid__t { margin-top: 0; }
.wid__i--next .wid__d { max-width: 46ch; margin-top: 0; }
@media (max-width: 1100px) { .wid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wid__ch { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .wid__cd { grid-column: 2; }
  .wid__cc { display: none; }
  .wid__i--next { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic t" "ic d"; row-gap: 0.4rem; }
}

/* ── the story, a chapter at a time (story.js) ──────────────────────────────
   An index of the chapters (grouped) beside the one that is open; steps that
   are clicked or slid through; the Art Center model; the Batufa sheet. */
.pstory { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gut); align-items: start; }
.pstory--one { display: block; }
.pstory__nav { position: sticky; top: calc(var(--header-h) + 4.6rem); }
.pstory__l { position: relative; margin-top: 1rem; list-style: none; border-top: 1px solid var(--rule); }
.pstory__g { padding: 1.1rem 0 0.35rem; color: var(--accent); }
.pstory__a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; width: 100%; padding: 0.42rem 0; text-align: left; color: var(--fg-mute); font-family: var(--f-display); font-weight: 300; font-size: clamp(1.05rem, 1.3vw, 1.3rem); transition: color 0.3s ease, transform 0.5s var(--e-out); }
.pstory__a:hover, .pstory__a.is-on { color: var(--fg); }
.pstory__a.is-on { transform: translateX(0.4rem); }
.pstory__n { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; }
.pstory__a.is-on .pstory__n { color: var(--accent); }
.pchap > .story { max-width: none; margin: 0; padding: 0; }
.pchap > .story > .shell { max-width: none; padding-inline: 0; }
.pchap > .story .sec-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem); }
.pchap.is-on { animation: pchap-in 0.7s var(--e-out) both; }
@keyframes pchap-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pchap__foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(2.4rem, 4vw, 3.6rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.pchap__go { display: grid; gap: 0.3rem; text-align: left; color: var(--fg); }
.pchap__go--next { margin-left: auto; text-align: right; }
.pchap__gt { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.2rem, 1.6vw, 1.6rem); transition: color 0.3s ease; }
.pchap__go:hover .pchap__gt { color: var(--accent); }
/* the records: a dark sheet of their own, the page stays as it is */
.story.srec { margin-top: 0; padding: clamp(1.6rem, 3vw, 3rem); border-radius: clamp(16px, 1.6vw, 24px); background: var(--bg); color: var(--fg); }
.story.srec .mark-rule { display: none; }
.story[data-theme="dark"] { --water: #1c252b; --water-line: #86a6bb; --earth: #24201b; }

/* steps: a list beside the drawing; the open one in full, the rest by name */
.shist { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.6rem var(--gut); align-items: center; }
.shist__fig { order: 2; position: relative; }
.shist__ctl { order: 1; min-width: 0; }
.shist__sticky { position: relative; top: auto; }
.shist__steps { position: relative; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.shist__step { position: relative; min-height: 0; padding: 1rem 0 1.1rem; cursor: pointer; opacity: 0.42; outline: none; }
.shist__step:hover, .shist__step:focus-visible { opacity: 0.8; }
.shist__step.is-on, .shist__step.is-past.is-on { opacity: 1; }
.shist__y { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.shist__t { margin-top: 0.5rem; }
.shist__step:not(.is-on) .shist__t { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.shist__bar { position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.shist__step.is-on .shist__bar { transform: scaleX(1); transition: transform 0.6s var(--e-out); }
.shist__step.is-auto .shist__bar { animation: shist-bar 5.6s linear both; transition: none; }
@keyframes shist-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.shist__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.shist__btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--rule); border-radius: 50%; color: var(--fg); transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; }
.shist__btn svg { width: 1rem; height: auto; }
.shist__btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.shist__btn:disabled { opacity: 0.3; }
.shist--wide { grid-template-columns: minmax(0, 1fr); }
.shist--wide .shist__fig { order: 1; }
.shist--wide .shist__ctl { order: 2; }
.shist--wide .shist__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gut); border-bottom: 0; }
.shist--wide .shist__step:not(.is-on) .shist__t { -webkit-line-clamp: 4; }
@media (max-width: 860px) {
  .pstory { display: block; }
  .shist, .shist--wide { grid-template-columns: minmax(0, 1fr); }
  .shist__fig { order: 1; position: static; top: auto; padding: 0; background: none; }
  .shist__ctl { order: 2; }
  .shist__steps, .shist--wide .shist__steps { display: flex; gap: 10px; padding: 4px 9%; margin-inline: calc(-1 * var(--gut)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 0; -webkit-overflow-scrolling: touch; }
  .shist__steps::-webkit-scrollbar { display: none; }
  .shist__step { flex: 0 0 82%; scroll-snap-align: center; min-height: 0; padding: 16px 16px 18px; border: 1px solid var(--rule); border-radius: 18px; }
  .shist__step:not(.is-on) .shist__t, .shist--wide .shist__step:not(.is-on) .shist__t { display: block; }
  .shist__nav { justify-content: center; }
  .sscheme { overflow-x: auto; scrollbar-width: none; }
  .sscheme::-webkit-scrollbar { display: none; }
  .sscheme svg { width: 860px; max-width: none; }
}

/* the Art Center model */
.stear { --red: #c8402f; }
html[data-mode="dark"] .stear { --red: #e0705f; }
.stear .ground { fill: var(--bg-2); opacity: 0.55; }
.stear .sh { fill: var(--fg); opacity: 0.06; }
.stear .bx .ft, .stear .bx .fs { fill: var(--bg); stroke: var(--red); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 0.8s var(--e-out), stroke 0.8s var(--e-out); }
.stear .bx .ft { stroke: none; }
.stear .bx .ln-o, .stear .bx .ln-i { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke 0.8s var(--e-out); }
.stear.is-color .bx .fs, .stear.is-color .bx .ln-o, .stear.is-color .bx .ln-i { stroke: var(--fg); stroke-width: 1.1; }
.stear.is-color .bx--p .ft { fill: var(--c); }
.stear.is-color .bx--p .fs { fill: color-mix(in srgb, var(--c) calc(var(--k, 74) * 1%), #15120f); }
.stear .bx--roof .ft { fill: url(#tear-dots); }
.stear .dot { fill: var(--fg); opacity: 0.5; }
.stear .col { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stear .arr path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stear .arr, .stear .nm { opacity: 0; transition: opacity 0.5s var(--e-out); }
.stear.s1 .arr, .stear.s1 .nm { opacity: 1; transition-delay: 0.8s; }
.stear .t-nm { font-family: var(--f-serif); font-style: italic; font-size: 38px; fill: var(--fg); }
.stear .nm .t-lbl { font-size: 17px; }
.stear__key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1rem; font-size: 0.86rem; color: var(--fg-mute); opacity: 0; transition: opacity 0.7s var(--e-out); }
.stear.is-color .stear__key { opacity: 1; transition-delay: 0.9s; }
.stear__key span { display: inline-flex; align-items: center; }
.stear__key i { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; border-radius: 50%; }

/* the Batufa sheet: plan above, profile below */
.sscheme .sheet { fill: var(--bg-2); opacity: 0.6; }
.sscheme .grid { fill: none; stroke: var(--fg); stroke-width: 1; opacity: 0.07; vector-effect: non-scaling-stroke; }
.sscheme .riv { fill: none; stroke: var(--water); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.sscheme .riv__l { fill: none; stroke: var(--water-line); stroke-width: 1.2; opacity: 0.7; }
.sscheme .t-riv { font-family: var(--f-serif); font-style: italic; font-size: 20px; fill: var(--water-line); }
.sscheme .pipe { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 5 6; opacity: 0.45; }
.sscheme .pipe__w, .sscheme .prof__w { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-io); }
.sscheme .prof__w { stroke-width: 3; }
.sscheme .pipe__m { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-io); }
.sscheme .pipe__f { stroke: var(--bg); stroke-width: 1.6; }
.sscheme .town .t-lbl { fill: var(--fg); }
.sscheme .stn { opacity: 0.35; transition: opacity 0.6s var(--e-out); }
.sscheme .stn.on { opacity: 1; }
.sscheme .stn__o { fill: var(--bg); stroke: var(--fg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sscheme .stn__i { fill: var(--fg); transition: fill 0.5s ease; }
.sscheme .stn.on .stn__i { fill: var(--accent); }
.sscheme .stn__drop { opacity: 0.5; }
.sscheme .ping { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sscheme .stn.now .ping { animation: sd-ping 2.2s var(--e-out) infinite; }
.sscheme .t-stn { font-family: var(--f-display); font-size: 22px; fill: var(--fg); }
.sscheme .t-rise { fill: var(--accent); }
.sscheme .tot { opacity: 0; transition: opacity 0.7s var(--e-out); }
.sscheme.is-all .tot { opacity: 1; }
.strain--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strain__ic .dots { stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 1024px) { .strain--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .strain--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── a project, in rooms (page-project.js) ──────────────────────────────────
   A pill of tabs that stays with you (under the header, or at the top of the
   screen when the header has stepped away); one room open at a time. */
.pbody { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.ptabs {
  position: sticky; top: calc(var(--header-h) - 0.9rem); z-index: 40;
  display: flex; justify-content: center; margin-bottom: clamp(2.2rem, 4.4vw, 4rem);
  pointer-events: none; transition: transform 0.65s var(--e-out);
}
html.hdr-off .ptabs.is-stuck { transform: translate3d(0, calc(1.9rem - var(--header-h)), 0); }
.ptabs__pill {
  position: relative; display: flex; max-width: calc(100vw - 2 * var(--gut)); padding: 5px; border-radius: 100px;
  background: var(--bg-2); box-shadow: 0 0 0 1px var(--rule-soft), 0 10px 30px rgba(21, 18, 15, 0.08);
  pointer-events: auto; overflow-x: auto; scrollbar-width: none;
}
.ptabs__pill::-webkit-scrollbar { display: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptabs__pill { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
}
.ptabs__ink { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 100px; background: var(--fg); transition: transform 0.6s var(--e-out), width 0.6s var(--e-out); }
.ptabs__a {
  position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 0.45em; padding: 0.82em 1.35em; border-radius: 100px;
  font-family: var(--f-body); font-size: var(--ctl-fs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg-mute); transition: color 0.35s ease;
}
.ptabs__a:hover { color: var(--fg); }
.ptabs__a.is-on { color: var(--bg); }
.ptabs__a sup { font-size: 0.72em; letter-spacing: 0.04em; opacity: 0.7; transform: translateY(-0.35em); }
.ppanel.is-on { animation: pchap-in 0.7s var(--e-out) both; }
.ppanels { min-height: 46vh; }
.pbody__end { padding-bottom: var(--sec); }
.pbody__end .mark-rule { margin-top: clamp(3rem, 6vw, 6rem); }
.pbody__end .pnext { margin-top: clamp(3rem, 6vw, 6rem); }
.phead { margin-bottom: clamp(1.2rem, 2.2vw, 2rem); }
.tblock__sep { color: var(--fg-mute); }

/* what a room is filtered by: chips with their count */
.pfilter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem); }
.pfilter button {
  display: inline-flex; align-items: baseline; gap: 0.5em; padding: 0.62em 1.1em; border: 1px solid var(--rule); border-radius: 100px;
  font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute); transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.pfilter button sup { font-size: 0.82em; opacity: 0.65; }
.pfilter button:hover { color: var(--fg); border-color: var(--fg); }
.pfilter button.is-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* photographs: rows of thumbnails, every one at its own proportions */
.pgrid { --rowh: clamp(150px, 13.5vw, 228px); display: flex; flex-wrap: wrap; gap: 10px; transition: opacity 0.24s ease; }
.pgrid::after { content: ""; flex: 100000 1 0; }
.pgrid.is-swapping, .psheets.is-swapping { opacity: 0; }
.pgrid__i { position: relative; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rowh)); min-width: 0; margin: 0; }
.pgrid__i.is-out, .psheet.is-out { display: none; }
.pgrid__f { position: relative; display: block; width: 100%; aspect-ratio: var(--r); overflow: hidden; border-radius: 10px; background: var(--bg-2); }
.pgrid__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out), filter 0.6s ease; }
.pgrid__f:hover img, .pgrid__f:focus-visible img { transform: scale(1.045); filter: brightness(0.82); }
.pgrid__cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 0.7rem; align-items: baseline; padding: 2.2rem 0.9rem 0.75rem;
  background: linear-gradient(to top, rgba(21, 18, 15, 0.82), rgba(21, 18, 15, 0)); color: #f3f3f0; text-align: left; font-size: 0.82rem; line-height: 1.35;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.6s var(--e-out);
}
.pgrid__cap .idx { color: rgba(243, 243, 240, 0.7); }
.pgrid__f:hover .pgrid__cap, .pgrid__f:focus-visible .pgrid__cap { opacity: 1; transform: none; }

/* drawings: sheets on white, as cards */
.psheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.4rem) var(--gut); transition: opacity 0.24s ease; }
.psheet { margin: 0; }
.psheet__f { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rule-soft); transition: box-shadow 0.5s ease, transform 0.7s var(--e-out); }
.psheet__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.psheet__f:hover, .psheet__f:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(21, 18, 15, 0.12); }
.psheet__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: baseline; margin-top: 0.8rem; }
.psheet__t { font-size: 0.95rem; line-height: 1.4; }
.psheet__k { color: var(--fg-mute); }
@media (max-width: 1100px) { .psheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* films: three across when there are many */
.films--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.ptalks__head { margin-top: clamp(3rem, 6vw, 5rem); }
.ppanel .talks { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); max-width: 980px; }

/* the idea, as a dark sheet in its room */
.pconcept { padding: clamp(1.8rem, 4vw, 4rem); border-radius: clamp(16px, 1.8vw, 26px); background: var(--bg); color: var(--fg); }

/* a system's facts say where it is used; so does its card */
.sysc__used { grid-column: 2; color: var(--accent); }

/* the work page's filters carry their count */
.filters button sup { margin-left: 0.5em; font-size: 0.82em; opacity: 0.65; }

/* ── the parts of a project, as cards (page-project.js) ─────────────────────
   What there is to read is the first thing on the sheet: a card for every
   part, saying what it holds. Once they have gone up the page the same parts
   follow as a pill; the foot of a part leads on to the next. */
.pnav { margin-bottom: clamp(2.4rem, 4.6vw, 4.2rem); }
.pnav__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; }
.pnav__k { color: var(--fg); }
.pnav__hint { color: var(--fg-mute); }
.pnav__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(0.6rem, 1vw, 1rem); }
.pnav__a {
  position: relative; display: grid; grid-template-rows: auto 1fr auto auto; align-content: start; gap: 0.5rem;
  min-height: clamp(11rem, 15vw, 14.5rem); padding: clamp(1rem, 1.4vw, 1.4rem); border-radius: clamp(14px, 1.3vw, 20px);
  text-align: left; color: var(--fg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule);
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), box-shadow 0.45s var(--e-out), transform 0.6s var(--e-out);
}
.pnav__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.pnav__n { color: var(--accent); transition: color 0.45s var(--e-out); }
.pnav__c { color: var(--fg-mute); text-align: right; transition: color 0.45s var(--e-out); }
.pnav__t { align-self: end; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 2.5vw, 2.7rem); line-height: 1; letter-spacing: -0.025em; }
.pnav__d { max-width: 30ch; font-size: 0.9rem; line-height: 1.4; color: var(--fg-mute); transition: color 0.45s var(--e-out); }
.pnav__go { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); transition: border-color 0.45s var(--e-out); }
.pnav__go svg { flex: none; width: 1.35rem; height: auto; margin-left: auto; transition: transform 0.6s var(--e-out); }
.pnav__now { font-style: normal; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transition: opacity 0.4s ease; }
.pnav__a:hover, .pnav__a:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--fg), 0 16px 34px rgba(21, 18, 15, 0.1); }
.pnav__a:hover .pnav__go svg, .pnav__a:focus-visible .pnav__go svg { transform: translateX(5px); }
.pnav__a.is-on { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); transform: none; }
.pnav__a.is-on .pnav__n, .pnav__a.is-on .pnav__c, .pnav__a.is-on .pnav__d { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.pnav__a.is-on .pnav__go { border-color: color-mix(in srgb, var(--bg) 26%, transparent); }
.pnav__a.is-on .pnav__now { opacity: 1; }
.pnav__a.is-on .pnav__go svg { transform: rotate(90deg); }
@media (max-width: 1100px) { .pnav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pnav__a { min-height: 9.5rem; } }

/* the pill takes no room in the page: it comes in over it once the cards have gone */
.ptabs { height: 0; margin-bottom: 0; overflow: visible; align-items: flex-start; }
.ptabs__pill { opacity: 0; visibility: hidden; transform: translate3d(0, -14px, 0); transition: opacity 0.4s ease, transform 0.6s var(--e-out), visibility 0s linear 0.4s; }
.ptabs.is-stuck .ptabs__pill { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s ease, transform 0.6s var(--e-out), visibility 0s; }
.ptabs__a { padding: 0.95em 1.5em; color: var(--fg); }
.ptabs__a sup { opacity: 0.6; }

/* the foot of a part leads on to the next */
.pcont { margin-top: clamp(2.6rem, 5vw, 4.6rem); }
.pcont[hidden] { display: none; }
.pcont__a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k k go" "t d go"; align-items: baseline; gap: 0.5rem clamp(1rem, 2.4vw, 2.4rem);
  width: 100%; padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2.2vw, 2rem); border-radius: clamp(14px, 1.3vw, 20px);
  text-align: left; color: var(--fg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule);
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out), box-shadow 0.45s var(--e-out);
}
.pcont__k { grid-area: k; color: var(--accent); transition: color 0.45s var(--e-out); }
.pcont__t { grid-area: t; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -0.025em; }
.pcont__d { grid-area: d; color: var(--fg-mute); font-size: 0.95rem; line-height: 1.4; transition: color 0.45s var(--e-out); }
.pcont__go { grid-area: go; align-self: center; display: grid; place-items: center; width: clamp(2.8rem, 3.6vw, 3.6rem); height: clamp(2.8rem, 3.6vw, 3.6rem); border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.pcont__go svg { width: 42%; height: auto; transition: transform 0.6s var(--e-out); }
.pcont__a:hover, .pcont__a:focus-visible { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.pcont__a:hover .pcont__k, .pcont__a:hover .pcont__d, .pcont__a:focus-visible .pcont__k, .pcont__a:focus-visible .pcont__d { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.pcont__a:hover .pcont__go svg, .pcont__a:focus-visible .pcont__go svg { transform: translateX(4px); }
.pbody__end .mark-rule { margin-top: clamp(2.4rem, 5vw, 4.6rem); }

/* ── the chapters of a story, as a menu ─────────────────────────────────────
   A panel of rows, each with its arrow; the open one filled; a pager to step
   through them. Nothing in it reads as plain text. */
.pstory__nav { padding: 0.9rem; border-radius: clamp(14px, 1.3vw, 20px); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); max-height: calc(100vh - var(--header-h) - 5.6rem); overflow-y: auto; scrollbar-width: thin; }
.pstory__head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.1rem 0.2rem 0 0.6rem; }
.pstory__k { color: var(--fg); }
.pstory__pager { display: flex; align-items: center; gap: 0.55rem; }
.pstory__at { color: var(--fg-mute); white-space: nowrap; }
.pstory__at b { color: var(--fg); font-weight: 500; }
.pstory__pg { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; }
.pstory__pg svg { width: 0.9rem; height: auto; }
.pstory__pg:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.pstory__pg:disabled { opacity: 0.35; }
.pstory__hint { padding: 0.5rem 0.6rem 0.2rem; font-size: 0.82rem; color: var(--fg-mute); }
.pstory__l { display: grid; gap: 2px; margin-top: 0.4rem; border-top: 0; }
.pstory__g { padding: 0.7rem 0.6rem 0.25rem; }
.pstory__a {
  grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; padding: 0.42rem 0.6rem; border-radius: 10px;
  color: var(--fg); font-size: clamp(1.02rem, 1.2vw, 1.22rem);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pstory__a:hover, .pstory__a:focus-visible { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.pstory__a.is-on { background: var(--fg); color: var(--bg); transform: none; }
.pstory__n { color: var(--fg-mute); transition: color 0.3s ease; }
.pstory__a.is-on .pstory__n { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.pstory__go { display: grid; place-items: center; opacity: 0.4; transition: opacity 0.3s ease, transform 0.5s var(--e-out); }
.pstory__go svg { width: 1rem; height: auto; }
.pstory__a:hover .pstory__go, .pstory__a:focus-visible .pstory__go { opacity: 1; transform: translateX(3px); }
.pstory__a.is-on .pstory__go { opacity: 1; }

/* the foot of a chapter: two real buttons */
.pchap__foot { align-items: stretch; }
.pchap__go {
  position: relative; grid-template-columns: minmax(0, 1fr); align-content: center; min-width: min(46%, 18rem); padding: 0.95rem 1.3rem; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--rule); transition: background-color 0.4s var(--e-out), color 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.pchap__go .label { color: var(--fg-mute); transition: color 0.4s var(--e-out); }
.pchap__go--prev { padding-left: 3rem; }
.pchap__go--next { padding-right: 3rem; background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.pchap__go--next .label { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.pchap__go::after { content: ""; position: absolute; top: 50%; width: 0.55rem; height: 0.55rem; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transition: transform 0.5s var(--e-out); }
.pchap__go--next::after { right: 1.35rem; transform: translateY(-50%) rotate(45deg); }
.pchap__go--prev::after { left: 1.35rem; transform: translateY(-50%) rotate(-135deg); }
.pchap__go:hover .pchap__gt { color: inherit; }
.pchap__go--prev:hover { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.pchap__go--prev:hover .label { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.pchap__go--next:hover::after { transform: translate(4px, -50%) rotate(45deg); }
.pchap__go--prev:hover::after { transform: translate(-4px, -50%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .pnav__a, .ptabs__pill, .pcont__a, .pstory__a, .pchap__go { transition: none; }
}

/* ── the Art Center model, on the massing of the design (story.js, D.tear) ── */
.stear .ground { transition: opacity 0.9s var(--e-out); }
.stear.is-own .ground { opacity: 0; }
.stear .site { fill: var(--bg-2); stroke: var(--fg); stroke-width: 1; stroke-opacity: 0.22; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.9s var(--e-out); }
.stear.is-own .site { opacity: 0.75; transition-delay: 0.3s; }
.stear .bx .fs { stroke: none; }
.stear .bx .ft { stroke: none; }
.stear.is-color .bx .fs { stroke: none; }
.stear .bx .ln-o, .stear .bx .ln-i { stroke-linejoin: round; }
.stear .bx .fg { fill: url(#tear-glass); opacity: 0; transition: opacity 0.8s var(--e-out); pointer-events: none; }
.stear.is-color .bx .fg { opacity: 1; transition-delay: 0.4s; }
.stear .gl { fill: none; stroke: #15120f; stroke-width: 1; opacity: 0.34; }
.stear .mesh .mf { fill: var(--bg); fill-opacity: 0.82; stroke: none; }
.stear .mesh .ml { fill: none; stroke: var(--fg); stroke-width: 0.8; stroke-opacity: 0.55; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stear .mesh .me { fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stear .mesh--in .mf { fill-opacity: 0.6; }
.stear .mesh--in .ml { stroke-opacity: 0.4; }
.stear .post { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stear .t-nm { font-size: 34px; }
.stear__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.6rem; }
.stear__key span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 0.55rem; line-height: 1.35; }
.stear__key i { grid-row: 1 / span 2; align-self: start; margin: 0.28rem 0 0; }
.stear__key b { display: block; grid-column: 2; font-weight: 500; color: var(--fg); }
@media (max-width: 860px) { .stear__key { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .stear .site, .stear .ground, .stear .bx .fg { transition: none; } }

/* the Batufa sheet on a narrow screen: for the whole line it draws back until
   all of it is on the screen, and says only what can still be read */
@media (max-width: 860px) {
  .sscheme { display: flex; align-items: center; }
  .sscheme svg { flex: none; transition: width 0.85s var(--e-io); }
  .sscheme.is-fit svg { width: 100%; }
  .sscheme text { transition: font-size 0.6s var(--e-out), opacity 0.4s ease; }
  .sscheme.is-fit .t-stn { font-size: 46px; }
  .sscheme.is-fit .t-num { font-size: 34px; }
  .sscheme.is-fit .t-big { font-size: 44px; }
  .sscheme.is-fit .t-riv { font-size: 38px; }
  .sscheme.is-fit .town .t-lbl { font-size: 32px; }
  .sscheme.is-fit .t-cap, .sscheme.is-fit .t-note, .sscheme.is-fit .t-rise, .sscheme.is-fit .scale, .sscheme.is-fit > svg > .t-lbl { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sscheme svg, .sscheme text { transition: none; } }
.sscheme__sum { display: none; }
@media (max-width: 860px) {
  .sscheme svg { transition: width 0.85s var(--e-io), margin-top 0.85s var(--e-io); }
  .sscheme.is-fit { align-items: flex-start; }
  .sscheme.is-fit svg { margin-top: 26px; }
  .sscheme__sum {
    position: absolute; left: 0; right: 0; top: calc(var(--fit-h, 180px) + 58px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--rule); opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.4s ease, transform 0.7s var(--e-out);
  }
  .sscheme.is-fit .sscheme__sum { opacity: 1; transform: none; transition-delay: 0.55s; }
  .sscheme__sum span { display: grid; gap: 4px; }
  .sscheme__sum b { font-family: var(--f-display); font-weight: 300; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
  .sscheme__sum i { font-style: normal; font-size: 0.76rem; line-height: 1.3; color: var(--fg-mute); }
}

.stear__key.is-on { opacity: 1; transition-delay: 0.9s; }