:root{color-scheme:light;--ink:#303e31;--accent:#87634c;--paper:#f6f1e4;--line:#dcdcca;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{background:#dce0d4;-webkit-text-size-adjust:100%}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,[role="tabpanel"]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--ink);color:var(--paper)}[hidden]{display:none!important}
.scene{position:fixed;inset:0;overflow:hidden;background:#dce0d4;z-index:0;transform:scale(1.045) translate(var(--scene-x,0px),var(--scene-y,0px));transition:transform 1.4s ease-out,filter .65s}.scene>img{width:100%;height:100%;object-fit:cover;object-position:50% 65%;display:block;animation:landscape-drift 45s ease-in-out infinite alternate}.veil{position:absolute;inset:0;background:linear-gradient(180deg,#f4f2e638,#f4f2e61a 40%,transparent 62%,#0f1c119e 100%)}.page{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;padding:32px 4.7vw 24px;pointer-events:none}.page a,.page button{pointer-events:auto}header{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:12px;letter-spacing:1.3px;line-height:1.8;text-shadow:0 1px 9px #fff9e5}.brand-logo{display:block;width:54px;height:54px;flex-shrink:0;object-fit:contain;border-radius:50%;box-shadow:0 0 0 1px #ffffff65,0 2px 8px #26362608}.location{font-size:12px;letter-spacing:1.3px;line-height:1.8;text-align:right;margin:0;text-shadow:0 1px 9px #fff9e5}.location span{display:block}main{text-align:center;align-self:center;padding:calc(clamp(35px,6vh,75px) + 18px) 0 90px;flex:1}h1{font:400 clamp(76px,8.8vw,138px)/.92 Georgia,'Times New Roman',serif;letter-spacing:-.058em;margin:0}h1>span{white-space:nowrap}h1 i{font-weight:400;font-size:.81em;color:var(--accent)}.period{color:var(--accent)}.description{font:400 20px/1.6 Georgia,serif;margin:20px 0 22px}
/* A small invitation, with tactile paper and an animated compass flower. */
.actions{display:flex;flex-direction:column;align-items:center;gap:10px}.discover{position:relative;display:flex;align-items:center;gap:14px;min-height:58px;text-decoration:none;padding:8px 17px 8px 9px;border:1px solid #fffaf1bd;border-radius:100px;background:#f6f1e4;color:#344333;box-shadow:0 3px 0 #b3b89e,0 8px 28px #14291218;font-size:14px;letter-spacing:.05px;transition:transform .35s var(--ease),box-shadow .35s,background .3s;isolation:isolate}.discover::after{content:"";position:absolute;inset:-5px;border:1px solid #fff7e554;border-radius:inherit;pointer-events:none;transition:inset .35s,opacity .35s}.button-flower{display:grid;place-items:center;width:39px;height:39px;flex-shrink:0;border-radius:50%;background:#dce2cf;color:#526144;font:29px/1 Georgia,serif;transition:transform .8s var(--ease),background .3s}.button-arrow{font:23px/1 Georgia,serif;margin-left:8px;transition:transform .4s var(--ease)}.discover:hover{transform:translateY(-3px);box-shadow:0 5px 0 #b3b89e,0 12px 32px #14291224;background:#fffaf0}.discover:hover .button-flower{transform:rotate(-8deg) scale(1.06);background:#d4dfc1}.discover:hover .button-arrow{transform:translate(2px,-2px)}.discover:hover::after{inset:-8px;opacity:.5}.discover:active{transform:translateY(2px);box-shadow:0 0 0 #b3b89e,0 2px 8px #14291218}.hero-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:30px;background:#f4f0e2c9;color:#364332;backdrop-filter:blur(8px);text-decoration:none;font-size:12px;transition:background .2s,transform .3s}.hero-link>span:nth-child(2){text-decoration:underline;text-decoration-color:#7a856b80;text-underline-offset:4px}.hero-link:hover{background:#f6f1e4;transform:translateY(-1px)}
.birds{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}.bird{position:absolute;left:-80px;top:24%;width:35px;opacity:.68;animation:fly 33s linear infinite;animation-delay:-8s}.bird img{width:100%;height:auto;animation:wing 1.15s ease-in-out infinite}.bird-two{top:20%;width:24px;animation-duration:38s;animation-delay:-11s;opacity:.5}.bird-three{top:26%;width:19px;animation-duration:36s;animation-delay:-9s;opacity:.45}
/* The postcard opens and closes as a single object. */
dialog{border:0;padding:0;background:transparent;color:var(--ink);width:min(920px,calc(100% - 56px));max-width:none;max-height:calc(100svh - 56px);overflow:visible;outline:none}dialog::backdrop{background:#16261eb8;backdrop-filter:blur(7px);animation:backdrop-in .5s both}dialog.is-closing::backdrop{animation:backdrop-out .24s both}.postcard{position:relative;display:grid;grid-template-columns:.87fr 1fr;background:var(--paper);border-radius:16px;box-shadow:0 35px 110px #09170d70;overflow:auto;max-height:calc(100svh - 56px);transform-origin:50% 80%}dialog[open] .postcard{animation:postcard-in .68s var(--ease) both}dialog.is-closing .postcard{animation:postcard-out .24s ease-in both}.close-dialog{position:absolute;right:14px;top:14px;z-index:5;width:38px;height:38px;border:1px solid #c9cdbc;border-radius:50%;background:#faf7ed;color:var(--ink);display:grid;place-items:center;font-size:25px;line-height:1;transition:transform .3s,background .3s}.close-dialog:hover{transform:rotate(90deg);background:#e4e7d9}.postcard-view{position:relative;isolation:isolate;min-height:560px;overflow:hidden;background:#69755a}.story-content{padding:40px 32px 25px;display:flex;flex-direction:column}h2{font:400 34px/1.1 Georgia,serif;letter-spacing:-1.2px;margin:0 0 24px}h2 i{font-weight:400;color:var(--accent)}.story-tabs{display:flex;gap:3px;border-bottom:1px solid #d4d9c7;padding-bottom:0;margin-bottom:25px}.story-tabs button{position:relative;min-height:45px;padding:10px 10px 14px;border:0;background:none;color:#737b67;font-size:12px;white-space:nowrap;transition:color .3s}.story-tabs button span{font-size:9px;opacity:.8;margin-right:5px}.story-tabs button::after{content:"";position:absolute;bottom:-1px;height:2px;left:9px;right:9px;background:#55654a;transform:scaleX(0);transition:transform .35s var(--ease)}.story-tabs button[aria-selected="true"]{color:#2d412a}.story-tabs button[aria-selected="true"]::after{transform:scaleX(1)}.story-panels{flex:1;min-height:276px}.chapter-label{font-size:9px;letter-spacing:1.5px;color:#7a8269;margin:0 0 12px}h3{font:400 31px/1.15 Georgia,serif;letter-spacing:-.8px;margin:0 0 15px}h3 i{font-weight:400;color:#727d59}.story-panel>p:not(.chapter-label):not(.story-note){font-size:15px;line-height:1.75;margin:0;color:#626c58}.story-note{display:flex;align-items:flex-start;gap:9px;font:italic 16px/1.45 Georgia,serif;margin:20px 0 15px;color:#6c7356}.story-navigation{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d4d9c7;margin-top:23px;padding-top:17px}.story-count{font:22px Georgia,serif;color:#4c5d41}.story-count span{font:12px Arial,sans-serif;color:#8b937d;margin-left:4px}.next-story{border:0;background:none;color:#46573b;padding:8px 0 8px 10px;font-size:12px;display:flex;align-items:center;gap:12px}.next-story-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #bec8ad;border-radius:50%;font-size:18px;transition:background .2s,transform .2s}.next-story:hover .next-story-icon{background:#dde4ce;transform:translateX(3px)}body.story-open .scene{transform:scale(1.08);filter:saturate(.85)}body.story-open{overflow:hidden}.spark{position:fixed;pointer-events:none;z-index:10;color:#eee3b4;font:19px Georgia,serif;animation:spark-out .85s var(--ease) forwards}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes landscape-drift{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes fly{0%{transform:translate(-60px,25px) rotate(-7deg)}40%{transform:translate(48vw,-22px) rotate(3deg)}80%,100%{transform:translate(calc(100vw + 150px),-55px) rotate(-5deg)}}@keyframes wing{0%,100%{transform:scaleY(1) rotate(-4deg)}50%{transform:scaleY(.56) rotate(5deg)}}@keyframes postcard-in{from{opacity:0;transform:translateY(40px) rotate(-3deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes postcard-out{to{opacity:0;transform:translateY(24px) rotate(1.5deg) scale(.97)}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-out{to{opacity:0}}@keyframes spark-out{from{opacity:.8;transform:translate(0,0) scale(.5)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(90deg) scale(1.1)}}
@media(min-width:1600px){main{padding-top:8vh}}
@media(max-width:760px){.page{padding:25px 6vw 22px;min-height:max(690px,100svh)}.brand{font-size:10px;gap:10px;letter-spacing:.7px}.brand-logo{width:46px;height:46px}.location{font-size:10px;letter-spacing:.7px}main{padding-top:58px;padding-bottom:104px}h1{font-size:clamp(63px,15.5vw,108px);line-height:.98}.description{font-size:19px;margin:20px 0 24px}.discover{font-size:13px;min-height:54px;gap:11px;padding-right:15px}.button-flower{width:35px;height:35px;font-size:26px}.button-arrow{font-size:21px}.hero-link{font-size:12px}.scene>img{object-position:62% 65%}.veil{background:linear-gradient(180deg,#f4f2e63d,#f4f2e62e 43%,transparent 62%,#0f1c11b3 100%)}.bird{width:26px}.bird-two{width:20px}.bird-three{width:15px}dialog{width:calc(100% - 28px);max-height:calc(100svh - 28px)}.postcard{display:block;max-height:calc(100svh - 28px);border-radius:15px}.postcard-view{min-height:200px;height:200px}.close-dialog{position:absolute;right:11px;top:11px;background:#f6f1e4ed;width:36px;height:36px}.story-content{padding:25px 24px 20px}h2{font-size:29px;margin-bottom:14px}.story-tabs{margin-bottom:22px;gap:0;justify-content:space-between}.story-tabs button{font-size:12px;padding:9px 7px 13px}.story-tabs button span{font-size:8px}.story-panels{min-height:262px}h3{font-size:28px}.story-panel>p:not(.chapter-label):not(.story-note){font-size:14px}.story-note{font-size:15px}.chapter-label{font-size:8px;letter-spacing:1.2px}.story-navigation{margin-top:22px}.next-story{font-size:12px}}
@media(max-width:360px){.brand,.location{font-size:9px}.brand-logo{width:42px;height:42px}h1{font-size:60px}.story-content{padding:23px 18px}.discover{font-size:12px}.postcard-view{height:175px;min-height:175px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.birds{display:none}.scene{transform:none}.spark{display:none}}

/* Vector icons keep their exact shape on iOS, iPadOS, and desktop. */
.icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle;overflow:visible}
.button-flower .icon{width:25px;height:25px;stroke-width:1.8}
.button-arrow{display:flex;align-items:center}.button-arrow .icon{width:22px;height:22px}
.hero-link>.icon,.hero-link>span>.icon{width:17px;height:17px}
.close-dialog .icon{width:19px;height:19px}
.next-story-icon .icon{width:17px;height:17px}.next-story .icon-restart{display:none}
.next-story.is-restart .icon-next{display:none}.next-story.is-restart .icon-restart{display:block}
.spark .icon{width:19px;height:19px}
@media(max-width:760px){.button-flower .icon{width:23px;height:23px}}

/* The logo is an invitation to its own small story. */
.brand{position:relative;padding:0;border:0;background:none;color:inherit;text-align:left}
.brand-mark{position:relative;display:block;flex-shrink:0;border-radius:50%;transition:transform .4s var(--ease)}
.brand-mark::after{content:"";position:absolute;inset:-5px;border:1px solid #65784f70;border-radius:50%;opacity:0;transform:scale(.86);transition:opacity .3s,transform .5s var(--ease)}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:rotate(-7deg) scale(1.07)}
.brand:hover .brand-mark::after,.brand:focus-visible .brand-mark::after{opacity:1;transform:scale(1)}
.brand:active .brand-mark{transform:scale(.94)}
.brand-hint{position:absolute;left:0;top:calc(100% + 12px);display:flex;align-items:center;gap:7px;padding:7px 10px;background:#f6f1e4ed;border:1px solid #fffcf2ab;border-radius:20px;box-shadow:0 4px 12px #2435200e;font-size:10px;line-height:1.3;letter-spacing:.2px;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.brand-hint .icon{width:12px;height:12px}.brand:hover .brand-hint,.brand:focus-visible .brand-hint{opacity:1;transform:translateY(0)}
/* Filosofi logo: the logo is split into its four shapes. A shape, its corner label, and its reading light up together. */
.philosophy-dialog{width:min(980px,calc(100% - 32px));max-height:calc(100svh - 32px)}
.philosophy-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"stage head" "stage text";grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,52px);padding:clamp(28px,3.6vw,44px) clamp(26px,3.8vw,48px) clamp(24px,3vw,34px);overflow:auto;max-height:calc(100svh - 32px);border-radius:24px;background:var(--paper);box-shadow:0 35px 110px #09170d70,inset 0 0 0 10px var(--paper),inset 0 0 0 11px #c9cdb9;transform-origin:25% 15%}
.anatomy-head{grid-area:head;padding-right:40px}
.philosophy-eyebrow{font-size:9px;letter-spacing:2px;color:#5d6852;margin:2px 0 0}
.philosophy-card h2{font-size:clamp(36px,4vw,46px);letter-spacing:-1.5px;line-height:1.05;margin:8px 0 10px}
.anatomy-stage{grid-area:stage;position:relative;align-self:center;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto}
.anatomy-stage::before{content:"";position:absolute;inset:12.4%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,#fffdf7 60%,#fbf6e9 100%);box-shadow:0 0 0 7px #faf8ef,0 0 0 8px #dcd8c4,0 22px 50px #3a4e3024}
.anatomy-stage::after{content:"";position:absolute;inset:2%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--glow,#e4e8d2) 0,transparent 68%);opacity:.9;transition:opacity .7s}
.anatomy-stage:not([data-active="utuh"])::after{opacity:1}
.anatomy-stage[data-active="matahari"]{--glow:#f9dc9a}.anatomy-stage[data-active="gunung"]{--glow:#cddcc0}.anatomy-stage[data-active="huruf-p"]{--glow:#f0d6b4}.anatomy-stage[data-active="daun"]{--glow:#dfe8b0}
.logo-orbit{position:absolute;top:5%;left:5%;width:90%;height:90%;border:1px dashed #88987152;border-radius:50%;pointer-events:none;animation:logo-orbit 48s linear infinite}
.logo-orbit::after{content:"";position:absolute;top:13%;left:15%;width:7px;height:7px;background:#cea15a;border:2px solid var(--paper);border-radius:50%}
.orbit-two{top:1%;left:1%;width:98%;height:98%;border-style:solid;border-color:#88987122;animation-direction:reverse}.orbit-two::after{top:20%;left:9%;width:5px;height:5px;background:#879661;border:0}
.garden-spark{position:absolute;display:block;color:#a67d47;pointer-events:none;animation:spark-breathe 4s ease-in-out infinite}.garden-spark svg{display:block;width:100%;height:100%}.spark-one{left:1%;top:46%;width:20px;height:20px}.spark-two{right:2%;top:44%;width:13px;height:13px;animation-delay:-2s}
.anatomy-logo{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.part{cursor:pointer;transform-box:fill-box;transform-origin:50% 50%;transition:transform .55s var(--ease)}
.part-body{transform-box:fill-box}
.part-leaf .part-body{transform-origin:3% 98%}
.part-shape{transition:opacity .45s}
.p-base{fill:#fff;fill-opacity:0}
.p-fill{opacity:0;pointer-events:none;transition:opacity .5s}
.part-line{fill:none;stroke:var(--line-color,var(--accent));stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;pointer-events:none;transition:opacity .4s}
.sun-rays{fill:none;stroke:#f2b23d;stroke-width:13;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 50%;transition:opacity .5s}
.sun-glow{fill:#fcd04a;opacity:0;pointer-events:none;transition:opacity .6s}
.anatomy-stage:not([data-active="utuh"]) .part:not(.is-active) .part-shape{opacity:.13}
.anatomy-stage:not([data-active="utuh"]) .part:not(.is-active) .part-line{opacity:.8;stroke:#c6c8b6;stroke-width:3.5;stroke-dashoffset:0}
.anatomy-stage:not([data-active="utuh"]) .part.is-hover:not(.is-active) .part-shape{opacity:.42}
.part.is-active,.part.is-hover{transform:scale(1.035)}
.part-p.is-active,.part-p.is-hover{transform:none}
.part.is-active .part-line{opacity:1;animation:part-trace 1.6s var(--ease) both}
.part-p.is-active .p-fill{opacity:1}
.anatomy-stage[data-active="utuh"] .part-p.is-hover .p-fill{opacity:.75}
.part-sun{--line-color:#d47c1f}.part-mountain{--line-color:#1f4636}.part-p{--line-color:#b0773c}.part-leaf{--line-color:#4f6e1d}
.part-sun.is-active .sun-rays{opacity:1;animation:rays-turn 30s linear infinite}
.part-sun.is-active .sun-glow{opacity:.7;animation:sun-pulse 3.4s ease-in-out infinite}
.part-leaf.is-active .part-body{animation:leaf-sway 4.2s ease-in-out infinite}
.anatomy-leaders path{fill:none;stroke:#b8a487;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 10;transition:stroke .4s}
.anatomy-leaders circle{fill:#b8a487;transform-box:fill-box;transform-origin:50% 50%;transition:fill .4s}
.anatomy-leaders g{transition:opacity .4s}
.anatomy-stage[data-active="utuh"] .anatomy-leaders circle{animation:leader-ping 2.6s ease-in-out infinite}
.anatomy-leaders g:nth-child(2) circle{animation-delay:-.65s}.anatomy-leaders g:nth-child(3) circle{animation-delay:-1.3s}.anatomy-leaders g:nth-child(4) circle{animation-delay:-1.95s}
.anatomy-stage:not([data-active="utuh"]) .anatomy-leaders g:not(.is-active){opacity:.3}
.anatomy-leaders g.is-active path{stroke:var(--accent);stroke-dasharray:none}
.anatomy-leaders g.is-active circle{fill:var(--accent)}
.anatomy-label{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 13px 5px 6px;border:1px solid #d8cfbc;border-radius:999px;background:#fffbf2;color:var(--ink);font-size:12px;line-height:1;white-space:nowrap;box-shadow:0 6px 18px #2435200f;transition:background .3s,color .3s,border-color .3s,opacity .3s,transform .35s var(--ease)}
.anatomy-label-num{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--dot);color:var(--dot-ink,#fff);font:700 9px/1 Arial,Helvetica,sans-serif;letter-spacing:.3px}
.anatomy-label[data-part="matahari"]{--dot:#f0a03a;--dot-ink:#3b2608;right:0;top:4%}
.anatomy-label[data-part="gunung"]{--dot:#2f5a40;left:0;top:9%}
.anatomy-label[data-part="huruf-p"]{--dot:#855a2f;left:0;bottom:8%}
.anatomy-label[data-part="daun"]{--dot:#4f6a1f;right:0;bottom:8%}
.anatomy-label:hover,.anatomy-label.is-hover{border-color:#bda98c;transform:translateY(-2px)}
.anatomy-label[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fbf8ef}
.anatomy-stage:not([data-active="utuh"]) .anatomy-label[aria-pressed="false"]:not(:hover):not(:focus-visible):not(.is-hover){border-color:#e3ddce;background:#fbf8ef;color:#5d6852;box-shadow:none}
.leader-narrow{display:none}
.anatomy-tag{position:absolute;z-index:2;padding:5px 9px 4px;border-radius:999px;background:#fffbf2ee;box-shadow:0 4px 12px #24352018;font-size:10px;line-height:1;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none;transition:opacity .35s,transform .5s var(--ease)}
.anatomy-tag.is-letter{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:var(--accent);color:#fff;font:400 24px/1 Georgia,'Times New Roman',serif;letter-spacing:0;text-transform:none}
.anatomy-stage[data-active="gunung"] .anatomy-tag[data-for="gunung"],.anatomy-stage[data-active="huruf-p"] .anatomy-tag[data-for="huruf-p"]{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.3s}
.anatomy-text{grid-area:text;display:flex;flex-direction:column;min-width:0;margin-top:22px}
.anatomy-reading{position:relative;flex:1;min-height:270px;padding-top:22px;border-top:1px solid #d9dccb}
.makna-kicker{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#5d6852}
.makna-kicker b{font:400 15px/1 Georgia,'Times New Roman',serif;letter-spacing:0;color:var(--accent)}
.makna h3{margin:0 0 12px;font:400 clamp(26px,2.7vw,33px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.7px;color:var(--ink)}
.makna h3 i{color:var(--accent)}
.makna p{margin:0;font-size:14px;line-height:1.75;color:#5d6852}
.makna p+p{margin-top:10px}
.makna-quote{margin:16px 0 0;padding:12px 16px 13px;border-left:3px solid #e8b257;border-radius:0 14px 14px 0;background:#fbefd8}
.makna .makna-quote p{font:italic 19px/1.3 Georgia,'Times New Roman',serif;color:#74501f}
.makna-quote span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:#6f5d43}
.makna .makna-sprig{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;border:1px dashed #d8c5ad;border-radius:14px;font-size:13px;line-height:1.5}
.makna-sprig svg{flex:none;width:32px;height:30px;color:var(--accent)}
.makna-sprig i{font-family:Georgia,'Times New Roman',serif}
.anatomy-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #d9dccb}
.anatomy-prev,.anatomy-next{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:8px 16px;border:1px solid #c5ceb3;border-radius:30px;background:#e2e8d5;color:#3f5234;font-size:12px;white-space:nowrap;transition:background .25s,transform .25s}
.anatomy-prev{padding-left:8px;border-color:transparent;background:transparent;color:#5d6852}
.anatomy-prev[hidden]{visibility:hidden}
.anatomy-prev .icon,.anatomy-next .icon{width:16px;height:16px;transition:transform .25s}
.anatomy-next:hover{background:#d6e0c4;transform:translateY(-2px)}.anatomy-next:hover .icon{transform:translateX(3px)}
.anatomy-prev:hover{background:#ebeedf}.anatomy-prev:hover .icon{transform:translateX(-3px)}
.anatomy-dots{display:flex;gap:7px;margin:0;padding:0;list-style:none}
.anatomy-dots li{width:7px;height:7px;border-radius:4px;background:#d0d4c2;transition:background .3s,width .4s var(--ease)}
.anatomy-dots li.is-seen{background:#a4ac8e}
.anatomy-dots li.is-current{width:22px;background:var(--accent)}
dialog[open] .philosophy-card{animation:philosophy-in .65s var(--ease) both}dialog.is-closing .philosophy-card{animation:postcard-out .24s ease-in both}
@keyframes philosophy-in{from{opacity:0;transform:translateY(25px) rotate(-4deg) scale(.88)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes logo-orbit{to{transform:rotate(360deg)}}
@keyframes spark-breathe{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
@keyframes part-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rays-turn{to{transform:rotate(360deg)}}
@keyframes sun-pulse{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes leaf-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.5deg)}}
@keyframes leader-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.part.is-active .part-line{stroke-dashoffset:0}}
@media(max-width:760px){.philosophy-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "text";grid-template-rows:none;padding:30px 20px 22px}.anatomy-head{padding-right:44px}.philosophy-card h2{font-size:36px}.anatomy-stage{max-width:min(340px,100%);margin-top:10px}.anatomy-label[data-part="matahari"]{right:44px;top:0}.leader-wide{display:none}.leader-narrow{display:inline}.anatomy-tag{padding:4px 7px 3px;font-size:9px;letter-spacing:1.1px}.anatomy-tag.is-peak{left:47%!important;top:30%!important}.anatomy-label{min-height:30px;padding:4px 10px 4px 5px;gap:6px;font-size:11px}.anatomy-label-num{width:19px;height:19px}.anatomy-text{margin-top:14px}.anatomy-reading{min-height:0}.brand-hint{font-size:9px}}
@media(max-width:760px) and (min-height:600px){.anatomy-stage{position:sticky;top:0;z-index:4;max-width:min(340px,48svh);background:var(--paper)}}
@media(min-width:761px) and (max-width:900px){.anatomy-reading{min-height:300px}}
@media(max-width:400px){.anatomy-prev-label{display:none}.anatomy-prev{padding-right:8px}}
@media(prefers-reduced-motion:reduce){.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:none}}

/* A small idle hint, attached to the logo rather than covering the page. */
.brand.is-idle-hint .brand-hint{opacity:1;transform:translateY(0);pointer-events:auto;border-color:#c7cfb6;font-size:11px;padding:9px 12px;box-shadow:0 5px 16px #24352012}
.brand.is-idle-hint .brand-hint::before{content:"";position:absolute;left:22px;top:-5px;width:8px;height:8px;background:#f6f1e4;border-left:1px solid #c7cfb6;border-top:1px solid #c7cfb6;transform:rotate(45deg)}
.brand.is-idle-hint .brand-mark::after{opacity:1;transform:scale(1);animation:logo-invitation 1.8s ease-in-out 2}
.brand.is-idle-hint .brand-mark{animation:logo-knock 1.1s ease-in-out 2;transform-origin:50% 65%}
@keyframes logo-knock{0%,45%,100%{transform:rotate(0) translateY(0)}10%{transform:rotate(-6deg) translateY(-1px)}20%{transform:rotate(5deg) translateY(-1px)}30%{transform:rotate(-3deg)}40%{transform:rotate(2deg)}}
@keyframes logo-invitation{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.1);opacity:.85}}
@media(max-width:760px){.brand.is-idle-hint .brand-hint{top:calc(100% + 4px);font-size:10px;padding:8px 10px}.brand.is-idle-hint .brand-hint::before{left:18px}}

/* The same postcard, now carrying the team's own dated journal. */
.journal-view{display:flex;flex-direction:column;justify-content:center;gap:25px;padding:29px 25px;background:var(--paper);border-right:1px solid var(--line)}
.journal-postmark{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding-bottom:14px;border-bottom:1px dashed var(--line);font-size:8px;letter-spacing:1.4px;color:#71795f}
.journal-spread{margin:0;transform-origin:10% 50%}
.journal-collage img{display:block;width:100%;height:auto}
.journal-collage{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:7px;background:#faf7ed;border:1px solid var(--line);box-shadow:0 5px 16px #24352012;transform:rotate(1deg)}
.journal-collage img:first-child{grid-column:1/-1}.journal-collage img{align-self:center}
.journal-spread figcaption{display:flex;flex-direction:column;gap:9px;margin-top:27px;color:#626c58;font-size:11px;line-height:1.5}
.journal-spread figcaption .chapter-label{margin:0}.journal-photo-title{font:italic 43px/1.05 Georgia,serif;letter-spacing:-1.5px;color:var(--ink)}
.story-panel>p.journey-connection{position:relative;margin:22px 0 0;padding-left:18px;border-left:1px dashed #bec8ad;font-size:11px;line-height:1.6;color:#7a8269}
.journey-connection::before{content:"";position:absolute;left:-3px;top:5px;width:5px;height:5px;border-radius:50%;background:#87634c}
@media(max-width:760px){.journal-view{height:auto;min-height:0;padding:25px 25px 20px;gap:20px;border-right:0;border-bottom:1px solid var(--line)}.journal-postmark{padding-right:30px;font-size:7px;letter-spacing:1px}.journal-spread figcaption{margin-top:20px;gap:6px}.journal-photo-title{font-size:35px}.journal-collage{gap:6px}.story-panel>p.journey-connection{font-size:11px}}

/* Two separate photo prints with a small, deliberate overlap. */
.journal-collage-pair{grid-template-columns:1fr;gap:0;padding:8px 5px 13px;background:transparent;border:0;box-shadow:none;transform:none;isolation:isolate}
.journal-collage-pair img{position:relative;grid-column:1;align-self:start;border:6px solid #faf7ed;border-bottom-width:15px;box-shadow:0 0 0 1px #dcdcca,0 6px 16px #24352020}
.journal-collage-pair img:first-child{width:94%;justify-self:start;transform:rotate(-2deg);z-index:1}
.journal-collage-pair img+img{grid-column:1;width:76%;justify-self:end;margin-top:-26px;transform:rotate(3deg);z-index:2}
@media(max-width:760px){.journal-collage-pair{gap:0;padding:6px 5px 12px}.journal-collage-pair img{border-width:5px;border-bottom-width:12px}.journal-collage-pair img+img{margin-top:-22px}}

/* A photo dump: four or five loose prints, a little crooked and overlapping, like a handful dropped on the table. */
.journal-dump{grid-template-columns:1fr 1fr;gap:0;padding:6px 6px 14px;background:transparent;border:0;box-shadow:none;transform:none;isolation:isolate}
.journal-dump img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 35%;border:5px solid #faf7ed;border-bottom-width:12px;box-shadow:0 0 0 1px #dcdcca,0 6px 14px #24352022}
.journal-dump img:first-child{grid-column:auto}
.journal-dump img:nth-child(1){transform:rotate(-3deg);z-index:1}
.journal-dump img:nth-child(2){transform:translate(-8px,10px) rotate(2.5deg);z-index:2}
.journal-dump img:nth-child(3){transform:translate(6px,-4px) rotate(2deg);z-index:3}
.journal-dump img:nth-child(4){transform:translate(-4px,4px) rotate(-3deg);z-index:4}
.journal-dump img:nth-child(5){transform:translate(2px,-6px) rotate(1.5deg);z-index:5}
.journal-dump:not(:has(>:nth-child(4))) img:first-child{grid-column:1/-1;justify-self:center;width:84%;aspect-ratio:16/10;transform:rotate(-2deg);margin-bottom:-4px}
.journal-dump:has(>:nth-child(5)) img:first-child{grid-column:1/-1;justify-self:center;width:78%;aspect-ratio:16/10;transform:rotate(-2deg);margin-bottom:-4px}

/* A quiet way back, mirroring the next button. */
.story-navigation{gap:12px}.story-count{margin-right:auto;white-space:nowrap}
.previous-story{display:flex;align-items:center;flex-shrink:0;padding:8px 8px 8px 0;border:0;background:none;color:#46573b}
.previous-story-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #bec8ad;border-radius:50%;transition:background .2s,transform .2s}
.previous-story-icon .icon{width:17px;height:17px}
.previous-story:hover:not(:disabled) .previous-story-icon{background:#dde4ce;transform:translateX(-3px)}
.previous-story:disabled{opacity:.35;cursor:default}
.next-story{text-align:right}

/* The date tabs scroll sideways once there are more than fit; the chosen one always slides into view. */
.story-tabs{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.story-tabs::-webkit-scrollbar{display:none}
.story-tabs button{flex:none}
.story-tabs button::after{bottom:0}
@media(max-width:760px){.story-tabs button{padding-left:6px;padding-right:6px}.story-tabs button::after{left:6px;right:6px}}
@media(max-width:345px){.story-tabs button span{display:none}}

/* Journal photos open in a larger preview that grows out of the print and settles back into it. */
.journal-collage img{cursor:zoom-in}
.journal-collage img:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.photo-dialog{width:fit-content;max-width:calc(100% - 24px);max-height:none;color:var(--paper)}
.photo-dialog::backdrop{background:#0d1710e6}
.photo-dialog .close-dialog{position:fixed;top:16px;right:16px}
.photo-view{display:flex;flex-direction:column;align-items:center;margin:0;touch-action:pan-y pinch-zoom}
.photo-full{display:block;width:auto;height:auto;max-width:min(1100px,calc(100vw - 24px));max-height:calc(100svh - 176px);border:6px solid #faf7ed;border-bottom-width:15px;background:#faf7ed;box-shadow:0 24px 70px #00000073}
.photo-caption{display:flex;flex-direction:column;gap:6px;width:0;min-width:100%;margin-top:16px;text-align:center;font-size:12px;line-height:1.55;color:#e7e5d6}
.photo-date{font-size:9px;letter-spacing:1.5px;color:#b8bfa4}
.photo-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px}
.photo-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #faf7ed59;border-radius:50%;background:#faf7ed12;color:var(--paper);transition:background .2s,opacity .2s}
.photo-step .icon{width:18px;height:18px}
.photo-step:hover:not(:disabled){background:#faf7ed2b}
.photo-step:disabled{opacity:.3;cursor:default}
.photo-count{min-width:48px;text-align:center;font:18px Georgia,serif}
.photo-count span{margin-left:3px;font:11px Arial,sans-serif;color:#b8bfa4}
.photo-dialog[open] :is(.photo-caption,.photo-controls,.close-dialog){animation:photo-ui-in .35s .15s both}
.photo-dialog.is-closing :is(.photo-caption,.photo-controls,.close-dialog){animation:photo-ui-out .18s both}
@keyframes photo-ui-in{from{opacity:0}}
@keyframes photo-ui-out{to{opacity:0}}
@media(max-width:760px){.photo-full{border-width:5px;border-bottom-width:12px;max-height:calc(100svh - 190px)}.photo-dialog .close-dialog{top:12px;right:12px}}

/* Every visit opens like morning in Pakem: the mist lifts, the words arrive, the dot lands, and the sprig grows last. */
.scene::after{content:"";position:absolute;inset:0;background:#eeeade;opacity:0;pointer-events:none;animation:mist-lift 1.6s .05s cubic-bezier(.4,0,.2,1) backwards}
header{animation:intro-down .9s .15s var(--ease) backwards}
h1 .title-word,h1 .period{display:inline-block}
h1 .title-word{animation:word-in 1.1s .4s var(--ease) backwards}
h1 i.title-word{animation-name:ing-in;animation-delay:.62s}
h1 .title-line>span.title-word{animation-delay:.76s}
h1 .period{transform-origin:50% 90%;animation:dot-land .8s 1.2s var(--ease) backwards}
.description{animation:intro-up .9s 1.25s var(--ease) backwards}
.actions{animation:intro-up .9s 1.4s var(--ease) backwards}
.birds{animation:intro-fade 1.4s 1.1s ease-out backwards}
.scroll-cue{animation:intro-fade 1s 1.75s ease-out backwards}
@keyframes mist-lift{from{opacity:.94}}
@keyframes intro-down{from{opacity:0;transform:translateY(-10px)}}
@keyframes intro-up{from{opacity:0;transform:translateY(14px)}}
@keyframes intro-fade{from{opacity:0}}
@keyframes word-in{from{opacity:.01;transform:translateY(.3em);filter:blur(12px)}}
@keyframes ing-in{from{opacity:.01;transform:translateX(-.3em) rotate(-8deg);filter:blur(12px)}}
@keyframes dot-land{0%{opacity:0;transform:translateY(-1.1em) scale(.5)}55%{opacity:1;transform:translateY(.06em) scale(1.2,.85)}80%{transform:translateY(-.04em) scale(.95,1.05)}}

/* The official wordmark carries a brown sprig beside Tentrem. Its size and place are the logo's own, in em. */
h1 .title-line{margin-right:.043em}
.title-sprig{display:inline-block;width:.714em;height:.66em;margin-left:.223em;vertical-align:-.0435em;overflow:visible;color:var(--accent);transform-origin:1.9% 97.5%;animation:sprig-sway 7s 3.1s ease-in-out infinite}
.sprig-stem{transform-origin:5px 238px;animation:sprig-grow .75s 1.65s var(--ease) backwards}
.sprig-leaf{animation:leaf-unfurl .8s cubic-bezier(.34,1.56,.64,1) backwards}
.sprig-leaf-1{transform-origin:47.4px 204.5px;--fold:50deg;animation-delay:1.85s}
.sprig-leaf-4{transform-origin:101px 191.4px;--fold:-45deg;animation-delay:1.98s}
.sprig-leaf-2{transform-origin:111.4px 153.5px;--fold:40deg;animation-delay:2.08s}
.sprig-leaf-3{transform-origin:159.6px 122px;--fold:-20deg;animation-delay:2.2s}
@keyframes sprig-grow{from{transform:scale(0)}}
@keyframes leaf-unfurl{from{transform:rotate(var(--fold)) scale(0)}}
@keyframes sprig-sway{50%{transform:rotate(-2.5deg)}}

/* The opening hook. A small script in <head> (index.html) puts class "intro" on <html> before the first paint, "intro-dim" when the
   wait is longer than a moment, "intro-go" when its clock starts and "intro-hold" while the tab is hidden mid-film. It plays on every
   visit and cannot be skipped or sped up; without those classes none of this applies (no JS, crawlers, ?intro=0).
   The real h1 is pulled into focus at the middle of the screen while the vignette closes, holds for a beat, then rises to its own
   place while the vignette lifts and the rest of the hero arrives. The hero's ordinary opening above is only retimed, never renamed
   or removed, so releasing the class replays nothing. Whatever a new opening item does, give it a line in the retiming block below,
   and keep every end time under --i-total. All three clocks live in the next rule; the script reads --i-total from here. */
html.intro{--i-rise:1.6s;--i-land:2.3s;--i-total:3.5s;--i-drag:-14px}
/* The page stays at the top until the film ends: the script holds touch, the wheel and the scrolling keys. Touch screens are also
   locked here (their scrollbars float, so nothing moves when it is lifted); a desktop keeps its scrollbar, and so its width. */
html.intro{overscroll-behavior:none;scroll-behavior:auto}
@media(pointer:coarse){html.intro{overflow:hidden}}
/* While the script waits for the landscape and the page scripts the ordinary opening is held at its first frame. */
html.intro:not(.intro-go) :is(header,.birds,.title-word,.period,.title-sprig,.sprig-stem,.sprig-leaf,.description,.countdown,.actions,.hk-story,.scroll-cue,.cue-leaf,.slope-layer),html.intro:not(.intro-go) .scene::after{animation-play-state:paused}
html.intro:not(.intro-go) main>h1{opacity:.01}
/* A wait longer than a moment (intro-dim) shows the film's first frame: the title faint and soft at the middle, where the film then
   takes it from (intro-focus-dim), under the closed vignette. The script sets --ix and --iy before it adds the class. */
html.intro-dim:not(.intro-go) :is(.title-word){animation-play-state:running}
html.intro-dim:not(.intro-go) main>h1{position:relative;z-index:1;opacity:.22;filter:blur(12px);scale:1.06;translate:calc(var(--ix,0px) + var(--i-drag)) var(--iy,0px);transition:opacity .6s cubic-bezier(.2,.6,.3,1)}
/* A tab hidden mid-film holds everything where it is, and the film goes on from there when the tab is seen again. */
:root.intro-go.intro-hold *,:root.intro-go.intro-hold *::before,:root.intro-go.intro-hold *::after,:root.intro-go.intro-hold::after{animation-play-state:paused!important}

/* The title: focus pull, a slow pull-back, a short drag, then the rise. All of them are transform, opacity or one small blur. */
html.intro-go main>h1{position:relative;z-index:1;will-change:translate,scale,opacity;animation:intro-focus 1.1s cubic-bezier(.22,.8,.3,1) backwards,intro-back 1.7s cubic-bezier(.25,.6,.25,1) backwards,intro-drag var(--i-rise) cubic-bezier(.22,.7,.3,1) both,intro-rise calc(var(--i-land) - var(--i-rise)) cubic-bezier(.7,0,.2,1) var(--i-rise) forwards}
html.intro-dim.intro-go main>h1{animation-name:intro-focus-dim,intro-back,intro-drag,intro-rise}
@keyframes intro-focus{from{opacity:.01;filter:blur(18px)}to{opacity:1;filter:blur(0)}}
@keyframes intro-focus-dim{from{opacity:.22;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes intro-back{from{scale:1.06}to{scale:1}}
@keyframes intro-drag{from{translate:calc(var(--ix,0px) + var(--i-drag)) var(--iy,0px)}to{translate:var(--ix,0px) var(--iy,0px)}}
@keyframes intro-rise{from{translate:var(--ix,0px) var(--iy,0px)}to{translate:0px 0px}}

/* The camera: the landscape starts a little closer and eases back to rest as the title lands. */
html.intro .scene{scale:1.05}
html.intro-go .scene{will-change:scale;animation:intro-camera calc(var(--i-land) + .5s) cubic-bezier(.25,.55,.3,1) both}
@keyframes intro-camera{from{scale:1.05}to{scale:1}}

/* The film vignette is the root's own ::after: no node is added to the page and nothing is left behind. It closes in at once,
   lifts while the title rises, and ends hidden. Until the clock starts it is transparent and catches taps; a long wait closes it in
   early (intro-dim), and the film then only lifts it. */
html.intro::after{content:"";position:fixed;inset:0;z-index:6;pointer-events:auto;opacity:0;background:radial-gradient(ellipse farthest-corner at 50% 47%,rgba(15,28,17,0) 46%,rgba(15,28,17,.12) 62%,rgba(15,28,17,.34) 80%,rgba(15,28,17,.6) 100%)}
html.intro-go::after{will-change:opacity;animation:intro-veil-in .45s cubic-bezier(.2,.6,.3,1) both,intro-veil-out calc(var(--i-land) - var(--i-rise) + .35s) cubic-bezier(.45,0,.3,1) var(--i-rise) forwards}
html.intro-dim::after{opacity:1;transition:opacity .6s cubic-bezier(.2,.6,.3,1)}
html.intro-dim.intro-go::after{animation:intro-veil-out calc(var(--i-land) - var(--i-rise) + .35s) cubic-bezier(.45,0,.3,1) var(--i-rise) forwards}
@keyframes intro-veil-in{from{opacity:0}to{opacity:1}}
@keyframes intro-veil-out{from{opacity:1}to{opacity:0;visibility:hidden}}
@media(min-width:761px){html.intro{--i-drag:-28px}html.intro::after{background:radial-gradient(ellipse farthest-corner at 50% 47%,rgba(15,28,17,0) 40%,rgba(15,28,17,.14) 58%,rgba(15,28,17,.4) 78%,rgba(15,28,17,.66) 100%)}}

/* Retiming: the ordinary opening, pushed back so the site begins as the title lands. The longer shorthands keep their second
   animation (.slope-back and .slope-mid scroll with the page, .hk-story nudges), hence the pairs. The mist keeps its own timing. */
html.intro header{animation-delay:calc(var(--i-rise) + .15s)}
html.intro h1 .title-word,html.intro h1 i.title-word,html.intro h1 .title-line>span.title-word{animation-delay:0s;animation-duration:.01s}
html.intro h1 .period{animation-delay:1.15s}
html.intro .sprig-stem{animation-delay:1.1s}
html.intro .sprig-leaf-1{animation-delay:1.25s}
html.intro .sprig-leaf-4{animation-delay:1.37s}
html.intro .sprig-leaf-2{animation-delay:1.47s}
html.intro .sprig-leaf-3{animation-delay:1.59s}
html.intro .birds{animation-delay:calc(var(--i-rise) + .1s)}
html.intro .slope-haze,html.intro .slope-back{animation-delay:calc(var(--i-land) - .3s),0s}
html.intro .slope-mid{animation-delay:calc(var(--i-land) - .22s),0s}
html.intro .slope-front{animation-delay:calc(var(--i-land) - .14s)}
html.intro .description{animation-delay:var(--i-land)}
html.intro .countdown{animation-delay:calc(var(--i-land) + .08s)}
html.intro .actions{animation-delay:calc(var(--i-land) + .16s)}
html.intro .hk-story{animation-delay:calc(var(--i-land) + .05s),5s}
html.intro .scroll-cue{animation-delay:calc(var(--i-land) + .25s);animation-duration:.8s}
html.intro .tip-ask{display:none}

/* Reduced motion still opens with the film, as fades only, on the same clock and just as unskippable: the title fades in at its own
   place under the vignette, then the rest of the hero fades in as the title would land. Nothing moves or zooms. The rule at the top of
   this file removes every other animation, hence !important here; the ordinary page has none, so releasing the class replays nothing. */
@media(prefers-reduced-motion:reduce){
  html.intro .scene{scale:none}
  html.intro:not(.intro-go) :is(header,.description,.countdown,.hk-make,.hk-post,.hk-social,.scroll-cue){opacity:.01}
  html.intro-dim:not(.intro-go) main>h1{filter:none;scale:none;translate:none}
  html.intro-go main>h1{animation:intro-calm 1.1s ease-out backwards!important}
  html.intro-dim.intro-go main>h1{animation-name:intro-calm-dim!important}
  html.intro-go header{animation:intro-calm .8s ease-out calc(var(--i-rise) + .15s) backwards!important}
  html.intro-go .description{animation:intro-calm .8s ease-out var(--i-land) backwards!important}
  html.intro-go .countdown{animation:intro-calm .8s ease-out calc(var(--i-land) + .08s) backwards!important}
  html.intro-go .hk-make{animation:intro-calm .8s ease-out calc(var(--i-land) + .16s) backwards!important}
  html.intro-go .hk-post{animation:intro-calm .8s ease-out calc(var(--i-land) + .23s) backwards!important}
  html.intro-go :is(.hk-social,.scroll-cue){animation:intro-calm .8s ease-out calc(var(--i-land) + .3s) backwards!important}
  html.intro-go::after{animation:intro-veil-in .45s ease-out both,intro-veil-out calc(var(--i-land) - var(--i-rise) + .35s) ease-in-out var(--i-rise) forwards!important}
  html.intro-dim.intro-go::after{animation:intro-veil-out calc(var(--i-land) - var(--i-rise) + .35s) ease-in-out var(--i-rise) forwards!important}
  html.intro-dim::after{transition:opacity .6s ease-out!important}
}
@keyframes intro-calm{from{opacity:.01}}
@keyframes intro-calm-dim{from{opacity:.22}}


/* A live countdown to deployment day, with the journey since the first meeting drawn underneath. */
.countdown{width:min(100%,392px);margin:0 auto 24px;padding:14px 20px 10px;border:1px solid #fffaf1bd;border-radius:20px;background:#f6f1e4e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #d4d8c5,0 10px 30px #14291216;animation:intro-up .9s 1.32s var(--ease) backwards}
.countdown-title{margin:0 0 10px;font-size:9px;line-height:1.4;letter-spacing:1.8px;text-transform:uppercase;color:#6c775d}
.countdown-live{position:relative;display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;vertical-align:middle;border-radius:50%;background:var(--accent)}
.countdown-live::after{content:"";position:absolute;inset:-4px;border:1px solid var(--accent);border-radius:50%;opacity:0;animation:live-ring 2.4s ease-out infinite}
.countdown-units{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.countdown-unit{display:flex;flex-direction:column;align-items:center;gap:2px}
.countdown-unit+.countdown-unit{border-left:1px solid var(--line)}
.countdown-value{display:block;height:1.15em;overflow:hidden;font:400 34px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.5px;color:var(--ink)}
.countdown-value>span{display:block}
.countdown-label{font-size:8px;letter-spacing:1.6px;text-transform:uppercase;color:#8b937d}
.countdown-message{margin:0 0 2px;font:italic 20px/1.35 Georgia,'Times New Roman',serif;color:var(--ink)}
/* After deployment the card counts the operational days, with a bar from the first day to the last. */
.countdown-ops-day{margin:0;font:400 34px/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.5px;color:var(--ink)}
.countdown-ops-of{font:italic 18px Georgia,'Times New Roman',serif;letter-spacing:0;color:#7a8269}
.countdown-ops-bar{position:relative;height:6px;margin:11px 4px 0;border-radius:6px;background:#dcdcca;overflow:hidden}
.countdown-ops-bar span{position:absolute;top:0;bottom:0;left:0;width:var(--done,0%);border-radius:6px;background:var(--accent)}
.countdown-ops-ends{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:7px 4px 3px;font-size:8px;letter-spacing:1.4px;text-transform:uppercase;color:#8b937d}
.countdown-ops-left{font-weight:700;color:var(--accent)}
.countdown[data-state="done"] .countdown-live{display:none}
/* From the first operational day the card is the way down to Kontribusi kami: the whole card is the link, with a small arrow in
   its corner (script.js glides there like the menu does). */
.countdown{position:relative}
.countdown-title{padding-inline:30px}
.countdown-link{color:var(--accent);-webkit-tap-highlight-color:transparent}
.countdown-link::before{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
.countdown-link svg{position:absolute;top:10px;right:10px;width:28px;height:28px;padding:6px;border-radius:50%;background:#87634c17;transition:background .3s,color .3s,translate .35s var(--ease)}
.countdown[data-state="counting"] .countdown-link{display:none}
.countdown[data-state="counting"] .countdown-title{padding-inline:0}
@media(min-width:560px) and (min-aspect-ratio:5/4){.js .countdown-title{padding-left:0}} /* the poster card reads from the left */
.countdown-link:focus-visible{outline:none}
.countdown:has(.countdown-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.countdown:has(.countdown-link:active){scale:.985}
.countdown{transition:scale .2s ease,translate .35s var(--ease),box-shadow .35s var(--ease)}
@media(hover:hover) and (pointer:fine){.countdown:has(.countdown-link:hover){translate:0 -3px;box-shadow:0 1px 0 #d4d8c5,0 18px 34px #14291224}.countdown-link:hover svg{background:var(--accent);color:#fbf8ef;translate:0 2px}}
@media(max-width:760px){.countdown-ops-day{font-size:30px}.countdown-ops-of{font-size:16px}}

@keyframes live-ring{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}
@media(max-width:760px){.countdown{width:min(100%,340px);margin-bottom:22px;padding:13px 14px 9px;border-radius:18px}.countdown-title{letter-spacing:1.3px}.countdown-value{font-size:29px}.countdown-message{font-size:18px}}
@media(max-width:420px){.countdown-date{display:none}}
/* Short laptop screens tighten the spacing so both buttons stay above the fold. */
@media(min-width:761px) and (max-height:920px){main{padding-top:calc(2vh + 18px)}.description{margin:10px 0 14px}.countdown{margin-bottom:16px;padding-top:11px;padding-bottom:6px}.countdown-title{margin-bottom:5px}.countdown-value{font-size:30px}}
/* Wide screens and phones held sideways: the first screen is a poster. The wordmark and the greeting are centred over the sky,
   the mountain shows through the middle, and the countdown and the two cards stand in one row of equal cards above the slope,
   with Instagram and TikTok centred under the row. .actions and .hk-root step aside (display:contents), so the three cards and
   the social line are cells of main's own grid; their opening rise moves onto them (below). The poster is laid out 900px wide
   (up to 960px where the height sets its size, so the row meets the header's edges) and drawn as a whole at the size that
   fits, from .45 up to 1.2 (--hero-zoom from the head of index.html for the first paint,
   then fit() in foto-pakem.js). The room the slope and Jelajahi Pakem need is the page's own bottom padding (--hero-clear, set
   by fit()), so the row always ends above them. Without JS the hero stays the centred column. */
@media(min-width:560px) and (min-aspect-ratio:5/4){
  .js .page{min-height:100svh;padding-bottom:var(--hero-clear,max(96px,calc(var(--slope-h) * .8)))}
  .js main{zoom:var(--hero-zoom,1);display:grid;grid-template-columns:1fr 1.18fr 1fr;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1.7fr) auto auto;grid-template-areas:". . ." "title title title" "desc desc desc" ". . ." "count make post" "social social social";column-gap:14px;align-self:center;width:min(100%,960px);padding:0}
  .js main>h1{grid-area:title;justify-self:center;font-size:96px;text-shadow:0 2px 30px #f4f2e6a6}
  /* its bottom margin is the least room above the row: the small Story stands above its card, and keeps clear of the greeting */
  .js .description{grid-area:desc;margin:10px 0 48px;text-shadow:0 1px 14px #f4f2e6d9}
  .js .actions,.js .hk-root{display:contents}
  .js .hk-make{grid-area:make}
  .js .hk-post{grid-area:post}
  .js .hk-social{grid-area:social}
  .js .hk-make,.js .hk-post,.js .hk-social{animation:intro-up .9s 1.4s var(--ease) backwards}
  .js .hk-post{animation-delay:1.47s}
  .js .hk-social{animation-delay:1.54s}
  .js.intro:not(.intro-go) :is(.hk-make,.hk-post,.hk-social){animation-play-state:paused}
  .js.intro .hk-make{animation-delay:calc(var(--i-land) + .16s)}
  .js.intro .hk-post{animation-delay:calc(var(--i-land) + .23s)}
  .js.intro .hk-social{animation-delay:calc(var(--i-land) + .3s)}
  /* the countdown speaks the cards' language: the same kicker, a title on the same line, and the bar along the bottom where
     the cards keep their buttons. The dates move to the bar's two ends, as on a phone. It is information, not a button, so
     it is lighter paper on the landscape, without the postcards' lifted edge. */
  .js .countdown{grid-area:count;display:flex;flex-direction:column;width:auto;margin:0;padding:17px 18px 15px;border:1px solid #fbf8efb3;border-radius:20px;background:#f6f1e4bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 28px -18px #17352f99;text-align:left}
  .js .countdown-title{margin:0;font-size:11px;line-height:1.3;letter-spacing:1.4px;color:#87634c}
  .js .countdown-live{margin-right:8px}
  .js .countdown-date{display:none}
  .js .countdown-ops{display:flex;flex:1;flex-direction:column}
  .js .countdown-ops-day{margin-top:5px;font-size:26px;line-height:1.04;letter-spacing:-.6px;color:#17352f}
  .js .countdown-ops-of{font-size:15px}
  .js .countdown-ops-bar{margin:auto 0 0}
  .js .countdown-ops-ends{margin:8px 0 0;font-size:10.5px;letter-spacing:1.2px}
  .js .countdown-units{margin-top:auto}
  .js .countdown-value{font-size:28px}
  .js .countdown-label{font-size:10.5px;letter-spacing:1.2px}
  .js .countdown-message{margin:6px 0 0;font-size:19px}
  .js .page.is-short main{padding-top:0}
  .js .page.is-short .countdown{margin:0}
  .js .page.is-short .description{margin:10px 0 48px}
  /* a phone held sideways: the wordmark and the gaps give way first, so the cards stay readable */
  @media(max-height:460px){
    .js main>h1{font-size:76px}
    .js .description,.js .page.is-short .description{margin:4px 0 30px;line-height:1.4}
  }
}

/* Turun ke Pakem: a falling leaf invites the scroll, then mist and three ridges of the slope hand the hero over to the page. */
:root{--slope-h:clamp(132px,14vw,200px)}
@media(min-width:761px) and (max-height:700px),(min-width:560px) and (min-aspect-ratio:5/4) and (max-height:500px){:root{--slope-h:calc(clamp(132px,14vw,200px) * .75)}}
.mist{position:fixed;left:0;right:0;bottom:0;z-index:1;height:40vh;background:linear-gradient(to top,#e9ede0d9,#e9ede066 45%,transparent);opacity:0;pointer-events:none}
body.is-past-hero .mist{visibility:hidden}
.slope{position:relative;height:var(--slope-h);overflow:hidden;pointer-events:none;contain:layout paint}
.slope-layer{position:absolute;top:0;left:50%;width:calc(max(100%,760px) + 32px);height:100%;margin-left:calc(min(-50%,-380px) - 16px);overflow:hidden}
.slope-haze,.slope-back{animation:ridge-rise .9s var(--ease) 1.35s backwards;--rise:26px}
.slope-mid{animation:ridge-rise .9s var(--ease) 1.45s backwards;--rise:18px}
.slope-front{animation:ridge-rise .9s var(--ease) 1.55s backwards;--rise:10px}
.slope.is-nudging .ridge-g{animation:slope-nudge 1.4s var(--ease)}
@keyframes ridge-rise{from{opacity:0;translate:0 var(--rise)}}
@keyframes slope-nudge{35%{translate:0 -10px}70%{translate:none}85%{translate:0 -4px}}
@keyframes mist-in{to{opacity:1}}
@keyframes sink-back{to{transform:translateY(34px)}}
@keyframes sink-mid{to{transform:translateY(16px)}}
@supports (animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){
.mist{animation:mist-in linear both;animation-timeline:scroll(root);animation-range:0 70vh}
.slope-back{animation:ridge-rise .9s var(--ease) 1.35s backwards,sink-back linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
.slope-mid{animation:ridge-rise .9s var(--ease) 1.45s backwards,sink-mid linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
}}
@media(hover:hover) and (pointer:fine){.ridge-g{transition:transform 1.4s ease-out}.slope-back .ridge-g{transform:translateX(calc(var(--scene-x,0px) * .4))}.slope-mid .ridge-g{transform:translateX(var(--scene-x,0px))}.slope-front .ridge-g{transform:translateX(calc(var(--scene-x,0px) * 1.8))}}
html{scroll-padding-top:84px;scrollbar-gutter:stable}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.scroll-cue{position:absolute;left:50%;bottom:max(8px,calc(100% - 100svh + 8px));z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 14px 0;transform:translateX(-50%);color:var(--ink);text-decoration:none;pointer-events:auto;transition:opacity .4s,visibility .4s}
.cue-trail{position:relative;display:block;width:40px;height:44px;transform-origin:50% 0}
.cue-path{display:block;width:40px;height:44px;overflow:visible}
.cue-path path{fill:none;stroke:#f6f1e4;stroke-opacity:.85;stroke-width:1.6;stroke-dasharray:1.5 5;stroke-linecap:round;transition:stroke-opacity .3s}
.cue-leaf{position:absolute;left:0;top:0;width:16px;height:18px;translate:12px 34px;animation:leaf-fall 4.2s linear 2.2s infinite backwards}
.cue-row{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 13px;border-radius:999px;background:#e6ecdae6}
.cue-label{position:relative;white-space:nowrap;font:10px/1 Arial,Helvetica,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--ink)}
.cue-label::after{content:"";position:absolute;left:0;right:3px;bottom:-5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.cue-chev{width:10px;height:6px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:chev-bob 1.2s ease-in-out infinite alternate}
.scroll-cue:hover .cue-trail,.scroll-cue:focus-visible .cue-trail{animation:trail-flutter .6s var(--ease)}
.scroll-cue:hover .cue-path path,.scroll-cue:focus-visible .cue-path path{stroke-dasharray:none;stroke-opacity:1}
.scroll-cue:hover .cue-label::after,.scroll-cue:focus-visible .cue-label::after{transform:scaleX(1)}
.scroll-cue.is-nudging .cue-chev{animation:chev-nudge .7s ease-in-out 2}
body.is-scrolled .scroll-cue:not(:focus-visible){opacity:0;visibility:hidden}
@keyframes leaf-fall{0%{translate:12px -7px;rotate:-25deg;opacity:0}4%{translate:12.2px -6.8px;rotate:-23.8deg;opacity:0.3}8%{translate:13px -6.2px;rotate:-19.3deg;opacity:0.9}12%{translate:14.3px -5px;rotate:-10.1deg;opacity:1}16%{translate:15.8px -2.5px;rotate:1.8deg;opacity:1}20%{translate:15.7px 1.6px;rotate:11.1deg;opacity:1}24%{translate:13.1px 6.4px;rotate:17deg;opacity:1}28%{translate:9.5px 11.8px;rotate:20.2deg;opacity:1}32%{translate:8.1px 18px;rotate:21.7deg;opacity:1}36%{translate:11.5px 22.7px;rotate:21.8deg;opacity:1}40%{translate:15.4px 25.6px;rotate:16.6deg;opacity:1}44%{translate:18px 28.5px;rotate:2deg;opacity:1}48%{translate:17.7px 31.1px;rotate:-9deg;opacity:1}52%{translate:15.6px 32px;rotate:-13.3deg;opacity:1}56%{translate:14px 32.6px;rotate:-13.9deg;opacity:1}60%{translate:12.9px 33px;rotate:-10.9deg;opacity:1}64%{translate:12.3px 33.5px;rotate:-4.1deg;opacity:1}68%{translate:12px 33.9px;rotate:-0.8deg;opacity:1}72%{translate:12px 34px;rotate:0deg;opacity:1}80%{opacity:.4}86%,100%{translate:12px 34px;rotate:0deg;opacity:0}}
@keyframes chev-bob{to{transform:translateY(3px)}}
@keyframes chev-nudge{50%{transform:translateY(6px)}}
@keyframes trail-flutter{30%{transform:rotate(-18deg)}65%{transform:rotate(14deg)}}
body.is-scrolled .cue-leaf,body.is-scrolled .cue-chev,body.is-past-hero .cue-leaf,body.story-open .cue-leaf{animation-play-state:paused}
@media(max-width:760px) and (max-height:700px),(max-height:500px){.cue-trail{display:none}}

/* A small pill of section links appears once the hero has scrolled away. */
.site-nav{position:fixed;top:14px;left:50%;z-index:4;display:flex;align-items:center;gap:2px;padding:6px;border:1px solid #fffaf1c7;border-radius:40px;background:#f6f1e4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px #1429121f;transform:translate(-50%,-140%);opacity:0;visibility:hidden;transition:transform .5s var(--ease),opacity .35s,visibility .5s}
body.is-past-hero .site-nav{transform:translate(-50%,0);opacity:1;visibility:visible}
.site-nav a,.site-nav button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:40px;white-space:nowrap;padding:0 15px;border:0;border-radius:30px;background:none;color:#4a5840;font-size:12px;letter-spacing:.3px;text-decoration:none;transition:background .25s,color .25s}
.site-nav a:hover,.site-nav button:hover{background:#e4e8d6;color:var(--ink)}
.site-nav a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.site-nav .site-nav-home{flex:0 0 40px;width:40px;height:40px;margin-right:6px;padding:0;border-radius:50%;background:#fffdf7;box-shadow:inset 0 0 0 1px #d7ddc9;color:var(--accent)}
.site-nav-home img{display:block;width:26px;height:26px;object-fit:contain;border-radius:50%;pointer-events:none}
.site-nav .site-nav-home:hover{background:#e4e8d6}
/* The reading progress beneath the menu, clear of the logo: a dashed route like the postcards', walked in brown up to a
   small dot. The dark pill glides from link to link. script.js sets --p (0 to 1) and the pill's place (--px, --py, --pw, --ph). */
.site-nav::before,.site-nav::after{content:"";position:absolute;left:64px;right:18px;bottom:2px;height:2px;pointer-events:none;background:repeating-linear-gradient(90deg,currentColor 0 5px,#0000 5px 9px)}
.site-nav::before{color:#cdbf9f;opacity:.75}
.site-nav::after{color:var(--accent);clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.site-nav-dot{position:absolute;bottom:-1px;left:calc(64px + (100% - 82px) * var(--p,0));width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #f6f1e4;pointer-events:none}
.site-nav-pill{position:absolute;left:0;top:0;width:var(--pw,0px);height:var(--ph,40px);border-radius:30px;background:var(--ink);transform:translate(var(--px,0px),var(--py,6px));opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.22,.64,1),width .5s cubic-bezier(.34,1.22,.64,1),opacity .25s}
.site-nav.has-pill .site-nav-pill.is-on{opacity:1}
.site-nav.has-pill a[aria-current="true"],.site-nav.has-pill a[aria-current="true"]:hover{background:none;color:var(--paper)}
@media(prefers-reduced-motion:reduce){.site-nav-pill{transition:opacity .2s}}
@media(max-width:460px){.site-nav{top:10px}.site-nav a,.site-nav button{padding:0 10px;font-size:11px}}
@media(max-width:370px){.site-nav a,.site-nav button{padding:0 7px;font-size:10.5px;letter-spacing:0}.site-nav .site-nav-home{flex-basis:36px;width:36px;height:36px;min-height:36px}.site-nav-home img{width:24px;height:24px}}

/* Content below the hero rises in as it reaches the reader. Without JavaScript, or with reduced motion, it simply shows. */
.chapters{position:relative;z-index:2;margin-top:calc(-1 * var(--slope-h));background:linear-gradient(180deg,transparent 0 calc(var(--slope-h) - 1px),#e6ecda calc(var(--slope-h) - 1px),#eef0e2 calc(var(--slope-h) + 260px),#f4f2e7 calc(var(--slope-h) + 760px));overflow:clip;counter-reset:pos}
.chapter{position:relative;padding:clamp(84px,11vw,140px) 0}
:root{--edge-forest-h:clamp(64px,7.5vw,120px);--edge-terrace-h:clamp(72px,8vw,128px)}
@media(max-width:760px){:root{--edge-forest-h:56px;--edge-terrace-h:64px}}
.edge{position:absolute;left:0;right:0;overflow:clip;pointer-events:none;contain:layout paint}
.edge svg{position:absolute;top:0;left:50%;width:max(100%,900px);height:100%;margin-left:min(-50%,-450px)}
.edge path{vector-effect:non-scaling-stroke}
/* Pakem: mist on the upper slope, with contour rings rising toward the summit. */
.chapter-pakem{padding-bottom:calc(clamp(84px,11vw,140px) + var(--edge-forest-h) * .5)}
.chapter-pakem>.wrap{position:relative;z-index:1}
.contours{position:absolute;top:0;right:0;z-index:0;width:100%;height:760px;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.contours path{fill:none;stroke:#5a6e48;stroke-opacity:.14;stroke-width:1}
.contours .is-strong{stroke-opacity:.26;stroke-width:1.3}
.js .contours path{stroke-dasharray:1;stroke-dashoffset:1}
.js .contours.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease) calc(var(--k) * .08s)}
@media(prefers-reduced-motion:reduce){.js .contours path{stroke-dashoffset:0}}
@media(max-width:600px){.contours .is-far{display:none}}
/* Tema: a forest band, entered over a ridge of trees. */
.edge-forest{top:calc(1px - var(--edge-forest-h));height:var(--edge-forest-h)}
.chapter-theme{background:radial-gradient(560px 380px at 84% 240px,#fccc3d1a,transparent 70%),linear-gradient(180deg,#17352f 0,#1b3a2f 55%,#203f2c 100%)}
.chapter-theme>.wrap{position:relative;z-index:1}
.chapter-theme .section-eyebrow{color:#b9c0a8}
.chapter-theme .section-title{color:#f6f1e4}
.chapter-theme .section-title i{color:#e2c3a0}
.chapter-theme .section-lead{color:#c9cfbd}
.tema-leaf{position:absolute;right:-4%;bottom:3%;z-index:0;width:clamp(280px,38vw,560px);pointer-events:none}
.tema-leaf path{fill:#adb946;fill-opacity:.06;stroke:#adb946;stroke-opacity:.12;stroke-width:1.5;vector-effect:non-scaling-stroke}
/* Lokasi: rice terraces step down into a sage band. */
.chapter-places{padding-top:calc(var(--edge-terrace-h) + clamp(56px,7vw,96px));padding-bottom:clamp(64px,8vw,104px);background:linear-gradient(180deg,#eef0e3,#ebefe2 70%,#e6ece0)}
.edge-terrace{top:0;height:var(--edge-terrace-h)}
.edge-terrace .dyke{fill:none;stroke-width:1}
.edge-terrace .tufts{fill:none;stroke:#5a7e3c;stroke-opacity:.5;stroke-width:1.1;stroke-linecap:round}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
.contours{animation:contour-drift linear both;animation-timeline:view()}
.tema-leaf{animation:leaf-drift linear both;animation-timeline:view()}
}}
@keyframes contour-drift{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
@keyframes leaf-drift{from{transform:rotate(-8deg) translateY(40px)}to{transform:rotate(4deg) translateY(-40px)}}
.wrap{width:min(1120px,calc(100% - 2 * clamp(20px,5vw,64px)));margin:0 auto}
.section-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#5d6852;counter-increment:pos}
.section-eyebrow::before{content:counter(pos,decimal-leading-zero);content:counter(pos,decimal-leading-zero) / "";display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid var(--accent);border-radius:50%;background:var(--accent);color:#f6f1e4;font:400 11px/1 Georgia,'Times New Roman',serif;letter-spacing:0;transition:background .5s .45s,color .5s .45s}
.js .section-eyebrow:not(.is-revealed)::before{background:#fbf8ef;color:var(--accent)}
.section-eyebrow.is-revealed::before{animation:pos-ping .9s .45s ease-out}
.chapter-theme .section-eyebrow::before{border-color:#e2c3a0;background:#fccc3d;color:#17352f}
.js .chapter-theme .section-eyebrow:not(.is-revealed)::before{background:#17352f;color:#e2c3a0}
.chapter-theme .section-eyebrow.is-revealed::before{animation-name:pos-ping-sun}
@keyframes pos-ping{from{box-shadow:0 0 0 0 #87634c66}to{box-shadow:0 0 0 10px #87634c00}}
@keyframes pos-ping-sun{from{box-shadow:0 0 0 0 #fccc3d66}to{box-shadow:0 0 0 10px #fccc3d00}}
@media(max-width:760px){.section-eyebrow::before{width:26px;height:26px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.js .section-eyebrow:not(.is-revealed)::before{background:var(--accent);color:#f6f1e4}.js .chapter-theme .section-eyebrow:not(.is-revealed)::before{background:#fccc3d;color:#17352f}}
.section-title{margin:0 0 22px;font:400 clamp(40px,5.4vw,70px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:var(--ink)}
.section-title i{color:var(--accent)}
.section-lead{max-width:640px;margin:0;font-size:clamp(15px,1.35vw,17px);line-height:1.8;color:#5d6852}
.section-lead+.section-lead{margin-top:14px}
.js [data-reveal]{opacity:0;translate:0 26px;transition:opacity .9s var(--ease) var(--delay,0s),translate .9s var(--ease) var(--delay,0s)}
.js [data-reveal].is-revealed{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;translate:none}}
body.is-past-hero .bird,body.is-past-hero .bird img,body.is-past-hero .scene>img{animation-play-state:paused}

/* The theme, read phrase by phrase: each underlined phrase opens its meaning inside the card. */
.chapter-head{max-width:780px}
.theme-statement{position:relative;margin:clamp(40px,6vw,64px) 0 0;padding:clamp(30px,4.4vw,50px) clamp(24px,4.4vw,56px) clamp(24px,3.4vw,36px);border-radius:28px;background:#fbf8ef;box-shadow:0 30px 80px #0a1a1459}
.theme-statement::before{content:"\201C";position:absolute;top:-38px;left:clamp(18px,3vw,40px);font:400 128px/1 Georgia,'Times New Roman',serif;color:#e2c3a0}
.theme-statement blockquote{margin:0}
.theme-statement blockquote p{margin:0;font:400 clamp(22px,2.7vw,36px)/1.42 Georgia,'Times New Roman',serif;letter-spacing:-.012em;color:var(--ink)}
.theme-term{display:inline;padding:0 .06em;border:0;border-radius:3px;background:linear-gradient(#ead9c3,#ead9c3) no-repeat 0 92%/0% .36em;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--ease),background-color .25s,color .25s}
.theme-statement.is-revealed .theme-term{background-size:100% .36em;transition-delay:calc(.35s + var(--i) * .28s),0s,0s}
.theme-term sup{margin-left:3px;font:400 10px/1 Arial,Helvetica,sans-serif;letter-spacing:1px;color:var(--accent);vertical-align:.95em}
.theme-term.is-active{background-color:#efe2d0;color:#2b382c}
.theme-term.is-active sup{color:#6f4f3b}
@media(hover:hover) and (pointer:fine){.theme-term:hover{background-color:#efe2d0;color:#2b382c}.theme-term:hover sup{color:#6f4f3b}}
.theme-term.is-active{background-image:linear-gradient(#d9b994,#d9b994)}
.theme-term{cursor:pointer}
.theme-term:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-statement figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:12px;line-height:1.6;color:#5d6852}
/* Tema, satu batang tiga cabang: the statement is the trunk, and the three clusters grow out of it as branches. */
:is(.cluster,.members-dialog,.members-tabs [role="tab"])[data-cluster="medika"]{--k:#f4ab90;--k-ink:#9a4a2f;--k-soft:#f7e4da;--k-glow:#f4ab9017;--k-line:#f4ab9070}
:is(.cluster,.members-dialog,.members-tabs [role="tab"])[data-cluster="saintek"]{--k:#fccc3d;--k-ink:#7a5c0a;--k-soft:#fbefc9;--k-glow:#fccc3d14;--k-line:#fccc3d70}
:is(.cluster,.members-dialog,.members-tabs [role="tab"])[data-cluster="soshum"]{--k:#c5d36f;--k-ink:#4f6a1c;--k-soft:#e9efd2;--k-glow:#c5d36f14;--k-line:#c5d36f70}
.theme-statement{z-index:1}
.theme-statement::after{content:"";position:absolute;left:11px;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#adb946;box-shadow:0 0 0 4px #1b3a2f}
/* The four phrases open one meaning at a time inside the card. All four share one grid cell, so switching never changes the height. */
.theme-gloss{display:grid}
.theme-statement.has-gloss .theme-gloss{margin-top:clamp(20px,3vw,28px)}
.js .theme-statement:not(.has-gloss) .term-panel{display:none}
.js .term-panel{grid-area:1/1}
.js .term-panel:not(.is-current){visibility:hidden}
.js .term-panel.is-current{z-index:1}
.js .term-panel.is-leaving{visibility:visible}
.theme-gloss.is-moving{overflow:clip}
html:not(.js) .theme-gloss{gap:12px;margin-top:24px}
html:not(.js) :is(.term-foot,.term-close){display:none}
.term-panel{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 18px 16px;border:1px solid #e6dcc8;border-radius:20px;background:#f3ede0}
.term-head{display:flex;align-items:center;gap:12px;padding-right:46px}
.term-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#17352f;color:#fccc3d}
.term-icon .icon{width:21px;height:21px}
.term-kicker{margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7a573f}
.term-title{margin:4px 0 0;font:400 clamp(20px,2.2vw,24px)/1.18 Georgia,'Times New Roman',serif;letter-spacing:-.3px;color:var(--ink)}
.term-body{flex:1;display:flex;flex-direction:column;gap:10px}
.term-text{margin:0;font-size:14.5px;line-height:1.72;color:#4f5b46}
.term-source{margin:0;font-size:11.5px;line-height:1.6;color:#5d6852}
.term-source a{color:var(--ink);text-underline-offset:3px}
.term-foot{display:flex;justify-content:flex-end;margin-top:auto;padding-top:12px;border-top:1px dashed #d8ccb6}
.term-next{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 16px;border:1px solid #c5ceb3;border-radius:30px;background:#e2e8d5;color:#3f5234;font-size:12.5px;transition:background .25s}
.term-next .icon{width:16px;height:16px;transition:transform .25s}
.term-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d8ccb6;border-radius:50%;background:#fbf8ef;color:var(--ink);transition:background .25s}
.term-close .icon{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){.term-next:hover{background:#d6e0c4}.term-next:hover .icon{transform:translateX(3px)}.term-close:hover{background:#ece6d6}}
@media(min-width:760px){.term-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(24px,4vw,48px);padding:26px 28px 22px}.term-head{flex-direction:column;align-items:flex-start;align-self:start;padding-right:0}.term-body{padding-right:40px}}
/* The grove: a trunk out of the statement, then one branch per cluster. Phone first: the trunk runs down the left gutter. */
.theme-grove{--spine:16px;--indent:34px;--gap:44px;position:relative}
.grove-head{position:relative;height:84px;margin-top:-6px}
.grove-spine{position:absolute;top:0;left:calc(var(--spine) - 12px);width:24px;height:100%;overflow:visible;transform-origin:50% 0;pointer-events:none}
.grove-spine path{fill:none;stroke:#adb946;stroke-opacity:.75;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.grove-fork{display:none}
.grove-label{position:absolute;top:50%;left:calc(var(--indent) + 6px);margin:-22px 0 0;font:400 19px/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.2px;color:#f6f1e4}
.grove-label i{color:#e2c3a0}
.grove-label span{display:block;margin-top:5px;font:400 10px/1.4 Arial,Helvetica,sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:#b9c0a8}
.cluster-list{margin:0;padding:0;list-style:none}
.cluster{position:relative;padding:var(--gap) 0 0 var(--indent)}
.js .cluster[data-reveal],.js .grove-head[data-reveal]{opacity:1;translate:none;transition:none}
.cluster-branch{position:absolute;top:0;left:calc(var(--spine) - 12px);width:60px;height:48px;overflow:visible;transform-origin:12px 0;pointer-events:none}
.branch-line{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.branch-leaf{fill:var(--k);opacity:.9}
.cluster-card{position:relative;display:flex;flex-direction:column;padding:32px 20px 20px 22px;border:1px solid #f6f1e41f;border-radius:24px;background:radial-gradient(120% 70% at 0 0,var(--k-glow),transparent 62%),#f6f1e40a}
.cluster-node{position:absolute;top:-18px;left:8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#17352f;box-shadow:inset 0 0 0 1.5px var(--k),0 0 0 5px #1b3a2f;color:var(--k);pointer-events:none}
.cluster-node .icon{width:18px;height:18px}
.cluster-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px}
.cluster-num{margin:0;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#d6dcc6}
.frond{position:relative;flex:none;width:calc((var(--n) - 1) * 9px + 19px);height:26px}
.frond::before{content:"";position:absolute;left:0;right:0;top:12.25px;height:1.5px;border-radius:2px;background:var(--k);opacity:.55}
.frond i{position:absolute;left:calc(var(--i) * 9px);top:2px;width:11px;height:11px;border-radius:100% 0;background:var(--k);transform-origin:0 100%}
.frond i:nth-child(even){top:13px;border-radius:0 100%;transform-origin:0 0;opacity:.78}
.cluster-name{margin:14px 0 0;font:400 clamp(40px,11vw,54px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:#f6f1e4}
.cluster-name span{color:var(--k)}
.cluster-theme{margin-top:16px}
.cluster-label{margin:0 0 6px;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--k)}
.cluster-subtema{margin:0;font:400 clamp(19px,5vw,22px)/1.42 Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:#f6f1e4;text-wrap:pretty}
.cluster-meta{margin:16px 0 0;font-size:13px;line-height:1.6;color:#c9cfbd}
.cluster-meta b{font:400 16px/1 Georgia,'Times New Roman',serif;color:#f6f1e4}
.cluster-open{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;margin-top:20px;padding:0 6px 0 18px;border:1px solid #f6f1e44d;border-radius:30px;background:transparent;color:#f6f1e4;font-size:14px;letter-spacing:.2px;text-align:left;transition:background .3s,color .3s,border-color .3s}
.cluster-open::after{content:"";position:absolute;inset:0;border-radius:24px}
.cluster-open-arrow{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--k);color:#17352f;transition:transform .35s var(--ease)}
.cluster-open-arrow .icon{width:18px;height:18px}
.chapter-theme .theme-grove :focus-visible{outline-color:#e2c3a0}
.cluster-card:has(.cluster-open:focus-visible){outline:2px solid var(--k);outline-offset:4px}
@supports selector(:has(*)){.cluster-open:focus-visible{outline:none}}
.cluster-card:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.cluster-card:hover{transform:translateY(-4px);border-color:var(--k-line)}.cluster-card:hover:active{transform:translateY(-4px) scale(.985)}.cluster-card:hover .cluster-open{background:#f6f1e4;border-color:#f6f1e4;color:#17352f}.cluster-card:hover .cluster-open-arrow{transform:translateX(2px)}}
html:not(.js) .cluster-open{display:none}
/* Growth: transform and opacity only, triggered once by the reveal observer. */
.grove-head .grove-spine{transition:transform .8s var(--ease)}
.grove-label{transition:opacity .6s var(--ease) .3s,transform .6s var(--ease) .3s}
.cluster .grove-spine{transition:transform 1.1s var(--ease) calc(var(--delay,0s) + .5s)}
.cluster-branch{transition:opacity .5s var(--ease) var(--delay,0s),transform .7s var(--ease) var(--delay,0s)}
.cluster-node{transition:transform .6s var(--ease) calc(var(--delay,0s) + .3s)}
.cluster-card{transition:opacity .9s var(--ease) calc(var(--delay,0s) + .15s),translate .9s var(--ease) calc(var(--delay,0s) + .15s),transform .5s var(--ease),border-color .3s}
.frond i{transition:scale .45s var(--ease) calc(var(--delay,0s) + .65s + var(--i) * .045s)}
.js .grove-head:not(.is-revealed) .grove-spine,.js .cluster:not(.is-revealed) .grove-spine{transform:scaleY(0)}
.js .grove-head:not(.is-revealed) .grove-label{opacity:0;transform:translateY(8px)}
.js .cluster:not(.is-revealed) .cluster-branch{opacity:0;transform:scale(.3)}
.js .cluster:not(.is-revealed) .cluster-node{transform:scale(0) rotate(-40deg)}
.js .cluster:not(.is-revealed) .cluster-card{opacity:0;translate:0 22px}
.js .cluster:not(.is-revealed) .frond i{scale:0}
/* Tablet: the same trunk, with the name on the left and the subtema on the right. */
@media(min-width:600px) and (max-width:999px){.theme-grove{--indent:40px}.cluster-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"top top" "name theme" "meta theme" "open theme";grid-template-rows:auto auto auto 1fr;column-gap:32px;padding:34px 28px 26px 30px}.cluster-top{grid-area:top}.cluster-name{grid-area:name}.cluster-theme{grid-area:theme;margin-top:18px}.cluster-meta{grid-area:meta}.cluster-open{grid-area:open;align-self:end;width:auto}}
/* Desktop: the trunk drops from the middle of the statement and forks into three columns. */
@media(min-width:1000px){
.theme-statement::after{left:calc(50% - 5px)}
.grove-head{height:150px}
.grove-head>.grove-spine,.cluster .grove-spine,.cluster-branch{display:none}
.grove-fork{display:block;position:absolute;inset:0}
.fork{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fork path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fork-m{transform-origin:50% 0;transition:transform .7s var(--ease)}
.fork-l,.fork-r{transform-origin:50% 26.67%;transition:opacity .5s var(--ease) .35s,transform .9s var(--ease) .35s}
.fork-r{transition-delay:.45s}
.js .grove-head:not(.is-revealed) .fork-m{transform:scaleY(0)}
.js .grove-head:not(.is-revealed) :is(.fork-l,.fork-r){opacity:0;transform:scale(.15)}
.grove-label{top:40px;left:50%;margin:0;translate:-50% -50%;padding:10px 22px 11px;border:1px solid #f6f1e42e;border-radius:26px;background:#183630;text-align:center;white-space:nowrap}
.cluster-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cluster:nth-child(2){--delay:.12s}.cluster:nth-child(3){--delay:.24s}
.cluster{display:flex;padding:18px 0 0}
.cluster-card{flex:1;padding:42px 26px 24px;background:radial-gradient(110% 60% at 50% 0,var(--k-glow),transparent 62%),#f6f1e40a}
.cluster-node{left:50%;margin-left:-18px}
.cluster-name{font-size:clamp(44px,4.2vw,56px)}
.cluster-subtema{font-size:clamp(20px,1.75vw,22px)}
.cluster-meta{margin-bottom:22px}
.cluster-open{margin-top:auto}
}
/* Pratinjau anggota: a bottom sheet on phones, a paper card on larger screens. The height is fixed, so switching clusters never resizes it. */
.members-dialog{width:min(780px,calc(100% - 32px));max-height:calc(100svh - 32px)}
.members-card{position:relative;height:min(760px,calc(100svh - 32px));overflow:auto;overscroll-behavior:contain;padding:0 0 24px;border-radius:24px;background:var(--paper);box-shadow:0 35px 110px #09170d70}
.members-grab{display:none}
.members-head{position:sticky;top:0;z-index:2;padding:28px 32px 14px;background:var(--paper);border-bottom:1px solid #e3e0cf}
.members-dialog .close-dialog{top:20px;right:20px;width:44px;height:44px}
.members-intro{padding-right:56px}
.members-eyebrow{margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5d6852}
.members-intro h2{margin:8px 0 0;font:400 clamp(32px,4vw,42px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.04em;color:var(--ink)}
.members-intro h2 i{color:var(--k-ink)}
.members-tabs{display:flex;gap:6px;margin-top:16px}
.members-tabs [role="tab"]{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:0 10px;border:1px solid #d9dccb;border-radius:30px;background:#fbf8ef;color:#4a5840;font-size:13px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.members-tabs [role="tab"][aria-selected="true"]{background:var(--k-ink);border-color:var(--k-ink);color:#fbf8ef}
.members-tab-leaf{flex:none;width:9px;height:9px;border-radius:100% 0;background:var(--k)}
.members-tab-count{font:400 12px/1 Georgia,'Times New Roman',serif;opacity:.85}
.members-panels{touch-action:pan-y}
.members-panel{padding:20px 32px 0;outline:none}
.members-panel:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:16px}
.members-subtema{margin:0 0 16px;padding:14px 16px 15px;border-radius:16px;background:var(--k-soft);font:400 17px/1.45 Georgia,'Times New Roman',serif;color:var(--ink)}
.members-subtema span{display:block;margin-bottom:4px;font:400 10px/1.3 Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--k-ink)}
.members-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.member{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid #e6e2d2;border-radius:16px;background:#fbf8ef}
.member>div{min-width:0}
.member.is-lead{grid-column:1/-1;padding:16px 44px 16px 16px;border-color:var(--k);background:#fff}
.member.is-lead::after{content:"";position:absolute;top:16px;right:16px;width:12px;height:12px;border-radius:100% 0;background:var(--k)}
.member-mono{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--k-soft);color:var(--k-ink);font:400 15px/1 Georgia,'Times New Roman',serif;letter-spacing:.5px}
.member.is-lead .member-mono{width:50px;height:50px;background:var(--k-ink);color:#fbf8ef;font-size:18px}
.member-name{margin:1px 0 0;font:400 16px/1.3 Georgia,'Times New Roman',serif;color:var(--ink);overflow-wrap:anywhere}
.story-panel .chapter-page{display:inline-block;margin-top:14px;font-size:13px;color:var(--accent);text-underline-offset:4px;text-decoration-color:#87634c80}.story-panel .chapter-page:hover{text-decoration-color:currentColor}
.member-name a,.story-panel p a{text-decoration-color:#87634c80;text-underline-offset:3px;text-decoration-thickness:1px}.member-name a:hover,.story-panel p a:hover{text-decoration-color:currentColor}
.member.is-lead .member-name{font-size:19px}
.member-study{margin:3px 0 0;font-size:12px;line-height:1.45;color:#5d6852}
.member-roles{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.role{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border-radius:20px;background:#ece8da;color:#3f4b37;font-size:11px;line-height:1.3}
.role.is-kormater{background:var(--k-ink);color:#fbf8ef}
.role.is-unit{background:#17352f;color:#fbf8ef}
.member-division{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:#5d6852}
.members-foot{display:grid;gap:10px;margin:20px 32px 0}
.members-next{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 14px 0 18px;border:1px solid #c5ceb3;border-radius:30px;background:#e2e8d5;color:#3f5234;font-size:13px;text-align:left;transition:background .25s}
.members-next .icon{width:17px;height:17px;transition:transform .25s var(--ease)}
.members-note{margin:8px 0 0;padding-top:14px;border-top:1px dashed #d6cfbb;font-size:12.5px;line-height:1.6;color:#5d6852}
.members-legend summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:12.5px;color:#7a573f;list-style:none}
.members-legend summary::-webkit-details-marker{display:none}
.members-legend summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .25s}
.members-legend[open] summary::before{transform:rotate(45deg)}
.members-legend dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:2px 0 4px;font-size:12.5px;line-height:1.5}
.members-legend dt{font-weight:700;color:var(--ink)}
.members-legend dd{margin:0;color:#5d6852}
@media(hover:hover) and (pointer:fine){.members-tabs [role="tab"]:not([aria-selected="true"]):hover{background:#efede1}.members-next:hover{background:#d6e0c4}.members-next:hover .icon{transform:translateX(3px)}}
@media(min-width:761px){.members-next{justify-self:end;width:auto;min-width:240px}}
.members-dialog[open] .members-card{animation:members-in .6s var(--ease) both}
.members-dialog.is-closing .members-card{animation:postcard-out .24s ease-in both}
@keyframes members-in{from{opacity:0;transform:translateY(28px) scale(.96)}}
@media(max-width:760px){
.members-dialog{width:100%;max-width:100%;max-height:none;margin:auto 0 0}
.members-card{height:min(88svh,780px);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0}
.members-grab{display:block;position:relative;height:26px;touch-action:none;cursor:grab}
.members-grab::before{content:"";position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#c9cdbc}
.members-intro{padding:0 52px 0 6px;touch-action:none}
.members-head{padding:0 14px 12px}
.members-intro h2{font-size:31px}
.members-tabs{gap:5px;margin-top:12px}
.members-tabs [role="tab"]{gap:6px;padding:0 6px;font-size:12.5px}
.members-panel{padding:16px 14px 0}
.members-list{grid-template-columns:minmax(0,1fr);gap:8px}
.members-foot{margin:20px 14px 0}
.members-dialog .close-dialog{top:24px;right:12px}
.members-dialog[open] .members-card{animation:sheet-in .52s var(--ease) both}
.members-dialog.is-closing .members-card{animation:sheet-out .24s ease-in both}
}
@media(max-height:560px){.members-head{padding-top:10px;padding-bottom:10px}.members-eyebrow{display:none}.members-intro h2{margin:0;font-size:24px}.members-tabs{margin-top:8px;margin-right:52px}.members-dialog .close-dialog{top:8px}}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes sheet-out{to{transform:translateY(105%)}}
/* Reduced motion. It comes last so it wins over every state above. */
@media(prefers-reduced-motion:reduce){
.js .grove-head:not(.is-revealed) :is(.grove-spine,.grove-label,.fork),.js .cluster:not(.is-revealed) :is(.grove-spine,.cluster-branch,.cluster-node){opacity:1;transform:none}
.js .cluster:not(.is-revealed) .cluster-card{opacity:1;translate:none}
.js .cluster:not(.is-revealed) .frond i{scale:none}
.cluster-card:is(:hover,:active,:hover:active){transform:none}
}

/* Two kalurahan on one map. The map, the tabs, and the Google map always show the same place. */
.places{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start;margin-top:clamp(40px,6vw,64px)}
.places-map{position:relative;margin:0;padding:clamp(14px,2vw,22px);border:1px solid var(--line);border-radius:28px;background:#fbf8ef;box-shadow:0 22px 60px #2435200f}
.places-map svg{display:block;width:auto;max-width:100%;height:clamp(420px,calc(100vh - 200px),640px);margin:0 auto;overflow:visible}
.region{fill:#ece9da;stroke:#cdc8b1;stroke-width:1;stroke-linejoin:round;transition:fill .35s,stroke .35s,opacity .35s}
.region.is-target{fill:#dfe4cf;stroke:#6f7d57;stroke-width:1.4;cursor:pointer}
.region.is-target:hover{fill:#cfd8b8}
.region.is-selected{fill:#c6a07d;stroke:#6d4c37;stroke-width:2}
.region.is-selected:hover{fill:#bd9572}
.region:focus-visible{outline:none}
.region-outline{fill:none;pointer-events:none;stroke-linejoin:round;transition:opacity .4s}
.region-outline.is-selection{stroke:#6d4c37;stroke-width:2.6}
.region-outline.is-focus{stroke:var(--ink);stroke-width:4.5}
.js .places-map:not(.is-revealed) .region-outline{opacity:0}
.region-label{font:600 13px/1 Arial,Helvetica,sans-serif;letter-spacing:1.2px;text-transform:uppercase;fill:#5d6852;pointer-events:none;transition:fill .3s}
.region-label.is-target{fill:#3c4a33;font-size:16px}
.region-label.is-selected{fill:var(--ink)}
.map-pin circle{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.map-pin .pin-dot{fill:var(--accent);stroke:none}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 6px 2px;font-size:11px;color:#5d6852}
.map-legend span{display:inline-flex;align-items:center;gap:7px}
.map-legend i{width:12px;height:12px;border-radius:4px;background:#ece9da;border:1px solid #cdc8b1}
.map-legend .is-target i{background:#dfe4cf;border-color:#6f7d57}
.map-legend .is-selected i{background:#c6a07d;border-color:#6d4c37}
.map-tip{position:absolute;z-index:2;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--paper);font:italic 13px/1.2 Georgia,'Times New Roman',serif;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity .15s}
.map-tip.is-shown{opacity:1}
.map-tip small{display:block;margin-top:3px;font:normal 8px/1 Arial,Helvetica,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#cdd3bd}
.js .places-map .region{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.js .places-map.is-revealed .region{animation:region-draw 1.6s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .12s)}
@keyframes region-draw{60%{stroke-dashoffset:0;fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
@media(prefers-reduced-motion:reduce){.js .places-map .region{stroke-dasharray:none;stroke-dashoffset:0;fill-opacity:1}}
.place-tabs{display:inline-flex;gap:4px;margin-bottom:22px;padding:5px;border-radius:40px;background:#ebe8d9}
.place-tabs button{min-height:40px;padding:0 18px;border:0;border-radius:30px;background:none;color:#4a5840;font-size:13px;transition:background .3s,color .3s}
.place-tabs button:hover{background:#dfe2cf}
.place-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.place-name{margin:0 0 6px;font:400 clamp(30px,3.4vw,44px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:var(--ink)}
.place-name i{color:var(--accent)}
.place-kicker{margin:0 0 16px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5d6852}
.place-text{margin:0;font-size:15px;line-height:1.8;color:#5d6852}
.place-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:22px 0;border:1px solid var(--line);border-radius:18px;background:var(--line);overflow:hidden}
.place-facts div{padding:14px 16px;background:#fbf9f2}
.place-facts dt{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#5d6852}
.place-facts dd{margin:5px 0 0;font:400 22px/1.15 Georgia,'Times New Roman',serif;color:var(--ink)}
.place-facts dd small{font:12px Arial,Helvetica,sans-serif;color:#5d6852}
.place-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.place-chips li{padding:7px 12px;border:1px solid #d3d9c2;border-radius:20px;background:#eef1e4;font-size:12px;color:#4a5840}
.place-actions{display:flex;flex-wrap:wrap;gap:10px}
.place-button{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:1px solid var(--ink);border-radius:30px;background:var(--ink);color:var(--paper);font-size:13px;text-decoration:none;transition:transform .3s var(--ease),background .25s,color .25s}
.place-button .icon{width:17px;height:17px}
.place-button:hover{transform:translateY(-2px);background:#25311f}
.place-button.is-quiet{background:none;color:var(--ink);border-color:#c5ceb3}
.place-button.is-quiet:hover{background:#e6eadb}
.place[hidden]{display:none}
.place.is-entering{animation:place-in .55s var(--ease)}
@keyframes place-in{from{opacity:0;transform:translateX(14px)}}
.gmap{position:relative;width:100%;margin-top:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#e4e8d8;aspect-ratio:16/7;min-height:300px}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gmap-facade{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(circle at 30% 30%,#f3efe1 0,transparent 55%),repeating-radial-gradient(circle at 62% 58%,transparent 0 22px,#c9d1b633 22px 23px),#e4e8d8;color:#4a5840}
.gmap-facade p{max-width:420px;margin:0;font-size:12px;line-height:1.6;color:#5d6852}
.gmap-load{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border:0;border-radius:30px;background:var(--ink);color:var(--paper);font-size:14px;box-shadow:0 12px 30px #24352033;transition:transform .3s var(--ease)}
.gmap-load:hover{transform:translateY(-2px) scale(1.02)}
.gmap-load .icon{width:19px;height:19px}
.gmap-title{font:italic 400 clamp(22px,2.4vw,30px)/1.1 Georgia,'Times New Roman',serif;color:var(--ink)}
@media(max-width:900px){.places{grid-template-columns:1fr}.gmap{aspect-ratio:4/3}}
@media(max-width:420px){.place-facts dd{font-size:19px}.place-tabs button{padding:0 14px}}

/* The page closes on deep green, with the wordmark, the place, and the way back up. */
.site-footer{--senja-h:clamp(300px,34vw,440px);--senja-gap:clamp(36px,5vw,64px);position:relative;z-index:3;padding:0 0 28px;background:linear-gradient(180deg,#e6ece0 0 3px,var(--hill-front,#243520) 3px calc(var(--senja-h) + var(--senja-gap)),#141e14);color:#e8e6d6}
/* the footer starts with a 3px band in the sky's first colour: where the scene's clipped top edge falls between pixels, that band shows, not the dark hills */
@media(max-height:500px) and (orientation:landscape){.site-footer{--senja-h:min(300px,78svh)}}
/* Senja di Pakem: drag or tap to move the sun through the day; at night the fireflies come out to be caught. */
.senja{position:relative;height:var(--senja-h);margin-bottom:var(--senja-gap);overflow:clip visible;clip-path:inset(0 0 1px 0);background:linear-gradient(180deg,#e6ece0 0,var(--sky-top,#d8c3c3) 34%,var(--sky-bottom,#efa56d) 88%);cursor:grab;touch-action:pan-y pinch-zoom}
.senja.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
.senja-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.senja-constellation{position:absolute;left:10%;top:6%;height:46%;aspect-ratio:1;pointer-events:none}
.senja-lines{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:599px){.senja-constellation{left:auto;right:5%}}
@media(max-height:500px) and (orientation:landscape){.senja-constellation{top:20%;height:40%}}
.senja-stars{height:78%;opacity:var(--night,0)}
.senja-stars circle{fill:#fffbe6}
.senja-stars .tw{animation:star-twinkle var(--tw) ease-in-out infinite alternate}
.senja-lines path{fill:none;stroke:#fff2c4;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity 1.6s ease .9s}
.senja.is-complete .senja-lines path{opacity:calc(var(--night,0) * .85)}
.senja-sun{position:absolute;z-index:2;left:18%;top:80%;width:clamp(44px,3.8vw,54px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle at 50% 35%,#fdd75a,#ef8b2a);box-shadow:0 0 0 2px #a3561a;cursor:grab}
/* a press on the sun never scrolls the page, and its grip reaches a little past the disc so a thumb finds it */
.senja-sun{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sun-grip{position:absolute;inset:-14px;border-radius:50%}
/* at rest the scene clips all round (1px off the bottom, so a sunk sun never shows on the seam); while a sun is carried out of it
   (is-high), the top opens so the sun can rise up to the sponsor panel */
.senja.is-high{clip-path:inset(-120vh 0 1px 0)}
/* the sun gets its own layer, and the footer sits one level above the chapters (z-index 3 over 2), so a sun carried out of the
   scene is always drawn over the sponsor panel (iOS Safari could paint it underneath); the scene is a game, so no text selection */
.senja-sun{will-change:transform}
/* The porter: while the held sun is out of the top of the scene, a copy fixed to the screen carries it over the page
   (body level, above the chapters and the footer), and the sun in the scene steps back, so nothing can clip or cover it. */
.sun-porter{position:fixed;left:0;top:0;z-index:3;width:clamp(44px,3.8vw,54px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle at 50% 35%,#fdd75a,#ef8b2a);box-shadow:0 0 0 2px #a3561a;pointer-events:none;visibility:hidden;transition:scale .18s ease-out}
.sun-porter::before{content:"";position:absolute;inset:-150%;border-radius:50%;background:radial-gradient(circle,#f6a94566,#f6a94500 65%);opacity:var(--glow,1)}
.sun-porter.is-on{visibility:visible}
.senja.is-ported .senja-sun{visibility:hidden}
@media(prefers-reduced-motion:reduce){.sun-porter{transition:none}}
/* The cue: while the sun is held, two thin cream chevrons stand beside it, up to the sponsor panel and down behind the hills,
   with no words. It sits in the footer next to the scene, over the hills and never cut by the scene's clip; script.js places it
   and sets --up and --down (the one the sun moves toward grows clearer and a little larger, the other fades). */
.sun-cue{position:absolute;left:0;top:0;z-index:1;width:0;height:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.sun-cue.is-on{opacity:1;visibility:visible;transition:opacity .15s ease-out}
.sun-cue svg{position:absolute;left:-7px;width:14px;height:8px;overflow:visible;fill:none;stroke:#fffaf0;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #3d241073);transition:opacity .2s,scale .2s,stroke .3s,filter .3s}
/* over a pale sky (and the pale page above the scene) the ink turns a warm brown, the sun's own rim; script.js decides */
.sun-cue svg.on-pale{stroke:#a3561a;filter:drop-shadow(0 0 1.5px #fffaf0b3)}
.sun-cue.is-fresh svg{transition:none}
.sun-cue .cue-up{top:-17px;opacity:var(--up,0);scale:calc(1 + var(--up-k,0) * .15);animation:cue-up 1.1s ease-in-out infinite alternate}
.sun-cue .cue-down{top:9px;opacity:var(--down,0);scale:calc(1 + var(--down-k,0) * .15);animation:cue-down 1.1s ease-in-out infinite alternate}
.sun-cue:not(.is-on) svg{animation-play-state:paused}
@keyframes cue-up{to{translate:0 -3px}}
@keyframes cue-down{to{translate:0 3px}}
@media(forced-colors:active){.sun-cue{display:none}}
.senja{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* a sun sunk behind the hills takes no touches: a swipe there scrolls the page, and a sideways pull on the sky still brings it back */
.senja.is-night .senja-sun{pointer-events:none}
.senja-sun::before{content:"";position:absolute;inset:-150%;border-radius:50%;background:radial-gradient(circle,#f6a94566,#f6a94500 65%);opacity:calc(var(--glow,1) * var(--edge,1));pointer-events:none}
/* the demo before the first touch: a pale copy of the sun rises toward the sponsor panel, then sinks behind the hills (it sits
   in the sun's own layer, so the hills cover it), while a hand on the sun shows the hold and the drag (.sun-demo, end of file) */
.senja-sun::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fdd75a,#ef8b2a);box-shadow:0 0 0 2px #a3561a80,0 0 18px 4px #f6a94566;opacity:0;pointer-events:none}
.senja:not(.is-touched):not(.is-night):not(.is-cued):not(.is-dragging):not(.is-given) .senja-sun::after{animation:sun-ghost 4.8s ease-in-out 1.2s infinite}
.site-footer .senja-sun:focus-visible{outline:2px solid #303e31;outline-offset:4px;box-shadow:0 0 0 2px #a3561a,0 0 0 7px #fbf8efb3}
.senja-hills{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.hill-back{fill:var(--hill-back,#35492f)}
.hill-mid{fill:var(--hill-mid,#2c3f29)}
.hill-front{fill:var(--hill-front,#243520)}
.village-lights circle{fill:#ffd27a;opacity:var(--night,0)}
.senja.is-night .village-lights circle{animation:light-flicker 3s ease-in-out var(--d) infinite alternate}
.senja-fireflies{position:absolute;inset:0;z-index:4;pointer-events:none}
.firefly{position:absolute;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:0;visibility:hidden;pointer-events:auto;animation:firefly-drift var(--dur) ease-in-out var(--delay) infinite;transition:opacity .8s,visibility .8s,left 1.4s var(--ease),top 1.4s var(--ease),translate 1.4s var(--ease)}
.firefly span{display:block;width:8px;height:8px;border-radius:50%;background:#fff6b8;box-shadow:0 0 8px 3px #f3e27a,0 0 22px 8px #f3e27a55;animation:firefly-glow 2.2s ease-in-out var(--delay) infinite alternate}
.senja.is-night .firefly{opacity:1;visibility:visible}
.site-footer .firefly:focus-visible{outline:2px solid #fbf8ef;outline-offset:2px;box-shadow:0 0 0 5px #142014}
.firefly.is-caught{pointer-events:none;cursor:default;animation:none}
.firefly.is-caught span{width:6px;height:6px;animation:star-twinkle 2.6s ease-in-out infinite alternate;box-shadow:0 0 6px 2px #fff2c4,0 0 16px 5px #fff2c440}
.firefly.is-caught{visibility:visible;opacity:var(--night,0)}
.senja-caption{position:absolute;left:50%;bottom:clamp(8px,1.6vw,16px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;width:max-content;max-width:92%;margin:0;transform:translateX(-50%);padding:6px 8px 6px 14px;border-radius:18px;background:#142014b8;color:#f6f1e4;font-size:12.5px;line-height:1.45;text-align:center;pointer-events:none}
/* by day the caption has nothing to show (its words are for screen readers only), so no pill either */
.senja-caption.is-quiet{padding:0;background:none}
.senja-reset{min-height:36px;padding:0 14px;border:1px solid #f6f1e466;border-radius:999px;background:#1b2a1a;color:#f6f1e4;font-size:12px;pointer-events:auto;transition:background .25s}
.senja-reset:hover{background:#2a3d28}
.site-footer .senja-reset:focus-visible{outline:2px solid #fbf8ef;outline-offset:2px;box-shadow:0 0 0 5px #142014}
@media(pointer:coarse){.senja-reset{min-height:44px}}
@keyframes sun-ghost{0%,12%{opacity:0;translate:0 0}15%{opacity:.75}36%{opacity:.55;translate:0 -36px}42%{opacity:0;translate:0 -36px}43%,60%{opacity:0;translate:0 0}63%{opacity:.75}84%{opacity:.55;translate:0 34px}90%,100%{opacity:0;translate:0 34px}}
@keyframes star-twinkle{from{opacity:.35}to{opacity:1}}
@keyframes light-flicker{from{opacity:calc(var(--night,0) * .55)}to{opacity:var(--night,0)}}
@keyframes firefly-drift{0%,100%{translate:0 0}25%{translate:var(--dx) calc(var(--dy) * -1)}50%{translate:calc(var(--dx) * -.7) var(--dy)}75%{translate:calc(var(--dx) * .4) calc(var(--dy) * .6)}}
@keyframes firefly-glow{from{opacity:.45}to{opacity:1}}
.senja:not(.is-inview) *,.senja:not(.is-inview) *::after,.senja:not(.is-night) .senja-stars *,.senja:not(.is-night) .firefly,.senja:not(.is-night) .firefly span{animation-play-state:paused!important}
/* Senja finale: the constellation becomes the wordmark */
.senja{--mark-y:40%;scroll-margin-top:76px}
@media(max-width:599px){.senja{--mark-y:38%}}
.senja[data-finale="gather"],.senja[data-finale="await"],.senja[data-finale="bloom"]{cursor:pointer}
.senja-constellation{transform-origin:0 0}
.senja[data-finale] .senja-constellation{z-index:4}
.senja.is-complete .senja-lines path{transition:opacity 1s ease .4s}
.senja[data-finale="mark"] .senja-constellation,.senja[data-finale="mark"] .firefly.is-caught{visibility:hidden;transition:none}
.senja[data-finale="mark"] .senja-lines path{opacity:0;transition:none}
.senja-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 64% 60% at 50% var(--mark-y),#0a1322d9,#0a132200 72%);opacity:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);mask-image:linear-gradient(180deg,transparent,#000 34%)}
/* the veil fades in with the sky, so its ellipse is never cut by the top edge of the scene */
/* the sky leaves the page colour slowly (eased stops), so the top of the scene has no visible starting line */
@supports (background:color-mix(in srgb,red,blue)){.senja{background:linear-gradient(180deg,#e6ece0 0,color-mix(in srgb,#e6ece0 94%,var(--sky-top,#d8c3c3)) 7%,color-mix(in srgb,#e6ece0 78%,var(--sky-top,#d8c3c3)) 15%,color-mix(in srgb,#e6ece0 50%,var(--sky-top,#d8c3c3)) 23%,color-mix(in srgb,#e6ece0 20%,var(--sky-top,#d8c3c3)) 31%,var(--sky-top,#d8c3c3) 40%,var(--sky-bottom,#efa56d) 88%)}}
.senja[data-finale] .senja-veil{opacity:1}
.senja-halo{position:absolute;z-index:3;left:var(--stage-x,50%);top:var(--stage-y,var(--mark-y));width:calc(var(--stage-w,160px) * 1.7);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff2c466 0,#fff2c42b 38%,#fff2c400 68%);opacity:0}
.senja-bloom{position:absolute;z-index:5;left:var(--stage-x,50%);top:var(--stage-y,var(--mark-y));width:calc(var(--stage-w,160px) * 1.15);aspect-ratio:1;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.senja-bloom::before{content:"";position:absolute;inset:4%;border:1.5px solid #fff2c480;border-radius:50%;opacity:0;pointer-events:none}
.senja[data-finale="await"] .senja-bloom::before{animation:bloom-ring 1.8s ease-out infinite}
@keyframes bloom-ring{0%{opacity:.9;transform:scale(.72)}100%{opacity:0;transform:scale(1.22)}}
.site-footer .senja-bloom:focus-visible{outline:2px solid #fbf8ef;outline-offset:4px;box-shadow:0 0 0 5px #142014}
.senja:not(.is-inview) .senja-bloom::before{animation-play-state:paused}
.senja-mark{position:absolute;z-index:4;left:50%;top:var(--mark-y);translate:-50% -50%;margin:0;color:#f6f1e4;font:400 clamp(38px,min(16vw,calc(var(--senja-h) * .22)),104px)/.92 Georgia,'Times New Roman',serif;letter-spacing:-.058em;text-align:center;white-space:nowrap;text-shadow:0 0 .3em #f3e27a2e;visibility:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.senja[data-finale="bloom"] .senja-mark,.senja[data-finale="mark"] .senja-mark{visibility:visible}
.senja[data-finale="mark"] .senja-mark{pointer-events:auto}
.mark-line{position:relative;display:block}
.mark-second{margin-right:.043em}
.mark-wipe{display:inline-block;margin:-.1em -.14em -.2em -.06em;padding:.1em .14em .2em .06em}
.mark-word{display:inline-block;margin:0;padding:0;border:0;border-radius:.08em;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-shadow:inherit;cursor:pointer;transform-origin:50% 100%;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.senja-mark i{font-size:.81em;color:#e2c3a0}
.site-footer .mark-word:focus-visible{outline:2px solid #fbf8ef;outline-offset:3px}
.mark-dot{display:inline-block;color:#e2c3a0;transform-origin:50% 90%}
.mark-sprig{display:inline-block;width:.714em;height:.66em;margin-left:.223em;vertical-align:-.0435em;overflow:visible;color:#e2c3a0;transform-origin:1.9% 97.5%}
.senja[data-finale="mark"] .mark-sprig{animation:sprig-sway 7s ease-in-out infinite}
.mark-sway,.mark-stem{transform-origin:5px 238px}
.mark-leaf-1{transform-origin:47.4px 204.5px}.mark-leaf-4{transform-origin:101px 191.4px}.mark-leaf-2{transform-origin:111.4px 153.5px}.mark-leaf-3{transform-origin:159.6px 122px}
.mark-glint{transform-box:fill-box;transform-origin:50% 50%}
.mark-glint circle:first-child{fill:#fff2c4;fill-opacity:.3}
.mark-glint circle:last-child{fill:#fffbe6}
.senja[data-finale="mark"] .mark-glint{animation:glint-twinkle 2.6s ease-in-out var(--tw,0s) infinite}
@keyframes glint-twinkle{50%{opacity:.45}}
.senja-mark.is-bright .mark-glint circle:first-child{fill-opacity:.75}
.mark-pen{position:absolute;left:0;bottom:.16em;width:.1em;height:.1em;margin-left:-.05em;border-radius:50%;background:#fffbe6;box-shadow:0 0 .08em .04em #fff2c4,0 0 .36em .14em #f3e27a59;opacity:0;pointer-events:none}
.senja-keepsake{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px 0 11px;border:0;border-radius:999px;background:#f6f1e4;color:#1b2a1a;font-size:12px;font-weight:700;pointer-events:auto;animation:keepsake-in .5s var(--ease) backwards}
.senja-keepsake .icon{width:14px;height:14px;color:#a36b1f}
.senja-keepsake::after{content:"";position:absolute;inset:-4px;border:1.5px solid #f3e27a;border-radius:inherit;opacity:0;pointer-events:none;animation:keepsake-ping 1.8s ease-out .6s 2}
.senja-keepsake:hover{background:#fffaf0}
.site-footer .senja-keepsake:focus-visible{outline:2px solid #fbf8ef;outline-offset:2px;box-shadow:0 0 0 5px #142014}
@media(pointer:coarse){.senja-keepsake{min-height:44px}}
@media(max-width:599px),(pointer:coarse){.senja[data-finale="mark"] .senja-text{flex-basis:100%}}
@keyframes keepsake-in{from{opacity:0;transform:translateY(8px) scale(.92)}}
@keyframes keepsake-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25,1.6)}}
/* the footer, kept short: the wordmark on one side; the place, four links and Instagram on the other */
.footer-main{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px clamp(28px,5vw,64px);padding-top:clamp(8px,1vw,16px);padding-bottom:clamp(32px,5vw,52px);border-bottom:1px solid #f6f1e41f}
/* Konang rests in the bottom-right corner just above .footer-bottom (78px from the screen edge on phones, 95px from 641px),
   so the links keep clear of it: (100vw - 100%) / 2 is the .wrap gutter, and the padding covers what the gutter does not.
   margin-left:auto keeps the block flush right when it wraps under the wordmark. */
.footer-side{display:grid;justify-items:end;gap:16px;margin-left:auto;padding-right:max(0px,calc(112px - (100vw - 100%) / 2));text-align:right}
.footer-place{margin:0;font-size:13px;line-height:1.7;color:#c9cdb9}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 22px}
.footer-links a,.footer-links button{padding:0;border:0;background:none;color:#e8e6d6;font:inherit;font-size:14px;text-decoration:none;text-underline-offset:4px;cursor:pointer}
.footer-links a:hover,.footer-links button:hover{color:#fff;text-decoration:underline}
@media(max-width:640px){.footer-main{display:grid;align-items:start}.footer-side{justify-items:start;margin-left:0;padding-right:0;text-align:left}.footer-links{justify-content:flex-start;padding-right:max(0px,calc(86px - (100vw - 100%) / 2))}}
.footer-mark{margin:0;font:400 clamp(40px,4.4vw,56px)/.95 Georgia,'Times New Roman',serif;letter-spacing:-.05em;color:var(--paper)}
.footer-mark svg{display:inline-block;width:.714em;height:.66em;margin-left:.2em;vertical-align:-.04em;color:#c9a27f}
.footer-mark i{font-size:.81em;color:#c9a27f}
.footer-mark span{color:#c9a27f}
.footer-unit{margin:18px 0 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#b9c0a8}
.footer-instagram{display:inline-flex;align-items:center;gap:9px}
.footer-instagram .icon{width:18px;height:18px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:24px;font-size:11px;line-height:1.6;color:#a9b298}
.footer-bottom p{margin:0}
.footer-bottom a:not(.footer-top){color:inherit}
.footer-top{display:inline-flex;align-items:center;gap:8px;color:#e8e6d6;text-decoration:none}
.footer-top .icon{width:15px;height:15px;transition:transform .3s var(--ease)}
.footer-top:hover .icon{transform:translateY(-3px)}
.site-footer :focus-visible{outline-color:#e2c3a0}
.map-north path{fill:var(--ink)}
.map-north text{font:600 15px/1 Arial,Helvetica,sans-serif;letter-spacing:1px;fill:var(--ink)}
.map-north .map-north-note{font:italic 400 19px/1 Georgia,'Times New Roman',serif;letter-spacing:0;fill:var(--accent)}
.map-pin{cursor:pointer}
.map-pin .pin-hit{fill:transparent;stroke:none}
.map-pin .pin-ring,.map-pin .pin-dot{transition:transform .25s var(--ease)}
.map-pin.is-dropping .pin-ring,.map-pin.is-dropping .pin-dot{transform-box:fill-box;transform-origin:50% 100%;animation:pin-drop .5s var(--ease)}
@keyframes pin-drop{from{translate:0 -14px}70%{translate:none;scale:1.15 .85}to{translate:none;scale:none}}
.map-pin:hover .pin-ring,.map-pin:focus-visible .pin-ring,.map-pin:hover .pin-dot,.map-pin:focus-visible .pin-dot{transform:scale(1.35)}
.map-pin:focus-visible .pin-ring{stroke:var(--ink);stroke-width:3}
.map-pin:focus-visible{outline:none}
.theme-context{max-width:760px;margin:30px 0 0;font-size:13px;line-height:1.75;color:#c9cfbd}
.theme-context i{font-family:Georgia,'Times New Roman',serif;font-size:14px;color:#f6f1e4}
.theme-context a{margin-left:4px;font-size:11px;color:#e2c3a0;text-underline-offset:3px}

/* Mengenal Pakem: the setting, the meaning of the name, and three figures. */
.pakem-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:end}
.name-gloss{padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:26px;background:#fbf8ef;box-shadow:0 22px 60px #2435200f}
.name-gloss-label{margin:0 0 14px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5d6852}
.name-gloss-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.gloss-word{position:relative;padding:2px 0 6px;border:0;background:none;color:#808771;font:400 clamp(34px,3.6vw,46px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.04em;transition:color .3s}
.gloss-word.is-small{font-size:clamp(28px,2.9vw,37px);color:#a07f66}
.gloss-word::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.gloss-word:hover{color:#6f7865}
.gloss-word[aria-pressed="true"]{color:var(--ink)}
.gloss-word.is-small[aria-pressed="true"]{color:var(--accent)}
.gloss-word[aria-pressed="true"]::after{transform:scaleX(1)}
.gloss-meanings{min-height:58px;margin-top:16px}
.gloss-meaning{margin:0;font-size:14px;line-height:1.7;color:#5d6852}
.gloss-meaning b{font:italic 400 17px Georgia,'Times New Roman',serif;color:var(--ink)}
.gloss-meaning span{margin:0 4px;font-size:11px;color:#5d6852}
.gloss-meaning.is-entering{animation:place-in .45s var(--ease)}
.gloss-sum{margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;line-height:1.6;color:#5d6852}
.gloss-sum i{font-family:Georgia,'Times New Roman',serif}
.gloss-sum b{font:400 17px Georgia,'Times New Roman',serif;color:var(--accent)}
.gloss-source{margin:10px 0 0;font-size:10px;color:#5d6852}
.gloss-source a{color:inherit}
.pakem-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,7vw,80px);margin-bottom:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;padding:clamp(22px,3vw,30px) clamp(14px,2vw,26px)}
.stat+.stat{border-left:1px solid var(--line)}
.stat dt{font-size:12px;line-height:1.4;color:#5d6852}
.stat dd{margin:0;font:400 clamp(36px,4.4vw,58px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat dd small{margin-left:6px;font:12px Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--accent)}
.pakem-stats{position:relative}
.stat-bar{display:flex;gap:2px;width:100%;min-width:120px;height:8px;margin-top:16px}
.stat-bar i{display:block;flex:0 0 var(--w);height:100%;border-radius:4px;background:#dcdcca;transform-origin:left;cursor:pointer;transition:transform 1.1s var(--ease) calc(var(--n) * .15s),translate .3s var(--ease),opacity .3s,background .3s,box-shadow .3s}
.stat-bar i:nth-child(1){--w:var(--a);background:#2f5530}
.stat-bar i:nth-child(2){--w:var(--b);background:#6f8f3a}
.stat-bar i:nth-child(3){flex:1;cursor:default}
.js .pakem-stats:not(.is-revealed) .stat-bar i{transform:scaleX(0)}
.stat-map{display:inline-block;width:42px;height:82px;margin-left:16px;vertical-align:-18px;overflow:visible}
.stat-map:empty{display:none}
.mini-region{fill:#e3e4d3;stroke:#cdc8b1;stroke-width:4;stroke-linejoin:round;transition:opacity .3s,fill .3s,stroke .3s}
.js .pakem-stats.is-revealed .mini-region{animation:mini-in .5s var(--ease) calc(var(--n) * .12s) backwards}
@keyframes mini-in{from{opacity:0}}
.mini-region[data-place="purwobinangun"]{fill:#2f5530;stroke:#f4f2e7;cursor:pointer}
.mini-region[data-place="candibinangun"]{fill:#6f8f3a;stroke:#f4f2e7;cursor:pointer}
#pakem[data-hl] [data-place]:not(button){opacity:.35}
#pakem[data-hl="purwobinangun"] .stat-bar [data-place="purwobinangun"],#pakem[data-hl="candibinangun"] .stat-bar [data-place="candibinangun"]{opacity:1;background:#c6a07d;box-shadow:0 0 0 1.5px #6d4c37;translate:0 -2px}
#pakem[data-hl="purwobinangun"] .mini-region[data-place="purwobinangun"],#pakem[data-hl="candibinangun"] .mini-region[data-place="candibinangun"]{opacity:1;fill:#c6a07d;stroke:#6d4c37}
.stat-tip{position:absolute;z-index:3;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--paper);font:italic 13px/1.2 Georgia,'Times New Roman',serif;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,10px);transition:opacity .15s}
.stat-tip.is-visible{opacity:1}
.legend-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.legend-other{padding-left:18px;border-left:1px solid var(--line)}
.stats-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px;margin-bottom:0;font-size:11px;line-height:1.5;color:#5d6852}
.legend-item{display:inline-flex;align-items:center;gap:7px}
.legend-swatch{width:14px;height:8px;border-radius:3px;background:#dcdcca}
.legend-swatch.is-purwobinangun{background:#2f5530}
.legend-swatch.is-candibinangun{background:#6f8f3a}
.stats-legend button{padding:0;border:0;background:none;color:var(--ink);font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.stats-legend button:hover{color:var(--accent)}
@media(pointer:coarse){.stats-legend button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.js .pakem-stats:not(.is-revealed) .stat-bar i{transform:none}}
@media(max-width:600px){.stat-map{width:30px;height:58px;vertical-align:-12px}}
.stats-source{margin-top:10px;margin-bottom:0;font-size:10px;line-height:1.7;color:#5d6852}
.stats-source a{color:inherit}
@media(max-width:980px){.pakem-intro{grid-template-columns:1fr}}
@media(max-width:600px){.pakem-stats{grid-template-columns:1fr}.stat{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;padding:18px 2px}.stat+.stat{border-left:0;border-top:1px solid var(--line)}.stat dt{text-align:right}}
@media(max-width:560px){.stat dd{font-size:34px}}

/* Lokasi: details for the kalurahan panel and the Google map. */
.title-count{display:inline-block;color:var(--accent)}
.places{grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr)}
.places-map figcaption{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.place-note{margin:0 0 22px;padding:14px 16px;border-left:3px solid #d9b994;border-radius:0 14px 14px 0;background:#f3ede0;font-size:13px;line-height:1.7;color:#5d6852}
.place-note b{color:var(--ink)}
.place-note i{font-family:Georgia,'Times New Roman',serif}
.place-source{margin:16px 0 0;font-size:10px;color:#5d6852}
.place-source a{color:inherit}
.gmap-kicker{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#5d6852}
.gmap-view{position:absolute;top:14px;right:14px;z-index:2;display:none;gap:3px;padding:4px;border-radius:30px;background:#f6f1e4f0;box-shadow:0 6px 18px #24352024}
.gmap.is-loaded .gmap-view{display:flex}
.gmap.is-loaded .gmap-facade{display:none}
.gmap-view button{min-height:34px;padding:0 14px;border:0;border-radius:30px;background:none;color:#4a5840;font-size:12px}
.gmap-view button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.places{grid-template-columns:1fr}.places-map svg{height:min(520px,72vh)}}
.gmap-ghost{position:absolute;inset:8% 0;width:100%;height:84%;overflow:visible;opacity:.6;pointer-events:none}
/* One map card, two views: the schematic map, or Google's map in the same place, so the section stays short. */
.map-stage{position:relative}
.map-switch{position:relative;z-index:3;display:flex;width:max-content;gap:3px;margin:0 0 10px;padding:4px;border-radius:30px;background:#ebe8d9}
@media(min-width:901px){.places-map svg{height:clamp(420px,calc(100vh - 290px),560px)}}
.map-switch button{min-height:36px;padding:0 13px;border:0;border-radius:30px;background:none;color:#4a5840;font-size:12px;white-space:nowrap;transition:background .25s,color .25s}
.map-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media(hover:hover) and (pointer:fine){.map-switch button[aria-pressed="false"]:hover{background:#dfe2cf}}
@media(pointer:coarse){.map-switch button{min-height:40px}}
.places-map .gmap{position:absolute;inset:clamp(8px,1.2vw,12px);z-index:2;width:auto;margin:0;aspect-ratio:auto;min-height:0;border-radius:20px;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.places-map[data-view="google"] .gmap{visibility:visible;opacity:1}
.places-map[data-view="google"] :is(.map-stage,.map-legend){visibility:hidden}
.places-map .gmap-facade{padding:72px 24px 24px}
.places-map[data-view="google"] .gmap{transition:opacity .35s,visibility 0s}
@media(min-width:601px){.places-map .gmap{top:calc(clamp(14px,2vw,22px) + 58px)}.places-map .gmap-facade{padding-top:24px}}
html:not(.js) :is(.map-switch,.place-button.is-map){display:none}
/* Phones: the tall map sits on the left, with the switch, legend and credit beside it instead of below. */
@media(max-width:600px){
.places{gap:20px;margin-top:28px}
.places-map{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px 10px;padding:12px;border-radius:22px}
.map-stage{grid-area:1/1/3/2}
.places-map figcaption{grid-area:2/2/3/3;align-self:end}
.places-map svg{height:min(420px,56vh,calc((100vw - 180px) * 1.96))}
.places-map figcaption{gap:12px;margin:0}
.map-switch{grid-area:1/2/2/3;flex-direction:column;width:auto;margin:0;border-radius:18px}
.map-switch button{padding:0 8px;font-size:11.5px}
.map-legend{flex-direction:column;gap:8px;margin:0}
.places-map .gmap-facade{padding:104px 16px 20px}
.places-map .gmap-view{top:104px;right:4px;bottom:auto;left:auto;flex-direction:column}
.region-label.is-target{font-size:21px;letter-spacing:.6px}
.map-pin .pin-hit{transform:scale(1.36)}
.place-tabs{margin-bottom:16px}
.place-kicker{margin-bottom:10px}
.place-text{font-size:14.5px;line-height:1.72}
.place-facts{margin:16px 0}
.place-facts div{padding:11px 14px}
.place-chips{gap:6px;margin-bottom:16px}
.place-chips li{padding:6px 11px}
.place-note{margin-bottom:16px;padding:12px 14px}
.place-actions{flex-wrap:nowrap;gap:8px}
.place-button{padding:0 15px}
.place-source{margin-top:12px}
.chapter-places{padding-bottom:56px}
}
.gmap-ghost path{fill:#c6a07d14;stroke:#c2573f;stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.gmap-facade>:not(.gmap-ghost){position:relative}
.theme-context a:focus-visible{outline-color:#e2c3a0}
/* Kilas balik senjamu */
.kilas-dialog{--hill-back:#1a2925;width:min(440px,calc(100% - 16px));max-height:calc(100svh - 16px);color:#f6f1e4}
.kilas-card{position:relative;isolation:isolate;display:flex;flex-direction:column;height:min(820px,calc(100svh - 16px));padding:16px 18px 12px;overflow:auto;overscroll-behavior:contain;border-radius:22px;background:radial-gradient(130% 70% at 50% 0,#2b4058,#16243a 55%,#0d1729);box-shadow:0 35px 110px #09170d70,inset 0 0 0 1px #f6f1e41f;transform-origin:50% 85%}
dialog[open] .kilas-card{animation:kilas-in .62s var(--ease) both}
dialog.is-closing .kilas-card{animation:postcard-out .24s ease-in both}
@keyframes kilas-in{from{opacity:0;transform:translateY(36px) rotate(-2.5deg) scale(.94)}}
.kilas-dialog .close-dialog{top:12px;right:12px}
@media(pointer:coarse){.kilas-dialog .close-dialog{width:44px;height:44px}}
.kilas-dialog :focus-visible{outline:2px solid #f3e27a;outline-offset:3px}
.kilas-hills{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:24%;pointer-events:none;fill:#1a2925}
.kilas-progress{display:flex;gap:4px;margin:4px 56px 12px 0}
.kilas-progress i{flex:1;height:3px;border-radius:2px;background:#f6f1e433;overflow:hidden}
.kilas-progress i::after{content:"";display:block;height:100%;background:#f6f1e4;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.kilas-progress i.is-done::after,.kilas-progress i.is-current::after{transform:none}
.kilas-progress i.is-current::after{background:#f3dfb4}
.kilas-brand{display:flex;justify-content:space-between;gap:12px;margin:0 56px 0 0;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#e2c3a0}
.kilas-slides{position:relative;display:grid;flex:1 0 auto;min-height:0;touch-action:pan-y}
.kilas-slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;padding:18px 0 10px}
.kilas-slide.is-post{justify-content:flex-start;gap:10px}
.kilas-kicker{margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#e2c3a0}
.kilas-slide h3{margin:0;font:400 clamp(30px,8.4vw,38px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.8px;color:#f6f1e4}
.kilas-slide h3 i{color:#e2c3a0}
.kilas-slide h3.kilas-title{font-size:clamp(40px,12vw,56px);line-height:1}
.kilas-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .16em;margin:0;font:400 clamp(64px,21vw,104px)/.95 Georgia,'Times New Roman',serif;letter-spacing:-.04em;color:#f6f1e4}
.kilas-big b{font-weight:400}
.kilas-big small{margin-right:.5em;font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#e2c3a0}
.kilas-lead{margin:0;font:italic 18px/1.45 Georgia,'Times New Roman',serif;color:#e8e6d6}
.kilas-note{margin:0;font-size:13.5px;line-height:1.55;color:#b9c0a8}
.kilas-note b{font-weight:700;color:#f6f1e4}
.kilas-note i{font-family:Georgia,'Times New Roman',serif;color:#e2c3a0}
.kilas-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.kilas-tiles li{padding:12px 10px;border-radius:14px;background:#f6f1e414}
.kilas-tiles b{display:block;margin-bottom:6px;font:400 28px/1 Georgia,'Times New Roman',serif;color:#f6f1e4}
.kilas-tiles span{display:block;font-size:11.5px;line-height:1.35;color:#c9cdbc}
.kilas-phrase{margin:0;font:400 clamp(40px,12vw,56px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:#f6f1e4}
.kilas-phrase i{color:#e2c3a0}
.kilas-gloss{display:grid;gap:8px;margin:0}
.kilas-gloss div{display:grid;grid-template-columns:5.2em 1fr;gap:10px;align-items:baseline;padding-top:8px;border-top:1px solid #f6f1e41f}
.kilas-gloss dt{font:400 18px/1.2 Georgia,'Times New Roman',serif;color:#f6f1e4}
.kilas-gloss dt i{color:#e2c3a0}
.kilas-gloss dd{margin:0;font-size:13.5px;line-height:1.45;color:#d9dccb}
.kilas-source{margin:0;font-size:11px;color:#b9c0a8}
.kilas-visual{display:block;width:100%;height:auto;max-height:34svh;overflow:visible}
.kilas-team{max-height:none}
.kilas-team svg{display:block;width:100%;height:auto;max-height:22svh;overflow:visible}
.kilas-clusters{display:grid;grid-template-columns:repeat(3,1fr);margin:2px 0 0;padding:0;list-style:none;font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:center;color:#e2c3a0}
.kilas-dust{fill:#fffbe6}
.kilas-lines{fill:none;stroke:#fff2c4;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.kilas-trail line{stroke:#f3e27a;stroke-width:1;stroke-dasharray:1.5 3;stroke-linecap:round}
.kilas-trail circle{fill:#f3e27a}
.kilas-star{transform-box:fill-box;transform-origin:50% 50%}
.kilas-star circle{fill:#fffbe6}
.kilas-ghost{fill:#e2c3a0}
.kilas-post{position:relative;align-self:center;width:min(100%,340px,max(232px,calc((100svh - 300px) * .8)));max-height:none;aspect-ratio:4/5;container-type:inline-size;perspective:1100px;touch-action:pan-y;cursor:pointer}
.kilas-post-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.kilas-post.is-flipped .kilas-post-inner{transform:rotateY(180deg)}
.kilas-face{position:absolute;inset:0;overflow:hidden;border-radius:14px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.kilas-face.is-front{background:linear-gradient(180deg,#111e33,#263a50);box-shadow:inset 0 0 0 6px #f6f1e4,0 18px 40px #0009}
.kilas-face.is-front .kilas-sky{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:58%}
.kilas-ridge{position:absolute;left:6px;bottom:6px;width:calc(100% - 12px);height:40%;fill:#1a2925}
.kilas-wordmark{position:absolute;left:50%;top:60%;margin:0;transform:translate(-50%,-50%);font:400 clamp(26px,11vw,46px)/.92 Georgia,'Times New Roman',serif;font-size:14cqi;letter-spacing:-.058em;white-space:nowrap;text-align:center;color:#f6f1e4}
.kilas-wordmark svg{display:inline-block;width:.714em;height:.66em;margin-left:.223em;vertical-align:-.0435em;color:#e2c3a0}
.kilas-wordmark i,.kilas-wordmark span{color:#e2c3a0}.kilas-wordmark i{font-size:.81em}
.kilas-post-foot{position:absolute;left:0;right:0;bottom:16px;margin:0;font-size:clamp(8px,3.1cqi,10px);letter-spacing:1.6px;text-transform:uppercase;text-align:center;color:#e2c3a0}
.kilas-face.is-back{display:grid;grid-template-rows:auto auto 1fr auto;gap:.9em;padding:1.4em 1.3em 1.3em;font-size:clamp(9px,3.9cqi,12.5px);transform:rotateY(180deg);background:#f6f1e4;color:#303e31;box-shadow:inset 0 0 0 1px #c9cdb9,0 18px 40px #0009}
.kilas-back-top{position:relative;display:grid;grid-template-columns:1fr auto;gap:1em;align-items:start}
.kilas-greet{margin:0;font:italic 1.4em/1.3 Georgia,'Times New Roman',serif}
.kilas-greet i{color:#87634c}
.kilas-stamp{position:relative;display:grid;place-items:center;width:4.5em;height:5.3em;background:#16243a;color:#e2c3a0;outline:2px dashed #f6f1e4;outline-offset:-5px;box-shadow:0 0 0 4px #f6f1e4,0 0 0 5px #c9cdb9}
.kilas-stamp svg{width:2.6em;height:2.4em}
.kilas-stamp b{position:absolute;bottom:.5em;font:700 .65em Arial,Helvetica,sans-serif;letter-spacing:1px;color:#e2c3a0}
.kilas-postmark{position:absolute;right:2.4em;top:3em;width:6em;height:6em;transform:rotate(-12deg);color:#87634c;opacity:.85;pointer-events:none}
.kilas-postmark circle{fill:none;stroke:currentColor;stroke-width:1.4}
.kilas-postmark text{font:700 8px Arial,Helvetica,sans-serif;letter-spacing:1.2px;fill:currentColor}
.kilas-tally{display:grid;gap:.4em;margin:0;padding:0 0 0 .8em;border-left:2px solid #c9a27f;list-style:none;line-height:1.35;color:#4e5a47}
.kilas-to{margin:0;font-size:.8em;letter-spacing:1.2px;text-transform:uppercase;color:#5d6653}
.kilas-to i{display:block;margin-top:.3em;padding-bottom:.3em;border-bottom:1px dotted #9aa38a;font:italic 1.5em Georgia,'Times New Roman',serif;letter-spacing:0;text-transform:none;color:#303e31}
.kilas-sign{margin:0;font:400 1.3em/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.kilas-sign span{display:block;margin-top:.35em;font:max(8.5px,.62em) Arial,Helvetica,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#5d6653}
.kilas-actions .kilas-flip{flex:none;display:grid;place-items:center;width:46px;padding:0;border:1px solid #f6f1e466;background:#f6f1e40f;color:#f6f1e4}
.kilas-flip .icon{width:18px;height:18px}
.kilas-actions{display:flex;gap:8px}
.kilas-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:999px;font-size:13.5px}
.kilas-share{border:1px solid #f6f1e466;background:#f6f1e40f;color:#f6f1e4}
.kilas-story{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;padding:0 18px;border:0;border-radius:999px;background:#f6f1e4;color:#1b2a1a;font-size:14px;font-weight:700;box-shadow:0 0 0 1px #f3e27a55,0 12px 28px #0007}
.kilas-story .icon{width:19px;height:19px;color:#a36b1f}
@media(hover:hover) and (pointer:fine){.kilas-story:hover{background:#fffaf0}}
.kilas-card.has-shot{overflow:hidden}
.kilas-shot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px 20px;background:#0d1729f5}
.kilas-shot-img{display:block;width:auto;max-width:100%;height:auto;max-height:min(60svh,560px);border-radius:14px;box-shadow:0 18px 40px #0009;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.kilas-shot-note{max-width:36ch;margin:0;font-size:13px;line-height:1.55;text-align:center;color:#d9dccb}
.kilas-shot-actions{display:flex;gap:8px;width:100%;max-width:340px}
.kilas-shot-actions>*{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:999px;font-size:13.5px;text-decoration:none}
.kilas-shot-save{border:0;background:#f6f1e4;color:#1b2a1a;font-weight:700}
.kilas-shot-close{border:1px solid #f6f1e466;background:#f6f1e40f;color:#f6f1e4}
.kilas-shot .icon{width:17px;height:17px}
.kilas-save{border:1px solid #f6f1e466;background:#f6f1e40f;color:#f6f1e4}
.kilas-more{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin:0}
.kilas-more button,.kilas-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:#e8e6d6;font-size:12.5px;text-decoration:underline;text-decoration-color:#e8e6d666;text-underline-offset:4px}
.kilas-link{width:100%;min-height:40px;padding:0 12px;border:1px solid #f6f1e466;border-radius:10px;background:#0d1729;color:#f6f1e4;font-size:12px}
.kilas-share-status{min-height:1.4em;margin:0;font-size:12.5px;text-align:center;color:#e2c3a0}
.kilas-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #f6f1e41f}
.kilas-nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 16px;border:1px solid #f6f1e440;border-radius:999px;background:#f6f1e412;color:#f6f1e4;font-size:13px}
.kilas-prev{padding:0}
.kilas-nav button:disabled{opacity:.35;cursor:default}
.kilas-nav .icon{width:17px;height:17px}
.kilas-next .icon-done,.kilas-next.is-last .icon-next{display:none}.kilas-next.is-last .icon-done{display:inline-block}
.kilas-count{font-size:11px;letter-spacing:1.4px;color:#b9c0a8}
@media(max-width:360px){.kilas-card{padding:14px 14px 10px}.kilas-big{font-size:clamp(56px,20vw,72px)}}
@media(max-height:500px) and (orientation:landscape){.kilas-dialog{width:min(780px,calc(100% - 24px))}.kilas-card{height:calc(100svh - 16px);padding:12px 18px 10px}.kilas-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;column-gap:22px;row-gap:8px;padding-top:6px}.kilas-slide.is-text{display:flex}.kilas-slide>.kilas-visual{grid-column:1;grid-row:1/span 8;max-height:calc(100svh - 150px);justify-self:center}.kilas-slide>:not(.kilas-visual){grid-column:2}.kilas-post{width:auto;height:calc(100svh - 150px)}.kilas-big{font-size:clamp(48px,14svh,72px)}}

/* 04 Sponsor dan mitra: a small night between Lokasi and the Senja sky. The title rolls through the ways to say thanks,
   a firefly writes the last words in light, then fireflies carry that light down to each sponsor's card. */
/* The section ships with the hidden attribute and shows itself once a <li class="sponsor"> exists (script.js, or :has() without JS). */
.chapter-sponsor{--senja-gap:clamp(64px,9vw,120px);--night-w:min(1120px,100% - 20px);--night-r:24px;padding:var(--senja-gap) 0 clamp(56px,7vw,96px);background:linear-gradient(180deg,#f4ead6 0,#f4ead6 18%,#e6ece0 calc(100% - clamp(56px,7vw,96px)))}
.chapter-sponsor[hidden]:has(.sponsor),.sponsor-group[hidden]:has(.sponsor){display:block!important}
/* the night's width and corner radius, shared with the near hills of Senja turun above it (.jalan-tepi) */
@media(min-width:600px){.chapter-sponsor{--night-w:min(1120px,100% - 2 * clamp(20px,5vw,64px));--night-r:32px}}
.sponsor-night{--spring:cubic-bezier(.34,1.56,.64,1);position:relative;isolation:isolate;overflow:clip;width:var(--night-w);margin:0 auto;padding:34px 14px 40px;border-radius:var(--night-r);background:radial-gradient(110% 55% at 50% 0,#2e46624d,#2e466200 70%),radial-gradient(60% 40% at 80% 100%,#fccc3d12,#fccc3d00 70%),linear-gradient(180deg,#15233a 0,#142a31 58%,#12261f 100%);box-shadow:0 18px 40px -16px #0a1a1452,inset 0 0 0 1px #f6f1e412;text-align:center;color:#e8e6d6}
@media(min-width:600px){.sponsor-night{padding:clamp(44px,5.4vw,72px) clamp(24px,4.4vw,56px) clamp(52px,6vw,80px)}}
.sponsor-sky{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(1.4px 1.4px at 7% 12%,#fffbe6b3 50%,#fffbe600),radial-gradient(1px 1px at 18% 30%,#fffbe68c 50%,#fffbe600),radial-gradient(1.2px 1.2px at 31% 8%,#fffbe699 50%,#fffbe600),radial-gradient(1px 1px at 46% 22%,#fffbe673 50%,#fffbe600),radial-gradient(1.4px 1.4px at 63% 10%,#fffbe6a6 50%,#fffbe600),radial-gradient(1px 1px at 77% 26%,#fffbe680 50%,#fffbe600),radial-gradient(1.2px 1.2px at 91% 14%,#fffbe6a6 50%,#fffbe600),radial-gradient(1px 1px at 86% 44%,#fffbe659 50%,#fffbe600),radial-gradient(1px 1px at 11% 52%,#fffbe659 50%,#fffbe600)}
.sponsor-ridge{position:absolute;left:0;bottom:0;z-index:0;width:100%;height:clamp(40px,7vw,90px);pointer-events:none}
.sponsor-ridge path:first-child{fill:#0f211d;fill-opacity:.55}
.sponsor-ridge path:last-child{fill:#0d1c18;fill-opacity:.7}
.sponsor-head{position:relative;z-index:1;max-width:680px;margin:0 auto clamp(30px,4.4vw,48px)}
.sponsor-night .section-eyebrow{justify-content:center;color:#b9c0a8}
.sponsor-night .section-eyebrow::before{border-color:#e2c3a0;background:#fccc3d;color:#17352f}
.js .sponsor-night .section-eyebrow:not(.is-revealed)::before{background:#15233a;color:#e2c3a0}
.sponsor-night .section-eyebrow.is-revealed::before{animation-name:pos-ping-sun}
@media(prefers-reduced-motion:reduce){.js .sponsor-night .section-eyebrow:not(.is-revealed)::before{background:#fccc3d;color:#17352f}}
.sponsor-head .section-lead{max-width:440px;margin:0 auto;color:#c9cfbd;text-wrap:balance}
/* The title: line 1 is a credits slot (Disponsori oleh, Ditenagai oleh, Terima kasih), line 2 is written in light. */
.sponsor-title{margin-bottom:16px;font-size:min(clamp(40px,5.4vw,70px),10.4vw);color:#f6f1e4}
.sponsor-title i{color:#e2c3a0}
.sponsor-line{position:relative;display:block}
.sponsor-slot{display:inline-grid;justify-items:center;vertical-align:top;margin:-.06em -.1em -.22em;padding:.06em .1em .22em;overflow:clip}
.sponsor-slot>span{grid-area:1/1;white-space:nowrap;color:#c9cfbd;opacity:0}
.sponsor-slot>span:nth-child(2){--k:1}
.sponsor-slot>.is-final{color:inherit;opacity:1}
.sponsor-wipe{display:inline-block;margin:-.1em -.14em -.2em -.06em;padding:.1em .14em .2em .06em}
.sponsor-dot{display:inline-block;color:#e2c3a0;transform-origin:50% 90%}
.sponsor-pen{position:absolute;left:0;bottom:.16em;width:.1em;height:.1em;margin-left:-.05em;border-radius:50%;background:#fffbe6;box-shadow:0 0 .08em .04em #fff2c4,0 0 .36em .14em #f3e27a59;opacity:0;pointer-events:none}
.sponsor-night.is-armed .sponsor-wipe{white-space:nowrap}
.sponsor-title.is-played:not(.is-settled) .sponsor-slot>span{animation:slot-pass .7s cubic-bezier(.65,0,.25,1) calc(var(--k,0) * .45s) both}
.sponsor-title.is-played:not(.is-settled) .sponsor-slot>.is-final{animation:slot-land .85s var(--ease) both}
@keyframes slot-pass{0%{opacity:0;transform:translateY(.9em)}30%,62%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.9em)}}
@keyframes slot-land{0%{opacity:0;transform:translateY(.9em)}55%{opacity:1;transform:translateY(-.05em)}100%{opacity:1;transform:none}}
/* Ambient fireflies wander behind the cards; they pause off screen and stop when motion is reduced. */
.sponsor-fly{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;animation:firefly-drift var(--dur) ease-in-out var(--delay) infinite;transition:opacity 1.4s ease var(--fade,0s)}
.sponsor-fly span{display:block;width:100%;height:100%;border-radius:50%;background:#fff6b8;box-shadow:0 0 8px 3px #f3e27a,0 0 22px 8px #f3e27a55;animation:firefly-glow 2.2s ease-in-out var(--delay) infinite alternate}
.js .sponsor-night:not(.is-revealed) .sponsor-fly{opacity:0}
.sponsor-night:not(.is-inview) :is(.sponsor-fly,.sponsor-fly span){animation-play-state:paused}
/* Groups and optional tier headings. Headings show only when two or more groups have sponsors. */
.sponsor-field{position:relative;z-index:1;display:grid;gap:clamp(30px,4.4vw,48px)}
.sponsor-tier{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 18px;font:700 10.5px/1.3 Arial,Helvetica,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#e2c3a0}
.sponsor-tier::before,.sponsor-tier::after{content:"";flex:0 1 56px;height:1px;background:#e2c3a059}
.chapter-sponsor.is-single-tier .sponsor-tier{display:none}
/* Columns follow the number of sponsors in each list; a partial last row stays centred. */
.sponsor-list{--cols:2;--gap:12px;--box-h:50px;--base:48px;--card-max:260px;--pad:16px 10px 13px;--name:11.5px;--aura:#fccc3d;--aura-soft:#fccc3d59;--aura-rest:.5;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin:0;padding:0;list-style:none}
.sponsor-list:has(>:nth-child(9)){--cols:3;--gap:10px;--box-h:40px;--base:38px;--pad:13px 8px 10px;--name:11px;--aura-rest:.36}
@media(min-width:600px){
.sponsor-list{--cols:3;--gap:16px;--box-h:56px;--base:56px;--pad:20px 16px 16px;--name:12px}
.sponsor-list:has(>:nth-child(4)):not(:has(>:nth-child(5))),.sponsor-list:has(>:nth-child(7)){--cols:4}
.sponsor-list:has(>:nth-child(9)){--gap:14px;--box-h:48px;--base:46px;--pad:16px 12px 14px;--name:11.5px}
}
@media(min-width:900px){
.sponsor-list{--gap:18px;--box-h:62px;--base:62px}
.sponsor-list:has(>:nth-child(9)){--cols:5;--box-h:54px;--base:54px}
.sponsor-list:has(>:nth-child(11)){--cols:6;--box-h:50px;--base:50px}
}
.sponsor-list:not(:has(>:nth-child(3))){--cols:2}
.sponsor-list:not(:has(>:nth-child(2))){--cols:1}
/* Tiers are optional. Utama is larger and warmer, never more than three across; mitra media is smaller and denser. */
[data-tier="mitra"]>.sponsor-list{--box-h:36px;--base:34px;--card-max:200px;--pad:12px 8px 10px;--name:11px;--aura:#e2c3a0;--aura-soft:#e2c3a04d;--aura-rest:.4}
[data-tier="mitra"]>.sponsor-list:has(>:nth-child(3)){--cols:3;--gap:10px}
@media(min-width:600px){
[data-tier="mitra"]>.sponsor-list{--box-h:40px;--base:40px;--pad:14px 10px 12px;--name:11px}
[data-tier="mitra"]>.sponsor-list:has(>:nth-child(5)){--cols:5}
}
@media(min-width:900px){
[data-tier="mitra"]>.sponsor-list{--box-h:44px;--base:44px}
[data-tier="mitra"]>.sponsor-list:has(>:nth-child(6)){--cols:6}
}
/* Sponsor utama: one big card per row on phones, two side by side from tablet up, three across only on wide screens. */
[data-tier="utama"]>.sponsor-list{--cols:1;--gap:14px;--box-h:64px;--base:80px;--card-max:340px;--pad:22px 18px 16px;--name:12.5px;--aura-rest:.6}
@media(min-width:600px){[data-tier="utama"]>.sponsor-list{--cols:2;--gap:20px;--box-h:84px;--base:92px;--card-max:400px;--pad:28px 22px 20px;--name:13px}}
@media(min-width:900px){[data-tier="utama"]>.sponsor-list{--box-h:96px;--base:104px;--card-max:440px}[data-tier="utama"]>.sponsor-list:has(>:nth-child(5)){--cols:3}}
/* A lone sponsor in a list (except mitra media) gets a wide card of its own. */
:is([data-tier="utama"],[data-tier="pendukung"])>.sponsor-list:not(:has(>:nth-child(2))){--box-h:70px;--base:68px;--card-max:300px;--pad:24px 18px 18px;--name:12.5px;--aura-rest:.6}
@media(min-width:600px){:is([data-tier="utama"],[data-tier="pendukung"])>.sponsor-list:not(:has(>:nth-child(2))){--box-h:92px;--base:92px;--card-max:380px;--pad:30px 24px 22px;--name:13px}}
.sponsor{position:relative;display:flex;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));max-width:var(--card-max);min-width:0}
/* Every logo sits on the same cream card, so any colour reads; a white background in the file melts into it (multiply).
   Nothing between the card and the img may animate opacity or transform, or the blend is isolated and the white shows. */
.sponsor-card{position:relative;z-index:1;display:grid;grid-template-rows:var(--box-h) auto;align-content:center;justify-items:center;gap:10px;width:100%;padding:var(--pad);border-radius:16px;background:#fbf8ef;box-shadow:0 8px 16px -6px #050d1a80,inset 0 0 0 1px #fffdf6;color:#5d6852;text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease)}
.sponsor-card>img,.sponsor-mark img{display:block;max-width:100%;max-height:var(--box-h);width:auto;height:auto;mix-blend-mode:multiply}
.sponsor-logo{display:flex;align-items:center;justify-content:center;width:100%;height:var(--box-h);min-width:0}
.sponsor-mark{position:relative;display:block;max-width:100%}
.sponsor.is-fit .sponsor-mark{width:min(100%,calc(var(--base) * var(--lw)),calc(var(--box-h) * var(--r)));aspect-ratio:var(--r)}
.sponsor.is-fit .sponsor-mark img{position:absolute;left:calc(var(--ox) * -100%);top:calc(var(--oy) * -100%);width:calc(var(--zx) * 100%);max-width:none;max-height:none;height:auto}
.sponsor-name{max-width:100%;font-size:var(--name);line-height:1.3;letter-spacing:.2px;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.chapter-sponsor[data-nama="sembunyi"] .sponsor-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chapter-sponsor[data-nama="sembunyi"] .sponsor-card{grid-template-rows:var(--box-h)}
/* A logo made for dark backgrounds (white on transparent) gets a night card: found automatically, or set with data-latar="gelap". */
.sponsor.is-light .sponsor-card{background:#1f3236;box-shadow:0 8px 16px -6px #050d1a80,inset 0 0 0 1px #f6f1e42e;color:#d9dccb}
.sponsor.is-light .sponsor-mark img,.sponsor.is-light .sponsor-card>img{mix-blend-mode:normal}
/* A file that fails to load shows the name as a small wordmark, never an empty card. */
.sponsor.is-broken .sponsor-logo,.sponsor.is-broken .sponsor-card>img{display:none}
.sponsor.is-broken .sponsor-card{grid-template-rows:auto}
.sponsor.is-broken .sponsor-name{display:grid;place-items:center;min-height:var(--box-h);font:italic 400 calc(var(--name) * 1.55)/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:#303e31}
.chapter-sponsor[data-nama="sembunyi"] .sponsor.is-broken .sponsor-name{position:static;width:auto;height:auto;clip-path:none;white-space:normal}
/* One logo that already says who it is can drop its name too: data-nama="sembunyi" on its li. The name is still read aloud, and the logo grows into the space. */
.sponsor[data-nama="sembunyi"] .sponsor-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sponsor[data-nama="sembunyi"] .sponsor-card{grid-template-rows:var(--box-h)}
.sponsor[data-nama="sembunyi"].is-broken .sponsor-name{position:static;width:auto;height:auto;clip-path:none;white-space:normal}
[data-tier="utama"] .sponsor[data-nama="sembunyi"]{--box-h:104px;--base:104px}
@media(min-width:600px){[data-tier="utama"] .sponsor[data-nama="sembunyi"]{--box-h:128px;--base:128px}}
@media(min-width:900px){[data-tier="utama"] .sponsor[data-nama="sembunyi"]{--box-h:136px;--base:136px}}
/* Linked cards carry no corner mark: the whole card is the link, and it lifts under the mouse. */
/* The aura: a gold halo hugging each card, painted once; only its opacity and scale ever move. Its warm fill shows as a rim of light when it swells.
   It sits on the list item (which must never become a stacking context), so every halo stays behind every card. */
.sponsor::before{content:"";position:absolute;inset:0;z-index:0;border-radius:16px;background:#fff1c4;box-shadow:0 0 12px 2px var(--aura),0 0 40px 10px var(--aura-soft);opacity:var(--aura-rest);pointer-events:none;transition:opacity .35s}
.sponsor.is-landing::after{content:"";position:absolute;inset:-5px;z-index:2;border:1.5px solid #fff2c4;border-radius:21px;opacity:0;pointer-events:none}
.sponsor.is-landing .sponsor-card::after,a.sponsor-card:hover::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,#fff8dc00 32%,#fff8dcc2 48%,#fff8dc00 64%);transform:translateX(-115%);pointer-events:none}
/* Long lists (9 or more) keep the flight, the bloom and the halo, and drop the ring, the sheen and the name rise, so fewer layers move at once. */
.sponsor-list:has(>:nth-child(9)) .sponsor.is-landing::after,.sponsor-list:has(>:nth-child(9)) .sponsor.is-landing .sponsor-card::after{content:none}
.sponsor-spark{position:absolute;left:50%;top:50%;z-index:3;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff6b8;box-shadow:0 0 8px 3px #f3e27a,0 0 22px 8px #f3e27a55;opacity:0;pointer-events:none}
/* Landing: the firefly flashes, the card blooms, the halo swells and settles, a ring of light opens, a sheen crosses the logo. */
.sponsor.is-landing .sponsor-card{animation:sponsor-card .7s var(--spring) var(--at,0ms) backwards}
.sponsor.is-landing .sponsor-name{animation:sponsor-name .5s var(--ease) calc(var(--at,0ms) + 220ms) backwards}
.sponsor.is-landing .sponsor-card::after{animation:sponsor-sweep .85s cubic-bezier(.45,0,.25,1) calc(var(--at,0ms) + 180ms)}
.sponsor.is-landing::before{animation:sponsor-aura 1.4s ease-out var(--at,0ms) backwards}
.sponsor.is-landing::after{animation:sponsor-ring 1s ease-out var(--at,0ms) backwards}
.sponsor.is-visited::before{animation:sponsor-visit 2.2s ease-in-out}
.sponsor-list:has(>:nth-child(9)) .sponsor.is-landing .sponsor-name{animation:none}
@keyframes sponsor-card{from{opacity:0;transform:translateY(12px) scale(.84)}}
@keyframes sponsor-name{from{opacity:0;transform:translateY(5px)}}
@keyframes sponsor-sweep{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@keyframes sponsor-sweep-again{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@keyframes sponsor-aura{0%{opacity:0;transform:scale(.7)}28%{opacity:1;transform:scale(1.05)}}
@keyframes sponsor-ring{0%{opacity:0;transform:scale(.92)}10%{opacity:.95}100%{opacity:0;transform:scale(1.07)}}
@keyframes sponsor-visit{45%{opacity:.95;transform:scale(1.04)}}
/* Touch first: a press answers at once. Hover and the replayed sheen are for a mouse only. */
a.sponsor-card:active{transform:scale(.97)}
.sponsor:has(a.sponsor-card:active)::before,.sponsor:has(:focus-visible)::before{opacity:.95}
.chapter-sponsor .sponsor-card:focus-visible{outline:2px solid #e2c3a0;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
a.sponsor-card:hover{transform:translateY(-3px)}
.sponsor:has(a.sponsor-card:hover)::before{opacity:.85}
a.sponsor-card:hover::after{animation:sponsor-sweep-again .8s cubic-bezier(.45,0,.25,1)}
}
/* Waiting states exist only with motion allowed and after script.js has armed the section, so a script error leaves everything visible. */
@media(prefers-reduced-motion:no-preference){
.js body .sponsor-night.is-armed .sponsor-title:not(.is-played) :is(.sponsor-slot>.is-final,.sponsor-dot){opacity:0}
.js body .sponsor-night.is-armed .sponsor-title:not(.is-played) .sponsor-wipe{clip-path:inset(0 100% 0 0)}
.js body .sponsor-night.is-armed .sponsor:not(.is-lit){opacity:0;pointer-events:none}
}
@media(forced-colors:active){.sponsor::before{display:none}.sponsor-card{border:1px solid CanvasText}}
/* Sponsor utama is crowned: fireflies arrive from every side, a comet of light runs twice round the card, and a gold rim stays.
   The rim is a masked band; only the comet inside it rotates, so the motion stays on the compositor. */
.sponsor-crown{position:absolute;inset:-3px;z-index:2;padding:2px;border-radius:19px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sponsor-crown::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#f6dd9a,#c99a4e 38%,#f3e2b0 62%,#b88a40);opacity:.9}
.sponsor-crown>span{position:absolute;inset:-100%;background:conic-gradient(from 0deg,#fff8dc00 0 70%,#fff2c4 86%,#fffbe6 93%,#fff8dc00 100%);opacity:0}
.sponsor.is-crowning .sponsor-crown>span{animation:crown-run 1.9s cubic-bezier(.45,0,.25,1) var(--at,0ms) both}
.sponsor.is-crowning .sponsor-crown::before{animation:crown-rim 1.6s ease calc(var(--at,0ms) + .3s) backwards}
.sponsor.is-crowning::before{animation:crown-aura 2.1s ease-out var(--at,0ms) backwards}
@keyframes crown-run{0%{opacity:0;transform:rotate(-40deg)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:rotate(680deg)}}
@keyframes crown-rim{from{opacity:0}}
@keyframes crown-aura{0%{opacity:0;transform:scale(.7)}24%{opacity:1;transform:scale(1.12)}100%{opacity:var(--aura-rest);transform:none}}
/* The Sponsor utama heading opens with its first card: the words settle and the two rules grow out from them. */
[data-tier="utama"] .sponsor-tier{color:#f3dfb4}
[data-tier="utama"] .sponsor-tier::before{transform-origin:100% 50%}[data-tier="utama"] .sponsor-tier::after{transform-origin:0 50%}
[data-tier="utama"].is-open .sponsor-tier{animation:tier-in .9s var(--ease) both}
[data-tier="utama"].is-open .sponsor-tier::before,[data-tier="utama"].is-open .sponsor-tier::after{animation:tier-line .9s var(--ease) .15s both}
@keyframes tier-in{from{opacity:0;letter-spacing:7px}}
@keyframes tier-line{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:no-preference){.js body .sponsor-night.is-armed [data-tier="utama"]:not(.is-open) .sponsor-tier{opacity:0}}
/* How to become a partner: one plain line and the email address as a button. */
.sponsor-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;max-width:560px;margin:clamp(30px,4.4vw,44px) auto 0;padding-top:clamp(22px,3vw,28px);border-top:1px solid #f6f1e41f;font-size:13.5px;line-height:1.5;color:#c9cfbd}
.sponsor-cta a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid #f6f1e44d;border-radius:999px;background:#f6f1e40f;color:#f6f1e4;font-size:13.5px;text-decoration:none;transition:background .25s}
.sponsor-cta .icon{flex:none;width:17px;height:17px;color:#e2c3a0}
@media(hover:hover) and (pointer:fine){.sponsor-cta a:hover{background:#f6f1e41f}}
.chapter-sponsor .sponsor-cta a:focus-visible{outline:2px solid #e2c3a0;outline-offset:3px}
/* Sponsor cards rest as thin gold-edged glass with white logos. A card shows its logo in the real colours
   while it sits in the middle of the screen, under the mouse, after a tap, or while its link has keyboard focus. */
.chapter-sponsor .sponsor{--aura-rest:.22}
.chapter-sponsor .sponsor-card{border-radius:14px;background:#f6f1e40a;box-shadow:inset 0 0 0 1px #e2c3a066;cursor:pointer;transition:background .45s ease,box-shadow .45s ease,transform .35s var(--ease)}
.chapter-sponsor .sponsor.is-light .sponsor-card{background:#f6f1e40a;box-shadow:inset 0 0 0 1px #e2c3a066}
.chapter-sponsor .sponsor::before{border-radius:14px}
.chapter-sponsor .sponsor-crown{border-radius:17px}
.chapter-sponsor .sponsor-crown::before{opacity:0}
.chapter-sponsor :is(.sponsor-mark img,.sponsor-card>img){mix-blend-mode:normal;filter:brightness(0) invert(1);transition:filter .45s ease}
.chapter-sponsor .sponsor-name{color:#d9dccb;transition:color .45s ease}
.chapter-sponsor .sponsor.is-broken .sponsor-name{color:#f6f1e4}
.chapter-sponsor .sponsor:is(.is-focus,.is-color) .sponsor-card,.chapter-sponsor .sponsor:focus-within .sponsor-card{background:#fbf8ef;box-shadow:inset 0 0 0 1px #fffdf6,0 8px 16px -6px #050d1a80}
.chapter-sponsor .sponsor.is-light:is(.is-focus,.is-color) .sponsor-card{background:#1f3236}
.chapter-sponsor .sponsor:is(.is-focus,.is-color) :is(.sponsor-mark img,.sponsor-card>img),.chapter-sponsor .sponsor:focus-within :is(.sponsor-mark img,.sponsor-card>img){filter:none}
.chapter-sponsor .sponsor:is(.is-focus,.is-color):not(.is-light) .sponsor-name{color:#5d6852}
@media(hover:hover) and (pointer:fine){
.chapter-sponsor .sponsor:hover .sponsor-card{background:#fbf8ef;box-shadow:inset 0 0 0 1px #fffdf6,0 8px 16px -6px #050d1a80}
.chapter-sponsor .sponsor.is-light:hover .sponsor-card{background:#1f3236}
.chapter-sponsor .sponsor:hover :is(.sponsor-mark img,.sponsor-card>img){filter:none}
.chapter-sponsor .sponsor:hover:not(.is-light) .sponsor-name{color:#5d6852}
.chapter-sponsor .sponsor:hover .sponsor-via{color:#0a66c2}
}
/* Main sponsors stay compact. */
[data-tier="utama"]>.sponsor-list{--card-max:300px;--gap:14px;--pad:16px 22px 14px}
[data-tier="utama"] .sponsor[data-nama="sembunyi"]{--box-h:64px;--base:72px}
@media(min-width:600px){[data-tier="utama"]>.sponsor-list{--card-max:320px;--gap:18px}[data-tier="utama"] .sponsor[data-nama="sembunyi"]{--box-h:70px;--base:80px}}
/* A link that is not the sponsor's own site sits in the corner as a small icon (a.sponsor-via), so a tap on the card only shows the colours. */
.sponsor-via{position:absolute;top:2px;right:2px;z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#f6f1e4b3;transition:color .45s ease}
.sponsor-via-icon{width:18px;height:18px}
.chapter-sponsor .sponsor:is(.is-focus,.is-color) .sponsor-via,.chapter-sponsor .sponsor:focus-within .sponsor-via{color:#0a66c2}
.chapter-sponsor .sponsor-via:focus-visible{outline:2px solid #e2c3a0;outline-offset:-3px}
/* Journal dates read as small chips: the day large, the month small under it, so five or six fit a phone without crowding. */
.story-tabs{gap:2px;justify-content:space-between}
.story-tabs button{display:grid;justify-items:center;align-content:center;gap:5px;flex:1 0 auto;min-width:50px;min-height:58px;padding:6px 6px 12px;color:#8a917c}
.story-tabs .tab-day,.story-tabs .tab-month{display:block;margin:0;opacity:1}
.story-tabs .tab-day{font:400 23px/1 Georgia,"Times New Roman",serif;letter-spacing:-.5px;transition:color .3s}
.story-tabs .tab-month{font:600 9.5px/1 Arial,Helvetica,sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.story-tabs button[aria-selected="true"]{color:#55654a}
.story-tabs button[aria-selected="true"] .tab-day{color:var(--ink)}
.story-tabs button::after{left:50%;right:auto;width:26px;margin-left:-13px}
@media(hover:hover) and (pointer:fine){.story-tabs button:not([aria-selected="true"]):hover .tab-day{color:#4c5d41}}
@media(max-width:760px){.story-tabs{margin-bottom:20px}.story-tabs button{padding:6px 4px 12px}.story-tabs .tab-day{font-size:22px}}

/* Kontribusi kami keeps the sand of the old Postcard perjalanan behind its calendar (kontribusi.css), and ends with the way
   into Perjalanan kami: a small fan of three postcards and the question. */
:root{--trip-foot:clamp(64px,6vw,80px);--jalan-h:66px}
.chapter-trip{--trip-sand:#f4ead6;padding:clamp(64px,7vw,96px) 0 var(--trip-foot);background:radial-gradient(60% 46% at 86% 64%,#fccc3d1a,#fccc3d00 70%),linear-gradient(180deg,#e6ece0 0,var(--trip-sand) clamp(200px,24vw,340px),var(--trip-sand) calc(100% - 160px),var(--trip-tail,var(--trip-sand)) 100%)}
.chapter-trip:not(:has(+ .chapter-sponsor .sponsor)){--trip-tail:#e6ece0}
.jalan-ajak{position:relative;z-index:1;display:flex;justify-content:center;margin-top:clamp(56px,5vw,60px)}
.jalan-buka{display:inline-flex;align-items:center;gap:14px;min-height:var(--jalan-h);padding:10px 12px 10px 14px;border:1px solid #e1d3b3;border-radius:999px;background:#fbf8ef;color:var(--ink);text-align:left;box-shadow:0 18px 32px -26px #5a3f25a6;transition:translate .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.jalan-tumpuk{position:relative;flex:none;width:58px;height:44px}
.jalan-tumpuk img{position:absolute;left:8px;top:6px;width:42px;height:32px;object-fit:cover;border:3px solid #fffdf6;border-radius:3px;background:#e9dfc8;box-shadow:0 2px 6px #5a3f2547;transition:rotate .45s var(--ease),translate .45s var(--ease)}
.jalan-tumpuk img:nth-child(1){rotate:-13deg;translate:-7px 2px}
.jalan-tumpuk img:nth-child(2){rotate:9deg;translate:8px -2px}
.jalan-tumpuk img:nth-child(3){rotate:-2deg}
.jalan-tanya{font:400 clamp(17px,2vw,19px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.2px}
.jalan-tanya i{color:var(--accent)}
.jalan-panah{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fbf8ef;transition:translate .4s var(--ease)}
.jalan-panah .icon{width:16px;height:16px}
.jalan-buka:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  .jalan-buka:hover{translate:0 -3px;border-color:#d6c29b;box-shadow:0 24px 36px -26px #5a3f25b3}
  .jalan-buka:hover .jalan-tumpuk img:nth-child(1){rotate:-20deg;translate:-12px 3px}
  .jalan-buka:hover .jalan-tumpuk img:nth-child(2){rotate:15deg;translate:13px -3px}
  .jalan-buka:hover .jalan-panah{translate:3px 0}
}
@media(max-width:380px){.jalan-buka{gap:10px;padding-right:10px}.jalan-tanya{font-size:16px}}
/* Senja turun: the button joins the cards above and the sponsor night below. Upward, a short dotted trail (the route of
   Perjalanan kami) runs from the last article card down to the arrow, warming as it nears; script.js lays it out and shows it
   only while that card sits right above the arrow. */
.jalan-tapak{position:absolute;left:var(--tapak-x);bottom:calc(100% + 2px);width:6px;height:var(--tapak-h);margin-left:-3px;pointer-events:none;background:linear-gradient(#cdb68c,#b4844f);-webkit-mask:radial-gradient(circle,#000 1.2px,#0000 1.7px) 0 0/6px var(--tapak-step) repeat-y;mask:radial-gradient(circle,#000 1.2px,#0000 1.7px) 0 0/6px var(--tapak-step) repeat-y;transition:opacity .9s var(--ease) .35s}
@media(prefers-reduced-motion:no-preference){.js .jalan-buka:not(.is-revealed)~.jalan-tapak{opacity:0;transition-delay:0s}}
/* Downward, the sand warms to dusk and the slope steps down to the night. The far ridge meets the button at its middle
   (--horizon), the mid ridge sinks into mist, and the near hills are the night's own top edge in the panel's colour. The scene
   lives in section#sponsor, so it only shows when the night does; it reaches up behind the button from the top of that section.
   The mid ridge rises with the night, so its misty foot never fades into bare sand while the night is still to come. */
.jalan-senja{--horizon:calc(var(--trip-foot) + var(--senja-gap) + var(--jalan-h) / 2);--far-h:calc(var(--horizon) * 1.5);position:absolute;left:0;right:0;top:calc(var(--senja-gap) - var(--horizon) - 64px);height:calc(var(--horizon) + 64px);pointer-events:none;background:radial-gradient(72% 88px at 50% calc(100% - var(--horizon)),#f5c28f66,#f5c28f00 72%)}
.jalan-jauh,.jalan-bukit{position:absolute;left:0;bottom:0;width:100%}
.jalan-jauh{height:var(--far-h)}
.jalan-jauh .jalan-bukit{height:100%}
/* Merapi takes the ridge's colour by height (both gradients span the same 300 units), so it rises out of the ridge without a
   seam, and it ends where the ridge is still opaque, so the two never stack in the ridge's misty foot; it stands right of the
   button, so only where the button leaves room for its summit */
.jalan-merapi{display:none;position:absolute;left:calc(50% + 290px);bottom:0;width:calc(var(--far-h) * 4 / 3);height:100%;margin-left:calc(var(--far-h) * -2 / 3)}
@media(min-width:720px){.jalan-merapi{display:block}}
.jalan-bukit-tengah{height:calc(var(--horizon) * .5);transition:opacity .9s var(--ease) .12s,translate .9s var(--ease) .12s}
@media(min-width:600px){.jalan-bukit-tengah{height:calc(var(--horizon) * .62)}}
/* the near hills start on the panel's corner arcs where the arc's slope meets theirs (34deg on a phone, 18deg wider, as the hills
   stretch differently; a hair inside, so no spur shows), so each corner runs on into a hill. They rise out of the night just
   after it arrives, when it is already opaque, so their overlap never shows. They sit above the panel's call glow (.sponsor-aura)
   and take that glow on themselves: a tint as deep as the panel's own top edge gets, and a lit ridge (--call, from script.js). */
.jalan-tepi{--tepi-h:clamp(40px,4.6vw,64px);position:absolute;left:0;right:0;bottom:calc(var(--night-r) * -.171);z-index:2;width:calc(var(--night-w) - var(--night-r) * .92);height:var(--tepi-h);margin:0 auto;transition:opacity .9s var(--ease) .35s,translate .9s var(--ease) .35s}
@media(min-width:600px){.jalan-tepi{bottom:calc(var(--night-r) * -.049);width:calc(var(--night-w) - var(--night-r) * 1.42)}}
.jalan-tepi svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jalan-tepi-nyala{opacity:var(--call,0);transition:opacity .5s ease}
.chapter-sponsor.is-calling .jalan-tepi-nyala{transition-duration:.12s}
.jalan-tepi-nyala path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.jalan-tepi-nyala path:nth-child(1){fill:#f3e27a;fill-opacity:.19}
.jalan-tepi-nyala path:nth-child(2){stroke:#f0b43a;stroke-opacity:.1;stroke-width:26px}
.jalan-tepi-nyala path:nth-child(3){stroke:#f0b43a;stroke-opacity:.2;stroke-width:9px}
.jalan-tepi-nyala path:nth-child(4){stroke:#f3e27a;stroke-opacity:.9;stroke-width:1.5px}
.jalan-kunang{position:absolute;left:var(--x);bottom:var(--y);width:6px;height:6px;margin:0 0 -3px -3px;animation:firefly-drift var(--dur) ease-in-out var(--delay) infinite;transition:opacity 1.4s ease .8s}
.jalan-kunang span{display:block;width:100%;height:100%;border-radius:50%;background:#fff6b8;box-shadow:0 0 6px 2px #f3e27a,0 0 16px 6px #f3e27a4d;animation:firefly-glow 2.2s ease-in-out var(--delay) infinite alternate}
@media(prefers-reduced-motion:no-preference){
  .js .chapter-sponsor:has(.sponsor-night:not(.is-revealed)) :is(.jalan-bukit-tengah,.jalan-tepi){opacity:0;translate:0 26px}
  .js .chapter-sponsor:has(.sponsor-night:not(.is-revealed)) .jalan-kunang{opacity:0;transition-delay:0s}
}
.jalan-senja:not(.is-inview) :is(.jalan-kunang,.jalan-kunang span){animation-play-state:paused}

/* The journal's postcards (Perjalanan kami): an airmail edge, washi tape, a stamp with the chapter number and a postmark with the
   chapter date, all read from the journal. One colour per chapter, in turn: its stamp here and its date stamp in the journal share it. */
.trip-card:nth-child(4n+1),#pakem-story .story-tabs button:nth-child(4n+1){--stamp:#17352f;--stamp-ink:#f3e27a;--stamp-tint:#e3e9dd;--stamp-text:#17352f}
.trip-card:nth-child(4n+2),#pakem-story .story-tabs button:nth-child(4n+2){--stamp:#87634c;--stamp-ink:#fbf8ef;--stamp-tint:#f1e4d5;--stamp-text:#6a4b37}
.trip-card:nth-child(4n+3),#pakem-story .story-tabs button:nth-child(4n+3){--stamp:#4f6145;--stamp-ink:#fbf8ef;--stamp-tint:#e5eada;--stamp-text:#3f4f36}
.trip-card:nth-child(4n),#pakem-story .story-tabs button:nth-child(4n){--stamp:#e9b949;--stamp-ink:#17352f;--stamp-tint:#f7ebc8;--stamp-text:#6e520e}
.trip-card:nth-child(3n+1){--tape:#f3e27acc}.trip-card:nth-child(3n+2){--tape:#c9dbb8cc}.trip-card:nth-child(3n){--tape:#efc7a8cc}
.trip-open{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.trip-open:focus-visible{outline:none}
.trip-open:focus-visible .trip-print{outline:2px solid var(--accent);outline-offset:6px}
.trip-print{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding:8px 8px 14px;border:5px solid transparent;border-radius:4px;background:linear-gradient(#fcfaf3,#fcfaf3) padding-box,repeating-linear-gradient(135deg,#87634c 0 7px,#fcfaf3 7px 10px,#e9b949 10px 17px,#fcfaf3 17px 20px) border-box;box-shadow:0 1px 2px #5a3f251f,0 12px 26px #5a3f2526;transform:rotate(var(--tilt,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.trip-card:nth-child(odd){--tilt:-1.6deg}.trip-card:nth-child(even){--tilt:1.8deg}
@media(hover:hover) and (pointer:fine){.trip-open:hover .trip-print{transform:rotate(0deg) translateY(-4px);box-shadow:0 1px 2px #5a3f251f,0 18px 32px #5a3f2530}}
.trip-print::before{content:"";position:absolute;left:-18px;top:4px;z-index:3;width:70px;height:20px;background:linear-gradient(90deg,#ffffff2e 0 50%,#0000 0) 0 0/8px 100%,var(--tape,#f3e27acc);transform:rotate(-37deg);clip-path:polygon(0 0,5% 20%,0 40%,5% 60%,0 80%,5% 100%,95% 100%,100% 80%,95% 60%,100% 40%,95% 20%,100% 0)}
.trip-photo{grid-column:1/-1;display:block;aspect-ratio:4/3;overflow:hidden;background:#ece3cf}
.trip-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.trip-date{grid-column:1;margin-top:12px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#535e48}
@media(max-width:379px){.trip-date{letter-spacing:1.2px}}
.trip-title{grid-column:1;margin-top:6px;font:italic 400 clamp(23px,6.2vw,28px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.6px;color:var(--ink)}
.trip-sub{grid-column:1;margin-top:6px;font-size:12.5px;line-height:1.45;color:#535e48}
.trip-marks{position:relative;grid-column:2;grid-row:2/span 3;width:98px;height:66px;margin-top:-20px}
.trip-stamp{position:absolute;right:0;top:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:2px;width:46px;height:54px;color:var(--stamp-ink);transform:rotate(4deg);filter:drop-shadow(0 1px 1.5px #5a3f2540)}
.trip-stamp::before,#pakem-story .story-tabs button::before{content:"";position:absolute;inset:0;z-index:-1;padding:4px;background:linear-gradient(var(--stamp),var(--stamp)) content-box,#fffdf6;-webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#0000 1.7px,#000 2.1px) -3px -3px/6px 6px round;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#0000 1.7px,#000 2.1px) -3px -3px/6px 6px round}
.trip-stamp svg{width:24px;height:22px}
.trip-stamp b{font:700 8px/1 Arial,Helvetica,sans-serif;letter-spacing:1px}
.trip-postmark{position:absolute;left:-4px;top:12px;z-index:2;width:70px;height:70px;color:#6a4b37;transform:rotate(-14deg)}
.postmark{display:block;overflow:visible;pointer-events:none}
.postmark circle{fill:none;stroke:currentColor;stroke-width:1.7}
.postmark .pm-ring{font:700 8px Arial,Helvetica,sans-serif;letter-spacing:1px;fill:currentColor}
.postmark .pm-day{font:700 14.5px Arial,Helvetica,sans-serif;letter-spacing:.2px;fill:currentColor}
.postmark .pm-year{font:700 11px Arial,Helvetica,sans-serif;letter-spacing:1.2px;fill:currentColor}
/* Perjalanan kami (script.js): one screen where the journey plays as a small film. A dotted trail from UGM to Pakem runs
   down the middle on a phone (the postcards on both sides, half a card apart) or across a wider screen (the postcards above
   and below); the walked part follows the bird, and each postcard is posted as the bird passes its knot. --jalan-arah tells
   the script which way the trail runs. The postcards are the journal's own: an airmail edge, washi tape, the chapter's stamp
   and its postmark, all sized to the card (container units), so they stay postcards at any size. */
html:has(.jalan[open]){overflow:hidden}
.jalan{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;overflow:hidden;background:radial-gradient(70% 46% at 82% 8%,#fccc3d29,#fccc3d00 72%),linear-gradient(180deg,#e6ece0,#f4ead6 58%,#efe1c3);color:var(--ink)}
.jalan::backdrop{background:#16261e}
.jalan-layar{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;overflow-y:auto;overscroll-behavior:contain;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.jalan-tutup{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:4;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #d6c5a6;border-radius:50%;background:#fbf7ec;color:var(--ink);transition:background .25s}
.jalan-tutup .icon{width:18px;height:18px}
.jalan-tutup:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.jalan-tutup:hover{background:#efe4cf}}
.jalan-judul{margin:6px 46px 0;font:400 clamp(26px,7vw,54px)/1.04 Georgia,'Times New Roman',serif;letter-spacing:-.035em;text-align:center;color:var(--ink)}
.jalan-judul i{color:var(--accent)}
.jalan-peta{--jalan-arah:down;position:relative;justify-self:center;margin-block:auto;padding-top:10px;width:min(100%,max(292px,calc((100dvh - 160px) * .5 + 40px)),540px)}
.jalan-kartu{--gap:clamp(30px,9vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;column-gap:var(--gap);margin:0;padding:34px 0 30px;list-style:none}
.jalan-kartu .trip-card{grid-column:1;grid-row:var(--r)/span 2;align-self:center;container-type:inline-size}
.jalan-kartu .trip-card:nth-child(even){grid-column:2}
.jalan-kartu .trip-card:nth-child(1){--r:1}.jalan-kartu .trip-card:nth-child(2){--r:2}.jalan-kartu .trip-card:nth-child(3){--r:3}.jalan-kartu .trip-card:nth-child(4){--r:4}
.jalan-kartu .trip-card:nth-child(5){--r:5}.jalan-kartu .trip-card:nth-child(6){--r:6}.jalan-kartu .trip-card:nth-child(7){--r:7}.jalan-kartu .trip-card:nth-child(8){--r:8}
@media(min-width:760px) and (min-aspect-ratio:6/5){
  .jalan-peta{--jalan-arah:across;width:min(1080px,calc(100vw - 150px),calc((100dvh - 254px) * 1.5 + 35px))}
  .jalan-kartu{grid-template-columns:repeat(var(--n,7),minmax(0,1fr));grid-auto-rows:auto;column-gap:14px;row-gap:clamp(40px,6dvh,60px);padding:24px 0}
  .jalan-kartu .trip-card,.jalan-kartu .trip-card:nth-child(even){grid-row:1;grid-column:var(--r)/span 2;align-self:end}
  .jalan-kartu .trip-card:nth-child(even){grid-row:2;align-self:start}
}
/* the postcard, sized by its own width */
.jalan .trip-open{display:block;width:100%}
.jalan .trip-print{grid-template-columns:minmax(0,1fr);padding:2.6cqi 2.6cqi 5.4cqi;border-width:clamp(3px,2.4cqi,5px)}
.jalan .trip-print::before{left:-6cqi;top:1.4cqi;width:30cqi;height:9cqi}
.jalan .trip-date{margin-top:5.5cqi;font-size:clamp(7px,5.2cqi,10px);letter-spacing:.16em}
.jalan .trip-title{margin-top:2.4cqi;font-size:clamp(13px,10.5cqi,25px);line-height:1.08}
.jalan .trip-sub{display:none}
.jalan .trip-marks{position:absolute;grid-area:auto;top:1.6cqi;right:1.6cqi;width:40cqi;height:34cqi;margin:0}
.jalan .trip-stamp{width:19cqi;height:23cqi;gap:.6cqi}
.jalan .trip-stamp svg{width:10.5cqi;height:9.6cqi}
.jalan .trip-stamp b{font-size:max(5px,3.5cqi)}
.jalan .trip-postmark{left:0;top:9cqi;width:28cqi;height:28cqi}
@media(hover:hover) and (pointer:fine){.jalan .trip-open:hover .trip-print{transform:rotate(0deg) translateY(-4px);box-shadow:0 1px 2px #5a3f251f,0 18px 32px #5a3f2530}}
.jalan .trip-open:focus-visible{outline:none}
.jalan .trip-open:focus-visible .trip-print{outline:2px solid var(--accent);outline-offset:4px}
/* while the film plays, a postcard waits unseen until the bird reaches it */
.jalan.is-playing .trip-card:not(.is-posted){visibility:hidden}
/* the trail: dotted ahead, solid where the bird has flown; a knot fills in as each postcard is posted */
.jalan-rute{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.jalan-rencana{fill:none;stroke:#c3ad85;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1.5 7}
.jalan-jejak{fill:none;stroke:#87634c;stroke-width:2;stroke-linecap:round}
.jalan-simpul{fill:#fbf8ef;stroke:#c3ad85;stroke-width:1.6;transition:fill .3s,stroke .3s}
.jalan-simpul.is-reached{fill:#87634c;stroke:#87634c}
.jalan-ujung{position:absolute;left:0;top:0;z-index:2;padding:5px 9px;border-radius:99px;background:#17352f;color:#fbf8ef;font:700 8.5px/1 Arial,Helvetica,sans-serif;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,calc(-100% - 6px));pointer-events:none}
.jalan-ujung.is-akhir{background:var(--accent);transform:translate(-50%,6px)}
@media(min-width:760px) and (min-aspect-ratio:6/5){.jalan-ujung{transform:translate(calc(-100% - 8px),-50%)}.jalan-ujung.is-akhir{transform:translate(8px,-50%)}}
/* a phone held sideways: the postcards keep a readable size and the screen scrolls a little instead */
@media(min-width:760px) and (min-aspect-ratio:6/5) and (max-height:520px){.jalan-peta{width:min(760px,calc(100vw - 150px))}.jalan-judul{margin-top:0;font-size:26px}}
.jalan-burung{position:absolute;left:0;top:0;z-index:3;width:30px;height:auto;margin:-18px 0 0 -15px;opacity:0;pointer-events:none;transition:opacity .45s}
.jalan.is-playing .jalan-burung{opacity:1;animation:wing .5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.jalan-burung{display:none}}
@media(forced-colors:active){.jalan-ujung{border:1px solid CanvasText}}

/* The journal is one postcard sheet with the same airmail edge: the photo window on top and the message side under it,
   or side by side on a wide screen like the two halves of a postcard back. The dates are a row of stamps; the open one is cancelled. */
#pakem-story{width:min(960px,calc(100% - 56px))}
#pakem-story .postcard{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);border:8px solid transparent;border-radius:12px;background:linear-gradient(#fbf8ef,#fbf8ef) padding-box,repeating-linear-gradient(135deg,#87634c 0 10px,#fbf8ef 10px 14px,#e9b949 14px 24px,#fbf8ef 24px 28px) border-box}
#pakem-story .journal-view{justify-content:flex-start;gap:22px;padding:26px 30px 30px;background:none;border:0}
#pakem-story .journal-postmark{padding:0 0 14px;border-bottom:1.5px dashed #dccaa6;font:700 9px/1.2 Arial,Helvetica,sans-serif;letter-spacing:2.4px;color:#87634c}
#pakem-story .journal-spread figcaption{position:relative;margin-top:22px;padding-right:86px;color:#535e48;font-size:12px}
#pakem-story .chapter-label,#pakem-story .story-count span{color:#646c59}
#pakem-story .journal-photo-title{font-size:38px}
/* the photo window: the loose prints lie in a sunken sand-coloured frame */
#pakem-story .journal-collage{padding:16px 14px 20px;background:#efe6d2;border-radius:6px;box-shadow:inset 0 0 0 1px #e0cfae,inset 0 3px 12px #5a3f2512;transform:none}
#pakem-story .journal-collage-pair{padding:16px 12px 22px}
/* the last page leads out to Kontribusi kami: a small copy of its 50-day calendar lies in the same sand window (script.js
   copies it from that calendar), the days gone by filled, today ringed, the days to come as outlines */
#pakem-story .journal-kalender{display:block;padding:16px 14px 20px;background:#efe6d2;border-radius:6px;box-shadow:inset 0 0 0 1px #e0cfae,inset 0 3px 12px #5a3f2512;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.journal-kalender-lembar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:320px;margin:0 auto;padding:12px 12px 14px;border:1px solid #e4d8bc;border-radius:14px;background:#fbf8ef;box-shadow:0 1px 0 #fffdf8 inset,0 16px 28px -20px #5a3f2580;transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
.journal-kalender-lembar>span{position:relative;display:grid;place-items:center;aspect-ratio:8/7;overflow:hidden;border-radius:7px;background:#f1e8d4;color:#6f7762}
.journal-kalender-lembar>.is-nama{aspect-ratio:auto;padding-bottom:2px;background:none;font:600 7px/1 Arial,Helvetica,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#8a917c}
.journal-kalender-lembar time{display:grid;justify-items:center;gap:2px;font:400 12px/1 Georgia,"Times New Roman",serif}
.journal-kalender-lembar time b{font:700 6px/1 Arial,Helvetica,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}
.journal-kalender-lembar .is-nanti{background:none;color:#b9af95;box-shadow:inset 0 0 0 1px #e1d5b8}
.journal-kalender-lembar .is-nanti time b{color:#b59f8a}
.journal-kalender-lembar .is-kini{background:#fffdf7;color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.journal-kalender-lembar .ada{background:#e9dfc8;color:#fffdf6}
.journal-kalender-lembar .ada.is-kini{box-shadow:0 0 0 2px var(--accent)}
.journal-kalender-lembar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journal-kalender-lembar .ada::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#0b1a1400 40%,#0b1a1480)}
.journal-kalender-lembar .ada time{position:relative;z-index:1;align-self:end;justify-self:start;justify-items:start;margin:0 0 3px 4px;font-size:11px;text-shadow:0 1px 2px #0b1a14a6}
.journal-kalender-lembar .ada time b{color:#f6e3b8}
@media(hover:hover) and (pointer:fine){#pakem-story .journal-kalender:hover .journal-kalender-lembar{translate:0 -3px;box-shadow:0 1px 0 #fffdf8 inset,0 22px 32px -20px #5a3f2599}}
/* and its panel ends with one clear way there */
#pakem-story .story-kontribusi{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin-top:20px;padding:0 18px 0 20px;border-radius:99px;background:var(--ink);color:#fbf8ef;font-size:13px;text-decoration:none;transition:background .25s}
#pakem-story .story-kontribusi .icon{width:16px;height:16px;transition:translate .3s var(--ease)}
#pakem-story .story-kontribusi:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){#pakem-story .story-kontribusi:hover{background:#24302a}#pakem-story .story-kontribusi:hover .icon{translate:3px 0}}
/* the postmark lands across the bottom edge of the window, next to the title */
#pakem-story .story-postmark{position:absolute;right:-4px;top:-50px;z-index:6;width:92px;height:92px;color:#6a4b37;transform:rotate(-12deg)}
#pakem-story .story-content{position:relative;padding:26px 34px 22px}
#pakem-story .story-content::before{content:"";position:absolute;left:0;top:30px;bottom:30px;border-left:1.5px dashed #dccaa6}
/* the date stamps: a perforated edge, the chapter's colour; the open one is lifted and cancelled with a ring */
#pakem-story .story-tabs{--fade:24px;gap:10px;justify-content:flex-start;margin:0 -34px 20px;padding:14px 50px 14px 34px;border:0;-webkit-mask:linear-gradient(90deg,#0000,#000 var(--fade) calc(100% - var(--fade)),#0000);mask:linear-gradient(90deg,#0000,#000 var(--fade) calc(100% - var(--fade)),#0000)}
#pakem-story .story-tabs button{position:relative;isolation:isolate;flex:none;display:grid;justify-items:center;align-content:center;gap:5px;width:60px;min-width:0;height:70px;min-height:0;padding:0;background:none;color:var(--stamp-text);filter:drop-shadow(0 1px 1.5px #5a3f2538);transition:transform .35s var(--ease),color .3s}
#pakem-story .story-tabs button::before{background:linear-gradient(var(--stamp-tint),var(--stamp-tint)) content-box,#fffdf6}
#pakem-story .story-tabs button span{display:block}
#pakem-story .story-tabs .tab-day{font-size:23px;color:inherit}
#pakem-story .story-tabs .tab-month{font-size:9px;letter-spacing:1.4px}
#pakem-story .story-tabs button::after{content:"";position:absolute;left:auto;right:-11px;top:-9px;bottom:auto;width:38px;height:38px;margin:0;border:1.5px solid #87634c;border-radius:50%;background:radial-gradient(circle,#0000 52%,#87634c 53% 56%,#0000 57%);opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity .25s,transform .35s var(--ease)}
#pakem-story .story-tabs button[aria-selected="true"]{color:var(--stamp-ink);transform:translateY(-3px) rotate(-2.5deg)}
#pakem-story .story-tabs button[aria-selected="true"]::before{background:linear-gradient(var(--stamp),var(--stamp)) content-box,#fffdf6}
#pakem-story .story-tabs button[aria-selected="true"] .tab-day{color:inherit}
#pakem-story .story-tabs button[aria-selected="true"]::after{opacity:.9;transform:none}
#pakem-story .story-tabs button.is-kontribusi{color:#6b5a43;filter:none}
#pakem-story .story-tabs button.is-kontribusi::before{background:none;border:1.5px dashed #c3ab83;border-radius:3px;-webkit-mask:none;mask:none}
#pakem-story .story-tabs button.is-kontribusi[aria-selected="true"]::before{background:#f2e8d3;border-color:#87634c}
/* the way out to Kontribusi kami has no date, so its stamp is never cancelled */
#pakem-story .story-tabs button.is-kontribusi::after{content:none}
@media(hover:hover) and (pointer:fine){#pakem-story .story-tabs button:not([aria-selected="true"]):hover{transform:translateY(-2px)}#pakem-story .story-tabs button:not([aria-selected="true"]):hover .tab-day{color:inherit}}
#pakem-story .story-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* the message: long diary text stays plain and easy to read */
#pakem-story .story-panel>p:not(.chapter-label):not(.story-note){font-size:15.5px;line-height:1.78;color:#4e5946}
#pakem-story .story-note{margin:22px 0 16px;padding-left:14px;border-left:2px solid #e9b949;font-size:17px;color:#7a5a45}
#pakem-story .story-navigation{border-top:1.5px dashed #dccaa6}
@media(min-width:761px) and (max-width:1000px){#pakem-story .postcard{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}#pakem-story .journal-view{padding:24px 24px 26px}#pakem-story .story-content{padding:24px 26px 20px}#pakem-story .story-tabs{--fade:16px;gap:8px;margin:0 -26px 18px;padding:14px 50px 14px 26px}#pakem-story .story-tabs button{width:54px;height:64px}#pakem-story .journal-photo-title{font-size:34px}}
@media(max-width:760px){
#pakem-story{width:calc(100% - 20px);max-height:calc(100svh - 20px)}
#pakem-story .postcard{max-height:calc(100svh - 20px);border-width:6px;border-radius:10px;background:linear-gradient(#fbf8ef,#fbf8ef) padding-box,repeating-linear-gradient(135deg,#87634c 0 8px,#fbf8ef 8px 11px,#e9b949 11px 19px,#fbf8ef 19px 22px) border-box}
#pakem-story .journal-view{gap:16px;padding:18px 16px 8px}
#pakem-story .journal-postmark{padding:3px 40px 12px 0;font-size:8px;letter-spacing:1.8px}
#pakem-story .journal-collage{padding:12px 10px 16px}
#pakem-story .journal-collage-pair{padding:12px 8px 18px}
#pakem-story .journal-kalender{padding:12px 10px 16px}
.journal-kalender-lembar{gap:3px;padding:10px 10px 12px}
#pakem-story .journal-spread figcaption{margin-top:18px;padding-right:80px}
#pakem-story .journal-photo-title{font-size:32px}
#pakem-story .story-postmark{top:-44px;right:-6px;width:80px;height:80px}
#pakem-story .story-content{padding:14px 18px 16px}
#pakem-story .story-content::before{left:16px;right:16px;top:0;bottom:auto;border-left:0;border-top:1.5px dashed #dccaa6}
#pakem-story .story-tabs{--fade:10px;gap:8px;margin:0 -18px 14px;padding:14px 18px 14px}
#pakem-story .story-tabs button{width:54px;height:64px}
#pakem-story .story-tabs .tab-day{font-size:22px}
#pakem-story .story-panel>p:not(.chapter-label):not(.story-note){font-size:15.5px;line-height:1.75}
#pakem-story .story-note{font-size:16px}
}
@media(max-width:360px){#pakem-story .journal-view{padding-left:14px;padding-right:14px}#pakem-story .story-content{padding-left:16px;padding-right:16px}#pakem-story .story-tabs{gap:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}#pakem-story .story-tabs button{width:52px;height:62px}}
/* Windows High Contrast: the postcard and the sheet get a solid backdrop, the postmarks the text colour, the tape goes */
@media(forced-colors:active){.trip-postmark,#pakem-story .story-postmark{color:CanvasText}.trip-print,#pakem-story .postcard{background:Canvas}.trip-print::before{display:none}.journal-kalender-lembar>span:not(.is-nama){border:1px solid CanvasText}}
/* The Senja easter egg: the whole page dims, the constellation lifts to the middle and writes the name large. */
body.egg-open{overflow:hidden}
/* the scrollbar gutter stays (html has scrollbar-gutter:stable); darken it with the dim */
html{transition:background-color .8s ease}
html.egg-open{background:#111418}
dialog.senja-egg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;background:transparent;color:#f6f1e4;outline:none;touch-action:none}
dialog.senja-egg::backdrop{background:#04070dd9;-webkit-backdrop-filter:none;backdrop-filter:none;animation:egg-dim .8s ease both}
dialog.senja-egg.is-closing::backdrop{animation:egg-undim .7s ease both}
@keyframes egg-dim{from{opacity:0}}
@keyframes egg-undim{to{opacity:0}}
.egg-sky{position:absolute;transform-origin:0 0;pointer-events:none}
.egg-lines{display:block;width:100%;height:100%;overflow:visible}
.egg-lines path{fill:none;stroke:#fff2c4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85}
.egg-star{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fffbe6;box-shadow:0 0 6px 2px #fff2c4,0 0 16px 5px #fff2c466}
.egg-halo{position:absolute;left:var(--stage-x,50%);top:var(--stage-y,46%);width:calc(var(--stage-w,200px) * 1.7);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff2c459 0,#fff2c426 38%,#fff2c400 68%);opacity:0;pointer-events:none}
.senja-egg[data-step="await"] .egg-halo::after{content:"";position:absolute;inset:16%;border:1.5px solid #fff2c499;border-radius:50%;animation:bloom-ring 1.8s ease-out infinite}
.senja-egg[data-step="done"] :is(.egg-sky,.egg-halo){visibility:hidden}
.egg-mark{position:absolute;left:50%;top:46%;margin:0;translate:-50% -50%;transform-origin:50% 50%;font:400 clamp(54px,min(17vw,13svh),136px)/.92 Georgia,'Times New Roman',serif;letter-spacing:-.058em;text-align:center;white-space:nowrap;color:#f6f1e4;text-shadow:0 0 .35em #f3e27a40;visibility:hidden;pointer-events:none}
.senja-egg:is([data-step="bloom"],[data-step="done"]) .egg-mark{visibility:visible}
.senja-egg[data-step="done"] .egg-mark{pointer-events:auto}
/* the meaning of a tapped word sits just above the large name (its top is set from script) */
.senja-egg[data-step="done"] .egg-hint{translate:0 -100%}
.egg-mark.is-bright .mark-glint circle:first-child{fill-opacity:.75}
.egg-mark i{font-size:.81em;color:#e2c3a0}
.senja-egg[data-step="done"] .mark-glint{animation:glint-twinkle 2.6s ease-in-out var(--tw,0s) infinite}
.senja-egg[data-step="done"] .mark-sprig{animation:sprig-sway 7s ease-in-out infinite}
.egg-hint{position:absolute;left:16px;right:16px;top:66%;margin:0;font:italic 15px/1.4 Georgia,'Times New Roman',serif;text-align:center;color:#f6f1e4cc;pointer-events:none}
.egg-actions{position:absolute;left:50%;top:64%;display:flex;gap:10px;translate:-50% 0;animation:egg-actions .6s var(--ease) .1s backwards}
@keyframes egg-actions{from{opacity:0;transform:translateY(10px)}}
.egg-actions button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font-size:14px;white-space:nowrap}
.egg-kilas{border:0;background:#f6f1e4;color:#1b2a1a;font-weight:700;box-shadow:0 0 0 1px #f3e27a66,0 12px 28px #0008}
.egg-kilas .icon{width:15px;height:15px;color:#a36b1f}
@media(hover:hover) and (pointer:fine){.egg-kilas:hover{background:#fffaf0}}
.senja-egg.is-closing .egg-actions{opacity:0;transition:opacity .2s}
.senja-egg :focus-visible{outline:2px solid #f3e27a;outline-offset:3px}
/* the scene hands its stars and its name to the egg while the egg is open */
.senja.is-egg[data-finale] :is(.senja-constellation,.firefly.is-caught,.senja-mark,.senja-caption){visibility:hidden}
/* Panggung sponsor. The clue on the page first: while the sun is held against the top or side edges of the Senja scene,
   the sponsor panel above lights up along its edges and calls from its bottom edge, more the harder the push. */
.sponsor-aura{position:absolute;z-index:1;border-radius:24px;box-shadow:inset 0 0 0 1.5px #f3e27ad9,inset 0 0 30px 2px #f3e27a66,0 0 0 1px #e9b949b3,0 0 22px 4px #f0b43ab3,0 0 56px 14px #f0b43a59;opacity:0;pointer-events:none;transition:opacity .5s ease}
.sponsor-call{position:absolute;left:0;bottom:-80px;z-index:0;width:320px;height:190px;margin-left:-160px;border-radius:50%;background:radial-gradient(closest-side,#fff2c4a6,#f3e27a52 42%,#f3e27a00);opacity:0;pointer-events:none;transition:opacity .5s ease}
.chapter-sponsor.is-calling :is(.sponsor-aura,.sponsor-call){transition-duration:.12s}
.chapter-sponsor.is-calling .sponsor-call{animation:call-breathe 1.6s ease-in-out infinite}
@keyframes call-breathe{50%{scale:1.14}}
@media(prefers-reduced-motion:reduce){.chapter-sponsor .sponsor-call{animation:none}}
/* the held sun leans toward the panel (script.js sets its scale); it is inside the panel while the stage is open */
.senja-sun{transition:scale .18s ease-out}
.senja.is-given .senja-sun{visibility:hidden}
/* The stage: everything below rests at its final state; script.js only animates towards it,
   so a skip or reduced motion simply cancels the animations and leaves the end in place. */
html.stage-open{background:#0a1322}
body.stage-open{overflow:hidden}
dialog.sponsor-stage{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;overflow:clip;background:transparent;color:#f6f1e4;outline:none;touch-action:none;-webkit-user-select:none;user-select:none}
dialog.sponsor-stage::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
.stage-night{position:absolute;inset:0;background:radial-gradient(130% 75% at 50% 0,#15253c 0,#0d1829 46%,#070c16 100%)}
.stage-light,.stage-halo,.stage-fx{position:absolute;inset:0;pointer-events:none}
/* the sun, now a stage light: a soft source at the top and a cone of light down to the cards */
.stage-beam{position:absolute;inset:0;transform-origin:50% 0;background:conic-gradient(from calc(180deg - var(--beam,22deg)) at 50% 0,#fff2c400,#fff2c414 calc(var(--beam,22deg) * .45),#fff2c42b var(--beam,22deg),#fff2c414 calc(var(--beam,22deg) * 1.55),#fff2c400 calc(var(--beam,22deg) * 2));-webkit-mask:linear-gradient(#000 35%,#0000 97%);mask:linear-gradient(#000 35%,#0000 97%)}
.stage-source{position:absolute;left:50%;top:0;width:min(280px,70vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#fffbe6 0,#fff6b8 13%,#f3e27a8c 30%,#f3e27a2e 56%,#f3e27a00)}
.stage-pool{position:absolute;left:var(--pool-x,50%);top:var(--pool-y,70%);width:var(--pool-w,360px);height:calc(var(--pool-w,360px) * .2);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#f3e27a3d,#f3e27a14 60%,#f3e27a00)}
.stage-dust{position:absolute;inset:0}
.stage-dust i{position:absolute;left:var(--x);top:-12px;width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:#f8e9a0;box-shadow:0 0 4px 1px #f3e27a99;opacity:0;animation:stage-dust var(--dur,12s) linear var(--delay,0s) infinite}
@keyframes stage-dust{0%{opacity:0;transform:translate(0,0)}10%{opacity:var(--o,.7)}50%{transform:translate(var(--dx,10px),52vh)}85%{opacity:var(--o,.7)}100%{opacity:0;transform:translate(0,104vh)}}
/* the fireflies of the halo, with the site's firefly light painted as one gradient (no blur) */
.stage-fly{position:absolute;left:var(--x);top:var(--y);width:var(--s,24px);height:var(--s,24px);margin:calc(var(--s,24px) / -2) 0 0 calc(var(--s,24px) / -2);animation:firefly-drift var(--dur,7s) ease-in-out var(--delay,0s) infinite}
.stage-fly::before,.stage-jewel::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#fffbe6 0,#fff6b8 18%,#f3e27a 30%,#f3e27a59 52%,#f3e27a00);animation:firefly-glow 2.2s ease-in-out var(--delay,0s) infinite alternate}
.stage-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #f6f1e440;border-radius:50%;background:#0a132280;color:#f6f1e4d9;transition:background .25s,color .25s}
.stage-close .icon{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.stage-close:hover{background:#f6f1e41a;color:#f6f1e4}}
.sponsor-stage :focus-visible{outline:2px solid #f3e27a;outline-offset:3px}
.stage-body{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,5svh,56px);padding:max(64px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));text-align:center}
.stage-title{margin:0;font:400 clamp(34px,min(9.4vw,7svh),64px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:#f6f1e4;text-shadow:0 0 .5em #f3e27a2e}
.stage-title i{color:#e2c3a0}
.stage-word,.stage-line{display:inline-block}
.stage-line{position:relative;white-space:nowrap}
.stage-wipe{display:inline-block;margin:-.1em -.14em -.2em -.06em;padding:.1em .14em .2em .06em}
.stage-colon{display:inline-block;color:#e2c3a0;transform-origin:50% 90%}
.stage-pen{position:absolute;left:0;bottom:.16em;width:.1em;height:.1em;margin-left:-.05em;border-radius:50%;background:#fffbe6;box-shadow:0 0 .08em .04em #fff2c4,0 0 .36em .14em #f3e27a59;opacity:0;pointer-events:none}
/* the cards: lit cream plinths that keep every logo in its own colours; main sponsors are larger and crowned in gold */
.stage-field{--u:1;display:grid;gap:calc(26px * var(--u));width:100%;max-width:1160px}
.stage-group{display:grid;gap:calc(14px * var(--u))}
.stage-tier{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;font:700 10.5px/1.3 Arial,Helvetica,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#e2c3a0}
.stage-tier::before,.stage-tier::after{content:"";flex:0 1 56px;height:1px;background:#e2c3a059}
.stage-group[data-tier="utama"] .stage-tier{color:#f3dfb4}
.sponsor-stage.is-one-tier .stage-tier{display:none}
.stage-list{--cols:1;--w:330px;--h:122px;--base:106px;--pad:22px;--gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--gap) * var(--u));margin:0;padding:0;list-style:none}
.stage-group[data-tier="pendukung"] .stage-list{--cols:2;--w:210px;--h:84px;--base:70px;--pad:16px;--gap:12px}
.stage-group[data-tier="mitra"] .stage-list{--cols:3;--w:150px;--h:62px;--base:50px;--pad:11px;--gap:10px}
.stage-group[data-tier="utama"] .stage-list:has(>:nth-child(4)){--cols:2;--w:220px;--h:92px;--base:78px;--pad:16px;--gap:12px}
/* a long list on a phone: main sponsors go two to a row before anything shrinks much */
@media(max-width:599px){.stage-field.is-dense .stage-group[data-tier="utama"] .stage-list{--cols:2;--w:220px;--h:92px;--base:78px;--pad:16px;--gap:12px}}
@media(min-width:600px){
.stage-list{--cols:3;--w:330px;--h:118px;--base:106px}
.stage-group[data-tier="utama"] .stage-list:has(>:nth-child(4)){--cols:4;--w:250px;--h:100px;--base:86px}
.stage-group[data-tier="pendukung"] .stage-list{--cols:4;--w:220px;--h:88px;--base:74px}
.stage-group[data-tier="mitra"] .stage-list{--cols:5;--w:170px;--h:68px;--base:56px}
}
/* five main sponsors: one row where it fits, else 3 + 2, both centred */
@media(min-width:600px){.stage-group[data-tier="utama"] .stage-list:has(>:nth-child(5)):not(:has(>:nth-child(6))){--cols:3;--w:206px;--h:90px;--base:76px;--gap:14px;width:min(100%,calc((var(--w) * 3 + var(--gap) * 2) * var(--u) + 4px));margin-inline:auto}}
@media(min-width:1100px){.stage-group[data-tier="utama"] .stage-list:has(>:nth-child(5)):not(:has(>:nth-child(6))){--cols:5;width:min(100%,calc((var(--w) * 5 + var(--gap) * 4) * var(--u) + 4px))}}
@media(min-width:1500px) and (min-height:760px){.stage-group[data-tier="utama"] .stage-list:has(>:nth-child(5)):not(:has(>:nth-child(6))){--w:250px;--h:106px;--base:92px;--gap:18px}}
@media(min-width:900px){.stage-group[data-tier="utama"] .stage-list:not(:has(>:nth-child(4))){--w:360px;--h:132px;--base:118px;--gap:28px}}
@media(min-width:1400px) and (min-height:860px){.stage-group[data-tier="utama"] .stage-list:not(:has(>:nth-child(4))){--w:420px;--h:154px;--base:138px;--gap:32px}.stage-field{max-width:1400px}.stage-title{font-size:72px}.stage-wordmark{font-size:34px}}
.stage-item{position:relative;flex:0 0 auto;width:min(calc(var(--w) * var(--u)),calc((100% - (var(--cols) - 1) * var(--gap) * var(--u)) / var(--cols)))}
.stage-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:calc(var(--h) * var(--u));padding:0 calc(var(--pad) * var(--u));border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#fffdf6,#f8f3e6 62%,#efe5cf);box-shadow:inset 0 0 0 1px #fffdf6,inset 0 -12px 24px -16px #c99a4e80,0 22px 36px -18px #000d,0 0 46px -6px #f3e27a5c;color:#5d6852;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.stage-logo{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;height:calc((var(--h) - var(--pad) * 1.4) * var(--u))}
.stage-fit{position:relative;display:block;max-width:100%}
.stage-fit img{display:block;max-width:100%;max-height:calc((var(--h) - var(--pad) * 1.4) * var(--u));width:auto;height:auto;mix-blend-mode:multiply}
.stage-item.is-fit .stage-fit{width:min(100%,calc(var(--base) * var(--u) * var(--lw)),calc((var(--h) - var(--pad) * 1.4) * var(--u) * var(--r)));aspect-ratio:var(--r)}
.stage-item.is-fit .stage-fit img{position:absolute;left:calc(var(--ox) * -100%);top:calc(var(--oy) * -100%);width:calc(var(--zx) * 100%);max-width:none;max-height:none;height:auto}
.stage-name{max-width:100%;font-size:11.5px;line-height:1.3;text-wrap:balance;overflow-wrap:anywhere}
.stage-item:not(.is-named):not(.is-broken) .stage-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage-item.is-named .stage-logo{height:calc((var(--h) - var(--pad) * 1.4 - 22px) * var(--u))}
.stage-item.is-broken .stage-name{font:italic 400 calc(17px * var(--u))/1.15 Georgia,'Times New Roman',serif;color:#303e31}
.stage-item.is-light .stage-card{background:linear-gradient(180deg,#22383c,#172a2d);box-shadow:inset 0 0 0 1px #f6f1e42e,0 22px 36px -18px #000d,0 0 46px -6px #f3e27a4d;color:#d9dccb}
.stage-item.is-light .stage-fit img{mix-blend-mode:normal}
.stage-item.is-light.is-broken .stage-name{color:#f6f1e4}
.stage-sheen{position:absolute;inset:0;background:linear-gradient(105deg,#fff8dc00 32%,#fff8dcc2 48%,#fff8dc00 64%);transform:translateX(-115%);pointer-events:none}
.stage-bloom{position:absolute;inset:-30px -22px;z-index:0;border-radius:44px;background:radial-gradient(closest-side,#fff2c480,#f3e27a38 55%,#f3e27a00);opacity:0;pointer-events:none}
.stage-plinth{position:absolute;left:6%;right:6%;bottom:-16px;z-index:0;height:30px;border-radius:50%;background:radial-gradient(closest-side,#f3e27a52,#f3e27a00);pointer-events:none}
.stage-crown{position:absolute;inset:-3px;z-index:2;padding:1.5px;border-radius:21px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.stage-crown>i{position:absolute;inset:0;background:linear-gradient(135deg,#f6dd9a,#c99a4e 38%,#f3e2b0 62%,#b88a40)}
.stage-crown>span{position:absolute;inset:-100%;background:conic-gradient(from 0deg,#fff8dc00 0 70%,#fff2c4 86%,#fffbe6 93%,#fff8dc00 100%);opacity:0}
.stage-jewel{position:absolute;left:18px;top:-1.5px;z-index:3;width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none}
.stage-jewel+.stage-jewel{left:calc(100% - 18px)}
.stage-jewel::before{animation:star-twinkle 2.6s ease-in-out var(--delay,0s) infinite alternate}
@media(hover:hover) and (pointer:fine){.sponsor-stage[data-step="done"] a.stage-card:hover{transform:translateY(-3px)}}
.sponsor-stage[data-step="done"] a.stage-card:active{transform:scale(.97)}
.stage-sign{display:grid;justify-items:center;gap:8px;margin:0}
.stage-wordmark{font:400 clamp(22px,6vw,30px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.045em;color:#f6f1e4;white-space:nowrap}
.stage-wordmark svg{display:inline-block;width:.714em;height:.66em;margin-left:.16em;vertical-align:-.04em;color:#c9a27f}
.stage-wordmark i,.stage-wordmark span{color:#c9a27f}
.stage-wordmark i{font-size:.81em}
.stage-unit{font:700 10px/1.3 Arial,Helvetica,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#b9c0a8}
/* the moment the sun is drawn into the panel; all of it is gone in the final state */
.stage-fx>span{position:absolute;left:0;top:0;opacity:0}
.stage-sun{width:var(--sun,48px);height:var(--sun,48px);margin:calc(var(--sun,48px) / -2) 0 0 calc(var(--sun,48px) / -2);border-radius:50%;background:radial-gradient(circle at 50% 35%,#fdd75a,#ef8b2a);box-shadow:0 0 0 2px #a3561a,0 0 34px 10px #f6a94566}
.stage-stream{height:4px;margin-top:-2px;transform-origin:0 50%;border-radius:2px;background:linear-gradient(90deg,#fff2c400,#fff2c48c 60%,#fffbe6)}
.stage-vortex{width:170px;height:170px;margin:-85px 0 0 -85px;border:2px solid #fff2c4e6;border-radius:50%;box-shadow:0 0 24px 4px #f3e27a80,inset 0 0 24px 4px #f3e27a59}
.stage-flash{width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,#fffbe6,#fff2c4cc 22%,#f3e27a59 50%,#f3e27a00)}
.stage-panel{border-radius:24px;box-shadow:0 0 0 1.5px #f3e27acc,0 0 26px 6px #f3e27a8c,0 0 70px 18px #fccc3d40,inset 0 0 0 1px #fff2c480,inset 0 0 60px 8px #f3e27a40}
.stage-seed{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(closest-side,#fffbe6,#fff6b8 30%,#f3e27a80 55%,#f3e27a00)}
/* nothing loops unseen, and nothing loops at all with reduced motion */
.sponsor-stage.is-still *,.sponsor-stage.is-still *::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.sponsor-stage *,.sponsor-stage *::before{animation:none!important}}
@media(forced-colors:active){.stage-card{outline:1px solid CanvasText}.sponsor-aura,.sponsor-call{display:none}}
/* The ceiling: a held sun pushed past the top of the sponsor panel meets a line of light at that height, across the whole width
   (beside the panel too), and a ring spreads where it hits. It sits between the chapters and the footer (all z-index 2),
   so it is drawn over the sponsor panel and under the sun. */
.sponsor-barrier{position:fixed;left:0;width:100%;z-index:2;height:4px;margin-top:-2px;pointer-events:none;opacity:0;background:radial-gradient(170px 5px at var(--x,50%) 50%,#fff6b8,#f3e27acc 35%,#f3e27a00 75%);filter:drop-shadow(0 0 8px #f3e27a);transition:opacity .18s}
.sponsor-barrier::after{content:"";position:absolute;left:var(--x,50%);top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1.5px solid #f3e27aa6;border-radius:50%;opacity:0}
.sponsor-barrier.is-hit::after{animation:barrier-ring .65s ease-out}
@keyframes barrier-ring{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.7)}}
@media(forced-colors:active){.sponsor-barrier{display:none}}
/* Konang: a chubby firefly that walks in along the bottom edge once reading starts, sits in the corner, and opens a chat about the KKN. */
/* The corner is a clipped box, so a Konang walking in from past the edge or peeking from it never widens the page. */
.konang{--k-r:max(10px,env(safe-area-inset-right));--k-b:calc(10px + env(safe-area-inset-bottom) + var(--konang-lift,0px));--k-w:68px;--k-h:60px;position:fixed;right:0;bottom:0;z-index:7;width:min(100%,340px);height:calc(var(--k-b) + var(--k-h) + 64px);overflow:hidden;overflow:clip;pointer-events:none;transition:opacity .3s,visibility 0s}
.konang-launch{position:absolute;right:var(--k-r);bottom:var(--k-b);width:var(--k-w);height:var(--k-h);padding:0;border:0;border-radius:42% 42% 48% 48%;background:none;pointer-events:auto;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;filter:drop-shadow(0 2px 3px #17352f30);transition:translate .45s var(--ease),scale .45s var(--ease),opacity .3s}
.konang-launch .kg{display:block;width:100%;height:100%;overflow:visible;transition:transform .2s}
/* a thin cream rim, like a sticker, keeps the dark body readable over the forest bands and the footer */
:is(.konang-launch,.konang-avatar) .kg{filter:drop-shadow(1.2px 0 0 #fbf8ef) drop-shadow(-1.2px 0 0 #fbf8ef) drop-shadow(0 1.2px 0 #fbf8ef) drop-shadow(0 -1.2px 0 #fbf8ef)}
.konang-launch.is-turned .kg{transform:scaleX(-1)}
.konang-launch.is-leaving{pointer-events:none}
.konang-launch:focus-visible{outline:2px solid #fbf8ef;outline-offset:1px;box-shadow:0 0 0 5px var(--accent)}
/* the bubble is words only and takes no taps: whatever lies under it on the page still gets them */
.konang-bubble{position:absolute;right:calc(var(--k-r) + var(--k-w) - 22px);bottom:calc(var(--k-b) + var(--k-h) - 2px);margin:0;padding:8px 12px;border:1px solid #e3dcc8;border-radius:14px 14px 4px 14px;background:#fbf8ef;color:#17352f;font:italic 14.5px/1.3 Georgia,'Times New Roman',serif;white-space:nowrap;box-shadow:0 6px 18px #17352f24;pointer-events:none;transform-origin:100% 100%;opacity:0;visibility:hidden;scale:.85;transition:opacity .3s,visibility .3s,scale .35s var(--ease)}
.konang.is-saying .konang-bubble{opacity:1;visibility:visible;scale:1}
/* while the Senja scene is behind the corner Konang slides out past the edge, so every part of the scene takes a drag;
   while the sun is held or carried over the page, Konang and an open chat window are gone; a wide window also steps
   aside while the sun lies under it; back in the hero with the chat open, Konang itself stays hidden */
.konang.is-tucked .konang-launch{translate:125% 0;opacity:0;visibility:hidden;pointer-events:none;transition:translate .45s var(--ease),scale .45s var(--ease),opacity .3s,visibility 0s .45s}
.konang.is-tucked .konang-bubble{opacity:0;visibility:hidden}
.konang:is(.is-faded,.is-hero) .konang-launch{opacity:0;visibility:hidden;pointer-events:none;transition:translate .45s var(--ease),scale .45s var(--ease),opacity .2s,visibility 0s .2s}
.konang.is-faded .konang-bubble{opacity:0;visibility:hidden}
.konang-chat.is-open:is(.is-faded,.is-held){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.konang.is-ducked,.konang-scrim.is-ducked,.konang-chat.is-open.is-ducked{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}

/* the firefly itself: one drawing, used for the launcher and the chat header */
.kg-shadow{fill:#17352f;opacity:.16;transform-box:fill-box;transform-origin:50% 50%;transition:transform .35s}
.kg-rig{transform-box:view-box;transform-origin:38px 58px;transition:translate .35s var(--ease)}
.kg-halo{transform-box:fill-box;transform-origin:50% 50%;transition:opacity .4s,transform .4s}
.kg-tail{transition:opacity .4s}
.kg-thorax{fill:#21453a}
.kg-cap{fill:#2c5546}
.kg-legs{fill:none;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 0;transition:transform .3s var(--ease)}
.kg-near{stroke:#17352f;stroke-width:2.2}
.kg-far{stroke:#557063;stroke-width:1.9}
.kg-leg{transform-box:fill-box}
.kg-front{transform-origin:100% 0}
.kg-mid{transform-origin:50% 0}
.kg-back{transform-origin:0 0}
.kg-wings{transform-box:view-box;transform-origin:38px 32px}
.kg-wings ellipse{fill:#fff;fill-opacity:.58;stroke:#9fb8ae;stroke-width:.9}
.kg-antennae{fill:none;stroke:#17352f;stroke-width:1.6;stroke-linecap:round}
.kg-ant-l{transform-box:view-box;transform-origin:15px 18px}
.kg-ant-r{transform-box:view-box;transform-origin:25.5px 17.5px}
.kg-eyes{fill:#17352f;transform-box:fill-box;transform-origin:50% 50%;transition:translate .3s,opacity .2s}
.kg-joy{fill:none;stroke:#17352f;stroke-width:1.8;stroke-linecap:round;opacity:0;transition:opacity .2s}
.kg-cheek{fill:#f29c8a;opacity:.7;transition:opacity .3s}
.kg-mouth{fill:none;stroke:#17352f;stroke-width:1.3;stroke-linecap:round}
/* walk: a tripod gait, three legs at a time, with a bouncy waddle */
[data-mood="walk"] .kg-a{animation:kg-step .3s ease-in-out infinite alternate}
[data-mood="walk"] .kg-b{animation:kg-step .3s ease-in-out -.3s infinite alternate}
[data-mood="walk"] .kg-rig{animation:kg-waddle .6s ease-in-out infinite}
[data-mood="walk"] .kg-wings{animation:kg-flutter .15s ease-in-out infinite alternate}
[data-mood="walk"] :is(.kg-ant-l,.kg-ant-r){animation:kg-boing .3s ease-in-out infinite alternate}
/* rest: sits down on tucked legs; the tail breathes and the eyes blink now and then */
:is([data-mood="rest"],[data-mood="think"],[data-mood="happy"]) .kg-legs{transform:scaleY(.42)}
:is([data-mood="rest"],[data-mood="think"],[data-mood="happy"]) .kg-rig{translate:0 3.5px}
:is([data-mood="rest"],[data-mood="think"],[data-mood="happy"]) .kg-shadow{transform:scaleX(.9)}
[data-mood="rest"] .kg-halo{animation:kg-breathe 3.6s ease-in-out infinite}
[data-mood="rest"] .kg-eyes{animation:kg-blink 5.5s 1.2s infinite}
/* think: the tail blinks while an answer comes in */
[data-mood="think"] .kg-halo{animation:kg-signal .9s ease-in-out infinite}
[data-mood="think"] .kg-tail{animation:kg-signal-tail .9s ease-in-out infinite}
[data-mood="think"] .kg-eyes{translate:-.8px -1.2px}
[data-mood="think"] .kg-ant-l{animation:kg-boing .45s ease-in-out infinite alternate}
[data-mood="think"] .kg-ant-r{animation:kg-boing .45s ease-in-out -.2s infinite alternate}
/* happy: when an answer is done, a hop with smiling eyes */
[data-mood="happy"] .kg-eyes{opacity:0}
[data-mood="happy"] .kg-joy{opacity:1}
[data-mood="happy"] .kg-cheek{opacity:1}
[data-mood="happy"] .kg-halo{transform:scale(1.15)}
[data-mood="happy"] .kg-rig{animation:kg-hop .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.konang-launch[data-mood="rest"]:hover :is(.kg-ant-l,.kg-ant-r){animation:kg-boing .3s ease-in-out 2 alternate}}
.konang.is-still .kg *{animation-play-state:paused!important}
/* a Konang out of sight keeps still, so a hidden drawing never costs a frame */
:is(.konang:is(.is-tucked,.is-faded,.is-ducked,.is-hero),.konang-chat:is(.is-faded,.is-held,.is-ducked)) .kg *{animation-play-state:paused!important}
@keyframes kg-step{from{transform:rotate(-22deg)}to{transform:rotate(18deg)}}
@keyframes kg-waddle{0%,100%{transform:translateY(0) rotate(-2.5deg)}25%,75%{transform:translateY(-2.6px) rotate(0)}50%{transform:translateY(0) rotate(2.5deg)}}
@keyframes kg-flutter{from{transform:rotate(-4deg)}to{transform:rotate(8deg)}}
@keyframes kg-boing{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
@keyframes kg-breathe{0%,100%{opacity:.6;transform:scale(.86)}50%{opacity:1;transform:scale(1.05)}}
@keyframes kg-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
@keyframes kg-signal{0%,100%{opacity:1}50%{opacity:.08}}
@keyframes kg-signal-tail{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes kg-hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px) rotate(-4deg)}55%{transform:translateY(0)}75%{transform:translateY(-2.5px)}}

/* the chat: a bottom sheet on phones that rides above the keyboard, a small window over the corner on wider screens */
/* while the phone sheet is open the page behind it stays put: the scrim and the header take no pan, the log and the field
   keep their scrolling to themselves, and the input row takes no pan at all. (overflow:hidden on the page would do it
   too, but in Chromium it makes the page restyle about 30 times a second for as long as the sheet is open) */
.konang-scrim{position:fixed;inset:0;z-index:8;background:#16261e73;opacity:0;transition:opacity .3s,visibility .3s;touch-action:none}
.konang-scrim.is-open{opacity:1}
.konang-chat{position:fixed;left:0;right:0;bottom:var(--konang-kb,0px);z-index:9;display:flex;flex-direction:column;height:min(560px,74vh);height:min(560px,calc(var(--konang-vh,100dvh) * .74));max-height:calc(var(--konang-vh,100vh) - 8px);overflow:hidden;overscroll-behavior:contain;background:#fbf8ef;color:var(--ink);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px #0f1c1440;outline:none;visibility:hidden;translate:0 104%;transition:translate .38s var(--ease),visibility 0s .38s,opacity .3s}
.konang-chat.is-open{visibility:visible;translate:0 0;transition:translate .38s var(--ease),visibility 0s,opacity .3s}
.konang-chat.is-dragging{transition:none}
.konang-head{position:relative;display:flex;align-items:center;gap:10px;padding:16px 12px 12px 12px;background:#17352f;color:#fbf8ef;touch-action:none}
.konang-head::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#fbf8ef3d}
.konang-avatar{flex:none;width:62px;height:55px;margin:-4px 0 -4px -2px;border-radius:50%;background:radial-gradient(circle at 70% 62%,#f3e27a30,#f3e27a00 60%)}
.konang-avatar .kg{display:block;width:100%;height:100%;overflow:visible}
.konang-avatar .kg-shadow{display:none}
.konang-title{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:3px}
.konang-name{font:400 22px/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.3px}
.konang-sub{font-size:12px;line-height:1.3;color:#c4cbb5}
.konang-close{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #fbf8ef33;border-radius:50%;background:none;color:#fbf8ef;transition:background .2s}
.konang-close .icon{width:20px;height:20px}
.konang-close:hover{background:#fbf8ef14}
.konang-close:focus-visible,.konang-send:focus-visible{outline:2px solid #f3e27a;outline-offset:2px}
.konang-log{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 10px}
.konang-msg{max-width:86%;margin:0;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.konang-msg.is-konang{align-self:flex-start;background:#efe9d9;color:#2f3d30;border-top-left-radius:5px}
.konang-msg.is-user{align-self:flex-end;background:#17352f;color:#fbf8ef;border-top-right-radius:5px}
.konang-msg.is-error{background:#f5e6da;color:#73402a}
.konang-retry{display:block;margin-top:8px;min-height:36px;padding:6px 14px;border:1px solid #d7b9a3;border-radius:18px;background:#fffaf3;color:#73402a;font-size:14px}
.konang-dots{display:inline-flex;gap:6px;padding:5px 2px}
.konang-dots i{width:7px;height:7px;border-radius:50%;background:#e2bd3f;box-shadow:0 0 6px 1px #f3e27aaa;animation:konang-dot 1.2s ease-in-out infinite}
.konang-dots i:nth-child(2){animation-delay:.2s}
.konang-dots i:nth-child(3){animation-delay:.4s}
.konang-msg.is-streaming::after{content:"";display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:#e8c64a;box-shadow:0 0 6px 2px #f3e27a99;vertical-align:1px;animation:konang-caret .8s ease-in-out infinite alternate}
.konang-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.konang-chips button{min-height:40px;padding:8px 14px;border:1px solid #d9cdb3;border-radius:20px;background:#fffaf0;color:#6b4d3c;font-size:14px;line-height:1.2;text-align:left;transition:background .2s,border-color .2s}
.konang-chips button:hover{background:#f3ead6;border-color:#c9b48f}
/* a swipe on the input row moves nothing behind the sheet; the field itself still scrolls a long question */
.konang-form{position:relative;display:flex;align-items:flex-end;gap:8px;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e6dfcc;background:#fbf8ef;touch-action:none}
.konang-chat.is-kb .konang-form{padding-bottom:10px}
.konang-form textarea{flex:1;min-width:0;height:44px;min-height:44px;max-height:124px;margin:0;padding:11px 15px;resize:none;border:1px solid #948a72;border-radius:22px;background:#fff;color:var(--ink);font:16px/1.3 Arial,Helvetica,sans-serif;outline:none;touch-action:pan-y;overscroll-behavior:contain;transition:border-color .2s,box-shadow .2s}
.konang-form textarea::placeholder{color:#6f7363}
.konang-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #87634c26}
.konang-send{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#17352f;color:#f3e27a;transition:opacity .2s,transform .2s}
.konang-send .icon{width:20px;height:20px}
.konang-send:disabled{opacity:.32;cursor:default}
.konang-count{position:absolute;right:66px;top:-11px;padding:1px 7px;border:1px solid #e6dfcc;border-radius:9px;background:#fbf8ef;color:var(--accent);font-size:11px;line-height:1.5}
.konang-count.is-max{color:#a3402a}
@keyframes konang-dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes konang-caret{from{opacity:.35}to{opacity:1}}
@media(min-width:641px){.konang{--k-r:max(18px,env(safe-area-inset-right));--k-b:calc(16px + env(safe-area-inset-bottom) + var(--konang-lift,0px));--k-w:77px;--k-h:68px}}
/* the sheet covers the launcher; a phone held sideways keeps the sheet, narrower, because its keyboard leaves little height */
@media(max-width:640px),(max-height:520px){.konang.is-open{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.konang.is-open .kg *{animation-play-state:paused!important}.konang-chat.is-kb{height:calc(var(--konang-vh) - 8px)}}
@media(min-width:641px) and (max-height:520px){.konang-chat{left:auto;right:max(12px,env(safe-area-inset-right));width:min(460px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}}
/* the window: its top stays clear of the fixed nav, it rises with Konang above the footer's last line, and on a
   tablet it rides above the on-screen keyboard (visualViewport, as the phone sheet does) */
@media(min-width:641px) and (min-height:521px){
  .konang-scrim{display:none}
  .konang-chat{left:auto;right:20px;bottom:calc(100px + env(safe-area-inset-bottom) + var(--konang-lift,0px));width:372px;height:min(580px,calc(var(--konang-vh,100vh) - 180px - var(--konang-lift,0px)));max-height:none;border-radius:20px;box-shadow:0 24px 70px #0f1c1447,0 0 0 1px #17352f14;opacity:0;translate:0 14px;scale:.96;transform-origin:calc(100% - 36px) 100%;transition:translate .3s var(--ease),scale .3s var(--ease),opacity .22s,visibility 0s .3s}
  .konang-chat.is-kb{bottom:calc(var(--konang-kb) + 12px);height:min(580px,calc(var(--konang-vh) - 24px))}
  .konang-chat.is-open{opacity:1;translate:0 0;scale:1;transition:translate .3s var(--ease),scale .3s var(--ease),opacity .22s,visibility 0s}
  .konang-head{padding:14px 12px 12px 14px;touch-action:auto}
  .konang-head::before{display:none}
}
@media(forced-colors:active){.konang-launch,.konang-msg,.konang-chips button{border:1px solid CanvasText}}
@media print{.konang,.konang-scrim,.konang-chat{display:none!important}}

/* A handwritten invitation follows the sun until the first interaction: the line in a cream capsule that reads on any sky,
   high enough above the sun to leave room for the demo between them. */
.senja-hint{position:absolute;z-index:4;left:clamp(172px,var(--hint-x,18%),calc(100% - 172px));top:max(10px,calc(var(--hint-y,80%) - 150px));transform:translateX(-50%);width:320px;color:#5a3d26;text-align:center;pointer-events:none;transition:opacity .3s,visibility .3s}
.senja-hint-title{display:block;font:italic 22px/1.3 Georgia,serif;letter-spacing:-.3px;text-shadow:0 1px 12px #fff9}
.senja-hint-instruction{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:6px 13px 6px 11px;border:1px solid #a3561a38;border-radius:99px;background:#fffaf0e0;box-shadow:0 6px 18px -8px #6b3d1a66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font:12px/1.4 Arial,sans-serif;color:#5a3d26;white-space:nowrap}
.senja-hint-instruction svg{width:10px;height:17px;flex:none;color:#a3561a}
/* the hand: it presses the sun, lifts the pale copy up, comes back, and pushes it down; the fingertip rests on the sun */
.sun-demo{position:absolute;z-index:4;left:var(--hint-x,18%);top:var(--hint-y,80%);width:28px;height:28px;margin:5px 0 0 -3px;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px #3d241066)}
.sun-demo svg{display:block;width:100%;height:100%}
.senja:not(.is-touched):not(.is-night):not(.is-cued):not(.is-dragging):not(.is-given) .sun-demo{animation:sun-demo 4.8s ease-in-out 1.2s infinite}
@keyframes sun-demo{0%{opacity:0;translate:10px 12px;scale:1}8%{opacity:1;translate:0 0;scale:1}12%{scale:.86;translate:0 0}36%{opacity:1;scale:.86;translate:0 -36px}42%{opacity:0;scale:1;translate:0 -36px}50%{opacity:0;translate:10px 12px;scale:1}56%{opacity:1;translate:0 0;scale:1}60%{scale:.86;translate:0 0}84%{opacity:1;scale:.86;translate:0 34px}90%{opacity:0;scale:1;translate:0 34px}100%{opacity:0;translate:0 34px}}
.senja.is-touched .senja-hint,.senja.is-night .senja-hint,.senja.is-dragging .senja-hint,.senja.is-given .senja-hint{opacity:0;visibility:hidden}
@media(max-width:359px){.senja-hint{left:50%;width:calc(100% - 24px)}.senja-hint-instruction{white-space:normal}}
@media(prefers-reduced-motion:reduce){.senja-hint{transition:none}.sun-demo,.senja .senja-sun::after{display:none}}
@media(forced-colors:active){.sun-demo{display:none}}