/* =========================================================
   BREAKFAST TEXT — layout
   Reset, base, grid/container, masthead, footer, soft keys.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
:where(h1, h2, h3, h4) {
  font-family: var(--font); line-height: 1.1; font-weight: 700;
  letter-spacing: 0.01em; overflow-wrap: break-word; text-transform: uppercase;
}
::selection { background: var(--tt-yellow); color: var(--tt-black); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); }
.container--prose { max-width: var(--maxw-prose); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section { padding-block: 22px; border-bottom: 1px solid #232326; }
.section--tight { padding-block: var(--s-8); }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--tt-blue); color: var(--tt-black); border-block: var(--border); }
.section--ink .section__title, .section--ink :where(h1,h2,h3,h4) { color: var(--tt-black); }
.kicker--invert, .section__lead--invert { color: rgba(5,5,5,0.75); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: var(--z-skip);
  background: var(--tt-yellow); color: var(--tt-black); border: var(--border);
  padding: var(--s-2) var(--s-4); font-weight: 700; text-transform: uppercase;
  transition: top var(--motion);
}
.skip-link:focus { top: var(--s-2); }

/* =========================================================
   Masthead — the ENTIRE persistent chrome. No conventional logo/menu
   bar sits underneath it: the page number, brand and live clock ARE
   the navigation system, backed by soft keys and the in-page index.
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--tt-black); border-bottom: 2px solid var(--tt-blue); }
.tt-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--header-h); padding-inline: var(--s-6);
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
}
.tt-masthead__page { color: var(--tt-black); background: var(--tt-yellow); padding: 3px var(--s-2); letter-spacing: 0.04em; }
.tt-masthead__brand { color: var(--tt-white); letter-spacing: 0.12em; font-weight: 800; }
.tt-masthead__brand::before { content: "▸ "; color: var(--tt-cyan); }
.tt-masthead__clock { color: var(--tt-green); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.tt-masthead__clock[data-live="true"]::before { content: "● "; color: var(--tt-green); }
@media (max-width: 560px) {
  .tt-masthead { padding-inline: var(--s-4); font-size: 0.78rem; flex-wrap: wrap; row-gap: 2px; min-height: auto; padding-block: var(--s-2); }
  .tt-masthead__brand { order: 3; flex-basis: 100%; font-size: 0.72rem; }
}

/* ---------- Announcement banner ---------- */
.announcement { background: var(--tt-blue); color: var(--tt-white); text-align: center; padding: var(--s-2) var(--s-4); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; border-bottom: 2px solid var(--tt-black); }

/* =========================================================
   Soft keys — the coloured footer control row (RED/GREEN/YELLOW/CYAN)
   ========================================================= */
.tt-softkeys { width: 100%; max-width: var(--maxw); padding-inline: var(--s-6); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; border-block: 1px solid var(--tt-white); background: var(--tt-black); }
.tt-softkey { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 14px; font-weight: 700; text-transform: uppercase; font-size: 0.76rem; color: var(--tt-white); }
.tt-softkey:last-child { border-right: 0; }
.tt-softkey__dot { width: 16px; height: 16px; border-radius: 50%; }
.tt-softkey__label { font-weight: 800; }
.tt-softkey small { font-weight: 700; opacity: 1; font-size: 0.72rem; color: var(--tt-white); white-space: nowrap; }
.tt-softkey--red .tt-softkey__dot { background-color: var(--tt-red); }
.tt-softkey--red .tt-softkey__label { color: var(--tt-red); }
.tt-softkey--green .tt-softkey__dot { background-color: var(--tt-green); }
.tt-softkey--green .tt-softkey__label { color: var(--tt-green); }
.tt-softkey--yellow .tt-softkey__dot { background-color: var(--tt-yellow); }
.tt-softkey--yellow .tt-softkey__label { color: var(--tt-yellow); }
.tt-softkey--cyan .tt-softkey__dot { background-color: var(--tt-cyan); }
.tt-softkey--cyan .tt-softkey__label { color: var(--tt-cyan); }
.tt-softkey:focus-visible, .tt-softkey:hover { outline: 3px solid var(--tt-white); outline-offset: -3px; }
@media (max-width: 560px) { .tt-softkeys { display: grid; grid-template-columns: repeat(2, 1fr); } .tt-softkey { font-size: 0.68rem; min-height: 34px; padding-inline: 8px; } }

/* ---------- P900 transmission end-cap ---------- */
.site-footer { background: var(--tt-black); border-top: 2px solid var(--tt-white); padding-top: 14px; margin-top: 22px; }
.tt-service-footer, .tt-ticker--final { width: 100%; max-width: var(--maxw); padding-inline: var(--s-6); margin-inline: auto; }
.tt-service-footer { font-family: var(--mono); }
.tt-service-footer__head { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 8px 14px; background: var(--tt-blue); color: var(--tt-white); text-transform: uppercase; border-block: 1px solid var(--tt-white); }
.tt-service-footer__head strong { color: var(--tt-yellow); }
.tt-service-footer__head b { color: var(--tt-cyan); }
.tt-service-footer__index { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; border-bottom: 1px dotted var(--tt-grey); }
.tt-service-footer__index a { display: flex; gap: 12px; padding: 5px 14px; color: var(--tt-cyan); text-transform: uppercase; }
.tt-service-footer__index a b, .tt-service-footer__utility b { color: var(--tt-yellow); }
.tt-service-footer__index a:hover span, .tt-service-footer__utility a:hover { color: var(--tt-yellow); text-decoration: underline; }
.tt-service-footer__status { display: flex; justify-content: space-between; gap: 20px; padding: 11px 14px; color: var(--tt-white); text-transform: uppercase; border-bottom: 1px dotted var(--tt-grey); }
.tt-service-footer__status a { color: var(--tt-cyan); }
.tt-service-footer__availability { color: var(--tt-green); }
.tt-service-footer__availability i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--tt-green); }
.tt-service-footer__utility { display: flex; justify-content: space-between; gap: 20px; padding: 10px 14px; color: var(--tt-body); font-size: .75rem; text-transform: uppercase; }
.tt-service-footer__utility nav { display: flex; flex-wrap: wrap; gap: 18px; }
.tt-service-footer__utility a { color: var(--tt-cyan); }
.tt-service-footer__utility .tt-display-toggle { margin: 0; }
.tt-ticker--final { display: flex; justify-content: space-between; gap: 16px; margin-top: 0; text-align: left; }
.tt-ticker--final b { color: var(--tt-yellow); }
@media (max-width: 720px) { .tt-service-footer__index { grid-template-columns: repeat(2, 1fr); } .tt-service-footer__status, .tt-service-footer__utility { display: grid; gap: 8px; } .tt-service-footer__utility nav { gap: 10px; } .tt-service-footer__head { grid-template-columns: 1fr auto; } .tt-service-footer__head span { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; inset-inline: var(--s-4); bottom: var(--s-4); z-index: var(--z-sticky); background: var(--tt-panel); border: var(--border); padding: var(--s-6); display: none; gap: var(--s-4); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.cookie-banner[data-visible="true"] { display: flex; }
.cookie-banner__actions { display: flex; gap: var(--s-3); }

/* ---------- Reduced motion: the single global switch-off ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
[data-motion="off"] * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }