/* ─────────────────────────────────────────────────────────────────────────
   Atlas AI — design tokens (launch pass)

   Shared CSS custom properties for every code component. Imported once per
   component so each bundle is self-contained in Webflow. Values mirror the
   `:root` blocks in the reference build (atlas-website/site/css/_shared.css
   and _system.css) — keep them in sync, and keep the Site Settings head block
   (site-settings/head.html) in sync with this file. Do not add new colors to
   the palette (see CLAUDE.md § "Things NOT to do").

   ───────────────────────────────────────────────────────────────────────── */
:host,
: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-64: rgba(26, 22, 18, 0.64); /* small text: 5.1:1 on paper, 4.6:1 on paper-deep */
  --ink-55: rgba(26, 22, 18, 0.55); /* form-field borders: 3.5:1 */
  --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-text:  #73572F; /* ochre text under 24px: 5.9:1 on paper */
  --ochre-light: #D9B98A;
  --ochre-soft:  rgba(140, 106, 61, 0.14);
  --gold:        #B89968;

  /* Status */
  --error: #7A2E1E; /* form errors only */

  /* 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;
  --header-h:        76px; /* the sticky Nav; anchors scroll clear of it */
}

@media (max-width: 991px) {
  :host,
  :host {
    --pad-x: 24px;
    --header-h: 64px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Accessibility base (MIGRATION-PLAN.md §1.4)

   Imported with the tokens by each component. Document styles don't cross
   shadow roots, so every component carries its own copy of these rules.
   Ported from the reference build's _system.css §2 and its mobile pass.
   ───────────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--wf-focus, var(--ochre));
  outline-offset: 3px;
}

/* Visually hidden, still read by screen readers. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991px) {
  .wf-tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: calc(-1 * var(--wf-tap-pull, 11px));
  }

  .wf-tap-box {
    min-height: 44px;
  }
}

/* Reduced motion: everything lands in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Editorial eyebrow (mono caps with a hairline tick), and its tick-less small
   label. Colours come from the ground through --wf-eyebrow-fg and
   --wf-eyebrow-tick (grounds.css); with neither set, both follow the text
   colour around it. Reference: _shared.css:66-83, _themes.css:107-109. */
.wf-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: var(--wf-eyebrow-align, flex-start);
  margin: 0;
  font: inherit;
}

/* Opt-in section-level gap under the eyebrow, for slots where the host has no
   spacing of its own to give. */
.wf-eyebrow--margin-bottom {
  margin-bottom: 48px;
}

.wf-eyebrow-tick {
  width: 32px;
  height: 1px;
  background: var(--wf-eyebrow-tick, currentColor);
  opacity: 0.7;
}

.wf-eyebrow-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wf-eyebrow-fg, currentColor);
}

/* Tick-less: the small mono label, in quiet text on any ground. */
.wf-eyebrow--plain .wf-eyebrow-label {
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--wf-fg-quiet, var(--ink-64));
}

/* ─────────────────────────────────────────────────────────────────────────
   Grounds and tones (MIGRATION-PLAN.md rule 8)

   A section sets its ground; the ground's tone publishes the colours that
   depend on it as `--wf-*` custom properties. Custom properties inherit
   through the flattened tree, so they reach slotted components inside their
   own shadow roots, and native content in the light DOM. Readers always give
   the light value as a fallback: `var(--wf-fg, var(--ink))`.

   The tokens file never declares these, so a nested component's `:host`
   can't reset them.
   ───────────────────────────────────────────────────────────────────────── */

.wf-tone-light {
  color: var(--ink);

  --wf-fg:           var(--ink);
  --wf-fg-soft:      var(--ink-70);
  --wf-fg-quiet:     var(--ink-64);
  --wf-rule:         var(--ink-20);
  --wf-hairline:     var(--ink-08);
  --wf-accent:       var(--ochre);
  --wf-accent-text:  var(--ochre-text);
  --wf-focus:        var(--ochre);
  --wf-solid-bg:     var(--ink);
  --wf-solid-fg:     var(--paper);
  --wf-field-bg:     var(--paper);
  --wf-field-fg:     var(--ink);
  --wf-field-border: var(--ink-55);
  --wf-error:        var(--error);
  --wf-eyebrow-fg:   currentColor;
  --wf-eyebrow-tick: currentColor;
}

.wf-tone-dark {
  color: var(--paper);

  --wf-fg:           var(--paper);
  --wf-fg-soft:      var(--paper-74);
  --wf-fg-quiet:     var(--paper-55);
  --wf-rule:         var(--paper-22);
  --wf-hairline:     var(--paper-10);
  --wf-accent:       var(--ochre-light);
  --wf-accent-text:  var(--ochre-light);
  --wf-focus:        var(--ochre-light);
  --wf-solid-bg:     var(--paper);
  --wf-solid-fg:     var(--ink);
  --wf-field-bg:     transparent;
  --wf-field-fg:     var(--paper);
  --wf-field-border: var(--paper-55);
  /* `--error` reads at about 1.6:1 on ink. The prototype has no error state on
     ink, so paper stands in until one is designed. */
  --wf-error:        var(--paper);
  --wf-eyebrow-fg:   var(--paper-55);
  --wf-eyebrow-tick: var(--ochre-light);
}

.wf-ground--paper      { background: var(--paper); }
.wf-ground--paper-alt  { background: var(--paper-alt); }
.wf-ground--paper-deep { background: var(--paper-deep); }
.wf-ground--ink        { background: var(--ink); }

/* Newsletter sign-up. Block ports the footer's `.newsletter`
   (_system.css:74-90); Band ports `.bl-news` (page-blog.css:34-42, :75). The
   slotted form itself is styled from the document (nativeForm.slotted.ts);
   this sheet sizes it through the --wf-field-* and --wf-submit-* properties.
   No `:host` rule: it renders inside the Footer's or a page's shadow root, and
   would restyle that host. */

.wf-newsletter-body {
  margin: 10px 0 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wf-fg-soft, var(--ink-70));
}

.wf-newsletter-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wf-fg-quiet, var(--ink-64));

  /* One link in a line of text: pull its tap target back in full, whatever a
     surrounding footer sets for its stacked links. */
  --wf-tap-pull: 11px;
}

.wf-newsletter-note-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Block — the footer's brand column ───────────────────────── */
/* On whatever ground the footer shows: no tone of its own. */
.wf-newsletter--block {
  max-width: 380px;
}

/* ─── Band — the blog index and the end of every post ─────────── */
.wf-newsletter--band {
  box-sizing: border-box;
  padding: 56px 0;
}

.wf-newsletter-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.wf-newsletter-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--wf-fg, var(--ink));
}

.wf-newsletter--band .wf-newsletter-body {
  margin: 10px 0 0;
  font-size: 15px;
}

.wf-newsletter--band .wf-newsletter-form {
  --wf-field-h: 50px;
  --wf-field-pad: 0 16px;
  --wf-submit-pad: 0 22px;
  --wf-submit-size: 15px;
}

/* ─── Mobile and tablet ≤ 991px ───────────────────────────────── */
@media (max-width: 991px) {
  .wf-newsletter-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* /blog and the post template, ported from the reference build's page-blog.css (atlas-website/site/css/page-blog.css).
   Loaded after site.base.css and site.system.css, as in the reference. Scoped to .atlas-page; the body class
   .page-blog is the root's .atlas-blog. Breakpoints: 900 px is 991 px; the 600 px step stays. The post rules (.bp-*)
   are kept for the post template.

   Moved out, because the parts they style are no longer in this shadow root:
   - the cards (.post) are the Post Card component (PostCard.css);
   - the lists (.posts, .posts.feat) are Collection Lists in slots, laid out from the document (shared/postList.slotted.ts) with
     the values the slot containers below hand down as custom properties;
   - the newsletter band (.bl-news) is the Newsletter's Band layout (Newsletter.css). */

/* /blog and the post template — Perspectives (prototype, 2026-09-30). Undated by design. Card images come from the
   CMS in every style (logos, screenshots, photos), so one frame and one sepia treatment make them read as a family. */

.atlas-page .rp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--ink-20); max-width: 900px; }
.atlas-page .rp-groups a { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px 16px 0; color: var(--ink); text-decoration: none;
               font: 400 20px/1.3 var(--serif); }
.atlas-page .rp-groups a::after { content: "\2193"; margin-left: auto; color: var(--ochre-text); font: 400 16px var(--sans); }
.atlas-page .rp-groups a + a { padding-left: 20px; border-left: 1px solid var(--ink-14); }
.atlas-page .rp-groups .n { font: 400 34px/1 var(--serif); color: var(--ochre-text); }
.atlas-page .rp-groups a:hover { color: var(--ochre-text); }

.atlas-page .bl-h { font: 400 clamp(28px, 2.8vw, 38px)/1.15 var(--serif); margin: 0 0 30px; }
/* Featured: one large post beside two */
.atlas-page .bl-featured { padding-top: 56px; }

/* The post */
.atlas-page .bp-head .wrap, .atlas-page .bp-body { max-width: 780px; margin-left: auto; margin-right: auto; }
.atlas-page .bp-head { padding: 72px 0 32px; }
.atlas-page .bp-k { margin: 0 0 18px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); }
.atlas-page .bp-k a { color: inherit; }
.atlas-page .bp-head h1 { margin: 0; font: 400 clamp(34px, 4.2vw, 52px)/1.1 var(--serif); letter-spacing: -.012em; }
.atlas-page .bp-by { margin: 22px 0 0; font-size: 15px; color: var(--ink-64); }
.atlas-page .bp-hero { margin: 8px 0 48px; }
.atlas-page .bp-hero .wrap { max-width: 1040px; }
.atlas-page .bp-hero img { display: block; width: 100%; height: auto; filter: grayscale(1) sepia(.3) contrast(.95); mix-blend-mode: multiply; }
.atlas-page .bp-body { padding-bottom: 80px; }
.atlas-page .bp-body p, .atlas-page .bp-body li { font: 400 19px/1.65 var(--serif); color: var(--ink-85); }
.atlas-page .bp-body p { margin: 0 0 22px; }
.atlas-page .bp-body h2 { margin: 52px 0 18px; font: 400 30px/1.2 var(--serif); color: var(--ink); }
.atlas-page .bp-body h3 { margin: 36px 0 12px; font: 500 22px/1.3 var(--serif); }
.atlas-page .bp-body ul, .atlas-page .bp-body ol { margin: 0 0 24px; padding-left: 22px; }
.atlas-page .bp-body ul { list-style: disc; } .atlas-page .bp-body ol { list-style: decimal; }
.atlas-page .bp-body li::marker { color: var(--ochre); }
.atlas-page .bp-body li { margin-bottom: 10px; }
.atlas-page .bp-body strong { font-weight: 600; color: var(--ink); }
.atlas-page .bp-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: 4px; }
.atlas-page .bp-body blockquote { margin: 36px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--ochre);
                      font: italic 400 25px/1.4 var(--serif); color: var(--ink); }
.atlas-page .bp-body blockquote p { font: inherit; color: inherit; margin: 0; }
.atlas-page .bp-body figure { margin: 32px 0; }
.atlas-page .bp-body figure img { display: block; width: 100%; height: auto; }
.atlas-page .bl-more .bl-all { margin-top: 30px; }
@media (max-width: 600px) {
  .atlas-page .rp-groups { grid-template-columns: 1fr; }
  .atlas-page .rp-groups a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-14); }
  .atlas-page .bp-head { padding-top: 48px; }
  .atlas-page .bp-body p, .atlas-page .bp-body li { font-size: 18px; }
  .atlas-page .bp-body blockquote { font-size: 21px; }
}
.atlas-page.atlas-blog h2.bl-h { margin: 0 0 32px; }

/* ═══ Port: the Collection List slots ═══
   Each slot sits in a .bl-list container. Custom properties inherit through the slot into the Collection List, where
   postList.slotted.ts lays out .w-dyn-items and its items with them, and into each Post Card. The values are the
   reference's .posts and .posts.feat rules (page-blog.css:13, 27-31, 73-74, 80). */
.atlas-page.atlas-blog .bl-list {
  --atlas-posts-cols: repeat(3, minmax(0, 1fr));
  --atlas-posts-gap: 44px 36px;
}

/* Featured: one large post beside two. The lead-* values reach the first item only, rest-* the others. */
.atlas-page.atlas-blog .bl-list.feat {
  --atlas-posts-cols: minmax(0, 1.5fr) minmax(0, 1fr);
  --atlas-posts-rows: auto auto;
  --atlas-posts-gap: 36px 44px;
  --atlas-posts-lead-row: span 2;
  --atlas-lead-title-size: clamp(28px, 2.8vw, 36px);
  --atlas-lead-title-leading: 1.15;
  --atlas-lead-sum-size: 17px;
  --atlas-lead-sum-lines: 4;
  --atlas-rest-ratio: 16 / 9;
}

@media (max-width: 991px) {
  .atlas-page.atlas-blog .bl-list,
  .atlas-page.atlas-blog .bl-list.feat { --atlas-posts-cols: 1fr 1fr; }
  .atlas-page.atlas-blog .bl-list.feat { --atlas-posts-lead-row: auto; --atlas-posts-lead-column: 1 / -1; }
}

@media (max-width: 600px) {
  .atlas-page.atlas-blog .bl-list,
  .atlas-page.atlas-blog .bl-list.feat { --atlas-posts-cols: 1fr; --atlas-posts-gap: 36px; }
}