/* Darma Artist - design draft
   Two-tone rhythm: dark, cinematic hero and story blocks alternating with
   light sand/cream gallery-wall blocks. Paintings hang on light walls in
   every gallery in the world; that is where they read best, and it keeps the
   site from turning into one long dark corridor. */

:root {
    /* Warm browns, all lighter than the first pass. */
    --brown-900: #17120C;
    --brown-800: #211A11;
    --brown-700: #2C2318;
    --brown-600: #3A2F20;
    --brown-500: #4E3F2B;
    --brown-400: #6B573C;

    /* Light side - sand and cream, the gallery wall. */
    --sand-100:  #F5EEE1;
    --sand-200:  #EDE3D2;
    --sand-300:  #E2D5BF;
    --sand-400:  #CFBFA4;

    --gold:      #C9A227;
    --gold-lt:   #E8CE86;
    --gold-dk:   #92701A;

    --ok:        #5E8248;
    --warn:      #B07E1C;
    --gone:      #8A7565;

    --display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --wrap: 1320px;
    --gutter: clamp(20px, 5vw, 64px);
}

/* ── Tone blocks ────────────────────────────────────────────────────
   Every section declares its tone; components below only ever read the
   semantic vars, so the same card works on sand and on brown. */

.tone { background: var(--bg); color: var(--fg); }

.tone--dark {
    --bg: var(--brown-800);
    --surface: var(--brown-700);
    --surface-2: var(--brown-600);
    --fg: #F6F0E4;
    --fg-2: #B6A88F;
    --fg-3: #8A7B63;
    --hair: rgba(232, 206, 134, 0.16);
    --hair-soft: rgba(232, 206, 134, 0.08);
    --accent: var(--gold-lt);
    --accent-solid: var(--gold);
    --accent-on: #1A1409;
}

.tone--deep { /* hero and quote - the darkest we go */
    --bg: var(--brown-900);
    --surface: var(--brown-800);
    --surface-2: var(--brown-700);
    --fg: #F8F3E8;
    --fg-2: #B6A88F;
    --fg-3: #85765F;
    --hair: rgba(232, 206, 134, 0.16);
    --hair-soft: rgba(232, 206, 134, 0.07);
    --accent: var(--gold-lt);
    --accent-solid: var(--gold);
    --accent-on: #1A1409;
}

.tone--sand {
    --bg: var(--sand-200);
    --surface: var(--sand-100);
    --surface-2: var(--sand-300);
    --fg: #2E2418;
    --fg-2: #6B5B47;
    --fg-3: #8D7C64;
    --hair: rgba(46, 36, 24, 0.16);
    --hair-soft: rgba(46, 36, 24, 0.08);
    --accent: var(--gold-dk);
    --accent-solid: var(--gold-dk);
    --accent-on: #FBF7EF;
}

.tone--cream {
    --bg: var(--sand-100);
    --surface: #FFFFFF;
    --surface-2: var(--sand-200);
    --fg: #2E2418;
    --fg-2: #6B5B47;
    --fg-3: #8D7C64;
    --hair: rgba(46, 36, 24, 0.14);
    --hair-soft: rgba(46, 36, 24, 0.07);
    --accent: var(--gold-dk);
    --accent-solid: var(--gold-dk);
    --accent-on: #FBF7EF;
}

*, *::before, *::after { box-sizing: border-box; }

/* Both page edges abut a dark block - the hero at the top, the contact
   section at the bottom - so the page canvas is dark too. When it was cream,
   the strip under the last section and the iOS overscroll bounce showed a
   pale band against dark content, which read as the footer being torn off
   the edge of the page. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--brown-900); }

body {
    margin: 0;
    background: var(--brown-900);
    color: #2E2418;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 300;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
}

/* Canvas grain - the material cue. Subtle on both tones. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.ico-svg { flex: none; vertical-align: middle; }
/* Directional glyphs mirror with the writing direction; the rest of the set
   must not - a lotus flipped in Arabic is just a broken lotus. */
[dir="rtl"] .ico-arrow { transform: scaleX(-1); }


/* Generated (raster) icon used as a CSS mask, so it recolours with the
   section tone exactly like the drawn set does. A plain <img> would be
   locked to the colour it was generated in. */
.ico-img {
    display: inline-block; flex: none; vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
}

/* ── Type scale ─────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; margin: 0; letter-spacing: -0.01em; }

.display { font-size: clamp(3.4rem, 9vw, 8rem);     line-height: 0.92; }
.h1      { font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 1.02; }
.h2      { font-size: clamp(1.9rem, 3.4vw, 3rem);   line-height: 1.1; }
.h3      { font-size: clamp(1.3rem, 2vw, 1.75rem);  line-height: 1.2; }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.7rem; font-weight: 400;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.4rem;
}

.lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--fg-2); max-width: 62ch; font-weight: 300; }
.small { font-size: 0.82rem; color: var(--fg-2); }

em.gold { color: var(--gold-lt); font-style: italic; }

/* ── Divider ────────────────────────────────────────────────────── */

.divider { display: flex; align-items: center; justify-content: center; gap: 18px; padding: clamp(44px, 6vw, 84px) 0; color: var(--accent); }
.divider::before, .divider::after {
    content: ""; height: 1px; flex: 1; max-width: 260px;
    background: linear-gradient(90deg, transparent, var(--hair));
}
.divider::after { background: linear-gradient(270deg, transparent, var(--hair)); }
/* The carved ornament is wide and low - give it room and pull the rules in. */
.divider--art { gap: 26px; }
.divider--art::before, .divider--art::after { max-width: 180px; }

/* ── Header ─────────────────────────────────────────────────────── */

.hdr {
    position: fixed; inset-inline: 0; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    /* The bar has to reach the physical top of the screen, not the top of the
       safe area. Without the inset the header stops below the notch and the
       page background shows through above it as a separate strip - which is
       exactly what "detached" looked like on a real phone. Paired with
       viewport-fit=cover in the viewport meta; one without the other does
       nothing. */
    padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 34px;
    color: #F8F3E8;
    /* A long, gentle fade. At 0.9 over 77px this was effectively an opaque bar
       with a hard bottom edge, which read as chrome sitting on top of the page
       rather than part of it. */
    background: linear-gradient(
        180deg,
        rgba(23, 18, 12, 0.62) 0%,
        rgba(23, 18, 12, 0.34) 42%,
        rgba(23, 18, 12, 0.12) 72%,
        rgba(23, 18, 12, 0) 100%
    );
    transition: background 0.35s ease, backdrop-filter 0.35s ease, color 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}
/* Scrolled header. Which of the two it uses is decided at runtime from the
   tone of the section actually passing underneath - a permanently pale bar
   floating over a dark section is exactly what made the chrome look detached
   from the page. */
.hdr.solid { backdrop-filter: blur(16px) saturate(1.15); }
.hdr.solid.over-light {
    background: rgba(245, 238, 225, 0.9);
    border-bottom-color: rgba(46, 36, 24, 0.1);
    color: #2E2418;
}
.hdr.solid.over-dark {
    background: rgba(23, 18, 12, 0.86);
    border-bottom-color: rgba(232, 206, 134, 0.1);
    color: #F8F3E8;
}

/* Pages that open on a light block start with the light header already on. */
.hdr.on-light:not(.solid) {
    color: #2E2418;
    background: linear-gradient(
        180deg,
        var(--sand-100) 0%,
        rgba(245, 238, 225, 0.86) 55%,
        rgba(245, 238, 225, 0) 100%
    );
}
/* The scrolled state has its own padding - the fade's extra bottom room is
   only needed while the bar is transparent. */
.hdr.solid { padding-block: calc(16px + env(safe-area-inset-top, 0px)) 16px; }

.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand b { font-family: var(--display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.02em; }
.brand span { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; white-space: nowrap; }
@media (max-width: 520px) { .brand span { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
    font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72;
    padding-bottom: 3px; border-bottom: 1px solid transparent;
    transition: opacity 0.25s, border-color 0.25s;
}
.nav a:hover, .nav a.on { opacity: 1; border-bottom-color: var(--gold); }

/* ── Mobile navigation ──────────────────────────────────────────── */

.burger {
    display: none;
    flex: 0 0 44px;                      /* or the nav's flex squeezes it to nothing */
    width: 44px; height: 44px;           /* full touch target, not a 24px icon */
    align-items: center; justify-content: center;
    flex-direction: column; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.burger span {
    display: block; width: 22px; height: 1.5px; background: currentColor;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.burger.on span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger.on span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.sheet {
    position: fixed; inset: 0; z-index: 99;
    background: var(--brown-900);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter)
             calc(48px + env(safe-area-inset-bottom, 0px));
    color: #F8F3E8;
}
.sheet[hidden] { display: none; }
.sheet__nav { display: flex; flex-direction: column; gap: 4px; }
.sheet__nav a {
    font-family: var(--display); font-size: clamp(2.1rem, 9vw, 3rem);
    line-height: 1.25; padding: 10px 0;   /* keeps every row past 44px tall */
    border-bottom: 1px solid rgba(232, 206, 134, 0.1);
}
.sheet__nav a:last-child { border-bottom: 0; }
.sheet__foot {
    margin-top: auto; padding-top: 32px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #85765F;
}

@media (max-width: 940px) {
    .nav .hide-sm { display: none; }
    .burger { display: flex; }
}

.lang-wrap { position: relative; }
.lang {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px;
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: inherit; border: 1px solid currentColor; border-radius: 999px;
    padding: 6px 12px; cursor: pointer; background: transparent;
    font-family: var(--sans); opacity: 0.6; transition: opacity 0.25s;
}
.lang:hover, .lang.on { opacity: 1; }
.lang svg { transition: transform 0.25s; }
.lang.on svg { transform: rotate(180deg); }

/* Fifteen languages is too many for a row of links, so it is a menu. Pinned
   to the button's inline-end so it never runs off the screen edge - and that
   is inset-inline, not right, or it would hang off the page in Arabic. */
.lang-menu {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
    z-index: 120; margin: 0; padding: 8px 0; list-style: none;
    min-width: 168px; max-height: min(70vh, 520px); overflow-y: auto;
    background: var(--brown-900); color: #F8F3E8;
    border: 1px solid rgba(232, 206, 134, 0.16); border-radius: 4px;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
    display: block; padding: 10px 18px;      /* 40px rows - thumb-sized */
    font-size: 0.92rem; opacity: 0.72; white-space: nowrap;
    transition: opacity 0.2s, background 0.2s;
}
.lang-menu a:hover { opacity: 1; background: rgba(232, 206, 134, 0.07); }
.lang-menu a.on { opacity: 1; color: var(--gold-lt); }

/* ── Hero ───────────────────────────────────────────────────────── */

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__img::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(23,18,12,0.68) 0%, rgba(23,18,12,0.1) 34%, rgba(23,18,12,0.78) 80%, var(--brown-900) 100%),
        radial-gradient(120% 80% at 15% 90%, rgba(23,18,12,0.8), transparent 62%);
}
.hero__body { position: relative; z-index: 2; width: 100%; padding-block: 0 clamp(56px, 9vh, 120px); }
.hero .display { max-width: 15ch; text-shadow: 0 2px 40px rgba(0,0,0,0.45); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; align-items: center; }

/* ── Buttons ────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 0.74rem; font-weight: 400;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 15px 30px; border-radius: 2px; cursor: pointer;
    border: 1px solid var(--hair); color: inherit; background: transparent;
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.15s;
}
.btn:hover { border-color: var(--accent-solid); background: color-mix(in srgb, var(--accent-solid) 10%, transparent); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-on); font-weight: 500; }
.btn--solid:hover { filter: brightness(1.08); background: var(--accent-solid); color: var(--accent-on); }

/* ── Sections ───────────────────────────────────────────────────── */

.sec { padding-block: clamp(64px, 9vw, 130px); }
.sec__head { margin-bottom: clamp(34px, 5vw, 62px); }
.sec__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

/* ── Featured: editorial, deliberately not a uniform grid ───────── */

.feat { display: grid; gap: clamp(18px, 2.4vw, 34px); grid-template-columns: repeat(12, 1fr); }
.feat > * { grid-column: span 12; }
@media (min-width: 860px) {
    .feat__a { grid-column: span 7; }
    .feat__b { grid-column: span 5; align-self: end; }
    .feat__c { grid-column: 3 / span 5; }
    .feat__d { grid-column: span 4; align-self: center; }
}

/* ── Artwork card = product card ────────────────────────────────── */

.card { position: relative; display: block; }
.card__media { position: relative; overflow: hidden; background: var(--surface-2); }
.card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--hair-soft);
    transition: box-shadow 0.35s;
}
.card:hover .card__media::after { box-shadow: inset 0 0 0 1px var(--accent-solid); }

.card__body { padding: 16px 2px 4px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card__title { font-family: var(--display); font-size: 1.4rem; font-weight: 400; line-height: 1.15; }
.card__sub { font-size: 0.76rem; color: var(--fg-3); letter-spacing: 0.06em; margin-top: 5px; }
.card__price { font-size: 0.82rem; color: var(--accent); white-space: nowrap; text-align: end; }
.card__price small { display: block; color: var(--fg-3); font-size: 0.72rem; }

.badge {
    position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
    font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 2px;
    background: rgba(23,18,12,0.62); color: #F6F0E4; backdrop-filter: blur(10px);
    border: 1px solid rgba(246,240,228,0.2);
}
.badge--sold     { color: #E0CBBA; }
.badge--reserved { color: #F0CE84; }
.badge--available{ color: #BFE0A8; }

/* ── Catalog ────────────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 4vw, 46px); }
.pill {
    font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--hair); background: transparent; color: var(--fg-2);
    transition: all 0.25s;
}
.pill:hover { color: var(--fg); border-color: var(--accent-solid); }
.pill.on { color: var(--accent-on); background: var(--accent-solid); border-color: var(--accent-solid); font-weight: 500; }
.pill .n { opacity: 0.6; margin-inline-start: 7px; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

/* ── Artwork detail ─────────────────────────────────────────────── */

.work { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 980px) { .work { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr); } }

.work__frame {
    position: relative; background: var(--surface);
    padding: clamp(16px, 2.4vw, 34px);
    box-shadow: 0 30px 70px -46px rgba(30, 22, 12, 0.55);
}
.work__frame img { width: 100%; cursor: zoom-in; }
.work__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--hair); pointer-events: none; }

.work__panel { position: sticky; top: 96px; }
.spec { border-top: 1px solid var(--hair-soft); display: grid; grid-template-columns: 40% 1fr; }
.spec > div { padding: 13px 0; border-bottom: 1px solid var(--hair-soft); }
.spec dt { color: var(--fg-3); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.spec dd { margin: 0; font-size: 0.95rem; }

.price-block { margin: 26px 0; padding: 22px; border: 1px solid var(--hair); background: var(--surface); }
.price-block .amount { font-family: var(--display); font-size: 2.1rem; color: var(--accent); line-height: 1; }
.price-block .approx { font-size: 0.8rem; color: var(--fg-3); margin-top: 6px; }
.price-block .onreq { font-family: var(--display); font-size: 1.5rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cta-row .btn { flex: 1 1 auto; justify-content: center; }

/* ── Services ───────────────────────────────────────────────────── */

.svc {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--hair-soft); background: var(--surface);
    transition: border-color 0.3s, transform 0.3s;
}
.svc:hover { border-color: var(--accent-solid); transform: translateY(-3px); }
.svc .ico-svg { color: var(--accent); }
.svc h3 { margin: 16px 0 8px; }
.svc p { margin: 0; color: var(--fg-2); font-size: 0.92rem; }
.svc__meta { margin-top: 16px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

/* ── Story ──────────────────────────────────────────────────────── */

.story { display: grid; gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (min-width: 900px) { .story { grid-template-columns: 0.95fr 1.05fr; } }
.story__img { position: relative; }
.story__img img { width: 100%; }
.story__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--hair); }

.quote { max-width: 26ch; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.25; }
.quote cite { display: block; margin-top: 18px; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-style: normal; }

/* ── Exhibitions ────────────────────────────────────────────────── */

.exh { border-top: 1px solid var(--hair-soft); }
.exh__row { display: grid; grid-template-columns: 88px 1fr; gap: clamp(14px, 3vw, 40px); padding: 17px 0; border-bottom: 1px solid var(--hair-soft); align-items: baseline; }
.exh__yr { font-family: var(--display); font-size: 1.5rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.exh__items { margin: 0; padding: 0; list-style: none; color: var(--fg-2); }
.exh__items li + li { margin-top: 5px; }

/* ── Contact ────────────────────────────────────────────────────── */

.chans { display: grid; gap: 1px; background: var(--hair-soft); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.chan { background: var(--bg); padding: 28px; transition: background 0.3s; }
.chan:hover { background: var(--surface); }
.chan .ico-svg { color: var(--accent); }
.chan dt { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-3); margin: 14px 0 6px; }
.chan dd { margin: 0; font-size: 1.02rem; }

footer { padding: 34px 0; border-top: 1px solid var(--hair-soft); color: var(--fg-3); font-size: 0.78rem; }
.foot { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; }

/* ── Lightbox ───────────────────────────────────────────────────── */

.lb { position: fixed; inset: 0; z-index: 500; background: rgba(23,18,12,0.96); display: none; align-items: center; justify-content: center; padding: 3vw; cursor: zoom-out; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 94svh; object-fit: contain; box-shadow: 0 30px 120px rgba(0,0,0,0.7); }
.lb__close { position: absolute; top: 20px; inset-inline-end: 24px; color: #D9CDB8; font-size: 30px; background: none; border: 0; cursor: pointer; }

/* ── Reveal ─────────────────────────────────────────────────────── */

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .rv { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .card__media img { transition: none; }
}

/* ── Draft ribbon - remove before launch ────────────────────────── */

.draft {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 400;
    background: var(--gold); color: #1A1409;
    font-size: 0.72rem; letter-spacing: 0.1em; text-align: center;
    padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0px));
    font-weight: 500;
}