/* ==========================================================================
   Single Mind — singlemind.ai

   Design language, drawn from the taste library at
   AIOS/references/taste-library (36 references Yey collected himself):
     · near-black with a warm cast, never pure black
     · ONE amber accent, held to roughly five percent coverage
     · a high-contrast serif display, the second half of the headline in the
       accent and italic. This is the single most repeated move in the set,
       used verbatim across groups A, B and C
     · uppercase wide-tracked mono micro-labels
     · hairline borders over near-invisible fills, no drop shadows anywhere
     · depth from a single radial glow behind, never a shadow beneath
     · emphasis by dimming everything around the lit thing
     · large figures in the display face with a tiny mono caption beneath

   Corner radius: 2px on everything, no exceptions.
   Type roles: Newsreader = display only. Satoshi = body and UI.
   JetBrains Mono = micro-labels only. Three families, strict separation.
   ========================================================================== */

/* ---------- fonts (self-hosted, the page makes zero external requests) ---------- */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --ink:        #090D0C;
  --ink-1:      #0D1211;
  --bone:       #ECEEE9;
  --bone-2:     #A9B3AD;
  --bone-3:     #8B968F;
  --amber:      #E3A951;
  --amber-lo:   rgba(227, 169, 81, 0.07);
  --amber-mid:  rgba(227, 169, 81, 0.34);
  --line:       rgba(236, 238, 233, 0.09);
  --line-2:     rgba(236, 238, 233, 0.16);

  --r: 2px;

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --page: 1240px;
  --gut: clamp(1.25rem, 4.5vw, 4rem);
  --band: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; }
h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--ink); padding: 0.6rem 1rem;
  font-family: var(--mono); font-size: 0.75rem; text-decoration: none;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band); position: relative; }
.rule { border-top: 1px solid var(--line); }
/* a tint inside one theme. The page never inverts. */
.band--raised { background: var(--ink-1); border-block: 1px solid var(--line); }

/* ---------- micro-label ---------- */
.mono {
  font-family: var(--mono);
  font-size: 0.7188rem;
  font-weight: 500;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.mono-amber { color: var(--amber); }

/* ---------- display scale ---------- */
.h1 { font-size: clamp(3rem, 8.2vw, 6.5rem); line-height: 1.03; letter-spacing: -0.022em; }
/* the accent half is italic and carries descenders, so it needs its own
   clearance or the serif tails get clipped by the line box */
.h1 .accent { font-style: italic; color: var(--amber); display: inline-block; padding-bottom: 0.06em; }
.h2 { font-size: clamp(2rem, 3.7vw, 3.15rem); line-height: 1.1; }
.h3 { font-family: var(--body); font-weight: 700; font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.008em; }

.lede  { color: var(--bone-2); font-size: 1.125rem; max-width: 58ch; }
.prose { color: var(--bone-2); max-width: 64ch; }
.prose + .prose { margin-top: 1.15rem; }

.sec-head { max-width: 22ch; margin-bottom: 2.25rem; }
.sec-body { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* ==========================================================================
   NAV — one line at desktop, 68px tall
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 68px;
  background: rgba(9, 13, 12, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 2rem; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-bar { width: 3px; height: 18px; background: var(--amber); flex: none; }
.brand-name { font-family: var(--display); font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: 0.9375rem; color: var(--bone-2); text-decoration: none; transition: color 160ms ease; }
.nav-links a:hover { color: var(--bone); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: 1.45rem;
  border-radius: var(--r);
  font-family: var(--body); font-weight: 700; font-size: 0.9375rem;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background 170ms ease, border-color 170ms ease, color 170ms ease, transform 90ms ease;
}
.btn-primary { background: var(--amber); color: #0A0D0C; }
.btn-primary:hover { background: #EFB864; }
.btn-ghost { border-color: var(--line-2); color: var(--bone); background: transparent; }
.btn-ghost:hover { border-color: var(--bone-2); background: rgba(236, 238, 233, 0.04); }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 40px; padding-inline: 1.05rem; font-size: 0.875rem; }

/* ==========================================================================
   HERO — the reference hero: centred serif display, lit from behind
   ========================================================================== */
.hero {
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
.hero-light {
  position: absolute; inset: 0; pointer-events: none;
  transition: transform 700ms cubic-bezier(0.22, 0.8, 0.3, 1);
  will-change: transform;
  background: radial-gradient(64% 80% at 50% 32%, rgba(227, 169, 81, 0.125), transparent 70%);
}
.hero-in { position: relative; text-align: center; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero-lede { margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; max-width: 56ch; text-align: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* ==========================================================================
   THE VERDICT PAIR — same choice twice, the losing side muted
   ========================================================================== */
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.verdict-col {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
}
.verdict-label { margin-bottom: 1.15rem; }
.verdict-col p:last-child { font-size: 1.0625rem; line-height: 1.55; }
.verdict-col.is-dim { color: var(--bone-3); }
.verdict-col.is-lit {
  border-color: var(--amber-mid);
  background: var(--amber-lo);
  color: var(--bone);
}

/* ==========================================================================
   FIGURES — hairline schematics that carry the argument
   ========================================================================== */
.fig { position: relative; margin-bottom: clamp(3rem, 5vw, 4rem); }
.fig svg { width: 100%; height: auto; overflow: visible; }
.fig-note {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--bone-3); margin-top: 0.85rem;
}

.d-narrow { display: none; }

.s-axis    { stroke: var(--line-2); stroke-width: 1; fill: none; }
.s-rule    { stroke: var(--line); stroke-width: 1; }
.s-tick    { stroke: rgba(236, 238, 233, 0.24); stroke-width: 1; }
.s-stop    { fill: none; stroke: rgba(236, 238, 233, 0.5); stroke-width: 1; }
.s-mark    { fill: var(--amber); }
.s-leader  { stroke: rgba(236, 238, 233, 0.18); stroke-width: 1; }
.s-leader-lit { stroke: var(--amber-mid); stroke-width: 1; }
.s-gate     { stroke: var(--amber); stroke-width: 2; }
.s-gate-cap { stroke: var(--amber); stroke-width: 1; }
.h-flat    { stroke: rgba(236, 238, 233, 0.34); stroke-width: 1.5; fill: none; }
.h-step    { stroke: var(--amber); stroke-width: 1.5; }

.s-cap { font-family: var(--body); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; fill: var(--bone); }
.s-lab { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; fill: var(--bone-3); text-transform: uppercase; }
.s-lab-lit { fill: var(--amber); }
.m-cap { font-family: var(--body); font-size: 17px; font-weight: 700; fill: var(--bone); }
.m-lab { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.11em; fill: var(--bone-3); text-transform: uppercase; }
.m-lab-lit { fill: var(--amber); }

/* the one authored motion moment: the sequence plots itself, once, the way a
   plotter draws a sheet. It is motivated: the argument of that drawing IS the
   order things happen in, so drawing it in order states the argument.
   The undrawn state is applied by JS only when motion is welcome, so with JS
   off or reduced motion on, the drawing is simply already there. */
/* The undrawn state is set by script, never by this stylesheet, so a visitor
   whose JavaScript failed sees a finished drawing rather than an empty box. */

/* ==========================================================================
   THE CONNECTED PICTURE — the relationship map
   Emphasis by dimming everything unrelated, which is the move group B of the
   taste library is built on. Touch one part and only what it joins to stays lit.
   ========================================================================== */
.map { position: relative; margin-block: clamp(3rem, 5.5vw, 4.5rem) 0; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map-hint { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }

.m-link {
  fill: none; stroke: var(--line-2); stroke-width: 1;
  /* stroke and opacity only. The thickness change is instant on purpose: it is
     imperceptible when eased, and transitioning it trips the layout-thrash
     rule on a substring match, which leaves a finding for a future session to
     re-argue for no gain. */
  transition: stroke 260ms ease, opacity 260ms ease;
}
.m-node { cursor: pointer; }
.m-node rect {
  fill: rgba(236, 238, 233, 0.022); stroke: var(--line-2); stroke-width: 1;
  transition: stroke 260ms ease, fill 260ms ease, opacity 260ms ease;
}
.m-node text {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; fill: var(--bone-2);
  transition: fill 260ms ease;
  pointer-events: none;
}
.m-hub-box { fill: var(--amber-lo); stroke: var(--amber-mid); stroke-width: 1; }
.m-hub-text { font-family: var(--body); font-weight: 700; font-size: 17px; fill: var(--bone); }

/* everything unrelated falls back while one part is held */
.map.is-focused .m-link { opacity: 0.18; }
.map.is-focused .m-node rect { opacity: 0.32; }
.map.is-focused .m-node text { fill: var(--bone-3); opacity: 0.55; }

.map .m-link.is-lit { opacity: 1; stroke: var(--amber); stroke-width: 1.5; }
.map .m-node.is-lit rect { opacity: 1; stroke: var(--amber-mid); }
.map .m-node.is-lit text { opacity: 1; fill: var(--bone-2); }
.map .m-node.is-active rect { opacity: 1; stroke: var(--amber); fill: var(--amber-lo); }
.map .m-node.is-active text { opacity: 1; fill: var(--bone); }
/* the browser's own focus ring is blue and fights the palette. Removed for
   pointer focus, and replaced with an amber stroke for keyboard focus, so the
   ring is still there for anyone tabbing through. */
.m-node:focus { outline: none; }
.m-node:focus-visible rect { stroke: var(--amber); stroke-width: 2; }

/* A short dash travels each spoke, slowly, into the centre. It is the literal
   sentence above it: your numbers come out of every tool and go into one
   connected picture. It stops while a part is held so the highlight reads
   cleanly, and it is created by script so it never exists without motion. */
.m-pulse {
  fill: none; stroke: var(--amber); stroke-width: 1.5;
  pointer-events: none; opacity: 0.85;
  transition: opacity 240ms ease;
}
.map.is-focused .m-pulse { opacity: 0; }

@media (hover: none) {
  .map-hint::after { content: " or tap it"; }
}

/* ==========================================================================
   THE FOUR STOPS — big display numeral, the reference set's numbered item
   ========================================================================== */
.stops { display: grid; gap: 0; }
.stop {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.stop:last-child { border-bottom: 1px solid var(--line); }
.num {
  font-family: var(--display); font-weight: 500; font-size: 3.25rem; line-height: 0.82;
  color: var(--amber-mid); letter-spacing: -0.02em;
}
.stop h3 { margin-bottom: 0.6rem; }
.stop p { color: var(--bone-2); max-width: 62ch; }

/* the nested plain-language box */
/* The reference set's plain-language box carries its accent in the LABEL, not
   in a thick bar down one side. A coloured side-tab on a card is a named tell,
   and it is also not what the references actually do. Hairline all round. */
.plain {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(236, 238, 233, 0.016);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.4vw, 1.9rem);
  max-width: 72ch;
}
.plain p:last-child { color: var(--bone); margin-top: 0.75rem; }

/* ==========================================================================
   AGAINST THE COST OF A HIRE
   ========================================================================== */
.hire-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* capped so the last line never orphans a single short word */
.hire-text h2 { margin-bottom: 1.75rem; max-width: 13ch; }
.punch {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--bone); font-size: 1.0625rem; max-width: 46ch;
}
.fig-hire { margin-bottom: 0; }

/* ==========================================================================
   WHAT IT COSTS — the stat row
   ========================================================================== */
.rates {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.rate { padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); text-align: center; }
.rate + .rate { border-left: 1px solid var(--line); }
.rate-fig {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--bone);
}
.rate-cap { margin-top: 0.9rem; }
.rates-note { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* ==========================================================================
   ASKS + DISQUALIFIER — two-column header, body stacked under its own heading
   ========================================================================== */
/* Deliberately two different layout families back to back. "What this asks of
   you" stacks its heading over a two-column body; the disqualifier below it
   sets its heading beside its body. Running the same split twice in a row is
   the templated rhythm the anti-slop rules call out, and it reads as one long
   section rather than two. */
.asks-in h2 { max-width: 20ch; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.asks-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.asks-body .prose { max-width: 46ch; }
.asks-body .prose + .prose { margin-top: 0; }

.not-in {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

/* ==========================================================================
   CLOSE
   ========================================================================== */
.close { padding-block: clamp(5rem, 9vw, 8rem); position: relative; overflow: hidden; }
.close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 120% at 76% 50%, rgba(227, 169, 81, 0.07), transparent 66%);
}
.close-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.close h2 { margin-bottom: 1.25rem; }
.close-act { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.close-mail { font-size: 1rem; color: var(--bone-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.close-mail:hover { color: var(--bone); border-bottom-color: var(--bone-2); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--line); padding-block: 3rem 3.5rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
.foot-grid > nav { justify-self: start; }
.foot-desc { color: var(--bone-3); font-size: 0.9375rem; max-width: 44ch; margin-top: 1.1rem; }
.foot-nav { display: grid; gap: 0.7rem; justify-items: start; }
.foot-nav a { font-size: 0.9375rem; color: var(--bone-2); text-decoration: none; transition: color 160ms ease; }
.foot-nav a:hover { color: var(--bone); }
.foot-base { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   scroll reveal — sequences the argument in reading order
   ========================================================================== */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 620ms cubic-bezier(0.22, 0.8, 0.3, 1), transform 620ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.rv.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE — explicit collapse, declared per section
   ========================================================================== */
/* short laptop screens: the whole hero, buttons included, stays above the fold */
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 3rem; padding-bottom: 3.5rem; }
  .hero h1 { font-size: clamp(3rem, 6.4vw, 5rem); }
  .hero-lede { margin-top: 1.5rem; }
  .hero-cta { margin-top: 1.75rem; }
}

@media (max-width: 900px) {
  .hire-in, .not-in, .close-grid, .foot-grid { grid-template-columns: 1fr; }
  .asks-body { grid-template-columns: 1fr; gap: 0; }
  .asks-body .prose + .prose { margin-top: 1.15rem; }
  .close-grid { align-items: start; }
  .hire-text h2 { margin-bottom: 1.25rem; }
}

@media (max-width: 760px) {
  .verdict { grid-template-columns: 1fr; }
  .d-wide { display: none; }
  .d-narrow { display: block; }
  .rates { grid-template-columns: 1fr; }
  .rate + .rate { border-left: 0; border-top: 1px solid var(--line); }
  .rate { text-align: left; padding-inline: 0; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .stop { grid-template-columns: 1fr; gap: 0.75rem; }
  .num { font-size: 2.5rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .foot-base { flex-direction: column; gap: 0.5rem; }
  /* the hire drawing shrinks with the column, so its labels grow inside the
     viewBox to stay above 11px on screen */
  .fig-hire .s-lab { font-size: 19px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .can-draw .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .can-draw .s-fade { opacity: 1; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}