/* Published by brand/design/port-css.py from brand/design/03-pages/assets/ul.css. Don't edit. */
/* ==========================================================================
   Ubuntu Legacy™ — public site mockup stylesheet
   Brand constants + semantic light/dark tokens (DESIGN.md) + shared components.
   Theme: follows prefers-color-scheme; data-theme="light"|"dark" on <html> overrides.
   Fonts are bundled for offline review; the app loads the same families from Google Fonts.
   ========================================================================== */

:root{
  /* ---- Brand constants (BRAND.md + DESIGN.md additions). Components never use these directly for themed colour. ---- */
  --ul-gold:#C89F45; --ul-crimson:#872C27; --ul-charcoal:#3A3A3B; --ul-white:#FFFFFF; --ul-ivory:#F5F2EB;
  --ul-crimson-700:#6E221E; --ul-crimson-050:#FBF3F2; --ul-ivory-200:#ECE6DA;
  --ul-overlay:rgb(58 58 59 / .6);   /* charcoal photo overlay, text-on-photo only */

  --ul-font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --ul-font-body:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Type scale */
  --t-display:clamp(2.5rem,1.6rem + 3.6vw,4.125rem);   /* 40 → 66 */
  --t-h1:clamp(2.25rem,1.7rem + 2.2vw,3.25rem);         /* 36 → 52 */
  --t-h2:clamp(1.625rem,1.4rem + .9vw,2rem);            /* 26 → 32 */
  --t-h3:1.375rem;                                      /* 22 */
  --t-lede:clamp(1.125rem,1.05rem + .35vw,1.3125rem);   /* 18 → 21 */
  --t-body:1rem; --t-small:.875rem; --t-caption:.8125rem; --t-label:.75rem;

  /* Space (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --band:clamp(64px,8vw,128px);
  --gutter:clamp(20px,5vw,48px);
  --max:1200px; --max-text:680px;

  --radius:2px; --radius-pill:999px;
  --focus:2px solid var(--focus-color); --focus-offset:3px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:160ms; --dur-rule:240ms; --dur-screen:320ms;
  --header-h:72px;

  /* ---- Semantic tokens: LIGHT (default) ---- */
  color-scheme: light;
  --bg:#FFFFFF; --surface:var(--ul-ivory); --surface-2:var(--ul-ivory-200);
  --text:var(--ul-charcoal); --heading:var(--ul-charcoal); --muted:#5F5E5C;
  --line:#E3DED5; --control:#8A867F; --control-hover:var(--ul-charcoal); --field-bg:#FFFFFF;
  --action:var(--ul-crimson); --action-hover:var(--ul-crimson-700); --on-action:#FFFFFF; --action-soft:var(--ul-ivory);
  --label:var(--ul-crimson); --accent:var(--ul-crimson); --selected-bg:var(--ul-crimson-050);
  --focus-color:var(--ul-crimson); --error:var(--ul-crimson); --on-error:#FFFFFF; --success:#2F6B47;
  --disabled-bg:var(--ul-ivory-200); --disabled-fg:#5F5E5C;
  --tile:var(--ul-ivory); --tile-alt:#FFFFFF; --logo-pull:1;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23FFFFFF' stroke-width='2.2'/%3E%3C/svg%3E");
  --feature-bg:var(--ul-crimson); --feature-text:#FFFFFF; --feature-label:#FFFFFF;
  --feature-btn-bg:#FFFFFF; --feature-btn-fg:var(--ul-crimson); --feature-btn-hover:var(--ul-ivory);
  --feature-btn2-fg:#FFFFFF; --feature-btn2-border:#FFFFFF; --feature-btn2-hover:var(--ul-crimson-700); --feature-focus:#FFFFFF;
}
/* ---- Semantic tokens: DARK — automatic (system) unless the visitor chose light ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#2A2A2B; --surface:var(--ul-charcoal); --surface-2:#47474A;
    --text:var(--ul-ivory); --heading:var(--ul-ivory); --muted:#B8B3AA;
    --line:#47474A; --control:#908C85; --control-hover:var(--ul-ivory); --field-bg:#232324;
    --action:var(--ul-gold); --action-hover:#D9B86E; --on-action:#2A2A2B; --action-soft:#333334;
    --label:var(--ul-gold); --accent:var(--ul-gold); --selected-bg:#403A2F;
    --focus-color:var(--ul-gold); --error:#F2A69D; --on-error:#2A2A2B; --success:#8CC9A3;
    --disabled-bg:#47474A; --disabled-fg:#B8B3AA;
    --tile:var(--ul-ivory); --tile-alt:var(--ul-ivory); --logo-pull:0;
    --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%232A2A2B' stroke-width='2.2'/%3E%3C/svg%3E");
    --feature-bg:var(--ul-ivory); --feature-text:var(--ul-charcoal); --feature-label:var(--ul-crimson);
    --feature-btn-bg:var(--ul-crimson); --feature-btn-fg:#FFFFFF; --feature-btn-hover:var(--ul-crimson-700);
    --feature-btn2-fg:var(--ul-crimson); --feature-btn2-border:var(--ul-crimson); --feature-btn2-hover:var(--ul-ivory-200); --feature-focus:var(--ul-crimson);
  }
}
/* ---- LIGHT — forced on a subtree (e.g. a preview frame inside a dark page) ---- */
[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF; --surface:var(--ul-ivory); --surface-2:var(--ul-ivory-200);
  --text:var(--ul-charcoal); --heading:var(--ul-charcoal); --muted:#5F5E5C;
  --line:#E3DED5; --control:#8A867F; --control-hover:var(--ul-charcoal); --field-bg:#FFFFFF;
  --action:var(--ul-crimson); --action-hover:var(--ul-crimson-700); --on-action:#FFFFFF; --action-soft:var(--ul-ivory);
  --label:var(--ul-crimson); --accent:var(--ul-crimson); --selected-bg:var(--ul-crimson-050);
  --focus-color:var(--ul-crimson); --error:var(--ul-crimson); --on-error:#FFFFFF; --success:#2F6B47;
  --disabled-bg:var(--ul-ivory-200); --disabled-fg:#5F5E5C;
  --tile:var(--ul-ivory); --tile-alt:#FFFFFF; --logo-pull:1;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23FFFFFF' stroke-width='2.2'/%3E%3C/svg%3E");
  --feature-bg:var(--ul-crimson); --feature-text:#FFFFFF; --feature-label:#FFFFFF;
  --feature-btn-bg:#FFFFFF; --feature-btn-fg:var(--ul-crimson); --feature-btn-hover:var(--ul-ivory);
  --feature-btn2-fg:#FFFFFF; --feature-btn2-border:#FFFFFF; --feature-btn2-hover:var(--ul-crimson-700); --feature-focus:#FFFFFF;
}
/* ---- DARK — explicit choice (also used by the resident app) ---- */
[data-theme="dark"]{   /* on <html>, or on any element to theme a subtree */
  color-scheme: dark;
  --bg:#2A2A2B; --surface:var(--ul-charcoal); --surface-2:#47474A;
  --text:var(--ul-ivory); --heading:var(--ul-ivory); --muted:#B8B3AA;
  --line:#47474A; --control:#908C85; --control-hover:var(--ul-ivory); --field-bg:#232324;
  --action:var(--ul-gold); --action-hover:#D9B86E; --on-action:#2A2A2B; --action-soft:#333334;
  --label:var(--ul-gold); --accent:var(--ul-gold); --selected-bg:#403A2F;
  --focus-color:var(--ul-gold); --error:#F2A69D; --on-error:#2A2A2B; --success:#8CC9A3;
  --disabled-bg:#47474A; --disabled-fg:#B8B3AA;
  --tile:var(--ul-ivory); --tile-alt:var(--ul-ivory); --logo-pull:0;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%232A2A2B' stroke-width='2.2'/%3E%3C/svg%3E");
  --feature-bg:var(--ul-ivory); --feature-text:var(--ul-charcoal); --feature-label:var(--ul-crimson);
  --feature-btn-bg:var(--ul-crimson); --feature-btn-fg:#FFFFFF; --feature-btn-hover:var(--ul-crimson-700);
  --feature-btn2-fg:var(--ul-crimson); --feature-btn2-border:var(--ul-crimson); --feature-btn2-hover:var(--ul-ivory-200); --feature-focus:var(--ul-crimson);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.55 var(--ul-font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--ul-font-display);font-weight:400;color:var(--heading);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--action)}
:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
.on-crimson :focus-visible{outline-color:var(--feature-focus)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-4);top:-60px;background:var(--bg);color:var(--action);padding:var(--s-3) var(--s-4);z-index:100}
.skip:focus{top:var(--s-3)}

/* ---------- Layout ---------- */
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band--ivory{background:var(--surface)}
.band--tight{padding-block:clamp(48px,6vw,80px)}
.stack>*+*{margin-top:var(--s-5)}
.measure{max-width:var(--max-text)}
.grid-2{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr;gap:var(--s-8)}}

/* ---------- Type patterns ---------- */
.label{font:700 var(--t-label)/1.4 var(--ul-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin:0}
.display,.h1,.h2,.h3{font-family:var(--ul-font-display);font-weight:400;color:var(--heading)}
.feature .display,.feature .h1,.feature .h2{color:var(--feature-text)}
.display{font-size:var(--t-display);line-height:1.08}
.h1{font-size:var(--t-h1);line-height:1.12}
.h2{font-size:var(--t-h2);line-height:1.2}
.h3{font-size:var(--t-h3);line-height:1.25}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--text)}
.muted{color:var(--muted)}
.caption{font-size:var(--t-caption);line-height:1.5;color:var(--muted)}
.accent{color:var(--accent)}
.rule{width:80px;height:2px;background:var(--ul-gold);border:0;margin:0}
.rule--short{width:48px}
@media (prefers-reduced-motion:no-preference){
  .rule{transform-origin:left;animation:rule-in var(--dur-rule) var(--ease) both}
}
@keyframes rule-in{from{transform:scaleX(0)}}
/* The recurring heading group: label → headline → gold rule → body */
.head{display:grid;gap:var(--s-4);justify-items:start}
.head .rule{margin-block:var(--s-1)}
.head--center{justify-items:center;text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border:1.5px solid transparent;border-radius:var(--radius);font:600 1rem/1.2 var(--ul-font-body);text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn--primary{background:var(--action);color:var(--on-action)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--action-hover)}
.btn--secondary{background:var(--bg);color:var(--action);border-color:var(--action)}
.btn--secondary:hover,.btn--secondary.is-hover{background:var(--action-soft)}
.btn--text{min-height:44px;padding:0 var(--s-1);background:none;color:var(--action);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn--text:hover,.btn--text.is-hover{text-decoration-thickness:2px}
.btn:disabled,.btn[aria-disabled=true]{background:var(--disabled-bg);color:var(--disabled-fg);border-color:transparent;cursor:not-allowed}
.btn--text:disabled{background:none;text-decoration:none}
.is-focus{outline:var(--focus);outline-offset:var(--focus-offset)}
/* On the crimson feature panel */
.on-crimson .btn--primary{background:var(--feature-btn-bg);color:var(--feature-btn-fg)}
.on-crimson .btn--primary:hover,.on-crimson .btn--primary.is-hover{background:var(--feature-btn-hover)}
.on-crimson .btn--secondary{background:transparent;color:var(--feature-btn2-fg);border-color:var(--feature-btn2-border)}
.on-crimson .btn--secondary:hover,.on-crimson .btn--secondary.is-hover{background:var(--feature-btn2-hover)}
.on-crimson .btn--text{color:var(--feature-text)}
.on-crimson .is-focus{outline-color:var(--feature-focus)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:520px){.btn-row--stack>.btn{flex:1 1 100%}}

/* Inline link */
.link{color:var(--action);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
.link--quiet{color:var(--text);text-decoration-color:var(--control)}
.link--quiet:hover{color:var(--action);text-decoration-color:currentColor}

/* Arrow-link list (replaces dotted-leader "plaque" links) */
.link-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:56px;padding:var(--s-3) 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600}
.link-list a::after{content:"→";color:var(--action);transition:transform var(--dur-fast) var(--ease)}
.link-list a:hover{color:var(--action)}
.link-list a:hover::after{transform:translateX(4px)}

/* Definition rows (replaces dotted leaders in feature lists) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.rows .k{font-weight:600}
.rows .v{color:var(--muted);font-size:var(--t-small);text-align:right}
.rows--numbered li{justify-content:flex-start}
.rows--numbered .n{font:700 var(--t-label)/1 var(--ul-font-body);letter-spacing:.08em;color:var(--label);min-width:2.5em}
.rows--numbered .v{margin-left:auto}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:var(--header-h)}
.wordname{font:600 1.0625rem/1 var(--ul-font-body);color:var(--text);text-decoration:none;white-space:nowrap}
.wordname sup{font-size:.6em;vertical-align:.55em;margin-left:1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-6)}
.nav a:not(.btn){font:400 .9375rem/1 var(--ul-font-body);color:var(--text);text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover,.nav a[aria-current=page]{border-bottom-color:var(--action)}
.nav .btn{min-height:40px;padding:0 var(--s-4);font-size:.9375rem}
.menu-btn{display:none;margin-left:auto}
@media (max-width:959px){
  .nav{display:none}
  .menu-btn{display:inline-flex;min-height:44px}
  .nav.is-open{display:flex;position:absolute;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s-2) var(--gutter) var(--s-5)}
  .nav.is-open a:not(.btn){padding:var(--s-4) 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
  .nav.is-open .btn{margin-top:var(--s-4);min-height:48px}
}
.chrome-bar{background:var(--bg);border-bottom:1px solid var(--line)}
.chrome-bar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6)}
.footer-grid{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media (min-width:860px){.footer-grid{grid-template-columns:minmax(260px,1fr) 2fr;align-items:start}}
.footer-brand{display:grid;gap:var(--s-4);justify-items:start}
.footer-cols{display:grid;gap:var(--s-5);grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.footer-cols a{display:inline-block;padding:var(--s-2) 0;color:var(--text);text-decoration:none;font-size:.9375rem}
.footer-cols a:hover{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.fineprint{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--t-caption);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);justify-content:space-between}

/* ---------- Logo (PNG only, always on a white holding panel, 15% clear space) ---------- */
/* content-box: --logo-w is the IMAGE width; the white padding (15% of it) is the protected zone outside it. */
.logo{--logo-w:180px;box-sizing:content-box;display:inline-block;width:var(--logo-w);padding:calc(var(--logo-w) * .15);background:var(--ul-white);line-height:0}
.logo img{width:100%;height:auto}
.logo--180{--logo-w:180px}                       /* image 180px, panel 234px */
.logo--hero{--logo-w:clamp(200px,22vw,280px)}    /* image 200–280px */
.logo--cover{--logo-w:clamp(200px,24vw,300px)}   /* image 200–300px */
/* Light: pull the panel left so the ARTWORK aligns with the text edge (the white panel is invisible on white).
   Dark: the panel is visible, so align the panel itself (--logo-pull:0). */
.logo--pull{margin-left:calc(var(--logo-w) * -.15 * var(--logo-pull))}

/* ---------- Photos ---------- */
.photo{margin:0}
.photo img{width:100%;height:100%;object-fit:cover;background:var(--surface-2)}
.photo figcaption{margin-top:var(--s-3);font-size:var(--t-caption);color:var(--muted)}
.ratio-4x5{aspect-ratio:4/5}.ratio-1{aspect-ratio:1}.ratio-4x3{aspect-ratio:4/3}.ratio-3x2{aspect-ratio:3/2}

/* ---------- Feature panel (crimson) ---------- */
.feature{background:var(--feature-bg);color:var(--feature-text)}
.feature h2,.feature .display,.feature .h1{color:var(--feature-text)}
.feature .label{color:var(--feature-label)}
.feature p{color:var(--feature-text)}
.feature .rule{background:var(--ul-gold)}

/* ---------- Callout (ivory) ---------- */
.callout{background:var(--surface);padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-2)}
.callout__title{font:700 var(--t-small)/1.4 var(--ul-font-body);color:var(--label);margin:0}
.callout p{font-size:var(--t-small);line-height:1.6}

/* ---------- Chapter tile ---------- */
.chapters{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.chapters{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}}
.chapter{display:grid;align-content:start;gap:var(--s-2)}
.chapter__art{background:var(--tile);aspect-ratio:1;display:grid;place-items:center}
.chapter__body{display:grid;gap:var(--s-1);padding-top:var(--s-3)}
.chapter__name{font:400 1.375rem/1.25 var(--ul-font-display);margin:0}
.chapter__cue{font-size:var(--t-small);color:var(--muted);margin:0}
.chapter__list{margin:var(--s-2) 0 0;padding:0;list-style:none;font-size:var(--t-small);line-height:1.5;display:grid;gap:var(--s-1)}
.chapter__list li::before{content:"";display:inline-block;width:12px;height:1px;background:var(--ul-gold);vertical-align:middle;margin-right:var(--s-2)}
/* Chapter icon artwork: the supplied crimson PNGs (SVGs in brand kit use currentColor for inline use) */
.chapter__art{position:relative}
.chapter__icon{position:absolute;left:22%;top:20%;width:56%;height:60%;object-fit:contain}
/* Icons: SVG via mask (needs http(s), not file://) so they take currentColor (crimson by default) */
.icon{display:inline-block;background:currentColor;color:var(--ul-crimson);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon--chapter{width:44%;height:56%;min-width:48px;min-height:48px}
.i-learn{--i:url(/brand/learn-scholar.svg)}.i-build{--i:url(/brand/build-builder.svg)}.i-lead{--i:url(/brand/lead-champion.svg)}.i-speak{--i:url(/brand/speak-griot.svg)}

/* ---------- Forms ---------- */
.field{display:grid;gap:var(--s-2)}
.field label,.field .field__label,legend.field__label{font:600 var(--t-small)/1.4 var(--ul-font-body);color:var(--text);padding:0}
.field__hint{font-size:var(--t-caption);color:var(--muted);margin:0}
.input,.select,.textarea{width:100%;min-height:48px;padding:var(--s-3) var(--s-4);background:var(--field-bg);border:1px solid var(--control);border-radius:var(--radius);font:400 1rem/1.4 var(--ul-font-body);color:var(--text);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.textarea{min-height:120px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--control-hover)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.input.is-focus{outline:var(--focus);outline-offset:1px;border-color:var(--action)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--s-7)}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea{border:2px solid var(--error)}
.field__error{display:flex;gap:var(--s-2);align-items:flex-start;font:600 var(--t-small)/1.4 var(--ul-font-body);color:var(--error);margin:0}
.field__error::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--error);color:var(--on-error);font-size:12px;line-height:1;margin-top:1px}
.form-grid{display:grid;gap:var(--s-5)}
.form-grid--2{grid-template-columns:1fr}
@media (min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}}
.check{display:grid;grid-template-columns:24px 1fr;gap:var(--s-3);align-items:start;cursor:pointer}
.check input{appearance:none;width:22px;height:22px;margin:1px 0 0;border:1.5px solid var(--control);border-radius:var(--radius);background:var(--field-bg);display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--action);border-color:var(--action)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid var(--on-action);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check__text{font-size:var(--t-small);line-height:1.5}
.check__text b{display:block;font-size:1rem;font-weight:600}

/* Option tiles (single or multi select) */
.tiles{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:600px){.tiles--2{grid-template-columns:repeat(2,1fr)}.tiles--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.tiles--3{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:block;cursor:pointer}
.tile input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.tile__box{display:grid;gap:var(--s-1);min-height:88px;padding:var(--s-4) var(--s-5);padding-right:var(--s-8);background:var(--bg);border:1px solid var(--control);border-radius:var(--radius);transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.tile__title{font:400 1.25rem/1.25 var(--ul-font-display);color:var(--heading)}
.tile__sub{font-size:var(--t-small);color:var(--muted)}
.tile__icon{color:var(--accent);width:28px;height:28px;margin-bottom:var(--s-2)}
.tile__box::after{content:"";position:absolute;top:var(--s-4);right:var(--s-4);width:22px;height:22px;border:1.5px solid var(--control);border-radius:50%;background:var(--field-bg)}
.tile--multi .tile__box::after{border-radius:var(--radius)}
.tile:hover .tile__box{border-color:var(--control-hover)}
.tile input:focus-visible+.tile__box{outline:var(--focus);outline-offset:2px}
.tile input:checked+.tile__box{border:2px solid var(--action);background:var(--selected-bg);padding:calc(var(--s-4) - 1px) calc(var(--s-5) - 1px);padding-right:calc(var(--s-8) - 1px)}
.tile input:checked+.tile__box::after{background:var(--action) var(--tick) center/100% no-repeat;border-color:var(--action)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);border:0;padding:0;margin:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-5);border:1px solid var(--control);border-radius:var(--radius-pill);background:var(--bg);font-size:.9375rem;color:var(--text);transition:all var(--dur-fast) var(--ease)}
.chip:hover span{border-color:var(--control-hover)}
.chip input:focus-visible+span{outline:var(--focus);outline-offset:2px}
.chip input:checked+span{background:var(--action);border-color:var(--action);color:var(--on-action);font-weight:600}

/* Counter */
.counter{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-4) 0;border-block:1px solid var(--line)}
.counter__ctrl{display:flex;align-items:center;gap:var(--s-4)}
.counter__btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--action);background:var(--bg);color:var(--action);font:600 1.25rem/1 var(--ul-font-body);cursor:pointer;display:grid;place-items:center}
.counter__btn:hover{background:var(--action-soft)}
.counter__btn:disabled{border-color:var(--surface-2);color:var(--control);background:var(--bg);cursor:not-allowed}
.counter__val{min-width:2ch;text-align:center;font:500 1.5rem/1 var(--ul-font-display)}

/* Slider */
.slider{display:grid;gap:var(--s-4);padding:var(--s-6);background:var(--surface)}
.slider__value{font:400 clamp(2.5rem,2rem + 2vw,3.5rem)/1 var(--ul-font-display);color:var(--heading);text-align:center}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;--p:31%}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--action) var(--p),var(--control) var(--p))}
.range::-moz-range-track{height:4px;border-radius:2px;background:var(--control)}
.range::-moz-range-progress{height:4px;background:var(--action)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--bg);border:2px solid var(--action)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--bg);border:2px solid var(--action)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:var(--focus);outline-offset:3px}
.slider__ends{display:flex;justify-content:space-between;font-size:var(--t-caption);color:var(--muted)}

/* Progress (3 steps) */
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.progress span{height:4px;background:var(--surface-2)}
.progress span.is-done{background:var(--action)}
.progress span.is-part{background:linear-gradient(to right,var(--action) var(--p,50%),var(--surface-2) var(--p,50%))}

/* Mockup-only annotation */
.mock-note{font:600 12px/1.4 var(--ul-font-body);color:#1B4F8A;background:#EAF2FB;border:1px dashed #1B4F8A;padding:var(--s-2) var(--s-3)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.rooms figcaption{margin:0}

.rooms .photo img{height:auto;aspect-ratio:4/3}
/* Playfair defaults to old-style figures; use lining figures for numbers in display type */
/* Playfair defaults to old-style figures ("01" reads "o1"). The `font` shorthand resets font-variant-numeric,
   so lining figures are forced everywhere (Mulish is lining already). */
*,*::before,*::after{font-variant-numeric:lining-nums!important}

/* Chapter tile on a surface band (light: white; dark: stays ivory — brand artwork lives on light grounds) */
.chapter__art--alt{background:var(--tile-alt)}
.unit{color:var(--accent)}

/* ---------- Theme switch (footer) ---------- */
.theme-switch{display:inline-flex;align-items:center;gap:var(--s-3);border:0;margin:0;padding:0}
.theme-switch legend{float:left;margin-right:var(--s-3);font-size:var(--t-caption);color:var(--muted);padding:0}
.theme-switch__opts{display:inline-flex;border:1px solid var(--control);border-radius:var(--radius-pill);padding:2px}
.theme-switch label{position:relative}
.theme-switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.theme-switch span{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);border-radius:var(--radius-pill);font-size:var(--t-caption);color:var(--text)}
.theme-switch input:checked+span{background:var(--action);color:var(--on-action);font-weight:700}
.theme-switch input:focus-visible+span{outline:var(--focus);outline-offset:2px}

/* ---------- Mockup-only chrome ---------- */
.mock-nav{background:#EAF2FB;border-bottom:1px dashed #1B4F8A}
.mock-nav .wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-block:8px;font:600 12px/1.2 var(--ul-font-body);color:#1B4F8A}
.mock-nav button{font:600 12px/1 var(--ul-font-body);border:1px solid #1B4F8A;background:#fff;color:#1B4F8A;padding:6px 8px;cursor:pointer}
.mock-nav button[aria-pressed=true]{background:#1B4F8A;color:#fff}
.mock-nav .sep{margin-left:8px}

/* ==========================================================================
   Header logo: the "logo tab" (recommended, v3) and the compact bar
   ========================================================================== */
:root{
  --tab-logo-w:180px;                                   /* the logo's minimum; never smaller */
  --tab-rule:3px;                                       /* gold rule along the tab's foot */
  --tab-h:calc(var(--tab-logo-w) * 1196 / 1010 + var(--tab-logo-w) * .3 + var(--tab-rule)); /* ≈ 270px */
  --tab-overhang:calc(var(--tab-h) - var(--header-h));  /* how far it hangs below the bar */
  --mark-d:40px;                                        /* compact emblem (pending approval) */
}
@media (max-width:959px){:root{--header-h:64px}}
.site-header .wrap,.chrome-bar .wrap{position:relative}
/* The tab: the full logo on its white holding panel, hanging from the top edge of the bar */
.brandtab{position:absolute;top:0;left:var(--gutter);z-index:2;
  --logo-w:var(--tab-logo-w);
  border:1px solid var(--line);border-top:0;border-bottom:var(--tab-rule) solid var(--ul-gold);
  transition:transform var(--dur-rule) var(--ease),opacity var(--dur-rule) var(--ease),visibility 0s linear 0s}
.brandtab:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
/* At rest the text name is hidden (the tab carries the name); compact/scrolled states swap them */
.site-header .wordname,.chrome-bar .wordname{transition:opacity var(--dur-fast) var(--ease)}
.has-tab .wordname{visibility:hidden;opacity:0}
.has-tab.is-compact .brandtab,.has-tab.menu-open .brandtab{transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform var(--dur-rule) var(--ease),opacity var(--dur-rule) var(--ease),visibility 0s linear var(--dur-rule)}
.has-tab.is-compact .wordname,.has-tab.menu-open .wordname{visibility:visible;opacity:1}
/* Content that starts under the tab clears it */
.tab-clear{padding-top:calc(var(--tab-overhang) + var(--s-6))!important}
.menu-btn{padding:0 var(--s-4)}
@media (prefers-reduced-motion:no-preference){.brandtab--arrive{animation:tab-in 420ms var(--ease) both}}
@keyframes tab-in{from{transform:translateY(-24px);opacity:0}}

/* Compact mark: emblem on a white disc — PENDING CLIENT APPROVAL (ANSWERS §2). Not used until approved. */
.mark{display:inline-grid;place-items:center;width:var(--mark-d);height:var(--mark-d);border-radius:50%;background:var(--ul-white);padding:calc(var(--mark-d) * .1);box-sizing:content-box;flex:none}
.mark img{width:100%;height:100%}
.brandname{display:inline-flex;align-items:center;gap:var(--s-3);text-decoration:none}

/* Short labels for chrome actions beside the tab on narrow phones */
.show-sm{display:none}
@media (max-width:520px){.hide-sm{display:none!important}.show-sm{display:inline}}