/* =====================================================================
   ITSASYNTH — site stylesheet
   Designed by Macs Moser — macsmoser@gmail.com
   One stylesheet for all four site pages, so the fonts and the design
   system download ONCE and every page after the first is nearly free.
   Palette is lifted straight off the 4TRAX panel: graphite, the green,
   the pink. Louder than the instrument on purpose — the instrument is a
   tool and stays calm; this is a shopfront and is allowed to shout.
   Fonts are local files, not base64: 62 KB of woff2 instead of 83 KB of
   base64 inflation, cached across pages, and still zero external requests.
   ===================================================================== */

@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/space-mono-400.woff2) format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/space-mono-700.woff2) format('woff2'); }

:root{
  /* graphite — the synth's chassis */
  --g0:#0e1013; --g1:#131518; --g2:#1b1d21; --g3:#23262b; --g4:#2b2f35;
  --edge:#3a3f46; --edge-soft:#2a2e34;
  /* the green — 4TRAX's signature accent */
  --green:#93a961; --green-soft:#bcd08e; --green-hot:#a8c26f; --green-ink:#171c0d;
  /* the pink — the synth uses it for ARMED; here it means "this matters" */
  --pink:#e8579c; --pink-soft:#f39bc4;
  /* type — brighter than the instrument's, which is tuned for hours of staring */
  --ink:#f7f4ec; --ink2:#cbc5b8; --dim:#8b8579;
  /* Every run of text you actually READ resolves through these two, so the
     reading tone is one decision rather than five rules drifting apart. --ink2
     stays for chrome: nav links, footer, spec-row labels' quieter half. */
  --read:var(--ink);                       /* near-white body, 16.6:1 on --g1 */
  --read-size:clamp(18px,1.45vw,20px);
  --label:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --col:1000px;          /* the mockup's content column inside a 1440 frame */
  --pad:clamp(20px,4vw,64px);
  /* Header height is a variable because three other things are pinned to it:
     the product page's sticky submenu, the #specs scroll offset, and the
     mobile override. Change it here and they all follow. */
  --topbar-h:78px;
  --logo-h:52px;
  /* The product page's submenu height, declared rather than derived, because the
     #features jump has to land EXACTLY under topbar+submenu — a couple of px out
     and either the submenu never reaches its sticky pin (a sliver of hero shows
     above it) or the section tucks visibly under it. */
  --submenu-h:69px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* No scroll-behavior:smooth — it breaks landing on /instruments/4trax/#specs
   from a cold load: the browser animates instead of jumping and the animation
   does not survive the navigation, so you arrive at the top. Same trap the
   manual had. Verified both ways before choosing. */
html{ overflow-x:clip; scroll-behavior:auto; }
body{
  background:var(--g1); color:var(--ink); font-family:var(--mono);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
img{ max-width:100%; height:auto; display:block; }   /* height:auto or the width/height attrs win and squash the box */
a{ color:inherit; }
::selection{ background:var(--pink); color:#fff; }

/* ---- shared shell ------------------------------------------------- */
.wrap{ width:min(var(--col), calc(100vw - var(--pad)*2)); margin-inline:auto; }
/* The mockup's inner measure — 572 px of body inside the 1000 px column, air both
   sides. Long-form reads better at a set measure than flush against a wide grid. */
.col-mid{ width:min(660px, calc(100vw - var(--pad)*2)); }

/* Top menu — sticky so the nav is never a scroll away. Taller than the
   mockup's 50px because the logotype is a stacked two-line lockup and needs
   the room; the nav still centres against it. */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  background:rgba(19,21,24,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge-soft);
  display:flex; align-items:center;
}
.topbar .wrap{ display:flex; align-items:center; gap:clamp(18px,3vw,54px); }
/* The logotype is an <img>, not inline SVG: the file's own <style> block stays
   scoped inside the image document, so its .st0/.st1/.st2 class names can never
   collide with anything here, and the browser caches it across all four pages. */
.logo{ display:flex; align-items:center; line-height:0; text-decoration:none; }
.logo img{ height:var(--logo-h); width:auto; display:block; }
.topbar nav{ display:flex; gap:clamp(16px,2.4vw,32px); margin-left:auto; }
.topbar nav a{
  font-family:var(--label); font-weight:600; font-size:16px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2); text-decoration:none; padding:4px 0;
  border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.topbar nav a:hover{ color:var(--ink); border-bottom-color:var(--green); }
.topbar nav a[aria-current="page"]{ color:var(--green-soft); border-bottom-color:var(--green); }

/* Payoff strip — the loudest 30px on the site, and the first thing you read.
   The mockup asks for white type here. White on this green measures 1.98:1,
   which is below every legibility floor there is, and darkening the green far
   enough to carry white stops it being the synth's accent. So the punch comes
   from WEIGHT and DEPTH instead: dark graphite on green reads 8.8:1, and the
   payline goes near-black with wider tracking so it still lands last and loudest. */
.payoff{
  background:var(--green-hot); color:var(--green-ink);
  font-family:var(--label); font-weight:700; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:7px 16px; line-height:1.2;
}
.payoff b{ color:#0a0d06; font-weight:700; letter-spacing:.2em; }

/* ---- hero --------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--edge-soft); }
/* The zoomed-in panel behind the hero. Same webp as the shot in front of it,
   blown up and dimmed — a second file would cost 66 KB to say the same thing.
   230%/30% lands on the oscillator knobs, which blow up into soft shapes; the
   tighter framings tried (190%, 260%) each put a readable label — MULTI, LOOP,
   LP/BP/HP — directly behind the headline. Compared on screen before choosing. */
.hero::before{
  content:''; position:absolute; inset:0;
  background:url(/img/img-screen.webp) center 30% / 230% no-repeat;
  opacity:.16; filter:saturate(.75);
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(19,21,24,.25) 0%, rgba(19,21,24,.92) 68%),
    linear-gradient(180deg, rgba(19,21,24,.72) 0%, rgba(19,21,24,.35) 40%, var(--g1) 100%);
}
.hero .wrap{ position:relative; z-index:1; padding:clamp(38px,6vw,64px) 0 clamp(40px,6vw,68px); }
.hero-grid{ display:grid; grid-template-columns:525fr 475fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero-shot{
  display:block; border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6); background:var(--g2);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
/* No crop here: the webp is already trimmed to the app's own edges — no OS menu
   bar, no tabs, no address bar — and gets shown whole. Its 1468x836 sets the box,
   so a later grab of the same shape drops in without moving anything. */
.hero-shot img{ width:100%; aspect-ratio:1468/836; object-fit:cover; object-position:center top; }
.hero-shot:hover{ transform:translateY(-3px); border-color:var(--green); box-shadow:0 28px 70px rgba(0,0,0,.7); }
.hero h1{
  font-family:var(--label); font-weight:700; line-height:.86;
  font-size:clamp(58px,8.4vw,116px); letter-spacing:.02em; color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
/* No max-width. The 22ch cap here held the line to ~26 characters, which stacked
   this paragraph six lines deep and left the text side of the hero noticeably
   taller than the shot beside it. The grid column is the only ceiling it needs. */
.hero .core{
  margin-top:18px; font-family:var(--label); font-weight:500;
  font-size:clamp(19px,2.1vw,30px); line-height:1.25; color:var(--ink2);
}
.hero .core b{ color:var(--green-soft); font-weight:600; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.4vw,44px); }

/* ---- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--label); font-weight:700; font-size:20px;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  padding:13px 30px; border-radius:9px; border:2px solid transparent;
  transition:transform .1s, filter .12s, background .12s, color .12s, border-color .12s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-play{ background:linear-gradient(180deg,var(--green-soft),var(--green)); color:var(--green-ink);
  box-shadow:0 0 34px rgba(147,169,97,.34); }
.btn-play:hover{ filter:brightness(1.09); box-shadow:0 0 44px rgba(147,169,97,.5); }
.btn-ghost{ border-color:var(--edge); color:var(--ink); background:rgba(43,47,53,.5); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-soft); }
.btn-sm{ font-size:16px; padding:10px 22px; }

/* ---- generic section furniture ------------------------------------ */
.band{ padding:clamp(52px,7vw,104px) 0; }
/* Jump targets land flush under the sticky topbar + submenu. The 1px tuck is
   deliberate: at exactly topbar+submenu the sticky pin sits on its own threshold,
   and any fractional layout above it leaves a hairline of hero showing. One px
   under guarantees the pin, and .band's own 52-104px padding swallows it.
   Nothing is hidden — the section's content starts far below its top edge. */
.band[id]{ scroll-margin-top:calc(var(--topbar-h) + var(--submenu-h) - 1px); }
.band-panel{ background:var(--g2); border-block:1px solid var(--edge-soft); }
.eyebrow{
  font-family:var(--label); font-weight:600; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green); margin-bottom:14px;
}
.eyebrow.pink{ color:var(--pink); }
h2.big{
  font-family:var(--label); font-weight:700; line-height:1.02;
  font-size:clamp(34px,4.4vw,58px); letter-spacing:.01em; color:#fff;
}
h3.mid{
  font-family:var(--label); font-weight:700; line-height:1.08;
  font-size:clamp(24px,2.7vw,34px); letter-spacing:.02em; color:#fff;
}
/* .lead sits a step above body, so it scales off the same decision rather than
   carrying its own numbers. */
.lead{ font-size:clamp(19px,1.6vw,22px); line-height:1.68; color:var(--read); }
/* Long-form body runs at --ink, not --ink2. Space Mono is a light, wide-spaced
   face and 17px of #cbc5b8 on this graphite read as greyed-out rather than calm.
   Near-white at 20px is the same voice with the volume up.
   Emphasis has to switch from colour to WEIGHT. It used to be font-weight:400
   at --ink against --ink2 body — a purely tonal nudge. With the body itself at
   --ink there is no tonal room left above it (#fff vs #f7f4ec is invisible), so
   the <b>s go to the real Space Mono 700, which is already downloaded. */
.prose p{ font-size:var(--read-size); line-height:1.72; color:var(--read); }
.prose p + p{ margin-top:1.15em; }
.prose b, .prose strong{ color:#fff; font-weight:700; }
/* The pull-quote subheads have to stay clearly ABOVE the body they interrupt.
   At 27px against 17px body that was a 1.59x step; once body went to 20px the
   step collapsed to 1.35 and they stopped reading as headings. Back to ~1.6x. */
.prose .shout{
  color:#fff; font-family:var(--label); font-weight:700; letter-spacing:.01em;
  font-size:clamp(25px,2.6vw,32px); line-height:1.25; display:block; margin:1.35em 0;
}
.prose .shout em{ color:var(--pink); font-style:normal; }
.inline-link{
  color:var(--green-soft); text-decoration:none;
  border-bottom:1px solid rgba(188,208,142,.4); transition:border-color .12s, color .12s;
}
.inline-link:hover{ color:#fff; border-bottom-color:var(--green); }
.more{
  display:inline-flex; align-items:center; gap:.6em; margin-top:28px;
  font-family:var(--label); font-weight:700; font-size:17px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green-soft); text-decoration:none;
}
.more::after{ content:'→'; transition:transform .14s; }
.more:hover{ color:#fff; }
.more:hover::after{ transform:translateX(5px); }

/* ---- instrument cards (Instruments page) --------------------------- */
.inst{ display:grid; grid-template-columns:1fr 372px; gap:clamp(30px,4.6vw,64px); align-items:center; }
.inst + .inst{ margin-top:clamp(52px,7vw,96px); padding-top:clamp(52px,7vw,96px); border-top:1px solid var(--edge-soft); }
.inst-body .kind{
  font-family:var(--label); font-weight:600; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green);
}
.inst-body h3{
  font-family:var(--label); font-weight:700; font-size:clamp(38px,4.6vw,60px);
  line-height:1; letter-spacing:.02em; color:#fff; margin:10px 0 18px;
}
.inst-body p{ font-size:var(--read-size); line-height:1.72; color:var(--read); max-width:46ch; }
.inst-body p + p{ margin-top:1.05em; }
.inst-art{ position:relative; }
.inst-art img{ border:1px solid var(--edge); border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,.5); }
.inst.soon .inst-body h3, .inst.soon .kind{ color:var(--dim); }
.inst.soon .inst-body h3{ color:#8f8a7e; }
.badge{
  display:inline-block; font-family:var(--label); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pink);
  border:1px solid rgba(232,87,156,.45); border-radius:999px; padding:5px 13px;
}

/* ---- picture placeholder — a designed panel, not a broken image ----
   Real screengrabs drop straight in: swap the <div class="shot-ph"> for an
   <img> of the same aspect and nothing else moves. */
.shot-ph{
  aspect-ratio:372/246; border:1px solid var(--edge); border-radius:10px;
  background:
    repeating-linear-gradient(90deg, rgba(147,169,97,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(147,169,97,.05) 0 1px, transparent 1px 34px),
    radial-gradient(70% 90% at 30% 15%, #262a30 0%, #191c20 72%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  color:var(--dim); box-shadow:0 18px 44px rgba(0,0,0,.45); text-align:center; padding:20px;
}
.shot-ph .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.shot-ph span{ font-family:var(--label); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }

/* ---- product page: sub menu + feature rows ------------------------- */
.submenu{
  position:sticky; top:var(--topbar-h); z-index:40; height:var(--submenu-h);
  background:var(--g2); border-bottom:1px solid var(--edge-soft);
}
/* Height on the box, not padding on the contents, so --submenu-h is the whole
   truth about how tall this is and the scroll-margin above can trust it. */
.submenu .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(22px,4vw,58px); height:100%;
}
.submenu a{
  font-family:var(--label); font-weight:700; font-size:16px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink2); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:3px; transition:color .12s, border-color .12s;
}
.submenu a:hover{ color:#fff; border-bottom-color:var(--pink); }

.feat{ display:grid; grid-template-columns:1fr 372px; gap:clamp(30px,4.6vw,64px); align-items:center; }
.feat + .feat{ margin-top:clamp(46px,6vw,84px); }
.feat-n{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.2em;
  color:var(--green); margin-bottom:12px;
}
.feat:nth-child(even) .feat-n{ color:var(--pink); }
.feat h3{
  font-family:var(--label); font-weight:700; font-size:clamp(25px,2.9vw,36px);
  line-height:1.06; letter-spacing:.02em; color:#fff; margin-bottom:16px;
}
.feat p{ font-size:var(--read-size); line-height:1.72; color:var(--read); }
.feat p + p{ margin-top:.9em; }
.feat img{ border:1px solid var(--edge); border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,.5); }
/* CSS-cropped detail views. One webp already on the page, framed twice at
   different regions — two real close-ups of the actual panel for zero extra
   bytes, where a second and third screengrab would have cost ~50 KB each.
   Swap either for a real <img> later and the layout does not move. */
.crop{
  aspect-ratio:372/246; border:1px solid var(--edge); border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.5); background-color:var(--g2);
  background-image:url(/img/img-fullview.webp); background-repeat:no-repeat;
}
.crop-osc{ background-size:250%; background-position:12% 44%; }   /* the three oscillator rows */
.crop-env{ background-size:250%; background-position:72% 62%; }   /* Env 1 / Env 3 curve editors */

/* ---- spec tables --------------------------------------------------- */
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); }
.specs h4{
  font-family:var(--label); font-weight:700; font-size:clamp(19px,1.9vw,23px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-soft);
  padding-bottom:11px; border-bottom:1px solid var(--edge); margin-bottom:6px;
}
.specs h4.pink{ color:var(--pink-soft); }
.speclist{ list-style:none; }
.speclist li{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--edge-soft);
  font-family:var(--label); font-size:17px; letter-spacing:.02em; color:var(--read);
}
.speclist li b{ color:#fff; font-weight:600; text-align:right; font-family:var(--mono); font-size:13px; }
/* The .solo rows are prose in a table, so they take the reading size too. */
.speclist li.solo{ display:block; color:var(--read); font-size:var(--read-size); line-height:1.6; }

/* ---- about --------------------------------------------------------- */
.who{ display:flex; align-items:center; gap:26px; margin-top:clamp(38px,5vw,64px);
  padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--edge-soft); }
/* Bigger than the 107px initials it replaces. The source is already square, so
   at a square box object-fit:cover crops nothing and the circle is a pure mask —
   it only takes the four corners. The wheelchair sits low in the frame, where the
   circle narrows fastest, so size is what decides whether it reads at all: at
   107px this was a face and some dark shapes. */
.who .avatar{
  width:clamp(150px,17vw,210px); aspect-ratio:1; height:auto; flex:none;
  border-radius:50%; border:1px solid var(--edge); object-fit:cover;
  background:var(--g2);
}
.who .name{ font-family:var(--label); font-weight:700; font-size:22px; letter-spacing:.05em; color:#fff; }
.who a{ font-size:16px; color:var(--green-soft); text-decoration:none; }
.who a:hover{ color:#fff; }

/* ---- footer -------------------------------------------------------- */
footer{
  margin-top:auto; border-top:1px solid var(--edge-soft); background:var(--g0);
  padding:26px 0 32px; color:var(--dim); font-size:11.5px; line-height:1.9;
}
footer .wrap{ display:flex; flex-wrap:wrap; gap:4px 26px; }
footer a{ color:var(--ink2); text-decoration:none; }
footer a:hover{ color:var(--green-soft); }

/* ---- responsive ---------------------------------------------------- */
@media (max-width:900px){
  .hero-grid, .inst, .feat, .specs{ grid-template-columns:1fr; }
  .hero-grid{ gap:26px; }
  .inst-art, .feat-art{ order:-1; }          /* picture first when stacked */
  .inst + .inst{ margin-top:44px; padding-top:44px; }
  .submenu .wrap{ gap:20px; overflow-x:auto; justify-content:flex-start; }
  .topbar .wrap{ gap:14px; }
  :root{ --topbar-h:62px; --logo-h:40px; --submenu-h:57px; }
  .topbar nav a{ font-size:14px; }
  .payoff{ font-size:12.5px; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}