@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Palette pulled from the spaceman avatar: ink, steel blue, newsprint highlight. */
  --ink: #0b1217;
  --ink-2: #111c24;
  --ink-3: #172631;
  --line: #22394a;
  --blue: #5badd2;
  --blue-hi: #86c6e3;
  --blue-deep: #1d4b66;
  --paper: #e9f0f3;
  --muted: #9db3c0;
  --shadow: 0 10px 28px -12px rgb(2 8 12 / 0.75), 0 2px 6px -2px rgb(2 8 12 / 0.6);
  --radius: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --z-glint: 2;
}

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

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) var(--ink); }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--ink);
  /* Halftone print dots, the comic's own texture, fading in from the top corner. */
  background-image:
    radial-gradient(circle at 1px 1px, rgb(91 173 210 / 0.16) 1.1px, transparent 1.6px),
    radial-gradient(120% 70% at 85% -10%, rgb(91 173 210 / 0.14), transparent 60%);
  background-size: 7px 7px, 100% 100%;
  background-attachment: fixed;
  color: var(--paper);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
body::before {
  /* Mask the halftone so it only sits in the upper part of the page. */
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgb(11 18 23 / 0.55) 45%, var(--ink) 85%);
  pointer-events: none;
  z-index: -1;
}

::selection { background: var(--blue); color: var(--ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--ink); }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }

.page {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  min-height: calc(100dvh - 2.75rem);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 2rem;
}

/* Hero */
.hero { display: grid; justify-items: center; text-align: center; padding-top: 1.5rem; }

.avatar {
  position: relative;
  width: min(48vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--blue-deep), 0 22px 44px -18px rgb(0 0 0 / 0.8);
}
/* No drag-to-desktop or right-click "Save image as": the image ignores the pointer, so a right-click lands on
   the frame instead. A deterrent, not protection; it stays in the accessibility tree with its alt text. */
.avatar img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* The one authored moment: a light glint sweeping across the visor on arrival. */
.glint {
  position: absolute;
  inset: -20%;
  z-index: var(--z-glint);
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.0) 42%, rgb(214 238 250 / 0.55) 49%, rgb(255 255 255 / 0.85) 50%, rgb(214 238 250 / 0.5) 51.5%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-75%);
  animation: glint 1.6s var(--ease-out) 0.35s 1 both;
  pointer-events: none;
}
@keyframes glint {
  from { transform: translateX(-75%); }
  to { transform: translateX(75%); }
}

.name {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4.25rem, 19vw, 7.5rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--paper);
  text-shadow: 0 4px 0 var(--blue-deep), 0 14px 30px rgb(0 0 0 / 0.5);
}
.handle {
  margin: 0.85rem 0 0;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.bio {
  margin: 0.9rem 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* Links */
/* Groups: tight inside (0.75rem), clearly apart between (2.25rem), so proximity says what belongs together. */
.links { display: grid; gap: 2.25rem; width: 100%; max-width: 34rem; margin: 0 auto; align-content: start; }
.group { display: grid; gap: 0.75rem; }
.pair { display: grid; gap: 0.75rem; }

.tile {
  --tile-bg: var(--ink-2);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;  /* icon, text, arrow: one layout so every arrow lines up */
  align-items: center;
  gap: 0.95rem;
  min-height: 4.25rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--tile-bg);
  color: var(--paper);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-out), border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.35s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tile__icon { width: 1.6rem; height: 1.6rem; fill: currentColor; color: var(--blue); flex: none; }
.tile__text { display: grid; gap: 0.1rem; min-width: 0; }
.tile__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.tile__sub { color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
/* The pair (whistle, Ko-fi) sits below YouTube and Instagram in rank, so it is a size down. */
.pair .tile { gap: 0.7rem; min-height: 3.4rem; padding: 0.65rem 1.1rem 0.65rem 0.95rem; }
.pair .tile__icon { width: 1.3rem; height: 1.3rem; }
.pair .tile__title { font-size: 1.12rem; white-space: nowrap; }
.pair .tile__sub { font-size: 0.8rem; line-height: 1.3; }
.pair .tile__go { width: 1.15rem; height: 1.15rem; }
.tile__go {
  width: 1.15rem; height: 1.15rem; color: var(--muted);
  transition: transform 0.35s var(--ease-out), color 0.25s ease;
}

.tile:hover { transform: translateY(-2px); border-color: var(--blue); background-color: var(--ink-3); box-shadow: 0 16px 34px -14px rgb(2 8 12 / 0.85), 0 3px 8px -3px rgb(2 8 12 / 0.6); }
.tile:hover .tile__go { transform: translate(2px, -2px); color: var(--blue-hi); }
.tile:active { transform: translateY(0) scale(0.99); transition-duration: 0.08s; }

/* YouTube leads: the one drenched tile. */
.tile--lead {
  --tile-bg: var(--blue);
  border-color: var(--blue);
  color: var(--ink);
  min-height: 5.25rem;
}
.tile--lead .tile__icon { color: var(--ink); width: 1.9rem; height: 1.9rem; }
.tile--lead .tile__title { font-size: 2rem; }
.tile--lead .tile__sub { color: #0f2a3a; font-weight: 500; }
.tile--lead .tile__go { color: var(--ink); }
.tile--lead:hover { background-color: var(--blue-hi); border-color: var(--blue-hi); }
.tile--lead:hover .tile__go { color: var(--ink); }

.live {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.live__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ff4d5e; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.chip--twitch[data-live="true"] .live { display: inline-flex; }
.chip--twitch[data-live="true"] .chip__note { display: none; }
.chip__note { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.chip .live { padding: 0.2rem 0.5rem 0.2rem 0.4rem; background: var(--ink-3); }

/* Socials */
.socials { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: -0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.3s var(--ease-out);
}
.chip svg { width: 1.1rem; height: 1.1rem; fill: var(--blue); }
.chip:hover { border-color: var(--blue); background: var(--ink-2); }
.chip:active { transform: scale(0.97); }

/* Featured video: the newest full piece. Local thumbnail; YouTube only loads on play. The thumbnail carries
   its own title art, so the play control sits in a bar below it instead of over the artwork. */
.feature { margin: 0; }
.feature__play {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--ink-2); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.35s var(--ease-out), border-color 0.25s ease, box-shadow 0.35s var(--ease-out);
}
.feature__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #05090c; }
.feature__media img, .feature__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.feature__media img { transition: filter 0.3s ease; filter: saturate(0.92) brightness(0.92); }
.feature__bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; }
.feature__bar .tile__title { font-size: 1.55rem; }
.feature__btn {
  position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 4px rgb(91 173 210 / 0.18); transition: transform 0.25s var(--ease-out), background-color 0.2s ease;
}
.feature__btn::after {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 0.45rem 0 0.45rem 0.72rem; border-color: transparent transparent transparent var(--ink);
}
.feature__play:hover { transform: translateY(-2px); border-color: var(--blue); }
.feature__play:hover .feature__media img { filter: none; }
.feature__play:hover .feature__btn { transform: scale(1.08); background: var(--blue-hi); }
.feature__play:active { transform: scale(0.99); }
.feature.is-playing .feature__play { cursor: default; transform: none; }
.feature.is-playing .feature__bar { display: none; }

/* Practice room: raw takes that are only here. One card, one row per take, one player for the page. */
/* Practice room: closed by default to keep the page calm. The heading is a tile-shaped toggle; the player opens
   below it. */
.practice { display: grid; gap: 0.75rem; }
.practice__h { display: grid; margin: 0; font: inherit; }
.practice__toggle { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.practice__chev { width: 1.15rem; height: 1.15rem; color: var(--muted); transition: transform 0.35s var(--ease-out), color 0.25s ease; }
.practice__toggle:hover .practice__chev { color: var(--blue-hi); }
.practice__toggle[aria-expanded="true"] .practice__chev { transform: rotate(180deg); color: var(--blue-hi); }
.practice__toggle[aria-expanded="true"] { border-color: var(--blue-deep); }
.practice__toggle .is-playing { color: var(--blue-hi); }
.player:not([hidden]) { animation: open 0.4s var(--ease-out) both; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
/* The takes card is the player: a now-playing strip with the volume on top, the takes below, one card. */
.player { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; box-shadow: var(--shadow); }
.player__now { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.35rem 0.6rem 0.35rem 0.95rem; background: var(--ink-3); border-bottom: 1px solid var(--line); }
.player__status { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.player__status b { color: var(--blue-hi); font-weight: 600; }
.player__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.player__bar span { display: block; height: 100%; width: 0; background: var(--blue); }
.vol { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.vol__mute { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.35rem -0.5rem 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blue); cursor: pointer; }
.vol__mute svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; }
.vol__mute:hover { color: var(--blue-hi); }
.vol__x { display: none; }
.vol__mute[aria-pressed="true"] .vol__wave { display: none; }
.vol__mute[aria-pressed="true"] .vol__x { display: inline; }
.vol__range { --fill: 80%; appearance: none; -webkit-appearance: none; width: 5.5rem; height: 2.75rem; margin: -0.5rem 0; background: transparent; cursor: pointer; }
.vol__range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) var(--fill), var(--line) var(--fill)); }
.vol__range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.vol__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--blue); }
.vol__range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 3px var(--ink), 0 1px 4px rgb(0 0 0 / 0.5); }
.vol__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 3px var(--ink); }
.vol__range:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
.vol.no-range .vol__range { display: none; }
/* Small phones: keep every title and the heading on one line. */
@media (max-width: 380px) { .vol__range { width: 4.25rem; } }
@media (max-width: 430px) { .take__date { display: none; } }
.takes { list-style: none; margin: 0; padding: 0; }
/* Tune type: a small tag beside the name, so a reel reads as a reel at a glance. */
.take__type { display: inline-block; margin-left: 0.5rem; padding: 0.12rem 0.42rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.12em; line-height: 1.2; }
.take[aria-pressed="true"] .take__type { border-color: var(--blue-deep); color: var(--blue-hi); }
.takes li + li { border-top: 1px solid var(--line); }
.take {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; width: 100%;
  min-height: 2.9rem; padding: 0.5rem 0.95rem; border: 0; background: transparent; color: var(--paper); text-align: left; cursor: pointer;
  font: 500 0.95rem/1.3 var(--body); transition: background-color 0.2s ease;
}
.take:hover { background: var(--ink-3); }
.take:active .take__btn { transform: scale(0.94); }
.take__btn { position: relative; width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 1.5px solid var(--blue); transition: background-color 0.2s ease, transform 0.15s ease; }
.take__btn::after {
  content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 0.32rem 0 0.32rem 0.52rem; border-color: transparent transparent transparent var(--blue);
}
.take:hover .take__btn { background: rgb(91 173 210 / 0.15); }
.take[aria-pressed="true"] .take__btn { background: var(--blue); }
.take[aria-pressed="true"] .take__btn::after {
  left: 50%; width: 0.48rem; height: 0.62rem; border: 0;
  background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%);
}
.take[aria-pressed="true"] .take__title { color: var(--blue-hi); }
.take__meta { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.take__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.take__bar span { display: block; height: 100%; width: 0; background: var(--blue); }
.take[data-active] .take__bar { background: rgb(91 173 210 / 0.18); }

/* Footer */
/* Made with love: Devin's mark on every site he builds, ported from devinpickering.com. Two soft thumps, then rest. */
.heart { display: inline-block; color: #e25563; animation: heartbeat 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 16% { transform: scale(1); } 24% { transform: scale(1.12); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.foot { align-self: end; text-align: center; color: #7f97a5; font-size: 0.8rem; padding-bottom: 0.25rem; }
.foot p { margin: 0.3rem auto; max-width: 52ch; }
/* Amazon requires this exact sentence; keep it on one line, shrinking a touch on narrow phones. */
.foot .disclosure { max-width: none; white-space: nowrap; font-size: min(0.8rem, 3.05vw); }

/* Desktop: logo and name on the left, links on the right. */
@media (min-width: 900px) {
  body { padding-top: max(2rem, env(safe-area-inset-top)); }
  .page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-rows: 1fr auto;
    column-gap: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
    min-height: calc(100dvh - 3.5rem);
  }
  .hero { justify-items: start; text-align: left; padding-top: 0; position: sticky; top: max(2rem, calc(50vh - 18rem)); align-self: start; }
  .avatar { width: 300px; }
  .name { font-size: clamp(7rem, 11vw, 10rem); }
  .handle { margin-top: 1.25rem; }
  .bio { font-size: 1.15rem; }
  .links { max-width: none; margin: 0; }
  .pair { grid-template-columns: 1fr 1fr; }
  .socials { justify-content: flex-start; }
  .foot { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .glint { animation: none; opacity: 0; }
  .heart { animation: none; }
  .live__dot { animation: none; }
  .tile, .tile__go, .chip, .feature__play, .feature__btn, .feature__media img, .take, .take__btn, .practice__chev { transition: none; }
  .player:not([hidden]) { animation: none; }
}

/* Living spotlight, ported from devinpickering.com (2026-10-01) and drawn in memfis.tv's ink: a soft pool of
   the brand blue that wanders on its own, follows the pointer with a little lag, and drifts off again when
   the mouse goes idle. Inside the pool the halftone dots light up, the comic's own print texture catching the
   light. Screen blend only ever lightens, so it lifts the dark surfaces and leaves the type alone. site.js
   creates it only with a fine pointer and motion allowed. */
.glow {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 40%), rgb(91 173 210 / 0.10), rgb(91 173 210 / 0.035) 42%, transparent 68%);
  opacity: 0; transition: opacity 0.8s ease;
}
.glow::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 1px 1px, rgb(134 198 227 / 0.28) 1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%);
  mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%);
}
.glow.on { opacity: 1; }
@media (hover: none) { .glow { display: none; } }