/* As Imagined — the page that plays the suite.
   The page is the blank page: warm near-black ground, ink the colour of paper,
   a monospace for what gets typed and a serif for what is said about it. */

:root {
  --page: #0c0b0a;
  --ink: #efe8da;
  --ink-dim: rgba(239, 232, 218, 0.56);
  --ink-faint: rgba(239, 232, 218, 0.26);
  --light: #ffd493;            /* the colour ideas arrive in */
  --line: #f3dfb4;             /* the sketched theme */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --col-left: clamp(20px, 8vw, 140px);
  --col-top: clamp(84px, 22vh, 220px);
  --col-width: min(62ch, calc(100vw - 2 * var(--col-left)));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(14px, 1.45vw, 18px);
  line-height: 1.65;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- the canvas: everything that is light ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- the page: everything that is typed ---------- */
#page {
  position: fixed; inset: 0; pointer-events: none;
  transition: opacity 1.2s ease;
}
#page.hidden { opacity: 0; }
#column {
  position: absolute; left: var(--col-left); top: var(--col-top);
  width: var(--col-width);
  transition: top 2.4s cubic-bezier(.4,0,.2,1), bottom 2.4s cubic-bezier(.4,0,.2,1);
}
#chapter {
  font-size: 0.72em; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim); opacity: 0; transition: opacity 2.4s ease;
  white-space: nowrap; margin-bottom: 1.1em; min-height: 1.65em;
}
#chapter.on { opacity: 1; }
#lines .line { min-height: 1.65em; white-space: pre-wrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#lines .line + .line { margin-top: 0.55em; }
#lines .line .t { color: var(--ink); }
#lines .line .t em { font-style: italic; color: var(--light); }
#lines .line.said .t { font-family: var(--serif); font-style: italic; font-size: 1.14em; line-height: 1.5; color: var(--ink); }
#lines .line.yours .t { min-width: 1ch; display: inline-block; outline: none; caret-color: transparent; }

/* when the picture is up, the text lives at the foot of the page over a scrim */
#page.foot #column { top: auto; bottom: calc(96px + var(--safe-b)); }
#page .scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52vh;
  background: linear-gradient(to top, rgba(12,11,10,.92) 0%, rgba(12,11,10,.78) 38%, rgba(12,11,10,0) 100%);
  opacity: 0; transition: opacity 2s ease;
}
#page.foot .scrim { opacity: 1; }

/* the caret is the piano's note */
.caret {
  display: inline-block; width: 0.58em; height: 1.12em; vertical-align: -0.16em;
  margin-left: 0.08em; background: var(--ink);
  box-shadow: 0 0 6px rgba(239,232,218,.35);
  opacity: 1;
}

/* ---------- the cover ---------- */
#cover {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 24px; background: var(--page);
  transition: opacity 1.6s ease;
}
#cover.away { opacity: 0; pointer-events: none; }
#cover[hidden] { display: none; }
#cover .kicker { font-size: .72em; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1.4em; }
#cover h1 {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(52px, 9.5vw, 128px); line-height: 1; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: .28em;
}
#cover .sub { font-family: var(--serif); font-size: clamp(17px, 2vw, 24px); color: var(--ink-dim); max-width: 34em; line-height: 1.4; }
#cover .meta { margin-top: 1.9em; font-size: .78em; letter-spacing: .12em; color: var(--ink-dim); }
#begin {
  margin-top: 2.6em; padding: .8em 2.2em; border: 1px solid rgba(239,232,218,.45); border-radius: 999px;
  letter-spacing: .2em; text-transform: uppercase; font-size: .82em; color: var(--ink);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
#begin:hover, #begin:focus-visible { background: rgba(239,232,218,.08); border-color: var(--ink); box-shadow: 0 0 24px rgba(255,212,147,.18); outline: none; }
#begin[disabled] { opacity: .5; cursor: progress; }
#cover .hint { margin-top: 1.4em; font-size: .72em; color: var(--ink-faint); letter-spacing: .06em; }
#cover .hint .caret { height: .9em; width: .5em; vertical-align: -0.1em; }
#cover .loading { position: absolute; bottom: calc(28px + var(--safe-b)); font-size: .7em; letter-spacing: .14em; color: var(--ink-faint); text-transform: uppercase; }

/* ---------- the bar: time, chapters, controls ---------- */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 18px clamp(16px, 4vw, 48px) calc(16px + var(--safe-b));
  display: flex; align-items: center; gap: 16px;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
  font-size: .74em; letter-spacing: .08em; color: var(--ink-dim);
  background: linear-gradient(to top, rgba(12,11,10,.55), rgba(12,11,10,0));
}
#bar.show { opacity: 1; pointer-events: auto; }
#bar button { padding: 6px 8px; border-radius: 6px; color: var(--ink-dim); letter-spacing: .12em; text-transform: uppercase; font-size: .92em; min-width: 44px; min-height: 44px; }
#bar button:hover, #bar button:focus-visible { color: var(--ink); outline: none; }
#bar .time { min-width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
#track {
  position: relative; flex: 1; height: 44px; cursor: pointer;
}
#track .rail { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: rgba(239,232,218,.18); border-radius: 1px; }
#track .fill { position: absolute; left: 0; top: 21px; height: 2px; width: 0; background: var(--ink); border-radius: 1px; }
#track .mark { position: absolute; top: 14px; width: 1px; height: 16px; background: rgba(239,232,218,.42); }
#track .mark span {
  position: absolute; top: -18px; left: 4px; white-space: nowrap; font-size: .82em; letter-spacing: .14em; color: var(--ink-faint);
}
#track .head { position: absolute; top: 17px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 8px rgba(255,212,147,.5); }
#track .tip { position: absolute; top: -30px; transform: translateX(-50%); white-space: nowrap; font-size: .82em; color: var(--ink); opacity: 0; transition: opacity .2s; pointer-events: none; }
#track:hover .tip { opacity: 1; }

/* ---------- the ending ---------- */
#end {
  margin-top: 2.2em;
  font-size: .8em; letter-spacing: .1em; color: var(--ink-dim);
  opacity: 0; transition: opacity 3s ease; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
}
#end.on { opacity: 1; pointer-events: auto; }
#end .sig { font-family: var(--serif); font-style: italic; font-size: 1.25em; letter-spacing: 0; color: var(--ink); }
#end button { text-transform: uppercase; letter-spacing: .18em; font-size: .9em; color: var(--ink-dim); padding: 8px 0; min-height: 44px; }
#end #yours-hint { flex-basis: 100%; }
#end button:hover, #end button:focus-visible { color: var(--ink); outline: none; }

/* ---------- the notes: the story, the prompts, the numbers ---------- */
#notes {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(12,11,10,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: calc(64px + var(--safe-t)) 24px calc(80px + var(--safe-b));
}
#notes[hidden] { display: none; }
#notes .inner { max-width: 66ch; margin: 0 auto; }
#notes h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-bottom: .5em; }
#notes h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5em; margin: 2.2em 0 .6em; }
#notes p { font-family: var(--serif); font-size: 1.12em; line-height: 1.6; margin: 0 0 1em; color: var(--ink); }
#notes p.small, #notes li, #notes td, #notes th { font-family: var(--mono); font-size: .86em; color: var(--ink-dim); }
#notes blockquote { border-left: 2px solid rgba(239,232,218,.25); padding-left: 1.2em; margin: 1.2em 0; }
#notes blockquote p { color: var(--ink-dim); font-style: italic; }
#notes pre {
  font-family: var(--mono); font-size: .78em; line-height: 1.6; color: var(--ink-dim);
  white-space: pre-wrap; background: rgba(239,232,218,.05); border-radius: 8px; padding: 1em 1.2em; margin: .6em 0 1.4em;
}
#notes details summary { cursor: pointer; font-family: var(--mono); font-size: .86em; color: var(--ink-dim); padding: .5em 0; letter-spacing: .04em; }
#notes table { border-collapse: collapse; width: 100%; margin: .6em 0 1.4em; }
#notes th, #notes td { text-align: left; padding: .45em .6em; border-bottom: 1px solid rgba(239,232,218,.12); vertical-align: top; }
#notes .close {
  position: fixed; top: calc(14px + var(--safe-t)); left: 14px; z-index: 31;
  font-size: .78em; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
  padding: 10px 14px; border: 1px solid rgba(239,232,218,.25); border-radius: 999px; background: rgba(12,11,10,.6);
  min-height: 44px;
}
#notes .close:hover, #notes .close:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  :root { --col-left: 20px; --col-top: clamp(96px, 20vh, 160px); }
  body { font-size: 14.5px; }
  #bar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  #bar .time { min-width: 6.2em; font-size: .9em; }
  #track .mark span { display: none; }
  #page.foot #column { bottom: calc(92px + var(--safe-b)); }
  #end { font-size: .74em; gap: 6px 18px; }
  #cover h1 { font-size: clamp(48px, 15vw, 72px); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #page, #chapter, #column, #cover, #bar, #end { transition-duration: .01s; }
}