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

:root {
  /* BRASS world */
  --brass-deep: #6b5530;
  --brass: #b09060;
  --brass-mid: #c8aa7c;
  --brass-light: #f2e8d6;
  --brass-pale: #faf6ee;

  /* COPPER world */
  --copper-deep: #2e4a40;
  --copper: #5a8878;
  --copper-mid: #7ca89a;
  --copper-light: #d6ebe4;
  --copper-pale: #edf7f4;

  /* NEBULA world */
  --nebula-deep: #2e2840;
  --nebula: #5a4878;
  --nebula-mid: #7e6ea0;
  --nebula-light: #dcd4ee;
  --nebula-pale: #f0ecf6;

  /* TERRA world */
  --terra-deep: #5a3424;
  --terra: #b87050;
  --terra-mid: #cc9070;
  --terra-light: #f0dcd0;
  --terra-pale: #faf2ec;

  /* DUSK world */
  --dusk-deep: #4a3038;
  --dusk: #9a7078;
  --dusk-mid: #b8909a;
  --dusk-light: #e8d4da;
  --dusk-pale: #f6eef0;

  /* Neutrals — minority use */
  --ink: #2a2420;
  --ink-soft: #4a4238;
  --grey: #6a6054;
  --mute: #a09888;
  --bone: #f0ece6;
  --white: #faf8f4;

  --display: 'Instrument Serif', Georgia, serif;
  --sans: 'Syne', sans-serif;
  --mono: 'DM Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); background: var(--brass-pale);
  color: var(--ink); font-size: 17px; line-height: 1.75; overflow-x: hidden;
}
::selection { background: var(--nebula); color: white; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 22px 48px; display: flex;
  justify-content: space-between; align-items: center;
  transition: all 0.4s;
}
.nav.scrolled {
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.nav-logo {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: 6px; text-transform: uppercase;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--grey); transition: color 0.3s;
}
/* Each nav link hover = its page color */
.nav-links a[data-c="brass"]:hover { color: var(--brass); }
.nav-links a[data-c="copper"]:hover { color: var(--copper); }
.nav-links a[data-c="nebula"]:hover { color: var(--nebula); }
.nav-links a[data-c="terra"]:hover { color: var(--terra); }
.nav-links a[data-c="dusk"]:hover { color: var(--dusk); }

/* Dark nav variant */
.nav.dark-mode .nav-logo, .nav.dark-mode .nav-links a { color: rgba(240,236,230,0.5); }
.nav.dark-mode.scrolled { background: rgba(42,36,32,0.92); }

.hamburger { display: none; flex-direction: column; gap: 5px; width: 24px; cursor: pointer; z-index: 201; }
.hamburger span { display: block; height: 1.5px; background: var(--ink-soft); transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(250,246,238,0.97);
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--display); font-size: 26px; font-style: italic; color: var(--ink-soft); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 14px 32px; transition: all 0.3s; white-space: nowrap;
  border: 1.5px solid;
}
.btn-brass { background: var(--brass-deep); color: var(--brass-light); border-color: var(--brass-deep); }
.btn-brass:hover { background: transparent; color: var(--brass-deep); }
.btn-copper { background: var(--copper-deep); color: var(--copper-light); border-color: var(--copper-deep); }
.btn-copper:hover { background: transparent; color: var(--copper-deep); }
.btn-nebula { background: var(--nebula-deep); color: var(--nebula-light); border-color: var(--nebula-deep); }
.btn-nebula:hover { background: transparent; color: var(--nebula-deep); }
.btn-terra { background: var(--terra-deep); color: var(--terra-light); border-color: var(--terra-deep); }
.btn-terra:hover { background: transparent; color: var(--terra-deep); }
.btn-dusk { background: var(--dusk-deep); color: var(--dusk-light); border-color: var(--dusk-deep); }
.btn-dusk:hover { background: transparent; color: var(--dusk-deep); }
.btn-lg { padding: 16px 40px; font-size: 12px; }

/* SHARED */
.container { max-width: 1120px; margin: 0 auto; padding: 0 48px; }
.overline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 3.5px;
  text-transform: uppercase; margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.overline::before { content: ''; width: 24px; height: 1.5px; }
.heading { font-family: var(--display); font-weight: 400; line-height: 1.08; }
.heading em { font-style: italic; }

/* PAGE HERO */
.page-hero { padding: 170px 0 80px; }
.page-hero h1 { font-family: var(--display); font-size: clamp(38px, 6vw, 68px); font-weight: 400; line-height: 1.05; margin-bottom: 20px; }
.page-hero p { font-size: 18px; line-height: 1.85; max-width: 520px; }

/* SPLIT */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.split-panel { padding: 100px 64px; display: flex; flex-direction: column; justify-content: center; }

/* H-SCROLL TRACK */
.h-track { display: flex; gap: 3px; padding: 0 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-track::-webkit-scrollbar { display: none; }
.h-card { min-width: 340px; max-width: 340px; scroll-snap-align: start; padding: 40px 32px; display: flex; flex-direction: column; transition: box-shadow 0.3s; }
.h-hint { padding: 16px 48px 0; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }

/* SVC BLOCKS */
.svc-block { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.svc-block:nth-child(even) { direction: rtl; }
.svc-block:nth-child(even) > * { direction: ltr; }
.svc-text { padding: 100px 64px; display: flex; flex-direction: column; justify-content: center; }
.svc-text h2 { font-family: var(--display); font-size: clamp(34px, 4vw, 52px); font-weight: 400; font-style: italic; line-height: 1.05; margin-bottom: 18px; }
.svc-text p { font-size: 17px; line-height: 1.85; max-width: 420px; margin-bottom: 24px; }
.svc-visual { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.svc-visual svg { width: 40%; height: auto; }

/* TIMELINE */
.timeline-step { display: grid; grid-template-columns: 160px 1px 1fr; padding: 0 48px; }
.tl-num { display: flex; flex-direction: column; align-items: flex-end; padding-right: 36px; padding-top: 4px; }
.tl-roman { font-family: var(--display); font-size: 44px; font-weight: 400; line-height: 1; }
.tl-line { position: relative; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); border: 1.5px solid; }
.tl-body { padding: 0 0 52px 36px; }
.tl-body h3 { font-family: var(--display); font-size: 24px; font-weight: 400; font-style: italic; margin-bottom: 10px; }
.tl-body p { font-size: 17px; line-height: 1.85; max-width: 480px; }

/* FOOTER */
.site-footer {
  padding: 40px 48px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center;
}
.f-brand { font-family: var(--sans); font-size: 12px; letter-spacing: 5px; text-transform: uppercase; font-weight: 700; }
.f-links { display: flex; gap: 20px; justify-content: center; }
.f-links a { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; transition: opacity 0.3s; }
.f-links a:hover { opacity: 0.6; }
.f-copy { font-family: var(--mono); font-size: 10px; text-align: right; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.6s; }
.reveal.vis { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .container { padding: 0 24px; }
  .page-hero { padding: 130px 0 60px; }
  .split { grid-template-columns: 1fr; min-height: auto; }
  .split-panel { padding: 64px 24px; }
  .h-track { padding: 0 24px; }
  .h-card { min-width: 280px; max-width: 280px; padding: 32px 24px; }
  .svc-block { grid-template-columns: 1fr; min-height: auto; }
  .svc-block:nth-child(even) { direction: ltr; }
  .svc-text { padding: 64px 24px; }
  .svc-visual { min-height: 30vh; }
  .timeline-step { grid-template-columns: 40px 1px 1fr; padding: 0 24px; }
  .tl-num { padding-right: 12px; }
  .tl-roman { font-size: 26px; }
  .tl-body { padding: 0 0 36px 16px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; }
  .f-links { flex-wrap: wrap; justify-content: center; }
  .f-copy { text-align: center; }
}