body {
  background-color: var(--piltovienne_grey_06);
  color: var(--piltovienne_gold_01);
  font-family: var(--body_font_family);
  line-height: 1.3;
  text-align: justify;
  -webkit-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

:root
{
  /* --- References --- */
  /* https://artdecostyle.ca/art-deco-style-blog/art-deco-colours */
  /* https://resene.co.nz/homeown/use_colr/art-deco/art-deco-palettes.htm */
  /* https://web.archive.org/web/20231212200644/https://brand.riotgames.com/en-us/league-of-legends/color/ */
  /* https://scadconnector.com/2021/11/14/the-costume-design-of-marvels-eternals/ */

  /* --- Official League of Legends, Piltover, Arcane Colour, and Eternals Palette --- */
  /** The blue colour is used in the hextechnology/magitechnology to drive the player’s eye towards a primary focal point or time-sensitive interaction. **/
  --piltovienne_blue_01: hsl(180, 082%, 089%); /* #CDFAFA */
  --piltovienne_blue_02: hsl(175, 090%, 041%); /* #0AC8B9 */
  --piltovienne_blue_03: hsl(187, 097%, 034%); /* #0397AB */
  --piltovienne_blue_04: hsl(198, 100%, 025%); /* #005A82 */
  --piltovienne_blue_05: hsl(192, 071%, 014%); /* #0A323C */
  --piltovienne_blue_06: hsl(219, 063%, 010%); /* #091428 */
  --piltovienne_blue_07: hsl(220, 060%, 010%); /* #0A1428 */

  /** The grey colour is used primarily for the text, background, and inactive states only. **/
  --piltovienne_grey_01: hsl(045, 010%, 059%); /* #A09B8C */
  --piltovienne_grey_02: hsl(048, 003%, 035%); /* #5B5A56 */
  --piltovienne_grey_03: hsl(240, 004%, 025%); /* #3C3C41 */
  --piltovienne_grey_04: hsl(210, 014%, 014%); /* #1E2328 */
  --piltovienne_grey_05: hsl(200, 020%, 015%); /* #1E282D */ /* GREY COOL */
  --piltovienne_grey_06: hsl(210, 090%, 004%); /* #010A13 */ /* HEXTECH BLACK */

  /** The gold colour conveys functionality utility and is used in the hextechnology/magitechnology metal to contain and frame the key information. **/
  --piltovienne_gold_01: hsl(040, 050%, 088%); /* #F0E6D2 */
  --piltovienne_gold_02: hsl(040, 045%, 061%); /* #C8AA6E */
  --piltovienne_gold_03: hsl(040, 045%, 055%); /* #C8AA6E */
  --piltovienne_gold_04: hsl(040, 056%, 051%); /* #C89B3C */
  --piltovienne_gold_05: hsl(040, 050%, 031%); /* #785A28 */
  --piltovienne_gold_06: hsl(040, 056%, 018%); /* #463714 */
  --piltovienne_gold_07: hsl(040, 025%, 016%); /* #32281E */

  /* --- 1. Base Colours --- */
  /* Official */
  --base-gold: hsl(38, 50%, 31%);           /* #785A28 Piltovan gold yellow */

  /* Unofficial */
  --base-red: hsl(2, 46%, 32%);             /* #782E2C Lusty red                          */
  --base-terra: hsl(13, 54%, 58%);          /* #CE7259 Terracotta orange                  */
  --base-apricot: hsl(16, 70%, 78%);        /* #EEB39E Moist aprioct rose                 */
  --base-tangerine: hsl(16, 60%, 50%);      /* #CD5D34 Tangerine orange                   */
  --base-cedar: hsl(18, 36%, 49%);          /* #A96A50 Cedar plank salmon orange          */
  --base-ochre: hsl(39, 67%, 60%);          /* #DDAD56 Ochre gold yellow                  */
  --base-mustard: hsl(43, 48%, 57%);        /* #C6A95E Mustard beige yellow               */
  --base-tan: hsl(41, 41%, 73%);            /* #D6C49D Light tan brown                    */
  --base-jalapeno: hsl(56, 42%, 40%);       /* #928C3C Jalapeño yellow                    */
  --base-bushwalk: hsl(143, 39%, 23%);      /* #245336 Bold bushwalk green                */
  --base-deep-green: hsl(158, 21%, 32%);    /* #406356 Soft deep green                    */
  --base-industrial: hsl(18, 13%, 59%);     /* #A4928A Industrious greyish beige orange   */
  --base-shipwreck: hsl(42, 12%, 51%);      /* #928874 Shipwreck greyish yellow           */
  --base-cream-green: hsl(42, 27%, 63%);    /* #BAAB87 Greyish cream green                */
  --base-silver-yellow: hsl(47, 31%, 47%);  /* #9F8F53 Metallic silver yellow             */
  --base-gold-yellow: hsl(38, 34%, 43%);    /* #927748 Metallic gold yellow               */
  --base-statuary: hsl(10, 9%, 32%);        /* #5A4D4A Metallic statuary bronze           */
  --base-copper: hsl(14, 23%, 45%);         /* #8C6659 Metallic antique copper            */
  --base-denim: hsl(220, 15%, 34%);         /* #4A5464 Denim blue                         */
  --base-petrol: hsl(197, 9%, 35%);         /* #505E61 Petrol blue                        */
  --base-royal: hsl(206, 26%, 34%);         /* #40596B Royal blue                         */
  --base-fjord: hsl(180, 11%, 32%);         /* #495B5B Fjord forest green                 */
  --base-basilica: hsl(73, 19%, 37%);       /* #6A714C Basilica forest green              */
  --base-doll: hsl(19, 50%, 86%);           /* #F0D6C9 Doll muted orange                  */
  --base-siesta: hsl(17, 43%, 71%);         /* #D6A692 Siesta muted orange                */

  /* --- 2. Algorithmic Ramps (Universal Formula) --- */
  /* Formula: 81% W, 48% W, 48% W, 33% W, BASE, 42% B, 58% B */

  /* Piltovan Gold Colour Ramp */
  --gold-1: color-mix(in srgb, var(--base-gold), white 81%);
  --gold-2: color-mix(in srgb, var(--base-gold), white 48%);
  --gold-3: var(--gold-2);
  --gold-4: color-mix(in srgb, var(--base-gold), white 33%);
  --gold-5: var(--base-gold);
  --gold-6: color-mix(in srgb, var(--base-gold), black 42%);
  --gold-7: color-mix(in srgb, var(--base-gold), black 58%);

  /* Lusty Red Colour Ramp */
  --red-1: color-mix(in srgb, var(--base-red), white 81%);
  --red-2: color-mix(in srgb, var(--base-red), white 48%);
  --red-3: var(--red-2);
  --red-4: color-mix(in srgb, var(--base-red), white 33%);
  --red-5: var(--base-red);
  --red-6: color-mix(in srgb, var(--base-red), black 42%);
  --red-7: color-mix(in srgb, var(--base-red), black 58%);

  /* Terracotta Orange Colour Ramp */
  --terra-1: color-mix(in srgb, var(--base-terra), white 81%);
  --terra-2: color-mix(in srgb, var(--base-terra), white 48%);
  --terra-3: var(--terra-2);
  --terra-4: color-mix(in srgb, var(--base-terra), white 33%);
  --terra-5: var(--base-terra);
  --terra-6: color-mix(in srgb, var(--base-terra), black 42%);
  --terra-7: color-mix(in srgb, var(--base-terra), black 58%);

  /* Moist Apricot Rose Colour Ramp */
  --apricot-1: color-mix(in srgb, var(--base-apricot), white 81%);
  --apricot-2: color-mix(in srgb, var(--base-apricot), white 48%);
  --apricot-3: var(--apricot-2);
  --apricot-4: color-mix(in srgb, var(--base-apricot), white 33%);
  --apricot-5: var(--base-apricot);
  --apricot-6: color-mix(in srgb, var(--base-apricot), black 42%);
  --apricot-7: color-mix(in srgb, var(--base-apricot), black 58%);

  /* Tangerine Orange Colour Ramp */
  --tangerine-1: color-mix(in srgb, var(--base-tangerine), white 81%);
  --tangerine-2: color-mix(in srgb, var(--base-tangerine), white 48%);
  --tangerine-3: var(--tangerine-2);
  --tangerine-4: color-mix(in srgb, var(--base-tangerine), white 33%);
  --tangerine-5: var(--base-tangerine);
  --tangerine-6: color-mix(in srgb, var(--base-tangerine), black 42%);
  --tangerine-7: color-mix(in srgb, var(--base-tangerine), black 58%);

  /* Cedar Plank Salmon Colour Ramp */
  --cedar-1: color-mix(in srgb, var(--base-cedar), white 81%);
  --cedar-2: color-mix(in srgb, var(--base-cedar), white 48%);
  --cedar-3: var(--cedar-2);
  --cedar-4: color-mix(in srgb, var(--base-cedar), white 33%);
  --cedar-5: var(--base-cedar);
  --cedar-6: color-mix(in srgb, var(--base-cedar), black 42%);
  --cedar-7: color-mix(in srgb, var(--base-cedar), black 58%);

  /* Ochre Gold Yellow Ramp */
  --ochre-1: color-mix(in srgb, var(--base-ochre), white 81%);
  --ochre-2: color-mix(in srgb, var(--base-ochre), white 48%);
  --ochre-3: var(--ochre-2);
  --ochre-4: color-mix(in srgb, var(--base-ochre), white 33%);
  --ochre-5: var(--base-ochre);
  --ochre-6: color-mix(in srgb, var(--base-ochre), black 42%);
  --ochre-7: color-mix(in srgb, var(--base-ochre), black 58%);

  /* Mustard Beige Yellow Ramp */
  --mustard-1: color-mix(in srgb, var(--base-mustard), white 81%);
  --mustard-2: color-mix(in srgb, var(--base-mustard), white 48%);
  --mustard-3: var(--mustard-2);
  --mustard-4: color-mix(in srgb, var(--base-mustard), white 33%);
  --mustard-5: var(--base-mustard);
  --mustard-6: color-mix(in srgb, var(--base-mustard), black 42%);
  --mustard-7: color-mix(in srgb, var(--base-mustard), black 58%);

  /* Light Tan Brown Colour Ramp */
  --tan-1: color-mix(in srgb, var(--base-tan), white 81%);
  --tan-2: color-mix(in srgb, var(--base-tan), white 48%);
  --tan-3: var(--tan-2);
  --tan-4: color-mix(in srgb, var(--base-tan), white 33%);
  --tan-5: var(--base-tan);
  --tan-6: color-mix(in srgb, var(--base-tan), black 42%);
  --tan-7: color-mix(in srgb, var(--base-tan), black 58%);

  /* Jalapeño Yellow Colour Ramp */
  --jalapeno-1: color-mix(in srgb, var(--base-jalapeno), white 81%);
  --jalapeno-2: color-mix(in srgb, var(--base-jalapeno), white 48%);
  --jalapeno-3: var(--jalapeno-2);
  --jalapeno-4: color-mix(in srgb, var(--base-jalapeno), white 33%);
  --jalapeno-5: var(--base-jalapeno);
  --jalapeno-6: color-mix(in srgb, var(--base-jalapeno), black 42%);
  --jalapeno-7: color-mix(in srgb, var(--base-jalapeno), black 58%);

  /* Bold Bushwalk Green Colour Ramp */
  --bushwalk-1: color-mix(in srgb, var(--base-bushwalk), white 81%);
  --bushwalk-2: color-mix(in srgb, var(--base-bushwalk), white 48%);
  --bushwalk-3: var(--bushwalk-2);
  --bushwalk-4: color-mix(in srgb, var(--base-bushwalk), white 33%);
  --bushwalk-5: var(--base-bushwalk);
  --bushwalk-6: color-mix(in srgb, var(--base-bushwalk), black 42%);
  --bushwalk-7: color-mix(in srgb, var(--base-bushwalk), black 58%);

  /* Soft Deep Green Colour Ramp */
  --deep-green-1: color-mix(in srgb, var(--base-deep-green), white 81%);
  --deep-green-2: color-mix(in srgb, var(--base-deep-green), white 48%);
  --deep-green-3: var(--deep-green-2);
  --deep-green-4: color-mix(in srgb, var(--base-deep-green), white 33%);
  --deep-green-5: var(--base-deep-green);
  --deep-green-6: color-mix(in srgb, var(--base-deep-green), black 42%);
  --deep-green-7: color-mix(in srgb, var(--base-deep-green), black 58%);

  /* Industrious Greyish Beige Orange Colour Ramp */
  --industrial-1: color-mix(in srgb, var(--base-industrial), white 81%);
  --industrial-2: color-mix(in srgb, var(--base-industrial), white 48%);
  --industrial-3: var(--industrial-2);
  --industrial-4: color-mix(in srgb, var(--base-industrial), white 33%);
  --industrial-5: var(--base-industrial);
  --industrial-6: color-mix(in srgb, var(--base-industrial), black 42%);
  --industrial-7: color-mix(in srgb, var(--base-industrial), black 58%);

  /* Shipwreck Greyish Yellow Colour Ramp */
  --shipwreck-1: color-mix(in srgb, var(--base-shipwreck), white 81%);
  --shipwreck-2: color-mix(in srgb, var(--base-shipwreck), white 48%);
  --shipwreck-3: var(--shipwreck-2);
  --shipwreck-4: color-mix(in srgb, var(--base-shipwreck), white 33%);
  --shipwreck-5: var(--base-shipwreck);
  --shipwreck-6: color-mix(in srgb, var(--base-shipwreck), black 42%);
  --shipwreck-7: color-mix(in srgb, var(--base-shipwreck), black 58%);

  /* Greyish Cream Green Colour Ramp */
  --cream-green-1: color-mix(in srgb, var(--base-cream-green), white 81%);
  --cream-green-2: color-mix(in srgb, var(--base-cream-green), white 48%);
  --cream-green-3: var(--cream-green-2);
  --cream-green-4: color-mix(in srgb, var(--base-cream-green), white 33%);
  --cream-green-5: var(--base-cream-green);
  --cream-green-6: color-mix(in srgb, var(--base-cream-green), black 42%);
  --cream-green-7: color-mix(in srgb, var(--base-cream-green), black 58%);

  /* Metallic Silver Yellow Colour Ramp */
  --silver-yellow-1: color-mix(in srgb, var(--base-silver-yellow), white 81%);
  --silver-yellow-2: color-mix(in srgb, var(--base-silver-yellow), white 48%);
  --silver-yellow-3: var(--silver-yellow-2);
  --silver-yellow-4: color-mix(in srgb, var(--base-silver-yellow), white 33%);
  --silver-yellow-5: var(--base-silver-yellow);
  --silver-yellow-6: color-mix(in srgb, var(--base-silver-yellow), black 42%);
  --silver-yellow-7: color-mix(in srgb, var(--base-silver-yellow), black 58%);

  /* Metallic Gold Yellow Colour Ramp */
  --gold-yellow-1: color-mix(in srgb, var(--base-gold-yellow), white 81%);
  --gold-yellow-2: color-mix(in srgb, var(--base-gold-yellow), white 48%);
  --gold-yellow-3: var(--gold-yellow-2);
  --gold-yellow-4: color-mix(in srgb, var(--base-gold-yellow), white 33%);
  --gold-yellow-5: var(--base-gold-yellow);
  --gold-yellow-6: color-mix(in srgb, var(--base-gold-yellow), black 42%);
  --gold-yellow-7: color-mix(in srgb, var(--base-gold-yellow), black 58%);
  
  /* Statuary Bronze Colour Ramp */
  --statuary-1: color-mix(in srgb, var(--base-statuary), white 81%);
  --statuary-2: color-mix(in srgb, var(--base-statuary), white 48%);
  --statuary-3: var(--statuary-2);
  --statuary-4: color-mix(in srgb, var(--base-statuary), white 33%);
  --statuary-5: var(--base-statuary);
  --statuary-6: color-mix(in srgb, var(--base-statuary), black 42%);
  --statuary-7: color-mix(in srgb, var(--base-statuary), black 58%);
  
  /* Antique Copper Colour Ramp */
  --copper-1: color-mix(in srgb, var(--base-copper), white 81%);
  --copper-2: color-mix(in srgb, var(--base-copper), white 48%);
  --copper-3: var(--copper-2);
  --copper-4: color-mix(in srgb, var(--base-copper), white 33%);
  --copper-5: var(--base-copper);
  --copper-6: color-mix(in srgb, var(--base-copper), black 42%);
  --copper-7: color-mix(in srgb, var(--base-copper), black 58%);

  /* Denim Blue Colour Ramp */
  --denim-1: color-mix(in srgb, var(--base-denim), white 81%);
  --denim-2: color-mix(in srgb, var(--base-denim), white 48%);
  --denim-3: var(--denim-2);
  --denim-4: color-mix(in srgb, var(--base-denim), white 33%);
  --denim-5: var(--base-denim);
  --denim-6: color-mix(in srgb, var(--base-denim), black 42%);
  --denim-7: color-mix(in srgb, var(--base-denim), black 58%);
  
  /* Petrol Blue Colour Ramp */
  --petrol-1: color-mix(in srgb, var(--base-petrol), white 81%);
  --petrol-2: color-mix(in srgb, var(--base-petrol), white 48%);
  --petrol-3: var(--petrol-2);
  --petrol-4: color-mix(in srgb, var(--base-petrol), white 33%);
  --petrol-5: var(--base-petrol);
  --petrol-6: color-mix(in srgb, var(--base-petrol), black 42%);
  --petrol-7: color-mix(in srgb, var(--base-petrol), black 58%);
  
  /* Royal Blue Colour Ramp */
  --royal-1: color-mix(in srgb, var(--base-royal), white 81%);
  --royal-2: color-mix(in srgb, var(--base-royal), white 48%);
  --royal-3: var(--royal-2);
  --royal-4: color-mix(in srgb, var(--base-royal), white 33%);
  --royal-5: var(--base-royal);
  --royal-6: color-mix(in srgb, var(--base-royal), black 42%);
  --royal-7: color-mix(in srgb, var(--base-royal), black 58%);

  /* Fjord Green Colour Ramp */
  --fjord-1: color-mix(in srgb, var(--base-fjord), white 81%);
  --fjord-2: color-mix(in srgb, var(--base-fjord), white 48%);
  --fjord-3: var(--fjord-2);
  --fjord-4: color-mix(in srgb, var(--base-fjord), white 33%);
  --fjord-5: var(--base-fjord);
  --fjord-6: color-mix(in srgb, var(--base-fjord), black 42%);
  --fjord-7: color-mix(in srgb, var(--base-fjord), black 58%);
  
  /* Basilica Green Colour Ramp */
  --basilica-1: color-mix(in srgb, var(--base-basilica), white 81%);
  --basilica-2: color-mix(in srgb, var(--base-basilica), white 48%);
  --basilica-3: var(--basilica-2);
  --basilica-4: color-mix(in srgb, var(--base-basilica), white 33%);
  --basilica-5: var(--base-basilica);
  --basilica-6: color-mix(in srgb, var(--base-basilica), black 42%);
  --basilica-7: color-mix(in srgb, var(--base-basilica), black 58%);

  /* «Doll» Muted Orange Colour Ramp */
  --doll-1: color-mix(in srgb, var(--base-doll), white 81%);
  --doll-2: color-mix(in srgb, var(--base-doll), white 48%);
  --doll-3: var(--doll-2);
  --doll-4: color-mix(in srgb, var(--base-doll), white 33%);
  --doll-5: var(--base-doll);
  --doll-6: color-mix(in srgb, var(--base-doll), black 42%);
  --doll-7: color-mix(in srgb, var(--base-doll), black 58%);
  
  /* «Siesta» Muted Orange Colour Ramp */
  --siesta-1: color-mix(in srgb, var(--base-siesta), white 81%);
  --siesta-2: color-mix(in srgb, var(--base-siesta), white 48%);
  --siesta-3: var(--siesta-2);
  --siesta-4: color-mix(in srgb, var(--base-siesta), white 33%);
  --siesta-5: var(--base-siesta);
  --siesta-6: color-mix(in srgb, var(--base-siesta), black 42%);
  --siesta-7: color-mix(in srgb, var(--base-siesta), black 58%);
}

.container
{
  max-width: 100%;
}

.genealogy-body
{
  display: block;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 100px;
  padding-top: 50px;
  text-align: center;
  transform: scaleY(-1);
  white-space: nowrap;
  width: 100%;
}

.genealogy-tree
{
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
}

.genealogy-header
{
  text-align: center;
}

.genealogy-tree ul
{
  padding-top: 40px;
  position: relative;
  transition: all 0.5s;
  display: flex;
  justify-content: center;
}

.genealogy-tree li
{
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 40px 10px 0 10px;
  transition: all 0.5s;
}

.genealogy-tree li::before,
.genealogy-tree li::after
{
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 40px;
  z-index: -1;
}

.genealogy-tree li::after
{
  right: auto;
  left: 50%;
}

.genealogy-tree li:only-child::after,
.genealogy-tree li:only-child::before
{
  display: none;
}

.genealogy-tree li:only-child
{
  padding-top: 0;
}

.genealogy-tree li:first-child::before,
.genealogy-tree li:last-child::after
{
  border: 0 none;
}

.genealogy-tree ul ul::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 40px;
}

.member-card
{
  transform: scaleY(-1);
  align-items: center;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  min-height: 250px;
  position: relative;
  transition: all 0.3s;
  vertical-align: top;
  white-space: normal;
  /* Flip text back up */
  width: 250px;
  z-index: 2;
}

.member-card.spouse
{
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 20px;
}

li.has-spouse-left
{
  margin-left: 340px;
}

.print-only,
.genealogy-footnotes
{
  display: none;
}

/*
=========================================
THEME: PILTOVIENNE (art déco and Piltovan styles)
========================================= 
*/

.theme-piltovienne .lisboète
{
  display: none;
}

.theme-piltovienne .logo
{
  background-color: #1a1c23;
  border-radius: 2px;
  border: 2px solid #c8aa6e;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  margin-bottom: 20px;
  margin-left: 15px;
  margin-top: 15px;
  z-index: 101;
}

.theme-piltovienne .logo .logomark
{
  height: 160px;
  margin-left: 40px;
}

.theme-piltovienne .tooltip
{
  border-bottom: 1px dotted #c8aa6e;
  color: #c8aa6e;
  cursor: help;
  display: inline-block;
  font-family: 'Beaufort for LOL', 'EB Garamond', 'Garamond', serif;
  font-weight: bold;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

.theme-piltovienne .tooltip:hover
{
  color: #f0e6d2;
  text-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
}

/* The hidden tooltip text container */
.theme-piltovienne .tooltip .tooltiptext
{
  background-color: #1a1c23;
  border-radius: 2px;
  border: 2px solid #c8aa6e;
  bottom: 125%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(10, 10, 20, 0.8);
  color: #f0f0f0;
  font-family: 'Beaufort for LOL', 'EB Garamond', 'Garamond', serif;
  font-size: 0.9rem;
  font-weight: normal;
  left: 50%;
  line-height: 1.4;
  opacity: 0;
  padding: 12px;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  visibility: hidden;
  width: 300px;
  z-index: 100;
}

/* The arrow at the bottom of the tooltip */
.theme-piltovienne .tooltip .tooltiptext::after
{
  border-color: #c8aa6e transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

.theme-piltovienne .tooltip:hover .tooltiptext
{
  opacity: 1;
  visibility: visible;
}

.theme-piltovienne .genealogy-tree li::before,
.theme-piltovienne .genealogy-tree li::after,
.theme-piltovienne .genealogy-tree ul ul::before
{
  border-top: 2px solid #5a4a3a;
}

.theme-piltovienne .genealogy-tree li::after
{
  border-left: 2px solid #5a4a3a;
}

.theme-piltovienne .genealogy-tree li:last-child::before
{
  border-right: 2px solid #5a4a3a;
  border-radius: 0;
}

.theme-piltovienne .member-card
{
  border: 2px solid #8b7d6b;
  padding: 10px;
  text-decoration: none;
  color: #dcdcdc;
  font-size: 12px;
  background-color: #222;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

.theme-piltovienne .member-card.spouse
{
  border-style: dashed;
  border-color: #555;
  opacity: 0.9;
}

.theme-piltovienne .member-card.proband
{
  border-color: #d4af37;
  background-color: #2e2a25;
  box-shadow: 0px 5px 20px rgba(212, 175, 55, 0.2);
}

.theme-piltovienne .member-card .kinship
{
  display: block;
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #d4af37;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
  margin-bottom: 6px;
  width: 100%;
}

.theme-piltovienne .member-card .name
{
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
  word-wrap: break-word;
}

.theme-piltovienne .member-card .dates
{
  display: block;
  font-style: italic;
  color: #888;
  font-size: 0.75em;
  margin-bottom: 2px;
}

/* Custom portrait frame */
.theme-piltovienne .portrait-frame
{
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  height: 100px;
  justify-content: center;
  margin: 5px auto 10px auto;
  position: relative;
  width: 100px;

  /* Default variable, will be overridden by JS */
  --frame-url: url("https://i.imgur.com/LONU2Xr.png");
}

.theme-piltovienne .portrait-frame::after
{
  background-image: var(--frame-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.theme-piltovienne .portrait-frame img
{
  border-radius: 2px;
  display: block;
  height: 76%;
  object-fit: cover;
  width: 76%;
  z-index: 1;
}

/* Interactivity */
.theme-piltovienne .member-card:hover
{
  background-color: #333;
  border-color: #fff;
  z-index: 100;
}

.theme-piltovienne .member-card:hover+ul li::after,
.theme-piltovienne .member-card:hover+ul li::before,
.theme-piltovienne .member-card:hover+ul::before,
.theme-piltovienne .member-card:hover+ul ul::before
{
  border-color: #d4af37;
}

/*
=========================================
THEME: LISBOÈTE (Liane Martins’ corporate identity style)
========================================= 
*/

body.theme-lisboète,
.theme-lisboète
{
  background-color: #003300;
  background-image: url("../images/azulejo.svg");
  background-position: top left;
  background-repeat: repeat;
  background-size: 256px;
  color: #ffffff;
  font-family: "Barlow Condensed", sans-serif;
  margin: 0px !important;
}

.theme-lisboète .tooltip
{
  background-color: #888;
  border-radius: 5px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: normal;
  margin-top: 5px;
  padding: 10px;
  text-transform: none;
}

.theme-lisboète .piltovienne
{
  display: none;
}

.theme-lisboète .logo
{
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.60);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  margin-bottom: 20px;
  margin-left: 15px;
  margin-top: 15px;
  z-index: 101;
}

.theme-lisboète .logo .logomark
{
  height: 160px;
  margin-left: 40px;
}

.theme-lisboète .container
{
  padding: 0px;
}

.theme-lisboète header
{
  align-items: center;
  background-color: #003300;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.25);
  display: flex;
  height: 80px;
  justify-content: center;
}

.theme-lisboète h1
{
  color: #ffffff;
  font-family: 'Lusitana', serif;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #003300;
}

.theme-lisboète .genealogy-wrapper
{
  width: 100%;
}

.theme-lisboète .genealogy-body
{
  background-color: #5c1e1e;
  padding-bottom: 50px;
  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
  box-shadow: 4px 10px 15px rgba(0, 0, 0, 0.25);
}

/* Connectors - Lusitanian green */
.theme-lisboète .genealogy-tree li::before,
.theme-lisboète .genealogy-tree li::after,
.theme-lisboète .genealogy-tree ul ul::before
{
  border-top: 3px solid #ffffff;
}

.theme-lisboète .genealogy-tree li::after
{
  border-left: 3px solid #ffffff;
}

.theme-lisboète .genealogy-tree li:last-child::before
{
  border-right: 3px solid #ffffff;
  border-radius: 10px 0 0 0;
  /* Softer curves */
}

.theme-lisboète .genealogy-tree li:first-child::after
{
  border-radius: 0 10px 0 0;
}

/* Card Styling - The «backdrop» effect */
.theme-lisboète .member-card
{
  aspect-ratio: auto;
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.60);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #000000;
  height: 500px;
  justify-content: flex-start;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  width: 320px;
}

/* Proband Highlight - Deep red background */
.theme-lisboète .member-card.proband
{
  background: #ffffff;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.45);
}

.theme-lisboète .member-card.spouse
{
  background: rgba(255, 255, 255, 0.6);
  border: 2px dashed #003399;
}

/* Text styles */
.theme-lisboète .member-card .kinship
{
  align-items: center;
  background-color: #003300;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  color: #ffffff;
  display: flex;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  height: 30px;
  justify-content: center;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
  width: 100%;
}

.theme-lisboète .member-card .dates,
.theme-lisboète .member-card .name,
.theme-lisboète .member-card .extra-info
{
  margin-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.theme-lisboète .member-card .extra-info
{
  margin-bottom: 0px;
}

.theme-lisboète .member-card .extra-info .citizenships,
.theme-lisboète .member-card .extra-info .ethnicities
{
  padding-bottom: 10px;
}

.theme-lisboète .member-card .name
{
  color: #5c1e1e;
  font-family: 'Lusitana', serif;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.1;
  text-transform: uppercase;
}

.theme-lisboète .member-card .dates
{
  color: inherit;
  font-weight: 700;
  opacity: 0.8;
}

.theme-lisboète .member-card .dates,
.theme-lisboète .member-card .extra-info
{
  font-size: 1.2rem;
}

/* Portrait frame - The «image» effect */
.theme-lisboète .portrait-frame
{
  aspect-ratio: auto;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #ffcc00;
  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.25);
  height: 160px;
  margin: 10px auto 15px auto;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  width: 120px;
}

.theme-lisboète .portrait-frame img
{
  border-radius: 8px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.theme-lisboète .portrait-frame::after
{
  display: none;
}

/* Interactivity */
.theme-lisboète .member-card:hover
{
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
  transform: scaleY(-1) scale(1.05);
  z-index: 100;
}

.theme-lisboète .member-card.proband:hover
{
  background: #7a2828;
  color: #ffffff;
}

.theme-lisboète .member-card.proband:hover .name
{
  color: #d4af37;
}

/* Path highlighting */
.theme-lisboète .member-card:hover+ul li::after,
.theme-lisboète .member-card:hover+ul li::before,
.theme-lisboète .member-card:hover+ul::before,
.theme-lisboète .member-card:hover+ul ul::before
{
  border-color: #ffcc00;
  border-width: 4px;
}

@media print
{
  /* @page
  {
    margin: 0;
    size: A0 landscape;
  } */

  @page
  {
    margin: 0;
    size: auto;
  }

  html,
  body
  {
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100%;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  .screen-only
  {
    display: none !important;
  }

  .print-only
  {
    display: inline-block !important;
  }

  .genealogy-wrapper
  {
    display: inline-block;
    max-width: none;
    width: auto;
  }

  .genealogy-tree
  {
    zoom: 80%;
    display: inline-block;
    margin-bottom: 3cm;
  }

  .portrait-frame
  {
    background-color: #eeeeee;
    border: 2px solid #000000;
    height: 5cm;
    margin: 0 auto;
    margin-bottom: 10px;
    max-height: 5cm;
    max-width: 4cm;
    min-height: 5cm;
    min-width: 4cm;
    overflow: hidden;
    width: 4cm;
  }

  .portrait-frame img
  {
    height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
  }

  .theme-piltovienne .logo
  {
    position: absolute;
  }

  .theme-piltovienne .logo .logomark,
  .theme-piltovienne .logo .lettermark
  {
    height: 80px;
  }

  .theme-piltovienne .genealogy-body
  {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
  }

  .theme-piltovienne .portrait-frame
  {
    background: transparent;
    border: none;
    height: 100px;
    margin: 5px auto 10px auto;

    max-height: unset;
    max-width: unset;
    min-height: unset;
    min-width: unset;
    overflow: unset;

    width: 100px;
  }

  .theme-piltovienne .portrait-frame img
  {
    height: 76%;
    width: 76%;

    object-fit: cover;
    object-position: unset;
  }

  .genealogy-footnotes
  {
    background: rgba(255, 255, 255, 0.60);
    clear: both;
    display: block;
    margin: 0 auto;
    margin-top: 2cm;
    padding: 1rem 1rem 1rem 1rem;
    page-break-inside: avoid;
    text-align: left;
    width: 90%;

    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;

    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);

    z-index: 105;
  }

  .genealogy-footnotes h2
  {
    font-family: "Lusitana", serif;
    font-size: 14pt;
    color: #000;
    text-transform: uppercase;
  }

  .genealogy-footnotes ol
  {
    color: #000 !important;
    column-count: 2;
    column-gap: 1cm;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10pt;
  }

  sup.citation
  {
    font-weight: bold;
    font-size: 0.9em;
    vertical-align: super;
    margin-left: 2px;
  }
}