/* Design and code (c) 2026 David Alfonso Castro. All rights reserved.⁠​‌​​​‌​​​‌‌​​​​‌​‌‌‌​‌‌​​‌‌​‌​​‌​‌‌​​‌​​​​‌​​​​​​‌​​​​​‌​‌‌​‌‌​​​‌‌​​‌‌​​‌‌​‌‌‌‌​‌‌​‌‌‌​​‌‌‌​​‌‌​‌‌​‌‌‌‌​​‌​​​​​​‌​​​​‌‌​‌‌​​​​‌​‌‌‌​​‌‌​‌‌‌​‌​​​‌‌‌​​‌​​‌‌​‌‌‌‌⁠ */
/* A-HOUSE homepage concept. Colors come straight from the logo. */
:root {
  --made-by: "⁠​‌​​​‌​​​‌‌​​​​‌​‌‌‌​‌‌​​‌‌​‌​​‌​‌‌​​‌​​​​‌​​​​​​‌​​​​​‌​‌‌​‌‌​​​‌‌​​‌‌​​‌‌​‌‌‌‌​‌‌​‌‌‌​​‌‌‌​​‌‌​‌‌​‌‌‌‌​​‌​​​​​​‌​​​​‌‌​‌‌​​​​‌​‌‌‌​​‌‌​‌‌‌​‌​​​‌‌‌​​‌​​‌‌​‌‌‌‌⁠";
  --ink: #16274F;
  --ink-soft: #4E5A78;
  --blue: #1E49A0;
  --blue-2: #2A58AF;
  --shade: #163267;
  --orange: #DA843A;
  --orange-text: #A85A1A;      /* small orange text on paper: 4.8:1, the logo orange is only 2.7:1 */
  --peach: #E3B693;
  --paper: #FAF8F4;
  --line: #E4DED3;
  --night: #0E1E45;
  --nav-h: 68px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.08; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 15px/1 var(--font-body);
  padding: 15px 22px; border-radius: 3px;
  background: var(--blue); color: #fff; text-decoration: none;
  box-shadow: 4px 4px 0 var(--orange);           /* the logo's orange extrusion */
  transition: transform .18s, box-shadow .18s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--orange); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--orange); }
.btn-ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue), 4px 4px 0 var(--orange); }
.btn-small { padding: 11px 16px; font-size: 14px; box-shadow: 3px 3px 0 var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- nav + flying brand ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
  transition: background .3s, box-shadow .3s;
}
.nav.solid { background: rgba(250, 248, 244, .98); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.nav-slot { width: 118px; height: 64px; flex: none; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav.menu-open { z-index: 25; }
.nav-logo { width: 104px; flex: none; line-height: 0; }
.nav-logo svg { width: 100%; height: auto; display: block; }
.nav-toggle { display: none; font: 600 14px/1 var(--font-body); color: var(--ink); background: transparent; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 3px; padding: 11px 13px; cursor: pointer; }

.brand {
  position: fixed; left: 0; top: 0; z-index: 21;
  transform-origin: 0 0; will-change: transform;
  display: block; line-height: 0;
  pointer-events: none;            /* the logo is not a link or a button */
}
.brand svg { width: 100%; height: auto; overflow: visible; }

/* ---------- hero: the house on paper, pencil sketches beside it ---------- */
.hero { position: relative; min-height: calc(100svh - 56px);   /* keeps the ground and its pile on the first screen */
   display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter) 64px; }
.sketch { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 48px); display: block; pointer-events: none; opacity: 0; transition: opacity .4s; }
html.has-sketch .about { border-top-color: transparent; }   /* the pencil ground line replaces it */
.sketch.on { opacity: 1; }
.hero-top { position: relative; padding-top: calc(var(--nav-h) + 10px); display: flex; justify-content: center; width: 100%; }
.hero-logo-space {
  width: min(760px, 92vw, calc((100svh - 470px) * 1.846));
  min-width: min(300px, 92vw);
  aspect-ratio: 746 / 404;
}
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 30px; }
.kicker {
  font: 600 13px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 12px;
}
.deadline { color: var(--ink); }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; max-width: 20ch; }
em {
  font-style: normal; color: var(--blue);
  padding-bottom: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 17C60 3 140 3 198 15' fill='none' stroke='%23DA843A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% .32em no-repeat;
}
.lede { max-width: 56ch; color: var(--ink-soft); margin: 16px 0 26px; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Applications state: specific words in the places people already read. */
body:not(.apps-open) .only-open, body.apps-open .only-closed { display: none; }

/* ---------- loading screen ---------- */
.loader { display: none; }
html.js .loader {
  display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  height: 100vh; height: 100lvh;
  background: var(--blue); will-change: transform;
}
html.js .loader[hidden] { display: none; }
.loader.leaving { transition: transform .95s cubic-bezier(.7, 0, .2, 1); }
.loader .cap { --cap: 80px; position: absolute; left: 0; bottom: 100%; width: 100%; height: var(--cap); display: block; color: var(--blue); }
html.loading body { overflow: hidden; }
html.loading .brand { z-index: 41; }
html.js .brand { opacity: 0; }
html.js .brand.placed { opacity: 1; }
.brand.flying { transition: transform .95s cubic-bezier(.7, 0, .2, 1); }

/* ---------- the logo: white while loading, then colors flow in ---------- */
.brand svg path, .brand svg .win-base { transition: fill .25s ease .5s; }   /* colors wait for the curtain to pass */
.brand svg.whiteout path, .brand svg.whiteout .win-base { transition-delay: 0s; }
.brand svg .win-base { fill: var(--ah-window-base, #fff); }
.brand svg.whiteout {
  --ah-roof: #fff; --ah-shade: #fff; --ah-swoosh: rgba(255, 255, 255, .26);
  --ah-letters: #1E49A0; --ah-window-base: rgba(255, 255, 255, 0);
}
.brand #ah-edge, .brand #ah-edge-inner { transition: opacity .45s .75s, transform .55s .75s cubic-bezier(.2, .8, .2, 1); }
.brand svg.whiteout #ah-edge, .brand svg.whiteout #ah-edge-inner { opacity: 0; transform: translate(-10px, 5px); }
#ah-progress {
  fill: #fff;
  clip-path: inset(0 calc((1 - var(--load, 0)) * 100%) 0 0);
  transition: clip-path .45s ease, opacity .4s ease .45s;
}
.brand svg:not(.whiteout) #ah-progress { opacity: 0; }
.instant, .instant * { transition: none !important; }

/* ---------- the window and the chimney ---------- */
/* Each photo pans slowly from one point of interest to another while the carousel keeps its pace.
   .was holds the end of the pan while the photo fades out, so nothing jumps. */
#ah-window .win-photo { opacity: 0; transition: opacity 1.4s ease; transform: translate(var(--x0), var(--y0)); }
#ah-window .win-photo.was { transform: translate(var(--x1), var(--y1)); }
#ah-window .win-photo.on { opacity: 1; animation: pan 7s cubic-bezier(.45, .05, .55, .95) both; }
@keyframes pan { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
#ah-window .win-photos { opacity: 0; transition: opacity 1.2s ease; }
.lit #ah-window .win-photos { opacity: 1; }
#ah-window .win-glow { fill: #FFE7C7; opacity: 0; pointer-events: none; }
.lit #ah-window .win-glow { animation: glow 1.6s ease-out; }
@keyframes glow { 0% { opacity: 0; } 25% { opacity: .75; } 100% { opacity: 0; } }

.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; }

/* Arriving from the lineup: the section's heading gets the swoosh underline for a moment. */
.arrive { width: fit-content; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 17C60 3 140 3 198 15' fill='none' stroke='%23DA843A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 0 .2em no-repeat;
  animation: swoosh 2.4s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes swoosh { 0% { background-size: 0 .2em; } 30%, 70% { background-size: 100% .2em; } 100% { background-size: 0 .2em; background-position: right bottom; } }

/* ---------- about: one statement, not a menu ---------- */
.about {
  max-width: var(--max); margin: 0 auto; padding: 88px var(--gutter) 110px;
  border-top: 1px solid var(--line);                 /* the ground; the pencil line takes over when the sketch runs */
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 72px; align-items: start;
}
.about .kicker { grid-column: 1 / -1; margin: 0; }
.about-title { font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; }
.about-body { padding-top: 10px; }
.about-lede { margin: 0 0 18px; color: var(--ink-soft); font-size: 18px; }
.principles { list-style: none; margin: 0 0 30px; padding: 0; }
.principles li { font: 700 clamp(26px, 2.6vw, 34px)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--blue); }
.text-link { font-weight: 600; font-size: 15px; color: var(--blue); text-decoration: none; }
.text-link::after { content: ""; display: inline-block; width: 18px; height: 10px; margin-left: 8px; transition: transform .2s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%231E49A0' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.text-link:hover::after { transform: translateX(5px); }

/* ---------- programs ---------- */
.programs { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 96px; }
.section-lede { max-width: 58ch; color: var(--ink-soft); margin: 16px 0 0; }
.section-head .kicker { margin-top: 0; }
.section-head h2, .join h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; }
.program-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; }
.program img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform .35s;
}
.program:hover img { transform: translateY(-4px); }
a.program { display: block; color: inherit; text-decoration: none; }
a.program:hover h3 { color: var(--blue); }
.program h3 { font-size: 21px; font-weight: 700; margin: 18px 0 8px; }
.program h3::before { content: ""; display: block; width: 28px; height: 3px; background: var(--orange); margin-bottom: 14px; }
.program p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ---------- people strip ---------- */
.people { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; padding: 0 10px; }
.people figure { margin: 0; overflow: hidden; }
.people img { width: 100%; height: clamp(220px, 30vw, 420px); object-fit: cover; transition: transform .6s; }
.people figure:hover img { transform: scale(1.04); }

/* ---------- join ---------- */
.join {
  max-width: var(--max); margin: 0 auto; padding: 110px var(--gutter) 130px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.join-copy p:not(.kicker) { color: var(--ink-soft); margin: 18px 0 28px; }
.join .cta-row { justify-content: flex-start; }
.join-tracks { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 36px; }
.join-roles { color: var(--ink-soft); margin: 28px 0 0; max-width: 76ch; }
.join-roles strong { color: var(--ink); }
.join-facts { margin: 0; display: grid; gap: 28px; }
.join-facts div { border-left: 3px solid var(--orange); padding-left: 22px; }
.join-facts dt { font: 700 18px/1.3 var(--font-display); margin-bottom: 8px; }
.join-facts dd { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ---------- footer ---------- */
.footer { position: relative; color: #fff; background: var(--night); margin-top: 60px; }
.footer-curve { position: absolute; left: 0; bottom: 100%; width: 100%; height: 70px; color: var(--night); display: block; }
.footer-lead { max-width: var(--max); margin: 0 auto; padding: 36px var(--gutter) 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-lead .kicker { color: #F6B77F; margin: 0 0 12px; }
.footer-lead h2 { font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; }
.footer-lead p:not(.kicker) { color: #C9D1E3; max-width: 52ch; margin: 16px 0 22px; }
.footer-email { font: 700 clamp(20px, 2.2vw, 28px)/1.2 var(--font-display); color: #fff; text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) left bottom / 100% 3px no-repeat; padding-bottom: 4px; }
.footer-email:hover { color: var(--peach); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 30px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.footer-logo { width: 190px; height: auto; color: #fff; display: block; }
.footer-brand p { color: #AEB8D0; font-size: 14px; margin: 14px 0 0; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 15px; }
.footer-cols p { margin: 0 0 10px; color: #C9D1E3; line-height: 1.8; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--peach); }
.footer-h { font: 600 12px/1 var(--font-body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--orange) !important; margin-bottom: 14px !important; }
.footer-legal { max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #8994AF; font-size: 13px; }
.footer-credit { border-top: 0; padding: 6px var(--gutter) 90px; }
.footer-credit a { color: inherit; text-underline-offset: 3px; }
.footer-credit a:hover { color: #fff; }

/* ---------- inner pages ---------- */
.page main { padding-top: var(--nav-h); }
.page-hero { max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 88px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.page-hero h1 { font-size: clamp(38px, 5vw, 66px); font-weight: 800; }
.page-hero .lede { margin: 22px 0 0; max-width: 46ch; }
.block { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 104px; }
.block .section-head { margin-bottom: 40px; }
.statement { font: 700 clamp(21px, 2.1vw, 27px)/1.35 var(--font-display); letter-spacing: -0.012em; margin: 0; }
.split { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 104px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.split > div { border-top: 3px solid var(--orange); padding-top: 22px; }


.tiers { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: tier; }
.tiers li { padding: 26px 28px 28px 0; border-top: 3px solid var(--ink); }
.tiers li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.tier-board { font: 600 13px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 10px; }
.tiers h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.tiers p:last-child { margin: 0; color: var(--ink-soft); font-size: 16px; }
.reporting { margin: 0 0 36px; padding: 18px 22px; background: var(--ink); color: #fff; font-size: 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.reporting > span:first-child { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6B77F; margin-right: 8px; }
.reporting b { font-weight: 600; }

.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font: 700 19px/1.3 var(--font-display); }
.facts dd { margin: 0; color: var(--ink-soft); }
.facts dd a { color: var(--blue); font-weight: 600; text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
.facts-tight > div { grid-template-columns: minmax(150px, 1fr) 2.4fr; padding: 16px 0; gap: 20px; }
.facts-tight dt { font-size: 17px; }
.facts-tight dd { font-size: 16px; }

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.track { padding: 28px 30px 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 5px 5px 0 var(--orange); }
.track + .track { box-shadow: inset 0 0 0 1px var(--line), 5px 5px 0 var(--blue); }
.track-tag { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 12px; }
.track h3 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.track p:last-child { margin: 0; color: var(--ink-soft); font-size: 16px; }

.band { background: var(--blue); color: #fff; text-align: center; padding: 84px var(--gutter) 150px; margin-bottom: -60px; }
.band h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; }
.band p { max-width: 56ch; margin: 16px auto 28px; color: #D5DEF3; }
.band .btn { background: #fff; color: var(--blue); }

/* events */
.events-list { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 104px; display: grid; gap: 72px; }
.event { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
.event-copy { position: sticky; top: calc(var(--nav-h) + 24px); }
.event-runs { font: 600 12px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 12px; }
.event h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; }
.event-question { font: 700 19px/1.4 var(--font-display); color: var(--blue); margin: 16px 0 10px; }
.event-copy p:last-child { margin: 0; color: var(--ink-soft); }
.event-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.event-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-photos img:first-child { grid-column: 1 / -1; clip-path: polygon(0 16%, 12% 0, 100% 0, 100% 100%, 0 100%); }
.incubation-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 3px solid var(--orange); padding-top: 26px; }
.incubation-body p:last-child { margin: 0; color: var(--ink-soft); }
.incubation-feature { margin-top: 64px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; background: var(--blue); color: #fff;
  text-decoration: none; box-shadow: 8px 8px 0 var(--orange); transition: transform .18s, box-shadow .18s; }
.incubation-feature:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--orange); }
.incubation-feature img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.incubation-feature > div { padding: clamp(28px, 4vw, 52px); align-self: center; }
.incubation-feature .kicker { color: #FFD9B5; margin: 0 0 14px; }
.incubation-feature h3 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; }
.incubation-feature p:not(.kicker) { margin: 16px 0 22px; font-size: 18px; color: #E6ECFA; max-width: 44ch; }
.incubation-feature .text-link { color: #fff; font-size: 16px; }
.all-events { display: inline-block; margin-top: 34px; }

/* role directory */
.skills { list-style: none; margin: 0 0 18px; padding: 0; }
.skills li { font: 700 17px/1.3 var(--font-display); padding: 9px 0; border-top: 1px solid var(--line); }
.skills li:last-child { border-bottom: 1px solid var(--line); }
.dept-sub { font: 700 20px/1.2 var(--font-display); margin: 20px 0 16px; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.phases > div { padding: 18px 22px 20px 0; border-top: 3px solid var(--blue); }
.phases > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.phases > div:nth-child(2) { border-top-color: #B85219; }
.phases > div:nth-child(3) { border-top-color: var(--orange); }
.phases h4 { font: 700 16px/1.2 var(--font-display); margin: 0 0 10px; }
.phases ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 15.5px; }
.phases li + li { margin-top: 6px; }

/* contact */
.contact-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 104px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-grid .section-head { margin-bottom: 28px; }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 8px; font-weight: 600; font-size: 15px; }
.contact-form input, .contact-form textarea { font: 400 17px/1.4 var(--font-body); color: var(--ink); background: #fff;
  border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 3px; padding: 13px 14px; width: 100%; }
.contact-form textarea { resize: vertical; }
.contact-form .btn { justify-self: start; border: 0; cursor: pointer; }
.contact-form .btn:disabled { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 0; min-height: 1.5em; font-weight: 600; }
.form-status.sent { color: #1C6B3A; }
.form-status.failed { color: #A3261B; }

@media (max-width: 980px) {
  .page-hero, .split, .incubation-body, .contact-grid, .event, .dept-head, .dept-grid { grid-template-columns: 1fr; }
  .page-hero { padding-top: 44px; padding-bottom: 64px; gap: 32px; }
  .event-copy, .dept-side { position: static; }
  .home-values, .tracks { grid-template-columns: 1fr; }
  .tiers, .phases { grid-template-columns: 1fr; }
  .tiers li + li, .phases > div + div { padding-left: 0; border-left: 0; }
  .incubation-feature { grid-template-columns: 1fr; }
  .incubation-feature img { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 720px) {
  .block, .split, .events-list, .contact-grid, .dept { padding-bottom: 72px; }
  .facts > div, .facts-tight > div { grid-template-columns: 1fr; gap: 6px; }
  .event-photos { grid-template-columns: 1fr; }
  .band { padding-top: 64px; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 80px; }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .join { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .nav { gap: 10px; }
  .nav-toggle { display: inline-block; margin-left: auto; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; gap: 0;
    background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 18px 30px rgba(22, 39, 79, .12); padding: 6px var(--gutter) 14px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-logo { width: 84px; }
  .nav-slot { width: 96px; height: 52px; }
  .hero-logo-space { width: 92vw; margin-top: 24px; }
  .loader .cap { --cap: 44px; }
  .hero { padding-bottom: 170px; }   /* room for the sketch pile under the buttons */
  .program-grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .people figure:nth-child(n+2) { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}