:root {
  color-scheme: light;
  --canvas: #f5f3ed;
  --canvas-deep: #ece9df;
  --surface: rgba(255, 255, 252, .72);
  --surface-strong: #fffefa;
  --surface-dark: #171a18;
  --ink: #171916;
  --ink-soft: #343932;
  --muted: #687069;
  --muted-on-dark: #aab3aa;
  --line: rgba(23, 25, 22, .12);
  --line-strong: rgba(23, 25, 22, .2);
  --accent: #88671f;
  --accent-bright: #dfc27a;
  --accent-soft: #e9dfc5;
  --moss: #617b6c;
  --moss-soft: #dfe8e1;
  --blue: #7897a4;
  --shadow-soft: 0 24px 80px rgba(41, 45, 36, .08);
  --shadow-card: 0 12px 32px rgba(41, 45, 36, .05);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --radius-large: 34px;
  --radius-medium: 22px;
  --header-height: 82px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0f1210;
  --canvas-deep: #171b18;
  --surface: rgba(27, 32, 28, .76);
  --surface-strong: #1b201c;
  --surface-dark: #080a09;
  --ink: #f1efe7;
  --ink-soft: #d1d7cf;
  --muted: #aab4aa;
  --muted-on-dark: #aeb9b0;
  --line: rgba(240, 241, 230, .13);
  --line-strong: rgba(240, 241, 230, .24);
  --accent: #e1bf70;
  --accent-bright: #f1d58b;
  --accent-soft: #55492d;
  --moss: #9eb9a4;
  --moss-soft: #2a392f;
  --blue: #9bb9c3;
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, .24);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, .14);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 24px);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, [role="button"] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a { color: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  transform: translateY(-180%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

.ambient, .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient { z-index: -3; filter: blur(10px); opacity: .9; }
.ambient-one { background: radial-gradient(600px 500px at 86% -6%, rgba(223, 194, 122, .24), transparent 70%); }
.ambient-two { background: radial-gradient(640px 560px at -10% 42%, rgba(120, 151, 164, .15), transparent 69%); }
.grain { z-index: -2; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.section-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.section { padding: 148px 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: calc(16px + env(safe-area-inset-top)) 0 16px;
}

.site-header::after { content: ""; position: absolute; inset: 100% 0 auto; height: 22px; opacity: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 48%, transparent), transparent); transition: opacity 180ms ease-out; }
.site-header.scrolled::after { opacity: 1; }
.site-header.scrolled .nav-shell { min-height: 52px; padding-block: 6px; background: var(--surface-strong); background: color-mix(in srgb, var(--surface-strong) 84%, transparent); box-shadow: 0 15px 38px rgba(28, 32, 26, .08); transform: scale(.985); }

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  min-height: 56px;
  margin: 0 auto;
  padding: 8px 10px 8px 16px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: 0 12px 32px rgba(28, 32, 26, .05);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  transition: min-height 180ms var(--ease-out), padding 180ms var(--ease-out), transform 180ms var(--ease-out), background-color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.scroll-progress { position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; overflow: hidden; opacity: .8; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; border: 1px solid var(--accent); border-radius: 50% 8px 50% 8px; transform: rotate(35deg); }
.brand-mark::before { width: 12px; height: 17px; left: 4px; top: 4px; }
.brand-mark::after { width: 12px; height: 17px; right: 4px; top: 4px; transform: rotate(-35deg); }
.brand-mark span { width: 3px; height: 11px; border-radius: 3px; background: var(--ink); }
.brand-copy { display: grid; gap: 0; line-height: 1; }
.brand-copy strong { font-size: .88rem; font-weight: 650; letter-spacing: -.02em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: .55rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 18px; }
.site-nav a { min-height: 44px; padding: 11px 12px; border-radius: 999px; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; transition: color 160ms ease-out, background-color 160ms ease-out, transform 100ms ease-out; }
.site-nav a:focus-visible { background: var(--accent-soft); color: var(--ink); }
.site-nav a[aria-current="location"] { background: var(--accent-soft); color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 6px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 100ms ease-out; }
.icon-button:active { transform: scale(.94); }
.brand:focus-visible, .scroll-cue:focus-visible, .icon-button:focus-visible, .button:focus-visible, .text-link:focus-visible, .footer-top:focus-visible, .round-arrow:focus-visible, .site-nav a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 4px; }
.icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.menu-toggle { display: none; border-radius: 12px; }
.menu-toggle span { width: 16px; height: 1.5px; background: currentColor; transition: transform 160ms var(--ease-out), opacity 160ms ease-out; }
.menu-toggle span + span { margin-top: 4px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero { position: relative; display: grid; align-items: center; min-height: max(720px, 100svh); padding-top: calc(var(--header-height) + 64px); padding-bottom: 86px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, .9fr); align-items: center; gap: clamp(56px, 9vw, 130px); }
.hero-copy { position: relative; z-index: 2; max-width: 650px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 5px color-mix(in srgb, var(--moss) 13%, transparent); }
.hero h1, h2, h3, .stage-card strong { font-family: Iowan Old Style, Baskerville, "Times New Roman", ui-serif, Georgia, serif; font-weight: 500; font-optical-sizing: auto; }
.hero h1 { max-width: 720px; margin: 0; font-size: clamp(4.4rem, 9.7vw, 8.1rem); letter-spacing: -.045em; line-height: .92; text-wrap: balance; }
.hero h1 em, h2 em { color: var(--accent); font-style: italic; font-weight: 400; }
.hero-intro { max-width: 510px; margin: 30px 0 0; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.17rem); line-height: 1.68; letter-spacing: -.01em; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font-size: .79rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; transition: transform 120ms ease-out, box-shadow 180ms ease-out, background-color 160ms ease-out, color 160ms ease-out; }
.button span { font-size: 1rem; line-height: 0; }
.button:active { transform: scale(.97); }
.button-primary { background: var(--ink); color: var(--canvas); box-shadow: 0 9px 24px rgba(23, 25, 22, .16); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: .81rem; font-weight: 700; text-decoration: none; }
.text-link span { color: var(--accent); font-size: 1.1rem; transition: transform 160ms ease-out; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 74px; color: var(--muted); font-size: .72rem; letter-spacing: .02em; }
.hero-meta strong { color: var(--ink); font-weight: 700; }
.meta-rule { width: 32px; height: 1px; background: var(--line-strong); }

.hero-stage { position: relative; min-height: 535px; isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; inset: 8% -4% 2% 5%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 25%, transparent), transparent 68%); filter: blur(18px); }
.stage-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 50%; transform: rotate(-22deg); pointer-events: none; }
.orbit-one { inset: 4% 1% 9% 1%; }
.orbit-two { inset: 15% 11% 18% 10%; transform: rotate(42deg); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.stage-label { position: absolute; top: 1%; left: 10%; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stage-label span:not(.live-dot) { color: var(--line-strong); }
.live-dot { width: 6px; height: 6px; }
.stage-card { position: absolute; inset: 12% 7% 9%; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 22px 24px 24px; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius: var(--radius-large); background: var(--surface-strong); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--surface) 66%, transparent)); box-shadow: var(--shadow-soft); backdrop-filter: blur(26px) saturate(115%); -webkit-backdrop-filter: blur(26px) saturate(115%); }
.stage-card-top, .stage-card-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stage-card-top span:last-child { color: var(--accent); }
.butterfly-scene { position: relative; display: grid; place-items: center; min-height: 295px; }
.butterfly-shadow { position: absolute; width: 210px; height: 32px; bottom: 24%; border-radius: 50%; background: rgba(50, 68, 55, .12); filter: blur(17px); transform: rotate(-5deg); }
.hero-butterfly { position: relative; width: min(88%, 330px); overflow: visible; filter: drop-shadow(0 24px 15px rgba(47, 64, 54, .16)); transform: rotate(-4deg); }
.wing-group { transform-box: fill-box; }
.wing-group-left { transform-origin: center right; }
.wing-group-right { transform-origin: center left; }
.wing { stroke: rgba(255, 255, 255, .48); stroke-width: 1.2; stroke-linejoin: round; }
.wing-detail { fill: none; stroke: rgba(255, 255, 255, .48); stroke-linecap: round; stroke-width: 1.1; }
.butterfly-body, .butterfly-antenna { fill: none; stroke: #26332d; stroke-linecap: round; stroke-width: 4; }
.butterfly-antenna { stroke-width: 1.5; }
.wing-speck { fill: rgba(255, 255, 255, .72); }
.stage-card-bottom { align-items: end; padding-top: 18px; border-top: 1px solid var(--line); }
.stage-caption { display: block; margin-bottom: 3px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: none; }
.stage-card-bottom strong { display: block; color: var(--ink); font-size: 1.25rem; font-style: italic; font-weight: 400; letter-spacing: -.03em; text-transform: none; }
.round-arrow { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 1rem; text-decoration: none; transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out; }
.scroll-cue { position: absolute; bottom: 19px; left: 50%; display: grid; justify-items: center; gap: 11px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-line { position: relative; display: block; width: 1px; height: 39px; overflow: hidden; background: var(--line-strong); }

.section-heading { max-width: 700px; margin-bottom: 62px; }
.section-index { margin: 0 0 20px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-index span { margin: 0 4px; color: var(--line-strong); }
h2 { max-width: 760px; margin: 0; color: var(--ink); font-size: clamp(3rem, 7vw, 6.1rem); letter-spacing: -.04em; line-height: .97; text-wrap: balance; }
.section-heading > p:last-child { max-width: 520px; margin: 28px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }

.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insight-card { display: flex; min-height: 340px; flex-direction: column; padding: 26px 28px 28px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--surface-strong); box-shadow: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; }
.insight-card-accent { background: var(--surface-strong); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)), var(--surface)); }
.card-topline { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.card-icon { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 1.2rem; font-weight: 400; }
.insight-card h3 { margin: 58px 0 18px; color: var(--ink); font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.025em; line-height: 1.06; }
.insight-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.card-foot { margin-top: auto; padding-top: 26px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.cycle-section { overflow: hidden; background: var(--surface-dark); color: #f2f0e8; }
.cycle-section .section-heading { margin-bottom: 72px; }
.section-heading-inverse h2 { color: #f2f0e8; }
.section-heading-inverse > p:last-child { color: var(--muted-on-dark); }
.section-heading-inverse .section-index { color: var(--accent-bright); }
.cycle-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(242, 240, 232, .2); }
.cycle-step { position: relative; min-height: 240px; padding: 26px 22px 20px 0; border-right: 1px solid rgba(242, 240, 232, .2); }
.cycle-step + .cycle-step { padding-left: 22px; }
.cycle-step:last-child { border-right: 0; }
.cycle-number { color: var(--accent-bright); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.cycle-symbol { display: block; margin-top: 37px; color: var(--accent-bright); font-family: Georgia, serif; font-size: 3rem; line-height: .7; }
.cycle-step h3 { margin: 30px 0 10px; font-size: 2rem; letter-spacing: -.025em; line-height: 1.06; }
.cycle-step p { max-width: 180px; margin: 0; color: var(--muted-on-dark); font-size: .82rem; line-height: 1.6; }

.heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .6fr); align-items: end; gap: 40px; }
.heading-row > p:last-child { margin: 0 0 6px; }
.species-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.species-card { position: relative; overflow: hidden; min-height: 430px; padding: 16px 17px 22px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--surface-strong); box-shadow: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; }
.species-art { position: relative; display: grid; place-items: center; height: 250px; overflow: hidden; border-radius: 16px; background: var(--moss-soft); }
.species-halo { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: var(--accent-soft); filter: blur(3px); opacity: .78; }
.species-art svg { position: relative; width: 86%; overflow: visible; filter: drop-shadow(0 13px 9px rgba(29, 36, 31, .14)); transition: transform 260ms var(--ease-out); }
.species-wing { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.species-wing-inner { fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.species-vein, .species-sheen { fill: none; stroke: rgba(255, 255, 255, .62); stroke-linecap: round; stroke-width: 1.3; }
.species-sheen { stroke: rgba(255, 255, 255, .8); stroke-width: 3; opacity: .7; }
.species-tail { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 7; }
.species-eyespot { fill: #d9b54f; stroke: #4b6e77; stroke-width: 3; }
.species-eyespot-core { fill: #242d2a; }
.species-body { fill: none; stroke: #26332d; stroke-linecap: round; stroke-width: 4; }
.species-monarch .species-wing { fill: #c8744f; }
.species-morpho .species-art { background: #d9e6e7; }
.species-morpho .species-halo { background: #a6c6ce; }
.species-morpho .species-wing { fill: #5d8e9d; }
.species-swallowtail .species-art { background: #eee5bc; }
.species-swallowtail .species-halo { background: #f7d87d; }
.species-swallowtail .species-wing { fill: #cda84e; }
.species-peacock .species-art { background: #e4dce8; }
.species-peacock .species-halo { background: #c3a7d0; }
.species-peacock .species-wing { fill: #8b739b; }
.species-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.species-meta span:nth-child(2) { height: 1px; background: var(--line); }
.species-meta em { color: var(--accent); font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.species-card h3 { margin: 18px 0 7px; font-size: 1.8rem; letter-spacing: -.025em; line-height: 1.06; }
.species-card > p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.species-detail { display: block; margin-top: 8px; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

.notice-section { padding-top: 36px; }
.notice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.notice-card { display: flex; min-height: 330px; flex-direction: column; padding: 27px 28px 28px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--surface-strong); box-shadow: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; }
.notice-card-accent { background: var(--moss-soft); background: linear-gradient(145deg, color-mix(in srgb, var(--moss-soft) 72%, var(--surface)), var(--surface)); }
.notice-number { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.notice-card h3 { max-width: 260px; margin: 58px 0 17px; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.025em; line-height: 1.06; }
.notice-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.notice-prompt { margin-top: auto; padding-top: 26px; color: var(--moss); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.stay-section { padding-top: 56px; padding-bottom: 148px; }
.join-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); align-items: end; gap: clamp(46px, 10vw, 160px); padding: clamp(34px, 7vw, 82px); border-radius: var(--radius-large); background: linear-gradient(135deg, #222b24, #536554); color: #f5f3ed; box-shadow: var(--shadow-soft); }
.join-copy h2 { color: #f5f3ed; }
.join-copy > p:last-child { max-width: 360px; margin: 27px 0 0; color: rgba(245, 243, 237, .72); font-size: .93rem; line-height: 1.7; }
.join-copy .section-index { color: var(--accent-bright); }
.signup-form { display: grid; gap: 11px; }
.signup-form label { color: rgba(245, 243, 237, .82); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.signup-form label span { color: rgba(245, 243, 237, .56); font-weight: 600; }
.input-row { display: flex; gap: 9px; padding: 5px; border: 1px solid rgba(245, 243, 237, .28); border-radius: 999px; background: rgba(8, 10, 9, .17); transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.input-row:focus-within { border-color: rgba(245, 243, 237, .72); background: rgba(8, 10, 9, .27); }
.input-row:has(input[aria-invalid="true"]) { border-color: #f0a28e; }
.input-row input { min-width: 0; flex: 1; padding: 0 15px; border: 0; outline: 0; background: transparent; color: #f5f3ed; font-size: 1rem; }
.input-row input:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 4px; }
.input-row input::placeholder { color: rgba(245, 243, 237, .52); }
.button-light { flex-shrink: 0; min-height: 42px; background: #f5f3ed; color: #222b24; }
.form-note, .form-status { margin: 0; color: rgba(245, 243, 237, .62); font-size: .72rem; line-height: 1.5; }
.form-status { min-height: 1.05em; color: var(--accent-bright); font-weight: 700; }
.signup-form.is-complete .input-row { border-color: var(--accent-bright); }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 0; padding-bottom: 42px; color: var(--muted); }
.site-footer .brand { color: var(--ink); }
.site-footer p { margin: 0; font-size: .72rem; }
.footer-top { color: var(--muted); font-size: .72rem; font-weight: 700; text-decoration: none; }
.footer-top span { margin-left: 5px; color: var(--accent); }

/* Progressive enhancement: content is visible by default. JS adds this class only when it can reveal safely. */
html.js-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
html.js-ready .reveal.visible { opacity: 1; transform: none; }
html.js-ready .insight-card:nth-child(2), html.js-ready .species-card:nth-child(2), html.js-ready .cycle-step:nth-child(2) { transition-delay: 60ms; }
html.js-ready .insight-card:nth-child(3), html.js-ready .species-card:nth-child(3), html.js-ready .cycle-step:nth-child(3) { transition-delay: 120ms; }
html.js-ready .species-card:nth-child(4), html.js-ready .cycle-step:nth-child(4) { transition-delay: 180ms; }

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { background: var(--accent-soft); color: var(--ink); }
  .icon-button:hover { border-color: var(--line-strong); background: var(--accent-soft); }
  .round-arrow:hover { border-color: var(--line-strong); background: var(--accent-soft); }
  .button-primary:hover { box-shadow: 0 13px 32px rgba(23, 25, 22, .22); }
  .text-link:hover span { color: var(--ink); }
  .insight-card:hover, .species-card:hover, .notice-card:hover { border-color: var(--line-strong); background: var(--surface); }
  .insight-card:hover .card-icon { background: var(--accent-soft); }
  .button-primary:hover, .button-light:hover { transform: translateY(-2px); }
  .button-light:hover { background: var(--accent-bright); }
  .text-link:hover span { transform: translate(3px, 3px); }
}

.site-nav a:active, .text-link:active, .round-arrow:active, .footer-top:active { transform: scale(.98); }
.text-link, .footer-top { transition: color 160ms ease-out, transform 100ms ease-out; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 46px; }
  .hero h1 { font-size: clamp(4rem, 8vw, 6.5rem); }
  .stage-card { inset-inline: 0; }
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-card { padding-inline: 21px; }
  .species-grid { grid-template-columns: repeat(2, 1fr); }
  .species-card { min-height: 405px; }
}

@media (max-width: 760px) {
  :root { --header-height: 74px; }
  .section-shell { width: min(100% - 32px, 600px); }
  .site-header { padding: calc(10px + env(safe-area-inset-top)) 0 10px; }
  .nav-shell { width: calc(100% - 20px); padding-left: 13px; }
  .site-nav { position: absolute; inset: calc(100% + 8px) 0 auto; display: grid; gap: 4px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-strong); background: color-mix(in srgb, var(--surface-strong) 92%, transparent); box-shadow: var(--shadow-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  html.js-ready .site-nav { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: visibility 0s linear 180ms, opacity 160ms ease-out, transform 180ms var(--ease-out); }
  html.js-ready .site-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
  .site-nav a { min-height: 44px; padding: 13px 14px; font-size: .86rem; }
  .menu-toggle { display: grid; }
  .hero { min-height: auto; padding-top: 138px; padding-bottom: 82px; }
  .hero-grid { grid-template-columns: 1fr; gap: 62px; }
  .hero-copy { max-width: 560px; }
  .hero h1 { font-size: clamp(4.1rem, 16vw, 7rem); }
  .hero-meta { margin-top: 46px; }
  .hero-stage { min-height: 470px; }
  .stage-card { inset: 11% 5% 10%; }
  .scroll-cue { display: none; }
  .section { padding: 102px 0; }
  .section-heading { margin-bottom: 42px; }
  .heading-row { grid-template-columns: 1fr; gap: 24px; }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card { min-height: 280px; }
  .insight-card h3 { margin-top: 44px; }
  .notice-section { padding-top: 12px; }
  .notice-grid { grid-template-columns: 1fr; }
  .notice-card { min-height: 280px; }
  .notice-card h3 { margin-top: 44px; }
  .cycle-track { grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(242, 240, 232, .2); }
  .cycle-step, .cycle-step + .cycle-step { min-height: 220px; padding: 24px 18px 24px 0; border-right: 1px solid rgba(242, 240, 232, .2); border-bottom: 1px solid rgba(242, 240, 232, .2); }
  .cycle-step:nth-child(even) { padding-left: 18px; border-right: 0; }
  .cycle-step:nth-last-child(-n+2) { border-bottom: 0; }
  .join-card { grid-template-columns: 1fr; gap: 38px; padding: 38px 28px; }
  .stay-section { padding-top: 12px; padding-bottom: 102px; }
}

@media (max-width: 460px) {
  .section-shell { width: min(100% - 28px, 390px); }
  .brand-copy small { display: none; }
  .hero { padding-top: 120px; }
  .hero h1 { font-size: clamp(3.75rem, 17vw, 5.3rem); }
  .hero-intro { font-size: .96rem; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 17px; }
  .button-primary { width: max-content; }
  .hero-meta { gap: 10px; font-size: .61rem; }
  .hero-stage { min-height: 405px; }
  .stage-card { inset: 13% 0 11%; padding: 17px 17px 18px; }
  .butterfly-scene { min-height: 230px; }
  h2 { font-size: clamp(2.9rem, 15vw, 4.5rem); }
  .section-heading > p:last-child { font-size: .93rem; }
  .species-grid { grid-template-columns: 1fr; }
  .species-card { min-height: 385px; }
  .species-art { height: 225px; }
  .input-row { align-items: stretch; flex-direction: column; padding: 8px; border-radius: 18px; }
  .input-row input { min-height: 44px; padding-inline: 10px; font-size: 16px; }
  .button-light { width: 100%; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 15px; }
}

@media (max-width: 760px) {
  .ambient { opacity: .62; filter: blur(6px); }
  .grain { opacity: .02; }
  .nav-shell, .site-nav, .stage-card { backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); }
  .stage-card-top { gap: 12px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body, .site-header::after, .nav-shell, .site-nav, .menu-toggle span, .text-link, .footer-top { transition: none !important; }
  .site-header.scrolled .nav-shell, .site-nav { transform: none !important; }
  html.js-ready .reveal { opacity: 1; transform: none; transition: none !important; }
  .button:active, .icon-button:active, .site-nav a:active, .round-arrow:active, .text-link:active, .footer-top:active, .round-arrow:hover, .insight-card:hover, .species-card:hover, .notice-card:hover, .button-primary:hover, .button-light:hover, .text-link:hover span, .species-card:hover .species-art svg { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-shell, .site-nav, .stage-card, .insight-card { background: var(--surface-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .grain, .ambient { display: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(23, 25, 22, .35); --line-strong: rgba(23, 25, 22, .55); --muted: #4b534c; }
  html[data-theme="dark"] { --line: rgba(240, 241, 230, .4); --line-strong: rgba(240, 241, 230, .6); --muted: #d8ded6; }
  .nav-shell, .insight-card, .species-card, .input-row { border-width: 2px; }
}