/* ─────────────────────────────────────────────────────────────────────────
   Atlas AI — design tokens (v2, Claude Design handoff)

   Shared CSS custom properties for every code component. Imported once per
   component so each bundle is self-contained in Webflow. Values mirror the
   `:root` block in index-base.html — keep them in sync; do not add new colors
   to the palette (see CLAUDE.md § "Things NOT to do").
   ───────────────────────────────────────────────────────────────────────── */
:host {
  /* Paper (backgrounds) */
  --paper:      #F4EFE5;
  --paper-alt:  #EBE4D4;
  --paper-deep: #DDD3BC;
  --paper-86:   rgba(245, 239, 229, 0.86);
  --paper-74:   rgba(245, 239, 229, 0.74);
  --paper-55:   rgba(245, 239, 229, 0.55);
  --paper-22:   rgba(245, 239, 229, 0.22);
  --paper-10:   rgba(245, 239, 229, 0.10);

  /* Ink (text) */
  --ink:    #1A1612;
  --ink-85: rgba(26, 22, 18, 0.86);
  --ink-70: rgba(26, 22, 18, 0.72);
  --ink-50: rgba(26, 22, 18, 0.5);
  --ink-30: rgba(26, 22, 18, 0.3);
  --ink-20: rgba(26, 22, 18, 0.18);
  --ink-14: rgba(26, 22, 18, 0.14);
  --ink-08: rgba(26, 22, 18, 0.08);

  /* Ochre (accent) */
  --ochre:       #8C6A3D;
  --ochre-light: #D9B98A;
  --ochre-soft:  rgba(140, 106, 61, 0.14);
  --gold:        #B89968;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap-max:        1312px;
  --wrap-wide-max:   1440px;
  --wrap-narrow-max: 920px;
  --pad-x:           64px;
}

@media (max-width: 900px) {
  :host {
    --pad-x: 24px;
  }
}

/* CMS post header: title + byline + main image. Same paper/hairline language
   as the homepage sections; tokens from tokens.css. */

.wf-article-hero {
  box-sizing: border-box;
  padding: 64px 0 0;
  background: var(--paper);
  color: var(--ink);
}

.wf-article-hero-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.wf-article-hero-title {
  margin: 0;
  max-width: var(--wrap-narrow-max);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -1.4px;
  color: var(--ink);
}

.wf-article-hero-by {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-50);
}

/* Hairline plate around the image, matching the editorial rules used across
   the site. Fixed aspect so a portrait or landscape CMS upload can't reflow
   the page. */
.wf-article-hero-figure {
  margin: 56px 0 0;
  border: 1px solid var(--ink-14);
  background: var(--paper-alt);
  overflow: hidden;
}

.wf-article-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* ─── Mobile ≤ 900px ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .wf-article-hero {
    padding-top: 88px;
  }
  .wf-article-hero-title {
    font-size: clamp(32px, 7.5vw, 44px);
    letter-spacing: -0.9px;
  }
  .wf-article-hero-figure {
    margin-top: 36px;
  }
  .wf-article-hero-img {
    aspect-ratio: 4 / 3;
  }
}