:root {
    --oro-announcement-h: 2rem;
    --oro-nav-h: 5rem;
    --oro-header-offset: calc(var(--oro-announcement-h) + var(--oro-nav-h));
}

body {
    background-color: #FBFBF9;
    color: #0A0A0A;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fixed-height nav — logo scales inside the bar without shifting layout */
.site-nav {
    top: var(--oro-announcement-h);
    height: var(--oro-nav-h);
    min-height: var(--oro-nav-h);
    max-height: var(--oro-nav-h);
    padding-top: 0;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
}

.site-nav__col {
    min-width: 0;
}

.site-nav__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-height: calc(var(--oro-nav-h) - 1rem);
    line-height: 0;
}

.site-nav__logo-link img {
    display: block;
    height: auto;
    width: auto;
    max-height: calc(var(--oro-nav-h) - 1.25rem);
    max-width: min(17.5rem, 42vw);
    object-fit: contain;
}

@media (min-width: 768px) {
    .site-nav__logo-link img {
        max-height: calc(var(--oro-nav-h) - 1rem);
        max-width: min(21.25rem, 28vw);
    }
}

.oro-hero {
    margin-top: var(--oro-header-offset);
    min-height: calc(100svh - var(--oro-header-offset));
}

::selection { background-color: #9C7E4E; color: #FFFFFF; }

.reveal { opacity: 0; transform: translateY(40px); transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 150ms; }
.delay-2 { transition-delay: 300ms; }
.delay-3 { transition-delay: 450ms; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.atelier-wireframe {
    border: 1px solid rgba(10,10,10,0.05);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.2em;
    color: rgba(10,10,10,0.4); text-transform: uppercase; background: transparent;
}

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #9C7E4E; outline-offset: 3px; }

.hoverdark { transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, transform .7s cubic-bezier(0.19,1,0.22,1), opacity .7s; }
@media (hover: hover) {
    .hoverdark:hover { background-color: #0A0A0A !important; box-shadow: 0 24px 60px rgba(0,0,0,.30); }
    .hoverdark:hover .hd-text { color: #FBFBF9 !important; }
    .hoverdark:hover .hd-mute { color: rgba(251,251,249,.65) !important; }
    .hoverdark:hover .hd-gold { color: #9C7E4E !important; }
    .hoverdark:hover .hd-btn { border-color: #FBFBF9 !important; color: #FBFBF9 !important; }
    #state-scroller .spot-card:hover { background-color: #0A0A0A !important; color: #FBFBF9 !important; box-shadow: 0 24px 60px rgba(0,0,0,.30); opacity: 1 !important; transform: scale(1) !important; }
    #state-scroller .spot-card:hover [data-answer] { opacity: 1 !important; transform: none !important; }
    #state-scroller .spot-card .hd-star { transition: color .45s ease; }
    #state-scroller .spot-card:hover .hd-star { color: #9C7E4E !important; }
}

[x-cloak] { display: none !important; }