*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --bg-top: #f8efe6;
  --bg-bot: #f3e8dd;
  --bg-deep: #e8d9c8;
  --text: #3e2a1f;
  --text-soft: rgba(62, 42, 31, 0.72);
  --text-faint: rgba(62, 42, 31, 0.5);
  --card-bg: #1a1614;
  --card-bg-soft: #252220;
  --menu-ink: #2a1d16;
  --menu-muted: rgba(42, 29, 22, 0.55);
  --menu-accent: #b84a28;
  --menu-accent-hover: #9c3f22;
  --menu-accent-soft: rgba(184, 74, 40, 0.14);
  --menu-wiggle: #5c8564;
  --logo-color: #1a1614;
  --border-subtle: rgba(62, 42, 31, 0.08);
  --border-strong: rgba(62, 42, 31, 0.12);
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(42, 29, 22, 0.06);
  --shadow-md: 0 6px 24px rgba(42, 29, 22, 0.08);
  --shadow-lg: 0 12px 40px rgba(42, 29, 22, 0.1);
  --shadow-count: 0 8px 28px rgba(0, 0, 0, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --focus-ring: 0 0 0 3px rgba(184, 74, 40, 0.35);
  --space-section: clamp(2.5rem, 7vw, 3.75rem);
  --space-stack-xs: clamp(0.45rem, 1.4vw, 0.65rem);
  --space-stack-sm: clamp(0.75rem, 2vw, 1rem);
  --space-stack-md: clamp(1.05rem, 2.8vw, 1.3rem);
}

html[data-theme="dark"] {
  --bg-top: #1a1310;
  --bg-bot: #120b09;
  --bg-deep: #0b0706;
  --text: #f2e7dc;
  --text-soft: rgba(242, 231, 220, 0.8);
  --text-faint: rgba(242, 231, 220, 0.6);
  --card-bg: #111010;
  --card-bg-soft: #1a1716;
  --menu-ink: #f0dfce;
  --menu-muted: rgba(240, 223, 206, 0.7);
  --menu-accent: #c6502f;
  --menu-accent-hover: #e68057;
  --menu-accent-soft: rgba(198, 80, 47, 0.25);

  --menu-secondary: #d6a24f;
  --menu-secondary-hover: #e6c270;
  --menu-secondary-soft: rgba(214, 162, 79, 0.22);

  --menu-wiggle: #d6a24f;
  /* Gold for mono logo mask / accents; export a static gold PNG with this fill if needed */
  --logo-color: #d6a24f;

  --border-subtle: rgba(214, 162, 79, 0.14);
  --border-strong: rgba(214, 162, 79, 0.24);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 42px rgba(0, 0, 0, 0.45);
  --shadow-count: 0 10px 34px rgba(0, 0, 0, 0.48);
  --focus-ring: 0 0 0 3px rgba(214, 162, 79, 0.42), 0 0 0 6px rgba(198, 80, 47, 0.18);
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background-color: var(--bg-deep);
  background-image: linear-gradient(168deg, var(--bg-top) 0%, var(--bg-bot) 48%, var(--bg-deep) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: transparent;
  margin: 0;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  padding-top: calc(1rem + env(safe-area-inset-top));
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.theme-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.52);
  color: var(--menu-ink);
  border-radius: 999px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.theme-icon {
  font-size: 1.05rem;
  line-height: 1;
  display: none;
}

.theme-icon-moon {
  color: #111111;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--menu-accent);
  color: var(--menu-accent);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(214, 162, 79, 0.12);
}

html[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--menu-secondary);
  color: var(--menu-secondary);
}

.theme-icon-moon { display: inline-block; }
html[data-theme="dark"] .theme-icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}