/* ============================================================
   HAYMAKER — components
   ============================================================ */

/* ── header ───────────────────────────────────────────────── */

/* At the top the header is part of the page. Past the fold it detaches
   and drops in as a frosted, rounded bar that floats clear of the edges. */
.nav {
  position: fixed; z-index: 90; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(14px, 1.5vw, 22px) var(--edge);
  pointer-events: none;
  transition:
    translate .55s var(--ease-out),
    opacity .32s var(--ease),
    padding .45s var(--ease);
}

.nav.is-float {
  padding: 10px clamp(26px, 3.6vw, 54px);
  margin-top: clamp(8px, 1vw, 14px);
}
/* parked above the frame until it is told to drop */
.nav.is-float:not(.is-in) { translate: 0 -140%; opacity: 0; pointer-events: none }
.nav.is-float.is-in { translate: 0 0; opacity: 1 }

.nav.is-float::before {
  content: "";
  position: absolute; inset: 0 clamp(12px, 2.2vw, 32px);
  border-radius: clamp(16px, 1.7vw, 24px);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    0 1px 2px rgba(22,21,15,.06),
    0 14px 40px -26px rgba(22,21,15,.55),
    inset 0 0 0 1px rgba(22,21,15,.06);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.nav.is-float.is-in::before { opacity: 1 }
.nav[data-on="dark"].is-float::before {
  background: color-mix(in srgb, var(--pitch) 62%, transparent);
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 16px 44px -26px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(243,242,236,.11);
}
/* the bar's own contents have to sit above its frosted panel */
.nav > * { position: relative; z-index: 1 }
.nav > * { pointer-events: auto }


.wordmark { display: inline-flex; align-items: center; gap: 9px; justify-self: start }
.wordmark svg { width: 25px; height: 25px; fill: var(--ink); transition: fill .4s var(--ease) }
.wordmark b {
  font-size: 20px; font-weight: 600; letter-spacing: -0.04em;
  color: var(--ink); transition: color .4s var(--ease);
}
.wordmark sup { color: var(--lime); font-size: .62em; font-weight: 600; margin-left: 1px; top: -.55em; position: relative }
.nav[data-on="dark"] .wordmark svg { fill: var(--on-night) }
.nav[data-on="dark"] .wordmark b  { color: var(--on-night) }

.menu { display: flex; align-items: center; gap: clamp(4px, .9vw, 12px) }
.menu a {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink-2);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.menu a:hover { color: var(--ink); background: rgba(22,21,15,.055) }
.menu a[aria-current="page"] { color: var(--ink) }
.nav[data-on="dark"] .menu a { color: var(--on-night-2) }
.nav[data-on="dark"] .menu a:hover,
.nav[data-on="dark"] .menu a[aria-current="page"] { color: var(--on-night); background: rgba(243,242,236,.09) }

.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end }

/* ── the rich button ──────────────────────────────────────────
   A dark pill with a lit top edge and a five-stop shadow that
   reads as height rather than blur. The label is doubled and
   rolls on hover.                                              */

.rich {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 13px 11px 22px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.012em;
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--lift);
  transition: box-shadow .45s var(--ease), translate .45s var(--ease-out), background .3s var(--ease);
}
.rich:hover { translate: 0 -2px; box-shadow: var(--lift-hi) }
.rich:active { translate: 0 0; transition-duration: .1s }

/* the label is a plain box; the characters inside it do the rolling */
.rich__roll { display: inline-flex; align-items: center }

/* the token on the right: the two people who answer, stacked, with a
   live dot on the one who takes the call */
.rich__pair { display: flex; align-items: center; flex: none }
.rich__pair .rich__tok + .rich__tok { margin-left: -11px }
.rich__pair .rich__tok:first-child { z-index: 1 }

.rich__tok {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--lav), var(--lime));
  color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.rich__tok--c { background: linear-gradient(150deg, var(--peach), var(--coral)) }
/* the ring punches each head out of the one behind it, so it has to
   match whatever the button face is */
.rich__tok--ring { box-shadow: 0 0 0 2px var(--ink) }
.rich--lime .rich__tok--ring { box-shadow: 0 0 0 2px var(--lime) }
.rich--ghost .rich__tok--ring { box-shadow: 0 0 0 2px var(--ground) }
.dark .rich:not(.rich--lime):not(.rich--ghost) .rich__tok--ring,
.hero .rich:not(.rich--lime):not(.rich--ghost) .rich__tok--ring,
.trailcta .rich:not(.rich--lime):not(.rich--ghost) .rich__tok--ring,
.nav[data-on="dark"] .rich:not(.rich--lime):not(.rich--ghost) .rich__tok--ring { box-shadow: 0 0 0 2px var(--ground) }
.rich__tok::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--ink);
}
.rich__tok.is-quiet::after { background: var(--ink-3) }
/* an arrow token is a direction, not a person — no presence dot */
.rich__tok--plain::after { display: none }
.rich__tok--plain { font-size: 14px; font-weight: 500 }

/* on a dark ground the pill inverts: paper face, ink label */
.dark .rich:not(.rich--lime):not(.rich--ghost),
.hero .rich:not(.rich--lime):not(.rich--ghost),
.trailcta .rich:not(.rich--lime):not(.rich--ghost),
.nav[data-on="dark"] .rich:not(.rich--lime):not(.rich--ghost) {
  background: var(--ground); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.34), 0 6px 14px rgba(0,0,0,.3), 0 18px 30px rgba(0,0,0,.24),
              inset 0 2px 8px rgba(255,255,255,.7);
}
.dark .rich:not(.rich--lime):not(.rich--ghost) .rich__tok,
.hero .rich:not(.rich--lime):not(.rich--ghost) .rich__tok,
.trailcta .rich:not(.rich--lime):not(.rich--ghost) .rich__tok,
.nav[data-on="dark"] .rich:not(.rich--lime):not(.rich--ghost) .rich__tok { border-color: var(--ground) }
.dark .rich:not(.rich--lime):not(.rich--ghost) .rich__tok::after,
.hero .rich:not(.rich--lime):not(.rich--ghost) .rich__tok::after,
.trailcta .rich:not(.rich--lime):not(.rich--ghost) .rich__tok::after,
.nav[data-on="dark"] .rich:not(.rich--lime):not(.rich--ghost) .rich__tok::after { border-color: var(--ground) }

.rich--lime { background: var(--lime); color: var(--ink) }
.rich--lime .rich__tok { background: var(--ink); color: var(--lime) }
.rich--lime .rich__tok--c { background: #2C2418; color: var(--peach) }
.rich--lime .rich__tok::after { border-color: var(--lime) }
.rich--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.rich--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.dark .rich--ghost { color: var(--on-night); box-shadow: inset 0 0 0 1px var(--hair-night) }
.dark .rich--ghost:hover { box-shadow: inset 0 0 0 1px var(--on-night) }
.rich--lg { padding: 14px 16px 14px 28px; font-size: 16px }
.rich--lg .rich__tok { width: 34px; height: 34px; font-size: 13px }

/* text link with a rule that draws in */
.tlink { position: relative; font-weight: 500; white-space: nowrap }
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale .4s var(--ease-out);
}
.tlink:hover::after { scale: 1 1 }

/* burger + drawer */
.burger { display: none; width: 42px; height: 42px; border-radius: var(--r-pill); place-content: center; gap: 5px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair) }
.burger i { display: block; width: 15px; height: 1.5px; background: var(--ink); transition: translate .3s var(--ease), rotate .3s var(--ease) }
.nav[data-on="dark"] .burger i { background: var(--on-night) }
.nav[data-on="dark"] .burger { box-shadow: inset 0 0 0 1px var(--hair-night) }
.burger[aria-expanded="true"] i:first-child { translate: 0 3.25px; rotate: 45deg }
.burger[aria-expanded="true"] i:last-child  { translate: 0 -3.25px; rotate: -45deg }
.drawer { display: none }
.drawer[hidden] { display: none }

/* ── animated icons ───────────────────────────────────────────
   Line marks that draw themselves the first time they scroll
   into view, then keep one small living motion on hover.        */

.icon { width: 40px; height: 40px; overflow: visible; color: var(--ink) }
.dark .icon { color: var(--on-night) }
.icon [data-draw] {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
}
.icon.is-drawn [data-draw] {
  transition: stroke-dashoffset 1s var(--ease) var(--d, 0ms);
  stroke-dashoffset: 0;
}
.icon [data-dot] { fill: currentColor; stroke: none; opacity: 0; scale: .2; transform-origin: center; transform-box: fill-box }
.icon.is-drawn [data-dot] { transition: opacity .4s var(--ease) 620ms, scale .5s var(--ease-out) 620ms; opacity: 1; scale: 1 }
.icon [data-accent] { fill: var(--lime); stroke: none; opacity: 0 }
.icon.is-drawn [data-accent] { transition: opacity .4s var(--ease) 780ms; opacity: 1 }

/* the living motion — one idea per mark, never a spin */
.icon [data-spin] { transform-origin: center; transform-box: fill-box }
:is(a,li,.card):hover .icon [data-spin],
.icon:hover [data-spin] { animation: hm-spin 5.5s linear infinite }
@keyframes hm-spin { to { rotate: 360deg } }

.icon [data-pulse] { transform-origin: center; transform-box: fill-box }
:is(a,li,.card):hover .icon [data-pulse],
.icon:hover [data-pulse] { animation: hm-pulse 1.5s var(--ease) infinite }
@keyframes hm-pulse { 0%,100% { scale: 1; opacity: 1 } 50% { scale: 1.45; opacity: .45 } }

.icon [data-travel] { transform-origin: center; transform-box: fill-box }
:is(a,li,.card):hover .icon [data-travel],
.icon:hover [data-travel] { animation: hm-travel 1.5s var(--ease) infinite }
@keyframes hm-travel { 0% { translate: 0 0; opacity: 0 } 22% { opacity: 1 } 78% { opacity: 1 } 100% { translate: 11px 0; opacity: 0 } }

.icon [data-rise-i] { transform-origin: center bottom; transform-box: fill-box }
:is(a,li,.card):hover .icon [data-rise-i],
.icon:hover [data-rise-i] { animation: hm-rise-i 1.6s var(--ease) infinite }
@keyframes hm-rise-i { 0%,100% { translate: 0 0 } 50% { translate: 0 -4px } }

@media (prefers-reduced-motion: reduce) {
  .icon [data-draw] { stroke-dashoffset: 0 }
  .icon [data-dot], .icon [data-accent] { opacity: 1; scale: 1 }
  .icon * { animation: none !important }
}

/* ── cards ────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  transition: box-shadow .35s var(--ease), translate .45s var(--ease-out);
}
a.card:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px var(--hair), var(--lift) }
.dark .card { background: var(--night-2); box-shadow: inset 0 0 0 1px var(--hair-night) }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--lime); color: var(--ink);
}
.chip--quiet { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair) }
.plan--pick .chip--quiet { color: rgba(243,242,236,.6); box-shadow: inset 0 0 0 1px var(--hair-night) }
.dark .chip--quiet { color: var(--on-night-2); box-shadow: inset 0 0 0 1px var(--hair-night) }

/* ── dot-matrix tier ──────────────────────────────────────── */

.dm { --dm-rows: 13; --dm-cell: 3px; --dm-dot: .40; display: block; font-weight: 700; line-height: 1; letter-spacing: .04em }
.dm canvas { display: block }
.dm:not(.is-dm) { font-size: calc(var(--dm-rows) * var(--dm-cell) * .78) }
.dm.is-dm { font-size: 0 }
.dm--tag  { --dm-rows: 11; --dm-cell: 2.8px }
.dm--big  { --dm-rows: 13; --dm-cell: clamp(3.2px,.4vw,5px) }
.dm--foot { --dm-rows: 22; --dm-dot: .42; --dm-fit: 1; width: 100% }

/* ── footer ───────────────────────────────────────────────── */

.foot { position: relative; background: var(--night); color: var(--on-night); overflow: clip; padding-top: clamp(48px, 6vw, 88px) }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(120px, .8fr)); gap: clamp(24px, 3vw, 54px); padding-bottom: clamp(34px, 4vw, 60px) }
.foot h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,242,236,.4); margin-bottom: 16px }
.foot li + li { margin-top: 9px }
.foot a { font-size: 14.5px; color: var(--on-night-2); transition: color .25s var(--ease) }
.foot a:hover { color: var(--on-night) }
/* the panel used to hang into the base row; give it its own space */
.foot__wordmark { margin: clamp(10px,2vw,22px) 0 clamp(14px,2.2vw,26px); cursor: crosshair }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-block: 20px; border-top: 1px solid var(--hair-night); font-size: 12.5px; color: rgba(243,242,236,.38) }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 960px) {
  .nav { grid-template-columns: auto 1fr auto }
  .menu { display: none }
  .burger { display: grid }
  .nav .rich__roll, .nav .rich { font-size: 13.5px }
  .drawer {
    display: grid; position: fixed; z-index: 89;
    top: 74px; left: var(--edge); right: var(--edge);
    padding: 10px; border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 30px 70px -30px rgba(22,21,15,.5), inset 0 0 0 1px var(--hair-soft);
  }
  .drawer a { padding: 13px 16px; border-radius: var(--r-md); font-size: 15.5px; font-weight: 500 }
  .drawer a:hover { background: rgba(22,21,15,.05) }
  .foot__grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px) {
  /* the nav pill drops to its token; the label lives in the drawer and the hero */
  .nav .rich__roll { display: none }
  .nav .rich { padding: 6px; gap: 0 }
  .nav .rich__tok { width: 30px; height: 30px; font-size: 12px }
  .foot__grid { grid-template-columns: 1fr }
}

/* ============================================================
   Interaction — one grammar for everything clickable

   Three tiers, and nothing outside them:
     .rich          the committed action. A pill with weight.
     .rich--ghost   the same shape, hollow. Secondary.
     .tlink         a word in running text. A rule that wipes.

   Every hover moves in the same direction (up and to the right),
   on the same curve, in the same time.
   ============================================================ */

:root { --tap: .38s }

/* ── the text link ─────────────────────────────────────────
   The rule wipes out from the left on the way in and keeps
   going out to the right on the way out, so the gesture reads
   as forward motion rather than a toggle.                     */

.tlink {
  position: relative;
  display: inline-block;
  font-weight: 500;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.2px;
  background: currentColor;
  transform-origin: right;
  scale: 0 1;
  transition: scale var(--tap) var(--ease-out);
}
.tlink:hover::after { transform-origin: left; scale: 1 1 }
.tlink--lg { font-size: clamp(15px, 1.3vw, 17px) }

/* an arrow that leans out of the word on hover */
.tlink--go::before {
  content: "→";
  display: inline-block;
  margin-right: .45em;
  translate: 0 0;
  transition: translate var(--tap) var(--ease-out), opacity var(--tap) var(--ease);
  opacity: .45;
}
.tlink--go:hover::before { translate: .22em 0; opacity: 1 }

/* ── nav items ─────────────────────────────────────────────
   The label lifts and a dot arrives underneath. Nothing shifts
   the layout, so the row never jitters.                       */

.menu a {
  position: relative;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink-2);
  background: none;
  transition: color .28s var(--ease), translate var(--tap) var(--ease-out);
}
/* One pill slides between the items rather than each item lighting its
   own. It is positioned by JS against whatever is hovered, and parks on
   the current page when the pointer leaves. */
.menu { position: relative }
.menu::before {
  content: "";
  position: absolute; left: 0; top: 50%; z-index: 0;
  width: var(--pw, 0px); height: 34px;
  translate: var(--px, 0px) -50%;
  border-radius: var(--r-pill);
  background: rgba(22,21,15,.07);
  opacity: 0;
  transition: translate .42s var(--ease-out), width .42s var(--ease-out), opacity .28s var(--ease);
  pointer-events: none;
}
.menu.is-lit::before { opacity: 1 }
.nav[data-on="dark"] .menu::before { background: rgba(243,242,236,.1) }
.menu a { position: relative; z-index: 1 }
.menu a:hover { color: var(--ink); background: none }
.menu a[aria-current="page"] { color: var(--ink) }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px;
  height: 1.5px; background: var(--lime);
}
.nav[data-on="dark"] .menu a { color: var(--on-night-2) }
.nav[data-on="dark"] .menu a:hover,
.nav[data-on="dark"] .menu a[aria-current="page"] { color: var(--on-night); background: none }
.nav[data-on="dark"] .menu a[aria-current="page"]::after { background: var(--lime) }

/* the wordmark's plus is the one place the brand twitches */
.wordmark sup { display: inline-block; transition: translate var(--tap) var(--ease-out), rotate var(--tap) var(--ease-out) }
.wordmark:hover sup { translate: 1px -2px; rotate: 90deg }

/* ── the rich button, unified ──────────────────────────────
   Same lift, same curve, everywhere. The label rolls, the token
   nudges, and the whole pill rises two pixels. That is the move.  */

.rich { transition: box-shadow var(--tap) var(--ease), translate var(--tap) var(--ease-out), background .3s var(--ease) }
.rich:hover { translate: 0 -2px }
.rich .rich__pair { transition: translate var(--tap) var(--ease-out) }
.rich:hover .rich__pair { translate: 2px 0 }
.rich__tok { transition: translate var(--tap) var(--ease-out) }
.rich:hover .rich__tok--c { translate: 2px 0 }

/* ghost inherits the same geometry so the two never look unrelated */
.rich--ghost { --ico-bg: transparent; --ico-fg: currentColor }
.rich--ghost .rich__tok { background: rgba(22,21,15,.08); color: var(--ink) }
.dark .rich--ghost .rich__tok, .trailcta .rich--ghost .rich__tok { background: rgba(243,242,236,.12); color: var(--on-night) }

/* ── rows and cells lean into the pointer ──────────────────── */

.wall__cell { transition: background .35s var(--ease), translate var(--tap) var(--ease-out) }
a.wall__cell:hover { translate: 0 -3px }
.wall__name { transition: opacity .35s var(--ease), letter-spacing var(--tap) var(--ease-out) }
a.wall__cell:hover .wall__name { letter-spacing: -.022em }

.entry__play i { transition: background .3s var(--ease), box-shadow .3s var(--ease), scale var(--tap) var(--ease-out) }
.entry:hover .entry__play i { scale: 1.12 }

/* ── focus is a first-class state, not an afterthought ─────── */

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, var(--coral));
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .rich:hover, .menu a:hover, a.wall__cell:hover, a.entry:hover { translate: none }
  .tlink::after { transition: none }
}

/* ── letter flip ───────────────────────────────────────────
   One clipped box per character, two copies stacked inside it.
   Hover slides the stack up a line, one character behind the
   next, so the label rolls over itself left to right.          */

.is-flip { position: relative; display: inline-flex; align-items: baseline; white-space: pre }
.fl-sp { display: inline-block; width: .28em; flex: none }
.fl {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  vertical-align: bottom;
}
.fl > span {
  display: block;
  height: 1em; line-height: 1em;
  transition: translate .46s var(--ease-out);
  transition-delay: var(--i, 0ms);
}
:is(a, button, summary, .menu a, li):hover .fl > span,
.is-flip:hover .fl > span { translate: 0 -1em }

/* the real string, kept for screen readers and for selection */
.fl-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}