/* Glidechart site. Colours are tokens.json's (brand pack, edition 4); every text pair below is one tokens.json
   records at WCAG AA or better, in light and in dark. Fonts: Instrument Sans Bold for headings and the wordmark,
   Atkinson Hyperlegible Mono for numbers, both SIL OFL 1.1 (fonts/). */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;          /* paper */
  --raised: #F2F4F6;      /* paper-raised */
  --text: #14181D;        /* ink */
  --text-2: #4B5562;      /* steel */
  --accent: #A4481D;      /* copper */
  --low: #1D5BB8;         /* low-side-light */
  --high: #B21F31;        /* high-side-light */
  --caution: #8A5300;     /* caution-light */
  --line: #DDE2E7;        /* separator-light */
  --edge: #76808C;        /* control-light */
  --mark-bezel: #23272C;  /* bezel */
  --mark-dial: #FFFFFF;   /* dial */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Instrument Sans", var(--sans);
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1215;        /* night */
    --raised: #1A1E23;    /* night-raised */
    --text: #EDF0F3;      /* frost */
    --text-2: #A8B2BD;    /* mist */
    --accent: #F2A57E;    /* copper-glow */
    --low: #79AEFF;       /* low-side-dark */
    --high: #FF8590;      /* high-side-dark */
    --caution: #F2B54B;   /* caution-dark */
    --line: #2E343B;      /* separator-dark */
    --edge: #7D8794;      /* control-dark */
    --mark-bezel: #C9784C; /* icon-dark-bezel */
    --mark-dial: #E9E5E0;  /* icon-dark-dial */
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--bg); color: var(--accent); padding: 0.6rem 1rem; border: 2px solid var(--accent); border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

h1, h2, h3, .wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin: 0 0 1rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.4rem; }

.nw { white-space: nowrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.low { color: var(--low); font-weight: 600; }
.high { color: var(--high); font-weight: 600; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; padding: 0.4rem 0; }
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }
.brand .wordmark { font-size: 1.4rem; }
.mark-bezel { fill: var(--mark-bezel); }
.mark-dial { fill: var(--mark-dial); }
.site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a { display: inline-block; padding: 0.6rem 0.2rem; min-height: 44px; font-weight: 600; }

/* Hero */
.hero { padding: 3rem 0 2.5rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1.15fr 0.85fr; } }
.lede { font-size: 1.2rem; color: var(--text); max-width: 40rem; margin: 0 0 1.5rem; }
.cta { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta li { border: 2px solid var(--edge); border-radius: 14px; padding: 0.7rem 1.1rem; min-width: 14rem; background: var(--raised); }
.cta .store { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.cta .when { display: block; color: var(--text-2); font-size: 0.95rem; }
.secondary { color: var(--text-2); margin: 0; }
.hero-shot { margin: 0 auto; max-width: 20rem; }
.hero-shot img, .shots img { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--line); }

/* Sections */
section { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards li { background: var(--raised); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; }
.cards p { margin: 0; color: var(--text); }
.shots { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.shots figure { margin: 0; }
.shots figcaption { margin-top: 0.6rem; font-weight: 600; text-align: center; }
.note { color: var(--text-2); font-size: 0.95rem; }
.quote { border-left: 4px solid var(--caution); padding: 0.4rem 0 0.4rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.sides { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .sides { grid-template-columns: 1fr 1fr; } }
.side { border-radius: 18px; padding: 1.1rem 1.25rem; background: var(--raised); border-left: 6px solid var(--edge); }
.side.low-side { border-left-color: var(--low); }
.side.high-side { border-left-color: var(--high); }
.side p { margin: 0.3rem 0 0; }

/* Prose pages */
.prose { max-width: 46rem; padding: 2.5rem 0 3rem; }
.prose h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); }
.prose h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.prose li { margin: 0.3rem 0; }
.prose dt { font-weight: 700; margin-top: 1.2rem; }
.prose dd { margin: 0.3rem 0 0; }
.updated { color: var(--text-2); }
pre.licence { white-space: pre-wrap; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; background: var(--raised); padding: 1rem; border-radius: 12px; overflow-wrap: anywhere; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; color: var(--text-2); font-size: 0.95rem; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.site-footer nav a { display: inline-block; padding: 0.6rem 0.2rem; min-height: 44px; font-weight: 600; }
.site-footer p { margin: 0.3rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}