/* Generated from designs/figma/DESIGN.md — editorial-longscroll layout.
 * Regenerate by asking the skill to re-render CSS.
 *
 * Layout: editorial-longscroll
 *
 * Component classes:
 * - .hero, .hero h1, .hero .accent, .hero .date, .hero .hero-sub
 * - .highlights, .highlights h2, .highlights ul li a
 * - .section-label, .section-count
 * - .news-item, .news-tags, .news-meta, .news-content, .news-link
 * - .badge, .badge-hot, .badge-recent
 * - .container
 * - .site-header, .brand, .subtitle          (homepage)
 * - .homepage-hero, .hero-desc               (homepage)
 * - .latest-issue, .latest-issue-label,
 *   .latest-issue-title, .latest-issue-link  (homepage)
 * - .issue-list, .teaser, .category-tags     (homepage)
 * - .top-item-list, .source-count            (homepage)
 * - .category-tag[data-slug="..."]           (all 5 slugs)
 * - .source-badge, .alt-urls
 * - .footer
 *
 * Figma §7 rules enforced:
 * ✓ Interface strictly #000000 / #ffffff — gradient is the ONLY color
 * ✓ Variable weights 320 330 340 450 480 540 700 — never 400–699 between stops
 * ✓ Pill (50px) and circular (50%) on ALL interactive chrome
 * ✓ Dashed 2px focus outlines — echoes editor selection handles
 * ✓ Negative letter-spacing on ALL body text
 * ✓ Positive letter-spacing ONLY on figmaMono labels
 * ✓ font-feature-settings "kern" 1 everywhere
 * ✗ No colored badges, no sharp-corner buttons, no solid focus rings
 */

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* §2 — Binary monochrome interface palette */
  --ink:         #000000;
  --bg:          #ffffff;
  --glass-dark:  rgba(0, 0, 0, 0.08);
  --glass-light: rgba(255, 255, 255, 0.16);
  --divider:     rgba(0, 0, 0, 0.10);
  --muted:       rgba(0, 0, 0, 0.38);
  --muted-white: rgba(255, 255, 255, 0.52);

  /* §2 — Hero gradient: electric green → bright yellow → deep purple → hot pink */
  --gradient-hero: linear-gradient(
    135deg,
    #1affd4  0%,
    #f0ff52 28%,
    #7b2fff 62%,
    #ff2d9e 100%
  );

  /* §3 — Font stacks */
  --f-display: "figmaSans", "figmaSans Fallback",
    "SF Pro Display", system-ui, -apple-system,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --f-mono: "figmaMono", "figmaMono Fallback",
    "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* §3 — Variable weight stops (320 330 340 450 480 540 700 only) */
  --w-ultra:    320;   /* lightest body text               */
  --w-light:    330;   /* standard body / list items        */
  --w-light2:   340;   /* slightly heavier body             */
  --w-mid:      450;   /* buttons, nav, body large          */
  --w-mid2:     480;   /* product tab active state          */
  --w-semi:     540;   /* sub-heading emphasized            */
  --w-bold:     700;   /* feature titles, card h3           */

  /* §5 — Spacing (8 px base) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  40px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-hero: 112px;
  --side:    80px;
  --max-w:  880px;

  /* §5 — Radius scale */
  --r-subtle: 6px;
  --r-card:   8px;
  --r-pill:   50px;
  --r-circle: 50%;

  /* §6 — Shadow scale (used sparingly) */
  --shadow-1: 0 1px 3px  rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: var(--w-ultra);
  line-height: 1.55;
  letter-spacing: -0.26px;   /* §7: always negative on body */
  color: var(--ink);
  background: var(--bg);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

strong { font-weight: var(--w-bold); }

/* §4 — Dashed focus outlines (signature Figma editor handle reference) */
*:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}

/* ─── Container ──────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side);
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — sticky header
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  padding: 14px var(--side);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* §3 Mono Label — figmaMono uppercase +0.54px */
.brand {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.54px;
  text-transform: uppercase;
  color: var(--bg);
  text-decoration: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.brand:hover { color: var(--muted-white); }

.subtitle {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--w-ultra);
  letter-spacing: -0.14px;
  color: rgba(255, 255, 255, 0.38);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — full-bleed vibrant gradient  (§1 §2 §3)
   Used on both the issue page and the homepage hero variant.
   ══════════════════════════════════════════════════════════════════════════ */
.hero,
.homepage-hero {
  background: var(--gradient-hero);
  width: 100%;
  color: #ffffff;
  padding: var(--sp-hero) var(--side) var(--sp-8);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  position: relative;
  overflow: hidden;
}

/* Dark scrim — ensures white text is legible over bright yellow/green bands */
.hero::before,
.homepage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 0;
}

/* Lift all direct children above the scrim */
.hero > *,
.homepage-hero > * {
  position: relative;
  z-index: 1;
}

/* §3 Mono Label on colored surface */
.hero .date {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.54px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--sp-5);
}

/* §3 Display / Hero — 86px weight 400 line-height 1.0 spacing -1.72px */
.hero h1,
.homepage-hero h1 {
  font-family: var(--f-display);
  font-size: 86px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -1.72px;
  color: #ffffff;
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

/* .accent — white on gradient; color IS the gradient underneath */
.hero .accent,
.homepage-hero h1 span { color: #ffffff; }

/* §3 Body Light — 18px weight 320 spacing -0.26px */
.hero .hero-sub,
.hero-desc {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: var(--w-ultra);
  line-height: 1.40;
  letter-spacing: -0.14px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-7);
}

/* ─── Latest-issue card on homepage hero (§6 Surface Level 1) ───────────── */
.latest-issue {
  background: var(--glass-light);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  max-width: 680px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.latest-issue-label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: var(--sp-2);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.latest-issue-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: var(--w-light);
  line-height: 1.55;
  letter-spacing: -0.26px;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: var(--sp-4);
}

/* §4 White Pill button — 50px radius, asymmetric vertical padding */
.latest-issue-link {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--w-mid);
  letter-spacing: -0.14px;
  color: var(--ink);
  background: #ffffff;
  text-decoration: none;
  padding: 8px 20px 10px;
  border-radius: var(--r-pill);
  transition: background 0.15s, opacity 0.15s;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.latest-issue-link:hover { background: rgba(255, 255, 255, 0.86); }

/* ══════════════════════════════════════════════════════════════════════════
   HIGHLIGHTS — inverted black surface  (§2 §3)
   Must look visually different from the white page canvas.
   ══════════════════════════════════════════════════════════════════════════ */
.highlights {
  background: var(--ink);
  color: #ffffff;
  padding: var(--sp-7) var(--side);
}

/* §3 Mono Label on dark surface */
.highlights h2 {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.54px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: var(--sp-4);
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.highlights ul {
  list-style: none;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* §3 Body Large — 20px weight 330 spacing -0.14px */
.highlights ul li {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: var(--w-light);
  line-height: 1.40;
  letter-spacing: -0.14px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.highlights ul li:first-child { padding-top: 0; }
.highlights ul li:last-child  { border-bottom: none; }

.highlights ul li a {
  color: #ffffff;
  text-decoration: none;
}
.highlights ul li a:hover { text-decoration: underline 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION LABEL — figmaMono uppercase category divider  (§3 Mono Label)
   ══════════════════════════════════════════════════════════════════════════ */
.section-label {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.54px;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--sp-7) 0 var(--sp-3);
  border-bottom: 2px solid var(--ink);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.section-count { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   NEWS ITEM — border-separated, no card chrome  (editorial-longscroll rule)
   ══════════════════════════════════════════════════════════════════════════ */
.news-item {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--divider);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.news-item:last-child { border-bottom: none; }

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* §3 Feature Title — 24px weight 700 spacing normal */
.news-item h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: var(--w-bold);
  line-height: 1.45;
  letter-spacing: -0.14px;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline 1px; }

/* §3 Mono Small — 12px weight 400 spacing +0.6px */
.news-meta {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.source-badge {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--muted);
}

/* §3 Body Light — 18px weight 320 spacing -0.26px */
.news-content {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: var(--w-ultra);
  line-height: 1.60;
  letter-spacing: -0.26px;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.news-content ul {
  margin: var(--sp-3) 0 0 var(--sp-4);
}
.news-content ul li { margin-bottom: var(--sp-2); }

/* §4 White Pill button (on white page = black-outline pill, hover fills black) */
.news-link {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--w-mid);
  letter-spacing: -0.14px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 20px 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  transition: background 0.15s, color 0.15s;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.news-link:hover { background: var(--ink); color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════════
   BADGES — pill geometry (50px radius)  (§4 Component Stylings)
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 11px 4px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: transparent;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* §4 Black Solid button → filled black pill for hot badge */
.badge-hot {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

/* Recent: dashed border — echoes Figma's dashed selection handle */
.badge-recent {
  border-style: dashed;
  border-color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY TAGS — monochrome pill system  (§2: no interface colors)
   major-release = most visually loud = solid black
   others = outline variants in descending weight
   ══════════════════════════════════════════════════════════════════════════ */
.category-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 9px 3px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: transparent;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* Solid black pill — highest emphasis */
.category-tag[data-slug="major-release"] {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

/* Standard outline */
.category-tag[data-slug="industry-business"] {
  border-color: rgba(0, 0, 0, 0.28);
}

/* Lighter outline */
.category-tag[data-slug="research-frontier"] {
  border-color: rgba(0, 0, 0, 0.22);
}

/* Glass-dark fill */
.category-tag[data-slug="tools-release"] {
  background: var(--glass-dark);
  border-color: rgba(0, 0, 0, 0.14);
}

/* Dashed outline — signals caution / policy */
.category-tag[data-slug="policy-regulation"] {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.38);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALT URLS (details element)
   ══════════════════════════════════════════════════════════════════════════ */
.alt-urls { margin-top: var(--sp-3); }

.alt-urls summary {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.alt-urls summary:hover { color: var(--ink); }

.alt-urls ul {
  list-style: none;
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
}
.alt-urls ul li {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: var(--w-ultra);
  letter-spacing: -0.14px;
  padding: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — dark bar  (§2 inverted)
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: var(--muted-white);
  padding: var(--sp-7) var(--side);
  margin-top: var(--sp-7);
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--w-light);
  letter-spacing: -0.14px;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.footer p           { margin-bottom: var(--sp-2); }
.footer p:last-child{ margin-bottom: 0; }
.footer a           { color: rgba(255,255,255,0.72); text-decoration: underline 1px; }
.footer a:hover     { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE ISSUE LIST
   ══════════════════════════════════════════════════════════════════════════ */
.issue-list { list-style: none; padding: 0; margin: 0; }

.issue-list > li {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--divider);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.issue-list > li:last-child { border-bottom: none; }

/* §3 Mono Small */
.issue-list > li time {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.issue-list > li h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: var(--w-bold);
  line-height: 1.45;
  letter-spacing: -0.14px;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.issue-list > li h3 a { color: var(--ink); text-decoration: none; }
.issue-list > li h3 a:hover { text-decoration: underline 1px; }

.teaser {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: var(--w-ultra);
  line-height: 1.60;
  letter-spacing: -0.26px;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: var(--sp-3);
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* ─── Top-item list ──────────────────────────────────────────────────────── */
.top-item-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.top-item-list li {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--w-light);
  letter-spacing: -0.14px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

.top-item-list a {
  color: var(--ink);
  text-decoration: underline 1px;
  text-decoration-color: rgba(0, 0, 0, 0.24);
}
.top-item-list a:hover { text-decoration-color: var(--ink); }

.source-count {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Figma §8 breakpoints
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet 560–768px */
@media (max-width: 768px) {
  :root {
    --side:    24px;
    --sp-hero: 72px;
  }

  /* Hero: 86px → 64px */
  .hero h1,
  .homepage-hero h1 {
    font-size: 64px;
    letter-spacing: -0.96px;
  }

  .highlights { padding: var(--sp-6) var(--side); }
  .highlights ul li { font-size: 18px; }

  .news-item h3,
  .issue-list > li h3 { font-size: 20px; }

  .latest-issue { max-width: 100%; }
}

/* Small mobile <560px */
@media (max-width: 560px) {
  :root {
    --side:    16px;
    --sp-hero: 52px;
  }

  /* Hero: 86px → 48px */
  .hero h1,
  .homepage-hero h1 {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.64px;
  }

  .hero .date,
  .highlights h2,
  .section-label { font-size: 14px; letter-spacing: 0.4px; }

  .news-item h3,
  .issue-list > li h3 { font-size: 18px; }

  .news-content,
  .highlights ul li { font-size: 16px; }

  .news-meta { flex-direction: column; gap: 4px; }

  .site-header { padding: 12px var(--side); }
  .subtitle { display: none; }

  .top-item-list li { flex-direction: column; gap: 4px; }
}