/* Member selector — Tree of Life directions
   Each artboard: a tree-based member picker. Tap a member → it lights up.
   Phone-sized canvas (402×874) inside design canvas artboards. */

/* ═════════════════════════════════════════════════════════════
   SHARED PHONE SHELL
   ═════════════════════════════════════════════════════════════ */
.tl-stage{
  position:relative;width:402px;height:874px;overflow:hidden;
  border-radius:48px;color:#f5ead4;
  font-family:'Cormorant Garamond','Fraunces',Georgia,serif;
  box-shadow:0 0 0 1px rgba(245,234,212,0.08), 0 30px 80px rgba(0,0,0,0.6);
}
.tl-notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:20px;z-index:50;
}
.tl-statusbar{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:49;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 32px 6px;font-family:ui-monospace,Menlo,monospace;
  font-size:13px;font-weight:600;color:rgba(245,234,212,0.78);pointer-events:none;
}
.tl-statusbar.dark{color:rgba(58,36,16,0.7)}
.tl-mic-bar{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  width:140px;height:5px;background:#f5ead4;opacity:0.45;border-radius:3px;z-index:50;
}
.tl-mic-bar.dark{background:#3a2410;opacity:0.4}

/* Top chrome shared by every direction */
.tl-back{
  position:absolute;top:60px;left:14px;z-index:40;
  font-family:'Fraunces',serif;font-style:italic;font-size:11px;letter-spacing:0.28em;
  text-transform:uppercase;color:#dcc080;cursor:pointer;
  padding:8px 12px;background:transparent;border:none;
}
.tl-back.dark{color:#7a4a18}
.tl-edit{
  position:absolute;top:58px;right:14px;z-index:40;
  font-family:'Fraunces',serif;font-style:italic;font-size:10px;letter-spacing:0.28em;
  text-transform:uppercase;color:#dcc080;cursor:pointer;
  padding:8px 12px;border:1px solid rgba(220,192,128,0.35);border-radius:999px;
  background:rgba(18,12,5,0.45);backdrop-filter:blur(6px);
}
.tl-edit.dark{color:#7a4a18;background:rgba(245,225,180,0.6);border-color:rgba(140,90,40,0.4)}
.tl-edit:hover{color:#fff5d8}

.tl-eyebrow{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.4em;
  text-transform:uppercase;color:#dcc080;text-align:center;
}
.tl-eyebrow.dark{color:#8a5a22}
.tl-h{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:24px;line-height:1.15;color:#f5ead4;text-align:center;
  text-shadow:0 0 14px rgba(255,200,115,0.30);
}
.tl-h.dark{color:#3a2410;text-shadow:none}

.tl-readout{
  position:absolute;left:24px;right:24px;bottom:124px;z-index:30;
  text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:rgba(245,234,212,0.75);min-height:42px;line-height:1.4;
  pointer-events:none;
}
.tl-readout.dark{color:rgba(58,36,16,0.75)}
.tl-readout strong{font-weight:500;color:#fff5d8}
.tl-readout.dark strong{color:#3a2410}

.tl-confirm{
  position:absolute;left:20px;right:20px;bottom:42px;z-index:30;
  font-family:'Fraunces',serif;font-style:italic;font-size:13px;letter-spacing:0.28em;
  text-transform:uppercase;color:#fff5d8;text-align:center;cursor:pointer;
  padding:18px 24px;border:1px solid rgba(255,220,155,0.55);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,200,115,0.18),rgba(60,32,14,0.5));
  backdrop-filter:blur(8px);
  box-shadow:0 0 28px rgba(255,180,100,0.30),0 0 60px rgba(255,140,60,0.15);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
}
.tl-confirm.on{opacity:1;transform:translateY(0);pointer-events:auto}
.tl-confirm.dark{
  color:#5a3216;border-color:rgba(140,90,40,0.55);
  background:linear-gradient(180deg,rgba(255,210,125,0.85),rgba(220,180,110,0.85));
  text-shadow:none;box-shadow:0 4px 14px rgba(80,45,18,0.4),0 0 24px rgba(255,200,115,0.4);
}
.tl-mic-hint{
  position:absolute;left:0;right:0;bottom:96px;z-index:25;
  display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none;
  font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:0.4em;
  text-transform:uppercase;color:rgba(245,234,212,0.55);
}
.tl-mic-hint.dark{color:rgba(140,90,40,0.65)}
.tl-mic-dot{width:5px;height:5px;border-radius:50%;background:#dcc080;animation:tl-pulse 2s ease-in-out infinite}
@keyframes tl-pulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

/* shared label tooltip used by branch labels */
.tl-label{
  position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  font-family:'Fraunces',serif;font-style:italic;font-size:14px;
  color:#fff5d8;white-space:nowrap;
  padding:6px 12px;border-radius:999px;
  background:rgba(18,12,5,0.7);border:1px solid rgba(220,192,128,0.5);
  backdrop-filter:blur(6px);
  text-shadow:0 0 8px rgba(255,200,115,0.5);
  opacity:0;transition:opacity .35s ease,transform .35s ease;z-index:35;
}
.tl-label.on{opacity:1;transform:translate(-50%,-110%)}
.tl-label .tl-label-rel{
  font-style:normal;font-family:'Cinzel',serif;
  font-size:8px;letter-spacing:0.28em;text-transform:uppercase;
  color:#dcc080;display:block;margin-top:2px;
}

/* ═════════════════════════════════════════════════════════════
   A — TREE OF LIGHT (the real landing-page hero image)
   The tree IS hero-tree-cutout.png; members are HTML buttons
   absolutely positioned over the canopy as glowing fruit
   ═════════════════════════════════════════════════════════════ */
.tlA{background:radial-gradient(ellipse 100% 100% at 50% 55%,#0d0a06 0%,#050308 100%)}
.tlA-stars{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(1px 1px at 8% 18%,rgba(245,234,212,0.55),transparent 60%),
    radial-gradient(1px 1px at 28% 68%,rgba(220,232,255,0.45),transparent 60%),
    radial-gradient(1px 1px at 78% 22%,rgba(245,234,212,0.5),transparent 60%),
    radial-gradient(1px 1px at 90% 80%,rgba(245,234,212,0.4),transparent 60%),
    radial-gradient(1px 1px at 14% 88%,rgba(220,232,255,0.45),transparent 60%);
}

/* Tree image wrap — sized 1:1 (square) to match the hero png */
.tlA-tree-wrap{
  position:absolute;left:50%;top:118px;transform:translateX(-50%);
  width:380px;height:380px;z-index:5;
}
.tlA-tree-img{
  width:100%;height:100%;display:block;
  /* The cutout sits on solid black — same as our background, so it visually merges.
     A subtle blend cleans the seam regardless. */
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 40px rgba(255,170,80,0.20));
}
/* Dim layer that rides over the tree when a member is selected — pulls
   focus to whoever is lit. */
.tlA-tree-dim{
  position:absolute;inset:0;background:rgba(5,3,2,0);
  pointer-events:none;transition:background .55s ease;
}
.tlA-tree-dim.on{background:rgba(5,3,2,0.55)}

/* Fruit overlay — positioned in the same wrap as the image so the same
   percent coordinates always land on the same canopy hotspot. */
.tlA-fruits{position:absolute;inset:0;z-index:6}

.tlA-fruit{
  position:absolute;
  transform:translate(-50%,-50%);
  width:28px;height:28px;
  background:transparent;border:none;padding:0;cursor:pointer;
  /* hit target stays 28px even when the orb is small */
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease,transform .45s ease;
  outline:none;
}
.tlA-fruit.dim{opacity:0.18}
.tlA-fruit-halo{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,140,0.0) 0%,rgba(255,220,140,0) 70%);
  transition:width .35s ease,height .35s ease,background .35s ease;
  pointer-events:none;
}
.tlA-fruit-orb{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:#fff5d8;
  box-shadow:
    0 0 4px rgba(255,220,155,0.9),
    0 0 10px rgba(255,200,115,0.6);
  transition:width .35s ease,height .35s ease,background .35s ease,box-shadow .35s ease;
}
.tlA-fruit:hover .tlA-fruit-orb{
  width:9px;height:9px;
  box-shadow:0 0 6px rgba(255,220,155,1),0 0 14px rgba(255,200,115,0.8);
}
.tlA-fruit.selected .tlA-fruit-halo{
  width:48px;height:48px;
  background:radial-gradient(circle,rgba(255,220,140,0.35) 0%,rgba(255,180,100,0.15) 40%,transparent 75%);
  animation:tlA-halo-pulse 2.4s ease-in-out infinite;
}
.tlA-fruit.selected .tlA-fruit-orb{
  width:11px;height:11px;background:#ffffff;
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,220,155,0.9),
    0 0 36px rgba(255,180,100,0.6),
    0 0 60px rgba(255,140,60,0.4);
}
@keyframes tlA-halo-pulse{
  0%,100%{transform:scale(1);opacity:0.85}
  50%{transform:scale(1.12);opacity:1}
}

/* Self orb — moonlit blue at trunk heart instead of amber */
.tlA-fruit.is-self .tlA-fruit-orb{
  background:#cfe0ff;
  box-shadow:0 0 6px rgba(220,232,255,0.95),0 0 14px rgba(180,210,255,0.6);
}
.tlA-fruit.is-self.selected .tlA-fruit-orb{
  background:#ffffff;
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 22px rgba(220,232,255,0.95),
    0 0 44px rgba(160,200,255,0.6);
}
.tlA-fruit.is-self.selected .tlA-fruit-halo{
  background:radial-gradient(circle,rgba(220,232,255,0.4) 0%,rgba(160,200,255,0.18) 40%,transparent 75%);
}

.tlA-fruit-name{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:'Fraunces',serif;font-style:italic;font-size:13px;
  color:#fff5d8;white-space:nowrap;letter-spacing:0.01em;
  text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(255,200,115,0.5);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.tlA-fruit.selected .tlA-fruit-name{opacity:1}

.tlA-svg{position:absolute;inset:96px 0 0 0;width:100%;height:calc(100% - 96px);z-index:4}
.tlA-particle{fill:#dcc080;opacity:0.4;animation:tlA-particle-drift 8s linear infinite}
@keyframes tlA-particle-drift{
  0%{transform:translateY(20px);opacity:0}
  20%{opacity:0.6}
  80%{opacity:0.4}
  100%{transform:translateY(-40px);opacity:0}
}

/* ═════════════════════════════════════════════════════════════
   B — ILLUMINATED MANUSCRIPT
   Parchment page, inked tree, gold-leaf labels in marginalia
   ═════════════════════════════════════════════════════════════ */
.tlB{
  background:
    radial-gradient(ellipse 100% 100% at 50% 35%,#f3e3b8 0%,#e0c993 60%,#c8a965 100%);
}
.tlB::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 22%,rgba(120,75,30,0.10) 0%,transparent 30%),
    radial-gradient(circle at 88% 75%,rgba(160,110,55,0.10) 0%,transparent 35%),
    radial-gradient(circle at 30% 90%,rgba(80,45,18,0.10) 0%,transparent 35%);
  mix-blend-mode:multiply;
}
.tlB-frame{
  position:absolute;top:96px;left:14px;right:14px;bottom:90px;
  border:2px solid #8a5a22;
  background:
    linear-gradient(135deg,transparent 60%,rgba(140,90,40,0.06) 100%);
  z-index:6;pointer-events:none;
}
.tlB-frame::before{
  content:'';position:absolute;inset:6px;border:1px solid rgba(140,90,40,0.5);
}
.tlB-corner{
  position:absolute;width:24px;height:24px;color:#8a5a22;
  font-family:'Cinzel Decorative',serif;font-size:18px;text-align:center;
  line-height:24px;background:#e8d29a;
}
.tlB-svg{position:absolute;inset:96px 14px 90px 14px;width:calc(100% - 28px);height:auto;z-index:5}
.tlB-bark{fill:#3a2410;stroke:#1f1208;stroke-width:0.7;stroke-linejoin:round}
.tlB-vein{stroke:rgba(58,36,16,0.6);fill:none;stroke-width:0.5}
.tlB-gold-canopy{fill:rgba(220,180,90,0.5)}
.tlB-leaf{cursor:pointer}
.tlB-leaf-shape{
  fill:#5a8a4a;stroke:#3a5a2a;stroke-width:0.8;
  transition:fill .35s ease,filter .35s ease,transform .35s ease;
  transform-origin:center;transform-box:fill-box;
  filter:drop-shadow(0 1px 1px rgba(58,36,16,0.4));
}
.tlB-leaf:hover .tlB-leaf-shape{fill:#7aaa5a}
.tlB-leaf.selected .tlB-leaf-shape{
  fill:#dcc065;stroke:#8a5a22;stroke-width:1.4;
  filter:drop-shadow(0 0 6px rgba(220,180,90,0.9)) drop-shadow(0 0 14px rgba(255,200,115,0.5));
  transform:scale(1.4);
}
.tlB-leaf.is-self .tlB-leaf-shape{fill:#a06c2a}
.tlB-leaf.is-self.selected .tlB-leaf-shape{fill:#dcc065;stroke:#8a5a22}
.tlB-name{
  fill:#3a2410;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:9px;text-anchor:middle;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.tlB-leaf.selected .tlB-name,
.tlB-leaf:hover .tlB-name{opacity:1}
.tlB-illum{
  fill:#dcc065;font-family:'Cinzel Decorative',serif;font-weight:900;
  font-size:18px;text-anchor:middle;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.5));
}
.tlB-page-num{
  position:absolute;bottom:30px;left:0;right:0;text-align:center;z-index:7;
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.32em;
  color:#5a3216;
}
.tlB-readout-list{
  position:absolute;left:30px;bottom:100px;z-index:8;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;
  color:#3a2410;line-height:1.4;
}
.tlB-readout-list strong{font-weight:600;color:#5a3216}

/* ═════════════════════════════════════════════════════════════
   C — STAINED GLASS / KLIMT
   Bold gold tree with decorative spiral discs as members
   ═════════════════════════════════════════════════════════════ */
.tlC{
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%,#1a0e06 0%,#080502 100%);
}
.tlC::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 1px at 14% 22%,rgba(220,192,128,0.6),transparent),
    radial-gradient(circle 1.5px at 86% 30%,rgba(220,192,128,0.5),transparent),
    radial-gradient(circle 1px at 22% 84%,rgba(220,192,128,0.4),transparent),
    radial-gradient(circle 1px at 78% 78%,rgba(220,192,128,0.5),transparent);
}
.tlC-svg{position:absolute;inset:96px 0 90px 0;width:100%;height:calc(100% - 186px);z-index:5}
.tlC-bg-pattern{fill:url(#tlC-pattern);opacity:0.15}
.tlC-trunk{
  fill:#3a2410;stroke:#dcc065;stroke-width:1.2;
}
.tlC-spiral{
  fill:none;stroke:#dcc065;stroke-width:1.4;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(255,200,115,0.5));
}
.tlC-spiral-thick{
  fill:none;stroke:#dcc065;stroke-width:2.2;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(255,200,115,0.7));
}
.tlC-disc{cursor:pointer}
.tlC-disc-bg{
  fill:#1a0e06;stroke:#dcc065;stroke-width:1.6;
  transition:fill .35s ease,stroke-width .35s ease;
}
.tlC-disc-pattern{
  stroke:#dcc065;fill:none;stroke-width:0.8;opacity:0.85;pointer-events:none;
}
.tlC-disc-init{
  fill:#dcc065;font-family:'Cinzel Decorative',serif;font-weight:900;
  font-size:11px;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(255,200,115,0.6));
}
.tlC-disc:hover .tlC-disc-bg{fill:#3a2410}
.tlC-disc.selected .tlC-disc-bg{
  fill:#dcc065;stroke-width:2.4;
}
.tlC-disc.selected .tlC-disc-pattern{stroke:#3a2410;opacity:1}
.tlC-disc.selected .tlC-disc-init{fill:#3a2410;filter:none}
.tlC-disc.is-self .tlC-disc-bg{stroke:#cfe0ff}
.tlC-disc.is-self .tlC-disc-pattern{stroke:#cfe0ff}
.tlC-disc.is-self .tlC-disc-init{fill:#cfe0ff}
.tlC-disc.is-self.selected .tlC-disc-bg{fill:#cfe0ff;stroke:#cfe0ff}
.tlC-disc.is-self.selected .tlC-disc-init{fill:#1a0e06}

/* ═════════════════════════════════════════════════════════════
   D — BARE WINTER OAK with HANGING LANTERNS
   Stark gnarled branches at night; lanterns sway and glow
   ═════════════════════════════════════════════════════════════ */
.tlD{background:linear-gradient(180deg,#0a0a14 0%,#050306 70%,#080404 100%)}
.tlD::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%,rgba(255,140,60,0.10),transparent),
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(80,100,150,0.18),transparent),
    radial-gradient(circle 1px at 12% 18%,rgba(255,255,255,0.7),transparent),
    radial-gradient(circle 1px at 32% 8%,rgba(255,255,255,0.5),transparent),
    radial-gradient(circle 1px at 78% 14%,rgba(255,255,255,0.6),transparent),
    radial-gradient(circle 1.5px at 88% 22%,rgba(255,255,255,0.55),transparent);
}
.tlD-moon{
  position:absolute;top:120px;right:34px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff8dc,#dcdce0);
  box-shadow:0 0 18px rgba(220,232,255,0.5),0 0 40px rgba(220,232,255,0.3);
  z-index:3;
}
.tlD-svg{position:absolute;inset:96px 0 90px 0;width:100%;height:calc(100% - 186px);z-index:4}
.tlD-bark{
  fill:none;stroke:#1a1208;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(0,0,0,0.6));
}
.tlD-bark-edge{
  fill:none;stroke:rgba(80,60,30,0.6);stroke-linecap:round;
}
.tlD-rope{stroke:rgba(140,100,60,0.6);stroke-width:0.8;fill:none}
.tlD-lantern{cursor:pointer}
.tlD-lantern-cage{
  fill:rgba(58,36,16,0.85);stroke:#a08050;stroke-width:1;
}
.tlD-lantern-flame{
  fill:url(#tlD-flame);
  transition:opacity .35s ease;
  animation:tlD-flicker 1.6s ease-in-out infinite;
}
@keyframes tlD-flicker{
  0%,100%{opacity:0.7}
  30%{opacity:0.9}
  60%{opacity:0.55}
}
.tlD-lantern-glow{
  fill:rgba(255,170,90,0);transition:fill .4s ease,r .4s ease;
}
.tlD-lantern:hover .tlD-lantern-flame{opacity:1}
.tlD-lantern.selected .tlD-lantern-glow{fill:rgba(255,200,115,0.35);r:38}
.tlD-lantern.selected .tlD-lantern-cage{fill:rgba(120,75,30,0.95);stroke:#fff5d8;stroke-width:1.5}
.tlD-lantern.selected .tlD-lantern-flame{
  filter:drop-shadow(0 0 6px rgba(255,200,115,1)) drop-shadow(0 0 16px rgba(255,140,60,0.7));
}
.tlD-lantern.is-self .tlD-lantern-flame{fill:url(#tlD-flame-blue)}
.tlD-lantern-group{
  animation:tlD-sway 4.5s ease-in-out infinite;
  transform-origin:top center;transform-box:fill-box;
}
.tlD-lantern-group:nth-child(2n){animation-delay:-1.2s;animation-duration:5.2s}
.tlD-lantern-group:nth-child(3n){animation-delay:-2.4s;animation-duration:4.8s}
@keyframes tlD-sway{
  0%,100%{transform:rotate(-2deg)}
  50%{transform:rotate(2deg)}
}
.tlD-tag{
  fill:rgba(245,234,212,0.85);font-family:'Fraunces',serif;font-style:italic;
  font-size:9px;text-anchor:middle;pointer-events:none;opacity:0.7;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
  paint-order:stroke;stroke:rgba(0,0,0,0.6);stroke-width:1.5;
  fill:#f5ead4;
}
.tlD-lantern.selected .tlD-tag{fill:#fff5d8;opacity:1;font-size:10px;font-weight:500}

/* ═════════════════════════════════════════════════════════════
   E — ANCIENT OAK with PORTRAIT LOCKETS
   Thick rooted oak; lockets nest in branches like fruit
   ═════════════════════════════════════════════════════════════ */
.tlE{background:radial-gradient(ellipse 90% 70% at 50% 70%,#1f1408 0%,#0a0604 60%,#050302 100%)}
.tlE::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 30% at 50% 95%,rgba(255,140,60,0.18),transparent 70%),
    radial-gradient(circle 1.5px at 18% 14%,rgba(245,234,212,0.5),transparent),
    radial-gradient(circle 1px at 84% 22%,rgba(245,234,212,0.45),transparent),
    radial-gradient(circle 1px at 28% 86%,rgba(255,200,115,0.4),transparent);
}
.tlE-svg{position:absolute;inset:88px 0 84px 0;width:100%;height:calc(100% - 172px);z-index:4}
.tlE-trunk{fill:url(#tlE-bark);stroke:#1a0e06;stroke-width:0.8}
.tlE-bark-line{stroke:rgba(40,22,10,0.7);fill:none;stroke-width:0.6;stroke-linecap:round}
.tlE-branch{fill:url(#tlE-bark);stroke:#1a0e06;stroke-width:0.5}
.tlE-canopy-haze{fill:rgba(255,170,80,0.10)}
.tlE-leaves circle{fill:rgba(80,120,60,0.4)}
.tlE-locket{cursor:pointer}
.tlE-locket-back{
  fill:#3a2410;stroke:#dcc065;stroke-width:1.5;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  transition:fill .35s ease,stroke-width .35s ease;
}
.tlE-locket-rim{
  fill:none;stroke:#dcc065;stroke-width:0.5;
  transition:stroke .35s ease;
}
.tlE-locket-portrait{
  fill:url(#tlE-portrait-grad);
  transition:fill .35s ease;
}
.tlE-locket-init{
  fill:#fff5d8;font-family:'Fraunces',serif;font-style:italic;font-size:11px;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  paint-order:stroke;stroke:rgba(0,0,0,0.6);stroke-width:1.5;
  fill:#fff5d8;
}
.tlE-locket-chain{stroke:rgba(180,140,80,0.55);stroke-width:0.6;fill:none}
.tlE-locket:hover .tlE-locket-back{fill:#5a3216}
.tlE-locket.selected .tlE-locket-back{
  fill:#dcc065;stroke-width:2.4;
}
.tlE-locket.selected .tlE-locket-rim{stroke:#fff5d8}
.tlE-locket.selected .tlE-locket-portrait{fill:url(#tlE-portrait-bright)}
.tlE-locket.selected .tlE-locket-init{
  fill:#3a2410;
  paint-order:normal;stroke:none;
}
.tlE-locket.is-self .tlE-locket-back{stroke:#cfe0ff}
.tlE-locket.is-self.selected .tlE-locket-back{fill:#cfe0ff}
.tlE-name-card{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:130px;z-index:30;pointer-events:none;
  padding:8px 18px;border-radius:0;
  background:linear-gradient(180deg,rgba(40,22,10,0.85),rgba(20,10,4,0.92));
  border:1px solid rgba(220,192,128,0.5);
  font-family:'Fraunces',serif;font-style:italic;color:#fff5d8;
  text-align:center;
  opacity:0;transition:opacity .4s ease,transform .4s ease;
}
.tlE-name-card.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
.tlE-name-card .tlE-card-name{font-size:18px;line-height:1.1}
.tlE-name-card .tlE-card-rel{
  font-style:normal;font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.32em;
  text-transform:uppercase;color:#dcc080;margin-top:4px;
}