/* Theme for the Educational & Investment Evening scrollcraft page.
   Overrides scrollcraft.css tokens only — the engine file itself is untouched.
   Loaded only while this page is mounted; never app-wide. */

/* scrollcraft.css sets html{scroll-behavior:smooth} for anchor jumps (e.g.
   the "Apply" link). Applied to ordinary wheel scroll too, it queues a second
   animation on top of the engine's own rAF-driven cue/lerp system, which is
   what read as scroll "lag" — two smoothers fighting the same input. Turn
   native smoothing off; the engine already smooths everything it animates. */
html { scroll-behavior: auto; }

:root {
  /* Base (light) roles — used from the Orientation act onward, matching the
     rest of the Aylett recruiting app. */
  --sc-canvas:      #F0F4FA;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #1C1C1E;
  --sc-ink-soft:    #6B7585;
  --sc-accent:      #1c3864;
  --sc-accent-ink:  #FFFFFF;

  --sc-font-display: "Century Gothic", CenturyGothic, "Jost", "Avenir Next",
    Avenir, Futura, Montserrat, system-ui, sans-serif;
  --sc-font-text: "Century Gothic", CenturyGothic, "Jost", "Avenir Next",
    Avenir, Futura, Montserrat, system-ui, sans-serif;

  --sc-r-sm: 4px; --sc-r-md: 4px; --sc-r-lg: 8px;
}

/* Two-stop accent for the dark documentary-toned acts (Recognition,
   Grounding) — same hue family as the light-ground accent, lifted in
   lightness so it still clears contrast on a near-black ground. Restating
   `color` here matters: `color` is inherited as a computed value, so text
   whose colour already resolved on body keeps the light-mode ink otherwise. */
.sc-act--dark {
  --sc-canvas: #0A1830;
  --sc-surface: #0F2038;
  --sc-ink: #F3EFE8;
  --sc-ink-soft: #A9B6CC;
  --sc-accent: #8DA5CE;
  --sc-accent-ink: #0A1830;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}

/* ------------------------------------------------------------- site bar -- */
.evening-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sc-4) var(--sc-gutter);
  mix-blend-mode: difference;
}
.evening-bar img { height: 2rem; width: auto; }
.evening-bar a {
  color: #fff;
  font-size: var(--sc-t-sm);
  font-weight: 500;
  text-decoration: none;
}
.evening-bar a:hover { opacity: 0.7; }

/* --------------------------------------------------------- Act 1: faces -- */
.face-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.face-field__layer {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--sc-e2);
  will-change: transform, opacity;
}
.face-field__layer img { width: 100%; height: 100%; object-fit: cover; }

/* The opening beat is now a real photo of the team, not a flat ground —
   a loose mosaic of six portraits, darkened and desaturated so the logo
   and headline read clearly over the top. data-sc-stage is position:sticky
   (a valid containing block), so these anchor to it directly. */
.hero-photo-mosaic {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.hero-photo-mosaic img {
  /* Grid items default to min-height:auto, so a tall portrait image
     refuses to shrink below its own intrinsic aspect ratio and overflows
     its 1fr row instead of filling it -- min-height/width:0 lets it
     actually obey height:100% like a normal box. */
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) brightness(0.55) contrast(1.05);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(10, 24, 48, 0.55) 0%, rgba(10, 24, 48, 0.82) 62%, rgba(10, 24, 48, 0.94) 100%),
    linear-gradient(to bottom, rgba(10, 24, 48, 0.55) 0%, rgba(10, 24, 48, 0.35) 30%, rgba(10, 24, 48, 0.55) 65%, rgba(10, 24, 48, 0.92) 100%);
}
@media (max-width: 700px) {
  .hero-photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}

.face-field__headline {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--sc-gutter);
}
/* The logo lives OUTSIDE the engine's .sc-copy cue system on purpose: every
   .sc-copy--center block shares the exact same absolute-centered position
   (that is how the engine crossfades sequential lines in a pin act without
   a layout jump), so two of them — logo, then headline — landed printed
   directly on top of each other. The logo needs its own fixed anchor above
   that centre point, not a second competing .sc-copy--center. */
.face-field__logo-wrap {
  position: absolute;
  left: 50%;
  top: 16%;
  translate: -50% -50%;
  z-index: 12;
  perspective: 900px;
}
.face-field__logo {
  display: block;
  width: clamp(280px, 32vw, 520px);
  height: auto;
  cursor: default;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
  transform-style: preserve-3d;
  transition: filter 180ms var(--sc-ease-out);
  /* --sc-p is the pin act's own scroll progress (0-1), published by the
     engine on the section element. Reading it here gives the mark a slow,
     continuous drift for the whole length of the pin instead of sitting
     dead still until the copy below it starts to fade — something is always
     quietly moving, which is what makes a long pin read as alive rather
     than stalled. */
  translate: 0 calc(var(--sc-p, 0) * -18px);
  scale: calc(1 + var(--sc-p, 0) * 0.05);
}
@media (hover: hover) and (pointer: fine) {
  .face-field__logo:hover {
    filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.65));
  }
}
/* The band between the logo and the headline had been a heavily-scrimmed
   stretch of the background photo, doing nothing on its own -- a
   continuously scrolling strip of real event photos instead, sitting
   above the scrim so it reads clearly (unlike the darkened background). */
.hero-marquee {
  position: absolute;
  left: 0; right: 0;
  top: 46%;
  translate: 0 -50%;
  overflow: hidden;
  height: clamp(180px, 20vw, 260px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.hero-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sc-4);
  width: max-content;
  animation: hero-marquee-scroll 83s linear infinite;
}
.hero-marquee__track img {
  height: clamp(180px, 20vw, 260px);
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* These are portrait photos of standing/seated people with headroom at
     the top of the frame; a square tile forced too tight a vertical crop
     and clipped heads even with a top-biased object-position. A taller
     (4:5) tile needs less vertical cropping to fill, so full heads stay
     in frame across the mixed source photos without per-image tuning. */
  object-position: 50% 8%;
  border-radius: var(--sc-r-md);
  flex: none;
}
@keyframes hero-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee__track { animation: none; }
}
.face-field__text {
  top: 78%;
  /* The engine's own .sc-copy caps every cue block at min(46rem,76vw) so
     sequential lines never overrun a stage — good for a narrow scrub
     caption, too narrow for a hero headline on a laptop-width screen,
     where it read as a cramped column in the middle of a wide, empty
     ground. Widen it here, for this block only. */
  max-width: min(64rem, 88vw);
}
.face-field__text p { margin-top: var(--sc-4); }
@media (max-width: 700px) {
  .face-field__logo-wrap { top: 12%; }
  .face-field__text {
    top: 74%;
    max-width: 92vw;
    /* The engine's own mobile breakpoint resets .sc-copy back to
       inset-inline:gutter (built for its edge-anchored --lead/--trail
       captions), which silently wins over .sc-copy--center's left:50%
       at this width and shoved the whole block toward the left edge.
       Reassert centering here so it isn't lost on a phone screen. */
    inset-inline: auto;
    left: 50%;
    translate: -50% -50%;
  }
}
.face-field__eyebrow {
  font-size: var(--sc-t-sm);
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-4);
}
.text-accent { color: var(--sc-accent); }
.face-field__headline h1 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  /* One line, always: the phrase is short enough to read as a single
     statement, and a fluid vw-based size (not the shared --sc-t-4xl
     token, whose floor is too large to fit a phone width on one line)
     keeps it from ever wrapping or overflowing the viewport. */
  font-size: clamp(1.6rem, 7vw, 6.5rem);
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  white-space: nowrap;
  max-width: none;
}
@media (min-width: 900px) {
  /* Same words, a wider column: on a laptop screen the hero read as a
     narrow strip lost in a wide dark ground. Size the subtext up so it
     actually spans the space it has (the headline is already fluid). */
  .face-field__headline p:not(.face-field__eyebrow) { max-width: 56ch; font-size: var(--sc-t-xl); }
}
.face-field__headline p:not(.face-field__eyebrow) {
  margin-top: var(--sc-5);
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
  max-width: 42ch;
  /* A block narrower than its centered parent still sits flush-left by
     default -- text-align:center only centers the words inside the box,
     not the box itself. auto margins center the box too. */
  margin-inline: auto;
  text-wrap: pretty;
}
@media (max-width: 480px) {
  /* A very narrow phone had the logo, eyebrow, headline and subtext all
     stacked with the same tight spacing as a desktop screen, reading as
     squashed together. Don't shrink the type — widen the gaps between
     the pieces instead, so each one gets room to breathe. */
  .face-field__headline p:not(.face-field__eyebrow) { margin-top: var(--sc-3); }
  .face-field__eyebrow { margin-bottom: var(--sc-3); }
}

/* ----------------------------------------------------- Act 2: grounding --
   The copy is a tile in the same grid as the photos — not an overlay on
   top of them. grid-auto-flow:dense lets the browser pack every photo into
   the cells the text tile doesn't claim, so nobody ends up hidden behind
   it; every photo stays fully visible on every side of the words. */
.grounding {
  max-width: var(--sc-maxw);
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
}

/* A wordless grid of the actual current team, in place of one posed
   portrait. data-sc-tilt (perspective set here, the engine writes the
   rotation) gives each tile a pointer-driven 3D nudge instead of a flat
   hover state. Five columns so 18 photos run tall enough (4 rows) to leave
   real photo above and below the text tile, not just beside it. */
.collage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense;
  gap: var(--sc-3);
  perspective: 1200px;
}
.collage__tile {
  position: relative;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
  overflow: hidden;
  transition: box-shadow 220ms var(--sc-ease-out);
}
.collage__tile-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Same candid team photos as the hero — headroom at the top of frame,
     so a dead-center crop into a square tile clips heads. Bias up. */
  object-position: 50% 20%;
}
.collage__tile-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sc-3) var(--sc-4);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 24, 48, 0.85), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .collage__tile:hover {
    box-shadow: var(--sc-e3);
  }
  .collage__tile:hover .collage__tile-name {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 18 photos don't divide evenly across 5 columns -- the trailing 4 sit in
   their own centered row instead of flush-left under an empty cell. */
.collage__last-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-3);
  max-width: 80%;
  margin: 0 auto;
}

.grounding__text {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: color-mix(in oklab, var(--sc-canvas) 80%, black 8%);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-7) var(--sc-8);
  box-shadow: var(--sc-e3);
}
.grounding__text h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-t-3xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin-bottom: var(--sc-5);
}
.grounding__text p {
  font-size: var(--sc-t-base);
  color: var(--sc-ink-soft);
}
.grounding__text p + p { margin-top: var(--sc-4); }

@media (max-width: 640px) {
  .collage { grid-template-columns: repeat(3, 1fr); }
  .grounding__text { grid-column: 1 / -1; grid-row: 3 / span 2; padding: var(--sc-6); }
  .collage__last-row { grid-template-columns: repeat(3, 1fr); max-width: none; }
}

/* ---------------------------------------------------- Act 3: departments --
   Numbered index list, borrowed structural device (a Behance VC-site
   reference used this for its "Sector Focus" list) — our own colours,
   photography, and copy, not the reference's palette. */
/* The page ground is one global colour that drifts as you scroll (see
   docEl --sc-canvas in the engine). A short flow act's drift target isn't
   fully reached until a full viewport past the act itself (the p formula
   runs to height+vh), so every light section from here on would read as
   dark-text-on-still-dark-ground for its first stretch. These sections'
   copy needs full contrast the moment it's on screen, so each carries its
   own solid ground instead of waiting on the drift to catch up. */
.light-ground {
  background: var(--sc-surface);
  padding-block: var(--sc-9);
}
/* Same 1216px measure and stacked heading treatment as .invitation and
   the department picker below it -- was its own 82rem width, a
   side-by-side heading/paragraph flex row, and the default dark ink
   instead of the blue every other h2 on the page uses. */
.dept-index {
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
}
.dept-index__head {
  margin-bottom: var(--sc-7);
}
.dept-index__head h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: 1.875rem;
  color: var(--sc-accent);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin-bottom: var(--sc-4);
}
@media (min-width: 640px) {
  .dept-index__head h2 { font-size: 44px; }
}
.dept-index__head p {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-lg);
  max-width: 60ch;
}

.dept-index__teaser {
  margin-bottom: var(--sc-7);
}
.yt-embed {
  position: relative;
  width: 100%;
  /* Sized down from a full-bleed hero player -- the viewer can still go
     full screen from YouTube's own player controls (allowFullScreen on the
     iframe), so there's no need for the embed itself to be huge by default. */
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--sc-ink);
  box-shadow: var(--sc-e2);
}
.dept-index__teaser .yt-embed {
  max-width: 560px;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-embed__thumb {
  display: block;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  appearance: none;
}
.yt-embed__play {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  transition: transform 180ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .yt-embed__thumb:hover .yt-embed__play { transform: scale(1.15); }
}

.dept-row {
  display: flex;
  align-items: center;
  gap: var(--sc-6);
  padding: var(--sc-6) 0;
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.dept-row:first-child { border-top: 1px solid var(--sc-hairline-strong); }
.dept-row__num {
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: var(--sc-hairline-strong);
  font-weight: 400;
  min-width: 3ch;
}
.dept-row__name {
  flex: 1;
  font-size: var(--sc-t-lg);
  font-weight: 500;
}
@media (max-width: 560px) {
  .dept-row { gap: var(--sc-4); }
}

/* One collage of every department's video(s), each tile carrying its own
   title -- replaces showing them scattered one at a time down the row
   list above. */
.dept-video-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(374px, 1fr));
  gap: var(--sc-3);
  margin-top: var(--sc-7);
}
.dept-video-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sc-2);
}
.dept-video-tile .yt-embed {
  max-width: none;
  margin: 0;
}
.dept-video-tile__title {
  font-size: var(--sc-t-sm);
  font-weight: 500;
  color: var(--sc-ink);
  text-align: center;
}
.dept-row__video-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border: 1px dashed var(--sc-hairline-strong);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}

/* --------------------------------------------------- Act 4: who it's for --
   Was a two-column grid (heading left, copy+chips right) that left the
   whole lower half of the heading's own column empty -- a short h2 next
   to a taller stack of prose reads as a layout accident, not a design.
   Single stacked column instead, same left-aligned rhythm as the
   department picker directly below it, so the two read as one flow
   instead of two unrelated layouts pasted together. */
.invitation {
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
}
.invitation h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  /* --sc-t-3xl clamps up to 5rem/80px on a wide screen -- far bigger than
     the "What interests you most?" heading below it (Tailwind
     text-3xl sm:text-[44px]), and inherited the default dark ink instead
     of the same blue. Match both exactly so the two headings read as one
     family, not two different styles pasted together. */
  font-size: 1.875rem;
  color: var(--sc-accent);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin-bottom: var(--sc-4);
}
@media (min-width: 640px) {
  .invitation h2 { font-size: 44px; }
}
.invitation p { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 60ch; margin-bottom: var(--sc-6); }
.invitation__chips { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.invitation__chips span {
  font-size: var(--sc-t-sm);
  background: #fff;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-sm);
  padding: var(--sc-2) var(--sc-4);
}

/* The two sections above compound their own top/bottom padding right at
   the seam between "who it's for" and "what interests you" -- two
   halves of one thought, separated by ~450px of empty ground. Close
   that gap from both sides without touching the padding these sections
   still want against their OTHER neighbours. */
.sc-section--tight-bottom { padding-bottom: var(--sc-4); }
.sc-section--tight-top { padding-top: var(--sc-4); }

/* ---------------------------------------------------- Act 5: commitment --
   ApplicationSection already manages its own two widths internally (a
   wide 1200px department-picker grid, a narrower 720px form) -- this
   wrapper was capping both at 46rem regardless, squeezing the picker's
   3-column grid into a narrow column with empty space on both sides.
   Wide enough here to just get out of the component's way. */
.commitment {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
}

.evening-foot {
  background: #13284a;
  color: #fff;
  padding: var(--sc-8) var(--sc-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sc-6);
}
.evening-foot p { margin: 0; }
.evening-foot .legal { font-size: var(--sc-t-xs); color: #B9C4D6; max-width: 32rem; line-height: 1.6; }
.evening-foot .addr { font-size: var(--sc-t-sm); color: #B9C4D6; margin-top: var(--sc-2); }