/* Elysian Paws — luxury night-sky theme */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  --night-0: #04060f;
  --night-1: #0a0f22;
  --night-2: #121a35;
  --gold: #b0803f;            /* bronze */
  --champagne: #d6b285;       /* warm bronze-champagne */
  --ivory: #f5efe0;
  --muted: #9aa3c0;
  --glass: rgba(18, 26, 53, .55);
  --glass-border: rgba(176, 132, 71, .3);
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Montserrat', sans-serif;
}

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

body {
  background: radial-gradient(ellipse at 50% -20%, #1b2447 0%, var(--night-1) 45%, var(--night-0) 100%);
  min-height: 100vh;
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: .02em;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; }

a { color: var(--champagne); text-decoration: none; }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  background: linear-gradient(to bottom, rgba(4,6,15,.85), transparent);
}
.brand {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ivory);
}
.brand .paw { color: var(--gold); }
.brand-logo {
  display: block; height: 58px; width: auto;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.85));
}
@media (max-width: 640px) {
  .brand-logo { height: 42px; }
}

/* ---------- shared top bar (profile · logo · menu) ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(to bottom, rgba(4,6,15,.8), transparent);
}
.tb-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.tb-logo img {
  display: block; height: 62px; width: auto;
  /* a deep layered shadow so the white calligraphy reads over anything */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.95))
          drop-shadow(0 2px 12px rgba(0,0,0,.9))
          drop-shadow(0 0 28px rgba(0,0,0,.85));
}
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,12,26,.5); color: var(--champagne);
  border: 1px solid rgba(176,132,71,.4); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .3s, background .3s;
}
.icon-btn:hover { box-shadow: 0 0 18px rgba(176,132,71,.35); background: rgba(20,18,10,.6); }

#drawerBack {
  position: fixed; inset: 0; z-index: 88; background: rgba(4,6,15,.55);
  opacity: 0; pointer-events: none; transition: opacity .4s;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#drawerBack.open { opacity: 1; pointer-events: auto; }
/* the menu slides out from the same edge its button lives on */
#drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 89;
  width: min(320px, 86vw); padding: 34px 30px;
  background: linear-gradient(160deg, rgba(14,19,42,.94), rgba(4,6,15,.96));
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translateX(-103%); transition: transform .55s cubic-bezier(.22,.9,.3,1);
  display: flex; flex-direction: column;
}
#drawer.open { transform: translateX(0); }
/* the way out, said plainly: tapping the dark behind the drawer always
   closed it, but nothing on screen ever admitted that */
#drawerX {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--muted); font-size: 1.5rem; line-height: 1;
  transition: color .2s;
}
#drawerX:hover { color: var(--champagne); }
.d-logo { width: 170px; margin: 6px auto 26px; display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.8)); }
.d-item {
  display: flex; align-items: center; gap: 14px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 1.25rem; color: var(--ivory);
  padding: 15px 6px; border-bottom: 1px solid rgba(176,132,71,.14);
  transition: color .3s, padding-left .3s;
}
.d-item span { color: var(--gold); font-size: 1rem; width: 20px; text-align: center; }
.d-item:hover { color: var(--champagne); padding-left: 12px; }
.d-foot { margin-top: auto; text-align: center; padding-top: 24px; }
.d-foot a { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.d-foot a:hover { color: var(--champagne); }
@media (max-width: 640px) {
  .tb-logo img { height: 46px; }
  .icon-btn { width: 38px; height: 38px; }
}
nav .links { display: flex; gap: 28px; align-items: center; }
nav .links a {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
nav .links a:hover { color: var(--champagne); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; border: none;
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
  padding: 14px 34px; border-radius: 999px;
  transition: all .35s ease;
}
.btn-gold {
  background: linear-gradient(135deg, #8f6a34, #d6b285 50%, #8f6a34);
  color: #171204;
}
.btn-gold:hover { box-shadow: 0 0 34px rgba(176,132,71,.45); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--champagne);
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover { border-color: var(--gold); box-shadow: 0 0 22px rgba(176,132,71,.2); }
.btn-sm { padding: 9px 20px; font-size: .68rem; }
.btn:disabled { opacity: .4; cursor: default; }

/* ---------- glass panels ---------- */
.panel {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.hairline {
  height: 1px; border: none; margin: 22px auto; width: 120px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* ---------- the letters are theirs alone: no selecting or copying page
   text; typing into forms (names, letters, passwords) still works ---------- */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }

/* ---------- lace frames: delicate wreaths of hearts, stars or waves
   circling the portrait (frame values lace-hearts / lace-stars / lace-waves,
   rendered with a wrapper span like the wings) ---------- */
.lace { position: relative; display: inline-block; border-radius: 50%; }
.lace::before {
  content: ''; position: absolute; inset: -13%; z-index: 2; pointer-events: none;
  background: center / 100% 100% no-repeat;
}
.lace .portrait, .lace .portrait-placeholder { position: relative; z-index: 1; }
.lace .portrait-placeholder { background: var(--night-2); }
.lace-hearts::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cpath transform='translate(211.0,110.0) rotate(-90) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(201.0,153.8) rotate(-64) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(173.0,189.0) rotate(-39) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(132.5,208.5) rotate(-13) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(87.5,208.5) rotate(13) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(47.0,189.0) rotate(39) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(19.0,153.8) rotate(64) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(9.0,110.0) rotate(90) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(19.0,66.2) rotate(116) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(47.0,31.0) rotate(141) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(87.5,11.5) rotate(167) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(132.5,11.5) rotate(193) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(173.0,31.0) rotate(219) scale(1.0)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(201.0,66.2) rotate(244) scale(0.78)' d='M0 5 C-5.5 .5 -7 -2 -7 -4.2 C-7 -6.6 -5 -8 -3 -8 C-1.7 -8 -.6 -7.3 0 -6.2 C.6 -7.3 1.7 -8 3 -8 C5 -8 7 -6.6 7 -4.2 C7 -2 5.5 .5 0 5 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,154,184,.35));
}
.lace-hearts .portrait, .lace-hearts .portrait-placeholder {
  border-color: #ff9ab8 !important; box-shadow: 0 0 26px rgba(255,154,184,.45) !important; }
.lace-stars::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cpath transform='translate(210.4,120.6) rotate(6) scale(1.0)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(198.8,158.2) rotate(28) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(173.6,188.5) rotate(51) scale(0.8)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(138.7,206.8) rotate(74) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(99.4,210.4) rotate(96) scale(1.0)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(61.8,198.8) rotate(118) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(31.5,173.6) rotate(141) scale(0.8)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(13.2,138.7) rotate(164) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(9.6,99.4) rotate(186) scale(1.0)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(21.2,61.8) rotate(208) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(46.4,31.5) rotate(231) scale(0.8)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(81.3,13.2) rotate(254) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(120.6,9.6) rotate(276) scale(1.0)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(158.2,21.2) rotate(298) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(188.5,46.4) rotate(321) scale(0.8)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3Cpath transform='translate(206.8,81.3) rotate(344) scale(0.55)' d='M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,217,160,.35));
  animation: laceTurn 80s linear infinite;
}
.lace-stars .portrait, .lace-stars .portrait-placeholder {
  border-color: #ffd9a0 !important; box-shadow: 0 0 26px rgba(255,217,160,.5) !important; }
.lace-waves::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cpath d='M210.0 110.0 L212.2 113.6 L213.8 117.3 L214.7 121.0 L214.4 124.7 L213.2 128.2 L211.0 131.5 L208.1 134.5 L205.0 137.2 L202.0 139.9 L199.5 142.6 L197.6 145.4 L196.6 148.5 L196.2 152.0 L196.3 155.9 L196.6 160.0 L196.7 164.2 L196.3 168.2 L195.1 171.9 L193.1 174.9 L190.3 177.3 L186.7 179.1 L182.8 180.3 L178.7 181.1 L174.7 181.9 L171.2 183.0 L168.2 184.5 L165.7 186.7 L163.6 189.5 L161.8 192.9 L160.0 196.6 L158.0 200.3 L155.6 203.6 L152.8 206.1 L149.5 207.8 L145.8 208.4 L141.9 208.2 L137.9 207.2 L133.9 205.9 L130.1 204.7 L126.5 203.8 L123.2 203.6 L119.9 204.3 L116.7 205.7 L113.4 207.7 L110.0 210.0 L106.4 212.2 L102.7 213.8 L99.0 214.7 L95.3 214.4 L91.8 213.2 L88.5 211.0 L85.5 208.1 L82.8 205.0 L80.1 202.0 L77.4 199.5 L74.6 197.6 L71.5 196.6 L68.0 196.2 L64.1 196.3 L60.0 196.6 L55.8 196.7 L51.8 196.3 L48.1 195.1 L45.1 193.1 L42.7 190.3 L40.9 186.7 L39.7 182.8 L38.9 178.7 L38.1 174.7 L37.0 171.2 L35.5 168.2 L33.3 165.7 L30.5 163.6 L27.1 161.8 L23.4 160.0 L19.7 158.0 L16.4 155.6 L13.9 152.8 L12.2 149.5 L11.6 145.8 L11.8 141.9 L12.8 137.9 L14.1 133.9 L15.3 130.1 L16.2 126.5 L16.4 123.2 L15.7 119.9 L14.3 116.7 L12.3 113.4 L10.0 110.0 L7.8 106.4 L6.2 102.7 L5.3 99.0 L5.6 95.3 L6.8 91.8 L9.0 88.5 L11.9 85.5 L15.0 82.8 L18.0 80.1 L20.5 77.4 L22.4 74.6 L23.4 71.5 L23.8 68.0 L23.7 64.1 L23.4 60.0 L23.3 55.8 L23.7 51.8 L24.9 48.1 L26.9 45.1 L29.7 42.7 L33.3 40.9 L37.2 39.7 L41.3 38.9 L45.3 38.1 L48.8 37.0 L51.8 35.5 L54.3 33.3 L56.4 30.5 L58.2 27.1 L60.0 23.4 L62.0 19.7 L64.4 16.4 L67.2 13.9 L70.5 12.2 L74.2 11.6 L78.1 11.8 L82.1 12.8 L86.1 14.1 L89.9 15.3 L93.5 16.2 L96.8 16.4 L100.1 15.7 L103.3 14.3 L106.6 12.3 L110.0 10.0 L113.6 7.8 L117.3 6.2 L121.0 5.3 L124.7 5.6 L128.2 6.8 L131.5 9.0 L134.5 11.9 L137.2 15.0 L139.9 18.0 L142.6 20.5 L145.4 22.4 L148.5 23.4 L152.0 23.8 L155.9 23.7 L160.0 23.4 L164.2 23.3 L168.2 23.7 L171.9 24.9 L174.9 26.9 L177.3 29.7 L179.1 33.3 L180.3 37.2 L181.1 41.3 L181.9 45.3 L183.0 48.8 L184.5 51.8 L186.7 54.3 L189.5 56.4 L192.9 58.2 L196.6 60.0 L200.3 62.0 L203.6 64.4 L206.1 67.2 L207.8 70.5 L208.4 74.2 L208.2 78.1 L207.2 82.1 L205.9 86.1 L204.7 89.9 L203.8 93.5 L203.6 96.8 L204.3 100.1 L205.7 103.3 L207.7 106.6 L210.0 110.0 Z' fill='none' stroke='%23a8d8ff' stroke-width='2.6'/%3E%3Cpath d='M210.0 110.0 L207.7 113.4 L205.7 116.7 L204.3 119.9 L203.6 123.2 L203.8 126.5 L204.7 130.1 L205.9 133.9 L207.2 137.9 L208.2 141.9 L208.4 145.8 L207.8 149.5 L206.1 152.8 L203.6 155.6 L200.3 158.0 L196.6 160.0 L192.9 161.8 L189.5 163.6 L186.7 165.7 L184.5 168.2 L183.0 171.2 L181.9 174.7 L181.1 178.7 L180.3 182.8 L179.1 186.7 L177.3 190.3 L174.9 193.1 L171.9 195.1 L168.2 196.3 L164.2 196.7 L160.0 196.6 L155.9 196.3 L152.0 196.2 L148.5 196.6 L145.4 197.6 L142.6 199.5 L139.9 202.0 L137.2 205.0 L134.5 208.1 L131.5 211.0 L128.2 213.2 L124.7 214.4 L121.0 214.7 L117.3 213.8 L113.6 212.2 L110.0 210.0 L106.6 207.7 L103.3 205.7 L100.1 204.3 L96.8 203.6 L93.5 203.8 L89.9 204.7 L86.1 205.9 L82.1 207.2 L78.1 208.2 L74.2 208.4 L70.5 207.8 L67.2 206.1 L64.4 203.6 L62.0 200.3 L60.0 196.6 L58.2 192.9 L56.4 189.5 L54.3 186.7 L51.8 184.5 L48.8 183.0 L45.3 181.9 L41.3 181.1 L37.2 180.3 L33.3 179.1 L29.7 177.3 L26.9 174.9 L24.9 171.9 L23.7 168.2 L23.3 164.2 L23.4 160.0 L23.7 155.9 L23.8 152.0 L23.4 148.5 L22.4 145.4 L20.5 142.6 L18.0 139.9 L15.0 137.2 L11.9 134.5 L9.0 131.5 L6.8 128.2 L5.6 124.7 L5.3 121.0 L6.2 117.3 L7.8 113.6 L10.0 110.0 L12.3 106.6 L14.3 103.3 L15.7 100.1 L16.4 96.8 L16.2 93.5 L15.3 89.9 L14.1 86.1 L12.8 82.1 L11.8 78.1 L11.6 74.2 L12.2 70.5 L13.9 67.2 L16.4 64.4 L19.7 62.0 L23.4 60.0 L27.1 58.2 L30.5 56.4 L33.3 54.3 L35.5 51.8 L37.0 48.8 L38.1 45.3 L38.9 41.3 L39.7 37.2 L40.9 33.3 L42.7 29.7 L45.1 26.9 L48.1 24.9 L51.8 23.7 L55.8 23.3 L60.0 23.4 L64.1 23.7 L68.0 23.8 L71.5 23.4 L74.6 22.4 L77.4 20.5 L80.1 18.0 L82.8 15.0 L85.5 11.9 L88.5 9.0 L91.8 6.8 L95.3 5.6 L99.0 5.3 L102.7 6.2 L106.4 7.8 L110.0 10.0 L113.4 12.3 L116.7 14.3 L119.9 15.7 L123.2 16.4 L126.5 16.2 L130.1 15.3 L133.9 14.1 L137.9 12.8 L141.9 11.8 L145.8 11.6 L149.5 12.2 L152.8 13.9 L155.6 16.4 L158.0 19.7 L160.0 23.4 L161.8 27.1 L163.6 30.5 L165.7 33.3 L168.2 35.5 L171.2 37.0 L174.7 38.1 L178.7 38.9 L182.8 39.7 L186.7 40.9 L190.3 42.7 L193.1 45.1 L195.1 48.1 L196.3 51.8 L196.7 55.8 L196.6 60.0 L196.3 64.1 L196.2 68.0 L196.6 71.5 L197.6 74.6 L199.5 77.4 L202.0 80.1 L205.0 82.8 L208.1 85.5 L211.0 88.5 L213.2 91.8 L214.4 95.3 L214.7 99.0 L213.8 102.7 L212.2 106.4 L210.0 110.0 Z' fill='none' stroke='%237fb2e8' stroke-width='1.6' opacity='.75'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(168,216,255,.55));
}
.lace-waves .portrait, .lace-waves .portrait-placeholder {
  border-color: #a8d8ff !important; box-shadow: 0 0 26px rgba(168,216,255,.45) !important; }
@keyframes laceTurn { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
label { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
input, textarea, select {
  width: 100%; padding: 12px 14px;
  background: rgba(4,6,15,.6); color: var(--ivory);
  border: 1px solid rgba(176,132,71,.18); border-radius: 4px;
  font-family: var(--sans); font-size: .92rem; font-weight: 300;
  outline: none; transition: border-color .3s;
}
input:focus, textarea:focus { border-color: var(--gold); }
textarea { resize: vertical; min-height: 100px; }
input[type=file] { padding: 9px; font-size: .8rem; }

.error { color: #e08b8b; font-size: .82rem; margin-top: 12px; min-height: 1.2em; }
.success { color: #9fd8a8; font-size: .82rem; margin-top: 12px; }

/* ---------- starfield canvas ---------- */
#sky { position: fixed; inset: 0; z-index: 0; }

/* dog star */
.dogstar {
  position: absolute; z-index: 5; cursor: pointer;
  width: 26px; height: 26px; margin: -13px;
  filter: drop-shadow(0 0 6px rgba(233,216,166,.9)) drop-shadow(0 0 18px rgba(176,132,71,.55));
  animation: twinkle 3.4s ease-in-out infinite;
  transition: transform .3s;
}
.dogstar:hover { transform: scale(1.6); }
@keyframes twinkle {
  0%, 100% { opacity: .75; } 50% { opacity: 1; }
}

/* hover card */
#starcard {
  /* above the storybook text: a dog's face always wins the foreground */
  position: fixed; z-index: 78; width: 270px; padding: 18px;
  pointer-events: none; opacity: 0; transition: opacity .25s;
  text-align: center;
}
#starcard.show { opacity: 1; pointer-events: auto; }
/* only a touch screen needs it: a mouse dismisses this by moving away */
#starcard .card-x { display: none; }
/* On a touch screen the card no longer chases the star around: a tap is not
   a hover, and a panel that lands somewhere new every time is hard to read
   and easy to lose. It settles in one steady place, just under the top bar. */
@media (max-width: 640px), (hover: none) {
  #starcard {
    left: 50% !important; right: auto !important;
    top: 50% !important; bottom: auto !important;
    transform: translate(-50%, -50%) scale(.96);
    width: min(310px, calc(100vw - 32px));
    transition: opacity .25s, transform .3s;
    /* the sky dims all around it, so the dog is the only thing being looked
       at. One enormous soft shadow does this without an extra element, and
       it never swallows taps because a shadow is not a surface. */
    box-shadow: 0 0 0 100vmax rgba(4,6,16,.62), 0 18px 50px rgba(0,0,0,.6);
  }
  #starcard.show { transform: translate(-50%, -50%) scale(1); }
  #starcard .card-x {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 6px; right: 6px; width: 34px; height: 34px;
    border: none; border-radius: 50%; background: none; cursor: pointer;
    color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 0;
    opacity: .7; transition: opacity .2s, color .2s;
  }
  #starcard .card-x:active { opacity: 1; color: var(--champagne); }
}
#starcard img.pic, .portrait {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold); box-shadow: 0 0 25px rgba(176,132,71,.35);
}
.portrait-placeholder {
  width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid var(--gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem; background: var(--night-2);
}
#starcard h3 { font-size: 1.5rem; margin-top: 10px; color: var(--champagne); }
#starcard .years { font-size: .72rem; letter-spacing: .25em; color: var(--muted); margin: 3px 0 8px; }
/* three lines at most, whatever the story's length: the card must never
   grow past the bottom of a phone */
#starcard p {
  color: var(--ivory); line-height: 1.55; font-style: italic;
  font-family: var(--serif); font-size: .98rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 10; text-align: center;
  padding: 20vh 24px 60px; pointer-events: none;
}
.hero > * { pointer-events: auto; }
.hero .eyebrow { font-size: .72rem; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.08; margin: 18px 0; font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--champagne); }
.hero p.lead {
  font-family: var(--serif); font-style: italic; font-size: 1.25rem;
  color: var(--muted); max-width: 520px; margin: 0 auto 34px;
}

/* ---------- generic page container ---------- */
.container { position: relative; z-index: 10; max-width: 1060px; margin: 0 auto; padding: 130px 24px 80px; }
/* Vault, Profile and a memorial were three near-identical dark pages with a
   centred serif title. Each wears its own badge and accent, so a glance is
   enough to know where you are. */
.page-badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.badge-vault {
  border: 1px solid rgba(154,163,189,.55);
  background: radial-gradient(circle at 38% 32%, rgba(120,130,170,.35), rgba(35,39,51,.9));
  box-shadow: 0 0 26px rgba(140,150,190,.28);
}
.badge-profile {
  border: 1px solid rgba(154,163,189,.55);
  background: radial-gradient(circle at 38% 32%, rgba(120,130,170,.35), rgba(35,39,51,.9));
  box-shadow: 0 0 26px rgba(140,150,190,.28);
}
.page-title { text-align: center; font-size: clamp(2rem, 5vw, 3.2rem); }
.page-sub { text-align: center; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.15rem; margin-top: 10px; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 54px; }
.tier { padding: 38px 28px; text-align: center; position: relative; transition: transform .35s, box-shadow .35s; }
.tier:hover { transform: translateY(-6px); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(176,132,71,.12); }
.tier .tname { font-family: var(--serif); font-size: 1.7rem; color: var(--champagne); }
.tier .price { font-size: 2.4rem; font-family: var(--serif); margin: 14px 0 2px; }
.tier .price span { font-size: .85rem; color: var(--muted); font-family: var(--sans); }
.tier ul { list-style: none; margin: 22px 0 30px; text-align: left; }
.tier li { font-size: .84rem; color: var(--ivory); padding: 7px 0; border-bottom: 1px solid rgba(176,132,71,.08); }
.tier li::before { content: '✦ '; color: var(--gold); }
.tier.featured { border-color: var(--gold); }
.tier .ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #8f6a34, #d6b285); color: #171204;
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 600;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}

/* ---------- dashboard ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.card { padding: 30px; }
.card h2 { color: var(--champagne); font-size: 1.6rem; margin-bottom: 6px; }
.card .hint { font-size: .8rem; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: .95rem; }

.tabs { display: flex; gap: 4px; margin: 26px 0 18px; border-bottom: 1px solid rgba(176,132,71,.15); }
.tabs button {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 16px; border-bottom: 2px solid transparent; transition: all .3s;
}
.tabs button.active { color: var(--champagne); border-bottom-color: var(--gold); }
.tabs button .badge {
  background: var(--gold); color: #171204; border-radius: 8px; padding: 1px 7px;
  font-size: .62rem; margin-left: 6px; font-weight: 600;
}

.memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.memgrid .mem { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(176,132,71,.15); }
.memgrid img, .memgrid video { width: 100%; height: 150px; object-fit: cover; display: block; }
.mem .cap { font-size: .72rem; padding: 8px 10px; color: var(--muted); background: rgba(4,6,15,.7); }
.mem .del {
  position: absolute; top: 6px; right: 6px; background: rgba(4,6,15,.75); color: var(--muted);
  border: none; border-radius: 3px; cursor: pointer; padding: 3px 8px; font-size: .7rem;
}
.mem .del:hover { color: #e08b8b; }
.mem-text { padding: 16px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.6; }

/* ---------- letters ---------- */
.letter {
  padding: 26px 30px; margin-bottom: 18px; border-radius: 8px; line-height: 1.75;
  white-space: pre-wrap; font-size: .93rem;
}
.letter.to { background: rgba(18,26,53,.5); border: 1px solid rgba(154,163,192,.15); }
.letter.from {
  background: linear-gradient(160deg, rgba(38,32,12,.7), rgba(18,26,53,.6));
  border: 1px solid var(--glass-border);
  font-family: var(--serif); font-size: 1.12rem;
  box-shadow: 0 0 40px rgba(176,132,71,.07) inset;
}
.letter .meta { font-family: var(--sans); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 90; background: rgba(4,6,15,.8);
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px);
}
.modal-back.open { display: flex; }
.modal { position: relative; max-width: 480px; width: 100%; padding: 36px; max-height: 88vh; overflow-y: auto; }
/* every popup carries its own little way out, top-right */
.m-x {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
  padding: 5px; transition: color .25s;
}
.m-x:hover { color: var(--champagne); }

footer {
  position: relative; z-index: 10; text-align: center; padding: 40px 20px 30px;
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(154,163,192,.5);
}

/* ---------- phones: buttons never break into two lines ---------- */
@media (max-width: 640px) {
  .btn {
    display: block; width: 100%;
    font-size: .72rem; letter-spacing: .12em;
    padding: 14px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .btn-sm { font-size: .66rem; padding: 12px 10px; }
  /* iOS auto-zooms (and refuses to zoom back) when a focused field is under
     16px: keep every input at 16px on phones so focusing never zooms */
  input, textarea, select { font-size: 16px; }
}

/* ---------- the giving-back badge: letters that do good ---------- */
.charity-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 14px;
  border: 1px solid rgba(176,132,71,.42);
  background: linear-gradient(135deg, rgba(176,132,71,.16), rgba(120,80,40,.08));
  box-shadow: 0 0 20px rgba(176,132,71,.14);
  font-family: var(--serif); font-style: italic; color: var(--champagne);
  font-size: .9rem; line-height: 1.5; text-align: left;
}
.charity-badge .paw {
  font-size: 1.5rem; flex: none;
  filter: drop-shadow(0 0 8px rgba(176,132,71,.7));
}
.charity-badge b { color: var(--ivory); font-weight: 500; }
.charity-badge.sm { font-size: .78rem; padding: 9px 14px; gap: 9px; }
.charity-badge.sm .paw { font-size: 1.15rem; }
@media (max-width: 640px) {
  .charity-badge { font-size: .82rem; padding: 10px 14px; gap: 10px; }
  .charity-badge .paw { font-size: 1.25rem; }
}

/* ---------- portrait frames: twelve rings for a beloved face ---------- */
.pf-gold      { border-color: #d6b285 !important; box-shadow: 0 0 26px rgba(214,178,133,.65) !important; }
.pf-rosegold  { border-color: #e8b4a0 !important; box-shadow: 0 0 26px rgba(232,180,160,.6) !important; }
.pf-silver    { border-color: #cfd6e4 !important; box-shadow: 0 0 26px rgba(207,214,228,.55) !important; }
.pf-bronze    { border-color: #b0803f !important; box-shadow: 0 0 30px rgba(176,128,63,.7) !important; }
.pf-royal     { border-color: #b9a0ff !important; box-shadow: 0 0 26px rgba(185,160,255,.6) !important; }
.pf-ocean     { border-color: #7fc4e8 !important; box-shadow: 0 0 26px rgba(127,196,232,.6) !important; }
.pf-emerald   { border-color: #8fe3ae !important; box-shadow: 0 0 26px rgba(143,227,174,.6) !important; }
.pf-ruby      { border-color: #f0879a !important; box-shadow: 0 0 26px rgba(240,135,154,.6) !important; }
.pf-double    { border-color: #d6b285 !important;
                box-shadow: 0 0 0 4px rgba(6,9,22,.9), 0 0 0 6px #d6b285, 0 0 30px rgba(214,178,133,.6) !important; }
.pf-stardust  { border-style: dashed !important; border-color: #e9d8a6 !important;
                box-shadow: 0 0 30px rgba(233,216,166,.7) !important; }
.pf-rainbow   { border: 4px solid transparent !important;
                /* a thicker ring and truly saturated hues, so every colour
                   of the rainbow reads clearly as it circles the face */
                /* !important: .star-halo's own background rule outranks this
                   selector and used to flatten the ring to plain night blue */
                background: linear-gradient(var(--night-2), var(--night-2)) padding-box,
                            conic-gradient(from 0deg,
                              #ff4d6d, #ff9f43, #ffe066, #51d88a,
                              #38b6ff, #7d5fff, #d05fff, #ff4d6d) border-box !important;
                box-shadow: 0 0 26px rgba(190,140,255,.45) !important; }
.pf-midnight  { border-color: #3d4a7a !important; box-shadow: 0 0 30px rgba(90,110,190,.65) !important; }

/* ---------- angel wings: feathered light holding a beloved face ----------
   one hand-drawn wing silhouette (SVG mask), plumage painted by gradient,
   breathing softly. Colour variants only swap the CSS variables. */
.wings {
  position: relative; display: inline-block;
  --wingmask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20160%20200%27%3E%3Cg%20fill%3D%27%23fff%27%3E%3Cpath%20d%3D%27M140%2C62%20C108.7%2C26.6%2047.2%2C1.9%2010%2C16%20C30%2C50.3%2093.3%2C69.8%20140%2C62%20Z%27%2F%3E%3Cpath%20d%3D%27M140%2C62%20C97.6%2C43.8%2032.2%2C46.1%204%2C72%20C35.7%2C93.5%20100.8%2C86.2%20140%2C62%20Z%27%2F%3E%3Cpath%20d%3D%27M140%2C62%20C93.8%2C63.8%2033.3%2C92.5%2016%2C126%20C53.3%2C131.3%20111.8%2C98.6%20140%2C62%20Z%27%2F%3E%3Cpath%20d%3D%27M140%2C62%20C98.1%2C82.3%2049.6%2C131.8%2042%2C168%20C77.5%2C157.6%20123.1%2C105.3%20140%2C62%20Z%27%2F%3E%3Cpath%20d%3D%27M140%2C62%20C109.4%2C95.1%2080%2C156.8%2082%2C192%20C109.5%2C170%20135.8%2C106.9%20140%2C62%20Z%27%2F%3E%3Cellipse%20cx%3D%27124%27%20cy%3D%2776%27%20rx%3D%2734%27%20ry%3D%2746%27%20transform%3D%27rotate%2824%20124%2076%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wgrad: linear-gradient(175deg, #ffffff, #e3eaff 55%, #b9c8f0);
  --wglow: rgba(223,231,255,.8);
  --wedge: #eef2ff;
}
.wings::before, .wings::after {
  content: ''; position: absolute; top: 48.5%; width: 94%; height: 142%;
  /* a bright ridge of light runs along the wing's leading edge, then the
     plumage deepens toward the tips: reads as real feathered volume */
  background:
    linear-gradient(115deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 34%),
    var(--wgrad);
  -webkit-mask: var(--wingmask) no-repeat center / contain;
          mask: var(--wingmask) no-repeat center / contain;
  filter: drop-shadow(0 0 5px var(--wglow)) drop-shadow(0 0 22px var(--wglow));
  pointer-events: none; z-index: 0;
  /* NB: keep transform-origin centred — flipping the right wing around an
     off-centre origin shifts the whole box sideways */
}
.wings::before {
  right: 58%;
  transform: translateY(-53%) rotate(8deg);
  animation: wingLift 5.6s ease-in-out infinite;
}
.wings::after {
  left: 58%;
  transform: translateY(-53%) scaleX(-1) rotate(8deg);
  animation: wingLiftR 5.6s ease-in-out infinite;
}
@keyframes wingLift  { 0%,100% { transform: translateY(-53%) rotate(8deg); } 50% { transform: translateY(-55.5%) rotate(3deg); } }
@keyframes wingLiftR { 0%,100% { transform: translateY(-53%) scaleX(-1) rotate(8deg); } 50% { transform: translateY(-55.5%) scaleX(-1) rotate(3deg); } }
.wings .portrait, .wings .portrait-placeholder {
  position: relative; z-index: 1;
  border-color: var(--wedge) !important;
  box-shadow: 0 0 26px var(--wglow) !important;
}
.wings .portrait-placeholder { background: var(--night-2); }
.wings-gold    { --wgrad: linear-gradient(175deg,#fff6dd,#ffd9a0 55%,#d8a55c); --wglow: rgba(255,217,160,.75); --wedge:#ffd9a0; }
.wings-rose    { --wgrad: linear-gradient(175deg,#ffe9f1,#ffb9d0 55%,#ef8fac); --wglow: rgba(255,185,208,.75); --wedge:#ffb9d0; }
.wings-ice     { --wgrad: linear-gradient(175deg,#f2faff,#a8d8ff 55%,#7fb2e8); --wglow: rgba(168,216,255,.75); --wedge:#a8d8ff; }
.wings-violet  { --wgrad: linear-gradient(175deg,#f2eaff,#c9a8ff 55%,#9d7fe2); --wglow: rgba(201,168,255,.75); --wedge:#c9a8ff; }
.wings-emerald { --wgrad: linear-gradient(175deg,#eafff3,#a8ffc9 55%,#72d99a); --wglow: rgba(168,255,201,.7); --wedge:#a8ffc9; }

/* ---------- the numbered stepper ----------
   Connected dots, the classic multi-step form marking: one shared component,
   used by the "add a star" wizard and by the days-you-share popup, so a person
   meets the same idea of progress everywhere. */
.stepper { display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; width: 100%; }
.stepper .sdot {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(176,132,71,.42); background: rgba(8,12,26,.6);
  color: var(--muted); font-family: var(--sans); font-size: .78rem; line-height: 1;
  transition: border-color .3s, color .3s, background .3s, box-shadow .3s;
}
.stepper .sdot.on {
  border-color: var(--gold); color: var(--champagne);
  box-shadow: 0 0 14px rgba(214,178,133,.5);
}
.stepper .sdot.done {
  border-color: var(--gold);
  background: linear-gradient(135deg, #d6b285, #b0803f);
  color: #2c2013;
}
.stepper .sline {
  flex: 1 1 auto; height: 2px; min-width: 14px; max-width: 60px;
  background: rgba(176,132,71,.28); transition: background .3s;
}
.stepper .sline.done { background: var(--gold); }
@media (max-width: 640px) {
  .stepper .sdot { width: 26px; height: 26px; font-size: .7rem; }
  .stepper .sline { min-width: 8px; }
}

/* ---------- no lonely last words ----------
   A single word alone on the last line reads as a mistake. `balance` spreads
   short passages evenly across their lines (headings, buttons, coach marks);
   `pretty` keeps longer text from leaving one word stranded. Browsers that do
   not know either property simply ignore them. */
h1, h2, h3, .page-title, .page-sub, .btn, .wtitle, .wsub,
.sec-title, .dd-t, .dd-s, .ib-writer-t, .mem-c-t, .sbx-h {
  text-wrap: balance;
}
p, .hint, .story-text, .ib-text, .ib-snip, .sbx p, .mem-text {
  text-wrap: pretty;
}


/* ---------- the constellation ---------- */
#conste {
  position: fixed; z-index: 130; right: 26px; bottom: 118px;
  width: 250px; padding: 16px 18px 13px; border-radius: 16px; text-align: center;
  background: linear-gradient(168deg, rgba(17,22,44,.96) 0%, rgba(9,13,28,.97) 100%);
  border: 1px solid rgba(176,132,71,.3);
  box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 26px rgba(176,132,71,.16);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
  cursor: pointer;
}
#conste.on { opacity: 1; visibility: visible; transform: none; }
#conste .cn-t {
  font-family: var(--sans); font-size: .5rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
#conste .cn-sky { display: block; width: 100%; height: auto; margin: 10px 0 4px; }
#conste .cn-line {
  fill: none; stroke: rgba(233,216,166,.5); stroke-width: .8;
  stroke-linecap: round; stroke-linejoin: round;
  /* the line reaches across to the new point rather than simply being there */
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: cnReach 1.6s ease-out .25s forwards;
}
@keyframes cnReach { to { stroke-dashoffset: 0; } }
#conste .cn-dot { fill: rgba(207,212,234,.18); transition: fill .5s ease; }
#conste .cn-dot.on { fill: #ffe9c0; filter: drop-shadow(0 0 5px rgba(233,216,166,.9)); }
/* the one just lit arrives: a small bloom, once */
#conste .cn-dot.new { animation: cnBloom 1.5s ease-out .5s both; transform-origin: center; }
@keyframes cnBloom {
  0%   { r: 3.4; filter: drop-shadow(0 0 0 rgba(233,216,166,0)); }
  40%  { r: 6.4; filter: drop-shadow(0 0 16px rgba(255,240,200,1)); }
  100% { r: 3.4; filter: drop-shadow(0 0 5px rgba(233,216,166,.9)); }
}
#conste .cn-say {
  font-family: var(--serif); font-style: italic; font-size: .92rem;
  color: #e9e6dc; line-height: 1.5; min-height: 1.4em;
}
#conste .cn-n {
  margin-top: 8px; font-family: var(--sans); font-size: .5rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 900px) {
  #conste { right: 14px; left: 14px; width: auto; bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  #conste .cn-line { animation: none; stroke-dashoffset: 0; }
  #conste .cn-dot.new { animation: none; }
}

/* On a page it is not a moment, it is simply there: no floating, no fading,
   no bowing out after five seconds. Same drawing, at rest. */
/* `#conste.cn-still`, not `.cn-panel.cn-still`: the shared look is hung on
   the id, and an id outranks any number of classes. The panel was inheriting
   the floating card's fixed position and sitting over the page. */
#conste.cn-still {
  position: static; transform: none; opacity: 1; visibility: visible;
  width: auto; max-width: 300px; margin: 26px auto 0; cursor: default;
}
#conste.cn-still .cn-line { animation: none; stroke-dashoffset: 0; }