:root {
    color-scheme: dark;
    --night: #102f26;
    --night-soft: #194438;
    --paper: #f1ede3;
    --coral: #d97861;
    --gold: #d1b06f;
    --line: rgba(241, 237, 227, .18);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; }
body { color: var(--paper); background: var(--night); }
a { color: inherit; text-decoration: none; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.browse-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 72px;
    padding: 0 clamp(20px, 3.5vw, 62px);
    display: grid;
    grid-template-columns: auto auto minmax(260px, 430px) auto auto;
    align-items: center;
    gap: clamp(18px, 2.2vw, 36px);
    border-bottom: 1px solid var(--line);
    color: var(--paper);
    background: rgba(13, 43, 34, .96);
    backdrop-filter: blur(18px);
}

.browse-brand { display: flex; align-items: center; gap: 10px; font: 600 1.25rem Georgia, serif; }
.browse-brand img { width: auto; max-width: 132px; height: 32px; object-fit: contain; }
.browse-main-nav { align-self: stretch; display: flex; gap: 27px; }
.browse-main-nav a { position: relative; display: flex; align-items: center; color: rgba(241,237,227,.58); font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.browse-main-nav a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.browse-main-nav a.active, .browse-main-nav a:hover { color: #fff; }
.browse-main-nav a.active::after { background: var(--gold); }

.browse-search {
    height: 38px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid rgba(241,237,227,.38);
}

.browse-search > span { position: relative; width: 12px; height: 12px; border: 1px solid rgba(241,237,227,.72); border-radius: 50%; }
.browse-search > span::after { content: ""; position: absolute; right: -4px; bottom: -2px; width: 5px; height: 1px; background: rgba(241,237,227,.72); transform: rotate(45deg); }
.browse-search input { min-width: 0; padding: 0 10px; border: 0; outline: 0; color: var(--paper); background: transparent; font: inherit; font-size: .72rem; }
.browse-search input::placeholder { color: rgba(241,237,227,.42); }
.browse-search button { height: 100%; padding: 0 0 0 14px; border: 0; color: var(--gold); background: transparent; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.browse-languages { display: flex; gap: 6px; font-size: .61rem; }
.browse-languages a { padding: 5px; opacity: .45; }
.browse-languages a.active { opacity: 1; color: var(--gold); }
.browse-login { padding-left: 20px; border-left: 1px solid var(--line); white-space: nowrap; font-size: .68rem; font-weight: 650; }
.browse-login span { margin-left: 7px; color: var(--gold); }
.browse-user-menu { position: relative; min-width: 0; }
.browse-user-menu summary {
    min-height: 34px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    border-left: 1px solid var(--line);
    white-space: nowrap;
    color: var(--paper);
    font-size: .68rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.browse-user-menu summary::-webkit-details-marker { display: none; }
.browse-user-menu summary i {
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
}
.browse-user-menu[open] summary i { transform: translateY(2px) rotate(225deg); }
.browse-user-menu nav {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    z-index: 80;
    display: grid;
    min-width: 190px;
    border: 1px solid rgba(209,176,111,.48);
    color: var(--paper);
    background: #123b30;
    box-shadow: 0 18px 42px rgba(4,20,15,.34);
}
.browse-user-menu nav a {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: .68rem;
    font-weight: 700;
}
.browse-user-menu nav a:last-child { border-bottom: 0; }
.browse-user-menu nav a:hover { color: var(--night); background: var(--gold); }
.browse-user-menu nav .browse-user-logout { color: #eba18f; }
.museum-menu-toggle,.museum-mobile-menu,.museum-menu-backdrop { display:none; }

.museum-layout {
    min-height: calc(100svh - 72px);
    display: block;
}

.museum-exhibit {
    position: fixed;
    top: 72px;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 43%;
    height: auto;
    min-height: 0;
    max-height: none;
    contain: layout paint size;
    padding: clamp(30px, 4vh, 48px) clamp(30px, 4.5vw, 74px) 24px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    background: var(--night-soft);
}

.museum-exhibit::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.018) 34px 35px);
}

.museum-heading, .museum-stats { position: relative; z-index: 2; }
.museum-chapter { margin: 0 0 17px; color: #e39785; font-size: .62rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.museum-heading h1 { margin: 0; font: 600 clamp(2.8rem, 4.3vw, 4.8rem)/.88 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.museum-intro { max-width: 430px; margin: 20px 0 0; color: rgba(241,237,227,.6); font-size: .82rem; line-height: 1.55; }

.stamp-composition { position: relative; align-self: center; width: min(28vw, 410px); height: min(28vw, 410px); margin: 0 auto; perspective: 900px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; pointer-events: none; }
.orbit-one { inset: 3%; }
.orbit-two { inset: 19% -8% -4% 22%; }
.stamp-cylinder { position: absolute; inset: 10% 3% 7%; display: grid; place-items: center; transform: rotateX(-9deg); transform-style: preserve-3d; }
.stamp-ring { position: relative; width: 96px; height: 118px; transform-style: preserve-3d; animation: stamp-cylinder 24s linear infinite; }
.stamp-ring > span { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(calc(var(--i) * 45deg)) translateZ(132px); backface-visibility: visible; background: transparent; }
.stamp-ring img { width: 86px; height: 105px; object-fit: contain; opacity: .94; background: transparent; filter: drop-shadow(0 13px 9px rgba(0,0,0,.38)); }
.stamp-ring > span:nth-child(even) img { width: 75px; height: 94px; transform: translateY(8px) rotate(3deg); }
.cylinder-axis { position: absolute; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; transform: rotateX(90deg); box-shadow: 0 0 55px rgba(209,176,111,.08); }
.stamp-composition:hover .stamp-ring { animation-play-state: paused; }
.stamp-carousel-mobile { display: none; }
.stamp-carousel-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stamp-carousel-image { filter: drop-shadow(0 10px 8px rgba(0,0,0,.42)); }
.stamp-carousel-track { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 1; pointer-events: none; }
.stamp-carousel-track--back { stroke-dasharray: 3 7; }
.stamp-carousel-track--front { stroke: rgba(209,176,111,.14); stroke-dasharray: 125 790; stroke-dashoffset: -248; }
.museum-years { position: absolute; right: -4%; top: 17%; color: var(--gold); font: 600 clamp(1.8rem,3vw,3rem) Georgia, serif; writing-mode: vertical-rl; }
.museum-specimen { position: absolute; left: 3%; bottom: 9%; color: rgba(255,255,255,.34); font-size: .5rem; letter-spacing: .12em; line-height: 1.7; }

.museum-stats { display: flex; gap: 30px; padding-top: 17px; border-top: 1px solid var(--line); color: rgba(241,237,227,.52); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.museum-index { min-height: calc(100svh - 72px); padding: 32px clamp(28px, 4vw, 66px) 24px; display: grid; grid-template-rows: auto 1fr auto; color: #163027; background: #ebe7dd; }
.museum-index { width: 57%; min-width: 0; margin-left: 43%; }
.museum-index-head { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid rgba(22,48,39,.45); }
.museum-index-head p, .museum-index-head span { margin: 0; font-size: .62rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.museum-index-head span { color: #77827d; }
.museum-period-list { display: grid; }
.museum-period { min-height: 72px; padding: 0 17px; display: grid; grid-template-columns: minmax(112px,.7fr) minmax(190px,1.4fr) minmax(150px,1fr) 20px; align-items: center; gap: 16px; border-bottom: 1px solid rgba(22,48,39,.16); transition: background .18s ease, color .18s ease; }
.museum-period-years { font: 600 .78rem Georgia, serif; }
.museum-period strong { font: 600 clamp(1.05rem,1.35vw,1.42rem)/1.05 Georgia, serif; letter-spacing: -.02em; }
.museum-period-count { color: #78817c; font-size: .64rem; }
.museum-period i { color: var(--coral); font-style: normal; font-size: 1rem; opacity: 0; transform: translateX(-7px); transition: .18s ease; }
.museum-period:hover, .museum-period:focus-visible { outline: 0; color: var(--night); background: var(--coral); }
.museum-period:hover .museum-period-count { color: rgba(16,37,31,.62); }
.museum-period:hover i { opacity: 1; transform: none; }
.museum-catalog-link { padding-top: 18px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; font-size: .66rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.museum-catalog-link span, .museum-catalog-link i { font-size: 1rem; font-style: normal; }
.museum-catalog-link:hover { color: #b65440; }
.museum-empty { color: #68736e; }

@keyframes stamp-cylinder { to { transform: rotateY(-360deg); } }

@media (max-width: 1080px) {
    .browse-topbar { grid-template-columns: auto 1fr minmax(230px, 340px) auto; }
    .browse-main-nav { justify-self: end; }
    .browse-languages { display: flex; }
    .museum-exhibit { width: 39%; }
    .museum-index { width: 61%; margin-left: 39%; }
    .museum-period { grid-template-columns: 110px 1fr 20px; }
    .museum-period-count { display: none; }
    .stamp-composition { width: 32vw; height: 32vw; }
}

@media (max-width: 980px) and (min-width: 761px) {
    .browse-topbar {
        grid-template-columns: auto minmax(220px, 1fr) auto;
        gap: 22px;
    }

    .browse-brand strong,
    .browse-main-nav {
        display: none;
    }

    .browse-search {
        min-width: 0;
    }

    .browse-login {
        display: block;
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 760px) {
    .browse-topbar { height: auto; min-height: 68px; padding: 11px 20px; grid-template-columns: 1fr auto auto; gap: 9px 12px; }
    .browse-brand strong { display: none; }
    .browse-main-nav { display: none; }
    .browse-languages { align-self: center; gap: 0; }
    .browse-languages a { min-width: 30px; padding: 6px 5px; text-align: center; }
    .browse-login { padding-left: 0; border: 0; font-size: .63rem; }
    .browse-user-menu summary { min-height: 30px; padding-left: 0; border-left: 0; font-size: .63rem; }
    .browse-user-menu summary span { max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
    .browse-user-menu nav { top: calc(100% + 10px); min-width: 175px; }
    .browse-search { grid-column: 1 / -1; grid-row: 2; }
    .museum-layout { display: block; }
    .museum-exhibit { position: relative; top: auto; width: 100%; height: auto; min-height: 560px; max-height: none; contain: none; padding: 36px 24px 22px; }
    .museum-index { width: 100%; margin-left: 0; }
    .stamp-composition { width: min(280px, 82vw); height: min(280px, 82vw); perspective: none; }
    .stamp-cylinder { inset: 2%; transform: none; overflow: hidden; }
    .stamp-ring,
    .cylinder-axis { display: none; }
    .stamp-carousel-mobile { width: 100%; height: 100%; display: block; }
    .mobile-browser-3d .stamp-composition {
        perspective: 900px;
    }
    .mobile-browser-3d .stamp-cylinder {
        inset: 5% 18% 5% 0;
        overflow: visible;
        transform: translateY(-26px) rotateX(-18deg) scale(.68);
        transform-origin: center;
        transform-style: preserve-3d;
    }
    .mobile-browser-3d .stamp-ring {
        width: 96px;
        height: 118px;
        display: block;
        animation: stamp-cylinder 24s linear infinite;
    }
    .mobile-browser-3d .stamp-ring > span {
        display: grid;
    }
    .mobile-browser-3d .cylinder-axis {
        display: block;
    }
    .mobile-browser-3d .stamp-carousel-mobile {
        display: none;
    }
    .mobile-browser-3d .museum-specimen {
        bottom: 1%;
    }
    .museum-years { z-index: 3; right: 0; top: 12%; font-size: 1.75rem; text-shadow: 0 2px 8px var(--night); }
    .museum-stats { justify-content: space-between; gap: 10px; }
    .museum-index { min-height: 0; padding: 28px 20px; }
    .museum-period { min-height: 72px; padding: 0 9px; grid-template-columns: 112px 1fr 18px; }
    .museum-period strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .stamp-ring { animation: none; transform: rotateY(-18deg); }
    .stamp-carousel-svg animate { display: none; }
    .museum-period, .museum-period i { transition: none; }
}

@media (max-width: 1180px) {
    html,body { overflow-x:hidden; }
    body.museum-menu-open { overflow:hidden; }
    .browse-topbar { grid-template-columns:auto minmax(220px,1fr) 46px; gap:clamp(16px,3vw,30px); }
    .browse-main-nav,.browse-languages,.browse-login,.browse-user-menu { display:none; }
    .browse-search { width:min(100%,520px); min-width:0; justify-self:end; }
    .museum-menu-toggle { position:relative; z-index:102; width:44px; height:44px; padding:11px 10px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:1px solid rgba(209,176,111,.55); color:var(--paper); background:transparent; cursor:pointer; }
    .museum-menu-toggle span { width:100%; height:1px; display:block; background:var(--paper); transition:.2s ease; }
    .museum-menu-toggle span:nth-child(2) { width:70%; align-self:flex-end; background:var(--gold); }
    .museum-menu-open .museum-menu-toggle span:first-child { transform:translateY(6px) rotate(45deg); }
    .museum-menu-open .museum-menu-toggle span:nth-child(2) { opacity:0; }
    .museum-menu-open .museum-menu-toggle span:last-child { transform:translateY(-6px) rotate(-45deg); }
    .museum-menu-backdrop { position:fixed; inset:0; z-index:90; display:block; visibility:hidden; opacity:0; background:rgba(4,20,15,.68); backdrop-filter:blur(3px); transition:.22s ease; }
    .museum-mobile-menu { position:fixed; top:0; right:0; bottom:0; z-index:100; width:min(390px,calc(100vw - 38px)); padding:25px 26px 30px; display:flex; flex-direction:column; overflow-y:auto; color:var(--paper); background:#10372c; border-left:1px solid rgba(209,176,111,.5); box-shadow:-22px 0 55px rgba(3,17,13,.35); transform:translateX(102%); transition:transform .24s ease; }
    .museum-menu-open .museum-menu-backdrop { visibility:visible; opacity:1; }
    .museum-menu-open .museum-mobile-menu { transform:none; }
    .museum-mobile-menu > header { min-height:48px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); }
    .museum-mobile-menu > header > span { color:var(--gold); font:700 .72rem Georgia,serif; letter-spacing:.16em; text-transform:uppercase; }
    .museum-mobile-menu > header button { width:34px; height:34px; margin-top:-8px; display:grid; place-items:center; color:var(--paper); background:transparent; border:0; font-size:1.55rem; cursor:pointer; }
    .museum-mobile-primary { margin-top:18px; border-top:1px solid var(--line); }
    .museum-mobile-primary a { min-height:58px; display:grid; grid-template-columns:35px 1fr 20px; align-items:center; border-bottom:1px solid var(--line); color:rgba(241,237,227,.74); font:700 .8rem Georgia,serif; }
    .museum-mobile-primary a > span { color:rgba(209,176,111,.58); font:.61rem Arial,sans-serif; }
    .museum-mobile-primary a > i { color:var(--gold); font-style:normal; }
    .museum-mobile-primary a.active { color:#fff; background:rgba(255,255,255,.035); }
    .museum-mobile-primary a.active > span { color:var(--gold); }
    .museum-mobile-language { margin-top:25px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
    .museum-mobile-language > strong { color:rgba(241,237,227,.52); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
    .museum-mobile-language nav { display:flex; border:1px solid var(--line); }
    .museum-mobile-language a { min-width:42px; padding:8px; color:rgba(241,237,227,.5); text-align:center; font-size:.62rem; }
    .museum-mobile-language a.active { color:#102f26; background:var(--gold); }
    .museum-mobile-account { margin-top:auto; padding-top:24px; display:grid; border-top:1px solid var(--line); }
    .museum-mobile-account > strong { margin-bottom:10px; color:var(--gold); font:700 1rem Georgia,serif; }
    .museum-mobile-account > a { padding:8px 0; color:rgba(241,237,227,.75); font-size:.7rem; }
    .museum-mobile-account > a.is-logout { margin-top:6px; color:#eba18f; }
    .museum-mobile-account > a.is-login { min-height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; color:#102f26; background:var(--gold); font-weight:800; text-transform:uppercase; }
}

@media (max-width:760px) {
    .browse-topbar { height:auto; min-height:68px; padding:11px 20px; grid-template-columns:minmax(0,1fr) 44px; gap:9px 14px; }
    .browse-brand img { max-width:118px; height:30px; }
    .browse-search { grid-column:1/-1; grid-row:2; width:100%; }
    .museum-mobile-menu { width:min(350px,calc(100vw - 24px)); padding:22px 21px 26px; }
}