/* ============================================================
   HOME — page specific styles
   ============================================================ */

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#1a1714}
.hero .ph{position:absolute;inset:0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;z-index:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-bg.is-current{opacity:1}
/* legibility scrim: darken the light photo + vignette so white type reads */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 80% at 50% 42%,rgba(8,7,5,.30),rgba(8,7,5,.62) 78%),
    linear-gradient(180deg,rgba(8,7,5,.62),rgba(8,7,5,.34) 38%,rgba(8,7,5,.74))}
.hero-inner{position:relative;z-index:2;padding:120px var(--gutter) 0;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{color:var(--gold-3);margin-bottom:30px}
.hero-logo{width:min(560px,76vw);margin-bottom:30px}
.hero-tag{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.92);
  font-size:clamp(20px,3vw,30px);max-width:22ch;line-height:1.4;margin-bottom:42px}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
/* resting state is ALWAYS fully visible (opacity:1, no declaration needed).
   Entrance uses transform only — never opacity — so content can NEVER be
   hidden by a frozen/throttled animation clock. */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero-logo,.hero-tag,.hero-cta{
    transition:transform 1.1s var(--ease)}
  .hero .eyebrow{transition-delay:.05s}
  .hero-logo{transition-delay:.2s}
  .hero-tag{transition-delay:.45s}
  .hero-cta{transition-delay:.65s}
  .hero.is-pre .eyebrow,.hero.is-pre .hero-logo,
  .hero.is-pre .hero-tag,.hero.is-pre .hero-cta{transform:translateY(22px)}
}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,.7)}
.scroll-cue span{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase}
.scroll-cue .bar{width:1px;height:50px;background:linear-gradient(rgba(255,255,255,.7),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--gold-3);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{top:-50%}60%,100%{top:120%}}

/* ---------- MANIFESTO ---------- */
.manifesto{position:relative;text-align:center}
.manifesto .big{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,5vw,58px);line-height:1.32;letter-spacing:.005em;max-width:20ch;margin:0 auto 18px}
.manifesto .big b{font-style:normal;font-weight:400}
.manifesto p{max-width:54ch;margin:0 auto 38px;color:var(--ink-soft);font-size:clamp(15px,1.5vw,17px)}

/* ---------- COLLECTIONS ---------- */
.collections{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.col-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.col-card{position:relative;display:block;overflow:hidden;text-decoration:none}
.col-card .ph{aspect-ratio:3/4;transition:transform 1.1s var(--ease)}
.col-card:hover .ph{transform:scale(1.05)}
.col-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,7,5,.62));
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;z-index:2}
.col-card .num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold-3);margin-bottom:auto}
.col-card h3{color:#fff;font-weight:200;text-transform:uppercase;font-size:clamp(20px,2vw,27px);letter-spacing:.04em;line-height:1.1}
.col-card .meta{color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-top:10px;
  display:flex;align-items:center;gap:10px}
.col-card .meta .ln{width:0;height:1px;background:var(--gold-3);transition:width .5s var(--ease)}
.col-card:hover .meta .ln{width:30px}
/* spans */
.c-summer{grid-column:span 7}
.c-beach{grid-column:span 5}
.c-copa{grid-column:span 5}
.c-verbo{grid-column:span 4}
.c-fitness{grid-column:span 3}
.col-card.tall .ph{aspect-ratio:auto;height:100%}
.col-card.tall{display:flex}
.c-summer .ph,.c-copa .ph{aspect-ratio:16/12}
/* real images */
.col-card .col-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  aspect-ratio:3/4;transition:transform 1.1s var(--ease)}
.col-card:hover .col-img{transform:scale(1.05)}
.c-summer .col-img,.c-copa .col-img{aspect-ratio:16/12}

/* ---------- PURPOSE BAND ---------- */
.purpose{position:relative;background:var(--ink);color:var(--cream);text-align:center;overflow:hidden}
.purpose .ph{position:absolute;inset:0;opacity:.22}
.purpose .pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26}
.purpose-inner{position:relative;z-index:2}
.purpose .eyebrow{color:var(--gold-3);display:block;margin-bottom:34px}
.purpose blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,4.4vw,54px);line-height:1.34;max-width:24ch;margin:0 auto 40px}
.purpose blockquote .gold-text{font-style:italic}
.purpose cite{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(249,240,232,.55)}

/* ---------- CTA STRIP ---------- */
.cta-strip{text-align:center}
.cta-strip h2{font-size:clamp(30px,5vw,58px);font-weight:200;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;line-height:1.08}
.cta-strip p{color:var(--ink-soft);max-width:46ch;margin:0 auto 40px;font-size:16px}

@media (max-width:860px){
  .col-grid{grid-template-columns:repeat(6,1fr)}
  .c-summer,.c-beach,.c-copa,.c-verbo,.c-fitness{grid-column:span 6}
  .c-summer .ph,.c-copa .ph{aspect-ratio:4/3}
}