/* ─────────────────────────────────────────────
   FONTS
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* ─────────────────────────────────────────────
   THEME TOKENS
   Override any of these in a [data-theme] block
   to create a new theme.
   ───────────────────────────────────────────── */
:root {
  /* Typefaces */
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* Page */
  --color-bg:          #EDECE9;
  --color-text:        #0F0D0B;
  --color-body:        #2A2520;
  --color-subtle:      #4A4440;
  --color-muted:       #7A7268;
  --color-faint:       #9A9288;
  --color-border:      #B8B2A8;
  --color-surface:     #E0DDD8;
  --color-placeholder: #D8D4CE;

  /* UI chrome */
  --color-header-bg:   #0F0D0B;
  --color-ui:          #649150;
  --color-accent:      #649150;
  --color-input-bg:    #E0DDD8;
  --color-input-hover: #D4D0C8;
  --color-error:       #A03030;

  /* Dark sections (insight band, footer) */
  --color-dark-bg:    #0F0D0B;
  --color-dark-text:  #EDECE9;
  --color-dark-muted: #5A5048;
  --color-dark-body:  #8A8278;
}


/* ─────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ─────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────── */
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.page { padding-top: 60px; }


/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--color-header-bg);
  z-index: 100;
  display: flex;
  align-items: center;
}
.header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-dark-text);
  text-decoration: none;
}
.header-nav {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dark-text);
  display: flex;
  align-items: center;
}
.header-nav a {
  color: var(--color-dark-text);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.header-nav a:hover { opacity: 0.7; }
.header-nav .divider { margin: 0 12px; opacity: 0.4; }
.header-nav a svg { display: block; }


/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.site-footer { background: var(--color-accent); }
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.footer-label {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 32px;
  color: #fff;
  margin-bottom: 0;
}
.footer-email-row { display: flex; align-items: center; gap: 14px; }
.footer-email {
  font-family: var(--font-sans);
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.footer-email:hover { border-color: #fff; }
.copy-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { border-color: #fff; color: #fff; }
.copy-btn.copied { color: #fff; border-color: #fff; }


/* ─────────────────────────────────────────────
   THEME: LINEAR
   Dark, minimal, indigo — inspired by Linear.app
   Activate: ?theme=linear
   ───────────────────────────────────────────── */
[data-theme="linear"] {
  --color-bg:          #0E0E12;
  --color-text:        #EBEBEF;
  --color-body:        #9898A8;
  --color-subtle:      #8080A0;
  --color-muted:       #5C5C78;
  --color-faint:       #3A3A50;
  --color-border:      #22222E;
  --color-surface:     #16161E;
  --color-placeholder: #1A1A26;

  --color-header-bg:   #0E0E12;
  --color-ui:          #5E6AD2;
  --color-accent:      #5E6AD2;
  --color-input-bg:    #16161E;
  --color-input-hover: #1E1E2C;
  --color-error:       #E05252;

  --color-dark-bg:    #1A1A26;
  --color-dark-text:  #EBEBEF;
  --color-dark-muted: #5C5C78;
  --color-dark-body:  #8080A0;
}


/* ─────────────────────────────────────────────
   THEME: STRIPE
   Clean white, deep navy, indigo — inspired by Stripe.com
   Activate: ?theme=stripe
   ───────────────────────────────────────────── */
[data-theme="stripe"] {
  --color-bg:          #FFFFFF;
  --color-text:        #1A1F36;
  --color-body:        #3C4257;
  --color-subtle:      #697386;
  --color-muted:       #A8B0C0;
  --color-faint:       #CBD3E0;
  --color-border:      #E3E8EE;
  --color-surface:     #F6F9FC;
  --color-placeholder: #EDF0F4;

  --color-header-bg:   #0A2540;
  --color-ui:          #635BFF;
  --color-accent:      #635BFF;
  --color-input-bg:    #F6F9FC;
  --color-input-hover: #EDF0F4;
  --color-error:       #DF1B41;

  --color-dark-bg:    #0A2540;
  --color-dark-text:  #FFFFFF;
  --color-dark-muted: #4F6380;
  --color-dark-body:  #8898AA;
}


/* ─────────────────────────────────────────────
   ANIMATED UNDERLINE (links)
   ───────────────────────────────────────────── */
a.underline-hover {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.18s ease;
}
a.underline-hover:hover { background-size: 100% 1px; }


/* ─────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ─────────────────────────────────────────────
   MOBILE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner { padding: 0 24px; }
  .footer-inner  { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
}