/* ============================================================================
   Meta Monki / Bodhi shared design system  —  "dark editorial"
   Extracted from the Indonesia + Timor-Leste story page (2026-07-25).

   Import this FIRST, then a page-specific stylesheet for layout.
   Every project that imports this stays in one visual family.

   The four rules that make this look considered rather than templated.
   Break them and the look collapses, regardless of the tokens:
     1. ONE accent. --accent and nothing else. No secondary accent, no
        per-tile gradient variants.
     2. Near-square corners (--r-sm/--r-md) plus a solid accent bar on one
        edge. Large radii plus translucent gradients read as consumer app.
     3. No emoji in headings. Emoji are fine inline in body copy and as
        transport-mode markers; in an <h1>/<h2>/<h3> they are the single
        strongest "personal blog" signal.
     4. Hierarchy over density. One idea per screen. If everything is the
        same size, nothing is important.
   ========================================================================== */

:root{
  color-scheme:dark;

  /* ---- surfaces ---- */
  --bg:#0d0b0c;
  --panel:#151113;
  --panel-2:#171214;
  --line:#2a2224;

  /* ---- ink ---- */
  --ink:#f2ece8;
  --ink-soft:#dad2cd;
  --ink-dim:#c9beb8;
  --mut:#9a8f8a;
  --mut-deep:#6d635f;

  /* ---- the single accent ---- */
  --accent:#e63b2e;
  --accent-lift:#ff6b5e;      /* only for text on photography, where
                                 --accent lacks contrast against midtones */

  /* ---- transport / category hues ----
     NOT accents. Only ever used as small semantic markers (map strokes,
     mode pills, legend keys), never as surfaces or headline colour. */
  --c-air:#ff5a4d;
  --c-sea:#3fa7d6;
  --c-rail:#2ec48a;
  --c-road:#ffb347;
  --c-neutral:#8a8f9a;

  /* ---- geometry ---- */
  --r-sm:4px;
  --r-md:7px;
  --r-pill:3px;
  --bar:4px;                  /* the accent bar on cards and section edges */

  /* ---- type ---- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Courier New',monospace;

  --fs-kicker:12.5px;
  --fs-meta:11px;
  --fs-body:13.8px;
  --fs-h3:clamp(19px,1.7vw,23px);
  --fs-h2:clamp(21px,2vw,27px);
  --fs-h1:clamp(40px,7.6vw,96px);

  --lh-body:1.66;
  --lh-tight:.94;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s;
  --t-mid:.4s;
  --t-slow:.9s;

  --shadow-card:0 18px 54px rgba(0,0,0,.6);
  --shadow-lift:0 26px 84px rgba(0,0,0,.72);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.mono{font-family:var(--font-mono)}

/* ---------- type primitives ---------- */
.kicker{color:var(--accent);font-weight:800;letter-spacing:2.6px;
  font-size:var(--fs-kicker);text-transform:uppercase}
.kicker--on-photo{color:var(--accent-lift);
  text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.8)}

h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-tight);text-transform:uppercase;
  letter-spacing:-1.6px;margin:0}
h2,.h2{font-size:var(--fs-h2);line-height:1.08;text-transform:uppercase;
  letter-spacing:-.5px;margin:0}
h3,.h3{font-size:var(--fs-h3);line-height:1.15;text-transform:uppercase;
  letter-spacing:-.3px;margin:0}
p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft)}
.meta{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--mut);letter-spacing:.4px}

/* ---------- card ---------- */
.card{background:var(--panel);border:1px solid var(--line);
  border-top:var(--bar) solid var(--accent);border-radius:var(--r-md);
  padding:20px 22px 22px;box-shadow:var(--shadow-card)}

/* ---------- callout (the "fun fact" pattern) ---------- */
.callout{border:1px solid var(--line);border-left:var(--bar) solid var(--accent);
  border-radius:var(--r-sm);padding:11px 14px;font-size:12.2px;line-height:1.58;
  color:var(--ink-dim);background:var(--panel-2)}
.callout b{color:var(--accent);font-size:9.5px;letter-spacing:1.6px;display:block;margin-bottom:4px}

/* ---------- buttons ---------- */
.btn{border:2px solid var(--accent);background:var(--accent);color:#fff;font-weight:800;
  font-size:13.5px;letter-spacing:1px;text-transform:uppercase;padding:13px 24px;
  border-radius:var(--r-sm);cursor:pointer;
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast)}
.btn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:rgba(13,11,12,.42);color:var(--accent);backdrop-filter:blur(6px)}

/* ---------- tags / pills ---------- */
.tag{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4.5px 9px;
  text-transform:uppercase;display:inline-block}
.pill{font-size:10px;padding:3.5px 10px;border-radius:var(--r-pill);color:var(--bg);
  font-weight:800;text-transform:uppercase;letter-spacing:.6px;display:inline-flex;gap:5px}

/* ---------- stat row ---------- */
.stats{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;font-family:var(--font-mono)}
.stat b{display:block;font-size:clamp(22px,2.6vw,32px);color:var(--ink);line-height:1.1}
.stat span{font-size:10.5px;color:#b6aaa4;text-transform:uppercase;letter-spacing:1.6px}

/* ---------- full-bleed photo lead ----------
   The single biggest lever on perceived quality. Give it real height and a
   layered scrim so text sits on the dark end of the gradient, never mid-tone. */
.lead{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:40px 6vw calc(58px + env(safe-area-inset-bottom));
  border-bottom:var(--bar) solid var(--accent);overflow:hidden;isolation:isolate}
.lead__img{position:absolute;inset:-2%;background:#1a1416 center/cover no-repeat;z-index:-2;
  animation:kenburns 34s var(--ease) infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}
                    to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
.lead__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,
  rgba(13,11,12,.72) 0%,rgba(13,11,12,.28) 34%,rgba(13,11,12,.80) 76%,rgba(13,11,12,.96) 100%)}

/* ---------- film grain ----------
   Keep opacity <= .06. Above that it reads as noise, not texture. */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Any element carrying .grain needs isolation:isolate on its positioned parent,
   or mix-blend-mode leaks into the page behind it. */

/* ---------- progressive photo ----------
   Dominant-colour fill, not a base64 LQIP. A 16px JPEG still costs ~600 bytes
   of header per image (~40KB across 60 photos) for no perceptible gain. */
.ph{position:relative;overflow:hidden;border-radius:var(--r-sm);background:#1a1416}
.ph img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s var(--ease);cursor:zoom-in}
.ph img.is-loaded{opacity:1}
.ph:hover img{filter:brightness(1.08)}

/* ---------- section rhythm ---------- */
.section{padding:96px 6vw 84px;border-top:var(--bar) solid var(--accent);position:relative;
  overflow:hidden}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lead__img{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}