/* ============================================================
   Sugar Bowl Academy — Executive Director & Head of School Search
   Web edition of the 2026 search brochure.
   Palette and diagonal motif taken from the printed piece.
   ============================================================ */

:root{
  --navy:      #131b43;
  --navy-deep: #0b1030;
  --navy-soft: #1e2757;
  --paper:     #ffffff;
  --mist:      #f3f5f9;
  --ink:       #131b43;
  --ink-soft:  #46507d;
  --line-lt:   rgba(255,255,255,.22);
  --line-dk:   rgba(19,27,67,.16);

  /* diagonal edge: x-position of the cut at the top and bottom of a section */
  --d-top: 40%;
  --d-bot: 74%;
  --stripe: 9px;   /* horizontal width of each white rule */
  --gap:    9px;   /* horizontal gap between the two rules */

  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ring-bw: 1.5px;   /* chevron-bullet ring stroke */

  /* Graphik Web — the brochure's own typeface, self-hosted (see fonts.css).
     Matches the Sugar Bowl design system's --sb-font-display / --sb-font-body. */
  --font: "Graphik Web", system-ui, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--navy);
  color:var(--paper);
  font-size:clamp(15px,.55vw + 13.2px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--navy); padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid #8fa4ff; outline-offset:3px; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

/* ---------- Typography ------------------------------------- */

.h2{
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.04;
  /* the design system's signature negative tracking on display type */
  letter-spacing:-.022em;
  font-weight:600;
  margin:0 0 .6em;
  text-wrap:balance;
}
.h2--navy{ color:var(--navy); }

.kicker{
  font-size:.84rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 .9em;
}

.lead{ font-size:clamp(1.06rem,1.35vw,1.28rem); line-height:1.55; color:rgba(255,255,255,.86); }
.lead--navy{ color:var(--ink-soft); }

.lede{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.lede--wide{ max-width:56ch; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.section--light p{ color:var(--ink-soft); }

/* ---------- Buttons ---------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95em 1.9em; border-radius:999px;
  font-size:.9rem; font-weight:600; letter-spacing:.03em;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn--solid{ background:var(--paper); color:var(--navy); }
.btn--solid:hover{ transform:translateY(-2px); background:#e8ecf8; }
.btn--ghost{ border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.1); }
.btn--wide{ margin-top:1.6rem; width:100%; }

/* ---------- Chrome: progress, nav, back-to-top -------------- */

.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:#fff; transition:width .1s linear; }

.nav{
  position:fixed; inset:0 0 auto 0; z-index:110;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem clamp(1rem,3vw,2.2rem);
  transition:background-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s;
}
.nav.is-stuck{
  background:rgba(11,16,48,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding-block:.7rem;
  box-shadow:0 1px 0 rgba(255,255,255,.1);
}

.nav__brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
/* the wordmark lives inside the logo, so no separate brand text */
.nav__mark{ width:84px; height:auto; flex:none; color:#fff; transition:width .35s var(--ease); }
.nav.is-stuck .nav__mark{ width:70px; }

.nav__links{ display:flex; gap:clamp(.7rem,1.5vw,1.5rem); }
.nav__links a{
  position:relative; text-decoration:none; font-size:.79rem; font-weight:500;
  letter-spacing:.045em; color:rgba(255,255,255,.72); padding:.3rem 0;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:#fff; }

.nav__cta{
  text-decoration:none; font-size:.79rem; font-weight:600; letter-spacing:.05em;
  padding:.62em 1.35em; border-radius:999px; background:#fff; color:var(--navy);
  transition:transform .25s var(--ease);
}
.nav__cta:hover{ transform:translateY(-2px); }

.nav__toggle{
  display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.nav__toggle span{ display:block; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .2s; }

.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:100;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--navy); font-size:1.1rem;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  transition:transform .25s var(--ease), opacity .25s;
}
.totop[hidden]{ display:none; }
.totop:hover{ transform:translateY(-3px); }

/* ---------- Parallax plumbing ------------------------------ */

.parallax{ overflow:hidden; }
.parallax img{
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
/* script.js adds per-layer overscan (height 100% + speed, centered) sized to the
   actual parallax travel, so no image is zoomed more than its motion requires.
   Without JS, or with reduced motion, images render uncropped at 100%. */

/* Focal points — keep each photograph's subject in frame as `cover` crops.
   Tuned to the source images extracted from the brochure. */
.hero__media img            { object-position:50% 45%; }  /* skylit hallway     */
#opportunity .split__media img{ object-position:45% 55%; } /* building + sign    */
#moment .feature__media img { object-position:60% 45%; }  /* GS racer           */
#heritage .split__media img { object-position:48% 25%; }  /* archival skier     */
#olympians .feature__media img{ object-position:52% 38%; } /* powder turn        */
.apart__media img           { object-position:40% 55%; }  /* graduates' faces   */
#leader .split__media img   { object-position:50% 30%; }  /* airborne skier     */
.racers__media img          { object-position:50% 0%; }   /* mountains + helmets */
#place .feature__media img  { object-position:65% 42%; }  /* sun over Donner    */
.apply__media img           { object-position:50% 45%; }  /* lodge windows      */

/* ---------- Reveal on scroll ------------------------------- */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }

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

.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,16,48,.94) 0%, rgba(11,16,48,.72) 38%, rgba(11,16,48,.28) 70%, rgba(11,16,48,.5) 100%);
}
.hero__inner{
  position:relative;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  padding-block:clamp(5rem,14vh,9rem);
}
.hero__logo{ width:clamp(140px,15vw,210px); height:auto; color:#fff; margin-bottom:1.8rem; }
.hero__eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0 0 1.1rem;
}
.hero__title{
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:600;
  margin:0 0 2rem; max-width:16ch;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:normal; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.6rem; }
.hero__deadline{ font-size:.92rem; color:rgba(255,255,255,.72); margin:0; }
.hero__deadline strong{ color:#fff; font-weight:600; }

.hero__cue{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid rgba(255,255,255,.45); border-radius:12px;
}
.hero__cue span{
  position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:rgba(255,255,255,.8); transform:translateX(-50%);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 55%{ transform:translate(-50%,12px); opacity:.15 } }

/* ============================================================
   SPLIT — photo on one side, navy text panel on the other,
   divided by the brochure's double-rule diagonal.
   ============================================================ */

/* The navy panel is a wash that starts clear where it meets the diagonal and
   reaches solid navy partway across, so the photograph carries through the
   panel's leading edge and dissolves into flat colour. Because it goes solid at
   --wash-end, the photograph only has to reach --media-w — it is not stretched
   across ground that ends up opaque anyway, which leaves a better crop in the
   part that is actually visible.

   The clip moves with --slide but the gradient does not: sliding the panel right
   exposes more photograph without ever dragging the copy onto a thinner part of
   the wash. Edge x-positions are in section coordinates. */
.split{
  position:relative; background:var(--navy);
  display:grid; grid-template-columns:1fr 1fr;
  isolation:isolate;
  --d-top:26%; --d-bot:48%;
  --slide:0%;                /* script.js drives this from scroll position */
  --slide-max:12;            /* percent of section width */
  --media-w:70%;             /* photo reaches just past where the wash goes solid */
}

.split__media{ position:absolute; top:0; bottom:0; left:0; width:var(--media-w); }

/* clear at the diagonal, solid by 64% — the copy column starts at 50%, where the
   wash is already .87 (≈5.7:1 on body text over the brightest part of a photo) */
.split__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-repeat:no-repeat;
  background-image:linear-gradient(90deg,
    rgba(19,27,67,0)   22%,
    rgba(19,27,67,.14) 26%,
    rgba(19,27,67,.45) 34%,
    rgba(19,27,67,.74) 44%,
    rgba(19,27,67,.87) 50%,
    rgba(19,27,67,.97) 58%,
    rgba(19,27,67,1)   64%);
  clip-path:polygon(calc(var(--d-top) + var(--slide)) 0, 100% 0,
                    100% 100%, calc(var(--d-bot) + var(--slide)) 100%);
}

/* the two white rules that trace the diagonal */
.split::before,.split::after{
  content:""; position:absolute; inset:0; width:100%; background:#fff; z-index:2; pointer-events:none;
}
.split::before{
  clip-path:polygon(calc(var(--d-top) + var(--slide)) 0,
                    calc(var(--d-top) + var(--slide) + var(--stripe)) 0,
                    calc(var(--d-bot) + var(--slide) + var(--stripe)) 100%,
                    calc(var(--d-bot) + var(--slide)) 100%);
}
.split::after{
  clip-path:polygon(calc(var(--d-top) + var(--slide) + var(--stripe) + var(--gap)) 0,
                    calc(var(--d-top) + var(--slide) + var(--stripe)*2 + var(--gap)) 0,
                    calc(var(--d-bot) + var(--slide) + var(--stripe)*2 + var(--gap)) 100%,
                    calc(var(--d-bot) + var(--slide) + var(--stripe) + var(--gap)) 100%);
}

/* ---- mirrored: navy panel on the left, photograph entering from the right.
   Same geometry measured from the opposite edge; the photograph itself is never
   flipped, so the archival frame keeps its true handedness. ---- */
.split--reverse .split__panel{ grid-column:1; }
.split--reverse .split__media{ left:auto; right:0; }
.split--reverse .split__scrim{
  background-image:linear-gradient(270deg,
    rgba(19,27,67,0)   22%,
    rgba(19,27,67,.14) 26%,
    rgba(19,27,67,.45) 34%,
    rgba(19,27,67,.74) 44%,
    rgba(19,27,67,.87) 50%,
    rgba(19,27,67,.97) 58%,
    rgba(19,27,67,1)   64%);
  clip-path:polygon(0 0, calc(100% - var(--d-top) - var(--slide)) 0,
                    calc(100% - var(--d-bot) - var(--slide)) 100%, 0 100%);
}
.split--reverse::before{
  clip-path:polygon(calc(100% - var(--d-top) - var(--slide)) 0,
                    calc(100% - var(--d-top) - var(--slide) - var(--stripe)) 0,
                    calc(100% - var(--d-bot) - var(--slide) - var(--stripe)) 100%,
                    calc(100% - var(--d-bot) - var(--slide)) 100%);
}
.split--reverse::after{
  clip-path:polygon(calc(100% - var(--d-top) - var(--slide) - var(--stripe) - var(--gap)) 0,
                    calc(100% - var(--d-top) - var(--slide) - var(--stripe)*2 - var(--gap)) 0,
                    calc(100% - var(--d-bot) - var(--slide) - var(--stripe)*2 - var(--gap)) 100%,
                    calc(100% - var(--d-bot) - var(--slide) - var(--stripe) - var(--gap)) 100%);
}

.split__panel{ grid-column:2; display:flex; align-items:center; position:relative; z-index:3; }
.split__panelinner{
  padding:clamp(4rem,9vw,7.5rem) clamp(1.25rem,4vw,3.5rem) clamp(4rem,9vw,7.5rem) clamp(1rem,2vw,2rem);
  max-width:60ch;
}
/* Mirrored panel reads from the page's left gutter. Matching .wrap's own
   formula keeps this heading on the same vertical as every other section's. */
.split--reverse .split__panelinner{
  padding-left:max(1.25rem, calc((100vw - var(--wrap)) / 2));
  padding-right:clamp(1rem,2vw,2rem);
}
.split__panelinner p{ color:rgba(255,255,255,.82); }
.split__panelinner .lead{ color:#fff; font-weight:500; }


/* ============================================================
   FEATURE — full-bleed photo with content laid over it
   ============================================================ */

.feature{ position:relative; overflow:hidden; padding-block:clamp(5rem,11vw,9rem); }
.feature--tall{ padding-block:clamp(6rem,14vw,11rem); }
.feature__media{ position:absolute; inset:0; }
/* Dark enough on the left to carry the headline, open enough on the
   right to let the photograph read — the brochure's own balance. */
.feature__scrim{
  position:absolute; inset:0;
  background:linear-gradient(103deg, rgba(11,16,48,.94) 0%, rgba(11,16,48,.84) 34%, rgba(11,16,48,.46) 66%, rgba(11,16,48,.16) 100%);
}
.feature__scrim--light{
  background:linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.35) 100%);
}
.feature__inner{ position:relative; z-index:2; }
.feature__title{ max-width:16ch; }
.feature__cols{ margin-top:1rem; }

/* ============================================================
   SECTIONS
   ============================================================ */

.section{ --sec-pad:clamp(5rem,11vw,9.5rem); position:relative; padding-block:var(--sec-pad); overflow:hidden; }
.section--light{ background:var(--mist); color:var(--ink); }
.section--navy{ background:var(--navy); }

/* ---------- Diagonal sweep --------------------------------- */
/* The navy wash for sections whose content spans the full width (#apart).
   The split sections can use a hard-edged panel because their copy
   sits entirely to one side of the diagonal; here the cards run edge to edge,
   so a hard step would drop the leftmost card onto bare photograph. This is the
   same idea graded along the diagonal instead: light at the outer left where the
   image should read, dense across the content, no legibility cliff anywhere.
   Wider than the section and translated by --slide, so it sweeps horizontally. */
/* Overhangs the section on both sides so sliding can never expose bare
   photograph under the copy — at narrow desktop widths the content column
   starts only ~1.5% in, so there is no safe unscrimmed margin to reveal.
   The lighter leading edge lives off-canvas at rest and sweeps in.
   Alpha at the content column stays >= .84: over the brightest part of these
   photographs that is ~4.6:1 on body copy, which clears AA. */
.sweep{
  position:absolute; top:0; bottom:0; left:-30%; width:160%; z-index:1;
  pointer-events:none;
  transform:translateX(calc(var(--slide,0%) * .625));
  background:linear-gradient(104deg,
    rgba(19,27,67,.26)  0%,
    rgba(19,27,67,.55)  9%,
    rgba(19,27,67,.78) 13%,
    rgba(19,27,67,.88) 19%,
    rgba(19,27,67,.91) 40%,
    rgba(19,27,67,.95) 100%);
}

/* ---------- Grids ------------------------------------------ */

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.6rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Lists ------------------------------------------ */

.chev,.dot,.num,.traits{ margin:0; padding:0; list-style:none; }
.chev li,.traits li{ position:relative; padding-left:2.1rem; margin-bottom:1rem; }

/* The brochure's chevron-in-circle bullet. The ring and the glyph share one
   geometry box; the glyph is an SVG mask, so it is centered by construction
   (apex nudged a hair right of true center — optical center for a ">").      */
.chev li::before,.traits li::before,.note__chev{
  content:""; position:absolute; left:0; top:.32em;
  width:1.15rem; height:1.15rem; border-radius:50%; flex:none;
  border:var(--ring-bw) solid currentColor; opacity:.65;
}
.chev li::after,.traits li::after,.note__chev::after{
  content:""; position:absolute; left:0; top:.32em;
  width:1.15rem; height:1.15rem; opacity:.9;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 6.6 11.8 10 8.2 13.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 6.6 11.8 10 8.2 13.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}

.dot li{ position:relative; padding-left:1.15rem; margin-bottom:.75rem; }
.dot li::before{
  content:""; position:absolute; left:.15rem; top:.68em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55;
}

.num{ counter-reset:n; }
.num li{ position:relative; padding-left:1.8rem; margin-bottom:.9rem; counter-increment:n; }
.num li::before{
  content:counter(n) "."; position:absolute; left:0; top:0;
  font-weight:600; opacity:.75;
}

/* ---------- Purpose ---------------------------------------- */

.purpose .kicker{ color:var(--navy); padding-bottom:.9rem; border-bottom:1px solid var(--line-dk); }
.purpose li{ color:var(--ink-soft); }

/* ---------- Cards ------------------------------------------ */

.card{
  --card-pad:clamp(1.5rem,2.4vw,2.2rem);
  border:1px solid var(--line-lt); border-radius:20px;
  padding:var(--card-pad);
}
.card--glass{
  background:rgba(11,16,48,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.28);
}
.card__title{ font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:600; letter-spacing:-.01em; margin:0 0 .5rem; }
.card__sub{
  font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.5; margin:0 0 1.2rem; opacity:.9;
}
.card__sub--sp{ margin-top:1.6rem; }
.card p, .card li{ color:rgba(255,255,255,.82); }
.card code{
  display:inline-block; margin-top:.3rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em;
  background:rgba(255,255,255,.1); padding:.25em .5em; border-radius:5px; word-break:break-all;
}
.card a{ color:#a9baff; }
/* buttons keep their own colours inside cards */
.card a.btn--solid{ color:var(--navy); }
.card a.btn--ghost{ color:#fff; }

/* ---------- Stats ------------------------------------------ */

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem); }
.stat{
  border:1px solid var(--line-lt); border-radius:20px;
  padding:clamp(1.3rem,2vw,1.9rem);
  display:flex; flex-direction:column;
}
.stat--glass{
  background:rgba(11,16,48,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.3);
}
.stat__num{
  font-size:clamp(2.4rem,4.6vw,3.9rem); font-weight:600; line-height:1;
  letter-spacing:-.035em; margin-bottom:.6rem; font-variant-numeric:tabular-nums;
}
.stat p{ font-size:.9rem; line-height:1.5; margin:0; color:rgba(255,255,255,.8); }

.stats--navy .stat{ border-color:var(--line-dk); background:rgba(255,255,255,.6); color:var(--navy); }
.stats--navy .stat p{ color:var(--ink-soft); }

.note{
  display:flex; gap:.85rem; align-items:flex-start;
  margin:clamp(1.6rem,3vw,2.4rem) 0 0; max-width:78ch;
  font-size:.94rem; color:rgba(255,255,255,.85);
}
.note--navy{ color:var(--ink-soft); }
.note__chev{ position:relative; left:0; top:0; margin-top:.3em; }
/* Unlike the list bullets — where ring and glyph are both pseudo-elements of an
   unbordered <li> — this ring is a real bordered element, so the glyph is
   positioned against its padding box. Pull back by the border width to centre
   the caret on the ring itself. */
.note__chev::after{ left:calc(var(--ring-bw) * -1); top:calc(var(--ring-bw) * -1); }

/* ---------- What sets us apart ----------------------------- */

/* half the splits' travel: the copy here runs edge to edge, so a long slide
   would drag the heading across the lighter end of the sweep */
.apart{ --slide-max:6; }
.apart__media{ position:absolute; inset:0; width:100%; }
.apart .wrap{ position:relative; z-index:2; }
.apartgrid{ margin-bottom:clamp(1.5rem,3vw,2.6rem); }
.apart .card{ background:rgba(255,255,255,.045); }

.colleges{ border:1px solid var(--line-lt); border-radius:20px; padding:clamp(1.5rem,2.4vw,2.2rem); background:rgba(255,255,255,.045); }
.colleges__intro{ color:rgba(255,255,255,.8); margin-bottom:1.2rem; }
.colleges__list{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.55rem 1.2rem;
}
.colleges__list li{
  font-size:.95rem; font-weight:500; padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.colleges__foot{ color:rgba(255,255,255,.8); margin:0; max-width:70ch; font-size:.95rem; }

/* ---------- Priorities ------------------------------------- */

.priorities{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,4vw,4rem);
}
.prio{
  position:relative; padding:clamp(1.6rem,2.6vw,2.2rem) 0;
  border-top:1px solid var(--line-dk);
  display:grid; grid-template-columns:auto 1fr; gap:0 1.4rem; align-items:start;
  transition:transform .4s var(--ease);
}
.prio:hover{ transform:translateX(4px); }
.prio__n{
  grid-row:span 2;
  font-size:1rem; font-weight:600; letter-spacing:.04em;
  color:var(--navy); opacity:.32; padding-top:.15rem;
  font-variant-numeric:tabular-nums;
}
.prio h3{
  margin:0 0 .6rem; font-size:clamp(1.05rem,1.5vw,1.28rem); font-weight:600;
  letter-spacing:-.008em; color:var(--navy); line-height:1.25;
}
.prio p{ margin:0; font-size:.95rem; }

/* ---- the race-gear photograph opening the section --------------
   The brochure runs this image as a wedge in the lower right, under the
   priorities columns. Measured against this layout, that would land on the
   copy: at 1280px the content column sits only 20px from the section edge,
   so a corner triangle overlaps priority 10. Same wedge, given its own band
   instead — diagonal top edge, deep on the right, tapering left, with the
   brochure's double rule riding the cut.

   It runs ahead of the priorities copy rather than after it: below the list it
   butted straight into the freeride photograph that opens #leader, two full-bleed
   frames with nothing between them. The cut stays on the top edge — the tuning
   below is all about keeping it off the racers' helmets, and the frame is far too
   tight to move the cut to the bottom without slicing through them.

   The wedge above the cut has no fill of its own. The band sits at the tail of
   #apart, above the sweep, so what shows there is #apart's own graduates
   photograph and wash carrying on unbroken into the diagonal — one field, one
   edge. That is also why the rules are white: they land on navy here, not on the
   light section, same as every other cut on the page. */
.racers{
  /* The cut depth is in vw, not a percentage of the band's height. `cover` crops
     this photo vertically, so the scaled image height — and with it the racers'
     helmet line — is set purely by the band's WIDTH (~0.09 x width). A height-
     relative cut drifts away from that line: on a phone the height is clamped to
     a minimum far larger than its share of the width, so the diagonal sliced
     straight through their heads, and making the band taller made it worse.
     In vw the cut tracks the helmets, and the angle stays a constant ~6.7deg at
     every width instead of flattening out on wide screens. */
  --rise:13vw;         /* how much lower the cut sits on the left */
  --rule-w:6px;        /* thickness of each white rule */
  --rule-gap:10px;     /* space between the two */
  /* Headroom on the right must clear the whole rule stack, or the band's
     overflow:hidden slices the rules off where they run highest. Floor it at
     the stack height plus a little, rather than letting a vw value collapse. */
  --edge-top:max(26px, 1.2vw);
  --media-drop:0px;    /* nudge the photo (and its cut) down inside the band */
  position:relative;
  z-index:2;                                 /* clear the sweep, which is z-index 1 */
  /* ~100px deeper than its share of the width would give, which buys the frame
     enough room to reach the racers' thighs instead of cropping at the chest.
     The cut is unaffected: --rise is width-based, and object-position pins the
     photo's top edge, so the extra height opens up at the bottom only. The
     stacked layout keeps the original height (see the query at the end). */
  height:clamp(420px,calc(36vw + 100px),640px);
  margin-top:clamp(3rem,7vw,6rem);
  margin-bottom:calc(var(--sec-pad) * -1);   /* sit flush with the section edge */
  overflow:hidden;
}
/* media and rules share one coordinate space, so --media-drop moves the
   photograph and its diagonal together */
.racers__media,.racers::before,.racers::after{
  position:absolute; top:var(--media-drop); right:0; bottom:0; left:0;
}
.racers__media{
  clip-path:polygon(0 var(--rise), 100% var(--edge-top), 100% 100%, 0 100%);
}
.racers::before,.racers::after{
  content:""; z-index:2; pointer-events:none; background:#fff;
}
/* rule riding directly on the photo's edge */
.racers::before{
  clip-path:polygon(0 calc(var(--rise) - var(--rule-w)),
                    100% calc(var(--edge-top) - var(--rule-w)),
                    100% var(--edge-top), 0 var(--rise));
}
/* second rule, one gap above */
.racers::after{
  clip-path:polygon(0 calc(var(--rise) - var(--rule-w)*2 - var(--rule-gap)),
                    100% calc(var(--edge-top) - var(--rule-w)*2 - var(--rule-gap)),
                    100% calc(var(--edge-top) - var(--rule-w) - var(--rule-gap)),
                    0 calc(var(--rise) - var(--rule-w) - var(--rule-gap)));
}

/* ---------- The leader ------------------------------------- */

.leader{ background:var(--navy); }

/* The heading rides the double-rule diagonal over the freeride frame — the
   brochure's own treatment for this page, mirrored. It is a .split because that
   is exactly the geometry: hard-edged cut, photograph on one side, navy copy
   panel on the other, sliding in on scroll. Wider d-values than the default give
   the photograph more of the frame than a standard split; the copy here is three
   short blocks, so the panel does not need half the page.

   Why mirrored: the athlete sits at 68-75% across this frame (measured, not
   eyeballed). The print crop has them left of the cut, so running the wedge in
   from the right — as the brochure does — would bury the subject under navy.
   Reversed, they land at ~80% of the section, past where the wash reaches zero. */
/* The copy alone would settle this band at ~2.6:1 — a letterbox strip that crops
   the sky off the top and the base off the bottom. Floored near the source frame's
   own 1.49:1 (measured against the 70% media column, not the full width) so the
   whole photograph reads and the cut stays close to the brochure's 45deg. */
.leader__band{ --d-top:30%; --d-bot:52%; min-height:clamp(520px,46vw,760px); }
/* The other splits let the photograph carry through the panel's leading edge and
   dissolve into flat colour. Not here: the brochure's navy field on this page is
   flat, and at this cut the gradient would still be ~70% transparent where the
   rules land — a ghosted mountain behind a crisp double rule reads as a smudge,
   not a dissolve. Solid, so the cut is the only edge in play. */
.leader__band .split__scrim{ background-image:none; background-color:var(--navy); }

.leader__body{
  display:grid; grid-template-columns:1fr 1fr 340px;
  gap:clamp(1.6rem,3vw,2.6rem); align-items:start;
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(5rem,11vw,9.5rem);
}
.traits{
  grid-column:1 / 3;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(1.6rem,3vw,2.6rem);
  align-content:start;
}
.traits li{ color:rgba(255,255,255,.86); margin-bottom:1.35rem; }
.card--team{ background:rgba(255,255,255,.06); overflow:hidden; }

/* Full-bleed photo across the head of the card. The frame is a fixed 4:3 box
   with object-fit:cover and a focal point, so it holds its shape whatever the
   source image's dimensions are — drop in a higher-resolution group photo of
   any aspect and nothing about the layout moves.
   overflow:hidden on the card clips the photo to the padding box, so the card's
   1px border stays visible on all four sides and the top corners inherit the
   radius. */
.card--team img{
  display:block;
  width:calc(100% + var(--card-pad) * 2);
  max-width:none;            /* the global img max-width:100% would cap the bleed */
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 1.4rem;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:50% 52%;   /* faces sit just below centre */
  border-radius:0;
}
.card__pull{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line-lt); font-weight:500; color:#fff !important; }

/* ---------- Apply ------------------------------------------ */

.apply{ position:relative; overflow:hidden; padding-block:clamp(5rem,12vw,9.5rem); }
.apply__media{ position:absolute; inset:0; }
.apply__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,16,48,.9), rgba(11,16,48,.82)); }
.apply__inner{ position:relative; z-index:2; }
.apply__title{ max-width:14ch; }
.apply__cols{ margin-top:1rem; align-items:start; }
.apply__q{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.86rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.apply__q a{ color:#a9baff; }

/* ---------- Footer ----------------------------------------- */

.foot{ background:var(--navy-deep); padding-block:clamp(3rem,6vw,5rem); }
.foot__inner{ display:grid; gap:1.5rem; justify-items:start; }
.foot__logo{ width:132px; height:auto; color:#fff; }
.foot__eeo{ font-size:.8rem; line-height:1.65; color:rgba(255,255,255,.55); max-width:90ch; margin:0; }

/* ---------- 404 -------------------------------------------- */

/* Serves 404.html, whose presence is what stops Cloudflare Pages treating the
   project as a single-page app and answering every unmatched path with the
   whole page at 200. Styles live here rather than in the page so the CSP
   needs no 'unsafe-inline'. */

.nf{ display:grid; place-items:center; min-height:100vh; min-height:100svh; padding:2rem 0; }
.nf__inner{
  width:min(100% - 2.5rem, 46ch); text-align:center;
  display:grid; justify-items:center; gap:.35rem;
}
.nf__mark{ width:96px; height:auto; color:#fff; margin-bottom:1.6rem; }
.nf__code{
  margin:0; font-size:.86rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.nf__title{
  margin:0; font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.1;
}
.nf__lead{ margin:.7rem 0 2rem; color:rgba(255,255,255,.72); text-wrap:pretty; }

/* ---------- SVG sprite ------------------------------------- */

/* Holds the #sba-mark <symbol> at the end of index.html. It is 0×0 and
   aria-hidden, but it still needs taking out of flow or it leaves a gap.
   This lives here rather than in a style attribute so the CSP in `_headers`
   can keep style-src at 'self' — no 'unsafe-inline' anywhere on the page. */
.sprite{ position:absolute; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1100px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }

  .nav.is-open{ flex-wrap:wrap; background:rgba(11,16,48,.97); }
  .nav.is-open .nav__links{
    display:grid; order:4; width:100%; gap:.15rem; padding:1rem 0 .4rem;
    border-top:1px solid rgba(255,255,255,.14); margin-top:.9rem;
  }
  .nav.is-open .nav__links a{ font-size:.95rem; padding:.55rem 0; }
  .nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .leader__body{ grid-template-columns:1fr 1fr; }
  /* the card goes full width here — cap it so the photo stays a photo
     rather than becoming a billboard */
  .card--team{ grid-column:1 / -1; max-width:520px; margin-inline:auto; }
}

@media (max-width:900px){
  .grid--3,.grid--2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .priorities{ grid-template-columns:1fr; }
  .traits{ grid-template-columns:1fr; }
  .feature__scrim{ background:linear-gradient(180deg, rgba(11,16,48,.9), rgba(11,16,48,.82)); }
  .feature__scrim--light{ background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)); }

  /* Donner sunset, narrow. This photograph is a 2.2:1 panorama and the section
     is roughly 0.27:1 here, so `cover` scales by height and shows a strip only
     ~12% of the image wide. At the desktop focal point (65%) that strip lands
     between the lake and the sun and catches neither: the section read as a
     navy slab that ran into #apply below it.

     69% brings the lake into the lower left and the sun's rays in from the
     right. Not further: the sun sits at ~75% of the frame, not at its edge, so
     pinning hard right (100% → the 88–100% strip) loses it again, and centring
     the sun (~76%) fills a 375px-wide box with one blown-out flare.

     The crop alone was not enough. The flat .9/.82 scrim above was dense enough
     to flatten whatever the crop found, so it now stays heavy only where the
     type is — the lede ends at ~36% of the section — and opens up below, where
     the only content is .stat--glass tiles carrying their own backing. White
     text measures 15.6:1 and 13.2:1 across the headline and leads against the
     brightest part of the sky; the tiles are near 7:1 at the foot. */
  #place .feature__media img{ object-position:69% 42%; }
  #place .feature__scrim{
    background:linear-gradient(180deg,
      rgba(11,16,48,.92) 0%,  rgba(11,16,48,.86) 36%,
      rgba(11,16,48,.55) 68%, rgba(11,16,48,.44) 100%);
  }

  /* Stack the split sections: photo on top, cut on the diagonal, with the
     two white rules riding just inside the photo's lower edge. The desktop
     slide/translucent panel does not apply here — the photo gets its own band. */
  .split{ display:block; --rise:36px; --slide:0%; }
  .split__scrim{ display:none; }
  .split--reverse .split__panelinner{ padding-inline:0; }
  .split__media{
    position:relative; inset:auto; left:auto; right:auto; width:100%;
    height:52vh; min-height:300px;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
  }
  .split::before,.split::after{
    width:100%; height:52vh; min-height:300px; inset:0 0 auto 0;
  }
  .split::before{
    clip-path:polygon(0 calc(100% - 8px), 100% calc(100% - var(--rise) - 8px),
                      100% calc(100% - var(--rise) - 16px), 0 calc(100% - 16px));
  }
  .split::after{
    clip-path:polygon(0 calc(100% - 26px), 100% calc(100% - var(--rise) - 26px),
                      100% calc(100% - var(--rise) - 34px), 0 calc(100% - 34px));
  }
  .split__panel{
    grid-column:auto;
    width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  }
  .split__panelinner{ padding-inline:0; max-width:none; }

  /* the band is proportionally much taller on a phone — sit the photo a little
     lower so the racers are not crowded against the cut, and keep the original
     height: the desktop rule's extra 100px is headroom this layout does not need */
  .racers{ --media-drop:26px; height:clamp(320px,36vw,540px); }

  /* stacked: flat wash instead of the diagonal sweep. .84 leaves the photograph
     at the same ~16% presence the stacked layout had before, and still clears AA
     on body copy over the brightest part of these images. */
  .sweep{ transform:none; background:rgba(19,27,67,.84); }
  .apart__media{ width:100%; }
}

@media (max-width:620px){
  .stats{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:1fr; }
  .hero__meta .btn{ flex:1 1 auto; }
  .nav__mark{ width:62px; }
  .nav.is-stuck .nav__mark{ width:56px; }
  .colleges__list{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   MOTION PREFERENCES / PRINT
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .parallax img{ transform:none !important; }
}

@media print{
  .nav,.progress,.totop,.hero__cue{ display:none !important; }
  body{ background:#fff; color:#000; }
  .feature__media,.apply__media,.apart__media,.hero__media,
  .split__media,.split__scrim,.racers{ display:none; }
  .section,.feature,.apply,.split{ background:#fff !important; color:#000 !important; page-break-inside:avoid; }
  .card,.stat,.colleges{ border-color:#999; }
  .h2,.prio h3,.card__title{ color:#000 !important; }
  p,li,.lead{ color:#222 !important; }
}