/* ==========================================================================
   Stokes Labs - studio site
   One stylesheet, no build step, no external requests.

   Design direction: "QUIET INSTRUMENT". A sibling to Cleat's craft, not a
   copy of it. Shared DNA: an adaptive light/dark token table, hairline
   chrome, letter-spaced micro-caps, real typographic hierarchy. Its own
   identity: cool neutral paper (Cleat owns warm paper), a deep marine ink
   accent used sparingly (Cleat owns teal and gold), flatter and more
   editorial chrome. A studio is not one of its products.
   ========================================================================== */

:root {
  /* --- Neutral surfaces (light: cool paper) --- */
  --base:       #F1F3F4;
  --elevated:   #FFFFFF;
  --elevated-2: #E9ECEE;
  --ink:        #14181B;
  --ink-2:      #4C565D;
  --ink-3:      #636E75;
  --hairline:   rgba(20, 24, 27, .13);
  --hairline-2: rgba(20, 24, 27, .07);
  --shadow:     0 1px 2px rgba(20, 24, 27, .05);

  /* --- Accent: marine ink. Links, focus, the mark. Nothing decorative. --- */
  --accent:      #2A5570;
  --accent-ink:  #1F4259;
  --accent-wash: #E3EBF1;

  /* --- Chrome --- */
  --r-card: 14px;
  --r-tile: 10px;
  --r-pill: 999px;

  /* --- Measure --- */
  --wrap: 46rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base:       #0B0E10;
    --elevated:   #14181B;
    --elevated-2: #1B2126;
    --ink:        #E6EAEC;
    --ink-2:      #A3ADB4;
    --ink-3:      #7C868D;
    --hairline:   rgba(255, 255, 255, .12);
    --hairline-2: rgba(255, 255, 255, .06);
    --shadow:     none;

    --accent:      #93BEDC;
    --accent-ink:  #B2D3EA;
    --accent-wash: rgba(147, 190, 220, .13);

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: var(--base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

@media (min-width: 40rem) {
  .wrap { padding-inline: 32px; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--elevated);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3rem);
  letter-spacing: -.032em;
  line-height: 1.08;
}

h2 { font-size: clamp(1.375rem, 1.2rem + .85vw, 1.75rem); }
h3 { font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.35; }

/* Micro-caps section label, with a short accent tick. The tick is the one
   piece of colour the layout spends on itself; everything else the accent
   touches is a link, a focus ring or the mark. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-2);
}

p { color: var(--ink-2); }
p + p { margin-top: 1em; }
p strong, li strong { color: var(--ink); font-weight: 650; }

.tnum { font-variant-numeric: tabular-nums; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--hairline-2);
  background: var(--base);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 3px; }

.mark { width: 22px; height: 22px; flex: none; border-radius: 6px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .9375rem;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 550;
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav-links a[aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   Main rhythm
   -------------------------------------------------------------------------- */

main { flex: 1 0 auto; }

.hero {
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: 22px; max-width: 54ch; }

.section {
  padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4rem);
  border-top: 1px solid var(--hairline-2);
}

.section-head { margin-bottom: 28px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head p { margin-top: 12px; max-width: 58ch; }

.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.25em; }
.prose h3 { margin-top: 1.9em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--elevated);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 30px);
}

.card + .card { margin-top: 18px; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  white-space: nowrap;
}
.status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.tagline {
  margin-top: 10px;
  font-size: 1.0625rem;
  color: var(--ink);
  font-weight: 550;
}

.card p { margin-top: 14px; }
.card p + p { margin-top: 1em; }

/* Fact list - the honest specifics, one per row */
.facts {
  list-style: none;
  margin-top: 24px;
  border-top: 1px solid var(--hairline-2);
}
.facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-2);
}
@media (min-width: 34rem) {
  .facts li {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}
.facts .k {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: .25em;
}
@media (max-width: 33.999rem) {
  .facts .k { padding-top: 0; }
}
.facts .v { font-size: .9375rem; color: var(--ink-2); line-height: 1.55; }
.facts .v strong { color: var(--ink); font-weight: 650; }

.platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.chip {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ink-2);
  background: var(--elevated-2);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

/* Bulleted lists inside prose */
.prose ul, .list {
  list-style: none;
  margin-top: 1em;
}
.prose ul li, .list li {
  position: relative;
  padding-left: 1.15em;
  margin-top: .55em;
  color: var(--ink-2);
}
.prose ul li::before, .list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 1px;
  background: var(--ink-3);
}

/* Callout - the short version of a long page */
.callout {
  background: var(--elevated);
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-tile);
  padding: clamp(16px, 3vw, 22px);
}
.callout .eyebrow { margin-bottom: 8px; }
.callout p { color: var(--ink); }

/* Contact block */
.contact-line {
  margin-top: 18px;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.015em;
}
.contact-line a { color: var(--accent-ink); }

.meta {
  margin-top: 10px;
  max-width: 52ch;
  font-size: .8125rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--hairline-2);
  padding-block: 28px 36px;
  margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.foot-c {
  font-size: .8125rem;
  color: var(--ink-3);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .8125rem;
}
.foot-links a {
  color: var(--ink-2);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }