@import url('/theme.css');
@import url('/pixel-focus.css');

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

:root {
  --site-canvas: var(--ink);
  --site-text: var(--paper);
  --site-muted: var(--muted);
  --site-rule: var(--line);
  --site-header: rgba(8, 8, 8, 0.96);
  --site-scanline: rgba(255, 255, 255, 0.028);
  --site-blit-field: rgba(255, 255, 255, 0.06);
  --site-blit-glow: rgba(255, 255, 255, 0.1);
  --site-blit-line: rgba(255, 255, 255, 0.7);
  --station-clearance: calc(clamp(1rem, 2vw, 1.75rem) + 5.25rem);
}

html[data-site-theme='light'] {
  --site-canvas: var(--paper);
  --site-text: var(--ink);
  --site-muted: #54544f;
  --site-rule: #8b8b85;
  --site-header: rgba(242, 242, 238, 0.97);
  --site-scanline: rgba(8, 8, 8, 0.035);
  --site-blit-field: rgba(8, 8, 8, 0.07);
  --site-blit-glow: rgba(8, 8, 8, 0.12);
  --site-blit-line: rgba(8, 8, 8, 0.6);
}

html {
  /* Keep the site in SDR, including Safari's View Transition snapshots. */
  dynamic-range-limit: standard;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html.channel-home:has(#site:target) {
  scroll-behavior: auto;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Space and the page keys cut to the next screenful instead of gliding to it.
   The picture is blitted into place and one retrace band chases it across the
   tube, a dropout line on its leading edge. Pointer scrolling stays smooth. */
.blit-scan {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.blit-scan.is-blitting {
  display: block;
}

.blit-scan::before,
.blit-scan::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0;
}

.blit-scan::before {
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--site-blit-field) 0 1px,
    transparent 1px 3px
  );
}

.blit-scan::after {
  top: 0;
  height: 20vh;
  background-image:
    linear-gradient(to top, var(--site-blit-line) 0 2px, transparent 2px),
    linear-gradient(to bottom, transparent, var(--site-blit-glow));
}

.blit-scan[data-blit='up']::after {
  background-image:
    linear-gradient(to bottom, var(--site-blit-line) 0 2px, transparent 2px),
    linear-gradient(to top, transparent, var(--site-blit-glow));
}

.blit-scan.is-blitting::before {
  animation: blit-field 180ms steps(1, end) both;
}

.blit-scan.is-blitting::after {
  animation: blit-band-down 180ms steps(1, end) both;
}

.blit-scan[data-blit='up'].is-blitting::after {
  animation-name: blit-band-up;
}

@keyframes blit-field {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blit-band-down {
  0% {
    opacity: 0.9;
    transform: translateY(-16vh);
  }
  35% {
    opacity: 0.75;
    transform: translateY(28vh);
  }
  70% {
    opacity: 0.5;
    transform: translateY(66vh);
  }
  100% {
    opacity: 0;
    transform: translateY(102vh);
  }
}

@keyframes blit-band-up {
  0% {
    opacity: 0.9;
    transform: translateY(96vh);
  }
  35% {
    opacity: 0.75;
    transform: translateY(52vh);
  }
  70% {
    opacity: 0.5;
    transform: translateY(14vh);
  }
  100% {
    opacity: 0;
    transform: translateY(-22vh);
  }
}

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

.channel-home {
  --tune-signal: var(--paper);
  --tune-ink: var(--ink);
}
.channel-blog {
  --tune-signal: var(--cyan);
  --tune-ink: var(--ink);
}
.channel-cv {
  --tune-signal: var(--yellow);
  --tune-ink: var(--ink);
}
.channel-contact {
  --tune-signal: var(--blue);
  --tune-ink: var(--paper);
}

/* Cross-document channel change: the picture loses vertical hold, burns down
   to one scan line, then the destination receiver catches the new signal. */
::view-transition {
  background: var(--tune-signal, var(--paper));
}

::view-transition-group(root) {
  z-index: 1;
  animation: none;
  background: var(--tune-signal, var(--paper));
}

::view-transition-old(root),
::view-transition-new(root) {
  height: 100%;
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

::view-transition-old(root) {
  animation: tune-picture-out 190ms steps(3, end) both;
}

::view-transition-new(root) {
  animation: tune-picture-in 500ms 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Adjacent posts keep the blog signal field, but trade the channel-change
   collapse for a directional tape-edit wipe. */
html.is-article-wipe-next::view-transition-old(root) {
  animation: article-wipe-next-out 190ms steps(3, end) both;
}

html.is-article-wipe-next::view-transition-new(root) {
  animation: article-wipe-next-in 500ms 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.is-article-wipe-previous::view-transition-old(root) {
  animation: article-wipe-previous-out 190ms steps(3, end) both;
}

html.is-article-wipe-previous::view-transition-new(root) {
  animation: article-wipe-previous-in 500ms 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Opening a programme from the blog guide is a short tape splice rather than
   a full retune. Closing it reverses the depth cue back into the listing. */
html.is-article-open::view-transition-old(root) {
  z-index: 2;
  animation: article-open-out 170ms steps(3, end) both;
}

html.is-article-open::view-transition-new(root) {
  z-index: 1;
  animation: article-open-in 360ms 85ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.is-article-close::view-transition-old(root) {
  z-index: 2;
  animation: article-close-out 170ms steps(3, end) both;
}

html.is-article-close::view-transition-new(root) {
  z-index: 1;
  animation: article-close-in 360ms 85ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html:is(.is-article-open, .is-article-close)::view-transition-group(station-header) {
  animation: hold-station-header 445ms linear both;
}

html:is(.is-article-open, .is-article-close)::view-transition-old(station-header) {
  animation: hold-old-station-header 445ms step-end both;
}

html:is(.is-article-open, .is-article-close)::view-transition-new(station-header) {
  animation: reveal-new-station-header 445ms step-end both;
}

/* Header navigation steps between adjacent station presets with a quick
   directional vertical-hold roll. The heavyweight tune remains reserved for
   entering a channel from the home programme guide. */
html.is-channel-step-next::view-transition-old(root) {
  z-index: 2;
  animation: channel-step-next-out 140ms steps(3, end) both;
}

html.is-channel-step-next::view-transition-new(root) {
  z-index: 1;
  animation: channel-step-next-in 300ms 55ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.is-channel-step-previous::view-transition-old(root) {
  z-index: 2;
  animation: channel-step-previous-out 140ms steps(3, end) both;
}

html.is-channel-step-previous::view-transition-new(root) {
  z-index: 1;
  animation: channel-step-previous-in 300ms 55ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html:is(.is-channel-step-next, .is-channel-step-previous)::view-transition-group(station-header) {
  animation: hold-station-header 355ms linear both;
}

html:is(.is-channel-step-next, .is-channel-step-previous)::view-transition-old(station-header) {
  animation: hold-old-station-header 355ms step-end both;
}

html:is(.is-channel-step-next, .is-channel-step-previous)::view-transition-new(station-header) {
  animation: reveal-new-station-header 355ms step-end both;
}

html:is(
    .is-article-open,
    .is-article-close,
    .is-article-wipe-next,
    .is-article-wipe-previous,
    .is-channel-step-next,
    .is-channel-step-previous,
    .is-channel-tune
  )
  .page-title {
  view-transition-name: none;
}

::view-transition-group(channel-title) {
  z-index: 4;
  animation-duration: 690ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(channel-title) {
  animation: tune-title-out 150ms ease-in both;
}

::view-transition-new(channel-title) {
  animation: tune-title-in 440ms 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Keep the shared tuner snapshot alive for the full tuning cycle. The old
   header remains visible until the last frame, where it atomically exchanges
   with the destination header instead of crossfading through transparency. */
::view-transition-group(station-header) {
  z-index: 2147483647;
  animation: hold-station-header 690ms linear both;
}

::view-transition-old(station-header) {
  animation: hold-old-station-header 690ms step-end both;
}

::view-transition-new(station-header) {
  animation: reveal-new-station-header 690ms step-end both;
}

@keyframes tune-picture-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
  34% {
    transform: translateX(-1.2%) scaleX(1.012);
  }
  67% {
    clip-path: inset(6% 0);
    filter: brightness(1.25) contrast(1.25) saturate(0.7);
    transform: translateX(1%) scaleX(1.02);
  }
  100% {
    clip-path: inset(49.82% 0);
    filter: brightness(6) contrast(2.2) saturate(0);
    transform: translateX(0) scaleX(1.035);
  }
}

@keyframes tune-picture-in {
  0% {
    clip-path: inset(49.82% 0);
    filter: brightness(5) contrast(2) saturate(0);
    transform: translateX(0) scaleX(1.025);
  }
  18% {
    clip-path: inset(44% 0);
    filter: brightness(2.4) contrast(1.6) saturate(0.35);
    transform: translateX(1.4%) scaleX(1.018);
  }
  34% {
    clip-path: inset(27% 0);
    filter: brightness(1.65) contrast(1.35) saturate(0.65);
    transform: translateX(-0.8%) scaleX(1.012);
  }
  52% {
    clip-path: inset(10% 0);
    filter: brightness(1.2) contrast(1.15) saturate(0.85);
    transform: translateX(0.35%) scaleX(1.006);
  }
  100% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
}

@keyframes article-wipe-next-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
  34% {
    clip-path: inset(0 14% 0 0);
    filter: brightness(1.08) contrast(1.08) saturate(0.92);
    transform: translateX(-0.3%) scaleX(1.006);
  }
  67% {
    clip-path: inset(0 62% 0 0);
    filter: brightness(1.35) contrast(1.25) saturate(0.68);
    transform: translateX(-0.8%) scaleX(1.012);
  }
  100% {
    clip-path: inset(0 100% 0 0);
    filter: brightness(3) contrast(1.8) saturate(0);
    transform: translateX(-1.2%) scaleX(1.018);
  }
}

@keyframes article-wipe-next-in {
  0% {
    clip-path: inset(0 0 0 100%);
    filter: brightness(5) contrast(2) saturate(0);
    transform: translateX(1.2%) scaleX(1.018);
  }
  18% {
    clip-path: inset(0 0 0 82%);
    filter: brightness(2.4) contrast(1.6) saturate(0.35);
    transform: translateX(0.8%) scaleX(1.014);
  }
  34% {
    clip-path: inset(0 0 0 56%);
    filter: brightness(1.65) contrast(1.35) saturate(0.65);
    transform: translateX(-0.4%) scaleX(1.01);
  }
  52% {
    clip-path: inset(0 0 0 26%);
    filter: brightness(1.2) contrast(1.15) saturate(0.85);
    transform: translateX(0.2%) scaleX(1.004);
  }
  100% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
}

@keyframes article-wipe-previous-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
  34% {
    clip-path: inset(0 0 0 14%);
    filter: brightness(1.08) contrast(1.08) saturate(0.92);
    transform: translateX(0.3%) scaleX(1.006);
  }
  67% {
    clip-path: inset(0 0 0 62%);
    filter: brightness(1.35) contrast(1.25) saturate(0.68);
    transform: translateX(0.8%) scaleX(1.012);
  }
  100% {
    clip-path: inset(0 0 0 100%);
    filter: brightness(3) contrast(1.8) saturate(0);
    transform: translateX(1.2%) scaleX(1.018);
  }
}

@keyframes article-wipe-previous-in {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: brightness(5) contrast(2) saturate(0);
    transform: translateX(-1.2%) scaleX(1.018);
  }
  18% {
    clip-path: inset(0 82% 0 0);
    filter: brightness(2.4) contrast(1.6) saturate(0.35);
    transform: translateX(-0.8%) scaleX(1.014);
  }
  34% {
    clip-path: inset(0 56% 0 0);
    filter: brightness(1.65) contrast(1.35) saturate(0.65);
    transform: translateX(0.4%) scaleX(1.01);
  }
  52% {
    clip-path: inset(0 26% 0 0);
    filter: brightness(1.2) contrast(1.15) saturate(0.85);
    transform: translateX(-0.2%) scaleX(1.004);
  }
  100% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scaleX(1);
  }
}

@keyframes article-open-out {
  0% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scale(1);
  }
  34% {
    clip-path: inset(0.5% 0);
    filter: brightness(1.18) contrast(1.22) saturate(0.82);
    transform: translateX(-0.9%) scale(1.018);
  }
  67% {
    clip-path: inset(1.5% 0);
    filter: brightness(0.68) contrast(1.6) saturate(0.38);
    transform: translateX(1.2%) scale(1.048);
  }
  100% {
    opacity: 0;
    clip-path: inset(3.5% 0);
    filter: brightness(1.55) contrast(1.65) saturate(0.18);
    transform: translateX(-0.8%) scale(1.08);
  }
}

@keyframes article-open-in {
  0% {
    opacity: 0;
    clip-path: inset(4% 0);
    filter: brightness(0.62) contrast(1.65) saturate(0.3);
    transform: translateX(1.2%) scale(0.92);
  }
  14% {
    opacity: 1;
  }
  42% {
    clip-path: inset(1% 0);
    filter: brightness(1.22) contrast(1.28) saturate(0.72);
    transform: translateX(-0.65%) scale(0.982);
  }
  72% {
    clip-path: inset(0.25% 0);
    filter: brightness(0.94) contrast(1.08) saturate(0.94);
    transform: translateX(0.2%) scale(1.008);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scale(1);
  }
}

@keyframes article-close-out {
  0% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scale(1);
  }
  34% {
    clip-path: inset(0.5% 0);
    filter: brightness(1.18) contrast(1.22) saturate(0.82);
    transform: translateX(0.9%) scale(0.982);
  }
  67% {
    clip-path: inset(1.5% 0);
    filter: brightness(0.68) contrast(1.6) saturate(0.38);
    transform: translateX(-1.2%) scale(0.952);
  }
  100% {
    opacity: 0;
    clip-path: inset(3.5% 0);
    filter: brightness(1.55) contrast(1.65) saturate(0.18);
    transform: translateX(0.8%) scale(0.92);
  }
}

@keyframes article-close-in {
  0% {
    opacity: 0;
    clip-path: inset(4% 0);
    filter: brightness(0.62) contrast(1.65) saturate(0.3);
    transform: translateX(-1.2%) scale(1.08);
  }
  14% {
    opacity: 1;
  }
  42% {
    clip-path: inset(1% 0);
    filter: brightness(1.22) contrast(1.28) saturate(0.72);
    transform: translateX(0.65%) scale(1.018);
  }
  72% {
    clip-path: inset(0.25% 0);
    filter: brightness(0.94) contrast(1.08) saturate(0.94);
    transform: translateX(-0.2%) scale(0.992);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0) scale(1);
  }
}

@keyframes channel-step-next-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateY(0) scale(1);
  }
  34% {
    clip-path: inset(0 0 8%);
    filter: brightness(1.08) contrast(1.12) saturate(0.9);
    transform: translateY(-0.7%) scaleX(1.004);
  }
  67% {
    clip-path: inset(0 0 46%);
    filter: brightness(1.3) contrast(1.3) saturate(0.68);
    transform: translateY(-2.2%) scaleX(1.008);
  }
  100% {
    clip-path: inset(0 0 100%);
    filter: brightness(1.75) contrast(1.5) saturate(0.35);
    transform: translateY(-5%) scaleX(1.012);
  }
}

@keyframes channel-step-next-in {
  0% {
    clip-path: inset(100% 0 0);
    filter: brightness(1.65) contrast(1.45) saturate(0.4);
    transform: translateY(5%) scaleX(1.012);
  }
  24% {
    clip-path: inset(68% 0 0);
    filter: brightness(1.3) contrast(1.3) saturate(0.65);
    transform: translateY(2.4%) scaleX(1.008);
  }
  50% {
    clip-path: inset(24% 0 0);
    filter: brightness(1.12) contrast(1.14) saturate(0.86);
    transform: translateY(-0.45%) scaleX(1.004);
  }
  100% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes channel-step-previous-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateY(0) scale(1);
  }
  34% {
    clip-path: inset(8% 0 0);
    filter: brightness(1.08) contrast(1.12) saturate(0.9);
    transform: translateY(0.7%) scaleX(1.004);
  }
  67% {
    clip-path: inset(46% 0 0);
    filter: brightness(1.3) contrast(1.3) saturate(0.68);
    transform: translateY(2.2%) scaleX(1.008);
  }
  100% {
    clip-path: inset(100% 0 0);
    filter: brightness(1.75) contrast(1.5) saturate(0.35);
    transform: translateY(5%) scaleX(1.012);
  }
}

@keyframes channel-step-previous-in {
  0% {
    clip-path: inset(0 0 100%);
    filter: brightness(1.65) contrast(1.45) saturate(0.4);
    transform: translateY(-5%) scaleX(1.012);
  }
  24% {
    clip-path: inset(0 0 68%);
    filter: brightness(1.3) contrast(1.3) saturate(0.65);
    transform: translateY(-2.4%) scaleX(1.008);
  }
  50% {
    clip-path: inset(0 0 24%);
    filter: brightness(1.12) contrast(1.14) saturate(0.86);
    transform: translateY(0.45%) scaleX(1.004);
  }
  100% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes tune-title-out {
  to {
    opacity: 0;
    filter: brightness(2.4) saturate(0);
  }
}

@keyframes tune-title-in {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: brightness(1.8) drop-shadow(-3px 0 rgba(255, 35, 70, 0.85))
      drop-shadow(3px 0 rgba(35, 130, 255, 0.85));
  }
  42% {
    opacity: 1;
    clip-path: inset(0 18% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) drop-shadow(0 0 transparent);
  }
}

@keyframes hold-station-header {
  from,
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes hold-old-station-header {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes reveal-new-station-header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tune-dissolve-out {
  to {
    opacity: 0;
  }
}
@keyframes tune-dissolve-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Theme changes behave like a receiver changing picture polarity: the outgoing
   picture tears into a hot center scan line before the new palette catches. */
.theme-shift-osd {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  justify-content: flex-end;
  align-items: flex-start;
  padding: max(5vmin, calc(env(safe-area-inset-top) + 2vmin))
    max(5vw, calc(env(safe-area-inset-right) + 2vw));
  pointer-events: none;
  color: #fff;
  view-transition-name: theme-shift-osd;
}

.theme-shift-osd::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 -3px rgba(0, 190, 255, 0.38),
    0 3px rgba(255, 20, 70, 0.38),
    0 0 22px rgba(255, 255, 255, 0.82);
}

.theme-shift-osd__meter {
  height: clamp(1.5rem, 4.2vw, 3rem);
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(0.2rem, 0.45vw, 0.35rem);
  filter: drop-shadow(-2px 0 rgba(255, 0, 64, 0.7)) drop-shadow(2px 0 rgba(0, 110, 255, 0.7));
}

.theme-shift-osd__meter i {
  width: clamp(0.22rem, 0.55vw, 0.38rem);
  display: block;
  background: currentColor;
  opacity: 0.28;
}

.theme-shift-osd__meter i:nth-child(1) {
  height: 33%;
  opacity: 1;
}
.theme-shift-osd__meter i:nth-child(2) {
  height: 66%;
}
.theme-shift-osd__meter i:nth-child(3) {
  height: 100%;
}
.theme-shift-osd[data-level='light'] .theme-shift-osd__meter i {
  opacity: 1;
}

html.is-theme-shifting .theme-shift-osd,
html.is-theme-shifting-fallback .theme-shift-osd {
  display: flex;
}

html.is-theme-shifting .page-title,
html.is-theme-shifting .station-header {
  view-transition-name: none;
}

html.is-theme-shifting::view-transition {
  background: #000;
}

html.is-theme-shifting::view-transition-group(root) {
  z-index: 1;
  animation: none;
  background: #000;
}

html.is-theme-shifting::view-transition-old(root) {
  z-index: 1;
  animation: theme-luma-picture-out 580ms steps(1, end) both;
}

html.is-theme-shifting::view-transition-new(root) {
  z-index: 2;
  animation: theme-luma-picture-in 580ms steps(1, end) both;
}

html.is-theme-shifting::view-transition-group(theme-shift-osd) {
  z-index: 2147483647;
  animation: none;
}

html.is-theme-shifting::view-transition-old(theme-shift-osd) {
  opacity: 0;
  animation: none;
}

html.is-theme-shifting::view-transition-new(theme-shift-osd) {
  animation: theme-luma-osd-flash 580ms steps(1, end) both;
}

@keyframes theme-luma-picture-out {
  0% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translate(0) scale(1);
  }
  12% {
    filter: brightness(1.45) contrast(1.35) saturate(0.42);
    transform: translate(-1.4%, 1.2%) scale(1.02, 0.99);
  }
  24% {
    filter: brightness(0.76) contrast(1.8) saturate(0.15);
    transform: translate(1.2%, -1.1%) scale(1.012, 1.018);
  }
  36% {
    clip-path: inset(7% 0 3%);
    filter: brightness(1.85) contrast(1.5) saturate(0.08);
    transform: translate(-0.9%, 3.5%) scale(1.035, 0.96);
  }
  46% {
    clip-path: inset(28% 0 20%);
    filter: brightness(2.6) contrast(1.75) saturate(0);
    transform: translate(1.1%, -2%) scale(1.045, 0.92);
  }
  52% {
    clip-path: inset(49.72% 0);
    filter: brightness(6) contrast(2.2) saturate(0);
    transform: translateX(-0.4%) scaleX(1.06);
  }
  62%,
  100% {
    opacity: 0;
    clip-path: inset(49.82% 0);
    filter: brightness(6) contrast(2.2) saturate(0);
    transform: translateX(0) scaleX(1.065);
  }
}

@keyframes theme-luma-picture-in {
  0%,
  48% {
    opacity: 0;
    clip-path: inset(49.82% 0);
    filter: brightness(6) contrast(2.2) saturate(0);
    transform: translateX(0) scaleX(1.055);
  }
  52% {
    opacity: 1;
    clip-path: inset(49.72% 0);
    filter: brightness(5) contrast(2) saturate(0);
    transform: translateX(0.8%) scaleX(1.05);
  }
  60% {
    clip-path: inset(43% 0);
    filter: brightness(2.4) contrast(1.65) saturate(0.3);
    transform: translateX(-1.2%) scale(1.04, 0.985);
  }
  70% {
    clip-path: inset(27% 0);
    filter: brightness(1.65) contrast(1.4) saturate(0.58);
    transform: translateX(0.9%) scale(1.025, 1.01);
  }
  80% {
    clip-path: inset(11% 0);
    filter: brightness(1.3) contrast(1.2) saturate(0.78);
    transform: translateX(-0.45%) scaleX(1.014);
  }
  90% {
    clip-path: inset(2% 0);
    filter: brightness(1.12) contrast(1.08) saturate(0.92);
    transform: translateX(0.2%) scaleX(1.006);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translate(0) scale(1);
  }
}

@keyframes theme-luma-osd-flash {
  0% {
    opacity: 0;
    transform: translateY(-2%);
  }
  6% {
    opacity: 1;
    transform: translateY(0);
  }
  24% {
    opacity: 1;
    transform: translateY(-1%);
  }
  36% {
    opacity: 0.62;
    transform: translateY(1.5%);
  }
  48% {
    opacity: 1;
    transform: translateY(-2%);
  }
  72% {
    opacity: 1;
    transform: translateY(0.8%);
  }
  90% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateY(-1%);
  }
}

@keyframes theme-luma-osd-reduced {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 0;
  }
}

html.is-theme-shifting-fallback .station,
html.is-theme-shifting-fallback .site-page {
  animation: theme-luma-fallback 520ms steps(1, end) both;
}

html.is-theme-shifting-fallback .theme-shift-osd {
  animation: theme-luma-osd-flash 520ms steps(1, end) both;
}

@keyframes theme-luma-fallback {
  0% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0);
  }
  18% {
    filter: brightness(1.55) contrast(1.4) saturate(0.2);
    transform: translateX(-1%);
  }
  34% {
    filter: brightness(0.78) contrast(1.75) saturate(0.08);
    transform: translateX(1%);
  }
  50% {
    filter: brightness(2.2) contrast(1.7) saturate(0);
    transform: scaleY(0.985);
  }
  68% {
    filter: brightness(1.4) contrast(1.3) saturate(0.5);
    transform: translateX(-0.5%);
  }
  84% {
    filter: brightness(1.12) contrast(1.08) saturate(0.85);
    transform: translateX(0.2%);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: translateX(0);
  }
}

/* Rewind is the inverse of tuning: the current programme tears downward in
   stepped tape jumps, uncovering the test card that lives before it. */
.rewind-osd {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  padding: max(5vmin, calc(env(safe-area-inset-top) + 2vmin))
    max(5vw, calc(env(safe-area-inset-right) + 2vw));
  pointer-events: none;
  color: #fff;
  view-transition-name: rewind-osd;
}

.rewind-osd::after {
  content: '';
  position: absolute;
  top: 70%;
  right: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 -3px rgba(0, 190, 255, 0.34),
    0 3px rgba(255, 20, 70, 0.34),
    0 0 18px rgba(255, 255, 255, 0.72);
}

.rewind-osd svg {
  width: clamp(2.25rem, 6vw, 4rem);
  height: auto;
  display: block;
  fill: currentColor;
  filter: drop-shadow(-2px 0 rgba(255, 0, 64, 0.7)) drop-shadow(2px 0 rgba(0, 110, 255, 0.7));
}
html.is-rewinding .rewind-osd {
  display: flex;
}
html.is-rewinding .station-header {
  view-transition-name: none;
}

html.is-rewinding::view-transition {
  background: #000;
}

html.is-rewinding::view-transition-group(root) {
  z-index: 1;
  animation: none;
  background: #000;
}

html.is-rewinding::view-transition-old(root) {
  z-index: 2;
  animation: rewind-picture-out 620ms steps(1, end) both;
}

html.is-rewinding::view-transition-new(root) {
  z-index: 1;
  animation: rewind-picture-in 620ms steps(1, end) both;
}

html.is-rewinding::view-transition-group(rewind-osd) {
  z-index: 2147483647;
  animation: none;
}

html.is-rewinding::view-transition-old(rewind-osd) {
  opacity: 0;
  animation: none;
}

html.is-rewinding::view-transition-new(rewind-osd) {
  animation: rewind-osd-flash 620ms steps(1, end) both;
}

@keyframes rewind-picture-out {
  0% {
    clip-path: inset(0);
    filter: brightness(1) contrast(1) saturate(1);
    transform: translate(0) scale(1);
  }
  14% {
    filter: brightness(1.45) contrast(1.35) saturate(0.35);
    transform: translate(-1.6%, 2.5%) scale(1.025, 0.985);
  }
  28% {
    filter: brightness(0.82) contrast(1.8) saturate(0.2);
    transform: translate(1.2%, -1.5%) scale(1.012, 1.02);
  }
  42% {
    filter: brightness(1.7) contrast(1.45) saturate(0.1);
    transform: translate(-0.8%, 6%) scale(1.035, 0.97);
  }
  56% {
    clip-path: inset(14% 0 0);
    filter: brightness(1.25) contrast(1.8) saturate(0.18);
    transform: translate(1.4%, 12%) scale(1.02, 0.96);
  }
  70% {
    clip-path: inset(38% 0 0);
    filter: brightness(1.9) contrast(1.65) saturate(0);
    transform: translate(-1%, 27%) scale(1.04, 0.93);
  }
  84% {
    clip-path: inset(72% 0 0);
    filter: brightness(2.8) contrast(2) saturate(0);
    transform: translate(0.7%, 48%) scale(1.055, 0.9);
  }
  100% {
    clip-path: inset(100% 0 0);
    filter: brightness(4) contrast(2.2) saturate(0);
    transform: translate(0, 72%) scale(1.06, 0.86);
  }
}

@keyframes rewind-picture-in {
  0% {
    filter: brightness(0.45) contrast(2) saturate(0.15);
    transform: translateY(-2%) scale(1.018);
  }
  28% {
    filter: brightness(0.72) contrast(1.75) saturate(0.35);
    transform: translate(1%, -1%) scale(1.014);
  }
  56% {
    filter: brightness(1.55) contrast(1.35) saturate(0.65);
    transform: translate(-0.65%, 0) scale(1.008);
  }
  84% {
    filter: brightness(1.15) contrast(1.12) saturate(0.9);
    transform: translate(0.25%, 0) scale(1.003);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: translate(0) scale(1);
  }
}

@keyframes rewind-osd-flash {
  0% {
    opacity: 0;
    transform: translateY(-2%);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  }
  28% {
    opacity: 1;
    transform: translateY(-1.5%);
  }
  42% {
    opacity: 0.72;
    transform: translateY(2%);
  }
  56% {
    opacity: 1;
    transform: translateY(-3%);
  }
  84% {
    opacity: 1;
    transform: translateY(-16%);
  }
  100% {
    opacity: 0;
    transform: translateY(-22%);
  }
}

/* Older Safari releases do not apply dynamic-range-limit to generated
   snapshots. On HDR displays, suppress the overbright transition filters so
   their compositing layers cannot promote the display into EDR. */
@media (dynamic-range: high) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(channel-title),
  ::view-transition-new(channel-title) {
    filter: none !important;
  }

  html.is-theme-shifting-fallback .station,
  html.is-theme-shifting-fallback .site-page {
    filter: none !important;
  }
}

.station {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--site-text);
  background: var(--site-canvas);
  font-family: var(--body);
  color-scheme: dark;
}

html[data-site-theme='light'] .station,
html[data-site-theme='light'] .site-page {
  color-scheme: light;
}

.station a,
.site-page a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

.station a:focus-visible,
.site-page a:focus-visible,
.theme-toggle:focus-visible {
  outline: 3px solid var(--site-text);
  outline-offset: 5px;
}

.station-header {
  position: sticky;
  top: 0;
  z-index: 20;
  view-transition-name: station-header;
  color: var(--site-text);
  background: var(--site-header);
}

.station-ident {
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto;
  align-items: stretch;
  border-bottom: 2px solid var(--site-text);
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.station-ident__brand-zone {
  min-width: 0;
  display: flex;
  align-items: center;
  position: relative;
}

.station-ident__brand-lockup {
  display: flex;
  align-items: center;
  padding: 0.75rem clamp(1rem, 3vw, 3rem);
}

.station-ident__brand {
  display: flex;
  align-items: center;
  padding: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

.station-ident__brand-name {
  display: block;
}

.tally-control {
  --tally-idle: #350909;
  --tally-ready: #750000;
  --tally-edge: #702020;
  --tally-hot: #ff2448;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: grid;
  place-items: center;
  margin-left: -0.7rem;
  margin-right: calc(0.5em - 0.7rem);
  padding: 0;
  color: var(--red);
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

html[data-site-theme='light'] .tally-control {
  --tally-idle: #b9938f;
  --tally-ready: #8c211f;
  --tally-edge: #80504b;
}

.tally-control:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--site-text);
}

.tally-control__lamp {
  position: relative;
  width: 0.65em;
  height: 0.65em;
  display: block;
  background: var(--tally-idle);
  border: 1px solid var(--tally-edge);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  transform: scale(1);
  transition:
    background 140ms linear,
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tally-control__lamp::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 140ms linear,
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tally-control:is(:hover, :focus-visible) .tally-control__lamp {
  background: var(--tally-ready);
  transform: scale(0.88);
}

.tally-control:is(:hover, :focus-visible) .tally-control__lamp::after,
.station-header.is-signal-testing .tally-control__lamp::after {
  opacity: 0.8;
  transform: scale(1);
}

.tally-control:active .tally-control__lamp {
  transform: scale(0.7);
}

.station-header.is-signal-testing .tally-control__lamp {
  animation: tally-transmit 720ms steps(1, end) both;
}

.station-header.is-signal-testing .station-ident__brand-name {
  will-change: filter, transform;
  animation: station-ident-lock 560ms steps(4, end) both;
}

.station-header.is-signal-testing .signal-ruler span {
  animation: ident-ruler-lock 420ms var(--ident-delay, 0ms) steps(4, end) both;
}

.station-header.is-signal-testing .signal-ruler span:nth-child(1) {
  --ident-delay: 0ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(2) {
  --ident-delay: 35ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(3) {
  --ident-delay: 70ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(4) {
  --ident-delay: 105ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(5) {
  --ident-delay: 140ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(6) {
  --ident-delay: 175ms;
}
.station-header.is-signal-testing .signal-ruler span:nth-child(7) {
  --ident-delay: 210ms;
}

.return-signal {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: grid;
  place-items: center;
  margin-left: -0.35rem;
  padding: 0;
  color: var(--site-text);
  background: var(--site-canvas);
  border: 1px solid var(--site-rule);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(0);
}

.return-signal svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: currentColor;
}

.return-signal:hover {
  color: var(--site-canvas);
  background: var(--site-text);
  border-color: var(--site-text);
  box-shadow: none;
}

.return-signal:focus-visible {
  outline: 3px solid var(--site-text);
  outline-offset: 4px;
}

.theme-toggle {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.55rem;
  padding: 0 0.7rem;
  color: var(--site-text);
  background: var(--site-canvas);
  border: 1px solid var(--site-rule);
  border-radius: 0;
  appearance: none;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-toggle__icon {
  width: 1rem;
  height: 1rem;
  display: block;
  overflow: visible;
  transform: rotate(0deg);
}

.theme-toggle__icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.theme-toggle__icon path {
  fill: currentColor;
}

html[data-site-theme='light'] .theme-toggle__icon {
  transform: rotate(180deg);
}

.theme-toggle:hover {
  color: var(--site-canvas);
  background: var(--site-text);
  border-color: var(--site-text);
}

.station-ident nav {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.station-ident nav a {
  min-width: 5.5rem;
  display: grid;
  place-content: center;
  padding: 0.7rem 1rem;
  text-decoration: none;
  border-left: 1px solid var(--site-rule);
}

.station-ident nav a .station-ident__name {
  display: block;
  color: inherit;
  font-size: inherit;
  text-align: center;
}

.station-ident nav a:hover {
  color: var(--site-canvas);
  background: var(--site-text);
}

.station-ident nav a:hover span {
  color: var(--site-canvas);
}

.station-ident nav a[aria-current='page'] {
  color: var(--tune-ink, var(--ink));
  background: var(--tune-signal, var(--paper));
}

.station-ident nav a[aria-current='page'] span {
  color: inherit;
}

.station-ident nav a[href='/blog'] {
  --nav-signal: var(--cyan);
  --nav-ink: var(--ink);
}

.station-ident nav a[href='/cv'] {
  --nav-signal: var(--yellow);
  --nav-ink: var(--ink);
}

.station-ident nav a[href='/contact'] {
  --nav-signal: var(--blue);
  --nav-ink: var(--paper);
}

.station-ident nav a[aria-current='page'].is-tuning-away {
  color: var(--site-text);
  background: transparent;
}

.station-ident nav a.is-tuning-target {
  color: var(--nav-ink, var(--ink));
  background: var(--nav-signal, var(--paper));
}

.station-ident nav a.is-tuning-target span {
  color: inherit;
}

@keyframes tally-transmit {
  0% {
    background: #fff;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.55),
      0 0 14px rgba(255, 36, 72, 0.9);
    transform: scale(0.72);
  }
  12%,
  82% {
    background: var(--tally-hot);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.35),
      0 0 18px rgba(255, 36, 72, 0.72);
    transform: scale(1);
  }
  100% {
    background: var(--tally-idle);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
    transform: scale(1);
  }
}

@keyframes station-ident-lock {
  0%,
  100% {
    filter: none;
    text-shadow: none;
    transform: translateX(0);
  }
  24% {
    filter: contrast(1.35);
    text-shadow:
      -2px 0 rgba(0, 192, 192, 0.85),
      2px 0 rgba(192, 0, 0, 0.85);
    transform: translateX(2px);
  }
  48% {
    filter: brightness(1.35) contrast(1.2);
    text-shadow:
      1px 0 rgba(0, 192, 192, 0.7),
      -2px 0 rgba(192, 0, 0, 0.75);
    transform: translateX(-1px);
  }
}

@keyframes ident-ruler-lock {
  0%,
  100% {
    clip-path: inset(0);
    filter: brightness(var(--signal-brightness, 1));
  }
  32% {
    clip-path: inset(43% 0);
    filter: brightness(2.4) saturate(0.25);
  }
  58% {
    clip-path: inset(12% 0 56%);
    filter: brightness(1.65) saturate(1.5);
  }
}

@keyframes tally-transmit-reduced {
  0%,
  75% {
    background: var(--tally-hot);
  }
  100% {
    background: var(--tally-idle);
  }
}

.signal-ruler {
  height: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}

.signal-ruler span {
  min-width: 0;
  margin-block: -2px;
  transform: translate3d(0, var(--signal-shift, 0px), 0) skewX(var(--signal-skew, 0deg))
    scaleX(var(--signal-scale, 1));
  transform-origin: 50% 50%;
  filter: brightness(var(--signal-brightness, 1));
  transition:
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 160ms linear;
}

.signal-ruler span:nth-child(1),
.signal-band span:nth-child(1) {
  background: #c0c0c0;
}
.signal-ruler span:nth-child(2),
.signal-band span:nth-child(2) {
  background: var(--yellow);
}
.signal-ruler span:nth-child(3),
.signal-band span:nth-child(3) {
  background: var(--cyan);
}
.signal-ruler span:nth-child(4),
.signal-band span:nth-child(4) {
  background: var(--green);
}
.signal-ruler span:nth-child(5),
.signal-band span:nth-child(5) {
  background: var(--magenta);
}
.signal-ruler span:nth-child(6),
.signal-band span:nth-child(6) {
  background: var(--red);
}
.signal-ruler span:nth-child(7),
.signal-band span:nth-child(7) {
  background: var(--blue);
}

.sign-on {
  display: grid;
  grid-template-columns: minmax(14rem, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: clamp(3rem, 9vw, 10rem);
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
  border-bottom: 1px solid var(--site-rule);
}

.sign-on h2,
.page-title {
  max-width: 11ch;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sign-on h2 {
  max-width: 9ch;
}

@property --title-split {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.6px;
}

@property --title-bias {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --title-chroma {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.42;
}

.page-title {
  view-transition-name: channel-title;
}

.page-title.is-glitch-ready {
  position: relative;
  cursor: crosshair;
  transform: translate3d(var(--title-shift, 0px), 0, 0) skewX(var(--title-skew, 0deg));
  transition:
    --title-split 200ms linear,
    --title-bias 200ms linear,
    --title-chroma 200ms linear,
    transform 200ms ease-out;
}

.page-title__source,
.page-title__band {
  display: block;
}

.page-title.is-glitch-ready .page-title__source {
  color: transparent;
}

.page-title__band {
  position: absolute;
  inset: 0;
  color: inherit;
  pointer-events: none;
  clip-path: inset(var(--title-top) -12% var(--title-bottom) -12%);
  transform: translate3d(var(--title-band-shift, 0em), 0, 0);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  text-shadow:
    calc(var(--title-bias) - var(--title-split)) 0 0 rgba(255, 58, 88, var(--title-chroma)),
    calc(var(--title-bias) + var(--title-split)) 0 0 rgba(58, 146, 255, var(--title-chroma));
}

.page-title__dropout {
  position: absolute;
  left: -5%;
  right: -5%;
  top: var(--title-dropout-y, 40%);
  height: 0.055em;
  opacity: var(--title-dropout-opacity, 0);
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.page-title.is-tearing {
  transition: none;
  will-change: transform;
}

.page-title.is-tearing .page-title__band {
  transition: none;
  will-change: transform;
}

.sign-on__copy {
  max-width: 68ch;
  align-self: start;
}

.sign-on__copy > p:first-child {
  color: var(--site-text);
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  line-height: 1.4;
}

.guide {
  min-height: 0;
  display: flex;
  flex: 1;
}

.program-guide {
  min-height: 0;
  display: grid;
  flex: 1;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--site-rule);
}

.program-row {
  display: grid;
  grid-template-columns: clamp(5rem, 8vw, 8rem) minmax(12rem, 1fr) 2rem;
  align-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3dvh, 3rem) clamp(1rem, 5vw, 5rem);
  color: var(--site-text);
  border-top: 1px solid var(--site-rule);
  text-decoration: none;
  transition:
    color 120ms linear,
    background-color 120ms linear;
}

.program-row:first-child {
  border-top: 0;
}

.program-row__marker {
  width: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(0.28rem, 0.55vw, 0.5rem);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.program-row__marker i {
  height: clamp(0.3rem, 0.55vw, 0.5rem);
  display: block;
  background: currentColor;
  box-shadow:
    -2px 0 rgba(255, 35, 70, 0.72),
    2px 0 rgba(35, 130, 255, 0.72);
}

.program-row__marker i:first-child {
  width: 72%;
  margin-left: 20%;
}

.program-row__marker i:nth-child(2) {
  width: 100%;
}

.program-row__marker i:last-child {
  width: 58%;
  margin-left: 8%;
}

.program-row:hover .program-row__marker {
  transform: translateX(0.35rem) skewX(-5deg);
}

.program-row__content {
  min-width: 0;
}

.program-row__title {
  font-family: var(--display);
  font-size: clamp(4.5rem, 8vw, 6rem);
  line-height: 0.78;
  letter-spacing: -0.02em;
}

.program-row__arrow {
  width: 1.4rem;
  height: 1.4rem;
  align-self: center;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.program-row:hover .program-row__arrow {
  transform: translateX(0.5rem) rotate(45deg);
}

.program-row--blog:hover {
  color: var(--ink);
  background: var(--cyan);
}
.program-row--cv:hover {
  color: var(--ink);
  background: var(--yellow);
}
.program-row--contact:hover {
  color: var(--paper);
  background: var(--blue);
}

/* Interior channels */
.site-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--site-text);
  background: var(--site-canvas);
  font-family: var(--body);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

.site-page h1,
.site-page h2,
.site-page p,
.site-page dl,
.site-page dd {
  margin: 0;
}

.site-page--contact {
  color: var(--paper);
  background: var(--blue);
  --site-scanline: rgba(255, 255, 255, 0.028);
  --site-blit-field: rgba(255, 255, 255, 0.06);
  --site-blit-glow: rgba(255, 255, 255, 0.1);
  --site-blit-line: rgba(255, 255, 255, 0.7);
}

.site-page--contact .station-ident {
  border-color: var(--site-text);
}

.site-page--contact .channel-main a:focus-visible {
  outline-color: var(--paper);
}

.site-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--site-scanline) 0 1px, transparent 1px 4px);
}

.channel-main {
  width: min(100%, 96rem);
  flex: 1;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem) 8rem;
}

.channel-lead {
  width: min(100%, 64rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.channel-lead .page-title {
  max-width: 14ch;
}

.channel-lead__copy {
  max-width: 68ch;
  padding-bottom: 0.6rem;
}

.channel-lead__copy p {
  color: var(--site-muted);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
}

.channel-lead__copy p + p {
  margin-top: 1rem;
}

.channel-main--contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

/* Title, band and address all share the channel's left edge. */
.channel-main--contact .channel-lead {
  width: 100%;
  margin-inline: 0;
}

/* The test card's bars, thin, standing in for a divider rule. The last bar is
   the channel's own blue, so the band dissolves into the field. */
.signal-band {
  height: clamp(0.55rem, 1.2vw, 0.9rem);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}

.link-glitch {
  --link-signal: var(--cyan);
  --link-ink: var(--ink);
  --link-split-hot: rgba(192, 0, 0, 0.92);
  --link-split-cold: rgba(0, 0, 192, 0.92);
}

.link-glitch[data-glitch-text] {
  position: relative;
  isolation: isolate;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.link-glitch__text {
  position: relative;
  z-index: 1;
}

.direct-line {
  align-self: start;
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 8.5rem);
  line-height: 0.88;
  text-decoration-color: rgba(242, 242, 238, 0.72);
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.12em;
  transition:
    color 140ms ease-out,
    background-color 140ms ease-out,
    box-shadow 140ms ease-out,
    text-decoration-color 140ms ease-out;
}

/* On simple text links, two short-lived duplicate slices make the shared lock
   read like horizontal sync catching rather than a generic text shake. */
.link-glitch[data-glitch-text]::before,
.link-glitch[data-glitch-text]::after {
  content: attr(data-glitch-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--link-ink);
  background: var(--link-signal);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
}

.link-glitch[data-glitch-text]:is(:hover, :focus-visible)::before {
  animation: link-text-sync-upper 300ms steps(1, end) both;
}

.link-glitch[data-glitch-text]:is(:hover, :focus-visible)::after {
  animation: link-text-sync-lower 300ms steps(1, end) both;
}

/* Missing channel */
.channel-main--error {
  width: min(100%, 76rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-content: center;
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
}

.error-lead__code {
  color: var(--cyan);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.12em;
}

.error-lead .page-title {
  max-width: 8ch;
  margin-block-start: 0.45rem;
}

.error-lead .error-lead__message {
  max-width: 30ch;
  margin-block-start: 1.75rem;
  color: var(--site-muted);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

.error-actions a {
  padding: 0.75rem 1rem;
  border: 1px solid var(--site-rule);
  color: var(--site-text);
  text-decoration: none;
  transition:
    color 140ms ease-out,
    border-color 140ms ease-out,
    background-color 140ms ease-out;
}

.error-actions a:is(:hover, :focus-visible) {
  border-color: var(--cyan);
  color: var(--ink);
  background: var(--cyan);
}

.error-latest {
  padding-block-start: 0.35rem;
  border-block-start: 1px solid var(--cyan);
}

.error-latest h2 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.error-latest ol {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.error-latest li + li {
  border-block-start: 1px solid var(--site-rule);
}

.error-latest a {
  display: grid;
  gap: 0.35rem;
  padding-block: 1rem;
  color: var(--site-text);
  text-decoration: none;
}

.error-latest a:is(:hover, :focus-visible) span {
  color: var(--cyan);
}

.error-latest span {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 140ms ease-out;
}

.error-latest time {
  color: var(--site-muted);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

/* Blog channel */
.channel-main--blog {
  width: min(100%, 90rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.blog-lead {
  width: min(100%, 76rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.blog-lead__meta {
  display: grid;
  justify-items: end;
  gap: 0.85rem;
  padding-bottom: 0.25rem;
}

.blog-subscriptions {
  font-family: var(--display);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-subscriptions__label {
  color: var(--site-muted);
}

.blog-subscriptions a {
  color: var(--site-text);
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color 140ms ease-out;
}

.blog-subscriptions a:is(:hover, :focus-visible) {
  color: var(--cyan);
}

.blog-filter {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--site-rule);
}

.blog-filter__options {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.blog-filter__option {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem 0.4rem 0.7rem;
  color: var(--site-muted);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--site-rule);
  border-radius: 0;
  cursor: pointer;
  transition: none;
}

.blog-filter__option:is(:hover, :focus-visible) {
  color: var(--site-text);
  border-color: var(--cyan);
}

.blog-filter__option[aria-current='page'] {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.blog-filter__count {
  min-width: 1.45rem;
  padding: 0.2rem 0.28rem 0.16rem;
  color: inherit;
  font-size: 0.9rem;
  text-align: center;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.blog-posts {
  width: min(100%, 76rem);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  border-top: 2px solid var(--site-text);
}

.post-group {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.post-group + .post-group {
  margin-top: clamp(2.25rem, 5vw, 4rem);
}

.post-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--site-rule);
}

.post-group__header h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.post-group__header h2::before {
  content: '';
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 0.65rem;
  background: var(--cyan);
}

.post-group__activity {
  width: clamp(6rem, 14vw, 10rem);
  height: 0.2rem;
  display: block;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--site-rule);
}

.post-group__activity::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--activity-width);
  background: var(--cyan);
}

.post-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0.7rem 0 0;
  list-style: none;
}

.post-entry {
  display: grid;
  grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 1fr) 1.25rem;
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--site-canvas);
  border: 1px solid var(--site-rule);
  border-inline-start: 0.35rem solid var(--site-text);
  text-decoration: none;
  transition:
    border-color 140ms linear,
    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-entry__meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-inline-end: clamp(1.25rem, 2.5vw, 2rem);
  border-inline-end: 1px solid var(--site-rule);
}

.post-entry__index,
.post-entry time,
.article-meta {
  font-family: var(--display);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-entry__index {
  min-width: 1.9rem;
  padding: 0.32rem 0.3rem 0.27rem;
  color: var(--ink);
  font-size: 1rem;
  text-align: center;
  background: var(--cyan);
}

.post-entry time {
  color: var(--site-text);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.article-meta {
  color: var(--site-muted);
  font-size: 1.2rem;
}

.post-entry__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
}

.post-entry__title-row,
.post-entry__title {
  display: block;
}

.post-entry__title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: color 140ms ease-out;
}

.post-entry__summary {
  max-width: 52ch;
  color: var(--site-muted);
  font-size: 1.02rem;
  line-height: 1.45;
}

.post-entry__source {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  color: var(--site-muted);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.post-entry__source-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.post-entry__arrow {
  width: 1rem;
  height: 1rem;
  align-self: center;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shorts are complete entries, not essay summaries: a yellow rail and warm field
   distinguish them without inventing a title or making the whole card a link. */
.post-entry--short {
  background: color-mix(in srgb, var(--yellow) 7%, var(--site-canvas));
  border-color: color-mix(in srgb, var(--yellow) 45%, var(--site-rule));
  border-inline-start-color: var(--yellow);
}

.post-entry--short:focus-within {
  border-color: var(--site-text);
  border-inline-start-color: var(--yellow);
}

.post-entry--short .post-entry__content {
  grid-column: 2 / -1;
}

.post-entry__permalink {
  min-height: 44px;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: start;
  gap: 0.4rem 0.75rem;
  text-decoration: none;
}

.post-entry__avatar {
  width: 3.25rem;
  height: 3.25rem;
  grid-column: 1;
  grid-row: 1 / -1;
  object-fit: cover;
  border: 2px solid var(--yellow);
  box-shadow: 0.2rem 0.2rem 0 var(--site-rule);
}

.post-entry__permalink .post-entry__kind {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.post-entry__permalink time {
  grid-column: 2;
  grid-row: 2;
  transition: color 140ms ease-out;
}

.post-entry__permalink:is(:hover, :focus-visible) time {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Outrank the shared article-body defaults, including their mobile top margin. */
.post-entry--short .short-body {
  --article-flow-space: 0.65em;
  max-width: 56ch;
  margin: 0;
  color: var(--site-text);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.post-entry__kind {
  padding: 0.32rem 0.4rem 0.27rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--yellow);
}

a.post-entry:is(:hover, :focus-visible) {
  border-color: var(--cyan);
  box-shadow: -0.35rem 0 0 var(--cyan);
  transform: translateX(0.35rem);
}

a.post-entry:is(:hover, :focus-visible) .post-entry__title {
  color: var(--cyan);
}

a.post-entry:is(:hover, :focus-visible) .post-entry__arrow {
  transform: translateX(0.25rem) rotate(45deg);
}

.article-main {
  width: min(100%, 74rem);
  flex: 1;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem) clamp(6rem, 12vw, 11rem);
}

.article {
  width: min(100%, 64rem);
  margin-inline: auto;
}

.article-back {
  display: inline-block;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--site-muted);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration-color: var(--cyan);
  transition: color 140ms ease-out;
}

.article-back:is(:hover, :focus-visible) {
  color: var(--cyan);
}

.article-header {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 2px solid var(--site-text);
}

.article-title-row {
  --source-logo-size: clamp(3.5rem, 7vw, 5.5rem);
  --source-logo-gap: clamp(1rem, 2.5vw, 2rem);

  position: relative;
}

.article-header .page-title {
  max-width: 100%;
}

.article-source-logo {
  position: absolute;
  inset-block-start: 0.08em;
  inset-inline-start: 0;
  width: var(--source-logo-size);
  height: var(--source-logo-size);
  object-fit: contain;
  image-rendering: pixelated;
}

.article-source-logo + .page-title {
  text-indent: calc(var(--source-logo-size) + var(--source-logo-gap));
}

.article-subtitle {
  max-width: 40ch;
  color: var(--site-muted);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.45;
}

/* The title's 0.86 line-height crops its own line box, so the subtitle has to
   clear the descenders hanging below it. Scoped to outrank `.site-page p`. */
.article-header .article-subtitle {
  margin-top: clamp(1rem, 1.6vw, 1.35rem);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  font-size: clamp(1.4rem, 2.2vw, 1.65rem);
}

.article-meta span::before {
  content: '·';
  margin-right: 2rem;
  color: var(--site-rule);
}

.article-format a {
  text-decoration-color: var(--cyan);
  transition: color 140ms ease-out;
}

.article-format a:is(:hover, :focus-visible) {
  color: var(--cyan);
}

.article-reading {
  --article-flow-space: 1.5em;
  --article-section-space: clamp(3.25rem, 6vw, 4.5rem);
  --article-subsection-space: clamp(2.5rem, 5vw, 3.5rem);
  --article-heading-follow-space: clamp(1rem, 2vw, 1.35rem);
  --article-source-space: clamp(2.5rem, 6vw, 4.5rem);

  width: 100%;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(1.08rem, 1.5vw, 1.2rem);
}

.article-reading > * {
  min-width: 0;
}

.article-source-note + :is(.article-toc, .article-body) {
  margin-block-start: var(--article-source-space);
}

.article-toc + .article-body {
  margin-block-start: clamp(2.25rem, 5vw, 3.25rem);
}

.article-toc {
  padding-block: 1rem 1.25rem;
  border-block: 1px solid var(--site-rule);
  border-block-start-color: var(--cyan);
  font-size: 1rem;
}

.article-toc h2 {
  margin: 0;
  color: var(--site-text);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-toc ol {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.article-toc li + li {
  margin-block-start: 0.8rem;
}

.article-toc a {
  position: relative;
  display: block;
  padding-inline-start: 1rem;
  color: var(--site-muted);
  font-family: var(--body);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.article-toc a::before {
  content: '';
  position: absolute;
  inset-block-start: 0.38em;
  inset-inline-start: 0;
  width: 0.65rem;
  height: 0.65rem;
  opacity: 0;
  color: var(--cyan);
  background:
    linear-gradient(currentColor, currentColor) left top / 55% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 72% 1px no-repeat;
}

.article-toc a[aria-current='location'] {
  color: var(--site-text);
  text-decoration-color: transparent;
  text-shadow:
    -0.6px 0 color-mix(in srgb, var(--red) 62%, transparent),
    0.6px 0 color-mix(in srgb, var(--blue) 66%, transparent);
  animation: toc-signal-lock 180ms steps(2, end) both;
}

.article-toc a[aria-current='location']::before {
  opacity: 1;
}

@keyframes toc-signal-lock {
  0% {
    filter: brightness(1.7);
    text-shadow:
      -2px 0 color-mix(in srgb, var(--red) 82%, transparent),
      2px 0 color-mix(in srgb, var(--blue) 86%, transparent);
  }
  45% {
    filter: brightness(0.82);
    text-shadow:
      1px 0 color-mix(in srgb, var(--red) 68%, transparent),
      -1px 0 color-mix(in srgb, var(--blue) 72%, transparent);
  }
  100% {
    filter: none;
    text-shadow:
      -0.6px 0 color-mix(in srgb, var(--red) 62%, transparent),
      0.6px 0 color-mix(in srgb, var(--blue) 66%, transparent);
  }
}

.article-toc a:is(:hover, :focus-visible) {
  color: var(--cyan);
  text-decoration-color: currentColor;
}

.article-body {
  width: min(100%, 68ch);
  margin: 0;
  font-size: inherit;
  line-height: 1.75;
}

.article-body > * {
  margin-block: 0;
}

.article-body
  > :is(p, ul, ol, dl, blockquote, pre, figure, table, hr, .expressive-code):where(
    :not(:first-child)
  ) {
  margin-block-start: var(--article-flow-space);
}

.article-body > :is(h2, h3, h4, h5, h6) {
  color: var(--site-text);
  font-family: var(--body);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
  scroll-margin-top: var(--station-clearance);
}

.article-body > :is(h2, h3, h4, h5, h6):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 0.35rem;
}

.article-body > h2 {
  margin-block-start: var(--article-section-space);
  font-size: clamp(1.85rem, 3vw, 2.2rem);
}

.article-body > :is(h3, h4, h5, h6) {
  margin-block-start: var(--article-subsection-space);
}

.article-body > h3 {
  font-size: clamp(1.55rem, 2.4vw, 1.8rem);
}

.article-body > h4 {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
}

.article-body > :is(h5, h6) {
  font-size: 1.1em;
  letter-spacing: -0.01em;
}

.article-body > :is(h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--article-heading-follow-space);
}

.article-body strong {
  font-weight: 600;
}

.article-body :is(ul, ol) {
  padding-inline-start: 1.35em;
}

.article-body li + li {
  margin-block-start: 0.65em;
}

.article-body li > :is(ul, ol) {
  margin-block: 0.65em 0;
}

.article-body li::marker {
  color: var(--cyan);
}

.article-body blockquote {
  padding-inline-start: clamp(1rem, 2.5vw, 1.5rem);
  border-inline-start: 1px solid var(--cyan);
  color: var(--site-muted);
}

.article-body blockquote > * {
  margin-block: 0;
}

.article-body blockquote > * + * {
  margin-block-start: 1em;
}

.article-body :not(pre) > code {
  padding: 0.08em 0.3em;
  border: 1px solid var(--site-rule);
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 0.88em;
}

.article-body pre {
  max-width: 100%;
  padding: clamp(1rem, 3vw, 1.5rem);
  overflow-x: auto;
  border-block: 1px solid var(--site-rule);
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 0.86em;
  line-height: 1.6;
  tab-size: 2;
}

.article-body pre code {
  font: inherit;
}

.article-body :is(img, video) {
  max-width: 100%;
  height: auto;
}

.article-body figure > :is(img, video) {
  display: block;
}

/* Shorts are a few lines and a picture or two, so the body reads larger. The permalink page
   has no visible title: the kind chip and date stand in for the essay header. */
.article--short .article-reading {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
}

.article--short .article-meta {
  align-items: center;
  margin-top: 0;
}

.article-meta .article-kind::before {
  content: none;
  margin-right: 0;
}

/* Single images keep their intrinsic ratio and never upscale; multi-image runs
   use a compact Twitter-style crop. Every item opens the full image in the lightbox. */
.short-media {
  width: 100%;
  display: grid;
  gap: 2px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--site-rule);
  background: var(--site-rule);
}

.short-media[data-count='1'] {
  max-width: var(--short-media-intrinsic-width);
  aspect-ratio: var(--short-media-aspect);
}

.short-media[data-count='1'][data-orientation='portrait'] {
  max-width: min(var(--short-media-intrinsic-width), 34rem);
}

.short-media[data-count='1'] .short-media__item img {
  object-fit: contain;
}

.article-body > .short-media:where(:not(:first-child)) {
  margin-block-start: 1.25em;
}

.short-media[data-count='2'],
.short-media[data-count='4'] {
  grid-template-columns: 1fr 1fr;
}

.short-media[data-count='3'] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.short-media[data-count='3'] .short-media__item:first-child {
  grid-row: span 2;
}

.short-media[data-count='4'] {
  grid-template-rows: 1fr 1fr;
}

.short-media__item {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--site-canvas);
}

.short-media .short-media__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.short-media__item:is(:hover, :focus-visible) img {
  transform: scale(1.02);
}

.short-media__item:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.article-body figcaption {
  margin-block-start: 0.75rem;
  color: var(--site-muted);
  font-size: 0.82em;
  line-height: 1.5;
}

.article-body hr {
  border: 0;
  border-block-start: 1px solid var(--site-rule);
}

.article-body table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.5;
}

.article-body :is(th, td) {
  padding: 0.65em 0.8em;
  border-block-end: 1px solid var(--site-rule);
  text-align: start;
  vertical-align: top;
}

.article-body th:first-child,
.article-body td:first-child {
  padding-inline-start: 0;
}

.article-body th {
  color: var(--site-text);
  font-weight: 600;
}

.article-source-note {
  width: min(100%, 68ch);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--site-rule);
  border-left-color: var(--cyan);
  color: var(--site-muted);
}

.article-source-note p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.6;
}

.article-source-note strong {
  color: var(--site-text);
  font-family: var(--display);
  font-size: 1.08em;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-updates {
  margin-block-start: var(--article-section-space);
  padding-block: 1.25rem;
  border-block: 1px solid var(--site-rule);
}

.article-updates h2 {
  margin: 0;
  color: var(--site-text);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-updates ol {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.article-updates li + li {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--site-rule);
}

.article-updates time {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.1em;
  letter-spacing: 0.03em;
}

.article-updates p {
  margin: 0.25rem 0 0;
  color: var(--site-muted);
  font-size: 0.92em;
}

:is(.article-body, .article-source-note) a {
  --link-signal: var(--cyan);
  --link-ink: var(--ink);
  --link-split-hot: rgba(192, 0, 0, 0.92);
  --link-split-cold: rgba(0, 0, 192, 0.92);

  color: inherit;
  text-decoration-color: var(--link-signal);
  text-decoration-thickness: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    color 140ms ease-out,
    background-color 140ms ease-out,
    box-shadow 140ms ease-out,
    text-decoration-color 140ms ease-out;
}

:is(.article-body, .article-source-note) a:is(:hover, :focus-visible),
.link-glitch:is(:hover, :focus-visible) {
  color: var(--link-ink);
  background: var(--link-signal);
  box-shadow:
    -0.08em 0 var(--link-signal),
    0.08em 0 var(--link-signal),
    inset 2px 0 color-mix(in srgb, var(--link-split-hot) 52%, transparent),
    inset -2px 0 color-mix(in srgb, var(--link-split-cold) 52%, transparent);
  text-decoration-color: transparent;
}

:is(.article-body, .article-source-note)
  a[href^='http']:not([href^='https://pau.fm']):is(:hover, :focus-visible),
.link-glitch:is(:hover, :focus-visible) {
  animation: link-signal-lock 300ms steps(1, end) both;
}

:is(.article-body, .article-source-note) a[href^='http']:not([href^='https://pau.fm'])::after {
  content: '';
  width: 0.62em;
  height: 0.62em;
  display: inline-block;
  margin-left: 0.16em;
  vertical-align: 0.14em;
  background: currentColor;
  clip-path: polygon(42% 0, 100% 0, 100% 58%, 82% 58%, 82% 29%, 12% 100%, 0 88%, 71% 18%, 42% 18%);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

:is(.article-body, .article-source-note)
  a[href^='http']:not([href^='https://pau.fm']):is(:hover, :focus-visible)::after {
  transform: translate(0.1em, -0.1em);
}

@keyframes link-signal-lock {
  0% {
    filter: brightness(1.65) contrast(1.15);
    box-shadow:
      -0.15em 0 var(--link-split-hot),
      0.12em 0 var(--link-split-cold),
      inset 3px 0 var(--link-split-hot),
      inset -3px 0 var(--link-split-cold);
    text-shadow:
      -0.1em 0 var(--link-split-hot),
      0.1em 0 var(--link-split-cold);
  }
  14% {
    filter: brightness(0.72) contrast(1.3);
    box-shadow:
      0.09em 0 var(--link-split-hot),
      -0.13em 0 var(--link-split-cold),
      inset -3px 0 var(--link-split-hot),
      inset 2px 0 var(--link-split-cold);
    text-shadow:
      0.12em 0 var(--link-split-hot),
      -0.07em 0 var(--link-split-cold);
  }
  31% {
    filter: brightness(1.35) contrast(1.2);
    box-shadow:
      -0.08em 0 var(--link-signal),
      0.08em 0 var(--link-signal),
      inset 2px 0 var(--link-split-hot),
      inset -3px 0 var(--link-split-cold);
    text-shadow:
      -0.045em 0 var(--link-split-hot),
      0.08em 0 var(--link-split-cold);
  }
  49% {
    filter: brightness(0.9) contrast(1.12);
    box-shadow:
      -0.11em 0 var(--link-split-hot),
      0.08em 0 var(--link-signal),
      inset -2px 0 var(--link-split-hot),
      inset 2px 0 var(--link-split-cold);
    text-shadow:
      0.065em 0 var(--link-split-hot),
      -0.035em 0 var(--link-split-cold);
  }
  68% {
    filter: brightness(1.12) contrast(1.06);
    box-shadow:
      -0.08em 0 var(--link-signal),
      0.1em 0 var(--link-split-cold),
      inset 2px 0 var(--link-split-hot),
      inset -2px 0 var(--link-split-cold);
    text-shadow:
      -0.025em 0 var(--link-split-hot),
      0.035em 0 var(--link-split-cold);
  }
  84% {
    filter: brightness(1.04);
    box-shadow:
      -0.08em 0 var(--link-signal),
      0.08em 0 var(--link-signal),
      inset 2px 0 color-mix(in srgb, var(--link-split-hot) 68%, transparent),
      inset -2px 0 color-mix(in srgb, var(--link-split-cold) 68%, transparent);
    text-shadow:
      -0.012em 0 color-mix(in srgb, var(--link-split-hot) 58%, transparent),
      0.012em 0 color-mix(in srgb, var(--link-split-cold) 58%, transparent);
  }
  100% {
    filter: none;
    box-shadow:
      -0.08em 0 var(--link-signal),
      0.08em 0 var(--link-signal),
      inset 2px 0 color-mix(in srgb, var(--link-split-hot) 52%, transparent),
      inset -2px 0 color-mix(in srgb, var(--link-split-cold) 52%, transparent);
    text-shadow: none;
  }
}

@keyframes link-text-sync-upper {
  0% {
    clip-path: inset(7% 0 68%);
    opacity: 0.95;
    transform: translateX(-0.07em);
  }
  18% {
    clip-path: inset(54% 0 19%);
    opacity: 0.82;
    transform: translateX(0.09em);
  }
  38% {
    clip-path: inset(25% 0 51%);
    opacity: 0.9;
    transform: translateX(-0.045em);
  }
  58% {
    clip-path: inset(67% 0 9%);
    opacity: 0.58;
    transform: translateX(0.035em);
  }
  78%,
  100% {
    clip-path: inset(48% 0);
    opacity: 0;
    transform: none;
  }
}

@keyframes link-text-sync-lower {
  0% {
    clip-path: inset(71% 0 5%);
    opacity: 0.88;
    transform: translateX(0.08em);
  }
  22% {
    clip-path: inset(16% 0 61%);
    opacity: 0.72;
    transform: translateX(-0.055em);
  }
  43% {
    clip-path: inset(47% 0 28%);
    opacity: 0.85;
    transform: translateX(0.045em);
  }
  64% {
    clip-path: inset(34% 0 43%);
    opacity: 0.46;
    transform: translateX(-0.025em);
  }
  82%,
  100% {
    clip-path: inset(48% 0);
    opacity: 0;
    transform: none;
  }
}

/* Footnotes are the article's annotation channel: quiet in the reading flow,
   then tuned into view as a compact signal card on hover or keyboard focus. */
.article-body sup:has([data-footnote-ref]) {
  margin-inline: 0.12em 0.04em;
  line-height: 0;
}

.article-body a[data-footnote-ref] {
  min-width: 1.15em;
  display: inline-grid;
  place-items: center;
  padding: 0.08em 0.18em;
  color: var(--cyan);
  background: transparent;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-size: 0.82em;
  line-height: 1;
  text-decoration: none;
  transform: translateY(-0.08em);
}

.article-body a[data-footnote-ref]:is(:hover, :focus-visible) {
  color: var(--ink);
  background: var(--cyan);
  outline: 2px solid var(--site-text);
  outline-offset: 2px;
  box-shadow: none;
  text-decoration: none;
}

.article-body :is([data-footnotes], .footnotes) {
  margin-block-start: var(--article-section-space);
  padding-block-start: clamp(1.25rem, 3vw, 1.75rem);
  border-block-start: 1px solid var(--cyan);
  color: var(--site-muted);
  font-size: 0.88em;
  line-height: 1.6;
}

.article-body :is([data-footnotes], .footnotes)::before {
  content: 'Footnotes';
  display: block;
  margin-block-end: 1rem;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-body :is([data-footnotes], .footnotes) > ol {
  margin: 0;
  padding-inline-start: 1.65rem;
}

.article-body :is([data-footnotes], .footnotes) li {
  padding-inline-start: 0.35rem;
}

.article-body :is([data-footnotes], .footnotes) li::marker {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.15em;
}

.article-body :is([data-footnotes], .footnotes) p {
  margin: 0;
}

.article-body [data-footnote-backref] {
  margin-inline-start: 0.3em;
  color: var(--cyan);
  font-family: var(--display);
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footnote-popover {
  --footnote-caret-inset: 50%;

  position: fixed;
  z-index: 80;
  width: min(23rem, calc(100vw - 2rem));
  display: block;
  padding: 1.1rem 1.2rem 1.15rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: var(--site-text);
  background: var(--site-canvas);
  border: 1px solid var(--site-rule);
  box-shadow: 0 0.9rem 2.4rem rgba(0, 0, 0, 0.46);
  clip-path: inset(46% 0);
  transform: translateY(0.35rem);
  transition:
    opacity 130ms linear,
    clip-path 170ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 170ms step-end;
}

.footnote-popover::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 0.28rem;
  background: linear-gradient(
    to right,
    #c0c0c0 0 14.285%,
    var(--yellow) 14.285% 28.57%,
    var(--cyan) 28.57% 42.855%,
    var(--green) 42.855% 57.14%,
    var(--magenta) 57.14% 71.425%,
    var(--red) 71.425% 85.71%,
    var(--blue) 85.71% 100%
  );
}

.footnote-popover::after {
  content: '';
  position: absolute;
  left: var(--footnote-caret-inset);
  width: 0.6rem;
  height: 0.6rem;
  background: var(--site-canvas);
  border: solid var(--site-rule);
  transform: translateX(-50%) rotate(45deg);
}

.footnote-popover[data-placement='above']::after {
  bottom: -0.36rem;
  border-width: 0 1px 1px 0;
}

.footnote-popover[data-placement='below']::after {
  top: -0.36rem;
  border-width: 1px 0 0 1px;
}

.footnote-popover[data-visible='true'] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    opacity 130ms linear,
    clip-path 170ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms step-start;
}

.footnote-popover__label,
.footnote-popover__body {
  display: block;
}

.footnote-popover__label {
  margin-block-end: 0.55rem;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footnote-popover__body {
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
}

html[data-site-theme='light'] .footnote-popover {
  box-shadow: 0 0.9rem 2.4rem rgba(8, 8, 8, 0.18);
}

.article-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  color: var(--site-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.article-follow__feeds {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.article-follow a {
  padding-block: 0.25rem;
  color: var(--site-text);
  text-decoration-color: var(--cyan);
  text-underline-offset: 0.2em;
}

.article-follow a:is(:hover, :focus-visible) {
  color: var(--cyan);
}

.article-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(4rem, 8vw, 7rem);
  border-block: 2px solid var(--site-text);
}

.article-pagination__link {
  min-width: 0;
  min-height: clamp(8.5rem, 18vw, 11rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-decoration: none;
  transition:
    color 160ms ease-out,
    background-color 160ms ease-out;
}

.article-pagination__link + .article-pagination__link {
  border-inline-start: 1px solid var(--site-rule);
}

.article-pagination__link--next:only-child {
  grid-column: 2;
  border-inline-start: 1px solid var(--site-rule);
}

.article-pagination__direction {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--site-muted);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease-out;
}

.article-pagination__title {
  max-width: 16ch;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.article-pagination__link--next {
  align-items: flex-end;
  text-align: end;
}

.article-pagination__arrow {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.article-pagination__link--next .article-pagination__arrow {
  transform: rotate(45deg);
}

.article-pagination__link:is(:hover, :focus-visible) {
  color: var(--ink);
  background: var(--cyan);
}

.article-pagination__link:is(:hover, :focus-visible) .article-pagination__direction {
  color: var(--ink);
}

.article-pagination__link--previous:is(:hover, :focus-visible) .article-pagination__arrow {
  transform: translateX(-0.35rem) rotate(-135deg);
}

.article-pagination__link--next:is(:hover, :focus-visible) .article-pagination__arrow {
  transform: translateX(0.35rem) rotate(45deg);
}

/* CV channel */
.channel-main--cv {
  width: 100%;
  max-width: none;
  padding: 0;
}

.cv-lead {
  width: min(100%, 96rem);
  min-height: min(50rem, calc(100svh - 6rem));
  grid-template-columns: minmax(0, 1.28fr) minmax(16rem, 0.72fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  align-content: center;
  padding: clamp(4rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem);
}

.cv-lead__media {
  --portrait-step: 0.75rem;
  --portrait-half-step: 0.375rem;
  --portrait-frame-shape: polygon(
    0 var(--portrait-step),
    var(--portrait-half-step) var(--portrait-step),
    var(--portrait-half-step) var(--portrait-half-step),
    var(--portrait-step) var(--portrait-half-step),
    var(--portrait-step) 0,
    calc(100% - var(--portrait-step)) 0,
    calc(100% - var(--portrait-step)) var(--portrait-half-step),
    calc(100% - var(--portrait-half-step)) var(--portrait-half-step),
    calc(100% - var(--portrait-half-step)) var(--portrait-step),
    100% var(--portrait-step),
    100% calc(100% - var(--portrait-step)),
    calc(100% - var(--portrait-half-step)) calc(100% - var(--portrait-step)),
    calc(100% - var(--portrait-half-step)) calc(100% - var(--portrait-half-step)),
    calc(100% - var(--portrait-step)) calc(100% - var(--portrait-half-step)),
    calc(100% - var(--portrait-step)) 100%,
    var(--portrait-step) 100%,
    var(--portrait-step) calc(100% - var(--portrait-half-step)),
    var(--portrait-half-step) calc(100% - var(--portrait-half-step)),
    var(--portrait-half-step) calc(100% - var(--portrait-step)),
    0 calc(100% - var(--portrait-step))
  );
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1;
  grid-column: 2;
  margin: 0;
  padding: 0;
  justify-self: end;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: crosshair;
  touch-action: manipulation;
}

.cv-lead__media::before,
.cv-lead__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--portrait-frame-shape);
  pointer-events: none;
  transition: transform 110ms steps(2, end);
}

.cv-lead__media::before {
  background: var(--cyan);
  transform: translate(-0.6rem, 0.6rem);
}

.cv-lead__media::after {
  background: var(--magenta);
  transform: translate(0.6rem, -0.6rem);
}

.cv-lead__media:is(:hover, :focus-visible)::before {
  transform: translate(-0.85rem, 0.4rem);
}

.cv-lead__media:is(:hover, :focus-visible)::after {
  transform: translate(0.85rem, -0.4rem);
}

.cv-lead__media:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 0.75rem;
}

.cv-lead__frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: #050505;
  clip-path: var(--portrait-frame-shape);
}

.cv-lead__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 2px rgba(242, 242, 238, 0.38);
  pointer-events: none;
}

.cv-lead__portrait {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cv-lead__portrait--clear {
  transform: translate3d(0, 0, 0);
}

.cv-lead__portrait--pixel {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0);
  image-rendering: pixelated;
  pointer-events: none;
}

.cv-lead__media.is-glitching .cv-lead__portrait--clear {
  animation: cv-portrait-clear-glitch 680ms steps(1, end) both;
}

.cv-lead__media.is-glitching .cv-lead__portrait--pixel {
  animation: cv-portrait-pixel-glitch 680ms steps(1, end) both;
}

.cv-lead__media.is-glitching::before {
  animation: cv-portrait-cyan-glitch 680ms steps(1, end) both;
}

.cv-lead__media.is-glitching::after {
  animation: cv-portrait-magenta-glitch 680ms steps(1, end) both;
}

.cv-lead__content {
  min-width: 0;
  max-width: 68ch;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: clamp(2rem, 4vw, 3rem);
}

.cv-lead__intro {
  min-width: 0;
}

.cv-lead__tagline {
  margin-top: 1rem;
  color: var(--site-text);
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.cv-lead__copy {
  width: 100%;
  align-self: start;
}

.cv-now {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: #061712;
}

.cv-now::before,
.cv-now::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Overhang the backdrop past the section so the crop always clears the
   Sonora site chrome up top and settles on the ground under the fox. */
.cv-now::before {
  inset: -14% 0 -2%;
  z-index: -2;
  background: url('/images/cv/sonora-home.webp') center bottom / cover no-repeat;
  filter: saturate(0.72) contrast(1.14) brightness(0.7);
}

.cv-now::after {
  z-index: -1;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.045) 0 1px,
      rgba(0, 0, 0, 0.13) 1px 4px
    ),
    linear-gradient(90deg, rgba(0, 8, 6, 0.86) 0%, rgba(0, 8, 6, 0.5) 52%, rgba(0, 8, 6, 0.8) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.64));
}

.cv-now__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 5vw, 5rem);
}

.cv-now__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--paper);
}

.cv-now__brand {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.75rem);
}

/* The mark carries ~9/96 of transparent padding on every edge, so it needs a
   larger box than the record logos to read at the same weight, plus a nudge
   left so its art lines up with the copy below. */
.cv-now__brand .company-pixel {
  width: 5.5rem;
  height: 5.5rem;
  margin-left: -0.18rem;
}

.cv-now__heading h2,
.cv-record__heading h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.02em;
}

.cv-now__heading h2 {
  font-size: clamp(4rem, 9vw, 6rem);
}

.cv-now__heading p {
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.cv-now__brand > div > p {
  margin-top: 0.65rem;
  font-size: 1.65rem;
}

.cv-now__role,
.cv-now__role-site {
  display: flex;
  align-items: center;
}

.cv-now__role {
  flex-wrap: wrap;
  gap: 0.1em 0.35em;
}

.cv-now__role-site {
  gap: 0.35em;
}

.cv-now__external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  vertical-align: baseline;
  text-decoration-color: rgba(242, 242, 238, 0.55);
  transition:
    color 140ms ease-out,
    text-decoration-color 140ms ease-out;
}

.cv-now__external-link svg {
  width: 0.62em;
  height: 0.62em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease-out;
}

.cv-now__external-link:is(:hover, :focus-visible) {
  color: var(--yellow);
  text-decoration-color: currentColor;
}

.cv-now__external-link:is(:hover, :focus-visible) svg {
  transform: translate(0.1em, -0.1em);
}

.cv-now__copy {
  display: grid;
  gap: clamp(1.15rem, 1.8vw, 1.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.cv-now__copy p {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.cv-now__copy .cv-now__lede {
  max-width: 52ch;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cv-record {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem) clamp(5rem, 8vw, 8rem);
}

.cv-record__heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.cv-record__heading h2 {
  font-size: clamp(3.25rem, 5vw, 4.75rem);
}

.company-pixel {
  width: 4.75rem;
  height: 4.75rem;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.company-pixel--invert {
  filter: invert(1);
}

html[data-site-theme='light'] .company-pixel--invert {
  filter: none;
}

/* Pixel icons from pixelarticons v2.4.1 (MIT) — https://pixelarticons.com */
.pixel-icon {
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.career-record-grid {
  --record-grid-columns: 5;

  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(var(--record-grid-columns), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--site-text);
  border-left: 1px solid var(--site-rule);
  list-style: none;
}

.career-record-grid__item {
  display: contents;
}

.career-record-grid__summary {
  position: relative;
  min-width: 0;
  min-height: clamp(9rem, 12vw, 11rem);
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(0.5rem, 0.9vw, 0.875rem);
  overflow: hidden;
  color: var(--site-text);
  font: inherit;
  text-align: inherit;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--site-rule);
  border-bottom: 1px solid var(--site-rule);
  border-radius: 0;
  transition:
    color 120ms steps(2, end),
    background-color 120ms steps(2, end);
}

.career-record-grid__summary--static {
  cursor: default;
}

.career-record-grid__summary[data-panel-seam='right'] {
  border-right-color: transparent;
}

.career-record-grid__summary[data-panel-seam='bottom'] {
  border-bottom-color: transparent;
}

.career-record-grid__summary:focus-visible {
  z-index: 1;
  outline: 3px solid var(--yellow);
  outline-offset: -4px;
}

.career-record-grid__state {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.career-record-grid__logo {
  width: clamp(4.75rem, 6vw, 6.4rem);
  height: clamp(4.75rem, 6vw, 6.4rem);
  grid-area: 1 / 1;
  clip-path: inset(0);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Low, wide wordmarks need a larger image box to carry the same optical weight
   as the square company symbols. */
.career-record-grid__logo--wide {
  width: clamp(7.5rem, 9vw, 8rem);
  height: clamp(3.75rem, 4.5vw, 4rem);
}

.career-record-grid__identity {
  min-width: 0;
  grid-area: 1 / 1;
  clip-path: inset(49% 0);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  text-shadow: none;
}

.career-record-grid strong,
.career-record-grid__role {
  display: block;
  font-family: var(--display);
  line-height: 1;
  overflow-wrap: anywhere;
}

.career-record-grid strong {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 400;
}

.career-record-grid__role {
  margin-top: 0.6rem;
  color: currentColor;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

@media (hover: hover) {
  .career-record-grid__summary:hover {
    color: var(--site-canvas);
    background-color: var(--site-text);
  }
}

.career-record-grid__summary:focus-visible {
  color: var(--site-canvas);
  background-color: var(--site-text);
}

.career-record-grid__summary:is(:hover, :focus-visible) .career-record-grid__logo {
  clip-path: inset(49% 0);
  opacity: 0;
  animation: career-record-logo-glitch-out 180ms steps(1, end) both;
}

.career-record-grid__summary:is(:hover, :focus-visible) .career-record-grid__identity {
  clip-path: inset(0);
  opacity: 1;
  animation: career-record-identity-glitch-in 180ms steps(1, end) both;
}

.career-record-grid__summary.is-glitch-returning .career-record-grid__logo {
  animation: career-record-logo-glitch-in 180ms steps(1, end) both;
}

.career-record-grid__summary.is-glitch-returning .career-record-grid__identity {
  animation: career-record-identity-glitch-out 180ms steps(1, end) both;
}

.career-record-grid__summary[aria-expanded='true'] {
  color: var(--site-text);
  background-color: transparent;
}

.career-record-grid__summary[aria-expanded='true'] .career-record-grid__logo {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
  animation: none;
}

.career-record-grid__summary[aria-expanded='true'] .career-record-grid__identity {
  clip-path: inset(49% 0);
  opacity: 0;
  transform: none;
  animation: none;
}

.career-record-grid__detail {
  min-width: 0;
  display: none;
  grid-column: span 3;
  grid-row: span 2;
  grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-right: 1px solid var(--site-rule);
  border-bottom: 1px solid var(--site-rule);
}

.career-record-grid__detail[data-panel-aligned] {
  grid-column: var(--detail-column-start) / span var(--detail-column-span);
  grid-row: var(--detail-row-start) / span var(--detail-row-span);
}

.career-record-grid__detail[data-panel-seam='left'] {
  border-right-color: transparent;
}

.career-record-grid__detail--compact {
  grid-template-columns: minmax(0, 1fr);
}

.career-record-grid__detail--compact header {
  width: 100%;
}

.career-record-grid__summary[aria-expanded='true'] + .career-record-grid__detail {
  display: grid;
}

.career-record-grid__detail header {
  min-width: 0;
}

.career-record-grid__detail h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 0.86;
  overflow-wrap: anywhere;
}

.career-record-grid__detail header p,
.career-record-grid__date {
  font-family: var(--display);
  line-height: 1;
  letter-spacing: 0.04em;
}

.career-record-grid__detail header p {
  margin: 0.8rem 0 0;
  font-size: 1.2rem;
}

.career-record-grid__date {
  display: block;
  margin-top: 1.25rem;
  color: var(--site-muted);
  font-size: 1.05rem;
}

.career-record-grid__badge {
  width: max-content;
  max-width: 100%;
  display: block;
  margin-top: 1.25rem;
  padding: 0.35rem 0.55rem;
  color: #080808;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--yellow);
}

.career-record-grid__detail > p {
  max-width: 72ch;
  margin: 0;
  color: var(--site-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.cv-contact {
  color: var(--paper);
  background: var(--blue);
}

.cv-contact__inner {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem) clamp(5rem, 9vw, 9rem);
}

.cv-contact__header {
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 3px solid currentColor;
}

.cv-contact__header h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.02em;
}

.cv-contact__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-contact__links a {
  min-width: 0;
  min-height: clamp(9.5rem, 14vw, 13rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: clamp(2rem, 3.5vw, 3rem) 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-bottom: 1px solid currentColor;
  transition:
    color 150ms ease-out,
    background-color 150ms ease-out;
}

.cv-contact__links a + a {
  border-left: 1px solid currentColor;
}

.cv-contact__label,
.cv-contact__links strong {
  font-family: var(--display);
  line-height: 1;
}

.cv-contact__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sized in exact multiples of the 24px source grid so the pixels stay square. */
.cv-contact__label .pixel-icon {
  width: 3rem;
  height: 3rem;
}

.cv-contact__links strong {
  min-width: 0;
  align-self: end;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.cv-contact__cue {
  width: 2rem;
  height: 2rem;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cv-contact__links a:is(:hover, :focus-visible) {
  color: var(--blue);
  background: var(--paper);
}

.cv-contact__links a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--cyan);
  outline-offset: -6px;
}

.cv-contact__links a:is(:hover, :focus-visible) .cv-contact__cue {
  transform: translate(0.25rem, -0.25rem);
}

@keyframes career-record-logo-glitch-out {
  0% {
    clip-path: inset(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  28% {
    clip-path: inset(8% 0 66%);
    opacity: 1;
    transform: translate3d(2px, 0, 0);
    filter: brightness(1.2) saturate(1.1);
  }
  52% {
    clip-path: inset(58% 0 18%);
    opacity: 0.65;
    transform: translate3d(-2px, 0, 0);
  }
  76% {
    clip-path: inset(34% 0 42%);
    opacity: 0.35;
    transform: translate3d(1px, 0, 0);
  }
  100% {
    clip-path: inset(49% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}

@keyframes career-record-identity-glitch-in {
  0% {
    clip-path: inset(49% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
  28% {
    clip-path: inset(54% 0 20%);
    opacity: 0.55;
    transform: translate3d(-2px, 0, 0);
    text-shadow:
      -1px 0 rgba(0, 192, 192, 0.55),
      1px 0 rgba(192, 0, 0, 0.55);
  }
  52% {
    clip-path: inset(14% 0 60%);
    opacity: 0.8;
    transform: translate3d(1px, 0, 0);
  }
  76% {
    clip-path: inset(28% 0 16%);
    opacity: 1;
    transform: translate3d(-1px, 0, 0);
    text-shadow:
      1px 0 rgba(0, 192, 192, 0.4),
      -1px 0 rgba(192, 0, 0, 0.4);
  }
  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
}

@keyframes career-record-logo-glitch-in {
  0% {
    clip-path: inset(49% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  24% {
    clip-path: inset(34% 0 42%);
    opacity: 0.35;
    transform: translate3d(1px, 0, 0);
  }
  48% {
    clip-path: inset(58% 0 18%);
    opacity: 0.65;
    transform: translate3d(-2px, 0, 0);
  }
  72% {
    clip-path: inset(8% 0 66%);
    opacity: 1;
    transform: translate3d(2px, 0, 0);
    filter: brightness(1.2) saturate(1.1);
  }
  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}

@keyframes career-record-identity-glitch-out {
  0% {
    clip-path: inset(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
  24% {
    clip-path: inset(28% 0 16%);
    opacity: 1;
    transform: translate3d(-1px, 0, 0);
    text-shadow:
      1px 0 rgba(0, 192, 192, 0.4),
      -1px 0 rgba(192, 0, 0, 0.4);
  }
  48% {
    clip-path: inset(14% 0 60%);
    opacity: 0.8;
    transform: translate3d(1px, 0, 0);
  }
  72% {
    clip-path: inset(54% 0 20%);
    opacity: 0.55;
    transform: translate3d(-2px, 0, 0);
    text-shadow:
      -1px 0 rgba(0, 192, 192, 0.55),
      1px 0 rgba(192, 0, 0, 0.55);
  }
  100% {
    clip-path: inset(49% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
}

@media (hover: none) {
  .career-record-grid__state {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .career-record-grid__logo,
  .career-record-grid__identity,
  .career-record-grid__summary[aria-expanded='true']
    :is(.career-record-grid__logo, .career-record-grid__identity) {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

@media (min-width: 64rem) {
  .article-reading--with-toc {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(10rem, 1fr);
    column-gap: clamp(2.25rem, 4vw, 3.5rem);
    align-items: start;
  }

  .article-reading--with-toc > :is(.article-source-note, .article-body) {
    grid-column: 1;
  }

  .article-reading--with-toc > .article-toc {
    position: sticky;
    top: var(--station-clearance);
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    max-height: calc(100svh - var(--station-clearance) - 1rem);
    overflow-y: auto;
    scrollbar-color: var(--cyan) transparent;
    scrollbar-width: thin;
  }

  .article-reading--with-toc.article-reading--with-source {
    row-gap: var(--article-source-space);
  }

  .article-reading--with-toc.article-reading--with-source > :is(.article-toc, .article-body) {
    grid-row: 2;
  }

  .article-reading--with-toc .article-source-note + .article-toc,
  .article-reading--with-toc .article-toc + .article-body {
    margin-block-start: 0;
  }
}

@media (min-width: 1200px) {
  /* Slide the scene left so Kit lands in the open space right of the copy. */
  .cv-now::before {
    background-position: left bottom;
  }
}

@media (max-width: 860px) {
  .station-ident {
    grid-template-columns: auto 1fr;
  }

  .sign-on,
  .channel-lead {
    grid-template-columns: 1fr;
  }

  .blog-lead__meta {
    justify-items: start;
  }

  .sign-on {
    gap: 2.5rem;
  }

  .sign-on h2 {
    max-width: 11ch;
  }

  .program-row {
    grid-template-columns: 5rem minmax(0, 1fr) 1.5rem;
  }

  .program-row__marker {
    grid-column: 1;
    grid-row: 1;
  }

  .program-row__content {
    grid-column: 2;
    grid-row: 1;
  }

  .program-row__arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .channel-lead {
    min-height: auto;
  }

  .cv-lead__media {
    max-width: 20rem;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .cv-lead__content {
    grid-column: 1;
    grid-row: 2;
  }

  .career-record-grid {
    --record-grid-columns: 3;
  }

  .career-record-grid__detail {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  :root {
    --station-clearance: 8.5rem;
  }

  .station-ident {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .station-ident__brand-zone {
    min-height: 3.75rem;
    justify-content: center;
    border-bottom: 1px solid var(--site-rule);
  }

  .station-ident__brand-zone .station-ident__brand {
    min-height: 0;
  }

  .return-signal {
    position: absolute;
    right: 1rem;
    margin-left: 0;
  }

  .theme-toggle {
    position: absolute;
    left: 1rem;
    margin-left: 0;
    padding-inline: 0.58rem;
  }

  .station-ident nav a {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.35rem;
    border-left: 0;
  }

  .station-ident nav a + a {
    border-left: 1px solid var(--site-rule);
  }

  .sign-on {
    gap: 2rem;
    padding-block: 3.75rem;
  }

  .sign-on h2,
  .page-title {
    font-size: clamp(3.25rem, 16vw, 5rem);
  }

  .program-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1rem;
    gap: 0.5rem 0.75rem;
    padding: clamp(0.75rem, 2dvh, 1.25rem) 1rem;
  }

  .program-row__marker {
    width: 2.25rem;
    gap: 0.28rem;
  }

  .program-row__marker i {
    height: 0.28rem;
  }

  .program-row__title {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .program-row__arrow {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
  }

  .channel-main {
    padding-top: 3.5rem;
  }

  .blog-posts {
    margin-top: 3rem;
  }

  .blog-filter {
    align-items: stretch;
    padding-block: 0.9rem;
  }

  .blog-filter__options {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .blog-filter__option {
    min-width: 0;
    padding-inline: 0.4rem;
  }

  .blog-filter__count {
    display: none;
  }

  .post-group + .post-group {
    margin-top: 2.5rem;
  }

  .post-group__header {
    gap: 1rem;
  }

  .post-entry {
    grid-template-columns: minmax(0, 1fr) 1rem;
    gap: 0.85rem 1rem;
    padding: 1.15rem;
    border-inline-start-width: 0.3rem;
  }

  .post-entry__meta {
    grid-column: 1;
    gap: 0.6rem;
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .post-entry__index {
    min-width: 1.7rem;
    padding-block: 0.25rem 0.2rem;
    font-size: 0.9rem;
  }

  .post-entry time {
    font-size: 1.55rem;
  }

  .post-entry__content {
    grid-column: 1;
  }

  .post-entry--short {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-entry--short .post-entry__content {
    grid-column: 1 / -1;
  }

  .post-entry__permalink {
    grid-template-columns: 2.75rem auto minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .post-entry__avatar {
    width: 2.75rem;
    height: 2.75rem;
    grid-row: 1;
  }

  .post-entry__permalink .post-entry__kind {
    grid-row: 1;
  }

  .post-entry__permalink time {
    grid-column: 3;
    grid-row: 1;
  }

  .post-entry__title {
    font-size: clamp(2.15rem, 10.5vw, 3rem);
  }

  .post-entry__arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  a.post-entry:is(:hover, :focus-visible) {
    box-shadow: -0.25rem 0 0 var(--cyan);
    transform: translateX(0.25rem);
  }

  .article-meta span::before {
    margin-right: 0.75rem;
  }

  .article-body {
    margin-top: 3rem;
  }

  .article-pagination {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-pagination__link + .article-pagination__link {
    border-inline-start: 0;
    border-block-start: 1px solid var(--site-rule);
  }

  .article-pagination__link--next:only-child {
    grid-column: 1;
    border-inline-start: 0;
    border-block-start: 0;
  }

  .channel-main--cv {
    padding-top: 0;
  }

  .cv-lead {
    gap: 2rem;
    padding: 2rem 1rem 3rem;
  }

  .cv-lead__media {
    max-width: 15rem;
    justify-self: center;
  }

  .cv-lead__content {
    gap: 1.5rem;
  }

  .cv-lead .page-title {
    font-size: clamp(3rem, 13.2vw, 3.25rem);
  }

  .cv-lead__copy p {
    font-size: 1rem;
    line-height: 1.35;
  }

  .cv-lead__copy p + p {
    margin-top: 0.75rem;
  }

  .cv-now__inner,
  .cv-record {
    padding-inline: 1rem;
  }

  .cv-now__heading {
    grid-template-columns: 1fr;
  }

  .cv-record__heading {
    margin-bottom: 2rem;
  }

  .cv-record__heading h2 {
    font-size: clamp(2.75rem, 12vw, 3.25rem);
  }

  .career-record-grid {
    --record-grid-columns: 2;
  }

  .career-record-grid__detail {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .career-record-grid__detail h3 {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  .cv-contact__inner {
    padding: 4rem 1rem 6rem;
  }

  .cv-contact__header {
    padding-bottom: 2rem;
  }

  .cv-contact__header h2 {
    font-size: clamp(3.25rem, 15vw, 4.5rem);
  }

  .cv-contact__links {
    grid-template-columns: 1fr;
  }

  .cv-contact__links a {
    min-height: 8rem;
    padding: 1.5rem;
  }

  .cv-contact__links a + a {
    border-top: 1px solid currentColor;
    border-left: 0;
  }

  .cv-contact__links strong {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .cv-now__heading {
    align-items: start;
  }

  .cv-now::before {
    background-position: center bottom;
  }

  .cv-now::after {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.045) 0 1px,
        rgba(0, 0, 0, 0.14) 1px 4px
      ),
      linear-gradient(180deg, rgba(0, 8, 6, 0.76), rgba(0, 8, 6, 0.88));
  }

  .cv-now__copy {
    gap: 1rem;
  }

  .cv-now__copy .cv-now__lede {
    max-width: none;
    margin-bottom: 0.35rem;
  }
}

@media (max-height: 650px) {
  .program-row {
    padding-block: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .article-toc a[aria-current='location'] {
    animation: none;
  }

  .blog-filter__option,
  .post-entry,
  .post-entry__arrow {
    transition: none;
  }

  a.post-entry:is(:hover, :focus-visible) {
    transform: none;
  }

  a.post-entry:is(:hover, :focus-visible) .post-entry__arrow {
    transform: rotate(45deg);
  }

  .page-title,
  .station-header {
    view-transition-name: none;
  }

  .cv-lead__media::before,
  .cv-lead__media::after {
    transition: none;
  }

  .career-record-grid__summary {
    transition: none;
  }

  .career-record-grid__logo,
  .career-record-grid__identity {
    transform: none;
    animation: none !important;
  }

  .cv-contact__cue {
    transition: none;
  }

  .cv-contact__links a:is(:hover, :focus-visible) .cv-contact__cue {
    transform: none;
  }

  .cv-lead__media:is(:hover, :focus-visible)::before {
    transform: translate(-0.6rem, 0.6rem);
  }

  .cv-lead__media:is(:hover, :focus-visible)::after {
    transform: translate(0.6rem, -0.6rem);
  }

  .cv-lead__media.is-glitching::before,
  .cv-lead__media.is-glitching::after,
  .cv-lead__media.is-glitching .cv-lead__portrait--clear {
    animation: none;
  }

  .cv-lead__portrait--pixel {
    opacity: 0;
    transform: none;
    clip-path: inset(0);
    filter: none;
    animation: none;
  }

  .cv-lead__media.is-glitching .cv-lead__portrait--pixel {
    animation: cv-portrait-pixel-glitch-reduced 180ms steps(2, end) both;
  }

  ::view-transition-group(root) {
    animation: none;
  }
  ::view-transition-old(root) {
    animation: tune-dissolve-out 90ms linear both;
  }
  ::view-transition-new(root) {
    animation: tune-dissolve-in 130ms 90ms linear both;
  }

  html:is(
      .is-article-open,
      .is-article-close,
      .is-article-wipe-next,
      .is-article-wipe-previous,
      .is-channel-step-next,
      .is-channel-step-previous
    )::view-transition-old(root) {
    animation: tune-dissolve-out 90ms linear both;
  }

  html:is(
      .is-article-open,
      .is-article-close,
      .is-article-wipe-next,
      .is-article-wipe-previous,
      .is-channel-step-next,
      .is-channel-step-previous
    )::view-transition-new(root) {
    animation: tune-dissolve-in 130ms 90ms linear both;
  }

  html.is-theme-shifting::view-transition-old(root) {
    animation: tune-dissolve-out 60ms linear both;
  }

  html.is-theme-shifting::view-transition-new(root) {
    animation: tune-dissolve-in 100ms 60ms linear both;
  }

  html.is-theme-shifting::view-transition-new(theme-shift-osd) {
    animation: theme-luma-osd-reduced 160ms linear both;
  }

  html.is-theme-shifting-fallback .station,
  html.is-theme-shifting-fallback .site-page {
    animation: none;
  }

  html.is-theme-shifting-fallback .theme-shift-osd {
    animation: theme-luma-osd-reduced 160ms linear both;
  }

  .theme-shift-osd::after {
    display: none;
  }

  .tally-control__lamp,
  .tally-control__lamp::after {
    transition: none;
  }
  .station-header.is-signal-testing .station-ident__brand-name,
  .station-header.is-signal-testing .signal-ruler span {
    animation: none;
  }
  .station-header.is-signal-testing .tally-control__lamp {
    animation: tally-transmit-reduced 220ms linear both;
  }
  .signal-ruler span {
    transform: none;
    filter: none;
    transition: none;
  }
  .page-title.is-glitch-ready {
    cursor: inherit;
    transform: none;
    transition: none;
  }
  .program-row,
  .program-row__marker,
  .program-row__arrow,
  .article-body a,
  .article-body a::after,
  .article-source-note a,
  .article-source-note a::after,
  .link-glitch,
  .footnote-popover,
  .article-pagination__link,
  .article-pagination__direction,
  .article-pagination__arrow,
  .cv-now__external-link,
  .cv-now__external-link svg {
    transition: none;
  }
  :is(.article-body, .article-source-note) a:is(:hover, :focus-visible),
  .link-glitch:is(:hover, :focus-visible),
  .link-glitch[data-glitch-text]:is(:hover, :focus-visible)::before,
  .link-glitch[data-glitch-text]:is(:hover, :focus-visible)::after {
    animation: none;
  }
  .link-glitch[data-glitch-text]::before,
  .link-glitch[data-glitch-text]::after {
    opacity: 0;
  }
  :is(.article-body, .article-source-note) a[href^='http']:is(:hover, :focus-visible)::after,
  .cv-now__external-link:is(:hover, :focus-visible) svg {
    transform: none;
  }
  .article-pagination__link--previous:is(:hover, :focus-visible) .article-pagination__arrow {
    transform: rotate(-135deg);
  }
  .article-pagination__link--next:is(:hover, :focus-visible) .article-pagination__arrow {
    transform: rotate(45deg);
  }
}