/* 蓝晒 — one sheet of wet cyanotype paper under the app (js/sheet.js draws it), white shadows printed on it,
   her words on cream slips, his printed onto the paper. Quiet, slow, melancholic. */
:root {
  --cy-ink: #eef3fb; --cy-ink-dim: rgba(238, 243, 251, .68); --cy-ink-faint: rgba(238, 243, 251, .42);
  --cy-prussian: #16335f; --cy-slip: #f3efe4; --cy-slip-ink: #2b3550; --cy-amber: #e9a36a;
  --cy-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --cy-latin: "Cormorant Garamond", "Times New Roman", serif;
  --cy-script: "Pinyon Script", cursive;
}
html, body { background: var(--cy-prussian); }
#sheet { position: fixed; inset: 0; width: 100vw; height: 100lvh; display: block; z-index: 0; }
#root { z-index: 1; }

/* ---------- home ---------- */
.screen.cy-home { background: transparent; color: var(--cy-ink); font-family: var(--cy-serif); -webkit-user-select: none; user-select: none; }
.screen.cy-home.is-under { pointer-events: none; }
.cy-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cy-spacer { height: 245vh; }
.cy-head { position: absolute; left: max(26px, env(safe-area-inset-left)); right: 96px; top: calc(var(--safe-top, env(safe-area-inset-top)) + 26px); pointer-events: none; opacity: 0; transition: opacity 1.1s ease-out; }
.cy-head.on { opacity: 1; }
.cy-eyebrow { font: 13px var(--cy-serif); letter-spacing: .35em; color: var(--cy-ink-dim); display: flex; align-items: baseline; gap: 12px; }
.cy-eyebrow i { font: 36px/1 var(--cy-script); letter-spacing: 0; color: var(--cy-ink); font-style: normal; }
.cy-status { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font-weight: 300; font-size: 13.5px; line-height: 1.75; letter-spacing: .07em; color: var(--cy-ink-dim); }
.cy-status b { font-weight: 400; font-size: 20px; color: var(--cy-ink); letter-spacing: .14em; margin-bottom: 4px; }
.cy-status .cy-quote { color: var(--cy-ink); opacity: .82; }
.cy-status .cy-since { font-size: 11.5px; color: var(--cy-ink-faint); letter-spacing: .14em; }
.cy-stamp { position: absolute; right: max(24px, env(safe-area-inset-right)); top: calc(var(--safe-top, env(safe-area-inset-top)) + 32px); font: 13px var(--cy-latin); letter-spacing: .22em; color: var(--cy-amber); transform: rotate(-3deg); opacity: 0; transition: opacity 1.2s ease-out .3s; pointer-events: none; }
.cy-stamp.on { opacity: .85; }
/* the words beside each shadow: the sheet's frame loop sets their transform, so only opacity animates here */
.cy-label { position: fixed; left: 0; top: 0; width: 44vw; opacity: 0; pointer-events: none; will-change: transform; transition: opacity .9s ease-out; color: var(--cy-ink); }
.cy-label.on { opacity: 1; }
.cy-label.r { text-align: right; }
.cy-label b { display: block; font-weight: 400; font-size: 19px; letter-spacing: .3em; }
.cy-label b sup { font: 12px var(--cy-latin); color: var(--cy-amber); margin-left: 4px; letter-spacing: 0; }
.cy-label i { display: block; font: 22px/1.1 var(--cy-script); font-style: normal; color: var(--cy-ink-dim); margin-top: 3px; }
.cy-label small { display: block; font-weight: 300; font-size: 11.5px; line-height: 1.6; color: var(--cy-ink-dim); margin-top: 5px; letter-spacing: .06em; }
.cy-label em { display: block; font: 12px var(--cy-latin); font-style: normal; color: var(--cy-ink-faint); margin-top: 3px; letter-spacing: .14em; }
.cy-skip { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 34px); text-align: center; font: 12px var(--cy-serif); letter-spacing: .4em; color: var(--cy-ink-faint); pointer-events: none; }

/* ---------- tabs ---------- */
.cy-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; padding: 26px max(18px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 10px);
  background: linear-gradient(to top, rgba(9, 24, 50, .82), rgba(9, 24, 50, 0)); opacity: 0; pointer-events: none; transition: opacity .9s ease-out; }
.cy-tabs.on { opacity: 1; pointer-events: auto; }
.cy-tabs button { all: unset; cursor: pointer; text-align: center; font: 11px var(--cy-latin); letter-spacing: .32em; color: var(--cy-ink-faint); padding: 6px 8px; }
.cy-tabs button span { display: block; font: 12px var(--cy-serif); letter-spacing: .25em; margin-bottom: 2px; }
.cy-tabs button.on { color: var(--cy-ink); }
.cy-tabs button.on::after { content: ""; display: block; height: 1px; margin: 6px auto 0; width: 70%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); }

/* ---------- a plain page on the sheet ---------- */
.screen.cy-page { background: rgba(10, 26, 52, .35); color: var(--cy-ink); font-family: var(--cy-serif); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + 18px) max(26px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 40px); box-sizing: border-box; display: block; }
.cy-back { all: unset; cursor: pointer; font: 14px var(--cy-serif); letter-spacing: .2em; color: var(--cy-ink-dim); padding: 10px 0; }
.cy-page h1 { margin: 26px 0 4px; font-weight: 400; font-size: 26px; letter-spacing: .32em; }
.cy-page .cy-en { display: block; font: 30px/1 var(--cy-script); font-style: normal; color: var(--cy-ink-dim); }
.cy-list { list-style: none; margin: 30px 0 0; padding: 0; }
.cy-list li { border-bottom: 1px solid rgba(238, 243, 251, .14); }
.cy-list button { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 2px; box-sizing: border-box; }
.cy-list b { font-weight: 400; font-size: 17px; letter-spacing: .25em; }
.cy-list i { flex: 1; font: 19px/1 var(--cy-script); font-style: normal; color: var(--cy-ink-dim); }
.cy-list em { font: 12px var(--cy-latin); font-style: normal; color: var(--cy-ink-faint); letter-spacing: .14em; }
.cy-list button:active b { opacity: .6; }