/* base reset & primitives */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;hanging-punctuation:first last;scroll-padding-top:6rem}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);overflow-x:hidden}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role="list"],ol[role="list"]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);text-wrap:balance;line-height:1.08;letter-spacing:-0.02em;font-weight:400}
p,li,figcaption{text-wrap:pretty;max-width:66ch}
button{cursor:pointer;background:none;border:none;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--color-accent);color:var(--color-primary)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Layout containers */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.container-narrow{max-width:var(--content-narrow)}
.container-default{max-width:var(--content-default)}
.container-hero{max-width:var(--content-hero)}

.section{padding-block:clamp(4rem,8vw,8rem)}
.section-tight{padding-block:clamp(3rem,5vw,5rem)}
.section-loose{padding-block:clamp(6rem,10vw,12rem)}

/* Eyebrow / small-caps label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-body);
  font-size:.75rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-accent);
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:currentColor;flex-shrink:0}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:1.75rem;height:1px;background:currentColor;flex-shrink:0}

/* Rule / decorative divider */
.hairline{width:100%;height:1px;background:var(--color-border);border:none}
.brass-rule{
  width:4rem;height:2px;background:var(--color-accent);
  border:none;margin-block:var(--space-6);
}
.brass-rule.center{margin-inline:auto}

/* Display type helpers */
.display-hero{
  font-family:var(--font-display);
  font-size:var(--text-hero);
  font-weight:300;
  line-height:.95;
  letter-spacing:-0.035em;
}
.display-xl{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.03em;
}
.display-lg{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.025em;
}

/* Italic serif accent */
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:300}

/* Body helpers */
.lead{
  font-size:var(--text-lg);
  line-height:1.55;
  color:var(--color-text-muted);
  max-width:36em;
  font-weight:400;
}
.muted{color:var(--color-text-muted)}
.faint{color:var(--color-text-faint)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;
  font-family:var(--font-body);font-size:var(--text-sm);
  font-weight:600;letter-spacing:.02em;
  border-radius:var(--radius-sm);
  transition:all var(--transition-interactive);
  position:relative;overflow:hidden;
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{
  background:var(--color-accent);
  color:var(--color-primary);
  box-shadow:var(--shadow-md);
}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-brass)}
.btn-ghost{
  background:transparent;color:var(--color-text);
  border-color:var(--color-border);
}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
/* .btn-outline-dark = button that sits ON a dark surface (hero, dark CTA band).
   Always cream text + light border, regardless of active theme. */
.btn-outline-dark{
  background:transparent;
  color:#F7F3EA;
  border-color:rgba(247,243,234,.45);
}
.btn-outline-dark:hover{
  background:rgba(247,243,234,.10);
  border-color:var(--color-accent-bright);
  color:#FFF9E8;
}
.btn-lg{padding:1.1rem 2rem;font-size:var(--text-base)}
.btn-arrow::after{content:"→";display:inline-block;transition:transform var(--transition-interactive)}
.btn-arrow:hover::after{transform:translateX(4px)}

/* Cinematic reveal on scroll — progressive enhancement (only hide when JS ready) */
.js-ready .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js-ready .reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .js-ready .reveal{opacity:1;transform:none;transition:none}
}

/* Grid helpers */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}