/* ============================================================
   AXIS — Streetwear HTML Template v1.0
   Design tokens. Edit these six colors to rebrand everything.
============================================================ */
:root{
  --ax-black:#000000;
  --ax-white:#ffffff;
  --ax-gray:#f4f4f4;
  --ax-red:#ff4040;
  --ax-red-dark:#c81e12; /* AA contrast on white (5.9:1) */
  --ax-red-signal:#ff211e;
  --ax-font-display:'Anton','Oswald',sans-serif;
  --ax-font-label:'Oswald',sans-serif;
  --ax-font-body:'Noto Sans JP',sans-serif;
}
/* ============================================================
   AXIS THEME — Design-System Core
   black/white + signal red · skew -25°/±36.4° · no radius, no shadows
============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;line-height:1.6;scroll-behavior:smooth}
body{
  font-size:1.6rem;
  font-family:var(--ax-font-body);
  letter-spacing:.05em;
  color:var(--ax-black);
  background:var(--ax-black);
  min-width:350px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:all .3s ease}
ul{list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ax-red);outline-offset:3px}
::selection{background:var(--ax-red);color:var(--ax-black)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.ax-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- section scaffolding ---------- */
.ax-section{position:relative;padding:9.6rem 8vw;margin-top:-1px}
.ax-light{background:var(--ax-white);color:var(--ax-black)}
.ax-gray{background:var(--ax-gray);color:var(--ax-black)}
.ax-dark{background:var(--ax-black);color:var(--ax-white)}
.ax-title{font-family:var(--ax-font-display);font-size:clamp(4.8rem,8vw,11rem);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;color:var(--ax-red);margin:0 0 6rem -8vw;padding-left:8vw}
.ax-dark .ax-title{color:var(--ax-white)}
.ax-title small{display:block;font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.4em;color:var(--ax-black);margin-bottom:1.2rem}
.ax-dark .ax-title small{color:var(--ax-red)}

/* skewed badge */
.ax-badge{position:relative;z-index:0;display:inline-block;padding:.5em 1.8em;color:var(--ax-white);font-family:var(--ax-font-label);font-size:1.2rem;letter-spacing:.25em;text-transform:uppercase}
.ax-badge::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ax-black);transform:scaleX(1.08) skewX(-25deg)}
.ax-badge--red::before{background:var(--ax-red)}
.ax-badge--red{color:var(--ax-black)}

/* deco diagonals */
.ax-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ax-deco i{position:absolute;width:1px;height:160%;background:var(--ax-red);opacity:.35;transform:rotate(36.4deg);top:-30%}
.ax-deco i:nth-child(1){left:12%}
.ax-deco i:nth-child(2){left:14%;opacity:.15}
.ax-deco i:nth-child(3){left:78%}
.ax-deco i:nth-child(4){left:81%;opacity:.15}
.ax-deco i:nth-child(5){left:45%;opacity:.1;background:var(--ax-black)}

/* ---------- header ---------- */
.ax-header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.ax-header>*{pointer-events:auto}
.ax-navbtn{width:80px;height:80px;background:var(--ax-black);color:var(--ax-white);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:0}
.ax-navbtn:hover{background:var(--ax-red)}
.ax-navbtn .lines{position:relative;width:36px;height:14px}
.ax-navbtn .lines span{position:absolute;left:0;width:36px;height:2px;background:var(--ax-white);transition:all .3s ease}
.ax-navbtn .lines span:first-child{top:0}
.ax-navbtn .lines span:last-child{bottom:0}
.ax-navbtn .t{font-family:var(--ax-font-label);font-size:1.1rem;letter-spacing:.2em}
.ax-header-right{display:flex}
.ax-cartbtn{height:80px;padding:0 28px;background:var(--ax-black);color:var(--ax-white);display:flex;align-items:center;gap:12px;font-family:var(--ax-font-label);font-size:1.4rem;letter-spacing:.15em}
.ax-cartbtn:hover{background:var(--ax-red);color:var(--ax-black)}
.ax-cartbtn .count{background:var(--ax-red);color:var(--ax-black);font-weight:600;min-width:22px;height:22px;display:grid;place-items:center;font-size:1.2rem;transform:skewX(-25deg)}
.ax-cartbtn:hover .count{background:var(--ax-black);color:var(--ax-white)}

/* fullscreen menu */
.ax-menu{position:fixed;inset:0;z-index:95;background:var(--ax-black);visibility:hidden;opacity:0;clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .5s ease,opacity .3s ease,visibility 0s .5s}
body.ax-menu-open .ax-menu{visibility:visible;opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .5s ease,opacity .2s ease}
.ax-menu .bgimg{position:absolute;inset:0;background-position:center 20%;background-size:cover;filter:grayscale(1) brightness(.28)}
.ax-menu-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:6vw;padding:0 10vw}
.ax-menu-nav{display:grid;grid-template-columns:repeat(2,max-content);gap:1.2rem 6rem}
.ax-menu-nav a{font-family:var(--ax-font-label);font-weight:500;font-size:clamp(2.4rem,3.2vw,4rem);letter-spacing:.12em;color:var(--ax-white);text-transform:uppercase;padding:.3em .8em;opacity:0;transform:translateX(-30px)}
body.ax-menu-open .ax-menu-nav a{opacity:1;transform:translateX(0);transition:opacity .4s ease,transform .4s ease,background .3s ease,color .3s ease}
body.ax-menu-open .ax-menu-nav a:nth-child(1){transition-delay:.15s}
body.ax-menu-open .ax-menu-nav a:nth-child(2){transition-delay:.2s}
body.ax-menu-open .ax-menu-nav a:nth-child(3){transition-delay:.25s}
body.ax-menu-open .ax-menu-nav a:nth-child(4){transition-delay:.3s}
body.ax-menu-open .ax-menu-nav a:nth-child(5){transition-delay:.35s}
body.ax-menu-open .ax-menu-nav a:nth-child(6){transition-delay:.4s}
body.ax-menu-open .ax-menu-nav a:nth-child(7){transition-delay:.45s}
body.ax-menu-open .ax-menu-nav a:nth-child(8){transition-delay:.5s}
.ax-menu-nav a:hover{background:var(--ax-red);color:var(--ax-black)}
.ax-menu-logo{font-family:var(--ax-font-display);font-size:clamp(6rem,9vw,12rem);color:var(--ax-white);line-height:1;flex-shrink:0}
.ax-menu-logo .x{color:var(--ax-red)}
.ax-menu-foot{position:absolute;left:10vw;bottom:4rem;display:flex;gap:3.2rem;font-family:var(--ax-font-label);font-size:1.2rem;letter-spacing:.25em;color:rgba(255,255,255,.6)}
.ax-menu-foot a:hover{color:var(--ax-red)}
body.ax-menu-open .ax-navbtn{background:var(--ax-red)}
body.ax-menu-open .ax-navbtn .lines span{background:var(--ax-black)}
body.ax-menu-open .ax-navbtn .lines span:first-child{top:50%;transform:rotate(20deg)}
body.ax-menu-open .ax-navbtn .lines span:last-child{bottom:50%;transform:rotate(-20deg) translateY(2px)}
body.ax-menu-open .ax-navbtn .t{color:var(--ax-black)}
@media(max-width:900px){
  .ax-menu-inner{flex-direction:column;justify-content:center;align-items:flex-start;gap:6rem;padding:0 8vw}
  .ax-menu-nav{grid-template-columns:1fr;gap:.6rem}
  .ax-menu-logo{order:-1;font-size:5.6rem}
}

/* ---------- hero ---------- */
.ax-hero{position:relative;background:var(--ax-white);min-height:100vh;overflow:hidden;display:flex;flex-direction:column}
.ax-xbg{position:absolute;inset:0;pointer-events:none}
.ax-xbg .half{position:absolute;inset:0}
.ax-xbg .half.r{text-align:right}
.ax-xbg svg{height:100%;width:auto;fill:transparent;stroke-width:1px;stroke-dasharray:1000px;animation:axStroke 3s linear infinite}
.ax-xbg .static svg{stroke:#dcdcdc;opacity:.5;animation:none;stroke-dasharray:none}
.ax-xbg .anim svg{stroke:var(--ax-red)}
@keyframes axStroke{from{stroke-dashoffset:2000px}to{stroke-dashoffset:0}}
.ax-hero-inner{position:relative;flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:4vw;align-items:center;padding:120px 8vw 140px;width:100%;max-width:1600px;margin:0 auto}
.ax-hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.ax-hero h1{font-family:var(--ax-font-display);font-size:clamp(8rem,16vw,22rem);line-height:.85;text-transform:uppercase;letter-spacing:-.01em;margin-left:-.045em;color:var(--ax-black)}
.ax-hero h1 .x{color:var(--ax-red)}
.ax-hero h1 .row2{display:block;color:var(--ax-red);font-size:.42em;letter-spacing:.02em;margin-top:.18em}
.ax-hero-sub{max-width:46ch;margin-top:3.2rem;font-size:1.5rem;line-height:2}
.ax-hero-sub b,.ax-hero-sub strong{color:var(--ax-red-dark)}
.ax-cta{display:inline-flex;align-items:center;gap:14px;margin-top:4rem;align-self:flex-start;font-family:var(--ax-font-label);font-size:1.4rem;letter-spacing:.25em;color:var(--ax-black);border:1px solid var(--ax-black);padding:1.4em 3em;position:relative;overflow:hidden;text-transform:uppercase}
.ax-cta::before{content:"";position:absolute;inset:0;background:var(--ax-red);transform:translateX(-101%) skewX(-25deg) scaleX(1.2);transition:transform .35s ease;z-index:0}
.ax-cta:hover::before{transform:translateX(0) skewX(0) scaleX(1)}
.ax-cta span{position:relative;z-index:1}
.ax-cta:hover{color:var(--ax-black);border-color:var(--ax-red)}
.ax-dark .ax-cta{color:var(--ax-white);border-color:var(--ax-white)}
.ax-dark .ax-cta:hover{color:var(--ax-black)}
/* featured product */
.ax-feat{position:relative;justify-self:end;width:min(36vw,480px)}
.ax-feat .frame{position:relative;aspect-ratio:4/5;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);overflow:hidden;background:var(--ax-gray)}
.ax-feat img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.ax-feat .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 80%,var(--ax-red) 80.2% 83.5%,transparent 83.7% 88%,var(--ax-black) 88.2% 100%)}
.ax-feat .feat-tag{position:absolute;top:-1.2rem;left:16%;background:var(--ax-black);color:var(--ax-white);font-family:var(--ax-font-label);font-size:1.1rem;letter-spacing:.25em;padding:.5em 1.8em;transform:skewX(-25deg);z-index:3}
.ax-feat .feat-num{position:absolute;right:-2%;bottom:-3rem;font-family:var(--ax-font-display);font-size:9.6rem;line-height:1;color:var(--ax-red);z-index:2}
.ax-feat .feat-meta{margin-top:1.6rem;display:flex;justify-content:space-between;font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.15em;text-transform:uppercase}
@media(max-width:900px){.ax-hero-inner{grid-template-columns:1fr}.ax-feat{display:none}}
/* band */
.ax-band{position:relative;background:var(--ax-black);color:var(--ax-white);text-align:center;padding:1.4rem 2rem;font-weight:700;font-size:1.5rem;letter-spacing:.1em}
.ax-band .date{color:var(--ax-red)}
.ax-band .live{display:inline-block;background:var(--ax-red);color:var(--ax-black);font-family:var(--ax-font-label);font-size:1.1rem;letter-spacing:.25em;padding:.2em 1.2em;margin-right:1.6rem;transform:skewX(-25deg);animation:axBlink 2.4s ease-in-out infinite}
@keyframes axBlink{50%{opacity:.5}}
/* marquee */
.ax-marquee{background:var(--ax-white);border-top:1px solid #eee;overflow:hidden;white-space:nowrap;padding:1.2rem 0}
.ax-marquee .track{display:inline-block;animation:axMq 26s linear infinite;font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.4em;color:var(--ax-black);text-transform:uppercase}
.ax-marquee .sep{color:var(--ax-red);margin:0 2.4rem}
@keyframes axMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ax-marquee:hover .track{animation-play-state:paused}

/* ---------- product grid ---------- */
.ax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:3.2rem 2.4rem}
.ax-prod{position:relative;display:block}
.ax-prod-visual{position:relative;aspect-ratio:3/4;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);background:var(--ax-gray);overflow:hidden;transition:transform .3s ease}
.ax-prod:hover .ax-prod-visual{transform:translateX(10px)}
.ax-prod-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .35s ease,transform .35s ease}
.ax-prod:hover .ax-prod-visual img{filter:grayscale(0);transform:scale(1.04)}
.ax-prod-visual .accent{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 0 70%,var(--ac,var(--ax-red)) 70.2% 76%,transparent 76.2% 82%,var(--ax-black) 82.2% 100%)}
.ax-prod-num{position:absolute;left:6%;bottom:2%;font-family:var(--ax-font-display);font-size:6.4rem;line-height:1;color:var(--ax-red);z-index:2}
.ax-prod-tag{position:absolute;top:0;right:8%;background:var(--ax-black);color:var(--ax-white);font-family:var(--ax-font-label);font-size:1.1rem;letter-spacing:.2em;padding:.4em 1.4em;z-index:2;transform:skewX(-25deg);text-transform:uppercase}
.ax-prod-tag--soldout{background:var(--ax-red-signal)}
.ax-prod-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.6rem;padding:0 4%;gap:1.2rem}
.ax-prod-name{font-family:var(--ax-font-label);font-size:1.5rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.ax-prod-price{font-weight:700;font-size:1.5rem;white-space:nowrap}
.ax-prod-price s{opacity:.45;font-weight:400;margin-right:.6em}
.ax-prod:hover .ax-prod-name{color:var(--ax-red-dark)}

/* ---------- drops list (news pattern) ---------- */
.ax-drops{background:var(--ax-black);margin:0 4%;padding-top:4rem}
.ax-drops li a{display:block;position:relative;background:var(--ax-black);padding:3rem 8rem 3rem 4rem;border-top:4px solid var(--ax-red)}
.ax-drop-date{position:absolute;left:0;top:-4px;height:16px;background:var(--ax-red);color:var(--ax-black);font-size:1.3rem;font-weight:700;line-height:16px;padding:0 8px 0 4rem}
.ax-drop-title{color:var(--ax-white);line-height:2;transition:transform .3s ease;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ax-drop-title .st{font-family:var(--ax-font-label);letter-spacing:.2em;font-size:1.2rem;color:var(--ax-red);align-self:center;text-transform:uppercase}
.ax-drops li a::after{content:"";position:absolute;right:4rem;top:50%;width:8px;height:26px;margin-top:-13px;background:var(--ax-red);clip-path:polygon(0 0,100% 50%,0 100%,38% 50%);transition:all .3s ease}
.ax-drops li a:hover::after{transition-delay:.2s;transform:translateX(15px)}
.ax-drops li a:hover .ax-drop-title{transform:translateX(15px)}

/* ---------- manifesto / rich text ---------- */
.ax-manifesto p{max-width:60ch;font-size:1.6rem;line-height:2.2;margin-bottom:2.4rem;font-weight:500}
.ax-manifesto .accent{color:var(--ax-red);font-weight:700;font-size:2.4rem;line-height:1.8}

/* ---------- newsletter ---------- */
.ax-signup{display:flex;gap:0;max-width:560px;margin-top:4rem}
.ax-signup input{flex:1;background:transparent;border:1px solid var(--ax-white);border-right:0;color:var(--ax-white);font-family:var(--ax-font-body);font-size:1.4rem;letter-spacing:.05em;padding:1.4em 1.6em;outline:none;border-radius:0}
.ax-signup input::placeholder{color:rgba(255,255,255,.4)}
.ax-signup button{background:var(--ax-red);color:var(--ax-black);border:0;font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.25em;padding:0 3em;text-transform:uppercase}
.ax-signup button:hover{background:var(--ax-white)}
.ax-signup-msg{margin-top:1.6rem;font-size:1.3rem}
.ax-signup-msg.ok{color:var(--ax-red)}

/* ---------- footer ---------- */
.ax-footer{background:var(--ax-black);color:var(--ax-white);padding:8rem 8vw 3rem;text-align:center;margin-top:-1px}
.ax-footer-badge{position:relative;display:inline-block;z-index:0;color:var(--ax-white);font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.3em;padding:.5em 2.4em;margin-bottom:3.2rem;text-transform:uppercase}
.ax-footer-badge::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ax-red-signal);transform:scaleX(1.1) skewX(-25deg)}
.ax-footer-nav{display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;font-family:var(--ax-font-label);font-size:1.3rem;letter-spacing:.2em;margin-bottom:4rem;text-transform:uppercase}
.ax-footer-nav a:hover{color:var(--ax-red-signal)}
.ax-footer-logo{font-family:var(--ax-font-display);font-size:6rem;line-height:1;letter-spacing:.02em}
.ax-footer-logo .x{color:var(--ax-red)}
.ax-footer .copy{font-size:1rem;letter-spacing:0;opacity:.5;margin-top:3rem}

/* ---------- mobile ---------- */
@media(max-width:768px){
  .ax-navbtn{width:64px;height:64px}
  .ax-cartbtn{height:64px;padding:0 18px;font-size:1.2rem}
  .ax-hero-inner{padding:96px 6.4vw 110px}
  .ax-hero h1{font-size:clamp(6.4rem,21vw,11rem)}
  .ax-hero-sub{font-size:1.4rem}
  .ax-cta{padding:1.2em 2.2em;font-size:1.3rem}
  .ax-band{font-size:1.2rem;padding:1.2rem 4vw}
  .ax-band .live{margin-right:.8rem}
  .ax-section{padding:7.2rem 6.4vw}
  .ax-title{margin:0 0 4rem -6.4vw;padding-left:6.4vw}
  .ax-grid{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.6rem}
  .ax-prod-num{font-size:4.4rem}
  .ax-prod-name{font-size:1.2rem}
  .ax-prod-price{font-size:1.3rem}
  .ax-prod-tag{font-size:1rem;padding:.3em 1em}
  .ax-drops{margin:0;padding-top:3.2rem}
  .ax-drops li a{padding:2.4rem 5.6rem 2.4rem 2.4rem}
  .ax-drops li a::after{right:2rem}
  .ax-drop-date{padding-left:2.4rem;font-size:1.2rem}
  .ax-drop-title{font-size:1.4rem;line-height:1.8}
  .ax-manifesto p{font-size:1.4rem}
  .ax-manifesto .accent{font-size:1.8rem}
  .ax-signup{flex-direction:column;max-width:none}
  .ax-signup input{border-right:1px solid var(--ax-white)}
  .ax-signup button{padding:1.4em 3em}
  .ax-footer{padding:6.4rem 6.4vw 2.4rem}
  .ax-footer-nav{gap:2rem 2.8rem;font-size:1.2rem}
  .ax-footer-logo{font-size:4.4rem}
  .ax-marquee .track{font-size:1.1rem}
}


/* ---------- entrance & reveal ---------- */
.ax-hero .ax-badge{animation:axRise .6s .05s ease both}
.ax-hero h1{animation:axRise .7s .12s ease both}
.ax-hero-sub{animation:axRise .7s .22s ease both}
.ax-hero .ax-cta{animation:axRise .7s .32s ease both}
.ax-feat{animation:axRise .8s .3s ease both}
@keyframes axRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ax-feat img{filter:grayscale(.15) contrast(1.04)}
.ax-reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.ax-reveal.is-in{opacity:1;transform:none}
/* ghost display word */
.has-ghost{overflow:hidden}
.ax-ghost{position:absolute;right:-.03em;top:-.06em;font-family:var(--ax-font-display);font-size:clamp(10rem,20vw,26rem);line-height:1;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.07);pointer-events:none;user-select:none;text-transform:uppercase;z-index:0;white-space:nowrap}
.ax-dark .ax-ghost,.ax-section--dark-grid .ax-ghost{-webkit-text-stroke-color:rgba(255,255,255,.07)}

/* hero duo feature */
.ax-feat--duo{width:min(38vw,640px);justify-self:center}
.ax-feat--duo .duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.ax-feat--duo .frame{position:relative;aspect-ratio:auto;clip-path:polygon(3.5% 0,100% 0,96.5% 100%,0 100%);overflow:hidden;background:var(--ax-gray)}
.ax-feat--duo .frame::after{background:linear-gradient(115deg,transparent 0 84%,var(--ax-red) 84.2% 88%,transparent 88.2% 92%,var(--ax-black) 92.2% 100%)}
.ax-feat--duo .frame--b{margin-top:4.8rem}
.ax-feat--duo .frame{aspect-ratio:3/4.2}
.ax-feat--duo .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .6s ease}
.ax-feat--duo .frame img.is-on{opacity:1}
.ax-feat--duo .mini-num{position:absolute;left:10%;bottom:.6rem;font-family:var(--ax-font-display);font-size:3.6rem;line-height:1;color:var(--ax-red);z-index:2}
.ax-feat--duo .feat-tag{left:10%}
@media(max-width:1100px){.ax-feat--duo{width:36vw}}