/* ===================================================================
   book.css — "The Griddle Codex"
   The blog as an illuminated manuscript, on a book you actually turn.

   Palette is pigment-accurate rather than picked by eye: lapis
   ultramarine, minium vermilion, verdigris, iron-gall ink, and gold
   that needs three stops to read as metal instead of yellow paint.

   Every ornament here is CSS. That matters for the page turn: the
   physics slices a page into strips, and each strip holds a full
   clipped COPY of the page, so anything drawn in CSS survives slicing
   untouched — no seam-aware artwork required.
   =================================================================== */

#v-blog{
  /* ---- pigments ---- */
  --lapis:#2B4A99;          /* ultramarine, the expensive one */
  --lapis-d:#1E356E;
  --lapis-l:#4468BE;
  --minium:#A72C2D;         /* vermilion — the site red, luckily period-correct */
  --minium-l:#C0453B;
  --verdigris:#4A6B3A;
  --ink:#3A2A18;            /* iron-gall brown-black, never true black */
  --ink-soft:#5A4530;
  /* gold: metal needs a dark side, a highlight and a mid */
  --gold-d:#8A6A1F;
  --gold:#C9A233;
  --gold-l:#F0DFA0;
  /* vellum, fresh centre to foxed edge */
  --v1:#F8F1DC;
  --v2:#F2E8CE;
  --v3:#E8DBBC;
  --v4:#D8C79F;

  --page-w:376px;
  --page-h:512px;
  --seg:12;                 /* strips per turning leaf */
}

/* The whole codex is a drag surface — a page-turn gesture is a click-
   and-drag, so without this every turn also drags a text selection or
   starts an image-ghost drag across the scene. */
#v-blog, #v-blog *{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
#v-blog img, #v-blog svg{ -webkit-user-drag:none; user-drag:none; }

/* ---- the room -------------------------------------------------------
   A real tabletop: the candle burns top-right, the watch sits bottom-
   left, the book is centred between them, exactly as laid out on a
   desk for reading by firelight. */
#v-blog .view-panel.cx-panel{
  /* The panel carries the tabletop too, not just the flat colour under it.
     The room paints the same texture over the whole of itself, so this is
     never seen — until something offsets the room by a few pixels, and then
     #1A1512 shows as a hard black band across the top, which is exactly what
     it looks like: a header. There is no arrangement of the room that can
     reveal a bare colour now, because the colour is no longer bare. */
  background:url(../assets/table-bg.webp) center/cover no-repeat #1A1512;
  padding:0;
  overflow:hidden;                 /* one page, one section — never a scroller */
}
.cx-home{
  position:absolute; top:clamp(10px,2.4vh,22px); left:50%; transform:translateX(-50%);
  z-index:36; display:block; line-height:0;
  padding:9px 12px;                    /* tap target, not just a wordmark */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:opacity .2s;
}
.cx-home img{width:clamp(96px,11vw,132px);height:auto;display:block}
@media (hover:hover){.cx-home:hover{opacity:.8}}

.cx-back{
  position:absolute; top:clamp(10px,2.4vh,20px); left:clamp(10px,2.4vw,20px);
  z-index:36; width:auto; height:auto; padding:8px; margin:-8px; border:0; background:none;
  display:grid; place-items:center; cursor:pointer;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:transform .15s;
}
.cx-back img{height:clamp(28px,3.2vw,38px);width:auto;display:block}
@media (hover:hover){.cx-back:hover{transform:scale(1.08)}}
/* mirrors .cx-back across the room, so the exit and the menu bracket the
   wordmark at the same height.

   Red rather than cream, and this is the one page where that matters: the
   candle stands in the top-right corner, and on a narrow screen it is large
   enough that the burger lands on the wax — three cream strokes on a cream
   candle. Red reads against both the wax and the dark wood, which is the
   same reason the exit mark opposite it is red. */
#v-blog .cx-menu{
  position:absolute; top:clamp(10px,2.4vh,20px); right:clamp(4px,1.8vw,14px);
  z-index:36; color:#E23A34;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(199,42,45,.5));
}
@media (hover:hover){
  #v-blog .cx-menu:hover span,#v-blog .cx-menu:hover span::before,#v-blog .cx-menu:hover span::after{background:#FBF0D8}
}
.cx-room{
  position:relative;
  height:100vh; height:100lvh; width:100%;
  display:grid; place-items:center;
  padding:clamp(56px,9vh,86px) clamp(8px,2vw,30px) clamp(10px,2vh,20px);
  perspective:2200px; perspective-origin:50% 42%;
  overflow:hidden;
}
.cx-table{
  position:absolute; inset:0; z-index:0;
  background:url(../assets/table-bg.webp) center/cover no-repeat #1A1512;
}
.cx-table::after{     /* settle the videos and the book into one light */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 85% at 50% 46%, rgba(0,0,0,0) 40%, rgba(8,5,3,.55) 100%);
}
.cx-glow{
  position:absolute; z-index:1; pointer-events:none;
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
  object-fit:contain;
}
.cx-glow.candle{ width:clamp(120px,15vw,220px); top:clamp(4px,2vh,26px); right:clamp(4px,3vw,60px);
  pointer-events:auto; cursor:default; }
.cx-glow.watch{  width:clamp(96px,11.5vw,168px); bottom:clamp(4px,2vh,22px); left:clamp(4px,3vw,54px); }

/* easter egg: three clicks on the flame snuffs it — no more light cast */
.cx-room.cx-snuffed .cx-firelight,
.cx-room.cx-snuffed .cx-ambient{opacity:0 !important}

/* ---- firelight ------------------------------------------------------
   The video is real flame footage, so its own flicker is already
   physically correct — this layer is the light that flame throws back
   onto the table and the book, which the footage alone can't cast.
   book.js drives --flick (0..1) from a signal grounded in the measured
   physics of a candle flame: flicker research finds a dominant mode at
   ~10 Hz (mean 10.1 Hz, std 0.5 Hz — Kitahata et al., Sci. Rep. 2016;
   Scientific Reports 41598-018-36754-w), so the pool's intensity is a
   sum of that frequency plus a slower turbulent drift, not a metronome. */
.cx-firelight{
  /* Anchored below/behind the candle's own footprint (its flame + wax
     sit in the top clamp(4px,2vh,26px)..~240px band) so the flicker
     pools on the table and wall around the candle instead of washing
     back across the flame graphic itself, which read as the candle
     going translucent. */
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(70px,9vh,150px); right:clamp(-70px,-3vw,-10px);
  width:clamp(320px,38vw,560px); height:clamp(320px,38vw,560px);
  background:radial-gradient(circle, rgba(255,178,90,.85) 0%, rgba(255,140,50,.35) 30%, transparent 65%);
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
  opacity:var(--flick,.5);
  filter:blur(10px);
}
.cx-ambient{             /* the whole room breathing with the same flame */
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 100% at 82% 8%, rgba(255,150,70,.16), transparent 60%);
  mix-blend-mode:soft-light; -webkit-mix-blend-mode:soft-light;
  opacity:var(--flickAmb,.6);
}

/* ---- the book ------------------------------------------------------ */
.cx-book{
  position:relative; z-index:2;
  width:calc(var(--page-w) * 2);
  height:var(--page-h);
  transform-style:preserve-3d;
  transform:rotateX(9deg);
}
/* leather boards, a few mm proud of the leaves on three sides */
.cx-book::before{
  content:""; position:absolute; z-index:0;
  left:-13px; right:-13px; top:-10px; bottom:-10px;
  background:linear-gradient(#4A2418,#331709 60%,#251006);
  border-radius:3px 7px 7px 3px;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.8), 0 2px 0 rgba(255,220,170,.09) inset;
}

/* the stacked fore-edges of two or three hundred leaves */
.cx-block{
  position:absolute; top:2px; bottom:2px; width:9px; z-index:1;
  background:repeating-linear-gradient(90deg,
    var(--v3) 0 1px, var(--v1) 1px 2px, var(--v2) 2px 3px);
  box-shadow:inset 0 0 6px rgba(90,60,25,.5);
}
.cx-block.l{left:-9px;border-radius:2px 0 0 2px}
.cx-block.r{right:-9px;border-radius:0 2px 2px 0}

/* ---- a page -------------------------------------------------------- */
.cx-pg{
  position:absolute; top:0; width:var(--page-w); height:var(--page-h);
  overflow:hidden;
  background:
    /* foxing: brown bloom in the corners and along the fore-edge */
    radial-gradient(70% 55% at 96% 4%, rgba(150,105,45,.30), transparent 60%),
    radial-gradient(60% 50% at 4% 97%, rgba(150,105,45,.22), transparent 60%),
    radial-gradient(120% 100% at 50% 50%, var(--v1) 30%, var(--v2) 68%, var(--v3) 100%);
  color:var(--ink);
}
/* parchment grain. One turbulence octave at high frequency reads as
   skin; add octaves and it turns to marble. */
.cx-pg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' seed='7'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='120' height='120' filter='url(%23g)' opacity='0.42'/></svg>");
  background-size:120px 120px;
}
.cx-pg.l{left:0}
.cx-pg.r{right:0}
/* the gutter: paper curving down into the spine */
.cx-pg.l::after,.cx-pg.r::after{
  content:""; position:absolute; top:0; bottom:0; width:46px; pointer-events:none;
}
.cx-pg.l::after{right:0;background:linear-gradient(90deg,transparent,rgba(60,38,16,.42))}
.cx-pg.r::after{left:0;background:linear-gradient(-90deg,transparent,rgba(60,38,16,.42))}

/* ---- illuminated border -------------------------------------------- */
/* Blue band carrying gold lozenges, with a gold fillet inside and out.
   The lozenges are a conic-gradient diamond tiled by background-size —
   one paint, no elements. */
.cx-bd{position:absolute;inset:11px;pointer-events:none}
.cx-bd::before{
  content:""; position:absolute; inset:0;
  padding:13px;
  background:
    /* gold fillets */
    linear-gradient(var(--gold-d),var(--gold) 35%,var(--gold-l) 50%,var(--gold) 62%,var(--gold-d)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow:0 0 0 1px rgba(120,90,30,.5), inset 0 0 0 1px rgba(120,90,30,.45);
}
.cx-bd::after{
  content:""; position:absolute; inset:3px;
  padding:7px;
  background:
    conic-gradient(from 45deg at 50% 50%,
      var(--gold-l) 0 25%, var(--gold) 0 50%, var(--gold-d) 0 75%, var(--gold) 0) 0 0/14px 14px,
    linear-gradient(var(--lapis-l),var(--lapis) 40%,var(--lapis-d));
  background-blend-mode:soft-light,normal;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* white penwork: tiny dots flicked along the blue band */
.cx-pen{position:absolute;inset:14px;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,252,240,.85) .9px,transparent 1.1px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding:6px; opacity:.5}

/* ---- text block (medieval canon: outer and foot margins double) ---- */
.cx-tb{
  position:absolute;
  left:42px; right:52px; top:44px; bottom:62px;
  display:flex; flex-direction:column;
}
.cx-pg.r .cx-tb{left:52px;right:42px}

/* ---- type ---------------------------------------------------------- */
.cx-rub{                       /* rubric: the red opening line */
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--minium); margin:0 0 9px;
}
.cx-h{
  font-family:Fraunces,Georgia,serif; font-weight:500;
  font-size:25px; line-height:1.14; letter-spacing:-.005em;
  margin:0 0 12px; color:var(--ink);
}
.cx-body{font-family:Fraunces,Georgia,serif; font-weight:300;
  font-size:13.5px; line-height:1.62; color:var(--ink);
  text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  flex:1; overflow:hidden}
.cx-body p{margin:0}
.cx-body p + p{margin-top:0; text-indent:1.35em}
.cx-body em{font-style:italic}
/* pilcrows in the margin, as a rubricator would */
.cx-body p.pil::before{
  content:"\00B6"; color:var(--minium); font-weight:600;
  margin-right:.4em; margin-left:-.05em;
}
.cx-pq{           /* a sentence lifted and rubricated */
  color:var(--minium); font-style:italic; text-align:left;
  margin:9px 0 9px; padding-left:10px;
  box-shadow:inset 2px 0 0 var(--gold);
}
.cx-gloss{        /* a marginal gloss, inset as a scribe's aside */
  font-size:12.5px; font-style:italic; color:var(--ink-soft);
  text-align:left; text-indent:0 !important; margin:8px 0 8px 18px !important;
  padding-left:12px; box-shadow:inset 2px 0 0 var(--verdigris);
}
.cx-stand{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;
  font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 14px}
.cx-sub{font-family:Fraunces,Georgia,serif;font-weight:500;font-style:italic;
  font-size:clamp(19px,2.6vw,24px);line-height:1.2;color:var(--minium);
  margin:34px 0 14px}

/* the versal: gold letter on a lapis field, with a white filigree hair */
.cx-versal{
  float:left; width:82px; height:82px; margin:2px 12px 4px 0;
  display:grid; place-items:center;
  font-family:Fraunces,Georgia,serif; font-weight:700; font-size:56px; line-height:1;
  color:transparent;
  background:
    linear-gradient(var(--lapis-l),var(--lapis) 45%,var(--lapis-d));
  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 0 0 3px rgba(30,53,110,.9),
    inset 0 0 0 5px rgba(201,162,51,.55),
    0 1px 0 rgba(255,255,255,.15);
}
.cx-versal > span{
  background:linear-gradient(160deg,var(--gold-d) 0%,var(--gold-l) 38%,var(--gold) 55%,var(--gold-d) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
/* the vine that grows out of the versal down the inner margin */
.cx-vine{position:absolute;left:14px;top:44px;bottom:56px;width:20px;pointer-events:none;opacity:.95}
.cx-pg.r .cx-vine{left:auto;right:14px;transform:scaleX(-1)}

/* ---- folio number, foot of the page -------------------------------- */
.cx-folio{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-family:Fraunces,Georgia,serif; font-size:11px; letter-spacing:.24em;
  color:var(--ink-soft); opacity:.75;
}

/* ---- an essay's title card ------------------------------------------
   Only the title, the plate, and the "read the essay" line (.cx-open)
   open the essay — book.js delegates clicks on [data-slug] within the
   RESTING spread only, never on the turning leaf. Everywhere else on
   the card (rubric, meta, margins) is left free to start a page-turn
   drag instead of being swallowed by the essay link. */
.cx-card{
  display:flex; flex-direction:column; height:100%;
}
.cx-open{cursor:pointer}
.cx-open:focus-visible{outline:2px solid var(--minium); outline-offset:4px}
.cx-plate{
  position:relative; margin-top:12px; cursor:pointer;
}
/* the rounded, clipped photo frame — kept separate from .cx-plate so the
   cursor-follow pill (sibling, not a child of this) is never cropped when
   it nears the bottom edge */
.cx-plate-clip{
  border-radius:14px; overflow:hidden; aspect-ratio:3/2; position:relative;
  box-shadow:0 1px 2px rgba(20,12,4,.2), 0 10px 26px rgba(20,12,4,.28);
  transition:transform .35s cubic-bezier(.22,.9,.24,1), box-shadow .35s;
}
.cx-plate-clip img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.04) contrast(1.02);
  transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.cx-plate-clip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(43,74,153,.10),transparent 55%),
             linear-gradient(0deg,rgba(30,20,8,.22),transparent 40%)}
@media (hover:hover){
  .cx-plate:hover .cx-plate-clip{transform:translateY(-6px); box-shadow:0 2px 4px rgba(20,12,4,.22), 0 22px 42px rgba(20,12,4,.36)}
  .cx-plate:hover .cx-plate-clip img{transform:scale(1.08)}
}
.cx-view-pill{
  position:absolute; left:0; top:0; z-index:2;
  transform:translate(-50%,-50%) scale(.8);
  font-family:'Inter',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase;
  background:#F6EFDE; color:#1A1512; padding:10px 22px; border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.32);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.cx-view-pill.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
.cx-go{
  margin-top:auto; align-self:flex-start;
  font-family:Fraunces,Georgia,serif; font-style:italic; font-size:12.5px;
  color:var(--minium); display:inline-flex; align-items:center; gap:6px;
}
.cx-go svg{width:13px;height:13px}

/* ---- reading pane -----------------------------------------------------
   Opened by a card; a single unrolled leaf rather than a turning one —
   the physical book is for browsing, not for scrolling an essay. */
.cx-read{
  position:absolute; inset:0; z-index:30;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(70% 55% at 96% 4%, rgba(150,105,45,.20), transparent 60%),
    radial-gradient(60% 50% at 4% 97%, rgba(150,105,45,.16), transparent 60%),
    radial-gradient(120% 100% at 50% 40%, var(--v1) 30%, var(--v2) 70%, var(--v3) 100%);
  opacity:0; visibility:hidden; transition:opacity .32s ease;
}
.cx-read.shown{opacity:1; visibility:visible}
.cx-read-wrap{max-width:640px;margin:0 auto;padding:clamp(28px,7vw,64px) clamp(20px,6vw,10px) 90px}
/* the open essay reads in Inter, matching the source copy's own type —
   the book itself stays in Fraunces; only the unrolled page switches */
.cx-read .cx-rub{font-family:'Inter',sans-serif; font-weight:600}
.cx-read .cx-h{
  font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(28px,4vw,40px); line-height:1.12;
}
.cx-read .cx-stand{font-family:'Inter',sans-serif; font-style:normal; font-weight:400; font-size:16px; line-height:1.55}
.cx-read .cx-sub{font-family:'Inter',sans-serif; font-style:normal; font-weight:600; color:var(--minium)}
.cx-read .cx-body{
  font-family:'Inter',sans-serif; font-weight:400;
  overflow:visible; font-size:17px; line-height:1.75;
  text-align:left; hyphens:none; -webkit-hyphens:none;
}
.cx-read .cx-body p + p{text-indent:0; margin-top:1.1em}
.cx-read .cx-body p.pil::before{content:none; margin:0}
.cx-read .cx-versal{
  float:none; width:auto; height:auto; margin:0; display:inline;
  font-family:inherit; font-weight:700; font-size:inherit; line-height:inherit;
  color:inherit; background:none; box-shadow:none;
}
.cx-read .cx-versal > span{
  background:none; -webkit-text-fill-color:currentColor; filter:none;
}
.cx-read .cx-pq{font-family:'Inter',sans-serif; font-style:normal; font-weight:500; font-size:19px; margin:22px 0}
.cx-read .cx-gloss{font-family:'Inter',sans-serif; font-style:normal; font-size:14.5px; margin:16px 0 16px 22px !important}
.cx-end{text-align:center;color:var(--ink-soft);opacity:.7;letter-spacing:.3em;
  font-size:11px;margin-top:22px}

/* ---- inline figures within an essay's body -------------------------- */
.cx-fig{margin:26px 0; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,12,4,.18), 0 14px 30px rgba(20,12,4,.26); cursor:zoom-in}
.cx-fig img{
  width:100%; display:block; object-fit:cover;
  aspect-ratio:16/10;
  filter:saturate(1.04) contrast(1.02);
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
}
@media (hover:hover){.cx-fig:hover img{transform:scale(1.08)}}

/* ---- closing carousel: photos drift past on their own, no captions -- */
.cx-carousel{margin:26px 0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.cx-car-track{display:flex; width:max-content; animation:carDrift 26s linear infinite; will-change:transform}
.cx-car-set{display:flex; gap:10px; padding-right:10px}
.cx-car-cell{flex:0 0 auto; width:190px}
.cx-car-cell img{
  width:100%; height:240px; display:block; object-fit:cover; border-radius:14px;
  box-shadow:0 1px 2px rgba(20,12,4,.18), 0 12px 26px rgba(20,12,4,.26);
  filter:saturate(1.04) contrast(1.02);
}
@keyframes carDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.cx-car-track{animation:none}}
@media (max-width:560px){.cx-car-cell{width:150px}.cx-car-cell img{height:190px}}

/* ---- the frontispiece ---------------------------------------------- */
.cx-front{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;gap:14px}
.cx-front .big{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(34px,3.4vw,46px);line-height:.98;letter-spacing:.02em;margin:0;
  color:var(--minium)}
.cx-front .sub{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;
  font-size:14px;color:var(--ink-soft);margin:0;max-width:24ch}
.cx-front-body{font-family:'Inter',sans-serif;font-weight:400;font-style:normal;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0;max-width:32ch}
.cx-front .rule{width:64%;height:5px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-l) 50%,var(--gold) 80%,transparent)}

/* ---- the turning leaf ---------------------------------------------- */
.cx-leaf{
  position:absolute; left:50%; top:0;
  width:var(--page-w); height:var(--page-h);
  transform-style:preserve-3d; z-index:6; pointer-events:none;
}
.cx-leaf[hidden]{display:none}
.cx-strip{
  position:absolute; top:0; height:100%;
  transform-origin:0 50%; transform-style:preserve-3d;
  will-change:transform;
}
/* overflow:hidden forces flattening and would kill the backface, so the
   clip and the 3D rotation must live on separate elements. */
.cx-clip{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.cx-clip.b{transform:rotateY(180deg)}
.cx-clip .cx-pg{left:0;right:auto;box-shadow:none}
/* the shading that sells the bend: a sheet lifting catches light on the
   rising flank and throws its own shadow on the page beneath */
.cx-strip .sh{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0}

/* shadow the turning leaf casts down onto the open spread */
.cx-cast{position:absolute;top:0;height:100%;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(40,24,8,.34),rgba(40,24,8,0));
  opacity:0;will-change:opacity,transform}

/* ---- controls ------------------------------------------------------ */
.cx-nav{
  position:absolute; top:50%; z-index:20; transform:translateY(-50%);
  width:48px; height:66px; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; padding:0;
  transition:transform .15s, filter .15s;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.cx-nav img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-drag:none}
.cx-nav.p{left:max(4px,calc(50% - var(--page-w) - 76px))}
.cx-nav.n{right:max(4px,calc(50% - var(--page-w) - 76px))}
.cx-nav:disabled{opacity:.25;cursor:default}
@media (hover:hover){
  .cx-nav:not(:disabled):hover{transform:translateY(-50%) scale(1.08)}
}

/* while an essay is open, the page-turn arrows should neither show
   through nor steal the click — the exit/home chrome stays live so
   there's always a way back */
#v-blog.reading .cx-nav{visibility:hidden;pointer-events:none}

/* ---- mobile: one leaf at a time ------------------------------------ */
@media (max-width:820px){
  #v-blog{--seg:9}
  .cx-book{width:var(--page-w)}
  .cx-block.l,.cx-pg.l{display:none}
  .cx-pg.r{right:0;left:0}
  .cx-pg.r::after{display:none}          /* no gutter with no facing page */
  .cx-pg.r .cx-tb{left:38px;right:38px}
  .cx-leaf{left:0}
  .cx-nav{width:44px;height:56px}
  .cx-nav.p{left:2px} .cx-nav.n{right:2px}
  .cx-room{perspective:1500px}
  .cx-book{transform:rotateX(6deg)}
}
/* In single-leaf mode the book's own side margin is whatever's left of
   the viewport around --page-w (see fit() in book.js) — it can be a
   snug ~50px on a phone or ~200px once a tablet-width screen is still
   under the single-leaf breakpoint. Size the candle as a share of that
   actual margin instead of either the desktop clamp() floor (too big,
   sits on the book) or one flat mobile size (too small once the margin
   is roomier), so it always reads as an object on the table. The watch
   drops out entirely on mobile — there isn't room for two objects to
   read clearly, and the candle is the one doing the easter-egg work. */
@media (max-width:820px){
  /* Sizing the candle off the side margin capped it at whatever was left
     beside the book -- about 50px on a phone, which reads as a pin rather
     than an object on the table. The room above the book is where the space
     actually is: roughly 250px on a 390x844 screen against a 48px side
     margin.

     So the candle is bounded by HEIGHT instead. (100lvh - --page-h) / 2 is
     the gap above the book if it were centred in the whole room; the book is
     in fact centred inside padding whose top is larger than its bottom, so
     the real gap is always a little more than that and this bound is
     conservative by construction. Bottom stops above the book's top edge, so
     the candle can be as wide as it likes and still never touch it -- and
     --page-h is published by fit() in book.js, so this tracks the book at
     every size rather than guessing. */
  .cx-glow.candle{
    width:auto; object-fit:contain;
    height:min(calc((100lvh - var(--page-h, 396px)) / 2 - 18px), 240px);
    top:4px; right:clamp(2px, 1.5vw, 12px);
  }
  .cx-glow.watch{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cx-glow{display:none}
}