/* Hallmark · site: rifkyekosetiawan.com · theme: Dusk (by request) · genre: modern-minimal · shape: Index-First
   job: read the latest note · posture: committed · hero: banner · nav: wordmark left, three links right, hairline
   footer: three ruled rows, no link columns · dusk: none/periwinkle-apricot/well · photo: slot, absent
   modes: light+dark · build v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a slate dusk could belong to any evening product;
   the ledger does the work instead: the day in the date gutter, a ruled tally, the bone identity well. */
/* Dusk: register seorang pegawai kehutanan, dibaca pada jam ketika kantor sudah tutup.
   Tanpa JavaScript, tanpa cookie, tanpa aset eksternal. Kontrak: DESIGN.md */

@font-face{
  font-family:"Wix Madefor Display"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/wix-madefor-display-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"Wix Madefor Text"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/wix-madefor-text-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"Wix Madefor Text"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/wix-madefor-text-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  color-scheme:dark;
  --paper:oklch(17.5% 0.014 268); --paper-2:oklch(21% 0.016 268); --paper-3:oklch(25% 0.017 268);
  --ink:oklch(96% 0.006 75); --ink-2:oklch(84% 0.012 262); --muted:oklch(72% 0.016 262);
  --rule:oklch(31% 0.016 266);
  --accent:oklch(77% 0.10 274); --accent-ink:oklch(19% 0.035 274); --accent-hi:oklch(84% 0.085 274);
  --accent-2:oklch(83% 0.095 62); --focus:oklch(80% 0.10 274);
  --well:oklch(95.5% 0.008 75); --well-2:oklch(92% 0.010 75); --well-ink:oklch(21% 0.016 268);
  --well-muted:oklch(46% 0.016 265); --well-rule:oklch(87.5% 0.009 75); --well-link:oklch(42% 0.12 274);
  --font-display:"Wix Madefor Display",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Wix Madefor Text",ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:68px; --space-9:96px;
  --text-display:clamp(2.5rem,1.75rem + 2.6vw,4rem);
  --text-page:clamp(2rem,1.4rem + 1.7vw,3rem);
  --text-section:clamp(1.75rem,1rem + 1.8vw,2.5rem);
  --text-lead:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --text-body:1.0625rem;
  --text-small:0.875rem;
  --text-meta:0.8125rem;
  --tracking-display:-0.022em;
  --radius:18px; --radius-inner:10px; --radius-pill:999px;
  --measure:34rem; --label:8rem; --block:72rem; --gutter:clamp(20px,4vw,40px);
  --control:46px;
}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --paper:oklch(96.5% 0.008 75); --paper-2:oklch(93.5% 0.010 75); --paper-3:oklch(90% 0.012 75);
    --ink:oklch(22% 0.022 268); --ink-2:oklch(35% 0.020 266); --muted:oklch(45% 0.018 265);
    --rule:oklch(85% 0.010 75);
    --accent:oklch(44% 0.13 274); --accent-ink:oklch(97% 0.006 274); --accent-hi:oklch(38% 0.13 274);
    --accent-2:oklch(52% 0.12 62); --focus:oklch(44% 0.13 274);
    --well:oklch(99% 0.004 75); --well-2:oklch(96% 0.006 75); --well-ink:oklch(21% 0.016 268);
    --well-muted:oklch(46% 0.016 265); --well-rule:oklch(89% 0.008 75); --well-link:oklch(42% 0.12 274);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scrollbar-color:var(--paper-3) var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:clip;
  font-family:var(--font-body); font-size:var(--text-body); line-height:1.62; font-weight:400;
  font-kerning:normal; text-rendering:optimizeLegibility;
  caret-color:var(--accent); accent-color:var(--accent);
}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}

h1,h2,h3{
  font-family:var(--font-display); font-weight:500; font-synthesis:none;
  overflow-wrap:break-word; min-width:0; margin:0;
}
h1{font-size:var(--text-display); line-height:1.05; letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-section); line-height:1.1; letter-spacing:var(--tracking-display)}
h3{font-size:1.25rem; line-height:1.3; letter-spacing:-.012em}

/* 1. bingkai + bagian */
.block{max-width:var(--block); margin-inline:auto; padding-inline:var(--gutter)}
.main{padding:0}
.section{padding-block:var(--space-8)}
.section__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--space-2) var(--space-5); margin-bottom:var(--space-5);
}
.section__note{margin:0; font-size:var(--text-meta); color:var(--muted); font-variant-numeric:tabular-nums}
.section__lede{max-width:38rem; margin:0 0 var(--space-6); font-size:var(--text-lead); line-height:1.6; color:var(--ink-2)}
.register{padding-top:var(--space-9)}
.is-open{color:var(--accent-2)}
.links{display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-5)}

/* 2. masthead + nav */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .block{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--space-2) var(--space-6); padding-block:var(--space-4);
}
.wordmark{
  font-family:var(--font-display); font-size:0.9375rem; line-height:1.3; font-weight:500;
  letter-spacing:-.012em; color:var(--ink); text-decoration:none;
}
.nav{display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-5)}
.nav a{
  font-family:var(--font-body); font-size:var(--text-small); line-height:1.4; font-weight:400;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  padding-block:var(--space-1); border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink); border-bottom-color:var(--accent)}

/* 3. hero band: nama, satu kalimat, satu tindakan, lembar identitas */
.hero{background:var(--paper-2); border-bottom:1px solid var(--rule)}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6);
  align-items:center; padding-block:var(--space-8);
}
.hero h1{margin:0}
.hero__lede{margin:var(--space-4) 0 0; max-width:26rem; font-size:var(--text-lead); line-height:1.5; color:var(--ink-2)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--control);
  margin-top:var(--space-6); padding-inline:var(--space-5); border:0; border-radius:var(--radius-pill);
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-body); font-size:0.9375rem; line-height:1; font-weight:500;
  text-decoration:none; white-space:nowrap;
}
.btn:hover,.btn:active{background:var(--accent-hi)}
.hero__well{max-width:30rem}

/* 4. bone well + lembar label/nilai */
.well{background:var(--well); color:var(--well-ink); border-radius:var(--radius); padding:var(--space-6)}
.well--note{max-width:44rem; padding-block:var(--space-8); padding-inline:var(--space-7)}
.well h2,.well h3{color:var(--well-ink)}
.well p{margin:0; max-width:38rem}
.well a{color:var(--well-link); text-decoration-color:var(--well-rule)}
.well a:hover{text-decoration-color:var(--well-link); text-decoration-thickness:2px}
.well :focus-visible{outline-color:var(--well-link)}
.well dt{color:var(--well-muted)}
.well dd{color:var(--well-ink)}
.well .sheet__row{border-color:var(--well-rule)}

.sheet{margin:0; padding:0}
.sheet__row{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1);
  padding-block:var(--space-3); border-top:1px solid var(--rule);
}
.sheet__row:first-child{border-top:0}
.sheet dt{font-size:var(--text-meta); line-height:1.4; font-weight:400; color:var(--muted)}
.sheet dd{margin:0; font-size:0.9375rem; line-height:1.55; color:var(--ink)}
@media (min-width:48rem){
  .sheet--index .sheet__row,.sheet--empty .sheet__row,.sheet--exit .sheet__row{
    grid-template-columns:var(--label) minmax(0,1fr); gap:var(--space-5); align-items:baseline;
  }
  .sheet--index dd,.sheet--empty dd,.sheet--exit dd{max-width:44rem}
}
.sheet--empty,.sheet--exit{margin-top:var(--space-6); max-width:44rem}

/* 5. register: baris entri dengan tanggal di talang */
.entries{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.entry{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2);
  padding-block:var(--space-5); border-bottom:1px solid var(--rule);
}
.entry__meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); margin:0; color:var(--muted)}
.entry__date{display:flex; align-items:baseline; gap:var(--space-2); font-size:var(--text-meta); font-variant-numeric:tabular-nums}
.entry__day{font-family:var(--font-display); font-weight:500; font-size:1rem; line-height:1.2; letter-spacing:-.014em; color:var(--ink)}
.entry__mon,.entry__rub{font-size:var(--text-meta); line-height:1.4; color:var(--muted)}
.entry__title{
  font-family:var(--font-display); font-weight:500; font-size:1.25rem; line-height:1.3;
  letter-spacing:-.014em; color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--rule); text-decoration-thickness:1px; text-underline-offset:.16em;
  overflow-wrap:break-word;
}
.entry__title:hover,.entry__title:focus-visible{text-decoration-color:var(--accent)}
@media (min-width:56rem){
  .entry{grid-template-columns:var(--label) minmax(0,1fr); gap:var(--space-6); align-items:start}
  .entry__meta{flex-direction:column; gap:var(--space-1)}
  .entry__date{flex-direction:column; gap:0}
  .entry__day{font-size:1.5rem; line-height:1.15}
}

/* 6. tally: hitungan register sebagai strip bergaris */
.tally{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:var(--space-7) 0 0; padding:0; border-top:1px solid var(--rule);
}
.tally__cell{padding:var(--space-4) var(--space-4) var(--space-4) 0; border-bottom:1px solid var(--rule)}
.tally dt{font-size:var(--text-meta); line-height:1.4; color:var(--muted)}
.tally dd{
  margin:var(--space-1) 0 0; font-family:var(--font-display); font-weight:500;
  font-size:1.5rem; line-height:1.15; letter-spacing:-.014em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
@media (min-width:40rem){
  .tally{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tally__cell + .tally__cell{border-left:1px solid var(--rule); padding-left:var(--space-5)}
}

/* 7. register line: tiga sel label/nilai */
.regline{display:grid; margin:0; padding:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.regline__cell{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1);
  padding-block:var(--space-3);
}
.regline__cell + .regline__cell{border-top:1px solid var(--rule)}
.regline dt{font-size:var(--text-meta); line-height:1.4; font-weight:400; color:var(--muted)}
.regline dd{margin:0; font-size:0.9375rem; line-height:1.5; color:var(--ink); font-variant-numeric:tabular-nums}
.regline dd.is-done{color:var(--accent)}
.regline dd.is-open{color:var(--accent-2)}
@media (min-width:48rem){
  .regline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .regline__cell{padding:var(--space-4) var(--space-5) var(--space-4) 0}
  .regline__cell + .regline__cell{border-top:0; border-left:1px solid var(--rule); padding-left:var(--space-5)}
}

/* 8. halaman baca */
.page{padding-block:var(--space-7) var(--space-8)}
.page h1{margin:0 0 var(--space-5); font-size:var(--text-page)}
.page .regline{margin-bottom:var(--space-6)}
.page .entries,.page .sheet--empty,.page .apparatus{margin-top:var(--space-6)}
.prose{max-width:var(--measure)}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 var(--space-4)}
.prose h2{margin:var(--space-7) 0 var(--space-3)}
.prose h3{margin:var(--space-6) 0 var(--space-2)}
.prose ul,.prose ol{margin:0 0 var(--space-4); padding-left:var(--space-5)}
.prose li{margin:var(--space-1) 0}
.prose blockquote{
  margin:var(--space-5) 0; padding:var(--space-1) 0 var(--space-1) var(--space-4);
  border-left:2px solid var(--accent); color:var(--ink-2);
}
.prose strong{font-weight:500}
.prose code{
  font-family:var(--font-mono); font-size:.875em; line-height:1.4;
  background:var(--paper-2); padding:.1em .3em; border-radius:4px;
}
.prose pre{
  font-family:var(--font-mono); font-size:var(--text-small); line-height:1.55;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius-inner);
  padding:var(--space-4); margin:0 0 var(--space-4); overflow-x:auto;
}
.prose pre code{background:none; padding:0; font-size:inherit}
.prose hr{border:0; border-top:1px solid var(--rule); margin:var(--space-6) 0}
.prose table{width:100%; border-collapse:collapse; margin:0 0 var(--space-4); font-size:var(--text-small); line-height:1.5}
.prose th{
  font-size:var(--text-meta); font-weight:500; color:var(--muted); text-align:left;
  padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--rule);
}
.prose td{padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--rule); vertical-align:top; overflow-wrap:break-word}
.prose td code{white-space:nowrap}

/* 9. aparatus sumber bernomor + rujukan */
.apparatus{margin-top:var(--space-7); max-width:var(--measure)}
.apparatus__title{font-size:1.25rem; line-height:1.3; letter-spacing:-.012em; margin:0 0 var(--space-2)}
.sources{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.sources li{
  display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:var(--space-2);
  padding-block:var(--space-3); border-bottom:1px solid var(--rule);
}
.sources__n,.sources__body{margin:0; font-size:var(--text-meta); line-height:1.55; color:var(--muted)}
.sources__n{font-variant-numeric:tabular-nums; color:var(--accent)}
.ref{
  font-size:.6875em; line-height:1; font-weight:500; color:var(--accent);
  text-decoration:underline; text-underline-offset:.15em; vertical-align:.35em;
}

/* 10. kaki halaman */
.footer{border-top:1px solid var(--rule); margin-top:var(--space-8); padding-block:var(--space-7) var(--space-8)}
.footer .sheet{margin:0 0 var(--space-5)}
.footer .sheet__row{padding-block:var(--space-2)}
.footer .sheet dd{display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-5); font-size:var(--text-small)}
.footer .sheet dd a{color:var(--ink-2); text-decoration:none; padding-block:var(--space-1)}
.footer .sheet dd a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:.18em}
.footer .meta{margin:0; font-size:var(--text-meta); line-height:1.5; color:var(--muted)}

/* 11. permukaan peramban, skip link, tautan lanjutan */
.skip{
  position:absolute; top:-4rem; left:var(--gutter); z-index:2;
  background:var(--paper); color:var(--accent); border:2px solid var(--accent);
  border-radius:var(--radius-inner); padding:var(--space-2) var(--space-3);
  font-size:var(--text-small); font-weight:500; text-decoration:none;
}
.skip:focus{top:var(--space-2)}
.more{margin:var(--space-6) 0 0; font-size:var(--text-small)}
.note-band{padding-block:var(--space-8) 0}
.note-band h2{margin:0 0 var(--space-4)}
@media (min-width:60rem){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:var(--space-8); padding-block:var(--space-9)}
  .hero__lede{font-size:1.1875rem}
  .note-band__grid{display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:var(--space-8); align-items:start}
  .note-band h2{margin:var(--space-1) 0 0}
}

@media (prefers-reduced-motion:no-preference){
  a,.btn,.entry__title,.nav a,.footer .sheet dd a{
    transition:color 140ms ease-out,background-color 140ms ease-out,text-decoration-color 140ms ease-out;
  }
}

@media print{
  :root{
    color-scheme:light;
    --paper:oklch(99% 0.002 80); --paper-2:oklch(98% 0.003 80); --ink:oklch(18% 0.006 268);
    --ink-2:oklch(32% 0.006 266); --muted:oklch(42% 0.006 265); --rule:oklch(82% 0.004 75);
    --accent:oklch(38% 0.10 274); --accent-2:oklch(45% 0.09 62);
    --well:oklch(99.5% 0.002 80); --well-ink:oklch(18% 0.006 268); --well-muted:oklch(40% 0.006 265);
    --well-rule:oklch(85% 0.004 75); --well-link:oklch(38% 0.10 274);
  }
  .nav,.skip,.btn{display:none}
  .hero{background:none; border-bottom:1px solid var(--rule)}
  .well{border:1px solid var(--rule); border-radius:0}
  .page,.hero__grid{padding-block:0}
  a{text-decoration:underline}
}