/* greenlightllc.us v3, "Front Row" (The Useful Pause). One static page. No scripts, no third-party requests.
   Palette: ink #1E2433, marigold #E39A2D, paper #F6F1E7, tagline #B9771C. Tints are listed in :root and are
   used for drawings and surfaces only, never for text. */

@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap; src: url("sourceserif4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url("sourceserif4-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url("sourceserif4-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("kalam-400.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url("kalam-700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --ink: #1E2433; --mari: #E39A2D; --paper: #F6F1E7; --tag: #B9771C;
  --lift: #2C3446;  /* lifted ink: rules and furniture on ink bands */
  --desk: #EFE6D4;  /* photo slot fill (Instagram desk tint) */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --hand: "Kalam", cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--mari); outline-offset: 3px; border-radius: 4px; }
svg { display: block; }
/* Safari: inline SVG drawings need a width or they fall back to a default size. Each .art carries its viewBox size as width/height attributes, and scales to its column here. */
.art { width: 100%; height: auto; max-width: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 64px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.grid > *, .duo > * { min-width: 0; }
h1, h2, .big, .sub, .lede, .pull, .intro, .core, .then { text-wrap: balance; }
p { margin: 0 0 18px; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--mari); color: var(--ink); padding: 8px 14px; font-family: var(--sans); font-weight: 600; }
.skip:focus { left: 8px; z-index: 10; }

/* bands */
.dark { background: var(--ink); color: var(--paper); }
.gold { background: var(--mari); color: var(--ink); }
section { padding: 110px 0; }

/* top bar */
.top { display: flex; align-items: center; gap: 30px; height: 92px; }
/* Header lockup (his ruling, 2026-10-09): his name, and under it THE USEFUL PAUSE, starting and ending at the same x.
   Both lines are SVG text with the same textLength, so every browser spaces them to the same width whatever its
   font metrics. Line 2 is 0.45 units longer so the ink of its "E" lines up with the "L" above
   (Montserrat side bearings). Text block spans the mark's two bars (cap top to bar top, second baseline to bar bottom), like the logo lockup. */
.name { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; }
.name .mk { width: 24px; height: 36px; flex: none; }
.name .lk { width: 190px; height: 26.4px; margin-top: 8.88px; overflow: visible; flex: none; }
.name .lk text { font-family: var(--sans); font-weight: 600; fill: var(--paper); }
.name .lk .l2 { fill: var(--mari); }
.top nav { display: flex; gap: 30px; margin-left: auto; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .08em; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--mari); }
.navbtn { margin-left: 28px; padding: 10px 20px 9px; font-size: 13px; white-space: nowrap; }

/* buttons */
.btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-decoration: none; padding: 16px 28px 15px; border-radius: 999px; border: 2px solid transparent; }
.btn.m { background: var(--mari); color: var(--ink); }
.btn.i { background: var(--ink); color: var(--paper); }
.btn.o { border-color: currentColor; }
.cta { display: flex; gap: 18px; flex-wrap: wrap; }
/* Hero button "Read The Useful Pause" (his pick, 2026-10-10): same font as "Read" (Montserrat 600), set apart by a thin
   hand-drawn ink underline that draws itself once on load, after "judgment." (anim.js). Reduced motion or no script: drawn.
   The underline sits inside the button's side padding, clear of the rounded ends. Never wraps. */
.mk.ul-btn > svg { left: -1%; bottom: -.16em; width: 102%; height: .4em; }
.hero .cta .btn { white-space: nowrap; }

/* type */
.label { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 22px; }
.dark .label { color: var(--mari); }
h1 { font-weight: 400; font-size: 96px; line-height: 1; letter-spacing: -.02em; margin: 0 0 20px; }
.sub { font-style: italic; font-size: 44px; line-height: 1.15; color: var(--mari); margin: 0 0 30px; }
.lede { font-size: 24px; line-height: 1.45; max-width: 34ch; margin: 0 0 40px; }
.big { font-weight: 400; font-size: 76px; line-height: 1.05; letter-spacing: -.015em; margin: 0; }
.it { font-style: italic; color: var(--tag); }
.dark .it { color: var(--mari); }

/* Margin Notes on a word */
.mk { position: relative; display: inline-block; white-space: nowrap; }
.mk > svg { position: absolute; pointer-events: none; overflow: visible; }
.mk.circ { margin-left: .1em; }
.mk.circ > svg { left: -8%; top: -10%; width: 116%; height: 124%; }
.mk.wavy > svg { left: 0; bottom: -.1em; width: 100%; height: .26em; }
.mk.under > svg { left: -2%; bottom: -.18em; width: 104%; height: .3em; }

/* 1 opening */
.hero { padding: 20px 0 0; overflow: hidden; }
.hero .grid { grid-template-columns: 1.25fr .75fr; align-items: end; gap: 20px; }
.hero .copy { padding-bottom: 110px; }

/* 2 idea */
.idea { text-align: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 50px auto 44px; max-width: 1000px; }
.pair > * { min-width: 0; }
.idea .body { max-width: 760px; margin: 0 auto; text-align: left; font-size: 21px; }
.pull { font-size: 40px; line-height: 1.25; margin: 40px auto 0; max-width: 900px; }

/* 3 witness */
.witness .big { margin-bottom: 26px; }
.witness .lead { font-size: 26px; line-height: 1.5; max-width: 900px; }
.witness .art-wide { margin: 50px 0 70px; }
.witness .grid { align-items: center; }

/* 4 talks */
.talks .intro { font-size: 44px; line-height: 1.2; letter-spacing: -.01em; max-width: 32ch; margin: 0 0 70px; }
.talks .grid { grid-template-columns: .8fr 1.2fr; align-items: start; gap: 80px; }
.frame { position: sticky; top: 40px; align-self: start; margin: 10px 0 0; }
.frame .disc { position: absolute; left: -40px; top: -30px; width: 300px; height: 300px; border-radius: 50%; background: var(--mari); }
.frame .arch { width: 100%; position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px; background: var(--desk); border: 3px solid var(--ink); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.frame .arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .arch .stand-in { width: 84%; margin-bottom: 22px; }
.frame .arch::after { content: ""; position: absolute; inset: 14px; border: 2px dashed var(--tag); border-radius: 999px 999px 6px 6px; pointer-events: none; }
.frame .soon { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.core-k { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 12px; }
.core-k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mari); margin-right: 10px; vertical-align: 1px; }
.core { font-weight: 400; font-size: 58px; line-height: 1.05; letter-spacing: -.015em; margin: 0 0 22px; }
.core em { font-style: italic; }
.sub-k { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 44px 0 6px; }
.setlist { list-style: none; padding: 0; margin: 0; }
.setlist li { position: relative; padding: 18px 0 14px; font-size: 19px; line-height: 1.45; }
.setlist li svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 10px; }
.setlist li strong { display: block; font-weight: 400; font-size: 26px; line-height: 1.25; margin-bottom: 4px; }
.leave { list-style: none; padding: 0; margin: 0 0 30px; }
.leave li { position: relative; padding: 6px 0 6px 40px; font-size: 19px; line-height: 1.45; }
.leave li svg { position: absolute; left: 2px; top: 10px; width: 26px; height: 24px; }
.who b { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-right: 6px; }
.who, .format { font-size: 19px; line-height: 1.5; }
.bookstrip { margin-top: 90px; background: var(--ink); color: var(--paper); border-radius: 28px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 40px 56px; }
.bookstrip p { margin: 0; font-size: 30px; line-height: 1.3; }

/* 5 newsletter */
.news .grid { grid-template-columns: .8fr 1.2fr; }
.news h2 { font-weight: 400; font-size: 64px; line-height: 1.05; margin: 0 0 16px; }
.news .line { font-style: italic; font-size: 28px; line-height: 1.3; margin: 0 0 26px; text-wrap: balance; }
.news .latest { font-size: 21px; margin: 0 0 30px; }

/* 6 + 7 about and building */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about { border-left: 2px solid var(--ink); padding-left: 56px; }
.about p:not(.label) { font-size: 26px; line-height: 1.5; }
.build .bigline { font-size: 36px; line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.build .art { max-width: 300px; margin: 6px 0 10px -14px; }

/* footer */
footer { padding: 80px 0 56px; }
footer .row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
footer .mark { display: flex; align-items: center; gap: 20px; font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: .24em; text-decoration: none; }
footer .mark svg { width: 52px; height: 76px; }
footer .made { font-style: italic; font-size: 24px; margin: 24px 0 0; }
footer .right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
footer .mail { font-size: 20px; text-decoration: none; border-bottom: 2px solid var(--mari); }
footer .social { display: flex; gap: 14px; }
footer .follow { margin: 8px 0 -6px; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mari); }
footer .social { flex-wrap: wrap; justify-content: flex-end; }
footer .social a { display: flex; gap: 10px; height: 46px; padding: 0 18px 0 14px; border: 2px solid var(--lift); border-radius: 999px; align-items: center; justify-content: center; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
footer .social a:hover { border-color: var(--mari); }
footer .social svg { width: 22px; height: 22px; }
footer .legal { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--lift); font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* phone */
/* talk 2 label above its title (no colon) */
.li-k { display: block; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 4px; }
/* Stand-outs (creative-director spec v1, 2026-10-09). One per block, never more than 8 on the page. */
/* S1 break-out line */
.stop { font-weight: 600; font-size: 28px; line-height: 1.3; letter-spacing: -.005em; margin: 34px 0 0; text-wrap: balance; }
/* pull line: first sentence on its own line, and never split "not the other way round." */
.pull .pl1 { display: block; }
.pull .it { white-space: nowrap; }
/* S2 colour on a phrase, ink bands only (marigold on ink, 6.59 to 1) */
.dark .hi { color: var(--mari); }
/* S6 colour on a phrase on paper: tagline colour, semibold, 21px and up only (3.26 to 1, AA large text) */
.hi-t { color: var(--tag); font-weight: 600; }
/* S3 handwritten note with an arrow to the sticky note */
.hand { font-family: var(--hand); font-weight: 700; font-size: 36px; line-height: 1.2; color: var(--mari); margin: 30px 0 0; max-width: 15em; text-wrap: balance; transform: rotate(-2deg); transform-origin: 0 50%; }
.hand .arr { overflow: visible; }
.hand .arr-r { display: inline-block; vertical-align: -6px; width: 84px; height: 42px; margin-left: 12px; }
.hand .arr-d { display: none; }
/* S4 marked passage: a hand-drawn marigold bar in the margin */
.side { position: relative; font-size: 25px; line-height: 1.4; margin: 26px 0; }
.side > svg { position: absolute; left: -30px; top: .2em; width: 10px; height: calc(100% - .4em); overflow: visible; }
/* S5 small circle around a phrase in body text */
.mk.circ-s { margin: 0 .5em; }
.mk.circ-s > svg { left: -12%; top: -8%; width: 124%; height: 118%; }
/* watcher drawing size (earlier review) */
.witness .big { margin-bottom: 30px; }
.witness .art-wide { max-width: 900px; margin: 0 auto 40px; }

@media (max-width: 760px) {

  body { font-size: 18px; }
  .wrap { padding: 0 24px; }
  section { padding: 70px 0; }
  .top { height: auto; padding: 18px 0 6px; flex-wrap: wrap; gap: 14px 20px; }
  .navbtn { display: none; }
  .top nav { margin-left: 0; width: 100%; gap: 0; justify-content: space-between; font-size: 13px; letter-spacing: .04em; }
  /* phone: name 14 px, second line 10 px; the mark grows so its bars still span the two lines */
  .name { gap: 10px; }
  .name .mk { width: 21px; height: 31.5px; }
  .name .lk { width: 166px; height: 23.07px; margin-top: 7.77px; }
  .grid, .hero .grid, .talks .grid, .news .grid, .duo, .pair { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding-top: 28px; }
  .hero .copy { padding-bottom: 0; }
  .hero .art { max-width: 240px; margin: 0 auto; }
  h1 { font-size: 56px; }
  .sub { font-size: 30px; }
  .lede { font-size: 21px; }
  .big { font-size: 44px; }
  .pair { gap: 10px; margin: 36px auto 30px; }
  .pair .art { max-width: 300px; margin: 0 auto; }
  .idea .body { font-size: 18px; }
  .pull { font-size: min(28px, calc((100vw - 48px) / 11.2)); }  /* "not the other way round." never wraps and is about 10.9em wide: shrink it on narrow phones (320 px) */
  .witness .lead { font-size: 21px; }
  .talks .intro { font-size: 30px; margin-bottom: 44px; }
  .core { font-size: 40px; }
  .setlist li strong { font-size: 22px; }
  .frame { position: relative; top: 0; width: 100%; max-width: 300px; margin: 10px auto 0; }  /* Safari: needs an explicit width, its children are all absolutely positioned */
  .frame .disc { width: 200px; height: 200px; left: -24px; top: -20px; }
  .bookstrip { grid-template-columns: 1fr; gap: 22px; padding: 30px 26px; margin-top: 56px; }
  .bookstrip p { font-size: 22px; }
  .news h2 { font-size: 44px; }
  .news .line { font-size: 22px; }
  .news .art { max-width: 280px; margin: 0 auto; }
  .about p:not(.label) { font-size: 21px; }
  .about { border-left: 0; border-top: 2px solid var(--ink); padding: 40px 0 0; }
  .build .bigline { font-size: 30px; }
  footer .row { grid-template-columns: 1fr; }
  footer .right { align-items: flex-start; }
  footer .social { justify-content: flex-start; }
  /* stand-outs, phone (creative-director spec v1) */
  .stop { font-size: 23px; margin-top: 26px; }
  .idea .big { line-height: 1.42; }                    /* fixes the wavy line touching the circle */
  .idea .mk.circ > svg { top: 2%; height: 104%; }
  .hand { font-size: 28px; }
  .hand .arr-r { display: none; }
  .hand .arr-d { display: block; width: 30px; height: 56px; margin: 6px 0 0 62%; }
  .side { font-size: 21px; }
  .side > svg { left: -16px; width: 8px; }
  .witness .art-wide { margin: 8px 0 28px; }           /* replaces the current 36px 0 44px */
}

/* ===== Stop points and motion (creative-director anim proto v1, 2026-10-09) =====
   Layout first (always on), then motion (only with anim.js and no reduced-motion request).
   Every rule under html.anim describes the START of a move. The page without it is the finished drawing. */
/* S3 the question, set as a break-out with a note-taking box on each word */
.ask { font-size: 30px; line-height: 1.6; margin: 4px 0 34px; }   /* plain wrapping: the lead-in breaks after "AI tool," and the two halves sit below */
/* The question in two halves (2026-10-09): "am I [reacting] on impulse, / or [responding] with intention?"
   Each half keeps together on its own line, at every width, so the two read as a pair.
   A short hooked arrow drops from the "reacting" box to the "responding" box. */
.q { display: block; }
.qh { position: relative; display: inline-block; white-space: nowrap; }
.qh2 { display: block; margin-top: .62em; }
.mk.box { margin: 0 .3em; line-height: 1.2; }
.mk.box.b-int { margin-right: .26em; }
.mk.box > svg.dr { left: -10%; top: -6%; width: 120%; height: 118%; }
.b-int.mk.box > svg.dr { left: -7%; width: 114%; }
.q-hook { position: absolute; left: 1.55em; top: 1.16em; width: .8em; height: 1.3em; overflow: visible; }
/* S4 the three things to keep, numbered like notes, with Dot pointing */
.pts { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 26px 0 30px; }
.pts-dot { width: 100%; height: auto; }
.pts p { font-size: 27px; line-height: 1.85; margin: 0; }
.pt { position: relative; display: inline-block; white-space: nowrap; font-weight: 600; margin-left: 25px; }
.pt .num { position: absolute; left: -26px; top: calc(50% - 10px); width: 21px; height: 21px; border-radius: 50%; background: var(--mari); color: var(--ink);
  font: 600 12px/21px var(--sans); text-align: center; letter-spacing: 0; }
.p1 > .mk { color: var(--tag); }               /* "judgment" in the tagline colour: semibold and 21px and up only (3.26 to 1, AA large) */
/* S5 the line the machine types, with the brand's cursor */
.type .cur { display: inline-block; width: .1em; height: .92em; margin-left: .1em; vertical-align: -.1em; background: var(--mari); border-radius: 1px; }
/* S6 Dot leading the laptop under the pull line */
.lead-walk { max-width: 540px; margin: 22px auto 0; }
/* S8 Dot notices the reach */
.reach .art { max-width: 360px; margin: 6px 0 4px -8px; }

/* Tablet (761 to 1000 px): stack Building and About. Side by side, About was a 240 px column and its
   underlined "a parent of two teenagers" (it never wraps) pushed the page sideways. Fixed 2026-10-09. */
@media (min-width: 761px) and (max-width: 1000px) {
  .duo { grid-template-columns: 1fr; gap: 56px; }
  .about { border-left: 0; border-top: 2px solid var(--ink); padding: 40px 0 0; }
}

@media (max-width: 760px) {
  .ask { font-size: 23px; }
  /* the longer half ("or responding with intention?") is about 15.2em wide: shrink it on narrow phones so it never wraps */
  .q { font-size: min(1em, calc((100vw - 50px) / 15.4)); }
  .pts { grid-template-columns: 78px 1fr; gap: 12px; margin: 20px 0 24px; }
  .pts p { font-size: 21px; line-height: 1.85; }
  .pt { margin-left: 21px; }
  .pt .num { left: -22px; top: calc(50% - 9px); width: 18px; height: 18px; font-size: 11px; line-height: 18px; }
  .lead-walk { max-width: 330px; margin-top: 14px; }
  .reach .art { max-width: 290px; }
}

@media (prefers-reduced-motion: no-preference) {
  .walk, .leg, .pointer, .reacher, .arm-a, .arm-b, .eyes, .pz { transform-origin: 0 0; }
  .anim [data-anim]:not(.ready) svg.dr { visibility: hidden; }

  /* S2 heading: the wavy line draws fast and jitters (impulse), the circle draws slowly (intention) */
  .anim .idea .big.on .wavy { animation: jit .4s .42s 1; }

  /* S3 impulse: box, then a shake. Arrow across "or". Intention: a calm box, then one slow pulse */
  .anim .ask.on .b-imp { animation: jit .42s .3s 1; }
  .anim .ask.on .b-int { animation: pulse .5s 1.1s 1; }

  /* S4 Dot walks in, raises an arm, and the three points get numbered and underlined in turn */
  .anim .pts:not(.on) .walk { transform: translateX(-200px); }
  .anim .pts .walk { transition: transform .62s cubic-bezier(.3,.7,.4,1); }
  .anim .pts.on .leg1 { animation: legA .2s ease-in-out 3; }
  .anim .pts.on .leg2 { animation: legB .2s ease-in-out 3; }
  .anim .pts:not(.on) .pointer { transform: rotate(105deg); }
  .anim .pts .pointer { transition: transform .32s cubic-bezier(.3,1.5,.5,1) .55s; }
  .anim .pts:not(.on) .num { transform: scale(0); opacity: 0; }
  .anim .pts .num { transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .15s; }
  .anim .pts .p1 .num { transition-delay: .7s; }
  .anim .pts .p2 .num { transition-delay: 1s; }
  .anim .pts .p3 .num { transition-delay: 1.3s; }
  .anim .pts:not(.on) .p1 > .mk { color: var(--ink); }
  .anim .pts .p1 > .mk { transition: color .5s .8s; }
  .anim .pts.on .p1 > .mk { animation: pulse .45s .75s 1; }

  /* S5 the words appear one by one (delays set by anim.js), then the cursor blinks */
  .anim .type.ready:not(.on) .w, .anim .type.ready:not(.on) .cur { opacity: 0; }
  .anim .type .w { transition: opacity .1s; }
  .anim .type.on .cur { animation: cblink .5s var(--typed, 0s) 3 backwards; }

  /* S6 Dot walks ahead, the laptop follows a beat behind */
  .anim .lead-walk:not(.on) .walk { transform: translateX(-330px); }
  .anim .lead-walk .walk { transition: transform 1.1s cubic-bezier(.25,.6,.35,1); }
  .anim .lead-walk .walk2 { transition-delay: .14s; }
  .anim .lead-walk.on .leg1 { animation: legA .22s ease-in-out 5; }
  .anim .lead-walk.on .leg2 { animation: legB .22s ease-in-out 5; }
  .anim .lead-walk.on .walk2 .leg1 { animation-delay: .14s; }
  .anim .lead-walk.on .walk2 .leg2 { animation-delay: .14s; }
  .anim .lead-walk.on .arm-a { animation: legB .44s ease-in-out 2; }
  .anim .lead-walk.on .arm-b { animation: legA .44s ease-in-out 2; }

  /* S7 the close-the-circle phrase turns marigold as its underline draws */
  .anim .dark .lead:not(.on) .hi { color: var(--paper); }
  .anim .dark .lead .hi { transition: color .6s .3s; }

  /* S8 the hand goes out, the pause mark appears in the gap, Dot looks at its own hand, the note writes itself */
  .anim .reach:not(.on) .reacher { transform: rotate(70deg); }
  .anim .reach .reacher { transition: transform .45s cubic-bezier(.3,.9,.4,1) .1s; }
  .anim .reach:not(.on) .pz { opacity: 0; transform: translateY(10px); }
  .anim .reach .pz { transition: opacity .25s .55s, transform .3s cubic-bezier(.3,1.6,.5,1) .55s; }
  .anim .reach:not(.on) .eyes { transform: translate(-14px, -8px); }
  .anim .reach .eyes { transition: transform .25s .6s; }
  .anim .reach:not(.on) .hand { -webkit-clip-path: inset(-30% 100% -30% -30%); clip-path: inset(-30% 100% -30% -30%); }
  .anim .reach .hand { -webkit-clip-path: inset(-30% -40% -30% -30%); clip-path: inset(-30% -40% -30% -30%); transition: clip-path .6s ease-out .75s, -webkit-clip-path .6s ease-out .75s; }

  /* S12 About: the two decades line warms to the tagline colour */
  .anim .about p:not(.on) .hi-t { color: var(--ink); }
  .anim .about p .hi-t { transition: color .6s .2s; }
}
@keyframes jit { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 1px) rotate(-2deg); } 40% { transform: translate(3px, -1px) rotate(2deg); } 60% { transform: translate(-2px, 0) rotate(-1deg); } 80% { transform: translate(2px, 0) rotate(1deg); } }
@keyframes pulse { 0%, 100% { transform: none; } 45% { transform: scale(1.08); } }
@keyframes legA { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
@keyframes legB { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
@keyframes cblink { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }