/* Kahraba: garment-label spec sheet, cut with the bolt.
   Archivo wide (125) for display = loud sportswear signage; Archivo normal for body;
   IBM Plex Mono only for spec labels, like the print on a care label. */

:root {
  --carbon: #111111;
  --concrete: #EDEBE6;
  --bolt: #F2A541;

  --page-bg: #EDEBE6;
  --focus: #111111;

  --head-bg: #EDEBE6;  --head-ink: #111111;  --head-line: #CFCBC2;

  --hero-bg: #EDEBE6;  --hero-ink: #111111;  --hero-muted: #4B4944;
  --hero-panel: #111111; --hero-garment: #EDEBE6; --hero-seam: #9B978F;

  --tape-bg: #F2A541;  --tape-ink: #111111;

  --dawn-bg: #F6E2C2;  --dawn-ink: #111111;  --dawn-muted: #5B4630;
  --night-bg: #161616; --night-ink: #EDEBE6; --night-muted: #ABA79F; --night-accent: #F2A541;

  --drop-bg: #F8F7F4;  --drop-ink: #111111;  --drop-muted: #55534E; --drop-line: #DAD7D0;
  --drop-art: #E7E4DD; --drop-garment: #111111; --drop-seam: #6E6B64;

  --label-bg: #F2A541; --label-ink: #111111; --label-muted: #3B2A0E;
  --tag-bg: #111111;   --tag-ink: #EDEBE6;   --tag-muted: #B1ADA5;

  --list-bg: #111111;  --list-ink: #EDEBE6;  --list-muted: #B1ADA5; --list-accent: #F2A541;

  --foot-bg: #DEDAD2;  --foot-ink: #111111;  --foot-muted: #4B4944;

  --btn-bg: #111111;   --btn-ink: #EDEBE6;   --btn-hover: #F2A541; --btn-hover-ink: #111111;
}

:root[data-theme="dark"] {
  --page-bg: #0D0D0D;
  --focus: #F2A541;

  --head-bg: #0D0D0D;  --head-ink: #EDEBE6;  --head-line: #2C2B29;

  --hero-bg: #111111;  --hero-ink: #EDEBE6;  --hero-muted: #A9A59D;
  --hero-panel: #1E1D1B; --hero-garment: #3A3834; --hero-seam: #6F6B64;

  --tape-bg: #E39A3B;  --tape-ink: #111111;

  --dawn-bg: #241B10;  --dawn-ink: #F4E4CB;  --dawn-muted: #C7B092;
  --night-bg: #050505; --night-ink: #EDEBE6; --night-muted: #9F9B94; --night-accent: #F2A541;

  --drop-bg: #181817;  --drop-ink: #EDEBE6;  --drop-muted: #A6A29B; --drop-line: #2F2E2B;
  --drop-art: #222120; --drop-garment: #D9D5CD; --drop-seam: #6F6B64;

  --label-bg: #D9902F; --label-ink: #111111; --label-muted: #2E2009;
  --tag-bg: #EDEBE6;   --tag-ink: #111111;   --tag-muted: #4B4944;

  --list-bg: #1B1309;  --list-ink: #F2EADC;  --list-muted: #BDAF98; --list-accent: #F2A541;

  --foot-bg: #080808;  --foot-ink: #DCD8D0;  --foot-muted: #9A968E;

  --btn-bg: #F2A541;   --btn-ink: #111111;   --btn-hover: #EDEBE6; --btn-hover-ink: #111111;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--hero-ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  overflow-x: clip;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.label :focus-visible, .tape :focus-visible { outline-color: #111111; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--carbon); color: var(--concrete);
  padding: 12px 16px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Display voice: expanded Archivo, tight, uppercase. */
h1, h2, .word, .tape-track span {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.eyebrow, .spec dt, .tag dt, .tag-head, .price, figcaption, .drop-note, .credit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* Button: the one shape that gets the accent on hover. Square corners match the bolt's hard edges. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 16px 28px;
  background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 700; font-stretch: 112%; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-hover-ink); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--btn-ink), inset 0 0 0 5px var(--btn-bg); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: var(--head-bg); color: var(--head-ink);
  border-bottom: 1px solid var(--head-line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; background: #111111;
  box-shadow: inset 0 0 0 1px rgb(237 235 230 / .14);
}
.mark svg { width: 16px; height: 25px; fill: #F2A541; }
.word { font-size: 1.125rem; letter-spacing: 0; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.head-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 2px solid currentColor; font-weight: 700; text-decoration: none;
}
.head-cta:hover { background: var(--head-ink); color: var(--head-bg); }
.theme {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; color: inherit; border: 0; border-radius: 0; cursor: pointer;
}
.theme svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme .i-moon { fill: currentColor; stroke: none; }
.theme .i-sun { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }

@media (max-width: 760px) {
  .nav { display: none; }
  .head-cta { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg); color: var(--hero-ink);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: min(860px, calc(100dvh - 65px));
}
.hero-copy {
  align-self: center;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 48px);
  display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start;
}
.eyebrow { color: var(--hero-muted); }
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 6.4rem); }
.hero h1 span { display: block; -webkit-text-stroke: 2px var(--hero-ink); color: transparent; }
.lede { max-width: 34ch; color: var(--hero-muted); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); }

.hero-panel {
  position: relative; display: grid; place-items: center;
  background: var(--hero-panel);
  /* the bolt's zig on the left edge */
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%, 11% 54%, 4% 54%);
  padding: 48px 32px 48px 18%;
}
.hero-art { width: min(100%, 440px); height: auto; }
.hero-art .garment { fill: var(--hero-garment); }
.hero-art .seam, .hero-art .mesh { fill: none; stroke: var(--hero-seam); stroke-width: 2; stroke-dasharray: 5 6; }
.hero-art .mesh { stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 3; }
.hero-art .strike { fill: var(--bolt); }
.hero-panel figcaption {
  position: absolute; right: clamp(16px, 3vw, 32px); bottom: 20px;
  color: #ABA79F;
}

@media (prefers-reduced-motion: no-preference) {
  /* Signature motion: the bolt strikes once, top to bottom. */
  .hero-art .strike { animation: strike .55s cubic-bezier(.3, .9, .2, 1) .2s both; }
  @keyframes strike { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-bottom: 40px; }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 5.6rem); }
  .hero-panel {
    clip-path: polygon(0 48px, 56% 0, 52% 34px, 100% 0, 100% 100%, 0 100%);
    padding: 72px 16px 56px;
  }
  .hero-art { width: min(78%, 400px); }
}

/* ---------- Tape: a hazard-tape section break ---------- */
.tape { overflow: hidden; padding: 28px 0; background: var(--hero-bg); }
@media (max-width: 960px) { .tape { background: var(--hero-panel); } }
.tape-track {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 36px);
  width: 120%; margin-left: -10%;
  padding: 14px 0;
  background: var(--tape-bg); color: var(--tape-ink);
  transform: rotate(-2.2deg);
  white-space: nowrap;
}
.tape-track span { font-size: clamp(1.25rem, 3vw, 2.25rem); }
.tape-track svg { flex: none; width: clamp(14px, 1.6vw, 22px); height: auto; fill: currentColor; }

/* ---------- Two windows: split by a bolt-shaped diagonal ---------- */
.windows { display: grid; grid-template-columns: 1fr 1fr; background: var(--dawn-bg); }
.pane { padding: clamp(56px, 8vw, 120px) clamp(16px, 4vw, 48px); display: grid; gap: 16px; align-content: start; }
.pane h3 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; }
.pane p { max-width: 38ch; }
.pane-dawn { color: var(--dawn-ink); padding-right: calc(9vw + 32px); }
.pane-dawn h2 { font-size: clamp(2rem, 4vw, 3.6rem); margin-bottom: clamp(24px, 4vw, 56px); max-width: 12ch; }
.pane-dawn p { color: var(--dawn-muted); }
.pane-night {
  background: var(--night-bg); color: var(--night-ink);
  margin-left: -9vw; padding-left: calc(9vw + clamp(32px, 6vw, 96px));
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 9.5% 46%, 4.5% 46%);
  align-content: end;
}
.pane-night h3 { color: var(--night-accent); }
.pane-night p { color: var(--night-muted); }
@media (max-width: 760px) {
  .windows { grid-template-columns: 1fr; }
  .pane-dawn { padding-right: 16px; }
  .pane-night {
    margin: -40px 0 0; padding: 96px 16px 64px;
    clip-path: polygon(0 40px, 58% 0, 54% 30px, 100% 4px, 100% 100%, 0 100%);
  }
}

/* ---------- The drop ---------- */
.drop {
  background: var(--drop-bg); color: var(--drop-ink);
  padding: clamp(64px, 9vw, 136px) clamp(16px, 4vw, 48px) clamp(56px, 7vw, 96px);
}
.drop-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px); }
.drop-head h2 { font-size: clamp(2.4rem, 7vw, 6.6rem); }
.drop-head p { color: var(--drop-muted); max-width: 44ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }

.pieces {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
}
.piece {
  display: grid; grid-template-columns: clamp(96px, 12vw, 150px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 2px solid var(--drop-ink);
}
.piece-lead {
  grid-row: 1 / 4;
  grid-template-columns: 1fr; align-items: start; align-content: start;
  padding: 0; border-top: 0;
}
.piece-art { width: 100%; height: auto; background: var(--drop-art); }
.piece-lead .piece-art { padding: clamp(24px, 4vw, 56px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.piece-art .garment { fill: var(--drop-garment); }
.piece-art .seam { fill: none; stroke: var(--drop-art); stroke-width: 1.6; stroke-dasharray: 3 4; }
.piece-art .bolt { fill: var(--bolt); }
.piece-body { display: grid; gap: 12px; }
.piece h3 { font-stretch: 118%; font-weight: 800; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.05; text-transform: uppercase; }
.piece-lead h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.spec { display: grid; gap: 4px; }
.spec div { display: grid; grid-template-columns: 9ch 1fr; gap: 12px; }
.spec dt { color: var(--drop-muted); text-transform: uppercase; padding-top: .2em; }
.spec dd { font-weight: 500; }
.price { color: var(--drop-ink); font-weight: 500; }
.price::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--bolt); clip-path: polygon(60% 0, 0 58%, 44% 58%, 30% 100%, 100% 38%, 56% 38%); }
.drop-note { margin-top: clamp(28px, 4vw, 48px); color: var(--drop-muted); }

@media (max-width: 960px) {
  .pieces { grid-template-columns: 1fr; }
  .piece-lead { grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-bottom: 16px; }
}
@media (max-width: 760px) {
  .piece-lead { grid-template-columns: 1fr; }
}

/* ---------- The label ---------- */
.label {
  position: relative;
  background: var(--label-bg); color: var(--label-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(72px, 10vw, 150px) clamp(16px, 4vw, 48px);
}
/* bolt-cut top edge, drawn in this section's own colour over the one above */
.label::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: clamp(28px, 4.5vw, 64px); background: var(--label-bg);
  clip-path: polygon(0 100%, 0 72%, 47% 18%, 44% 64%, 100% 0, 100% 100%);
}
.label-copy { display: grid; gap: 20px; }
.label h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.label-copy p { max-width: 40ch; color: var(--label-muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.tag {
  justify-self: center; width: min(100%, 420px);
  background: var(--tag-bg); color: var(--tag-ink);
  padding: 56px clamp(20px, 3vw, 36px) 36px;
  transform: rotate(2deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  position: relative;
}
.tag::before {
  content: ""; position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--label-bg);
}
.tag-head {
  display: flex; justify-content: space-between; text-transform: uppercase;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed var(--tag-muted);
}
.tag dl { display: grid; gap: 14px; }
.tag dt { text-transform: uppercase; color: var(--tag-muted); }
.tag dd { font-weight: 500; }
@media (max-width: 760px) {
  .label { grid-template-columns: 1fr; }
  .tag { transform: rotate(1.2deg); }
}

/* ---------- Drop list ---------- */
.list {
  position: relative;
  background: var(--list-bg); color: var(--list-ink);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 32px;
  padding: clamp(80px, 11vw, 168px) clamp(16px, 4vw, 48px);
}
.list::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: clamp(28px, 4.5vw, 64px); background: var(--list-bg);
  clip-path: polygon(0 100%, 0 0, 58% 70%, 55% 26%, 100% 92%, 100% 100%);
}
.list-copy { display: grid; gap: 24px; justify-items: start; }
.list h2 { font-size: clamp(2.4rem, 6.4vw, 6rem); max-width: 11ch; }
.list h2::first-line { color: var(--list-accent); }
.list-copy p { color: var(--list-muted); max-width: 40ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.list .btn { --btn-bg: var(--list-accent); --btn-ink: #111111; --btn-hover: var(--list-ink); --btn-hover-ink: #111111; }
.list-bolt { justify-self: center; width: min(100%, 260px); height: auto; fill: var(--list-accent); }
@media (max-width: 760px) {
  .list { grid-template-columns: 1fr; }
  .list-bolt { position: absolute; right: 16px; top: 56px; width: 64px; }
  .list h2 { padding-right: 72px; }
}

/* ---------- Footer ---------- */
.site-foot {
  background: var(--foot-bg); color: var(--foot-ink);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 32px;
  padding: 40px clamp(16px, 4vw, 48px);
}
.foot-line { color: var(--foot-muted); }
.foot-wa {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.credit { grid-column: 1 / -1; color: var(--foot-muted); padding-top: 20px; border-top: 1px solid currentColor; }
.credit a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.site-foot .mark { box-shadow: inset 0 0 0 1px rgb(237 235 230 / .2); }
@media (max-width: 760px) {
  .site-foot { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 520px) {
  .piece { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
  .piece:not(.piece-lead) .spec div { grid-template-columns: 1fr; gap: 0; }
}