/* Maritsa design system v1.1 (30 Oct 2026)
   Tokens and editorial rules for Maritsa Stories. Load after stories.css.
   Spec: Maritsa Design System and Brand Guidelines v1-0. Change the spec first, then this file. */

:root{
  /* colour */
  --m-grove:#2C3B1F;      /* primary ink, headings */
  --m-harvest:#C8960C;    /* accent: rules, buttons, italics in display */
  --m-harvest-ink:#8a6a08;/* accent as text on light (AA on cream) */
  --m-gold-on-dark:#E7B62E;
  --m-parchment:#F2ECD8;  /* panels */
  --m-cream:#FBF8EF;      /* page */
  --m-ink:#1a1710;        /* body text */
  --m-muted:#6b6553;      /* captions, meta */
  --m-rule:#e3dcc4;
  /* type */
  --m-serif:"Playfair Display",Georgia,serif;
  --m-sans:"Lato",system-ui,sans-serif;
  --m-label:"DM Sans",system-ui,sans-serif;
  --m-fs-display:clamp(40px,5vw,64px);
  --m-fs-h2:clamp(30px,3vw,42px);
  --m-fs-h3:clamp(22px,2vw,26px);
  --m-fs-standfirst:clamp(22px,2.2vw,28px);
  --m-fs-quote:clamp(22px,2.2vw,28px);
  --m-fs-body:19px;
  --m-fs-small:15px;
  --m-fs-label:11px;
  --m-fs-caption:12px;
  /* space: 4px base */
  --m-s1:4px;--m-s2:8px;--m-s3:12px;--m-s4:16px;--m-s5:24px;--m-s6:32px;--m-s7:48px;--m-s8:64px;--m-s9:96px;
}
@media (max-width:767px){:root{--m-fs-body:17px;--m-s9:64px;--m-s8:48px}}

/* ---------- Story article ---------- */

/* standfirst: serif, clearly above body */
html :is(#maincontent,body) .bk.mrt-story .bk-measure > .bk-standfirst{font-family:var(--m-serif)!important;font-weight:400!important;font-size:var(--m-fs-standfirst)!important;line-height:1.45!important;color:var(--m-grove)!important;margin:var(--m-s8) 0 0!important}
/* byline: label, then clear space before the first paragraph */
html :is(#maincontent,body) .bk.mrt-story .bk-measure > .bk-byline{margin:var(--m-s5) 0 var(--m-s7)!important;padding:var(--m-s4) 0 0!important;border-top:1px solid var(--m-rule)!important;font-family:var(--m-label)!important;font-size:var(--m-fs-label)!important;letter-spacing:.2em!important;color:var(--m-muted)!important}

/* body copy, wherever it sits */
html :is(#maincontent,body) .bk.mrt-story .bk-measure > p:not([class]),
html :is(#maincontent,body) .bk.mrt-story .bk-body p,
html :is(#maincontent,body) .bk.mrt-story .bk-body li{font-family:var(--m-sans)!important;font-weight:300!important;font-size:var(--m-fs-body)!important;line-height:1.7!important;color:var(--m-ink)!important}
html :is(#maincontent,body) .bk.mrt-story .bk-measure > p:not([class]){margin:0 0 var(--m-s5)!important}
html :is(#maincontent,body) .bk.mrt-story .bk-body p + p{margin-top:var(--m-s5)!important}

/* section heading block: one rhythm for every section */
html :is(#maincontent,body) .bk.mrt-story .bk-measure > .bk-section{margin:var(--m-s9) 0 0!important}
html :is(#maincontent,body) .bk.mrt-story .bk-section .bk-eyebrow{margin:0 0 var(--m-s3)!important}
html :is(#maincontent,body) .bk.mrt-story .bk-section h2.bk-title{font-size:var(--m-fs-h2)!important;line-height:1.12!important;margin:0!important}
html :is(#maincontent,body) .bk.mrt-story .bk-measure > .bk-body,
html :is(#maincontent,body) .bk.mrt-story .mrt-split-text .bk-body{margin:var(--m-s5) 0 0!important}

/* split section: text and image align to the top, same heading rhythm */
html :is(#maincontent,body) .bk.mrt-story .mrt-split{align-items:start!important;gap:var(--m-s8)!important;margin-top:var(--m-s9)!important}
html :is(#maincontent,body) .bk.mrt-story .mrt-split-text .bk-section{margin:0!important}
html :is(#maincontent,body) .bk.mrt-story .mrt-split-fig figcaption{margin-top:var(--m-s2)!important}

/* film and figures */
html :is(#maincontent,body) .bk.mrt-story .theo-film,
html :is(#maincontent,body) .bk.mrt-story .bk-measure > figure{margin:var(--m-s7) 0!important}
html :is(#maincontent,body) .bk.mrt-story figcaption{font-family:var(--m-label)!important;font-size:var(--m-fs-caption)!important;line-height:1.5!important;color:var(--m-muted)!important}

/* pull quote: one per story, approved wording only; no rule or bar */
html :is(#maincontent,body) .bk.mrt-story blockquote.theo-pull{font-family:var(--m-serif)!important;font-style:italic!important;font-size:var(--m-fs-quote)!important;line-height:1.4!important;margin:var(--m-s6) 0!important;padding:0!important;border:0!important}

/* asides */
html :is(#maincontent,body) .bk.mrt-story .theo-book{margin:var(--m-s8) 0 0!important}
html :is(#maincontent,body) .bk.mrt-story .theo-book{padding:var(--m-s6)!important}
html :is(#maincontent,body) .bk.mrt-story .theo-book .tb-eb{font-family:var(--m-label)!important;font-size:var(--m-fs-label)!important;font-weight:700!important;letter-spacing:.22em!important;color:var(--m-grove)!important;margin:0 0 var(--m-s3)!important}
html :is(#maincontent,body) .bk.mrt-story .theo-book h3{font-size:var(--m-fs-h3)!important;line-height:1.2!important;margin:0 0 var(--m-s3)!important}
html :is(#maincontent,body) .bk.mrt-story .theo-book p:not(.tb-eb){font-family:var(--m-sans)!important;font-weight:300!important;font-size:var(--m-fs-small)!important;line-height:1.6!important;color:var(--m-ink)!important;margin:0 0 var(--m-s5)!important}

/* ---------- Split hero ---------- */
html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split{min-height:clamp(440px,42vw,640px)!important}
html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split > img{object-fit:cover!important;object-position:50% 22%!important;background:#111!important}
@media (max-width:767px){
  html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split{display:block!important;min-height:0!important;padding:0!important}
  html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split > img{position:static!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important}
  html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split .bk-hero-inner{padding:var(--m-s6) var(--m-s5) var(--m-s7)!important;max-width:none!important;margin:0!important}
  html :is(#maincontent,body) .bk.mrt-story .bk-hero.bk-hero-split .bk-caption{position:static!important;padding:0 var(--m-s5) var(--m-s5)!important;color:rgba(255,255,255,.6)!important}
  html :is(#maincontent,body) .bk.mrt-story .mrt-split{gap:var(--m-s5)!important}
}