/* Preflight Notary: document precision.
   Brass (#A88652) is used for hairlines, guides and ticks only. It never carries text. */
:root {
  --ivory: #FAF7F0;
  --paper: #FFFDF8;
  --midnight: #172432;
  --ink-2: #44515E;          /* secondary text, 7.4:1 on ivory */
  --brass: #A88652;          /* lines only */
  --rule: rgba(23, 36, 50, .14);
  --rule-strong: rgba(23, 36, 50, .32);
  --pf-focus: #172432;

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2rem;
  --step-4: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --ease-settle: cubic-bezier(.2, .7, .2, 1);
}

html { background: var(--ivory); }
body {
  background: var(--ivory);
  color: var(--midnight);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: clip;
}
a { color: var(--midnight); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
.serif { font-family: var(--serif); }

/* ---------- The document stack (shared motif) ---------- */
.stack {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 8.5 / 11;
  isolation: isolate;
}
.stack .sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(23, 36, 50, .07), 0 22px 44px -30px rgba(23, 36, 50, .45);
}
/* Under-sheets: their final offsets are exact 8px steps, so the edges read as a precise stack. */
.stack .sheet-b { transform: translate(8px, 8px); z-index: -1; background: #F6F1E6; }
.stack .sheet-c { transform: translate(16px, 16px); z-index: -2; background: #EFE8DA; }
/* Front sheet: blind-embossed inner frame. */
.stack .sheet-a::before {
  content: "";
  position: absolute;
  inset: 4.5cqi;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .95),
    inset -1px -1px 0 rgba(23, 36, 50, .06),
    1px 1px 0 rgba(23, 36, 50, .05),
    -1px -1px 0 rgba(255, 255, 255, .9);
  pointer-events: none;
}

/* Guides: brass hairlines that run past the sheet to the page edges. */
.guide { position: absolute; pointer-events: none; z-index: 2; }
.guide-v { top: -100vh; bottom: -100vh; width: 1px; background: var(--brass); opacity: .7; transform-origin: 50% 50%; }
.guide-h { left: -100vw; right: -100vw; height: 1px; background: var(--brass); opacity: .7; transform-origin: 50% 50%; }
/* Registration ticks at the margin corners. */
.tick { position: absolute; width: 3cqi; height: 3cqi; pointer-events: none; z-index: 2; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--brass); }
.tick::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.tick::after { top: 50%; left: 0; right: 0; height: 1px; }

/* One alignment sequence on load: the sheets settle into the stack, the guides draw.
   Text never moves, so the page is readable before and during the sequence. */
@media (prefers-reduced-motion: no-preference) {
  .stack .sheet-b { animation: settle-b 1100ms var(--ease-settle) 120ms both; }
  .stack .sheet-c { animation: settle-c 1250ms var(--ease-settle) 60ms both; }
  .guide-v { animation: draw-v 900ms var(--ease-settle) 700ms both; }
  .guide-h { animation: draw-h 900ms var(--ease-settle) 820ms both; }
  .tick { animation: tick-in 500ms ease-out 1300ms both; }
}
@keyframes settle-b { from { transform: translate(-22px, 26px) rotate(-3.2deg); } to { transform: translate(8px, 8px) rotate(0); } }
@keyframes settle-c { from { transform: translate(34px, -10px) rotate(2.6deg); } to { transform: translate(16px, 16px) rotate(0); } }
@keyframes draw-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick-in { from { opacity: 0; } to { opacity: 1; } }