/*
 * Lisa 3: the case study on the site's own design system.
 *
 * Loads after engine.css (header, footer, menu sheet, research board) and
 * /system/tokens.css + components.css. Everything the case study itself
 * draws is restyled here, scoped to body.l3, so the shared engine and the
 * earlier Lisa pages are untouched.
 *
 * The language is the one /work, /experience and the orbit stations already
 * speak: a black canvas, IBM Plex from the type tokens, white-10 cards at
 * 24px radii, caps section labels trailing a hairline, pill buttons, and one
 * accent per story. Lisa's accent is Pink Light, the colour of her "View
 * Case Study" button on /work. The product UI appears only inside the
 * screenshots.
 */

body.l3{
  --l3-accent: var(--pink-light);
  --l3-accent-soft: rgb(232 59 157 / .14);
  --l3-accent-line: rgb(232 59 157 / .45);
  --l3-card: var(--white-10);
  --l3-card-quiet: var(--white-5);
  --l3-line: var(--white-10);
  --l3-line-strong: var(--white-20);
  --l3-ink: var(--white-100);
  --l3-soft: #cfcfd0;   /* chrome.css secondary copy */
  --l3-muted: #999999;  /* the site's section-label grey */
  --l3-read: 680px;
  --l3-r: 24px;
  --l3-r-sm: 16px;
  /* the canvas colour every product export sits on */
  --l3-canvas: #eff0fe;

  background:#000; color:var(--l3-ink);
  font:var(--t-b2); letter-spacing:0;
}
body.l3 ::selection{ background:var(--l3-accent); color:#fff; }

/* Reserve the left gutter for the on-page index on wide screens. The shell
   shrinks rather than shifts, so the fixed header (which also rides
   --shell) stays aligned with the content column. */
@media (min-width:1280px){
  body.l3{ --shell: min(1000px, calc(100vw - 480px)); }
}

/* ---------------------------------------------------------------- base type */
:where(body.l3 main) p{ margin:0 0 1em; }
:where(body.l3) :is(strong, b){ color:var(--l3-ink); font-weight:var(--fw-semibold); }
:where(body.l3 main) a{ color:var(--l3-ink); }
body.l3 em{ font-style:italic; }
body.l3 .icon{ flex:none; }

.l3-shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

/* Section label: the /work & /experience pattern. Caps B3b in grey, a
   hairline running out to the column edge. */
body.l3 .l3-kicker,
body.l3 .subkicker{
  display:flex; align-items:center; gap:20px; max-width:none;
  font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--l3-muted); margin:0 0 28px;
}
body.l3 .l3-kicker::after,
body.l3 .subkicker::after{ content:""; flex:1 1 auto; height:1px; background:var(--l3-line-strong); min-width:24px; }

.l3-h2,
body.l3 .sec-head{
  font:var(--t-h2); letter-spacing:-.01em; color:var(--l3-ink);
  max-width:22ch; margin:0 0 24px; text-wrap:balance;
}
body.l3 .sec-head em{ font-style:normal; color:var(--l3-accent); }
.l3-h3{ font:var(--t-h3); letter-spacing:-.005em; color:var(--l3-ink); margin:0 0 20px; text-wrap:balance; }
.l3-lead,
body.l3 .lead{ font:var(--t-b1); color:var(--l3-ink); max-width:var(--l3-read); margin:0 0 1em; letter-spacing:0; }
.l3-p,
body.l3 .act .wrap > p:not([class]),
body.l3 .act .wrap > p.mt-l,
body.l3 .act .wrap > p.mt-s:not(.lead):not(.beat){ font:var(--t-b2); color:var(--white-80); max-width:var(--l3-read); }
.l3-note{ font:var(--t-b2); color:var(--l3-soft); max-width:var(--l3-read); }

/* Beats: the story's short spoken lines. */
body.l3 .beat{ font:var(--t-b1a); color:var(--l3-muted); margin:.9em 0 .5em; max-width:var(--l3-read); letter-spacing:-.005em; }
body.l3 .beat--ink{ color:var(--l3-ink); }
body.l3 .beat + .beat{ margin-top:0; }

body.l3 .figc{
  font:var(--t-b3); color:var(--l3-muted); margin-top:16px; max-width:720px;
}
body.l3 .figc b, body.l3 .figc strong{ color:var(--l3-soft); font-weight:var(--fw-semibold); }
body.l3 .figc em{ color:var(--l3-soft); }

body.l3 .mt-s{ margin-top:20px; } body.l3 .mt-l{ margin-top:48px; } body.l3 .mt-xl{ margin-top:72px; }

/* Wraps keep engine's single left edge but read on the shell. */
body.l3 .wrap, body.l3 .wrap-wide, body.l3 .wrap-max{ max-width:var(--shell); padding-inline:var(--pad); }
body.l3 .wrap > p, body.l3 .wrap > .lead, body.l3 .wrap > .beat,
body.l3 .wrap > h2, body.l3 .wrap > h3{ max-width:var(--l3-read); }
body.l3 .wrap > .subkicker{ max-width:none; }
body.l3 .wrap > .sec-head{ max-width:22ch; }

/* Sections: all on the one black canvas. The old paper/poster bands and
   night slabs go; rhythm comes from space and the labelled hairlines. */
body.l3 .section, body.l3 .l3-section{ padding-block:clamp(72px,9vw,120px); background:none; }
body.l3 .section--tight{ padding-block:clamp(40px,5vw,64px) clamp(56px,7vw,96px); }
body.l3 .poster, body.l3 .fold{ background:none; }

/* ---------------------------------------------------------------- hero */
.l3-hero{ position:relative; overflow:hidden; padding-block:clamp(150px, calc(120px + 5vw), 200px) clamp(8px,2vw,24px); }
.l3-hero__stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.l3-hero__stars .star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; animation:l3Twinkle 6s ease-in-out infinite; }
@keyframes l3Twinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }
/* The /work hero's blurred disc, in Lisa's pink rather than the site green. */
.l3-hero__glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 760px at 72% 0%,
    rgb(232 59 157 / .16) 0%, rgb(232 59 157 / .12) 20%, rgb(232 59 157 / .07) 38%,
    rgb(232 59 157 / .03) 60%, transparent 100%); }
.l3-hero > .l3-shell{ position:relative; z-index:1; }
.l3-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,30vw,340px); gap:clamp(40px,6vw,80px); align-items:center; }

.l3-hero__eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 28px; font:var(--t-b3a); color:var(--l3-soft); }
.l3-hero__mark{ width:45px; height:45px; flex:none; display:block; }
.l3-hero__mark canvas{ width:100%; height:100%; display:block; }
.l3-dot{ width:4px; height:4px; border-radius:50%; background:var(--l3-muted); }

.l3-hero__title{
  font-family:var(--font-sans); font-weight:300; color:#fff;
  font-size:clamp(50px, calc(34px + 3.6vw), 84px); line-height:1.08; letter-spacing:-.015em;
  margin:0; text-wrap:balance;
}
.l3-accent{ color:var(--l3-accent); }
.l3-hero__sub{ margin:28px 0 0; max-width:560px; font:var(--t-b1); font-weight:300; color:#fff; }
.l3-hero__sub strong{ font-weight:var(--fw-semibold); }
.l3-hero__acts{ margin:32px 0 0 !important; }

/* Stat pill: /experience's stroke-only four-up table. */
.l3-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:clamp(56px,7vw,88px) 0 0;
  border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; }
.l3-stats > div{ padding:20px 24px 22px; border-left:1px solid var(--l3-line); min-width:0; }
.l3-stats > div:first-child{ border-left:0; }
.l3-stats dt{ font:var(--t-b1a); color:var(--l3-accent); margin:0 0 6px; white-space:nowrap; }
.l3-stats dd{ margin:0; font:var(--t-b3); color:var(--l3-soft); }

/* The idle loop is rendered on flat white, so it sits in a white card: the
   frame explains the white rather than leaving a box floating on black.
   Cropped to her head and torso, which also removes the empty sky above her
   and the generator watermark in the bottom corner. */
.l3-hero__film{ position:relative; margin:0; border-radius:28px; overflow:hidden; background:#fff;
  aspect-ratio:4/5; box-shadow:0 40px 120px -30px rgb(232 59 157 / .35); }
.l3-hero__film video{ position:absolute; inset:0; width:100%; height:122%; object-fit:cover; object-position:50% 20%;
  top:-4%; pointer-events:none; }
.l3-hero__film figcaption{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; background:rgb(0 0 0 / .72); backdrop-filter:blur(10px);
  font:var(--t-b3a); color:#fff; }
.l3-live{ width:7px; height:7px; border-radius:50%; background:var(--green-light); box-shadow:0 0 10px var(--green-light); }

/* Reading routes: three cards, the time up front. */
body.l3 .l3-kicker--routes{ margin-top:clamp(56px,7vw,88px); }
.l3-routes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.l3-route{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 24px 24px;
  border-radius:var(--l3-r); background:var(--l3-card); border:1px solid transparent; color:#fff !important;
  text-decoration:none; transition:border-color .3s var(--ease), transform .4s cubic-bezier(.34,1.56,.64,1); }
.l3-route:hover{ border-color:color-mix(in srgb, var(--l3-accent) 45%, var(--white-20)); }
.l3-route__time{ font:var(--t-b3c); letter-spacing:var(--ls-caps); color:var(--l3-accent); margin-bottom:6px; }
.l3-route__t{ font:var(--t-b1a); }
.l3-route__d{ font:var(--t-b3); color:var(--l3-soft); padding-right:28px; }
.l3-route__go{ position:absolute; right:22px; bottom:22px; color:var(--l3-muted); transition:transform .3s var(--ease), color .2s; }
.l3-route:hover .l3-route__go{ color:var(--l3-accent); transform:translateY(3px); }

/* ---------------------------------------------------------------- cards & figures */
.l3-card{ background:var(--l3-card); border-radius:var(--l3-r); border:1px solid transparent; }

.l3-brief{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:40px 0 0; }
.l3-brief .l3-card{ padding:24px; }
.l3-brief dt{ display:flex; align-items:center; gap:10px; font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin-bottom:16px; }
.l3-brief dd{ margin:0; font:var(--t-b2); color:var(--white-80); }

/* Every screenshot sits in the /work card treatment: a dark card with a
   header row, the image inset at 16px radii. */
.l3-fig{ margin:48px 0 0; }
.l3-fig__label{ display:none; }
.l3-shot,
body.l3 .frame.frame--has-image,
body.l3 .dgram{
  position:relative; display:block; width:100%; max-width:100%;
  background:var(--l3-card); border:1px solid transparent; border-radius:28px;
  padding:10px; overflow:hidden; aspect-ratio:auto;
  transition:border-color .3s var(--ease);
}
.l3-shot:hover, body.l3 .frame.frame--has-image:hover{ border-color:var(--l3-line-strong); }
body.l3 .frame::after{ content:none; }
body.l3 .frame{ place-items:normal; }
/* The card header: the figure's label, and a zoom hint on the right. */
.l3-fig__label, body.l3 .frame--has-image .frame__tag, .dgram__tag{
  display:block; position:static; margin:0; padding:6px 10px 14px; background:none; border:0;
  font:var(--t-b3a); letter-spacing:0; text-transform:none; color:var(--l3-soft);
  text-align:left; align-self:stretch; width:auto; max-width:none; margin:0 !important;
}
.l3-shot .l3-fig__label{ display:block; }
.l3-shot .artifact-link, body.l3 .frame .artifact-link{ display:block; position:relative; border-radius:var(--l3-r-sm); overflow:hidden; cursor:zoom-in; background:var(--l3-canvas); }
.l3-shot img, body.l3 .frame img{ display:block; width:100%; height:auto; max-width:100%; }
/* The expand control lives in the card header now, not over the image. */
.l3-shot .artifact-link::after, body.l3 .frame .artifact-link::after{
  content:none; position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%;
  background:rgb(0 0 0 / .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s;
}
.l3-shot .artifact-link:hover::after, body.l3 .frame .artifact-link:hover::after,
.l3-shot .artifact-link:focus-visible::after, body.l3 .frame .artifact-link:focus-visible::after{ opacity:1; transform:none; }
body.l3 .artifact-link:focus-visible{ outline:2px solid var(--l3-accent); outline-offset:3px; }

body.l3 figure.bleed{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
body.l3 figure.bleed .figc{ margin-inline:4px; }

/* "Notice…" and "How to read this" lines above a figure. */
body.l3 .notice-detail, body.l3 .diagram-reading{
  max-width:720px; margin:0 0 16px !important; padding:0 0 0 16px;
  border-left:2px solid var(--l3-accent);
  font:var(--t-b3) !important; color:var(--l3-soft) !important;
}
body.l3 .diagram-reading p{ margin:0; font:var(--t-b3); color:var(--l3-soft); }
body.l3 .diagram-reading b{ display:inline; color:#fff; margin-right:6px; }

/* ---------------------------------------------------------------- 5-minute story */
.l3-decision{ margin-top:clamp(56px,7vw,88px); padding-top:clamp(40px,5vw,56px); border-top:1px solid var(--l3-line); }
.l3-decision__head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.l3-decision__n{ display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border-radius:20px;
  background:var(--l3-accent-soft); color:var(--l3-accent); font:var(--t-b3c); letter-spacing:.04em; }
.l3-decision__k{ font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-soft); }
.l3-decision__body p{ font:var(--t-b2); color:var(--white-80); max-width:var(--l3-read); }
.l3-proof{ font:var(--t-b1a); color:#fff; max-width:var(--l3-read); margin:32px 0 0 !important; }
.l3-callout{ margin:28px 0 0 !important; padding:22px 24px; border-radius:var(--l3-r); background:var(--l3-accent-soft);
  font:var(--t-b2); color:#fff; max-width:760px; }

.l3-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:32px 0 0; max-width:760px; }
.l3-pair > div{ padding:20px 22px; border-radius:20px; border:1px solid var(--l3-line); }
.l3-pair__k{ display:block; font:var(--t-b3c); letter-spacing:var(--ls-caps); color:var(--l3-accent); margin-bottom:10px; }
.l3-pair b{ display:block; font:var(--t-b1a); }
.l3-pair p{ margin:8px 0 0 !important; font:var(--t-b3); color:var(--l3-soft); }

.l3-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(32px,5vw,64px); align-items:start; }
.l3-split .l3-fig{ margin-top:0; }
.l3-fig--portrait .l3-shot .artifact-link{ background:var(--l3-canvas); }

.l3-ladder{ list-style:none; margin:28px 0; padding:0; border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; }
.l3-ladder li{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; padding:18px 22px; border-top:1px solid var(--l3-line); }
.l3-ladder li:first-child{ border-top:0; }
.l3-ladder li:nth-child(2){ background:var(--l3-accent-soft); }
.l3-ladder span{ grid-row:span 2; font:var(--t-b3c); color:var(--l3-accent); padding-top:3px; }
.l3-ladder b{ font:var(--t-b2a); }
.l3-ladder p{ margin:4px 0 0 !important; font:var(--t-b3); color:var(--l3-soft); }

.l3-links{ display:flex; flex-wrap:wrap; gap:12px 28px; margin:28px 0 0 !important; }
.l3-links a, .l3-textlink{ display:inline-flex; align-items:center; gap:8px; font:var(--t-b3a); color:#fff !important;
  text-decoration:none; border-bottom:1px solid var(--l3-line-strong); padding:6px 0; transition:color .2s, border-color .2s; }
.l3-links a:hover, .l3-textlink:hover{ color:var(--l3-accent) !important; border-color:var(--l3-accent); }
.l3-links .icon{ transition:transform .25s var(--ease); }
.l3-links a:hover .icon{ transform:translateX(3px); }

.l3-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:36px; }
body.l3 .btn{ text-decoration:none; max-width:100%; }
@media (max-width:600px){ body.l3 .btn{ white-space:normal; height:auto; min-height:50px; padding-block:12px; line-height:1.3; } }
body.l3 .btn .icon{ width:20px; height:20px; }
body.l3 main a.btn{ color:var(--btn-fg); }
.l3-btn-lisa{ --btn-bg:var(--l3-accent); --btn-fg:var(--white-100); --btn-tint:var(--white-10); }

/* Final UI gallery: the shipped screens, one lead plate then a two-up grid. */
.l3-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 16px; margin-top:40px; align-items:stretch; }
.l3-gallery__item{ margin:0; min-width:0; display:flex; flex-direction:column; }
/* Cards in a row share a height; each plate sits whole and centred on the
   export's own canvas colour, so nothing is cropped to make them match. */
.l3-gallery__item .l3-shot{ flex:1; display:flex; flex-direction:column; }
.l3-gallery__item .artifact-link{ flex:1; display:grid; place-items:center; }
.l3-gallery__item--lead{ grid-column:1 / -1; }
.l3-gallery .figc{ margin-inline:4px; }

/* Chapter directory */
.l3-chapters{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px; }
.l3-chapcard{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; padding:22px 52px 22px 22px;
  color:#fff !important; text-decoration:none; transition:border-color .3s var(--ease); }
.l3-chapcard:hover{ border-color:color-mix(in srgb, var(--l3-accent) 45%, var(--white-20)); }
.l3-chapcard__n{ grid-row:span 2; font:var(--t-b3c); color:var(--l3-accent); padding-top:4px; }
.l3-chapcard b{ font:var(--t-b1a); }
.l3-chapcard > span:not(.l3-chapcard__n){ font:var(--t-b3); color:var(--l3-soft); margin-top:6px; }
.l3-chapcard .icon{ position:absolute; right:22px; top:50%; margin-top:-10px; color:var(--l3-muted); }
.l3-chapcard:hover .icon{ color:var(--l3-accent); }

/* ---------------------------------------------------------------- chapters */
.l3-chapter{ position:relative; padding-top:var(--chapter-pad, clamp(96px,12vw,168px)); }
/* A chapter opens at its divider. The divider's centre takes the story
   accent and casts light downward only: the glow begins at the line (never
   above it) and fades out over the chapter title. --glow-rgb is the accent. */
.l3-chapter{ --glow-rgb:232 59 157; --chapter-pad:clamp(96px,12vw,168px); }
.l3-chapter::before{ content:""; position:absolute; left:0; right:0; top:var(--chapter-pad); height:420px; pointer-events:none;
  background:radial-gradient(ellipse min(560px, 60vw) 380px at 50% 0%,
    rgb(var(--glow-rgb) / .2) 0%, rgb(var(--glow-rgb) / .1) 35%, rgb(var(--glow-rgb) / .035) 65%, transparent 100%); }
.l3-chapter .l3-shell{ position:relative; }
.l3-chapter .l3-shell::before{ content:""; display:block; height:1px; margin-bottom:28px;
  background:linear-gradient(90deg, var(--l3-line-strong), rgb(var(--glow-rgb) / .75) 50%, var(--l3-line-strong)); }
.l3-chapter__n{ display:flex; gap:10px; margin:0 0 clamp(28px,4vw,48px) !important; font:var(--t-b3c); letter-spacing:var(--ls-caps); color:var(--l3-accent); text-transform:uppercase; }
.l3-chapter__n span + span{ color:var(--l3-muted); }
.l3-chapter__t{ font-family:var(--font-sans); font-weight:300; font-size:clamp(46px, calc(30px + 3.4vw), 84px); line-height:1.05; letter-spacing:-.015em; color:#fff; margin:0; }
.l3-chapter__s{ margin:20px 0 0 !important; font:var(--t-b1); color:var(--l3-soft); max-width:560px; }
body.l3 .l3-chapter + .section{ padding-top:clamp(56px,7vw,88px); }

/* Theme block (Act 01) */
body.l3 .theme-block{ margin-top:40px; padding:24px; border:0; border-radius:var(--l3-r); background:var(--l3-accent-soft); max-width:var(--l3-read); }
body.l3 .theme-block .label{ font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin:0 0 10px; }
body.l3 .theme-block .h3{ font:var(--t-h4); letter-spacing:-.005em; color:#fff; margin:0; }

/* Scorecard: the stat pill again, five across. */
body.l3 .scorecard{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; background:none; margin:0; }
body.l3 .score{ padding:18px 20px; border-left:1px solid var(--l3-line); }
body.l3 .score:first-child{ border-left:0; }
body.l3 .score dt{ font:var(--t-b3b); font-size:12px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); margin:0 0 10px; }
body.l3 .score dd{ margin:0; font:var(--t-b1a); color:#fff; }
body.l3 .score dd small{ display:block; margin-top:6px; font:var(--t-b3); color:var(--l3-soft); }

/* Timeline (Act 02) */
body.l3 .timeline__row{ grid-template-columns:repeat(3,1fr); }
body.l3 .timeline__row::before{ background:var(--l3-line-strong); width:calc(66.667% + .6667 * var(--tl-gap)); top:5px; }
body.l3 .timeline__node::before{ background:#000; border:1.5px solid var(--white-80); }
body.l3 .timeline__node b{ font:var(--t-b2a); color:#fff; margin-bottom:6px; }
body.l3 .timeline__node span{ font:var(--t-b3); color:var(--l3-soft); }
body.l3 .timeline__node--accent::before{ background:var(--l3-accent); border-color:var(--l3-accent); box-shadow:0 0 0 5px var(--l3-accent-soft); }
body.l3 .timeline__node--accent b{ color:var(--l3-accent); }

/* Flow (latency) */
body.l3 .flow{ gap:0; }
body.l3 .node{ background:var(--l3-card); border:1px solid transparent; border-radius:20px; padding:20px 22px; }
body.l3 .node b{ font:var(--t-b1a); color:#fff; margin-bottom:6px; }
body.l3 .node span{ font:var(--t-b3); color:var(--l3-soft); }
body.l3 .node--fail b{ color:var(--red-light); }
body.l3 .node--accent{ background:var(--l3-accent-soft); border-color:var(--l3-accent-line); }
body.l3 .node--accent b{ color:var(--l3-accent); }
body.l3 .node--accent span{ color:#fff; }
body.l3 .flow .arrow{ color:var(--l3-muted); padding:0 8px; }

/* Principles / lessons: two-up cards. */
body.l3 .principles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; background:none; border:0; border-radius:0; overflow:visible; }
body.l3 .principle{ background:var(--l3-card); border-radius:var(--l3-r); padding:26px 26px 28px; }
body.l3 .principle__n{ font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin:0 0 14px; }
body.l3 .principle__t{ font:var(--t-b1a); color:#fff; margin:0 0 12px; letter-spacing:-.005em; }
body.l3 .principle p:not([class]){ font:var(--t-b3); color:var(--l3-soft); margin:0; }

body.l3 .pullquote{ font:var(--t-h3); font-weight:var(--fw-regular); line-height:1.35; color:#fff; padding-left:24px; border-left:2px solid var(--l3-accent); letter-spacing:-.005em; }
body.l3 .pullquote em{ color:var(--l3-accent); font-style:normal; }

/* Triad */
body.l3 .triad{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.l3 .tri{ padding:22px 22px 24px; border:0; border-radius:var(--l3-r); background:var(--l3-card); }
body.l3 .tri__k{ font:var(--t-b2a); letter-spacing:0; text-transform:none; color:#fff; margin:0 0 12px; }
body.l3 .tri p:not(.tri__k){ font:var(--t-b3); color:var(--l3-soft); margin:0; }
body.l3 .tri p + p{ margin-top:.7em; }

/* Insight (mechanisms) */
body.l3 .insight, body.l3 .insight + .insight, body.l3 .insight:first-of-type, body.l3 .insight:last-of-type{
  background:var(--l3-card); border:0; border-radius:var(--l3-r); padding:26px 28px; }
body.l3 .insight + .insight{ margin-top:16px; }
body.l3 .insight__n{ font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin:0 0 10px; }
body.l3 .insight__t{ font:var(--t-h4); color:#fff; margin:0 0 20px; }
body.l3 .omi{ grid-template-columns:120px 1fr; gap:0 22px; }
body.l3 .omi dt, body.l3 .omi dd{ padding:12px 0; border-top:1px solid var(--l3-line); }
body.l3 .omi dt{ font:var(--t-b3b); font-size:12px; letter-spacing:var(--ls-caps); color:var(--l3-muted); }
body.l3 .omi dd{ margin:0; font:var(--t-b3); color:var(--l3-soft); }

/* Stages: a list in one card; each row's verdict is a coloured pill. */
body.l3 .stages{ background:none; border:1px solid var(--l3-line); border-radius:var(--l3-r); gap:0; }
body.l3 .stage{ background:none; padding:18px 22px; border-top:1px solid var(--l3-line); gap:18px; }
body.l3 .stage:first-child{ border-top:0; }
body.l3 .stage__i{ color:var(--l3-muted); border:1px solid var(--l3-line-strong); background:none; font:var(--t-b3c); }
body.l3 .stage__b b{ font:var(--t-b2a); color:#fff; margin-bottom:4px; }
body.l3 .stage__b span{ font:var(--t-b3); color:var(--l3-soft); }
body.l3 .stage__tag{ font:var(--t-b3a); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--l3-soft);
  padding:5px 11px; border-radius:999px; background:var(--white-10); white-space:nowrap; }
body.l3 .stage__tag[data-tag="kept"], body.l3 .stage__tag[data-tag="shipped"]{ color:var(--green-light); background:rgb(0 255 115 / .1); }
body.l3 .stage__tag[data-tag="failed"]{ color:var(--red-light); background:rgb(255 71 58 / .12); }
body.l3 .stage__tag[data-tag="gate"]{ color:var(--yellow-light); background:rgb(217 232 3 / .1); }
body.l3 .stage--final{ background:var(--l3-accent-soft); }
body.l3 .stage--final .stage__i{ color:var(--l3-accent); border-color:var(--l3-accent-line); }
body.l3 .stage--final .stage__tag:not([data-tag="shipped"]){ color:var(--l3-accent); background:rgb(232 59 157 / .16); }

/* Observed outcomes */
body.l3 .observed{ border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; }
body.l3 .observed__item{ grid-template-columns:24px 1fr; padding:18px 22px; border-bottom:1px solid var(--l3-line); gap:14px; }
body.l3 .observed__item:last-child{ border-bottom:0; }
body.l3 .observed__item svg{ color:var(--green-light); margin-top:1px; }
body.l3 .observed__item b{ font:var(--t-b2a); color:#fff; margin-bottom:4px; }
body.l3 .observed__item span{ font:var(--t-b3); color:var(--l3-soft); }

/* Evidence notes */
body.l3 .evidence-note{ max-width:var(--l3-read); margin:0 0 40px; padding:22px 24px; border:1px solid var(--l3-line); border-left:1px solid var(--l3-line); border-radius:var(--l3-r); background:none; }
body.l3 .evidence-note h3{ display:flex; align-items:center; gap:10px; font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-soft); margin:0 0 12px; }
body.l3 .evidence-note h3::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--yellow-light); }
body.l3 .evidence-note p, body.l3 .evidence-note dd{ font:var(--t-b3); color:var(--l3-soft); margin:0; }
body.l3 .evidence-note dl{ margin:0; }
body.l3 .evidence-note dl > div{ padding:12px 0; border-top:1px solid var(--l3-line); margin:0; }
body.l3 .evidence-note dl > div:first-child{ border-top:0; padding-top:0; }
body.l3 .evidence-note dt{ font:var(--t-b3a); color:#fff; margin-bottom:4px; }

/* Reframe + closing: the two statement moments. */
body.l3 .reframe{ background:none; color:#fff; }
body.l3 .reframe .wrap{ padding-block:clamp(40px,5vw,64px); }
body.l3 .reframe .wrap > *{ max-width:none; }
body.l3 .reframe .wrap{ position:relative; }
body.l3 .reframe .wrap::before{ content:""; position:absolute; inset:0 var(--pad); border-radius:32px; background:var(--l3-card); z-index:-1; }
body.l3 .reframe{ position:relative; z-index:0; }
body.l3 .reframe .wrap > *{ padding-inline:clamp(24px,5vw,56px); }
body.l3 .reframe__k, body.l3 .closing .reframe__k{ font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin:0 0 20px; }
body.l3 .reframe__from{ font:var(--t-h4); font-weight:300; color:var(--l3-muted); max-width:28ch; }
body.l3 .reframe__arrow{ background:var(--l3-accent); margin:22px clamp(24px,5vw,56px); padding:0 !important; }
body.l3 .reframe__arrow::after{ border-color:var(--l3-accent); }
body.l3 .reframe__to{ font-family:var(--font-sans); font-weight:300; font-size:clamp(32px,4.6vw,56px); line-height:1.1; letter-spacing:-.015em; color:#fff; max-width:18ch; }
body.l3 .reframe__to .u, body.l3 .closing__q .u{ color:var(--l3-accent); font-style:normal; }

body.l3 .closing{ background:none; position:relative; overflow:hidden; }
body.l3 .closing::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 700px 360px at 30% 60%, rgb(232 59 157 / .14), transparent 70%); }
body.l3 .closing .wrap{ position:relative; padding-block:clamp(88px,12vw,160px); }
body.l3 .closing__q{ font-family:var(--font-sans); font-weight:300; font-size:clamp(34px,4.8vw,60px); line-height:1.12; letter-spacing:-.015em; color:#fff; max-width:20ch; }

/* Films */
body.l3 .films{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:760px; }
body.l3 .films figure{ background:var(--l3-card); border-radius:28px; padding:10px; }
body.l3 .films video{ border-radius:var(--l3-r-sm); background:#0a0a0c; }
body.l3 .films figcaption{ font:var(--t-b3a); letter-spacing:0; text-transform:none; color:var(--l3-soft); margin:0; padding:14px 8px 6px; }

/* Disclosure rows (film note, board-as-text, diagram notes) */
body.l3 main details{ margin:24px 0; border:1px solid var(--l3-line); border-radius:20px; padding:0 20px; max-width:var(--l3-read); background:none; }
body.l3 main details > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; font:var(--t-b3a); color:#fff; }
body.l3 main details > summary::-webkit-details-marker{ display:none; }
body.l3 main details > summary::after{ content:""; flex:none; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform .25s var(--ease); }
body.l3 main details[open] > summary::after{ transform:rotate(180deg); }
body.l3 main details > *:not(summary){ font:var(--t-b3); color:var(--l3-soft); }
body.l3 main details[open]{ padding-bottom:18px; }
body.l3 .board-reading h3{ font:var(--t-b2a); color:#fff; margin:28px 0 10px; }
body.l3 .board-reading h3 b{ display:block; font:var(--t-b1a); margin-top:4px; }
body.l3 .board-reading blockquote{ margin:12px 0; padding:14px 18px; border-left:2px solid var(--l3-accent); background:var(--l3-card-quiet); border-radius:0 12px 12px 0; }
body.l3 .board-reading blockquote span{ font:var(--t-b3c); font-size:12px; color:var(--l3-muted); }
body.l3 .board-reading blockquote p{ font:var(--t-b2); color:#fff; margin:8px 0 0; }
body.l3 .divider{ font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
body.l3 .divider::after{ background:var(--l3-line-strong); }

/* Research board: the notes are the artifact, so they keep their paper; the
   table they are pinned to goes dark with the page. */
body.l3 .board{ border:1px solid var(--l3-line); border-radius:28px; background:#0b0b0d; }
body.l3 .board__viewport{ background-color:#0b0b0d; }
body.l3 .board__ztitle{ color:var(--l3-accent); background:#17171a; border:1px solid var(--l3-line-strong); box-shadow:none; }
body.l3 .board__ztitle b{ color:#fff; }
body.l3 .note--tag{ color:var(--l3-accent); background:rgb(232 59 157 / .12); border-color:var(--l3-accent-line); }
body.l3 .board__toolbar{ background:rgb(23 23 26 / .92); border:1px solid var(--l3-line-strong); border-radius:999px; backdrop-filter:blur(10px); box-shadow:none; }
body.l3 .board__btn{ color:#fff; }
body.l3 .board__btn:hover{ background:var(--white-10); color:#fff; }
body.l3 .board__zoomlabel{ color:var(--l3-soft); }
body.l3 .board__hint{ color:var(--l3-soft); background:rgb(23 23 26 / .92); border:1px solid var(--l3-line); border-radius:999px; padding:6px 12px; }

/* Diagram reading guides */
body.l3 .diagram-guide{ max-width:var(--shell); margin:56px auto 0; padding:0 var(--pad); background:none; border:0; border-radius:0; }
body.l3 .diagram-guide > *{ max-width:none; }
body.l3 .diagram-guide .subkicker{ margin-bottom:16px; }
body.l3 .diagram-guide h3{ font:var(--t-h4); color:#fff; margin:0 0 20px; max-width:var(--l3-read); }
body.l3 .flow-nodes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
body.l3 .flow-nodes li{ background:var(--l3-card); border:0; border-radius:20px; padding:20px 22px; }
body.l3 .flow-nodes li:nth-child(n){ background:var(--l3-card); border:0; }
body.l3 .flow-nodes b{ font:var(--t-b2a); color:#fff; }
body.l3 .flow-nodes p{ font:var(--t-b3); color:var(--l3-soft); margin:8px 0 0; }
body.l3 .diagram-example, body.l3 .diagram-guide > p{ font:var(--t-b3) !important; color:var(--l3-soft); border:0; margin-top:16px !important; padding:0; max-width:var(--l3-read); }
body.l3 .diagram-example b{ color:#fff; }
body.l3 .flow-branches{ border-left:2px solid var(--l3-accent); padding:4px 0 4px 16px; margin-top:16px; }
body.l3 .flow-branches p{ font:var(--t-b3); color:var(--l3-soft); margin:4px 0; }
body.l3 .diagram-guide + figure{ margin-top:32px; }

/* ---------------------------------------------------------------- redrawn diagrams */
.dgram{ padding:10px 10px 14px; }
.dgram__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 10px 0; }
.dgram__tag{ padding:6px 10px; }
.dgram__actions{ display:flex; gap:8px; }
.dgram__btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:20px;
  background:#000; color:#fff; border:0; box-shadow:inset 0 0 0 1px var(--white-20);
  font:var(--t-b3a); cursor:pointer; white-space:nowrap;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.dgram__btn:hover{ transform:scale(1.05); box-shadow:inset 0 0 0 1px var(--white-80); }
.dgram__btn:active{ transform:scale(.97); transition-duration:.15s; }
.dgram__btn .icon{ width:18px; height:18px; }
.dgram__scroll{ border-radius:var(--l3-r-sm); background:#0b0b0d; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; outline:none; }
.dgram__scroll:focus-visible{ box-shadow:inset 0 0 0 2px var(--l3-accent); }
.dg{ display:block; width:100%; height:auto; min-width:0; }
/* One diagram language for all five: node roles, not per-diagram colours. */
.dg text{ font-family:var(--font-sans); fill:#fff; dominant-baseline:central; }
.dg .dg-b{ font-weight:var(--fw-semibold); }
.dg .dg-muted{ fill:#a9a9ad; }
.dg .dg-line{ fill:none; stroke:rgb(255 255 255 / .34); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dg .dg-line--tree{ stroke:rgb(255 255 255 / .24); }
.dg .dg-line--go{ stroke:var(--green-light); }
.dg .dg-head{ fill:rgb(255 255 255 / .7); stroke:none; }
.dg .dg-head--go{ fill:var(--green-light); }
.dg .dg-dot{ fill:rgb(255 255 255 / .45); }
.dg .dg-elabel rect{ fill:#141416; stroke:rgb(255 255 255 / .18); }
.dg .dg-elabel text{ font-family:var(--font-mono); font-size:13px; fill:var(--l3-soft); text-anchor:middle; }
.dg .dg-elabel--go rect{ stroke:rgb(0 255 115 / .55); }
.dg .dg-elabel--go text{ fill:var(--green-light); }
.dg .dg-node rect, .dg .dg-node polygon{ fill:#17171a; stroke:rgb(255 255 255 / .16); stroke-width:1; }
.dg .dg-node--root rect{ fill:rgb(232 59 157 / .16); stroke:var(--l3-accent); }
.dg .dg-node--block rect{ fill:#222226; stroke:rgb(255 255 255 / .34); }
.dg .dg-node--sub rect{ fill:#1d1d21; stroke:rgb(255 255 255 / .26); }
.dg .dg-node--node rect{ fill:#131316; stroke:rgb(255 255 255 / .13); }
.dg .dg-node--step rect, .dg .dg-node--step polygon{ fill:#222226; stroke:rgb(255 255 255 / .3); }
.dg .dg-node--decision polygon{ fill:#0b0b0d; stroke:rgb(255 255 255 / .5); stroke-width:1.2; }
.dg .dg-node--q rect{ fill:rgb(60 158 255 / .12); stroke:rgb(60 158 255 / .6); }
.dg .dg-node--done-soft rect{ fill:rgb(0 255 115 / .07); stroke:rgb(0 255 115 / .45); }
.dg .dg-node--done rect{ fill:rgb(0 255 115 / .18); stroke:var(--green-light); }
.dg .dg-node--next rect{ fill:rgb(232 59 157 / .16); stroke:var(--l3-accent); }
.dg .dg-chip rect{ fill:rgb(255 255 255 / .06); stroke:rgb(255 255 255 / .14); }
.dg .dg-chip text{ fill:var(--l3-soft); font-family:var(--font-sans); }
.dg .dg-lane rect{ fill:rgb(255 255 255 / .025); stroke:rgb(255 255 255 / .09); stroke-dasharray:4 5; }
.dg .dg-lane text{ font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.08em; fill:var(--l3-muted); dominant-baseline:central; }
/* The wide diagrams keep a floor so their type never drops below ~11px;
   narrower than that, the diagram scrolls sideways inside its card. */
/* Diagrams always fit their card: a graph is never cropped behind a sideways
   scroll. On a phone they read small, and a tap opens them full size. */
.dg{ min-width:0 !important; }
.dgram__hint{ display:none !important; align-items:center; gap:8px; margin:0 !important; padding:12px 6px 0; font:var(--t-b3); color:var(--l3-muted); }
.dgram.is-scrollable .dgram__hint{ display:flex; }

/* Research board as a static card: the fixed canvas is scaled to the card's
   width by lisa3.js; Expand opens the same notes in the lightbox. */
.board-static{ position:relative; aspect-ratio:1560 / 1260; overflow:hidden; background:#0b0b0d;
  background-image:radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.2px); background-size:26px 26px; }
.board-static .board__canvas, .lightbox__board .board__canvas{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:auto; }
.lightbox__sizer{ position:relative; overflow:hidden; }
.lightbox__board{ background:#0b0b0d; background-image:radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.2px); background-size:26px 26px; }

/* Era kickers: the six-segment tracker IS the kicker's trailing divider,
   so an era heading carries one line, not a tracker stacked on a rule. */
body.l3 .subkicker--era::after{ content:none; }
.era-bar{ flex:1 1 auto; min-width:120px; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.era-bar i{ height:2px; border-radius:1px; background:var(--l3-line-strong); }
.era-bar i.is-past{ background:rgb(232 59 157 / .45); }
.era-bar i.is-cur{ height:3px; background:var(--l3-accent); box-shadow:0 0 10px rgb(232 59 157 / .6); }
body.l3 .subkicker--era{ color:var(--l3-soft); }

/* ---------------------------------------------------------------- lightbox
   Same viewer as the orbit's ImageLightbox and engine.js: dark wash, one
   round close button, the image rounded at 16px. It also takes a redrawn
   diagram, cloned in as vector. */
body.l3 .lightbox__img{ border-radius:var(--l3-r-sm); }
.lightbox__svg{ max-width:100%; max-height:100%; display:block; border-radius:var(--l3-r-sm); background:#0b0b0d;
  padding:16px; transform-origin:center center; will-change:transform; touch-action:none; user-select:none; cursor:zoom-in; }
.lightbox__svg svg{ display:block; width:auto; height:auto; max-width:calc(100vw - 2 * clamp(20px,5vw,64px) - 32px); max-height:calc(100vh - 2 * clamp(20px,5vw,64px) - 32px); min-width:0 !important; }
.lightbox__svg.is-zoomed{ cursor:grab; }
.lightbox__cap{ position:absolute; left:50%; bottom:clamp(14px,3vw,24px); transform:translateX(-50%); z-index:2; max-width:min(720px, calc(100% - 32px));
  padding:8px 14px; border-radius:999px; background:#17171a; border:1px solid var(--white-20); font:var(--t-b3a); color:#fff; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.lightbox__cap:empty{ display:none; }
body.l3 .lightbox.has-cap{ padding-bottom:84px; }

/* ---------------------------------------------------------------- on-page index */
.l3-index ol{ list-style:none; margin:0; padding:0; }
.l3-index a{ display:block; text-decoration:none; color:var(--l3-muted); transition:color .2s; }
.l3-index a:hover{ color:#fff; }
.l3-index a.is-current{ color:#fff; }
.l3-index__group > a{ font:var(--t-b3a); color:var(--l3-soft); padding:7px 0 7px 14px; position:relative; }
.l3-index__group > a::before, .l3-index__sub > li > a::before, .l3-index__sub2 a::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:transparent; transition:background .2s; }
.l3-index a.is-current::before{ background:var(--l3-accent); }
.l3-index a.is-trail{ color:#fff; }
.l3-index__sub{ margin:0 0 6px 14px !important; }
.l3-index__sub > li > a{ position:relative; font:var(--t-b3); padding:5px 0 5px 14px; }
.l3-index__sub > li > a .n{ font:var(--t-b3c); font-size:12px; color:var(--l3-accent); margin-right:8px; }
.l3-index__sub2{ margin:2px 0 8px 14px !important; border-left:1px solid var(--l3-line); display:none; }
.l3-index__sub > li.is-open > .l3-index__sub2{ display:block; }
.l3-index__sub2 a{ position:relative; font:var(--t-b3); font-size:13px; line-height:1.35; padding:5px 0 5px 14px; }
.l3-index__sub2 a::before{ left:-1px; }

.l3-rail{ position:fixed; z-index:40; left:24px; top:130px; width:200px; max-height:calc(100vh - 160px);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  opacity:0; pointer-events:none; transform:translateX(-8px); transition:opacity .35s var(--ease), transform .35s var(--ease); display:none; }
.l3-rail::-webkit-scrollbar{ display:none; }
.l3-rail.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.l3-rail__label{ font:var(--t-b3b); font-size:12px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); margin:0 0 12px 14px; }
@media (min-width:1280px){ .l3-rail{ display:block; } }

/* Below 1280px: a bar under the header naming where you are, opening the
   same index in a bottom sheet (the site's sheet chrome from chrome.css). */
.l3-mbar{ position:fixed; z-index:45; left:0; right:0; top:var(--topbar-h,59px);
  background:rgb(10 10 12 / .92); backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid var(--l3-line);
  transform:translateY(-110%); opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.l3-mbar[hidden]{ display:block; }
.l3-mbar.is-visible{ transform:none; opacity:1; pointer-events:auto; }
@media (min-width:1280px){ .l3-mbar{ display:none !important; } }
.l3-mbar__btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:var(--shell); margin:auto;
  padding:10px var(--pad); background:none; border:0; color:#fff; cursor:pointer; text-align:left; }
.l3-mbar__where{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.l3-mbar__group{ flex:none; font:var(--t-b3c); font-size:12px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }
.l3-mbar__cur{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:var(--t-b3a); }
.l3-mbar__btn .icon{ color:var(--l3-soft); }
.l3-mbar__progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; }
.l3-mbar__progress span{ display:block; height:100%; width:100%; background:var(--l3-accent); transform-origin:0 50%; transform:scaleX(0); }

.l3-sheet-backdrop{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.l3-sheet-backdrop[hidden]{ display:block; }
.l3-sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }
.l3-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:95; max-height:82vh; display:flex; flex-direction:column;
  background:rgba(10,10,12,.98); backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.1); border-bottom:0; border-radius:32px 32px 0 0; box-shadow:0 -12px 45px rgba(0,0,0,.9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.25,1,.5,1), opacity .3s cubic-bezier(.25,1,.5,1); overscroll-behavior:contain; }
.l3-sheet[hidden]{ display:flex; }
.l3-sheet.is-open{ transform:none; opacity:1; pointer-events:auto; }
.l3-sheet.is-dragging{ transition:none; }
.l3-sheet__handle{ width:40px; height:4px; border-radius:2px; background:var(--white-20); margin:10px auto 0; flex:none; }
.l3-sheet__close{ position:absolute; top:16px; right:16px; z-index:5; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.1); background:#0a0a0c; color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.l3-sheet__close:hover{ background:rgba(255,255,255,.1); color:#fff; }
body.l3 :focus-visible{ outline:2px solid var(--l3-accent); outline-offset:3px; }
.l3-sheet__close:focus:not(:focus-visible){ outline:none; }
.l3-sheet__scroll{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; padding:18px 20px 32px; }
.l3-sheet__title{ font:var(--t-b3b); font-size:14px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); margin:6px 0 16px 14px; }
.l3-sheet .l3-index__group > a{ font:var(--t-b2a); padding:11px 0 11px 14px; }
.l3-sheet .l3-index__sub > li > a{ font:var(--t-b2); padding:9px 0 9px 14px; }
.l3-sheet .l3-index__sub2 a{ font:var(--t-b3); padding:8px 0 8px 14px; }
.l3-sheet .l3-index__sub2{ display:block; }
.l3-sheet .l3-index__sub > li:not(.is-open) > .l3-index__sub2{ display:none; }
/* On a desktop too narrow for the rail, the same list drops down from the bar
   as a panel rather than rising as a phone sheet. */
@media (min-width:1024px){
  .l3-sheet{ left:auto; right:max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad))); bottom:auto;
    top:calc(var(--topbar-h,107px) + 56px); width:420px; max-height:calc(100vh - var(--topbar-h,107px) - 80px);
    border-radius:24px; border-bottom:1px solid rgba(255,255,255,.1); transform:translateY(-8px); }
  .l3-sheet__handle{ display:none; }
  .l3-sheet-backdrop.is-open{ background:rgba(0,0,0,.35); }
}

/* Anchored headings clear the fixed header and the index bar. */
body.l3 [id]{ scroll-margin-top:calc(var(--topbar-h,107px) + 24px); }
@media (max-width:1279px){ body.l3 [id]{ scroll-margin-top:calc(var(--topbar-h,59px) + 64px); } }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1023px){
  .l3-hero__grid{ grid-template-columns:minmax(0,1fr) 240px; }
  .l3-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .l3-stats > div:nth-child(3){ border-left:0; }
  .l3-stats > div:nth-child(n+3){ border-top:1px solid var(--l3-line); }
  .l3-routes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .l3-brief{ grid-template-columns:1fr; }
  body.l3 .scorecard{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.l3 .score{ border-top:1px solid var(--l3-line); }
  body.l3 .score:nth-child(-n+2){ border-top:0; }
  body.l3 .score:nth-child(odd){ border-left:0; }
  body.l3 .score:last-child{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .l3-hero{ padding-top:112px; }
  .l3-hero__grid{ grid-template-columns:1fr; gap:36px; }
  .l3-hero__film{ width:100%; aspect-ratio:1/1; border-radius:24px; }
  .l3-hero__eyebrow{ display:grid; grid-template-columns:36px 1fr; column-gap:12px; row-gap:2px; }
  .l3-hero__mark{ width:36px; height:36px; grid-row:span 2; }
  .l3-hero__eyebrow .l3-dot{ display:none; }
  .l3-hero__film video{ height:140%; top:-6%; object-position:50% 16%; }
  .l3-hero__sub{ font:var(--t-b2); font-weight:300; }
  .l3-h2, body.l3 .sec-head{ font:var(--t-h3); font-weight:var(--fw-regular); font-size:32px; line-height:1.2; }
  .l3-h3{ font:var(--t-h4); }
  .l3-lead, body.l3 .lead{ font:var(--t-b1); font-size:18px; }
  body.l3 .beat{ font:var(--t-b2a); font-size:17px; }
  .l3-routes, .l3-gallery, .l3-pair, .l3-chapters, body.l3 .principles, body.l3 .triad, body.l3 .flow-nodes{ grid-template-columns:1fr; }
  .l3-split{ grid-template-columns:1fr; }
  .l3-split .l3-fig{ max-width:320px; }
  body.l3 .flow{ flex-direction:column; }
  body.l3 .flow .arrow{ transform:rotate(90deg); align-self:flex-start; margin:6px 0 6px 18px; padding:0; }
  body.l3 .timeline__row{ grid-template-columns:1fr; gap:22px; padding-left:26px; }
  body.l3 .timeline__row::before{ width:1px; height:calc(100% - 30px); left:5px; top:6px; }
  body.l3 .timeline__node{ padding-top:0; }
  body.l3 .timeline__node::before{ left:-26px; top:4px; }
  body.l3 .omi{ grid-template-columns:1fr; }
  body.l3 .omi dt{ padding-bottom:0; }
  body.l3 .omi dd{ border-top:0; padding-top:6px; }
  body.l3 .stage{ grid-template-columns:auto 1fr; padding:16px 18px; }
  body.l3 .stage__tag{ grid-column:2; justify-self:start; }
  .l3-shot, body.l3 .frame.frame--has-image, body.l3 .dgram{ border-radius:22px; padding:8px; }
  .dgram__btn span{ display:none; }
  .dgram__btn{ width:40px; padding:0; justify-content:center; }
  .l3-chapter__s{ font:var(--t-b2); }
  body.l3 .reframe .wrap > *{ padding-inline:24px; }
  body.l3 .films{ gap:10px; }
  body.l3 .films figure{ padding:6px; border-radius:20px; }
}

@media (prefers-reduced-motion: reduce){
  .l3-hero__stars .star{ animation:none; opacity:.4; }
  .l3-route, .dgram__btn{ transition:none; }
}

/* ------------------------------------------------ continue the story
   The card at the foot of a case study that hands over to the next one. It
   wears the destination's accent (Auto Attendant: planet 0, orange). */
.l3-inline{ color:inherit; text-decoration:underline; text-decoration-color:var(--l3-accent-line); text-underline-offset:3px; }
.l3-inline:hover{ text-decoration-color:currentColor; }
.l3-next{ --next:var(--orange-light); --next-rgb:232 110 3; padding:clamp(24px,4vw,40px) 0 clamp(72px,10vw,120px); }
.l3-next__card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center;
  padding:clamp(22px,3vw,32px); border-radius:var(--l3-r);
  background:radial-gradient(ellipse 520px 220px at 0% 0%, rgb(var(--next-rgb) / .18), transparent 70%), var(--l3-card-quiet);
  border:1px solid rgb(var(--next-rgb) / .35); color:#fff !important; text-decoration:none; transition:border-color .3s var(--ease, ease); }
.l3-next__card:hover{ border-color:var(--next); }
.l3-next__k{ display:block; margin-bottom:8px; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--next); }
.l3-next__t{ display:block; font:var(--t-h3); color:#fff; margin-bottom:6px; }
.l3-next__d{ display:block; font:var(--t-b3a); color:var(--l3-soft); max-width:600px; }
.l3-next__go{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:var(--next); color:#000; font:var(--t-b3b); white-space:nowrap; }
.l3-next__go .icon{ width:18px; height:18px; }
@media (max-width: 640px){
  .l3-next__card{ grid-template-columns:1fr; }
  .l3-next__go{ justify-self:start; }
}

.dgram__scroll{ cursor:zoom-in; }

/* Lightbox: rendered sharp at every zoom (no pre-rasterised layer), and a
   soft fade on each side that still has content past the screen edge. */
body.l3 .lightbox__img, .lightbox__svg{ will-change:auto; }
.lightbox__fade{ position:absolute; z-index:1; pointer-events:none; opacity:0; transition:opacity .25s; }
.lightbox__fade--l, .lightbox__fade--r{ top:0; bottom:0; width:44px; }
.lightbox__fade--t, .lightbox__fade--b{ left:0; right:0; height:44px; }
.lightbox__fade--l{ left:0; background:linear-gradient(90deg, rgb(10 9 11 / .5), rgb(10 9 11 / .18) 45%, transparent); }
.lightbox__fade--r{ right:0; background:linear-gradient(270deg, rgb(10 9 11 / .5), rgb(10 9 11 / .18) 45%, transparent); }
.lightbox__fade--t{ top:0; background:linear-gradient(180deg, rgb(10 9 11 / .5), rgb(10 9 11 / .18) 45%, transparent); }
.lightbox__fade--b{ bottom:0; background:linear-gradient(0deg, rgb(10 9 11 / .5), rgb(10 9 11 / .18) 45%, transparent); }
.lightbox.more-l .lightbox__fade--l, .lightbox.more-r .lightbox__fade--r,
.lightbox.more-t .lightbox__fade--t, .lightbox.more-b .lightbox__fade--b{ opacity:1; }


/* ------------------------------------------------ one figure card
   Header: label left, free to wrap; actions pinned top-right, never wrapping.
   Buttons carry labels on desktop and are icon-only on phones. */
.dgram__bar{ flex-wrap:nowrap; align-items:center; }
.dgram__tag{ flex:1 1 auto; min-width:0; padding:0 10px; align-self:center; }
/* The maximize glyph runs corner to corner, so it reads larger than other
   icons at the same box size. */
.dgram__btn .icon{ width:15px; height:15px; }
.dgram__actions{ flex:none; }
.is-card{ cursor:zoom-in; }
.is-card .dgram__bar{ cursor:zoom-in; }
@media (max-width: 640px){
  .dgram__btn{ width:40px; padding:0; justify-content:center; gap:0; }
  .dgram__btn span{ display:none; }
}