/* The homepage hero, live (Randall: "ship the home page"): the headline and a short line centred, the app's own page in a framed window
   on the page's ground, as a big framed page sits under a headline. The window holds the page and its Text | Subtext switch, in the app's
   own type: the page in the reading face (Iowan, the app's), the thoughts and the chrome in the UI face. Tokens only, so the dark scheme
   follows the site's. The window is as tall as what's in it: nothing scrolls inside, so the wheel always moves the page. */
/* Round 2 (Randall: "It needs to share the hero"): the headline and a short line centred, the way in just above the
   window, the window big and centred under them (above the fold at 1440×900), the longer line after it. */
.d3-hero.is-live { padding-top: clamp(16px, 2.6vw, 36px); }
.hl-head { text-align: center; }
.hl-head .sx-d1 {
  margin: 0 0 12px;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.04;
  white-space: normal;
}
.hl-head .sx-practical { margin: 0; }
.hl-head .d3-cta { margin: 14px 0 0; }
.hl-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-accent-ink, var(--sx-accent));
  font: 500 15px/20px var(--sx-ui);
  text-decoration: none;
}
.hl-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.hl-cta:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 3px; border-radius: 4px; }
/* The window pops a little more off its ground (Randall, 27 Oct, "A"): the band a step deeper, the page a touch brighter, a 1px hairline,
   a soft wide shadow and a firmer contact shadow at the bottom edge. */
:root {
  --hl-band: #ecebe6; --hl-page-top: #fdfcfa; --hl-ring: rgb(40 34 20 / 0.09);
  --hl-edge: 0 0 0 1px var(--hl-ring), 0 1px 2px rgb(30 25 10 / 0.07), 0 8px 10px -8px rgb(30 25 10 / 0.18), 0 26px 52px -22px rgb(30 25 10 / 0.22);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --hl-band: #070808; --hl-page-top: #232428; --hl-ring: rgb(255 255 255 / 0.09); --hl-edge: 0 0 0 1px var(--hl-ring), 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 10px -8px rgb(0 0 0 / 0.6), 0 28px 56px -22px rgb(0 0 0 / 0.7); }
}
html[data-theme="dark"] { --hl-band: #070808; --hl-page-top: #232428; --hl-ring: rgb(255 255 255 / 0.09); --hl-edge: 0 0 0 1px var(--hl-ring), 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 10px -8px rgb(0 0 0 / 0.6), 0 28px 56px -22px rgb(0 0 0 / 0.7); }
.hl-stage {
  max-width: 1240px;
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding: clamp(10px, 2vw, 28px);
  border-radius: calc(var(--sx-radius) + 6px);
  background: var(--hl-band);
}
/* The band under the window (Randall: "still looks like a fucking accident"; his words, verbatim): on the page's own grid, the same left edge as
   "Write the draft." below. Two columns from 900 px: the lead, the second sentence and the quiet film link in columns 1-5; the film's poster,
   large, in 7-12, with the hero window's edge. One section gap above (the next section brings its own below). A phone stacks it, left-aligned,
   the poster full width under the words. */
.hl-after { display: grid; gap: var(--sx-s7); margin-top: var(--sx-section); text-align: left; }
@media (min-width: 900px) {
  .hl-after { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sx-gutter); align-items: center; }
  .hl-after-text { grid-column: 1 / span 5; }
  .hl-poster { grid-column: 7 / -1; }
}
.hl-after-text { min-width: 0; }
.hl-lead { margin: 0; max-width: 17em; font: var(--sx-d1-wt, 400) clamp(24px, 1.2vw + 14px, 32px)/1.22 var(--display); letter-spacing: -0.014em; color: var(--sx-ink); text-wrap: balance; }
.hl-support { margin: var(--sx-s4) 0 0; max-width: 28em; font: 400 clamp(16px, 0.3vw + 15px, 18px)/1.55 var(--sx-ui); color: color-mix(in srgb, var(--sx-ink) 78%, var(--sx-soft)); text-wrap: pretty; }
.hl-after .film-cta { margin: var(--sx-s6) 0 0; display: flex; justify-content: flex-start; }
.hl-after .film-link { padding: 6px 0; }
/* The poster: a real frame of the film, 16:9, with the window's edge and a clean play button. */
.hl-poster { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0a1220; box-shadow: var(--hl-edge); }
.hl-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-poster .film-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; flex: none; border-radius: 50%; color: #0b1220; background: rgb(255 255 255 / 0.94); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.38); transition: transform var(--sx-dur-1, 160ms) var(--sx-ease, ease), background-color var(--sx-dur-1, 160ms) var(--sx-ease, ease); }
.hl-poster .film-play .sx-icon { width: 28px; height: 28px; margin-left: 3px; }
.hl-poster:hover .film-play { transform: scale(1.06); background: #fff; }
.hl-poster:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 4px; }
@media (max-width: 899px) { .hl-poster .film-play { width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .hl-poster:hover .film-play { transform: none; } }

.hl-window {
  --hl-page: var(--hl-page-top);
  --hl-col: 640px;
  --hl-sub: #7693ab;
  --hl-ai: var(--sx-muted);
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hl-page);
  box-shadow: var(--hl-edge);
  color: var(--sx-ink);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .hl-window { --hl-sub: #5d7187; --hl-ai: #a9b3bc; }
}
html[data-theme="dark"] .hl-window { --hl-sub: #5d7187; --hl-ai: #a9b3bc; }

/* The bar: the document's name, the switch in the middle, and the quiet way into the app. */
.hl-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--sx-line);
  font: 400 14px/20px var(--sx-ui);
}
.hl-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-soft);
}
.hl-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--sx-ground-3);
}
.hl-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sx-muted);
  font: inherit;
  cursor: pointer;
}
.hl-switch button svg { width: 16px; height: 16px; }
.hl-switch button[aria-checked="true"] {
  background: var(--hl-page);
  color: var(--sx-ink);
  box-shadow: 0 0 0 1px var(--sx-line), 0 1px 2px rgb(0 0 0 / 0.06);
}
.hl-switch button:focus-visible,
.hl-open:focus-visible,
.hl-count:focus-visible,
.hl-add:focus-visible,
.hl-para-words:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.hl-open {
  justify-self: end;
  color: var(--sx-muted);
  font-size: 13px;
  text-decoration: none;
}
.hl-open:hover { color: var(--sx-ink); text-decoration: underline; text-underline-offset: 3px; }

/* The body: a page of the app's size, scrolled inside the window. */
/* No scroller inside (round 2: the wheel always moves the page): the window is as tall as what's in it. */
.hl-body { position: relative; }
.hl-page,
.hl-tree {
  max-width: calc(var(--hl-col) + 2 * 48px);
  margin: 0 auto;
  padding: 28px 48px 20px;
}
/* A long Subtext view: the first paragraphs, then the rest on asking. */
.hl-more {
  display: block;
  margin: 4px auto 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sx-muted);
  font: 400 14px/20px var(--sx-ui);
  cursor: pointer;
}
.hl-more:hover { background: var(--sx-hover); color: var(--sx-ink); }
.hl-more:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.hl-editor { outline: none; }
.hl-editor p,
.hl-para-words {
  text-wrap: pretty; /* no lone last word (the site's no-orphan rule) */
  margin: 0 0 14px;
  font: 400 20px/1.62 var(--sx-face-b, "Iowan Old Style", Charter, Georgia, serif);
  color: var(--sx-ink);
}
/* The editor sets break-spaces, which turns balanced wrapping off: as the first frame wraps, so does the live page. */
.hl-window .hl-editor { white-space: pre-wrap; }
/* A ring for the keyboard (live.js drops it after a click or tap: the caret is the sign then). */
.hl-editor:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 8px; border-radius: 4px; }
.hl-line textarea:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 3px; border-radius: 4px; }
.hl-window.is-pointer .hl-editor:focus-visible, .hl-window.is-pointer .hl-line textarea:focus-visible { outline: none; }
.mark-subtext { text-decoration: underline 1.5px var(--hl-sub); text-underline-offset: 5px; }
.mark-context { background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--sx-gold, #d4b46a) 35%, transparent) 62%); }

/* Beside each paragraph with thoughts: how many, a way into them (the app's layers mark). */
.hl-marks {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
}
.hl-count {
  position: absolute;
  left: calc(50% + var(--hl-col) / 2 + 20px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sx-muted);
  font: 400 12px/16px var(--sx-ui);
  cursor: pointer;
  pointer-events: auto;
}
.hl-count svg { width: 14px; height: 14px; }
.hl-count:hover { background: var(--sx-hover); color: var(--sx-ink); }

/* The Subtext view: each paragraph, its thoughts beneath on a rail. */
.hl-para { position: relative; margin: 0 0 28px; }
.hl-para-words {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: text;
}
.hl-pilcrow {
  position: absolute;
  left: -28px;
  top: 4px;
  color: var(--sx-muted);
  font: 400 16px/1 var(--sx-ui);
}
.hl-thoughts,
.hl-thoughts ul { margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 1px solid var(--sx-line-2); }
.hl-thoughts { margin-left: 6px; }
.hl-row { margin: 0; }
.hl-line { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.hl-line > i {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--sx-soft);
}
.hl-row.is-ai > .hl-line > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hl-ai); }
.hl-row.is-anchor > .hl-line > i { width: 10px; height: 2px; margin-top: 11px; border-radius: 1px; }
.hl-line textarea,
.hl-static-thought {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sx-ink);
  font: 400 16px/1.5 var(--sx-ui);
  resize: none;
  overflow: hidden;
}
.hl-row.is-ai > .hl-line > :is(textarea, .hl-static-thought) { color: var(--hl-ai); }
.hl-anchor-words {
  font: 400 17px/1.5 var(--sx-face-b, "Iowan Old Style", Georgia, serif);
  text-decoration: underline 1.5px var(--hl-sub);
  text-underline-offset: 4px;
}
.hl-add {
  margin: 4px 0 0 28px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sx-muted);
  font: 400 13px/18px var(--sx-ui);
  cursor: pointer;
  opacity: 0;
}
.hl-para:is(:hover, :focus-within) .hl-add,
.hl-window[data-touch] .hl-add { opacity: 1; }
.hl-add:hover { background: var(--sx-hover); color: var(--sx-ink); }

/* A narrower window: the marks just inside the column's edge. */
@media (max-width: 1000px) {
  .hl-count { left: auto; right: 12px; }
  .hl-page { padding-right: 64px; }
}
/* Phones: the same frame and essay; the switch big, across the bar; the name and the way into the app beneath it. */
@media (max-width: 719px) {
  .hl-stage { margin-inline: 10px; padding: 8px; border-radius: var(--sx-radius); }
  .hl-bar { grid-template-columns: 1fr auto; padding: 10px 12px; }
  .hl-title { display: none; }
  .hl-switch { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .hl-switch button { justify-content: center; min-height: 44px; font-size: 16px; }
  .hl-open { grid-column: 1 / -1; justify-self: center; }
  .hl-page, .hl-tree { padding: 24px 20px 40px 36px; }
  .hl-editor p, .hl-para-words { font-size: 18px; }
  .hl-count { right: 6px; }
  .hl-page { padding-right: 44px; }
}

/* The invitation to keep writing (round 3, Randall: "a call to action to start typing... quietly, in the window"): the
   last paragraph is empty, with a faint "Keep writing…" and a drawn caret blinking at its start, as iA shows. The caret is a
   drawing, not focus (no keyboard on a phone); it and the words go the moment the page is in use. A click anywhere in the
   words puts the real caret there. No blink under reduced motion. */
.hl-editor p[data-para="p5"]:is(:empty, :has(> br:only-child)) { position: relative; min-height: 1.66em; }
.hl-editor p[data-para="p5"]:is(:empty, :has(> br:only-child))::before {
  content: "Keep writing…";
  position: absolute;
  left: 3px;
  top: 0;
  color: var(--sx-muted);
  pointer-events: none;
}
.hl-editor p[data-para="p5"]:is(:empty, :has(> br:only-child))::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.5px;
  height: 1.1em;
  background: var(--sx-accent-ink, var(--sx-ink));
  pointer-events: none;
  animation: hl-blink 1.1s steps(1, end) infinite;
}
.hl-editor:focus-within p[data-para="p5"]:is(:empty, :has(> br:only-child))::after { display: none; }
@keyframes hl-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hl-editor p[data-para="p5"]:is(:empty, :has(> br:only-child))::after { animation: none; }
}

/* The example Ghost Editor thought (Randall: "build it"): a hollow bullet in the softer ink (the app's AI mark), the label
   above it saying what it is. It arrives with a short fade; its count in the Text view fades in too. No motion under
   reduced motion. */
.hl-ghost-box { flex: 1 1 auto; min-width: 0; }
.hl-ghost-label { display: block; margin-bottom: 1px; color: var(--sx-muted); font: 500 12px/16px var(--sx-ui); }
.hl-row.is-ghost > .hl-line > i { margin-top: 26px; }
.hl-row.is-fresh { animation: hl-fade 520ms ease-out both; }
.hl-count.is-new { animation: hl-fade 520ms ease-out both; background: var(--sx-hover); }
@keyframes hl-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hl-row.is-fresh, .hl-count.is-new { animation: none; }
}
.hl-ghost-box textarea { display: block; width: 100%; }
.hl-row.is-ai .hl-ghost-box textarea { color: var(--hl-ai); }

/* The window's caption (Randall: "This is the app. Keep writing, then switch to Subtext."): one quiet line, centred, just
   above the window's top edge, in the hero's secondary ink. */
.hl-caption {
  margin: 0 0 10px;
  color: var(--sx-muted);
  font: 400 15px/22px var(--sx-ui);
  text-align: center;
}
@media (max-width: 719px) { .hl-caption { padding: 0 6px; font-size: 14px; } }