:root{
  --ground:#E8EBF0; --surface:#F7F8FB; --surface-2:#DDE2EB;
  --ink:#131A2B; --ink-2:#465074; --ink-3:#6B7593; --line:#C6CDDB;
  --indigo:#22355F; --indigo-deep:#17253F;
  --on-indigo:#EEF2F9; --on-indigo-2:#A9B8D4; --on-indigo-line:#3C5184;
  --selvedge:#B33028; --brass:#A3792E;
  --r:3px;
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --label:"Archivo Narrow","Arial Narrow",Arial,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1422; --surface:#151D2F; --surface-2:#1D2740;
    --ink:#E7EBF3; --ink-2:#A3AEC6; --ink-3:#79839B; --line:#28324C;
    --indigo:#1A2A4E; --indigo-deep:#101B31;
    --on-indigo:#EDF1F8; --on-indigo-2:#9FB0CE; --on-indigo-line:#2C3F66;
    --selvedge:#D25A50; --brass:#C7A155;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1422; --surface:#151D2F; --surface-2:#1D2740;
  --ink:#E7EBF3; --ink-2:#A3AEC6; --ink-3:#79839B; --line:#28324C;
  --indigo:#1A2A4E; --indigo-deep:#101B31;
  --on-indigo:#EDF1F8; --on-indigo-2:#9FB0CE; --on-indigo-line:#2C3F66;
  --selvedge:#D25A50; --brass:#C7A155;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; line-height:1.08; font-family:var(--display); font-weight:400}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--selvedge); outline-offset:3px; border-radius:2px}

.label{
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--ink-3);
}

/* ---- sticky bar ---- */
.bar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--ground); border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:1000px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
}
.bar-name{font-family:var(--display); font-size:1rem; letter-spacing:-.01em; text-decoration:none}
.bar-in .spacer{flex:1 1 auto}
.bar-nav{display:flex; gap:16px}
.bar-nav a{
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  letter-spacing:.11em; font-size:.74rem; color:var(--ink-3);
  text-decoration:none; padding-block:3px; border-bottom:2px solid transparent;
}
.bar-nav a:hover{color:var(--ink)}
.bar-nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--selvedge)}

/* ---- hero ---- */
.hero{
  color:var(--on-indigo);
  background:
    repeating-linear-gradient(63deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(63deg, rgba(0,0,0,.09) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(168deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  border-bottom:3px solid var(--selvedge);
}
.hero-in{max-width:1000px; margin:0 auto; padding:20px; padding-block:clamp(48px,9vw,88px)}
.hero .label{color:var(--on-indigo-2)}
.hero h1{font-size:clamp(3rem,13vw,6.5rem); letter-spacing:-.035em; margin:.18em 0 .28em}
.hero.hero-sub h1{font-size:clamp(2.2rem,7.5vw,4rem); letter-spacing:-.03em}
.hero.hero-sub .hero-in{padding-block:clamp(40px,7vw,68px)}
.lede{
  font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--on-indigo);
  max-width:34ch; line-height:1.45;
}
.hero.hero-sub .lede{max-width:46ch; color:var(--on-indigo-2)}
.hero-meta{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; margin-top:28px}

.status{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.75rem;
  padding:6px 13px; border:1px solid var(--on-indigo-line); border-radius:999px;
  background:rgba(0,0,0,.18);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--on-indigo-2); flex:none}
.status[data-open="true"] .dot{background:#6FD79F}
.status[data-open="false"] .dot{background:#E4736A}
.status small{font-family:var(--body); text-transform:none; letter-spacing:0; font-size:.8rem; color:var(--on-indigo-2); font-weight:400}

.rating{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--on-indigo-2)}
.rating b{font-family:var(--display); font-size:1.05rem; color:var(--on-indigo)}
.stars{position:relative; display:inline-block; color:var(--on-indigo-line); letter-spacing:.08em; font-size:.95rem}
.stars i{position:absolute; inset:0; overflow:hidden; color:var(--brass); font-style:normal; white-space:nowrap}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--label); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; padding:12px 20px; border-radius:var(--r);
  text-decoration:none; border:1px solid transparent; transition:.16s ease;
}
.btn-1{background:var(--selvedge); color:#fff}
.btn-1:hover{filter:brightness(1.12)}
.btn-2{border-color:var(--on-indigo-line); color:var(--on-indigo)}
.btn-2:hover{background:rgba(255,255,255,.07)}
.btn-3{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-3:hover{background:var(--surface-2)}

/* ---- rail layout ---- */
.wrap{max-width:1000px; margin:0 auto; padding:0 20px}
.rail{
  border-left:2px solid var(--selvedge);
  padding-left:clamp(18px,4vw,40px);
  margin-left:4px;
}
section{padding-block:clamp(44px,7vw,72px); position:relative}
section + section{border-top:1px solid var(--line)}
.rivet{
  position:absolute; left:calc(-1 * clamp(18px,4vw,40px) - 6px); top:clamp(44px,7vw,72px);
  width:10px; height:10px; background:var(--brass);
  transform:rotate(45deg); border:2px solid var(--ground);
}
.head{margin-bottom:30px}
.head h2{font-size:clamp(1.6rem,4.2vw,2.3rem); letter-spacing:-.025em; margin-top:.35em}
.head p{color:var(--ink-2); margin-top:.7em; max-width:58ch}

/* ---- product grid ---- */
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.card h3{font-size:1.06rem; letter-spacing:-.01em; margin-bottom:.55em}
.card p{color:var(--ink-2); font-size:.93rem; line-height:1.55}
.card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tag{
  font-family:var(--label); font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  font-weight:600; padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--ink-3);
}

/* services: flat rows, deliberately not cards */
.svc{display:grid; gap:0; border-top:1px solid var(--line)}
.svc-row{
  display:grid; grid-template-columns:minmax(150px,.8fr) 2fr; gap:8px 28px;
  padding-block:20px; border-bottom:1px solid var(--line); align-items:start;
}
.svc-row h3{font-size:1.02rem; letter-spacing:-.01em}
.svc-row p{color:var(--ink-2); font-size:.93rem}
.svc-note{margin-top:22px; font-size:.9rem; color:var(--ink-2); border-left:2px solid var(--brass); padding-left:14px}

/* timeline */
.tl{display:grid; gap:0}
.tl-row{
  display:grid; grid-template-columns:86px 1fr; gap:8px 24px;
  padding-block:18px; border-bottom:1px solid var(--line); align-items:start;
}
.tl-row:first-child{border-top:1px solid var(--line)}
.yr{
  font-family:var(--display); font-size:1.1rem; color:var(--selvedge);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; padding-top:2px;
}
.tl-row p{color:var(--ink-2); font-size:.95rem}
.tl-row p b{color:var(--ink); font-weight:600}

blockquote{
  margin:32px 0 0; padding:24px 26px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--selvedge); border-radius:var(--r);
}
blockquote p{font-family:var(--display); font-size:clamp(1.1rem,2.8vw,1.4rem); line-height:1.35; letter-spacing:-.02em}
blockquote footer{margin-top:14px; color:var(--ink-3); font-size:.85rem; font-family:var(--label); text-transform:uppercase; letter-spacing:.12em}

/* ---- long-form prose (about page) ---- */
.prose{max-width:62ch}
.prose p{color:var(--ink-2); font-size:1rem; line-height:1.72}
.prose p + p{margin-top:1.1em}
.prose p b, .prose p strong{color:var(--ink); font-weight:600}
.prose .first{font-size:1.1rem; color:var(--ink)}
.aside{
  margin-top:28px; padding:20px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); max-width:62ch;
}
.aside .label{display:block; margin-bottom:10px}
.aside p{color:var(--ink-2); font-size:.93rem; line-height:1.62}
.factlist{display:grid; gap:0; margin-top:8px}
.factlist div{
  display:flex; justify-content:space-between; gap:18px;
  padding-block:11px; border-bottom:1px solid var(--line); font-size:.93rem;
}
.factlist div:last-child{border-bottom:0}
.factlist dt, .factlist .k{color:var(--ink-3)}
.factlist .v{color:var(--ink); text-align:right; font-weight:500}

/* reviews */
.rev{display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start}
.score{flex:0 0 auto}
.score .n{font-family:var(--display); font-size:4rem; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.score .stars{font-size:1.15rem; color:var(--surface-2); margin-top:10px; display:block}
.score .sub{color:var(--ink-3); font-size:.88rem; margin-top:8px}
.themes{flex:1 1 300px}
.themes > p{color:var(--ink-2); font-size:.95rem}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{font-size:.88rem; padding:6px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.rev-cta{margin-top:22px}

/* visit */
.visit{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); align-items:start}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.panel .label{display:block; margin-bottom:12px}
address{font-style:normal; color:var(--ink-2); font-size:.95rem; line-height:1.65}
.kv{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:10px}
.kv div{display:flex; justify-content:space-between; gap:16px; font-size:.92rem}
.kv .k{color:var(--ink-3)}
.kv a{color:var(--ink); text-decoration-color:var(--line); text-underline-offset:3px}
.panel-cta{margin-top:20px}
.hours-note{margin-top:16px; color:var(--ink-3); font-size:.86rem}

table{width:100%; border-collapse:collapse; font-size:.93rem; font-variant-numeric:tabular-nums}
th,td{padding:9px 0; border-bottom:1px solid var(--line)}
th{text-align:left; font-family:var(--body); font-weight:500; color:var(--ink-2)}
td{text-align:right; color:var(--ink-2)}
tr:last-child th, tr:last-child td{border-bottom:0}
tr[data-today="1"] th, tr[data-today="1"] td{color:var(--ink); font-weight:700}
tr[data-today="1"] th::after{
  content:"hari ini"; font-family:var(--label); font-weight:600; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--selvedge); margin-left:9px;
}

footer.site{border-top:3px solid var(--selvedge); background:var(--surface)}
.foot-in{
  max-width:1000px; margin:0 auto; padding:20px; padding-block:40px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start;
}
.foot-name{font-family:var(--display); font-size:1.1rem; letter-spacing:-.02em}
.foot-in small{color:var(--ink-3); font-size:.82rem}
.foot-links{display:flex; flex-wrap:wrap; gap:18px}
.foot-links a{font-size:.92rem; color:var(--ink-2); text-decoration-color:var(--line); text-underline-offset:3px}
.foot-links a:hover{color:var(--ink)}

/* ---- photographs ---- */
.figure{margin:0; max-width:62ch}
.figure img{
  display:block; width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface-2);
}
.figure figcaption{
  margin-top:10px; color:var(--ink-3); font-size:.86rem; line-height:1.5;
  border-left:2px solid var(--brass); padding-left:12px;
}
.figure figcaption b{color:var(--ink-2); font-weight:600}
.figure .credit{display:block; margin-top:3px; font-size:.78rem; color:var(--ink-3)}

/* founder portrait: sits beside the prose on wide screens */
.portrait{
  float:right; width:min(290px, 38%); margin:4px 0 22px 28px;
}
.portrait img{aspect-ratio:4/5; object-fit:cover}
@media (max-width:640px){
  .portrait{float:none; width:100%; margin:0 0 24px}
}

.gallery{
  display:grid; gap:12px; margin-top:4px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.gallery .figure{max-width:none}
.gallery img{aspect-ratio:4/3; object-fit:cover}
.gallery .wide{grid-column:span 2}
@media (max-width:560px){ .gallery .wide{grid-column:span 1} }

/* ---- decorative Krakatau motif ---- */
.motif{display:block; width:100%; max-width:380px; height:auto; margin:4px 0 18px; color:var(--ink-3)}
.motif .sea{stroke:var(--line)}
.motif .peak{stroke:var(--selvedge)}

/* ---- citations & references ---- */
.cite{
  font-size:.62em; vertical-align:super; line-height:0;
  text-decoration:none; color:var(--selvedge); font-weight:700;
  padding-inline:1px 2px; font-variant-numeric:tabular-nums;
}
.cite:hover{text-decoration:underline}
/* press carousel */
.press-track{
  display:flex; gap:14px; list-style:none; margin:0;
  padding:2px 2px 16px; counter-reset:ref;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.press-track::-webkit-scrollbar{height:7px}
.press-track::-webkit-scrollbar-track{background:transparent}
.press-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.press-card{
  counter-increment:ref; flex:0 0 clamp(258px, 76vw, 326px);
  scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.press-cover{
  position:relative; aspect-ratio:16/10; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  color:var(--on-indigo); border-bottom:3px solid var(--selvedge);
  background:
    repeating-linear-gradient(63deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(63deg, rgba(0,0,0,.09) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(168deg, var(--indigo) 0%, var(--indigo-deep) 100%);
}
.press-card[data-accent="brass"] .press-cover{border-bottom-color:var(--brass)}
.press-card[data-accent="line"]  .press-cover{border-bottom-color:var(--on-indigo-line)}
.press-cover::before{
  content:counter(ref); position:absolute; top:15px; left:18px;
  font-family:var(--display); font-size:.82rem; color:var(--on-indigo-2);
  font-variant-numeric:tabular-nums;
}
.press-pub{font-family:var(--display); font-size:1.22rem; letter-spacing:-.025em; line-height:1.12}
.press-date{
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:.67rem; color:var(--on-indigo-2);
}
.press-body{padding:17px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.press-body a{
  font-size:.96rem; line-height:1.4; font-weight:600; color:var(--ink);
  text-decoration-color:var(--line); text-underline-offset:3px;
}
.press-body a:hover{text-decoration-color:var(--selvedge)}
.press-note{color:var(--ink-3); font-size:.83rem; line-height:1.5; margin-top:auto}
.press-card.flash{border-color:var(--selvedge); box-shadow:0 0 0 2px color-mix(in srgb, var(--selvedge) 28%, transparent)}

.press-ctrl{display:flex; gap:8px; align-items:center; margin-top:4px}
.press-btn{
  width:38px; height:38px; flex:none; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--r); display:grid; place-items:center; font-size:.95rem;
  transition:.15s ease;
}
.press-btn:hover:not(:disabled){background:var(--surface-2); border-color:var(--ink-3)}
.press-btn:disabled{opacity:.32; cursor:default}
.press-hint{color:var(--ink-3); font-size:.82rem; margin-left:4px}
@media (prefers-reduced-motion:reduce){ .press-track{scroll-behavior:auto} }

@media (max-width:560px){
  .svc-row{grid-template-columns:1fr; gap:4px}
  .tl-row{grid-template-columns:1fr; gap:2px}
  .kv div{flex-direction:column; gap:2px}
  .factlist div{flex-direction:column; gap:2px}
  .factlist .v{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}