/* SPECIAL 03: standalone SPECIAL-page ornamentation with a canary-yellow accent. */
.access-page { --access-canary: #ECE038; background: radial-gradient(circle at 84% 12%, rgba(236,224,56,.10), transparent 28rem), radial-gradient(circle at 10% 34%, rgba(0,240,255,.07), transparent 26rem), #0b001a; }
.access-page > nav { border-color: var(--access-canary) !important; box-shadow: 0 0 15px rgba(236,224,56,.42) !important; }
.access-page > nav .text-primary-container, .access-page > footer .text-primary-container { color: var(--access-canary) !important; }
.access-page > nav .glitch-text, .access-page > footer .glitch-text { text-shadow: 1px 0 rgba(0,240,255,.42), -1px 0 rgba(236,224,56,.52); }
.access-page > footer { border-color: var(--access-canary) !important; box-shadow: 0 0 15px rgba(236,224,56,.32) inset !important; }
.access-page > footer .hover\:text-primary-container:hover { color: var(--access-canary) !important; }
.access-page > nav .btn-cyan { border-color: var(--access-canary) !important; background: #3b360c; box-shadow: 0 4px 0 #77701b, 0 0 15px rgba(236,224,56,.58); }
.access-page > nav .btn-cyan:active { box-shadow: 0 1px 0 #77701b, 0 0 10px rgba(236,224,56,.48); }
.access-hero { position: relative; overflow: hidden; padding: 8.5rem 24px 3rem; border-bottom: 1px solid rgba(236,224,56,.72); background: linear-gradient(180deg, rgba(27,8,52,.92), rgba(11,0,26,.88)); }
.access-hero::after { position: absolute; inset: auto 0 0; height: 3px; content: ""; background: var(--access-canary); box-shadow: 0 0 8px rgba(236,224,56,.78); }
.access-hero-inner, .access-special-article { position: relative; z-index: 1; width: min(100%, 960px); margin: 0 auto; }
.access-hero h1 { margin: .6rem 0 1.75rem; color: #fff; font-family: var(--font-headline-md); font-size: clamp(30px, 5vw, 56px); line-height: 1.25; letter-spacing: .02em; text-shadow: 2px 0 rgba(0,240,255,.22), -2px 0 rgba(236,224,56,.38), 0 0 18px rgba(236,224,56,.32); }
.access-hero .special-kicker { margin: 0 0 1rem; color: var(--access-canary); font-family: var(--font-label-pixel); font-size: 14px; letter-spacing: .13em; }
.access-hero h1 span { color: var(--access-canary); }
.access-hero h1 .access-title-destination { display: inline-block; font-size: clamp(24px, 7.4vw, 56px); white-space: nowrap; }
.access-thumbnail { position: relative; overflow: hidden; padding: 7px; border: 1px solid var(--access-canary); border-radius: 0; background: #120722; box-shadow: 0 0 0 3px rgba(11,0,26,.9), 0 0 17px rgba(236,224,56,.30); }
.access-thumbnail::after { position: absolute; inset: 0; content: ""; pointer-events: none; border: 1px solid rgba(236,224,56,.75); }
.access-thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.access-special-article { padding: clamp(3rem, 7vw, 5rem) 0; }
.access-lead { display: grid; gap: 1.2rem; margin: 0 0 3rem; padding: clamp(1.4rem,4vw,2.5rem); color: #fff; font-family: var(--font-body-md); font-size: clamp(17px,2.2vw,20px); line-height: 1.8; text-align: left; border-left: 2px solid var(--access-canary); background: rgba(26,11,46,.76); box-shadow: 0 0 0 1px rgba(236,224,56,.34), 0 0 20px rgba(236,224,56,.12); }
.access-lead p + p { margin-top: 0; }
.access-section { position: relative; margin-bottom: 3rem; padding: clamp(1.4rem,4vw,2.5rem); }
.access-page .access-section.rpg-window, .access-page .access-section.neon-border-cyan { border: 1px solid rgba(236,224,56,.72) !important; background: linear-gradient(135deg, rgba(33,16,66,.94), rgba(14,4,31,.92)); box-shadow: 0 0 18px rgba(236,224,56,.12) !important; }
.access-section::before { position: absolute; top: -1px; left: 18px; width: 92px; height: 3px; content: ""; background: var(--access-canary); box-shadow: 0 0 8px rgba(236,224,56,.8); }
.access-section-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; padding-bottom: .9rem; color: #00f0ff; font-family: var(--font-label-pixel); font-size: clamp(17px,2.7vw,23px); letter-spacing: .09em; border-bottom: 1px solid rgba(236,224,56,.56); }
.access-section-heading .material-symbols-outlined { color: var(--access-canary); font-size: 25px; }
.access-copy { color: #e2e2e2; font-family: var(--font-body-md); line-height: 1.9; }
.access-copy small { color: #b9cacb; }
.access-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.access-route li { position: relative; padding: 1rem .7rem; color: #fff; font-family: var(--font-headline-md); text-align: center; border: 1px solid rgba(236,224,56,.72); border-radius: 0; background: linear-gradient(135deg, rgba(33,16,66,.94), rgba(14,4,31,.92)); box-shadow: 0 0 12px rgba(236,224,56,.10); }
.access-route li::before { position: absolute; top: -1px; left: 12px; width: 44px; height: 2px; content: ""; background: var(--access-canary); }
.access-route li:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; right: -.9rem; color: var(--access-canary); font-family: 'Material Symbols Outlined'; content: 'arrow_forward'; transform: translateY(-50%); }
.access-points { display: grid; gap: .8rem; }
.access-points li { position: relative; padding-left: 1.5rem; color: #e2e2e2; font-family: var(--font-body-md); line-height: 1.65; }
.access-points li::before { position: absolute; left: 0; color: var(--access-canary); content: '●'; }
.access-map { overflow: hidden; margin-top: 1.5rem; border: 1px solid rgba(236,224,56,.72); border-radius: 0; box-shadow: 0 0 14px rgba(236,224,56,.12); }
.access-map iframe { display: block; width: 100%; }
.access-map-cta { margin-top: 1.5rem; text-align: center; }
.access-map-cta a, .access-event-info a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .75rem 1rem; }
.access-page main .btn-cyan { border-color: var(--access-canary) !important; background: #3b360c; box-shadow: 0 4px 0 #77701b, 0 0 15px rgba(236,224,56,.58); }
.access-page main .btn-cyan:active { box-shadow: 0 1px 0 #77701b, 0 0 10px rgba(236,224,56,.48); }
.access-event-info { position: relative; margin: 0; padding: clamp(1.5rem,5vw,3rem); text-align: center; border: 1px solid rgba(236,224,56,.82); border-radius: 0; background: linear-gradient(135deg, rgba(33,16,66,.94), rgba(14,4,31,.92)); box-shadow: 0 0 18px rgba(236,224,56,.16); }
.access-event-info::before { position: absolute; top: -1px; left: 18px; width: 92px; height: 3px; content: ""; background: var(--access-canary); box-shadow: 0 0 8px rgba(236,224,56,.8); }
.access-event-info h2 { color: #fff; font-family: var(--font-headline-md); font-size: clamp(24px,4vw,36px); }
.access-event-info p:not(.special-kicker) { margin-top: 1rem; color: #e2e2e2; font-family: var(--font-body-md); line-height: 1.7; }
.access-event-info .special-kicker { margin-bottom: .8rem; color: var(--access-canary); font-family: var(--font-label-pixel); font-size: 13px; letter-spacing: .1em; }
.access-event-flyer { width: min(100%,440px); margin: 1.75rem auto 0; overflow: hidden; padding: 7px; border: 1px solid var(--access-canary); border-radius: 0; background: #120722; box-shadow: 0 0 0 3px rgba(11,0,26,.9), 0 0 17px rgba(236,224,56,.26); }
.access-event-flyer img { display: block; width: 100%; height: auto; }
.access-event-info .access-event-note { width: min(100%, 440px); margin: 1rem auto 0; padding: .8rem 1rem; color: #fff; font-family: var(--font-body-md); font-size: clamp(14px, 2vw, 16px); line-height: 1.7; text-align: left; border: 1px solid var(--access-canary); background: rgba(11,0,26,.58); }
.access-event-info div { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 1099px) { .access-page .mobile-menu-toggle { color: var(--access-canary); border-color: var(--access-canary); box-shadow: 0 0 12px rgba(236,224,56,.5); } .access-page .mobile-nav-menu { border-bottom-color: var(--access-canary); box-shadow: 0 10px 20px rgba(236,224,56,.25); } .access-page .mobile-nav-menu a { border-color: rgba(236,224,56,.72); } .access-page .mobile-nav-menu a:hover { color: var(--access-canary); } }
@media (max-width: 640px) { .access-hero { padding: 7rem 16px 2rem; } .access-hero .special-kicker { font-size: 12px; } .access-lead { text-align: left; } .access-section { margin-bottom: 2.5rem; } .access-section-heading { margin-bottom: 1.1rem; font-size: 17px; } .access-route { grid-template-columns: 1fr; gap: .7rem; } .access-route li:not(:last-child)::after { top: auto; right: 50%; bottom: -.85rem; transform: translateX(50%) rotate(90deg); } .access-map-cta a { width: 100%; } }