/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: CrabBots editorial-industrial · enrichment: real portfolio cover · nav: N1a · footer: Ft2
 * H2 knobs: ratio=7/5, right-side=proof column, divider=negative space · F3 knobs: columns=3, rules=every row, numbers=tabular
 * audience: local and technical company partners · use: understand support, then email or download · tone: confident technical
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · tokens: pass · responsive: pass
 */
@import url("../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--portfolio-ink);
  background: var(--portfolio-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
img { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent); }
:focus-visible { outline: var(--rule-mid) solid var(--color-accent); outline-offset: var(--space-2xs); }

.skip {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: -999rem;
  z-index: var(--z-sticky);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-ink);
  background: var(--color-paper);
}
.skip:focus { inset-inline-start: var(--space-xs); }

.brief-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter);
  border-bottom: var(--rule-hair) solid var(--portfolio-rule);
}
.brief-nav__brand { width: min(14rem, 56vw); }
.brief-nav__brand img { width: 100%; }
.brief-nav p {
  margin: 0;
  color: var(--portfolio-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.brief-nav > a:last-child { justify-self: start; min-height: var(--hit); display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; }

main { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-4xl); }
.brief { max-width: 64ch; }
.brief__context { margin: 0 0 var(--space-lg); color: var(--portfolio-muted); font-size: var(--text-sm); letter-spacing: var(--tracking-label); }
h1, h2 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 700;
  font-synthesis: none;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.brief__lede { margin: var(--space-lg) 0 0; font-size: var(--text-md); color: var(--portfolio-ink); }
.brief__actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; margin: var(--space-xl) 0 var(--space-3xl); }
.brief__actions a, .packet__head a { min-height: var(--hit); display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; }
.brief__primary {
  padding-inline: var(--space-lg);
  border: var(--rule-mid) solid var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.brief__primary:hover { color: var(--color-ink); background: var(--color-accent); }
.brief__primary:active { transform: translateY(1px); }
.brief section { margin-block: var(--space-3xl); }
.brief h2 { margin: 0 0 var(--space-md); font-size: var(--text-xl); line-height: var(--lh-snug); }
.brief p { max-width: 64ch; }
.brief section p + p { margin-top: var(--space-md); }
.brief__facts { margin: var(--space-3xl) 0; border-top: var(--rule-mid) solid var(--portfolio-ink); }
.brief__facts div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--portfolio-rule); }
.brief__facts dt { color: var(--portfolio-muted); }
.brief__facts dd { margin: 0; font-weight: 600; }
.brief__close { margin: var(--space-3xl) 0 0; padding-block-start: var(--space-lg); border-top: var(--rule-mid) solid var(--color-accent); font-size: var(--text-md); }

.sponsor-levels { margin: var(--space-lg) 0; border-top: var(--rule-mid) solid var(--portfolio-ink); }
.sponsor-levels div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--portfolio-rule); }
.sponsor-levels dt { font-weight: 600; }
.sponsor-levels dd { margin: 0; color: var(--portfolio-muted); font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }
.current-sponsors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.current-sponsors li { min-width: 0; padding: var(--space-md); border: var(--rule-hair) solid var(--portfolio-rule); font-weight: 600; }
.current-sponsors a { display: block; min-height: var(--hit); align-content: center; }

.packet { margin-block-start: var(--space-4xl); }
.packet__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: end; padding-block-end: var(--space-md); border-bottom: var(--rule-mid) solid var(--portfolio-ink); }
.packet__head h2 { margin: 0; font-size: var(--text-xl); }
.packet__head p { margin: var(--space-2xs) 0 0; color: var(--portfolio-muted); }
.packet__preview { display: grid; grid-template-columns: minmax(0, 34rem); justify-content: center; gap: var(--space-sm); margin-block-start: var(--space-lg); padding: var(--space-lg); border: var(--rule-hair) solid var(--portfolio-rule); background: var(--portfolio-paper-raised); color: var(--portfolio-ink); text-decoration: none; }
.packet__preview img { width: 100%; border: var(--rule-hair) solid var(--portfolio-rule); }
.packet__preview span { justify-self: center; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.packet__preview:hover span { color: var(--color-accent); }

.brief-footer { max-width: var(--page-max); margin-inline: auto; padding: 0 var(--page-gutter) var(--space-3xl); }
.brief-footer > p:first-child { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-snug); }
.brief-footer > p:last-child { margin: 0; color: var(--portfolio-muted); font-family: var(--font-mono); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .brief-nav { grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); gap: var(--space-lg); }
  .brief-nav p { text-align: center; }
  .brief-nav > a:last-child { justify-self: end; }
  main { padding-block-start: var(--space-3xl); }
  .brief { margin-inline-start: clamp(0rem, 8vw, 8rem); }
}

@media (max-width: 30rem) {
  .brief__facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .current-sponsors { grid-template-columns: 1fr; }
  .packet__preview { padding: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; }
  .brief__primary:active { transform: none; }
}

@media print {
  .skip, .packet__preview { display: none; }
  body { color: var(--color-ink); background: var(--color-paper); }
  .brief-nav, .brief__facts div, .packet__head { border-color: var(--color-rule); }
  .brief-nav p, .brief__context, .packet__head p, .brief-footer > p:last-child, .brief__facts dt { color: var(--color-muted); }
}

/* Sponsor brief — Split Studio rebuild */
body {
  color: var(--color-steel-7);
  background: var(--color-ink-2);
  font-family: var(--font-body);
}
a { color: inherit; }
.brief-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter);
  border-bottom: var(--rule-hair) solid var(--color-rule-dark);
}
.brief-nav__brand { display: block; width: min(11rem, 48vw); }
.brief-nav__brand img { width: 100%; }
.brief-nav nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-md); }
.brief-nav nav a { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.brief-nav nav a:hover { color: var(--color-accent); }

main {
  max-width: none;
  margin: 0;
  padding: 0;
}
.sponsor-brief { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-4xl); }
.partner-hero,
.studio-section,
.contact-strip { min-width: 0; }
.partner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: end;
  padding-block: var(--space-xl) var(--space-3xl);
}
.partner-hero__copy { max-width: 42rem; }
.season-line { margin: 0 0 var(--space-md); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); }
.partner-hero h1,
.studio-section h2,
.contact-strip h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--lh-snug); }
.partner-hero__copy > p:not(.season-line) { max-width: 61ch; margin: var(--space-lg) 0 0; color: var(--color-steel-5); font-size: var(--text-md); }
.partner-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding-inline: var(--space-lg); border: var(--rule-hair) solid var(--color-steel-5); color: var(--color-steel-7); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.action:hover { border-color: var(--color-accent); color: var(--color-accent); }
.action:active { transform: translateY(1px); }
.action--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-ink); }
.action--primary:hover { background: var(--color-accent-hot); border-color: var(--color-accent-hot); color: var(--color-ink); }

.funding-snapshot { padding: var(--space-lg); background: var(--color-ink-3); border: var(--rule-hair) solid var(--color-rule-dark); }
.funding-snapshot dl { margin: 0; }
.funding-snapshot dl > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-dark); }
.funding-snapshot dt { color: var(--color-steel-4); font-family: var(--font-mono); font-size: var(--text-sm); }
.funding-snapshot dd { margin: 0; color: var(--color-paper); font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; font-weight: 700; }
.funding-snapshot p { margin: var(--space-lg) 0 0; color: var(--color-steel-5); font-size: var(--text-sm); }

.studio-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule-dark); }
.studio-section__copy { min-width: 0; }
.studio-section h2 { font-size: var(--text-2xl); }
.studio-section__copy p { max-width: 52ch; margin: var(--space-md) 0 0; color: var(--color-steel-5); }
.support-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-dark); }
.support-list li { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule-dark); font-weight: 600; }

.levels-table-wrap { overflow-x: auto; }
.levels-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.levels-table th,
.levels-table td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-dark); text-align: left; vertical-align: top; }
.levels-table thead th { color: var(--color-steel-4); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); }
.levels-table tbody th { color: var(--color-paper); font-weight: 700; }
.levels-table td:nth-child(2) { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.levels-table td:last-child { color: var(--color-steel-5); }

.sponsor-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-dark); }
.sponsor-wall li { min-width: 0; border-bottom: var(--rule-hair) solid var(--color-rule-dark); }
.sponsor-wall li + li { border-inline-start: var(--rule-hair) solid var(--color-rule-dark); }
.sponsor-wall a { display: grid; gap: var(--space-xs); min-height: 100%; padding: var(--space-lg); color: var(--color-paper); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-decoration: none; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.sponsor-wall a:hover { color: var(--color-ink); background: var(--color-accent); }
.sponsor-wall span { color: var(--color-steel-4); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-label); }
.sponsor-wall a:hover span { color: var(--color-ink); }

.text-action { display: inline-block; margin-top: var(--space-lg); color: var(--color-accent); font-weight: 600; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-xs); }
.portfolio-card { margin: 0; align-self: start; border: var(--rule-hair) solid var(--color-rule-dark); background: var(--color-ink-3); }
.portfolio-card a { display: grid; gap: var(--space-sm); padding: var(--space-md); color: var(--color-paper); text-decoration: none; }
.portfolio-card img { width: 100%; border: var(--rule-hair) solid var(--color-rule-dark); }
.portfolio-card figcaption { color: var(--color-steel-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); }
.portfolio-card a:hover figcaption { color: var(--color-accent); }

.contact-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xl); align-items: end; margin-top: var(--space-3xl); padding: var(--space-xl); background: var(--color-paper); color: var(--color-ink); }
.contact-strip h2 { font-size: var(--text-2xl); }
.contact-strip p { margin: var(--space-xs) 0 0; max-width: 44ch; color: var(--color-steel-2); }
.contact-strip .action { border-color: var(--color-ink); color: var(--color-ink); }
.contact-strip .action:hover { border-color: var(--color-accent-deep); background: var(--color-accent-deep); color: var(--color-paper); }

.brief-footer { max-width: var(--page-max); margin-inline: auto; padding: var(--space-xl) var(--page-gutter) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule-dark); }
.brief-footer p { margin: 0; color: var(--color-steel-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-relaxed); }
.brief-footer a { white-space: nowrap; }

@media (min-width: 60rem) {
  .partner-hero { grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); }
  .studio-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sponsor-section .studio-section__copy, .help-section .studio-section__copy { order: 2; }
  .sponsor-section .sponsor-wall, .help-section .portfolio-card { order: 1; }
}
@media (max-width: 40rem) {
  .brief-nav { align-items: flex-start; flex-direction: column; }
  .brief-nav nav { justify-content: flex-start; gap: var(--space-xs); }
  .brief-nav nav a { font-size: var(--text-xs); }
  .sponsor-brief { padding-block: var(--space-xl) var(--space-3xl); }
  .partner-hero { gap: var(--space-xl); padding-block: var(--space-lg) var(--space-2xl); }
  .partner-hero h1 { font-size: var(--text-3xl); }
  .studio-section { gap: var(--space-lg); padding-block: var(--space-2xl); }
  .sponsor-wall { grid-template-columns: minmax(0, 1fr); }
  .sponsor-wall li + li { border-inline-start: 0; }
  .levels-table-wrap { overflow: visible; }
  .levels-table, .levels-table tbody, .levels-table tr, .levels-table th, .levels-table td { display: block; min-width: 0; width: 100%; }
  .levels-table thead { display: none; }
  .levels-table tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-dark); }
  .levels-table th, .levels-table td { padding: 0; border: 0; }
  .levels-table td { display: grid; grid-template-columns: minmax(6rem, 2fr) minmax(0, 5fr); gap: var(--space-sm); margin-top: var(--space-xs); }
  .levels-table td::before { content: attr(data-label); color: var(--color-steel-4); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-label); }
  .contact-strip { align-items: stretch; padding: var(--space-lg); }
  .contact-strip .action { width: 100%; }
}