/* =========================================================================
   MSS Society — Colors & Type
   Drawn from the historic 1909 banner, the Madonna statue in Norristown,
   and the Sicilian feast at Sciacca. Traditional, devotional, restrained.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Italianno&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  /* -----------------------------------------------------------------------
     COLOR — Primary palette
     The MSS palette is built on three foundations: Marian Blue (the
     Madonna's mantle), Vara Gold (the gilded carriage), and Banner Cream
     (the 1909 silk banner). Coral Red accents from the carnations and
     coral-bead rosaries provide warmth and a Sicilian signature.
     ----------------------------------------------------------------------- */

  /* Marian Blue — the Madonna's mantle, deep and devotional */
  --mss-marian-50:  #ECF2F7;
  --mss-marian-100: #D2E0EC;
  --mss-marian-200: #A6C0D8;
  --mss-marian-300: #6E96B6;
  --mss-marian-400: #3F6F92;
  --mss-marian-500: #1B4D6E;  /* PRIMARY */
  --mss-marian-600: #143E5A;
  --mss-marian-700: #0E2F47;
  --mss-marian-800: #0A2335;
  --mss-marian-900: #061824;

  /* Sicilian Sea — a brighter, brighter Marian variant for accents,
     pulled from the Madonna's lighter blue robe details */
  --mss-sea-300: #5BA0C2;
  --mss-sea-400: #2C7A9E;
  --mss-sea-500: #1F6585;

  /* Vara Gold — the gilded baroque carriage. Use sparingly and at full
     saturation; never as background of paragraphs. */
  --mss-gold-50:  #FAF3DE;
  --mss-gold-100: #F0E2B0;
  --mss-gold-200: #E1C97A;
  --mss-gold-300: #CFAE52;
  --mss-gold-400: #B8893A;  /* PRIMARY GOLD */
  --mss-gold-500: #9A6F2A;
  --mss-gold-600: #7A5520;
  --mss-gold-700: #5C3F18;

  /* Coral Red — Sicilian carnations and coral rosary beads. Strictly an
     accent color (links, dots, badges, the heart icon, alerts). */
  --mss-coral-300: #E27486;
  --mss-coral-400: #C8202B;  /* PRIMARY RED */
  --mss-coral-500: #A11923;
  --mss-coral-600: #7E1018;

  /* Italian Green — the top panel of the 1909 banner. Tertiary; used
     only in flag/tricolor moments or for "in-good-standing" badges. */
  --mss-green-300: #6E9A7A;
  --mss-green-400: #3F6E4E;
  --mss-green-500: #2D5A3D;
  --mss-green-600: #1F4129;

  /* -----------------------------------------------------------------------
     COLOR — Neutrals
     Warm cream-to-stone scale. Cooler grays read modern/corporate and
     fight the traditional feel — we lean warm.
     ----------------------------------------------------------------------- */

  --mss-cream-50:  #FBF7EC;  /* Page background */
  --mss-cream-100: #F4ECDB;  /* Banner silk — card surfaces */
  --mss-cream-200: #E8DCC1;  /* Hover surface, dividers */
  --mss-cream-300: #D4C29B;  /* Disabled, watermarks */

  --mss-stone-300: #C9A984;  /* Sicilian stone, photo overlays */
  --mss-stone-400: #9C8262;
  --mss-stone-500: #6E5A44;
  --mss-stone-600: #4A3D2E;
  --mss-stone-700: #2E2620;
  --mss-stone-800: #1A1410;  /* Body text on cream */
  --mss-stone-900: #0E0A07;  /* Near-black, never pure black */

  --mss-ink: var(--mss-stone-800);
  --mss-ink-soft: var(--mss-stone-500);
  --mss-line: rgba(46, 38, 32, 0.14);
  --mss-line-strong: rgba(46, 38, 32, 0.28);

  /* -----------------------------------------------------------------------
     COLOR — Semantic tokens
     What you actually reach for when building UI.
     ----------------------------------------------------------------------- */

  --fg-1: var(--mss-stone-800);          /* Headings, body */
  --fg-2: var(--mss-stone-600);          /* Secondary text */
  --fg-3: var(--mss-stone-500);          /* Captions, metadata */
  --fg-4: var(--mss-stone-400);          /* Disabled */
  --fg-inverse: var(--mss-cream-50);     /* Text on dark surfaces */
  --fg-gold: var(--mss-gold-500);        /* Numerals, dates, ornaments */
  --fg-accent: var(--mss-coral-400);     /* Links, action accents */

  --bg-page: var(--mss-cream-50);        /* Default page bg */
  --bg-surface: #FFFFFF;                 /* Card/panel surface */
  --bg-surface-warm: var(--mss-cream-100); /* "Silk" surface */
  --bg-sunken: var(--mss-cream-200);     /* Inputs, code, quote */
  --bg-dark: var(--mss-marian-700);      /* Hero, footer */
  --bg-dark-deep: var(--mss-marian-900); /* Procession-night */

  --brand-primary: var(--mss-marian-500);
  --brand-primary-hover: var(--mss-marian-600);
  --brand-accent: var(--mss-gold-400);
  --brand-accent-hover: var(--mss-gold-500);

  --status-success: var(--mss-green-500);
  --status-warning: var(--mss-gold-500);
  --status-danger:  var(--mss-coral-500);
  --status-info:    var(--mss-sea-400);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Families
     ----------------------------------------------------------------------- */

  /* Display serif — classical, italian-leaning, used for headings,
     mastheads, page titles. Tracks well at large sizes. */
  --font-display: "Cormorant Garamond", "EB Garamond", "Hoefler Text", Garamond, serif;

  /* Body serif — warm humanist serif, easier to read at small sizes.
     Pair with --font-display: display sets the tone, body does the work. */
  --font-body: "Lora", "EB Garamond", Georgia, "Times New Roman", serif;

  /* Script — celebratory accent only. Used sparingly: invitations, the
     "Est. 1904" mark, formal salutations, signatures. NEVER for paragraphs
     or UI controls. */
  --font-script: "Italianno", "Snell Roundhand", cursive;

  /* Sans — UI chrome only. Forms, nav, buttons, captions where a serif
     would feel ornate or hurt legibility (e.g. dense tables, small UI). */
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Mono — rare. Used for dates/years/dues amounts and any tabular figure. */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Scale (modular ~1.25, slight ramp at top)
     ----------------------------------------------------------------------- */

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl: 120px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.18em;  /* "EST. 1904" all-caps treatment */

  /* -----------------------------------------------------------------------
     SPACING — 4-pt scale, named after Italian numbers for fun (uno..dieci).
     Use the numeric --space-N aliases for clarity in code.
     ----------------------------------------------------------------------- */

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* -----------------------------------------------------------------------
     RADIUS, BORDERS, SHADOWS
     We use very modest radii. The brand is traditional — sharp corners
     and a single hairline rule read more devotional than rounded cards.
     ----------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  --border-thin:   1px solid var(--mss-line);
  --border-strong: 1px solid var(--mss-line-strong);
  --border-gold:   1px solid var(--mss-gold-300);

  /* Shadows are subtle. Two ambient steps; nothing colorful or floaty. */
  --shadow-sm: 0 1px 0 rgba(46, 38, 32, 0.05), 0 1px 2px rgba(46, 38, 32, 0.06);
  --shadow-md: 0 2px 4px rgba(46, 38, 32, 0.06), 0 8px 16px rgba(46, 38, 32, 0.08);
  --shadow-lg: 0 4px 8px rgba(46, 38, 32, 0.08), 0 24px 48px rgba(46, 38, 32, 0.12);
  --shadow-inset: inset 0 1px 2px rgba(46, 38, 32, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply with the .mss-prose wrapper, or rely on the variables and write
   your own selectors. Either way, these are the canonical specs.
   ========================================================================= */

.mss-prose {
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* -- Display / hero / page title ---------------------------------------- */
.mss-display,
.mss-prose h1,
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

/* -- Section heading ---------------------------------------------------- */
.mss-h2,
.mss-prose h2,
.h-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.mss-h3,
.mss-prose h3,
.h-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

/* -- Eyebrow / kicker (small caps, gold) -------------------------------- */
.mss-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-gold);
}

/* -- Script flourish ---------------------------------------------------- */
.mss-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  line-height: 1;
  color: var(--mss-coral-400);
}

/* -- Body paragraph ----------------------------------------------------- */
.mss-prose p,
.mss-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* -- Lead / intro paragraph --------------------------------------------- */
.mss-lead {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-style: italic;
}

/* -- Small / caption ---------------------------------------------------- */
.mss-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* -- Numeric (years, dues amounts) -------------------------------------- */
.mss-numeral {
  font-family: var(--font-display);
  font-feature-settings: "lnum", "tnum";
  color: var(--fg-gold);
}

/* -- Pull-quote --------------------------------------------------------- */
.mss-prose blockquote,
.mss-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--mss-gold-400);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
}

/* -- Link --------------------------------------------------------------- */
.mss-prose a,
.mss-link {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.mss-prose a:hover,
.mss-link:hover { color: var(--mss-coral-500); }

/* -- Divider: a hairline rule with a gold diamond, like the banner ----- */
.mss-divider {
  position: relative;
  height: 1px;
  background: var(--mss-line);
  margin: var(--space-7) 0;
}
.mss-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--mss-gold-400);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* -- "Tricolor" trim: thin Italian flag bar -- used at hero / footer --- */
.mss-tricolor {
  height: 4px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    var(--mss-cream-100) 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
}