/* KORISE — korise.co | NYT × Monocle Editorial */

:root {
  --black: #121212;
  --dark: #1a1a1a;
  --charcoal: #333;
  --text: #444;
  --text-mid: #666;
  --text-light: #999;
  --rule: #dfdfdf;
  --rule-light: #eee;
  --bg: #fff;
  --bg-warm: #f7f7f5;
  --accent: #e64b3c;
  --green: #1a7a50;
  --blue: #2b6cb0;
  --wine: #8b4a4a;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--charcoal); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
::selection { background: rgba(230,75,60,0.1); }

/* ── MASTHEAD ── */
.masthead {
  background: var(--bg);
  text-align: center;
  padding: 24px 24px 16px;
  border-bottom: 2px solid var(--black);
}
.masthead img { height: 52px; }
.masthead-sub {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--text-light);
  margin-top: 8px;
}

/* ── DATE BAR ── */
.date-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 11px;
  color: var(--text-light);
  border-bottom: 1px solid var(--rule-light);
}

/* ── NAV ── */
.main-nav {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}
.nav-inner {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.nav-inner a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 13px 18px;
  border-right: 1px solid var(--rule-light);
  transition: color 0.2s;
}
.nav-inner a:last-child { border-right: none; }
.nav-inner a:hover { color: var(--accent); }
.mob-toggle { display: none; background: none; border: none; cursor: pointer; padding: 13px 18px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--charcoal); width: 100%; }

/* ── WRAP ── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── CATEGORY LABELS ── */
.cat { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px; display: inline-block; }
.cat.voices { color: var(--accent); }
.cat.culture { color: var(--wine); }
.cat.capital { color: var(--green); }
.cat.futures { color: var(--blue); }

/* ── HEADLINES ── */
.hl { font-family: var(--serif); font-weight: 700; color: var(--black); line-height: 1.22; transition: color 0.2s; }
a:hover .hl { color: var(--accent); }
.hl-xl { font-size: 30px; }
.hl-lg { font-size: 23px; }
.hl-md { font-size: 19px; }
.hl-sm { font-size: 16.5px; }

.summary { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin: 8px 0 10px; }
.byline { font-size: 11px; color: var(--text-light); }
.byline b { color: var(--text-mid); font-weight: 600; }
.read-time { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-top: 6px; }

/* ── HERO 3-COL ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.hero-left { padding: 28px 24px 28px 0; border-right: 1px solid var(--rule); }
.hero-center { padding: 28px 24px; border-right: 1px solid var(--rule); }
.hero-right { padding: 28px 0 28px 24px; }
.side-item { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-light); }
.side-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.feat-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid var(--rule-light);
  overflow: hidden;
}
.feat-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-img span { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--text-light); text-align: center; padding: 16px; }
.side-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 8px 0; border: 1px solid var(--rule-light); }
.story-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 12px; border: 1px solid var(--rule-light); }
.about-photo { width: 100%; margin-top: 20px; border: 1px solid var(--rule-light); }

/* ── TICKER ── */
.ticker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.ticker-badge { background: var(--accent); color: white; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; white-space: nowrap; }
.ticker-items { display: flex; gap: 24px; color: var(--text-mid); overflow: hidden; }
.ticker-items strong { color: var(--charcoal); font-weight: 600; }

/* ── SECTION BAR ── */
.sec-bar { display: flex; align-items: center; gap: 12px; padding-top: 36px; margin-bottom: 20px; }
.sec-title { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--black); white-space: nowrap; }
.sec-rule { flex: 1; height: 1px; background: var(--rule); }

/* ── STORIES GRID ── */
.stories-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.story-cell { padding: 20px 20px; border-right: 1px solid var(--rule); }
.story-cell:last-child { border-right: none; }

/* ── PILLARS ── */
.pillars { background: var(--black); padding: 48px 0; }
.pillars-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 24px; }
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.1); }
.pillar { padding: 28px 20px; border-right: 1px solid rgba(255,255,255,0.06); }
.pillar:last-child { border-right: none; }
.pillar-name { font-family: var(--serif); font-size: 20px; font-weight: 700; color: white; margin-bottom: 3px; }
.pillar-sub { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 14px; }
.pillar-desc { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.45); }

/* ── ABOUT ── */
.about { padding: 56px 0; border-bottom: 1px solid var(--rule); }
.about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.about-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-light); font-weight: 700; margin-bottom: 10px; }
.about-name { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.about-role { font-size: 13px; color: var(--text-mid); margin-bottom: 24px; line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 20px; border-top: 1px solid var(--rule); }
.stat-n { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--black); }
.stat-l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-top: 2px; }
.about-text p { font-size: 15.5px; line-height: 1.85; color: var(--text); margin-bottom: 14px; }
.pullquote { font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--black); line-height: 1.5; border-left: 3px solid var(--accent); padding-left: 18px; margin: 24px 0; }
.legacy { font-family: var(--serif); font-size: 16px; font-weight: 700; font-style: italic; color: var(--black); margin-top: 20px; }

/* ── COVERAGE ── */
.coverage { background: var(--bg-warm); padding: 24px 0; border-bottom: 1px solid var(--rule); }
.cov-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.cov-tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mid); font-weight: 500; padding: 5px 14px; border: 1px solid var(--rule); background: white; transition: all 0.2s; }
.cov-tag:hover { border-color: var(--black); color: var(--black); }

/* ── CTA ── */
.cta { text-align: center; padding: 48px 0; border-bottom: 1px solid var(--rule); }
.cta h3 { font-family: var(--serif); font-size: 24px; color: var(--black); margin-bottom: 6px; }
.cta p { font-size: 14px; color: var(--text-mid); margin-bottom: 20px; }
.cta-btn { display: inline-block; background: var(--black); color: white; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 13px 36px; transition: background 0.2s; }
.cta-btn:hover { background: var(--charcoal); }

/* ── FOOTER ── */
footer { padding: 32px 0; text-align: center; border-top: 2px solid var(--black); }
.f-logo-text { font-family: 'Libre Baskerville', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--black); letter-spacing: 1px; margin-bottom: 6px; }
.f-tag { font-size: 10px; letter-spacing: 1.5px; color: var(--text-light); margin-bottom: 12px; }
.f-legal { font-size: 11px; color: var(--text-light); line-height: 1.8; }

/* ── ARTICLE PAGE ── */
.article-header { max-width: 720px; margin: 48px auto 32px; padding: 0 24px; }
.article-header .cat { margin-bottom: 12px; }
.article-header .hl { font-size: 38px; line-height: 1.18; margin-bottom: 16px; }
.article-header .summary { font-size: 18px; line-height: 1.7; }
.article-header .byline { font-size: 13px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.article-body { max-width: 680px; margin: 0 auto 64px; padding: 0 24px; }
.article-body p { font-family: var(--serif); font-size: 17px; line-height: 1.9; color: var(--text); margin-bottom: 20px; }
.article-body .subhead { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--black); margin: 36px 0 16px; }
.back-link { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mid); padding: 8px 0; margin-bottom: 12px; transition: color 0.2s; }
.back-link:hover { color: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left, .hero-center, .hero-right { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .hero-right { border-bottom: none; }
  .stories-3 { grid-template-columns: 1fr; }
  .story-cell { border-right: none; border-bottom: 1px solid var(--rule); }
  .story-cell:last-child { border-bottom: none; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav-inner { display: none; }
  .nav-inner.open { display: flex; flex-direction: column; }
  .nav-inner.open a { border-right: none; border-bottom: 1px solid var(--rule-light); text-align: center; }
  .mob-toggle { display: block; }
  .article-header .hl { font-size: 28px; }
}
@media (max-width: 600px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .cov-inner { flex-direction: column; align-items: center; }
  .ticker-items { flex-direction: column; gap: 4px; }
}