/*
 * Neraca — public newsroom stylesheet
 * ---------------------------------------------------------------------------
 * Hand-authored, no build step: the file is loaded directly by the
 * resources/views/public/* Blade layout. Laravel Mix in this repository
 * compiles the legacy storefront bundles only, so keeping this stylesheet
 * plain CSS avoids rebuilding (and churning) those committed bundles.
 *
 * Structure: 1) tokens  2) base/typography  3) chrome (masthead, nav, footer)
 * 4) editorial grids  5) article  6) e-paper  7) forms/auth  8) states
 * 9) responsive.
 */

/* 1) ----------------------------------------------------------- tokens ---- */
:root {
  /* ------------------------------------------------------------------ */
  /* Brand tokens — Harian Ekonomi NERACA Brand Guideline (Final)        */
  /* Color System p.6, Color Usage p.7, Typography p.8-11, Grid p.12.    */
  /* BLACK + ORANGE are corporate heritage; GRAY is supporting; the      */
  /* website base is BLACK + WHITE + GRAY with ORANGE as brand signal.   */
  /* ------------------------------------------------------------------ */

  /* Core */
  --black: #000000;          /* NERACA BLACK   C0 M0 Y0 K100 */
  --orange: #ff5900;         /* NERACA ORANGE  C0 M65 Y100 K0 — master digital reference */
  --orange-light: #ff8a4d;   /* derived */
  --white: #ffffff;

  /* Gray scale (supporting/structural) */
  --gray-900: #333333;
  --gray-700: #666666;       /* smallest metadata: 5.7:1 on white */
  --gray-500: #777777;       /* guideline NERACA GRAY — large text/UI only, 4.48:1 */
  --gray-400: #b0b0b0;
  --gray-200: #e5e5e5;
  --gray-100: #f1f1f1;

  /* Semantic aliases used across the stylesheet.
     The guideline's WHITE swatch (#FFFFFF) is the corporate/UI white — used
     here for cards, buttons-on-black, and raised surfaces. The reading
     background itself uses a warm "broken white" instead of a clinical
     #FFFFFF, matching real newsprint and reducing screen glare for long-form
     reading; this is a typographic choice, not a deviation from the palette
     (NERACA GRAY 100 / #F1F1F1 already establishes an off-white tier). */
  --paper: #faf8f3;
  --paper-sunk: var(--gray-100);
  --paper-raised: var(--white);
  --ink: var(--black);
  --ink-soft: var(--gray-900);
  --ink-mute: var(--gray-700);
  --rule: var(--gray-200);
  --rule-soft: var(--gray-100);
  --accent: var(--orange);
  /* Orange on white is 3.14:1 — fine for fills, borders, icons and large
     text, but NOT for small text. Small orange text uses this darker tone,
     which stays inside the approved heritage range (C0 M70 Y100 K0). */
  --accent-text: #c23e00;
  --accent-wash: #fff1e8;
  --focus: #0a5ad6;

  /* Market movement: the guideline keeps data grayscale-led with Orange as
     the highlight, and requires that status is never carried by color alone
     (p.13). Direction is always paired with a ▲/▼ glyph and a value. */
  --up: var(--gray-900);
  --down: var(--gray-900);

  /* ------------------------------------------------------------------ */
  /* Typography                                                          */
  /* Utopia Std is the brand's editorial typeface but is a commercial     */
  /* Adobe font. Source Serif 4 is the documented interim substitute:     */
  /* same designer (Robert Slimbach), same transitional-serif class, open */
  /* licence. To adopt the real thing, load Utopia Std and change only    */
  /* the first family in --font-serif.                                    */
  /* ------------------------------------------------------------------ */
  --font-serif: "Source Serif 4", "Source Serif Pro", Utopia, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Grid — guideline p.12: desktop 12 columns, max-width ±1280,
     gutter 24, outer margin ±80; 8px base rhythm. */
  --shell: 1280px;
  --shell-pad: 80px;
  --gap: 24px;
  --gap-sm: 16px;
  --rule-w: 1px;

  /* Type scale — guideline p.11 (px ranges converted to rem at 16px base) */
  --fs-kicker: 0.75rem;      /* 12px  Inter, category tag */
  --fs-meta: 0.8125rem;      /* 13px  Inter, metadata/caption */
  --fs-ui: 0.875rem;         /* 14px  Inter, navigation/buttons */
  --fs-body: 1rem;           /* 16px  Inter, body UI */
  --fs-read: 1.125rem;       /* 18px  Utopia/serif, long-form body (17-19px) */
  --fs-deck: 1.25rem;        /* 20px  deck / article summary (18-22px) */
}


/* 2) ------------------------------------------------------------- base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.n-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.n-shell {
  width: 100%;
  /* Content column stays at --shell; the outer margin sits outside it, so a
     1440px viewport yields exactly 1280 + 80 + 80 as the guideline specifies. */
  max-width: calc(var(--shell) + var(--shell-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

.n-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.n-skip:focus { left: 8px; top: 8px; color: #fff; }

.n-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.n-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
/* Orange category tag is a signal, not the default dressing. */
.n-kicker--accent { color: var(--accent-text); font-weight: 700; }

.n-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.n-meta a:hover { color: var(--accent-text); }
.n-meta-sep { padding: 0 6px; color: var(--rule); }

.n-dek {
  font-family: var(--font-serif);
  color: var(--ink-soft);
  font-size: var(--fs-deck);
  line-height: 1.5;
  margin: 8px 0 0;
}

.n-rule { border: 0; border-top: var(--rule-w) solid var(--rule); margin: 0; }
.n-rule-strong { border: 0; border-top: 2px solid var(--ink); margin: 0; }

/* buttons */
.n-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.n-btn:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.n-btn--ghost { background: transparent; color: var(--ink); }
.n-btn--ghost:hover { background: var(--ink); color: #fff; }
.n-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  /* Black on Orange is 6.68:1; white on Orange would be 3.14:1 and fail AA. */
  color: var(--black);
}
.n-btn--accent:hover { background: var(--orange-light); border-color: var(--orange-light); color: var(--black); }
.n-btn--sm { padding: 8px 13px; font-size: 0.8125rem; }
.n-btn--block { width: 100%; }

.n-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  background: var(--paper-sunk);
}
.n-tag--demo { border-color: var(--accent); color: var(--accent-text); background: var(--accent-wash); }
.n-tag--premium { border-color: var(--ink); color: var(--ink); background: transparent; }

/* 3) ----------------------------------------------------------- chrome ---- */
.n-topstrip {
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--paper-sunk);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.n-topstrip .n-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
}
.n-topstrip__links { display: flex; gap: 16px; align-items: center; }
.n-topstrip__variant {
  margin-left: 10px;
  vertical-align: middle;
  font-size: 0.625rem;
  padding: 2px 6px;
}

.n-masthead { padding: 14px 0 0; text-align: center; }
.n-masthead__kicker {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.n-masthead__logo { display: inline-block; }
.n-masthead__logo img { height: clamp(46px, 8vw, 74px); width: auto; margin: 0 auto; }
.n-masthead__wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 4.75rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0;
}

.n-dateline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.n-dateline::before,
.n-dateline::after {
  content: "";
  flex: 1;
  border-top: var(--rule-w) solid var(--ink);
}
.n-dateline__text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* promoted strip under the masthead (mirrors the print teaser row) */
.n-promo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 260px;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  margin-top: 14px;
}
.n-promo__item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-right: var(--rule-w) solid var(--rule);
  min-width: 0;
}
.n-promo__item:last-child { border-right: 0; }
.n-promo__thumb { width: 96px; flex: 0 0 96px; }
.n-promo__thumb img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-sunk); }
.n-promo__title { font-size: 1rem; line-height: 1.2; }
.n-promo__teaser {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 5px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n-promo__epaper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--paper-sunk);
}
.n-promo__epaper img { width: 74px; border: 1px solid var(--rule); }

/* Guest sign-in / sign-up CTA, at the end of the market bar. */
.n-market__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 0;
}
.n-market__cta .n-btn--sm { padding: 4px 11px; font-size: 0.75rem; }

/* Front-page teaser strip — print "ears" with the page number they run on. */
.n-teasers { border-bottom: var(--rule-w) solid var(--rule); }
.n-teasers__inner {
  display: flex;
  align-items: stretch;
  padding: 8px 0;
}
.n-teaser {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 18px;
  color: inherit;
  text-decoration: none;
  border-left: var(--rule-w) solid var(--rule);
}
.n-teaser:first-child { padding-left: 0; border-left: 0; }
.n-teaser__img { width: 72px; height: 72px; object-fit: cover; background: var(--paper-sunk); }
.n-teaser__body { display: flex; flex-direction: column; min-width: 0; }
.n-teaser__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.n-teaser__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.22;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n-teaser:hover .n-teaser__title { text-decoration: underline; text-underline-offset: 2px; }
.n-teaser__dek {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n-teaser__page {
  align-self: end;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink-mute);
  font-variant-numeric: lining-nums;
}
.n-teasers__social {
  flex: 0 0 150px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: var(--rule-w) solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
}
.n-teasers__social li { border-bottom: 1px dotted var(--rule); padding: 3px 0; }
.n-teasers__social a { color: var(--ink-soft); }

/* Phones: the mobile bar under the masthead already carries Masuk, and the
   print "ears" would push Hal 1's headlines off the first screen. */
@media (max-width: 720px) {
  .n-market__cta, .n-teasers { display: none; }
}

/* market indicator strip */
.n-market {
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--paper-raised);
  margin-top: 8px;
}
.n-market__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 30px;
}
.n-market__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.n-market__list::-webkit-scrollbar { display: none; }
.n-market__item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px 8px 0;
  margin-right: 16px;
  border-right: var(--rule-w) solid var(--rule-soft);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
}
.n-market__item:last-child { border-right: 0; margin-right: 0; }
.n-market__label {
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.n-market__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.n-market__change { font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.n-market__item.is-up .n-market__change,
.n-market__item.is-down .n-market__change { color: var(--gray-900); font-weight: 600; }
/* Orange is the highlight signal for one selected movement, never the whole
   strip (guideline p.7 and p.13). Direction also carries a glyph, so meaning
   never depends on color alone. */
.n-market__item.is-highlight .n-market__label,
.n-market__item.is-highlight .n-market__change { color: var(--accent-text); }
.n-market__item.is-highlight .n-market__value { color: var(--black); }
.n-market .n-tag {
  flex: 0 0 auto;
  margin-left: 4px;
}
.n-market__list { padding-right: 8px; }
.n-market__stamp {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* section navigation */
.n-nav {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 60;
}
.n-nav__inner {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.n-nav__inner::-webkit-scrollbar { display: none; }
.n-nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 13px 6px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.n-nav__link:hover { color: var(--ink); background: var(--paper-sunk); }
.n-nav__link.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.n-nav__spacer { flex: 1; }
.n-nav__cta { align-self: center; margin-left: 8px; }

.n-mobilebar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.n-footer {
  margin-top: 56px;
  border-top: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  padding: 40px 0 48px;
  font-size: var(--fs-ui);
}
.n-footer a { color: var(--gray-200); }
.n-footer a:hover { color: var(--orange); }
.n-footer p { color: var(--gray-400); }
.n-footer__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-deck);
  line-height: 1.35;
  color: var(--white) !important;
  margin: 0 0 12px;
}
.n-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.n-footer h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.n-footer ul { list-style: none; margin: 0; padding: 0; }
.n-footer li { margin-bottom: 7px; }
.n-footer__legal {
  margin-top: 28px;
  padding-top: 16px;
  border-top: var(--rule-w) solid var(--gray-900);
  font-size: var(--fs-meta);
  color: var(--gray-400);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}

/* 4) ------------------------------------------------------ editorial grid - */
.n-main { padding: 24px 0 0; }

.n-front {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 320px;
  gap: 0;
}
.n-front__rail { border-right: var(--rule-w) solid var(--rule); padding-right: 18px; }
.n-front__lead { padding: 0 22px; min-width: 0; }
.n-front__side { border-left: var(--rule-w) solid var(--rule); padding-left: 18px; min-width: 0; }

.n-railcard {
  border: var(--rule-w) solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 16px;
}
.n-railcard__cover {
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  /* Keep the cover a thumbnail even when the rail becomes wide on tablets. */
  max-width: 210px;
  margin: 0 auto;
}
.n-railcard__cover img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.n-railcard .n-edition__cover { max-width: 210px; margin: 0 auto; }
.n-railcard__label {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.n-raillist { list-style: none; margin: 0; padding: 0; }
.n-raillist li { padding: 9px 0; border-top: var(--rule-w) solid var(--rule-soft); }
.n-raillist li:first-child { border-top: 0; }
.n-raillist a { font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.25; }

.n-social { list-style: none; margin: 14px 0 0; padding: 0; }
.n-social li { border-top: var(--rule-w) solid var(--rule-soft); }
.n-social a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
}

/* Hero — headline overlaid on the lead image, per the guideline's website
   mockup. Capped in height so the headline always clears the fold on a
   900px-tall viewport, and scrimmed so white text keeps AA contrast. */
.n-hero {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gray-900);
  margin-bottom: 12px;
}
.n-hero img {
  width: 100%;
  height: clamp(240px, 23vw, 320px);
  object-fit: cover;
  display: block;
}
.n-hero__scrim {
  position: absolute;
  inset: 0;
  /* Deep enough under the text block that white stays legible over a bright
     photograph; the lead image here is a sunlit skyline. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.78) 78%,
    rgba(0, 0, 0, 0.93) 100%
  );
}
.n-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 20px;
  color: var(--white);
}
.n-hero__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--black);
  padding: 5px 10px;
  margin-bottom: 12px;
}
.n-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.n-hero__title a { color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.n-hero__title a:hover { color: var(--orange-light); }
.n-hero__dek {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  margin: 6px 0 0;
  max-width: 60ch;
}
.n-hero__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.78);
  margin: 12px 0 0;
}
.n-hero__meta a { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 720px) {
  .n-hero img { height: clamp(240px, 60vw, 340px); }
  .n-hero__body { padding: 16px; }
}

/* Compact headline list — "berita utama lainnya" on the front page. Text
   only (no photo, no teaser) so the front page can hold several more
   headlines in the space a single photo card used to occupy. */
.n-toplist { list-style: none; margin: 0; padding: 0; }
.n-toplist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: var(--rule-w) solid var(--rule-soft);
}
.n-toplist li:first-child { border-top: 0; padding-top: 0; }
.n-toplist__index {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--gray-400);
  flex: 0 0 auto;
  width: 1.4em;
}
.n-toplist__body { min-width: 0; }
.n-toplist__kicker {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 2px;
}
.n-toplist__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.28;
}

/* story blocks */
.n-story--lead h1,
.n-story--lead .n-story__title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.n-story--lead .n-dek { font-size: var(--fs-deck); margin-top: 12px; }
.n-story--lead figure { margin: 0 0 14px; }
.n-story--lead figure img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-sunk); }

.n-story { min-width: 0; }
.n-story figcaption {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 6px;
  text-align: left;
}
.n-story__title { font-family: var(--font-serif); font-weight: 600; }
.n-story__teaser {
  font-family: var(--font-serif);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 6px 0 0;
}

.n-stack { display: grid; gap: 0; }
.n-stack > * { padding: 16px 0; border-top: var(--rule-w) solid var(--rule); }
.n-stack > *:first-child { border-top: 0; padding-top: 0; }

.n-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin: 32px 0 16px;
}
.n-sectionhead h1,
.n-sectionhead h2 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.n-sectionhead a { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--accent-text); font-weight: 600; }

.n-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.n-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.n-grid-3 > *, .n-grid-4 > * {
  padding: 0 18px;
  border-right: var(--rule-w) solid var(--rule);
  min-width: 0;
}
.n-grid-3 > *:first-child, .n-grid-4 > *:first-child { padding-left: 0; }
.n-grid-3 > *:last-child, .n-grid-4 > *:last-child { padding-right: 0; border-right: 0; }

.n-card__thumb { margin-bottom: 10px; }
.n-card__thumb img { aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-sunk); }
.n-card h3 { font-size: 1.25rem; line-height: 1.22; }
.n-card--wide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.n-card--wide img { aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-sunk); }
.n-card--wide h3 { font-size: 1.375rem; }

/* Hal 1 / Utama — print front-page arrangement (see FrontLayout.php):
   stories column + artikel 1's photo, and a bottom row for artikel 3 / View.
   Photo is wider on landscape days, narrow and tall on Rabu (portrait). */
.n-front--hal1 { grid-template-columns: 232px minmax(0, 1fr); margin-top: -8px; }
.n-hal1 { padding-left: 22px; min-width: 0; }
.n-hal1__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
.n-front--dua-potret .n-hal1__top { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.n-hal1__top--nophoto { grid-template-columns: minmax(0, 1fr) !important; }
.n-hal1__stories { padding-right: 20px; min-width: 0; }
.n-hal1__top:not(.n-hal1__top--nophoto) .n-hal1__stories { border-right: var(--rule-w) solid var(--rule); }
.n-hal1__story + .n-hal1__story,
.n-hal1__story + .n-hal1__view {
  border-top: 1px dotted var(--ink-mute);
  margin-top: 12px;
  padding-top: 12px;
}
.n-hal1__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
}
.n-front--dua-potret .n-hal1__story--lead .n-hal1__title { font-size: clamp(2rem, 2.9vw, 2.75rem); }
.n-hal1__title--sm { font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; }
.n-hal1__story--lead .n-kicker { margin-bottom: 4px; }
.n-hal1__dek {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.n-hal1__photo { margin: 0; padding-left: 20px; min-width: 0; }
.n-hal1__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-sunk);
  display: block;
}
.n-front--dua-potret .n-hal1__photo img { aspect-ratio: 3 / 4; }
.n-kanal.n-front--dua-potret .n-hal1__photo img { aspect-ratio: 4 / 5; }
.n-hal1__photo figcaption {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 6px;
}
.n-hal1__photo figcaption strong { color: var(--ink-soft); letter-spacing: 0.04em; }
.n-hal1__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dotted var(--ink-mute);
}
.n-hal1__bottom > * + * { border-left: var(--rule-w) solid var(--rule); padding-left: 20px; }
.n-hal1__bottom > :first-child { padding-right: 20px; }
.n-hal1__bottom--single { grid-template-columns: minmax(0, 1fr); }
.n-hal1__bottom--single > :first-child { padding-right: 0; }
.n-hal1__byline {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.n-hal1__byline strong { color: var(--ink); }
.n-hal1__view-tag { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.n-hal1__view--thumb { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
.n-hal1__view-img { width: 132px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-sunk); }

/* Kanal pages (Hal 2–12) — see SectionLayout.php. They reuse the Hal 1
   opener (.n-hal1__top) and add a bottom row per printed page. */
.n-hal1__title--xs { font-size: 1.0625rem; line-height: 1.25; letter-spacing: 0; }
.n-kanal__bottom {
  display: grid;
  gap: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dotted var(--ink-mute);
}
.n-kanal__bottom > * { min-width: 0; }
/* Stacked-story dividers don't apply between side-by-side grid cells. */
.n-kanal__bottom > .n-hal1__story + .n-hal1__story { border-top: 0; margin-top: 0; padding-top: 0; }
.n-kanal__pair--wide .n-hal1__title--sm { font-size: 1.125rem; }
.n-kanal__bottom > * + * { border-left: var(--rule-w) solid var(--rule); padding-left: 18px; }
.n-kanal__bottom > :not(:last-child) { padding-right: 18px; }
.n-kanal__bottom--photo-list { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
.n-kanal__bottom--daerah { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr) minmax(0, 0.8fr); }
.n-kanal__bottom--thumbs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.n-kanal__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.n-kanal__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n-kanal__pair--wide { margin-top: 10px; padding-top: 10px; }
.n-kanal__list .n-hal1__story + .n-hal1__story { margin-top: 9px; padding-top: 9px; }
.n-kanal__list--tight .n-hal1__story + .n-hal1__story { margin-top: 6px; padding-top: 6px; }
.n-kanal__list--tight .n-hal1__title--xs { font-size: 0.9375rem; }
.n-kanal__brief {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n-kanal__brief--1 { -webkit-line-clamp: 1; }
.n-kanal__card img,
.n-photostory img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--paper-sunk);
  display: block;
  margin-bottom: 8px;
}
.n-photostory { margin: 0; }
.n-photostory figcaption {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-mute);
}
.n-photostory figcaption strong { color: var(--ink-soft); }
.n-kanal__thumbrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.n-kanal__thumbrow img { width: 112px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-sunk); }
.n-kanal__thumbrow .n-kanal__brief { margin: 0; -webkit-line-clamp: 5; }
.n-kanal__thumbrow.is-textonly, .n-kanal__opinion-body.is-textonly { grid-template-columns: minmax(0, 1fr); }

/* Opini (Hal 2): three pieces with the writer, and an Editorial column. */
/* Indeks Pasar (print page 7): summary cards, movers, searchable table. */
.n-mkt { padding-top: 6px; }
.n-mkt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding: 6px 0 14px; }
.n-mkt-head h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.05; }
.n-mkt-lede { font-family: var(--font-serif); color: var(--ink-soft); margin: 6px 0 0; }
.n-mkt-date { margin: 0; font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--ink-mute); text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.n-mkt-date strong { color: var(--ink); font-size: 0.9375rem; }
.n-mkt-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.n-mkt-summary > :only-child { grid-column: 1 / -1; }
.n-mkt-card { background: var(--paper-raised); border: var(--rule-w) solid var(--rule); padding: 14px 16px; min-width: 0; }
.n-mkt-label { font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 6px; }
.n-mkt-label span { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.n-mkt-big { font-family: var(--font-serif); font-weight: 600; font-size: 2.5rem; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.n-mkt-big--sm { font-size: 1.5rem; }
.n-mkt-sub { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--ink-soft); margin: 6px 0 0; }
.n-mkt-delta { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; margin: 4px 0 10px; color: var(--accent-text); }
.n-mkt-ohl { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 10px; font-family: var(--font-sans); font-size: var(--fs-meta); }
.n-mkt-ohl dt { color: var(--ink-mute); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.n-mkt-ohl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-mkt-chart { display: block; width: 100%; height: 150px; color: var(--ink); }
.n-mkt-axis { display: flex; justify-content: space-between; font: 0.6875rem var(--font-sans); color: var(--ink-mute); margin-top: 4px; }
.n-mkt-stats { display: grid; gap: 12px; align-content: start; }
.n-mkt-breadth { display: flex; height: 12px; gap: 2px; margin: 8px 0; }
.n-mkt-breadth span { display: block; min-width: 2px; }
.n-mkt-breadth .is-up { background: var(--ink); }
.n-mkt-breadth .is-flat { background: var(--gray-300, #c9c5bd); }
.n-mkt-breadth .is-down { background: var(--ink-mute); opacity: 0.55; }
.n-mkt-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font: var(--fs-meta) var(--font-sans); color: var(--ink-soft); }
.n-mkt-legend b { color: var(--ink); }
.n-mkt-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.n-mkt-trio dt { font: 0.6875rem var(--font-sans); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.n-mkt-trio dd { margin: 2px 0 0; font: 600 1.125rem var(--font-serif); font-variant-numeric: tabular-nums; }
.n-mkt-trio small { font: 0.6875rem var(--font-sans); color: var(--ink-mute); }
.n-mkt-movers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.n-mkt-mini h2 { font: 700 var(--fs-kicker) var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin: 0 0 4px; }
.n-mkt-mini table { width: 100%; border-collapse: collapse; font: var(--fs-meta) var(--font-sans); font-variant-numeric: tabular-nums; }
.n-mkt-mini th, .n-mkt-mini td { padding: 5px 0; border-bottom: 1px dotted var(--rule); text-align: right; }
.n-mkt-mini thead th { font-size: 0.6875rem; color: var(--ink-mute); font-weight: 500; }
.n-mkt-mini th:first-child, .n-mkt-mini td:first-child { text-align: left; }
.n-mkt-mini tbody th { font-weight: 700; }
.n-mkt-mini tbody td:last-child { font-weight: 600; }
.n-mkt-h2 { font: 700 var(--fs-kicker) var(--font-sans); letter-spacing: 0.11em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 12px; margin: 30px 0 10px; }
.n-mkt-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.n-mkt-toolbar[hidden] { display: none; }
.n-mkt-toolbar .n-input { max-width: 340px; }
.n-mkt-sort { font: var(--fs-meta) var(--font-sans); color: var(--ink-soft); }
.n-mkt-sort select { font: inherit; padding: 8px; border: 1px solid var(--ink-mute); background: var(--paper-raised); margin-left: 6px; }
.n-mkt-count { font: var(--fs-meta) var(--font-sans); color: var(--ink-mute); margin: 0 0 8px; }
.n-mkt-tablewrap { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.n-mkt-table { width: 100%; border-collapse: collapse; font: 0.8125rem var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-mkt-table thead th { position: sticky; top: 41px; background: var(--paper); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); font-weight: 600; text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--ink); }
.n-mkt-table td, .n-mkt-table tbody th { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--rule-soft); }
.n-mkt-table .c-no { text-align: left; color: var(--ink-mute); width: 32px; }
.n-mkt-table .c-code, .n-mkt-table tbody th.c-code { text-align: left; font-weight: 700; }
.n-mkt-table .c-name { text-align: left; white-space: normal; min-width: 220px; }
.n-mkt-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.022); }
.n-mkt-table .c-close, .n-mkt-table .c-chg { font-weight: 700; }
.n-btn[hidden] { display: none; }
.n-mkt-more { text-align: center; padding: 18px 0 4px; }
.n-mkt-more p { font: var(--fs-meta) var(--font-sans); color: var(--ink-mute); margin: 12px 0 0; }

/* Bursa & Finansial: world-index band (see market-world.blade.php). */
.n-world { margin-top: 14px; border-top: 2px solid var(--ink); border-bottom: var(--rule-w) solid var(--rule); padding: 8px 0 12px; }
.n-world__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.n-world__head h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.n-world__stamp { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--ink-mute); margin-left: auto; }
.n-world__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.n-world__tile { min-width: 0; padding: 0 14px; border-left: var(--rule-w) solid var(--rule); }
.n-world__tile:first-child { padding-left: 0; border-left: 0; }
.n-world__name { font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 700; margin: 0; line-height: 1.25; }
.n-world__market { display: block; font-weight: 500; font-size: 0.6875rem; color: var(--ink-mute); }
.n-world__value { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.15; margin: 4px 0 0; font-variant-numeric: tabular-nums lining-nums; }
.n-world__change { font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-soft); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.n-world__tile.is-up .n-world__change,
.n-world__tile.is-down .n-world__change { color: var(--ink); font-weight: 600; }
.n-world__spark { display: block; width: 100%; height: 32px; margin-top: 6px; color: var(--ink-soft); }

.n-kanal__opini { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.n-kanal__opinions { padding-right: 20px; border-right: var(--rule-w) solid var(--rule); min-width: 0; }
.n-kanal__opinion-body { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; margin-top: 8px; }
.n-kanal__opinion-body img { width: 124px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-sunk); }
.n-kanal__opinion-body .n-hal1__dek { margin-top: 6px; }
.n-kanal__editorial { padding-left: 20px; min-width: 0; }
.n-kanal__editorial .n-hal1__title { font-size: 1.75rem; }
.n-kanal__more { font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 600; margin: 10px 0 0; }
.n-kanal__more a { color: var(--accent-text); }

.n-opinion { border-top: 2px solid var(--ink); padding-top: 12px; }
.n-opinion__item { padding: 14px 0; border-top: var(--rule-w) solid var(--rule-soft); }
.n-opinion__item:first-of-type { border-top: 0; }
.n-opinion__author {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 3px;
}
.n-opinion__item h3 { font-size: 1.25rem; line-height: 1.24; font-style: italic; }

.n-digest { margin-top: 32px; border-top: 2px solid var(--ink); padding-top: 24px; }
.n-digest__col h3 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: var(--rule-w) solid var(--rule);
}
.n-digest__list { list-style: none; margin: 0; padding: 0; }
.n-digest__list li { padding: 8px 0; border-top: var(--rule-w) solid var(--rule-soft); }
.n-digest__list li:first-child { border-top: 0; }
.n-digest__list a { font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.3; }

/* newsletter / subscribe strip */
.n-strip {
  margin-top: 48px;
  border-top: 2px solid var(--ink);
  border-bottom: var(--rule-w) solid var(--rule);
  padding: 22px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 28px;
  align-items: center;
}
.n-strip h2 { font-size: 1.5rem; }
.n-strip p { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-ui); }
.n-form-inline { display: flex; gap: 8px; }
.n-input {
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  padding: 11px 12px;
  border: 1px solid var(--ink-mute);
  background: var(--paper-raised);
  color: var(--ink);
  width: 100%;
}
.n-input:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }

/* 5) ---------------------------------------------------------- article ---- */
.n-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 120;
  transition: width 80ms linear;
}

.n-breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  padding: 14px 0 10px;
}

.n-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding-top: 6px;
}
.n-article__main { max-width: 46rem; min-width: 0; }
.n-article__rail { border-left: var(--rule-w) solid var(--rule); padding-left: 20px; min-width: 0; }

.n-article h1 {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.n-article__subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-deck);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 12px 0 0;
}
.n-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 18px 0;
  padding: 12px 0;
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.n-article__byline strong { color: var(--ink); }

/* Author identity card — avatar (initials placeholder until a real photo
   column exists) + name + email, always visible in the byline row. */
.n-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.n-author__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-soft);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.n-author__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.n-author__name { font-size: var(--fs-meta); }
.n-author__email {
  font-size: 0.6875rem;
  color: var(--ink-mute);
}
.n-author__email:hover { color: var(--accent-text); }

.n-article__tools { margin-left: auto; display: flex; gap: 8px; }
.n-iconbtn {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.n-iconbtn:hover { border-color: var(--ink); color: var(--ink); }

.n-textsize { display: inline-flex; }
.n-textsize .n-iconbtn { border-right-width: 0; font-family: var(--font-serif); }
.n-textsize .n-iconbtn:last-child { border-right-width: 1px; }
.n-textsize .n-iconbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.n-textsize .n-iconbtn:first-child { font-size: 0.6875rem; }
.n-textsize .n-iconbtn:last-child { font-size: 0.875rem; }

/* Reader controlled body size, remembered in localStorage. */
:root[data-reading="sm"] { --fs-read: 1.0625rem; }
:root[data-reading="lg"] { --fs-read: 1.375rem; }

.n-article__figure { margin: 0 0 22px; }
.n-article__figure img { width: 100%; background: var(--paper-sunk); }
.n-article__figure figcaption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
}

.n-prose {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: 1.72;
  color: #1c1814;
}
.n-prose > p { margin: 0 0 1.15em; }
.n-prose h2 { font-size: 1.5rem; margin: 1.6em 0 0.5em; }
.n-prose h3 { font-size: 1.25rem; margin: 1.4em 0 0.4em; }
.n-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.n-prose blockquote {
  position: relative;
  margin: 2em 0;
  padding: 0 0 0 32px;
  border-left: 0;
  font-size: 1.5rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
}
.n-prose blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: var(--font-serif);
  font-size: 2.4em;
  line-height: 1;
  color: var(--accent);
}
.n-prose img { margin: 1.2em 0; }
.n-prose table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.9375rem; }
.n-prose th, .n-prose td { border-bottom: var(--rule-w) solid var(--rule); padding: 8px 6px; text-align: left; }
.n-prose ul, .n-prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.n-prose--fade {
  position: relative;
  mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0.12) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0.12) 100%);
}

/* inline paywall */
.n-gate {
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 32px;
  margin: 8px 0 32px;
}
.n-gate__label {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.n-gate h2 { font-size: 1.5rem; line-height: 1.2; }
.n-gate p { color: var(--ink-soft); font-size: var(--fs-ui); margin: 10px 0 0; }
.n-gate__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.n-gate__list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: var(--rule-w) solid var(--rule); }
.n-gate__list li { display: flex; gap: 8px; font-size: var(--fs-ui); color: var(--ink-soft); padding: 4px 0; }
.n-gate__list li::before { content: "—"; color: var(--accent); }

.n-related { border-top: 2px solid var(--ink); margin-top: 32px; padding-top: 16px; }

/* Variant B ("hard") sign-in modal — intercepts a click on any
   [data-neraca-gate] link instead of letting the browser navigate. Reuses
   .n-gate for the card itself; only overlay/positioning lives here. */
.n-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* My own `display: flex` above would otherwise beat the browser's default
   [hidden] rule (display: none) once this stylesheet loads — be explicit. */
.n-modal:not([hidden]) { display: flex; }
.n-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 19, 15, 0.55);
}
.n-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.n-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.n-modal__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
body.n-modal-open { overflow: hidden; }

/* Guest sign-in: the page behind the dialog is blurred out of legibility. */
body.n-modal-open > :not(.n-modal):not(script) {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
.n-modal--gate .n-modal__backdrop { background: rgba(22, 19, 15, 0.35); }

.n-signin {
  background: var(--paper-raised);
  border-top: 3px solid var(--accent);
  padding: 30px 32px 26px;
  max-width: 26rem;
  text-align: center;
}
.n-signin__brand { margin: 0 0 14px; font-family: var(--font-serif); font-size: 1.75rem; letter-spacing: 0.04em; }
.n-signin__brand img { height: 42px; width: auto; margin: 0 auto; }
.n-signin h2 { font-size: 1.5rem; line-height: 1.2; }
.n-signin__lede { font-family: var(--font-sans); font-size: var(--fs-ui); color: var(--ink-soft); margin: 6px 0 18px; }
.n-signin__error {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: #9b1c1c;
  background: #fdf0ee;
  border: 1px solid #f2c9c2;
  padding: 8px 10px;
  margin: 0 0 14px;
  text-align: left;
}
.n-signin__form { text-align: left; display: grid; gap: 12px; }
.n-signin__field { display: grid; gap: 5px; font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); }
.n-signin__password { position: relative; display: block; }
.n-signin__password .n-input { padding-right: 96px; }
.n-signin__show {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  cursor: pointer;
}
.n-signin__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
}
.n-signin__row a { color: var(--accent-text); font-weight: 600; }
.n-signin__remember { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.n-signin__alt { font-family: var(--font-sans); font-size: var(--fs-ui); margin: 18px 0 0; color: var(--ink-soft); }
.n-signin__alt a { color: var(--accent-text); }

/* 6) ---------------------------------------------------------- e-paper ---- */
.n-editions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px;
  margin-top: 18px;
}
.n-edition {
  border: var(--rule-w) solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.n-edition__cover {
  aspect-ratio: 3 / 4;
  background: var(--paper-sunk);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.n-edition__cover img { width: 100%; height: 100%; object-fit: cover; }
.n-edition__cover span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  color: var(--ink-mute);
  text-align: center;
  padding: 12px;
}
.n-edition h3 { font-size: 1.0625rem; }

.n-reader { background: #201d1a; color: #f4f1ec; margin-top: 0; }
.n-reader__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #3a3530;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  flex-wrap: wrap;
}
.n-reader__bar .n-btn { border-color: #6d655c; background: transparent; color: #f4f1ec; }
.n-reader__bar .n-btn:hover { background: #f4f1ec; color: #201d1a; border-color: #f4f1ec; }
.n-reader__stage {
  min-height: 70vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 18px 0 26px;
}
.n-reader__stage iframe { width: 100%; min-height: 78vh; border: 0; background: #2c2822; }
.n-reader__pages { display: flex; gap: 6px; flex-wrap: wrap; }
.n-reader__page {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  padding: 5px 10px;
  border: 1px solid #4c463f;
  color: #d8d2ca;
}
.n-reader__page.is-active { background: #f4f1ec; color: #201d1a; border-color: #f4f1ec; }
.n-reader__locked {
  max-width: 560px;
  margin: 40px auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 30px;
  text-align: left;
}

/* 7) ------------------------------------------------------ forms / auth --- */
.n-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; padding: 34px 0 10px; }
.n-auth__aside { border-right: var(--rule-w) solid var(--rule); padding-right: 40px; }
.n-auth__card { border: 1px solid var(--ink); border-radius: 3px; background: var(--paper-raised); padding: 32px; }
.n-field { margin-bottom: 16px; }
.n-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.n-field__error { color: var(--down); font-size: var(--fs-meta); margin-top: 5px; }
.n-alert {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 12px 14px;
  font-size: var(--fs-ui);
  margin-bottom: 18px;
}
.n-alert--error { border-left-color: var(--down); background: #fbeceb; }
.n-alert--ok { border-left-color: var(--up); background: #eaf4ef; }

.n-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.n-plan { border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-raised); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.n-plan h3 { font-size: 1.25rem; }
.n-plan ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); color: var(--ink-soft); }
.n-plan li { padding: 5px 0; border-top: var(--rule-w) solid var(--rule-soft); }
.n-plan li:first-child { border-top: 0; }

/* 8) ----------------------------------------------------------- states ---- */
.n-empty {
  border: 1px dashed var(--rule);
  background: var(--paper-raised);
  padding: 34px 26px;
  text-align: center;
  color: var(--ink-soft);
}
.n-empty h2 { font-size: 1.25rem; margin-bottom: 6px; }
.n-empty p { margin: 0; font-size: var(--fs-ui); }

.n-skeleton { background: linear-gradient(90deg, var(--paper-sunk) 25%, #ece6dc 37%, var(--paper-sunk) 63%); background-size: 400% 100%; animation: n-shimmer 1.3s ease infinite; }
@keyframes n-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.n-loadmore { margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.n-loadmore .n-btn { min-width: 260px; }
.n-loadmore__status { margin: 0; font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--ink-mute); min-height: 1.2em; }
.n-loadmore__count { margin: 0; }
.n-loadmore__skeleton { width: 100%; display: grid; gap: 10px; }
.n-loadmore__skeleton .n-skeleton { display: block; height: 18px; }
.n-loadmore__skeleton .n-skeleton:nth-child(2) { width: 82%; }
.n-loadmore__skeleton .n-skeleton:nth-child(3) { width: 64%; }

.n-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 26px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui); }
.n-pagination a, .n-pagination span { padding: 8px 12px; border: 1px solid var(--rule); color: var(--ink-soft); }
.n-pagination .is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.n-pagination .is-disabled { color: var(--rule); }

.n-demo-note {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--accent-text);
  background: var(--accent-wash);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 7px 0;
  text-align: center;
}

/* 9) ------------------------------------------------------- responsive ---- */
@media (max-width: 1080px) {
  :root { --shell-pad: 32px; }
  .n-front { grid-template-columns: minmax(0, 1fr) 300px; }
  .n-front__rail {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--rule);
    padding: 0 0 18px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  .n-front__lead { padding: 0 20px 0 0; }
  .n-front--hal1 { grid-template-columns: minmax(0, 1fr); }
  .n-hal1 { padding-left: 0; }
  .n-world__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .n-mkt-summary { grid-template-columns: minmax(0, 1fr); }
  .n-world__tile:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .n-kanal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .n-kanal__cards > :nth-child(odd) { border-left: 0; padding-left: 0; }
  .n-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-promo__epaper { grid-column: 1 / -1; border-top: var(--rule-w) solid var(--rule); }
  .n-editions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .n-article { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .n-article__rail { border-left: 0; border-top: 2px solid var(--ink); padding: 18px 0 0; }
  .n-auth { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .n-auth__aside { border-right: 0; padding-right: 0; }
  .n-strip { grid-template-columns: minmax(0, 1fr); }
  .n-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-grid-4 > * { padding: 14px 14px; border-bottom: var(--rule-w) solid var(--rule); }
  .n-grid-4 > *:nth-child(2n) { border-right: 0; }
}

@media (max-width: 720px) {
  :root { --shell-pad: 16px; }
  .n-market__stamp { display: none; }
  /* The section strip scrolls horizontally by default; the "Kanal" button
     expands it into a wrapped list so every section is reachable. */
  .n-nav.is-open .n-nav__inner { flex-wrap: wrap; overflow: visible; }
  .n-nav.is-open .n-nav__link { flex: 1 0 45%; border-bottom-color: var(--rule-soft); }
  .n-nav.is-open .n-nav__spacer { display: none; }
  /* Search lives in the expanded panel on small screens, not in the strip. */
  .n-nav__cta { display: none; }
  .n-nav.is-open .n-nav__cta { display: block; margin: 10px 0; width: 100%; }
  .n-nav.is-open .n-nav__cta input { width: 100% !important; }
  .n-topstrip__links { display: none; }
  .n-mobilebar { display: flex; }
  .n-front { grid-template-columns: minmax(0, 1fr); }
  .n-front__rail { grid-template-columns: minmax(0, 1fr); }
  .n-front__lead { padding: 0; }
  .n-mkt-movers { grid-template-columns: minmax(0, 1fr); }
  .n-mkt-date { align-items: flex-start; text-align: left; }
  .n-mkt-big { font-size: 2rem; }
  .n-mkt-table .c-no { display: none; }
  .n-mkt-table .c-code { position: sticky; left: 0; background: var(--paper); z-index: 1; box-shadow: 1px 0 0 var(--rule); }
  .n-mkt-table thead th { position: static; top: auto; }
  .n-mkt-table thead .c-code { position: sticky; top: auto; left: 0; z-index: 2; }
  .n-mkt-tablewrap { margin: 0 -16px; overflow-x: auto; }
  .n-world__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-world__tile:nth-child(3n+1) { padding-left: 14px; border-left: var(--rule-w) solid var(--rule); }
  .n-world__tile:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .n-world__stamp { display: none; }
  .n-hal1__top, .n-front--dua-potret .n-hal1__top, .n-hal1__bottom { grid-template-columns: minmax(0, 1fr); }
  .n-hal1__photo { order: -1; padding: 0 0 14px; }
  .n-front--dua-potret .n-hal1__photo img { aspect-ratio: 3 / 2; }
  .n-hal1__stories { padding-right: 0; border-right: 0 !important; }
  .n-hal1__bottom > * + * { border-left: 0; padding-left: 0; border-top: 1px dotted var(--ink-mute); margin-top: 12px; padding-top: 12px; }
  .n-hal1__bottom > :first-child { padding-right: 0; }
  .n-hal1__view--thumb { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .n-kanal__bottom, .n-kanal__opini { grid-template-columns: minmax(0, 1fr) !important; }
  .n-kanal__bottom > * + * { border-left: 0; padding-left: 0; border-top: 1px dotted var(--ink-mute); margin-top: 12px; padding-top: 12px; }
  .n-kanal__bottom > :not(:last-child), .n-kanal__opinions { padding-right: 0; }
  .n-kanal__opinions { border-right: 0; }
  .n-kanal__editorial { padding: 14px 0 0; margin-top: 14px; border-top: 2px solid var(--ink); }
  .n-hal1__view-img { width: 96px; }
  .n-front__side {
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding: 18px 0 0;
    margin-top: 22px;
  }
  .n-promo { grid-template-columns: minmax(0, 1fr); }
  .n-promo__item { border-right: 0; border-bottom: var(--rule-w) solid var(--rule); }
  .n-grid-3, .n-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .n-grid-3 > *, .n-grid-4 > * {
    padding: 14px 0;
    border-right: 0;
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .n-card--wide { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .n-editions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .n-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .n-reader__stage iframe { min-height: 64vh; }
}

@media print {
  .n-nav, .n-topstrip, .n-footer, .n-gate, .n-article__tools, .n-progress { display: none !important; }
  body.n-body { background: #fff; }
}