/* ============================================================
   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);

  --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 -------------- */

/* Pinned to the header's lower edge rather than the top of the viewport, which
   is where it used to be and where iOS would not let it stay. Fixed elements
   there belong to the layout viewport, so when the toolbar returns on a scroll
   up the top few pixels sit above what you can see — the header gives up the
   same sliver off ninety-odd pixels and it never shows, a 3px rule gives up all
   of itself. Down here the header is the buffer. It also stops reading as a
   line floating over the page and starts reading as the header's own underline,
   which is the better of the two anyway.

   Absolute against the header, so it follows the height rather than needing to
   know it — and that height moves twice, on stick and again on narrow screens. */
.progress{
  position:absolute; inset:auto 0 0 0; height:3px;
  z-index:1; background:transparent; pointer-events:none;
}
/* The open menu is a wrapped panel, not a bar, so the header's lower edge is
   suddenly the bottom of a full-height sheet and the rule has no business
   there. */
.nav.is-open .progress{ display:none; }
/* Full width, scaled down from the left, rather than a width the script grows.
   The bar is redrawn on every scroll frame, and width is a layout property: at
   that rate it was relaying out and repainting the strip each time, which a
   phone feels and a desktop hides. A transform is composited instead — same
   picture, no layout.

   No transition, deliberately. There was a .1s one here and it was the reason
   the bar felt loose on a phone: the width is already driven continuously by
   scroll position, so tweening toward each new value only meant the bar never
   arrived at the current one. Measured at up to 6.9% of the page behind its
   own target mid-flick — 26px adrift on a 375px screen — and the settle when
   the finger lifted was the lurch. Scroll position is the animation; it does
   not need a second one on top. */
.progress span{
  display:block; height:100%; width:100%; background:#fff;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* Where the browser has scroll-driven animations, the scroller drives the bar
   itself and the script never touches it.

   Frame-gating the script got the bar honest on a desktop but it was still
   stepping on an iPhone, and the reason is that no amount of care on the main
   thread fixes it: iOS defers scroll and rAF delivery during a fling, so a bar
   that learns its position by asking gets told in batches and moves in batches.
   This does not ask. The scroller's own offset is the timeline, the compositor
   holds both ends, and the main thread is not in the loop at all — there is
   nothing left to arrive late.

   scroll(root block) is the document scroller's vertical axis, which is what
   the script was measuring by hand. animation-duration must come after the
   shorthand and must be auto: the shorthand resets it to 0s, and a scroll-timed
   animation reads duration as a share of the scroll range, so 0s would finish
   the bar in the first pixel. */
@keyframes progress-through{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@supports (animation-timeline:scroll()){
  .progress span{
    animation:progress-through linear both;
    animation-duration:auto;
    animation-timeline:scroll(root block);
  }
}

.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);
}

/* The brand clips its own mark, which is what makes the reveal read as the mark
   rising out of the header rather than fading in place. Clipping here rather than
   on .nav is deliberate: .nav has to stay unclipped for the open mobile menu,
   which wraps its links below the bar. */
.nav__brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; overflow:hidden; }
/* the wordmark lives inside the logo, so no separate brand text.

   It starts hidden and rises as the hero's own mark goes up behind the header.
   The two overlap on purpose: the small one is already coming in while the big
   one is still visibly going, so it reads as one mark handing off to the other
   rather than a second brand appearing. script.js sets when, and by how much
   they overlap. The mark keeps its box the whole time (transform and opacity do
   not touch layout), so the links do not shift sideways when it arrives, and the
   header's height does not change underneath the very measurement that triggers
   it.

   120% rather than 100% clears the mark's own descender space, so it is fully
   out of the clip before it starts back up. Opacity runs shorter than the travel
   and front-loads it: the mark is already solid for most of the rise, which
   reads as movement rather than a fade that happens to move. */
.nav__mark{
  width:84px; height:auto; flex:none; color:#fff;
  transform:translateY(120%); opacity:0;
  transition:width .35s var(--ease), transform .5s var(--ease), opacity .25s linear;
}
.nav.is-stuck .nav__mark{ width:70px; }
.nav.is-branded .nav__mark{ transform:none; opacity:1; }
/* A keyboard user can reach the brand link before the hero mark has passed, and
   an invisible focus target is a dead end. Focus brings it in early. */
.nav__brand:focus-visible .nav__mark{ transform:none; opacity:1; }
/* The open mobile menu is a full panel rather than a bar over the hero, so the
   doubled-logo problem does not arise — and without the mark its top-left corner
   is simply empty. Opening the menu brings it in whatever the scroll position. */
.nav.is-open .nav__mark{ transform:none; opacity:1; }

.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 on the brochure's 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%);
}

/* ---- 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__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.

   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. */
.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 */
  /* Where the cut sits on the right. Floored rather than left to a bare vw
     value, so it does not collapse to nothing on narrow screens. */
  --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-drop moves the photograph and its diagonal together */
.racers__media{
  position:absolute; top:var(--media-drop); right:0; bottom:0; left:0;
  clip-path:polygon(0 var(--rise), 100% var(--edge-top), 100% 100%, 0 100%);
}

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

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

/* The heading rides the 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 media column, not the full width) so the whole
   photograph reads.

   A true 45deg cut, the brochure's own angle. The other splits set --d-bot as a
   flat percentage, which cannot hold an angle: the x-run is a share of the WIDTH
   while the drop is the HEIGHT, so the cut flattens or steepens as the viewport
   changes (at 1400x644 the old 30%/52% pair measured 64deg, not 45). Deriving
   --d-bot from the band's own height instead makes the horizontal run equal the
   vertical run in pixels at every width, which is what 45deg means. Mixing % and
   px in one calc is exactly the tool for that: the % resolves against the width,
   the px against the height. */
.leader__band{
  /* Height and --d-top are one decision, not two, and the photograph is what
     settles it. `cover` on a 70% column crops whatever the box does not match,
     so how much of the frame's top and bottom survives is set by the box's ratio
     — 70% of the width over this height — against the source frame's 1.49:1. The
     45deg cut then caps the height: the wedge only reaches the foot of the band
     if the cut's whole travel (--d-top plus the height) stays inside the 70% the
     photograph occupies, so height <= (70% - --d-top) of the width.

     Those two pull against each other through --d-top. At the 30% this band used
     to sit at, the cap was 40vw, and 70/40 is a 1.75:1 box — a fifth of the
     photograph's height cropped away. Pulling --d-top back to 24% raises the cap
     to 46vw, and 70/44 is 1.59:1, which holds ~94% of the frame. What that costs
     is at the top edge: the cut now starts at 76% instead of 70%, so the wedge
     shows less photograph along the top and runs nearer the skier, who sits at
     68-75% across the frame — about 22px of clearance at 1400px. 44vw leaves the
     same 2% of margin against the cap that the old value did.

     The floor stays low, which is the opposite of what a px floor usually does.
     A tall floor at a narrow viewport is the worst case for a 45deg cut: the
     sweep stays wide while the section gets narrow, so the copy is squeezed into
     more lines, the block grows taller than the height the cut was derived from,
     and the cut is no longer 45deg. Below 818px the floor would bind, and this
     band has stacked by then anyway. The ceiling is the older tradeoff and is
     unchanged in kind: past ~1730px the height stops tracking the width, so the
     box widens again and the crop returns, reaching the frame's ~84% at 1920.

     That squeeze is the standing condition on the angle, and trimming the block
     padding below only buys headroom inside it — it does not remove it. The 45deg
     holds while the copy fits inside --band-h, and the copy is not only a function
     of the width: a reader whose default font size is larger grows it at a fixed
     width. At a 24px root the band measures 574px against a --band-h of 414px at
     940px wide, and the cut reads 54deg. It degrades quietly rather than breaking
     — the rules and the photograph's edge both derive from --band-h, so they stay
     locked to each other and the copy still clears — but the angle is the thing
     that gives, so do not read "45deg at every width" as unconditional. */
  --band-h:clamp(360px,44vw,760px);
  min-height:var(--band-h);
  --d-top:24%;
  --d-bot:calc(var(--d-top) + var(--band-h));
  /* The 2% margin above is measured at rest, and the entry slide spends the
     travel it does not have: it starts the cut a further 12% left, which drags
     the foot of the wedge well past the photograph's edge. That looks like a
     seam waiting to happen and it is not one, because the slide is keyed to how
     far the band has entered from the BOTTOM of the viewport while the exposed
     corner is at the band's foot, further down still. Stepped through the entry
     frame by frame at 940x1200 and 1280x1024 — the two shapes that give a short
     band the most room to be caught out — the corner is exposed only while the
     band's top is at or below the fold, and the gap has closed by the time the
     foot clears it. Widening the media column to cover it would crop the frame
     for every viewer, always, to hide something none of them can see.

     Those two shapes are not the tight ones, though. Solving the eased slide
     against the moment the foot clears the fold, the spare margin thins as the
     viewport gets taller relative to --band-h: 26px at 1280x1024, 13px at
     940x1200, and exactly 0 on the rotated-portrait monitors (1080x1920,
     1152x2048, 1440x2560), where the wedge's foot lands on the photograph's edge
     with nothing to spare. It goes just negative — a fraction of a pixel, ~15px
     at the 901x2200 extreme — above about 1610px tall at this narrowest width.
     Sub-pixel where anyone is likely to see it, so it is left alone; if it ever
     needs margin the lever is --slide-max or the 2% at rest, still not the
     column. */
}
/* 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 along the
   edge — a ghosted mountain bleeding past the cut reads as a smudge, not a
   dissolve. Solid, so the cut is a clean edge. */
.leader__band .split__scrim{ background-image:none; background-color:var(--navy); }

/* Everything below draws the 45deg cut itself, so it belongs to the side-by-side
   layout only — below 900px this band stacks and the diagonal is replaced by the
   shared horizontal one. The file is otherwise written max-width-first, but a
   min-width query is the honest shape here: these rules should not exist in the
   stacked layout rather than be defined and then undone. Undoing them was in
   fact the bug — .leader__band .split__panelinner outranks the stacked reset on
   .split__panelinner whatever the source order, so the max-width below followed
   the copy down to the phone and computed to 0, collapsing it.

   900.02px, not 901px, and not to be tidied into one. The stacked block above is
   max-width:900px, so a `min-width:901px` partner leaves every fractional width
   between them — reachable by browser zoom and by fractional display scaling —
   matching neither. That gap is not a cosmetic one: it is the side-by-side
   layout with the rules missing AND the padding untrimmed, which is exactly the
   state the max-width below exists to prevent, measured at 13px of copy hanging
   over the diagonal. 900.02 closes it without moving the breakpoint. */
@media (min-width:900.02px){
  /* Hold the copy off the diagonal. The other splits can run their text to the
     panel's own edge because their cut is steep and their wash is soft; here the
     cut is a hard 45deg line travelling left as it descends, and the copy block
     is vertically centred, so its lowest line meets the cut at its narrowest
     point — roughly 72% of the way down the band. Measured against the viewport,
     not the panel: the panel is half the section, so its own percentages resolve
     against the wrong box. The 76vw is where the cut meets the top edge and has
     to track --d-top (100% - 24%); the 2rem is the gutter to the rule. */
  .leader__band .split__panelinner{
    max-width:calc(76vw - var(--band-h) * .72 - 2rem);
    /* The shared 9vw block padding is sized for splits whose height is set by
       their copy. This band's height is set by the cut, and at narrow widths that
       padding pushed the content past --band-h — which tilts the cut off 45deg,
       because the run is derived from --band-h while the drop is whatever the
       band actually measures. Trimmed so the copy sits inside the height the
       angle assumes. */
    padding-block:clamp(2.5rem,5vw,4.5rem);
  }

  /* The brochure's double rule, riding the cut — kept here and nowhere else on
     the page. --stripe and --gap are HORIZONTAL widths, but what the eye reads is
     the thickness measured across the rule. At 45deg those differ by a factor of
     root two, so 11px of horizontal width draws a rule ~7.8px on the diagonal. */
  .leader__band{ --stripe:11px; --gap:11px; }
  .leader__band::before,.leader__band::after{
    content:""; position:absolute; inset:0; width:100%;
    background:#fff; z-index:2; pointer-events:none;
  }
  .leader__band::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%);
  }
  .leader__band::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%);
  }
}

.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. 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__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; }
  /* Exempt, because the blanket rule above means something else here. The
     progress bar's animation is timed by scroll offset, not by the clock, so
     its duration is a share of the page rather than a length of time — and
     .001ms of a page is the first pixel, which would pin the bar at full the
     moment you left the top. It also is not the kind of motion the preference
     is asking about: it moves only while the reader is already moving, and it
     stops when they do. auto restores the full scroll range. */
  .progress span{ animation-duration:auto !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; }
}