/* site.css — research.byiq.org layout layer.
   Loaded after nocturne.css. Holds page layout only: the lit ground, the
   content column, the type scale, the faded rules and the accent kicker.
   Every color/font/radius comes from a Nocturne token; the remaining px are
   bespoke layout dimensions taken verbatim from the design references
   (values Nocturne does not carry as tokens). */

body { background: var(--color-bg); text-wrap: pretty; }

/* Skip link — visually hidden until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-md);
}
.skip-link:focus { left: 16px; top: 16px; }

/* ── Page ground ──────────────────────────────────────────────────────────
   The lit backdrop, framed as one bordered, rounded surface and centered as
   the content column (max 1180px). --pad is the internal horizontal gutter,
   collapsed on small screens. */
.page-ground {
  --pad: 72px;
  max-width: 1180px;
  margin: 40px auto;
  color: var(--color-text);
  font-family: var(--font-body);
  background:
    radial-gradient(1000px 620px at 85% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(900px 700px at -10% 100%, color-mix(in srgb, black 35%, transparent), transparent 55%),
    var(--color-bg);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── Navigation ── */
.site-nav { padding-inline: var(--pad); }
.site-nav .nav-brand { white-space: nowrap; }

/* Wordmark — the "IQ" lifts to teal for punch. Nocturne is a mono blurple
   system with no teal token, so --color-brand-iq is a deliberate off-system
   brand accent, defined here and used only on the wordmark. It clears well
   over 4.5:1 on the ground; kept to weight 500 per the system, so the lift
   is colour, not weight. */
.page-ground { --color-brand-iq: #2dd4bf; }
.brand-iq { color: var(--color-brand-iq); letter-spacing: 0.01em; }

/* ── Faded rules ── */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
/* In-content structural rule — solid from the left edge, fading only at the
   right, painted from neutral-700. */
.rule-inline {
  height: 1px; border: 0;
  background: linear-gradient(to right, transparent, var(--color-neutral-700) 0px calc(100% - 48px), transparent);
}

/* ── Accent kicker (dash + label) ── */
.kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.kicker-dash { width: 44px; height: 1px; background: var(--color-accent); }
.kicker-text {
  font-size: 13px; line-height: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent);
}

/* ── Hero ── */
.hero { padding: 112px var(--pad) 84px; }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 8vw, 76px); line-height: 1.105; letter-spacing: -0.018em;
  margin: 0 0 0 -0.06em; max-width: 19ch;
}
.display span { display: block; }
.display-dim { color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.lede {
  font-size: 18px; line-height: 30px; max-width: 56ch; margin: 38px 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero-actions { display: flex; gap: var(--space-3); margin-top: 34px; }

/* ── 4fr / 7fr split section ── */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
.section-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 34px; line-height: 42px; letter-spacing: -0.012em; margin: 0;
}
.section-title.measure { max-width: 16ch; }

.section-work { padding: 76px var(--pad); }

/* Numbered steps */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 28px; padding: 26px 0; }
.step-num {
  font-family: var(--font-heading); font-size: 15px; line-height: 28px;
  color: var(--color-accent); font-feature-settings: 'tnum' 1; margin: 0;
}
.step-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 23px; line-height: 30px; margin: 0 0 10px;
}
.step-body {
  font-size: 16px; line-height: 28px; margin: 0; max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ── Projects index ── */
.section-projects { padding: 76px var(--pad) 96px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 44px;
}
.section-head-meta {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-feature-settings: 'tnum' 1;
}
.index { display: flex; flex-direction: column; }
.project-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 3fr) minmax(0, 5fr) 128px 24px;
  gap: 28px; align-items: baseline; padding: 28px 0;
  color: inherit; text-decoration: none;
}
.project-row:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.project-num {
  grid-column: 1;
  font-family: var(--font-heading); font-size: 14px; line-height: 26px;
  color: var(--color-accent); font-feature-settings: 'tnum' 1;
}
.project-id { grid-column: 2; }
.project-name {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 30px; letter-spacing: -0.01em;
}
.project-domain {
  display: block; font-size: 14px; line-height: 24px; margin-top: 6px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.project-summary {
  grid-column: 3;
  font-size: 16px; line-height: 26px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.project-tag { grid-column: 4; justify-self: start; }
.project-arrow { grid-column: 5; color: var(--color-accent); font-size: 18px; line-height: 26px; }

/* ── About / Team teasers ── */
.teasers {
  padding: 0 var(--pad) 84px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px;
}
.teaser {
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: 34px; background: color-mix(in srgb, var(--color-neutral-800) 40%, transparent);
}
.teaser-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 30px; margin: 0 0 12px;
}
.teaser-body {
  font-size: 16px; line-height: 28px; margin: 0 0 20px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
/* Paragraph-size links take accent-300 for 4.5:1 body contrast (per the
   design-system rule); the accent itself is reserved for chrome and marks. */
.arrow-link { font-size: 15px; color: var(--color-accent-300); }
.arrow-link:hover { color: var(--color-accent); }

/* ── Footer ── */
.site-footer {
  padding: 38px var(--pad) 44px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: 13px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.footer-links { display: flex; gap: 28px; }
.footer-links a { color: var(--color-accent-300); }
.footer-links a:hover { color: var(--color-accent); }

/* ══ Project / interior pages ═════════════════════════════════════════════ */
/* Interior content column inside the card shell; the stat band sits outside
   .wrap so it spans the full card width. */
.wrap { padding-inline: var(--pad); }

.breadcrumb {
  padding: 64px 0 0;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.breadcrumb a { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { margin: 0 8px; }

.project-head { padding: 38px 0 72px; }
.project-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(44px, 8vw, 72px); line-height: 1.08; letter-spacing: -0.018em;
  margin: 0 0 0 -0.06em;
}
.project-lede {
  font-size: 22px; line-height: 34px; max-width: 44ch; margin: 30px 0 0;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.project-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 34px; }

/* Right-fading rule painted from the divider token (bounds meta strip,
   related and footer); .rule-inline (neutral-700) parts the body sections. */
.rule-edge {
  height: 1px; border: 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 0px calc(100% - 48px), transparent);
}

.meta-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  padding: 30px 0 32px;
}
.meta-label {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.meta-value { font-size: 16px; line-height: 24px; margin: 0; font-feature-settings: 'tnum' 1; }

/* Full-bleed stat band — the one saturated field. */
.stat-band {
  margin-top: 64px; padding: 64px var(--pad);
  background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
}
.stat-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 36px; }
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 50px; line-height: 56px; margin: 0 0 0 -0.055em;
}
.stat-label {
  font-size: 13px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 14px 0 0; color: color-mix(in srgb, var(--color-text) 64%, transparent);
}

/* Body section: 4fr/7fr split reuses .split; .p-section adds the vertical rhythm. */
.p-section { padding: 80px 0; }
.section-title.measure-18 { max-width: 18ch; }

.prose p {
  font-size: 17px; line-height: 29px; margin: 0 0 22px; max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.prose p:last-child { margin-bottom: 0; }

.approach { display: flex; flex-direction: column; }
.approach-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 28px; padding: 30px 0; }
.approach-item:first-child { padding-top: 0; }
.approach-item:last-child { padding-bottom: 0; }
.approach-num {
  font-family: var(--font-heading); font-size: 15px; line-height: 28px;
  color: var(--color-accent); font-feature-settings: 'tnum' 1; margin: 0;
}
.approach-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 32px; margin: 0 0 12px;
}
.approach-body {
  font-size: 16px; line-height: 28px; margin: 0; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.status-note {
  font-size: 14px; line-height: 24px; margin: 22px 0 0; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.related { padding: 72px 0 96px; }
.related-head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card-link {
  color: inherit; padding: 28px; gap: 12px;
  border: 1px solid transparent; text-decoration: none;
}
.card-link:hover { border-color: var(--color-accent); }

/* Team roster */
.roster { display: flex; flex-direction: column; }
.roster-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: 28px; align-items: baseline; padding: 26px 0;
}
.roster-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; line-height: 28px; }
.roster-role { font-size: 15px; line-height: 26px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.roster-note { font-size: 15px; line-height: 26px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* ══ Responsive collapse ══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .project-row { grid-template-columns: 44px minmax(0, 1fr); align-items: start; row-gap: 10px; }
  .project-summary { grid-column: 2; }
  .project-tag, .project-arrow { display: none; }
  .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 720px) {
  .page-ground { --pad: 20px; margin: 20px auto; }
  .hero { padding-top: 72px; }
  .teasers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-head { flex-wrap: wrap; align-items: flex-start; }
  .site-footer { flex-direction: column; gap: 16px; }
  .nav-collapse { display: none; }
  .p-section { padding: 56px 0; }
  .project-head { padding-top: 28px; }
  .stat-band { padding-block: 44px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; justify-content: start; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .roster-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}