/* 300 — the launch site. Dark, red, Real Head, a sibling of the report. */
/* Type: FF Real Head Pro, Northeastern's typeface (2026-10-16; IBM Plex before).
 * Semilight up to 449, Medium 450-549, Demibold 550-649 (Northeastern's lockup
 * weight), Bold from 650 (headlines), Regular Italic for every italic (2026-10-20). */
@font-face { font-family: "Real Head Pro"; font-style: normal; font-weight: 100 449; font-display: swap; src: url("/300-hackathon/a/fonts/RealHeadPro-Semilight.woff2") format("woff2"); }
@font-face { font-family: "Real Head Pro"; font-style: normal; font-weight: 450 549; font-display: swap; src: url("/300-hackathon/a/fonts/RealHeadPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Real Head Pro"; font-style: normal; font-weight: 550 649; font-display: swap; src: url("/300-hackathon/a/fonts/RealHeadPro-Demibold.woff2") format("woff2"); }
@font-face { font-family: "Real Head Pro"; font-style: normal; font-weight: 650 900; font-display: swap; src: url("/300-hackathon/a/fonts/RealHeadPro-Bold.woff2") format("woff2"); }
@font-face { font-family: "Real Head Pro"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/300-hackathon/a/fonts/RealHeadPro-RegularItalic.woff2") format("woff2"); }

:root {
  --page: #0e0d0d;
  --surface: #1b1a19;
  --ink: #ffffff;
  --ink2: #c6c3bb;
  --ink3: #8e8a83;
  --hairline: rgba(255, 255, 255, 0.12);
  /* Northeastern Red (2026-10-13). On this near-black it is 3.3:1, enough for
   * fills, rules and big type; small red text uses --red-ink, the same red
   * lifted to 5.5:1. */
  --red: #C8102E;
  --red-soft: rgba(200, 16, 46, 0.16);
  --red-ink: #F14C66;
  /* one typeface for every role; the three names stay so each rule keeps its intent */
  --sans: "Real Head Pro", "Helvetica Neue", Arial, sans-serif;
  --serif: "Real Head Pro", "Helvetica Neue", Arial, sans-serif;
  --mono: "Real Head Pro", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(18px, 4vw, 40px);
  --maxw: 1180px;
  --header-h: 60px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
}
a { color: inherit; }
/* Anchor jumps land below the header and the floating bar, not under them. */
section[id] { scroll-margin-top: calc(var(--header-h) + 72px); }
img { max-width: 100%; display: block; }
.wrap { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 14px;
}
.eyebrow.mute { color: var(--ink3); }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font: 600 1rem var(--sans);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 6px var(--red-soft); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.ghost:hover { border-color: var(--ink2); box-shadow: none; }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */
.site {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(14, 13, 13, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: inset 0 -2px 0 0 var(--red);
}
.site .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* The 300 mark (Northeastern's branding team, 2026-10-13), Canvas on the dark bar. */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; line-height: 1; }
.brand img { height: 28px; width: auto; transform: translateY(2px); } /* the 0s, not the 3's tail, centre on the nav */
/* Phones: a little smaller, so the nav keeps its room. */
@media (max-width: 440px) { .brand img { height: 24px; } }
@media (max-width: 360px) { .brand img { height: 22px; } }
.nu { display: inline-flex; align-items: center; opacity: 0.92; }
.nu img { height: 36px; width: auto; display: block; }
.nu:hover { opacity: 1; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 0.95rem; transition: color .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
/* Phones get the N alone at a size you can read; the full wordmark at 20px was a smudge. */
@media (max-width: 600px) { .nav a { padding: 8px 9px; font-size: 0.88rem; } .nu img { height: 34px; } }
@media (max-width: 440px) { .site .wrap { gap: 10px; } .nav a { padding: 8px 6px; font-size: 0.84rem; } }

/* A white button on red (the hackathon's Apply, the founders page's ask). */
.btn.alert { background: #fff; border-color: #fff; color: var(--red); }
.btn.alert:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22); }

/* The ask: a slim red bar under the header, on every public page. */
/* The bar floats over the page instead of taking a row of it: the section
 * under it stays exactly where it would be without the bar, and closing the
 * bar uncovers the page rather than shifting it up (Sean, 2026-09-23). */
.callbar-slot { position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; padding-bottom: 28px; pointer-events: none; }
.callbar {
  position: relative; pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: var(--red);
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  transform: translateY(-110%); opacity: 0;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
}
.callbar.is-on { transform: none; opacity: 1; }
.callbar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.callbar .t { flex: 1; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); min-width: 0; }
.callbar .t strong { color: #fff; font-weight: 700; }
.callbar .btn { padding: 9px 14px; font-size: 0.88rem; background: #fff; border-color: #fff; color: var(--red); }
.callbar .btn:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22); }
.callbar .x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.callbar .x:hover { background: #fff; border-color: #fff; color: var(--red); }
.callbar .x:active { transform: scale(0.94); }
.callbar .x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.callbar.is-gone { display: none; }
/* On the homepage the bar steps aside while Founder stories is on screen (it
 * would only point at what is already there) and comes back after. Its room
 * (--bar-h) is kept, so nothing moves. */
.callbar.is-on.is-away { transform: translateY(-110%); opacity: 0; pointer-events: none; }
/* Phones: the question stays (the bar is the only ask now), and "One
 * sentence is enough." gives way to it. */
@media (max-width: 600px) { .callbar .t span.one { display: none; } .callbar .t { font-size: 0.88rem; line-height: 1.3; } .callbar .wrap { gap: 12px; } }
@media (max-width: 380px) { .callbar .btn { padding: 8px 11px; font-size: 0.84rem; } }

/* ------------------------------------------------------------------ 300. */
.three {
  position: relative;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  display: grid; align-items: end;
  isolation: isolate;
  overflow: hidden;
}
/* The photograph, black and white, held back far enough that the name reads
 * over it and the building still reads through it. */
.three .photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%;
  filter: grayscale(1) contrast(1.08) brightness(0.82) sepia(0.12);
  opacity: 0.6;
}
.three::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 13, 13, 0.55) 0%, rgba(14, 13, 13, 0.1) 30%, rgba(14, 13, 13, 0.25) 60%, rgba(14, 13, 13, 0.92) 88%, var(--page) 100%);
}
@media (max-width: 700px) { .three .photo { object-position: 30% 45%; } }
.three .copy { position: relative; padding-block: clamp(40px, 8vh, 96px) clamp(56px, 15vh, 190px); pointer-events: none; }
.three .copy > * { pointer-events: auto; }
.three .num {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(6.5rem, 30vw, 24rem);
  line-height: 0.82; letter-spacing: -0.06em;
  margin: 0 0 18px -0.04em;
  color: var(--ink);
  text-shadow: 0 0 80px rgba(200, 16, 46, 0.35);
}
.three .addr { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink2); margin: 0 0 14px; }
.three .addr, .three .line { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8); }
.three .line { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.25; max-width: 30ch; margin: 0; }
.three .line em { color: var(--red-ink); font-style: italic; }
.three .grab { position: absolute; right: var(--pad); bottom: 18px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }

/* ---------------------------------------------------------- grand opening */
.open {
  position: relative;
  min-height: 92vh; min-height: 92svh;
  display: grid; align-items: center;
  padding-block: clamp(64px, 10vh, 120px);
  text-align: center;
  isolation: isolate;
}
.open::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 60%, rgba(200, 16, 46, 0.18), transparent 70%);
}
.open h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.01em; color: var(--ink2); margin: 0 0 10px; }
.open .mark { font-family: var(--sans); font-weight: 700; font-size: clamp(2.6rem, 7.5vw, 6.4rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 34px; }
/* The week on a calendar (grand opening and hackathon): November, Monday
 * first, dimmed, with the event's week at full ink and a bar drawn across
 * its days once it scrolls in. A bar or tag sits at --from (column, from 0)
 * and runs --span columns. .sm is the hackathon's smaller card; .on-red
 * turns it white on red. */
.cal { --cell: clamp(42px, 8.2vw, 80px); --ink-lit: var(--ink); --ink-dim: var(--ink3); --bar: var(--red); --on-bar: #fff; --tag: var(--red-ink);
  width: min(100%, calc(var(--cell) * 7 + 48px)); margin: 0 auto; padding: 22px 24px 20px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); text-align: left; }
.cal-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; padding: 0 6px; }
.cal-h .m { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.01em; }
.cal-h .y { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--ink-dim); }
.cal .wk { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal .wk > span:not(.bar):not(.tag) { position: relative; z-index: 1; display: grid; place-items: center; height: calc(var(--cell) * 0.8); font-family: var(--sans); font-weight: 500; font-size: clamp(0.92rem, 1.6vw, 1.25rem); font-variant-numeric: tabular-nums; color: var(--ink-dim); opacity: 0.45; }
.cal .wk > span.out:not(.bar) { opacity: 0.16; }
.cal .wk.dow > span { height: 30px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; opacity: 1; }
.cal .wk.on { margin: 6px 0 clamp(30px, 3.4vw, 40px); }
.cal .wk.on > span:not(.bar):not(.tag) { opacity: 0.8; color: var(--ink-lit); }
.cal .wk .bar, .cal .wk .tag { position: absolute; left: calc(100% / 7 * var(--from)); width: calc(100% / 7 * var(--span)); }
.cal .wk .bar { z-index: 0; top: 0; height: calc(var(--cell) * 0.8); padding: 0; border-radius: 999px; background: var(--bar); box-shadow: 0 10px 34px rgba(200, 16, 46, 0.35); transform-origin: left center; clip-path: inset(0 2px round 999px); }
.cal .wk .tag { top: calc(var(--cell) * 0.8 + 10px); text-align: center; font-family: var(--mono); font-weight: 500; font-size: clamp(0.72rem, 1.1vw, 0.84rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tag); white-space: nowrap; }
.cal.reveal .bar { transform: scaleX(0); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; }
.cal.reveal .tag { opacity: 0; transition: opacity .6s ease 1.1s; }
.cal.reveal.is-in .bar { transform: none; }
.cal.reveal.is-in .tag { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cal.reveal .bar { transform: none; transition: none; } .cal.reveal .tag { opacity: 1; transition: none; } }
/* The event's days: bold, and they take the bar's ink as it reaches them. */
.open .cal .wk.on > span:nth-child(-n+5), .hack .cal .wk.on > span:nth-child(n+4):nth-child(-n+7) { color: var(--ink-lit); font-weight: 700; opacity: 1; transition: color .35s ease .75s; }
.open .cal.is-in .wk.on > span:nth-child(-n+5), .hack .cal.is-in .wk.on > span:nth-child(n+4):nth-child(-n+7) { color: var(--on-bar); }
.open .body { max-width: 46ch; margin: clamp(26px, 4vh, 40px) auto 0; color: var(--ink2); font-family: var(--serif); font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.45; }

/* -------------------------------------------------------------- hackathon */
.hack {
  background: var(--red); color: #fff;
  padding-block: clamp(64px, 11vh, 140px);
}
.hack .hack-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hack .eyebrow { color: #fff; opacity: 0.85; margin: 0 0 16px; }
.hack h2, .hack h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(2.8rem, 8vw, 6.8rem); line-height: 0.96; letter-spacing: -0.04em; margin: 0 0 18px; }
.hack .lead { margin: 0 0 clamp(26px, 4vh, 36px); font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; max-width: 30ch; }
.hack .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hack .fine { margin: 0; font-size: 0.95rem; line-height: 1.4; color: inherit; opacity: 0.92; }
/* The hackathon's card: smaller, white on red, set off to the side and a few
 * degrees off square, like a page pinned up a week before the opening. */
.cal.sm { --cell: clamp(38px, 5vw, 56px); padding: 18px 18px 16px; border-radius: 18px; }
.cal.sm .cal-h .m { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.cal.sm .wk > span:not(.bar):not(.tag) { font-size: clamp(0.86rem, 1.2vw, 1rem); }
.cal.sm .wk.on { margin: 4px 0 30px; }
.cal.sm .wk .tag { font-size: 0.7rem; }
.cal.on-red { --ink-lit: #fff; --ink-dim: rgba(255, 255, 255, 0.75); --bar: #fff; --on-bar: var(--red); --tag: #fff; background: rgba(0, 0, 0, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 24px 60px rgba(60, 0, 8, 0.28); }
.cal.on-red .wk .bar { box-shadow: 0 8px 26px rgba(60, 0, 8, 0.3); }
.hack .cal { justify-self: end; margin: 0; transform: rotate(-3deg); }
.hack .cal.reveal { transform: translateY(18px) rotate(-3deg); }
.hack .cal.reveal.is-in { transform: rotate(-3deg); }
@media (max-width: 860px) {
  .hack .hack-grid { grid-template-columns: 1fr; }
  .hack .cal, .hack .cal.reveal.is-in { justify-self: center; transform: rotate(-2deg); }
  .hack .cal.reveal { transform: translateY(18px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .hack .cal.reveal { transform: rotate(-3deg); } }

/* ------------------------------------------------------------------ body */
.home { padding-block: clamp(72px, 12vh, 150px); }
.home .wrap { max-width: 720px; }
.home h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 20px; }
.home .intro { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink2); margin: 0 0 clamp(36px, 6vh, 64px); }
.home .note { padding: clamp(22px, 3.5vh, 34px) 0; border-top: 1px solid var(--hairline); }
.home .note:last-child { border-bottom: 1px solid var(--hairline); }
.home .note h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -0.01em; margin: 0 0 8px; }
.home .note p { margin: 0; color: var(--ink2); }

/* -------------------------------------------------------------- founders */
.page-h { padding-block: calc(clamp(56px, 10vh, 120px) + var(--bar-h, 0px)) clamp(28px, 4vh, 48px); transition: padding-top .45s cubic-bezier(0.22, 1, 0.36, 1); }
.page-h p.eyebrow { margin: 0 0 18px; font-size: 0.72rem; color: var(--red-ink); }
.page-h h1 .sofar { font-style: italic; font-weight: 400; color: var(--ink3); white-space: nowrap; }
.page-h h1 i { font-style: normal; color: var(--red); }
.page-h h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 22px; max-width: 14ch; text-wrap: balance; }
.page-h p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink2); max-width: 52ch; margin: 0 0 24px; }
.voices { padding-block: 8px clamp(48px, 8vh, 96px); }
.voices .eyebrow { grid-column: 1 / -1; margin: 0 0 4px; }
.voices .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .voices .wrap { grid-template-columns: 1fr; } }
.voice { margin: 0; display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); }
.voice img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--red); }
.voice blockquote { margin: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; }
.voice blockquote::before { content: "\201C"; color: var(--red-ink); }
.voice blockquote::after { content: "\201D"; color: var(--red-ink); }
.voice figcaption { margin-top: 12px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.voice figcaption b { color: var(--ink); font-weight: 500; }
@media (max-width: 480px) { .voice { grid-template-columns: 1fr; } .voice img { width: 56px; height: 56px; } }
.needs { padding-block: clamp(40px, 7vh, 90px) clamp(56px, 9vh, 120px); border-top: 1px solid var(--hairline); }
.needs h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 12px; }
.needs .intro { color: var(--ink2); max-width: 56ch; margin: 0 0 36px; }
.needs ol { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .needs ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .needs ol { grid-template-columns: 1fr; } }
.needs li { counter-increment: n; padding: 20px 20px 22px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
.needs li::before { content: counter(n, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--red-ink); margin-bottom: 10px; }
.needs li b { display: block; font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.needs li span { color: var(--ink2); font-size: 0.98rem; }
/* The privacy line that goes with every "Tell us your story" button. */
.private { margin: 16px 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.private::before { content: ""; display: inline-block; width: 11px; height: 12px; margin-right: 8px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Crect x='0.5' y='5' width='10' height='6.5' rx='1.5'/%3E%3Cpath d='M2.8 5V3.6a2.7 2.7 0 0 1 5.4 0V5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Crect x='0.5' y='5' width='10' height='6.5' rx='1.5'/%3E%3Cpath d='M2.8 5V3.6a2.7 2.7 0 0 1 5.4 0V5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain; }
/* The closing ask: the same red as the founder call on the homepage. */
.fill { background: var(--red); color: #fff; padding-block: clamp(64px, 11vh, 130px); }
.fill h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; }
.fill h2 i { font-style: normal; color: #fff; }
.fill h2 + p { margin: 0 0 30px; max-width: 48ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; }

/* ---------------------------------------------------------------- footer */
footer.site-foot { border-top: 1px solid var(--hairline); padding-block: 36px 48px; color: var(--ink3); font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; }
footer .wrap > p { margin: 0; text-align: right; }
footer a.foot-mark { display: inline-flex; line-height: 1; }
footer a.foot-mark img { height: 34px; width: auto; }
footer a.foot-mark:hover { opacity: 0.85; }
@media (max-width: 600px) { footer .wrap > p { text-align: left; } }
footer .credit { font-size: 0.8rem; opacity: 0.8; }
footer a { color: var(--ink2); text-decoration: none; }
footer a:hover { color: var(--ink); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .callbar, .page-h { transition: none; } }

/* ------------------------------------------------ the landing pages
 * The homepage and the hackathon page (Sean, 2026-09-29: the university's own
 * site and branding are on the way, so this holds only the name, the address
 * and the dates). One screen where the screen is big enough; where it is not
 * (a phone, a short window) the page simply scrolls, and nothing is cut. The
 * full site before this is the git tag full-site-2026-09-29. */
body.land { min-height: 100vh; min-height: 100svh; min-height: var(--screen, 100svh); display: flex; flex-direction: column; }
.land-main {
  position: relative; flex: 1; isolation: isolate;
  display: grid; align-items: center;
  padding-block: calc(var(--bar-h, 0px) + clamp(28px, calc(var(--screen, 100vh) * 0.06), 72px)) clamp(56px, calc(var(--screen, 100vh) * 0.08), 88px);
  transition: padding-top .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.land-main .photo {
  position: absolute; inset: 0; z-index: -2;
  transform: translateZ(0); /* its own layer: drawn once, not on every scroll frame */
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%;
  filter: grayscale(1) contrast(1.08) brightness(0.82) sepia(0.12);
  opacity: 0.6;
}
.land-main:has(.photo)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 13, 13, 0.55) 0%, rgba(14, 13, 13, 0.15) 35%, rgba(14, 13, 13, 0.5) 72%, rgba(14, 13, 13, 0.94) 100%);
}
.land-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 88px); align-items: center; }
.land-copy .num { margin: 0 0 clamp(18px, calc(var(--screen, 100vh) * 0.034), 34px); line-height: 0; }
/* The mark is sized by width (it is about 2.13 times as wide as it is tall):
 * by the window's width and height on wide screens, by the width alone on
 * phones, and never wider than its column. */
.land-copy .num img {
  width: clamp(240px, min(34vw, calc(var(--screen, 100vh) * 0.56)), 560px); height: auto; max-width: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 36px rgba(200, 16, 46, 0.35));
}
.land-copy .addr { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink2); margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8); }
.land-cta { align-self: flex-start; background: rgba(14, 13, 13, 0.45); border-color: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.land-cta:hover { border-color: #fff; }
/* "Coming soon.": the drama, in the serif, red, almost as loud as the name,
 * drawn up out of a blur a beat after the page lands. */
.land-copy .soon {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, min(8.4vw, calc(var(--screen, 100vh) * 0.13)), 8.4rem);
  line-height: 0.92; letter-spacing: -0.03em;
  color: var(--red);
  margin: 0 0 clamp(18px, calc(var(--screen, 100vh) * 0.03), 30px) -0.02em;
  /* A dark halo, not a red glow: Northeastern Red is darker than the old red,
   * and over the photo it needs the dark behind it to hold. */
  text-shadow: 0 0 18px rgba(0,0,0,.75), 0 0 40px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.6);
  animation: soon-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) .25s both;
}
.land-copy .soon i { font-style: normal; color: #fff; }
@keyframes soon-in { from { opacity: 0; transform: translateY(18px); filter: blur(10px); letter-spacing: 0.04em; } to { opacity: 1; transform: none; filter: none; letter-spacing: -0.03em; } }
@media (prefers-reduced-motion: reduce) { .land-copy .soon { animation: none; } }
.land-cal .mark { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, min(1.9vw, calc(var(--screen, 100vh) * 0.032)), 1.7rem); line-height: 1.2; color: var(--ink2); text-align: center; margin: 16px 0 0; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8); }
.land-cal .cal { --cell: clamp(34px, min(5vw, calc(var(--screen, 100vh) * 0.062)), 62px); width: calc(var(--cell) * 7 + 48px); max-width: 100%; margin: 0; background: rgba(27, 26, 25, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.land-cal .cal .wk.on > span:nth-child(-n+5) { color: var(--ink-lit); font-weight: 700; opacity: 1; transition: color .35s ease .75s; }
.land-cal .cal.is-in .wk.on > span:nth-child(-n+5) { color: var(--on-bar); }
.land-main .credit { position: absolute; right: var(--pad); bottom: 14px; margin: 0; font-size: 0.72rem; color: var(--ink3); }
/* Narrow: name and address fill the first screen, the calendar follows. */
@media (max-width: 860px) {
  .land-main { align-items: start; }
  .land-grid { grid-template-columns: 1fr; gap: 0; }
  .land-copy { min-height: calc(var(--screen, 100svh) - var(--header-h) - var(--bar-h, 0px) - clamp(28px, calc(var(--screen, 100vh) * 0.06), 72px)); display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
  .land-copy .num img { width: clamp(220px, 76vw, 480px); }
  .land-copy .soon { font-size: clamp(3rem, 15vw, 6.4rem); }
  .land-cal .cal { margin-inline: auto; }
  .land-cal { padding-top: 12px; }
  .land-cal .cal { --cell: clamp(34px, 11vw, 58px); width: min(100%, calc(var(--cell) * 7 + 48px)); }
  .land-main .credit { left: var(--pad); right: auto; }
}
/* ------------------------------------------- one page, three windows
 * The homepage is the landing, the hackathon and founder stories, one after
 * the other, each at least a screen tall (Sean, 2026-10-05). The nav scrolls
 * to them and the address follows as you go (#hackathon, #stories). A jump
 * lands each window flush under the header; the hackathon makes room for the
 * founder bar the way the landing does. */
.land-main { min-height: calc(var(--screen, 100svh) - var(--header-h)); }
main.one > section.win { scroll-margin-top: var(--header-h); min-height: calc(var(--screen, 100svh) - var(--header-h)); outline: none; }
.hack.win { display: grid; align-items: center; padding-block: calc(var(--bar-h, 0px) + clamp(40px, calc(var(--screen, 100vh) * 0.08), 96px)) clamp(56px, calc(var(--screen, 100vh) * 0.1), 112px); transition: padding-top .45s cubic-bezier(0.22, 1, 0.36, 1); }
.hack.win h2 { font-size: clamp(2.8rem, min(8vw, calc(var(--screen, 100vh) * 0.11)), 6.8rem); }
.hack.win .cal.sm { --cell: clamp(34px, min(5vw, calc(var(--screen, 100vh) * 0.06)), 56px); }
@media (max-width: 860px) { .hack.win .cal.sm { --cell: clamp(34px, 10vw, 52px); } .hack.win .hack-grid { gap: clamp(36px, 6vh, 56px); } }
/* Phones: the bar steps aside past the landing (site.js), so no room for it. */
@media (max-width: 600px) {
  .hack.win { padding-block: clamp(28px, calc(var(--screen, 100vh) * 0.05), 64px) clamp(32px, calc(var(--screen, 100vh) * 0.06), 72px); }
  .hack.win .hack-grid { gap: clamp(22px, calc(var(--screen, 100vh) * 0.04), 56px); }
  .hack.win .lead { margin-bottom: clamp(18px, calc(var(--screen, 100vh) * 0.03), 32px); }
  .hack.win .cal.sm { --cell: clamp(30px, min(10vw, calc(var(--screen, 100vh) * 0.05)), 52px); }
}
/* The header is near solid here: the red window scrolling under a see-through
 * header turned it maroon. */
body.land .site { background: rgba(14, 13, 13, 0.96); }
/* Arriving at /#stories lands there at once; the nav's glide is scripted. */
html:has(body.land) { scroll-behavior: auto; }
.app.win { padding-block: clamp(48px, calc(var(--screen, 100vh) * 0.09), 104px) clamp(64px, calc(var(--screen, 100vh) * 0.12), 128px); }
@media (prefers-reduced-motion: reduce) { .hack.win { transition: none; } }
@media (prefers-reduced-motion: reduce) { .land-main { transition: none; } }

/* Phones: nothing on the landing blurs what scrolls under it. A live blur over
 * the photo is redrawn on every frame of the browser bars' slide, which read
 * as stutter (2026-09-30). The fills are near-solid instead. */
@media (max-width: 860px) {
  body.land .site { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 13, 13, 0.97); }
  .land-cal .cal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(27, 26, 25, 0.94); }
}