/* Component-owned styles. Original design and responsive/state values preserved. */

/* Theme, reset, typography, and accessibility. */
:root {
    color-scheme: light; --paper: #f3eddf; --ink: #24382f; --muted: #6f7567; --line: #cfcab9; --accent: #a44731;
    --gold: #dcc39a; --serif: Georgia, "Times New Roman", serif; --sans: "Segoe UI", Arial, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background: url("../assets/home/paper-grain.svg") repeat; }
::selection { color: var(--paper); background: #435d43; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.page-shell { max-width: 1536px; padding: 0 48px; margin: 0 auto; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 18px; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
h2 { margin: 0; font-family: var(--serif); font-size: clamp(35px, 3.4vw, 49px); line-height: 1.05; font-weight: 400; letter-spacing: -1.2px; transition: color 500ms var(--ease); }
@media (max-width: 1100px) {
    .page-shell { padding: 0 32px; }
}
@media (max-width: 850px) {
    h2 { font-size: 38px; }
}
@media (max-width: 700px) {
    .page-shell { --muted: #596254; padding: 0 20px; }
}
@media (max-width: 370px) {
    .page-shell { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    *::before { transition: none !important; animation: none !important; }
    *::after { transition: none !important; animation: none !important; }
}

/* Shared header and wordmark. */
.site-header { position: relative; min-height: 100px; display: flex; align-items: center; padding: 10px 0 22px; }
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    background: url("../assets/home/bashkir-kuskar-band.svg") repeat-x left center / 34.2px 14px; opacity: .82;
    pointer-events: none;
}
.wordmark { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; }
.wordmark-symbol { flex: 0 0 44px; width: 44px; height: 44px; color: var(--accent); transition: transform 800ms var(--ease); }
.wordmark:hover .wordmark-symbol { transform: rotate(90deg); }
.wordmark-name { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -.4px; }
@media (min-width: 1600px) {
    .site-header { min-height: 100px; }
}
@media (max-width: 1100px) {
    .site-header { min-height: 88px; }
}
@media (max-width: 700px) {
    .site-header { min-height: 85px; padding-bottom: 27px; border-bottom: 0; }
    .site-header::after { height: 20px; background-size: 48.9px 20px; opacity: 1; }
    .wordmark { gap: 10px; }
    .wordmark-symbol { width: 30px; height: 30px; flex-basis: 30px; }
    .wordmark-name { font-size: 21px; letter-spacing: -.3px; }
}
@media (max-width: 370px) {
    .wordmark-name { font-size: 20px; }
    .wordmark-symbol { width: 30px; height: 30px; flex-basis: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .wordmark:hover .wordmark-symbol { transform: none; }
}

/* Home introduction. */
.intro { position: relative; padding: 22px 0 32px; }
.intro-copy { position: relative; z-index: 1; }
.intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 5vw, 72px); line-height: 1.08; font-weight: 400; letter-spacing: -2.5px; }
.intro h1 em { color: var(--accent); font-weight: 400; }
.intro p { margin: 15px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.intro .intro-place { margin: 0 0 11px; color: var(--accent); font-size: 11px; font-weight: 650; line-height: 1.3; letter-spacing: 2px; text-transform: uppercase; }
.kurai-figure {
    position: absolute; z-index: 0; width: 185px; height: 277px; top: -4px; right: 120px; object-fit: contain;
    opacity: .42; mix-blend-mode: multiply; pointer-events: none; user-select: none;
}
@media (max-width: 1100px) {
    .kurai-figure { right: 40px; width: 160px; height: 240px; opacity: .38; }
}
@media (max-width: 700px) {
    .intro { padding: 22px 0 29px; }
    .intro h1 { font-size: clamp(46px, 13.4vw, 60px); line-height: 1.02; letter-spacing: -1.8px; }
    .intro h1 em { display: block; }
    .intro p { margin-top: 17px; font-size: 13px; }
    .intro .intro-place { margin: 0 0 12px; font-size: 10px; letter-spacing: 1.8px; }
    .kurai-figure { top: 8px; right: -4px; width: 132px; height: 198px; opacity: .46; }
}
@media (max-width: 370px) {
    .kurai-figure { top: 24px; right: -5px; width: 104px; height: 156px; opacity: .4; }
}

/* Entrance artwork and navigation cards. */
.entrances { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.entrance {
    --card: #173c35; --stage: #1c453b; --pale: #bccabe; --art-scale: 1; --art-turn: 0deg; position: relative;
    display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card);
    color: var(--paper); isolation: isolate; cursor: pointer;
}
.entrance-collection { --card: #542c36; --stage: #61333c; --pale: #d1bcc0; }
.entrance-art { position: relative; margin: 0; height: 420px; background: var(--stage); overflow: hidden; }
.ornament-texture {
    position: absolute; inset: -15px; background: var(--gold); opacity: .035;
    mask: url("../assets/home/bashkir-kuskar-band.svg") repeat center / 132px 54px;
    -webkit-mask: url("../assets/home/bashkir-kuskar-band.svg") repeat center / 132px 54px; transform: scale(1.05);
    transition: opacity 900ms var(--ease), transform 1400ms var(--ease); pointer-events: none;
}
.ornament-reveal {
    position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); fill: none; stroke: currentColor;
    stroke-width: 1; opacity: 0; stroke-dasharray: 2500; stroke-dashoffset: 2500;
    transition: stroke-dashoffset 1600ms var(--ease), opacity 700ms var(--ease); pointer-events: none;
}
.art-plate { z-index: 1; position: absolute; inset: 30px 68px 36px; display: flex; align-items: center; justify-content: center; }
.painting {
    display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .22));
    transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) rotate(var(--art-turn)) scale(var(--art-scale));
    transition: transform 750ms var(--ease);
}
.ethno-shutter {
    position: absolute; z-index: 2; top: 0; bottom: 0; width: 10%; background: var(--stage); pointer-events: none;
    transition: transform 1100ms var(--ease), opacity 1100ms var(--ease);
}
.ethno-shutter::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 28px; background: var(--gold); opacity: .32;
    mask: url("../assets/home/bashkir-kuskar-band.svg") repeat center / 28px 16px;
    -webkit-mask: url("../assets/home/bashkir-kuskar-band.svg") repeat center / 28px 16px;
}
.shutter-left { left: 0; border-right: 1px solid rgba(220, 195, 154, .1); }
.shutter-right { right: 0; border-left: 1px solid rgba(220, 195, 154, .1); }
.shutter-left::before { right: 9px; }
.shutter-right::before { left: 9px; }
.entrance-art figcaption {
    position: absolute; z-index: 4; bottom: 10px; left: 20px; right: 20px; color: var(--pale); font-size: 10px;
    line-height: 1.5; text-align: center; opacity: 0; transform: translateY(3px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.entrance-content { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; padding: 25px 30px 28px; }
.entrance-content h2 { grid-column: 1; grid-row: 1; }
.entrance-content p { grid-column: 1; grid-row: 2; margin: 0; color: var(--pale); font-size: 13px; line-height: 1.6; }
.entrance-content::before {
    content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 1px;
    background: rgba(220, 195, 154, .2); transform: scaleX(.14); transform-origin: left;
    transition: transform 1100ms var(--ease);
}
.entrance-arrow {
    grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 32px;
    height: 32px; color: var(--gold); opacity: .7;
    transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}
.entrance-arrow svg { width: 25px; height: 25px; }
.entrance:is(:hover, :focus-visible) { --art-scale: 1.025; --art-turn: -.65deg; }
.entrance-collection:is(:hover, :focus-visible) { --art-turn: .65deg; }
.entrance:is(:hover, :focus-visible) .shutter-left { transform: translateX(-105%); opacity: .4; }
.entrance:is(:hover, :focus-visible) .shutter-right { transform: translateX(105%); opacity: .4; }
.entrance:is(:hover, :focus-visible) .ornament-texture { opacity: .07; transform: scale(1); }
.entrance:is(:hover, :focus-visible) .ornament-reveal { opacity: .25; stroke-dashoffset: 0; }
.entrance:is(:hover, :focus-visible) .entrance-content::before { transform: scaleX(1); }
.entrance:is(:hover, :focus-visible) h2 { color: var(--gold); }
.entrance:is(:hover, :focus-visible) .entrance-arrow { opacity: 1; transform: translateX(4px); }
.entrance:is(:hover, :focus-visible) figcaption { opacity: .85; transform: none; }
@media (min-width: 1600px) {
    .entrance-art { height: 480px; }
}
@media (max-width: 1100px) {
    .entrance-art { height: 370px; }
    .art-plate { inset: 28px 42px 34px; }
    .ethno-shutter { width: 8%; }
    .entrance-content { padding-left: 25px; padding-right: 25px; }
    .entrance-content::before { left: 25px; right: 25px; }
}
@media (max-width: 850px) {
    .entrances { gap: 15px; }
    .entrance-art { height: 310px; }
    .art-plate { inset: 24px 36px 30px; }
    .entrance-content { padding: 23px 21px; }
}
@media (max-width: 700px) {
    .entrances { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .entrance { background: transparent; color: var(--ink); overflow: visible; }
    .entrance + .entrance { padding-top: 36px; border-top: 0; }
    .entrance + .entrance::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; width: auto; height: 16px;
        background: url("../assets/home/bashkir-kuskar-band.svg") repeat-x left center / 39.1px 16px; border: 0;
        transform: none;
    }
    .entrance-art { height: auto; background: transparent; overflow: visible; }
    .art-plate { position: relative; inset: auto; display: block; }
    .painting { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(36, 56, 47, .13)); transform: none !important; }
    .ornament-texture { display: none; }
    .ornament-reveal { display: none; }
    .ethno-shutter { display: none; }
    .entrance-art figcaption {
        position: static; display: block; margin-top: 11px; color: var(--muted); font-size: 11px; line-height: 1.5;
        text-align: left; opacity: 1; transform: none;
    }
    .entrance-content { order: -1; padding: 0 0 19px; gap: 9px 16px; }
    .entrance-content p { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .entrance-content::before { display: none; }
    .entrance-content h2 { color: var(--card); font-size: 38px; letter-spacing: -1px; }
    .entrance-arrow { grid-row: 1; align-self: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--card); opacity: 1; }
    .entrance-arrow svg { width: 23px; height: 23px; }
    .entrance:is(:hover, :focus-visible) h2 { color: var(--accent); }
    .entrance:is(:hover, :focus-visible) figcaption { opacity: 1; }
}
@media (hover: none) {
    .ornament-reveal { stroke-dashoffset: 0; opacity: .15; }
    .ornament-texture { opacity: .055; }
    .ethno-shutter { transform: none !important; opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
    .painting { transform: none !important; }
    .ornament-reveal { stroke-dashoffset: 0; opacity: .2; }
}

/* Shared footer. */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; color: var(--muted); font-size: 10px; }
.site-footer p { margin: 0; }
.footer-links { display: flex; align-items: center; gap: 22px; }
.footer-links a:hover { color: var(--accent); }
.developer { font-size: 9px; letter-spacing: 1px; }
.developer strong { font-weight: 650; }
.admin-link { display: grid; place-items: center; min-width: 32px; min-height: 32px; }
.admin-link svg { width: 17px; height: 17px; }
@media (max-width: 700px) {
    .site-footer { min-height: 80px; margin-top: 29px; border-top: 1px solid var(--line); font-size: 10px; }
    .developer { font-size: 9px; }
}