/* ==========================================================================
   Mario Cioni & C. — Design tokens (self-contained for the institutional site)
   Mirrors the brand design system: warm ivory ground, deep near-black ink,
   a single burnished-gold accent, stone grey for secondary text.
   Color is carried by the photography, never by the UI.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---- Base palette ---- */
  --mc-ivory:        #F8F6F2;
  --mc-white:        #FFFFFF;
  --mc-black:        #1A1A18;
  --mc-gold:         #B08B5A;
  --mc-stone:        #8A8880;

  /* ---- Tonal extensions ---- */
  --mc-black-90:     #2A2A27;
  --mc-black-80:     #3A3A36;
  --mc-black-deep:   #100F0E;
  --mc-ivory-shade:  #EFEBE3;
  --mc-ivory-line:   #E4DFD5;
  --mc-gold-deep:    #95713F;
  --mc-gold-soft:    #C9A876;
  --mc-stone-light:  #B6B4AC;

  /* ---- Semantic aliases ---- */
  --surface-page:           var(--mc-ivory);
  --surface-card:           var(--mc-white);
  --surface-inverse:        var(--mc-black);
  --surface-inverse-raised: var(--mc-black-90);
  --surface-band:           var(--mc-ivory-shade);

  --text-primary:        var(--mc-black);
  --text-secondary:      var(--mc-stone);
  --text-on-inverse:     var(--mc-ivory);
  --text-on-inverse-dim: var(--mc-stone-light);
  --text-accent:         var(--mc-gold);

  --accent:         var(--mc-gold);
  --accent-hover:   var(--mc-gold-deep);
  --accent-on-dark: var(--mc-gold-soft);

  --border-hairline:   var(--mc-ivory-line);
  --border-on-inverse: rgba(248, 246, 242, 0.16);

  --scrim-bottom: linear-gradient(to top, rgba(20,20,24,0.78) 0%, rgba(20,20,24,0.35) 38%, rgba(20,20,24,0) 70%);
  --scrim-full:   linear-gradient(to top, rgba(20,20,24,0.70) 0%, rgba(20,20,24,0.10) 55%, rgba(20,20,24,0.20) 100%);

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --fs-hero:  clamp(3.25rem, 6vw, 6rem);
  --fs-h1:    clamp(2.5rem, 4.5vw, 3.75rem);
  --fs-h2:    clamp(2rem, 3.2vw, 3rem);
  --fs-h3:    1.5rem;
  --fs-quote: clamp(1.5rem, 2.6vw, 2.25rem);

  --fs-lead:  1.125rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-display: 1.06;
  --lh-heading: 1.14;
  --lh-body:    1.75;
  --lh-tight:   1.3;

  --ls-display: -0.02em;
  --ls-body:    0;
  --ls-label:   0.16em;
  --ls-cta:     0.15em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --layout-max:    1320px;
  --layout-gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-height:    84px;
  --heritage-band-height: 80px;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadow ---- */
  --shadow-card:  0 1px 2px rgba(26,26,24,0.04), 0 8px 24px rgba(26,26,24,0.06);
  --shadow-raise: 0 2px 4px rgba(26,26,24,0.06), 0 18px 48px rgba(26,26,24,0.10);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

/* ---- Element resets ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0;
  color: inherit;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--mc-gold); color: var(--mc-black); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Shared layout utility ---- */
.mc-container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.mc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.mc-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-quote);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.is-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}