/* ============================================================
   Tang & Associates — site prototype design system
   Locked config: light · slim nav · editorial hero · dual CTA
   list assets · chips picker · strip palette · brand type
   spacious · soft radius · MONO accent · motion on · press on
   Single source of truth — restyle the whole site from here.
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond';
  font-weight:300 700; font-style:normal; font-display:swap;
  src:local('Cormorant Garamond'),
      url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype'),
      url('https://brand.tangco.ca/assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}
@font-face{
  font-family:'Lexend';
  font-weight:100 900; font-style:normal; font-display:swap;
  src:local('Lexend'),
      url('fonts/Lexend-VariableFont_wght.ttf') format('truetype'),
      url('https://brand.tangco.ca/assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype');
}
@font-face{
  /* wordmark face — reserved for the lockup specimen (canonical: brand-book.css) */
  font-family:'Lexend Exa';
  font-weight:300; font-style:normal; font-display:swap;
  src:local('Lexend Exa Light'),
      local('LexendExa-Light'),
      url('fonts/LexendExa-Light.ttf') format('truetype'),
      url('https://brand.tangco.ca/assets/fonts/LexendExa-Light.ttf') format('truetype');
}
@font-face{
  /* explicit alias for browsers/tools that expose the light face as a family */
  font-family:'Lexend Exa Light';
  font-weight:300; font-style:normal; font-display:swap;
  src:local('Lexend Exa Light'),
      local('LexendExa-Light'),
      url('fonts/LexendExa-Light.ttf') format('truetype'),
      url('https://brand.tangco.ca/assets/fonts/LexendExa-Light.ttf') format('truetype');
}

:root{
  /* palette source tokens: hex fallback + OKLCH source */
  --gold-hex:#C9A87C;
  --gold-oklch:oklch(75.04% 0.0705 74.38);
  --gold-deep-hex:#A88555;
  --gold-deep-oklch:oklch(63.89% 0.0776 74.43);
  --white-hex:#FFFFFF;
  --white-oklch:oklch(100% 0 0);
  --grey-block-hex:#F6F6F6;
  --grey-block-oklch:oklch(97.31% 0 0);
  --warm-200-hex:#E8E8E8;
  --warm-200-oklch:oklch(93.10% 0 0);
  --ink-hex:#1A1A1A;
  --ink-oklch:oklch(21.78% 0 0);
  --harbour-hex:#2C4A6B;
  --harbour-oklch:oklch(40.14% 0.0666 251.90);
  --harbour-deep-hex:#14253A;
  --harbour-deep-oklch:oklch(26.09% 0.0458 254.45);

  /* brand constants */
  --gold:var(--gold-hex);
  --gold-deep:var(--gold-deep-hex);
  --white:var(--white-hex);
  --grey-block:var(--grey-block-hex);
  --warm-200:var(--warm-200-hex);
  --ink:var(--ink-hex);
  --harbour:var(--harbour-hex);
  --harbour-deep:var(--harbour-deep-hex);

  /* light theme tokens */
  --bg:var(--white);
  --surface:var(--white);
  --surface-2:var(--grey-block);
  --text:var(--ink);
  --muted:#595959;            /* audit fix: was #6e6e6e (~4:1) → #595959 (~5.9:1) */
  --line:var(--warm-200);
  --line-strong:#D4D4D4;

  /* MONO accent — UI chrome is monochrome; the logo asset stays gold */
  --accent:var(--ink);
  --accent-soft:#F0F0F0;
  --on-accent:var(--white);

  /* spacious density */
  --gap:40px;
  --section-y:108px;
  --pad:30px;
  --wrap:1180px;

  /* soft radius */
  --radius:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* motion */
  --dur-color:260ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);

  --sans:'Lexend','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --display:var(--serif);

  /* type leading */
  --leading-tight:1.2;
  --leading-base:1.5;
  --leading-loose:1.7;
}

@supports (color: oklch(50% 0 0)){
  :root{
    --gold:var(--gold-oklch);
    --gold-deep:var(--gold-deep-oklch);
    --white:var(--white-oklch);
    --grey-block:var(--grey-block-oklch);
    --warm-200:var(--warm-200-oklch);
    --ink:var(--ink-oklch);
    --harbour:var(--harbour-oklch);
    --harbour-deep:var(--harbour-deep-oklch);
  }
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:auto; scroll-padding-top:84px; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:rgba(26,26,26,.12); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  box-shadow:none;
  border-radius:var(--radius);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* Suppress decorative motion site-wide, but NOT the logo studio's reveal:
     it's a motion tool, so its preview must always play (by design). */
  *:not(.logomark-reveal):not(.logomark-reveal *){ animation:none !important; transition:none !important; }
}

.reveal{ opacity:1; transform:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- typography ---------- */
.eyebrow{
  margin:0 0 16px; color:var(--muted);
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:0; color:var(--text); }
h1 em,h2 em,h3 em{ font-style:italic; }
h1{ margin:0; font-size:clamp(44px,6vw,76px); line-height:1.04; }
h2{ margin:0; font-size:clamp(28px,3.4vw,42px); line-height:1.1; }
h3{ margin:0; font-size:22px; }
p{ margin:0 0 1em; }
.lede{ color:var(--muted); font-size:19px; max-width:52ch; }
.muted{ color:var(--muted); }
code,.mono{ font-family:var(--mono); font-size:.86em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:15px; font-weight:600;
  padding:14px 24px; border-radius:var(--radius-pill);
  text-decoration:none; cursor:pointer; border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:background var(--dur-color) var(--ease-out), border-color var(--dur-color) var(--ease-out), color var(--dur-color) var(--ease-out);
}
.btn:hover{ border-color:var(--gold); color:var(--gold-deep); }
.btn .arrow{ transition:transform var(--dur-color) var(--ease-out); }
.btn:hover .arrow{ transform:translateX(3px); }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.btn--ghost{ background:transparent; }
.btn--sm{ font-size:13px; padding:9px 15px; }

/* ---------- nav (slim sticky) ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:15px 28px;
  display:flex; align-items:center; gap:26px;
}
.nav__brand{ display:flex; align-items:center; height:30px; flex:none; }
.nav__brand img{ height:28px; width:auto; }
.nav__links{ display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav__links a{
  position:relative;
  text-decoration:none; color:var(--muted);
  font-size:13.5px; font-weight:500; padding:8px 12px;
  border-radius:var(--radius); transition:color 160ms;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a[aria-current="page"]{ color:var(--text); }
/* absolutely positioned so the active item keeps the same box height as
   its siblings — fixes the vertical-alignment shift */
.nav__links a[aria-current="page"]::after,
.nav__links a:hover::after{
  content:""; position:absolute; left:12px; right:12px; bottom:1px;
  height:2px; background:var(--accent); border-radius:2px;
}
/* mobile menu toggle — hidden until the nav collapses */
.nav__burger{
  display:none; flex:none; margin-left:auto;
  width:42px; height:42px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--text);
  flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
}
.nav__burger i{ display:block; height:1.5px; background:currentColor; transition:width 160ms; }
.nav__burger i:first-child{ width:24px; }
.nav__burger i:last-child{ width:16px; }
.nav__burger:hover i:last-child{ width:24px; }

/* full-screen editorial menu — harbour deep, large serif */
.navmenu{
  position:fixed; inset:0; z-index:200;
  background:var(--harbour-deep); color:#fff;
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  width:100%; max-width:100vw;
  padding:22px 28px 34px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 220ms ease, visibility 220ms;
}
.navmenu[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; }
.navmenu__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.navmenu__top a{ min-width:0; }
.navmenu__top img{ height:26px; width:auto; }
.navmenu__close{
  background:none; border:0; cursor:pointer; color:#fff;
  width:40px; height:40px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.navmenu__close::before{ content:"\00d7"; font-size:26px; line-height:1; font-weight:400; letter-spacing:0; }
.navmenu__nav{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:32px 0; }
.navmenu__nav a{
  text-decoration:none; color:#fff;
  font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.22;
  padding:12px 0;
}
.navmenu__nav a[aria-current="page"]{ color:var(--gold); }
.navmenu__foot{ margin-top:20px; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.62); }
.navmenu__foot a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
body.menu-open{ overflow:hidden; }

@media (max-width:820px){
  .nav__inner{ gap:16px; }
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
}

/* ---------- hero (editorial) ---------- */
.hero{ padding:var(--section-y) 0; border-bottom:1px solid var(--line); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,760px); gap:56px; align-items:center; }
.hero__lede{ margin:24px 0 0; }
.hero__actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
}

/* ---------- section chrome ---------- */
.block{ padding:var(--section-y) 0; border-bottom:1px solid var(--line); }
.block--alt{ background:var(--surface-2); }
.block--terminal{ border-bottom:0; }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px; margin-bottom:48px; flex-wrap:wrap;
}
.sec-head h2{ margin:0; }
.sec-head .eyebrow{ margin-bottom:12px; }
.sec-head p{ margin:0; color:var(--muted); font-size:14px; max-width:44ch; }

/* ---------- quick assets (compact list) ---------- */
.assets{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.arow{
  display:flex; align-items:center; gap:24px;
  padding:22px var(--pad); border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--text);
  transition:background 150ms;
}
.arow:last-child{ border-bottom:none; }
.arow:hover{ background:var(--surface-2); }
.arow__thumb{
  width:78px; height:56px; flex:none; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
}
.arow__thumb.dark{ background:var(--text); }
.arow__thumb img{ max-height:34px; max-width:74%; }
.arow__meta{ flex:1; min-width:0; }
.arow__meta b{ font-size:16px; font-weight:600; }
.arow__meta span{ display:block; color:var(--muted); font-size:13px; margin-top:2px; }
.arow__pull{ color:var(--text); font-size:14px; font-weight:600; white-space:nowrap; }
.arow__pull .arrow{ display:inline-block; transition:transform 160ms; }
.arow:hover .arrow{ transform:translateX(4px); }

/* ---------- panels / cards ---------- */
.panel{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); }

/* ---------- chips (logo studio picker) ---------- */
.studio{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:var(--gap); align-items:start; }
.studio > *{ min-width:0; }
.studio__controls{ padding:18px; display:flex; flex-direction:column; gap:15px; }
.ctl{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ctl > label{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:0; max-width:100%;
  gap:6px; position:relative; text-align:center; line-height:1.2; min-height:31px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; font-size:12px; font-weight:600; padding:6px 10px;
  border-radius:999px; cursor:pointer;
  transition:border-color 140ms, background 140ms, color 140ms, box-shadow 140ms;
}
.chip:hover{ border-color:var(--gold); background:var(--surface-2); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chip[aria-pressed="true"]{
  border-color:var(--gold); background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent);
}
.chip[aria-pressed="true"]::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none; background:var(--gold);
}
.chip:disabled{ opacity:.38; cursor:not-allowed; }
.chip:disabled:hover{ border-color:var(--line); }
.studio__preview{ display:flex; flex-direction:column; }
.stage{
  flex:1; min-height:420px; display:flex; align-items:center; justify-content:center;
  padding:60px; border-bottom:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--radius) var(--radius) 0 0;
}
.stage[data-bg="white"]{ background:#FFFFFF; }
.stage[data-bg="block"]{ background:#F6F6F6; }
.stage[data-bg="ink"]{ background:#1A1A1A; }
.stage[data-bg="harbour"]{ background:#14253A; } /* Harbour deep */
.stage img,.stage object{
  width:var(--preview-size,520px); height:auto; max-width:90%; max-height:260px;
  object-fit:contain;
}
.stage.is-mark img,.stage.is-mark object{
  width:var(--preview-size,170px); height:var(--preview-size,170px);
  max-width:60%; max-height:260px; object-fit:contain;
}
.stage-meta{
  padding:20px var(--pad); display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:start; gap:18px;
}
.stage-meta > div:first-child{ min-width:0; }
.stage-meta b{ font-size:15px; }
.stage-meta code{ display:block; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; }
.preview-bg{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.preview-bg > span{
  font-size:10px; font-weight:600; letter-spacing:.14em; line-height:1;
  text-transform:uppercase; color:var(--muted);
}
.seg{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; min-width:187px; margin-left:auto;
}
.seg button{
  width:31px; height:31px; padding:0; cursor:pointer; flex:none;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:border-color 140ms, box-shadow 140ms, transform 140ms;
}
.seg button:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.seg button[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent), inset 0 0 0 1px rgba(0,0,0,.08);
}
.seg button[data-bg="auto"]{ background:conic-gradient(from 45deg,#fff 0 25%,#F6F6F6 0 50%,#1A1A1A 0 75%,#14253A 0); }
.seg button[data-bg="block"]{ background:#F6F6F6; }
.seg button[data-bg="white"]{ background:#fff; }
.seg button[data-bg="ink"]{ background:#1A1A1A; }
.seg button[data-bg="harbour"]{ background:#14253A; }

/* size × weight matrix (audit fix: visible help, not title-only) */
.matrix{ display:grid; grid-template-columns:72px repeat(3,1fr); gap:7px; }
.mh{ font-size:11px; color:var(--muted); text-align:center; padding-bottom:6px; }
.mh.corner{ text-align:left; }
.mrl{ display:flex; flex-direction:column; justify-content:center; align-items:flex-end; padding-right:8px; font-size:12px; }
.mrl small{ color:var(--muted); font-size:10px; }
.mcell{
  position:relative; aspect-ratio:1; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font:inherit; transition:border-color 130ms, opacity 130ms;
}
.mcell img{ width:38px; height:38px; }
.mcell.rec{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.mcell.rec::after{ content:"★"; position:absolute; top:5px; right:6px; font-size:9px; color:var(--accent); }
.mcell.off{ opacity:.4; }
.mcell[aria-pressed="true"]{ outline:2px solid var(--accent); outline-offset:2px; }
.matrix-note{ font-size:12px; color:var(--muted); margin:12px 0 0; }
.notice{
  margin:8px 0 0; padding:8px 10px; font-size:11px; line-height:1.45; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
}

/* ---------- studio controls ---------- */
.mode-pane{ display:flex; flex-direction:column; gap:14px; }
.mode-pane[hidden]{ display:none; }
.anim-options{ display:flex; flex-direction:column; gap:14px; }
.anim-options[hidden]{ display:none; }
.studio-acc{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.studio-acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:31px; padding:7px 10px; cursor:pointer; list-style:none;
  color:var(--text); font-size:12px; font-weight:600;
}
.studio-acc summary::-webkit-details-marker{ display:none; }
.studio-acc summary::before{
  content:""; width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(-45deg);
  transition:transform 140ms; flex:none; margin-right:2px;
}
.studio-acc[open] summary::before{ transform:rotate(45deg); }
.studio-acc summary span:first-child{ margin-right:auto; }
.anim-acc__state,.weight-acc__state{ color:var(--muted); font-size:11px; font-family:var(--mono); font-weight:400; }
.studio-acc[open] .anim-acc__state,.studio-acc[open] .weight-acc__state{ color:var(--gold-deep); }
.studio-acc .anim-options,.studio-acc .acc-body{ padding:3px 10px 12px; }
.check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; }
.check input{ accent-color:var(--accent); }
.studio__controls .btn{ padding:9px 14px; font-size:13px; }
.studio__controls .btn--sm{ padding:7px 11px; font-size:12px; }

/* animated-reveal composition: the logomark animates; lockup/stacked add the
   static wordmark with the mark overlaid on its real region. The mark-region
   geometry lives in site.js and is eyeball-tuned in the prototype. */
#stage .anim-compose{ width:100%; height:100%; align-items:center; justify-content:center; display:none; }
#stage.is-anim #stageImg{ display:none; }
#stage.is-anim .anim-compose{ display:flex; }
/* one composed inline SVG (preview == download) — sized by the active control */
#stage .anim-compose .cmp{ display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; }
#stage .anim-compose .cmp svg{ display:block; width:100%; height:100%; max-width:none; max-height:none; }
#stage .anim-compose .cmp--mark{ width:clamp(16px,var(--anim-width,var(--anim-size,170px)),260px); height:clamp(16px,var(--anim-height,var(--anim-size,170px)),260px); }
#stage .anim-compose .cmp--lockup{ width:clamp(120px,var(--anim-width,512px),90%); aspect-ratio:471 / 87; }
#stage .anim-compose .cmp--stacked{ width:clamp(96px,var(--anim-width,512px),60%); aspect-ratio:380 / 267; }

@media (max-width:900px){ .studio{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .stage-meta{ grid-template-columns:minmax(0,1fr) auto; gap:12px; padding-left:18px; padding-right:18px; }
  .preview-bg{ gap:6px; }
  .stage-meta .seg{ min-width:159px; padding-top:0; gap:5px; }
  .stage-meta .seg button{ flex:0 0 27px; width:27px; height:27px; }
}

/* ---------- palette (colour strip) ---------- */
.pal-strip{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px; border:1px solid var(--line); background:var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.pal-col{
  min-width:0; cursor:pointer; background:var(--surface);
  display:flex; flex-direction:column;
  transition:background var(--dur-color) var(--ease-out);
}
.pal-col .swatch{ height:150px; box-shadow:none; }
.pal-col .pal-body{ flex:1; padding:16px 18px; }
.pal-col .pal-body b{ display:block; font-size:14px; }
.pal-col .pal-body code{ color:var(--muted); font-size:12px; }
.pal-col .pal-body em{ display:block; color:var(--muted); font-size:11px; font-style:normal; margin-top:6px; }
.pal-col:hover{ background:var(--surface-2); }
@media (max-width:980px){ .pal-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .pal-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- docs ---------- */
.docs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.doc{
  border:1px solid var(--line); border-radius:var(--radius); padding:34px;
  text-decoration:none; color:var(--text); background:var(--surface);
  transition:border-color 160ms;
}
.doc:hover{ border-color:var(--line-strong); }
.doc b{ font-family:var(--display); font-size:26px; font-weight:500; display:block; margin-bottom:10px; }
.doc span{ color:var(--muted); font-size:14px; }
@media (max-width:760px){ .docs{ grid-template-columns:1fr; } }

/* read / deck view toggle (guidelines ⇄ brand book) */
.viewtoggle{
  display:inline-flex; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; margin-top:30px;
}
.viewtoggle a{
  padding:10px 20px; font-size:13px; font-weight:600;
  text-decoration:none; color:var(--muted); transition:background 140ms, color 140ms;
}
.viewtoggle a:hover{ color:var(--text); }
.viewtoggle a[aria-current="true"]{ background:var(--accent); color:var(--on-accent); }
.viewtoggle a + a{ border-left:1px solid var(--line); }
.deck-rail .viewtoggle{ flex-direction:column; width:100%; margin-top:24px; }
.deck-rail .viewtoggle a{ text-align:center; }
.deck-rail .viewtoggle a + a{ border-left:none; border-top:1px solid var(--line); }

/* ---------- footer ---------- */
.foot{ padding:44px 0; border-top:1px solid var(--line); }
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(140px,.5fr));
  gap:32px; align-items:start;
}
.foot-grid .col{ font-size:13px; color:var(--muted); line-height:1.65; }
.foot-grid .col b{ color:var(--text); display:block; margin-bottom:10px; font-weight:600; }
.foot-grid .col span{ display:block; }
.foot-grid a{ color:var(--muted); text-decoration:none; display:block; padding:3px 0; }
.foot-grid a:hover{ color:var(--text); }
@media (max-width:720px){ .foot-grid{ grid-template-columns:1fr; gap:22px; } }

/* ---------- guidelines layout ---------- */
.gl{ display:grid; grid-template-columns:minmax(0,228px) minmax(0,1fr); gap:64px; align-items:start; padding:64px 0 var(--section-y); }
.gl > *{ min-width:0; }
.gl-toc{ position:sticky; top:84px; align-self:start; }
.gl-toc p{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.gl-toc a{
  display:block; text-decoration:none; color:var(--muted);
  font-size:13.5px; padding:7px 0; border-left:2px solid var(--line); padding-left:14px;
  transition:color 140ms, border-color 140ms;
}
.gl-toc a:hover{ color:var(--text); }
.gl-toc a.active{ color:var(--text); border-left-color:var(--accent); }
.gl-sec{ padding:0 0 72px; scroll-margin-top:84px; }
.gl-sec:last-child{ padding-bottom:0; }
.gl-sec__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.gl-sec h2{ margin:0 0 22px; }
.gl-sec p{ max-width:62ch; }
.gl-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:30px 44px; margin-top:28px; }
.gl-card{ padding:0; border:0; background:none; }
.gl-card h3{ font-family:var(--sans); font-size:16px; font-weight:600; margin:0 0 8px; }
.gl-card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.gl-card ul{ margin:0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.6; }
.gl-card ul li{ margin:6px 0; }
.specimen{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.specimen figure{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.specimen .frame{ height:150px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); }
.specimen .frame.dark{ background:var(--text); }
.specimen .frame img{ width:84px; height:84px; }
.specimen figcaption{ padding:14px 16px; font-size:13px; }
.specimen figcaption small{ display:block; color:var(--muted); margin-top:3px; }
.gl-table{ width:100%; max-width:100%; border-collapse:collapse; margin-top:22px; font-size:14px; }
.gl-table th,.gl-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.gl-table th{ font-weight:600; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.gl-table code{ color:var(--text); }
.donts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.dont{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.dont .demo{ height:130px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); overflow:hidden; }
.dont .demo img{ width:72px; height:72px; }
.dont .demo--stretch img{ transform:scaleX(1.7); }
.dont .demo--rotate img{ transform:rotate(22deg); }
.dont .demo--shadow img{ filter:drop-shadow(3px 5px 4px rgba(0,0,0,.45)); }
.dont .demo--gold{ background:#D3B58E; }
.dont .demo--recolour img{ filter:brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1843%) hue-rotate(2deg) brightness(104%) contrast(103%); }
.dont figcaption{ padding:13px 15px; font-size:13px; color:var(--muted); }
/* prohibition marker — copied verbatim from canonical brand-book.css .dont-cell__demo::after (--warn #e63946) */
.dont .demo{ position:relative; }
.dont .demo::after{
  content:''; position:absolute; inset:8px; pointer-events:none;
  background:linear-gradient(135deg,
    transparent calc(50% - 1.5px),
    #e63946 calc(50% - 1.5px),
    #e63946 calc(50% + 1.5px),
    transparent calc(50% + 1.5px));
}

/* mark-weight specimen — three real weight files at one size so stroke is visible */
.wt-spec{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 44px; margin-top:26px; }
.wt-spec figure{ margin:0; }
.wt-stage{ height:128px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:var(--radius); }
.wt-stage img{ object-fit:contain; }
.wt-spec figcaption{ margin-top:14px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text); }
.wt-spec figcaption small{ display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:4px; }
.wt-note{ font-size:12.5px; color:var(--muted); margin:16px 0 0; }

/* reveal-animation specimen — matches the .specimen frame aesthetic */
.anim-spec{ margin:26px 0 0; max-width:420px; }
.anim-stage{ height:200px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:var(--radius); cursor:pointer; }
.anim-stage .anim-live, .anim-stage .anim-live img, .anim-stage .anim-still{ width:128px; height:128px; }
.anim-stage .anim-still{ display:none; }
.anim-spec figcaption{ margin-top:14px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text); }
.anim-spec figcaption small{ display:block; font-weight:400; color:var(--muted); font-size:12.5px; line-height:1.6; margin-top:5px; }
.anim-spec figcaption a{ color:var(--text); border-bottom:1px solid var(--line-strong); text-decoration:none; }
@media (prefers-reduced-motion:reduce){
  .anim-stage{ cursor:default; }
  .anim-stage .anim-live{ display:none; }
  .anim-stage .anim-still{ display:block; }
}

/* editorial interface rule specimens — visual demos in the .specimen aesthetic */
.ui-spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px; }
.ui-spec figure{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:border-color var(--dur-color) var(--ease-out); }
.ui-spec figure:hover{ border-color:var(--gold); }
.ui-spec .frame{ height:150px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); transition:background var(--dur-color) var(--ease-out); }
.ui-spec figure:hover .frame{ background:rgba(201,168,124,.14); }
.ui-spec figcaption{ padding:14px 16px; font-size:13px; font-weight:600; color:var(--text); }
.ui-spec figcaption small{ display:block; font-weight:400; color:var(--muted); margin-top:3px; line-height:1.55; }
.uid-surface{ width:120px; height:84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.uid-radii{ display:flex; align-items:flex-end; gap:12px; }
.uid-radii > span{ display:flex; flex-direction:column; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--muted); }
.uid-radii i{ width:40px; height:40px; background:var(--text); display:block; }
.uid-radii .r4 i{ border-radius:4px; }
.uid-radii .r10 i{ border-radius:10px; }
.uid-radii .r16 i{ border-radius:16px; }
.uid-radii .rp i{ width:54px; border-radius:999px; }
.uid-motion{ width:150px; height:12px; border-radius:999px; background:var(--line); position:relative; transition:background var(--dur-color) var(--ease-out); }
.uid-motion::after{ content:''; position:absolute; left:0; top:0; height:100%; width:34%;
  border-radius:999px; background:var(--gold); transition:width var(--dur-color) var(--ease-out), background var(--dur-color) var(--ease-out); }
.ui-spec figure:hover .uid-motion{ background:rgba(201,168,124,.28); }
.ui-spec figure:hover .uid-motion::after{ width:100%; background:var(--gold-deep); }
.uid-state{ font:600 13px/1 var(--sans); padding:11px 18px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  outline:2px solid var(--gold); outline-offset:3px; transition:background var(--dur-color) var(--ease-out), color var(--dur-color) var(--ease-out), border-color var(--dur-color) var(--ease-out); }
.ui-spec figure:hover .uid-state{ background:var(--gold); border-color:var(--gold); color:#fff; }
@media (prefers-reduced-motion:reduce){
  .uid-motion::after,.uid-state{ transition:none; }
}
@media (max-width:720px){ .ui-spec{ grid-template-columns:1fr; } }

/* clearspace — ported verbatim from canonical brand-book.css (--dim mapped to --muted) */
.clearspace-frame{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
  margin-top:24px;
}
.clearspace-figure{
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-width:420px;
  margin:0 auto;
  background:
    linear-gradient(to right, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/25% 100%,
    linear-gradient(to bottom, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/100% 25%;
  border:1px dashed var(--line);
}
.clearspace-figure img{
  position:absolute; top:25%; left:25%;
  width:50%; height:50%;
}
.clearspace-figure .x-label{
  position:absolute;
  font-family:var(--mono); font-size:14px; color:var(--gold-deep);
}
.clearspace-figure .x-label.top{ top:8px; left:50%; transform:translateX(-50%); }
.clearspace-figure .x-label.bottom{ bottom:8px; left:50%; transform:translateX(-50%); }
.clearspace-figure .x-label.left{ left:8px; top:50%; transform:translateY(-50%); }
.clearspace-figure .x-label.right{ right:8px; top:50%; transform:translateY(-50%); }
.clearspace-meta h4{ font-size:24px; font-weight:600; margin:0 0 12px; }
.clearspace-meta p{ font-size:16px; color:var(--muted); margin:0 0 14px; line-height:1.55; }
@media (max-width:720px){ .clearspace-frame{ grid-template-columns:1fr; gap:28px; } }

/* colour swatches — match the palette strip on the landing page */
.swatch-grid{
  display:flex; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:24px; background:var(--surface);
}
.swatch-card{
  flex:1 1 25%; min-width:150px;
  background:var(--surface); color:var(--text);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0; display:flex; flex-direction:column;
  transition:background var(--dur-color) var(--ease-out);
}
.swatch-card::before{
  content:""; display:block; height:150px;
  background:var(--swatch-hex);
  border-bottom:1px solid var(--line);
}
.swatch-card:hover{ background:var(--surface-2); }
.swatch-card span,
.swatch-card strong,
.swatch-card code,
.swatch-card em{ margin-inline:18px; }
.swatch-card span{
  margin-top:16px;
  font-size:14px; font-weight:700; line-height:1.25;
}
.swatch-card strong{
  margin-top:3px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--muted);
}
.swatch-card code{
  margin-top:2px;
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  color:var(--muted); white-space:normal; overflow-wrap:anywhere;
}
.swatch-card em{
  display:block; margin-top:8px; margin-bottom:16px;
  color:var(--muted); font-size:11px; font-style:normal; line-height:1.45;
}
@media (max-width:760px){ .swatch-card{ flex-basis:50%; } }

/* type specimens — ported from canonical brand-guidelines.css .type-stack/.type-card */
.type-stack{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.type-card{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:34px; display:flex; flex-direction:column; gap:10px;
}
.type-card > span{
  font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.type-card p{ margin:0; }
.type-sample--lexend-exa{ margin:0; font-family:'Lexend Exa','Lexend Exa Light',var(--sans); font-size:clamp(1.7rem,5vw,3rem); font-weight:300; font-synthesis:none; letter-spacing:0; }
.type-sample--cormorant{ margin:0; font-family:var(--serif); font-size:clamp(2rem,5vw,4rem); font-weight:400; line-height:var(--leading-tight); letter-spacing:-.01em; }
.type-sample--cormorant em{ color:var(--gold-deep); }
.type-sample--lexend{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--muted); }
@media (max-width:620px){ .type-card{ padding:22px; } }

/* Voice 04 — Do / Do-not: Light / grey contrast · brand-mono · comfortable · plain
   (selected from the do-dont-styles mockup) */
.voice-dodont{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:24px;
}
.voice-dodont .vdd-pane{ padding:26px 30px; }
.voice-dodont .vdd-do{ border-top:3px solid var(--gold-deep); }
.voice-dodont .vdd-dont{
  background:var(--surface-2);
  border-left:1px solid var(--line);
  border-top:3px solid var(--text);
}
.voice-dodont .vdd-cap{
  margin:0 0 16px; font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.voice-dodont .vdd-do .vdd-cap{ color:var(--gold-deep); }
.voice-dodont .vdd-dont .vdd-cap{ color:var(--text); }
.voice-dodont .vdd-ul{ list-style:none; margin:0; padding:0; }
.voice-dodont .vdd-ul li{ font-size:15px; line-height:1.5; color:var(--text); padding:9px 0; }
.voice-dodont .vdd-dont .vdd-ul li{ color:var(--muted); }
@media (max-width:760px){
  .voice-dodont{ grid-template-columns:1fr; }
  .voice-dodont .vdd-dont{ border-left:none; }
}
@media (max-width:900px){
  .gl{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .gl-toc{ position:static; }
  .gl-toc nav{ display:flex; flex-wrap:wrap; gap:6px; }
  .gl-toc a{ border-left:none; border:1px solid var(--line); border-radius:999px; padding:7px 13px; }
  .gl-toc a.active{ border-color:var(--accent); }
  .gl-grid,.specimen,.donts{ grid-template-columns:1fr; }
  .gl-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* copy-for-AI dropdown */
.aidrop{ position:relative; display:inline-block; }
.aidrop__btn{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  padding:14px 24px; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text);
  transition:background var(--dur-color) var(--ease-out), border-color var(--dur-color) var(--ease-out), color var(--dur-color) var(--ease-out);
}
.aidrop__btn:hover{ border-color:var(--gold); color:var(--gold-deep); }
.aidrop__menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:248px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(0,0,0,.12); padding:6px; display:none;
}
.aidrop[data-open="true"] .aidrop__menu{ display:block; }
.aidrop__menu button,.aidrop__menu a{
  display:block; width:100%; text-align:left; text-decoration:none;
  font:inherit; font-size:13.5px; color:var(--text);
  background:none; border:0; cursor:pointer; padding:10px 12px;
  border-radius:6px;
}
.aidrop__menu button small,.aidrop__menu a small{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.aidrop__menu button:hover,.aidrop__menu a:hover{ background:var(--surface-2); }
.aidrop__menu hr{ border:0; border-top:1px solid var(--line); margin:6px 4px; }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--text); color:#fff; font:500 12px/1.4 var(--sans);
  padding:10px 16px; border-radius:8px; z-index:300;
  opacity:0; pointer-events:none; transition:opacity 200ms;
}
.toast.show{ opacity:1; }

/* ---------- logo customizer (reuses .studio/.panel/.ctl/.chips/.chip/.stage) ---------- */
.presets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.presets .chip{ width:100%; justify-content:center; white-space:normal; }
.exp{ display:flex; flex-wrap:wrap; gap:8px; }
.exp[hidden]{ display:none; }
.size-out{ float:right; font-weight:400; color:var(--muted); font-size:11px; font-family:var(--mono); }
.size-range{ width:100%; margin:8px 0 5px; accent-color:var(--accent); cursor:pointer; }
.bandleg{ display:flex; gap:4px; font-size:10px; color:var(--muted); }
.bandleg span{ flex:1; text-align:center; padding:4px 2px; border-top:2px solid var(--line); transition:color 160ms, border-color 160ms; }
.bandleg span.on{ color:var(--text); border-top-color:var(--accent); font-weight:600; }
.chips--palette{ gap:8px; }
.swatch-chip{
  width:31px; height:31px; padding:0; border-radius:50%;
  border:1px solid var(--line); cursor:pointer; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:border-color 140ms, box-shadow 140ms, transform 140ms;
}
.swatch-chip:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.swatch-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.swatch-chip[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent), inset 0 0 0 1px rgba(0,0,0,.08);
}
.swatch-chip.sw--gold{ background:var(--gold); }
.swatch-chip.sw--rev{ background:linear-gradient(135deg,#fff 0 50%,var(--harbour-deep) 50% 100%); }
.swatch-chip.sw--blk{ background:#1A1A1A; }
.swatch-chip.sw--wht{ background:#fff; }