/* Generated from prototype/index.html by scripts/sync-theme-css.mjs. */
/* =====================================================
       Wartawan Kota — Client Feedback v3 (brand)
       Varian dari v3-underline: tambahkan gradient ala
       desainer di masthead & footer, dan underline nav
       berwarna sesuai kategori item (Surabaya, Nasional,
       Daya Warga, Rasa Lokal, Ngeluyur).

       Gradient: linear horizontal, hijau Ijo Bajul di kiri,
       fade ke paper (masthead) atau ink (footer). Native CSS
       gradient, no hotlink.
       ===================================================== */

    :root {
      /* Surabaya palette (locked to brief) */
      --bajul:        #123f2a;
      --bungkul:      #42cf6d;
      --majapahit:    #f35a06;
      --kembang:      #f6ca43;
      --jembatan:     #b91f31;
      --kenjeran:     #1f89cf;
      --tugu:         #f7f7f5;

      --paper:        #fbfaf5;
      --surface:      #efeee7;
      --line:         #c9c8bf;
      --ink:          #121311;
      --muted:        #65665f;
      --max:          1320px;

      --sans:     "DM Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
      --display:  "Clash Display", "DM Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
      --mono:     var(--sans);

      --sticky-h: 64px; /* tinggi header sticky */
    }

    body.dark {
      --paper:    #151613;
      --surface:  #1f201c;
      --line:     #3a3b35;
      --ink:      #f1efe6;
      --muted:    #aaa9a0;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-h) + 16px); }
    body {
      overflow-x: hidden;
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; color: inherit; }
    button { cursor: pointer; }

    .shell { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
    .rail  { width: min(calc(100% - 32px), calc(var(--max) - 0px)); margin-inline: auto; }

    /* ── Top utility (slim, dark) ── */
    .topbar {
      background: var(--bajul);
      color: var(--ink);
      font: 700 11px/1 var(--sans);
      letter-spacing: .04em;
      text-transform: capitalize;
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      min-height: 24px;
    }
    .topbar-tag {
      min-height: inherit;
      padding: 10px;
      color: var(--paper);
    }
    .topbar-meta {
      padding: 10px;
      color: rgba(255,255,255,.7);
    }
    .topbar-meta + .topbar-meta::before { content: "·"; margin-right: 22px; opacity: .5; }
    .topbar-cta {
      margin-left: auto;
      color: var(--majapahit);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      padding-bottom: 2px;
    }

    /* ── Masthead / sticky shell ──
       Outer .masthead-strip is the always-pinned bar.
       It contains the big logo at top and the nav.
       JS toggles a .is-pinned class on the strip
       to shrink the logo when the user scrolls past the masthead. */
    .masthead-strip {
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 2px 6px rgba(18, 19, 17, .04);
      transition: padding .25s ease, box-shadow .25s ease;
    }
    .masthead {
      border-bottom: 0;
      color: var(--bajul);
      background:
        radial-gradient(ellipse 34% 90% at 88% 122%, rgba(243, 90, 6, .11) 0%, rgba(243, 90, 6, .045) 48%, transparent 76%),
        linear-gradient(125deg,
          #f3f9f1 0%,
          #c9efd1 18%,
          #a9e5b7 34%,
          #d9f2dd 52%,
          #f8faf4 69%,
          #fff8f2 100%);
    }
    .masthead-inner {
      /* v3: 92px (match direction-1.html original) */
      min-height: 92px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      padding: 10px 0;
      transition: min-height .25s ease, padding .25s ease;
    }
    .masthead-tag {
      font: 500 14px/1.4 var(--mono);
      color: var(--bajul);
      letter-spacing: .04em;
    }
    .masthead-tag strong { color: inherit; font-weight: 600; }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--ink);
      font-weight: 900;
      letter-spacing: -.045em;
      line-height: 1;
      /* Gradient masthead: pada area kiri (hijau) logo perlu
         versi light. CSS: kalau ada gradient dengan dark
         section di kiri, logo otomatis switch ke on-dark. */
    }
    .logo img {
      display: block;
      width: clamp(224px, 22vw, 288px);
      height: auto;
      transition: width .25s ease;
    }
    .masthead .logo .logo-on-dark { display: none; }
    body.dark .masthead .logo .logo-default { display: none; }
    body.dark .masthead .logo .logo-on-dark { display: block; }

    /* sticky/pinned state: smaller logo, slimmer header */
    .masthead-strip.is-pinned .masthead-inner {
      grid-template-columns: 1fr auto;
      min-height: 56px;
      padding: 8px 0;
    }
    .masthead-strip.is-pinned .logo img {
      width: clamp(148px, 13vw, 176px);
    }
    .masthead-strip.is-pinned .logo {
      justify-self: start;
    }
    .masthead-strip.is-pinned .masthead-tag,
    .masthead-strip.is-pinned .utility .plain-btn {
      display: none;
    }

    .utility {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
    }
    .icon-btn,
    .plain-btn,
    .primary-btn {
      min-height: 38px;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0 14px;
      font: 500 14px/1 var(--mono);
      letter-spacing: .04em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .icon-btn { width: 38px; padding: 0; }
    .icon-btn svg { width: 14px; height: 14px; }
    .primary-btn {
      background: var(--bungkul);
      border-color: var(--bungkul);
      color: #141210;
      text-decoration: none;
    }
    .primary-btn:hover { background: var(--majapahit); border-color: var(--majapahit); }
    .plain-btn:hover { background: var(--surface); }
    .icon-btn:hover { background: var(--surface); }

    /* ── Primary nav ala Peta Kota ──
       v3: tanpa border-right antar item, item di-center,
       border tipis di bawah (1px sudah di .masthead-strip).
       Active state: underline 2px dengan warna sesuai
       brand color kategori (lihat .cat-* di bawah). */
    .primary-nav {
      border-top: 0;
      background: var(--paper);
    }
    .primary-nav-inner {
      display: flex;
      gap: 0;
      align-items: stretch;
      justify-content: center;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .primary-nav-inner::-webkit-scrollbar { display: none; }
    .primary-nav a {
      flex: 0 0 auto;
      padding: 18px 22px;
      background: transparent;
      text-decoration: none;
      color: var(--bajul);
      font: 800 11px/1 var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      border-right: 0;
      border-bottom: 2px solid transparent;
      transition: border-color .15s ease;
    }
    /* Active state default: ink underline (Beranda, hidden items) */
    .primary-nav a.current,
    .primary-nav a[aria-current="page"] {
      border-bottom-color: var(--bajul);
    }
    .primary-nav a:hover {
      background: transparent;
      border-bottom-color: var(--ink);
    }

    /* Per-category brand color untuk underline saat hover/active.
       Cocokkan dengan data-cat yang dipakai di seluruh situs. */
    .primary-nav a[data-cat="surabaya"]:hover,
    .primary-nav a[data-cat="surabaya"].current,
    .primary-nav a[data-cat="surabaya"][aria-current="page"] {
      border-bottom-color: var(--bungkul);
    }
    .primary-nav a[data-cat="nasional"]:hover,
    .primary-nav a[data-cat="nasional"].current,
    .primary-nav a[data-cat="nasional"][aria-current="page"] {
      border-bottom-color: var(--jembatan);
    }
    .primary-nav a[data-cat="daya-warga"]:hover,
    .primary-nav a[data-cat="daya-warga"].current,
    .primary-nav a[data-cat="daya-warga"][aria-current="page"] {
      border-bottom-color: var(--majapahit);
    }
    .primary-nav a[data-cat="rasa-lokal"]:hover,
    .primary-nav a[data-cat="rasa-lokal"].current,
    .primary-nav a[data-cat="rasa-lokal"][aria-current="page"] {
      border-bottom-color: var(--kembang);
    }
    .primary-nav a[data-cat="ngeluyur"]:hover,
    .primary-nav a[data-cat="ngeluyur"].current,
    .primary-nav a[data-cat="ngeluyur"][aria-current="page"] {
      border-bottom-color: var(--kenjeran);
    }
    .primary-nav .nav-divider { display: none; }
    .primary-nav .date { display: none; }

    /* ── Section common ── */
    .section {
      padding: 40px 0;
      border-bottom: 1px solid var(--line);
    }
    .section-kicker {
      margin: 0 0 8px;
      color: var(--muted);
      font: 800 11px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }
    .section-head h2 {
      margin: 0;
      font: 600 clamp(28px, 3.4vw, 46px)/.95 var(--sans);
      letter-spacing: .02em;
      color: var(--bajul);
    }
    .see-all {
      font: 800 11px/1 var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      padding-bottom: 3px;
      white-space: nowrap;
    }
    .see-all:hover { color: var(--majapahit); }

    .story .image {
      display: block;
      aspect-ratio: 4/3;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .story .image img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .35s ease;
    }
    .story a { text-decoration: none; color: inherit; }
    .story a:hover img { transform: scale(1.03); }
    .tag {
      display: inline-block;
      margin-bottom: 8px;
      color: var(--bajul);
      font: 800 10px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    body.dark .tag:not([data-cat]) { color: var(--bungkul); }
    [data-cat] {
      display: inline-block;
      padding: 3px 6px;
      background: var(--cat-bg);
      color: var(--cat-fg, #141210);
      font-family: var(--display);
    }
    [data-cat="surabaya"]   { --cat-bg: var(--bungkul); }
    [data-cat="daya-warga"] { --cat-bg: var(--majapahit); }
    [data-cat="rasa-lokal"] { --cat-bg: var(--kembang); }
    [data-cat="nasional"]   { --cat-bg: var(--jembatan); --cat-fg: #fff; }
    [data-cat="ngeluyur"]   { --cat-bg: var(--kenjeran); }
    [hidden] { display: none !important; }
    .primary-nav a[data-cat] {
      display: inline-flex;
      background: transparent;
      color: var(--bajul);
    }
    .story h3 {
      margin: 0 0 8px;
      font: 500 21px/1.08 var(--sans);
      letter-spacing: normal;
    }
    .meta {
      margin: 0;
      color: var(--muted);
      font: 700 11px/1.4 var(--mono);
      letter-spacing: .02em;
    }
    .summary {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    /* ── Hero (headline + Kabar Terbaru) ── */
    .hero {
      padding: 36px 0 40px;
      border-bottom: 1px solid var(--line);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
      gap: 36px;
    }
    .hero-lead .image {
      aspect-ratio: 16/10;
      overflow: hidden;
      margin-bottom: 18px;
      max-height: 520px;
    }
    .hero-lead .image img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 50% 40%;
    }
    .hero-lead .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--jembatan);
      font: 800 11px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .hero-lead h1 {
      margin: 0 0 14px;
      font: 500 clamp(34px, 5vw, 64px)/.94 var(--sans);
      letter-spacing: -.02em;
    }
    .hero-lead .deck {
      margin: 0 0 18px;
      font: 400 17px/1.55 var(--sans);
      color: var(--muted);
      max-width: 64ch;
    }
    .byline {
      color: var(--muted);
      font: 700 12px/1 var(--mono);
      letter-spacing: .04em;
    }
    .byline strong { color: var(--ink); font-weight: 800; }

    /* Kabar Terbaru (sidebar) — dengan thumbnail */
    .hero-side {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 4px solid var(--ink);
    }
    .side-head {
      padding: 14px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }
    .side-head h2 {
      margin: 0;
      font: 900 18px/1 var(--sans);
      letter-spacing: -.03em;
    }
    .side-head h2 a {
      color: inherit;
      text-decoration: none;
    }
    .side-head h2 a:hover { color: var(--majapahit); }
    .side-head .count {
      font: 800 10px/1 var(--mono);
      letter-spacing: .12em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .side-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
      align-items: start;
    }
    .side-row:last-child { border-bottom: 0; }
    .side-row .thumb {
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--surface);
    }
    .side-row .thumb img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .side-row .row-body { min-width: 0; }
    .side-row .row-kicker {
      display: flex; align-items: baseline; gap: 8px;
      color: var(--muted);
      font: 800 10px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .side-row .row-kicker .time { color: var(--majapahit); }
    .side-row h3 {
      margin: 0;
      font: 800 15px/1.2 var(--sans);
      letter-spacing: -.025em;
      overflow-wrap: break-word;
    }
    .side-row:hover h3 { color: var(--majapahit); }
    .side-row .thumb-fallback {
      display: none;
      width: 100%; height: 100%;
      background:
        linear-gradient(135deg, var(--bungkul) 0 50%, transparent 50%) 0 0/12px 12px,
        var(--surface);
    }
    .side-row .thumb img.is-broken,
    .side-row .thumb img[src=""] { display: none; }
    .side-row .thumb img.is-broken + .thumb-fallback,
    .side-row .thumb img[src=""] + .thumb-fallback { display: block; }

    /* ── Donation band (langsung di bawah hero) ── */
    .donation {
      background: var(--bajul);
      color: #fff;
      padding: 48px 0;
    }
    .donation-inner {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 36px;
      align-items: end;
    }
    .donation .kicker {
      color: var(--kembang);
      font: 800 11px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .donation h2 {
      margin: 0 0 12px;
      font: 800 clamp(30px, 3.6vw, 48px)/.95 var(--sans);
      letter-spacing: -.05em;
    }
    .donation p {
      margin: 0;
      color: rgba(255,255,255,.74);
      line-height: 1.55;
      max-width: 56ch;
    }
    .donation .cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .donation .donate-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 52px;
      background: var(--bungkul);
      color: var(--bajul);
      border: 0;
      font: 900 13px/1 var(--mono);
      letter-spacing: .12em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .donation .donate-btn:hover { background: var(--majapahit); }
    .donation .alt {
      font: 700 12px/1 var(--sans);
      color: rgba(255,255,255,.82);
      letter-spacing: .04em;
    }

    /* ── Rasa Lokal ala Peta Kota: feature + daftar 4 thumb ── */
    .rasa-peta {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 32px;
    }
    .rasa-peta .rasa-feature .image {
      display: block;
      aspect-ratio: 4/3;
      max-height: 440px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    .rasa-peta .rasa-feature .image img {
      display: block; width: 100%; height: 100%; object-fit: cover;
    }
    .rasa-peta .rasa-feature h3 {
      margin: 0 0 12px;
      font: 900 30px/1.05 var(--sans);
      letter-spacing: -.045em;
    }
    .rasa-peta .rasa-feature p {
      color: var(--muted); line-height: 1.55; margin: 0 0 12px;
    }
    .rasa-peta .rasa-list { display: flex; flex-direction: column; }
    .rasa-peta .rasa-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 14px;
      padding: 16px 0;
      border-top: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
    }
    .rasa-peta .rasa-row:last-child { border-bottom: 1px solid var(--line); }
    .rasa-peta .rasa-row .thumb {
      aspect-ratio: 1; overflow: hidden; background: var(--surface);
    }
    .rasa-peta .rasa-row .thumb img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .rasa-peta .rasa-row h4 {
      margin: 4px 0 6px;
      font: 800 16px/1.18 var(--sans);
      letter-spacing: -.025em;
    }
    .rasa-peta .rasa-row:hover h4 { color: var(--majapahit); }

    /* ── Ngeluyur ala Peta Kota: 3 kartu besar ── */
    .ngeluyur-peta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .ngeluyur-peta .ng-card {
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
    }
    .ngeluyur-peta .ng-card .image {
      aspect-ratio: 4/3; overflow: hidden;
    }
    .ngeluyur-peta .ng-card .image img {
      width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;
    }
    .ngeluyur-peta .ng-card:hover .image img { transform: scale(1.04); }
    .ngeluyur-peta .ng-card .body { padding: 16px 0 0; }
    .ngeluyur-peta .ng-card h4 {
      margin: 0 0 16px;
      font: 800 19px/1.15 var(--sans);
      letter-spacing: -.03em;
    }
    .ngeluyur-peta .ng-card p {
      margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5;
    }
    /* ── Pilihan Redaksi (existing treatment) ── */
    .picks {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 32px;
      align-items: start;
    }
    .pick-lead .image { aspect-ratio: 16/10; overflow: hidden; margin-bottom: 16px; max-height: 480px; }
    .pick-lead .image img { width: 100%; height: 100%; object-fit: cover; }
    .pick-lead h3 {
      margin: 0 0 10px;
      font: 900 30px/1.05 var(--sans);
      letter-spacing: -.045em;
    }
    .pick-list { border-top: 1px solid var(--line); }
    .pick-list .pick-item {
      display: grid;
      grid-template-columns: 1fr 90px;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
    }
    .pick-list .pick-item h4 {
      margin: 0 0 6px;
      font: 800 17px/1.18 var(--sans);
      letter-spacing: -.025em;
    }
    .pick-list .pick-item .thumb { aspect-ratio: 1; overflow: hidden; }
    .pick-list .pick-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
    .pick-list .pick-item:hover h4 { color: var(--majapahit); }

    /* ── Footer ── */
    /* desainer: luminous green at left, settling into Ijo Bajul. */
    .site-footer {
      background:
        radial-gradient(ellipse 48% 110% at 0% 0%, #46a65a 0%, #388d4e 27%, #23653d 50%, rgba(18, 63, 42, 0) 72%),
        var(--bajul);
      color: var(--paper);
      padding: 48px 0 28px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
      gap: 32px;
    }
    .foot-col h4 {
      margin: 0 0 14px;
      font: 800 11px/1 var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--kembang);
    }
    .foot-col p, .foot-col a, .foot-col > span {
      color: rgba(255,255,255,.72);
      text-decoration: none;
      font-size: 13px;
      line-height: 1.85;
    }
    .foot-col a:hover { color: var(--bungkul); }
    .foot-brand p { max-width: 36ch; margin-top: 14px; }
    .foot-brand .strap {
      margin: 0 0 6px;
      color: var(--kembang);
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
    }
    .foot-brand .strap span { display: block; }
    .foot-bottom {
      margin-top: 32px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.16);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: rgba(255,255,255,.55);
      font: 700 11px/1.4 var(--mono);
      letter-spacing: .04em;
      flex-wrap: wrap;
    }

    /* ── Responsive ── */
    @media (max-width: 1100px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-side { border-top: 1px solid var(--line); }
      .picks { grid-template-columns: 1fr; }
      .rasa-peta,
      .donation-inner,
      .foot-grid { grid-template-columns: 1fr; gap: 24px; }
      .ngeluyur-peta { grid-template-columns: 1fr 1fr; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 860px) {
      .topbar-inner { flex-wrap: wrap; gap: 6px 14px; min-height: 0; padding: 8px 0; }
      .topbar-cta { margin-left: 0; }
      .topbar-meta + .topbar-meta::before { display: none; }
    }
    @media (max-width: 760px) {
      .shell, .rail { width: min(calc(100% - 24px), var(--max)); }
      .topbar-tag { display: none; }
      .masthead-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 0;
        padding: 14px 0;
      }
      .masthead-tag { display: none; }
      .logo img { width: 204px; }
      .masthead-strip.is-pinned .masthead-inner { padding: 8px 0; }
      .utility { justify-content: flex-end; gap: 4px; }
      .primary-nav-inner { justify-content: flex-start; }
      .primary-nav a { padding: 12px 14px; font-size: 10px; }
      .primary-nav .nav-divider, .primary-nav .date { display: none; }
      .hero { padding: 24px 0 28px; }
      .hero-lead h1 { font-size: clamp(28px, 8vw, 42px); }
      .hero-lead .image { aspect-ratio: 4/3; }
      .section { padding: 28px 0; }
      .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
      .donation { padding: 32px 0; }
      .foot-grid { grid-template-columns: 1fr; gap: 22px; }
      .foot-bottom { flex-direction: column; }
      .ngeluyur-peta { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .utility .plain-btn { display: none; }
    }
    @media (max-width: 440px) {
      .primary-nav a { padding: 10px 12px; font-size: 9.5px; letter-spacing: .08em; }
      .utility { gap: 4px; flex-wrap: nowrap; width: auto; justify-content: flex-end; }
      .icon-btn { width: 34px; min-height: 34px; }
      .icon-btn svg { width: 12px; height: 12px; }
      .plain-btn, .primary-btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
      .side-row { grid-template-columns: 72px 1fr; gap: 10px; }
    }

    /* Focus states */
    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--majapahit);
      outline-offset: 2px;
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .story a:hover img,
      .ngeluyur-peta .ng-card:hover .image img { transform: none; }
      .masthead-strip,
      .masthead-inner,
      .logo img { transition: none; }
      html { scroll-behavior: auto; }
    }

    /* Rendering fixes */
    body.dark .topbar { background: #0b0c0a; color: #f7f7f5; }
    body.dark .masthead {
      color: var(--ink);
      background:
        radial-gradient(ellipse at 25% 90%, rgba(66, 207, 109, .18) 0%, transparent 58%),
        linear-gradient(100deg, #183426 0%, var(--paper) 72%);
    }
    body.dark .masthead-tag { color: rgba(247,247,245,.72); }
    body.dark .masthead-tag strong { color: #f7f7f5; }
    body.dark .topbar-tag,
    body.dark .section-head h2 { color: var(--bungkul); }
    body.dark .primary-nav a,
    body.dark .primary-nav a[data-cat] { color: var(--ink); }
    body.dark .primary-nav a.current,
    body.dark .primary-nav a[aria-current="page"] {
      border-bottom-color: var(--bungkul);
    }
    body.dark .site-footer {
      background:
        radial-gradient(ellipse 48% 110% at 0% 0%, rgba(66, 207, 109, .32) 0%, rgba(29, 102, 57, .2) 46%, transparent 72%),
        #0b2f20;
      color: #f7f7f5;
    }
    @media (max-width: 760px) {
      .masthead {
        background:
          radial-gradient(ellipse 42% 90% at 100% 120%, rgba(243, 90, 6, .05) 0%, transparent 72%),
          linear-gradient(215deg, #fff9f3 0%, #f6faf2 44%, #d7f2dc 72%, #afe5bc 100%);
      }
      .donation h2 {
        font-size: clamp(21px, 6vw, 24px);
        line-height: 1.02;
        letter-spacing: -.04em;
      }
      .donation p {
        font-size: 14px;
        line-height: 1.5;
      }
      .site-footer {
        background:
          radial-gradient(ellipse 100% 44% at 0% 0%, #46a65a 0%, #388d4e 27%, #23653d 50%, rgba(18, 63, 42, 0) 72%),
          var(--bajul);
      }
      body.dark .site-footer {
        background:
          radial-gradient(ellipse 100% 44% at 0% 0%, rgba(66, 207, 109, .32) 0%, rgba(29, 102, 57, .2) 46%, transparent 72%),
          #0b2f20;
      }
    }
    body.dark .topbar-meta { color: rgba(255,255,255,.74); }
    body.dark .site-footer .foot-col p,
    body.dark .site-footer .foot-col a { color: rgba(255,255,255,.78); }
    body.dark .site-footer .foot-bottom { color: rgba(255,255,255,.68); }
    body.dark .donation .donate-btn { color: #17150d !important; }
    .hero-lead .image { display: block; }
    .hero-lead .kicker { display: flex; flex-wrap: wrap; line-height: 1.35; }
    .section-head .section-kicker { margin: 0 0 10px; line-height: 1.2; }
    .section-head h2 { margin-top: 0; }
    .pick-lead .image {
      display: block;
      width: 100%;
      height: clamp(280px, 32vw, 480px);
      min-height: 0;
      max-height: 480px;
      aspect-ratio: auto;
    }
    .pick-lead .image img { display: block; }
    .pick-list .pick-item { min-height: 116px; }
    @media (max-width: 1000px) {
      .hero-lead .image { max-height: 440px; }
      .pick-lead .image { height: clamp(260px, 52vw, 420px); min-height: 0; max-height: 420px; }
    }
    @media (max-width: 680px) {
      .hero-lead .image { max-height: 360px; }
      .primary-nav a, .donation button { min-height: 44px; }
      .primary-nav a { display: inline-flex; align-items: center; }
    }
/* =====================================================
   Ghost theme integration
   ===================================================== */

body {
  font-family: var(--gh-font-body, var(--sans));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sans);
}

.site-main {
  min-height: 50vh;
}

.image-placeholder {
  min-height: 180px;
  background:
    linear-gradient(135deg, rgba(66, 207, 109, .22), rgba(18, 63, 42, .06)),
    var(--surface);
}

.side-row .thumb.image-placeholder {
  min-height: 0;
}

.hero-lead h1 a,
.rasa-feature h3 a,
.pick-lead h3 a,
.archive-card h2 a {
  color: inherit;
  text-decoration: none;
}

.donation .alt {
  text-decoration: none;
}

.archive-page,
.article-shell {
  padding: clamp(40px, 7vw, 96px) 0;
}

.archive-header,
.article-header,
.article-footer {
  width: min(calc(100% - 32px), 820px);
  margin-inline: auto;
}

.archive-header {
  margin-bottom: 32px;
}

.archive-header h1,
.article-header h1 {
  margin: 8px 0 16px;
  font: 500 clamp(40px, 7vw, 76px)/.96 var(--sans);
  letter-spacing: -.025em;
}

.archive-description,
.article-deck {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}

.archive-grid {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 18px;
}

.archive-card {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.archive-card .image {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  overflow: hidden;
}

.archive-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-card h2 {
  margin: 8px 0;
  font: 500 24px/1.05 var(--sans);
}

.archive-card h2 a {
  text-decoration: none;
}

.article-header {
  margin-bottom: 32px;
}

.article-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-kicker .tag {
  margin-bottom: 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted);
  font: 700 12px/1.4 var(--sans);
}

.article-image {
  width: min(calc(100% - 32px), 1100px);
  margin: 0 auto;
}

.article-image img {
  display: block;
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}

.article-content {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start] minmax(0, 140px)
    [main-start] min(680px, calc(100vw - 32px)) [main-end]
    minmax(0, 140px) [wide-end]
    minmax(0, 1fr) [full-end];
  font-size: 18px;
  line-height: 1.72;
}

.article-image + .article-content {
  margin-top: 1.3em;
}

.article-content > * {
  grid-column: main;
}

.article-content > .kg-image-card {
  margin-inline: 0;
}

.article-content > .kg-width-wide {
  grid-column: wide;
  width: 100%;
}

.article-content > .kg-width-full {
  grid-column: full;
  width: calc(100% - 32px);
  justify-self: center;
}

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.article-content figure {
  /* ponytail: +half-leading vs p, images have no line box so visual gap matches para-to-para */
  margin-block: calc((1lh - 1em) / 2) calc(1.15em + (1lh - 1em) / 2);
}

.article-content > p {
  margin-block: 0 1.15em;
}

.article-content > ol,
.article-content > ul {
  margin-block: 0 1.15em;
}

.article-content li + li {
  margin-top: .6em;
}

.article-content .kg-image-card img {
  width: 100%;
}

.article-image figcaption,
.article-content figcaption {
  margin-top: 8px;
  color: var(--muted);
  font: 500 clamp(12px, 1.4vw, 14px)/1.5 var(--sans);
}

.article-content a {
  color: var(--bajul);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.dark .article-content a {
  color: var(--bungkul);
}

.article-footer {
  display: grid;
  gap: 10px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-block: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: transparent;
  color: var(--ink);
}

.article-footer p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font: 500 14px/1.5 var(--sans);
}

.article-footer strong {
  color: var(--muted);
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.article-footer a {
  color: var(--bajul);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-donation {
  width: min(calc(100% - 32px), 960px);
  margin: 0 auto clamp(56px, 8vw, 104px);
  border: 1px solid var(--line);
  border-left: 8px solid var(--majapahit);
  background: var(--surface);
}

.article-donation-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding: clamp(24px, 4vw, 44px);
}

.article-donation-label {
  margin: 0 0 10px;
  color: var(--majapahit);
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.article-donation h2 {
  margin: 0 0 12px;
  font: 600 clamp(28px, 4vw, 44px)/1 var(--sans);
  letter-spacing: -.025em;
}

.article-donation div > p:last-child {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.article-donation-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 28px;
  background: var(--bungkul);
  color: var(--bajul);
  font: 800 12px/1 var(--mono);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.article-donation-button:hover {
  background: var(--majapahit);
}

.article-donation-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

#pilihan-redaksi .pick-lead h3,
#pilihan-redaksi .pick-item h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.08;
}

.archive-page {
  padding-bottom: clamp(32px, 5vw, 56px);
}

.pagination {
  width: min(calc(100% - 32px), var(--max));
  margin: 48px auto 0;
  display: flex;
  justify-content: space-between;
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
}

.pagination-single {
  justify-content: flex-start;
}

.pagination-single > span:empty {
  display: none;
}

.pagination a {
  color: var(--bajul);
}

@media (max-width: 760px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }

  .article-content {
    font-size: 17px;
  }

  .article-donation-inner {
    grid-template-columns: 1fr;
  }

  .article-donation-button {
    justify-self: start;
  }
}