html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.55; }
.page p, .page li { font-size: 16px; line-height: 1.55; }
.page h2 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
.page h3 { font-size: clamp(15px, 2vw, 17px); margin-top: 18px; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.page ul { padding-left: 0; list-style: none; }
@media (max-width: 768px) {
    body { font-size: 16.5px; }
    .page p, .page li { font-size: 16.5px; }
    .site-nav .navbar-brand h1 { font-size: 1.15em; padding-left: 56px; }
    .site-nav .navbar-brand { width: 200px; height: 56px; background-size: 180px auto; }
}

@media (max-width: 820px) {
    body { padding-bottom: 78px; }
    footer { padding-bottom: 90px; }
}

.page ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 8px 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    transition: background .15s ease;
}
.page ul li .rule-text { flex: 1; min-width: 0; }
.page ul li.bumped { background: rgba(255,255,255,0.18); }

#about ul li      { background: rgba(255,255,255,0.07); }
#presenters ul li { background: rgba(255,255,255,0.10); }
#performers ul li { background: rgba(255,255,255,0.18); }
#judging ul li    { background: rgba(255,255,255,0.08); }

.sip-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: 600 13px/1 "Open Sans", sans-serif;
    letter-spacing: .04em;
    padding: 0 14px;
    min-height: 40px;
    min-width: 76px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, color .15s ease;
    white-space: nowrap;
}
.sip-btn:hover, .sip-btn:focus-visible { background: currentColor; }
.sip-btn:hover .sip-label, .sip-btn:focus-visible .sip-label,
.sip-btn:hover .sip-count, .sip-btn:focus-visible .sip-count { color: var(--btn-fg, #28538B); }
.sip-btn:active { transform: scale(.96); }
.sip-btn .sip-count {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    opacity: .9;
}
.sip-btn .sip-count.zero { opacity: .55; }
.sip-btn.bumped { animation: bump .35s ease; }
@keyframes bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.10); background: #fff; color: #28538B; }
    100% { transform: scale(1); }
}

#about        .sip-btn { color: #ECF2FA; --btn-fg: #28538B; }
#presenters   .sip-btn { color: #ffffff; --btn-fg: #4D6584; }
#performers   .sip-btn { color: #1C3A66; --btn-fg: #ECF2FA; }
#judging      .sip-btn { color: #ECF2FA; --btn-fg: #4D6584; }

.page ul li[data-amt="2"]     { box-shadow: inset 3px 0 0 #F4C03B; }
.page ul li[data-amt="drain"] { box-shadow: inset 3px 0 0 #C0392B; }
.page ul li[data-amt="2"] .sip-btn,
.page ul li[data-amt="drain"] .sip-btn { padding: 0 12px; min-width: 96px; }
.page ul li[data-amt="drain"] .sip-btn { color: #fff; background: #8F223C; border-color: #8F223C; --btn-fg: #fff; }
.page ul li[data-amt="drain"] .sip-btn:hover,
.page ul li[data-amt="drain"] .sip-btn:focus-visible { background: #6f1a2e; border-color: #6f1a2e; }
.page ul li[data-amt="drain"] .sip-btn:hover .sip-label,
.page ul li[data-amt="drain"] .sip-btn:hover .sip-count,
.page ul li[data-amt="drain"] .sip-btn:focus-visible .sip-label,
.page ul li[data-amt="drain"] .sip-btn:focus-visible .sip-count { color: #fff; }

/* #performers .sip-btn colour would otherwise override drain styling */
#performers ul li[data-amt="drain"] .sip-btn {
    color: #fff;
    background: #8F223C;
    border-color: #8F223C;
    --btn-fg: #fff;
}
#performers ul li[data-amt="drain"] .sip-btn:hover,
#performers ul li[data-amt="drain"] .sip-btn:focus-visible {
    background: #6f1a2e;
    border-color: #6f1a2e;
}

/* Yellow sip tally pill — shared by bottom bar and navbar */
.sipbar .sip-total,
.tally-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    border: none;
    border-radius: 999px;
    background: #F4C03B;
    color: #000;
    font: 500 11px/1 "Open Sans", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
}

.tally-chip {
    margin-left: 10px;
}

.site-nav .nav-link.tally-chip,
.site-nav .nav-link.tally-chip:hover,
.site-nav .nav-link.tally-chip:focus,
.site-nav .nav-link.tally-chip:focus-visible,
.site-nav.inbody .nav-link.tally-chip,
.site-nav .navbar-nav button.tally-chip,
.site-nav .navbar-nav button.tally-chip:hover,
.site-nav .navbar-nav button.tally-chip:focus,
.site-nav .navbar-nav button.tally-chip:focus-visible,
.site-nav.inbody .navbar-nav button.tally-chip {
    color: #000 !important;
    background: #F4C03B !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* Navbar chip: override Bootstrap .nav-link so it matches the bottom-bar pill */
.site-nav .navbar-nav button.nav-link.tally-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: none;
    margin-left: 10px;
    padding: 6px 14px 6px 10px !important;
    font: 500 11px/1 "Open Sans", sans-serif !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
}

.sipbar .sip-total .n,
.tally-chip .n {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: #000;
    min-width: 24px;
    text-align: center;
}

.sipbar .sip-total .lbl,
.tally-chip .lbl,
.sipbar .sip-total .lbl small,
.tally-chip .lbl small {
    color: #000;
}

.sipbar .sip-total .lbl small,
.tally-chip .lbl small {
    display: block;
    opacity: 0.7;
    font-size: 9px;
    margin-top: 2px;
    letter-spacing: 0.1em;
}
@media (max-width: 820px) {
    .tally-chip { display: none; }
}

.sipbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    background: rgba(20,20,20,.96);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 12px/1.15 "Open Sans", sans-serif;
}
.sipbar .sip-breakdown {
    flex: 1;
    display: flex; gap: 14px;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: #D7E9FF;
    overflow: hidden;
}
.sipbar .sip-breakdown span b {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: #fff;
    margin-right: 4px;
}
.sipbar .sip-reset {
    appearance: none; border: 1px solid rgba(255,255,255,.4);
    background: transparent; color: #fff;
    font: 500 11px/1 "Open Sans", sans-serif;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 0 14px; min-height: 36px; border-radius: 999px;
    cursor: pointer;
}
.sipbar .sip-reset:hover { background: rgba(255,255,255,.1); }
.sipbar.pulse .sip-total { animation: bump .35s ease; }

@media (min-width: 821px) {
    .sipbar { left: auto; right: 22px; bottom: 22px; border-radius: 999px; padding: 8px 8px 8px 16px; }
    .sipbar .sip-breakdown { display: none; }
}

.page h3 + ul { margin-top: 0; }

@media (max-width: 768px) {
    footer .col-sm-6 { padding: 0 20px; }
    footer .footerRight { margin-top: 16px; }
}