/* Global design tokens and baseline styles; adjust tokens here to update the shared site palette. */
@font-face{
font-family:"Cinzel";
font-style:normal;
font-weight:500 700;
font-display:swap;
src:url("fonts/cinzel-latin.woff2") format("woff2");
}

@font-face{
font-family:"Source Sans 3";
font-style:normal;
font-weight:300 700;
font-display:swap;
src:url("fonts/source-sans-3-latin.woff2") format("woff2");
}

:root{
color-scheme:light;
--navy:#102946;
--navy-dark:#08192d;
--gold:#d4b16a;
--gold-light:#e8cf98;
--parchment:#f3eee3;
--stone:#ddd5c7;
--ink:#1d2430;
--surface:#fff;
--nav-text:var(--navy);
--link-color:var(--navy);
--input-surface:var(--parchment);
}

html[data-theme="dark"]{
color-scheme:dark;
--parchment:#111a28;
--stone:#39485b;
--ink:#e7ebf1;
--surface:#1b293b;
--nav-text:#f3eee3;
--link-color:#f1d38f;
--input-surface:#243449;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html, body, body *, body *::before, body *::after{
transition:background-color .3s ease,color .3s ease,border-color .3s ease,outline-color .3s ease,box-shadow .3s ease,fill .3s ease,stroke .3s ease,text-decoration-color .3s ease;
}

@media(prefers-reduced-motion:reduce){
html, body, body *, body *::before, body *::after{
transition-duration:0s;
}
}

::view-transition-old(root),
::view-transition-new(root){
animation-duration:.65s;
animation-timing-function:ease-in-out;
}

@media(prefers-reduced-motion:reduce){
::view-transition-old(root),
::view-transition-new(root){
animation-duration:0s;
}
}

html{
scroll-behavior:smooth;
}

body{
background:var(--parchment);
color:var(--ink);
font-family:"Source Sans 3",sans-serif;
line-height:1.6;
}

a:not(.button):not(.brand):not(.nav-social-link):not(.nav-ticket):not(.footer-social-link){
text-decoration:underline;
text-decoration-color:var(--gold-light);
text-underline-offset:3px;
}

main a:not(.button):not(.hero-venue-link),
main a:not(.button):not(.hero-venue-link):visited{
color:var(--link-color);
font-weight:600;
text-decoration-color:var(--gold);
text-decoration-thickness:2px;
}

h1,h2,h3,
.brand{
font-family:"Cinzel",serif;
}

/* Site header, brand identity, and primary navigation. */
.site-header{
position:-webkit-sticky;
position:sticky;
top:14px;
z-index:1000;
background:var(--parchment);
display:flex;
justify-content:space-between;
align-items:center;
padding:5px 5%;
border-bottom:3px solid var(--gold);
}

.brand{
display:flex;
align-items:center;
gap:12px;
font-size:1.3rem;
font-weight:700;
text-decoration:none;
color:var(--nav-text);
}

.brand-mark{
color:var(--gold);
font-size:1.8rem;
}

.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.main-nav{
display:flex;
align-items:center;
gap:30px;
}

.main-nav a{
text-decoration:none;
color:var(--nav-text);
font-weight:700;
}

.site-header .main-nav a:not(.button):not(.brand):not(.nav-social-link):not(.nav-ticket):not(.footer-social-link){
text-decoration:none;
}

.nav-social-link{
display:inline-flex;
align-items:center;
gap:6px;
}

.nav-social-icon{
width:16px;
height:16px;
fill:currentColor;
stroke:currentColor;
stroke-width:2;
}

.nav-social-icon rect,
.nav-social-icon circle{
fill:none;
}

.nav-social-icon path{
stroke:none;
}

.nav-social-icon .nav-social-icon-dot{
fill:currentColor;
stroke:none;
}

.nav-ticket{
background:var(--gold);
color:var(--navy) !important;
padding:4px 16px;
border-radius:4px;
white-space:nowrap;
transition:background .2s ease,transform .2s ease;
}

.nav-ticket:hover{
background:var(--gold-light);
transform:translateY(-1px);
}

.nav-ticket:focus-visible{
outline:3px solid var(--navy);
outline-offset:3px;
}

.theme-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:1px solid var(--stone);
border-radius:4px;
background:transparent;
color:var(--nav-text);
font:inherit;
font-size:1.35rem;
line-height:1;
cursor:pointer;
}

.theme-toggle:hover{
background:var(--surface);
}

.theme-toggle:focus-visible{
outline:3px solid var(--gold);
outline-offset:3px;
}

.menu-toggle{
display:none;
background:none;
border:none;
color:var(--ink);
font-size:2rem;
}

/* Hero layout, background, and event introduction. */
.hero{
min-height:80vh;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(20px,2.4vw,36px);
align-items:center;

background:
linear-gradient(
rgba(8,25,45,.82),
rgba(8,25,45,.82)
),
url("images/boardgame-players.jpg");

background-size:cover;
background-position:center;
color:white;
padding:80px 8%;
}

.hero-emblem{
grid-column:2;
grid-row:1;
width:100%;
max-width:760px;
aspect-ratio:744 / 458;
justify-self:center;
}

@media(min-width:1101px){
.hero-emblem{
background:url("images/olympicon-crest.png") center / contain no-repeat;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));
}
}

.hero-content{
grid-column:1;
grid-row:1;
width:100%;
max-width:760px;
min-width:0;
}

.eyebrow{
color:var(--gold-light);
letter-spacing:.2em;
font-weight:700;
margin-bottom:15px;
}

.hero-date{
display:inline-block;
padding:8px 14px;
background:var(--gold);
color:var(--navy);
font-size:clamp(.9rem,1.3vw,1.1rem);
letter-spacing:.14em;
margin-bottom:18px;
}

.dark{
color:var(--gold);
}

h1{
font-size:5rem;
line-height:1;
margin-bottom:30px;
}

h1 span{
color:var(--gold-light);
}

.hero-copy{
font-size:1.2rem;
max-width:760px;
margin-bottom:35px;
}

.hero-actions{
display:flex;
gap:20px;
margin-bottom:40px;
}

.button{
display:inline-block;
padding:14px 28px;
text-decoration:none;
font-weight:700;
}

.button-gold{
background:var(--gold);
color:var(--navy);
}

.button-outline{
border:2px solid white;
color:white;
}

.hero-meta{
display:flex;
gap:40px;
flex-wrap:wrap;
}

.hero-meta strong{
display:block;
color:var(--gold-light);
}

.hero-venue-link,
.hero-venue-link:visited{
color:white;
text-decoration:underline;
text-decoration-color:var(--gold-light);
text-underline-offset:3px;
}

.hero-venue-link:hover,
.hero-venue-link:focus-visible{
color:var(--gold-light);
}

/* Content sections and activity cards. */
.intro,
.activities,
.what-to-expect,
.visit-section,
.faq-section{
width:min(1200px,90%);
margin:auto;
padding:40px 0;
}

/* Shared contact-card layout used by both the contact and exhibitor enquiry pages. */
.contact-section{
width:min(900px,90%);
margin:auto;
padding:90px 0;
}

.contact-card{
background:var(--surface);
border:2px solid var(--gold);
padding:clamp(28px,6vw,60px);
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.contact-card h1{
font-size:clamp(2.4rem,6vw,3.5rem);
margin-bottom:20px;
}

.contact-card h2{
font-size:1.35rem;
margin-top:28px;
margin-bottom:8px;
}

.travel-section-divider{
border:0;
border-top:1px solid var(--stone);
margin:48px 0;
}

.contact-card p + p{
margin-top:16px;
}

/* Shared form layout and controls; keep labels and visible keyboard focus for accessibility. */
.contact-form{
display:grid;
gap:20px;
margin-top:30px;
}

.contact-field{
display:grid;
gap:6px;
}

.contact-field label{
font-weight:700;
}

.contact-field input,
.contact-field textarea{
width:100%;
padding:12px 14px;
border:1px solid var(--stone);
background:var(--input-surface);
color:var(--ink);
font:inherit;
}

.contact-field textarea{
min-height:150px;
resize:vertical;
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible{
outline:3px solid var(--navy);
outline-offset:2px;
}

.contact-form button{
justify-self:start;
border:0;
font:inherit;
cursor:pointer;
}

.contact-form button:focus-visible,
.contact-back-link:focus-visible{
outline:3px solid var(--navy);
outline-offset:3px;
}

.contact-card .button-outline{
color:var(--ink);
border-color:var(--nav-text);
}

.contact-back-link{
margin-top:28px;
}

.section-divider{
height:4px;
background:var(--gold);
width:150px;
margin:auto;
}

.section-title{
margin-bottom:40px;
}

.section-title h2{
font-size:3rem;
}

.card-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.feature-card{
background:var(--surface);
border:2px solid var(--gold);
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.feature-card img{
width:100%;
height:260px;
object-fit:cover;
}

.card-content{
padding:24px;
}

.card-label{
font-size:.8rem;
font-weight:700;
letter-spacing:.15em;
color:var(--gold);
margin-bottom:10px;
}

.tickets-section{
background:var(--navy);
color:white;
padding:100px 8%;
}

.ticket-copy{
max-width:720px;
margin:auto;
}

.ticket-copy ul{
margin:0 0 30px;
padding-left:24px;
}

.visit-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:30px;
}

.visit-item{
background:var(--surface);
padding:30px;
border:1px solid var(--stone);
}

.event-item p + p,
.venue-details p + p{
margin-top:10px;
}

.event-calendar-links{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.event-item .event-calendar-label{
margin-top:48px;
margin-bottom:8px;
font-weight:700;
}

.getting-here-travel{
margin-top:48px;
}

.event-calendar-button{
padding:8px 14px;
font-size:.9rem;
}

.venue-item{
display:flex;
align-items:center;
gap:20px;
}

.venue-image{
width:140px;
height:140px;
flex-shrink:0;
object-fit:cover;
border:1px solid var(--stone);
}

.venue-details{
min-width:0;
}

.venue-details h3{
margin-bottom:8px;
}

.visit-symbol{
font-size:2rem;
margin-bottom:12px;
}

/* Venue map and frequently asked questions. */
.venue-map{
position:relative;
min-width:0;
border:3px solid var(--gold);
box-shadow:0 15px 35px rgba(0,0,0,.08);
background:linear-gradient(135deg,rgba(17,29,57,.96),rgba(40,56,88,.92));
}

.travel-page-map{
width:100%;
height:clamp(420px,65vh,680px);
margin:0 auto 30px;
}

.venue-map iframe{
display:block;
width:100%;
height:100%;
min-height:300px;
border:0;
background:var(--parchment);
}

.map-load-overlay{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(17,29,57,.78), rgba(17,29,57,.92));
color:white;
z-index:1;
transition:opacity .2s ease, visibility .2s ease;
padding:24px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:28px;
text-align:center;
}

.map-load-button{
padding:10px 18px;
border:1px solid var(--gold);
background:rgba(212,177,106,.1);
color:white;
font:inherit;
font-size:.85rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
cursor:pointer;
}

.map-load-button:hover,
.map-load-button:focus-visible{
background:rgba(212,177,106,.24);
}

.map-load-message{
max-width:420px;
margin:0;
color:rgba(255,255,255,.82);
font-size:.62rem;
line-height:1.5;
letter-spacing:0;
text-transform:none;
font-weight:400;
}

.venue-map .map-load-message a:not(.button):not(.hero-venue-link),
.venue-map .map-load-message a:not(.button):not(.hero-venue-link):visited{
color:#f2d48f;
text-decoration:underline;
text-decoration-color:#f2d48f;
text-underline-offset:3px;
}

.venue-map .map-load-message a:not(.button):not(.hero-venue-link):hover,
.venue-map .map-load-message a:not(.button):not(.hero-venue-link):focus-visible{
color:white;
}

.venue-map.is-loaded .map-load-overlay{
visibility:hidden;
opacity:0;
pointer-events:none;
}

.visit-contact-box{
display:flex;
align-items:center;
gap:20px;
margin-top:24px;
padding:24px 30px;
background:var(--surface);
border:1px solid var(--stone);
}

.visit-contact-box .visit-symbol{
flex-shrink:0;
margin:0;
}

.visit-contact-copy h3{
margin-bottom:4px;
}

.visit-contact-copy p{
margin:0;
}

.visit-contact-box .button{
flex-shrink:0;
margin-left:auto;
}

.faq-list details{
border-top:1px solid var(--stone);
padding:18px 0;
}

.faq-list summary{
cursor:pointer;
font-weight:700;
}

.site-footer{
background:var(--navy-dark);
color:white;
text-align:center;
padding:60px 20px;
border-top:4px solid var(--gold);
}

.footer-social-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin:0;
padding:10px 20px;
background:transparent;
color:white;
border:1px solid var(--gold);
transition:background .2s ease,color .2s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible{
background:rgba(212,177,106,.12);
color:var(--gold-light);
}

.footer-primary-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-top:24px;
}

.footer-social-icon{
width:20px;
height:20px;
fill:currentColor;
stroke:currentColor;
stroke-width:2;
}

.footer-social-icon rect,
.footer-social-icon circle{
fill:none;
}

.footer-social-icon path{
stroke:none;
}

.footer-social-icon .footer-social-icon-dot{
fill:currentColor;
stroke:none;
}

.footer-utility-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px 24px;
margin-top:20px;
}

.footer-utility-link{
color:rgba(255,255,255,.9);
font-size:1rem;
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}

.footer-utility-link:hover,
.footer-utility-link:focus-visible{
color:white;
}

.footer-cookie-notice{
font-size:.875rem;
margin:24px 0 0;
}

.footer-cookie-notice a{
color:white;
text-decoration-color:var(--gold-light);
text-underline-offset:3px;
}

.footer-cookie-notice a:visited{
color:white;
}

.footer-cookie-notice a:hover,
.footer-cookie-notice a:focus-visible{
color:white;
}

/* Tablet and smaller desktop layouts; the same breakpoint switches the header to its menu button. */
@media(max-width:1100px){

.hero{
grid-template-columns:minmax(0,1fr);
}

.hero-emblem{
display:none;
}

.hero-content{
max-width:700px;
}

.card-grid,
.visit-grid{
grid-template-columns:1fr;
}

.menu-toggle{
display:block;
}

.main-nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:var(--parchment);
flex-direction:column;
align-items:stretch;
padding:20px;
}

.main-nav.open{
display:flex;
}

h1{
font-size:3.3rem;
}
}

/* Intermediate desktop heading scale. */
@media(min-width:1101px) and (max-width:1280px){
h1{
font-size:clamp(4.1rem,6vw,4.5rem);
}
}

/* Keep the hero columns within a readable width on very large screens. */
@media(min-width:1853px){
.hero{
grid-template-columns:repeat(2,minmax(0,760px));
justify-content:center;
}
}

/* Stack venue details on narrow mobile screens. */
@media(max-width:600px){
.venue-item{
align-items:flex-start;
flex-direction:column;
}

.visit-contact-box{
align-items:flex-start;
flex-direction:column;
}

.visit-contact-box .button{
margin-left:0;
}

.venue-image{
width:100%;
height:180px;
}
}

/* Repeating Greek-key ornament used between major page regions. */
.greek-border {
  height: 14px;
  background-color: var(--navy);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M1 13V1H13V9H5V5H9 M17 1H29V13H21V5H25 M33 1H39V13' fill='none' stroke='%23d4b16a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 14px;
}

body > .greek-border:first-child {
  position: sticky;
  top: 0;
  z-index: 1001;
}