/* ============================================================================
   P3 STUDIO — mobile glass UI (stage 69, 14 Sep 2026)
   The liquid-glass contact orb and its morphing panel, the glass skip
   control with its single arrow push, the glass caption treatment with dark
   ink and the shared caption lift, and the blur-to-clear hamburger menu.

   Source: P3-Mobile-Glass-Handover-2026-09-13/code/p3lc.css, consolidated
   to its FINAL EFFECTIVE declarations. The handover CSS kept its iteration
   history in cascade order (three arrow studies, a white-ink caption pass,
   a film-framing trial); every rule here is the declaration that won in
   that file. The two things deliberately NOT carried:
     - the film-framing trial (#filmBox top:64px / object-fit:cover and the
       engine's max() scale) — rejected by ruling in the stage-69 brief;
     - the arrow "rush" and "trails" keyframes — superseded by the single
       p3lc-arrow-push below, and the trails group is no longer built.

   ⚠ FENCE. Everything is inside `(max-width: 1023px)` and gated on the body
   class `.p3lc-on`, which assets/js/p3lc.js adds only while that same query
   matches. The prototype used 767px; the site's own desktop boundary is
   1024 (the burger, .bar-nav, the mobile shell rules), so the fence is
   mapped to 1023 to match the shell — the same width at which the burger
   menu this stylesheet restyles exists at all. Desktop (≥1024) receives no
   rule, no markup and no script effect.

   Loaded AFTER site.css; only p3lc-prefixed ids, classes and custom
   properties, plus overrides of the existing #menu, #heroSkip and .cap.
   ========================================================================= */

@property --p3lc-angle { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@keyframes p3lc-orbit { from { --p3lc-angle: 0deg; } to { --p3lc-angle: 360deg; } }
@keyframes p3lc-flare {
  0%, 60% { transform: translateX(-140%) rotate(-18deg); }
  100%    { transform: translateX(180%) rotate(-18deg); }
}
/* The skip arrow: one anticipation and one push, once per real skip.
   0 → −3px at 32% → +8px at 54% → 0 at 100%, over 480ms. */
@keyframes p3lc-arrow-push {
  0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  32%  { transform: translateY(-3px); animation-timing-function: cubic-bezier(.65, 0, .9, .3); }
  54%  { transform: translateY(8px);  animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { transform: translateY(0); }
}

@media (max-width: 1023px) {

  /* ---- 1 · the contact orb and its panel: one animated surface ---------- */
  #p3lc-root {
    position: fixed; inset: 0; overflow: hidden; z-index: 9000;
    pointer-events: none;
    font-family: 'Schibsted Grotesk', sans-serif;
    color: #f2ece3;
  }
  #p3lc-root * { box-sizing: border-box; }
  #p3lc-anchor { position: absolute; left: 0; top: 0; width: 58px; height: 58px; pointer-events: auto; }
  .p3lc-surface {
    position: absolute; left: 0; top: 0; width: 58px; height: 58px;
    transform-origin: 0 0;
    border-radius: 31px;
    background: linear-gradient(145deg, #fff5e51f, #ffffff04 45%, #26160935);
    -webkit-backdrop-filter: blur(var(--p3lc-blur, 12px)) saturate(1.55);
    backdrop-filter: blur(var(--p3lc-blur, 12px)) saturate(1.55);
    box-shadow:
      inset 0 var(--p3lc-inset, 1px) var(--p3lc-inset, 1px) #fff9,
      inset 0 calc(-1 * var(--p3lc-inset, 1px)) var(--p3lc-inset, 1px) #24130866,
      0 4px 10px #0003;
    pointer-events: none;
    /* the rim gradient is resolved on the animated surface, shared by rim and
       bloom; the same animation survives expansion, its clock never restarts */
    animation: p3lc-orbit 9s linear infinite;
    --p3lc-ring: conic-gradient(from var(--p3lc-angle),
      #f2ece314 0deg, #f2ece314 240deg, #C1793A 285deg, #E8A25C 313deg,
      #FFF6EA 335deg, #8FB8DE 350deg, #f2ece314 360deg);
  }
  .p3lc-surface::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: var(--p3lc-rim, 1.5px);
    background: var(--p3lc-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .p3lc-surface::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    padding: var(--p3lc-rim, 1.5px);
    background: var(--p3lc-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: blur(2px); opacity: .8; pointer-events: none;
  }
  .p3lc-sheen { position: absolute; inset: 1px; overflow: hidden; border-radius: inherit; }
  /* Stage 70B: the 6s sheen belongs to the COLLAPSED orb only. It is declared
     for that state alone, so the open panel carries no sweep declaration at
     all (nothing is neutralised); the pseudo-element itself stays, empty. */
  #p3lc-root:not([data-open=true]) .p3lc-sheen::after {
    content: ''; position: absolute; inset: -30%;
    background: linear-gradient(100deg, transparent 35%, #fff5 49%, transparent 63%);
    animation: p3lc-flare 6s cubic-bezier(.45, 0, .55, 1) infinite;
  }
  #p3lc-trigger {
    position: absolute; inset: 0; width: 58px; height: 58px;
    border: 0; border-radius: 50%; background: transparent; color: #fff;
    display: grid; place-items: center;
    touch-action: none; cursor: grab;
    filter: drop-shadow(0 1px 2px #000);
    padding: 0;
  }
  #p3lc-trigger svg { width: 25px; height: 25px; pointer-events: none; }
  #p3lc-panel {
    position: absolute; inset: 0;
    padding: 30px 18px 18px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 2px; text-align: center;
    text-shadow: 0 1px 3px #000a, 0 2px 12px #0006;
    opacity: 0; pointer-events: none; transform: translateY(7px);
    transition: opacity 160ms cubic-bezier(.32, .72, 0, 1), transform 240ms cubic-bezier(.32, .72, 0, 1);
    overflow: auto;
  }
  #p3lc-root[data-open=true] #p3lc-panel { opacity: 1; pointer-events: auto; transform: none; transition-delay: 100ms; }
  #p3lc-root[data-open=true] #p3lc-trigger { visibility: hidden; }
  #p3lc-root[data-open=true] .p3lc-surface { background: linear-gradient(145deg, #fff5e530, #ffffff08 42%, #26160930); }
  #p3lc-panel h2 {
    font: 500 22px/1.3 'Schibsted Grotesk', sans-serif;
    margin: 0 0 10px; letter-spacing: -.5px;
  }
  #p3lc-panel a {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 10px; min-height: 48px; padding: 8px 0; margin: 0;
    border-radius: 12px; background: none;
    color: #fff; text-decoration: none;
    font-size: 13px; font-weight: 500; line-height: 1.5;
    max-width: 100%; overflow-wrap: anywhere;
  }
  #p3lc-panel a:hover { background: #ffffff12; }
  #p3lc-panel a span { font-size: 15px; line-height: 1.3; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
  #p3lc-panel a[href^="tel:"] span { font-size: 29px; line-height: 1.2; font-weight: 600; letter-spacing: -.7px; }
  /* warm gradient type: heading, number and address share the stops */
  #p3lc-panel h2, #p3lc-panel a span {
    background: linear-gradient(115deg, #fff6d9 5%, #f6db95 40%, #eab66a 65%, #fff0c9 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 2px #171009) drop-shadow(0 2px 7px #17100999);
  }
  #p3lc-panel a svg { width: 22px; height: 22px; flex-shrink: 0; display: block; color: #f6db95; filter: drop-shadow(0 1px 2px #0006); }
  #p3lc-panel a[href^="mailto:"] svg { width: 19px; height: 19px; }
  #p3lc-panel a[href^="mailto:"] { position: relative; margin-top: 7px; padding-top: 14px; }
  #p3lc-panel a[href^="mailto:"]::before {
    content: ''; position: absolute; top: 0; left: 4%; right: 4%; height: 1px;
    background: linear-gradient(90deg, transparent, #f6db9570 30%, #fff0c9a0 50%, #f6db9570 70%, transparent);
  }
  #p3lc-close {
    position: absolute; right: 7px; top: 5px; width: 44px; height: 44px;
    background: none; border: 0; border-radius: 50%;   /* stage 70: a round control, so its ring is round */
    color: #f2ece3; font-size: 22px; cursor: pointer;
    text-shadow: 0 1px 4px #0008; opacity: .85;
  }
  /* Stage 70: the keyboard ring is drawn as a box-shadow, which follows the
     element's own radius in every engine (an outline does not in older
     Safari). Same 2px #f2dcc0 at a 4px offset as before. It appears only
     when focus was moved by a key: p3lc.js gives a pointer-opened panel no
     focus at all, so a tap can never be drawn as keyboard focus. */
  #p3lc-root :focus-visible { outline: 0; box-shadow: 0 0 0 4px transparent, 0 0 0 6px #f2dcc0; }
  #p3lc-safe {
    position: absolute; visibility: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #p3lc-root[data-paused=true] .p3lc-surface,
  #p3lc-root[data-paused=true] .p3lc-surface::after,
  #p3lc-root[data-paused=true] .p3lc-sheen::after { animation-play-state: paused; }

  /* ---- 2 · the same glass on the captions and the skip control ---------- */
  .p3lc-on .cap, .p3lc-on #heroSkip {
    background: linear-gradient(145deg, #fff5e530, #ffffff08 42%, #26160930) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.55) !important;
    backdrop-filter: blur(12px) saturate(1.55) !important;
    border: 0;
    box-shadow: inset 0 1px 1px #fff8, inset 0 -1px 2px #24130866, 0 4px 14px #0003;
    color: #fff3d7 !important;
    --p3lc-ring: conic-gradient(from var(--p3lc-angle),
      #f2ece314 0deg, #f2ece314 240deg, #C1793A 285deg, #E8A25C 313deg,
      #FFF6EA 335deg, #8FB8DE 350deg, #f2ece314 360deg);
    animation: p3lc-orbit 9s linear infinite;
  }
  .p3lc-on .cap::before, .p3lc-on #heroSkip::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1.5px; background: var(--p3lc-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  .p3lc-on .cap::after, .p3lc-on #heroSkip::after {
    content: ''; position: absolute; inset: -2px; border-radius: inherit;
    padding: 2px; background: var(--p3lc-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: blur(3px); opacity: .65; pointer-events: none;
  }
  /* Stage 69B: the caption plate carries its own ground. The handover's
     gradient is 3-19% light and the dark ink it ended up under has no shadow,
     so over the walnut frames the ink read 1.5:1 (stage 69's measurement).
     A uniform warm-white base (#FFF6EA, the rim palette) is composited
     BENEATH the same gradient, so the ground does not depend on where in the
     145deg sweep a line falls. Glass, rim, bloom, radius, padding, type and
     positions are unchanged. The alpha was found by sampling rendered pixels
     (the worst pixel behind each caption over its whole frame range, both
     inks, three widths), not by arithmetic — see the stage suite. The skip
     control keeps the bare gradient: its arrow is cream. */
  .p3lc-on #filmCaps { --p3lc-plate: 0.66; }
  /* Stage 71 (Andrea: "knock the opacity down a bit so we can see a little
     more of what is underneath"). 0.66 is a floor for the darkest frames, not
     a preference, so each caption carries its own alpha: the lowest, to 0.01,
     at which the dark ink still clears 4.5:1 with 0.15 held back on that
     caption's worst pixel over every frame of its range at 320 and 390 and
     every third at 430, the worst width taken. Three barely move (4, 5 and 8:
     0.65, 0.62, 0.60); the bright-frame captions drop to 0.44-0.60. Same
     sampler and clip as 69B; the values are the ones the stage suite's direct
     sampler confirms (the sub-line, at .95 opacity, is the binding line). */
  .p3lc-on #filmCaps .cap:nth-child(1) { --p3lc-plate: 0.54; }   /* It started with a plain wall. */
  .p3lc-on #filmCaps .cap:nth-child(2) { --p3lc-plate: 0.52; }   /* Structure first. */
  .p3lc-on #filmCaps .cap:nth-child(3) { --p3lc-plate: 0.58; }   /* Now the whole room gathers around it. */
  .p3lc-on #filmCaps .cap:nth-child(4) { --p3lc-plate: 0.65; }   /* Somewhere to sleep. */
  .p3lc-on #filmCaps .cap:nth-child(5) { --p3lc-plate: 0.62; }   /* Walnut slats. */
  .p3lc-on #filmCaps .cap:nth-child(6) { --p3lc-plate: 0.58; }   /* Now it feels as calm as it looks. */
  .p3lc-on #filmCaps .cap:nth-child(7) { --p3lc-plate: 0.44; }   /* Most people would call this a box room. */
  .p3lc-on #filmCaps .cap:nth-child(8) { --p3lc-plate: 0.60; }   /* Built around what you actually have. */
  .p3lc-on #filmCaps .cap:nth-child(9) { --p3lc-plate: 0.60; }   /* The smallest room. */
  .p3lc-on .cap {
    background:
      linear-gradient(145deg, #fff5e530, #ffffff08 42%, #26160930),
      rgba(255, 246, 234, var(--p3lc-plate)) !important;
  }
  /* dark ink, no shadow — the comparison Andrea retained. Type families,
     sizes, wrapping and padding stay site.css's. The cream alternative is
     the one commented line below it, with its original shadow: swap the two
     to change the ink. A shadow is a legibility aid, not the ground — the
     plate above is what carries the contrast figure. */
  .p3lc-on .cap .cap-line, .p3lc-on .cap .cap-sub { color: #211a15 !important; text-shadow: none; }
  /* .p3lc-on .cap .cap-line, .p3lc-on .cap .cap-sub { color: #fff3d7 !important; text-shadow: 0 1px 3px #000, 0 2px 8px #0008; } */
  .p3lc-on .cap .cap-sub { opacity: .95; }
  .p3lc-on .cap:not(.on) { animation-play-state: paused; }

  /* the skip glyph: the -10 -10 44 44 viewport drawn at 44×44 and clipped by
     the circle, so the push has the disc's interior to travel in. The film
     engine adds .p3lc-skipping when a skip starts and removes it in endSkip(). */
  .p3lc-on #heroSkip > svg { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; }
  .p3lc-on #heroSkip.p3lc-skipping .p3lc-skip-arrow { animation: p3lc-arrow-push 480ms both; stroke-width: 1.6; }

  /* ---- 3 · the caption lift: one variable, two positions ------------------
     .pos-tl stays at left 4% / top 11%. The middle-right and bottom-left
     captions each rise by the same 80px, so their separation is preserved and
     the first caption's gap to the second reduces — intended. */
  .p3lc-on #filmCaps { --p3lc-caption-lift: 80px; }
  /* Stage 71, caption rhythm (Andrea): the first caption is the anchor and
     does not move; the third moves "ever so slightly" down; the second goes
     where equal spacing puts it, measured between box CENTRES. The third's
     drop is width-linked so the docked orb keeps at least 10px of clearance
     under the stage-69B definition (the caption's entering bounds): 4px at
     320, 8 at 360, 11 at 390, 15 at 430. The second's top is written by
     p3lc.js as --p3lc-c2-top from the rendered heights of its room's first
     and third captions, re-measured on resize and when fonts settle; the
     stage-69B position is the fallback until it is. */
  .p3lc-on .cap.pos-mr { top: var(--p3lc-c2-top, calc(44% - var(--p3lc-caption-lift))); }
  .p3lc-on .cap.pos-bl { bottom: calc(6% + var(--p3lc-caption-lift) - clamp(4px, 10vw - 28px, 16px)); }

  /* ---- 4 · the menu: diffuse content resolves through a glass veil --------
     One static backdrop blur whose OPACITY crossfades; the blur radius is
     never animated per frame. Links and Enquire resolve together after 70ms. */
  .p3lc-on #menu {
    background: linear-gradient(145deg, rgba(49, 39, 30, .42), rgba(22, 19, 17, .64));
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
    transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), visibility 0s 360ms;
  }
  .p3lc-on.menu-open #menu { transition: opacity 580ms cubic-bezier(.22, .7, .25, 1), visibility 0s; }
  .p3lc-on #menu .menu-link, .p3lc-on #menu .cta-wrap {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(3px) scale(.975);
    transform-origin: 100% 0;
    transition: opacity 240ms cubic-bezier(.4, 0, .2, 1), filter 320ms cubic-bezier(.4, 0, .2, 1), transform 320ms cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0s;
  }
  .p3lc-on.menu-open #menu .menu-link, .p3lc-on.menu-open #menu .cta-wrap {
    opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
    transition: opacity 450ms cubic-bezier(.22, .7, .25, 1) 70ms, filter 620ms cubic-bezier(.22, .7, .25, 1) 70ms, transform 620ms cubic-bezier(.22, .7, .25, 1) 70ms;
  }
  .p3lc-on.menu-open #p3lc-root { visibility: hidden; }   /* no competing overlays */
  .p3lc-on.p3lc-menu-keyboard #menu,
  .p3lc-on.p3lc-menu-keyboard #menu .menu-link,
  .p3lc-on.p3lc-menu-keyboard #menu .cta-wrap { transition: none; }

  /* ---- 5 · reduced motion, on every path ---------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    #p3lc-root *, #p3lc-root *::before, #p3lc-root *::after { animation: none !important; transition: none !important; }
    .p3lc-on .cap, .p3lc-on #heroSkip { animation: none !important; }
    .p3lc-on #heroSkip.p3lc-skipping .p3lc-skip-arrow { animation: none !important; }
    .p3lc-on #menu, .p3lc-on #menu .menu-link, .p3lc-on #menu .cta-wrap { transition: none !important; filter: none !important; transform: none !important; }
  }

  /* ---- 6 · no backdrop-filter --------------------------------------------
     The site's own condition (site.css .cap fallback), which also recognises
     the -webkit- form older iOS ships: the handover's unprefixed-only test
     would have handed iOS 16/17 the opaque fallback. Fallback values are the
     ones site.css already uses for each surface; the orb's is the handover's. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .p3lc-surface { background: #35281eee; }
    .p3lc-on .cap { background: rgba(242, 236, 227, 0.9) !important; }
    .p3lc-on #heroSkip { background: rgba(18, 16, 14, 0.3) !important; }
    .p3lc-on #menu { background: rgba(18, 16, 14, 0.9); }
  }

  /* ---- 7 · the measured low tier (stage 72) --------------------------------
     html.p3lc-low is added by p3lc.js only once the phone in front of it has
     missed frames for a sustained stretch of scrubbing (or on ?tier=low).
     Nothing here matches otherwise, so a capable device's computed styles are
     the ones above, unchanged. What the low tier gives up, in the brief's
     order: the live backdrop blur — each glass surface re-blurred the film
     every frame — replaced by the site's own opaque fallback above (the 0.9
     cream plate for the captions); the blurred bloom pseudo-elements, the
     sheen sweep, the drop shadows and the 9s rim orbit (a main-thread custom
     property animation that restyled and repainted every frame). The rim
     stays, static. Frame count, positions, type, copy and the film geometry
     are untouched; the engine takes the 828 frame set for the same 1,128. */
  html.p3lc-low .p3lc-surface {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: #35281eee; box-shadow: none; animation: none;
  }
  /* Stage 72C: the OPEN panel's own background rule (an id, an attribute and a
     class) outranked the line above, so a low-tier panel opened onto the bare
     3-19% gradient with no blur behind it: clear, the film sharp through it.
     The fallback ground applies to the open panel too. */
  html.p3lc-low #p3lc-root[data-open=true] .p3lc-surface { background: #35281eee; }
  html.p3lc-low .p3lc-surface::after,
  html.p3lc-low #p3lc-root .p3lc-sheen::after,
  html.p3lc-low .p3lc-on .cap::after,
  html.p3lc-low .p3lc-on #heroSkip::after { display: none; }
  html.p3lc-low .p3lc-on .cap, html.p3lc-low .p3lc-on #heroSkip {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none; animation: none;
  }
  html.p3lc-low .p3lc-on .cap { background: rgba(242, 236, 227, 0.9) !important; }
  html.p3lc-low .p3lc-on #heroSkip { background: rgba(18, 16, 14, 0.3) !important; }
  html.p3lc-low .p3lc-on #menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 16, 14, 0.9); }

  /* ---- 8 · Stage 86c: the orb's and the skip control's rims on the compositor
     p3lc-orbit turned a registered angle, so the page restyled and repainted
     every frame for as long as the orb or the skip control was there. The
     same pictures are drawn here by still boxes with a turning gradient
     (site.css, STAGE 86c, explains the construction): .lap-lc is ::before
     (the rim), .lap-lcg > .lap-lcb > .lap-lcc is ::after (the blurred twin) in
     its order of operations — the gradient clipped to the rounded box (lcc),
     blurred (lcb), then masked to the ring and faded (lcg). p3lc.js puts the
     boxes where the pseudo-elements sit. The pseudo-elements stay what draws
     the rims at rest: reduced motion and the low tier (sections 5 and 7) never
     see the boxes. The captions keep p3lc-orbit: nine caption layers would
     cost about 90 MB of layer memory on a 3x phone, and a caption's lap runs
     only while that caption is on screen (section 2). */
  @supports (width: 1cqw) and selector(:has(*)) {   /* site.css's condition for showing a lap */
    @media (prefers-reduced-motion: no-preference) {
      /* as in site.css, an old rim is switched off only where its box is present */
      html:not(.p3lc-low) .p3lc-surface:has(> .lap-lc):has(> .lap-lcg),
      html:not(.p3lc-low) .p3lc-on #heroSkip:has(> .lap-lc):has(> .lap-lcg) { animation: none; }
      html:not(.p3lc-low) .p3lc-surface:has(> .lap-lc)::before, html:not(.p3lc-low) .p3lc-surface:has(> .lap-lcg)::after,
      html:not(.p3lc-low) .p3lc-on #heroSkip:has(> .lap-lc)::before, html:not(.p3lc-low) .p3lc-on #heroSkip:has(> .lap-lcg)::after { content: none; }
      .lap-lc, .lap-lcg {
        border-radius: inherit;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
      }
      .lap-lc { inset: 0; padding: var(--p3lc-rim, 1.5px); container-type: size; }
      .lap-lcb { inset: 0; border-radius: inherit; }
      .lap-lcc { inset: 0; border-radius: inherit; container-type: size;
        -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); }
      .p3lc-surface > .lap-lcg { inset: -1px; padding: var(--p3lc-rim, 1.5px); opacity: .8; }
      .p3lc-surface > .lap-lcg > .lap-lcb { filter: blur(2px); }
      #heroSkip > .lap-lcg { inset: -2px; padding: 2px; opacity: .65; }
      #heroSkip > .lap-lcg > .lap-lcb { filter: blur(3px); }
      .lap-lc::before, .lap-lcc::before {
        content: ''; position: absolute; left: 50%; top: 50%;
        --lap-s: calc(max(100cqw, 100cqh) * 1.415 + 12px);
        width: var(--lap-s); height: var(--lap-s);
        margin: calc(var(--lap-s) / -2) 0 0 calc(var(--lap-s) / -2);
        background: conic-gradient(from 0deg,
          #f2ece314 0deg, #f2ece314 240deg, #C1793A 285deg, #E8A25C 313deg,
          #FFF6EA 335deg, #8FB8DE 350deg, #f2ece314 360deg);
        animation: p3-lap 9s linear infinite;
      }
      #p3lc-root[data-paused=true] .lap-lc::before,
      #p3lc-root[data-paused=true] .lap-lcc::before { animation-play-state: paused; }
      html.p3lc-low .lap-lc, html.p3lc-low .lap-lcg { display: none; }
    }
  }
}

/* belt and braces: should the root ever exist above the fence, it is not drawn */
@media (min-width: 1024px) { #p3lc-root { display: none; } }