/* PayPlay shared stylesheet. Page-specific rules are scoped by body class. */

/* landing.html */
body.page-landing {
--bg-cream: #fbf8f0;
            --text-navy: #0e3047;
            --retro-orange: #d95e2b;
            --moss-green: #68793b;
            --border-color: #e4decb;
            --card-bg: #ffffff;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* venues.html */
body.page-venues {
--bg-cream: #fcf3e7;
            --text-navy: #0e3047;
            --retro-orange: #d95e2b;
            --moss-green: #68793b;
            --border-color: #e4decb;
            --card-bg: #fffdf8;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* signup pages */
body.page-signup {
--bg-cream: #fcf3e7;
            --text-navy: #0e3047;
            --retro-orange: #d95e2b;
            --moss-green: #68793b;
            --border-color: #e4decb;
            --card-bg: #fffdf8;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* index.html */
body.page-tracker {
--bg-cream: #fbf8f0;
            --text-navy: #0e3047;
            --retro-orange: #d95e2b;
            --moss-green: #68793b;
            --mustard-yellow: #ca8a04;
            --border-color: #e4decb;
            --card-bg: #ffffff;
            
            --accent-blue: #024DDF; 
            --accent-green: #1db954; 
            --text-main: var(--text-navy);
            --text-muted: #577590;
}

@keyframes spin {
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

/* admin.html */
body.page-admin {
--bg-color: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --accent-blue: #024DDF;
            --accent-green: #1db954;
            --accent-red: #ef4444;
            --accent-orange: #d95e2b;
            --accent-purple: #7c3aed;
            --border-color: #e2e8f0;
            --card-bg: #f8fafc;
            --empty-row-bg: #f0f7ff;
            --empty-row-hover: #e0f0ff;
            --empty-border: #bae6fd;
            --hidden-bg: #fef2f2;
            --hidden-hover: #fee2e2;
            --hidden-border: #fca5a5;
            --dj-bg: #f5f3ff;
            --dj-hover: #ede9fe;
            --dj-border: #ddd6fe;
}

.page-landing *,
.page-venues *,
.page-signup * {
box-sizing: border-box;
}

body.page-landing,
body.page-signup {
font-family: var(--font-main);
            background-color: #fcf3e7;
            color: var(--text-navy);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
}

.page-landing header,
.page-signup header {
max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
}

.page-landing .logo-img,
.page-venues .logo-img,
.page-signup .logo-img {
height: 249px;
            width: auto;
            object-fit: contain;
            transition: transform 0.2s ease;
}

.page-landing .logo-img:hover,
.page-venues .logo-img:hover,
.page-signup .logo-img:hover,
.page-tracker .logo-img:hover {
transform: scale(1.03);
}

.page-landing .nav-controls,
.page-venues .nav-controls,
.page-signup .nav-controls,
.page-tracker .controls {
display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
}

.page-landing .mobile-signup-menu,
.page-venues .mobile-signup-menu,
.page-signup .mobile-signup-menu,
.page-tracker .mobile-signup-menu,
.page-landing .mobile-label {
display: none;
}

.page-landing .nav-controls h3,
.page-venues .nav-controls h3,
.page-signup .nav-controls h3 {
margin: 0;
}

.page-landing .header-login-link,
.page-venues .header-login-link,
.page-signup .header-login-link,
.page-tracker .header-login-link {
color: var(--text-navy);
            font-size: 0.95rem;
            font-weight: 900;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.04em;
}

.page-landing .nav-controls .header-login-link,
.page-venues .nav-controls .header-login-link,
.page-signup .nav-controls .header-login-link {
border-bottom: 2px solid var(--retro-orange);
            padding-bottom: 0.12rem;
}

.page-landing .nav-controls .logout-link,
.page-venues .nav-controls .logout-link,
.page-signup .nav-controls .logout-link {
border-bottom-color: var(--moss-green);
}

.page-tracker .controls .logout-link {
border-bottom: 2px solid var(--moss-green);
            padding-bottom: 0.12rem;
}

.page-landing .header-login-link:hover,
.page-venues .header-login-link:hover,
.page-signup .header-login-link:hover,
.page-tracker .header-login-link:hover {
color: var(--retro-orange);
}

.page-landing .profile-link,
.page-venues .profile-link,
.page-signup .profile-link,
.page-tracker .profile-link,
.page-landing .logout-link,
.page-venues .logout-link,
.page-signup .logout-link,
.page-tracker .logout-link {
display: inline-flex;
            align-items: center;
            gap: 0.42rem;
}

.page-landing .profile-icon,
.page-venues .profile-icon,
.page-signup .profile-icon,
.page-tracker .profile-icon,
.page-landing .logout-icon,
.page-venues .logout-icon,
.page-signup .logout-icon,
.page-tracker .logout-icon {
width: 1.05rem;
            height: 1.05rem;
            fill: currentColor;
            flex: 0 0 auto;
}

.page-landing .btn,
.page-venues .btn,
.page-signup .btn {
font-size: 0.95rem;
            font-weight: 800;
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            border: 2px solid var(--text-navy);
            transition: all 0.2s ease;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: 3px 3px 0 var(--text-navy);
}

.page-landing .btn-band,
.page-venues .btn-band,
.page-signup .btn-band,
.page-tracker .btn-band {
background-color: var(--retro-orange); color: #ffffff;
}

.page-landing .btn-band:hover,
.page-venues .btn-band:hover,
.page-signup .btn-band:hover {
background-color: #c24d1f; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--text-navy);
}

.page-landing .btn-venue,
.page-venues .btn-venue,
.page-signup .btn-venue,
.page-tracker .btn-venue {
background-color: var(--moss-green); color: #ffffff;
}

.page-landing .btn-venue:hover,
.page-venues .btn-venue:hover,
.page-signup .btn-venue:hover {
background-color: #53622e; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--text-navy);
}

.page-landing .btn-more {
display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--text-navy);
            color: var(--bg-cream);
}

.page-landing main {
width: 100%;
            margin: 2rem auto;
            padding: 0 2rem;
            flex-grow: 1;
}

.page-landing .hero-content {
max-width: 850px;
            margin: 0 auto;
            text-align: center;
}

.page-landing h1 {
font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin: 0 0 2rem;
            letter-spacing: -0.03em;
            text-shadow: 2px 2px 0 rgba(217, 94, 43, 0.3);
}

.page-landing h1 span {
color: var(--retro-orange);
}

.page-landing h1 .desktop-title-extra {
color: inherit;
}

.page-landing .tagline {
font-size: 1.25rem;
            font-weight: 500;
            margin-bottom: 3rem;
            opacity: 0.9;
            display: none;
}

.page-landing .search-wrapper {
background-color: var(--card-bg);
            border: 3px solid var(--text-navy);
            border-radius: 50px;
            padding: 0.5rem 0.5rem 0.5rem 1.5rem;
            display: flex;
            align-items: center;
            box-shadow: 6px 6px 0 rgba(104, 121, 59, 0.4);
            max-width: 650px;
            margin: 0 auto;
}

.page-landing .search-input {
flex-grow: 1;
            min-width: 0;
            border: none;
            background: transparent;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-navy);
            outline: none;
            padding-right: 1rem;
}

.page-landing .search-submit-btn {
background-color: var(--text-navy);
            color: var(--bg-cream);
            border: none;
            font-size: 1rem;
            font-weight: 700;
            padding: 0.85rem 2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: background-color 0.2s ease;
            white-space: nowrap;
}

.page-landing .search-submit-btn:hover {
background-color: var(--retro-orange);
}

.page-landing .badge-row {
margin-top: 3rem;
            display: grid;
            grid-template-columns: max-content minmax(230px, 0.96fr) minmax(285px, 1.22fr) minmax(190px, 0.82fr);
            justify-content: center;
            gap: clamp(0.6rem, 1vw, 1.25rem);
            align-items: center;
            width: min(1080px, calc(100vw - 3rem));
            max-width: none;
            margin-left: 50%;
            transform: translateX(-50%);
            overflow: visible;
            padding: 1rem .75rem 0.35rem 0.75rem;
            box-sizing: border-box;
}

.page-landing .badge-label {
color: var(--text-navy);
            font-size: clamp(0.78rem, 0.95vw, 0.95rem);
            font-weight: 950;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
}

.page-landing .badge-item {
display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
font-size: clamp(0.68rem, 0.78vw, 0.82rem);
            font-weight: 650;
            text-transform: uppercase;
            border: 2px dotted var(--retro-orange);
            background-color: #ffffff;
            color: var(--text-navy);
            padding: 0.82rem clamp(0.45rem, 0.9vw, 0.95rem);
            border-radius: 999px;
            line-height: 1;
}

.page-landing .badge-item strong {
font-weight: 950;
}

.page-landing .badge-item:nth-child(3) {
border-color: #078e1c;
            padding-left: clamp(0.7rem, 1vw, 1.05rem);
            padding-right: clamp(0.7rem, 1vw, 1.05rem);
}

.page-landing .badge-item:nth-child(4) {
border-color: #0d2f47;
}

@media (max-width: 860px) {
.page-landing .badge-row {
grid-template-columns: 1fr;
            justify-items: center;
            gap: 0.75rem;
            width: 100%;
            max-width: 100%;
            margin-left: auto;
            transform: none;
}

.page-landing .badge-label {
display: block;
            font-size: 1rem;
            text-align: center;
}

.page-landing .badge-item {
width: min(100%, 360px);
            font-size: 0.95rem;
            line-height: 1.15;
            text-align: center;
            justify-content: center;
}
}

@media (min-width: 601px) and (max-width: 920px) {
.page-landing header,
.page-venues header,
.page-signup header,
.page-tracker header {
justify-content: center;
            text-align: center;
}

.page-landing header > a,
.page-venues header > a,
.page-signup header > a,
.page-tracker header > a {
display: flex;
            justify-content: center;
            width: 100%;
}

.page-landing .nav-controls,
.page-venues .nav-controls,
.page-signup .nav-controls,
.page-tracker .controls {
justify-content: center;
            width: 100%;
}
}

/* signup pages */
.page-signup main {
width: 100%;
            max-width: 1120px;
            margin: 0.2rem auto 3rem;
            padding: 0 2rem;
            flex-grow: 1;
            display: flex;
            justify-content: center;
}

.page-signup .signup-shell {
display: flex;
            justify-content: center;
            align-items: stretch;
            width: 100%;
}

.page-signup .signup-copy,
.page-signup .signup-form {
border: 2px solid var(--text-navy);
            border-radius: 8px;
            background: var(--card-bg);
            box-shadow: 5px 5px 0 var(--border-color);
}

.page-signup .signup-copy {
padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1 1 0;
            min-height: 380px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
}

.page-signup .eyebrow {
margin: 0 0 0.85rem;
            color: var(--retro-orange);
            font-size: 0.88rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
}

.page-signup h1 {
margin: 0;
            color: var(--text-navy);
            font-size: clamp(2.25rem, 6vw, 4.2rem);
            font-weight: 950;
            line-height: 0.98;
            text-shadow: 2px 2px 0 rgba(217, 94, 43, 0.24);
}

.page-signup .signup-copy p:last-child {
margin: 1.2rem 0 0;
            color: #42566a;
            font-size: 1.05rem;
            font-weight: 750;
            line-height: 1.45;
}

.page-signup .signup-form {
padding: 1.85rem;
            display: grid;
            gap: 1.05rem;
            width: min(100%, 410px);
            flex: 0 0 310px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
}

.page-signup label {
display: grid;
            gap: 0.42rem;
            color: var(--text-navy);
            font-size: 0.86rem;
            font-weight: 900;
            text-transform: uppercase;
}

.page-signup input,
.page-signup select {
width: 100%;
            min-height: 48px;
            border: 2px solid var(--text-navy);
            border-radius: 999px;
            background: #ffffff;
            color: var(--text-navy);
            padding: 0.72rem 1rem;
            font-size: 0.98rem;
            font-weight: 750;
            outline: none;
            box-shadow: 3px 3px 0 var(--border-color);
}

.page-signup select {
appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, var(--text-navy) 50%), linear-gradient(135deg, var(--text-navy) 50%, transparent 50%);
            background-position: calc(100% - 22px) 20px, calc(100% - 16px) 20px;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
}

.page-signup input:focus,
.page-signup select:focus {
box-shadow: 4px 4px 0 rgba(217, 94, 43, 0.35);
}

.page-signup .signup-form .btn {
width: fit-content;
            margin-top: 0.15rem;
            padding-left: 1.65rem;
            padding-right: 1.65rem;
}

.page-login .signup-form .btn-login {
width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: start;
            min-height: 54px;
            height: auto;
            padding: 0.85rem 1.65rem;
            background-color: var(--text-navy);
            color: var(--bg-cream);
            box-shadow: none;
            border-color: var(--text-navy);
}

.page-login .signup-form {
align-content: center;
            gap: 1.15rem;
}

.page-login .signup-form label {
gap: 0.7rem;
}

.page-login .signup-form input {
min-height: 56px;
            padding: 0.82rem 1rem;
}

.page-login .signup-form .btn-login:hover {
background-color: var(--retro-orange);
            border-color: var(--retro-orange);
            transform: none;
            box-shadow: none;
}

.page-profile .profile-card {
align-content: center;
}

.page-profile .profile-row {
display: grid;
            gap: 0.28rem;
            margin: 0;
            color: #42566a;
            font-size: 0.98rem;
            font-weight: 750;
            line-height: 1.35;
            text-transform: none;
}

.page-profile .profile-row span {
color: var(--text-navy);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
}

.page-profile .btn-login {
display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            min-height: 48px;
            margin-top: 0.2rem;
            background-color: var(--text-navy);
            color: var(--bg-cream);
            border-color: var(--text-navy);
            box-shadow: 3px 3px 0 var(--text-navy);
}

.page-signup .field-error {
display: block;
            margin-top: 0.02rem;
            color: var(--retro-orange);
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1.3;
            text-transform: none;
}

.page-signup label.has-error input,
.page-signup label.has-error select {
border-color: var(--retro-orange);
            box-shadow: 4px 4px 0 rgba(217, 94, 43, 0.25);
}

.page-signup .form-note {
margin: 0.2rem 0 0;
            color: #42566a;
            font-size: 0.88rem;
            font-weight: 700;
            line-height: 1.4;
}

.page-signup .form-status {
margin: 0;
            color: var(--retro-orange);
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1.35;
            text-align: center;
            text-transform: none;
}

.page-signup .mobile-signup-title {
display: none;
}

.page-landing footer {
width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            border-top: 2px dashed var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            font-size: 0.9rem;
            font-weight: 600;
}

.page-landing footer a,
.page-venues footer a,
.page-signup footer a {
color: var(--text-navy);
            text-decoration: none;
            border-bottom: 2px solid var(--retro-orange);
}

@media (max-width: 600px) {
.page-landing header,
.page-venues header,
.page-signup header {
padding: 1rem;
}

.page-landing header,
.page-venues header,
.page-signup header,
.page-tracker header {
justify-content: center;
            text-align: center;
            gap: 1.2rem;
            padding-top: 5.75rem;
}

.page-landing .mobile-signup-menu,
.page-venues .mobile-signup-menu,
.page-signup .mobile-signup-menu,
.page-tracker .mobile-signup-menu {
display: block;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 50;
            text-align: center;
            background:
                linear-gradient(180deg, rgba(255, 239, 204, 0.98), rgba(255, 226, 174, 0.98));
            border-bottom: 2px dashed #e9b847;
            box-shadow: 0 4px 18px rgba(14, 48, 71, 0.08);
            padding: 0.9rem 1rem;
}

.page-landing .mobile-signup-menu summary,
.page-venues .mobile-signup-menu summary,
.page-signup .mobile-signup-menu summary,
.page-tracker .mobile-signup-menu summary {
display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            color: var(--text-navy);
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 900;
            list-style: none;
            text-transform: uppercase;
}

.page-landing .mobile-signup-menu summary::-webkit-details-marker,
.page-venues .mobile-signup-menu summary::-webkit-details-marker,
.page-signup .mobile-signup-menu summary::-webkit-details-marker,
.page-tracker .mobile-signup-menu summary::-webkit-details-marker {
display: none;
}

.page-landing .hamburger-icon,
.page-venues .hamburger-icon,
.page-signup .hamburger-icon,
.page-tracker .hamburger-icon {
display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 2px solid var(--text-navy);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 3px 3px 0 rgba(14, 48, 71, 0.12);
            font-size: 1rem;
            line-height: 1;
}

.page-landing .mobile-signup-menu__links,
.page-venues .mobile-signup-menu__links,
.page-signup .mobile-signup-menu__links,
.page-tracker .mobile-signup-menu__links {
display: grid;
            justify-items: center;
            gap: 0.2rem;
            margin: 0.9rem auto 0.15rem;
            max-width: 280px;
}

.page-landing .mobile-signup-menu__links .btn,
.page-venues .mobile-signup-menu__links .btn,
.page-signup .mobile-signup-menu__links .btn,
.page-tracker .mobile-signup-menu__links .btn,
.page-landing .mobile-signup-menu__links .header-login-link,
.page-venues .mobile-signup-menu__links .header-login-link,
.page-signup .mobile-signup-menu__links .header-login-link,
.page-tracker .mobile-signup-menu__links .header-login-link {
display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            width: fit-content;
            padding: 0.45rem 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: var(--text-navy);
            font-size: 0.95rem;
            font-weight: 900;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.04em;
}

.page-landing .mobile-signup-menu__links a span,
.page-venues .mobile-signup-menu__links a span,
.page-signup .mobile-signup-menu__links a span,
.page-tracker .mobile-signup-menu__links a span {
            font-size: 0.95rem;
            line-height: 1;
}

.page-landing .mobile-signup-menu__links a:nth-child(1) span,
.page-venues .mobile-signup-menu__links a:nth-child(1) span,
.page-signup .mobile-signup-menu__links a:nth-child(1) span,
.page-tracker .mobile-signup-menu__links a:nth-child(1) span {
color: var(--moss-green);
}

.page-landing .mobile-signup-menu__links a:nth-child(2) span,
.page-venues .mobile-signup-menu__links a:nth-child(2) span,
.page-signup .mobile-signup-menu__links a:nth-child(2) span,
.page-tracker .mobile-signup-menu__links a:nth-child(2) span {
color: var(--retro-orange);
}

.page-landing .mobile-signup-menu__links a:nth-child(3) span,
.page-venues .mobile-signup-menu__links a:nth-child(3) span,
.page-signup .mobile-signup-menu__links a:nth-child(3) span,
.page-tracker .mobile-signup-menu__links a:nth-child(3) span {
color: var(--moss-green);
}

.page-landing .mobile-signup-menu__links a:nth-child(4) span,
.page-venues .mobile-signup-menu__links a:nth-child(4) span,
.page-signup .mobile-signup-menu__links a:nth-child(4) span,
.page-tracker .mobile-signup-menu__links a:nth-child(4) span {
color: var(--text-navy);
}

.page-landing .mobile-signup-menu__links .btn:hover,
.page-venues .mobile-signup-menu__links .btn:hover,
.page-signup .mobile-signup-menu__links .btn:hover,
.page-tracker .mobile-signup-menu__links .btn:hover,
.page-landing .mobile-signup-menu__links .header-login-link:hover,
.page-venues .mobile-signup-menu__links .header-login-link:hover,
.page-signup .mobile-signup-menu__links .header-login-link:hover,
.page-tracker .mobile-signup-menu__links .header-login-link:hover {
background: transparent;
            box-shadow: none;
            color: var(--retro-orange);
            transform: none;
}

.page-landing .mobile-signup-menu__links .logout-link,
.page-venues .mobile-signup-menu__links .logout-link,
.page-signup .mobile-signup-menu__links .logout-link,
.page-tracker .mobile-signup-menu__links .logout-link {
border-bottom: 2px solid var(--moss-green);
            padding-bottom: 0.12rem;
}

.page-landing header > a,
.page-venues header > a,
.page-signup header > a,
.page-tracker header > a {
display: flex;
            justify-content: center;
            width: 100%;
}

.page-landing .logo-img,
.page-venues .logo-img,
.page-signup .logo-img,
.page-tracker .logo-img {
height: auto;
            width: min(82vw, 380px);
}

.page-landing .nav-controls,
.page-venues .nav-controls,
.page-signup .nav-controls {
display: none;
}

.page-tracker .controls {
display: flex;
            align-items: stretch;
            justify-content: center;
            width: 100%;
            gap: 0.85rem;
}

.page-tracker .controls .search-input {
order: 1;
            flex: 1 1 100%;
            width: 100%;
            min-height: 56px;
            text-align: center;
            font-size: 1rem;
}

.page-tracker .controls .btn {
order: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 180px;
            max-width: 260px;
            min-height: 48px;
}

.page-tracker .controls .header-login-link {
order: 3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 100%;
            padding-top: 0.2rem;
}

.page-tracker .controls select {
order: 4;
            flex: 1 1 100%;
            width: 100%;
            min-height: 54px;
            text-align: center;
}

.page-landing h1 {
font-size: clamp(2.15rem, 10.5vw, 2.85rem);
            text-align: center;
            line-height: 1.14;
            margin-bottom: 1.65rem;
}

.page-landing .desktop-title-extra {
display: none;
}

.page-landing main {
padding: 0 1rem;
            text-align: center;
            margin-top: 0.35rem;
}

.page-landing .hero-content {
text-align: center;
}

.page-signup main {
padding: 0 1rem;
}

.page-signup .mobile-signup-title {
display: block;
            margin: 0.15rem auto 1.35rem;
            padding: 0 1rem;
            color: var(--text-navy);
            font-size: clamp(1.75rem, 8vw, 2.35rem);
            font-weight: 950;
            line-height: 1.08;
            text-align: center;
            text-shadow: 2px 2px 0 rgba(217, 94, 43, 0.24);
}

.page-signup .signup-shell {
display: flex;
            justify-content: center;
            width: 100%;
}

.page-signup .signup-copy,
.page-signup-venue .signup-copy {
display: none;
}

.page-signup .signup-form,
.page-signup-venue .signup-form {
width: min(100%, 410px);
            flex-basis: auto;
            border-radius: 8px;
}

.page-landing .search-wrapper {
flex-direction: column;
            align-items: stretch;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            gap: 1.35rem;
            max-width: 100%;
}

.page-landing .search-input {
width: 100%;
            min-height: 64px;
            border: 3px solid var(--text-navy);
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 6px 6px 0 rgba(104, 121, 59, 0.35);
            text-align: center;
            padding: 0.8rem 1rem;
            font-size: 1.08rem;
}

.page-landing .search-submit-btn {
width: 100%;
            min-height: 54px;
            font-size: 1.02rem;
            font-weight: 850;
}

.page-landing .desktop-label {
display: none;
}

.page-landing .mobile-label {
display: inline;
}

.page-landing .badge-row {
grid-template-columns: 1fr;
            gap: 0.9rem;
            justify-items: center;
}

.page-landing .badge-item {
            line-height: 1.2;
            text-align: center;
            width: min(100%, 360px);
            padding: 0.68rem 0.95rem;
            font-size: 0.94rem;
            justify-content: center;
            border-radius: 999px;
}

.page-landing footer {
flex-direction: column; text-align: center;
}
}


body.page-venues {
margin: 0;
            min-height: 100vh;
            background: var(--bg-cream);
            color: var(--text-navy);
            font-family: var(--font-main);
}

.page-venues header {
width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
}

.page-venues .btn-location {
background-color: var(--retro-orange); color: #fff;
}

.page-venues .btn-search {
background-color: var(--text-navy); color: #fff;
}

.page-venues .btn-search:hover {
background-color: #092438;
}

.page-venues .btn-secondary {
background-color: #fff; color: var(--text-navy);
}

.page-venues main,
.page-venues footer {
width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 2rem;
            padding-right: 2rem;
}

.page-venues .hero {
padding: 1rem 0 1.25rem;
            border-bottom: 2px dashed var(--border-color);
}

.page-venues h1 {
margin: 0 0 0.7rem;
            font-size: clamp(2.2rem, 5vw, 4.1rem);
            line-height: 1;
            font-weight: 950;
}

.page-venues .lede {
max-width: 780px;
            margin: 0;
            color: #42566a;
            font-size: 1.08rem;
            line-height: 1.5;
            font-weight: 650;
}

.page-venues .toolbar {
margin: 1.25rem 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 0.75rem;
            align-items: center;
}

.page-venues .city-strip {
display: none;
            gap: 0.55rem;
            overflow-x: auto;
            padding: 0 0 1.1rem;
            margin-bottom: 1.1rem;
            border-bottom: 2px dashed var(--border-color);
}

.page-venues .city-chip {
flex: 0 0 auto;
            border: 2px solid var(--text-navy);
            border-radius: 999px;
            background: #fff;
            color: var(--text-navy);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 850;
            padding: 0.45rem 0.8rem;
            box-shadow: 2px 2px 0 var(--border-color);
}

.page-venues .city-chip:hover,
.page-venues .city-chip.active {
background: var(--moss-green);
            color: #fff;
            box-shadow: 3px 3px 0 var(--text-navy);
}

.page-venues .search-input,
.page-venues .select {
min-height: 46px;
            border: 2px solid var(--text-navy);
            border-radius: 999px;
            background: #fff;
            color: var(--text-navy);
            padding: 0.65rem 1rem;
            font-size: 0.95rem;
            font-weight: 750;
            outline: none;
            box-shadow: 3px 3px 0 var(--border-color);
}

.page-venues .results-note {
display: none;
            margin: 0.75rem 0 1.45rem;
            padding: 0.85rem 1rem 0.9rem;
            background: linear-gradient(180deg, rgba(255, 252, 243, 0.96), rgba(250, 219, 147, 0.76));
            border: 2px dotted #d6a851;
            border-radius: 8px;
            color: var(--text-navy);
            text-align: center;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.page-venues .results-note h2 {
margin: 0;
            color: var(--retro-orange);
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.25;
}

.page-venues .results-note p {
margin: 0.35rem 0 0;
            color: #42566a;
            font-size: 0.92rem;
            font-weight: 850;
            line-height: 1.25;
}

.page-venues .grid {
display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
            padding-bottom: 3rem;
}

.page-venues .venue-card {
display: flex;
            flex-direction: column;
            min-height: 250px;
            background: #fff;
            border: 2px solid var(--text-navy);
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 4px 4px 0 var(--border-color);
}

.page-venues .venue-meta {
display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            color: var(--moss-green);
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            line-height: 1.25;
}

.page-venues .venue-card h2 {
margin: 0.8rem 0 0.45rem;
            font-size: 1.18rem;
            line-height: 1.15;
}

.page-venues .venue-card p {
margin: 0;
            color: #42566a;
            font-size: 0.92rem;
            line-height: 1.4;
            font-weight: 600;
}

.page-venues .venue-card a {
margin-top: auto;
            color: var(--retro-orange);
            font-weight: 900;
            text-decoration: none;
            padding-top: 1rem;
}

.page-venues .empty {
display: none;
            padding: 2rem;
            background: var(--card-bg);
            border: 2px solid var(--text-navy);
            font-weight: 800;
            text-align: center;
}

.page-venues .empty p {
max-width: 680px;
            margin: 0.45rem auto 0;
            color: #42566a;
            font-weight: 650;
            line-height: 1.45;
}

.page-venues .empty-action,
.page-tracker .search-message .btn {
display: inline-flex;
            margin-top: 1.15rem;
            text-decoration: none;
}

.page-tracker .search-message {
display: block;
            max-width: 760px;
            margin: 3rem auto;
            padding: 2rem;
            background: var(--card-bg);
            border: 2px solid var(--text-navy);
            font-weight: 800;
            text-align: center;
}

.page-tracker .search-message p {
max-width: 680px;
            margin: 0.45rem auto 0;
            color: #42566a;
            font-weight: 650;
            line-height: 1.45;
}

.page-venues footer {
padding-top: 2rem;
            padding-bottom: 2rem;
            border-top: 2px dashed var(--border-color);
            font-size: 0.9rem;
            font-weight: 650;
}

@media (max-width: 860px) {
.page-venues .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.page-venues header {
flex-direction: column; align-items: center; padding: 1rem; padding-top: 5.75rem;
}

.page-venues main,
.page-venues footer {
padding-left: 1rem; padding-right: 1rem;
}

.page-venues .hero {
padding-top: 0.45rem;
}

.page-venues h1 {
font-size: clamp(2rem, 9.5vw, 2.55rem);
}

.page-venues .lede {
font-size: 1rem;
}

.page-venues .toolbar {
grid-template-columns: 1fr 1fr;
            gap: 0.85rem 0.5rem;
            margin: 1.15rem 0 1.25rem;
}

.page-venues .toolbar .search-input {
grid-column: 1 / -1;
            width: 100%;
            min-width: 0;
            min-height: 48px;
            padding: 0.7rem 1rem;
            font-size: 0.9rem;
}

.page-venues .toolbar .btn {
width: 100%;
            min-height: 50px;
            padding: 0.72rem 0.72rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            font-size: 0.9rem;
}

.page-venues .grid {
grid-template-columns: 1fr;
}
}


body.page-tracker {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #fcf3e7;
            color: var(--text-main);
            margin: 0; padding: 0;
            display: flex; flex-direction: column;
            align-items: center; min-height: 100vh;
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
}

.page-tracker header {
width: 100%; max-width: 1200px; padding: 1.5rem 1rem;
            box-sizing: border-box; border-bottom: 2px dashed var(--border-color);
            margin-bottom: 2rem; display: flex; justify-content: space-between;
            align-items: center; flex-wrap: wrap; gap: 1.5rem;
}

.page-tracker .logo-link {
display: flex;
            align-items: center;
            text-decoration: none;
}

.page-tracker .logo-img {
            height: 84px;
            width: auto;
            object-fit: contain;
            transition: transform 0.2s ease;
}

.page-tracker .search-input {
background-color: #ffffff; color: var(--text-main);
            border: 2px solid var(--text-main); padding: 0.6rem 1.2rem;
            border-radius: 30px; font-size: 0.95rem; font-weight: 600;
            outline: none; width: 260px; box-shadow: 3px 3px 0px var(--text-main);
}

.page-tracker .search-input:focus {
border-color: var(--retro-orange);
            box-shadow: 4px 4px 0px var(--retro-orange);
}

.page-tracker select {
background-color: #ffffff; color: var(--text-main);
            border: 2px solid var(--text-main); padding: 0.6rem 1.2rem;
            border-radius: 30px; font-size: 0.95rem; font-weight: 700;
            cursor: pointer; outline: none; box-shadow: 3px 3px 0px var(--text-main);
}

.page-tracker .btn {
font-size: 0.85rem;
            font-weight: 800;
            text-decoration: none;
            padding: 0.6rem 1.2rem;
            border-radius: 30px;
            border: 2px solid var(--text-main);
            transition: all 0.2s ease;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: 3px 3px 0px var(--text-main);
}

.page-tracker .btn-band:hover,
.page-tracker .btn-venue:hover {
transform: translate(-1px, -1px); box-shadow: 4px 4px 0px var(--text-main);
}

.page-tracker main {
width: 100%; max-width: 1200px; padding: 0 1rem; box-sizing: border-box; flex-grow: 1;
}

.page-tracker .hero-banner {
text-align: center;
            margin: 2rem auto 4rem auto;
            max-width: 1000px;
}

.page-tracker .hero-banner h2 {
font-size: 2.8rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            text-shadow: 1.5px 1.5px 0px rgba(217, 94, 43, 0.2);
}

.page-tracker .search-row-section {
margin-bottom: 2.5rem; width: 100%;
}

.page-tracker .search-section-heading {
font-size: 1.5rem; font-weight: 800; color: var(--text-main);
            margin-bottom: 1rem; border-left: 5px solid var(--retro-orange);
            padding-left: 0.75rem; letter-spacing: -0.02em;
}

.page-tracker .event-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem;
}

.page-tracker .event-card {
background-color: var(--card-bg); border: 2px solid var(--text-main);
            border-radius: 0 0 16px 16px; padding: 1.5rem; display: flex;
            flex-direction: column; justify-content: space-between;
            transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 4px 4px 0px var(--border-color);
}

.page-tracker .event-card:hover {
transform: translateY(-3px); box-shadow: 6px 6px 0px var(--text-main);
}

.page-tracker .event-title {
font-size: 1.25rem; font-weight: 800; margin: 0 0 0.75rem 0; line-height: 1.3; color: var(--retro-orange);
}

.page-tracker .artist-img-wrapper {
width: 100%; height: 165px; overflow: hidden; border-radius: 8px;
            margin-bottom: 0.75rem; background-color: #f1f5f9; border: 2px solid var(--text-main);
}

.page-tracker .artist-img-wrapper img {
width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;
}

.page-tracker .event-card:hover .artist-img-wrapper img {
transform: scale(1.04);
}

.page-tracker .media-engagement-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; width: 100%; flex-wrap: nowrap;
}

.page-tracker .metrics-inline-pills {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.page-tracker .metric-pill-link {
display: flex; align-items: center; gap: 0.3rem; color: var(--text-main);
            font-size: 0.8rem; font-weight: 700; text-decoration: none;
            background-color: #ffffff; border: 1px solid var(--text-main);
            padding: 0.2rem 0.5rem; border-radius: 20px; box-shadow: 1px 1px 0px var(--text-main); white-space: nowrap;
}

.page-tracker .metric-pill-link:hover {
border-color: var(--retro-orange); color: var(--retro-orange);
}

.page-tracker .pill-icon {
width: 13px; height: 13px;
}

.page-tracker .youtube-color {
fill: #ef4444;
}

.page-tracker .spotify-color {
fill: #1db954;
}

.page-tracker .icon-only-ribbon {
display: flex; gap: 0.65rem; align-items: center; justify-content: flex-end;
}

.page-tracker .pure-social-icon {
width: 15px; height: 15px; fill: var(--text-muted); transition: fill 0.2s ease;
}

.page-tracker .pure-social-icon:hover {
fill: var(--retro-orange);
}

.page-tracker .event-details-block {
margin-top: 0.5rem; margin-bottom: 0.75rem;
}

.page-tracker .event-detail {
font-size: 0.95rem; color: var(--text-main); opacity: 0.9; margin: 0.25rem 0;
}

.page-tracker .event-detail strong {
color: var(--text-main);
}

.page-tracker .setlist-mini-link {
font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-decoration: none;
            display: inline-flex; align-items: center; gap: 0.15rem; background-color: #f1f5f9;
            padding: 0.05rem 0.35rem; border-radius: 4px; border: 1px solid var(--border-color); margin-left: 0.4rem;
}

.page-tracker details {
background-color: #ffffff; border: 2px solid var(--text-main); border-radius: 8px; margin-top: 0.75rem; overflow: hidden;
}

.page-tracker summary {
padding: 0.5rem 0.75rem; font-size: 0.88rem; font-weight: 700; color: var(--retro-orange); cursor: pointer; background-color: #ffffff; user-select: none;
}

.page-tracker summary:hover {
background-color: var(--bg-cream);
}

.page-tracker .itinerary-list {
padding: 0.5rem 0.75rem; max-height: 200px; overflow-y: auto; font-size: 0.85rem; list-style: none; margin: 0;
}

.page-tracker .itinerary-item {
padding: 0.4rem 0; border-bottom: 1px dashed var(--border-color); color: var(--text-main);
}

.page-tracker .itinerary-item:last-child,
.page-admin tr:last-child td {
border-bottom: none;
}

.page-tracker .itinerary-item strong {
color: var(--moss-green);
}

.page-tracker .card-footer {
display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}

.page-tracker .ticket-btn {
display: inline-block; background-color: var(--moss-green); color: #ffffff; text-align: center; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none; flex-grow: 1; border: 2px solid var(--text-main); box-shadow: 2px 2px 0px var(--text-main);
}

.page-tracker .website-btn {
display: inline-block; background-color: var(--retro-orange); color: #ffffff; text-align: center; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none; flex-grow: 1; border: 2px solid var(--text-main); box-shadow: 2px 2px 0px var(--text-main);
}

.page-tracker .loader {
border: 4px solid var(--border-color); border-top: 4px solid var(--retro-orange); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 3rem auto;
}

.page-tracker #scroll-sentinel {
width: 100%; height: 20px; margin: 2rem 0;
}

.page-tracker footer {
width: 100%; max-width: 1200px; margin: 4rem auto 0 auto; box-sizing: border-box; padding: 2rem 1rem;
            border-top: 2px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;
            font-size: 0.9rem; font-weight: 600;
}

.page-tracker footer a {
color: var(--text-main); text-decoration: none; border-bottom: 2px solid var(--retro-orange);
}

body.page-admin {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f1f5f9; color: var(--text-main);
            margin: 0; padding: 0;
}

.page-admin header {
background-color: #ffffff; border-bottom: 1px solid var(--border-color);
            padding: 1.5rem 2rem; display: flex; justify-content: space-between;
            align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.page-admin header h1 {
margin: 0; font-size: 1.75rem; font-weight: 800; color: var(--accent-blue);
}

.page-admin header h1 span {
color: var(--accent-green);
}

.page-admin .back-link {
font-weight: 700; color: var(--text-muted); text-decoration: none;
            display: inline-flex; align-items: center; gap: 0.25rem;
}

.page-admin .back-link:hover {
color: var(--accent-blue);
}

.page-admin main {
max-width: 1400px; margin: 2rem auto; padding: 0 1.5rem;
}

.page-admin .search-container {
margin-bottom: 2rem; display: flex; gap: 1rem;
}

.page-admin .search-bar {
flex-grow: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color);
            border-radius: 8px; font-size: 1rem; outline: none; background-color: #ffffff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.page-admin .search-bar:focus {
border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(2,77,223,0.1);
}

.page-admin .table-section-heading {
font-size: 1.25rem; font-weight: 800; color: var(--text-main);
            margin: 2rem 0 1rem 0; display: flex; align-items: center; justify-content: space-between;
}

.page-admin .table-section-heading span.badge {
font-size: 0.8rem; background-color: var(--text-muted); color: #ffffff;
            padding: 0.2rem 0.6rem; border-radius: 20px; font-weight: 700;
}

.page-admin .pending-heading span.badge {
background-color: var(--accent-blue);
}

.page-admin .dj-heading span.badge {
background-color: var(--accent-purple);
}

.page-admin .hidden-heading span.badge {
background-color: var(--accent-red);
}

.page-admin .table-container {
background-color: #ffffff; border: 1px solid var(--border-color);
            border-radius: 12px; overflow-x: auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            margin-bottom: 2.5rem;
}

.page-admin table {
width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; table-layout: fixed;
}

.page-admin th {
background-color: #f8fafc; color: var(--text-muted); font-weight: 700; padding: 1rem 0.75rem; border-bottom: 1px solid var(--border-color);
}

.page-admin td {
padding: 1rem 0.75rem; border-bottom: 1px solid var(--border-color); vertical-align: middle;
}

.page-admin tr:hover {
background-color: #f8fafc;
}

.page-admin tr.empty-data-row {
background-color: var(--empty-row-bg);
}

.page-admin tr.empty-data-row:hover {
background-color: var(--empty-row-hover);
}

.page-admin tr.empty-data-row td {
border-bottom: 1px solid var(--empty-border);
}

.page-admin tr.hidden-data-row {
background-color: var(--hidden-bg);
}

.page-admin tr.hidden-data-row:hover {
background-color: var(--hidden-hover);
}

.page-admin tr.hidden-data-row td {
border-bottom: 1px solid var(--hidden-border);
}

.page-admin tr.dj-data-row {
background-color: var(--dj-bg);
}

.page-admin tr.dj-data-row:hover {
background-color: var(--dj-hover);
}

.page-admin tr.dj-data-row td {
border-bottom: 1px solid var(--dj-border);
}

.page-admin .row-num {
font-weight: 700; color: var(--text-muted); width: 35px; text-align: center;
}

.page-admin .band-name-cell {
font-weight: 700; color: var(--text-main); font-size: 0.95rem; word-wrap: break-word;
}

.page-admin .group-cell {
display: flex; flex-direction: column; gap: 0.35rem;
}

.page-admin .label-sub {
font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: -0.15rem;
}

.page-admin .input-field {
width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color);
            border-radius: 6px; font-size: 0.85rem; outline: none; box-sizing: border-box;
            background-color: #f8fafc; transition: all 0.2s ease;
}

.page-admin .input-field:focus {
background-color: #ffffff; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(2,77,223,0.05);
}

.page-admin .action-cell-wrapper {
display: flex; flex-direction: column; gap: 0.4rem; align-items: center; justify-content: center;
}

.page-admin .save-btn {
background-color: var(--accent-blue); color: #ffffff; border: none;
            padding: 0.5rem 0.75rem; border-radius: 6px; font-weight: 700; cursor: pointer;
            width: 100%; text-align: center; font-size: 0.8rem;
}

.page-admin .save-btn.success {
background-color: var(--accent-green);
}

.page-admin .dj-btn {
background-color: var(--accent-purple); color: #ffffff; border: none;
            padding: 0.45rem 0.75rem; border-radius: 6px; font-weight: 700; cursor: pointer;
            width: 100%; text-align: center; font-size: 0.8rem;
}

.page-admin .hide-btn {
background-color: var(--accent-orange); color: #ffffff; border: none;
            padding: 0.45rem 0.75rem; border-radius: 6px; font-weight: 700; cursor: pointer;
            width: 100%; text-align: center; font-size: 0.8rem;
}

.page-admin .unhide-btn {
background-color: var(--accent-green); color: #ffffff; border: none;
            padding: 0.45rem 0.75rem; border-radius: 6px; font-weight: 700; cursor: pointer;
            width: 100%; text-align: center; font-size: 0.8rem;
}

.page-admin .delete-btn {
background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color);
            padding: 0.4rem 0.75rem; border-radius: 6px; font-weight: 600; cursor: pointer;
            width: 100%; text-align: center; font-size: 0.78rem;
}

.page-admin .delete-btn:hover {
background-color: #fee2e2; color: var(--accent-red); border-color: #fca5a5;
}

/* Shared public footer */
.page-landing .site-footer,
.page-venues .site-footer,
.page-signup .site-footer,
.page-tracker .site-footer {
    width: 100%;
    max-width: none;
    margin: 8rem 0 0;
    padding: 0;
    display: block;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.8), transparent 36%),
        linear-gradient(180deg, #fff8ea 0%, #fbefd9 45%, #efc681 100%);
    color: #0e3047;
    box-shadow: inset 0 8px 22px rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.page-landing .site-footer a,
.page-venues .site-footer a,
.page-signup .site-footer a,
.page-tracker .site-footer a {
    color: inherit;
    border: 0;
    text-decoration: none;
}

.site-footer__top {
    width: min(1180px, calc(100% - 4rem));
    margin: 0 auto;
    padding: 2rem 0 1.35rem;
    display: grid;
    grid-template-columns: minmax(310px, 1.35fr) minmax(150px, 0.58fr) minmax(175px, 0.68fr) minmax(250px, 0.85fr);
    gap: 2.4rem;
    align-items: center;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 145px;
    padding-right: 2rem;
    border-right: 2px dotted rgba(169, 130, 48, 0.55);
}

.site-footer__logo {
    width: min(330px, 100%);
    display: block;
    margin: 0 auto -0.6rem;
}

.site-footer__tagline {
    margin: 0;
    color: #15130f;
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__tagline span.orange {
    color: #d95e2b;
    font-weight: 900;
}
.site-footer__tagline span.green {
    color: #68793b;
    font-weight: 900;
}
.site-footer__tagline span.navy {
    color: #0e3047;
    font-weight: 900;
}

.site-footer__column,
.site-footer__contact {
    min-height: 145px;
    padding-right: 2rem;
    border-right: 2px dotted rgba(169, 130, 48, 0.55);
}

.site-footer__contact {
    border-right: 0;
    padding-right: 0;
}

.site-footer h2 {
    margin: 0 0 0.8rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.site-footer__column--explore h2,
.site-footer__follow-title {
    color: #d95e2b;
}

.site-footer__column--company h2 {
    color: #68793b;
}

.site-footer__contact h2 {
    color: #0e3047;
}

.site-footer__column a,
.site-footer__contact-link {
    display: block;
    margin: 0.55rem 0;
    color: #181818;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 650;
}

.site-footer__column a:hover,
.site-footer__contact-link:hover {
    color: #d95e2b;
}

.site-footer__contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-footer__contact-link span {
    width: 1.25rem;
    color: #33312a;
    text-align: center;
}

.site-footer__follow-title {
    margin-top: 1.35rem;
}

.site-footer__socials {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.site-footer__socials span {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0e3047;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
    box-shadow: 2px 2px 0 rgba(14, 48, 71, 0.2);
}

.site-footer__socials svg {
    width: 1.12rem;
    height: 1.12rem;
    display: block;
    color: #ffffff;
    fill: currentColor;
}

.site-footer__socials span:nth-child(2) {
    background: #d95e2b;
}

.site-footer__socials span:nth-child(3) {
    background: #68793b;
}

.site-footer__socials span:nth-child(4) {
    background: #6f716c;
}

.site-footer__stage {
    width: 100%;
    margin-top: -0.25rem;
    border-top: 1px solid rgba(119, 89, 36, 0.34);
    background: #d99a46;
}

.site-footer__stage img {
    width: 100%;
    display: block;
}

.site-footer__bottom {
    width: min(1200px, calc(100% - 4rem));
    margin: 0 auto;
    padding: 1.2rem 0 1.45rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    color: #171411;
    font-size: 0.92rem;
    font-weight: 650;
}

.site-footer__bottom::before,
.site-footer__bottom::after {
    content: "";
    height: 1px;
    background: rgba(169, 130, 48, 0.6);
}

.site-footer__bottom p {
    margin: 0;
    white-space: nowrap;
}

.site-footer__bottom span {
    color: #b98d2f;
}

@media (max-width: 920px) {
    .site-footer__top {
        width: min(100% - 2rem, 420px);
        grid-template-columns: 1fr;
        gap: 1.35rem;
        padding-top: 1.4rem;
        align-items: start;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 0 0 1rem;
        border-right: 0;
    }

    .site-footer__column,
    .site-footer__contact {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 1rem 0 0;
        border-right: 0;
        border-top: 2px dotted rgba(169, 130, 48, 0.42);
        text-align: center;
    }

    .site-footer__contact-link {
        justify-content: center;
    }

    .site-footer__socials {
        justify-content: center;
    }

    .site-footer__bottom {
        width: calc(100% - 2rem);
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer__bottom::before,
    .site-footer__bottom::after {
        display: none;
    }

    .site-footer__bottom p {
        white-space: normal;
    }
}

@media (max-width: 620px) {
    .site-footer__top {
        width: min(100% - 2rem, 420px);
        grid-template-columns: 1fr;
        gap: 1.35rem;
        padding-top: 1.4rem;
    }

    .site-footer__column,
    .site-footer__contact {
        min-height: auto;
        padding: 1rem 0 0;
        border-right: 0;
        border-top: 2px dotted rgba(169, 130, 48, 0.42);
        text-align: center;
    }

    .site-footer__brand {
        min-height: auto;
        padding: 0 0 1rem;
        border-right: 0;
    }

    .site-footer__contact-link {
        justify-content: center;
    }

    .site-footer__socials {
        justify-content: center;
    }

    .site-footer__bottom {
        width: calc(100% - 2rem);
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer__bottom::before,
    .site-footer__bottom::after {
        display: none;
    }

    .site-footer__bottom p {
        white-space: normal;
    }
}