/* Openfield: a dark-sky campground. Luminous night field. */

:root {
  --hedge: #04070f;
  --field: #060a1c;
  --night: #0a1230;
  --night-hi: #0f1a45;
  --deep: #050817;
  --ink: #e8eef8;
  --mist: #aab7d4;
  --star: #9feaf2;
  --star-hi: #dcfbff;
  --lantern: #f4b860;
  --lantern-hi: #ffd08a;
  --line: rgba(159, 234, 242, .16);
  --line-soft: rgba(232, 238, 248, .1);
  --display: Syne, "Gill Sans", Corbel, "Segoe UI", sans-serif;
  --figures: Syne, "Gill Sans", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --serif: Literata, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Constantia, Georgia, serif;
  --wrap: 1320px;
  --gut: clamp(16px, 4.5vw, 64px);
  --pad-x: max(var(--gut), calc((100% - var(--wrap)) / 2));
  --rail: clamp(7rem, 11vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--night);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(159, 234, 242, .32); color: #fff; }

img, svg { max-width: 100%; }

a {
  color: var(--star);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(159, 234, 242, .45);
  text-underline-offset: .24em;
  transition: color .25s ease, text-decoration-color .25s ease;
}
a:hover { color: var(--star-hi); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--star-hi); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  padding: .7rem 1.1rem;
  border-radius: 4px;
  background: var(--star);
  color: var(--hedge);
  font: 400 .85rem/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 5rem; }

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--star);
  font: 400 .78rem/1.3 var(--display);
  letter-spacing: .34em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 1.4rem;
  font: 300 clamp(2rem, 1.1rem + 2.7vw, 3.7rem)/1.06 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lede {
  max-width: 38rem;
  margin: 0;
  color: var(--mist);
  font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.1rem;
  padding: .9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 400 .82rem/1.1 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, box-shadow .4s ease, transform .3s ease, color .3s ease;
}
.btn--glow {
  background: var(--lantern);
  color: #1d1406;
  box-shadow: 0 12px 34px -14px rgba(244, 184, 96, .75);
}
.btn--glow:hover,
.btn--glow:focus-visible {
  background: var(--lantern-hi);
  color: #1d1406;
  box-shadow: 0 0 0 7px rgba(244, 184, 96, .14), 0 16px 44px -14px rgba(244, 184, 96, .85);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
  color: var(--ink);
  font: 400 .8rem/1.2 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.arrow::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--star);
  box-shadow: 0 0 10px rgba(159, 234, 242, .7);
  transition: width .4s ease;
}
.arrow:hover { color: var(--star-hi); }
.arrow:hover::after, .arrow:focus-visible::after { width: 3.4rem; }

/* ---------------------------------------------------------------- header */

.top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: 1.3rem var(--pad-x);
  background: #0a1232;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 2.4rem; height: 2.4rem; flex: none; overflow: visible; }
.brand__star { fill: var(--star); }
.brand__land { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.brand__furrow { fill: none; stroke: var(--mist); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.brand__name {
  font: 400 1.05rem/1 var(--display);
  letter-spacing: .44em;
  text-transform: uppercase;
}
.brand__lamp { fill: var(--lantern); }
.brand:hover .brand__star { fill: var(--star-hi); }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem 1.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: inline-block;
  padding: .6rem 0;
  color: var(--mist);
  font: 400 .76rem/1 var(--display);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: .24em;
  bottom: .25rem;
  height: 1px;
  background: var(--star);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav .nav__book {
  padding: .65rem 1.1rem .6rem;
  border: 1px solid rgba(244, 184, 96, .55);
  border-radius: 999px;
  color: var(--lantern);
}
.nav .nav__book::after { display: none; }
.nav .nav__book:hover { background: rgba(244, 184, 96, .12); color: var(--lantern-hi); }

/* ---------------------------------------------------------------- hero */

.hero {
  --land: clamp(200px, 19vw, 300px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(600px, calc(100svh - 8.2rem), 940px);
  background: linear-gradient(to top, var(--field) 0 4px, #8ea3c6 4px, #5f7fae calc(var(--land) * .38), #2b467f calc(var(--land) * .75), #182a61 calc(var(--land) + 7rem), #0f1a45 62%, #0a1232 100%);
}

.hero__sky {
  position: absolute;
  z-index: 1;
  top: clamp(1rem, 4vh, 3rem);
  right: var(--pad-x);
  width: min(36vw, 540px);
}
.hero__stars { display: block; width: 100%; height: auto; overflow: visible; }

.pl-line { fill: none; stroke: var(--star); stroke-width: 1.6; stroke-linejoin: round; opacity: .55; }
.pl-pointer { fill: none; stroke: var(--star); stroke-width: 1.4; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .7; }
.pl-core { fill: #f2fdff; }
.pl-star { transform-box: fill-box; transform-origin: center; }
.pl-label {
  fill: #b9c5de;
  font: 400 20px var(--display);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.pl-label--polaris { fill: var(--star-hi); font-size: 22px; }
.pl-label--sub { font: italic 400 20px var(--serif); letter-spacing: .02em; text-transform: none; }
.pl-label--along { fill: var(--star); }

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: calc(var(--wrap) * .62);
  padding: clamp(2.5rem, 7vh, 6rem) 0 calc(var(--land) * .55 + 1rem) var(--pad-x);
}

.kicker {
  margin: 0 0 1.8rem 5.4rem;
  color: var(--star);
  font: 400 .78rem/1.4 var(--display);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero__title {
  font: 300 clamp(2.3rem, .9rem + 5.1vw, 6.1rem)/.98 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hl {
  display: grid;
  grid-template-columns: 5.4rem auto;
  align-items: baseline;
  white-space: nowrap;
}
.hl::before {
  color: var(--star);
  font: italic 400 1.05rem/1 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  opacity: .9;
}
.hl--1::before { content: "4:30 pm"; content: "4:30 pm" / ""; }
.hl--2::before { content: "6:45 pm"; content: "6:45 pm" / ""; }
.hl--3::before { content: "8:15 pm"; content: "8:15 pm" / ""; }
.hl--3 {
  color: var(--star-hi);
  text-shadow: 0 0 .5em rgba(127, 221, 230, .45);
}

.hero__lede {
  max-width: 33rem;
  margin: 2.2rem 0 0 5.4rem;
  color: #cfd8ea;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin: 2.2rem 0 0 5.4rem;
}

.hero__land {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--land);
}
.hero__horizon { display: block; width: 100%; height: 100%; }
.hz-far { fill: #22356c; }
.hz-hill { fill: #16244f; }
.hz-tree { fill: #0b1230; }
.hz-hedge { fill: #080e27; }
.hz-gate { stroke: #3a4f86; stroke-width: 2.4; }
.hz-field { fill: var(--field); }
.hz-furrow { fill: none; stroke: #111a3d; stroke-width: 1.3; }
.hz-party, .hz-bed { fill: var(--hedge); stroke: rgba(159, 234, 242, .22); stroke-width: 1; stroke-linejoin: round; }
.hz-limb { fill: none; stroke: var(--hedge); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hz-limb--legs { stroke-width: 2.6; }
.hz-beam { fill: #ff7a5c; opacity: .14; }
.hz-hoop { fill: none; stroke: rgba(159, 234, 242, .45); stroke-width: 1.6; stroke-linecap: round; }
.hz-pole { fill: none; stroke: #0b1230; stroke-width: 2; stroke-linecap: round; }
.hz-flap { fill: #5a3f24; }
.hz-lamp { fill: #fff3d6; }
.hz-tent { stroke: #0b1230; stroke-width: 1; }
.hz-door { fill: var(--lantern-hi); }
.hz-guy { fill: none; stroke: #2a3056; stroke-width: 1; }
.hz-torch { fill: #ff7a5c; }

/* ---------------------------------------------------------------- your night */

.night {
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4.5rem, 8vw, 7rem);
  background: linear-gradient(var(--field), var(--night) 70%);
}
.night__head {
  padding: 0 var(--pad-x);
  padding-left: calc(var(--pad-x) + var(--rail) + clamp(1.5rem, 3vw, 3.5rem));
}
.night__head h2 { max-width: 16em; }
.night__intro { max-width: 40rem; margin: 0; color: var(--mist); font-size: 1.1rem; text-wrap: pretty; }

.night__stage {
  max-width: 1480px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 clamp(0px, 2vw, 32px);
}
.night__pano {
  aspect-ratio: 1600 / 210;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.night__pano-svg { display: block; width: 100%; height: 100%; }
.pn-hedge { fill: var(--hedge); }
.pn-sil { fill: var(--hedge); stroke: rgba(159, 234, 242, .32); stroke-width: 1; }
.pn-window { fill: var(--lantern); }
.pn-window--dim { opacity: .45; }
.pn-star { fill: #eafcff; }
.pn-cas, .pn-tri { fill: none; stroke: var(--star); stroke-width: 1; opacity: .45; }
.pn-tri { stroke-dasharray: 2 6; }
.pn-label { fill: var(--mist); font: italic 400 15px var(--serif); }
.pn-torch { fill: #ff7a5c; }
.pn-torch--beam { fill: #ff7a5c; opacity: .18; }
.pn-tent { fill: #3b2c2a; stroke: var(--hedge); stroke-width: 1; }
.pn-door { fill: var(--lantern-hi); }
.pn-steam { fill: none; stroke: #eef3f8; stroke-width: 1.6; stroke-linecap: round; opacity: .7; }

.night__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 2.6rem clamp(.6rem, 1.4vw, 1.4rem) 0;
  text-align: center;
}
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1.9rem;
  background: linear-gradient(var(--star), rgba(159, 234, 242, 0));
}
.step__title {
  color: var(--star);
  font: 400 .78rem/1.3 var(--display);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.step__time {
  display: block;
  margin-bottom: .55rem;
  color: var(--ink);
  font: 300 clamp(1.9rem, 1.2rem + 1.2vw, 2.7rem)/1 var(--figures);
  letter-spacing: .04em;
  font-variant-numeric: lining-nums proportional-nums;
}
.ampm {
  margin-left: -.3em;
  font: italic 400 .42em/1 var(--serif);
  letter-spacing: .02em;
  text-transform: none;
}

.step p { margin: .8rem auto 0; max-width: 17rem; color: var(--mist); font-size: .98rem; line-height: 1.55; }
.step .step__price {
  margin-top: 1rem;
  color: var(--lantern);
  font: 400 .74rem/1.4 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.night__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.6rem;
  margin: clamp(3rem, 5vw, 4.5rem) 0 0;
  padding: 0 var(--gut);
  color: var(--mist);
  font-style: italic;
}

/* ---------------------------------------------------------------- chapters: one night, hour by hour */

.chapter {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: clamp(4.5rem, 8vw, 7.5rem) var(--pad-x);
  background: linear-gradient(var(--from, var(--night)), var(--to, var(--night)));
}
.chapter--arrive { --from: var(--night); --to: #0b1332; }
.chapter--walk { --from: #0b1332; --to: #070c22; }
.chapter--sky { --from: #070c22; --to: #060a1d; background: linear-gradient(#070c22, var(--deep) 22%, var(--deep) 80%, #060a1d); }
.chapter--questions { --from: #060a1d; --to: var(--night); }
.chapter--book { --from: var(--night); --to: #0f1a42; padding-bottom: clamp(4rem, 8vw, 7rem); }

.chapter__clock {
  grid-column: 1;
  grid-row: 1 / span 4;
  position: sticky;
  top: 1.8rem;
  align-self: start;
  margin: .2rem 0 0;
  color: var(--star);
  font: 300 clamp(2rem, 1rem + 2.1vw, 3.3rem)/1 var(--figures);
  letter-spacing: .03em;
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
}
.chapter__clock::after {
  content: "";
  display: block;
  width: 1px;
  height: 5.5rem;
  margin: 1.1rem 0 0 .12em;
  background: linear-gradient(var(--star), rgba(159, 234, 242, 0));
}
.chapter__main { grid-column: 2; min-width: 0; }
.chapter__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------------------- pitches + field plan */

.pitches {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 5rem);
  align-items: start;
}
.plan { position: sticky; top: 1.8rem; margin: 0; }
.plan__svg { display: block; width: 100%; height: auto; }
.plan figcaption { margin-top: .8rem; color: var(--mist); font-size: .92rem; font-style: italic; }

.pl-field { fill: #0e1842; }
.pl-hedge { fill: none; stroke: #1a3a4f; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 0 15; }
.pl-gategap { fill: none; stroke: #0a1230; stroke-width: 26; }
.pl-gate { fill: none; stroke: var(--mist); stroke-width: 3; stroke-dasharray: 7 5; }
.pl-contour { fill: none; stroke: rgba(159, 234, 242, .16); stroke-width: 1.5; stroke-dasharray: 2 7; }
.pl-track { fill: none; stroke: #1f2c5e; stroke-width: 14; stroke-linecap: round; }
.pl-route { fill: none; stroke: var(--star); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 11; opacity: .85; }
.z > * { fill: rgba(159, 234, 242, .07); stroke: rgba(159, 234, 242, .55); stroke-width: 1.6; transition: fill .3s ease, stroke .3s ease, opacity .3s ease; }
.z-bell > * { fill: rgba(244, 184, 96, .14); stroke: var(--lantern); }
.z-bell > .z-bell__lamp { fill: var(--lantern); stroke: none; }
.z-sky > * { fill: rgba(159, 234, 242, .16); stroke: var(--star-hi); }
.z-scope > rect { fill: #1b2858; stroke: var(--mist); }
.z-scope > .z-scope__icon { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.pl-pond { fill: rgba(95, 211, 223, .16); stroke: rgba(95, 211, 223, .55); stroke-width: 1.5; }
.pl-build { fill: #1a2550; stroke: var(--mist); stroke-width: 1.2; }
.pl-text { fill: var(--mist); font: 400 19px var(--display); letter-spacing: .18em; text-transform: uppercase; }
.pl-text--south { fill: var(--star); font: italic 400 20px var(--serif); letter-spacing: .02em; text-transform: none; }
.pl-south { fill: none; stroke: var(--star); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: .7; }
.pl-num circle { fill: var(--night); stroke: var(--star); stroke-width: 1.5; }
.pl-num text { fill: var(--star); font: 400 20px var(--display); }
.pl-north path { fill: var(--ink); }
.pl-north text { fill: var(--ink); font: 400 18px var(--display); letter-spacing: .1em; }

.pitches:has(.pitch:hover, .pitch:focus-within) .z > * { opacity: .35; }
.pitches:has(.pitch--hedge:hover, .pitch--hedge:focus-within) .z-hedge > *,
.pitches:has(.pitch--open:hover, .pitch--open:focus-within) .z-open > *,
.pitches:has(.pitch--bell:hover, .pitch--bell:focus-within) .z-bell > *,
.pitches:has(.pitch--sky:hover, .pitch--sky:focus-within) .z-sky > * { opacity: 1; fill: rgba(159, 234, 242, .38); stroke: var(--star-hi); }
.pitches:has(.pitch--bell:hover, .pitch--bell:focus-within) .z-bell > * { fill: rgba(244, 184, 96, .45); stroke: var(--lantern-hi); }

.pitch-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pitch {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  column-gap: 1.1rem;
  row-gap: .5rem;
  padding: 1.7rem .4rem 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .35s ease;
}
.pitch:hover, .pitch:focus-within { background: rgba(159, 234, 242, .035); }
.pitch__num {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--star);
  border-radius: 50%;
  color: var(--star);
  font: 400 .9rem/1 var(--display);
  font-variant-numeric: lining-nums;
}
.pitch > .pitch__num { grid-row: 1 / span 2; align-self: start; }
.pitch__name {
  grid-column: 2;
  align-self: center;
  font: 400 1.05rem/1.3 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pitch__price {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--mist);
  font: 400 .72rem/1.3 var(--display);
  letter-spacing: .16em;
  text-align: right;
  text-transform: uppercase;
}
.pitch__amount {
  display: block;
  margin-bottom: .2rem;
  color: var(--ink);
  font: 300 2.3rem/1 var(--figures);
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
}
.pitch__text { grid-column: 2; margin: 0; color: var(--mist); line-height: 1.55; }
.pitch__pick {
  grid-column: 2 / 4;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .35rem;
  padding: .45rem 0;
  font: 400 .74rem/1.2 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.pitch__pick::after {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.pitch__pick:hover::after, .pitch__pick:focus-visible::after { width: 2.4rem; }
.pitch-note {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 2rem 0 0;
  color: var(--mist);
  font-style: italic;
}
.pitch__num--pad { flex: none; }

/* ---------------------------------------------------------------- dusk walk */

.walk__big {
  max-width: 30ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font: 400 clamp(1.5rem, 1rem + 1.7vw, 2.55rem)/1.32 var(--serif);
  text-wrap: pretty;
}
.walk__big em { color: var(--star); }

.adapt__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.25rem); }
.adapt__panel { margin: 0; }
.adapt__panel svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.adapt__panel circle { fill: #e9fbff; }
.adapt__sky { fill: #111a3e; }
.adapt__panel--2 .adapt__sky { fill: #0b1333; }
.adapt__panel--3 .adapt__sky { fill: #070d28; }
.adapt__panel--4 .adapt__sky { fill: #050917; }
.adapt__milky { fill: rgba(170, 200, 235, .09); }
.adapt__w { fill: none; stroke: var(--star); stroke-width: 1; stroke-dasharray: 2 5; opacity: .35; }
.adapt__panel figcaption {
  margin-top: .75rem;
  color: var(--mist);
  font: 400 .72rem/1.4 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.adapt__panel--4 figcaption { color: var(--star); }
.adapt__caption { margin: 1.2rem 0 0; color: var(--mist); font-style: italic; }

.walk__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.walk__col h3, .rules__title, .pack__title, .visit h3 {
  margin-bottom: .9rem;
  color: var(--star);
  font: 400 .8rem/1.3 var(--display);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.walk__col p { margin: 0; color: #cdd6e8; text-wrap: pretty; }

.rules { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.2rem; border-top: 1px solid var(--line); }
.rules__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem clamp(2rem, 4vw, 4rem);
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}
.rules__list li { position: relative; padding-left: 3.4rem; color: var(--mist); counter-increment: rule; }
.rules__list li::before {
  content: "0" counter(rule);
  position: absolute;
  left: 0;
  top: .1rem;
  color: var(--lantern);
  font: 300 1.7rem/1 var(--figures);
  font-variant-numeric: lining-nums tabular-nums;
}
.rules__list strong { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- sky guide (signature) */

.guide { grid-column: 2; min-width: 0; }
.guide__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.seasons {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  border: 0;
  min-width: 0;
}
.seasons__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.seasons__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.season {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: .85rem;
  align-items: center;
  padding: .6rem 1.3rem .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease, box-shadow .4s ease;
}
.season__icon { grid-row: 1 / span 2; width: 3.2rem; height: 2rem; overflow: visible; }
.season__icon path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .7; }
.season__icon circle { fill: currentColor; }
.season__name { color: var(--ink); font: 400 .8rem/1.2 var(--display); letter-spacing: .24em; text-transform: uppercase; }
.season__months { font: italic 400 .85rem/1.2 var(--serif); }
.season:hover { border-color: rgba(159, 234, 242, .5); color: var(--ink); }
.seasons__input:checked + .season {
  border-color: var(--star);
  background: rgba(159, 234, 242, .09);
  color: var(--star);
  box-shadow: 0 0 28px -8px rgba(159, 234, 242, .55);
}
.seasons__input:focus-visible + .season { outline: 2px solid var(--star-hi); outline-offset: 3px; }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  align-items: center;
}
.panel + .panel { margin-top: 4rem; }
@supports selector(:has(*)) {
  .panel { display: none; }
  .panel + .panel { margin-top: 0; }
  .guide:has(#se-spring:checked) .panel--spring,
  .guide:has(#se-summer:checked) .panel--summer,
  .guide:has(#se-autumn:checked) .panel--autumn,
  .guide:has(#se-winter:checked) .panel--winter { display: grid; }
}

.panel__sky { min-width: 0; }
.panel__hedge {
  display: block;
  width: 100%;
  height: 4.5rem;
  margin-top: -2.2rem;
  fill: #010208;
  background: radial-gradient(ellipse 62% 70% at 50% 100%, rgba(58, 90, 160, .34), rgba(58, 90, 160, 0) 72%);
}
.panel__where {
  margin: .9rem 0 0;
  color: var(--mist);
  font: 400 .72rem/1.3 var(--display);
  letter-spacing: .24em;
  text-align: center;
  text-transform: uppercase;
}

.chart {
  position: relative;
  width: min(100%, calc(min(72vh, 620px) * var(--ar, 1.4)));
  margin: 0 auto;
}
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ln { stroke: var(--star); stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.sd { fill: #f2fdff; }
.lb { fill: var(--mist); font: 400 22px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tg-haze { fill: rgba(200, 220, 245, .16); }
.tg-core { fill: rgba(230, 240, 255, .55); }
.tg-ring { fill: none; stroke: var(--lantern); stroke-width: 1.6; stroke-dasharray: 3 6; }
.tg-hop { fill: none; stroke: var(--lantern); stroke-width: 1.6; stroke-dasharray: 2 8; stroke-linecap: round; }
.tg-label { fill: var(--lantern); font: italic 400 24px var(--serif); }

.chart__btns { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.chart__btns[hidden] { display: none; }
.st {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
  margin: -1.4rem 0 0 -1.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.st::before {
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid rgba(159, 234, 242, .7);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1.2), background-color .35s ease;
}
.st:hover::before { opacity: .8; transform: scale(1); }
.st[aria-pressed="true"]::before {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(159, 234, 242, .5);
  background: rgba(159, 234, 242, .2);
  box-shadow: 0 0 18px 2px rgba(159, 234, 242, .45);
}
.st.is-next::before { opacity: .55; transform: scale(1); }
.st:focus-visible { outline: 2px solid var(--star-hi); outline-offset: -2px; }
.st__name {
  position: absolute;
  left: 100%;
  top: 50%;
  padding: .15rem .35rem;
  border-radius: 2px;
  background: rgba(5, 8, 23, .72);
  color: var(--ink);
  font: 400 .72rem/1.2 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-.3rem, -50%);
  transition: opacity .3s ease;
  pointer-events: none;
}
.st--end .st__name { left: auto; right: 100%; transform: translate(.3rem, -50%); }
.st:hover .st__name,
.st:focus-visible .st__name,
.st[aria-pressed="true"] .st__name { opacity: 1; }
.st[aria-pressed="true"] .st__name { color: var(--star); }

.of-js .lb { display: none; }
.of-js .ln { opacity: .2; stroke-width: 1.6; stroke-dasharray: 1 10; stroke-dashoffset: 0; }
.of-js .ln.is-hint { opacity: .6; }
.of-js .ln.is-on { opacity: .9; stroke-dasharray: var(--len, 400); stroke-dashoffset: 0; }
.of-js .chart__target { opacity: 0; transition: opacity 1.4s ease .4s; }
.of-js .is-complete .chart__target { opacity: 1; }
.of-js .is-complete .ln.is-on { stroke: var(--star-hi); }

.card {
  position: relative;
  z-index: 2;
  margin-left: -2.5rem;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(9, 15, 40, .84);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8);
}
.card__season { margin: 0 0 .7rem; color: var(--star); font: 400 .72rem/1.3 var(--display); letter-spacing: .26em; text-transform: uppercase; }
.card__title { margin-bottom: 1rem; font: 300 1.75rem/1.12 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.card__facts { margin: 0; }
.card__facts dt { margin-top: 1rem; color: var(--star); font: 400 .68rem/1.3 var(--display); letter-spacing: .24em; text-transform: uppercase; }
.card__facts dd { margin: .25rem 0 0; color: #d4dcec; font-size: .98rem; line-height: 1.5; }
.card__status {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font: 400 .74rem/1.4 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.card__status::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .7rem;
  background: linear-gradient(90deg, var(--star) calc(var(--p, 1) * 100%), rgba(159, 234, 242, .14) 0);
  transition: background-size .4s ease;
}
.card__done { margin: .9rem 0 0; color: var(--star-hi); font-style: italic; }
.is-complete .card__title { color: var(--star-hi); text-shadow: 0 0 .6em rgba(127, 221, 230, .45); }
.of-js .panel:not(.is-complete) .card__done { display: none; }
.card__tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.card__tools[hidden] { display: none; }
.tool {
  min-height: 2.75rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--star);
  border-radius: 999px;
  background: transparent;
  color: var(--star);
  font: 400 .72rem/1.2 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.tool:hover { background: rgba(159, 234, 242, .12); color: var(--star-hi); }
.tool--quiet { border-color: var(--line); color: var(--mist); }

.st--regulus { left: 74.95%; top: 84.53%; }
.st--eta-leo { left: 75.21%; top: 61.22%; }
.st--algieba { left: 67.45%; top: 46.67%; }
.st--adhafera { left: 69.19%; top: 29.25%; }
.st--rasalas { left: 82.62%; top: 15.47%; }
.st--eps-leo { left: 87.00%; top: 25.86%; }
.st--zosma { left: 35.48%; top: 42.01%; }
.st--chertan { left: 34.64%; top: 66.78%; }
.st--denebola { left: 13.00%; top: 67.82%; }
.chart--spring { aspect-ratio: 1000 / 520; --ar: 1.9231; }
.st--deneb { left: 38.46%; top: 12.10%; }
.st--sadr { left: 49.52%; top: 35.31%; }
.st--eta-cyg { left: 66.90%; top: 58.03%; }
.st--albireo { left: 87.00%; top: 88.01%; }
.st--delta-cyg { left: 71.45%; top: 11.99%; }
.st--gienah { left: 32.94%; top: 62.79%; }
.st--zeta-cyg { left: 13.00%; top: 77.11%; }
.chart--summer { aspect-ratio: 1000 / 733; --ar: 1.3643; }
.st--markab { left: 87.00%; top: 84.77%; }
.st--scheat { left: 83.65%; top: 51.17%; }
.st--alpheratz { left: 55.83%; top: 52.21%; }
.st--algenib { left: 54.27%; top: 88.02%; }
.st--mirach { left: 31.14%; top: 34.28%; }
.st--mu-and { left: 36.74%; top: 27.52%; }
.st--almach { left: 13.00%; top: 11.98%; }
.chart--autumn { aspect-ratio: 1000 / 759; --ar: 1.3175; }
.st--betelgeuse { left: 18.45%; top: 21.74%; }
.st--meissa { left: 49.56%; top: 12.00%; }
.st--bellatrix { left: 65.11%; top: 25.90%; }
.st--mintaka { left: 54.45%; top: 51.65%; }
.st--alnilam { left: 47.88%; top: 55.13%; }
.st--alnitak { left: 40.78%; top: 57.99%; }
.st--saiph { left: 30.01%; top: 88.00%; }
.st--rigel { left: 81.55%; top: 82.32%; }
.chart--winter { aspect-ratio: 620 / 1000; --ar: 0.6200; }

/* ---------------------------------------------------------------- questions */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.q { border-top: 1px solid var(--line); }
.q:last-child { border-bottom: 1px solid var(--line); }
.q summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem .2rem;
  color: var(--ink);
  font: 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.35 var(--serif);
  list-style: none;
  cursor: pointer;
  transition: color .25s ease;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "";
  flex: none;
  width: .95rem;
  height: .95rem;
  margin-top: .4rem;
  background:
    linear-gradient(var(--star), var(--star)) center / 100% 1px no-repeat,
    linear-gradient(var(--star), var(--star)) center / 1px 100% no-repeat;
  transition: transform .35s ease;
}
.q summary:hover { color: var(--star-hi); }
.q[open] summary { color: var(--star); }
.q[open] summary::after { transform: rotate(45deg); }
.q p { max-width: 40rem; margin: 0; padding: 0 .2rem 1.5rem; color: var(--mist); }

.pack {
  position: sticky;
  top: 1.8rem;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(159, 234, 242, .03);
}
.pack__list { margin: 0; padding: 0; list-style: none; }
.pack__list li { position: relative; padding: .6rem 0 .6rem 1.8rem; border-bottom: 1px dashed rgba(159, 234, 242, .16); color: #cdd6e8; }
.pack__list li:last-child { border-bottom: 0; color: var(--star); font-style: italic; }
.pack__list li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: 1.12rem;
  width: .5rem;
  height: .5rem;
  border: 1px solid var(--star);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- book + visit */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.form {
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(244, 184, 96, .3);
  border-radius: 6px;
  background: rgba(8, 14, 40, .6);
  box-shadow: 0 40px 80px -50px rgba(244, 184, 96, .35);
}
.form__row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 1.15rem; }
.field label { color: var(--mist); font: 400 .72rem/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.field input, .field select {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(170, 183, 212, .38);
  border-radius: 4px;
  background: #0a1230;
  color: var(--ink);
  font: 400 1rem/1.3 var(--serif);
  font-variant-numeric: lining-nums;
  transition: border-color .25s ease;
}
.field input::placeholder { color: #7f8cab; }
.field input:hover, .field select:hover { border-color: rgba(159, 234, 242, .6); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; border-color: var(--star); }
.field--check { flex-direction: row; align-items: flex-start; gap: .85rem; }
.field--check input { flex: none; width: 1.25rem; min-height: 0; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--lantern); }
.field--check label { color: #cdd6e8; font: 400 .98rem/1.5 var(--serif); letter-spacing: 0; text-transform: none; }
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 1.6rem;
  margin-top: 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.total { flex: 1 1 15rem; color: var(--mist); font-size: .98rem; line-height: 1.5; }
.total strong {
  display: block;
  margin-top: .35rem;
  color: var(--lantern);
  font: 300 1.7rem/1.15 var(--figures);
  letter-spacing: .06em;
  font-variant-numeric: lining-nums;
}

.visit__block { margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.visit__block:last-child { margin-bottom: 0; border-bottom: 0; }
.visit p { margin: 0 0 .7rem; color: #cdd6e8; }
.visit address { margin: 0 0 .8rem; color: var(--ink); font-style: normal; font-size: 1.15rem; line-height: 1.45; }

/* ---------------------------------------------------------------- footer: first light */

.foot { background: var(--hedge); color: var(--mist); }
.dawn { height: clamp(150px, 16vw, 260px); background: #0f1a42; }
.dawn__svg { display: block; width: 100%; height: 100%; }
.dw-hill { fill: #0c1432; }
.dw-land { fill: var(--hedge); }
.dw-venus { fill: #fff; }
.dw-label { fill: #e3ebf6; font: italic 400 17px var(--serif); }

.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) 2.5rem;
}
.foot__brand .brand__mark { width: 2.8rem; height: 2.8rem; }
.foot__name { margin: 1rem 0 .4rem; color: var(--ink); font: 400 1.15rem/1 var(--display); letter-spacing: .44em; text-transform: uppercase; }
.foot__line { max-width: 20rem; margin: 0; font-style: italic; }
.foot__title { margin: 0 0 .9rem; color: var(--star); font: 400 .72rem/1.3 var(--display); letter-spacing: .26em; text-transform: uppercase; }
.foot__col p { margin: 0 0 .8rem; font-size: .98rem; }
.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col li { margin-bottom: .45rem; }
.foot__col a { color: #cdd6e8; text-decoration-color: rgba(159, 234, 242, .3); }
.foot__col a:hover { color: var(--star-hi); }
.foot__small { margin: 0; padding: 1.4rem var(--pad-x) 4.5rem; border-top: 1px solid var(--line-soft); color: #8d9aba; font-size: .85rem; }

.eyebrow, .kicker, .btn, .arrow, .nav a, .step__title, .step .step__price, .pitch__price, .pitch__pick,
.adapt__panel figcaption, .season__name, .panel__where, .card__season, .card__facts dt, .card__status,
.tool, .field label, .foot__title, .st__name, .pitch__num, .pl-num text, .pl-text { font-variant-numeric: lining-nums; }

/* ---------------------------------------------------------------- motion */

.of-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.of-js [data-reveal].is-in { opacity: 1; transform: none; }
.of-js .step:nth-child(2) { transition-delay: .12s; }
.of-js .step:nth-child(3) { transition-delay: .24s; }
.of-js .step:nth-child(4) { transition-delay: .36s; }
.of-js .step:nth-child(5) { transition-delay: .48s; }

@media (prefers-reduced-motion: no-preference) {
  .hl { animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hl--2 { animation-delay: .3s; }
  .hl--3 { animation-delay: .6s; }
  .kicker, .hero__lede, .hero__ctas { animation: fade 1.4s ease .9s both; }
  .pl-star { animation: adapt 1.4s ease-out both; }
  .pl-d1 { animation-delay: .3s; }
  .pl-d2 { animation-delay: .5s; }
  .pl-d3 { animation-delay: .7s; }
  .pl-d4 { animation-delay: .9s; }
  .pl-d5 { animation-delay: 1.1s; }
  .pl-d6 { animation-delay: 1.3s; }
  .pl-d7 { animation-delay: 1.5s; }
  .pl-d8 { animation-delay: 1.7s; }
  .pl-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s ease-in-out 1.4s forwards; }
  .pl-pointer, .pl-label { animation: fade 1.4s ease 2.4s both; }
  .st.is-next::before { animation: invite 2.4s ease-in-out infinite; }
  .hz-glowpool { animation: breathe 6s ease-in-out infinite alternate; }
  .panel { animation: fade .8s ease both; }
  .of-js .ln.is-on { animation: draw-line .9s cubic-bezier(.3, .6, .3, 1) both; }
  .of-js .ln.is-on.from-b { animation-name: draw-line-back; }
}

@keyframes rise { from { opacity: 0; transform: translateY(.35em); } }
@keyframes fade { from { opacity: 0; } }
@keyframes adapt { from { opacity: 0; transform: scale(.3); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes invite { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .8; transform: scale(1.05); } }
@keyframes draw-line { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes draw-line-back { from { stroke-dashoffset: calc(var(--len, 400) * -1); } to { stroke-dashoffset: 0; } }

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

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .card { margin: 1.5rem 0 0; }
  .faq, .book { grid-template-columns: minmax(0, 1fr); }
  .pack { position: static; }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero {
    display: grid;
    grid-template-columns: var(--pad-x) minmax(0, 1.15fr) minmax(0, 1fr) var(--pad-x);
    column-gap: 1.5rem;
    align-content: start;
    padding: clamp(2.5rem, 6vh, 4rem) 0 calc(var(--land) * .85);
  }
  .hero__copy { display: contents; }
  .kicker, .hero__title, .hero__lede, .hero__ctas { position: relative; z-index: 2; }
  .kicker, .hero__title { grid-column: 2 / 4; }
  .hero__lede { grid-column: 2; grid-row: 3; }
  .hero__ctas { grid-column: 2; grid-row: 4; align-self: start; }
  .hero__sky { position: relative; top: auto; right: auto; grid-column: 3; grid-row: 3 / span 2; justify-self: end; width: 92%; margin: 1.2rem 0 0; }
}

@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero__copy { order: -1; padding-top: clamp(2rem, 6vw, 3.5rem); padding-bottom: 0; }
  .hero__sky { position: relative; top: auto; right: auto; width: min(72%, 460px); margin: 1.5rem var(--gut) calc(var(--land) * .55) auto; }
}

@media (max-width: 960px) {
  .pitches { grid-template-columns: minmax(0, 1fr); }
  .plan { position: static; max-width: 36rem; }
}

@media (max-width: 899px) {
  .night__pano { display: none; }
  .night__stage { margin-top: 2.5rem; padding: 0; }
  .night__steps {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--gut) 0 calc(var(--gut) + 3rem);
  }
  .night__steps::before {
    content: "";
    position: absolute;
    left: calc(var(--gut) + .55rem);
    top: .6rem;
    bottom: .4rem;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(#3a5590, #16225a 16%, #080d24 40%, #070b20 66%, #1b2c62 84%, #a9c0da 96%, #f3d2a2);
  }
  .step { padding: 0 0 2.4rem; text-align: left; }
  .step:last-child { padding-bottom: 0; }
  .step::before {
    top: .75rem;
    left: calc(-3rem + .55rem - 3px);
    width: 12px;
    height: 12px;
    border: 2px solid var(--night);
    border-radius: 50%;
    background: var(--star);
    box-shadow: 0 0 10px rgba(159, 234, 242, .7);
  }
  .step p { margin-left: 0; }
  .night__next { justify-content: flex-start; padding-left: calc(var(--gut) + 3rem); }
  .night__head { padding-left: var(--gut); }

  .chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter__clock {
    grid-row: auto;
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.4rem;
    font-size: 1.5rem;
  }
  .chapter__clock .ampm { font-size: .56em; }
  .chapter__clock::after { flex: 1; width: auto; height: 1px; margin: 0; background: linear-gradient(90deg, var(--star), rgba(159, 234, 242, 0)); }
  .chapter__main, .guide { grid-column: 1; }
}

@media (max-width: 700px) {
  .top { padding-block: 1rem; }
  .nav ul { gap: .1rem 1.1rem; }
  .nav a { font-size: .7rem; letter-spacing: .18em; }

  .hero { --land: 190px; min-height: 0; }
  .hero__sky { width: 94%; margin: 1.25rem 0 calc(var(--land) * .5) auto; }
  .hero__copy { padding: 1.6rem var(--gut) 0; }
  .kicker { margin: 0 0 1.3rem; letter-spacing: .24em; }
  .kicker__part { display: block; }
  .kicker__dot { display: none; }
  .hero__title { font-size: clamp(2rem, 10.2vw, 3rem); letter-spacing: .06em; line-height: 1; }
  .hl { grid-template-columns: minmax(0, 1fr); }
  .hl::before { margin: .75rem 0 .2rem; font-size: .95rem; }
  .hl--1::before { margin-top: 0; }
  .hero__lede { margin: 1.6rem 0 0; }
  .hero__ctas { margin: 1.8rem 0 0; }

  .adapt__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walk__cols, .rules__list { grid-template-columns: minmax(0, 1fr); }
  .walk__big { font-size: 1.45rem; }

  .pitch { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .pitch__price { grid-column: 2; grid-row: auto; text-align: left; display: flex; align-items: baseline; gap: .5rem; }
  .pitch__amount { display: inline; font-size: 1.9rem; }
  .pitch > .pitch__num { grid-row: 1; }
  .pitch__pick { grid-column: 2; }

  .seasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .season { padding: .55rem .8rem .55rem .6rem; column-gap: .6rem; border-radius: 14px; }
  .season__icon { width: 2.6rem; height: 1.7rem; }
  .season__name { font-size: .72rem; letter-spacing: .18em; }
  .season__months { font-size: .8rem; }
  .chart { width: min(100%, calc(64vh * var(--ar, 1.4))); }
  .tg-label { display: none; }
  .panel__hedge { height: 3rem; margin-top: -1.5rem; }
  .ln { stroke-width: 4.5; }
  .of-js .ln { stroke-width: 3.6; stroke-dasharray: 2.5 17; }
  .st { width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; }
  .st::before { inset: .3rem; }
  .st__name { font-size: .64rem; letter-spacing: .1em; }
  .card { padding: 1.4rem 1.2rem; }

  .btn { padding-inline: 1.4rem; letter-spacing: .14em; }
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .form__foot .btn { width: 100%; }
  .foot__in { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

@media (max-width: 520px) {
  .nav li:nth-child(3), .nav li:nth-child(5) { display: none; }
}

@media (max-width: 360px) {
  .nav li:nth-child(2) { display: none; }
  .brand__name { letter-spacing: .32em; }
  .seasons { grid-template-columns: minmax(0, 1fr); }
}