/* =========================================================================
   expressions of emptiness — the notebook
   A black-and-red notebook in the dark. Drag the corner to turn the page.
   Everything set in Swinger.

   Palette + principles borrowed from MiG's tokens.css ("a notebook in the
   dark. lowercase chrome, hairline rules, one oxblood accent that means
   confirm and advance"). Values copied from
   MiG/mig-app.github.io/tokens.css — oxblood is #bf382b, never #C0392B.
   One accent only; do not add a second.
   ========================================================================= */

@font-face {
  font-family: "Swinger";
  src: url("fonts/Swinger.woff2") format("woff2"),
       url("fonts/Swinger.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* kept available; unused on the page by request */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* the dark room (MiG surfaces) */
  --ground:   #14130f;
  --card:     #1f1d18;
  --panel:    #262320;
  --hairline: #36312a;
  --floor:    #0a0907;

  /* the single accent */
  --oxblood:        #bf382b;
  --oxblood-bright: #e04434;
  --oxblood-wash:   #2a1715;

  /* text on dark, bright to dim */
  --near-white: #f5f3ec;
  --gloss:      #a8a69d;
  --dim:        #8a8880;
  --muted:      #6e6b64;

  /* the pages themselves stay paper */
  --paper:      #fffdf6;
  --paper-back: #f6f4ec;
  --ink:        #1c1c1a;
  --ink-dim:    #6f6d67;

  --display: "Swinger", "Georgia", serif;

  /* motion (MiG) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* the room + chrome — these flip with the lights. The notebook itself
     (cover, paper, oxblood) is an object and stays the same in any light. */
  --room: #14130f;
  --room-glow: rgba(245, 243, 236, 0.045);
  --chrome-hi: #f5f3ec;
  --chrome-dim: #8a8880;
  --chrome-mut: #6e6b64;
  --pane-bg: rgba(20, 19, 15, 0.92);
  --pane-line: #36312a;
  --pane-hover: rgba(255, 255, 255, 0.04);
  --pencil-ink: #9b988e;
}

:root[data-theme="light"] {
  --room: #e8e5dd;
  --room-glow: rgba(20, 19, 15, 0.04);
  --chrome-hi: #1f1d18;
  --chrome-dim: #5f5c54;
  --chrome-mut: #8f8c82;
  --pane-bg: rgba(240, 237, 229, 0.94);
  --pane-line: #d6d2c6;
  --pane-hover: rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(90% 70% at 50% 18%, var(--room-glow), transparent 62%),
    var(--room);
  color: var(--chrome-hi);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background 400ms var(--ease);
}
/* the contents pane claims the left edge on wide screens */
@media (min-width: 701px) {
  body { padding-left: 15.5rem; }
  .tabs { display: none; }
}
/* film grain so the dark reads as a surface, not a void of pixels */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.book-wrap, .pager { position: relative; z-index: 1; }

/* the book */
.book-wrap {
  flex: 1;
  width: 100%;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 2.5vh, 1.6rem) 1rem;
  min-height: 0;
}
/* the library measures #book's parent to pick portrait vs landscape.
   Wide enough for a two-page spread on desktop (cover alone, then both
   sides of the open book); narrow viewports fall back to one page. */
/* the height term keeps the whole book inside the viewport —
   the page itself must never scroll */
.book-col { width: min(94vw, 56rem, calc((100svh - 5rem) * 1.45)); }
#book { touch-action: none; }

/* pages */
.page {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
}
.page .inner {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.8rem, 7%, 3rem);
  position: relative;
}
.page.-back { background: var(--paper-back); }

.poem {
  text-align: left;
  font-size: clamp(1rem, 0.85rem + 0.8vw, 1.45rem);
  line-height: 2.1;
  letter-spacing: 0.05em;
}
.poem p { margin: 0 0 1.5rem; }
.poem p:last-child { margin: 0; }
.poem p.dim { color: var(--ink-dim); }

.folio {
  position: absolute; left: 0; right: 0; bottom: clamp(0.9rem, 4%, 1.4rem);
  text-align: center;
  font-size: 0.8rem; letter-spacing: 0.2em;
  color: #b5b3aa;
}

/* ---- the cover: black notebook, oxblood spine band. Flat, matte. ---- */
.cover {
  background:
    linear-gradient(90deg, var(--oxblood) 0, var(--oxblood) 14px, transparent 14px),
    var(--card);
  border: 1px solid var(--hairline);
  border-radius: 2px 8px 8px 2px;
}
.cover .inner { justify-content: center; text-align: center; }
.cover .mark {
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.15; letter-spacing: 0.03em;
  color: var(--near-white);
  display: grid; gap: 0.1em;
}
.cover .mark .of { font-size: 0.45em; color: var(--gloss); }
.cover .open-hint {
  margin-top: 3rem;
  font-size: 0.85rem; letter-spacing: 0.18em;
  color: var(--oxblood-bright);   /* the accent means "advance" */
}

/* back faces of the cover leaf stay dark */
.cover.-back, .page.cover.-back { background: var(--card); }

/* ---- last leaf: the links (accent = advance) ---- */
.endpage {
  background:
    linear-gradient(270deg, var(--oxblood) 0, var(--oxblood) 10px, transparent 10px),
    var(--card);
  border: 1px solid var(--hairline);
  color: var(--near-white);
}
.endpage .inner { text-align: center; justify-content: center; }
.endpage nav { display: grid; gap: 1.6rem; font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
.endpage a {
  color: var(--near-white); text-decoration: none;
  transition: color 220ms var(--ease);
}
.endpage a:hover, .endpage a:focus-visible { color: var(--oxblood-bright); outline: none; }
.endpage .fin {
  margin-top: 3.2rem;
  font-size: 0.8rem; letter-spacing: 0.24em;
  color: var(--muted);
}

/* matte paper: soften the library's flip-gloss gradients */
.stf__item .stf__shadow,
.stf__item [class*="shadow"] { opacity: 0.5; }

/* signature under an entry */
.sig { margin: 1.6rem 0 0; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--ink-dim); }

/* blank pages, waiting to be filled */
.blankpage .waiting {
  text-align: center;
  font-size: 0.95rem; letter-spacing: 0.14em;
  color: #c9c7be;
}

/* the write-in page */
.formkick { margin: 0 0 1.4rem; font-size: 1.05rem; letter-spacing: 0.08em; color: var(--ink-dim); text-align: center; }
.fillform { display: grid; gap: 0.8rem; }
.fillform textarea, .fillform input[type="text"] {
  font-family: var(--display);
  font-size: 1rem; letter-spacing: 0.04em; line-height: 1.9;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid #d8d5cb;
  padding: 0.4rem 0.1rem;
  resize: none; width: 100%;
}
.fillform textarea:focus, .fillform input:focus { outline: none; border-bottom-color: var(--oxblood); }
.formrow { display: flex; align-items: center; justify-content: space-between; }
.fcount { font-size: 0.75rem; letter-spacing: 0.12em; color: #b5b3aa; }
.fillform button {
  all: unset; cursor: pointer;
  font-size: 0.95rem; letter-spacing: 0.1em;
  color: var(--oxblood);
  padding: 0.3rem 0.2rem;
  transition: color 220ms var(--ease);
}
.fillform button:hover, .fillform button:focus-visible { color: var(--oxblood-bright); }
.fillform button[disabled] { color: #b5b3aa; cursor: default; }
.fnote { min-height: 1.2em; margin: 0; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink-dim); text-align: center; }

/* shelf */
.shelf { display: grid; gap: 1.1rem; margin-top: 0.6rem; }
.shelf a, .backlink { color: var(--ink); text-decoration: none; border-bottom: 1px solid #d8d5cb; padding-bottom: 2px; transition: color 220ms var(--ease); }
.shelf a:hover, .backlink:hover { color: var(--oxblood); }
.backlink { display: inline-block; margin-top: 2rem; font-size: 0.9rem; color: var(--ink-dim); }

/* data failed to load */
.bookerror { color: var(--muted); font-size: 0.95rem; letter-spacing: 0.08em; display: grid; place-items: center; min-height: 40vh; }

/* ---- the contents pane (study mode) ---- */
.pane {
  position: fixed; left: 0; top: 0; bottom: 0; width: 15.5rem;
  z-index: 30;
  background: var(--pane-bg);
  border-right: 1px solid var(--pane-line);
  padding: 1.5rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  transition: transform 380ms var(--ease);
  overflow-y: auto;
}
.pane .ttl { color: var(--chrome-dim); font-size: 0.78rem; letter-spacing: 0.12em; margin: 0 0 1rem; line-height: 1.6; }
.pane a, .pane .row {
  display: block; text-decoration: none; cursor: pointer;
  color: var(--chrome-dim); font-size: 0.84rem; letter-spacing: 0.05em;
  padding: 0.38rem 0.5rem; border-radius: 6px; line-height: 1.5;
  transition: color 180ms var(--ease), background 180ms var(--ease);
}
.pane a:hover { color: var(--chrome-hi); background: var(--pane-hover); }
.pane a.on { color: var(--chrome-hi); border-left: 2px solid var(--oxblood); border-radius: 0 6px 6px 0; background: rgba(191,56,43,0.07); }
.pane a .pg { color: var(--chrome-mut); font-size: 0.7rem; margin-right: 0.5em; }
.pane a.live, .pane a.live .pg { color: var(--oxblood-bright); }
.pane .gap { flex: 1; min-height: 1rem; }
.pane .presence {
  color: var(--chrome-dim); font-size: 0.76rem; letter-spacing: 0.06em;
  padding: 0.6rem 0.2rem 0.4rem; border-top: 1px solid var(--pane-line); margin: 0;
}
.presence .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--oxblood-bright); margin-right: 0.5em; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
.pane .paneops { display: flex; gap: 0.9rem; padding-top: 0.2rem; }
.pane .paneops button {
  all: unset; cursor: pointer; color: var(--chrome-mut);
  font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.1em;
  padding: 0.3rem 0.2rem; transition: color 180ms var(--ease);
}
.pane .paneops button:hover { color: var(--oxblood-bright); }

/* corner presence (mobile only — desktop presence lives in the pane) */
.corner { position: fixed; top: 1rem; z-index: 30; font-size: 0.76rem; letter-spacing: 0.1em; }
.corner.right { right: 1.2rem; color: var(--chrome-dim); }
@media (min-width: 701px) { .corner.right { display: none; } }
@media (max-width: 700px) { .pane { display: none !important; } }

/* ---- the live page ---- */
.ghostline { text-align: center; color: #b5b3aa; font-size: 0.72rem; letter-spacing: 0.16em; margin: 0 0 1.4rem; }
.ghostline b { color: var(--oxblood); font-weight: 400; }
.pencil { color: var(--pencil-ink); font-size: clamp(1rem, 0.85rem + 0.8vw, 1.45rem); line-height: 2.1; letter-spacing: 0.05em; white-space: pre-wrap; word-break: break-word; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--oxblood-bright); vertical-align: text-bottom; margin-left: 1px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.liveedit {
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.25rem);
  line-height: 2; letter-spacing: 0.05em;
  color: var(--ink); background: transparent; border: 0; outline: none;
  width: 100%; min-height: 4rem; resize: none; padding: 0;
  overflow: hidden;   /* autosizes to content — never a scrollbar */
}
/* long entries settle into a smaller hand so the page never scrolls */
.poem.long { font-size: clamp(0.85rem, 0.72rem + 0.6vw, 1.05rem); line-height: 1.8; }
.poem.long p { margin-bottom: 1rem; }
.pencil.long { font-size: clamp(0.85rem, 0.72rem + 0.6vw, 1.05rem); line-height: 1.8; }
.livesign {
  font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.05em;
  color: var(--ink-dim); background: transparent;
  border: 0; border-bottom: 1px solid #d8d5cb; outline: none;
  width: 60%; margin-top: 1rem; padding: 0.3rem 0.1rem;
}
.livesign:focus { border-bottom-color: var(--oxblood); }
.setline { text-align: center; color: #c9c7be; font-size: 0.66rem; letter-spacing: 0.16em; margin-top: 1.6rem; }

/* ---- side tabs: index tabs on the fore-edge of the notebook ---- */
.book-col { position: relative; }
.tabs {
  position: absolute;
  top: 12%;
  right: 0;
  transform: translateX(calc(100% - 1px));
  display: flex; flex-direction: column; gap: 7px;
  z-index: 0;                     /* behind the pages, like real tabs */
  user-select: none;
}
.tabs button {
  all: unset;
  cursor: pointer;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--gloss);
  background: var(--card);
  border: 1px solid var(--hairline); border-left: 0;
  border-radius: 0 6px 6px 0;
  padding: 0.7rem 0.3rem;
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.tabs button:hover, .tabs button:focus-visible { color: var(--near-white); transform: translateX(2px); }
.tabs button.active { color: var(--near-white); border-right-color: var(--oxblood); border-right-width: 2px; }
.tabs .write { color: var(--oxblood-bright); }
.tabs .write:hover, .tabs .write:focus-visible { color: var(--oxblood-bright); }

/* narrow screens: tabs become a quiet row under the book */
@media (max-width: 700px) {
  .tabs {
    position: static; transform: none;
    flex-direction: row; justify-content: center; flex-wrap: wrap;
    margin: 0.9rem 0 0;
  }
  .tabs button {
    writing-mode: horizontal-tb;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
  }
  .tabs button.active { border-color: var(--oxblood); }
}