:root {
  --bg: #111111;
  --fg: #f2f2f2;
  --fg-dim: #d9d9d9;
  --chip: rgba(24, 24, 24, 0.82);
  /* SF Pro Expanded where available (installed SF Pro, or Apple's system font
     in Safari/iOS); Archivo Expanded is a near-identical web fallback. */
  --font-expanded: "SF Pro", -apple-system, "Archivo", sans-serif;
  --header-h: 56px;
  --footer-h: 56px;
  --gutter: 33px;
  --gap: 15px;
  /* Cards are 9:16, sized to ~88% of the space between header and footer,
     but never wider than the viewport allows on narrow screens. */
  --card-fill: 0.88;
  --card-h: min(
    calc((100svh - var(--header-h) - var(--footer-h)) * var(--card-fill)),
    calc((100vw - 2 * var(--gutter)) * 16 / 9)
  );
  /* Side padding that lets the first and last cards sit centered. */
  --edge: calc(50vw - var(--card-w) / 2);
  --card-w: calc(var(--card-h) * 9 / 16);
  --radius: calc(var(--card-w) * 0.062);
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-expanded);
  font-stretch: 125%;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
}

/* Header */

.site-header {
  height: var(--header-h);
  display: grid;
  place-items: center;
  flex: none;
}

/* The hover fill paints text with background-clip, which only covers the
   box; the padding (cancelled by the margin) extends it over descenders. */
.wordmark {
  display: inline-block;
  margin: -0.2em 0;
  padding: 0.2em 0;
  cursor: default;
  color: var(--fg-dim);
  font-weight: 800; /* Heavy */
  font-size: 21.07px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Reel */

main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}

.reel {
  display: flex;
  gap: var(--gap);
  width: 100%;
  padding: 0 0 0 var(--edge);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.reel::-webkit-scrollbar {
  display: none;
}

/* Trailing space so the last card can center too. */
.reel::after {
  content: "";
  flex: 0 0 calc(var(--edge) - var(--gap));
}

/* Snapping is turned off while JS animates to a card (wheel, drag, keys). */
.reel.is-free {
  scroll-snap-type: none;
}

.reel.is-dragging {
  cursor: grabbing;
}

/* Inset so the reel's overflow can't clip it. */
.reel:focus-visible .card.is-current {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

/* Card */

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  overflow: hidden;
  background: #1c1c1c center / cover no-repeat;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* swipes stop at every card */
  /* Clip rounded corners on video in Safari. */
  isolation: isolate;
}

.card-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Bottom-left caption: the app icon (if any) is always shown; the post text
   opens beneath it on the active (hovered) card. */
.card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; /* own stacking context so the scrim sits above the video */
  padding: 72px 18px 18px;
  color: #fff;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* Scrim behind the icon and text: a fixed band at the bottom of the card
   (it doesn't grow with the text). Always on when there's an icon,
   otherwise only while the text is showing. */
.card-caption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--card-w) * 0.45);
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.5) 60%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* The shadow lives on the wrapper because the mask would clip it. */
.card-icon {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* Superellipse mask for iOS-style continuous ("smooth") corners. */
.card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  /* Inlined (same shape as icons/squircle.svg) so it also works from file://. */
  --squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.00 50.00L99.99 58.09L99.97 61.44L99.92 64.01L99.86 66.17L99.79 68.06L99.69 69.78L99.58 71.34L99.45 72.80L99.30 74.16L99.14 75.44L98.96 76.65L98.76 77.79L98.54 78.89L98.31 79.93L98.06 80.93L97.79 81.89L97.50 82.81L97.20 83.69L96.87 84.54L96.53 85.36L96.17 86.14L95.79 86.90L95.39 87.63L94.97 88.33L94.54 89.01L94.08 89.66L93.60 90.29L93.10 90.90L92.58 91.48L92.04 92.04L91.48 92.58L90.90 93.10L90.29 93.60L89.66 94.08L89.01 94.54L88.33 94.97L87.63 95.39L86.90 95.79L86.14 96.17L85.36 96.53L84.54 96.87L83.69 97.20L82.81 97.50L81.89 97.79L80.93 98.06L79.93 98.31L78.89 98.54L77.79 98.76L76.65 98.96L75.44 99.14L74.16 99.30L72.80 99.45L71.34 99.58L69.78 99.69L68.06 99.79L66.17 99.86L64.01 99.92L61.44 99.97L58.09 99.99L50.00 100.00L41.91 99.99L38.56 99.97L35.99 99.92L33.83 99.86L31.94 99.79L30.22 99.69L28.66 99.58L27.20 99.45L25.84 99.30L24.56 99.14L23.35 98.96L22.21 98.76L21.11 98.54L20.07 98.31L19.07 98.06L18.11 97.79L17.19 97.50L16.31 97.20L15.46 96.87L14.64 96.53L13.86 96.17L13.10 95.79L12.37 95.39L11.67 94.97L10.99 94.54L10.34 94.08L9.71 93.60L9.10 93.10L8.52 92.58L7.96 92.04L7.42 91.48L6.90 90.90L6.40 90.29L5.92 89.66L5.46 89.01L5.03 88.33L4.61 87.63L4.21 86.90L3.83 86.14L3.47 85.36L3.13 84.54L2.80 83.69L2.50 82.81L2.21 81.89L1.94 80.93L1.69 79.93L1.46 78.89L1.24 77.79L1.04 76.65L0.86 75.44L0.70 74.16L0.55 72.80L0.42 71.34L0.31 69.78L0.21 68.06L0.14 66.17L0.08 64.01L0.03 61.44L0.01 58.09L0.00 50.00L0.01 41.91L0.03 38.56L0.08 35.99L0.14 33.83L0.21 31.94L0.31 30.22L0.42 28.66L0.55 27.20L0.70 25.84L0.86 24.56L1.04 23.35L1.24 22.21L1.46 21.11L1.69 20.07L1.94 19.07L2.21 18.11L2.50 17.19L2.80 16.31L3.13 15.46L3.47 14.64L3.83 13.86L4.21 13.10L4.61 12.37L5.03 11.67L5.46 10.99L5.92 10.34L6.40 9.71L6.90 9.10L7.42 8.52L7.96 7.96L8.52 7.42L9.10 6.90L9.71 6.40L10.34 5.92L10.99 5.46L11.67 5.03L12.37 4.61L13.10 4.21L13.86 3.83L14.64 3.47L15.46 3.13L16.31 2.80L17.19 2.50L18.11 2.21L19.07 1.94L20.07 1.69L21.11 1.46L22.21 1.24L23.35 1.04L24.56 0.86L25.84 0.70L27.20 0.55L28.66 0.42L30.22 0.31L31.94 0.21L33.83 0.14L35.99 0.08L38.56 0.03L41.91 0.01L50.00 0.00L58.09 0.01L61.44 0.03L64.01 0.08L66.17 0.14L68.06 0.21L69.78 0.31L71.34 0.42L72.80 0.55L74.16 0.70L75.44 0.86L76.65 1.04L77.79 1.24L78.89 1.46L79.93 1.69L80.93 1.94L81.89 2.21L82.81 2.50L83.69 2.80L84.54 3.13L85.36 3.47L86.14 3.83L86.90 4.21L87.63 4.61L88.33 5.03L89.01 5.46L89.66 5.92L90.29 6.40L90.90 6.90L91.48 7.42L92.04 7.96L92.58 8.52L93.10 9.10L93.60 9.71L94.08 10.34L94.54 10.99L94.97 11.67L95.39 12.37L95.79 13.10L96.17 13.86L96.53 14.64L96.87 15.46L97.20 16.31L97.50 17.19L97.79 18.11L98.06 19.07L98.31 20.07L98.54 21.11L98.76 22.21L98.96 23.35L99.14 24.56L99.30 25.84L99.45 27.20L99.58 28.66L99.69 30.22L99.79 31.94L99.86 33.83L99.92 35.99L99.97 38.56L99.99 41.91Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}

/* Collapsed to zero height until active; animates open via grid rows. */
.card-text {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}

.card-text-inner {
  min-height: 0;
  overflow: hidden;
}

.card-icon + .card-text .card-text-inner {
  padding-top: 10px;
}

.card-caption p {
  margin: 0 0 0.6em;
  white-space: pre-line;
  text-wrap: pretty;
}

.card-caption p:last-child {
  margin-bottom: 0;
}

.card-caption .card-name {
  margin-bottom: 0.15em;
  font-weight: 600;
}

.card-caption.has-icon::before,
.card.is-active .card-caption::before {
  opacity: 1;
}

.card.is-active .card-text {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Link to the video's post on X, shown on the active card. */
.card-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.15s ease, transform 0.15s ease;
}

/* Only on the active (hovered) card, or when reached by keyboard. */
.card.is-active .card-x,
.card-x:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.card-x:hover {
  background: rgba(0, 0, 0, 0.7);
}

.card-x:active {
  transform: scale(0.92);
}

.card-x:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.card-x svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Shown when the browser blocks autoplay (e.g. iOS Low Power Mode). */
.card.needs-tap {
  cursor: pointer;
}

.card.needs-tap::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* Footer */

.site-footer {
  height: var(--footer-h);
  display: grid;
  place-items: center;
  flex: none;
  padding: 0 16px;
}

.site-footer p {
  display: inline-block;
  margin: -0.2em 0; /* see .wordmark */
  padding: 0.2em 0;
  cursor: default;
  color: var(--fg-dim);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
}

/* Small screens: tighter chrome so the cards stay big. */

@media (max-width: 600px) {
  :root {
    --card-fill: 0.95;
    --gutter: 16px;
    --gap: 10px;
    --header-h: 52px;
    --footer-h: 52px;
    --card-h: min(
      calc((100svh - var(--header-h) - var(--footer-h)) * var(--card-fill)),
      calc((100vw - 2 * var(--gutter) - 32px) * 16 / 9)
    );
  }

  .card-caption {
    padding: 56px 12px 14px;
    font-size: 13px;
  }

  .card-icon {
    width: 46px;
    height: 46px;
  }

  .card-x {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
  }

  .card-x svg {
    width: 13px;
    height: 13px;
  }

  .site-footer p {
    font-size: 12px;
  }
}

/* Short landscape phones: slimmer chrome and controls so cards stay usable. */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 40px;
    --footer-h: 36px;
  }

  .wordmark {
    font-size: 16px;
  }

  .site-footer p {
    font-size: 12px;
  }

  .card-caption {
    padding: 40px 10px 10px;
    font-size: 11px;
  }

  .card-icon {
    width: 34px;
    height: 34px;
  }

  .card-x {
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
  }

  .card-x svg {
    width: 11px;
    height: 11px;
  }
}

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

  .card-text {
    transition: opacity 0.15s linear;
  }
}