/* ════════════════════════════════════════════════════════════
   NINJA SQUIRREL DESIGNS — avery updike
   Structure after spencergabor.work · palette after
   jackiezhang.co.za. Featured = real published sites.
   More Work = sixteen homages to real, famous design systems,
   rebuilt by hand with fictional brands.
   ════════════════════════════════════════════════════════════ */

/* ── Type ───────────────────────────────────────────────────── */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('../fonts/oswald.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/caveat.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plexmono-400.woff2') format('woff2'); }

/* ── Palettes ───────────────────────────────────────────────── */
:root {
  --paper:  #211D1A;
  --ink:    #F3E5CF;
  --ghost:  #3D3630;
  --grey:   #A5937D;
  --accent: #E04E39;
  --tile:   #F3E5CF;
  --shadowc:#E04E39;
  --line:   rgba(243, 229, 207, .14);
  --soft-sh: 0 12px 30px rgba(0, 0, 0, .35);

  --f-disp: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body: 'Poppins', 'Segoe UI', sans-serif;
  --pad: clamp(20px, 4vw, 64px);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
}
:root[data-palette="paper"] {
  --paper: #F6EBD9; --ink: #2A2119; --ghost: #DFD0B8; --grey: #9C8A73;
  --accent: #D9442F; --tile: #FFFFFF; --shadowc: #D9442F;
  --line: rgba(42, 33, 25, .14); --soft-sh: 0 12px 30px rgba(42, 33, 25, .14);
}
:root[data-palette="grey"] {
  --paper: #F6F5F3; --ink: #232220; --ghost: #D6D4D0; --grey: #9C9994;
  --accent: #C22F37; --tile: #FFFFFF; --shadowc: #232220;
  --line: rgba(35, 34, 32, .12); --soft-sh: 0 12px 30px rgba(35, 34, 32, .12);
}
:root[data-palette="night"] {
  --paper: #1D1216; --ink: #F6E7E5; --ghost: #3E2A30; --grey: #A98A90;
  --accent: #FF6B62; --tile: #F6E7E5; --shadowc: #FF6B62;
  --line: rgba(246, 231, 229, .14); --soft-sh: 0 12px 30px rgba(0, 0, 0, .4);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--f-body);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  text-align: center;
  transition: background-color .4s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip {
  position: fixed; top: -100px; left: 24px; z-index: 90;
  padding: 10px 18px; background: var(--accent); color: var(--paper);
  border-radius: 999px; text-decoration: none; transition: top .2s ease;
}
.skip:focus-visible { top: 12px; }

.micro {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.micro-dim { color: var(--grey); }
.micro a { text-decoration: none; transition: color .2s ease; }
.micro a:hover { color: var(--accent); }

/* ── Main above the curtain ─────────────────────────────────── */
main {
  position: relative;
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
  margin-bottom: var(--footer-h, 70svh);
  transition: background-color .4s ease;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px var(--pad) 40px;
}
.hero-top { display: flex; flex-direction: column; gap: 4px; }
.mega {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(3rem, 9.5vw, 8rem);
  line-height: 1;
  color: var(--ink);
  margin-top: clamp(36px, 7vh, 80px);
  text-wrap: balance;
}
.hero-mid { display: flex; flex-direction: column; align-items: center; }
.hero-images { display: flex; gap: clamp(14px, 2.4vw, 30px); margin-top: clamp(28px, 5vh, 56px); }
.hero-image {
  position: relative;
  width: clamp(84px, 11vw, 170px);
  aspect-ratio: 1;
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--spring), translate .35s var(--spring), scale .35s var(--spring);
}
.hero-image:nth-child(1) { --r: -4deg; }
.hero-image:nth-child(2) { --r: 2.5deg; }
.hero-image:nth-child(3) { --r: -2deg; }
.hero-image:nth-child(4) { --r: 3.5deg; }
.hero-image:hover { rotate: 0deg; translate: 0 -8px; scale: 1.07; z-index: 2; }
.hero-image .shadow {
  position: absolute; inset: 0; translate: 7px 9px;
  background: var(--shadowc); border-radius: 14px;
  transition: translate .35s var(--spring);
}
.hero-image:hover .shadow { translate: 11px 13px; }
.hero-image img {
  position: relative; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  border-radius: 14px; background: var(--tile); display: block;
}
.hero-image.hero-sticker img {
  object-fit: contain;
  padding: 17%;
}
.mega-ghost {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 7.6rem);
  line-height: .98;
  color: var(--ghost);
  margin-top: clamp(30px, 6vh, 70px);
  text-wrap: balance;
}
.hero-bot { margin-top: auto; padding-top: clamp(30px, 6vh, 60px); display: flex; flex-direction: column; gap: 4px; }

/* ── Sections ───────────────────────────────────────────────── */
.project-section { padding: clamp(100px, 16vh, 200px) 0 0; }
.text-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: clamp(36px, 6vh, 60px); padding: 0 var(--pad); }
.text-block-title {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.text-block-desc { color: var(--grey); font-size: .92rem; }

/* ── Rotating reel ──────────────────────────────────────────── */
.carousel { overflow: hidden; padding: 30px 0 46px; }
.carousel-track { display: flex; width: max-content; animation: reel 34s linear infinite; }
.carousel:hover .carousel-track { animation-play-state: paused; }
.carousel-half { display: flex; gap: clamp(22px, 3vw, 44px); padding-right: clamp(22px, 3vw, 44px); }
@keyframes reel { to { transform: translateX(-50%); } }
.carousel-slide { position: relative; width: clamp(300px, 34vw, 500px); flex: none; }
.carousel-slide img {
  width: 100%;
  aspect-ratio: 1440 / 1000;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  background: var(--tile);
  box-shadow: var(--soft-sh);
  display: block;
  transition: scale .35s var(--spring);
}
.carousel-slide:hover img { scale: 1.04; }
.pill {
  position: absolute;
  left: 50%;
  bottom: -14px;
  translate: -50% 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
  background: var(--accent);
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: var(--soft-sh);
}

/* ── Style grid ─────────────────────────────────────────────── */
.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  padding: 0 var(--pad);
  max-width: 1400px;
  margin: 0 auto;
}
.style-tile {
  position: relative;
  aspect-ratio: 400 / 560;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  rotate: var(--gr, 0deg);
  transition: rotate .35s var(--spring), translate .35s var(--spring);
}
.style-tile:nth-child(4n+1) { --gr: -1.6deg; }
.style-tile:nth-child(4n+2) { --gr: 1.2deg; }
.style-tile:nth-child(4n+3) { --gr: -.8deg; }
.style-tile:nth-child(4n+4) { --gr: 1.8deg; }
.style-tile:hover { rotate: 0deg; translate: 0 -6px; z-index: 2; }
.style-tile .shadow {
  position: absolute; inset: 0; translate: 6px 8px;
  background: var(--shadowc); border-radius: 16px;
  transition: translate .35s var(--spring);
}
.style-tile:hover .shadow { translate: 10px 12px; }

/* Fixed 400x560 canvas, scaled by JS via --s.
   RULE: every flex or grid container in a style page must be
   written as .style-page .classname so it outranks the reset. */
.style-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 560px;
  transform: scale(var(--s, 1));
  transform-origin: top left;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 26px;
  gap: 14px;
}
.style-page i, .style-page span { display: block; font-style: normal; }

/* shared atoms */
.style-page .sp-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; position: relative; z-index: 2; }
.style-page .sp-navlinks { display: flex; gap: 14px; }
.sp-navlinks i { font-size: 13px; font-weight: 600; opacity: .75; }
.sp-word { font-weight: 700; font-size: 21px; letter-spacing: .02em; }
.sp-mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .07em; }
.sp-cta { font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 99px; }
.sp-h1 { line-height: 1.06; position: relative; z-index: 2; }
.sp-sub { font-size: 14px; opacity: .8; position: relative; z-index: 2; }
.sp-btn { align-self: flex-start; font-size: 14px; font-weight: 600; padding: 9px 22px; border-radius: 99px; }
.style-page .sp-hero { display: flex; flex-direction: column; gap: 11px; position: relative; z-index: 2; }
.style-page .sp-foot { display: flex; justify-content: space-between; margin-top: auto; position: relative; z-index: 2; }
.sp-rule { height: 5px; background: currentColor; }
.sp-photo { object-fit: cover; display: block; }
.sp-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sp-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 14, .35), rgba(10, 10, 14, .7)); }

/* ── 1 · Fintech Classic ────────────────────────────────────── */
.sp-fin { background: #FFFFFF; color: #0A2540; font-family: 'Archivo', sans-serif; }
.fin-aurora {
  position: absolute; right: -120px; top: -60px; z-index: 0;
  width: 340px; height: 420px;
  background: linear-gradient(115deg, #FFD65C, #FF5C8A 45%, #7A73FF 80%);
  rotate: 24deg; border-radius: 60px;
  filter: blur(34px); opacity: .55;
}
.sp-fin .sp-word { font-size: 20px; font-weight: 800; }
.sp-fin .sp-cta { background: #635BFF; color: #FFFFFF; }
.fin-kicker { color: #425466; font-size: 9.5px; position: relative; z-index: 2; }
.sp-fin .sp-h1 { font-size: 30px; font-weight: 700; letter-spacing: -.015em; }
.sp-fin .sp-h1 em {
  display: block;
  background: linear-gradient(92deg, #635BFF, #FF5C8A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.style-page .fin-btns { display: flex; gap: 10px; position: relative; z-index: 2; }
.fin-btn1 { background: #635BFF; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 99px; }
.fin-btn2 { border: 1px solid #CBD3E1; color: #0A2540; font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 99px; }
.style-page .fin-card {
  position: relative; z-index: 2; margin-top: auto;
  background: #FFFFFF; border: 1px solid #E6EBF1; border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(50, 50, 93, .12);
  display: flex; flex-direction: column; gap: 9px;
}
.style-page .fin-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #425466; }
.fin-row b { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #0A2540; }
.style-page .fin-logos { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.fin-logos i { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8898AA; }

/* ── 2 · Quiet Dark Product ─────────────────────────────────── */
.sp-orbit { background: #0B0C0E; color: #F7F8F8; font-family: 'Archivo', sans-serif; }
.orbit-glow {
  position: absolute; left: 50%; top: -140px; translate: -50% 0; z-index: 0;
  width: 380px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 106, 210, .4), transparent 65%);
  filter: blur(20px);
}
.sp-orbit .sp-word { font-size: 18px; font-weight: 600; }
.sp-orbit .sp-navlinks i { color: #8A8F98; }
.sp-orbit .sp-cta { background: #F7F8F8; color: #0B0C0E; }
.sp-orbit .sp-h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 22px; }
.sp-orbit .sp-sub { color: #8A8F98; font-size: 13px; }
.style-page .orbit-app {
  margin-top: auto; position: relative; z-index: 2;
  display: flex; min-height: 0; flex: none;
  background: #101114; border: 1px solid #23252A; border-radius: 10px;
  overflow: hidden;
}
.style-page .orbit-side {
  width: 96px; flex: none;
  border-right: 1px solid #1B1D22;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0;
}
.orbit-side i { font-size: 11px; color: #9DA2AB; padding: 5px 12px; }
.orbit-side i.on { color: #F7F8F8; background: #17181C; }
.style-page .orbit-main { flex: 1; display: flex; flex-direction: column; }
.style-page .orbit-issue {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #C9CCD1;
  padding: 9px 12px; border-bottom: 1px solid #1B1D22;
}
.orbit-issue:last-child { border-bottom: none; }
.orbit-issue .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.d1 { background: #F2C94C; }
.dot.d2 { background: #5E6AD2; }
.dot.d3 { background: #4CB782; }
.orbit-issue b { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: #62666D; font-weight: 400; }

/* ── 3 · Apothecary Calm ────────────────────────────────────── */
.sp-apo { background: #FFFEF2; color: #333330; font-family: 'Fraunces', Georgia, serif; }
.apo-topline { height: 2px; background: #333330; flex: none; }
.sp-apo .sp-word { font-size: 18px; font-weight: 500; letter-spacing: .02em; }
.sp-apo .sp-navlinks i { font-family: var(--f-body); font-size: 12px; font-weight: 500; }
.apo-intro { font-size: 19px; line-height: 1.5; max-width: 92%; margin-top: 10px; font-weight: 400; }
.style-page .apo-product { display: flex; gap: 16px; margin-top: auto; }
.apo-product .sp-photo { width: 130px; height: 158px; flex: none; }
.style-page .apo-detail { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.apo-name { font-size: 16px; font-weight: 500; }
.apo-size { color: #8A8A80; font-size: 10px; }
.apo-copy { font-family: var(--f-body); font-size: 11.5px; line-height: 1.55; color: #5C5C54; }
.apo-cart { font-family: var(--f-body); font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; margin-top: auto; }
.style-page .apo-foot {
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(51, 51, 48, .3); padding-top: 10px;
  font-family: var(--f-body); font-size: 11px; color: #8A8A80;
}

/* ── 4 · Film Label ─────────────────────────────────────────── */
.sp-film { background: #FFFFFF; color: #000000; font-family: 'Archivo', sans-serif; }
.style-page .film-mast { display: flex; align-items: baseline; justify-content: space-between; }
.sp-film .sp-word { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.sp-film .sp-navlinks i { opacity: .65; }
.film-still { position: relative; margin-top: 6px; flex: none; }
.film-still .sp-photo { width: 100%; height: 216px; filter: grayscale(1) contrast(1.05); }
.film-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: #000000; color: #FFFFFF;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  padding: 4px 10px;
}
.film-list { margin-top: auto; }
.style-page .film-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid #000000; padding: 11px 0;
  font-size: 15px; font-weight: 700;
}
.film-row b { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; color: #555; }

/* ── 5 · Friendly Yellow ────────────────────────────────────── */
.sp-sunny { background: #FFE01B; color: #241C15; font-family: var(--f-body); }
.sp-sunny .sp-word { font-size: 19px; font-weight: 700; }
.sunny-hey { font-family: 'Fraunces', Georgia, serif; font-size: 74px; font-weight: 700; line-height: 1; margin-top: 8px; }
.sunny-copy { font-size: 14px; line-height: 1.55; max-width: 88%; }
.style-page .sunny-form {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #FFFFFF; border-radius: 999px;
  padding: 7px 7px 7px 18px; margin-top: 6px;
}
.sunny-form span { font-size: 13px; color: #8A8578; }
.sunny-form i { background: #241C15; color: #FFE01B; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 999px; }
.style-page .sunny-stats { display: flex; gap: 16px; margin-top: auto; }
.sunny-stats span { flex: 1; border-top: 3px solid #241C15; padding-top: 9px; font-size: 11.5px; }
.sunny-stats b { display: block; font-size: 21px; font-weight: 800; }

/* ── 6 · Cozy Marketplace ───────────────────────────────────── */
.sp-perch { background: #FFFFFF; color: #222222; font-family: var(--f-body); }
.sp-perch .sp-word { font-size: 21px; font-weight: 700; color: #FF385C; }
.sp-perch .sp-cta { border: 1px solid #DDD; }
.style-page .perch-search {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #DDDDDD; border-radius: 999px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  font-size: 12.5px; font-weight: 600;
  margin-top: 4px;
}
.perch-search .pdiv { width: 1px; height: 20px; background: #DDD; }
.perch-search .pdim { color: #999; font-weight: 400; }
.perch-go { margin-left: auto; background: #FF385C; color: #FFF; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.style-page .perch-cards { display: flex; gap: 14px; margin-top: 14px; }
.style-page .perch-card { flex: 1; position: relative; display: flex; flex-direction: column; gap: 7px; }
.perch-card .sp-photo { width: 100%; height: 158px; border-radius: 14px; }
.style-page .perch-meta { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.perch-meta b { font-weight: 600; }
.perch-meta span { color: #717171; font-size: 12px; }
.perch-rate {
  position: absolute; top: 8px; right: 8px;
  background: #FFFFFF; border-radius: 99px;
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ── 7 · Neon Money ─────────────────────────────────────────── */
.sp-split { background: #000000; color: #FFFFFF; font-family: 'Archivo', sans-serif; }
.sp-split .sp-word { font-size: 20px; font-weight: 800; color: #00D64F; }
.sp-split .sp-cta { background: #00D64F; color: #000; font-weight: 700; }
.split-amount { font-size: 58px; color: #00D64F; margin-top: 26px; letter-spacing: -.02em; }
.split-note { color: #8A8A8A; font-size: 10px; }
.style-page .split-actions { display: flex; gap: 10px; margin-top: 10px; }
.split-actions .sa1 { background: #00D64F; color: #000; font-size: 14px; font-weight: 800; padding: 11px 30px; border-radius: 10px; }
.split-actions .sa2 { border: 1px solid #333; color: #FFF; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 10px; }
.style-page .split-grid {
  display: grid; grid-template-columns: repeat(8, 13px); gap: 4px;
  margin-top: auto;
}
.split-grid i { width: 13px; height: 13px; background: #141414; border-radius: 2px; }
.split-grid i.g { background: #00D64F; }
.split-foot { color: #666; font-size: 9.5px; }

/* ── 8 · Built For Outside ──────────────────────────────────── */
.sp-trail { color: #FFFFFF; font-family: 'Archivo', sans-serif; background: #1A222E; }
.sp-trail .sp-word { font-size: 15px; font-weight: 800; letter-spacing: .07em; }
.sp-trail .sp-cta { border: 1px solid rgba(255, 255, 255, .6); }
.trail-hero { margin-top: auto; }
.sp-trail .sp-h1 { font-size: 37px; font-weight: 800; }
.trail-note { font-size: 12.5px; color: rgba(255, 255, 255, .88); }
.style-page .trail-specs { display: flex; gap: 8px; margin-top: 6px; }
.trail-specs i {
  border: 1px solid rgba(255, 255, 255, .6);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 3px;
}

/* ── 9 · Farm Casual ────────────────────────────────────────── */
.sp-verdura { background: #FBF7EB; color: #0A4D2E; font-family: 'Fraunces', Georgia, serif; }
.sp-verdura .sp-word { font-size: 22px; font-weight: 600; }
.sp-verdura .sp-navlinks i { font-family: var(--f-body); font-size: 12px; }
.sp-verdura .sp-cta { background: #0A4D2E; color: #FBF7EB; font-family: var(--f-body); }
.style-page .verd-hero { display: flex; gap: 16px; align-items: center; flex: 1; min-height: 0; }
.style-page .verd-copy { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.sp-verdura .sp-h1 { font-size: 36px; font-weight: 500; }
.verd-note { font-family: var(--f-body); font-size: 12.5px; line-height: 1.55; color: #4E7157; }
.sp-verdura .sp-btn { background: #0A4D2E; color: #FBF7EB; font-family: var(--f-body); }
.verd-photo {
  width: 150px; height: 196px; flex: none;
  border-radius: 80px 20px 80px 20px;
  overflow: hidden;
}
.verd-photo .sp-photo { width: 100%; height: 100%; }
.verd-ticker {
  border-top: 1.5px solid #0A4D2E; padding-top: 10px;
  font-size: 9.5px; color: #0A4D2E;
}

/* ── 10 · Slow Magazine ─────────────────────────────────────── */
.sp-journal { background: #FFFFFF; color: #222222; font-family: 'Fraunces', Georgia, serif; padding: 30px; }
.journal-head { text-align: center; color: #999; font-size: 9.5px; }
.journal-photo { margin: 18px 12px 0; flex: none; }
.journal-photo .sp-photo { width: 100%; height: 246px; }
.journal-cap {
  text-align: center; font-style: italic;
  font-size: 17px; line-height: 1.55; font-weight: 400;
  margin-top: 20px;
}
.style-page .journal-foot { display: flex; justify-content: space-between; margin-top: auto; color: #AAA; }

/* ── 11 · Skin First Pink ───────────────────────────────────── */
.sp-blushlab { background: #FDF1F4; color: #3A2A2E; font-family: var(--f-body); }
.sp-blushlab .sp-word { font-size: 18px; font-weight: 600; }
.sp-blushlab .sp-cta { background: #FFFFFF; }
.bl-motto { font-size: 30px; font-weight: 600; line-height: 1.2; margin-top: 10px; }
.bl-card { position: relative; margin-top: auto; flex: none; }
.bl-card .sp-photo { width: 100%; height: 208px; border-radius: 14px; }
.bl-wash { position: absolute; inset: 0; background: rgba(253, 183, 200, .3); border-radius: 14px; }
.style-page .bl-name {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  background: #FFFFFF; border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600;
}
.bl-name b { font-weight: 700; }
.bl-foot { font-size: 11.5px; color: #A98791; margin-top: 12px; }

/* ── 12 · Year In Review ────────────────────────────────────── */
.sp-wrapped { color: #FFFFFF; font-family: 'Archivo', sans-serif; background: #2A0A5E; }
.wrap-duo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(165deg, rgba(84, 8, 189, .82), rgba(0, 224, 145, .5));
}
.wrap-nav { position: relative; z-index: 2; }
.sp-wrapped .sp-word { font-family: 'Anton', sans-serif; font-size: 17px; letter-spacing: .05em; }
.style-page .wrap-stack { display: flex; flex-direction: column; gap: 8px; margin: auto 0; position: relative; z-index: 2; }
.wrap-label { font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.wrap-big { font-family: 'Anton', sans-serif; font-size: 88px; line-height: .95; }
.wrap-genre { font-family: 'Anton', sans-serif; font-size: 34px; color: #CFFF50; }
.wrap-foot {
  position: relative; z-index: 2;
  align-self: flex-start;
  border: 1.5px solid #FFFFFF; padding: 7px 14px;
  font-size: 10px;
}

/* ── 13 · Terminal Minimal ──────────────────────────────────── */
.sp-ship { background: #000000; color: #FFFFFF; font-family: 'Archivo', sans-serif; }
.ship-mark {
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15px solid #FFFFFF;
}
.sp-ship .sp-word { font-size: 18px; font-weight: 700; margin-right: auto; margin-left: 10px; }
.sp-ship .sp-navlinks i { color: #888; }
.sp-ship .sp-h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin-top: 18px; }
.style-page .ship-term {
  margin-top: auto;
  background: #0A0A0A; border: 1px solid #262626; border-radius: 10px;
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
}
.style-page .ship-line { display: flex; gap: 8px; color: #E5E5E5; }
.ship-line b { color: #888; font-weight: 400; }
.ship-line.dim { color: #8A8A8A; }
.ship-line.ok { color: #50E3C2; }
.ship-foot { color: #737373; font-size: 9.5px; border-top: 1px solid #262626; padding-top: 10px; }

/* ── 14 · Swiss Precision ───────────────────────────────────── */
.sp-swiss { background: #FFFFFF; color: #111111; font-family: 'Archivo', sans-serif; gap: 18px; }
.sp-swiss .sp-navlinks i { opacity: .6; }
.sp-swiss .sp-rule { background: #E30613; height: 6px; }
.style-page .swiss-grid { display: flex; gap: 18px; flex: 1; min-height: 0; }
.style-page .swiss-main { flex: 1.35; display: flex; flex-direction: column; gap: 14px; }
.sp-swiss .sp-h1 { font-size: 52px; font-weight: 800; letter-spacing: -.01em; }
.sp-swiss .sp-h1 em { color: transparent; -webkit-text-stroke: 2.5px #111111; font-style: normal; }
.swiss-caption { font-size: 13px; line-height: 1.5; color: #666; }
.style-page .swiss-side { flex: 1; border-left: 1px solid #DDD; padding-left: 16px; display: flex; flex-direction: column; gap: 14px; }
.swiss-idx b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #E30613; }
.swiss-idx span { font-size: 14px; font-weight: 600; }
.sp-swiss .sp-mono { color: #888; }
.swiss-vert { position: absolute; right: 8px; bottom: 96px; writing-mode: vertical-rl; color: #BBB; font-size: 10px; }

/* ── 15 · Soft Landing ──────────────────────────────────────── */
.sp-ease { background: #FBEDDF; color: #3D3630; font-family: var(--f-body); }
.sp-ease .sp-word { font-size: 20px; font-weight: 700; color: #F47D31; }
.sp-ease .sp-cta { background: #F47D31; color: #FFF6EC; }
.style-page .ease-circle { position: relative; height: 148px; margin-top: 6px; flex: none; display: flex; align-items: center; justify-content: center; }
.ease-circle i { width: 128px; height: 128px; border-radius: 50%; background: #F47D31; opacity: .92; }
.style-page .ease-copy { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.sp-ease .sp-h1 { font-size: 27px; font-weight: 600; text-align: center; }
.ease-note { font-size: 12.5px; color: #8A7A6C; max-width: 78%; text-align: center; }
.style-page .ease-row { display: flex; gap: 12px; margin-top: auto; }
.ease-chip { flex: 1; background: #FFFFFF; border-radius: 14px; padding: 11px 13px; font-size: 11.5px; color: #8A7A6C; }
.ease-chip b { display: block; font-size: 13px; color: #3D3630; font-weight: 600; }

/* ── 16 · Athletic Volt ─────────────────────────────────────── */
.sp-pace { background: #FFFFFF; color: #111111; font-family: 'Archivo', sans-serif; }
.sp-pace .sp-word { font-family: 'Anton', sans-serif; font-size: 19px; }
.sp-pace .sp-cta { background: #111111; color: #FFFFFF; }
.pace-h1 {
  font-family: 'Anton', sans-serif;
  font-size: 47px; line-height: .96;
  transform: skewX(-8deg);
  margin-top: 8px;
}
.pace-photo { position: relative; margin-top: 10px; flex: none; }
.pace-photo .sp-photo { width: 100%; height: 168px; filter: saturate(1.15) contrast(1.05); }
.pace-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #DFFF00; color: #111111;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  padding: 6px 10px;
}
.style-page .pace-foot { display: flex; align-items: center; gap: 18px; margin-top: auto; }
.pace-stat { font-size: 10px; color: #555; }
.pace-stat b { display: block; font-size: 19px; font-weight: 800; color: #111; font-family: 'Anton', sans-serif; }
.pace-go { margin-left: auto; background: #111111; color: #FFFFFF; font-size: 12.5px; font-weight: 700; padding: 10px 20px; border-radius: 999px; }

/* ── live motion inside the mini pages ──────────────────────── */
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, -1.5%); } }
@keyframes driftB { from { transform: translate(0, 0); } to { transform: translate(12px, 10px); } }
@keyframes throb { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes breathe { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes blinkg { from { opacity: 1; } to { opacity: .35; } }
@keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.style-tile:hover .sp-bg, .style-frame .sp-bg,
.style-tile:hover .film-still .sp-photo, .style-frame .film-still .sp-photo,
.style-tile:hover .journal-photo .sp-photo, .style-frame .journal-photo .sp-photo,
.style-tile:hover .verd-photo .sp-photo, .style-frame .verd-photo .sp-photo,
.style-tile:hover .apo-product .sp-photo, .style-frame .apo-product .sp-photo,
.style-tile:hover .bl-card .sp-photo, .style-frame .bl-card .sp-photo,
.style-tile:hover .pace-photo .sp-photo, .style-frame .pace-photo .sp-photo,
.style-tile:hover .perch-card .sp-photo, .style-frame .perch-card .sp-photo {
  animation: kb 10s ease-in-out infinite alternate;
}
.style-tile:hover .fin-aurora, .style-frame .fin-aurora { animation: driftB 6s ease-in-out infinite alternate; }
.style-tile:hover .orbit-glow, .style-frame .orbit-glow { animation: driftB 7s ease-in-out infinite alternate; }
.style-tile:hover .ease-circle i, .style-frame .ease-circle i { animation: breathe 3.4s ease-in-out infinite alternate; }
.style-tile:hover .split-grid i.g, .style-frame .split-grid i.g { animation: blinkg 1.4s ease-in-out infinite alternate; }
.split-grid i.g:nth-child(4n) { animation-delay: .4s; }
.split-grid i.g:nth-child(3n) { animation-delay: .8s; }
.style-tile:hover .sp-swiss .sp-rule, .style-frame .sp-swiss .sp-rule {
  transform-origin: left; animation: wipe 1.4s cubic-bezier(.7, 0, .2, 1) infinite alternate;
}
.style-tile:hover .sp-btn, .style-frame .sp-btn,
.style-tile:hover .fin-btn1, .style-frame .fin-btn1,
.style-tile:hover .perch-go, .style-frame .perch-go,
.style-tile:hover .sa1, .style-frame .sa1,
.style-tile:hover .pace-go, .style-frame .pace-go,
.style-tile:hover .sunny-form i, .style-frame .sunny-form i {
  animation: throb 1.6s ease-in-out infinite alternate;
}

/* ── Color picker ───────────────────────────────────────────── */
.color-picker {
  position: fixed; bottom: 18px; right: 18px; z-index: 60;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
}
.picker-toggle {
  width: 56px; height: 56px; display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--tile); color: var(--accent);
  box-shadow: var(--soft-sh); cursor: pointer;
  transition: transform .3s var(--spring);
}
.picker-toggle:hover { transform: scale(1.1) rotate(10deg); }
.picker-swatches {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity .25s ease, translate .3s var(--spring);
}
.color-picker.open .picker-swatches { opacity: 1; translate: 0 0; pointer-events: auto; }
.swatch {
  width: 34px; height: 34px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%; cursor: pointer;
  box-shadow: var(--soft-sh);
  transition: transform .25s var(--spring);
}
.swatch:hover { transform: scale(1.18); }
.sw-jackie { background: linear-gradient(135deg, #211D1A 50%, #E04E39 50%); }
.sw-paper  { background: linear-gradient(135deg, #F6EBD9 50%, #D9442F 50%); }
.sw-grey   { background: linear-gradient(135deg, #F6F5F3 50%, #232220 50%); }
.sw-night  { background: linear-gradient(135deg, #1D1216 50%, #FF6B62 50%); }

/* ── Style pop-up ───────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.overlay[hidden] { display: none; }
.overlay-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.style-modal:focus, .style-modal:focus-visible { outline: none; }
.style-modal {
  position: relative;
  width: min(480px, 92vw);
  max-height: 92svh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  padding: 26px;
  text-align: left;
}
.modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font: inherit; font-size: 1.5rem; line-height: 1;
  color: var(--grey); background: var(--paper);
  border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 50%;
  transition: color .2s ease;
}
.modal-close:hover { color: var(--accent); }
.style-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 560;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--soft-sh);
}
.style-name {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 18px;
}
.style-desc { color: var(--grey); font-size: .9rem; margin-top: 8px; }
.style-note { margin-top: 16px; }
.style-note a { color: var(--accent); }

/* ── Contact curtain ────────────────────────────────────────── */
.reveal-contact {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1;
  background: var(--accent);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56svh; max-height: 100svh;
  transition: background-color .4s ease;
}
.footer { padding: clamp(40px, 7vh, 80px) var(--pad); }
.footer-title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 1;
  color: var(--paper);
}
.footer-links {
  display: flex; justify-content: center;
  gap: clamp(28px, 6vw, 80px);
  margin-top: clamp(24px, 4vh, 40px);
  flex-wrap: wrap;
}
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-links a, .footer-links .dim {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links .dim { opacity: .6; }
.footer-sub { display: block; margin-top: clamp(28px, 5vh, 48px); color: var(--paper); opacity: .75; }

/* ── Reveals ────────────────────────────────────────────────── */
:root.js .pop {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s var(--spring);
}
:root.js .pop.in { opacity: 1; transform: none; }
:root.has-motion .pop { transition: none; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root.js .pop { opacity: 1; transform: none; transition: none; }
  .hero-image, .style-tile, .carousel-slide img, .picker-toggle, .swatch { transition: none; }
  .carousel { overflow-x: auto; }
  .carousel-track { animation: none; }
  .style-page *, .style-tile:hover .style-page *, .style-frame .style-page * { animation: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-images { flex-wrap: wrap; justify-content: center; }
  .hero-image { width: clamp(110px, 38vw, 150px); }
  .picker-toggle { width: 46px; height: 46px; }
  .micro { font-size: .64rem; }
  .carousel-slide { width: clamp(260px, 78vw, 340px); }
}