/* magnetictracksystem.com — guide archetype, design tokens v1. */
:root{
  --ink:#17191c;--ink-2:#3b4047;--paper:#f5f2ec;--paper-2:#ebe6dc;--white:#fff;
  --rule:#cfc8bb;--signal:#c26a1d;--signal-ink:#7a3f0c;--ok:#2f6b3a;
  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --t-xs:13px;--t-sm:15px;--t-base:17px;--t-lg:20px;--t-xl:28px;--t-xxl:clamp(34px,5vw,58px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --r-s:4px;--r-m:8px;--r-l:14px;
  --w-max:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);--dur:180ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-base)/1.6 var(--f-body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--signal-ink);text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.15;margin:0 0 var(--s4);letter-spacing:-.01em}
h1{font-size:var(--t-xxl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg);font-weight:600}
p{margin:0 0 var(--s4)}
.mono{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--s5)}
.kicker{font:600 var(--t-xs)/1.3 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--signal-ink);margin-bottom:var(--s3)}
.lead{font-size:var(--t-lg);color:var(--ink-2);max-width:62ch}
.note{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s4)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:var(--s3) var(--s4);z-index:10}
.skip:focus{left:var(--s4)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* header */
.hdr{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:5}
.hdr-in{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.logo{display:flex;align-items:center;gap:var(--s3);color:var(--paper);text-decoration:none;font:700 var(--t-lg)/1 var(--f-display)}
.logo em{font-style:normal;font-weight:600;color:#d9cfbf;font-size:var(--t-sm)}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--signal);border-radius:var(--r-s);color:var(--signal);font-size:var(--t-sm)}
.nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-left:auto}
.nav a{color:#e6dfd3;text-decoration:none;font-size:var(--t-sm);padding:var(--s2) 0;border-bottom:2px solid transparent}
.nav a[aria-current]{border-color:var(--signal);color:var(--white)}
.hdr-cta{flex-shrink:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s5);border-radius:var(--r-s);font:600 var(--t-sm)/1.2 var(--f-display);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-signal{background:var(--signal);color:var(--white)}
.btn-ink{background:var(--paper);color:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.arrow{font-weight:500}
.arrow::after{content:" \2192"}

/* bands */
.band{padding:var(--s8) 0}
.band-paper2{background:var(--paper-2)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink .kicker{color:#e8a462}
.band-ink a{color:var(--paper)}
.crumbs{padding-top:var(--s5);font-size:var(--t-sm);color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.next{margin-top:var(--s6);font-size:var(--t-lg)}

/* hero 7/5 */
.hero{padding:var(--s7) 0 var(--s8)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:center}
.hero-fig{margin:0;border-radius:var(--r-m);overflow:hidden;box-shadow:0 1px 0 var(--rule)}
.hero-fig img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.hero-act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* section heads + two-column */
.sec-head{margin-bottom:var(--s6)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:end}
.split p{color:var(--ink-2);margin:0}
.two{display:grid;gap:var(--s7);align-items:start}
.two-5-7{grid-template-columns:5fr 7fr}
.two-7-5{grid-template-columns:7fr 5fr}
.two-6-6{grid-template-columns:1fr 1fr}
.side-fig{margin:0;border-radius:var(--r-m);overflow:hidden}
.side-fig img{width:100%;aspect-ratio:1;object-fit:cover}

/* selector (signature) */
.sel{margin:0}
.sel-head{max-width:70ch;margin-bottom:var(--s6)}
.sel-grid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:var(--s5)}
.sel-q{border:0;margin:0;padding:0;display:grid;gap:var(--s3);align-content:start}
.sel-q legend{display:flex;align-items:center;gap:var(--s3);font:600 var(--t-lg)/1.2 var(--f-display);margin-bottom:var(--s4);padding:0}
.sel-n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-s);background:var(--ink);color:var(--paper);font:500 var(--t-sm)/1 var(--f-mono)}
.sel-opt{position:relative;display:grid;gap:var(--s1);padding:var(--s4) var(--s5) var(--s4) 52px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);cursor:pointer;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sel-opt:active{transform:scale(.97)}
.sel-opt input{position:absolute;left:var(--s5);top:calc(var(--s4) + 3px);width:18px;height:18px;accent-color:var(--signal);margin:0}
.sel-opt-t{font-weight:500}
.sel-opt-d{font-size:var(--t-sm);color:var(--ink-2)}
.sel-opt:has(input:checked){border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.sel-out{background:var(--ink);color:var(--paper);border-radius:var(--r-m);padding:var(--s6);min-height:260px;display:flex;flex-direction:column;justify-content:center}
.sel-wait{color:#d9cfbf;margin:0}
.sel-label{font:600 var(--t-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:#e8a462;margin-bottom:var(--s2)}
.sel-name{font-size:var(--t-xl);color:var(--white);margin-bottom:var(--s3)}
.sel-why{color:#e6dfd3;font-size:var(--t-sm)}
.sel-link{margin-top:var(--s3);align-self:flex-start}
.dtab{margin-top:var(--s7)}
.dtab-h{font-size:var(--t-lg)}

/* matrices */
.tscroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--white)}
.mtx{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
.mtx caption{text-align:left;font:600 var(--t-lg)/1.3 var(--f-display);padding:var(--s4) var(--s5)}
.mtx th,.mtx td{padding:var(--s3) var(--s5);text-align:left;vertical-align:top;border-top:1px solid var(--rule)}
.mtx thead th{background:var(--paper-2);font:600 var(--t-xs)/1.3 var(--f-display);text-transform:uppercase;letter-spacing:.06em;border-top:0}
.mtx tbody th{font-weight:500}
.mtx tr.is-match td,.mtx tr.is-match th{background:#f7e3cf}
.mtx tr.is-match td:first-child{box-shadow:inset 3px 0 0 var(--signal)}

/* series cards */
.ser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.ser{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;transition:transform var(--dur) var(--ease)}
.ser:active{transform:scale(.97)}
.ser-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.ser-fig{margin:0}
.ser-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ser-body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.ser-body p{color:var(--ink-2);font-size:var(--t-sm)}
.ser-tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.ser-tags span{font-size:var(--t-xs);line-height:1.3;padding:var(--s2) var(--s3);border:1px solid var(--rule);border-radius:var(--r-s);color:var(--ink)}
.ser-more{margin-top:auto;font-weight:500;color:var(--signal-ink)}
.ser-more::after{content:" \2192"}
/* full-range display cards: not a link; product shots kept whole */
.rng:active{transform:none}
.rng .ser-fig img{object-fit:contain;background:var(--white)}

/* series detail */
.sdet-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.sdet{display:grid;grid-template-columns:2fr 3fr;gap:var(--s5);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.sdet figure{margin:0}
.sdet img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-s)}
.sdet-body p{font-size:var(--t-sm);color:var(--ink-2)}

/* spec lists */
.spec-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s6)}
.spec{margin:0;display:grid}
.spec>div{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--rule)}
.spec dt{font:600 var(--t-xs)/1.5 var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.spec dd{margin:0;font-size:var(--t-sm)}
.spec-lg>div{grid-template-columns:160px 1fr}
.spec-lg dd{font-size:var(--t-base)}

/* steps */
.steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s5)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)}
.steps .mono{color:var(--signal-ink);font-size:var(--t-lg)}
.steps p{color:var(--ink-2);margin:0}

/* mounting diagrams */
.mnt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.mnt{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.mnt p{color:var(--ink-2);font-size:var(--t-sm)}
.mnt-dia{position:relative;height:96px;margin-bottom:var(--s5);border-radius:var(--r-s);background:var(--paper)}
.mnt-ceil{position:absolute;left:0;right:0;top:24px;height:10px;background:var(--rule)}
.mnt-track{position:absolute;left:20%;right:20%;height:8px;background:var(--ink);border-radius:2px}
.mnt-surface .mnt-track{top:34px}
.mnt-recessed .mnt-track{top:26px;height:8px;box-shadow:0 0 0 2px var(--paper)}
.mnt-suspended .mnt-track{top:70px}
.mnt-suspended::before,.mnt-suspended::after{content:"";position:absolute;top:34px;width:1px;height:36px;background:var(--ink-2)}
.mnt-suspended::before{left:30%}
.mnt-suspended::after{right:30%}

/* teasers, checklists, fit */
.teasers{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.tz{display:grid;grid-template-columns:2fr 3fr;gap:var(--s5);color:inherit;text-decoration:none;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5);transition:transform var(--dur) var(--ease)}
.tz:active{transform:scale(.97)}
.tz figure{margin:0}
.tz img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-s)}
.tz p{color:var(--ink-2);font-size:var(--t-sm)}
.check{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.check li{position:relative;padding:var(--s3) 0 var(--s3) var(--s6);border-top:1px solid var(--rule)}
.check li::before{content:"";position:absolute;left:0;top:calc(var(--s3) + 8px);width:12px;height:12px;border:2px solid var(--ok);border-radius:2px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.fit>div{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.fit ul{margin:0;padding-left:var(--s5);font-size:var(--t-sm);color:var(--ink-2)}

/* rows (smart) / apps / axes / posts */
.rows{display:grid;gap:0}
.row{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);padding:var(--s6) 0;border-top:1px solid var(--rule)}
.row-c{background:var(--white);border-left:3px solid var(--signal);padding:var(--s5);border-radius:0 var(--r-m) var(--r-m) 0}
.row-c p{font-size:var(--t-sm);color:var(--ink-2);margin:0}
.app-list{display:grid;gap:var(--s6)}
.app{display:grid;grid-template-columns:4fr 8fr;gap:var(--s6);align-items:center;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.app figure{margin:0}
.app img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s)}
.app-c{font-size:var(--t-sm);color:var(--ink-2)}
.axis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.axis{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.post{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s6)}
.post p{color:var(--ink-2);font-size:var(--t-sm)}

/* article (blog post): title band, 8/4 prose + sticky toc-* sidebar */
.art-band{background:var(--paper-2);padding:var(--s7) 0 var(--s7)}
.art-band h1{max-width:24ch}
.art-meta{font-size:var(--t-sm);color:var(--ink-2);margin:0}
.art-grid{display:grid;grid-template-columns:8fr 4fr;grid-template-areas:"prose toc";gap:var(--s8);padding-top:var(--s7);padding-bottom:var(--s8)}
.prose{grid-area:prose;max-width:68ch}
.prose h2{margin-top:var(--s7);scroll-margin-top:88px}
.prose p,.prose li{color:var(--ink)}
.prose .lead{color:var(--ink-2)}
.prose ul{padding-left:var(--s5);margin:0 0 var(--s4)}
.prose li{margin-bottom:var(--s2)}
.toc{grid-area:toc;align-self:start;position:sticky;top:88px;display:grid;gap:var(--s5)}
.toc-nav,.toc-side{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5)}
.toc-h{font:600 var(--t-xs)/1.3 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--signal-ink);margin-bottom:var(--s3)}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);counter-reset:toc}
.toc-list a{display:grid;grid-template-columns:28px 1fr;gap:var(--s2);padding:var(--s2) 0;font-size:var(--t-sm);color:var(--ink);text-decoration:none;border-top:1px solid var(--rule)}
.toc-list a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font:500 var(--t-xs)/1.7 var(--f-mono);color:var(--signal-ink)}
.toc-side p{font-size:var(--t-sm);margin-bottom:var(--s3)}
.toc-side p:last-child{margin-bottom:0}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.rel{display:block;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s5) var(--s6);color:inherit;text-decoration:none;transition:transform var(--dur) var(--ease)}
.rel:active{transform:scale(.97)}
.rel h3{margin:0 0 var(--s2)}
.post a.post-link{color:inherit;text-decoration:none}
.post time{font-size:var(--t-sm);color:var(--ink-2)}

/* grid children may shrink below content width */
.hero-grid>*,.split>*,.two>*,.sel-grid>*,.ser-grid>*,.sdet-grid>*,.sdet>*,.mnt-grid>*,.teasers>*,.tz>*,.fit>*,.row>*,.app>*,.axis-grid>*,.post-grid>*,.cta-grid>*,.f2>*,.ftr-grid>*,.art-grid>*,.rel-grid>*,.spec>div>*{min-width:0}

/* contact band + form */
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:center}
.cta-grid p{color:#d9cfbf}
.cta-ch{display:grid;gap:var(--s3)}
.ch{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);border:1px solid #4a4f57;border-radius:var(--r-m);text-decoration:none;transition:transform var(--dur) var(--ease)}
.ch:active{transform:scale(.97)}
.ch-l{font:600 var(--t-xs)/1.6 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:#e8a462}
.form{display:grid;gap:var(--s4);margin-top:var(--s5)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form label{display:grid;gap:var(--s2);font-weight:500;font-size:var(--t-sm)}
.form input,.form select,.form textarea{font:inherit;font-size:var(--t-base);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--r-s);background:var(--white);color:var(--ink)}
.form button{justify-self:start}
.opt{color:var(--ink-2);font-weight:400}

/* footer */
.ftr{background:#0f1113;color:#d9cfbf;padding:var(--s8) 0 var(--s5);font-size:var(--t-sm)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:var(--s6)}
.ftr a{color:#e6dfd3}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ftr-brand{font:700 var(--t-lg)/1 var(--f-display);color:var(--white)}
.ftr-h{font:600 var(--t-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:#e8a462}
.ftr-addr{color:#b9b0a2}
.ftr-base{border-top:1px solid #2a2e33;margin-top:var(--s7);padding-top:var(--s5)}

/* hover, gated */
@media (hover:hover){
  .nav a:hover{color:var(--white);border-color:#e8a462}
  .btn-signal:hover{background:var(--signal-ink)}
  .btn-line:hover,.btn-ink:hover{background:var(--white)}
  .sel-opt:hover{border-color:var(--ink-2)}
  .ser:hover,.tz:hover,.rel:hover,.post:hover{border-color:var(--ink-2)}
  .toc-list a:hover{color:var(--signal-ink)}
  .ch:hover{border-color:#e8a462}
  a:hover{text-decoration-thickness:2px}
}

/* only animation: selector result reveal */
@media (prefers-reduced-motion:no-preference){
  .sel-res.is-in{animation:selIn 260ms var(--ease)}
  @keyframes selIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* breakpoints: lg 1120 / md 860 / sm 560 */
@media (max-width:1120px){
  .sel-grid{grid-template-columns:1fr 1fr}
  .sel-out{grid-column:1/-1;min-height:0}
  .sdet-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .nav{gap:var(--s1) var(--s3)}
}
@media (max-width:860px){
  .hdr{position:static}
  .hdr-in{flex-wrap:wrap;padding-top:var(--s3);padding-bottom:var(--s3)}
  .nav{order:3;width:100%;margin-left:0}
  .hdr-cta{margin-left:auto}
  .hero-grid,.split,.two-5-7,.two-7-5,.two-6-6,.cta-grid,.row,.teasers,.app,.rel-grid{grid-template-columns:1fr}
  .art-grid{grid-template-columns:1fr;grid-template-areas:"toc" "prose";gap:var(--s6)}
  .toc{position:static}
  .prose{max-width:none}
  .ser-grid,.mnt-grid,.axis-grid,.post-grid{grid-template-columns:1fr 1fr}
  .band{padding:var(--s7) 0}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s4)}
  .sel-grid,.ser-grid,.mnt-grid,.axis-grid,.post-grid,.fit,.f2,.tz,.sdet,.ftr-grid{grid-template-columns:1fr}
  .spec>div,.spec-lg>div{grid-template-columns:1fr;gap:var(--s1)}
  .hdr-cta{display:none}
}