/* Percy brand guide. Core colour and font tokens come from styles.css. */
.brand-page { font-size: 17px; }
.brand-page .eyebrow, .brand-page .section-kicker { font-size: 14px; letter-spacing: 1.2px; }
.brand-page .small { font-size: 15px; }
.brand-page .header-cta, .brand-page .text-link, .brand-page .button { font-size: 15px; }
.brand-page h1, .brand-page h2, .brand-page h3 { text-wrap: balance; }
.brand-page h3 { font-size: clamp(30px, 3vw, 44px); margin-bottom: 20px; }
.brand-page p { max-width: 68ch; }
.brand-header-label { font-size: 14px; letter-spacing: 1.4px; }
.brand-intro { display: grid; grid-template-columns: 1.2fr .85fr; gap: 6vw; padding: 58px 5vw 48px; align-items: center; }
.brand-intro h1 { font: clamp(58px, 6.5vw, 108px)/.96 var(--serif); letter-spacing: -2.5px; margin: 24px 0 30px; }
.brand-intro h1 em { color: var(--orange); }
.brand-lead { font-size: clamp(17px, 1.5vw, 21px); max-width: 42ch !important; }
.brand-note { border-left: 2px solid var(--orange); padding-left: 22px; margin: 30px 0 0; font-size: 16px; color: var(--muted); }
.brand-portrait { align-self: center; border: 1px solid var(--line); }
.brand-portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.brand-portrait figcaption { background: var(--lime); padding: 22px 26px; display: flex; flex-direction: column; }
.brand-portrait figcaption span { font-size: 14px; }
.brand-portrait figcaption span:first-child { letter-spacing: 1.2px; }
.brand-portrait figcaption strong { font: 40px/1.2 var(--serif); margin: 5px 0 8px; }
.brand-contents { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 5vw; border-block: 1px solid var(--ink); }
.brand-contents a { padding: 22px 16px; border-right: 1px solid var(--line); text-decoration: none; font-size: 16px; }
.brand-contents a:first-child { padding-left: 0; }
.brand-contents a:last-child { border: 0; }
.brand-contents span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 3px; }
.brand-contents a:hover { color: var(--orange); background: #e7eadb; }
.brand-section { padding-block: 76px; }
.brand-section .section-heading > p { max-width: 430px; }
.brand-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 42px; }
.brand-two-col > *, .type-row > *, .brand-intro > * { min-width: 0; }
.wordmark-pair { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.wordmark-specimen { padding: 70px 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 52px; }
.wordmark-specimen .wordmark { font-size: clamp(38px, 5vw, 68px); letter-spacing: .10345em; text-align: left; }
.wordmark-specimen .wordmark span { font-size: .414em; letter-spacing: .16667em; }
.wordmark-specimen p { font-size: 14px; margin: 0; }
.wordmark-specimen.reverse { background: var(--deep); color: var(--paper); }
.brand-facts { margin: 0 0 24px; }
.brand-facts > div { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); gap: 18px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.brand-facts dt { color: var(--muted); font-size: 15px; }
.brand-facts dd { margin: 0; }
.brand-colours { background: #e7eadb; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.swatch { background: var(--paper); border: 1px solid #a6b398; display: flex; flex-direction: column; }
.swatch-colour { min-height: 180px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 38px; }
.swatch-colour span { font: 29px/1.15 var(--serif); }
.swatch code { font-size: 17px; }
.swatch-caption { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.swatch-caption p { font-size: 15px; margin-bottom: 20px; }
.swatch-caption button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: none; color: var(--ink); border: 0; border-top: 1px solid var(--line); width: 100%; min-height: 44px; padding: 12px 0 0; font-size: 15px; margin-top: auto; }
.swatch-caption button:hover { color: var(--orange); }
.copy-feedback { min-height: 1.7em; margin: 16px 0 0; font-size: 15px; }
.contrast-guide { border-top: 1px solid #a6b398; padding-top: 36px; }
.table-wrap { overflow-x: auto; }
.brand-page table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.brand-page caption { text-align: left; font-weight: 600; margin-bottom: 12px; }
.brand-page th, .brand-page td { border-bottom: 1px solid #a6b398; padding: 12px 8px; }
.brand-page thead th { font-weight: 600; }
.brand-page tbody th { font-weight: 400; }
.brand-page td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.contrast-sample { display: inline-flex; padding: 6px 10px; min-width: 44px; justify-content: center; }
.type-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; padding: 38px 0; border-top: 1px solid var(--line); align-items: center; }
.type-specimen { padding: 34px; background: #e7eadb; }
.serif-sample { font: clamp(44px, 4.8vw, 76px)/1.05 var(--serif); letter-spacing: -1.2px; }
.type-specimen > span { display: block; font: 16px/1.5 var(--sans); letter-spacing: 1px; border-top: 1px solid #a6b398; padding-top: 22px; margin-top: 30px; }
.sans-sample > strong { font: 500 clamp(28px, 3vw, 46px)/1.2 var(--sans); }
.sans-sample > p { font-size: 17px; margin: 25px 0 0; }
.type-footnote { display: flex; gap: 36px; border-top: 1px solid var(--line); padding-top: 25px; }
.type-footnote > span { font-size: 14px; letter-spacing: 1px; white-space: nowrap; padding-top: 3px; }
.type-footnote p { margin: 0; }
.brand-voice { background: var(--deep); color: var(--paper); }
.brand-voice .section-kicker, .voice-principles article { border-color: #56705b; }
.brand-voice h2 em { color: var(--lime); }
.voice-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.voice-principles article { border-top: 1px solid; padding-top: 24px; }
.voice-principles article > span { color: var(--lime); font-size: 14px; }
.voice-principles h3 { margin: 14px 0 18px; }
.voice-principles p { font-size: 16px; }
.voice-examples { padding: 40px; margin: 34px 0 38px; background: var(--lime); color: var(--ink); }
.voice-examples blockquote { font: clamp(28px, 3.2vw, 48px)/1.15 var(--serif); margin: 24px 0 0; padding-top: 24px; border-top: 1px solid #94ac60; max-width: 40ch; }
.character-boundary { max-width: 900px; }
.character-boundary p { max-width: 78ch; font-size: 16px; }
.image-specimens { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.image-specimens figure { border: 1px solid var(--line); }
.image-specimens img { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.image-specimens figcaption { padding: 20px 24px; display: flex; flex-direction: column; align-items: flex-start; }
.image-specimens strong { font: 31px/1.15 var(--serif); margin-bottom: 10px; }
.image-specimens span { color: var(--muted); font-size: 14px; }
.image-specimens a { margin-top: 20px; font-size: 15px; }
.brand-sponsorship { background: #e7eadb; }
.brand-page .sponsor-example { padding: 28px; }
.brand-page .sponsor-example .sponsor-label { font-size: 14px; }
.brand-page .sponsor-example .sponsor-inner { gap: 18px; }
.brand-page .sponsor-example .sponsor-brand { flex: 0 1 400px; }
.brand-page .sponsor-example p { font-size: 16px; }
.sponsor-tokens { font-family: "HB Inter", Inter, Arial, sans-serif; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.sponsor-tokens > span { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; font-size: 15px; }
.sponsor-tokens i { display: block; width: 28px; height: 28px; border: 1px solid #868294; grid-row: 1 / 3; }
.sponsor-tokens code { grid-column: 2; font-size: 14px; }
.brand-source { max-width: 100% !important; font-size: 15px; border-top: 1px solid #a6b398; margin: 32px 0 0; padding-top: 24px; }
.brand-end { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 45px 5vw; background: var(--lime); }
.brand-end > p { font-size: 15px; letter-spacing: 1.4px; margin: 0; }
.brand-end .button { margin: 0; }
.brand-page footer { border-top: 1px solid var(--line); }
.brand-page footer p, .brand-page footer a:not(.wordmark) { font-size: 14px; }
@media (min-width: 1700px) { .brand-intro { gap: 8vw; } }
@media (max-width: 1100px) {
  .brand-header-label { display: none; }
  .brand-intro { grid-template-columns: 1.1fr .9fr; gap: 4vw; }
  .brand-intro h1 { font-size: clamp(55px, 7vw, 82px); }
  .brand-contents a { padding: 18px 12px; font-size: 15px; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-page .sponsor-example .sponsor-inner { flex-wrap: wrap; }
  .brand-page .sponsor-example .sponsor-brand { flex-basis: 360px; }
}
@media (max-width: 800px) {
  .brand-page { font-size: 16px; }
  .brand-intro { grid-template-columns: 1fr; padding: 36px 6vw; gap: 32px; }
  .brand-intro h1 { font-size: clamp(52px, 10vw, 82px); letter-spacing: -1.5px; }
  .brand-portrait { max-width: 540px; width: 100%; }
  .brand-contents { margin-inline: 6vw; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-contents a { padding: 16px 12px; }
  .brand-contents a:first-child { padding-left: 12px; }
  .brand-contents a:nth-child(3) { border-right: 0; }
  .brand-contents a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .brand-section { padding-block: 52px; }
  .brand-page .section-kicker { flex-wrap: wrap; gap: 8px 24px; }
  .brand-page .section-kicker span:last-child { max-width: none; text-align: left; }
  .brand-two-col, .type-row { grid-template-columns: 1fr; gap: 32px; }
  .brand-two-col { margin-top: 32px; }
  .wordmark-specimen { padding: 45px 20px 24px; gap: 36px; }
  .wordmark-specimen .wordmark { font-size: clamp(30px, 6vw, 45px); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .swatch-colour { padding: 20px; min-height: 165px; }
  .type-footnote { flex-direction: column; gap: 12px; }
  .voice-principles { grid-template-columns: 1fr; gap: 20px; }
  .voice-examples { padding: 28px; }
  .image-specimens { grid-template-columns: 1fr; }
  .brand-page .sponsor-example { padding: 28px 18px; }
  .brand-page .sponsor-example .sponsor-brand { flex: none; width: 312px; }
  .brand-page .sponsor-example p { font-size: 16px; }
  .brand-end { padding: 32px 6vw; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .brand-page .site-header { gap: 20px; }
  .brand-page .header-cta { font-size: 14px; max-width: 150px; text-align: right; }
  .brand-page h2 { font-size: clamp(38px, 10vw, 45px); letter-spacing: -1px; }
  .brand-intro h1 { font-size: clamp(44px, 11vw, 58px); }
  .brand-contents a { font-size: 14px; padding: 14px 8px; }
  .wordmark-pair { grid-template-columns: 1fr; }
  .wordmark-specimen .wordmark { font-size: 45px; }
  .swatch-grid { grid-template-columns: 1fr; }
  .swatch-colour { min-height: 145px; }
  .brand-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .type-specimen { padding: 24px; }
  .voice-examples { padding: 24px; }
  .brand-page .sponsor-example .sponsor-brand { width: 100%; max-width: 312px; padding: 30px; }
  .sponsor-tokens { grid-template-columns: 1fr; }
}
@media print {
  .brand-page { background: white; color: #133a29; }
  .brand-contents, .brand-page .site-header, .swatch-caption button, .copy-feedback, .brand-end .button { display: none !important; }
  .brand-intro { padding: 0 0 20px; grid-template-columns: 1.4fr .6fr; }
  .brand-intro h1 { font-size: 45px; }
  .brand-note { margin-top: 16px; }
  .brand-portrait figcaption { padding: 12px; }
  .brand-portrait figcaption strong { font-size: 28px; }
  .brand-section { padding: 28px 0; }
  .brand-page h2 { font-size: 40px; }
  .brand-page h3 { font-size: 28px; }
  .brand-page .section-heading { margin-bottom: 20px; }
  .brand-voice { background: white; color: #133a29; }
  .brand-voice h2 em, .voice-principles article > span { color: #133a29; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .swatch-colour, .contrast-sample, .wordmark-specimen, .sponsor-example { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .swatch-colour { min-height: 115px; }
  .swatch-caption { padding: 12px; }
  .swatch-caption p { margin: 0; }
  .brand-two-col, .type-row { gap: 25px; margin-top: 24px; }
  .image-specimens { grid-template-columns: 1fr 1fr; }
  .image-specimens figcaption { padding: 12px; }
  .image-specimens strong { font-size: 24px; }
  .brand-page section { break-inside: auto; }
  .brand-page figure, .type-row, .swatch, .voice-principles article { break-inside: avoid; }
  .brand-page h2, .brand-page h3, .section-kicker { break-after: avoid; }
}