@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════
   KITAB PERJALANAN AKADEMIK — Dr. Abdul Muiz Amir
   Sistem visual: jilid kulit malachite, pelat bergambar, kertas laid,
   dan lapis instrumen modern (apparatus) di sekelilingnya.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKEN ─────────────────────────────────────────────────────── */
:root{
  /* ruang & jilid */
  --abyss:#04100C;
  --room:#082019;
  --room-2:#0A2A20;
  --leather:#0B3A2C;
  --leather-lit:#155140;
  --leather-deep:#051A14;

  /* logam */
  --gilt:#C8A24A;
  --gilt-hi:#F3DFA8;
  --gilt-lo:#856427;
  --gilt-glow:rgba(200,162,74,.42);

  /* kertas */
  --vellum:#F4EAD5;
  --vellum-2:#ECDDC1;
  --vellum-edge:#D6C3A0;
  --sepia:#2B2216;
  --sepia-2:#5E5039;
  --sepia-3:#8B7A5E;
  --rubric:#9E2B25;
  --verdigris:#2E9A72;

  /* huruf */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
  --chrome:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* geometri kitab — dihitung ulang oleh app.js */
  --page-w:420px;
  --page-h:572px;
  --spine-w:20px;

  /* gerak */
  --turn-ms:900ms;
  --ease-paper:cubic-bezier(.42,.02,.22,1);
  --ease-out:cubic-bezier(.22,.85,.28,1);
  --grain:.55;

  /* lapis */
  --z-board:40;
  --z-turn:60;
  --z-apparatus:200;
  --z-overlay:900;
}

/* ─── 2. DASAR ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--text);
  color:var(--vellum);
  background:var(--abyss);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body[data-view="admin"]{overflow:auto;background:#0E1512}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:3px}

::selection{background:rgba(200,162,74,.32);color:#fff}

/* ─── 3. RUANG BACA ────────────────────────────────────────────────── */
.room{
  position:fixed;inset:0;
  display:grid;
  grid-template-rows:auto 1fr;
  background:
    radial-gradient(90% 70% at 50% -10%,rgba(200,162,74,.16),transparent 62%),
    radial-gradient(70% 60% at 18% 108%,rgba(46,154,114,.10),transparent 60%),
    linear-gradient(178deg,var(--room) 0%,var(--abyss) 78%);
}
.room__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 24%,rgba(255,236,196,.13),transparent 70%);
  mix-blend-mode:screen;
  animation:lantern 14s var(--ease-out) infinite alternate;
}
@keyframes lantern{
  from{opacity:.72;transform:translate3d(-1.2%,0,0) scale(1)}
  to{opacity:1;transform:translate3d(1.2%,-1%,0) scale(1.04)}
}
.room__vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(2,10,7,.86);
}
.room__dust{position:absolute;inset:0;pointer-events:none;opacity:.55}

/* ─── 4. APPARATUS (lapis instrumen) ───────────────────────────────── */
.apparatus{
  position:relative;z-index:var(--z-apparatus);
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  align-items:center;
  gap:clamp(12px,2vw,30px);
  padding:11px clamp(12px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(6,22,17,.90),rgba(6,22,17,.46) 70%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.apparatus::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gilt-lo) 12%,var(--gilt) 50%,var(--gilt-lo) 88%,transparent);
  opacity:.5;
}

.apparatus__mark{
  display:flex;align-items:center;gap:11px;
  padding:5px 12px 5px 5px;border-radius:100px;
  border:1px solid rgba(200,162,74,.20);
  background:rgba(255,255,255,.03);
  transition:border-color .3s,background .3s,transform .3s var(--ease-out);
}
.apparatus__mark:hover{border-color:rgba(200,162,74,.5);background:rgba(200,162,74,.09);transform:translateY(-1px)}
.apparatus__mark img{width:34px;height:34px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.apparatus__marktext{display:grid;text-align:left;line-height:1.15;min-width:0}
.apparatus__marktext b{
  font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.005em;
  color:var(--vellum);white-space:nowrap;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}
.apparatus__marktext i{
  font-family:var(--chrome);font-style:normal;font-size:.63rem;font-weight:500;
  color:rgba(200,162,74,.82);letter-spacing:.02em;white-space:nowrap;
}

/* ── meridian : jalur perjalanan sebagai navigasi ── */
.meridian{position:relative;min-width:0;padding:14px 0 6px}
.meridian__rule,.meridian__travelled{
  position:absolute;left:10px;right:10px;top:22px;height:1px;
}
.meridian__rule{
  background:repeating-linear-gradient(90deg,rgba(233,220,192,.42) 0 4px,transparent 4px 9px);
}
.meridian__travelled{
  right:auto;width:0;
  background:linear-gradient(90deg,var(--gilt-lo),var(--gilt));
  box-shadow:0 0 9px var(--gilt-glow);
  transition:width .62s var(--ease-out);
}
.meridian__stops{
  position:relative;display:flex;align-items:flex-start;gap:2px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:0 4px 2px;scroll-behavior:smooth;
}
.meridian__stops::-webkit-scrollbar{display:none}

.stop{
  position:relative;flex:1 1 0;min-width:76px;
  display:grid;justify-items:center;gap:7px;
  padding:2px 6px 4px;
  font-family:var(--chrome);
  transition:transform .3s var(--ease-out);
}
.stop__pin{
  width:9px;height:9px;border-radius:50%;
  background:var(--room-2);
  border:1.5px solid rgba(233,220,192,.5);
  transition:all .35s var(--ease-out);
}
.stop__label{
  font-size:.635rem;font-weight:500;letter-spacing:.012em;
  color:rgba(226,216,196,.56);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  transition:color .3s;
}
.stop:hover{transform:translateY(-2px)}
.stop:hover .stop__pin{border-color:var(--gilt);box-shadow:0 0 0 4px rgba(200,162,74,.13)}
.stop:hover .stop__label{color:var(--vellum)}
.stop[data-done="1"] .stop__pin{background:var(--gilt-lo);border-color:var(--gilt)}
.stop[aria-selected="true"] .stop__pin{
  background:var(--gilt);border-color:var(--gilt-hi);
  box-shadow:0 0 0 4px rgba(200,162,74,.18),0 0 14px var(--gilt-glow);
  transform:scale(1.28);
}
.stop[aria-selected="true"] .stop__label{color:var(--gilt-hi);font-weight:600}

/* ── perkakas ── */
.apparatus__tools{display:flex;align-items:center;gap:7px}
.tool{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 11px;border-radius:100px;
  border:1px solid rgba(200,162,74,.20);
  background:rgba(255,255,255,.03);
  font-family:var(--chrome);font-size:.7rem;font-weight:600;
  color:rgba(233,222,200,.9);text-decoration:none;
  transition:all .28s var(--ease-out);
}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{border-color:rgba(200,162,74,.55);background:rgba(200,162,74,.11);color:var(--gilt-hi);transform:translateY(-1px)}
.tool--text b{font-weight:600}
.tool[aria-pressed="false"] .wave1,
.tool[aria-pressed="false"] .wave2{opacity:.18}
.tool[aria-pressed="false"]{color:rgba(233,222,200,.45)}

/* ─── 5. MEJA & VOLUME ─────────────────────────────────────────────── */
.desk{
  position:relative;min-height:0;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  align-items:center;justify-items:center;
  padding:clamp(8px,1.6vh,20px) clamp(8px,2vw,26px) clamp(6px,1.4vh,14px);
}
.desk__stage{
  min-height:0;min-width:0;width:100%;height:100%;
  display:grid;place-items:center;
}

.volume{
  position:relative;
  width:calc(var(--page-w) * 2);
  height:var(--page-h);
  perspective:2900px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);
}
.volume__body{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .95s var(--ease-paper);
}
/* saat tertutup, geser agar papan sampul tepat di tengah meja */
.volume[data-state="closed"] .volume__body{transform:translateX(calc(var(--page-w) * -.5))}
.volume[data-state="shut"]   .volume__body{transform:translateX(calc(var(--page-w) *  .5))}

/* bayangan jatuh di meja */
.volume__cast{
  position:absolute;left:6%;right:6%;bottom:-26px;height:52px;
  background:radial-gradient(60% 100% at 50% 0,rgba(0,0,0,.62),transparent 72%);
  filter:blur(13px);pointer-events:none;
  transition:all .8s var(--ease-out);
}
.volume[data-state="closed"] .volume__cast{left:calc(25% + 12px);right:12%;}
.volume[data-state="shut"]   .volume__cast{left:12%;right:calc(25% + 12px);}

/* ── tumpukan tepi halaman ── */
.stack{position:absolute;top:8px;bottom:8px;width:16px;pointer-events:none;display:grid;align-content:stretch}
.stack i{
  display:block;height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,var(--vellum-edge),var(--vellum-2));
  box-shadow:inset 0 0 0 .5px rgba(120,98,64,.22);
  transform-origin:center;
}
.stack--verso{left:-13px;transform:perspective(600px) rotateY(16deg);border-radius:3px 0 0 3px;overflow:hidden;
  box-shadow:-3px 3px 10px rgba(0,0,0,.4)}
.stack--recto{right:-13px;transform:perspective(600px) rotateY(-16deg);border-radius:0 3px 3px 0;overflow:hidden;
  box-shadow:3px 3px 10px rgba(0,0,0,.4)}
.stack--verso i{background:linear-gradient(270deg,var(--vellum-edge),var(--vellum-2))}
.stack{transition:opacity .5s}
.volume[data-state="closed"] .stack--verso,
.volume[data-state="shut"] .stack--recto{opacity:0}

/* ─── 6. HALAMAN ───────────────────────────────────────────────────── */
.leaf{
  position:absolute;top:0;height:100%;width:var(--page-w);
  overflow:hidden;
  background-color:var(--vellum);
}
.leaf--verso{left:0;border-radius:5px 2px 2px 5px}
.leaf--recto{left:var(--page-w);border-radius:2px 5px 5px 2px}

/* tekstur kertas laid + penuaan */
.leaf__paper{
  position:relative;height:100%;width:100%;
  padding:clamp(20px,3.4vh,38px) clamp(20px,3vw,40px) clamp(34px,4vh,46px);
  overflow-y:auto;overflow-x:hidden;
  color:var(--sepia);
  overflow-wrap:anywhere;word-break:break-word;
  background:
    radial-gradient(38% 26% at 84% 12%,rgba(168,132,72,.055),transparent 70%),
    radial-gradient(30% 22% at 12% 82%,rgba(150,116,60,.05),transparent 70%),
    repeating-linear-gradient(90deg,rgba(90,70,40,.030) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(90,70,40,.016) 0 1px,transparent 1px 26px),
    linear-gradient(160deg,#F7EFDD 0%,var(--vellum) 44%,var(--vellum-2) 100%);
  scrollbar-width:thin;scrollbar-color:rgba(140,112,66,.4) transparent;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.leaf__paper::-webkit-scrollbar{width:7px}
.leaf__paper::-webkit-scrollbar-thumb{background:rgba(140,112,66,.34);border-radius:99px}
.leaf__paper::-webkit-scrollbar-track{background:transparent}
.leaf__paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:calc(var(--grain) * .11);mix-blend-mode:multiply;
}
/* bayangan lipatan punggung */
.leaf--verso .leaf__paper::after,
.leaf--recto .leaf__paper::after{
  content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:2;
}
.leaf--verso .leaf__paper::after{right:0;background:linear-gradient(270deg,rgba(70,50,22,.20),transparent)}
.leaf--recto .leaf__paper::after{left:0;background:linear-gradient(90deg,rgba(70,50,22,.20),transparent)}

.folio{
  position:absolute;bottom:14px;z-index:4;
  font-family:var(--chrome);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  color:rgba(120,98,60,.72);pointer-events:none;
}
.folio--verso{left:clamp(20px,3vw,40px)}
.folio--recto{right:clamp(20px,3vw,40px)}

/* punggung buku di tengah bukaan */
.gutter{
  position:absolute;top:0;bottom:0;left:calc(var(--page-w) - 26px);width:52px;
  pointer-events:none;z-index:12;
  background:linear-gradient(90deg,transparent,rgba(56,38,16,.13) 34%,rgba(40,26,10,.30) 50%,rgba(56,38,16,.13) 66%,transparent);
}
.gutter span{
  position:absolute;left:50%;top:2%;bottom:2%;width:1px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(52,34,14,.42) 12%,rgba(52,34,14,.42) 88%,transparent);
}
.volume[data-state="closed"] .gutter,.volume[data-state="shut"] .gutter{opacity:0;transition:opacity .3s}

/* ── daun yang berputar ── */
.leaf--turn{
  left:var(--page-w);
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0deg);
  z-index:var(--z-turn);
  background:none;overflow:visible;
  pointer-events:none;
  opacity:0;
  will-change:transform;
}
.leaf--turn.is-live{opacity:1}
.leaf--turn.is-animating{transition:transform var(--turn-ms) var(--ease-paper)}
.leaf__face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:var(--vellum);
  box-shadow:0 0 22px rgba(0,0,0,.32);
}
.leaf__face--fore{border-radius:2px 5px 5px 2px}
.leaf__face--aft{transform:rotateY(180deg);border-radius:5px 2px 2px 5px}
.leaf__face .leaf__paper::after{content:none}

/* kilau lengkungan kertas saat membalik */
.leaf__curl{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  opacity:0;transition:opacity .2s;
}
.leaf--turn.is-live .leaf__curl{opacity:1}
.leaf__face--fore .leaf__curl{
  background:linear-gradient(90deg,rgba(38,24,8,.34) 0%,rgba(38,24,8,.08) 14%,rgba(255,250,238,.16) 46%,rgba(255,252,242,.30) 62%,rgba(60,40,16,.10) 100%);
}
.leaf__face--aft .leaf__curl{
  background:linear-gradient(270deg,rgba(38,24,8,.30) 0%,rgba(38,24,8,.06) 16%,rgba(255,250,238,.14) 48%,rgba(255,252,242,.24) 66%,rgba(60,40,16,.12) 100%);
}
/* bayangan daun yang menyapu halaman di bawahnya */
.turn-cast{
  position:absolute;top:0;bottom:0;width:var(--page-w);
  pointer-events:none;z-index:50;opacity:0;
  background:linear-gradient(90deg,rgba(20,12,4,.36),rgba(20,12,4,.06) 55%,transparent);
}
.turn-cast.is-live{opacity:1}

/* sudut untuk diseret */
.corner{
  position:absolute;bottom:0;width:clamp(52px,7%,84px);height:clamp(52px,9%,90px);
  z-index:70;opacity:0;transition:opacity .3s;
  touch-action:none;
}
.corner span{
  position:absolute;inset:0;
  background:linear-gradient(45deg,rgba(214,195,160,.95) 0 50%,transparent 50%);
  box-shadow:-2px -2px 10px rgba(0,0,0,.28);
  transition:transform .32s var(--ease-out);
}
.corner--next{right:0;border-radius:0 0 5px 0}
.corner--next span{background:linear-gradient(315deg,rgba(222,205,172,.96) 0 50%,transparent 50%);transform-origin:100% 100%}
.corner--prev{left:0;border-radius:0 0 0 5px}
.corner--prev span{background:linear-gradient(225deg,rgba(222,205,172,.96) 0 50%,transparent 50%);transform-origin:0 100%}
.volume[data-state="open"] .corner{opacity:.0}
.volume[data-state="open"] .corner:hover{opacity:1}
.corner:hover span{transform:scale(1.25)}
.corner:disabled{pointer-events:none}
@media(hover:none){.volume[data-state="open"] .corner{opacity:.35}}

/* ─── 7. PAPAN SAMPUL ──────────────────────────────────────────────── */
.board{
  position:absolute;top:-6px;bottom:-6px;left:var(--page-w);
  width:var(--page-w);
  transform-style:preserve-3d;transform-origin:left center;
  z-index:var(--z-board);
  transition:transform 1.15s var(--ease-paper);
  will-change:transform;
}
.board--front{transform:rotateY(0deg)}
.board--back{
  left:0;transform-origin:right center;transform:rotateY(0deg);
  z-index:calc(var(--z-board) - 1);
}
.volume[data-state="open"] .board--front{transform:rotateY(-179.4deg)}
.volume[data-state="shut"] .board--back{transform:rotateY(0deg)}
.volume[data-state="open"] .board--back,
.volume[data-state="closed"] .board--back{transform:rotateY(179.4deg)}

.board__face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:4px 9px 9px 4px;
  background:
    radial-gradient(120% 90% at 24% 8%,var(--leather-lit),transparent 58%),
    linear-gradient(152deg,#0F4535 0%,var(--leather) 46%,var(--leather-deep) 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.62), inset 0 0 60px rgba(0,0,0,.30);
}
.board--back .board__face{border-radius:9px 4px 4px 9px}
.board__face--inner{transform:rotateY(180deg)}
.board--back .board__face--outer{transform:rotateY(180deg)}
.board--back .board__face--inner{transform:rotateY(0deg)}

/* butir kulit */
.board__face--outer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.15;mix-blend-mode:overlay;
}
/* garis emas cetak (tooling) */
.board__tooling{
  position:absolute;inset:clamp(11px,2.1%,20px);pointer-events:none;
  border:1px solid rgba(200,162,74,.50);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.30),
    inset 0 0 0 4px transparent,
    inset 0 0 0 5px rgba(200,162,74,.24),
    0 0 16px rgba(200,162,74,.09);
}
.board__tooling::before,.board__tooling::after{
  content:"";position:absolute;width:13px;height:13px;
  border:1px solid rgba(200,162,74,.44);
}
.board__tooling::before{top:9px;left:9px;border-right:0;border-bottom:0}
.board__tooling::after{bottom:9px;right:9px;border-left:0;border-top:0}
.board__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 34%,rgba(255,244,220,.09) 47%,transparent 58%);
  transition:transform .9s var(--ease-out);
}
.volume[data-state="closed"]:hover .board__sheen{transform:translateX(9%)}

/* ── sampul bergambar penuh ── */
.cover{
  position:absolute;inset:0;overflow:hidden;
  border-radius:inherit;
}
.cover__art{
  /* selebar papan, tinggi mengikuti rasio asli — tidak ada bagian karya
     yang terpotong ke samping. Sisa ruang di bawah menjadi kulit sampul. */
  position:absolute;top:0;left:0;
  width:100%;aspect-ratio:1536/1024;
  object-fit:cover;object-position:50% 50%;
}
.cover__scrim{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(150px,46%,330px);
  background:linear-gradient(180deg,
    rgba(5,22,17,0) 0%,
    rgba(5,22,17,.28) 22%,
    rgba(6,28,22,.80) 48%,
    rgba(7,32,25,.96) 72%,
    rgba(7,32,25,.99) 100%);
}

/* ── judul tercetak pada kulit ── */
.board-title{
  position:absolute;left:clamp(18px,6%,54px);right:clamp(18px,6%,54px);
  bottom:clamp(16px,4.2%,34px);
  z-index:2;
  display:grid;justify-items:center;gap:clamp(5px,1.1vh,11px);
  text-align:center;
}
.board-title__mark{
  width:clamp(40px,9%,66px);height:auto;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.board-title__kicker{
  font-family:var(--chrome);font-size:clamp(.56rem,1.3vh,.7rem);font-weight:600;
  letter-spacing:.2em;color:rgba(200,162,74,.88);
}
.board-title h1{
  margin:0;max-width:22ch;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.06rem,2.5vw,1.92rem);line-height:1.12;text-wrap:balance;
  font-variation-settings:"SOFT" 12,"WONK" 1,"opsz" 120;
  color:#F6ECD6;
  text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 24px rgba(200,162,74,.16);
}
.board-title__div{
  display:flex;align-items:center;gap:9px;width:min(76%,240px);
  color:var(--gilt);
}
.board-title__div::before,.board-title__div::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gilt),transparent);opacity:.62;
}
.board-title__div span{font-size:.62rem;letter-spacing:.2em}
.board-title__sub{
  margin:0;font-family:var(--text);font-style:italic;
  font-size:clamp(.7rem,1.15vw,.92rem);color:rgba(234,223,200,.84);
}
.board-title__foot{
  margin-top:2px;font-family:var(--chrome);font-size:.6rem;font-weight:500;
  letter-spacing:.13em;color:rgba(200,162,74,.6);
}

/* tombol buka */
.open-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(3px,1vh,9px);
  padding:clamp(9px,1.5vh,13px) clamp(18px,3vw,28px);
  border-radius:100px;
  font-family:var(--chrome);font-weight:700;font-size:clamp(.68rem,1.6vh,.8rem);
  letter-spacing:.06em;color:#241906;
  background:linear-gradient(180deg,var(--gilt-hi),var(--gilt) 52%,var(--gilt-lo));
  box-shadow:0 8px 22px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.24);
  transition:transform .3s var(--ease-out),box-shadow .3s,filter .3s;
}
.open-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 26px var(--gilt-glow),inset 0 1px 0 rgba(255,255,255,.55)}
.open-btn:active{transform:translateY(0)}
.open-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── kertas pelapis (endpaper) ── */
.endpaper{
  position:absolute;inset:0;
  background-color:#123F31;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(200,162,74,.10),transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-opacity='.30' stroke-width='1'%3E%3Cpath d='M32 4 40 16 56 16 48 32 56 48 40 48 32 60 24 48 8 48 16 32 8 16 24 16Z'/%3E%3Cpath d='M32 14 42 32 32 50 22 32Z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,58px 58px;
  box-shadow:inset 0 0 70px rgba(0,0,0,.5);
}
.endpaper--aft{background-color:#0F3729}

/* ── kolofon (sampul belakang) ── */
.colophon{
  position:absolute;inset:clamp(30px,8%,54px);
  display:grid;align-content:center;justify-items:center;gap:clamp(9px,1.9vh,16px);
  text-align:center;
}
.colophon__mark{width:clamp(58px,17%,96px);filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.colophon h2{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2.9vh,1.6rem);line-height:1.15;color:#F6ECD6;
  font-variation-settings:"SOFT" 12,"WONK" 1;
}
.colophon__quote{
  margin:0;max-width:34ch;
  font-family:var(--text);font-style:italic;font-size:clamp(.74rem,1.75vh,.92rem);
  line-height:1.68;color:rgba(236,226,204,.82);
}
.colophon__source{font-family:var(--chrome);font-size:.6rem;letter-spacing:.14em;color:rgba(200,162,74,.74)}
.colophon__thanks{margin:0;max-width:36ch;font-size:clamp(.72rem,1.6vh,.86rem);line-height:1.6;color:rgba(226,216,194,.68)}
.colophon__credit{
  margin-top:4px;font-family:var(--chrome);font-size:.6rem;letter-spacing:.1em;
  color:rgba(200,162,74,.56);
}
.colophon__actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:4px}
.ghost-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 17px;border-radius:100px;
  border:1px solid rgba(200,162,74,.45);
  font-family:var(--chrome);font-size:.7rem;font-weight:600;letter-spacing:.03em;
  color:var(--gilt-hi);text-decoration:none;
  transition:all .28s var(--ease-out);
}
.ghost-btn:hover{background:rgba(200,162,74,.14);border-color:var(--gilt);transform:translateY(-1px)}

/* ── punggung jilid ── */
.spine{
  position:absolute;top:-6px;bottom:-6px;left:calc(var(--page-w) - var(--spine-w));
  width:var(--spine-w);
  transform:translateZ(-1px);
  display:grid;grid-template-rows:auto auto 1fr auto auto;align-items:center;
  border-radius:5px 0 0 5px;
  background:linear-gradient(90deg,#041610,#0C3E2F 42%,#072A20);
  box-shadow:inset -6px 0 12px rgba(0,0,0,.6),inset 2px 0 3px rgba(200,162,74,.14);
  z-index:calc(var(--z-board) - 2);
  transition:opacity .5s;
}
.spine__band{height:8px;background:linear-gradient(90deg,transparent,rgba(200,162,74,.42),transparent);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.spine__title{
  writing-mode:vertical-rl;text-orientation:mixed;
  justify-self:center;
  font-family:var(--chrome);font-size:.56rem;font-weight:700;letter-spacing:.24em;
  color:rgba(200,162,74,.78);white-space:nowrap;overflow:hidden;
}
.volume[data-state="open"] .spine{opacity:0}

/* ─── 8. ISI HALAMAN ───────────────────────────────────────────────── */
.page-head{margin:0 0 clamp(14px,2.4vh,22px)}
.page-head__mark{
  display:block;width:34px;margin:0 auto clamp(8px,1.5vh,14px);
  opacity:.42;
}
.page-head__chapter{
  display:block;text-align:center;
  font-family:var(--text);font-style:italic;font-size:.76rem;
  color:var(--sepia-3);letter-spacing:.04em;
}
.page-head h2{
  margin:.28em 0 0;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.24rem,3.1vh,1.72rem);line-height:1.14;
  font-variation-settings:"SOFT" 8,"WONK" 1,"opsz" 110;
  color:#231B0F;
}
.page-head__rule{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:clamp(8px,1.4vh,13px) 0 0;color:var(--gilt-lo);
}
.page-head__rule::before,.page-head__rule::after{
  content:"";width:min(30%,90px);height:1px;background:linear-gradient(90deg,transparent,rgba(138,108,40,.62),transparent);
}
.page-head__rule span{font-size:.6rem;letter-spacing:.2em;opacity:.75}
.page-lead{
  margin:clamp(10px,1.8vh,16px) auto 0;max-width:52ch;text-align:center;text-wrap:balance;
  font-size:clamp(.78rem,1.65vh,.88rem);line-height:1.66;color:var(--sepia-2);
}

/* — daftar entri gaya bibliografi — */
.entries{margin:clamp(16px,2.6vh,26px) 0 0;padding:0;list-style:none}
.entry{
  position:relative;
  display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:0 .9em;
  padding:clamp(9px,1.5vh,14px) 0;
  border-top:1px solid rgba(120,96,54,.20);
}
.entry:first-child{border-top:0;padding-top:0}
.entry__num{
  font-family:var(--chrome);font-size:.68rem;font-weight:600;
  color:var(--gilt-lo);padding-top:.28em;font-variant-numeric:tabular-nums;
}
.entry__body{min-width:0}
.entry__title{
  margin:0;font-family:var(--text);font-weight:600;
  font-size:clamp(.82rem,1.7vh,.93rem);line-height:1.45;color:#241C10;
}
.entry__meta{
  margin:.34em 0 0;font-size:.78rem;line-height:1.55;color:var(--sepia-2);
}
.entry__meta em{font-style:italic}
.entry__tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:.5em}
.tag{
  display:inline-flex;align-items:center;
  padding:2.5px 8px;border-radius:3px;
  border:1px solid rgba(138,108,40,.4);
  font-family:var(--chrome);font-size:.61rem;font-weight:600;letter-spacing:.02em;
  color:#7A5F22;background:rgba(200,162,74,.09);
}
.tag--q1{border-color:rgba(158,43,37,.42);color:#8E2A22;background:rgba(158,43,37,.07)}
.tag--year{border-style:dashed}
.ext{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--chrome);font-size:.65rem;font-weight:600;
  color:#1F6B4E;text-decoration:none;
  border-bottom:1px solid rgba(31,107,78,.34);
  padding-bottom:1px;transition:all .22s;
}
.ext:hover{color:#0F4C36;border-bottom-color:#0F4C36;gap:8px}
.ext::after{content:"↗";font-size:.9em}
.no-ext{font-family:var(--chrome);font-size:.63rem;color:var(--sepia-3);font-style:italic}

/* — identitas diri — */
.identity{display:grid;grid-template-columns:clamp(92px,27%,128px) minmax(0,1fr);gap:clamp(14px,2.4vw,24px);align-items:start;margin-top:clamp(14px,2.4vh,22px)}
.portrait{
  position:relative;width:100%;margin:0;
  padding:7px;background:#FBF5E7;
  box-shadow:0 6px 18px rgba(60,42,16,.26),0 0 0 1px rgba(120,96,54,.20);
  transform:rotate(-1.1deg);
}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 12%}
.portrait::before,.portrait::after{
  content:"";position:absolute;width:17px;height:17px;z-index:2;
  background:linear-gradient(135deg,rgba(58,42,18,.62),rgba(120,96,54,.28));
  clip-path:polygon(0 0,100% 0,0 100%);
}
.portrait::before{top:-1px;left:-1px}
.portrait::after{bottom:-1px;right:-1px;transform:rotate(180deg)}
.portrait__cap{
  display:block;margin-top:6px;text-align:center;
  font-family:var(--text);font-style:italic;font-size:.63rem;color:var(--sepia-3);
}
.facts{margin:0;display:block;min-width:0}
.fact{
  display:grid;grid-template-columns:minmax(88px,34%) minmax(0,1fr);gap:.7em;
  padding:.52em 0;border-bottom:1px dotted rgba(120,96,54,.30);
}
.fact:last-child{border-bottom:0}
.fact dt{
  font-family:var(--chrome);font-size:.64rem;font-weight:600;
  color:var(--sepia-3);letter-spacing:.015em;padding-top:.18em;
}
.fact dd{margin:0;font-size:.83rem;line-height:1.5;color:#241C10;word-break:break-word}
.fact a{color:#1F6B4E;text-decoration:none;border-bottom:1px solid rgba(31,107,78,.32);transition:.2s}
.fact a:hover{color:#0F4C36;border-bottom-color:#0F4C36}

/* — rute pendidikan — */
.route{position:relative;margin:clamp(16px,2.6vh,26px) 0 0;padding-left:30px}
.route::before{
  content:"";position:absolute;left:9px;top:8px;bottom:12px;width:1px;
  background:repeating-linear-gradient(180deg,rgba(138,108,40,.62) 0 4px,transparent 4px 9px);
}
.waypoint{
  position:relative;width:100%;text-align:left;display:block;
  padding:clamp(10px,1.7vh,15px) clamp(12px,1.7vw,16px);
  margin-bottom:10px;border-radius:3px;
  background:linear-gradient(160deg,rgba(255,252,243,.82),rgba(236,222,194,.55));
  border:1px solid rgba(120,96,54,.24);
  box-shadow:0 2px 8px rgba(70,52,22,.07);
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s;
}
.waypoint::before{
  content:"";position:absolute;left:-25.5px;top:calc(50% - 5px);
  width:11px;height:11px;border-radius:50%;
  background:var(--vellum);border:2px solid var(--gilt-lo);
  transition:all .3s var(--ease-out);
}
.waypoint:hover{transform:translateX(4px);border-color:rgba(138,108,40,.5);box-shadow:0 6px 18px rgba(70,52,22,.14)}
.waypoint:hover::before{background:var(--gilt);border-color:var(--gilt-hi);box-shadow:0 0 0 4px rgba(200,162,74,.20)}
.waypoint__year{
  font-family:var(--chrome);font-size:.63rem;font-weight:600;letter-spacing:.02em;color:var(--gilt-lo);
}
.waypoint h3{margin:.24em 0 .18em;font-family:var(--text);font-weight:600;font-size:.9rem;line-height:1.35;color:#241C10}
.waypoint p{margin:0;font-size:.78rem;color:var(--sepia-2);line-height:1.5}
.waypoint__hint{
  display:inline-flex;align-items:center;gap:5px;margin-top:.5em;
  font-family:var(--chrome);font-size:.61rem;color:#1F6B4E;opacity:.72;
}

/* — galeri : cetakan yang ditempel — */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:clamp(12px,2vw,18px);margin-top:clamp(16px,2.6vh,24px)}
.tipped{
  position:relative;display:block;width:100%;text-align:center;
  padding:7px 7px 0;background:#FBF5E7;
  box-shadow:0 5px 16px rgba(60,42,16,.24),0 0 0 1px rgba(120,96,54,.18);
  transition:transform .35s var(--ease-out),box-shadow .35s;
}
.tipped:nth-child(3n+1){transform:rotate(-1.3deg)}
.tipped:nth-child(3n+2){transform:rotate(.8deg)}
.tipped:nth-child(3n){transform:rotate(-.5deg)}
.tipped:hover{transform:rotate(0deg) translateY(-5px) scale(1.03);box-shadow:0 14px 32px rgba(50,34,12,.34),0 0 0 1px rgba(138,108,40,.4);z-index:2}
.tipped img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#E6D8BC}
.tipped figcaption{padding:7px 3px 9px;font-family:var(--text);font-style:italic;font-size:.7rem;line-height:1.35;color:var(--sepia-2)}

/* — HKI : entri bersegel — */
.seal-entry{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:clamp(12px,1.9vh,17px);margin-bottom:12px;border-radius:3px;
  background:linear-gradient(150deg,rgba(255,252,243,.86),rgba(238,225,199,.6));
  border:1px solid rgba(120,96,54,.24);
}
.seal{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#B7332B,#7C1E19);
  color:#F6DCC0;font-family:var(--chrome);font-size:.52rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 3px 9px rgba(90,20,16,.42),inset 0 -2px 6px rgba(0,0,0,.32),inset 0 2px 4px rgba(255,255,255,.22);
  text-align:center;line-height:1.1;
}
.seal-entry h3{margin:0;font-family:var(--text);font-weight:600;font-size:.88rem;line-height:1.4;color:#241C10}
.seal-entry__meta{margin:.36em 0 .5em;font-family:var(--chrome);font-size:.66rem;color:var(--sepia-2)}
.doc-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:100px;
  border:1px solid rgba(31,107,78,.36);
  font-family:var(--chrome);font-size:.65rem;font-weight:600;color:#1F6B4E;
  transition:all .25s var(--ease-out);
}
.doc-btn:hover:not(:disabled){background:rgba(31,107,78,.10);border-color:#1F6B4E;transform:translateY(-1px)}
.doc-btn:disabled{opacity:.45;cursor:default;border-style:dashed}

/* — karya digital : panel instrumen di atas kertas — */
.devices{display:grid;gap:12px;margin-top:clamp(16px,2.6vh,24px)}
.device{
  position:relative;display:grid;gap:7px;
  padding:clamp(13px,2vh,18px);border-radius:6px;
  background:linear-gradient(150deg,#0C2C23,#061C16);
  box-shadow:0 8px 22px rgba(20,12,4,.34),inset 0 1px 0 rgba(200,162,74,.18);
  color:#E7DCC4;overflow:hidden;
}
.device::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 40%,rgba(200,162,74,.10) 50%,transparent 60%),
    repeating-linear-gradient(0deg,rgba(200,162,74,.05) 0 1px,transparent 1px 3px);
  opacity:.7;
}
.device__head{display:flex;align-items:center;gap:9px}
.device__dot{width:7px;height:7px;border-radius:50%;background:var(--verdigris);box-shadow:0 0 9px rgba(46,154,114,.8);flex:none;
  animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.device__kind{font-family:var(--chrome);font-size:.6rem;font-weight:600;letter-spacing:.09em;color:rgba(200,162,74,.86)}
.device h3{margin:0;font-family:var(--display);font-weight:600;font-size:1rem;color:#F3E6C9;position:relative;
  font-variation-settings:"SOFT" 20,"WONK" 0}
.device p{margin:0;font-size:.78rem;line-height:1.58;color:rgba(224,213,190,.76);position:relative}
.device .ext{color:#5FCFA1;border-bottom-color:rgba(95,207,161,.36);position:relative}
.device .ext:hover{color:#8AE6C1;border-bottom-color:#8AE6C1}
.device .no-ext{color:rgba(200,190,168,.5)}

/* — halaman judul & daftar isi — */
.title-page{display:grid;align-content:center;gap:clamp(9px,1.7vh,15px);justify-items:center;text-align:center;min-height:100%;padding:clamp(6px,2vh,20px) 0}
.title-page__mark{width:clamp(64px,20%,104px);opacity:.9}
.title-page__kicker{font-family:var(--chrome);font-size:.62rem;font-weight:600;letter-spacing:.2em;color:var(--gilt-lo)}
.title-page h1{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,3.5vh,2rem);line-height:1.1;color:#231B0F;
  font-variation-settings:"SOFT" 6,"WONK" 1,"opsz" 130;
}
.title-page__sub{margin:0;font-family:var(--text);font-style:italic;font-size:clamp(.8rem,1.8vh,.95rem);color:var(--sepia-2)}
.title-page__orn{width:min(60%,190px);height:16px;margin:2px 0;
  background:radial-gradient(circle at 50% 50%,var(--gilt-lo) 0 2px,transparent 2px) 50% 50%/16px 16px repeat-x;
  opacity:.5}
.title-page__imprint{font-family:var(--chrome);font-size:.62rem;letter-spacing:.1em;color:var(--sepia-3);line-height:1.7}

.toc{margin:clamp(10px,1.8vh,18px) 0 0;padding:0;list-style:none;counter-reset:toc;width:100%}
.toc li{counter-increment:toc}
.toc button{
  width:100%;display:grid;grid-template-columns:2.1em minmax(0,1fr) auto;align-items:baseline;gap:.6em;
  padding:.62em .5em;border-radius:3px;text-align:left;
  transition:background .25s,transform .25s var(--ease-out);
}
.toc button::before{
  content:counter(toc,upper-roman) ".";
  font-family:var(--chrome);font-size:.68rem;font-weight:600;color:var(--gilt-lo);
}
.toc button span{
  position:relative;font-size:.86rem;color:#2A2114;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.toc button em{
  font-family:var(--chrome);font-style:normal;font-size:.66rem;font-weight:600;
  color:var(--sepia-3);font-variant-numeric:tabular-nums;
}
.toc button:hover{background:rgba(200,162,74,.13);transform:translateX(3px)}
.toc button:hover span{color:#0F4C36}

/* — statistik pengunjung — */
.tally{
  margin-top:clamp(12px,2vh,20px);width:100%;
  padding:clamp(11px,1.8vh,16px);border-radius:4px;
  background:linear-gradient(150deg,rgba(12,44,35,.94),rgba(6,28,22,.94));
  color:#E7DCC4;display:grid;gap:9px;
}
.tally__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tally__label{font-family:var(--chrome);font-size:.6rem;font-weight:600;letter-spacing:.13em;color:rgba(200,162,74,.84)}
.tally__num{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1;color:var(--gilt-hi);font-variant-numeric:tabular-nums}
.tally__where{font-family:var(--chrome);font-size:.67rem;color:rgba(224,213,190,.72);line-height:1.5}
.tally__where b{color:#F0E6CC;font-weight:600}

/* — keadaan kosong — */
.blank{
  margin-top:clamp(16px,3vh,28px);padding:clamp(18px,3vh,28px);
  border:1px dashed rgba(120,96,54,.38);border-radius:4px;text-align:center;
}
.blank b{display:block;font-family:var(--text);font-weight:600;font-size:.88rem;color:#241C10;margin-bottom:.4em}
.blank p{margin:0;font-size:.76rem;line-height:1.6;color:var(--sepia-2)}

/* ─── 9. HELM (navigasi bawah) ─────────────────────────────────────── */
.helm{
  display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  margin-top:clamp(18px,3vh,34px);
  padding:6px;border-radius:100px;
  background:rgba(6,22,17,.55);
  border:1px solid rgba(200,162,74,.16);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
}
.helm__arrow{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 16px;border-radius:100px;
  font-family:var(--chrome);font-size:.71rem;font-weight:600;letter-spacing:.02em;
  color:rgba(233,222,200,.86);
  transition:all .28s var(--ease-out);
}
.helm__arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.helm__arrow:hover:not(:disabled){background:rgba(200,162,74,.14);color:var(--gilt-hi)}
.helm__arrow:disabled{opacity:.26;cursor:default}
.helm__read{display:grid;justify-items:center;gap:2px;min-width:clamp(120px,20vw,230px);text-align:center;padding:0 4px}
.helm__read b{
  font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--vellum);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  font-variation-settings:"SOFT" 22,"WONK" 0;
}
.helm__read span{font-family:var(--chrome);font-size:.61rem;color:rgba(200,162,74,.72);letter-spacing:.02em}

.whisper{
  margin:clamp(7px,1.4vh,12px) 0 0;
  font-family:var(--chrome);font-size:.62rem;letter-spacing:.03em;
  color:rgba(210,198,172,.34);text-align:center;
  transition:opacity .5s;
}
body.has-turned .whisper{opacity:0}

/* ─── 10. OVERLAY ──────────────────────────────────────────────────── */
.edu-gallery-modal{
  position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;
  padding:clamp(14px,3vw,38px);background:rgba(3,12,9,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .28s var(--ease-out);
}
.edu-gallery-modal__panel{
  width:min(1080px,100%);max-height:min(88vh,900px);display:grid;grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;border-radius:14px;background:#0A2A21;border:1px solid rgba(200,162,74,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.72);animation:rise .38s var(--ease-out);
}
.edu-gallery-modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;
  border-bottom:1px solid rgba(200,162,74,.16);background:linear-gradient(135deg,rgba(200,162,74,.08),transparent 58%);
}
.edu-gallery-modal__head>div{min-width:0}
.edu-gallery-modal__head span{display:block;font-family:var(--chrome);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.edu-gallery-modal__head h3{margin:.3em 0 .12em;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--vellum)}
.edu-gallery-modal__head p{margin:0;max-width:72ch;font-size:.76rem;line-height:1.5;color:rgba(226,216,194,.66)}
.edu-gallery-modal__close{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(200,162,74,.25);color:var(--vellum);background:rgba(3,12,9,.3);transition:all .22s}
.edu-gallery-modal__close:hover{background:rgba(200,162,74,.18);color:var(--gilt-hi);border-color:var(--gilt)}
.edu-gallery-modal__grid{
  overflow:auto;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start;
  background:linear-gradient(180deg,rgba(244,235,214,.04),rgba(0,0,0,.08));
}
.edu-gallery-card{
  min-width:0;padding:0;overflow:hidden;border-radius:10px;border:1px solid rgba(200,162,74,.18);
  background:rgba(255,255,255,.045);text-align:left;color:inherit;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s;
}
.edu-gallery-card:hover{transform:translateY(-3px);border-color:rgba(200,162,74,.62);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.edu-gallery-card__image{display:block;aspect-ratio:4/3;background:#071C16;overflow:hidden}
.edu-gallery-card__image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s var(--ease-out)}
.edu-gallery-card:hover .edu-gallery-card__image img{transform:scale(1.035)}
.edu-gallery-card__meta{display:grid;gap:4px;padding:10px 11px 12px}
.edu-gallery-card__meta b{font-family:var(--display);font-size:.82rem;font-weight:600;line-height:1.35;color:var(--vellum)}
.edu-gallery-card__meta small{font-family:var(--chrome);font-size:.66rem;line-height:1.45;color:rgba(226,216,194,.58)}
.edu-gallery-modal__empty{grid-column:1/-1;min-height:260px;display:grid;place-content:center;justify-items:center;text-align:center;padding:30px;color:rgba(226,216,194,.65)}
.edu-gallery-modal__empty b{font-family:var(--display);font-size:1.05rem;color:var(--vellum)}
.edu-gallery-modal__empty p{max-width:42ch;margin:.5em 0 0;font-size:.78rem;line-height:1.6}

.lightbox{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;place-items:center;padding:clamp(16px,4vw,50px);
  background:rgba(3,12,9,.93);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:fade .3s var(--ease-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox__frame{
  margin:0;max-width:min(1000px,100%);max-height:100%;
  display:grid;gap:14px;justify-items:center;
  animation:rise .45s var(--ease-out);
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.lightbox__frame img{
  max-width:100%;max-height:calc(100vh - 210px);object-fit:contain;
  border:8px solid #FBF5E7;border-radius:2px;
  box-shadow:0 26px 70px rgba(0,0,0,.7);
}
.lightbox__frame figcaption{text-align:center;max-width:60ch}
.lightbox__count{font-family:var(--chrome);font-size:.63rem;letter-spacing:.14em;color:var(--gilt)}
.lightbox__frame h3{margin:.35em 0 .2em;font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--vellum)}
.lightbox__frame p{margin:0;font-size:.8rem;line-height:1.6;color:rgba(226,216,194,.66)}
.lightbox__close,.lightbox__nav{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(200,162,74,.28);
  background:rgba(8,28,22,.7);color:var(--vellum);
  font-size:1.25rem;line-height:1;
  transition:all .28s var(--ease-out);
}
.lightbox__close{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);font-size:.95rem}
.lightbox__nav--prev{left:clamp(10px,2.4vw,26px);top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(10px,2.4vw,26px);top:50%;transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(200,162,74,.2);border-color:var(--gilt);color:var(--gilt-hi)}
.lightbox__nav:disabled{opacity:.2;pointer-events:none}

.sheet{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;place-items:center;padding:clamp(12px,3vw,40px);
  background:rgba(3,12,9,.9);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:fade .3s var(--ease-out);
}
.sheet__panel{
  width:min(1020px,100%);height:min(88vh,880px);
  display:grid;grid-template-rows:auto 1fr;
  border-radius:10px;overflow:hidden;
  background:#0A2A21;border:1px solid rgba(200,162,74,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.72);
  animation:rise .42s var(--ease-out);
}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid rgba(200,162,74,.16)}
.sheet__head h3{margin:0;font-family:var(--display);font-weight:600;font-size:.96rem;color:var(--vellum);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet__head-actions{display:flex;align-items:center;gap:9px;flex:none}
.pill{
  padding:8px 14px;border-radius:100px;border:1px solid rgba(200,162,74,.36);
  font-family:var(--chrome);font-size:.68rem;font-weight:600;color:var(--gilt-hi);text-decoration:none;
  transition:all .25s;
}
.pill:hover{background:rgba(200,162,74,.16)}
.sheet__close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--vellum);
  border:1px solid rgba(200,162,74,.22);transition:all .25s}
.sheet__close:hover{background:rgba(200,162,74,.18);color:var(--gilt-hi)}
.sheet__body{position:relative;background:#F2ECE0}
.sheet__body iframe{width:100%;height:100%;border:0;display:block}
.sheet__empty{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;
  text-align:center;padding:30px;color:var(--sepia-2);background:var(--vellum);
}
.sheet__empty b{font-family:var(--display);font-weight:600;font-size:1.05rem;color:#241C10}
.sheet__empty p{margin:0;font-size:.82rem;max-width:38ch;line-height:1.6}

.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1000;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;
  padding:11px 17px;border-radius:100px;
  background:rgba(9,34,26,.96);border:1px solid rgba(200,162,74,.28);
  font-family:var(--chrome);font-size:.73rem;font-weight:500;color:var(--vellum);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:toastIn .38s var(--ease-out);pointer-events:auto;max-width:90vw;
}
.toast b{color:var(--gilt-hi)}
.toast button{
  font-family:var(--chrome);font-size:.7rem;font-weight:700;color:var(--gilt-hi);
  border-bottom:1px solid rgba(243,223,168,.4);
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut .3s var(--ease-out) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ─── 11. MEMUAT ───────────────────────────────────────────────────── */
body.is-booting .volume,body.is-booting .apparatus,body.is-booting .helm,body.is-booting .whisper{opacity:0}
body:not(.is-booting) .apparatus{animation:dropIn .8s var(--ease-out) both}
body:not(.is-booting) .volume{animation:bookIn 1.1s var(--ease-out) both .1s}
body:not(.is-booting) .helm{animation:dropIn .8s var(--ease-out) both .3s}
body:not(.is-booting) .whisper{animation:dropIn .8s var(--ease-out) both .5s}
@keyframes dropIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes bookIn{
  from{opacity:0;transform:translateY(28px) rotateX(11deg) scale(.955)}
  to{opacity:1;transform:none}
}

/* ─── 12. RESPONSIF ────────────────────────────────────────────────── */
/* satu halaman: ponsel potret & lanskap pendek */
body.single .volume{width:var(--page-w)}
body.single .leaf--recto,
body.single .stack--recto,
body.single .gutter,
body.single .corner--prev{display:none}
body.single .leaf--verso{left:0;border-radius:5px}
body.single .leaf--turn{left:0}
body.single .board{left:0}
body.single .board--back{left:0}
body.single .spine{left:calc(-1 * var(--spine-w) + 3px)}
body.single .volume[data-state="closed"] .volume__body,
body.single .volume[data-state="shut"] .volume__body{transform:none}
body.single .volume__cast{left:6%!important;right:6%!important}
body.single .leaf--verso .leaf__paper::after{content:none}

@media(max-width:620px){
  .edu-gallery-modal{padding:8px}
  .edu-gallery-modal__panel{max-height:94vh;border-radius:11px}
  .edu-gallery-modal__head{padding:13px 14px}
  .edu-gallery-modal__grid{padding:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .edu-gallery-card__meta{padding:8px}
  .edu-gallery-card__meta b{font-size:.74rem}
  .edu-gallery-card__meta small{font-size:.61rem}
}

@media(max-width:900px){
  .apparatus{grid-template-columns:1fr auto;gap:8px;padding:9px 12px}
  .meridian{grid-column:1/-1;grid-row:2;padding:6px 0 2px;margin-top:2px}
  .meridian__rule,.meridian__travelled{top:14px}
  .apparatus__marktext i{display:none}
  .stop{min-width:64px}
  .tool--text b{display:none}
  .tool--text{padding:0 11px}
}
@media(max-width:640px){
  .identity{grid-template-columns:minmax(0,1fr)}
  .apparatus__marktext b{font-size:.8rem}
  .helm__read{min-width:0;flex:1}
  .helm__arrow span{display:none}
  .helm__arrow{padding:0 12px}
  .whisper{font-size:.58rem;padding:0 12px}
  .identity{grid-template-columns:1fr;justify-items:center}
  .portrait{width:min(150px,46%);justify-self:center}
  .facts{width:100%}
  .fact{grid-template-columns:1fr;gap:.15em}
  .lightbox__frame img{max-height:calc(100vh - 250px)}
  .plates{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}

/* ─── 13. GERAK MINIMAL ────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .room__glow{animation:none}
}
body[data-motion="calm"] .room__glow{animation:none}
body[data-motion="calm"] .room__dust{display:none}
body[data-motion="calm"] .device__dot{animation:none}

/* ─── 14. CETAK ────────────────────────────────────────────────────── */
@media print{
  .apparatus,.helm,.whisper,.room__dust,.room__glow,.corner{display:none!important}
  body{overflow:visible;background:#fff}
}

/* ════════════════════════════════════════════════════════════════════
   15. KOREOGRAFI BALIK HALAMAN
   ════════════════════════════════════════════════════════════════════ */
@keyframes turnFwd{
  0%  {transform:rotateY(0deg)    translateZ(0)}
  48% {transform:rotateY(-88deg)  translateZ(30px)}
  100%{transform:rotateY(-180deg) translateZ(0)}
}
@keyframes turnBack{
  0%  {transform:rotateY(-180deg) translateZ(0)}
  48% {transform:rotateY(-92deg)  translateZ(30px)}
  100%{transform:rotateY(0deg)    translateZ(0)}
}
.leaf--turn.turn-fwd {animation:turnFwd  var(--turn-ms) var(--ease-paper) forwards}
.leaf--turn.turn-back{animation:turnBack var(--turn-ms) var(--ease-paper) forwards}

.leaf__curl{background-size:300% 100%;background-repeat:no-repeat}
@keyframes curlRise{
  0%  {opacity:.14;background-position:0 0}
  50% {opacity:.96;background-position:50% 0}
  100%{opacity:.34;background-position:100% 0}
}
@keyframes curlFall{
  0%  {opacity:.88;background-position:100% 0}
  50% {opacity:.80;background-position:50% 0}
  100%{opacity:.10;background-position:0 0}
}
.leaf--turn.turn-fwd  .leaf__face--fore .leaf__curl{animation:curlRise var(--turn-ms) var(--ease-paper) forwards}
.leaf--turn.turn-fwd  .leaf__face--aft  .leaf__curl{animation:curlFall var(--turn-ms) var(--ease-paper) forwards}
.leaf--turn.turn-back .leaf__face--aft  .leaf__curl{animation:curlRise var(--turn-ms) var(--ease-paper) forwards}
.leaf--turn.turn-back .leaf__face--fore .leaf__curl{animation:curlFall var(--turn-ms) var(--ease-paper) forwards}

.turn-cast{left:0;background-size:200% 100%;background-repeat:no-repeat}
@keyframes castFwd{
  0%{opacity:0;background-position:100% 0}
  40%{opacity:.52}
  100%{opacity:0;background-position:0 0}
}
@keyframes castBack{
  0%{opacity:0;background-position:0 0}
  40%{opacity:.46}
  100%{opacity:0;background-position:100% 0}
}
.turn-cast.cast-fwd {animation:castFwd  var(--turn-ms) var(--ease-paper) forwards}
.turn-cast.cast-back{animation:castBack var(--turn-ms) var(--ease-paper) forwards}

body.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.dragging .leaf__paper{overflow:hidden}
.corner{cursor:grab}
.corner:active{cursor:grabbing}

/* ── koreksi geometri papan belakang ── */
.board--back{left:var(--page-w);transform-origin:left center;transform:rotateY(0deg);z-index:1}
.board--back .board__face{border-radius:4px 9px 9px 4px}
.board--back .board__face--inner{transform:rotateY(0deg)}
.board--back .board__face--outer{transform:rotateY(180deg)}
.volume[data-state="shut"] .board--back{transform:rotateY(-179.4deg)}
.volume[data-state="open"] .board--back,
.volume[data-state="closed"] .board--back{transform:rotateY(0deg)}
.volume[data-state="shut"] .leaf--rest,
.volume[data-state="shut"] .stack{opacity:0;transition:opacity .35s .25s}

/* papan depan menjadi halaman kertas ketika kitab terbuka */
.board--front .board__face--inner{background:var(--vellum)}
#endpaperFace{position:absolute;inset:0;background:none;box-shadow:none}
#endpaperFace .leaf__paper{height:100%;width:100%}

/* bayangan meja mengikuti keadaan jilid */
.volume[data-state="closed"] .volume__cast,
.volume[data-state="shut"]   .volume__cast{left:26%;right:26%}
body.single .volume[data-state="closed"] .volume__cast,
body.single .volume[data-state="shut"]   .volume__cast{left:6%;right:6%}

/* saat tertutup, tumpukan tepi hanya di sisi punggung */
.volume[data-state="closed"] .stack--recto{opacity:1}
.volume[data-state="shut"] .stack--verso{opacity:0}

/* papan depan boleh diklik saat tertutup */
.volume[data-state="closed"] .board--front{cursor:pointer}
.volume[data-state="shut"]   .board--back{cursor:pointer}

/* ── jilid tertutup : hanya papan sampul yang terlihat ── */
.leaf--rest{transition:opacity .4s var(--ease-out) .55s}
.volume[data-state="closed"] .leaf--rest{opacity:0;transition-delay:0s}
.volume[data-state="closed"] .spine{opacity:1}
.spine{transition:opacity .5s var(--ease-out)}

/* ── urutan lapis yang benar ── */
.leaf--rest{z-index:10}
.stack{z-index:2}
.board{z-index:40}
.volume[data-state="open"] .board--back{z-index:1}

/* ── teks memudar sebelum nomor halaman ── */
.leaf--rest::after,.leaf__face::after{
  content:"";position:absolute;left:1px;right:1px;bottom:0;height:36px;
  pointer-events:none;z-index:4;
  background:linear-gradient(180deg,rgba(244,234,213,0),rgba(238,226,200,.97) 64%);
}
.leaf--turn::after{content:none}

/* papan depan tetap terlipat ketika kitab ditutup di akhir */
.volume[data-state="shut"] .board--front{transform:rotateY(-179.4deg);z-index:1}
.volume[data-state="shut"] .spine{opacity:1}
.colophon__thanks{text-wrap:balance}
.colophon__quote{text-wrap:balance}

/* ════════════════════════════════════════════════════════════════════
   16. PENYESUAIAN LAYAR KECIL
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .apparatus{padding:8px 10px 4px;gap:6px}
  .apparatus__mark{padding:3px 10px 3px 3px;gap:8px}
  .apparatus__mark img{width:28px;height:28px}
  .apparatus__marktext b{font-size:.78rem}
  .tool{height:34px;padding:0 9px;gap:5px}
  .tool svg{width:15px;height:15px}
  .meridian{padding:10px 0 0}
  .meridian__rule,.meridian__travelled{top:18px;left:6px;right:6px}
  .stop{min-width:58px;gap:6px;padding:0 4px 2px}
  .stop__label{font-size:.58rem}
  .desk{padding:6px 8px 8px}
  .helm{margin-top:clamp(10px,2vh,18px);gap:6px}
  .helm__read b{font-size:.8rem}
  .helm__read span{font-size:.57rem}
  .page-lead{max-width:44ch}
}
@media(max-width:900px) and (orientation:portrait){
  .apparatus__mark{flex:1;min-width:0}
  .apparatus__marktext{min-width:0;overflow:hidden}
  .apparatus__marktext b{overflow:hidden;text-overflow:ellipsis}
}
/* tepi tumpukan pada mode satu halaman */
body.single .stack--verso{left:-9px;width:11px}
body.single .stack--recto{display:block;right:-9px;width:11px;opacity:1}
body.single .volume[data-state="closed"] .stack--verso{opacity:0}

/* papan disingkirkan setelah kitab terbuka (penting di mode satu halaman) */
/* Setelah kitab terbuka, kedua papan sampul tidak lagi diperlukan.
   Dibiarkan tampil, muka dalamnya ikut terlukis di belakang halaman dan
   memunculkan bayangan teks ganda. */
.volume.tucked .board{visibility:hidden}
.leaf--rest::after,.leaf__face::after{height:52px}
.folio{bottom:16px}

/* sudut halaman: petunjuk halus, bukan blok pucat */
.corner span{
  background:linear-gradient(315deg,rgba(226,210,178,.82) 0 48%,transparent 48%)!important;
  box-shadow:-1px -1px 7px rgba(0,0,0,.22);
}
.corner--prev span{background:linear-gradient(225deg,rgba(226,210,178,.82) 0 48%,transparent 48%)!important}
.volume[data-state="open"] .corner{opacity:.22}
.volume[data-state="open"] .corner:hover{opacity:.9}
.volume[data-state="open"] .corner:disabled{opacity:0}
.volume{perspective-origin:50% 54%}

/* ════════════════════════════════════════════════════════════════════
   17. URUTAN KEDALAMAN PAPAN SAMPUL
   Di dalam konteks preserve-3d, z-index tidak berlaku — urutan tumpukan
   ditentukan posisi sumbu Z. Nilai di bawah menetapkannya secara tegas.
   ════════════════════════════════════════════════════════════════════ */
.board--front{transform:rotateY(0deg) translateZ(2px)}                    /* di depan halaman */
.volume[data-state="open"] .board--front,
.volume[data-state="shut"] .board--front{transform:rotateY(-179.4deg) translateZ(2px)}  /* menjauh */

.board--back{transform:rotateY(0deg) translateZ(-2px)}                    /* menjauh */
.volume[data-state="open"] .board--back,
.volume[data-state="closed"] .board--back{transform:rotateY(0deg) translateZ(-2px)}
.volume[data-state="shut"] .board--back{transform:rotateY(-179.4deg) translateZ(-2px)}  /* mendekat */

/* Mode satu halaman tidak punya "sisi kiri": papan belakang berputar
   pada porosnya sendiri agar tetap berada di tempat saat kitab ditutup. */
body.single .board--back{transform-origin:center center}
body.single .volume[data-state="open"] .board--back,
body.single .volume[data-state="closed"] .board--back{transform:rotateY(0deg) translateZ(-2px)}
body.single .volume[data-state="shut"] .board--back{transform:rotateY(180deg) translateZ(-2px)}
body.single .volume[data-state="shut"] .board--front{visibility:hidden}
body.single .volume[data-state="closed"] .board--back{visibility:hidden}

/* ════════════════════════════════════════════════════════════════════
   18. JILID MELEBAR (LANDSCAPE)
   Halaman kini lebih lebar daripada tinggi. Isi teks diberi lebar baca
   maksimum agar barisnya tidak terlalu panjang untuk dibaca.
   ════════════════════════════════════════════════════════════════════ */
.leaf__paper > *{
  max-width:min(100%,660px);
  margin-left:auto;margin-right:auto;
}
.leaf__paper > .plates{max-width:min(100%,760px)}

/* halaman lebih pendek: rapatkan sedikit kepala halaman */
body:not(.single) .page-head__mark{width:30px;margin-bottom:clamp(6px,1.1vh,11px)}
body:not(.single) .page-head h2{font-size:clamp(1.16rem,2.6vh,1.6rem)}
body:not(.single) .page-lead{font-size:clamp(.76rem,1.5vh,.85rem);max-width:56ch}
body:not(.single) .entries{margin-top:clamp(12px,2vh,20px)}

/* potret & data diri lebih lega di halaman melebar */
body:not(.single) .identity{grid-template-columns:clamp(100px,26%,140px) minmax(0,1fr)}

/* ── sampul: perilaku pada tiap bentuk papan ── */
/* papan potret (ponsel): gambar mengisi bagian atas, judul di bawahnya */
/* Papan potret: tinggi gambar dipilih agar rasio kotaknya mendekati
   rasio asli karya, sehingga sisi kiri-kanan hampir tidak terpotong. */
body.single .cover__art{
  height:46%;min-height:0;aspect-ratio:auto;
  object-position:50% 34%;
}
body.single .cover__scrim{height:58%}
body.single .board-title{gap:clamp(6px,1.3vh,13px)}
body.single .board-title h1{font-size:clamp(1.1rem,5.4vw,1.6rem)}
body.single .board-title__mark{width:clamp(46px,14%,72px)}

/* kolofon menyesuaikan papan melebar */
body:not(.single) .colophon{inset:clamp(26px,7%,56px);gap:clamp(10px,2.1vh,18px)}
body:not(.single) .colophon__mark{width:clamp(62px,16%,104px)}
body:not(.single) .colophon h2{font-size:clamp(1.24rem,3.4vh,1.84rem)}
body:not(.single) .colophon__quote{font-size:clamp(.84rem,1.95vh,1.02rem);max-width:42ch;line-height:1.72}
body:not(.single) .colophon__thanks{max-width:46ch;font-size:clamp(.8rem,1.75vh,.92rem)}
body:not(.single) .colophon__source{font-size:.66rem}
body:not(.single) .colophon__actions{margin-top:8px;gap:12px}

/* tumpukan tepi sedikit lebih tipis pada jilid melebar */
body:not(.single) .stack{width:13px}
body:not(.single) .stack--verso{left:-10px}
body:not(.single) .stack--recto{right:-10px}

/* blok judul pada papan melebar: rapat, tanpa garis hias tambahan */
body:not(.single) .board-title__div{display:none}
body:not(.single) .board-title__mark{width:clamp(36px,7.5%,54px)}
body:not(.single) .board-title__kicker{font-size:clamp(.54rem,.78vw,.68rem)}
body:not(.single) .open-btn{margin-top:2px;padding:10px clamp(18px,2.4vw,26px)}
body:not(.single) .board-title__foot{font-size:.56rem}

/* papan potret: blok judul memakai ruang kulit yang lebih lapang */
body.single .board-title{gap:clamp(8px,1.6vh,15px);bottom:clamp(20px,5%,40px)}
body.single .board-title h1{font-size:clamp(1.12rem,5.6vw,1.7rem);max-width:18ch}
body.single .board-title__mark{width:clamp(50px,15%,78px)}
body.single .board-title__sub{font-size:clamp(.76rem,3.4vw,.95rem)}