/* The homepage window in focus (the mock, "mock focus"; Randall, after ia.net/writer): one paragraph lit with its thoughts open beneath it, the rest quiet; the window bare,
   with air; Text | Subtext one quiet control under it. Motion is the app's own language (hero-motion.css: --glide, --glide-ms): a thought block opens by one height transition
   (a grid row, 0fr to 1fr) with the thoughts rising a few px into place a beat apart by depth; reduced motion: at once. */
.hf-hero { padding-top: clamp(24px, 3.4vw, 48px); }
.hf-root { max-width: 1180px; margin: clamp(32px, 4.5vw, 64px) auto 0; padding-inline: clamp(12px, 3vw, 32px); }
/* overflow: clip, not hidden: hidden would make the window its own scroller and the bar could not stick to the page's viewport. */
.hf-root .hl-window { max-width: 1120px; margin: 0 auto; border-radius: 14px; overflow: clip; padding-bottom: clamp(32px, 4vw, 56px); }
/* The sticky bar's containing block: the bar and the essay, ending at the last line (the window's bottom padding is outside it). */
.hf-sheet { position: relative; }
.hf-editor p:last-child { margin-bottom: 0; }
.hf-page {
  --hf-measure: 34em;
  box-sizing: border-box;
  max-width: calc(var(--hf-measure) + 2 * clamp(24px, 7vw, 112px));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) clamp(24px, 7vw, 112px) 0;
}
.hf-editor { outline: none; caret-color: var(--sx-accent, #2d5a80); }
.hf-editor p {
  margin: 0 0 clamp(22px, 2.2vw, 30px);
  font: 400 clamp(19px, 0.55vw + 15.5px, 24px)/1.68 var(--sx-face-b, "Iowan Old Style", Charter, Georgia, serif);
  color: color-mix(in srgb, var(--sx-ink) 50%, var(--hl-page, var(--sx-ground-2)));
  text-wrap: pretty;
  transition: color var(--glide-ms, 320ms) var(--glide, ease);
}
.hf-editor p.is-lit, .hf-root[data-view="subtext"] .hf-editor p { color: var(--sx-ink); }
/* No marks drawn at rest: the words are the words. */
.hf-editor .mark-subtext, .hf-editor .mark-context { background: none; text-decoration: none; border: 0; box-shadow: none; }
/* The caret at rest: drawn at the end of the lit paragraph, the page's one accent colour, until the page is focused (then the real one). */
.hf-root:not(.is-editing) .hf-editor p.is-lit::after { content: ""; display: inline-block; width: 2px; height: 1.12em; margin-left: 2px; vertical-align: text-bottom; background: var(--sx-accent, #2d5a80); animation: hf-blink 1.15s steps(1) infinite; }
@keyframes hf-blink { 50% { opacity: 0; } }
/* The invitation in the last, empty paragraph: its words only (the one caret is the lit paragraph's). */
.hf-editor p[data-para="p5"]::after { display: none !important; }
.hf-editor p[data-para="p5"].is-lit { position: relative; }
/* The thoughts: a block after the paragraph that has them; closed, nothing of it is in the flow. */
.hf-editor p:has(+ .hf-tblock) { margin-bottom: 0; }
/* Closed, a block is not there for the keyboard or a screen reader either (its fields would be tab stops nobody can see): hidden once it has folded, shown the moment it opens. */
.hf-tblock { display: grid; grid-template-rows: 0fr; margin: 0 0 clamp(22px, 2.2vw, 30px); visibility: hidden; transition: grid-template-rows 200ms var(--glide, ease), visibility 0s linear 200ms; }
.hf-tin { min-height: 0; overflow: hidden; }
.hf-editor p.is-lit + .hf-tblock, .hf-root[data-view="subtext"] .hf-tblock { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--glide-ms, 320ms) var(--glide, ease), visibility 0s; }
.hf-tblock .hl-thoughts { margin: 14px 0 0 4px; }
.hf-tblock .hl-add { opacity: 0; }
.hf-tblock:is(:hover, :focus-within) .hl-add, .hl-window[data-touch] .hf-tblock .hl-add { opacity: 1; }
/* The thoughts' own ink is the softer subtext ink (quieter than the lit words), and they rise into place a beat apart by depth. */
.hf-tblock .hl-line :is(textarea, .hl-static-thought), .hf-tblock .hl-anchor-words { color: var(--sx-soft); }
.hf-tblock .hl-row.is-ai > .hl-line > :is(textarea, .hl-static-thought) { color: var(--hl-ai); }
.hf-tblock .hl-row > .hl-line { opacity: 0; transform: translateY(5px); transition: opacity 160ms ease, transform 160ms var(--glide, ease); }
.hf-editor p.is-lit + .hf-tblock .hl-row > .hl-line, .hf-root[data-view="subtext"] .hf-tblock .hl-row > .hl-line { opacity: 1; transform: none; transition-duration: 280ms; transition-delay: calc(60ms + (var(--depth, 1) - 1) * 30ms); }
/* The document's own bar: just Text | Subtext, centred, at the top of the window. Sticky inside the window: pinned to the top of the viewport while any of the window is on screen,
   and when the window's bottom edge reaches it the bar rides up with the window (that is what sticky does) while focus.js fades it by how much window is left. Text passes under it
   through a soft mask in the window's own paper, so no crisp word ever sits beneath the buttons. */
.hf-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; align-items: center; box-sizing: border-box; min-height: 60px; padding: 14px 24px 6px; opacity: var(--hf-bar-o, 1); }
.hf-bar::before { content: ""; position: absolute; inset: 0 0 -48px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--hl-page) 0, var(--hl-page) 56%, color-mix(in srgb, var(--hl-page) 78%, transparent) 70%, color-mix(in srgb, var(--hl-page) 40%, transparent) 84%, transparent 100%); }
.hf-bar .hf-open { position: absolute; right: clamp(16px, 3vw, 36px); top: 50%; translate: 0 -40%; font: 400 13px/1.4 var(--sx-ui); color: var(--sx-soft); text-decoration: none; white-space: nowrap; }
.hf-bar .hf-open[hidden] { display: none; }
.hf-bar .hf-open:hover { color: var(--sx-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Below the window: the way in. */
.hf-under { display: grid; justify-items: center; gap: 18px; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.hf-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sx-ground-3); }
.hf-switch button { padding: 5px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--sx-muted); font: 500 13px/20px var(--sx-ui); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.hf-switch button:hover { color: var(--sx-ink); }
.hf-switch button[aria-checked="true"] { background: var(--sx-ground-2); color: var(--sx-ink); box-shadow: 0 0 0 1px var(--sx-line-2), 0 1px 2px rgb(0 0 0 / 0.06); }
.hf-switch button:focus-visible, .hf-under a:focus-visible, .hf-bar a:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.hf-ways { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 28px; margin: 0; font: 500 15px/1.4 var(--sx-ui); }
.hf-ways a { display: inline-block; color: var(--sx-accent-ink, var(--sx-accent)); text-decoration: none; }
.hf-ways a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hf-editor p, .hf-tblock, .hf-tblock .hl-row > .hl-line, .hf-switch button { transition: none !important; }
  .hf-root:not(.is-editing) .hf-editor p.is-lit::after { animation: none; }
}
@media (max-width: 719px) {
  .hf-page { padding: 20px 20px 0; }
  .hf-root .hl-window { padding-bottom: 32px; }
  .hf-bar { min-height: 64px; padding-inline: 12px; }
  .hf-switch button { min-height: 44px; padding-inline: 20px; font-size: 15px; }
  .hf-bar .hf-open { right: 14px; font-size: 12px; }
}
/* The keyboard sees where it is (Tab into the page rings it); a click, a tap or a key that starts the writing shows none: the caret is the sign then (is-pointer, as in the app's window). */
.hf-root .hf-editor:focus-visible { outline: none; }
.hf-root:not(.is-pointer) .hf-editor:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 10px; border-radius: 4px; }
/* Without a script the window is its first frame: the switch has nothing to switch. */
html:not(.js) .hf-bar { display: none; }
/* The window is a page you can write on: the text cursor over it (the switch and links keep the pointer). */
.hf-window { cursor: text; }
.hf-window :is(button, a) { cursor: pointer; }
/* Under the app's morph (hero/morph.js) the view transition is the only motion: the page's own transitions stand down so it isn't animating itself beneath its own snapshots. */
.hf-root.is-morphing :is(.hf-editor p, .hf-tblock, .hf-tblock *) { transition: none !important; }
/* The page goes live in place: until it has been painted once, nothing transitions (the first frame already shows p2 open; the live one must not open it again). */
.hf-root.is-mounting :is(.hf-editor p, .hf-tblock, .hf-tblock *) { transition: none !important; }