body{

margin:0;
background:#050507;
color:#d8d0b0;

font-family:Georgia,serif;

min-height:100vh;

display:flex;
align-items:flex-start;
justify-content:center;

overflow-x:hidden;
overflow-y:auto;

padding:48px 24px 72px;
cursor:default;

position:relative;

}

.title{

letter-spacing:8px;
font-weight:normal;
margin-bottom:40px;

color:#c9b88a;

}

.gallery{

text-align:center;

padding:50px;

background:rgba(10,10,12,0.7);

border:1px solid #2a2a2a;

box-shadow:
0 0 80px rgba(0,0,0,0.9),
0 0 30px rgba(180,160,100,0.15);

backdrop-filter:blur(6px);

position:relative;
z-index:2;

max-width:min(920px,100%);

}

.text-block{

margin:0 auto 36px;
text-align:left;

}

.prose{

margin:0;
font-size:15px;
line-height:1.7;
color:#b8b0a0;
letter-spacing:0.02em;

}

.text-block--teaching{

margin-top:40px;
padding-top:28px;
border-top:1px solid #2a2a2a;

}

.teaching-title{

font-weight:normal;
font-size:13px;
letter-spacing:4px;
text-transform:uppercase;
color:#c9b88a;
margin:0 0 20px;

}

.viewer{

display:flex;
align-items:center;
gap:25px;
justify-content:center;

}

#painting{

max-width:70vw;
max-height:75vh;

border-radius:3px;

box-shadow:
0 0 60px rgba(0,0,0,0.9),
0 0 25px rgba(200,180,120,0.15);

transition:opacity 1.4s ease, transform .8s ease;

cursor:pointer;

}

#painting:hover{

transform:scale(1.02);

}

#painting:focus-visible{

outline:1px solid #c9b88a;
outline-offset:4px;

}

.autoplay-bar{

margin:24px auto 0;
padding:16px 20px;
max-width:420px;
border:1px solid #2a2a2a;
background:rgba(12,12,14,0.5);
text-align:left;

}

.autoplay-row{

display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;

}

.autoplay-row + .autoplay-row{

margin-top:12px;

}

.autoplay-label{

font-size:12px;
letter-spacing:0.12em;
text-transform:uppercase;
color:#8a8068;

}

.btn-autoplay{

min-width:64px;
padding:8px 16px;
height:auto;
font-family:inherit;
font-size:12px;
letter-spacing:0.1em;
text-transform:uppercase;

background:rgba(22,20,18,0.9);
border:1px solid #3a3530;
color:#c4b896;

cursor:pointer;

transition:border-color .25s, color .25s, box-shadow .25s;

}

.btn-autoplay:hover:not(:disabled){

border-color:#8a7a58;
color:#e8dcc0;

}

.btn-autoplay[aria-pressed="true"]{

border-color:#6a6248;
color:#d8d0b0;
box-shadow:inset 0 0 20px rgba(60,55,40,0.2);

}

.btn-autoplay[aria-pressed="false"]{

opacity:0.75;

}

.btn-autoplay:disabled{

opacity:0.4;
cursor:not-allowed;

}

.autoplay-select{

flex:1;
min-width:120px;
max-width:200px;
padding:8px 12px;
box-sizing:border-box;

font-family:inherit;
font-size:13px;
color:#d8d0b0;
background:#121214;
border:1px solid #3a3530;
border-radius:2px;
cursor:pointer;

}

.autoplay-select:disabled{

opacity:0.45;
cursor:not-allowed;

}

.btn-shum-vremeni{

display:block;
width:fit-content;
max-width:100%;
margin:28px auto 0;
padding:14px 32px;
box-sizing:border-box;

font-family:inherit;
font-size:13px;
font-weight:normal;
letter-spacing:0.14em;
text-transform:uppercase;

background:rgba(18,16,22,0.92);
border:1px solid #3a3530;
color:#c4b896;

min-height:auto;
height:auto;

cursor:pointer;

transition:border-color .3s, color .3s, box-shadow .3s;

}

.btn-shum-vremeni:hover{

border-color:#8a7a58;
color:#e8dcc0;

}

.btn-shum-vremeni[aria-pressed="true"]{

border-color:#c9b88a;
color:#f0e8d0;
box-shadow:
0 0 24px rgba(200,180,120,0.25),
inset 0 0 40px rgba(80,70,40,0.15);

}

.hint{

margin-top:24px;
font-size:12px;
letter-spacing:1px;
opacity:0.45;

}

.viewer button{

background:none;
border:1px solid #333;

color:#c9b88a;

font-size:26px;

width:55px;
height:55px;

cursor:pointer;

transition:all .3s;

}

.viewer button:hover{

border-color:#c9b88a;

box-shadow:0 0 10px rgba(200,180,120,0.5);

}

.fog{

position:fixed;
inset:-50%;

width:200%;
height:200%;

background:
radial-gradient(circle at 30% 40%,rgba(255,255,255,0.04),transparent),
radial-gradient(circle at 70% 60%,rgba(255,255,255,0.03),transparent);

animation:fogMove 60s linear infinite;

pointer-events:none;
z-index:0;

}

@keyframes fogMove{

from{transform:translate(0,0)}
to{transform:translate(-200px,-150px)}

}

.grain{

position:fixed;
inset:0;
pointer-events:none;
z-index:3;

background-image:url("assets/noise.png");
background-repeat:repeat;
opacity:0.07;
mix-blend-mode:overlay;

animation:grainShift 0.4s steps(4) infinite;

}

@keyframes grainShift{

0%{transform:translate(0,0)}
25%{transform:translate(-1px,1px)}
50%{transform:translate(1px,-1px)}
75%{transform:translate(-1px,-1px)}
100%{transform:translate(0,0)}

}

.veil{

position:fixed;
inset:0;
background:#000;
opacity:0;
pointer-events:none;
z-index:4;

transition:opacity 0.55s ease;

}

.veil.is-dark{

opacity:1;

}

.candle-glow{

position:fixed;
left:0;
top:0;
width:280px;
height:280px;
margin:0;
border-radius:50%;
pointer-events:none;
z-index:5;

background:radial-gradient(
circle,
rgba(255,220,160,0.14) 0%,
rgba(255,200,120,0.06) 35%,
transparent 70%
);

mix-blend-mode:screen;
filter:blur(4px);

opacity:0.85;

will-change:transform;

}

.fs-overlay{

position:fixed;
inset:0;
z-index:20;
background:#020203;
display:flex;
align-items:center;
justify-content:center;

animation:fsIn 0.6s ease forwards;

}

.fs-overlay[hidden]{

display:none;

}

@keyframes fsIn{

from{opacity:0}
to{opacity:1}

}

.fs-img{

max-width:96vw;
max-height:96vh;
object-fit:contain;

box-shadow:
0 0 100px rgba(0,0,0,1),
0 0 40px rgba(200,180,120,0.12);

border-radius:2px;

}

.fs-close{

position:absolute;
top:24px;
right:24px;
width:48px;
height:48px;
font-size:22px;
z-index:21;

background:rgba(10,10,12,0.85);
border:1px solid #3a3a3a;

cursor:pointer;

}

.fs-close:hover{

border-color:#c9b88a;

}