@font-face { font-family: 'JetBrains Mono'; src: url('../vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../vendor/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root { --orange: #ff6a13; --ink: #f4f1ea; --blue: #0b17c0; --paper: #f6faff; --text: #0b17c0; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--blue); overflow-x: clip; }   /* blue from the first frame; clip: the eagle flies past the edges, never a wider page */
html.booting #content, html.booting .ft, html.cms-wait main.page { visibility: hidden; }   /* nothing of the page shows before the first layout */
/* ---- typography: roles, set by a "mix" (html[data-font], panel Typography; compared side by side in type-mixes.html).
   display = titles · text = paragraphs · label = terminal voice (tabs, crumbs, buttons, meta) · accent = a few words
   (the name) · italic = the email and italic words. Every mix only uses weights that exist (no faked bold). ---- */
:root, [data-font] {
  --font-display: 'Instrument Serif', Georgia, serif; --display-style: normal; --w-display: 400; --track-display: -.01em;
  --font-text: 'Switzer', 'Helvetica Neue', sans-serif; --w-text: 400; --w-strong: 600;
  --font-label: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-accent: 'Grain Serif 48', Georgia, serif;
  --font-italic: 'Instrument Serif', Georgia, serif; --w-italic: 400;
}
[data-font="cabinet"] { --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif; --w-display: 800; --track-display: -.035em; }
[data-font="inst-it-switzer"] { --display-style: italic; }
[data-font="inst-satoshi"] { --font-text: 'Satoshi', 'Helvetica Neue', sans-serif; --w-strong: 700; }
[data-font="inst-it-satoshi"] { --display-style: italic; --font-text: 'Satoshi', 'Helvetica Neue', sans-serif; --w-strong: 700; }
[data-font="grain-switzer"] { --font-display: 'Grain Serif 48', Georgia, serif; --track-display: 0em; --font-italic: 'Grain Serif 48', Georgia, serif; }
[data-font="switzer"] { --font-display: 'Switzer', 'Helvetica Neue', sans-serif; --w-display: 700; --track-display: -.035em; --font-italic: 'Grain Serif 48', Georgia, serif; }
[data-font="satoshi"] { --font-display: 'Satoshi', 'Helvetica Neue', sans-serif; --w-display: 900; --track-display: -.04em; --font-text: 'Satoshi', 'Helvetica Neue', sans-serif; --w-strong: 700; --font-italic: 'Grain Serif 48', Georgia, serif; }
[data-font="general"] { --font-display: 'General Sans', 'Helvetica Neue', sans-serif; --w-display: 600; --track-display: -.035em; --font-text: 'General Sans', 'Helvetica Neue', sans-serif; --font-italic: 'Grain Serif 48', Georgia, serif; }
body { font-family: var(--font-text); font-weight: var(--w-text); color: var(--text); }   /* no overflow here: html clips sideways (an overflow on body would make it the scroller and break position: sticky) */
h1, h2, h3, .display { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--w-display); letter-spacing: var(--track-display); }
b, strong { font-weight: var(--w-strong); }
/* labels, numbers, the terminal voice: monospace, one size, one tracking, uppercase */
.tab-label, .tab-vlabel, .crumb, .meta-line, .btn, .pl, .pl button, .when, .tl-when,
.branch-card, .ft-meta, .sh-meta, .type-cursor, .cursor, .box > span {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }
/* inline styles (also what the CMS text editor writes): italic / bold keep the current font; f-* switch the font of a
   few words. Every family here has a real italic, except General Sans (to add if that mix is chosen) */
em, i { font-style: italic; }
.accent, .f-grain { font-family: var(--font-accent); font-weight: 400; }
.f-text { font-family: var(--font-text); }
.f-title { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); }
.f-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.f-mono { font-family: var(--font-label); letter-spacing: 0; }

/* layers, bottom to top: page (photo canvas, content, eagle), bar backdrop, tabs canvas, tab hit areas */
#world { position: relative; width: 100vw; z-index: 1; overflow-x: clip; }   /* the eagle flies past the edges: clipped here (clip, not hidden: no scroll container) */
#world::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--sky, #0b17c0); }  /* sky above the page during the intro rise */
#scene { position: absolute; left: 0; top: 0; display: block; z-index: 0; }          /* photo: scrolls natively with the page */
#content { position: relative; z-index: 1; }
#bar-bg { position: fixed; left: 0; top: 0; width: 100vw; background: var(--paper); opacity: 0; pointer-events: none; z-index: 4; }
#tabs-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; z-index: 5; }
#tabs { position: fixed; left: 0; top: 0; z-index: 6; }
canvas.eagle { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }   /* in the page, so under the bar */

/* intro, typed in the sky */
#intro { position: absolute; left: var(--gutter); top: 12vh; max-width: 70vw; color: var(--ink); }
/* the welcome line: the sentence in the text font, the name in Grain Serif 48 (Yann's typeface), bigger */
.hello { font-family: var(--font-text); font-size: var(--fs-l); font-weight: 500; line-height: var(--lh-l); letter-spacing: -.02em;
  opacity: 0; transition: opacity 260ms ease-out; }
.hello .accent, .hello span[style] { letter-spacing: 0; line-height: .8; }
#intro.in .hello { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hello { transition: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* tabs: the visuals live in the tabs canvas, these are the hit areas (moved every frame by JS) */
.tab { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; outline: none; cursor: pointer; text-decoration: none; }
.tab:focus-visible { box-shadow: 0 0 0 1px var(--orange); }
/* inner pages: an orange indicator under the current section's tab (slides between pages, see below) */
.tab-indicator { position: absolute; left: 0; top: 0; height: 2px; background: var(--orange); pointer-events: none; view-transition-name: tab-indicator; }
html.vt-no-bar #bar-bg, html.vt-no-bar #tabs-gl, html.vt-no-bar #tabs, html.vt-no-bar .tab-indicator, html.vt-no-bar .crumb { view-transition-name: none; }
.tab-label { font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
/* label styles (panel: Tabs > Label style) */
#tabs[data-label="chip"] .tab-label { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); background: var(--blue); color: var(--ink); padding: 4px 7px 3px; line-height: 1; }
#tabs[data-label="difference"] .tab-label { color: #fff; mix-blend-mode: difference; }
#tabs[data-label="below"] .tab-label { position: absolute; left: 0; top: 100%; margin-top: 7px; color: var(--text); }
/* vertical name beside the block in the hero, reads bottom to top */
.tab-vlabel { position: absolute; right: 100%; top: 0; margin-right: 7px; writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--orange); font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }

/* hover preview (hero only): one branch, one fold, a card. ~200 ms, transitions so it can reverse mid-way;
   exit faster than enter */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --gutter: 6vw; }
.branch { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.branch .line { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 160ms var(--ease-out); }
.branch .node { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity 100ms ease-out; }
.branch.in .line { stroke-dashoffset: 0; }
.branch.in .node { opacity: 1; }
.branch-card { position: absolute; line-height: 1.5; color: var(--ink); pointer-events: none;
  opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path 120ms ease-out, opacity 120ms ease-out; }
.branch-card.in { opacity: 1; clip-path: inset(0 0 0 0); pointer-events: none; transition: clip-path 200ms steps(5) 60ms, opacity 80ms ease-out 60ms; }
.branch-card .img { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.branch-card .img > .cms-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.branch-card .meta { display: flex; justify-content: space-between; opacity: .75; margin-bottom: 6px; }
.flip .branch .line, .flip .branch .node { stroke: var(--text); }
.flip .branch-card { color: var(--text); }


/* landing #content + placeholder images (until the real ones) */
#content { padding: 10vh var(--gutter) 24vh; }
.ph-0 { background: repeating-linear-gradient(90deg, #ff6a13 0 6px, #0b17c0 6px 14px); }
.ph-1 { background: radial-gradient(circle at 30% 40%, #f4f1ea 0 18%, #0b17c0 19% 100%); }
.ph-2 { background: linear-gradient(135deg, #0b17c0, #6f8cff 55%, #f4f1ea); }
.ph-3 { background: repeating-linear-gradient(0deg, #f4f1ea 0 3px, #0b17c0 3px 9px); }

/* dev panel */
.lil-gui.root { position: fixed; top: auto; bottom: 12px; right: 12px; max-height: 70vh; z-index: 20; --font-family: var(--mono); --font-size: 10.5px; }

/* reduced motion: fewer and gentler, not zero. Keep fades, drop movement */
@media (prefers-reduced-motion: reduce) {
  .branch .line { stroke-dashoffset: 0; transition: none; }
  .branch-card, .branch-card.in { clip-path: none; transition: opacity 150ms ease-out; }
}
/* hover affordances only where hover exists */
@media not ((hover: hover) and (pointer: fine)) { .tab { cursor: default; } }

/* ---- page to page (cross-document view transitions, Chrome / Edge / Safari 18.2+; others just navigate) ----
   The bar keeps its place (each part is its own group, identical on both pages, so nothing moves), the orange
   indicator slides to the new tab, the content slides in the direction of the tab that was clicked. */
@view-transition { navigation: auto; }
#bar-bg { view-transition-name: bar-bg; }
#tabs-gl { view-transition-name: tabs-gl; }
#tabs { view-transition-name: tabs; }
.crumb { view-transition-name: crumb; }
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: 160ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 300ms var(--ease-out) both vt-fade-in; }
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(40px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 120ms !important; }
  html:active-view-transition-type(forward)::view-transition-new(root), html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-fade-in; }
  html:active-view-transition-type(forward)::view-transition-old(root), html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-fade-out; }
}

/* ---- pixel-burn arrival from a landing block: the hand-off mosaic covers the page from the first paint ---- */
.entry-burn { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }

/* ---- small site-wide details in the DA ---- */
::selection { background: var(--orange); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: rgba(244, 241, 234, .35) transparent; }
html:has(.inner.paper) { scrollbar-color: rgba(11, 23, 192, .35) transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }

/* ---- type scale: six sizes, one per level of the hierarchy, used everywhere ---- */
:root {
  --fs-xl: clamp(44px, 5.6vw, 96px);      /* the email, big display text */
  --fs-page: calc(var(--fs-xl) * 1.52);   /* page titles (Grain Serif 48), Yann's size */
  --fs-section: calc(var(--fs-xl) * 1.32);/* section titles: My Work categories, About / Side projects sections */
  --fs-l: clamp(28px, 3vw, 48px);         /* section titles, timeline steps, the welcome line, player title */
  --fs-m: clamp(19px, 1.5vw, 24px);       /* card titles, networks */
  --fs-body: 17px;                        /* paragraphs */
  --fs-small: 14px;                       /* captions, secondary text */
  --fs-label: 11px;                       /* monospace labels (uppercase) */
  --track-label: .1em;
  --lh-xl: .95; --lh-l: 1.04; --lh-m: 1.2; --lh-body: 1.6; --lh-small: 1.5;
  /* spacing: one scale for every gap, margin and padding */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* legacy names */
  --fs-display: var(--fs-xl); --fs-h1: var(--fs-xl); --fs-h2: var(--fs-l); --fs-h3: var(--fs-m);
}
.t-display, .t-h1 { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--w-display); letter-spacing: var(--track-display); font-size: var(--fs-xl); line-height: var(--lh-xl); }
.t-h2 { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--w-display); letter-spacing: var(--track-display); font-size: var(--fs-l); line-height: var(--lh-l); }
.t-h3 { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--w-display); letter-spacing: var(--track-display); font-size: var(--fs-m); line-height: var(--lh-m); }
.t-body { font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--font-text); font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* ---- landing timeline (js/timeline.js): one straight line going down, a square dot per age, one line of text each.
   The line fills as you scroll, ages already passed are lit. Gap and text size: CSS vars, editable in the CMS. ---- */
.tl { --tl-gap: 5vh; --tl-fs: 24px; --tl-pad: clamp(40px, var(--gutter), 96px); position: relative; max-width: 1040px; margin: 0 auto; padding: 4vh 0 6vh; --tl-x: 0px; }
.tl-line { position: absolute; left: var(--tl-x); top: var(--tl-top, 0); height: var(--tl-h, 100%); width: 1.5px; margin-left: -.75px; background: color-mix(in srgb, currentColor 22%, transparent); }
.tl-line i { position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(var(--p, 0)); }
.tl-list { list-style: none; display: grid; gap: var(--tl-gap); padding-left: var(--tl-pad); }
.tl-item { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: var(--sp-4); align-items: baseline; font-size: var(--tl-fs);
  opacity: .38; transition: opacity 260ms ease-out; }
.tl-item.on { opacity: 1; }
.tl-dot { position: absolute; left: calc(-1 * var(--tl-pad)); top: calc(.62em - 5.5px); width: 11px; height: 11px; margin-left: -5.5px; background: var(--page, var(--blue));
  border: 1.5px solid currentColor; transition: background 200ms ease-out, border-color 200ms ease-out; }
.tl-item.on .tl-dot { background: var(--orange); border-color: var(--orange); }
.tl-item .tl-when { font-size: .8em; letter-spacing: 0; color: var(--orange); font-weight: 700; margin: 0; }
.tl-text { font-family: var(--font-text); font-size: 1em; line-height: 1.35; max-width: 42ch; }
/* "full potential": a plain technical graph, a few possible trajectories leaving the same point; drawn once in view */
/* placed a bit loose: tucked under the last line (its top sits behind "full potential"), slightly off and tilted;
   the orange line shoots out of it, up behind the previous lines (text stays above it) */
.tl-graph { position: relative; z-index: 0; margin: calc(-1.6 * var(--tl-fs) - 76px) 0 0 calc(var(--tl-pad) + 2.6 * var(--tl-fs) + var(--sp-4) + 5.5 * var(--tl-fs));
  width: var(--gw, min(340px, calc(100% - var(--tl-pad)))); color: inherit; transform: rotate(-1.5deg); transform-origin: left bottom; pointer-events: none; }
.tl-item { z-index: 1; }
.tl-graph svg { display: block; width: 100%; aspect-ratio: 1; height: auto; overflow: visible; }
/* a rough sketch: wobbly lines going every way, one orange shooting up */
.tl-graph .g-axis { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tl-graph .g-c { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tl-graph .g-c2 { stroke: var(--orange); stroke-opacity: 1; stroke-width: 2.2; }
.tl-graph text { fill: currentColor; font: 12px var(--font-label); opacity: .8; }
.tl-graph.drawn .g-c { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms var(--ease-out); }
.tl-graph.drawn .g-c3 { transition-delay: 80ms; } .tl-graph.drawn .g-c4 { transition-delay: 160ms; } .tl-graph.drawn .g-c5 { transition-delay: 240ms; }
.tl-graph.drawn .g-c6 { transition-delay: 320ms; } .tl-graph.drawn .g-c2 { transition-delay: 460ms; transition-duration: 1300ms; }
@media (prefers-reduced-motion: reduce) { .tl-graph .g-c { stroke-dashoffset: 0; transition: none; } }

/* ---- CMS edit mode (js/cms.js, localhost only) ---- */
.cms-bar { position: fixed; left: 14px; bottom: 14px; z-index: 9999; display: flex; align-items: center; gap: 6px; font: 10px/1 var(--mono); letter-spacing: .1em; }
.cms-bar button { font: inherit; letter-spacing: inherit; padding: 8px 10px; border: 1px solid rgba(244, 241, 234, .5); background: #0b17c0; color: #f4f1ea; cursor: pointer; }
.cms-bar button:hover { background: #f4f1ea; color: #0b17c0; }
.cms-bar button:disabled { opacity: .35; pointer-events: none; }
.cms-bar:not(.on) [data-a=save], .cms-bar:not(.on) [data-a=discard] { display: none; }
.cms-state { color: #f4f1ea; background: #0b17c0; padding: 8px 6px; }
.cms-bar:not(.on) .cms-state { display: none; }
.cms-on .cms-edit { outline: 1px dashed color-mix(in srgb, var(--orange) 70%, transparent); outline-offset: 4px; cursor: text; min-width: 1ch; }
.cms-on .cms-edit:focus { outline: 1.5px solid var(--orange); }
.cms-on .cms-edit:empty::before { content: 'Click to write'; opacity: .4; }
.cms-zone { position: relative; }
.cms-chips { position: absolute; top: 6px; right: 6px; z-index: 5; display: flex; gap: 4px; }
.cms-item-chips { position: static; justify-content: flex-start; flex-wrap: wrap; margin-top: var(--sp-3); }
.cms-chip { font: 10px/1 var(--mono); letter-spacing: .08em; padding: 6px 7px; border: 0; background: var(--orange); color: #0b17c0; cursor: pointer; }
a.cms-zone > .cms-chip { position: absolute; top: 4px; right: 4px; }
.cms-drop { outline: 2px solid var(--orange) !important; }
.cms-busy { opacity: .5; }
.cms-media { display: block; width: 100%; height: auto; }
.box.has-media > span { display: none; }
.box > .cms-media { position: absolute; inset: 0; height: 100%; object-fit: cover; }
html:not(.cms-on) .cms-chips, html:not(.cms-on) .cms-chip { display: none; }
.cms-on [data-cms-list] > :not(template) { position: relative; }
.cms-layout { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; gap: 4px; align-items: center; white-space: nowrap; z-index: 30; }
.cms-layout .cms-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; }
.cms-layout input[type=range] { width: 110px; accent-color: #0b17c0; }
.cms-layout select { appearance: auto; }
.cms-move { cursor: grab; }
.cms-move:active { cursor: grabbing; }
html:not(.cms-on) .cms-layout { display: none; }
#intro.cms-zone { pointer-events: auto; }

/* ---- details (panel: Details), taken from the Nous review and made ours ---- */
/* static film grain over everything (one 128 px tile drawn once in js/nav.js): gives the flat blue some matter */
html.grain::after { content: ''; position: fixed; inset: 0; z-index: 25;   /* over the page and the bar, under the player (30) */
  pointer-events: none; background: var(--grain) repeat; background-size: 128px; opacity: calc(var(--grain-o, .05) * .6); }   /* no blend mode: cheap to composite */
/* buttons: on hover a short bright arc travels around the border (masked conic gradient), once around per 2.2 s */
@property --arc { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.btn-arc .btn { position: relative; }
html.btn-arc .btn::after { content: ''; position: absolute; inset: -1px; padding: 1.25px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--arc), transparent 0 72%, var(--orange) 84%, #fff 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 160ms ease-out; }
@media (hover: hover) and (pointer: fine) { html.btn-arc .btn:hover::after { opacity: 1; animation: btn-arc 2.2s linear infinite; } }
@keyframes btn-arc { to { --arc: 360deg; } }
@media (prefers-reduced-motion: reduce) { html.btn-arc .btn:hover::after { animation: none; opacity: 0; } }

/* CMS formatting bar (appears above selected text in edit mode) */
.cms-fmt { position: fixed; z-index: 10000; display: flex; align-items: center; gap: 2px; padding: 3px; background: #0b17c0; border: 1px solid rgba(244, 241, 234, .6); box-shadow: 0 6px 18px rgba(0, 0, 30, .35); }
.cms-fmt[hidden] { display: none; }
.cms-fmt button { font: 10px/1 var(--mono); letter-spacing: .08em; padding: 7px 8px; border: 0; background: transparent; color: #f4f1ea; cursor: pointer; }
.cms-fmt button b, .cms-fmt button em { font: inherit; }
.cms-fmt button b { font-weight: 700; }
.cms-fmt button em { font-style: italic; }
.cms-fmt button:hover { background: rgba(244, 241, 234, .15); }
.cms-fmt button.on { background: #f4f1ea; color: #0b17c0; }
.cms-fmt .sep { width: 1px; height: 18px; margin: 0 3px; background: rgba(244, 241, 234, .3); }
.cms-scale-ctl { position: fixed; z-index: 30; }
html:not(.cms-on) .cms-scale-ctl, .crumb[hidden] + .cms-scale-ctl { display: none; }
/* terminal cursor after the typed name (landing welcome): blinks when idle, solid while typing */
.type-block { display: inline-block; width: .32em; height: .7em; margin-left: .06em; vertical-align: baseline; background: var(--orange); animation: blink 1s steps(1) infinite; }
.type-block.typing { animation: none; }
@media (prefers-reduced-motion: reduce) { .type-block { animation: none; } }
.cms-on .branch-card.in { pointer-events: auto; }   /* edit mode: drop a video on the preview */
.cms-add-video { margin-top: var(--sp-4); }
.cms-vars { position: absolute; left: 0; bottom: 100%; display: flex; gap: 4px; z-index: 30; }
.cms-vars input[type=range] { width: 110px; accent-color: #0b17c0; }
html:not(.cms-on) .cms-vars { display: none; }
/* after typing: three blinks, then the block goes away (js/main.js removes it) */
.type-block.done { animation: blink-out .8s steps(1) 3 forwards; }
@keyframes blink-out { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-block.done { animation: blink-out .01s 1 forwards; } }
/* the graph can be moved / resized by hand in the CMS (data-cms-drag) */
.tl-graph { translate: var(--dx, 0) var(--dy, 0); }
.cms-on .tl-graph { pointer-events: auto; z-index: 2; }   /* edit mode: its MOVE / SIZE bar must sit above the text it tucks under */

/* landing previews: About photo re-printed in dither, Contact icons stacked 2 x 2, a little overlapping and floating */
.branch-card .img > .card-dither { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.branch-card .img > .pa { position: absolute; inset: 0; }
.cx-card { position: absolute; inset: 0; display: grid; place-items: center; }
.cx-card .cx-net { position: absolute; left: 50%; top: 50%; }
.cx-card .cx-net:nth-child(1) { transform: translate(-96%, -88%) rotate(-7deg); z-index: 1; }
.cx-card .cx-net:nth-child(2) { transform: translate(-8%, -100%) rotate(5deg); z-index: 2; }
.cx-card .cx-net:nth-child(3) { transform: translate(-90%, -6%) rotate(4deg); z-index: 3; }
.cx-card .cx-net:nth-child(4) { transform: translate(-4%, -14%) rotate(-6deg); z-index: 4; }
.cx-card .cx-ico { animation: cx-float 3.2s ease-in-out infinite; }
.cx-card .cx-net:nth-child(2) .cx-ico { animation-delay: -.8s; } .cx-card .cx-net:nth-child(3) .cx-ico { animation-delay: -1.6s; } .cx-card .cx-net:nth-child(4) .cx-ico { animation-delay: -2.4s; }
@keyframes cx-float { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cx-card .cx-ico { animation: none; } }
.branch-card .img.has-anim, .branch-card .img:has(> .cx-card) { background: var(--blue); }
img, video, canvas { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }   /* see js/nav.js: media deterrents */

/* ---- phones (≤ 720 px): one column, nothing wider than the screen, tap targets ≥ 34 px ---- */
@media (max-width: 720px) {
  :root { --gutter: 5vw; --fs-body: 16px; }
  #intro { max-width: none; right: var(--gutter); }
  #intro .hello { font-size: 8vw !important; }                 /* the CMS desktop size is in vw: too big on a phone */
  .tab-label { font-size: 8px; letter-spacing: .04em; }
  .tl { --tl-fs: 17px !important; --tl-gap: 3.5vh !important; --tl-pad: 34px; padding-right: var(--gutter); }
  .tl-item { grid-template-columns: 2.4em minmax(0, 1fr); column-gap: var(--sp-3); }
  .tl-graph { translate: none !important; margin-left: calc(var(--tl-pad) + var(--sp-4)); margin-top: var(--sp-5); width: min(300px, calc(100% - var(--tl-pad) - var(--sp-4))) !important; transform: none; }
  .branch, .branch-card { display: none; }                      /* no hover on touch: the previews would only get in the way */
}

/* ---- phone navigation (js/nav.js): a slim top bar, home on the left, MENU on the right, a full-width drop-down ---- */
.mnav { display: none; }
@media (max-width: 720px) {
  #bar-bg, .tab-indicator, .crumb, .crumb + .cms-scale-ctl, .tab-label, .tab-vlabel { display: none !important; }
  #tabs { pointer-events: none !important; } #tabs * { pointer-events: none !important; }   /* the thermal blocks stay as decor, not links */
  .inner #tabs-gl, .inner #tabs { display: none !important; }   /* inner pages: the menu only */
  .mnav { display: flex; position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 56px; align-items: center; justify-content: flex-end;
    padding: 0 var(--gutter); color: var(--ink); transition: background 200ms ease-out; }
  .mnav.solid, .mnav.open { background: var(--blue); }
  .mnav.solid { box-shadow: 0 1px 0 rgba(244, 241, 234, .14); }
  .mnav-btn { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid rgba(244, 241, 234, .5); background: transparent;
    color: inherit; font: 700 11px/1 var(--font-label); letter-spacing: var(--track-label); }
  .mnav-btn i { width: 14px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform 200ms var(--ease-out); }
  .mnav.open .mnav-btn i { transform: scaleY(.15); }
  .mnav-panel { position: absolute; left: 0; right: 0; top: 56px; background: var(--blue); padding: var(--sp-3) var(--gutter) var(--sp-6);
    border-bottom: 1px solid rgba(244, 241, 234, .18); display: grid; }
  .mnav-panel[hidden] { display: none; }
  .mnav-panel a { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; color: var(--ink); text-decoration: none;
    font-family: var(--font-display); font-size: 40px; line-height: 1.05; border-bottom: 1px solid rgba(244, 241, 234, .12); }
  .mnav-panel a[aria-current] { color: var(--orange); }
  .mnav-n { font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-label); opacity: .55; }
  .mnav.open .mnav-panel a { animation: mnav-in 260ms var(--ease-out) both; }
  .mnav.open .mnav-panel a:nth-child(2) { animation-delay: 30ms; } .mnav.open .mnav-panel a:nth-child(3) { animation-delay: 60ms; } .mnav.open .mnav-panel a:nth-child(4) { animation-delay: 90ms; }
  html.mnav-open { overflow: hidden; }
  .branch, .branch-card { display: none !important; }
}
@keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .mnav.open .mnav-panel a { animation: none; } }
@media (max-width: 720px) { #content { padding-top: 4vh; } }