/* The admin's style choices (owner, 2026-10-26: "the colors, the font size, the typography, all should our brand
   guidelines only"). The admin (admin/, tools/admin_server.py) puts one of these classes on an element; nothing else
   can be chosen there, so every size is a type-scale token, every colour a brand colour and every face a brand font
   from css/site.css. Linked last on every page, and !important, so a choice wins over the page's own rule for that
   element. ed- prefix; the admin's list of choices is in admin/admin-core.js (STYLE_GROUPS) and must match this file. */

/* size: the owner's type scale */
.ed-size-display { font-size: var(--t-display) !important; line-height: 1.1 !important; letter-spacing: -0.03em; }
.ed-size-h1 { font-size: var(--t-h1) !important; line-height: 1.12 !important; letter-spacing: -0.025em; }
.ed-size-h2 { font-size: var(--t-h2) !important; line-height: 1.15 !important; letter-spacing: -0.02em; }
.ed-size-h3 { font-size: var(--t-h3) !important; line-height: 1.2 !important; letter-spacing: -0.015em; }
.ed-size-h4 { font-size: var(--t-h4) !important; line-height: 1.25 !important; }
.ed-size-h5 { font-size: var(--t-h5) !important; line-height: 1.3 !important; }
.ed-size-h6 { font-size: var(--t-h6) !important; line-height: 1.35 !important; }
.ed-size-lead { font-size: var(--t-lead) !important; line-height: 1.55 !important; }
.ed-size-body { font-size: var(--t-body) !important; line-height: 1.6 !important; }
.ed-size-small { font-size: var(--t-small) !important; line-height: 1.55 !important; }
.ed-size-cap { font-size: var(--t-cap) !important; line-height: 1.45 !important; }

/* text colour: the brand palette */
.ed-color-ink { color: var(--ink) !important; }
.ed-color-grey { color: var(--ink-2) !important; }
.ed-color-gold { color: var(--gold) !important; }
.ed-color-gold-light { color: var(--gold-light) !important; }
.ed-color-gold-deep { color: var(--gold-deep) !important; }
.ed-color-gold-mark { color: var(--gold-mark) !important; }
.ed-color-gold-ink { color: var(--gold-ink) !important; }
.ed-color-midnight { color: var(--dark) !important; }
.ed-color-white { color: #fff !important; }

/* background: the brand surfaces */
.ed-bg-white { background-color: #fff !important; }
.ed-bg-panel { background-color: var(--panel) !important; }
.ed-bg-midnight { background-color: var(--dark) !important; }
.ed-bg-card { background-color: var(--dark-2) !important; }
.ed-bg-gold { background-color: var(--gold) !important; }

/* typography: the brand faces (Space Grotesk exists in bold only, so it brings its weight) */
.ed-font-head { font-family: var(--font-head) !important; font-weight: 700 !important; }
.ed-font-body { font-family: var(--font) !important; }
.ed-weight-400 { font-weight: 400 !important; }
.ed-weight-500 { font-weight: 500 !important; }
.ed-weight-700 { font-weight: 700 !important; }

/* a picture's focus inside its frame */
.ed-pos-top { object-position: 50% 0 !important; }
.ed-pos-center { object-position: 50% 50% !important; }
.ed-pos-bottom { object-position: 50% 100% !important; }

/* a picture the admin added */
.ed-img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }