@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Colour tokens ───────────────────────────────────────────── */
:root {
  --bg:         #1C1917;
  --bg-nav:     rgba(28,25,23,.85);
  --surface:    #232120;
  --surface-2:  #272422;
  --hover:      #1F1D1B;
  --phone:      #2A2826;

  --text:       #FAFAF9;
  --text-90:    rgba(250,250,249,.90);
  --muted:      #A8A29E;
  --dim:        #57534E;

  --accent:     #D09268;
  --accent-hov: #C07A4F;

  --b20: rgba(87,83,78,.20);
  --b25: rgba(87,83,78,.25);
  --b30: rgba(87,83,78,.30);
  --b35: rgba(87,83,78,.35);
  --b40: rgba(87,83,78,.40);
  --b50: rgba(87,83,78,.50);
  --b80: rgba(87,83,78,.80);

  --a12: rgba(208,146,104,.12);
  --a15: rgba(208,146,104,.15);
  --a18: rgba(208,146,104,.18);
  --a20: rgba(208,146,104,.20);
  --a25: rgba(208,146,104,.25);
  --a30: rgba(208,146,104,.30);
}

[data-theme="light"] {
  --bg:         #F7F5F3;
  --bg-nav:     rgba(247,245,243,.92);
  --surface:    #EDECEA;
  --surface-2:  #E5E3E0;
  --hover:      #F0EEED;
  --phone:      #D8D4CE;

  --text:       #1C1917;
  --text-90:    rgba(28,25,23,.90);
  --muted:      #57534E;
  --dim:        #A8A29E;

  --accent:     #B8693A;
  --accent-hov: #9F5830;

  --b20: rgba(87,83,78,.12);
  --b25: rgba(87,83,78,.16);
  --b30: rgba(87,83,78,.22);
  --b35: rgba(87,83,78,.28);
  --b40: rgba(87,83,78,.32);
  --b50: rgba(87,83,78,.42);
  --b80: rgba(87,83,78,.65);

  --a12: rgba(184,105,58,.10);
  --a15: rgba(184,105,58,.12);
  --a18: rgba(184,105,58,.15);
  --a20: rgba(184,105,58,.17);
  --a25: rgba(184,105,58,.22);
  --a30: rgba(184,105,58,.27);
}

/* ── Grain overlay ──────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
  pointer-events: none;
  z-index: 9999;
}

[data-theme="light"] body::after { opacity: 0.015; }

/* ── Body base ──────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Hero entrance ──────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow { animation: fade-up 0.55s cubic-bezier(.22,.68,0,1) both; }
.hero-title   { animation: fade-up 0.65s 0.08s cubic-bezier(.22,.68,0,1) both; }
.hero-copy    { animation: fade-up 0.65s 0.18s cubic-bezier(.22,.68,0,1) both; }
.hero-cta     { animation: fade-up 0.65s 0.28s cubic-bezier(.22,.68,0,1) both; }

/* ── Typography ─────────────────────────────────────────────── */
.font-serif { font-family: 'Instrument Serif', Georgia, serif; }
.font-mono  { font-family: 'IBM Plex Mono', 'Courier New', monospace; }

/* ── Amber link underline ───────────────────────────────────── */
.amber-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ── Section dividers ───────────────────────────────────────── */
.section-rule { border-top: 1px solid var(--b30); }

/* ── macOS traffic-light dots ───────────────────────────────── */
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green  { background: #28C840; }

/* ── Theme toggle — sun in dark mode (target: light), moon in light mode (target: dark) */
.icon-sun  { display: block; }
.icon-moon { display: none;  }
[data-theme="light"] .icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: block; }

/* ── Scroll-snap ────────────────────────────────────────────── */
html, body { height: 100dvh; overflow: hidden; }

.scroll-container {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.snap-section {
  scroll-snap-align: start;
  height: 100dvh;
}

/* ── Screenshot shadow — theme-sensitive ────────────────────── */
.mac-shadow { filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45)); }
[data-theme="light"] .mac-shadow { filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12)); }

/* ── Dot navigation ─────────────────────────────────────────── */
.dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--b50);
  background: transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.dot-btn:hover  { border-color: var(--muted); }
.dot-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}