/* DDNI — "The Register". Lihat ddni-com-my/DESIGN.md sebelum mengubah apa-apa. */

@font-face{font-family:"Instrument Serif";src:url("/static/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/static/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/static/fonts/LibreFranklin-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --background:#FBFAF7; --card:#FFFFFF; --foreground:#1A1917;
  --muted-foreground:#57544E; --border:#C6C1B5; --rule:#BDB7A9;
  --accent:#6A5B33; --accent-soft:#7A6A3F;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --radius:0; --measure:68ch; --shell:1080px;
}
@media (prefers-color-scheme:dark){
  :root{--background:#131210; --card:#1B1A17; --foreground:#ECE9E1;
    --muted-foreground:#A39E93; --border:#37342D; --rule:#403C34;
    --accent:#C7A95F; --accent-soft:#C7A95F}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:768px){body{font-size:18px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 22px}
.measure{max-width:var(--measure)}

/* ---------- rel utiliti: identiti sah dahulu ---------- */
.util{border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.util-in{max-width:var(--shell);margin:0 auto;padding:9px 22px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.util a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border)}
.util a:hover{color:var(--foreground);border-bottom-color:var(--foreground)}

/* ---------- nav ---------- */
.nav{max-width:var(--shell);margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;justify-content:center;gap:14px 30px;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-size:1.45rem;letter-spacing:.01em;
  color:var(--foreground);text-decoration:none;line-height:1}
.nav a:not(.wordmark){font-weight:600;font-size:.78rem;color:var(--muted-foreground);
  text-decoration:none;text-transform:uppercase;letter-spacing:.12em;padding-bottom:2px}
.nav a:not(.wordmark):hover{color:var(--foreground)}
.nav a[aria-current="page"]{color:var(--foreground);border-bottom:1px solid var(--accent)}

/* ---------- garis berkembar: satu-satunya hiasan ---------- */
.dbl{max-width:var(--shell);margin:0 auto;height:3px;
  border-top:1px solid var(--foreground);border-bottom:1px solid var(--foreground)}
.dbl-in{margin:26px 22px 18px}

/* ---------- kenyataan ---------- */
.stmt{padding:18px 0 4px}
.stmt h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.12;letter-spacing:-.005em;
  margin:0;max-width:24ch}
.stmt h1 em{font-style:italic;color:var(--accent-soft)}
.stmt .lede{color:var(--muted-foreground);margin:14px 0 0;max-width:var(--measure)}
.stmt .src{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-foreground);margin:10px 0 0}

/* ---------- jadual daftar: hero ---------- */
.reg{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border);font-family:var(--mono);font-size:.78rem;
  font-variant-numeric:tabular-nums}
.reg caption{text-align:left;padding:0 0 9px;font-family:var(--mono);font-size:.68rem;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-foreground)}
.reg th{text-align:left;font-weight:500;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-foreground);padding:10px 14px;
  border-bottom:1px solid var(--foreground);white-space:nowrap}
.reg td{padding:11px 14px;border-bottom:1px solid var(--rule);color:var(--muted-foreground);
  vertical-align:top}
.reg tr:last-child td{border-bottom:none}
.reg td.mark{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--foreground)}
.scroller{overflow-x:auto;margin:18px 0 0}

/* ---------- seksyen ---------- */
.sec{padding:34px 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sec h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2;margin:0}
.label{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-foreground);margin:0}

/* rekod: projek, yard, perkhidmatan */
.records{border-top:1px solid var(--foreground)}
.rec{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:18px 0;border-bottom:1px solid var(--rule)}
@media(min-width:820px){.rec{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:28px}}
.rec h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;margin:0;line-height:1.35}
.rec p{margin:0;color:var(--muted-foreground);font-size:.98rem}
.rec .data{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-foreground);margin:6px 0 0}

/* butiran kunci-nilai */
.kv{border-top:1px solid var(--foreground);font-family:var(--mono);font-size:.78rem}
.kv div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;
  border-bottom:1px solid var(--rule);color:var(--muted-foreground)}
.kv dt{margin:0;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem}
.kv dd{margin:0;color:var(--foreground);text-align:right}

/* foto arkib: duotone dakwat + tembaga */
.plate{margin:0;border:1px solid var(--border);background:var(--card)}
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.06) sepia(.28) saturate(1.25) hue-rotate(-8deg)}
.plate figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-foreground);padding:9px 12px;
  border-top:1px solid var(--border)}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}

/* butang */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:12px 20px;border:1px solid var(--foreground);background:transparent;
  color:var(--foreground);text-decoration:none;border-radius:var(--radius);
  transition:background 150ms ease-out,color 150ms ease-out}
.btn:hover{background:var(--foreground);color:var(--background)}
.btn--primary{background:var(--foreground);color:var(--background)}
.btn--primary:hover{background:transparent;color:var(--foreground)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}

/* ---------- footer ---------- */
footer{margin-top:46px;border-top:1px solid var(--foreground);background:var(--card)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:30px 22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
footer h2{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-foreground);margin:0 0 8px}
.foot-line{margin:0 0 10px;font-size:.94rem;color:var(--muted-foreground);line-height:1.5}
.foot-line a{color:var(--foreground);text-decoration:none;border-bottom:1px solid var(--border)}
.foot-line a:hover{border-bottom-color:var(--foreground)}
.foot-meta{max-width:var(--shell);margin:0 auto;padding:14px 22px 30px;
  border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-foreground)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.reg td.mark small{display:block;font-family:var(--mono);font-weight:400;
  font-size:.72rem;color:var(--muted-foreground);margin-top:2px}