/* The public introduction shares the app's navy, brass and self-hosted type. */
@font-face { font-family: Cinzel; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/cinzel-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/cormorant-garamond-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/ibm-plex-sans-400-700-latin.woff2") format("woff2"); }
:root { color-scheme: dark; --ground: #050a1c; --ink: #f0e7d0; --muted: #b5b2a4; --gold: #d4af5a; --line: rgb(212 175 90 / .28); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 80% 15%, #132044 0, transparent 52%), var(--ground); color: var(--ink); font: 16px/1.75 "IBM Plex Sans", "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 3; padding: 10px 16px; background: var(--ink); color: var(--ground); }
.skip-link:focus { top: 16px; }
.page { width: min(1080px, 100% - 96px); margin-inline: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 29px 0; }
.wordmark { font: 15px/1.5 Cinzel, Georgia, serif; letter-spacing: .12em; text-decoration: none; color: var(--gold); }
.byline { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; padding: 90px 0 80px; }
.eyebrow { margin: 0 0 20px; color: var(--gold); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0 0 22px; font: 400 clamp(35px, 5vw, 58px)/1.15 Cinzel, Georgia, serif; letter-spacing: -.025em; }
.opening { margin: 0 0 22px; font: 400 clamp(28px, 3.5vw, 39px)/1.2 "Cormorant Garamond", Georgia, serif; }
.description { color: var(--muted); max-width: 44ch; margin: 0 0 28px; }
.enter { display: inline-flex; gap: 30px; align-items: center; padding: 13px 21px; border: 1px solid var(--gold); background: var(--gold); color: var(--ground); text-decoration: none; font-size: 14px; font-weight: 600; }
.enter:hover { background: #ecd08a; color: var(--ground); }
.invitation { margin: 13px 0 0; font-size: 12px; color: var(--muted); }
.observatory { color: var(--gold); max-width: 340px; width: 100%; margin-left: auto; }
.observatory svg { width: 100%; display: block; stroke: currentColor; stroke-width: 1; }
.quiet { opacity: .38; }
.planet { fill: var(--gold); }
.observatory p { text-align: center; margin: 8px 0 0; font: 19px/1.5 "Cormorant Garamond", Georgia, serif; color: var(--muted); }
.practice, .account { border-top: 1px solid var(--line); padding: 40px 0 50px; }
.section-label { display: flex; align-items: baseline; gap: 20px; margin-bottom: 28px; }
.section-label span { font-size: 11px; color: var(--gold); }
h2 { margin: 0; font: 400 18px/1.5 Cinzel, Georgia, serif; }
.practice-columns, .account-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; }
h3 { margin: 0 0 10px; font: 500 29px/1.2 "Cormorant Garamond", Georgia, serif; }
.practice p, .account p { color: var(--muted); margin: 0 0 15px; }
.privacy-note { border-left: 1px solid var(--line); padding-left: 30px; }
.privacy-note a { font-size: 14px; color: var(--gold); }
footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 34px; color: var(--muted); font-size: 12px; }
footer nav { display: flex; gap: 24px; }
@media (max-width: 700px) {
  .page { width: calc(100% - 40px); }
  .masthead { padding: 21px 0; }
  .byline { max-width: 110px; font-size: 9px; text-align: right; }
  .intro { grid-template-columns: 1fr; padding: 52px 0 42px; gap: 35px; }
  .observatory { max-width: 210px; margin: 0 auto; }
  .practice-columns, .account-columns { grid-template-columns: 1fr; gap: 25px; }
  .practice, .account { padding: 30px 0; }
  .privacy-note { padding-left: 20px; }
  footer { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }