/* Monids site foundation: Acuity. Tokens, type, nav, buttons and footer shared by every page.
   See DESIGN.md. Duochrome red and green carry meaning only. */

@font-face {
  font-family: "Optician Sans";
  src: url("../fonts/optician-sans/Optician-Sans.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --slate: #161d21;
  --slate-2: #1f292e;
  --slate-3: #2b373d;
  --slate-line: rgba(226, 236, 233, 0.14);
  --chart: #fbfcfa;
  --paper: #edf1ef;
  --ink: #0c1012;
  --ink-2: #3b474c;
  --ink-line: rgba(12, 16, 18, 0.14);
  --on-dark: #eef3f2;
  --on-dark-2: #a9b8bd;
  --red: #c8202b;
  --green: #13724a;

  --f-opt: "Optician Sans", "Atkinson Hyperlegible Next", sans-serif;
  --f-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 16px;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--slate-3) var(--slate); }

body {
  margin: 0;
  background: var(--slate);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

::selection { background: var(--ink); color: var(--chart); }
[data-tone="dark"] ::selection { background: var(--chart); color: var(--ink); }

input { caret-color: var(--red); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[data-tone="dark"] :focus-visible { outline-color: var(--chart); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

p { margin: 0 0 var(--s-4); max-width: 60ch; }
h1, h2, h3 { margin: 0; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; top: var(--s-3); left: var(--s-3); z-index: 10; background: var(--chart); color: var(--ink); padding: var(--s-3) var(--s-4); }

.display {
  font-family: var(--f-opt);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.display--sect { font-size: clamp(34px, 4.6vw, 60px); }

[data-tone="dark"] { color: var(--on-dark); background: var(--slate); }
[data-tone="light"] { color: var(--ink); background: var(--paper); }


.foot__grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Tabs (buttons) ---------- */
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 22px;
  font: 600 16px/1 var(--f-text); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tab--ink { background: var(--ink); color: var(--chart); border-color: var(--ink); }
.tab--ink:hover { background: var(--slate-3); border-color: var(--slate-3); }
.tab--light { background: var(--chart); color: var(--ink); border-color: var(--chart); }
.tab--light:hover { background: transparent; color: var(--chart); }
.tab--ghost { background: transparent; color: var(--chart); border-color: var(--chart); }
.tab--ghost:hover { background: var(--chart); color: var(--ink); }

/* ---------- Nav ---------- */
.nav { border-bottom: 1px solid var(--slate-line); position: relative; z-index: 5; }
.nav__bar { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: var(--s-5); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; font-family: var(--f-opt); font-size: 24px; letter-spacing: 0.1em; }
.nav__mark { width: 28px; height: 28px; }

.nav__desk { display: none; }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-5); }
.nav__links a:not(.tab), .nav__linkbtn { font-size: 16px; color: var(--on-dark-2); text-decoration: none; }
.nav__links a:not(.tab):hover, .nav__linkbtn:hover { color: var(--on-dark); text-decoration: underline; }
.nav__linkbtn { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.nav__links a[aria-current="page"] { color: var(--on-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.nav__links form { margin: 0; }

.nav__menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; cursor: pointer; font-size: 16px; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__burger, .nav__burger::before, .nav__burger::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform 0.25s var(--ease); }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
.nav__burger::before { top: -7px; }
.nav__burger::after { top: 7px; }
.nav__menu[open] .nav__burger { background: transparent; }
.nav__menu[open] .nav__burger::before { transform: translateY(7px) rotate(45deg); }
.nav__menu[open] .nav__burger::after { transform: translateY(-7px) rotate(-45deg); }
.nav__menu[open] > .nav__sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--slate-2); border-bottom: 1px solid var(--slate-line);
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.nav__sheet .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
.nav__sheet .nav__links li { border-bottom: 1px solid var(--slate-line); }
.nav__sheet .nav__links li:last-child { border-bottom: 0; padding-top: var(--s-4); }
.nav__sheet .nav__links a:not(.tab), .nav__sheet .nav__linkbtn { display: flex; align-items: center; min-height: 52px; font-size: 18px; color: var(--on-dark); }
.nav__sheet .tab { width: 100%; }

@media (min-width: 960px) {
  .nav__desk { display: block; }
  .nav__menu { display: none; }
}

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--slate-line); padding-block: var(--s-7); }
.foot__grid { display: grid; gap: var(--s-5); align-items: center; }
.foot__brand { margin: 0; font: 400 22px/1 var(--f-opt); letter-spacing: 0.12em; }
.foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.foot__links a { color: var(--on-dark-2); text-decoration: none; font-size: 16px; }
.foot__links a:hover { color: var(--on-dark); text-decoration: underline; }
.foot__copy { margin: 0; font-size: 14px; color: var(--on-dark-2); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: auto 1fr auto; gap: var(--s-7); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }