@font-face {
  font-family: Bricolage;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --night: #101114;
  --charcoal: #292b32;
  --paper: #f4f0e9;
  --amber: #f5a44c;
  --pink: #de6383;
  --muted: #b8b3ad;
  --line: #3a3c43;
  --gutter: clamp(20px, 4.5vw, 72px);
}
* {
  box-sizing: border-box;
}
html {
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  color: var(--paper);
  font-family: Bricolage, "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
input {
  font: inherit;
}
button,
a,
input,
summary {
  touch-action: manipulation;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 5px;
}
::selection {
  color: var(--night);
  background: var(--amber);
}
.shell {
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 20;
  padding: 18px;
  background: var(--paper);
  color: var(--night);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: none;
}
.site-header {
  height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1.5px;
  text-decoration: none;
  white-space: nowrap;
}
.brand-spark {
  margin: 6px 0 0 3px;
  color: var(--pink);
  font-size: 39px;
  font-weight: 600;
  line-height: 1;
}
.header-invite {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  font-size: 13px;
  text-decoration: none;
}
.link-arrow {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  color: var(--amber);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-invite .link-arrow {
  transition: transform 0.2s ease;
}
.header-invite:hover .link-arrow {
  transform: translate(2px, -2px);
}
.hero {
  border-block: 1px solid var(--line);
  background: #141518;
}
.stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 20px 8px;
  min-width: 0;
}
.film {
  position: relative;
  z-index: 1;
  width: min(100%, max(16rem, 38.25vh), 26rem);
  width: min(100%, max(16rem, 38.25svh), 26rem);
  margin: 0;
}
.film-screen {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: var(--charcoal);
  border-radius: 4px;
}
/* Hairline frame drawn as an overlay, not a border: a real border makes the
   content box smaller than the border box, and WebKit then resolves the
   video's percentage width against the content box but its height against the
   border box, skewing the measured 9:16 ratio on narrow viewports. An inset
   box-shadow on .film-screen itself is hidden behind the video, so the ring is
   painted by a pseudo-element stacked above it. */
.film-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #4a4540;
  pointer-events: none;
}
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--night);
}
.stage-note {
  position: absolute;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--muted);
}
.stage-note--left {
  left: var(--gutter);
}
.stage-note--right {
  right: var(--gutter);
  top: auto;
  bottom: 27%;
}
.small-rule {
  width: 34px;
  height: 1px;
  background: var(--amber);
  margin-bottom: 16px;
}
.stage-spark {
  color: var(--amber);
  font-family: Bricolage, Arial, sans-serif;
  font-size: 54px;
  line-height: 0.7;
  margin-bottom: 14px;
}
.film-controls {
  display: grid;
  /* Two distinct rows: sound controls (with their volume slider) on top, the
     seek bar with its time readout below. Previously the seek bar sat directly
     under the mute button and read as a volume slider. */
  row-gap: 2px;
  padding-top: 8px;
}
.control-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: space-between;
}
.film-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 54px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.film-button:hover {
  background: var(--charcoal);
  border-color: var(--line);
}
.film-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.film-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}
.sound-toggle {
  font-size: 12px;
  letter-spacing: 0.015em;
}
.sound-toggle svg {
  color: var(--amber);
}
.sound-waves {
  display: none;
}
.sound-toggle[aria-pressed="true"] .sound-waves {
  display: block;
}
.sound-toggle[aria-pressed="true"] .sound-slash {
  display: none;
}
.sound-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.volume {
  width: 104px;
  min-height: 54px;
  margin: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.volume:disabled {
  cursor: default;
}
.timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
}
.caption-toggle {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  min-width: 54px;
  min-height: 54px;
  padding: 8px;
}
.caption-toggle[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--line);
}
.timeline input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  margin: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.timeline input:disabled {
  cursor: default;
}
.film-time {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.player-status {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.player-status:empty {
  display: none;
}
.film-caption {
  margin: 9px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.025em;
}
.hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hero-foot a {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  min-height: 54px;
  text-decoration: none;
  font-family: Bricolage, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--paper);
}
.hero-foot a span {
  font-size: 20px;
  color: var(--amber);
}
.story {
  padding-block: clamp(72px, 8vw, 128px) 64px;
}
.eyebrow {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 30px;
}
h1 {
  font-size: clamp(48px, 7.8vw, 124px);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 650;
  margin: 0;
  max-width: 1300px;
  text-wrap: balance;
}
h1 em {
  font-weight: 700;
  font-style: normal;
  color: var(--amber);
}
.heading-period {
  display: inline-block;
  vertical-align: top;
  color: var(--pink);
  font-size: 0.62em;
  margin-left: 0.12em;
  transform: rotate(-12deg);
}
.story-afterword {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  margin-top: 38px;
}
.story-afterword p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 420px;
  margin: 0;
}
.handwritten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-right: 10%;
  font-family: Georgia, serif;
  font-size: 21px;
  font-style: italic;
  transform: rotate(-6deg);
}
.handwritten svg {
  width: 140px;
  height: 24px;
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-description {
  margin-top: 32px;
  max-width: 640px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.film-description summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  width: fit-content;
  cursor: pointer;
}
.film-description summary::before {
  content: "+";
  color: var(--amber);
  font-size: 20px;
}
.film-description[open] summary::before {
  content: "−";
}
.film-description p {
  margin: 8px 0 0;
}
.follow {
  padding-bottom: clamp(72px, 7vw, 112px);
}
.follow-heading {
  border-top: 1px solid var(--line);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 26px;
}
h2 {
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
  margin: 0;
}
.follow-heading p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.social-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.social {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 84px;
  padding: 20px 22px;
  background: var(--night);
  border: 1px solid #4c4b4b;
  border-radius: 3px;
  text-decoration: none;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.social svg {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  color: var(--amber);
}
.social > span:not(.social-arrow) {
  font-size: 17px;
  font-weight: 500;
}
.social-arrow {
  margin-left: auto;
  transition: transform 0.18s;
}
.social:hover {
  background: var(--charcoal);
  border-color: var(--amber);
}
.social:hover .social-arrow {
  transform: translate(3px, -3px);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.site-footer > span:nth-child(2) {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--paper);
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  text-decoration: none;
}
.site-footer a span {
  font-size: 20px;
  color: var(--amber);
}
.film:fullscreen {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--night);
}
.film:fullscreen .film-screen {
  height: calc(100% - 160px);
  width: auto;
  max-width: 100%;
  flex-shrink: 1;
  min-height: 0;
}
.film:fullscreen .film-controls,
.film:fullscreen .player-status {
  width: min(100%, 480px);
}
@media (min-width: 1700px) {
  .stage-note--left {
    left: 8%;
  }
  .stage-note--right {
    right: 8%;
  }
}
@media (max-width: 900px) {
  .stage-note {
    font-size: 9px;
  }
  .stage-note--left {
    max-width: 160px;
  }
  .stage-note--right {
    max-width: 130px;
  }
  .story-afterword {
    gap: 24px;
  }
  .handwritten {
    margin-right: 0;
    font-size: 19px;
  }
  .follow-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .social {
    padding: 20px 16px;
  }
}
@media (max-width: 680px) {
  :root {
    --gutter: clamp(10px, 3vw, 14px);
  }
  .site-header {
    height: 54px;
  }
  .wordmark {
    font-size: 23px;
    letter-spacing: -1.2px;
  }
  .brand-spark {
    font-size: 34px;
  }
  .header-invite {
    font-size: 12px;
    gap: 10px;
  }
  .stage {
    padding-block: 8px 0;
  }
  .film {
    width: 100%;
  }
  .film-screen {
    /* Reserve room for the header, both control rows and the headline so the
       film stays large AND the headline still sits in the first screen. */
    width: min(100%, calc((100vh - 260px) * 0.5625));
    width: min(100%, calc((100svh - 260px) * 0.5625));
    margin-inline: auto;
  }
  /* Keep the same two-row shape as desktop: sound controls on one row, the seek
     bar with its time readout on the next. Putting the seek bar in the same row
     as the mute button made it read as a volume slider. */
  .film-controls {
    row-gap: 2px;
    padding-top: 6px;
  }
  .control-row {
    justify-content: space-between;
    gap: 8px;
  }
  .timeline {
    gap: 8px;
  }
  /* Phones drop the volume slider: the film has to stay large, and device
     volume keys plus the mute toggle cover volume there. */
  .volume {
    display: none;
  }
  .sound-toggle span,
  .film-caption,
  .hero-foot {
    display: none;
  }
  .stage-note {
    display: none;
  }
  /* .hero-foot is hidden at this width; its own text rules are unused here.
     Hiding it also removes the in-page "Keep going" link; the headline sits in
     the first screen and the skip link remains. */
  .story {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 42px;
  }
  #headline {
    order: -1;
    font-size: clamp(23px, 6.5vw, 28px);
    line-height: 1.05;
  }
  .eyebrow {
    font-size: 10px;
    margin-top: 24px;
    margin-bottom: 0;
    max-width: 100%;
  }
  .story-afterword {
    margin-top: 26px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .story-afterword p {
    max-width: 340px;
    font-size: 17px;
  }
  .handwritten {
    align-self: flex-end;
    margin-right: 12px;
    font-size: 18px;
  }
  .film-description {
    margin-top: 22px;
  }
  .social-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .social {
    min-height: 76px;
    padding: 18px 20px;
  }
  .follow-heading {
    padding-top: 32px;
  }
  .site-footer {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 0;
    padding-block: 18px;
    min-height: 100px;
  }
  .site-footer > span:nth-child(2) {
    margin-left: auto;
    font-size: 17px;
  }
  .site-footer a {
    width: 100%;
    min-height: 54px;
  }
  .follow {
    padding-bottom: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .header-invite:hover .link-arrow,
  .social:hover .social-arrow {
    transform: none;
  }
}