/* Journal index (/journal/, /ja/journal/), article template
   (/ja/journal/[slug]/), and the homepage Journal carousel section
   (index.html, ja/index.html). Shared EN + JA.
   Reuses .work-hero / .work-hero-title / .work-hero-intro (work-index.css)
   for the index hero, and .text-link (styles.css) for arrow links.

   Tokenized against Figma nodes 232:4846 (Journal index) and 231:3476
   (Article template) — see the session's token-audit summary for the
   full match/propose/flag breakdown. Only one new styles.css token came
   out of this pass, --line-height-heading-large (36px) — it's reused
   across two selectors here and confirmed identically in both Figma
   files. Everything else that didn't fit the existing scale and isn't
   reused elsewhere was corrected to its Figma-confirmed value but left
   as a plain literal rather than minted into a new one-off token. */

/* ---- Journal index: card grid ---- */

.journal-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: var(--space-huge);
}

.journal-row {
  display: flex;
  gap: var(--space-xxxl);
  width: 100%;
  padding: var(--space-lg) clamp(20px, 6vw, var(--space-xxxl)) var(--space-xxl);
}

.journal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 0 1 calc(50% - 30px);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.journal-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 1307;
  object-fit: cover;
  display: block;
}

.journal-card-title {
  font-size: var(--font-size-heading-2);
  font-weight: var(--weight-black);
  line-height: var(--line-height-heading-large); /* Line Height/heading-height-large */
  letter-spacing: 0; /* Letter Spacing/tracking-heading, confirmed 0 in both Figma files; one-off value, not tokenized */
  color: var(--text-primary);
}

.journal-card-excerpt {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.journal-card-link {
  margin-top: var(--space-sm);
  font-size: var(--font-size-body-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.journal-card-link:hover {
  color: var(--text-primary);
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .journal-row {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .journal-card {
    flex-basis: 100%;
  }
}

/* ---- Article: hero ---- */

.article-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 64px; /* no scale match (closest --space-xxxl is 4px off); Figma leaves this unbound too, no drift */
}

/* When a StatBar follows, the hero should be flush with the image —
   the 64px gap moves to after the StatBar instead. */
.article-hero:has(+ .stat-bar) {
  padding-bottom: 0;
}

.article-hero-inner {
  display: flex;
  flex-direction: column;
  width: min(830px, calc(100% - 40px));
  padding: 80px 0 var(--space-xxl); /* 80px unbound in Figma too (pt-[80px]), no drift */
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--text-muted);
}

.article-meta-divider {
  width: 1px;
  height: 13px;
  background: var(--border-rule);
}

.article-title {
  padding-top: var(--space-xxl);
  max-width: 900px;
  font-size: 48px; /* Size/display-small; one-off, not tokenized */
  font-weight: var(--weight-black);
  line-height: 60px; /* Line Height/heading-height-ja; corrected from 1.33 ratio, one-off, not tokenized */
  color: var(--text-primary);
}

.article-subhead {
  padding-top: var(--space-xl);
  max-width: 908px;
  font-size: var(--font-size-heading-3); /* corrected 20px -> 24px per Figma Size/body-x-large; reuses heading-3's exact value */
  font-weight: var(--weight-medium);
  line-height: var(--line-height-heading); /* corrected 1.375 ratio -> confirmed 28px per Figma */
  color: var(--text-muted);
}

.article-hero-image {
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .article-hero-image {
    height: auto;
    aspect-ratio: 2000 / 1307;
  }
}

/* ---- Article: StatBar (only where an article has real stats) ---- */

.stat-bar {
  border-top: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 64px; /* no direct Figma binding found for this specific margin; value has no exact scale match either, left as-is */
}

.stat-bar-inner {
  display: flex;
  width: 100%;
  max-width: 1200px;
  padding: var(--space-xxl) clamp(20px, 5vw, var(--space-xxxl));
  gap: var(--space-xxxl);
}

.stat-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-left: var(--space-xxxl);
  border-left: 1px solid var(--border-rule);
}

.stat-bar-item:first-child {
  padding-left: 0;
  border-left: none;
}

.stat-bar-value {
  /* Figma's "Stats/Small" style (article template, node 251:7124/7129/7134)
     confirms Fraunces SemiBold, not Lora — corrected. Mirrors .emphasis's
     existing Fraunces variation-settings convention (styles.css). The
     Google Fonts <link> across all journal pages was switched from Lora
     to Fraunces (upright, weight 600) to match. */
  font-family: 'Fraunces', serif;
  font-weight: var(--weight-semibold);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--font-size-heading-1); /* corrected 40px -> 36px per Figma Size/heading-1 */
  line-height: var(--line-height-heading-large); /* was previously unset */
  letter-spacing: -0.4px; /* Stats/Small letterSpacing; one-off, not tokenized */
  color: var(--text-accent);
}

.stat-bar-label {
  /* RESOLVED: matches the article-template Figma file's actual spec —
     plain sentence-case Inter Semibold body-medium text, no uppercase,
     no eyebrow tracking. The previous uppercase/eyebrow treatment was
     legacy drift (likely copied from a different homepage stats
     component) and broke CJK legibility, since text-transform:uppercase
     doesn't apply meaningfully to Japanese and was fighting the
     sentence-case Japanese stat descriptions. */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-body-md);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .stat-bar-inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .stat-bar-item {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-rule);
  }

  .stat-bar-item:first-child {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 480px) {
  .stat-bar-value {
    font-size: 32px;
  }
}

/* ---- Article: body (single column) ---- */

.article-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 clamp(20px, 5vw, var(--space-xxxl)) var(--space-huge);
}

.article-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 830px;
  max-width: 100%;
  padding-bottom: var(--space-xxl);
}

.article-section--last {
  padding-bottom: var(--space-xxxl);
}

.article-h2 {
  font-size: var(--font-size-heading-2);
  font-weight: var(--weight-bold);
  line-height: 40px; /* Line Height/heading-height-xlarge; corrected from 1.3 ratio, one-off, not tokenized */
  letter-spacing: 0; /* Letter Spacing/tracking-heading, confirmed 0 in both Figma files; one-off value, not tokenized */
  color: var(--text-primary);
}

.article-p {
  /* Corrected 20px/32px -> 16px/24px: confirmed across every paragraph
     instance in the article-template Figma pull (Size/body-medium +
     Line Height/body-height, bound consistently, not a one-off). This
     is the largest visual change in this pass — flagged in summary. */
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.article-p a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.article-p a:hover {
  opacity: 0.7;
}

.article-h3 {
  /* FLAGGED: no H3-level heading appeared anywhere in either Figma pull
     (only Heading 2 sections were present in the fetched article
     content) — font-size/line-height left as-is, no source of truth
     to correct against. Weight (700) still tokenized since it matches
     --weight-bold regardless of the size question. */
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--text-primary);
}

.article-list {
  /* FLAGGED: no list element appeared in either Figma pull, so these
     20px/32px values aren't directly confirmed. They match the OLD
     (now-corrected) .article-p values exactly, which is circumstantial
     evidence they should probably become 16px/24px too for consistency
     — but left as-is pending confirmation rather than guessing. */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  font-size: 20px;
  line-height: 32px;
  color: var(--text-primary);
}

.article-list li {
  list-style: disc;
}

.article-author-card {
  padding: var(--space-lg);
  border: 1px solid var(--border-rule);
  width: 830px;
  max-width: 100%;
}

/* Mode A: no citations — unchanged single-row photo + bio layout.
   FLAGGED: the article-template node fetched this session used Mode B
   (citations present), so Mode A's classes below (avatar, eyebrow) have
   no direct confirmation from this pull — left untouched. */
.article-author-row {
  display: flex;
  gap: var(--space-lg);
}

.article-author-avatar {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.article-author-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 0;
  min-width: 0;
}

.article-author-eyebrow {
  font-size: 16px;
  color: var(--text-primary);
}

.article-author-name {
  /* Color corrected: Figma shows this name in --text-primary (white),
     not --text-muted — confirmed on the Mode B author-col node. */
  font-size: var(--font-size-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-body); /* added — was previously unset */
  color: var(--text-primary);
}

.article-author-bio {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.article-author-link {
  font-size: var(--font-size-body-md);
  color: var(--text-primary);
}

.article-author-link a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.article-author-link a:hover {
  opacity: 0.7;
}

/* Mode B: research cited present — two-column row (citations | author),
   no photo (matches the Figma layout, which drops the avatar to make
   room for the citations column). */
.article-extras-row {
  display: flex;
  gap: var(--space-xl);
  width: 100%;
}

.article-eyebrow {
  /* RESOLVED: the letter-spacing conflict flagged against the article
     template Figma file (231:3476) turned out to be a real second
     token, not drift — this is a plain field label with no pill
     background (unlike .section-label), so it belongs on
     --tracking-section-title (1px), not --tracking-eyebrow (0.52px). */
  font-size: var(--font-size-eyebrow);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-section-title);
  text-transform: uppercase;
  line-height: var(--line-height-eyebrow);
  color: var(--text-muted);
}

.article-citations-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.article-citations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.article-citation-item {
  padding-left: 13px;
  border-left: 1px solid var(--border-rule);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.article-author-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---- Article: prev/next nav ---- */

.article-nav {
  border-top: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xl) clamp(20px, 5vw, var(--space-xxxl));
  margin-bottom: var(--space-xxl);
}

.article-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-body-md);
  line-height: 32px; /* confirmed leading-[32px] on this exact element; one-off, not tokenized */
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.article-nav-link:hover {
  color: var(--text-primary);
}

.article-nav-link--disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 480px) {
  .article-title {
    font-size: 32px;
  }

  .article-subhead {
    font-size: 18px;
  }

  .article-author-card {
    flex-direction: column;
  }
}

/* ---- Homepage: Journal carousel section ----
   FLAGGED: neither Figma URL given this session covers the homepage
   carousel specifically (232:4846 is the Journal index page, 231:3476
   is the article template) — the values below are audited against the
   existing token set only (exact-match rule), not against fresh Figma
   data. Anything that doesn't exactly match an existing token is left
   as a literal rather than guessed. */

.journal-carousel-section {
  padding: 0 15px 50px; /* close to --space-md/--space-xxl but not exact; no Figma source this session, left as literal */
  max-width: 1920px;
  border-top: 1px solid var(--border-rule);
}

.journal-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 1px var(--space-xxl);
}

.journal-carousel-badge {
  display: inline-flex;
  align-items: center;
  background: var(--bg-brand);
  color: var(--accent-ink);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 5px 20px; /* matches the sitewide .section-label convention (styles.css) — also left as an intentional untokenized exception there */
  border-radius: var(--radius-sm);
}

.journal-carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.journal-carousel-viewall {
  font-size: var(--font-size-body-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.journal-carousel-viewall:hover {
  color: var(--text-primary);
}

.journal-carousel-arrows {
  display: flex;
  gap: var(--space-sm);
}

.journal-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-button);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-accent);
  font-size: 18px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.journal-carousel-arrow:hover {
  background: var(--bg-surface);
}

.journal-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}

.journal-carousel-track {
  display: flex;
  gap: 20px; /* between --space-md(16) and --space-lg(24), no exact match; no Figma source this session */
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
  cursor: grab;
  scrollbar-width: none;
}

.journal-carousel-track::-webkit-scrollbar {
  display: none;
}

.journal-carousel-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.journal-carousel-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 440px;
  max-width: 82vw;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-rule);
  background: var(--bg-canvas);
  text-decoration: none;
  color: inherit;
}

.journal-carousel-card-image-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}

.journal-carousel-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-carousel-card-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 34, 15, 0.1);
  background: rgb(from var(--dark) r g b / 10%);
}

.journal-carousel-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px; /* between --space-sm(8) and --space-md(16), no exact match; no Figma source this session */
  padding: var(--space-lg);
}

.journal-carousel-card-title {
  /* FLAGGED: no Figma source this session (see section note above) */
  font-size: 18px;
  line-height: 26px;
  color: var(--text-primary);
}

.journal-carousel-card-link {
  /* FLAGGED: no Figma source this session (see section note above) */
  font-size: 14px;
  color: var(--text-accent);
}

@media (max-width: 640px) {
  .journal-carousel-header {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .journal-carousel-card {
    width: 320px;
  }

  .journal-carousel-card-image-wrap {
    height: 210px;
  }
}