/* A silver object in black water; the reading surface stays quiet. */
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid #ddd; outline-offset: 7px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#wordmark button { border: 0; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
#wordmark button:focus-visible { border-radius: 1px; outline-offset: 4px; }
#title.lifted { transform: translateY(-31vh) scale(.50); }
#book {
  position: fixed; inset: 17vh 0 4vh; z-index: 7; display: flex;
  align-items: center; justify-content: center; perspective: 1400px;
  pointer-events: none; color: #ddd;
}
#book > * { pointer-events: auto; }
.tome-presentation {
  width: min(70vh, 90vw, 680px); text-align: center;
  animation: tome-arrive 1.4s cubic-bezier(.16,1,.3,1) both;
}
.tome-touch {
  display: block; width: 100%; position: relative; border: 0;
  color: inherit; background: transparent; cursor: pointer;
  transform: rotateY(var(--turn, 0deg)) rotateX(var(--lean, 0deg));
  transition: transform .6s ease, filter .6s ease;
}
.tome-touch:hover { filter: brightness(1.15); }
.tome-touch:focus-visible { outline-offset: -18px; }
.tome-float { animation: tome-breathe 7s ease-in-out infinite; }
.tome-art {
  display: block; width: 100%; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--glyph-size); line-height: 1; letter-spacing: 0;
  font-variant-ligatures: none; font-weight: 400; text-align: left;
  user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 0 22px #c7c7c716);
}
.tome-row { display: block; white-space: pre; height: 1em; }
.tome-art span { display: inline-block; width: .6em; height: 1em; }
.tome-presentation.unsealing { animation: tome-unseal .65s ease-in both; pointer-events: none; }
@keyframes tome-arrive { from { opacity: 0; transform: translateY(45px) scale(.91); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes tome-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tome-unseal { to { transform: translateX(-9%) rotateY(-65deg) scale(.9); opacity: 0; filter: blur(2px); } }
@keyframes reader-arrive { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes inscription { from { opacity: 0; filter: blur(3px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
/* ── the open volume: a reading surface over the silver tome ── */
.diary-volume {
  position: relative;
  width: min(94vw, 1020px); height: min(78vh, 660px);
  animation: reader-arrive .8s cubic-bezier(.16,1,.3,1) both;
}
.diary-object {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  opacity: .55; pointer-events: none;
}
.left-leaf, .right-leaf {
  position: absolute; top: 7%; bottom: 12%; width: 44%;
  padding: 22px 24px;
  background: linear-gradient(rgba(5,5,6,.66), rgba(5,5,6,.78));
  border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.left-leaf { left: 4.5%; overflow: auto; scrollbar-width: thin; }
.right-leaf { right: 4.5%; display: flex; flex-direction: column; }
.right-leaf:not(.has-ink) {
  align-items: center; justify-content: center;
  background: none; border: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* the first word — the book says hello before you do */
.first-word { border: 0; background: none; cursor: pointer; color: #e9e9ee; padding: 20px; }
.first-word .hello-type {
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(30px, 5vw, 46px);
  text-shadow: 0 0 24px rgba(255,255,255,.35);
  transition: color .4s, text-shadow .4s;
}
.first-word:hover .hello-type, .first-word:focus-visible .hello-type {
  color: #fff; text-shadow: 0 0 28px rgba(255,255,255,.7);
}
.first-word .tome-art { width: min(30vw, 300px); }
.hello-draw {
  width: min(38vw, 300px); overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.25));
}
.hello-draw path {
  fill: #eceaf1; fill-opacity: 0;
  stroke: #eceaf1; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hello-draw.inked path { stroke-dashoffset: 0 !important; fill-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hello-draw path { fill-opacity: 1; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ink: the book answers in Fell, the visitor writes in mono */
.writing-desk { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ink-log { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.tome-ink {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 17px; line-height: 1.55; color: #eceaf1; margin: 0 0 14px;
}
.visitor-ink { font-size: 12px; line-height: 1.6; color: #93939b; text-align: right; margin: 0 0 14px 18%; }
.ink-form {
  display: flex; gap: 10px; align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px;
}
.ink-form textarea {
  flex: 1; background: none; border: 0; outline: none; resize: none;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: #eceaf1; caret-color: #b9a1ff;
}
.ink-form textarea::placeholder { color: #66666e; }
.ink-form button {
  border: 0; background: none; cursor: pointer;
  color: #8a8a92; font-size: 16px; padding: 2px 6px; transition: color .3s;
}
.ink-form button:hover { color: #fff; }
.ink-form button:disabled { color: #4c4c52; cursor: default; }
.ink-notice { min-height: 1.4em; margin: 8px 0 0; font-size: 10px; letter-spacing: .14em; color: #8a8a92; }

/* the left leaf — a revealed folio */
.leaf-nav { float: right; display: flex; gap: 4px; }
.leaf-nav button {
  border: 0; background: none; cursor: pointer;
  font: 16px ui-monospace, "SF Mono", Menlo, monospace;
  color: #6a6a72; padding: 2px 7px; transition: color .3s;
}
.leaf-nav button:hover { color: #fff; }
.left-leaf .folio-number { display: block; font-size: 10px; letter-spacing: .32em; color: #8a8a92; }
.left-leaf h2 {
  font-family: "IM Fell English", Georgia, serif;
  font-weight: 400; font-size: 24px; color: #f0eef5; margin: 10px 0 4px;
}
.left-leaf p { font-size: 12.5px; line-height: 1.75; color: #c9c9cf; margin-top: 12px; }
.left-leaf .return-to-ink {
  margin-top: 18px; border: 0; border-bottom: 1px solid #7777; background: none;
  padding: 4px 0; cursor: pointer; color: #a5a5ad; font-size: 11px; letter-spacing: .08em;
}
.left-leaf .return-to-ink:hover { color: #fff; border-color: #ddd; }
.left-leaf.ink-arrival { animation: inscription .6s ease both; }

.diary-actions { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.close-diary {
  border: 0; background: none; cursor: pointer;
  font: 13px ui-monospace, "SF Mono", Menlo, monospace;
  color: #6a6a72; padding: 4px 8px; transition: color .3s;
}
.close-diary:hover { color: #fff; }
.voice-state { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #55555c; }

/* the seal — a small mark that says nothing */
.open-seal {
  border: 0; background: none; cursor: pointer; margin-right: 26px;
  font: 15px ui-monospace, "SF Mono", Menlo, monospace;
  color: #6a6a72; padding: 4px 8px; transition: color .3s, text-shadow .3s;
}
.open-seal:hover { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.7); }
.seal-game { display: flex; flex-direction: column; height: 100%; }
.seal-ring {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 18px 0 6px;
}
.seal-ring button {
  font: 24px ui-monospace, "SF Mono", Menlo, monospace;
  color: #7f7f88; background: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.13); border-radius: 8px;
  padding: 16px 0;
  transition: color .25s, border-color .25s, text-shadow .25s, transform .25s;
}
.seal-ring button:hover { color: #c9c9cf; border-color: rgba(255,255,255,.3); }
.seal-ring button.flare {
  color: #fff; border-color: rgba(255,255,255,.65);
  text-shadow: 0 0 18px rgba(255,255,255,.9); transform: scale(1.06);
}
.seal-ring button.good {
  color: #b9a1ff; border-color: rgba(160,120,255,.6);
  text-shadow: 0 0 14px rgba(150,110,255,.85);
}
.seal-ring button.bad {
  color: #e0c36a; border-color: rgba(225,195,105,.6);
  text-shadow: 0 0 14px rgba(225,195,105,.7);
}
.seal-state { min-height: 1.4em; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a8a92; }

/* small water: leaves stack, the tome sinks further back */
@media (max-width: 760px) {
  .diary-volume { height: min(84vh, 720px); }
  .diary-object { opacity: .3; }
  .left-leaf, .right-leaf { width: auto; left: 2%; right: 2%; }
  .right-leaf { top: auto; bottom: 11%; height: 62%; }
  .left-leaf { top: 4%; bottom: auto; max-height: 70%; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tome-touch { transform: none; }
}