/* ============================================================
   THE STROOP STUDY — layout.css
   Page scaffold: .wrap, .section, masthead, footer, figure mounts,
   reading-grid helpers. Structure only; skin lives in components.css.
   ============================================================ */

/* ── The measured column the whole site sits in ───────────────── */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Sectioning band with generous, fluid negative space ──────── */
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section + .section { padding-top: 0; }
.section--hero { padding-bottom: calc(var(--section-y) * 0.7); }

/* A hairline that meets the column edges, not the viewport. */
.rule {
  border: 0;
  border-top: var(--hair) solid var(--rule);
  margin: 0;
}
.rule--strong { border-top-color: var(--rule-strong); }

/* Optional vertical splits used by prose/figure sections. */
.section__head { max-width: var(--measure-wide); }
.section__head > * + * { margin-top: var(--s-4); }

/* Two-column reading grid: narrative + margin/figure rail.
   Collapses to a single column below the breakpoint. */
.grid-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: start;
}
@media (min-width: 56rem) {
  .grid-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .grid-split--wide-first {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

/* ════════════ MASTHEAD ════════════ */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(9px);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.masthead[data-stuck] {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.5rem;
  padding-block: var(--s-3);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.masthead__mark {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  background: var(--ink);
  border-radius: var(--radius-s);
  flex: 0 0 auto;
}
.masthead__mark-s {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1;
  /* the conflict in miniature: green glyph in an inked field */
  color: var(--stroop-green);
  transform: translateY(-0.02em);
}

.masthead__words { display: flex; flex-direction: column; line-height: 1.1; }
.masthead__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}
.masthead__by {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-3), 1.6vw, var(--s-6));
}

.livebadge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-4);
  border: var(--hair) solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}
.livebadge__sep { width: var(--hair); height: 0.95em; background: var(--rule-strong); }

/* The whole nav row folds on small screens. */
@media (max-width: 62rem) {
  .masthead__inner { flex-wrap: wrap; row-gap: var(--s-3); }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .nav__list {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    padding-top: var(--s-3);
    border-top: var(--hair) solid var(--rule);
  }
  .livebadge { margin-left: auto; }
}
@media (max-width: 30rem) {
  .masthead__by { display: none; }
  .nav__list { font-size: var(--t-micro); }
}

/* ════════════ HERO ════════════ */
.hero { max-width: 100%; }
.hero > * + * { margin-top: var(--s-5); }
.hero__title { max-width: 24ch; }
.hero__caption { max-width: 54ch; }
.hero__rule { margin-top: var(--s-8); }

.hero__motif {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.28em;
  vertical-align: baseline;
  margin-inline: 0.12em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
.hero__count {
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  color: var(--ink-faint);
}

/* ════════════ FIGURE MOUNTS (no layout shift before D3) ════════ */
[data-fig] {
  display: block;
  width: 100%;
  margin: 0;
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
}
[data-fig]:empty::after,
[data-fig] .fig-skeleton {
  content: "drawing figure…";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--t-fine);
  letter-spacing: 0.04em;
}
/* Reserve height per figure so the page is stable before render. */
[data-fig="rt-bars"]       { min-height: 360px; }
[data-fig="rt-density"]    { min-height: 380px; }
[data-fig="subject-slopes"]{ min-height: 440px; }
[data-fig="stroop-hist"]   { min-height: 360px; }
[data-fig="power-curve"]   { min-height: 360px; }
[data-fig] svg { width: 100%; height: auto; display: block; border-radius: inherit; }

@media (max-width: 40rem) {
  [data-fig="subject-slopes"]{ min-height: 380px; }
  [data-fig] { min-height: 300px; }
}

/* ════════════ FOOTER ════════════ */
.site-foot {
  border-top: var(--hair) solid var(--rule);
  margin-top: var(--section-y);
  padding-block: clamp(var(--s-7), 5vw, var(--s-9));
  background: var(--paper-sunk);
}
.site-foot__inner {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .site-foot__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
      "brand nav"
      "note  note"
      "legal legal";
    column-gap: var(--s-8);
    row-gap: var(--s-6);
  }
  .site-foot__brand { grid-area: brand; }
  .site-foot__nav   { grid-area: nav; justify-self: end; text-align: right; }
  .site-foot__note  { grid-area: note; }
  .site-foot__legal { grid-area: legal; }
}

.site-foot__brand { display: flex; flex-direction: column; gap: var(--s-1); }
.site-foot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h6);
}
.site-foot__by { font-family: var(--font-ui); font-size: var(--t-fine); color: var(--ink-faint); }

.site-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: flex-start;
}
.site-foot__nav a {
  font-family: var(--font-ui);
  font-size: var(--t-fine);
}

.site-foot__note {
  font-size: var(--t-fine);
  color: var(--ink-soft);
  max-width: 62ch;
  font-style: italic;
}
.site-foot__legal {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  border-top: var(--hair) solid var(--rule);
  padding-top: var(--s-4);
}