@font-face { font-family: "Stronger Than Yesterday"; src: url("/fonts/stronger-than-yesterday-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root { --bg: #fbfaf7; --ink: #141414; --muted: #5e5c57; --blue: #24429f; --pink: #f8c8e3; }

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 17px/1.5 "Instrument Sans", system-ui, sans-serif;
  display: grid; place-items: center; padding: 32px 16px;
}
::selection { background: var(--pink); color: var(--ink); }
main { width: 100%; max-width: 560px; }
.defs { position: absolute; }

/* Line boil: three copies of the name, each wobbled by a different noise seed, shown in turn. */
.name {
  display: grid;
  white-space: nowrap;
  font: 700 clamp(48px, 14vw, 88px)/1.25 "Stronger Than Yesterday", cursive;
  color: var(--blue);
}
.f { grid-area: 1 / 1; opacity: 0; animation: boil .75s step-end infinite; }
.f1 { filter: url(#boil1); }
.f2 { filter: url(#boil2); animation-delay: -.5s; }
.f3 { filter: url(#boil3); animation-delay: -.25s; }
@keyframes boil { 0% { opacity: 1; } 33.333% { opacity: 0; } }
/* Marker swipe, same as the main site: drawn left to right on load */
.hl {
  background: linear-gradient(var(--pink), var(--pink)) 0 88% / 100% 72% no-repeat;
  padding: 0 0.08em; margin: 0 -0.04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: hl-draw 0.9s cubic-bezier(0.65, 0, 0.25, 1) 0.45s both;
}
@keyframes hl-draw { from { background-size: 0% 72%; } }

@media (prefers-reduced-motion: reduce) {
  .f, .hl { animation: none; }
  .f1 { opacity: 1; }
}

.role { margin-top: 12px; color: var(--muted); }
.note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ink); }
.links { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }