/* ==========================================================================
   Keanu Tetteh  |  Concept 5: Sticker Club
   90s surf-brand poster / streetwear drop. Turquoise first.
   ========================================================================== */

:root {
  /* Brand palette */
  --turq: #1CC7C1;
  --turq-deep: #10A8A3;
  --turq-light: #8BE6E0;
  --yellow: #FFD23F;
  --coral: #FF5C7A;
  --cream: #FFF7EA;
  --navy: #0E1A3C;
  --white: #FFFFFF;

  /* System tokens */
  --color-bg: var(--cream);
  --color-surface: var(--white);
  --color-primary: var(--turq);
  --color-primary-hover: var(--turq-deep);
  --color-accent: var(--coral);
  --color-text: var(--navy);
  --color-text-muted: #3D4A6B;
  --color-text-inverse: var(--cream);
  --color-border: var(--navy);
  --color-border-subtle: rgba(14, 26, 60, .14);
  --color-success: #1F9D55;
  --color-warning: var(--yellow);
  --color-error: #D63A55;

  /* Hard poster shadows */
  --hard-sm: 3px 3px 0 var(--navy);
  --hard-md: 5px 5px 0 var(--navy);
  --hard-lg: 8px 8px 0 var(--navy);
  --shadow-sm: 0 1px 2px rgba(14, 26, 60, .08);
  --shadow-md: 0 6px 16px rgba(14, 26, 60, .14);
  --shadow-lg: 0 14px 34px rgba(14, 26, 60, .22);
  --shadow-xl: 0 26px 60px rgba(14, 26, 60, .28);
  --sticker-shadow: 0 2px 0 rgba(14, 26, 60, .08), 0 12px 24px -6px rgba(14, 26, 60, .35);

  /* Type */
  --font-display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing (8px grid) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;

  --max-width: 75rem;
  --gutter: clamp(1rem, 5vw, 3rem);
  --header-h: 4rem;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--yellow);
  border-radius: 6px;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: var(--cream); padding: .75rem 1.25rem;
  border-radius: var(--radius-full); font-weight: 700; text-decoration: none;
  transition: top .2s var(--out);
}
.skip:focus { top: 1rem; }

/* ---------- Shared bits ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  font-size: clamp(2.1rem, 7.4vw, 4.6rem);
  text-wrap: balance;
}
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.kicker span {
  display: inline-grid; place-items: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 .4rem;
  border: 2.5px solid currentColor; border-radius: var(--radius-full);
  font-size: .72rem; letter-spacing: .02em;
}
.section { position: relative; padding-block: clamp(4rem, 10vw, 7.5rem); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 46rem; }
.section-head__sub { margin-top: var(--space-4); font-size: 1.125rem; color: var(--color-text-muted); max-width: 38rem; }
.section-head--light { color: var(--cream); }
.section-head--light .section-head__sub { color: rgba(255, 247, 234, .78); }
.section-head--split { max-width: none; }
@media (min-width: 900px) {
  .section-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: var(--space-12); align-items: end; }
  .section-head--split .section-head__sub { margin: 0 0 .4rem; justify-self: end; max-width: 26rem; }
}
.section-head--row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: end; justify-content: space-between; max-width: none; }

.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem; border-radius: var(--radius-full);
  font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.chip--navy { background: var(--navy); color: var(--cream); }
.chip .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 210, 63, .25); }

/* ---------- Buttons: chunky, hard shadow, springy press ---------- */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--navy);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 3px solid var(--navy); border-radius: var(--radius-full);
  box-shadow: var(--hard-md);
  font-family: var(--font-body); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .45s var(--spring), box-shadow .45s var(--spring), background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--navy); }
.btn:active { transform: translate(5px, 5px) scale(.97); box-shadow: 0 0 0 var(--navy); transition-duration: .08s; }
.btn__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.btn--coral { --btn-bg: var(--coral); }
.btn--yellow { --btn-bg: var(--yellow); }
.btn--cream { --btn-bg: var(--cream); }
.btn--navy { --btn-bg: var(--navy); --btn-fg: var(--cream); box-shadow: 4px 4px 0 var(--coral); border-color: var(--navy); }
.btn--navy:hover { box-shadow: 6px 6px 0 var(--coral); }
.btn--sm { min-height: 2.75rem; padding: .55rem 1.15rem; font-size: .9rem; box-shadow: var(--hard-sm); }
.btn--lg { min-height: 3.75rem; padding: 1rem 1.9rem; font-size: 1.08rem; }

/* Resting tilt for anything that pops in */
.pop { transform: rotate(var(--r, 0deg)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--turq);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 3px 0 var(--navy); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo__mark {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  background: var(--yellow); border: 3px solid var(--navy); border-radius: .8rem;
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1; padding-top: .1rem;
  box-shadow: var(--hard-sm); transform: rotate(-6deg);
  transition: transform .5s var(--spring);
}
.logo:hover .logo__mark { transform: rotate(6deg) scale(1.08); }
.logo__word { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .01em; }

.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); width: 100%; justify-content: space-between; padding-bottom: .75rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-nav ul a {
  display: inline-block; padding: .45rem .1rem; font-weight: 700; font-size: .95rem; text-decoration: none;
  background: linear-gradient(var(--navy), var(--navy)) left 85% / 0 3px no-repeat;
  transition: background-size .3s var(--out);
}
.site-nav ul a:hover { background-size: 100% 3px; }

/* JS-enhanced mobile menu */
.js .nav-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .4rem 1rem .4rem .8rem;
  background: var(--cream); border: 3px solid var(--navy); border-radius: var(--radius-full);
  box-shadow: var(--hard-sm); font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .4s var(--spring);
}
.js .nav-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 1.1rem; height: 3px; background: var(--navy); border-radius: 3px; position: relative;
  transition: transform .35s var(--spring), opacity .2s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.js .site-nav {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .5rem);
  flex-direction: column; align-items: stretch; gap: var(--space-4); width: auto;
  padding: var(--space-6); background: var(--cream); border: 3px solid var(--navy); border-radius: var(--radius-lg);
  box-shadow: var(--hard-lg);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97); transform-origin: top right;
  transition: opacity .2s ease, transform .4s var(--spring), visibility 0s linear .2s;
}
.js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; box-shadow: var(--hard-lg), 0 0 0 100vmax rgba(14, 26, 60, .45); }
.js .site-nav ul { flex-direction: column; gap: 0; }
.js .site-nav ul a { display: block; padding: .7rem 0; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; border-bottom: 2px dashed var(--color-border-subtle); background: none; }
.js .site-nav .btn { width: 100%; }

@media (min-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-nav, .js .site-nav {
    position: static; flex-direction: row; align-items: center; width: auto; padding: 0;
    background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; gap: var(--space-8);
  }
  .js .nav-toggle { display: none; }
  .js .site-nav ul { flex-direction: row; gap: 1.5rem; }
  .js .site-nav ul a { display: inline-block; padding: .45rem .1rem; font-family: var(--font-body); font-size: .95rem; text-transform: none; border: 0;
    background: linear-gradient(var(--navy), var(--navy)) left 85% / 0 3px no-repeat; }
  .js .site-nav ul a:hover { background-size: 100% 3px; }
  .js .site-nav .btn { width: auto; }
  :root { --header-h: 4.75rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--turq);
  padding-top: var(--space-6);
  padding-bottom: clamp(7.5rem, 12vw, 10rem);
}
.hero__rays {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 72% 46%, rgba(255, 255, 255, .11) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask-image: radial-gradient(circle at 72% 46%, #000 0 35%, transparent 70%);
  mask-image: radial-gradient(circle at 72% 46%, #000 0 35%, transparent 70%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "copy" "stage";
  gap: var(--space-6);
}
.hero__title { grid-area: title; position: relative; margin-top: -.25rem; }
.hero__first {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 400;
  font-size: min(17rem, calc((100vw - 2 * var(--gutter)) / 4.12));
  line-height: .82; letter-spacing: -.02em;
}
.hero__first .l {
  display: inline-block;
  color: var(--cream);
  -webkit-text-stroke: .045em var(--navy);
  paint-order: stroke fill;
  text-shadow: .055em .055em 0 var(--navy);
  transform-origin: 50% 100%;
}
.hero__first .l:nth-child(2) { color: var(--yellow); }
.hero__first .l:nth-child(3) { color: var(--coral); }
.hero__first .l:nth-child(4) { color: var(--yellow); }
.hero__last {
  position: relative; z-index: 2;
  display: inline-block; margin-top: -.15em; margin-left: .2em;
  padding: .12em .5em .1em;
  background: var(--navy); color: var(--cream);
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 7.6vw, 4.25rem); line-height: 1; letter-spacing: .06em;
  border-radius: .3em; transform: rotate(-3deg);
  box-shadow: .09em .09em 0 var(--coral);
}

/* Letters bounce in one by one */
@keyframes letter-drop {
  0% { transform: translateY(-120%) scaleY(1.15); opacity: 0; }
  45% { transform: translateY(6%) scaleY(.82) scaleX(1.08); opacity: 1; }
  62% { transform: translateY(-12%) scaleY(1.05); }
  78% { transform: translateY(2%) scaleY(.96); }
  100% { transform: none; opacity: 1; }
}
@keyframes label-slap {
  0% { transform: rotate(-14deg) scale(1.6); opacity: 0; }
  60% { transform: rotate(-1deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}
.hero__first .l { animation: letter-drop .9s var(--out) both; animation-delay: calc(.12s + var(--i) * .09s); }
.hero__last { animation: label-slap .6s var(--spring) .75s both; }

.hero__copy { grid-area: copy; position: relative; z-index: 3; max-width: 34rem; }
.hero__lede { font-size: clamp(1.1rem, 2.6vw, 1.3rem); font-weight: 500; line-height: 1.45; max-width: 30rem; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.hero__ctas .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .hero__ctas .btn { flex: 0 0 auto; } }

/* Stage with sticker photos */
.hero__stage {
  grid-area: stage; position: relative; z-index: 2;
  width: min(100%, 30rem); margin-inline: auto; margin-top: var(--space-4);
  aspect-ratio: 1 / 1.12;
}
.sticker-photo {
  position: absolute;
  background: var(--white);
  padding: clamp(.45rem, 1.4vw, .7rem);
  border-radius: 1.6rem;
  box-shadow: var(--sticker-shadow), var(--hard-lg);
}
.sticker-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.1rem; }
.sticker-photo picture { width: 100%; height: 100%; }
.sticker-photo--hero { left: 8%; top: 4%; width: 74%; aspect-ratio: 4 / 5; transform: rotate(-3.5deg); }
.sticker-photo--surf { right: 0; bottom: 0; width: 40%; aspect-ratio: 1; transform: rotate(7deg); border-radius: 50%; padding: clamp(.4rem, 1.2vw, .6rem); }
.sticker-photo--surf img { border-radius: 50%; }

/* Starburst */
.starburst {
  position: absolute; z-index: 5; display: grid; place-items: center;
  width: clamp(6rem, 22vw, 8.5rem); aspect-ratio: 1;
  color: var(--navy); text-decoration: none;
  filter: drop-shadow(4px 4px 0 var(--navy));
  transition: transform .5s var(--spring);
}
.starburst svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin-slow 22s linear infinite; }
.starburst polygon { fill: var(--yellow); stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; }
.starburst__text {
  position: relative; font-family: var(--font-display); text-transform: uppercase; text-align: center;
  font-size: clamp(1rem, 3.6vw, 1.35rem); line-height: .92; transform: rotate(-10deg);
}
.hero__stage .starburst { right: -4%; top: 26%; }
.drag--age { --x: -4%; --y: 1%; }
.drag--photo { --x: 74%; --y: -6%; }
.drag--heart { --x: -7%; --y: 40%; }
.drag--pill { --x: 30%; --y: 91%; }
@media (min-width: 1024px) {
  .hero__stage .starburst { right: -6%; top: -5%; }
  .drag--age { --x: -6%; --y: 6%; }
  .drag--photo { --x: -104%; --y: 70%; }
  .drag--heart { --x: 82%; --y: 42%; }
  .drag--pill { --x: -60%; --y: 84%; }
}
.starburst:hover { transform: scale(1.1) rotate(8deg); }
.starburst:active { transform: scale(.94); }
.starburst:focus-visible { border-radius: 50%; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Circular scroll-linked badge */
.badge-spin {
  position: absolute; z-index: 4; left: -3%; bottom: 6%;
  width: clamp(6.5rem, 26vw, 9.5rem); aspect-ratio: 1;
  filter: drop-shadow(4px 4px 0 var(--navy));
}
.badge-spin__ring { width: 100%; height: 100%; transform: rotate(var(--spin, 0deg)); will-change: transform; }
.badge-spin__bg { fill: var(--navy); }
.badge-spin text { fill: var(--cream); font-family: var(--font-display); font-size: 19.5px; letter-spacing: 1.5px; }
.badge-spin__core { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); color: var(--yellow); }

/* Draggable stickers */
.drag {
  position: absolute; z-index: 6; left: var(--x, 0); top: var(--y, 0);
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.drag.is-dragging { cursor: grabbing; z-index: 20; }
.drag__body {
  --rot: -8deg;
  transform: rotate(var(--rot));
  transition: transform .5s var(--spring), filter .3s ease;
  filter: drop-shadow(0 8px 10px rgba(14, 26, 60, .28));
}
.drag.is-dragging .drag__body { transform: rotate(calc(var(--rot) * -.5)) scale(1.12); filter: drop-shadow(0 18px 18px rgba(14, 26, 60, .32)); }
.drag__body--age {
  display: grid; place-items: center; width: 4.6rem; aspect-ratio: 1;
  background: var(--coral); color: var(--navy); border: 5px solid var(--white); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.9rem; line-height: .8; text-align: center;
  box-shadow: inset 0 0 0 2.5px var(--navy);
}
.drag__body--age span { display: block; font-family: var(--font-body); font-weight: 800; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: -.4rem; }
.drag__body--heart { --rot: 10deg; position: relative; width: 6.4rem; }
.drag__body--heart svg { width: 100%; }
.drag__body--heart path { fill: var(--turq); stroke: var(--white); stroke-width: 7; paint-order: stroke; }
.drag__body--heart span { position: absolute; inset: 22% 0 auto; text-align: center; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; color: var(--navy); }
.drag__body--heart b { font-family: var(--font-display); font-weight: 400; font-size: .78rem; letter-spacing: 0; }
.drag__body--pill {
  --rot: -12deg;
  padding: .55rem 1rem; background: var(--yellow); color: var(--navy);
  border: 4px solid var(--white); border-radius: var(--radius-full);
  font-family: var(--font-display); font-size: .95rem; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--navy);
}
.drag__body--photo { --rot: 9deg; width: 5.6rem; aspect-ratio: 1; padding: 5px; background: var(--white); border-radius: 50%; }
.drag__body--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.drag-hint {
  position: absolute; left: 50%; bottom: -2.75rem; transform: translateX(-50%) rotate(-2deg);
  font-weight: 700; font-size: .8rem; letter-spacing: .06em; white-space: nowrap; opacity: .8;
}
.drag-hint::before { content: "↖ "; }
html:not(.js) .drag-hint { display: none; }

/* Idle bob for stickers (inner wrapper only) */
@keyframes bob { 50% { translate: 0 -6px; } }
.drag__body { animation: bob 4s ease-in-out infinite; }
.drag:nth-of-type(2n) .drag__body { animation-duration: 5s; animation-delay: -1.5s; }
.drag.is-dragging .drag__body { animation-play-state: paused; }

/* Waves at the base of the hero */
.hero__waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(3.5rem, 8vw, 7rem); z-index: 1; }
.hero__waves .w1 { fill: var(--yellow); }
.hero__waves .w2 { fill: var(--coral); }
.hero__waves .w3 { fill: var(--cream); }

@media (min-width: 640px) {
  .hero__stage { width: min(100%, 32rem); }
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--space-8); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "title title" "copy stage";
    column-gap: var(--space-12); row-gap: var(--space-4);
  }
  .hero__copy { align-self: start; padding-top: var(--space-8); }
  .hero__stage { margin-top: -9.5rem; margin-right: 0; width: 100%; max-width: 31rem; justify-self: end; }
  .hero__last { margin-left: .35em; }
  .drag-hint { left: 30%; bottom: -2.25rem; }
}

/* ---------- Ticker ---------- */
.ticker { position: relative; z-index: 3; overflow-x: clip; height: clamp(8rem, 15vw, 10.5rem); margin-top: -3rem; margin-bottom: -2rem; pointer-events: none; }
.ticker__band {
  position: absolute; left: -5%; right: -5%; top: 50%;
  border-block: 3px solid var(--navy);
  overflow: hidden; white-space: nowrap;
}
.ticker__band--a { top: 40%; background: var(--yellow); transform: translateY(-50%) rotate(-3deg); z-index: 2; box-shadow: 0 6px 0 var(--navy); }
.ticker__band--b { top: 70%; background: var(--navy); color: var(--turq-light); transform: translateY(-50%) rotate(2.2deg); }
.ticker__track {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-block: .75rem;
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.2rem, 3.2vw, 1.9rem); line-height: 1;
  animation: ticker 38s linear infinite;
}
.ticker__band--b .ticker__track { font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; font-size: clamp(.8rem, 1.6vw, 1rem); padding-block: .6rem; }
.ticker__track i { font-style: normal; color: var(--coral); }
.ticker__band--b .ticker__track i { color: var(--yellow); font-size: .6em; }
.ticker__track--rev { animation-direction: reverse; animation-duration: 46s; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Lookbook ---------- */
.lookbook { background: var(--cream); padding-top: clamp(4rem, 9vw, 6.5rem); }
.lookbook .display span { color: var(--turq-deep); }
.gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 2vw, 1.5rem);
  grid-auto-flow: dense;
}
.gallery__item { position: relative; transform: rotate(var(--r, 0deg)); }
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.shot {
  position: relative; display: block; width: 100%; height: 100%; padding: clamp(.35rem, 1vw, .55rem);
  background: var(--white); border: 0; border-radius: 1.1rem; cursor: zoom-in;
  box-shadow: var(--sticker-shadow);
  transition: transform .45s var(--spring), box-shadow .3s ease;
}
.shot picture { width: 100%; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .75rem; }
.gallery__item--feature .shot picture, .gallery__item--wide .shot picture { aspect-ratio: auto; }
.gallery__item--wide .shot picture { aspect-ratio: 8 / 5; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--out); }
.shot:hover { transform: translateY(-4px) rotate(calc(var(--r, 0deg) * -1.5)) scale(1.02); box-shadow: var(--sticker-shadow), var(--hard-md); z-index: 2; }
.shot:hover img { transform: scale(1.05); }
.shot:focus-visible { outline-offset: 4px; border-radius: 1.1rem; }
.tag {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  background: var(--turq); color: var(--navy); border: 2.5px solid var(--navy);
  font-weight: 800; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--navy);
}
.tag--yellow { background: var(--yellow); }
.tag--coral { background: var(--coral); }

@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery__item--feature .shot picture { position: absolute; inset: clamp(.35rem, 1vw, .55rem); width: auto; height: auto; }
  .gallery__item--wide .shot picture { position: absolute; inset: clamp(.35rem, 1vw, .55rem); width: auto; height: auto; aspect-ratio: auto; }
  .gallery__item--feature .shot, .gallery__item--wide .shot { min-height: 100%; }
}

/* ---------- Pop and wobble reveal ---------- */
@keyframes pop-wobble {
  0% { opacity: 0; transform: translateY(40px) scale(.7) rotate(calc(var(--r, 0deg) - 10deg)); }
  50% { opacity: 1; transform: translateY(-6px) scale(1.05) rotate(calc(var(--r, 0deg) + 4deg)); }
  70% { transform: translateY(2px) scale(.98) rotate(calc(var(--r, 0deg) - 2deg)); }
  85% { transform: scale(1.01) rotate(calc(var(--r, 0deg) + .8deg)); }
  100% { opacity: 1; transform: rotate(var(--r, 0deg)); }
}
.js .pop { opacity: 0; }
.js .pop.is-in { animation: pop-wobble .85s var(--out) both; animation-delay: var(--d, 0s); }

/* ---------- Brands ---------- */
.brands { background: var(--navy); color: var(--cream); overflow: hidden; }
.brands::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14c15 0 15-9 30-9s15 9 30 9 15-9 30-9 15 9 30 9' fill='none' stroke='%231CC7C1' stroke-opacity='.22' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 120px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
.brands .wrap { position: relative; }
.brands .kicker { color: var(--turq); }
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.brand {
  --bg: var(--cream);
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(5.5rem, 12vw, 8rem); padding: 1rem 2rem;
  background: var(--bg); color: var(--navy);
  border: 4px solid var(--white); outline: 2.5px solid var(--navy); outline-offset: -6px;
  border-radius: 1.4rem;
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(.95rem, 2.4vw, 1.35rem); line-height: 1.05;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s var(--spring), box-shadow .3s ease;
}
.brand--yellow { --bg: var(--yellow); }
.brand--coral { --bg: var(--coral); }
.brand--turq { --bg: var(--turq); }
.brand__arrow {
  position: absolute; top: .55rem; right: .7rem; font-family: var(--font-body); font-weight: 800; font-size: .95rem;
  transition: transform .35s var(--spring);
}
.brand:hover { transform: rotate(calc(var(--r, 0deg) * -1)) scale(1.06); box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); }
.brand:hover .brand__arrow { transform: translate(3px, -3px); }
.brand:active { transform: scale(.96); transition-duration: .1s; }
.brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; box-shadow: none; }
@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Comp card ---------- */
.comp {
  background-color: var(--turq);
  background-image:
    conic-gradient(var(--turq-deep) 25%, transparent 0 50%, var(--turq-deep) 0 75%, transparent 0);
  background-size: 64px 64px;
}
.comp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 45%, var(--turq) 0 35%, transparent 70%);
}
.comp__inner { position: relative; display: grid; gap: var(--space-12); align-items: center; }
.comp__copy { max-width: 32rem; }
.comp__copy .section-head { margin-bottom: var(--space-6); }
.comp__lede { font-size: 1.15rem; font-weight: 500; }
.note {
  display: flex; gap: .7rem; align-items: flex-start; margin-top: var(--space-6);
  padding: 1rem 1.15rem; background: var(--cream); border: 3px solid var(--navy); border-radius: var(--radius-md);
  box-shadow: var(--hard-sm); font-weight: 600; font-size: .98rem; line-height: 1.45;
}
.note svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--coral); margin-top: .05rem; }
.flip-btn { margin-top: var(--space-6); }

.tcard-wrap { display: grid; place-items: center; perspective: 1600px; padding-block: var(--space-4); }
.tcard {
  position: relative; width: min(21.5rem, 100%); aspect-ratio: 5 / 7; cursor: pointer;
  border-radius: 1.6rem; outline: none;
}
.tcard:focus-visible { box-shadow: 0 0 0 4px var(--turq), 0 0 0 8px var(--navy); }
.tcard__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .9s var(--spring);
  transform: rotate(-3deg);
}
.tcard.is-flipped .tcard__inner { transform: rotateY(180deg) rotate(3deg); }
@media (hover: hover) {
  .tcard:hover .tcard__inner { transform: rotateY(180deg) rotate(3deg); }
}
.tcard:focus-visible .tcard__inner { transform: rotateY(180deg) rotate(3deg); }
.tcard__face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: .9rem; border-radius: 1.6rem;
  border: 6px solid var(--white); box-shadow: var(--sticker-shadow), 10px 10px 0 var(--navy);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden;
}
.tcard__front {
  background:
    repeating-linear-gradient(-45deg, rgba(14, 26, 60, .08) 0 10px, transparent 10px 20px),
    var(--yellow);
}
.tcard__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.tcard__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.32rem; line-height: 1; }
.tcard__age {
  display: grid; place-items: center; flex: none; width: 3.1rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--coral); border: 3px solid var(--navy); font-family: var(--font-display); font-size: 1.3rem; line-height: .8;
}
.tcard__age small { font-family: var(--font-body); font-weight: 800; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: -.5rem; }
.tcard__photo { position: relative; flex: 1; min-height: 0; border: 3px solid var(--navy); border-radius: 1rem; overflow: hidden; background: var(--turq); }
.tcard__photo picture, .tcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.tcard__holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .7;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .85) 38%, rgba(28, 199, 193, .7) 46%, rgba(255, 92, 122, .6) 54%, transparent 70%);
  background-size: 250% 250%; background-position: var(--hx, 100%) var(--hy, 100%);
  transition: background-position .2s ease;
}
.tcard__foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .7rem; padding: .5rem .8rem; background: var(--navy); color: var(--cream); border-radius: var(--radius-full); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.tcard__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 100% 0, rgba(28, 199, 193, .35), transparent 50%),
    var(--navy);
  color: var(--cream); padding: 1.25rem 1.3rem;
}
.tcard__back-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2rem; line-height: 1; color: var(--yellow); margin-bottom: .6rem; }
.stats { display: grid; gap: 0; }
.stats div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem; padding: .48rem 0; border-bottom: 2px dashed rgba(255, 247, 234, .2); font-size: .9rem; line-height: 1.3; }
.stats dt { font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--turq); padding-top: .15rem; }
.stats dd { font-weight: 600; }
.tcard__back-foot { margin-top: auto; padding-top: .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }

@media (min-width: 900px) {
  .comp__inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .tcard { width: 22.5rem; }
}

/* ---------- About ---------- */
.about { background: var(--cream); }
.about__inner { display: grid; gap: var(--space-16); align-items: center; }
.about__media { position: relative; width: min(100%, 26rem); margin-inline: auto; aspect-ratio: 1 / 1.1; }
.sticker-photo--about { position: absolute; left: 0; top: 0; width: 78%; aspect-ratio: 4 / 5; }
.sticker-photo--about2 { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; border-radius: 1.2rem; }
.sticker-photo--about2 img { border-radius: .8rem; }
.about__copy { max-width: 36rem; }
.about__copy .section-head { margin-bottom: var(--space-6); }
.about__copy .display { color: var(--navy); }
.about__big { font-size: clamp(1.25rem, 2.8vw, 1.6rem); font-weight: 600; line-height: 1.35; margin-bottom: var(--space-4); text-wrap: pretty; }
.about__copy > p:not(.about__big) { font-size: 1.08rem; color: var(--color-text-muted); max-width: 62ch; }
.facts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-8); }
.facts li {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .55rem;
  background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-full); box-shadow: var(--hard-sm);
  font-weight: 700;
}
.facts__k { padding: .2rem .6rem; border-radius: var(--radius-full); background: var(--turq); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.facts li:nth-child(2) .facts__k { background: var(--yellow); }
.facts li:nth-child(3) .facts__k { background: var(--coral); }
@media (min-width: 900px) {
  .about__inner { grid-template-columns: 1fr 1.05fr; gap: var(--space-16); }
  .about__media { width: 100%; max-width: 30rem; }
}

/* ---------- Videos ---------- */
.videos { background: var(--yellow); overflow: hidden; }
.videos::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: conic-gradient(var(--navy) 25%, transparent 0 50%, var(--navy) 0 75%, transparent 0) 0 0 / 22px 22px;
}
.video-grid { display: none; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.js .video-grid { display: grid; }
.js .video-grid[hidden] { display: none; }
.vcard {
  display: block; padding: .6rem .6rem 1rem; background: var(--white); border: 3px solid var(--navy); border-radius: 1.25rem;
  box-shadow: var(--hard-md); text-decoration: none; color: var(--navy);
  transition: transform .45s var(--spring), box-shadow .3s ease;
}
a.vcard:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--navy); }
a.vcard:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--navy); }
.vcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .8rem; overflow: hidden; background: var(--turq-light); }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcard__play { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--coral); border: 3px solid var(--navy); border-radius: 50%; }
.vcard__title { display: block; margin: .9rem .4rem 0; font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.vcard__date { display: block; margin: .25rem .4rem 0; font-size: .85rem; color: var(--color-text-muted); font-weight: 600; }
.sk { display: block; height: .9rem; margin: .9rem .4rem 0; border-radius: var(--radius-full); background: rgba(14, 26, 60, .1); }
.sk--short { width: 45%; margin-top: .55rem; }
.vcard--skeleton .vcard__thumb, .vcard--skeleton .sk {
  background: linear-gradient(100deg, rgba(14, 26, 60, .08) 30%, rgba(14, 26, 60, .16) 50%, rgba(14, 26, 60, .08) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
.video-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--cream); border: 3px solid var(--navy); border-radius: var(--radius-lg);
  box-shadow: var(--hard-lg);
}
.js .video-empty { display: none; }
.js .video-empty.is-shown { display: flex; }
.video-empty p { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; line-height: 1.35; max-width: 34rem; }
.video-empty__badge { width: 3.5rem; color: var(--coral); transform: rotate(-8deg); }
.teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 3vw, 2rem); }
.js .teaser { display: none; }
.js .teaser.is-shown { display: grid; }
.teaser__tile {
  position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden;
  border: 3px dashed var(--navy); background: var(--turq-light);
}
.teaser__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.35) contrast(.95); opacity: .75; }
.teaser__tile::after {
  content: "Soon"; position: absolute; right: .6rem; top: .6rem;
  padding: .2rem .6rem; border-radius: var(--radius-full); background: var(--navy); color: var(--yellow);
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; transform: rotate(6deg);
}
.teaser__play { position: absolute; left: 50%; top: 50%; width: clamp(2.2rem, 5vw, 3.5rem); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--cream); border: 3px solid var(--navy); border-radius: 50%; box-shadow: 3px 3px 0 var(--navy); }
.teaser__play svg { width: 40%; margin-left: 8%; }
@media (max-width: 639px) { .teaser__tile:nth-child(3) { display: none; } .teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teaser__tile::after { font-size: .6rem; } }
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-empty { flex-direction: row; align-items: center; gap: var(--space-8); }
  .video-empty p { flex: 1; max-width: none; }
}

/* ---------- Book ---------- */
.book { background: var(--coral); overflow: hidden; }
.book__checker {
  position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background: conic-gradient(var(--navy) 25%, transparent 0 50%, var(--navy) 0 75%, transparent 0) 0 0 / 80px 80px;
}
.book__panel {
  position: relative; max-width: 56rem; margin-inline: auto; text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--cream); border: 4px solid var(--navy); border-radius: 2rem;
  box-shadow: 12px 12px 0 var(--navy);
}
.book__title { font-size: clamp(2.2rem, 7vw, 4.8rem); }
.book__title::after { content: ""; display: block; width: 7rem; height: 14px; margin: 1.1rem auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7c5 0 5-5 10-5s5 5 10 5 5-5 10-5 5 5 10 5' fill='none' stroke='%231CC7C1' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 14px; }
.book__lede { margin: var(--space-6) auto 0; max-width: 34rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 500; }
.book__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.book__small { margin-top: var(--space-6); font-size: .92rem; color: var(--color-text-muted); font-weight: 500; }
.starburst--book { right: -1.25rem; top: -2.5rem; width: clamp(5.5rem, 16vw, 8rem); }
.starburst--book polygon { fill: var(--turq); }
.book .kicker { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--cream); padding-block: var(--space-12) var(--space-8); overflow: hidden; }
.site-footer__mark {
  font-family: var(--font-display); font-size: clamp(4.5rem, 24vw, 19rem); line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(28, 199, 193, .55); text-align: center; margin-bottom: var(--space-8);
  user-select: none;
}
.site-footer__row { display: flex; flex-direction: column; gap: var(--space-3); border-top: 2px solid rgba(255, 247, 234, .15); padding-top: var(--space-6); font-size: .92rem; }
.site-footer a { color: var(--turq); font-weight: 700; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--yellow); }
@media (min-width: 768px) { .site-footer__row { flex-direction: row; justify-content: space-between; } }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(14, 26, 60, .94); color: var(--cream);
}
.lightbox::backdrop { background: rgba(14, 26, 60, .7); }
.lightbox[open] { display: grid; place-items: center; animation: fade-in .25s ease; }
.lightbox__frame {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  max-width: min(92vw, 60rem); padding: 4.5rem 0 5.5rem;
}
.lightbox__img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 11rem);
  background: var(--white); padding: .5rem; border-radius: 1.25rem; box-shadow: 10px 10px 0 var(--turq);
  animation: lb-pop .5s var(--spring);
}
.lightbox__img.is-swap { animation: lb-pop .5s var(--spring); }
.lightbox__cap { font-weight: 600; text-align: center; max-width: 40rem; }
.lightbox__count { display: inline-block; margin-right: .5rem; padding: .15rem .6rem; border-radius: var(--radius-full); background: var(--yellow); color: var(--navy); font-weight: 800; font-size: .78rem; letter-spacing: .08em; }
.lb-btn {
  position: fixed; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  background: var(--cream); color: var(--navy); border: 3px solid var(--navy); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--turq); font-size: 1.3rem; font-weight: 800; cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .4s var(--spring);
}
.lb-btn:hover { transform: scale(1.08); }
.lb-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--turq); }
.lb-btn--close { top: 1rem; right: 1rem; background: var(--coral); }
.lb-btn--prev { left: 1rem; bottom: 1.25rem; }
.lb-btn--next { right: 1rem; bottom: 1.25rem; }
@media (min-width: 900px) {
  .lb-btn--prev, .lb-btn--next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lb-btn--prev:hover, .lb-btn--next:hover { transform: translateY(-50%) scale(1.08); }
  .lb-btn--prev { left: 1.5rem; }
  .lb-btn--next { right: 1.5rem; }
  .lightbox__frame { padding: 3rem 0 2.5rem; }
  .lightbox__img { max-height: calc(100dvh - 8rem); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes lb-pop { 0% { transform: scale(.85) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
html.lb-open { overflow: hidden; }

/* ---------- Sparkle trail ---------- */
.sparkle {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: var(--s, 12px); height: var(--s, 12px); background: var(--c, var(--yellow));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle .75s ease-out forwards;
}
@keyframes sparkle {
  0% { transform: translate(var(--px), var(--py)) scale(0) rotate(0); opacity: 1; }
  30% { transform: translate(var(--px), var(--py)) scale(1) rotate(45deg); opacity: 1; }
  100% { transform: translate(calc(var(--px) + var(--vx)), calc(var(--py) + var(--vy))) scale(.2) rotate(140deg); opacity: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .pop { opacity: 1; }
  .ticker__track, .starburst svg, .drag__body { animation: none !important; }
  .tcard__inner { transition: none !important; }
  /* Swap faces without 3D rotation */
  .tcard .tcard__inner, .tcard.is-flipped .tcard__inner, .tcard:hover .tcard__inner, .tcard:focus-visible .tcard__inner { transform: none; }
  .tcard__back { transform: none; opacity: 0; }
  .tcard.is-flipped .tcard__back, .tcard:focus-visible .tcard__back { opacity: 1; }
  .tcard.is-flipped .tcard__front, .tcard:focus-visible .tcard__front { opacity: 0; }
  .sparkle { display: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .tcard:hover .tcard__back { opacity: 1; }
  .tcard:hover .tcard__front { opacity: 0; }
}

/* ==========================================================================
   Inner pages (production site)
   ========================================================================== */
.site-nav ul a[aria-current="page"] { background-size: 100% 3px; }

.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--turq);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(6.5rem, 11vw, 8.5rem);
}
.page-hero .hero__rays { -webkit-mask-image: radial-gradient(circle at 80% 40%, #000 0 30%, transparent 65%); mask-image: radial-gradient(circle at 80% 40%, #000 0 30%, transparent 65%); }
.page-hero__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .page-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.page-hero__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: .92; letter-spacing: -.01em;
  color: var(--cream); -webkit-text-stroke: .04em var(--navy); paint-order: stroke fill;
  text-shadow: .05em .05em 0 var(--navy); margin: var(--space-4) 0 var(--space-6);
  text-wrap: balance;
}
.page-hero__lede { font-size: clamp(1.08rem, 1.8vw, 1.3rem); max-width: 38rem; color: var(--navy); font-weight: 500; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.page-hero__photo { justify-self: center; width: min(78vw, 20rem); transform: rotate(3deg); }
.page-hero__photo .sticker-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; }
.page-hero .hero__waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(3.5rem, 7vw, 6rem); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.crumbs a { color: var(--navy); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .2s var(--out); }
.crumbs a:hover { background-size: 100% 2px; }
.crumbs [aria-current] { opacity: .75; }

.gallery-group + .gallery-group { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.gallery-group__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1; margin-bottom: var(--space-3); }
.gallery-group__sub { color: var(--color-text-muted); margin-bottom: var(--space-8); max-width: 40rem; }

.more { display: flex; justify-content: center; margin-top: clamp(2.5rem, 6vw, 4rem); }

.prose { max-width: 44rem; font-size: 1.1rem; }
.prose h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.05; margin: var(--space-12) 0 var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-bottom: var(--space-4); }
.prose ul { padding-left: 1.2rem; list-style: disc; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--turq-deep); font-weight: 700; text-underline-offset: 3px; }

.faq { max-width: 52rem; display: grid; gap: var(--space-4); }
.faq details {
  background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-md);
  box-shadow: var(--hard-md); transition: transform .3s var(--spring), box-shadow .3s ease;
}
.faq details[open] { box-shadow: var(--hard-lg); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 1.1rem 1.35rem; font-weight: 800; font-size: 1.1rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--yellow); border: 2.5px solid var(--navy); font-family: var(--font-display); font-size: 1.1rem; line-height: 1;
  transition: transform .3s var(--spring), background-color .2s ease;
}
.faq details[open] summary::after { content: "\2013"; background: var(--turq); transform: rotate(180deg); }
.faq details p { padding: 0 1.35rem 1.25rem; margin: 0; color: var(--color-text-muted); font-size: 1.05rem; }
.faq details a { color: var(--turq-deep); font-weight: 700; }

.site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0 0 var(--space-8); }
.site-footer__nav a { color: var(--cream); text-decoration: none; font-weight: 700; }
.site-footer__nav a:hover { color: var(--yellow); }

.notfound { text-align: center; }
.notfound .page-hero__inner { grid-template-columns: 1fr; justify-items: center; }
.notfound .page-hero__ctas { justify-content: center; }