/*
 * Layout rules not covered by a Dash design token: page structure,
 * not colour/space/type values. Reference var(--dash-*) custom
 * properties from tokens.css/dash.css for every colour, spacing, and
 * type value — never a literal here.
 */

body {
  margin: 0;
  font-family: var(--dash-font-sans);
  background: var(--dash-color-ground);
  color: var(--dash-on-ground);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dash-space-4) var(--dash-space-6);
}

.masthead nav {
  display: flex;
  gap: var(--dash-space-5);
}

.hero,
.post {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--dash-space-7) var(--dash-space-6);
}

.site-footer {
  padding: var(--dash-space-6);
  text-align: center;
  color: var(--dash-on-ground-muted);
}

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

.home-body {
  overflow-x: hidden;
}

.landing {
  min-height: 100svh;
}

.home-frame {
  position: relative;
  min-height: max(100svh, calc(100vw * 2 / 3));
  overflow: hidden;
  background: var(--dash-color-ground);
}

.home-masthead {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  height: 10%;
  display: grid;
  grid-template-columns: 10% 1fr auto;
  align-items: center;
  gap: var(--dash-space-6);
  padding: 0 var(--dash-space-7);
}

.home-masthead::before,
.home-masthead::after {
  position: absolute;
  top: var(--dash-space-6);
  bottom: var(--dash-space-6);
  width: var(--dash-border-hairline);
  background: var(--dash-color-rule);
  content: "";
}

.home-masthead::before {
  left: 13%;
}

.home-masthead::after {
  right: 20%;
}

.home-wordmark {
  align-self: start;
  color: var(--dash-color-forest);
  font-size: var(--dash-text-display-md);
  font-weight: var(--dash-weight-semibold);
  line-height: var(--dash-leading-display-md);
  letter-spacing: var(--dash-tracking-tight);
  margin-top: var(--dash-space-4);
  text-decoration: none;
}

.home-masthead nav {
  display: flex;
  align-items: center;
  gap: var(--dash-space-7);
  padding-left: var(--dash-space-7);
}

.home-masthead nav a,
.home-masthead nav span {
  color: var(--dash-color-ink);
  font-size: var(--dash-text-base);
  text-decoration: none;
}

.home-masthead nav a:hover {
  color: var(--dash-color-active);
}

.home-cta,
.hero-cta {
  position: relative;
  cursor: default;
  text-decoration: none;
  user-select: none;
}

.home-cta:hover,
.hero-cta:hover {
  --_bd: var(--dash-color-forest);
  --_bg: var(--dash-color-forest);
}

.home-cta::after,
.hero-cta::after {
  position: absolute;
  right: var(--dash-space-4);
  width: var(--dash-space-2);
  height: var(--dash-space-2);
  border-top: var(--dash-border-default) solid currentcolor;
  border-right: var(--dash-border-default) solid currentcolor;
  content: "";
  transform: rotate(45deg);
}

.hero-statement {
  position: absolute;
  z-index: 2;
  top: 16%;
  left: 4%;
  width: 35%;
}

.hero-statement h1 {
  max-width: 7em;
  margin: 0;
  color: var(--dash-color-forest);
  font-size: var(--dash-text-display-xl);
  font-weight: var(--dash-weight-bold);
  line-height: var(--dash-leading-display-xl);
  letter-spacing: var(--dash-tracking-tight);
  text-wrap: balance;
}

.hero-statement p {
  max-width: 32rem;
  margin: var(--dash-space-8) 0 var(--dash-space-4);
  color: var(--dash-color-ink);
  font-size: var(--dash-text-xl);
  line-height: var(--dash-leading-xl);
}

.hero-divider {
  position: absolute;
  top: 12%;
  bottom: 34%;
  left: 41.5%;
  width: var(--dash-border-hairline);
  background: var(--dash-color-rule);
}

.journey {
  position: absolute;
  z-index: 2;
  top: 35%;
  right: 4%;
  left: 46%;
}

.journey::after {
  position: absolute;
  top: calc(var(--dash-space-7) / 2);
  right: calc(var(--dash-space-7) / 2);
  width: var(--dash-border-default);
  height: var(--dash-space-8);
  background: var(--dash-color-emerald);
  content: "";
}

.hero-horizon,
.next-horizon {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.hero-horizon {
  right: 0;
  bottom: 22%;
  width: 40%;
  height: 18%;
}

.hero-horizon span,
.next-horizon span {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: bottom right;
}

.hero-horizon span:nth-child(1) {
  background: var(--dash-color-active);
  clip-path: polygon(20% 100%, 100% 20%, 100% 100%);
}

.hero-horizon span:nth-child(2) {
  background: var(--dash-color-forest);
  clip-path: polygon(0 100%, 100% 38%, 100% 100%);
}

.hero-horizon span:nth-child(3) {
  background: var(--dash-color-forest);
  clip-path: polygon(48% 100%, 100% 0, 100% 100%);
  opacity: 0.82;
}

.next-preview {
  position: absolute;
  inset: 78% 0 0;
  padding: var(--dash-space-8) var(--dash-space-7) 0;
  background: var(--dash-color-paper);
}

.next-preview h2 {
  position: relative;
  z-index: 2;
  width: 62%;
  max-width: none;
  margin: 0;
  color: var(--dash-color-forest);
  font-size: var(--dash-text-display-md);
  line-height: var(--dash-leading-display-md);
  letter-spacing: var(--dash-tracking-tight);
}

.next-preview__rule {
  position: absolute;
  top: var(--dash-space-9);
  left: 65%;
  width: 12%;
  height: var(--dash-border-hairline);
  background: var(--dash-color-rule);
}

.next-horizon {
  right: 0;
  bottom: 0;
  left: 0;
  height: 46%;
}

.next-horizon span:nth-child(1) {
  background: var(--dash-color-sage);
  clip-path: polygon(0 62%, 36% 100%, 100% 58%, 100% 100%, 0 100%);
}

.next-horizon span:nth-child(2) {
  background: var(--dash-color-rule);
  clip-path: polygon(0 28%, 34% 74%, 58% 56%, 100% 88%, 100% 100%, 0 100%);
}

.next-horizon span:nth-child(3) {
  background: var(--dash-color-sage);
  clip-path: polygon(0 100%, 50% 46%, 100% 70%, 100% 100%);
  opacity: 0.64;
}

@media (max-width: 60rem) {
  .home-frame {
    min-height: auto;
    overflow: visible;
  }

  .home-masthead,
  .hero-statement,
  .journey,
  .next-preview {
    position: relative;
    inset: auto;
  }

  .home-masthead {
    height: auto;
    grid-template-columns: 1fr auto;
    padding: var(--dash-space-5) var(--dash-space-4);
  }

  .home-masthead::before,
  .home-masthead::after,
  .home-masthead nav,
  .hero-divider,
  .hero-horizon {
    display: none;
  }

  .home-wordmark {
    font-size: var(--dash-text-display-sm);
  }

  .hero-statement {
    width: auto;
    padding: var(--dash-space-8) var(--dash-space-4) var(--dash-space-7);
  }

  .hero-statement h1 {
    max-width: 8em;
    font-size: var(--dash-text-display-md);
  }

  .hero-statement p {
    max-width: 28rem;
    font-size: var(--dash-text-lg);
  }

  .journey {
    margin: 0 var(--dash-space-4) var(--dash-space-8);
  }

  .journey::after {
    display: none;
  }

  .next-preview {
    min-height: 18rem;
    padding: var(--dash-space-7) var(--dash-space-4) 0;
  }

  .next-preview h2 {
    font-size: var(--dash-text-display-sm);
  }

  .next-preview__rule {
    display: none;
  }

  .next-horizon {
    height: 36%;
  }
}

/* --------------------------------------------------------------- footer -- */

.landing-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--dash-space-8);
  align-items: center;
  padding: var(--dash-space-7);
  background: var(--dash-color-forest);
  color: var(--dash-on-forest-muted);
}

.landing-footer__brand {
  color: var(--dash-on-forest);
  font-size: var(--dash-text-display-sm);
  font-weight: var(--dash-weight-semibold);
  letter-spacing: var(--dash-tracking-tight);
  text-decoration: none;
}

.landing-footer p {
  margin: 0;
}

.landing-footer nav {
  display: flex;
  gap: var(--dash-space-5);
}

.landing-footer nav a {
  color: var(--dash-on-forest-muted);
  text-decoration: none;
}

.landing-footer nav a:hover {
  color: var(--dash-on-forest);
}

@media (max-width: 60rem) {
  .landing-footer {
    grid-template-columns: 1fr;
    gap: var(--dash-space-4);
  }
}