/* Design tokens.
   Palette, container width and breakpoints are taken from the reference publication's
   own stylesheet so the layout proportions match rather than being approximated. */

:root {
  /* Brand — drawn from the ARTER logo: sumi ink on rice paper, gold seal ------
     The gold is kept from the established brand; the neutrals are re-warmed
     from cold white/grey to the logo's cream paper and warm ink. */
  --c-accent: #B69460;          /* the gold seal-dot */
  --c-accent-dark: #8c6f3f;
  --c-accent-tint: #f3ecda;     /* pale gold wash */
  --c-seal: #b0893a;            /* deeper ochre, for small accents */
  --c-wash: #c9bba4;            /* the taupe ink-wash circle */

  /* Neutrals — warm paper & ink -------------------------------------------- */
  --c-ink: #1d1a16;             /* warm near-black, like brushed ink */
  --c-body: #3d372e;            /* warm dark for body copy */
  --c-muted: #7c7365;           /* taupe-grey */
  --c-faint: #9b917f;           /* lighter taupe */
  --c-rule: #e4ddce;            /* warm hairline */
  --c-rule-soft: #ece6d8;
  --c-paper: #f4efe4;           /* page background — the logo's cream */
  --c-surface: #fcfaf4;         /* cards: warm off-white that lifts off paper */
  --c-surface-alt: #f1ebdd;
  --c-surface-sunk: #ebe4d4;

  /* Type ------------------------------------------------------------------- */
  /* Typography echoes the ARTER logo: an elegant serif for the wordmark, hero and
     headings, over Nunito Sans for body copy and the menu (kept sans on purpose).
     - display: Playfair Display — the logo's high-contrast wordmark look
     - serif:   Cardo — a calmer classical serif for the many headings/titles
     - sans:    Nunito Sans — body, navigation and all UI chrome */
  --f-sans: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-serif: 'Cardo', Georgia, 'Times New Roman', serif;
  --f-display: 'Playfair Display', Georgia, serif;
  --f-poppins: var(--f-sans);

  --fs-eyebrow: 0.6875rem;   /* 11px — category badges, meta */
  --fs-meta: 0.75rem;        /* 12px */
  --fs-small: 0.8125rem;     /* 13px */
  --fs-body: 1rem;           /* 16px */
  --fs-lead: 1.125rem;       /* 18px */
  --fs-h4: 1.25rem;          /* 20px */
  --fs-h3: 1.5rem;           /* 24px */
  --fs-h2: 2rem;             /* 32px */
  --fs-h1: 2.75rem;          /* 44px */
  --fs-display: 3.5rem;      /* 56px — homepage hero */

  /* Rhythm ----------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Layout ----------------------------------------------------------------- */
  --container: 1400px;
  --container-pad: 50px;
  --gutter: 32px;

  /* The main feed sits left of a persistent sidebar on desktop. */
  --sidebar-w: 336px;

  --header-h: 74px;

  /* Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  --shadow-sm: 0 1px 3px rgba(40, 32, 20, 0.08);
  --shadow-md: 0 6px 24px rgba(40, 32, 20, 0.10);
  --shadow-lg: 0 18px 48px rgba(40, 32, 20, 0.15);

  --z-header: 100;
  --z-dropdown: 110;
  --z-drawer: 200;
  --z-overlay: 190;
}

@media (max-width: 1200px) {
  :root {
    --container-pad: 40px;
    --sidebar-w: 300px;
    --fs-display: 2.75rem;
    --fs-h1: 2.25rem;
  }
}

@media (max-width: 991px) {
  :root {
    --gutter: 24px;
    --fs-display: 2.25rem;
    --fs-h1: 2rem;
    --fs-h2: 1.625rem;
  }
}

@media (max-width: 600px) {
  :root {
    --container-pad: 20px;
    --fs-display: 1.875rem;
    --fs-h1: 1.625rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.25rem;
    --header-h: 60px;
  }
}