/* The Tint Station brand system.
 *
 * Colour is taken from the logo's own source SVG in Drive, where the two fills
 * are declared outright, rather than sampled or eyeballed:
 *     .cls-1 { fill: #9ed3e4 }   the sign field
 *     .cls-2 { fill: #f67623 }   the border and the lettering
 * plus black for the outline and the bulbs. The tokens the site shipped with
 * were approximations of those (#eb7825, #a1d3e4) and its workhorse
 * --contrast: #212838 is a navy that appears nowhere in the mark at all.
 *
 * The ink here is a near-black with a trace of the sign's blue in it, so large
 * areas of type sit with the palette instead of fighting it. True #000 is kept
 * for the one thing that is genuinely black in the logo: the outline.
 */

:root {
  /* straight off the logo */
  --ts-sky:        #9ed3e4;
  --ts-orange:     #f67623;
  --ts-outline:    #000000;

  /* derived, and only where the logo gives nothing */
  --ts-sky-pale:   #eaf5f9;
  --ts-sky-deep:   #2f7f99;
  --ts-orange-ink: #a94a0e;   /* orange dark enough to read as text on white */
  --ts-ink:        #10171a;
  --ts-ink-2:      #3d4a4f;
  --ts-ink-3:      #6b797f;
  --ts-rule:       #d8e3e7;
  --ts-paper:      #ffffff;
  --ts-paper-2:    #f6fafb;

  --ts-display: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --ts-text:    "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

  /* One ratio, so nothing is chosen by hand twice. */
  --ts-step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.94rem);
  --ts-step-0:  clamp(1.06rem, 1.02rem + 0.2vw, 1.19rem);
  --ts-step-1:  clamp(1.33rem, 1.24rem + 0.42vw, 1.63rem);
  --ts-step-2:  clamp(1.66rem, 1.49rem + 0.85vw, 2.23rem);
  --ts-step-3:  clamp(2.07rem, 1.76rem + 1.56vw, 3.05rem);
  --ts-step-4:  clamp(2.59rem, 2.04rem + 2.73vw, 4.17rem);
}

/* ── type ────────────────────────────────────────────────────────────────── */

/* ⚠️ SCOPE TO THE CONTENT, NEVER TO <body>.
   The first version set font-family and line-height: 1.65 on body.ts-brand.
   The theme's header inherited both, the nav bar grew taller, its items stopped
   being vertically centred and the active-page chip became a misaligned block.
   The site chrome is tuned for the theme's own type and must be left alone
   until it is redesigned deliberately rather than by inheritance. */
.ts-brand .entry-content {
  font-family: var(--ts-text);
  font-size: var(--ts-step-0);
  line-height: 1.65;
  color: var(--ts-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* .entry-header is where GeneratePress puts a page title it renders itself
   (/resources/). It sits BEFORE .entry-content, so it needs naming here. */
.ts-brand .entry-header h1.entry-title,
.ts-brand .entry-content h1, .ts-brand .entry-content h2, .ts-brand .entry-content h3 {
  font-family: var(--ts-display);
  /* `inherit`, STATED. Omitting the colour is not the same thing: the theme
     sets h1-h3 to its #19284a navy by element, and with nothing here that
     literal won and every heading on the homepage went navy. Naming a colour
     is wrong the other way round: it turned the white "Air Series" on a navy
     panel near-black. The container sets the ink, a dark panel sets white, and
     headings take whichever they sit on. */
  color: inherit;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;          /* no one-word last lines on a display face */
}
.ts-brand .entry-header h1.entry-title,
.ts-brand .entry-content h1 { font-size: var(--ts-step-4); font-weight: 800; margin: 0 0 .5em; }
.ts-brand .entry-content h2 { font-size: var(--ts-step-2); margin: 2.2em 0 .5em; }
.ts-brand .entry-content h3 { font-size: var(--ts-step-1); margin: 1.8em 0 .4em; }

/* The one place the logo's own trick is reused: orange on the sign, outlined. */
.ts-brand .entry-content .ts-kicker {
  font-family: var(--ts-text);
  font-size: var(--ts-step--1);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ts-orange-ink);
  margin: 0 0 .9em;
}
.ts-brand .entry-content .ts-lede { font-size: var(--ts-step-1); line-height: 1.5; color: var(--ts-ink-2); max-width: 36ch; }

.ts-brand .entry-content p { max-width: 68ch; margin: 0 0 1.15em; }
/* Text links only. A button is a link too, and the body-link colour on an
   orange button is brown on orange. */
.ts-brand .entry-content a:not(.gb-button):not(.ts-btn) { color: var(--ts-orange-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ts-brand .entry-content a:not(.gb-button):not(.ts-btn):hover { color: var(--ts-ink); }
.ts-brand .entry-content strong { font-weight: 650; }

.ts-brand .entry-content ul, .ts-brand .entry-content ol { max-width: 68ch; padding-left: 1.15em; margin: 0 0 1.4em; }
.ts-brand .entry-content li { margin: 0 0 .6em; }
.ts-brand .entry-content li::marker { color: var(--ts-orange); }

/* ── components ──────────────────────────────────────────────────────────── */

.ts-brand .entry-content .ts-note {
  background: var(--ts-sky-pale);
  border-left: 3px solid var(--ts-orange);
  border-radius: 0 10px 10px 0;
  padding: 1.1em 1.3em;
  margin: 2em 0;
  max-width: 68ch;
}
.ts-brand .entry-content .ts-note p:last-child { margin-bottom: 0; }

/* overflow-x is load-bearing, not decoration: the table has a min-width and
   without this it widens the whole page instead of scrolling in its own box.
   Dropped once when this file superseded the page's inline styles, and the
   mobile layout viewport went from 390 to 651 before a measurement caught it. */
.ts-brand .entry-content .ts-price-wrap, .ts-brand .entry-content .ts-law-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 1.6em 0 .6em; border: 1px solid var(--ts-rule); border-radius: 12px;
}
.ts-brand .entry-content .ts-price, .ts-brand .entry-content .ts-law { min-width: 620px; border-collapse: collapse; width: 100%; font-size: var(--ts-step--1); }
.ts-brand .entry-content .ts-price th, .ts-brand .entry-content .ts-price td,
.ts-brand .entry-content .ts-law th, .ts-brand .entry-content .ts-law td { padding: .85em 1em; border-bottom: 1px solid var(--ts-rule); text-align: left; }
.ts-brand .entry-content .ts-price thead th, .ts-brand .entry-content .ts-law thead th {
  background: var(--ts-sky-pale); color: var(--ts-sky-deep);
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
.ts-brand .entry-content .ts-price tbody th, .ts-brand .entry-content .ts-law tbody th { font-weight: 600; color: var(--ts-ink); }
/* Prices line up only with tabular figures. This is why body type is Inter. */
.ts-brand .entry-content .ts-price td, .ts-brand .entry-content .ts-law td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ts-brand .entry-content tbody tr:last-child th, .ts-brand .entry-content tbody tr:last-child td { border-bottom: 0; }
.ts-brand .entry-content tbody tr:hover th, .ts-brand .entry-content tbody tr:hover td { background: var(--ts-paper-2); }

.ts-brand .entry-content .ts-film { border-left: 3px solid var(--ts-sky); padding: .1em 0 .1em 1.1em; margin: 0 0 1.5em; max-width: 68ch; }
.ts-brand .entry-content .ts-film h3 { font-family: var(--ts-text); font-size: var(--ts-step-0); font-weight: 700; margin: 0 0 .25em; letter-spacing: 0; }
.ts-brand .entry-content .ts-film h3 span { color: var(--ts-ink-3); font-weight: 500; }
.ts-brand .entry-content .ts-film p { margin: 0; color: var(--ts-ink-2); }

.ts-brand .entry-content .ts-na, .ts-brand .entry-content .ts-hint, .ts-brand .entry-content .ts-scroll-hint { color: var(--ts-ink-3); font-size: var(--ts-step--1); }
.ts-brand .entry-content .ts-v-ok   { color: #1d6b43; font-weight: 650; }
.ts-brand .entry-content .ts-v-edge { color: #92560c; font-weight: 650; }
.ts-brand .entry-content .ts-v-no   { color: var(--ts-ink-3); }

@media (max-width: 700px) {
  .ts-brand .entry-content h2 { margin-top: 1.7em; }
  .ts-brand .entry-content .ts-lede { max-width: none; }
}