/* Painting page — the painting on top, then title / author / facts, then the STORY as a
   reading column (serif, ~65 characters per line), like a page in an art book.
   Colours: theme.css variables only. */

.art-panel {
    margin-top: 3px; padding: 30px 24px 34px;
    background: #000; border: 2px solid #535353; border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box;
}
.art-head { max-width: 760px; margin: 0 auto; text-align: center; }
.art-title {
    margin: 0 0 8px; color: var(--c-on-fill); line-height: 1.2;
    font: 600 34px 'Playfair Display', Georgia, serif;
}
.art-artist { margin: 0 0 10px; font: 500 17px 'Inter', sans-serif; }
.art-artist a { color: var(--c-text); text-decoration: none; }
.art-artist a:hover { color: var(--c-text-hover); text-decoration: underline; }
.art-facts { margin: 0 0 16px; color: #a89f8f; font: 14px 'Inter', sans-serif; letter-spacing: .02em; }
.art-facts span { display: inline-block; max-width: 100%; }
.art-facts span + span::before { content: "·"; margin: 0 .65em; color: var(--c-line); }
.art-actions { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.art-actions .fav-btn { background: #1e1e22; }
.art-actions .price { font-size: 18px; }
.art-download {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px;
    border: 1px solid var(--c-line); color: var(--c-text); text-decoration: none;
    font: 600 12px 'Inter', sans-serif; letter-spacing: .06em;
}
.art-download:hover { border-color: var(--c-line-hover); color: #fff; background: var(--c-glow); }

.art-story {
    max-width: 680px; margin: 30px auto 0; padding-top: 26px;
    border-top: 1px solid var(--c-line-soft); text-align: left;
}
.art-story h2 {
    margin: 0 0 20px; text-align: center; color: var(--c-text);
    font: 600 13px 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.art-story p {
    margin: 0 0 1.1em; color: #e4ddd0;
    font: 18px/1.75 Georgia, 'Times New Roman', serif; hyphens: auto;
}
/* First letter of the story as a drop cap — for alphabets (not for Chinese/Japanese). */
.art-story:not(.art-more) p:first-of-type::first-letter {
    float: left; margin: 6px 10px 0 0; color: var(--c-text);
    font: 600 3.3em/.85 'Playfair Display', Georgia, serif;
}
:lang(ja) .art-story p:first-of-type::first-letter,
:lang(zh) .art-story p:first-of-type::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
.art-more p { font-size: 17px; }

@media (max-width: 600px) {
    .art-panel { padding: 22px 16px 26px; }
    .art-title { font-size: 26px; }
    .art-story { margin-top: 22px; padding-top: 20px; }
    .art-story p { font-size: 17px; line-height: 1.7; }
}

/* "Beneath the surface" — compare the painting today with what lies under it (layers.js) */
.layers { max-width: 680px; margin: 30px auto 0; padding-top: 26px; border-top: 1px solid var(--c-line-soft); }
.layers h2 {
    margin: 0 0 16px; text-align: center; color: var(--c-text);
    font: 600 13px 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.ly-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.ly-tab {
    cursor: pointer; padding: 7px 14px; border-radius: 20px; background: none;
    border: 1px solid var(--c-line); color: var(--c-text); font: 600 12px 'Inter', sans-serif;
}
.ly-tab:hover { border-color: var(--c-line-hover); color: #fff; }
.ly-tab.on { background: var(--c-line); color: #fff; border-color: var(--c-line-hover); }
.ly-stage {
    --pos: 50%; position: relative; width: min(100%, 560px); margin: 0 auto; line-height: 0;
    border: 3px solid #323232; box-shadow: 0 10px 30px rgba(0,0,0,.6); overflow: hidden;
    user-select: none; touch-action: pan-y;
}
.ly-stage img { display: block; width: 100%; height: auto; }
.ly-top { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos)); }
.ly-line {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
    background: var(--c-on-fill); box-shadow: 0 0 8px rgba(0,0,0,.8); pointer-events: none;
}
.ly-line::after {                                         /* the round handle */
    content: "\2039  \203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.75);
    border: 2px solid var(--c-on-fill); color: var(--c-on-fill); font: 600 16px/34px 'Inter', sans-serif;
    text-align: center; white-space: nowrap;
}
.ly-range {                                               /* invisible, covers the picture: drag anywhere */
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.ly-label {
    position: absolute; top: 10px; padding: 4px 9px; border-radius: 3px; line-height: 1.3;
    background: rgba(0,0,0,.7); color: var(--c-on-fill); font: 600 11px 'Inter', sans-serif;
    letter-spacing: .06em; pointer-events: none; max-width: 45%;
}
.ly-l { left: 10px; } .ly-r { right: 10px; text-align: right; }
.ly-hint { margin: 8px 0 0; text-align: center; color: #8f877a; font: 13px 'Inter', sans-serif; }
.ly-text { margin: 12px 0 0; color: #e4ddd0; font: 16px/1.65 Georgia, serif; }
.ly-credit { margin: 6px 0 0; color: #8f877a; font: 12px 'Inter', sans-serif; }

/* RANDOM: round "reload" button on the right edge of the painting, in the middle (seen at
   once). When the painting is scrolled away, the same button floats bottom-right (random.js). */
.view-image { position: relative; }
.rnd-next {
    position: absolute; z-index: 5; right: 14px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; width: 58px; height: 58px;
    border-radius: 50%; border: 1px solid var(--c-line-hover); background: rgba(0,0,0,.72);
    color: #fff; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.6);
    backdrop-filter: blur(3px); transition: background .2s, transform .2s, opacity .3s;
}
.rnd-next:hover, .rnd-next:focus-visible { background: var(--c-line); }
.rnd-next:hover .rnd-icon { transform: rotate(200deg); }
.rnd-icon { transition: transform .45s ease; }
.rnd-next.go .rnd-icon { animation: rnd-spin .7s linear infinite; }           /* loading the next */
.rnd-next.hello .rnd-icon { animation: rnd-spin .9s ease .6s 1; }             /* once: "I reload" */
@keyframes rnd-spin { to { transform: rotate(360deg); } }
.rnd-tip {
    position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; padding: 6px 12px; border-radius: 3px; background: #000; color: var(--c-text);
    border: 1px solid var(--c-line); font: 600 13px 'Inter', sans-serif; pointer-events: none;
    opacity: 0; transition: opacity .15s;
}
.rnd-next:hover .rnd-tip, .rnd-next:focus-visible .rnd-tip { opacity: 1; }
.explore.focus .rnd-next { opacity: 0; pointer-events: none; }       /* a secret's balloon is there */
.rnd-float {
    position: fixed; top: auto; bottom: 18px; right: 16px; transform: none; z-index: 20;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rnd-float.show { opacity: 1; pointer-events: auto; }
@media (max-width: 700px) {
    .rnd-next { width: 50px; height: 50px; right: 10px; }
    .rnd-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rnd-icon, .rnd-next.hello .rnd-icon, .rnd-next.go .rnd-icon { animation: none; transition: none; }
}

/* The whole painting fits the screen, under the bar "Картина" (the page opens scrolled to it —
   script in painting.html). Beats the 2015 limits (max 900 × 640 px). */
.ex-viewer { height: calc(100vh - 118px) !important; height: calc(100svh - 118px) !important; min-height: 320px; max-height: 1100px; }
.view-image img { max-height: calc(100vh - 110px) !important; max-height: calc(100svh - 110px) !important;
    max-width: 100% !important; width: auto !important; height: auto !important; }