@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
:root{
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --gold:#c8a45c;--gold-hi:#ecd49a;--gold-lo:#8d6d2e;
  --paper:#f2e9d8;--ink:#2b2119;--ink-soft:#6b5a48;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#0e0b09;color:#e9dfcc;font-family:var(--serif)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html,body{touch-action:manipulation}
.room{position:fixed;inset:0;height:100vh;height:100dvh;-webkit-touch-callout:none;background:radial-gradient(ellipse 70% 60% at 50% 42%,#2a1f17 0%,#17110d 55%,#0b0807 100%);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.room::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.06;pointer-events:none;mix-blend-mode:overlay}
.brand{position:absolute;top:max(18px,env(safe-area-inset-top));left:0;right:0;text-align:center;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:rgba(200,164,92,.55);font-weight:500;pointer-events:none;transition:opacity .8s}
.room.closed .brand{opacity:0}
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:2600px;perspective-origin:50% 45%;touch-action:none;cursor:grab}
.stage:active{cursor:grabbing}
.book{position:relative;flex:none;font-size:7px;transition:transform 1s cubic-bezier(.5,.05,.25,1);will-change:transform;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.book.intro{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1}}
.book.intro.dbl{animation-name:riseD}
@keyframes riseD{from{opacity:0;margin-top:24px}to{opacity:1;margin-top:0}}

/* leather boards behind the pages */
.board{position:absolute;top:-1.2em;bottom:-1.2em;background:#2a160f var(--noise);background-blend-mode:soft-light;border-radius:.6em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 .15em .3em rgba(255,200,140,.08);transition:opacity .6s}
.board.r{left:var(--half,0);right:-1.2em}
.board.l{left:-1.2em;width:calc(var(--half) + 1.2em);transition:opacity .9s}
.base{position:absolute;top:0;bottom:0;background:#e5dac4;box-shadow:.25em .2em 0 #d3c7ae,.5em .4em 0 #e2d7c0,.75em .6em 0 #cfc3a9,1em .8em 0 #ddd2ba}
.base.r{left:var(--half,0);width:var(--pw)}
.base.l{left:0;width:var(--pw);box-shadow:-.25em .2em 0 #d3c7ae,-.5em .4em 0 #e2d7c0,-.75em .6em 0 #cfc3a9;transition:opacity .9s}

.leaf{position:absolute;top:0;left:var(--half,0);width:var(--pw);height:var(--ph);transform-origin:left center;transform-style:preserve-3d;transition:transform var(--dur,1s) cubic-bezier(.45,.05,.2,1);will-change:transform}
.leaf.gone{visibility:hidden}
.leaf.drag{transition:none!important}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper)}
.face.back{transform:rotateY(180deg)}
.face::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.14;mix-blend-mode:multiply;pointer-events:none}
.face::after{content:"";position:absolute;inset:0;pointer-events:none}
.face.rt::after{background:linear-gradient(90deg,rgba(40,25,10,.38) 0,rgba(40,25,10,.14) 2.5%,rgba(255,255,255,.05) 4%,transparent 9%),linear-gradient(270deg,rgba(40,25,10,.1),transparent 5%)}
.face.lf::after{background:linear-gradient(270deg,rgba(40,25,10,.38) 0,rgba(40,25,10,.14) 2.5%,rgba(255,255,255,.05) 4%,transparent 9%),linear-gradient(90deg,rgba(40,25,10,.1),transparent 5%)}
.shade{position:absolute;inset:0;background:#120a04;opacity:0;pointer-events:none;z-index:5}
.leaf.turning .face.front .shade{animation:shF var(--dur,1s) ease-in-out}
.leaf.turning .face.back .shade{animation:shB var(--dur,1s) ease-in-out}
@keyframes shF{0%{opacity:0}60%{opacity:.4}100%{opacity:.12}}
@keyframes shB{0%{opacity:.12}40%{opacity:.4}100%{opacity:0}}

/* cover */
.face.cover{background:#2b170f;color:var(--gold);inset:-1.2em -1.2em -1.2em 0;border-radius:.2em .6em .6em .2em}
.face.cover::before{opacity:.5;mix-blend-mode:soft-light;background-size:160px}
.face.cover::after{background:linear-gradient(100deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.2) 3.6%,rgba(255,220,170,.1) 4.2%,rgba(0,0,0,.28) 5.2%,transparent 11%),radial-gradient(120% 90% at 30% 20%,rgba(255,225,180,.12),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 30%)}
.cv{position:absolute;inset:6em 5.5em 6em 7.5em;border:1px solid rgba(200,164,92,.7);outline:1px solid rgba(200,164,92,.35);outline-offset:.9em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2}
.cv .gold{background:linear-gradient(170deg,var(--gold-hi) 0%,var(--gold) 40%,var(--gold-lo) 70%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.65)) drop-shadow(0 1px 0 rgba(255,230,170,.28))}
.cv h1{font-weight:600;font-size:max(5.4em,15px);letter-spacing:.14em;text-transform:uppercase;line-height:1.25}
.cv .sub{margin-top:2.4em;font-size:max(2.5em,9px);letter-spacing:.5em;text-transform:uppercase;font-weight:500;padding-left:.5em}
.cv svg{width:14em;height:3em;margin:2.6em 0 0;overflow:visible}
.cv svg *{fill:none;stroke:var(--gold);stroke-width:.9;vector-effect:non-scaling-stroke}
.cv .open{position:absolute;bottom:4.5em;font-size:max(2.1em,8px);letter-spacing:.4em;text-transform:uppercase;opacity:.65;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25}}

/* endpaper (inside cover) + pages */
.face.endp{background:#2b170f;inset:-1.2em 0 -1.2em -1.2em;border-radius:.6em .2em .2em .6em}
.face.endp .sheet{position:absolute;inset:1.2em 0 1.2em 1.2em;background:var(--paper);overflow:hidden}
.pg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:0 7em;z-index:2;color:var(--ink)}
.face.endp .pg{inset:0}
.photo-pg{justify-content:flex-start;padding-top:19em}
.mat{display:block;width:100%;padding:3.6em;background:#fbf8f0;box-shadow:inset 0 0 0 .1em rgba(80,60,40,.22),0 .1em .2em rgba(40,25,10,.28),0 .8em 1.8em rgba(40,25,10,.22);cursor:zoom-in;position:relative}
.mat::before{content:"";position:absolute;inset:3em;box-shadow:inset 0 .12em .25em rgba(40,25,10,.35),0 0 0 .12em #fff,0 0 0 .22em rgba(120,95,60,.18);pointer-events:none}
.mat img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;background:#ddd2bd;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.cap{margin-top:5.5em;text-align:center;line-height:1.3;width:100%}
.cap b{display:block;font-weight:500;font-style:italic;font-size:max(2.9em,11px);color:var(--ink)}
.cap span{display:block;margin-top:.9em;font-size:max(1.75em,8.5px);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.folio{position:absolute;bottom:5em;left:0;right:0;text-align:center;font-size:max(2.3em,9.5px);color:rgba(80,60,40,.65);font-weight:500;letter-spacing:.1em;z-index:2}
.folio::before,.folio::after{content:"";display:inline-block;width:2.6em;height:1px;background:rgba(120,95,60,.4);vertical-align:middle;margin:0 1.2em}
.mark{position:absolute;top:7em;left:0;right:0;text-align:center;font-size:max(1.7em,8px);letter-spacing:.42em;text-transform:uppercase;color:rgba(120,95,60,.7);font-weight:500;z-index:2}
.title-pg{justify-content:center;text-align:center}
.title-pg .small{font-size:max(2em,8.5px);letter-spacing:.5em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;padding-left:.5em}
.title-pg h2{font-weight:500;font-size:max(5.6em,18px);line-height:1.12;margin:1.1em 0 .1em;color:var(--ink)}
.title-pg h3{font-weight:400;font-style:italic;font-size:max(3.4em,12px);color:var(--ink-soft)}
.title-pg .rule{width:10em;height:1px;background:linear-gradient(90deg,transparent,#a88a52,transparent);margin:3.2em 0 2.6em;position:relative}
.title-pg .rule::after{content:"";position:absolute;left:50%;top:50%;width:.9em;height:.9em;background:#a88a52;transform:translate(-50%,-50%) rotate(45deg)}
.title-pg p{font-style:italic;font-size:max(2.5em,10px);line-height:1.55;color:var(--ink-soft);max-width:30em}
.fin{font-style:italic;font-size:max(4em,14px);color:var(--ink-soft);letter-spacing:.06em}

/* controls */
.edge{position:absolute;top:50%;width:56px;height:96px;margin-top:-48px;display:flex;align-items:center;justify-content:center;color:var(--gold);opacity:0;transition:opacity .35s;z-index:20;-webkit-tap-highlight-color:transparent}
.edge svg,.ib svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.edge-p{left:max(4px,env(safe-area-inset-left))}.edge-n{right:max(4px,env(safe-area-inset-right))}
.room:hover .edge:not([hidden]),.room.ui .edge:not([hidden]){opacity:.7}
.edge:hover{opacity:1!important}
.edge:disabled,.edge.off{opacity:0!important;pointer-events:none}
.edge:focus-visible,.ib:focus-visible,.thumbs button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.hud{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;z-index:15;pointer-events:none}
.thumbs{display:flex;gap:10px;padding:8px 14px;opacity:.5;transition:opacity .4s;pointer-events:auto}
.hud:hover .thumbs,.room.ui .thumbs{opacity:1}
.thumbs button{width:58px;height:40px;padding:0;border:0;position:relative;opacity:.55;transition:opacity .3s,transform .3s;outline-offset:3px}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) brightness(.9)}
.thumbs button[aria-current=true]{opacity:1;transform:translateY(-3px)}
.thumbs button[aria-current=true]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold)}
.thumbs button:hover{opacity:1}
.ind{font-size:15px;letter-spacing:.3em;font-variant-caps:all-small-caps;color:rgba(200,164,92,.7);font-weight:500;min-height:1.2em;padding-left:.34em}
.nojs{position:absolute;inset:0;display:grid;place-items:center}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(9,6,4,var(--bga,.96));display:flex;touch-action:none;animation:lbin .35s ease both}
.lb[hidden]{display:none}
@keyframes lbin{from{opacity:0}}
.lb-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.lb-stage.zoomed{cursor:grab}.lb-stage.panning{cursor:grabbing}
.lb-stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;box-shadow:0 20px 60px rgba(0,0,0,.6);-webkit-user-drag:none;will-change:transform}
.lb-stage img.anim{transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.lb-stage img.slide{transition:transform .22s cubic-bezier(.25,.8,.3,1),opacity .2s}
.lb{transition:background-color .2s}
.lb-top{background:linear-gradient(rgba(6,4,2,.7),transparent);padding-bottom:26px!important;position:absolute;top:max(10px,env(safe-area-inset-top));left:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 10px 0 22px;z-index:5;pointer-events:none}
.lb-top>*{pointer-events:auto}
.lb-count{margin-right:auto;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:rgba(200,164,92,.75);font-weight:500}
.ib{width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--gold);opacity:.75}
.ib:hover{opacity:1}.ib svg{width:24px;height:24px}
.lb-pct{width:auto;min-width:50px;font-size:14px;letter-spacing:.06em;font-weight:500}
.lb-cap{position:absolute;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));text-align:center;pointer-events:none;font-style:italic;font-size:19px;color:#d9ccb2;transition:opacity .3s;padding:0 70px}
.lb.zoomed-in .lb-cap{opacity:0}
.lb .lb-e{opacity:.55}
.lb:hover .lb-e{opacity:.8}
@media (hover:none){.lb .lb-e{display:none}}
@media (max-width:820px),(max-aspect-ratio:1/1),(max-height:520px){
  .thumbs{display:none}
  .lb-cap{font-size:16px;padding:0 20px;bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (hover:none){.lb-top #lbm,.lb-top #lbz{display:none}}
.leaf.far{visibility:hidden}
.dots{display:none}
.hint{position:absolute;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px);transform:translate(-50%,8px);z-index:30;display:flex;flex-direction:column;gap:3px;align-items:center;background:rgba(20,13,9,.88);border:1px solid rgba(200,164,92,.4);color:#e9dfcc;border-radius:12px;padding:10px 16px;font-size:15px;font-style:italic;text-align:center;opacity:0;transition:opacity .45s,transform .45s;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.hint.on{opacity:1;transform:translate(-50%,0)}
.hint[hidden]{display:none}

/* ---- HP / layar sempit / landscape pendek: halaman memenuhi layar, kontrol di bawah ---- */
.room.cmp{background:#150f0b}
.room.cmp::after{display:none}
.room.cmp .brand{display:none}
.room.cmp .book{filter:none;transition-duration:.64s}
.room.cmp .board.r{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.5)}
.room.cmp .board.l{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.5)}
.room.cmp .base{box-shadow:.12em .1em 0 #d3c7ae,.24em .2em 0 #e2d7c0}
.room.cmp .base.l{box-shadow:-.12em .1em 0 #d3c7ae,-.24em .2em 0 #e2d7c0}
.room.cmp .face::before{mix-blend-mode:normal;opacity:.05}
.room.cmp .board{top:-.6em;bottom:-.6em}
.room.cmp .board.r{right:-.6em}.room.cmp .board.l{left:-.6em;width:calc(var(--half) + .6em)}
.room.cmp .face.cover{inset:-.6em -.6em -.6em 0}
.room.cmp .face.endp{inset:-.6em 0 -.6em -.6em}
.room.cmp .face.endp .sheet{inset:.6em 0 .6em .6em}
.room.cmp .leaf{will-change:auto}
.room.cmp .leaf.turning,.room.cmp .leaf.drag{will-change:transform}
.room.cmp .cv{inset:7% 8% 7% 11%}
.room.cmp .cv h1{font-size:max(5.6em,26px)}
.room.cmp .cv .sub{font-size:max(2.6em,11px)}
.room.cmp .cv .open{font-size:max(2.2em,11px)}
.room.cmp .photo-pg{padding:34px 8px 38px;justify-content:center}
.room.cmp .mat{width:min(100%,calc((var(--ph) - 150px) * var(--ar) + 16px));padding:8px;box-shadow:0 1px 2px rgba(40,25,10,.3),0 6px 12px rgba(40,25,10,.18)}
.room.cmp .mat::before{inset:6px;box-shadow:inset 0 1px 2px rgba(40,25,10,.3),0 0 0 1px #fff}
.room.cmp .cap{margin-top:16px;padding:0 6px}
.room.cmp .cap b{font-size:20px}
.room.cmp .cap span{font-size:11px;margin-top:6px;letter-spacing:.18em}
.room.cmp .mark{top:12px;font-size:11px}
.room.cmp .folio{bottom:12px;font-size:14px}
.room.cmp .title-pg{padding:0 8%}
.room.cmp .title-pg .small{font-size:max(2em,12px)}
.room.cmp .title-pg h2{font-size:max(5.6em,28px)}
.room.cmp .title-pg h3{font-size:max(3.4em,17px)}
.room.cmp .title-pg p{font-size:max(2.9em,15px);line-height:1.5}
.room.cmp .fin{font-size:max(4em,22px)}
.room.cmp .hud{bottom:max(6px,env(safe-area-inset-bottom));pointer-events:none;left:0;right:0}
.room.cmp .dots{display:flex;justify-content:center;align-items:center;pointer-events:auto;height:46px}
.room.cmp .dots button{width:26px;height:46px;position:relative;touch-action:manipulation}
.room.cmp .dots button::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(200,164,92,.35);transition:all .25s}
.room.cmp .dots button[aria-current=true]::before{width:18px;margin-left:-9px;border-radius:3px;background:var(--gold)}
.room.cmp .ind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
.room.cmp .edge{top:auto;bottom:max(6px,env(safe-area-inset-bottom));margin:0;width:48px;height:46px;opacity:.8;transition:opacity .25s}
.room.cmp .edge svg{width:24px;height:24px}
.room.cmp .edge-p{left:max(8px,env(safe-area-inset-left))}.room.cmp .edge-n{right:max(8px,env(safe-area-inset-right))}
.room.cmp .edge.off{opacity:.18!important;pointer-events:none}
.room.cmp:hover .edge:not([hidden]){opacity:.8}
.lb .edge{top:50%;bottom:auto;height:96px;margin-top:-48px}
.lb-top{padding-top:0;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.ib{touch-action:manipulation;width:48px;height:48px}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .room.cmp .photo-pg{padding:22px 8px 26px}
  .room.cmp .mat{width:min(100%,calc((var(--ph) - 96px) * var(--ar) + 16px))}
  .room.cmp .cap{margin-top:8px}.room.cmp .cap b{font-size:16px}.room.cmp .cap span{display:none}
  .room.cmp .mark{top:6px}.room.cmp .folio{bottom:6px;font-size:12px}
  .room.cmp .hud{bottom:max(2px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.leaf,.book{transition-duration:.01s!important}.leaf.turning .shade,.cv .open,.book.intro{animation:none!important}}