/* ═══════════════════════════════════════════════════════════════════
   THE CHICKEN AND ONE GRAIN OF WHEAT
   A StoryStyle Canvas Book · № 001 · Teka Studio
   Materials: walnut desk, cloth cover, laid parchment, iron-gall ink
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #43331f;
  --ink-soft:   #6b5940;
  --ink-faded:  #8a7a5f;
  --paper:      #efe4c9;
  --paper-deep: #e6d7b2;
  --paper-edge: #d9c69c;
  --rust:       #b3492a;
  --rust-deep:  #7d3320;
  --gold:       #c9a54a;
  --gold-bright:#dcb75f;
  --wheat:      #d3a545;
  --sage:       #7c8a5a;

  --pw: 420px;            /* page width  — set by JS  */
  --ph: 560px;            /* page height — set by JS  */
  --u:  4.2px;            /* 1/100 page width — set by JS */

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.045'/></svg>");
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0.5 0'/></filter><rect width='560' height='560' filter='url(%23m)' opacity='0.10'/></svg>");
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; overscroll-behavior:none; }

body{
  font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
  color:var(--ink);
  background:
    radial-gradient(130% 110% at 50% -10%, #40372a 0%, #2c2519 48%, #1d1811 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

.defs{ position:absolute; width:0; height:0; overflow:hidden; }

#stage{
  position:relative; height:100dvh; width:100vw;
  display:flex; align-items:center; justify-content:center;
  touch-action:none;              /* the book owns the swipe */
}

/* ── the desk beneath: soft pooled light ─────────────────────────── */
#stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 62%, rgba(255,225,160,.07), transparent 70%);
}

/* ═══ THE BOOK — spread mode ══════════════════════════════════════ */
.book{
  position:relative;
  width:calc(var(--pw) * 2);
  height:var(--ph);
  transition:transform 1s cubic-bezier(.4,.08,.22,1);
  perspective:calc(var(--pw) * 4.5);
}
.book.closed{ transform:translateX(calc(var(--pw) * -.5)); }

/* stacked page-block edges under the book */
.book::before{
  content:''; position:absolute; left:1%; right:1%; top:.5%; bottom:-1.1%;
  transition:left 1s cubic-bezier(.4,.08,.22,1);
  background:linear-gradient(#cdb98e, #b6a071);
  border-radius:calc(var(--u)*1.5);
  box-shadow:
    0 calc(var(--u)*.6) 0 #a8925f,
    0 calc(var(--u)*1.3) 0 #978150,
    0 calc(var(--u)*2) 0 #857040,
    0 calc(var(--u)*7) calc(var(--u)*9) rgba(0,0,0,.55);
  z-index:0;
}
.book.closed::before{ left:50.5%; }
/* spine shadow seam */
.book::after{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-.5px);
  box-shadow:0 0 calc(var(--u)*4) calc(var(--u)*1.2) rgba(46,30,10,.38);
  z-index:200; pointer-events:none;
  opacity:.9;
}
.book.closed::after{ opacity:0; }

.leaf{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.36,.1,.22,1);
}
/* leaves far from the open spread are parked — no paint, no layers,
   no running animations. Keeps mobile GPUs alive. */
.leaf.parked, .vleaf.parked{ display:none !important; }
.leaf.flipped{ transform:rotateY(-180deg); }

.face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:
    var(--grain),
    var(--mottle),
    radial-gradient(120% 90% at 30% 20%, #f2e8d0 0%, var(--paper) 55%, var(--paper-deep) 100%);
  cursor:pointer;
  user-select:none; -webkit-user-select:none;
}
.face.back{ transform:rotateY(180deg); }

/* page-side shading toward the spine + outer-edge wear */
.face.recto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(66,44,14,.20), rgba(66,44,14,.05) 9%, transparent 20%),
    linear-gradient(to left,  rgba(120,95,50,.10), transparent 5%);
  border-radius:inherit;
}
.face.verso::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to left, rgba(66,44,14,.20), rgba(66,44,14,.05) 9%, transparent 20%),
    linear-gradient(to right, rgba(120,95,50,.10), transparent 5%);
  border-radius:inherit;
}
.face.recto{ border-radius:0 calc(var(--u)*1.6) calc(var(--u)*1.6) 0; }
.face.verso{ border-radius:calc(var(--u)*1.6) 0 0 calc(var(--u)*1.6); }

/* ═══ PAGE INTERIORS ══════════════════════════════════════════════ */
.page-inner{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  padding:calc(var(--u)*7) calc(var(--u)*8) calc(var(--u)*9);
  font-size:calc(var(--u)*4.1);
  line-height:1.52;
}
.verso .page-inner{ padding-right:calc(var(--u)*9.5); }
.recto .page-inner{ padding-left:calc(var(--u)*9.5); }

.folio{
  position:absolute; bottom:calc(var(--u)*3.6);
  font-size:calc(var(--u)*3); letter-spacing:.18em;
  color:var(--ink-faded);
  font-variant-numeric:oldstyle-nums;
}
.verso .folio{ left:calc(var(--u)*8); }
.recto .folio{ right:calc(var(--u)*8); }

/* ── scene plates ────────────────────────────────────────────────── */
.plate{
  flex:0 0 auto; width:100%;
  aspect-ratio:8/5;
  margin-top:auto;
  border:1px solid rgba(67,51,31,.34);
  outline:1px solid rgba(67,51,31,.14);
  outline-offset:calc(var(--u)*.9);
  padding:calc(var(--u)*1.4);
  display:flex;
}
.plate svg{ width:100%; height:100%; display:block; }
.plate-caption{
  margin-top:calc(var(--u)*3.6);
  margin-bottom:auto;
  text-align:center; font-style:italic;
  font-size:calc(var(--u)*3.4); color:var(--ink-soft);
}

/* ── text pages ──────────────────────────────────────────────────── */
.spot{ display:flex; justify-content:center; margin:auto 0 calc(var(--u)*5); }
.spot svg{ height:calc(var(--u)*14); width:auto; overflow:visible; }
.prose{ flex:0 0 auto; margin-bottom:auto; display:flex; flex-direction:column; gap:calc(var(--u)*3.2); }
.prose p{ text-indent:0; }
.prose p + p{ text-indent:1.4em; }

.dropcap::first-letter{
  font-family:'IM Fell English SC', 'Cormorant Garamond', serif;
  font-size:3.1em; line-height:.8;
  float:left; padding:calc(var(--u)*1) calc(var(--u)*1.6) 0 0;
  color:var(--rust);
}

.say{
  display:flex; align-items:center; gap:calc(var(--u)*2.6);
  margin-left:calc(var(--u)*2);
}
.say .mini{ flex:0 0 auto; height:calc(var(--u)*7.5); width:calc(var(--u)*8.5); overflow:visible; }
.say .mini svg{ height:100%; width:100%; }
.say em{ font-style:normal; }
.say .who{ font-style:italic; color:var(--ink-soft); }
.refrain{ margin-top:calc(var(--u)*1.5); }

.ornament{
  display:flex; justify-content:center; align-items:center;
  gap:calc(var(--u)*2); color:var(--ink-faded);
  margin:calc(var(--u)*2) 0;
  width:74%;
}
.ornament svg{ height:calc(var(--u)*5); width:auto; overflow:visible; }
.ornament .rule{ flex:1; height:1px; background:linear-gradient(to right, transparent, rgba(67,51,31,.35), transparent); }

/* ═══ COVER ═══════════════════════════════════════════════════════ */
.face.cover-face{
  background:
    var(--grain),
    var(--mottle),
    radial-gradient(115% 95% at 32% 22%, #8a3d22 0%, #6f2f1a 55%, #58230f 100%);
}
.face.cover-face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(30,12,4,.35), transparent 12%),
             linear-gradient(125deg, rgba(255,230,170,.05) 0%, transparent 40%);
}
.cover{
  position:relative; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--gold-bright);
  padding:calc(var(--u)*13) calc(var(--u)*10);
}
.cover .frame{
  position:absolute; inset:calc(var(--u)*5);
  border:calc(var(--u)*.38) solid rgba(220,183,95,.85);
  outline:1px solid rgba(220,183,95,.5);
  outline-offset:calc(var(--u)*1.1);
  pointer-events:none;
  box-shadow:inset 0 0 calc(var(--u)*8) rgba(0,0,0,.25);
}
.cover .series{
  font-family:'Cormorant Garamond', serif;
  font-size:calc(var(--u)*2.9); letter-spacing:.34em; text-transform:uppercase;
  color:#d8b45c; opacity:.85; white-space:nowrap;
}
.cover h1{
  font-family:'IM Fell English SC', 'Cormorant Garamond', serif;
  font-weight:500;
  font-size:calc(var(--u)*8.6); line-height:1.18;
  margin:calc(var(--u)*4) 0 calc(var(--u)*1.5);
  text-shadow:0 1px 0 rgba(40,10,0,.6), 0 0 calc(var(--u)*6) rgba(220,180,90,.18);
}
.cover .and{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:calc(var(--u)*4.4); color:#d8b45c;
  display:block; margin:calc(var(--u)*.8) 0;
}
.cover .medallion{
  margin:calc(var(--u)*5) 0;
  width:calc(var(--u)*30); height:calc(var(--u)*30);
  border-radius:50%;
  background:
    var(--grain),
    radial-gradient(100% 100% at 35% 25%, #f2e8d0, var(--paper-deep));
  border:calc(var(--u)*.45) solid rgba(220,183,95,.9);
  box-shadow:inset 0 0 calc(var(--u)*4) rgba(80,50,10,.35), 0 calc(var(--u)*.7) calc(var(--u)*2) rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.cover .medallion svg{ width:68%; height:68%; overflow:visible; }
.cover .tagline{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:calc(var(--u)*3.6); color:#e5cf96; opacity:.9;
}
.cover .press{
  position:absolute; bottom:calc(var(--u)*9);
  font-family:'Cormorant Garamond', serif;
  font-size:calc(var(--u)*2.7); letter-spacing:.42em; text-transform:uppercase;
  color:#d8b45c; opacity:.75;
}

/* ═══ ENDPAPERS ═══════════════════════════════════════════════════ */
.endpaper{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--u)*10);
}
.endpaper .field{ position:absolute; inset:0; opacity:.16; }
.endpaper .field svg{ width:100%; height:100%; }
.dedication{
  position:relative;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:calc(var(--u)*4.6); color:var(--ink-soft);
  line-height:1.7;
}

/* ═══ TITLE PAGE ══════════════════════════════════════════════════ */
.titlepage{
  height:100%; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding-top:calc(var(--u)*3);
}
.titlepage .series{
  font-size:calc(var(--u)*2.7); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faded);
}
.titlepage h2{
  font-family:'IM Fell English SC', serif; font-weight:500;
  font-size:calc(var(--u)*5.9); line-height:1.2; color:var(--rust-deep);
  margin:calc(var(--u)*3) 0 calc(var(--u)*1.4);
}
.titlepage .being{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:calc(var(--u)*3.4); color:var(--ink-soft);
  max-width:82%;
}
.cast{
  margin-top:calc(var(--u)*3.4);
  display:flex; flex-direction:column; gap:calc(var(--u)*2);
  width:86%;
}
.cast h3{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  font-size:calc(var(--u)*3); color:var(--ink-soft);
  margin-bottom:calc(var(--u)*.6);
}
.cast .member{
  display:flex; align-items:center; gap:calc(var(--u)*3);
  text-align:left; font-size:calc(var(--u)*3.4);
}
.cast .member svg{ flex:0 0 auto; height:calc(var(--u)*7); width:calc(var(--u)*8); overflow:visible; }
.cast .member .nm{ font-weight:500; }
.cast .member .ds{ font-style:italic; color:var(--ink-soft); }
.titlepage .press{
  margin-top:auto; padding-bottom:calc(var(--u)*1);
  font-size:calc(var(--u)*2.7); letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faded);
}

/* ═══ MORAL & COLOPHON ════════════════════════════════════════════ */
.moral{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:calc(var(--u)*5); padding:calc(var(--u)*6);
}
.moral .sheaf svg{ height:calc(var(--u)*20); width:auto; overflow:visible; }
.moral blockquote{
  font-family:'IM Fell English SC', serif;
  font-size:calc(var(--u)*6.2); line-height:1.45; color:var(--rust-deep);
}
.moral cite{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:calc(var(--u)*3.6);
  color:var(--ink-soft);
}
.colophon{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:calc(var(--u)*3.2); padding:calc(var(--u)*8);
  font-size:calc(var(--u)*3.3); color:var(--ink-soft); line-height:1.8;
}
.colophon .mark{ letter-spacing:.34em; text-transform:uppercase; font-size:calc(var(--u)*2.9); color:var(--ink-faded); }
.colophon .no{ font-family:'IM Fell English SC', serif; font-size:calc(var(--u)*4.6); color:var(--rust-deep); }
.colophon .sep{ width:calc(var(--u)*14); height:1px; background:rgba(67,51,31,.3); }

/* ═══ SCENE LIFE — the animations ═════════════════════════════════ */
svg .anim{ transform-box:fill-box; }

.sway{    animation:sway var(--dur,3.6s) ease-in-out var(--del,0s) infinite alternate; transform-origin:50% 100%; transform-box:fill-box; }
@keyframes sway{ from{ transform:rotate(-2.4deg);} to{ transform:rotate(2.6deg);} }

.sway-soft{ animation:swaysoft var(--dur,5.5s) ease-in-out var(--del,0s) infinite alternate; transform-origin:50% 100%; transform-box:fill-box; }
@keyframes swaysoft{ from{ transform:rotate(-1.1deg);} to{ transform:rotate(1.2deg);} }

.peck{ animation:peck 3.4s ease-in-out var(--del,0s) infinite; transform-origin:46% 88%; transform-box:fill-box; }
@keyframes peck{
  0%,52%,100%{ transform:rotate(0); }
  60%,72%{ transform:rotate(15deg); }
  66%{ transform:rotate(11deg); }
  80%{ transform:rotate(0); }
}

.bob{ animation:bob var(--dur,2.6s) ease-in-out var(--del,0s) infinite alternate; transform-box:fill-box; }
@keyframes bob{ from{ transform:translateY(0);} to{ transform:translateY(calc(var(--amt,1) * 1.6px));} }

.hop{ animation:hop 3s ease-in-out var(--del,0s) infinite; transform-box:fill-box; }
@keyframes hop{
  0%,58%,100%{ transform:translateY(0); }
  66%{ transform:translateY(-7px); }
  74%{ transform:translateY(0); }
  79%{ transform:translateY(-3px); }
  84%{ transform:translateY(0); }
}

.drift{ animation:drift var(--dur,17s) ease-in-out var(--del,0s) infinite alternate; transform-box:fill-box; }
@keyframes drift{ from{ transform:translateX(0);} to{ transform:translateX(26px);} }

.flit{ animation:flit 11s ease-in-out var(--del,0s) infinite; transform-box:fill-box; }
@keyframes flit{
  0%{   transform:translate(0,0) rotate(0); }
  18%{  transform:translate(-26px,-14px) rotate(-9deg); }
  38%{  transform:translate(-44px,6px) rotate(5deg); }
  58%{  transform:translate(-18px,-22px) rotate(-6deg); }
  78%{  transform:translate(12px,-8px) rotate(7deg); }
  100%{ transform:translate(0,0) rotate(0); }
}

.twinkle{ animation:twinkle 2.6s ease-in-out var(--del,0s) infinite; transform-origin:50% 50%; transform-box:fill-box; }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.7);} 50%{ opacity:.95; transform:scale(1.15);} }

.rain-line{ animation:rainfall 1.1s linear var(--del,0s) infinite; transform-box:fill-box; opacity:0; }
@keyframes rainfall{
  0%{ transform:translateY(-6px); opacity:0; }
  25%{ opacity:.65; }
  85%{ opacity:.25; }
  100%{ transform:translateY(20px); opacity:0; }
}

.scent-curl{ animation:scent 5.2s ease-in-out var(--del,0s) infinite; transform-box:fill-box; opacity:0; }
@keyframes scent{
  0%{ transform:translate(0,6px); opacity:0; }
  35%{ opacity:.5; }
  70%{ opacity:.25; }
  100%{ transform:translate(10px,-16px); opacity:0; }
}

.flicker{ animation:flicker 1s ease-in-out infinite alternate; transform-origin:50% 100%; transform-box:fill-box; }
@keyframes flicker{
  from{ transform:scaleY(1) scaleX(1); opacity:.85; }
  to{   transform:scaleY(1.12) scaleX(.95); opacity:1; }
}
.glow{ animation:glowpulse 2.2s ease-in-out infinite alternate; transform-box:fill-box; }
@keyframes glowpulse{ from{ opacity:.07;} to{ opacity:.16;} }

.rise{ animation:risefade 4s ease-in-out var(--del,0s) infinite; transform-box:fill-box; opacity:0; }
@keyframes risefade{
  0%{ transform:translateY(3px); opacity:0; }
  40%{ opacity:.6; }
  100%{ transform:translateY(-9px); opacity:0; }
}

.mote{ animation:mote var(--dur,9s) ease-in-out var(--del,0s) infinite alternate; transform-box:fill-box; }
@keyframes mote{
  from{ transform:translate(0,0); opacity:.25; }
  to{   transform:translate(8px,-12px); opacity:.6; }
}

/* creatures that walk along the page itself */
.walker{
  position:absolute; bottom:calc(var(--u)*2.2); left:calc(var(--u)*10);
  width:calc(var(--u)*7); pointer-events:none; z-index:5;
  animation:patrol 34s linear infinite;
}
.walker svg{ width:100%; height:auto; overflow:visible; animation:walkbob .5s ease-in-out infinite alternate; }
@keyframes patrol{
  0%{ transform:translateX(0) scaleX(1); }
  48%{ transform:translateX(calc(var(--pw)*.55)) scaleX(1); }
  50%{ transform:translateX(calc(var(--pw)*.55)) scaleX(-1); }
  98%{ transform:translateX(0) scaleX(-1); }
  100%{ transform:translateX(0) scaleX(1); }
}
@keyframes walkbob{ from{ transform:translateY(0);} to{ transform:translateY(-1.6px);} }

.crawler{
  position:absolute; top:calc(var(--u)*5); right:calc(var(--u)*12);
  width:calc(var(--u)*3.4); pointer-events:none; z-index:5;
  animation:crawl 26s linear infinite;
}
.crawler svg{ width:100%; height:auto; }
@keyframes crawl{
  0%{ transform:translateX(0) rotate(90deg); }
  22%{ transform:translateX(calc(var(--pw)*-.3)) rotate(90deg); }
  30%{ transform:translateX(calc(var(--pw)*-.3)) rotate(90deg); }
  55%{ transform:translateX(calc(var(--pw)*-.62)) rotate(90deg); }
  62%{ transform:translateX(calc(var(--pw)*-.62)) rotate(270deg); }
  95%{ transform:translateX(0) rotate(270deg); }
  100%{ transform:translateX(0) rotate(90deg); }
}

/* ═══ SINGLE-PAGE MODE (small screens) ════════════════════════════ */
/* Hold the phone upright and the book becomes a pad: pages fold up
   and over the cloth binding at the top, steno-style. */
.single{
  position:relative;
  width:var(--pw); height:var(--ph);
  border-radius:calc(var(--u)*1.6);
  perspective:calc(var(--ph) * 2.6);
  box-shadow:0 calc(var(--u)*4) calc(var(--u)*10) rgba(0,0,0,.55),
             0 calc(var(--u)*.8) 0 #a8925f, 0 calc(var(--u)*1.6) 0 #8f7a4a;
}
/* the cloth binding tape the pages flip over */
.single::after{
  content:''; position:absolute; z-index:800; pointer-events:none;
  left:4%; right:4%; top:calc(var(--u)*-1.2); height:calc(var(--u)*4.6);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--u)*5), rgba(220,183,95,.4) calc(var(--u)*5) calc(var(--u)*6.2)),
    linear-gradient(#8a3d22, #6f2f1a);
  border-radius:calc(var(--u)*1.1);
  box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1) rgba(0,0,0,.4),
             inset 0 calc(var(--u)*-.6) calc(var(--u)*.8) rgba(0,0,0,.3);
}
.single .vleaf{
  position:absolute; inset:0;
  transform-origin:50% -0.5%;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.38,.1,.24,1);
  border-radius:inherit;
}
.single .vleaf.flipped{ transform:rotateX(180deg); }
.single .vface{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:inherit;
  background:
    var(--grain),
    var(--mottle),
    radial-gradient(120% 90% at 30% 20%, #f2e8d0 0%, var(--paper) 55%, var(--paper-deep) 100%);
}
.single .vface.cover-face{
  background:
    var(--grain),
    var(--mottle),
    radial-gradient(115% 95% at 32% 22%, #8a3d22 0%, #6f2f1a 55%, #58230f 100%);
}
/* the back of a sheet — what you glimpse as it folds over */
.single .vback{
  transform:rotateX(180deg);
  background:
    var(--grain),
    linear-gradient(rgba(90,70,40,.06), rgba(90,70,40,.12)),
    radial-gradient(120% 90% at 30% 20%, #ece0c4 0%, var(--paper-deep) 100%);
}
.single .vback .watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:.1;
}
.single .vback .watermark svg{ width:34%; height:auto; }
.single .folio{ left:auto; right:calc(var(--u)*6); }

/* ═══ CHROME ══════════════════════════════════════════════════════ */
.navbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:64px;
  background:none; border:none; cursor:pointer;
  color:rgba(235,215,170,.42); font-size:30px;
  font-family:'Cormorant Garamond', serif;
  transition:color .25s, opacity .25s;
  z-index:300;
}
.navbtn:hover{ color:rgba(240,222,180,.85); }
.navbtn[disabled]{ opacity:0; pointer-events:none; }
#prev{ left:max(8px, 2.5vw); }
#next{ right:max(8px, 2.5vw); }

#hint{
  position:absolute; bottom:max(14px, 3.2dvh); left:50%; transform:translateX(-50%);
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15px; letter-spacing:.08em;
  color:rgba(235,215,170,.5);
  transition:opacity 1.2s; pointer-events:none;
}
#hint.gone{ opacity:0; }

/* touch devices: the page is the control — no floating chrome */
@media (pointer:coarse){
  .navbtn{ display:none; }
  #hint{ bottom:max(10px, 1.6dvh); font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}