/* ════════════════════════════════════════════════════════════
   LE MIAU MEMORIALS — SHARED STYLESHEET ✨
   Elegant "celestial" redesign. All colors/fonts come from
   CSS variables set by theme-default.css (fallback) and by
   the active JSON theme (see config.js + theme-loader.js).

   Sections:
     1.  Base & background
     2.  Header (logo, nav, language)
     3.  Layout grid & cards
     4.  Hero
     5.  Photos & frames
     6.  Memories
     7.  Timeline (career)
     8.  Board / directors
     9.  Two-column minis, lists, KPIs
     10. Letter & seals
     11. Footer
     12. Reveal-on-scroll
     13. Angel cats 🐈🪽 (sprite + animations)
     14. Responsive
   ════════════════════════════════════════════════════════════ */

/* ── 1. BASE & BACKGROUND ─────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-base);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Soft glows floating over the base gradient */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% 8%,  var(--glow-a), transparent 62%),
    radial-gradient(820px 480px at 88% 12%, var(--glow-b), transparent 62%),
    radial-gradient(1000px 560px at 50% 96%, var(--glow-c), transparent 64%);
}

/* A whisper of stars */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--stars-opacity);
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px,  var(--gold-line) 55%, transparent 56%),
    radial-gradient(1.1px 1.1px at 128px 92px, rgba(255,255,255,0.75) 55%, transparent 56%),
    radial-gradient(1.6px 1.6px at 212px 42px, var(--gold-line) 55%, transparent 56%),
    radial-gradient(1px 1px at 74px 156px,     rgba(255,255,255,0.65) 55%, transparent 56%),
    radial-gradient(1.3px 1.3px at 178px 188px, var(--gold-line) 55%, transparent 56%);
  background-size: 260px 240px;
}

a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--gold); }

::selection { background: var(--gold-line); }

.wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding: 26px 16px 80px;
  position: relative;
}

/* ── 2. HEADER ────────────────────────────────────────────── */
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 4px 24px;
}

.logo { display: flex; align-items: center; gap: 12px; min-width: 0; }

.paw {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.55), transparent 58%),
    linear-gradient(135deg, var(--accent), var(--gold));
  box-shadow: var(--shadow-soft), 0 0 0 4px var(--chip-bg);
}
.paw span { font-size: 21px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }

.logo h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.logo p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 52vw;
}

.right-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.tiny-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.chip {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease;
}
.chip:hover { background: var(--chip-active); border-color: var(--gold-line); }
.chip.sibling { border-color: var(--gold-line); color: var(--accent-deep); }

/* Language toggle — segmented pill */
.lang {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lang button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 200ms ease;
}
.lang button.active {
  background: var(--chip-active);
  border-color: var(--gold-line);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

/* ── 3. LAYOUT GRID & CARDS ───────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
/* hairline of gold light along each card's top edge */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  pointer-events: none;
}

.pad { padding: 26px; }

.span-all { grid-column: 1 / -1; }

/* ── 4. HERO ──────────────────────────────────────────────── */
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 52px);
  line-height: 1.08;
  letter-spacing: 0.2px;
}
.hero-title .name {
  color: var(--accent-deep);
  font-style: italic;
  font-weight: 700;
}

.sub {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.sub b { color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tag {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.tag b { color: var(--ink); }

.sparkles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.spark {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px dashed var(--gold-line);
  background: var(--card-2);
  color: var(--ink-soft);
  font-size: 13px;
}

/* ── 5. PHOTOS & FRAMES ───────────────────────────────────── */
.photo {
  min-height: 440px;
  position: relative;
  background: var(--photo-fallback);
}
/* Crossfade photo layers (created by carousel.js) */
.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1100ms ease;
  z-index: 0;
}

/* Elegant inner mat — a fine line inside every photo */
.frame {
  position: absolute;
  inset: 11px;
  border: 1px solid var(--frame-line);
  border-radius: 16px;
  z-index: 1;
  pointer-events: none;
}

.photo .label {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--seal-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.photo .label h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.photo .label p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; }

/* Section headings — serif with a fading gold rule */
.section-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

/* ── 6. MEMORIES ──────────────────────────────────────────── */
.memories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
/* four memories → tidy 2×2 on wide screens */
.memories.four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .memories.four { grid-template-columns: 1fr; } }
.memory {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.memory p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.memory p b { color: var(--ink); }
.memory small {
  display: block;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 12.5px;
  font-style: italic;
}

/* ── 7. TIMELINE (career) ─────────────────────────────────── */
.timeline {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 26px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--gold-line), var(--gold-line) 82%, transparent);
}
.timeline li {
  position: relative;
  padding: 8px 0 8px 6px;
  color: var(--ink-soft);
  font-size: 14px;
}
.timeline li b { color: var(--ink); }
.timeline li::before {
  content: "";
  position: absolute;
  left: -25px; top: 16px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--seal-bg);
}
.timeline li:last-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--seal-bg), 0 0 14px 2px var(--gold-line);
}

/* ── 8. BOARD / DIRECTORS ─────────────────────────────────── */
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.director {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.headshot {
  height: 190px;
  position: relative;
  background: var(--photo-fallback);
}
.director .meta { padding: 14px 16px 16px; }
.director h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.director p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.director p b { color: var(--ink); }

/* ── 9. MINIS, LISTS & KPIs ───────────────────────────────── */
.cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.mini {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.mini h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.list li { margin: 7px 0; }
.list li::marker { color: var(--gold); }
.list b { color: var(--ink); }

.kpi { display: grid; gap: 8px; margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.kpi .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.kpi .row b { color: var(--ink); text-align: right; }

/* Mentor / duo layout */
.mentor-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}
.photo-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--photo-fallback);
  position: relative;
  min-height: 290px;
  overflow: hidden;
}
.caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: var(--seal-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 13px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.caption b { display: block; font-size: 14px; color: var(--ink); }
.caption span { color: var(--ink-soft); font-size: 12.5px; }

/* ── 10. LETTER & SEALS ───────────────────────────────────── */
.letter {
  background: var(--letter-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
}
.letter p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.letter p b, .letter p i { color: var(--ink); }
.letter footer {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 13px;
  font-style: italic;
  text-align: right;
}

/* Big farewell letter gets a drop cap */
#letter .letter p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding: 4px 8px 0 0;
  color: var(--accent-deep);
}

.seal {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--seal-bg);
  border: 1px dashed var(--gold-line);
  color: var(--ink-soft);
  font-size: 13px;
}
.seal.update { border-style: solid; }

/* ── 10b. PHOTO ARCHIVE (gallery) ─────────────────────────── */
.gallery-grid {
  columns: 3 240px;
  column-gap: 14px;
}
.g-item {
  break-inside: avoid;
  margin: 0 0 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
}
.g-item img {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.g-cap {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
}

/* ── 10c. GUESTBOOK ───────────────────────────────────────── */
.gb-list { display: grid; gap: 10px; margin-bottom: 18px; }
.gb-comment p { white-space: pre-wrap; }
.gb-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 14px;
  margin: 0 0 6px;
}
.gb-form { display: grid; gap: 12px; }
.gb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gb-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 700;
}
.gb-field input,
.gb-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  resize: vertical;
  min-width: 0;
}
.gb-field input:focus,
.gb-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-line);
}
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gb-submit {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chip-active);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 11px 22px;
  box-shadow: var(--shadow-soft);
  transition: filter 200ms ease;
}
.gb-submit:hover { filter: brightness(1.04); }
.gb-submit:disabled { opacity: 0.55; cursor: default; }
.gb-status { font-size: 13px; color: var(--ink-soft); font-style: italic; }

/* ── 11. FOOTER ───────────────────────────────────────────── */
.footer {
  margin-top: 26px;
  padding: 14px 6px 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
}

/* ── 12. REVEAL-ON-SCROLL (added by main.js) ──────────────── */
body.reveal-ready .card { opacity: 0; transform: translateY(16px); }
body.reveal-ready .card.in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body.reveal-ready .card { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── 13. ANGEL CATS 🐈🪽 ───────────────────────────────────── */
#angel-cats {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4000;
}
.acat {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
}
.acat .sprite {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(30, 24, 14, 0.25));
  transition: transform 260ms ease; /* smooth flips */
}

/* tail — always swaying */
.acat .tail {
  animation: acat-tail 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 92% 92%;
}
@keyframes acat-tail {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(-9deg); }
}

/* legs — gallop while running */
.acat .leg {
  transform-box: fill-box;
  transform-origin: 50% 8%;
}
.acat.running .leg-f1, .acat.running .leg-b2 { animation: acat-gallop 0.34s ease-in-out infinite; }
.acat.running .leg-f2, .acat.running .leg-b1 { animation: acat-gallop 0.34s ease-in-out infinite; animation-delay: 0.17s; }
@keyframes acat-gallop {
  0%, 100% { transform: rotate(26deg); }
  50%      { transform: rotate(-22deg); }
}
.acat.running .tail { animation-duration: 0.7s; }

/* body bob while running */
.acat.running .torso { animation: acat-bob 0.34s ease-in-out infinite; }
@keyframes acat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.4px); }
}

/* wings & halo — hidden until flying */
.acat .wing {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: 94% 78%;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.acat .halo {
  opacity: 0;
  transition: opacity 500ms ease;
}
.acat.flying .wing { opacity: 0.96; transform: scale(1); }
.acat.flying .halo { opacity: 0.95; animation: acat-halo 2.2s ease-in-out infinite; }
.acat.flying .wing-l { animation: acat-flap 0.5s ease-in-out infinite; }
.acat.flying .wing-r { animation: acat-flap-r 0.5s ease-in-out infinite; }
.acat.flying .leg { animation: none; transform: rotate(12deg); }
.acat.flying .torso { animation: none; }
@keyframes acat-flap {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50%      { transform: scale(1) rotate(24deg); }
}
@keyframes acat-flap-r {
  0%, 100% { transform: scale(1) rotate(6deg); }
  50%      { transform: scale(1) rotate(-24deg); }
}
@keyframes acat-halo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.6px); }
}

/* sitting / idle pause */
.acat.sitting .leg { animation: none; transform: rotate(0deg); }
.acat.sitting .torso { animation: none; }
.acat.sitting .sprite { transition: transform 260ms ease; }

/* sparkle trail while flying */
.acat-spark {
  position: absolute;
  font-size: 11px;
  pointer-events: none;
  animation: acat-spark 1.15s ease-out forwards;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(255, 240, 200, 0.9);
}
@keyframes acat-spark {
  0%   { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0;   transform: translateY(16px) scale(0.4); }
}

/* little heart when they boop */
.acat-heart {
  position: absolute;
  font-size: 15px;
  pointer-events: none;
  animation: acat-heart 1.3s ease-out forwards;
}
@keyframes acat-heart {
  0%   { opacity: 0;   transform: translateY(4px) scale(0.5); }
  20%  { opacity: 1;   transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0;   transform: translateY(-30px) scale(0.9); }
}

/* ── 14. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; }
  .photo { min-height: 340px; }
  .top { flex-direction: column; align-items: flex-start; }
  .right-controls { align-items: flex-start; width: 100%; }
  .tiny-nav, .lang { justify-content: flex-start; }
  .board-grid, .mentor-grid, .cols { grid-template-columns: 1fr; }
  .logo p { max-width: 92vw; }
  .pad { padding: 20px; }
  .photo-card { min-height: 260px; }
}
@media (max-width: 620px) {
  .gb-row { grid-template-columns: 1fr; }
  .gallery-grid { columns: 2 150px; }
}
@media (max-width: 390px) {
  .hero-title { font-size: 31px; }
  .section-title { font-size: 22px; }
}