/* ==========================================================================
   Cablyst — "engineering datasheet / test-instrument" design system.

   Deliberately NOT the AI-SaaS look: no Inter, no purple gradients, no
   glassmorphism, no centered rounded-card heroes. Instead: mono-forward type,
   hairline rules, tabular numerals, a warm paper/charcoal ground, an
   asymmetric editorial grid, and the product's own data as ornament.

   To activate the intended type, drop these woff2 files in assets/fonts/:
     InstrumentSerif-Regular.woff2   (display — expressive serif)
     JetBrainsMono-Regular.woff2     (data / labels)
     JetBrainsMono-Medium.woff2
     HankenGrotesk-Regular.woff2     (body)
     HankenGrotesk-Medium.woff2
   Until then, the stacks fall back to Menlo (mono) + a serif display + a
   neutral grotesk, which already render a credible datasheet on macOS.
   ========================================================================== */

/* @font-face — uncomment once the woff2 files are in assets/fonts/.
@font-face { font-family:"Instrument Serif"; src:url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/fonts/HankenGrotesk-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/fonts/HankenGrotesk-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
*/

:root {
  --paper:      #f3efe4;   /* warm lab paper, never pure white */
  --paper-2:    #ece7d8;   /* recessed panels */
  --ink:        #191712;   /* near-black warm ink */
  --ink-soft:   #55504489; /* muted labels (with alpha) */
  --ink-soft-o: #5f594a;   /* muted, opaque */
  --rule:       #cfc8b6;   /* hairline */
  --rule-bold:  #b6ad97;
  --accent:     #0f5f5a;   /* oscilloscope teal — brand, not a verdict color */
  --accent-ink: #0a413e;
  --accent-bright: #12988c; /* livelier teal for highlights/hover (adds energy) */
  --genuine:    #2f7d34;
  --caution:    #a9701a;
  --fake:       #b23a2e;

  --font-display: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "IBM Plex Sans", "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 74rem;
  --gap: clamp(1rem, 3vw, 2.25rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #14130f;   /* warm charcoal, never pure black */
    --paper-2:  #1d1b15;
    --ink:      #ece7d8;
    --ink-soft: #a49c8788;
    --ink-soft-o: #9a927e;
    --rule:     #322f26;
    --rule-bold:#494434;
    --accent:   #4fc7bd;   /* phosphor teal */
    --accent-ink: #7fe0d7;
    --accent-bright: #6fe4d6;
    --genuine:  #5fbf5f;
    --caution:  #d59b3f;
    --fake:     #e0685a;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

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

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04;
  letter-spacing: -0.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { margin: 0 0 1.1em; max-width: 62ch; }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (prefers-color-scheme: dark) { a { color: var(--accent); } }

/* mono label — the recurring datasheet motif */
.label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft-o);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Header --------------------------------------------------------------- */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper);
  padding: .5rem .75rem; z-index: 10; }

.masthead { border-bottom: 1px solid var(--rule-bold); background: var(--paper); }
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem;
  padding-block: .9rem; }
.brand { font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em;
  font-size: 1.05rem; text-decoration: none; color: var(--ink); display: flex;
  align-items: center; gap: .5rem; }
.brand::before { content: ""; width: .7rem; height: .7rem; background: var(--accent);
  display: inline-block; }
.masthead nav { margin-left: auto; display: flex; gap: 1.15rem; flex-wrap: wrap; }
.masthead nav a { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft-o);
  text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }
.masthead .cta { margin-left: .25rem; }
/* Quiet "Get Pro" in the header — deliberately understated (free-first). */
.masthead .pro-pill { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em;
  padding: .34rem .7rem; border: 1px solid var(--rule-bold); color: var(--ink); text-decoration: none; }
.masthead .pro-pill:hover { border-color: var(--ink); }
/* Inline trust checkmarks under the hero CTAs. */
.trust-inline { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
  padding: 0; margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft-o); }
.trust-inline li::before { content: "✓ "; color: var(--genuine); }

/* Mobile: brand + Get-Pro on the top row, nav wraps onto its own line below. */
@media (max-width: 720px) {
  .masthead .wrap { flex-wrap: wrap; gap: .5rem 1rem; padding-block: .7rem; }
  .brand { order: 1; }
  .masthead .cta { order: 2; margin-left: auto; }
  .masthead nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: .5rem 1rem; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono);
  font-size: .85rem; letter-spacing: .02em; padding: .6rem 1rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 0; }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--accent); border-color: var(--accent); color: #06201e; }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-bold); }
}

/* --- Sections ------------------------------------------------------------- */
section { padding-block: clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--rule); }
.eyebrow { display: block; margin-bottom: 1rem; }

/* Hero: asymmetric, left-aligned — deliberately not a centered gradient hero */
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap);
  align-items: center; padding-block: clamp(0.5rem, 2vw, 1.75rem); }
.hero p.lede { font-size: 1.2rem; color: var(--ink-soft-o); max-width: 42ch; }
.hero .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
@media (max-width: 800px) { .hero .wrap { grid-template-columns: 1fr; } }

/* --- Readout panel (the sample "port datasheet") -------------------------- */
.readout { border: 1px solid var(--rule-bold); background: var(--paper-2);
  font-family: var(--font-mono); font-size: .84rem; }
.readout .bar { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule-bold); padding: .55rem .8rem; color: var(--ink-soft-o); }
.readout .row { display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem .8rem; border-bottom: 1px dotted var(--rule); }
.readout .row:last-child { border-bottom: 0; }
.readout .row .k { color: var(--ink-soft-o); }
.readout .row .v { font-variant-numeric: tabular-nums; text-align: right; }

/* --- Verdict pills -------------------------------------------------------- */
.pill { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .18rem .5rem; border: 1px solid currentColor; }
.pill.genuine { color: var(--genuine); }
.pill.caution { color: var(--caution); }
.pill.fake { color: var(--fake); }

/* --- Spec table (features, free-vs-pro, cable specs) ---------------------- */
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--rule);
  vertical-align: top; }
.spec thead th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft-o); border-bottom: 1px solid var(--rule-bold); }
.spec td.num, .spec th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; }
.spec .feat { font-family: var(--font-mono); font-size: .9rem; }
.spec .yes { color: var(--genuine); } .spec .no { color: var(--ink-soft-o); }
.spec-wrap { overflow-x: auto; }

/* --- Persona / feature cards: bordered, square, no soft shadow ------------ */
.grid { display: grid; gap: 0; border: 1px solid var(--rule-bold); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid > .cell { padding: 1.4rem 1.3rem; border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); }
.grid > .cell h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.05rem;
  letter-spacing: -0.005em; }
.grid > .cell p { font-size: .92rem; color: var(--ink-soft-o); margin-bottom: 0; }
.grid > .cell .label { display: block; margin-bottom: .5rem; }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

/* --- Pricing -------------------------------------------------------------- */
.price { display: flex; align-items: baseline; gap: .5rem; }
.price .amt { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; }
.price .per { font-family: var(--font-mono); color: var(--ink-soft-o); font-size: .9rem; }
.trust { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.trust li { font-family: var(--font-mono); font-size: .85rem; padding: .3rem 0;
  border-bottom: 1px dotted var(--rule); }
.trust li::before { content: "✓ "; color: var(--genuine); }

/* --- Interactive checker -------------------------------------------------- */
.checker fieldset { border: 1px solid var(--rule-bold); margin: 0 0 1rem; padding: 1rem 1.1rem; }
.checker legend { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft-o); padding-inline: .4rem; }
.checker label { display: flex; gap: .55rem; align-items: baseline; padding: .3rem 0;
  font-size: .95rem; cursor: pointer; }
.checker .result { border: 1px solid var(--rule-bold); background: var(--paper-2);
  padding: 1.25rem 1.3rem; margin-top: 1rem; }
.checker .score { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }
.meter { height: .5rem; background: var(--rule); margin: .75rem 0; position: relative; }
.meter > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 0; }

/* --- Blog ----------------------------------------------------------------- */
.postlist { list-style: none; padding: 0; margin: 0; }
.postlist li { border-bottom: 1px solid var(--rule); padding: 1.3rem 0; display: grid;
  grid-template-columns: 8rem 1fr; gap: 1.5rem; }
.postlist time { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft-o); }
.postlist a { font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; color: var(--ink); }
.postlist a:hover { color: var(--accent-ink); }
.tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule-bold); padding: .1rem .4rem; color: var(--ink-soft-o); }
@media (max-width: 640px) { .postlist li { grid-template-columns: 1fr; gap: .4rem; } }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.8em; }
.prose blockquote { border-left: 2px solid var(--accent); margin: 1.5em 0; padding-left: 1rem;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2);
  padding: .1em .35em; border: 1px solid var(--rule); }

/* --- Footer --------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--rule-bold); border-bottom: 0; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding-block: 2.5rem;
  font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft-o); }
footer.site a { color: var(--ink-soft-o); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

/* utilities */
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-soft-o); }
.rule { height: 1px; background: var(--rule-bold); border: 0; margin: 0; }
.center-narrow { max-width: 60ch; }

/* ── Redesign polish (site-redesign branch) ─────────────────────────────── */
a, .btn, .grid > .cell, .pill, .masthead nav a, .masthead .pro-pill, .postlist a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .2s ease;
}
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 1px; }

/* Brand dot + link hovers use the livelier accent (more energy) */
.brand::before { background: var(--accent-bright); }
a:hover { color: var(--accent-bright); }

/* Cards: subtle hover tint */
.grid > .cell:hover { background: var(--paper-2); }

/* Readout panels: a whisper of depth to lift them off the paper */
.readout { box-shadow: 0 1px 0 var(--rule-bold), 0 18px 40px -30px rgba(20, 16, 10, .5); }
@media (prefers-color-scheme: dark) {
  .readout { box-shadow: 0 1px 0 var(--rule-bold), 0 18px 44px -28px rgba(0, 0, 0, .7); }
}

/* Buttons: a hair of lift on hover */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ── Scroll reveal (driven by /assets/js/reveal.js) ─────────────────────── */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in { opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1; transform: none; } }

/* ── Iteration 2 — bolder instrument details ────────────────────────────── */

/* A crisp accent tick before every section eyebrow (editorial/technical) */
.eyebrow::before {
  content: ""; display: inline-block; width: 1.6rem; height: 2px;
  background: var(--accent-bright); vertical-align: middle;
  margin-right: .7rem; transform: translateY(-2px);
}

/* Verdict pills get a glowing status LED */
.pill { display: inline-flex; align-items: center; gap: .42rem; }
.pill::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor; flex: none;
}

/* Capability bars on the "same plug" cards — makes the speed gap visceral */
.tier-bar { height: 6px; background: var(--rule); margin: .1rem 0 .6rem; position: relative; overflow: hidden; }
.tier-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent);
  transform-origin: left; }
.grid > .cell:nth-child(1) .tier-bar > span { background: var(--caution); } /* slowest */
.grid > .cell:nth-child(3) .tier-bar > span { background: var(--genuine); } /* fastest */

/* Hero readout: a faint scan line sweeping down (instrument life) */
.hero .readout { position: relative; overflow: hidden; }
.hero .readout::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%;
  background: linear-gradient(var(--accent-bright), transparent);
  opacity: .07; pointer-events: none; animation: scan 4.5s linear infinite;
}
@keyframes scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(280%); } }
@media (prefers-reduced-motion: reduce) { .hero .readout::after { animation: none; opacity: 0; } }