/* Atelier Aetheria · dasar: warna, huruf, tombol, monogram, pembuka, kepala halaman, animasi muncul */

/* Layout: full-width bands alternating Rinjani green and pearl cream; content in a 1240px column, left-aligned and editorial.
   The one bold move is the brass-inlaid Æ monogram; everything around it stays quiet. Single deliberate light look, no dark theme. */
:root{
  --rinjani:#1D3127; --rinjani-2:#22392E; --rinjani-3:#2B4638; --rinjani-4:#3A5246;
  --pearl:#EEEDE7; --ivory:#F8F7F3; --sand:#E5E2D8;
  --brass:#9A7B45; --brass-2:#C4A66E; --brass-text:#7A5F30;
  --ink:#18211C; --ink-2:#56665A;
  --on-g:#EEEDE7; --on-g-2:#B7C0B5;
  --hair:#CFD2C8; --ctrl:#7A867D;
  --danger:#9B2F2F; --ok:#2F6B4A;
  --f-d:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --f-t:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.12,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --hdr:76px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--pearl);color:var(--ink);font-family:var(--f-t);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.lock{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--brass-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.g :focus-visible,.g:focus-visible{outline-color:var(--brass-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ivory);padding:10px 16px;border-radius:2px;text-decoration:none;transition:top .3s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- bands & column ---------- */
.band{position:relative}
.band.g{background:var(--rinjani);color:var(--on-g)}
.band.iv{background:var(--ivory)}
.band.pe{background:var(--pearl)}
.wrap{width:100%;max-width:1336px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(84px,11vw,148px)}
@media (min-width:760px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
section[id]{scroll-margin-top:72px}

/* ---------- type ---------- */
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--f-t);font-style:italic;font-size:17px;color:var(--brass-text);margin-bottom:22px}
.g .kicker{color:var(--brass-2)}
.kicker::before{content:"";width:42px;height:1px;background:currentColor;transform-origin:left;transition:transform 1.2s var(--ease-out) .1s}
.h2{font-size:clamp(38px,5.4vw,68px);line-height:1.04}
.h3{font-size:clamp(28px,3vw,36px);line-height:1.15}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.g .lead{color:var(--on-g-2)}
.muted{color:var(--ink-2)}
.g .muted{color:var(--on-g-2)}
.small{font-size:14px;line-height:1.6}
.sec-head{display:grid;gap:22px;max-width:820px;margin-bottom:clamp(44px,6vw,72px)}
@media (min-width:960px){.sec-head.split{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;column-gap:72px}.sec-head.split .lead{padding-bottom:10px}}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head.center .lead{margin-inline:auto}
.price-top.center{flex-direction:column;align-items:center;text-align:center}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:2px;border:1px solid transparent;font-family:var(--f-t);font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform 1s var(--ease-out);z-index:-1;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--rinjani);color:var(--pearl)}
.btn-p:hover{background:var(--rinjani-3)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--ctrl)}
.btn-s:hover{border-color:var(--ink);background:var(--ivory)}
.g .btn-p{background:var(--pearl);color:var(--rinjani)}
.g .btn-p:hover{background:var(--brass-2)}
.g .btn-s{color:var(--on-g);border-color:rgba(238,237,231,.42)}
.g .btn-s:hover{border-color:var(--on-g);background:rgba(238,237,231,.06)}
.btn-q{min-height:auto;padding:4px 0;background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:7px;transition:text-underline-offset .4s var(--ease),text-decoration-thickness .4s}
.btn-q::after{display:none}
.btn-q:hover{text-underline-offset:4px;text-decoration-thickness:2px}
.g .btn-q{text-decoration-color:var(--brass-2)}

/* ---------- monogram ---------- */
.ae{display:block;overflow:visible}
.ae .gl{fill:currentColor}
.ae .bar{fill:var(--brass)}
.g .ae .bar,.ae.light .bar{fill:var(--brass-2)}
.ae .shine{mix-blend-mode:screen}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:120;background:var(--rinjani);color:var(--pearl);display:grid;place-items:center;animation:preOut 1s var(--ease-io) 2.2s forwards}
#pre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-2);transform:scaleX(0);transform-origin:left;animation:preLine 1.6s var(--ease-out) calc(var(--p0,0s) + .3s) forwards}
#pre .pm{width:min(132px,30vw);display:grid;justify-items:center;gap:22px}
#pre svg .gl{fill:transparent;stroke:var(--pearl);stroke-width:.35;stroke-dasharray:420;stroke-dashoffset:420;animation:preDraw 1.5s var(--ease) calc(var(--p0,0s) + .15s) forwards,preFill .6s ease calc(var(--p0,0s) + 1.25s) forwards}
#pre svg .bar{fill:var(--brass-2);transform-box:fill-box;transform-origin:left;transform:scaleX(0);animation:preBar .6s var(--ease-out) calc(var(--p0,0s) + 1.45s) forwards}
#pre .pw{font-family:var(--f-t);font-style:italic;font-size:15px;letter-spacing:.06em;color:var(--brass-2);opacity:0;animation:fadeIn .8s ease calc(var(--p0,0s) + 1.3s) forwards}
#pre.done{animation:preOut .9s var(--ease-io) forwards}
#pre.skip{display:none}
#pre.replay{--p0:.9s;animation:preIn .9s var(--ease-io) both}
@keyframes preIn{from{transform:translateY(-100%)}to{transform:none}}
#pre.replay.done{animation:preOut .9s var(--ease-io) forwards}
@keyframes preDraw{to{stroke-dashoffset:0}}
@keyframes preFill{to{fill:var(--pearl);stroke-width:0}}
@keyframes preBar{to{transform:scaleX(1)}}
@keyframes preLine{to{transform:scaleX(1)}}
@keyframes preOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- header ---------- */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;background:var(--brass-2);transform-origin:left;transform:scaleX(0);pointer-events:none}
.hdr{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);color:var(--on-g);transition:background-color .7s var(--ease),color .7s var(--ease),transform .7s var(--ease-out),box-shadow .7s var(--ease)}
.hdr.light{background:rgba(238,237,231,.9);color:var(--ink);box-shadow:0 1px 0 var(--hair);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.hdr.dark{background:rgba(29,49,39,.88);box-shadow:0 1px 0 rgba(238,237,231,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr.up{transform:translateY(-110%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr);max-width:1336px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.hdr-in{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand .ae{width:38px;height:auto}
.brand .rule{width:1px;height:34px;background:var(--brass-2);opacity:.9}
.hdr.light .brand .rule{background:var(--brass)}
.hdr .ae .bar{fill:var(--brass-2)}
.hdr.light .ae .bar{fill:var(--brass)}
.brand .wm{display:grid;line-height:1}
.brand .wm i{font-family:var(--f-t);font-size:14px;color:var(--brass-2);margin-left:1px}
.hdr.light .brand .wm i{color:var(--brass-text)}
.brand .wm b{font-family:var(--f-d);font-weight:400;font-size:19px;letter-spacing:.2em;margin-top:5px}
.nav{display:none;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav a{position:relative;font-size:15.5px;text-decoration:none;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-2);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out)}
.hdr.light .nav a::after{background:var(--brass)}
.nav a:hover::after,.nav a.cur::after{transform:scaleX(1);transform-origin:left}
.hdr .btn{min-height:44px;padding:0 20px;font-size:15px}
.hdr .btn-h{background:var(--pearl);color:var(--rinjani)}
.hdr .btn-h:hover{background:var(--brass-2)}
.hdr.light .btn-h{background:var(--rinjani);color:var(--pearl)}
.hdr.light .btn-h:hover{background:var(--rinjani-3)}
.hdr-cta{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font-size:16px}
.menu-btn .lines{display:grid;gap:6px;width:24px}
.menu-btn .lines span{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease-out),opacity .3s}
.menu-btn[aria-expanded="true"] .lines span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .lines span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1080px){.nav{display:flex}.menu-btn{display:none}.hdr-cta{display:inline-flex}}

/* mobile menu */
.mm{position:fixed;inset:0;z-index:55;background:var(--rinjani);color:var(--on-g);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io);visibility:hidden;display:flex;flex-direction:column;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 24px);padding-bottom:max(32px,env(safe-area-inset-bottom,0px));padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));overflow-y:auto}
.mm.open{clip-path:inset(0 0 0 0);visibility:visible}
.mm nav{display:grid;gap:4px;margin-top:8px}
.mm nav a{display:flex;align-items:baseline;gap:16px;font-family:var(--f-d);font-size:clamp(34px,9vw,52px);line-height:1.25;text-decoration:none;opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),color .3s}
.mm nav a small{font-family:var(--f-t);font-style:italic;font-size:15px;color:var(--brass-2)}
.mm nav a:hover{color:var(--brass-2)}
.mm.open nav a{opacity:1;transform:none}
.mm .mm-foot{margin-top:auto;display:grid;gap:18px;padding-top:40px;opacity:0;transition:opacity .8s ease .5s}
.mm.open .mm-foot{opacity:1}

/* ---------- reveal ---------- */
.js [data-r]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r].from-top:not(.in){transform:translateY(-34px)}
.js [data-r="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-io);transition-delay:var(--d,0s)}
.js [data-r="clip"].in{clip-path:inset(0 0 0 0)}
.js .kicker:not(.in)::before{transform:scaleX(0)}
.js [data-r].kicker{transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block}
.js .h-anim .ln>span{transform:translateY(105%);transition:transform 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.js .h-anim.in .ln>span{transform:none}
.js .h-anim.from-top:not(.in) .ln>span{transform:translateY(-105%)}
.js [data-r].kicker.from-top:not(.in){transform:none}