/* UI-kit specific styles for the live site recreations.
   Component styling sits here; raw tokens live in colors_and_type.css. */

.page { display: flex; flex-direction: column; min-height: 100vh; }
.page-main { flex: 1; }

/* ============================================================
   NAV — the chrome that sits on top of every page
   ============================================================ */
.tnu-nav {
  background: var(--tnu-floor);
  color: var(--tnu-chalk);
  padding: 18px var(--tnu-gutter);
  display: flex; align-items: center; gap: 36px;
  position: relative; z-index: 10;
}
/* Phone gutter: 24px sides. Moved here from base.html's inline <style> (30 Oct 2026). */
@media (max-width: 767.98px) {
  .tnu-nav { padding: 14px 24px; }
}
.tnu-nav-links {
  display: flex; gap: 8px; align-items: center;
  font-size: 19px;
  font-weight: var(--tnu-w-semibold);
}
.tnu-nav-links a,
.tnu-nav-item > a {
  color: var(--tnu-chalk);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--tnu-r-pill);
  opacity: 0.85;
  transition: all var(--tnu-dur-fast) var(--tnu-ease);
  white-space: nowrap;
  display: inline-block;
}
.tnu-nav-links a:hover,
.tnu-nav-item:hover > a { opacity: 1; background: var(--tnu-floor-tint); }
.tnu-nav-links a.active,
.tnu-nav-item.active > a {
  opacity: 1;
  color: var(--tnu-ink);
  background: var(--tnu-bib-yellow);
}
.tnu-nav-cta { margin-left: auto; }
/* Scale the nav CTA so the text sits at the same visual weight as the
   19px semibold nav links beside it. The default .tnu-btn is 15px;
   bumping to 18px keeps the pill compact while reading as a peer of
   the nav. */
.tnu-nav-cta .tnu-btn { font-size: 18px; padding: 12px 22px; }
.tnu-nav-cta .tnu-btn i { font-size: 16px; }

/* ---------- Dropdown menus ---------- */
.tnu-nav-item {
  position: relative;
}
.tnu-nav-item > a .tnu-nav-caret {
  font-size: 10px;
  margin-left: 6px;
  opacity: 0.7;
  vertical-align: 1px;
}
.tnu-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  /* Extra padding-top creates the visual gap below the parent link
     WITHOUT a margin gap. The padding is part of the dropdown's
     hover-detection area, so the mouse can cross from the parent
     into the dropdown without losing :hover and snapping shut. */
  padding: 16px 8px 8px 8px;
  margin-top: 0;
  background: var(--tnu-chalk);
  border: var(--tnu-bw) solid var(--tnu-ink);
  border-radius: var(--tnu-r-md);
  box-shadow: var(--tnu-shadow-md);
  z-index: 20;
}
.tnu-nav-item:hover > .tnu-nav-dropdown,
.tnu-nav-item:focus-within > .tnu-nav-dropdown {
  display: block;
}
.tnu-nav-dropdown a {
  display: block;
  color: var(--tnu-ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--tnu-r-sm);
  font-size: 15px;
  font-weight: var(--tnu-w-medium);
  opacity: 1;
  white-space: nowrap;
}
.tnu-nav-dropdown a:hover {
  background: var(--tnu-paper);
  color: var(--tnu-accent-dot);
}
.tnu-nav-dropdown a.active {
  background: var(--tnu-bib-yellow);
  color: var(--tnu-ink);
}

/* ============================================================
   BRAND LOCKUP
   ============================================================ */
.tnu-brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.tnu-brand-disc {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tnu-chalk);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tnu-brand-disc img {
  width: 78%; height: 78%; object-fit: contain;
  display: block;
}
.tnu-brand-name {
  font-weight: var(--tnu-w-bold);
  font-size: 20px;
  letter-spacing: var(--tnu-tr-tight);
  white-space: nowrap;
}
.tnu-brand-name small {
  display: block;
  font-size: 10px;
  font-weight: var(--tnu-w-regular);
  letter-spacing: var(--tnu-tr-widest);
  opacity: 0.6;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ============================================================
   BUTTONS — pill-shaped, chunky, three variants
   ============================================================ */
.tnu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: var(--tnu-r-pill);
  font-family: var(--tnu-font);
  font-weight: var(--tnu-w-semibold);
  font-size: 15px;
  letter-spacing: var(--tnu-tr-tight);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform var(--tnu-dur-fast) var(--tnu-ease),
              background var(--tnu-dur-fast) var(--tnu-ease);
  white-space: nowrap;
}
.tnu-btn:hover { transform: translateY(-2px); }

/* Icons sit on the centre line of the text beside them. Bootstrap Icons lower every glyph by
   0.125em, which left it 1-3px below the capitals next to it in running text (headings, list
   items, bold labels, Bootstrap buttons); 0.04em centres it there. In a tnu-btn the icon is a
   flex item centred as a box, and the default left it 2px high; 0.2em centres it. Other flex
   rows (links, dates, card meta) measure centred at the default. All measured from rendered
   pixels (30 Oct 2026); home/tests/browser/alignment_check.mjs keeps them centred. */
:is(h1, h2, h3, h4, h5, h6, li, strong, .btn) > i.bi::before { vertical-align: -0.04em; }
.tnu-btn > i.bi::before { vertical-align: -0.2em; }
/* Glyphs drawn off-centre in their square need their own value (the only two on the site,
   Oct 2026): list-check sits high, ladder low. */
:is(h1, h2, h3, h4, h5, h6, li, strong, .btn) > i.bi-list-check::before { vertical-align: -0.12em; }
:is(h1, h2, h3, h4, h5, h6, li, strong, .btn) > i.bi-ladder::before { vertical-align: 0.02em; }
.tnu-btn-lg { padding: 20px 32px; font-size: 17px; }
.tnu-btn-sm { padding: 10px 18px; font-size: 13px; }
.tnu-btn-pink   { background: var(--tnu-bib-pink); color: var(--tnu-chalk); }
.tnu-btn-pink:hover { background: var(--tnu-bib-pink-dk); }
.tnu-btn-yellow { background: var(--tnu-bib-yellow); color: var(--tnu-ink); }
.tnu-btn-yellow:hover { background: var(--tnu-bib-yellow-dk); }
.tnu-btn-ink    { background: var(--tnu-ink); color: var(--tnu-chalk); }
.tnu-btn-ink:hover { background: var(--tnu-floor); }
.tnu-btn-chalk  { background: var(--tnu-chalk); color: var(--tnu-ink); }
.tnu-btn-outline {
  background: transparent;
  color: var(--tnu-ink);
  border: var(--tnu-bw) solid var(--tnu-ink);
  padding: 14px 24px;
}
.tnu-btn-outline-chalk {
  background: transparent;
  color: var(--tnu-chalk);
  border: var(--tnu-bw) solid var(--tnu-chalk);
  padding: 14px 24px;
}
.tnu-btn-outline-chalk:hover { background: var(--tnu-chalk); color: var(--tnu-ink); }
/* Matched -lg outline: take 2px off padding to compensate for the border so
   it ends up the same overall height as a filled tnu-btn-lg. */
.tnu-btn-outline-chalk.tnu-btn-lg,
.tnu-btn-outline.tnu-btn-lg { padding: 18px 30px; font-size: 17px; }
.tnu-btn-ghost {
  background: transparent;
  color: var(--tnu-chalk);
  padding: 14px 18px;
}

/* ============================================================
   POSITION BIB — the chip system
   ============================================================ */
.tnu-bib {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-weight: var(--tnu-w-bold);
  font-size: 18px;
  font-family: var(--tnu-font);
  letter-spacing: var(--tnu-tr-tight);
  flex-shrink: 0;
}
.tnu-bib-sm { width: 32px; height: 32px; font-size: 12px; }
.tnu-bib-lg { width: 72px; height: 72px; font-size: 26px; }
.tnu-bib-xl { width: 96px; height: 96px; font-size: 36px; }
.tnu-bib--GS, .tnu-bib--GA       { background: var(--tnu-bib-pink);   color: var(--tnu-chalk); }
.tnu-bib--WA, .tnu-bib--C,
.tnu-bib--WD                     { background: var(--tnu-bib-yellow); color: var(--tnu-ink);   }
.tnu-bib--GD, .tnu-bib--GK       { background: var(--tnu-bib-teal);   color: var(--tnu-chalk); }

/* ============================================================
   TAG / EYEBROW PILL — small label above a heading
   ============================================================ */
.tnu-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--tnu-r-pill);
  font-size: 11px;
  font-weight: var(--tnu-w-semibold);
  letter-spacing: var(--tnu-tr-widest);
  text-transform: uppercase;
}
.tnu-tag-floor   { background: var(--tnu-floor); color: var(--tnu-chalk); }
.tnu-tag-pink    { background: var(--tnu-bib-pink); color: var(--tnu-chalk); }
.tnu-tag-yellow  { background: var(--tnu-bib-yellow); color: var(--tnu-ink); }
.tnu-tag-outline { background: transparent; color: var(--tnu-ink); border: 1.5px solid var(--tnu-ink); }
.tnu-tag-success { background: var(--tnu-success); color: var(--tnu-chalk); }
.tnu-tag-signal  { background: var(--tnu-signal); color: var(--tnu-chalk); }

/* ============================================================
   PILLAR CARD — chalk-line bordered card with big numeral
   ============================================================ */
.tnu-pillar {
  background: var(--tnu-chalk);
  border: var(--tnu-bw) solid var(--tnu-ink);
  border-radius: var(--tnu-r-lg);
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--tnu-dur-fast) var(--tnu-ease);
}
.tnu-pillar:hover { transform: translateY(-4px); }
.tnu-pillar::before,
.tnu-pillar::after {
  content: ''; position: absolute; left: 24px; right: 24px; height: 2px; background: var(--tnu-ink);
}
.tnu-pillar::before { top: 24px; }
.tnu-pillar::after  { bottom: 24px; }
.tnu-pillar-num {
  font-size: 88px;
  font-weight: var(--tnu-w-bold);
  line-height: var(--tnu-lh-tight);
  letter-spacing: -0.04em;
  color: var(--tnu-ink);
  font-feature-settings: 'tnum';
  margin: 0 0 4px;
  display: flex; align-items: baseline; gap: 10px;
}
.tnu-pillar-num-spot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tnu-accent-dot);
}
.tnu-pillar-title {
  font-size: var(--tnu-h3);
  font-weight: var(--tnu-w-bold);
  margin: 0 0 12px;
  letter-spacing: var(--tnu-tr-tight);
}
.tnu-pillar-title-lead {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 8px;
  margin-bottom: 16px;
  max-width: none;
  text-wrap: balance;  /* wraps when the column is narrow; nowrap ran under the disc at 769-1,350px */
}
@media (max-width: 768px) {
  .tnu-pillar-title-lead { font-size: 32px; }
}
.tnu-pillar-body {
  font-size: var(--tnu-text-base);
  color: var(--tnu-ink-3);
  margin: 0 0 20px;
  max-width: 380px;
}
/* Optional two-column variant — title/body on the left, an
   infographic block on the right. Add .tnu-pillar--info to the
   card and wrap the text content in .tnu-pillar-content. */
.tnu-pillar--info {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: center;  /* the disc sits level with the middle of the text, not the top of the title */
}
.tnu-pillar-content { min-width: 0; }
.tnu-pillar-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding-top: 8px;
}
.tnu-pillar-disc {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: var(--tnu-bw) solid var(--tnu-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.tnu-pillar-disc i {
  font-size: 44px;
  line-height: 1;
}
.tnu-pillar-disc-num {
  font-size: 44px;
  font-weight: var(--tnu-w-bold);
  font-feature-settings: 'tnum';
  letter-spacing: -0.04em;
  line-height: 1;
}
.tnu-pillar-stat-label {
  font-size: 12px;
  font-weight: var(--tnu-w-semibold);
  letter-spacing: var(--tnu-tr-widest);
  text-transform: uppercase;
  color: var(--tnu-ink-3);
}
@media (max-width: 768px) {
  .tnu-pillar--info {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tnu-pillar-visual {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 18px;
  }
  .tnu-pillar-disc { width: 96px; height: 96px; }
  .tnu-pillar-disc i { font-size: 32px; }
  .tnu-pillar-disc-num { font-size: 32px; }
}

.tnu-pillar-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--tnu-w-semibold);
  color: var(--tnu-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--tnu-ink);
  padding-bottom: 2px;
}

/* ============================================================
   RULE CHIP — for the rules-listing grid
   ============================================================ */
.tnu-rule-chip {
  display: block;
  background: rgba(250,247,239,0.06);
  border: 1px solid rgba(250,247,239,0.12);
  border-radius: var(--tnu-r-md);
  padding: 18px 16px;
  text-decoration: none;
  color: var(--tnu-chalk);
  transition: all var(--tnu-dur-fast) var(--tnu-ease);
}
.tnu-rule-chip:hover { background: rgba(255,210,63,0.1); border-color: var(--tnu-bib-yellow); }
.tnu-rule-chip-num {
  font-size: 28px;
  font-weight: var(--tnu-w-bold);
  color: var(--tnu-bib-yellow);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.tnu-rule-chip-title {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.3;
}
/* Light variant (on paper) — horizontal layout: number on the left,
   readable title to its right, centred on the number (a baseline row left the
   smaller title sitting low, with more space above it than below). */
.tnu-rule-chip-light {
  background: var(--tnu-chalk);
  border: 2px solid var(--tnu-ink);
  color: var(--tnu-ink);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}
.tnu-rule-chip-light:hover { background: var(--tnu-bib-yellow); }
.tnu-rule-chip-light .tnu-rule-chip-num {
  color: var(--tnu-accent-dot);
  flex-shrink: 0;
  font-size: 28px;
}
.tnu-rule-chip-light .tnu-rule-chip-title {
  font-size: 18px;
  font-weight: var(--tnu-w-semibold);
  color: var(--tnu-ink);
  opacity: 1;
  margin-top: 0;
  line-height: 1.25;
  letter-spacing: var(--tnu-tr-tight);
}

/* ============================================================
   STEP CARD — numbered step on a checklist
   ============================================================ */
.tnu-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  background: var(--tnu-chalk);
  border: var(--tnu-bw) solid var(--tnu-ink);
  border-radius: var(--tnu-r-md);
  overflow: hidden;
}
.tnu-step-n {
  background: var(--tnu-bib-yellow);
  color: var(--tnu-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  font-weight: var(--tnu-w-bold);
  font-feature-settings: 'tnum';
  border-right: var(--tnu-bw) solid var(--tnu-ink);
}
.tnu-step-body { padding: 18px 24px; font-size: var(--tnu-text-base); line-height: var(--tnu-lh-normal); }
.tnu-step-body strong { color: var(--tnu-ink); font-weight: var(--tnu-w-bold); }

/* ============================================================
   DEFINITION CARD — the chalk-stripe definition box
   ============================================================ */
.tnu-def {
  background: var(--tnu-chalk);
  border: var(--tnu-bw) solid var(--tnu-ink);
  border-radius: var(--tnu-r-md);
  padding: 24px;
  position: relative; overflow: hidden;
}
.tnu-def::before,
.tnu-def::after {
  content: ''; position: absolute; left: 20px; right: 20px; height: 2px; background: var(--tnu-ink);
}
.tnu-def::before { top: 18px; }
.tnu-def::after  { bottom: 18px; }
.tnu-def-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: var(--tnu-w-semibold);
  letter-spacing: var(--tnu-tr-wider);
  text-transform: uppercase;
  color: var(--tnu-ink-3);
  margin: 6px 0 12px;
}
.tnu-def-tag::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tnu-accent-dot);
}
.tnu-def-title {
  font-size: var(--tnu-h4);
  font-weight: var(--tnu-w-bold);
  margin: 0 0 8px;
}
.tnu-def-body {
  font-size: 15px;
  color: var(--tnu-ink-3);
}

/* ============================================================
   CALLOUT — coloured panel for warnings, key points, safety
   ============================================================ */
.tnu-callout {
  border-radius: var(--tnu-r-md);
  padding: 24px 28px;
  display: flex; gap: 18px;
  align-items: flex-start;
}
.tnu-callout-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.tnu-callout-body { font-size: var(--tnu-text-base); line-height: var(--tnu-lh-normal); }
.tnu-callout-label {
  font-weight: var(--tnu-w-bold);
  font-size: 11px;
  letter-spacing: var(--tnu-tr-widest);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
  opacity: 0.9;
}
.tnu-callout--info    { background: var(--tnu-floor);     color: var(--tnu-chalk); }
.tnu-callout--info    .tnu-callout-icon { background: var(--tnu-chalk); color: var(--tnu-floor); }
.tnu-callout--warning { background: var(--tnu-bib-yellow); color: var(--tnu-ink); }
.tnu-callout--warning .tnu-callout-icon { background: var(--tnu-ink); color: var(--tnu-bib-yellow); }
.tnu-callout--danger  { background: var(--tnu-signal);    color: var(--tnu-chalk); }
.tnu-callout--danger  .tnu-callout-icon { background: var(--tnu-chalk); color: var(--tnu-signal); }
.tnu-callout--success { background: var(--tnu-success);   color: var(--tnu-chalk); }
.tnu-callout--success .tnu-callout-icon { background: var(--tnu-chalk); color: var(--tnu-success); }
.tnu-callout--pink    { background: var(--tnu-bib-pink);  color: var(--tnu-chalk); }
.tnu-callout--pink    .tnu-callout-icon { background: var(--tnu-chalk); color: var(--tnu-bib-pink); }

/* ============================================================
   COMPARISON ROW — permitted / not permitted side-by-side
   ============================================================ */
.tnu-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 24px 0;
}
.tnu-compare-card {
  background: var(--tnu-chalk);
  border: var(--tnu-bw) solid;
  border-radius: var(--tnu-r-md);
  padding: 24px;
}
.tnu-compare-card.good { border-color: var(--tnu-success); }
.tnu-compare-card.bad  { border-color: var(--tnu-signal); }
.tnu-compare-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--tnu-r-pill);
  font-size: 12px;
  font-weight: var(--tnu-w-bold);
  letter-spacing: var(--tnu-tr-widest);
  text-transform: uppercase;
  color: var(--tnu-chalk);
  margin-bottom: 14px;
}
.tnu-compare-card.good .tnu-compare-pill { background: var(--tnu-success); }
.tnu-compare-card.bad  .tnu-compare-pill { background: var(--tnu-signal); }
.tnu-compare-card p {
  font-size: 15px;
  line-height: var(--tnu-lh-normal);
  margin: 0;
  color: var(--tnu-ink-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.tnu-footer {
  --tnu-footer-watermark-size: 320px;
  --tnu-footer-watermark-offset: -80px;
  --tnu-footer-watermark-visible-width: 240px;
  --tnu-footer-watermark-line-alpha-left: 75px;
  --tnu-footer-divider-clearance: 0px;
  background: var(--tnu-floor-dk);
  color: var(--tnu-chalk);
  padding: 64px var(--tnu-gutter) 32px;
  position: relative;
  overflow: hidden;
  /* isolation keeps the footer watermark and divider layers scoped
     to this component's stacking context. */
  isolation: isolate;
}
.tnu-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(6, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.tnu-footer-col h5 {
  font-size: 19px;
  font-weight: var(--tnu-w-bold);
  letter-spacing: var(--tnu-tr-tight);
  text-transform: none;
  color: var(--tnu-bib-yellow);
  margin: 0 0 14px;
}
.tnu-footer-col a {
  display: block;
  color: var(--tnu-chalk);
  text-decoration: none;
  opacity: 0.75;
  padding: 5px 0;
  font-size: 15px;
}
.tnu-footer-col a:hover { opacity: 1; }
.tnu-footer-bottom {
  position: relative;
  padding-top: 24px;
  font-size: 12px;
  opacity: 0.5;
  line-height: var(--tnu-lh-normal);
}
.tnu-footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: max(
    0px,
    calc(100% + var(--tnu-gutter) - (var(--tnu-footer-watermark-visible-width) - var(--tnu-footer-watermark-line-alpha-left)) - var(--tnu-footer-divider-clearance))
  );
  height: 1px;
  background: rgba(250,247,239,0.12);
  pointer-events: none;
}
.tnu-footer-watermark {
  position: absolute;
  right: var(--tnu-footer-watermark-offset);
  bottom: var(--tnu-footer-watermark-offset);
  width: var(--tnu-footer-watermark-size); height: var(--tnu-footer-watermark-size);
  opacity: 0.1;
  filter: invert(1);
  pointer-events: none;
  /* Keep the translucent watermark above the divider layer. */
  z-index: 2;
}
@media (max-width: 1199.98px) {
  .tnu-footer {
    --tnu-footer-watermark-line-alpha-left: 92.5px;
  }
}

/* ============================================================
   UTILITY — page container
   ============================================================ */
.tnu-container { padding-left: var(--tnu-gutter); padding-right: var(--tnu-gutter); }

/* ============================================================
   NAV — mobile toggle + dev-mode links + responsive collapse
   These extend the base .tnu-nav rules above with site-specific
   behaviour (hamburger toggle, superuser-only links).
   ============================================================ */
.tnu-nav-toggle {
  display: none;
  background: transparent;
  color: var(--tnu-chalk);
  border: var(--tnu-bw-thin) solid var(--tnu-floor-line);
  border-radius: var(--tnu-r-sm);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  font-size: 22px;
  margin-left: auto;
  cursor: pointer;
}
.tnu-nav-toggle:hover { background: var(--tnu-floor-tint); }

.tnu-nav-dev {
  /* Visually mark dev/admin links so they don't blend with public nav */
  font-style: italic;
  opacity: 0.6;
}
.tnu-nav-dev:hover { opacity: 0.9; }

/* ============================================================
   FOOTER — tagline paragraph beside the brand lockup
   ============================================================ */
.tnu-footer-tagline {
  margin-top: 16px;
  opacity: 0.7;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.55;
}
/* Social row under the tagline, built from home/social.py SOCIAL_LINKS. */
.tnu-footer-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}
.tnu-footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: var(--tnu-bw-thin) solid var(--tnu-floor-line);
  border-radius: var(--tnu-r-pill);
  color: var(--tnu-chalk);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
  transition: background var(--tnu-dur-fast) var(--tnu-ease);
}
.tnu-footer-social a:hover { opacity: 1; background: var(--tnu-floor-tint); }
.tnu-footer-social i { font-size: 18px; color: var(--tnu-bib-yellow); }

.tnu-footer-bottom a {
  color: var(--tnu-bib-yellow);
  text-decoration: none;
  opacity: 0.7;
}
.tnu-footer-bottom a:hover { opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Eleven items since Match Day (November 2026). From full-HD up the row keeps
   its full-size type with tighter spacing; between 1366px and full-HD it
   switches to a compact tier, with the CTA hidden below 1600px. Below 1366px it
   collapses to the hamburger, which keeps the base spacing above. Sam chose
   tighter spacing over moving or renaming anything (12 Nov 2026); at the
   narrowest width of each tier about 20-30px is left over (1366, 1600, 1920).
   Re-measure every width from 1366 up after any nav change: see the verify
   skill's overflow gotcha. */
@media (min-width: 1920px) {
  .tnu-nav { gap: 24px; }
  .tnu-nav-links { gap: 4px; }
  .tnu-nav-links > a, .tnu-nav-item > a { padding: 10px 13px; }
}
@media (min-width: 1366px) and (max-width: 1919.98px) {
  .tnu-nav { gap: 16px; }
  .tnu-nav-links { gap: 0; font-size: 16px; }
  .tnu-nav-links > a, .tnu-nav-item > a { padding: 8px 8px; }
  .tnu-nav-item > a .tnu-nav-caret { margin-left: 4px; }
}
@media (min-width: 1366px) and (max-width: 1599.98px) {
  .tnu-nav-cta { display: none; }
}
@media (max-width: 1365.98px) {
  .tnu-nav { flex-wrap: wrap; }
  /* Brand, then the CTA pushed right, then the toggle at the far right. */
  .tnu-nav-toggle { display: inline-flex; order: 3; margin-left: 0; }
  .tnu-nav-links {
    flex-basis: 100%;
    order: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-top: 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tnu-dur) var(--tnu-ease);
  }
  .tnu-nav.tnu-nav-open .tnu-nav-links {
    max-height: 1200px;
    overflow-y: auto;
  }
  .tnu-nav-cta { order: 2; }

  /* Dropdowns expand inline on mobile — no hover needed */
  .tnu-nav-item > a .tnu-nav-caret { display: none; }
  .tnu-nav-dropdown {
    display: block;
    position: static;
    margin: 4px 0 8px 16px;
    padding: 4px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 0;
  }
  .tnu-nav-dropdown a {
    color: var(--tnu-chalk);
    opacity: 0.7;
    font-size: 14px;
    padding: 6px 14px;
  }
  .tnu-nav-dropdown a:hover { background: var(--tnu-floor-tint); color: var(--tnu-chalk); opacity: 1; }
  .tnu-nav-dropdown a.active { background: var(--tnu-bib-yellow); color: var(--tnu-ink); opacity: 1; }
}

@media (max-width: 768px) {
  .tnu-container { padding-left: var(--tnu-gutter-mobile); padding-right: var(--tnu-gutter-mobile); }
  .tnu-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
  /* Phones: the toggle stays beside the brand; the CTA wraps to the next row. */
  .tnu-nav-toggle { order: 1; margin-left: auto; }
  .tnu-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Clip embed (clips/_clip.html via {% clip %}) ----
   Centred, constrained video figure with a quiet caption. Qualified with
   figure so it also beats .tnu-article-body figure inside blog posts. */
figure.tnu-clip,
.tnu-article-body figure.tnu-clip {
  margin: 32px auto;
  max-width: 640px;
}
.tnu-clip video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tnu-r-md);
  border: var(--tnu-bw-thin) solid var(--tnu-border);
  background: var(--tnu-ink);
}
.tnu-clip figcaption {
  margin-top: 8px;
  font-size: var(--tnu-text-sm);
  color: var(--tnu-ink-3);
  text-align: center;
}
/* Sits directly below the video, above the caption. A distinct grey —
   lighter than body ink, darker than the muted caption — so the label
   reads as a reference, not part of the prose. */
.tnu-clip-number {
  margin-top: var(--tnu-space-caption);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #47605D;
  text-align: center;
}
.tnu-clip-number + figcaption { margin-top: 4px; }

/* ---- Hand-signal mat ----
   The hand-signal illustrations (media/hand-signals/) are drawn on chalk; a box that holds one
   uses the same colour so the image edge does not show (Bootstrap bg-light is a cooler white). */
.tnu-signal-mat { background: var(--tnu-chalk); }

/* ---- YouTube video card (home/_youtube_video.html via {% youtube_video %}) ----
   A link-out card, never an embedded player. Colours are restated on every
   link so Bootstrap's link colour inside rule-page card bodies doesn't leak in.
   No box-shadow: the hard 0 2px 0 --tnu-shadow-sm made the bottom edge look thicker
   than the rest, and Sam wants an even outline all round (30 Oct 2026;
   test_static_assets.CardOutlineTests guards it). */
.tnu-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;  /* placed by the page's flow: 12 below its introduction, a card gap after it */
  background: var(--tnu-chalk);
  border: var(--tnu-bw-thin) solid var(--tnu-border);
  border-radius: var(--tnu-r-md);
  overflow: hidden;
  font-family: var(--tnu-font);
}
.tnu-video-card-thumb {
  position: relative;
  display: block;
  background: var(--tnu-floor);
}
.tnu-video-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* Bottom-right, clear of the title lettering on the thumbnail. */
.tnu-video-card-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tnu-signal);
  color: var(--tnu-chalk);
  font-size: 30px;
  box-shadow: var(--tnu-shadow-md);
  transition: transform var(--tnu-dur-fast) var(--tnu-ease);
}
.tnu-video-card-thumb:hover .tnu-video-card-play { transform: scale(1.08); }
.tnu-video-card-body {
  padding: var(--tnu-pad-card-y) var(--tnu-pad-card-x);  /* like a card body */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tnu-video-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: var(--tnu-eyebrow);
  font-weight: var(--tnu-w-semibold);
  letter-spacing: var(--tnu-tr-wider);
  text-transform: uppercase;
  color: var(--tnu-ink-3);
}
.tnu-video-card-eyebrow i { font-size: 16px; color: var(--tnu-signal); }
.tnu-video-card-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: var(--tnu-w-bold);
  letter-spacing: var(--tnu-tr-tight);
  line-height: var(--tnu-lh-snug);
}
.tnu-video-card-title a { color: var(--tnu-ink); text-decoration: none; }
.tnu-video-card-title a:hover { text-decoration: underline; }
.tnu-video-card-summary {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: var(--tnu-lh-normal);
  color: var(--tnu-ink-2);
}
.tnu-video-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.tnu-video-card-actions .tnu-btn { padding: 12px 20px; color: var(--tnu-chalk); }
.tnu-video-card-channel {
  font-size: 14px;
  font-weight: var(--tnu-w-medium);
  color: var(--tnu-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tnu-video-card-channel:hover { color: var(--tnu-ink); }
@media (min-width: 640px) {
  /* The thumbnail is a title card, so it keeps 16:9 rather than cropping to the body height. */
  .tnu-video-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .tnu-video-card-thumb { display: flex; align-items: center; }
}
.tnu-video-card:last-child { margin-bottom: 0; }