/* ============================================================
   HAYMAKER — reset, base type, shared primitives
   ============================================================ */

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

html {
  background: var(--ground);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100% }
img, video { height: auto }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0 }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd { margin: 0 }
ul,ol { list-style: none; padding: 0 }

::selection { background: var(--lime); color: var(--ink) }

:where(a,button,summary,input,select,[tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark :where(a,button,summary,input,[tabindex]):focus-visible { outline-color: var(--lime) }

.skip {
  position: fixed; z-index: 200; top: 10px; left: 10px;
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  translate: 0 -180%;
  transition: translate .2s var(--ease);
}
.skip:focus-visible { translate: 0 }

/* ── measure ──────────────────────────────────────────────── */

.shell { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--edge) }
.read  { width: var(--read) }

/* ── the type tiers ───────────────────────────────────────── */

/* display — the deck's voice: tight, geometric, sentence case */
.d1, .d2, .d3 {
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.d1 { font-size: clamp(37px, 6.5vw, 92px) }
.d2 { font-size: clamp(31px, 4.6vw, 66px) }
.d3 { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.1; letter-spacing: -0.028em }

/* the serif carries asides, never headlines */
/* OT Parallel sits noticeably smaller on the body than Open Sauce does, so
   every serif run is stepped up to bring the x-heights level */
.voice { font-family: var(--serif); font-size: clamp(17.5px, 1.66vw, 24px); line-height: 1.45; letter-spacing: -0.005em }
.voice-i { font-family: var(--serif); font-style: italic; font-size: 1.1em }
/* the x-height gap between the two faces closes as the size goes up, so
   display serif needs a smaller correction than body serif does */
.say em, .d1 em, .flow__q em { font-size: 1.05em; line-height: .94 }

/* the label tier */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dark .label { color: var(--on-night-2) }

.lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.62; color: var(--ink-2) }
.body { font-size: 16px; line-height: 1.68; color: var(--ink-2) }
.fine { font-size: 13.5px; line-height: 1.6; color: var(--ink-3) }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0 }
.dark .rule { background: var(--hair-night) }

.mark-lime  { background: var(--lime);  padding: 0 .22em; border-radius: 3px }
.mark-strike { text-decoration: line-through; text-decoration-thickness: .06em; color: var(--ink-3) }

/* ── sections ─────────────────────────────────────────────── */

.sec { position: relative; padding-block: clamp(64px, 8.5vw, 148px) }
.sec-head { display: grid; gap: clamp(14px, 1.6vw, 22px); margin-bottom: clamp(34px, 4.5vw, 68px) }
.sec-num {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--ink-3);
}
.sec-num::after { content: ""; flex: 1; height: 1px; background: var(--hair) }
.dark .sec-num::after { background: var(--hair-night) }

.dark { background: var(--night); color: var(--on-night) }
.dark .lede, .dark .body { color: var(--on-night-2) }
.dark .fine { color: rgba(243,242,236,.45) }

/* ── reveal — words arrive out of focus and settle ────────── */

@keyframes hm-reveal {
  from { opacity: 0; filter: blur(11px); translate: 0 .34em }
  to   { opacity: 1; filter: blur(0);    translate: 0 0 }
}
.w-reveal { display: inline-block; animation: hm-reveal var(--reveal) var(--ease) both }

[data-rise] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in { opacity: 1; translate: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
  [data-rise] { opacity: 1; translate: none }
  .w-reveal { animation: none }
}