/* ============================================================
   PURVA — a pillow book that lets people in
   Design system governed by docs/design-genome.md
   Principles implemented are cited inline as [gene codes].
   No frameworks. No trackers. Paper, ink, one seal of vermilion.
   ============================================================ */

/* ---------- the borrowed hand — Sentient, Indian Type Foundry ----------
   The one download the genome's escape hatch allows (world-bible §7):
   a pen-informed old-style serif from Ahmedabad — same country as the room.
   78 KB buys the same voice on every visitor's machine; system fallbacks
   remain first-class. Licence: fonts/LICENSE-Sentient (Fontshare, free). */
@font-face { font-family: "Sentient"; src: url("../fonts/Sentient-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("../fonts/Sentient-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("../fonts/Sentient-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* paper & ink — [N1 pillow book, V20 negative space] */
  --paper:        #f5efe4;
  --paper-deep:   #ede5d5;   /* recessed panels, blockquotes */
  --ink:          #23201b;
  --ink-soft:     #52493d;
  --ink-faint:    #857a6a;   /* 4.5:1 on paper — AA for small text */
  --rule:         #d8cfbc;   /* hairlines */

  /* the one accent — a seal, not a theme [E15 tenderness in details] */
  --vermilion:    #a63a24;
  --vermilion-ink:#8c2f1c;   /* darker for small text, 6.2:1 on paper */

  /* type — serif carries the voice, mono carries the catalogue
     [V56 field guide entry: dual register] */
  --serif: "Sentient", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* scale — one ratio, few sizes [W56 restraint as precision] */
  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-md: 1.0625rem;   /* body: 17px */
  --text-lg: 1.35rem;
  --text-xl: clamp(1.7rem, 4.5vw, 2.4rem);

  --measure: 62ch;
  --gap: 1.5rem;
}

/* ---------- reset, quietly ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.75;
  font-feature-settings: "onum" 1, "pnum" 1; /* old-style figures — book, not dashboard */
}

/* paper grain — inline SVG noise, zero requests
   [steal-the-principle: grainy gradients → material honesty] */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.42 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ---------- selection & focus — small ceremonies [E26] ---------- */
::selection { background: var(--vermilion); color: var(--paper); }
:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.5rem 1rem; z-index: 10;
  font-family: var(--mono); font-size: var(--text-sm);
}
.skip:focus { left: 0; }

/* ---------- layout: text column + true margin [V1 field notebook margin]
   The page is a book spread: main column plus a living margin
   where second thoughts live. ---------- */
.page {
  display: grid;
  grid-template-columns:
    minmax(1.25rem, 1fr)
    minmax(0, var(--measure))
    minmax(1.25rem, 1fr);
  padding-block: 0;
}
.page > * { grid-column: 2; }

/* on wide screens, margin notes leave the text column and live in the
   true margin beside the words they annotate — a sidenote, not a box */
@media (min-width: 1240px) {
  .margin-note {
    float: right;
    clear: right;
    width: 200px;
    margin-right: -248px; /* 200px note + 48px gutter */
    margin-top: 0.2rem;
    margin-bottom: 1rem;
  }
}

/* margin notes — the voice that came back later [W12 annotation as conversation] */
.margin-note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  align-self: start;
  border-left: 2px solid var(--vermilion);
  padding-left: 0.75rem;
  margin: 0.25rem 0 1.25rem;
  font-style: italic;
}
.margin-note .who {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion-ink);
  margin-bottom: 0.2rem;
  text-transform: lowercase;
}
@media (max-width: 979px) {
  .margin-note {
    background: var(--paper-deep);
    border-left: 2px solid var(--vermilion);
    padding: 0.6rem 0.85rem;
    border-radius: 0 2px 2px 0;
  }
}

/* ---------- header — wayfinding, not navigation chrome [I45 the door] ---------- */
.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0 0.4rem;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-faint);
}
.site-head a { color: inherit; text-decoration: none; }
.site-head a:hover, .site-head a:focus-visible { color: var(--vermilion-ink); }
.site-head .mark { color: var(--ink-soft); }
.site-head .mark b { font-weight: normal; color: var(--vermilion-ink); }

/* ---------- typography ---------- */
h1, h2, h3 { font-weight: normal; line-height: 1.25; }
h1 {
  font-size: var(--text-xl);
  margin: 2.2rem 0 0.4rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--text-lg);
  margin: 2.6rem 0 0.5rem;
}
h3 { font-size: var(--text-md); font-style: italic; margin: 1.8rem 0 0.3rem; }

p { margin: 0 0 1.1rem; }
p + p { text-indent: 1.4em; margin-top: -0.35rem; } /* book paragraphs, not web blocks */

.kicker {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--vermilion-ink);
  margin: 2.4rem 0 0;
}
.kicker + h1, .kicker + h2 { margin-top: 0.2rem; }

.dek { /* the sentence under the title — museum label [C56] */
  font-size: var(--text-md);
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}

/* links — underline that means it [I59 micro-interaction with weight] */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
a:hover, a:focus-visible {
  color: var(--vermilion-ink);
  text-decoration-color: var(--vermilion);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.6rem 0;
}

blockquote {
  margin: 1.4rem 0;
  padding: 0.8rem 1.1rem;
  background: var(--paper-deep);
  border-left: 2px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- the door map — taxonomy as entrance [C12 personal taxonomy] ---------- */
.door-map { list-style: none; margin: 2.5rem 0; padding: 0; }
.door-map li {
  border-top: 1px solid var(--rule);
  padding: 0;
}
.door-map li:last-child { border-bottom: 1px solid var(--rule); }
.door-map a {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  transition: background 180ms ease;
}
.door-map a:hover, .door-map a:focus-visible { background: var(--paper-deep); color: inherit; }
.door-map .no {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.door-map a:hover .no, .door-map a:focus-visible .no { color: var(--vermilion-ink); }
.door-map .name { font-size: var(--text-md); }
.door-map .gloss {
  grid-column: 2;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-faint);
}

/* ---------- catalogue entries — field-guide form [V56, N3 bestiary] ---------- */
.entry {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 0.6rem;
  margin-top: 1.6rem;
}
.entry .no {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.entry h2, .entry h3 { margin-top: 0.25rem; }
.entry .status {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--vermilion-ink);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  white-space: nowrap;
}

.field-facts { /* appearance / habitat / behaviour — the creature described */
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1.2rem;
  margin: 0.9rem 0 1.1rem;
  font-size: var(--text-sm);
}
.field-facts dt {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: lowercase;
  padding-top: 0.18em;
}
.field-facts dd { margin: 0; color: var(--ink-soft); }

/* optional depth — three readings, all complete [I56, I5 progressive disclosure] */
details.depth {
  margin: 0.9rem 0 1.4rem;
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  transition: border-color 200ms ease;
}
details.depth[open] { border-left-color: var(--vermilion); }
details.depth summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink-faint);
  padding: 0.2rem 0;
}
details.depth summary::-webkit-details-marker { display: none; }
details.depth summary::before { content: "⌄ "; color: var(--vermilion-ink); }
details.depth[open] summary::before { content: "· "; }
details.depth summary:hover { color: var(--vermilion-ink); }
details.depth > *:not(summary) { margin-top: 0.6rem; }

/* ---------- pillow lists [W4 the list — Shōnagon's form] ---------- */
.pillow { margin: 2rem 0; }
.pillow h2 { font-style: italic; font-size: var(--text-lg); }
.pillow ol {
  list-style: none;
  counter-reset: pillow;
  margin: 0.6rem 0 0;
  padding: 0;
}
.pillow ol li {
  counter-increment: pillow;
  position: relative;
  padding: 0.42rem 0 0.42rem 2.6rem;
  border-top: 1px dotted var(--rule);
}
.pillow ol li::before {
  content: counter(pillow, decimal-leading-zero);
  position: absolute;
  left: 0.15rem;
  top: 0.6rem;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* ---------- timeline [N45 the scar: accumulation, not triumph] ---------- */
.spine { list-style: none; margin: 2rem 0; padding: 0; }
.spine li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.spine .when {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding-top: 0.3em;
}
.spine .what { color: var(--ink-soft); }
.spine .what b { font-weight: normal; color: var(--ink); }

/* ---------- placeholders — honestly marked [C99 unfinished, E85] ---------- */
.ph {
  border-bottom: 1px dashed var(--vermilion);
  cursor: help;
  position: relative;
}
.ph::after {
  content: "＊";
  font-size: 0.65em;
  color: var(--vermilion-ink);
  vertical-align: super;
  margin-left: 0.1em;
}
.ph-note { /* page-level notice */
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion-ink);
  background: color-mix(in srgb, var(--vermilion) 7%, var(--paper));
  border: 1px dashed var(--vermilion);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  margin: 1.6rem 0;
}

/* ---------- errata table [V43 errata — corrections in public] ---------- */
.errata { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: var(--text-sm); }
.errata th, .errata td {
  text-align: left;
  padding: 0.55rem 0.8rem 0.55rem 0;
  border-top: 1px solid var(--rule);
  vertical-align: top;
}
.errata th {
  font-family: var(--mono);
  font-weight: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink-faint);
}
.errata td:first-child { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }

/* ---------- the gift [N98, C20 — given freely, nothing asked] ---------- */
.gift-item {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
  background: color-mix(in srgb, var(--paper-deep) 55%, var(--paper));
}
.gift-item h3 { margin-top: 0; font-style: normal; }

/* ---------- footer — the index & colophon seat [V19 index, V42 colophon] ---------- */
.site-foot {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 3rem;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}
.site-foot .index {
  columns: 2;
  column-gap: 2.5rem;
  list-style: none;
  margin: 0.8rem 0 1.6rem;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.site-foot .index li { padding: 0.22rem 0; break-inside: avoid; }
.site-foot .index a { text-decoration: none; }
.site-foot .index a:hover { color: var(--vermilion-ink); }
.site-foot .seal {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.site-foot .seal b { color: var(--vermilion-ink); font-weight: normal; }

/* ---------- motion constitution ----------------------------------------
   The page arrives set, like type. No entrance choreography — discarded
   under the portability rule (docs/verb-grammar.md). The single exception
   to "nothing moves without a hand on the book" is the wet ink line:
   the owner's touch precedes the reader's. ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* view transitions between pages — turning a page, not loading one */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 180ms; }
::view-transition-new(root) { animation-duration: 260ms; }

/* ---------- print — the gift should print beautifully [E7] ---------- */
@media print {
  body::before { display: none; }
  .site-head, .site-foot, .margin-note { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  a { text-decoration: none; color: black; }
  .gift-item { border: 1px solid #999; break-inside: avoid; }
}

/* ============================================================
   THE VERB GRAMMAR — docs/verb-grammar.md
   One artifact, twelve verbs, a state vector rendered to paper.
   Timing constitution unchanged: 150ms · 200ms · 640ms · 2s · ∞
   (hover-lantern dimming discarded under the portability rule —
   the doors' differences now come from dog-ears, not the mouse)
   ============================================================ */
.door-map a { transition: background 180ms ease; }

/* D2 — numbers are doors; margin whisper of destination */
a.room-ref {
  font-family: var(--mono);
  font-size: 0.9em;
  letter-spacing: 0.08em;
  text-decoration-style: dotted;
}
a.room-ref::after {
  content: " → " attr(data-name);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 200ms ease;
}
a.room-ref:hover::after, a.room-ref:focus-visible::after { opacity: 1; }

/* D3 — the thorough are told: substance, not congratulation */
.thorough-line {
  font-style: italic;
  color: var(--ink-soft);
  border-top: 1px dotted var(--rule);
  padding-top: 1rem;
  margin-top: 2rem;
}
.thorough-line::before {
  content: "for the thorough — ";
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--vermilion-ink);
}

/* E1 — hold to see the second thought [W7, E8]
   press-and-hold ≈400ms; cost of gesture matches privacy of content */
.second-thought {
  border-bottom: 1px dotted var(--vermilion);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.second-thought:active { cursor: grabbing; }
.second-thought .was {
  display: none;
  text-decoration: line-through;
  text-decoration-color: var(--vermilion);
  color: var(--ink-faint);
  font-style: italic;
}
.second-thought.showing .was { display: inline; }
.second-thought.showing .now { display: none; }
.second-thought::after {
  content: "﹡hold";
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion-ink);
  vertical-align: super;
  margin-left: 0.15em;
}
.second-thought.showing::after { content: "﹡the second thought"; }

/* the pencil-host carries the same affordance mark as the second thought */
.pencil-host::after {
  content: "﹡hold";
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion-ink);
  vertical-align: super;
  margin-left: 0.15em;
}
.pencil-host.lit::after { content: "﹡in pencil"; }

/* E2 — the verso: artifacts have backs */
.verso-card { position: relative; }
.verso-card .back {
  display: none;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem 1.2rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.8rem 0;
}
.verso-card .back .date {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.verso-card.flipped .front { display: none; }
.verso-card.flipped .back { display: block; animation: settle 200ms ease; }
@keyframes settle {
  from { opacity: 0; transform: rotateX(6deg); }
  to   { opacity: 1; transform: none; }
}
button.turn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
button.turn:hover, button.turn:focus-visible {
  color: var(--vermilion-ink);
  border-color: var(--vermilion);
}

/* E3 — corrections show their past */
.corrected {
  border-bottom: 1px dotted var(--rule);
  cursor: help;
}
.corrected:hover .was-text, .corrected:focus-visible .was-text {
  display: inline;
}
.corrected .was-text {
  display: none;
  text-decoration: line-through;
  text-decoration-color: var(--vermilion);
  color: var(--ink-faint);
  margin-right: 0.3em;
}
.aswas-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vermilion);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  text-align: center;
  padding: 0.5rem;
}

/* E4 — working definitions: a taxonomy owes its dictionary [W54] */
dfn.def {
  font-style: inherit;
  border-bottom: 1px dotted var(--vermilion);
  cursor: help;
}
.def-note {
  display: block;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-left: 2px solid var(--vermilion);
  padding: 0.5rem 0.8rem;
  margin: 0.5rem 0;
  animation: settle 200ms ease;
}

/* dog-ears, ribbon, spine — the reader's hand on the book
   (local, confessed, erasable via forget) */
.door-map .visited-dot {
  display: inline-block;
  width: 0; height: 0;
  border-top: 0.45em solid var(--rule);
  border-left: 0.45em solid transparent;
  margin-left: 0.5em;
  vertical-align: middle;
}
.door-map .ribbon {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--vermilion-ink);
  margin-left: 0.6em;
}
.door-map .ribbon::before { content: "▍"; margin-right: 0.3em; }

/* open — the book falls open where you stayed: the spine has taken a set */
.door-map a.spine-set {
  transform: translateX(0.5rem);
  background: linear-gradient(90deg, var(--paper-deep), transparent 55%);
  box-shadow: inset 4px 0 8px -4px rgba(35, 32, 27, 0.3);
}
.door-map .spine-note {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-style: italic;
  margin-left: 0.6em;
}

/* return — the owner's most recent touch, still wet for a fortnight.
   The one thing allowed to move unprovoked: ink drying on arrival. */
.ink-line {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-soft);
}
.ink-line .when {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.ink-line.wet {
  animation: write 900ms ease-out both, bleed 2s ease-out 900ms both;
}
@keyframes write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -2% 0 0); }
}
@keyframes bleed {
  from { text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent); }
  to   { text-shadow: none; }
}

/* hold — pencil under lamplight: the buried layer, and the lamp that finds it */
.pencil-host { border-radius: 3px; }
.pencil-host.lit {
  background: radial-gradient(
    420px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(214, 160, 78, 0.18), transparent 72%
  );
}
.pencil-layer {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  /* release: 2s ink-dry, then gone from the accessibility tree */
  transition: opacity 2s ease, max-height 2s ease, visibility 0s linear 2s;
}
.pencil-layer.on {
  opacity: 1;
  max-height: 14rem;
  visibility: visible;
  transition: opacity 200ms ease, max-height 200ms ease, visibility 0s;  /* surface: one fold */
}
.pencil-layer p {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-faint);
  transform: rotate(-0.6deg);
  margin: 0.3rem 0 0.3rem 1.2rem;
  max-width: calc(var(--measure) - 2ch);
}

/* M2 — one-sentence greeting */
#greet:not(:empty) {
  font-style: italic;
  color: var(--ink-soft);
}

/* M3 — honest aging of the unfinished */
.age {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion-ink);
  white-space: nowrap;
  margin-left: 0.5em;
}

/* M4 — make the house forget me */
#forget-confirm:not(:empty) {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--vermilion-ink);
  letter-spacing: 0.08em;
}

/* C2 — the disagreement is welcome [E50] */
.disagree-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.8rem 0 1.4rem;
}
.disagree-row button {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  background: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.disagree-row button:hover, .disagree-row button:focus-visible {
  color: var(--vermilion-ink);
  border-color: var(--vermilion);
}
.disagree-row output {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* C4 — the gift closes its own loop */
button.take {
  font-family: var(--mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--paper);
  background: var(--vermilion);
  border: none;
  border-radius: 2px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}
button.take:hover, button.take:focus-visible { background: var(--vermilion-ink); }
#gift-confirm:not(:empty) {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  display: block;
}

/* unfold — depth folds like paper; ink dries [200ms crease, 2s dry] */
details.depth[open] > *:not(summary) {
  animation: crease 200ms ease, dry 2s ease;
  transform-origin: top center;
}
@keyframes crease {
  from { opacity: 0; transform: rotateX(-4deg) translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dry {
  from { color: var(--ink-faint); }
  to   { color: inherit; }
}

/* V1 — turning, not loading: direction-aware page turn */
@media (prefers-reduced-motion: no-preference) {
  html[data-turn="fwd"]::view-transition-old(root) { animation: leaf-out-fwd 180ms ease both; }
  html[data-turn="fwd"]::view-transition-new(root) { animation: leaf-in-fwd 260ms ease both; }
  html[data-turn="back"]::view-transition-old(root) { animation: leaf-out-back 180ms ease both; }
  html[data-turn="back"]::view-transition-new(root) { animation: leaf-in-back 260ms ease both; }
}
@keyframes leaf-out-fwd  { to { opacity: 0; transform: translateX(-14px); } }
@keyframes leaf-in-fwd   { from { opacity: 0; transform: translateX(14px); } }
@keyframes leaf-out-back { to { opacity: 0; transform: translateX(14px); } }
@keyframes leaf-in-back  { from { opacity: 0; transform: translateX(-14px); } }

/* nearest rooms on the 404 (D4) */
#nearest:not(:empty) { margin-top: 1rem; }