/* ==========================================================================
   sections.css — Components 1, 3, 4 and 5
   --------------------------------------------------------------------------
   Header, Accessible Index, Journal Preview and Footer. They are small and
   share the same card/list patterns, so they live together rather than in
   four files that would mostly repeat each other. Each block below is
   independently editable and nothing here is used by the Terrain component.

   THE CLIMB
   The page lightens as you descend, which is the one idea carried over from
   the Ascent direction. It is done with four static section backgrounds, so
   it costs nothing and needs no JavaScript. See README for the scroll-linked
   version if you want the transition to be continuous.
   ========================================================================== */

/* ==========================================================================
   Component 1: Header + menu
   ========================================================================== */

/* Fixed, so navigation is reachable from anywhere on a long page. It starts
   transparent over the landscape and gains a background once you scroll,
   which nav.js signals with data-sp-stuck. */
.sp-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 60;
  background: transparent;
  transition: background-color var(--sp-dur) var(--sp-ease),
              border-color var(--sp-dur) var(--sp-ease);
  border-bottom: 1px solid transparent;
}

.sp-header[data-sp-stuck] {
  background: rgba(7, 10, 20, 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--sp-c-line);
}

.sp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  padding-block: var(--sp-space-4);
}

.sp-header__brand {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
  color: var(--sp-c-bright);
  text-decoration: none;
}

.sp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-space-5);
}

.sp-header__link {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-2xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
  color: var(--sp-c-dim);
  text-decoration: none;
  transition: color var(--sp-dur-fast) var(--sp-ease);
}
.sp-header__link:hover { color: var(--sp-c-bright); }
.sp-header__link[data-sp-accent] { color: var(--sp-c-beacon); }

/* ---- Burger ---------------------------------------------------------- */

.sp-burger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--sp-space-2) 0;
  background: none;
  border: 0;
  color: var(--sp-c-bright);
  cursor: pointer;
  font: inherit;
  /* 44px minimum target without a visible box */
  min-height: 44px;
}

.sp-burger__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 14px;
}

.sp-burger__line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform var(--sp-dur) var(--sp-ease),
              opacity var(--sp-dur-fast) var(--sp-ease);
}

.sp-burger__text {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-2xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
}

[aria-expanded="true"] .sp-burger__line:first-child { transform: translateY(3.25px) rotate(45deg); }
[aria-expanded="true"] .sp-burger__line:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---- Menu panel ------------------------------------------------------ */

.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fully opaque. Nothing from the page behind should ever show through. */
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(230, 158, 98, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #05080F 0%, #0A1A2C 60%, #112A42 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--sp-dur) var(--sp-ease),
              transform var(--sp-dur) var(--sp-ease),
              visibility 0s linear var(--sp-dur);
}

.sp-menu[data-sp-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sp-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-space-9);
  gap: var(--sp-space-6);
}

.sp-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
}

.sp-menu__eyebrow { margin: 0; color: var(--sp-c-dim); }

.sp-menu__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--sp-c-line);
  border-radius: 50%;
  color: var(--sp-c-bright);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.sp-menu__close:hover { border-color: var(--sp-c-dim); }

.sp-menu__paths { display: grid; gap: 0; }

.sp-menu__path {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "num name" "num note";
  column-gap: var(--sp-space-4);
  align-items: baseline;
  padding-block: var(--sp-space-4);
  border-top: 1px solid var(--sp-c-line);
  text-decoration: none;
  transition: padding-inline-start var(--sp-dur) var(--sp-ease),
              background-color var(--sp-dur-fast) var(--sp-ease);
}
.sp-menu__path:last-child { border-bottom: 1px solid var(--sp-c-line); }
.sp-menu__path:hover,
.sp-menu__path:focus-visible {
  padding-inline-start: var(--sp-space-3);
  background: rgba(21, 49, 74, 0.3);
}

.sp-menu__num { grid-area: num; color: var(--sp-c-beacon); }
.sp-menu__path[data-sp-kind="lamp"] .sp-menu__num { color: var(--sp-c-lamp); }

.sp-menu__name {
  grid-area: name;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--sp-c-bright);
}

.sp-menu__note {
  grid-area: note;
  margin-top: var(--sp-space-1);
  font-size: var(--sp-text-sm);
  color: var(--sp-c-muted);
}

.sp-menu__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-3) var(--sp-space-6);
}
.sp-menu__more a {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
  color: var(--sp-c-dim);
  text-decoration: none;
  padding-block: var(--sp-space-2);
}
.sp-menu__more a:hover { color: var(--sp-c-bright); }
.sp-menu__more a[data-sp-accent] { color: var(--sp-c-beacon); text-transform: none; }

/* Stops the page behind scrolling while the panel is open. */
.sp-locked, .sp-locked body { overflow: hidden; }

@media (max-width: 479px) {
  /* The email and every path are in the panel, so the inline link is
     redundant at the width where space is tightest. */
  .sp-header__actions .sp-header__link { display: none; }
  .sp-menu__path { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

/* ==========================================================================
   Intro — a short first-person block under the landscape. The homepage does
   the job an about page would, so this is where it says who this is.
   ========================================================================== */

.sp-intro {
  background: linear-gradient(180deg, var(--sp-c-night) 0%, #081120 100%);
  padding-block: var(--sp-space-8);
}

.sp-intro__kicker { color: var(--sp-c-lamp); margin: 0 0 var(--sp-space-5); }

.sp-intro__lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sp-c-bright);
  text-wrap: balance;
}

.sp-intro__body {
  margin: var(--sp-space-5) 0 0;
  max-width: 58ch;
  font-size: var(--sp-text-md);
  line-height: 1.7;
  color: var(--sp-c-muted);
}
.sp-intro__body a {
  color: var(--sp-c-beacon);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 227, 200, 0.4);
}
.sp-intro__body a:hover { border-bottom-color: var(--sp-c-beacon); }

/* ==========================================================================
   Component 3: Accessible Index
   Same destinations as the terrain, as ordinary links. Works with
   JavaScript off. This is what search engines and screen readers rely on.
   ========================================================================== */

.sp-index {
  background: linear-gradient(180deg, #081120 0%, #0A1322 100%);
  border-top: 1px solid var(--sp-c-line);
  padding-block: var(--sp-space-8);
}

.sp-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-space-4);
}

.sp-index__item {
  display: block;
  padding: var(--sp-space-5);
  background: rgba(11, 19, 32, 0.8);
  border: 1px solid var(--sp-c-line);
  border-top: 2px solid var(--sp-c-beacon);
  text-decoration: none;
  transition: transform var(--sp-dur) var(--sp-ease),
              border-color var(--sp-dur) var(--sp-ease),
              background-color var(--sp-dur) var(--sp-ease);
}
.sp-index__item[data-sp-kind="lamp"] { border-top-color: var(--sp-c-lamp); }
.sp-index__item:hover {
  transform: translateY(-3px);
  background: rgba(16, 28, 46, 0.9);
  border-color: var(--sp-c-dim);
}
.sp-index__item:hover[data-sp-kind="lamp"] { border-top-color: var(--sp-c-lamp); }

.sp-index__kicker {
  display: block;
  color: var(--sp-c-beacon);
  margin-bottom: var(--sp-space-3);
}
.sp-index__item[data-sp-kind="lamp"] .sp-index__kicker { color: var(--sp-c-lamp); }

.sp-index__title {
  margin: 0;
  font-size: var(--sp-text-md);
  font-weight: 300;
  line-height: 1.35;
  color: var(--sp-c-bright);
}

.sp-index__note {
  margin: var(--sp-space-5) 0 0;
  font-size: var(--sp-text-sm);
  color: var(--sp-c-faint);
}

/* ==========================================================================
   Component 4: Journal Preview
   Static mockup here. In WordPress this block is replaced by an Elementor
   Loop Grid pointing at the existing posts; the card markup below is the
   model for the loop item so the look survives the swap.
   ========================================================================== */

.sp-journal {
  background: linear-gradient(180deg, #0A1322 0%, #15293D 100%);
  padding-block: var(--sp-space-8);
}

.sp-journal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-space-5);
}

.sp-journal__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
  text-decoration: none;
  padding-top: var(--sp-space-4);
  border-top: 1px solid var(--sp-c-line);
  transition: border-color var(--sp-dur) var(--sp-ease);
}
.sp-journal__card:hover { border-top-color: var(--sp-c-lamp); }

.sp-journal__meta { color: var(--sp-c-faint); }

.sp-journal__title {
  margin: 0;
  font-size: var(--sp-text-md);
  font-weight: 300;
  line-height: 1.35;
  color: var(--sp-c-bright);
}

.sp-journal__excerpt {
  margin: 0;
  font-size: var(--sp-text-sm);
  line-height: 1.6;
  color: var(--sp-c-muted);
}

.sp-journal__more {
  display: inline-block;
  margin-top: var(--sp-space-6);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-2xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
  color: var(--sp-c-lamp);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.sp-journal__more:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   Component 5: Footer — the top of the climb, warmest and lightest
   ========================================================================== */

.sp-footer {
  background: linear-gradient(180deg, #15293D 0%, #2B4256 58%, #4A4F50 100%);
  padding-block: var(--sp-space-9) var(--sp-space-6);
}

.sp-footer__invite {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-c-bright);
  text-wrap: balance;
}

.sp-footer__email {
  display: inline-block;
  margin-top: var(--sp-space-6);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  letter-spacing: 0.1em;
  color: var(--sp-c-bright);
  text-decoration: none;
  border-bottom: 2px solid var(--sp-c-lamp);
  padding-bottom: var(--sp-space-1);
}
.sp-footer__email:hover { border-bottom-color: var(--sp-c-bright); }

.sp-footer__map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-space-6);
  margin-top: var(--sp-space-9);
}

.sp-footer__col { display: grid; gap: var(--sp-space-2); align-content: start; }

.sp-footer__coltitle {
  margin: 0 0 var(--sp-space-2);
  color: rgba(244, 249, 253, 0.6);
}

.sp-footer__col a {
  font-size: var(--sp-text-sm);
  color: #EDF2F5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  justify-self: start;
  padding-bottom: 1px;
}
.sp-footer__col a:hover { border-bottom-color: currentColor; }

.sp-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3) var(--sp-space-5);
  margin-top: var(--sp-space-8);
  padding-top: var(--sp-space-5);
  border-top: 1px solid rgba(244, 249, 253, 0.18);
  color: #E3EAEE;
}

.sp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2) var(--sp-space-5);
}
.sp-footer__links a { text-decoration: none; }
.sp-footer__links a:hover { color: #FFFFFF; }