/* ==========================================================================
   darkdecisions.ca, shared stylesheet for the reference pages.

   SCOPE. This serves the multi-page reference site: /framework, /gates,
   /book, /about, /architecture. It does NOT serve index.html, which is the
   landing page and keeps its own inline styles because it is live, verified,
   and has different needs (hero, capture form, launch variants).

   THE TOKENS BELOW ARE THE SHARED THING. They are copied exactly from
   context/brand-universe.md. If the brand changes, it changes there first and
   both stylesheets follow. Two stylesheets is acceptable; two palettes is not.
   ========================================================================== */

:root {
  --cyan:        #73EFEC;   /* Primary accent. The "signal." */
  --amber:       #C8924A;   /* Warmth. Human hand. Links. */
  --charcoal:    #1e1e1e;   /* Authority. Body text. */
  --gray:        #848383;   /* Supporting text. The quiet voice. */
  --bg-light:    #EBECEE;   /* Primary light surface. NOT pure white. */
  --bg-dark:     #141416;   /* Deep charcoal. */
  --white:       #ffffff;
  --grad-border: linear-gradient(90deg, #73EFEC, #C8924A, transparent);

  --pad-v:  clamp(3.5rem, 8vw, 7rem);
  --pad-h:  clamp(1.5rem, 6vw, 7rem);
  --max-w:  1120px;
  --prose:  68ch;           /* Reading measure. Long lines lose the reader. */
  --radius: 12px;
  --ease:   cubic-bezier(.16, 1, .3, 1);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 300;
  line-height: 1.85;
  color: var(--charcoal);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keyboard users must be able to skip the nav. Visible only on focus. */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--pad-h); top: 1rem; z-index: 100;
  background: var(--charcoal); color: var(--bg-light);
  padding: .6rem 1rem; border-radius: var(--radius);
}

/* --------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid rgba(30,30,30,.12);
  background: var(--bg-light);
  position: sticky; top: 0; z-index: 50;
}
.masthead-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 1rem var(--pad-h);
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.wordmark {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none; white-space: nowrap;
}
.nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-left: auto; }
.nav a {
  font-family: 'Montserrat', sans-serif; font-weight: 500;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: border-color .25s var(--ease);
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--amber); }
.nav a[aria-current="page"] { border-bottom-color: var(--cyan); }

/* ------------------------------------------------------------------ layout */

main { display: block; }

.section { padding: var(--pad-v) var(--pad-h); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.measure { max-width: var(--prose); }

/* ------------------------------------------------------------- typography */

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.18; color: var(--charcoal);
  text-wrap: balance;
}
h1 { font-weight: 900; font-size: clamp(2.1rem, 5.5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: 3.5rem; }
h3 { font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.35rem); margin-top: 2.25rem; }

.standfirst {
  font-family: 'Lora', serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.6; color: var(--charcoal); opacity: .88;
  margin-top: 1.5rem; max-width: var(--prose);
}

p { margin-top: 1.15rem; max-width: var(--prose); }
ul, ol { margin: 1.15rem 0 0 1.3rem; max-width: var(--prose); }
li { margin-top: .5rem; }
strong { font-weight: 600; }

/* Links are amber AND underlined. Colour alone is roughly 2.8:1 against this
   background, below the 4.5:1 guideline, so the underline is not decoration:
   it is the second, non-colour signal that this is a link. Do not remove it. */
a { color: var(--amber); text-decoration: underline; text-underline-offset: .18em; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

.eyebrow {
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray);
}

.rule { height: 2px; background: var(--grad-border); border: 0; margin: 2.5rem 0 0; }

/* --------------------------------------------------------------- figures */

figure { margin: 3rem 0 0; }
figure svg, figure img { display: block; width: 100%; height: auto; }
.figure-frame {
  background: var(--white); border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(30,30,30,.1);
  overflow-x: auto;            /* wide diagrams scroll, the page never does */
}
figcaption {
  font-size: .9rem; color: var(--gray); margin-top: .9rem;
  max-width: var(--prose);
}

/* ------------------------------------------------------------------ cards */

.next {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.next a {
  display: block; padding: 1.4rem 1.5rem; background: var(--white);
  border: 1px solid rgba(30,30,30,.1); border-radius: var(--radius);
  text-decoration: none; color: var(--charcoal);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.next a:hover { transform: translateY(-2px); border-color: var(--amber); }
.next strong { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.next span { font-size: .92rem; color: var(--gray); }

/* ----------------------------------------------------------------- footer */

.footer {
  background: var(--bg-dark); color: var(--bg-light);
  padding: var(--pad-v) var(--pad-h);
  font-size: .92rem;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer a { color: var(--cyan); }
.footer p { max-width: var(--prose); }
.footer .fine { color: var(--gray); margin-top: 2rem; font-size: .85rem; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}