/* ── Sage Six Learning Systems · ground ─────────────────────────────────
   The Sage Six frame is achromatic by rule: a black field, white ink, neutral
   grey. Debono alone is allowed to bring its native product palette into its
   bounded section; public/debono.css owns that exception. tools/check-site.mjs
   enforces the boundary so the company identity cannot drift.

   The field is the whole viewport. There is no sheet, no outer measure and
   no centred column: the page is set edge to edge, and every dimension that
   matters (gutter, type, rhythm) is a function of the viewport width, so the
   composition is the same composition on a phone and on an ultrawide, only
   larger. tools/check-site.mjs guards that too.

   The page is set like a title page printed in negative: a serif with real
   optical sizes for everything read, and a small monospace for the labels
   that sit beside the text rather than in it.                            */

:root {
  color-scheme: dark;

  /* field and ink */
  --ground:      #0a0a0a;
  --ground-deep: #000000;
  --ink:         #f4f4f4;
  --ink-soft:    #d2d2d2;
  --grey:        #9b9b9b;   /* 7.1:1 on the field; every grey that carries text */
  --grey-2:      #6b6b6b;   /* large or decorative only */
  --hair:        #3a3a3a;
  --hair-soft:   #262626;
  --white:       #ffffff;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* the only horizontal constants: a gutter that grows with the viewport,
     and the gap between the margin label and the text it introduces */
  --gutter: clamp(1.25rem, 4.2vw, 7rem);
  --gap:    clamp(1.5rem, 3vw, 5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* Fine-pointer visitors use the deliberate capture in site.js exclusively.
   Native snapping remains the touch fallback, but is disabled for fine pointers
   so its correction loop cannot fight the magnetic centre and cause jitter. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html,
  html.is-magnet-animating,
  html.is-magnet-releasing { scroll-snap-type: none; }
  html.is-magnet-animating { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);
  line-height: 1.55;
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* A faint grain, so the black is a material and not a void. The noise is
   desaturated inside the filter (feColorMatrix saturate 0), which is what
   keeps it achromatic; the opacity keeps it beneath notice. On a black
   field the grain can only lighten, so it reads as a very soft dust. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

::selection { background: var(--ink); color: var(--ground); }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 1px;
}

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

h1, h2, h3, p, ol, ul { margin: 0; }

/* small label voice: monospace, spaced, never louder than the text */
.label {
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* On paper the same page prints as ink on white: the field is the screen's,
   and a printer should not be asked to lay down a page of black. The world
   stays achromatic and the hierarchy stays the same, only inverted back.  */
@media print {
  :root {
    --ground:      #ffffff;
    --ground-deep: #ffffff;
    --ink:         #111111;
    --ink-soft:    #2e2e2e;
    --grey:        #5e5e5e;
    --grey-2:      #8c8c8c;
    --hair:        #d9d9d9;
    --hair-soft:   #e9e9e9;
  }
  html, body { background: #ffffff; }
  body::before { display: none; }
}

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