/* ==========================================================================
   Permission to be Bored - Nord Anglia Education summer campaign
   Palette + type sampled from the Figma export (Frame 3, 3332px master)
   ========================================================================== */

/* Self-hosted fonts (GDPR-safe: no requests to Google) */
@font-face {
  font-family: 'Blinker'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/blinker-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Blinker'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/blinker-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Blinker'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/blinker-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Blinker'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/blinker-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/permanent-marker-400.woff2') format('woff2');
}
/* the real design font (SIL OFL licensed - free for web embedding) */
@font-face {
  font-family: 'Bristol'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/bristol-400.woff2') format('woff2');
}

:root {
  --teal:        #00D1DA;   /* nav bar, primary accent */
  --teal-soft:   #3AD4D7;   /* active chips, to-top */
  --teal-btn:    #1DCED1;   /* submit pill */
  --navy:        #162B6F;   /* headings, video section bg */
  --navy-deep:   #003057;   /* footer, form input borders (#00315A family) */
  --cream:       #F6F1E7;   /* emergency + school section bg, chips */
  --yellow:      #FFC800;   /* hall of fame bg */
  --red:         #E94F37;   /* bored button */
  --red-ring:    #F5D1C5;   /* bored button outer ring */
  --red-shadow:  #C43D28;   /* bored button bottom shadow */
  --white:       #FFFFFF;

  --font-body:   'Blinker', system-ui, sans-serif;
  --font-marker: 'Bristol', 'Permanent Marker', cursive; /* the design's actual font */

  --container:   1200px;
  --h2:          clamp(26px, 2.25vw, 33px); /* Bristol at the design's 75px/3332 scale ≈ 32px @1440 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* in-page anchors must clear the sticky nav */
  scroll-padding-top: calc(clamp(72px, 7vw, 104px) + 12px);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.h-marker {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.5; /* matches the design's 150% */
  text-transform: uppercase;
  letter-spacing: 0;
}

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

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* the bored button's transform is GSAP-owned from load (3D press/tilt) - its
   reveal must be fade-only, or GSAP bakes the 26px offset into inline style */
.bored__btn.reveal { transform: none; transition: opacity .7s ease; }

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

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(72px, 7vw, 104px);
  padding-inline: clamp(20px, 3vw, 56px);
  background: var(--teal);
}

.nav__logo img { height: clamp(48px, 5.5vw, 82px); width: auto; }

.nav__burger {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 38px; height: 5px;
  border-radius: 3px;
  background: var(--navy);
  transition: transform .3s ease, opacity .3s ease;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy);
  opacity: 0;
  transition: opacity .3s ease;
}
.menu.is-open { opacity: 1; }
.menu ul {
  list-style: none;
  text-align: center;
  display: grid;
  gap: clamp(18px, 3vh, 30px);
  margin: auto; /* safe centering: never clips the first link on short viewports */
  padding-block: 28px;
}
.menu__link {
  color: var(--white);
  font-family: var(--font-marker);
  font-size: clamp(22px, 3.4vw, 34px);
  text-transform: uppercase;
  text-decoration: none;
}
.menu__link:hover, .menu__link:focus-visible { color: var(--teal); }
.menu__link--ext::after { content: ' \2197'; }

/* ============ HERO ============ */
.hero {
  position: relative;
  height: min(88vh, 56.25vw);
  min-height: 420px;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .38); /* matches Figma 38% black overlay */
}
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  width: 56px;
  color: var(--white);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}

/* ============ INTRO ============ */
.intro { position: relative; background: var(--white); padding-block: clamp(60px, 8vw, 110px) clamp(30px, 4vw, 60px); }
.intro__trail {
  position: absolute; top: 0; left: 0;
  width: clamp(140px, 17vw, 244px);
}
/* dotted trails are inline SVGs drawn on scroll; keep intrinsic ratio */
svg.trail { height: auto; display: block; }
.intro__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}
.intro__copy { max-width: 620px; }
.intro__copy h2 { margin-bottom: 22px; }
.intro__copy p { font-size: clamp(17px, 1.5vw, 21px); }
.intro__badge {
  width: clamp(170px, 19vw, 268px);
  transition: transform .4s ease;
}
.intro__badge:hover { transform: rotate(8deg) scale(1.04); }

/* ============ WHY ============ */
.why { background: var(--white); padding-block: clamp(30px, 4vw, 60px) 0; }
.why h2 { margin-bottom: clamp(30px, 4vw, 50px); }
.why__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
.why__col { text-align: center; }
.why__col .why__icon {
  height: clamp(72px, 8vw, 108px);
  width: auto;
  margin: 0 auto 18px;
}
.why__col:hover .why__icon { animation: wiggle .6s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg) scale(1.06); }
  60% { transform: rotate(6deg) scale(1.06); }
}
.why__lead { font-size: clamp(16px, 1.4vw, 20px); }
.why__title { font-size: clamp(17px, 1.5vw, 21px); margin: 2px 0 20px; }
.why__body {
  max-width: 300px;
  margin-inline: auto;
  font-size: clamp(14px, 1.1vw, 16px);
}
.why__trail {
  display: block;
  width: clamp(70px, 8vw, 112px);
  margin: 8px auto 0;
  transform: translateX(6px);
}

/* ============ VIDEOS ============ */
.videos { background: var(--navy); color: var(--white); padding-block: clamp(50px, 6vw, 80px) 0; }
.videos__heading { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }

.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: clamp(16px, 2.6vw, 38px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 4px;
}
/* safe centering that works everywhere: centers when content fits, left-aligns when it overflows */
.carousel__track > :first-child { margin-left: auto; }
.carousel__track > :last-child { margin-right: auto; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(18px, 1.8vw, 26px);
  color: currentColor;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}
.carousel__btn:hover { opacity: 1; transform: translateY(-50%) scale(1.12); }
.carousel__btn--prev { left: clamp(-16px, -1vw, -8px); }
.carousel__btn--next { right: clamp(-16px, -1vw, -8px); }

.video-card {
  position: relative;
  flex: 0 0 clamp(200px, 22vw, 268px);
  aspect-ratio: 9 / 16;
  border-radius: 3px; /* design has square-ish corners */
  overflow: hidden;
  scroll-snap-align: center;
  background: #000;
}
.video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Play affordance is not in the mock - kept small and subtle for usability; flagged in README for design sign-off. */
.video-card__play::before {
  content: '';
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l10 6-10 6z' fill='%23162B6F'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform .2s ease, opacity .2s ease;
}
.video-card__play:hover::before { transform: scale(1.1); }
.video-card.is-playing .video-card__play::before { opacity: 0; }
.video-card.is-playing:hover .video-card__play::before,
.video-card.is-playing .video-card__play:focus-visible::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h3v14H8zM13 5h3v14h-3z' fill='%23162B6F'/%3E%3C/svg%3E");
}

.videos__more {
  text-align: center;
  margin-top: clamp(36px, 5vw, 60px);
  font-size: clamp(19px, 1.8vw, 26px);
  text-transform: uppercase;
}
.videos__sub {
  text-align: center;
  margin-top: 18px;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
}
.videos__trail {
  display: block;
  width: clamp(95px, 10.5vw, 150px);
  margin: 6px auto 0;
  transform: translateX(30px);
}

/* ============ BORED BUTTON ============ */
.bored {
  position: relative;
  background: var(--cream);
  padding-block: clamp(50px, 6vw, 80px) clamp(60px, 7vw, 100px);
  overflow: hidden;
}
.bored__deco { position: absolute; }
.bored__deco--exclaim  { top: 5%;  left: 3.5%;  width: clamp(30px, 3.9vw, 56px); }
.bored__deco--heart    { bottom: 9%; left: 3.5%; width: clamp(28px, 3.5vw, 50px); }
.bored__deco--stars-tr { top: 5%;  right: 4%;  width: clamp(42px, 5vw, 72px); }
.bored__deco--stars-br { bottom: 9%; right: 5%; width: clamp(42px, 5vw, 72px); }
.star-fill--yellow { fill: var(--yellow); }
.star-line--yellow { fill: none; stroke: var(--yellow); stroke-width: 1.6; }
.star-fill--navy { fill: none; stroke: var(--navy); stroke-width: 1.8; }
.star-line--navy { fill: none; stroke: var(--navy); stroke-width: 1.6; }
.bored__deco--stars-br .star-fill--navy { fill: none; }

.bored__inner { display: grid; justify-items: center; text-align: center; }
.bored__heading {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.bored__heading img { width: clamp(34px, 3.5vw, 50px); transform: translateY(4px); }

.bored__btn {
  position: relative;
  /* explicit height instead of aspect-ratio: WebKit mis-sizes aspect-ratio
     on <button>, letting the caption below ride up over the circle */
  width: clamp(190px, 17.5vw, 252px);
  height: clamp(190px, 17.5vw, 252px);
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow:
    0 0 0 5px var(--cream),
    0 0 0 7px var(--red-ring),
    0 10px 0 3px var(--red-shadow);
  /* transform is owned by GSAP (3D tilt + spring); CSS only transitions the shadow */
  transition: box-shadow .12s ease;
}
.bored__btn:active {
  box-shadow:
    0 0 0 5px var(--cream),
    0 0 0 7px var(--red-ring),
    0 2px 0 1px var(--red-shadow);
}

.bored__caption {
  max-width: 340px;
  /* min raised: the button's ring + under-shadow paint ~20px below its box,
     so anything under ~50px lets the caption touch the shadow on tablets */
  margin-top: clamp(50px, 3.5vw, 62px);
  font-size: clamp(15px, 1.3vw, 19px);
}

.tip-card {
  margin-top: clamp(28px, 3vw, 40px);
  /* definite width (not content-derived) so the card never resizes between tips */
  width: min(464px, 92%);
  margin-inline: auto;
  background: var(--white);
  border: 2px dashed var(--navy);
  border-radius: 8px;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 40px);
  box-shadow: 0 8px 22px rgba(22, 43, 111, .12);
  /* entrance animation is GSAP-driven (3D swing-in) */
}
.tip-card__lead { font-size: clamp(14px, 1.2vw, 17px); margin-bottom: 10px; }
.tip-card__text { font-weight: 600; font-size: clamp(19px, 1.8vw, 25px); }

/* --- Paper ticket-roll, visible only while the randomizer picks a tip ---
   Tips spool vertically through the card's text window like a ticket strip:
   flat white/cream bands separated by dashed navy perforation lines (the same
   dash language as the card border). No blur, no gradients - it decelerates
   and clicks into place like a paper dial. At rest the card renders exactly
   as before: plain #tipText, no extra chrome. */
.tip-zone {
  position: relative;
  width: 100%; /* definite reference for the card's % width - text length can't move it */
}

.tip-card__stage {
  position: relative;
  display: grid;
  align-items: center; /* keeps the landed text aligned with the strip rows */
}
.tip-ticker {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tip-ticker__strip {
  position: absolute;
  left: 0; right: 0; top: 0;
  will-change: transform;
}
.tip-ticker__row {
  display: grid;
  place-items: center;
  padding-inline: 4px;
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.3;
  color: var(--navy);
  text-align: center;
}
.tip-ticker__row + .tip-ticker__row {
  border-top: 1.5px dashed rgba(22, 43, 111, .4); /* perforation */
}

/* ============ HALL OF FAME ============ */
.fame {
  position: relative;
  background: var(--yellow);
  padding-block: clamp(50px, 6vw, 84px) 0;
}
/* the design lets this section breathe wider than the standard column */
.fame > .container { max-width: min(1400px, 95vw); }
.fame h2 { margin-bottom: 14px; }
.fame__sub { font-size: clamp(15px, 1.3vw, 18px); margin-bottom: clamp(24px, 3vw, 40px); }

.chips { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); }
.chip {
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  box-shadow: 0 2px 5px rgba(22, 43, 111, .14);
  transition: transform .15s ease, background-color .2s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip.is-active { background: var(--teal-soft); font-weight: 600; }

.fame__layout {
  position: relative;
  z-index: 1; /* cards sit on top of the cross-pattern band below */
  display: grid;
  grid-template-columns: 1fr clamp(270px, 24vw, 320px);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  margin-top: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.fame__carousel { color: var(--navy); min-width: 0; }
.fame__track { align-items: center; justify-content: flex-start; }
.fame-card {
  /* card sizes measured from the design: normal ≈241px, featured ≈289px @1440 */
  flex: 0 0 clamp(180px, 16.7vw, 241px);
  background: var(--white);
  border-radius: 10px;
  scroll-snap-align: center;
  box-shadow: 0 3px 10px rgba(22, 43, 111, .15);
  transition: transform .25s ease, background-color .25s ease;
}
.fame-card__btn {
  display: block;
  width: 100%;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}
.fame-card img {
  width: 100%;
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
  border-radius: 5px;
}
.fame-card figcaption {
  display: none;
  color: var(--white);
  font-size: 14px;
  padding: 0 14px 12px;
}
.fame-card:hover, .fame-card:focus-within {
  background: var(--navy);
  transform: scale(1.05);
}
.fame-card:hover figcaption, .fame-card:focus-within figcaption { display: block; }
.fame-card__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 10px; }
.fame__empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 18px;
}

.submit-card {
  background: var(--white);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 30px);
  box-shadow: 0 6px 24px rgba(22, 43, 111, .18);
}
.submit-card h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  margin-bottom: 18px;
}
.submit-card form { display: grid; gap: 12px; }
.submit-card input[type="text"],
.submit-card select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--navy-deep);
  border-radius: 5px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
}
.submit-card select:invalid { color: rgba(22, 43, 111, .75); }
.submit-card input::placeholder { color: rgba(22, 43, 111, .75); }
.submit-card input:focus-visible, .submit-card select:focus-visible, .filebtn:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
.hp { position: absolute; left: -9999px; }

.filebtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  padding: 8px 14px;
  border: 1.5px solid var(--navy);
  border-radius: 5px;
  color: var(--navy);
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.filebtn:hover { background: rgba(29, 206, 209, .12); }
.filebtn svg { width: 14px; height: 14px; flex-shrink: 0; }
.filebtn [data-file-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filehint {
  margin-top: -6px;
  font-size: 12px;
  color: rgba(22, 43, 111, .75);
}

.submit-card__btn {
  justify-self: center;
  margin-top: 6px;
  padding: 10px 34px;
  border-radius: 999px;
  background: var(--teal-btn);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease;
}
.submit-card__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.form-msg { font-size: 14px; text-align: center; }
.form-msg:empty { display: none; }
.form-msg.is-error { color: #C4361F; }

/* white cross pattern band at the bottom of the yellow section (tucks slightly behind the cards, as in the design) */
.fame__pattern {
  height: clamp(90px, 10vw, 150px);
  margin-top: -26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M5 5l5 5M10 5l-5 5' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 19px 19px;
}

/* ============ SCHOOL (new informative section) ============ */
.school { background: var(--cream); padding-block: clamp(50px, 6vw, 80px); }
.school__inner { display: grid; justify-items: center; text-align: center; gap: 18px; }
.school__inner p { max-width: 560px; font-size: clamp(15px, 1.3vw, 19px); }
.school__btn {
  display: inline-block;
  margin-top: 6px;
  padding: 13px 36px;
  border-radius: 999px;
  background: var(--teal-btn);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px;
  transition: transform .15s ease;
}
.school__btn:hover { transform: translateY(-2px); }

/* ============ FOOTER ============ */
.footer {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  padding-block: clamp(36px, 4vw, 56px);
  overflow: hidden;
}
.footer__bottom {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  flex-wrap: wrap;
  font-size: 15px;
}
.footer__links {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  flex-wrap: wrap;
}
.footer__links a { text-underline-offset: 3px; color: var(--white); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__social {
  display: flex;
  gap: 12px;
  list-style: none;
  margin-left: auto;
}
.footer__social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .15s ease;
}
.footer__social a:hover { transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; fill: var(--navy-deep); }

.footer__totop {
  position: absolute;
  right: clamp(20px, 5vw, 90px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 68px; height: 68px;
  padding-top: 14px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--navy-deep);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .15s ease;
}
.footer__totop:hover { transform: translateY(-50%) scale(1.07); }
.footer__totop svg { width: 20px; }

/* cream dotted strip running down the right edge of the footer (from the design) */
.footer__pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(14px, 1.8vw, 26px);
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M3 3l5 5M8 3L3 8' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 18px 18px;
}

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(10, 18, 50, .82);
  padding: 4vmin;
  overscroll-behavior: contain;
}
/* entry-details, Instagram-style: media left, info right; thumbnail rail below */
.lightbox__inner {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(92vw, 860px);
}
.lightbox__card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 1fr);
  width: 100%;
  max-height: min(76vh, 600px);
  margin: 0;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox__media {
  min-height: 0;
  background: var(--navy);
}
.lightbox__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.lightbox__meta {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(18px, 2.5vw, 28px);
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
}
.lightbox__name { font-weight: 700; font-size: 20px; color: var(--navy); }
.lightbox__school { font-size: 14px; color: rgba(22, 43, 111, .75); }
.lightbox__category {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}
.lightbox__note { margin-top: 8px; font-size: 15px; color: var(--navy); }
.lightbox__note:not(:empty)::before { content: '\201C'; }
.lightbox__note:not(:empty)::after { content: '\201D'; }

/* thumbnail rail (desktop) */
.lightbox__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.lightbox__thumbs {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
  cursor: pointer;
  padding: 0;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--teal); }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__arrow {
  flex: 0 0 auto;
  width: 20px;
  color: var(--white);
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}
.lightbox__arrow:hover { transform: scale(1.12); }
.lightbox__arrow[disabled] { opacity: .25; pointer-events: none; }

@media (max-width: 700px) {
  /* stacked like an Instagram post on mobile; swipe left/right, no thumbnails */
  .lightbox__card {
    grid-template-columns: 1fr;
    max-height: 86vh;
    overflow-y: auto;
    touch-action: pan-y;
  }
  .lightbox__nav { display: none; }
}
.lightbox__close {
  position: absolute;
  top: 18px; right: 26px;
  color: var(--white);
  font-size: 46px;
  line-height: 1;
}

/* ============ RESPONSIVE ============ */
/* reserve room for the absolutely-positioned to-top circle at mid widths */
@media (max-width: 1380px) and (min-width: 701px) {
  .footer .container { padding-right: 150px; }
}

@media (max-width: 900px) {
  .fame__layout { grid-template-columns: 1fr; }
  .submit-card { max-width: 440px; width: 100%; justify-self: center; }
  /* 16px prevents iOS Safari focus auto-zoom on form fields */
  .submit-card input[type="text"], .submit-card select { font-size: 16px; }
}

@media (max-width: 700px) {
  /* full-screen hero: fills the viewport below the sticky nav
     (svh tracks mobile browser chrome; the vh line is the fallback) */
  .hero {
    height: calc(100vh - clamp(72px, 7vw, 104px));
    height: calc(100svh - clamp(72px, 7vw, 104px));
    min-height: 0;
  }
  .intro__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .intro__copy { order: 2; }
  .intro__badge { order: 1; }
  .why__cols { grid-template-columns: 1fr; gap: 40px; }
  .videos__trail { transform: none; }
  .carousel__btn--prev { left: 2px; }
  .carousel__btn--next { right: 2px; }
  .videos .carousel__btn { color: var(--white); filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
  .bored__heading { flex-direction: row; font-size: 22px; }
  .footer__social { margin-left: 0; }
  .footer__totop { position: static; transform: none; margin: 26px auto 0; }
  .footer__totop:hover { transform: scale(1.07); }
  .footer .container { padding-right: 40px; }
}