/* ==========================================================
   BASE — reset, the desk it all sits on, ambient glow, site title, stage
   Global page chrome OUTSIDE the book itself. @keyframes flicker -> animations.css
   ========================================================== */

*{box-sizing:border-box; margin:0; padding:0;}

body{
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 45% 32% at 16% 84%, rgba(125,62,16,.12), transparent 70%),
    radial-gradient(ellipse 38% 30% at 86% 14%, rgba(145,78,22,.09), transparent 70%),
    radial-gradient(ellipse 55% 38% at 72% 92%, rgba(35,16,4,.6), transparent 75%),
    radial-gradient(ellipse 50% 35% at 8% 10%, rgba(30,13,4,.55), transparent 75%),
    radial-gradient(ellipse 120% 90% at 50% 34%, var(--desk) 0%, var(--desk-dark) 78%);
  background-color:var(--desk-dark);
  font-family:'IM Fell English', Georgia, serif;
  color:var(--paper);
  overflow-x:hidden;
  padding:0 2vw 24px;
}

/* ambient candlelight flicker on the desk */
.glow{
  position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 42%, rgba(255,165,70,.1), transparent 70%);
  animation:flicker 7s ease-in-out infinite;
}

header.site{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4em;
  min-height:0;
  width:100%;
  position:relative;
  text-align:center;
  margin:0;
  user-select:none;
}
header.site h1{
  font-family:'IM Fell English SC', Georgia, serif;
  font-weight:400;
  font-size:clamp(1rem, 0.5rem + 1.1vw, 3rem);
  letter-spacing:.35em;
  text-indent:.35em;
  color:var(--brass);
  transition:opacity .35s ease;
}
header.site p{
  font-style:italic;
  font-size:.78rem;
  color:#8a7452;
  margin-top:.3em;
  letter-spacing:.08em;
}

/* ============ FULLSCREEN TOGGLE ============
   Sits beside the title, not the book — deliberately plain UI chrome (see
   ui.css's own banner comment on that split) rather than book typography,
   set in the same small-caps face as the folio/jump control so the two
   "controls, not prose" elements agree with each other. Desktop/tablet
   only: js/fullscreen.js also hides it outright when the Fullscreen API
   itself isn't available (iOS Safari), so it never sits there inert. */
.fs-toggle{
  font-family:'IM Fell English SC', Georgia, serif;
  font-size:clamp(.7rem, .55rem + .3vw, .95rem);
  letter-spacing:.15em;
  text-indent:.15em;
  color:var(--ink-faint);
  background:none;
  border:none;
  border-bottom:1px dashed rgba(156,124,60,.85);
  padding:0 0 .15em;
  cursor:pointer;
  transition:color .2s, border-color .2s, top .35s ease, right .35s ease;
}
.fs-toggle:hover, .fs-toggle:focus-visible{ color:var(--brass); border-color:var(--brass); }

/* Title fades away; the toggle re-parents itself to the corner of the
   viewport first (fullscreen.js) so it stays reachable to switch back —
   losing the only way back out would strand a reader who can't find F11. */
body.fs-mode header.site h1{ opacity:0; pointer-events:none; }
body.fs-mode .fs-toggle{
  position:fixed;
  top:14px; right:18px;
  z-index:50;
}

/* the desk area flanking the book: clicking it turns pages too */
.stage{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  position:relative;   /* the anchor for .candle and .candle-cast below */
}
.side-zone{
  flex:1 1 0;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.side-zone:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; }

/* In fullscreen, the book moves flush to the right edge so the candle gets
   the whole gutter on the left instead of being squeezed centre-book (see
   .candle's own fs-mode override below). #sideLeft is left free to keep
   growing — it, alone, absorbs all the freed space, which is what pushes
   book-wrap to the right — while #sideRight's grow is zeroed so none of
   that space goes to its right instead. justify-content on .stage never
   has to change: with only one side still growing, centering is moot. */
body.fs-mode #sideRight{ flex:0 0 0; }

/* ============ THE CANDLE ============
   Desk furniture, not part of the book — which is why it lives here in
   base.css beside .glow, and why its colours are the only palette entries
   outside the book's own (see tokens.css).

   The stick is a raster plate with a real alpha channel, so no blend mode:
   .plate-img's multiply exists to print INTO parchment, and would erase a
   candle standing on a near-black desk. The flame is CSS because a flame
   that repeats is a flame you notice repeating.

   .candle spans the WHOLE true gutter — from the actual browser edge to the
   book's left edge — so justify-content:center centres it in the space the
   reader actually sees, not just the space inside .stage. left:-2vw reaches
   back across body's own side padding (base.css `body{padding:0 2vw ...}`)
   to that true edge; .stage itself doesn't clip (no overflow set), so the
   reach-back renders fine. It's absolutely positioned and pointer-events:none,
   so it never enters flex flow and can't nudge the book's own layout no
   matter its size. top:0/bottom:0 + align-items:center line the flame up
   with the book's vertical centre rather than standing it on the desk floor.

   Sized off the BOOK, not the gutter: .candle-body's width TARGETS 60% of
   --page-h, converted through the artwork's own pixel ratio (457×1310, so
   height*457/1310 ≈ height*.2093) — so the candle is the same proportion of
   the book on a small window and a huge monitor alike. That target is
   wrapped in min(…, 100% - 56px): 100% here is .candle's OWN width, which by
   construction (left/right above) already equals the true gutter, so on a
   window where the gutter is thinner than 60%-of-book would need — width and
   height don't shrink together, a short-but-not-narrow window can pinch the
   gutter hard even at a generous viewport width — the candle yields to the
   gutter instead of overflowing past the browser edge or over the book. The
   trailing `- 56px` reserves 28px of clear parchment-dark desk on EACH side
   even at that shrink point, so the flame never ends up glued to the book's
   cover — centred always means centred with visible air on both sides, not
   just centred within a box it's touching the walls of.

   Only shown once the gutter has real room to spare: the container query
   below (keyed off .candle's own rendered width, which IS the true gutter —
   see above) hides the candle once that space pinches too tight, rather than
   relying on the shrink-to-fit above alone, because a candle pinched down to
   a sliver reads as clutter, not furniture, even when it technically fits.
   This deliberately measures the ACTUAL free space next to the book rather
   than raw viewport width (a `@media` query could only see the latter) —
   a short, wide window and a tall, narrow one are judged the same way, so a
   tablet in landscape whose book is height-capped small (leaving a wide
   gutter) keeps its candle even under a viewport width where a plain desktop
   window would lose it, and vice versa. */
.candle{
  position:absolute;
  top:0; bottom:0; left:-2vw;
  /* the book's left edge: half a spread (--page-w) plus .book's 14px padding,
     measured out from the centre of the stage */
  right:calc(50% + var(--page-w) + 14px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;   /* the gutter is a page-turn button; keep it clickable */
  z-index:1;
  container-type:inline-size;   /* lets the query below read the true gutter width */
}
/* book-wrap is flush against .stage's right edge in fullscreen (#sideRight
   above), so the book's left edge is no longer "50% + half a spread" from
   centre — it's a full spread's width in from .stage's own right edge. */
body.fs-mode .candle{
  right:calc(2 * var(--page-w) + 28px);
}
/* Below this the reserved 28px-per-side margin above would eat nearly the
   whole candle, so it's hidden outright instead of shown-but-tiny. Tune by
   eye, same as every other fit-and-finish number in this file. */
@container (max-width: 150px){
  .candle-body{ display:none; }
}
.candle-body{
  position:relative;
  width:min(calc(var(--page-h) * .2093), calc(100% - 56px));
  height:auto;
}
.candle-stick{
  display:block;
  width:100%; height:auto;
}

/* The flame sits at the wick, which the artwork puts at 49.56% across and
   0.61% down — i.e. hard against the top edge. So the flame is anchored to
   the top of the image and burns upward OUT of it; bottom:97.4% drops its
   base just far enough to overlap the wick rather than hover above it.
   Every number here is measured off that file — re-crop it and they move. */
.flame{
  position:absolute;
  left:49.56%;
  bottom:97.4%;
  width:12.5%;
  aspect-ratio:.42;
  transform:translateX(-50%);
  transform-origin:50% 100%;   /* it leans from the wick, not its middle */
  animation:flame-dance 9s ease-in-out infinite;
}
.flame-body{
  position:absolute; inset:0;
  /* a teardrop: the vertical radii (78%) draw the taper, the horizontal
     (50%) the girth. Not a rotated square — that only reads as a flame at
     one aspect ratio, and this one is taller than it is wide. */
  border-radius:50% 50% 42% 42% / 78% 78% 22% 22%;
  background:radial-gradient(ellipse 70% 55% at 50% 74%,
    var(--flame-core) 0%,
    var(--flame) 45%,
    var(--flame-deep) 76%,
    rgba(201,84,26,0) 100%);
  filter:blur(1px);
}
/* the hot core, low in the flame where the wax actually burns */
.flame-core{
  position:absolute;
  left:50%; bottom:8%;
  width:46%; height:46%;
  transform:translateX(-50%);
  border-radius:50% 50% 42% 42% / 74% 74% 26% 26%;
  background:radial-gradient(ellipse 70% 60% at 50% 70%,
    var(--flame-core) 0%,
    rgba(255,215,130,.55) 58%,
    rgba(255,190,90,0) 100%);
  filter:blur(1.2px);
  /* its own clock, deliberately not a divisor of the flame's 9s — the core
     and the body must never be seen to breathe in step */
  animation:flame-core 5.5s ease-in-out infinite;
}
/* the light the flame throws into the air immediately around it */
.flame-halo{
  position:absolute;
  left:49.56%;
  bottom:97.4%;
  width:130%;
  aspect-ratio:1;
  transform:translate(-50%, 38%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,166,72,.4) 0%,
    rgba(255,140,50,.13) 34%,
    rgba(255,130,40,0) 68%);
  animation:flame-halo 9s ease-in-out infinite;
}

/* The light the candle throws ON THE BOOK lives in book.css as a child of
   .page.left, not here — see the note there for why. */

/* ---- load failure notice ----
   Hidden unless js/main.js couldn't fetch the pages. The commonest cause is
   opening index.html straight off disk, which browsers block for fetch(). */
#bookError{ display:none; }
body.load-failed .stage,
body.load-failed .scroll-book{ display:none; }
body.load-failed #bookError{
  display:block;
  max-width:46ch;
  margin:auto;
  padding:2em;
  border:1px solid rgba(156,124,60,.4);
  border-radius:3px;
  background:rgba(24,14,7,.5);
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--paper);
  line-height:1.6;
  text-align:center;
}
#bookError h2{
  font-family:'IM Fell English SC', Georgia, serif;
  font-weight:400; color:var(--brass);
  letter-spacing:.1em; margin-bottom:.7em;
}
#bookError p{ margin:.7em 0; }
#bookError code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.85em; color:var(--brass);
  background:rgba(0,0,0,.35); padding:.15em .45em; border-radius:2px;
}