/* ------------------------------------------------------------------
   Athar (أثر) — private art space.
   The page carries its own quiet, dark gallery atmosphere in both site
   themes: the artworks are the first visual element, the studio identity
   is only the frame. Tokens are local to .athar.
   ------------------------------------------------------------------ */

.athar {
    --athar-bg: #0d0d10;
    --athar-bg-soft: #131318;
    --athar-charcoal: #1a1a1e;
    --athar-cream: #f0e9da;
    --athar-cream-dim: #b7b0a1;
    --athar-green: #5d7b52;
    --athar-green-soft: rgba(93, 123, 82, 0.22);
    --athar-line: rgba(240, 233, 218, 0.14);
    --athar-glow: var(--work-light, #caa45a);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(93, 123, 82, 0.10), transparent 70%),
        linear-gradient(180deg, var(--athar-bg) 0%, var(--athar-bg-soft) 100%);
    color: var(--athar-cream);
    overflow-x: clip;
}
.athar ::selection { background: var(--athar-green-soft); }

/* Buttons — quiet, thin borders, generous spacing. */
.athar-button {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 999px; font-size: 15.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid var(--athar-line);
    background: transparent; color: var(--athar-cream);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.athar-button:hover { border-color: rgba(240, 233, 218, 0.4); transform: translateY(-1px); }
.athar-button:focus-visible { outline: 3px solid var(--athar-green); outline-offset: 3px; }
.athar-button-primary { background: var(--athar-cream); color: #16161a; border-color: var(--athar-cream); }
.athar-button-primary:hover { background: #fff; border-color: #fff; }
.athar-button-ghost { border-color: rgba(240, 233, 218, 0.35); }
.athar-button-quiet { border-color: transparent; color: var(--athar-cream-dim); }
.athar-button-quiet:hover { color: var(--athar-cream); border-color: var(--athar-line); }

/* Preview banner */
.athar-preview-note {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; font-size: 14px;
    background: rgba(199, 137, 36, 0.16); color: #e6c184;
    border-bottom: 1px solid rgba(199, 137, 36, 0.3);
}
.athar-preview-tag { font-size: 13px; color: #e6c184; margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.athar-hero { padding: clamp(72px, 12vh, 150px) 0 clamp(48px, 8vh, 110px); }
.athar-hero-inner {
    width: min(calc(100% - 40px), 1240px); margin-inline: auto;
    display: grid; gap: clamp(32px, 6vw, 80px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
}
.athar-eyebrow {
    font-size: 14px; letter-spacing: 0.14em; color: var(--athar-green);
    text-transform: uppercase; margin-bottom: 18px;
}
html[lang="ar"] .athar-eyebrow { letter-spacing: 0; font-size: 15px; }
.athar-title {
    font-size: clamp(56px, 9vw, 110px); font-weight: 700; line-height: 1.05;
    margin: 0 0 22px; color: var(--athar-cream);
}
.athar-intro {
    font-size: clamp(17px, 2vw, 20px); line-height: 2; color: var(--athar-cream-dim);
    max-width: 34em; margin-bottom: 34px;
}
.athar-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.athar-hero-preview { margin: 0; display: grid; justify-items: center; gap: 16px; }
.athar-hero-frame {
    position: relative; padding: 18px; border-radius: 6px;
    background: linear-gradient(160deg, #1e1e24, #101014);
    border: 1px solid var(--athar-line);
    /* Fallback first: a color-mix()-less browser must still get a shadow. */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 90px rgba(202, 164, 90, 0.18);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 90px color-mix(in srgb, var(--work-light, #caa45a) 18%, transparent);
}
.athar-hero-frame img {
    display: block; max-width: min(100%, 420px); height: auto; border-radius: 2px;
    background: var(--work-dominant, var(--athar-charcoal));
}
.athar-hero-caption { font-size: 14px; color: var(--athar-cream-dim); }

/* ------------------------------------------------------------------ */
/* Empty state                                                         */
/* ------------------------------------------------------------------ */

.athar-empty { padding: clamp(60px, 14vh, 160px) 20px; display: grid; justify-items: center; }
.athar-empty-card {
    display: grid; justify-items: center; gap: 14px; text-align: center;
    max-width: 420px; padding: 44px 32px; border: 1px solid var(--athar-line);
    border-radius: 20px; background: rgba(255, 255, 255, 0.02);
}
.athar-empty-card i { font-size: 34px; color: var(--athar-green); }
.athar-empty-card h2 { font-size: 24px; margin: 0; }
.athar-empty-card p { color: var(--athar-cream-dim); line-height: 1.9; margin: 0 0 8px; }

/* ------------------------------------------------------------------ */
/* Journey — one artwork per scene                                     */
/* ------------------------------------------------------------------ */

.athar-journey { display: grid; }
.athar-work {
    position: relative; display: grid; align-content: center; justify-items: center;
    gap: clamp(24px, 4vh, 44px);
    min-height: 88vh; padding: clamp(56px, 10vh, 120px) 20px;
    /* Fallback first for browsers without color-mix(). */
    background: linear-gradient(180deg, #16161b 0%, var(--athar-bg) 90%);
    background:
        radial-gradient(900px 500px at 50% 30%, color-mix(in srgb, var(--work-light, #caa45a) 9%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--work-dominant, #1a1a1e) 26%, var(--athar-bg)) 0%, var(--athar-bg) 90%);
    transition: background 900ms ease;
}
.athar-bg-light { --athar-cream: #23231f; --athar-cream-dim: #5d5a50; --athar-line: rgba(35, 35, 31, 0.22); }
.athar-work.athar-bg-light {
    background: linear-gradient(180deg, #efe9dc 0%, #e4ddcd 100%);
    background:
        radial-gradient(900px 500px at 50% 30%, color-mix(in srgb, var(--work-light, #caa45a) 14%, transparent), transparent 72%),
        linear-gradient(180deg, #efe9dc 0%, #e4ddcd 100%);
}

/* scene_stage: the admin's chosen link into the page's arc. */
.athar-stage-transition::after,
.athar-stage-garden::after {
    content: ""; position: absolute; inset: auto 0 0; height: 34%;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(11, 20, 16, 0.85), transparent 85%);
}
.athar-stage-garden::after {
    height: 48%;
    background: linear-gradient(0deg, rgba(9, 18, 14, 0.95), rgba(46, 74, 42, 0.12) 60%, transparent 90%);
}

/* Featured works carry more presence: taller scene, stronger halo. */
.athar-work-featured { min-height: 96vh; }
.athar-work-featured .athar-work-glow { inset: -18%; opacity: 1.25; }

.athar-work-media { position: relative; margin: 0; max-width: 100%; }
.athar-work-media img {
    display: block; max-width: 100%; height: auto; border-radius: 4px;
    background: var(--work-dominant, var(--athar-charcoal));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5);
}
.athar-work-glow {
    position: absolute; inset: -12%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(202, 164, 90, 0.16), transparent 75%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--work-light, #caa45a) 16%, transparent), transparent 75%);
    filter: blur(6px);
}

/* Presentation modes — composition per orientation, admin can override. */
.athar-presentation-framed .athar-work-media img { max-height: 78vh; width: auto; }
.athar-presentation-intimate .athar-work-media img { max-height: 62vh; width: auto; }
.athar-presentation-wide .athar-work-media { width: min(100%, 1240px); }
.athar-presentation-wide .athar-work-media img { width: 100%; max-height: none; }
.athar-presentation-full { padding-inline: 0; }
.athar-presentation-full .athar-work-media { width: 100%; }
.athar-presentation-full .athar-work-media img { width: 100%; border-radius: 0; }
.athar-orientation-portrait .athar-work-media img { max-height: 82vh; }

.athar-work-card { max-width: 620px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.athar-work-reference {
    font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px;
    letter-spacing: 0.28em; color: var(--athar-green); margin: 0;
}
.athar-work-title { font-size: clamp(26px, 3.6vw, 40px); margin: 0; line-height: 1.3; }
.athar-work-meta { font-size: 14.5px; color: var(--athar-cream-dim); margin: 0; }
.athar-work-description { font-size: clamp(15.5px, 1.8vw, 17.5px); line-height: 2; color: var(--athar-cream-dim); margin: 4px 0 0; }
.athar-work-whisper {
    font-size: 14.5px; line-height: 1.9;
    color: #c9b083;
    color: color-mix(in srgb, var(--work-light, #caa45a) 70%, var(--athar-cream-dim));
    font-style: italic; margin: 4px 0 0;
}
.athar-work-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    color: var(--athar-cream); text-decoration: none; font-weight: 600; font-size: 15px;
    border-bottom: 1px solid var(--athar-line); padding-bottom: 3px;
    transition: border-color 180ms ease, gap 180ms ease;
}
.athar-work-link:hover { border-color: var(--athar-cream); gap: 12px; }
.athar-work-link:focus-visible { outline: 3px solid var(--athar-green); outline-offset: 4px; }

/* Desktop hover only — never simulated on touch. */
@media (hover: hover) and (pointer: fine) {
    .athar-work-media img { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
    .athar-work:hover .athar-work-media img { transform: scale(1.012); }
}

.athar-media-fallback {
    position: absolute; inset: 0; display: grid; place-content: center; gap: 12px;
    text-align: center; border: 1px dashed rgba(207, 200, 184, 0.35); border-radius: 8px;
    /* Fixed palette: must stay readable inside light-background scenes
       that override the cream tokens. */
    background: #1a1a1e; color: #cfc8b8;
    padding: 30px; font-size: 15px; min-height: 220px; min-width: min(80vw, 340px);
}
.athar-media-fallback .athar-button { color: #cfc8b8; border-color: rgba(207, 200, 184, 0.35); }
.athar-media-fallback[hidden] { display: none; }

/* Interlude between works */
.athar-interlude {
    display: grid; place-content: center; gap: 14px; text-align: center;
    min-height: 46vh; padding: 60px 20px;
}
.athar-interlude-text { font-size: clamp(20px, 3vw, 30px); line-height: 1.9; margin: 0; color: var(--athar-cream); }
.athar-interlude-echo { font-size: clamp(15px, 2vw, 18px); color: var(--athar-cream-dim); margin: 0; }

/* ------------------------------------------------------------------ */
/* Details (crops)                                                     */
/* ------------------------------------------------------------------ */

.athar-details { padding: clamp(64px, 10vh, 130px) 20px; width: min(calc(100% - 0px), 1240px); margin-inline: auto; text-align: center; }
.athar-section-title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 12px; }
.athar-section-text { color: var(--athar-cream-dim); font-size: 16.5px; line-height: 2; margin: 0 0 40px; }
.athar-details-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
}
.athar-crop { margin: 0; display: grid; gap: 10px; }
.athar-crop:nth-child(3n + 1) { margin-top: 26px; }
.athar-crop:nth-child(3n) { margin-top: 12px; }
.athar-crop-window {
    aspect-ratio: 1; overflow: hidden; border-radius: 10px;
    border: 1px solid var(--athar-line); background: var(--athar-charcoal);
}
.athar-crop-window img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    /* Center the chosen focal point: translate it to the middle (as a
       percentage of the image itself), then scale about the center.
       --crop-x/--crop-y are unitless 0–100 numbers. */
    transform:
        scale(var(--crop-scale, 2.2))
        translate(calc((50 - var(--crop-x, 50)) * 1%), calc((50 - var(--crop-y, 50)) * 1%));
}
.athar-crop figcaption { font-size: 13.5px; color: var(--athar-cream-dim); }

/* ------------------------------------------------------------------ */
/* Garden transition + lily garden                                     */
/* ------------------------------------------------------------------ */

.athar-transition {
    position: relative; min-height: 52vh; display: grid; place-content: center;
    padding: 70px 20px; text-align: center;
    background: linear-gradient(180deg, var(--athar-bg) 0%, #0b1410 78%, #0a1512 100%);
}
.athar-transition-veil {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px 320px at 50% 100%, rgba(93, 123, 82, 0.16), transparent 75%);
}
.athar-garden-intro { position: relative; font-size: clamp(20px, 3vw, 30px); line-height: 2; margin: 0; }

.athar-garden {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0a1512 0%, #08120f 55%, #060d0b 100%);
    padding-bottom: 40px;
}
.athar-garden-sky {
    position: absolute; inset: 0 0 auto; height: 40%;
    background: radial-gradient(560px 280px at 72% 8%, rgba(214, 224, 200, 0.14), transparent 70%);
    opacity: var(--athar-moonlight, 1);
    pointer-events: none;
}
.athar-garden-fog {
    position: absolute; inset: auto 0 0; height: 45%; pointer-events: none; z-index: 3;
    background: linear-gradient(0deg, rgba(163, 178, 158, 0.10), transparent 80%);
    filter: blur(2px);
}
.athar-garden-stage { position: relative; max-width: 1240px; margin-inline: auto; }
.athar-garden-svg { display: block; width: 100%; height: clamp(300px, 52vh, 520px); }
.athar-fireflies { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Wind: slow, out-of-phase sway from the stem base. */
.athar-lily { transform-box: fill-box; }
.athar-lily > * { transform-box: fill-box; }
@keyframes athar-sway {
    0%, 100% { rotate: calc(var(--lily-sway, 3deg) * -0.4); }
    45% { rotate: var(--lily-sway, 3deg); }
    70% { rotate: calc(var(--lily-sway, 3deg) * 0.2); }
}
[data-athar-motion="on"] .athar-lily {
    /* --athar-breeze (1–2) shortens the sway period as the admin raises
       the breeze speed setting. */
    animation: athar-sway calc(var(--lily-duration, 8s) / var(--athar-breeze, 1)) ease-in-out infinite;
    animation-delay: var(--lily-delay, 0s);
    transform-origin: bottom center;
}
[data-athar-motion="on"] .athar-lily-head {
    transition: translate 700ms ease;
}
.athar-lily.athar-lily-touched {
    animation-play-state: paused;
}
[data-athar-motion="on"] .athar-lily.athar-lily-touched .athar-lily-head,
[data-athar-motion="on"] .athar-lily:hover .athar-lily-head {
    translate: 0 -4px;
}
.athar-lily.athar-lily-touched .athar-lily-head path,
[data-athar-motion="on"] .athar-lily:hover .athar-lily-head path {
    filter: drop-shadow(0 0 7px rgba(240, 233, 218, 0.45));
}
.athar-depth-1 { opacity: 0.8; }
.athar-depth-2 { opacity: 0.55; filter: blur(0.6px); }

/* Petals unfold as the garden completes; stamens catch the light. */
.athar-petal { transform-box: fill-box; transform-origin: 50% 100%; transition: scale 1400ms ease; }
.athar-garden[data-athar-growth="0"] .athar-lily-bloom .athar-petal,
.athar-garden[data-athar-growth="1"] .athar-lily-bloom .athar-petal,
.athar-garden[data-athar-growth="2"] .athar-lily-bloom .athar-petal { scale: 0.88; }
.athar-garden[data-athar-growth="3"] .athar-stamen ellipse {
    filter: drop-shadow(0 0 3px rgba(240, 220, 160, 0.8));
}
.athar-lily-variant-blush .athar-stamen path { stroke: #c99a6a; }
.athar-lily-variant-gold .athar-stamen ellipse { fill: #7a4a20; }

/* Growth stages driven by scroll buckets (JS sets data-athar-growth).
   Without JS nothing is hidden: the complete garden is the default. */
.athar-garden[data-athar-growth="0"] .athar-lily-bud,
.athar-garden[data-athar-growth="0"] .athar-lily-bloom { opacity: 0; translate: 0 14px; }
.athar-garden[data-athar-growth="1"] .athar-lily-bloom { opacity: 0; translate: 0 14px; }
.athar-garden[data-athar-growth="1"] .athar-lily-bud,
.athar-garden[data-athar-growth="2"] .athar-lily-bud,
.athar-garden[data-athar-growth="2"] .athar-lily-bloom { opacity: 1; translate: 0 0; }
.athar-garden .athar-lily { transition: opacity 1100ms ease, translate 1100ms ease; }
.athar-garden[data-athar-growth="3"] .athar-garden-sky { opacity: 1.35; }

.athar-garden-words {
    position: relative; z-index: 4; display: grid; gap: clamp(26px, 6vh, 60px);
    text-align: center; padding: clamp(40px, 8vh, 90px) 20px;
}
.athar-garden-mid { font-size: clamp(17px, 2.4vw, 22px); color: var(--athar-cream-dim); margin: 0; line-height: 2; }
.athar-garden-heart { font-size: clamp(22px, 3.4vw, 34px); margin: 0; line-height: 1.95; }
.athar-closing { font-size: clamp(15px, 2vw, 18px); color: var(--athar-cream-dim); margin: 0; line-height: 2; }

/* ------------------------------------------------------------------ */
/* End of page                                                         */
/* ------------------------------------------------------------------ */

.athar-end { padding: clamp(48px, 8vh, 100px) 20px; display: grid; gap: 30px; justify-items: center; background: #060d0b; }
.athar-end-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.athar-index { max-width: 560px; width: 100%; }
.athar-index summary { cursor: pointer; color: var(--athar-cream-dim); text-align: center; padding: 8px; }
.athar-index-list { margin: 14px 0 0; padding: 0 18px; display: grid; gap: 8px; }
.athar-index-list a { color: var(--athar-cream); text-decoration: none; border-bottom: 1px solid transparent; }
.athar-index-list a:hover { border-color: var(--athar-line); }
.athar-credits { font-size: 13.5px; color: rgba(183, 176, 161, 0.6); margin: 0; }

/* Progress indicator */
.athar-progress {
    position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 30;
    font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: 0.18em;
    color: var(--athar-cream-dim); background: rgba(13, 13, 16, 0.72);
    border: 1px solid var(--athar-line); border-radius: 999px; padding: 8px 16px;
    backdrop-filter: blur(6px);
}
.athar-progress[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Single artwork page                                                 */
/* ------------------------------------------------------------------ */

.athar-single { padding-bottom: 60px; }
.athar-single-breadcrumb { width: min(calc(100% - 40px), 1240px); margin: 26px auto 0; }
.athar-single-breadcrumb a {
    display: inline-flex; align-items: center; gap: 8px; color: var(--athar-cream-dim);
    text-decoration: none; font-size: 14.5px;
}
.athar-single-breadcrumb a:hover { color: var(--athar-cream); }

.athar-single-work {
    width: min(calc(100% - 40px), 1240px); margin: 30px auto 0;
    display: grid; gap: clamp(30px, 5vw, 64px);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
}
.athar-single-media { position: relative; margin: 0; }
.athar-single-media img {
    display: block; max-width: 100%; height: auto; border-radius: 4px;
    background: var(--work-dominant, var(--athar-charcoal));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(202, 164, 90, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 80px color-mix(in srgb, var(--work-light, #caa45a) 12%, transparent);
}
.athar-zoom-open {
    position: absolute; bottom: 14px; inset-inline-end: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; border: 1px solid var(--athar-line);
    background: rgba(13, 13, 16, 0.78); color: var(--athar-cream);
    font-size: 14px; cursor: pointer; backdrop-filter: blur(4px);
}
.athar-zoom-open:focus-visible { outline: 3px solid var(--athar-green); outline-offset: 3px; }

.athar-single-panel { display: grid; gap: 14px; align-content: start; }
.athar-single-title { font-size: clamp(30px, 4.4vw, 48px); margin: 0; line-height: 1.25; }
.athar-single-description { font-size: 17px; line-height: 2; color: var(--athar-cream-dim); margin: 0; }
.athar-single-story { display: grid; gap: 10px; border-inline-start: 2px solid var(--athar-green-soft); padding-inline-start: 16px; }
.athar-single-story p { margin: 0; line-height: 2; color: var(--athar-cream-dim); font-size: 15.5px; }
.athar-single-details { display: grid; gap: 8px; margin: 8px 0 0; }
.athar-single-details div { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px dashed var(--athar-line); padding-bottom: 8px; }
.athar-single-details dt { color: var(--athar-cream-dim); font-size: 14px; }
.athar-single-details dd { margin: 0; font-size: 14.5px; }
.athar-single-attribution { color: var(--athar-cream-dim); font-size: 14.5px; display: grid; gap: 4px; margin: 0; }
.athar-single-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.athar-single-siblings {
    width: min(calc(100% - 40px), 1240px); margin: clamp(40px, 8vh, 80px) auto 0;
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
}
.athar-sibling {
    display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--athar-line);
    border-radius: 14px; text-decoration: none; color: var(--athar-cream);
    transition: border-color 180ms ease;
}
.athar-sibling:hover { border-color: rgba(240, 233, 218, 0.4); }
.athar-sibling-label { font-size: 12.5px; letter-spacing: 0.12em; color: var(--athar-cream-dim); }
.athar-sibling-title { font-weight: 600; }
.athar-sibling-all { place-content: center; color: var(--athar-cream-dim); }
.athar-sibling-empty { border: none; }
.athar-sibling-next { text-align: end; }

/* ------------------------------------------------------------------ */
/* Community: ratings + comments                                       */
/* ------------------------------------------------------------------ */

.athar-community {
    width: min(calc(100% - 40px), 860px); margin: clamp(48px, 9vh, 90px) auto 0;
    display: grid; gap: 26px;
}
.athar-community .athar-section-title { text-align: center; margin-bottom: 0; }
.athar-community-errors {
    border: 1px solid rgba(185, 75, 84, 0.5); border-radius: 12px; padding: 12px 16px;
    color: #e2a1a7; background: rgba(185, 75, 84, 0.12); display: grid; gap: 4px;
}
.athar-community-errors p { margin: 0; font-size: 14.5px; }

.athar-rating-block {
    display: grid; gap: 16px; justify-items: center; text-align: center;
    border: 1px solid var(--athar-line); border-radius: 18px; padding: 24px 20px;
    background: rgba(255, 255, 255, 0.02);
}
.athar-rating-summary { display: flex; align-items: center; gap: 10px; margin: 0; }
.athar-rating-summary small { color: var(--athar-cream-dim); }
.athar-rating-empty, .athar-rating-unavailable { margin: 0; color: var(--athar-cream-dim); font-size: 15px; }
.athar-rating-stars {
    position: relative; font-size: 21px; letter-spacing: 3px; color: rgba(240, 233, 218, 0.25);
}
.athar-rating-stars::before {
    content: "★★★★★"; position: absolute; inset-inline-start: 0; top: 0;
    width: var(--rating, 0%); overflow: hidden; white-space: nowrap;
    color: #d8ab55; letter-spacing: 3px;
}
.athar-rating-form { display: grid; gap: 12px; justify-items: center; }
.athar-star-picker {
    display: flex; flex-direction: row-reverse; gap: 4px; border: 0; padding: 0; margin: 0;
}
.athar-star-picker legend { font-size: 14px; color: var(--athar-cream-dim); margin-bottom: 8px; text-align: center; float: inline-start; width: 100%; }
.athar-star-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.athar-star-picker label {
    font-size: 30px; line-height: 1; cursor: pointer; color: rgba(240, 233, 218, 0.3);
    transition: color 140ms ease, transform 140ms ease; padding: 2px;
    min-width: 44px; min-height: 44px; display: inline-grid; place-items: center;
}
.athar-star-picker label:hover,
.athar-star-picker label:hover ~ label,
.athar-star-picker input:checked ~ label { color: #d8ab55; }
.athar-star-picker label:hover { transform: scale(1.12); }
.athar-star-picker input:focus-visible + label { outline: 3px solid var(--athar-green); outline-offset: 3px; border-radius: 6px; }

.athar-comments-block { display: grid; gap: 18px; }
.athar-comments-title { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0; }
.athar-comments-count {
    font-size: 13px; font-family: ui-monospace, monospace; padding: 2px 10px;
    border-radius: 999px; background: var(--athar-green-soft); color: var(--athar-cream);
}
.athar-comments-empty {
    display: grid; justify-items: center; gap: 8px; text-align: center;
    padding: 30px 16px; border: 1px dashed var(--athar-line); border-radius: 14px;
    color: var(--athar-cream-dim);
}
.athar-comments-empty i { font-size: 26px; opacity: 0.7; }
.athar-comments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.athar-comment {
    border: 1px solid var(--athar-line); border-radius: 14px; padding: 14px 18px;
    display: grid; gap: 8px; background: rgba(255, 255, 255, 0.015);
}
.athar-comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.athar-comment header strong { font-size: 15px; }
.athar-comment header time { color: var(--athar-cream-dim); font-size: 13px; margin-inline-start: auto; }
.athar-comment-tag {
    font-size: 12px; padding: 1px 9px; border-radius: 999px;
    border: 1px solid var(--athar-line); color: var(--athar-cream-dim);
}
.athar-comment p { margin: 0; line-height: 1.95; font-size: 15px; color: var(--athar-cream-dim); }

.athar-comment-form { display: grid; gap: 14px; }
.athar-comment-field { display: grid; gap: 6px; font-size: 14.5px; }
.athar-comment-field span { font-weight: 600; }
.athar-comment-field input, .athar-comment-field textarea {
    width: 100%; padding: 11px 14px; border-radius: 12px; font: inherit;
    border: 1px solid var(--athar-line); background: rgba(255, 255, 255, 0.03);
    color: var(--athar-cream);
}
.athar-comment-field input:focus-visible, .athar-comment-field textarea:focus-visible {
    outline: 3px solid var(--athar-green); outline-offset: 2px;
}
.athar-comment-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.athar-comment-footer small { color: var(--athar-cream-dim); }
.athar-honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Zoom viewer */
.athar-zoom { position: fixed; inset: 0; z-index: 90; }
.athar-zoom[hidden] { display: none; }
.athar-zoom-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 8, 0.94); }
.athar-zoom-stage {
    position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
    cursor: grab; touch-action: none;
}
.athar-zoom-stage.athar-zoom-dragging { cursor: grabbing; }
.athar-zoom-stage img {
    max-width: 92vw; max-height: 88vh; transform-origin: center;
    will-change: transform; user-select: none;
}
.athar-zoom-controls {
    position: absolute; bottom: 22px; inset-inline: 0; display: flex; gap: 8px;
    justify-content: center; z-index: 2;
}
.athar-zoom-controls button {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--athar-line); background: rgba(19, 19, 24, 0.9);
    color: var(--athar-cream); font-size: 18px; cursor: pointer;
}
.athar-zoom-controls button:hover { border-color: rgba(240, 233, 218, 0.45); }
.athar-zoom-controls button:focus-visible { outline: 3px solid var(--athar-green); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Cinematic entry + audio                                             */
/* ------------------------------------------------------------------ */

.athar-entering .athar-hero-copy { transition: translate 700ms ease, opacity 700ms ease; translate: 0 -18px; opacity: 0.65; }
.athar-audio-toggle .athar-audio-on-icon { display: none; }
.athar-audio-toggle[aria-pressed="true"] .athar-audio-on-icon { display: inline; }
.athar-audio-toggle[aria-pressed="true"] .athar-audio-off-icon { display: none; }
/* A remembered choice from a previous visit (never autoplayed). */
.athar-audio-remembered { border-color: rgba(202, 164, 90, 0.5); color: var(--athar-cream); }
.athar-audio-standalone { display: flex; justify-content: center; padding: 18px 20px 0; }

/* Lite mode (weak device, save-data, or forced from settings): drop the
   purely decorative layers. */
.athar-lite .athar-work-glow,
.athar-lite .athar-garden-fog { display: none; }
.athar-lite .athar-work-media img { transition: none; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1040px) {
    .athar-single-work { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .athar-hero-inner { grid-template-columns: 1fr; }
    .athar-hero-preview { order: -1; }
    .athar-hero-frame img { max-width: min(100%, 320px); }
    .athar-title { font-size: clamp(46px, 13vw, 72px); }
    .athar-work { min-height: auto; }
    .athar-single-siblings { grid-template-columns: 1fr; }
    .athar-sibling-next { text-align: start; }
    .athar-progress { bottom: 16px; inset-inline-end: 16px; }
}
@media (max-width: 480px) {
    .athar-hero { padding-top: 48px; }
    .athar-hero-actions { flex-direction: column; align-items: stretch; }
    .athar-button { justify-content: center; }
    .athar-details-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .athar-crop:nth-child(3n + 1), .athar-crop:nth-child(3n) { margin-top: 0; }
}

/* Reduced motion: full content, no choreography. */
@media (prefers-reduced-motion: reduce) {
    .athar *, .athar *::before, .athar *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    .athar-lily { animation: none !important; }
    .athar-garden[data-athar-growth] .athar-lily-bud,
    .athar-garden[data-athar-growth] .athar-lily-bloom { opacity: 1 !important; translate: 0 0 !important; }
    .athar-garden[data-athar-growth] .athar-lily-bloom .athar-petal { scale: 1 !important; }
    .athar-fireflies { display: none !important; }
}

/* Forced colors keep everything legible. */
@media (forced-colors: active) {
    .athar-work-glow, .athar-garden-fog, .athar-fireflies { display: none; }
}

@media print {
    .athar-progress, .athar-zoom, .athar-fireflies,
    .athar-garden-fog, .athar-work-glow, .athar-hero-actions,
    .athar-single-actions, .athar-zoom-open { display: none !important; }
    .athar, .athar-work, .athar-transition, .athar-garden, .athar-end {
        background: #fff !important; color: #000 !important;
    }
    .athar { --athar-cream: #000; --athar-cream-dim: #333; --athar-line: #999; }
    .athar [data-reveal] { opacity: 1 !important; transform: none !important; }
}