/*
 * Reckon Research: 2026 design tokens
 *
 * Load AFTER style.css and berth.css. This overrides the token layer and the
 * base type only; every class name, layout rule and component in those files
 * is left alone.
 *
 * The old system was Playfair Display over Source Serif 4 at a 680px measure:
 * a research-blog look, and a good one. The new pages are Inter with a
 * monospace for every quantity, which is a different argument. A measurement
 * company sets its numbers in the face of an instrument, not the face of an
 * essay.
 *
 * To remove: delete the <link> that loads this file. Nothing else changes.
 */

:root {
  /* Paper rather than pure white. Slightly warm, easier under long reading,
     and it separates the page from the cards that sit on it. */
  --bg:               #FCFCFB;
  --fg:               #0B0F1A;
  --fg-muted:         #5A6478;
  --fg-subtle:        #8A93A6;
  --divider:          #E2E5EB;

  /* The navy is the mark. The old value was a shade off it. */
  --navy:             #102147;
  --terminal-bg:      #0B0F1A;
  --terminal-text:    #E8EAF0;
  --terminal-comment: #8FA0C4;

  /* One accent, used only where something has been measured. */
  --amber:            #B4740B;

  /* The new pages use a 1180px wrap with clamp(1.5rem, 5vw, 6rem) of gutter.
     The old containers compute max-width as content-max plus twice the
     gutter, so matching means setting both to the same values rather than
     guessing at a width. Nav, content and footer all read these two tokens,
     so they move together.

     The gutter formula must match too. The old one clamped at 4rem and the
     new at 6rem, so on a wide window the two sets of pages indented by
     different amounts even when their max-widths agreed. */
  /* The containers compute max-width as content-max + 2 * page-pad and put
     the padding inside it, exactly like the .wrap on the new pages. Both
     therefore need the same total, 1180, which means the token carries the
     total minus the two gutters. Verified at 1372, 1024 and 390: the brand
     lands within a pixel on all three. */
  --page-pad:         clamp(1.5rem, 5vw, 6rem);
  --content-max:      calc(1180px - 2 * var(--page-pad));

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv05";
}

/* Headings were Playfair, a display serif. Inter at 600 with negative tracking
   is the counterpart: same authority, and it stops the page reading as an
   essay about a product rather than the product. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
}
h1 { letter-spacing: -0.03em; line-height: 1.06; }

/* Every quantity in mono. This is the one type rule that is specific to what
   this company does: a number set in the same face as the sentence around it
   reads as prose, and set in mono it reads as an instrument reading. */
code, kbd, samp, pre, .mono, .num, .metric, .value, td.num, .stat {
  font-family: var(--mono);
  font-feature-settings: normal;
}

/* Tables carry most of the Index. Tighten them for a sans face. */
table { font-size: 0.95rem; }
th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
td { line-height: 1.5; }

/* Links were underlined on hover against a serif body. A hairline border reads
   better under Inter and does not shift the baseline. */
a:hover { text-decoration: none; border-bottom: 1px solid currentColor; }
main a[href]:not(.btn):not(.button) { border-bottom: 1px solid var(--divider); }
main a[href]:not(.btn):not(.button):hover { border-bottom-color: currentColor; }

/* The old nav was 52px against a serif wordmark. */
:root { --nav-height: 64px; }

/* ---------------------------------------------------------------------------
   Index page overrides.

   berth.css sets font-family on its own class selectors, so the token layer
   above never reaches them: a class selector beats a bare element selector
   regardless of load order. These name the same classes, so the cascade
   resolves on order rather than specificity, and this file loads last.

   Only type and colour are touched. Layout, spacing and every component rule
   in berth.css is left alone, so the page's controls and table keep working
   exactly as built.
   --------------------------------------------------------------------------- */

.berth-title, .berth-subtitle, .berth-table-caption,
.section h1, .section h2, .section h3,
.body-text h1, .body-text h2, .body-text h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.body-text, .berth-subtitle, .idx-note, .idx-sub, .idx-fine {
  font-family: var(--sans);
  line-height: 1.55;
}

/* Every quantity in mono: the ranking, the prices, the vendor tags, the
   controls. On a page whose entire argument is a set of numbers, the numbers
   should look like an instrument reading rather than like prose. */
.num, .rank, .idx-val, .idx-vendor, .idx-preset, .idx-ctl,
.idx-meas, .idx-prior, .idx-queue, .idx-open {
  font-family: var(--mono);
  font-feature-settings: normal;
}

/* MEASURED carries the accent, prior does not. The distinction between a
   number that came off hardware and one that came off a specification sheet
   is the most important thing on the page, and it should be visible without
   reading the label. */
.idx-meas { color: var(--amber); }
.idx-prior { color: var(--fg-subtle); }

.berth-table-wrap table { font-size: 0.94rem; }
.berth-table-wrap th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  text-transform: none;
}


/* ---------------------------------------------------------------------------
   The mark in the navigation.

   The old pages render .nav-brand as plain text while the new pages carry the
   lighthouse and anchor. Same wordmark, two different brands, depending on
   which page a reader happened to land on.

   Done as a background image rather than by editing markup on five pages:
   one rule, and no page can be missed or drift later. The text stays in the
   DOM, so the link keeps its accessible name and nothing changes for a screen
   reader.
   --------------------------------------------------------------------------- */
.site-nav .nav-brand,
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  /* style.css sets this to 13px, which was right for a text-only wordmark.
     Beside a 28px mark it reads as undersized and makes the mark look
     oversized in turn, so it matches the new pages instead. */
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.nav-brand::before {
  content: "";
  /* 28px tall, matching the img on the new pages. The width follows the
     mark's own 0.841 aspect so contain has nothing to letterbox: a 24px box
     around a 23.5px mark rendered it short. */
  height: 28px;
  width: 23.55px;
  flex: none;
  background: url("data:image/png;base64,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") no-repeat center / contain;
}


/* ---------------------------------------------------------------------------
   Mobile.

   The nav collapses to a hamburger below 820px, and the brand keeps its mark:
   a wordmark that loses its mark on a phone is a different brand on the
   surface where most first visits happen.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .nav-brand { font-size: 0.96rem; gap: 0.5rem; }

  /* The containers set an explicit 1180px above, which does nothing on a
     phone but would fight the page padding if it ever resolved. Let the
     gutter do the work. */
  .nav-inner,
  .site-footer .footer-inner,
  main .section > *,
  .berth-table-wrap,
  .body-text {
    max-width: 100%;
  }

  /* The Index table is the one thing on the site that cannot reflow. Let it
     scroll rather than shrink the type to illegibility. */
  .berth-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .berth-table-wrap table { font-size: 0.86rem; min-width: 34rem; }

  .mobile-nav-links { font-family: var(--sans); }
}