/* IESE AI Club — Prototype Playground foundation.
   Stable grid, loud labels, warm paper, hard borders and solid shadows. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-0: 0;
  --radius-1: 0;
  --radius-2: 0;
  --radius-3: 0;
  --font-family-display: "Space Grotesk", Arial, sans-serif;
  --font-family-text: "Space Grotesk", Arial, sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;
  --font-size-step-000: clamp(.69rem, .66rem + .12vw, .75rem);
  --font-size-step-00: clamp(.82rem, .78rem + .18vw, .94rem);
  --font-size-step-0: clamp(1rem, .95rem + .22vw, 1.13rem);
  --font-size-step-1: clamp(1.22rem, 1.1rem + .5vw, 1.55rem);
  --font-size-step-2: clamp(1.7rem, 1.45rem + 1vw, 2.35rem);
  --font-size-step-3: clamp(2.4rem, 1.95rem + 1.8vw, 3.65rem);
  --font-size-step-4: clamp(3.25rem, 2.4rem + 3.5vw, 5.9rem);
  --font-size-step-5: clamp(4.2rem, 2.6rem + 6.5vw, 9.5rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-line-height-tight: .9;
  --font-line-height-snug: 1.12;
  --font-line-height-body: 1.58;
  --ink: #151515;
  --cream: #fff5dd;
  --paper: #fffaf0;
  --yellow: #ffd84d;
  --blue: #4565eb;
  --coral: #ff5a4e;
  --white: #fffef9;
  --muted: #655f55;
  --shadow-1: 4px 4px 0 var(--ink);
  --shadow-2: 6px 6px 0 var(--ink);
  --shadow-3: 9px 9px 0 var(--ink);
  --color-neutral-1: var(--cream);
  --color-neutral-2: var(--paper);
  --color-neutral-3: #f4e9ce;
  --color-neutral-4: #e7dbc1;
  --color-neutral-5: #d2c5aa;
  --color-neutral-6: var(--ink);
  --color-neutral-7: var(--ink);
  --color-neutral-8: #726b60;
  --color-neutral-9: var(--muted);
  --color-neutral-10: #4c473f;
  --color-neutral-11: #322f2a;
  --color-neutral-12: var(--ink);
  --color-brand-3: #ff938a;
  --color-brand-6: #e5443a;
  --color-brand-9: var(--coral);
  --color-gold-3: #ffe784;
  --color-gold-6: var(--yellow);
  --color-gold-9: #6b5200;
  --ease-out: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-neutral-1); color: var(--color-neutral-12);
  font-family: var(--font-family-text); font-size: var(--font-size-step-0);
  line-height: var(--font-line-height-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.solid { fill: currentColor; stroke: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--space-6); }

/* ---- Top bar (all pages) ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); position: relative; z-index: 2; }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); font-size: var(--font-size-step-1); }
.wordmark em { font-style: italic; color: var(--color-brand-9); }
.topnav { display: flex; align-items: center; gap: var(--space-6); font-size: var(--font-size-step-00); color: var(--color-neutral-11); flex-wrap: wrap; }
.topnav a { transition: color 150ms ease; }
.topnav a:hover { color: var(--color-brand-9); }
.topnav a[aria-current="page"] { color: var(--color-brand-9); font-weight: var(--font-weight-semibold); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-weight-semibold); font-size: var(--font-size-step-00);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-2);
  background: var(--color-brand-9); color: var(--color-neutral-1);
  border: 1px solid transparent;
}
.btn:hover { background: var(--color-brand-6); }
.btn.ghost { background: transparent; color: var(--color-neutral-12); border-color: var(--color-neutral-7); }
.btn.ghost:hover { border-color: var(--color-brand-9); background: transparent; }
.btn, .to-top { transition: transform 160ms var(--ease-out), background 150ms ease, border-color 150ms ease; }
.btn:active, .to-top:active { transform: scale(0.97); }

/* ---- Section scaffolding ---- */
section.block { padding-block: var(--space-8); }
section.block + section.block { border-top: 1px solid var(--color-neutral-6); }
.kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-step-00); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-9);
  margin: 0 0 var(--space-4);
}
h1.page-title {
  font-family: var(--font-family-display); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-step-4); line-height: var(--font-line-height-tight);
  letter-spacing: -0.02em; margin: 0 0 var(--space-4); max-width: 18ch;
}
/* margin-right clears the italic overhang: the negative letter-spacing above
   pulls upright punctuation (?, ., ") back into the slanted final glyph. */
h1.page-title em { color: var(--color-brand-9); font-style: italic; margin-right: 0.14em; }
h2.title {
  font-family: var(--font-family-display); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-step-3); line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 var(--space-4); max-width: 20ch;
}
.prose { color: var(--color-neutral-11); max-width: 60ch; }
.prose p { margin: 0 0 var(--space-4); }
.link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); font-size: var(--font-size-step-00); color: var(--color-brand-9); transition: color 150ms ease; }
.link:hover { color: var(--color-brand-6); }
.link svg.i { width: 15px; height: 15px; }

/* ---- Panel (the one raised surface family) + dual accent line ---- */
.panel {
  background: var(--color-neutral-2); border: 1px solid var(--color-neutral-6);
  border-radius: var(--radius-2); box-shadow: var(--shadow-2);
  padding: var(--space-6);
}
.accent-line { height: 3px; width: 40%; background: var(--color-brand-9); border-radius: var(--radius-1); position: relative; }
.accent-line::after { content: ''; position: absolute; left: calc(100% + var(--space-2)); top: 0; height: 3px; width: 25%; background: var(--color-gold-6); border-radius: var(--radius-1); }

/* ---- Footer (all pages) ---- */
footer { border-top: 1px solid var(--color-neutral-6); padding-block: var(--space-6); color: var(--color-neutral-9); font-size: var(--font-size-step-00); }
footer .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }

/* ---- Back to top ---- */
.to-top {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 50;
  width: 44px; height: 44px; border-radius: var(--radius-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-9); color: var(--color-neutral-1);
  border: 1px solid transparent; cursor: pointer; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background 150ms ease;
}
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--color-brand-6); }
.to-top svg.i { width: 18px; height: 18px; }

/* ---- Scroll reveal (JS-gated so content never hides without JS) ---- */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.js .rv.in { opacity: 1; transform: translateY(0); }

/* ---- Hover craft (pointer devices only) ---- */
@media (hover: hover) and (pointer: fine) {
  .panel { transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
  .panel:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
}

/* ---- Capture mode (headless render): settled final state ---- */
.capture .rv, .capture.js .rv { opacity: 1; transform: none; transition: none; }

/* ---- Reduced motion: gentler, fewer - never zero comprehension ---- */
@media (prefers-reduced-motion: reduce) {
  .js .rv { transition: opacity 200ms ease; transform: none; }
  .btn, .to-top, .panel { transition-property: opacity, background, border-color; }
  .btn:active, .to-top:active, .panel:hover { transform: none; }
}