/* =========================================================
   mémoire art · design system
   Tokens, fonts, base styles and utilities.
   Change colours or fonts here and the whole site follows.
   ========================================================= */

/* ---------- Fonts (self-hosted: no Google requests, no cookie banner needed) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/inter-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  /* Brand palette */
  --sage:#7B9E87;      /* primary brand colour */
  --sage-d:#4d6b57;    /* darker sage for text on light backgrounds */
  --mauve:#B49BB5;     /* soft supporting colour */
  --ivory:#FAF6F0;     /* page background */
  --denim:#7A9EB8;     /* contrast accent */
  --gold:#E8C448;      /* highlights and buttons */
  --ink:#2a2420;       /* main text */
  --muted:#6f645c;     /* secondary text */
  --line:#e8dfd3;      /* borders */
  --night:#14202e;     /* dark sections */
  --pine:#1d4d36;      /* seasonal (Christmas) section */

  /* Typography */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:17px;
  --fs-small:14px;
  --fs-h1:clamp(42px,6.6vw,86px);
  --fs-h2:clamp(34px,5vw,60px);
  --fs-h3:26px;

  /* 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:110px;

  /* Shape and depth */
  --radius-s:6px;--radius-m:14px;--radius-l:20px;--radius-pill:999px;
  --shadow-s:0 8px 20px rgba(42,36,32,.10);
  --shadow-m:0 16px 36px rgba(42,36,32,.14);
  --shadow-l:0 40px 90px rgba(0,0,0,.5);

  --wrap:1120px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font:400 var(--fs-body)/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- Utilities ---------- */
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.center{text-align:center}
.serif{font-family:var(--font-display)}
.kicker{font:600 12px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:var(--radius-pill);font:600 15px var(--font-body);text-decoration:none;cursor:pointer;border:0;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}

/* Scroll reveal (only when JavaScript is available) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- Breakpoints (reference) ----------
   320px  small phones
   480px  phones
   768px  tablets portrait  ← main layout switch
   1024px tablets landscape / small laptops
   1280px laptops
   1440px large screens
------------------------------------------------ */
@media (max-width:480px){:root{--fs-body:16px}}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}