/* ═══════════════════════════════════════════════
   KEIKO GEAR — performance apparel spec sheet
   Palette sampled from brand banner: charcoal #2b2b2b,
   bone white, sharp slash-red #d8232a.
   ═══════════════════════════════════════════════ */

:root{
  --ink:#15151a;        /* deepest charcoal */
  --char:#1e1e22;       /* panel charcoal */
  --char2:#2b2b2b;      /* exact banner charcoal */
  --bone:#efece4;       /* warm bone bg */
  --bone-2:#e4e0d6;
  --paper:#ffffff;      /* product cutout bg */
  --red:#d8232a;        /* slash red */
  --red-d:#b51820;
  --mute:#8a8a86;
  --mute-d:#6b6b67;
  --line-d:rgba(255,255,255,.14);  /* hairline on dark */
  --line-l:rgba(21,21,26,.16);     /* hairline on light */

  --serif:'Archivo Expanded',sans-serif;
  --sans:'Archivo',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;

  --pad: clamp(18px, 5vw, 80px);
  --maxw: 1380px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:#15151a;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.display{font-family:var(--serif);font-weight:900;line-height:.86;letter-spacing:-.01em;text-transform:uppercase}

/* ── the // slash motif ─────────────────────── */
.slash{display:inline-flex;gap:.22em;transform:skewX(-12deg)}
.slash i{display:block;width:.26em;height:1em;background:var(--red)}
.slash--xl{font-size:inherit}

/* ════════════ TOP BAR ════════════ */
.bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--pad);
  background:rgba(21,21,26,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-d);
}
.bar__brand{display:flex;align-items:center;gap:12px;color:#fff}
.bar__brand .slash{font-size:15px}
.bar__name{font-family:var(--serif);font-weight:800;letter-spacing:.04em;font-size:16px;color:#fff}
.bar__nav{display:flex;gap:26px;margin-left:auto}
.bar__nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#c9c9c4;position:relative;padding:4px 0;
}
.bar__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--red);transition:width .3s var(--ease)}
.bar__nav a:hover{color:#fff}
.bar__nav a:hover::after{width:100%}
.bar__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;border:1px solid var(--line-d);padding:9px 16px;border-radius:2px;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.bar__cta span{transition:transform .25s var(--ease)}
.bar__cta:hover{background:var(--red);border-color:var(--red)}
.bar__cta:hover span{transform:translateX(4px)}

/* ════════════ HERO ════════════ */
.hero{background:var(--ink);color:#fff;padding:clamp(40px,7vw,96px) var(--pad) 0;position:relative}
.hero::before{ /* faint grid line down the page */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--line-d) 1px,transparent 1px) 0 0/ calc(100%/12) 100%;
  opacity:.35;mask:linear-gradient(180deg,#000,transparent 80%);
}
.hero__grid{
  max-width:var(--maxw);margin:0 auto;position:relative;
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  grid-template-areas:"title shot" "meta shot";
  gap:0 clamp(24px,4vw,64px);
  align-items:end;
}
.hero__title{grid-area:title;padding-bottom:clamp(20px,3vw,40px)}
.kicker{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.hero .display{font-size:clamp(64px,14vw,196px)}
.hero .line{display:block;overflow:hidden}
.hero .line>span{display:inline-block}
.hero .line--accent{display:flex;align-items:center;gap:.16em}
.hero .line--accent .slash{font-size:clamp(40px,9vw,120px);align-self:center}
.hero__lede{max-width:48ch;margin-top:28px;font-size:clamp(15px,1.4vw,18px);color:#d4d4cf;line-height:1.55}

.hero__meta{grid-area:meta;border-top:1px solid var(--line-d);padding-top:22px;align-self:end}
.speclist{list-style:none;display:grid;gap:0}
.speclist li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line-d);
}
.speclist span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.speclist b{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff}
.hero__tag{margin-top:18px;font-size:13.5px;color:#b7b7b2;max-width:34ch;line-height:1.5}

.hero__shot{grid-area:shot;position:relative;align-self:end;background:var(--paper);padding:clamp(14px,2vw,26px);border:1px solid var(--line-d)}
.hero__shot img{width:100%;aspect-ratio:1/1.04;object-fit:cover;mix-blend-mode:multiply}
.hero__shot figcaption{display:flex;gap:10px;align-items:baseline;margin-top:12px;font-size:12.5px;font-weight:600;color:#15151a}
.hero__shot figcaption .mono{font-size:10.5px;color:var(--red-d)}
.frame-tick{position:absolute;width:11px;height:11px;border:1.5px solid var(--red);z-index:2}
.frame-tick--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame-tick--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame-tick--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame-tick--br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ════════════ TICKER ════════════ */
.ticker{background:var(--red);color:#fff;overflow:hidden;border-block:1px solid var(--red-d);margin-top:clamp(40px,7vw,96px)}
.ticker__row{display:flex;align-items:center;gap:26px;white-space:nowrap;padding:11px 0;width:max-content;animation:marq 32s linear infinite}
.ticker__row span{font-family:var(--serif);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.ticker__row i{width:6px;height:6px;background:#fff;transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ════════════ shared section heads ════════════ */
.sec-head{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line-l);padding-bottom:14px;margin-bottom:clamp(28px,4vw,56px)}
.sec-no{font-family:var(--serif);font-weight:900;font-size:13px;color:var(--red);letter-spacing:.05em}
.sec-label{font-size:12px;letter-spacing:.1em;color:var(--mute-d)}
.sec-head--light{border-color:var(--line-d)}
.sec-head--light .sec-label{color:#9a9a95}

/* ════════════ DOSSIER ════════════ */
.dossier{background:var(--bone);color:#15151a;padding:clamp(48px,8vw,110px) var(--pad)}
.dossier>*{max-width:var(--maxw);margin-inline:auto}
.dossier__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.h2{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.6vw,48px);line-height:1.02;letter-spacing:-.01em}
.dossier__body p{font-size:clamp(15px,1.35vw,17px);color:#3a3a38;max-width:54ch}
.dossier__body p+p{margin-top:16px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(40px,6vw,80px);border-top:2px solid #15151a}
.stat{padding:24px 22px 22px;border-right:1px solid var(--line-l);position:relative}
.stat:last-child{border-right:0}
.stat dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-d)}
.stat dd{font-size:clamp(46px,6vw,82px);margin:6px 0 8px;color:#15151a}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#7a7a76}
.stat::before{content:"";position:absolute;top:-2px;left:0;width:34px;height:2px;background:var(--red)}

/* ════════════ LINES ════════════ */
.lines{background:var(--bone-2);color:#15151a;padding:clamp(48px,8vw,110px) var(--pad)}
.lines>.sec-head{max-width:var(--maxw);margin-inline:auto}
.line-block{max-width:var(--maxw);margin-inline:auto;padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid var(--line-l)}
.line-block:last-child{border-bottom:0;padding-bottom:0}
.line-block__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:start;margin-bottom:clamp(22px,3vw,40px)}
.line-no{font-size:clamp(34px,5vw,68px);color:var(--red)}
.line-block__title h4{font-family:var(--serif);font-weight:800;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em;text-transform:uppercase}
.line-block__title p{margin-top:10px;font-size:14.5px;color:#46463f;max-width:56ch}
.line-block__tag{align-self:start;justify-self:end;font-size:10.5px;color:#15151a;border:1px solid var(--line-l);padding:6px 11px;border-radius:2px;text-align:right;white-space:nowrap}

/* modular product grids — deliberate asymmetry */
.grid{display:grid;gap:14px}
.grid--hoodie{grid-template-columns:repeat(6,1fr)}
.grid--hoodie .card--feature{grid-column:span 3;grid-row:span 2}
.grid--hoodie .card{grid-column:span 3}
.grid--hoodie .card--detail{grid-column:span 3}

.grid--tee{grid-template-columns:repeat(6,1fr)}
.grid--tee .card--feature{grid-column:span 4;grid-row:span 2}
.grid--tee .card{grid-column:span 2}

.grid--jersey{grid-template-columns:repeat(6,1fr)}
.grid--jersey .card--feature{grid-column:span 4;grid-row:span 2}
.grid--jersey .card{grid-column:span 2}

.card{position:relative;background:var(--paper);border:1px solid var(--line-l);overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .7s var(--ease);mix-blend-mode:multiply}
.card--feature{background:#fff}
.card--feature img{aspect-ratio:auto;min-height:100%;object-fit:contain;padding:7%;mix-blend-mode:multiply}
.card figcaption{
  position:absolute;left:0;bottom:0;right:0;
  display:flex;gap:9px;align-items:baseline;
  padding:11px 13px;font-size:12px;font-weight:600;color:#15151a;
  background:linear-gradient(0deg,rgba(255,255,255,.96),rgba(255,255,255,.0));
  transform:translateY(8px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.card figcaption .mono{font-size:10px;color:var(--red-d)}
.card:hover figcaption{transform:none;opacity:1}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red);opacity:0;transition:opacity .3s var(--ease)}
.card:hover::after{opacity:1}

/* ════════════ BUILD / SPEC ════════════ */
.spec{background:var(--ink);color:#fff;padding:clamp(48px,8vw,110px) var(--pad)}
.spec>*{max-width:var(--maxw);margin-inline:auto}
.h2--light{color:#fff}
.spec__intro{margin-bottom:clamp(30px,4vw,56px);max-width:18ch}
.spec__list{list-style:none;border-top:1px solid var(--line-d)}
.spec__row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-d);transition:padding-left .3s var(--ease)}
.spec__k{font-size:12px;color:var(--red);letter-spacing:.05em}
.spec__v{font-size:clamp(15px,1.5vw,19px);color:#d8d8d2;line-height:1.45;max-width:60ch}
.spec__row:hover{padding-left:14px}
.spec__row:hover .spec__v{color:#fff}

/* ════════════ CTA ════════════ */
.cta{background:var(--red);color:#fff;padding:clamp(56px,9vw,128px) var(--pad);text-align:center;position:relative;overflow:hidden}
.cta::before,.cta::after{content:"";position:absolute;top:-20%;width:48vw;height:140%;border:1px solid rgba(255,255,255,.16);transform:skewX(-12deg)}
.cta::before{left:-24vw}
.cta::after{right:-24vw}
.cta__inner{max-width:var(--maxw);margin-inline:auto;position:relative}
.cta__inner>.slash{font-size:30px;margin-bottom:22px}
.cta__inner>.slash i{background:#fff}
.cta__title{font-size:clamp(40px,8vw,104px);color:#fff}
.cta__sub{margin:20px auto 34px;font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.86);max-width:40ch}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:16px 26px;border-radius:2px;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.btn span{transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-3px);background:#000}
.btn:hover span{transform:translateX(5px)}
.cta__file{display:block;margin-top:30px;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.08em}

/* ════════════ FOOTER ════════════ */
.foot{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) var(--pad) 30px;border-top:1px solid var(--line-d)}
.foot>*{max-width:var(--maxw);margin-inline:auto}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:38px}
.foot__brand .slash{font-size:16px}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:32px;border-bottom:1px solid var(--line-d)}
.foot__h{display:block;font-size:11px;color:var(--mute);margin-bottom:12px}
.foot__cols p{font-size:14px;color:#cfcfca;line-height:1.7}
.foot__cols a{color:#cfcfca;transition:color .2s}
.foot__cols a:hover{color:var(--red)}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px}
.foot__base .mono{font-size:11px;color:var(--mute)}

/* ════════════ MOTION — load + reveal ════════════ */
[data-load]{opacity:0;transform:translateY(26px)}
.hero .line>span{transform:translateY(110%);display:inline-block;transition:transform .9s var(--ease)}
.loaded .hero .line>span{transform:none}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-load],.reveal,.hero .line>span{opacity:1!important;transform:none!important}
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"title" "shot" "meta";gap:32px}
  .hero__shot{max-width:420px}
  .hero .display{font-size:clamp(58px,17vw,120px)}
  .dossier__grid{grid-template-columns:1fr;gap:24px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-l)}
  .line-block__head{grid-template-columns:auto 1fr;grid-template-areas:"no title" "tag tag";gap:14px 22px}
  .line-no{grid-area:no}.line-block__title{grid-area:title}
  .line-block__tag{grid-area:tag;justify-self:start;margin-top:4px}
  .grid--hoodie,.grid--tee,.grid--jersey{grid-template-columns:repeat(2,1fr)}
  .grid--hoodie .card,.grid--tee .card,.grid--jersey .card,
  .grid--hoodie .card--feature,.grid--tee .card--feature,.grid--jersey .card--feature{grid-column:span 1;grid-row:auto}
  .card img,.card--feature img{aspect-ratio:1/1}
}
@media (max-width:560px){
  .bar__nav{display:none}
  .spec__row{grid-template-columns:1fr;gap:6px}
  .foot__cols{grid-template-columns:1fr;gap:22px}
}