/* =====================================================================
   WAVES — css/index.css : home page composition
   Uses ONLY tokens.css custom properties (colors / type / space / ease).
   ===================================================================== */

/* ---- MOBILE NAV TOGGLE -------------------------------------------- */
.nav-toggle{ position:relative; z-index:210; width:44px; height:44px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:inherit; }
.nav-toggle span{ display:block; width:26px; height:2px; background:currentColor; transition:transform .4s var(--ease-out-expo), opacity .3s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
body.nav-open .site-header{ mix-blend-mode:normal; color:var(--color-on-surface); }

/* ---- HERO ---------------------------------------------------------- */
.hero{ position:relative; display:flex; align-items:center; padding-block:var(--space-6) var(--space-5); overflow:hidden; }
.hero__inner{ position:relative; z-index:3; width:100%; }
.hero__kicker{ color:var(--color-muted); margin-bottom:var(--space-2); }
.hero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,17vw,15rem); line-height:0.86; letter-spacing:-0.045em; text-transform:uppercase; }
.hero__lead{ max-width:38ch; margin-top:var(--space-3); }
.hero__scroll{ color:var(--color-accent); margin-top:var(--space-4); }
.hero__spine{ position:absolute; left:clamp(0.4rem,2vw,1.6rem); top:50%; transform:translateY(-50%); z-index:3; height:16em; display:flex; align-items:center; }

.hero__disc{ position:absolute; right:-8vw; top:50%; transform:translateY(-50%); width:clamp(300px,46vw,660px); aspect-ratio:1; z-index:1; pointer-events:none; }
.disc{ position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%, rgba(22,19,15,0.94) 0 1px, rgba(32,27,20,0.94) 1px 3.5px); box-shadow:inset 0 0 0 2px rgba(22,19,15,0.5); animation:disc-spin 9s linear infinite; }
.disc__label{ position:absolute; top:50%; left:50%; width:36%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--color-surface); color:var(--color-on-surface); display:grid; place-content:center; text-align:center; gap:0.25em; box-shadow:inset 0 0 0 1px var(--color-hairline-light); }
.disc__brand{ font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,2.8vw,2rem); letter-spacing:-0.02em; line-height:1; }
.disc__rpm{ font-size:0.62em; opacity:0.85; }
.disc__hole{ position:absolute; top:50%; left:50%; width:3.4%; aspect-ratio:1; transform:translate(-50%,-50%); background:var(--color-bg); border-radius:50%; z-index:2; }
.disc__dot{ position:absolute; top:50%; left:50%; width:7%; aspect-ratio:1; transform:translate(150%,-50%); background:var(--color-accent); border-radius:50%; z-index:2; box-shadow:0 0 0 2px var(--color-bg); }
@keyframes disc-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ---- MANIFESTO ----------------------------------------------------- */
.manifesto__panel{ position:relative; overflow:hidden; padding-block:var(--space-6); }
.manifesto__grid{ align-items:end; position:relative; z-index:2; }
.manifesto__head .mono{ color:var(--color-on-surface); opacity:0.7; margin-bottom:var(--space-2); }
.manifesto__head .jp-head{ color:var(--color-on-surface); font-size:var(--step-3); }
.manifesto__body{ color:var(--color-on-surface); }
.manifesto__body .accent-word{ color:var(--color-accent); font-weight:700; }
.manifesto__ghost{ bottom:-0.14em; right:3vw; font-size:clamp(6rem,24vw,22rem); color:var(--color-on-surface); opacity:0.06; z-index:1; }

/* ---- CRATES -------------------------------------------------------- */
.crates__head .mono{ color:var(--color-muted); margin-bottom:var(--space-2); }
.crates__figure{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; margin-block:var(--space-4) var(--space-5); }
.crates__figure-num{ font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; font-size:clamp(4rem,16vw,13rem); line-height:0.78; letter-spacing:-0.03em; }
.crates__figure-unit{ color:var(--color-muted); }

.crate-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:start; }
.jacket-card{ position:relative; }
.jc-a{ grid-column:1 / 6; }
.jc-b{ grid-column:7 / 11; margin-top:var(--space-6); }
.jc-c{ grid-column:9 / 13; margin-top:calc(-1 * var(--space-4)); z-index:3; }
.jc-d{ grid-column:2 / 6; margin-top:calc(-1 * var(--space-3)); z-index:2; }
.jc-e{ grid-column:6 / 10; margin-top:var(--space-4); }
.jc-f{ grid-column:10 / 13; margin-top:calc(-1 * var(--space-6)); }

/* aspect-ratio pinned here too (not only in tokens) so every jacket —
   including jc-e / jc-f — always resolves a height and renders full. */
.jacket{ position:relative; aspect-ratio:1 / 1; overflow:hidden; box-shadow:0 0 0 1px var(--color-hairline); }
.jk--blue{ background:var(--color-surface); color:var(--color-on-surface); }
.jk--cream{ background:var(--color-bg); color:var(--color-fg); box-shadow:0 0 0 1px var(--color-fg); }
.jk--ink{ background:var(--color-fg); color:var(--color-bg); }
.jacket__art{ position:absolute; inset:0; display:grid; place-content:center; transition:transform .6s var(--ease-out-expo); }
.jacket:hover .jacket__art{ transform:rotate(-4deg) scale(1.05); }
.jacket .grooves{ position:absolute; inset:8%; width:84%; height:84%; opacity:0.5; }
.jacket__type{ position:relative; z-index:2; font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,3.4vw,2.4rem); line-height:0.92; text-align:center; letter-spacing:-0.02em; text-transform:uppercase; }
.jacket__cat{ position:absolute; left:6%; bottom:5%; z-index:3; opacity:0.75; }
.jacket__badge{ position:absolute; top:6%; right:6%; z-index:4; color:var(--color-bg); background:var(--color-accent); padding:0.3em 0.6em; opacity:0; transform:translateY(-6px); transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo); }
.jacket:hover .jacket__badge, .jacket:focus-within .jacket__badge{ opacity:1; transform:none; }
.jacket__spine{ position:absolute; top:0; right:-1.35rem; height:100%; display:flex; align-items:flex-start; }

/* ---- WEEKEND ------------------------------------------------------- */
.weekend__grid{ align-items:start; }
.weekend__stickywrap{ min-height:56vh; }
.weekend__sticky{ position:sticky; top:clamp(90px,18vh,220px); }
.weekend__sticky .mono{ color:var(--color-muted); margin-bottom:var(--space-2); }
.weekend__body{ padding-top:var(--space-2); }
.weekend__cta-wrap{ margin-top:var(--space-4); }

/* ---- FOOTER -------------------------------------------------------- */
.site-footer{ padding-bottom:var(--space-5); position:relative; }
.footer__top{ align-items:end; }
.footer__top .mono{ color:var(--color-muted); margin-bottom:var(--space-2); }
.footer__big{ font-family:var(--font-body); font-weight:700; font-feature-settings:"palt" 1; line-height:1.02; letter-spacing:0.01em; font-size:clamp(3.2rem,14vw,13rem); word-break:keep-all; text-transform:none; }
.footer__en{ display:block; font-family:var(--font-display); font-weight:800; font-size:0.3em; letter-spacing:0.02em; color:transparent; -webkit-text-stroke:1px var(--color-fg); text-stroke:1px var(--color-fg); margin-top:0.15em; text-transform:uppercase; }
.footer__meta{ align-self:end; }
.footer__addr{ font-style:normal; color:var(--color-muted); line-height:2; }
.footer__ig{ color:var(--color-accent); }
.footer__nav{ display:flex; gap:var(--space-3); margin-top:var(--space-3); flex-wrap:wrap; font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:0.12em; font-size:var(--step--1); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-5); padding-top:var(--space-2); gap:var(--space-3); }
.footer__bottom .mono{ color:var(--color-muted); }
.footer__spine{ height:6em; }

/* =====================================================================
   RESPONSIVE — designed states
   ===================================================================== */
@media (max-width:1024px){
  .crate-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); }
  .jc-a{ grid-column:1 / 5; margin-top:0; }
  .jc-b{ grid-column:5 / 9; margin-top:var(--space-5); }
  .jc-c{ grid-column:3 / 7; margin-top:calc(-1 * var(--space-3)); }
  .jc-d{ grid-column:1 / 5; margin-top:var(--space-3); }
  .jc-e{ grid-column:5 / 9; margin-top:0; }
  .jc-f{ grid-column:2 / 6; margin-top:0; }
  .manifesto__head .jp-head{ font-size:var(--step-2); }
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .site-nav{ position:fixed; inset:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-3); padding:var(--page-inline); background:var(--color-surface); color:var(--color-on-surface); mix-blend-mode:normal; transform:translateY(-100%); transition:transform .6s var(--ease-inout-power4); z-index:190; }
  .site-nav.is-open{ transform:none; }
  .site-nav a{ font-size:var(--step-2); font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; }
  .hero{ padding-block:var(--space-7) var(--space-5); }
  /* Disc pushed low + off-canvas so it never crops the WAVES wordmark */
  .hero__disc{ right:-24vw; top:auto; bottom:6%; transform:none; width:min(64vw,300px); opacity:0.75; }
  .hero__title{ font-size:clamp(3.6rem,22vw,7rem); position:relative; z-index:2; }
  .hero__spine{ position:static; transform:none; height:auto; margin-bottom:var(--space-2); }
  /* Reflow the crate into a clean 2-col rhythm — every card full-size */
  .crate-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .jc-a,.jc-b,.jc-c,.jc-d,.jc-e,.jc-f{ grid-column:auto; margin-top:0; }
  .jacket{ aspect-ratio:1 / 1; }
  .jacket__spine{ position:static; height:auto; margin-top:0.4rem; display:block; }
  .weekend__stickywrap{ min-height:auto; }
  .weekend__sticky{ position:static; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__spine{ height:auto; }
}

@media (max-width:480px){
  .hero__disc{ width:min(56vw,230px); right:-20vw; top:auto; bottom:4%; transform:none; opacity:0.6; }
  .crates__figure-unit{ font-size:var(--step--1); }
}

@media (min-width:1800px){
  .hero__lead{ max-width:42ch; }
}

/* Reduced motion: freeze the spinning disc, keep art static */
@media (prefers-reduced-motion: reduce){
  .disc{ animation:none !important; }
  .jacket__badge{ opacity:1; transform:none; }
}