/* Irys Education Center. Tokens, type scale, radii and shadows are taken from the iqidis product
   app at origin/development, so this page reads as part of core.iqidis.ai rather than as a
   marketing page. Every value has an evidence line in _handoff/education-center/02-app-style-facts.md.
   Override the tokens from the host app to re-theme. */

/* The product's real faces are Hanken Grotesk (body) and Schibsted Grotesk (headings), both
   pulled from Google Fonts by next/font in the app (app/globals.css:51-52, app/layout.tsx:23).
   Neither is self hosted on this site, and this page must make zero external requests, so the
   licensed Telka files stand in: plain Telka for body and headings (it is a normal-width
   grotesk, like both product faces) and Telka Extended kept for the wordmark only, which is
   exactly the app's own rule for Telka Extended (app/globals.css:45-48).
   Weight mapping follows the sitewide mapping in src/app/skin-anton.css:
   Light 300, Regular 400-450, Medium 451-600, Bold 601-749, Black 750-900. */
@font-face{font-family:"Telka";src:url("/fonts/telka/RL-Telka-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Telka";src:url("/fonts/telka/RL-Telka-Regular.woff2") format("woff2");font-weight:400 450;font-style:normal;font-display:swap}
@font-face{font-family:"Telka";src:url("/fonts/telka/RL-Telka-Medium.woff2") format("woff2");font-weight:451 600;font-style:normal;font-display:swap}
@font-face{font-family:"Telka";src:url("/fonts/telka/RL-Telka-Bold.woff2") format("woff2");font-weight:601 749;font-style:normal;font-display:swap}
@font-face{font-family:"Telka";src:url("/fonts/telka/RL-Telka-Black.woff2") format("woff2");font-weight:750 900;font-style:normal;font-display:swap}
@font-face{font-family:"Telka Extended";src:url("/fonts/telka/RL-Telka-Extended-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Telka Extended";src:url("/fonts/telka/RL-Telka-Extended-Regular.woff2") format("woff2");font-weight:400 450;font-style:normal;font-display:swap}
@font-face{font-family:"Telka Extended";src:url("/fonts/telka/RL-Telka-Extended-Medium.woff2") format("woff2");font-weight:451 600;font-style:normal;font-display:swap}
@font-face{font-family:"Telka Extended";src:url("/fonts/telka/RL-Telka-Extended-Bold.woff2") format("woff2");font-weight:601 749;font-style:normal;font-display:swap}
@font-face{font-family:"Telka Extended";src:url("/fonts/telka/RL-Telka-Extended-Black.woff2") format("woff2");font-weight:750 900;font-style:normal;font-display:swap}

:root{
  /* Surfaces: neutral-50 ground, cream, card white (tailwind.config.ts:136,160, card.tsx:12). */
  --bg:#F4F3ED; --surface:#FAF9F6; --raised:#FFFFFF;
  /* Ink: coco, .text-icon-color, body-content (globals.css:311,274, tailwind.config.ts:131). */
  --ink:#3B292E; --ink-2:#78736D; --ink-3:#9C8B8F;
  /* Borders: --border and the .buttonBorder hover step (globals.css:2420,1022). */
  --line:rgba(59,41,46,.12); --line-2:rgba(59,41,46,.25);
  /* Blue: primary, text blue / hover, primary-color-50, primary-color at 40 percent. */
  --blue:#6487D7; --blue-ink:#4B6CBA; --blue-soft:#E8EDFA;--blue-on-coco:#91AEF1; --blue-line:rgba(100,135,215,.40);
  --coco:#3B292E; --coco-2:#4A363B; --on-coco:#F4F3ED; --on-coco-2:#D8CEC8; --chip-coco:#55403F;
  --on-blue:#FAF9F6; --ink-wash:rgba(59,41,46,.05);
  /* Shadows at app level: the row shadow and shadow-md, both coco tinted
     (desk-drawer.tsx:2091, globals.css shadow convention). Plus the selected-row hairline ring. */
  --shadow:0 1px 2px rgba(59,41,46,.06);
  --shadow-lift:0 4px 6px -1px rgba(59,41,46,.10),0 2px 4px -2px rgba(59,41,46,.10);
  --ring:0 0 0 1px rgba(59,41,46,.10);
  --sans:"Telka",system-ui,sans-serif; --display:"Telka",system-ui,sans-serif;
  --wordmark:"Telka Extended","Telka",system-ui,sans-serif;
  /* Map families: the warm wash (Matters, Library, My Desk) and the cool wash
     (what comes back). Tokens, so both flip with the theme. */
  --node-warm:#F7F3F0; --node-warm-line:#E0D3CD; --node-warm-ic:rgba(59,41,46,.06); --node-warm-ic-ink:#3B292E;
  --node-cool:#F4F7FD; --node-cool-line:#DCE4F4;
  /* Radii: button 10px, input and tabs 12px, card rounded-lg 7.5px (button.tsx:8, input.tsx:11). */
  --r:10px; --r-lg:12px; --r-sm:8px; --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--bg:#000000;--surface:#121212;--raised:#1C1B18;--ink:#D1C6C8;--ink-2:#A79A9D;--ink-3:#8C8083;--line:rgba(59,41,46,.30);--line-2:rgba(189,154,164,.40);
  --blue:#6487D7;--blue-ink:#91AEF1;--blue-soft:#1E2940;--blue-line:rgba(145,174,241,.40);
  --coco:#3B292E;--coco-2:#4A363B;--on-coco:#F4F3ED;--on-coco-2:#C9BEB8;--chip-coco:#55403F;--ink-wash:rgba(209,198,200,.10);--node-warm:#262220;--node-warm-line:rgba(216,196,186,.22);--node-warm-ic:rgba(209,198,200,.10);--node-warm-ic-ink:#D1C6C8;--node-cool:#1C2130;--node-cool-line:rgba(145,174,241,.26);
  --shadow:0 1px 2px rgba(0,0,0,.6);--shadow-lift:0 4px 8px 0 rgba(19,19,22,.5),0 2px 4px 0 rgba(19,19,22,.35);--ring:0 0 0 1px rgba(209,198,200,.10);}}
:root[data-theme="dark"]{
  color-scheme:dark;--bg:#000000;--surface:#121212;--raised:#1C1B18;--ink:#D1C6C8;--ink-2:#A79A9D;--ink-3:#8C8083;--line:rgba(59,41,46,.30);--line-2:rgba(189,154,164,.40);
  --blue:#6487D7;--blue-ink:#91AEF1;--blue-soft:#1E2940;--blue-line:rgba(145,174,241,.40);
  --coco:#3B292E;--coco-2:#4A363B;--on-coco:#F4F3ED;--on-coco-2:#C9BEB8;--chip-coco:#55403F;--ink-wash:rgba(209,198,200,.10);--node-warm:#262220;--node-warm-line:rgba(216,196,186,.22);--node-warm-ic:rgba(209,198,200,.10);--node-warm-ic-ink:#D1C6C8;--node-cool:#1C2130;--node-cool-line:rgba(145,174,241,.26);
  --shadow:0 1px 2px rgba(0,0,0,.6);--shadow-lift:0 4px 8px 0 rgba(19,19,22,.5),0 2px 4px 0 rgba(19,19,22,.35);--ring:0 0 0 1px rgba(209,198,200,.10);}

*{box-sizing:border-box}
/* The app runs at a 15px root (globals.css:351, html.ui-text-size-standard). */
html{font-size:15px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* text-base 1rem = 15px, line-height 1.5rem (tailwind.config.ts:208); global tracking -0.01em. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--blue-ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
/* One wrap, one gutter, at every width, so every section shares a left edge. */
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--raised);padding:8px 12px;border-radius:var(--r);z-index:50}
.skip:focus{left:16px}
#view:focus{outline:none}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2,h3,.core h3,.t-title h1{font-family:var(--display)}
/* Telka Extended stays on the wordmark only, the app's own rule (globals.css:45-48,138-141). */
.brand-t{font-family:var(--wordmark)}
p{margin:0}

/* Top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:20px;height:56px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{width:22px;height:22px}
.brand-t{font-size:15px;font-weight:500;color:var(--ink)}
.brand-t b{color:inherit;font-weight:inherit}
.bar-nav{display:flex;gap:2px}
/* Mirrors the sidebar nav item: transparent, coco wash on hover, white plus one hairline ring
   and blue text when selected (app-sidebar.tsx:112-116). */
.bar-nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:13px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid transparent;transition:background .2s,color .2s}
.bar-nav a:hover{color:var(--ink);background:var(--ink-wash)}
.bar-nav a[aria-current="page"]{color:var(--blue-ink);background:var(--raised);box-shadow:var(--ring)}
/* Matches components/ui/input.tsx: cream field, 12px radius, blue focus ring. */
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid rgba(59,41,46,.13);border-radius:var(--r-lg);padding:0 10px 0 12px;width:min(320px,38vw);height:36px;color:var(--ink-3);transition:border-color .15s,box-shadow .15s,background .15s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);background:var(--raised)}
.search input{border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);width:100%;outline:none;height:100%}
.search input::placeholder{color:var(--ink-3)}
.search kbd{font:700 10.5px var(--sans);letter-spacing:.04em;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.results{position:absolute;top:calc(100% + 6px);right:0;width:min(440px,92vw);max-height:min(70vh,560px);overflow:auto;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:4px}
.results a{display:grid;gap:1px;padding:7px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.results a:hover,.results a[aria-selected="true"]{background:var(--blue-soft)}
.results .rt{font-weight:700;font-size:13px}
.results .rs{font-size:12px;color:var(--ink-2)}
.results .empty{padding:12px 10px;color:var(--ink-2);font-size:13px}
@media (max-width:860px){.bar-nav{display:none}.brand-t{display:none}.search{width:auto;flex:1}}
body.embed .bar{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.embed .brand,body.embed .foot{display:none}

/* Shared type. Uppercase micro labels use the app's +0.04em (matters/notes/page.tsx:289). */
.kicker{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-ink)}
.lead{font-size:13px;line-height:1.45;color:var(--ink-2);max-width:78ch}
/* Sections are 32px apart with a hairline between them, and 18px from the subtitle to the
   content. .hsec carries the hairline; .band is the full-width tinted stripe behind the
   film shelf, its own hairline above and the next section's hairline below. */
.sec{padding-block:32px}
.hsec{border-top:1px solid var(--line)}
.band{background:var(--surface)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
/* text-xl = 18.75px, the app's section heading (DigitalSignaturesPage.tsx:883). */
.sec-h h2{font-size:18.75px;line-height:1.25;letter-spacing:-.01em;font-weight:700}
.sec-h p{color:var(--ink-2);font-size:13px;max-width:72ch;margin-top:4px}
/* Button: h-9, px-3, rounded-[10px], text-sm, icons size-4 (button.tsx:8,57). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:13px;line-height:normal;border-radius:var(--r);height:36px;padding:0 12px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn.pri{background:var(--blue);color:var(--on-blue)}
.btn.pri:hover{background:var(--blue-ink)}
/* Secondary is the app's outline variant: buttonBorder, hover darkens the edge and blues the ink. */
.btn.sec2{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sec2:hover{background:transparent;border-color:var(--line-2);color:var(--blue-ink)}
/* The petal glyph, same technique as src/components/brand/IrysPetal.tsx:
   a 16px box (size-4, the app's button icon size) filled with currentColor and masked. */
.btn .petal{display:inline-block;width:16px;height:16px;flex:none;background-color:currentColor;-webkit-mask:url("mark.png") center / contain no-repeat;mask:url("mark.png") center / contain no-repeat}
.btn:active{transform:translateY(1px)}

/* Hero: the source design's scale, kept deliberately. Being framed inside the
   app does not shrink the proportions of the page itself. */
.hero{padding-block:52px 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.hero h1{font-size:clamp(40px,5vw,66px);line-height:1;letter-spacing:-.028em;font-weight:500;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--blue-ink)}
.hero .lead{margin-top:0;font-size:clamp(17px,1.5vw,19px);line-height:1.5;max-width:62ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
@media (max-width:1200px){.hero-grid{grid-template-columns:1fr;gap:18px;align-items:start}.hero{padding-block:40px 8px}}
@media (max-width:640px){.hero h1{font-size:clamp(32px,9vw,40px);max-width:16ch}.hero{padding-block:32px 8px}}

/* Map */
.map-wrap{margin-top:20px;position:relative}
.map{position:relative;display:grid;grid-template-columns:minmax(210px,1fr) minmax(340px,1.45fr) minmax(210px,1fr);gap:0 72px;align-items:center;padding:20px 20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.col{display:grid;gap:10px;position:relative;z-index:2}
.col-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.col.mid{gap:12px}
.wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--line-2);stroke-width:1.6;transition:stroke .3s,stroke-width .3s,opacity .3s}
.wires path.on{stroke:var(--blue);stroke-width:2.2}
.map.focus .wires path:not(.on){opacity:.35}
.wires circle{fill:var(--blue);opacity:.85}
.map.focus .wires circle:not(.on){opacity:.15}

/* Node: the app's list row. rounded-xl, 1px border, white, row shadow, shadow-md on hover
   (desk-drawer.tsx:2091,2224). The -2px lift is kept from the original build. */
.node{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;text-align:left;padding:10px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease),opacity .3s;cursor:pointer;position:relative;box-shadow:var(--shadow)}
.node:hover,.node.on{border-color:var(--blue-line);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.map.focus .node:not(.on):not(.near){opacity:.55}
.node .ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue-ink);display:grid;place-items:center}
.node .ic .i{width:17px;height:17px}
/* The Clio node carries the real Clio mark in the same icon tile, on the same tile wash. */
.node .ic .lgm{width:20px;height:20px;display:block}
.node .nl,.node .ns{display:block}
.node .nl{font-weight:700;font-size:13.5px;line-height:1.3}
.node .ns{font-size:12px;color:var(--ink-2);line-height:1.35;margin-top:1px}
.node.has-chips{display:block}
.nmain{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;color:inherit;text-decoration:none}
.nmain::after{content:"";position:absolute;inset:0;border-radius:inherit}
.node .chips{position:relative;z-index:1;margin-top:8px!important;display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
/* Chip: rounded-full px-3 py-1 text-[11px] (desk-drawer.tsx:1941). The connected-account
   chips carry the real product marks in front of the name, so the name sits back to 600
   and muted ink. Hover is unchanged. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.chip .cl{display:inline-flex;align-items:center;gap:3px;flex:none}
.chip .cl img{width:14px;height:14px;display:block}
.chip:hover,.chip.on{border-color:var(--blue);color:var(--blue-ink);background:var(--blue-soft)}
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair2 .node{grid-template-columns:1fr;gap:8px}

/* The core: still the map's dark centre, sized and padded like an app card. */
.core{display:block;background:var(--coco);color:var(--on-coco);border-radius:var(--r-lg);padding:18px 18px 16px;text-decoration:none;position:relative;overflow:hidden;box-shadow:var(--shadow-lift);transition:transform .35s var(--ease),box-shadow .35s}
.core::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(100,135,215,.45),transparent 70%);filter:blur(8px);pointer-events:none;animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-18%,14%) scale(1.15)}}
.core:hover,.core.on{transform:translateY(-2px)}
.cmain{color:inherit;text-decoration:none;display:block;position:relative}
.cmain::after{content:"";position:absolute;inset:-18px -18px auto -18px;height:calc(100% + 18px)}
.core .ct{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-on-coco)}
.core h3{font-size:22.5px;line-height:1.2;letter-spacing:-.01em;font-weight:800;margin:4px 0 4px;color:var(--on-coco)}
.core p{color:var(--on-coco-2);font-size:13px;max-width:46ch;position:relative}
.core .cchips{z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;position:relative}
.core .cchip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--chip-coco);color:var(--on-coco);font-size:12.5px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:border-color .2s,background .2s}
.core .cchip .i{width:16px;height:16px;color:var(--blue-on-coco)}
.core .cchip:hover,.core .cchip.on{border-color:var(--blue-on-coco);background:var(--chip-coco)}
.core .cfoot{margin-top:10px;font-size:11px;letter-spacing:.04em;color:var(--on-coco-2);position:relative}

/* Inspector */
.insp{margin-top:12px;display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);min-height:112px}
.insp .thumb{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-ink)}
.insp .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.insp .thumb .i{width:26px;height:26px}
.insp h3{font-size:15px;line-height:1.3;letter-spacing:-.01em;font-weight:800}
.insp .claim{color:var(--ink-2);font-size:13px;margin-top:2px}
.insp .meta{font-size:11px;letter-spacing:.04em;color:var(--ink-3);margin-top:4px}
.insp .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.insp-hint{font-size:12px;color:var(--ink-3);margin-top:8px}
@media (max-width:980px){.insp{grid-template-columns:140px minmax(0,1fr)}.insp .acts{grid-column:1/-1;justify-content:flex-start}}

/* Map, small screens: stack the columns and draw simple arrows */
@media (max-width:1060px){
  .map{grid-template-columns:1fr;gap:20px;padding:16px}
  .wires{display:none}
  .col.mid{order:0}
  /* The stub joins one stacked column to the next. It has to anchor to its own
     column: without position:relative it resolved against .map and every stub
     landed in the same wrong place, over the cards. */
  .col{position:relative}
  .col+.col::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
                    top:-16px;width:2px;height:10px;background:var(--blue-line)}
  /* Two up on a phone, three at most once there is room. */
  .col.in,.col.out{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col.in .col-h,.col.out .col-h{grid-column:1/-1}
}
@media (min-width:640px) and (max-width:1060px){
  .col.in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .col.out{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1060px){.insp,.insp-hint{display:none}}
@media (max-width:520px){.core .cchips{grid-template-columns:1fr}.insp{grid-template-columns:1fr}.insp .thumb{max-width:260px}}

/* Rules */
/* No border-bottom: the next section's hairline closes this block. */
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px;border-top:1px solid var(--line)}
.rule{padding:14px 16px 16px 0;display:grid;gap:3px}
.rule + .rule{padding-left:16px;border-left:1px solid var(--line)}
.rule b{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.rule b .i{color:var(--blue-ink);width:16px;height:16px}
.rule span{font-size:12.5px;color:var(--ink-2)}
@media (max-width:900px){.rules{grid-template-columns:1fr 1fr}.rule:nth-child(3){padding-left:0;border-left:0}.rule:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.rules{grid-template-columns:1fr}.rule{padding-left:0!important;border-left:0!important}.rule+.rule{border-top:1px solid var(--line)}}

/* Start path. The numbered circles stay on the blue line so it still reads as a journey;
   under each circle the step is a card, and the whole card is the link. The only string
   added to this page is the "Open guide" footer. */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
/* The line runs from the centre of circle 1 to the centre of circle 6, so it stops on the
   last step instead of running off the row. right = one column width minus the 18px the
   circle's centre sits in from its own left edge. */
.path::before{content:"";position:absolute;left:18px;right:calc((100% - 60px)/6 - 18px);top:18px;height:2px;background:var(--blue-line)}
.path li{position:relative;z-index:1;display:grid}
.path a{display:grid;grid-template-rows:auto 1fr;gap:10px;text-decoration:none;color:var(--ink)}
.path .dot{width:36px;height:36px;border-radius:999px;background:var(--raised);border:2px solid var(--blue);color:var(--blue-ink);display:grid;place-items:center;font-weight:800;font-size:13px;justify-self:start;transition:background .25s,color .25s,border-color .25s}
.path a:hover .dot,.path a:focus-visible .dot{background:var(--blue);color:var(--on-blue)}
/* The card: the app's list-row recipe, one hairline and the flat row shadow. */
.path .pcard{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 12px 0;transition:border-color .2s,box-shadow .3s var(--ease)}
.path a:hover .pcard,.path a:focus-visible .pcard{border-color:var(--blue-line);box-shadow:var(--shadow-lift)}
.path .pt{font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.01em}
.path .ps{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:2px;padding-bottom:10px;flex:1}
.path .popen{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--blue-ink);border-top:1px solid var(--line);margin-inline:-12px;padding:8px 12px;border-radius:0 0 var(--r-lg) var(--r-lg);transition:background .2s}
.path a:hover .popen,.path a:focus-visible .popen{background:var(--blue-soft)}
.path .pgo{width:14px;height:14px;margin-left:auto;transition:transform .2s var(--ease)}
.path a:hover .pgo{transform:translateX(3px)}
@media (max-width:900px){.path{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.path::before{display:none}}
@media (max-width:520px){.path{grid-template-columns:1fr}}

/* Film shelf. Segmented control copied from components/ui/tabs.tsx: parchment track, 3px pad,
   36px tall, 12px radius; the active pill is white with shadow-sm. */
.tabs{display:inline-flex;background:var(--bg);border:1px solid transparent;border-radius:var(--r-lg);padding:3px;height:36px}
.tabs button{font:inherit;font-weight:700;font-size:12.5px;border:0;background:transparent;color:var(--ink-2);padding:0 12px;border-radius:var(--r);cursor:pointer;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--shadow)}
.shelf-wrap{position:relative}
.shelf-nav{display:flex;gap:6px}
.shelf-nav button{width:36px;height:36px;border-radius:var(--r);border:1px solid var(--line);background:var(--raised);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.shelf-nav button:hover{border-color:var(--line-2);color:var(--blue-ink)}
.shelf-nav button:disabled{opacity:.35;cursor:default}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 48px)/4));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;scrollbar-width:thin}
/* Tile: poster with the play chip on it, then the topic as a caps kicker and the film's
   claim as the title. Nothing else. */
.film{scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.film:hover{border-color:var(--blue-line);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.film .pv{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--coco)}
.film .pv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.film:hover .pv img{transform:scale(1.035)}
.film .play{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:rgba(20,14,16,.72);color:#fff;border-radius:999px;padding:4px 10px 4px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.film .play svg{width:16px;height:16px;fill:#fff}
.film .fb{display:block;padding:12px 14px 14px}
.film .ft{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.film .fs{display:block;font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-top:3px}

/* Topic index */
/* Topic index: group name and subtitle on the left, the rows on the right. No boxes. A row
   is bare at rest and only lights up on hover, so the list stays quiet and well spaced. */
.groups{display:grid;gap:0}
.grp{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding-block:22px;border-top:1px solid var(--line)}
.groups .grp:first-child{border-top:0;padding-top:4px}
.grp h3{font-size:15px;line-height:1.3;letter-spacing:-.01em;font-weight:800}
.grp .gs{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
.row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;margin-inline:-10px;border:1px solid transparent;border-radius:var(--r);text-decoration:none;color:var(--ink);transition:background .2s,border-color .2s}
.row:hover{background:var(--blue-soft);border-color:var(--blue-line)}
.row .ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue-ink);display:grid;place-items:center}
.row .rn{font-weight:700;font-size:14px;line-height:1.3}
.row .rb{font-size:12.5px;color:var(--ink-2);line-height:1.35}
/* Badge: rounded-full, text-xs, parchment chip (badge.tsx:9,14). Fills solid on hover. */
.row .badge{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--blue-ink);background:var(--blue-soft);border-radius:999px;padding:2px 8px;white-space:nowrap;align-self:start;margin-top:2px;transition:background .2s,color .2s}
.row:hover .badge{background:var(--blue);color:var(--on-blue)}
.row:hover .ic{background:var(--raised)}
.row.soon{cursor:default}
.row.soon:hover{background:transparent;border-color:transparent}
.row.soon .ic,.row.soon:hover .ic{background:var(--surface);color:var(--ink-3)}
.row.soon .rn{color:var(--ink-2)}
.row.soon .badge,.row.soon:hover .badge{background:var(--surface);color:var(--ink-3)}
/* Under 1100px the pill drops under the blurb rather than squeezing the title. */
@media (max-width:1100px){.rows{grid-template-columns:repeat(2,minmax(0,1fr))}.row{grid-template-columns:32px minmax(0,1fr)}.row .badge{grid-column:2;justify-self:start;margin-top:8px}}
@media (max-width:700px){.grp{grid-template-columns:1fr;gap:12px}.rows{grid-template-columns:1fr}}

/* Topic page */
/* The masthead and the two players own the first fold. 68px top padding, plus the
   equalised masthead height below, plus the 48px gap above the films, put the top of
   "The guide" at about 750px at 1280x800 on every film topic, which keeps the heading
   in the fold and the first parts kicker well under it. */
.t-head{padding-block:68px 0}
.crumbs{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.crumbs a{color:var(--ink-2);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--blue-ink)}
/* Masthead: icon tile then title on one row, claim under it, and the lede plus the
   Time / You need meta in the right-hand column, top-aligned with the title row. */
.t-title{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;margin-top:14px}
.t-title h1{grid-column:2;grid-row:1;font-size:36px;line-height:1.15;letter-spacing:-.01em;font-weight:800}
.t-claim{grid-column:2;grid-row:2;font-size:20px;line-height:1.35;letter-spacing:-.01em;font-weight:600;color:var(--blue-ink);margin-top:8px;max-width:52ch}
.t-lede{margin-top:0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:none}
.t-meta{display:flex;gap:6px 24px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.t-meta b{color:var(--ink);font-weight:700}
.t-ic{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:var(--r);background:var(--blue-soft);color:var(--blue-ink);display:grid;place-items:center}
.t-ic .i{width:21px;height:21px;stroke-width:1.5}
@media (min-width:900px){
  .t-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,40%);column-gap:48px;row-gap:14px;align-items:start}
  .t-head .crumbs{grid-column:1;grid-row:1}
  .t-head .t-title{grid-column:1;grid-row:2;margin-top:0}
  .t-head .t-side{grid-column:2;grid-row:2;padding-top:2px}
  /* The lede and the meta are the only parts that change length from topic to topic, so
     the masthead was 72px shorter on the short topics than on the long ones and "The
     guide" landed in a different place on every page. This floor is the height of the
     tallest one (Integrations: three lede lines and a wrapped meta row), so every topic
     now matches the tallest instead of any topic being cut down. It sits on .t-side, not
     on .t-head, so the "coming soon" topics, which have no side column, keep their short
     masthead instead of gaining a block of empty space. */
  .t-head .t-side{min-height:153px}
}
@media (max-width:899px){.t-side{margin-top:14px}}
@media (max-width:640px){.t-title h1{font-size:26px}.t-claim{font-size:16px}}
/* The two films span the full wrap width, 24px apart, so each one reads as its own card. */
.films2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.player{display:grid;gap:8px}
.player .vwrap{aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--coco);box-shadow:var(--shadow-lift)}
.player video,.player iframe{width:100%;height:100%;display:block;border:0;background:#000}
.player .pl{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.player .pl b{font-size:13.5px;font-weight:700}
.player .pl span{font-size:12px;color:var(--ink-2);white-space:nowrap}
@media (max-width:820px){.films2{grid-template-columns:1fr}}
/* "The guide" is a full width heading with its intro line and the two buttons under
   it, then the parts columns 32px below. No side column, so the heading reads as the
   start of the section and the step columns stay off the first fold. */
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.guide-side{display:grid;gap:10px}
.guide-side h2{font-size:26.25px;line-height:1.2;letter-spacing:-.01em;font-weight:800}
.guide-side p{color:var(--ink-2);font-size:13px;max-width:72ch}
.guide-side .acts{display:flex;gap:8px;flex-wrap:wrap}
.parts{display:grid;gap:20px 32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.part h3{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.part ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.part a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;margin-inline:-10px;border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;transition:background .2s}
.part a:hover{background:var(--ink-wash)}
.part a .n{width:24px;height:24px;border-radius:999px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.part.ref a .n{background:var(--blue-soft);color:var(--blue-ink)}
.part a .go{color:var(--ink-3);opacity:0;transition:opacity .2s,transform .2s var(--ease)}
.part a:hover .go{opacity:1;transform:translateX(3px)}
@media (max-width:900px){.guide{gap:20px}}
.next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.next a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:var(--raised);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .3s}
.next a:hover{border-color:var(--blue-line);box-shadow:var(--shadow-lift)}
.next a:last-child{text-align:right}
.next small{font-size:11px;letter-spacing:.04em;color:var(--ink-3);font-weight:700;text-transform:uppercase}
.next b{font-size:13.5px;font-weight:700}
.soon-note{margin-top:20px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--ink-2);font-size:13px;max-width:72ch}

/* Films page */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px 16px}

.foot{margin-top:56px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:16px 24px;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}

/* View transitions */
.view-in{animation:vin .5s var(--ease) both}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Brand badge: the blue app icon, rounded to a circle. */
.brand-mark{width:26px;height:26px;flex:none;border-radius:50%;display:block}

/* ---- Map families -------------------------------------------------------
   Three groups, told with a wash rather than a colour, so the map still reads
   as one calm surface. Matters, Library and My Desk STAND WITH Workbench, they
   are not more inputs, which is the thing the old all-white map could not say.
   Wires, travelling dots and the hover/focus states are deliberately untouched. */
.col.mid > .node, .pair2 .node{background:var(--node-warm);border-color:var(--node-warm-line)}
.col.mid > .node .ic, .pair2 .node .ic{background:var(--node-warm-ic);color:var(--node-warm-ic-ink)}
.col.out .node{background:var(--node-cool);border-color:var(--node-cool-line)}