/* The Holy Earth Foundation's look for the arrival kit, shared by the entry portal and the AstroLog.
   Load after arrival.css and before the site's own CSS (thef.css on the portal, global.css in the
   AstroLog), which keeps each site's layout.

   This file is now the one home of THEF's palette, "the canopy at first light": Canopy (dark, the
   default) is the forest before dawn, deep canopy green with fireflies; Morning mist (light) is the
   same forest an hour later. The two vine strands are --sky (A Course in Miracles, the Eagle) and
   --gold (plant medicine, the Condor); where they meet is --glow (single-mindedness, the Barn Owl).
   Tokens sit on attribute selectors so a splash card can preview a mode by carrying data-theme. */

:root,
[data-theme="dark"] {
  --canopy: #0f2420;
  --canopy-2: #143029;
  --panel: rgba(22, 52, 45, 0.62);
  --panel-solid: #16342d;
  --mist: #eaf1e4;
  --moss: #a3b8ac;
  --faint: #6f877c;
  --sky: #8ed1f2;
  --gold: #e9b949;
  --leaf: #86c98f;
  --river: #48b5a8;
  --glow: #ffe3a1;
  --line: rgba(142, 209, 242, 0.14);
  --line-strong: rgba(233, 185, 73, 0.32);
  --shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.7);
  --firefly: #e2f0a8;
  --spark: #f2c14e;
  /* the arrival kit's tokens, from the palette above */
  --background: #0f2420;
  --foreground: #eaf1e4;
  --heading: #f4f8ee;
  --muted: #a3b8ac;
  --surface: #16342d;
  --surface-muted: #1d3f37;
  --border: #2d554b;
  --accent: #e9b949;
  --accent-strong: #f3cb6a;
  --on-accent: #10261f;
  --arr-backdrop: rgba(6, 17, 14, 0.62);
  --thef-vine: linear-gradient(100deg, #8ed1f2 0%, #c5e6f7 26%, #ffe3a1 48%, #e9b949 72%, #86c98f 100%);
  --thef-braid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4C6 0 18 0 24 4S42 8 48 4' fill='none' stroke='%238ed1f2' stroke-width='1.4'/%3E%3Cpath d='M0 4C6 8 18 8 24 4S42 0 48 4' fill='none' stroke='%23e9b949' stroke-width='1.4'/%3E%3C/svg%3E");
  color-scheme: dark;
}

[data-theme="light"] {
  --canopy: #edf5f1;
  --canopy-2: #e2eee8;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --mist: #12312a;
  --moss: #46665a;
  --faint: #7b968a;
  --sky: #0b6a96;
  --gold: #8f600a;
  --leaf: #2e7a44;
  --river: #13786c;
  --glow: #b07d12;
  --line: rgba(18, 49, 42, 0.13);
  --line-strong: rgba(18, 49, 42, 0.26);
  --shadow: 0 22px 50px -30px rgba(18, 49, 42, 0.45);
  --firefly: #1f5c4a;
  --spark: #b7791f;
  --background: #edf5f1;
  --foreground: #12312a;
  --heading: #12312a;
  --muted: #46665a;
  --surface: #ffffff;
  --surface-muted: #e2eee8;
  --border: #c8dbd1;
  --accent: #8f600a;
  --accent-strong: #744d06;
  --on-accent: #ffffff;
  --arr-backdrop: rgba(18, 49, 42, 0.32);
  --thef-vine: linear-gradient(100deg, #0b6a96 0%, #13786c 30%, #b07d12 56%, #8f600a 76%, #2e7a44 100%);
  --thef-braid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4C6 0 18 0 24 4S42 8 48 4' fill='none' stroke='%230b6a96' stroke-width='1.4'/%3E%3Cpath d='M0 4C6 8 18 8 24 4S42 0 48 4' fill='none' stroke='%238f600a' stroke-width='1.4'/%3E%3C/svg%3E");
  color-scheme: light;
}

:root {
  --font-heading: "PapyrusStd", "Literata", Georgia, serif;
  --font-body: "Literata", "Iowan Old Style", Georgia, serif;
  --heading-settings: normal;
  --arr-radius: 18px;
}

/* ── THEF's shapes: soft panels, pill buttons, round swatches ──────────────────────────────── */
.arr-btn.arr-shape,
.arr-chip.arr-shape,
.arr-x.arr-shape,
.arr-tip .arr-kbd-big.arr-shape {
  border-radius: 999px;
}
.arr-swatch.arr-shape,
.arr-dot.arr-shape {
  border-radius: 50%;
}
.arr-card-ink {
  background: var(--thef-vine);
  background-size: 220% 100%;
}
.arr-card:has(:checked) .arr-frame {
  background: var(--thef-vine);
}
@media (min-width: 761px) {
  .arr-splash .arr-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.arr-seg-opt > span {
  white-space: nowrap;
}
.arr-steps button {
  overflow-wrap: anywhere;
}
/* PapyrusStd is a display face: a touch larger, never bold. */
.arr-dialog .arr-title,
.arr-card-name {
  font-weight: 400;
  letter-spacing: 0.01em;
}
.arr-dialog .arr-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}

/* ── the flower: the guide's progress glyph opens one petal per step (nine), and the step dots and
      the drawer's check are leaves ─────────────────────────────────────────────────────────── */
.arr-glyph {
  clip-path: polygon(50% 0%, 52.9% 0.9%, 55.4% 3.7%, 57.4% 7.9%, 58.7% 13.3%, 59.2% 19.2%, 59.2% 24.6%, 62.8% 20.4%, 66.9% 16.3%, 71.4% 13%, 75.6% 11%, 79.3% 10.6%, 82.1% 11.7%, 83.7% 14.3%, 83.9% 18%, 82.7% 22.5%, 80.3% 27.5%, 76.9% 32.3%, 73.4% 36.5%, 78.8% 35.5%, 84.6% 35.1%, 90.1% 35.4%, 94.7% 36.6%, 97.8% 38.7%, 99.2% 41.3%, 98.8% 44.3%, 96.6% 47.3%, 92.7% 50%, 87.7% 52.2%, 82% 53.7%, 76.6% 54.7%, 81.3% 57.4%, 86.1% 60.8%, 90.1% 64.6%, 92.8% 68.5%, 93.9% 72.1%, 93.3% 75%, 91.1% 77%, 87.4% 77.8%, 82.7% 77.5%, 77.4% 75.9%, 72.1% 73.4%, 67.4% 70.7%, 69.2% 75.8%, 70.7% 81.5%, 71.4% 87%, 70.9% 91.7%, 69.5% 95.1%, 67.1% 97%, 64.1% 97.1%, 60.8% 95.4%, 57.4% 92.1%, 54.4% 87.5%, 51.9% 82.1%, 50% 77%, 48.1% 82.1%, 45.6% 87.5%, 42.6% 92.1%, 39.2% 95.4%, 35.9% 97.1%, 32.9% 97%, 30.5% 95.1%, 29.1% 91.7%, 28.6% 87%, 29.3% 81.5%, 30.8% 75.8%, 32.6% 70.7%, 27.9% 73.4%, 22.6% 75.9%, 17.3% 77.5%, 12.6% 77.8%, 8.9% 77%, 6.7% 75%, 6.1% 72.1%, 7.2% 68.5%, 9.9% 64.6%, 13.9% 60.8%, 18.7% 57.4%, 23.4% 54.7%, 18% 53.7%, 12.3% 52.2%, 7.3% 50%, 3.4% 47.3%, 1.2% 44.3%, 0.8% 41.3%, 2.2% 38.7%, 5.3% 36.6%, 9.9% 35.4%, 15.4% 35.1%, 21.2% 35.5%, 26.6% 36.5%, 23.1% 32.3%, 19.7% 27.5%, 17.3% 22.5%, 16.1% 18%, 16.3% 14.3%, 17.9% 11.7%, 20.7% 10.6%, 24.4% 11%, 28.6% 13%, 33.1% 16.3%, 37.2% 20.4%, 40.8% 24.6%, 40.8% 19.2%, 41.3% 13.3%, 42.6% 7.9%, 44.6% 3.7%, 47.1% 0.9%);
}
.arr-glyph-wrap {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 40%, transparent));
}
.arr-step-dot,
.arr-opt:has(:checked)::after {
  width: 13px;
  height: 13px;
  border-radius: 0 75% 0 75%;
  transform: rotate(-12deg);
}
.arr-steps [aria-current="step"] .arr-step-dot {
  transform: rotate(-12deg) scale(1.3);
}

/* ── the twin vine as a rule: two strands braiding, under the guide's head, over its foot, and
      as the drawer's divider ─────────────────────────────────────────────────────────────── */
.arr-rule {
  height: 8px;
  border: 0;
  background: var(--thef-braid) center / 48px 8px repeat-x;
  opacity: 0.75;
}
.arr-guide-head {
  border-bottom: 0;
  background: var(--thef-braid) bottom left / 48px 8px repeat-x;
  padding-bottom: calc(1rem + 6px);
}
.arr-guide-foot {
  border-top: 0;
  background: var(--thef-braid) top left / 48px 8px repeat-x;
}
.arr-tip .arr-kbd-big {
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--glow) 80%, transparent);
}

/* ── THEF's header (.site-header, kit 1.2): one row at every width. The brand, the kit's navbar
      (it folds into "More", then into a Menu button below 1100px) and the kit's tools. The kit
      hides the tools' word labels while its nav is on the page; the drawer stays icon-only here at
      every width (it keeps its aria-label). ─────────────────────────────────────────────────── */
.site-header arrival-controls {
  flex: none;
}
.site-header [data-arr-drawer] .arr-chip-label {
  display: none;
}
/* The current page's link, and the bespoke network card, take the twin vine's gold and sky. */
.site-header .arr-nav-a[aria-current="page"] .ph,
.site-header .arr-nav-a.is-current .ph {
  color: var(--gold);
}
.arr-plat-bespoke {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 60%),
    radial-gradient(80% 90% at 50% 120%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 60%),
    var(--surface-muted);
}

/* ── motion: Breeze is the forest as it's always been; Bloom quickens it; Still stops it (the
      kit's own rule plays every one-time growth straight to its end) ───────────────────────── */
[data-motion="vivid"] .vine .strand,
[data-motion="vivid"] .vine .strand-rib {
  animation-duration: 1.9s;
}

/* ── reading mode: the fireflies all but fade, the hero vine rests ──────────────────────────── */
:root[data-reading="on"] #starfield-canvas {
  opacity: 0.2;
}
:root[data-reading="on"] body {
  background: var(--canopy);
}
:root[data-reading="on"] .vine-crown {
  opacity: 0.4;
}

/* ── more contrast: the canopy's own tokens follow the kit's, and the fireflies go quiet ───── */
html[data-contrast="more"] {
  --moss: color-mix(in srgb, var(--foreground) 86%, var(--background));
  --faint: color-mix(in srgb, var(--foreground) 70%, var(--background));
  --line: color-mix(in srgb, var(--foreground) 30%, transparent);
  --line-strong: color-mix(in srgb, var(--foreground) 50%, transparent);
  --panel: var(--panel-solid);
}
html[data-contrast="more"] body {
  background: var(--canopy);
}
html[data-contrast="more"] #starfield-canvas {
  opacity: 0.4;
}