/* Founders Hub site styles v1.
   Reads tokens.css. Contains no colour, font or size literals by design. */

*, *::before, *::after { box-sizing: border-box; }

/* Components that set their own display would otherwise beat the browser's
   [hidden] rule, which silently breaks every render gate. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

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

body {
  margin: 0;
  background: var(--fh-night);
  color: var(--fh-white);
  font-family: var(--fh-font-body);
  font-size: var(--fh-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--fh-grain-opacity);
  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='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==================================================================
   SLABS. The page changes ground colour instead of running one grey
   from top to bottom. Each slab is full bleed and owns its own
   foreground colours, so nothing downstream needs to know where it is.
   ================================================================== */

.fh-slab { position: relative; }

/* Four grounds. The two darks are NIGHT and a lifted NIGHT, so consecutive
   dark sections still read as separate slabs.
   The loud ground is SKY rather than SEA: SKY against NIGHT text clears 10:1,
   SEA against either black or white sits near 4.3:1 and fails body copy. */
.fh-slab--ink   { background: var(--fh-night-2); color: var(--fh-white); }
.fh-slab--black { background: var(--fh-night);   color: var(--fh-white); }
.fh-slab--blue  { background: var(--fh-sky);     color: var(--fh-night); }
.fh-slab--white { background: var(--fh-white);   color: var(--fh-night); }

.fh-slab--blue a, .fh-slab--white a { color: currentColor; }
.fh-slab--blue .fh-muted { color: rgba(0, 0, 0, 0.62); }
.fh-slab--white .fh-muted { color: rgba(0, 0, 0, 0.55); }
.fh-slab--blue .fh-rule, .fh-slab--white .fh-rule { border-color: var(--fh-line-dark); }
.fh-slab--blue .fh-hairline, .fh-slab--white .fh-hairline { background: var(--fh-line-dark); }

.fh-wrap {
  width: 100%;
  max-width: var(--fh-content-max);
  margin: 0 auto;
  padding: 0 var(--fh-gutter);
}

.fh-pad   { padding-block: var(--fh-space-16); }
.fh-pad-s { padding-block: var(--fh-space-12); }

/* ==================================================================
   TYPE
   ================================================================== */

/* The statement face. Everything loud on this page is this class. */
.fh-mega,
.fh-statement,
.fh-number {
  font-family: var(--fh-font-mega);
  font-weight: var(--fh-mega-weight);
  font-stretch: var(--fh-mega-width);
  letter-spacing: var(--fh-mega-track);
  text-transform: uppercase;
  line-height: 0.88;
  text-wrap: balance;
}

/* Line height stays above 0.9 on multi line settings: Lithuanian stacks an
   ogonek under Ą Ę Į Ų and a caron over Č Š Ž, and at 0.88 they touch. */
.fh-mega      { font-size: var(--fh-size-mega); line-height: 0.92; }
.fh-statement { font-size: var(--fh-size-statement); line-height: 0.94; }
.fh-number    { font-size: var(--fh-size-number); line-height: 0.8; }

/* The brand's techno face, kept for small technical labels only. */
.fh-label {
  font-family: var(--fh-font-display);
  font-size: var(--fh-size-micro);
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
  font-style: normal;
}

.fh-h2 {
  font-family: var(--fh-font-mega);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--fh-size-h2);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.fh-h3 { font-size: var(--fh-size-h3); font-weight: 600; letter-spacing: -0.01em; }

.fh-lead { font-size: clamp(19px, 2vw, 26px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
.fh-body { font-size: var(--fh-size-body); line-height: 1.55; max-width: 56ch; }
.fh-body + .fh-body { margin-top: var(--fh-space-2); }
.fh-small { font-size: var(--fh-size-small); }
.fh-muted { color: var(--fh-grey); }

/* Slashed zero. render.js wraps every 0 inside .fh-num.
   Without JS the number still renders, just without the slash. */
.fh-num { font-style: normal; }

.fh-z { position: relative; display: inline-block; font-style: normal; }

.fh-z::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.66em;
  height: 0.055em;
  min-height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-32deg);
}

/* ==================================================================
   HAIRLINE SYSTEM. Full bleed rules that run edge to edge, which is
   what makes the page read as one grid instead of stacked cards.
   ================================================================== */

.fh-hairline { height: 1px; background: var(--fh-line); width: 100%; }
.fh-rule { border-top: 1px solid var(--fh-line); }

/* ==================================================================
   HALFTONE. The signature texture. A dot grid whose dots are revealed
   by an organic turbulence mask, so it reads as a printed halftone
   rather than a uniform pattern. Doubles as the hero placeholder until
   the room photos arrive after 2026-08-22.
   ================================================================== */

.fh-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--fh-sea);
  background-image: radial-gradient(var(--fh-night) 42%, transparent 44%);
  background-size: var(--fh-dot) var(--fh-dot);
  /* The steep alpha ramp is what turns soft noise into hard edged blobs with
     large open areas. A gentle threshold just gives a uniform speckle. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='2' seed='11'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='10' intercept='-3.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='2' seed='11'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='10' intercept='-3.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
  -webkit-mask-size: 900px 900px;
  mask-size: 900px 900px;
}

.fh-halftone--light { background-color: var(--fh-sky); }

/* ==================================================================
   HEADER
   ================================================================== */

.fh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fh-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fh-line);
}

.fh-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--fh-space-3);
  height: 64px;
}

/* Real brand lockup, traced from the designer's sheets. The mark is taller
   than it is wide, so both parts are sized off height, never width. */
.fh-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* The designer only drew a stacked wordmark, so the header has to give it
   enough height for two readable lines rather than squeeze it to a strip. */
.fh-logo__mark { height: 34px; width: auto; flex: none; }
.fh-logo__word { height: 26px; width: auto; flex: none; }

.fh-footer__lockup { height: 74px; width: auto; }

.fh-nav { display: none; margin-left: auto; align-items: center; }

.fh-nav a {
  display: flex;
  align-items: center;
  padding: 0 var(--fh-space-3);
  color: var(--fh-grey);
  text-decoration: none;
  font-size: var(--fh-size-small);
  border-left: 1px solid var(--fh-line);
  transition: color 0.15s var(--fh-ease), background 0.15s var(--fh-ease);
}

.fh-nav a:hover { color: var(--fh-white); background: var(--fh-blue-wash); text-decoration: none; }

.fh-header .fh-btn { align-self: stretch; }

@media (min-width: 940px) { .fh-nav { display: flex; } }

/* ==================================================================
   BUTTONS. Square, loud, no radius.
   ================================================================== */

.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fh-space-1);
  font-family: var(--fh-font-body);
  font-weight: 600;
  font-size: var(--fh-size-small);
  line-height: 1;
  padding: 18px 28px;
  border: 1px solid transparent;
  border-radius: var(--fh-radius-btn);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--fh-ease), color 0.15s var(--fh-ease);
}

.fh-btn:hover { text-decoration: none; }

/* SKY on NIGHT text, because SEA with either black or white text lands around
   4.3:1 and is not safe for a button label. */
.fh-btn--primary { background: var(--fh-sky); color: var(--fh-night); }
.fh-btn--primary:hover { background: var(--fh-white); }

.fh-btn--invert { background: var(--fh-night); color: var(--fh-white); }
.fh-btn--invert:hover { background: var(--fh-white); color: var(--fh-night); }

.fh-btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.fh-btn--ghost:hover { background: var(--fh-white); color: var(--fh-black); border-color: var(--fh-white); }

.fh-slab--blue .fh-btn--ghost:hover,
.fh-slab--white .fh-btn--ghost:hover { background: var(--fh-black); color: var(--fh-white); border-color: var(--fh-black); }

.fh-btn--sm { padding: 12px 18px; font-size: var(--fh-size-micro); }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--fh-blue-light);
  outline-offset: 2px;
}

/* ==================================================================
   HERO
   ================================================================== */

.fh-hero {
  position: relative;
  overflow: hidden;
  background: var(--fh-black);
  min-height: min(88vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--fh-space-16) var(--fh-space-8);
}

/* The halftone has both bright blue fields and solid black blobs, and which one
   sits under the text changes with viewport width. White text plus a scrim is
   the only combination that survives every breakpoint. */
.fh-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--fh-night) 0%, var(--fh-scrim-1) 34%, var(--fh-scrim-0) 72%);
}

.fh-hero__inner { position: relative; z-index: 2; width: 100%; color: var(--fh-white); }

.fh-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  margin-bottom: var(--fh-space-4);
}

.fh-hero__eyebrow::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.3; }

.fh-hero__title { margin-bottom: var(--fh-space-6); color: var(--fh-white); }

.fh-hero__foot {
  display: grid;
  gap: var(--fh-space-6);
  align-items: end;
}

@media (min-width: 900px) { .fh-hero__foot { grid-template-columns: 1fr auto; } }

.fh-hero__cta { display: flex; flex-wrap: wrap; gap: 1px; }

/* Facts run as one hairline strip, full bleed. */
.fh-facts { display: grid; grid-template-columns: 1fr; }

@media (min-width: 720px) { .fh-facts { grid-template-columns: repeat(3, 1fr); } }

.fh-facts > div {
  padding: var(--fh-space-4) var(--fh-space-3);
  border-top: 1px solid var(--fh-line);
}

@media (min-width: 720px) {
  .fh-facts > div + div { border-left: 1px solid var(--fh-line); }
  .fh-facts > div:first-child { padding-left: 0; }
}

.fh-facts dt { color: var(--fh-blue-light); margin-bottom: var(--fh-space-1); }
.fh-facts dd { margin: 0; font-size: var(--fh-size-h3); font-weight: 600; letter-spacing: -0.01em; }

/* ==================================================================
   SECTION HEAD. Label + index above a statement.
   ================================================================== */

.fh-head { display: flex; align-items: baseline; gap: var(--fh-space-3); margin-bottom: var(--fh-space-6); }
.fh-head__index { color: var(--fh-blue); }
.fh-slab--blue .fh-head__index { color: var(--fh-black); opacity: 0.45; }
.fh-head::after { content: ''; flex: 1; height: 1px; background: var(--fh-line); }
.fh-slab--blue .fh-head::after, .fh-slab--white .fh-head::after { background: var(--fh-line-dark); }

/* Two column statement block: big statement left, body right. */
.fh-split { display: grid; gap: var(--fh-space-6); }

@media (min-width: 900px) {
  .fh-split { grid-template-columns: 1.35fr 1fr; gap: var(--fh-space-12); align-items: start; }
}

/* ==================================================================
   NUMBERED ROWS. The strongest device on the reference: an oversized
   number, a hairline, and very little else.
   ================================================================== */

.fh-rows { border-top: 1px solid var(--fh-line); }
.fh-slab--blue .fh-rows { border-color: var(--fh-line-dark); }

.fh-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fh-space-2);
  padding: var(--fh-space-6) 0;
  border-bottom: 1px solid var(--fh-line);
  transition: background 0.2s var(--fh-ease);
}

.fh-slab--blue .fh-row { border-color: var(--fh-line-dark); }

@media (min-width: 860px) {
  .fh-row {
    grid-template-columns: minmax(140px, 0.5fr) 1.1fr 1fr;
    gap: var(--fh-space-6);
    align-items: start;
  }
}

.fh-row__n { color: var(--fh-blue); }
.fh-slab--blue .fh-row__n { color: var(--fh-black); }
.fh-row__title { margin-bottom: var(--fh-space-1); }
.fh-row__body { max-width: 46ch; }

/* ==================================================================
   QUAD. Four cells, hairlines instead of gaps, edge to edge.
   ================================================================== */

.fh-quad { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--fh-line); }

@media (min-width: 860px) { .fh-quad { grid-template-columns: 1fr 1fr; } }

.fh-quad > * {
  padding: var(--fh-space-8) var(--fh-space-4) var(--fh-space-8) 0;
  border-bottom: 1px solid var(--fh-line);
  transition: background 0.2s var(--fh-ease);
}

@media (min-width: 860px) {
  .fh-quad > *:nth-child(2n) { padding-left: var(--fh-space-8); border-left: 1px solid var(--fh-line); }
}

.fh-quad__n { color: var(--fh-blue); display: block; margin-bottom: var(--fh-space-3); }
.fh-quad h3 { margin-bottom: var(--fh-space-2); }

/* ==================================================================
   EVENTS
   ================================================================== */

.fh-event {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fh-space-2);
  padding: var(--fh-space-4) 0;
  border-bottom: 1px solid var(--fh-line);
  align-items: center;
}

.fh-event:first-child { border-top: 1px solid var(--fh-line); }

@media (min-width: 820px) {
  .fh-event { grid-template-columns: minmax(220px, auto) 1fr auto; gap: var(--fh-space-6); }
}

.fh-event__date {
  font-family: var(--fh-font-mega);
  font-weight: var(--fh-mega-weight);
  font-stretch: var(--fh-mega-width);
  letter-spacing: var(--fh-mega-track);
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--fh-blue);
  font-size: clamp(28px, 3.4vw, 52px);
}
.fh-event__title { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.fh-event__meta { color: var(--fh-grey); font-size: var(--fh-size-small); margin-top: 4px; }

/* The only place the secondary palette appears. Four event types, four
   distinguishable colours, outline only so the list never turns into a circus.
   Per the designer: the secondary three exist so we pick from the brandbook
   instead of inventing random colours when a category actually needs one. */
.fh-tag {
  display: inline-block;
  font-family: var(--fh-font-display);
  font-size: var(--fh-size-micro);
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
  color: var(--fh-grey);
  border: 1px solid currentColor;
  padding: 6px 12px;
}

.fh-tag--ship-night { color: var(--fh-sky); }
.fh-tag--mentorship { color: var(--fh-turquoise); }
.fh-tag--public     { color: var(--fh-mustard); }
.fh-tag--hackathon  { color: var(--fh-spark); }

.fh-empty {
  border: 1px solid var(--fh-line);
  padding: var(--fh-space-8) var(--fh-space-4);
  color: var(--fh-grey);
  text-align: center;
}

/* ==================================================================
   BUILDERS
   ================================================================== */

.fh-builders { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--fh-line); }

@media (min-width: 720px)  { .fh-builders { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .fh-builders { grid-template-columns: repeat(5, 1fr); } }

.fh-builder { border-bottom: 1px solid var(--fh-line); border-right: 1px solid var(--fh-line); padding: var(--fh-space-3); }

/* Empty photo slots render as halftone rather than as a black hole, so a
   builder without a headshot still looks intentional. */
.fh-builder__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--fh-space-3);
  background-color: var(--fh-ink-2);
  background-image: radial-gradient(var(--fh-blue) 40%, transparent 42%);
  background-size: var(--fh-dot) var(--fh-dot);
}

.fh-builder__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter 0.3s var(--fh-ease); }
.fh-builder:hover .fh-builder__photo img { filter: none; }
.fh-builder__name { font-weight: 600; letter-spacing: -0.01em; }
.fh-builder__program { color: var(--fh-grey); font-size: var(--fh-size-micro); margin-top: 2px; }
.fh-builder__building { color: var(--fh-blue-light); font-size: var(--fh-size-small); margin-top: var(--fh-space-1); }

/* ==================================================================
   PARTNERS
   ================================================================== */

.fh-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fh-space-8); }
.fh-partners img { height: 38px; width: auto; object-fit: contain; }

/* ==================================================================
   FAQ
   ================================================================== */

.fh-faq { border-top: 1px solid var(--fh-line); }
.fh-faq details { border-bottom: 1px solid var(--fh-line); }

.fh-faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--fh-space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-space-3);
  font-family: var(--fh-font-mega);
  font-weight: 700;
  font-stretch: 92%;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 0.15s var(--fh-ease);
}

.fh-faq summary::-webkit-details-marker { display: none; }
.fh-faq summary:hover { color: var(--fh-blue-light); }

.fh-faq summary::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--fh-ease);
}

.fh-faq details[open] summary { color: var(--fh-blue-light); }
.fh-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fh-faq details p { color: var(--fh-grey); padding-bottom: var(--fh-space-4); max-width: 62ch; }

/* ==================================================================
   APPLY BLOCK
   ================================================================== */

.fh-apply { position: relative; overflow: hidden; }
.fh-apply__inner { position: relative; z-index: 2; text-align: center; }
.fh-apply__panel { background: var(--fh-white); color: var(--fh-black); padding: var(--fh-space-12) var(--fh-space-4); }

/* ==================================================================
   ISM BLOCK
   ================================================================== */

.fh-ism__links { display: flex; flex-wrap: wrap; gap: 1px; margin-top: var(--fh-space-4); }

/* ==================================================================
   FOOTER
   ================================================================== */

.fh-footer { position: relative; overflow: hidden; background: var(--fh-black); }
.fh-footer__grid { display: grid; gap: var(--fh-space-6); padding-block: var(--fh-space-12) var(--fh-space-8); }

@media (min-width: 860px) { .fh-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.fh-footer h4 { color: var(--fh-blue-light); margin-bottom: var(--fh-space-2); }
.fh-footer ul { list-style: none; padding: 0; }
.fh-footer li { margin-bottom: var(--fh-space-1); font-size: var(--fh-size-small); }
.fh-footer a { color: var(--fh-white); }

/* The real 001 motif, oversized and bleeding off the bottom edge. */
.fh-footer__mark {
  width: min(100%, 900px);
  height: auto;
  margin: var(--fh-space-8) auto calc(var(--fh-space-8) * -1);
  opacity: 0.22;
  user-select: none;
  pointer-events: none;
}

.fh-footer__bottom {
  border-top: 1px solid var(--fh-line);
  padding-block: var(--fh-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fh-space-2) var(--fh-space-4);
  justify-content: space-between;
  color: var(--fh-grey);
  font-size: var(--fh-size-micro);
}

a { color: var(--fh-blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==================================================================
   MOTION
   ================================================================== */

.fh-reveal { transition: opacity 0.7s var(--fh-ease), transform 0.7s var(--fh-ease); }
.js .fh-reveal { opacity: 0; transform: translateY(20px); }
.js .fh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .js .fh-reveal { opacity: 1; transform: none; } }

.fh-hero__inner > * { animation: fh-rise 0.8s var(--fh-ease) both; }
.fh-hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.fh-hero__inner > *:nth-child(2) { animation-delay: 0.16s; }
.fh-hero__inner > *:nth-child(3) { animation-delay: 0.28s; }

@keyframes fh-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ==================================================================
   DEV ONLY. Never ships.
   ================================================================== */

.fh-devbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10000;
  background: var(--fh-blue);
  color: var(--fh-black);
  font-size: var(--fh-size-micro);
  font-weight: 600;
  text-align: center;
  padding: 8px var(--fh-space-3);
}

.fh-skip { position: absolute; left: -9999px; }

.fh-skip:focus {
  position: fixed;
  left: var(--fh-space-3);
  top: var(--fh-space-3);
  z-index: 200;
  background: var(--fh-blue);
  color: var(--fh-black);
  padding: 12px 18px;
}