/* ============================================================================
   LEARNERSFIELD :: "PRESTIGE GLASS" LAYER  —  lf-glam.css  (2026-11-03)
   ----------------------------------------------------------------------------
   Purpose
     One motion + material layer that gives every front-end card the same
     premium, quietly-animated glassmorphic identity, and turns the gallery
     into a lit exhibition (cinematic banner, exhibit rail, framed prints,
     pointer-tracked specular light, film-slow Ken Burns).

   Load order
     style.css -> premium.css -> greenglass.css -> lf-loader.css -> lf-glam.css
     This file is LAST so it can refine (never fight) the layers below.

   Design law
     - Palette is preserved (paper / forest / deep / lime / gold). No new hue.
     - Motion is slow and cinematic: state changes 0.45-0.9s, ambient loops
       24-40s. No bounce, no flicker, no auto-rotating carousels.
     - Every effect degrades: no backdrop-filter -> solid tinted glass;
       prefers-reduced-motion -> all animation removed; touch -> reveals are
       permanent instead of hover-only.
     - Nothing here mutates layout boxes that JS measures (Shuffle sizes the
       gallery with inline transforms; we only animate `translate`, `filter`
       and `opacity`, never `transform`, on shuffle-owned cards).

   Sections
     00 tokens   01 card foundation   02 light + gild   03 components
     04 dark cards   05 gallery exhibition   06 banner cinema   07 controls
     08 keyframes   09 responsive   10 reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------- 00 tokens */
:root{
  --glam-ease: cubic-bezier(.22,.61,.36,1);
  --glam-ease-out: cubic-bezier(.16,1,.3,1);
  --glam-ease-soft: cubic-bezier(.4,.14,.3,1);

  --glam-ink:#102a27;
  --glam-forest:#173c35;
  --glam-gold:#c4a66a;
  --glam-lime:#d7e7a6;
  --glam-jade:#779054;

  --glam-glass: linear-gradient(152deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.70) 42%,
      rgba(238,244,232,.74) 100%);
  --glam-glass-flat: #f4f7ef;
  --glam-hair: rgba(255,255,255,.75);
  --glam-line: rgba(16,42,39,.10);

  --glam-shadow:
      0 1px 2px rgba(16,42,39,.05),
      0 16px 34px -22px rgba(16,42,39,.30),
      0 46px 90px -60px rgba(16,42,39,.55);
  --glam-shadow-hover:
      0 2px 4px rgba(16,42,39,.06),
      0 26px 54px -24px rgba(16,42,39,.36),
      0 70px 120px -70px rgba(16,42,39,.60);
  --glam-radius: 18px;
}

/* animated custom property (Chromium/WebKit/Firefox 2024+) so the specular
   highlight can fade with a real transition; older engines simply snap. */
@property --glam-spec{
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* no backdrop-filter: fall back to an opaque, softly tinted glass */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  :root{ --glam-glass: linear-gradient(152deg,#ffffff,#f2f6ec 55%,#e9f0e2); }
}

/* ------------------------------------------------------ 01 card foundation */
.lf-card,
.lf-album,
.lf-tile,
.lf-person,
.lf-quote,
.lf-side,
.lf-steps,
.lf-icoTile,
.lf-chipcard,
.lf-cinfo__block{
  position: relative;
  background: var(--glam-glass);
  border: 1px solid var(--glam-hair);
  border-radius: var(--glam-radius);
  box-shadow: var(--glam-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  transform: none;                      /* retire the old flat hover lift   */
  translate: 0 0;                       /* composited lift, shuffle-safe    */
  transition:
      translate .62s var(--glam-ease),
      box-shadow .62s var(--glam-ease),
      border-color .62s var(--glam-ease),
      background-color .62s var(--glam-ease);
}

.lf-card:hover,
.lf-album:hover,
.lf-tile:hover,
.lf-person:hover,
.lf-quote:hover,
.lf-side:hover,
.lf-steps:hover,
.lf-icoTile:hover,
.lf-chipcard:hover,
.lf-cinfo__block:hover{
  transform: none;                       /* cancel the legacy flat-lift rule */
  translate: 0 -6px;
  box-shadow: var(--glam-shadow-hover);
  border-color: rgba(196,166,106,.42);
}

/* keyboard parity: same lift when a card's link is focused */
.lf-card:focus-within,
.lf-album:focus-within,
.lf-tile:focus-within{
  transform: none;
  translate: 0 -4px;
  box-shadow: var(--glam-shadow-hover);
  border-color: rgba(196,166,106,.42);
}

/* ----------------------------------------------------- 02 light + gild trim */
/* gilded hairline that fades in (masked 1px gradient border) */
.lf-card::before,
.lf-album::before,
.lf-tile::before,
.lf-person::before,
.lf-quote::before,
.lf-side::before,
.lf-steps::before,
.lf-icoTile::before,
.lf-chipcard::before,
.lf-cinfo__block::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(135deg,
      rgba(255,255,255,.95) 0%,
      rgba(215,231,166,.55) 34%,
      rgba(196,166,106,.75) 58%,
      rgba(255,255,255,.85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0;
  transition: opacity .55s var(--glam-ease);
}
.lf-card:hover::before,
.lf-album:hover::before,
.lf-tile:hover::before,
.lf-person:hover::before,
.lf-quote:hover::before,
.lf-side:hover::before,
.lf-steps:hover::before,
.lf-icoTile:hover::before,
.lf-chipcard:hover::before,
.lf-cinfo__block:hover::before{ opacity:1; }

/* pointer-tracked specular sheen — the "polished glass" tell.
   JS writes --glam-x / --glam-y and flips --glam-spec on hover. */
.lf-card::after,
.lf-album::after,
.lf-tile::after,
.lf-person::after,
.lf-quote::after,
.lf-side::after,
.lf-steps::after,
.lf-icoTile::after,
.lf-chipcard::after,
.lf-cinfo__block::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(280px circle at var(--glam-x,50%) var(--glam-y,0%),
      rgba(255,255,255,.85), rgba(255,255,255,0) 64%);
  opacity: var(--glam-spec,0);
  mix-blend-mode: soft-light;
  transition: opacity .5s var(--glam-ease);
}

/* ------------------------------------------------------------ 03 components */

/* — news / event cards : matted print + glass body — */
.lf-card{ overflow:hidden; padding:10px; }
.lf-card__img,
.lf-card__media{
  height:206px;
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#dfe5db;
  box-shadow: inset 0 0 0 1px rgba(16,42,39,.06), 0 12px 26px -18px rgba(16,42,39,.55);
}
.lf-card__media img{ height:100%; }
.lf-card__img img,
.lf-card__media img{
  transform: scale(1.01);
  transition: transform 1.35s var(--glam-ease-out), filter .7s ease;
}
.lf-card:hover .lf-card__img img,
.lf-card:hover .lf-card__media img{ transform: scale(1.075); }
.lf-card__body{ padding:19px 16px 18px; gap:9px; }
.lf-card__body h3{ letter-spacing:-.012em; }
.lf-card__date{
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.95);
  box-shadow: 0 12px 26px -18px rgba(16,42,39,.65), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-radius:11px;
  z-index:2;
}
.lf-card__more i,
.lf-underlink::after{ transition: transform .5s var(--glam-ease); }
.lf-card__more i{ display:inline-block; }
.lf-card:hover .lf-card__more i{ transform: translateX(5px); }

/* — contact info blocks : icon medallion on glass — */
.lf-cinfo__block{ padding:20px; border-radius:16px; }
.lf-cinfo__block i{
  background: linear-gradient(160deg, #e9f1da, #d3e3bb 60%, #c9dcb0);
  color: var(--glam-forest);
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px -14px rgba(23,60,53,.8);
}

/* — testimonials : glass with a gilded quote mark — */
.lf-quote{ border-radius:20px; overflow:hidden; }
.lf-quote::before{ z-index:2; }
.lf-quote{ isolation:isolate; }
.lf-quote p{ position:relative; z-index:1; }
.lf-quote__stars{
  color: var(--glam-gold);
  text-shadow: 0 0 14px rgba(196,166,106,.55);
  animation: glamStar 6.5s ease-in-out infinite;
}

/* — side rails / step panels — */
.lf-side{ border-radius:16px; }
.lf-steps{ border-radius:16px; }

/* — icon features — */
.lf-icoTile{ border-radius:16px; }
.lf-chipcard{ border-radius:16px; }

/* — teachers : photograph framed in glass, colour returns on hover — */
.lf-person{ overflow:hidden; border-radius:18px; }
.lf-person__art img{ filter: grayscale(.28) contrast(1.04) saturate(.95); transition: filter .8s var(--glam-ease), transform 1.3s var(--glam-ease-out); }
.lf-person:hover .lf-person__art img{ filter:none; transform: scale(1.04); }

/* — home gallery strip : quiet glass frames — */
.lf-gallery .lf-gallery__item{
  border:1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 40px -26px rgba(16,42,39,.55);
  transition: translate .6s var(--glam-ease), box-shadow .6s var(--glam-ease);
}
.lf-gallery .lf-gallery__item:hover{ translate:0 -5px; box-shadow: 0 30px 60px -30px rgba(16,42,39,.6); }

/* -------------------------------------------------------- 04 dark-context cards */
.lf-featured li,
.lf-numbers .lf-number{
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 55%, rgba(215,231,166,.06));
  border:1px solid rgba(215,231,166,.22);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  border-radius:16px;
  transition: border-color .6s var(--glam-ease), box-shadow .6s var(--glam-ease), background .6s;
}
.lf-featured li:hover{
  border-color: rgba(215,231,166,.42);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.26);
}
.lf-numbers .lf-number{ padding:26px 14px; }

/* --------------------------------------------------- 05 gallery : exhibition */
.lf-exhibit{ position:relative; isolation:isolate; overflow:hidden; }
.lf-exhibit__air{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* a soft projection beam that breathes across the wall */
.lf-exhibit__beam{
  position:absolute; left:-12%; top:-35%;
  width:72%; height:130%;
  background: linear-gradient(100deg,
      rgba(215,231,166,.30) 0%,
      rgba(215,231,166,.10) 38%,
      rgba(215,231,166,0) 62%);
  filter: blur(34px);
  transform: rotate(7deg);
  animation: glamBeam 26s var(--glam-ease-soft) infinite alternate;
  opacity:.55;
}

/* dust in the light — 5 motes, 22-34s each, pointer-free */
.lf-mote{
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:3px; height:3px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(215,231,166,.45) 58%, transparent 72%);
  opacity:0;
  animation: glamMote var(--dur,28s) linear infinite;
  animation-delay: var(--d,0s);
}

/* everything above the air layer */
.lf-exhibit #doctors-filter,
.lf-exhibit #doctors-grid,
.lf-exhibit .lf-grid3,
.lf-exhibit .lf-h2{ position:relative; z-index:1; }

/* — album = framed print + floating glass plaque — */
.lf-album{
  padding:11px 11px 0;
  border-radius:20px;
  overflow:hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.68) 46%, rgba(238,244,232,.76));
  box-shadow: var(--glam-shadow);
}
.lf-album__img{
  position:relative;
  height:264px;
  border-radius:13px;
  overflow:hidden;
  perspective: 900px;
  box-shadow: inset 0 0 0 1px rgba(16,42,39,.07), 0 12px 26px -18px rgba(16,42,39,.6);
  isolation:isolate;
}
.lf-album__img img{
  transform: rotateX(var(--grx,0deg)) rotateY(var(--gry,0deg)) scale(1.02);
  transition: transform 1.15s var(--glam-ease-out), filter .8s ease;
  will-change: transform;
}
.lf-album:hover .lf-album__img img{
  transform: rotateX(var(--grx,0deg)) rotateY(var(--gry,0deg)) scale(1.075);
}
/* the print's own light sweep */
.lf-album__img::after{
  content:"";
  position:absolute; inset:-40% -65%;
  z-index:2; pointer-events:none;
  background: linear-gradient(105deg,
      transparent 40%, rgba(255,255,255,.62) 50%, transparent 60%);
  transform: translateX(-55%) rotate(6deg);
  opacity:0;
  transition: transform 1.15s var(--glam-ease-out), opacity .4s ease;
  mix-blend-mode: screen;
}
.lf-album:hover .lf-album__img::after{ transform: translateX(55%) rotate(6deg); opacity:1; }

.lf-album__open{
  z-index:5;
  width:40px; height:40px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  color: var(--glam-forest);
  box-shadow: 0 12px 24px -14px rgba(0,0,0,.7), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity:0; transform: translateY(8px) scale(.94);
  transition: opacity .45s var(--glam-ease), transform .45s var(--glam-ease), background .3s, color .3s;
}
.lf-album:hover .lf-album__open,
.lf-album:focus-within .lf-album__open{ opacity:1; transform:none; }
.lf-album__img:hover .lf-album__open{ background: var(--glam-lime); color: var(--glam-ink); }

/* the plaque */
.lf-album__body{
  position:relative; z-index:4;
  margin:-32px 10px 14px;
  padding:16px 18px 17px;
  border-radius:15px;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  border:1px solid rgba(255,255,255,.95);
  box-shadow: 0 20px 36px -24px rgba(16,42,39,.6), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px) saturate(165%);
          backdrop-filter: blur(16px) saturate(165%);
  transition: translate .6s var(--glam-ease), box-shadow .6s var(--glam-ease);
}
.lf-album:hover .lf-album__body{ translate:0 -4px; box-shadow: 0 28px 48px -26px rgba(16,42,39,.65), inset 0 1px 0 #fff; }
.lf-album__body h3{ letter-spacing:-.014em; }
.lf-album__meta{
  display:inline-flex; align-items:center; gap:8px;
  color:#7b887e;
}
.lf-album__meta::before{
  content:""; width:14px; height:1px;
  background: linear-gradient(90deg, var(--glam-gold), rgba(196,166,106,0));
}
.lf-album__body p{ color:#58665e; }

/* — album detail : framed prints on a spot-lit wall — */
.lf-exhibit--detail .lf-grid3{
  gap:26px;
}
.lf-tile{
  padding:10px;
  border-radius:16px;
  overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.lf-tile__img{
  position:relative;
  height:238px;
  border-radius:11px;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(16,42,39,.07), 0 12px 26px -18px rgba(16,42,39,.6);
}
.lf-tile__img img{ transform: scale(1.01); transition: transform 1.3s var(--glam-ease-out); }
.lf-tile:hover .lf-tile__img img{ transform: scale(1.07); }
.lf-tile__img::after{
  content:"";
  position:absolute; inset:-40% -65%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.60) 50%, transparent 60%);
  transform: translateX(-55%) rotate(6deg);
  opacity:0; transition: transform 1.15s var(--glam-ease-out), opacity .4s;
  pointer-events:none; mix-blend-mode:screen;
}
.lf-tile:hover .lf-tile__img::after{ transform: translateX(55%) rotate(6deg); opacity:1; }
.lf-tile__open{
  z-index:5; width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 24px -14px rgba(0,0,0,.7), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: opacity .45s var(--glam-ease), transform .45s var(--glam-ease), background .3s, color .3s;
}
.lf-tile:hover .lf-tile__open,
.lf-tile:focus-within .lf-tile__open{ opacity:1; transform:none; }
.lf-tile a:hover .lf-tile__open{ background: var(--glam-lime); color: var(--glam-ink); }

/* gallery entrance — a slow walk down the wall.
   NOTE: no `filter` here — a lingering filter would neutralise the card's
   own backdrop-filter glass blur. */
.lf-exhibit #doctors-grid .lf-album{
  opacity:0;
  animation: glamHang .95s var(--glam-ease-out) forwards;
}
.lf-exhibit #doctors-grid .lf-album:nth-child(1){ animation-delay:.05s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(2){ animation-delay:.13s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(3){ animation-delay:.21s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(4){ animation-delay:.29s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(5){ animation-delay:.37s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(6){ animation-delay:.45s; }
.lf-exhibit #doctors-grid .lf-album:nth-child(n+7){ animation-delay:.5s; }

/* filter change: one soft breath, never a flash */
#doctors-grid.is-shuffling{ animation: glamBreath .5s var(--glam-ease-soft); }

/* -------------------------------------------------------- 06 banner cinema */
.lf-banner{
  isolation:isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(1200px 640px at 84% 4%, rgba(215,231,166,.22), transparent 56%),
    radial-gradient(900px 560px at 2% 98%, rgba(196,166,106,.16), transparent 52%),
    linear-gradient(150deg, #1a433b 0%, #102a27 56%, #0b211e 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 140px 140px, auto, auto, auto;
}
.lf-banner::before{
  content:"";
  position:absolute; inset:-35% -12%;
  z-index:0; pointer-events:none;
  background: conic-gradient(from 205deg at 32% 42%,
      rgba(215,231,166,.20) 0deg,
      rgba(215,231,166,0) 60deg,
      rgba(196,166,106,.16) 120deg,
      rgba(196,166,106,0) 190deg,
      rgba(163,191,95,.18) 250deg,
      rgba(163,191,95,0) 320deg,
      rgba(215,231,166,.20) 360deg);
  filter: blur(48px) saturate(125%);
  opacity:.9;
  animation: glamAurora 40s linear infinite;
  will-change: transform;
}
.lf-banner__img{ z-index:0; overflow:hidden; }
.lf-banner__img img{
  opacity:.32;
  mix-blend-mode: luminosity;
  animation: glamKen 34s var(--glam-ease-soft) infinite alternate;
  will-change: transform;
}
.lf-banner h1,
.lf-banner h2{
  text-shadow: 0 2px 34px rgba(0,0,0,.28);
  letter-spacing:-.035em;
}
.lf-banner h1::after,
.lf-banner h2::after{
  content:"";
  display:block;
  width:86px; height:2px;
  margin-top:22px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--glam-gold), rgba(196,166,106,.05));
}
.lf-banner__kicker::before{
  animation: glamRule 3.6s var(--glam-ease-soft) infinite alternate;
}
.lf-banner__crumb b{ letter-spacing:.16em; }

/* ----------------------------------------------------------- 07 controls */
.lf-filter a,
#doctors-filter.lf-filter a{
  border:1px solid rgba(255,255,255,.75) !important;
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
  color: var(--glam-forest) !important;
  box-shadow: 0 10px 22px -18px rgba(16,42,39,.7), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  transition: background .45s var(--glam-ease), color .45s, box-shadow .45s, translate .45s var(--glam-ease);
}
.lf-filter a:hover,
.lf-filter a.active,
#doctors-filter.lf-filter a:hover,
#doctors-filter.lf-filter a.active{
  background: linear-gradient(150deg, #256b59, #173c35 60%, #102a27) !important;
  color:#fff !important;
  border-color: rgba(196,166,106,.45) !important;
  box-shadow: 0 20px 36px -22px rgba(16,42,39,.75), inset 0 1px 0 rgba(215,231,166,.4);
  translate:0 -2px;
}
/* buttons: keep the greenglass gradient; only the focus ring is ours */
.lf-btn:focus-visible{ outline:3px solid var(--glam-lime); outline-offset:3px; }

/* lightbox: cinema, not popup */
.mfp-bg{ background:#081714; opacity:.82; }
.mfp-bg.mfp-ready{ -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
.mfp-img{ border-radius:12px; box-shadow: 0 40px 90px -40px #000; }
.mfp-figure::after{ box-shadow: none; }

/* ---------------------------------------------------------- 08 keyframes */
@keyframes glamHang{
  from{ opacity:0; scale:.985; }
  to  { opacity:1; scale:1; }
}
@keyframes glamBeam{
  from{ transform: rotate(7deg) translate3d(-4%, 0, 0) scale(1); opacity:.38; }
  to  { transform: rotate(9deg) translate3d(6%, 2%, 0) scale(1.06); opacity:.62; }
}
@keyframes glamMote{
  0%   { opacity:0; transform: translate3d(0, 0, 0) scale(.7); }
  12%  { opacity:.5; }
  70%  { opacity:.35; }
  100% { opacity:0; transform: translate3d(38px, -180px, 0) scale(1.15); }
}
@keyframes glamAurora{
  from{ transform: rotate(0deg) scale(1); }
  to  { transform: rotate(360deg) scale(1.06); }
}
@keyframes glamKen{
  from{ transform: scale(1.04) translate3d(-1%, 0, 0); }
  to  { transform: scale(1.13) translate3d(1.4%, -1.6%, 0); }
}
@keyframes glamRule{
  from{ width:22px; opacity:.55; }
  to  { width:40px; opacity:1; }
}
@keyframes glamStar{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(196,166,106,0)); }
  50%    { filter: drop-shadow(0 0 6px rgba(196,166,106,.55)); }
}
@keyframes glamBreath{
  0%  { opacity:1; filter: blur(0); }
  40% { opacity:.55; filter: blur(2px); }
  100%{ opacity:1; filter: blur(0); }
}

/* --------------------------------------------------------- 09 responsive */
@media (max-width: 1024px){
  .lf-album__img{ height:236px; }
}
@media (max-width: 720px){
  .lf-album__img{ height:224px; }
  .lf-album__body{ margin:-28px 8px 12px; padding:14px 16px 15px; }
  .lf-tile__img{ height:210px; }
  .lf-banner h1::after,
  .lf-banner h2::after{ width:64px; margin-top:18px; }
  /* smaller screens: keep the ambience, lower the GPU bill */
  .lf-exhibit__beam{ filter: blur(24px); }
  .lf-banner::before{ filter: blur(30px); }
}
@media (max-width: 560px){
  .lf-album{ border-radius:18px; padding:9px 9px 0; }
  .lf-album__img{ height:212px; }
  .lf-tile{ padding:8px; }
  .lf-tile__img{ height:196px; }
  .lf-exhibit__beam{ opacity:.35; }
}

/* touch / no-hover: a reveal that never fires is a missing affordance */
@media (hover: none){
  .lf-album__open,
  .lf-tile__open{ opacity:1; transform:none; }
  .lf-album__img img{ transform: none; }
}

/* ---------------------------------------------------- 10 reduced motion */
@media (prefers-reduced-motion: reduce){
  .lf-card, .lf-album, .lf-tile, .lf-person, .lf-quote, .lf-side, .lf-steps,
  .lf-icoTile, .lf-chipcard, .lf-cinfo__block,
  .lf-card__img img, .lf-card__media img, .lf-album__img img, .lf-tile__img img,
  .lf-person__art img, .lf-gallery__item, .lf-btn{
    transition: none !important;
    animation: none !important;
  }
  .lf-card:hover, .lf-album:hover, .lf-tile:hover, .lf-person:hover,
  .lf-quote:hover, .lf-side:hover, .lf-steps:hover, .lf-icoTile:hover,
  .lf-chipcard:hover, .lf-cinfo__block:hover,
  .lf-card:focus-within, .lf-album:focus-within, .lf-tile:focus-within{ translate:none; }
  .lf-exhibit__beam,
  .lf-mote,
  .lf-banner::before,
  .lf-banner__img img,
  .lf-banner__kicker::before,
  .lf-quote__stars{ animation: none !important; }
  .lf-exhibit #doctors-grid .lf-album{ opacity:1; translate:none; animation:none !important; }
  .lf-album__img img,
  .lf-album:hover .lf-album__img img{ transform:none; }
  .lf-card::after, .lf-album::after, .lf-tile::after, .lf-person::after,
  .lf-quote::after, .lf-side::after, .lf-steps::after, .lf-icoTile::after,
  .lf-chipcard::after, .lf-cinfo__block::after{ display:none; }
}

/* gallery detail page never inherits a sticky exhibit rail */
.lf-exhibit--detail{ --glam-radius:16px; }

/* ======================================================================
   11 · CLIENT FIXES — 2026-11-04
   ====================================================================== */

/* 11.1 "Future-ready learning" floatnote -------------------------------
   premium.css anchored it right:-26px / top:24%, which lands on the
   performers (verified against all three live slides lf-hero-1/2/3.jpg).
   New anchor: the photo's top-left edge — sky / roofline on every slide,
   so the badge keeps its floating language and never covers people.   */
.lf-hero .lf-orbit-hero-note{
  right: auto;
  left: 20px;
  top: -36px;
  z-index: 7;
  box-shadow:
    0 18px 40px -22px rgba(10,26,23,.55),
    0 0 0 1px rgba(16,42,39,.06);
}
@media (max-width:1100px){
  .lf-hero .lf-orbit-hero-note{ left:14px; top:-30px; }
}
@media (max-width:640px){
  .lf-hero .lf-orbit-hero-note{ left:10px; top:-24px; padding:12px 15px; }
  .lf-hero .lf-orbit-hero-note i{ font-size:19px; }
}

/* 11.2 "Moments from the field" — constant scroll that holds on hover ---
   Progressive enhancement: only active after lf-glam.js adds .lf-marquee.
   No-JS, reduced-motion and Save-Data keep the original static grid.    */
.lf-gallery__grid.lf-marquee{
  display: flex;
  overflow: hidden;
  padding-block: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.lf-marquee__track{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: lf-drift var(--lf-drift, 60s) linear infinite;
  will-change: transform;
}
.lf-gallery__grid.lf-marquee .lf-gallery__item{
  flex: 0 0 clamp(250px, 23.5vw, 352px);
  margin: 0;
  translate: 0 0;
}
.lf-gallery__grid.lf-marquee:hover .lf-marquee__track,
.lf-gallery__grid.lf-marquee:focus-within .lf-marquee__track{ animation-play-state: paused; }
@keyframes lf-drift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .lf-marquee__track{ animation: none !important; }
}

/* 11.3 the news ticker is the third auto-moving strip — same hold rule --- */
.lf-ticker:hover .lf-ticker__track,
.lf-ticker:focus-within .lf-ticker__track{ animation-play-state: paused; }

/* ==========================================================================
   12. ACCESSIBILITY PASS (axe-core 4.10.2, 2026-11-04)
   --------------------------------------------------------------------------
   12.1 Kicker contrast. The base kicker green (#60756b) measures 4.30:1 on
        the mist surface (#eff0e8) at 10px bold - below WCAG AA (4.5:1).
        #556a60 measures 5.06:1 there and >= 4.96:1 on every other light
        surface in use, while keeping the same muted-jade character.
        Dark-surface kickers carry .lf-kicker--light and are untouched.
   12.2 Heading parity. The hero chip cards moved h3 -> h2 and the footer
        column labels moved h4 -> h2 so the document outline no longer skips
        levels. These rules reproduce the original type exactly.
   ========================================================================== */
.lf-kicker:not(.lf-kicker--light){ color:#556a60; }

.lf-chipcard h2{ font:500 21px/1.3 var(--serif); margin:0; }
.lf-footer h2{
  font:700 10px/1 var(--display);
  letter-spacing:.16em;
  color:var(--lime);
  text-transform:uppercase;
  margin:10px 0 22px;
}