/* ==================================================================
   HIS — Student Life page
   Builds on styles.css (type, nav, menu, line layer, tilted cards,
   quotes, footer). Uses the same guides as Admissions: lines at
   19.4vw / 80.6vw, content from 21.7vw to 78.3vw. 20px radius
   everywhere; image placeholders are grey.
   ================================================================== */

.sl { --gl: 19.4vw; --gr: 80.6vw; --cl: 21.7vw; --cw: 56.6vw; }

.clubs-mark, .clubs-intro, .club-cards, .club-note, .life > .mid-title, .life-collage,
.year, .voice, .apply-in { position: relative; z-index: 2; }

/* ==================================================================
   1. HERO — pinned. Moments start where the PDF places them and drift
   up past the title at different speeds (JS sets transforms).
   ================================================================== */
.sl-hero { position: relative; height: 240vh; }
.sl-pin { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.sl-title {
  position: absolute; z-index: 3; left: 0; right: 0; top: 50%; translate: 0 -50%;
  text-align: center; font-weight: 300; font-size: clamp(36px, 5.6vw, 96px); line-height: 1.04; letter-spacing: -0.01em;
  pointer-events: none; will-change: transform, opacity;
}
.sl-title .ln > span { animation: slLine 1.3s var(--ease-out) 0.3s forwards; }
.sl-title .ln:nth-child(2) > span { animation-delay: 0.42s; }
@keyframes slLine { to { transform: none; } }

.moments { position: absolute; inset: 0; z-index: 2; }
.moment {
  position: absolute; margin: 0; left: 0; top: 0;
  will-change: transform;
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.moments.ready .moment { opacity: 1; }
.m-ph {
  width: 100%; aspect-ratio: var(--a, 1);
  border-radius: var(--radius); background: var(--ph);
  rotate: var(--t, 0deg);
  transition: background 0.4s, scale 0.6s var(--ease-spring);
}
/* "cut-out" objects from the PDF (art pieces): an organic shape, no frame */
.moment.cut .m-ph { border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%; background: #d9d4cc; }
.moment:hover .m-ph { scale: 1.04; background: #c3c3c9; }
.moment figcaption {
  margin-top: 12px; text-align: center; rotate: var(--t, 0deg);
  font-size: clamp(9px, 0.62vw, 11px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}

.sl-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 4vh; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-text);
  transition: opacity 0.4s;
}
.sl-cue i { position: relative; width: 1px; height: 46px; background: #d6d6db; overflow: hidden; }
.sl-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: cueDrop 1.8s var(--ease-out) infinite; }
@keyframes cueDrop { to { top: 100%; } }

/* ==================================================================
   2. CLUBS — illustrated wordmark, short intro, clean list
   ================================================================== */
.clubs { position: relative; padding: 10vw 0 8vw; }
.clubs-mark { margin: 0 0 0 var(--cl); width: var(--cw); color: var(--ink); }
.clubs-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-l { fill: currentColor; opacity: 0; transform: translateY(40px); transform-box: fill-box; transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d) * 0.08s); }
.sv-d { opacity: 0; transform: scale(0) rotate(-25deg); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s ease, transform 0.8s var(--ease-spring); transition-delay: calc(0.55s + var(--d) * 0.07s); }
.clubs-mark.in .sv-l { opacity: 1; transform: none; }
.clubs-mark.in .sv-d { opacity: 1; transform: none; }
.clubs-mark.in .sv-d:hover { animation: wiggle 0.6s var(--ease-out); }
@keyframes wiggle { 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg) scale(1.05); } }

.clubs-intro { margin: 4vw 0 0 var(--cl); width: var(--cw); display: grid; grid-template-columns: 1.4fr 1fr; gap: 4vw; align-items: end; }
.club-when { display: flex; gap: 3vw; justify-content: flex-end; }
.club-when dt { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 6px; }
.club-when dd { font-size: clamp(15px, 1.25vw, 21px); font-weight: 500; }

.club-cards { margin: 4vw 0 0 var(--cl); width: var(--cw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vw; }
.club-card {
  position: relative; display: flex; flex-direction: column; padding: 0.9vw 0.9vw 1.4vw;
  border-radius: var(--radius); border: 1px solid #e3e3e8; background: #fff; text-decoration: none; color: var(--ink);
  opacity: 0; translate: 0 36px;
  transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-spring), border-color 0.35s, box-shadow 0.45s, transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.07s), calc(var(--i, 0) * 0.07s), 0s, 0s, 0s;
}
.club-cards.in .club-card { opacity: 1; translate: 0 0; }
.cc-ph { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 6px); background: var(--ph); margin-bottom: 1.2vw; transition: background 0.4s; }
.cc-tag { padding: 0 0.5vw; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cc-name { padding: 0.4vw 0.5vw 1.2vw; font-size: clamp(18px, 1.6vw, 28px); font-weight: 400; text-transform: uppercase; line-height: 1.05; }
.cc-go { margin: auto 0.5vw 0; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.cc-go i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; transition: transform 0.5s var(--ease-spring), background 0.3s, color 0.3s; }
a.club-card:hover { border-color: var(--navy); box-shadow: 0 22px 46px rgba(24,34,92,0.12); transform: translateY(-4px); }
a.club-card:hover .cc-ph { background: #c3c3c9; }
a.club-card:hover .cc-go i { background: var(--navy); color: #fff; transform: rotate(-45deg); }
.club-card.more { justify-content: flex-end; padding: 1.6vw; background: #f4f4f6; border-color: #f4f4f6; }
.club-card.more .cc-tag, .club-card.more .cc-name { padding-left: 0; padding-right: 0; }
.club-card.more p { font-size: clamp(12px, 0.9vw, 15px); line-height: 1.55; color: var(--grey-text); }

.club-note { margin: 2vw 0 0 var(--cl); width: var(--cw); font-size: 13px; color: var(--grey-text); }

/* ==================================================================
   3. LIFE AT HIS — tilted cards over placeholders
   ================================================================== */
.life { position: relative; padding: 6vw 0 6vw; }
.life > .mid-title { margin-left: var(--cl); margin-bottom: 4vw; }
.life-collage { position: relative; height: 40vw; }
.lp { position: absolute; margin: 0; border-radius: var(--radius); background: var(--ph); will-change: transform; rotate: calc(var(--tilt) + 8deg); clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path 1.2s var(--ease-out), rotate 1.4s var(--ease-spring); }
/* each note sits on the lower corner of its own image */
.lp-a { left: 2vw;  top: 3vw;  width: 21vw; height: 15vw; --tilt: -5deg; }
.lp-b { left: 26vw; top: 15vw; width: 21vw; height: 15vw; --tilt: 3deg; }
.lp-c { left: 51vw; top: 1vw;  width: 21vw; height: 15vw; --tilt: -3deg; }
.lp-d { left: 75vw; top: 14vw; width: 22vw; height: 15vw; --tilt: 4deg; clip-path: inset(0 0 0 100% round var(--radius)); }
.life-collage.in .lp { rotate: var(--tilt); clip-path: inset(0 0 0 0 round var(--radius)); }
.life-collage.in .lp-b { transition-delay: 0.08s; }
.life-collage.in .lp-c { transition-delay: 0.16s; }
.life-collage.in .lp-d { transition-delay: 0.24s; }
.life-collage .tcard { padding: 1.4vw 1.7vw; }
.life-collage .tcard h4 { margin-bottom: 0.6vw; }
.life-collage .tcard p { font-size: clamp(12px, 0.9vw, 15px); }
.tcard.l1 { left: 11vw; top: 14.5vw; width: 15vw; rotate: calc(var(--r) - 18deg); }
.tcard.l2 { left: 35vw; top: 26.5vw; width: 15vw; rotate: calc(var(--r) + 16deg); transition-delay: 0.1s; }
.tcard.l3 { left: 60vw; top: 12.5vw; width: 14vw; rotate: calc(var(--r) - 14deg); transition-delay: 0.2s; }
.tcard.l4 { left: 72vw; top: 25.5vw; width: 17vw; rotate: calc(var(--r) + 14deg); transition-delay: 0.3s; }

/* ==================================================================
   4. A YEAR OF MOMENTS — two-column list
   ================================================================== */
.year { position: relative; margin-left: var(--cl); width: var(--cw); padding: 6vw 0 6vw; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4vw; align-items: start; }
.year-head .cap-title { margin-bottom: 1.4vw; }
.year-list { list-style: none; }
.year-list li {
  position: relative; display: grid; grid-template-columns: 7vw 1fr; align-items: baseline; gap: 1.6vw; padding: 1.3vw 0;
  opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), color 0.3s;
  transition-delay: calc(var(--i, 0) * 0.07s);
}
.year-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(20,20,20,0.12); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.07s); }
.year-list.in li { opacity: 1; transform: none; }
.year-list.in li::after { transform: scaleX(1); }
.yl-when { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.yl-what { font-size: clamp(16px, 1.45vw, 24px); font-weight: 400; transition: transform 0.5s var(--ease-out); }
.year-list li:hover .yl-what { transform: translateX(8px); color: var(--navy); }

/* ==================================================================
   5. ONE VOICE — a single large rotating quote
   ================================================================== */
.voice { position: relative; margin-left: var(--cl); width: var(--cw); padding: 5vw 0 7vw; }
.voice .quotes { min-height: 15vw; }
.voice .quote p { font-size: clamp(22px, 2.5vw, 42px); color: var(--ink); }
.voice .quote cite { color: var(--gold); }
.voice .qbtn { color: #a0a0a8; }
.voice .qbtn.is-active, .voice .qbtn:hover { color: var(--ink); }
.voice .qbtn i { background: rgba(20,20,20,0.12); }
.voice .qbtn i::after { background: var(--gold); }
.voice .quote-nav { max-width: 26vw; }

/* ==================================================================
   6. CTA — identical to Admissions
   ================================================================== */
.mid-title { font-weight: 400; font-size: clamp(22px, 2.35vw, 38px); line-height: 1.22; letter-spacing: -0.005em; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.abtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 26px; border-radius: var(--radius);
  border: 1px solid #c9c9cf; background: #fff; color: var(--ink);
  font: 600 13px/1 "Raleway", sans-serif; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  transition: color 0.45s var(--ease-out), border-color 0.45s;
}
.abtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease-out); }
.abtn:hover { color: #fff; border-color: var(--navy); }
.abtn:hover::before { clip-path: inset(0 0 0 0); }
.abtn i { font-style: normal; transition: transform 0.45s var(--ease-spring); }
.abtn:hover i { transform: translateX(5px); }

.apply { position: relative; padding: 2vw 0 9vw; }
.apply-in {
  --f: 1; --ft: 1; position: relative; z-index: 2;
  margin-left: var(--gl); width: calc(var(--gr) - var(--gl));
  padding: 8vw 6vw; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.apply-in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--navy); clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0 round var(--radius)); }
.apply-in > * { opacity: var(--ft); }
.apply-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.6vw; }
.apply-title { font-weight: 300; font-size: clamp(30px, 4.2vw, 70px); line-height: 1.06; margin-bottom: 3vw; }
.apply .abtn { border-color: rgba(255,255,255,0.5); background: transparent; color: #fff; }
.apply .abtn::before { background: #fff; }
.apply .abtn:hover { color: var(--navy); }
.apply .abtn.solid { background: var(--gold); border-color: var(--gold); color: #fff; }
.apply .abtn.solid::before { background: #fff; }
.apply .abtn.solid:hover { color: var(--navy); border-color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==================================================================
   Mobile
   ================================================================== */
@media (max-width: 900px) {
  .sl { --cl: 7vw; --cw: 86vw; --gl: 7vw; --gr: 93vw; }
  .sl-hero { height: 180vh; }
  .moment figcaption { font-size: 9px; margin-top: 8px; }

  .clubs { padding: 80px 0 50px; }
  .clubs-intro { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .club-when { justify-content: flex-start; gap: 30px; }
  .club-cards { margin-top: 30px; grid-template-columns: 1fr 1fr; gap: 12px; }
  .club-card { padding: 10px 10px 16px; }
  .cc-ph { margin-bottom: 12px; }
  .cc-tag, .cc-go { padding: 0 4px; margin-left: 4px; }
  .cc-name { padding: 4px 4px 14px; }
  .club-card.more { padding: 16px; }
  .club-note { margin-top: 16px; }

  .life { padding: 40px 0; }
  .life > .mid-title { margin-bottom: 26px; }
  .life-collage { height: auto; display: grid; gap: 14px; padding: 0 7vw; }
  .life-collage .lp, .life-collage .tcard { position: relative; left: auto; top: auto; width: auto; rotate: 0deg !important; }
  .life-collage .lp { height: 50vw; }
  .life-collage .tcard { margin: -46px 16px 12px; z-index: 3; }
  .lp-a { order: 1; } .l1 { order: 2; } .lp-b { order: 3; } .l2 { order: 4; }
  .lp-c { order: 5; } .l3 { order: 6; } .lp-d { order: 7; } .l4 { order: 8; }
  .life-collage .tcard { padding: 22px; }
  .life-collage .tcard h4 { margin-bottom: 6px; }

  .year { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .year-head .cap-title { margin-bottom: 12px; }
  .year-list li { grid-template-columns: 70px 1fr; gap: 12px; padding: 14px 0; }

  .voice { padding: 40px 0 60px; }
  .voice .quotes { min-height: 200px; }
  .voice .quote-nav { max-width: none; }

  .apply { padding: 10px 7vw 70px; }
  .apply-in { margin: 0; width: auto; padding: 60px 24px; }
  .apply-kicker { margin-bottom: 14px; }
  .apply-title { margin-bottom: 26px; }
}

/* ==================================================================
   PHOTOS
   ================================================================== */
.m-ph, .cc-ph { overflow: hidden; }
/* PDF moments come pre-tilted with rounded corners baked in (and the
   art pieces are cut-outs), so the frame itself stays invisible */
.moment.baked .m-ph { background: none; border-radius: 0; rotate: 0deg; overflow: visible; }
.moment.baked .m-ph img { object-fit: contain; filter: drop-shadow(0 18px 30px rgba(20,20,30,0.14)); }
.moment.baked:hover .m-ph { background: none; }
.cc-ph img, .lp img { transition: transform 1.1s var(--ease-out); }
a.club-card:hover .cc-ph img { transform: scale(1.06); }