/* Brand guide (/brand/): the legal template (legal.css) with the guide's specimens in the reading
   column: the name, the copy rows, the logo on its grounds, the colours, the type and the download
   tiles. Specimen grounds (cream, ink, orange) are the logo's real backgrounds, so they keep their
   colour in both themes; everything else follows the page tokens (company-theme.css in the dark). */

.ls .bg-head-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

.ls .lg-sec h3 { margin: 0; color: var(--ls-ink); font-size: 17px; font-weight: 800; line-height: 24px; letter-spacing: -0.01em; }
.ls .lg-sec strong { color: var(--ls-ink); font-weight: 700; }
.ls .lg-sec s { text-decoration-thickness: 2px; text-decoration-color: var(--ls-accent-text); }

/* ---------- the name ---------- */
.ls .bg-name { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 6px; border: 1px solid var(--ls-line-2); border-radius: 20px; background: var(--ls-paper); overflow: hidden; }
.ls .bg-name-col { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 28px; }
.ls .bg-name-col--no { border-left: 1px solid var(--ls-line-2); background: var(--ls-canvas); }
.ls .bg-name-col h3 { color: var(--ls-soft); font-size: 15px; font-weight: 700; }
.ls .lg-sec .bg-name-hero { color: var(--ls-ink); font-size: 44px; font-weight: 800; line-height: 46px; letter-spacing: -0.04em; }
.ls .lg-sec .bg-name-list { gap: 6px; }
.ls .lg-sec .bg-name-list li { padding-left: 0; color: var(--ls-ink); font-size: 17px; font-weight: 600; line-height: 26px; }
.ls .lg-sec .bg-name-list li::before { content: none; }
.ls .bg-name-col--no .bg-name-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.ls .lg-sec .bg-name-col--no .bg-name-list li { color: var(--ls-soft); font-weight: 500; white-space: nowrap; }

/* ---------- label and value rows ---------- */
.ls .bg-rows { margin: 4px 0; border-top: 1px solid var(--ls-line-2); }
.ls .bg-rows > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--ls-line-2); }
.ls .bg-rows dt { color: var(--ls-soft); font-size: 15px; font-weight: 600; line-height: 24px; }
.ls .bg-rows dd { margin: 0; min-width: 0; color: var(--ls-ink); font-size: 16px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.ls .bg-rows--copy dd { font-weight: 500; }

/* ---------- the one line ---------- */
.ls .bg-quote { margin: 6px 0; padding: 26px 28px; border-radius: 20px; background: var(--ls-sand); }
.ls .lg-sec .bg-quote p { color: var(--ls-ink); font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.025em; }

/* ---------- say and do not say ---------- */
.ls .bg-pairs { width: 100%; margin: 4px 0; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.ls .bg-pairs th { padding: 0 16px 10px 0; color: var(--ls-soft); font-size: 15px; font-weight: 700; text-align: left; }
.ls .bg-pairs td { width: 50%; padding: 12px 16px 12px 0; border-top: 1px solid var(--ls-line-2); color: var(--ls-ink); font-weight: 600; vertical-align: top; }
.ls .bg-pairs td s { color: var(--ls-soft); font-weight: 500; }
.ls .bg-pairs tbody tr:last-child td { border-bottom: 1px solid var(--ls-line-2); }

/* ---------- the badge beside the brand rules ---------- */
.ls .bg-badge-feature { display: flex; align-items: center; gap: 24px; margin: 10px 0 0; padding: 22px 24px; border: 1px solid var(--ls-line-2); border-radius: 20px; background: var(--ls-paper); }
.ls .bg-badge-feature img { display: block; flex: none; width: 220px; height: auto; }
.ls .lg-sec .bg-badge-feature figcaption { color: var(--ls-ink); font-size: 16px; font-weight: 600; line-height: 24px; }

/* ---------- the logo on its grounds ---------- */
.ls .bg-grounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0; }
.ls .bg-ground { display: flex; flex-direction: column; margin: 0; border-radius: 18px; overflow: hidden; }
.ls .bg-ground img { display: block; width: 72%; height: auto; margin: 44px auto 40px; }
.ls .bg-ground figcaption { padding: 10px 16px 12px; font-size: 14px; font-weight: 700; line-height: 20px; }
.ls .bg-ground--cream { background: #FAF7F2; box-shadow: inset 0 0 0 1px var(--ls-line-2); color: #141412; }
.ls .bg-ground--ink { background: #161512; color: #FFFFFF; }
.ls .bg-ground--orange { background: #FF5C26; color: #141412; }

/* ---------- colours ---------- */
.ls .lg-sec .bg-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0; }
.ls .lg-sec .bg-swatches li { display: flex; flex-direction: column; gap: 2px; padding: 0; color: var(--ls-soft); font-size: 14px; line-height: 20px; }
.ls .lg-sec .bg-swatches li::before { content: none; }
.ls .bg-chip { display: block; aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: 14px; background: var(--chip); box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .12); }
.ls .bg-swatches strong { font-size: 16px; line-height: 22px; }
.ls .lg .bg-swatches code { color: var(--ls-ink); font-family: 'Space Grotesk', var(--tud-font-sans, sans-serif); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }

/* ---------- type ---------- */
.ls .bg-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0; }
.ls .bg-type-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; border: 1px solid var(--ls-line-2); border-radius: 18px; background: var(--ls-paper); }
.ls .lg-sec .bg-type-sample { color: var(--ls-ink); font-size: 34px; font-weight: 800; line-height: 40px; letter-spacing: -0.035em; }
.ls .lg-sec .bg-type-sample--grotesk { font-family: 'Space Grotesk', var(--tud-font-sans, sans-serif); font-weight: 700; letter-spacing: -0.02em; }
.ls .lg-sec .bg-type-card p:last-child { font-size: 15px; line-height: 22px; }

/* ---------- downloads ---------- */
.ls .bg-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 10px; }
.ls .bg-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: 20px; background: var(--ls-paper); border: 1px solid var(--ls-line-2); }
.ls .lg-sec .bg-pack p { flex: 1 1 auto; margin-bottom: 10px; font-size: 15px; line-height: 23px; }
.ls .lg-sec a.btn { gap: 10px; text-decoration: none; }
.ls .lg-sec a.btn-primary, .ls .lg-sec a.btn-primary:hover { color: var(--ls-paper); }
.ls .lg-sec a.btn-secondary, .ls .lg-sec a.btn-secondary:hover { color: var(--ls-ink); }
.ls .bg-size { font-family: 'Space Grotesk', var(--tud-font-sans, sans-serif); font-size: 13px; font-weight: 600; opacity: .78; }

.ls .bg-group { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.ls .bg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ls .bg-tiles--symbol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls .bg-tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls .bg-tiles--icon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls .bg-tile { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ls-line-2); border-radius: 16px; background: var(--ls-paper); overflow: hidden; }
.ls .bg-tile-art { display: grid; place-items: center; height: 112px; padding: 18px; }
.ls .bg-tile-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ls .bg-tiles--logo .bg-tile-art img, .ls .bg-tiles--wordmark .bg-tile-art img { width: 100%; }
.ls .bg-tiles--stacked .bg-tile-art img { height: 62px; }
.ls .bg-tiles--symbol .bg-tile-art img { height: 60px; }
.ls .bg-tiles--icon .bg-tile-art img { height: 64px; border-radius: 15px; }
.ls .bg-tiles--two .bg-tile-art { height: 132px; padding: 24px; }
.ls .bg-tiles--two .bg-tile-art img { width: min(100%, 260px); }
.ls .bg-tile-art--light { background: #FAF7F2; }
.ls .bg-tile-art--dark { background: #161512; }
.ls .bg-tile figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 6px 2px 12px; border-top: 1px solid var(--ls-line-2); color: var(--ls-ink); font-size: 13px; font-weight: 700; line-height: 18px; }
.ls .bg-tile-links { display: flex; margin-left: -6px; }
.ls .lg-sec .bg-tile-links a { display: inline-grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 6px; border-radius: 10px; color: var(--ls-accent-text); font-family: 'Space Grotesk', var(--tud-font-sans, sans-serif); font-size: 13px; font-weight: 700; text-decoration: none; }
.ls .lg-sec .bg-tile-links a:hover { background: var(--ls-tint); color: var(--ls-ink); }

.ls .lg-sec .bg-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ls .lg-sec .bg-posts li { padding: 0; }
.ls .lg-sec .bg-posts li::before { content: none; }
.ls .bg-posts img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--ls-shadow); }

/* ---------- before you post: empty boxes, never a tick ---------- */
.ls .lg-sec .bg-check li { padding-left: 34px; color: var(--ls-ink); font-weight: 600; }
.ls .lg-sec .bg-check li::before { top: 3px; width: 18px; height: 18px; border: 2px solid var(--ls-ink); border-radius: 5px; background: transparent; }

@media (max-width: 900px) {
  .ls .bg-tiles, .ls .bg-tiles--symbol, .ls .bg-tiles--icon, .ls .lg-sec .bg-posts, .ls .lg-sec .bg-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls .bg-grounds { grid-template-columns: minmax(0, 1fr); }
  .ls .bg-ground img { width: min(64%, 260px); margin: 36px auto 30px; }
}
@media (max-width: 640px) {
  .ls .bg-name { grid-template-columns: minmax(0, 1fr); }
  .ls .bg-name-col--no { border-left: 0; border-top: 1px solid var(--ls-line-2); }
  .ls .bg-name-col { padding: 22px 20px 24px; }
  .ls .lg-sec .bg-name-hero { font-size: 38px; line-height: 42px; }
  .ls .bg-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ls .lg-sec .bg-quote p { font-size: 22px; line-height: 28px; }
  .ls .bg-quote { padding: 22px 20px; }
  .ls .bg-badge-feature { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .ls .bg-badge-feature img { width: min(100%, 260px); }
  .ls .bg-packs, .ls .bg-type, .ls .bg-tiles--two { grid-template-columns: minmax(0, 1fr); }
  .ls .bg-head-actions .btn { flex: 1 1 100%; }
}

/* ---------- dark (company-theme.css sets the page tokens) ---------- */
:root[data-theme="dark"] .ls .bg-chip { box-shadow: inset 0 0 0 1px rgba(246, 239, 228, .22); }
:root[data-theme="dark"] .ls .bg-ground--cream { box-shadow: none; }
:root[data-theme="dark"] .ls .bg-tile-art--dark { box-shadow: inset 0 0 0 1px #2E2822; }
:root[data-theme="dark"] .ls .lg-sec .bg-tile-links a:hover { color: var(--ls-ink); }
:root[data-theme="dark"] .ls .bg-ground--ink { box-shadow: inset 0 0 0 1px #443B32; }