/* Respati Wikantiyoso — lightweight static site. Soft warm palette, light & dark. */
:root{
  --bg:#fbf8f4; --surface:#ffffff; --surface-2:#f4eee7; --text:#2f2a26; --muted:#6c635b;
  --brand:#9b2c2c; --brand-soft:#f6e7e4; --band:#b29b89; --band-2:#a08672; --band-text:#ffffff;
  --line:#e7ddd3; --chip:#f1e9e1; --link:#8a2f2f; --ok:#4f7a5a; --shadow:0 1px 2px rgba(60,40,30,.06),0 6px 18px rgba(60,40,30,.06);
  --radius:12px; --wrap:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1917; --surface:#24201d; --surface-2:#2c2622; --text:#ece4dc; --muted:#b1a69b;
  --brand:#e7aba4; --brand-soft:#3a2826; --band:#5d4c41; --band-2:#4e3f36; --band-text:#f6eee8;
  --line:#3a332e; --chip:#2f2925; --link:#efb8b1; --ok:#9cc7a7; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#1c1917; --surface:#24201d; --surface-2:#2c2622; --text:#ece4dc; --muted:#b1a69b;
  --brand:#e7aba4; --brand-soft:#3a2826; --band:#5d4c41; --band-2:#4e3f36; --band-text:#f6eee8;
  --line:#3a332e; --chip:#2f2925; --link:#efb8b1; --ok:#9cc7a7; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark;}

/* language toggle: EN default */
:root:not([data-lang="id"]) .id{display:none!important}
:root[data-lang="id"] .en{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font);}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--serif);line-height:1.25;font-weight:600;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,3.2vw,2.3rem)} h2{font-size:clamp(1.3rem,2.4vw,1.65rem)} h3{font-size:1.12rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:99;background:var(--surface);padding:6px 10px;border-radius:8px}
.muted{color:var(--muted)} .small{font-size:.88rem}

/* ---------- header ---------- */
.site-head{background:var(--surface);border-bottom:3px solid var(--band)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.brand{display:block;line-height:0}
.brand img{height:54px;width:auto}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none} :root[data-theme="dark"] .brand .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
.tools{display:flex;flex-direction:column;align-items:center;gap:6px}
.icon-btn{appearance:none;border:0;background:transparent;color:var(--brand);cursor:pointer;padding:4px;border-radius:50%;line-height:0}
.icon-btn:focus-visible,.lang button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lang{display:inline-flex;border:2px solid var(--brand);border-radius:999px;overflow:hidden}
.lang button{appearance:none;border:0;background:transparent;color:var(--brand);font:700 .82rem/1 var(--font);padding:5px 10px;cursor:pointer;letter-spacing:.04em}
.lang button[aria-pressed="true"]{background:var(--brand);color:var(--surface)}
.menu-btn{display:none}

/* ---------- nav ---------- */
.nav{background:var(--surface)}
.nav>ul{list-style:none;margin:0 auto;padding:0 8px;max-width:var(--wrap);display:flex;flex-wrap:wrap;gap:2px}
.nav li{position:relative}
.nav a,.nav .nav-label{display:block;padding:10px 12px;color:var(--brand);font-weight:650;text-decoration:none;font-size:.97rem;white-space:nowrap}
.nav>ul>li>a:hover,.nav>ul>li:focus-within>a{background:var(--brand-soft)}
.nav .caret{font-size:.7em;margin-left:4px;opacity:.8}
.nav .sub{list-style:none;margin:0;padding:6px 0;position:absolute;left:0;top:100%;min-width:220px;background:var(--band);border-radius:0 0 10px 10px;box-shadow:var(--shadow);display:none;z-index:40}
.nav .sub a{color:var(--band-text);font-weight:500;padding:6px 16px;font-size:.93rem}
.nav .sub a:hover{background:var(--band-2)}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}
.nav li:hover>.sub.years,.nav li:focus-within>.sub.years{display:grid}
.nav .sub .sub{left:100%;top:0;border-radius:0 10px 10px 10px;background:var(--band-2);min-width:180px}
.nav .years{display:none;grid-template-columns:repeat(3,1fr);min-width:210px;padding:6px}
.nav .years a{padding:5px 8px;text-align:center}
.nav .sub .has-sub>a::after{content:"›";float:right;margin-left:10px}
.nav .ext::after{content:"↗";font-size:.75em;margin-left:5px;opacity:.75}
.nav .current{text-decoration:underline;text-underline-offset:6px}

@media (max-width:920px){
  .menu-btn{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--brand);border-radius:999px;color:var(--brand);font:700 .85rem var(--font);padding:5px 12px;background:transparent;cursor:pointer}
  .head-row{flex-wrap:wrap}
  .brand img{height:40px}
  .tools{flex-direction:row}
  .nav{display:none;border-top:1px solid var(--line)}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;padding:6px 0}
  .nav .sub,.nav .sub .sub{position:static;display:block;box-shadow:none;border-radius:0;background:transparent;padding:0 0 4px 14px;min-width:0}
  .nav .sub a{color:var(--text);padding:5px 12px}
  .nav .sub a:hover{background:var(--brand-soft)}
  .nav .sub.years{display:none!important}
  .nav .sub .has-sub>a::after{content:""}
}

/* ---------- layout ---------- */
main{padding:28px 0 48px}
.page-head{margin-bottom:22px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.section{margin:34px 0}
.section>h2{display:flex;align-items:baseline;gap:10px}
.section>h2 .more{margin-left:auto;font:500 .9rem var(--font)}
.lead{font-size:1.06rem}

/* hero */
.hero{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}
.hero img.photo{width:220px;height:275px;object-fit:cover;border-radius:16px;border:4px solid var(--surface);box-shadow:var(--shadow)}
.hero .role{color:var(--muted);margin:-.2em 0 .8em}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{display:inline-block;padding:8px 16px;border-radius:999px;border:2px solid var(--brand);color:var(--brand);text-decoration:none;font-weight:650;font-size:.93rem}
.btn.solid{background:var(--brand);color:var(--surface)}
@media (max-width:640px){.hero{grid-template-columns:1fr;text-align:left}.hero img.photo{width:150px;height:188px}}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.metric{background:var(--surface-2);border-radius:var(--radius);padding:14px 16px}
.metric b{display:block;font:600 1.6rem var(--serif);color:var(--brand)}
.metric span{font-size:.86rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chip{display:inline-block;background:var(--chip);color:var(--text);border-radius:999px;padding:4px 12px;font-size:.88rem;text-decoration:none;border:1px solid var(--line)}
a.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}

/* lists */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line)}
.timeline .when{color:var(--brand);font-weight:650;font-size:.92rem}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:2px}}
dl.kv{display:grid;grid-template-columns:200px 1fr;gap:8px 18px;margin:0}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0}
@media (max-width:560px){dl.kv{grid-template-columns:1fr}dl.kv dd{margin-bottom:8px}}
table.tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tbl-wrap{overflow-x:auto}

/* publications */
.pub-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.pub-tools input{flex:1 1 240px;min-width:0;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit}
.year-nav{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0;margin-bottom:6px;border-bottom:1px solid var(--line)}
.year-block{scroll-margin-top:70px}
.year-block>h2{font-size:1.25rem;border-left:4px solid var(--band);padding-left:10px;margin-top:26px}
ol.pubs{list-style:none;margin:0;padding:0;counter-reset:p}
.pub{padding:12px 0 14px;border-bottom:1px solid var(--line)}
.pub .t{font-weight:650;display:block;margin:2px 0}
.pub .a{color:var(--muted);font-size:.93rem}
.pub .a b{color:var(--text);font-weight:650}
.pub .v{font-style:italic}
.pub .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:.75rem;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--chip);color:var(--muted);border:1px solid var(--line);text-decoration:none;letter-spacing:.02em}
a.tag{color:var(--link)} a.tag:hover{border-color:var(--brand)}
.tag.sc{background:#eef3ec;color:#3d6b48;border-color:#d5e3d2} .tag.ws{background:#ebf0f6;color:#3d5a80;border-color:#d4deea}
:root[data-theme="dark"] .tag.sc{background:#24312a;color:#9cc7a7;border-color:#33463a} :root[data-theme="dark"] .tag.ws{background:#232c37;color:#a8c0de;border-color:#33404f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.sc{background:#24312a;color:#9cc7a7;border-color:#33463a}:root:not([data-theme="light"]) .tag.ws{background:#232c37;color:#a8c0de;border-color:#33404f}}
.tag.fc{background:var(--brand-soft);color:var(--brand)}
.book{display:grid;grid-template-columns:90px 1fr;gap:16px}
.book .cover{width:90px;height:120px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font:600 .7rem var(--serif);color:var(--muted);text-align:center;padding:6px;overflow:hidden}
.book .cover img{width:100%;height:100%;object-fit:cover}
.empty{padding:16px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.hidden{display:none!important}

/* news */
.news-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.news-card .thumb{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.news-card .thumb img{width:100%;height:100%;object-fit:cover}
.news-card .body{padding:14px 16px 16px}
.news-card h3{font-size:1.02rem;margin:.2em 0 .4em}
.news-card h3 a{color:var(--text);text-decoration:none}
.news-card h3 a:hover{color:var(--brand)}
.date{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.news-list li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.news-list{list-style:none;margin:0;padding:0}
.article{max-width:760px}
.article img{border-radius:10px;margin:14px 0}
.article .content{overflow-wrap:anywhere}
.article figure{margin:0}
.note{background:var(--surface-2);border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--muted);margin:12px 0}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.gal a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--surface-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal a:hover img{transform:scale(1.04)}
dialog.lb{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh}
dialog.lb::backdrop{background:rgba(20,15,12,.85)}
dialog.lb img{max-width:94vw;max-height:86vh;border-radius:8px;margin:auto}
dialog.lb .x{position:fixed;top:12px;right:16px;font-size:28px;color:#fff;background:none;border:0;cursor:pointer}

/* video */
.yt{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#2a2421;cursor:pointer;border:0;padding:0;width:100%;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt .play{position:absolute;inset:0;margin:auto;width:64px;height:44px;border-radius:12px;background:rgba(155,44,44,.92);display:flex;align-items:center;justify-content:center}
.yt .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* footer */
.site-foot{background:var(--band);color:var(--band-text);padding:26px 0;font-size:.9rem}
.site-foot a{color:var(--band-text)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot h3{font:700 .85rem var(--font);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.to-top{position:fixed;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--brand);color:var(--surface);font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:var(--shadow)}
.to-top.show{opacity:.9;pointer-events:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-head .tools,.nav,.site-foot,.to-top,.pub-tools,.year-nav{display:none!important}body{background:#fff}}

/* citation map */
.map-box{position:relative;background:var(--surface-2);border-radius:var(--radius);padding:8px;overflow:hidden}
.map-box svg{width:100%;height:auto;display:block}
.land path{fill:var(--map-land,#e3dad0);stroke:var(--surface);stroke-width:.5}
.land path.l1{fill:#e9c6bf}.land path.l2{fill:#d99b90}.land path.l3{fill:#c26d62}.land path.l4{fill:#9b2c2c}
:root[data-theme="dark"]{--map-land:#3a332e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--map-land:#3a332e}}
.dot{fill:rgba(155,44,44,.25);stroke:#9b2c2c;stroke-width:1}
.dot.sc{fill:#3f7cc1;stroke:#fff;stroke-width:1.5}.dot.sc1{fill:#e2463b;stroke:#fff;stroke-width:1.2}
.dot-n{font:700 10px var(--font);fill:#fff;text-anchor:middle;pointer-events:none}
.map-tip{position:absolute;background:var(--text);color:var(--bg);font-size:.8rem;padding:4px 8px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:3}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:8px;align-items:center}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.cite-list{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:24px}
.cite-list li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--line);break-inside:avoid;font-size:.92rem}
.cite-list b{color:var(--brand)}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.seg button{appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--text);border-radius:999px;padding:6px 14px;font:600 .88rem var(--font);cursor:pointer}
.seg button.on{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.chart svg{width:100%;height:auto}
.bar{fill:#c98a80}.chart g:hover .bar{fill:#9b2c2c}
.bar-v{font:600 10px var(--font);fill:var(--muted);text-anchor:middle}
.bar-x{font:10px var(--font);fill:var(--muted);text-anchor:middle}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4f9a62;margin-right:6px;box-shadow:0 0 0 3px rgba(79,154,98,.2)}
.grid-l{stroke:var(--line);stroke-width:1}
.ax-y{font:10px var(--font);fill:var(--muted);text-anchor:end}
.ax-t{font:600 10.5px var(--font);fill:var(--muted)}
.bar.ytd{stroke:#c98a80;stroke-width:1}
.bar-ytd-bg{fill:#ecd2cd}.bar-ytd-ln{stroke:#c98a80;stroke-width:3}
.cum-l{fill:none;stroke:#3f6f9b;stroke-width:2;stroke-linejoin:round;opacity:.85}
.cum-d{fill:#3f6f9b}.cum-t{font:700 10.5px var(--font);fill:#3f6f9b}
:root[data-theme="dark"] .cum-l{stroke:#8fb6dc}:root[data-theme="dark"] .cum-d{fill:#8fb6dc}:root[data-theme="dark"] .cum-t{fill:#8fb6dc}
.chart-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:6px 0 12px}
.chart-sum .metric{padding:8px 10px}.chart-sum .metric b{font-size:1.2rem}
.chart-wide{grid-column:1/-1}
.grid.single{grid-template-columns:1fr;max-width:760px}
.grid.single .news-card{flex-direction:row}
.grid.single .news-card .thumb{flex:0 0 240px;aspect-ratio:4/3}
@media (max-width:600px){.grid.single .news-card{flex-direction:column}.grid.single .news-card .thumb{flex:none;aspect-ratio:16/9}}
.nav>ul>li>a.lab{border:1.5px solid var(--brand);border-radius:999px;padding:6px 12px;margin:4px 0 4px 6px}
.nav>ul>li>a.lab:hover{background:var(--brand);color:var(--surface)}
@media (max-width:920px){.nav>ul>li>a.lab{display:inline-block;margin:6px 12px}}
.fc-foot{grid-column:1/-1}
.fc-foot img{max-width:100%;height:auto;border-radius:6px;background:#fbf8f4}
.visit-map img{width:100%;height:auto;border-radius:8px;background:#fff}
.visit-map p{margin:10px 0 0}

/* visitor counter (footer) */
.vc-foot{grid-column:1/-1}
.vc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.vc div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 10px}
.vc dt{font-size:.75rem;opacity:.9;margin:0}
.vc dd{margin:2px 0 0;font:700 1.15rem/1.2 var(--font);font-variant-numeric:tabular-nums}
.vc-note{margin:8px 0 0;font-size:.82rem;opacity:.9;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vc-dot{width:8px;height:8px;border-radius:50%;background:#7fd18b;box-shadow:0 0 0 3px rgba(127,209,139,.25)}
@media (max-width:720px){.vc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:380px){.vc{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* visitor map: full width of the page column (homepage) */
.visit-full .visit-band{background:#0d1b3a;line-height:0;border-radius:10px;overflow:hidden}
.visit-full .visit-band a{display:block}
.visit-full .visit-band img{width:100%;height:auto;display:block}
.visit-full p{margin:10px 0 0}

/* blend the white polar/footer strips of the Flag Counter map into the band */
.visit-full .visit-band img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 2%,#000 12%,#000 80%,rgba(0,0,0,.14) 89%,rgba(0,0,0,.14) 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 2%,#000 12%,#000 80%,rgba(0,0,0,.14) 89%,rgba(0,0,0,.14) 100%)}