:root {
  --cream: #F4F0E8;
  --track: #E8E2D8;
  --on: #DDD6CA;
  --surface: #F7F3EC;
  --bone: #F2F0E9;
  --ink: #1A1714;
  --muted: #5E564C;
  --sage: #5C6552;
  --amber: #D8552B;
  --hairline: rgba(26, 23, 20, 0.1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.022em;
  font-feature-settings: "ss01" on;
}

a { color: inherit; }

.soft {
  filter: blur(4.5px);
  transform: scale(1.06);
}

.home { background: var(--cream); }

.seg {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  width: max-content;
  gap: 2px;
  padding: 5px;
  background: var(--track);
  border-radius: 999px;
}
.seg-thumb {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  background: var(--on);
  border-radius: 999px;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(.22,1,.36,1), width 0.45s cubic-bezier(.22,1,.36,1);
}
.seg a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Places: cream, framed photo, download underneath — then the frame grows. */
.night { height: 230vh; }
.night-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.frame {
  position: absolute;
  overflow: hidden;
  background: #1a1714;
  will-change: left, right, top, bottom, border-radius;
}
.slides { position: absolute; inset: 0; }
.slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 0.38s ease;
}
.slides img.on { opacity: 1; }
.frame-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
  padding: 24px;
  opacity: 0;
}
.mark-word {
  font-weight: 600;
  letter-spacing: -0.06em;
  font-size: 18px;
  margin: 0 0 16px;
}
.frame-mark {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 18px;
  filter: none;
  transform: none;
}
.frame-copy h1 {
  margin: 0;
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.94;
  max-width: 11ch;
  text-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
.dl {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.03em;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 999px;
  font-family: inherit;
  border: 0;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.home.on-how .dl {
  background: #111;
  color: #fff;
}
.home.on-join .dl {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Cosmos: 2:3 print locked to the true centre; type hangs in equal gutters. */
.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 48px;
  height: 100svh;
  padding: 88px 5vw 108px;
  background: #fff;
  overflow: hidden;
}
.how h2 {
  margin: 0;
  justify-self: end;
  min-width: 0;
  font-size: clamp(42px, 4.8vw, 58px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-align: right;
  max-width: 9ch;
}
.how-card {
  position: relative;
  height: min(68vh, 720px);
  width: calc(min(68vh, 720px) * 2 / 3);
  border-radius: 24px;
  overflow: hidden;
  background: #1a1714;
  justify-self: center;
}
.how-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.how-card img.on { opacity: 1; }
.how-aside {
  margin: 0;
  justify-self: start;
  min-width: 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
  color: #8a8681;
  letter-spacing: -0.03em;
  line-height: 1.35;
  max-width: 14em;
}

/* Close: type on a night, not a black void. */
.join {
  position: relative;
  height: 100svh;
  overflow: hidden;
  color: #f2f0e9;
  background: #0c0b0a;
}
.join-photo,
.join-veil {
  position: absolute;
  inset: 0;
}
.join-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter: blur(2.8px);
  transform: scale(1.03);
}
.join-veil {
  background:
    radial-gradient(ellipse at center, rgba(12, 11, 10, 0.28) 0%, rgba(12, 11, 10, 0.5) 100%);
}
.join-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 88px 28px;
}
.join .mark-word {
  color: #f2f0e9;
  margin: 0 0 12px;
}
.join h2 {
  margin: 0 0 14px;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
.join-copy {
  margin: 0 auto 28px;
  max-width: 22em;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(242,240,233,0.78);
  letter-spacing: -0.02em;
}
.wait {
  display: flex;
  gap: 8px;
  width: min(440px, 100%);
  margin-bottom: 18px;
}
.wait input {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 16px 20px;
  font: inherit;
  font-size: 15px;
  background: #F2F0E9;
  color: var(--ink);
  outline: none;
}
.wait input::placeholder { color: rgba(26, 23, 20, 0.4); }
.wait button {
  border: 0;
  border-radius: 999px;
  padding: 16px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  background: var(--amber);
  color: #fff;
  cursor: pointer;
}
.wait-done {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: rgba(242,240,233,0.78);
}
.join .fine {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 2;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  font-size: 12px;
  color: rgba(242,240,233,0.45);
}
.join .fine a { color: inherit; text-decoration: none; }
.join .fine a:hover { color: #f2f0e9; }
.join .fine a:first-of-type { justify-self: end; text-align: right; }
.join .fine .dot { margin: 0; justify-self: center; }
.join .fine a:last-of-type { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .slides img, .how-card img { transition: none; }
  .night { height: 100svh; }
  .frame { left: 16px !important; right: 16px !important; }
}

@media (max-width: 860px) {
  .how {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 92px 28px 120px;
    overflow: auto;
  }
  .how h2 {
    justify-self: center;
    text-align: center;
    font-size: clamp(36px, 8.8vw, 44px);
    max-width: calc(min(52vh, 440px) * 2 / 3);
  }
  .how-aside {
    justify-self: center;
    text-align: center;
    max-width: calc(min(52vh, 440px) * 2 / 3);
  }
  .how-card {
    height: min(52vh, 440px);
    width: calc(min(52vh, 440px) * 2 / 3);
  }
  .wait { flex-direction: column; }
  .wait button { width: 100%; }
  .join-inner { padding: 88px 22px; }
  .join .fine { bottom: 24px; }
  .dl { bottom: 24px; }
}

/* legal inner pages */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }
.wrap nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
}
.wrap nav .word {
  font-weight: 600;
  letter-spacing: -0.06em;
  font-size: 22px;
  text-decoration: none;
}
.wrap nav .links { margin-left: auto; display: flex; gap: 16px; }
.wrap nav .links a { color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.mark {
  width: 22px;
  height: 33px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--sage);
}
.doc h1 {
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -0.045em;
  font-weight: 600;
  margin: 32px 0 12px;
}
.doc h2 { font-size: 22px; letter-spacing: -0.03em; margin: 36px 0 10px; }
.doc p, .doc li { max-width: 42em; }
.doc .meta { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.muted { color: var(--muted); }
.lede { font-size: 22px; color: var(--muted); max-width: 22em; margin: 0 0 28px; }
.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 48px 0;
}
.beat {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px;
}
.beat .n { color: var(--amber); font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.beat h2 { font-size: 18px; margin: 0 0 8px; }
.beat p { margin: 0; color: var(--muted); font-size: 16px; }