:root {
  --color-bg: #101114;
  --color-surface: #191b20;
  --color-raised: #22252c;
  --color-border: #363a44;
  --color-border-strong: #505662;
  --color-text: #f6f4ef;
  --color-muted: #b1b4be;
  --color-accent: #ff6b00;
  --color-accent-text: #ffad73;
  --color-focus: #ffac70;
  --status-neutral-bg: #22252c;
  --status-neutral-text: #d5d8e0;
  --status-neutral-border: #505662;
  --status-info-bg: #172b3d;
  --status-info-text: #b1daff;
  --status-info-border: #416c90;
  --status-success-bg: #172d23;
  --status-success-text: #a1e2ba;
  --status-success-border: #416b52;
  --status-warning-bg: #342914;
  --status-warning-text: #ffdb91;
  --status-warning-border: #806635;
  --status-error-bg: #351f23;
  --status-error-text: #ffb4b4;
  --status-error-border: #89535d;
  --font-body: Arial,Helvetica,sans-serif;
  --font-heading: 'Arial Black',Arial,Helvetica,sans-serif;
  --font-display: Impact,'Arial Black',Arial,sans-serif;
  --font-xs: .75rem;
  --font-sm: .875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.5rem;
  --font-2xl: 1.875rem;
  --font-3xl: 2.25rem;
  --font-4xl: 3rem;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-none: none;
  --shadow-1: 0 2px 8px #0002;
  --shadow-2: 0 8px 24px #0003;
  --content-wide: 1200px;
  --content-detail: 960px;
  --content-reading: 72ch;
  --orange: var(--color-accent);
  --ink: var(--color-bg);
  --paper: var(--color-text);
  --muted: var(--color-muted);
  --ui-surface: var(--color-surface);
  --ui-raised: var(--color-raised);
  --ui-border: var(--color-border);
  --ui-text: var(--color-text);
  --ui-radius: var(--radius-lg);
  --ui-max: var(--content-wide);
  --ui-gap: var(--space-3)
}
/* BEC shared UI: one visual language for Worker pages and retained archives. */
html {
  scroll-padding-top: 100px
}
body {
  background: var(--ink);
  color: var(--ui-text);
  font-family: var(--font-body);
  font-size: var(--font-md);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%
}
button,input,textarea,select {
  font: inherit
}
a,button,input,summary {
  touch-action: manipulation
}
a {
  transition: color .15s,border-color .15s,background-color .15s
}
img {
  max-width: 100%;
  height: auto
}
h1,h2,h3 {
  text-wrap: balance
}
p {
  overflow-wrap: anywhere
}
button,a.button {
  min-height: 48px
}
button {
  border-radius: var(--radius-md)
}
button:disabled {
  cursor: not-allowed;
  opacity: .55
}
button:hover:not(:disabled) {
  border-color: var(--orange)
}
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px
}
::selection {
  background: #ff7a1a;
  color: #111
}
.shell {
  max-width: var(--ui-max);
  padding: 0 var(--space-4) 72px
}
.wrap {
  width: min(var(--ui-max),calc(100% - 64px))
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--orange);
  border: 1px solid var(--orange);
  color: var(--color-bg);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.4;
  padding: 13px 22px;
  text-decoration: none
}
.button:hover {
  background: #ff9549;
  border-color: #ff9549
}
.button.secondary {
  background: #ffffff06;
  border-color: var(--ui-border);
  color: var(--ui-text)
}
.button.secondary:hover {
  background: var(--ui-raised)
}
.eyebrow {
  font-size: var(--font-xs);
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--orange)
}
.textbutton,.text-link {
  color: #ff9e58;
  line-height: 1.5
}
.textbutton {
  display: inline-flex;
  align-items: center;
  min-height: 44px
}
.text-link {
  text-decoration-thickness: 1px;
  text-underline-offset: 5px
}
.small {
  font-size: var(--font-sm)
}
.muted,.body-muted {
  color: var(--muted)
}
/* Compact header and grouped disclosure navigation. No JS required to open menu. */
.bec-header {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  border-bottom: 1px solid var(--ui-border);
  background: var(--color-bg);
  backdrop-filter: none
}
.top.bec-header {
  padding: 14px max(var(--space-4),calc((100vw - var(--ui-max))/2));
  gap: var(--space-3);
  flex-wrap: nowrap
}
.bec-header .nav {
  position: relative;
  min-height: 80px;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding: 12px 0
}
.bec-header .brand {
  flex-shrink: 0;
  gap: 12px
}
.bec-header .brand img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: contain
}
.bec-header .brand span {
  font-size: var(--font-xs);
  line-height: 1.5;
  letter-spacing: 1px;
  font-weight: 900
}
.bec-header .primary-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: nowrap;
  width: auto;
  overflow: visible;
  font-size: var(--font-sm);
  white-space: nowrap
}
.primary-nav a {
  padding: 10px 13px;
  min-height: 44px;
  border-radius: var(--radius-md);
  color: #c1c4ce
}
.primary-nav a:hover,.primary-nav a[aria-current="page"] {
  background: var(--ui-raised);
  color: #fff
}
.primary-nav a[aria-current="page"] {
  box-shadow: none
}
.bec-header .site-menu {
  position: static;
  flex: none;
  border: 0;
  padding: 0;
  margin: 0
}
.site-menu summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--ui-text)
}
.site-menu summary::-webkit-details-marker {
  display: none
}
.site-menu summary:hover,.site-menu[open] summary {
  border-color: #ff7a1a;
  background: #ff7a1a10
}
.menu-symbol {
  font-size: var(--font-lg);
  font-weight: 400
}
.site-menu>.menu-panel {
  position: absolute;
  inset: calc(100% + 10px) 24px auto auto;
  width: min(760px,calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 180px);
  overflow: auto;
  display: block;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid #444955;
  border-radius: var(--radius-lg);
  box-shadow: none;
  overscroll-behavior: contain
}
.menu-heading {
  margin: 0 0 20px;
  font-size: var(--font-lg);
  font-weight: 800;
  color: #fff
}
.menu-groups {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-3)
}
.menu-group {
  padding: 0;
  margin: 0;
  min-width: 0
}
.menu-group .menu-label {
  font-weight: 800;
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: #ff9e58;
  text-transform: uppercase;
  margin: 0 0 10px
}
.menu-group a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-sm);
  padding: var(--space-1) 10px;
  margin-left: -10px;
  border-radius: var(--radius-md);
  line-height: 1.45;
  color: #d5d8e0
}
.menu-group a:hover,.menu-group a[aria-current="page"] {
  background: #2a2e37;
  color: #fff
}
.mobile-dock {
  display: none
}
.skip,.skip-link {
  z-index: 80;
  border-radius: var(--radius-md)
}
/* Page hierarchy and editorial home. */
.hero {
  padding: 52px 0 36px;
  gap: var(--space-4);
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 28px
}
.hero h1,.page-intro h1 {
  font-size: clamp(2.125rem,4.6vw,3.75rem);
  letter-spacing: -.045em;
  line-height: 1.1;
  margin: var(--space-2) 0 20px
}
.hero p,.page-intro p {
  font-size: var(--font-md);
  line-height: 1.8;
  color: var(--muted);
  max-width: 650px
}
.hero-emblem {
  min-width: 150px
}
.hero-emblem img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid #42454e;
  box-shadow: none
}
.hero-emblem span {
  font-size: var(--font-xs);
  letter-spacing: 2px
}
.experience-admin .hero {
  padding: var(--space-4) 0 var(--space-3)
}
.experience-admin .hero h1 {
  font-size: var(--font-3xl)
}
.experience-admin .hero-emblem {
  display: none
}
.sessionbar {
  max-width: var(--ui-max);
  margin: 12px auto 0;
  padding: 0 var(--space-4);
  font-size: var(--font-xs)
}
.sessionbar .button {
  min-height: 40px;
  padding: var(--space-1) 14px;
  background: var(--ui-raised);
  border-color: var(--ui-border);
  color: #ddd
}
.section-heading h2 {
  font-size: var(--font-xl);
  margin: 0
}
.section-heading {
  margin: var(--space-3) 0 20px
}
.section-title {
  margin-bottom: 26px
}
.section-title h2 {
  font-size: clamp(1.6875rem,3.4vw,2.5rem);
  line-height: 1.2
}
.page-intro {
  padding: 52px 0 30px
}
.page-intro+div {
  padding-bottom: 36px
}
.detailpage {
  max-width: 960px;
  padding-top: var(--space-4)
}
.detailpage h1 {
  font-size: clamp(2rem,4.4vw,3.25rem);
  line-height: 1.14
}
.articlebody {
  max-width: 72ch;
  font-size: var(--font-lg);
  line-height: 1.9
}
.article-summary {
  max-width: 65ch;
  font-size: var(--font-lg);
  line-height: 1.8
}
.detailimage {
  border-radius: var(--radius-lg);
  background: var(--color-surface)
}
.sharebox {
  padding: var(--space-3) 0
}
.sharebox .button {
  margin-right: 16px
}
.detail-tabs,.quicklinks,.subnav {
  gap: var(--space-1)
}
.detail-tabs a,.quicklinks a,.subnav a {
  border: 1px solid var(--ui-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: #e1e3e8;
  font-size: var(--font-sm);
  line-height: 1.4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 11px var(--space-2)
}
.detail-tabs a:hover,.quicklinks a:hover,.detail-tabs a[aria-current="page"] {
  border-color: var(--orange);
  background: #ff7a1a12
}
.policy {
  padding-bottom: var(--space-3)
}
.policy p {
  font-size: var(--font-md);
  line-height: 1.9;
  max-width: 75ch
}
.bec-home .hub-hero {
  position: relative;
  padding: var(--space-6) 0 52px
}
.bec-home .hero-columns {
  grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr);
  gap: var(--space-6)
}
.bec-home .hub-hero h1 {
  font-size: clamp(2.75rem,5.8vw,4.875rem);
  margin: var(--space-3) 0
}
.bec-home .hub-hero .hero-tagline {
  font-size: var(--font-lg);
  color: var(--color-text);
  font-weight: 700;
  margin: 0 0 14px
}
.bec-home .hub-hero .body-muted {
  font-size: var(--font-md);
  max-width: 520px;
  line-height: 1.85
}
.bec-home .hero-brand-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #47403a;
  padding: var(--space-3)
}
.brand-panel-kicker {
  display: block;
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 20px
}
.bec-home .hero-brand-panel img {
  max-width: 230px;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1
}
.bec-home .hero-brand-panel>div {
  position: relative;
  border-top: 1px solid #ffffff1a;
  padding-top: 18px;
  margin-top: var(--space-3)
}
.bec-home .hero-brand-panel strong {
  font-size: var(--font-lg)
}
.bec-home .hero-brand-panel p {
  font-size: var(--font-sm);
  margin: 6px 0 0
}
.brand-panel-number {
  position: absolute;
  font-weight: 900;
  line-height: 1;
  pointer-events: none
}
.home-paths {
  padding: 26px 0 44px
}
.path-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2)
}
.path-intro h2 {
  font-size: var(--font-xl);
  margin: 0
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-2)
}
.path-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--ui-border);
  transition: border-color .15s,background .15s
}
.path-card:hover {
  border-color: #ff7a1a
}
.path-number {
  font-weight: 800;
  color: #ff9e58
}
.path-card h3 {
  font-size: var(--font-lg);
  line-height: 1.35;
  letter-spacing: -.5px;
  margin: 14px 0 10px
}
.path-card h3 span {
  float: right;
  color: var(--orange)
}
.path-card p {
  font-size: var(--font-sm);
  line-height: 1.75;
  color: var(--muted);
  margin: 0
}
.home-light {
  color-scheme: light;
  background: var(--color-text)
}
.bec-home .home-activity {
  padding: 44px 0
}
.bec-home .home-notice {
  border-radius: var(--radius-lg);
  padding: 22px var(--space-3)
}
.bec-home .home-update,.bec-home .home-community {
  padding: var(--space-5) 0
}
.bec-home .home-copy {
  font-size: var(--font-md);
  max-width: 680px
}
.bec-home .home-light .text-link {
  color: #9a3d00
}
.bec-home .home-statistics {
  border-color: #d4cfc6
}
.home-light .eyebrow {
  color: #9a3d00
}
.bec-home .home-section-links {
  gap: 20px
}
.bec-home .home-updates-note {
  padding: 20px 0;
  color: var(--color-muted)
}
.bec-home .home-archive {
  border-color: #d4cfc6
}
.bec-home .home-faq {
  padding-bottom: 36px
}
.contact {
  padding: var(--space-5) 0
}
.contact h2 {
  font-size: clamp(1.875rem,4vw,3rem);
  line-height: 1.12
}
.contact p {
  font-size: var(--font-md);
  line-height: 1.7
}
/* Cards, content states and forms. */
.cards,.bec-live-grid {
  gap: 20px
}
.card,.bec-live-card,.hub-card,.info-panel,.team-panel,.panel,.match-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: none
}
.card,.bec-live-card {
  overflow: hidden
}
.cardbody,.card-body,.bec-live-card>div {
  padding: var(--space-3)
}
.cardbody h3,.card-body h3,.bec-live-card h3 {
  font-size: var(--font-xl);
  line-height: 1.3;
  letter-spacing: -.5px;
  margin: 14px 0 12px
}
.cardbody p,.bec-live-card p {
  font-size: var(--font-sm);
  line-height: 1.75;
  color: var(--muted)
}
.card-title-link:hover {
  color: #ff9e58
}
.cardbody .button {
  margin: var(--space-1) 12px var(--space-1) 0
}
.cardbody>button:not(.button) {
  margin-top: var(--space-1)
}
.cover {
  height: 200px
}
.graphic {
  position: relative;
  padding: var(--space-3)
}
.graphic strong {
  font-size: var(--font-3xl)
}
.graphic span {
  font-size: var(--font-xs)
}
.panel {
  padding: 28px
}
.panel>h2:first-child {
  margin-top: 0
}
.panel h2 {
  font-size: var(--font-xl)
}
.panel p {
  line-height: 1.8
}
.columns {
  align-items: start
}
.empty,.empty-state {
  border: 1px dashed #4b505d;
  border-radius: var(--radius-lg);
  padding: 40px var(--space-3);
  margin: var(--space-3) 0
}
.empty h1 {
  font-size: clamp(1.875rem,4vw,2.75rem);
  letter-spacing: -1px
}
.empty h3 {
  font-size: var(--font-xl);
  margin: 14px 0
}
.empty p {
  max-width: 540px;
  margin: 12px auto 22px;
  color: var(--muted)
}
.notice {
  border: 1px solid #66432a;
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-md);
  background: #ff7a1a0c;
  line-height: 1.8;
  color: #f1dbc9
}
.notice[role="alert"] {
  border-color: #c47664;
  background: #b3544218;
  color: #ffddd4
}
.recovery-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap
}
.tag {
  background: #ff7a1a0b;
  border-color: #795233;
  color: #ffc193;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: var(--font-xs);
  font-weight: 700
}
.source-label {
  color: var(--color-muted)
}
.image-fallback {
  border-radius: var(--radius-lg)
}
.stats>div {
  background: var(--color-surface);
  border-color: var(--ui-border);
  border-radius: var(--radius-lg)
}
.stats strong {
  color: #ff9e58
}
.toolbar {
  padding: 20px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: 28px
}
.tabs {
  gap: var(--space-1)
}
.tabs a,.tabs button {
  font-size: var(--font-xs);
  min-height: 44px;
  padding: 10px 15px;
  line-height: 1.45;
  background: var(--color-raised);
  border: 1px solid #3b404b;
  border-radius: var(--radius-md);
  color: #d5d8e0
}
.tabs .active,.tabs a.active,.tabs button.active {
  background: var(--orange);
  color: #111;
  border-color: var(--orange)
}
.tools {
  gap: 12px;
  margin-top: 18px
}
.tools input {
  max-width: 420px
}
.tools .button {
  margin-left: auto
}
.tools span {
  color: var(--muted);
  font-size: var(--font-sm)
}
.tools select {
  width: auto;
  max-width: 240px
}
.statusfilter {
  max-width: 240px
}
.loading-state {
  margin: var(--space-3) 0
}
.loading-state p {
  color: var(--muted)
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px
}
.skeleton-grid>div {
  height: 220px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--ui-raised)
}
form {
  gap: 20px
}
label {
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.65;
  gap: var(--space-1)
}
input,textarea,select {
  font-size: var(--font-md);
  line-height: 1.5;
  min-height: 48px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #101216;
  color: var(--color-text);
  padding: 12px 14px
}
input::placeholder,textarea::placeholder {
  color: #969ca8
}
input:hover,textarea:hover,select:hover {
  border-color: #808898
}
input:disabled,textarea:disabled,select:disabled {
  opacity: .65;
  background: #24272e
}
input:focus,textarea:focus,select:focus {
  outline: 2px solid #ff9e58;
  outline-offset: 2px;
  border-color: #ff9e58
}
input[type=file] {
  padding: 10px;
  font-size: var(--font-sm);
  overflow: hidden
}
input::file-selector-button {
  border: 0;
  background: #343944;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-1) 12px;
  margin-right: 12px;
  font: inherit
}
fieldset {
  border-color: var(--ui-border);
  border-radius: var(--radius-md);
  padding: 18px;
  min-width: 0
}
form>fieldset {
  display: grid;
  gap: 18px
}
.match-editor {
  background: #ffffff02;
  border-color: var(--ui-border);
  border-radius: var(--radius-md);
  padding: 18px
}
.checklabel {
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1.8
}
.checklabel input[type=checkbox] {
  accent-color: var(--orange);
  min-height: 0;
  width: 20px;
  height: 20px
}
.modal {
  padding: var(--space-3)
}
.modalbody {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 56px var(--space-4) var(--space-4);
  max-width: 820px
}
.modalbody h2 {
  font-size: var(--font-xl)
}
.modalbody .close {
  background: #292d35;
  border-color: #444a56
}
.verification {
  background: #ff7a1a08;
  border-color: #795233
}
.account-studio summary {
  line-height: 1.6;
  padding: var(--space-1) 0
}
.profile-facts {
  font-size: var(--font-sm)
}
.profile-facts dt {
  color: var(--color-muted)
}
/* Competition tables remain scrollable inside a labelled keyboard region. */
.tablewrap,.table-scroll {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  background: var(--color-surface)
}
.tablewrap table,table {
  background: var(--color-surface);
  font-size: var(--font-sm)
}
caption {
  font-size: var(--font-md);
  padding: var(--space-2) 18px;
  background: var(--color-raised);
  font-weight: 700;
  color: #e3e5eb
}
th,td {
  padding: 14px 18px;
  border-color: var(--ui-border)
}
th {
  background: var(--color-raised);
  color: #ffaf75;
  font-size: var(--font-xs)
}
tbody tr:nth-child(even) {
  background: #ffffff03
}
.match-card {
  padding: 22px
}
.match-card h3 {
  font-size: var(--font-lg)
}
.match-teams {
  padding: 12px 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  align-items: center
}
.match-teams strong {
  font-size: var(--font-md)
}
.bracket-round>h3 {
  font-size: var(--font-lg)
}
.winner {
  color: #ffc193!important
}
.detail-tabs {
  margin: 20px 0
}
.origin,.agenda-box {
  border-color: var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface)
}
.origin img {
  border-radius: var(--radius-lg)
}
.milestone-grid li {
  border-color: var(--ui-border);
  border-radius: var(--radius-lg)
}
.hub-card h2 {
  font-size: var(--font-xl)
}
footer {
  border-top: 1px solid var(--ui-border);
  background: #13151a;
  padding: 40px max(var(--space-4),calc((100vw - var(--ui-max))/2));
  color: var(--muted);
  font-size: var(--font-sm)
}
.footer-map,.bec-page-map {
  gap: var(--space-3);
  margin: 28px 0
}
.footer-map h2,.bec-page-map h2 {
  font-size: var(--font-xs);
  color: #ff9e58;
  letter-spacing: 1px;
  text-transform: uppercase
}
.footer-map a,.bec-page-map a {
  font-size: var(--font-xs);
  line-height: 1.6;
  color: #b9beca;
  min-height: 32px
}
.footer-map a:hover,.bec-page-map a:hover {
  color: #fff
}
.footer-inner strong {
  font-size: var(--font-sm)
}
.footer-pages {
  display: none
}
.footer-logo {
  border-radius: var(--radius-md)
}
.footer-inner {
  padding-top: var(--space-3);
  border-top: 1px solid var(--ui-border)
}
footer .wrap {
  width: 100%
}
@media(min-width:761px) {
  .menu-panel {
  scrollbar-gutter: stable
}
}
@media(max-width:1000px) {
  .top.bec-header {
  padding: 12px var(--space-3)
}
  .bec-header .nav {
  min-height: 72px
}
  .bec-header .primary-nav {
  gap: 0
}
  .primary-nav a {
  padding: 10px;
  font-size: var(--font-xs)
}
  .bec-home .hero-columns {
  gap: var(--space-4)
}
  .bec-home .hub-hero h1 {
  font-size: clamp(2.5rem,6vw,4.0625rem)
}
  .path-card {
  padding: 18px
}
  .path-card h3 {
  font-size: var(--font-lg)
}
  .cards,.bec-live-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
  .bec-page-map,.footer-map {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media(max-width:760px) {
  html {
  scroll-padding-top: 84px
}
  .wrap {
  width: calc(100% - 40px)
}
  .shell {
  padding: 0 20px 40px
}
  .top.bec-header {
  padding: 12px 20px;
  gap: 12px
}
  .bec-header .nav {
  min-height: 68px;
  padding: 10px 0;
  gap: 12px
}
  .bec-header .brand img {
  width: 42px;
  height: 42px
}
  .bec-header .brand span {
  font-size: var(--font-xs);
  letter-spacing: .8px
}
  .bec-header .primary-nav {
  display: none
}
  .bec-header .site-menu {
  margin-left: auto
}
  .site-menu>.menu-panel {
  position: fixed;
  inset: 78px 12px auto;
  width: auto;
  max-height: calc(100dvh - 180px);
  padding: 20px;
  border-radius: var(--radius-lg)
}
  .menu-groups {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px
}
  .menu-heading {
  font-size: var(--font-lg)
}
  .menu-group a {
  font-size: var(--font-sm);
  padding: 10px;
  min-height: 46px
}
  .site-menu summary {
  min-height: 44px
}
  .mobile-dock {
  position: fixed;
  z-index: 45;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 4px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom,0px));
  background: var(--color-bg);
  backdrop-filter: none;
  border-top: 1px solid #424751;
  box-shadow: none
}
  .mobile-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-height: 52px;
  padding: 6px;
  border-radius: var(--radius-md);
  color: #b5bbc8;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.2
}
  .mobile-dock svg {
  width: 21px;
  height: 21px;
  flex: none
}
  .mobile-dock a[aria-current="page"] {
  color: var(--color-focus);
  background: #ff7a1a10
}
  .mobile-dock a:hover {
  color: #fff
}
  .mobile-dock a:focus-visible {
  outline-offset: -3px
}
  body {
  padding-bottom: calc(76px + env(safe-area-inset-bottom,0px))
}
  body:has(.modal[open]) .mobile-dock {
  display: none
}
  body:has(input:focus) .mobile-dock,body:has(textarea:focus) .mobile-dock,body:has(select:focus) .mobile-dock {
  display: none
}
  .hero {
  padding: var(--space-4) 0 var(--space-3);
  margin-bottom: var(--space-3)
}
  .hero h1 {
  font-size: clamp(2rem,8vw,2.75rem);
  letter-spacing: -1.4px;
  line-height: 1.12
}
  .hero p {
  font-size: var(--font-md)
}
  .hero-emblem {
  display: none
}
  .sessionbar {
  padding: 0 20px;
  gap: 12px;
  justify-content: space-between
}
  .experience-admin .hero h1 {
  font-size: var(--font-2xl)
}
  .experience-admin .hero {
  padding-top: var(--space-3)
}
  .bec-home .hub-hero {
  padding: 36px 0 28px
}
  .bec-home .hero-columns {
  grid-template-columns: minmax(0,1fr);
  gap: 28px
}
  .bec-home .hub-hero h1 {
  margin: 20px 0;
  line-height: 1.04
}
  .bec-home .hub-hero .hero-tagline {
  font-size: var(--font-lg)
}
  .bec-home .hub-hero .body-muted {
  font-size: var(--font-md)
}
  .bec-home .hero-brand-panel {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius-lg);
  max-width: none
}
  .brand-panel-kicker {
  grid-column: 1/-1;
  margin: 0;
  font-size: var(--font-xs)
}
  .bec-home .hero-brand-panel img {
  width: 88px;
  max-width: 100%;
  border-radius: var(--radius-md)
}
  .bec-home .hero-brand-panel>div {
  margin: 0;
  padding: 0;
  border: 0
}
  .bec-home .hero-brand-panel strong {
  font-size: var(--font-lg)
}
  .brand-panel-number {
  font-size: 3.875rem;
  bottom: -18px
}
  .bec-home .hero-brand-panel p {
  font-size: var(--font-xs)
}
  .bec-home .hub-hero .actions {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}
  .bec-home .hub-hero .actions .button {
  font-size: var(--font-xs);
  padding: 12px 10px
}
  .bec-home .hub-hero .actions .home-register {
  grid-column: 1/-1
}
  .home-paths {
  padding: 18px 0 var(--space-4)
}
  .path-intro {
  display: block
}
  .path-intro h2 {
  font-size: var(--font-xl);
  margin-top: var(--space-1)
}
  .path-grid {
  grid-template-columns: minmax(0,1fr);
  gap: 10px
}
  .path-card h3 {
  font-size: var(--font-lg);
  margin: var(--space-1) 0 6px
}
  .path-card p {
  font-size: var(--font-sm)
}
  .bec-home .home-activity,.bec-home .home-update,.bec-home .home-community {
  padding: var(--space-4) 0
}
  .section-title {
  flex-direction: column;
  align-items: start;
  gap: 14px;
  margin-bottom: 22px
}
  .section-title h2 {
  font-size: var(--font-xl);
  margin: 12px 0 0
}
  .bec-home .home-notice {
  padding: 20px;
  font-size: var(--font-sm)
}
  .bec-home .home-section-links {
  gap: var(--space-2);
  font-size: var(--font-sm)
}
  .contact {
  padding: var(--space-4) 0
}
  .contact-grid {
  gap: 22px
}
  .contact h2 {
  font-size: var(--font-3xl)
}
  .contact p {
  font-size: var(--font-sm)
}
  .page-intro {
  padding: var(--space-4) 0 var(--space-3)
}
  .page-intro h1 {
  font-size: var(--font-3xl)
}
  .page-intro p {
  font-size: var(--font-md)
}
  .cards,.bec-live-grid,.columns,.formgrid {
  grid-template-columns: minmax(0,1fr)
}
  .cardbody,.card-body,.panel,.bec-live-card>div {
  padding: 22px
}
  .cardbody h3 {
  font-size: var(--font-xl)
}
  .cardbody p {
  font-size: var(--font-sm)
}
  .card .cover {
  height: 180px
}
  .empty,.empty-state {
  padding: 28px 20px
}
  .empty h3 {
  font-size: var(--font-xl)
}
  .empty p {
  font-size: var(--font-sm)
}
  .toolbar {
  padding: var(--space-2);
  margin-bottom: 22px
}
  .tabs {
  gap: var(--space-1)
}
  .tabs a,.tabs button {
  flex: 0 0 auto;
  white-space: normal;
  font-size: var(--font-xs);
  padding: 10px 12px
}
  .tools {
  flex-direction: row;
  gap: 10px
}
  .tools input {
  width: 100%;
  max-width: none;
  flex: 1 0 100%
}
  .tools select {
  width: 100%;
  max-width: none
}
  .tools .button {
  width: 100%;
  margin-left: 0
}
  .tools span {
  order: 0;
  width: auto;
  font-size: var(--font-xs)
}
  .section-heading h2 {
  font-size: var(--font-xl)
}
  .section-heading .muted {
  font-size: var(--font-xs)
}
  .skeleton-grid {
  grid-template-columns: minmax(0,1fr)
}
  .skeleton-grid>div {
  height: 140px
}
  .skeleton-grid>div:not(:first-child) {
  display: none
}
  .formgrid {
  gap: 18px
}
  .scores-editor {
  padding: 14px
}
  .match-editor {
  padding: 14px
}
  .modal {
  padding: 12px
}
  .modalbody {
  padding: 56px 20px var(--space-3);
  border-radius: var(--radius-lg)
}
  .modalbody h2 {
  font-size: var(--font-xl)
}
  .modal .tools {
  flex-wrap: wrap
}
  .detailpage {
  padding-top: 20px
}
  .detailpage h1 {
  font-size: var(--font-3xl);
  letter-spacing: -1.2px
}
  .articlebody {
  font-size: var(--font-md);
  line-height: 1.85;
  margin-top: var(--space-3)
}
  .article-summary {
  font-size: var(--font-md)
}
  .detail-tabs {
  gap: var(--space-1)
}
  .detail-tabs a {
  font-size: var(--font-xs);
  padding: 10px 12px
}
  .sharebox .button {
  margin-right: 0;
  margin-bottom: 10px
}
  .tablewrap table {
  min-width: 480px
}
  th,td {
  padding: 13px
}
  .table-scroll table {
  min-width: 480px
}
  .bracket-grid {
  display: block;
  overflow: visible
}
  .bracket-round {
  min-width: 0
}
  .match-card {
  padding: 18px
}
  .match-teams strong {
  font-size: var(--font-sm)
}
  .origin {
  grid-template-columns: minmax(0,1fr);
  padding: 22px;
  gap: 22px;
  margin-top: var(--space-3)
}
  .origin img {
  max-width: 140px
}
  .origin p {
  font-size: var(--font-sm)
}
  .info-grid,.milestone-grid {
  grid-template-columns: minmax(0,1fr)
}
  .milestone-grid li,.info-panel {
  padding: 22px
}
  .agenda-box {
  padding: 22px;
  grid-template-columns: 1fr
}
  .profile-facts {
  grid-template-columns: minmax(0,1fr);
  gap: 4px
}
  .profile-facts dd {
  margin-bottom: 14px
}
  .footer-map,.bec-page-map {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-3)
}
  .footer-map a,.bec-page-map a {
  font-size: var(--font-xs);
  min-height: 40px;
  margin-bottom: 4px
}
  footer {
  padding: var(--space-4) 20px
}
  .footer-inner {
  align-items: start;
  font-size: var(--font-xs)
}
  .policy h2 {
  font-size: var(--font-xl)
}
  .policy p {
  font-size: var(--font-md)
}
  .policy a {
  text-underline-offset: 4px
}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation: none!important;
  transition: none!important
}
  html {
  scroll-behavior: auto
}
}
@media(max-width:760px) {
  .tablewrap:has(table)::before,.table-scroll:has(table)::before {
  content: "Geser tabel untuk melihat semua kolom ↔";
  display: block;
  font-size: var(--font-xs);
  color: var(--color-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border)
}
}
/* Stage 2: BEC visual direction — solid surfaces, local identity, restrained accents. */
h1,h2,h3 {
  font-weight: 800
}
h1 {
  font-family: 'Arial Black',Arial,Helvetica,sans-serif
}
h2,h3 {
  font-family: var(--font-body)
}
.bec-home .hub-hero h1 {
  font-family: Impact,'Arial Black',Arial,sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.02;
  max-width: 11ch
}
.bec-home .hub-hero h1 em {
  color: var(--orange)
}
.bec-home .hub-hero {
  background: var(--ink)
}
.bec-home .hero-brand-panel {
  border-top: 3px solid var(--orange);
  background: var(--ui-surface);
  border-radius: var(--radius-lg);
  box-shadow: none
}
.bec-home .hero-brand-panel img {
  border: 1px solid var(--ui-border)
}
.brand-panel-number {
  color: #3c4049;
  font-size: 3rem;
  bottom: 0;
  right: 0;
  letter-spacing: -2px
}
.brand-panel-kicker {
  color: var(--color-accent-text)
}
.bec-home .hero-brand-panel>div {
  padding-right: 90px
}
.path-card {
  border-radius: var(--radius-lg);
  border-top: 2px solid #4b505b;
  padding: var(--space-3)
}
.path-card:hover {
  border-top-color: var(--orange);
  background: var(--ui-raised)
}
.path-number {
  font-family: monospace;
  font-size: var(--font-xs);
  letter-spacing: 1px
}
.path-card h3 {
  font-weight: 800
}
.path-intro {
  margin-bottom: var(--space-3)
}
.bec-home .home-light,.home-light,.events {
  color-scheme: dark;
  background: var(--ink);
  color: var(--ui-text);
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border)
}
.bec-home .home-light .eyebrow,.events .eyebrow {
  color: #ff9e58
}
.bec-home .home-light .text-link,.events .text-link {
  color: #ff9e58
}
.bec-home .home-light .bec-live-card {
  background: var(--ui-surface);
  color: var(--ui-text)
}
.bec-home .home-light .bec-live-card h3 {
  color: var(--ui-text)
}
.bec-home .home-light .bec-live-card small {
  color: var(--color-accent-text)
}
.bec-home .home-light .bec-live-card p {
  color: var(--muted)
}
.bec-home .home-notice {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--orange);
  color: var(--muted)
}
.bec-home .home-archive,.bec-home .home-statistics {
  border-color: var(--ui-border)
}
.bec-home .home-statistics p {
  color: var(--muted)
}
.home-light .empty-state {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: #525865
}
.home-light .empty-state p {
  color: var(--muted)
}
.card-body p,.card-body .facts span,.events .section-note,.archive-note {
  color: var(--muted)
}
.facts {
  border-color: var(--ui-border)
}
.filters .filter {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text)
}
.filters .filter[aria-pressed=true] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink)
}
.contact {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-top: 3px solid var(--orange)
}
.contact p {
  color: var(--muted)
}
.contact .button {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange)
}
.contact .button:hover {
  background: #ff9347
}
.bec-home .contact h2 {
  font-weight: 900
}
.card,.panel,.match-card,.info-panel,.hub-card,.bec-live-card {
  box-shadow: none
}
.graphic {
  background: var(--ui-raised);
  border-top: 3px solid var(--orange)
}
.graphic.team {
  background: var(--ui-raised)
}
.graphic strong {
  font-family: Impact,'Arial Black',Arial,sans-serif;
  letter-spacing: 0;
  line-height: 1.12
}
.graphic span {
  font-family: monospace;
  font-weight: 700;
  color: var(--color-accent-text)
}
.empty,.empty-state {
  background: var(--ui-surface)
}
.modalbody,.hero-emblem img,.site-menu>.menu-panel {
  box-shadow: none
}
.bec-header,.mobile-dock {
  backdrop-filter: none;
  background: var(--color-bg)
}
.mobile-dock {
  box-shadow: none
}
.button {
  box-shadow: none
}
.panel h2 {
  line-height: 1.3
}
.section-heading {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ui-border)
}
@media(max-width:760px) {
  .bec-home .hub-hero h1 {
  font-size: clamp(2.75rem,11.5vw,4.25rem);
  max-width: 11ch
}
  .bec-home .hero-brand-panel>div {
  padding-right: 0
}
  .brand-panel-number {
  display: none
}
  .path-card {
  padding: 20px
}
  .path-intro {
  margin-bottom: 20px
}
  .bec-home .home-light {
  border-top: 1px solid var(--ui-border)
}
  .contact .button {
  width: 100%
}
}
/* Shared component contract: status always includes text and a symbol. */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--font-sm);
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none
}
.ds-button-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent)
}
.ds-button-secondary {
  background: var(--color-raised);
  color: var(--color-text);
  border-color: var(--color-border-strong)
}
.ds-button-destructive {
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border-color: var(--status-error-border)
}
.ds-button:hover:not(:disabled) {
  filter: brightness(1.12)
}
.ds-button:disabled {
  opacity: .6;
  cursor: not-allowed
}
.ds-button[aria-busy=true] {
  cursor: wait
}
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  line-height: 1.5;
  font-weight: 700;
  padding: 5px 10px;
  background: var(--tone-bg);
  color: var(--tone-text);
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-sm)
}
.tone-neutral {
  --tone-bg: var(--status-neutral-bg);
  --tone-text: var(--status-neutral-text);
  --tone-border: var(--status-neutral-border)
}
.tone-info {
  --tone-bg: var(--status-info-bg);
  --tone-text: var(--status-info-text);
  --tone-border: var(--status-info-border)
}
.tone-success {
  --tone-bg: var(--status-success-bg);
  --tone-text: var(--status-success-text);
  --tone-border: var(--status-success-border)
}
.tone-warning {
  --tone-bg: var(--status-warning-bg);
  --tone-text: var(--status-warning-text);
  --tone-border: var(--status-warning-border)
}
.tone-error {
  --tone-bg: var(--status-error-bg);
  --tone-text: var(--status-error-text);
  --tone-border: var(--status-error-border)
}
.ds-feedback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-2);
  margin: var(--space-2) 0;
  border: 1px solid var(--tone-border);
  background: var(--tone-bg);
  color: var(--tone-text);
  border-radius: var(--radius-md);
  line-height: 1.75;
  font-size: var(--font-sm)
}
.ds-feedback strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-sm)
}
.feedback-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-pill);
  font-weight: 800
}
.ds-toast {
  position: static;
  max-width: 100%;
  scroll-margin-top: 100px
}
.ds-feedback .ds-button {
  margin-top: var(--space-1)
}
.ds-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0
}
.ds-field label {
  font-size: var(--font-sm);
  font-weight: 700
}
.field-hint,.field-error {
  margin: 0;
  font-size: var(--font-xs);
  line-height: 1.7
}
.field-hint {
  color: var(--color-muted)
}
.field-error {
  color: var(--status-error-text);
  font-weight: 700
}
[aria-invalid=true] {
  border: 2px solid var(--status-error-border)
}
.ds-content-card[data-kind=event] {
  border-top: 2px solid var(--color-accent)
}
.ds-content-card[data-kind=team],.ds-content-card[data-kind=news],.ds-content-card[data-kind=gallery] {
  border-top: 2px solid var(--color-border-strong)
}
.ds-content-card .ds-badge {
  margin: var(--space-1) 0 0 12px
}
.ds-content-card .cover {
  aspect-ratio: 16/9;
  object-fit: cover
}
.ds-breadcrumbs {
  margin: var(--space-2) 0;
  font-size: var(--font-xs);
  color: var(--color-muted)
}
.ds-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0
}
.ds-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0
}
.ds-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-text)
}
.ds-breadcrumbs [aria-current=page] {
  color: var(--color-text);
  overflow-wrap: anywhere
}
.detail-tabs a[aria-current=page] {
  background: var(--color-raised);
  color: var(--color-accent-text);
  border-bottom: 3px solid var(--color-accent);
  font-weight: 800
}
.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap
}
.ds-pagination>span {
  font-size: var(--font-xs);
  color: var(--color-muted)
}
.ds-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-xs)
}
.tooltip-trigger {
  background: transparent;
  color: var(--color-accent-text);
  border: 0;
  padding: var(--space-1);
  min-height: 44px;
  font-size: var(--font-xs);
  text-decoration: underline;
  text-underline-offset: 4px
}
.ds-tooltip [role=tooltip] {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  width: 240px;
  max-width: calc(100vw - 48px);
  background: var(--color-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  line-height: 1.7
}
.ds-tooltip:not([data-dismissed]):hover [role=tooltip],.ds-tooltip:not([data-dismissed]):focus-within [role=tooltip] {
  display: block
}
.ds-table-compact {
  display: none
}
.ds-table-compact h3 {
  font-size: var(--font-lg)
}
.ds-table-compact dl {
  margin: 12px 0;
  padding: var(--space-2)
}
.ds-table-compact dl>div {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border)
}
.ds-table-compact dl>div:last-child {
  border: 0
}
.ds-table-compact dt {
  color: var(--color-muted);
  font-size: var(--font-sm)
}
.ds-table-compact dd {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 700;
  overflow-wrap: anywhere
}
@media(max-width:760px) {
  .ds-pagination>span {
  flex: 1 0 100%;
  order: -1;
  text-align: center
}
  .ds-pagination .ds-button {
  flex: 1
}
  .ds-responsive-table .ds-table-wide {
  display: none
}
  .ds-table-compact {
  display: block
}
  .ds-content-card .cover {
  height: auto;
  min-height: 160px
}
  .ds-breadcrumbs li:last-child {
  flex-basis: 100%
}
  .ds-tooltip [role=tooltip] {
  right: auto;
  left: 0
}
  .ds-feedback {
  font-size: var(--font-sm)
}
}

/* Navigation hierarchy and clear current location, shared with archive pages. */
.menu-top {display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.menu-top .menu-heading {margin:0}
.menu-close {min-height:44px;padding:8px 12px;white-space:nowrap}
.primary-nav a[aria-current],.mobile-dock a[aria-current] {color:var(--color-accent-text);background:var(--color-raised);border-bottom:2px solid var(--color-accent)}
.menu-group a[aria-current],.detail-tabs a[aria-current],.footer-map a[aria-current] {color:var(--color-accent-text);text-decoration:underline;text-underline-offset:5px}
#profil,#tim-saya {scroll-margin-top:120px}
main>.ds-breadcrumb {margin:var(--space-3) auto;max-width:var(--content-wide);padding:0 var(--space-3)}
.shell>.ds-breadcrumb {padding:0}
@media(max-width:760px){.menu-top{gap:var(--space-1)}.menu-top .menu-heading{font-size:var(--font-md)}main>.ds-breadcrumb{padding:0 var(--space-2)}.shell>.ds-breadcrumb{padding:0}}

/* Home: one hero action, optional published sections, compact invitation/footer. */
.bec-home .hub-hero [data-home-primary] {min-height:48px;font-size:var(--font-sm)}
.home-invitation {padding:var(--space-6) 0;border-top:1px solid var(--color-border);background:var(--color-surface)}
.home-invitation h2 {font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;margin:var(--space-2) 0}
.home-invitation-actions {display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.home-footer-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-4)}
.home-footer-grid strong {display:flex;align-items:center;gap:var(--space-2)}
.home-footer-grid nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1)}
.home-footer-grid nav a {display:flex;align-items:center;min-height:44px;color:var(--color-muted)}
.home-footer-grid nav a:hover {color:var(--color-accent-text);text-decoration:underline}
.home-footer .footer-inner {margin-top:var(--space-4)}
.home-match-teams strong {white-space:nowrap;color:var(--color-text)}
.bec-home .home-archive summary {min-height:44px;cursor:pointer;font-weight:700;margin-bottom:var(--space-2)}
.bec-home .home-community .bec-live-grid {margin-top:var(--space-3)}
@media(max-width:760px){.home-footer-grid{grid-template-columns:1fr}.home-invitation{padding:var(--space-4) 0}.home-invitation-actions{align-items:stretch}.home-invitation-actions .button{text-align:center}.home-match-teams{line-height:1.8}}

/* Tournament scanning and detail hierarchy. Posters preserve the original image. */
.tournament-filters{display:grid;grid-template-columns:2fr 1fr auto;gap:var(--space-2);align-items:end;margin:var(--space-3) 0}
.tournament-poster{aspect-ratio:3/4;background:var(--color-raised);overflow:hidden}
.tournament-poster img,.tournament-poster .image-fallback{width:100%;height:100%;object-fit:contain;aspect-ratio:3/4}
.tournament-poster-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);color:var(--color-muted)}
.tournament-poster-empty strong{font-size:var(--font-3xl);color:var(--color-accent-text)}
.tournament-grid h2{font-size:var(--font-xl);line-height:1.25}
.tournament-intro{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-4);align-items:start;margin:var(--space-4) 0}
.tournament-intro.without-poster{grid-template-columns:minmax(0,1fr);max-width:960px}
.tournament-intro h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;margin:var(--space-2) 0}
.tournament-detail-poster img{width:100%;max-height:640px;object-fit:contain;background:var(--color-surface)}
.tournament-capacity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-3) 0}
.tournament-capacity>div{padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.tournament-capacity dt{color:var(--color-muted);font-size:var(--font-sm)}
.tournament-capacity dd{margin:var(--space-1) 0 0;font-weight:800;font-size:var(--font-lg)}
.tournament-action{padding:var(--space-3);border-left:3px solid var(--color-accent);background:var(--color-surface)}
.tournament-detail section[id]{scroll-margin-top:100px}
@media(max-width:760px){.tournament-filters,.tournament-intro{grid-template-columns:1fr}.tournament-intro{gap:var(--space-3)}.tournament-detail-poster{max-width:320px;width:100%;margin:auto}.tournament-action{padding:var(--space-2)}.tournament-capacity{gap:var(--space-1)}}

/* Competition views: scores, confined bracket scroll and mobile match list. */
.match-card .match-title{font-family:var(--font-heading);font-size:var(--font-lg);line-height:1.4;margin:var(--space-2) 0;overflow-wrap:anywhere}
.match-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1)}
.match-card .match-round{color:var(--color-text);font-weight:700}
.match-card .match-time{line-height:1.6;margin-bottom:var(--space-2)}
.match-card .match-teams{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,auto);gap:var(--space-2);align-items:center}
.match-card .match-teams>div{min-width:0;overflow-wrap:anywhere}
.match-card .match-teams strong{font-size:var(--font-md);line-height:1.5}
.match-card .match-score{font-size:var(--font-2xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;text-align:center;color:var(--color-accent-text)}
.match-card[data-match-status="cancelled"] .match-score,.match-card[data-match-status="scheduled"] .match-score,.match-card[data-match-status="postponed"] .match-score{color:var(--color-muted)}
.match-status-group{margin-top:var(--space-4);scroll-margin-top:100px}
.match-status-group>h3,.match-status-group>h4{font-size:var(--font-xl)}
.match-status-links a{white-space:normal}
.competition-updated{line-height:1.6}
.bracket-layout,.bracket-wide-view,.bracket-mobile-view{min-width:0;max-width:100%}
.bracket-layout .bracket-grid{display:flex;gap:var(--space-3);width:100%;max-width:100%;overflow-x:auto;overflow-y:auto;overscroll-behavior-x:contain;padding:var(--space-1) var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.bracket-layout .bracket-grid .bracket-round{flex:0 0 290px;min-width:0;max-width:290px}
.bracket-layout .bracket-grid .match-card{margin-bottom:var(--space-2)}
.bracket-mobile-view{display:none}
.bracket-mobile-view>.bracket-round{min-width:0;margin-top:var(--space-3)}
.bracket-mobile-view .match-card{margin:0}
.match-card .ds-responsive-table{margin-top:var(--space-2)}
@media(max-width:700px){.bracket-wide-view{display:none}.bracket-mobile-view{display:block}.match-card .match-score{font-size:var(--font-xl)}.match-card{padding:var(--space-2)}.match-status-group{margin-top:var(--space-3)}}

/* Account workspace: private data and actionable summaries */
.account-registration-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-4,16px)}
.account-registration-card,.account-team-card{padding:20px;border:1px solid var(--border,#343434);border-radius:12px;min-width:0;overflow-wrap:anywhere}.account-team-card{margin-bottom:16px}.account-action-list{padding:0;list-style:none;display:grid;gap:16px}.account-action-list li+li{border-top:1px solid var(--border,#343434);padding-top:16px}.account-action-list h4{margin-bottom:8px}.account-studio fieldset{min-width:0}.account-identity summary{cursor:pointer;font-weight:700}.account-registration-card .button{white-space:normal}
@media(max-width:600px){.account-registration-card,.account-team-card{padding:16px}.account-studio form button{margin-top:12px}.account-registration-grid{grid-template-columns:1fr}}

/* Admin workspace: scoped navigation and task-focused layouts */
.admin-tasks{margin-bottom:24px}.admin-task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}.admin-task-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--color-raised);padding:16px;white-space:normal;border:1px solid var(--ui-border)}.admin-task-grid strong{font-size:var(--font-xl);color:var(--orange)}.admin-task-grid span{font-size:var(--font-sm);margin-top:6px}.admin-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}.admin-work-area,.admin-navigation{min-width:0}.admin-sidebar{position:sticky;top:24px;background:var(--color-surface);border:1px solid var(--ui-border);border-radius:var(--radius-lg);padding:16px}.admin-sidebar section+section{border-top:1px solid var(--ui-border);margin-top:16px;padding-top:16px}.admin-sidebar h2{font-size:var(--font-xs);color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:1px}.admin-sidebar button{display:block;width:100%;white-space:normal;text-align:left;background:transparent;border-color:transparent;margin:3px 0;padding:10px 12px}.admin-sidebar button.active{background:var(--orange);color:#111}.admin-mobile-navigation{display:none}.experience-admin .toolbar{padding:16px}.experience-admin .toolbar .section-heading{margin-bottom:0}.experience-admin .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}.experience-admin .member{min-width:0;overflow-wrap:anywhere}.editor-preview,.competition-impact{border:1px solid var(--ui-border);border-radius:var(--radius-md);padding:16px;margin:16px 0}.editor-preview summary{cursor:pointer;font-weight:700}.editor-preview article{overflow-wrap:anywhere}.editor-preview .cover{max-height:260px;object-fit:contain}.editor-save-state{border-left:3px solid var(--orange);padding-left:12px;font-size:var(--font-sm)}.competition-impact article+article{border-top:1px solid var(--ui-border);padding-top:12px}.competition-impact h3{font-size:var(--font-md)}.modalbody fieldset{min-width:0}.experience-admin .toolbar .tools{flex-wrap:wrap}
@media(max-width:900px){.admin-workspace{grid-template-columns:minmax(0,1fr);gap:16px}.admin-sidebar{display:none}.admin-mobile-navigation{display:block;padding:16px;border:1px solid var(--ui-border);border-radius:var(--radius-lg);background:var(--color-surface)}.admin-mobile-navigation select{width:100%}.admin-mobile-navigation nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.admin-mobile-navigation button{flex:1;white-space:normal;min-height:44px}.experience-admin .member{display:block}.experience-admin .member>div+div{margin-top:16px}.experience-admin .tools input,.experience-admin .tools select{width:100%;max-width:none}.experience-admin .tools .button{margin-left:0}.admin-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-task-grid button{padding:12px}.experience-admin .hero{padding-bottom:16px}}
@media(max-width:420px){.admin-task-grid{grid-template-columns:minmax(0,1fr)}.admin-task-grid button{flex-direction:row;align-items:center;gap:14px}.admin-task-grid span{margin-top:0}.experience-admin .cards{grid-template-columns:minmax(0,1fr)}}

/* Editorial reading, stable galleries and public team identities */
.reading-article{max-width:760px;margin-inline:auto}.reading-article h1{max-width:24ch}.reading-body{max-width:66ch;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.85;margin-top:28px;overflow-wrap:anywhere}.reading-body p{margin:0 0 1.4em}.reading-article .article-summary{line-height:1.7;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--color-text)}.article-meta{font-size:var(--font-sm);color:var(--muted)}.reading-article .detailimage{width:100%;height:auto;max-height:520px;object-fit:contain}.related-content .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.related-content .cardbody{overflow-wrap:anywhere}.related-content .cover{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:16px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}.album-grid figure{margin:0;min-width:0}.album-grid figcaption{font-size:var(--font-sm);color:var(--muted);line-height:1.6;margin-top:10px;overflow-wrap:anywhere}.album-open{display:block;width:100%;padding:0;border:1px solid var(--ui-border);background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden}.album-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.media-image-frame{position:relative;overflow:hidden;background:var(--color-surface)}.media-image-asset{display:block;width:100%;height:100%;object-fit:inherit}.media-image-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:var(--font-sm);pointer-events:none}.media-image-frame[aria-busy=true] .media-image-asset{opacity:0}.media-image-frame[aria-busy=false] .media-image-asset{opacity:1}
.gallery-lightbox{width:min(960px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--ui-border);border-radius:var(--radius-lg);overflow:auto;overscroll-behavior:contain}.gallery-lightbox::backdrop{background:rgba(0,0,0,.88)}.gallery-lightbox figure{margin:16px 0}.lightbox-toolbar,.lightbox-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.lightbox-toolbar h2{font-size:var(--font-md);margin:0;overflow-wrap:anywhere}.lightbox-toolbar button{flex-shrink:0}.lightbox-image{width:100%;height:min(62dvh,650px);object-fit:contain}.lightbox-controls button{white-space:normal;min-height:44px}.gallery-lightbox figcaption{margin-top:12px;line-height:1.6;overflow-wrap:anywhere}.gallery-lightbox .muted{font-size:var(--font-xs)}
.team-directory-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}.ds-content-card[data-kind=team] .team-logo,.related-content .team-logo{width:100%;height:180px;object-fit:contain;padding:24px;background:var(--color-raised)}.team-directory-grid .graphic.team{height:180px;min-height:0}.team-directory-grid .graphic.team strong{font-size:var(--font-md)}.team-profile .detailimage{width:180px;height:180px;object-fit:contain;padding:16px;display:block}.team-profile-game{font-weight:700}.team-profile .articlebody{max-width:66ch;line-height:1.8}.team-profile .panel{margin-top:20px}.experience-hub .toolbar .tools label{min-width:0}.experience-hub .toolbar .tools label select{width:100%}
@media(max-width:600px){.reading-article h1{font-size:clamp(1.8rem,7vw,2.5rem);letter-spacing:-.5px}.reading-body{line-height:1.8}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.album-grid figcaption{font-size:.85rem}.gallery-lightbox{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:16px}.lightbox-toolbar{align-items:flex-start}.lightbox-toolbar h2{max-width:65%}.lightbox-image{height:54dvh}.lightbox-controls{gap:8px}.experience-hub .toolbar .tools label{width:100%}.experience-hub .toolbar .tools label select{max-width:none}.team-directory-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:340px){.album-grid{grid-template-columns:minmax(0,1fr)}}

/* Quiet interaction feedback; no autoplay or decorative animation. */
button,a.button,.ds-button,input,select,textarea{transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}button:active:not(:disabled),a.button:active{filter:brightness(.93);transform:translateY(1px)}button[aria-pressed=true]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}button[aria-busy=true],form[aria-busy=true] button:disabled{cursor:wait}.ds-toast{display:flex;align-items:flex-start;gap:12px}.ds-toast button{margin-left:auto;flex-shrink:0;min-height:44px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active:not(:disabled),a.button:active{transform:none}}

/* Accessibility: readable control boundaries, scalable text and contained reflow. */
:root{--color-control-border:#7e8797}
input:not([type=checkbox]):not([type=radio]),select,textarea,button:not(.ds-button-primary):not(.button):not(.active),.site-menu summary{border-color:var(--color-control-border)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--status-error-text)}
button,a.button,summary{min-width:44px;white-space:normal;overflow-wrap:anywhere}
label.checklabel{min-height:44px;padding-block:8px;align-items:center}
label.checklabel input[type=checkbox]{flex-shrink:0;min-width:24px;width:24px;height:24px}
fieldset,legend,label,h1,h2,h3,h4,.ds-feedback>div,.tools>*{min-width:0;overflow-wrap:anywhere}
input,select,textarea{max-width:100%}
h1,h2,h3,h4{hyphens:auto}
:where(a,button,input,select,textarea,summary,[tabindex]){scroll-margin-block:120px}
.modal.ds-dialog{width:min(900px,calc(100% - 24px));height:auto;max-height:calc(100dvh - 24px);margin:auto;padding:0;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-control-border);border-radius:var(--radius-lg);overflow:auto;overscroll-behavior:contain}
.modal.ds-dialog::backdrop{background:#000c}
.modal.ds-dialog .modalbody{max-width:none;border:0;padding:56px clamp(12px,3vw,32px) 24px}
.reading-article .detailimage{aspect-ratio:16/9;height:auto;max-height:none;object-fit:contain;background:var(--color-surface)}
@media(max-width:760px){.bec-header{position:relative}.bec-header .nav{flex-wrap:wrap}.bec-header .brand{min-width:0;max-width:calc(100% - 100px)}.bec-header .brand span{overflow-wrap:anywhere}.site-menu>.menu-panel{position:absolute;inset:100% 0 auto;width:100%;max-height:60dvh}.menu-top{flex-wrap:wrap}.lightbox-toolbar,.lightbox-controls{flex-wrap:wrap}.lightbox-toolbar h2{max-width:100%}.admin-sidebar{position:static}}
@media(max-width:380px){.shell{padding-inline:12px}.wrap{width:calc(100% - 24px)}.menu-groups,.album-grid{grid-template-columns:minmax(0,1fr)}.gallery-lightbox{padding:12px}.lightbox-controls button{flex:1}.score-row{grid-template-columns:minmax(0,1fr)}.ds-feedback{padding:12px}}
@media(max-height:500px){.bec-header,.admin-sidebar{position:relative}.mobile-dock{position:static;margin-top:24px}body{padding-bottom:0}}

.bec-header .nav,.bec-header .primary-nav{flex-wrap:wrap}.bec-header .primary-nav{min-width:0;white-space:normal}
@media(max-width:380px){.mobile-dock{position:static;margin-top:24px}body{padding-bottom:0}}