/* BASE — reset, page background, fonts, focus styles, and the app frame
   (skip link, container widths, top bar, desktop nav). */

* {
  box-sizing:border-box
}

html {
  background:var(--cream);
  color:var(--ink);
  scroll-behavior:smooth
}

body {
  margin:0;
  min-height:100vh;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 45% -10%,#fff 0,rgba(255,255,255,.46) 28%,transparent 54%),var(--cream);
  color:var(--ink)
}

button,input,select {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit
}

button {
  color:inherit
}

:focus-visible {
  outline:3px solid rgba(8,42,86,.30);
  outline-offset:3px
}

.serif,.page-title,.advice-title,.hero-title,.newsletter h2,.cosmic-card h2,.library-card h3,.stage-section h2 {
  font-family:Georgia,"Times New Roman",serif
}

.hand,.hero-hand,.hand-note,.cosmic-sign {
  font-family:"Patrick Hand",cursive
}

.skip-link {
  position:fixed;
  left:12px;
  top:-80px;
  z-index:1000;
  background:var(--navy);
  color:white;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none
}

.skip-link:focus {
  top:12px
}

.app-shell {
  min-height:100vh
}

.page {
  min-height:100vh;
  padding-bottom:70px
}

.container {
  width:min(var(--max),calc(100% - 42px));
  margin:0 auto
}

.narrow {
  width:min(760px,calc(100% - 34px));
  margin:0 auto
}

.topbar {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(248,242,233,.90);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(8,42,86,.06)
}

.topbar-inner {
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  display:inline-flex;
  align-items:flex-start;
  text-decoration:none;
  color:var(--navy)
}

.brand-name {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:1.24rem;
  line-height:.88;
  letter-spacing:-.035em
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto
}

.desktop-nav a {
  text-decoration:none;
  font-size:.83rem;
  font-weight:600;
  color:var(--navy)
}

.desktop-nav a:not(.join-link) {
  opacity:.82
}

.desktop-nav a.active {
  opacity:1
}

.desktop-nav .join-link {
  background:var(--navy);
  color:white;
  padding:11px 18px;
  border-radius:999px;
  box-shadow:0 7px 18px rgba(8,42,86,.13)
}

.icon-btn {
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:#fff9ef;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:.9rem
}


.topbar-actions {
  display:flex;
  align-items:center;
  gap:8px
}

.theme-toggle {
  min-height:40px;
  border:1px solid var(--line);
  background:#fff9ef;
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-weight:800;
  font-size:.78rem;
  white-space:nowrap
}

.theme-toggle .theme-icon {
  font-size:1rem;
  line-height:1
}

.theme-toggle .theme-label {
  line-height:1
}

.site-footer {
  padding:22px 0 8px;
  text-align:center;
  font-size:.72rem;
  color:var(--muted)
}

/* Visible to screen readers, invisible on screen. Used for form labels that
   would otherwise duplicate visible text. Lived in the old night.css. */
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.protected-illustration {-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}


/* Global brand lock-up and selective editorial copy deterrence. */
.brand {
  flex-direction:column;
  gap:3px
}

.brand-welcome {
  font-family:"Patrick Hand",cursive;
  font-size:.88rem;
  line-height:1;
  white-space:nowrap
}

html.copy-protected main {
  -webkit-user-select:none;
  user-select:none
}

html.copy-protected input,
html.copy-protected textarea,
html.copy-protected select,
html.copy-protected [contenteditable="true"],
html.copy-protected [data-copy-allowed],
html.copy-protected [data-copy-allowed] * {
  -webkit-user-select:text;
  user-select:text
}

.site-footer .container{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}
.site-footer a{color:inherit;text-underline-offset:3px}