/* Route bundle: personal-base:start */
/* --------------------------------------------------------------------------
   Personal timeline: a scroll-led archive with an accessible story viewer.
   -------------------------------------------------------------------------- */

.personal-timeline-page > .personal-timeline {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 4rem) 3rem !important;
  border-top: 0 !important;
  background: #fff;
}

.personal-timeline__intro {
  max-width: 48rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.personal-timeline__eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--color-brand-700);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.personal-timeline__intro h1 {
  margin: 0;
  color: var(--color-ink-900);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
}

.personal-timeline__intro p {
  margin: 0.75rem 0 0;
  color: var(--color-ink-500);
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
}

.personal-timeline__years {
  position: relative;
  max-width: 66rem;
  margin: 0 auto;
  padding: 5rem 0 4.5rem;
}

.personal-timeline__line {
  position: absolute;
  top: 2.4rem;
  bottom: 2.4rem;
  left: 50%;
  width: 2px;
  background: #dce5e5;
  overflow: hidden;
  transform: translateX(-50%);
}

.personal-timeline__line span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #31aaa4 0%, #11807d 72%, #0d6663 100%);
  transform: scaleY(var(--timeline-progress, 0));
  transform-origin: center top;
  transition: transform 0.08s linear;
}

.personal-timeline__present,
.personal-timeline__beginning {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  min-width: 4.1rem;
  min-height: 1.85rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.7rem;
  border: 1px solid #bfd6d5;
  border-radius: 999px;
  background: #fff;
  color: var(--color-brand-700);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.personal-timeline__present { top: 0.7rem; }
.personal-timeline__beginning { bottom: 0.5rem; }

.personal-timeline-year {
  position: relative;
  margin: 0 0 0.55rem;
  padding: 0 !important;
  border: 0 !important;
}

.personal-timeline-year:last-of-type {
  margin-bottom: 0.35rem;
}

.personal-timeline-year > h2 {
  position: relative;
  z-index: 3;
  width: 4.8rem;
  margin: 0 auto 0.45rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid #cfdcdd;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink-900);
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
}

.personal-timeline-year__events {
  display: grid;
  gap: 0;
}

.personal-timeline-event {
  --timeline-accent: #11807d;
  position: relative;
  display: grid;
  min-height: 6.5rem;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  align-items: center;
}

.personal-timeline-event + .personal-timeline-event {
  margin-top: -4.75rem;
}

/* Phone focus swaps are laid out atomically, then these compositor-only FLIP
   transforms recreate the old geometry and ease each visible event into its
   new position and height. The document itself stays still for Safari. */
.personal-timeline-event.is-focus-flipping {
  transform: translate3d(0, var(--focus-flip-y, 0px), 0);
  transition: none;
  will-change: transform;
}

.personal-timeline-event.is-focus-flipping.is-focus-flipping-active {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.personal-timeline-event.is-focus-revealing .personal-event-card {
  clip-path: inset(0 0 var(--focus-reveal-bottom, 0px) 0 round var(--radius-card));
  transition: none !important;
}

.personal-timeline-event.is-focus-revealing.is-focus-flipping-active .personal-event-card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease, grid-template-columns 0.18s ease, clip-path 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.personal-timeline-event::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 0.85rem;
  height: 0.85rem;
  border: 3px solid var(--timeline-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.35rem #fff;
  content: "";
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, transform 0.25s ease;
}

.personal-timeline-event::after {
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: color-mix(in srgb, var(--timeline-accent) 52%, #dce5e5);
  content: "";
}

.personal-timeline-event--left::after { left: calc(50% - 1.25rem); }
.personal-timeline-event--right::after { left: 50%; }

.personal-timeline-event.is-past::before {
  background: var(--timeline-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.personal-event-card {
  position: relative;
  z-index: 1;
  display: grid !important;
  width: min(100%, 29.5rem) !important;
  height: auto !important;
  min-height: 0 !important;
  /* How much of a photo survives is decided by how close the frame's shape is
     to the photo's own, because object-fit crops away whatever does not match.
     Six of the nine photos are 3:2, so the frame aims at that shape rather than
     the near-square it used to be, which was costing those six a third of their
     width. --image-col lets the two upright photos opt out. */
  --image-col: 12.5rem;
  grid-template-columns: var(--image-col) minmax(0, 1fr);
  align-items: stretch !important;
  padding: 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  background: #fff !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--color-ink-600) !important;
  font-family: var(--font-display) !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.28s ease, transform 0.28s ease, grid-template-columns 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.personal-timeline-event--left .personal-event-card {
  grid-column: 1;
  justify-self: end;
}

.personal-timeline-event--right .personal-event-card {
  grid-column: 3;
  justify-self: start;
}

.personal-event-card:hover,
.personal-event-card:focus-visible {
  z-index: 4;
  border-color: color-mix(in srgb, var(--timeline-accent) 55%, #fff) !important;
  box-shadow: var(--shadow-card-hover) !important;
  color: var(--color-ink-600) !important;
  transform: translateY(-4px);
}

.personal-event-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--timeline-accent) 42%, transparent) !important;
  outline-offset: 3px;
}

.personal-event-card__image {
  display: block;
  /* WebKit derives a frame's inline size from its height through the folded
     card's aspect-ratio instead of stretching it to the grid column, so a
     condensed phone card leaves a white band to its right (and collapses to
     zero width before its lazy image loads). Chromium stretches to the grid
     area, which equals this, so width: 100% is a no-op there and the fix on
     WebKit. */
  width: 100%;
  min-height: 100%;
  background: #edf2f2;
  overflow: hidden;
  /* No min-height transition here: the frame drives card height, and below the
     737px single-rail breakpoint the focus handoff must change height in one
     atomic pass (Safari lurches otherwise). The desktop smoothing transition is
     scoped to min-width: 737px alongside the focus/condensed min-height rules. */
}

/* Desktop tiles are portrait and mobile tiles are 16/9, so a single crop cannot
   serve both: landscape sources lose their sides on desktop and their top and
   bottom on mobile. Each image carries its own --focus-x/--focus-y instead. */
.personal-event-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 9.75rem;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  transition: transform 0.35s ease, min-height 0.32s ease;
}

.personal-event-card__image--slideshow {
  position: relative;
}

.personal-event-card__image--slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: none !important;
}

.personal-event-card__image--slideshow img:first-child {
  position: relative;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .personal-event-card:hover .personal-event-card__image--slideshow img,
  .personal-event-card:focus-visible .personal-event-card__image--slideshow img {
    animation-name: personal-card-slideshow;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .personal-event-card:hover .personal-event-card__image--slideshow img:first-child,
  .personal-event-card:focus-visible .personal-event-card__image--slideshow img:first-child {
    animation-name: personal-card-slideshow-first;
  }

  .personal-event-card__image--slideshow img:nth-child(2) { animation-delay: 1s; }
  .personal-event-card__image--slideshow img:nth-child(3) { animation-delay: 2s; }
  .personal-event-card__image--slideshow img:nth-child(4) { animation-delay: 3s; }
  .personal-event-card__image--slideshow img:nth-child(5) { animation-delay: 4s; }

  .personal-event-card:hover .personal-event-card__image--slides-2 img,
  .personal-event-card:focus-visible .personal-event-card__image--slides-2 img {
    animation-name: personal-card-slideshow-2;
    animation-duration: 2s;
  }

  .personal-event-card:hover .personal-event-card__image--slides-2 img:first-child,
  .personal-event-card:focus-visible .personal-event-card__image--slides-2 img:first-child {
    animation-name: personal-card-slideshow-first-2;
  }

  .personal-event-card:hover .personal-event-card__image--slides-3 img,
  .personal-event-card:focus-visible .personal-event-card__image--slides-3 img {
    animation-name: personal-card-slideshow-3;
    animation-duration: 3s;
  }

  .personal-event-card:hover .personal-event-card__image--slides-3 img:first-child,
  .personal-event-card:focus-visible .personal-event-card__image--slides-3 img:first-child {
    animation-name: personal-card-slideshow-first-3;
  }
}

/* Touch devices have no hover to trigger a rotation, so the gallery nearest the
   reading focus plays on its own. Start two seconds into the opening slot so
   the first transition arrives quickly, then retain four seconds per image.
   Keep the delays as longhands: the animation shorthand would reset the
   stagger and collapse every image onto the same frame. */
@media (hover: none) {
  .personal-timeline-event.is-gallery-active .personal-event-card__image--slideshow img {
    animation-name: personal-card-slideshow;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .personal-timeline-event.is-gallery-active .personal-event-card__image--slideshow img:first-child {
    animation-name: personal-card-slideshow-first;
    animation-delay: -2s;
  }

  .personal-event-card__image--slideshow img:nth-child(2) { animation-delay: 2s; }
  .personal-event-card__image--slideshow img:nth-child(3) { animation-delay: 6s; }
  .personal-event-card__image--slideshow img:nth-child(4) { animation-delay: 10s; }
  .personal-event-card__image--slideshow img:nth-child(5) { animation-delay: 14s; }

  .personal-timeline-event.is-gallery-active .personal-event-card__image--slides-2 img {
    animation-name: personal-card-slideshow-2;
    animation-duration: 8s;
  }

  .personal-timeline-event.is-gallery-active .personal-event-card__image--slides-2 img:first-child {
    animation-name: personal-card-slideshow-first-2;
  }

  .personal-timeline-event.is-gallery-active .personal-event-card__image--slides-3 img {
    animation-name: personal-card-slideshow-3;
    animation-duration: 12s;
  }

  .personal-timeline-event.is-gallery-active .personal-event-card__image--slides-3 img:first-child {
    animation-name: personal-card-slideshow-first-3;
  }
}

@keyframes personal-card-slideshow {
  0% {
    opacity: 0;
  }

  5%, 20% {
    opacity: 1;
  }

  25%, 100% {
    opacity: 0;
  }
}

/* The first frame starts visible, then joins the same one-second mobile
   crossfade as the delayed frames. Its closing fade bridges the loop boundary
   so autoplay never flashes or snaps back to the opening photo. */
@keyframes personal-card-slideshow-first {
  0%, 20% {
    opacity: 1;
  }

  25%, 95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes personal-card-slideshow-2 {
  0% {
    opacity: 0;
  }

  12.5%, 50% {
    opacity: 1;
  }

  62.5%, 100% {
    opacity: 0;
  }
}

@keyframes personal-card-slideshow-first-2 {
  0%, 50% {
    opacity: 1;
  }

  62.5%, 87.5% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes personal-card-slideshow-3 {
  0% {
    opacity: 0;
  }

  8.333%, 33.333% {
    opacity: 1;
  }

  41.666%, 100% {
    opacity: 0;
  }
}

@keyframes personal-card-slideshow-first-3 {
  0%, 33.333% {
    opacity: 1;
  }

  41.666%, 91.666% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.personal-event-card:hover .personal-event-card__image img,
.personal-event-card:focus-visible .personal-event-card__image img {
  transform: scale(1.035);
}

.personal-event-card--gallery-only {
  cursor: default;
}

.personal-event-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.85rem;
  transition: padding-block 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.personal-timeline.is-enhanced .personal-event-card__body > span:not(.personal-event-card__meta) {
  max-height: var(--detail-height, none);
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), padding-top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

.personal-event-card__meta {
  display: block;
  color: var(--timeline-accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.4;
  text-transform: uppercase;
}

.personal-event-card__body > strong {
  display: block;
  margin: 0.45rem 0 0.5rem;
  color: var(--color-ink-900);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  transition: margin 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.personal-event-card__body > span:not(.personal-event-card__meta):not(.personal-event-card__open) {
  color: #66767c;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500 !important;
}

.personal-event-card__open {
  display: block;
  margin-top: 0;
  padding-top: 0.8rem;
  color: var(--timeline-accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.personal-event-card__instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.personal-event-card__instagram .icon {
  font-size: 1rem;
}

/* Entrance offset, hover lift, and reading-focus scale share one transform so
   a card can be lifted and scaled at once instead of the last rule winning.
   Custom properties do not interpolate, but the composed transform does, so
   every state change still animates. */
.personal-timeline.is-enhanced .personal-timeline-event .personal-event-card {
  transform: translate(var(--card-enter-x, 0px), calc(var(--card-enter-y, 0px) + var(--card-lift, 0px))) scale(var(--card-scale-x, var(--card-scale, 1)), var(--card-scale-y, var(--card-scale, 1)));
}

.personal-timeline.is-enhanced .personal-timeline-event--left .personal-event-card {
  --card-enter-x: -1.5rem;
  opacity: 0;
}

.personal-timeline.is-enhanced .personal-timeline-event--right .personal-event-card {
  --card-enter-x: 1.5rem;
  opacity: 0;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card {
  --card-enter-x: 0px;
  opacity: 1;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card:hover,
.personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card:focus-visible {
  --card-lift: -4px;
}

.personal-timeline.is-measuring .personal-timeline-event,
.personal-timeline.is-measuring .personal-event-card,
.personal-timeline.is-measuring .personal-event-card *,
/* Fast desktop scrolling piles half-finished fold transitions across many
   cards. is-resnapping suppresses those transitions so the folds snap in one
   pass; personal-timeline.js keeps the focused card fixed while it does and
   drops the class as scroll velocity decays so the settle frame animates. */
.personal-timeline.is-resnapping .personal-event-card,
.personal-timeline.is-resnapping .personal-event-card * {
  transition: none !important;
}

/* The card nearest the reading focus leads. Scale keeps that emphasis out of
   the layout, so growing a card can never nudge the page under the reader. */
.personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card {
  --card-scale-x: 1.01;
  --card-scale-y: 1.01;
  z-index: 3;
  border-color: color-mix(in srgb, var(--timeline-accent) 45%, #fff) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Out-of-focus cards recede firmly — the mild 0.74 fade read as a rendering
   accident rather than a reading cue. Opacity only: it stays compositor-safe
   and the card revives under deliberate pointer or keyboard attention. */
.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card {
  --card-scale: 0.995;
  opacity: 0.55;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card:hover,
.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card:focus-visible {
  opacity: 1;
}

@media screen and (min-width: 521px) {
  /* The photo sets a floor on the card's height but never a ceiling, so it
     always fills the column. Capping it instead stops the frame short of the
     row whenever the text runs taller, leaving a band of bare card beneath the
     picture. */
  .personal-timeline.is-enhanced .personal-event-card__image {
    position: relative;
    min-height: 8.5rem;
    max-height: none;
  }

  /* Every frame is taken out of flow so the photo fills whatever height the
     card settles on rather than setting that height from its own aspect ratio,
     which would leave an upright source standing a third taller than its
     neighbours. */
  .personal-timeline.is-enhanced .personal-event-card__image img {
    position: absolute;
    inset: 0;
    min-height: 0;
    max-height: none;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__image {
    min-height: 5.75rem;
  }
}

/* The focused card's reveal is mostly horizontal. Growing it by height alone
   sets a card height the three or four lines of text cannot fill, and the
   leftover becomes an empty band beside the words — the taller the reveal, the
   wider that band reads. Taking most of the growth in width instead enlarges
   the picture by more than height alone did, while still leaving the card
   taller than its neighbours. */
@media screen and (min-width: 737px) {
  /* Desktop-only: the frame's min-height sets card height, so easing it on the
     shared resize curve makes the height grow in step with the width instead of
     snapping while the column glides. Scoped above the single-rail breakpoint so
     the atomic phone/tablet-narrow handoff keeps its instant height change. */
  .personal-timeline.is-enhanced .personal-event-card__image {
    transition: min-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* The focused card grows in height, which squares its frame up again and
     crops the 3:2 photos harder than any other state — so its width has to grow
     further still to keep pace. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card {
    --image-col: 17rem;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card__image {
    min-height: 12rem;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card--upright {
    --image-col: 12.5rem;
  }
}

/* Latte & Mocha is upright and Code in the Community is square, so the wide
   frame that suits the other seven crops these two hardest. A narrower column
   at the same card height reads as a squarer frame, which is what they want. */
.personal-timeline.is-enhanced .personal-event-card--upright {
  --image-col: 9.5rem;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__body {
  padding-block: 0.6rem;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__body > strong {
  margin-bottom: 0;
}

.personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__body > span:not(.personal-event-card__meta) {
  max-height: 0;
  padding-top: 0;
  opacity: 0;
}

.personal-event-card--static {
  cursor: default;
}

.personal-event-card--static .personal-event-card__body {
  min-height: 100%;
  justify-content: center;
}

.personal-event-card--static .personal-event-card__image img {
  min-height: 9.25rem;
}

.personal-event-card--cats {
  border-color: #edc4d2 !important;
}

.personal-event-card__image--cats {
  min-height: 9.75rem;
  background: #d8dde0;
}


.personal-event-card--static:hover,
.personal-event-card--static:focus-visible {
  z-index: 1;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  transform: none;
}

/* Cancel the hover lift through the shared variable rather than clearing the
   whole transform, which would also drop the reading-focus scale the moment
   the pointer crossed a card that is not a link. */
.personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card--static:hover,
.personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card--static:focus-visible {
  --card-lift: 0px;
  z-index: 1;
}

/* A focused card keeps its accent under the pointer; only unfocused ones fall
   back to the resting border and shadow. */
.personal-timeline.is-enhanced .personal-timeline-event.is-visible:not(.is-focus) .personal-event-card--static:hover,
.personal-timeline.is-enhanced .personal-timeline-event.is-visible:not(.is-focus) .personal-event-card--static:focus-visible {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
}

.personal-event-card--static:hover .personal-event-card__image img,
.personal-event-card--static:focus-visible .personal-event-card__image img {
  transform: none;
}

/* Route bundle: personal-base:end */

/* Route bundle: personal-responsive:start */
@media screen and (max-width: 980px) {
  .personal-timeline-page > .personal-timeline {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }

  .personal-event-card {
    grid-template-columns: 6.8rem minmax(0, 1fr);
  }

  .personal-event-card__image img {
    min-height: 11rem;
  }

}

@media screen and (max-width: 736px) {
  body.page-personal #return-to-top {
    display: none !important;
  }

  .personal-timeline-page > .personal-timeline {
    padding: 2rem 1rem 2.5rem !important;
  }

  .personal-timeline__intro {
    margin-bottom: 1.5rem;
    text-align: left;
  }

  .personal-timeline__intro p {
    text-align: left;
  }

  .personal-timeline__guide {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .personal-timeline__years {
    padding: 2.75rem 0 3rem;
  }

  .personal-timeline__line {
    left: 1.25rem;
  }

  .personal-timeline__present,
  .personal-timeline__beginning {
    left: 1.25rem;
  }

  .personal-timeline-year {
    margin-bottom: 1.6rem;
  }

  .personal-timeline-year > h2 {
    margin-bottom: 1rem;
    margin-right: 0;
    margin-left: 3rem;
  }

  .personal-timeline-year__events {
    gap: 0.65rem;
  }

  .personal-timeline-event {
    display: block;
    min-height: 0;
    margin-top: 0 !important;
    padding-left: 3rem;
  }


  .personal-timeline-event::before {
    left: 1.25rem;
  }

  .personal-timeline-event::after,
  .personal-timeline-event--left::after,
  .personal-timeline-event--right::after {
    left: 1.25rem;
    width: 1.75rem;
  }

  .personal-event-card,
  .personal-timeline-event--left .personal-event-card,
  .personal-timeline-event--right .personal-event-card {
    width: 100% !important;
    font-size: 1.05rem !important;
  }

  .personal-event-card__meta,
  .personal-event-card__open {
    font-size: 0.9rem;
  }

  .personal-timeline.is-enhanced .personal-timeline-event--left .personal-event-card,
  .personal-timeline.is-enhanced .personal-timeline-event--right .personal-event-card {
    --card-enter-x: 0px;
    --card-enter-y: 1rem;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card {
    --card-enter-y: 0px;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card:hover,
  .personal-timeline.is-enhanced .personal-timeline-event.is-visible .personal-event-card:focus-visible {
    --card-lift: -3px;
  }

  /* One card fills most of a phone screen, so the emphasis has to be gentler
     than on desktop or the focused card reads as a different component. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card {
    --card-scale-x: 1.01;
    --card-scale-y: 1.01;
  }

  /* Safari keeps momentum scrolling on a separate path from layout. Animating
     the outgoing description closed while the incoming one opens makes their
     heights diverge for several frames, so the page moves underneath the
     finger on every reverse-scroll handoff. Apply both halves in one layout
     pass on phones; the card's compositor-only opacity and scale still ease. */
  .personal-event-card__body,
  .personal-timeline.is-enhanced .personal-event-card__body > span:not(.personal-event-card__meta),
  .personal-event-card__body > strong {
    transition: none;
  }

}

@media screen and (max-width: 520px) {
  .personal-event-card {
    grid-template-columns: 1fr;
  }

  .personal-event-card__image {
    aspect-ratio: 16 / 9;
    /* This ratio is the other intrinsic-height half of the phone handoff. It
       must switch in the same layout pass as the description above. */
    transition: none;
  }

  .personal-event-card__image img {
    min-height: 0;
  }

  .personal-event-card--static .personal-event-card__image img {
    min-height: 0;
  }

  /* object-fit: cover crops rather than scales, so at a fixed card width the
     box ratio alone decides how much of a photo survives — and any ratio the
     sources do not share reads as zooming in. Five of the nine photos are 3:2,
     so the open card matches them exactly and crops nothing; it also stays
     taller than the 16/9 base, keeping the focused card's extra presence. A
     taller 4/3 box instead cut the sides off the wide photos, taking the
     near-2:1 Brawl Stars artwork from 90% of its width down to 68%. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card__image {
    aspect-ratio: 3 / 2;
  }

  /* The upright and square photos lose half their picture to a 3:2 frame that
     fits the landscape cards exactly, so they keep the taller box here too. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card--upright .personal-event-card__image {
    aspect-ratio: 4 / 3;
  }

  /* Brawl Stars is artwork rather than a photograph, so the composition reads
     as a whole and cropping it is more obvious than cropping a scene. At
     nearly 2:1 it is the widest source on the page: a 3:2 frame takes a
     quarter of its width off, while its own near-16/9 frame keeps the artwork
     almost complete, which is how this tile is meant to read. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-focus .personal-event-card__image--brawl {
    aspect-ratio: 16 / 9;
  }

  /* Folded, the photo has to give height back, and every step shorter shows
     less of it: 32/9 halved what each card displayed. At 2:1 the 3:2 photos
     keep three quarters of their height and Brawl Stars is almost whole, while
     the card still loses most of its height once the description folds too. */
  .personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__image {
    aspect-ratio: 2 / 1;
  }

  .personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__image,
  .personal-timeline.is-enhanced .personal-timeline-event.is-condensed .personal-event-card__image img {
    min-height: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .personal-timeline__line span,
  .personal-timeline-event::before,
  .personal-event-card,
  .personal-event-card__image,
  .personal-event-card__image img {
    transition: none !important;
    animation: none !important;
  }

  .personal-timeline.is-enhanced .personal-timeline-event .personal-event-card {
    opacity: 1;
    transform: none;
  }

  .personal-timeline.is-enhanced .personal-event-card__body > span:not(.personal-event-card__meta) {
    max-height: none;
    opacity: 1;
  }

}

/* Route bundle: personal-responsive:end */