/* ---------- Tokens ---------- */
/* Weight range 500-700: the Figma design uses 65 Medium throughout, so
   bolder usages render the true Medium glyphs instead of synthetic bold. */
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("assets/fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #FFD618;
  --orange: #F59A00;
  --ink: #0A0A0A;
  --black: #000000;
  --gray: #9A9A9A;
  --pink: #FF00B3;
  --white: #FFFFFF;

  /* Figma spec: Neue Haas Grotesk Display Pro (licensed; needs webfont
     files or an Adobe Fonts kit to render for visitors). The Adobe
     Fonts family name is "neue-haas-grotesk-display". */
  --font-display: "Neue Haas Grotesk Display Pro", "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --gap-xl: clamp(4rem, 4rem + 8vw, 12rem);
  --gap-lg: clamp(3rem, 3rem + 5vw, 8.5rem);
  --gap-md: clamp(2rem, 2rem + 3vw, 5rem);

  --h1-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.375rem);
  --h1-line: 1.07;
  /* Figma H2 is 30px/35px; sized down ~20% on request, same proportions */
  --body-size: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  --body-line: 1.167;
  --h3-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.25rem);
  --field-size: clamp(1rem, 0.9rem + 0.4vw, 1.28rem);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Figma opentype flags LNUM + TNUM on every text style */
  font-variant-numeric: lining-nums tabular-nums;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Type helpers ---------- */
.display-heading {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: 0.01em;
  font-weight: 500; /* Figma H1: 65 Medium */
  color: var(--ink);
}
.display-heading--orange { color: var(--orange); }
/* Figma stacks headings and their paragraphs with generous air (~160px
   at design scale) rather than butting them together. */
.display-heading + .body-text,
.display-heading + .body-list {
  margin-top: calc(clamp(2.5rem, 6vw, 6.5rem) + 8px);
}
/* Mobile type per Figma (H1-Mobile 37/40 medium 1%, note heading
   H2-Mobile 18/21 medium 2%, checkbox fine print 7px). */
@media (max-width: 720px) {
  .display-heading {
    font-size: 2.3125rem;  /* 37px */
    line-height: 2.5rem;   /* 40px */
    font-weight: 500;
    letter-spacing: 0.01em;
  }
}

.underline-word {
  position: relative;
  display: inline-block;
}
/* Stretch edge-to-edge under the full word (the SVG path itself spans
   its whole viewBox, so no inset is needed). */
.underline-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.11em;
  min-height: 3px;
  background: url("assets/img/squiggle.svg?v=3") no-repeat center / 100% 100%;
}

/* Figma: paragraphs sit in a narrower, inset column (1152px) than the
   headings (1509px) -- indent them on both sides. */
.body-text {
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-inline: clamp(1.5rem, 8vw, 8.5rem);
}
.body-text--label {
  color: var(--orange);
  font-weight: 700;
  margin-top: 0.4em;
}
.body-list {
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-inline: clamp(1.5rem, 8vw, 8.5rem);
}
.body-list li {
  position: relative;
  padding-left: 1.1em;
}
.body-list li::before {
  content: "–";
  position: absolute;
  left: 0;
}
.body-list-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 3rem;
  margin-inline: clamp(1.5rem, 8vw, 8.5rem);
}
.body-list-columns .body-list { margin-inline: 0; }
.highlight-pink { color: var(--pink); }

.text-link {
  color: var(--orange);
  text-decoration: underline;
}

/* ---------- Logo (reused in hero + footer) ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.logo-mark { flex-shrink: 0; }
.logo-word {
  font-weight: 700;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  color: var(--ink);
  white-space: nowrap;
}
.site-link {
  font-size: var(--h3-size);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.site-link-arrow {
  color: var(--ink);
  width: 0.7em;
  height: 0.7em;
  flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-title {
  max-width: 20ch;
}
.hero-top-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-shrink: 0;
}
/* Sits in the hero flow, but always stacks above anything it overlaps
   (title, images, arrows) -- nothing may cover the badge. */
.badge-circle {
  position: relative;
  z-index: 20;
  width: clamp(9rem, 8rem + 6vw, 15.5rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  display: block;
}
.badge-circle-svg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}
.badge-circle:hover .badge-circle-svg,
.badge-circle:focus-visible .badge-circle-svg {
  transform: rotate(20deg);
}
.badge-circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.15em;
  padding-left: 18%;
  transform: rotate(-10deg);
}
.badge-date {
  color: var(--orange);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
}
.badge-cta {
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.3rem);
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 4vw, 3rem);
}
/* The PNG canvas is trimmed symmetrically around the composition, so a
   centered element means a centered globe. (Widths rescaled: the old
   900px-wide canvas had ~30% empty padding, the new one has ~6%.) */
.hero-globe {
  width: min(397px, 50vw);
  height: auto;
}
.hero-logo {
  position: absolute;
  left: 0;
  bottom: 6%;
}
/* Same H2 token as body text; box width in em preserves the Figma
   408px-at-30px caption box proportion at every viewport. */
.hero-caption {
  position: absolute;
  right: 0;
  bottom: 4%;
  max-width: 13.6em;
  font-size: var(--body-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.167;
}
/* Mobile hero (per Mobile-2 Figma frame): badge overlaps the title's
   top-right; below it the column stacks globe -> caption -> logo.
   Kicks in at 940px already: below that, the absolutely positioned
   caption starts overlapping the globe in the desktop layout. */
@media (max-width: 940px) {
  .hero-top { position: relative; }
  .hero-title { position: relative; z-index: 1; }
  .hero-top-right { position: static; }
  .site-link { position: absolute; right: 0; top: -1rem; }
  /* Badge hangs off the title's bottom-right, over the globe's white
     corner, so it can never cover the headline text. */
  .badge-circle {
    position: absolute;
    right: 0;
    top: calc(100% - 0.75rem);
    width: clamp(7rem, 33vw, 8.5rem);
  }
  .hero-visual { flex-direction: column; align-items: center; }
  /* min ~360px wide even on small phones (overflows the container
     padding a little; body clips horizontal overflow) */
  .hero-globe {
    width: clamp(300px, 92vw, 420px);
    max-width: none;
  }
  .hero-caption {
    position: static;
    order: 1;
    margin-top: 1.75rem;
    max-width: none;
    align-self: flex-start;
    /* H2-Mobile: 18/21 medium, 2% tracking */
    font-size: 1.125rem;
    line-height: 1.3125rem;
    letter-spacing: 0.02em;
  }
  .hero-logo { position: static; order: 2; margin-top: 2.25rem; align-self: flex-start; }
}
/* Narrow screens show only the arrow icon, no "unterstrass.edu" label. */
@media (max-width: 620px) {
  .site-link-text { display: none; }
  .site-link-arrow { width: 1rem; height: 1rem; }
}

/* ---------- Section rhythm ---------- */
.section-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  padding-block: clamp(4.5rem, 9vw, 10rem);
}
.section-block--wide-gap { gap: var(--gap-xl); }
/* Tighter section padding below the photo strip */
.section-block:has(.photo-strip) {
  padding-bottom: clamp(2.5rem, 5vw, 5.5rem);
}
.subsection {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.subsection > .body-text + .body-list,
.subsection > .body-text--label + .body-list {
  margin-top: -0.75rem;
}

/* ---------- Sticky notes (yellow paper) ---------- */
/* .sticky-note is the unclipped positioning wrapper (holds the tape);
   .note-paper is the clipped, rotated paper shape. Tape must live outside
   the clip-path or its overhang gets cut off. */
.sticky-note {
  position: relative;
}
.note-paper {
  position: relative;
  z-index: 1;
  background: var(--yellow);
  border-radius: 6px;
  /* Fixed px insets (not %) so the deckled-edge look stays a few px
     regardless of box height -- a % inset on a tall mobile box (more
     text = more height) eats enough of the top to gap the tape. */
  clip-path: polygon(4px 8px, calc(100% - 3px) 0px, 100% calc(100% - 8px), 3px 100%);
  box-shadow: 0 18px 34px -18px rgba(0,0,0,0.35);
  padding: clamp(1.75rem, 4vw, 3.75rem) clamp(1.75rem, 4vw, 4.5rem);
}

/* Rotation lives on the wrapper (not .note-paper) so the tape and the
   paper rotate together as one rigid unit -- rotating only the paper
   let the tape (its unrotated sibling) drift away from the paper's
   visual top edge as box height changed across viewports. */
.sticky-note--newsletter {
  margin-top: clamp(3rem, 6vw, 5rem);
  max-width: 920px;
  transform: rotate(-0.6deg);
}
.sticky-note--newsletter .display-heading {
  max-width: 18ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* H2-Mobile: 18/21 medium, 2% tracking, no width cap */
@media (max-width: 720px) {
  .sticky-note--newsletter .display-heading {
    font-size: 1.125rem;
    line-height: 1.3125rem;
    letter-spacing: 0.02em;
    max-width: none;
  }
}

.sticky-note--quote {
  max-width: 720px;
  align-self: center;
  margin-top: calc(clamp(2.5rem, 6vw, 7rem) + 10px);
}
/* Quote papers get ~15px extra air above and below the text */
.sticky-note--quote .note-paper {
  padding-block: calc(clamp(1.75rem, 4vw, 3.75rem) + 15px);
}
/* 50px tighter between the closing quote note and the footer */
main > .section-block:last-child {
  padding-bottom: calc(clamp(4.5rem, 9vw, 10rem) - 50px);
}
.sticky-note--tilt-left { transform: rotate(-1.4deg); }
.sticky-note--tilt-right { transform: rotate(1.4deg); }

.quote-text {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: 0.01em;
  font-weight: 500; /* Figma H1: 65 Medium */
  color: var(--ink);
  /* The deckled clip-path tilts the paper's visible edges up-to-the-
     right beyond the note's own rotation -- tilt the text with it. */
  transform: rotate(-0.65deg);
}
@media (max-width: 640px) {
  .quote-text { transform: rotate(-1.2deg); }
}
.quote-text--noquotes { font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); }

.tape {
  position: absolute;
  z-index: 2;
  width: clamp(90px, 12vw, 160px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* top: 0 anchors the tape to the paper's top edge (paper starts at the
   wrapper's top since tape is absolute); translateY(-50%) then centers
   it ON the edge -- half above, half on the paper -- at any size. */
.tape--newsletter {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
}
.tape--quote {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  /* Chunky like the photo-card tapes */
  width: clamp(100px, 13vw, 190px);
}
.sticky-note--tilt-right .tape--quote {
  transform: translate(-50%, -50%) rotate(4deg);
}
/* On phones the vw-based sizes bottom out too small -- scale the tape
   up relative to the (much narrower) notes, like the mobile design. */
@media (max-width: 720px) {
  .tape { width: clamp(110px, 30vw, 150px); }
  .tape--quote { width: clamp(100px, 34vw, 140px); }
  .photo-card::before { width: 100px; height: 37px; }
}

/* ---------- Hand-drawn connector arrows ---------- */
/* Note arrows are drawn at runtime (script.js drawNoteArrows): a 1x1
   SVG anchored at the note's top-left with overflow visible, paths in
   note-local coordinates. Same 3px line as everything else. */
.sticky-note svg.connector {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.sticky-note svg.connector path {
  fill: none;
  stroke: var(--ink);
  /* 2px is the site-wide line weight (underline, badge ring, arrows) */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arrow-anchor { position: relative; }
/* Fixed-shape arrows from the design that replace the runtime-drawn
   connector on specific notes (data-arrow="static"). */
.arrow-static {
  position: absolute;
  right: 4%;
  top: 0;
  height: clamp(110px, 12vw, 150px);
  width: auto;
  transform: translateY(-72%);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
/* The gap above the note shrinks to ~50px on phones -- keep the tail
   inside it (below the text) and let the head dip only into the note's
   top padding (24px), never onto the quote text. */
@media (max-width: 720px) {
  .arrow-static {
    height: 80px;
    transform: translateY(-72%);
    right: 8%;
  }
}
/* Big arc arrow onto the newsletter note (tail at the intro text,
   head diving onto the paper). */
.arrow-static--curve {
  height: clamp(150px, 18vw, 200px);
  right: 6%;
  transform: translateY(-70%);
}
/* Tall S-curve between the sun and the closing quote note. */
.arrow-static--sun {
  height: clamp(150px, 15vw, 181px);
  right: 12%;
  transform: translateY(-78%);
}

/* Static in-flow arrow before the photo strip (tail top-right, head
   bottom-left, pointing down toward the photos). */
.arrow--photos {
  display: block;
  width: clamp(220px, 30vw, 400px);
  height: auto;
  margin: clamp(1rem, 2vw, 2rem) 0 0 clamp(2rem, 26vw, 24rem);
  /* Shift down (visually only) so the head lands in the upper part of
     the first photo; z-index draws it over the card. */
  position: relative;
  z-index: 2;
  transform: translateY(clamp(3.5rem, 6vw, 5.5rem));
  pointer-events: none;
  user-select: none;
}
@media (max-width: 720px) {
  .arrow--photos {
    width: clamp(160px, 48vw, 260px);
    margin-left: clamp(2rem, 30vw, 10rem);
  }
}

/* ---------- Newsletter form ---------- */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.field { flex: 1 1 200px; }
.field--email { flex: 1 1 260px; }
.field input {
  width: 100%;
  border: none;
  border-radius: 5px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--field-size);
  font-weight: 700;
  padding: 0.9em 1.1em;
}
.field input::placeholder { color: var(--gray); font-weight: 700; }
.field input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.btn-classic {
  border: none;
  border-radius: 5px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--field-size);
  padding: 0.9em 2.4em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.btn-classic:hover { filter: brightness(1.08); }
.btn-classic:active { filter: brightness(0.95); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1rem);
  font-weight: 700;
  margin-top: 0.4rem;
  cursor: pointer;
}
@media (max-width: 720px) {
  .checkbox-row {
    /* 7px comes straight from the Figma mobile frame */
    font-size: 7px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
}
.checkbox-row a { text-decoration: underline; }
.checkbox-row input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--ink);
  cursor: pointer;
}

/* ---------- Photo strip ---------- */
.photo-strip {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /* just enough headroom for the tape + card tilt */
  padding-block: 1.75rem;
  /* Pull the row up against the section gap, closer to the intro text */
  margin-top: clamp(-9rem, -8.5vw, -3rem);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.photo-strip:active { cursor: grabbing; }
.photo-strip-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--container-pad);
  width: max-content;
}
.photo-card {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  background: var(--white);
  padding: 0.6rem 0.6rem 0;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.4);
  position: relative;
}
/* No extra rotation: the tape is a child of the card, so it inherits
   the card's tilt and stays square to the photo edge, like the design. */
.photo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 115px;
  height: 43px;
  transform: translate(-50%, -50%);
  background: url("assets/img/tape.png") no-repeat center / contain;
  pointer-events: none;
}
.photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  -webkit-user-drag: none;
}
.photo-card--1 { transform: rotate(-3deg); }
.photo-card--2 { transform: rotate(2deg); }
.photo-card--3 { transform: rotate(-2deg); }
.photo-card--4 { transform: rotate(3deg); }
.photo-card--5 { transform: rotate(-2.5deg); }
.photo-card--6 { transform: rotate(2.5deg); }

/* ---------- Sun illustration ---------- */
/* Mobile: square crop at the design's 347px. Desktop (>=721px): the
   wide 1254x671 crop from the desktop frame, near container width. */
.sun-picture { display: block; }
.sun-illustration {
  display: block;
  width: min(347px, 100%);
  margin-inline: auto;
}
@media (min-width: 721px) {
  .sun-illustration { width: min(1254px, 100%); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--yellow);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.logo--footer { align-self: start; }
.footer-heading {
  color: var(--orange);
  font-size: var(--h3-size);
  font-weight: 700;
  margin-bottom: 0.15em;
}
.footer-heading--disclaimer { margin-top: 2.2em; }
.footer-text {
  font-size: var(--h3-size);
  line-height: 1.5;
  font-weight: 700;
}
.footer-text a { text-decoration: underline; }
.footer-copyright {
  grid-column: 1 / -1;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
  font-weight: 700;
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .logo--footer { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-heading--disclaimer { margin-top: 1.5em; }
}

@media (max-width: 640px) {
  .body-list-columns { grid-template-columns: 1fr; gap: 0; }
  .note-paper { padding: 1.5rem 1.4rem; }
}
/* Quote notes use H2-Mobile on phones: 18/21 medium, 2% tracking */
@media (max-width: 720px) {
  .quote-text {
    font-size: 1.125rem;
    line-height: 1.3125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
}

/* Mobile-2 Figma frame: text flush with the heading margin (no inset)
   and round bullets instead of dashes. */
@media (max-width: 720px) {
  .body-text,
  .body-list,
  .body-list-columns {
    margin-inline: 0;
  }
  .body-list li::before { content: "\2022"; }
}