/* ============================================================
   American Malinois — Luxury Redesign
   base.css — reset, tokens, typography primitives
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern","liga","calt";
  font-variant-numeric:tabular-nums lining-nums;
}
img,video,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
::selection{background:var(--gold);color:var(--ink-on-gold)}

/* ---------- Tokens ---------- */
:root{
  /* Palette — ivory, charcoal, restrained gold */
  --bg:           #F7F4EC;   /* ivory */
  --bg-warm:      #EFEAE0;   /* warm ivory section */
  --bg-deep:      #1B1916;   /* charcoal */
  --bg-deep-2:    #121110;   /* darker charcoal */
  --surface:      #FBF8F1;   /* card / lift */
  --hairline:     rgba(28,25,20,.10);
  --hairline-2:   rgba(28,25,20,.18);
  --hairline-on-dark: rgba(232,222,196,.16);

  --ink:          #1C1916;   /* primary text on light */
  --ink-2:        #36322B;   /* secondary text on light */
  --ink-3:        #6C665B;   /* muted text on light */
  --ink-4:        #9B9587;   /* faint text */

  --ink-on-dark:  #E8DEC4;   /* warm ivory text on dark */
  --ink-on-dark-2:#B8AE96;   /* secondary text on dark */
  --ink-on-dark-3:#7B7565;   /* muted text on dark */

  /* Gold — restrained, no neon */
  --gold:         #B08A3E;
  --gold-soft:    #C9A765;
  --gold-deep:    #8A6A2C;
  --ink-on-gold:  #1C1916;

  /* Type */
  --font-display: "Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-body:    "Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:    ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 160px; --s-12: 200px;

  /* Container widths */
  --w-narrow: 760px;
  --w-prose:  900px;
  --w-default: 1180px;
  --w-wide:    1320px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);
}

/* ---------- Typography primitives ---------- */
.display{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.012em;
  line-height:1.04;
  color:var(--ink);
  font-size:clamp(40px,5.4vw,80px);
  margin:0;
}
.display em{font-style:italic;font-weight:300;color:var(--gold-deep)}
.display--xl{font-size:clamp(48px,7vw,108px);line-height:.98;letter-spacing:-.018em}

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:24px;height:1px;background:var(--gold);
  display:inline-block;
}
.eyebrow--gold{color:var(--gold-deep)}
.eyebrow--on-dark{color:var(--ink-on-dark-2)}
.eyebrow--on-dark::before{background:var(--gold-soft)}

.lede{
  font-family:var(--font-body);
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.6;
  color:var(--ink-2);
  font-weight:400;
  max-width:62ch;
}
.lede--center{margin-left:auto;margin-right:auto}
.lede--on-dark{color:var(--ink-on-dark-2)}

.h2{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}
.h2 em{font-style:italic;color:var(--gold-deep)}

.h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,2.1vw,28px);
  line-height:1.18;
  letter-spacing:-.005em;
  margin:0;
}

.micro{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-3);
}
.micro--on-dark{color:var(--ink-on-dark-3)}

/* ---------- Container ---------- */
.container{
  width:100%;
  max-width:var(--w-default);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.container--narrow{max-width:var(--w-narrow)}
.container--prose{max-width:var(--w-prose)}
.container--wide{max-width:var(--w-wide)}

/* ---------- Section primitives ---------- */
.section{
  padding-block:clamp(80px,11vw,160px);
  position:relative;
}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section--dark{
  background:var(--bg-deep);
  color:var(--ink-on-dark);
}
.section--dark .display{color:var(--ink-on-dark)}
.section--dark .h2,.section--dark .h3{color:var(--ink-on-dark)}
.section--dark .lede{color:var(--ink-on-dark-2)}
.section--warm{background:var(--bg-warm)}

.divider{
  height:1px;background:var(--hairline);width:100%;
}
.divider--on-dark{background:var(--hairline-on-dark)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 28px;
  font-family:var(--font-body);
  font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;
  background:transparent;
  color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--gold{
  background:transparent;color:var(--gold-deep);border-color:var(--gold);
}
.btn--gold:hover{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--on-dark{color:var(--ink-on-dark);border-color:var(--ink-on-dark)}
.btn--on-dark:hover{background:var(--ink-on-dark);color:var(--bg-deep);border-color:var(--ink-on-dark)}
.btn--gold-on-dark{
  background:transparent;color:var(--gold-soft);border-color:var(--gold-soft);
}
.btn--gold-on-dark:hover{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.btn .arrow{
  width:14px;height:8px;
  display:inline-block;
  background:linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat;
  position:relative;
}
.btn .arrow::after{
  content:"";position:absolute;right:0;top:50%;
  width:8px;height:8px;border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.btn:hover .arrow{animation:nudge .6s var(--ease)}
@keyframes nudge{0%{transform:translateX(0)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);
  border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:color .3s var(--ease),gap .3s var(--ease);
}
.link-arrow:hover{gap:14px;color:var(--gold)}
.link-arrow--on-dark{color:var(--gold-soft)}
.link-arrow--on-dark:hover{color:var(--gold)}

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;opacity:.5;
}

/* ---------- Reveal animation ---------- */
/* Default to visible. JS adds .js-reveal which hides until intersect. */
[data-reveal]{opacity:1;transform:none}
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:var(--rd,0ms);
}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}