/* =====================================================================
 * luxury.css — Disambi "Luxury / Editorial" visual layer
 * Additive overlay on the existing design tokens in components.css.
 * Load AFTER all existing stylesheets in base.html.
 * Toggle dark/light by setting  data-theme="light"  on <html> or <body>.
 * Ported from the HTML/React design prototype (design reference only).
 * ===================================================================== */

/* ── Light mode overrides ── */
    [data-theme="light"] {
      /* Creamish-sepia base, keyed to the mandala/art-deco gold motif
         (prototype cream: #FAF4EA glass / #F5EBDA overlays). */
      --bg-primary: #F2E8D5;
      --bg-elevated: #FBF6EC;
      --bg-subtle: #EBE0CB;
      --border-subtle: #DBD0BB;
      --text-primary: #1C1209;
      --text-secondary: #6B5B50;
      --text-tertiary: #9C8C82;
      /* Text-carrying copper and blue, dropped until they clear AA on cream.
         #FF6A00 measures 2.3-2.5:1 against these creams and #007BFF 3.2-3.5:1,
         both under the 4.5:1 small-text floor and neither reachable by any
         amount of background tuning — it is the ink that has to move. Still
         recognisably copper and brand blue, just carried down. */
      --copper-ink: #A84100;
      --blue-ink: #0056B3;
    }
    /* An opt-out from the site-wide motif veil: the mandala composites badly over this
       full-bleed banner photo. The creator profile's grid and avatars opt out too. */
    .landing .hero { z-index: 1; }

    /* ── Hero scrim ──
     * Every stop is derived from --bg-primary rather than written out, so the
     * bottom of the photograph IS the page colour and the two cannot drift
     * apart. They had: the scrim ended on a hardcoded cool white at 94% while
     * the page under it was warm cream, which is what put a visible ledge
     * across the bottom of the hero. */
    .landing .hero__overlay {
      background:
        linear-gradient(to right,
          rgb(from var(--bg-primary) r g b / 0.93) 0%,
          rgb(from var(--bg-primary) r g b / 0.82) 32%,
          rgb(from var(--bg-primary) r g b / 0.50) 58%,
          rgb(from var(--bg-primary) r g b / 0) 82%),
        linear-gradient(to bottom,
          rgb(from var(--bg-primary) r g b / 0) 0%,
          rgb(from var(--bg-primary) r g b / 0.20) 45%,
          rgb(from var(--bg-primary) r g b / 0.72) 82%,
          var(--bg-primary) 100%) !important;
    }

    /* ── Hero: text sits directly on the photo — no glass panel ── */
    .landing .hero__inner {
      display: flex !important;
      align-items: flex-end !important;
      justify-content: flex-start !important;
      min-height: inherit;
      padding-bottom: 72px !important;
    }
    .landing .hero__left {
      max-width: 640px;
      width: 100%;
      align-self: flex-end;
    }
    .landing .hero__headline { text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 6px 30px rgba(0,0,0,0.85); }
    .landing .hero__subhead {
      color: var(--text-primary);
      text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 2px 18px rgba(0,0,0,0.8);
    }

    /* The hero's eyebrow used to branch here. It is --blue-ink on .ds-eyebrow
       now (components.css), which is the same two values applied everywhere
       rather than only where someone happened to measure. */

    /* ── Hero scrim: light ──
     * The photograph is a dim studio interior, so on cream it read as a dark
     * rectangle wearing a veil — heaviest exactly where the veil ran out, on
     * the right. Rather than thickening the veil (which just greys the image),
     * the backdrop is printed in the page's own ink: lifted out of shadow,
     * desaturated and warmed until it sits inside the cream palette. The veil
     * on top can then be lighter, so more of the photograph survives.
     *
     * backdrop-filter only touches what is painted behind this element — the
     * hero's background-image. The headline and buttons are in .hero__inner
     * above it and are unaffected. */
    [data-theme="light"] .landing .hero__overlay {
      /* No backdrop-filter here any more, and no top-right radial. Both existed
         to fake daylight out of the night frame: the brightness/saturate/sepia/
         contrast stack raised a black point that a properly exposed daytime
         render does not have, and the radial seated the one genuinely black
         corner against the cream nav. That corner is sunlit concrete now.
         Against the real day frame the stack only washed the room out. */
      background:
        /* Kept, and load-bearing. The headline and subhead go dark ink in light
           mode (just below), so the left third has to stay cream enough to read
           against — the window behind it is the brightest part of the frame.
           This is contrast, not decoration; thinning it fails the hero copy. */
        linear-gradient(to right,
          rgb(from var(--bg-primary) r g b / 0.93) 0%,
          /* Holds to 44% because the copy column ends at ~54% of a 1440 viewport
             and the eyebrow used to land on a half-veiled mid-tone. Falls away
             fast after it so the lit half of the room still reads. */
          rgb(from var(--bg-primary) r g b / 0.90) 52%,
          rgb(from var(--bg-primary) r g b / 0.52) 64%,
          rgb(from var(--bg-primary) r g b / 0) 80%),
        linear-gradient(to bottom,
          rgb(from var(--bg-primary) r g b / 0) 0%,
          rgb(from var(--bg-primary) r g b / 0) 56%,
          rgb(from var(--bg-primary) r g b / 0.38) 80%,
          var(--bg-primary) 100%) !important;
    }
    /* ── Hero scrim: narrow viewports ──
     * The scrims above run left-to-right because on a wide screen the copy sits
     * in the left third and the room reads to the right of it. Below ~720px the
     * copy is full-width, so a horizontal ramp veils the wrong half: the ends of
     * the subhead lines land on the bare photo. Measured against what is painted
     * behind the glyphs, that put the light-mode subhead at 1.00:1 — the ink and
     * the camera table underneath it were the same luminance, so the line was
     * invisible, not merely low-contrast. Dark mode failed too (4.21:1), because
     * the night frame is a brighter render than the one it replaced.
     *
     * Vertical ramp instead: the photo keeps the top quarter, where the windows
     * and ceiling actually are, and the copy gets a solid ground. One rule for
     * both themes — every stop is --bg-primary, which is cream in light and near
     * black in dark, so the token does the branching.
     *
     * Both selectors are listed because the light rule above is more specific
     * than the base one; matching it here and coming later is what lets this
     * win in both themes. */
    @media (max-width: 720px) {
      .landing .hero__overlay,
      [data-theme="light"] .landing .hero__overlay {
        background:
          linear-gradient(to bottom,
            rgb(from var(--bg-primary) r g b / 0) 0%,
            rgb(from var(--bg-primary) r g b / 0.10) 16%,
            rgb(from var(--bg-primary) r g b / 0.92) 28%,
            rgb(from var(--bg-primary) r g b / 0.96) 70%,
            var(--bg-primary) 100%) !important;
      }
    }

    /* Light scrim is cream on the left, so hero text goes dark and drops its shadow.
       The subhead ink is #422D1D, not the #5a3e2e it used to be: measured against
       what is actually painted behind the glyphs, the old value was 4.22:1 — under
       AA for 18px body copy — before the daytime frame existed, and the brighter
       frame only widened the gap. Darkening the ink fixes it without thickening the
       veil, which is what was flattening the photograph. Now ~5:1. */
    [data-theme="light"] .landing .hero__headline { color: var(--text-primary) !important; text-shadow: none !important; }
    [data-theme="light"] .landing .hero__subhead { color: #422D1D !important; text-shadow: none !important; }

    /* ── Hero CTAs: both buttons identical, copper hover fill ── */
    /* Light mode: solid ink background */
    [data-theme="light"] .hero__ctas .ds-btn--primary,
    [data-theme="light"] .hero__ctas .ds-btn--secondary { background: var(--text-primary) !important; color: #fff !important; border-color: var(--text-primary) !important; }
    [data-theme="light"] .hero__ctas .ds-btn--primary .ds-btn__fill,
    [data-theme="light"] .hero__ctas .ds-btn--secondary .ds-btn__fill { background: var(--copper) !important; }
    /* Dark mode: solid charcoal, white text, subtle border — same for both buttons */
    [data-theme="dark"] .hero__ctas .ds-btn { color: #fff !important; border-color: rgba(255,255,255,0.22) !important; background: rgba(13,13,13,0.8) !important; }
    [data-theme="dark"] .hero__ctas .ds-btn .ds-btn__fill { background: var(--copper) !important; }

    .p-nav__link { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: color 0.2s; white-space: nowrap; }
    .p-nav__link--gated { opacity: 0.6; cursor: not-allowed; pointer-events: none; position: relative; display: inline-flex; align-items: center; gap: 6px; }
    .p-nav__link-soon { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--copper-ink); border: 1px solid var(--copper-border); background: var(--copper-tint); padding: 2px 5px; opacity: 1; }
    /* NB: this selector was corrupted in the port (dangling body after
       .p-nav__link-soon) — the theme-toggle button had no base style. Restored. */
    .p-nav__notif { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; transition: all 0.2s; position: relative; }
    @media (hover: hover) and (pointer: fine) {
      .p-nav__notif:hover { border-color: var(--copper-border); color: var(--copper-ink); }
    }
    .p-role-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
    .p-role-card { border: 1px solid var(--border-subtle); padding: 18px; cursor: pointer; transition: all 0.2s; }
    @media (hover: hover) and (pointer: fine) {
      .p-role-card:hover { border-color: var(--copper-border); }
    }
    .p-role-card__icon { font-size: 1.4rem; color: var(--copper-ink); margin-bottom: 8px; }
    .p-role-card__title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 4px; }
    .p-role-card__desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
    /* ── Campaign image slot: grayscale → cinematic reveal ── */
    .landing-img-slot {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      /* Letting go, by mouse or finger: the glow and edge taper off together. */
      transition: border-color var(--motion-linger) var(--ease-linger),
                  box-shadow var(--motion-linger) var(--ease-linger);
    }
    /* The gradient edge, as on .fcard: on ::after so its opacity can fade.
     * border-image on the slot popped on and off around the fading glow.
     * Drawn just inside the grey border, which fades out as this fades in,
     * so the slot shows one edge, not two. */
    .landing-img-slot::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid transparent;
      border-image: linear-gradient(90deg, #FF6A00 0%, #B7A8FF 50%, #007BFF 100%) 1;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-linger) var(--ease-linger);
    }
    .landing-img-slot img {
      filter: grayscale(1);
      transition: filter var(--motion-cinematic) var(--ease-lux),
                  box-shadow var(--motion-slow) var(--ease-lux);
      display: block;
    }
    @media (hover: hover) and (pointer: fine) {
      .landing-img-slot:hover {
        border-color: transparent;
        box-shadow: 0 0 20px rgba(255, 106, 0, 0.25),
                    0 0 20px rgba(0, 123, 255, 0.25);
        transition: border-color var(--motion-base) var(--ease-lux),
                    box-shadow var(--motion-base) var(--ease-lux);
      }
      .landing-img-slot:hover::after {
        opacity: 1;
        transition: opacity var(--motion-base) var(--ease-lux);
      }
    }
    @media (hover: hover) and (pointer: fine) {
      .landing-img-slot:hover img {
        filter: grayscale(0);
        box-shadow: inset 0 0 0 1px rgba(194,97,50,0.22);
      }
    }


    .d-nav__item--locked { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

    /* ── Collapsible sidebar ── */
    /* Moved to dashboard.css. base.html loads THIS file before the page
       stylesheet, so the `.dashboard .d-shell--collapsed` override here was
       losing at equal specificity to dashboard.css's own `.dashboard .d-shell`
       rule — the rail never narrowed. All `.d-sidebar*` rules now live in
       dashboard.css, next to the rest of the `.d-*` layout. */

    /* ── Country select dropdown ── */
    .cb-country-btn { display: flex; align-items: center; gap: 6px; cursor: pointer; min-width: 180px; text-align: left; }
    .cb-country-drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-top: 2px solid var(--copper); z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.28); }
    .cb-country-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); transition: background 0.15s; }
    @media (hover: hover) and (pointer: fine) {
      .cb-country-opt:hover:not(.cb-country-opt--gated) { background: var(--bg-subtle); color: var(--text-primary); }
    }
    .cb-country-opt--active { color: var(--copper-ink) !important; background: var(--copper-tint) !important; }
    .cb-country-opt--gated { opacity: 0.45; cursor: not-allowed; }
    .cb-country-iso { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-tertiary); flex-shrink: 0; width: 24px; }
    .cb-country-name { flex: 1; }
    /* ── Eyebrow legibility — global override (keeps copper, sharpens readability) ── */
    .ds-eyebrow {
      font-size: 0.8rem !important;
      letter-spacing: 0.16em !important;
      font-weight: 600 !important;
    }
    .hero .ds-eyebrow {
      font-size: 0.85rem !important;
      letter-spacing: 0.14em !important;
      text-shadow: 0 1px 8px rgba(0,0,0,0.7);
    }

    /* ── Avatar dropdown ── */
    .p-nav__avatar-wrap { position: relative; flex-shrink: 0; }
    .p-nav__avatar { width: 36px; height: 36px; background: var(--copper); color: #fff; border: none; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: box-shadow var(--motion-fast) var(--ease-lux); }
    @media (hover: hover) and (pointer: fine) {
      .p-nav__avatar:hover { box-shadow: 0 0 0 2px rgba(194,97,50,0.4); }
    }
    .p-nav__dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-top: 2px solid var(--copper); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
    .p-nav__drop-user { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-subtle); }
    .p-nav__drop-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
    .p-nav__drop-role { font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
    .p-nav__drop-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
    .p-nav__drop-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; transition: background var(--motion-fast) var(--ease-lux), color var(--motion-fast) var(--ease-lux); }
    @media (hover: hover) and (pointer: fine) {
      .p-nav__drop-item:hover { background: var(--bg-subtle); color: var(--text-primary); }
    }
    .p-nav__drop-item--danger { color: var(--danger-text); }
    @media (hover: hover) and (pointer: fine) {
      .p-nav__drop-item--danger:hover { background: var(--danger-tint); color: var(--danger-text); }
    }
    [data-theme="light"] .p-nav__dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

    /* ── Light mode: button legibility — dark ink base + copper slide across all variants ── */
    [data-theme="light"] .ds-btn {
      background: var(--text-primary) !important;
      color: #fff !important;
      border-color: var(--text-primary) !important;
    }
    [data-theme="light"] .ds-btn .ds-btn__fill { background: var(--copper) !important; }
    [data-theme="light"] .ds-btn--secondary {
      background: transparent !important;
      color: var(--text-primary) !important;
      border-color: var(--text-primary) !important;
    }
    [data-theme="light"] .ds-btn--secondary .ds-btn__fill { background: var(--copper) !important; }
    @media (hover: hover) and (pointer: fine) {
      [data-theme="light"] .ds-btn--secondary:hover { color: #fff !important; border-color: var(--copper) !important; }
    }
    [data-theme="light"] .ds-btn--solid {
      background: var(--copper) !important;
      color: #fff !important;
    }
    /* Hero-mode CTA treatment (both buttons solid ink, copper slide) lives in the
       hero block above — the old cream-glass secondary override was removed with the panel. */
    [data-theme="light"] .p-nav__notif { color: var(--copper-ink) !important; border-color: var(--copper-border) !important; }
    [data-theme="light"] .p-nav__avatar { background: var(--copper) !important; }




    .footer-socials { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 1.25rem; }
    .social-link { color: var(--text-secondary); font-size: 1.5rem; line-height: 1; display: inline-flex; transition: color var(--motion-fast) var(--ease-lux); text-decoration: none; }
    @media (hover: hover) and (pointer: fine) {
      .social-link:hover { color: var(--copper-ink); }
    }

    /* ══════════════════════════════════════════════════════════════════
     * Luxury / Editorial layer — additive overlay on Disambi's tokens.
     * No token values, class names, or component structures changed.
     * Implements: noise · gridlines · grayscale reveals · vertical label
     *             drop cap · shadow evolution · inner borders · type scale
     * ══════════════════════════════════════════════════════════════════ */

    /* 1 ── Paper noise texture */
    .p-noise {
      position: fixed; inset: 0; z-index: 9998;
      pointer-events: none; user-select: none; opacity: 0.028;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
    }

    /* 2 ── Geometric background pattern (dark) / editorial gridlines (light) */

    body::before {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      opacity: 1;
    }
    /* Dark mode: original uploaded Art Deco tile + ornate mandala */
    [data-theme="dark"] body::before {
      background-image: url("/static/img/artdeco-tile.5958252fbd03.jfif");
      background-size: 275px auto;
      background-repeat: repeat;
      opacity: 0.08;
      mix-blend-mode: normal;
    }
    [data-theme="dark"] body::after {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      background-image: url("/static/img/mandala-centerpiece.522c73863283.webp");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      /* The .avif this used to point at was RGB with NO alpha: a gold ornament
       * with near-black baked in behind it. At opacity 0.1 it moved the mean
       * pixel 1.1/255 -- invisible, because what was being faded in was mostly
       * the black rectangle. mix-blend-mode: screen fixed that in Chromium by
       * making black the identity, and did nothing in Safari, where blending a
       * position:fixed layer is a long-standing WebKit weak spot.
       *
       * So the alpha is now baked into the asset instead of recomputed at paint
       * time: mandala-centerpiece.webp carries luminance as its alpha channel.
       * No blend mode, no AVIF support question (WebP reaches Safari 14), and
       * plain opacity means what it says. 62 KB for a decorative layer on a
       * mobile-first site; regenerate from the .avif in git history if the
       * motif is ever re-cut. */
      opacity: 0.32;
    }
    /* Light mode runs bare — no tile, no bloom.
     * The motif was drawn for the dark palette, where gold-on-near-black reads
     * as embossing in the paper. Multiplied into cream it has nothing to catch
     * the light against, so it lands as grey lattice over every surface and
     * every page, competing with the content instead of sitting under it.
     * Dark mode keeps both layers; this is a light-mode decision only.
     *
     * (This also retires four rules that were fighting each other: ::before was
     * declared twice, and ::after was set to display:none directly above the
     * block that defined it — so the bloom had never actually rendered here.) */
    [data-theme="light"] body::before,
    [data-theme="light"] body::after {
      display: none;
    }
    @media (max-width: 768px) { body::before { display: none; } }

    /* 3 ── Grayscale → cinematic color reveal on creator cards */
    .cb-card__cover {
      filter: grayscale(0.92);
      transition: filter var(--motion-cinematic) var(--ease-lux),
                  box-shadow var(--motion-slow) var(--ease-lux);
      overflow: hidden;
    }
    .cb-card-link:focus-visible .cb-card__cover {
      filter: grayscale(0);
      box-shadow: inset 0 0 0 1px rgba(194,97,50,0.22);
    }
    @media (hover: hover) and (pointer: fine) {
      .cb-card-link:hover .cb-card__cover {
        filter: grayscale(0);
        box-shadow: inset 0 0 0 1px rgba(194,97,50,0.22);
      }
    }
    /* Subtle scale inside the cover on hover */
    .cb-card__cover > * {
      transition: transform var(--motion-cinematic) var(--ease-lux);
    }
    @media (hover: hover) and (pointer: fine) {
      .cb-card-link:hover .cb-card__cover > * {
        transform: scale(1.04);
      }
    }

    /* 4 ── Card shadow evolution (lift + copper glow) */
    .cb-card {
      transition: box-shadow var(--motion-slow) var(--ease-lux),
                  transform var(--motion-slow) var(--ease-lux) !important;
    }
    @media (hover: hover) and (pointer: fine) {
      .cb-card-link:hover .cb-card {
        box-shadow: 0 16px 48px rgba(194,97,50,0.16), 0 2px 8px rgba(0,0,0,0.3) !important;
        transform: translateY(-2px);
      }
    }

    /* 9 ── Hero headline: extended scale at wide viewports — scoped to non-panel context */
    @media (min-width: 1280px) {
      .landing .section__title { font-size: clamp(2.5rem, 4.5vw, 4rem); }
    }

    /* 10 ── Section title: decorative left-border on hover */
    @media (hover: hover) and (pointer: fine) {
      .landing .step:hover {
        padding-left: 12px;
        transition: padding var(--motion-slow) var(--ease-lux),
                    border-color var(--motion-slow) var(--ease-lux),
                    background var(--motion-slow) var(--ease-lux) !important;
      }
    }

    /* 11 ── Pill tags: slow luxury hover */
    .landing .pill-tag {
      transition: border-color var(--motion-slow) var(--ease-lux),
                  color var(--motion-slow) var(--ease-lux),
                  background var(--motion-slow) var(--ease-lux) !important;
    }
    @media (hover: hover) and (pointer: fine) {
      .landing .pill-tag:hover {
        background: var(--copper-tint) !important;
      }
    }

    /* ── Hero legibility — handled above ── */
    .landing .hero__subhead {
      color: rgba(255,255,255,0.88) !important;
      text-shadow: 0 1px 12px rgba(0,0,0,0.6);
    }
    .landing .hero__headline {
      text-shadow: 0 2px 16px rgba(0,0,0,0.5);
    }


/* ── Repo nav (.site-nav) — light mode ──────────────────────────────────────
   luxury.css's own light nav rules target .p-nav (the prototype class), but our
   base.html nav container is .site-nav, so without this it stays a dark strip on
   the cream page. Warm cream frosted bar to match the sepia palette. */
[data-theme="light"] nav.site-nav {
  background: rgba(246,238,224,0.95);
  border-bottom: 1px solid rgba(194,97,50,0.16);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* ── Copper scrollbar (restored from prototype; visible on scroll/touch) ── */
* { scrollbar-width: thin; scrollbar-color: var(--copper) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--copper); }
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover { background: var(--copper-hover); }
}

/* ── Buttons: never distort when the row is squeezed on narrow displays ── */
.ds-btn { flex-shrink: 0; white-space: nowrap; max-width: 100%; }

/* ── Hero CTA: gentle fade-in entrance ── */
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__ctas .ds-btn { animation: ds-fade-in 0.7s var(--ease-lux) 0.15s backwards; } /* not both: a held transform would block the press scale */
@media (prefers-reduced-motion: reduce) { .hero__ctas .ds-btn { animation: none; } }

/* ── Role selector: label-cards with CSS-only selected state (no JS) ── */
.p-role-card { display: block; position: relative; }
.p-role-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.p-role-card:has(input:checked) { border-color: var(--copper); background: var(--copper-tint); }
.p-role-card:has(input:focus-visible) { outline: 3px solid rgba(194,97,50,0.22); outline-offset: 3px; }

/* ── Mobile menu panel: themed (was hardcoded dark inline -> dark-on-dark in light) ── */
#mobile-menu { background: rgba(8,8,9,0.97); border-top: 1px solid rgba(255,255,255,0.06); }
[data-theme="light"] #mobile-menu { background: rgba(246,238,224,0.98); border-top: 1px solid rgba(194,97,50,0.16); }

/* ── Mobile hamburger toggle: copper icon + bordered box, legible in both modes ── */
.nav-hamburger { display: inline-flex; align-items: center; justify-content: center; color: var(--copper-ink); border: 1px solid var(--border-subtle); background: transparent; transition: all 0.2s; }
@media (hover: hover) and (pointer: fine) {
  .nav-hamburger:hover { border-color: var(--copper-border); background: var(--copper-tint); }
}

    /* ══════════════════════════════════════════════════════════════════
     * TOUCH — the luxury layer's own reveals, rebound for (hover: none)
     *
     * Everything above is keyed to a pointer that can rest on a thing without
     * committing to it. A touch screen has no such state: a finger is either
     * not there or has already tapped. So the reveals (grayscale, scale) are
     * given at rest, and the ones that read as feedback (lift, left-slide,
     * pill fill) move to :active, which fires for the duration of a press.
     * ══════════════════════════════════════════════════════════════════ */
    @media not all and (hover: hover) and (pointer: fine) {
      /* 3 ── reveals spent at rest: nothing can hover to earn them */
      .cb-card__cover      { filter: grayscale(0); }
      .landing-img-slot img { filter: grayscale(0); }

      /* The hover edge and glow, on a press; they linger out on the base
       * transitions once the finger lifts. */
      .landing-img-slot:active::after {
        opacity: 1;
        transition: opacity var(--motion-press) var(--ease-press) 70ms;
      }
      .landing-img-slot:active {
        border-color: transparent;
        box-shadow: 0 0 20px rgba(255, 106, 0, 0.25),
                    0 0 20px rgba(0, 123, 255, 0.25);
        transition: box-shadow var(--motion-press) var(--ease-press) 70ms,
                    border-color var(--motion-press) var(--ease-press) 70ms;
      }

      /* 3 / 4 ── card lift + cover scale on press */
      .cb-card-link:active .cb-card__cover {
        box-shadow: inset 0 0 0 1px rgba(194,97,50,0.22);
      }
      /* The press lands in 160ms (the desktop reveal's 700ms read as lag) and
       * tapers back over 600ms once the finger lifts. The 70ms delay on the
       * press: browsers set :active as a finger lands, before they know it is
       * a scroll, and the scroll clears it before the delay ends. The touch
       * timing lives here because the .cb-card transition above is !important. */
      .cb-card-link:active .cb-card {
        box-shadow: 0 16px 48px rgba(194,97,50,0.16), 0 2px 8px rgba(0,0,0,0.3) !important;
        transform: scale(0.98);
        transition: box-shadow var(--motion-press) var(--ease-press) 70ms,
                    transform var(--motion-press) var(--ease-press) 70ms,
                    border-color var(--motion-press) var(--ease-press) 70ms !important;
      }
      .cb-card {
        transition: box-shadow var(--motion-release) var(--ease-release),
                    transform var(--motion-release) var(--ease-release),
                    border-color var(--motion-release) var(--ease-release) !important;
      }
      .landing .pill-tag {
        transition: border-color var(--motion-release) var(--ease-release),
                    color var(--motion-release) var(--ease-release),
                    background var(--motion-release) var(--ease-release) !important;
      }
      .landing .pill-tag:active {
        transition: border-color var(--motion-press) var(--ease-press),
                    color var(--motion-press) var(--ease-press),
                    background var(--motion-press) var(--ease-press) !important;
      }
      @media (prefers-reduced-motion: reduce) {
        .cb-card-link:active .cb-card { transform: none; }
      }
      /* Hero CTAs: copper edge at rest, since nothing can hover to reveal it. */
      [data-theme] .hero__ctas .ds-btn { border-color: var(--copper-border) !important; }

      /* 10 ── no left-slide on touch: it animated padding (layout every frame)
       * and jolted the text sideways under the finger. The glow answers instead. */

      /* 11 ── pill fill on press */
      .landing .pill-tag:active {
        background: var(--copper-tint) !important;
        border-color: var(--copper);
        color: var(--text-primary);
      }
    }