:root{
  --navy:#10202D;
  --ivory:#F3EFE6;
  --charcoal:#262B2F;
  --copper:#A77C49;
  --copper-soft:#c79b63;
  --olive:#69705D;
  --soft-white:#FAFAF7;

  --bg:var(--soft-white);
  --bg-deep:var(--navy);
  --surface:#ffffff;
  --surface-tint: #efe9db;
  --text:var(--charcoal);
  --text-dim:#5a5f57;
  --text-inverse:var(--ivory);
  --text-inverse-dim: rgba(243,239,230,0.72);
  --border: rgba(38,43,47,0.12);
  --border-inverse: rgba(243,239,230,0.16);
  --accent: var(--copper);
  --accent-dim: rgba(167,124,73,0.14);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --content-max: 1440px;
  --measure: 68ch;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 144px;

  --radius-sm: 2px; --radius: 4px; --radius-lg: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-0.015em;
  margin:0 0 var(--space-4);
  color:var(--charcoal);
}
p{margin:0 0 var(--space-4); color:var(--text-dim); max-width:var(--measure);}
a{color:inherit;}

.shell{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: clamp(24px, 5vw, 96px);
}

@media (min-width: 1800px){
  :root{ --content-max: 1600px; }
}

/* ---- Signature system: recurring marks that make this feel authored, not templated ---- */

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--space-5);
}
.eyebrow::before{ content:''; display:block; width:26px; height:1px; background:var(--accent); flex:none; }

/* Oversized ghost numeral used behind section headings for scale + authorial voice */
.ghost-num{
  font-family:var(--serif);
  font-weight:500;
  position:absolute;
  font-size:clamp(120px, 14vw, 220px);
  line-height:1;
  color: currentColor;
  opacity:0.05;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

/* Thin index rail: vertical rule + rotated label, sits at the edge of a section */
.rail{
  position:absolute;
  top: var(--space-8);
  bottom: var(--space-8);
  width:1px;
  background: var(--border);
}
.rail-inverse{ background: var(--border-inverse); }
.rail-label{
  position:absolute;
  top:0;
  left:-8px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--text-dim);
  white-space:nowrap;
}

/* Subtle grain texture overlay for dark sections — kills the "flat AI gradient" look */
.grain::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  position:relative;
}
.btn-primary{ background:var(--navy); color:var(--ivory); }
.btn-primary:hover{ background:#182f3f; transform: translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--navy); border-color: rgba(16,32,45,0.28); }
.btn-secondary:hover{ border-color: var(--navy); transform: translateY(-1px); }
.btn-on-dark{ background:transparent; color:var(--ivory); border-color: var(--border-inverse); }
.btn-on-dark:hover{ border-color: var(--copper); color:var(--copper-soft); }
.btn-copper{ background:var(--accent); color:var(--navy); }
.btn-copper:hover{ background:#b98a56; transform: translateY(-1px); }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

::selection{ background: var(--accent); color: var(--navy); }