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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

button, input { font: inherit; }

a { color: inherit; }

.skip {
  position: absolute;
  left: 8px;
  top: -48px;
  background: #fff;
  color: #111;
  padding: 8px 12px;
  z-index: 100;
  font-family: system-ui, sans-serif;
}

.skip:focus {
  position: fixed;
  top: 8px;
  left: 8px;
}

:focus { outline: none; }

:focus-visible {
  outline: 3px solid #ffe14a;
  outline-offset: 3px;
}

.frame { overflow: hidden; }

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.actions a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--chip-bg, #fff);
  color: var(--chip-ink, #160816);
  border: 2px solid var(--chip-line, transparent);
}

.actions a.ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.linkrow a {
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--chip-bg, #fff);
  color: var(--chip-ink, #160816);
}

.lede { font-size: 1.08rem; line-height: 1.55; max-width: 68ch; }

.split { display: grid; gap: 14px; }

@media (min-width: 800px) {
  .split.two { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}