@font-face{ font-family:'Clash Grotesk'; src:url('/home/vendor/fonts/ClashGrotesk-Variable.woff2') format('woff2');
    font-weight:200 700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Inter'; src:url('/fonts/InterVariable-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
  :root{ --font-display:'Unbounded',-apple-system,system-ui,sans-serif; --font-text:'Inter',-apple-system,system-ui,sans-serif; }
  /* THE EVENT PAGE'S TYPE SYSTEM (Max, 26-28 Sep 2026, the design lab's BUILD-SPEC §2). Inter for
     everything on an event page; Unbounded only on the Ini button's label. --font-read is NOT one
     of the seats platform/p's applyTheme writes (a font duo swaps --font-display/--font-text), so
     a duo keeps dressing personal pages and never reaches an event card, peek or drawer. One
     scale: labels 11 · fine print 12 · small info 13 · body 15 · titles and buttons 17 · sheet
     headings 24. Card text never below 13 once scaled. */
  :root{ --font-read:'Inter',-apple-system,system-ui,sans-serif; --font-ini:'Unbounded',-apple-system,system-ui,sans-serif;
    --ts-label:11px; --ts-fine:12px; --ts-small:13px; --ts-body:15px; --ts-title:17px; --ts-sheet:24px;
    --ini-lime:#a8ff00; --ini-ink:#111; }
  *{ box-sizing:border-box; }
  :root{ --pg:#0b0908; }
  /* iOS 26 chrome: the bars are native Liquid Glass that BLUR whatever scrolls behind them. They
     only turn into a solid BAND when a position:fixed element with a solid background sits at a
     viewport edge — so the ground below is absolute inside the runway, never fixed. --pg is the
     fallback colour iOS lands on at a scroll extreme; the JS sampler keeps it matched to the
     ground's own tone so any fallback reads as the photo, not a flat dark strip.
     overflow-x:clip on html (not body) → a side card can't make the document scroll sideways
     while vertical scrolling stays intact. See the project_ios_safari_band notes. */
  html{ background:var(--pg); overflow-x:clip; overscroll-behavior:none; overflow-anchor:none; }
  html,body{ margin:0; }
  body{ background:var(--pg); color:#f5f3ef; font-family:var(--font-read); -webkit-font-smoothing:antialiased; touch-action:none;
    overscroll-behavior:none; overflow-anchor:none; -webkit-touch-callout:none; } /* production
    architecture: the page never user-scrolls — deck + sheet own every gesture. The page's voice
    (Inter since 28 Sep 2026; it was Unbounded) and cream ink live HERE: every sheet (RSVP,
    checkout) is a SIBLING of .drawer, so scoping them to the drawer left them on the UA serif.
    A PERSONAL drawer keeps the display voice (.drawer.personal below). */
  .drawer.personal{ font-family:var(--font-display); }

  /* The runway is deliberately TALLER than the viewport and the scroll is pinned at BASE, so the
     document is always in a scrolled state and the chrome composites real content (glass) instead
     of painting a band. Do not shrink it or lock overflow — that's what breaks the effect. */
  .runway{ position:relative; overflow-x:clip; } /* side cards + panel bleed can never widen the
    document (the root clip alone failed on device: HUD showed 346px of scrollable overflow from
    .cf-slot). Everything sits inside the runway's box vertically, so the implied clip-y is free. */
  .cf-hero{ position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; }

  /* ── ground: the centre card's moment, pre-blurred on disk, filling the whole runway so it
     extends above and below the viewport — it is SCROLLING CONTENT, which is what lets the iOS
     chrome glass-blur it edge to edge. It has to genuinely scroll: a counter-translated
     (visually fixed) ground left the bars flat on device, and position:fixed forces a solid
     band outright. NO css filter: the blur is baked on disk. ── */
  .cf-ground{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--pg); }
  .cf-gl{ position:absolute; inset:0; background-position:center; background-size:cover;
    transform:translate(var(--gx,0px),var(--gy,0px)) scale(var(--gscale,1.12));
    opacity:0; transition:opacity var(--gfade,.9s) ease; will-change:opacity; }
  .cf-gl.on{ opacity:1; }
  .cf-gtint{ position:absolute; inset:0;
    background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,var(--glift,0.18)), rgba(0,0,0,var(--gtint,0.62)) 100%); }
  .cf-hero{ z-index:1; }
  /* ═══ PRODUCTION DRAWER — tokens + CSS lifted from viewer/viewer.css. Deviations: --drwr 48
     (Max; production ships 32), z-index 3 (above the coverflow hero), no CTA rules. ═══ */
  :root{ --fs-body:13.5px; --fw-body:540;
    --t-micro:11px; --t-label:12px; --t-facts:14px; --t-title:16px; --t-display:24px;
    --track-micro:0.14em; --track-title:-0.01em; --track-display:-0.02em;
    --hot:#ff4d2e; --fresh:#5fd58f;
    --brand:#A8FF00; /* the logo mark's OWN green — the field of home/vendor/media/icon-512.png (168,255,0), not an eyeballed match. INSIDE_BADGE is a silhouette now and carries no green */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
    --cream:#ece6da; --cream-rgb:236,230,218; --ink:#20180f; --press:transform .14s cubic-bezier(.2,.7,.2,1);
    --sp:34px; --ctar:999px; --drwr:48px;
    --drawer-padb:150px; --sec-divider:rgba(255,255,255,0.1); --fade-top:0px; --fade-bot:0px;
    --map-ph:url(/viewer/map-ph.jpg); } /* the venue-map placeholder behind "Show map". ONE shared file since the static folders retired (19 Sep 2026): every page carried an identical copy, and /demo/assets/ is gone. A theme can still override it (platform/p applyTheme → theme.mapPlaceholder). */
  .drawer{ position:absolute; z-index:3; display:flex; flex-direction:column; overflow:hidden;
    border-top-left-radius:var(--drwr); border-top-right-radius:var(--drwr); touch-action:none;
    /* 2026-08 glass (locked in glass-lab on-device): tint DOWN .7→.25 — the ::before scrim
       carries text density instead, so the lip reads as clear glass. saturate BEFORE blur
       (Apple's order; ours was reversed — filters apply left-to-right, and blurring first
       destroys the colour variance saturation feeds on), 135→160 measured across all five
       demo bakes (venue line 6.5–8.7 with the scrim; 200 ran red-hot on warm photos).
       Every dark edge element was auditioned and cut (outer ring, top hairline, inner
       ring): the tint+scrim keep the perimeter reliably darker than any backdrop, so the
       contrast direction a dark line insures against no longer occurs. Old flat inset top
       hairline → the ::after highlight. */
    /* ONE DARK GLASS FOR THE WHOLE PAGE (Max, 28 Sep 2026): the base tint .25 → .68, the
       ::before density ramp unchanged. .68 is the lowest tint that holds the peek's dim 13pt host
       line ≥4.5:1 over the lightest artwork measured (4.68, the lab's r2a-glass sweep), and the
       address ≥8.6:1. No per-card flip to a light glass. */
    background:rgba(24,20,17,0.68);
    -webkit-backdrop-filter:saturate(160%) blur(22px); backdrop-filter:saturate(160%) blur(22px);
    box-shadow:inset 0 10px 14px -12px rgba(255,255,255,0.20); }
    /* NO outward cast shadow: renderDrawer writes top/height every frame, and WebKit
       transiently rasterises a backdrop-filter element's box-shadow with RECT geometry
       during those writes — a square shadow band flashing in the corner pockets where
       there is no glass (same family as the .cf-banner A16 flicker above). The pseudos
       are clipped by overflow:hidden, so there is no honest place to re-home it. */
  /* SCRIM + GRAIN. Tint .25 alone fails AA over a bright pocket (4.26 measured); this ramp
     is what holds the text at 6.5+. px stops, top-anchored: renderDrawer resizes the drawer
     every frame, and px keeps the 28px clear lip (grabber zone, no text) constant through
     the drag while the density band tracks the top, where the peek text lives. Grain: 96px
     gaussian tile drawn at 32px = 1 source px per device px @3x — dither for the ramp, its
     30% layer opacity baked into the tile alpha (one bg layer can't carry its own opacity). */
.drawer::before, .rsvp-detail::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAzZ0lEQVR42lXdV891VdXG8XW4DjkjMQZCCBAIRaT3XqU36b1X6R1UOoIg0nuTKkhV6b1JlSJEgQMSEjjgO7z5zeR/534Pnmfve6+15hzjGtcYs4051/S73/1ufuSRR+bttttuPuGEE+Yddthhvuaaa+arr756PvLII+fTTz99fuihh+a///3v81/+8pf5vvvumx944IFx/Y9//ON86623zvvss8+87777zrfccst8xhlnzNdff/18xBFHzLfddtv829/+dn7wwQdHGRdeeOF89tlnz7/+9a/nK664Yr788svnnXbaaT7xxBPnG264YT7zzDNHeeeff/78hz/8Yb700kvnc845Z3wef/zx89577z3vvvvu85/+9Kf51FNPnbfddtv5ggsumO+999551113ne+88875pJNOmvfff/+Fssh87bXXzhdffPH4/NWvfjXfcccd8zPPPDNfddVV87nnnjvkIh953EeH22+/fei+2Wabjb/petNNN83333//fN555w0Zt99++yGP+9SjjIcffniU8fvf/36U8ec//3k+6KCD5rvvvnveZptt5p133nk+5JBDhpyHH374PFFkzz33nE8++eQBrAKee+65Aaq/r7vuuvmUU04ZgDGMinbccccBzGmnnTaAopjfgUhQRrrkkksGUIRUsb8Jw8iAOuuss+YNNthg3mOPPebHH398CHnXXXcNA7mHXAx56KGHDmMyAKM/+uijQ0H3AOKee+4ZhkcW8l500UVD1iuvvHL8YzRAk4Uhyfr000/Pu+yyy5DVb4BVP7mVhYwHH3zwKJ9x1UG31157bdznd2W6Vx0IxAgMS07GZwDlwwxJfvGLXwzA6b755psP7Og9/e1vfxuCK4zgCgaqgrBqr732GuD+5je/Gf+yJkUUpED3P/bYY6NClVFo3XXXHSCxNGMx7H777Tcfc8wxox6sI7B/vAcQjOQeQlMC+BtttNEoB2h+u/nmm8ez2AUcij/11FODyYCIqYcddtgwBu9jSPrxRnXQzb10YHQ6bbXVVsOwnj/66KNHPb7TjRwHHnjg+NtzGMyLX3jhhaHvyy+/PDwBaeiHXAwIZDIy3nHHHTdIzit5mt950eQ/FzxMUSxjVZ/A8RvFKcEVsZGCjOE+whMCcIxBSV7j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") repeat 0 0 / 32px 32px,
      linear-gradient(to bottom, rgba(18,14,11,0) 0px, rgba(18,14,11,0.22) 28px,
        rgba(18,14,11,0.42) 90px, rgba(18,14,11,0.50) 100%); }
  /* LIT EDGE — the light has a POSITION, not just an axis: a hotspot off-axis above the
     top-LEFT corner, so the near corner burns brighter and the two sides fade out at
     different heights. A to-bottom gradient was directional but left/right symmetric, and
     mirror-perfect corners read as a generated border rather than a lit edge.
     padding-box xor mask keeps only the ring; the mask lives on THIS overlay child, never on
     the backdrop-filtered element itself — that combination is the iOS trap. */
.drawer::after, .rsvp-detail::after{ content:''; position:absolute; inset:0; z-index:40; pointer-events:none;
    border-top-left-radius:var(--drwr); border-top-right-radius:var(--drwr); padding:1px;
    /* HIGHLIGHT only — off-axis light from the upper-left, fading around the rim and
       gone where the light doesn't reach. No dark half: where the highlight ends, the
       edge is just glass against the scene (Max). */
    background:radial-gradient(145% 90% at 26% -6%,
      rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.20) 27%,
      rgba(255,255,255,0.07) 48%, rgba(255,255,255,0) 68%);
    -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    mask-composite:exclude; }
.drawer-handle{ flex-shrink:0; padding:var(--s2) 0 var(--s2); display:flex; justify-content:center; cursor:grab; } /* handle→content gap = s2 (tightened so rest content fits + sits higher), IDENTICAL in every state */
.drawer-pill{ width:38px; height:3px; border-radius:1.5px; background:rgba(255,255,255,0.3); transition:background .16s ease, width .16s ease; } /* thinner (Max, was 4px) — ONE pill shared by the drawer handle, checkout notch and join-sheet notch; hit zones are separate (44px logical) */
.checkout-handle:active .drawer-pill{ background:rgba(255,255,255,0.6); width:44px; } /* grab feedback on the swipe-to-exit notch — confirms the grab before the drawer starts moving */
.drawer-scroll{ flex:1; min-height:0; overflow:hidden; overscroll-behavior:contain; padding:0 var(--sp); display:flex; flex-direction:column;
  justify-content:flex-start; gap:0; } /* TOP-aligned in ALL states (consistent handle gap). gap:0 — the peak↔extended gap lives in .d-more's padding-top; row rhythm lives inside each block */
.drawer.reveal .drawer-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), transparent 100%); } /* reveal: scrollable + top/bottom edge-fade dims (JS zeroes the fade at each edge so the first/last line stays crisp) */
/* expanded: the .cta-divider stays VISIBLE (base --sec-divider) — a final hairline after the last section (map), matching the inter-section dividers, so the CTA is clearly separated from the drawer info (Max). The bottom scroll edge-fade coexists: it only dims the scrolling content, above this fixed divider. */
.drawer-scroll::-webkit-scrollbar{ display:none; }
.d-more{ opacity:0; } /* EXTENDED sections: hidden at REST so nothing bleeds into the peek before renderDrawer first runs; renderDrawer scrubs the opacity in as the drawer extends. The sections' own rhythm is the facts-first block below. */
  .rest-summary{ display:block; flex-shrink:0; margin:7px -16px 0; padding:0 16px; overflow:hidden;
    /* the ±16px margin/padding pair pushes the CLIP BOX outward while leaving content on the 34px rail:
       the logo tile sits flush at that rail, so its shadow had nowhere to spread and was shaved on the left.
       (Horizontal padding only — vertical padding is a floor max-height:0 can't cross, see the peek collapse.) */ /* the peek KEEPS its total height (Max): content rides the TOP, the reserved space sits BELOW */ /* = the removed PP row's exact height — the peek KEEPS its height (Max); the space is breathing room, and the rest detent + clamp floors stay untouched */ max-height:var(--rest-h,300px); transition:max-height .32s cubic-bezier(.4,0,.2,1), margin-top .32s cubic-bezier(.4,0,.2,1); } /* PEEK block — the HEIGHT collapse is timed; OPACITY is scrubbed per-frame by renderDrawer (a transition here would lag the finger) */
.drawer.reveal .rest-summary{ max-height:0; margin-top:0; pointer-events:none; } /* EXTENDED: summary + share hidden → d-more (OVERVIEW…) rises to the top. --rest-h measured per card in fillDrawer so the collapse is accurate. */
  /* ── PEEK header — Max's design (the ONE intentional content deviation from the production drawer) ── */
  .cfh-actionrow{ display:flex; align-items:center; padding-top:12px; margin:0 0 20px; } /* breathing room under the logo/status row before the title block (Max) */ /* 12px ≥ the shadow's 8px upward extent — 8 sat exactly on the clip edge */ /* logo LEFT · status RIGHT; padding-top gives the tile's shadow room — the peek's overflow:hidden would otherwise shave its top (same trap the outer ring hit) */
  .cfh-space{ height:0; } /* the peek's height LOCK (Max: "peak height always has to stay consistent"): lockPeekHeight() sizes
       this spacer to whatever keeps the peek at PEEK_LOCK, so moving/adding rows can't change it. A CHILD,
       not padding — under border-box, padding is a floor max-height:0 can't cross (that was the extended-top gap). */
  /* THE DRAWER'S OWN GLASS on both corner chips (Max, 4 Sep 2026): the milky white tile and
     its flat white ring read as a different product — same tint, same saturate-then-blur,
     and the drawer's outline method (a soft inset top light, no ring). */
  .cfh-brand{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    border:0; border-radius:11px;
    background:rgba(24,20,17,.25);
    -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
    box-shadow:inset 0 6px 10px -8px rgba(255,255,255,.30); }
    /* the personal peek's glass chip, on BOTH drawers now (Max, 31 Aug — the black-and-green
       tile retired): the mark is the baked ink glyph. A CREDIT, NOT A CONTROL since 28 Sep 2026:
       it opened the pitch sheet, which is gone, so it is a plain element with no press state. */
  .cfh-brandmark{ width:20px; height:20px; padding:0; object-fit:contain; border-radius:0; background:transparent;
    box-shadow:none; -webkit-user-drag:none; user-select:none; }
    /* NO ring, NO shadow on the mark (Max, 31 Aug — "look at the inner square"): the retired
       black tile's elevation ring survived onto the transparent img and drew a 1px square
       around the glyph. The GLASS CHIP carries the elevation; the mark is bare ink. */
    /* mark UNCHANGED — the clipping was the circular crop + ring drawn on the artwork's own edge
       (it's a full-bleed disc, 127x128, green arrow touching the boundary). Dropping both shows it whole. */
  /* the tools live in the actionrow's right corner now — glyph-weight discs, the personal
     peek's own chip recipe (Max: the two drawers share one corner grammar) */
  .cfh-tools{ margin-left:auto; display:flex; flex-direction:row; align-items:center; gap:10px; }
  .cfh-share{ width:34px; height:34px; border:0; padding:0; cursor:pointer; -webkit-appearance:none;
    display:flex; align-items:center; justify-content:center; border-radius:11px;
    background:rgba(24,20,17,.25); color:#fff;
    -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
    box-shadow:inset 0 6px 10px -8px rgba(255,255,255,.30);
    transition:var(--press), color .14s ease; }
  /* the brand mark is the baked INK glyph — on dark glass it inverts to light; light glass
     (below) hands it back */
  .cfh-brandmark{ filter:invert(1); }
    /* small chips → the blur is within the performance rule; ONE recipe with the personal
       corner chips so the two peeks read as one product */
  .cfh-share:active{ transform:scale(.96); color:#000; }
  .cfh-share svg{ width:17px; height:17px; }
  /* the audience BELL lived here and on the avatar (.cfh-notify); it went with the notify sheet it
     opened (28 Sep 2026). The Ini button replaces it in the event-page redesign. */
  /* ── PERSONAL peek — a PERSON, not a night (config e.personal:true; .drawer.personal set by
     fillDrawer). The reference layout: brand chip left · share right · avatar centred between
     them; centred name, roles line, ONE short bio line, bare tinted glyphs.
     The drawer is FIXED at peek — pill hidden, extension gestures gated in JS, d-more gone.
     Every colour routes through --p-accent / --p-accent-dim: the editor will hand pages their
     own font/drawer colours later (Max), and these two vars are the seam it will write. ── */
  :root{ --p-accent:rgba(245,243,239,.95); --p-accent-dim:rgba(245,243,239,.62); }
  /* THE CARD'S SIZE IS NOT NEGOTIABLE (Max): measure()'s height clamp pays 2px of card for every
     1px of peek, so the personal peek must land on the EVENT peek's footprint (~196px). The
     budget: no handle row at all (extension affordance the personal drawer doesn't have —
     peekRestH() reads offsetHeight 0), a 44px avatar band, tight type, a 2-line bio clamp. */
  .drawer.personal .drawer-handle{ display:none; }
  .drawer.personal:not(.reveal) .rest-summary{ max-height:none; } /* the --rest-h clamp exists for the reveal collapse, which a personal drawer never does — at rest it CLIPPED the glyph row's bottom whenever the measured height ran a px short (font swap, 12.5px×1.5 leading rounding): instagram/threads lost their lowest ink. Measured, not guessed. :not(.reveal) keeps the collapse for the sheet raise. */
  .drawer.personal .d-more{ display:none; }
  .drawer.personal .cfh-actionrow{ position:relative; min-height:50px; align-items:flex-start; padding-top:14px; margin-bottom:8px; } /* the row is the avatar's band — brand chip left, share right, avatar centred over it. The one-line bio left the peek ~15px under the event footprint; that room is split around the block — some above the PP, the rest under the glyph row — so the whole panel rides 10px higher (Max: "nudge everything up") at the SAME peek height, card untouched */
  .drawer.personal .cfp-pp{ top:6px; } /* the avatar rides 8px ABOVE the row's padded top (absolute, so the footprint doesn't move) — the freed 8px becomes breathing room between the PP and the name (Max) */
  .drawer.personal .cfp-links{ margin-bottom:6px; } /* the 10px taken from above the PP lands here — content up, footprint constant */
  /* the corner-chip recipe (glass, ink icons) lives on the BASE .cfh-brand/.cfh-share
     rules now — both drawers wear it (Max, 31 Aug). Personal keeps only what differs: */
  .drawer.personal .cfh-brand,.drawer.personal .cfh-actionrow .cfh-share{ margin-top:2px; }
  .drawer.personal .cfh-actionrow .cfh-share{ margin-left:auto; } /* share moves up here from the (hidden) lockup tools — top-right, the reference */
  .cfp-pp{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:56px; height:56px; border-radius:50%;
    background-size:cover; background-position:center; background-color:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35); }
  .cfp{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; }
  /* the PP→text gap is the INTER-group gap (Max: breathing room above the name) — clearly
     wider than the name/roles/bio block's own tight rhythm, so the face and the words read
     as two groups. The name dropped 19 → 17 to pay for the bigger face at the locked height. */
  .cfp-namerow{ display:flex; align-items:center; justify-content:center; gap:2px; max-width:100%; margin:10px 0 3px; }
  h2.cfp-name{ margin:0; font-size:calc(17px * var(--k-title,1)); font-weight:var(--fw-name,650); letter-spacing:var(--ls-title,-.01em); line-height:1.2; color:var(--p-accent);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  /* roles + bio are ONE voice (Max, the reference): same font, same weight, same colour — two
     lines of the same text block, each ONE line, ellipsis-guarded. The wizard caps the copy so
     the guard should never actually fire (PBIO_CAP in viewer2.js is derived from this width). */
  .cfp-roles,.cfp-bio{ max-width:100%; font-family:var(--font-text); font-size:12.5px; font-weight:500; line-height:1.5; color:var(--p-accent); /* Inter for the reading line (Max, 11 Sep 2026) */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cfp-links{ margin-top:8px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; } /* bare tinted glyphs, tight like the reference — no glass capsules (Max) */
  .cfp-link{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; color:var(--p-accent); text-decoration:none; transition:var(--press); } /* compact target around a 22px glyph; 12px gap → 42px centres */
  .cfp-link:active{ transform:scale(.92); }
  .cfp-link svg{ width:22px; height:22px; display:block; overflow:visible; } /* the brand paths run to the very edge of the 24-box (instagram/tiktok/threads ink touches y=24). Native-res pixel profiling showed the edges render WHOLE — a reported bottom clip was the --rest-h clamp (fixed above) plus downscaled-screenshot aliasing — but visible keeps the edge AA safe when the box lands on a fractional device pixel. */
/* the RSVP sheet's glass X (the artist sheet it was designed for became the artist page, 28 Sep 2026) */
.ad-close{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; padding:0; cursor:pointer; -webkit-appearance:none; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16); transition:var(--press), opacity .14s ease; } /* X — glass, top-right corner; opacity in the transition → it FADES on close (see the :not(.open) rule) instead of flying down with the sliding sheet / collapsing drawer */
.ad-close:active{ transform:scale(0.96); } /* 0.96 — anything below 0.95 reads exaggerated for a tap */
/* On CLOSE (the sheet loses .open) the X fades out fast — Max: don't see the X fly down as the drawer transitions back to peek. On open it fades in as the sheet rises. */
.rsvp-detail:not(.open) .ad-close{ opacity:0; } /* checkout has no X (notch + swipe-down) */
.ad-close svg{ width:18px; height:18px; }
.drawer-scroll{ transition:opacity .28s ease, transform .32s cubic-bezier(.4,0,.6,1); } /* soft-exit as a sheet opens over it */
.drawer.sheet-open .drawer-scroll{ opacity:0; transform:translateY(18px); pointer-events:none; } /* the drawer SECTIONS (OVERVIEW/LINEUP, or the peek rows) SOFT-EXIT — fade + drop — while the sheet content staggers in → a cross-fade, not an instant hide (Max) */
.drawer.sheet-open .cta-divider,.drawer.sheet-open .cta{ visibility:hidden; } /* the grabber STAYS while a page is open: it is part of the page's swipe-down surface (BUILD-SPEC §7) */

/* ══ PAGES INSIDE THE DRAWER (BUILD-SPEC §7, §8; viewer.js buildMapSheet / buildArtistPage). Each
   takes the extended drawer's reading area in place, under the grabber: no glass of its own (the
   drawer's shows through), the scroller's sections soft-exit beneath it, and it steps in with a
   short rise. Absolute, never fixed, and display:none once closed (.claude/rules/
   ios-safari-edge-to-edge.md: a laid-out closed layer costs Safari its under-toolbar bleed). ══ */
.ev-page{ position:absolute; left:0; right:0; z-index:6; display:none; flex-direction:column; box-sizing:border-box;
  font-family:var(--font-read); color:var(--p-accent,#f5f3ef); touch-action:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.ev-page.open{ display:flex; }
/* the CONTENT steps in; the page box itself never moves (a pull down drags the whole drawer) */
.ev-page.open > *{ animation:evPageIn .42s cubic-bezier(.32,.72,0,1) both; }
.ev-page.open > :nth-child(2){ animation-delay:.04s; }
.ev-page.open > :nth-child(n+3){ animation-delay:.08s; }
@keyframes evPageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ev-page.open > *{ animation:evPageFade .15s linear both; } }
@keyframes evPageFade{ from{ opacity:0; } to{ opacity:1; } }
/* a page steps in, the header and (for the map) the action row step aside */
.drawer.sheet-open .ev-head{ visibility:hidden; }
.drawer.map-open .ev-bar{ visibility:hidden; }
.ev-x{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border:0; border-radius:22px; padding:0; margin:0;
  color:var(--p-accent,#fff); background:rgba(255,255,255,.1); -webkit-appearance:none; appearance:none; cursor:pointer; }
.ev-x svg{ width:18px; height:18px; }
.ev-x:active{ transform:scale(.96); }
/* the map sheet (§7): venue 24/700 ≤2 lines + ×; address 15/400 .82 ≤3 lines; the embed in a 16pt box,
   inset 34, ≤1.1× its width, centred; "Get directions" in the action row's seat */
.ev-map{ padding:12px var(--sp) 0; }
.evm-top{ position:relative; flex:none; display:flex; align-items:flex-start; min-height:44px; padding-right:52px; }
.evm-name{ margin:7px 0 0; font-size:var(--ts-sheet); font-weight:700; line-height:1.2; letter-spacing:-.02em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.evm-x{ position:absolute; top:0; right:-10px; }
.evm-addr{ flex:none; margin:8px 0 0; font-size:var(--ts-body); font-weight:400; line-height:22px; opacity:.82;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.evm-stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:16px 0 0; margin-bottom:16px; overflow:hidden; } /* the box is centred by sizeMapBox's margin, and rides the page's top while the drawer is pulled */
.evm-map{ position:relative; flex:none; border-radius:16px; overflow:hidden; isolation:isolate; transform:translateZ(0); background:#1f1a17; }
.evm-map::after{ content:''; position:absolute; inset:0; border-radius:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); pointer-events:none; z-index:3; }
/* THE SCROLL TRAP (Max, 28 Sep 2026). Google's embed runs in cooperative mode: a one-finger drag
   shows "Use two fingers to move the map" and is NOT consumed, so iOS chains that scroll out of
   the cross-origin frame to the nearest scroller around it, which was the document: it moved 70pt
   on a drag down and 229pt on a drag up, collapsing Safari's toolbar, before pin() pulled it
   back. No script can stop it (those touches never reach this page), so the frame sits in a
   scroller of its own, 1px taller than the box, with overscroll-behavior:none: the chained scroll
   lands here, moves the frame 1px at most, and goes no further. Measured on the iPhone 17
   simulator: the document 0pt in both directions; two-finger pan, pinch and Google's hint as
   before. (Locking html's overflow while the map is open was the other option; it was not
   needed, and it would cost the page its under-toolbar bleed.) */
.evm-trap{ position:absolute; inset:0; z-index:1; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:none; scrollbar-width:none; }
.evm-trap::-webkit-scrollbar{ display:none; }
.evm-map iframe{ display:block; width:100%; height:calc(100% + 1px); border:0; opacity:0; transition:opacity .35s ease; }
.evm-map.loaded iframe{ opacity:1; }
/* the skeleton: the box's own ground, a ghost of the pin where Google will draw it, a slow sheen */
.evm-skel{ position:absolute; inset:0; z-index:2; background:#1f1a17; transition:opacity .35s ease; }
.evm-skel::before{ content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-26px 0 0 -11px; border-radius:11px 11px 11px 2px;
  transform:rotate(-45deg); background:rgba(255,255,255,.07); }
.evm-map.loaded .evm-skel{ opacity:0; pointer-events:none; }
.evm-sheen{ position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 50%, transparent 80%);
  transform:translateX(-100%); animation:evmSheen 1.6s ease-in-out infinite; }
.evm-map.loaded .evm-sheen{ animation:none; }
@keyframes evmSheen{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .evm-sheen{ animation:none; opacity:0; } }
.evm-actions{ flex:none; }
.evm-go{ display:flex; align-items:center; justify-content:center; gap:8px; height:52px; border-radius:26px; background:#fff; color:#15110f;
  font-size:var(--ts-title); font-weight:600; line-height:1; letter-spacing:-.01em; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.evm-go svg{ width:18px; height:18px; }
.evm-go:active{ transform:scale(.97); }
/* the artist page (§8): ‹ Back 74×44, the photo square with 16pt corners, the name 24/700, the bio 15,
   one 44pt link row per service; no divider under the Back row (Max) */
.eva-nav, .evh-nav{ flex:none; height:44px; display:flex; align-items:center; padding:0 22px; }
.eva-back, .evh-back{ display:flex; align-items:center; gap:2px; min-width:74px; height:44px; margin-left:-6px; padding:0 8px 0 0; border:0; background:none;
  -webkit-appearance:none; appearance:none; color:rgba(var(--cream-rgb),.95); font-family:var(--font-read); font-size:var(--ts-title); font-weight:600; line-height:1; cursor:pointer; }
.eva-back svg, .evh-back svg{ width:24px; height:24px; }
.eva-sc{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px var(--sp) 12px; }
.eva-sc::-webkit-scrollbar{ display:none; }
.eva-photo{ display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; background:rgba(255,255,255,.06); -webkit-user-drag:none; user-select:none; }
.eva-name{ margin:16px 0 0; font-size:var(--ts-sheet); font-weight:700; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.eva-bio{ margin:6px 0 0; font-size:var(--ts-body); line-height:1.5; opacity:.86; white-space:pre-line; }
.eva-links{ margin-top:8px; display:flex; flex-direction:column; }
.eva-link{ border-top:1px solid var(--sec-divider); }
/* the host sheet (the studio hub's PR 6, layout (b); viewer.js buildHostPage): where the map sheet
   sits, its Ini in the action row's seat, which steps aside. ‹ Back · avatar 56 · name 24/700 · pin
   and area 13 at the dim ink · the bio 15 at .86 · the socials as bare 44pt marks in the page's ink ·
   the facts as Good-to-know rows · "Coming up", 56pt rows. The text scrolls, by hand (sheetDragRig),
   and fades out 16pt above the Ini so nothing runs under the button. */
.drawer.host-open .ev-bar{ visibility:hidden; }
.evh-sc{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px var(--sp) 12px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent); }
.evh-sc::-webkit-scrollbar{ display:none; }
.evh-id{ display:flex; align-items:center; gap:14px; }
.evh-av{ width:56px; height:56px; flex:none; border-radius:50%; background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.evh-txt{ min-width:0; }
.evh-name{ margin:0; font-size:var(--ts-sheet); font-weight:700; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere; }
.evh-area{ margin:3px 0 0; display:flex; align-items:center; gap:4px; font-size:var(--ts-small); font-weight:500; line-height:18px;
  color:var(--p-accent-dim,rgba(245,243,239,.62)); }
.evh-area svg{ width:14px; height:14px; flex:none; }
.evh-area span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evh-bio{ margin:12px 0 0; font-size:var(--ts-body); line-height:1.45; opacity:.86; overflow-wrap:anywhere; }
.evh-socs{ display:flex; flex-wrap:wrap; margin:6px 0 0 -11px; }
.evh-soc{ width:44px; height:44px; flex:none; display:grid; place-items:center; color:var(--p-accent,#f5f3ef); text-decoration:none; -webkit-tap-highlight-color:transparent; }
.evh-soc svg{ width:22px; height:22px; display:block; overflow:visible; }
.evh-soc:active{ opacity:.6; }
.evh-facts{ margin-top:10px; }
.evh-fact + .evh-fact{ border-top:1px solid var(--sec-divider); }
.evh-fact .ev-ico{ opacity:.86; }
.evh-up{ margin-top:20px; }
.evh-ev{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; box-sizing:border-box; margin:0; padding:6px 0; border:0; border-top:1px solid var(--sec-divider);
  background:none; color:var(--p-accent,#f5f3ef); font:inherit; text-align:left; -webkit-appearance:none; appearance:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.evh-ev:active{ opacity:.7; }
.evh-evimg{ width:44px; height:44px; flex:none; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.06); -webkit-user-drag:none; user-select:none; }
.evh-evt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.evh-evw{ font-size:var(--ts-small); font-weight:500; line-height:18px; color:var(--p-accent-dim,rgba(245,243,239,.62)); font-variant-numeric:tabular-nums; }
.evh-evn{ font-size:var(--ts-body); font-weight:600; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evh-act{ flex:none; padding:8px var(--sp) 0; }
.evh-act .evh-ini{ width:100%; }
/* THE ALIVE INI (viewer.js hopArm): now and then the 32pt ink dot hops, anchored at its foot, never
   the button. Transform only: a crouch, a stretched leap with a tilt, a squashed landing, a small
   rebound, 0.9s. Reduce Motion: never (the script never starts it; this is the belt). */
.evh-dot{ transform-origin:50% 100%; }
.evh-dot.hop{ animation:iniHop .9s cubic-bezier(.3,.7,.3,1) both; }
@keyframes iniHop{
  0%  { transform:translateY(0)     scale(1,1)      rotate(0); }
  12% { transform:translateY(0)     scale(1.14,.84) rotate(0); }
  34% { transform:translateY(-10px) scale(.9,1.12)  rotate(-9deg); }
  52% { transform:translateY(-12px) scale(1,1)      rotate(7deg); }
  70% { transform:translateY(0)     scale(1.12,.88) rotate(0); }
  84% { transform:translateY(-2px)  scale(.97,1.03) rotate(0); }
  100%{ transform:translateY(0)     scale(1,1)      rotate(0); }
}
@media (prefers-reduced-motion:reduce){ .evh-dot.hop{ animation:none; } }


/* ══ THE EXTENDED DRAWER'S CONTENT — facts first (Max, 28 Sep 2026, BUILD-SPEC §6.3; viewer.js
   fillEvSections). Inter only; labels 11 · small info 13 · body 15 · row titles 17. Every row
   ≥44pt; line-up rows 56. Ink: --p-accent for text, --p-accent-dim (.62, the floor measured on the
   .68 glass: labels ≥4.79:1 over the lightest artwork) for secondary lines, glyphs at .70. The
   horizontal Good-to-know rail, the Location section, the overview sheet and the old footer
   (Contact · Terms · Privacy · More from inside.live) went with this. ══ */
.d-more{ display:flex; flex-direction:column; padding-top:14px; font-family:var(--font-read); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.ev-sec{ display:flex; flex-direction:column; }
.ev-sec + .ev-sec{ margin-top:14px; padding-top:18px; border-top:1px solid var(--sec-divider); }
/* the host's socials at the top of the open drawer (viewer.js fillEvSections): the host sheet's marks,
   their 44pt targets overhanging a 22pt row so the row sits on the sections' rhythm */
.ev-hsec .evh-socs{ margin:-11px 0 -11px -11px; }
h3.ev-lab{ margin:0 0 4px; font-size:var(--ts-label); font-weight:600; line-height:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-accent-dim,rgba(245,243,239,.62)); }
.ev-rows{ display:flex; flex-direction:column; }
.ev-row{ display:flex; align-items:center; gap:12px; min-height:44px; width:100%; box-sizing:border-box; margin:0; padding:0; border:0; background:none;
  color:var(--p-accent,#f5f3ef); font:inherit; text-align:left; text-decoration:none; -webkit-appearance:none; appearance:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ev-row:active{ opacity:.7; }
div.ev-row{ cursor:default; }
div.ev-row:active{ opacity:1; }
.ev-ico{ width:20px; height:20px; flex:none; opacity:.7; }
.ev-rt{ flex:1; min-width:0; font-size:var(--ts-body); font-weight:500; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-price .ev-rt{ font-weight:600; }
.ev-sub{ font-weight:500; color:var(--p-accent-dim,rgba(245,243,239,.62)); }
.ev-chev{ width:18px; height:18px; flex:none; opacity:.5; transition:transform .25s ease; }
.ev-fx.open > .ev-row .ev-chev{ transform:rotate(180deg); }
.ev-body{ margin:0 0 12px 32px; font-size:var(--ts-small); line-height:1.45; color:var(--p-accent,#f5f3ef); opacity:.86; white-space:pre-line; }
.ev-body[hidden]{ display:none; }
.ev-art{ min-height:56px; }
.ev-art + .ev-art{ margin-top:4px; }
.ev-av2{ width:48px; height:48px; flex:none; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.ev-av2.mono{ display:flex; align-items:center; justify-content:center; font-size:var(--ts-title); font-weight:600; color:var(--p-accent-dim,rgba(245,243,239,.7)); }
.ev-two{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ev-t17{ font-size:var(--ts-title); font-weight:600; line-height:22px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-s13{ font-size:var(--ts-small); font-weight:500; line-height:18px; color:var(--p-accent-dim,rgba(245,243,239,.62)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the overview: inline and last; the ABOUT markup the editor writes (## heading, lists, bold,
   italic, links), rendered as nodes by mdRender */
.d-about{ display:flex; flex-direction:column; gap:var(--s3); font-size:var(--ts-body); line-height:1.5; color:var(--p-accent,#f5f3ef); }
.d-about > div{ white-space:pre-line; }
.d-about h4.about-h{ font-size:var(--ts-body); font-weight:600; letter-spacing:-.01em; margin:0; }
.d-about ul,.d-about ol{ margin:0; padding-left:17px; display:flex; flex-direction:column; gap:3px; }
.d-about li{ padding-left:2px; }
.d-about strong{ font-weight:600; }
.d-about em{ font-style:italic; }
.d-about a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ev-about{ margin-top:4px; }
.ev-about.clamped{ overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%); mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%); }
.ev-more{ gap:6px; margin-top:2px; font-size:var(--ts-body); font-weight:600; color:rgba(var(--cream-rgb),.95); }
.ev-more .ev-chev{ width:16px; height:16px; opacity:1; }
.ev-more[aria-expanded="true"] .ev-chev{ transform:rotate(180deg); }
/* "Privacy · Terms", one quiet line at the very end, each a 44pt target */
.ev-legal{ display:flex; justify-content:center; align-items:center; margin-top:14px; font-size:var(--ts-fine); line-height:1; color:var(--p-accent-dim,rgba(245,243,239,.62)); }
.ev-legal button{ font:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ev-legal a, .ev-legal button{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center; padding:0 8px; color:inherit; text-decoration:none; }
.ev-legal a:active, .ev-legal button:active{ opacity:.7; }
.ev-legal i{ font-style:normal; opacity:.6; }
/* the personal page's webview band keeps the platform's links (viewer.js measure) */
  .d-legal{ color:var(--p-accent-dim,rgba(245,243,239,.55)); } /* the drawer's dim theme ink (was brand green) — one colour at rest and extended, and it follows the picked ink + adaptive glass */
  .d-legal a{ color:inherit; text-decoration:none; }
  .d-legal a:active{ opacity:0.7; }
  .d-legal i{ font-style:normal; margin:0 7px; opacity:0.45; } /* dots dimmer than the links — punctuation, not links */
  .d-restlegal{ position:absolute; left:0; right:0; text-align:center; font-family:var(--font-text); font-size:11px; line-height:1.6; padding:0 18px; } /* the webview rest band's tenant — JS pins bottom above the home indicator */

  /* ── main-card banner + date badge (the concert-card pattern). Both live INSIDE the card, so
     the squircle clip rounds them with it. Banner is glass over the moment; CTA is the one solid
     element so it reads as THE button. Banner shell is pointer-events:none — card taps pass
     through to the story engine; only the CTA is a target. ── */
  /* SCRIM, not glass. A live backdrop-filter here re-rasterised on every moment crossfade and
     flickered on A16 (iPhone 15; fine on A19). It was the blur's VISIBLE OUTPUT that was unstable,
     not its cost - 6px flickered too, and so did promoting it to its own layer. Only removing it,
     or hiding it behind an opaque bar, stopped it. A scrim is also what
     .claude/rules/performance.md already asks for: live backdrop-filter on a big surface is the
     thing the onboarding grounds were pre-baked to avoid.
     The inset white hairline is gone too - there is no edge to draw any more, and a 1px highlight
     sitting on a fading gradient is exactly where banding shows. */
  .cf-banner{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center;
    gap:12px; padding:16px 18px; pointer-events:none; background:transparent;
    font-family:var(--font-card, 'Clash Grotesk',-apple-system,system-ui,sans-serif); color:var(--card-ink,#fff); } /* --font-card / --card-ink: the duo + text-colour seats on the card face (platform/p applyTheme). Unset = Clash in white, the House card voice */
  /* ONE continuous ramp, no edge at any point: it runs from the bottom of the card up through the
     bar and 72px past it, dissolving to nothing. Dense across the bar so the title stays legible
     over a busy poster, then eased out on the toward.studio curve - a 2-stop fade concentrates all
     its change in the middle and reads as a band; these stops spread it. Ends on the SAME rgb at
     zero alpha, never `transparent`, so nothing interpolates through grey. Clipped by .cf-card. */
  .cf-banner::before{ content:''; position:absolute; left:0; right:0; bottom:0; top:-72px; z-index:-1;
    pointer-events:none;
    /* softened ~22% across every stop (Max, 4 Sep 2026: "a lil too dark" — it swallowed the
       lower third of light artwork); same curve, same stops, lighter hand */
    background:linear-gradient(to top,
      rgba(18,14,11,0.730) 0%,
      rgba(18,14,11,0.670) 11.5%,
      rgba(18,14,11,0.610) 23%,
      rgba(18,14,11,0.550) 34.5%,
      rgba(18,14,11,0.480) 46%,
      rgba(18,14,11,0.360) 56.3%,
      rgba(18,14,11,0.260) 64.4%,
      rgba(18,14,11,0.185) 71.4%,
      rgba(18,14,11,0.134) 76.5%,
      rgba(18,14,11,0.094) 81.1%,
      rgba(18,14,11,0.061) 85.4%,
      rgba(18,14,11,0.036) 89.3%,
      rgba(18,14,11,0.020) 92.5%,
      rgba(18,14,11,0.010) 95.1%,
      rgba(18,14,11,0.004) 97.4%,
      rgba(18,14,11,0.001) 99%,
      rgba(18,14,11,0.000) 100%); }
  .cf-binfo{ min-width:0; }
  /* PER-DUO TYPE SEATS (Max, 5 Sep 2026): faces don't swap neutrally — Anton ships ONE
     weight and a 700 here fake-bolded it into mush. Each duo hands applyTheme its own
     weight / tracking / size scale for the display slots; unset = House's tuned numbers. */
  .cf-btitle{ font-size:calc(17px * var(--cardk,1) * var(--k-title,1)); font-weight:var(--fw-title,700); letter-spacing:var(--ls-title,-0.01em); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .cf-bsub{ margin-top:3px; font-size:calc(12.5px * var(--cardk,1) * var(--k-kick,1)); font-weight:var(--fw-kick,600); letter-spacing:var(--ls-kick,normal); color:rgba(255,255,255,.72);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cf-cta{ margin-left:auto; pointer-events:auto; flex-shrink:0; display:flex; align-items:center; gap:7px;
    background:#fff; color:var(--ink,#20180f); border-radius:calc(15px * var(--cardk,1)); padding:calc(12px * var(--cardk,1)) calc(16px * var(--cardk,1)); font-size:calc(13.5px * var(--cardk,1)); font-weight:600; /* 700 read too bold at this size — picked off a 700/650/600 sim strip (Max, 5 Sep 2026) */
    text-decoration:none; white-space:nowrap; transition:transform .14s cubic-bezier(.2,.7,.2,1); } /* SOLID WHITE squircle, ink text (Max, 4 Sep 2026 — frost was tried and pulled the same day); the painter carves the clothoid-cornered silhouette, this radius is only the no-JS fallback */
  .cf-cta .cf-linkglyph{ color:#3478f6; } /* the system-link blue — a link button's chain is always blue (Max) */
  button.cf-cta{ border:0; cursor:pointer; font-family:inherit; -webkit-appearance:none; appearance:none; } /* the RSVP card's CTA is a real button (it opens our sheet, it goes nowhere) — strip the UA chrome so it matches the anchor exactly */
  .cf-cta svg{ width:calc(17px * var(--cardk,1)); height:calc(17px * var(--cardk,1)); flex-shrink:0; }
  .cf-cta:active{ transform:scale(.95); }

  /* ══ THE EVENT CARD'S BOTTOM ROW (Max, 26-28 Sep 2026, BUILD-SPEC §3) — the date and time at the
     bottom left, the tickets / RSVP pill or the night's state at the bottom right, over the same
     ramp (.cf-banner::before). A fixed type scale, not --cardk: card text never drops under 13.
     No spacer between the two (the slot's margin-left:auto does that job): an empty flex:1 box
     cost 12pt and cut Inter 15 on 393pt phones. ══ */
  .cf-banner.cf-row{ gap:12px; padding:16px 18px; font-family:var(--font-read); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .cf-when{ min-width:0; flex:0 1 auto; line-height:1.2; letter-spacing:0; white-space:nowrap;
    font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1, 'lnum' 1, 'case' 1;
    text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .cf-date{ font-size:var(--ts-body); font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; }
  .cf-time{ font-size:var(--ts-body); font-weight:500; color:rgba(255,255,255,.86); overflow:hidden; text-overflow:ellipsis; }
  .cf-dash{ margin:0 .08em; }   /* the en dash closed up: "00–03" collided at 13px with none, a full space read loose */
  /* the pill: white, Inter 17/600, 48pt, the ticket (or RSVP) glyph; 155×48 on the iPhone 17 */
  .cf-cta.cf-pill{ height:48px; padding:0 22px; gap:8px; border-radius:999px; font-family:var(--font-read); font-size:var(--ts-title); font-weight:600;
    letter-spacing:-.01em; line-height:1; box-sizing:border-box; }
  .cf-cta.cf-pill svg{ width:18px; height:18px; }
  .cf-ctashort{ display:none; }
  /* the night's state in the pill's seat: plain text, nothing button-shaped, 48pt like the pill so
     nothing moves between states */
  .cf-state{ margin-left:auto; height:48px; display:flex; align-items:center; gap:7px; flex:none; pointer-events:none;
    font-size:var(--ts-body); font-weight:600; line-height:1; color:rgba(255,255,255,.9); white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .cf-state svg{ width:16px; height:16px; flex:none; }
  .cf-slot0{ margin-left:auto; width:1px; height:48px; flex:none; }
  /* NARROW CARDS (under 300pt wide, the SE — measure() sets .cf-narrow): the compact row, so the
     date and time never collapse beside the pill */
  .cf.cf-narrow .cf-banner.cf-row{ gap:8px; padding:16px 12px; }
  .cf.cf-narrow .cf-time{ font-size:var(--ts-small); }
  .cf.cf-narrow .cf-cta.cf-pill{ padding:0 13px; }
  .cf.cf-narrow .cf-cta.cf-pill svg{ display:none; }
  .cf.cf-narrow .cf-ctashort{ display:inline; }
  .cf.cf-narrow .cf-pill.cf-hasshort .cf-ctalabel{ display:none; }

  /* prefers-reduced-transparency: the glass goes frosty-solid — same hierarchy, no see-through */
  @media (prefers-reduced-transparency:reduce){
.drawer, .rsvp-detail, .cf-banner{ background:rgba(28,22,18,.96); -webkit-backdrop-filter:none; backdrop-filter:none; }
.drawer::before, .rsvp-detail::before{ display:none; }  /* scrim+grain are for see-through glass — solid needs neither */
    .cf-banner::before{ display:none; }   /* the scrim IS see-through by design — drop it so the bar is a clean solid here */
    .cfh-share,.ad-close,.ev-x,.cf-chip{ background:rgba(28,22,18,.92); -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  @media (prefers-contrast:more){
.drawer, .rsvp-detail{ background:rgba(20,16,12,.97); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.drawer::before, .drawer::after, .rsvp-detail::before, .rsvp-detail::after{ display:none; }  /* it draws its own solid ring above */
  }
  @media (prefers-reduced-motion:reduce){ .cf-gl{ transition:none; } }

/* ── the sheet-form vocabulary the RSVP sheet still speaks (ob-input/ob-cta/ob-head and friends
   below) — born in the retired 3-step onboarding; the pitch and bell sheets that also wore it are gone ── */
:root{
  --ob-glass:rgba(16,12,9,0.42);           /* chip/field fill — dark translucent, text reads on any ground */
  --ob-glass-line:rgba(255,255,255,0.16); }/* chip/field hairline */
.ob-notch{ position:relative; z-index:2; flex-shrink:0; height:32px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; } /* replaces the X — swipe DOWN to close (mirrors the checkout notch) */
.ob-notch::before{ content:''; position:absolute; left:0; right:0; top:-6px; bottom:-6px; } /* 44px hit zone (32px visual row) — ends exactly at the progress bar's top (non-interactive anyway), no visual change */
.ob-notch:active .drawer-pill{ background:rgba(255,255,255,0.6); width:44px; }
.ob-steps{ position:relative; z-index:2; display:grid; } /* the panes share ONE grid cell → the sheet is as tall as its tallest pane, and the slide between them still works (11 Sep 2026: content-height sheets) */
.ob-step{ grid-area:1/1; position:relative; display:flex; flex-direction:column; overflow:hidden; /* NO scroll — each pane's layout fits the sheet */
  opacity:0; transform:translateX(44px); pointer-events:none; visibility:hidden;
  transition:opacity .22s ease, transform .24s cubic-bezier(.4,0,.6,1), visibility 0s linear .24s; } /* base = waiting OFF-RIGHT (also the exit state when stepping BACK) */
.ob-step.prev{ transform:translateX(-44px); } /* exited to the LEFT (stepping forward) — direction reads correctly both ways */
.rsvp-detail.open .ob-step.active{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.9,.25,1), visibility 0s; } /* enter = the sheet spring curve (same as the artist/overview content enter). GATED on .open — visibility/pointer-events re-enable from INSIDE a hidden parent (visibility is child-overridable), so an ungated .active step would invisibly intercept taps over the drawer CTA while the sheet is CLOSED. */
.ob-step::-webkit-scrollbar{ display:none; }
.ob-head{ margin-top:6px; font-size:var(--t-display); font-weight:700; line-height:1.1; letter-spacing:var(--track-display); color:#fff; text-shadow:0 1px 14px rgba(0,0,0,0.45); } /* display headline */
.ob-sub{ margin-top:10px; font-family:var(--font-text); font-size:var(--fs-body); font-weight:var(--fw-body); line-height:1.5; color:rgba(255,255,255,0.74); text-wrap:pretty; text-shadow:0 1px 10px rgba(0,0,0,0.4); } /* Inter reading sub */
/* STEP 2 — details (vertically centred, ref 2C): kicker + headline + fields = ONE centred cluster (.ob-mid) · placeholder-only fields · CTA + trust pinned bottom */
.ob-grow{ flex:1 1 0; min-height:0; } /* TWIN SPACERS around the cluster: grow to CENTRE it when there's room, COLLAPSE first under the keyboard so the shrink-0 cluster never overlaps the CTA (was .ob-mid flex:1, whose centred content overflowed onto the CTA) */
.ob-cluster{ flex-shrink:0; text-align:center; } /* headline + fields — never compresses (→ no overlap) */
.ob-fields{ margin-top:20px; display:flex; flex-direction:column; gap:12px; text-align:left; } /* placeholder-only input stack (no labels) */
.ob-input{ width:100%; padding:15px 16px; border:0; border-radius:15px; -webkit-appearance:none; appearance:none;
  background:rgba(26,20,15,0.52); box-shadow:inset 0 0 0 1px var(--ob-glass-line); color:#fff; caret-color:var(--cream);
  font-family:var(--font-text); font-size:16px; font-weight:var(--fw-body); } /* dark translucent fill — NO backdrop-filter (iOS rendered it as a flat GREY box over the field during keyboard/autofill compositing); 16px MIN (smaller → iOS focus-zoom) */
.ob-input::placeholder{ color:rgba(255,255,255,0.44); }
.ob-input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px rgba(var(--cream-rgb),0.65); }
.ob-input.bad{ box-shadow:inset 0 0 0 1.5px var(--hot); } /* client-side invalid — the blazing accent ring */
/* the plus-ones picker wears the field's own glass; appearance:none above strips the native
   chrome, so a chevron says "this opens" (the tap still raises the system wheel) */
select.rsvp-plus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),rgba(26,20,15,0.52);
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px; padding-right:40px; cursor:pointer; }
select.rsvp-plus[hidden]{ display:none; }
.ob-input:-webkit-autofill,.ob-input:-webkit-autofill:hover,.ob-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff; caret-color:#fff; transition:background-color 999999s ease-in-out 0s; box-shadow:inset 0 0 0 1px var(--ob-glass-line); } /* autofill: keep the glass, text in-system */
.ob-err{ flex-shrink:0; margin-top:10px; text-align:center; font-family:var(--font-text); font-size:12px; font-weight:600; color:var(--hot); display:none; } /* inline step-2 failure — shown only on a failed submit */
.ob-step form{ display:flex; flex-direction:column; flex:1; min-height:0; } /* the form carries the column so the centred fields + bottom CTA work inside it */
.ob-cta{ flex-shrink:0; margin-top:16px; padding:var(--s4); border:0; border-radius:var(--ctar); width:100%;
  background:var(--cream); color:var(--ink); text-align:center; font-size:var(--t-title); font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.28); -webkit-appearance:none; font-family:inherit; transition:transform .14s cubic-bezier(.2,.7,.2,1), opacity .18s ease; } /* in-sheet primary — mirrors the drawer CTA pill */
.ob-cta:active{ transform:scale(0.97); }
.ob-cta:disabled{ opacity:0.35; pointer-events:none; } /* disabled until a chip is selected / while the request is in flight */
.ob-cta.ghost{ background:rgba(255,255,255,0.08); background-repeat:no-repeat; background-size:100% 100%; color:var(--cream); box-shadow:none; } /* secondary — GLASS capsule matching the drawer's past CTA: fill + hairline = ONE SVG background painted by the CTA capsule script (color = no-JS fallback pill; no backdrop-filter — no clip-path to bound it, and the sheet's ground is already frosted) */
.ob-trust{ flex-shrink:0; margin-top:10px; text-align:center; font-family:var(--font-text); font-size:12px; font-weight:var(--fw-body); color:rgba(255,255,255,0.55); max-height:32px; text-wrap:balance;
  transition:opacity .2s ease, max-height .25s ease, margin .25s ease; } /* max-height is only the keyboard collapse's (.kb) start point: room for two lines, which the Privacy link takes on a 320pt screen */
.ob-trust i{ font-style:normal; margin:0 7px; opacity:0.45; } /* the footer's .d-legal dot — punctuation, dimmer than the words */
.ob-trust a{ color:rgba(255,255,255,0.75); text-decoration:underline; text-underline-offset:2px;
  display:inline-block; padding:6px 2px; margin:-6px -2px; } /* the retired notify sheet's legal link: a shade brighter + underlined, ~24px target pulled back by margin so the line keeps its height */
.ob-trust a:active{ opacity:0.7; }
  /* ── RSVP sheet — an rsvp.on card's button opens this instead of travelling anywhere. Same rect,
     radius, curve and notch as the checkout sheet, so the only thing it owns is its confirmation
     pane. Opaque base — nothing shows through the slide. (The audience/bell sheet shared every
     rule here by selector until it was removed, 28 Sep 2026.) ── */
.rsvp-detail{ position:absolute; z-index:5; display:flex; flex-direction:column; touch-action:none; overflow:hidden;
  border-radius:var(--drwr) var(--drwr) 0 0;
  /* THE SHEET SHAPE (Max, 11 Sep 2026; first worn by the pitch sheet, removed 28 Sep): a runway sibling wearing the drawer's exact glass
     recipe (tint, saturate-then-blur, inset highlight; scrim, grain and lit edge via the shared
     ::before/::after selectors), the height of its content, anchored to the bottom, sliding up
     over the unmoved peek. It used to be a transparent child filling the extended drawer. */
  background:rgba(24,20,17,0.25); -webkit-backdrop-filter:saturate(160%) blur(22px); backdrop-filter:saturate(160%) blur(22px);
  box-shadow:inset 0 10px 14px -12px rgba(255,255,255,0.20);
  padding:6px var(--sp) var(--sheet-padb,178px);
  pointer-events:none; visibility:hidden; will-change:transform;
  transform:translateY(calc(100% + 60px));
  transition:transform .5s cubic-bezier(.32,.72,0,1), visibility 0s linear .5s, padding-bottom .25s ease; }
.rsvp-detail.open{ pointer-events:auto; visibility:visible; transform:translateY(0);
  transition:transform .5s cubic-bezier(.32,.72,0,1), visibility 0s, padding-bottom .25s ease; }
.rsvp-detail.kb{ padding-bottom:calc(var(--sheet-padb,178px) + var(--kbh,0px)); } /* the keyboard lives INSIDE the sheet — pad by its overlap so the send button never sits under it */
.rsvp-detail .ob-steps{ margin-top:10px; }
.rsvp-done{ justify-content:center; text-align:center; } /* the panes share a height now, so the confirmation rides the middle */
.rsvp-done .ob-head{ font-size:32px; line-height:1.06; }
.rsvp-count{ margin-top:8px; font-family:var(--font-text); font-size:13px; font-weight:600; color:rgba(255,255,255,0.62); font-variant-numeric:tabular-nums; } /* the count the API answered with; tabular so it doesn't jiggle as it grows */
.rsvp-detail.kb .ob-head{ font-size:20px; }
.rsvp-detail.kb .ob-fields{ margin-top:12px; gap:8px; }
.rsvp-detail.kb .ob-input{ padding:11px 16px; }
.rsvp-detail.kb .ob-cta{ margin-top:12px; padding:12px; }
.rsvp-detail.kb .ob-trust{ opacity:0; max-height:0; margin:0; }

  /* ── checkout sheet (production port) ── */
  .checkout-detail{ position:absolute; z-index:6; display:flex; flex-direction:column; touch-action:none; overflow:hidden;
    border-radius:var(--drwr) var(--drwr) 0 0; background:#17110c;
    padding:0 0 150px; pointer-events:none; visibility:hidden; will-change:transform; /* = BLEED+10, keeps the form above the off-screen bleed */
    transform:translateY(calc(100% + 60px));
    transition:transform .5s cubic-bezier(.32,.72,0,1), visibility 0s linear .5s; }
  .checkout-detail.open{ pointer-events:auto; visibility:visible; transform:translateY(0);
    transition:transform .5s cubic-bezier(.32,.72,0,1), visibility 0s; }
  .checkout-handle{ flex-shrink:0; height:44px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
  .checkout-body{ flex:1; min-height:0; overflow:hidden; padding:0; }
  .checkout-body iframe{ width:100%; height:100%; min-height:240px; border:0; background:transparent; display:block; overscroll-behavior:contain; }
  .eb-mock{ margin:4px 12px 14px; background:#fbf8f3; color:#2b241d; border-radius:14px; padding:18px 16px 16px; font-family:-apple-system,system-ui,sans-serif; }
  .eb-mock h3{ font-size:17px; margin:0 0 2px; }
  .eb-mock .eb-sub{ font-size:12px; color:#7a7064; margin-bottom:14px; }
  .eb-tier{ display:flex; align-items:center; justify-content:space-between; padding:13px; border:1px solid #e6dfd3; border-radius:10px; margin-bottom:9px; }
  .eb-tier-name{ font-size:13px; font-weight:600; } .eb-tier-price{ font-size:12px; color:#7a7064; margin-top:2px; }
  .eb-qty{ display:flex; align-items:center; gap:12px; font-size:13px; color:#2b241d; }
  .eb-qty button{ width:26px; height:26px; border-radius:6px; border:1px solid #d7cfc2; background:#fff; font-size:15px; cursor:pointer; }
  .eb-pay{ width:100%; margin-top:6px; padding:14px; border-radius:10px; border:0; background:#F4A85C; color:#2b241d; font-size:14px; font-weight:600; cursor:pointer; }
  .eb-note{ font-size:10px; color:#9a9082; text-align:center; margin-top:10px; }

  /* ═══ BORDER-BEAM (production pulse glow) — @property registrations + gradient rules, lifted
     verbatim from viewer.css. outside|colorful = the live CTA; inner|sunset = the past ghost. ═══ */
/* outside|colorful */ @property --bw1-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh1-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bw2-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh2-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bw3-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh3-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bgh-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-tl-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-tr-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-bl-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-br-bm-outside-colorful { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bx1-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by1-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --bx2-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by2-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --bx3-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by3-bm-outside-colorful { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --beam-opacity-bm-outside-colorful { syntax: "<number>"; initial-value: 0; inherits: true; } @property --beam-hue-bm-outside-colorful { syntax: "<angle>"; initial-value: 0deg; inherits: true; }  [data-beam="bm-outside-colorful"][data-active] { animation: beam-fade-in-bm-outside-colorful 0.6s ease forwards; } [data-beam="bm-outside-colorful"][data-fading] { animation: beam-fade-out-bm-outside-colorful 0.5s ease forwards; } [data-beam="bm-outside-colorful"][data-active]::after, [data-beam="bm-outside-colorful"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 999px; padding: 1px; clip-path: inset(0 round 999px); background: radial-gradient(ellipse calc(80px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(19px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(27% + var(--bx1-bm-outside-colorful)) calc(0% + var(--by1-bm-outside-colorful)), rgba(255, 50, 100, var(--bop-tl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(74px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(11px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(73% + var(--bx2-bm-outside-colorful)) calc(-1% + var(--by2-bm-outside-colorful)), rgba(255, 120, 40, var(--bop-tr-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(15px * var(--bw3-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(44px * var(--bh3-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-bm-outside-colorful)) calc(33% + var(--by3-bm-outside-colorful)), rgba(240, 50, 180, var(--bop-tr-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(19px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(101% + var(--bx1-bm-outside-colorful)) calc(72% + var(--by1-bm-outside-colorful)), rgba(180, 40, 240, var(--bop-br-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(84px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(13px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(67% + var(--bx2-bm-outside-colorful)) calc(100% + var(--by2-bm-outside-colorful)), rgba(100, 70, 255, var(--bop-br-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(60px * var(--bw3-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(21px * var(--bh3-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(24% + var(--bx3-bm-outside-colorful)) calc(101% + var(--by3-bm-outside-colorful)), rgba(40, 140, 255, var(--bop-bl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(17px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(40px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(0% + var(--bx1-bm-outside-colorful)) calc(60% + var(--by1-bm-outside-colorful)), rgba(50, 200, 80, var(--bop-bl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(13px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(-1% + var(--bx2-bm-outside-colorful)) calc(28% + var(--by2-bm-outside-colorful)), rgba(30, 185, 170, var(--bop-tl-bm-outside-colorful)), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; will-change: opacity, filter; opacity: calc(var(--beam-opacity-bm-outside-colorful) * 0.94 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-outside-colorful))) brightness(1.90) saturate(1.20); } [data-beam="bm-outside-colorful"][data-active]::before, [data-beam="bm-outside-colorful"][data-fading]::before { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 1009px; background: radial-gradient(ellipse calc(80px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(19px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(27% + var(--bx1-bm-outside-colorful)) calc(0% + var(--by1-bm-outside-colorful)), rgba(255, 50, 100, var(--bop-tl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(74px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(11px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(73% + var(--bx2-bm-outside-colorful)) calc(-1% + var(--by2-bm-outside-colorful)), rgba(255, 120, 40, var(--bop-tr-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(15px * var(--bw3-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(44px * var(--bh3-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-bm-outside-colorful)) calc(33% + var(--by3-bm-outside-colorful)), rgba(240, 50, 180, var(--bop-tr-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(19px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(101% + var(--bx1-bm-outside-colorful)) calc(72% + var(--by1-bm-outside-colorful)), rgba(180, 40, 240, var(--bop-br-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(84px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(13px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(67% + var(--bx2-bm-outside-colorful)) calc(100% + var(--by2-bm-outside-colorful)), rgba(100, 70, 255, var(--bop-br-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(60px * var(--bw3-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(21px * var(--bh3-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(24% + var(--bx3-bm-outside-colorful)) calc(101% + var(--by3-bm-outside-colorful)), rgba(40, 140, 255, var(--bop-bl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(17px * var(--bw1-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(40px * var(--bh1-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(0% + var(--bx1-bm-outside-colorful)) calc(60% + var(--by1-bm-outside-colorful)), rgba(50, 200, 80, var(--bop-bl-bm-outside-colorful)), transparent), radial-gradient(ellipse calc(13px * var(--bw2-bm-outside-colorful) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh2-bm-outside-colorful) * var(--bgh-bm-outside-colorful) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(-1% + var(--bx2-bm-outside-colorful)) calc(28% + var(--by2-bm-outside-colorful)), rgba(30, 185, 170, var(--bop-tl-bm-outside-colorful)), transparent); transform: scale(0.95, 0.9); pointer-events: none; will-change: opacity, filter; opacity: calc(var(--beam-opacity-bm-outside-colorful) * 0.34 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); filter: blur(var(--beam-core-blur, 3px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-outside-colorful))) brightness(var(--beam-glow-brightness, 1.90)) saturate(var(--beam-glow-saturate, 1.20)); } [data-beam="bm-outside-colorful"] [data-beam-bloom] { display: none; position: absolute; inset: -30px; z-index: -1; border-radius: 1029px; background: radial-gradient(ellipse calc(110px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 27% 3%, rgba(255, 50, 100, 0.77), transparent), radial-gradient(ellipse calc(100px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(20px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 73% 1%, rgba(255, 120, 40, 0.77), transparent), radial-gradient(ellipse calc(26px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(62px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 100% 33%, rgba(240, 50, 180, 0.77), transparent), radial-gradient(ellipse calc(30px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(56px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 101% 72%, rgba(180, 40, 240, 0.77), transparent), radial-gradient(ellipse calc(120px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(22px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 67% 99%, rgba(100, 70, 255, 0.77), transparent), radial-gradient(ellipse calc(88px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 24% 99%, rgba(40, 140, 255, 0.77), transparent), radial-gradient(ellipse calc(28px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(58px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 0% 60%, rgba(50, 200, 80, 0.77), transparent); transform: scale(0.95, 0.9); pointer-events: none; will-change: transform; opacity: 0; } [data-beam="bm-outside-colorful"][data-active] [data-beam-bloom], [data-beam="bm-outside-colorful"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-bm-outside-colorful) * 0.30 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); filter: blur(var(--beam-bloom-blur, 22.5px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-outside-colorful))) brightness(var(--beam-glow-brightness, 1.90)) saturate(var(--beam-glow-saturate, 1.20)); } @keyframes beam-fade-in-bm-outside-colorful { to { --beam-opacity-bm-outside-colorful: 1; } } @keyframes beam-fade-out-bm-outside-colorful { from { --beam-opacity-bm-outside-colorful: 1; } to { --beam-opacity-bm-outside-colorful: 0; } } [data-beam="bm-outside-colorful"][data-paused], [data-beam="bm-outside-colorful"][data-paused]::after, [data-beam="bm-outside-colorful"][data-paused]::before, [data-beam="bm-outside-colorful"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { [data-beam="bm-outside-colorful"][data-active], [data-beam="bm-outside-colorful"][data-fading], [data-beam="bm-outside-colorful"][data-active]::after, [data-beam="bm-outside-colorful"][data-fading]::after, [data-beam="bm-outside-colorful"][data-active]::before, [data-beam="bm-outside-colorful"][data-fading]::before, [data-beam="bm-outside-colorful"][data-active] [data-beam-bloom], [data-beam="bm-outside-colorful"][data-fading] [data-beam-bloom] { animation: none !important; } }
/* inner|sunset */ @property --bw1-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh1-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bw2-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh2-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bw3-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bh3-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bgh-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-tl-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-tr-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-bl-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bop-br-bm-inner-sunset { syntax: "<number>"; initial-value: 1; inherits: true; } @property --bx1-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by1-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --bx2-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by2-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --bx3-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --by3-bm-inner-sunset { syntax: "<length>"; initial-value: 0px; inherits: true; } @property --beam-opacity-bm-inner-sunset { syntax: "<number>"; initial-value: 0; inherits: true; } @property --beam-hue-bm-inner-sunset { syntax: "<angle>"; initial-value: 0deg; inherits: true; }  [data-beam="bm-inner-sunset"][data-active] { animation: beam-fade-in-bm-inner-sunset 0.6s ease forwards; } [data-beam="bm-inner-sunset"][data-fading] { animation: beam-fade-out-bm-inner-sunset 0.5s ease forwards; } [data-beam="bm-inner-sunset"][data-active]::after, [data-beam="bm-inner-sunset"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 999px; padding: 1px; clip-path: inset(0 round 999px); background: radial-gradient(ellipse calc(70px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(40px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-bm-inner-sunset)) calc(-7.4% + var(--by1-bm-inner-sunset)), rgba(255, 80, 50, var(--bop-tl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(60px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-bm-inner-sunset)) calc(-5% + var(--by2-bm-inner-sunset)), rgba(255, 160, 40, var(--bop-tl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(40px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(70px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-bm-inner-sunset)) calc(68.3% + var(--by3-bm-inner-sunset)), rgba(255, 120, 60, var(--bop-bl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(20px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-bm-inner-sunset)) calc(68.3% + var(--by1-bm-inner-sunset)), rgba(255, 200, 50, var(--bop-bl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(180px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-bm-inner-sunset)) calc(100% + var(--by2-bm-inner-sunset)), rgba(255, 100, 80, var(--bop-br-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(85px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(26px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-bm-inner-sunset)) calc(100% + var(--by3-bm-inner-sunset)), rgba(255, 180, 60, var(--bop-br-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(74px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-bm-inner-sunset)) calc(0% + var(--by1-bm-inner-sunset)), rgba(255, 60, 60, var(--bop-tr-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(26px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-bm-inner-sunset)) calc(27.1% + var(--by2-bm-inner-sunset)), rgba(255, 140, 50, var(--bop-tr-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(52px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-bm-inner-sunset)) calc(27.1% + var(--by3-bm-inner-sunset)), rgba(255, 90, 70, var(--bop-tr-bm-inner-sunset)), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; will-change: opacity, filter; opacity: calc(var(--beam-opacity-bm-inner-sunset) * 1.54 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-inner-sunset))) brightness(0.75) saturate(1.20); } [data-beam="bm-inner-sunset"][data-active]::before, [data-beam="bm-inner-sunset"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 999px; clip-path: inset(0 round 999px); background: radial-gradient(ellipse calc(65px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-bm-inner-sunset)) calc(-7.4% + var(--by1-bm-inner-sunset)), rgba(255, 80, 50, var(--bop-tl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(55px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-bm-inner-sunset)) calc(-5% + var(--by2-bm-inner-sunset)), rgba(255, 160, 40, var(--bop-tl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(35px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(65px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-bm-inner-sunset)) calc(68.3% + var(--by3-bm-inner-sunset)), rgba(255, 120, 60, var(--bop-bl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(15px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-bm-inner-sunset)) calc(68.3% + var(--by1-bm-inner-sunset)), rgba(255, 200, 50, var(--bop-bl-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(173px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-bm-inner-sunset)) calc(100% + var(--by2-bm-inner-sunset)), rgba(255, 100, 80, var(--bop-br-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(80px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(22px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-bm-inner-sunset)) calc(100% + var(--by3-bm-inner-sunset)), rgba(255, 180, 60, var(--bop-br-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(69px * var(--bw1-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh1-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-bm-inner-sunset)) calc(0% + var(--by1-bm-inner-sunset)), rgba(255, 60, 60, var(--bop-tr-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(22px * var(--bw2-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--bh2-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-bm-inner-sunset)) calc(27.1% + var(--by2-bm-inner-sunset)), rgba(255, 140, 50, var(--bop-tr-bm-inner-sunset)), transparent), radial-gradient(ellipse calc(47px * var(--bw3-bm-inner-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(44px * var(--bh3-bm-inner-sunset) * var(--bgh-bm-inner-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-bm-inner-sunset)) calc(27.1% + var(--by3-bm-inner-sunset)), rgba(255, 90, 70, var(--bop-tr-bm-inner-sunset)), transparent), radial-gradient(ellipse 60px 60px at 0% 0%, rgba(255, 255, 255, calc(0.18 * var(--bop-tl-bm-inner-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 0%, rgba(255, 255, 255, calc(0.18 * var(--bop-tr-bm-inner-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 0% 100%, rgba(255, 255, 255, calc(0.18 * var(--bop-bl-bm-inner-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 100%, rgba(255, 255, 255, calc(0.18 * var(--bop-br-bm-inner-sunset))), transparent 70%); -webkit-mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-over; mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: add; pointer-events: none; z-index: 1; will-change: opacity, filter; opacity: calc(var(--beam-opacity-bm-inner-sunset) * 0.44 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-inner-sunset))) brightness(0.75) saturate(1.20); } [data-beam="bm-inner-sunset"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 999px; clip-path: inset(0 round 999px); background: radial-gradient(ellipse calc(84px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 33% -7.4%, rgba(255, 80, 50, 0.76), transparent), radial-gradient(ellipse calc(72px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 12% -5%, rgba(255, 160, 40, 0.76), transparent), radial-gradient(ellipse calc(48px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(84px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 2.1% 68.3%, rgba(255, 120, 60, 0.76), transparent), radial-gradient(ellipse calc(216px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 74.4% 100%, rgba(255, 100, 80, 0.76), transparent), radial-gradient(ellipse calc(102px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(31px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 55% 100%, rgba(255, 180, 60, 0.76), transparent), radial-gradient(ellipse calc(89px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 93.9% 0%, rgba(255, 60, 60, 0.76), transparent), radial-gradient(ellipse calc(62px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(58px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 100% 27.1%, rgba(255, 90, 70, 0.76), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; pointer-events: none; z-index: 3; will-change: opacity; opacity: 0; } [data-beam="bm-inner-sunset"][data-active] [data-beam-bloom], [data-beam="bm-inner-sunset"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-bm-inner-sunset) * 0.66 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-bm-inner-sunset))) brightness(0.75) saturate(1.20); } @keyframes beam-fade-in-bm-inner-sunset { to { --beam-opacity-bm-inner-sunset: 1; } } @keyframes beam-fade-out-bm-inner-sunset { from { --beam-opacity-bm-inner-sunset: 1; } to { --beam-opacity-bm-inner-sunset: 0; } } [data-beam="bm-inner-sunset"][data-paused], [data-beam="bm-inner-sunset"][data-paused]::after, [data-beam="bm-inner-sunset"][data-paused]::before, [data-beam="bm-inner-sunset"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { [data-beam="bm-inner-sunset"][data-active], [data-beam="bm-inner-sunset"][data-fading], [data-beam="bm-inner-sunset"][data-active]::after, [data-beam="bm-inner-sunset"][data-fading]::after, [data-beam="bm-inner-sunset"][data-active]::before, [data-beam="bm-inner-sunset"][data-fading]::before, [data-beam="bm-inner-sunset"][data-active] [data-beam-bloom], [data-beam="bm-inner-sunset"][data-fading] [data-beam-bloom] { animation: none !important; } }

  /* ── the deck ── */
  /* A CARD IS A CONTROL, NOT A DOCUMENT (same rule as the studio's event tiles): a long-press
     was starting an iOS text/image selection over the flyer. The old viewer suppresses this
     page-wide; here it is scoped to the deck so drawer text stays copyable. */
  .cf{ position:relative; perspective:1000px; touch-action:none; cursor:grab;
    -webkit-user-select:none; user-select:none; }
  .cf.dragging{ cursor:grabbing; }
  .cf-slot{ position:absolute; left:50%; top:50%; will-change:transform; transform-style:preserve-3d; }
  .cf-card{ position:absolute; inset:0; overflow:hidden; background:#0006; border-radius:26px; }
  /* AN EMPTY CARD IS A WINDOW ONTO THE PAGE (viewer.js builder, Max 26 Sep 2026): no photo, so
     no #0006 tint either — the ground behind the deck shows through and the hairline ring keeps
     the shape. The banner keeps its ramp: the card's ink is always white and needs it on a light
     ground. A BARE empty card (no title, kicker or button: the empty page's blank card) has
     nothing for the ramp to protect, so it drops that too. */
  .cf-card.cf-empty{ background:transparent; }
  .cf-card.cf-bare .cf-banner::before{ display:none; }
  .cf-moms,.cf-refl-moms{ position:absolute; inset:0; }
  .cf-moms img,.cf-refl-moms img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
    -webkit-user-drag:none; -webkit-touch-callout:none;
    transition:opacity .45s ease; pointer-events:none; -webkit-user-drag:none; user-select:none; }
  .cf-moms img.on,.cf-refl-moms img.on{ opacity:1; }
  /* THE FLYER SLIDE (viewer.js builder): the flyer whole, never cropped, over a blurred copy of
     itself that fills whatever the contain leaves empty. The copy sits under .cf-moms and fades
     with the flyer on the moments' .45s; it overhangs the card so the blur has no soft edge
     inside the clip. The title overlay and its scrim fade out on that slide, the CTA stays. */
  /* …and nothing sits ON it: the flyer fits the band between the progress bars (they end 17px
     down) and the bottom row, 10px clear of each, so a tall flyer's last line is never under the
     button. An explicit height, not top+bottom: an <img> with height:auto sizes from its own
     aspect ratio. */
  .cf-moms img.cf-flyer{ object-fit:contain; top:27px; }
  /* the backdrop is a still picture, blurred and darkened once by viewer.js flyerBackdrop: no live
     filter on a card that moves. .cf-flyer-live is the fallback for a source that would not lend
     its pixels (no CORS), the old live filter over the image itself. */
  .cf-flyer-bg{ position:absolute; inset:-10%; background-size:100% 100%; background-position:center;
    opacity:0; transition:opacity .45s ease; pointer-events:none; }
  .cf-flyer-bg.cf-flyer-live{ background-size:cover; filter:blur(22px) brightness(.78); }
  /* each copy is keyed to its moment (data-mi): the flyer's at 0, a contained later moment's at its own
     index; setMoment puts .on on the one whose moment is showing (the card keeps .flyer-on as before) */
  .cf-flyer-bg.on.ready{ opacity:1; }
  /* AN EVENT CARD'S FLYER sits between the bars and its bottom row, whose tallest child (the 48pt
     pill or its seat) tops out 64pt above the card's foot: 10pt clear of it, 27 from the top. The
     date and time stay on the flyer slide (BUILD-SPEC §3), over the ramp, beside the pill — the
     title overlay the flyer slide used to hide is gone from event cards altogether (28 Sep 2026),
     and a flyer is only ever an event card's. */
  .cf-card.cf-ev .cf-moms img.cf-flyer{ height:calc(100% - 101px); }
  /* A LATER MOMENT SHOWN WHOLE (the vibe deck; viewer.js builder, fit:'contain'): the profile
     picture or a logo, contained in the flyer's band over its own blurred copy. With a proof chip it
     starts 8pt under the chip (25 + 24 + 8) and ends where the flyer does, 10pt over the bottom row. */
  .cf-card.cf-ev .cf-moms img.cf-contain{ object-fit:contain; top:27px; height:calc(100% - 101px); }
  .cf-card.cf-ev .cf-moms img.cf-contain.cf-chipped{ top:57px; height:calc(100% - 131px); }
  /* .cf-scrim retired (Max, 4 Sep 2026) — the top wash hooded light artwork; viewer.js no
     longer creates the element */
  .cf-hair{ position:absolute; inset:0; width:100%; height:100%; z-index:7; pointer-events:none; }
  .cf-bars{ position:absolute; top:14px; left:20px; right:20px; display:flex; gap:5px; z-index:5; }
  .cf-bars.solo{ display:none; } /* one image = nothing to step through — a single full bar just looked stuck (Max, 4 Sep 2026) */
  .cf-pbar{ flex:1; height:2.5px; border-radius:999px; background:rgba(140,140,140,.65); /* neutral grey, not white: white at .3 vanished over a bright photo so the empty bars only appeared once the fill cycled. Picked on the simulator against black, white, a sky blue and the tobi wall (Max, 11 Sep) — the same value in hub.css .ev-bars i and home/index.html .cf-pbar */ overflow:hidden; }
  .cf-pfill{ height:100%; width:0; background:#fff; border-radius:999px; }
  /* ══ THE PROOF CHIP (the vibe deck, Max 2 Oct 2026; VIBE-DECK.md §6, the lab's R7 chip a). Top-left,
     8.5pt under the story bars (their 14 + 2.5, so 25 down the card; x 20 like the bars), on the event
     page's dark glass at .68 with a hairline, Inter 12/600 white, one line with an ellipsis. Measured
     10.9:1 median and 7.6:1 against the brightest pixels under it on the worst photo of the round.
     A required attribution (`credit`) is a second line of its own, 500 at .82, so the label's
     ellipsis never reaches it. Never a target, so the card's tap zones are what they were; it
     cross-fades with its moment over .25s and leaves the render's layer list while hidden
     (visibility), so a hidden chip's backdrop costs nothing. ══ */
  .cf-chips{ position:absolute; left:20px; right:20px; top:25px; height:0; z-index:5; pointer-events:none;
    -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .cf-chip{ position:absolute; left:0; top:0; max-width:100%; box-sizing:border-box; padding:4px 9px; border-radius:8px;
    background:rgba(24,20,17,.68); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    font-family:var(--font-read); font-size:var(--ts-fine); font-weight:600; line-height:16px; letter-spacing:0; color:#fff;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; }
  .cf-chip.on{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; }
  .cf-chip span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cf-chip .cf-chipc{ font-weight:500; color:rgba(255,255,255,.82); }

  /* ── reflection: a mirrored copy + a veil to the page bg (never box-reflect).
     OFF here — flip REFL in the script to bring it back (the markup + sizing pass stay). ── */
  .cf-refl{ display:none; }
  .cf.refl-on .cf-refl{ display:block; }
  .cf-refl{ position:absolute; left:0; top:100%; width:100%; margin-top:2px; pointer-events:none; overflow:hidden;
    transform-origin:top center; transform:rotateX(12deg) translateZ(0); }
  .cf-refl-flip{ position:absolute; left:0; top:0; width:100%; transform:scaleY(-1); overflow:hidden; }
  .cf-refl-veil{ position:absolute; inset:0;
    background:linear-gradient(to top, #0b0908 0%, rgba(11,9,8,0.7) 40%, transparent 100%); }

/* ══ LIGHT GLASS — html.light-ground (4 Sep 2026). The shell's applyTheme sets the class when
   the CHOSEN ground is bright (solid or image, by luminance): the drawer's dark material over
   a white page painted the grey slab Max flagged. Same geometry, inverted material: the
   --p-accent seam carries the ink (the comment above it always said the editor would write
   this seam), white-alpha tint and density ramp, dark pill and dividers. Default pages (the
   blurred-art ground) never carry the class — dark glass stands. ══ */
html.light-ground{ --p-accent:rgba(23,17,13,.92); --p-accent-dim:rgba(23,17,13,.58);
  --sec-divider:rgba(23,17,13,.12); }
html.light-ground .drawer, html.light-ground .rsvp-detail{ background:rgba(252,250,247,.35);
  box-shadow:inset 0 10px 14px -12px rgba(0,0,0,.12); }
/* the density ramp flips to WHITE so dark ink gains contrast the way white ink did; the grain
   tile is baked dark-alpha and goes with it (dither mattered on the dark ramp only) */
html.light-ground .drawer::before, html.light-ground .rsvp-detail::before{ background:
  linear-gradient(to bottom, rgba(252,250,247,0) 0px, rgba(252,250,247,.30) 28px,
    rgba(252,250,247,.52) 90px, rgba(252,250,247,.62) 100%); }
html.light-ground .drawer-pill{ background:rgba(23,17,13,.30); }
html.light-ground .cfh-brand,
html.light-ground .cfh-share{ background:rgba(252,250,247,.40);
  box-shadow:inset 0 6px 10px -8px rgba(0,0,0,.14); }
html.light-ground .cfh-share{ color:rgba(23,17,13,.92); }
html.light-ground .cfh-brandmark{ filter:none; }
html.light-ground .checkout-handle:active .drawer-pill,
html.light-ground .ob-notch:active .drawer-pill{ background:rgba(23,17,13,.55); }
@media (prefers-reduced-transparency:reduce){
html.light-ground .drawer, html.light-ground .rsvp-detail{ background:rgba(250,248,245,.97); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
}
@media (prefers-contrast:more){
html.light-ground .drawer, html.light-ground .rsvp-detail{ background:rgba(250,248,245,.97); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }
}


  /* the actionrow is the PERSONAL anatomy's home (brand chip, share); an event's peek is the
     viewer's .ev-head (below) since 28 Sep 2026 — the 11 Sep peek card (.pk) was retired with it */
  .drawer:not(.personal) .cfh-actionrow{ display:none; }
  .drawer.personal .cfh-brand .pk-label{ display:none; } /* the personal chip is the mark alone */

  /* ══ THE EVENT PEEK = THE PINNED HEADER (Max, 27-28 Sep 2026, BUILD-SPEC §4 and §6.1; the design
     lab's E2 · final + D3 compact header). Built by viewer.js (buildEvChrome), between the grabber
     and the scroller. At rest: avatar 38, its top on the title's cap height · the title Inter
     17/600, two lines, 22px leading (tighter lets a third line's "|" or a capital's accent leak
     a pixel through the clamp) · the host 13/500 at the dim ink · the place 13/500. As the
     drawer extends (renderDrawer → paintEvDrag, a pure function of its position): the block
     rides to 9pt under the grabber, the host line ROLLS up out of its clipped box as the when
     line rolls in, the place line folds away, the title closes to one line, and a hairline
     closes the header. -webkit-text-size-adjust: WebKit's autosizing boosted the 13px lines to
     16-20px in the lab when a block like this was built outside a sized box. ══ */
  .ev-head{ flex:none; position:relative; z-index:4; padding:9px var(--sp) 0; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .ev-head::after{ content:''; display:block; height:1px; margin-top:12px; background:var(--sec-divider); opacity:var(--ev-hl,0); }
  .drawer.personal .ev-head, .drawer.personal .ev-bar, .drawer.personal .ev-spacer{ display:none; }
  .drawer:not(.personal) .rest-summary{ display:none; }
  .ev-id{ position:relative; display:flex; align-items:flex-start; gap:12px; }
  /* the host sheet's doors (viewer.js buildEvChrome): the avatar's is a fixed 44pt square centred on
     the 38pt face (its 4.81 top less 3); the name's is 44 tall and as wide as the name, seated by
     sizeHostTap. Transparent: a press dims what they cover. Once the drawer extends the name has
     rolled into the when line, and only the avatar stays a door. */
  .ev-hosttap{ position:absolute; z-index:2; height:44px; margin:0; padding:0; border:0; border-radius:12px; background:none;
    -webkit-appearance:none; appearance:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ev-hostav{ left:-3px; top:1.81px; width:44px; border-radius:22px; }
  .ev-hostname{ left:-6px; top:0; width:44px; }
  .ev-hostav:active + .ev-av{ opacity:.7; }
  .ev-hostname:active ~ .ev-l2 .ev-host{ opacity:.55; }
  .drawer.reveal .ev-hostname{ display:none; }
  .ev-hostav:focus-visible{ outline:2px solid var(--ini-lime); outline-offset:0; }
  .ev-av{ width:38px; height:38px; flex:none; margin-top:4.81px; border-radius:50%; background-size:cover; background-position:center;
    background-color:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35); } /* 4.81 = 17 × (22/17 ÷ 2 − .364): the title's cap height (Inter's (ascent − descent)/2 − cap = −.364) */
  .ev-txt{ position:relative; flex:1; min-width:0; }
  h2.ev-title{ margin:0; font-family:var(--font-read); font-size:var(--ts-title); font-weight:600; line-height:22px; letter-spacing:-.013em;
    color:var(--p-accent,#f5f3ef); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
  h2.ev-title.one{ -webkit-line-clamp:1; }
  .ev-l2, .ev-l3{ margin:0; overflow:hidden; font-family:var(--font-read); white-space:nowrap; }
  .ev-l2{ margin-top:4px; height:18.2px; display:grid; }
  .ev-l2 > span{ grid-area:1 / 1; align-self:start; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .ev-host{ font-size:var(--ts-small); font-weight:500; line-height:18.2px; color:var(--p-accent-dim,rgba(245,243,239,.62));
    transform:translateY(calc(var(--ev-roll,0) * -100%)); }
  .ev-when{ font-size:var(--ts-body); font-weight:500; line-height:20px; color:var(--p-accent,#f5f3ef);
    transform:translateY(calc((1 - var(--ev-roll,0)) * 100%)); font-variant-numeric:tabular-nums; }
  .ev-when b{ font-weight:600; }
  .ev-when i{ font-style:normal; color:var(--p-accent-dim,rgba(245,243,239,.62)); }
  .ev-when .ev-st{ font-weight:600; }
  .ev-l3{ margin-top:2px; height:18.2px; font-size:var(--ts-small); font-weight:500; line-height:18.2px; color:var(--p-accent,#f5f3ef); text-overflow:ellipsis; }
  /* "Next event coming soon" in the peek of a page with no real night (viewer.js fillEvPeek): the
     place line's type, with the calendar glyph the card's state seat wears */
  .ev-l4{ height:0; overflow:hidden; }
  .ev-l4 .ev-soon{ display:flex; align-items:center; gap:6px; height:18.2px; font-family:var(--font-read); font-size:var(--ts-small); font-weight:500;
    line-height:18.2px; color:var(--p-accent,#f5f3ef); white-space:nowrap; }
  .ev-l4 .ev-soon svg{ width:14px; height:14px; flex:none; }
  .ev-spacer{ flex:none; height:0; pointer-events:none; }
  /* the sections rise from under the action row, never from a hard edge: a short bottom fade
     until the drawer reveals, where the scroller's own edge fade (--fade-bot) takes over */
  .drawer:not(.personal):not(.reveal) .drawer-scroll{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); }

  /* ══ THE INI BUTTON AND THE ACTION ROW (Max, 28 Sep 2026, BUILD-SPEC §5 and §6.2). Absolute in the
     drawer and pinned by its distance from the drawer's bottom edge (measureDrawerRest), so it
     holds one seat at every ratio: 334×52 at y 647 on the iPhone 17. The ONLY Unbounded on the
     page is the Ini's label. PRIMARY ("T1"): solid lime, ink label, the clover in a 32pt ink
     circle. SECONDARY: dark glass with a hairline, lime label and clover. Same box in every
     state; only the treatment and the label change. ══ */
  .ev-bar{ position:absolute; left:var(--sp); right:var(--sp); height:52px; z-index:5; display:flex; gap:8px; justify-content:space-between;
    -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .ev-ini, .evh-ini{ position:relative; flex:none; width:100%; height:52px; box-sizing:border-box; padding:0 18px; border-radius:999px;
    display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
    font-family:var(--font-ini); font-size:var(--ts-title); font-weight:600; letter-spacing:-.01em; line-height:1; white-space:nowrap;
    transition:transform .14s cubic-bezier(.2,.7,.2,1); }
  .ev-ini:active, .evh-ini:active{ transform:scale(.97); }
  .ev-ini-pri, .evh-ini{ background:var(--ini-lime); color:var(--ini-ink); }   /* .evh-ini: the host sheet's Ini, always the primary */
  .ev-ini-sec{ background:rgba(10,8,6,.40); color:var(--ini-lime); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
  .ev-ini.ev-inrow{ padding:0 14px; }
  .ev-ini-l, .evh-ini-l{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .ev-ini-l.ev-fit, .evh-ini-l.ev-fit{ font-size:15px; }   /* a full-width hook too long for this phone at 17 (viewer.js fitIniHook) */
  .ev-dot{ display:contents; }
  .ev-ini-pri .ev-dot, .evh-dot{ display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--ini-ink); }
  .ev-clover{ position:relative; display:block; flex:none; width:24px; height:24px; }
  .ev-ini-pri .ev-clover, .evh-dot .ev-clover{ width:21px; height:21px; }
  .ev-clover img{ position:absolute; left:-25%; top:-35%; width:150%; height:150%; pointer-events:none; -webkit-user-drag:none; user-select:none; } /* the library's overscan and rise (home/index.html .ini-av canvas) */
  /* the row's trailing pill: the card pill's twin (.cf-cta.cf-pill), 52 tall like the Ini */
  .ev-bar .cf-cta.ev-pri{ margin-left:0; height:52px; padding:0 16px; justify-content:center; opacity:0; visibility:hidden; transform-origin:50% 50%; }

  /* Instagram's band (SAFE_B > 0): "Powered by inside.live", a centred statement — no link, no
     mark, no chevron, no divider. Its line box sits on the band's top; 3pt up puts its cap
     height ~20pt under the Ini button. */
  .d-restlegal.ev-powered{ transform:translateY(-3px); padding:0 var(--sp); pointer-events:none; }
  .ev-powered p{ margin:0; height:15px; font-family:var(--font-read); font-size:var(--ts-fine); line-height:15px; letter-spacing:0; white-space:nowrap;
    -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .ev-powered .ev-pw{ font-weight:400; color:rgba(245,243,239,.72); }
  .ev-powered .ev-il{ font-weight:600; color:rgba(245,243,239,.94); }

/* ── the sheet family's glass X (Max, 11 Sep 2026): the artist sheet's .ad-close, seated inside
   the 48px corner, on the notch row ── */
.rsvp-detail .sh-close{ top:18px; right:18px; }
.rsvp-detail .ob-steps{ margin-top:8px; }

/* ══ THE IMAGE VIEWER (BUILD-SPEC §9; viewer.js ivOpen). An absolute layer over the whole runway —
   never position:fixed, whose laid-out box costs Safari its under-toolbar bleed — so the dim also
   covers the runway's bleed under the toolbar. display:none at rest (.gone). The viewer owns every
   touch in it (Pointer Events: pinch, pan, double-tap, drag away); page zoom stays off. The dim
   is ~60% (Max): the page behind stays readable, so a tap outside reads as the way out. ══ */
.iv-layer{ position:absolute; left:0; right:0; top:0; z-index:8; overflow:hidden; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.iv-layer.gone{ display:none; }
.iv-dim{ position:absolute; inset:0; background:#080605; opacity:0; will-change:opacity; }   /* its own layer: without it every frame's dim repainted a screen of the page under it */
/* THE FLIGHT IS COMPOSITE AND PAINT ONLY (viewer.js ivPaint): the box is the viewport, seated at
   the scroll by transform, and clips with a clip-path (the card's superellipse for a photo, a
   rectangle for a flyer); the art is laid out once and flown by transform from its top-left. */
.iv-box{ position:absolute; left:0; top:0; width:100%; height:100vh; will-change:transform; }
.iv-art{ position:absolute; left:0; top:0; display:block; max-width:none; transform-origin:0 0; will-change:transform;
  -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; pointer-events:none; }
/* WHAT THE CARD LENDS THE VIEWER, ON LAYERS OF THEIR OWN (viewer.js ivLand). Its image (while the
   viewer shows it) and its chrome (bars, bottom row, hairline: held at 0 once the card has faded
   out) sit on their own compositing layers for the viewer's whole life, so they are painted while
   nobody sees the card and landing is an opacity change the compositor makes. Painted at landing,
   they cost Safari a ~110ms frame that the fades, already timed, skipped straight past. The layers
   go when the fades are done (ivSettle). No transition: the moments' .45s cross-fade must not run. */
.cf-card .cf-moms img.iv-lent{ opacity:.001; }   /* not 0: 0 lets WebKit skip painting it, and the landing pays */
.cf-card .cf-moms img.iv-lent, .cf-card .cf-moms img.iv-keep{ transition:none; will-change:opacity; }
.cf-card.iv-hush .cf-bars, .cf-card.iv-hush .cf-banner, .cf-card.iv-hush .cf-hair, .cf-card.iv-hush .cf-chips{ opacity:.001; will-change:opacity; }
.cf-card.iv-wake .cf-bars, .cf-card.iv-wake .cf-banner, .cf-card.iv-wake .cf-hair, .cf-card.iv-wake .cf-chips{ will-change:opacity; }
/* the deck and the drawer, while the viewer lives: their own layers from the open to the settle, so
   their fades out and their way home are compositor work. Promoted only for their animations, they
   were demoted as the way home ended and repainted into the page: a 78ms frame just before the image
   landed (simulator). The drawer's glass already gives it a layer, except under Reduce Transparency */
.cf.iv-deck, .drawer.iv-deck{ will-change:opacity; }
/* no visible × (Max): the Close leads the dialog, visually hidden, shown only on keyboard focus */
.iv-x{ position:absolute; left:12px; top:12px; z-index:2; height:44px; padding:0 16px; border:0; border-radius:12px; -webkit-appearance:none; appearance:none;
  background:rgba(30,26,22,.72); color:#fff; font:600 15px/1 var(--font-read); cursor:pointer; clip-path:inset(50%); opacity:0; pointer-events:none; }
.iv-x:focus-visible{ clip-path:none; opacity:1; pointer-events:auto; outline:2px solid var(--ini-lime); outline-offset:2px; }
/* the way in without a gesture (VoiceOver, a keyboard): visually hidden until focused */
.iv-vo{ position:absolute; z-index:9; left:24px; top:8px; height:44px; padding:0 16px; border:0; border-radius:12px; -webkit-appearance:none; appearance:none;
  background:rgba(20,16,13,.72); color:#fff; font:600 15px/1 var(--font-read); clip-path:inset(50%); opacity:0; }
.iv-vo:focus-visible{ clip-path:none; opacity:1; outline:2px solid var(--ini-lime); outline-offset:2px; }