/* Notasyon — shared base. Palette: Kobalt. Every page links this after /fonts/fonts.css.
   Three voices:
     institution — Plex Sans on paper/ink/cobalt: the page, its grids and tables
     machine     — Plex Mono: labels, readouts, data
     human       — Newsreader italic: the student's hand and Notasyon's own words */
:root {
  color-scheme: light;
  --paper: #ecece8;
  --sheet: #f5f5f2;
  --ink: #121316;
  --graphite: #5b5e64;
  --rule: #c4c4bd;
  --signal: #2a3cf0;
  --on-signal: #ffffff;
  --err: #b42318;
  --pencil: #6b6e74;
  /* ScanCopy's confidence bands, reused in the calibration strip */
  --hi: #37d67a; --mid: #ffb020; --lo: #ff5a5f; --sel: #00e5ff; --phos: #c8f53a;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --lh: 1.6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/var(--lh) var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--signal); color: var(--on-signal); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Language */
html:not([lang="tr"]) [data-l="tr"],
html:not([lang="en"]) [data-l="en"] { display: none !important; }

/* Muted calibration scale: mineral colors resolving into paper. */
.cal { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; height: 6px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.cal i { display: block; }
.cal i:nth-child(1) { background: #303a4b; }
.cal i:nth-child(2) { background: #4e5f7c; }
.cal i:nth-child(3) { background: #7185a0; }
.cal i:nth-child(4) { background: #9eabb5; }
.cal i:nth-child(5) { background: #c4cac9; }
.cal i:nth-child(6) { background: #9daa9c; }
.cal i:nth-child(7) { background: #718677; }
.cal i:nth-child(8) { background: #a2957f; }
.cal i:nth-child(9) { background: #887c70; }
.cal i:nth-child(10) { background: #625f5d; }
.cal i:nth-child(11) { background: #4f5861; }
.cal i:nth-child(12) { background: #768087; }
.cal i:nth-child(13) { background: #9ea6a6; }
.cal i:nth-child(14) { background: #bcc1bd; }
.cal i:nth-child(15) { background: #d3d6d0; }
.cal i:nth-child(16) { background: #e2e4de; }

/* Instrument bar */
.bar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--ink); }
.bar-row { max-width: 1140px; margin: 0 auto; padding: 0 40px; height: 64px; display: flex; align-items: center; gap: 20px; transition: height .35s ease; }
.scrolled .bar-row { height: 54px; }
/* Compact instrument nameplate: mark, model designation, purpose. */
.logo { display: block; text-decoration: none; flex: none; width: 220px; color: var(--ink); }
.logo-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.logo img { display: block; width: 167px; height: auto; }
.logo-model { align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--rule); padding-left: 10px; font: 500 10px/1 var(--mono); white-space: nowrap; }
.logo-caption { display: block; padding-top: 5px; font: 500 9px/1.2 var(--mono); letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; }
.scrolled .logo-main { padding-bottom: 4px; }
.scrolled .logo-caption { padding-top: 4px; }
.bar .current {
  order: 2; flex: 1; min-width: 0; text-align: center; font: 400 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--graphite);
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar.scrolled .current.on { opacity: 1; transform: none; }
.tabs { order: 1; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.tabs a {
  font: 500 12px/1 var(--sans); text-decoration: none; padding: 7px 11px 6px; border: 1px solid var(--ink); border-radius: 2px;
  display: inline-flex; flex: none; align-items: center; gap: 7px; background: var(--sheet); white-space: nowrap;
}
.tabs a:hover { background: var(--ink); color: var(--paper); }
.tabs a[aria-current]::before { content: ""; width: 7px; height: 7px; background: var(--signal); border-radius: 50%; }
.bar-status { order: 3; display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
.bar-status .led { width: 7px; height: 7px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 22%, transparent); }
.lang { order: 4; flex: none; margin-left: auto; display: flex; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .06em; }
.lang button {
  font: inherit; color: var(--graphite); background: none; border: 0; padding: 0 0 2px; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent; border-bottom: 1px solid transparent;
}
.lang button::after { content: ""; position: absolute; inset: -14px -8px; }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Links and buttons */
.more {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-signal); background: var(--signal); text-decoration: none; border: 1px solid var(--ink); border-radius: 2px; padding: 11px 14px 10px;
}
.more:hover, .more:focus-visible { filter: brightness(1.1); }

/* Closing title block */
.colossal { grid-column: 1 / -1; margin: 72px 0 0; padding: 28px 0 32px; border-top: 1px solid var(--ink); line-height: 0; }
.colossal img { display: block; width: 100%; height: auto; }

/* Quiet reveal */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.seen { opacity: 1; transform: none; }
@media print { html.js .reveal { opacity: 1 !important; transform: none !important; } .bar { position: static; } }

@media (max-width: 1040px) {
  .bar-row { padding: 0 32px; }
  .bar .current { display: none; }
  .bar-status { display: none; }
}
@media (max-width: 720px) {
  .bar-row { padding: 0 16px; gap: 10px; height: 56px; }
  .scrolled .bar-row { height: 50px; }
  .logo { width: 154px; }
  .logo-main { gap: 7px; padding-bottom: 5px; }
  .logo img { width: 116px; }
  .logo-model { padding-left: 7px; font-size: 8px; }
  .logo-caption { padding-top: 4px; font-size: 7px; letter-spacing: .025em; }
  .tabs { flex: 1; }
  .tabs a { padding: 7px 8px 6px; }
}