/*
Welcome to the Backend!
If you are here, I assume you know what a style sheet is and have opinons about utility classes and living off vibes.
Anyway, go easy on me.
I retired years ago, am lucky I still remember what a class is, and am too much of a control freak to let an AI do the work.
*/  

  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    /*----- All The Colors -----*/
    /* Sky */
    --sky-top: #0a0916;
    --sky-mid1: #110f28;
    --sky-mid2: #1c183a;
    --sky-mid3: #1a1535;
    --sky-bottom: #16122e;
    /* Stars & Moon */
    --star-white: #e8e4f0;
    --star-warm: #f0dcc0;
    --star-cool: #c8d0f0;
    --moon-glow: rgba(230, 220, 190, 0.15);
    /* Parchment */
    --parchment-fresh: #e2dbd0;
    --parchment-moonlit: #d8d0c4;
    /* Text */
    --text-primary: #e8e4f0;
    --text-muted: rgba(232, 228, 240, 0.5);
  }
  /*----- Body Fun -----*/
  html {
    scroll-behavior: smooth;
  }
  body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Cormorant Infant', serif;
    color: var(--text-primary);
    background: var(--sky-top);
  }
  /*----- Fixed Night Sky -----*/
  .night-sky-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
      radial-gradient(
        ellipse 120% 40% at 50% 100%,
        rgba(30, 25, 70, 0.4) 0%,
        transparent 70%
      ),
      radial-gradient(
        circle 300px at 85% 12%,
        var(--moon-glow) 0%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        var(--sky-top) 0%,
        var(--sky-mid1) 20%,
        var(--sky-mid2) 45%,
        var(--sky-mid3) 70%,
        var(--sky-bottom) 100%
      );
    }
    /*- Stars -*/
  .stars-distant,
  .stars-mid,
  .stars-bright,
  .stars-feature {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: transparent;
  }
  .stars-distant {
    width: 1px; height: 1px;
    box-shadow:
      47px 32px 0 0 rgba(232,228,240,0.3),
      131px 88px 0 0 rgba(232,228,240,0.25),
      203px 15px 0 0 rgba(200,208,240,0.3),
      289px 142px 0 0 rgba(232,228,240,0.2),
      367px 61px 0 0 rgba(232,228,240,0.35),
      442px 178px 0 0 rgba(200,208,240,0.25),
      521px 29px 0 0 rgba(232,228,240,0.3),
      598px 195px 0 0 rgba(232,228,240,0.2),
      677px 73px 0 0 rgba(200,208,240,0.3),
      761px 156px 0 0 rgba(232,228,240,0.25),
      838px 41px 0 0 rgba(232,228,240,0.35),
      919px 189px 0 0 rgba(200,208,240,0.2),
      1003px 67px 0 0 rgba(232,228,240,0.3),
      1082px 134px 0 0 rgba(232,228,240,0.25),
      1158px 22px 0 0 rgba(200,208,240,0.3),
      1241px 171px 0 0 rgba(232,228,240,0.2),
      1319px 53px 0 0 rgba(232,228,240,0.35),
      1398px 148px 0 0 rgba(200,208,240,0.25),
      1477px 81px 0 0 rgba(232,228,240,0.3),
      1552px 19px 0 0 rgba(232,228,240,0.2),
      1633px 162px 0 0 rgba(200,208,240,0.3),
      1711px 44px 0 0 rgba(232,228,240,0.25),
      1789px 137px 0 0 rgba(232,228,240,0.35),
      1868px 76px 0 0 rgba(200,208,240,0.2),
      73px 221px 0 0 rgba(232,228,240,0.3),
      182px 267px 0 0 rgba(232,228,240,0.25),
      294px 312px 0 0 rgba(200,208,240,0.2),
      418px 248px 0 0 rgba(232,228,240,0.3),
      539px 289px 0 0 rgba(232,228,240,0.25),
      653px 334px 0 0 rgba(200,208,240,0.35),
      771px 258px 0 0 rgba(232,228,240,0.2),
      889px 301px 0 0 rgba(232,228,240,0.3),
      1001px 273px 0 0 rgba(200,208,240,0.25),
      1118px 319px 0 0 rgba(232,228,240,0.3),
      1237px 241px 0 0 rgba(232,228,240,0.2),
      1349px 298px 0 0 rgba(200,208,240,0.35),
      1468px 264px 0 0 rgba(232,228,240,0.25),
      1581px 327px 0 0 rgba(232,228,240,0.3),
      1699px 251px 0 0 rgba(200,208,240,0.2),
      1812px 308px 0 0 rgba(232,228,240,0.3),
      1901px 233px 0 0 rgba(232,228,240,0.25),
      98px 378px 0 0 rgba(232,228,240,0.3),
      227px 421px 0 0 rgba(200,208,240,0.2),
      351px 367px 0 0 rgba(232,228,240,0.25),
      478px 445px 0 0 rgba(232,228,240,0.3),
      601px 389px 0 0 rgba(200,208,240,0.35),
      729px 432px 0 0 rgba(232,228,240,0.2),
      853px 371px 0 0 rgba(232,228,240,0.3),
      981px 448px 0 0 rgba(200,208,240,0.25),
      1107px 384px 0 0 rgba(232,228,240,0.3),
      1231px 439px 0 0 rgba(232,228,240,0.2),
      1359px 376px 0 0 rgba(200,208,240,0.3),
      1483px 451px 0 0 rgba(232,228,240,0.25),
      1612px 393px 0 0 rgba(232,228,240,0.35),
      1738px 441px 0 0 rgba(200,208,240,0.2),
      1860px 382px 0 0 rgba(232,228,240,0.3),
      55px 498px 0 0 rgba(232,228,240,0.25),
      189px 537px 0 0 rgba(200,208,240,0.3),
      312px 481px 0 0 rgba(232,228,240,0.2),
      441px 529px 0 0 rgba(232,228,240,0.35),
      567px 472px 0 0 rgba(200,208,240,0.25),
      693px 541px 0 0 rgba(232,228,240,0.3),
      821px 487px 0 0 rgba(232,228,240,0.2),
      948px 533px 0 0 rgba(200,208,240,0.3),
      1072px 479px 0 0 rgba(232,228,240,0.25),
      1198px 548px 0 0 rgba(232,228,240,0.3),
      1321px 491px 0 0 rgba(200,208,240,0.2),
      1449px 539px 0 0 rgba(232,228,240,0.35),
      1573px 476px 0 0 rgba(232,228,240,0.25),
      1701px 543px 0 0 rgba(200,208,240,0.3),
      1823px 489px 0 0 rgba(232,228,240,0.2);
  }
  .stars-mid {
    width: 1px; height: 1px;
    animation: twinkle-soft 8s ease-in-out infinite -3s;
    box-shadow:
      92px 48px 1px 0 rgba(255,252,240,0.6),
      247px 112px 1px 0 rgba(240,220,192,0.5),
      389px 27px 1px 0 rgba(200,208,240,0.55),
      534px 168px 1px 0 rgba(255,252,240,0.5),
      678px 83px 1px 0 rgba(240,220,192,0.6),
      823px 197px 1px 0 rgba(200,208,240,0.5),
      968px 52px 1px 0 rgba(255,252,240,0.55),
      1112px 143px 1px 0 rgba(240,220,192,0.5),
      1257px 91px 1px 0 rgba(200,208,240,0.6),
      1401px 176px 1px 0 rgba(255,252,240,0.5),
      1546px 38px 1px 0 rgba(240,220,192,0.55),
      1691px 161px 1px 0 rgba(200,208,240,0.5),
      1836px 73px 1px 0 rgba(255,252,240,0.6),
      158px 238px 1px 0 rgba(240,220,192,0.5),
      347px 289px 1px 0 rgba(200,208,240,0.55),
      512px 341px 1px 0 rgba(255,252,240,0.5),
      701px 267px 1px 0 rgba(240,220,192,0.6),
      867px 318px 1px 0 rgba(200,208,240,0.5),
      1048px 278px 1px 0 rgba(255,252,240,0.55),
      1213px 349px 1px 0 rgba(240,220,192,0.5),
      1389px 256px 1px 0 rgba(200,208,240,0.6),
      1567px 312px 1px 0 rgba(255,252,240,0.5),
      1738px 281px 1px 0 rgba(240,220,192,0.55),
      1891px 337px 1px 0 rgba(200,208,240,0.5),
      113px 412px 1px 0 rgba(255,252,240,0.6),
      298px 458px 1px 0 rgba(240,220,192,0.5),
      467px 401px 1px 0 rgba(200,208,240,0.55),
      641px 467px 1px 0 rgba(255,252,240,0.5),
      812px 423px 1px 0 rgba(240,220,192,0.6),
      989px 471px 1px 0 rgba(200,208,240,0.5),
      1161px 398px 1px 0 rgba(255,252,240,0.55),
      1337px 478px 1px 0 rgba(240,220,192,0.5),
      1509px 418px 1px 0 rgba(200,208,240,0.6),
      1681px 462px 1px 0 rgba(255,252,240,0.5),
      1849px 411px 1px 0 rgba(240,220,192,0.55);
  }
  .stars-bright {
    width: 2px; height: 2px;
    animation: twinkle-bright 6s ease-in-out infinite -1.5s;
    box-shadow:
      178px 62px 1px 0 rgba(255,252,240,0.9),
      423px 134px 1px 1px rgba(240,220,192,0.85),
      712px 41px 1px 0 rgba(200,208,240,0.9),
      989px 187px 1px 1px rgba(255,252,240,0.8),
      1267px 78px 1px 0 rgba(240,220,192,0.9),
      1534px 152px 1px 1px rgba(200,208,240,0.85),
      1801px 93px 1px 0 rgba(255,252,240,0.9),
      312px 278px 1px 1px rgba(240,220,192,0.8),
      623px 321px 1px 0 rgba(200,208,240,0.9),
      901px 256px 1px 1px rgba(255,252,240,0.85),
      1178px 312px 1px 0 rgba(240,220,192,0.9),
      1456px 289px 1px 1px rgba(200,208,240,0.8),
      1723px 334px 1px 0 rgba(255,252,240,0.9),
      201px 423px 1px 1px rgba(240,220,192,0.85),
      489px 467px 1px 0 rgba(200,208,240,0.9),
      778px 412px 1px 1px rgba(255,252,240,0.8),
      1067px 456px 1px 0 rgba(240,220,192,0.9),
      1345px 434px 1px 1px rgba(200,208,240,0.85),
      1623px 478px 1px 0 rgba(255,252,240,0.9),
      1889px 445px 1px 1px rgba(240,220,192,0.8);
  }
  .stars-feature {
    width: 2px; height: 2px;
    animation: twinkle-feature 10s ease-in-out infinite -5s;
    box-shadow:
      340px 58px 2px 1px rgba(255,252,240,1),
      340px 58px 6px 2px rgba(200,208,240,0.3),
      892px 123px 2px 1px rgba(240,220,192,1),
      892px 123px 6px 2px rgba(240,220,192,0.3),
      1478px 67px 2px 1px rgba(200,208,240,1),
      1478px 67px 6px 2px rgba(200,208,240,0.3),
      1134px 198px 2px 1px rgba(255,252,240,1),
      1134px 198px 6px 2px rgba(255,252,240,0.3),
      567px 287px 2px 1px rgba(240,220,192,1),
      567px 287px 6px 2px rgba(240,220,192,0.3),
      1712px 234px 2px 1px rgba(200,208,240,1),
      1712px 234px 6px 2px rgba(200,208,240,0.3);
  }
  .shooting-star {
    position: fixed;
    top: 20%;
    left: 55%;
    width: 140px;
    height: 1px;
    z-index: 1;
    background: linear-gradient(to right, transparent, rgba(255,252,240,0.85), transparent);
    opacity: 0;
    animation: shoot 14s ease-in-out infinite 6s;
    transform: rotate(144deg);
    transform-origin: left center;
  }
  /* Corvus Constellation
  Algorab - back of the arrow shaft
  Minkar - intersection point
  Kraz - left point
  Gienah - bottom point
  Alchiba - right point
  */
  .corvus {
    position: fixed;
    top: 22%;
    right: 4%;
    width: 120px;
    height: 100px;
    z-index: 2;
    pointer-events: none;
  }
  .corvus-star {
    position: absolute;
    border-radius: 50%;
    background: var(--star-cool);
    animation: twinkle-feature 10s ease-in-out infinite;
  }
  .corvus-star.alchiba {
    width: 2px; height: 2px;
    top: 10%; left: 10%;
    box-shadow: 0 0 4px 1px rgba(200,208,240,0.5);
    animation-delay: -2s;
  }
  .corvus-star.kraz {
    width: 3px; height: 3px;
    top: 82%; left: 12%;
    box-shadow: 0 0 5px 2px rgba(200,208,240,0.55);
    animation-delay: -5s;
  }
  .corvus-star.gienah {
    width: 3px; height: 3px;
    top: 72%; left: 78%;
    box-shadow: 0 0 6px 2px rgba(200,208,240,0.6);
    animation-delay: -1s;
  }
  .corvus-star.algorab {
    width: 2px; height: 2px;
    top: 18%; left: 83%;
    box-shadow: 0 0 4px 1px rgba(200,208,240,0.5);
    animation-delay: -7s;
  }
  .corvus-star.minkar {
    width: 2px; height: 2px;
    top: 46%; left: 46%;
    box-shadow: 0 0 3px 1px rgba(200,208,240,0.4);
    animation-delay: -3.5s;
  }
  /*- Gienah Sparkle cause we extra -*/
  .corvus-star.gienah {
    width: 5px; height: 5px;
    top: 72%; left: 90%;
    background: rgba(220, 228, 255, 0.95);
    box-shadow: 0 0 6px 2px rgba(200,208,240,0.6);
    animation-delay: -1s;
  }
  .gienah-sparkle {
    position: absolute;
    top: 72%; left: 90%;
    width: 5px; height: 5px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  /* The four rays */
  .gienah-sparkle::before,
  .gienah-sparkle::after {
    content: '';
    position: absolute;
    background: linear-gradient(to right, transparent, rgba(200,208,240,0.7), transparent);
    border-radius: 50%;
    top: 50%; left: 60%;
    transform: translate(-50%, -50%);
    animation: gienah-pulse 10s ease-in-out infinite -1s;
  }
  /* horizontal ray */
  .gienah-sparkle::before {
    width: 25px; height: 1px;
  }
  /* vertical ray */
  .gienah-sparkle::after {
    width: 1px; height: 30px;
  }
  /* diagonal rays via a nested span */
  .gienah-sparkle .diag {
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,208,240,0.45), transparent);
    border-radius: 50%;
    transform-origin: center;
    animation: gienah-pulse 10s ease-in-out infinite -1s;
  }
  .gienah-sparkle .diag-a { transform: translate(-50%, -50%) rotate(45deg); }
  .gienah-sparkle .diag-b { transform: translate(-50%, -50%) rotate(-45deg); }
  @keyframes gienah-pulse {
    0%, 100% { opacity: 0.5; }
    20% { opacity: 1; }
    40% { opacity: 0.35; }
    60% { opacity: 0.9; }
    80% { opacity: 0.4; }
  }
  /* Connecting lines SVG overlay */
  .corvus-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  /*- Star Animations -*/
  @keyframes twinkle-soft {
    0%, 100% { opacity: 0.6; }
    33% { opacity: 0.9; }
    66% { opacity: 0.5; }
  }
  @keyframes twinkle-bright {
    0%, 100% { opacity: 0.7; }
    25% { opacity: 1; }
    50% { opacity: 0.5; }
    75% { opacity: 0.95; }
  }
  @keyframes twinkle-feature {
    0%, 100% { opacity: 0.8; }
    20% { opacity: 1; }
    40% { opacity: 0.6; }
    60% { opacity: 1; }
    80% { opacity: 0.7; }
  }
  @keyframes shoot {
    0%, 95%, 100% { opacity: 0; transform: rotate(144deg) translateX(0); }
    96% { opacity: 1; }
    98% { opacity: 0.9; transform: rotate(144deg) translateX(900px); }
    99% { opacity: 0; transform: rotate(144deg) translateX(1050px); }
  }
  /*----- Moon Nav -----*/
  .moon-nav {
    position: fixed;
    top: 3vh;
    right: 4vw;
    width: 9vw;
    height: 9vw;
    min-width: 60px;
    min-height: 60px;
    max-width: 200px;
    max-height: 200px;
    z-index: 200;
  }
  .moon {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    cursor: pointer;
    z-index: 202;
  }
  .moon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  /* Gloooooow */
  .moon-glow {
    position: absolute;
    top: -30%; left: -30%;
    width: 160%; height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,220,170,0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 201;
    transition: opacity 0.4s ease;
  }
  .moon-nav:hover .moon-glow {
    background: radial-gradient(circle, rgba(230,220,170,0.28) 0%, transparent 65%);
  }
  /* Moonray Nav Items */
  .moonray-container {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    z-index: 199;
    pointer-events: none;
  }
  .moonray {
    position: absolute;
    top: 0; left: 0;
    width: 340px;
    height: 2px;
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.3s ease;
  }
  .moon-nav.open .moonray {
    opacity: 1;
    pointer-events: auto;
  }
  /* Fade-in */
  .moon-nav.open .moonray:nth-child(1) { transition-delay: 0.00s; }
  .moon-nav.open .moonray:nth-child(2) { transition-delay: 0.05s; }
  .moon-nav.open .moonray:nth-child(3) { transition-delay: 0.10s; }
  .moon-nav.open .moonray:nth-child(4) { transition-delay: 0.15s; }
  .moon-nav.open .moonray:nth-child(5) { transition-delay: 0.20s; }
  .moon-nav.open .moonray:nth-child(6) { transition-delay: 0.25s; }
  /* Fade-out */
  .moon-nav:not(.open) .moonray:nth-child(1) { transition-delay: 0.25s; }
  .moon-nav:not(.open) .moonray:nth-child(2) { transition-delay: 0.20s; }
  .moon-nav:not(.open) .moonray:nth-child(3) { transition-delay: 0.15s; }
  .moon-nav:not(.open) .moonray:nth-child(4) { transition-delay: 0.10s; }
  .moon-nav:not(.open) .moonray:nth-child(5) { transition-delay: 0.05s; }
  .moon-nav:not(.open) .moonray:nth-child(6) { transition-delay: 0.00s; }
  /* Ray gradient */
  .moonray-beam {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    width: 320px;
    height: 110px;
    clip-path: polygon(0 50%, 100% 0%, 100% 100%);
    background: linear-gradient(
      to right,
      rgba(230,220,170,0.32) 0%,
      rgba(230,220,170,0.10) 55%,
      transparent 100%
    );
    transition: background 0.3s ease;
  }
  /* Hover ray */
  .moonray:hover .moonray-beam {
    background: linear-gradient(
      to right,
      rgba(230,220,170,0.55) 0%,
      rgba(230,220,170,0.20) 55%,
      transparent 100%
    );
  }
  /* Nav link text */
  .moonray-link {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
    font-family: 'Almendra Display', serif;
    font-size: clamp(0.75rem, 1.1vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgba(230,220,170,0.7);
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(230,220,170,0.4);
    transition: color 0.3s ease, text-shadow 0.3s ease, letter-spacing 0.3s ease;
    pointer-events: auto;
  }
  .moonray:hover .moonray-link {
    color: rgba(240,228,185,1);
    text-shadow: 0 0 18px rgba(230,220,170,0.7);
    letter-spacing: 0.24em;
  }
  /* Ray Angles */
  .moonray:nth-child(1) { transform: rotate(210deg); }
  .moonray:nth-child(2) { transform: rotate(186deg); }
  .moonray:nth-child(3) { transform: rotate(162deg); }
  .moonray:nth-child(4) { transform: rotate(138deg); }
  .moonray:nth-child(5) { transform: rotate(114deg); }
  .moonray:nth-child(6) { transform: rotate(90deg); }
  /* Text Angles */
  .moonray:nth-child(1) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 75px; }
  .moonray:nth-child(2) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 85px; }
  .moonray:nth-child(3) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 85px; }
  .moonray:nth-child(4) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 80px; }
  .moonray:nth-child(5) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 75px; }
  .moonray:nth-child(6) .moonray-link { transform: translateY(-50%) rotate(-180deg); left: 70px; }
  /*- Moble Ink Bloom Menu -*/
  .ink-bloom {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 190;
    pointer-events: none;
    overflow: hidden;
  }
  .ink-bloom-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  .ink-bloom-links {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    pointer-events: none;
  }
  .ink-bloom-links a {
    font-family: 'Almendra Display', serif;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    color: rgba(230,220,170,0);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: color 0.2s ease, letter-spacing 0.2s ease, text-shadow 0.2s ease;
    pointer-events: none;
  }
  .ink-bloom-links a:hover {
    color: rgba(245,235,195,1) !important;
    letter-spacing: 0.28em;
    text-shadow: 0 0 20px rgba(230,220,170,0.6);
  }
  .ink-bloom-close {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Infant', serif;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(230,220,170,0);
    pointer-events: none;
    transition: color 0.3s ease;
    text-transform: uppercase;
  }
  /*- Pesky Media Junk -*/
  @media (max-width: 768px) {
    .moonray-container { display: none; }
    .ink-bloom { display: block; }
  }
  @media (min-width: 769px) {
    .ink-bloom { display: none !important; }
  }
  /*----- Page Content... the scrolly bits -----*/
  .page-content {
    position: relative;
    z-index: 10;
    padding-right: 12%;
    max-width: 1450px;
  }
  /*- Hero -*/
  .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 900;
    max-height: 100vh;
    background-color: transparent;
    background-image: url('assets/images/site/Canopy.webp');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
  }
  .hero-text {
    position: absolute;
    right: 10%;
    bottom: 12%;
    text-align: right;
  }
  .hero-title {
    font-family: 'Almendra Display', serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.1;
    background: linear-gradient(
      160deg,
      var(--star-warm) 0%,
      var(--star-white) 40%,
      var(--star-cool) 80%,
      var(--star-warm) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.3em;
    filter: drop-shadow(0 0 30px rgba(230, 220, 190, 0.15));
    animation: fadeInUp 1.2s ease-out both;
  }
  .hero-tagline {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    animation: fadeInUp 1.2s ease-out 0.4s both;
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /*- Scroll Critter, AKA Madam Chipmunk -*/
  .scroll-critter {
    position: absolute;
    bottom: 5.5vw;
    right: 7%;
    transform: translateX(-50%);
    z-index: 15;
    width: clamp(50px, 6.5vw, 125px);
    height: clamp(125px, 13.5vw, 260px);
    cursor: pointer;
  }
  /* The Madam's Body */
  .chipmunk-body {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Madam's Sign */
  .chipmunk-sign {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: sign-bob 4s ease-in-out infinite;
  }
  @keyframes sign-bob {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(5px); }
  }
  /* Mobile Madam */
  .chipmunk-lantern {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
  }
  /* Mobile Lantern Glow */
   .lantern-glow {
    position: absolute;
    bottom: 32%;
    left: 12%;
    transform: translateX(-50%);
    width: 60%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 200, 80, 0.45) 0%,
      rgba(255, 160, 40, 0.20) 40%,
      transparent 70%
    );
    pointer-events: none;
    display: none;
    animation: lantern-flicker 3s ease-in-out infinite;
  }
  @keyframes lantern-flicker {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1);    }
    25%       { opacity: 1;    transform: translateX(-50%) scale(1.08); }
    50%       { opacity: 0.75; transform: translateX(-50%) scale(0.95); }
    75%       { opacity: 1;    transform: translateX(-50%) scale(1.05); }
  }
  /* More Media */
  @media (max-width: 768px) {
    .chipmunk-sign    { display: none; }
    .chipmunk-lantern { display: block; }
    .lantern-glow     { display: block; }
  }
  /*- Sisyphean Squirrel -*/
  .fairy-squirrel {
    position: absolute;
    top: 65%;
    left: 15%;
    width: clamp(113px, 17.7vw, 339px);
    height: clamp(99px, 15.6vw, 299px);
    z-index: 12;
    pointer-events: none;
  }
  .squirrel-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .squirrel-f1 {
    animation: wing-flap 0.75s steps(1) infinite;
  }
  .squirrel-f2 {
    animation: wing-flap 0.75s steps(1) infinite reverse;
  }
  @keyframes wing-flap {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .fairy-squirrel-inner {
    position: relative;
    width: 100%; height: 100%;
    animation: squirrel-hover 4s ease-in-out infinite;
  }
  @keyframes squirrel-hover {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
  }
  /* Lovely Luna */
  .luna-moth {
    position: absolute;
    top: 70%;
    left: 35%;
    width: clamp(36px, 5.7vw, 110px);
    height: clamp(40px, 6.25vw, 120px);
    z-index: 13;
    pointer-events: none;
  }
  .moth-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .moth-f1 {
    animation: moth-flap 0.95s steps(1) infinite;
  }
  .moth-f2 {
    animation: moth-flap 0.95s steps(1) infinite reverse;
  }
  @keyframes moth-flap {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .luna-moth-inner {
    position: relative;
    width: 100%; height: 100%;
    animation: moth-drift-y 5s ease-in-out infinite,
               moth-drift-x 7s ease-in-out infinite;
  }
  @keyframes moth-drift-y {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
  }
  @keyframes moth-drift-x {
    0%, 100% { transform: translateX(0px); }
    33%       { transform: translateX(8px); }
    66%       { transform: translateX(-4px); }
  }
  /*- Kat the Cat -*/
  .kat-container {
    position: absolute;
    top: -22%;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 488;
    z-index: 12;
    pointer-events: none;
  }
  .kat-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: top left;
  }
  .kat-f1 { opacity: 1; }
  .kat-f2 {
    opacity: 0;
    animation: kat-blink 9s ease-in-out infinite 2s;
  }
  @keyframes kat-blink {
    0%, 88%          { opacity: 0; }
    90%, 92%         { opacity: 1; }
    91%, 93%         { opacity: 0; }
    94%, 96%         { opacity: 1; }
    97%, 100%        { opacity: 0; }
  }
  /* Warm Penguin */
  .penguin {
    position: absolute;
    bottom: 38%;
    left: 8%;
    width: clamp(94px, 14.7vw, 283px);
    height: clamp(103px, 16.0vw, 308px);
    z-index: 12;
    pointer-events: none;
  }
  .penguin-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .penguin-fan {
    transform-origin: 70.7% 56.8%;
    animation: fan-wave 2.5s ease-in-out infinite;
  }
  @keyframes fan-wave {
    0%, 100% { transform: rotate(-6deg); }
    50%       { transform: rotate(6deg); }
  }
  /* Stack of Books-haunted or wind? We may never know */
  .bookstack {
    position: absolute;
    bottom: 28%;
    left: 52%;
    width: clamp(78px, 8.1vw, 156px);
    height: clamp(70px, 7.3vw, 141px);
    z-index: 12;
    pointer-events: none;
  }
  .bookstack-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .bookstack-f1 { opacity: 1; }
  .bookstack-f2 {
    opacity: 0;
    animation: book-flutter 7s steps(1) infinite 1.5s;
  }
  @keyframes book-flutter {
    0%, 78%  { opacity: 0; }
    80%, 90% { opacity: 1; }
    92%      { opacity: 0; }
    94%, 97% { opacity: 1; }
    99%, 100%{ opacity: 0; }
  }
  /* Jackalope the Gentelman Reader */
  .jackalope {
    position: absolute;
    bottom: 18%;
    left: 9%;
    width: clamp(95px, 14.9vw, 286px);
    height: clamp(154px, 24.1vw, 462px);
    z-index: 12;
    pointer-events: none;
  }
  .jackalope-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .jackalope-f1 {
    opacity: 1;
    animation: page-turn-hide 11s steps(1) infinite 3s;
  }
  .jackalope-f2 {
    opacity: 0;
    animation: page-turn 11s steps(1) infinite 3s;
  }
  @keyframes page-turn-hide {
    0%, 80%  { opacity: 1; }
    82%, 88% { opacity: 0; }
    90%      { opacity: 1; }
    92%, 96% { opacity: 0; }
    98%, 100%{ opacity: 1; }
  }
  @keyframes page-turn {
    0%, 80%  { opacity: 0; }
    82%, 88% { opacity: 1; }
    90%      { opacity: 0; }
    92%, 96% { opacity: 1; }
    98%, 100%{ opacity: 0; }
  }
  /* Michael Raven */
  .raven {
    position: absolute;
    bottom: 27%;
    left: 11%;
    width: clamp(91px, 14.3vw, 274px);
    height: clamp(106px, 16.6vw, 318px);
    z-index: 12;
    pointer-events: none;
  }
  .raven-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .raven-f1 {
    opacity: 1;
    animation: gem-hide 8s steps(1) infinite 1s;
  }
  .raven-f2 {
    opacity: 0;
    animation: gem-show 8s steps(1) infinite 1s;
  }
  @keyframes gem-hide {
    0%, 70%  { opacity: 1; }
    72%, 82% { opacity: 0; }
    84%      { opacity: 1; }
    86%, 94% { opacity: 0; }
    96%, 100%{ opacity: 1; }
  }
  @keyframes gem-show {
    0%, 70%  { opacity: 0; }
    72%, 82% { opacity: 1; }
    84%      { opacity: 0; }
    86%, 94% { opacity: 1; }
    96%, 100%{ opacity: 0; }
  }
  /* Gem sparkle */
  .raven-sparkle {
    position: absolute;
    top: 35%;
    right: 18%;
    width: 5%;
    height: 5%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: gem-sparkle 8s ease-in-out infinite 1s;
  }
  @keyframes gem-sparkle {
    0%, 70%  { opacity: 0; box-shadow: none; }
    73%      { opacity: 0.6; box-shadow: 0 0 8px 3px rgba(0,210,150,0.5), 0 0 16px 6px rgba(0,180,120,0.25); }
    78%      { opacity: 1;   box-shadow: 0 0 12px 5px rgba(0,220,160,0.7), 0 0 24px 10px rgba(0,200,140,0.35), 0 0 40px 16px rgba(0,180,120,0.15); }
    82%      { opacity: 0.5; box-shadow: 0 0 6px 2px rgba(0,210,150,0.4); }
    84%      { opacity: 0; box-shadow: none; }
    87%      { opacity: 0.7; box-shadow: 0 0 10px 4px rgba(0,220,160,0.6), 0 0 20px 8px rgba(0,200,140,0.3); }
    92%      { opacity: 1;   box-shadow: 0 0 14px 6px rgba(0,220,160,0.8), 0 0 28px 12px rgba(0,200,140,0.4), 0 0 44px 18px rgba(0,180,120,0.2); }
    95%      { opacity: 0.3; box-shadow: 0 0 4px 2px rgba(0,210,150,0.3); }
    97%, 100%{ opacity: 0;   box-shadow: none; }
  }
  /* Woodworking Woodpecker */
  .woodpecker {
    position: absolute;
    bottom: 24%;
    left: 52%;
    width: clamp(65px, 10.2vw, 196px);
    height: clamp(95px, 14.8vw, 285px);
    z-index: 12;
    pointer-events: none;
  }
  .woodpecker-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .woodpecker-f1 {
    opacity: 1;
    animation: mallet-hide 6s steps(1) infinite 0.5s;
  }
  .woodpecker-f2 {
    opacity: 0;
    animation: mallet-show 6s steps(1) infinite 0.5s;
  }
  @keyframes mallet-hide {
    0%, 60%  { opacity: 1; }
    62%, 67% { opacity: 0; }
    69%      { opacity: 1; }
    71%, 76% { opacity: 0; }
    78%      { opacity: 1; }
    80%, 85% { opacity: 0; }
    87%, 100%{ opacity: 1; }
  }
  @keyframes mallet-show {
    0%, 60%  { opacity: 0; }
    62%, 67% { opacity: 1; }
    69%      { opacity: 0; }
    71%, 76% { opacity: 1; }
    78%      { opacity: 0; }
    80%, 85% { opacity: 1; }
    87%, 100%{ opacity: 0; }
  }
  /* Yonder Jon Kestrel */
  .kestrel {
    position: absolute;
    bottom: 32%;
    left: 72%;
    width: clamp(54px, 8.4vw, 161px);
    height: clamp(42px, 6.5vw, 125px);
    z-index: 12;
    pointer-events: none;
  }
  .kestrel-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .kestrel-f1 {
    opacity: 1;
    animation: solder-hide 5s steps(1) infinite 2s;
  }
  .kestrel-f2 {
    opacity: 0;
    animation: solder-show 5s steps(1) infinite 2s;
  }
  @keyframes solder-hide {
    0%, 65%  { opacity: 1; }
    67%, 75% { opacity: 0; }
    77%, 100%{ opacity: 1; }
  }
  @keyframes solder-show {
    0%, 65%  { opacity: 0; }
    67%, 75% { opacity: 1; }
    77%, 100%{ opacity: 0; }
  }
  /* Smoke—because fire means you are doing it wrong */
  .kestrel-smoke {
    position: absolute;
    bottom: 60%;
    left: 30%;
    width: 3px;
    pointer-events: none;
  }
  .smoke-wisp {
    position: absolute;
    top: 15%;
    left: -30%;
    width: 3px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(200,200,210,0.5), transparent);
    animation: smoke-rise 2.5s ease-out infinite;
    transform-origin: bottom center;
  }
  .smoke-wisp:nth-child(2) {
    left: 3px;
    animation-delay: 0.8s;
    animation-duration: 3s;
  }
  .smoke-wisp:nth-child(3) {
    left: -2px;
    animation-delay: 1.6s;
    animation-duration: 2s;
  }
  @keyframes smoke-rise {
    0%   { opacity: 0;   transform: translateY(0)    scaleX(1)    rotate(0deg); }
    20%  { opacity: 0.6; transform: translateY(-6px)  scaleX(1.2)  rotate(2deg); }
    60%  { opacity: 0.4; transform: translateY(-16px) scaleX(1.8)  rotate(-3deg); }
    100% { opacity: 0;   transform: translateY(-28px) scaleX(2.5)  rotate(4deg); }
  }
  /* Camelia the Violet-Green Swallow-Arrrrrr */
  .swallow {
    position: absolute;
    bottom: 21%;
    left: 32%;
    width: clamp(46px, 7.2vw, 138px);
    height: clamp(42px, 6.5vw, 125px);
    z-index: 12;
    pointer-events: none;
  }
  .swallow-inner {
    position: relative;
    width: 100%; height: 100%;
    animation: swallow-hop 12s ease-in-out infinite 4s;
  }
  @keyframes swallow-hop {
    0%, 45%  { transform: translate(0, 0); }
    48%      { transform: translate(14%, -28%); }
    50%, 72% { transform: translate(12%, -24%); }
    76%      { transform: translate(5%, -14%); }
    80%, 88% { transform: translate(3%, -8%); }
    91%      { transform: translate(0, 0); }
    100%     { transform: translate(0, 0); }
  }
  .swallow-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .swallow-f1 {
    opacity: 1;
    animation: swallow-hide 12s steps(1) infinite 4s;
  }
  .swallow-f2 {
    opacity: 0;
    animation: swallow-show 12s steps(1) infinite 4s;
  }
  @keyframes swallow-hide {
    0%, 48%  { opacity: 1; }
    50%, 88% { opacity: 0; }
    90%, 100%{ opacity: 1; }
  }
  @keyframes swallow-show {
    0%, 48%  { opacity: 0; }
    50%, 88% { opacity: 1; }
    90%, 100%{ opacity: 0; }
  }
  /* Puck and Ginger Sleeping-suprise */
  .dogs {
    position: absolute;
    bottom: -25%;
    left: 46%;
    width: clamp(74px, 11.6vw, 222px);
    height: clamp(44px, 6.8vw, 131px);
    z-index: 12;
    pointer-events: none;
  }
  .dogs-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .dogs-f1 {
    opacity: 1;
    animation: ear-hide 9s steps(1) infinite 2s;
  }
  .dogs-f2 {
    opacity: 0;
    animation: ear-twitch 9s steps(1) infinite 2s;
  }
  @keyframes ear-hide {
    0%, 55%  { opacity: 1; }
    57%, 61% { opacity: 0; }
    63%      { opacity: 1; }
    65%, 69% { opacity: 0; }
    71%, 100%{ opacity: 1; }
  }
  @keyframes ear-twitch {
    0%, 55%  { opacity: 0; }
    57%, 61% { opacity: 1; }
    63%      { opacity: 0; }
    65%, 69% { opacity: 1; }
    71%, 100%{ opacity: 0; }
  }
  /* Montague the Mole */
  .mole {
    position: absolute;
    bottom: 25%;
    right: 19%;
    width: clamp(64px, 9.9vw, 191px);
    height: clamp(49px, 7.7vw, 148px);
    z-index: 12;
    pointer-events: none;
  }
  .mole img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Fireplace glow */
  .mole-fire {
    position: absolute;
    bottom: 10%;
    right: -36%;
    width: 45%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 160, 40, 0.55) 0%,
      rgba(255, 100, 20, 0.25) 45%,
      transparent 70%
    );
    pointer-events: none;
    animation: fire-flicker 1.8s ease-in-out infinite;
  }
  /* Lamp glow */
  .mole-lamp {
    position: absolute;
    bottom: 46%;
    right: 12%;
    width: 20%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 210, 100, 0.5) 0%,
      rgba(255, 180, 60, 0.2) 50%,
      transparent 70%
    );
    pointer-events: none;
    animation: fire-flicker 2.3s ease-in-out infinite 0.4s;
  }
  @keyframes fire-flicker {
    0%, 100% { opacity: 0.8;  transform: scale(1); }
    20%      { opacity: 1;    transform: scale(1.08); }
    45%      { opacity: 0.65; transform: scale(0.94); }
    65%      { opacity: 1;    transform: scale(1.05); }
    80%      { opacity: 0.75; transform: scale(0.97); }
  }
  /* Griswald the Mandrake */
  .mandrake {
    position: absolute;
    bottom: 30%;
    right: 7%;
    width: clamp(29px, 4.5vw, 86px);
    height: clamp(66px, 10.4vw, 199px);
    z-index: 12;
    pointer-events: none;
  }
  .mandrake-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .mandrake-f1 {
    opacity: 1;
    animation: yawn-hide 14s steps(1) infinite 5s;
  }
  .mandrake-f2 {
    opacity: 0;
    animation: yawn-show 14s steps(1) infinite 5s;
  }
  @keyframes yawn-hide {
    0%, 70%  { opacity: 1; }
    72%, 88% { opacity: 0; }
    90%, 100%{ opacity: 1; }
  }
  @keyframes yawn-show {
    0%, 70%  { opacity: 0; }
    72%, 88% { opacity: 1; }
    90%, 100%{ opacity: 0; }
  }
  /*----- Branches -----*/
  .branch {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 350;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -2px;
  }
  .branch-one   { background-image: url('assets/images/site/Branch_1.webp'); }
  .branch-two   { background-image: url('assets/images/site/Branch_2.webp'); }
  .branch-three { background-image: url('assets/images/site/Branch_3.webp'); }
  .branch-four  { background-image: url('assets/images/site/Branch_4.webp'); }
  .branch-five  { background-image: url('assets/images/site/Branch_5.webp'); }
  .branch-six { background-image: url('assets/images/site/Branch_6.webp'); }
  /*----- Content Sections with Bark Tiles -----*/
  .content-section {
    position: relative;
    width: 100%;
    max-width: 1920px;
    padding: 3rem 8vw 3rem 14vw;
    background-size: 1920px 400px;
    background-repeat: round round;
    background-position: top left;
    overflow: visible;
  }
  .bark-one   { background-image: url('assets/images/site/Tile_1.webp'); }
  .bark-two   { background-image: url('assets/images/site/Tile_2.webp'); }
  .bark-three { background-image: url('assets/images/site/Tile_3.webp'); }
  .bark-four  { background-image: url('assets/images/site/Tile_4.webp'); }
  .bark-five  { background-image: url('assets/images/site/Tile_5.webp'); }
  .content-inner {
    max-width: 680px;
    margin: 0 auto 0 0;
  }
  .content-section h2 {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 0.8em;
    color: var(--star-warm);
  }
  .content-section h3 {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.06em;
    margin-bottom: 0.8em;
    color: var(--parchment-moonlit);
  }
  .content-section p {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.9;
    font-weight: 300;
    color: var(--text-primary);
    opacity: 0.75;
    margin-bottom: 1.5em;
  }
  .content-section em {
    color: var(--text-muted);
  }
  .content-section a {
    color: var(--star-warm);
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 220, 192, 0.3);
    transition: border-color 0.3s ease, opacity 0.3s ease;
  }
  .content-section a:hover {
    border-color: var(--star-warm);
    opacity: 1;
  }
  @media (max-width: 768px) {

    .content-section h2 {
      font-size: clamp(1.3rem, 5vw, 1.8rem);
    }
    .content-section p {
      font-size: 1rem;
      line-height: 1.8;
    }
  }
  /*----- Footer -----*/
  .footer-contact-inner {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 300px;
    width: 50%;
    text-align: right;
    padding: 2rem 4vw 2rem 0;
  }
  .branch-six .footer-contact-inner h2 {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 0.4em;
    color: var(--star-warm);
  }
  .branch-six .footer-contact-inner p {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 300;
    line-height: 1.8;
    opacity: 0.6;
    margin-bottom: 0;
  }
  .branch-six .footer-contact-inner a {
    color: var(--star-warm);
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 220, 192, 0.3);
    transition: border-color 0.3s ease, opacity 0.3s ease;
  }
  .branch-six .footer-contact-inner a:hover {
    border-color: var(--star-warm);
    opacity: 1;
  }
  /* Newsletter placeholder */
  .newsletter-placeholder {
    margin: 2em auto;
    padding: 1.5em 2em;
    max-width: 400px;
    border: 1px dashed rgba(232, 228, 240, 0.15);
    border-radius: 6px;
    font-size: 0.9rem;
    opacity: 0.3;
    font-style: italic;
  }
  .footer-roots {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 500;
    background-image: url('assets/images/site/Roots.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: -2px;
  }
  .mole-hole {
    position: absolute;
    bottom: 18%;
    right: 7%;
    display: flex;
    align-items: right;
    justify-content: right;
    text-align: right;
  }
  .mole-hole-text {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    opacity: 0.35;
    color: var(--parchment-fresh);
    white-space: nowrap;
  }
  .mole-hole-text a {
    color: var(--parchment-fresh);
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
  .mole-hole-text a:hover {
    opacity: 0.8;
  }
  .root-privacy {
    position: absolute;
    top: 3%;
    right: 20%;
    opacity: 0.4;
    transform: rotate(5deg);
    transform-origin: left center;
  }
  .root-privacy a {
    font-family: 'Cormorant Infant', serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--parchment-moonlit);
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
  .root-privacy a:hover {
    opacity: 0.8;
  }
  /* Email Magic */
  .email-reveal a {
    font-family: 'Cormorant Infant', serif;
    color: var(--parchment-moonlit);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
  }
  .email-reveal a:hover {
    color: var(--text-primary);
  }
  /* Legal Popups */
  .legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(6, 4, 18, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-fade-in 0.25s ease both;
  }
  .legal-modal.open {
    display: flex;
  }
  @keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .legal-modal-inner {
    position: relative;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(160deg, rgba(18,14,45,0.98) 0%, rgba(12,9,32,0.97) 100%);
    border: 1px solid rgba(230,220,170,0.2);
    border-radius: 2px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 0 60px rgba(6,4,18,0.8), inset 0 1px 0 rgba(230,220,170,0.15);
    animation: modal-rise 0.3s ease both;
  }
  @keyframes modal-rise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .legal-modal-inner h2 {
    font-family: 'Almendra Display', serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(230,220,170,0.9);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(230,220,170,0.12);
  }
  .legal-modal-body p {
    font-family: 'Cormorant Infant', serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(232,228,240,0.75);
    margin-bottom: 0.9rem;
  }
  .legal-modal-body p em {
    color: rgba(232,228,240,0.4);
    font-style: italic;
  }
  .legal-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(230,220,170,0.4);
    transition: color 0.2s ease;
    padding: 0.2rem 0.4rem;
  }
  .legal-modal-close:hover {
    color: rgba(230,220,170,0.9);
  }
  /*----- Social Media Planet -----*/
  .social-planet {
    position: fixed;
    bottom: 8%;
    right: 2%;
    /* 279px natural width — scale like other assets */
    width: clamp(80px, 8vw, 160px);
    /* maintain 279:141 aspect ratio */
    height: auto;
    z-index: 16;
    cursor: pointer;
    transition: filter 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(200,190,150,0.15));
  }

  .social-planet:hover {
    filter: drop-shadow(0 0 12px rgba(200,190,150,0.35));
  }

  .social-planet img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Orbit links container — anchored to planet center */
  .planet-orbits {
    position: fixed;
    /* Matches planet center — adjusted by JS on open */
    top: 42%;
    right: 16%;
    width: 0;
    height: 0;
    z-index: 20;
    pointer-events: none;
  }

  /* Each orbit link */
  .orbit-link {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(14, 11, 35, 0.75);
    border: 1px solid rgba(200,190,150,0.25);
    box-shadow: 0 0 10px rgba(200,190,150,0.1);
    text-decoration: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition:
      opacity 0.35s ease,
      transform 0.35s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
    pointer-events: none;
    cursor: pointer;
  }

  .orbit-link:hover {
    box-shadow: 0 0 18px rgba(200,190,150,0.35);
    border-color: rgba(200,190,150,0.6);
  }

  .orbit-link svg {
    width: 20px;
    height: 20px;
    fill: rgba(220,210,170,0.75);
    transition: fill 0.25s ease;
    /* Let the parent <a> catch all mouse events, not the svg path */
    pointer-events: none;
  }

  .orbit-link:hover svg {
    fill: rgba(240,230,190,1);
  }

  /* Open state — JS adds .planet-open to .social-planet */
  .social-planet.open + .planet-orbits .orbit-link {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Critter clearance — indent last paragraphs ─────────
     Scales from 0 at narrow widths up to critter width
     at full width. Only applied to paragraphs that overlap.
     ─────────────────────────────────────────────────────── */
  .critter-clear {
    padding-left: clamp(0px, 6vw, 100px);
    transition: padding-left 0s;
  }

  @media (max-width: 900px) {
    .critter-clear {
      padding-left: 0;
    }
  }