/* The personal page, day look "Glass and motion": warm paper ground, frosted glass panels, one clay accent.
   Library patterns, by catalog number: #132 pills, #133 the top bar over a paper fade, #87 squircle corners,
   #42 corner unfold, #79 soft blobs behind panels, #40 the blurred band, #111 the ticking jobs, #124 the quote block,
   #159 the hover rows, #150 the self drawing branch. Media is never blurred or scaled at rest: no filter or backdrop-filter on anything that holds a picture or video.
   Round 3 (2026-10-21): every distance comes from the 8 pt scale below (4 pt half steps), every text size has a line height on the 4 pt grid,
   and the blur behind glass stays only on the small floating things (the bar, the buttons, the pills); the big panels are glass without it,
   which is what made opening a case study slow. */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #171512; --ink-soft: rgba(23,21,18,.76); --ink-muted: rgba(23,21,18,.62); --ink-faint: rgba(23,21,18,.46);
  --ink-second: #6E3720;            /* the second line of a heading: ink warmed with clay, clearly second, never lost (Gio, 2026-10-21) */
  --paper: #f4f1ea;
  --ground-top: #e5e0d8; --ground-bot: #d5cfc6;
  --panel: rgba(255,255,255,.54); --panel-soft: rgba(255,255,255,.42); --card: #fff; --tray: #f3f0ea;
  --line: rgba(23,21,18,.10); --line-strong: rgba(23,21,18,.18);
  --shadow-soft: 0 1px 4px rgba(44,39,32,.04), 0 10px 26px rgba(44,39,32,.06), 0 24px 60px rgba(44,39,32,.08);
  --shadow-mini: 0 0 0 1px rgba(0,0,0,.06), 0 2px 16px rgba(0,0,0,.015), 0 2px 9px rgba(0,0,0,.01), 0 2px 3px rgba(0,0,0,.01);
  --glass: inset 0 1px 1.5px #ffffffb3, inset 0 -1px 1.5px #00000008, 0 1px 8px #0000000d;
  --bead: radial-gradient(circle at 35% 30%, #fff 0%, #fbf8f3 55%, #e9e1d6 100%);      /* a glass bead: the nodes and dots */
  --r-xl: clamp(26px, 2.8vw, 38px); --r-lg: clamp(20px, 2vw, 28px); --r-md: clamp(16px, 1.6vw, 22px); --r-sm: 14px;
  --accent: #B5532C; --on-accent: #fff; --accent-deep: #8F3E1F;
  --display: "Inter Tight", "Inter", system-ui, sans-serif; --h-weight: 700; --h-track: -.025em;
  --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.16,1,.3,1);

  /* the spacing scale: 8 pt steps with 4 pt half steps, the way Apple spaces */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-128: 128px;
  /* the roles the scale plays; the phone and tablet steps are below */
  --gutter: var(--sp-32);         /* the page's side margin */
  --sec-pad: var(--sp-128);       /* between sections */
  --head-gap: var(--sp-48);       /* a section's head to its panels */
  --card-pad: var(--sp-40);       /* inside a panel */
  --card-gap: var(--sp-32);       /* between panels, and between the two hero cards */
  --grid-gap: var(--sp-32);       /* between columns inside a panel */
  --inset: var(--sp-16);          /* a picture's inset in its card */
  --stack: var(--sp-16);          /* between like blocks */
  --text-gap: var(--sp-12);       /* between paragraphs, a kicker and its heading */
  --tile-pad: var(--sp-24);       /* inside a small tile */
  --shell: min(1160px, calc(100vw - 2 * var(--gutter)));
  --bar-h: 80px;

  /* type: size and line height, every line height on the 4 pt grid */
  --t-body: 16px; --l-body: 24px;
  --t-lede: 17px; --l-lede: 28px;
  --t-intro: 20px; --l-intro: 32px;
  --t-small: 13px; --l-small: 20px;
  --t-kicker: 12px; --l-kicker: 16px;
  --t-h1: 60px; --l-h1: 64px;
  --t-h2: 44px; --l-h2: 48px;
  --t-h3: 24px; --l-h3: 28px;
  --t-name: 40px; --l-name: 44px;     /* a panel's name */
  --t-part: 32px; --l-part: 36px;     /* "My part" */
  --t-fig: 40px; --l-fig: 40px;       /* a number tile's figure */
  --t-pull: 32px; --l-pull: 36px;     /* Jen's pull line */
}
@media (max-width: 1099px) {
  :root { --sec-pad: var(--sp-96); --card-pad: var(--sp-32); --t-h1: 48px; --l-h1: 52px; --t-h2: 36px; --l-h2: 40px; --t-name: 32px; --l-name: 36px; }
}
@media (max-width: 759px) {
  :root { --gutter: var(--sp-16); --sec-pad: var(--sp-64); --head-gap: var(--sp-32); --card-pad: var(--sp-24); --card-gap: var(--sp-16); --grid-gap: var(--sp-16);
    --inset: var(--sp-12); --tile-pad: var(--sp-20); --bar-h: 64px;
    --t-lede: 16px; --l-lede: 24px; --t-intro: 18px; --l-intro: 28px;
    --t-h1: 36px; --l-h1: 40px; --t-h2: 30px; --l-h2: 32px; --t-h3: 22px; --l-h3: 28px; --t-name: 28px; --l-name: 32px; --t-part: 28px; --l-part: 32px;
    --t-fig: 28px; --l-fig: 28px; --t-pull: 26px; --l-pull: 28px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: var(--ground-bot); }
body { font: 400 var(--t-body)/var(--l-body) "Inter", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: clip; padding-bottom: var(--sp-64);
  background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.7), transparent 24%), radial-gradient(circle at 85% 8%, rgba(255,255,255,.42), transparent 26%), linear-gradient(180deg, var(--ground-top), var(--ground-bot)); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }
.shell { width: var(--shell); margin: 0 auto; }
.skip { position: absolute; left: var(--sp-16); top: -80px; z-index: 200; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transition: top .2s var(--ease); }
.skip:focus { top: var(--sp-12); }
.kicker { font-size: var(--t-kicker); line-height: var(--l-kicker); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); }
.kicker--quiet { letter-spacing: .1em; font-weight: 600; }
.kicker--dot { display: inline-flex; align-items: center; gap: var(--sp-8); }
.kicker--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.h1, .h2, .h3, .name, .stat__fig, .part__h, .quote__pull, .section__sub, .brand { font-family: var(--display); font-weight: var(--h-weight); letter-spacing: var(--h-track); text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: var(--l-h1); }
.h2 { font-size: var(--t-h2); line-height: var(--l-h2); }
.h3 { font-size: var(--t-h3); line-height: var(--l-h3); }
.soft { color: var(--ink-second); }
.lede { font-size: var(--t-lede); line-height: var(--l-lede); color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; }

/* ---------------------------------------------------------------- pills (#132): ink, clay, outline, glass, light; one radius; 44 px tall */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 var(--pill-t, 15px)/18px "Inter", system-ui, sans-serif; padding: var(--pill-y, 12px) var(--pill-x, 24px); text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill--small { font-size: 13px; line-height: 16px; padding: 7px 16px; gap: 7px; }
.pill--ink { background: var(--ink); color: var(--paper); }
.pill--accent { background: var(--accent); color: var(--on-accent); }
.pill--outline, .pill--glass { background: rgba(255,255,255,.5); border-color: transparent; box-shadow: var(--glass); color: var(--ink); }
.pill--glass { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill--light { background: rgba(255,255,255,.14); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
@media (hover: hover) {
  .pill--ink:hover { background: #2a2622; }
  .pill--accent:hover { background: #a54a25; }
  .pill--outline:hover, .pill--glass:hover { background: rgba(255,255,255,.86); }
  .pill--light:hover { background: rgba(255,255,255,.24); }
}
.pill:active { transform: scale(.97); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chip { display: inline-block; font-size: 12px; font-weight: 500; line-height: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: var(--glass); color: var(--ink-soft); }
.chip--accent { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.chip--tiny { font-size: 10.5px; line-height: 14px; padding: 3px 8px; letter-spacing: .04em; }

/* ---------------------------------------------------------------- surfaces: glass panels, a warm glow in each, frames */
/* glass: a translucent white with a lit top edge and a warm glow inside. No backdrop blur on the big panels: over this ground it is nearly
   invisible and it made every frame of an opening panel expensive (measured 2026-10-21); the bar, the buttons and the pills keep theirs. */
.glass { position: relative; isolation: isolate; background: var(--panel); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl); box-shadow: var(--glass), var(--shadow-soft); }
/* the soft warm glow inside a glass card (#79): a wide gradient from one corner, behind the content */
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; corner-shape: inherit; pointer-events: none;
  background: radial-gradient(62% 80% at var(--gx, 100%) var(--gy, 0%), rgba(244,180,112,.26), color-mix(in srgb, var(--accent) 7%, transparent) 55%, transparent 78%); }
/* the frame's width is a multiple of 8 px so its 16:9 height lands on a half pixel at worst, a whole device pixel at scale 2: crisp edges */
.frame { position: relative; aspect-ratio: 16 / 9; width: round(down, 100%, 8px); margin-inline: auto; overflow: hidden; border-radius: var(--r-md); background: #0c0b0a; box-shadow: 0 0 0 1px rgba(23,21,18,.08), 0 10px 24px rgba(44,39,32,.10), 0 24px 56px rgba(44,39,32,.10); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
/* #87: squircle corners where the browser has them, the round radius elsewhere */
@supports (corner-shape: squircle) {
  .glass, .dark { corner-shape: squircle; border-radius: calc(var(--r-xl) * 1.8); }
  .stat, .case__quote, .facts__row, .ring__say { corner-shape: squircle; border-radius: calc(var(--r-md) * 1.8); }   /* not .frame: media keeps the plain round corner its clip uses (round 7) */
}

/* ---------------------------------------------------------------- the top bar (#133): his name, a centred glass pill of links, the mail button */
.top { position: sticky; top: 0; z-index: 50; }
.top__row { position: relative; z-index: 1; width: var(--shell); margin: 0 auto; min-height: var(--bar-h); padding: var(--sp-16) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
/* round 4: no fade behind the bar (Gio found it annoying); every part of the bar floats on its own glass, so it reads over anything */
.brand { text-decoration: none; font-size: 17px; line-height: 20px; letter-spacing: -.02em; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.5);
  box-shadow: var(--glass), 0 6px 20px rgba(44,39,32,.06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .2s var(--ease); }
.brand:hover { background: rgba(255,255,255,.8); }
.top__links { display: none; position: absolute; left: 50%; transform: translateX(-50%); align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5);
  box-shadow: var(--glass), 0 6px 20px rgba(44,39,32,.06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.top__link { text-decoration: none; font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--ink-soft); padding: 8px 16px; border-radius: 999px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.top__link:hover { color: var(--ink); background: rgba(255,255,255,.75); }
.top__link[aria-current="true"] { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(44,39,32,.08); }
.top__end { display: flex; align-items: center; gap: var(--sp-8); }
.ib { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
  background: rgba(255,255,255,.55); box-shadow: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s var(--ease), transform .25s var(--ease); }
.ib svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ib:hover { background: rgba(255,255,255,.86); }
.ib:active { transform: scale(.94); }
.top__menuwrap { position: relative; z-index: 2; width: var(--shell); margin: 0 auto; }
.menu { position: absolute; right: 0; top: -8px; width: min(300px, 100%); padding: var(--sp-8); border-radius: var(--r-lg); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--glass), var(--shadow-soft); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.menu.is-open { opacity: 1; transform: none; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu__link { text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; padding: 12px 16px; border-radius: 14px; transition: background-color .2s var(--ease); }
.menu__link:hover { background: rgba(255,255,255,.9); }
.menu__link--mail { color: var(--ink-soft); font-weight: 500; font-size: 15px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; margin-top: var(--sp-4); }
@media (min-width: 980px) { .top__links { display: flex; } .ib--menu { display: none; } }
@media (max-width: 759px) { .top__row { padding: var(--sp-12) 0; } .brand { font-size: 17px; } }

/* ---------------------------------------------------------------- the top of the page */
.hero { position: relative; padding-top: var(--sp-8); overflow-x: clip; isolation: isolate; }
/* #79: soft blobs behind the cards, the clay and a warm counterweight; still, on their own layers */
.blob { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(48px); will-change: transform; }
.blob--a { top: 34%; left: -4%; width: clamp(300px, 46vw, 680px); aspect-ratio: 1.2; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 52%, transparent), transparent); }
.blob--b { top: 8%; right: -4%; width: clamp(260px, 38vw, 580px); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(244,180,112,.8), transparent); }
.hero__title { margin: var(--sp-40) 0; }
@media (max-width: 759px) { .hero__title { margin: var(--sp-24) 0; } }
@media (min-width: 760px) { .h1 .soft, .h2 .soft { display: block; } }   /* two-line headings: the second line on its own line from tablet up */
.hero__grid { display: grid; gap: var(--card-gap); }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.hero__id { --gx: 0%; --gy: 100%; padding: var(--card-pad); display: flex; flex-direction: column; align-items: flex-start; }
.hero__who { display: flex; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-24); }
.photo { flex: 0 0 auto; width: 80px; aspect-ratio: 1; overflow: hidden; border-radius: clamp(18px, 1.8vw, 24px); background: #0c0b0a; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .photo { width: 96px; } }
.name { font-size: 22px; line-height: 28px; margin-bottom: var(--sp-4); }
.hero__name .kicker { font-size: 11px; letter-spacing: .13em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.hero__id .actions { margin-top: auto; padding-top: var(--sp-32); }

/* the work card (1B Offset): the two sites' hero pictures, straight, one higher left and one lower right, each a link to its panel.
   Pointing at a picture lifts it; the back picture comes to the front by a cross-fade (page.js), never a cut. */
.work { --gx: 80%; --gy: 70%; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32); overflow: hidden; }
@media (max-width: 759px) { .work { padding: var(--sp-24); } }
.work::before { background: radial-gradient(closest-side at 62% 62%, rgba(244,180,112,.62), color-mix(in srgb, var(--accent) 20%, transparent) 62%, transparent); inset: 12% -14% -26% 16%; border-radius: 50%; }
.work__shots { position: relative; flex: 1; min-height: 300px; }
.shot { position: absolute; display: block; width: 72%; width: round(down, 72%, 22px); aspect-ratio: 2.2; overflow: hidden; border-radius: 16px; background: #0c0b0a; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(23,21,18,.08), 0 10px 24px rgba(44,39,32,.12), 0 24px 56px rgba(44,39,32,.12);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shot--2 img { object-position: left top; }
.shot--1 { left: 0; top: 0; z-index: 1; }
.shot--2 { right: 0; bottom: 0; z-index: 2; }
/* round 4: one calm lift and no layer swap (the cross-fade glitched). Pointing at a picture lifts it 6 px onto a deeper shadow; pointing at the
   back one also eases the front one 16 px aside, so more of the back one shows. Whole pixels only, so the pictures stay crisp. */
.shot { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.shot:is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(23,21,18,.08), 0 16px 34px rgba(44,39,32,.16), 0 34px 70px rgba(44,39,32,.16); }
.work__shots:has(.shot--1:is(:hover, :focus-visible)) .shot--2 { transform: translate(16px, 8px); }
.shot:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.shot__name { position: absolute; left: var(--sp-12); bottom: var(--sp-12); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 600 13px/16px "Inter", system-ui, sans-serif;
  background: rgba(255,255,255,.78); box-shadow: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.shot__name svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.shot:hover .shot__name svg, .shot:focus-visible .shot__name svg { transform: translate(2px, -2px); }
@media (max-width: 979px) { .shot { width: 84%; width: round(down, 84%, 22px); } .work__shots { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------- sections */
.section { position: relative; isolation: isolate; overflow-x: clip; padding-top: var(--sec-pad); scroll-margin-top: calc(var(--bar-h) + var(--sp-8) - var(--sec-pad)); }
.section__head { max-width: 780px; display: grid; gap: var(--text-gap); margin-bottom: var(--head-gap); }
.section__head .h2 { margin-bottom: var(--sp-4); }
.section__sub { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink-soft); }
.panels { position: relative; display: grid; gap: var(--card-gap); }
/* a soft warm glow behind the content of each section (#79): wide gradients that stay still, each on its own layer */
.section::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform; }
/* round 5: each glow is an ellipse that fades out well inside its section, so nothing is cut at the sides of the screen */
.section--sys::before { left: 50%; top: 18%; width: min(140vw, 1500px); height: 70%; transform: translateX(-50%); border-radius: 0;
  background: radial-gradient(50% 50% at 30% 45%, rgba(244,180,112,.30), color-mix(in srgb, var(--accent) 7%, transparent) 45%, transparent 75%); }
.section--vault::before { left: 50%; top: 10%; width: min(140vw, 1500px); height: 85%; transform: translateX(-50%); border-radius: 0;
  background: radial-gradient(40% 50% at 50% 62%, rgba(244,180,112,.30), color-mix(in srgb, var(--accent) 7%, transparent) 45%, transparent 75%); }
.section--about::before { left: 50%; top: 10%; width: min(140vw, 1500px); height: 90%; transform: translateX(-50%); border-radius: 0;
  background: radial-gradient(45% 50% at 35% 55%, rgba(244,180,112,.34), color-mix(in srgb, var(--accent) 8%, transparent) 45%, transparent 75%); }
.section--last::before { left: 50%; bottom: 0; width: min(140vw, 1500px); height: 90%; transform: translateX(-50%); border-radius: 0;
  background: radial-gradient(45% 50% at 62% 60%, rgba(244,180,112,.34), transparent 75%); }
/* #40: a wide blurred band of apricot and clay behind the two website panels, in its own clipped layer */
.band-wrap { position: relative; isolation: isolate; }
/* round 6: the band spans the whole window and is drawn with soft gradients, no blur filter inside a clipped box, so it has no edge anywhere
   (Gio's screenshot showed a hard vertical edge where the old blurred band was cut by its box) */
.band { position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -10%; bottom: -10%; pointer-events: none; }
.band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 42% at 30% 45%, rgba(244,180,112,.34), transparent 100%),
              radial-gradient(34% 40% at 70% 60%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 100%),
              radial-gradient(30% 36% at 52% 30%, rgba(244,180,112,.22), transparent 100%); }

/* ---------------------------------------------------------------- panels: a case study as one glass card that opens in place */
.panel { scroll-margin-top: calc(var(--bar-h) + var(--sp-8)); }
.panel__head { display: grid; gap: var(--grid-gap); padding: var(--inset); align-items: center; }
.panel__media { position: relative; }
.panel__mediabar .pill--glass { background: rgba(255,255,255,.94); }
.panel__mediabar { position: absolute; left: var(--inset); bottom: var(--inset); }
.panel__text { display: grid; gap: var(--text-gap); justify-items: start; padding: var(--sp-8) var(--sp-24) var(--sp-24) var(--sp-8); }
@media (min-width: 900px) { .panel__text { padding: var(--sp-24) var(--sp-24) var(--sp-24) var(--sp-8); } }
.panel__name { font-size: var(--t-name); line-height: var(--l-name); }
.panel__line { color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-8); }
.panel__plus { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -8px; border-radius: 50%; background: rgba(255,255,255,.16); transition: transform .45s var(--ease); }
.panel__plus svg { width: 13px; height: 13px; }
.panel.is-open .panel__plus { transform: rotate(45deg); }
.pill--small .panel__plus { width: 18px; height: 18px; margin-right: -5px; } .pill--small .panel__plus svg { width: 11px; height: 11px; }
@media (min-width: 900px) { .panel__head--web { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
/* Jen's pull line on her card: her words in the display face beside a clay rule */
.panel__quote { display: grid; gap: var(--sp-4); padding: var(--sp-8) 0 var(--sp-4) var(--sp-16); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.panel__pull { font: 600 18px/24px var(--display); letter-spacing: -.015em; text-wrap: balance; }
/* a system's head: the words and the numbers on the left, the branch on the right from 1100 px; one column below that */
.panel__head--sys { gap: var(--sp-24) var(--sp-40); padding: var(--card-pad); align-items: start; }
.sys__text { display: grid; gap: var(--text-gap); justify-items: start; }
.sys__text .panel__line { max-width: 62ch; }
.sys__how, .sys__nums { display: grid; gap: var(--sp-12); min-width: 0; align-content: start; }
.sys__how .branch { margin-top: var(--sp-8); }
/* in one column the divider lies flat between the words and the drawing */
@media (max-width: 1099px) { .sys__how { padding-top: var(--sp-24); border-top: 1px solid var(--line); } }
.panel__head--sys .panel__actions { margin-top: 0; }
@media (min-width: 1100px) {
  .panel__head--sys { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text how" "nums how" "act how"; }
  .sys__text { grid-area: text; } .sys__nums { grid-area: nums; align-self: end; } .sys__how { grid-area: how; } .panel__head--sys .panel__actions { grid-area: act; }
  /* round 4 (Gio): a soft divider between the words and the drawing; "How it works" sits level with the left kicker, the drawing
     centred in the height that is left, so the label no longer floats above it */
  .panel__head--sys { column-gap: 0; }
  .sys__text, .sys__nums, .panel__head--sys .panel__actions { padding-right: var(--sp-40); }
  .sys__how { position: relative; align-self: stretch; display: flex; flex-direction: column; padding-left: var(--sp-40); }
  .sys__how::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }
  .sys__how .branch { margin: auto 0; }
  .sys__text .panel__line { max-width: 44ch; }
}
/* opening in place: the grid row grows from 0fr to 1fr; the closed body leaves the tab order (inert) and, once closed, the screen readers */
.panel__body { display: grid; grid-template-rows: 1fr; }
.panel__inner { overflow: clip; min-height: 0; }
.js .panel:not(.panel--page) .panel__body { grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-io); }
.js .panel:not(.panel--page) .panel__inner { visibility: hidden; transition: visibility 0s .7s; }
.js .panel.is-open:not(.panel--page) .panel__body { grid-template-rows: 1fr; }
.js .panel.is-open:not(.panel--page) .panel__inner { visibility: visible; transition: visibility 0s; }
.js .panel.no-anim, .js .panel.no-anim * { transition: none !important; }
html:not(.js) .panel__toggle, html:not(.js) .panel__close { display: none; }
.panel--page .panel__toggle { display: none; }

/* the body of a case: what it is beside my part (from 900 px), Jen's words under them on her case, then the foot */
.case { display: grid; gap: var(--sp-32) var(--sp-64); margin: 0 var(--inset); padding: var(--sp-40) var(--sp-24) var(--sp-24); border-top: 1px solid var(--line); }
@media (max-width: 759px) { .case { gap: var(--sp-24); padding: var(--sp-24) var(--sp-12) var(--sp-16); } }
.case > *, .case__main > * { min-width: 0; }
/* round 4: what it is and my part share one box; the intro sticks only inside it, so it stops where my part ends */
.case__main { display: grid; gap: var(--sp-32) var(--sp-64); }
@media (max-width: 759px) { .case__main { gap: var(--sp-24); } }
.case__what { display: grid; gap: var(--sp-16); align-content: start; }
.case__intro { display: grid; gap: var(--text-gap); }
.case__intro p { font-size: var(--t-intro); line-height: var(--l-intro); color: var(--ink); max-width: 62ch; text-wrap: pretty; }
.case__part { display: grid; gap: var(--sp-16); align-content: start; }
.case__foot { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: space-between; align-items: center; padding-top: var(--sp-24); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .case__main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .case__what { align-self: start; position: sticky; top: calc(var(--bar-h) + var(--sp-24)); }
}
.part__h { font-size: var(--t-part); line-height: var(--l-part); }
/* #111: each job has a 22 px slot. As its row crosses the reading band the number shrinks away, a clay ring draws itself and fills, the tick
   draws inside it and a soft ring of light spreads once; the row's words warm from soft to ink. Scrolling back brings the number again. */
.rows { width: 100%; }
.rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--sp-16); padding: var(--sp-16) 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows p { font-size: var(--t-body); line-height: var(--l-body); text-wrap: pretty; color: var(--ink-soft); transition: color .5s ease; }
.rows li.is-read p { color: var(--ink); }
.rows__slot { position: relative; width: 22px; height: 22px; margin-top: 1px; }
.rows__slot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; opacity: 0; pointer-events: none; }
.rows__n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; transition: opacity .25s ease-out, transform .25s ease-out; }
.rows__tick { position: absolute; inset: 0; width: 22px; height: 22px; opacity: 0; transform: scale(.6); transition: opacity .2s ease-out, transform .5s cubic-bezier(.34,1.56,.64,1); }
.rows__ring { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .45s var(--ease-io), fill-opacity .3s ease; }
.rows__mark { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease-out; }
.rows li.is-read .rows__n { opacity: 0; transform: scale(.5); }
.rows li.is-read .rows__tick { opacity: 1; transform: none; }
.rows li.is-read .rows__ring { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset .45s var(--ease-io), fill-opacity .3s ease .35s; }
.rows li.is-read .rows__mark { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease-out .45s; }
.rows li.is-read .rows__slot::after { animation: tickglow .9s ease-out .4s; }
@keyframes tickglow { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }

/* Jen's whole testimonial inside her case (#124): a glass block with the pull line large */
.case__quote { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--sp-24) var(--sp-64); padding: var(--sp-40); border-radius: var(--r-lg);
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass), 0 10px 30px rgba(44,39,32,.06); }
@media (max-width: 759px) { .case__quote { padding: var(--sp-24); gap: var(--sp-20); } }
/* round 4: no quotation mark (Gio); the glow is a long soft wash made for this wide, short block: warm along the lower left, fading by the middle */
.case__quote::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 140% at 0% 100%, rgba(244,180,112,.26), transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%); }
@media (min-width: 900px) { .case__quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lead body" "who body"; } .case__quote .quote__lead { grid-area: lead; } .case__quote .quote__body { grid-area: body; align-self: end; } .case__quote .quote__who { grid-area: who; align-self: end; } }
.quote__lead { display: grid; gap: var(--sp-16); align-content: start; }
.quote__pull { font-size: var(--t-pull); line-height: var(--l-pull); }
.quote__body { display: grid; gap: var(--text-gap); color: var(--ink-soft); font-size: var(--t-lede); line-height: var(--l-lede); text-wrap: pretty; }
.quote__who { display: grid; gap: 2px; }
.quote__name { font: 700 18px/24px var(--display); letter-spacing: -.01em; }

/* a system's glass stat tiles, a clay glow in one corner */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.stat { position: relative; overflow: hidden; display: grid; gap: var(--sp-8); padding: var(--tile-pad); border-radius: var(--r-lg); background: rgba(255,255,255,.46); box-shadow: var(--glass), 0 8px 24px rgba(44,39,32,.06); }
/* round 5: the tile's glow is one soft wash from its top right corner, drawn on the tile itself, so it can never show an edge */
.stat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
.stat__fig { font-size: var(--t-fig); line-height: var(--l-fig); letter-spacing: -.03em; }
.stat__label { font-size: var(--t-small); line-height: var(--l-small); color: var(--ink-muted); }
@media (min-width: 1100px) { .sys__nums .stat { padding: var(--sp-16) var(--sp-20); } .sys__nums .stat__fig { font-size: 32px; line-height: 32px; } }
@media (max-width: 519px) { .stats { grid-template-columns: minmax(0, 1fr); } .stat { grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; } }

/* ---------------------------------------------------------------- the branch (#150): the line draws itself inside a glass tube, pills spring in, a node pulses rings when pressed */
.branch { position: relative; height: 320px; }
.branch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.branch__ghost, .branch__line, .branch__tube, .branch__shade { fill: none; stroke-linecap: round; }
.branch__ghost { stroke: rgba(23,21,18,.12); stroke-width: 2; stroke-dasharray: 2 7; }
/* round 5 (Gio: flat, 2D): the line is one flat stroke of the bar's milky white, no edge, no shine, no shadow; the dots are flat white with a
   hairline; the only colour is the moving light, a flat clay dot with a flat pale ring. */
.branch__shade { display: none; }
.branch__tube { stroke: rgba(255,255,255,.82); stroke-width: 6; }
.branch__line { stroke: none; }      /* kept as the path the light travels along */
/* the moving light: a flat clay dot, the one coloured thing on the line */
.branch__light { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); opacity: 0; transition: opacity .6s ease; pointer-events: none; z-index: 3; }
.branch.is-drawn .branch__light { opacity: 1; }
.branch__steps { position: absolute; inset: 0; list-style: none; }
.branch__step { position: absolute; width: 0; height: 0; }
/* a node is a flat white dot with a hairline; pointing at its step rings it in clay */
.branch__node { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; z-index: 2;
  background: #fff; box-shadow: 0 0 0 1px rgba(23,21,18,.10);
  transform: scale(0); transition: transform .6s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }
.branch__step:is(:hover, :focus-within) .branch__node { box-shadow: 0 0 0 1.5px var(--accent); }
.branch__node i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(23,21,18,.16); opacity: 0; pointer-events: none; }
.branch__node.is-ping i { animation: ping 1.1s cubic-bezier(.2,.6,.3,1) both; }
.branch__node.is-ping i:nth-child(2) { animation-delay: .15s; } .branch__node.is-ping i:nth-child(3) { animation-delay: .3s; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.branch__node:active { transform: scale(.75) !important; }
.branch__node:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 5px; }
/* a step's pill is glass like the bar's */
.branch__pill { position: absolute; display: grid; justify-items: start; gap: var(--sp-4); width: max-content; max-width: 22ch; padding: var(--sp-12) var(--sp-16); border-radius: 18px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--glass), 0 10px 26px rgba(44,39,32,.10);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; transform: var(--from); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.branch__pill b { font: 700 17px/20px var(--display); letter-spacing: -.02em; }
.branch__pill span { font-size: var(--t-small); line-height: var(--l-small); color: var(--ink-soft); }
.branch__pill em { font-style: normal; margin-top: 2px; }
.branch__step.is-down .branch__pill { left: 0; top: 30px; --from: translateY(10px) scale(.96); --to: translateY(0) scale(1); }
.branch__step.is-up .branch__pill { left: 0; bottom: 30px; --from: translateY(10px) scale(.96); --to: translateY(0) scale(1); }
.branch__step.is-r .branch__pill { left: 28px; top: 0; max-width: 17ch; --from: translate(-8px, -50%) scale(.96); --to: translate(0, -50%) scale(1); }
.branch__step.is-l .branch__pill { right: 28px; top: 0; max-width: 17ch; --from: translate(8px, -50%) scale(.96); --to: translate(0, -50%) scale(1); }
.branch__step.is-in .branch__node { transform: scale(1); }
.branch__step.is-in .branch__pill { opacity: 1; transform: var(--to); }
.branch__step:is(:hover, :focus-within) .branch__pill { box-shadow: var(--glass), 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 14px 30px rgba(44,39,32,.12); }
/* Job Finder: the light rests on the Now node, whose soft clay halo pulses gently; the Next step a quiet dashed pill on the dotted line */
.branch__step[data-state="now"] .branch__node { background: #fff; box-shadow: 0 0 0 1.5px var(--accent); }
.branch__step[data-state="now"] .branch__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: .35; animation: halo 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes halo { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
.branch__step[data-state="next"] .branch__node { background: rgba(255,255,255,.5); box-shadow: none; outline: 1.5px dashed rgba(23,21,18,.25); outline-offset: 0; }
.branch__step[data-state="next"] .branch__node:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 5px; }
.branch__step[data-state="next"] .branch__pill { background: rgba(255,255,255,.4); box-shadow: none; border-color: transparent; outline: 1.5px dashed rgba(23,21,18,.22); outline-offset: -1.5px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.branch__step[data-state="next"] .branch__pill b { color: var(--ink-soft); }
.branch__step[data-state="done"] .branch__pill em { background: rgba(255,255,255,.8); }
@media (min-width: 1100px) { .branch { height: 300px; } }
@media (max-width: 699px) { .branch__pill { padding: var(--sp-8) var(--sp-12); } }

/* ---------------------------------------------------------------- the vault's rings (3A) */
.panel__head--vault { display: grid; align-items: center; gap: var(--grid-gap); padding: var(--card-pad); }
.panel[data-case="vault"] { --gx: 78%; --gy: 50%; }
.panel[data-case="vault"]::before { background: radial-gradient(closest-side at 72% 50%, rgba(244,180,112,.5), color-mix(in srgb, var(--accent) 14%, transparent) 58%, transparent); }
.vault__side { display: grid; gap: var(--text-gap); align-content: center; justify-items: start; }
.vault__side .panel__line { max-width: 46ch; }
.vault__side .panel__actions { margin-top: var(--sp-4); }
@media (min-width: 980px) { .panel__head--vault { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
/* the part the light is on (or the one pointed at), said in full beside the rings */
.ring__say { display: grid; gap: var(--sp-4); align-content: start; width: 100%; min-height: 84px; margin-top: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-radius: 20px; background: rgba(255,255,255,.55); box-shadow: var(--glass), 0 8px 22px rgba(44,39,32,.06); transition: opacity .35s ease; }
.ring__say b { font: 700 18px/24px var(--display); letter-spacing: -.02em; }
.ring__say span { color: var(--ink-soft); font-size: 15px; line-height: 20px; }
.ring__say.is-fading { opacity: 0; }
.ring { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; justify-self: center; }
.ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the core is a glass dome */
.ring__core { position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.6)); box-shadow: var(--glass), inset 0 -8px 16px rgba(44,39,32,.06), 0 0 0 10px rgba(255,255,255,.22), 0 18px 40px rgba(44,39,32,.12); }
.ring__core b { font: 700 clamp(14px, 1.6vw, 19px)/1.1 var(--display); letter-spacing: -.02em; }
.ring__nodes { position: absolute; inset: 0; list-style: none; }
.ring__node { position: absolute; left: 0; top: 0; width: 0; height: 0; outline: none; z-index: 2; }
.ring__node:is(:hover, :focus-visible) { z-index: 4; }
/* a part's dot is a glass bead; it turns clay when the light rests on it */
.ring__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bead); box-shadow: 0 0 0 2px rgba(23,21,18,.18), inset 0 -1.5px 2px rgba(44,39,32,.1), 0 3px 8px rgba(44,39,32,.14); transition: box-shadow .5s ease, background .5s ease; }
.ring__node:focus-visible .ring__dot { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(255,255,255,.9); }
.ring__node.is-on .ring__dot { background: radial-gradient(circle at 35% 30%, #e9a07c, var(--accent) 65%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px 4px color-mix(in srgb, var(--accent) 36%, transparent); }
.ring__pill { position: absolute; left: 14px; top: -15px; display: grid; width: max-content; max-width: 19ch; padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--glass), 0 6px 18px rgba(44,39,32,.08); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); transition: box-shadow .4s ease, background-color .4s ease; }
.ring__node.is-left .ring__pill { left: auto; right: 14px; text-align: right; }
.ring__pill b { font: 700 14px/16px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.ring__node:is(:hover, :focus-visible, .is-on) .ring__pill { background: #fff; }
@media (max-width: 560px) { .ring { width: 86%; } .ring__pill { padding: 5px 9px; } .ring__pill b { font-size: 12px; } }

/* ---------------------------------------------------------------- about: a glass card, the story in two columns, the facts as glass tiles under a hairline */
.about { --gx: 100%; --gy: 100%; display: grid; gap: var(--sp-40); padding: var(--sp-64); align-items: start; }
@media (max-width: 1099px) { .about { padding: var(--sp-40); } }
@media (max-width: 759px) { .about { padding: var(--sp-24); gap: var(--sp-32); } }
.about__body { display: grid; gap: var(--text-gap); align-content: start; }
.about__p { color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; font-size: var(--t-lede); line-height: var(--l-lede); }
.facts { display: grid; gap: var(--sp-16); padding-top: var(--sp-40); border-top: 1px solid var(--line); }
@media (max-width: 759px) { .facts { padding-top: var(--sp-24); } }
.facts__row { display: grid; gap: var(--sp-8); align-content: start; padding: var(--sp-20) var(--tile-pad); border-radius: var(--r-lg); background: rgba(255,255,255,.5); box-shadow: var(--glass), 0 8px 22px rgba(44,39,32,.05); }
.facts dd { font-size: var(--t-body); line-height: var(--l-body); text-wrap: pretty; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- contact: the inset dark panel, then the base line */
.section--last { padding-bottom: 0; }
.dark { position: relative; display: grid; gap: var(--sp-48); padding: var(--sp-64); color: var(--paper); border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(closest-side at 12% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent), linear-gradient(160deg, #2b2723 0%, #1b1815 55%, #12100e 100%); box-shadow: var(--shadow-soft); }
@media (max-width: 1099px) { .dark { padding: var(--sp-40); gap: var(--sp-32); } }
@media (max-width: 759px) { .dark { padding: var(--sp-24); gap: var(--sp-24); } }
.dark :focus-visible { outline-color: var(--paper); }
.dark .kicker { color: rgba(244,241,234,.62); }
.dark .soft { color: rgba(244,241,234,.5); }
/* the July page's warm halation on the first line */
.dark .halo { text-shadow: 0 0 1px rgba(255,214,170,.4), 0 0 18px rgba(255,178,110,.22), 0 0 56px rgba(222,124,52,.14); }
.dark__say { display: grid; gap: var(--sp-16); align-content: start; justify-items: start; }
.dark__line { color: rgba(244,241,234,.78); max-width: 46ch; font-size: var(--t-lede); line-height: var(--l-lede); text-wrap: pretty; }
.dark__say .actions { margin-top: var(--sp-8); }
.dark__links { align-self: center; border-radius: var(--r-lg); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.dark__links li { display: grid; gap: var(--sp-4); padding: var(--sp-16) var(--sp-24); border-top: 1px solid rgba(255,255,255,.1); }
.dark__links li:first-child { border-top: 0; }
.dark__links a { font: 600 22px/28px var(--display); letter-spacing: -.01em; text-decoration: none; overflow-wrap: anywhere; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
@media (max-width: 759px) { .dark__links a { font-size: 18px; line-height: 24px; } }
.dark__links a:hover, .dark__links a:focus-visible { background-size: 100% 1px; }
@media (min-width: 900px) { .dark { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.base { display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-24); align-items: center; justify-content: space-between; margin-top: var(--sp-24); color: var(--ink-muted); font-size: var(--t-small); line-height: var(--l-small); }
.base p { max-width: 70ch; }

/* ---------------------------------------------------------------- the twin pages */
.pagetop { padding: var(--sp-8) 0 var(--sp-24); scroll-margin-top: 0; }
.twinpanel { scroll-margin-top: 0; }
.section--more .more__h { margin-bottom: var(--sp-24); }
/* #159: rows that brighten, tuck in 4px and show a small preview that fades and rises in (no preview on phones) */
.mrows { display: grid; gap: var(--sp-8); }
.mrow { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) 28px; align-items: center; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass), 0 8px 24px rgba(44,39,32,.05); text-decoration: none;
  transition: background-color .3s var(--ease), margin .3s var(--ease), box-shadow .3s var(--ease); }
.mrow__i { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mrow__name { font: 700 var(--t-h3)/var(--l-h3) var(--display); letter-spacing: -.02em; }
.mrow__kind { color: var(--ink-soft); font-size: 15px; line-height: 20px; }
.mrow__arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.mrow__pv { position: absolute; right: 76px; top: 50%; width: 184px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--tray); box-shadow: var(--shadow-soft); pointer-events: none;
  opacity: 0; transform: translateY(calc(-50% + 10px)); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mrow__pv img { width: 100%; height: 100%; object-fit: cover; }
.pv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: center; height: 100%; padding: 14px 10px; }
.pv i { height: 44px; border-radius: 7px; background: #fff; box-shadow: var(--shadow-mini); }
.pv i:nth-child(1) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.mrow:hover, .mrow:focus-visible { background: #fff; margin-inline: 4px; z-index: 2; }
.mrow:hover .mrow__arrow svg, .mrow:focus-visible .mrow__arrow svg { transform: translate(2px, -2px); }
.mrow:hover .mrow__pv, .mrow:focus-visible .mrow__pv { opacity: 1; transform: translateY(-50%); }
@media (max-width: 759px), (hover: none) { .mrow__pv { display: none; } }
@media (max-width: 759px) { .mrow { grid-template-columns: 32px minmax(0, 1fr) 24px; padding: var(--sp-16); } .mrow__kind { grid-column: 2; grid-row: 2; font-size: 14px; } .mrow__arrow { grid-column: 3; grid-row: 1 / span 2; } .mrow__i { grid-row: 1 / span 2; } }

/* ---------------------------------------------------------------- arrivals (#42): blocks unfold from their top left corner; phones get a soft rise */
.js [data-unfold] { transition-property: opacity, transform, clip-path; transition-duration: 1.15s, 1.5s, 1.5s; transition-timing-function: cubic-bezier(.6,0,.2,1), cubic-bezier(0,0,0,1), cubic-bezier(.2,0,.2,1); transition-delay: var(--d, 0ms); }
.js [data-unfold]:not(.is-in) { opacity: 0; transform: scale(.97); transform-origin: 0 0; clip-path: inset(0 10% 10% 0 round var(--r-xl)); }
.js [data-unfold].is-in { clip-path: inset(-120px -120px -120px -120px round 0px); }
.js [data-unfold].is-in.is-done { clip-path: none; }
/* inside an opening panel the blocks only rise and fade: the panel itself is growing, and a clip would be paint on top of layout */
.js .panel__body [data-unfold] { transition-property: opacity, transform; transition-duration: .7s; transition-timing-function: cubic-bezier(.33,1,.68,1); }
.js .panel__body [data-unfold]:not(.is-in) { transform: translateY(14px); clip-path: none; }
.js .panel__body [data-unfold].is-in { clip-path: none; }
@media (max-width: 699px) {
  .js [data-unfold] { transition-property: opacity, transform; transition-duration: .7s; transition-timing-function: cubic-bezier(.33,1,.68,1); }
  .js [data-unfold]:not(.is-in) { transform: translateY(14px); clip-path: none; }
  .js [data-unfold].is-in { clip-path: none; }
}

/* ---------------------------------------------------------------- reduced motion: no arrivals, panels open at once, nothing travels or pulses */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-unfold] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rows li .rows__n { opacity: 0; transform: scale(.5); } .rows li .rows__tick { opacity: 1; transform: none; }
  .rows li .rows__ring { stroke-dashoffset: 0; fill-opacity: 1; } .rows li .rows__mark { stroke-dashoffset: 0; } .rows p { color: var(--ink); }
  .mrow:hover, .mrow:focus-visible { margin-inline: 0; }
  .mrow:hover .mrow__pv, .mrow:focus-visible .mrow__pv { transform: translateY(-50%); }
  .mrow__pv { transform: translateY(-50%); }
  .branch__node.is-ping i { display: none; }
}

/* ---------------------------------------------------------------- round 5 (Gio, 2026-10-21)
   The system cards reach wider than the page column, out to 1180 px, so their words and numbers have room; the sections around them keep
   980 px, which gives the page a calm asymmetry. A hidden-text helper for the vault card's name. About as a head plus a card. */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1100px) {
  .section--sys .panels { --wide: min(1180px, calc(100vw - 2 * var(--gutter))); margin-inline: calc((var(--shell) - var(--wide)) / 2); }
  .section--sys .panel__head--sys { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: var(--sp-40) var(--sp-48); }
  .section--sys .sys__text, .section--sys .sys__nums, .section--sys .panel__head--sys .panel__actions { padding-right: var(--sp-48); }
  .section--sys .sys__how { padding-left: var(--sp-48); }
  .section--sys .sys__nums .stats { gap: var(--sp-12); } .section--sys .sys__nums .stat { padding: var(--sp-16) var(--sp-20); }
  .section--sys .sys__nums .stat__fig { font-size: var(--t-fig); line-height: var(--l-fig); letter-spacing: -.03em; }
  .section--sys .sys__text .panel__line { max-width: 48ch; }
  .section--sys .branch:not(.is-vertical) { height: 280px; }
}
.section--about .section__head { margin-bottom: var(--head-gap); }
.about { padding: var(--sp-48); gap: var(--sp-40); }
.about__body { display: grid; gap: var(--sp-24) var(--sp-48); }
@media (min-width: 900px) { .about__body { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about__p { max-width: none; } }
@media (max-width: 759px) { .about { padding: var(--sp-24); gap: var(--sp-32); } }
/* the vault card on the home page: the rings, the callout and the button only (the words are in the section head above) */
/* the vault card on the home page: the rings in the middle, then one row under them: what the light is on, and the button */
.section--vault .panel__head--vault { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-24); }
.section--vault .vault__side { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16) var(--sp-24);
  padding-top: var(--sp-24); border-top: 1px solid var(--line); }
.section--vault .vault__side .ring__say { width: auto; flex: 1 1 320px; min-height: 0; margin: 0; }
.section--vault .vault__side .panel__actions { order: 2; margin: 0; }
.section--vault .panel[data-case="vault"] { --gx: 50%; --gy: 38%; }     /* the warm glow sits behind the rings, which are centred now */
@media (max-width: 759px) { .section--vault .ring { width: 100%; } }
@media (min-width: 760px) { .section__sub { font-size: 18px; line-height: 24px; } }   /* round 5: the line under a heading, in step with the smaller headings */

/* ---------------------------------------------------------------- round 5, after the Codex review (2026-10-21) */
/* the branch's height follows its orientation (branch.js sets .is-vertical from the box's own width), never the window's */
.branch.is-vertical, .section--sys .branch.is-vertical { height: 560px; }
/* a lit ring part keeps a clear keyboard ring (under reduced motion every part is lit) */
.ring__node.is-on:focus-visible .ring__dot { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(255,255,255,.9); }
/* without JavaScript the branch reads as a plain list of its steps */
html:not(.js) .branch { height: auto; }
html:not(.js) .branch__svg, html:not(.js) .branch__light, html:not(.js) .branch__node { display: none; }
html:not(.js) .branch__steps { position: static; display: grid; gap: var(--sp-8); }
html:not(.js) .branch__step { position: static; width: auto; height: auto; }
html:not(.js) .branch__pill { position: static; opacity: 1; transform: none; max-width: none; }
/* the opened body's text lines up with the card head's text in the wide system cards (Codex review: an 8 px shift) */
@media (min-width: 1100px) { .section--sys .case { padding-inline: calc(var(--sp-48) - var(--inset)); } }
/* the contact heading keeps its two lines on phones too */
@media (max-width: 759px) { .dark .h2 .soft { display: block; } }

/* ---------------------------------------------------------------- round 6 (2026-10-21): the scale, agreed by Claude and Codex
   Gio: everything a little bigger, and the hero alone on the first screen. Between round 4 (1160 px, h1 60) and round 5 (980 px, h1 46):
   a 1080 px column, 16 px body text, 14 px pills on 44 px controls, a 72 px bar, 128 px between sections on desktop. These rules come last
   and set the tokens for each width. */
:root { --bar-h: 72px; --pill-t: 15px; --pill-y: 12px; --pill-x: 20px; }
@media (max-width: 759px) {
  :root { --t-body: 16px; --l-body: 24px; --t-lede: 16px; --l-lede: 24px; --t-intro: 18px; --l-intro: 28px; --t-small: 13px; --l-small: 20px; --t-kicker: 12px;
    --t-h1: 34px; --l-h1: 40px; --t-h2: 30px; --l-h2: 36px; --t-h3: 22px; --l-h3: 28px; --t-name: 28px; --l-name: 32px; --t-part: 24px; --l-part: 28px;
    --t-fig: 28px; --l-fig: 32px; --t-pull: 26px; --l-pull: 32px;
    --sec-pad: 72px; --head-gap: 32px; --card-pad: 24px; --card-gap: 20px; --grid-gap: 24px; --inset: 12px; --tile-pad: 20px;
    --r-xl: 24px; --r-lg: 20px; --r-md: 16px; }
}
@media (min-width: 760px) {
  :root { --shell: min(960px, calc(100vw - 2 * var(--gutter))); --gutter: 32px; --pill-t: 14px; --pill-y: 12px; --pill-x: 22px;
    --t-body: 16px; --l-body: 24px; --t-lede: 17px; --l-lede: 28px; --t-intro: 18px; --l-intro: 28px; --t-small: 13px; --l-small: 20px; --t-kicker: 12px;
    --t-h1: 44px; --l-h1: 48px; --t-h2: 34px; --l-h2: 40px; --t-h3: 22px; --l-h3: 28px; --t-name: 30px; --l-name: 36px; --t-part: 26px; --l-part: 32px;
    --t-fig: 32px; --l-fig: 36px; --t-pull: 26px; --l-pull: 32px;
    --sec-pad: 104px; --head-gap: 40px; --card-pad: 28px; --card-gap: 24px; --grid-gap: 28px; --inset: 16px; --tile-pad: 20px;
    --r-xl: 28px; --r-lg: 24px; --r-md: 20px; }
}
@media (min-width: 1100px) {
  :root { --shell: min(1080px, calc(100vw - 2 * var(--gutter))); --gutter: 40px; --pill-x: 24px;
    --t-intro: 19px; --l-intro: 28px; --t-h1: 52px; --l-h1: 56px; --t-h2: 38px; --l-h2: 44px; --t-name: 34px; --l-name: 40px; --t-part: 28px; --l-part: 32px;
    --t-pull: 28px; --l-pull: 32px;
    --sec-pad: 128px; --head-gap: 48px; --card-pad: 36px; --card-gap: 28px; --grid-gap: 32px; --tile-pad: 24px;
    --r-xl: 32px; --r-lg: 24px; --r-md: 20px; }
}
/* controls: every pill and round button is 44 px tall (Apple's touch size), text on a 20 px line */
.pill { font-size: var(--pill-t); line-height: 20px; min-height: 44px; padding: calc((44px - 20px) / 2) var(--pill-x); }
.pill--small { font-size: 14px; line-height: 20px; min-height: 44px; padding: 12px 18px; gap: 8px; }
.pill .panel__plus { width: 20px; height: 20px; margin-block: -2px; }
.ib, .ib--menu { width: 44px; height: 44px; }
.top__row { height: var(--bar-h); min-height: 0; padding-block: 0; }
.top__links { padding: 4px; }
.top__link { display: inline-flex; align-items: center; font-size: 14px; line-height: 20px; padding: 10px 16px; }
.brand { font-size: 17px; line-height: 20px; padding: 12px 18px; }
.branch__pill b { font-size: 16px; line-height: 20px; }
.photo { width: 80px; }
@media (min-width: 1100px) { .photo { width: 88px; } }
.name { font-size: 24px; line-height: 28px; }
.hero__name .kicker { font-size: var(--t-kicker); }
.ring { max-width: 520px; }
.branch:not(.is-vertical) { height: 280px; }
.section--sys .branch:not(.is-vertical) { height: 300px; }

/* the hero owns the first screen from 1100 px: the bar (72 px) plus the hero make exactly one window height, and the spare height is shared
   between the space above, the gap under the heading, the cards and the space below, so nothing of the next section shows (Codex's budget:
   700 to 1000 px tall windows) */
@media (min-width: 1100px) {
  :root { --hero-font: clamp(46px, 5.8svh, 56px); --hero-top: clamp(24px, calc(20svh - 116px), 84px); --hero-gap: clamp(24px, calc(12svh - 60px), 60px);
    --hero-bottom: clamp(40px, calc(12svh - 44px), 76px); }
  .hero { padding: 0; }
  .hero > .shell { min-height: calc(100svh - var(--bar-h)); display: grid; grid-template-rows: auto minmax(min-content, 1fr); row-gap: var(--hero-gap);
    padding-block: var(--hero-top) var(--hero-bottom); }
  .hero__title { margin: 0; font-size: var(--hero-font); line-height: calc(var(--hero-font) + 4px); }
  .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero + .section { padding-top: calc(var(--sec-pad) - var(--hero-bottom)); }
}
/* the two pictures sit as one pair, centred in their card, so a taller card does not pull them apart */
.work__shots { display: grid; align-items: center; min-height: 0; }
.work__pair { position: relative; width: 100%; aspect-ratio: 1.91; }
@media (max-width: 979px) { .work__shots { aspect-ratio: auto; } }

/* one inset rule for the website cards' text: the same distance from the card's edge as the opened body below it */
@media (max-width: 899px) { .panel__head--web .panel__text { padding-inline: calc(var(--card-pad) - var(--inset)); } }
/* about and contact use the card padding like every other text card */
.about { padding: var(--card-pad); }
@media (min-width: 1100px) { .about, .dark { padding: calc(var(--card-pad) + 12px); } }
/* in a tall hero the card's content sits together in its middle, not pushed apart; the pictures grow a little with the card */
@media (min-width: 1100px) {
  .hero__id { justify-content: center; }
  .hero__id .actions { margin-top: 0; padding-top: var(--sp-32); }
  .hero__id .lede { font-size: 17px; line-height: 28px; }
  .work__pair { width: 104%; margin-inline: -2%; }
}
/* the cards keep their own height; the heading and the cards sit together in the middle of the first screen, the spare height above and below */
@media (min-width: 1100px) {
  .hero > .shell { grid-template-rows: auto auto; align-content: center; }
  .hero__grid { align-items: stretch; }
  .hero__id { justify-content: flex-start; }
  .work__shots { min-height: 300px; }
}
/* the pair's height is snapped to whole pixels, so everything under it stays on whole device pixels (crisp media at scale 2) */
.work__shots { container-type: inline-size; }
.work__pair { aspect-ratio: auto; height: round(down, 52.4cqw, 1px); }
@media (min-width: 1100px) { .work__pair { height: round(down, calc(104cqw / 1.91), 1px); } }

/* ---------------------------------------------------------------- round 7 (2026-10-21)
   Media corners (Gio saw a thin line on the corners of every video and picture): the frame had squircle corners while its video was cut on a
   plain round corner, so the frame's dark ground showed between the two shapes. Now media frames use the plain round corner only, the picture
   or video itself is cut on that same corner, the frame has no ground of its own, and its hairline sits on top as an inset ring. */
.frame { background: transparent; box-shadow: 0 10px 24px rgba(44,39,32,.10), 0 24px 56px rgba(44,39,32,.10); }
.frame img, .frame video { border-radius: inherit; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(23,21,18,.08); }
/* every soft wash inside a rounded tile follows the tile's corner shape (Jen's testimonial showed a round glow inside a squircle card) */
.case__quote::before, .stat::after, .facts__row::before, .facts__row::after, .ring__say::before { corner-shape: inherit; }
.shot, .photo { background: transparent; } .shot img, .photo img { border-radius: inherit; }
/* whole pixels everywhere media sits (retina sharpness): the hero's height-based sizes are rounded to 4 px, the hero's columns and the
   picture pair get whole-pixel widths, and a frame starts at its column's left edge instead of being centred inside a fractional column */
@media (min-width: 1100px) {
  :root { --hero-font: round(clamp(46px, 5.8svh, 56px), 2px); --hero-top: round(clamp(24px, calc(20svh - 116px), 84px), 4px);
    --hero-gap: round(clamp(24px, calc(12svh - 60px), 60px), 4px); --hero-bottom: round(clamp(40px, calc(12svh - 44px), 76px), 4px); }
  .hero > .shell { min-height: round(down, calc(100svh - var(--bar-h)), 2px); }
  .hero__grid { grid-template-columns: round(down, calc((100% - var(--card-gap)) * .45), 1px) minmax(0, 1fr); }
  .work__pair { width: round(down, 100%, 2px); margin-inline: 0; }
}
.frame { margin-inline: 0; }
.frame { width: round(down, 100%, 16px); }   /* a multiple of 16 wide, so its 16:9 height is a whole number too */
/* the nav's links glide to their section instead of jumping (Gio); never with reduced motion. The page's own instant moves say so in page.js. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* the hero's second line drawn as an outline in the same umber (Gio, round 7); text stays real text, selectable and read aloud */
/* drawn by an SVG filter (#hollow in the markup): the letters are painted solid, then their inside is cut away 1.2 px in from the edge. A text
   stroke showed the font's overlapping pieces (the bar of the e, the crossing of the t) as extra lines; the filter merges them first. */
.hero__title .soft { color: var(--ink-second); }   /* without JavaScript: solid umber; page.js draws the outline (round 12) */
@media (forced-colors: active) { .hero__title .soft { color: CanvasText; -webkit-text-stroke: 0; } }

/* the system cards wider again (Gio, round 7): up to 1280 px beside the 1080 px column, and more air in the left column: wider padding, the
   kicker, name, words, numbers and button spaced on the 8 pt steps, the numbers in roomier tiles */
@media (min-width: 1100px) {
  .section--sys .panels { --wide: min(1280px, calc(100vw - 2 * var(--gutter))); }
  .section--sys .panel__head--sys { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: var(--sp-48) var(--sp-56, 56px); row-gap: var(--sp-32); }
  .section--sys .sys__text, .section--sys .sys__nums, .section--sys .panel__head--sys .panel__actions { padding-right: var(--sp-56, 56px); }
  .section--sys .sys__how { padding-left: var(--sp-56, 56px); }
  .section--sys .sys__text { gap: var(--sp-16); }
  .section--sys .sys__text .panel__line { max-width: 46ch; font-size: 17px; line-height: 28px; }
  .section--sys .sys__nums { gap: var(--sp-16); }
  .section--sys .sys__nums .stats { gap: var(--sp-12); }
  .section--sys .sys__nums .stat { padding: var(--sp-20) var(--sp-24); gap: var(--sp-8); }
  .section--sys .branch:not(.is-vertical) { height: 320px; }
}

/* ---------------------------------------------------------------- round 7: a quicker, smoother opening (Claude and Codex, measured)
   It felt slow: .7 s of growth, then the contents arriving in a stagger up to about 1.15 s after the click. Now the panel grows in .36 s on an
   ease-out curve and closes in .26 s, and its contents fade in together with it (no stagger, no second rise). It hitched at 2x: the glows behind
   the sections and the band behind the website cards were sized in percentages of their section, so every frame of the growth resized and
   repainted those big gradients; they now have fixed sizes, so the growing panel no longer repaints them. */
.js .panel:not(.panel--page) .panel__body { transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1); }
.js .panel.is-open:not(.panel--page) .panel__body { transition: grid-template-rows .36s cubic-bezier(.2,0,0,1); }
.js .panel:not(.panel--page) .panel__inner { transition: visibility 0s .26s; }
.js .panel.is-open:not(.panel--page) .panel__inner { transition: visibility 0s; }
.js .panel:not(.panel--page) .panel__body [data-unfold] { transform: none !important; clip-path: none !important; transition: opacity .3s ease-out !important; transition-delay: 0s !important; }
.js .panel:not(.panel--page) .panel__body [data-unfold]:not(.is-in) { opacity: 0; }
.js .panel:not(.panel--page) .panel__plus { transition-duration: .3s; }
.section--sys::before { height: 1400px; } .section--vault::before { height: 1100px; } .section--about::before { height: 1000px; } .section--last::before { height: 800px; }
.band { top: -120px; bottom: auto; height: 1100px; }

/* ---------------------------------------------------------------- round 8 (2026-10-21)
   The systems and the vault say everything on the home page (no case studies). The three system cards share one height. The systems glow
   sits behind the heading, so it no longer shows as a warm stripe in the gaps between the cards (Gio saw it between Lead Finder and the
   Research Engine). The vault card is only the visualizer: the rings, what the light is on, and the three numbers. */
.section--sys { --wide: min(1280px, calc(100vw - 2 * var(--gutter))); }
.section--sys .panels { grid-auto-rows: 1fr; }
.section--sys::before { top: 0; height: 900px; background: radial-gradient(34% 40% at 30% 30%, rgba(244,180,112,.26), transparent 100%); }
.panel--vault .panel__head--vault { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-32); }
.panel--vault .vault__side { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-16); padding-top: var(--sp-32); border-top: 1px solid var(--line); }
.panel--vault .ring__say { flex: 1 1 300px; width: auto; min-height: 0; margin: 0; align-content: center; }
.panel--vault .stats { flex: 2 1 480px; }
@media (max-width: 759px) { .panel--vault .stats { flex-basis: 100%; } }

/* the stage (Gio picked it from three, 2026-10-21): the whole section, heading included, rests on one big soft glass tray as wide as the cards plus a margin, and the heading lines
   up with the cards' text, so the step out in width reads as a room of its own */
@media (min-width: 1100px) {
  .section--sys > .shell { position: relative; }
  .section--sys > .shell::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: calc(var(--sec-pad) * -0.5 - 8px); bottom: -32px; left: calc((var(--shell) - var(--wide)) / 2 - 32px); right: calc((var(--shell) - var(--wide)) / 2 - 32px);
    border-radius: 56px; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 30px 80px rgba(44,39,32,.06); }
  .section--sys .section__head { margin-left: calc((var(--shell) - var(--wide)) / 2 + 56px); }
  .section--sys::before { opacity: .6; }
}
@media (min-width: 1100px) { .section--sys .panel__head--sys { grid-template-areas: "text how" "nums how"; grid-template-rows: auto 1fr; } .section--sys .sys__nums { align-self: end; } }

/* ---------------------------------------------------------------- round 9 (2026-10-21): the vault as an accordion beside the rings (Gio picked it
   from three). The heading is short again; the explanation lives in the card as three points with small labels, one open at a time. */
.vpoint summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.vpoint summary::-webkit-details-marker { display: none; }
.vpoint p { color: var(--ink-soft); font-size: var(--t-body); line-height: var(--l-body); text-wrap: pretty; margin-top: var(--sp-8); }
.vpoint__plus { display: none; }
.vpoint__plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vault__words { display: grid; width: 100%; }
.vault__words { align-self: center; }
/* #121, the soft-fill rows: beside the rings, one point open at a time, the open one in a soft white fill */
.vault__words { gap: var(--sp-8); }
.vpoint { border-radius: var(--r-md); padding: var(--sp-16) var(--sp-20); transition: background-color .25s ease; }
.vpoint[open] { background: rgba(255,255,255,.62); box-shadow: var(--glass); }
.vpoint summary { cursor: pointer; }
.vpoint summary .kicker { color: var(--ink); }
.vpoint__plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(23,21,18,.06); transition: transform .3s var(--ease); }
.vpoint[open] .vpoint__plus { transform: rotate(45deg); }
@media (min-width: 1100px) {
  .panel--vault .panel__head--vault {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "words ring" "side side"; align-items: center; column-gap: var(--sp-48); }
  .vault__words { grid-area: words; }
  .panel--vault .ring { grid-area: ring; }
  .panel--vault .vault__side { grid-area: side; }
  .panel--vault .panel__head--vault { padding: var(--sp-48) var(--sp-56, 56px); }
}

/* the vault accordion, smooth (round 9b): Codex's proposal, applied and checked by Claude */
/* Enhanced accordion; native details remain the no-JS fallback. */
.vault__words.vault-ready {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.vault-ready .vpoint {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.vault-ready .vpoint h4 { font: inherit; }

.vpoint__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vpoint__toggle .kicker { color: var(--ink); }

.vpoint__body {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.vpoint__inner { display: flow-root; }

.vault__fill {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  pointer-events: none;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.62);
  box-shadow: var(--glass);
}

.vault-ready .vpoint__plus {
  transition: transform .36s cubic-bezier(.2,0,0,1);
}

.vpoint__toggle[aria-expanded="true"] .vpoint__plus {
  transform: rotate(45deg);
}

@media (min-width: 1100px) {
  .panel--vault .panel__head--vault { align-items: start; }
}
/* the words column has a fixed height now (the tallest state), so it can sit centred beside the rings without ever moving on a switch */
.vault__words.vault-ready { align-self: center; }
@media (min-width: 1100px) { .panel--vault .panel__head--vault { align-items: center; } }
/* round 10 (Gio): the outlined line had letters touching at the page's tight tracking (t into h, y into s, a into n), so their outlines merged
   into crossing lines; at normal tracking every letter stands clear. The hero heading keeps one size on laptops (52 px) instead of following the
   window's height, so the outline looks the same maximised or not. */
.hero__title .soft { letter-spacing: 0; }
@media (min-width: 1100px) { :root { --hero-font: 52px; } }

/* ---------------------------------------------------------------- round 11 (2026-10-21)
   The systems line: the light's lane is clipped at the line's two ends (branch.js sets the clip), so the light slips under an invisible wall
   at the end and slides out from under one at the start, instead of fading. */
.branch__lane { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html:not(.js) .branch__lane { display: none; }
/* the vault: a part can be selected (rings.js); its pill gets a clay ring while the light rests on it */
.ring__node { cursor: pointer; }
.ring__node.is-picked .ring__pill { background: #fff; box-shadow: 0 0 0 1.5px var(--accent), var(--glass), 0 6px 18px rgba(44,39,32,.08); }

/* ---------------------------------------------------------------- round 12 (2026-10-21): the outlined line, drawn so no browser can get it wrong
   page.js replaces the hero's second line (kept as hidden real text) with one small SVG per word. Each SVG paints umber through a mask: the
   word drawn white with a 2.4 px stroke, then the same word drawn black on top. What is left is a clean 1.2 px line around the outside of
   the letters; the font's overlapping inner shapes fall inside the black and never show. The letters get .045em more space so the outside
   lines of neighbours never touch. */
.ol-line { color: var(--ink-second); }
@media (min-width: 760px) { .hero__title .ol-line { display: block; } }
.ol { display: inline-block; vertical-align: top; overflow: visible; }
.ol text { font: inherit; letter-spacing: .045em; }
.ol .ol__s { fill: #fff; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; }
.ol .ol__f { fill: #000; }
.ol .ol__ink { fill: var(--ink-second); }
.ol__probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.ol__w { white-space: nowrap; }

/* round 13: the outline's paint area may reach past its box (Codex) */
.ol {
  max-width: none;
  overflow: visible;
}


/* ---------------------------------------------------------------- round 16 (2026-10-21): Gio's copy round
   "My part" rows lead with a bold label; the row reads as one sentence after it. */
.rows__lead { display: block; font: 700 var(--t-body)/var(--l-body) var(--display); letter-spacing: -.01em; color: var(--ink); margin-bottom: 2px; }

/* ---------------------------------------------------------------- round 17 (2026-10-21): the page at 0.9 (Gio: "once I put Chrome on 90 %,
   the website is in perfect scale"). From 1100 px every size of round 6 is multiplied by 0.9, so the page at 100 % looks like round 6 at Chrome's
   90 %: the column 972 px (1080), the system cards 1152 (1280), text and controls at 0.9. Spacing and line heights are rounded to whole
   pixels so media stays on the device pixel grid; type sizes keep their exact 0.9 values. Phones and tablets keep their own sizes. */
@media (min-width: 1100px) {
  :root { --gutter: 36px; --shell: min(972px, calc(100vw - 2 * var(--gutter))); --bar-h: 64px;
    --pill-t: 12.6px; --pill-y: 11px; --pill-x: 22px;
    --t-body: 14.4px; --l-body: 22px; --t-lede: 15.3px; --l-lede: 25px; --t-intro: 17.1px; --l-intro: 25px; --t-small: 11.7px; --l-small: 18px;
    --t-kicker: 10.8px; --l-kicker: 14px; --t-h1: 46.8px; --l-h1: 50px; --t-h2: 34.2px; --l-h2: 40px; --t-h3: 19.8px; --l-h3: 25px;
    --t-name: 30.6px; --l-name: 36px; --t-part: 25.2px; --l-part: 29px; --t-fig: 28.8px; --l-fig: 32px; --t-pull: 25.2px; --l-pull: 29px;
    --sec-pad: 115px; --head-gap: 43px; --card-pad: 32px; --card-gap: 25px; --grid-gap: 29px; --inset: 14px; --stack: 14px; --text-gap: 11px; --tile-pad: 22px;
    --r-xl: 29px; --r-lg: 22px; --r-md: 18px; --r-sm: 13px;
    /* the hero still fills the first screen: round 6's formulas, each at 0.9 of a window 1/0.9 as tall */
    --hero-font: 46.8px; --hero-top: round(clamp(22px, calc(20svh - 104px), 76px), 2px); --hero-gap: round(clamp(22px, calc(12svh - 54px), 54px), 2px);
    --hero-bottom: round(clamp(36px, calc(12svh - 40px), 68px), 2px); }
  .hero__title { line-height: 50px; }
  /* the bar and its controls */
  .ib, .ib--menu { width: 40px; height: 40px; }
  .top__link { font-size: 12.6px; line-height: 18px; padding: 9px 14px; }
  .brand { font-size: 15.3px; line-height: 18px; padding: 11px 16px; }
  .pill { line-height: 18px; min-height: 40px; padding: 11px var(--pill-x); gap: 9px; }
  .pill--small { font-size: 12.6px; line-height: 18px; min-height: 40px; padding: 11px 16px; gap: 7px; }
  .pill svg { width: 13.5px; height: 13.5px; }
  .pill .panel__plus { width: 18px; height: 18px; }
  .chip { font-size: 10.8px; line-height: 14px; padding: 5px 11px; }
  .kicker--dot::before { width: 6px; height: 6px; }
  /* the hero cards */
  .photo { width: 80px; }
  .name { font-size: 21.6px; line-height: 25px; }
  .hero__id .lede { font-size: 15.3px; line-height: 25px; }
  .work { padding: 29px; gap: 14px; }
  .work__shots { min-height: 270px; }
  .shot { border-radius: 14px; }
  .shot__name { font-size: 11.7px; line-height: 14px; padding: 5px 11px; }
  /* websites, cases, quotes */
  .panel__pull, .quote__name { font-size: 16.2px; line-height: 22px; }
  .case__quote { padding: 36px; gap: 22px 58px; }
  .section__sub { font-size: 16.2px; line-height: 22px; }
  /* systems */
  .section--sys .panel__head--sys { padding: 43px 50px; row-gap: 29px; }
  .section--sys .sys__text, .section--sys .sys__nums, .section--sys .panel__head--sys .panel__actions { padding-right: 50px; }
  .section--sys .sys__how { padding-left: 50px; }
  .section--sys .sys__text .panel__line { font-size: 15.3px; line-height: 25px; }
  .section--sys .sys__nums .stat { padding: 18px 22px; }
  .section--sys .branch:not(.is-vertical) { height: 288px; }
  .branch:not(.is-vertical) { height: 252px; }
  .branch__pill { padding: 7px 11px; border-radius: 13px; } .branch__pill b { font-size: 14.4px; line-height: 18px; }
  /* the vault */
  .panel--vault .panel__head--vault { padding: 43px 50px; column-gap: 43px; }
  .ring { max-width: 468px; }
  .ring__pill b { font-size: 12.6px; line-height: 14px; }
  .ring__say b { font-size: 16.2px; line-height: 22px; } .ring__say span { font-size: 13.5px; line-height: 18px; }
  .vpoint { padding: 14px 18px; } .vpoint__plus { width: 22px; height: 22px; }
  /* contact */
  .dark__links a { font-size: 19.8px; line-height: 25px; }
  .dark__links li { padding: 14px 22px; }
  /* the system cards' width (rounds 7 and 8 set it on the section and its panels) */
  .section--sys, .section--sys .panels { --wide: min(1152px, calc(100vw - 2 * var(--gutter))); }
}