/* ============================================================================
   TERMINAL ONE — THEME LAYER
   terminal-one.css · v1.0.0 · requires tokens.css + components.css
   ----------------------------------------------------------------------------
   Blowtrumpet Platform Design Library, Option B "Plate" v3.0.0, dressed as a
   corporate website. This file adds NOTHING to the palette: every colour here
   is a bt- token. What it adds is furniture the library did not carry —

     · a SURFACE LADDER: seven named viewport surfaces, each setting site
       width, page padding, air multiplier and type scale
     · a three-zone HEADER and a three-part FOOTER, ribbons included
     · the TACHOMETER reading indicator, which lives in the right gutter and
       is never allowed to touch content
     · the PLATE FIELD FAMILY: short plates, long strips, and every other
       control matched to them
     · a LAYOUT FAMILY: quarter/half/quarter, thirds, sidebars, bento

   Prefix is t1-. Anything bt- prefixed comes from the library untouched.
   ========================================================================== */

/* ============================================================================
   1 · THE SURFACE LADDER
   ----------------------------------------------------------------------------
   Three variables carry every surface decision:

     --t1-shell-max   the widest the content column is ever allowed to be
     --t1-pad         page padding — ALSO the gutter the tachometer lives in
     --bt-air         the library's spacing multiplier, pushed up on big
                      surfaces and pulled back on small ones

   The tachometer's position is derived from --t1-pad, so widening the page
   padding widens its lane automatically. There is no surface where the two
   are set independently, which is what keeps the indicator off the text.

   SMART TV cannot be identified by width AT ALL, and the ladder does not try.
   A 4K TV browser usually reports 1920 CSS px; so does a desktop monitor, and
   a 4K monitor at 100% scaling reports 3840. There is no width above which a
   viewport is more likely to be a television, so any width fallback would only
   hand a 10-foot layout to somebody at a desk. The single discriminator is the
   input device: a remote reports (hover: none). S1 and S2 are therefore
   mutually exclusive by construction — S1 requires no hover, S2 requires
   hover — and neither depends on source order. The known limitation is a TV
   that misreports hover as available; it lands on widescreen desktop, which
   is a legible page rather than a broken one.
   ========================================================================== */

:root {
  --t1-shell-max: 1440px;        /* = the library's --bt-max */
  --t1-pad: 40px;
  --t1-tacho-w: 30px;
  --t1-tacho-gap: 12px;
  --t1-header-h: 64px;
  --t1-ribbon-h: 34px;
  --t1-surface-name: "smallscreen-desktop";

  /* The free strip between the content column and the viewport edge. The
     tachometer is centred inside it and never wider than it. */
  --t1-gutter-free: calc((100vw - min(100vw, var(--t1-shell-max))) / 2 + var(--t1-pad));
}

/* ---- S1 · SMART TV — 10-foot reading ------------------------------------- */
@media (min-width: 1600px) and (hover: none) {
  :root {
    --t1-surface-name: "smart-tv";
    --t1-shell-max: 2040px;
    --t1-pad: 128px;
    --t1-tacho-w: 52px;
    --t1-header-h: 104px;
    --t1-ribbon-h: 56px;
    --bt-air: 1.6;
    /* The scale steps up wholesale — a TV is read from three metres. */
    --bt-size-1: 15px; --bt-size-2: 17px; --bt-size-3: 19px;
    --bt-size-4: 22px; --bt-size-5: 26px; --bt-size-6: 32px;
    --bt-size-7: 40px; --bt-size-8: 52px; --bt-size-9: 68px;
    --bt-size-10: 88px;
    --bt-measure: 54ch;
    --bt-row-h: 52px;
  }
  /* D-pad navigation: focus has to be findable from the sofa. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    box-shadow: 0 0 0 3px var(--bt-ground), 0 0 0 7px var(--bt-focus);
  }
  .t1-nav__link, .t1-ribbon__link, .bt-footer__link { padding-block: var(--bt-s3); }
}

/* ---- S2 · WIDESCREEN DESKTOP — 1680px and up ----------------------------- */
@media (min-width: 1680px) and (hover: hover) {
  :root {
    --t1-surface-name: "widescreen-desktop";
    --t1-shell-max: 1560px;
    --t1-pad: 96px;
    --t1-tacho-w: 36px;
    --t1-header-h: 76px;
    --t1-ribbon-h: 38px;
    --bt-air: 1.4;
    --bt-size-9: 48px; --bt-size-10: 62px;
  }
}

/* ---- S3 · SMALLSCREEN DESKTOP — 1280px ----------------------------------- */
@media (min-width: 1280px) and (max-width: 1679px) {
  :root {
    --t1-surface-name: "smallscreen-desktop";
    --t1-shell-max: 1240px;
    --t1-pad: 56px;
    --bt-air: 1.2;
  }
}

/* ---- S4 · TABLET LANDSCAPE — 1024–1279 ----------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --t1-surface-name: "tablet-landscape";
    --t1-shell-max: 1024px;
    --t1-pad: 44px;
    --t1-tacho-w: 24px;
    --t1-header-h: 60px;
    --bt-air: 1.15;
  }
}

/* ---- S5 · TABLET PORTRAIT — 768–1023 ------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --t1-surface-name: "tablet-portrait";
    --t1-shell-max: 768px;
    --t1-pad: 40px;
    --bt-air: 1.1;
    --bt-size-9: 36px; --bt-size-10: 44px;
  }
}

/* ---- S6 · PHONES — shared base ------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --t1-surface-name: "phone";
    --t1-shell-max: 100vw;
    --t1-pad: 22px;
    --t1-header-h: 56px;
    --t1-ribbon-h: 32px;
    --bt-air: 1;
    --bt-size-8: 28px; --bt-size-9: 32px; --bt-size-10: 38px;
    --bt-measure: 38ch;
  }
}

/* ---- S6a · 4K SMARTPHONE PORTRAIT — 1080 x 1980 --------------------------
   At 3x that is 360 x 660 CSS px; at 2.5x, 432 x 792. The width overlaps the
   720-class phone almost exactly, so WIDTH ALONE CANNOT SEPARATE THEM — the
   density query is doing the work. What actually differs for the reader is
   the SHORT viewport at 3x: 660px of height means vertical rhythm has to come
   down or a section header eats the fold.                                    */
@media (max-width: 480px) and (min-resolution: 2.5dppx) {
  :root {
    --t1-surface-name: "smartphone-4k";
    --t1-pad: 24px;
    --bt-rhythm: calc(var(--bt-s7) * var(--bt-air));
  }
}

/* ---- S6b · REGULAR SMARTPHONE PORTRAIT — 720 x 1640 ----------------------
   At 2x that is 360 x 820 CSS px: same width, far more height. Rhythm can
   stay generous; what needs care is the hairline, which at 2x is genuinely
   1 device pixel and disappears against a wash.                              */
@media (max-width: 480px) and (max-resolution: 2.49dppx) {
  :root {
    --t1-surface-name: "smartphone-regular";
    --t1-pad: 20px;
    --bt-line: color-mix(in oklab, var(--bt-line-strong) 55%, var(--bt-line));
  }
}

/* ============================================================================
   2 · SHELL
   The one horizontal authority on the page. Everything that spans the window
   puts a .t1-shell inside it rather than setting its own padding, which is
   why the tachometer lane is reliable.
   ========================================================================== */
.t1-shell {
  width: 100%;
  max-width: var(--t1-shell-max);
  margin-inline: auto;
  padding-inline: var(--t1-pad);
}
.t1-shell--flush { padding-inline: 0; }
body { overflow-x: hidden; }

.t1-section { padding-block: var(--bt-rhythm); }
.t1-section--tight { padding-block: calc(var(--bt-rhythm) * 0.6); }
.t1-section--sunken { background: var(--bt-surface-sunken); }
.t1-section--surface { background: var(--bt-surface); }
.t1-section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--bt-gutter); margin-bottom: var(--bt-gutter-wide);
  padding-bottom: var(--bt-s4);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-section__head p { color: var(--bt-text-2); max-width: var(--bt-measure); }
.t1-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bt-accent); color: var(--bt-cta-ink);
  padding: var(--bt-s3) var(--bt-s4); font-family: var(--bt-font-plate);
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
}
.t1-skip:focus { left: var(--t1-pad); }

/* ============================================================================
   3 · HEADER — THREE ZONES
     zone 1  top ribbon      left nav · right nav (theme switch lives here)
     zone 2  masthead        logo left · main nav right · two CTAs
     zone 3  bottom ribbon   left nav · right nav ending in the search
   The masthead is sticky. Past 240px the two ribbons roll up, so the sticky
   furniture costs one row instead of three — the ribbons are wayfinding, not
   reading, and they are one scroll-to-top away.
   ========================================================================== */
.t1-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bt-ground);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bt-gutter); }

/* ---- ribbons -------------------------------------------------------------- */
.t1-ribbon {
  background: var(--bt-surface-sunken);
  border-bottom: var(--bt-border) solid var(--bt-line);
  overflow: hidden;
  transition: max-height var(--bt-slow) var(--bt-ease), opacity var(--bt-fast) var(--bt-ease);
  max-height: calc(var(--t1-ribbon-h) * 2);
}
.t1-ribbon__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bt-gutter); min-height: var(--t1-ribbon-h);
}
.t1-ribbon__nav { display: flex; align-items: center; gap: var(--bt-gutter-tight); flex-wrap: wrap; }
.t1-ribbon__nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.t1-ribbon__link {
  display: inline-flex; align-items: center; gap: var(--bt-s1);
  padding: var(--bt-s1) var(--bt-s3);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--bt-text-3); text-decoration: none; white-space: nowrap;
}
.t1-ribbon__link:hover { color: var(--bt-text); }
.t1-ribbon__link[aria-current] { color: var(--bt-accent); }
/* Hairline separators instead of bullets — the ribbon is a rule with words in it. */
.t1-ribbon__nav li + li .t1-ribbon__link { box-shadow: inset 1px 0 0 var(--bt-line); }
.t1-ribbon--bottom { background: var(--bt-surface); border-bottom: 0; }
.t1-ribbon--bottom .t1-ribbon__link { color: var(--bt-text-2); font-size: var(--bt-size-3); }

/* Collapsed state, set by terminal-one.js past the scroll threshold. */
.t1-header[data-shrunk="true"] .t1-ribbon { max-height: 0; opacity: 0; }

/* ---- masthead ------------------------------------------------------------- */
.t1-masthead { background: var(--bt-ground); }
.t1-masthead__inner { min-height: var(--t1-header-h); }

.t1-logo { display: inline-flex; align-items: center; gap: var(--bt-s3); text-decoration: none; color: var(--bt-text); }
.t1-logo__mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--bt-r-2);
  background: var(--bt-accent); color: var(--bt-cta-ink);
  font-family: var(--bt-font-display); font-weight: 600; font-size: var(--bt-size-5);
  letter-spacing: 0; box-shadow: var(--bt-accent-glow);
}
.t1-logo__word {
  font-family: var(--bt-font-display); font-weight: 600; font-size: var(--bt-size-6);
  text-transform: uppercase; letter-spacing: var(--bt-track-plate); line-height: 1;
}
.t1-logo__sub {
  display: block; font-family: var(--bt-font-plate); font-size: var(--bt-size-1);
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
  margin-top: 3px; letter-spacing: 0.14em;
}

/* ---- main navigation ------------------------------------------------------ */
.t1-nav--main { display: flex; align-items: center; gap: var(--bt-gutter); }
.t1-nav--main > ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.t1-nav__link {
  position: relative; display: inline-flex; align-items: center;
  padding: var(--bt-s2) var(--bt-gutter-tight);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--bt-text-2); text-decoration: none; white-space: nowrap;
}
.t1-nav__link:hover { color: var(--bt-text); }
/* The active mark is a plate edge, not a fill: the accent stays a hairline. */
.t1-nav__link[aria-current]::after,
.t1-nav__link:hover::after {
  content: ""; position: absolute; left: var(--bt-s3); right: var(--bt-s3); bottom: 2px;
  height: var(--bt-accent-weight); background: var(--bt-accent); box-shadow: var(--bt-accent-glow);
}
.t1-nav__link:hover::after { background: var(--bt-line-strong); box-shadow: none; }
.t1-nav__link[aria-current]:hover::after { background: var(--bt-accent); }

.t1-nav__cta { display: flex; align-items: center; gap: var(--bt-s2); margin-left: var(--bt-s2); }

/* Sub-menus: a plate that drops. */
.t1-nav--main li { position: relative; }
.t1-nav--main .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 5;
  list-style: none; margin: 0; padding: var(--bt-s2);
  background: var(--bt-surface); border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-2); box-shadow: var(--bt-shadow-2);
  display: none;
}
.t1-nav--main li:hover > .sub-menu,
.t1-nav--main li:focus-within > .sub-menu { display: block; }
.t1-nav--main .sub-menu .t1-nav__link { display: flex; width: 100%; padding: var(--bt-s2) var(--bt-s3); }
.t1-nav--main .sub-menu .t1-nav__link::after { display: none; }

/* ---- burger and drawer · off until the drawer surface ---------------------
   Both are declared closed HERE, at base, not inside the media query that
   opens them. A display rule that only exists inside a max-width block leaves
   the element visible above that width — which is how a mobile drawer ends up
   printed down the middle of a desktop page. */
.t1-burger { display: none; }
.t1-drawer { display: none; }
.t1-burger__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.t1-burger__bars::before, .t1-burger__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.t1-burger__bars::before { top: -6px; } .t1-burger__bars::after { top: 6px; }

/* ============================================================================
   4 · SEARCH — a blinking cursor, and almost nothing else
   No border, no fill, no magnifier. The caret is the affordance: it blinks
   while the field is idle and empty, and stands down the moment a real caret
   takes over, so there are never two cursors in one field.
   ========================================================================== */
.t1-search { display: inline-flex; align-items: center; gap: var(--bt-s2); min-width: 0; }
.t1-search__label {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
}
.t1-search__field { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.t1-search__input {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: none; box-shadow: none;
  padding: var(--bt-s1) 0 var(--bt-s1) 14px;   /* room for the idle caret */
  width: clamp(120px, 22ch, 300px);
  font-family: var(--bt-font-mono); font-size: var(--bt-size-3);
  color: var(--bt-text); caret-color: var(--bt-accent);
}
.t1-search__input::placeholder { color: var(--bt-text-3); font-family: var(--bt-font-plate); letter-spacing: 0.04em; }
.t1-search__input:focus, .t1-search__input:focus-visible { outline: none; box-shadow: none; }
/* The idle caret. */
.t1-search__caret {
  position: absolute; left: 0; width: 8px; height: 1.15em; pointer-events: none;
  background: var(--bt-accent); opacity: 0.85;
  animation: t1-blink 1.06s steps(1, end) infinite;
}
.t1-search__field:focus-within .t1-search__caret,
.t1-search__field[data-filled="true"] .t1-search__caret { display: none; }
.t1-search__field:focus-within .t1-search__input::placeholder { opacity: 0; }
/* The only decoration: a hairline that arrives on focus and leaves on blur. */
.t1-search__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--bt-accent-weight);
  background: var(--bt-accent); box-shadow: var(--bt-accent-glow);
  transform: scaleX(0); transform-origin: left; transition: transform var(--bt-fast) var(--bt-ease);
}
.t1-search__field:focus-within .t1-search__rule { transform: scaleX(1); }
@keyframes t1-blink { 0%, 50% { opacity: 0.85; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t1-search__caret { animation: none; } }

/* ============================================================================
   5 · VERTICAL NAVIGATION — the sidebar rail
   ========================================================================== */
.t1-vnav { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.t1-vnav__head {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
  padding-bottom: var(--bt-s2); margin-bottom: var(--bt-s2);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-vnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bt-s3);
  padding: var(--bt-s2) var(--bt-s3);
  font-size: var(--bt-size-3); color: var(--bt-text-2); text-decoration: none;
  border-left: var(--bt-accent-weight) solid transparent;
}
.t1-vnav__link:hover { color: var(--bt-text); background: var(--bt-surface-sunken); }
.t1-vnav__link[aria-current] {
  color: var(--bt-text); border-left-color: var(--bt-accent);
  background: var(--bt-accent-wash); font-weight: 600;
}
.t1-vnav__count { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; color: var(--bt-text-3); font-size: var(--bt-size-2); }
.t1-vnav--sub .t1-vnav__link { padding-left: var(--bt-s6); font-size: var(--bt-size-2); }

/* ============================================================================
   6 · FOOTER — THREE PARTS, THREE GROUNDS
     top ribbon    accent wash, capped by an accent hairline
     main          surface, six columns
     bottom ribbon ink-max / paper-max — the one strip that does NOT flip with
                   the theme, because --bt-ink-max and --bt-paper-max are
                   theme-stable by design. It reads as a stamped plate edge in
                   Light, Comfort and Dark alike, which is what makes the
                   footer land the same way on every ground.
   ========================================================================== */
.t1-footer { margin-top: calc(var(--bt-rhythm) * 0.5); }

/* ---- 6.1 footer top ribbon ------------------------------------------------ */
.t1-footer__top {
  background: var(--bt-accent-wash);
  border-top: var(--bt-accent-weight) solid var(--bt-accent);
  box-shadow: var(--bt-accent-glow);
}
.t1-footer__top .t1-ribbon__inner { min-height: calc(var(--t1-ribbon-h) * 1.3); }
.t1-footer__top .t1-ribbon__link { color: var(--bt-text-2); }
.t1-footer__top .t1-ribbon__link:hover { color: var(--bt-accent); }
.t1-footer__top .t1-ribbon__nav li + li .t1-ribbon__link { box-shadow: inset 1px 0 0 color-mix(in oklab, var(--bt-accent) 30%, transparent); }

/* ---- 6.2 main footer ------------------------------------------------------ */
.t1-footer__main { background: var(--bt-surface); border-block: var(--bt-border) solid var(--bt-line); padding-block: var(--bt-rhythm); }
.t1-footer__masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bt-gutter-wide); align-items: start;
  padding-bottom: var(--bt-gutter-wide); margin-bottom: var(--bt-gutter-wide);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-footer__brand { display: flex; flex-direction: column; gap: var(--bt-s3); max-width: 46ch; }
.t1-footer__blurb { color: var(--bt-text-2); font-size: var(--bt-size-3); }
.t1-footer__contact { display: flex; flex-direction: column; gap: var(--bt-s2); justify-self: end; text-align: right; max-width: 42ch; }
.t1-footer__contact h5 { color: var(--bt-text-3); }
.t1-footer__contact address { font-style: normal; color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-relaxed); }
.t1-footer__contact a { color: var(--bt-text-2); text-decoration: none; }
.t1-footer__contact a:hover { color: var(--bt-accent); }

/* Six columns, with the library's own .bt-footer__cols behaviour widened for
   the bigger surfaces. Hairline verticals between columns instead of dividers
   between rows: it keeps the block reading as one plate. */
.t1-footer__cols {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.t1-footer__col { display: flex; flex-direction: column; gap: var(--bt-s2); padding-inline: var(--bt-gutter); min-width: 0; }
.t1-footer__col:first-child { padding-left: 0; }
.t1-footer__col:last-child { padding-right: 0; }
.t1-footer__col + .t1-footer__col { box-shadow: inset 1px 0 0 var(--bt-line); }
.t1-footer__head {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
  padding-bottom: var(--bt-s2); margin-bottom: var(--bt-s1);
}
/* wp_nav_menu wraps the links in a <ul>. Every other menu position in this
   theme resets that list; this one did not, so the WordPress footer grew
   bullets and a 40px indent that the hand-written showcase never had. */
.t1-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.t1-footer__link {
  font-size: var(--bt-size-3); color: var(--bt-text-2); text-decoration: none;
  padding-block: 3px; display: inline-block;
}
.t1-footer__link:hover { color: var(--bt-accent); }

/* ---- 6.3 footer bottom ribbon --------------------------------------------- */
.t1-footer__bottom { background: var(--bt-ink-max); color: var(--bt-paper-max); }
.t1-footer__bottom .t1-ribbon__inner {
  min-height: calc(var(--t1-ribbon-h) * 1.15);
  flex-wrap: wrap; row-gap: var(--bt-s2); padding-block: var(--bt-s3);
}
.t1-footer__bottom .t1-ribbon__link { color: color-mix(in oklab, var(--bt-paper-max) 68%, var(--bt-ink-max)); }
.t1-footer__bottom .t1-ribbon__link:hover { color: var(--bt-paper-max); }
.t1-footer__bottom .t1-ribbon__nav li + li .t1-ribbon__link { box-shadow: inset 1px 0 0 var(--bt-paper-soft); }
.t1-footer__copy {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2);
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
  color: color-mix(in oklab, var(--bt-paper-max) 62%, var(--bt-ink-max));
  padding-block: var(--bt-s2);
}

/* ============================================================================
   7 · TACHOMETER — the reading indicator
   ----------------------------------------------------------------------------
   A rev counter read bottom-to-top: rungs light as the page advances, they
   grow longer as they climb, and the top band is a redline that only fills
   when the page has actually ended.

   IT NEVER TOUCHES CONTENT. --t1-gutter-free is the strip between the content
   column and the window edge, computed from the same --t1-pad the shell uses,
   and the indicator is centred inside it. If the padding grows on a wider
   surface the lane grows with it; nothing is positioned by guess.

   Below 1024px that strip stops being wide enough to hold a ladder without
   crowding the text, so the component changes FORM rather than shrinking: a
   column of short vertical dashes, road lane markers, in a lane a few pixels
   wide. Same data, same states, same redline.
   ========================================================================== */
.t1-tacho {
  position: fixed; z-index: 40;
  top: 50%; transform: translateY(-50%);
  right: calc((var(--t1-gutter-free) - var(--t1-tacho-w)) / 2);
  width: var(--t1-tacho-w);
  display: flex; flex-direction: column; align-items: center; gap: var(--bt-s2);
  pointer-events: none;
  opacity: 0; transition: opacity var(--bt-slow) var(--bt-ease);
}
.t1-tacho[data-ready="true"] { opacity: 1; }

.t1-tacho__rungs {
  display: flex; flex-direction: column-reverse; /* fills bottom-up, like a rev counter */
  /* Centred, not right-aligned: flex-end existed to give a tapered ladder a
     common right edge, and with uniform rungs it only parks the ladder off to
     one side of its own lane. */
  align-items: center; gap: 4px; width: 100%;
}
.t1-tacho__rung {
  display: block; height: 3px; border-radius: 1px;
  /* Every rung the width of the bottom one. A graded scale made the dial's
     SHAPE carry meaning as well as its fill, which is one signal too many for
     a component whose whole job is "how far down the page am I". Uniform
     rungs leave the lit/unlit boundary as the only thing moving. */
  width: 42%;
  background: var(--bt-line-strong); opacity: 0.32;
  transition: background var(--bt-fast) var(--bt-ease), opacity var(--bt-fast) var(--bt-ease);
}
.t1-tacho__rung[data-lit="true"] { background: var(--bt-accent); opacity: 1; box-shadow: var(--bt-accent-glow); }
.t1-tacho__rung[data-red="true"] { background: color-mix(in oklab, var(--bt-critical) 40%, var(--bt-line-strong)); opacity: 0.4; }
.t1-tacho__rung[data-red="true"][data-lit="true"] { background: var(--bt-critical); opacity: 1; }

/* Page end reached — the redline band holds. */
.t1-tacho[data-end="true"] .t1-tacho__rung[data-red="true"] { animation: t1-redline 1.4s var(--bt-ease) infinite; }
@keyframes t1-redline { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* No numeric readout and no caption. The dial is a glance, not a measurement:
   a percentage invites reading, and reading it costs more attention than the
   thing it reports is worth. The screen-reader live region below still
   announces the end of the page, which is the one event worth a word. */

/* ---- lane-marker form · below 1024px -------------------------------------
   Short vertical strokes in a narrow lane, hugging the padding edge. */
@media (max-width: 1023px) {
  :root { --t1-tacho-w: 8px; }
  .t1-tacho {
    right: max(6px, calc(var(--t1-pad) * 0.32));
    width: var(--t1-tacho-w);
    gap: var(--bt-s1);
  }
  .t1-tacho__rungs { align-items: center; gap: 7px; }
  .t1-tacho__rung { width: 3px; height: 14px; border-radius: 2px; }
}
@media (max-width: 767px) {
  .t1-tacho { right: max(5px, calc(var(--t1-pad) * 0.28)); }
  .t1-tacho__rungs { gap: 6px; }
  .t1-tacho__rung { height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .t1-tacho[data-end="true"] .t1-tacho__rung[data-red="true"] { animation: none; }
}
@media print { .t1-tacho { display: none; } }

/* ============================================================================
   8 · LAYOUT FAMILY
   ----------------------------------------------------------------------------
   Five column shapes and four sidebar arrangements, all on one grid with
   named areas, so the collapse is written once per breakpoint instead of once
   per layout.

   COLLAPSE ORDER IS EDITORIAL, NOT MECHANICAL. Content leads at every step.
   A left rail is navigation, so it survives longest and becomes a horizontal
   scroller before it disappears; a right rail is supporting matter, so it
   drops under the content; bento tiles are a summary, so they land last.
   ========================================================================== */
.t1-layout {
  display: grid; align-items: start;
  column-gap: var(--bt-gutter-wide); row-gap: var(--bt-rhythm);
}
.t1-layout__aside-l { grid-area: aside-l; min-width: 0; }
.t1-layout__content { grid-area: content; min-width: 0; }
.t1-layout__aside-r { grid-area: aside-r; min-width: 0; }
.t1-layout__bento   { grid-area: bento;   min-width: 0; }

/* ---- balanced shapes ------------------------------------------------------ */
.t1-layout--qhq   { grid-template-columns: 3fr 6fr 3fr; grid-template-areas: "aside-l content aside-r"; }
.t1-layout--13    { grid-template-columns: 4fr 8fr;     grid-template-areas: "aside-l content"; }
.t1-layout--31    { grid-template-columns: 8fr 4fr;     grid-template-areas: "content aside-r"; }
.t1-layout--center{ grid-template-columns: minmax(0, 66.667%); grid-template-areas: "content"; justify-content: center; }

/* ---- sidebar arrangements -------------------------------------------------- */
.t1-layout--l-c        { grid-template-columns: 3fr 9fr; grid-template-areas: "aside-l content"; }
.t1-layout--c-r        { grid-template-columns: 9fr 3fr; grid-template-areas: "content aside-r"; }
.t1-layout--c-r-bento  { grid-template-columns: 9fr 3fr; grid-template-areas: "content aside-r" "content bento"; row-gap: var(--bt-gutter-wide); }
.t1-layout--l-c-r      { grid-template-columns: 1fr 3fr 1fr; grid-template-areas: "aside-l content aside-r"; }
/* Two narrow rails around a wide centre. Distinct from l-c-r on purpose: at
   1/6 a rail holds a contents list or a set of jump links and nothing wider,
   which is exactly the right constraint for a long specification page. */
.t1-layout--rail       { grid-template-columns: 2fr 8fr 2fr; grid-template-areas: "aside-l content aside-r"; }
.t1-layout--l-c-r-bento{ grid-template-columns: 3fr 6fr 3fr; grid-template-areas: "aside-l content aside-r" "aside-l content bento"; row-gap: var(--bt-gutter-wide); }

/* A rail that stays with you while the content scrolls past it. */
.t1-rail-sticky { position: sticky; top: calc(var(--t1-header-h) + var(--bt-s5)); }

/* ---- S4 · tablet landscape — three columns become two --------------------- */
@media (max-width: 1279px) {
  .t1-layout--qhq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "content content" "aside-l aside-r";
  }
  .t1-layout--l-c-r, .t1-layout--l-c-r-bento, .t1-layout--rail {
    grid-template-columns: 3fr 9fr;
    grid-template-areas: "aside-l content" ".       aside-r" ".       bento";
  }
  .t1-layout--c-r-bento { grid-template-columns: 9fr 3fr; grid-template-areas: "content aside-r" "bento bento"; }
}

/* ---- S5 · tablet portrait and below — one column, editorial order --------- */
@media (max-width: 1023px) {
  .t1-layout,
  .t1-layout--qhq, .t1-layout--13, .t1-layout--31, .t1-layout--center,
  .t1-layout--l-c, .t1-layout--c-r, .t1-layout--c-r-bento,
  .t1-layout--l-c-r, .t1-layout--l-c-r-bento, .t1-layout--rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside-l" "content" "aside-r" "bento";
    row-gap: var(--bt-gutter-wide);
    justify-content: stretch;
  }
  .t1-rail-sticky { position: static; }

  /* The left rail is navigation: it becomes a horizontal scroller above the
     content rather than a stack the reader has to walk past. */
  .t1-layout__aside-l .t1-vnav {
    flex-direction: row; overflow-x: auto; gap: var(--bt-s1);
    scrollbar-width: none; padding-bottom: var(--bt-s1);
    border-bottom: var(--bt-border) solid var(--bt-line);
  }
  .t1-layout__aside-l .t1-vnav::-webkit-scrollbar { display: none; }
  .t1-layout__aside-l .t1-vnav__link {
    border-left: 0; border-bottom: var(--bt-accent-weight) solid transparent;
    white-space: nowrap; background: transparent;
  }
  .t1-layout__aside-l .t1-vnav__link[aria-current] { border-bottom-color: var(--bt-accent); background: transparent; }
  .t1-layout__aside-l .t1-vnav__count { display: none; }
  .t1-layout__aside-l .t1-vnav--sub { display: none; }
}

/* ============================================================================
   9 · HERO
   The ruled backdrop is drawn from --bt-line, never from an accent: the
   library's rule is that accents are hairlines, figures and text, never panel
   fills, and a hero is the easiest place to break it.
   ========================================================================== */
.t1-hero { position: relative; overflow: hidden; padding-block: calc(var(--bt-rhythm) * 1.15) var(--bt-rhythm); }
.t1-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--bt-line) 0 1px, transparent 1px 96px);
  opacity: 0.55; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
}
.t1-hero__grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: var(--bt-rhythm) var(--bt-gutter-wide); align-items: center; }
.t1-hero__copy { display: flex; flex-direction: column; gap: var(--bt-gutter); align-items: flex-start; }
.t1-hero__title { font-size: var(--bt-size-10); max-width: 16ch; }
.t1-hero__lede { font-size: var(--bt-size-5); line-height: var(--bt-lh-relaxed); color: var(--bt-text-2); max-width: var(--bt-measure); }
.t1-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bt-s3); align-items: center; }
.t1-hero__note { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); text-transform: uppercase; letter-spacing: var(--bt-track-label); }
.t1-hero__panel { display: flex; flex-direction: column; gap: var(--bt-gutter-tight); }
.t1-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bt-gutter-tight); }
/* .bt-tile carries grid-column: span 3 for the 12-column bento. In a
   2-column grid that clamps to the full row, so the span is reset here
   rather than by overriding the library rule. */
.t1-hero__stats .bt-tile { grid-column: auto; }
.t1-hero__panel > .bt-plate { align-self: flex-start; }
@media (max-width: 1023px) {
  .t1-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .t1-hero__title { max-width: 20ch; }
}
@media (max-width: 480px) { .t1-hero__stats { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   10 · THE PLATE FIELD FAMILY
   ----------------------------------------------------------------------------
   Two single-line members, close relatives rather than twins:

     SHORT PLATE   .t1-plate-field--short
       Names, phone numbers, reference codes. The full plate treatment — 3px
       edge, 9px radius, a FILLED accent seal, the display face set uppercase
       with plate tracking. It is loud on purpose: these are the fields a form
       is identified by.

     LONG STRIP    .t1-plate-field--long
       URLs, file locations, API endpoints. Same seal, same corner language,
       but the edge drops to 2px, the radius to 7px, the seal fills with the
       accent WASH instead of the accent, and the value is set in the mono
       face at reading size. A URL is read left-to-right character by
       character; setting it in condensed uppercase display would be vanity.

   The graded seal is what holds the family together. Six filled accent seals
   stacked down a form would turn the accent into a panel fill, which the
   library forbids — so only the short members carry a filled seal, and every
   long-form member carries the wash. Same shape, two volumes.

   Every other control below inherits ONE of those two geometries.
   ========================================================================== */
.t1-plate-field {
  --_edge: 3px; --_radius: 9px; --_h: 48px;
  display: inline-flex; align-items: stretch; min-width: 0;
  background: var(--bt-surface);
  border: var(--_edge) solid var(--bt-text);
  border-radius: var(--_radius);
  overflow: hidden;
  transition: border-color var(--bt-fast) var(--bt-ease), box-shadow var(--bt-fast) var(--bt-ease);
}
.t1-plate-field:focus-within { border-color: var(--bt-accent); box-shadow: var(--bt-accent-glow); }
.t1-plate-field[data-invalid="true"] { border-color: var(--bt-critical); }

.t1-plate-field__seal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding-inline: var(--bt-s2); flex: none;
  background: var(--bt-accent); color: var(--bt-cta-ink);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-1); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase; white-space: nowrap;
}
.t1-plate-field__seal::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--bt-r-full);
  background: currentColor; opacity: 0.75;
}
.t1-plate-field__input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  padding: 0 var(--bt-s3); height: var(--_h);
  color: var(--bt-text);
  font-family: var(--bt-font-display); font-weight: 600;
  font-size: var(--bt-size-6); letter-spacing: var(--bt-track-plate);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.t1-plate-field__input::placeholder { color: var(--bt-text-3); opacity: 0.7; }
.t1-plate-field__input:focus, .t1-plate-field__input:focus-visible { outline: none; box-shadow: none; }
.t1-plate-field__tail {
  display: flex; align-items: center; gap: var(--bt-s2); flex: none;
  padding-inline: var(--bt-s3);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase; color: var(--bt-text-3);
  box-shadow: inset 1px 0 0 var(--bt-line);
}

/* ---- 10.1 the short member ------------------------------------------------
   A short plate is as wide as the value it holds, not as wide as its column.
   The width is set on the INPUT, in ch of the display face it actually
   renders in — measuring in ch on the wrapper reads the 15px UI face and
   under-sizes the field by roughly a third once the 21px display face and
   its 0.08em tracking are applied. */
.t1-plate-field--short { width: max-content; max-width: 100%; }
.t1-plate-field--short .t1-plate-field__input { flex: 0 1 auto; width: 14ch; }
.t1-plate-field--short.t1-plate-field--wide .t1-plate-field__input { width: 20ch; }
.t1-plate-field--sm { --_h: 38px; --_edge: 2px; --_radius: 7px; }
.t1-plate-field--sm .t1-plate-field__input { font-size: var(--bt-size-5); }

/* ---- 10.2 the long member ------------------------------------------------- */
.t1-plate-field--long {
  --_edge: 2px; --_radius: 7px; --_h: 46px;
  width: 100%; max-width: none;
  border-color: var(--bt-line-strong);
}
.t1-plate-field--long .t1-plate-field__seal {
  background: var(--bt-accent-wash); color: var(--bt-accent);
  box-shadow: inset -1px 0 0 color-mix(in oklab, var(--bt-accent) 34%, transparent);
}
.t1-plate-field--long .t1-plate-field__input {
  font-family: var(--bt-font-mono); font-weight: 400;
  font-size: var(--bt-size-3); letter-spacing: 0; text-transform: none;
}

/* ---- 10.3 select — long geometry, chevron tail ---------------------------- */
.t1-plate-field--select { position: relative; }
.t1-plate-field--select .t1-plate-field__input {
  appearance: none; -webkit-appearance: none;
  font-family: var(--bt-font-plate); font-size: var(--bt-size-4);
  text-transform: none; letter-spacing: 0.02em; padding-right: var(--bt-s6);
  cursor: pointer;
}
.t1-plate-field--select .t1-plate-field__chevron {
  position: absolute; right: var(--bt-s3); top: 50%; translate: 0 -50%;
  width: 9px; height: 9px; border-right: 2px solid var(--bt-text-3); border-bottom: 2px solid var(--bt-text-3);
  rotate: 45deg; pointer-events: none;
}

/* ---- 10.4 textarea — the seal runs down the edge -------------------------- */
.t1-plate-field--area { --_h: auto; align-items: stretch; width: 100%; }
.t1-plate-field--area .t1-plate-field__seal {
  writing-mode: vertical-rl; text-orientation: mixed;
  flex-direction: row; align-items: center; justify-content: flex-start;
  padding-block: var(--bt-s3); padding-inline: var(--bt-s1);
  min-width: 30px;
}
.t1-plate-field--area .t1-plate-field__seal::before { margin-bottom: var(--bt-s2); }
.t1-plate-field--area .t1-plate-field__input {
  height: auto; min-height: 132px; padding: var(--bt-s3);
  font-family: var(--bt-font-ui); font-weight: 400; font-size: var(--bt-size-4);
  letter-spacing: 0; text-transform: none; line-height: var(--bt-lh-normal); resize: vertical;
}

/* ---- 10.5 file — strip with a browse seal on the tail --------------------- */
.t1-plate-field--file .t1-plate-field__tail {
  background: var(--bt-accent); color: var(--bt-cta-ink); box-shadow: none; cursor: pointer;
}
.t1-plate-field--file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---- 10.6 check, radio, switch — the plate's small hardware --------------- */
.t1-choice { display: inline-flex; align-items: flex-start; gap: var(--bt-s3); cursor: pointer; }
.t1-choice__text { font-size: var(--bt-size-3); color: var(--bt-text-2); line-height: 1.45; }
.t1-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.t1-check, .t1-radio {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px;
  background: var(--bt-surface-inset);
  border: 2px solid var(--bt-line-strong);
  transition: border-color var(--bt-fast) var(--bt-ease), background var(--bt-fast) var(--bt-ease);
}
.t1-check { border-radius: 5px; }
.t1-radio { border-radius: var(--bt-r-full); }
.t1-choice input:checked + .t1-check,
.t1-choice input:checked + .t1-radio { border-color: var(--bt-accent); background: var(--bt-accent); box-shadow: var(--bt-accent-glow); }
.t1-choice input:checked + .t1-check::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border-right: 2px solid var(--bt-cta-ink); border-bottom: 2px solid var(--bt-cta-ink); rotate: 45deg;
}
.t1-choice input:checked + .t1-radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: var(--bt-r-full); background: var(--bt-cta-ink);
}
.t1-choice input:focus-visible + .t1-check,
.t1-choice input:focus-visible + .t1-radio { box-shadow: var(--bt-focus-ring); }

.t1-switch {
  position: relative; flex: none; width: 50px; height: 26px; border-radius: var(--bt-r-full);
  background: var(--bt-surface-sunken); border: 2px solid var(--bt-line-strong);
  transition: background var(--bt-fast) var(--bt-ease), border-color var(--bt-fast) var(--bt-ease);
}
.t1-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 4px; background: var(--bt-line-strong);
  transition: translate var(--bt-fast) var(--bt-ease), background var(--bt-fast) var(--bt-ease);
}
.t1-choice input:checked + .t1-switch { background: var(--bt-accent-wash); border-color: var(--bt-accent); }
.t1-choice input:checked + .t1-switch::after { translate: 24px 0; background: var(--bt-accent); }
.t1-choice input:focus-visible + .t1-switch { box-shadow: var(--bt-focus-ring); }

/* ---- 10.7 range — the track is a lane, the thumb is a plate --------------- */
.t1-range { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; height: 26px; }
.t1-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(to right, var(--bt-line-strong) 0 10px, transparent 10px 20px);
}
.t1-range::-moz-range-track {
  height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(to right, var(--bt-line-strong) 0 10px, transparent 10px 20px);
}
.t1-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; margin-top: -6px;
  width: 14px; height: 22px; border-radius: 3px;
  background: var(--bt-accent); border: 2px solid var(--bt-text); box-shadow: var(--bt-accent-glow);
}
.t1-range::-moz-range-thumb {
  width: 14px; height: 22px; border-radius: 3px;
  background: var(--bt-accent); border: 2px solid var(--bt-text); box-shadow: var(--bt-accent-glow);
}

/* ---- 10.8 form furniture --------------------------------------------------- */
.t1-form { display: flex; flex-direction: column; gap: var(--bt-gutter-wide); }
.t1-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bt-gutter); }
.t1-form-grid > .bt-field { grid-column: span 6; }
.t1-form-grid > .bt-field--full { grid-column: span 12; }
.t1-form-grid > .bt-field--third { grid-column: span 4; }
@media (max-width: 767px) { .t1-form-grid > .bt-field, .t1-form-grid > .bt-field--third { grid-column: span 12; } }
.t1-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bt-gutter); }
.t1-fieldset__legend {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
  padding: 0 0 var(--bt-s2); width: 100%; border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-choice-row { display: flex; flex-wrap: wrap; gap: var(--bt-gutter) var(--bt-gutter-wide); }
.t1-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-s3); padding-top: var(--bt-s3); border-top: var(--bt-border) solid var(--bt-line); }

/* ============================================================================
   11 · HEADER & FOOTER COLLAPSE
   ----------------------------------------------------------------------------
   The three header zones do not simply stack. Each carries a different job,
   and the job decides what survives:
     top ribbon      corporate wayfinding + the theme switch. The switch is a
                     setting people reach for on a phone at night, so it is
                     the LAST thing to go; the links go first.
     masthead        identity + primary nav + CTAs. Never collapses below the
                     logo and one control.
     bottom ribbon   section nav + search. On a phone search wins the row
                     outright, because a small screen is where people search
                     instead of browsing.
   ========================================================================== */

/* ---- tablet landscape: tighten, keep everything ---------------------------- */
@media (max-width: 1279px) {
  .t1-nav__link { padding-inline: var(--bt-s2); font-size: var(--bt-size-2); }
  /* The strapline wraps to two lines here and pushes the masthead taller than
     the row it is supposed to fit. It is not load-bearing, so it goes. */
  .t1-logo__sub { display: none; }
  .t1-nav--main { gap: var(--bt-s3); }
  .t1-search__input { width: clamp(100px, 16ch, 220px); }
}

/* ---- tablet portrait and below: the drawer takes over --------------------- */
@media (max-width: 1023px) {
  .t1-burger {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--bt-s2);
    min-height: 38px; padding: 0 var(--bt-s3);
    background: transparent; color: var(--bt-text);
    border: var(--bt-border) solid var(--bt-line-strong); border-radius: var(--bt-r-2);
    font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--bt-track-label); cursor: pointer;
  }
  .t1-nav--main { display: none; }
  .t1-ribbon--top .t1-ribbon__nav--left { display: none; }
  .t1-ribbon--bottom .t1-ribbon__nav--left { display: none; }
  .t1-ribbon--bottom .t1-ribbon__inner { justify-content: stretch; }
  .t1-ribbon--bottom .t1-ribbon__nav--right { flex: 1 1 auto; justify-content: flex-end; }
  .t1-search { flex: 1 1 auto; }
  .t1-search__input { width: 100%; }
  .t1-search__field { flex: 1 1 auto; }

  .t1-drawer {
    background: var(--bt-surface);
    border-top: var(--bt-border) solid var(--bt-line);
    max-height: calc(100vh - var(--t1-header-h) - var(--t1-ribbon-h) * 2);
    overflow-y: auto;
  }
  .t1-header[data-open="true"] .t1-drawer { display: block; }
  .t1-drawer__inner { display: flex; flex-direction: column; gap: var(--bt-gutter-wide); padding-block: var(--bt-gutter-wide); }
  .t1-drawer .t1-nav__link {
    display: flex; width: 100%; padding: var(--bt-s3) 0; font-size: var(--bt-size-4);
    border-bottom: var(--bt-border) solid var(--bt-line);
  }
  .t1-drawer .t1-nav__link::after { display: none; }
  .t1-drawer .t1-nav__link[aria-current] { color: var(--bt-accent); }
  .t1-drawer ul { list-style: none; margin: 0; padding: 0; }
  .t1-drawer .t1-nav__cta { flex-direction: column; align-items: stretch; margin: 0; gap: var(--bt-s2); }
  .t1-drawer .bt-btn { width: 100%; }
  .t1-drawer__group { display: flex; flex-wrap: wrap; gap: var(--bt-s1) var(--bt-s4); }
}

/* ---- phones: the top ribbon becomes the switch and nothing else ----------- */
@media (max-width: 767px) {
  .t1-ribbon--top .t1-ribbon__inner { justify-content: flex-end; }
  /* Top ribbon keeps the switch and nothing else; bottom ribbon keeps the
     search and nothing else. Both rows then fit on one line at 360px. */
  .t1-ribbon--top .t1-ribbon__nav--right ul { display: none; }
  .t1-ribbon--bottom .t1-ribbon__nav--right > nav { display: none; }
  .t1-logo__word { font-size: var(--bt-size-5); }
  .t1-logo__sub { display: none; }
  .t1-header[data-shrunk="true"] .t1-ribbon--bottom { max-height: calc(var(--t1-ribbon-h) * 2); opacity: 1; }
}

/* ---- footer collapse ------------------------------------------------------ */
@media (max-width: 1279px) {
  .t1-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bt-gutter-wide); }
  .t1-footer__col { padding-inline: var(--bt-gutter-tight); }
  .t1-footer__col:nth-child(3n+1) { padding-left: 0; box-shadow: none; }
  .t1-footer__col:nth-child(3n) { padding-right: 0; }
}
@media (max-width: 1023px) {
  .t1-footer__masthead { grid-template-columns: minmax(0, 1fr); }
  .t1-footer__contact { justify-self: start; text-align: left; }
}
@media (max-width: 640px) {
  .t1-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t1-footer__col { padding-inline: 0; box-shadow: none; }
  .t1-footer__col + .t1-footer__col { box-shadow: none; }
  .t1-footer__col:nth-child(2n) { padding-left: var(--bt-gutter-tight); box-shadow: inset 1px 0 0 var(--bt-line); }
  .t1-footer__bottom .t1-ribbon__inner { flex-direction: column; align-items: flex-start; gap: var(--bt-s2); padding-block: var(--bt-s3); }
}

/* ============================================================================
   12 · SHOWCASE FURNITURE
   Small helpers the showcase page needs. They are part of the theme because
   the page templates use them too.
   ========================================================================== */
.t1-prose { max-width: var(--bt-measure); display: flex; flex-direction: column; gap: var(--bt-s4); color: var(--bt-text-2); }
.t1-prose p { line-height: var(--bt-lh-relaxed); }
.t1-prose h3, .t1-prose h4 { color: var(--bt-text); margin-top: var(--bt-s4); }
.t1-prose strong { color: var(--bt-text); font-weight: 600; }
.t1-prose ul { margin: 0; padding-left: var(--bt-s5); display: flex; flex-direction: column; gap: var(--bt-s2); }

.t1-specimen {
  display: flex; flex-direction: column; gap: var(--bt-gutter);
  padding: var(--bt-pad-panel);
  border: var(--bt-border) dashed var(--bt-line-strong); border-radius: var(--bt-r-2);
  background: var(--bt-surface);
}
.t1-specimen__cap {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
}
.t1-specimen__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-gutter); }

.t1-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--bt-gutter-tight); }
.t1-swatch {
  display: flex; flex-direction: column; gap: var(--bt-s2);
  padding: var(--bt-s3); border-radius: var(--bt-r-2);
  border: var(--bt-border) solid var(--bt-line); background: var(--bt-surface);
}
.t1-swatch__chip { height: 34px; border-radius: var(--bt-r-1); border: var(--bt-accent-weight) solid var(--bt-text); }
.t1-swatch__name { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600; text-transform: uppercase; letter-spacing: var(--bt-track-label); }
.t1-swatch__note { font-size: var(--bt-size-2); color: var(--bt-text-3); }
.t1-swatch--internal { border-style: dashed; }

.t1-note {
  border-left: var(--bt-accent-weight) solid var(--bt-accent);
  padding: var(--bt-s3) var(--bt-s4); background: var(--bt-accent-wash);
  font-size: var(--bt-size-3); color: var(--bt-text-2); border-radius: 0 var(--bt-r-2) var(--bt-r-2) 0;
}

/* The surface flag: a review aid that names the active breakpoint. Off unless
   the page asks for it, so it never ships to readers by accident. */
.t1-surface-flag { display: none; }
body[data-devtools="true"] .t1-surface-flag {
  display: block; position: fixed; left: 10px; bottom: 10px; z-index: 90;
  padding: var(--bt-s2) var(--bt-s3);
  background: var(--bt-ink-max); color: var(--bt-paper-max);
  border-radius: var(--bt-r-1);
  font-family: var(--bt-font-mono); font-size: 11px; letter-spacing: 0.04em;
  pointer-events: none;
}
.t1-surface-flag::before { content: var(--t1-surface-name); }
.t1-surface-flag::after { content: " · " attr(data-w); }

/* ---- print ---------------------------------------------------------------- */
@media print {
  .t1-header, .t1-footer__top, .t1-footer__bottom, .t1-drawer, .t1-surface-flag, .t1-search { display: none !important; }
  .t1-layout { display: block; }
  .t1-layout__aside-l, .t1-layout__aside-r { display: none; }
  .t1-section { padding-block: 12mm; }
  .t1-plate-field { border-color: #000; }
}

/* ============================================================================
   13 · WORDPRESS ODDS AND ENDS
   The handful of classes WordPress emits or expects and core does not style.
   ========================================================================== */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto; margin: 0; clip-path: none;
}
.t1-widget { display: flex; flex-direction: column; gap: var(--bt-s2); }
.t1-widget + .t1-widget { margin-top: var(--bt-gutter-wide); }
.t1-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bt-s1); }
.t1-widget a { color: var(--bt-text-2); text-decoration: none; font-size: var(--bt-size-3); }
.t1-widget a:hover { color: var(--bt-accent); }

.t1-entry__link { color: inherit; text-decoration: none; }
.t1-entry__link:hover { color: var(--bt-accent); }

.t1-prose code, .t1-note code {
  font-family: var(--bt-font-mono); font-size: 0.88em;
  background: var(--bt-surface-sunken); border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-1); padding: 1px 5px; color: var(--bt-text);
}
.t1-prose img, .t1-layout__content img { max-width: 100%; height: auto; border-radius: var(--bt-r-2); }
.t1-prose blockquote {
  margin: 0; padding-left: var(--bt-s5);
  border-left: var(--bt-accent-weight) solid var(--bt-accent);
  color: var(--bt-text); font-size: var(--bt-size-5);
}
.alignwide { width: 100%; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

/* ============================================================================
   14 · PAGE TYPES
   ----------------------------------------------------------------------------
   Landing, information, analytics, tutorial, blog, newsroom, downloads,
   contact and directory pages all draw on the same four primitives below.
   None of them introduces a colour: every rule here reaches for a bt- token,
   which is the whole reason ten page types still look like one site.
   ========================================================================== */

/* ---- hero variants -------------------------------------------------------- */
.t1-hero--plain::before   { display: none; }
.t1-hero--surface { background: var(--bt-surface); }
.t1-hero--surface::before { display: none; }
.t1-hero--sunken  { background: var(--bt-surface-sunken); }
.t1-hero--sunken::before  { display: none; }
.t1-hero--wide .t1-hero__grid { grid-template-columns: minmax(0, 1fr); }
.t1-hero--wide .t1-hero__title { max-width: 22ch; }
.t1-hero__figure { margin: 0; }
.t1-hero__figure img { width: 100%; height: auto; border-radius: var(--bt-r-3); display: block; }
.t1-figure { margin: 0; }
.t1-figure img { width: 100%; height: auto; border-radius: var(--bt-r-3); display: block; }

/* A non-sticky masthead, for sites that would rather keep the viewport. */
.t1-header--static { position: static; }

/* ---- full-width layout ---------------------------------------------------- */
.t1-layout--full { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content"; }

/* ---- tiles: the parts the meta-driven bento adds -------------------------- */
.t1-tile__title { font-size: var(--bt-size-5); }
.t1-tile__body  { color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-normal); }
.t1-tile__list  { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--bt-s1); }
.t1-tile__list li {
  font-size: var(--bt-size-3); color: var(--bt-text-2);
  padding-left: var(--bt-s4); position: relative;
}
.t1-tile__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: var(--bt-accent-weight); background: var(--bt-accent);
}
.t1-tile__more { color: var(--bt-accent); }
/* .bt-plate is inline-flex; inside a stretch-aligned flex column it would
   stretch to the tile width and strand its value on the left. */
.bt-tile .bt-plate { align-self: flex-start; }
/* A tile that is a link keeps the tile geometry and gains only a lift. */
a.bt-tile { text-decoration: none; color: inherit; transition: transform var(--bt-fast) var(--bt-ease), border-color var(--bt-fast) var(--bt-ease); }
a.bt-tile:hover { transform: translateY(-2px); border-color: var(--bt-line-strong); }
a.bt-tile[data-product]:hover { border-color: var(--bt-accent); }

/* ---- card lists ----------------------------------------------------------- */
.t1-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bt-gutter-wide); }
.t1-cards--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t1-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .t1-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .t1-cards--two, .t1-cards--three { grid-template-columns: minmax(0, 1fr); } }

.t1-card-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bt-gutter-tight);
  padding-bottom: var(--bt-gutter-wide);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-cards--two .t1-card-item, .t1-cards--three .t1-card-item { border-bottom: 0; padding-bottom: 0; }
.t1-cards--two .t1-card-item, .t1-cards--three .t1-card-item {
  background: var(--bt-surface); border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-3); padding: var(--bt-pad-tile);
}
.t1-card-item__media { display: block; overflow: hidden; border-radius: var(--bt-r-2); }
.t1-card-item__media img { display: block; width: 100%; height: auto; }
.t1-card-item__body { display: flex; flex-direction: column; gap: var(--bt-s2); min-width: 0; }
.t1-card-item__title { font-size: var(--bt-size-6); }
.t1-card-item__title a { color: var(--bt-text); text-decoration: none; }
.t1-card-item__title a:hover { color: var(--bt-accent); }
.t1-card-item__excerpt { color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-relaxed); }
.t1-card-item__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-s3); }
/* With a picture the card becomes two columns — but only where two columns
   are wide enough to be worth having. */
@media (min-width: 768px) {
  .t1-cards > .t1-card-item:has(.t1-card-item__media) { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--bt-gutter-wide); }
}

/* ---- newsroom lead -------------------------------------------------------- */
.t1-lead { display: flex; flex-direction: column; gap: var(--bt-gutter-tight); align-items: flex-start; }
.t1-lead__meta { display: flex; align-items: center; gap: var(--bt-gutter-tight); }
.t1-lead__title { font-size: var(--bt-size-8); }
.t1-lead__title a { color: var(--bt-text); text-decoration: none; }
.t1-lead__title a:hover { color: var(--bt-accent); }

/* ---- downloads -----------------------------------------------------------
   Each row is the long strip from the field family, because a download IS a
   file at a location. Reusing the member costs nothing and makes the page
   obviously part of the same system. */
.t1-downloads { display: flex; flex-direction: column; gap: var(--bt-gutter); }
.t1-download {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head btn" "strip btn";
  gap: var(--bt-s3) var(--bt-gutter);
  align-items: center;
  padding: var(--bt-pad-tile);
  background: var(--bt-surface);
  border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-3);
}
.t1-download__head  { grid-area: head; min-width: 0; }
.t1-download__title { font-size: var(--bt-size-5); }
.t1-download__desc  { color: var(--bt-text-2); font-size: var(--bt-size-3); margin-top: var(--bt-s1); }
.t1-download__strip { grid-area: strip; }
.t1-download__strip .t1-plate-field__input { cursor: default; }
.t1-download__btn   { grid-area: btn; }
@media (max-width: 767px) {
  .t1-download { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "strip" "btn"; }
  .t1-download__btn { justify-self: stretch; }
}

/* ---- pagination ----------------------------------------------------------- */
.t1-pagination { margin-top: var(--bt-rhythm); }
.t1-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; padding: 0 var(--bt-s3);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-3); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
  color: var(--bt-text-2); text-decoration: none;
  border: var(--bt-border) solid var(--bt-line); border-radius: var(--bt-r-2);
}
.t1-pagination .page-numbers:hover { color: var(--bt-text); border-color: var(--bt-line-strong); }
.t1-pagination .page-numbers.current { color: var(--bt-accent); border-color: var(--bt-accent); border-width: var(--bt-accent-weight); box-shadow: var(--bt-accent-glow); }
.t1-pagination .screen-reader-text { position: absolute !important; }

/* ---- footer column count -------------------------------------------------- */
.t1-footer__cols { grid-template-columns: repeat(var(--t1-footer-cols, 6), minmax(0, 1fr)); }
@media (max-width: 1279px) { .t1-footer__cols { grid-template-columns: repeat(min(3, var(--t1-footer-cols, 6)), minmax(0, 1fr)); } }
@media (max-width: 640px)  { .t1-footer__cols { grid-template-columns: repeat(min(2, var(--t1-footer-cols, 6)), minmax(0, 1fr)); } }
.t1-footer__copy--reg { opacity: 0.8; }

/* ============================================================================
   15 · THE CONTENT PAGE TYPES
   ----------------------------------------------------------------------------
   About, insights hub, research, FAQ, changelog, careers, events, status and
   verification. Nine shapes, and not one new colour: every rule below reaches
   for a bt- token, which is the only reason nineteen page types still look
   like one site rather than nineteen.
   ========================================================================== */

/* ---- shared: an empty state said plainly ---------------------------------
   A listing with nothing in it is a fact, not a bug. On a site whose articles
   are still a topic bank, an empty section is the truth — so it gets a panel
   and a sentence rather than collapsing to nothing and looking broken. */
.t1-empty { border-style: dashed; }

/* ---- filters -------------------------------------------------------------- */
.t1-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-s2);
  padding-bottom: var(--bt-gutter); margin-bottom: var(--bt-gutter-wide);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-filters__label {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
  margin-right: var(--bt-s2);
}
.t1-filter {
  display: inline-flex; align-items: center; gap: var(--bt-s2);
  padding: var(--bt-s1) var(--bt-s3);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--bt-text-2); text-decoration: none;
  border: var(--bt-border) solid var(--bt-line); border-radius: var(--bt-r-full);
}
.t1-filter:hover { color: var(--bt-text); border-color: var(--bt-line-strong); }
.t1-filter[aria-current] { color: var(--bt-accent); border-color: var(--bt-accent); border-width: var(--bt-accent-weight); }
.t1-filter__n { font-family: var(--bt-font-display); color: var(--bt-text-3); }

/* ---- insights hub: a category is a section, not a tag --------------------- */
.t1-topic { scroll-margin-top: calc(var(--t1-header-h) + var(--bt-s5)); }
.t1-topic__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bt-gutter);
  padding-bottom: var(--bt-s2); margin-bottom: var(--bt-s3);
  border-bottom: var(--bt-accent-weight) solid var(--bt-accent);
  box-shadow: var(--bt-accent-glow);
}
.t1-topic__all {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--bt-accent); text-decoration: none; white-space: nowrap;
}
.t1-topic__intro { color: var(--bt-text-2); font-size: var(--bt-size-3); max-width: var(--bt-measure); margin-bottom: var(--bt-gutter); }
.t1-topic__empty {
  color: var(--bt-text-3); font-size: var(--bt-size-3);
  padding: var(--bt-s4); border: var(--bt-border) dashed var(--bt-line-strong); border-radius: var(--bt-r-2);
}

/* ---- FAQ ------------------------------------------------------------------ */
.t1-faq { display: flex; flex-direction: column; }
.t1-faq__group {
  font-size: var(--bt-size-6); margin-top: var(--bt-rhythm); margin-bottom: var(--bt-s3);
  scroll-margin-top: calc(var(--t1-header-h) + var(--bt-s5));
}
.t1-faq__group:first-child { margin-top: 0; }
.t1-faq__item {
  border-bottom: var(--bt-border) solid var(--bt-line);
  scroll-margin-top: calc(var(--t1-header-h) + var(--bt-s5));
}
.t1-faq__q {
  display: flex; align-items: flex-start; gap: var(--bt-s3);
  padding: var(--bt-s4) 0; cursor: pointer;
  font-size: var(--bt-size-5); color: var(--bt-text);
  list-style: none;
}
.t1-faq__q::-webkit-details-marker { display: none; }
/* The marker is drawn rather than typed, so it rotates and inherits the
   accent without depending on a font that ships an arrow. */
.t1-faq__q::before {
  content: ""; flex: none; margin-top: 0.42em;
  width: 8px; height: 8px;
  border-right: 2px solid var(--bt-accent); border-bottom: 2px solid var(--bt-accent);
  rotate: -45deg; transition: rotate var(--bt-fast) var(--bt-ease);
}
.t1-faq__item[open] > .t1-faq__q::before { rotate: 45deg; }
.t1-faq__q:hover { color: var(--bt-accent); }
.t1-faq__a { padding: 0 0 var(--bt-s5) calc(8px + var(--bt-s3)); max-width: var(--bt-measure); }
.t1-faq__a p { color: var(--bt-text-2); line-height: var(--bt-lh-relaxed); }
.t1-faq__a p + p { margin-top: var(--bt-s3); }
@media print { .t1-faq__item { display: block; } .t1-faq__a { display: block !important; } }

/* ---- changelog / build log ------------------------------------------------ */
.t1-log { display: flex; flex-direction: column; }
.t1-log__entry {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--bt-gutter-wide);
  padding-block: var(--bt-gutter-wide);
  border-top: var(--bt-border) solid var(--bt-line);
}
.t1-log__entry:first-child { border-top: 0; padding-top: 0; }
.t1-log__stamp { display: flex; flex-direction: column; gap: var(--bt-s2); align-items: flex-start; }
.t1-log__body { display: flex; flex-direction: column; gap: var(--bt-s3); min-width: 0; }
.t1-log__title { font-size: var(--bt-size-5); }
.t1-log__detail { color: var(--bt-text-2); line-height: var(--bt-lh-relaxed); max-width: var(--bt-measure); }
@media (max-width: 767px) {
  .t1-log__entry { grid-template-columns: minmax(0, 1fr); gap: var(--bt-s3); }
  .t1-log__stamp { flex-direction: row; align-items: center; gap: var(--bt-s3); }
}

/* ---- roles ---------------------------------------------------------------- */
.t1-roles { display: flex; flex-direction: column; gap: var(--bt-gutter); }
.t1-role {
  display: flex; flex-direction: column; gap: var(--bt-s3);
  padding: var(--bt-pad-panel);
  background: var(--bt-surface);
  border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-3);
}
.t1-role__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bt-gutter); flex-wrap: wrap; }
.t1-role__title { font-size: var(--bt-size-6); }
.t1-role__title a { color: var(--bt-text); text-decoration: none; }
.t1-role__title a:hover { color: var(--bt-accent); }
.t1-role__summary { color: var(--bt-text-2); max-width: var(--bt-measure); line-height: var(--bt-lh-relaxed); }
.t1-role__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--bt-s3) var(--bt-gutter); margin: 0;
  padding-top: var(--bt-s3); border-top: var(--bt-border) solid var(--bt-line);
}
.t1-role__facts dt {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
}
.t1-role__facts dd { margin: 2px 0 0; font-size: var(--bt-size-3); color: var(--bt-text); }

/* ---- events --------------------------------------------------------------- */
.t1-events { display: flex; flex-direction: column; gap: var(--bt-gutter); }
.t1-event {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--bt-gutter-wide);
  padding: var(--bt-pad-tile);
  background: var(--bt-surface);
  border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-3);
}
/* Past events stay on the page — they are the evidence the events are real —
   but they step back rather than competing with what is still open. */
.t1-events--past .t1-event { background: transparent; border-style: dashed; }
.t1-events--past .t1-event__title { color: var(--bt-text-2); }
.t1-event__body { display: flex; flex-direction: column; gap: var(--bt-s2); min-width: 0; }
.t1-event__title { font-size: var(--bt-size-6); }
.t1-event__summary { color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-relaxed); }
@media (max-width: 767px) {
  .t1-event { grid-template-columns: auto minmax(0, 1fr); gap: var(--bt-s3) var(--bt-gutter); }
  .t1-event__cta { grid-column: 1 / -1; justify-self: stretch; }
}

/* ---- status ---------------------------------------------------------------
   One state token drives the dot, so a row can never disagree with itself. */
.t1-status { display: flex; flex-direction: column; }
.t1-status__row,
.t1-statusbar { --_state: var(--bt-positive); }
.t1-status__row[data-state="degraded"], .t1-statusbar[data-state="degraded"] { --_state: var(--bt-warning); }
.t1-status__row[data-state="down"],     .t1-statusbar[data-state="down"]     { --_state: var(--bt-critical); }
.t1-status__row[data-state="maintenance"], .t1-statusbar[data-state="maintenance"] { --_state: var(--bt-info); }
.t1-status__row[data-state="pending"],  .t1-statusbar[data-state="pending"]  { --_state: var(--bt-text-3); }

.t1-status__dot {
  flex: none; width: 10px; height: 10px; border-radius: var(--bt-r-full);
  background: var(--_state);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_state) 22%, transparent);
}
.t1-status__row {
  display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 2fr) auto auto;
  align-items: center; gap: var(--bt-gutter);
  padding: var(--bt-s4) 0;
  border-top: var(--bt-border) solid var(--bt-line);
}
.t1-status__row:first-child { border-top: 0; }
.t1-status__name { font-weight: 600; color: var(--bt-text); }
.t1-status__note { color: var(--bt-text-2); font-size: var(--bt-size-3); }
.t1-status__since { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); white-space: nowrap; }
@media (max-width: 767px) {
  .t1-status__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--bt-s2) var(--bt-s3); }
  .t1-status__note { grid-column: 2 / -1; }
  .t1-status__since { display: none; }
}
.t1-statusbar {
  display: flex; align-items: center; gap: var(--bt-gutter);
  padding: var(--bt-pad-panel);
  background: var(--bt-surface);
  border: var(--bt-accent-weight) solid color-mix(in oklab, var(--_state) 44%, var(--bt-line));
  border-left-width: 4px; border-left-color: var(--_state);
  border-radius: var(--bt-r-3);
}
.t1-statusbar__head { font-size: var(--bt-size-6); flex: 1 1 auto; }

/* ---- reports and studies -------------------------------------------------- */
.t1-reports { display: flex; flex-direction: column; gap: var(--bt-rhythm); }
.t1-report {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--bt-gutter-wide);
  padding-bottom: var(--bt-rhythm);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-reports .t1-report:last-child { border-bottom: 0; padding-bottom: 0; }
.t1-report__stamp { display: flex; flex-direction: column; gap: var(--bt-s2); align-items: flex-start; }
.t1-report__body { display: flex; flex-direction: column; gap: var(--bt-s3); min-width: 0; }
.t1-report__title { font-size: var(--bt-size-7); }
.t1-report__title a { color: var(--bt-text); text-decoration: none; }
.t1-report__title a:hover { color: var(--bt-accent); }
.t1-report__abstract { color: var(--bt-text-2); font-size: var(--bt-size-4); line-height: var(--bt-lh-relaxed); max-width: var(--bt-measure); }
.t1-report__sub { color: var(--bt-text-3); }
/* The method line is set apart because it is the thing that makes a
   standard-of-evidence claim checkable. A report row without one says
   "trust us", which is the opposite of publishing research. */
.t1-report__method {
  font-size: var(--bt-size-3); color: var(--bt-text-2);
  padding: var(--bt-s3) var(--bt-s4);
  background: var(--bt-surface-sunken);
  border-left: var(--bt-accent-weight) solid var(--bt-accent);
  border-radius: 0 var(--bt-r-2) var(--bt-r-2) 0;
  max-width: var(--bt-measure);
}
.t1-report__method .bt-eyebrow { display: inline; margin-right: var(--bt-s2); }
.t1-report__file { max-width: 46ch; }
@media (max-width: 767px) {
  .t1-report { grid-template-columns: minmax(0, 1fr); gap: var(--bt-s4); }
  .t1-report__stamp { flex-direction: row; align-items: center; gap: var(--bt-s3); }
}

/* ---- about: values -------------------------------------------------------- */
.t1-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--bt-gutter-wide); }
.t1-value {
  display: flex; flex-direction: column; gap: var(--bt-s2);
  padding-top: var(--bt-s4);
  border-top: var(--bt-accent-weight) solid var(--bt-accent);
  box-shadow: 0 -1px 0 0 transparent, var(--bt-accent-glow);
}
.t1-value__n {
  font-family: var(--bt-font-display); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--bt-size-3); letter-spacing: var(--bt-track-plate); color: var(--bt-accent);
}
.t1-value__title { font-size: var(--bt-size-6); }
.t1-value__body { color: var(--bt-text-2); line-height: var(--bt-lh-relaxed); }

/* ---- about: timeline ------------------------------------------------------
   A ruled column, not a decorated one. The accent appears only on entries
   explicitly marked — a timeline where every moment is highlighted highlights
   nothing at all. */
.t1-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.t1-timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1px; background: var(--bt-line);
}
.t1-timeline__item {
  position: relative; display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: var(--bt-gutter-wide);
  padding: 0 0 var(--bt-gutter-wide) var(--bt-s6);
}
.t1-timeline__item::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 11px; border-radius: var(--bt-r-full);
  background: var(--bt-ground); border: 2px solid var(--bt-line-strong);
}
.t1-timeline__item.is-marked::before { border-color: var(--bt-accent); background: var(--bt-accent); box-shadow: var(--bt-accent-glow); }
.t1-timeline__when {
  font-family: var(--bt-font-display); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--bt-size-5); letter-spacing: var(--bt-track-plate);
  text-transform: uppercase; color: var(--bt-text-3);
}
.t1-timeline__item.is-marked .t1-timeline__when { color: var(--bt-accent); }
.t1-timeline__title { font-size: var(--bt-size-5); }
.t1-timeline__detail { color: var(--bt-text-2); line-height: var(--bt-lh-relaxed); max-width: var(--bt-measure); margin-top: var(--bt-s2); }
@media (max-width: 767px) {
  .t1-timeline__item { grid-template-columns: minmax(0, 1fr); gap: var(--bt-s2); }
}

/* ---- about: people -------------------------------------------------------- */
.t1-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bt-gutter-wide); }
.t1-person { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--bt-gutter); align-items: start; }
.t1-person__photo { width: 64px; height: 64px; border-radius: var(--bt-r-3); object-fit: cover; display: block; }
.t1-person__photo--initials {
  width: 64px; height: 64px; border-radius: var(--bt-r-3);
  font-size: var(--bt-size-6); border: var(--bt-accent-weight) solid color-mix(in oklab, var(--bt-accent) 40%, var(--bt-line));
}
.t1-person__body { display: flex; flex-direction: column; gap: var(--bt-s1); min-width: 0; }
.t1-person__name { font-size: var(--bt-size-5); }
.t1-person__name a { color: var(--bt-text); text-decoration: none; }
.t1-person__name a:hover { color: var(--bt-accent); }
.t1-person__bio { color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-relaxed); margin-top: var(--bt-s1); }

/* ---- verification --------------------------------------------------------- */
.t1-verify { display: flex; flex-direction: column; gap: var(--bt-gutter); max-width: 46ch; }
.t1-verify__result { margin-top: var(--bt-gutter-wide); }

/* ============================================================================
   16 · MAGAZINE AND HOMEPAGE
   ----------------------------------------------------------------------------
   A lead story, a real masonry mosaic, a product family, a dense text index
   and the special hero. As everywhere else: not one new colour.
   ========================================================================== */

/* ---- the masthead band -----------------------------------------------------
   The front page's opening. Ruled like the hero, because they are doing the
   same job on different kinds of site, and a reader should not be able to tell
   which template a home page used. */
.t1-masthead-band { position: relative; overflow: hidden; }
.t1-masthead-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--bt-line) 0 1px, transparent 1px 96px);
  opacity: 0.5; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 70%, transparent);
}
.t1-masthead-band > * { position: relative; }
/* With no heading, the section head is an eyebrow and a line of intro; it
   still needs the rule beneath it that separates masthead from lead. */
.t1-masthead-band .t1-section__head { align-items: center; }

/* ---- the lead story --------------------------------------------------------
   Bigger than anything else on the page and allowed to be. A front page whose
   lead is the same size as its third item has no lead. */
.t1-lead-story {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--bt-gutter-wide);
  padding-bottom: var(--bt-rhythm);
  border-bottom: var(--bt-accent-weight) solid var(--bt-accent);
  box-shadow: var(--bt-accent-glow);
}
.t1-lead-story--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.t1-lead-story--media .t1-lead-story__media { order: 2; }
.t1-lead-story__media { display: block; overflow: hidden; border-radius: var(--bt-r-3); }
.t1-lead-story__media img { display: block; width: 100%; height: auto; }
.t1-lead-story__body { display: flex; flex-direction: column; gap: var(--bt-gutter-tight); min-width: 0; }
.t1-lead-story__title { font-size: var(--bt-size-9); max-width: 20ch; }
.t1-lead-story__title a { color: var(--bt-text); text-decoration: none; }
.t1-lead-story__title a:hover { color: var(--bt-accent); }
.t1-lead-story__standfirst {
  font-size: var(--bt-size-5); line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-2); max-width: var(--bt-measure);
}
.t1-lead-story__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-gutter); margin-top: var(--bt-s2); }
.t1-lead-story__plate { justify-self: start; }
/* Text-only front pages hand the headline the job the picture would have done. */
.t1-masthead-band--text .t1-lead-story__title { font-size: var(--bt-size-10); max-width: 18ch; }
@media (max-width: 1023px) {
  .t1-lead-story--media { grid-template-columns: minmax(0, 1fr); }
  .t1-lead-story--media .t1-lead-story__media { order: 0; }
  .t1-lead-story__title { font-size: var(--bt-size-8); max-width: none; }
  .t1-masthead-band--text .t1-lead-story__title { font-size: var(--bt-size-9); max-width: none; }
}

/* ---- the mosaic · REAL MASONRY, AND ITS ONE HONEST CAVEAT ------------------
   CSS multi-column is the only masonry a browser does natively today.
   grid-template-rows: masonry is not shipped broadly enough to build on, and a
   JavaScript masonry library re-lays-out on every resize and every font load,
   which is visible and which no amount of tuning hides.

   THE CAVEAT: columns flow DOWN column one, then down column two. Reading
   order is per column, not across. That is correct for a wall of
   self-contained story cards — nobody reads a magazine front page across the
   gutter — and WRONG for anything sequential or ranked. So the mosaic is for
   stories, and .bt-bento, whose DOM order is its reading order, stays the tool
   for anything ordered. Do not use this for steps, results or a leaderboard.  */
.t1-mosaic {
  columns: var(--t1-mosaic-cols, 3);
  column-gap: var(--bt-gutter-wide);
}
.t1-mosaic__item {
  break-inside: avoid;                 /* a card split across a column break is unreadable */
  display: flex; flex-direction: column; gap: var(--bt-s2);
  margin-bottom: var(--bt-gutter-wide);
  padding-bottom: var(--bt-gutter-wide);
  border-bottom: var(--bt-border) solid var(--bt-line);
}
.t1-mosaic__media { display: block; overflow: hidden; border-radius: var(--bt-r-2); margin-bottom: var(--bt-s2); }
.t1-mosaic__media img { display: block; width: 100%; height: auto; }
.t1-mosaic__title { font-size: var(--bt-size-5); }
.t1-mosaic__title a { color: var(--bt-text); text-decoration: none; }
.t1-mosaic__title a:hover { color: var(--bt-accent); }
.t1-mosaic__excerpt { color: var(--bt-text-2); font-size: var(--bt-size-3); line-height: var(--bt-lh-relaxed); }
/* Every fourth card is set larger. A mosaic of identical cards is a grid with
   ragged edges; the variation is what makes it read as a front page. */
.t1-mosaic__item.is-feature .t1-mosaic__title { font-size: var(--bt-size-7); }
.t1-mosaic__item.is-feature .t1-mosaic__excerpt { font-size: var(--bt-size-4); }
@media (max-width: 1279px) { .t1-mosaic { columns: min(3, var(--t1-mosaic-cols, 3)); } }
@media (max-width: 1023px) { .t1-mosaic { columns: 2; } }
@media (max-width: 640px)  { .t1-mosaic { columns: 1; } }
@media print { .t1-mosaic { columns: 2; } }

/* ---- the product family ----------------------------------------------------
   The one block where several accents appear at once, because the point of it
   is that they are different products. The accent is still a hairline and a
   word — never a fill. */
.t1-family { display: grid; grid-template-columns: repeat(var(--t1-family-cols, 3), minmax(0, 1fr)); gap: var(--bt-gutter-wide); }
@media (max-width: 1023px) { .t1-family { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .t1-family { grid-template-columns: minmax(0, 1fr); } }
.t1-product {
  display: flex; flex-direction: column; gap: var(--bt-s3);
  padding: var(--bt-pad-panel);
  background: var(--bt-surface);
  border: var(--bt-accent-weight) solid color-mix(in oklab, var(--bt-accent) 40%, var(--bt-line));
  border-radius: var(--bt-r-3);
  box-shadow: var(--bt-accent-glow);
}
/* A surface that is real but has no public product page: dashed, unaccented.
   "This exists and is not for you" — which is more precise than omitting it. */
.t1-product.is-quiet {
  background: transparent; border-style: dashed; border-width: var(--bt-border);
  border-color: var(--bt-line-strong); box-shadow: none;
}
.t1-product__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bt-gutter); flex-wrap: wrap; }
.t1-product__name { font-size: var(--bt-size-6); }
.t1-product__name a { color: var(--bt-text); text-decoration: none; }
.t1-product__name a:hover { color: var(--bt-accent); }
.t1-product__body { color: var(--bt-text-2); line-height: var(--bt-lh-relaxed); }
.t1-product__foot { margin-top: auto; padding-top: var(--bt-s2); }

/* ---- the dense text index --------------------------------------------------
   Density is the feature. A reader scanning for one half-remembered title is
   served by eighty rows on two screens, not eighty cards on nine. */
.t1-textlist { display: flex; flex-direction: column; }
.t1-textlist__row {
  display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--bt-gutter); align-items: baseline;
  padding: var(--bt-s3) var(--bt-s2);
  border-top: var(--bt-border) solid var(--bt-line);
  text-decoration: none; color: inherit;
}
.t1-textlist__row:last-child { border-bottom: var(--bt-border) solid var(--bt-line); }
.t1-textlist__row:hover { background: var(--bt-accent-wash); }
.t1-textlist__date {
  font-family: var(--bt-font-display); font-variant-numeric: tabular-nums;
  font-size: var(--bt-size-3); letter-spacing: 0.02em; color: var(--bt-text-3); white-space: nowrap;
}
.t1-textlist__title { font-size: var(--bt-size-4); font-weight: 500; color: var(--bt-text); }
.t1-textlist__row:hover .t1-textlist__title { color: var(--bt-accent); }
.t1-textlist__meta { font-size: var(--bt-size-3); color: var(--bt-text-3); }
@media (max-width: 1023px) {
  .t1-textlist__row { grid-template-columns: 96px minmax(0, 1fr); gap: var(--bt-s3) var(--bt-gutter); }
  .t1-textlist__meta { display: none; }
}

/* ---- the special hero ------------------------------------------------------
   The loudest thing this theme does, which is the argument for using it
   rarely: a site where every page shouts has no way left to raise its voice. */
.t1-special {
  position: relative; overflow: hidden;
  padding-block: calc(var(--bt-rhythm) * 1.6);
  background: var(--bt-surface);
  border-bottom: var(--bt-accent-weight) solid var(--bt-accent);
  box-shadow: var(--bt-accent-glow);
}
.t1-special::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--bt-line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--bt-line) 0 1px, transparent 1px 72px);
  opacity: 0.45;
  mask-image: radial-gradient(120% 90% at 20% 40%, #000 0%, transparent 72%);
}
.t1-special__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--bt-gutter); }
.t1-special__title { font-size: calc(var(--bt-size-10) * 1.28); max-width: 15ch; }
.t1-special__lede { font-size: var(--bt-size-6); line-height: var(--bt-lh-snug); color: var(--bt-text-2); max-width: 42ch; }
.t1-special__actions { display: flex; flex-wrap: wrap; gap: var(--bt-s3); }
.t1-special__plate { align-self: flex-start; }
.t1-special__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bt-gutter); }
.t1-special__stats .bt-tile { grid-column: auto; }
@media (max-width: 1023px) {
  .t1-special { padding-block: var(--bt-rhythm); }
  .t1-special__title { font-size: var(--bt-size-10); max-width: none; }
  .t1-special__lede { font-size: var(--bt-size-5); }
}

/* ---- narrow intro, wide detail ---------------------------------------------
   A VERTICAL split, not a column one. A sidebar says "read these together";
   this says "read this, then that". */
.t1-narrowwide { display: flex; flex-direction: column; gap: var(--bt-rhythm); }
.t1-narrowwide__intro {
  max-width: 34ch; display: flex; flex-direction: column; gap: var(--bt-s3);
  padding-bottom: var(--bt-gutter-wide);
  border-bottom: var(--bt-accent-weight) solid var(--bt-accent);
  align-self: flex-start;
}
.t1-narrowwide__detail { max-width: none; }

/* -------------------------------------------------------------------------
 * PAGINATION
 *
 * A ruled band under a listing: the count on the left in the UI face, the
 * numbers on the right as plate-ish squares. Current page is the filled one,
 * because on a ladder of identical tiles fill reads faster than weight.
 * ---------------------------------------------------------------------- */
.t1-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bt-gutter); margin-top: var(--bt-rhythm);
  padding-top: var(--bt-s5); border-top: 1px solid var(--bt-line);
}
.t1-pager__count {
  font-family: var(--bt-face-ui); font-size: var(--bt-size-1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bt-text-3);
}
.t1-pager__links { display: flex; flex-wrap: wrap; gap: 6px; }
.t1-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding-inline: 10px;
  border: 1px solid var(--bt-line-strong); border-radius: 7px;
  font-family: var(--bt-face-ui); font-size: var(--bt-size-1);
  letter-spacing: 0.06em; color: var(--bt-text); text-decoration: none;
}
.t1-pager a.page-numbers:hover { border-color: var(--bt-accent); color: var(--bt-accent); }
.t1-pager .page-numbers.current {
  background: var(--bt-accent); border-color: var(--bt-accent); color: var(--bt-cta-ink);
}
.t1-pager .page-numbers.next, .t1-pager .page-numbers.prev { text-transform: uppercase; }
@media (max-width: 640px) {
  .t1-pager { flex-direction: column; align-items: flex-start; }
}