:root {
  color-scheme: light;
  --paper: #F7F2E9;
  --ink: #292C48;
  --muted: #666174;
  --accent: #935344;
  --line: rgba(77, 60, 67, .17);
  --button: #30334E;
  --button-text: #FFF9F0;
  --gold: #F5C276;
  --rose: #E8A18C;
  --lilac: #B6A3C8;
  font-family: "DM Sans", ui-sans-serif, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #171B32;
    --ink: #F7EFE3;
    --muted: #C0B6C5;
    --accent: #F2BA97;
    --line: rgba(245, 224, 211, .18);
    --button: #F0C4A0;
    --button-text: #25263C;
    --gold: #B87948;
    --rose: #A55361;
    --lilac: #65598E;
  }
  :root .logo-light { display: none; }
  :root .logo-dark { display: block; }
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; line-height: 1.65; background: var(--paper); transition: background-color 1.2s, color 1.2s; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .055;
  background: url("./texture.svg") repeat;
}
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 10; padding: 10px 16px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px clamp(24px, 5vw, 80px); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-family: Fraunces, Georgia, serif; font-size: 1.4rem; text-decoration: none; letter-spacing: -.04em; }
.brand-art { display: block; width: 52px; height: 52px; border-radius: 24%; overflow: hidden; }
.brand-art img { width: 100%; height: 100%; object-fit: cover; }
.logo-light { display: block; mix-blend-mode: multiply; }
.logo-dark { display: none; }
.home { min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; }
.dawn-scene { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; background: var(--paper); }
.scene-flow { position: absolute; inset: -8%; transform: translate(var(--drift-x, 0px), var(--drift-y, 0px)); }
.veil { position: absolute; border-radius: 50%; opacity: .46; transition: background 1.5s; }
.veil-gold { width: 85%; height: 100%; left: -22%; top: -35%; background: radial-gradient(ellipse, var(--gold), transparent 68%); }
.veil-rose { width: 95%; height: 105%; right: -28%; top: 4%; background: radial-gradient(ellipse, var(--rose), transparent 68%); transform: translate(var(--rose-x, 0px), var(--rose-y, 0px)); }
.veil-lilac { width: 120%; height: 75%; left: -20%; bottom: -37%; background: radial-gradient(ellipse, var(--lilac), transparent 70%); }
.sun { position: absolute; width: clamp(250px, 36vw, 580px); aspect-ratio: 1; top: 37%; left: 50%; transform: translate(-50%, -50%) scale(var(--breath, 1)); border-radius: 50%; background: radial-gradient(circle closest-side, var(--gold), transparent 100%); opacity: .35; }
.horizon { position: absolute; width: 130%; height: 70%; bottom: -21%; left: -15%; color: var(--accent); opacity: .45; }
.cursor-light { position: absolute; inset: -25%; opacity: .2; background: radial-gradient(ellipse 24% 30% at var(--light-x, 50%) var(--light-y, 45%), var(--gold), transparent); }
.home-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 24px 28px; position: relative; }
.hero { text-align: center; max-width: 1000px; }
.hero h1 { font-family: Fraunces, Georgia, serif; font-size: clamp(3.4rem, 7.7vw, 7.2rem); font-weight: 400; line-height: 1.04; letter-spacing: -.06em; margin: 0; }
.hero h1 em { font-weight: 400; color: var(--accent); }
.supporting { max-width: 560px; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.15rem); margin: 30px auto 24px; line-height: 1.8; }
.hero-closing { margin: 0 0 32px; font-family: Fraunces, Georgia, serif; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero-actions .join { width: 220px; max-width: 100%; min-height: 56px; }
.mobile-break { display: none; }
.join { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 25px; border: 1px solid transparent; border-radius: 100px; background: var(--button); color: var(--button-text); text-decoration: none; font-size: .9rem; font-weight: 500; box-shadow: 0 8px 24px rgba(45, 29, 44, .08); transition: background-color 1s, color 1s, box-shadow .3s; }
.join:hover { box-shadow: 0 6px 30px rgba(45, 29, 44, .2); }
.join span { font-size: 1.2rem; }
.join-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.home-footer { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 25px clamp(24px, 5vw, 80px); color: var(--muted); font-size: .73rem; }
.home-footer nav { display: flex; gap: 26px; }
.home-footer a { text-decoration: none; }
.home-footer a:hover { text-decoration: underline; }
.document { background-image: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--rose) 12%, transparent), transparent 65%); }
.document main, .document footer { width: min(100% - 48px, 760px); margin-inline: auto; }
.document main { padding-block: 48px 64px; }
.document h1 { margin: 0 0 16px; font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1.15; letter-spacing: -.035em; }
.document h2 { margin: 38px 0 10px; font-size: 1.22rem; line-height: 1.3; }
.document p, .document ul, .document ol { margin: 0 0 16px; }
.document ul, .document ol { padding-left: 22px; }
.document li + li { margin-top: 8px; }
.document .date, .document .hint { color: var(--muted); font-size: .9rem; }
.document .intro { font-size: 1.1rem; }
.document .join { margin: 8px 0 16px; }
.document footer { border-top: 1px solid var(--line); padding-block: 22px 44px; font-size: .9rem; }

@media (max-width: 600px) {
  .site-header { padding: 20px; gap: 8px; }
  .brand { gap: 8px; font-size: 1.2rem; }
  .brand-art { width: 40px; height: 40px; }
  .home-main { padding-top: 56px; }
  .hero h1 { font-size: clamp(3rem, 10.5vw, 4.6rem); }
  .mobile-break { display: block; }
  .home-footer { flex-wrap: wrap; justify-content: center; padding: 28px 20px; column-gap: 24px; text-align: center; }
}

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

@media (max-width: 360px) {
  .brand { font-size: 1rem; gap: 6px; }
  .brand-art { width: 34px; height: 34px; }
}