.sidebar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  width: var(--rail);
  height: 100vh;
  padding: var(--space-5) var(--space-4);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--brand-secondary) 28%, transparent), transparent 42%),
    var(--surface-raised);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
}

.sidebar-foot {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-5);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

body.is-collapsed .wordmark-lockup,
body.is-collapsed .nav-label,
body.is-collapsed .sidebar-foot {
  opacity: 0;
}

.page {
  margin-left: var(--rail);
  min-height: 100vh;
  max-width: calc(100% - var(--rail));
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  align-items: end;
  gap: var(--space-6);
  min-height: 100vh;
  padding: var(--space-7) 4vw 12vw;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--brand-secondary) 35%, transparent), transparent 46%),
    var(--surface-raised);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.hero-copy {
  display: contents;
}

.hero .advertorial {
  grid-column: 1;
  grid-row: 1;
}

.hero h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  margin: 0 0 var(--space-5);
  max-width: 16ch;
  font-size: var(--text-hero);
  font-weight: 800;
}

.hero .lead {
  grid-column: 1;
  grid-row: 3;
}

.hero .btn {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
}

.lead {
  max-width: 34ch;
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
}

.hero-figure {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 3 / span 2;
  height: min(58vh, 640px);
  margin-right: -6vw;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  overflow: hidden;
}

.hero-giant {
  top: -6vh;
  right: -6vw;
}

.notice {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.5fr minmax(16rem, 0.7fr);
  margin-top: -16vh;
  min-height: 42vh;
  pointer-events: none;
}

.notice-panel {
  grid-column: 2;
  pointer-events: auto;
  margin-right: 6vw;
  padding: var(--space-6);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface-raised) 30%, transparent), transparent 50%),
    var(--brand-secondary);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 88%);
}

.notice-panel strong {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.notice-panel p {
  color: var(--text-secondary);
}

.rituals {
  position: relative;
  z-index: 2;
  margin-top: -8vh;
  padding: 12vw 4vw 10vw;
  background:
    radial-gradient(ellipse at 12% 10%, color-mix(in srgb, var(--brand-secondary) 38%, transparent), transparent 42%),
    radial-gradient(ellipse at 90% 80%, color-mix(in srgb, var(--surface-raised) 40%, transparent), transparent 46%),
    var(--brand-primary);
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
}

.rituals-head {
  position: relative;
  margin-bottom: var(--space-8);
}

.rituals-head h2 {
  margin: 0;
  max-width: 9em;
  font-size: var(--text-h1);
  font-weight: 800;
}

.rituals-giant {
  top: -2vw;
  left: 28vw;
  font-size: 28vw;
}

.ritual {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--space-6);
  min-height: 70vh;
}

.ritual + .ritual {
  margin-top: 4vh;
}

.ritual h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h2);
  font-weight: 700;
}

.ritual p {
  max-width: 38ch;
  color: var(--text-secondary);
}

.index-no {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
}

.frame {
  min-height: 46vh;
  overflow: hidden;
}

.ritual-honey {
  grid-template-columns: 0.85fr 1.15fr;
}

.ritual-honey .frame {
  clip-path: polygon(0 10%, 100% 0, 100% 86%, 0 100%);
  min-height: 62vh;
}

.ritual-nuts {
  grid-template-columns: 1.2fr 0.8fr;
  width: 92%;
  margin-left: auto;
}

.ritual-nuts .frame {
  order: -1;
  clip-path: polygon(18% 0, 100% 12%, 78% 100%, 0 80%);
  margin-left: -8vw;
  min-height: 54vh;
}

.ritual-kin {
  grid-template-columns: 1.3fr 0.7fr;
  width: 110%;
  margin-left: -6vw;
}

.ritual-kin .frame {
  min-height: 68vh;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
}

.ritual-kin .ritual-copy {
  margin-left: -18%;
  padding: var(--space-6);
  background: var(--surface-raised);
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

.ritual-water {
  grid-template-columns: 0.45fr 0.7fr;
  width: 68%;
  margin-left: auto;
  min-height: 0;
}

.ritual-water .frame {
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 78%);
  min-height: 36vh;
}

.ritual-sleep {
  grid-template-columns: 0.7fr 1.1fr;
  width: 86%;
}

.ritual-sleep .frame {
  clip-path: polygon(0 0, 100% 16%, 86% 100%, 0 100%);
  min-height: 50vh;
}

.ritual-diet {
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.ritual-diet .ritual-copy {
  padding-top: 12vh;
  max-width: 28ch;
  justify-self: end;
}

.ritual-diet .frame {
  clip-path: polygon(12% 8%, 100% 0, 88% 100%, 0 92%);
  min-height: 64vh;
  margin-right: -4vw;
}

.slash {
  display: block;
  width: min(70%, 46rem);
  height: 4rem;
  margin: var(--space-6) 0 var(--space-4) auto;
  color: var(--text-primary);
}

.bridge {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  align-items: end;
  min-height: 48vh;
  padding: 8vw 8vw 12vw 4vw;
}

.bridge-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: 0.9;
}

.bridge-line {
  max-width: 22ch;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

.kit-shell {
  position: relative;
  z-index: 3;
  margin-top: -6vw;
  background: var(--text-primary);
}

.kit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: 12vw 5vw 8vw;
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--brand-primary) 55%, transparent), transparent 48%),
    var(--brand-secondary);
  clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 calc(100% - 5vw));
}

.kit-badge {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.kit h2 {
  margin: var(--space-4) 0 var(--space-4);
  font-size: var(--text-h2);
  font-weight: 800;
  max-width: 14em;
}

.kit-figure {
  height: min(72vh, 760px);
  margin-right: -8vw;
  margin-top: -10vh;
  overflow: hidden;
  clip-path: polygon(18% 0, 100% 8%, 82% 100%, 0 90%);
}

.site-footer {
  position: relative;
  z-index: 2;
  margin-left: var(--rail);
  max-width: calc(100% - var(--rail));
  margin-top: -4vw;
  padding: 10vw 6vw var(--space-7);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--brand-accent) 35%, transparent), transparent 40%),
    var(--surface-inverse);
  color: var(--text-inverse);
  clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}

.footer-word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(4.5rem, 14vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.footer-statement {
  max-width: 28ch;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.15;
}

.mast {
  position: relative;
  min-height: 62vh;
  padding: 14vh 8vw 16vh;
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--brand-secondary) 45%, transparent), transparent 46%),
    var(--surface-raised);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
  overflow: hidden;
}

.mast h1 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--text-h1);
  font-weight: 800;
}

.mast .meta {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mast-giant {
  right: -4vw;
  bottom: -8vh;
  font-size: 36vw;
}

.sheet {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  margin-top: -12vh;
  padding: 0 6vw var(--space-8);
}

.sheet .prose,
.sheet .facts {
  grid-column: 2;
  padding-top: 6vh;
}

@media (max-width: 1100px) {
  .hero,
  .ritual-honey,
  .ritual-nuts,
  .ritual-kin,
  .ritual-water,
  .ritual-sleep,
  .ritual-diet,
  .kit,
  .bridge,
  .notice,
  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    min-height: auto;
    align-items: start;
  }

  .hero .advertorial,
  .hero h1,
  .hero .lead,
  .hero .btn,
  .hero-figure {
    grid-column: 1;
    grid-row: auto;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-figure,
  .kit-figure,
  .ritual-nuts .frame,
  .ritual-kin,
  .ritual-water,
  .ritual-sleep,
  .ritual-diet .frame {
    margin: 0;
    width: 100%;
  }

  .hero-figure,
  .kit-figure {
    height: 58vh;
  }

  .ritual-kin .ritual-copy {
    margin-left: 0;
  }

  .ritual-water,
  .ritual-nuts,
  .ritual-sleep {
    width: 100%;
    margin-left: 0;
  }

  .notice {
    margin-top: -8vh;
    min-height: 0;
  }

  .notice-panel {
    grid-column: 1;
    margin: 0 8vw 0 auto;
    max-width: 28rem;
  }

  .sheet .prose,
  .sheet .facts {
    grid-column: 1;
  }

  .ritual-diet .ritual-copy {
    justify-self: start;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .nav-label,
  .wordmark-lockup,
  .sidebar-foot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .sidebar {
    padding: var(--space-4) var(--space-2);
  }

  .wordmark {
    min-height: 3rem;
    justify-content: center;
  }

  .nav-list a {
    justify-content: center;
    padding: 0;
  }

  .hero {
    padding: var(--space-6) var(--space-4) 18vw;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  }

  .hero-figure {
    height: 46vh;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  }

  .ritual,
  .ritual-honey,
  .ritual-kin {
    min-height: 0;
    width: 100%;
    margin-left: 0;
  }

  .frame,
  .ritual-honey .frame,
  .ritual-kin .frame,
  .ritual-diet .frame {
    min-height: 42vh;
  }

  .notice {
    margin-top: var(--space-6);
    min-height: 0;
  }

  .notice-panel {
    margin: 0;
    max-width: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
    padding: var(--space-5);
  }

  .hero,
  .rituals,
  .kit,
  .bridge,
  .site-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .kit {
    padding: 18vw var(--space-4) 16vw;
  }

  .kit-figure {
    height: 48vh;
  }

  .bridge {
    min-height: 0;
    padding: var(--space-7) var(--space-4);
  }

  .site-footer {
    padding: 18vw var(--space-4) var(--space-7);
  }

  .mast {
    min-height: 0;
    padding: var(--space-7) var(--space-4) 18vw;
  }
}

@media (min-width: 1600px) {
  .hero-copy {
    padding-left: 4vw;
  }

  .rituals,
  .kit,
  .site-footer,
  .bridge {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}