@font-face {
  font-family: Geist;
  src: url(geist.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url(geist-mono.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #08090c;
  --paper: #f4f3ee;
  --muted: #b3b3bb;
  --accent: #d3ff7c;
  --rule: #ffffff29;
  --gutter: clamp(1.25rem, 4.7vw, 5rem);
  --max: 100rem;
  font-family: Geist, "Helvetica Neue", Arial, sans-serif;
  background: var(--ink);
  color: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, p, ul { margin: 0; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, summary { cursor: pointer; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
::selection { color: var(--ink); background: var(--accent); }

.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.micro {
  font: 480 0.7rem/1.45 "Geist Mono", ui-monospace, monospace;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.skip {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: .7rem 1rem;
  color: var(--ink);
  background: var(--accent);
  transform: translateY(-200%);
}
.skip:focus { transform: translateY(0); }

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
}
.masthead-inner {
  height: 5.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .66rem; font-weight: 690; font-size: 1.6rem; letter-spacing: -.08em; }
.brand svg { width: 1.65rem; height: 1.65rem; color: var(--accent); }
.brand-dot { color: var(--accent); }
.masthead-note { color: #d2d2d4; }
.masthead-note span { margin-inline: .5rem; color: var(--accent); }
.masthead-link { display: flex; align-items: center; gap: .42rem; padding: .5rem 0 .5rem .5rem; }
.masthead-link svg, .footer a svg { width: 1rem; height: 1rem; }
.masthead-link:hover, .footer a:hover { color: var(--accent); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(43rem, 94svh, 65rem);
  overflow: hidden;
  background: #0b0f16;
}
.hero-image, .hero::after, #starlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-image {
  z-index: -3;
  object-fit: cover;
  object-position: 62% 52%;
  scale: 1.045;
  transform: translate(var(--drift-x, 0px), var(--drift-y, 0px));
  transition: transform .42s ease-out;
}
.hero::after {
  content: "";
  z-index: -2;
  background: linear-gradient(90deg, #08090cf5 0%, #08090c99 24%, #08090c14 57%, transparent 80%),
    linear-gradient(0deg, #08090c 1%, #08090c78 18%, transparent 43%),
    linear-gradient(180deg, #08090c85 0%, transparent 25%);
}
#starlight { z-index: -1; pointer-events: none; }
.hero-frame { display: grid; align-content: center; position: relative; padding-block: 8rem 7rem; }
.hero-copy { width: min(100%, 54rem); }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--accent); margin-bottom: 1.4rem; }
.signal { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 .65rem #d3ff7ca0; }
.hero h1 { font-size: clamp(5rem, 10.3vw, 11rem); line-height: .85; letter-spacing: -.095em; font-weight: 650; margin-left: -.048em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-deck { margin-top: 1.65rem; max-width: 24rem; color: #e2e2e3; font-size: clamp(1rem, 1.5vw, 1.23rem); line-height: 1.48; }
.hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.3rem;
  border-radius: 2rem;
  padding: .96rem 1rem .96rem 1.15rem;
  margin-top: 1.7rem;
  color: #131c0d;
  background: var(--accent);
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.hero-link:hover { background: #e5ffb5; transform: translateY(-2px); }
.hero-link svg { width: 1.15rem; height: 1.15rem; }
.hero-bottom {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  border-top: 1px solid var(--rule);
  padding-block: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}
.hero-bottom span { display: inline-flex; align-items: center; gap: .6rem; }
.hero-bottom i { display: inline-block; width: .4rem; height: .4rem; border: 1px solid var(--accent); rotate: 45deg; }
.hero-bottom b { width: 2.1rem; height: 1px; background: var(--rule); }
.motion-toggle { color: var(--muted); background: transparent; border: 0; padding: .4rem 0 .4rem .25rem; }
.motion-toggle:hover { color: var(--paper); }
[hidden] { display: none !important; }

.worlds, .directory { padding-top: clamp(3.75rem, 8vw, 8rem); }
.chapter-line { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .85rem; color: var(--muted); border-bottom: 1px solid var(--rule); }
.chapter-line > span:first-child, .cares-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--accent); }
.chapter-line svg, .cares-label svg { width: .94rem; height: .94rem; }
.chapter-gap { margin: clamp(3.8rem, 7vw, 7rem) 0 1rem; }
.section-intro {
  display: flex;
  gap: 1.2rem 3rem;
  align-items: end;
  justify-content: space-between;
  padding-block: clamp(1.4rem, 3.4vw, 3rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.section-intro h2 { font-size: clamp(3.2rem, 7.25vw, 7.8rem); font-weight: 625; line-height: .92; letter-spacing: -.085em; margin-left: -.035em; }
.section-intro h2 span { color: var(--accent); }
.section-intro p { max-width: 18rem; color: var(--muted); font-size: clamp(.98rem, 1.28vw, 1.17rem); line-height: 1.5; padding-bottom: .13rem; }
.scene, .cares { scroll-margin-top: 1rem; }
.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: end;
  background: #131824;
  border: 1px solid #ffffff1f;
  border-radius: .75rem;
}
.scene + .scene, .pair + .scene, .scene + .cares { margin-top: 1rem; }
.feature { min-height: clamp(30rem, 53vw, 51rem); }
.scene-image, .scene-image::after { position: absolute; inset: 0; z-index: -1; }
.scene-image { overflow: hidden; }
.scene-image img { height: 100%; object-fit: cover; object-position: var(--image-position, center); transition: transform 1s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scene:hover .scene-image img { transform: scale(1.035); }
}
.scene-image::after {
  content: "";
  background: linear-gradient(0deg, #050609eb 0%, #050609a6 20%, transparent 62%), linear-gradient(108deg, #05060962, transparent 63%);
  z-index: 0;
}
.scene-label {
  position: absolute;
  inset: 1.25rem auto auto 1.25rem;
  background: #080a10c7;
  border: 1px solid #ffffff47;
  border-radius: 2rem;
  padding: .42rem .65rem;
  color: #f3f3f3;
}
.scene-label > span { color: var(--scene-accent, var(--accent)); }
.scene-copy { padding: clamp(1.35rem, 3.8vw, 3.5rem); }
.scene-copy h3, .cares h3 {
  font-weight: 640;
  font-size: clamp(2.85rem, 7.2vw, 7rem);
  line-height: .94;
  letter-spacing: -.075em;
  margin-left: -.04em;
}
.scene-copy p:not(.scene-caption), .cares p { margin-top: .72rem; font-size: clamp(.98rem, 1.38vw, 1.22rem); line-height: 1.45; color: #e0e0e3; max-width: 32rem; }
.scene-caption { color: var(--scene-accent, var(--accent)); margin-bottom: .65rem; }
.scene-link {
  width: fit-content;
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  max-width: 100%;
  margin-top: 1.05rem;
  padding: .62rem .75rem;
  border-radius: 2rem;
  border: 1px solid #ffffff58;
  color: #fff;
  background: #08090c85;
  transition: color .2s, background .2s, border-color .2s;
  letter-spacing: .065em;
  overflow-wrap: anywhere;
}
.scene-link svg { width: 1rem; height: 1rem; flex: none; }
.scene-link:hover { color: var(--ink); background: var(--scene-accent, var(--accent)); border-color: transparent; }
.electric { --scene-accent: #9edcff; --image-position: 57% 52%; }
.solo { --scene-accent: #fdd0a4; --image-position: 58% 43%; }
.dad { --scene-accent: #ffd3c3; --image-position: 50% 45%; }
.future { --scene-accent: #ddd2ff; --image-position: 50% 38%; }
.parent { --scene-accent: #ffdc9a; --image-position: 57% 48%; }
.parent .scene-image::after {
  background: linear-gradient(0deg, #07090cd9 0%, #07090c64 30%, transparent 66%), linear-gradient(90deg, #07090c8f, transparent 72%);
}
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pair .scene { margin: 0; }
.compact { min-height: clamp(28rem, 43vw, 44rem); }
.compact .scene-image::after { background: linear-gradient(0deg, #08090cfa 0%, #08090cb0 23%, transparent 65%); }
.compact .scene-copy { padding: clamp(1.3rem, 2.7vw, 2.7rem); }
.compact h3 { font-size: clamp(2.25rem, 4.6vw, 4.9rem); }
.compact p:not(.scene-caption) { max-width: 25rem; font-size: clamp(.94rem, 1.25vw, 1.1rem); }
.scene-details[open] .scene-link svg, .index-details[open] svg { transform: rotate(180deg); }
.scene-details[open] p { max-width: 22rem; }
.cares {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #e6e4d5;
  color: #242e24;
  border-radius: .75rem;
  overflow: hidden;
}
.cares-image { position: relative; min-height: 20rem; }
.cares-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.cares-content { align-self: center; padding: clamp(1.5rem, 4.6vw, 5rem); }
.cares-label { color: #344f30; margin-bottom: 1.3rem; }
.cares h3 { font-size: clamp(2.9rem, 5.5vw, 5.75rem); }
.cares p { color: #394135; }
.cares .scene-link { border-color: #39413575; background: transparent; color: #242e24; }
.cares .scene-link:hover { background: #d1d9ba; }
.cares a:focus-visible { outline-color: #2c4b29; }

.directory { padding-bottom: clamp(4rem, 8vw, 8rem); }
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.directory-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.directory-list li { border-bottom: 1px solid var(--rule); }
.directory-list a, .directory-list summary {
  display: grid;
  grid-template-columns: 2.3rem 1fr 1.4rem;
  gap: .55rem;
  padding: .95rem .55rem .95rem .25rem;
  align-items: center;
  min-height: 4.7rem;
  font-size: clamp(.98rem, 1.7vw, 1.35rem);
  font-weight: 580;
  letter-spacing: -.025em;
  transition: color .2s, background .2s;
}
.directory-list a:hover, .directory-list summary:hover { color: var(--accent); background: #ffffff06; }
.index-number { color: var(--accent); }
.directory-list small { display: block; color: var(--muted); font-size: .8rem; font-weight: 420; letter-spacing: normal; margin-top: .14rem; }
.directory-list svg { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.index-details p { margin: -.2rem 2.6rem 1rem 3.08rem; color: var(--muted); font-size: .93rem; line-height: 1.45; }

.footer { background: #111410; border-top: 1px solid #d3ff7c37; }
.footer-inner { padding: 1.35rem 0; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.footer-top > * { display: inline-flex; align-items: center; gap: .6rem; }
.footer-top svg { width: 1rem; height: 1rem; color: var(--accent); }
.footer-mark { font-size: min(18.6vw, 19.4rem); line-height: .87; font-weight: 670; letter-spacing: -.105em; margin: .16em 0 .18em -.055em; color: #f0f1e7; }
.footer-mark span { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--rule); padding-top: 1rem; color: var(--muted); }

@media (max-width: 760px) {
  .masthead-inner { height: 4.25rem; }
  .masthead-note { display: none; }
  .hero { min-height: max(41rem, 89svh); }
  .hero-image { object-position: 71% 12%; height: 73%; }
  .hero::after { background: linear-gradient(0deg, #08090c 7%, #08090cf2 21%, #08090c4f 64%, #08090c36 82%, #08090c85 100%); }
  .hero-frame { align-content: end; padding-block: 12rem 6.1rem; }
  .hero h1 { font-size: clamp(4.4rem, 12.4vw, 6.4rem); }
  .hero-deck { margin-top: 1.15rem; }
  .hero-link { margin-top: 1.25rem; }
  .hero-bottom .hero-annotation { display: none; }
  .hero-bottom { font-size: .63rem; padding-block: .78rem; }
  .section-intro { align-items: start; flex-direction: column; gap: .85rem; }
  .section-intro p { max-width: 22rem; }
  .chapter-line { font-size: .61rem; }
  .pair, .cares { grid-template-columns: minmax(0, 1fr); }
  .feature, .compact { min-height: clamp(27rem, 108vw, 38rem); }
  .scene-label { inset: .85rem auto auto .85rem; }
  .solo { --image-position: 59% 50%; }
  .parent { --image-position: 62% 48%; }
  .cares-image { min-height: 16.5rem; }
  .cares-content { padding-block: 1.65rem 2rem; }
}

@media (max-width: 560px) {
  .directory-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .directory-list + .directory-list { border-top: 0; }
  .footer-top, .footer-bottom { font-size: .58rem; }
}

@media (max-width: 365px) {
  .hero h1 { font-size: 3.65rem; }
  .scene-copy h3 { font-size: 2.45rem; }
  .chapter-line > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}