/* =================================================================
   CABLE & NEEDLE  —  shared stylesheet
   Design system: "instrument panel meets shop service manual"
   Palette : dashboard black, aged manual paper, dashboard amber
   Type    : Saira Condensed (display) / Spectral (body) / Space Mono (data)
   ================================================================= */

:root{
  --ink:      #17181b;   /* dashboard black            */
  --ink-2:    #23252a;   /* raised black panel         */
  --paper:    #ece7d9;   /* aged manual paper (page)   */
  --paper-2:  #f6f2e7;   /* lighter card stock         */
  --paper-3:  #e2dccb;   /* recessed / rule            */
  --amber:    #e6a013;   /* dashboard glow (signature) */
  --amber-d:  #b97c07;   /* amber pressed              */
  --needle:   #d6431c;   /* signal-orange needle       */
  --steel:    #4a5560;   /* steel blue-grey secondary  */
  --steel-d:  #333b43;
  --line:     #c8c0ab;   /* hairline on paper          */
  --line-ink: #34373d;   /* hairline on black          */

  --measure: 68ch;
  --wrap: 1140px;
  --r: 3px;

  --sans: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "Courier New", monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

/* ---------- base ---------- */
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:1.02rem;
  /* faint manual-paper grain */
  background-image:
    radial-gradient(rgba(0,0,0,.014) 1px, transparent 1px);
  background-size:4px 4px;
}

h1,h2,h3,h4,.eyebrow,.btn,nav,.plate,.tag{font-family:var(--sans)}
h1,h2,h3,h4{line-height:1.02;letter-spacing:.01em;font-weight:700;margin:0}
h2{font-size:clamp(1.9rem,4.4vw,3rem);text-transform:uppercase}
h3{font-size:1.42rem;text-transform:uppercase;letter-spacing:.02em}
p{margin:0 0 1.05rem}
strong{font-weight:600}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
.prose{max-width:var(--measure)}
.prose p,.prose ul,.prose ol{max-width:var(--measure)}

/* ---------- eyebrow (gauge label) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.76rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber-d);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);display:inline-block}
.on-dark .eyebrow{color:var(--amber)}

/* ---------- links in prose ---------- */
.prose a{
  color:var(--steel-d);text-decoration:none;
  background-image:linear-gradient(var(--amber),var(--amber));
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 92%;
  padding-bottom:1px;transition:background-size .15s,color .15s;
}
.prose a:hover{color:var(--ink);background-size:100% 100%;background-position:0 100%;
  background-image:linear-gradient(rgba(230,160,19,.28),rgba(230,160,19,.28))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.86rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:.72rem 1.25rem;border:2px solid var(--ink);border-radius:var(--r);
  text-decoration:none;cursor:pointer;transition:transform .12s,background .15s,color .15s;
  background:var(--ink);color:var(--paper-2);
}
.btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.on-dark .btn{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.on-dark .btn:hover{background:var(--paper-2);border-color:var(--paper-2)}
.on-dark .btn--ghost{background:transparent;color:var(--paper-2);border-color:var(--paper-3)}
.on-dark .btn--ghost:hover{background:var(--paper-2);color:var(--ink)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ink) 96%,transparent);
  border-bottom:1px solid var(--line-ink);
  color:var(--paper-2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:62px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--paper-2)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--sans);font-weight:700;font-size:1.24rem;letter-spacing:.06em;text-transform:uppercase}
.brand span{font-family:var(--sans);font-weight:600;color:var(--amber);font-size:1.24rem;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:.2rem}
.nav a{
  font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-3);text-decoration:none;padding:.5rem .62rem;border-radius:var(--r);
  transition:color .14s,background .14s;white-space:nowrap;
}
.nav a:hover{color:var(--paper-2);background:var(--ink-2)}
.nav a[aria-current="page"]{color:var(--amber)}
.nav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--amber);margin-top:2px}

.menu-btn{display:none;background:none;border:1px solid var(--line-ink);border-radius:var(--r);
  color:var(--paper-2);padding:.4rem .6rem;font-family:var(--sans);letter-spacing:.1em;
  text-transform:uppercase;font-size:.78rem;cursor:pointer}

@media(max-width:860px){
  .menu-btn{display:inline-block}
  .nav{position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--ink);border-bottom:1px solid var(--line-ink);
    padding:.5rem clamp(1.1rem,4vw,2.4rem) 1rem;gap:0;
    max-height:0;overflow:hidden;transition:max-height .28s ease}
  .nav.open{max-height:520px}
  .nav a{padding:.7rem .2rem;border-bottom:1px solid var(--line-ink)}
  .nav a[aria-current="page"]::after{display:none}
}

/* ---------- generic section ---------- */
.section{padding:clamp(3.2rem,7vw,5.5rem) 0}
.section--tight{padding:clamp(2.4rem,5vw,3.6rem) 0}
.band-dark{background:var(--ink);color:var(--paper-2)}
.band-dark h2,.band-dark h3{color:var(--paper-2)}
.band-steel{background:var(--paper-3)}
.lead{font-size:1.18rem;color:var(--steel-d)}
.band-dark .lead{color:#cfc9ba}

/* ---------- HERO ---------- */
.hero{background:var(--ink);color:var(--paper-2);position:relative;overflow:hidden;
  border-bottom:3px solid var(--amber)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;padding-top:clamp(2.6rem,6vw,4.4rem);padding-bottom:clamp(2.6rem,6vw,4.4rem)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.6rem);text-transform:uppercase;color:var(--paper-2)}
.hero h1 em{color:var(--amber);font-style:normal}
.hero .lead{margin:1.2rem 0 1.8rem;max-width:46ch}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-meta{margin-top:2rem;display:flex;gap:1.8rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:#9aa1a9}
.hero-meta b{display:block;font-family:var(--sans);font-size:1.5rem;color:var(--amber);letter-spacing:.03em}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .gauge-stage{order:-1;max-width:360px;margin-inline:auto}
}

/* gauge ambient glow */
.gauge-stage{position:relative;display:flex;justify-content:center}
.gauge-stage::after{content:"";position:absolute;inset:8% ;border-radius:50%;
  background:radial-gradient(circle,rgba(230,160,19,.20),transparent 62%);filter:blur(14px);z-index:0}
.gauge-stage svg{position:relative;z-index:1;width:100%;max-width:420px;height:auto}

/* ---------- card grids ---------- */
.grid{display:grid;gap:1.15rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.4rem;transition:transform .14s,box-shadow .14s,border-color .14s}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p{font-size:.95rem;color:var(--steel-d);margin-bottom:0}
.card--link{text-decoration:none;color:inherit;display:block;position:relative}
.card--link:hover{transform:translateY(-3px);border-color:var(--amber);
  box-shadow:0 12px 28px -18px rgba(23,24,27,.5)}
.card--link .go{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-d);margin-top:1rem;display:inline-flex;gap:.35rem}
.card .idx{font-family:var(--mono);font-size:.72rem;color:var(--amber-d);letter-spacing:.05em}

/* make card w/ silhouette */
.make-card .art{background:var(--ink);border-radius:var(--r);margin:-1.5rem -1.4rem 1.2rem;
  padding:1.4rem;border-bottom:2px solid var(--amber)}
.make-card .art svg{width:100%;height:auto}

/* ---------- process / numbered steps ---------- */
.steps{counter-reset:step;display:grid;gap:1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--r);padding:1.25rem 1.35rem}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:1.05rem;color:var(--amber-d);font-weight:700;line-height:1.3}
.step h3{font-size:1.1rem;margin-bottom:.3rem}
.step p{margin:0;font-size:.96rem;color:var(--steel-d)}

/* ---------- fault list ---------- */
.faults{display:grid;gap:.9rem}
.fault{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.35rem}
.fault h3{font-size:1.08rem;margin-bottom:.35rem;color:var(--needle)}
.fault .sym{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--steel);
  text-transform:uppercase;display:block;margin-bottom:.5rem}
.fault p{margin:0;font-size:.96rem;color:var(--steel-d)}

/* ---------- SHOP spec plates ---------- */
.plates{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.plates{grid-template-columns:1fr}}
.plate{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:0;overflow:hidden;font-family:var(--serif);display:flex;flex-direction:column;
}
.plate-top{background:var(--ink);color:var(--paper-2);padding:.85rem 1.15rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  border-bottom:2px solid var(--amber)}
.plate-top h3{font-size:1.14rem;color:var(--paper-2)}
.plate-top .rate{font-family:var(--mono);font-size:.78rem;color:var(--amber);white-space:nowrap}
.plate-body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.plate-body p{margin:0;font-size:.93rem;color:var(--steel-d)}
.plate-meta{font-family:var(--mono);font-size:.76rem;color:var(--ink);display:grid;gap:.28rem;
  border-top:1px dashed var(--line);padding-top:.7rem;margin-top:auto}
.plate-meta span{display:flex;gap:.5rem}
.plate-meta span b{font-family:var(--mono);color:var(--steel);font-weight:400;min-width:52px}
.plate-meta a{color:var(--steel-d);text-decoration:none;border-bottom:1.5px solid var(--amber)}
.plate-meta a:hover{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-d);background:var(--paper-3);border:1px solid var(--line);border-radius:20px;
  padding:.14rem .6rem}
.tag--v{color:var(--amber-d);border-color:var(--amber)}

.cat-head{display:flex;align-items:baseline;gap:.8rem;margin:2.4rem 0 1.15rem;
  border-bottom:2px solid var(--ink);padding-bottom:.5rem}
.cat-head:first-of-type{margin-top:0}
.cat-head h3{font-size:1.28rem}
.cat-head .n{font-family:var(--mono);font-size:.78rem;color:var(--amber-d)}

/* ---------- prose helpers ---------- */
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose h3{margin:2.1rem 0 .7rem}
.prose h3:first-child{margin-top:0}
.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--r);padding:1.1rem 1.3rem;margin:1.6rem 0;font-size:.97rem}
.callout b{font-family:var(--sans);letter-spacing:.04em;text-transform:uppercase;font-size:.82rem;
  color:var(--amber-d);display:block;margin-bottom:.3rem}
.callout.warn{border-left-color:var(--needle)}
.callout.warn b{color:var(--needle)}

/* two-col article */
.split{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.aside{position:sticky;top:82px}
.aside .box{background:var(--ink);color:var(--paper-2);border-radius:var(--r);padding:1.4rem;
  border-top:3px solid var(--amber)}
.aside .box h3{color:var(--paper-2);font-size:1.05rem;margin-bottom:.7rem}
.aside .box ul{list-style:none;margin:0;padding:0}
.aside .box li{border-bottom:1px solid var(--line-ink);padding:.5rem 0}
.aside .box a{color:#cfc9ba;text-decoration:none;font-family:var(--sans);letter-spacing:.05em;
  font-size:.9rem;display:flex;justify-content:space-between;gap:.5rem}
.aside .box a:hover{color:var(--amber)}

/* sources */
.sources{font-size:.86rem;color:var(--steel)}
.sources h3{font-size:1rem;margin-bottom:.6rem}
.sources ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.sources a{color:var(--steel-d);text-decoration:none;border-bottom:1px solid var(--line)}
.sources a:hover{color:var(--ink);border-color:var(--amber)}

/* make hero */
.make-hero{background:var(--ink);color:var(--paper-2);border-bottom:3px solid var(--amber)}
.make-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;padding-block:clamp(2.4rem,5vw,3.8rem)}
.make-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);text-transform:uppercase;color:var(--paper-2)}
.make-hero h1 em{color:var(--amber);font-style:normal}
.make-hero .lead{margin-top:1rem;max-width:42ch}
.photo-frame{background:#0f1013;border:1px solid var(--line-ink);border-radius:var(--r);
  padding:1.6rem;position:relative}
.photo-frame::before{content:"FIG. A — PERIOD REFERENCE";position:absolute;top:.7rem;left:1rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:#6b7178}
.photo-frame svg{width:100%;height:auto;margin-top:.8rem}
.photo-frame .cap{font-family:var(--mono);font-size:.68rem;color:#7b828a;margin-top:.9rem;text-align:center}
@media(max-width:820px){.make-hero .wrap{grid-template-columns:1fr}.photo-frame{order:-1}}

/* CTA strip */
.cta{background:var(--amber);color:var(--ink)}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-block:2.4rem}
.cta h2{font-size:clamp(1.6rem,3.6vw,2.3rem);color:var(--ink)}
.cta p{margin:.4rem 0 0;max-width:44ch;color:#4a3a10}
.cta .btn{background:var(--ink);border-color:var(--ink);color:var(--amber)}
.cta .btn:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#9aa1a9;padding:3rem 0 2rem;font-size:.9rem;
  border-top:3px solid var(--amber)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--sans);color:var(--paper-2);text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;margin-bottom:.9rem}
.site-foot a{color:#9aa1a9;text-decoration:none}
.site-foot a:hover{color:var(--amber)}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.foot-brand b,.foot-brand span{font-family:var(--sans);font-size:1.3rem;text-transform:uppercase;letter-spacing:.05em}
.foot-brand b{color:var(--paper-2)}.foot-brand span{color:var(--amber)}
.foot-brand p{margin:.7rem 0 0;max-width:38ch;color:#8a9199}
.disclaimer{border-top:1px solid var(--line-ink);padding-top:1.3rem;font-size:.78rem;color:#767d85;
  max-width:none;font-family:var(--mono);line-height:1.7}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* focus */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;border-radius:2px}

.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--ink);
  padding:.6rem 1rem;font-family:var(--sans);z-index:100;text-decoration:none}
.skip:focus{left:8px;top:8px}