:root {
  color-scheme: dark;
  --black: #000000;
  --white: #FFFFFF;
  --blue: #0D1D4B;
  --deep-blue: #08122F;
  --line: rgba(255, 255, 255, .28);
  --page-width: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
.hero {
  min-height: 660px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, var(--deep-blue) 72%, var(--black) 100%);
}
.hero-inner, .section-wrap, .chapter-inner, .footer-inner {
  width: min(var(--page-width), calc(100% - 48px));
  margin-inline: auto;
}
.hero-inner { padding-block: 100px 120px; }
.eyebrow {
  margin: 0 0 22px;
  color: var(--white);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.5;
}
.hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.5rem, 9vw, 7.7rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .94;
}
.hero-role {
  margin: 31px 0 0;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .015em;
}
.hero-role span { padding-inline: .35em; }
.hero-rule { width: 78px; height: 1px; margin-top: 34px; background: var(--white); }
.hero-note { max-width: 530px; margin: 22px 0 0; font-size: 1.05rem; }
.hero-index {
  position: absolute;
  right: max(24px, calc((100vw - var(--page-width)) / 2));
  bottom: 34px;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .15em;
}
.intro { padding-block: 130px 120px; }
.intro h2 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.intro > p:last-child { max-width: 610px; margin-top: 28px; font-size: 1.1rem; }
.timeline { position: relative; }
.timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(24px, calc((100vw - var(--page-width)) / 2 + 187px));
  width: 1px;
  background: var(--line);
  content: "";
}
.chapter { position: relative; padding-block: 110px; background: var(--black); }
.chapter-blue { background: linear-gradient(135deg, var(--blue), var(--deep-blue)); }
.chapter-inner {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 76px;
}
.chapter-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 3px;
  font-size: 1.45rem;
  font-weight: 900;
}
.chapter-date::after {
  position: absolute;
  left: calc(max(24px, (100vw - var(--page-width)) / 2 + 187px) - 5px);
  width: 11px;
  height: 11px;
  margin-top: 13px;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--black);
  content: "";
}
.chapter-blue .chapter-date::after,
.chapter-future .chapter-date::after { background: var(--blue); }
.date-detail { margin-top: 7px; font-size: .62rem; letter-spacing: .13em; }
.chapter-content { max-width: 760px; }
.chapter-content .eyebrow { margin-bottom: 15px; }
.chapter-content h2 {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.05;
}
.chapter-content h3 { margin: 15px 0 0; font-size: 1.08rem; font-weight: 700; }
.chapter-content > p:not(.eyebrow) { max-width: 650px; margin: 24px 0 0; font-size: 1.04rem; }
.visual { margin: 44px 0 0; }
.visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.visual figcaption { margin-top: 12px; font-size: .8rem; }
.concept-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; }
.concept-list span { padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.work-note { display: grid; grid-template-columns: 150px 1fr; gap: 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.work-name { font-weight: 900; }
.work-note p { margin: 0; }
.countdown { margin-top: 50px; padding: 30px; border: 1px solid var(--line); }
.countdown .eyebrow { margin-bottom: 7px; }
.countdown-date { margin: 0 0 25px; font-size: .9rem; font-weight: 900; letter-spacing: .14em; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.countdown-grid div { display: flex; flex-direction: column; }
.countdown-grid span { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.1; }
.countdown-grid small { margin-top: 8px; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.footer { background: var(--black); padding-block: 70px 35px; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: end; }
.footer .eyebrow { margin-bottom: 7px; }
.footer-caption, .copyright { margin: 0; font-size: .85rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.copyright { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .hero { min-height: 590px; }
  .hero-inner, .section-wrap, .chapter-inner, .footer-inner { width: min(calc(100% - 40px), var(--page-width)); }
  .hero-inner { padding-block: 90px 105px; }
  .intro { padding-block: 90px 80px; }
  .timeline::before { left: 20px; }
  .chapter { padding-block: 78px; }
  .chapter-inner { grid-template-columns: 1fr; gap: 25px; padding-left: 48px; }
  .chapter-date { font-size: 1.15rem; }
  .chapter-date::after { left: 15px; margin-top: 9px; }
  .date-detail { display: inline; margin-top: 2px; }
  .work-note { grid-template-columns: 1fr; gap: 5px; }
  .countdown { padding: 22px 16px; }
  .countdown-grid { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .copyright { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}