/* Home and Quest: assembled by tools/home/build.mjs from tools/home/page.css and tools/home/emblems/*.css. Edit those, not this. */

/* Home: the title page of an illuminated book under a turning night (the owner, 2026-10-20: "I like A, Title Page.";
   "give the stars a slow Coriolis spin and get a milky way stripe like on [the PC app]"; "Make the sky prettier
   but not higher contrast"). Three gold-line emblems, each slowly alive, their names in spaced capitals, set between
   gilt flourishes drawn in the Fate spinner's hand; the Foundry's seal and name close the page as a book's colophon
   does. Quest's page is the same leaf. The sky (sky.js) turns once in ten minutes about a pole above the page.

   The arrival is calm and in order: the words first, the emblems drawing in, the flourishes drawn out from their
   jewels with one glint, then the night behind it all. Nothing zooms; nothing moves that pulls the eye from the words. */

/* ── the night ─────────────────────────────────────────────────────────────────────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0;
  transition: opacity 3200ms cubic-bezier(0.33, 0, 0.25, 1) 250ms; }
.sky.lit { opacity: 1; }
/* The turn begins 10.8° past the painted sky (eighteen seconds into it): at that angle no star stands beside the header's
   name or the page's words while the night comes up and the page is first read, on a phone and on a desktop. */
.sky .rotor { position: absolute; animation: page-coriolis 600s linear -18s infinite; }
.sky canvas { position: absolute; left: 0; top: 0; display: block; }
/* a few stars breathe, slowly and out of step, never flashing */
.sky .twinkle { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: #f4f6ff;
  box-shadow: 0 0 3px 0.5px rgba(214, 222, 238, 0.32); animation: page-twinkle 8.4s ease-in-out infinite; }
.sky .twinkle.t2 { animation-duration: 10.6s; animation-delay: -3.7s; }
.sky .twinkle.t3 { animation-duration: 12.2s; animation-delay: -6.1s; background: #f1ebdc; }
.sky .twinkle.t4 { animation-duration: 9.2s; animation-delay: -1.9s; background: #dce8ff; }
@keyframes page-coriolis { to { transform: rotate(360deg); } }
@keyframes page-twinkle { 0%, 100% { opacity: 0.32; transform: scale(0.8); } 50% { opacity: 0.78; transform: scale(1); } }

/* ── the page: header at the top, the leaves centred in what is left, the colophon at the foot ──────────────── */
main.home {
  /* one unit sets the page: an emblem's size. A phone's is 100px when the page has room for it; when Chrome's bars and
     the gesture bar leave less height (the Pixel 9a's Chrome tab), the unit follows the height actually free, so the
     whole title page, colophon included, stands above the gesture bar (the owner, 2026-10-20: "all of my text is
     getting clipped at the bottom and the action bar is interfering with clear view of the text"). */
  --home-u: clamp(4.75rem, calc((100svh - env(safe-area-inset-top, 0px) - var(--bottom-clear) - 196px) / 5.6), 6.25rem);
  --home-name: max(1.5rem, calc(var(--home-u) * 0.28));     /* a place's name: 1.75rem on a phone, never under 1.5rem */
  --home-line: max(1.0625rem, calc(var(--home-u) * 0.18));  /* its line: 1.125rem on a phone, never under 1.0625rem */
  --home-orn: calc(var(--home-u) * 2.32);                   /* a flourish's width */
  /* the leaf's rhythm, set close on a phone so the whole title page stands in one screen with Chrome's bars showing */
  --pad-t: 0.04; --pad-b: 0.05; --em-gap: 0.11; --line-gap: 0.05; --line-lh: 1.32; --orn-t: 0.07; --orn-b: 0.07;
  --night: 2, 4, 10;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - var(--bottom-clear));
  padding-block: 8px 10px;
}
.home .brand { order: -1; width: 100%; text-align: left; }
/* The height left over goes first above the leaves, so the header never crowds them (28px of air once the screen has
   it), then two parts above to three below, so the leaves sit at the page's optical centre. On a short screen the two
   gaps close together, so the colophon stays whole down to a 780px-high phone. */
main.home::before { content: ""; flex: 2 1 clamp(8px, 100svh - 772px, 28px); }
main.home::after { content: ""; flex: 3 1 clamp(10px, 100svh - 768px, 16px); }
/* Quest's page has one leaf: it sits nearer the middle */
[data-page="quest"] main.home::before { flex-grow: 5; }
[data-page="quest"] main.home::after { flex-grow: 6; }
.home .colophon, .home footer { order: 1; }

/* ── a leaf: the emblem on its pool of night, its name in gilt capitals, its line ──────────────────────────── */
.leaf { --d: 0ms; --home-e: var(--home-u); position: relative; isolation: isolate; display: grid; justify-items: center;
  padding: calc(var(--home-u) * var(--pad-t)) calc(var(--home-u) * 0.2) calc(var(--home-u) * var(--pad-b)); border-radius: calc(var(--home-u) * 0.26);
  text-decoration: none; color: var(--paper); width: fit-content; min-width: min(100%, calc(var(--home-u) * 2.72)); max-width: 100%; -webkit-tap-highlight-color: transparent; }
.leaf-fate { --d: 160ms; }
.leaf-quest { --d: 320ms; }
.leaf .mount { position: relative; isolation: isolate; display: block; width: var(--home-e); height: var(--home-e); margin-bottom: calc(var(--home-u) * var(--em-gap)); }
/* Night held quietly under the engraving and under the words, so the turning galaxy never runs through either: each a
   wide, soft fall of the page's own ink with no edge to see, lowering the sky behind them and never lifting anything. */
/* Each fall is one smooth curve, sampled finely, so no ring shows in it even on an OLED at night; the emblem's is light
   and wide, a hush in the sky rather than a hole in it. */
.leaf .mount::before, .leaf .mount::after { content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%; pointer-events: none; }
.leaf .mount::before { background: radial-gradient(closest-side, rgba(var(--night), 0.38) 0%, rgba(var(--night), 0.378) 5%, rgba(var(--night), 0.372) 10%,
  rgba(var(--night), 0.363) 15%, rgba(var(--night), 0.35) 20%, rgba(var(--night), 0.334) 25%, rgba(var(--night), 0.315) 30%, rgba(var(--night), 0.293) 35%,
  rgba(var(--night), 0.268) 40%, rgba(var(--night), 0.242) 45%, rgba(var(--night), 0.214) 50%, rgba(var(--night), 0.185) 55%, rgba(var(--night), 0.156) 60%,
  rgba(var(--night), 0.127) 65%, rgba(var(--night), 0.099) 70%, rgba(var(--night), 0.073) 75%, rgba(var(--night), 0.049) 80%, rgba(var(--night), 0.029) 85%,
  rgba(var(--night), 0.014) 90%, rgba(var(--night), 0.004) 95%, rgba(var(--night), 0) 100%); }
.leaf::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; transform: translateX(-50%);
  width: min(calc(var(--home-u) * 3.5), 100vw - 32px); top: calc(var(--home-e) * 0.9); bottom: calc(var(--home-u) * -0.3);
  background: radial-gradient(closest-side, rgba(var(--night), 0.74) 0%, rgba(var(--night), 0.74) 10%, rgba(var(--night), 0.739) 15%,
  rgba(var(--night), 0.738) 20%, rgba(var(--night), 0.734) 25%, rgba(var(--night), 0.728) 30%, rgba(var(--night), 0.718) 35%, rgba(var(--night), 0.703) 40%,
  rgba(var(--night), 0.681) 45%, rgba(var(--night), 0.65) 50%, rgba(var(--night), 0.611) 55%, rgba(var(--night), 0.561) 60%, rgba(var(--night), 0.499) 65%,
  rgba(var(--night), 0.427) 70%, rgba(var(--night), 0.346) 75%, rgba(var(--night), 0.258) 80%, rgba(var(--night), 0.169) 85%, rgba(var(--night), 0.088) 90%,
  rgba(var(--night), 0.025) 95%, rgba(var(--night), 0) 100%); }
/* lamplight on the gold when the leaf is touched, hovered or focused */
.leaf .mount::after { inset: -14%; opacity: 0; transition: opacity 600ms ease;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.26), rgba(212, 175, 55, 0.09) 58%, rgba(212, 175, 55, 0)); }
.leaf .emblem { display: block; width: 100%; height: 100%; overflow: visible; }
/* gilt capitals: the gradient is one line tall and repeats, so every line of a name is lit alike */
.leaf .name { --lh: 1.04; position: relative; margin: 0; font: 600 var(--home-name)/var(--lh) var(--serif); letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff7de 14%, #f4e2a6 36%, #e2c56c 58%, #c9a446 74%, #a07c28 92%) 0 0 / 100% calc(var(--lh) * 1em) repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 9px rgba(var(--night), 0.92)); }
/* Soon: a note in the margin, never a button: gilt small capitals between two short hairline rules, set quieter than
   the name it annotates */
.leaf .name .soon { display: inline-flex; align-items: center; gap: 0.55em; vertical-align: 0.36em; margin-left: -0.4em; padding: 0; border: 0; border-radius: 0;
  font: 600 max(1rem, 0.5em)/1 var(--serif); letter-spacing: 0.24em; text-indent: 0;
  background: linear-gradient(180deg, #f3e5bb 12%, #dcc283 52%, #b39247 92%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: 0.8; }
.leaf .name .soon::before, .leaf .name .soon::after { content: ""; flex: none; width: 0.7em; height: 1px;
  background: linear-gradient(90deg, rgba(226, 200, 128, 0), rgba(226, 200, 128, 0.85)); }
/* the last letter's spacing stands in for part of the gap after it */
.leaf .name .soon::after { margin-left: -0.24em; transform: scaleX(-1); }
/* on Home the note hangs to the right of Quest's name, so the name itself stands on the page's axis like the others */
/* Soon sits centred under Quest's name, as on Quest's own page, so every title keeps the one centre line. */
.leaf:not(.still) .name .soon { display: flex; width: fit-content; margin: 0.55em auto 0; position: relative; left: calc(var(--home-name) * -0.075); }
.leaf-quest:not(.still) { min-width: min(100%, calc(var(--home-u) * 3.5)); }
/* Home's lines are one line each (the owner, 2026-10-20: "reduce the verbosity of the emblem sub-text from two lines to one"). */
.leaf:not(.still) .line { max-width: none; white-space: nowrap; }
.leaf .line { margin: calc(var(--home-u) * var(--line-gap)) 0 0; font: italic 500 var(--home-line)/var(--line-lh) var(--serif); color: #ddd7cb; max-width: 30ch; text-wrap: balance;
  text-shadow: 0 0 12px rgb(var(--night)), 0 0 4px rgb(var(--night)), 0 0 1px rgba(var(--night), 0.8); transition: color 400ms ease; }

.leaf:active .mount::after, .leaf:focus-visible .mount::after { opacity: 1; transition-duration: 160ms; }
.leaf:active .line { color: #f3eee4; transition-duration: 120ms; }
@media (hover: hover) {
  .leaf:hover .mount::after { opacity: 1; }
  .leaf:hover .line { color: #f3eee4; }
}
/* the keyboard's ring follows the leaf's own rounded edge, drawn just inside it so it clears the flourish below */
.home .leaf:focus-visible { outline: 1px solid rgba(241, 221, 158, 0.78); outline-offset: -1px; border-radius: calc(var(--home-u) * 0.26); }

/* Quest's own page: the same leaf, larger; its title one line wherever a phone allows, its tag centred beneath */
.leaf.still { --d: 0ms; --home-e: calc(var(--home-u) * 1.32); --home-name: calc(var(--home-u) * 0.29); padding-top: calc(var(--home-u) * 0.04);
  padding-inline: calc(var(--home-u) * 0.08); }
.leaf.still .name { --lh: 1.2; letter-spacing: 0.15em; text-indent: 0; padding-left: 0.15em; margin-top: 2px; }
.leaf.still .name .soon { display: flex; width: fit-content; margin: 0.7em auto 0.1em; position: relative; left: calc(var(--home-name) * -0.075); }
.leaf.still .line { max-width: 36ch; margin-top: calc(var(--home-u) * 0.1); }
.leaf.still + .orn { --d: 0ms; margin-top: calc(var(--home-u) * 0.12); }

/* ── the flourish between leaves: a rule swelling from a jewel to two fine points, a lens of hairlines over it ── */
.home .orn { position: relative; z-index: 1; display: block; width: var(--home-orn); margin: calc(var(--home-u) * var(--orn-t)) 0 calc(var(--home-u) * var(--orn-b)); line-height: 0; --d: 0ms; }
.leaf-fate + .orn { --d: 160ms; }
.leaf-quest + .orn { --d: 320ms; }
.home .orn svg { display: block; width: 100%; height: auto; overflow: visible; }
.home .orn .reveal { transform-box: fill-box; transform-origin: center; }
.home .orn .jewel { transform-box: fill-box; transform-origin: center; }
.home .orn .glint { opacity: 0; transform-box: view-box; transform-origin: 0 0; }

/* ── the colophon: the Foundry's seal between two short gilt rules, and its name in the PC app's quiet italic ── */
.home .colophon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; flex: none; }
.home .seal { display: block; flex: none; width: 24px; height: 24px; opacity: 0.9; }
.home .flank { display: block; width: 42px; height: 4px; overflow: visible; opacity: 0.62; }
.home .flank:last-child { transform: scaleX(-1); }
/* once the page has arrived, and then rarely, the seal's star catches the light: once in forty seconds, on the emblems'
   twenty-second clock, so it never meets the Vault card's glint */
.home .seal-glint { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; overflow: visible; opacity: 0; pointer-events: none; }
.home footer { position: relative; z-index: 1; margin: 3px 0 0; font: italic 500 1.1875rem/1.2 var(--serif); letter-spacing: 0.01em; color: #a5afbd; }
.home .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.home ::selection { color: #fff8e6; background: rgba(212, 175, 55, 0.32); }

/* ── the arrival ───────────────────────────────────────────────────────────────────────────────────────────── */
/* The words wait for their own face (display=block) and begin a moment in, so a quick font lands before they show. */
.leaf .name { animation: page-words 1000ms cubic-bezier(0.22, 0.6, 0.2, 1) calc(260ms + var(--d)) both; }
.leaf .line { animation: page-words 1000ms cubic-bezier(0.22, 0.6, 0.2, 1) calc(380ms + var(--d)) both; }
.leaf .mount { animation: page-emblem 2000ms cubic-bezier(0.33, 0, 0.2, 1) calc(560ms + var(--d) * 1.5) both; }
.home .orn .draw { animation: page-fade 500ms ease-out calc(1000ms + var(--d)) both; }
.home .orn .reveal { animation: page-reveal 1500ms cubic-bezier(0.5, 0, 0.15, 1) calc(1000ms + var(--d)) both; }
.home .orn .jewel { animation: page-jewel 900ms cubic-bezier(0.3, 0, 0.2, 1) calc(850ms + var(--d)) both; }
.home .orn .to-r { animation: page-glint-r 1500ms cubic-bezier(0.45, 0, 0.3, 1) calc(2300ms + var(--d)) both; }
.home .orn .to-l { animation: page-glint-l 1500ms cubic-bezier(0.45, 0, 0.3, 1) calc(2300ms + var(--d)) both; }
.home .colophon, .home footer { animation: page-fade 1600ms ease calc(1500ms + var(--d, 0ms)) both; }
.home footer { --d: 120ms; }
.home .seal-glint { animation: page-seal-glint 40s ease-in-out 3400ms infinite both; }
@keyframes page-words { from { opacity: 0; transform: translateY(6px); } }
@keyframes page-emblem { from { opacity: 0; transform: translateY(4px); } }
@keyframes page-fade { from { opacity: 0; } }
/* drawn out from the jewel, as the Fate spinner draws its flourish under a word */
@keyframes page-reveal { from { transform: scaleX(0); } }
@keyframes page-seal-glint { 0% { opacity: 0; } 2.16% { opacity: 0.72; } 5.76%, 100% { opacity: 0; } }
@keyframes page-jewel { from { opacity: 0; transform: rotate(-90deg); } }
@keyframes page-glint-r { 0% { opacity: 0; transform: translateX(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(108px); } }
@keyframes page-glint-l { 0% { opacity: 0; transform: translateX(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-108px); } }

/* ── a wide screen: the same title page, set as large as its height allows (the phone's page, scaled whole) ──── */
@media (min-width: 760px) {
  /* a laptop's short screen sets the page smaller rather than cut it at the fold; the words keep their floors */
  main.home { --home-u: clamp(4.25rem, calc((100svh - 240px) * 0.142), 11.5rem); padding-bottom: 14px; }
  main.home::before { flex-basis: 8px; }
  main.home::after { flex-basis: 20px; }
  .leaf.still { --home-name: calc(var(--home-u) * 0.3); padding-inline: calc(var(--home-u) * 0.2); }
  .leaf.still .name { letter-spacing: 0.2em; padding-left: 0.2em; }
  .leaf.still .name .soon { left: calc(var(--home-name) * -0.1); }
  .leaf.still .line { max-width: 34ch; }
  /* the colophon grows a little with the page, so a large monitor's is not a footnote */
  .home .seal, .home .seal-glint { --s: clamp(28px, calc(var(--home-u) * 0.21), 34px); width: var(--s); height: var(--s); }
  .home .seal-glint { margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
  .home .flank { width: calc(var(--home-u) * 0.36); height: 5px; }
  .home .colophon { gap: calc(var(--home-u) * 0.06); }
  .home footer { font-size: clamp(1.1875rem, calc(var(--home-u) * 0.15), 1.5rem); }
  .home .leaf:focus-visible { outline-width: 1.5px; }
}
/* a tall screen has room for the leaves' fuller rhythm */
@media (min-width: 760px) and (min-height: 900px) {
  main.home { padding-bottom: 26px; --pad-t: 0.06; --pad-b: 0.08; --em-gap: 0.12; --line-gap: 0.06; --line-lh: 1.4; --orn-t: 0.06; --orn-b: 0.08; }
  main.home::before { flex-basis: 6px; }
  main.home::after { flex-basis: 34px; }
}
/* a narrow phone keeps Quest's title on one line by closing its spacing a little */
@media (max-width: 389px) {
  .leaf.still .name { letter-spacing: 0.1em; padding-left: 0.1em; }
  .leaf.still .name .soon { left: calc(var(--home-name) * -0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .sky canvas, .sky .rotor, .sky .twinkle { animation: none !important; }
  .sky .rotor { transform: rotate(10.8deg); }  /* the still sky holds the turn's own starting angle */
  .sky { transition: none; }
  .leaf .name, .leaf .line, .leaf .mount, .home .orn *, .home .colophon, .home .seal-glint, .home footer { animation: none !important; }
  .leaf .mount::after, .leaf .line { transition: none; }
}

/* The Vault's emblem: an illuminated card with a keyhole escutcheon. Its life is two slow things: now and then a glint
   that runs across its gilt, as on the Fate spinner's cards, and a breath of light behind the keyhole. Both keep the
   set's one clock of twenty seconds, Quest's needle's: the glint passes seven seconds into it, once the needle's swing
   is under a degree and after the flourishes' and the seal's glints at the arrival, so the page's moments come one at
   a time; the keyhole is fullest just after the glint has gone by. */
.emblem-vault .keylight { animation: vault-breath-key 10s ease-in-out infinite alternate; }
.emblem-vault .glint { transform-box: view-box; transform-origin: 60px 60px; animation: vault-glint 20s cubic-bezier(0.45, 0.05, 0.35, 1) infinite; }
@keyframes vault-breath-key { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes vault-glint { 0%, 35% { transform: translateX(0) skewX(-20deg); } 50.5%, 100% { transform: translateX(122px) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) { .emblem-vault * { animation: none !important; } }

/* Fate's emblem: the storytelling wheel as a gold astrolabe of ten directions, in the hand of the Fate spinner's
   instrument. Its rete turns once in two minutes, clockwise with the sky, under a light that stays with the lamp: each
   copy of the rete (its two cast shadows, its shaded edge, its lit edge and its gold) turns alike inside a still parent
   that holds the copy's offset, and its gold is the same at every angle, so the turn is the compositor's alone and the
   emblem is never repainted. That turn is the emblem's only motion, in steps too fine to see (ten a second, under half
   a device pixel at the rete's rim on a phone). */
.emblem-fate .turn { transform-box: view-box; transform-origin: 60px 61.5px; animation: fate-turn 120s steps(1200) infinite; }
@keyframes fate-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .emblem-fate * { animation: none !important; } }

/* Quest's emblem: a navigator's compass under glass. Now and then its needle stirs, swings and settles on north, as a
   needle does when the one who carries it sets off: a kick, then each swing about three fifths of the last. Its twenty
   seconds are the set's one clock: the Vault card's glint passes seven seconds into each, when the swing is down to
   under a degree, and the seal's glint comes in every other one, so the two glints never meet. */
.emblem-quest .needle { transform-box: view-box; transform-origin: 60px 60px; animation: quest-settle 20s ease-in-out infinite; }
@keyframes quest-settle {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  5% { transform: rotate(6deg); }
  12% { transform: rotate(-3.7deg); }
  19% { transform: rotate(2.25deg); }
  26% { transform: rotate(-1.35deg); }
  33% { transform: rotate(0.78deg); }
  40% { transform: rotate(-0.4deg); }
  46% { transform: rotate(0.12deg); }
  51%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .emblem-quest * { animation: none !important; } }