/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0a0a0a;
  --bg-2:      #121212;
  --bg-3:      #19191a;
  --bg-4:      #222223;
  --cream:     #f5f5f2;
  --cream-2:   #c7c7c2;
  --cream-3:   #8a8a86;
  --line:      rgba(245,245,242,0.12);
  --line-2:    rgba(245,245,242,0.06);
  --accent:    #f5f5f2;   /* monochrome "accent" = bright cream, used sparingly for glow/halo */
  --shadow:    rgba(0,0,0,0.6);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 76px;
  --container: 1360px;
}

/* Grid items default to min-width:auto, which lets long headings blow out
   their track instead of wrapping. Reset it everywhere grids hold text. */
.hero-grid > *, .manifesto-grid > *, .collab-card > *, .packaging-grid > *,
.catalog-grid > *, .testi-grid > *, .footer-top > *, .lightbox-grid > * { min-width: 0; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; font-family: var(--serif); font-weight: 500; }
::selection { background: var(--cream); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--cream); color: var(--bg);
  z-index: 9999; border-radius: 6px; font-weight: 600; font-size: .9rem;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 960px) { .container { padding-inline: 2.5rem; } }

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

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-3);
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cream);
}

.eyebrow-line { width: 34px; height: 1px; background: var(--line); display: inline-block; }

/* =============================================================
   4. Typography
   ============================================================= */
h1 { font-size: clamp(2.6rem, 7.2vw, 6.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
em, i { font-style: italic; }
.section-title { max-width: 20ch; }
.section-body { color: var(--cream-2); font-size: 1.05rem; max-width: 52ch; line-height: 1.7; }

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background-color .3s, color .3s, border-color .3s;
}
.btn-primary {
  background: var(--cream); color: var(--bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -12px rgba(245,245,242,.35); }
.btn-ghost {
  border: 1px solid var(--line); color: var(--cream);
}
.btn-ghost:hover { border-color: var(--cream); transform: translateY(-3px); }
.btn-block { width: 100%; }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
}
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: none; align-items: center; gap: 2.1rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-size: .9rem; font-weight: 500; color: var(--cream-2); padding: .3rem 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }
@media (min-width: 960px) { .nav-cta { display: inline-flex; } }
.nav-burger {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span { position: relative; width: 16px; height: 1px; background: var(--cream); display: block; }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--cream);
  transition: transform .3s var(--ease-out);
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 5px; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg); color: var(--cream);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile-links { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nav-mobile-links a { font-family: var(--serif); font-size: 2rem; }
.nav-mobile-close { position: absolute; top: 1.8rem; right: 1.8rem; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }

/* --- Cards: product --- */
.card {
  position: relative; background: var(--bg-3); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-soft);
}
.has-tilt { transform-style: preserve-3d; }
/* Background matches each photo batch's real backdrop so the padding frame is invisible:
   ALTA cap shoots = pure white, Tito collab composites = black, t-shirt shoots = concrete gray. */
.card-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #fff; }
[data-collection="tito-collab"] .card-media { background: #000; }
/* T-shirt flat-lays are landscape (front+back pair) — don't force a portrait crop */
[data-collection="cash-culture"] .card-media, .tshirt-grid .card-media { aspect-ratio: 37/20; background: #706f6d; }
/* NonCulpa's real studio photos are landscape (~3/2), not portrait like every other cap
   shoot -- forcing them into the standard 4/5 frame squeezed them into a thin horizontal
   strip (object-fit:contain letterboxes hard against the mismatched ratio), which read as
   "zoomed in" even though the source photo itself has normal margins. Matching the frame
   to the photo's own ratio removes that letterboxing so the cap displays at its real size. */
[data-collection="non-culpa"] .card-media { aspect-ratio: 3/2; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .8s var(--ease-soft), filter .55s; }
.card:hover .card-media img { transform: scale(1.05); filter: contrast(1.04); }
.card:hover { border-color: var(--line); }
.card-body { padding: 1.1rem 1.15rem 1.3rem; }
.card-collection { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); }
.card-name { font-family: var(--serif); font-size: 1.08rem; margin-top: .35rem; }
.card-foot { margin-top: .7rem; display: flex; align-items: center; justify-content: space-between; }
.card-price { font-family: var(--mono); font-size: .92rem; color: var(--cream); }
.card-color { font-size: .76rem; color: var(--cream-3); }
.card-badge-collab {
  background: var(--cream); color: var(--bg); border-color: var(--cream); font-weight: 600;
}
.card-badge-agotado {
  background: rgba(10,10,10,.7); color: var(--cream-2); border-color: rgba(245,245,242,.35);
}
/* Agotado (sold-out) cards: kept in the catalog as portfolio, not for sale — desaturated
   and slightly dimmed so the eye reads "archived" without looking broken or low-effort. */
.card-agotado .card-media img { filter: grayscale(0.85) contrast(1.02); }
.card-agotado .card-price { text-decoration: line-through; color: var(--cream-3); }
.card-agotado:hover .card-media img { transform: scale(1.02); filter: grayscale(0.6) contrast(1.02); }
.card-badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 999px; border: 1px solid rgba(245,245,242,.5);
  background: rgba(10,10,10,.55); backdrop-filter: blur(6px);
}
.card-view {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s var(--ease-out);
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.72) 100%);
}
.card:hover .card-view { opacity: 1; }
.card-view span {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1.1rem; border: 1px solid var(--cream); border-radius: 999px;
  transform: translateY(10px); transition: transform .4s var(--ease-out);
}
.card:hover .card-view span { transform: translateY(0); }

/* --- Testimonial cards --- */
.testi-card {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; height: 100%;
}
.testi-stars { display: flex; gap: .18rem; color: var(--cream); font-size: .95rem; letter-spacing: .12em; }
.testi-text { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--cream); }
.testi-foot { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-size: .78rem; color: var(--cream-2);
  background: var(--bg-4);
}
.testi-name { font-size: .88rem; font-weight: 600; }
.testi-loc { font-size: .78rem; color: var(--cream-3); }

/* --- Collab card --- */
.collab-card {
  display: grid; gap: 2.4rem; align-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 20px; padding: 2rem;
}
@media (min-width: 780px) { .collab-card { grid-template-columns: minmax(300px, 340px) 1fr; padding: 2.6rem; } }
.collab-video { position: relative; display: flex; flex-direction: column; gap: .8rem; }
.collab-video-float {
  position: relative; z-index: 1;
  animation: collabFloat 6.5s ease-in-out infinite;
}
.collab-video-inner {
  position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(0.25,0.46,0.45,0.94);
  max-width: 320px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.7);
}
.collab-video-inner video, .collab-video-inner img { width: 100%; height: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: var(--bg-3); }
.collab-video-toggle { top: .7rem; right: .7rem; width: 36px; height: 36px; }
.collab-video-toggle svg { width: 16px; height: 16px; }

/* --- Artist blocks (one per collaborator, stacked and clearly separated) --- */
.artist-block + .artist-block { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--line-2); }
.artist-tag {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-3); margin-bottom: 1.2rem;
}

/* --- Collab pieces (artist portrait + official products) --- */
.collab-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 720px) { .collab-pieces { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.collab-pieces-nc { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .collab-pieces-nc { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) { .collab-pieces-nc { grid-template-columns: repeat(4, 1fr); } }
/* 7 NonCulpa pieces never divide evenly into a 2- or 4-column grid, which leaves an
   empty trailing cell (very visible as a black hole on a wide 4-col row) -- make the
   last piece span the remainder of its row so every row is always fully filled.
   aspect-ratio is reset on it so it stretches to match its row-mates' height (desktop,
   where it shares the row with 2 siblings) instead of inheriting their portrait 4/5
   ratio at double width; on mobile it's alone in its row, so it gets an explicit
   wide ratio instead. */
.collab-pieces-nc .collab-piece:last-child { grid-column: span 2; aspect-ratio: 3/2; }
@media (min-width: 640px) { .collab-pieces-nc .collab-piece:last-child { aspect-ratio: auto; } }
.collab-piece {
  position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5;
  border: 1px solid var(--line-2); background: var(--bg-3);
}
/* NonCulpa's real studio photos are landscape (~3/2) unlike Tito's portrait composites,
   which this component was built for -- object-fit:cover on a 4/5 frame would crop the
   sides off a 3/2 photo instead of just letterboxing it, so match the frame to the photo
   here specifically (mirrors the same fix on the catalog card grid, .card-media above). */
.collab-pieces-nc .collab-piece { aspect-ratio: 3/2; background: #fff; }
.collab-piece img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.collab-piece:hover img { transform: scale(1.06); }
.collab-piece figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,.85));
  font-family: var(--serif); font-size: .96rem; color: var(--cream);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.collab-piece figcaption span { font-family: var(--mono); font-size: .72rem; color: var(--cream-2); }
.collab-video-credit { position: relative; z-index: 1; text-align: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--cream-3); }
.collab-video-credit a { color: var(--cream-2); text-decoration: underline; text-underline-offset: 2px; }
.collab-video-halo {
  position: absolute; inset: -18% -14%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, rgba(245,245,242,.16), transparent 70%);
  filter: blur(40px);
  animation: collabHaloPulse 4.5s ease-in-out infinite;
}
@keyframes collabFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes collabHaloPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .collab-video-float, .collab-video-halo { animation: none; } }
.collab-portrait {
  aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; position: relative;
  background: linear-gradient(155deg, #1c1c1d 0%, #0a0a0a 70%);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.collab-portrait::after {
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.collab-portrait-mark { font-family: var(--serif); font-style: italic; font-size: 3.2rem; color: var(--cream-3); position: relative; z-index: 1; }
.collab-portrait-tag {
  position: absolute; bottom: .9rem; left: 50%; translate: -50% 0; z-index: 1;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3);
  border: 1px solid var(--line); padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}
.collab-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.42; }
.collab-name { margin-top: 1.2rem; font-weight: 700; font-size: 1.02rem; }
.collab-role { font-size: .84rem; color: var(--cream-3); margin-top: .2rem; }

/* --- Form --- */
.field { position: relative; }
.field input, .field select {
  width: 100%; padding: 1.15rem 1rem .5rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-3); color: var(--cream); font-size: .96rem;
}
.field input:focus, .field select:focus { border-color: var(--cream); }
.field label {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; transition: all .25s var(--ease-out);
  color: var(--cream-3); font-size: .96rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label {
  top: .55rem; transform: none; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
.cta-form { position: relative; transition: opacity .55s var(--ease-out), transform .55s var(--ease-soft); }
.cta-form.is-sent { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.cta-submit { position: relative; overflow: hidden; }
.cta-form-spinner, .cta-form-check { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.cta-form.is-sending .cta-form-label { opacity: 0; }
.cta-form.is-sending .cta-form-spinner { opacity: 1; }
.cta-form-spinner::after {
  content: ""; width: 16px; height: 16px; border: 1.5px solid rgba(10,10,10,.25); border-top-color: var(--bg);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-success {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%);
  opacity: 0; pointer-events: none; text-align: center; width: 100%;
  transition: opacity .8s var(--ease-out) .2s, transform .9s var(--ease-soft) .2s;
}
.cta-success.is-visible { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.cta-success h3 { font-size: 1.3rem; }
.cta-success p { color: var(--cream-2); margin-top: .5rem; }

/* =============================================================
   6. Sections
   ============================================================= */
section { position: relative; }

/* --- Splash --- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg); display: grid; place-items: center;
  transition: opacity .8s, clip-path 1s;
  animation: splashSafety .01s 4.2s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-logo { height: 46px; width: auto; opacity: .95; animation: splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* --- Scroll progress --- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: var(--line-2); pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--cream); transform-origin: 0 0; transform: scaleX(0); transition: transform .08s linear; }

/* --- Cursor --- */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; display: none; mix-blend-mode: difference; opacity: 0; transition: opacity .25s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px; background: var(--cream); border-radius: 50%; }
.cursor-ring { width: 30px; height: 30px; margin: -15px; border: 1px solid var(--cream); border-radius: 50%; transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out); }
.cursor.is-interactive .cursor-ring { width: 52px; height: 52px; margin: -26px; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
/* <dialog> renders in the browser's top layer, above the custom cursor no matter its
   z-index — without this the cursor is invisibly hidden behind the modal while it's open. */
.has-modal-open, .has-modal-open a, .has-modal-open button { cursor: auto !important; }
.has-modal-open a, .has-modal-open button { cursor: pointer !important; }
.has-modal-open .cursor { opacity: 0 !important; }

/* --- Hero --- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 4rem;
  position: relative; overflow: clip; isolation: isolate;
}
.hero-gradient {
  position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(38% 42% at var(--mx, 30%) var(--my, 32%), rgba(245,245,242,.16), transparent 60%),
    radial-gradient(46% 46% at calc(100% - var(--mx, 30%)) calc(100% - var(--my, 32%)), rgba(245,245,242,.08), transparent 65%),
    var(--bg);
  filter: blur(60px);
}
.hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 2rem; } }
.hero-inner { text-align: center; }
@media (min-width: 980px) { .hero-inner { text-align: left; } }
.hero-kicker { justify-content: center; margin-bottom: 1.6rem; }
@media (min-width: 980px) { .hero-kicker { justify-content: flex-start; } }
.hero-title { max-width: 15ch; margin-inline: auto; }
@media (min-width: 980px) { .hero-title { margin-inline: 0; } }
.hero-title span { display: block; }
.hero-sub { max-width: 46ch; margin: 1.6rem auto 0; color: var(--cream-2); font-size: 1.08rem; }
@media (min-width: 980px) { .hero-sub { margin-inline: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.4rem; }
@media (min-width: 980px) { .hero-actions { justify-content: flex-start; } }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem; margin-top: 4.2rem; padding-top: 2.4rem; border-top: 1px solid var(--line-2); }
@media (min-width: 980px) { .hero-stats { justify-content: flex-start; } }

/* --- Hero floating visual --- */
.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-visual-card {
  position: relative; width: min(78vw, 380px); border-radius: 20px; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line);
  box-shadow: 0 60px 100px -30px rgba(0,0,0,.75), 0 20px 40px -18px rgba(0,0,0,.6);
  animation: heroFloat 7s ease-in-out infinite;
}
.hero-visual-card img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 55%, transparent 100%);
}
.hero-visual-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,.55) 100%);
}
.hero-visual-tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .75rem; border-radius: 999px; background: rgba(10,10,10,.72); color: var(--cream);
  border: 1px solid rgba(245,245,242,.25); backdrop-filter: blur(6px);
}
.hero-visual-halo {
  position: absolute; inset: -20% -20% -20% -20%; z-index: -1;
  background: radial-gradient(45% 45% at 50% 50%, rgba(245,245,242,.16), transparent 70%);
  filter: blur(50px);
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .hero-visual-card { animation: none; } }

.hero-visual-card-video { width: min(80vw, 400px); }
.hero-visual-card-video video {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4;
  display: block; background: var(--bg-3);
}
.hero-video-toggle {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,10,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(245,245,242,.3);
  display: grid; place-items: center; color: var(--cream);
  transition: background-color .3s, transform .3s;
}
.hero-video-toggle:hover { background: rgba(10,10,10,.8); transform: scale(1.06); }
.hero-video-toggle svg { width: 18px; height: 18px; }
.hero-stat { text-align: center; }
.hero-stat-num { font-family: var(--serif); font-size: 2.1rem; }
.hero-stat-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); margin-top: .4rem; }

/* --- Marquee --- */
.marquee { overflow: hidden; position: relative; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding-block: 1.1rem; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track { display: inline-flex; gap: 2.2rem; white-space: nowrap; will-change: transform; }
.marquee-track span { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); }
.marquee-track span.is-dot { color: var(--cream); }

/* --- Manifesto --- */
.manifesto { padding-block: clamp(5rem, 10vw, 9rem); }
.manifesto-grid { display: grid; gap: 2.4rem; }
@media (min-width: 860px) { .manifesto-grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; } }
.manifesto-num { font-family: var(--mono); font-size: .8rem; color: var(--cream-3); letter-spacing: .1em; }
.manifesto h2 { margin-top: 1rem; max-width: 14ch; }
.manifesto-media {
  margin-top: 1.6rem; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5;
  max-width: 320px; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.manifesto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.manifesto-media:hover img { transform: scale(1.05); }

/* --- Packaging strip --- */
.packaging { position: relative; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); overflow: clip; isolation: isolate; }
.packaging-bg { position: absolute; inset: 0; z-index: -1; }
.packaging-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .32; filter: grayscale(.2); }
.packaging-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,10,.88) 40%, rgba(10,10,10,.88) 60%, var(--bg) 100%);
}
.packaging-inner { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .packaging-inner { grid-template-columns: 340px 1fr; gap: 3.2rem; } }
.packaging-photo {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.7); aspect-ratio: 4/5;
}
.packaging-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.packaging-photo:hover img { transform: scale(1.04); }
.packaging-grid { display: grid; gap: 2rem; }
@media (min-width: 560px) and (max-width: 899px) { .packaging-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.packaging-item h3 { font-size: 1.15rem; margin-top: .8rem; }
.packaging-item p { color: var(--cream-2); font-size: .92rem; margin-top: .5rem; line-height: 1.6; max-width: 32ch; }
.packaging-num { font-family: var(--mono); font-size: .74rem; color: var(--cream-3); letter-spacing: .1em; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .65rem; }

/* --- Showcase (static grid — was a GSAP ScrollTrigger pinned horizontal-scrub track;
   ripped out because it broke on back/forward navigation — the pin's spacer + inline
   transform survived a bfcache restore in a state the fresh page load never re-synced,
   which is exactly the overlapping-layout glitch that was reported. A grid can't
   desync like that, and it also means you see every piece at once instead of having
   to scroll the whole page to bring the next one into view. Reuses .catalog-grid,
   same component catalogo.html's full grid uses, for one consistent card layout. --- */
.showcase { padding-block: clamp(4rem, 8vw, 7rem); }
.showcase-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: 2.6rem; }

/* --- Cash Culture / t-shirt grid (homepage) --- */
.tshirts { position: relative; padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line-2); overflow: clip; isolation: isolate; }
.tshirts-bg { position: absolute; inset: 0; z-index: -1; }
.tshirts-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .28; }
.tshirts-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,10,.82) 35%, rgba(10,10,10,.9) 100%); }
.tshirts-head { display: grid; gap: 1.8rem; align-items: end; margin-bottom: 2.6rem; }
@media (min-width: 860px) { .tshirts-head { grid-template-columns: 1.3fr .7fr; gap: 2.6rem; } }
.tshirts-cover {
  border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; max-width: 320px;
  border: 1px solid var(--line); box-shadow: 0 40px 80px -28px rgba(0,0,0,.7);
  justify-self: start;
}
@media (min-width: 860px) { .tshirts-cover { justify-self: end; } }
.tshirts-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.tshirts-cover:hover img { transform: scale(1.05); }
.tshirt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (min-width: 640px) { .tshirt-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
@media (min-width: 1024px) { .tshirt-grid { grid-template-columns: repeat(6, 1fr); gap: 1.2rem; } }

/* --- Size guide --- */
.size-guide {
  display: grid; gap: 1.6rem; margin-top: 3rem; padding-top: 2.6rem; border-top: 1px solid var(--line-2);
}
@media (min-width: 700px) { .size-guide { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } }
.size-guide-info h3 { font-size: 1.25rem; }
.size-guide-info p { color: var(--cream-2); margin-top: .6rem; font-size: .92rem; }
.size-guide-fabric { font-family: var(--mono); font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3) !important; margin-top: 1rem !important; }
.size-guide-table-wrap { overflow-x: auto; }
.size-guide-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.size-guide-table th, .size-guide-table td { padding: .75rem 1rem; text-align: center; border: 1px solid var(--line-2); }
.size-guide-table th { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); font-weight: 400; background: var(--bg-3); }
.size-guide-table td { font-family: var(--serif); color: var(--cream); }
.size-guide-table td:first-child { font-weight: 600; }

/* --- Collections filter --- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter-chip {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-2);
  transition: border-color .3s, color .3s, background-color .3s;
}
.filter-chip:hover { color: var(--cream); border-color: var(--cream-2); }
.filter-chip.is-active { background: var(--cream); color: var(--bg); border-color: var(--cream); }

/* --- Grid catalog --- */
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } }
.catalog-count { font-family: var(--mono); font-size: .8rem; color: var(--cream-3); }
.catalog-empty { display: none; text-align: center; padding: 4rem 0; color: var(--cream-3); font-family: var(--mono); font-size: .85rem; }
.catalog-empty.is-visible { display: block; }

/* --- Testimonials --- */
.testimonials { padding-block: clamp(4rem, 8vw, 7rem); }
.testi-grid { display: grid; gap: 1.4rem; margin-top: 2.8rem; }
@media (min-width: 720px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Collaboraciones --- */
.collaborators { padding-block: clamp(4rem, 8vw, 7rem); }

/* --- Campaña / lifestyle grid --- */
.campaign { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line-2); }
.campaign-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .campaign-grid { grid-template-columns: repeat(4, 1fr); } }
.campaign-media {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/5;
  border: 1px solid var(--line-2); background: var(--bg-3);
}
.campaign-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.campaign-media:hover img { transform: scale(1.06); }
.campaign-media-lead { grid-column: span 2; grid-row: span 1; aspect-ratio: 4/2.6; }
@media (min-width: 640px) { .campaign-media-lead { grid-row: span 2; aspect-ratio: 4/5; } }

/* --- Purchase CTA --- */
.purchase { padding-block: clamp(5rem, 10vw, 9rem); position: relative; overflow: clip; }
.purchase-halo { position: absolute; inset: -60% -10% -60% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 40% at 50% 50%, rgba(245,245,242,.1), transparent 72%); filter: blur(90px); }
.purchase-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.purchase-note { margin-top: 1.4rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--cream-3); }
.purchase-form { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
@media (min-width: 560px) { .purchase-form { flex-direction: row; align-items: flex-start; } }
.purchase-form .field { flex: 1; }

/* --- Footer --- */
.footer { border-top: 1px solid var(--line-2); padding-block: 3.4rem 2.4rem; }
.footer-top { display: grid; gap: 2.4rem; }
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-logo img { height: 30px; }
.footer-tag { margin-top: 1rem; color: var(--cream-3); font-size: .88rem; max-width: 32ch; }
.footer-col h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); margin-bottom: 1rem; font-weight: 400; }
.footer-col a { display: block; padding: .3rem 0; color: var(--cream-2); font-size: .92rem; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--cream-3); }

/* --- Archive / Agotado --- */
.archive { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line-2); }
.archive-head { max-width: 60ch; }
.archive-grid { margin-top: 2.6rem; }

/* --- Lightbox / modal --- */
dialog.lightbox {
  padding: 0; border: 0; background: transparent; color: var(--cream);
  max-width: min(96vw, 1040px); width: 100%; max-height: 88vh;
  margin: auto; /* the global `* { margin:0 }` reset kills <dialog>'s native centering — restore it explicitly */
}
dialog.lightbox::backdrop { background: rgba(6,6,6,.86); backdrop-filter: blur(6px); }
.lightbox-inner { background: var(--bg-3); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; max-height: 88vh; overflow-y: auto; }
.lightbox-grid { display: grid; }
@media (min-width: 780px) { .lightbox-grid { grid-template-columns: 1.1fr 1fr; } }
.lightbox-media { position: relative; aspect-ratio: 4/5; background: #fff; }
.lightbox-media img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(10,10,10,.55); backdrop-filter: blur(6px); display: grid; place-items: center; border: 1px solid rgba(245,245,242,.3); }
.lightbox-prev { left: .7rem; } .lightbox-next { right: .7rem; }
.lightbox-thumbs { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; }
.lightbox-thumbs button { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,245,242,.35); }
.lightbox-thumbs button.is-active { background: var(--cream); }
.lightbox-body { padding: 2rem; display: flex; flex-direction: column; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(10,10,10,.6); border: 1px solid rgba(245,245,242,.3); display: grid; place-items: center; }
.lightbox-collection { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); }
.lightbox-name { margin-top: .5rem; font-size: 1.7rem; }
.lightbox-meta { display: flex; gap: 1rem; margin-top: 1rem; font-size: .88rem; color: var(--cream-2); }
.lightbox-price { font-family: var(--mono); font-size: 1.3rem; margin-top: 1.2rem; }
.lightbox-price.is-agotado { color: var(--cream-3); }
.lightbox-desc { margin-top: 1rem; color: var(--cream-2); font-size: .92rem; line-height: 1.6; }
.lightbox-actions { margin-top: auto; padding-top: 1.6rem; display: flex; flex-direction: column; gap: .7rem; }

/* --- Catalog page masthead --- */
.masthead { padding-top: calc(var(--nav-h) + 3.4rem); padding-bottom: 2rem; }
.masthead h1 { max-width: 16ch; }
.masthead-sub { margin-top: 1.1rem; color: var(--cream-2); max-width: 54ch; }
.masthead-bar { margin-top: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-2); }

/* =============================================================
   7. Effects
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

[data-split] .split-word, [data-split] .split-char { display: inline-block; will-change: transform, opacity; }

.has-halo { position: relative; isolation: isolate; }
.has-halo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(245,245,242,.14), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.has-halo:hover::before { opacity: 1; }

/* =============================================================
   8. Responsive breakpoints reference (mobile-first; see inline)
   ============================================================= */

/* =============================================================
   9. Reduced-motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
  .hero-gradient { transition: none; }
}