/* Optional visual comparisons. Classic (or no data-design) retains Light Modern
   with the shared header belt. No content, IA, visibility or role changes. */

html[data-design="sport"] {
  color-scheme: light;
  --bg: #F4F4F4;
  --surface: #FFFFFF;
  --text: #101010;
  --muted: #595959;
  --line: #D1D1D1;
  --gold: #B81827;
  --design-accent: #B81827;
  --design-accent-hover: #971320;
  --design-tint: #FBECEE;
  --design-radius: 8px;
  --design-panel-space: 24px;
  --design-heading: var(--font-ui);
  --design-heading-weight: 750;
  --font-editorial: 'SUIT', sans-serif;
}

html[data-design="calm"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #242020;
  --muted: #625A5A;
  --line: #DFD9D7;
  --gold: #9F2032;
  --design-accent: #9F2032;
  --design-accent-hover: #811A29;
  --design-tint: #FAF4F3;
  --design-radius: 12px;
  --design-panel-space: 30px;
  --design-heading: var(--font-ui);
  --design-heading-weight: 500;
  --font-editorial: 'SUIT', sans-serif;
}

/* Shared structure for the two alternatives. Red keeps its question/error
   meaning; the brand accent changes independently. */
html:is([data-design="sport"], [data-design="calm"]) body {
  background: var(--bg);
  color: var(--text);
}
html:is([data-design="sport"], [data-design="calm"]) :is(h1,h2,h3,.brand,.profile-style h2,.coach-style,.revenue-percent,.roll-summary-position>b) {
  font-family: var(--design-heading);
  font-weight: var(--design-heading-weight);
  color: var(--text);
}
html:is([data-design="sport"], [data-design="calm"]) :is(p,.caption,.form-note,.sample-media-note,.coach-media-caption,.coach-local-note,.student-process span,.coach-rate-table caption) {
  color: var(--muted);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.eyebrow,.guide-number,.profile-guide-row>span,.coach-benefit-grid article>span,.student-process li::before) {
  color: var(--design-accent);
  font-weight: 650;
}
html:is([data-design="sport"], [data-design="calm"]) :is(.hero em,.profile-style h2,.premium-profile .profile-style h2,.charge-equivalence strong,.coach-income-formula strong,.free-quick-tag) {
  color: var(--design-accent);
}
html:is([data-design="sport"], [data-design="calm"]) :is(button,.button) {
  border-color: var(--line);
  border-radius: var(--design-radius);
  color: var(--text);
  background: var(--surface);
  font-weight: 600;
  min-height: 44px;
}
html:is([data-design="sport"], [data-design="calm"]) :is(button,.button):hover {
  background: var(--design-tint);
  border-color: var(--design-accent);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.primary,.primary:hover) {
  color: #FFFFFF;
  background: var(--design-accent);
  border-color: var(--design-accent);
}
html:is([data-design="sport"], [data-design="calm"]) .primary:hover {
  background: var(--design-accent-hover);
  border-color: var(--design-accent-hover);
}
html:is([data-design="sport"], [data-design="calm"]) :is(button,.button,a,input,textarea,select):focus-visible {
  outline-color: var(--design-accent);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.text-button,.coach-note-jump) {
  background: transparent;
  border: 0;
  color: var(--text);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.danger,.error) {
  color: #B42335;
}
html:is([data-design="sport"], [data-design="calm"]) :is(input,select,textarea,.question-composer textarea) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.panel,section.panel,.card,.grid>.card,.coach-directory-card) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: var(--design-panel-space);
  box-shadow: none;
}
html:is([data-design="sport"], [data-design="calm"]) #coach-form>.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: var(--design-panel-space);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.student-queue-summary a,.admin-overview-card,.experience-queue-card,.experience-evaluation fieldset,.student-feedback-form fieldset) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.student-queue-summary b,.admin-overview-card strong,.metric,.earning-value,.wallet-balance strong) {
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:is([data-design="sport"], [data-design="calm"]) :is(.student-queue-summary a:hover,.admin-overview-card:hover) {
  background: var(--design-tint);
  border-color: var(--design-accent);
  text-decoration: none;
}
html:is([data-design="sport"], [data-design="calm"]) :is(.first-quick-offer,.wallet-balance,.result-next-action,.experience-next-class,.coach-demo-outcome) {
  padding: var(--design-panel-space);
  background: var(--design-tint);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.first-quick-offer>p:not(.caption),.student-request-warning,.experience-pointer,.coach-demo-caption,.coach-income-rule>.coach-income-formula,.result-next-action .prewrap,.student-question,.coach-answer p) {
  color: var(--text);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.role-summary .tag,.tag) {
  background: var(--design-tint);
  color: var(--design-accent);
  border-color: var(--line);
  border-radius: calc(var(--design-radius) / 2);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.page-contents,.coach-section-nav) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: 8px 16px;
  gap: 8px 20px;
}
html:is([data-design="sport"], [data-design="calm"]) :is(.page-contents a,.coach-section-nav a) {
  color: var(--text);
  font-weight: 600;
  min-height: 44px;
}
html:is([data-design="sport"], [data-design="calm"]) nav :is(.account-links,.guide-menu-links) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--design-radius);
  box-shadow: 0 8px 24px #17171712;
}
html:is([data-design="sport"], [data-design="calm"]) nav :is(.account-links a,.account-links button,.guide-menu-links a):hover {
  color: var(--design-accent);
  background: var(--design-tint);
}
html:is([data-design="sport"], [data-design="calm"]) .environment {
  color: var(--muted);
  background: var(--bg);
  border-color: var(--line);
  letter-spacing: .02em;
}
html:is([data-design="sport"], [data-design="calm"]) .environment :is(b,a) { color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .header-points b { color: var(--design-accent);font-weight: 700; }
html:is([data-design="sport"], [data-design="calm"]) :is(.video-stage,video,.question-composer,.demo-phone) { border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .student-experience {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: var(--design-panel-space);
}
html:is([data-design="sport"], [data-design="calm"]) .student-experience .experience-instructions {
  padding: 24px;
  background: var(--design-tint);
  border: 0;
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) .student-experience :is(.experience-checklist li.current,.experience-checklist li.current .experience-check) {
  color: var(--design-accent);
  border-color: var(--design-accent);
}
html:is([data-design="sport"], [data-design="calm"]) .student-experience :is(.experience-checklist li.done .experience-check,.experience-status-track li.done span) {
  background: var(--design-accent);
  border-color: var(--design-accent);
  color: #FFFFFF;
}
html:is([data-design="sport"], [data-design="calm"]) :is(.experience-pointer,.coach-demo-caption) {
  background: var(--surface);
  border-left-color: var(--design-accent);
  border-radius: 0 calc(var(--design-radius) / 2) calc(var(--design-radius) / 2) 0;
}
html:is([data-design="sport"], [data-design="calm"]) .student-experience #question-form:not([hidden]) { border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .student-experience :is(.experience-status,.experience-completion) {
  border-color: var(--design-accent);
  color: var(--design-accent);
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) .student-experience .experience-bell { color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .coach-guide-finish .coach-experience {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: var(--design-panel-space);
}
html:is([data-design="sport"], [data-design="calm"]) .coach-experience-steps li { color: var(--muted); }
html:is([data-design="sport"], [data-design="calm"]) .coach-experience-steps li[aria-current] { color: var(--design-accent);border-bottom-color: var(--design-accent);font-weight: 650; }
html:is([data-design="sport"], [data-design="calm"]) .coach-auto-progress progress { accent-color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .coach-benefit-grid article {
  padding: var(--design-panel-space);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
}
html:is([data-design="sport"], [data-design="calm"]) :is(.coach-profile-points>div,.coach-income-rule,.coach-sample-question,.coach-demo-note,.coach-demo-decisions,.coach-demo-final-answer,.coach-local-note,.coach-settlement-note,.coach-eligibility-list>div,.coach-guide-finish .coach-next-links,.student-process li,.charge-guide) { border-color: var(--line); }
html:is([data-design="sport"], [data-design="calm"]) .coach-directory-card { padding: 0; }
html:is([data-design="sport"], [data-design="calm"]) .directory-card-body { padding: var(--design-panel-space); }
html:is([data-design="sport"], [data-design="calm"]) :is(.profile-photo,.coach-academy-preview img,.academy-gallery img) { border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) :is(.analysis-hexagon,.roll-summary) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  padding: var(--design-panel-space);
}
html:is([data-design="sport"], [data-design="calm"]) .hex-data { fill: var(--design-tint);stroke: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .hex-point { fill: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .analysis-hexagon figcaption .eyebrow { color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .translation-tabs button[aria-selected="true"] { color: var(--design-accent);border-color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .role-nav { background: var(--surface);border-color: var(--line); }
html:is([data-design="sport"], [data-design="calm"]) .role-nav a[aria-current] { color: var(--design-accent);background: var(--design-tint);border-radius: var(--design-radius);font-weight: 700; }
html:is([data-design="sport"], [data-design="calm"]) .role-notifications :is(.sra-toggle,.sra-panel) { background: var(--surface);color: var(--text);border-color: var(--line);border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .role-notifications .sra-count { background: var(--design-accent);color: #FFFFFF; }
html:is([data-design="sport"], [data-design="calm"]) .role-notifications .sra-list [data-unread="true"] strong { color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .role-notifications :is(.sra-list a,.sra-panel h2,.sra-sound) { color: var(--text); }
html:is([data-design="sport"], [data-design="calm"]) .role-notifications :is(.sra-panel p,.sra-list span,.sra-list small) { color: var(--muted); }
html:is([data-design="sport"], [data-design="calm"]) .role-notification-toast { background: var(--surface);color: var(--text);border-color: var(--line);border-left-color: var(--design-accent);border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .role-notification-toast :is(a,p) { color: var(--text); }
html:is([data-design="sport"], [data-design="calm"]) :is(#review-demo-dialog,#academy-sheet,#reject-review-dialog,#publication-success,#notice) { background: var(--surface);color: var(--text);border-color: var(--line);border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) th { color: var(--text);background: var(--design-tint);font-weight: 700; }
html:is([data-design="sport"], [data-design="calm"]) :is(td,th,.list-item) { border-color: var(--line); }
html:is([data-design="sport"], [data-design="calm"]) footer { background: var(--surface);border-color: var(--line);color: var(--muted); }

/* B — Black Label: a black masthead, compact hierarchy and clear white content. */
html[data-design="sport"] body { line-height: 1.65; }
html[data-design="sport"] .site-header { background: #101010;border-bottom: 2px solid var(--design-accent);padding: 26px 32px; }
html[data-design="sport"] .brand { font-family: var(--font-ui);font-size: 27px;font-weight: 850;letter-spacing: -.055em; }
html[data-design="sport"] .site-header .brand { color: #FFFFFF; }
html[data-design="sport"] .brand span { color: #D1D1D1;font-weight: 600;letter-spacing: .1em; }
html[data-design="sport"] .site-header>#nav>a,
html[data-design="sport"] .site-header>#nav>.guide-menu>summary,
html[data-design="sport"] .site-header>#nav>.account-menu>summary { color: #F4F4F4; }
html[data-design="sport"] .site-header>#nav>:is(.guide-menu,.account-menu)>summary::after { color: #D1D1D1; }
html[data-design="sport"] .site-header>#nav>.header-points { border-color: #4A4A4A; }
html[data-design="sport"] .site-header>#nav>.header-points b { color: #FFFFFF; }
html[data-design="sport"] .site-header .role-notifications .sra-toggle { background: #101010;border-color: #5B5B5B;color: #FFFFFF; }
html[data-design="sport"] main { padding-top: 40px;padding-bottom: 80px; }
html[data-design="sport"] :is(h1,.hero h1,.coach-invite h1,.coach-guide-finish .coach-invite h1,.showcase-heading h1) { font-size: clamp(38px,5.5vw,68px);line-height: 1.06;letter-spacing: -.055em; }
html[data-design="sport"] :is(h2,.student-experience .experience-instruction-heading h2,.coach-experience-heading h2,.analysis-hexagon h3) { font-size: clamp(25px,3.2vw,36px);line-height: 1.25;letter-spacing: -.04em; }
html[data-design="sport"] :is(h3,.coach-guide .card h3,.coach-benefit-grid h3,.coach-eligibility-list h3) { font-size: 21px;line-height: 1.4;letter-spacing: -.025em; }
html[data-design="sport"] .eyebrow { font-size: 11px;letter-spacing: .11em;text-transform: uppercase; }
html[data-design="sport"] :is(.hero,.coach-guide-finish .coach-invite) { padding-block: 20px 40px; }
html[data-design="sport"] :is(.grid,.coach-benefit-grid) { gap: 20px; }
html[data-design="sport"] :is(.section-gap,.coach-guide>section.section-gap) { margin-top: 40px; }
html[data-design="sport"] :is(.card,.grid>.card,#admin-overview) { border-color: #B8B8B8;border-top: 3px solid var(--text); }
html[data-design="sport"] .first-quick-offer { border-top: 3px solid var(--design-accent); }
html[data-design="sport"] .admin-overview-card strong { letter-spacing: -.045em; }
html[data-design="sport"] :is(.student-process li,.coach-eligibility-list>div) { border-top-width: 2px; }
html[data-design="sport"] .coach-profile-story { gap: 36px; }
html[data-design="sport"] .coach-academy-preview img { border-radius: 8px; }
html[data-design="sport"] :is(.premium-profile .profile-style h2,.profile-style h2) { font-size: clamp(44px,7vw,88px);line-height: 1.02; }
html[data-design="sport"] .first-quick-offer h2 { font-size: clamp(30px,4.5vw,46px); }

/* C — White Gallery: spacious white surfaces, restrained lines and red detail. */
html[data-design="calm"] body { line-height: 1.8; }
html[data-design="calm"] .site-header { width: calc(100% - 40px);margin: 20px auto 0;padding: 24px 12px;background: var(--surface);border: 0;border-bottom: 1px solid var(--line);border-radius: 0; }
html[data-design="calm"] .brand { font-family: var(--font-ui);font-size: 25px;font-weight: 600;letter-spacing: .055em; }
html[data-design="calm"] main { padding-top: 60px;padding-bottom: 110px; }
html[data-design="calm"] :is(h1,.hero h1,.coach-invite h1,.coach-guide-finish .coach-invite h1,.showcase-heading h1) { font-size: clamp(42px,5.6vw,64px);line-height: 1.18;letter-spacing: -.045em; }
html[data-design="calm"] :is(h2,.coach-experience-heading h2,.analysis-hexagon h3) { line-height: 1.3;letter-spacing: -.025em; }
html[data-design="calm"] :is(.hero,.coach-guide-finish .coach-invite) { padding-block: 28px 60px; }
html[data-design="calm"] :is(.section-gap,.coach-guide>section.section-gap) { margin-top: 64px; }
html[data-design="calm"] :is(.grid,.coach-benefit-grid) { gap: 30px; }
html[data-design="calm"] :is(.panel,.card,.grid>.card,.coach-benefit-grid article,.coach-guide-finish .coach-experience,.student-experience) { box-shadow: none; }
html[data-design="calm"] :is(.button.primary,button.primary) { padding-inline: 24px; }
html[data-design="calm"] .environment { padding-block: 14px;border-bottom: 0; }
html[data-design="calm"] .coach-profile-story { gap: 64px; }
html[data-design="calm"] .coach-academy-preview img { border-radius: 12px; }
html[data-design="calm"] .student-process li { border-top: 0;padding: 20px;background: var(--design-tint);border-radius: var(--design-radius); }
html[data-design="calm"] .student-process { gap: 14px; }
html[data-design="calm"] .student-process li::before { font-family: var(--font-editorial);font-size: 26px;line-height: 1; }
html[data-design="calm"] .role-summary { margin-block: 24px 38px; }

/* Existing cumulative A GAME records use the same visual system. */
html:is([data-design="sport"], [data-design="calm"]) .agame-sample {
  background: var(--design-tint);
  border-left-color: var(--design-accent);
  border-radius: 0 var(--design-radius) var(--design-radius) 0;
}
html:is([data-design="sport"], [data-design="calm"]) .agame-bar-track { background: var(--line);border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .agame-bar-track>span { background: var(--design-accent);border-radius: var(--design-radius); }
html:is([data-design="sport"], [data-design="calm"]) .agame-position-line b { color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .agame-position summary:focus-visible { outline-color: var(--design-accent); }
html:is([data-design="sport"], [data-design="calm"]) .agame-roll-list { gap: 20px; }
html:is([data-design="sport"], [data-design="calm"]) .agame-roll {
  padding: var(--design-panel-space);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  background: var(--surface);
}
html:is([data-design="sport"], [data-design="calm"]) .agame-metrics .card { padding: var(--design-panel-space); }
html:is([data-design="sport"], [data-design="calm"]) .agame-reflection {
  padding: var(--design-panel-space);
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
  background: var(--design-tint);
}
html[data-design="sport"] .agame-position-panel { border-top: 3px solid var(--design-accent); }
html[data-design="sport"] .agame-bar-track { height: 8px; }
html[data-design="calm"] .agame-bar-track { height: 11px; }
html[data-design="calm"] .agame-position summary { padding-block: 23px; }

@media (max-width: 760px) {
  html:is([data-design="sport"], [data-design="calm"]) { --design-panel-space: 20px; }
  html:is([data-design="sport"], [data-design="calm"]) :is(.student-experience,.coach-guide-finish .coach-experience) { padding: 14px; }
  html:is([data-design="sport"], [data-design="calm"]) .student-experience .experience-instructions { padding: 16px 12px; }
  html:is([data-design="sport"], [data-design="calm"]) .student-experience .experience-instruction-heading { align-items: flex-start; }
  html:is([data-design="sport"], [data-design="calm"]) :is(.student-experience .experience-instruction-heading h2,.coach-experience-heading h2) { font-size: 25px; }
  html:is([data-design="sport"], [data-design="calm"]) :is(.page-contents,.coach-section-nav) { padding: 6px 12px;gap: 4px 14px; }
  html:is([data-design="sport"], [data-design="calm"]) :is(.student-queue-summary a,.admin-overview-card) { border-radius: 10px; }
  html:is([data-design="sport"], [data-design="calm"]) .analysis-hexagon { padding: 16px; }
  html:is([data-design="sport"], [data-design="calm"]) .roll-summary { padding: 18px 14px; }
  html:is([data-design="sport"], [data-design="calm"]) .role-nav a[aria-current] { border-radius: 10px; }
  html[data-design="sport"] .site-header { padding: 20px; }
  html[data-design="sport"] .brand { font-size: 25px; }
  html[data-design="sport"] main { padding: 30px 20px 85px; }
  html[data-design="sport"] :is(h1,.hero h1,.coach-invite h1,.coach-guide-finish .coach-invite h1,.showcase-heading h1) { font-size: 40px;line-height: 1.12; }
  html[data-design="sport"] :is(.section-gap,.coach-guide>section.section-gap) { margin-top: 34px; }
  html[data-design="sport"] :is(.grid,.coach-benefit-grid) { gap: 16px; }
  html[data-design="sport"] :is(.hero,.coach-guide-finish .coach-invite) { padding-block: 12px 32px; }
  html[data-design="calm"] .site-header { width: calc(100% - 40px);margin-top: 12px;padding: 20px 0;border-radius: 0; }
  html[data-design="calm"] .brand { font-size: 24px; }
  html[data-design="calm"] main { padding: 38px 20px 100px; }
  html[data-design="calm"] :is(h1,.hero h1,.coach-invite h1,.coach-guide-finish .coach-invite h1,.showcase-heading h1) { font-size: 39px;line-height: 1.22; }
  html[data-design="calm"] :is(.section-gap,.coach-guide>section.section-gap) { margin-top: 44px; }
  html[data-design="calm"] :is(.grid,.coach-benefit-grid) { gap: 22px; }
  html[data-design="calm"] :is(.hero,.coach-guide-finish .coach-invite) { padding-block: 16px 40px; }
  html[data-design="calm"] .coach-profile-story { gap: 30px; }
  html[data-design="calm"] .student-process li { padding: 18px; }
}
@media (max-width: 700px) {
  html:is([data-design="sport"], [data-design="calm"]) .agame-metrics { gap: 12px; }
  html:is([data-design="sport"], [data-design="calm"]) .agame-metrics .card { padding: 16px; }
  html:is([data-design="sport"], [data-design="calm"]) .agame-metrics .metric { font-size: 23px;white-space: normal;overflow-wrap: anywhere; }
  html:is([data-design="sport"], [data-design="calm"]) .agame-roll { padding: 18px; }
  html:is([data-design="sport"], [data-design="calm"]) .agame-roll-list { gap: 16px; }
  html:is([data-design="sport"], [data-design="calm"]) .agame-reflection { padding: 20px; }
}

/* Decorative belt directly below the top header, never in the page footer. */
.header-belt {
  --belt-color: #151515;
  --belt-panel: #B81827;
  --belt-stripe: #F7F6F2;
  --belt-edge: #F7F6F2;
  --belt-stripes: 6;
  width: 100%;
  max-width: 1160px;
  height: 28px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding-right: clamp(24px, 8vw, 144px);
  background-color: var(--belt-color);
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, #FFFFFF09 3px 4px);
  border-block: 1px solid #00000030;
  box-shadow: inset 0 3px #00000020, inset 0 -3px #00000020;
}
.header-belt-panel {
  position: relative;
  width: clamp(104px, 14vw, 176px);
  height: 100%;
  background-color: var(--belt-panel);
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, #0000000D 3px 4px);
  border-inline: 4px solid var(--belt-edge);
}
.header-belt-panel::after {
  content: "";
  position: absolute;
  inset: 0 8px;
  background: linear-gradient(90deg, var(--belt-stripe) 0 4px, transparent 4px);
  background-size: calc(100% / var(--belt-stripes)) 100%;
  background-repeat: repeat-x;
}
html[data-design="sport"] .header-belt {
  --belt-color: #B81827;
  --belt-panel: #F7F6F2;
  --belt-stripe: #B81827;
  --belt-edge: #151515;
  --belt-stripes: 9;
}
html[data-design="sport"] .site-header { border-bottom: 0; }
html[data-design="calm"] .header-belt { width: calc(100% - 40px); }
@media (max-width: 600px) {
  .header-belt { height: 24px; }
}