/* Brand library page only. Uses shared tokens from /styles.css. */
.brand-library-page { font-size: 1.0625rem; }
.brand-library-page .site-header { position: relative; }
.brand-library-page .header-inner { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: calc(var(--space) * 3); }
.brand-library-page .header-inner .btn { font-size: 1rem; white-space: normal; }
.brand-library { background: var(--blush); padding-bottom: calc(var(--space) * 12); }
.brand-library:focus { outline: none; }
.brand-library-intro { padding: calc(var(--space) * 10) 0 calc(var(--space) * 6); }
.brand-library h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); overflow-wrap: anywhere; }
.brand-library-lead { font-size: 1.125rem; max-width: 52ch; overflow-wrap: break-word; }
.brand-library-notice {
  margin-top: calc(var(--space) * 6); max-width: 64ch; background: var(--cream);
  border-left: 4px solid var(--court-navy); border-radius: var(--radius);
  padding: calc(var(--space) * 4) calc(var(--space) * 5); overflow-wrap: break-word;
}
.brand-library-notice h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: calc(var(--space) * 2); }
.brand-library-notice p:last-child { margin-bottom: 0; }
.brand-library-notice a { overflow-wrap: anywhere; }
.asset-category-links { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 5); }
.asset-category-links a { display: inline-flex; align-items: center; min-height: 44px; }
.asset-category + .asset-category { margin-top: calc(var(--space) * 12); }
.asset-category-title { font-size: 2rem; margin-bottom: calc(var(--space) * 5); }

.asset-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space) * 5); }
@media (min-width: 768px) { .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.asset-card {
  display: flex; flex-direction: column; min-width: 0; background: var(--cream);
  border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 var(--court-navy);
  scroll-margin-top: 90px;
}
.asset-card:target { box-shadow: 0 6px 0 var(--court-navy), 0 0 0 3px var(--serve-coral); }
.asset-preview {
  display: grid; place-items: center; min-height: 200px;
  padding: calc(var(--space) * 6); background: var(--white);
  border-bottom: 1px solid var(--input-border);
}
.asset-preview-dark { background: var(--court-navy); border-bottom-color: var(--court-navy); }
.asset-preview img { width: auto; max-width: min(100%, 320px); max-height: 160px; height: auto; object-fit: contain; }
.asset-preview-poster { background: var(--cream); }
.asset-preview-poster img { max-height: none; width: 100%; max-width: 320px; }

.asset-body { display: flex; flex-direction: column; flex: 1; padding: calc(var(--space) * 5); min-width: 0; overflow-wrap: break-word; }
.asset-body h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; margin-bottom: var(--space); }
.asset-meta { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-soft); }
.asset-body p { max-width: 60ch; }

.asset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 3) calc(var(--space) * 4); margin-top: auto; padding-top: calc(var(--space) * 3); }
.asset-actions .btn { font-size: 1rem; white-space: normal; max-width: 100%; overflow-wrap: anywhere; min-height: 44px; }
.asset-actions .btn[hidden] { display: none; }
.asset-direct { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space) 2px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }

.asset-status { margin: calc(var(--space) * 2) 0 0; font-weight: 600; color: var(--court-navy); }
.asset-status:empty { display: none; }
.asset-fallback { margin-top: calc(var(--space) * 3); }
.asset-fallback[hidden] { display: none; }
.asset-fallback input { font-size: 1rem; text-overflow: ellipsis; }

.brand-library-back { margin: calc(var(--space) * 8) 0 0; }

@media (max-width: 400px) {
  .brand-library-intro { padding-top: calc(var(--space) * 6); }
  .brand-library-notice, .asset-body { padding: calc(var(--space) * 4); }
  .asset-preview { padding: calc(var(--space) * 4); min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .asset-actions .btn:hover { animation: none; } }

/* Brand quick reference */
.asset-category-links { gap: var(--space) calc(var(--space) * 5); }
.brand-guide { padding-bottom: calc(var(--space) * 8); }
.guide-section { scroll-margin-top: calc(var(--space) * 4); padding-top: calc(var(--space) * 8); overflow-wrap: break-word; }
.guide-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: calc(var(--space) * 4); }
.guide-section h3, .gallery-note h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: calc(var(--space) * 2); }
.guide-intro { max-width: 64ch; margin-bottom: calc(var(--space) * 5); }
.guide-grid, .colour-grid, .type-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space) * 5); }
.colour-grid, .type-grid { margin-bottom: calc(var(--space) * 5); }
.guide-panel { min-width: 0; background: var(--cream); border-radius: var(--radius); padding: calc(var(--space) * 5); }
.guide-panel p:last-child, .guide-panel ul:last-child { margin-bottom: 0; }
.guide-note { max-width: 72ch; border-left: 4px solid var(--court-navy); }
.guide-note + .guide-note { margin-top: calc(var(--space) * 5); }
.gallery-note { margin: 0 0 calc(var(--space) * 8); }
.guide-quote { font-family: var(--heading); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--court-navy); }
.guide-list, .emoji-list { margin: 0 0 calc(var(--space) * 3); padding-left: 1.25rem; }
.guide-list li + li, .emoji-list li + li { margin-top: var(--space); }
.emoji-list { list-style: none; padding-left: 0; }
.emoji-list span { display: inline-block; min-width: 1.5em; }
.guide-panel a { color: var(--coral-text); font-weight: 600; overflow-wrap: anywhere; }

.reference-copy { display: flex; flex-direction: column; gap: calc(var(--space) * 2); min-width: 0; background: var(--cream); border-radius: var(--radius); padding: calc(var(--space) * 5); box-shadow: 0 6px 0 var(--court-navy); overflow-wrap: break-word; }
.reference-copy h3 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.reference-copy label { font-size: .875rem; font-weight: 600; color: var(--navy-soft); }
.reference-copy p { margin: 0; max-width: 60ch; }
.reference-copy .reference-value { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
.reference-body { display: flex; flex-direction: column; gap: calc(var(--space) * 2); min-width: 0; }
.reference-copy input { margin-bottom: var(--space); }
.reference-copy-button { align-self: flex-start; min-height: 44px; font-size: 1rem; white-space: normal; max-width: 100%; }
.reference-copy-button[hidden], .reference-fallback[hidden] { display: none; }
.reference-copy .asset-status { margin: 0; }
.colour-chip { min-height: 5rem; border-radius: var(--radius); border: 1px solid var(--court-navy); }
.colour-serve-coral { background: var(--serve-coral); }
.colour-court-navy { background: var(--court-navy); }
.colour-blush { background: var(--blush); }
.colour-cream { background: var(--cream); }
.colour-ball-yellow { background: var(--ball-yellow); }
.colour-coral-dark { background: var(--coral-dark); }
.type-specimen { color: var(--court-navy); line-height: 1.15; overflow-wrap: anywhere; padding-block: var(--space); }
.type-display { font-family: var(--heading); font-weight: 800; font-size: 2.25rem; }
.type-heading { font-family: var(--heading); font-weight: 700; font-size: 1.75rem; }
.type-body { font-family: var(--body); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; }
.type-action { font-family: var(--body); font-weight: 600; font-size: 1.1875rem; }

@media (min-width: 768px) {
  .guide-grid, .colour-grid, .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .colour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .guide-panel, .reference-copy { padding: calc(var(--space) * 4); }
  .guide-section h2 { font-size: 1.75rem; }
  .type-display { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-library-page .btn:hover { animation: none; }
  .brand-library-page .btn { transition: none; }
}