/* GFX - the broadcast text-page look for every other page (catalogue, VST3, Lab, Legacy, At a glance, manuals).
   Loaded last in <head>, after tt.css, on <body class="tt">. Legibility first: running text stays in Atkinson
   Hyperlegible at 16-18 px with strong contrast; the VT323 display face is used only large (titles, keys, menu). */
body.tt { font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.tt a { color: var(--ye); }
.tt p, .tt li, .tt dd, .tt td { color: var(--ink-2); }
.tt b, .tt strong { color: var(--ink); }

/* header: a solid black bar, GFX block, menu in the display face */
.tt header.top { background: var(--bg); backdrop-filter: none; border-bottom: 2px solid var(--line); }
.tt .top .badge { border-radius: 0; background: var(--ye); color: var(--bg); font: 400 20px/1 var(--tt); width: 44px; height: 30px; letter-spacing: 1px; }
.tt .top .brand, .tt .top a.home { font: 400 30px/1 var(--tt); color: var(--ye); letter-spacing: 1px; text-decoration: none; }
.tt .top .brand small { font: 400 20px/1 var(--tt); color: var(--ink-3); }
.tt .top .brand em { font: 400 24px/1 var(--tt); color: var(--gr); font-style: normal; margin-left: 6px; }
.tt .top nav { gap: 6px 20px; }
.tt .top nav a { font: 400 24px/1.2 var(--tt); color: var(--cy); text-decoration: none; padding: 0 3px; }
.tt .top nav a:hover, .tt .top nav a:focus-visible { background: var(--cy); color: var(--bg); outline: none; }
.tt .top nav a[aria-current="page"], .tt .top nav a.cur { color: var(--ye); }
.tt .menu-btn { border-radius: 0; background: var(--panel-2); color: var(--ye); border-color: var(--line); }
@media (max-width: 640px) { .tt header.top nav { background: var(--bg); } .tt .top nav a { font-size: 28px; } }

/* titles */
.tt h1, .tt .range h2, .tt main > h1 { font: 400 clamp(40px, 5vw, 56px)/1.05 var(--tt); color: var(--ye); letter-spacing: .5px; }
.tt h2 { font-family: var(--tt); font-weight: 400; color: var(--ye); font-size: 38px; line-height: 1.1; letter-spacing: .5px; }
.tt h3 { color: var(--ink); }
.tt .range h2 .count, .tt h3.split span { font: 400 26px/1 var(--tt); color: var(--ink-3); }
.tt h3.split { font: 400 40px/1.1 var(--tt); color: var(--cy); border-top: 2px solid var(--line); padding-top: 14px; }
.tt .lead, .tt .vlead, .tt .range > .wrap > p { color: var(--ink-2); font-size: 18px; }
.tt .crumb { font: 400 24px/1.2 var(--tt); color: var(--ink-3); }
.tt .crumb a { color: var(--cy); } .tt .crumb b { color: var(--ink); font-weight: 400; }
.tt .stripe { height: 8px; background: linear-gradient(var(--re) 0 25%, var(--ye) 25% 50%, var(--gr) 50% 75%, var(--cy) 75%); }

/* category headings: a coloured band, dark text */
.tt .grid .grp { background: var(--cat); color: var(--bg); border: 0; padding: 4px 12px; margin: 30px 0 0;
  font: 400 30px/1.2 var(--tt); letter-spacing: .5px; text-transform: none; }
.tt .grid .grp:first-child { margin-top: 0; }
.tt .grid .grp span { color: var(--bg); font-size: 26px; opacity: .7; margin-left: 4px; }
.tt .grp .fold::before { font-size: 26px; }
.tt .grp .fold:focus-visible { outline-color: var(--bg); }

/* filter keys and category links */
.tt .filters button, .tt .cats a, .tt .vjump a { font: 400 24px/1 var(--tt); border-radius: 0; padding: 8px 14px;
  background: transparent; color: var(--cy); border: 2px solid var(--cy); text-decoration: none; }
.tt .filters button span { color: inherit; opacity: .7; }
.tt .filters button[aria-pressed="true"], .tt .cats a.on { background: var(--ye); color: var(--bg); border-color: var(--ye); }
.tt .filters button[aria-pressed="true"] span { color: var(--bg); }
.tt .filters button:hover, .tt .cats a:hover, .tt .vjump a:hover { background: var(--cy); color: var(--bg); }

/* cards: square, flat, one hairline; name large and readable */
.tt .card { border-radius: 0; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--cat, var(--cy)); }
.tt .card .shot { background: #000; }
.tt .card h3 { font: 400 32px/1.05 var(--tt); color: var(--ink); }
.tt .tag { font: 400 20px/1 var(--tt); letter-spacing: .5px; color: var(--cat, var(--cy)); }
.tt .card p { font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.tt .card li { border-radius: 0; font-size: 14px; color: var(--ink); background: var(--panel-2); border-color: var(--line); }
.tt .card .file { font-size: 13px; color: var(--ink-3); }
.tt .card .man, .tt .card .dl, .tt .tbl td.n .acts a { font: 400 22px/1 var(--tt); border-radius: 0; padding: 6px 10px; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--ink-3); text-decoration: none; }
.tt .card .man:hover, .tt .card .dl:hover, .tt .tbl td.n .acts a:hover { background: var(--ye); color: var(--bg); border-color: var(--ye); }
.tt .card .man.sys, .tt .tbl td.n .acts a.sys { color: var(--ye); border-color: var(--ye); }
.tt .card .man.vst { color: var(--gr); border-color: var(--gr); }
.tt .card .man.buy { background: var(--ye); color: var(--bg); border-color: var(--ye); }
.tt .card .man.demo { color: var(--ye); border-color: var(--ye); }
.tt .card .man.vst:hover, .tt .card .man.demo:hover { background: var(--ye); color: var(--bg); }
.tt .card li.trio a { color: var(--ye); }

/* notes and boxes */
.tt .sysnote, .tt .warn { border-radius: 0; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ye); color: var(--ink-2); }
.tt code { font-size: 14px; border-radius: 0; background: var(--panel-2); color: var(--ink); border-color: var(--line); }

/* At a glance tables and index */
.tt .tbl { border-radius: 0; border: 1px solid var(--line); }
.tt .tbl th { font: 400 22px/1 var(--tt); letter-spacing: .5px; text-transform: none; color: var(--cy); background: var(--panel-2); }
.tt .tbl td { background: var(--panel); font-size: 16px; color: var(--ink-2); }
.tt .tbl td.n img { border-radius: 0; }
.tt .tbl td.n b { font: 400 30px/1.05 var(--tt); color: var(--ink); }
.tt .grid > a { border-radius: 0; border-top: 4px solid var(--cy); }
.tt .grid > a b { font: 400 32px/1 var(--tt); color: var(--ye); }
.tt .grid > a p { font-size: 16px; color: var(--ink-2); }
.tt .grid > a span { font: 400 24px/1 var(--tt); color: var(--ink-3); }
.tt .grid > a:hover { border-color: var(--ye); }

/* manuals */
.tt .shot { border-radius: 0; }
.tt dl.ctl { border-radius: 0; }
.tt dl.ctl dt { font: 400 24px/1.1 var(--tt); color: var(--cy); letter-spacing: .5px; }
.tt dl.ctl dd { font-size: 16px; }
.tt .cat { font: 400 22px/1 var(--tt); color: var(--ink-3); letter-spacing: .5px; text-transform: none; }
.tt .tagline { font-size: 19px; color: var(--ink-2); }

/* the Lab's tier boxes, Legacy and buttons */
.tt .tier { border-radius: 0; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.tt .tier h3 { font: 400 34px/1.05 var(--tt); color: var(--c); }
.tt .tier h3 small { font: 400 22px/1 var(--tt); color: var(--ink-3); }
.tt .tier .go { font: 400 24px/1 var(--tt); color: var(--c); }
.tt .btn { border-radius: 0; font: 400 24px/1 var(--tt); padding: 10px 16px; }
.tt .btn.primary { background: var(--ye); border-color: var(--ye); color: var(--bg); }
.tt .step { border-radius: 0; }
.tt .lb img { border-radius: 0; }
.tt footer { border-top: 2px solid var(--line); color: var(--ink-3); font-size: 15px; }
.tt footer a { color: var(--ye); }
/* small headers without a menu button (At a glance, manuals): let the menu wrap */
.tt .top .wrap { height: auto; min-height: 56px; flex-wrap: wrap; padding-block: 8px; }
.tt .top nav { flex-wrap: wrap; }
@media (max-width: 640px) { .tt .top .wrap:not(:has(.menu-btn)) nav { margin-left: 0; width: 100%; } }
.tt .sysnote { font-size: 16px; }
.tt .toc a { border-radius: 0; border-top: 3px solid var(--cy); color: var(--ink); }
.tt .toc a { font: 400 26px/1.1 var(--tt); color: var(--ye); }
.tt .toc a span { font: 15px/1.45 var(--body); color: var(--ink-2); margin-top: 4px; }
.tt .toc a:hover { border-color: var(--ye); }
/* the Lab's rubber keys keep their own look (not the outlined text keys of the home page) */
.tt .r48 .key { border: 0; padding: 0; background: transparent; color: inherit; font: 400 12px/1.2 var(--body); letter-spacing: 1.4px; text-transform: uppercase; }
.tt .r48 .key:hover { background: transparent; color: inherit; }


/* Instruments trio headings (JG, 26 Oct 2026) */
.tt .grid .trio { grid-column: 1 / -1; margin: 18px 0 -4px; padding-bottom: 4px; font: 24px/1.1 VT323, monospace; letter-spacing: 1px;
  color: var(--cat); border-bottom: 1px dashed color-mix(in srgb, var(--cat) 40%, transparent); }
.tt .grid .trio small { margin-left: 12px; font: 15px "Atkinson Hyperlegible", sans-serif; letter-spacing: 0; color: #b4b2ad; }
.tt .grid .trio[hidden], .tt .grid .trio.folded { display: none; }