/* LIFE index links and long-form daily-life stories. */
.day-timeline article {
  padding: 0 !important;
  overflow: hidden;
}

.life-moment-link {
  position: relative;
  display: block;
  min-height: 390px;
  padding: 34px 28px 72px;
  color: #fff;
  text-decoration: none;
  transition: background-color .22s ease, transform .22s ease;
}

.day-timeline article:first-child .life-moment-link { padding-inline-start: 0; }
.life-moment-link:hover,
.life-moment-link:focus-visible { background: #13283a; }
.life-moment-link > b {
  position: absolute;
  inset: auto 26px 26px auto;
  color: var(--acid);
  font: 700 24px/1 "DM Mono", monospace;
  transition: transform .22s ease;
}
.life-moment-link:hover > b,
.life-moment-link:focus-visible > b { transform: translate(4px, -4px); }

.life-story {
  --story-accent: #d8ff6a;
  position: relative;
  background: #03070c;
  color: #fff;
}
.life-story[data-life-story="work"] { --story-accent: #8eefff; }
.life-story[data-life-story="food"] { --story-accent: #ffbd78; }
.life-story[data-life-story="night"] { --story-accent: #a8bfff; }

.life-story-hero {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 820px) minmax(220px, 1fr);
  gap: clamp(34px, 5vw, 86px);
  min-height: 650px;
  padding: 105px 7vw 110px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 255, 106, .42);
  background:
    radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--story-accent) 15%, transparent), transparent 27%),
    linear-gradient(135deg, #08131f, #03070c 62%);
}
.life-story-time { align-self: start; display: grid; gap: 18px; }
.life-story-time > span,
.life-story-time > small,
.life-story-hero > div:nth-child(2) > p:first-child {
  color: var(--story-accent);
  font: 700 14px/1.6 "DM Mono", monospace;
  letter-spacing: .1em;
}
.life-story-time time {
  color: #fff;
  font: 600 clamp(42px, 5vw, 76px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.08em;
  writing-mode: vertical-rl;
}
.life-story-hero h1 {
  max-width: 880px;
  margin: 28px 0 32px;
  color: #fff;
  font: 600 clamp(48px, 6vw, 92px)/1.04 "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: -.065em;
}
.life-story-hero h1 em { color: var(--story-accent); font-style: normal; }
.life-story-lead {
  max-width: 700px;
  margin: 0;
  color: #e3edf2;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 2;
}
.life-story-orbit {
  position: relative;
  width: min(28vw, 360px);
  aspect-ratio: 1;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--story-accent) 72%, transparent);
  border-radius: 50%;
  transform: perspective(700px) rotateX(62deg) rotateZ(-18deg);
}
.life-story-orbit::before,
.life-story-orbit::after,
.life-story-orbit i { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--story-accent) 45%, transparent); border-radius: 50%; }
.life-story-orbit::before { inset: 14%; }
.life-story-orbit::after { inset: 31%; background: var(--story-accent); box-shadow: 0 0 38px var(--story-accent); }
.life-story-orbit i:first-child { inset: -10% 43%; border-radius: 999px; }
.life-story-orbit i:nth-child(2) { inset: 43% -10%; border-radius: 999px; }
.life-story-orbit b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  color: #03070c;
  font: 700 15px/1 "DM Mono", monospace;
  transform: translate(-50%, -50%) rotateZ(18deg) rotateX(-62deg);
}

.life-story blockquote {
  max-width: 980px;
  margin: 0 auto;
  padding: 120px 7vw;
  color: #fff;
  font: 600 clamp(31px, 4.1vw, 61px)/1.45 "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: -.04em;
  text-align: center;
}
.life-story blockquote::before { content: "“"; display: block; margin-bottom: 10px; color: var(--story-accent); font-size: 80px; line-height: .5; }

.life-story-body { max-width: 1180px; margin: 0 auto; padding: 0 7vw 110px; }
.life-story-chapter {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(30px, 6vw, 100px);
  padding: 72px 0;
  border-top: 1px solid rgba(227, 237, 242, .32);
}
.life-story-chapter > span { color: var(--story-accent); font: 700 18px/1 "DM Mono", monospace; letter-spacing: .14em; }
.life-story-chapter h2 {
  max-width: 720px;
  margin: 0 0 34px;
  color: #fff;
  font: 600 clamp(31px, 3.3vw, 50px)/1.25 "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: -.045em;
}
.life-story-chapter p {
  max-width: 760px;
  margin: 0 0 22px;
  color: #e3edf2;
  font-size: 17px;
  font-weight: 600;
  line-height: 2.05;
}

.life-story-facts { padding: 85px 7vw 110px; background: #0a1723; }
.life-story-facts > h2 { max-width: 1180px; margin: 0 auto 34px; color: var(--story-accent); font: 700 14px/1.5 "DM Mono", monospace; letter-spacing: .12em; }
.life-story-facts dl { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1180px; margin: 0 auto; border: 1px solid rgba(227, 237, 242, .34); }
.life-story-facts dl > div { min-height: 145px; padding: 27px; border-inline-end: 1px solid rgba(227, 237, 242, .34); }
.life-story-facts dl > div:last-child { border: 0; }
.life-story-facts dt { color: #e3edf2; font: 700 14px/1.5 "DM Mono", monospace; letter-spacing: .08em; }
.life-story-facts dd { margin: 26px 0 0; color: #fff; font: 700 clamp(18px, 1.7vw, 25px)/1.4 "Space Grotesk", "Zen Kaku Gothic New", sans-serif; }

.life-story-pagination { display: grid; grid-template-columns: 1fr 1fr; background: #03070c; border-top: 1px solid rgba(227, 237, 242, .34); }
.life-story-pagination a { min-height: 160px; padding: 40px 7vw; color: #fff; font: 600 clamp(21px, 2.2vw, 32px)/1.3 "Space Grotesk", "Zen Kaku Gothic New", sans-serif; text-decoration: none; }
.life-story-pagination a + a { border-inline-start: 1px solid rgba(227, 237, 242, .34); text-align: end; }
.life-story-pagination a:hover,
.life-story-pagination a:focus-visible { background: #13283a; }
.life-story-pagination span { display: block; margin-bottom: 18px; color: #d8ff6a; font: 700 14px/1 "DM Mono", monospace; letter-spacing: .08em; }

@media (max-width: 900px) {
  .life-story-hero { grid-template-columns: 90px 1fr; min-height: auto; }
  .life-story-orbit { grid-column: 2; width: min(55vw, 300px); justify-self: start; }
  .life-story-time time { writing-mode: horizontal-tb; }
}

@media (max-width: 650px) {
  .life-moment-link { min-height: 300px; }
  .day-timeline article:first-child .life-moment-link { padding-inline-start: 28px; }
  .life-story-hero { display: block; padding-top: 75px; }
  .life-story-time { grid-template-columns: auto auto; align-items: center; margin-bottom: 50px; }
  .life-story-time > small { grid-column: 1 / -1; }
  .life-story-orbit { width: 68vw; margin-top: 60px; }
  .life-story-chapter { grid-template-columns: 1fr; }
  .life-story-facts dl, .life-story-pagination { grid-template-columns: 1fr; }
  .life-story-facts dl > div { border-inline-end: 0; border-bottom: 1px solid rgba(227, 237, 242, .34); }
  .life-story-pagination a + a { border-inline-start: 0; border-top: 1px solid rgba(227, 237, 242, .34); }
}