/* Louli collection layer, loaded after the live sheets.
   Extends tcs.css / v2.css; never redefines their tokens. Everything is namespaced lc-.

   RULES THIS FILE ESTABLISHES
   colour   one stage tint and one floor tone per character, all at the same lightness so the six
            read as one family. Ink and paper stay the live tokens.
   type     Instrument Sans for interface and headings (live). Instrument Serif, already self-hosted,
            for the one line a specialist asks. Nothing else.
   space    8px base. Stage radius 28, inner radius 14. Section rhythm comes from --v2-gap.
   framing  figures are trimmed cutouts whose bottom edge is the feet. They stand ON a floor line,
            never float, and always carry a contact shadow. Heads may break the top of a stage.
   motion   transform and opacity only, one beat per character, once on entry and again on hover or
            keyboard focus. These are interface movements applied to a still image. They are NOT
            character animation and must never be described as such. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-400.woff2') format('woff2')}

:root{
  --lc-main:#E6D0D3;      --lc-main-floor:#D3B4B9;
  --lc-tall:#D8E6D2;      --lc-tall-floor:#BFD3B8;
  --lc-mustard:#EED595;   --lc-mustard-floor:#DDBD6E;
  --lc-mushroom:#F0C0AB;  --lc-mushroom-floor:#E0A189;
  --lc-slate:#C9D2E1;     --lc-slate-floor:#ADB9CE;
  --lc-doxie:#DED2C7;     --lc-doxie-floor:#C9B9AB;
  --lc-radius:28px;
  --lc-serif:'Instrument Serif','Instrument Serif Fallback G','Instrument Serif Fallback T',Georgia,'Times New Roman',serif;
}

/* ---------- the stage: tint, floor, contact shadow ---------- */
.lc-stage{position:relative;isolation:isolate}
.lc-stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--lc-radius);
  background:linear-gradient(to bottom,var(--tint) 0 var(--floor-at,78%),var(--floor) var(--floor-at,78%) 100%)}
.lc-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:var(--lc-radius);
  background:radial-gradient(120% 80% at 22% 8%,rgba(255,255,255,.55),transparent 60%)} /* upper-left key light, matches the renders */
.lc-fig{position:absolute;bottom:calc(100% - var(--floor-at,78%) - var(--sink,5%));display:block;z-index:1;margin:0}
.lc-fig img{display:block;height:100%;width:auto;max-width:none;transform-origin:50% 100%}
.lc-fig::before{content:"";position:absolute;left:6%;right:6%;bottom:-3%;height:9%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,21,15,.30),rgba(22,21,15,.12) 55%,transparent)}

/* ---------- hero ---------- */
.lc-hero-stage{--tint:var(--lc-main);--floor:var(--lc-main-floor);--floor-at:80%;aspect-ratio:5/6;width:100%}
.lc-hero-stage .lc-fig{height:93%;left:52%;translate:-50% 0}   /* the head breaks the top edge, on purpose */
.lc-hero-note{position:absolute;z-index:2;left:18px;bottom:16px;max-width:64%;margin:0;padding:10px 14px;border-radius:14px;
  background:var(--paper);font-size:.95rem;line-height:1.35;box-shadow:0 1px 0 rgba(22,21,15,.10)}
.v2 .v2-hero-art.lc-hero-art img{border-radius:0;box-shadow:none;margin:0}  /* the live rule rounds and shadows the old rectangle */

/* ---------- the collection ---------- */
.lc-collection{border-bottom:1px solid var(--line)}
.lc-intro{max-width:44em}
.lc-intro h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);line-height:1.08;letter-spacing:-.015em;margin:8px 0 12px;text-wrap:balance}
.lc-piece{display:grid;gap:clamp(20px,3.4vw,48px);align-items:center;margin-top:clamp(40px,7vw,88px)}
.lc-copy{min-width:0}
.lc-role{display:flex;gap:10px;align-items:baseline;margin:0 0 10px;font-size:.95rem;color:var(--ink-2)}
.lc-role b{color:var(--ink);font-weight:600}
.lc-chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--tint);font-size:.82rem;color:var(--ink)}
.lc-q{font-family:var(--lc-serif);font-weight:400;font-size:clamp(2rem,1.2rem + 3vw,3.5rem);line-height:1.02;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.lc-sit{font-size:1.06rem;color:var(--ink-2);max-width:32em;margin:0 0 10px}
.lc-does{font-size:.98rem;color:var(--ink-3);max-width:32em;margin:0 0 18px}
.lc-go{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-underline-offset:4px;touch-action:manipulation}
.lc-go:hover{text-decoration-thickness:2px}
.lc-go:focus-visible,.lc-hero-art a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

/* the curriculum spine, always visible above the five pieces */
.lc-spine{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:22px;max-width:640px}
.lc-spine a{display:block;padding:10px 12px;border-radius:12px;background:var(--paper-2);color:var(--ink);text-decoration:none;min-height:44px;touch-action:manipulation}
.lc-spine a:hover{background:var(--paper-3)}
.lc-spine a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.lc-spine b{display:block;font-weight:600}
.lc-spine span{display:block;font-size:.8rem;color:var(--ink-3)}
.lc-piece{scroll-margin-top:84px}
.lc-more{margin-top:clamp(40px,7vw,88px)}
.lc-more h3{font-size:1.1rem;margin:0 0 12px}
.lc-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* props are real HTML so every word and number stays editable */
.lc-prop{position:absolute;z-index:2;font-size:.86rem;line-height:1.25;color:var(--ink)}
.lc-tag{display:block;background:var(--paper);border-radius:10px;padding:7px 11px;box-shadow:0 1px 0 rgba(22,21,15,.10)}
.lc-tag + .lc-tag{margin-top:6px}
.lc-tag small{display:block;color:var(--ink-3);font-size:.78rem}

/* 1 Strategy: a tall narrow plinth. The height IS the composition. */
.lc-strategy{--tint:var(--lc-tall);--floor:var(--lc-tall-floor);grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.lc-strategy .lc-stage{aspect-ratio:3/5;--floor-at:86%}
.lc-strategy .lc-fig{height:84%;left:33%;translate:-50% 0}
.lc-strategy .lc-prop{top:36%;right:6%;width:44%}

/* 2 Planning: wide and heavy, the figure low and right, the budget lines above it */
.lc-planning{--tint:var(--lc-mustard);--floor:var(--lc-mustard-floor);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lc-planning .lc-stage{aspect-ratio:7/5;--floor-at:74%}
.lc-planning .lc-fig{height:74%;right:7%}
.lc-planning .lc-prop{top:10%;left:6%;width:46%}
.lc-line{display:grid;grid-template-columns:4.6em 1fr auto;gap:8px;align-items:center;margin-bottom:7px;font-variant-numeric:tabular-nums}
.lc-bar{height:12px;border-radius:6px;background:rgba(22,21,15,.14);overflow:hidden}
.lc-bar i{display:block;height:100%;width:70%;background:var(--ink);border-radius:6px}

/* 3 Creative: two placements, one film. The figure stands between the frames. */
.lc-creative{--tint:var(--lc-mushroom);--floor:var(--lc-mushroom-floor);grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lc-creative .lc-stage{aspect-ratio:7/5;--floor-at:80%}
.lc-creative .lc-fig{height:64%;left:52%;translate:-50% 0}
.lc-frame{position:absolute;z-index:0;border:2px solid var(--ink);border-radius:8px;background:rgba(251,246,233,.55);overflow:hidden}
.lc-frame span{position:absolute;left:6px;top:4px;font-size:.74rem}
.lc-frame i{position:absolute;background:var(--ink);border-radius:4px}
.lc-f-wide{left:5%;top:10%;width:30%;aspect-ratio:16/9}
.lc-f-wide i{right:9%;bottom:14%;width:20%;height:42%}
.lc-f-tall{right:6%;top:9%;height:60%;aspect-ratio:9/16}
.lc-f-tall i{right:-13%;bottom:14%;width:40%;height:22%}            /* the product, cut by the crop */

/* 4 Performance: two readings that disagree, the figure between them */
.lc-performance{--tint:var(--lc-slate);--floor:var(--lc-slate-floor);grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.lc-performance .lc-stage{aspect-ratio:6/5;--floor-at:82%}
.lc-performance .lc-fig{height:84%;left:50%;translate:-50% 0}
.lc-performance .lc-p-a{top:12%;left:5%;max-width:34%}
.lc-performance .lc-p-b{top:30%;right:5%;max-width:34%}

/* 5 Operations: long and low, like him. Full width. */
.lc-operations{--tint:var(--lc-doxie);--floor:var(--lc-doxie-floor);grid-template-columns:minmax(0,1fr)}
.lc-operations .lc-stage{aspect-ratio:16/5;--floor-at:70%;min-height:230px}
.lc-operations .lc-fig{height:66%;left:6%}
.lc-operations .lc-prop{left:57%;right:5%;bottom:calc(100% - var(--floor-at) + 3%);display:flex;gap:10px;align-items:flex-end;justify-content:space-between}
.lc-operations .lc-tag + .lc-tag{margin-top:0}
.lc-operations .lc-copy{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(16px,3vw,48px);align-items:start}

/* ---------- where they meet: one floor, provisional relative heights ---------- */
.lc-meet{background:var(--paper-2)}
.lc-floor{display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u)*7);margin:clamp(28px,5vw,56px) 0 0;
  padding:0 0 calc(var(--u)*6);border-bottom:2px solid var(--ink);--u:clamp(1.5px,.205vw,2.45px)}
.lc-floor figure{margin:0;position:relative;height:calc(var(--u)*var(--h));flex:none}
.lc-floor img{height:100%;width:auto;max-width:none;display:block}
.lc-floor figure::before{content:"";position:absolute;left:4%;right:4%;bottom:-4%;height:9%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(22,21,15,.28),transparent)}
.lc-floor figure{isolation:isolate}
.lc-meet-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);margin-top:28px;align-items:start}
.lc-steps{margin:0;padding:0;list-style:none;counter-reset:s}
.lc-steps li{counter-increment:s;display:grid;grid-template-columns:2em 1fr;padding:12px 0;border-top:1px solid var(--line)}
.lc-steps li::before{content:counter(s);font-family:var(--lc-serif);font-size:1.5rem;line-height:1}
.lc-temp{font-size:.82rem;color:var(--ink-3);margin-top:14px}

/* ---------- motion: one beat each, its own timing ---------- */
@media (prefers-reduced-motion:no-preference){
  .lc-play .lc-fig img,.lc-piece:hover .lc-fig img,.lc-piece:focus-within .lc-fig img{animation-duration:var(--dur);animation-timing-function:var(--ease);animation-fill-mode:both;animation-name:var(--beat)}
  .lc-strategy{--beat:lc-lean;--dur:2.6s;--ease:cubic-bezier(.3,.0,.2,1)}          /* slow lean, stillness, straightens */
  .lc-planning{--beat:lc-weight;--dur:1.7s;--ease:cubic-bezier(.5,0,.3,1)}          /* heavy shift, settles late */
  .lc-creative{--beat:lc-tip;--dur:1.5s;--ease:cubic-bezier(.34,1.3,.5,1)}          /* a quick interested tip */
  .lc-performance{--beat:lc-second-look;--dur:2.4s;--ease:cubic-bezier(.4,0,.3,1)}  /* looks, waits, looks again */
  .lc-operations{--beat:lc-nose;--dur:1.3s;--ease:cubic-bezier(.2,.7,.2,1)}         /* nose first, short and sure */
  .lc-hero-stage .lc-fig img{animation:lc-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes lc-arrive{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lc-lean{0%,100%{transform:none}38%,62%{transform:rotate(4.5deg)}82%{transform:rotate(-.8deg) scaleY(1.012)}}
@keyframes lc-weight{0%,100%{transform:none}35%{transform:translateX(-5px) rotate(-1.6deg) scaleY(.985)}70%{transform:translateX(3px) rotate(.8deg)}}
@keyframes lc-tip{0%,100%{transform:none}40%{transform:rotate(-5deg)}70%{transform:rotate(1.5deg)}}
@keyframes lc-second-look{0%,100%{transform:none}18%{transform:rotate(-3deg)}34%,52%{transform:none}70%{transform:rotate(-5deg) scaleY(.99)}88%{transform:scaleY(.985)}}
@keyframes lc-nose{0%,100%{transform:none}45%{transform:translateX(12px) rotate(1.4deg)}}

/* ---------- small screens ---------- */
@media (max-width:860px){
  /* every child of the stage is absolutely positioned, so the box has no intrinsic width: give it one */
  .v2 .v2-hero-art.lc-hero-art{width:min(82vw,360px);max-width:none;margin:34px auto 0}
  .lc-hero-note{font-size:.88rem;max-width:72%}
  .lc-piece,.lc-operations .lc-copy,.lc-meet-grid{grid-template-columns:minmax(0,1fr)}
  .lc-piece .lc-stage{order:-1}
  .lc-more-grid{grid-template-columns:minmax(0,1fr)}
  .lc-spine{gap:6px}.lc-spine a{padding:8px 6px;text-align:center}.lc-spine span{font-size:.68rem}
  .lc-strategy .lc-stage{aspect-ratio:4/5}
  .lc-strategy .lc-fig{height:84%;left:30%}
  .lc-strategy .lc-prop{width:48%}
  .lc-planning .lc-stage,.lc-creative .lc-stage,.lc-performance .lc-stage{aspect-ratio:5/4}
  .lc-operations .lc-stage{aspect-ratio:5/3;min-height:0}   /* min-height plus aspect-ratio forced it wider than the screen */
  .lc-operations .lc-fig{height:44%;left:3%}
  .lc-operations .lc-prop{left:auto;width:36%}
  .lc-planning .lc-fig{height:66%;right:2%}
  .lc-planning .lc-prop{width:40%;left:5%}
  .lc-line{grid-template-columns:3.4em 1fr auto;gap:6px}
  .lc-operations .lc-prop{top:8%;bottom:auto;right:5%;flex-direction:column;align-items:stretch;gap:6px}
  .lc-prop{font-size:.78rem}
  .lc-floor{flex-wrap:wrap;row-gap:calc(var(--u)*16);--u:clamp(1.15px,.36vw,1.7px);border-bottom:0}
}

/* ============================================================ September 2026 revamp
   lm-  the compact family on the homepage: one floor, five portraits, one question each.
   hx-  a product frame beside its copy. One frame a section, never a carousel.
   xp-  the specialists on /experience: portraits you select on a wide screen, cards that open
        on a narrow one. One markup, disclosure semantics, all panels open without script. */
.lm{padding:clamp(56px,7vw,80px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lm h2,.hx h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);line-height:1.08;letter-spacing:-.015em;margin:8px 0 12px;text-wrap:balance}
.lm .lede{max-width:40em}
.lm-row{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lm-card{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:0 0 16px;border-radius:20px;background:var(--paper-2);overflow:hidden}
.lm-face{display:block;aspect-ratio:1/1;background:linear-gradient(to bottom,var(--tint) 0 80%,var(--floor) 80% 100%);position:relative;overflow:hidden}
.lm-face img{position:absolute;left:50%;bottom:8%;height:78%;width:auto;max-width:none;translate:-50% 0}
.lm-operations .lm-face img{height:44%;bottom:12%}
.lm-strategy .lm-face img,.lm-performance .lm-face img{height:88%}
.lm-strategy{--tint:var(--lc-tall);--floor:var(--lc-tall-floor)}.lm-planning{--tint:var(--lc-mustard);--floor:var(--lc-mustard-floor)}
.lm-creative{--tint:var(--lc-mushroom);--floor:var(--lc-mushroom-floor)}.lm-performance{--tint:var(--lc-slate);--floor:var(--lc-slate-floor)}
.lm-operations{--tint:var(--lc-doxie);--floor:var(--lc-doxie-floor)}
.lm-name{padding:0 14px;font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lm-name small{font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lm-q{padding:0 14px;font-family:var(--lc-serif);font-size:1.22rem;line-height:1.14;text-wrap:balance}
.lm-more{margin:22px 0 0}
.hx{padding:var(--v2-gap,88px) 0}
.hx-keep{background:var(--paper-2)}
.hx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.hx-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.hx-flip .hx-copy{order:2}
.hx-line{font-family:var(--lc-serif);font-size:clamp(1.35rem,1rem + 1.2vw,1.8rem);line-height:1.12;margin:20px 0 18px}
.hx-sub{color:var(--ink-2);max-width:36em;margin:0}
.hx-rule{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.hx-rule p{margin:0;font-weight:600;line-height:1.35}.hx-rule cite{display:block;margin-top:8px;font-size:.8rem;font-style:normal;color:var(--ink-3)}
.hx-frame .pv-frame{font-size:.88rem}
.hx .pv-foot{margin-top:18px}
.v2-edition .he-h{font-family:inherit;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 8px;color:var(--paper)}
#he-price{font-weight:600;color:var(--paper)}
/* Three real titles from the edition, so the strip names situations rather than describing them. */
.he-cases{list-style:none;margin:12px 0 14px;padding:0;display:grid;gap:8px}
.he-cases li{position:relative;padding-left:18px;font-family:var(--lc-serif);font-size:1.08rem;line-height:1.2;color:var(--paper)}
.he-cases li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--dark-amber)}
@media(max-width:899px){
  .hx-grid,.hx-flip{grid-template-columns:minmax(0,1fr)}.hx-flip .hx-copy{order:0}
  .lm-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lm-row .lm-card:last-child{grid-column:1/-1;grid-template-columns:42% 1fr;grid-template-rows:auto 1fr;padding:0}
  .lm-row .lm-card:last-child .lm-face{grid-row:1/3;aspect-ratio:auto;min-height:120px}
  .lm-row .lm-card:last-child .lm-name{padding-top:16px}.lm-row .lm-card:last-child .lm-q{padding-bottom:16px}
  .lm-q{font-size:1.08rem}
}

.xp-intro{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(20px,3vw,36px)}
.xp-intro h1{font-family:var(--lc-serif);font-weight:400;font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);line-height:1.02;letter-spacing:-.02em;margin:10px 0 16px;max-width:16em;text-wrap:balance}
.xp-intro .lede{max-width:38em}
.xp{padding:var(--v2-gap,88px) 0;background:var(--paper-2);margin-top:var(--v2-gap,88px)}
.xp h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);line-height:1.08;letter-spacing:-.015em;margin:8px 0 18px;text-wrap:balance}
.xp-host{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;max-width:46em}
.xp-host img{border-radius:50%;width:72px;height:72px}.xp-host p{margin:0;color:var(--ink-2)}.xp-host b{color:var(--ink)}
.xp-set{margin-top:clamp(24px,4vw,40px);display:grid;gap:12px}
.xp-card{border-radius:20px;background:var(--paper);overflow:hidden}
.xp-h{margin:0;font:inherit}
.xp-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:14px;width:100%;min-height:96px;cursor:pointer;padding-right:18px}
.xp-btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:20px}
.xp-face{display:block;align-self:stretch;min-height:96px;position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--tint) 0 80%,var(--floor) 80% 100%)}
.xp-face img{position:absolute;left:50%;bottom:8%;height:80%;width:auto;max-width:none;translate:-50% 0;transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-origin:50% 100%}
.xp-operations .xp-face img{height:42%;bottom:13%}.xp-strategy .xp-face img,.xp-performance .xp-face img{height:90%}
.xp-name{font-weight:600;display:flex;flex-direction:column;gap:2px}
.xp-name small{font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.js .xp-btn::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);rotate:45deg;transition:rotate .2s;margin-right:4px}
.js .xp-btn[aria-expanded=true]::after{rotate:-135deg}
.xp-panel{padding:4px 18px 20px}
.xp-panel[hidden]{display:none}
.xp-q{font-family:var(--lc-serif);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1.08;margin:8px 0 12px;text-wrap:balance}
.xp-sit,.xp-does{margin:0 0 8px;color:var(--ink-2);max-width:40em}.xp-sit b{color:var(--ink)}
.xp-strategy{--tint:var(--lc-tall);--floor:var(--lc-tall-floor)}.xp-planning{--tint:var(--lc-mustard);--floor:var(--lc-mustard-floor)}
.xp-creative{--tint:var(--lc-mushroom);--floor:var(--lc-mushroom-floor)}.xp-performance{--tint:var(--lc-slate);--floor:var(--lc-slate-floor)}
.xp-operations{--tint:var(--lc-doxie);--floor:var(--lc-doxie-floor)}
@media(min-width:900px){
  /* Wide: five portraits in a row, one panel beneath. The article dissolves so its button and
     its panel can sit in different rows of the same grid. */
  .js .xp-set{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .js .xp-card{display:contents}
  .js .xp-h{grid-row:1}
  .js .xp-btn{grid-template-columns:1fr;grid-template-rows:auto auto;gap:0;padding:0 0 14px;background:var(--paper);border-radius:20px;overflow:hidden;min-height:0}
  .js .xp-btn::after{display:none}
  /* The unselected portraits recede, their words do not. Dimming the whole button took the stage
     labels to 2.96:1, the faded-text failure this site has shipped before. */
  .js .xp-btn .xp-face{opacity:.72;transition:opacity .2s}
  .js .xp-btn:hover .xp-face,.js .xp-btn[aria-expanded=true] .xp-face{opacity:1}
  .js .xp-btn[aria-expanded=true]{box-shadow:inset 0 -4px 0 var(--ink)}
  .js .xp-face{aspect-ratio:1/1;min-height:0}
  .js .xp-name{padding:12px 14px 0;flex-direction:row;justify-content:space-between;align-items:baseline}
  .js .xp-panel{grid-row:2;grid-column:1/-1;background:var(--paper);border-radius:20px;padding:26px 30px 28px}
  .js .xp-btn:hover .xp-face img,.js .xp-btn[aria-expanded=true] .xp-face img{transform:scale(1.04)}
}
/* Before louli.js runs, the state it will set: first specialist open, the rest closed. Without
   this, the wide layout put all five open panels in one grid cell until the script arrived. No
   script at all means no `.js`, and every panel stays open and readable. */
.js .xp-set:not([data-ready]) .xp-card + .xp-card .xp-panel{display:none}
@media(prefers-reduced-motion:reduce){.xp-face img,.xp-btn,.xp-btn::after{transition:none!important}.js .xp-btn .xp-face img{transform:none!important}}