/* ═══ THE ATMOSPHERES ════════════════════════════════════════════════════════
   Ported verbatim from the app's own src/styles/aevum.css — the .atm-*
   gradients and the per-atmosphere token blocks. The entire promise of this
   page is that the light is the real one, so these values must not drift:
   regenerate from the app rather than hand-editing.

   Two deliberate departures: the selector is `body.atm-x` (the class sits on
   <body> here, not on a child layer), and only --sheet-* / --atm-* are carried
   — the app also flips --ink/--paper for shelf and menu chrome this page has
   none of. */

:root{
  --paper:#f4ecd7; --paper-light:#faf3e0;
  --ink:#1a1612; --ink-soft:#3d342a; --ink-faint:#6a5d4a;
  --oxblood:#8a3a31; --oxblood-soft:#a8584c; --gold:#c89a4a; --candle:#f3c885;
}

/* ── the room ─────────────────────────────────────────────────────────────
   800ms matches the app's own `.atm { transition: background 800ms ease }`.
   This single cross-fade is the page's one piece of motion. */
.atm-layer{ position:fixed; inset:0; z-index:0; transition:background 800ms ease; }
body.atm-daylight .atm-layer{ background: linear-gradient(to bottom, #ffffff 0%, #f6f7f9 60%, #e9ecef 100%); }
body.atm-morning .atm-layer{ background: radial-gradient(ellipse at 50% 30%, #fff5dc 0%, #f0e6c8 40%, #d4c8a4 100%); }
body.atm-lamp .atm-layer{ background: radial-gradient(ellipse at 50% 30%, #715825 0%, #47371c 42%, #1d1509 100%); }
body.atm-midnight .atm-layer{ background: radial-gradient(ellipse at 50% 30%, #2a2418 0%, #15110a 50%, #0a0805 100%); }
body.atm-overcast .atm-layer{ background: radial-gradient(ellipse at 50% 30%, #e8e3d2 0%, #c9c2ad 60%, #8a8473 100%); }

/* ── per-atmosphere palette ──────────────────────────────────────────── */
body{
  --atm-fg:       #f1ead7;
  --atm-panel:    #282013;
  --atm-fg-soft:  rgba(244,236,215,.7);
  --atm-fg-faint: rgba(244,236,215,.45);
  --atm-fg-dim:   rgba(244,236,215,.18);
  --atm-accent:   var(--candle);
  --atm-floor:    linear-gradient(to bottom, rgba(60,40,20,.05), rgba(60,40,20,.18) 60%, rgba(60,40,20,.32));
  --sheet-bg-1:   #fff;
  --sheet-bg-2:   #faf3e0;
  --sheet-bg-3:   rgba(0,0,0,.05);
  --sheet-ink:    #1a1612;
  --sheet-ink-soft: #3d342a;
  --sheet-ink-faint: #6a5d4a;
  --sheet-rule:   rgba(60,40,20,.18);
  --sheet-link:   rgba(138,58,49,.28);
}
body.atm-daylight{
  --atm-fg:       #1a1612;
  --atm-panel:    #fcfcfd;
  --atm-fg-soft:  rgba(26,22,18,.7);
  --atm-fg-faint: rgba(26,22,18,.5);
  --atm-fg-dim:   rgba(26,22,18,.2);
  --atm-accent:   var(--oxblood);
  --atm-floor:    linear-gradient(to bottom, rgba(50,60,70,.05), rgba(50,60,70,.12) 60%, rgba(50,60,70,.22));
  --sheet-bg-1:   #fff;
  --sheet-bg-2:   #ffffff;
  --sheet-bg-3:   rgba(0,0,0,.04);
  --sheet-ink:    #1a1612;
  --sheet-ink-soft: #3d342a;
  --sheet-ink-faint: #7a7268;
  --sheet-rule:   rgba(26,22,18,.16);
  --sheet-link:   rgba(138,58,49,.3);
}
body.atm-morning{
  --atm-fg:       #1a1612;
  --atm-panel:    #fefaef;
  --atm-fg-soft:  rgba(26,22,18,.7);
  --atm-fg-faint: rgba(26,22,18,.5);
  --atm-fg-dim:   rgba(26,22,18,.2);
  --atm-accent:   var(--oxblood);
  --sheet-bg-1:   #fff;
  --sheet-bg-2:   #fbf5e2;
  --sheet-bg-3:   rgba(60,40,20,.05);
  --sheet-ink:    #1a1612;
  --sheet-ink-soft: #3d342a;
  --sheet-ink-faint: #6a5d4a;
  --sheet-rule:   rgba(60,40,20,.18);
  --sheet-link:   rgba(138,58,49,.28);
}
body.atm-lamp{
  --atm-fg:       #f3e0b3;
  --atm-panel:    #2e2415;
  --atm-fg-soft:  rgba(243,224,179,.82);
  --atm-fg-faint: rgba(243,224,179,.66);
  --atm-fg-dim:   rgba(243,224,179,.3);
  --atm-accent:   var(--candle);
  --sheet-bg-1:   #fff5d2;
  --sheet-bg-2:   #f6e7b8;
  --sheet-bg-3:   rgba(60,40,10,.08);
  --sheet-ink:    #2a1e10;
  --sheet-ink-soft: #4d3c22;
  --sheet-ink-faint: #806638;
  --sheet-rule:   rgba(80,55,20,.22);
  --sheet-link:   rgba(168,88,76,.4);
}
body.atm-midnight{
  --atm-fg:       #f1ead7;
  --atm-panel:    #1e1a12;
  --atm-fg-soft:  rgba(244,236,215,.85);
  --atm-fg-faint: rgba(244,236,215,.65);
  --atm-fg-dim:   rgba(244,236,215,.35);
  --atm-accent:   var(--candle);
  --sheet-bg-1:   rgba(255,255,255,.04);
  --sheet-bg-2:   #1c1a16;
  --sheet-bg-3:   rgba(255,255,255,.03);
  --sheet-ink:    #e8e0c8;
  --sheet-ink-soft: #b8b0a0;
  --sheet-ink-faint: #80796c;
  --sheet-rule:   rgba(244,236,215,.18);
  --sheet-link:   rgba(232,180,150,.42);
}
body.atm-overcast{
  --atm-fg:       #1a1612;
  --atm-panel:    #f4f1e7;
  --atm-fg-soft:  rgba(26,22,18,.7);
  --atm-fg-faint: rgba(26,22,18,.5);
  --atm-fg-dim:   rgba(26,22,18,.2);
  --atm-accent:   var(--oxblood);
  --sheet-bg-1:   #fff;
  --sheet-bg-2:   #f1efe6;
  --sheet-bg-3:   rgba(0,0,0,.05);
  --sheet-ink:    #1a1612;
  --sheet-ink-soft: #3d342a;
  --sheet-ink-faint: #6a6258;
  --sheet-rule:   rgba(26,22,18,.18);
  --sheet-link:   rgba(138,58,49,.3);
}

/* ═══ THE PAGE ═══════════════════════════════════════════════════════════════
   Deliberately chromeless: no site nav. A sticky bar competes with the light
   and breaks the illusion of sitting in a room, which is the only thing this
   page is for. The wordmark top-left is the way out. */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  font-family:'EB Garamond', Georgia, serif;
  color:var(--atm-fg);
  transition:color 800ms ease;
}
.room{ position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column; }

/* ── the way out, and the tier mark ─────────────────────────────────────── */
.room-top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:22px 30px; gap:16px;
}
.room-mark{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:25px; color:var(--atm-accent); text-decoration:none; line-height:1;
  transition:color 800ms ease, opacity .2s ease; opacity:.85;
}
.room-mark:hover{ opacity:1; }
.room-tier{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--atm-fg-faint);
  transition:color 800ms ease; text-align:right;
}
.room-tier b{ font-weight:400; color:var(--atm-accent); }

/* ── the sheet ── geometry and texture from the app's .sheet ─────────────── */
.room-stage{ flex:1 1 auto; display:grid; place-items:center; min-height:0; padding:0 24px; }
.sheet{
  --ink:var(--sheet-ink); --ink-soft:var(--sheet-ink-soft); --ink-faint:var(--sheet-ink-faint);
  width:min(760px, 100%); max-height:100%; overflow:auto;
  padding:58px 62px 0; border-radius:2px;
  color:var(--sheet-ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.05), transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.06), transparent 40%),
    radial-gradient(circle at 30% 40%, var(--sheet-bg-1), transparent 60%),
    var(--sheet-bg-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 2px 4px rgba(0,0,0,.05),
    0 18px 40px -18px rgba(0,0,0,.35),
    0 40px 80px -40px rgba(0,0,0,.4);
  position:relative; isolation:isolate;
  transition:background 800ms ease, color 800ms ease;
}
/* The app's paper grain, same two-layer turbulence, same overlay blend. */
.sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23f)' opacity='0.10'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
  background-size:600px 600px, 420px 420px;
  mix-blend-mode:overlay; opacity:.9;
}
.sheet-head{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:34px; line-height:1.1; margin:0 0 30px; color:var(--sheet-ink);
  transition:color 800ms ease;
}

/* ── the prose ── the app's .prose, to the character ─────────────────────── */
.prose{
  font-family:'EB Garamond', Georgia, serif;
  font-size:21px; line-height:1.62; color:var(--sheet-ink);
  text-align:justify; hyphens:auto; text-wrap:pretty;
  outline:none; caret-color:var(--oxblood);
  transition:color 800ms ease;
}
.prose p{ margin:0 0 1.1em; text-indent:0.5in; }
.prose p:first-child{ text-indent:0; }
.prose p:first-child::first-letter{
  font-family:'Cormorant Garamond', serif; font-size:3.2em; line-height:.85; float:left;
  padding:.04em .08em 0 0; font-weight:500;
}
.prose:focus{ outline:none; }
::selection{ background:rgba(138,58,49,.18); }

.sheet-hint{
  /* On a short phone the passage outgrows the sheet and scrolls. The hint is
     the whole invitation to type, so it stays pinned to the bottom of the
     sheet rather than sinking below the fold. */
  position:sticky; bottom:0;
  background:var(--sheet-bg-2);
  margin-top:26px; padding-top:16px; border-top:1px solid var(--sheet-rule);
  font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sheet-ink-faint);
  transition:color 800ms ease, opacity .6s ease;
}
.sheet-hint{ padding-bottom:26px; }
.sheet-hint.spent{ opacity:0; }

/* ── the rail ─────────────────────────────────────────────────────────────── */
.room-foot{ flex:0 0 auto; padding:20px 30px 26px; }
.rail{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.light{
  background:transparent; border:1px solid var(--atm-fg-dim); border-radius:2px;
  padding:9px 15px 8px; cursor:pointer; color:var(--atm-fg-faint);
  font-family:inherit; text-align:center; min-width:104px;
  transition:color 800ms ease, border-color 800ms ease, background .22s ease, transform .22s ease;
}
.light:hover{ transform:translateY(-2px); border-color:var(--atm-fg-faint); }
.light:active{ transform:translateY(0); }
.light:focus-visible{ outline:2px solid var(--atm-accent); outline-offset:3px; }
.light[aria-pressed="true"]{
  color:var(--atm-fg); border-color:var(--atm-accent);
  background:color-mix(in srgb, var(--atm-accent) 12%, transparent);
}
.light .ln{ display:block; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px; line-height:1.15; }
.light .lt{ display:block; font-family:'JetBrains Mono', monospace; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:3px; opacity:.75; }

/* ── the ask ──────────────────────────────────────────────────────────────── */
.room-cta{
  margin-top:20px; display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; text-align:center;
}
.room-cta p{
  margin:0; font-size:16px; font-style:italic; color:var(--atm-fg-soft);
  transition:color 800ms ease;
}
.room-cta a{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--atm-accent); border:1px solid var(--atm-accent); border-radius:2px;
  padding:9px 17px; transition:color .2s ease, background .2s ease, border-color 800ms ease;
}
.room-cta a:hover{ background:var(--atm-accent); color:var(--sheet-bg-2); }
.room-cta a:focus-visible{ outline:2px solid var(--atm-accent); outline-offset:3px; }

@media (max-width:820px){
  .sheet{ padding:32px 26px 0; }
  .sheet-head{ font-size:25px; margin-bottom:18px; }
  /* Justification needs width to avoid rivers, and the drop cap eats two lines
     a phone cannot spare. Both come back at tablet size. */
  .prose{ font-size:17px; line-height:1.55; text-align:left; hyphens:none; }
  .prose p{ text-indent:0.3in; margin-bottom:0.85em; }
  .prose p:first-child::first-letter{ font-size:1em; float:none; padding:0; }
  .sheet-hint{ margin-top:18px; padding-top:12px; }
  .room-top{ padding:16px 18px; }
  .room-foot{ padding:14px 14px 20px; }
  .light{ min-width:0; flex:1 1 30%; padding:8px 8px 7px; }
  .light .ln{ font-size:15px; }
}

/* The cross-fade is the whole design; without it the page is still honest,
   just abrupt. Nothing here loops, so there is nothing else to disable. */
@media (prefers-reduced-motion: reduce){
  .atm-layer, .sheet, .prose, .sheet-head, body, .light, .room-cta p{ transition:none !important; }
}