/* Stella's Ballroom — design tokens.
   Decided once, used everywhere. Do not introduce colours,
   fonts or spacing values outside this file.

   The neutrals are taken from the room itself: white marble floor,
   white coffered ceiling, glass. They run cool on purpose — a warm
   cream ground fights every photograph on the site. The single
   accent is sampled from the logo artwork. */

:root{
  /* Accent — the only colour that isn't a neutral */
  --crimson:       #7a0a15;
  --crimson-deep:  #5c060f;
  --crimson-tint:  #f4eef0;

  /* Neutral base — cool, biased very slightly toward the accent */
  --ink:           #14161a;
  --ink-soft:      #2b3037;
  --paper:         #fbfbfc;
  --pearl:         #eef0f3;
  --line:          #dfe3e8;
  --line-strong:   #c3c9d1;   /* dividers that have to read at a glance */
  --on-dark:       #ffffff;   /* every piece of text that sits on a dark ground */
  --rose:          #e8c3c3;   /* the one accent used on dark grounds */

  /* Type — Marcellus echoes the engraved capitals in the wordmark;
     Jost is a geometric sans that stays out of its way. */
  --font-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --font-body:    "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale — every size on the page comes from this list */
  --t-display-l: 3.5rem;    /* 56px  page title            */
  --t-display-m: 2.75rem;   /* 44px  section headings      */
  --t-display-s: 1.75rem;   /* 28px  card headings          */
  --t-display-xs:1.3125rem; /* 21px  pull quote, sub-heads */
  --t-body-l:    1.0625rem; /* 17px  lead paragraphs       */
  --t-body:      1rem;      /* 16px  body                  */
  --t-body-s:    .9375rem;  /* 15px  secondary body        */
  --t-fine:      .8125rem;  /* 13px  captions, fine print  */
  /* Decoration, not text: the large pale index numbers in Services. */
  --t-numeral:   clamp(4.5rem, 12vw, 6rem);

  /* Two label roles, and only two */
  --t-label:      .6875rem; /* 11px */
  --t-label-nav:  .75rem;   /* 12px */
  --track-label:  .2em;
  --track-nav:    .14em;
  --weight-label: 500;

  /* Spacing — 4 / 8 scale, no other values */
  --s-1:4px;  --s-2:8px;  --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px;

  /* Surface */
  --radius:2px;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 10px 30px rgba(20,22,26,.08);
  /* One shadow for any text sitting over a photograph. */
  --shadow-text:0 1px 14px rgba(12,14,18,.55);

  /* Motion — explain, never decorate */
  --dur:200ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  --maxw:1120px;

  /* Side gutter. 16px was too tight against a phone's edge; it steps up
     with the screen and is back to 32px by tablet width. */
  --gutter:1.25rem;

  /* Scrollbar — warm neutrals, so the bar reads as part of the page rather
     than as the operating system's. Set here because the scrollbar belongs
     to <html>, which sits outside .palette-warm. */
  --scroll-track:       #f0edea;
  --scroll-thumb:       #c2bbb4;
  --scroll-thumb-hover: #9a928b;
  --header-h:76px;
}

@media (min-width:480px){ :root{--gutter:1.5rem} }
@media (min-width:900px){ :root{--gutter:2rem} }

/* Warm palette — from Leighton's mockups. Used on every section from the
   Welcome down to the contact section (class="palette-warm"); the hero and
   the footer keep the cool neutrals above. Contrast on the ivory ground: ink-soft
   8.5:1, crimson 8.0:1, bronze 5.8:1, wine 5.3:1. Leaf is decoration only,
   never text. */
.palette-warm{
  --crimson:       #7c3440;   /* burgundy */
  --crimson-deep:  #652a34;
  --wine:          #98505a;   /* the handwritten lines */
  --rose:          #b77d82;   /* accent on the dark band, 5.1:1 */
  --ink:           #202024;
  --ink-soft:      #4a4746;
  --paper:         #f8f5f2;   /* warm ivory */
  --pearl:         #f1efed;   /* soft stone */
  --line:          #ddd9d5;
  --line-strong:   #cfc9c3;
  --leaf:          #ddd0c1;   /* the leaf drawings and pale numbers */
  --night:         #181c24;   /* the dark band and the video frame */
  --bronze:        #7d5835;   /* eyebrow, rule and arrow in "The room, in use", 5.8:1 */
  --sage:          #66705b;   /* the only "it worked" colour, 4.9:1 on white */
  --on-dark:       #f7f5f2;
  color:var(--ink);           /* re-read the text colour inside the scope */
}

/* Reduced motion: stop the decorative movement, keep the feedback. Colour and
   fade transitions still run (shortened), so hover, focus and state changes are
   still visible; looping animation and moving transforms stop. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:120ms !important;transition-property:opacity,color,background-color,border-color,box-shadow !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}