/* Ahead of the Cut holding page. Briefing paper palette (BRAND-DECISIONS 3), Fraunces 800 (4, 8). Dark follows the system. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/fraunces-latin-800-normal.woff2) format('woff2');
}
:root {
  --paper: #F6F3EC; --ink: #1D1C1A; --muted: #5A5650; --ox: #7A2E2A;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #151412; --ink: #ECE7DC; --muted: #A39D92; --ox: #D07A72; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-weight: 800;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(40px, 8vh, 88px);
  max-width: 880px; margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(56px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.mark { display: flex; align-items: center; gap: 12px; }
.icon { width: 44px; height: 44px; flex: none; }
.icon .ox { stroke: var(--ox); }
.icon .bar { stroke: var(--ink); }
.wordmark { margin: 0; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
h1 {
  margin: 0;
  font-size: clamp(32px, 6.2vw, 64px); line-height: 1.1; letter-spacing: -0.015em;
  text-wrap: balance; max-width: 17em;
}
.ins {
  text-decoration: underline; text-decoration-color: var(--ox);
  text-decoration-thickness: 3px; text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}
@media (min-width: 900px) {
  .icon { width: 52px; height: 52px; }
  .wordmark { font-size: 26px; }
  .ins { text-decoration-thickness: 4px; }
}