/* MAW TOYS
   Built to the supplied brand kit. Palette, type, straplines and icon set all
   come from it; nothing here is invented.

   Onyx #000000 is the ground, so the logo crops keep their black background and
   composite invisibly. That is deliberate: keying a glossy 3D render leaves a
   halo, and on this ground it is unnecessary.

   Display face is a stand-in. The kit specifies Monument (Pangram Pangram),
   which is a paid licence. Archivo at full width is the closest free match
   until that licence is bought. */

@font-face{font-family:"Display";src:url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Mont";src:url("/fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight:400 800;font-display:swap}

:root{
  --red:#d71920;--red-lite:#db3239;          /* MAW Red, primary */
  --onyx:#000000;         /* background */
  --nude:#f7f1ed;         /* accent */
  --charcoal:#1f1f1f;     /* secondary */
  --metallic:#b3000f;     /* premium */
  --nude-dim:rgba(247,241,237,.62);
  --nude-faint:rgba(247,241,237,.38);
  --rule:rgba(247,241,237,.14);
  --gutter:clamp(20px, 5vw, 72px);
  --max:1280px;
  --ease:cubic-bezier(.2,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--onyx);color:var(--nude);
  font-family:Mont,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:clamp(1rem, 0.97rem + 0.18vw, 1.08rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0}
/* height:auto matters: without it the HTML height attribute stays a
   presentational hint and the intrinsic aspect ratio is never applied,
   so a CSS width alone stretches the image. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* The kit sets everything in wide tracked caps. That is the house voice. */
.disp{font-family:Display,Impact,sans-serif;font-weight:800;font-stretch:125%;
  text-transform:uppercase;line-height:.94;letter-spacing:.01em}
.track{font-family:Mont,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.3em;font-size:.7rem}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:var(--nude);padding:12px 18px;z-index:100}
.skip:focus{left:10px;top:10px}

/* header */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.head__logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font-family:Mont,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;text-decoration:none;color:var(--nude-dim);transition:color 160ms var(--ease)}
.nav a:hover{color:var(--nude)}
.nav a.cta{background:var(--red);color:var(--nude);padding:11px 18px;letter-spacing:.12em}
.nav a.cta:hover{background:var(--metallic);color:var(--nude)}
@media (max-width:820px){.nav a:not(.cta){display:none}.head__logo img{height:36px}}

/* hero */
.hero{padding-block:clamp(32px,5vw,72px) clamp(40px,6vw,88px);text-align:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:50%;top:-30%;width:120%;transform:translateX(-50%);
  aspect-ratio:2/1;background:radial-gradient(ellipse,rgba(215,25,32,.22),transparent 65%);pointer-events:none}
.hero__in{position:relative}
/* The board is 1536x1024, so the lockup is 822px natively. It ships as a 2x
   WebP (1644px) so the browser only ever downscales it, which is always
   cleaner than the upscale it was doing before. 560px CSS is 1680 device
   px on a 3x phone, near enough the asset to stay crisp. */
.hero__logo{width:min(88%,560px);margin:0 auto clamp(20px,3vw,34px)}
.hero .strap{font-family:Mont,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;font-size:clamp(.72rem,.62rem + .4vw,1rem);color:var(--nude)}
.hero__h1{margin:0;font-weight:inherit;font-size:inherit}
.hero__h1 .strap{display:block}
.hero .rule{width:64px;height:2px;background:var(--red);margin:clamp(22px,3vw,34px) auto}
.hero .said{margin:0 auto;max-width:52ch;color:var(--nude-dim);font-size:clamp(1rem,.95rem + .35vw,1.18rem)}
.hero .said b{color:var(--nude);font-weight:600}

/* categories */
.cats{padding-block:clamp(40px,5vw,76px)}
.cats__head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:clamp(20px,3vw,32px)}
.cats__head h2{font-family:Display,sans-serif;font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);line-height:1}
.cats__head span{color:var(--nude-faint);font-size:.8rem}
.grid{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;background:var(--charcoal);border:1px solid var(--rule);
  aspect-ratio:4/3;display:flex;align-items:flex-end;padding:clamp(13px,2vw,26px);
  text-decoration:none;overflow:hidden;transition:border-color 200ms var(--ease),background 200ms var(--ease)}
.tile::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 20%,rgba(215,25,32,.26),transparent 60%);
  opacity:0;transition:opacity 260ms var(--ease)}
.tile:hover{border-color:var(--red);background:#241618}
.tile:hover::before{opacity:1}
.tile span{position:relative;font-family:Display,sans-serif;font-weight:800;font-stretch:125%;
  text-transform:uppercase;font-size:clamp(.92rem,.72rem + 1vw,1.5rem);line-height:1.05;
  text-wrap:balance}
.tile em{position:absolute;top:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px);
  font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nude-faint)}
.tile:hover em{color:var(--red-lite)}

/* promise strip, using the kit icon set */
.promise{background:var(--charcoal);border-block:1px solid var(--rule);padding-block:clamp(34px,4vw,60px)}
.promise__in{display:grid;gap:clamp(22px,3vw,32px);grid-template-columns:repeat(2,1fr);text-align:center}
@media (min-width:860px){.promise__in{grid-template-columns:repeat(5,1fr)}}
@media (max-width:859px){.promise figure:last-child{grid-column:1/-1}}  /* 5 in a 2-col grid leaves an orphan; centre it */
.promise figure{margin:0;display:grid;gap:12px;justify-items:center}
.promise img{width:62px;height:62px;object-fit:contain}
.promise b{font-family:Mont,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem}
.promise p{margin:0;color:var(--nude-dim);font-size:.84rem;max-width:22ch}

/* join */
.join{padding-block:clamp(44px,6vw,92px);text-align:center}
.join h2{font-family:Display,sans-serif;font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.8rem,1.2rem + 3vw,3.6rem);line-height:.96;max-width:18ch;margin:0 auto}
.join p{margin:18px auto 0;max-width:46ch;color:var(--nude-dim)}
.f{display:grid;gap:10px;max-width:520px;margin:clamp(24px,3vw,34px) auto 0}
@media (min-width:560px){.f{grid-template-columns:minmax(0,1fr) auto}}
.f input{font:inherit;font-size:1rem;color:var(--nude);background:var(--charcoal);
  border:1px solid var(--rule);border-radius:0;padding:15px 16px;width:100%}
.f input::placeholder{color:var(--nude-faint)}
.f input:focus{border-color:var(--red)}
.f button{font-family:Mont,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  font-size:.8rem;background:var(--red);color:var(--nude);border:1px solid var(--red);border-radius:0;
  padding:15px 30px;cursor:pointer;white-space:nowrap;transition:background 160ms var(--ease)}
.f button:hover{background:var(--metallic);border-color:var(--metallic)}
.f button[disabled]{opacity:.55;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{margin:14px auto 0;max-width:46ch;font-size:.78rem;color:var(--nude-faint)}
.note a{color:var(--nude-dim)}
.msg{margin:14px auto 0;max-width:46ch;font-size:.92rem;color:var(--nude)}
.msg[hidden]{display:none}
.msg[data-state="error"]{color:#ff8f93}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:clamp(32px,4vw,56px) 30px}
.foot__in{display:grid;gap:22px;align-items:center}
@media (min-width:760px){.foot__in{grid-template-columns:auto 1fr auto}}
.foot img{height:42px;width:auto}
.foot .mid{text-align:center;color:var(--nude-faint);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.foot .links{display:flex;gap:20px;justify-content:center}
.foot .links a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nude-dim);text-decoration:none}
.foot .links a:hover{color:var(--red-lite)}
.foot .legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.72rem;color:var(--nude-faint)}
.tbc{border-bottom:1px dotted var(--nude-faint)}

/* doc pages */
.doc{padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,88px)}
.doc h1{font-family:Display,sans-serif;font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(2rem,1.4rem + 3vw,3.6rem);line-height:.96;margin-bottom:10px}
.doc h2{font-family:Mont,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:.86rem;margin:38px 0 10px;padding-top:14px;border-top:1px solid var(--rule)}
.doc p,.doc li{max-width:64ch;color:var(--nude-dim)}
.doc ul{padding-left:1.1em}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--red)}
.doc a{color:var(--nude)}

/* CSP here is style-src 'self' with no unsafe-inline, so a style="" attribute
   is silently dropped. Everything that was inline lives here instead. */
.doc .track{color:var(--red-lite)}
.doc .back{margin-top:42px}
.foot .legal--bare{border-top:0;margin-top:0;padding-top:0}  /* must out-specify .foot .legal */
.said a{color:var(--nude)}