/* Linnea - shared tokens and the things every act uses: the table, the lamp, the cloth book board, paper slips,
   the ribbon. Act-specific styles live in book.css (acts 1-3, Claude), flow.css (acts 4-5, Claude) and close.css
   (act 6, Codex). Phone rules sit LAST in each file. */
:root {
  --sc-canvas: #1A120C; --sc-surface: #2A1D13;
  --sc-ink: #EFE4CC; --sc-ink-soft: #C9B89A;
  --sc-accent: #A3262A; --sc-accent-ink: #EFE4CC;
  --sc-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --paper: #EFE4CC; --paper-deep: #E2D3B3; --ink: #2A2119; --ink-soft: #5E4F3F; --red: #A3262A; --lamp: #E8B56A;
  --cloth: #33422A; --cloth-dark: #222D1B; --foil: #D8BF86; --board-edge: #1B2314;
  --block: #E9DDC2; /* the page block seen on the fore-edge */
  /* paper grain: a tiny fractal-noise tile, multiplied over paper surfaces */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .33  0 0 0 0 .26  0 0 0 0 .17  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* linen weave for the cloth board */
  --weave: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
           repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
}
html { overflow-x: clip; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); margin: 0; }
a { color: inherit; }

/* ---------- one table, one lamp (every pinned stage) ---------- */
.stage { overflow: hidden; background: var(--sc-canvas); }
.table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: brightness(.8); }
.lamp { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(232,181,106,.22), transparent 60%),
              radial-gradient(ellipse 120% 90% at 60% 60%, transparent 40%, rgba(10,6,3,.55) 100%); }

/* ---------- the cloth book board (front and back of the same book) ---------- */
.cloth { background: var(--weave), var(--grain), linear-gradient(115deg, #3b4c30, var(--cloth) 45%, #2b3823);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 7px 0 8px -4px rgba(0,0,0,.45); }
.foil { font-family: var(--sc-font-display); font-style: italic; color: var(--foil);
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,240,200,.12); }

/* ---------- paper slips: all copy sits on paper ---------- */
.slip { position: absolute; z-index: 3; background: var(--grain), var(--paper); color: var(--ink);
  box-shadow: -3px 12px 22px rgba(8,4,2,.5), 0 1px 2px rgba(8,4,2,.45); }
.slip p { font-size: 1.12rem; line-height: 1.6; margin: 0 0 .9rem; color: var(--ink); }
.find { display: inline-block; font-family: var(--sc-font-display); font-size: 1.3rem; color: var(--paper); background: var(--red);
  padding: .45rem 1.15rem .5rem; text-decoration: none; box-shadow: 0 2px 0 #6f171a; }
.find:hover { background: #8a1f23; }
.find:active { transform: translateY(1px); box-shadow: 0 1px 0 #6f171a; }
a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
.credit { font-size: .92rem; font-style: italic; color: var(--ink-soft); margin: .2rem 0 0; }

/* ---------- ribbon nav: a silk bookmark with the spread names set on it ---------- */
.ribbon { position: fixed; top: 0; right: 3.2vw; z-index: 20; width: 2.6rem; height: 74vh;
  background: linear-gradient(90deg, #7f1a1e, var(--red) 40%, #b53a3d 58%, #861c20);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
  filter: drop-shadow(-3px 4px 4px rgba(0,0,0,.4)); }
.ribbon ol { list-style: none; margin: 0; padding: 14vh 0 0; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.ribbon a { writing-mode: vertical-rl; font-family: var(--sc-font-display); font-size: 1.12rem; letter-spacing: .02em;
  color: #F6ECD6; text-decoration: none; padding: .2rem 0; }
.ribbon a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ribbon a[aria-current="true"] { font-style: italic; text-decoration: underline; text-underline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 700px) {
  .slip p { font-size: 1rem; line-height: 1.55; }
  .ribbon { right: 2.5vw; width: 1.9rem; height: auto; padding-bottom: 2.2rem; }
  .ribbon ol { padding-top: 5vh; gap: .8rem; }
  .ribbon a { font-size: .9rem; min-width: 44px; text-align: center; }
}