/* FYO — First Years Out
   Translated from the "FYO Website" design canvas, option 2a (desktop) with the
   turn-3 mobile frames as the narrow-screen spec. */

:root {
  /* 2026 branding kit. `forest` is the darkest surface (bars, sheets, the
     dark cards); `field` is the primary green — page ground, and the text
     colour on every cream surface. */
  --forest: #1F3A33;
  --field: #294A42;
  --cream: #E4DBCC;
  --rust: #B55D3E;
  --blue: #7195BC;
  --sage: #A2B5A1;
  --moss: #446858;
  --mist: #B7CBD7;
  --slate: #2C3B49;
  --paper: #fff;
  --on-blue: #1E342E;

  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --body: Inter, system-ui, -apple-system, sans-serif;
  /* League Spartan carries every all-caps label. Not a monospace despite the
     role it plays in the layout. */
  --label: "League Spartan", system-ui, sans-serif;
  --script: Caveat, "Segoe Script", cursive;
  --serif: Tinos, Georgia, "Times New Roman", serif;

  /* Cards lift off the ground they sit on, and the ground is one of two
     things, so there are two. On cream the shadow is the ink colour at low
     alpha; on forest it has to be darker than the surface it falls on, which
     ink is not. Two layers each: a tight one for the contact edge and a wide
     one for the ambient throw — a single blur reads as a smudge at this
     radius. */
  --lift: 0 6px 18px rgba(41, 74, 66, .10), 0 2px 5px rgba(41, 74, 66, .07);
  --lift-hover: 0 16px 34px rgba(41, 74, 66, .20);
  --lift-dark: 0 10px 26px rgba(8, 20, 17, .30), 0 2px 6px rgba(8, 20, 17, .20);
  --lift-dark-hover: 0 20px 42px rgba(8, 20, 17, .42);

  --measure: 1180px;
  --gut: 40px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 78px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--field);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 2.5px solid var(--rust);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip the smooth-scroll and every entrance for anyone who asked us to. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── Type helpers ────────────────────────────────────────────────────────── */

.label { font-family: var(--label); }

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--field);
}
.display--cream { color: var(--cream); }

.script {
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--rust);
}

.eyebrow {
  margin: 0;
  font-family: var(--label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
}
.eyebrow--sage { color: var(--sage); }
.eyebrow--rust { color: var(--rust); letter-spacing: .14em; }

.sechead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

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

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 16px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s;
}
.btn--rust { background: var(--rust); color: var(--cream); }
.btn--rust:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(181, 93, 62, .45); }
.btn--cream { background: var(--cream); color: var(--field); }
.btn--cream:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.btn--ghost { color: var(--cream); border-color: rgba(228, 219, 204, .5); }
.btn--ghost:hover { background: rgba(228, 219, 204, .14); border-color: var(--cream); }
.btn--outline { color: var(--field); border-color: rgba(41, 74, 66, .45); }
.btn--outline:hover { background: rgba(41, 74, 66, .07); border-color: var(--field); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--forest);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  text-decoration: none;
}
.mark { flex: none; height: 44px; width: auto; }
.brand__word { font: 700 12px var(--label); letter-spacing: .2em; white-space: nowrap; }

.topbar__nav { display: flex; align-items: center; gap: 30px; }
.topbar__nav .btn { padding: 11px 20px; min-height: 40px; }
.topbar__link {
  font: 500 13px var(--body);
  color: var(--cream);
  text-decoration: none;
  transition: color .25s;
}
.topbar__link:hover { color: var(--sage); }

/* Hamburger, becoming an × while the sheet is open. */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  transition: transform .3s var(--ease), opacity .2s, width .3s;
}
.burger span:last-child { width: 14px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { width: 22px; transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu sheet ───────────────────────────────────────────────────── */

.sheet {
  display: none;
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  z-index: 70;
  background: var(--forest);
  padding: 26px var(--gut) calc(34px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__links { display: flex; flex-direction: column; }
.sheet__link {
  padding: 16px 0;
  border-bottom: 1px solid rgba(228, 219, 204, .15);
  font: 400 34px/1 var(--display);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}
.sheet__actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.sheet__sign { margin: 30px 0 0; font: 700 20px var(--script); color: var(--sage); }
.sheet__more { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 16px; }
.sheet__morelink { font: 500 13px var(--body); color: rgba(228, 219, 204, .75); text-decoration: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { background: var(--field); padding-block: 56px 48px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px;
  align-items: center;
}
.hero__eyebrow { margin-bottom: 22px; color: var(--cream); animation: fadeUp .6s both; }

.hero__headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 7.4vw, 92px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--rust);
  paint-order: stroke fill;
}
/* Each line is clipped so its inner span can rise from below the baseline. */
.riser { display: block; overflow: hidden; padding-bottom: 2px; }
.riser__inner { display: block; animation: rise .85s var(--ease) both; }

[data-stagger="0"] { animation-delay: .05s; }
[data-stagger="1"] { animation-delay: .17s; }
[data-stagger="2"] { animation-delay: .29s; }
[data-stagger="3"] { animation-delay: .41s; }

.hero__lede {
  margin: 26px 0 0;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cream);
  text-wrap: pretty;
  animation: fadeUp .8s .42s var(--ease) both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  animation: fadeUp .8s .55s var(--ease) both;
}
.hero__media { position: relative; margin: 0; }
/* The height follows the width rather than being pinned, because the column
   narrows faster than the viewport does: at a fixed 420px the frame turns
   tall and narrow around 1000px, and `cover` answers that by cropping the
   leaders at either end out of the photograph. The cap is the height the
   frame has always had at full width. */
.frame.hero__frame {
  box-shadow: var(--lift-dark);
  aspect-ratio: 8 / 7;
  height: auto;
  max-height: 420px;
  align-items: flex-start;
}

.badge {
  position: absolute;
  bottom: -18px;
  left: -26px;
  padding: 14px 20px;
  border-radius: 6px;
  background: var(--blue);
  color: var(--field);
  font: 700 26px var(--script);
  box-shadow: var(--lift-dark);
  transform: rotate(-3deg);
  animation: float 5.5s ease-in-out infinite;
}

/* ── Hatched placeholders ────────────────────────────────────────────────── */

.frame {
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 10px, var(--hatch-b) 10px 20px);
}
.frame__caption { font: 400 10px var(--label); color: var(--caption); }

/* A frame holding a photograph keeps its border and radius but loses the inset,
   so the photograph runs edge to edge: the hatching is the stand-in for a
   photograph, and matting one with it would show the placeholder and the thing
   it stood in for at once. */
.frame--photo { padding: 0; }

/* `cover` crops rather than letterboxes — the frames have a fixed shape and the
   photographs do not. Both dimensions are set explicitly because the `width`
   and `height` attributes on the img, which are there to reserve the box, are
   presentational hints; without this the image renders at its own 1000x800 and
   runs out of the frame. */
.frame__img {
  width: 100%;
  height: 100%;
  /* One pixel inside the frame's 8px, so the border sits flush to the corner. */
  border-radius: 7px;
  object-fit: cover;
  /* Where the frame is wider than it is tall — the hero on a phone — the crop
     comes off the top, which is canopy, rather than off the bottom, which is
     people. The frame is taller than this on a desktop, so nothing moves. */
  object-position: 50% 68%;
}

.frame--cream-on-green {
  --hatch-a: rgba(228, 219, 204, .13);
  --hatch-b: rgba(228, 219, 204, .04);
  --caption: rgba(228, 219, 204, .65);
  border: 1px solid rgba(228, 219, 204, .25);
}
.frame--ink {
  --hatch-a: rgba(41, 74, 66, .13);
  --hatch-b: rgba(41, 74, 66, .04);
  --caption: rgba(41, 74, 66, .6);
}
.frame--blue {
  --hatch-a: rgba(113, 149, 188, .4);
  --hatch-b: rgba(113, 149, 188, .13);
  --caption: rgba(41, 74, 66, .6);
}
.frame--sage {
  --hatch-a: rgba(162, 181, 161, .5);
  --hatch-b: rgba(162, 181, 161, .16);
  --caption: rgba(41, 74, 66, .6);
}

/* ── Marquee ─────────────────────────────────────────────────────────────── */

.marquee { background: var(--rust); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; animation: slide 26s linear infinite; will-change: transform; }
/* The padding, not a gap, carries the seam — so -50% lands exactly one run on. */
.marquee__run {
  padding-right: 40px;
  font: 700 13px var(--label);
  letter-spacing: .2em;
  color: var(--cream);
}

/* ── What we do ──────────────────────────────────────────────────────────── */

.pillars { background: var(--cream); color: var(--field); padding-block: 64px; }
.pillars__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.pillar {
  background: var(--paper);
  border: 1.5px solid var(--field);
  border-radius: 8px;
  padding: 26px;
  box-shadow: var(--lift);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.pillar:hover { transform: translateY(-7px); box-shadow: var(--lift-hover); }
.pillar--dark { background: var(--forest); color: var(--cream); }
.pillar--dark:hover { box-shadow: 0 16px 34px rgba(41, 74, 66, .32); }

.pillar__kicker {
  margin: 0 0 16px;
  font: 700 11px var(--label);
  letter-spacing: .14em;
  color: var(--rust);
}
.pillar--dark .pillar__kicker { color: var(--sage); }
.pillar__title { margin: 0 0 10px; font: 400 26px/1.1 var(--display); text-transform: uppercase; }
.pillar__body { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(41, 74, 66, .75); }
.pillar--dark .pillar__body { color: var(--cream); }

/* ── Alumni stories ──────────────────────────────────────────────────────── */

.stories { background: var(--field); padding-block: 64px 60px; }
.stories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.stories__note { margin: 0; font-size: 13px; color: rgba(228, 219, 204, .7); }

/* Rails bleed to the viewport edge but start flush with the text column. */
.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 219, 204, .3) transparent;
}
.rail > * { flex: none; scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(228, 219, 204, .25); border-radius: 3px; }

/* `scroll-padding` has to match the gutter, or mandatory snapping scrolls the
   first card flush to the viewport edge on load and eats the padding. */
.stories__rail {
  /* Room for the quote cards' shadow as well as the scrollbar. A scroller
     clips both axes once either one is not `visible`, so at the rail's own
     14px the throw below each card ended in a ruled line across it. A shadow
     reaches `offset + blur` past the box, which for the widest `--lift-dark`
     layer is 10 + 26. The episode rail casts nothing and keeps the 14px. */
  padding-block: 18px 40px;
  --rail-gutter: max(var(--gut), calc((100vw - var(--measure)) / 2 + var(--gut)));
  padding-inline: var(--rail-gutter);
  scroll-padding-inline: var(--rail-gutter);
}

/* A column so the byline can sit on the floor of the card. The rail stretches
   every card to the tallest, and with the byline tucked straight under the
   quote a short one left a pool of dead space below its own name. */
.quote {
  display: flex;
  flex-direction: column;
  width: 440px;
  border-radius: 8px;
  padding: 30px;
  box-shadow: var(--lift-dark);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.quote--cream { background: var(--cream); color: var(--field); }
.quote--blue { background: var(--blue); color: var(--on-blue); }
/* 26px, not the 30px the frames were drawn at. The real stories that came in
   run longer than the placeholders did, and at 30px the longest one was eight
   lines, which set the height of every card beside it. For the same reason the
   renderer marks any quote past its length thresholds `quote--long` or
   `quote--xlong` and drops it a size, so one outlier does not stretch the whole
   rail. The cards are only 300px wide on a phone, where no readable size pulls
   the longest quote back to the line count of the rest, so the steps there are
   gentler and the tallest card still gives the rail a little height. */
.quote__text { margin: 0; font: 400 26px/1.25 var(--serif); }
.quote--long .quote__text { font-size: 22px; line-height: 1.28; }
.quote--xlong .quote__text { font-size: 19px; line-height: 1.3; }
.tilt-left:hover { transform: rotate(-1.2deg) translateY(-6px); }
.tilt-right:hover { transform: rotate(1.2deg) translateY(-6px); }
.quote:hover { box-shadow: var(--lift-dark-hover); }

.byline { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; }
.avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, rgba(41, 74, 66, .16) 0 6px, rgba(41, 74, 66, .05) 6px 12px);
}
.quote--blue .avatar {
  background: repeating-linear-gradient(135deg, rgba(30, 52, 46, .2) 0 6px, rgba(30, 52, 46, .06) 6px 12px);
}
.byline__who { display: flex; flex-direction: column; min-width: 0; }
.byline__name { font: 700 14px var(--body); }
.byline__meta { font: 400 12px var(--label); color: rgba(41, 74, 66, .6); }
.quote--blue .byline__meta { color: rgba(30, 52, 46, .65); }

.quote--invite {
  box-shadow: none;
  width: 300px;
  border: 1.5px dashed rgba(228, 219, 204, .4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cream);
}
.quote__invite { margin: 0; font-size: 20px; line-height: 1.3; }
.quote--invite a { margin-top: 10px; font-size: 11px; letter-spacing: .1em; font-weight: 700; text-decoration: none; }

/* Page dots, mobile only — the client keeps them in sync with scroll. */
.dots {
  display: none;
  gap: 6px;
  padding-top: 4px;
  padding-inline: var(--gut);
}
.dots span {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(228, 219, 204, .35);
  transition: width .3s var(--ease), background .3s;
}
.dots span.is-active { width: 22px; background: var(--cream); }

/* ── Podcast + Instagram ─────────────────────────────────────────────────── */

.feeds { background: var(--cream); color: var(--field); padding-block: 60px; }
/* `stretch`, not `start`: the two cards hold different amounts and ended a
   few pixels apart at the bottom. Nothing drew attention to that until they
   started casting shadows, which draw the eye straight to the edge. */
.feeds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.card { border-radius: 16px; padding: 30px; box-shadow: var(--lift); }
.card--ink { background: var(--forest); color: var(--cream); }
.card--paper { background: var(--paper); border: 1.5px solid var(--field); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.card__more {
  font: 700 11px var(--label);
  letter-spacing: .1em;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}
.card__more--rust { color: var(--rust); }
.card__note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(41, 74, 66, .7); }

/* The cover is a 16:9 frame from the video, wide enough that a square crop
   would lose both hosts, so it runs the width of the card. */
.feature { display: flex; flex-direction: column; gap: 18px; }
.feature__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 12px;
  --hatch-a: rgba(228, 219, 204, .28);
  --hatch-b: rgba(228, 219, 204, .1);
}
.feature__meta { min-width: 0; }
.feature__title { margin: 0; font: 400 28px/1.1 var(--display); text-transform: uppercase; }
.feature__guest { margin: 6px 0 0; font-size: 15px; color: rgba(228, 219, 204, .85); }
.feature__stamp { margin: 8px 0 0; font-size: 11px; color: rgba(228, 219, 204, .65); }

.listen { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Side by side at equal widths when both fit, each a full row when not. */
.listen .btn { flex: 1 1 200px; }

.rail--chips { margin-top: 22px; gap: 12px; }
/* Wide enough to read, and allowed to grow into whatever the rail has left.
   At a fixed 160px the three episodes overflowed their rail by 26px, which is
   too little to look like a rail you can scroll and too much to look
   deliberate — it just cut the last title in half. Growing means three fill
   the card, and a fourth episode overflows by enough to read as scrollable. */
.chip {
  flex: 1 1 150px;
  min-width: 120px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(228, 219, 204, .1);
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background .3s;
}
.chip:hover { background: rgba(228, 219, 204, .18); }
.chip__title { font: 600 13.5px/1.35 var(--body); }
.chip__meta { margin-top: 8px; font-size: 10px; color: rgba(228, 219, 204, .6); }

.masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 10px; }
.masonry__cell { transition: transform .4s var(--ease); }
.masonry__cell:hover { transform: scale(1.05); }
.masonry__cell--tall { grid-row: span 2; }
.masonry__cell--tall:hover { transform: scale(1.03); }
.masonry__art { height: 100%; border-radius: 10px; padding: 10px; }
/* A fetched post fills its cell the way the hatch does. The square source is
   cropped by the grid, so `cover` is what keeps faces centred rather than
   letterboxed. */
/* No shadow on the tiles. They sit 10px apart inside a card that already
   casts one, and at that spacing nine shadows read as a scattered pile
   rather than as the single mosaic the grid is. */
.masonry__link { display: block; height: 100%; border-radius: 10px; overflow: hidden; }
.masonry__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Interest form ───────────────────────────────────────────────────────── */

.interest { background: var(--forest); padding-block: 64px; }
.interest__card {
  box-shadow: var(--lift-dark);
  max-width: 880px;
  margin-inline: auto;
  background: var(--cream);
  color: var(--field);
  border-radius: 18px;
  overflow: hidden;
}
.interest__top { padding: 28px 32px 0; }

.tabs { display: flex; gap: 8px; padding: 5px; border-radius: 10px; background: rgba(41, 74, 66, .09); }
.tab {
  flex: 1;
  min-height: 44px;
  padding: 11px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: var(--label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(41, 74, 66, .6);
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.tab.is-active { background: var(--paper); color: var(--field); box-shadow: 0 1px 3px rgba(41, 74, 66, .14); }

.panel { padding: 26px 32px 32px; }
.interest__heading { margin: 0; font: 400 36px/1 var(--display); text-transform: uppercase; }
.interest__blurb { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(41, 74, 66, .75); }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  margin-bottom: 7px;
  font: 700 10px var(--label);
  letter-spacing: .1em;
  color: rgba(41, 74, 66, .65);
}
.field__req { color: var(--rust); margin-left: 4px; }

.input {
  width: 100%;
  min-height: 44px;
  padding: 13px;
  border: 1px solid rgba(41, 74, 66, .25);
  border-radius: 10px;
  background: var(--paper);
  font: 400 14.5px var(--body);
  color: var(--field);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: rgba(41, 74, 66, .4); }
.input:focus-visible {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(181, 93, 62, .18);
}
.input--long { min-height: 88px; resize: vertical; line-height: 1.5; }
.input[aria-invalid="true"] { border-color: #a3341a; }

.select { position: relative; display: flex; }
.select .input { appearance: none; padding-right: 38px; }
.select__caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(41, 74, 66, .4);
  pointer-events: none;
}

.form__foot {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.fineprint { margin: 0; font-size: 11px; color: rgba(41, 74, 66, .55); }

.form__status { margin: 0; font-size: 13.5px; line-height: 1.5; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #1f6145; font-weight: 500; }
.form__status.is-error { color: #a3341a; font-weight: 500; }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer { background: var(--field); border-top: 1px solid rgba(228, 219, 204, .15); padding-block: 34px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 18px; }
.footer__mark { flex: none; height: 56px; width: auto; opacity: .9; }
.footer__stamp { margin: 0; font: 700 11px var(--label); letter-spacing: .14em; color: rgba(228, 219, 204, .7); }
.footer__motto {
  margin: 8px 0 0;
  font: 600 11px var(--label);
  letter-spacing: .24em;
  color: rgba(228, 219, 204, .55);
}
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__link { font: 500 13px var(--body); color: var(--cream); text-decoration: none; transition: color .25s; }
.footer__link:hover { color: var(--sage); }

/* ── Sticky "next Monday" bar (narrow screens only) ──────────────────────── */

.sticky { display: none; }
.sticky__when { flex: 1; margin: 0; font: 700 9.5px var(--label); letter-spacing: .1em; line-height: 1.5; color: rgba(228, 219, 204, .7); }

/* ── Scroll-triggered entrances ──────────────────────────────────────────── */

/* Pure CSS, so there is no flash of hidden content and no JS dependency:
   browsers without scroll-driven animations simply show the content. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: fadeUp .7s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-9px); }
}

/* ── Narrow layouts ──────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .feeds__grid { grid-template-columns: minmax(0, 1fr); }
}

/* The turn-3 mobile frames, at 390pt and up to tablet width. */
@media (max-width: 900px) {
  :root { --gut: 18px; }

  .topbar__nav { display: none; }
  .burger { display: flex; }
  .mark { height: 34px; }
  .brand__word { font-size: 10.5px; letter-spacing: .18em; }
  .sheet.is-open { display: block; }

  /* Room for the fixed bar at the bottom. */
  body { padding-bottom: 92px; }

  .sticky {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    align-items: center;
    gap: 10px;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--forest);
    border-top: 1px solid rgba(228, 219, 204, .18);
  }
  .sticky .btn { padding: 15px 20px; font-size: 11px; }

  .hero { padding-block: 30px 26px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero__eyebrow { margin-bottom: 14px; font-size: 9.5px; letter-spacing: .16em; }
  .hero__headline { -webkit-text-stroke-width: 2px; line-height: .92; }
  .hero__lede { margin-top: 18px; max-width: none; font-size: 15.5px; }
  .hero__actions { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 10px; }
  /* Stacked, the frame runs the width of the column — which is a phone at one
     end of this breakpoint and most of a tablet at the other. A ratio rather
     than the pinned height it used to have, so the band keeps its shape across
     that whole range: pinned, it flattened into a letterbox on the wide end and
     `cover` answered that by cropping the leaders' heads off. 16/10 is as flat
     as it can go before the crop reaches them. */
  .frame.hero__frame { aspect-ratio: 16 / 10; height: auto; max-height: none; }
  .badge { bottom: -14px; left: -6px; padding: 10px 16px; font-size: 21px; }

  .marquee { padding: 11px 0; }
  .marquee__track { animation-duration: 18s; }
  .marquee__run { font-size: 11px; letter-spacing: .18em; }

  .pillars { padding-block: 34px 38px; }
  .sechead { margin-bottom: 20px; gap: 10px; }
  .pillars__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pillar { padding: 20px; }
  .pillar__title { font-size: 22px; }
  .pillar__kicker { margin-bottom: 12px; font-size: 10px; }
  .pillar__body { font-size: 14.5px; }

  .stories { padding-block: 30px 34px; }
  .stories__head { margin-bottom: 18px; }
  .quote { width: 300px; padding: 22px; }
  .quote__text { font-size: 23px; line-height: 1.3; }
  .quote--long .quote__text { font-size: 19px; }
  .quote--xlong .quote__text { font-size: 18px; }
  .byline { padding-top: 20px; gap: 12px; }
  .avatar { width: 44px; height: 44px; }
  .byline__name { font-size: 13px; }
  .byline__meta { font-size: 10.5px; }
  .quote--invite { width: 240px; }
  .dots { display: flex; }

  .feeds { padding-block: 26px 34px; }
  .card { padding: 22px; }
  .card__head { margin-bottom: 18px; }
  .feature { gap: 14px; }
  .feature__art { border-radius: 10px; }
  .feature__title { font-size: 22px; }
  .chip { flex-basis: 150px; padding: 12px; }
  .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
  .masonry__cell--tall { grid-row: span 1; }

  .interest { padding-block: 30px 34px; }
  .interest__top { padding: 16px 16px 0; }
  .panel { padding: 20px 16px 22px; }
  .interest__heading { font-size: 30px; }
  .interest__blurb { font-size: 15px; }
  .tab { font-size: 10px; padding: 12px 4px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
  .fineprint { text-align: center; }

  .footer { padding-block: 26px 30px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__mark { height: 52px; }
  .footer__stamp { font-size: 10px; line-height: 1.8; }
  .footer__motto { font-size: 9.5px; letter-spacing: .2em; line-height: 1.9; }
  .footer__links { gap: 16px; }
}

@media (max-width: 420px) {
  .brand__word { font-size: 9.5px; letter-spacing: .14em; }
  .sheet__link { font-size: 30px; }
}

/* ── The code-of-conduct page ────────────────────────────────────────────── */

/* Cream ground and a narrow measure, because this is the one page people
   read rather than scan. Everything else on the site is a section you pass
   through on the way to the GroupMe link. */
.doc { background: var(--cream); color: var(--field); padding-block: 60px 76px; }
.doc__inner { max-width: 760px; }

.doc__head {
  padding-bottom: 30px;
  margin-bottom: 38px;
  border-bottom: 1.5px solid rgba(41, 74, 66, .22);
}
/* Not `eyebrow--sage`: sage is a cream-on-green colour and this label sits on
   cream, where it would all but disappear. */
.doc__eyebrow { margin-bottom: 16px; color: var(--rust); }
.doc__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 60px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--field);
}
.doc__actions { margin-top: 26px; }

/* The PDF's own summary, in a card so it reads as a summary rather than as
   the first clause of the code. */
.doc__summary {
  background: var(--paper);
  border: 1.5px solid var(--field);
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: var(--lift);
  margin-bottom: 42px;
}
.doc__summary-heading {
  margin: 0 0 14px;
  font: 700 11px var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rust);
}

.doc__block { margin-bottom: 36px; }
.doc__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  font: 400 26px/1.15 var(--display);
  text-transform: uppercase;
  color: var(--field);
  text-wrap: balance;
}
/* The section number, drawn from its position in the array rather than typed
   into the heading. */
.doc__number {
  flex: none;
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  color: var(--rust);
}

.doc__body {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(41, 74, 66, .86);
  text-wrap: pretty;
}

.doc__list { margin: 0; padding: 0; list-style: none; }
.doc__point {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(41, 74, 66, .86);
  text-wrap: pretty;
}
/* The kit's bullet is a rust square, the same mark the marquee separates
   terms with. */
.doc__point::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--rust);
}
.doc__list--tight .doc__point { margin-bottom: 8px; font-size: 16px; }

.doc__closing {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1.5px solid rgba(41, 74, 66, .22);
  font: italic 400 19px/1.55 var(--serif);
  color: var(--field);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .doc { padding-block: 34px 48px; }
  .doc__head { padding-bottom: 22px; margin-bottom: 28px; }
  .doc__summary { padding: 20px; margin-bottom: 32px; }
  .doc__block { margin-bottom: 28px; }
  .doc__heading { font-size: 22px; }
  .doc__body, .doc__point { font-size: 16px; }
  .doc__closing { margin-top: 34px; padding-top: 22px; font-size: 17.5px; }
}