/* ============================================================
   FINISIT — LEARN PAGE  (NisitSornGraph School of the Tide)
   ============================================================ */

/* ---- Hero ---- */
.learn-hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--sp-9)) 0 var(--sp-9);
  overflow: hidden;
}
.learn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Pure dark canvas with a subtle gold accent in the corner — matches the
   * shop / finsight aesthetic. Earlier version layered a blue radial
   * (rgba(31,73,89,0.12)) which made the whole page feel "navy" while the
   * rest of the site is ink-void. */
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(212,184,135,0.08), transparent 60%),
    radial-gradient(500px 300px at 5% 90%, rgba(212,184,135,0.04), transparent 60%);
  pointer-events: none;
}
.learn-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 768px) {
  .learn-hero__inner { grid-template-columns: 1fr; }
}
.learn-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.learn-hero__eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--gold);
}
.learn-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: var(--sp-6);
}
.learn-hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.learn-hero__lead {
  font-size: var(--text-lg);
  color: var(--ivory-muted);
  max-width: 48ch;
  margin-bottom: var(--sp-8);
  line-height: 1.7;
}
.learn-hero__cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.learn-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.learn-stat {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.learn-stat__num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--gold);
  /* Bumped from 1 — serif numerals + potential descenders need ~15% extra
     line height; padding-bottom adds safe-area for italic ligatures. */
  line-height: 1.15;
  padding-bottom: 0.05em;
  margin-bottom: var(--sp-1);
}
.learn-stat__label {
  font-size: var(--text-sm);
  color: var(--ivory-muted);
}

/* ---- Path Selector ---- */
.learn-paths {
  padding: var(--sp-8) 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.learn-paths__head {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.learn-paths__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  margin-bottom: var(--sp-3);
}
.learn-paths__head p {
  color: var(--ivory-muted);
  font-size: var(--text-md);
}
.path-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
.path-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-luxe);
  text-align: center;
}
.path-tab:hover {
  border-color: var(--border-gold);
  background: rgba(212,184,135,0.05);
}
.path-tab.is-active {
  border-color: var(--gold);
  background: rgba(212,184,135,0.09);
  box-shadow: 0 0 24px rgba(212,184,135,0.10);
}
.path-tab__icon {
  font-size: 1.6rem;
}
.path-tab__name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--text);
  font-weight: 300;
}
.path-tab__sub {
  font-size: var(--text-xs);
  color: var(--ivory-muted);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.path-tab.is-active .path-tab__name { color: var(--gold); }

/* ---- Course Grid ---- */
.learn-grid-section {
  padding: var(--sp-7) 0 var(--sp-8);
}
.learn-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.learn-section-head h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
}
.learn-section-head p {
  color: var(--ivory-muted);
  font-size: var(--text-sm);
  margin-top: var(--sp-2);
}
.learn-filter {
  display: flex;
  gap: var(--sp-2);
}
.filter-btn {
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: .05em;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ivory-muted);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-luxe);
}
.filter-btn:hover,
.filter-btn.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,184,135,0.06);
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
}

/* ---- Course Card ---- */
.course-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-luxe);
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(212,184,135,0.08);
}
.course-card__thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
/* Colour themes per course */
.course-card__thumb--gold   { background: linear-gradient(135deg, rgba(212,184,135,0.25) 0%, rgba(139,111,63,0.15) 100%); }
.course-card__thumb--blue   { background: linear-gradient(135deg, rgba(31,73,89,0.35) 0%, rgba(96,165,250,0.15) 100%); }
.course-card__thumb--green  { background: linear-gradient(135deg, rgba(5,150,105,0.20) 0%, rgba(52,211,153,0.10) 100%); }
.course-card__thumb--red    { background: linear-gradient(135deg, rgba(220,38,38,0.18) 0%, rgba(252,165,165,0.10) 100%); }
.course-card__thumb--purple { background: linear-gradient(135deg, rgba(139,92,246,0.20) 0%, rgba(196,181,253,0.10) 100%); }
.course-card__thumb--teal   { background: linear-gradient(135deg, rgba(20,184,166,0.20) 0%, rgba(153,246,228,0.08) 100%); }
.course-card__thumb--orange { background: linear-gradient(135deg, rgba(249,115,22,0.20) 0%, rgba(254,215,170,0.10) 100%); }
.course-card__thumb--indigo { background: linear-gradient(135deg, rgba(79,70,229,0.22) 0%, rgba(199,210,254,0.08) 100%); }
/* Grid pattern overlay */
.course-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,184,135,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,184,135,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

.course-card__badge-wrap {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  gap: var(--sp-1);
  z-index: 1;
}
.course-badge {
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.course-badge--free  { background: rgba(5,150,105,0.25); color: #34D399; border: 1px solid rgba(52,211,153,0.3); }
.course-badge--pro   { background: rgba(212,184,135,0.18); color: var(--gold); border: 1px solid rgba(212,184,135,0.3); }
.course-badge--nft   { background: rgba(139,92,246,0.20); color: #A78BFA; border: 1px solid rgba(139,92,246,0.35); }

.course-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--text);
  margin-bottom: var(--sp-2);
  line-height: 1.35;
}
.course-card__subtitle {
  font-size: var(--text-sm);
  color: var(--ivory-muted);
  margin-bottom: var(--sp-4);
  flex: 1;
}
.course-card__meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  letter-spacing: .03em;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.course-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.course-card__progress {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin-top: var(--sp-3);
  overflow: hidden;
}
.course-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 1px;
  transition: width 0.6s var(--ease-luxe);
}

/* Locked state overlay */
.course-card--locked .course-card__thumb::before {
  content: '🔒';
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  font-size: 1rem;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.course-card--locked {
  opacity: 0.72;
}
.course-card--locked:hover {
  opacity: 0.90;
}

/* Featured card (spans 2 cols) */
.course-card--featured {
  grid-column: span 2;
  flex-direction: row;
}
.course-card--featured .course-card__thumb {
  width: 200px;
  min-width: 200px;
  height: auto;
}
@media (max-width: 700px) {
  .course-card--featured {
    grid-column: span 1;
    flex-direction: column;
  }
  .course-card--featured .course-card__thumb {
    width: 100%;
    height: 140px;
  }
}
.course-card--featured .course-card__body {
  padding: var(--sp-6);
}
.course-card--featured .course-card__title {
  font-size: 1.4rem;
}
.course-card--featured .course-badge--featured {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: #0B0D12;
  border: none;
  font-weight: 700;
}

/* ---- How It Works ---- */
.how-it-works {
  padding: var(--sp-8) 0;
}
.how-it-works .section-head {
  margin-bottom: var(--sp-7);
}
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  position: relative;
}
@media (max-width: 640px) {
  .hiw-steps { grid-template-columns: 1fr; }
}
/* Connecting line */
.hiw-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(33.33% - 24px);
  right: calc(33.33% - 24px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  pointer-events: none;
}
@media (max-width: 640px) {
  .hiw-steps::before { display: none; }
}
.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.hiw-step__num {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
  background: var(--surface);
  flex-shrink: 0;
}
.hiw-step__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--text);
}
.hiw-step__desc {
  font-size: var(--text-sm);
  color: var(--ivory-muted);
  line-height: 1.65;
  max-width: 28ch;
}

/* ---- Instructors ---- */
.learn-instructors {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--border);
}
.instructor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.instructor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-align: center;
  transition: all var(--dur-base) var(--ease-luxe);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.instructor-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 24px rgba(212,184,135,0.06);
}
.instructor-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--gold);
  border: 2px solid var(--border-gold);
  background: radial-gradient(circle, rgba(212,184,135,0.12), rgba(212,184,135,0.04));
}
.instructor-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.instructor-card__role {
  font-size: var(--text-xs);
  color: var(--gold);
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.instructor-card__bio {
  font-size: var(--text-sm);
  color: var(--ivory-muted);
  line-height: 1.6;
}
.instructor-card__courses {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--ivory-dim);
}

/* ---- Waitlist Banner ---- */
.learn-cta {
  padding: var(--sp-8) 0 var(--sp-10);
}
.learn-cta__card {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.learn-cta__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 50% -10%, rgba(212,184,135,0.10), transparent 60%);
  pointer-events: none;
}
.learn-cta__card h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  margin-bottom: var(--sp-4);
}
.learn-cta__card h2 em { font-style: italic; color: var(--gold); }
.learn-cta__card p {
  color: var(--ivory-muted);
  font-size: var(--text-md);
  max-width: 52ch;
  margin: 0 auto var(--sp-8);
  line-height: 1.7;
}
.learn-cta__badges {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.learn-cta__badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(212,184,135,0.08);
  border: 1px solid rgba(212,184,135,0.18);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  color: var(--ivory-muted);
  font-family: var(--font-mono);
}
.learn-cta__badge span { color: var(--gold); }

/* ---- Light mode overrides ---- */
[data-theme="light"] .learn-stat {
  background: rgba(255,255,255,0.55);
  border-color: rgba(212,184,135,0.30);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 16px rgba(60,40,10,0.07);
}
[data-theme="light"] .path-tab {
  background: rgba(255,255,255,0.45);
  border-color: rgba(139,111,63,0.18);
}
[data-theme="light"] .path-tab:hover,
[data-theme="light"] .path-tab.is-active {
  background: rgba(255,255,255,0.72);
  border-color: var(--gold-deep);
}
[data-theme="light"] .path-tab.is-active .path-tab__name { color: var(--gold-deep); }
[data-theme="light"] .course-card {
  background: rgba(255,255,255,0.50);
  border-color: rgba(212,184,135,0.22);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 20px rgba(60,40,10,0.07);
}
[data-theme="light"] .course-card:hover {
  background: rgba(255,255,255,0.80);
  border-color: rgba(139,111,63,0.50);
  box-shadow: 0 12px 40px rgba(60,40,10,0.12), 0 0 24px rgba(139,111,63,0.08);
}
[data-theme="light"] .course-card__title  { color: var(--text); }
[data-theme="light"] .course-card__subtitle { color: var(--ivory-muted); }
[data-theme="light"] .course-card__meta   { color: #6B5A3A; border-top-color: rgba(139,111,63,0.14); }
[data-theme="light"] .hiw-step__num {
  background: rgba(255,255,255,0.65);
  border-color: var(--gold-deep);
}
[data-theme="light"] .instructor-card {
  background: rgba(255,255,255,0.50);
  border-color: rgba(212,184,135,0.22);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 20px rgba(60,40,10,0.07);
}
[data-theme="light"] .instructor-card:hover {
  background: rgba(255,255,255,0.80);
  border-color: rgba(139,111,63,0.50);
}
[data-theme="light"] .instructor-card__bio { color: var(--ivory-muted); }
[data-theme="light"] .learn-cta__card {
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(249,245,238,0.50));
  border-color: rgba(212,184,135,0.40);
  box-shadow: 0 16px 48px rgba(60,40,10,0.10);
}
[data-theme="light"] .learn-cta__badge {
  background: rgba(139,111,63,0.07);
  border-color: rgba(139,111,63,0.20);
  color: var(--ivory-muted);
}
[data-theme="light"] .filter-btn {
  border-color: rgba(139,111,63,0.22);
  color: var(--ivory-muted);
}
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.is-active {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  background: rgba(139,111,63,0.06);
}
[data-theme="light"] .learn-hero__lead { color: var(--ivory-muted); }
[data-theme="light"] .hiw-step__desc   { color: var(--ivory-muted); }
[data-theme="light"] .learn-cta__card p { color: var(--ivory-muted); }

/* ============================================================
   School + Bulletin merged page — section nav, bulletin block,
   articles block. Articles reuse .article-card / .journal-grid /
   .tag styles from pages.css.
   ============================================================ */

.school-nav {
  position: sticky;
  top: var(--nav-height, 64px);
  z-index: 50;
  background: rgba(11, 13, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.school-nav__inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 8px var(--gutter);
}
.school-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ivory-muted);
  text-decoration: none;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.school-nav__link:hover {
  color: var(--gold);
  background: rgba(212, 184, 135, 0.06);
}
.school-nav__pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: rgba(212, 184, 135, 0.12);
  color: var(--gold);
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid rgba(212, 184, 135, 0.24);
  margin-left: 2px;
}

.school-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-5);
}
.school-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  margin: 0 0 var(--sp-3);
  color: var(--ivory);
  padding-bottom: 0.06em;
}
.school-section-head h2 em {
  font-style: italic;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;
  display: inline-block;
}
.school-section-head p {
  color: var(--ivory-muted);
  font-size: var(--text-md);
  line-height: 1.65;
  margin: 0;
}

/* ===== Daily Bulletin (Tradetongkam — live desk feel) ===== */
.school-bulletin {
  padding: var(--sp-7, 3rem) 0 var(--sp-7, 3rem);
  border-top: 1px solid var(--border-soft);
  /* No tinted background — inherits the site's ink-void from body. */
}
.school-bulletin .school-section-head {
  margin-bottom: var(--sp-5);
}
.school-bulletin .school-section-head h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

/* Live ticker strip */
.bulletin-ticker {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.bulletin-ticker::-webkit-scrollbar { display: none; }
.bulletin-ticker__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FF5A5A;
  font-weight: 600;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.bulletin-ticker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF5A5A;
  animation: bulletin-pulse 1.6s ease-in-out infinite;
}
@keyframes bulletin-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,90,90,0.55); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(255,90,90,0); }
}
.bulletin-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory-muted);
}
.bulletin-ticker__pair { color: var(--ivory-dim); letter-spacing: 0.04em; }
.bulletin-ticker__price { color: var(--ivory); font-weight: 500; }
.bulletin-ticker__chg.up { color: #4ADE80; }
.bulletin-ticker__chg.dn { color: #FF6B6B; }
.bulletin-ticker__time {
  margin-left: auto;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Top row: Suggestions (left) + Find an article (right) — equal columns
 * so neither panel feels secondary. Bottom row (.bulletin-tweets) sits
 * below as its own full-width section. */
.bulletin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: var(--sp-6);
  align-items: stretch;
}

/* Shared panel chrome — both .bulletin-suggest and .bulletin-find use it */
.bulletin-suggest,
.bulletin-find {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
}
.bulletin-find {
  /* Tightened: previously gap:10px / padding:14px gave a "compressed
   * rows detached from the right edge" feel. Now the header inset
   * matches the picks panel and inner controls breathe edge-to-edge. */
  gap: 12px;
  padding: 0;
  background: rgba(11, 13, 18, 0.30);
}
.bulletin-find > .bulletin-library__search,
.bulletin-find > .bulletin-library__sort,
.bulletin-find > .bulletin-library__tags {
  margin: 0 14px;
}
.bulletin-find > .bulletin-library__list {
  margin: 0 14px 14px;
}

/* Shared panel header (one consistent style for Suggested / Find / Tweets) */
.bulletin-panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(11, 13, 18, 0.45);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
}
.bulletin-find > .bulletin-panel-h {
  /* Header sits flush with the panel edges — no negative-margin trick
   * needed now that .bulletin-find itself has padding:0. */
  margin: 0 0 12px;
}
.bulletin-panel-h__bullet,
.bulletin-panel-h__icon { font-size: 12px; line-height: 1; }
.bulletin-panel-h__count {
  margin-left: auto;
  color: var(--ivory-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
}
/* Light mode: gold on cream is too washed out for the panel chrome.
 * Use the deep-gold accent + a darker top stripe so the header reads
 * cleanly against the white panel beneath. */
[data-theme="light"] .bulletin-panel-h {
  background: rgba(60, 45, 20, 0.06);
  color: #6B501C;
  border-bottom-color: rgba(60, 45, 20, 0.18);
}
[data-theme="light"] .bulletin-panel-h__count {
  color: var(--ivory-muted);
}

/* 6 hero picks — 2×3 grid of medium cards filling the suggestion panel */
.bulletin-picks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px;
  flex: 1;
}
.bulletin-picks[aria-busy="true"] {
  min-height: 320px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
}
.bulletin-picks__empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}
.bulletin-pick {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.bulletin-pick:hover {
  border-color: var(--gold);
  background: rgba(212, 184, 135, 0.04);
  transform: translateY(-2px);
}
.bulletin-pick__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ink-graphite, #1F2530);
}
.bulletin-pick__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bulletin-pick__thumb--blank {
  background: linear-gradient(135deg, rgba(212,184,135,0.12), rgba(11,13,18,0.85));
}
.bulletin-pick__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.bulletin-pick__cat {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
}
.bulletin-pick__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ivory);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bulletin-pick__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
}
.bulletin-pick__meta .dotsep { color: var(--ivory-dim); }

/* Search field */
.bulletin-library__search {
  position: relative;
  display: flex;
  align-items: center;
}
.bulletin-library__search .journal-search__icon {
  position: absolute;
  left: 11px;
  color: var(--ivory-dim);
  pointer-events: none;
}
.bulletin-library__search input[type="search"] {
  width: 100%;
  padding: 9px 36px 9px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.bulletin-library__search input[type="search"]::placeholder { color: var(--ivory-dim); }
.bulletin-library__search input[type="search"]:focus {
  border-color: var(--gold);
  background: rgba(212, 184, 135, 0.04);
}
.bulletin-library__search .journal-search__hint {
  position: absolute;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ivory-dim);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.02);
}

/* Sort tabs — compact pills */
.bulletin-library__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bulletin-library__sort .school-sort__btn {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--ivory-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulletin-library__sort .school-sort__btn:hover {
  color: var(--ivory);
  border-color: rgba(212, 184, 135, 0.30);
}
.bulletin-library__sort .school-sort__btn.is-active {
  background: rgba(212, 184, 135, 0.10);
  border-color: var(--gold);
  color: var(--gold);
}
/* Light mode: solid filled active state for proper contrast — gold on
 * cream is too soft for an active-tab indicator. */
[data-theme="light"] .bulletin-library__sort .school-sort__btn.is-active {
  background: #6B501C;
  border-color: #6B501C;
  color: #FFFFFF;
}
[data-theme="light"] .bulletin-library__sort .school-sort__btn {
  background: #FFFFFF;
  border-color: rgba(60, 45, 20, 0.18);
  color: var(--ivory-muted);
}
[data-theme="light"] .bulletin-library__sort .school-sort__btn:hover {
  color: var(--ivory);
  border-color: rgba(60, 45, 20, 0.40);
}
/* Active filter pill — same treatment so the toggle group reads
 * clearly in light mode. */
[data-theme="light"] .bulletin-library__tags .tag.is-active {
  background: #6B501C;
  border-color: #6B501C;
  color: #FFFFFF;
}

/* Category pills — horizontal scroll if too many */
.bulletin-library__tags {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding-bottom: 2px;
  margin: 0;
  scrollbar-width: thin;
}
.bulletin-library__tags::-webkit-scrollbar { height: 4px; }
.bulletin-library__tags::-webkit-scrollbar-thumb { background: rgba(212, 184, 135, 0.20); border-radius: 4px; }
.bulletin-library__tags .tag {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 10.5px;
}

/* Scrollable article list — full-column height inside the Find panel */
.bulletin-library__list {
  flex: 1;
  min-height: 380px;
  max-height: 540px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.bulletin-library__list::-webkit-scrollbar { width: 6px; }
.bulletin-library__list::-webkit-scrollbar-thumb { background: rgba(212, 184, 135, 0.20); border-radius: 6px; }
.bulletin-library__list::-webkit-scrollbar-thumb:hover { background: rgba(212, 184, 135, 0.35); }

/* Compact row — overrides the wider .article-row defaults so it fits
 * inside the narrow panel. */
.bulletin-library__list .article-row {
  display: grid;
  grid-template-columns: 28px 64px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}
.bulletin-library__list .article-row:hover {
  background: rgba(212, 184, 135, 0.04);
  border-color: var(--border-soft);
  transform: none;
}
.bulletin-library__list .article-row__num {
  font-size: 10px;
}
.bulletin-library__list .article-row__thumb {
  width: 64px; height: 40px;
  border-radius: 6px;
  overflow: hidden;
}
.bulletin-library__list .article-row__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bulletin-library__list .article-row__cat {
  font-size: 9px;
  margin-bottom: 2px;
}
.bulletin-library__list .article-row__title {
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bulletin-library__list .article-row__excerpt {
  display: none;  /* too tight for excerpts in the side panel */
}
.bulletin-library__list .article-row__time {
  font-size: 9.5px;
}
.bulletin-library__list .article-row__arrow {
  font-size: 14px;
}

.bulletin-library__empty {
  margin: 24px 16px;
  text-align: center;
}

/* Tradetongkam latest tweets — its own full-width row below the
 * suggestions+find row. The X embed has its own vertical scroll, so the
 * card stays at a fixed height and reads as a discrete section. */
.bulletin-tweets {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.bulletin-tweets__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(11, 13, 18, 0.45);
}
.bulletin-tweets__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bulletin-tweets__logo {
  color: var(--ivory);
  flex-shrink: 0;
  background: var(--ink-void);
  padding: 6px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
}
.bulletin-tweets__id { line-height: 1.25; }
.bulletin-tweets__name {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ivory);
}
.bulletin-tweets__handle {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
}
.bulletin-tweets__follow {
  padding: 7px 16px;
  background: var(--ivory);
  color: var(--ink-void);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.bulletin-tweets__follow:hover { opacity: 0.88; }

/* ─── Tradetongkam Notebook — single-column journal layout ───────────
 * The "Latest from X" magazine grid never read well because tweet text
 * is short. Reframed as a curated short-notes column: numbered list,
 * kind tags (setup/macro/risk/mindset), hashtag chips, generous breath.
 * Reads like a trader's journal, not a Twitter mock-up.
 */
.bulletin-notebook {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.bulletin-notebook__h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.bulletin-notebook__title { min-width: 0; }
.bulletin-notebook__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.bulletin-notebook__title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.bulletin-notebook__title h3 em { font-style: italic; color: var(--gold); }
.bulletin-notebook__sub {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ivory-muted);
}
.bulletin-notebook__follow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bulletin-notebook__follow:hover {
  border-color: var(--gold);
  background: rgba(212, 184, 135, 0.06);
  color: var(--gold);
}

/* List */
.notebook-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notebook-row { border-top: 1px solid var(--border-soft); }
.notebook-row:first-child { border-top: 0; }
.notebook-row__inner {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ivory);
  position: relative;
  transition: background 0.15s;
}
.notebook-row__inner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.notebook-row__inner:hover { background: rgba(212, 184, 135, 0.025); }
.notebook-row__inner:hover::before { transform: scaleY(1); }

/* Numbered ordinal */
.notebook-row__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  opacity: 0.45;
  letter-spacing: -0.02em;
  padding-top: 4px;
  transition: opacity 0.18s;
}
.notebook-row__inner:hover .notebook-row__num { opacity: 0.85; }

.notebook-row__body { min-width: 0; }

/* Meta row */
.notebook-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ivory-dim);
}
.notebook-row__time { text-transform: uppercase; }
.notebook-row__sep { color: var(--ivory-dim); opacity: 0.5; }
.notebook-row__stats { margin-left: auto; color: var(--ivory-dim); }

/* Kind pill — coloured outline by kind */
.notebook-row__kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid;
  background: transparent;
}
.notebook-row__kind.is-setup { color: #C09B5A; border-color: rgba(192, 155, 90, 0.40); }
.notebook-row__kind.is-macro { color: #5FA3C0; border-color: rgba(95, 163, 192, 0.40); }
.notebook-row__kind.is-risk  { color: #C95E5E; border-color: rgba(201, 94, 94, 0.40); }
.notebook-row__kind.is-mind  { color: #8FB87C; border-color: rgba(143, 184, 124, 0.40); }

/* Body */
.notebook-row__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ivory);
  white-space: pre-wrap;
}

/* Hashtag chips */
.notebook-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.notebook-row__tags span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ivory-muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* "↗" */
.notebook-row__more {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ivory-dim);
  transition: transform 0.18s, color 0.18s;
}
.notebook-row__inner:hover .notebook-row__more {
  color: var(--gold);
  transform: translate(2px, -2px);
}

/* Skeleton */
.notebook-row--skeleton {
  height: 96px;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.025) 30%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.025) 70%);
  background-size: 200% 100%;
  animation: notebook-shimmer 1.6s linear infinite;
}
@keyframes notebook-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Bottom CTA */
.bulletin-notebook__more {
  display: block;
  text-align: center;
  padding: 16px 18px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-decoration: none;
  transition: background 0.15s;
}
.bulletin-notebook__more:hover { background: rgba(212, 184, 135, 0.05); }

@media (max-width: 720px) {
  .bulletin-notebook__h { padding: 18px 16px 14px; flex-wrap: wrap; }
  .notebook-row__inner { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 16px; }
  .notebook-row__more { display: none; }
  .notebook-row__num { font-size: 22px; }
  .notebook-row__text { font-size: 14px; }
}

/* Light mode */
[data-theme="light"] .bulletin-notebook { background: #FFFFFF; border-color: rgba(60, 45, 20, 0.16); }
[data-theme="light"] .notebook-row { border-top-color: rgba(60, 45, 20, 0.10); }
[data-theme="light"] .notebook-row__inner:hover { background: #FAF6EE; }
[data-theme="light"] .notebook-row__num { color: #6B501C; }
[data-theme="light"] .bulletin-notebook__title h3 em,
[data-theme="light"] .bulletin-notebook__eyebrow,
[data-theme="light"] .bulletin-notebook__more { color: #6B501C; }
[data-theme="light"] .bulletin-notebook__follow:hover { background: rgba(60, 45, 20, 0.06); border-color: #6B501C; color: #6B501C; }

/* ============================================================
   NISITSORNGRAPH — REUTERS DIRECTION
   News authority. Photo-led, straight serif (NOT italic — italic
   is fashion register; news authority lives in roman serif). Mono
   UPPERCASE byline. Restraint with gold accent.
   ============================================================ */

body[data-page="learn"] {
  --brand:        var(--ns-gold);
  --brand-glow:   var(--ns-glow);
  --brand-border: var(--ns-border);
}

.ns-masthead {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  padding: var(--sp-3) 0;
}
.ns-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.ns-masthead__brand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ivory);
}
.ns-masthead__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--ivory-dim);
}

.ns-hero {
  padding: clamp(var(--sp-6), 6vw, var(--sp-9)) 0 clamp(var(--sp-7), 8vw, var(--sp-10));
  background: var(--bg);
}
.ns-hero__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: stretch;
}
@media (max-width: 900px) {
  .ns-hero__grid { grid-template-columns: 1fr; }
}

.ns-hero__lead {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--sp-5);
  transition: opacity var(--dur-base) var(--ease-out);
}
.ns-hero__lead:hover { opacity: 0.92; }
.ns-hero__lead:hover .ns-hero__lead-h {
  text-decoration: underline;
  text-decoration-color: var(--ns-gold);
  text-underline-offset: 4px;
}

.ns-hero__lead-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-charcoal);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.ns-hero__lead-img img,
.ns-hero__lead-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ns-hero__lead-body { display: flex; flex-direction: column; gap: var(--sp-3); }

.ns-hero__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ns-gold);
}

.ns-hero__lead-h {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin: 0;
}

.ns-hero__lead-excerpt {
  font-size: var(--text-md);
  color: var(--ivory-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ns-hero__byline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: var(--ivory-dim);
  margin-top: var(--sp-2);
}
.ns-byline__author { color: var(--ivory-soft); text-transform: uppercase; }
.ns-byline__sep { opacity: 0.5; }
.ns-byline__time { text-transform: uppercase; }
.ns-byline__read { text-transform: uppercase; }

.ns-hero__subs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.ns-hero__sub {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: opacity var(--dur-base) var(--ease-out);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}
.ns-hero__sub:last-child { border-bottom: 0; padding-bottom: 0; }
.ns-hero__sub:hover { opacity: 0.92; }
.ns-hero__sub:hover .ns-hero__sub-h {
  text-decoration: underline;
  text-decoration-color: var(--ns-gold);
  text-underline-offset: 3px;
}

.ns-hero__sub-img {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ink-charcoal);
  overflow: hidden;
}
.ns-hero__sub-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ns-hero__sub-img--blank {
  background: linear-gradient(135deg, var(--ink-charcoal), var(--ink-graphite));
}

.ns-hero__sub-body { display: flex; flex-direction: column; gap: var(--sp-2); }

.ns-hero__sub-h {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ns-tabs {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 0;
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ns-tabs__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ns-tabs__inner::-webkit-scrollbar { display: none; }

.ns-tab {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ivory-muted);
  background: transparent;
  border: 0;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-base) var(--ease-out);
}
.ns-tab:hover { color: var(--ivory); }
.ns-tab.is-active { color: var(--ivory); }
.ns-tab.is-active::after {
  content: '';
  position: absolute;
  left: var(--sp-5); right: var(--sp-5);
  bottom: -1px;
  height: 2px;
  background: var(--ns-gold);
}

/* Restraint pass: gold reserved for premium/locked content on a
 * Reuters page; demote bulletin eyebrow gold to ivory-muted */
body[data-page="learn"] .school-section-head .eyebrow {
  color: var(--ivory-muted);
}

/* Light theme */
[data-theme="light"] .ns-masthead__brand { color: var(--ink-void); }
[data-theme="light"] .ns-hero__lead-h,
[data-theme="light"] .ns-hero__sub-h { color: var(--ink-void); }
[data-theme="light"] .ns-byline__author { color: var(--ink-void); }
[data-theme="light"] .ns-tabs { background: rgba(250, 246, 238, 0.92); }
[data-theme="light"] .ns-tab.is-active { color: var(--ink-void); }

/* Thai locale */
:root[lang="th"] .ns-hero__lead-h em,
:root[lang="th"] .ns-hero__sub-h em { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .ns-hero__lead, .ns-hero__sub { transition: none; }
}

/* ── Tools for Learners (Wave 59) — index into /tools.html from NisitSornGraph
 *
 * Layout: featured Health Check card on the left, 5 calculator cards stacked
 * (or 2-col) on the right. Stacks vertically below 900px.
 */
.learn-tools-section {
  padding: clamp(48px, 8vw, 96px) 0;
}
.learn-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-5);
  max-width: 1080px;
  margin: 0 auto;
}
.learn-tools-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-content: start;
}
.learn-tool-card {
  display: block;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: var(--sp-5);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.learn-tool-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.04);
}
.learn-tool-card__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.learn-tool-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ivory);
  margin: 0 0 6px;
  letter-spacing: var(--tracking-tight);
}
.learn-tool-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ivory-muted);
  margin: 0;
}
.learn-tool-card__cta {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.learn-tool-card--featured {
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(212,184,135,0.06), rgba(255,255,255,0.02));
  border-color: rgba(212,184,135,0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}
.learn-tool-card--featured h3 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  margin-top: var(--sp-3);
}
.learn-tool-card--featured p {
  font-size: 15px;
  line-height: 1.6;
  margin: var(--sp-3) 0 0;
}
.learn-tool-card--featured .learn-tool-card__icon {
  font-size: 40px;
}
.learn-tool-card__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(212,184,135,0.12);
  border: 1px solid rgba(212,184,135,0.3);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

@media (max-width: 900px) {
  .learn-tools-grid {
    grid-template-columns: 1fr;
  }
  .learn-tools-stack {
    grid-template-columns: 1fr;
  }
  .learn-tool-card--featured { min-height: 0; }
}