/* Ink, repaired stationery, and words which retain their first draft. */
:root {
  --after-ink: oklch(94% .018 320);
  --after-secondary: oklch(80% .035 315);
  --after-muted: oklch(68% .04 320);
  --after-pink: oklch(79% .13 345);
  --after-scar: oklch(66% .16 12);
  --after-plum: oklch(17% .026 305);
  --after-paper: oklch(23% .033 310);
  --after-line: oklch(49% .065 327);
  --after-tape: oklch(79% .06 325 / .7);
  --after-clear: oklch(13% .02 310 / 0);
  --after-shadow: oklch(8% .015 310 / .9);
  --after-haze: oklch(43% .085 325 / .22);
  --abyss-mist: oklch(49% .045 215 / .12);
  --abyss-membrane: oklch(64% .04 285 / .09);
}
html[data-ride-mode] .scene-header { border-bottom-color: var(--after-line); }
html[data-ride-mode] .scene-brand span:first-child { color: var(--after-pink); }
html[data-ride-mode] .hero-rail {
  display: block; opacity: 1; color: var(--after-muted); font-size: 11px;
  top: 32%; letter-spacing: .18em;
}
html[data-ride-mode] .hero-rail--r { color: var(--after-pink); }
html[data-ride-mode] .hero > .sticker--bow { display: block; }
html[data-ride-mode] .hero-links-sep { display: inline; color: var(--after-pink); }
html[data-ride-mode] .hero-sign { margin-bottom: 28px; }
html[data-ride-mode] .hero-sub { margin-bottom: 24px; }
.mending-note {
  position: relative; display: flex; align-items: center; gap: 15px; padding: 16px 28px 16px 20px;
  margin: 0 0 auto; color: var(--after-ink); background: var(--after-paper);
  border-block: 1px dashed var(--after-line); transform: rotate(-3deg);
  font: italic 17px/1.35 var(--f-frag); box-shadow: 3px 5px 0 var(--after-shadow);
}
.mending-note::before {
  content: ""; position: absolute; width: 53px; height: 15px; left: -15px; top: -4px;
  background: var(--after-tape); transform: rotate(-29deg); pointer-events: none;
}
.mending-note > [lang] { font: 12px var(--f-frag-ja); writing-mode: vertical-rl; color: var(--after-pink); }
.mending-note .mending-bow { color: var(--after-pink); font: 36px serif; margin-left: 6px; }
html[data-ride-mode="baked"] .scene-room:not(.transmission)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 37vw 19vw at 18% 0%, transparent 53%, var(--abyss-membrane) 54%, transparent 55%),
    radial-gradient(ellipse 37vw 19vw at 18% 100%, transparent 53%, var(--abyss-membrane) 54%, transparent 55%),
    radial-gradient(ellipse 28vw 40vw at 82% 0%, transparent 54%, var(--abyss-membrane) 55%, transparent 56%),
    radial-gradient(ellipse 28vw 40vw at 82% 100%, transparent 54%, var(--abyss-membrane) 55%, transparent 56%),
    radial-gradient(ellipse 44vw 24vw at 20% 0%, var(--abyss-mist), transparent 75%),
    radial-gradient(ellipse 44vw 24vw at 20% 100%, var(--abyss-mist), transparent 75%),
    radial-gradient(ellipse 55vw 30vw at 80% 0%, var(--after-haze), transparent 75%),
    radial-gradient(ellipse 55vw 30vw at 80% 100%, var(--after-haze), transparent 75%);
  filter: blur(2px);
  mask-image: linear-gradient(black, transparent 32% 68%, black);
}
/* The close reading has the ink and repairs of a personal notebook. */
html[data-ride-mode="3d"] .ride-reader {
  --paper-ink: var(--after-ink); --paper-secondary: var(--after-secondary);
  --paper-accent: var(--after-pink); --paper-rule: var(--after-line);
  color: var(--after-ink); background: var(--after-paper);
  border: 1px solid var(--after-line); border-top: 1px dashed var(--after-pink);
  box-shadow: 0 16px 38px var(--after-shadow); border-radius: 0; padding-top: 26px;
}
html[data-ride-mode="3d"] .ride-reader::before {
  content: ""; position: absolute; top: -8px; right: 25px; width: 61px; height: 17px;
  transform: rotate(8deg); background: var(--after-tape); pointer-events: none;
}
html[data-ride-mode="3d"] .ride-reader::after {
  content: "⋈"; position: absolute; right: 14px; top: 14px; color: var(--after-pink);
  font: 28px serif; pointer-events: none;
}
html[data-ride-mode="3d"] .ride-fragments {
  position: absolute; inset: max(235px, 27vh) 8vw 12vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 8vw; align-content: center;
}
html[data-ride-mode="3d"] .ride-fragments p {
  position: static; width: auto !important; transform: none; font-size: clamp(15px, 1.35vw, 22px) !important;
  color: var(--after-ink); line-height: 1.65;
}
html[data-ride-mode="3d"] .ride-fragments p:nth-child(2n) { transform: translateY(20px) rotate(1deg); color: var(--after-pink); }
.afterlight-leaves {
  position: relative; z-index: 3; max-width: 680px; margin: 40px auto 0;
  padding: 20px 24px; border-block: 1px dashed var(--after-line);
  color: var(--after-secondary); background: var(--after-plum); font: 18px/1.6 var(--f-frag);
}
.afterlight-leaves summary { cursor: pointer; color: var(--after-pink); font: 14px/1.6 var(--f-digital); }
.afterlight-leaves summary span { color: var(--after-secondary); }
.afterlight-leaves s { display: block; color: var(--after-muted); text-decoration-color: var(--after-scar); }
.afterlight-leaves ins { display: block; color: var(--after-ink); text-decoration: none; padding-left: 1em; }
.afterlight-leaves .afterlight-colophon { font-size: 14px; color: var(--after-muted); }
.afterlight-echo {
  position: fixed; z-index: 24; left: 50%; top: 44%; width: min(78vw, 680px);
  transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none;
  text-align: center; font: clamp(25px, 3vw, 45px)/1.35 var(--f-frag);
  color: var(--after-ink); text-shadow: 0 2px 5px var(--after-shadow), 0 0 22px var(--after-shadow);
}
.afterlight-echo s { display: block; text-decoration: none; color: var(--after-pink); }
.afterlight-echo > span { display: none; }
.afterlight-echo[data-phase="revised"] s {
  color: var(--after-muted); font-size: .55em; text-decoration: line-through;
  text-decoration-color: var(--after-scar); margin-bottom: 12px;
}
.afterlight-echo[data-phase="revised"] > span { display: block; }
.afterlight-echo[data-place="1"] { left: 58%; top: 39%; transform: translate(-50%, -50%) rotate(2deg); }
.afterlight-echo[data-place="2"] { left: 46%; top: 48%; }
.afterlight-echo[data-phase="first"] { animation: afterlight-slip 180ms steps(2, end) 1; }
@keyframes afterlight-slip { from { transform: translate(-49%, -50%) rotate(-2deg); filter: blur(2px); } to { filter: none; } }
.afterlight-sound {
  position: fixed; z-index: 32; right: 24px; bottom: max(18px, env(safe-area-inset-bottom));
  max-width: min(380px, calc(100vw - 32px)); color: var(--after-ink);
}
.afterlight-invitation {
  padding: 22px 24px 16px; background: var(--after-paper); border: 1px solid var(--after-line);
  border-top: 1px dashed var(--after-pink); box-shadow: 0 8px 32px var(--after-shadow);
}
.afterlight-invitation p { margin: 0 0 16px; font: 19px/1.5 var(--f-frag); }
.afterlight-invitation em { color: var(--after-pink); }
.afterlight-sound button {
  border: 0; background: transparent; color: var(--after-ink); min-height: 44px;
  padding: 8px; cursor: pointer; font: 12px/1.5 var(--f-digital);
}
.afterlight-sound [data-sound-open] { border: 1px solid var(--after-line); }
.afterlight-sound [data-sound-open] span { color: var(--after-pink); }
.afterlight-sound [data-sound-dismiss] { color: var(--after-secondary); }
.afterlight-sound button:focus-visible, .afterlight-leaves summary:focus-visible {
  outline: 2px solid var(--after-pink); outline-offset: 4px;
}
.afterlight-sound-toggle[aria-pressed="true"] { color: var(--after-pink); }
.afterlight-sound-error { max-width: 250px; padding: 12px; background: var(--after-plum); font-size: 14px; }
.afterlight-echo[hidden], .afterlight-sound[hidden], .afterlight-sound [hidden] { display: none !important; }
html.site-page-open .afterlight-echo, html.site-page-open .afterlight-sound,
html[data-memory-state]:not([data-memory-state="idle"]) .afterlight-echo,
html[data-memory-state]:not([data-memory-state="idle"]) .afterlight-sound { display: none; }
@media (max-width: 700px) {
  html[data-ride-mode] .hero-rail { display: none; }
  html[data-ride-mode] .hero-links { gap: 12px; }
  .mending-note { margin-top: 8px; font-size: 16px; }
  .afterlight-leaves { margin: 32px 20px 0; padding: 20px; }
  .afterlight-sound { right: 16px; }
  .afterlight-echo, .afterlight-echo[data-place] { left: 50%; top: 43%; width: 88vw; }
}
@media (prefers-reduced-motion: reduce) {
  .afterlight-echo { display: none !important; animation: none !important; }
}