/* =========================================================
   WASTRA — "A Wayang of Cloth in Six Acts"
   Ancient Balinese artisanal luxury: lontar paper, volcanic
   stone, matte gold leaf, soga, kraton maroon, indigo, patina.
   ========================================================= */
:root {
  --lontar: #ece1c8; --bone: #f2ead9; --ink: #17120e; --ink2: #2b231c; --volc: #14100d;
  --soga: #6b4423; --maroon: #6e1d1f; --oxblood: #5e1219; --indigo: #1f2b4d;
  --gold: #b8924f; --goldL: #e3c27e; --goldD: #8a6424; --teal: #2e5e5a; --saffron: #d9952f; --terra: #b5532b;
  --f-head: "Bodoni Moda", Georgia, serif; --f-quote: "Cormorant Garamond", Georgia, serif; --f-body: "Jost", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--volc); color: var(--bone); font-family: var(--f-body); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
img { display: block; max-width: 100%; }

/* gold foil type */
.foil { background: linear-gradient(100deg, #7c5418 0%, #c99a46 22%, #f6dc98 38%, #b8893b 52%, #f1d48e 68%, #8a6424 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 6s ease-in-out infinite alternate; }
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- lamp light (blencong) — shared by screens ---------- */
.kelir-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 12%, rgba(255, 246, 222, .95), rgba(247, 201, 120, .55) 38%, rgba(160, 90, 35, .1) 75%); animation: flicker 3.2s infinite; pointer-events: none; }
.blencong { position: absolute; top: 2.6%; left: 50%; width: 2.2%; aspect-ratio: .62; transform: translateX(-50%); border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 70%, #fff 0, #ffe2a0 35%, #ff9f3a 60%, rgba(255, 120, 30, 0) 75%); filter: blur(.4px); animation: flame .18s infinite alternate; pointer-events: none; z-index: 3; }
@keyframes flicker { 0%, 100% { opacity: 1; } 12% { opacity: .9; } 18% { opacity: .97; } 40% { opacity: .86; } 44% { opacity: .95; } 70% { opacity: .9; } }
@keyframes flame { from { transform: translateX(-50%) scale(1, 1); } to { transform: translateX(-52%) scale(.92, 1.08); } }

/* ---------- overture (loader) ---------- */
#overture { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 40%, #241812, #0b0806 70%); display: grid; place-content: center; justify-items: center; gap: 2vmin; transition: opacity 1s var(--ease), visibility 1s; }
.ready #overture { opacity: 0; visibility: hidden; }
.ov-kelir { position: relative; width: 34vmin; height: 44vmin; border-radius: 1vmin; overflow: hidden; border: .6vmin solid #3a2414;
  background: radial-gradient(ellipse at 50% 15%, #fff4d8, #f2c77e 40%, #a5602a 85%); box-shadow: 0 0 10vmin rgba(242, 170, 80, .35); }
.ov-kelir img { position: absolute; left: 50%; bottom: 3%; height: 82%; translate: -50% 0; filter: brightness(0); opacity: .9; animation: rise 1.6s var(--ease) both; }
@keyframes rise { from { transform: translateY(60%) scale(1.15); filter: brightness(0) blur(6px); } to { transform: none; filter: brightness(0) blur(.3px); } }
.ov-title { font: italic 400 10vmin/1 var(--f-head); margin: 2vmin 0 0; }
.ov-sub { font: italic 500 2.4vmin var(--f-quote); color: rgba(242, 234, 217, .6); margin: 0; letter-spacing: .04em; }

/* ---------- the stage (the kelir of the whole site) ---------- */
.fb-stage { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 56px 1fr 80px; grid-template-columns: minmax(0, 1fr); isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%, #3a2518 0%, #1c130e 52%, #0b0806 100%); }
.fb-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23e3c27e' stroke-width='1.2'%3E%3Cellipse cx='32' cy='14' rx='7' ry='12'/%3E%3Cellipse cx='32' cy='50' rx='7' ry='12'/%3E%3Cellipse cx='14' cy='32' rx='12' ry='7'/%3E%3Cellipse cx='50' cy='32' rx='12' ry='7'/%3E%3C/g%3E%3C/svg%3E"); }
.fb-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
.fb-glow { position: absolute; left: 50%; top: 50%; width: 82%; height: 74%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(242, 178, 92, .26), transparent 68%); z-index: -1; pointer-events: none; animation: flicker 4.5s infinite; }
.fb-stage:fullscreen { height: 100vh; }

.fb-topbar { display: flex; align-items: center; justify-content: center; padding: 0 20px; position: relative; z-index: 6; }
.fb-title { display: flex; align-items: center; gap: 10px; font: 400 16px var(--f-head); letter-spacing: .04em; color: rgba(242, 234, 217, .92); }
.fb-title svg { width: 18px; }
.fb-title em { background: linear-gradient(90deg, #b8893b, #f3d48b, #b8893b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fb-classic { position: absolute; right: 20px; font: 500 12px var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 234, 217, .45); text-decoration: none; }
.fb-classic:hover { color: var(--goldL); }
.fb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(242, 234, 217, .07); }
.fb-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--goldD), var(--goldL)); transition: width .6s var(--ease); }

.fb-viewport { position: relative; display: grid; place-items: center; padding: 6px 84px; min-height: 0; z-index: 2; }
.fb-holder { width: min(100%, calc((100dvh - 150px) * 1.414)); max-width: 1500px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); transition: opacity .5s, transform .9s cubic-bezier(.45, .05, .25, 1); }
.fb-holder.loading { opacity: 0; }
.fb-holder.at-cover { transform: translateX(-25%); }
.fb-holder.at-back { transform: translateX(25%); }

.fb-side { position: absolute; top: 50%; z-index: 7; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; border: 1px solid rgba(227, 194, 126, .3);
  background: rgba(20, 16, 13, .5); backdrop-filter: blur(8px); color: var(--goldL); display: grid; place-items: center; transition: .25s var(--ease); }
.fb-side svg, .fb-toolbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-side:hover:not(:disabled) { background: var(--goldL); color: var(--ink); transform: scale(1.08); }
.fb-side:disabled { opacity: .18; cursor: default; }
.fb-side-prev { left: 18px; } .fb-side-next { right: 18px; }
.fb-hint { position: absolute; right: 96px; bottom: 90px; z-index: 6; margin: 0; font: italic 500 18px var(--f-quote); color: var(--goldL); pointer-events: none; animation: hintBob 1.8s ease-in-out infinite; transition: opacity .6s; }
.fb-hint.gone { opacity: 0; }
@keyframes hintBob { 50% { transform: translate(4px, -4px); } }

.fb-toolbar { justify-self: center; align-self: center; z-index: 8; display: flex; gap: 10px; padding: 7px; border-radius: 999px; max-width: calc(100% - 16px);
  background: rgba(24, 18, 14, .8); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(227, 194, 126, .18); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }
.fb-group { display: flex; align-items: center; gap: 2px; }
.fb-group + .fb-group { border-left: 1px solid rgba(227, 194, 126, .16); padding-left: 10px; }
.fb-toolbar button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: rgba(242, 234, 217, .85); display: grid; place-items: center; transition: .2s; }
.fb-toolbar button:hover { background: rgba(227, 194, 126, .12); color: #fff; }
.fb-toolbar button.active { background: var(--goldL); color: var(--ink); }
.fb-toolbar button[data-act="sound"]:not(.on) { opacity: .45; }
.fb-count { min-width: 92px; text-align: center; font: 500 14px var(--f-body); font-variant-numeric: tabular-nums; color: var(--bone); letter-spacing: .06em; }

.fb-toc { visibility: hidden; position: absolute; top: 56px; bottom: 80px; left: 0; width: min(350px, 86vw); z-index: 9; background: rgba(20, 15, 12, .95); backdrop-filter: blur(16px);
  border-right: 1px solid rgba(227, 194, 126, .16); transform: translateX(-102%); transition: transform .5s var(--ease), visibility .5s; padding: 18px 20px; overflow: auto; }
.fb-toc.open { transform: none; visibility: visible; }
.fb-panel-head { display: flex; justify-content: space-between; align-items: center; font: italic 400 24px var(--f-head); color: var(--goldL); margin-bottom: 10px; }
.fb-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(227, 194, 126, .25); background: none; color: var(--bone); font-size: 20px; line-height: 1; }
.fb-toc ol { list-style: none; margin: 0; padding: 0; }
.fb-toc li button { width: 100%; display: flex; gap: 12px; align-items: baseline; text-align: left; border: 0; background: none; color: rgba(242, 234, 217, .82); padding: 11px 8px; border-radius: 10px; border-bottom: 1px dashed rgba(227, 194, 126, .14); font-size: 15px; }
.fb-toc li button:hover, .fb-toc li button.here { background: rgba(227, 194, 126, .12); color: #fff; }
.fb-toc li b { font: italic 400 17px var(--f-head); color: var(--goldL); min-width: 28px; }

.fb-thumbs { position: absolute; left: 0; right: 0; bottom: 80px; z-index: 9; background: rgba(14, 10, 8, .94); backdrop-filter: blur(14px); border-top: 1px solid rgba(227, 194, 126, .14);
  transform: translateY(40px); opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .35s, visibility .45s; padding: 14px 18px; }
.fb-thumbs.open { transform: none; opacity: 1; visibility: visible; }
.fb-thumbs-track { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(227, 194, 126, .3) transparent; }
.fb-th { flex: none; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(242, 234, 217, .6); font-size: 12px; }
.fb-th-spread { display: flex; border-radius: 3px; overflow: hidden; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .2s; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.fb-th:hover .fb-th-spread { transform: translateY(-3px); }
.fb-th.here .fb-th-spread { outline-color: var(--goldL); }
.fb-th.here { color: var(--goldL); }
.fb-mini { width: 64px; height: 90.5px; position: relative; overflow: hidden; background: var(--lontar); }
.fb-mini > .pg { position: absolute; top: 0; left: 0; width: 500px; height: 707px; transform: scale(.128); transform-origin: 0 0; pointer-events: none; }
.fb-toast { position: absolute; left: 50%; top: 66px; z-index: 12; transform: translate(-50%, -20px); opacity: 0; background: var(--goldL); color: var(--ink); font-weight: 500; font-size: 14px; padding: 9px 18px; border-radius: 999px; transition: .4s var(--ease); pointer-events: none; }
.fb-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* =========================================================
   PAGES
   ========================================================= */
.pg { position: relative; overflow: hidden; background: var(--lontar); color: var(--ink); container-type: inline-size; font-family: var(--f-body); }
/* lontar paper: palm-leaf fibres, grain, edge patina */
.pg.paper { background-color: var(--lontar);
  background-image:
    linear-gradient(118deg, rgba(255, 238, 200, .32), transparent 38%, transparent 62%, rgba(70, 38, 12, .14)),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 78, 34, .2) 100%),
    repeating-linear-gradient(0deg, rgba(110, 80, 40, .045) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* gutter shadow + gold thread binding stitched at the spine */
.pg.--left::after, .pg.--right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 6; pointer-events: none; }
.pg.--left::after { right: 0; background: linear-gradient(to left, rgba(40, 20, 8, .26), rgba(40, 20, 8, .06) 45%, transparent); }
.pg.--right::after { left: 0; background: linear-gradient(to right, rgba(40, 20, 8, .26), rgba(40, 20, 8, .06) 45%, transparent); }
.pg.paper.--left::before, .pg.paper.--right::before { content: ""; position: absolute; top: 6%; bottom: 6%; width: .45cqw; z-index: 7; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(138, 100, 36, .85) 0 2.6cqw, transparent 2.6cqw 5.2cqw); }
.pg.paper.--left::before { right: 1.4cqw; } .pg.paper.--right::before { left: 1.4cqw; }

.v2-in { position: absolute; inset: 0; padding: 12cqw 8cqw 10cqw; display: flex; flex-direction: column; }
/* frame: a fine rule plus a punched (tatah) dotted line, as cut into wayang leather */
.paper .v2-in::before { content: ""; position: absolute; inset: 3.4cqw; border: .15cqw solid rgba(23, 18, 14, .26); outline: .3cqw dotted rgba(138, 100, 36, .55); outline-offset: -1.1cqw; pointer-events: none; }
/* faint kawung watermark */
.paper .v2-in::after { content: ""; position: absolute; right: 5cqw; bottom: 6cqw; width: 30cqw; height: 30cqw; opacity: .06; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2317120e'%3E%3Cellipse cx='50' cy='24' rx='13' ry='22'/%3E%3Cellipse cx='50' cy='76' rx='13' ry='22'/%3E%3Cellipse cx='24' cy='50' rx='22' ry='13'/%3E%3Cellipse cx='76' cy='50' rx='22' ry='13'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.v2-in > * { position: relative; z-index: 1; }
.v2-run { position: absolute !important; top: 6cqw; left: 8cqw; right: 8cqw; display: flex; justify-content: space-between; font: 500 1.55cqw/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: rgba(23, 18, 14, .55); }
.pg.on .v2-hair { animation: drawRule 1.4s var(--ease) both; }
@keyframes drawRule { from { transform: scaleX(0); } }
.pg.on .plate-mat img { animation: kb 9s ease-out both; }
@keyframes kb { from { transform: scale(1.08); } }
.v2-hair { position: absolute !important; top: 8.6cqw; left: 8cqw; right: 8cqw; height: .15cqw; background: linear-gradient(90deg, transparent, var(--goldD), transparent); }
.pg-folio { position: absolute; bottom: 5cqw; left: 0; right: 0; text-align: center; font: italic 400 2.4cqw var(--f-head); color: rgba(23, 18, 14, .5); z-index: 2; }
.pg-folio::before, .pg-folio::after { content: "·"; margin: 0 1.6cqw; color: var(--goldD); }
.v2-kick { display: block; font: 600 1.7cqw/1.25 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 1.4cqw; }
.v2-h { font: 400 8.2cqw/1 var(--f-head); letter-spacing: -.01em; margin: 0 0 2.6cqw; color: var(--ink); }
.v2-h em { font-style: italic; color: var(--oxblood); }
.pg p { font-size: 2.42cqw; line-height: 1.58; margin: 0 0 2cqw; color: var(--ink2); font-weight: 400; }
.pg b, .pg strong { font-weight: 600; color: var(--ink); }
.dek { font: italic 500 3.2cqw/1.35 var(--f-quote) !important; color: rgba(23, 18, 14, .72) !important; }
.v2-drop::first-letter { float: left; font: 400 10.5cqw/.82 var(--f-head); margin: .7cqw 1.5cqw 0 0; color: var(--oxblood); }
.v2-quote { font: italic 500 3.8cqw/1.3 var(--f-quote); margin: 1cqw 0 2.4cqw; padding: 2cqw 0; border-block: .15cqw solid var(--goldD); text-align: center; color: var(--oxblood); }
.v2-cap { font-size: 1.85cqw !important; line-height: 1.42 !important; color: rgba(23, 18, 14, .72) !important; margin: 1.1cqw 0 0 !important; }
.v2-cap b { display: inline-block; font: 600 1.45cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oxblood); margin-right: 1.2cqw; }
.v2-note { font-size: 1.9cqw !important; color: rgba(23, 18, 14, .55) !important; font-style: italic; }
.v2-sign { margin-top: auto; display: grid; gap: .4cqw; }
.v2-sign span { font: 600 1.5cqw var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--goldD); }
.v2-sign b { font: italic 400 5cqw/1.1 var(--f-head); }
.v2-sign i { font-size: 2.1cqw; color: rgba(23, 18, 14, .6); }

/* plates (framed photographs) */
.plate { margin: 0; }
.plate-mat { background: #fbf7ee; padding: 1.1cqw; box-shadow: 0 .4cqw 1.4cqw rgba(60, 35, 10, .22), 0 0 0 .12cqw rgba(0, 0, 0, .06); height: var(--h, 24cqw); overflow: hidden; }
.plate-mat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.plate:hover .plate-mat img, figure:hover > img { transform: scale(1.06); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.duo .plate-mat { height: 19cqw; }
.duo.tall .plate-mat { height: 33cqw; }

/* ---------- covers ---------- */
.bk-cover, .bk-back { background: radial-gradient(ellipse at 50% 32%, #2c1e15, #120d0a 72%); color: var(--bone); }
.cv-kelir { position: absolute; left: 13cqw; right: 13cqw; top: 15cqw; height: 74cqw; border-radius: 1cqw; overflow: hidden; border: .7cqw solid #3a2414;
  background: radial-gradient(ellipse at 50% 15%, #fff1d2 0%, #eebf72 40%, #b06a2c 78%, #5c3014 100%); box-shadow: 0 0 9cqw rgba(242, 170, 80, .35), inset 0 0 6cqw rgba(70, 35, 10, .55); }
.cv-gunungan { position: absolute; left: 50%; bottom: 3%; height: 86%; translate: -50% 0; filter: brightness(0) blur(.25px); opacity: .92; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.cv-gunungan.planted { animation: none; }
.v2c-frame { position: absolute; inset: 4.2cqw; border: .3cqw solid #c99a46; z-index: 3; pointer-events: none; }
.v2c-frame::after { content: ""; position: absolute; inset: 1.1cqw; border: .3cqw dotted rgba(241, 212, 142, .55); }
.v2c-top, .v2c-bot { position: absolute; left: 9cqw; right: 9cqw; display: flex; justify-content: space-between; z-index: 4; font: 500 1.6cqw var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: #e8cf93; }
.v2c-top { top: 8.4cqw; } .v2c-bot { bottom: 8.4cqw; gap: 3cqw; }
.cv-title { position: absolute; left: 0; right: 0; bottom: 13cqw; text-align: center; z-index: 4; }
.v2c-kick { font: 500 1.8cqw var(--f-body) !important; letter-spacing: .4em !important; text-transform: uppercase; color: #e8cf93 !important; margin: 0 0 .6cqw !important; }
.bk-cover h1 { font: italic 400 19cqw/.86 var(--f-head); margin: 0; letter-spacing: -.02em; filter: drop-shadow(0 .6cqw 1.2cqw rgba(0, 0, 0, .7)); }
.v2c-orn { color: #e2bd6c; font-size: 2.6cqw; margin: .6cqw 0; }
.v2c-sub { font: italic 500 3.6cqw/1.3 var(--f-quote) !important; color: var(--bone) !important; margin: 0 12cqw !important; }
.bk-back .cv-kelir { top: 12cqw; height: 66cqw; }
.bk-back-txt { position: absolute; left: 0; right: 0; bottom: 11cqw; text-align: center; z-index: 4; }
.bk-back h2 { font: italic 400 11cqw/1 var(--f-head); margin: .6cqw 0 1.4cqw; }
.bk-back p { font: italic 500 3.4cqw var(--f-quote) !important; color: rgba(242, 234, 217, .82) !important; margin: 0 0 3cqw !important; }
.bk-back-txt span { font: 500 1.5cqw/1.8 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: #c9a764; }

/* ---------- act openers: a live shadow play ---------- */
.sh-open { background: radial-gradient(ellipse at 50% 30%, #2a1d14, #110c09 72%); color: var(--bone); }
.sh-top { position: absolute; top: 6.4cqw; left: 8cqw; right: 8cqw; display: flex; justify-content: space-between; font: 500 1.6cqw var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: #e8cf93; padding-bottom: 1.4cqw; border-bottom: .15cqw solid rgba(232, 207, 147, .4); z-index: 2; }
.kelir { position: absolute; left: 8cqw; right: 8cqw; top: 13cqw; height: 74cqw; padding: 0; border-radius: .8cqw; overflow: hidden; border: .8cqw solid #3a2414;
  background: radial-gradient(ellipse at 50% 15%, #fff1d2 0%, #eebf72 40%, #b06a2c 78%, #5c3014 100%); box-shadow: 0 0 10cqw rgba(242, 170, 80, .3), inset 0 0 6cqw rgba(70, 35, 10, .55); transition: background .9s; }
.kelir * { pointer-events: none; }
.sh-puppet { position: absolute; left: 50%; bottom: 9%; height: 76%; max-width: 92%; object-fit: contain; translate: -50% 0; filter: brightness(0) blur(.3px); opacity: .9;
  transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; transition: filter .9s var(--ease), opacity .9s; }
.sh-puppet.flip { transform: scaleX(-1); }
.sh-puppet.duo-l { left: 30%; height: 64%; max-width: 62%; }
.sh-puppet.duo-r { left: 70%; height: 64%; max-width: 62%; animation-delay: -3s; }
.pg.on .sh-puppet { animation: approach 1.6s var(--ease) both, sway 6s ease-in-out 1.6s infinite; }
@keyframes approach { from { scale: 1.3; filter: brightness(0) blur(7px); opacity: .55; } to { scale: 1; filter: brightness(0) blur(.3px); opacity: .9; } }
@keyframes sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
.kelir.turned { background: radial-gradient(ellipse at 50% 20%, #4a3020, #1c120c 80%); }
.kelir.turned .kelir-glow { opacity: .25; animation: none; }
.kelir.turned .sh-puppet { filter: drop-shadow(0 1cqw 1.6cqw rgba(0, 0, 0, .6)); opacity: 1; animation: sway 6s ease-in-out infinite; }
.kelir-hint { position: absolute; left: 0; right: 0; bottom: 2.4cqw; text-align: center; font: 500 1.45cqw var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: rgba(60, 30, 10, .6); }
.kelir.turned .kelir-hint { color: rgba(232, 207, 147, .55); }
.sh-txt { position: absolute; left: 8cqw; right: 8cqw; bottom: 8.5cqw; z-index: 2; }
.sh-roman { display: block; font: 400 15cqw/.8 var(--f-head); color: transparent; -webkit-text-stroke: .22cqw #e2bd6c; margin-bottom: 1.4cqw; }
.sh-txt h2 { font: italic 400 6.8cqw/1.02 var(--f-head); margin: 0 0 1.4cqw; color: #f5eee0; }
.sh-txt p { font: italic 500 3cqw/1.35 var(--f-quote) !important; color: rgba(242, 234, 217, .78) !important; margin: 0 !important; }

/* ---------- contents ---------- */
.v2-index { list-style: none; margin: 0; padding: 0; }
.v2-index li { display: grid; grid-template-columns: 11cqw 1fr auto; align-items: center; gap: 2.4cqw; padding: 2.2cqw 0; border-bottom: .15cqw solid rgba(23, 18, 14, .16); }
.v2-index .r { font: 400 6.2cqw/1 var(--f-head); color: transparent; -webkit-text-stroke: .18cqw var(--oxblood); }
.v2-index b { display: block; font: italic 400 4.3cqw/1.1 var(--f-head); }
.v2-index small { font: 500 1.7cqw var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(23, 18, 14, .55); }
.v2-index i { font: italic 400 3cqw var(--f-head); color: var(--goldD); }
.howto { margin-top: auto; border: .15cqw solid rgba(138, 100, 36, .5); padding: 2cqw 2.4cqw; display: grid; gap: .6cqw; background: rgba(255, 250, 238, .45); }
.howto b { font: 600 1.5cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--goldD); }
.howto span { font: italic 500 2.5cqw/1.4 var(--f-quote); color: var(--ink2); }

/* ---------- eras ---------- */
.era { display: grid; grid-template-columns: 1fr 31cqw; column-gap: 3.4cqw; align-items: start; padding-bottom: 2.6cqw; margin-bottom: 2.6cqw; border-bottom: .15cqw solid rgba(23, 18, 14, .14); }
.era:last-child { border: 0; margin: 0; }
.era > .era-meta, .era > h3, .era > p { grid-column: 1; }
.era > .plate, .era > .duo { grid-column: 2; grid-row: 1 / span 3; }
.era > .duo { grid-template-columns: 1fr; gap: 1.6cqw; }
.era > .duo .plate-mat { height: 15cqw; }
.era > .plate .plate-mat { height: var(--h, 30cqw); }
.era-meta { display: flex; align-items: baseline; gap: 2cqw; margin-bottom: .6cqw; }
.era-no { font: 400 7cqw/1 var(--f-head); color: transparent; -webkit-text-stroke: .18cqw var(--oxblood); }
.era-yr { font: 600 1.6cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--goldD); }
.era h3 { font: italic 400 3.9cqw/1.12 var(--f-head); margin: 0 0 1.2cqw; }
.era p { font-size: 2.3cqw; margin: 0; }
.era .v2-cap { font-size: 1.65cqw !important; }

/* regional forces */
.forces { list-style: none; counter-reset: f; margin: 0 0 3cqw; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; }
.forces li { counter-increment: f; font-size: 2.12cqw; line-height: 1.5; color: var(--ink2); border-top: .3cqw solid var(--goldD); padding-top: 1.4cqw; }
.forces li::before { content: counter(f, upper-roman); display: block; font: italic 400 4.4cqw/1 var(--f-head); color: var(--oxblood); margin-bottom: .6cqw; }
.forces b { display: block; font: italic 400 3cqw/1.15 var(--f-head); margin-bottom: .8cqw; }

/* ---------- atlas (interactive map) ---------- */
.atlas { position: relative; aspect-ratio: 694 / 290; border: .2cqw solid rgba(23, 18, 14, .5); flex: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #e4dcc4, #cfc3a2 90%); box-shadow: inset 0 0 3cqw rgba(60, 40, 20, .28); }
.atlas::before { content: ""; position: absolute; inset: 0; opacity: .35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 10 q5 -6 10 0 t10 0 t10 0 t10 0' fill='none' stroke='%237a8f88' stroke-width='1'/%3E%3C/svg%3E"); }
.atlas-land { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 .25cqw rgba(90, 55, 25, .9)) drop-shadow(0 .5cqw .8cqw rgba(60, 35, 10, .25)); pointer-events: none; user-select: none; }
.atlas-lbl { position: absolute; translate: -50% -50%; font: 600 1.25cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: rgba(80, 50, 22, .7); pointer-events: none; white-space: nowrap; }
.atlas-sea { position: absolute; left: 30%; top: 58%; font: italic 500 1.7cqw var(--f-quote); color: rgba(46, 94, 90, .75); pointer-events: none; }
.atlas-sea.s2 { left: 4%; top: 88%; }
.atlas-compass { position: absolute; right: 2.4cqw; top: 2.4cqw; width: 5cqw; height: 5cqw; border-radius: 50%; border: .15cqw solid var(--ink); background: radial-gradient(circle, #f2ead9 60%, #e3d6b6); display: grid; place-items: center; }
.atlas-compass::before { content: ""; position: absolute; width: .9cqw; height: 3.8cqw; background: linear-gradient(var(--maroon) 50%, var(--ink) 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.atlas-compass b { position: absolute; top: -2.6cqw; font: 400 1.6cqw var(--f-head); color: var(--ink); }
.pin { position: absolute; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%; border: .35cqw solid #f2ead9; background: var(--maroon); color: #f2ead9; display: grid; place-items: center; padding: 0; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); transition: transform .3s var(--ease), background .3s; z-index: 2; }
.pin span { font: 600 1.9cqw var(--f-body); pointer-events: none; }
.pin::after { content: ""; position: absolute; inset: -.35cqw; border-radius: 50%; border: .3cqw solid var(--maroon); animation: ring 2s infinite; pointer-events: none; }
.pin:hover { transform: scale(1.15); }
.pin.on { background: var(--goldL); color: var(--ink); transform: scale(1.2); }
.atlas-glow { position: absolute; width: 26cqw; height: 26cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, .75), rgba(255, 220, 150, 0) 65%); pointer-events: none; animation: flicker 3s infinite; transition: left .7s var(--ease), top .7s var(--ease); }
.pin.on::after { border-color: var(--goldL); }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
.atlas-detail { margin-top: 2.6cqw; flex: 1; min-height: 0; }
.ad-anim, .dr-anim { animation: settle .7s var(--ease); }
@keyframes settle { from { opacity: 0; transform: translateY(1.4cqw); } }
.ad-head { display: flex; gap: 2.4cqw; align-items: center; margin-bottom: 1.2cqw; }
.ad-no { font: 400 8cqw/1 var(--f-head); color: transparent; -webkit-text-stroke: .2cqw var(--oxblood); }
.ad-head h3 { font: italic 400 4.2cqw/1.05 var(--f-head); margin: 0; }
.ad-head em { font: 600 1.55cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--goldD); font-style: normal; }
.ad-lede { font: italic 500 2.75cqw/1.35 var(--f-quote) !important; color: var(--ink2) !important; margin-bottom: 1.4cqw !important; }
.ad-pts { margin: 0 0 1.8cqw; padding-left: 2.4cqw; }
.ad-pts li { font-size: 2.12cqw; line-height: 1.45; margin-bottom: .7cqw; color: var(--ink2); }
.ad-pts li::marker { color: var(--goldD); content: "✦  "; font-size: 1.6cqw; }
.ad-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; }
.ad-imgs figure { margin: 0; }
.ad-imgs img { width: 100%; height: 17cqw; object-fit: cover; background: #fbf7ee; padding: .8cqw; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .2); }
.ad-imgs figcaption { font: 500 1.5cqw/1.3 var(--f-body); letter-spacing: .06em; color: rgba(23, 18, 14, .7); margin-top: .7cqw; }
.ad-legacy { margin: 1.8cqw 0 0 !important; font-size: 2.1cqw !important; border-left: .5cqw solid var(--goldD); padding-left: 1.6cqw; }
.ad-legacy b { font: 600 1.5cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oxblood); margin-right: 1.2cqw; }

/* ---------- costume figure ---------- */
.dress-wrap { flex: 1; display: flex; min-height: 0; }
.dr-anim { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dr-head h3 { font: italic 400 5.2cqw/1.05 var(--f-head); margin: 0 0 2.4cqw; }
.dr-grid { display: grid; grid-template-columns: 47cqw 1fr; gap: 3.4cqw; flex: 1; min-height: 0; }
.dr-arch { position: relative; border-radius: 30cqw 30cqw 1cqw 1cqw; overflow: hidden; border: .9cqw solid var(--maroon); outline: .25cqw solid var(--goldL); outline-offset: -1.8cqw; background: #2a1d14; min-height: 0; }
.dr-place { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(.9) brightness(.85); }
.dr-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 10, .15), rgba(20, 14, 10, .55)); }
.dr-fig { position: absolute; left: 50%; bottom: 2cqw; height: 88%; translate: -50% 0; filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .5)); }
.dr-swap { animation: pop .7s var(--ease); transform-origin: 150px 260px; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.dr-head-g { animation: nod 4s ease-in-out infinite; transform-origin: 150px 100px; }
@keyframes nod { 50% { transform: rotate(2.5deg); } }
.dr-tax dl { margin: 0; }
.dr-tax dt { font: 600 1.5cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--goldD); margin-top: 2cqw; }
.dr-tax dt:first-child { margin-top: 0; }
.dr-tax dd { margin: .5cqw 0 0; font: italic 400 3cqw/1.2 var(--f-head); color: var(--ink); padding-bottom: 1.4cqw; border-bottom: .15cqw solid rgba(23, 18, 14, .14); }
.dr-pal { display: flex; align-items: center; gap: 1cqw; margin-top: 2.4cqw; font: 600 1.5cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--goldD); }
.dr-pal i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: .35cqw solid #fbf7ee; box-shadow: 0 0 0 .15cqw rgba(0, 0, 0, .2); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-top: 2.6cqw; }
.dr-chips button { border: .18cqw solid rgba(23, 18, 14, .5); background: rgba(255, 250, 238, .5); border-radius: 99cqw; padding: 1cqw 2cqw; font: 500 1.75cqw var(--f-body); color: var(--ink); transition: .25s; }
.dr-chips button b { font: italic 400 2cqw var(--f-head); color: var(--oxblood); margin-right: .8cqw; }
.dr-chips button:hover { background: #fff8e8; }
.dr-chips button.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.dr-chips button.on b { color: var(--goldL); }
.dr-chips button * { pointer-events: none; }

/* ---------- batik ---------- */
.batik-top { display: grid; grid-template-columns: 1fr 30cqw; gap: 3cqw; align-items: start; }
.batik-top p { font-size: 2.3cqw; }
.proc { margin: 0; }
.proc-cloth { aspect-ratio: 1; background: #fbf7ee; padding: 1cqw; box-shadow: 0 .4cqw 1.4cqw rgba(60, 35, 10, .22); }
.proc-cloth svg { width: 100%; height: 100%; display: block; }
.proc figcaption { margin-top: 1cqw; display: grid; }
.proc figcaption b { font: italic 400 2.8cqw var(--f-head); color: var(--oxblood); }
.proc figcaption span { font: 500 1.55cqw var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--goldD); }
.cloth .c-bg { fill: #f5ecd8; transition: fill 1s; }
.cloth .c-motif ellipse { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: all 1s; }
.cloth .c-dots circle { fill: transparent; transition: fill 1s; }
.cloth .c-crackle { opacity: 0; transition: opacity 1s; mix-blend-mode: multiply; }
.cloth.step-1 .c-motif ellipse { stroke: #8f8a80; stroke-dasharray: 4 4; stroke-width: 1.5; }
.cloth.step-2 .c-motif ellipse, .cloth.step-3 .c-motif ellipse { stroke: #e3b955; stroke-width: 3.5; }
.cloth.step-3 .c-dots circle, .cloth.step-4 .c-dots circle, .cloth.step-5 .c-dots circle, .cloth.step-6 .c-dots circle, .cloth.step-7 .c-dots circle { fill: #e3b955; }
.cloth.step-4 .c-motif ellipse { stroke: #e3b955; stroke-width: 3.5; fill: rgba(233, 196, 106, .55); }
.cloth.step-5 .c-bg, .cloth.step-6 .c-bg, .cloth.step-7 .c-bg { fill: #24356f; }
.cloth.step-5 .c-motif ellipse { stroke: #e3b955; stroke-width: 3.5; fill: rgba(233, 196, 106, .7); }
.cloth.step-6 .c-motif ellipse { stroke: #e3b955; stroke-width: 3.5; fill: #f1e6cc; }
.cloth.step-7 .c-motif ellipse { stroke: #e3b955; stroke-width: 3.5; fill: #8a5a2b; }
.cloth.step-8 .c-bg { fill: #1f2650; } .cloth.step-8 .c-motif ellipse { stroke: #f5ecd8; stroke-width: 3.5; fill: #8a5a2b; } .cloth.step-8 .c-dots circle { fill: #f5ecd8; } .cloth.step-8 .c-crackle { opacity: .55; }
.tc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin: 2.4cqw 0; }
.tc > div { border-top: .35cqw solid var(--goldD); padding-top: 1.2cqw; }
.tc b, .kt b { font: italic 400 3.4cqw var(--f-head); color: var(--ink); }
.tc span, .kt span { display: block; font: 600 1.45cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--oxblood); margin: .3cqw 0 .8cqw; }
.tc p, .kt p { font-size: 2.1cqw; margin: 0; }
.motifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; }
.motifs figure, .trio figure { margin: 0; }
.motifs img, .motifs svg { height: 13.5cqw !important; }
.motifs img, .motifs svg, .trio img { width: 100%; height: 19cqw; object-fit: cover; display: block; background: #fbf7ee; padding: .8cqw; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .2); }
.motifs b, .trio b { display: block; font: italic 400 2.8cqw var(--f-head); margin-top: .9cqw; }
.motifs span, .trio span { font-size: 1.7cqw; line-height: 1.35; color: rgba(23, 18, 14, .7); display: block; }
.unesco { margin: auto 0 1.4cqw !important; font-size: 2.1cqw !important; border: .15cqw solid var(--goldD); padding: 1.4cqw 2cqw; background: rgba(255, 250, 238, .5); }
.unesco b { font: italic 400 3cqw var(--f-head); color: var(--oxblood); margin-right: 1.4cqw; }

/* ---------- tenun ---------- */
.loom-row { display: grid; grid-template-columns: 1fr 30cqw; gap: 3cqw; align-items: start; }
.loom-row p { font-size: 2.3cqw; }
.loom-row .plate-mat { height: 25cqw; }
.icono { margin: 2.2cqw 0; }
.icono ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw 3cqw; }
.icono li { font-size: 2cqw; line-height: 1.4; color: var(--ink2); padding-bottom: .8cqw; border-bottom: .12cqw dotted rgba(138, 100, 36, .5); }
.icono li b { font: italic 400 2.6cqw var(--f-head); color: var(--oxblood); margin-right: 1cqw; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; margin-top: auto; }

/* ---------- flip-card cabinet ---------- */
.fcards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw 2.2cqw; flex: 1; min-height: 0; grid-auto-rows: 1fr; }
.fcard { perspective: 160cqw; border: 0; background: none; padding: 0; text-align: left; min-height: 0; }
.fcard * { pointer-events: none; }
.fc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.fcard.flipped .fc-in, .fcard:hover .fc-in { transform: rotateY(180deg); }
.fc-front, .fc-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: .15cqw solid rgba(23, 18, 14, .35); background: #fbf7ee; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .18); }
.fc-front { display: flex; align-items: center; }
.fc-front img { width: 42%; height: 100%; object-fit: cover; flex: none; }
.fc-front b { flex: 1; font: italic 400 3.3cqw/1.05 var(--f-head); padding: 0 2cqw; color: var(--ink); }
.fc-front b::after { content: "turn ↻"; display: block; font: 600 1.25cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--goldD); margin-top: .8cqw; font-style: normal; }
.fc-back { transform: rotateY(180deg); background: var(--ink); color: var(--bone); padding: 1.4cqw 2cqw; display: flex; flex-direction: column; justify-content: center; border-color: var(--goldD); }
.fc-back em { font: 600 1.3cqw var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--goldL); font-style: normal; }
.fc-back b { font: italic 400 2.9cqw/1.1 var(--f-head); color: #f5eee0; margin: .3cqw 0 .5cqw; }
.fc-back span { font-size: 1.75cqw; line-height: 1.38; color: rgba(242, 234, 217, .82); }

/* ---------- ikat ---------- */
.ikat-grid { display: grid; grid-template-columns: 34cqw 1fr; gap: 3cqw; margin: .6cqw 0 2.4cqw; align-items: start; }
.ikat-loom canvas { position: static !important; top: auto !important; left: auto !important; height: auto !important; width: 100% !important; aspect-ratio: 1; display: block; border: .9cqw solid #3a2414; box-shadow: 0 .4cqw 1.4cqw rgba(60, 35, 10, .3); background: #2a1a14; }
.seg-pg { display: flex; gap: .8cqw; margin-top: 1.2cqw; }
.seg-pg button { flex: 1; border: .18cqw solid rgba(23, 18, 14, .5); background: rgba(255, 250, 238, .5); border-radius: 99cqw; padding: .9cqw 0; font: 500 1.7cqw var(--f-body); color: var(--ink); transition: .2s; }
.seg-pg button.on { background: var(--ink); color: var(--bone); }
.ikat-defs { margin: 0; }
.ikat-defs dt { font: italic 400 3.2cqw var(--f-head); color: var(--oxblood); }
.ikat-defs dd { margin: .3cqw 0 1.6cqw; font-size: 2.05cqw; line-height: 1.45; color: var(--ink2); }

/* ---------- songket / kerancang / tekat ---------- */
.sk-top { display: grid; grid-template-columns: 31cqw 1fr; gap: 3cqw; align-items: start; }
.sk-top .plate-mat { height: 38cqw; }
.facts { margin: 0; display: grid; grid-template-columns: 11cqw 1fr; gap: .9cqw 1.6cqw; }
.facts dt { font: 600 1.45cqw var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--goldD); padding-top: .4cqw; }
.facts dd { margin: 0; font-size: 2cqw; line-height: 1.42; color: var(--ink2); }
.kt { display: grid; grid-template-columns: 1fr 22cqw 1fr; gap: 2.4cqw; margin: 2.6cqw 0; align-items: center; }
.kt img { width: 100%; height: 28cqw; object-fit: cover; background: #fbf7ee; padding: .8cqw; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .2); }
.matrix { width: 100%; border-collapse: collapse; font-size: 1.95cqw; margin-top: auto; }
.matrix th, .matrix td { padding: 1cqw 1.2cqw; text-align: left; border-bottom: .12cqw solid rgba(23, 18, 14, .2); vertical-align: top; }
.matrix thead th { font: italic 400 2.6cqw var(--f-head); color: var(--oxblood); border-bottom: .3cqw solid var(--goldD); }
.matrix tbody th { font: 600 1.4cqw var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--goldD); }
.matrix td { color: var(--ink2); }

/* ---------- dye bath ---------- */
.dye-pg { display: grid; grid-template-columns: 30cqw 1fr; gap: 3.4cqw; align-items: center; margin-bottom: 2.4cqw; }
.dye-vat-pg { position: relative; height: 34cqw; }
.dv-cloth { position: absolute; left: 50%; top: 0; width: 16cqw; height: 20cqw; margin-left: -8cqw; background: #f5ecd8; border: .15cqw solid rgba(0, 0, 0, .15); border-radius: .4cqw .4cqw 1.6cqw 1.6cqw; transition: transform .8s var(--ease), background 1.2s; z-index: 1;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px); }
.dv-cloth.dip { transform: translateY(10cqw); }
.dv-bath { position: absolute; left: 50%; bottom: 0; width: 28cqw; height: 15cqw; margin-left: -14cqw; border-radius: 0 0 14cqw 14cqw; background: #8a7a5a; border: .6cqw solid #3a2414; border-top-width: 1.4cqw; z-index: 2; transition: background .6s; box-shadow: inset 0 1cqw 0 rgba(255, 255, 255, .12); }
.dye-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.dye-btns button { display: flex; align-items: center; gap: 1.2cqw; border: .18cqw solid rgba(23, 18, 14, .35); background: rgba(255, 250, 238, .55); padding: 1.1cqw 1.4cqw; font: italic 400 2.6cqw var(--f-head); color: var(--ink); text-align: left; transition: .2s; }
.dye-btns button * { pointer-events: none; }
.dye-btns i { width: 3.8cqw; height: 3.8cqw; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--c); flex: none; }
.dye-btns small { display: block; font: 600 1.3cqw var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--goldD); font-style: normal; margin-left: auto; }
.dye-btns button.on { border-color: var(--ink); box-shadow: .4cqw .4cqw 0 var(--ink); }
.dye-note { grid-column: 1 / -1; font-size: 1.95cqw !important; margin: .4cqw 0 0 !important; min-height: 9cqw; }
.sci { margin: 0 0 2cqw; padding-left: 2.4cqw; }
.sci li { font-size: 2.05cqw; line-height: 1.45; margin-bottom: .8cqw; color: var(--ink2); }
.sci li::marker { color: var(--goldD); }
.gloss-pg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1cqw 2cqw; margin-top: auto; border-top: .3cqw solid var(--goldD); padding-top: 1.6cqw; }
.gloss-pg .v2-kick { grid-column: 1 / -1; margin: 0; }
.gloss-pg div { font-size: 1.75cqw; line-height: 1.35; color: var(--ink2); }
.gloss-pg div b { display: block; font: italic 400 2.5cqw var(--f-head); color: var(--oxblood); }

/* ---------- lenses ---------- */
.routes-pg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.routes-pg span { border: .15cqw solid rgba(138, 100, 36, .6); padding: 1.1cqw 1.2cqw; font-size: 1.75cqw; line-height: 1.3; color: var(--ink2); background: rgba(255, 250, 238, .45); }
.routes-pg b { display: block; font: italic 400 2.7cqw var(--f-head); color: var(--oxblood); }
.bars-pg { display: grid; gap: 1.3cqw; margin: .6cqw 0 1cqw; }
.bars-pg div { display: grid; grid-template-columns: 31cqw 1fr; align-items: center; gap: 2cqw; font: 500 1.9cqw var(--f-body); color: var(--ink2); }
.bars-pg i { display: block; height: 2.4cqw; width: var(--w); background: repeating-linear-gradient(-45deg, var(--maroon) 0 1.1cqw, #8a2a26 1.1cqw 2.2cqw); }
.flow { display: flex; align-items: center; gap: 1.2cqw; margin: .6cqw 0 1.8cqw; }
.flow span { flex: 1; text-align: center; font: 500 1.8cqw/1.25 var(--f-body); color: #fff; padding: 1.8cqw 1cqw; }
.flow em { font-style: normal; color: var(--goldD); font-size: 3cqw; }

/* ---------- garments ---------- */
.garm { display: grid; grid-template-columns: 10cqw 1fr; gap: 2.4cqw; align-items: center; padding: 1.1cqw 0; border-bottom: .12cqw dotted rgba(138, 100, 36, .55); }
.garm svg { width: 10cqw; height: 11cqw; }
.garm h4 { font: italic 400 3.3cqw/1.1 var(--f-head); margin: 0 0 .3cqw; color: var(--oxblood); }
.garm p { font-size: 2.1cqw; margin: 0; }
.peci { display: grid; grid-template-columns: 26cqw 1fr; gap: 2.6cqw; align-items: center; margin-top: auto; padding-top: 2cqw; }
.peci img { width: 100%; height: 17cqw; object-fit: cover; background: #fbf7ee; padding: .8cqw; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .2); }
.peci p { font-size: 2.1cqw; margin: 0; }

/* ---------- regalia & rites ---------- */
.reg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; margin-bottom: 2.4cqw; }
.reg2 figure { margin: 0; }
.reg2 .plate-mat { height: 36cqw; }
.reg2 figcaption, .rites figcaption { font-size: 1.85cqw; line-height: 1.4; color: var(--ink2); margin-top: 1cqw; }
.reg2 figcaption b, .rites figcaption b { display: block; font: italic 400 3cqw/1.1 var(--f-head); color: var(--ink); }
.reg2 figcaption em, .rites figcaption em { display: block; font: 600 1.35cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oxblood); font-style: normal; margin: .3cqw 0 .6cqw; }
.rites { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw 2.6cqw; flex: 1; min-height: 0; margin-bottom: 2cqw; }
.rites figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.rites img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: 50% 25%; background: #fbf7ee; padding: .9cqw; box-shadow: 0 .4cqw 1.2cqw rgba(60, 35, 10, .22); transition: transform 1.2s var(--ease); }

/* ---------- why a shadow play ---------- */
.why { display: grid; grid-template-columns: 1fr 22cqw; gap: 3cqw; margin: 2.4cqw 0 3cqw; flex: 1; min-height: 0; }
.why .facts { grid-template-columns: 13cqw 1fr; align-content: start; gap: 1.4cqw 1.6cqw; }
.why-fig { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.why-fig img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; background: #2a1d14; padding: .8cqw; box-shadow: 0 .4cqw 1.2cqw rgba(60, 35, 10, .25); }
.why-fig figcaption { font-size: 1.6cqw; line-height: 1.35; color: rgba(23, 18, 14, .7); margin-top: .8cqw; }
/* ---------- today ---------- */
.act-band { position: relative; height: 24cqw; border: .8cqw solid #3a2414; margin-bottom: 2.6cqw; overflow: hidden;
  background: radial-gradient(ellipse at 50% 10%, #fff1d2, #eebf72 45%, #b06a2c 90%); }
.act-band img { position: absolute; bottom: -2cqw; height: 26cqw; filter: brightness(0) blur(.3px); opacity: .88; animation: sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
.act-band img:first-child { left: 4cqw; } .act-band img.flip { right: 4cqw; transform: scaleX(-1); animation-delay: -3s; }
.act-band span { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font: 400 9cqw var(--f-head); color: transparent; -webkit-text-stroke: .2cqw #3a2414; }
.eco3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; flex: 1; min-height: 0; }
.eco3 > div { display: flex; flex-direction: column; }
.eco3 img { width: 100%; height: 36cqw; object-fit: cover; background: #fbf7ee; padding: .8cqw; box-shadow: 0 .3cqw 1cqw rgba(60, 35, 10, .2); margin-bottom: 1.2cqw; }
.eco3 b { font: italic 400 2.7cqw/1.15 var(--f-head); margin-bottom: .8cqw; }
.eco3 p { font-size: 1.95cqw; margin: 0; }
.v2-threads { list-style: none; counter-reset: th; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.v2-threads li { counter-increment: th; display: grid; grid-template-columns: 8cqw 1fr; font-size: 2.2cqw; line-height: 1.45; color: var(--ink2); }
.v2-threads li::before { content: counter(th, upper-roman); font: italic 400 4.2cqw/1 var(--f-head); color: var(--goldD); }
.v2-threads b { display: block; font: italic 400 3.2cqw/1.2 var(--f-head); color: var(--ink); }
.credits-pg { margin-top: auto !important; border-top: .3cqw solid var(--goldD); padding-top: 1.6cqw; font-size: 1.75cqw !important; line-height: 1.5 !important; color: rgba(23, 18, 14, .7) !important; }

/* ---------- print ---------- */
#printArea { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  body.printing { overflow: visible; background: #fff; }
  body.printing > *:not(#printArea):not(.defs) { display: none !important; }
  body.printing #printArea { display: block; }
  #printArea .print-page { width: 210mm; height: 297mm; position: relative; overflow: hidden; break-after: page; page-break-after: always; }
  #printArea .print-page > .pg { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .fb-viewport { padding: 6px 12px; }
  .fb-side { display: none; }
  .fb-hint { right: 16px; }
  .fb-holder { width: min(100%, calc((100dvh - 150px) * .707)); }
  .fb-classic { display: none; }
}
@media (max-width: 640px) {
  .fb-hide-sm { display: none !important; }
  .fb-toolbar { gap: 4px; padding: 5px; }
  .fb-toolbar button { width: 36px; height: 36px; }
  .fb-count { min-width: 64px; font-size: 12.5px; }
  .fb-group + .fb-group { padding-left: 4px; }
  .fb-title span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   v3 · shadow-play stage theme, chapter colours, organic images
   ========================================================= */
:root { --tornA: polygon(0.0% 1.0%,4.5% 0.5%,9.1% 2.1%,13.6% 0.2%,18.2% 1.7%,22.7% 1.2%,27.3% 0.2%,31.8% 1.6%,36.4% 0.1%,40.9% 1.4%,45.5% 0.2%,50.0% 0.3%,54.5% 1.4%,59.1% 2.6%,63.6% 0.4%,68.2% 0.7%,72.7% 2.0%,77.3% 3.0%,81.8% 1.8%,86.4% 1.3%,90.9% 3.1%,95.5% 0.1%,100.0% 2.7%,100.0% 4.5%,100.0% 9.1%,100.0% 13.6%,100.0% 18.2%,100.0% 22.7%,100.0% 27.3%,100.0% 31.8%,100.0% 36.4%,100.0% 40.9%,100.0% 45.5%,100.0% 50.0%,100.0% 54.5%,100.0% 59.1%,100.0% 63.6%,100.0% 68.2%,100.0% 72.7%,100.0% 77.3%,100.0% 81.8%,100.0% 86.4%,100.0% 90.9%,100.0% 95.5%,100.0% 99.2%,95.5% 98.2%,90.9% 98.3%,86.4% 97.2%,81.8% 97.7%,77.3% 99.1%,72.7% 96.9%,68.2% 99.6%,63.6% 98.7%,59.1% 97.6%,54.5% 99.5%,50.0% 98.4%,45.5% 99.9%,40.9% 97.9%,36.4% 97.6%,31.8% 98.2%,27.3% 97.2%,22.7% 99.0%,18.2% 97.8%,13.6% 98.1%,9.1% 98.1%,4.5% 98.5%,0.0% 97.3%,0.0% 95.5%,0.0% 90.9%,0.0% 86.4%,0.0% 81.8%,0.0% 77.3%,0.0% 72.7%,0.0% 68.2%,0.0% 63.6%,0.0% 59.1%,0.0% 54.5%,0.0% 50.0%,0.0% 45.5%,0.0% 40.9%,0.0% 36.4%,0.0% 31.8%,0.0% 27.3%,0.0% 22.7%,0.0% 18.2%,0.0% 13.6%,0.0% 9.1%,0.0% 4.5%); --tornB: polygon(0.0% 0.3%,4.5% 1.8%,9.1% 2.2%,13.6% 3.5%,18.2% 3.3%,22.7% 3.5%,27.3% 1.1%,31.8% 1.7%,36.4% 1.4%,40.9% 3.5%,45.5% 3.8%,50.0% 0.6%,54.5% 0.7%,59.1% 0.9%,63.6% 0.9%,68.2% 1.9%,72.7% 2.4%,77.3% 1.1%,81.8% 0.0%,86.4% 1.7%,90.9% 1.5%,95.5% 2.3%,100.0% 3.8%,100.0% 4.5%,100.0% 9.1%,100.0% 13.6%,100.0% 18.2%,100.0% 22.7%,100.0% 27.3%,100.0% 31.8%,100.0% 36.4%,100.0% 40.9%,100.0% 45.5%,100.0% 50.0%,100.0% 54.5%,100.0% 59.1%,100.0% 63.6%,100.0% 68.2%,100.0% 72.7%,100.0% 77.3%,100.0% 81.8%,100.0% 86.4%,100.0% 90.9%,100.0% 95.5%,100.0% 99.6%,95.5% 98.5%,90.9% 99.9%,86.4% 96.5%,81.8% 97.5%,77.3% 99.4%,72.7% 99.0%,68.2% 98.6%,63.6% 98.5%,59.1% 99.5%,54.5% 96.6%,50.0% 96.0%,45.5% 98.1%,40.9% 98.1%,36.4% 99.7%,31.8% 99.6%,27.3% 98.6%,22.7% 98.9%,18.2% 96.7%,13.6% 99.4%,9.1% 99.9%,4.5% 96.2%,0.0% 97.9%,0.0% 95.5%,0.0% 90.9%,0.0% 86.4%,0.0% 81.8%,0.0% 77.3%,0.0% 72.7%,0.0% 68.2%,0.0% 63.6%,0.0% 59.1%,0.0% 54.5%,0.0% 50.0%,0.0% 45.5%,0.0% 40.9%,0.0% 36.4%,0.0% 31.8%,0.0% 27.3%,0.0% 22.7%,0.0% 18.2%,0.0% 13.6%,0.0% 9.1%,0.0% 4.5%); --tornC: polygon(0.0% 0.6%,4.5% 1.3%,9.1% 0.9%,13.6% 0.1%,18.2% 0.1%,22.7% 0.7%,27.3% 0.7%,31.8% 1.8%,36.4% 2.5%,40.9% 1.2%,45.5% 2.4%,50.0% 2.6%,54.5% 2.5%,59.1% 0.9%,63.6% 0.6%,68.2% 0.6%,72.7% 0.5%,77.3% 0.5%,81.8% 1.6%,86.4% 2.3%,90.9% 2.2%,95.5% 1.2%,100.0% 1.7%,97.9% 4.5%,99.8% 9.1%,98.3% 13.6%,97.6% 18.2%,98.0% 22.7%,98.0% 27.3%,98.8% 31.8%,99.5% 36.4%,97.9% 40.9%,99.1% 45.5%,97.9% 50.0%,97.5% 54.5%,99.0% 59.1%,99.0% 63.6%,97.5% 68.2%,98.1% 72.7%,99.6% 77.3%,99.7% 81.8%,99.6% 86.4%,97.6% 90.9%,97.9% 95.5%,100.0% 99.6%,95.5% 97.9%,90.9% 97.5%,86.4% 98.3%,81.8% 99.1%,77.3% 98.6%,72.7% 99.7%,68.2% 100.0%,63.6% 97.5%,59.1% 98.3%,54.5% 98.6%,50.0% 97.6%,45.5% 98.9%,40.9% 97.7%,36.4% 97.9%,31.8% 99.5%,27.3% 99.3%,22.7% 99.2%,18.2% 99.4%,13.6% 98.5%,9.1% 99.3%,4.5% 98.9%,0.0% 99.7%,2.4% 95.5%,0.9% 90.9%,1.2% 86.4%,1.5% 81.8%,2.4% 77.3%,1.1% 72.7%,2.4% 68.2%,1.3% 63.6%,1.4% 59.1%,1.4% 54.5%,0.0% 50.0%,1.1% 45.5%,0.5% 40.9%,0.0% 36.4%,2.1% 31.8%,0.4% 27.3%,1.2% 22.7%,1.9% 18.2%,1.4% 13.6%,0.8% 9.1%,1.3% 4.5%); --tornV: polygon(97.2% 0.0%,96.1% 3.8%,99.5% 7.7%,97.2% 11.5%,98.8% 15.4%,98.6% 19.2%,96.1% 23.1%,97.5% 26.9%,97.2% 30.8%,96.2% 34.6%,95.4% 38.5%,97.8% 42.3%,96.9% 46.2%,97.5% 50.0%,97.4% 53.8%,96.5% 57.7%,97.7% 61.5%,97.3% 65.4%,97.6% 69.2%,95.3% 73.1%,96.5% 76.9%,95.6% 80.8%,95.3% 84.6%,98.7% 88.5%,97.2% 92.3%,95.3% 96.2%,95.8% 100.0%,0.7% 100.0%,0.6% 96.2%,2.2% 92.3%,0.4% 88.5%,1.2% 84.6%,0.4% 80.8%,3.3% 76.9%,3.9% 73.1%,4.5% 69.2%,0.8% 65.4%,3.6% 61.5%,3.3% 57.7%,0.7% 53.8%,4.4% 50.0%,4.8% 46.2%,1.1% 42.3%,4.8% 38.5%,2.0% 34.6%,2.4% 30.8%,4.9% 26.9%,4.2% 23.1%,0.8% 19.2%,2.2% 15.4%,2.6% 11.5%,1.7% 7.7%,1.0% 3.8%,1.6% 0.0%); }
.pg.ch0 { --lontar: #ece1c8; --oxblood: #6e1d1f; --band: #3a2414; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%233a2414'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23efe0bd' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M24 5 L29 10 L24 15 L19 10Z' fill='%23d9b36b'/%3E%3Ccircle cx='8' cy='10' r='1.3' fill='%23efe0bd'/%3E%3Ccircle cx='40' cy='10' r='1.3' fill='%23efe0bd'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%233a2414'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23efe0bd' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M24 5 L29 10 L24 15 L19 10Z' fill='%23d9b36b'/%3E%3Ccircle cx='8' cy='10' r='1.3' fill='%23efe0bd'/%3E%3Ccircle cx='40' cy='10' r='1.3' fill='%23efe0bd'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch1 { --lontar: #e9d4aa; --oxblood: #7a3e16; --band: #6b3f1d; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%236b3f1d'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f1e2c0' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M12 4 C15 7.5 17 10 17 13 L17 16 L7 16 L7 13 C7 10 9 7.5 12 4Z' fill='%23e3c27e'/%3E%3Cpath d='M12 7V15' stroke='%236b3f1d' stroke-width='.8'/%3E%3Ccircle cx='36' cy='6' r='1.9' fill='%23e3c27e'/%3E%3Cpath d='M36 8.2 L33 16 L39 16Z' fill='%23e3c27e'/%3E%3Cpath d='M36 10 L41.5 12.5 M36 10 L31 13' stroke='%23e3c27e' stroke-width='.8'/%3E%3Ccircle cx='24' cy='10' r='.9' fill='%23f1e2c0'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%236b3f1d'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f1e2c0' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M12 4 C15 7.5 17 10 17 13 L17 16 L7 16 L7 13 C7 10 9 7.5 12 4Z' fill='%23e3c27e'/%3E%3Cpath d='M12 7V15' stroke='%236b3f1d' stroke-width='.8'/%3E%3Ccircle cx='36' cy='6' r='1.9' fill='%23e3c27e'/%3E%3Cpath d='M36 8.2 L33 16 L39 16Z' fill='%23e3c27e'/%3E%3Cpath d='M36 10 L41.5 12.5 M36 10 L31 13' stroke='%23e3c27e' stroke-width='.8'/%3E%3Ccircle cx='24' cy='10' r='.9' fill='%23f1e2c0'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch2 { --lontar: #dcdccd; --oxblood: #22385e; --band: #22385e; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%2322385e'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23e6e2d2' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M24 4 L30 10 L24 16 L18 10Z' fill='%23d9b36b'/%3E%3Cpath d='M24 7 L27 10 L24 13 L21 10Z' fill='%2322385e'/%3E%3Cpath d='M6 10 L9 7 L12 10 L9 13Z M36 10 L39 7 L42 10 L39 13Z' fill='%23e6e2d2'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%2322385e'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23e6e2d2' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M24 4 L30 10 L24 16 L18 10Z' fill='%23d9b36b'/%3E%3Cpath d='M24 7 L27 10 L24 13 L21 10Z' fill='%2322385e'/%3E%3Cpath d='M6 10 L9 7 L12 10 L9 13Z M36 10 L39 7 L42 10 L39 13Z' fill='%23e6e2d2'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch3 { --lontar: #ecd4bb; --oxblood: #8e2f1c; --band: #8e2f1c; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%238e2f1c'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f3dfc6' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M0 16 L6 4 L12 16Z M24 16 L30 4 L36 16Z' fill='%23e8c27a'/%3E%3Cpath d='M12 4 L18 16 L24 4Z M36 4 L42 16 L48 4Z' fill='%23f3dfc6' opacity='.55'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%238e2f1c'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f3dfc6' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M0 16 L6 4 L12 16Z M24 16 L30 4 L36 16Z' fill='%23e8c27a'/%3E%3Cpath d='M12 4 L18 16 L24 4Z M36 4 L42 16 L48 4Z' fill='%23f3dfc6' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch4 { --lontar: #e0dbbd; --oxblood: #4d5a26; --band: #4d5a26; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%234d5a26'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23ece6c8' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M-2 16 C6 16 6 4 14 4 M10 16 C18 16 18 4 26 4 M22 16 C30 16 30 4 38 4 M34 16 C42 16 42 4 50 4' stroke='%23e3c27e' stroke-width='2.2' fill='none'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%234d5a26'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23ece6c8' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M-2 16 C6 16 6 4 14 4 M10 16 C18 16 18 4 26 4 M22 16 C30 16 30 4 38 4 M34 16 C42 16 42 4 50 4' stroke='%23e3c27e' stroke-width='2.2' fill='none'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch5 { --lontar: #e8d2c6; --oxblood: #5e1a2e; --band: #4e1426; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%234e1426'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f0dccf' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M12 10 L14 7 L12 4 L10 7Z M12 10 L15 12 L12 16 L9 12Z' fill='%23e7c06a'/%3E%3Cpath d='M24 3 L25.6 8.4 L31 10 L25.6 11.6 L24 17 L22.4 11.6 L17 10 L22.4 8.4Z' fill='%23e7c06a'/%3E%3Cpath d='M36 4 L42 10 L36 16 L30 10Z' fill='none' stroke='%23e7c06a' stroke-width='.9'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%234e1426'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23f0dccf' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M12 10 L14 7 L12 4 L10 7Z M12 10 L15 12 L12 16 L9 12Z' fill='%23e7c06a'/%3E%3Cpath d='M24 3 L25.6 8.4 L31 10 L25.6 11.6 L24 17 L22.4 11.6 L17 10 L22.4 8.4Z' fill='%23e7c06a'/%3E%3Cpath d='M36 4 L42 10 L36 16 L30 10Z' fill='none' stroke='%23e7c06a' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E"); }
.pg.ch6 { --lontar: #ddd5c5; --oxblood: #7a5a1e; --band: #2b2622; --bh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Crect width='48' height='20' fill='%232b2622'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23e8e0d0' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M2 14 C2 8 10 8 10 12 C10 6 20 6 20 12 C20 9 26 9 26 13' stroke='%23d9b36b' stroke-width='1.6' fill='none'/%3E%3Cpath d='M26 14 C26 8 34 8 34 12 C34 6 44 6 44 12 C44 9 50 9 50 13' stroke='%23e8e0d0' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); --bv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='48' viewBox='0 0 20 48'%3E%3Cg transform='translate%2820 0%29 rotate%2890%29'%3E%3Crect width='48' height='20' fill='%232b2622'/%3E%3Cpath d='M0 2.2H48M0 17.8H48' stroke='%23e8e0d0' stroke-width='.9' stroke-dasharray='2.4 1.6'/%3E%3Cpath d='M2 14 C2 8 10 8 10 12 C10 6 20 6 20 12 C20 9 26 9 26 13' stroke='%23d9b36b' stroke-width='1.6' fill='none'/%3E%3Cpath d='M26 14 C26 8 34 8 34 12 C34 6 44 6 44 12 C44 9 50 9 50 13' stroke='%23e8e0d0' stroke-width='1.6' fill='none'/%3E%3C/g%3E%3C/svg%3E"); }

/* the stage: carved fretwork, red scalloped valance, puppets in the wings */
.fb-stage { grid-template-rows: 74px 1fr 80px; background: radial-gradient(ellipse at 50% 46%, #4a2c16 0%, #22140b 50%, #0b0705 100%); }
.fb-stage::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23e3c27e' stroke-width='1'%3E%3Cpath d='M0 24H48M24 0V48M0 0L48 48M48 0L0 48'/%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/g%3E%3C/svg%3E"); opacity: .06; }
.fb-topbar { background: linear-gradient(#1c120b, #120b07); }
.fb-topbar::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23e3c27e' stroke-width='1'%3E%3Cpath d='M0 24H48M24 0V48M0 0L48 48M48 0L0 48'/%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 26px; opacity: .14; pointer-events: none; }
.fb-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpath d='M0 0H40V7 Q30 18 20 7 Q10 18 0 7Z' fill='%235e1219'/%3E%3Cpath d='M0 7 Q10 18 20 7 Q30 18 40 7' fill='none' stroke='%23c99a46' stroke-width='1.3'/%3E%3Ccircle cx='10' cy='13.2' r='1.3' fill='%23e3c27e'/%3E%3Ccircle cx='30' cy='13.2' r='1.3' fill='%23e3c27e'/%3E%3C/svg%3E") repeat-x; background-size: auto 18px; z-index: 5; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.fb-holder { width: min(100%, calc((100dvh - 172px) * 1.414)); }
.fb-toc { top: 74px; }
.fb-toast { top: 84px; }
.stage-pup { position: absolute; bottom: 86px; height: 44vh; z-index: 1; pointer-events: none; filter: brightness(0) blur(1.5px); opacity: .5; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite; }
.stage-pup.l { left: 1.5vw; } .stage-pup.r { right: 0; height: 36vh; transform: scaleX(-1); animation-delay: -4s; }
@media (max-width: 1300px) { .stage-pup { display: none; } }

/* chapter paper: colour + embroidered ribbon frame (replaces dotted frame and petal watermark) */
.pg.paper { background-color: var(--lontar); }
.paper .v2-in::after { display: none; }
.paper .v2-in::before { inset: 2.2cqw; border: 0; outline: 0;
  background: var(--bh) repeat-x left top / auto 3cqw, var(--bh) repeat-x left bottom / auto 3cqw, var(--bv) repeat-y left top / 3cqw auto, var(--bv) repeat-y right top / 3cqw auto;
  box-shadow: inset 0 0 0 3.2cqw transparent; }
.pg-folio { bottom: 5.8cqw; }
.v2-run { top: 6.4cqw; } .v2-hair { top: 8.8cqw; }
.v2-hair { background: linear-gradient(90deg, transparent, var(--oxblood), transparent); opacity: .6; }

/* cover & back: full bleed lamp light */
.cv-kelir, .bk-back .cv-kelir { inset: 0; left: 0; right: 0; top: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.cv-kelir::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18,10,6,.25), transparent 30%, transparent 46%, rgba(18,11,6,.94) 80%); }
.cv-gunungan { bottom: 36%; height: 50%; }
.bk-back .cv-gunungan { bottom: 40%; height: 46%; }

/* chapter covers: full-bleed photograph lit like a kelir */
.pg.sh-open { background: #120b07; }
.sh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.75) saturate(.85) contrast(1.08) brightness(.8); }
.sh-tint { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 34%, rgba(255,214,140,.55), rgba(255,170,80,.08) 46%, transparent 62%),
              linear-gradient(180deg, rgba(14,8,4,.55), color-mix(in srgb, var(--band) 30%, transparent) 40%, rgba(12,7,4,.95) 82%); mix-blend-mode: normal; }
.sh-valance { position: absolute; left: 0; right: 0; top: 0; height: 4.2cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpath d='M0 0H40V7 Q30 18 20 7 Q10 18 0 7Z' fill='%235e1219'/%3E%3Cpath d='M0 7 Q10 18 20 7 Q30 18 40 7' fill='none' stroke='%23c99a46' stroke-width='1.3'/%3E%3Ccircle cx='10' cy='13.2' r='1.3' fill='%23e3c27e'/%3E%3Ccircle cx='30' cy='13.2' r='1.3' fill='%23e3c27e'/%3E%3C/svg%3E") repeat-x; background-size: auto 4.2cqw; z-index: 2; }
.sh-top { top: 7cqw; }
.kelir { left: 0; right: 0; top: 11cqw; height: 78cqw; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.kelir .kelir-glow { background: radial-gradient(ellipse at 50% 30%, rgba(255,240,205,.5), rgba(255,190,110,.15) 45%, transparent 70%); }
.sh-puppet { bottom: 6%; height: 72%; z-index: 2; filter: brightness(0) blur(.25px); opacity: .95; }
.sh-cast { position: absolute; left: 50%; bottom: 8%; height: 72%; max-width: 92%; object-fit: contain; translate: -38% 0; filter: brightness(0) blur(1.4cqw); opacity: .4; z-index: 1; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; pointer-events: none; }
.sh-cast.flip { transform: scaleX(-1); }
.sh-cast.duo-l { left: 30%; height: 60%; translate: -30% 0; } .sh-cast.duo-r { left: 70%; height: 60%; translate: -30% 0; }
.kelir.turned { background: none; }
.kelir.turned .sh-cast { opacity: 0; }
.kelir-hint { color: rgba(242,226,190,.6); bottom: 1cqw; }
.sh-txt { bottom: 8cqw; }

/* timeline: torn-paper collage strip with alternating labels */
.tl { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 27cqw 1fr; grid-template-rows: 1fr 1fr; column-gap: 3cqw; margin-top: 1cqw; }
.tl-strip { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: 1fr 1fr; gap: .4cqw; padding: 1.4cqw 1.6cqw; background: color-mix(in srgb, var(--band) 14%, #f4ead4); clip-path: var(--tornV); filter: drop-shadow(0 .5cqw .8cqw rgba(50,25,8,.35)); }
.tl-grp { display: flex; flex-direction: column; gap: .5cqw; min-height: 0; }
.tl-grp img { flex: 1; min-height: 0; width: 100%; object-fit: cover; clip-path: var(--tornA); filter: sepia(.15); }
.tl-grp img + img { clip-path: var(--tornB); }
.tl-era { position: relative; align-self: center; }
.tl-era.L { grid-column: 1; text-align: right; } .tl-era.R { grid-column: 3; }
.tl-pin { position: absolute; top: 1.2cqw; width: 3cqw; height: .25cqw; background: var(--oxblood); }
.tl-pin::after { content: ""; position: absolute; top: -.8cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 .4cqw var(--lontar), 0 0 0 .6cqw var(--oxblood); }
.tl-era.L .tl-pin { right: -3.2cqw; } .tl-era.L .tl-pin::after { right: -1.2cqw; }
.tl-era.R .tl-pin { left: -3.2cqw; } .tl-era.R .tl-pin::after { left: -1.2cqw; }
.tl-yr { display: block; font: 600 1.5cqw var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); }
.tl-era h3 { font: italic 400 3.2cqw/1.1 var(--f-head); margin: .6cqw 0 1cqw; color: var(--ink); }
.tl-era p { font-size: 1.95cqw; line-height: 1.5; margin: 0; }
.tl-aside { align-self: center; } .tl-aside.L { grid-column: 1; text-align: right; } .tl-aside.R { grid-column: 3; }
.tl-num { display: block; font: 400 11cqw/1 var(--f-head); color: transparent; -webkit-text-stroke: .2cqw var(--oxblood); opacity: .55; margin-bottom: 1cqw; }
.tl-aside .v2-cap { font-size: 1.6cqw !important; }

/* organic image shapes: torn paper, arches, wayang-screen windows */
.plate, .ad-imgs figure, .trio figure, .motifs figure, .eco3 > div, .rites figure, .reg2 figure, .kt, .peci, .why-fig, .sk-top .plate { filter: drop-shadow(0 .6cqw .8cqw rgba(50,25,8,.32)); }
.plate-mat { background: none; padding: 0; box-shadow: none; clip-path: var(--tornA); }
.plate:nth-of-type(even) .plate-mat { clip-path: var(--tornB); }
.duo .plate + .plate .plate-mat, .reg2 figure .plate-mat { clip-path: none; border-radius: 40cqw 40cqw .6cqw .6cqw; }
.ad-imgs img, .trio img, .motifs img, .motifs svg, .kt img, .peci img, .why-fig img, .eco3 img { padding: 0 !important; background: none !important; box-shadow: none !important; clip-path: var(--tornA); }
.ad-imgs figure:nth-child(2) img, .trio figure:nth-child(2) img, .motifs figure:nth-child(2) img, .motifs figure:nth-child(2) svg, .eco3 > div:nth-child(2) img { clip-path: none; border-radius: 30cqw 30cqw .5cqw .5cqw; }
.ad-imgs figure:nth-child(3) img, .trio figure:nth-child(3) img, .motifs figure:nth-child(3) img, .eco3 > div:nth-child(3) img { clip-path: var(--tornC); }
.rites img { padding: 0 !important; background: none !important; box-shadow: none !important; clip-path: var(--tornB); }
.rites figure:nth-child(2) img, .rites figure:nth-child(3) img { clip-path: none; border-radius: 30cqw 30cqw .5cqw .5cqw; }
.dr-arch { outline-color: var(--goldL); }

/* colour from plants: cloths drying on a bamboo pole */
.jemur { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6cqw; padding: 3cqw 2cqw 0; height: 38cqw; margin-bottom: 1.4cqw; }
.bamboo { position: absolute; left: 0; right: 0; top: 2cqw; height: 1.8cqw; border-radius: 1cqw; z-index: 2;
  background: repeating-linear-gradient(90deg, transparent 0 13cqw, rgba(60,35,10,.55) 13cqw 13.5cqw), linear-gradient(#d6b46a, #8a6424 60%, #5c4018); box-shadow: 0 .5cqw .8cqw rgba(40,20,5,.35); }
.kain-j { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; animation-delay: calc(-1 * var(--d)); }
.kain-j * { pointer-events: none; }
.kj-cloth { width: 100%; flex: 1; background-color: var(--c); filter: drop-shadow(0 .6cqw .6cqw rgba(40,20,5,.3));
  background-image: repeating-linear-gradient(135deg, rgba(255,236,200,.16) 0 .5cqw, transparent .5cqw 2.2cqw), linear-gradient(90deg, rgba(0,0,0,.2), transparent 28%, transparent 70%, rgba(0,0,0,.22));
  clip-path: polygon(0 0,100% 0,100% 93%,92% 100%,84% 93%,76% 100%,68% 93%,60% 100%,52% 93%,44% 100%,36% 93%,28% 100%,20% 93%,12% 100%,4% 93%,0 100%); transition: transform .4s var(--ease); }
.kain-j b { font: italic 400 2.6cqw var(--f-head); margin-top: .8cqw; color: var(--ink); }
.kain-j:hover { animation-play-state: paused; }
.kain-j.on .kj-cloth { transform: scaleY(1.04); filter: brightness(1.15) drop-shadow(0 .8cqw 1cqw rgba(40,20,5,.4)); }
.kain-j.on b { color: var(--oxblood); }
.dye-note { min-height: 6cqw; }

.pg-folio { bottom: 6.6cqw !important; }
.paper .v2-in { padding-bottom: 11.5cqw; }

/* ---------- v4 · photographic covers ---------- */
.cv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bk-back .cv-photo { object-position: 50% 50%; }
.cv-fade { position: absolute; inset: 0; background: linear-gradient(rgba(14,8,4,.15), transparent 35%, transparent 55%, rgba(14,8,4,.9) 86%); }
.bk-back .cv-fade { background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(10,6,3,.55) 80%), linear-gradient(transparent 50%, rgba(10,6,3,.85) 88%); }
.bk-cover .cv-title { bottom: 9cqw; }
.bk-cover h1 { font-size: 11cqw; line-height: .95; margin: 0 6cqw; }
.cv-by { font: 500 1.7cqw var(--f-body) !important; letter-spacing: .36em !important; text-transform: uppercase; color: #e8cf93 !important; margin: 2.4cqw 0 0 !important; }
.bk-back-txt { bottom: 10cqw; }
.bk-back-txt span { margin-top: 0; letter-spacing: .36em; }

/* ---------- v4 · Section IV pages ---------- */
.sp-top { display: grid; grid-template-columns: 1fr 24cqw; gap: 3cqw; align-items: start; }
.sp-top p { font-size: 2.3cqw; margin: 0; }
.sp-fig { margin: 0; filter: drop-shadow(0 .6cqw .8cqw rgba(50,25,8,.32)); }
.sp-fig img { width: 100%; height: 26cqw; object-fit: cover; border-radius: 30cqw 30cqw .5cqw .5cqw; }
.sp-fig figcaption { font-size: 1.55cqw; color: rgba(23,18,14,.7); margin-top: .7cqw; }
.lifeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; padding-top: 3.4cqw; }
.lifeline::before { content: ""; position: absolute; left: 0; right: 0; top: 1.4cqw; height: .3cqw; background: repeating-linear-gradient(90deg, var(--oxblood) 0 1.6cqw, transparent 1.6cqw 2.4cqw); }
.ll-knot { position: absolute; top: .4cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--goldD); box-shadow: 0 0 0 .5cqw var(--lontar), 0 0 0 .75cqw var(--oxblood); }
.ll-st { position: relative; }
.ll-st em { display: block; font: 600 1.35cqw var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); font-style: normal; }
.ll-st b { display: block; font: italic 400 2.6cqw/1.1 var(--f-head); margin: .4cqw 0 .6cqw; }
.ll-st p { font-size: 1.7cqw !important; line-height: 1.4 !important; margin: 0 !important; }
.phil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw 2.4cqw; }
.phil div { border-top: .25cqw solid var(--oxblood); padding-top: .8cqw; font-size: 1.8cqw; color: var(--ink2); line-height: 1.35; }
.phil b { display: block; font: italic 400 2.8cqw var(--f-head); color: var(--ink); }
.routes-map svg { width: 100%; display: block; }
.routes-map .rt path { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.routes-map .rl text { font: 600 9px var(--f-body); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); }
.fusion { width: 100%; border-collapse: collapse; margin-top: 1.4cqw; }
.fusion th { text-align: left; font: 600 1.4cqw var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--goldD); padding-bottom: .8cqw; border-bottom: .3cqw solid var(--oxblood); }
.fusion td { padding: 1.1cqw .6cqw; border-bottom: .12cqw dotted rgba(23,18,14,.3); font-size: 2cqw; color: var(--ink2); vertical-align: middle; }
.fusion td.ar { font: 400 3cqw var(--f-head); color: var(--oxblood); text-align: center; width: 5cqw; }
.fusion td b { font: italic 400 2.7cqw var(--f-head); color: var(--ink); margin-right: 1.2cqw; }
.fusion td em { font: 600 1.35cqw var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--oxblood); font-style: normal; }
.hands { display: grid; grid-template-columns: 1fr 20cqw 1fr; gap: 2.4cqw; align-items: center; }
.hands figure { margin: 0; filter: drop-shadow(0 .6cqw .8cqw rgba(50,25,8,.32)); }
.hands figure img { width: 100%; height: 30cqw; object-fit: cover; border-radius: 30cqw 30cqw 30cqw 30cqw; }
.h-lab { display: block; font: italic 400 3.4cqw var(--f-head); color: var(--oxblood); border-bottom: .25cqw solid var(--goldD); padding-bottom: .6cqw; margin-bottom: 1cqw; }
.hands ul { margin: 0; padding-left: 2cqw; }
.hands li { font-size: 1.9cqw; line-height: 1.45; margin-bottom: .8cqw; color: var(--ink2); }
.hands li::marker { color: var(--goldD); }
.hands > div:last-child { text-align: left; }
.chain { display: flex; align-items: center; gap: 1cqw; margin: 1.6cqw 0; }
.chain span { flex: none; font: italic 400 2.5cqw var(--f-head); color: var(--ink); padding: .8cqw 1.6cqw; border: .2cqw solid var(--oxblood); border-radius: 99cqw; }
.chain i { flex: 1; height: .25cqw; background: repeating-linear-gradient(90deg, var(--oxblood) 0 1cqw, transparent 1cqw 1.8cqw); }
.loom-svg { width: 100%; display: block; }
.loom-svg .lbl path { stroke: var(--oxblood); stroke-width: 1; fill: none; }
.loom-svg .lbl text { font: italic 400 10px var(--f-head); fill: var(--ink); }
.loom-svg .lbl text.s { font: 500 6.4px var(--f-body); letter-spacing: .06em; fill: rgba(23,18,14,.7); font-style: normal; }
.methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; margin-top: 1.6cqw; }
.methods div { border-top: .3cqw solid var(--oxblood); padding-top: .9cqw; }
.methods b { display: block; font: italic 400 2.5cqw/1.1 var(--f-head); color: var(--ink); }
.methods span { display: block; font: 600 1.3cqw var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--goldD); margin: .4cqw 0; }
.methods p { font-size: 1.7cqw !important; line-height: 1.4 !important; margin: 0 !important; }

.ll-knot { top: -2.9cqw; }
.lifeline { padding-top: 3.8cqw; margin-bottom: 1cqw; }
.ll-st p { font-size: 1.85cqw !important; }
.phil div { font-size: 1.95cqw; }
.team { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4cqw; }
.team li { font: italic 400 4.6cqw/1.6 var(--f-head); color: var(--ink); border-bottom: .15cqw solid rgba(23,18,14,.18); }
.team li::before { content: "✦"; font: normal 1.8cqw var(--f-body); color: var(--oxblood); margin-right: 2cqw; vertical-align: middle; }

.team + .v2-kick { margin-top: 5cqw !important; }
.team + .v2-kick + .credits-pg { margin-top: 0 !important; }
.cv-by { letter-spacing: .2em !important; font-size: 1.5cqw !important; line-height: 1.7 !important; margin: 2.4cqw 6cqw 0 !important; }
.bk-back .bk-en { font: italic 500 3.6cqw var(--f-quote) !important; color: #e8cf93 !important; letter-spacing: .08em; margin: 0 !important; }