/* ==========================================================================
   JENNIFER EWBANK  ·  BRAND TOKENS  ·  v1.0
   Grant & Graham Ltd, London  ·  27 July 2026
   Colours sampled directly from the artist mood board.
   This file is the single source of truth. Import it first in every build.
   Never hard code a colour value anywhere else.
   ========================================================================== */

:root {

  /* ---- Core palette ---------------------------------------------------- */
  --je-plum:          #40272B;  /* primary dark: navigation, footer, hero overlay */
  --je-plum-deep:     #2A1E22;  /* deepest surface: wordmark lockup panel        */
  --je-navy:          #262D37;  /* secondary dark: alternating sections, body    */
  --je-pine:          #485F59;  /* supporting accent: live and tour surfaces     */
  --je-amber:         #D2923E;  /* primary accent: buttons, rules, highlights    */
  --je-clay:          #B47774;  /* secondary accent: tags, icons, hovers         */
  --je-blush:         #CB8D82;  /* tertiary accent: dividers, quiet emphasis     */
  --je-blush-light:   #E3B0A4;  /* wordmark lettering and text on plum           */
  --je-sand:          #DAC9B3;  /* light surface: cards, panels, table bands     */
  --je-cream:         #EEDFCD;  /* page background: the default canvas           */
  --je-off-white:     #FBF6EF;  /* maximum light: forms, inset panels            */
  --je-clay-deep:     #7D5351;  /* accent ink. Clay Rose deepened to stay readable
                                   as small text on light grounds                */

  /* ---- Semantic roles. Use these in components, not the raw names ------- */
  --je-bg:            var(--je-cream);
  --je-bg-alt:        var(--je-off-white);
  --je-bg-dark:       var(--je-plum);
  --je-bg-card:       var(--je-off-white);
  --je-surface-warm:  var(--je-sand);

  --je-text:          var(--je-navy);
  --je-text-muted:    #5C5450;
  --je-text-on-dark:  var(--je-cream);
  --je-text-accent:   var(--je-blush-light);

  --je-action:        var(--je-amber);
  --je-action-text:   var(--je-plum-deep);
  --je-action-hover:  var(--je-clay);
  --je-rule:          rgba(64, 39, 43, 0.18);
  --je-rule-strong:   var(--je-amber);

  /* ---- Type ------------------------------------------------------------ */
  --je-font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --je-font-ui:       'Jost', 'Segoe UI', Verdana, sans-serif;
  --je-font-hand:     'Caveat', cursive;

  --je-size-hero:     clamp(2.75rem, 7vw, 5.5rem);
  --je-size-h1:       clamp(2.1rem, 4.5vw, 3.4rem);
  --je-size-h2:       clamp(1.6rem, 3vw, 2.3rem);
  --je-size-h3:       1.35rem;
  --je-size-body:     1.0625rem;
  --je-size-small:    0.9375rem;
  --je-size-label:    0.75rem;

  --je-leading-tight: 1.08;
  --je-leading-body:  1.65;
  --je-track-label:   0.18em;
  --je-track-nav:     0.14em;

  /* ---- Space, radius, motion ------------------------------------------- */
  --je-gutter:        clamp(1.25rem, 5vw, 4rem);
  --je-section:       clamp(3.5rem, 9vw, 7.5rem);
  --je-max:           1180px;
  --je-max-text:      68ch;
  --je-radius:        4px;
  --je-radius-pill:   999px;
  --je-shadow:        0 14px 40px rgba(42, 30, 34, 0.16);
  --je-ease:          220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---- Base ---------------------------------------------------------------- */
body.je {
  margin: 0;
  background: var(--je-bg);
  color: var(--je-text);
  font-family: var(--je-font-ui);
  font-size: var(--je-size-body);
  font-weight: 400;
  line-height: var(--je-leading-body);
  text-rendering: optimizeLegibility;
}

.je h1, .je h2, .je h3, .je .je-display {
  font-family: var(--je-font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 100;
  line-height: var(--je-leading-tight);
  letter-spacing: -0.01em;
  color: var(--je-text);
  margin: 0 0 0.5em;
}
.je h1 { font-size: var(--je-size-h1); }
.je h2 { font-size: var(--je-size-h2); }
.je h3 { font-size: var(--je-size-h3); }
.je p  { max-width: var(--je-max-text); margin: 0 0 1.15em; }
.je a  { color: var(--je-clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.je a:hover { color: var(--je-plum); }

/* Section eyebrow label. Letterspaced caps, the mood board navigation voice */
.je-label {
  font-family: var(--je-font-ui);
  font-size: var(--je-size-label);
  font-weight: 500;
  letter-spacing: var(--je-track-label);
  text-transform: uppercase;
  color: var(--je-clay);
  margin: 0 0 0.9rem;
}

/* Handwritten accent. Captions and margin notes only, never body copy */
.je-hand { font-family: var(--je-font-hand); font-size: 1.5rem; color: var(--je-clay); }

/* ---- Layout -------------------------------------------------------------- */
.je-wrap    { max-width: var(--je-max); margin: 0 auto; padding: 0 var(--je-gutter); }
.je-section { padding: var(--je-section) 0; }
.je-section--dark  { background: var(--je-bg-dark); color: var(--je-text-on-dark); }
.je-section--dark h1, .je-section--dark h2, .je-section--dark h3 { color: var(--je-text-accent); }
.je-section--warm  { background: var(--je-surface-warm); }
.je-section--pine  { background: var(--je-pine); color: var(--je-off-white); }

/* ---- Navigation ---------------------------------------------------------- */
.je-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--je-plum); color: var(--je-cream);
  padding: 1rem var(--je-gutter);
}
.je-nav a {
  font-family: var(--je-font-ui); font-size: var(--je-size-label); font-weight: 400;
  letter-spacing: var(--je-track-nav); text-transform: uppercase;
  color: var(--je-cream); text-decoration: none; transition: color var(--je-ease);
}
.je-nav a:hover, .je-nav a[aria-current='page'] { color: var(--je-blush-light); }
.je-nav__mark {
  font-family: var(--je-font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: var(--je-track-nav); text-transform: uppercase; color: var(--je-blush-light);
}

/* ---- Buttons ------------------------------------------------------------- */
.je-btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  font-family: var(--je-font-ui); font-size: var(--je-size-label); font-weight: 500;
  letter-spacing: var(--je-track-label); text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 2.1rem; border-radius: var(--je-radius-pill);
  background: var(--je-action); color: var(--je-action-text);
  transition: background var(--je-ease), color var(--je-ease), transform var(--je-ease);
}
.je-btn:hover { background: var(--je-action-hover); color: var(--je-off-white); transform: translateY(-1px); }
.je-btn--ghost { background: transparent; border-color: var(--je-blush-light); color: var(--je-blush-light); }
.je-btn--ghost:hover { background: var(--je-blush-light); color: var(--je-plum-deep); }

/* ---- Cards and rules ----------------------------------------------------- */
.je-card {
  background: var(--je-bg-card); border: 1px solid var(--je-rule);
  border-radius: var(--je-radius); padding: 1.75rem; box-shadow: var(--je-shadow);
}
.je-rule { height: 2px; width: 64px; background: var(--je-rule-strong); border: 0; margin: 0 0 1.5rem; }

/* ---- Imagery ------------------------------------------------------------- */
.je-figure img { display: block; width: 100%; height: auto; border-radius: var(--je-radius); }
.je-figure figcaption {
  font-size: var(--je-size-small); color: var(--je-text-muted); margin-top: 0.65rem;
}
/* Warm grade for cool or flat source photography. Apply sparingly */
.je-img--graded { filter: saturate(1.04) contrast(1.03) sepia(0.06); }

/* ---- Accessibility guards ------------------------------------------------
   Golden Amber and Clay Rose fail contrast as small text on light grounds.
   Use them for fills, rules and display sizes only.
   Safe body text pairs: Navy or Plum on Cream, Cream or Sand on Plum or Navy.
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--je-amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}