/* ==========================================================================
   instrument.css — "lab instrument" visual identity (2026-09)
   Loaded after styles.css on every page. Same tokens, fonts and blue
   accent; the identity comes from structure: an oscilloscope graticule,
   square panel corners, hairline borders instead of glows, numbered
   monospace channel labels, and readout-style numbers. Removing this file
   and its <link> on each page reverts to the previous look.
   ========================================================================== */

:root {
  --grid-minor: rgba(255, 255, 255, 0.035);
  --grid-major: rgba(255, 255, 255, 0.075);
  --panel: #07080a;
  --panel-edge: rgba(255, 255, 255, 0.10);
  --radius: 4px;
  --radius-lg: 6px;
}
html[data-theme="light"] {
  --grid-minor: rgba(0, 0, 0, 0.035);
  --grid-major: rgba(0, 0, 0, 0.07);
  --panel: #ffffff;
  --panel-edge: rgba(0, 0, 0, 0.14);
}

/* ---- Graticule background: 24px minor / 120px major divisions ---- */
body::before {
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    #000;
}
html[data-theme="light"] body::before {
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    #fafafc;
}
.grid-overlay { display: none; }

/* ---- Hero: instrument front panel — text left, scope display right ---- */
.hero-home .hero-inner {
  max-width: calc(var(--container) - 112px);
  width: 100%;
  margin: 0 auto;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}
.hero-home .hero-inner > :not(.hero-scope) { grid-column: 1; }
.hero-home .hero-eyebrow {
  justify-self: start;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--panel-edge);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-home .hero-title { letter-spacing: -0.04em; }
.hero-home .hero-title .accent { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
.hero-home .hero-role,
.hero-home .hero-subtitle { margin-left: 0; margin-right: 0; }
.hero-home .hero-ctas { justify-content: flex-start; flex-wrap: nowrap; }
@media (max-width: 1180px) { .hero-home .hero-ctas { flex-wrap: wrap; } }

.hero-scope {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: center;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 14px 16px 16px;
}
.hero-scope-head, .hero-scope-readouts span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim2);
}
.hero-scope-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.hero-trace { display: block; width: 100%; height: 200px; color: var(--accent); }
.hero-trace .trace-grid { stroke: var(--grid-major); }
.hero-scope-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--panel-edge);
  border: 1px solid var(--panel-edge);
}
.hero-scope-readouts div { background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.hero-scope-readouts b { font-family: var(--font-mono); font-weight: 500; font-size: 1.35rem; color: var(--accent); }

/* ---- Buttons: squared, hairline ---- */
.btn, .nav-cta, .show-more { border-radius: 3px !important; }
.btn-primary { box-shadow: none !important; }

/* ---- Recognition row: a status bar ---- */
.recognition { background: var(--panel); border-color: var(--panel-edge); }
.recognition-row li { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- Channel-numbered section labels ---- */
#main { counter-reset: channel; }
#main > .section { counter-increment: channel; }
#main > .section > .section-header[data-eyebrow]::before {
  content: "CH" counter(channel, decimal-leading-zero) "  ·  " attr(data-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.section-title { letter-spacing: -0.03em; }
.section-line {
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--panel-edge) 0 1px, transparent 1px 24px) 0 100% / 100% 6px no-repeat,
    linear-gradient(var(--panel-edge), var(--panel-edge)) 0 100% / 100% 1px no-repeat;
  height: 7px;
  width: 100%;
  opacity: 1;
}

/* ---- Panels: flat, square, hairline; no glows or gradients ---- */
.project-card, .work-grid .work-card-feature, .tl-card, .pub-item, .skill-group,
.highlight, .contact-grid, .plain-english, .project-results, .photo-frame,
.photo-band-figure img, .work-card-media {
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important;
  border: 1px solid var(--panel-edge) !important;
  box-shadow: none !important;
}
.project-card::before, .project-card::after, .tl-card::before, .skill-group::before,
.highlight::before, .pub-item::before, .contact-grid::before, .work-card-feature::before {
  display: none !important;
}
.project-card:hover, .work-grid .work-card-feature:hover { transform: none; border-color: var(--accent) !important; }
.work-grid .work-card-feature { border-left: 3px solid var(--accent) !important; }
.plain-english { border-left: 3px solid var(--accent) !important; }
.work-card-media, .photo-band-figure img { background: #fff !important; }
.project-card-tag, .plain-english-tag, .tl-kind, .skill-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.plain-english-tag { background: transparent; padding: 0; }
.skill-tags span { border-radius: 2px; }

/* ---- Numbers read like measurement readouts ---- */
.result-num, .highlight-num {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.project-results { background: transparent !important; border-style: dashed !important; }
.highlight-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.highlight-label small { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }

/* ---- Timeline markers as test points ---- */
.tl-marker, .tl-marker::after { border-radius: 1px !important; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--panel-edge); font-family: var(--font-mono); font-size: 0.78rem; }

@media (max-width: 1000px) {
  .hero-home .hero-inner { display: block; }
  .hero-scope { margin-top: 28px; }
  .hero-trace { height: 120px; }
}
@media (max-width: 720px) {
  .hero-home .hero-eyebrow { letter-spacing: 0.04em; font-size: 0.6rem; padding: 6px 10px; }
  .hero-scope-readouts b { font-size: 1.1rem; }
  .hero-scope-readouts div { padding: 8px; }
}

/* ==== Site-wide (all pages) ==== */
/* Every hero: mono eyebrow in a square frame, solid accent on the title. */
.hero-eyebrow {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--panel-edge);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-title .accent { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
.hero-deep .hero-title { font-size: clamp(2.8rem, 6.4vw, 5.4rem); letter-spacing: -0.04em; }
.hero-meta { border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--panel-edge); }
.hero-meta strong { font-family: var(--font-mono); font-weight: 500; color: var(--accent); }

/* Panels on the other pages get the same flat, square, hairline treatment. */
.card, .rtl-card, .bio-card, .fact-block, .figure-card, .process-step, .vision-bullet,
.story-aside, .big-stat, .avail-card, .avail-pill, .hire-tldr, .role-fit, .role-fit-grid article,
.faq-item, .now-card, .now-list, .tool-card, .tool-controls, .tool-canvas-wrap, .tool-readouts,
.journey-canvas-wrap, .journey-label, .try-widget, .try-stage, .try-controls, .try-explainer,
.photo-card, .press-glance, .notfound-canvas {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.card, .rtl-card, .bio-card, .fact-block, .process-step, .vision-bullet, .story-aside, .big-stat,
.avail-card, .hire-tldr, .role-fit, .faq-item, .now-card, .tool-card, .press-glance {
  background: var(--panel) !important;
  border: 1px solid var(--panel-edge) !important;
}
.card::before, .rtl-card::before, .bio-card::before, .process-step::before, .vision-bullet::before,
.story-aside::before, .role-fit-grid article::before, .now-card::before, .now-card::after,
.avail-card::after, .journey-label::before { display: none !important; }
.card:hover, .rtl-card:hover, .bio-card:hover, .process-step:hover, .vision-bullet:hover { transform: none !important; border-color: var(--accent) !important; }
.big-stat-num { font-family: var(--font-mono) !important; font-weight: 500 !important; color: var(--accent); }
.rtl-dot, .rtl-spine::before { border-radius: 1px !important; }
.rtl-tag, .avail-pill, .tool-row .btn, .bio-copy, .pub-cite-btn { border-radius: 2px !important; }
.hire-tldr { border-left: 3px solid var(--accent) !important; }
/* Research timeline tags: neutral, blue only for the current entry. */
.rtl-tag { color: var(--text-dim) !important; border-color: var(--panel-edge) !important; background: transparent !important; }
.rtl-tag-now { color: var(--accent) !important; border-color: rgba(10, 132, 255, 0.5) !important; }

/* ==== Refinement pass (2026-09): typography + consistency ==== */
/* One distinctive heading face on every device (was the OS system font on
   Apple devices). All three families were already loaded by every page. */
:root {
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --section-y: 120px;
  --section-y-sm: 72px;
}
body { font-family: var(--font-body); }
h1, h2, h3, h4, .hero-title, .hero-role, .section-title, .work-card-title,
.project-card h4, .tl-title, .pub-title, .rtl-title, .process-title, .contact-pitch h3 {
  font-family: var(--font-display);
}
/* Space Grotesk is wider than SF/Inter: loosen the very tight tracking. */
.hero-title { letter-spacing: -0.035em !important; font-weight: 600; }
.hero-role, .section-title { letter-spacing: -0.025em !important; }
.section-title { font-weight: 600; }
.work-card-title, .tl-title, .pub-title, .rtl-title, .process-title { letter-spacing: -0.01em; font-weight: 600; }

/* One vertical rhythm for every page's sections. */
#main > .section { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
#main > #projects.section { padding-top: 44px !important; }
.section-header { margin-bottom: 40px !important; gap: 14px; }

/* Subpage heroes become instrument front panels too: left-aligned in the
   content column, compact, with a hairline under them — same as the home page. */
.hero-deep {
  min-height: auto !important;
  padding: 128px 56px 56px !important;
  justify-content: flex-start;
  border-bottom: 1px solid var(--panel-edge);
}
.hero-deep .hero-inner {
  max-width: calc(var(--container) - 112px);
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.hero-deep .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1; margin-bottom: 18px; }
.hero-deep .hero-title .title-line { display: inline; }
.hero-deep .hero-title .title-line + .title-line::before { content: " "; }
.hero-deep .hero-subtitle { margin-left: 0; margin-right: 0; max-width: 720px; }
.hero-deep .hero-ctas, .hero-deep .hero-meta { justify-content: flex-start; margin-left: 0; }
.hero-deep .scroll-indicator { display: none; }
.hero-deep + .section-divider, .hero-home + .section-divider { display: none; }

/* Timeline, FAQ, toolbox: same panel language as the rest. */
.tl-card { padding: 20px 22px; }
.tl-date, .conf-date, .talk-date, .rtl-year { font-family: var(--font-mono); letter-spacing: 0.02em; }
.faq-item summary { font-family: var(--font-display); font-weight: 600; }
.tool-controls, .tool-readouts, .tool-canvas-wrap { border: 1px solid var(--panel-edge) !important; }
.tool-readouts > *, .readout { border-radius: 2px !important; }
.section-divider { opacity: 0.6; }

@media (max-width: 720px) {
  #main > .section { padding-top: var(--section-y-sm) !important; padding-bottom: var(--section-y-sm) !important; }
  #main > #projects.section { padding-top: 36px !important; }
  .hero-deep { padding: 104px 20px 40px !important; }
  .hero-deep .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
}
/* Tagline stays on two lines in Space Grotesk. */
.hero-home .hero-role { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
/* Subpage hero with a product photo on the right (smart-cuff). */
.hero-media .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 48px;
  align-items: center;
}
.hero-media .hero-inner > :not(.hero-media-figure) { grid-column: 1; }
.hero-media-figure {
  grid-column: 2; grid-row: 1 / span 6;
  margin: 0;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.hero-media-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .hero-media .hero-inner { display: block; }
  .hero-media-figure { margin-top: 28px; }
}
/* Eyebrow is one inline label, so the strong part never breaks alone. */
.hero-eyebrow { display: inline-block !important; line-height: 1.6; }
.hero-eyebrow .pulse-dot { display: inline-block; vertical-align: middle; margin-right: 8px; }
.hero-eyebrow strong { white-space: nowrap; }
/* Journey (research) and cuff-demo (toolbox) headers follow the left-aligned
   system, with the same square mono label as the heroes. */
.journey-header, .try-header { text-align: left !important; margin-left: 0 !important; max-width: 900px; }
.journey-kicker, .try-kicker {
  border-radius: 2px !important;
  background: transparent !important;
  border: 1px solid var(--panel-edge) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.journey-lede, .try-lede { margin-left: 0 !important; margin-right: 0 !important; }
.tool-lede { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
/* Toolbox chart labels were absolutely positioned over the title each canvas
   draws itself, so the two overlapped. They're now captions under the chart. */
.tool-canvas-label {
  position: static !important;
  display: block;
  padding: 6px 10px 7px;
  border-top: 1px solid var(--panel-edge);
  text-align: left;
}
.hero-media .hero-eyebrow { letter-spacing: 0.06em; }
/* Dark theme: white paper figures glared against the black page. Dim them a
   touch and give their frames the same off-white, so they sit in the page. */
html:not([data-theme="light"]) :is(.pub-figure, .figure-card, .work-card-media, .photo-band-figure, .hero-media-figure) img {
  filter: brightness(0.9) contrast(1.02);
}
html:not([data-theme="light"]) :is(.pub-figure, .work-card-media, .hero-media-figure) { background: #e6e6e6 !important; }
html:not([data-theme="light"]) .photo-band-figure img { background: #e6e6e6; }