/* line.css, The Line (homepage, Nov 2026, spec §2 and §4).
   Two layers:
   1. The DOCUMENT (no class needed): every chapter as a normal readable
      section. This is what a reader without JS gets, and it hides nothing.
   2. The DRAWING (html.ln-js, set by line.js): the sections become boxes in a
      world the camera moves; html.ln-still (reduced motion, html.a11y-motion)
      keeps the drawing finished on a normal scrolling page.
   Families only through tokens (--font-display, --font-body, --font-note). */

/* ── 1. The document ─────────────────────────────────────────────────────── */
.ln-main { display: block; color: var(--ink); background: var(--base); }
.ln-main [data-chapter] {
  max-width: 1100px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 44px);
}
.ln-main [data-chapter] ul, .ln-main [data-chapter] ol { list-style: none; margin: 0; padding: 0; }

.ln-hero { min-height: 70svh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.ln-hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em;
  font-size: min(13.2vw, 124px); line-height: .95;
}
html[lang="he"] .ln-hero h1 { font-size: min(16.4vw, 150px); line-height: 1; letter-spacing: 0; }
/* The name is light (300) in both languages: tokens.css sets Hebrew page-sheet h1s to 500. */
body.ln-page .ln-hero h1 { font-weight: 300; }
/* In the drawing the name runs edge to edge, as in the prototype. */
html.ln-js .ln-hero h1 { font-size: 13.2vw; white-space: nowrap; }
html[lang="he"].ln-js .ln-hero h1 { font-size: 16.4vw; }
/* What I do comes first and biggest; the coffee line under it is the voice. */
.ln-what { font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 14px; max-width: 13em; text-wrap: balance; }
html[lang="he"] .ln-what { letter-spacing: 0; line-height: 1.15; }
.ln-lead { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 32px); line-height: 1.2; margin: 0 0 14px; max-width: none; text-wrap: balance; color: var(--accent); }
.ln-lead span { display: inline-block; text-wrap: balance; }
.ln-cue { color: var(--pencil); margin-top: 14px; font-size: 14px; }
[data-ln="caption"] .ln-sig { margin: 12px 0 0; color: var(--pencil); font-size: 13px; letter-spacing: .1em; }
html[lang="he"] [data-ln="caption"] .ln-sig { font-size: 15px; letter-spacing: 0; }
.ln-site-link { display: inline-block; margin-top: 6px; font-size: 14px; }
.ln-hero [data-ln="mark"] { display: block; width: min(180px, 40vw); height: auto; margin-bottom: 24px; overflow: visible; }
.ln-hero [data-ln="mark"] path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ln-hero [data-ln="mark"] circle { fill: var(--accent); }

.ln-main [data-ln="title"] {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(38px, 5vw, 76px); line-height: 1.05; margin: 0 0 24px;
}
html[lang="he"] .ln-main [data-ln="title"] { font-weight: 700; letter-spacing: 0; }

[data-ln="quote"] { font-family: var(--font-note); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.3; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
/* The line under "I think": why the topics are there. */
[data-ln="sub"] { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; color: var(--sec); margin: 0 0 20px; max-width: 32em; text-wrap: balance; }

/* The topics of "I think": a line of words in the hand without JS; with it,
   each word sits under the drawing the pen makes of it (line.js GLYPH). */
.ln-topics { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; list-style: none; }
[data-ln="topic"] { margin: 0; font-family: var(--font-note); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; color: var(--accent); }

[data-ln="big"] {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 5.2vw, 76px);
  line-height: 1.1; letter-spacing: -.015em; margin: 0; text-wrap: balance;
}
html[lang="he"] [data-ln="big"] { font-weight: 700; letter-spacing: 0; }
[data-ln="big"] span { color: var(--accent); }

.ln-main { --ln-shadow: color-mix(in srgb, var(--ink) 18%, transparent); --ln-shadow-soft: color-mix(in srgb, var(--ink) 16%, transparent); }
[data-ln="frame"] { position: relative; overflow: hidden; background: var(--base); box-shadow: 0 18px 50px var(--ln-shadow); margin: 0 0 18px; }
[data-ln="frame"] img, [data-ln="frame"] video { display: block; width: 100%; height: auto; }
.ln-strip img { display: block; width: 100%; height: auto; }
/* A site's scroll recording (line.js scrubs it): shown only in camera mode once
   it has loaded; until then, and without JS or under reduced motion, the strip. */
[data-ln="frame"] video.ln-scrub { display: none; }
html.ln-js:not(.ln-still) .ln-scrub-on video.ln-scrub {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--base);
}
html.ln-js:not(.ln-still) .ln-scrub-on .ln-strip { visibility: hidden; }
.ln-main [data-chapter="site"] [data-ln="frame"] { max-height: 70vh; overflow-y: auto; }
/* The laptop and the phone side by side (with JS off; the drawing places them itself). */
.ln-pair { display: flex; gap: 24px; align-items: flex-start; }
.ln-pair [data-ln="frame"] { flex: 1 1 auto; min-width: 0; }
.ln-main [data-chapter="site"] [data-ln="duo"] {
  flex: 0 0 auto; width: min(240px, 30%); max-height: 70vh; overflow-y: auto; position: relative;
  background: var(--base); box-shadow: 0 18px 50px var(--ln-shadow); border-radius: 22px; margin: 0 0 18px;
}
.ln-main [data-chapter="phone"] [data-ln="frame"] { display: flex; gap: 12px; overflow-x: auto; background: none; box-shadow: none; }
.ln-main [data-chapter="phone"] [data-ln="frame"] img { width: 200px; flex: none; border-radius: 22px; box-shadow: 0 10px 26px var(--ln-shadow-soft); }
.ln-main [data-chapter="flow"] [data-ln="frame"] img, .ln-main [data-chapter="flow"] [data-ln="frame"] video { object-fit: contain; background: var(--base); }

[data-ln="step"] { font-family: var(--font-note); font-size: clamp(20px, 2vw, 28px); color: var(--ink); }
/* The step number in the body face: the note font's "1" reads as a vav beside Hebrew. */
.ln-sn { font-family: var(--font-body); font-size: .8em; font-weight: 600; }
.ln-main [data-chapter="flow"] ol { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 16px; }

[data-ln="caption"] { font-size: 15px; line-height: 1.45; color: var(--ink); max-width: 46em; }
[data-ln="caption"] h2, [data-ln="caption"] h3 {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; margin: 0 0 4px;
}
[data-ln="caption"] p { margin: 0; }
[data-ln="caption"] a { color: var(--accent); }
/* A client's mark beside its name (Ongage). */
.ln-logo-h { display: flex; align-items: center; gap: .35em; }
.ln-logo-h img { width: 1.05em; height: 1.05em; flex: none; border-radius: 4px; }
/* Coffee With Tanya: the hook in the display face, the reason in ink, the topics in the hand. */
.ln-main [data-ln="caption"].ln-cwt h2 { margin-bottom: 14px; }
.ln-main [data-ln="caption"].ln-cwt p.ln-cwt-hook {
  font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.2;
  color: var(--accent); margin: 0 0 12px; text-wrap: balance;
}
.ln-main [data-ln="caption"].ln-cwt p.ln-cwt-body { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--ink); max-width: 26em; }
.ln-cwt-topics { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--font-hand); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--sec); }
.ln-cwt-topics li + li::before { content: "\2726"; margin-inline-end: 10px; font-size: .5em; vertical-align: .35em; color: var(--accent); }
.ln-go { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--accent); }
/* "Websites and prices" under each client site, a note in the hand at the far end. */
.ln-main .ln-go-note.ln-go-at { position: absolute; margin: 0; text-align: end; font-family: var(--font-note); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); text-decoration: none; pointer-events: none; }
.ln-main .ln-go-note.ln-go-at::first-line { pointer-events: auto; }
.ln-main .ln-go-note:hover, .ln-main .ln-go-note:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 719px) { .ln-main .ln-go-note.ln-go-at { text-align: start; } }
.ln-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; padding: 0; list-style: none; }
.ln-chips span, .ln-chips li {
  font: 500 12px/1.4 var(--font-body); border: 1px solid var(--accent); color: var(--accent);
  padding: 3px 8px; border-radius: 999px; letter-spacing: .06em;
}
.ln-btn {
  display: inline-block; background: var(--accent); color: var(--base) !important; text-decoration: none;
  padding: 12px 22px; border-radius: 6px; font-weight: 600; font-size: 16px;
}
.ln-btn:hover { background: var(--accent-2); }
.ln-btn:focus-visible, [data-ln="card"]:focus-visible, [data-ln="caption"] a:focus-visible, [data-ln="note"] a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

[data-ln="cup"] { display: block; width: min(200px, 50vw); height: auto; }

.ln-main [data-chapter="cards"] ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
/* The offer cards (Tanya, Nov 11, 2026): a pen glyph, the title, one line, and
   the prices in rows at the foot; line.js gives every price block the tallest
   one's height, so the rule over the prices runs at one height. */
[data-ln="card"] {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px; box-sizing: border-box;
  padding: clamp(14px, 1.6vw, 22px); background: var(--base); border: 1.5px solid var(--accent);
  border-radius: 4px; text-decoration: none; color: var(--ink);
}
.ln-card-top { display: block; }
.ln-glyph { display: block; width: 40px; height: 40px; margin: 0 0 12px; overflow: visible; }
.ln-glyph * { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-ln="card"] b { display: block; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
html[lang="he"] [data-ln="card"] b { font-weight: 700; }
[data-ln="card"] small { display: block; font-size: 14px; line-height: 1.45; color: var(--sec); margin-top: 8px; text-wrap: pretty; }
.ln-price { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; box-sizing: border-box; padding-top: 12px; border-top: 1px solid var(--rule); }
.ln-pr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 12px; color: var(--accent); text-decoration: none; }
.ln-pv { font-family: var(--font-display); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.ln-pq { font-size: 13.5px; line-height: 1.35; color: var(--sec); text-align: end; text-wrap: balance; }
.ln-pq.ln-pq-only { text-align: start; grid-column: 1 / -1; }
.ln-pq.ln-pq-only { font-family: var(--font-display); font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; color: var(--accent); }
[data-ln="card"]:hover b { color: var(--accent); }
/* The websites card: three tiers, each a door to its package page. */
.ln-card-tiers b a { color: var(--ink); text-decoration: none; }
.ln-card-tiers b a:hover { color: var(--accent); }
a.ln-pr:hover .ln-pq { color: var(--accent); text-decoration: underline; }
a.ln-pr:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The pen draws each glyph as its card arrives (finished without the camera). */
html.ln-js:not(.ln-still) [data-ln="card"].ln-o .ln-glyph * { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1) .25s; }
html.ln-js:not(.ln-still) [data-ln="card"].ln-o.on .ln-glyph * { stroke-dashoffset: 0; }

/* Coffee With Tanya: the three latest editions. */
.ln-cwt-eds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 28px !important; }
[data-ln="ed"] { display: block; box-sizing: border-box; padding: 14px 16px; background: var(--base); border: 1.5px solid var(--accent); border-radius: 4px; color: var(--ink); text-decoration: none; }
.ln-ed-k { display: block; font-size: 13px; color: var(--sec); margin-bottom: 6px; }
.ln-ed-n { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); }
[data-ln="ed"] b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.2; text-wrap: balance; }
html[lang="he"] [data-ln="ed"] b { font-weight: 700; }
[data-ln="ed"] small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--sec); }
[data-ln="ed"]:hover b { color: var(--accent); }

/* From the blog: four share cards. */
.ln-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 16px !important; }
[data-ln="post"] { display: block; box-sizing: border-box; background: var(--base); border: 1.5px solid var(--accent); border-radius: 4px; color: var(--ink); text-decoration: none; overflow: hidden; }
.ln-post-img { display: block; aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: 1px solid var(--rule); }
.ln-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
[data-ln="post"]:hover .ln-post-img img { transform: scale(1.03); }
.ln-post-k { display: block; padding: 12px 14px 0; font-family: var(--font-note); font-size: 17px; line-height: 1.2; color: var(--accent); }
[data-ln="post"] b { display: block; padding: 4px 14px 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.25; text-wrap: balance; }
html[lang="he"] [data-ln="post"] b { font-weight: 700; }
[data-ln="post"]:hover b { color: var(--accent); }
[data-ln="ed"]:focus-visible, [data-ln="post"]:focus-visible, [data-ln="go"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[data-ln="card"] a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-ln="note"] { display: inline-block; margin-top: 16px; color: var(--accent); }
.ln-vat { display: block; margin-top: 4px; color: var(--sec); }
[data-ln="note"] a { color: inherit; }

.ln-main [data-chapter="sign"] { text-align: center; }
[data-ln="caption"] .ln-who, .ln-who { margin: 0 auto 14px; max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); }

/* A client's words (Shani, the Ongage chapter): the companion note font. */
[data-ln="say"] { margin: 28px 0 0; font-family: var(--font-note); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; color: var(--ink); max-width: 52em; }
[data-ln="say"] p { margin: 0; }
[data-ln="say"] footer { margin-top: 10px; font-family: var(--font-body); font-size: 14px; color: var(--sec); }
html:not(.ln-js) [data-ln="say"], html.ln-still [data-ln="say"]:not(.ln-o) { border-inline-start: 2.6px solid var(--accent); padding-inline-start: 18px; }

/* Waiting for a size (line.js asleep) or JS off: the drawing layer takes no room. */
html:not(.ln-js) .ln-ink, html:not(.ln-js) .ln-probe { display: none; }

/* Anti-flicker: with the boot class set in <head>, main waits for line.js,
   and shows itself after 2.5s if line.js never arrives. */
html.ln-boot:not(.ln-js) .ln-main { visibility: hidden; animation: ln-unhide 0s 2.5s forwards; }
@keyframes ln-unhide { to { visibility: visible; } }

/* ── 2. The drawing ──────────────────────────────────────────────────────── */
html.ln-js .ln-main { position: relative; padding: 0; margin: 0; max-width: none; }
html.ln-js .ln-view {
  position: sticky; top: var(--ln-top, 56px);
  height: calc(100vh - var(--ln-top, 56px)); height: calc(100svh - var(--ln-top, 56px));
  overflow: hidden; background: var(--base);
}
html.ln-js .ln-view::before {
  content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, color-mix(in srgb, var(--rule) 40%, transparent) 33px 34px);
}
/* The sentinel line.js measures: one view tall in both modes. */
html.ln-js .ln-probe {
  position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; pointer-events: none;
  height: calc(100vh - var(--ln-top, 56px)); height: calc(100svh - var(--ln-top, 56px));
}
html.ln-js .ln-world { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
html.ln-js .ln-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
html.ln-js .ln-ink path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.ln-js .ln-pen { fill: var(--accent); }

html.ln-js .ln-main [data-chapter] {
  position: absolute; left: 0; width: 100%; max-width: none; margin: 0; padding: 0; z-index: 3; pointer-events: none;
}
html.ln-js .ln-main [data-chapter] .ln-o { position: absolute; margin: 0; pointer-events: auto; box-sizing: border-box; }
html.ln-js .ln-main [data-chapter] .ln-hide { display: none; }

/* The hero keeps its own layout inside a box one view tall. */
html.ln-js .ln-main .ln-hero {
  z-index: 1; display: flex; flex-direction: column; min-height: 0; pointer-events: auto;
  padding: 28px clamp(16px, 3vw, 44px) 66px; box-sizing: border-box; justify-content: flex-end;
}
html.ln-js .ln-hero [data-ln="mark"] {
  position: absolute; inset-inline-end: clamp(16px, 6vw, 110px); top: 9%;
  width: min(44%, 46vh); height: auto; aspect-ratio: 1; margin: 0;
}
html.ln-js:not(.ln-still) .ln-hero [data-ln="mark"] path { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; animation: ln-draw 1.5s cubic-bezier(.6, 0, .2, 1) .25s forwards; }
html.ln-js:not(.ln-still) .ln-hero [data-ln="mark"] path + path { animation-delay: .9s; animation-duration: 1.9s; }
html.ln-js:not(.ln-still) .ln-hero [data-ln="mark"] circle { opacity: 0; animation: ln-fade .3s 2.6s forwards; }
/* Dash 1, gap 1.02, offset 1.01: before it draws, the path start sits in the gap,
   so the round cap paints no dot there (it used to, while the animation waited). */
@keyframes ln-draw { to { stroke-dashoffset: 0; } }
@keyframes ln-fade { to { opacity: 1; } }
@media (max-width: 719px) {
  html.ln-js .ln-hero [data-ln="mark"] { top: 6%; width: min(56%, 40vh); }
}

/* Titles: one line, set where the pen arrives. */
html.ln-js .ln-main [data-ln="title"].ln-o {
  font-size: clamp(44px, 8.4vw, 132px); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
html.ln-js .ln-main [data-ln="title"].ln-sm { font-size: clamp(38px, 4.6vw, 66px); }
html[lang="he"].ln-js .ln-main [data-ln="title"].ln-o { font-weight: 800; letter-spacing: 0; }
html.ln-js:not(.ln-still) [data-ln="swap"] { display: inline-block; }
html.ln-js:not(.ln-still) [data-ln="swap"].ln-swap-off { display: none; }
/* Still, or no JS: only the last step ("I build."), the finished state. */
html.ln-still [data-ln="swap"]:not(:last-child), html:not(.ln-js) [data-ln="swap"]:not(:last-child) { display: none; }
html.ln-js .ln-center { text-align: center; }
html.ln-js [data-ln="caption"].ln-o, html.ln-js [data-ln="big"].ln-o { max-width: none; }

html.ln-js [data-ln="quote"].ln-o { transform: rotate(var(--r, 0deg)); }
html.ln-js [data-ln="sub"].ln-o { margin: 0; }
html.ln-js [data-ln="topic"].ln-o { text-align: center; letter-spacing: 0; }

html.ln-js [data-ln="frame"].ln-o, html.ln-js [data-ln="duo"].ln-o { margin: 0; max-height: none; overflow: hidden; }
html.ln-js [data-ln="duo"].ln-o { z-index: 1; border-radius: 9% / 4.2%; }
html.ln-js .ln-main [data-chapter="site"] [data-ln="frame"].ln-o { max-height: none; }
html.ln-js .ln-strip { position: absolute; left: 0; top: 0; width: 100%; }
/* Only the chapter on screen keeps its tall capture on its own layer. */
html.ln-js .ln-now .ln-strip { will-change: transform; }
html.ln-js .ln-main [data-chapter="phone"] [data-ln="frame"].ln-o { display: block; background: var(--base); box-shadow: 0 18px 50px var(--ln-shadow); }
html.ln-js .ln-phone { border-radius: 9% / 4.2%; }
/* The screen sits inside the drawn phone, on paper, so the pen's frame shows all round. */
html.ln-js .ln-main [data-chapter="phone"] [data-ln="frame"].ln-o img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 8% / 3.8%; }
html.ln-js [data-chapter="phone"] [data-ln="frame"] img,
html.ln-js [data-chapter="flow"] [data-ln="frame"] img,
html.ln-js [data-chapter="flow"] [data-ln="frame"] video {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none;
}
html.ln-js [data-chapter="phone"] [data-ln="frame"] img { object-fit: cover; object-position: top; }
html.ln-js [data-chapter="flow"] [data-ln="frame"] img,
html.ln-js [data-chapter="flow"] [data-ln="frame"] video { object-fit: contain; background: var(--base); }
html.ln-js [data-ln="step"].ln-o { line-height: 1.15; white-space: nowrap; font-size: clamp(18px, 1.6vw, 24px); }
html.ln-js [data-ln="step"].ln-step-last { text-align: end; }
html.ln-js [data-ln="step"].ln-step-stack { font-size: 16px; }
html.ln-js [data-ln="step"].ln-cur { color: var(--accent); }
html.ln-js [data-ln="cup"].ln-o { width: auto; object-fit: contain; }
html.ln-js [data-ln="card"].ln-o, html.ln-js [data-ln="ed"].ln-o, html.ln-js [data-ln="post"].ln-o { border: 0; border-radius: 0; overflow: hidden; }
html.ln-js .ln-cwt-eds, html.ln-js .ln-posts { display: block; margin: 0 !important; }
html.ln-js [data-ln="say"].ln-o { margin: 0; }
@media (max-width: 719px) {
  html.ln-js [data-ln="card"].ln-o { gap: 8px; padding: 12px; }
  html.ln-js [data-ln="card"].ln-o .ln-glyph { width: 30px; height: 30px; margin-bottom: 8px; }
  html.ln-js [data-ln="card"].ln-o b { font-size: 21px; }
  html.ln-js [data-ln="card"].ln-o small { font-size: 12.5px; margin-top: 4px; }
  /* On a phone each price stacks over what it buys. */
  html.ln-js [data-ln="card"].ln-o .ln-price { gap: 5px; padding-top: 8px; }
  html.ln-js [data-ln="card"].ln-o .ln-pr { display: block; }
  html.ln-js [data-ln="card"].ln-o .ln-pv { display: block; font-size: 14px; }
  html.ln-js [data-ln="card"].ln-o .ln-pq { display: block; font-size: 12px; line-height: 1.3; text-align: start; }
  html.ln-js [data-ln="card"].ln-o .ln-pq.ln-pq-only { font-size: 14px; }
  html.ln-js [data-ln="ed"].ln-o { padding: 10px 12px; }
  html.ln-js [data-ln="ed"].ln-o small { display: none; }
  html.ln-js [data-ln="ed"].ln-o .ln-ed-k { margin-bottom: 2px; }
  html.ln-js [data-ln="ed"].ln-o b { font-size: 17px; }
  html.ln-js [data-ln="post"].ln-o .ln-post-k { padding: 8px 10px 0; font-size: 15px; }
  html.ln-js [data-ln="post"].ln-o b { padding: 2px 10px 10px; font-size: 14px; }
}

/* The reveal: what the pen has not reached yet waits, arrives as the pen gets
   there, and waits again if the reader scrolls back (as in the prototype).
   Until then it takes no clicks; keyboard focus reveals it at once. */
html.ln-js:not(.ln-still) .ln-o { transition: opacity .55s var(--ease), transform .8s cubic-bezier(.2, .7, .2, 1); }
html.ln-js:not(.ln-still) .ln-o:not(.on):not([data-ln="frame"]):not([data-ln="duo"]) { opacity: 0; transform: translateY(18px); pointer-events: none; }
html.ln-js:not(.ln-still) .ln-o:not(.on):not([data-ln="frame"]):not([data-ln="duo"]):focus-within { opacity: 1; transform: none; pointer-events: auto; }
html.ln-js:not(.ln-still) [data-ln="quote"].ln-o:not(.on) { transform: translateY(12px) rotate(var(--r, 0deg)); }
html.ln-js:not(.ln-still) [data-ln="cup"].ln-o:not(.on) { transform: scale(.85); }
html.ln-js:not(.ln-still) [data-ln="frame"] .ln-off { opacity: 0; }
html.ln-js:not(.ln-still) [data-ln="frame"] img, html.ln-js:not(.ln-still) [data-ln="frame"] video { transition: opacity .35s; }
html.ln-js:not(.ln-still) [data-ln="step"].ln-o.on:not(.ln-done) { opacity: .25; }
html.ln-js:not(.ln-still) [data-ln="step"].ln-o { transition: opacity .3s, color .3s; }
html.ln-js:not(.ln-still) [data-ln="frame"].ln-o, html.ln-js:not(.ln-still) [data-ln="duo"].ln-o { clip-path: inset(0 0 100% 0); }

/* Still: the finished drawing on a normal page. */
html.ln-still .ln-view { position: relative; top: 0; height: 100%; overflow: visible; overflow-x: clip; }
html.ln-still .ln-world { will-change: auto; }
html.ln-still .ln-pen { display: none; }
html.ln-still [data-ln="frame"] .ln-off { display: none; }
html.ln-still .ln-main [data-chapter="site"] [data-ln="frame"].ln-o, html.ln-still .ln-main [data-chapter="site"] [data-ln="duo"].ln-o { overflow-y: auto; }
html.ln-still .ln-strip { position: static; }
html.ln-still [data-chapter="flow"] [data-ln="frame"] video { position: absolute; }

/* ── 3. The intro (Gate 2, Nov 9): the TR mark draws itself, the R's end dot
   grows over the screen in teal, the overlay fades to the page. Only with JS
   (the boot script sets html.ln-intro), once per session, never under reduced
   motion. Never takes clicks, focus or layout. */
html.ln-intro body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--base); pointer-events: none;
  animation: ln-cover-off 0s 3s forwards;   /* line.js never ran: lift the cover anyway */
}
@keyframes ln-cover-off { to { visibility: hidden; } }
.ln-intro-ov {
  position: fixed; inset: 0; z-index: 2147483000; background: var(--base); pointer-events: none;
  overflow: hidden; animation: ln-intro-out .4s ease 1.95s forwards;
}
.ln-intro-mk { position: absolute; left: 50%; top: 50%; width: min(150px, 34vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.ln-intro-mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ln-intro-mk path {
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; animation: ln-draw .42s cubic-bezier(.6, 0, .2, 1) .1s forwards;
}
.ln-intro-mk path + path { animation-duration: .68s; animation-delay: .48s; }
.ln-intro-mk circle {
  fill: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: ln-pop .26s cubic-bezier(.3, 1.6, .5, 1) 1.12s forwards;
}
.ln-intro-mk circle + circle { animation-delay: 1.18s; }
@keyframes ln-pop { to { transform: scale(1); } }
/* The R's end dot (83,68): a full-screen teal layer cut to a circle at the dot
   (line.js measures --ln-x, --ln-y, the dot radius --ln-r0 and the distance to
   the farthest corner --ln-far). It pops with the others, then opens past every
   corner. A clip, not a scaled dot: a scaled 10px dot paints blurred and square. */
.ln-intro-dot {
  position: absolute; inset: 0; background: var(--accent);
  clip-path: circle(0 at var(--ln-x, 50%) var(--ln-y, 50%));
  animation: ln-dot-pop .26s cubic-bezier(.3, 1.6, .5, 1) 1.24s forwards, ln-grow .6s cubic-bezier(.65, 0, .2, 1) 1.4s forwards;
}
@keyframes ln-dot-pop { to { clip-path: circle(var(--ln-r0, 5px) at var(--ln-x, 50%) var(--ln-y, 50%)); } }
@keyframes ln-grow {
  from { clip-path: circle(var(--ln-r0, 5px) at var(--ln-x, 50%) var(--ln-y, 50%)); }
  to { clip-path: circle(var(--ln-far, 150vmax) at var(--ln-x, 50%) var(--ln-y, 50%)); }
}
@keyframes ln-intro-out { to { opacity: 0; visibility: hidden; } }
/* The hero's own mark waits under the overlay and draws as it opens. */
html.ln-intro-run.ln-js:not(.ln-still) .ln-hero [data-ln="mark"] path,
html.ln-intro-run.ln-js:not(.ln-still) .ln-hero [data-ln="mark"] circle,
html.ln-intro-run.ln-js:not(.ln-still) .ln-hero .ln-rev { animation-play-state: paused; }

/* The hero's words wait for the mark (Tanya, Nov 10, 2026): as its second
   stroke lands, each line rises out of a soft blur, one after the other, and
   the name comes last and slowest. Reduced motion shows them as they are. */
html.ln-js:not(.ln-still) .ln-hero .ln-rev { animation: ln-rise 1s cubic-bezier(.2, .7, .2, 1) var(--d, 1.6s) both; }
html.ln-js:not(.ln-still) .ln-hero .ln-what { --d: 1.55s; }
html.ln-js:not(.ln-still) .ln-hero .ln-lead { --d: 2s; }
html.ln-js:not(.ln-still) .ln-hero h1.ln-rev { --d: 2.3s; animation-duration: 1.4s; }
html.ln-js:not(.ln-still) .ln-hero .ln-cue { --d: 3.1s; }
@keyframes ln-rise {
  from { opacity: 0; translate: 0 .45em; filter: blur(10px); }
  60% { filter: blur(0); }
  to { opacity: 1; translate: 0 0; filter: none; }
}

/* The header waits for the first scroll on this page (Tanya, Nov 10, 2026).
   It keeps its space, so nothing moves when it arrives; keyboard focus and
   the open menu bring it back at once.
   Hidden from the first paint (html.ln-boot, set in <head>), so it never
   flashes and fades; it only animates once line.js runs. If line.js never
   arrives the header comes back by itself after 3s. */
html.ln-js body.ln-page #vn-head { transition: opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
html.ln-boot:not(.ln-scrolled):not(.ln-menu-open) body.ln-page #vn-head:not(:focus-within) {
  opacity: 0; translate: 0 -12px; pointer-events: none;
}
html.ln-boot:not(.ln-js) body.ln-page #vn-head { animation: ln-head-back 0s 3s forwards; }
@keyframes ln-head-back { to { opacity: 1; translate: 0 0; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { html.ln-intro body::after, .ln-intro-ov { display: none; } }
html.ln-intro.a11y-motion body::after, html.a11y-motion .ln-intro-ov { display: none; }
@media (max-width: 719px) { .ln-cwt-topics { font-size: 18px; gap: 0 8px; } .ln-cwt-topics li + li::before { margin-inline-end: 8px; } }