/* Synara. The page is an instrument panel: quiet surfaces, printed legends,
   color only for lamps and keys. Warm Neutral tokens; dark follows the
   system. */

@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --body: #E3E0D9;
  --panel: #F1EEE8;
  --paper: #FBFAF6;
  --well: #E6E2DA;
  --stroke: #CFCAC0;
  --inner: #DDD8CE;
  --well-stroke: #C6C0B4;
  --ink: #1F1E1C;
  --ink2: #5B5750;
  --label: #66625A;
  --key-dark: #2B2A27;
  --key-dark-text: #F4F2ED;
  --key-light: #E9E6DF;
  --key-edge: rgba(0, 0, 0, .28);
  --lamp-orange: #E0561F;
  --lamp-green: #4E9A45;
  --lamp-amber: #D9A21E;
  --lamp-off: #D6D1C6;
  --text-orange: #B8460F;
  --text-green: #2F6A37;
  --text-amber: #8C6410;
  --hl-added: #E4EBDA;
  --hl-changed: #F2E4C0;
  --hl-check: #F5DED7;

  --legend: "D-DIN", Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --key-radius: 7px;
  --gutter: 16px;
  --max: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body: #141312;
    --panel: #1D1C1A;
    --paper: #232220;
    --well: #181715;
    --stroke: #34322E;
    --inner: #2C2A27;
    --well-stroke: #3E3B36;
    --ink: #EDEAE3;
    --ink2: #BDB7AB;
    --label: #A39D92;
    --key-dark: #E9E6DF;
    --key-dark-text: #1F1E1C;
    --key-light: #2A2926;
    --key-edge: rgba(0, 0, 0, .6);
    --lamp-orange: #F06A2C;
    --lamp-green: #58AC4E;
    --lamp-amber: #E2AE2C;
    --lamp-off: #3A3834;
    --text-orange: #FF9A62;
    --text-green: #8BCB7F;
    --text-amber: #E6C168;
    --hl-added: #26331F;
    --hl-changed: #3A3120;
    --hl-check: #3D2620;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--body);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-orange); }
:focus-visible { outline: 2px solid var(--lamp-orange); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--key-dark); color: var(--key-dark-text);
  padding: 8px 12px; border-radius: var(--key-radius);
}
.skip:focus { left: 8px; z-index: 10; }

/* Legends: printed on the panel, never shouted */
.legend {
  font-family: var(--legend);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--label);
}
.legend.ink { color: var(--ink); }
.legend.orange { color: var(--text-orange); }
.legend.green { color: var(--text-green); }
.legend.amber { color: var(--text-amber); }

.readout {
  font-family: var(--legend);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}

/* Lamps */
.lamp {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lamp-off);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13);
  flex: none;
}
.lamp.orange { background: var(--lamp-orange); }
.lamp.green { background: var(--lamp-green); }
.lamp.amber { background: var(--lamp-amber); }
.lamped { display: inline-flex; align-items: center; gap: 8px; }

/* Keys: flat caps with a hard bottom edge */
.key {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  min-height: 52px; padding: 0 18px;
  border-radius: var(--key-radius);
  background: var(--key-dark); color: var(--key-dark-text);
  box-shadow: 0 2px 0 var(--key-edge);
  text-decoration: none;
  font-family: var(--legend); font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out, opacity 120ms;
  -webkit-tap-highlight-color: transparent;
}
.key small {
  font-size: 9.5px; letter-spacing: .14em; font-weight: 700; opacity: .72;
}
.key:hover { color: var(--key-dark-text); opacity: .92; }
.key:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-edge); }
.key.light {
  background: var(--key-light); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--well-stroke), 0 2px 0 var(--key-edge);
}
.key.light:hover { color: var(--ink); }
.key.light:active { box-shadow: inset 0 0 0 1px var(--well-stroke), 0 0 0 var(--key-edge); }
.keys { display: flex; flex-wrap: wrap; gap: 12px; }

/* Modules */
.module {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 20px 22px;
}
.module-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 20px; margin-bottom: 16px;
}
.module-head .left { display: flex; align-items: baseline; gap: 14px; }
.well {
  background: var(--well);
  border: 1px solid var(--well-stroke);
  border-radius: 4px;
}
.paper {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}
.rule { height: 1px; background: var(--inner); border: 0; margin: 0; }

/* Header: the instrument's top strip */
.bar {
  background: var(--panel);
  border-bottom: 1px solid var(--stroke);
}
.bar .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 26px; width: auto; }
.nav { display: flex; align-items: stretch; align-self: stretch; }
.nav a {
  display: flex; align-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--stroke);
  text-decoration: none;
}
.nav a:hover .legend { color: var(--ink); }
.nav a[aria-current] .legend { color: var(--ink); }
@media (max-width: 719px) {
  .brand img { height: 22px; }
  .nav a { padding: 0 10px; }
  .nav a:last-child { padding-right: 0; }
  .nav .legend { font-size: 10px; letter-spacing: .1em; }
}

main { display: block; }
section { scroll-margin-top: 16px; }

/* Hero */
.hero { padding-block: 64px 56px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 56px; } .hero { padding-block: 96px 88px; } }
.hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 18px 0 20px;
}
.hero .lede { font-size: clamp(17px, 1.8vw, 19px); color: var(--ink2); max-width: 34em; margin-bottom: 32px; }

/* The instrument: what the first product does, hinted, never named */
.instrument .clock { font-size: 56px; letter-spacing: -.01em; margin: 6px 0 4px; }
.meter { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.meter .cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; flex: 1; }
.meter .cells i { display: block; height: 10px; border-radius: 2px; background: var(--lamp-off); transition: background 90ms linear; }
.meter .cells i.on { background: var(--lamp-green); }
.meter .cells i.on.hot { background: var(--lamp-amber); }

/* A tuning scale, its bands printed below the ticks */
.dial { position: relative; margin-top: 20px; padding: 14px 16px 12px; }
.dial .scale-track {
  height: 14px;
  border-bottom: 1px solid var(--well-stroke);
  border-right: 1px solid var(--well-stroke);
  background:
    repeating-linear-gradient(90deg, var(--well-stroke) 0 1px, transparent 1px 25%) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--well-stroke) 0 1px, transparent 1px 2.5%) bottom / 100% 7px no-repeat;
}
.dial .needle {
  position: absolute; top: 8px; bottom: 30px; left: 50%;
  width: 2px; margin-left: -1px; background: var(--lamp-orange); border-radius: 1px;
}
.dial .bands { display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 10px; }
.dial .bands span:last-child { text-align: right; }

.instrument .foot { display: flex; justify-content: flex-start; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--inner); }

/* Sections */
.section { padding-block: 10px; }

/* Values: numbered like the review list */
.values { padding: 26px 22px 28px; }
.values h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em; max-width: 22em; margin-bottom: 24px; }
.value-grid { display: grid; gap: 0; }
@media (min-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 26px; } }
.principle { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--inner); }
.principle:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 899px) { .principle:last-child { padding-bottom: 0; } }
@media (min-width: 900px) { .principle { border-top: 0; padding: 0; } }
.principle p { max-width: 32em; }
.principle .n {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--legend); font-size: 12px; font-weight: 700;
}
.principle:first-child .n { background: var(--lamp-orange); border-color: var(--lamp-orange); color: #fff; }
.principle h3 { font-family: var(--legend); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin: 4px 0 6px; }
.principle p { color: var(--ink2); font-size: 15.5px; }

/* Contact */
.contact { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.contact .module-head { margin-bottom: 10px; }
.contact address { font-style: normal; line-height: 1.65; }
.contact .uid { margin-top: 12px; }
.contact .key { min-width: 210px; }

/* Footer: the status strip */
.foot {
  margin-top: 48px;
  border-top: 1px solid var(--stroke);
  background: var(--panel);
}
.foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 56px; padding-top: 12px; padding-bottom: 12px; }
.foot nav { display: flex; gap: 22px; }
.foot a { text-decoration: none; }
.foot a:hover .legend { color: var(--ink); }

/* Plain pages (legal) */
.page { padding-block: 48px 24px; }
.page .paper { padding: 28px 24px 32px; max-width: 760px; }
@media (min-width: 720px) { .page .paper { padding: 40px 48px 44px; } }
.page h1 { font-size: clamp(30px, 4vw, 40px); margin: 14px 0 26px; letter-spacing: -.02em; }
.page h2 { font-family: var(--legend); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--label); margin: 30px 0 8px; }
.page p, .page li { color: var(--ink); font-size: 16px; max-width: 40em; }
.page p + p { margin-top: 10px; }
.page ul { padding-left: 1.2em; margin: 8px 0 0; }
.todo { background: var(--hl-changed); border-radius: 2px; padding: 0 3px; }
.note { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--inner); color: var(--ink2); font-size: 14px; }
.nojs { margin-top: 10px; color: var(--ink2); font-size: 14px; }