/* MFA Boston — Editorial Tech base */
:root {
  --ink: #0A0A0A;
  --ink-2: #1C1C1A;
  --ink-soft: #2A2A28;
  --paper: #F4F1EA;
  --paper-warm: #ECE7D9;
  --paper-deep: #E2DDCD;
  --mute: #6B665B;
  --mute-2: #8E887B;
  --line: rgba(10, 10, 10, 0.10);
  --line-strong: rgba(10, 10, 10, 0.22);
  --line-inv: rgba(244, 241, 234, 0.14);
  --line-inv-strong: rgba(244, 241, 234, 0.32);
  --accent: #C8102E;
  --accent-2: #E5283F;
  --accent-on-dark: #FF6E85;

  --ff-display: 'Fraunces', 'Times New Roman', serif;
  --ff-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  --fs-mono: 0.72rem;
  --fs-sm: 0.86rem;
  --fs-base: 1rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.5rem;
  --fs-d4: clamp(2rem, 3.5vw, 3rem);
  --fs-d3: clamp(2.6rem, 5.2vw, 4.6rem);
  --fs-d2: clamp(3.4rem, 7.5vw, 6.8rem);
  --fs-d1: clamp(4rem, 10vw, 9rem);

  --gut: clamp(1.25rem, 3.4vw, 2.6rem);
  --max: 1440px;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5rem;
  --s-7: 7rem;
  --s-8: 9rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 350;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0;
}
h1 em, h2 em, h3 em { font-style: italic; font-variation-settings: 'SOFT' 80, 'WONK' 1; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* utility */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
}
.t-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.t-mono--ink { color: var(--ink); }
.t-mono--inv { color: rgba(244, 241, 234, 0.7); }
.t-mono--accent { color: var(--accent); }

.t-display { font-family: var(--ff-display); }

.surface-ink { background: var(--ink); color: var(--paper); }
.surface-warm { background: var(--paper-warm); }
.surface-deep { background: var(--paper-deep); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

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

/* visually hidden */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }