/* ---------------------------------------------------------------
   Fonts

   Archivo and Geist are open-source and self-hosted below. The
   Geist file is the official Vercel build (unpkg "geist" package),
   not the Google Fonts CDN build — the Google Fonts subset strips
   all stylistic-set (ss##) GSUB features, which are required below.

   PP Frama Black is a commercial font (Pangram Pangram); the
   variable file here was provided under the site owner's license.
   Its only variable axis is "wght" (100-900) — Figma's resolved
   value for the "Black" style used throughout is 720, not the
   named Black instance (900).
   --------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Frama";
  src: url("../assets/fonts/PPFrama-UprightVariableVF.woff2") format("woff2"),
       url("../assets/fonts/PPFrama-UprightVariableVF.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
  --color-cream: #efefe0;
  --color-ink: #1a1514;
  --color-dirt: #332927;
  --color-blue: #9bc4e1;
  --color-orange: #fe7e37;
  --color-footer-orange: #ff8f57;

  --font-display: "PP Frama", "Archivo Black", Impact, sans-serif;
  --font-condensed: "Archivo", sans-serif;
  --font-body: "Geist", system-ui, sans-serif;

  /* PP Frama's "Black" style resolves to wght 720 in Figma, not
     the font's own named Black instance (wght 900). */
  --weight-display-black: 720;

  --page-max: 1920px;
  --container-width: 1072px;
  --container-width-narrow: 1012px;

  /* Vertical-rhythm scale, fluid but anchored to the desktop
     values Figma actually uses: 20 / 30 / 60 / 90px. */
  --space-sm: clamp(1rem, 2.5vw, 1.25rem);
  --space-md: clamp(1.25rem, 4vw, 1.875rem);
  --space-lg: clamp(1.5rem, 5vw, 3.75rem);
  --space-xl: clamp(3rem, 8vw, 5.625rem);

  --fs-headline: clamp(2.5rem, 6.5vw, 6rem);
  --fs-subhead: clamp(1.625rem, 3vw, 2.5rem);
  --fs-condensed: clamp(1.375rem, 2.8vw, 2.75rem);
  /* Anchored to hit 25px at the 1280px reference width (2px below
     Figma's literal 27px, per feedback that 27 read too large in
     the browser) and 16px around a 400px phone — same curve shape
     as a straight Figma match, shifted down 2px throughout. */
  --fs-body: clamp(1rem, 0.744rem + 1.023vw, 1.5625rem);

  --reveal-distance: 0.75rem;
  --reveal-duration: 0.5s;
  --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 576;
  line-height: 1.33;
  max-width: var(--page-max);
  margin-inline: auto;
  /* Geist stylistic sets: ss03 "Alt l" (Alternate Ls), ss01 "No
     tail a" (Straight A). Set once on the base rule; harmless on
     PP Frama / Archivo elements since they simply lack these tags. */
  font-feature-settings: "ss01" 1, "ss03" 1;
  /* Every custom family above is variable across its full used
     weight range, so the browser never needs to fake bold/italic. */
  font-synthesis: none;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
   Accessibility helpers
   --------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: var(--font-body);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */
.edge-pad {
  padding-inline: var(--space-md);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.container--narrow {
  max-width: var(--container-width-narrow);
}

.section {
  padding-block: var(--space-xl);
}

.section--intro,
.section--actions {
  background: var(--color-cream);
}

.section--pool {
  background: var(--color-blue);
}

.section--actions .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* ---------------------------------------------------------------
   Type styles
   --------------------------------------------------------------- */

/* PP Frama stylistic sets (per Figma + font's own GSUB names):
   ss01 Tails, ss02 Alt M, ss03 Round dots, ss04 Alt Figures,
   ss05 Alt g, ss06 Alt Ä/Ü, ss07 Alt *, ss08 Alt &/€, ss10 Alt a.
   Only Round dots (ss03) and Alt a (ss10) are enabled; every other
   set is left off by omission. Declared here (not on `body`) so it
   never leaks onto Geist, whose own ss01/ss03 mean something
   different (Straight A / Alternate Ls). */
.headline,
.subhead {
  font-feature-settings: "ss03" 1, "ss10" 1;
}

.headline {
  font-family: var(--font-display);
  font-weight: var(--weight-display-black);
  font-size: var(--fs-headline);
  line-height: 0.85;
  letter-spacing: -0.025em;
  text-align: center;
}

.subhead {
  font-family: var(--font-display);
  font-weight: var(--weight-display-black);
  font-size: var(--fs-subhead);
  line-height: 1.1;
  letter-spacing: 0;
}

.body-copy,
.intro-copy p {
  font-family: var(--font-body);
  font-weight: 576;
  font-size: var(--fs-body);
  line-height: 1.33;
  letter-spacing: -0.03em;
  color: var(--color-dirt);
}

.pool-column .body-copy {
  color: var(--color-ink);
}

/* ---------------------------------------------------------------
   Header / Footer wordmark + nav
   --------------------------------------------------------------- */
.site-header__nav,
.site-footer__nav {
  padding-block: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
}

.wordmark {
  width: 100%;
}

.wordmark__image {
  width: 100%;
  height: auto;
}

.wordmark__image--mobile {
  display: none;
}

.tagline {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tagline span:not(.tagline__arrow) {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-variation-settings: "wdth" 64;
  font-size: var(--fs-condensed);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tagline__arrow,
.contact-line__arrow {
  flex: 1;
  min-width: 1.5rem;
  height: 0.5em;
  position: relative;
}

.tagline__arrow::before,
.contact-line__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.6em;
  top: 50%;
  border-top: 2px solid var(--color-ink);
  transform: translateY(-50%);
}

.tagline__arrow::after,
.contact-line__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  border-top: 2px solid var(--color-ink);
  border-right: 2px solid var(--color-ink);
  transform: translateY(-50%) rotate(45deg);
}

.decorative-border {
  width: 100%;
  height: clamp(0.875rem, 2.4vw, 2rem);
}

/* ---------------------------------------------------------------
   Buttons — one system: orange/black by default, black/cream on
   hover and keyboard focus. No opacity fades, no third color.
   --------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.875rem;
  border-radius: 999px;
  font-family: var(--font-condensed);
  font-weight: 900;
  font-variation-settings: "wdth" 64;
  font-size: var(--fs-condensed);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  background: var(--color-orange);
  color: var(--color-ink);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--color-ink);
  color: var(--color-cream);
  transform: translateY(-0.125rem);
}

.button:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .button:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding: var(--space-md);
  /* Anchored to hit Figma's mobile CTA height (316px) at 360px and
     the desktop height (540px) at 1280px, rather than a bare vw
     term that would undershoot both reference points. */
  min-height: clamp(19.75rem, 14.272rem + 24.348vw, 33.75rem);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .button {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Intro section
   --------------------------------------------------------------- */
.section--intro .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.intro-copy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  width: 100%;
}

/* ---------------------------------------------------------------
   Pool columns
   --------------------------------------------------------------- */
.section--pool .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.pool-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  align-items: stretch;
}

.pool-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pool-column__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.875rem;
  border: 3px solid var(--color-cream);
}

/* Default crop is centered; these nudge the frame toward each
   photo's actual subject so nothing important is cropped away. */
.pool-column__image--community {
  object-position: 68% center;
}

.pool-column__image--first-jobs {
  object-position: 32% center;
}

.pool-column__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pool-column .subhead,
.pool-column .body-copy {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   Action items
   --------------------------------------------------------------- */
.action-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  width: 100%;
}

.action-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: 1.875rem;
}

.action-item--divider {
  border-bottom: 3px solid var(--color-ink);
  padding-bottom: 2.5rem;
}

.action-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-blue);
}

.action-item__icon img {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
  background: var(--color-footer-orange);
}

.site-footer__contact {
  padding-top: var(--space-md);
}

.contact-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-line span,
.contact-line__email {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-variation-settings: "wdth" 64;
  font-size: var(--fs-condensed);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.contact-line__email:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Entrance reveal (progressive enhancement)

   `.js-reveal` is added to <html> by an inline head script, but
   only when JS runs AND the user hasn't asked for reduced motion.
   Without that class, `.reveal` elements have no special styling
   at all — full content is visible immediately if JS fails.
   --------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.pool-columns .pool-column:nth-child(2) {
  transition-delay: 0.08s;
}

.pool-columns .pool-column:nth-child(3) {
  transition-delay: 0.16s;
}

.action-list .action-item:nth-child(2) {
  transition-delay: 0.06s;
}

.action-list .action-item:nth-child(3) {
  transition-delay: 0.12s;
}

.action-list .action-item:nth-child(4) {
  transition-delay: 0.18s;
}

/* ---------------------------------------------------------------
   Responsive: stack multi-column layouts, preserving reading order
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .pool-columns {
    grid-template-columns: 1fr;
  }

  .action-list {
    grid-template-columns: 1fr;
  }

  .action-item--divider {
    padding-bottom: 1.875rem;
  }
}

@media (max-width: 700px) {
  .intro-copy {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   Mobile system — values pulled directly from the Figma mobile
   frame (360px reference) rather than extrapolated from desktop.
   Threshold matches where the compact stacked lockup takes over;
   tablet widths above this keep transitioning through the fluid
   desktop-oriented tokens above.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header__nav,
  .site-footer__nav {
    align-items: flex-start;
  }

  /* Compact stacked lockup replaces the wide desktop wordmark. */
  .wordmark__image--desktop {
    display: none;
  }

  .wordmark__image--mobile {
    display: block;
  }

  /* Figma's mobile section margin is 12px, not the ~16-20px fluid
     --space-sm used for the tablet/desktop range. */
  .edge-pad,
  .container {
    padding-inline: 0.75rem;
  }

  .hero {
    padding: 0.75rem;
  }

  /* Tagline and footer contact info stack as two left-aligned
     lines with no arrow, instead of wrapping an inline row. */
  .tagline,
  .contact-line {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .tagline__arrow,
  .contact-line__arrow {
    display: none;
  }

  .tagline span:not(.tagline__arrow),
  .contact-line span,
  .contact-line__email {
    font-size: 2.25rem; /* Figma "MBL Condensed": 36px */
    line-height: 0.95; /* down from 1.1 at desktop */
    white-space: normal;
  }

  /* The email address has no spaces to wrap at — Figma's own mobile
     render breaks mid-word ("SAVELOWRY@GMAIL." / "COM") rather than
     overflowing, so match that instead of letting it run off-screen. */
  .contact-line__email {
    overflow-wrap: anywhere;
  }

  .button {
    font-size: 2.25rem;
    line-height: 0.95;
    width: 100%;
    padding: 1.25rem 2rem; /* Figma mobile button padding: 20px/32px */
  }

  .headline {
    font-size: 4rem; /* Figma "MBL H1": 64px (line-height/tracking
                         ratios already match via existing em/ratio
                         values, so only the size needs to change) */
    text-align: left;
    width: 100%;
  }

  .subhead {
    font-size: 2.5rem; /* Figma "Sub" stays 40px on mobile, unlike
                           the headline/condensed styles — bypass
                           the fluid taper that would shrink it */
  }

  .section {
    padding-block: 3.75rem; /* Figma mobile section padding: 60px */
  }

  .section--intro .container,
  .section--pool .container,
  .section--actions .container {
    gap: var(--space-md); /* 30px, down from 60px */
  }

  .intro-copy {
    gap: var(--space-md);
  }

  .pool-columns {
    gap: var(--space-md);
  }

  .pool-column {
    gap: var(--space-sm); /* 20px image-to-body, down from 30px */
  }

  /* Images become compact fixed-feeling icons instead of full-width
     cards: fluid within a limited range, hitting Figma's 192px
     exactly at the 360px reference width (192 / 360 = 53.33vw). */
  .pool-column__image {
    width: clamp(9rem, 53.33vw, 13.75rem);
  }

  /* Figma's mobile action list is a single column where every item
     but the last gets the divider, not the 2x2 row pairing used at
     desktop widths. */
  .action-item:not(:last-child) {
    border-bottom: 3px solid var(--color-ink);
    padding-bottom: 2.5rem;
  }
}