/* ==========================================================================
   Partsmith — shared design system
   Tokens, reset, base typography and every reusable component used across
   the site. Page-specific overrides are scoped with a body class:
     .page-home  -> index.html
     .page-spoke -> grippers.html and future spoke pages that share its
                    section rhythm (tighter hero/section spacing, etc.)
   Keep this file the single source of truth — do not reintroduce inline
   <style> blocks in individual pages.
   ========================================================================== */

/* -- self-hosted webfonts --------------------------------------------------
   Latin-subset static woff2 instances, downloaded from Google Fonts and
   self-hosted to remove the render-blocking third-party stylesheet and
   font-file request chain that previously ran before first paint.
   See assets/fonts/OFL.txt for licensing.
   ---------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/inter-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/space-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* -- tokens --------------------------------------------------------------- */
:root{
  --paper:#F4F5F2;
  --paper-2:#FFFFFF;
  --ink:#191F24;
  --ink-soft:#4A545C;
  --line:#D3D7D1;
  --accent:#1B3FD1;
  --accent-tint:#E7ECFB;
  --max:1080px;
  --pad:clamp(20px,5vw,64px);
}

/* -- reset & base typography ----------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
body.page-spoke{font-family:'Inter',system-ui,sans-serif}

h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.08;letter-spacing:-0.01em;font-weight:600}
body.page-spoke h1,body.page-spoke h2,body.page-spoke h3{line-height:1.1}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* -- accessibility: focus & skip link --------------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
/* Lighter outline on dark panels (.niche, .specs) so it stays visible against --ink */
.niche :focus-visible,
.specs :focus-visible{outline-color:#8FA6FF}

.skip{
  position:absolute;
  top:-48px;
  left:12px;
  background:var(--ink);
  color:var(--paper-2);
  padding:12px 18px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  font-size:15px;
  border-radius:2px;
  z-index:100;
  transition:top .15s ease;
}
.skip:focus{top:12px;text-decoration:none}

/* -- top bar ---------------------------------------------------------------- */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.mark{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-0.02em;color:var(--ink)}
.mark span{color:var(--accent)}
.nav a{color:var(--ink-soft);margin-left:26px;font-size:15px;font-weight:500}
.nav a:hover{color:var(--ink);text-decoration:none}
@media(max-width:640px){.nav a:not(.nav-cta){display:none}}
.nav-cta{color:var(--accent);font-weight:600;font-size:16px}

/* -- hero --------------------------------------------------------------- */
.hero{padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(40px,6vw,72px)}
body.page-spoke .hero{padding-top:clamp(48px,8vw,88px);padding-bottom:clamp(32px,5vw,56px)}
.hero h1{font-size:clamp(34px,6vw,60px);max-width:15ch;font-weight:700}
body.page-spoke .hero h1{font-size:clamp(32px,5.4vw,54px);max-width:17ch}
.hero p.lead{font-size:clamp(18px,2.2vw,22px);color:var(--ink-soft);max-width:52ch;margin-top:22px}
body.page-spoke .hero p.lead{max-width:56ch;margin-top:20px}
.kicker{font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);margin-bottom:18px}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
body.page-spoke .cta-row{margin-top:32px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:2px;font-weight:600;font-size:16px;font-family:'Space Grotesk';border:1.5px solid var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper-2)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-2);text-decoration:none}

/* -- dimension-line motif ------------------------------------------------- */
.dim{display:flex;align-items:center;gap:12px;margin-top:52px;color:var(--ink-soft)}
.dim .rule{flex:1;height:0;border-top:1.5px solid var(--ink);position:relative}
.dim .rule::before,.dim .rule::after{content:"";position:absolute;top:-4px;width:0;height:0;border-block:4px solid transparent}
.dim .rule::before{left:0;border-right:7px solid var(--ink)}
.dim .rule::after{right:0;border-left:7px solid var(--ink)}
.dim .val{font-family:'Space Mono',monospace;font-size:13px;white-space:nowrap;color:var(--ink)}
.dim .note{font-size:13px;white-space:nowrap}

/* -- sections -------------------------------------------------------------- */
section{padding-block:clamp(48px,7vw,84px)}
body.page-spoke section{padding-block:clamp(44px,6vw,76px)}
.sec-head{font-size:14px;color:var(--accent);font-family:'Space Mono',monospace;margin-bottom:14px}
h2{font-size:clamp(26px,4vw,38px);max-width:20ch;margin-bottom:8px}
body.page-spoke h2{font-size:clamp(25px,4vw,36px);max-width:22ch}
.sec-intro{color:var(--ink-soft);max-width:56ch;margin-bottom:40px}
body.page-spoke .sec-intro{max-width:58ch;margin-bottom:36px}

/* -- services as measured list (home) -------------------------------------- */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,48px);padding-block:28px;border-bottom:1px solid var(--line);align-items:baseline}
.svc-row .idx{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft);padding-top:6px}
.svc-row h3{font-size:22px;margin-bottom:8px}
.svc-row p{color:var(--ink-soft);max-width:60ch}

/* -- steps (home) ----------------------------------------------------------- */
.steps{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--paper-2);padding:28px}
.step .n{font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:16px}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}

/* -- capability panel (home) ------------------------------------------------ */
.cap{background:var(--paper-2);border:1px solid var(--line);padding:clamp(24px,4vw,40px)}
.cap ul{list-style:none;display:grid;gap:14px;margin-top:20px}
.cap li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:16px}
.cap li b{font-family:'Space Mono',monospace;font-size:13px;color:var(--accent);white-space:nowrap;padding-top:3px}
.cap .fine{color:var(--ink-soft);font-size:15px;margin-top:22px;max-width:60ch}

/* -- niche callout (home) --------------------------------------------------- */
.niche{background:var(--ink);color:var(--paper);padding:clamp(28px,5vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.niche h3{color:var(--paper-2);font-size:clamp(22px,3vw,30px);max-width:22ch}
.niche p{color:#B9C0C7;margin-top:8px;max-width:48ch}
.niche .btn{border-color:var(--paper-2);color:var(--paper-2)}
.niche .btn:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}

/* -- portfolio grid ---------------------------------------------------------
   Portfolio grid — live with real photographs.
   ---------------------------------------------------------------------------- */
.grid3{display:grid;gap:20px}
@media(min-width:720px){.grid3{grid-template-columns:repeat(3,1fr)}}
.case{border:1px solid var(--line);background:var(--paper-2)}
.case .ph{aspect-ratio:1/1;background:repeating-linear-gradient(45deg,#EDEFEA,#EDEFEA 10px,#F4F5F2 10px,#F4F5F2 20px);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:'Space Mono',monospace;font-size:12px;border-bottom:1px solid var(--line)}
.case .ph img{width:100%;height:100%;object-fit:cover;display:block}
.case .cap-txt{padding:18px}
.case h3{font-size:17px;margin-bottom:6px}
.case p{font-size:15px;color:var(--ink-soft)}

/* -- fit list (spoke) --------------------------------------------------- */
.fit{border-top:1px solid var(--line)}
.fit-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,44px);padding-block:24px;border-bottom:1px solid var(--line);align-items:baseline}
.fit-row .idx{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft);padding-top:5px}
.fit-row h3{font-size:20px;margin-bottom:6px}
.fit-row p{color:var(--ink-soft);max-width:62ch}

/* -- two-panel pricing grid (spoke) --------------------------------------- */
.grid2{display:grid;gap:20px}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}}
.panel{background:var(--paper-2);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.panel h3{font-size:19px;margin-bottom:12px}
.panel p{color:var(--ink-soft);font-size:16px}
.panel .price{font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);margin-top:14px;display:block}

/* -- dark spec panel (spoke) ------------------------------------------------ */
.specs{background:var(--ink);color:var(--paper);padding:clamp(24px,4vw,40px)}
.specs h2{color:var(--paper-2);max-width:24ch}
.specs ul{list-style:none;display:grid;gap:14px;margin-top:22px}
.specs li{display:grid;grid-template-columns:170px 1fr;gap:16px;font-size:16px;color:#C7CDD3;border-top:1px solid #313841;padding-top:14px}
.specs li b{font-family:'Space Mono',monospace;font-size:13px;color:#8FA6FF;font-weight:400}
@media(max-width:560px){.specs li{grid-template-columns:1fr;gap:4px}}

/* -- contact ---------------------------------------------------------------- */
#contact{background:var(--paper-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:28px}
@media(min-width:720px){.contact-grid{grid-template-columns:1.2fr 1fr;align-items:start}}
.contact-lines{display:grid;gap:18px;margin-top:24px}
.cl{display:block}
.cl small{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);display:block;margin-bottom:4px}
.cl a,.cl span{font-family:'Space Grotesk';font-size:clamp(20px,3vw,26px);font-weight:600;color:var(--ink)}
.contact-note{color:var(--ink-soft);font-size:16px}

/* -- back link (spoke) ------------------------------------------------------ */
.back{font-size:15px}

/* -- footer ------------------------------------------------------------------ */
footer{border-top:1px solid var(--line);padding-block:32px;color:var(--ink-soft);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer .mono{font-family:'Space Mono',monospace;font-size:12px}

/* ---------------------------------------------------------------
   Article prose — used by /articles/*.html
   --------------------------------------------------------------- */
.mark:hover{text-decoration:none}

.crumb{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:22px}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--ink)}

.answer{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:clamp(20px,3vw,28px);margin-bottom:40px}
.answer .lbl{font-family:'Space Mono',monospace;font-size:13px;color:var(--accent);display:block;margin-bottom:10px}
.answer p{color:var(--ink);font-size:19px;margin-bottom:0;max-width:64ch}

.prose{max-width:72ch}
.prose h2{font-size:clamp(22px,3vw,30px);max-width:28ch;margin-top:44px;margin-bottom:12px}
.prose h3{font-size:19px;margin-top:28px;margin-bottom:8px}
.prose p{margin-bottom:18px;color:var(--ink-soft)}
.prose p strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px 22px;color:var(--ink-soft);display:grid;gap:8px}
.prose li{padding-left:4px}
.prose a{text-decoration:underline}
.prose .meta{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:0}

.artcta{background:var(--ink);color:var(--paper);padding:clamp(24px,4vw,36px);margin-top:48px}
.artcta h2{color:var(--paper-2);font-size:clamp(20px,3vw,26px);max-width:24ch;margin-top:0}
.artcta p{color:#B9C0C7;margin-top:8px;margin-bottom:0;max-width:52ch}
.artcta .btn{border-color:var(--paper-2);color:var(--paper-2);margin-top:20px}
.artcta .btn:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}

/* Dimension-line motif: allow the caption to drop to its own line on
   narrow viewports so the nowrap spans cannot force horizontal scroll. */
@media(max-width:480px){
  .dim{flex-wrap:wrap;gap:10px 12px}
  .dim .rule{min-width:80px}
  .dim .note{white-space:normal;flex-basis:100%;line-height:1.4}
}