/* Shared base for the concept mockups */
:root {
  --ink: #15110e;
  --paper: #f3ebdc;
  --pink: #f08c98;
  --brick: #a5462a;
  --muted: #b8aa98;
  --f-display: "Young Serif", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --f-script: "Allura", cursive;
  --bar-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }


.stream-pill {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .5rem 1rem;
  border-radius: 999px; background: var(--pink); color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .875rem; white-space: nowrap; transition: transform .2s var(--ease);
}
.stream-pill:hover { transform: translateY(-2px); }
.stream-pill svg { width: 12px; height: 12px; fill: currentColor; }
.skip-link {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; opacity: .75;
}
.skip-link:hover { opacity: 1; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}