/* Oneiros website. Tokens from the Oneiros Film design system
   (lib/theme/film). One mood, violet, for the whole site. */

@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif_italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope_regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope_500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope_600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope_700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/VT323_regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #120c14;
  --film-base: #0b0709;
  --night: #1c2a5a;
  --paper: #fff4ec;
  --text-body: rgba(255, 244, 236, 0.86);
  --text-secondary: rgba(255, 244, 236, 0.72);
  --text-muted: rgba(255, 244, 236, 0.6);
  --text-faint: rgba(255, 244, 236, 0.5);
  --peach: #ffd2b0;
  --glass-fill: rgba(255, 244, 236, 0.08);
  --glass-border: rgba(255, 244, 236, 0.18);
  --hairline: rgba(255, 255, 255, 0.14);
  --violet-glow: rgba(138, 98, 196, 0.45);
  --stamp: #ff8a2b;
  --safelight: #c8402e;
  --grease-pencil: #e8452e;
  --brass: #e2b24c;
  --brass-ink: #3a2708;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --led: 'VT323', ui-monospace, monospace;
  --gutter: clamp(22px, 5vw, 64px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--peach); }
a:hover { color: var(--paper); }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: 1312px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Type */
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.01em; }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.8vw, 68px); line-height: 1.02; }
.heading { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; }
.lede { font-size: 20px; line-height: 1.55; color: var(--text-body); }
.copy { font-size: 19px; line-height: 1.6; color: var(--text-secondary); max-width: 560px; }
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.stamp { font-family: var(--led); color: var(--stamp); text-shadow: 0 0 8px rgba(255, 138, 43, 0.9); line-height: 1; }
.note { font-size: 14px; color: var(--text-faint); }

/* Pills: one primary (paper, mood glow) per screen */
.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 140ms var(--ease-out), box-shadow 240ms ease, background-color 180ms ease; }
.pill:active { transform: scale(0.97); }
.pill-primary { background: var(--paper); color: var(--ink); box-shadow: 0 0 44px var(--violet-glow); }
.pill-glass { background: rgba(255, 244, 236, 0.10); border-color: var(--glass-border); color: var(--paper); }
.pill-danger { background: var(--safelight); color: var(--paper); }
.pill-store { gap: 12px; min-height: 60px; padding: 8px 26px 8px 20px; }
.store-icon { flex: none; }
.pill-text { display: flex; flex-direction: column; align-items: flex-start; }
.pill-text small { font-size: 12px; font-weight: 500; line-height: 1.3; }
.pill-text span { font-size: 18px; font-weight: 700; line-height: 1.15; }
.pill-glass .pill-text small { color: var(--text-body); }
.pill-primary:hover { color: var(--ink); }
.pill-glass:hover, .pill-danger:hover { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .pill-primary:hover { box-shadow: 0 0 64px rgba(138, 98, 196, 0.7); }
  .pill-glass:hover { background-color: rgba(255, 244, 236, 0.16); }
}

/* Surfaces */
.glass { border-radius: 16px; background: var(--glass-fill); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.outline { border-radius: 16px; border: 1px solid var(--glass-border); }
.rows { list-style: none; padding: 0; }
.rows > li { padding: 18px 0; border-top: 1px solid var(--hairline); }
.rows > li:last-child { border-bottom: 1px solid var(--hairline); }
.dots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dots li { display: flex; gap: 14px; }
.dots li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--paper); }

/* Header: a glass bar floating over the page, the store pill at its end */
.site-header { height: 104px; }
.site-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px var(--gutter) 0; pointer-events: none; }
.bar { pointer-events: auto; max-width: 1284px; height: 58px; margin: 0 auto; padding: 0 7px 0 24px; display: flex; align-items: center; gap: 12px 24px; border-radius: 999px; background: rgba(255, 244, 236, 0.07); border: 1px solid rgba(255, 244, 236, 0.16); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); transition: background-color 320ms ease, border-color 320ms ease; }
.site-bar.scrolled .bar { background: rgba(18, 12, 20, 0.66); border-color: rgba(255, 244, 236, 0.18); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--paper); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--glass-border); }
.brand span { font-weight: 700; font-size: 23px; letter-spacing: 0.01em; line-height: 1; }
.brand:hover { color: var(--paper); }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; font-size: 15px; font-weight: 500; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: rgba(255, 244, 236, 0.68); text-decoration: none; transition: color 180ms ease, background-color 180ms ease, transform 140ms var(--ease-out); }
.site-nav a:active { transform: scale(0.97); }
.site-nav a[aria-current="page"] { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--paper); } }
.bar-cta { flex: none; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700; box-shadow: none; }
@media (max-width: 900px) { .site-nav a:first-child, .site-nav a:nth-child(3) { display: none; } }
@media (max-width: 640px) {
  .site-header { height: 88px; }
  .site-bar { padding-top: 14px; }
  .bar { height: 56px; padding-left: 20px; }
  .site-nav { display: none; }
  .bar-cta { margin-left: auto; }
}

/* Footer */
.site-footer { background: var(--film-base); border-top: 1px solid var(--glass-border); color: rgba(255, 244, 236, 0.68); }
.site-footer > .wrap { padding-top: 72px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 56px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.footer-brand { flex: 2 1 300px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.footer-brand .brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer-brand .brand span { display: inline; font-size: 23px; }
.footer-brand p { max-width: 340px; font-size: 15px; }
.footer-col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; }
.footer-col h2 { margin-bottom: 8px; }
.footer-col a, .footer-mail { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--text-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color 180ms ease, color 180ms ease; }
.footer-mail { color: var(--peach); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--paper); text-decoration-color: currentColor; } }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-faint); }

/* Home: chapters of one night */
.display em, .title em { font-style: italic; }
/* The hero: the room with its window open on the sunset, under the header. */
.hero { position: relative; overflow: hidden; margin-top: -104px; background: var(--ink); }
.hero-room { position: absolute; inset: 0; }
.hero-room img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* Night at the edges and below, so the window holds the light. */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 62% at 50% 46%, rgba(18, 12, 20, 0) 40%, rgba(18, 12, 20, 0.5) 100%), linear-gradient(to bottom, rgba(18, 12, 20, 0.45) 0, rgba(18, 12, 20, 0.12) 20%, rgba(18, 12, 20, 0.12) 62%, var(--ink) 97%); }
.hero-body { position: relative; z-index: 1; }
.hero-body { max-width: 1100px; min-height: 900px; margin: 0 auto; padding: 150px var(--gutter) 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.hero-clock { font-family: var(--led); font-size: clamp(56px, 5vw, 72px); line-height: 0.8; color: var(--stamp); text-shadow: 0 0 14px rgba(255, 138, 43, 0.85), 0 0 48px rgba(255, 138, 43, 0.35); }
.hero .display { max-width: 980px; font-size: clamp(54px, 8vw, 116px); line-height: 0.94; text-shadow: 0 2px 30px rgba(18, 12, 20, 0.35); }
.hero .display em { color: var(--peach); }
.hero .lede { max-width: 600px; font-size: 18px; color: rgba(255, 244, 236, 0.9); text-shadow: 0 1px 14px rgba(18, 12, 20, 0.5); }
.hero .pills { justify-content: center; padding-top: 6px; }
.hero .note { color: rgba(255, 244, 236, 0.66); font-size: 13px; }
@media (max-width: 640px) { .hero { margin-top: -88px; } .hero-body { min-height: 760px; padding-top: 120px; padding-bottom: 110px; } }

.chapter { padding-top: 180px; }
.chapter-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.chapter-head .stamp { font-size: 28px; }
.chapter-head.center { align-items: center; text-align: center; margin: 0 auto; }
/* The time, a rule, and what happens at that minute. */
.step { display: flex; align-items: center; gap: 14px; }
.step .stamp { font-size: 24px; }
.step .label::before { content: ''; display: inline-block; width: 48px; height: 1px; margin-right: 14px; vertical-align: middle; background: rgba(255, 244, 236, 0.4); }

/* The recorder */
.recorder { position: relative; height: 720px; margin-top: 56px; overflow: hidden; background: linear-gradient(to bottom, var(--ink) 55%, var(--night)); }
.recorder canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Soft edges: the night above fades into the stage, and the light under
   the horizon fades back into the page instead of ending in a line. */
.recorder::before, .recorder::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.recorder::before { top: 0; height: 180px; background: linear-gradient(to bottom, var(--ink), rgba(18, 12, 20, 0)); }
.recorder::after { bottom: 0; height: 240px; background: linear-gradient(to top, var(--ink), rgba(18, 12, 20, 0)); }
.recorder-body { z-index: 2; }
.recorder-body { position: relative; height: 100%; padding-top: 72px; padding-bottom: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.recorder-label { color: rgba(255, 244, 236, 0.5); }
.recorder-cue { min-height: 76px; margin-top: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; text-shadow: 0 0 18px rgba(255, 244, 236, 0.35); }
/* The camera's ● REC, counting the take. */
.rec { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--led); font-size: 20px; line-height: 1; color: var(--stamp); text-shadow: 0 0 8px rgba(255, 138, 43, 0.7); }
.rec i { width: 9px; height: 9px; border-radius: 999px; background: #f0523a; box-shadow: 0 0 8px #f0523a; }
.recorder-take { flex: 1 1 auto; width: 100%; max-width: 680px; display: flex; align-items: center; justify-content: center; padding: 16px 0; font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; color: var(--text-body); }
.recorder-take .listening { font-family: var(--sans); font-size: 17px; color: var(--text-secondary); }
.recorder-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.recorder-controls .pill { background: rgba(18, 12, 20, 0.35); border-color: rgba(255, 244, 236, 0.22); color: var(--paper); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 15px; }
.recorder-controls .note { color: rgba(255, 244, 236, 0.66); font-size: 13px; }
.wd { display: inline-block; white-space: nowrap; }
.sl { display: inline-block; }

/* It develops */
.develop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 64px 96px; }
.print { position: relative; flex: 0 1 440px; min-width: 260px; aspect-ratio: 2 / 3; margin: 0 auto; border-radius: 6px; overflow: hidden; background-color: var(--night); background-size: cover; background-position: center; box-shadow: 0 48px 96px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35); }
.print img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.print .stamp { position: absolute; right: 20px; bottom: 14px; font-size: 24px; }
/* Prints are laid down by hand, never quite square. */
.tilt-r { transform: rotate(2deg); }
.develop-text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.reading { display: flex; flex-direction: column; gap: 24px; }
.reading h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3vw, 44px); line-height: 1.05; }
.reading .summary { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text-body); }
.reading dl > div { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.reading dl > div:last-child { border-bottom: 1px solid var(--hairline); }
.reading dt { padding-top: 3px; }
.reading dd { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.reading dd span { color: var(--text-muted); }
@media (max-width: 520px) { .reading dl > div { grid-template-columns: 1fr; } }

/* The card: three face down, the one that calls you turns over. Back and
   face as in the app (TarotBack, TarotFace): violet card stock with the
   passport's guilloché, and the card's photograph as a print. */
.tarot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.tarot-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.tarot-reading { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.tarot-reading .serif { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--text-body); margin-bottom: 14px; }
.tarot-reading .question { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; color: var(--peach); }
.tarot-table { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.deck { --w: clamp(132px, 15vw, 204px); position: relative; width: 100%; height: calc(var(--w) * 12 / 7 + 72px); }
/* A pool of violet light under the cards. */
.deck::before { content: ''; position: absolute; left: 10%; right: 10%; top: 30%; bottom: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(138, 98, 196, 0.32), rgba(138, 98, 196, 0)); pointer-events: none; }
.tcard { --x: 0%; --y: 0%; --r: 0deg; position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 7 / 12; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 1400px; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); -webkit-tap-highlight-color: transparent; }
.tcard:focus-visible { outline-offset: 6px; border-radius: 12px; }
.tcard.slot-l { --x: -84%; --y: 5%; --r: -9deg; z-index: 1; }
.tcard.slot-c { --y: -3%; z-index: 2; }
.tcard.slot-r { --x: 84%; --y: 5%; --r: 9deg; z-index: 1; }
.tcard-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.tcard.open .tcard-in { transform: rotateY(180deg); }
.tback, .tface { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.tback { border-radius: calc(var(--w) * 0.08); padding: calc(var(--w) * 0.07); background: linear-gradient(160deg, #34213d, #231528); }
.tback-frame { position: relative; display: block; height: 100%; padding: calc(var(--w) * 0.0315); border: 0.8px solid rgba(255, 244, 236, 0.42); border-radius: calc(var(--w) * 0.048); }
.tback-frame::before { content: ''; position: absolute; inset: calc(var(--w) * 0.0315); border: 0.5px solid rgba(255, 244, 236, 0.42); background: url('img/tarot-guilloche.svg') center / 100% 100% no-repeat; }
.tback-moon { position: absolute; left: 50%; top: 18%; width: clamp(10px, calc(var(--w) * 0.1), 16px); height: auto; transform: translateX(-50%); color: rgba(255, 244, 236, 0.7); }
.tback-mark { position: absolute; left: 0; right: 0; bottom: 18%; font-size: clamp(7px, calc(var(--w) * 0.05), 10px); font-weight: 700; letter-spacing: 0.22em; line-height: 1; text-align: center; text-transform: uppercase; color: rgba(255, 244, 236, 0.7); }
.tface { transform: rotateY(180deg); border-radius: clamp(8px, calc(var(--w) * 0.07), 16px); background: #1d1016; }
.tface img { width: 100%; height: 100%; object-fit: cover; }
.tface::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(18, 12, 20, 0), rgba(18, 12, 20, 0.88)); }
.tface .stamp { position: absolute; left: 12px; top: 10px; z-index: 1; font-size: 15px; }
.tface-name { position: absolute; left: 6px; right: 6px; bottom: 14px; z-index: 1; font-family: var(--serif); font-size: clamp(16px, calc(var(--w) * 0.115), 24px); line-height: 1.05; text-align: center; color: var(--paper); }
.deck-hint { max-width: 420px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; text-align: center; color: var(--text-secondary); }
/* Without the motion, the card of the dream lies face up in the middle. */
html:not(.motion) .tcard.slot-c .tcard-in { transform: rotateY(180deg); }
@media (max-width: 520px) { .deck { --w: 30vw; } .tcard.slot-l { --x: -78%; } .tcard.slot-r { --x: 78%; } }

/* Saved, and only you can read it: the dream's line, sealed as it crosses. */
.sealed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 72px; }
.vault { position: relative; flex: 1 1 480px; min-width: 0; aspect-ratio: 1.13; margin: 0; border-radius: 22px; overflow: hidden; background: var(--night); }
.vault > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vault::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 12, 20, 0) 62%, rgba(18, 12, 20, 0.85)); }
.vault .print { position: absolute; left: 50%; top: 50%; width: 44%; min-width: 0; margin: 0; z-index: 1; transform: translate(-50%, -50%) rotate(-4deg); }
.vault .print .stamp { right: 12px; bottom: 9px; font-size: 16px; }
.cipher-band { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; transform: translateY(-50%); padding: 12px 0 12px clamp(20px, 4%, 28px); overflow: hidden; white-space: nowrap; background: rgba(18, 12, 20, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.cipher-band p { line-height: 1.2; }
.cipher-plain { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 27px); color: var(--paper); }
.cipher-noise, .cipher-text { font-family: var(--led); font-size: clamp(23px, 2.3vw, 31px); letter-spacing: 0.02em; }
.cipher-noise { color: var(--stamp); text-shadow: 0 0 8px rgba(255, 138, 43, 0.8); }
.cipher-text { color: rgba(255, 244, 236, 0.72); }
.sealed-main { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.sealed-list { color: var(--text-body); font-size: 16px; }
.sealed-list > li { padding: 16px 0; }

/* It comes back: the roll, laid a little crooked across the page */
.strip { overflow-x: auto; margin-top: 64px; padding: 36px 0; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-row { position: relative; width: calc(100% + 96px); margin-left: -48px; display: flex; gap: 14px; padding: 34px calc(18px + 48px) 32px; transform: rotate(1.2deg); background-color: var(--film-base); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Crect x='7' y='1' width='12' height='10' rx='2' fill='%23362c34'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Crect x='7' y='1' width='12' height='10' rx='2' fill='%23362c34'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 6px, 0 calc(100% - 6px); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
.strip-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.edge { display: flex; justify-content: space-between; gap: 12px; font-family: var(--led); font-size: 14px; line-height: 1; white-space: nowrap; color: rgba(255, 138, 43, 0.72); }
.edge b { font-weight: 400; }
.frame { position: relative; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; background-color: var(--night); background-size: cover; background-position: center; }
.frame .stamp { position: absolute; right: 8px; bottom: 5px; font-size: 15px; }
.frame-n { font-family: var(--led); font-size: 15px; color: rgba(255, 138, 43, 0.55); }
.pencil { position: absolute; top: 34px; height: calc(100% - 52px); left: calc(66px + 2 * (100% - 202px) / 6 + 28px - 4%); width: calc((100% - 202px) / 6 + 8%); overflow: visible; pointer-events: none; }
.pencil path { fill: none; stroke: var(--grease-pencil); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 0; }
@media (max-width: 860px) { .strip-row { width: max-content; } .strip-cell { flex: 0 0 170px; } .pencil { left: calc(66px + 2 * 184px - 12px); width: 194px; } }
.back-row { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; margin-top: 64px; }
.echo { flex: 1 1 400px; min-width: 0; display: flex; align-items: center; gap: 26px; padding: 26px 30px; }
.echo > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.echo-title { font-family: var(--serif); font-size: clamp(32px, 2.8vw, 40px); line-height: 1.05; }
.echo > div p:last-child { font-size: 15px; color: var(--text-secondary); }
/* The passport's stamp (InkStamp): a double ring, small capitals round
   the band, the dream's word in italic serif, pressed a little crooked. */
.ink-stamp { flex: none; width: 112px; height: 112px; transform: rotate(-7deg); overflow: visible; }
.ink-stamp .ink { fill: var(--paper); stroke: var(--paper); }
.ink-stamp text { stroke: none; }
.ink-stamp .ring { font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: 1.45px; text-transform: uppercase; }
.ink-stamp .word { font-family: var(--serif); font-style: italic; font-size: 21px; }
@media (max-width: 480px) { .echo { flex-direction: column; align-items: flex-start; } }
.features { flex: 1.2 1 520px; min-width: 0; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.features li { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px 0 22px; border-top: 1px solid var(--hairline); }
.features strong { font-size: 16px; font-weight: 600; }
.features span { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.footnote { margin-top: 40px; font-size: 13px; line-height: 1.5; color: var(--text-faint); }

/* Keep the next one */
.finale { position: relative; overflow: hidden; margin-top: 180px; background: var(--night); }
.finale > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.finale::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 1; background: linear-gradient(to bottom, var(--ink), rgba(18, 12, 20, 0)); pointer-events: none; }
.finale-body { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 200px var(--gutter) 140px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.finale-icon { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 18px; border: 1px solid var(--glass-border); box-shadow: 0 0 48px var(--violet-glow); }
.finale .display { font-size: clamp(48px, 6vw, 88px); line-height: 1; }
.finale .pills { justify-content: center; margin-top: -8px; }
.plans { width: 100%; margin-top: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.plan { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 36px; border-radius: 16px; }
.plan h3 { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; }
.plan > div p { margin-top: 4px; font-size: 15px; }
.plan .rows > li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 16px; line-height: 1.45; }
.plan-cta { align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; }
.plan-free { background: rgba(24, 14, 26, 0.86); border: 1px solid rgba(255, 244, 236, 0.12); }
.plan-free > div p { color: var(--text-secondary); }
.plan-free .rows > li { border-color: rgba(255, 255, 255, 0.12); color: var(--text-body); }
.plan-free .rows > li:last-child { border-bottom: 0; }
.tick { flex: none; width: 11px; height: 6px; margin: 0 4px 4px 3px; border-left: 1.6px solid rgba(255, 244, 236, 0.6); border-bottom: 1.6px solid rgba(255, 244, 236, 0.6); transform: rotate(-45deg); }
.key { display: flex; align-items: center; gap: 12px; }
.key i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--brass); color: var(--brass-ink); }
/* Pro is the paper card, the one lit thing at the end of the night. */
.plan-pro { background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 64px var(--violet-glow); }
.plan-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; }
.plan-chip svg { color: var(--brass); }
.pro-mark { padding: 6px 11px; border-radius: 999px; background: linear-gradient(135deg, #f6dc94, var(--brass) 52%, #c48c2c); color: var(--brass-ink); font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; }
.plan-pro > div p { color: rgba(18, 12, 20, 0.66); }
.plan-pro .rows > li { border-color: rgba(18, 12, 20, 0.12); color: rgba(18, 12, 20, 0.86); }
.plan-pro .rows svg { flex: none; color: #8a62c4; }
.plan-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.plan-foot p { font-size: 12.5px; color: rgba(18, 12, 20, 0.6); }
.pill-ink { gap: 10px; background: var(--ink); color: var(--paper); }
.pill-ink:hover { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .pill-ink:hover { background: #2a1e28; } }
@media (max-width: 480px) { .plan { padding: 28px 22px; } }
.finale-small { max-width: 720px; display: flex; flex-direction: column; gap: 12px; text-align: center; font-size: 13px; line-height: 1.6; color: rgba(255, 244, 236, 0.86); text-shadow: 0 1px 12px rgba(18, 12, 20, 0.6); }
.finale-small a { color: var(--paper); }
/* Night again under the small print, so the terms read on the brightest light. */
.finale::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 360px; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(18, 12, 20, 0.9), rgba(18, 12, 20, 0)); }

/* Legal pages */
.legal-hero { position: relative; }
.legal-hero > canvas { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 760px; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.legal-hero > [data-lang], .legal-hero > .legal-intro { position: relative; }
.legal-intro { position: relative; padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 40px; }
.legal-intro.split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 40px 80px; }
.legal-intro.split .intro { flex: 999 1 520px; min-width: 0; }
.legal-intro.split .summary-card { flex: 1 1 360px; min-width: 0; padding: 32px; }
.legal-hero .intro { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.legal-hero .display { font-size: clamp(52px, 6.4vw, 88px); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 15px; color: var(--text-secondary); }
.meta .stamp { font-size: 22px; }
.meta a, .lang-switch { display: inline-flex; align-items: center; min-height: 44px; }
.summary-card { max-width: 820px; padding: 36px 40px; display: flex; flex-direction: column; gap: 16px; }
.summary-card h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; }
.summary-card p, .summary-card .dots { font-size: 17px; line-height: 1.6; color: var(--text-body); }
.legal-body { padding-top: 40px; padding-bottom: 120px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 80px; }
.toc { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.toc h2 { margin-bottom: 10px; }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; margin-left: -12px; border-radius: 10px; font-size: 15px; color: rgba(255, 244, 236, 0.62); text-decoration: none; transition: color 220ms ease, background-color 220ms ease; }
.toc a span { font-family: var(--led); font-size: 18px; min-width: 20px; color: rgba(255, 244, 236, 0.35); transition: color 220ms ease; }
.toc a[aria-current="location"] { color: var(--paper); background: rgba(255, 244, 236, 0.08); }
.toc a[aria-current="location"] span { color: var(--stamp); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--paper); } }
@media (min-width: 900px) { .toc { position: sticky; top: 120px; } }
.legal { flex: 999 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 64px; font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.legal section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 110px; }
.legal section.long { gap: 32px; }
.legal .block { display: flex; flex-direction: column; gap: 12px; }
.legal h2 { color: var(--paper); }
.legal h3 { font-size: 19px; font-weight: 600; color: var(--paper); }
.legal strong { color: var(--paper); }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.table-box { border-radius: 16px; border: 1px solid var(--glass-border); overflow-x: auto; }
.table-box table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-box th { padding: 14px 20px; text-align: left; font-weight: 600; }
.table-box td { padding: 14px 20px; }
.table-box tbody tr { border-top: 1px solid var(--hairline); }
.table-box td:first-child { color: var(--paper); }
[data-lang][hidden] { display: none !important; }

/* Delete account and support */
.cards { display: flex; flex-wrap: wrap; gap: 24px; }
.cards > .glass { flex: 1 1 360px; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.cards h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.steps li { display: flex; gap: 18px; align-items: baseline; }
.steps li > span:first-child { flex: none; font-family: var(--led); font-size: 24px; color: var(--text-faint); }
.two-col { display: flex; flex-wrap: wrap; gap: 48px 80px; }
.two-col > section { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.two-col .rows { font-size: 17px; line-height: 1.55; color: var(--text-secondary); }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 12px 0; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; font-style: normal; font-size: 26px; font-weight: 400; color: rgba(255, 244, 236, 0.68); transition: transform 240ms var(--ease-out); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; max-width: 680px; font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.notice { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; }
.notice h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; }
.notice dl { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.55; }
.notice dl > div { display: flex; flex-direction: column; gap: 2px; }
.notice dd { color: var(--text-body); }

/* Dream meanings: one page per symbol of the app's dictionary, and an index */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--text-faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--paper); }
.dream-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 96px; padding-top: 40px; padding-bottom: 40px; }
.dream-intro { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dream-intro .display { font-size: clamp(48px, 6vw, 84px); }
.dream-hero .print { flex: 0 1 380px; }
.dream-stat { display: flex; align-items: center; gap: 20px; padding-top: 8px; }
.dream-stat .stamp { font-size: 64px; }
.dream-stat p { font-size: 17px; line-height: 1.5; color: var(--text-body); }
.dream-stat p span { display: block; font-size: 14px; color: var(--text-faint); }
.latent { display: flex; align-items: flex-end; padding: 24px; }
.latent figcaption { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.1; color: var(--paper); text-shadow: 0 2px 18px rgba(18, 12, 20, 0.5); }
.frame.latent figcaption { display: none; }
.dream-body { padding-top: 120px; display: flex; flex-direction: column; gap: 40px; }
.dream-body > .title { max-width: 900px; }
.dream-readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; }
.dream-readings section { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.dream-readings h3 { font-size: 17px; font-weight: 600; }
.dream-readings p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.dream-ask { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.dream-ask p:last-child { font-family: var(--serif); font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
.dream-related { padding-top: 120px; display: flex; flex-direction: column; gap: 28px; }
.dream-related ul, .dream-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 20px; }
.dream-card { display: flex; flex-direction: column; gap: 10px; color: var(--paper); text-decoration: none; }
.dream-card .frame { transition: transform 240ms var(--ease-out), box-shadow 240ms ease; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.dream-card > span { font-size: 16px; font-weight: 600; line-height: 1.35; }
.dream-card > .stamp { font-size: 17px; font-weight: 400; }
.dream-card:hover { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .dream-card:hover .frame { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55); } }
.dream-index { padding-top: 40px; display: flex; flex-direction: column; gap: 56px; }
.dream-index .intro { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.dream-cta { padding-top: 140px; padding-bottom: 120px; }
.dream-cta .outline { padding: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.dream-cta .copy { max-width: 640px; }
@media (max-width: 600px) { .dream-cta .outline { padding: 28px 22px; } .dream-stat .stamp { font-size: 48px; } }

/* Home: Oneiros in short */
.facts { padding-top: 120px; padding-bottom: 120px; display: flex; flex-wrap: wrap; gap: 48px 80px; }
.facts > div { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.facts dl { display: flex; flex-direction: column; }
.facts dl > div { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.facts dl > div:last-child { border-bottom: 1px solid var(--hairline); }
.facts dd { font-size: 16px; line-height: 1.6; color: var(--text-body); }
@media (max-width: 520px) { .facts dl > div { grid-template-columns: 1fr; } }

/* Motion. Three moves, each from the app: fog for words, the horizon for
   the voice, develop for images. Hidden states only exist under
   html.motion (JS on, reduced motion off), so the page reads without them. */
.fog-veil { position: absolute; z-index: 2; left: -5%; right: -5%; top: -10%; height: 1100px; pointer-events: none; opacity: 0; background: radial-gradient(38% 32% at 30% 40%, rgba(255, 244, 236, 0.12), rgba(255, 244, 236, 0) 70%), radial-gradient(44% 38% at 70% 34%, rgba(138, 98, 196, 0.26), rgba(138, 98, 196, 0) 72%), radial-gradient(60% 40% at 50% 72%, rgba(255, 244, 236, 0.08), rgba(255, 244, 236, 0) 75%); }
.fog, .fog-load { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 42%, transparent 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 42%, transparent 58%, transparent 100%); -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }
.blink { display: inline-block; }
/* Glowing things (the LED clock, the primary pill) fade out of the fog
   without the sweep: a mask would clip their glow into a box. */
.no-mask { -webkit-mask-image: none !important; mask-image: none !important; }
/* A mask clips to the box, and the serif's line-height is tighter than its
   glyphs: room below for the descenders (p, g), given back in the margin. */
.fog:not(.no-mask):not(.glass):not(.outline), .fog-load:not(.no-mask) { padding-bottom: 0.25em; margin-bottom: -0.25em; }
/* Once in, nothing is left between the text and the page (site.js). */
.settled { -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; }
.motion .fog-veil { opacity: 1; animation: veil 2600ms var(--ease-soft) forwards 120ms; }
.motion .fog-load { animation: fogIn 1400ms var(--ease-out) both; animation-delay: var(--fd, 350ms); }
.motion .fog { opacity: 0; }
.motion .in .fog, .motion .fog.in { animation: fogIn 1300ms var(--ease-out) both; animation-delay: var(--fd, 0ms); }
.motion .fog-swap { animation: fogIn 1100ms var(--ease-out) both; }
/* Glow fades without a blur: iOS Safari crops a filtered glow to its box. */
.motion .no-mask.fog-load, .motion .in .no-mask.fog, .motion .no-mask.fog.in { animation-name: glowIn; }
.motion .smoke-out { animation: drift 700ms cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.motion .sl { opacity: 0; filter: blur(5px); transform: translateY(8px); animation: smoke 520ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.motion [data-develop] img { opacity: 0; filter: blur(10px) saturate(0.3) brightness(1.25); }
.motion [data-develop] .stamp { opacity: 0; }
.motion .in [data-develop] img { animation: develop 2400ms var(--ease-soft) forwards; animation-delay: var(--d, 0ms); }
.motion .in [data-develop] .stamp { animation: fadeIn 500ms ease forwards; animation-delay: calc(var(--d, 0ms) + 2200ms); }
.motion .pencil path { stroke-dashoffset: 1400; }
.motion .in .pencil path { transition: stroke-dashoffset 1200ms var(--ease-out) 3000ms; stroke-dashoffset: 0; }
.motion .blink { animation: blink 1s steps(1) infinite; }
.motion .hero-room img { animation: roomIn 2600ms var(--ease-soft) both 80ms; }
.motion .rec i { animation: blink 1s steps(1) infinite; }
.motion .tcard { transition: transform 760ms var(--ease-out); }
.motion .tcard-in { transition: transform 900ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.motion .deck:not(.dealt) .tcard { --x: 0%; --y: 10%; --r: 0deg; }
@keyframes veil { to { opacity: 0; transform: translateY(-90px) scale(1.12); } }
@keyframes fogIn { from { opacity: 0; filter: blur(14px); transform: translateY(10px); -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { opacity: 1; filter: blur(0); transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes glowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drift { to { opacity: 0; filter: blur(6px); transform: translateY(-10px); } }
@keyframes smoke { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes develop { 40% { opacity: 0.55; filter: blur(4px) saturate(0.6) brightness(1.15); } 100% { opacity: 1; filter: none; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes roomIn { from { opacity: 0; filter: blur(14px) saturate(0.4) brightness(1.25); transform: scale(1.05); } to { opacity: 1; filter: none; transform: none; } }
@keyframes blink { 50% { opacity: 0.15; } }