/* ══════════════════════════════════════════════════════════════
   streetwear.net.au — for sale
   Aesthetic: hi-vis industrial / garment-tag brutalism.
   Warm off-black ground, bone type, volt accent, rust stamp.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:       #0b0a09;
  --ink-2:     #15120f;
  --ink-3:     #1d1915;
  --bone:      #efe9dd;
  --concrete:  #8d877d;
  --volt:      #c8ef4b;
  --rust:      #e2402a;
  --line:      #2e2823;

  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Archivo", "Helvetica Neue", sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --ease: cubic-bezier(.16,.84,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6;
  overflow-x:hidden;
  /* concrete wash: two soft off-axis pools, never a flat field */
  background-image:
    radial-gradient(120% 70% at 88% -10%, #241f19 0%, transparent 58%),
    radial-gradient(90%  60% at -10% 32%, #1a1713 0%, transparent 55%);
  background-attachment:fixed;
}

::selection{ background:var(--volt); color:var(--ink); }

/* fixed, non-interactive film grain */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{ outline:3px solid var(--volt); outline-offset:3px; }

/* ── load reveal ─────────────────────────────────────────────── */
.r{ opacity:0; animation:rise .95s var(--ease) var(--d,0s) forwards; }
@keyframes rise{ from{opacity:0; transform:translate3d(0,26px,0);} to{opacity:1; transform:none;} }

/* ── LED ticker ──────────────────────────────────────────────── */
.ticker{
  position:relative; z-index:3;
  background:var(--volt); color:var(--ink);
  border-bottom:2px solid var(--ink);
  overflow:hidden; padding:.5rem 0;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
.ticker__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker__set{ display:inline-flex; align-items:center; gap:.9rem; padding-right:.9rem; }
.ticker__set b{ font-weight:700; }
.ticker__set i{ font-style:normal; opacity:.42; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* ── hero ────────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(3rem,7vw,6rem) var(--pad) clamp(4rem,9vw,8rem); }
.hero::after{  /* hairline rule, stops short of the edge — grid-breaking */
  content:""; position:absolute; left:var(--pad); right:22%; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.hero__grid{
  position:relative; max-width:1400px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(12,1fr); gap:0 clamp(1rem,2vw,2rem);
}

.eyebrow{
  grid-column:1/-1; margin:0 0 clamp(1.5rem,4vw,2.75rem);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--concrete);
  display:flex; align-items:center; gap:.7rem;
}
.dot{ width:7px; height:7px; background:var(--volt); flex:none; }

/* the lockup: condensed, tight-leaded, overlapping the tld */
.lockup{
  grid-column:1/9; margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(4.2rem,17vw,15rem);
  line-height:.82; letter-spacing:-.015em;
  text-transform:uppercase;
}
.lockup__line{ display:block; }
.lockup__line:nth-child(2){ margin-left:clamp(.5rem,4.5vw,5.5rem); color:var(--bone); }
.lockup__tld{
  display:block; margin-top:.12em;
  margin-left:clamp(.25rem,2vw,2.5rem);
  font-size:clamp(1.6rem,5.6vw,4.6rem);
  color:var(--volt); letter-spacing:.01em;
}

/* rotated rubber stamp, deliberately breaking the grid */
.stamp{
  position:absolute; z-index:2;
  top:clamp(.5rem,4vw,3rem); right:0;
  transform:rotate(9deg);
  border:3px solid var(--rust); color:var(--rust);
  padding:.55rem 1.1rem .45rem;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.1rem,3vw,2.3rem); letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--rust) 40%,transparent);
  /* own reveal keyframe so the 9deg rotation is never dropped mid-flight */
  animation:stamp-in .95s var(--ease) var(--d) forwards, sway 7s ease-in-out 2.3s infinite;
}
.stamp__inner{ display:block; opacity:.92; }
@keyframes stamp-in{
  from{ opacity:0; transform:rotate(9deg) translate3d(0,26px,0) scale(.94); }
  to  { opacity:1; transform:rotate(9deg); }
}
@keyframes sway{ 0%,100%{transform:rotate(9deg);} 50%{transform:rotate(6deg) translate3d(0,-4px,0);} }

.hero__sub{
  grid-column:1/7; margin:clamp(2rem,4vw,3rem) 0 0;
  max-width:46ch; color:#cdc6b8; font-size:clamp(1.02rem,.98rem + .4vw,1.28rem);
}
.hero__cta{ grid-column:1/8; display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  --shift:0px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem; border:2px solid var(--volt);
  font-family:var(--mono); font-weight:700; font-size:.8rem;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease),
                            background-color .18s, color .18s;
  transform:translate3d(var(--shift),var(--shift),0);
}
.btn--volt{ background:var(--volt); color:var(--ink); box-shadow:5px 5px 0 0 var(--ink-3); }
.btn--volt:hover,.btn--volt:focus-visible{ --shift:3px; box-shadow:2px 2px 0 0 var(--ink-3); }
.btn--volt:active{ --shift:5px; box-shadow:0 0 0 0 var(--ink-3); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--line); }
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--bone); --shift:3px; }
.btn--wide{ width:100%; }

/* ── woven care label ────────────────────────────────────────── */
.tag{
  grid-column:9/13; grid-row:2/5; align-self:start;
  margin-top:clamp(1rem,3vw,4rem);
  background:
    repeating-linear-gradient(90deg,#100e0b 0 2px,#13100d 2px 4px); /* woven weft */
  border:1px solid var(--line); padding:1.4rem 1.5rem 1.15rem;
  font-family:var(--mono);
}
.tag__brand{
  margin:0 0 1.1rem; padding-bottom:.9rem; border-bottom:1px dashed var(--line);
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tag__brand span{ color:var(--volt); }
.tag__specs{ margin:0; display:grid; gap:.55rem; }
.tag__specs>div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.tag__specs dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--concrete); }
.tag__specs dd{ margin:0; font-size:.78rem; font-weight:700; }
.live{ display:inline-flex; align-items:center; gap:.45rem; color:var(--volt); }
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--volt); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }
.tag__care{
  margin:1.15rem 0 0; padding-top:.85rem; border-top:1px dashed var(--line);
  font-size:.62rem; line-height:1.7; letter-spacing:.11em;
  text-transform:uppercase; color:var(--concrete);
}

/* ── section furniture ───────────────────────────────────────── */
.sect-title{
  margin:0 0 clamp(2rem,5vw,3.5rem);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.9rem,5.5vw,4rem); line-height:.95; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:clamp(.75rem,2vw,1.5rem);
}
.sect-title__num{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.2em;
  color:var(--volt); flex:none; transform:translateY(-.35em);
}

/* ── reasons: zig-zag, not a card row ───────────────────────── */
.name{ padding:clamp(4rem,9vw,8rem) var(--pad); max-width:1400px; margin-inline:auto; }
.reasons{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(2rem,4vw,3.25rem); }
.reason{
  position:relative; max-width:60ch;
  padding:1.75rem 0 1.75rem clamp(3.25rem,7vw,5.5rem);
  border-top:1px solid var(--line);
}
.reason:nth-child(even){ margin-left:auto; }             /* pushed right */
.reason:nth-child(3){ margin-left:clamp(0rem,6vw,7rem); } /* and one adrift */
.reason__n{
  position:absolute; left:0; top:1.55rem;
  font-family:var(--mono); font-size:.9rem; font-weight:700;
  color:var(--volt); letter-spacing:.1em;
}
.reason h3{
  margin:0 0 .6rem; font-family:var(--body); font-weight:800;
  font-size:clamp(1.15rem,1.05rem + .55vw,1.55rem); line-height:1.22; letter-spacing:-.01em;
}
.reason p{ margin:0; color:#bdb6a9; }
.reason em{ font-style:normal; font-family:var(--mono); font-size:.86em; color:var(--bone); }

/* ── rack: horizontal scroll ─────────────────────────────────── */
.fits{ padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,9vw,7rem); }
.fits .sect-title{ padding-inline:var(--pad); max-width:1400px; margin-inline:auto; }
.rack{
  display:flex; gap:1px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--pad); padding-bottom:1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.rack::-webkit-scrollbar{ height:6px; }
.rack::-webkit-scrollbar-thumb{ background:var(--line); }
.fit{
  flex:0 0 min(20rem,74vw); scroll-snap-align:start;
  background:var(--ink-2); border:1px solid var(--line);
  padding:1.6rem 1.5rem 1.9rem;
  transition:background-color .25s, transform .25s var(--ease);
}
.fit:hover{ background:var(--ink-3); transform:translate3d(0,-5px,0); }
.fit__size{
  margin:0 0 1.4rem; width:3rem; height:3rem;
  display:grid; place-items:center; border:2px solid var(--volt); color:var(--volt);
  font-family:var(--mono); font-weight:700; font-size:.86rem; letter-spacing:.04em;
}
.fit h3{ margin:0 0 .55rem; font-size:1.1rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.fit p{ margin:0; font-size:.94rem; color:#b4ada0; }

/* ── offer ───────────────────────────────────────────────────── */
.offer{
  padding:clamp(4rem,9vw,8rem) var(--pad);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0e0c0a,var(--ink));
}
.offer__grid{
  max-width:1400px; margin-inline:auto;
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,5rem);
}
.offer__lede{ margin:0 0 1.75rem; max-width:42ch; font-size:clamp(1.02rem,.98rem + .35vw,1.2rem); color:#cdc6b8; }
.offer__note,.offer__direct{
  margin:0 0 1rem; max-width:44ch;
  font-family:var(--mono); font-size:.72rem; line-height:1.85;
  letter-spacing:.05em; color:var(--concrete);
}
.offer__note b{ color:var(--bone); }
.mono-link{ color:var(--volt); text-decoration:none; border-bottom:1px solid currentColor; }
.mono-link:hover{ background:var(--volt); color:var(--ink); }

/* ── form ────────────────────────────────────────────────────── */
.form{ display:grid; gap:1.5rem; align-content:start; }
.field{ display:grid; gap:.55rem; }
.field label{
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.req{ font-weight:400; font-size:.6rem; letter-spacing:.16em; color:var(--concrete); }
.field input,.field textarea{
  width:100%; padding:1rem 1.1rem;
  background:var(--ink); color:var(--bone);
  border:1px solid var(--line); border-radius:0;
  font-family:var(--body); font-size:1rem; line-height:1.5;
  transition:border-color .18s, background-color .18s, box-shadow .18s;
}
.field textarea{ resize:vertical; min-height:9rem; }
.field input::placeholder,.field textarea::placeholder{ color:#6c665d; }
.field input:hover,.field textarea:hover{ border-color:#463e36; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--volt); background:var(--ink-2);
  box-shadow:inset 3px 0 0 0 var(--volt);
}
/* error state */
.field.is-bad input,.field.is-bad textarea{ border-color:var(--rust); box-shadow:inset 3px 0 0 0 var(--rust); }
.err{
  margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--rust);
  display:flex; align-items:center; gap:.4rem;
}
.err::before{ content:"//"; opacity:.6; }
.err[hidden]{ display:none; }

.form__status{
  margin:0; min-height:1.2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--volt);
}
.form__status:empty{ display:none; }
.form__status.is-bad{ color:var(--rust); }

/* ── footer ──────────────────────────────────────────────────── */
.foot{
  padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line);
  display:grid; gap:.85rem;
  max-width:1400px; margin-inline:auto;
}
.foot__mark{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,6vw,3rem); line-height:1; letter-spacing:-.01em;
}
.foot__mark span{ color:var(--volt); }
.foot__meta,.foot__fine{
  margin:0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--concrete);
}
.foot__fine{ text-transform:none; letter-spacing:.05em; opacity:.72; max-width:56ch; line-height:1.8; }

/* ══ breakpoints ══════════════════════════════════════════════ */
@media (min-width:60rem){
  .offer__grid{ grid-template-columns:1fr 1.05fr; gap:clamp(3rem,6vw,7rem); }
  .form{ padding-top:.5rem; }
}

/* below the hero's asymmetric grid: collapse to one column */
@media (max-width:59.99rem){
  .lockup{ grid-column:1/-1; }
  .hero__sub,.hero__cta{ grid-column:1/-1; }
  .tag{ grid-column:1/-1; grid-row:auto; margin-top:2.75rem; max-width:26rem; }
  .stamp{ top:auto; bottom:-1rem; right:.5rem; }
  .reason:nth-child(even),.reason:nth-child(3){ margin-left:0; }
}

@media (max-width:30rem){
  .stamp{ position:static; display:inline-block; margin-top:1.75rem;
          transform:rotate(-3deg); opacity:1; animation:none; }
  .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .r{ opacity:1; animation:none; }
  .ticker__track,.pulse,.stamp{ animation:none; }
  .stamp{ opacity:1; }
  *{ transition-duration:.01ms !important; }
}