/* =========================================================
   COZ CLUB Logo Guidelines
   Visual language matched to cozclub.com/design
   ========================================================= */

:root {
  /* Brand palette */
  --color-brand-orange: #ff7f32;
  --color-brand-blue:   #298fc2;
  --color-brand-green:  #6cc24a;
  --color-black:        #1f1e1e;
  --color-white:        #faf9f8;

  /* Ink as drawn in the master logo artwork */
  --color-logo-ink:     #1c1c1c;

  /* Surfaces */
  --page:      #faf9f8;
  --card:      #ffffff;
  --ink:       #1f1e1e;
  --ink-2:     #6b6764;
  --ink-3:     #9a9693;
  --rule:      #eae7e4;
  --rule-hard: #d9d5d1;
  --pill:      #f2f0ee;

  /* Construction / measurement lines */
  --guide: var(--color-brand-orange);
  --ghost: var(--color-logo-ink);

  /* Semantics, derived so no fourth hue enters the page.
     Approved reads green, prohibition reads ink: a red would be a
     fourth colour, and ink carries the meaning without one. */
  --ok:      var(--color-brand-green);
  --ok-bg:   rgba(108, 194, 74, 0.14);
  --no:      var(--color-logo-ink);
  --no-bg:   rgba(28, 28, 28, 0.07);
  --info:    var(--color-brand-blue);

  /* Type */
  --font-head: "Carlito", "Calibri", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Document faces, for Word, PowerPoint and PDF deliverables. Declared so
     the specimens below render correctly on a machine that has them; the
     site itself never sets type in these. */
  --font-doc-head:   "Calibri", "Carlito", system-ui, sans-serif;
  --font-doc-body:   "Cochin", "Cambria", Georgia, "Times New Roman", serif;
  --font-doc-accent: "Cambria", Georgia, "Times New Roman", serif;
  --font-doc-deck:   "Arimo", "Arial", "Liberation Sans", system-ui, sans-serif;

  /* Tagline cap metrics, in em of the tagline font size, measured per
     render by caps.js. Seeded with Carlito's values so the page is right
     before the measurement lands and stays sane without it.
     Nominal cap height, measured from a flat-topped letter, matching the
     font's sCapHeight (Carlito Bold: 1328/2048 = 0.6484) so the render
     agrees with the outlined lockup SVGs in assets/. */
  --capHeightEm: 0.6484;   /* cap line -> baseline */
  --capTopEm:    0.1934;   /* box top  -> cap line */

  --shell: 1180px;
  --r-card: 12px;
  --r-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(38px, 6vw, 58px); }
h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.01em; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p { margin: 0 0 1em; max-width: 70ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-brand-blue); }

.lede { font-size: 17px; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.55; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }

/* value pill, as on the live design-system page */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  background: var(--pill);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  white-space: nowrap;
}
.pill--key { color: var(--ink-3); }

/* ---------- Shell ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 640px) { .shell { padding-inline: 20px; } }

section { padding-bottom: clamp(52px, 7vw, 84px); }

/* section header: badge + title + description */
.sec-head { margin-bottom: 28px; }

.sec-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}

.sec-head p { color: var(--ink-2); font-size: 15px; }

/* ---------- Top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 249, 248, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.bar .shell {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 60px;
}
.bar__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.bar__mark img { height: 20px; width: auto; }
.bar__mark span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;          /* never break into two lines */
}

/* The link list scrolls rather than wrapping: a second row would double
   the bar height and push the sticky offset out of step with
   scroll-padding-top. overflow-y is pinned so it cannot promote to auto
   and draw a stray vertical scrollbar. */
.bar__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 6px;
  -webkit-overflow-scrolling: touch;
}
.bar__nav::-webkit-scrollbar { display: none; }

.bar__nav a {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  flex: none;
}
.bar__nav a:hover { color: var(--ink); border-bottom-color: var(--color-brand-orange); }

/* the deck pill sits outside the scroller so it is always reachable */
.bar__deck { flex: none; }

/* drop the kicker before the links start fighting for room */
@media (max-width: 1240px) { .bar__mark span { display: none; } }
@media (max-width: 820px)  { .bar__nav { display: none; } }

/* ---------- Hero ---------- */

.hero { padding: clamp(48px, 7vw, 76px) 0 clamp(44px, 6vw, 68px); }
.hero__lockup { margin-bottom: 44px; }
.hero h1 { margin-bottom: 12px; }

/* =========================================================
   TAGLINE LOCKUP
   Everything derives from --lh, the logo height (H).
     cap height  H / 5   is the rule, held exactly
     font size   derived, approx H / 3.28 for Carlito
     gap         H / 4      tracking  0.06em
   Cap height is the fixed rule at H/5, and font size is solved for it,
   so the published ratio stays clean whatever the font does. The gap is
   measured to the CAP LINE, not to the text box, and margin-top backs
   out the measured box-top-to-ink-top distance so the cap line lands
   exactly 1/4 H below the logo.
   That set width lands at roughly 95% of the wordmark width.
   Carlito only, by instruction: no substitute face.
   ========================================================= */

.lockup { --lh: 40px; width: calc(var(--lh) * 5.3842); color: var(--color-logo-ink); }
.lockup__mark { width: 100%; height: auto; }

.lockup__tag {
  font-family: "Carlito", sans-serif;
  font-weight: 700;
  font-size: calc(var(--lh) * (0.2 / var(--capHeightEm)));
  line-height: 1;
  letter-spacing: 0.06em;
  margin-top: calc(var(--lh) * (0.25 - 0.2 * var(--capTopEm) / var(--capHeightEm)));
  color: inherit;
}
/* cancel the trailing letter-space so centring is optically true */
.lockup__tag > span { margin-right: -0.06em; display: inline-block; }

/* The line box reserves descender space that all caps never use, which made
   the lockup 3.3% taller than the generated SVGs. Trim it so the box ends on
   the baseline and both are exactly 1.45 H.
     descender = font size x (1 - capTop - capHeight), all in em */
.lockup__tag {
  margin-bottom: calc(-1 * var(--lh) * (0.2 / var(--capHeightEm))
                 * (1 - var(--capTopEm) - var(--capHeightEm)));
}

/* Alignment is measured against the WORDMARK (C to B), never the image box.
   The registered mark hangs 3.79% past the B, so the image box is wider than
   the letterforms and centring on it would push the tagline right.
     C sits  0.0156 x H  in from the image left edge
     B ends  0.0379 x H  short of the image right edge
   Centring on the C..B span therefore needs a 0.0943 x H shift left, applied
   as twice that in padding-right so the content box recentres. */
.lockup--left .lockup__tag {
  text-align: left;
  padding-left: calc(var(--lh) * 0.0156);
}
.lockup--center .lockup__tag {
  text-align: center;
  padding-right: calc(var(--lh) * 0.1886);
}

.lockup--rev { color: var(--color-white); }

.sub-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

/* =========================================================
   CO-BRANDING LOCKUPS
   --h : shared optical height of both marks.
   Gap each side of the divider is ½H, the same unit as clear
   space, so the whole system runs on one measurement.
   ========================================================= */

.cobrand { display: flex; align-items: center; --h: 72px; flex-wrap: nowrap; }

.cb-mark { height: var(--h); width: auto; flex: none; }
.cb-mark--logo { height: var(--h); }

.cb-gap { width: calc(var(--h) / 2); flex: none; align-self: stretch; }

.cb-rule {
  flex: none;
  width: max(1px, calc(var(--h) * 0.015));
  height: calc(var(--h) * 0.86);
  background: var(--color-logo-ink);
  border-radius: 1px;
}
.cobrand--rev .cb-rule { background: var(--color-white); }

.cb-amp {
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--h) * 0.42);
  line-height: 1;
  color: var(--color-logo-ink);
}
.cobrand--rev .cb-amp { color: var(--color-white); }

/* partner wordmark, sitting beside a partner symbol */
.cb-word {
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--h) * 0.52);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-left: calc(var(--h) * 0.14);
  white-space: nowrap;
  color: var(--ink-2);
}

/* measured variant, coral bands showing the half-H gaps */
.cobrand--measured .cb-gap {
  outline: 1px solid var(--guide);
  outline-offset: -0.5px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--guide);
  background: rgba(255, 127, 50, 0.06);
}
.cobrand--measured { padding-block: 14px; }

/* stacked variant */
.cobrand--stack { flex-direction: column; }
.cobrand--stack .cb-gap { width: auto; height: calc(var(--h) / 2); align-self: stretch; }
.cobrand--stack.cobrand--measured .cb-gap { min-width: calc(var(--h) * 0.86); }
.cobrand--stack .cb-rule {
  width: calc(var(--h) * 0.86);
  height: max(1px, calc(var(--h) * 0.015));
}

/* ---------- Naming / writing the name ---------- */

.name-cols { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .name-cols { grid-template-columns: minmax(0, 1fr); } }

.name-list { list-style: none; margin: 14px 0 0; padding: 0; }
.name-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
}
.name-list li:first-child { border-top: 0; }
.name-list .glyph { flex: none; width: 14px; font-family: var(--font-mono); font-size: 13px; }
.name-list--yes .glyph { color: var(--ok); }
.name-list--no  .glyph { color: var(--no); }
.name-list .wrong { color: var(--ink-3); text-decoration: line-through; }
.name-list b { font-weight: 600; }
.name-list .why { color: var(--ink-3); font-size: 13px; }

.name-hero {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The big rule callout ---------- */

.rule-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 34px);
}
.rule-box__eq {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.rule-box__eq em {
  font-style: normal;
  color: var(--color-brand-orange);
}
.rule-box p { font-size: 15px; color: var(--ink-2); }
.rule-box__vals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* =========================================================
   CLEAR SPACE DIAGRAM
   --h  : rendered height of the logo artwork
   --ar : artwork aspect ratio (width / height)
   --u  : margin unit = half the logo height
   ========================================================= */

.cs {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(30px, 5vw, 60px) clamp(20px, 4vw, 56px);
  overflow-x: auto;
}

.cs-grid {
  --u: calc(var(--h) / 2);
  --w: calc(var(--h) * var(--ar));
  display: grid;
  grid-template-columns: var(--u) var(--w) var(--u);
  grid-template-rows: var(--u) var(--h) var(--u);
  margin-inline: auto;
  width: fit-content;
}

/* every cell edge draws one construction line */
.cs-grid > * {
  outline: 1px solid var(--guide);
  outline-offset: -0.5px;
  min-width: 0;
  position: relative;
}

/* X'd corner boxes */
.cs-x {
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px), var(--guide) calc(50% - 0.5px),
      var(--guide) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right,
      transparent calc(50% - 0.5px), var(--guide) calc(50% - 0.5px),
      var(--guide) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* the artwork, ghosted back so the lines read first */
.cs-art { display: grid; place-items: center; }
.cs-art img { width: 100%; height: 100%; filter: brightness(0); opacity: 0.2; }

/* tagline lockup inside a clear-space cell: ghost the whole group,
   and derive the logo height back out of the lockup height (1.215 × logo) */
.cs-art .lockup {
  --lh: calc(var(--h) / 1.45);
  width: 100%;
  filter: brightness(0);
  opacity: 0.2;
}
.cs-art .lockup img { filter: none; opacity: 1; height: auto; }

/* label inside the top margin band */
.cs-label {
  display: flex;
  align-items: center;
  padding-left: 14px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.cs-label b { font-weight: 600; color: var(--ink); }

/* ½H markers in the side / bottom bands */
.cs-u {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--guide);
}

.cs-caption {
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .cs-lg { --h: 52px; }
  .cs-label { font-size: 9.5px; padding-left: 7px; }
  .cs-u { font-size: 9px; }
}

/* ---------- Asset / lockup cards ---------- */

.stage {
  display: grid;
  place-items: center;
  overflow: hidden;        /* transformed misuse artwork must not escape the card */
  padding: 44px 32px;
  min-height: 176px;
  background: var(--page);
}
.stage--white  { background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule); }
.stage--dark   { background: var(--color-black); }
.stage--orange { background: var(--color-brand-orange); }
.stage--blue   { background: var(--color-brand-blue); }
.stage--green  { background: var(--color-brand-green); }
.stage--photo {
  /* stands in for photography: neutral so it introduces no hue */
  background:
    linear-gradient(135deg, #2b2a29 0%, #565351 45%, #a8a4a1 100%);
}

.stage img { max-height: 64px; width: auto; }
.stage .cb-mark { max-height: none; }
.stage .lockup__mark { max-height: none; }
.stage img.em { height: 68px; max-height: none; width: 68px; }

/* The four company lockups are all 126.15 units tall and differ only in
   width, so setting them to a common width renders COZ at four different
   sizes. Scale each by its own width against the widest, COMFORT at
   677.16, and the wordmark comes out identical across the set, which also
   makes the four stages the same height. --sib-fit is the share of the
   stage the widest one takes. */
.stage img.sib {
  max-height: none;
  width: calc(var(--sib-fit, 82%) * var(--sib-w) / 677.16);
}
.sib--chem    { --sib-w: 483.66; }
.sib--castle  { --sib-w: 585.33; }
.sib--compass { --sib-w: 655.83; }
.sib--comfort { --sib-w: 677.16; }

.card__body {
  padding: 16px 18px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}
.card__body h4 { margin: 0; }
.card__body .mono { color: var(--ink-3); font-size: 11.5px; }

.dl {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--pill);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  white-space: nowrap;
}
.dl:hover { color: #fff; background: var(--color-brand-orange); }
.dl.is-busy { opacity: 0.55; pointer-events: none; }

/* ---------- Colour swatches ---------- */

.sw {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 22px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  transition: border-color 0.18s ease;
}
.sw:hover { border-color: var(--rule-hard); }
.sw__chip {
  width: 68px;
  height: 68px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.sw__chip--light { box-shadow: inset 0 0 0 1px var(--rule); }
.sw h4 { margin-bottom: 4px; }
.sw__desc { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.sw__vals { display: flex; flex-wrap: wrap; gap: 6px; }
.sw__copied {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  opacity: 0;
  transition: opacity 0.18s;
}
.sw.is-copied .sw__copied { opacity: 1; }

/* ---------- Minimum size ---------- */

.sizes {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(30px, 5vw, 60px);
}
.size { margin: 0; }
.size img { width: auto; }
.size__bar {
  border-top: 1px solid var(--guide);
  margin-top: 14px;
  padding-top: 8px;
}
.size figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.6;
}
.size figcaption b { color: var(--ink); font-weight: 500; }
.size--bad .size__bar { border-top-color: var(--no); }
.size--bad figcaption b { color: var(--no); }

/* ---------- Misuse ---------- */

.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.tag--no  { background: var(--no-bg); color: var(--no); }
.tag--yes { background: var(--ok-bg); color: var(--ok); }

.x-stretch { transform: scaleX(1.4); }
.x-squash  { transform: scaleY(0.55) scaleX(1.15); }
.x-rotate  { transform: rotate(-11deg); }
.x-shadow  { filter: drop-shadow(4px 6px 5px rgba(0, 0, 0, 0.5)); }
.x-wash    { filter: grayscale(1) contrast(0.2) brightness(1.4); }

.crowd {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Type specimen ---------- */

.spec { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 26px 28px; }
.spec__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.spec__aa { font-size: clamp(44px, 6vw, 66px); line-height: 1; margin-bottom: 12px; }
.spec__sample { font-size: 15px; color: var(--ink-2); }
.spec--head .spec__aa, .spec--head .spec__sample { font-family: var(--font-head); }
.spec--body .spec__aa, .spec--body .spec__sample { font-family: var(--font-body); }

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 36px 0 64px;
  font-size: 13px;
  color: var(--ink-3);
}
footer .shell { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; }

@media print {
  .bar { position: static; }
  section { break-inside: avoid; }
}

/* ---------- Type scale ---------- */

.type-scale {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
.type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 28px;
  align-items: baseline;
  padding: 18px 24px;
  border-top: 1px solid var(--rule);
}
.type-row:first-child { border-top: 0; }

.type-row__sample {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.type-row__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
}

.type-scale--body .type-row { align-items: start; }
.type-scale--body .type-row__sample {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  overflow: visible;
  max-width: 62ch;
}
.type-scale--body .type-row__meta { align-self: start; }

@media (max-width: 760px) {
  .type-row { grid-template-columns: minmax(0, 1fr); }
  .type-row__sample { white-space: normal; overflow: visible; }
  .type-row__meta { justify-content: flex-start; }
}

/* ---------- Tagline alignment demo ---------- */

.align-demo { position: relative; }

/* the C..B span, marked out over the artwork */
.align-demo .span-bar {
  position: absolute;
  top: 0;
  left: calc(var(--lh) * 0.0156);
  width: calc(var(--lh) * 5.1657);   /* (0.962087 - 0.002893) x 5.3842 x H */
  height: 100%;
  border-left: 1px solid var(--guide);
  border-right: 1px solid var(--guide);
  pointer-events: none;
}
/* the centre axis of that span */
.align-demo .span-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lh) * 2.5985);    /* 0.48249 x 5.3842 x H */
  width: 1px;
  background: var(--guide);
  pointer-events: none;
}
/* where the image box centre would wrongly fall */
.align-demo .span-axis--wrong {
  left: calc(var(--lh) * 2.6921);    /* 0.5 x 5.3842 x H */
  background: repeating-linear-gradient(180deg, var(--no) 0 3px, transparent 3px 6px);
}
.align-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  justify-content: center;
}
.align-key i { display: inline-block; width: 16px; height: 1px; vertical-align: 3px; margin-right: 7px; }
.align-key .k-ok { background: var(--guide); }
.align-key .k-no { background: repeating-linear-gradient(90deg, var(--no) 0 3px, transparent 3px 6px); }

/* =========================================================
   TAGLINE DIMENSION DIAGRAM
   Uses --H, NOT --lh: .lockup declares its own --lh, which would
   shadow an inherited value and desync the artwork from the rules.
   Reference lines are placed in units of --H, from the same
   constants the lockup itself is built from.
   ========================================================= */

.dim-fig {
  --H: 132px;
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding-top: 0;               /* padding box top must equal content top */
  padding-left: 94px;           /* gutter for the line names */
  padding-right: 124px;         /* gutter for the dimension brackets */
}
.dim-fig .lockup { --lh: var(--H); }

/* horizontal reference lines, spanning both gutters */
.dim-rule {
  position: absolute;
  left: 0;
  right: 88px;
  top: calc(var(--y) * var(--H));
  height: 0;
  border-top: 1px dashed var(--guide);
  pointer-events: none;
}
.dim-rule--solid { border-top-style: solid; }

.dim-rule i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--card);
  padding-right: 8px;
  white-space: nowrap;
}

/* vertical dimension brackets */
.dim-bar {
  position: absolute;
  right: 88px;
  top: calc(var(--a) * var(--H));
  height: calc((var(--b) - var(--a)) * var(--H));
  width: 1px;
  background: var(--guide);
  pointer-events: none;
}
.dim-bar::before,
.dim-bar::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: var(--guide);
}
.dim-bar::before { top: 0; }
.dim-bar::after { bottom: 0; }

.dim-bar b {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--guide);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dim-fig { --H: 84px; padding-left: 78px; padding-right: 104px; }
  .dim-rule { right: 76px; }
  .dim-bar { right: 76px; }
  .dim-rule i { font-size: 8.5px; }
}

/* ---------- Purpose, colour meaning, rules of engagement ---------- */

.motto {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
}

.meaning { padding: 22px; }
.meaning__dot {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c);
  margin-bottom: 16px;
}
.meaning h4 { margin: 0 0 4px; font-size: 17px; }
.meaning .mono { color: var(--ink-3); font-size: 12px; }

.rule-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-brand-orange);
  margin-bottom: 12px;
}

.name-list i { font-style: italic; }

/* ---------- Document-font specimens ---------- */

.spec--doc-head   .spec__aa, .spec--doc-head   .spec__sample { font-family: var(--font-doc-head); }
.spec--doc-body   .spec__aa, .spec--doc-body   .spec__sample { font-family: var(--font-doc-body); }
.spec--doc-accent .spec__aa, .spec--doc-accent .spec__sample { font-family: var(--font-doc-accent); }
.spec--doc-deck   .spec__aa, .spec--doc-deck   .spec__sample { font-family: var(--font-doc-deck); }

.spec__role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
  margin-bottom: 10px;
}