/* =========================================================
   MURTWEB — Global styles
   ========================================================= */

/* ---- Font faces (self-hosted, OFL-1.1) --------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader/newsreader-latin-ext-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}

/* ---- Base ---------------------------------------------------- */

html { font-size: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink-strong);
  letter-spacing: -0.005em;
  line-height: 1.08;
}
h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; }
h3 { font-size: var(--text-lg); font-weight: 500; line-height: 1.25; }
h4 { font-size: var(--text-md); font-weight: 600; line-height: 1.35; }

p { color: var(--color-text); max-width: 60ch; }
p.lede { font-size: var(--text-md); color: var(--color-text-muted); }

.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }
strong { font-weight: 600; }
em { font-style: italic; font-family: var(--font-display); }

::selection { background: var(--color-accent); color: var(--color-bg); }

/* ---- Focus ------------------------------------------------------ */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Skip link ---------------------------------------------------- */

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-sm);
  z-index: 999;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: top var(--duration-fast) var(--ease-precise);
}
.skip-link:focus { top: var(--space-sm); }

/* ---- Layout: containers ------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.section {
  padding-block: var(--section-pad-y);
  position: relative;
}
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
.section--raised { background: var(--color-bg-raised); }
.section--border-top { border-top: var(--border-hair); }

/* inverse = light editorial inset panel, used sparingly for rhythm */
.section--inverse {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}
.section--inverse h1, .section--inverse h2,
.section--inverse h3, .section--inverse h4 { color: var(--color-inverse-text); }
.section--inverse p { color: var(--color-inverse-text-muted); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
@media (max-width: 62rem) { .grid-12 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 36rem) { .grid-12 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Utility ------------------------------------------------------ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.eyebrow::before {
  content: ""; width: 1.1rem; height: 1px; background: var(--color-accent);
  display: inline-block;
}

.hairline { border: none; border-top: var(--border-hair); margin: 0; }

.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-precise),
              transform var(--duration-slow) var(--ease-precise);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}