/* McBeth Kings — brand tokens v2.0 (The Key) · 4 October 2026
   One file every surface loads: mcbethkings.com, Dispatch, the Academy, agent pages.
   Spec: BRAND-SYSTEM-v2.md. Asset paths are relative to this file — keep the assets/ folder beside it. */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Montserrat:wght@400;500;600;700&display=swap");

:root{
  /* colour (unchanged from v1) */
  --mk-gold:#C5A359;        /* text only on dark */
  --mk-bronze:#8C6A3B;      /* the accent on paper */
  --mk-ivory:#F6F2EB;
  --mk-black:#1C1C1C;
  --mk-charcoal:#3C3C3C;
  --mk-ink:#232120;         /* reading text on paper */
  --mk-muted:rgba(60,60,60,.74);
  --mk-muted-dark:rgba(246,242,235,.64);
  --mk-hairline:rgba(60,60,60,.16);
  --mk-hairline-dark:rgba(246,242,235,.14);

  /* type */
  --mk-display:"Playfair Display",Georgia,serif;
  --mk-read:Newsreader,Georgia,serif;
  --mk-sans:Montserrat,system-ui,-apple-system,sans-serif;

  /* geometry */
  --mk-radius:0;
  --mk-measure:660px;       /* reading column */

  /* motion */
  --mk-ease:cubic-bezier(.16,1,.3,1);
  --mk-reveal:.9s;
}

/* ---------- grounds (textures locked 4 Oct 2026; never replace with CSS gradients) ---------- */
.mk-dark{background:url(assets/grain-tile.png) repeat,var(--mk-black);color:var(--mk-ivory)}
.mk-dark-panel{background:url(assets/vignette.png) center/100% 100% no-repeat,url(assets/grain-tile.png) repeat,var(--mk-black);color:var(--mk-ivory)}
.mk-paper{background:url(assets/paper-mottle-v4.png) repeat,url(assets/paper-tile.png) repeat,var(--mk-ivory);color:var(--mk-ink)}

/* ---------- type ---------- */
.mk-hero{font:400 clamp(40px,6vw,72px)/1.04 var(--mk-display);letter-spacing:-.025em}
.mk-h1{font:400 48px/1.08 var(--mk-display);letter-spacing:-1.2px}
.mk-h2{font:400 34px/1.15 var(--mk-display);letter-spacing:-.6px}
.mk-h3{font:400 24px/1.25 var(--mk-display)}
.mk-hero em,.mk-h1 em,.mk-h2 em{font-style:italic;color:var(--mk-bronze)}
.mk-dark .mk-hero em,.mk-dark .mk-h1 em,.mk-dark .mk-h2 em,.mk-dark-panel .mk-hero em{color:var(--mk-gold)}
.mk-reading{max-width:var(--mk-measure)}
/* plain paragraphs only — :where() keeps specificity low so .mk-label / .mk-lede / .mk-pull keep their own styles */
.mk-reading :where(p:not([class])){font:400 20px/1.62 var(--mk-read);font-optical-sizing:auto;margin:0 0 18px}
.mk-lede{font:400 23px/1.5 var(--mk-read)}
.mk-label{display:flex;align-items:center;gap:16px;font:500 11px/1.4 var(--mk-sans);letter-spacing:3.2px;text-transform:uppercase;color:var(--mk-muted)}
.mk-label::before{content:"";width:44px;height:1px;background:var(--mk-gold);flex:none}
.mk-dark .mk-label,.mk-dark-panel .mk-label{color:var(--mk-muted-dark)}
.mk-paper .mk-label{color:var(--mk-bronze)}
.mk-pull{font:italic 400 26px/1.3 var(--mk-display);color:var(--mk-bronze);border-left:2px solid var(--mk-gold);padding-left:20px}

/* ---------- components ---------- */
.mk-btn{display:inline-block;font:500 12px/1 var(--mk-sans);letter-spacing:.9px;text-transform:uppercase;padding:16px 24px;border:1px solid transparent;border-radius:var(--mk-radius);text-decoration:none;cursor:pointer}
.mk-btn--gold{background:var(--mk-gold);color:var(--mk-black);border-color:var(--mk-gold)}     /* arrival only */
.mk-btn--dark{background:var(--mk-black);color:var(--mk-ivory);border-color:var(--mk-black)}  /* working surfaces */
.mk-btn--line{background:transparent;color:inherit;border-color:currentColor}
.mk-portrait{border-radius:50%;border:1px solid var(--mk-gold);padding:6px}
.mk-rule{width:44px;height:1px;background:var(--mk-gold)}
.mk-card{border:1px solid var(--mk-hairline);border-radius:var(--mk-radius)}
.mk-dark .mk-card,.mk-dark-panel .mk-card{border-color:var(--mk-hairline-dark)}
.mk-paper{background:url(assets/paper-mottle-v4.png) repeat,#FFFFFF!important}
.sheet:not(.dark),.card:not(.dark){background:url(/brand/assets/paper-card-v2.png) repeat,#FBFAF7!important}

/* Crisp type everywhere: native rendering, optical sizes, real (not faked) bold */
html,body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-rendering:auto;font-optical-sizing:auto}
strong,b{font-weight:600}