/* ============================================================
   ISCO MEDIA — Design System
   Blocks on a snap grid. Blue on warm paper. One light source.
   Rule: blue takes WHITE text. Every accent takes INK text.
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --paper:        #FAF7F2;   /* page — warm off-white, never #fff */
  --surface:      #FFFFFF;
  --surface-tint: #F1ECE3;
  --surface-tint2:#E8E1D5;
  --line:         #E2DACB;

  /* ---- ink ---- */
  --ink:       #14171C;   /* 16.8:1 on paper */
  --ink-muted: #4A5160;   /*  7.5:1 */
  --ink-soft:  #5D6575;   /*  5.5:1 — smallest permitted */

  /* ---- brand: blue ---- */
  --blue:       #0866FF;  /* BLOCK FILL. white text 4.82:1 */
  --blue-deep:  #0A4BC2;  /* BUTTONS + LINKS. white text 7.5:1 */
  --blue-tint:  #DCE9FF;
  --blue-sky:   #BBD9FF;

  /* ---- accents (ink text only) ---- */
  --butter:      #FFD166;
  --butter-tint: #FFF1CF;
  --coral:       #FF6B4A;
  --coral-tint:  #FFE2DA;
  --mint:        #2ED3B7;
  --mint-tint:   #D6F5EE;

  /* ---- shape ---- */
  --r-block: 20px;
  --r-sm:    12px;
  --r-pill:  999px;

  /* ---- spacing (8px base, nothing off-scale) ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 160px;

  /* ---- ONE LIGHT SOURCE. every shadow is down-right. ---- */
  --shadow:       5px 5px 0 var(--ink);
  --shadow-hover: 8px 8px 0 var(--ink);
  --shadow-soft:  4px 4px 0 var(--surface-tint2);
  --border: 2px solid var(--ink);

  /* ---- type scale (390px → 1440px) ---- */
  --step--1: clamp(0.875rem, 0.852rem + 0.10vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.157rem + 0.38vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.315rem + 0.76vw, 2rem);
  --step-3:  clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem);
  --step-4:  clamp(2.375rem, 1.771rem + 2.48vw, 4rem);
  --step-5:  clamp(2.75rem, 1.886rem + 4.00vw, 5.5rem);

  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --maxw-wide: 1360px;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper: #101318; --surface: #191D24; --surface-tint: #20252E;
    --surface-tint2: #272D37; --line: #2E3541;
    --ink: #F2F0EA; --ink-muted: #ADB4C0; --ink-soft: #99A1AE;
    --blue: #2B7BFF; --blue-deep: #6BA4FF; --blue-tint: #16243A; --blue-sky: #1B3050;
    --butter: #FFD166; --butter-tint: #33290F;
    --coral: #FF8B6B; --coral-tint: #3A1E16;
    --mint: #4FD9C0; --mint-tint: #10302B;
    --shadow: 5px 5px 0 #000; --shadow-hover: 8px 8px 0 #000;
    --border: 2px solid #000;
  }
}
:root[data-theme="dark"] {
  --paper: #101318; --surface: #191D24; --surface-tint: #20252E;
  --surface-tint2: #272D37; --line: #2E3541;
  --ink: #F2F0EA; --ink-muted: #ADB4C0; --ink-soft: #99A1AE;
  --blue: #2B7BFF; --blue-deep: #6BA4FF; --blue-tint: #16243A; --blue-sky: #1B3050;
  --butter: #FFD166; --butter-tint: #33290F;
  --coral: #FF8B6B; --coral-tint: #3A1E16;
  --mint: #4FD9C0; --mint-tint: #10302B;
  --shadow: 5px 5px 0 #000; --shadow-hover: 8px 8px 0 #000;
  --border: 2px solid #000;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grain — kills the flat-Figma-export look */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { body::after { opacity: .02; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p  { margin: 0 0 var(--s4); max-width: 68ch; }
a  { color: var(--blue-deep); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap  { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2rem, var(--maxw-wide)); margin-inline: auto; }
@media (max-width: 767px) { .wrap, .wrap-wide { width: calc(100% - 32px); } }

section { padding-block: var(--s9); position: relative; scroll-margin-top: 96px; }
@media (max-width: 767px) { section { padding-block: var(--s8); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ type helpers */
/* two-tone headline: italic serif-ish line over heavy sans line */
.h-script {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: .62em;
  letter-spacing: -0.02em;
  opacity: .92;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink);
  background: var(--surface);
  border: var(--border); border-radius: var(--r-pill);
  padding: 6px 16px; margin-bottom: var(--s4);
}
.lead { font-size: var(--step-1); color: var(--ink-muted); max-width: 60ch; }
.num  { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; line-height: .9; letter-spacing: -0.02em; }

/* ============================================================ block primitive */
.block {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--r-block);
  box-shadow: var(--shadow);
  padding: var(--s5);
  position: relative;
}
.block--blue   { background: var(--blue);   color: #fff; }
.block--blue *  { color: #fff; }
.block--butter { background: var(--butter); color: var(--ink); }
.block--coral  { background: var(--coral);  color: var(--ink); }
.block--mint   { background: var(--mint);   color: var(--ink); }
.block--tint   { background: var(--surface-tint); }
.block--sky    { background: var(--blue-sky); }
.block--flat   { box-shadow: none; }

.block--lift { transition: transform .12s ease, box-shadow .12s ease; }
.block--lift:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .block--lift:hover { transform: none; } }

@media (max-width: 767px) {
  .block { padding: var(--s4); box-shadow: 4px 4px 0 var(--ink); }
}

/* the empty slot — absence as a designed object, never a broken card */
.slot {
  border: 2px dashed var(--line);
  border-radius: var(--r-block);
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/12px 12px,
    var(--surface-tint);
  box-shadow: none;
  display: grid; place-content: center; text-align: center;
  padding: var(--s5); min-height: 150px; color: var(--ink-muted);
}
.slot b { display:block; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-soft); margin-bottom: 4px; }
.slot span { font-size: var(--step--1); }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  padding: 14px 28px; min-height: 52px;
  border: var(--border); border-radius: var(--r-pill);
  background: var(--blue-deep); color: #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { background: var(--surface); color: var(--ink); }
.btn--butter{ background: var(--butter); color: var(--ink); }
.btn--lg { font-size: var(--step-1); padding: 18px 36px; min-height: 62px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* tag pill */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: var(--border); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: var(--step--1); font-weight: 600; white-space: nowrap;
}

/* ============================================================ grid */
.grid { display: grid; gap: var(--s5); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ============================================================ the eight-block kit */
/* ONE set of nodes, repositioned per section by GSAP Flip. */
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 767px) { .kit { grid-template-columns: repeat(2, 1fr); } }

.kit-block {
  aspect-ratio: 1;
  border: var(--border); border-radius: var(--r-block);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s3);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step--1); line-height: 1.1;
  text-transform: uppercase; letter-spacing: .02em;
}
.kit-block[data-fill="blue"]   { background: var(--blue);      color:#fff; }
.kit-block[data-fill="butter"] { background: var(--butter);    color: var(--ink); }
.kit-block[data-fill="coral"]  { background: var(--coral);     color: var(--ink); }
.kit-block[data-fill="mint"]   { background: var(--mint);      color: var(--ink); }
.kit-block[data-fill="sky"]    { background: var(--blue-sky);  color: var(--ink); }
.kit-block[data-fill="tint"]   { background: var(--surface-tint); color: var(--ink); }
.kit-block[data-fill="white"]  { background: var(--surface);   color: var(--ink); }
.kit-block[data-fill="ink"]    { background: var(--ink);       color: var(--paper); }

/* stud / slot keying — the ONE surviving puzzle gesture. no jigsaw. */
.stud::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 24px; height: 8px; transform: translateX(-50%);
  background: inherit; border: var(--border); border-top: none;
  border-radius: 0 0 6px 6px;
}

/* ============================================================
   Light is the brand default. Chris specified a warm off-white
   page; prospects arriving with OS dark mode still see the
   designed site. The dark tokens above stay in place — remove
   data-theme="light" from <html> to re-enable auto dark mode.
   ============================================================ */
:root[data-theme="light"] {
  --paper: #FAF7F2; --surface: #FFFFFF; --surface-tint: #F1ECE3;
  --surface-tint2: #E8E1D5; --line: #E2DACB;
  --ink: #14171C; --ink-muted: #4A5160; --ink-soft: #5D6575;
  --blue: #0866FF; --blue-deep: #0A4BC2; --blue-tint: #DCE9FF; --blue-sky: #BBD9FF;
  --butter: #FFD166; --butter-tint: #FFF1CF;
  --coral: #FF6B4A; --coral-tint: #FFE2DA;
  --mint: #2ED3B7; --mint-tint: #D6F5EE;
  --shadow: 5px 5px 0 var(--ink); --shadow-hover: 8px 8px 0 var(--ink);
  --border: 2px solid var(--ink);
}