/* *-*-*-*-*-*-*-*-*-*-*-* books: a shelf in a room, the page opens at damla's three books, one comes down and opens *-*-*-*-*-*-*-*-*-*-*-* */
:root {
  --bg: #0b0b0c; --panel: #161618; --ink: #ededef; --ink2: #a0a0a8; --line: #5a5a66; --dim: #7a7a84;
  /* the garden's colours */
  --leaf: #8ed38a; --leaf2: #5fae6e; --apple: #ff8a7a; --bark: #b38b6d; --roof: #d98c6c; --light: #ffd76a;
  --owl: #d8c4a2; --star: #5f5f6b; --star2: #d6d6e0; --moon: #f3e2a6; --cloud: #4b5160;
  --pink: #f5a3c0; --yellow: #f3d47a; --lilac: #b7a5f4; --sky: #8ec5ff; --grass: #71c27a; --grass2: #3f7d50;
  --firefly: #e9f59a; --fence: #7a6a5c; --water: #6f9fd8; --fly: #e0c27b; --fly2: #d8a0b8;
  --hair: #b8743f; --skin: #f1d9c4; --red: #ff5a4a; --cream: #f1e8d4;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --pad: max(5vw, calc((100% - 1600px) / 2));
  --glow: 0 0 8px rgba(255, 226, 150, .65);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); overflow: hidden; position: relative; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink2); outline-offset: 4px; }
a:hover, a:focus-visible, button:hover { text-shadow: var(--glow); color: var(--ink); }

/* *-*-*-*-*-*-*-*-*-*-*-* the menu, as on the home page (canli/garden/home.css) *-*-*-*-*-*-*-*-*-*-*-* */
header.site { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 22px var(--pad); font-size: 15px; pointer-events: none; }
header.site nav, header.site .elsewhere { display: flex; gap: 26px; align-items: center; }
header.site .elsewhere { margin-left: auto; }
header.site nav > *, header.site .elsewhere > * { pointer-events: auto; }
header.site a, header.site button { color: var(--ink2); }
header.site a:hover, header.site button:hover, header.site a:focus-visible { color: var(--ink); }
header.site .menu-t[aria-current=page] { color: var(--ink); }
.home { color: var(--ink) !important; }
.menu { position: relative; }
.menu-d { position: absolute; top: calc(100% + 12px); left: -16px; z-index: 30; min-width: 300px; padding: 6px 0; background: var(--panel); }
.menu-d[hidden] { display: none; }
.menu-d > * { display: flex; justify-content: space-between; gap: 24px; padding: 8px 16px; white-space: nowrap; }
.menu-d a span { color: var(--ink2); }
header.site .menu-d a { color: var(--ink); }
.find { display: flex; align-items: center; gap: 8px; }
.find input { width: 0; opacity: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 15px var(--sans); outline: none; transition: width .2s, opacity .2s; }
.find.on input { width: 170px; opacity: 1; border-bottom: 1px solid var(--line); }
.find svg { display: block; }

/* on a phone the bar is one row: canli/garden/nav.css */

/* *-*-*-*-*-*-*-*-*-*-*-* the room *-*-*-*-*-*-*-*-*-*-*-* */
.stage { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; touch-action: manipulation; }
.stage canvas { position: absolute; left: 0; top: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--top, 70px) - 18px), #000 calc(var(--top, 70px) + 14px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--top, 70px) - 18px), #000 calc(var(--top, 70px) + 14px)); }
#back { z-index: 1; transition: opacity .7s ease; }
#front { z-index: 3; }
body.reading #back { opacity: .32; }
/* the three spines: each one a button over its book, its name along the spine, read top to bottom */
.spines { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .5s ease; }
body.reading .spines { opacity: .32; }
body:not(.reading) .spines .spine { pointer-events: auto; }
.spine { position: absolute; display: block; min-width: 40px; min-height: 40px; }
.spine .t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); display: flex; flex-direction: column;
  align-items: center; white-space: nowrap; line-height: 1.2; text-align: center; }
.spine .nm { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.spine .sh { font-size: 15px; color: var(--ink2); margin-top: 2px; }
.spine:hover, .spine:focus-visible { text-shadow: none; }
.spine:hover .t, .spine:focus-visible .t { text-shadow: var(--glow); }
.spine:focus-visible { outline: none; }
body.reading .spine.out { visibility: hidden; }

/* *-*-*-*-*-*-*-*-*-*-*-* the open book: its words on its pages *-*-*-*-*-*-*-*-*-*-*-* */
.open { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.open[hidden] { display: none; }
.open:focus { outline: none; }
.open > * { pointer-events: auto; }
.page { position: absolute; overflow: hidden; opacity: 0; transition: opacity .35s ease; }
.open.shown .page { opacity: 1; }
.open.turning .page { opacity: 0; transition-duration: .16s; }
.page h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.page .prog { margin: 6px 0 0; color: var(--ink2); }
.page .head { padding-bottom: 18px; }
.page ol, .page ul { list-style: none; margin: 0; padding: 0; }
.page ol > li { display: grid; grid-template-columns: 1ch 2ch minmax(0, 1fr); column-gap: 10px; padding: 3px 0; }
.page .a { font-family: var(--mono); color: var(--apple); }
.page .num { color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.page ol > li > a { line-height: 1.45; color: var(--ink); }
.page ol > li.read > a { color: var(--ink2); }
.page ol > li > a:hover, .page ol > li > a:focus-visible { color: var(--ink); }
.page ol > li.here .num { color: var(--ink); font-weight: 600; }
.page .notes { grid-column: 3; margin: 4px 0 4px; display: grid; gap: 6px; }
.page .notes a { display: block; line-height: 1.45; color: var(--ink2); }
.page .notes a:hover q, .page .notes a:focus-visible q { color: var(--ink); }
.page .notes q::before { content: "\201C"; } .page .notes q::after { content: "\201D"; }
.page .notes .c { display: block; color: var(--ink); }
.page.soon { display: flex; align-items: center; justify-content: center; }
.page .soon-w { font-size: 17px; color: var(--ink2); }
.open .x { position: absolute; font-family: var(--mono); font-size: 15px; color: var(--apple); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease; }
.open .x:hover, .open .x:focus-visible { color: var(--apple); text-shadow: 0 0 6px rgba(255, 138, 122, .7); }
.open .turn { position: absolute; font-family: var(--mono); font-size: 17px; color: var(--ink2); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease; }
.open .turn:hover, .open .turn:focus-visible { color: var(--ink); }
.open .turn[hidden] { display: none; }
.open.shown .x, .open.shown .turn { opacity: 1; }
/* the measuring page: never seen */
.measure { position: absolute; left: -9999px; top: 0; visibility: hidden; }

/* a finger's room on a phone (the bar's own in nav.css): every step on the pages answers a row round it */
@media (max-width: 700px) {
  .page ol > li > a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .page ol > li > a { position: relative; }
  .page ol > li > a::after { width: 100%; height: max(100%, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  #back, .spines, .page, .open .x, .open .turn { transition: none !important; }
}