:root {
  --dawn: #f6efdd;
  --dawn-bright: #fffdf4;
  --gold: #b9891e;
  --gold-deep: #8a6d2f;
  --ink: #2a241a;
  --night: #0e0d12;
  --night-soft: #171820;
  --court-blue: #7f93a3;
  --ash: #a8adb5;
  --descent: 0;
  --display: "Noto Serif TC", "I.MingCP", "Yu Mincho", serif;
  --body: "Noto Sans TC", "PingFang TC", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: .13;
  background-image:
    repeating-radial-gradient(circle at 18% 22%, transparent 0 2px, rgba(25, 21, 16, .12) 3px 4px),
    repeating-linear-gradient(117deg, transparent 0 7px, rgba(255, 255, 255, .025) 8px 9px);
  mix-blend-mode: multiply;
}

img {
  display: block;
  width: 100%;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
}

::selection {
  color: var(--dawn-bright);
  background: var(--gold-deep);
}

.descent-meter {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: clamp(10px, 2vw, 30px);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 24px;
  color: var(--gold-deep);
  transform: translateY(-50%);
  transition: color .6s ease-out;
}

.descent-meter__label {
  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}

.descent-meter__track {
  position: relative;
  width: 2px;
  height: 19vh;
  overflow: hidden;
  background: currentColor;
  opacity: .48;
}

.descent-meter__fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(var(--descent));
  transform-origin: top;
}

.story-section {
  position: relative;
  padding: clamp(110px, 14vw, 220px) max(7vw, 28px);
}

.section-index {
  margin-bottom: 22px;
  color: var(--gold-deep);
  font-family: Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform 1.05s cubic-bezier(.22, 1, .36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.opening {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: 8vw max(8vw, 32px) 10vw;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 67% 17%, rgba(255, 255, 255, .98) 0 4%, rgba(250, 222, 130, .75) 10%, transparent 33%),
    linear-gradient(118deg, #eadfc4 0%, var(--dawn-bright) 37%, var(--dawn) 70%, #cfa952 100%);
}

.opening::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: .42;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(94, 72, 28, .16) 14.1% 14.3%, transparent 14.4% 84%, rgba(94, 72, 28, .13) 84.1% 84.3%, transparent 84.4%),
    linear-gradient(112deg, transparent 0 47%, rgba(255, 255, 255, .55) 47.2% 49.5%, transparent 49.7%);
}

.opening__architecture {
  position: absolute;
  z-index: -1;
  right: 5vw;
  bottom: -2px;
  left: 35%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 72%;
  opacity: .2;
}

.opening__architecture span {
  display: block;
  width: clamp(40px, 7vw, 110px);
  height: var(--height, 60%);
  border: 2px solid #775d24;
  border-bottom: 0;
  clip-path: polygon(50% 0, 58% 9%, 58% 27%, 100% 27%, 100% 100%, 0 100%, 0 27%, 42% 27%, 42% 9%);
}

.opening__architecture span:nth-child(2) { --height: 78%; }
.opening__architecture span:nth-child(3) { --height: 96%; }
.opening__architecture span:nth-child(4) { --height: 70%; }
.opening__architecture span:nth-child(5) { --height: 53%; }

.opening__sun {
  position: absolute;
  z-index: -1;
  top: 11%;
  right: 16%;
  width: clamp(170px, 28vw, 470px);
  aspect-ratio: 1;
  border: 2px solid rgba(143, 100, 13, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffef7 0 22%, #f6dc92 55%, #dcae45 100%);
  box-shadow:
    0 0 0 18px rgba(185, 137, 30, .12),
    0 0 0 58px rgba(185, 137, 30, .07),
    0 0 120px rgba(233, 187, 83, .8);
  transform: translate3d(calc(var(--pointer-x, 0) * 12px), calc(var(--pointer-y, 0) * 12px), 0);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.opening__eyebrow {
  margin: 0 0 4vh 1vw;
  color: #79622d;
  font-family: Georgia, serif;
  font-size: clamp(.66rem, .9vw, .82rem);
  letter-spacing: .42em;
  opacity: 0;
  animation: opening-rise 1s .1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.opening h1 {
  max-width: 9.2em;
  color: #4a370f;
  font-size: clamp(3.2rem, 8.7vw, 9.2rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #fff, 0 24px 65px rgba(115, 75, 4, .2);
  opacity: 0;
  animation: opening-rise 1.4s .25s cubic-bezier(.16, 1, .3, 1) forwards;
}

.opening__whisper {
  align-self: end;
  justify-self: end;
  margin-top: 9vh;
  width: min(280px, 65vw);
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  color: #685d44;
  font-size: .9rem;
  letter-spacing: .12em;
  opacity: 0;
  animation: opening-rise 1s .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.opening__scroll {
  position: absolute;
  bottom: 26px;
  left: max(8vw, 32px);
  color: #766746;
  font-size: .7rem;
  letter-spacing: .35em;
  writing-mode: vertical-rl;
}

.opening__scroll::after {
  display: block;
  width: 2px;
  height: 42px;
  margin: 12px auto 0;
  content: "";
  background: #766746;
  transform-origin: top;
  animation: scroll-pulse 2.2s .8s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes opening-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(.25); opacity: .35; }
  55% { transform: scaleY(1); opacity: .9; }
}

.presence {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
  gap: 8vw;
  min-height: 120svh;
  align-items: center;
  background:
    linear-gradient(180deg, var(--dawn) 0%, #e3d5b4 38%, #b0a181 72%, #cbb586 100%);
}

.presence::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 25%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(103, 82, 36, .14));
}

.presence__copy {
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: 12vh;
}

.presence__lead {
  margin-bottom: 36px;
  color: #6b604c;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: .08em;
}

.presence h2 {
  color: #28231d;
  font-size: clamp(2rem, 4.3vw, 4.8rem);
  line-height: 1.5;
}

.sovereign {
  position: relative;
  z-index: 2;
  min-height: 720px;
  align-self: end;
}

.sovereign__halo {
  position: absolute;
  top: 5%;
  left: 50%;
  width: min(31vw, 420px);
  aspect-ratio: 1;
  border: 2px solid rgba(238, 218, 162, .58);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(238, 218, 162, .07), 0 0 90px rgba(238, 218, 162, .2);
  transform: translateX(-50%);
}

.sovereign__portrait {
  position: absolute;
  inset: 13% 2% 0;
  width: 96%;
  height: 87%;
  object-fit: cover;
  border: 2px solid rgba(74, 58, 18, .4);
  box-shadow: -26px 18px 60px rgba(60, 45, 15, .38);
}

.sovereign__caption {
  position: absolute;
  right: 0;
  bottom: 8%;
  width: min(320px, 80%);
  padding: 24px 26px 24px 28px;
  border-left: 2px solid var(--gold);
  color: #ece5d3;
  background: linear-gradient(90deg, rgba(15, 14, 18, .88), rgba(15, 14, 18, .62));
}

.sovereign__caption span {
  display: block;
  color: #c4b58c;
  font-family: Georgia, serif;
  font-size: .68rem;
  letter-spacing: .28em;
}

.sovereign__caption strong {
  display: block;
  margin: 6px 0 14px;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .12em;
}

.sovereign__caption p {
  color: #c9c4b6;
  font-size: .9rem;
}

.world {
  padding-bottom: clamp(140px, 20vw, 300px);
  overflow: hidden;
  color: #55452c;
  background:
    radial-gradient(circle at 16% 8%, rgba(185, 137, 30, .3), transparent 32%),
    radial-gradient(circle at 88% 64%, rgba(220, 174, 69, .18), transparent 30%),
    linear-gradient(180deg, #cbb586 0%, #f0e6cd 20%, var(--dawn) 62%, #e8d8ab 100%);
}

.world__header {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2vw 8vw;
  max-width: 1180px;
  margin: 0 auto clamp(80px, 12vw, 170px);
}

.world__header .section-index {
  grid-column: 1;
}

.world__header h2 {
  grid-column: 1;
  color: #4a3a12;
  font-size: clamp(2.7rem, 5.7vw, 6.2rem);
}

.world__header > p:last-child {
  grid-row: 2;
  grid-column: 2;
  align-self: end;
  max-width: 560px;
  padding-bottom: 12px;
  color: #6a5c40;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.family-ribbon {
  display: flex;
  gap: clamp(24px, 5vw, 80px);
  width: max-content;
  margin: 0 0 80px -3vw;
  color: rgba(122, 94, 32, .36);
  font-family: Georgia, serif;
  font-size: clamp(1rem, 2.1vw, 2.2rem);
  letter-spacing: .15em;
  transform: rotate(-2deg);
}

.nation-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 6vw, 94px) 2.5vw;
  max-width: 1380px;
  margin: auto;
}

.nation {
  position: relative;
  min-width: 0;
  box-shadow: 0 24px 70px rgba(96, 74, 28, .3);
}

.nation::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(74, 58, 18, .16);
}

.nation img {
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
  transition: filter .8s ease-out, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.nation:hover img {
  filter: saturate(1.14) contrast(1.02);
  transform: scale(1.018);
}

.nation figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 80px 28px 24px;
  background: linear-gradient(transparent, rgba(8, 9, 13, .88));
}

.nation figcaption span {
  color: #c8b783;
  font-size: .67rem;
  letter-spacing: .2em;
}

.nation figcaption strong {
  display: block;
  margin: 2px 0 4px;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  letter-spacing: .1em;
}

.nation figcaption p {
  color: #c4c6c9;
  font-size: .86rem;
}

.nation--glasswick { grid-column: 1 / span 8; height: 660px; }
.nation--solaria { grid-column: 9 / span 4; align-self: end; height: 510px; }
.nation--veridian { grid-column: 2 / span 5; height: 570px; }
.nation--caldwell { grid-column: 7 / span 6; margin-top: 90px; height: 610px; }
.nation--tianyu { grid-column: 1 / span 7; height: 590px; }
.nation--festival { grid-column: 8 / span 5; margin-top: 120px; height: 490px; }

.hero-honor {
  margin: clamp(130px, 18vw, 260px) auto 0;
  max-width: 860px;
  color: #6f6146;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 3.4rem);
  letter-spacing: .1em;
  line-height: 1.8;
  text-align: left;
}

.hero-honor strong {
  color: #a1770e;
  font-weight: 600;
}

.measure {
  color: #d6d7db;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), rgba(127, 147, 163, .09) calc(12.5% - 2px) 12.5%),
    radial-gradient(circle at 82% 12%, rgba(127, 147, 163, .3), transparent 36%),
    linear-gradient(180deg, #e8d8ab 0%, #4d4a45 3.5%, var(--night) 10%);
}

.measure__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw 10vw;
  max-width: 1180px;
  margin: 0 auto 100px;
}

.measure__intro .section-index {
  grid-column: 1;
}

.measure__intro h2 {
  grid-column: 1;
  color: #e9e4d9;
  font-size: clamp(3rem, 6vw, 6.4rem);
}

.measure__intro > p:last-child {
  grid-row: 2;
  grid-column: 2;
  align-self: end;
  color: var(--ash);
}

.scale {
  max-width: 1100px;
  margin: auto;
  border-top: 2px solid #3b404a;
}

.scale__row {
  display: grid;
  grid-template-columns: 100px minmax(140px, .8fr) 1.4fr minmax(100px, .55fr);
  gap: 20px;
  align-items: baseline;
  min-height: 95px;
  padding: 26px 12px;
  border-bottom: 2px solid #30343d;
  color: #aeb3bc;
}

.scale__row b {
  color: #d7dbe0;
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  font-weight: 400;
}

.scale__row span {
  color: #e5e2db;
  font-family: var(--display);
  font-size: 1.08rem;
  letter-spacing: .08em;
}

.scale__row p {
  font-size: .88rem;
}

.scale__row em {
  color: #7e8996;
  font-size: .74rem;
  font-style: normal;
  letter-spacing: .12em;
  text-align: right;
}

.scale__row--critical {
  position: relative;
  color: #f4ead0;
  background: linear-gradient(90deg, rgba(138, 109, 47, .52), rgba(127, 147, 163, .18));
}

.scale__row--critical::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 6px;
  content: "";
  background: var(--gold-deep);
}

.paradox {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8vw;
  align-items: end;
  max-width: 1100px;
  margin: clamp(130px, 18vw, 270px) auto 0;
}

.paradox p {
  padding-left: 22px;
  border-left: 2px solid var(--court-blue);
  color: #a9b8c6;
}

.paradox h3 {
  color: #e7dec8;
  font-size: clamp(2.4rem, 4.8vw, 5.2rem);
  text-align: right;
}

.verdict {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 130svh;
  padding: 14vw max(8vw, 32px);
  overflow: hidden;
  color: #d5d5d8;
  background:
    radial-gradient(ellipse at 22% 54%, rgba(185, 137, 30, .17), transparent 28%),
    linear-gradient(137deg, #111017 0 48%, #0a0a0e 48.2% 100%);
}

.verdict::before {
  position: absolute;
  top: -20%;
  right: 18%;
  width: 2px;
  height: 140%;
  content: "";
  background: linear-gradient(transparent, var(--gold-deep), transparent);
  transform: rotate(18deg);
}

.verdict__prelude {
  margin: 0 0 8vh 3vw;
  color: #787f89;
  font-size: .85rem;
  letter-spacing: .17em;
}

.verdict h2 {
  position: relative;
  z-index: 2;
  max-width: 1150px;
  color: #a9acb2;
  font-size: clamp(2.7rem, 6.5vw, 7.2rem);
  font-weight: 400;
  line-height: 1.55;
}

.verdict h2 strong {
  color: #eee9de;
  font-weight: 700;
}

.verdict__stamp {
  position: absolute;
  right: -1vw;
  bottom: 12%;
  color: rgba(127, 147, 163, .09);
  font-family: Georgia, serif;
  font-size: clamp(6rem, 19vw, 22rem);
  letter-spacing: -.04em;
  line-height: 1;
  transform: rotate(-7deg);
}

.house {
  color: #d3d4d8;
  background:
    radial-gradient(circle at 92% 10%, rgba(127, 147, 163, .11), transparent 28%),
    #0c0c11;
}

.house__header {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3vw 9vw;
  max-width: 1180px;
  margin: 0 auto clamp(100px, 14vw, 180px);
}

.house__header h2 {
  grid-column: 1;
  color: #ece8df;
  font-size: clamp(2.8rem, 6vw, 6rem);
}

.house__header > p:last-child {
  grid-row: 2;
  grid-column: 2;
  align-self: end;
  color: #9197a0;
}

.portraits {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12vw 2.5vw;
  max-width: 1240px;
  margin: auto;
}

.portrait {
  position: relative;
  display: grid;
  min-height: 590px;
  overflow: hidden;
  border: 2px solid #3a4150;
  background: #14151b;
  isolation: isolate;
}

.portrait::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at var(--light-x, 58%) 18%, var(--portrait-glow, rgba(185, 137, 30, .16)), transparent 26%),
    linear-gradient(148deg, rgba(255, 255, 255, .025), transparent 55%);
}

.portrait--lyra { grid-column: 1 / span 5; --portrait-glow: rgba(183, 195, 190, .34); --light-x: 65%; }
.portrait--radiant { grid-column: 7 / span 6; margin-top: 140px; --portrait-glow: rgba(185, 137, 30, .36); --light-x: 33%; }
.portrait--phosphor { grid-column: 2 / span 6; --portrait-glow: rgba(127, 147, 163, .4); --light-x: 72%; }
.portrait--mura { grid-column: 9 / span 4; margin-top: 110px; --portrait-glow: rgba(175, 126, 42, .36); --light-x: 42%; }

.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.portrait__copy {
  position: relative;
  z-index: 3;
  align-self: end;
  padding: 70px clamp(22px, 4vw, 45px) clamp(28px, 4vw, 46px);
  background: linear-gradient(transparent, rgba(8, 8, 12, .97) 50%);
}

.portrait__copy > span {
  color: #727a86;
  font-family: Georgia, serif;
  font-size: .65rem;
  letter-spacing: .22em;
}

.portrait__copy h3 {
  margin: 5px 0 13px;
  color: #e2ddd2;
  font-size: clamp(1.9rem, 3vw, 3.2rem);
}

.portrait__copy p {
  color: #969ba4;
  font-size: .91rem;
}

.undertow {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 8vw;
  align-items: end;
  min-height: 95svh;
  padding: 12vw max(8vw, 32px);
  color: #878d96;
  background: #0c0c11;
}

.undertow > p {
  padding-left: 20px;
  border-left: 2px solid #3d4652;
  letter-spacing: .1em;
}

.undertow h2 {
  color: #d8d8d5;
  font-size: clamp(2.8rem, 6vw, 6.5rem);
}

.closing {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 115svh;
  padding: 15vw max(8vw, 32px);
  overflow: hidden;
  color: #d6d5d1;
  background:
    radial-gradient(circle at 62% 42%, rgba(138, 109, 47, .22), transparent 26%),
    linear-gradient(165deg, #101017, #08080c);
}

.closing__ring {
  position: absolute;
  top: 50%;
  right: -10vw;
  width: min(65vw, 780px);
  aspect-ratio: 1;
  border: 2px solid rgba(138, 109, 47, .42);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(138, 109, 47, .04), 0 0 0 125px rgba(138, 109, 47, .025);
  transform: translateY(-50%);
}

.closing__blessing {
  position: relative;
  z-index: 2;
  max-width: 9.2em;
  color: #b3aa98;
  font-family: var(--display);
  font-size: clamp(3.1rem, 8vw, 8.6rem);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
}

.closing__coming {
  position: relative;
  z-index: 2;
  justify-self: end;
  margin-top: 12vh;
  padding-right: 1em;
  color: #6e7885;
  font-family: var(--display);
  font-size: clamp(.9rem, 1.6vw, 1.25rem);
  letter-spacing: .55em;
}

@media (max-width: 900px) {
  .descent-meter { right: 6px; opacity: .7; }
  .story-section { padding-right: 34px; padding-left: 26px; }
  .opening { padding-right: 32px; padding-left: 28px; }
  .opening h1 { max-width: 6.5em; font-size: clamp(3rem, 15vw, 6rem); }
  .opening__architecture { left: 20%; opacity: .14; }
  .presence { grid-template-columns: 1fr; gap: 20px; min-height: auto; }
  .presence__copy { margin-top: 0; }
  .presence h2 { font-size: clamp(2.2rem, 10vw, 4rem); }
  .sovereign { min-height: 610px; }
  .sovereign__halo { width: 280px; }
  .world__header,
  .measure__intro,
  .house__header,
  .paradox,
  .undertow { grid-template-columns: 1fr; }
  .world__header > *,
  .measure__intro > *,
  .house__header > * { grid-column: 1 !important; grid-row: auto !important; }
  .family-ribbon { gap: 35px; font-size: 1rem; }
  .nation-gallery { display: block; }
  .nation { height: min(118vw, 570px) !important; margin: 0 0 44px !important; }
  .nation:nth-child(even) { margin-left: 12vw !important; }
  .nation:nth-child(odd) { margin-right: 9vw !important; }
  .hero-honor { font-size: clamp(1.45rem, 6vw, 2.5rem); }
  .scale__row { grid-template-columns: 65px 1fr; gap: 4px 15px; padding: 20px 6px; }
  .scale__row b { grid-row: 1 / span 2; }
  .scale__row p { grid-column: 2; }
  .scale__row em { grid-column: 2; text-align: left; }
  .paradox h3 { text-align: left; }
  .verdict { min-height: 110svh; padding-right: 32px; padding-left: 28px; }
  .verdict h2 { font-size: clamp(2.6rem, 10vw, 5rem); }
  .portraits { display: block; }
  .portrait { min-height: 590px; margin: 0 0 64px !important; }
  .portrait:nth-child(even) { margin-left: 11vw !important; }
  .portrait:nth-child(odd) { margin-right: 8vw !important; }
  .undertow { align-content: center; gap: 50px; padding-right: 34px; padding-left: 28px; }
  .closing__ring { right: -46vw; width: 115vw; }
  .closing__coming { justify-self: start; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  .section-index { margin-bottom: 15px; }
  .opening__eyebrow { letter-spacing: .28em; }
  .opening__whisper { justify-self: start; margin-left: 12vw; }
  .world__header h2,
  .measure__intro h2 { font-size: 2.35rem; letter-spacing: .03em; }
  .sovereign { min-height: 540px; }
  .sovereign__portrait { inset: 10% 0 0; width: 100%; height: 90%; }
  .sovereign__caption { right: auto; bottom: 4%; left: 0; width: 82%; }
  .nation img { min-height: 0; }
  .nation { height: 106vw !important; }
  .nation figcaption { padding: 65px 18px 18px; }
  .nation:nth-child(even) { margin-left: 7vw !important; }
  .nation:nth-child(odd) { margin-right: 5vw !important; }
  .scale__row { grid-template-columns: 54px 1fr; }
  .scale__row b { font-size: 1.7rem; }
  .portrait { min-height: 520px; }
  .portrait:nth-child(even) { margin-left: 7vw !important; }
  .portrait:nth-child(odd) { margin-right: 5vw !important; }
  .closing__blessing { font-size: clamp(3.2rem, 16vw, 5rem); }
  .closing__coming { letter-spacing: .32em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}