/* ==========================================================================
   The Aviation Bug — landing page
   Design tokens and values follow the Claude Design handoff exactly.
   ========================================================================== */

:root {
  /* Navy family */
  --navy:        #12294d;
  --navy-deep:   #0a1830;
  --navy-mid:    #173765;
  --navy-lift:   #1d3f6d;

  /* Accent */
  --red:         #c33528;
  --red-bright:  #e85a4a;
  --gold:        #c9a227;
  --spotify:     #1DB954;

  /* Sky */
  --sky-top:     #2f6bb0;
  --sky-mid:     #5a92cf;
  --sky-pale:    #a9cbe8;

  /* Surfaces */
  --off-white:   #eef4fa;
  --white:       #ffffff;
  --wash-light:  #f3f7fb;
  --wash-mid:    #e4edf5;

  /* Text */
  --text-body:      #33465c;
  --text-body-alt:  #3a4d63;
  --text-hero:      #1c3a5e;
  --muted:          #5a6b80;
  --muted-light:    #7c8a99;
  --on-dark:        #b7cbe2;
  --on-dark-2:      #cfdcec;
  --footer-text:    #c6d6ea;
  --footer-muted:   #6d84a3;
  --footer-muted-2: #546b8a;
  --footer-icon:    #9fb4d0;
  --coin-caption:   #8fa6c2; /* lightened from #7f97b5 for AA contrast on navy */

  /* Hairlines & glass */
  --hairline:    rgba(18,41,77,.08);
  --card-border: rgba(18,41,77,.1);
  --glass-fill:  rgba(255,255,255,.12);
  --glass-line:  rgba(255,255,255,.22);

  /* Shadows */
  --sh-btn-navy:  0 8px 22px rgba(18,41,77,.32);
  --sh-btn-red:   0 8px 22px rgba(195,53,40,.32);
  --sh-btn-glass: 0 8px 22px rgba(18,41,77,.18);
  --sh-coin-cta:  0 10px 26px rgba(195,53,40,.4);
  --sh-media:     0 12px 30px rgba(18,41,77,.22);
  --sh-photo:     0 10px 26px rgba(18,41,77,.2);
  --sh-ig:        0 12px 30px rgba(18,41,77,.28);
  --sh-srow:      0 3px 10px rgba(18,41,77,.06);
  --sh-play:      0 10px 26px rgba(195,53,40,.5);
  --sh-badge:     0 6px 16px rgba(0,0,0,.35);
  --sh-coin:      0 14px 34px rgba(0,0,0,.45);

  /* Type */
  --f-cond: 'Saira Condensed', 'Saira', system-ui, sans-serif;
  --f-body: 'Saira', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* Layout */
  --col:    520px;
  --gutter: 26px;
}

/* ---------------------------------------------------------------- Reset */

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

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  background: var(--off-white);
  color: var(--text-body);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

p { margin: 0; text-wrap: pretty; }

h1, h2 { margin: 0; }

a { color: var(--red); text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------- Focus & skip link */

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.coin :focus-visible,
.footer :focus-visible,
.ig__card:focus-visible {
  outline-color: #fff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------ Shared helpers */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow--wide   { letter-spacing: .24em; }
.eyebrow--red    { color: var(--red); }
.eyebrow--bright { color: var(--red-bright); }

.h2-caps {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
}
.h2-caps--tight { letter-spacing: .02em; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: 78px 44px;
  background: linear-gradient(#2f6bb0 0%, #5a92cf 40%, #a9cbe8 72%, #eef4fa 100%);
  overflow: hidden;
}

.hero__clouds {
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--col);
  pointer-events: none;
}
.cloud { position: absolute; border-radius: 50%; filter: blur(3px); }
.cloud--left {
  top: 120px; left: -40px; width: 170px; height: 82px;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0));
}
.cloud--right {
  top: 190px; right: -50px; width: 200px; height: 88px;
  background: radial-gradient(closest-side, rgba(255,255,255,.82), rgba(255,255,255,0));
}
.cloud--horizon {
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 120px; filter: blur(4px);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__logo {
  width: 210px;
  height: 201px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(18,41,77,.35));
}

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .75;
  margin: 18px 0 6px;
}

.hero__title {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 16px rgba(18,41,77,.35);
}

.hero__tagline {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--navy);
  margin-top: 14px;
}

.hero__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-hero);
  max-width: 300px;
  margin-top: 16px;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  max-width: 300px;
  margin-top: 26px;
}

.hero__cue {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--navy);
  animation: cue 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------- Buttons */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  border-radius: 14px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn--spotify { background: var(--navy); box-shadow: var(--sh-btn-navy); }
.btn--youtube { background: var(--red);  box-shadow: var(--sh-btn-red); }
.btn--coin {
  background: rgba(255,255,255,.9);
  color: var(--navy);
  border: 1.5px solid rgba(18,41,77,.16);
  box-shadow: var(--sh-btn-glass);
}

.btn--buy {
  width: 100%;
  max-width: 300px;
  height: 54px;
  font-size: 16px;
  gap: 8px;
  background: var(--red);
  box-shadow: var(--sh-coin-cta);
  margin: 8px auto 0;
}

/* Glyphs */
.glyph { display: inline-grid; place-items: center; flex: none; }
.glyph--spotify {
  width: 20px; height: 20px; border-radius: 50%; background: var(--spotify);
}
.glyph--spotify > span { width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }

.glyph--youtube { width: 22px; height: 16px; border-radius: 5px; background: #fff; }
.glyph--youtube > span {
  width: 0; height: 0; margin-left: 2px;
  border-left: 7px solid var(--red);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

.glyph--coin {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 1.5px solid var(--navy);
}
.glyph--coin > span { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }

/* ==========================================================================
   2 · FEATURED EPISODE
   ========================================================================== */

.featured {
  padding-block: 34px 30px;
  background: var(--off-white);
}

.featured__title {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--navy);
  margin: 9px 0 4px;
}

.featured__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
}

.featured__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body-alt);
  margin-top: 14px;
}

.media {
  position: relative;
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--sh-media);
  background: var(--navy);
}

.media__img,
.media__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media__img { object-fit: cover; }

.media__placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, #1d3f6d 0%, #12294d 55%, #0a1830 100%);
}
.media__placeholder img { width: 120px; height: auto; opacity: .22; }

.media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,.05), rgba(10,20,40,.45));
  pointer-events: none;
}

.media__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.play {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(195,53,40,.95);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-play);
  animation: floaty 3.4s ease-in-out infinite;
}
.play > span {
  width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.media__stamp {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(10,20,40,.55);
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
}

/* ==========================================================================
   3 · LATEST EPISODES
   ========================================================================== */

.episodes {
  padding-block: 30px 34px;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.episodes__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.episodes__all {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--red);
  white-space: nowrap;
  /* Enlarge the touch target without moving anything visually. */
  padding: 9px 6px;
  margin: -9px -6px;
}

.ep { border-bottom: 1px solid var(--hairline); }

.ep__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

.ep__tile {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ep__ep {
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .1em;
  opacity: .7;
}
.ep__num {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.ep__text { flex: 1; min-width: 0; }
.ep__title {
  display: block;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.05;
  color: var(--navy);
}
.ep__meta {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--muted-light);
  margin-top: 4px;
}

.ep__chev {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(18,41,77,.2);
  display: grid;
  place-items: center;
  transition: transform .22s ease-out, border-color .15s ease;
}
.ep__chev > span {
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--navy);
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
}
.ep.is-open .ep__chev { transform: rotate(90deg); }

/* Panel collapses only when JS is running, so the links stay reachable
   if the script fails to load. */
.js .ep__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease-out;
}
.js .ep.is-open .ep__panel { grid-template-rows: 1fr; }
.js .ep__panelInner { overflow: hidden; }

.ep__panelBody {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 0 15px 66px;
}

.chips { display: flex; gap: 7px; }

.chip {
  flex: 1;
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  transition: filter .15s ease;
}
.chip--spotify { background: var(--navy); color: #fff; }
.chip--youtube { background: var(--red);  color: #fff; }
.chip--apple {
  background: #fff;
  border: 1.5px solid rgba(18,41,77,.22);
  color: var(--navy);
}

.ep__page {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 9px;
  background: rgba(18,41,77,.05);
  color: var(--navy);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

/* ==========================================================================
   4 · ABOUT THE HOST
   ========================================================================== */

.about {
  padding-block: 34px 36px;
  background: linear-gradient(#f3f7fb, #e4edf5);
  scroll-margin-top: 20px;
}

.about__split {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  margin-top: 14px;
}

.about__photo {
  position: relative;
  flex: 0 0 168px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-photo);
}
.about__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 6%;
}
.about__photoScrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,0) 55%, rgba(10,20,40,.28));
  pointer-events: none;
}

.about__id { flex: 1; min-width: 0; padding-bottom: 6px; }

.about__name {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: .96;
  color: var(--navy);
  margin: 10px 0 0;
  /* The handle is one long unbreakable word — never let it push the page. */
  overflow-wrap: anywhere;
}

.about__facts {
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}

.about__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin-top: 14px;
}

/* ==========================================================================
   5 · THE CHALLENGE COIN
   ========================================================================== */

.coin {
  position: relative;
  padding-block: 40px 42px;
  background: linear-gradient(#0a1830 0%, #12294d 60%, #173765 100%);
  overflow: hidden;
  text-align: center;
  scroll-margin-top: 20px;
}

.coin__stage {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 18px auto 4px;
}

.coin__flipper {
  width: 100%;
  height: 100%;
  perspective: 900px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
}

.coin__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.1,.2,1);
  transform: rotateY(0deg);
}
.coin__flipper[aria-pressed="true"] .coin__inner { transform: rotateY(180deg); }

.coin__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--sh-coin);
}
.coin__face--back { transform: rotateY(180deg); }
.coin__face img { width: 100%; height: 100%; object-fit: cover; }

.coin__badge {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--red);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 5px 9px;
  border-radius: 20px;
  box-shadow: var(--sh-badge);
}

/* Deliberately loud: the flip is the strongest thing about the product and
   people miss it if the affordance whispers. Arrow points up at the coin. */
.coin__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 8px;
}
.coin__hintArrow {
  font-family: var(--f-body);
  font-size: 24px;
  line-height: 1;
  color: var(--red-bright);
  animation: nudgeUp 1.6s ease-in-out infinite;
}
.coin__hintText {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.coin__title {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 34px;
  line-height: .92;
  text-transform: uppercase;
  color: #fff;
  margin-top: 12px;
}

.coin__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 290px;
  margin: 12px auto 0;
}
.coin__stamp {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--red-bright);
}

.coin__price {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 40px;
  color: #fff;
  margin: 18px 0 2px;
}

.coin__trust {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--coin-caption);
  margin-top: 12px;
}

.coin__support { margin-top: 6px; }
.coin__support a {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--coin-caption);
  text-decoration: underline;
  padding: 9px 6px;
  margin: -9px -6px;
}

/* ==========================================================================
   6 · INSTAGRAM
   ========================================================================== */

.ig {
  padding-block: 32px 34px;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.ig__card {
  display: block;
  border-radius: 18px;
  padding: 22px 20px;
  background: linear-gradient(135deg, #12294d 0%, #1d3f6d 55%, #c33528 140%);
  box-shadow: var(--sh-ig);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ig__row { display: flex; align-items: center; gap: 14px; }

.ig__tile {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  display: grid;
  place-items: center;
}

.ig__text { flex: 1; min-width: 0; }
.ig__title {
  display: block;
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.ig__handle {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--on-dark);
  margin-top: 5px;
}

.ig__pill {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  white-space: nowrap;
}

.ig__desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-2);
  margin-top: 14px;
}

/* ==========================================================================
   7 · SUBSCRIBE STRIP
   ========================================================================== */

.subscribe {
  padding-block: 32px;
  background: var(--off-white);
  text-align: center;
}

.subscribe__sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 18px;
}

.subscribe__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}

.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: var(--sh-srow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.srow__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
}
.srow__act {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--red);
  white-space: nowrap;
}

/* ==========================================================================
   8 · FOOTER
   ========================================================================== */

.footer {
  padding-block: 34px 70px;
  background: var(--navy-deep);
  color: var(--footer-text);
  text-align: center;
}

.footer__logo {
  width: 58px; height: 58px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.footer__wordmark {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}

.footer__tagline {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--footer-muted);
  margin-top: 6px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 22px 0 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer__links a {
  color: var(--footer-text);
  /* Enlarge the touch target without moving anything visually. */
  padding: 9px 4px;
  margin: -9px -4px;
}

.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.footer__ig {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: #fff;
  color: var(--navy);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13.5px;
}

.footer__circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--footer-icon);
  transition: border-color .15s ease, color .15s ease;
}

.footer__copy {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--footer-muted-2);
  margin-top: 24px;
}

/* ==========================================================================
   Very narrow phones (iPhone SE and similar, under 360px)
   The handle "@CaptainMike350" is long enough to crowd the Instagram row.
   ========================================================================== */

@media (max-width: 359px) {
  .ig__card   { padding: 20px 16px; }
  .ig__row    { gap: 11px; }
  .ig__title  { font-size: 23px; }
  .ig__handle { font-size: 10px; }
  .ig__pill   { padding: 0 13px; font-size: 12.5px; }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes cue {
  0%, 100% { transform: translate(-50%, 0);   opacity: .55; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

@keyframes nudgeUp {
  0%, 100% { transform: translateY(0);    opacity: .75; }
  50%      { transform: translateY(-7px); opacity: 1; }
}

/* ==========================================================================
   Hover states (pointer devices only)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .btn:hover      { transform: translateY(-1px); filter: brightness(.92); }
  .btn--coin:hover{ filter: none; background: #fff; }
  .chip:hover     { filter: brightness(.92); }
  .chip--apple:hover { filter: none; background: var(--off-white); }
  .ep__head:hover { background: rgba(18,41,77,.03); }
  .ep__head:hover .ep__chev { border-color: rgba(18,41,77,.4); }
  .ig__card:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(18,41,77,.34); }
  .srow:hover     { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18,41,77,.1); }
  .footer__links a:hover { color: #fff; }
  .footer__circle:hover  { color: #fff; border-color: rgba(255,255,255,.45); }
  .episodes__all:hover   { color: var(--navy); }
  .coin__support a:hover { color: #fff; }
  .coin__flipper:hover   { filter: brightness(1.04); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .play, .hero__cue, .coin__hintArrow { animation: none; }
  .hero__cue { opacity: .8; }
  .coin__hintArrow { opacity: 1; }
  .coin__inner { transition-duration: 0s; }
  .js .ep__panel { transition-duration: 0s; }
  .ep__chev { transition-duration: 0s; }
  .btn, .ig__card, .srow { transition: none; }
}