:root {
  --night: #071827;
  --blue: #102b45;
  --ice: #dceaf0;
  --snow: #f6f4ed;
  --gold: #e6b56e;
  --ink: #10202d;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--snow);
  background: var(--night);
  font-family: var(--sans);
  overflow-x: hidden;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sky {
  position: absolute;
  inset: 0 0 auto;
  height: min(1000px, 100svh);
  min-height: 760px;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 22%, rgba(247, 210, 145, .24), transparent 21%),
    linear-gradient(160deg, #071827 0%, #153b5b 50%, #c39b82 83%, #eef1ed 100%);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 18, 30, .38), transparent 58%);
}

.sun {
  position: absolute;
  top: 17%;
  right: 17%;
  width: clamp(110px, 12vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f9dca8;
  box-shadow: 0 0 70px 28px rgba(247, 211, 153, .22);
  animation: glow 6s ease-in-out infinite alternate;
}

.haze {
  position: absolute;
  width: 45vw;
  height: 2px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  transform: rotate(-7deg);
}

.haze-one { top: 27%; right: -4%; }
.haze-two { top: 34%; right: 4%; width: 28vw; opacity: .55; }

.forest {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 19%;
  height: 23%;
  opacity: .54;
  background:
    linear-gradient(63deg, transparent 44%, #0a2330 45% 55%, transparent 56%) 0 100% / 82px 180px repeat-x,
    linear-gradient(-63deg, transparent 44%, #0a2330 45% 55%, transparent 56%) 41px 100% / 82px 180px repeat-x;
  filter: blur(.3px);
}

.forest-back {
  bottom: 23%;
  height: 18%;
  opacity: .27;
  transform: scale(.8);
}

.forest-front {
  clip-path: polygon(0 43%, 7% 20%, 13% 50%, 23% 13%, 31% 54%, 40% 19%, 48% 47%, 57% 5%, 64% 49%, 73% 15%, 82% 52%, 92% 12%, 100% 45%, 100% 100%, 0 100%);
  background: #0a2631;
}

.snowbank {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
  background: #dbe5e6;
}

.snowbank-back {
  bottom: 7%;
  height: 22%;
  transform: rotate(2deg);
  opacity: .94;
}

.snowbank-front {
  bottom: -18%;
  height: 37%;
  background: #f5f3eb;
  transform: rotate(-2deg);
}

.snowfall i {
  position: absolute;
  top: -15px;
  left: calc((var(--i, 1) * 4.1%) - 2%);
  width: calc(3px + (var(--i, 1) % 3) * 2px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  filter: blur(.3px);
  animation: fall calc(9s + (var(--i, 1) % 6) * 2s) linear infinite;
  animation-delay: calc(var(--i, 1) * -.7s);
}

.snowfall i:nth-child(1) { --i: 1; } .snowfall i:nth-child(2) { --i: 2; }
.snowfall i:nth-child(3) { --i: 3; } .snowfall i:nth-child(4) { --i: 4; }
.snowfall i:nth-child(5) { --i: 5; } .snowfall i:nth-child(6) { --i: 6; }
.snowfall i:nth-child(7) { --i: 7; } .snowfall i:nth-child(8) { --i: 8; }
.snowfall i:nth-child(9) { --i: 9; } .snowfall i:nth-child(10) { --i: 10; }
.snowfall i:nth-child(11) { --i: 11; } .snowfall i:nth-child(12) { --i: 12; }
.snowfall i:nth-child(13) { --i: 13; } .snowfall i:nth-child(14) { --i: 14; }
.snowfall i:nth-child(15) { --i: 15; } .snowfall i:nth-child(16) { --i: 16; }
.snowfall i:nth-child(17) { --i: 17; } .snowfall i:nth-child(18) { --i: 18; }
.snowfall i:nth-child(19) { --i: 19; } .snowfall i:nth-child(20) { --i: 20; }
.snowfall i:nth-child(21) { --i: 21; } .snowfall i:nth-child(22) { --i: 22; }
.snowfall i:nth-child(23) { --i: 23; } .snowfall i:nth-child(24) { --i: 24; }

.site-header {
  position: relative;
  z-index: 3;
  width: min(1440px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.monogram {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  text-decoration: none;
  font: 20px/1 var(--serif);
  letter-spacing: -.08em;
}

.monogram span { color: var(--gold); }

.edition,
.read-link,
.eyebrow,
.hero-meta,
.section-number,
.poem-author,
footer {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
}

.edition { opacity: .62; }

.read-link {
  justify-self: end;
  text-decoration: none;
  padding: 12px 0;
}

.read-link span {
  display: inline-block;
  margin-left: 10px;
  color: var(--gold);
  transition: transform .25s ease;
}

.read-link:hover span { transform: translateY(4px); }

.hero {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 8vw));
  min-height: calc(min(1000px, 100svh) - 115px);
  margin: 0 auto;
  padding: clamp(70px, 10vh, 130px) 0 120px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 8vw;
  align-items: start;
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--gold);
}

h1 {
  margin: 0;
  max-width: 920px;
  font: italic 400 clamp(88px, 13vw, 210px)/.72 var(--serif);
  letter-spacing: -.075em;
  text-shadow: 0 5px 40px rgba(0, 0, 0, .12);
}

h1 span {
  padding-left: clamp(20px, 7vw, 105px);
}

.lead {
  margin: 48px 0 34px clamp(20px, 7vw, 105px);
  font: 400 clamp(22px, 2.3vw, 36px)/1.25 var(--serif);
}

.hero-meta {
  margin-left: clamp(20px, 7vw, 105px);
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: .65;
}

.rule { width: 54px; height: 1px; background: currentColor; }

.opening {
  position: relative;
  align-self: end;
  max-width: 390px;
  margin: 0 0 4vh auto;
  padding: 38px 0 0 64px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.opening-mark {
  position: absolute;
  top: 22px;
  left: 0;
  color: var(--gold);
  font: italic 80px/.8 var(--serif);
}

.opening p {
  margin: 0;
  font: italic clamp(20px, 2vw, 30px)/1.45 var(--serif);
}

.poem-section {
  position: relative;
  z-index: 4;
  color: var(--ink);
  background: var(--snow);
  padding: clamp(90px, 12vw, 180px) max(5vw, calc((100vw - 1260px) / 2));
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(480px, 1.1fr) minmax(210px, .55fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.poem-intro {
  position: sticky;
  top: 50px;
  padding-top: 8px;
}

.section-number {
  margin: 0 0 110px;
  color: #927148;
}

.poem-intro h2 {
  margin: 0 0 18px;
  font: italic 400 clamp(36px, 4vw, 64px)/.95 var(--serif);
  letter-spacing: -.04em;
}

.poem-author {
  margin: 0;
  color: #66727a;
}

.poem-text {
  border-left: 1px solid #cbd2d1;
  padding-left: clamp(28px, 5vw, 80px);
}

.stanza {
  margin: 0 0 clamp(62px, 7vw, 100px);
}

.stanza:last-child { margin-bottom: 0; }

.stanza p {
  margin: 0;
  font: 400 clamp(21px, 2vw, 30px)/1.65 var(--serif);
}

.dropcap {
  float: left;
  margin: -.09em .08em -.16em 0;
  color: #9c6c38;
  font: italic 400 3.25em/.9 var(--serif);
}

.poem-note {
  position: sticky;
  top: 50px;
  padding-top: 8px;
  color: #68747c;
}

.note-line {
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: 28px;
  background: #9c6c38;
}

.poem-note p {
  margin: 0;
  font: italic 17px/1.65 var(--serif);
}

footer {
  position: relative;
  z-index: 4;
  padding: 34px max(4vw, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  background: #081a2a;
  color: rgba(255, 255, 255, .66);
}

footer p { margin: 0; }
footer p:nth-child(2) { text-align: center; }
footer a { justify-self: end; text-decoration: none; color: var(--gold); }

@keyframes fall {
  from { transform: translate3d(0, -20px, 0); }
  to { transform: translate3d(70px, 105vh, 0); }
}

@keyframes glow {
  from { box-shadow: 0 0 55px 20px rgba(247, 211, 153, .18); }
  to { box-shadow: 0 0 95px 35px rgba(247, 211, 153, .28); }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr 1fr; }
  .edition { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 90px; }
  .opening {
    width: min(100%, 440px);
    margin: 0;
    padding: 34px 28px 30px 62px;
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(7, 24, 39, .62);
    box-shadow: 0 18px 50px rgba(4, 15, 25, .2);
    backdrop-filter: blur(10px);
  }
  .opening-mark { top: 24px; left: 20px; }
  .poem-section { grid-template-columns: 1fr; }
  .poem-intro, .poem-note { position: static; }
  .section-number { margin-bottom: 28px; }
  .poem-note { max-width: 500px; margin-left: auto; }
}

@media (max-width: 600px) {
  .sky { min-height: 700px; height: 100svh; }
  .site-header { width: calc(100% - 40px); padding: 20px 0; }
  .monogram { width: 46px; height: 46px; font-size: 17px; }
  .hero {
    width: calc(100% - 40px);
    min-height: calc(100svh - 87px);
    padding: 66px 0 70px;
    gap: 52px;
  }
  h1 { font-size: clamp(70px, 25vw, 106px); line-height: .78; }
  h1 span { padding-left: 0; }
  .lead, .hero-meta { margin-left: 0; }
  .lead { margin-top: 36px; }
  .opening { padding-left: 48px; max-width: 290px; }
  .opening {
    width: 100%;
    max-width: none;
    padding: 32px 24px 28px 58px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    background: rgba(7, 24, 39, .62);
    box-shadow: 0 18px 50px rgba(4, 15, 25, .2);
    backdrop-filter: blur(10px);
  }
  .opening-mark { top: 23px; left: 18px; font-size: 64px; }
  .poem-section { padding: 80px 20px 95px; gap: 55px; }
  .poem-text { padding-left: 20px; }
  .stanza p { font-size: clamp(18px, 5.1vw, 22px); line-height: 1.72; }
  footer { grid-template-columns: 1fr auto; padding: 28px 20px; }
  footer p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sun, .snowfall i { animation: none; }
}