/* ============================================================
   SALVATORE FAMILY — design tokens
   Palette: true black, white/silver ink and linework,
   red as the family's signature highlight (per the crest's gems),
   with a per-member sin accent (Envy / Pride / Wrath / ...)
   Display: Cinzel (inscribed, crest-like)
   Body: EB Garamond (elegant, readable)
   Utility: Cormorant, small-caps, wide tracking
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Upright:wght@500;600&family=Pirata+One&display=swap');

:root{
  --void:        #08080a;
  --panel:       #131316;
  --panel-raised:#1c1c20;
  --hairline:    rgba(220,220,228,0.14);
  --hairline-strong: rgba(220,220,228,0.30);

  --ink:         #f3f2f1;
  --ink-dim:     #b7b6ba;
  --ink-faint:   #77767c;

  --silver:        #c7c8d1;
  --silver-bright: #eceef4;
  --silver-dim:    #6c6c76;

  --red:        #9c2328;
  --red-bright: #dd4a4f;
  --red-dim:    #430f12;

  --envy:        #3f8f6a;
  --envy-bright: #6fc9a0;
  --envy-dim:    #1f4534;

  --pride:       #9a4fc9;
  --pride-bright:#c98ded;
  --pride-dim:   #472159;

  --wrath:       #a9312f;
  --wrath-bright:#e2635f;
  --wrath-dim:   #4a1615;

  --violet:        #7c6fd6;
  --violet-bright: #ab9fee;
  --violet-dim:    #372f66;

  --sin: var(--red);
  --sin-bright: var(--red-bright);
  --sin-dim: var(--red-dim);

  --serif-display: 'Cinzel', serif;
  --serif-gothic: 'Pirata One', serif;
  --serif-body: 'EB Garamond', serif;
  --serif-utility: 'Cormorant Upright', serif;

  --container: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.theme-envy{ --sin: var(--envy); --sin-bright: var(--envy-bright); --sin-dim: var(--envy-dim); }
body.theme-pride{ --sin: var(--pride); --sin-bright: var(--pride-bright); --sin-dim: var(--pride-dim); }
body.theme-wrath{ --sin: var(--wrath); --sin-bright: var(--wrath-bright); --sin-dim: var(--wrath-dim); }
body.theme-violet{ --sin: var(--violet); --sin-bright: var(--violet-bright); --sin-dim: var(--violet-dim); }

/* ambient texture: soft vignette + faint ember/ash drift */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(220,220,228,0.06), transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(156,35,40,0.10), transparent 70%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.7), transparent 60%);
}

.ash{ position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ash::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.ash span{
  position:absolute;
  bottom:-10px;
  width:3px; height:3px;
  border-radius:50%;
  background: var(--sin-bright);
  opacity:0.35;
  animation: drift linear infinite;
}
@keyframes drift{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.4; }
  90%{ opacity:0.2; }
  100%{ transform: translateY(-110vh) translateX(20px); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ash span{ animation: none; display:none; }
  *{ transition:none !important; animation-duration:0.001ms !important; }
}

a{ color: var(--sin-bright); text-decoration:none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible{ outline: 1px solid var(--silver-bright); outline-offset: 3px; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* ---------- nav ---------- */
.site-nav{
  border-bottom: 1px solid var(--hairline);
  background: rgba(11,8,16,0.85);
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 20;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--sin) 30%, transparent);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; }
.brand{
  font-family: var(--serif-display);
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--ink);
  display:flex; align-items:center; gap:10px;
}
.brand .glyph{ color: var(--silver); }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family: var(--serif-utility);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.nav-links a:hover, .nav-links a.active{ color: var(--red-bright); text-decoration:none; }
.nav-toggle{ display:none; }

.has-dropdown{ position:relative; }
.dropdown-trigger{
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; gap:5px;
  font-family: var(--serif-utility); font-size:15px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--ink-dim);
}
.dropdown-trigger:hover{ color: var(--red-bright); }
.dropdown-trigger .caret{ font-size:10px; transition: transform .2s ease; }
.dropdown-menu{
  position:absolute; top:100%; left:0; margin-top:16px;
  background: var(--panel); border:1px solid var(--hairline-strong);
  min-width:170px; display:none; flex-direction:column; z-index:30;
  max-height:70vh; overflow-y:auto;
}
.has-dropdown.open .dropdown-menu{ display:flex; }
.has-dropdown.open .caret{ transform: rotate(180deg); }
.dropdown-menu a{
  display:block; padding:13px 20px; font-size:14px; letter-spacing:0.05em;
  color: var(--ink-dim); border-top: 1px solid var(--hairline);
}
.dropdown-menu li:first-child a{ border-top:none; }
.dropdown-menu a:hover, .dropdown-menu a.active{ background: var(--panel-raised); color: var(--red-bright); }

@media (max-width: 720px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--panel);
    border-bottom:1px solid var(--hairline);
    max-height:0; overflow:hidden;
  }
  .nav-links.open{ max-height:400px; }
  .nav-links li{ border-top:1px solid var(--hairline); }
  .nav-links a{ display:block; padding:16px 32px; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--hairline-strong);
    color: var(--ink); width:40px; height:36px; border-radius:2px; cursor:pointer;
  }
  .dropdown-trigger{ width:100%; padding:16px 32px; justify-content:space-between; }
  .dropdown-menu{
    position:static; display:none; margin-top:0; border:none;
    background: rgba(0,0,0,0.2); min-width:0;
  }
  .has-dropdown.open .dropdown-menu{ display:flex; }
  .dropdown-menu a{ padding-left:48px; }
}

/* ---------- hero ---------- */
.hero{
  padding: 120px 0 90px;
  text-align:center;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; max-width:140vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--sin) 22%, transparent), transparent 68%);
  pointer-events:none; z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }
.hero .eyebrow{
  font-family: var(--serif-utility);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--sin-bright);
  margin: 0 0 22px;
}
.hero h1{
  font-family: var(--serif-gothic);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--ink);
  text-shadow: 0 0 40px color-mix(in srgb, var(--sin) 45%, transparent);
}
.hero .motto{
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-dim);
  max-width: 560px;
  margin: 0 auto;
}
.crest{
  width: 88px; height:88px; margin: 0 auto 28px;
  color: var(--silver);
}

/* ---------- sections ---------- */
section{ padding: 84px 0; position:relative; }
section + section{ border-top: 1px solid var(--hairline); position:relative; }
section + section::before{
  content:"";
  position:absolute; top:-4.5px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background: var(--void);
  border:1px solid var(--hairline-strong);
}
.section-head{ text-align:center; margin-bottom:56px; }
.section-head .eyebrow{
  font-family: var(--serif-utility); letter-spacing:0.3em; text-transform:uppercase;
  font-size:13px; color: var(--silver); margin:0 0 12px;
}
.section-head h2{
  font-family: var(--serif-display); font-size: clamp(28px,4vw,42px);
  letter-spacing:0.03em; margin:0; color:var(--ink); font-weight:500;
}
.section-head h2::after{
  content:"";
  display:block; width:64px; height:1px; margin:20px auto 0;
  background: linear-gradient(90deg, transparent, var(--sin-bright), transparent);
}
.section-head p{ color: var(--ink-dim); max-width:640px; margin:16px auto 0; }

/* ---------- member grid / cards ---------- */
.member-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:28px;
}
.member-card{
  display:block;
  border:1px solid var(--hairline);
  border-top: 2px solid var(--card-accent, var(--hairline));
  background: var(--panel);
  padding: 36px 28px;
  text-align:center;
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.member-card:hover{
  border-color: var(--card-accent, var(--silver));
  background: var(--panel-raised);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px var(--card-accent, var(--silver-dim));
  text-decoration:none;
}
.member-card .sigil{ width:52px; height:52px; margin:0 auto 20px; color: var(--card-accent, var(--silver)); }
.member-card .role{
  font-family: var(--serif-utility); letter-spacing:0.25em; text-transform:uppercase;
  font-size:12px; color: var(--card-accent, var(--silver)); margin:0 0 10px;
}
.member-card h3{
  font-family: var(--serif-gothic); font-size:28px; margin:0 0 8px; color: var(--ink); font-weight:400;
}
.member-card .tag{ color: var(--ink-dim); font-size:15px; font-style:italic; margin:0; }

.member-card.envy{ --card-accent: var(--envy-bright); }
.member-card.pride{ --card-accent: var(--pride-bright); }
.member-card.wrath{ --card-accent: var(--wrath-bright); }
.member-card.violet{ --card-accent: var(--violet-bright); }

/* ---------- member page ---------- */
.member-hero{
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow:hidden;
}
.member-hero::before{
  content:"";
  position:absolute; top:-20%; left:15%;
  width:500px; height:500px; max-width:120vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--sin) 20%, transparent), transparent 70%);
  pointer-events:none; z-index:0;
}
.member-hero .wrap{ position:relative; z-index:1; }
.member-hero .grid{
  display:grid; grid-template-columns: 220px 1fr; gap:56px; align-items:center;
}
.member-hero .sigil-large{ width:160px; height:160px; color: var(--sin-bright); margin:0 auto; }
.member-hero .eyebrow{
  font-family: var(--serif-utility); letter-spacing:0.3em; text-transform:uppercase;
  font-size:13px; color: var(--sin-bright); margin:0 0 14px;
}
.member-hero h1{
  font-family: var(--serif-gothic); font-size:clamp(38px,6vw,64px); margin:0 0 14px; font-weight:400; letter-spacing:0.01em;
}
.member-hero .epithet{ font-style:italic; color:var(--ink-dim); font-size:19px; margin:0 0 26px; }
.facts{ display:flex; flex-wrap:wrap; gap:12px 32px; list-style:none; margin:0; padding:0; }
.facts li{ font-size:15px; color: var(--ink-dim); }
.facts b{ color: var(--ink); font-weight:600; display:block; font-family:var(--serif-utility); letter-spacing:0.05em; font-size:13px; text-transform:uppercase; color:var(--sin-bright); margin-bottom:2px; }

@media (max-width: 700px){
  .member-hero .grid{ grid-template-columns:1fr; text-align:center; }
  .facts{ justify-content:center; }
}

.story{ max-width: 720px; margin: 0 auto; text-align:center; }
.story p{ margin: 0 0 22px; color: var(--ink); }
.story p:first-of-type::first-letter{
  font-family: var(--serif-gothic);
  font-size: 44px;
  color: var(--sin-bright);
  text-shadow: 0 0 24px color-mix(in srgb, var(--sin) 55%, transparent);
}
.pull{
  font-family: var(--serif-body); font-style:italic; font-size:23px;
  color: var(--sin-bright); text-align:center; margin: 44px auto; max-width:600px;
  border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); padding: 28px 0;
  position:relative;
}
.pull::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:7px; height:7px; background: var(--sin-bright);
}

.kinship{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top: 40px;
}
.kin-card{
  border:1px solid var(--hairline); padding:22px 24px; background: var(--panel);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.kin-card:hover{
  border-color: var(--sin-bright); transform: translateY(-3px);
  box-shadow: 0 10px 26px -14px var(--sin);
}
.kin-card .rel{ font-family:var(--serif-utility); letter-spacing:0.2em; text-transform:uppercase; font-size:12px; color:var(--silver); margin:0 0 6px; }
.kin-card h4{ font-family:var(--serif-display); font-size:19px; margin:0 0 8px; font-weight:500; }
.kin-card p{ color:var(--ink-dim); font-size:15px; margin:0; }

.coming-soon{
  text-align:center; padding:60px 20px; border:1px dashed var(--hairline-strong);
  color: var(--ink-faint); font-style:italic;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hairline);
  padding: 48px 0;
  text-align:center;
  color: var(--ink-faint);
  font-size: 14px;
}
footer .glyph{ color: var(--silver); margin-bottom:10px; display:block; }

/* ---------- family tree page ---------- */
.creed{
  text-align:center; font-family: var(--serif-body); font-style:italic;
  font-size:23px; color:var(--red-bright); max-width:680px; margin:0 auto 10px;
  text-shadow: 0 0 30px color-mix(in srgb, var(--red) 40%, transparent);
}
.tree{
  display:flex; flex-direction:column; align-items:center; gap:28px; margin-top:56px;
}
.org-chart-wrap{ text-align:center; margin-top:56px; overflow-x:auto; padding-bottom:8px; }
.org-chart, .org-chart ul{ display:inline-flex; padding-top:0; margin:0; list-style:none; }
.org-chart{ display:inline-block; }
.org-chart li{ list-style:none; }
.org-chart > li{ display:inline-block; text-align:center; position:relative; }
.org-chart ul{ padding-top:36px; position:relative; justify-content:center; }
.org-chart ul li{ display:inline-block; text-align:center; position:relative; padding:36px 16px 0 16px; vertical-align:top; }
.org-chart ul li::before, .org-chart ul li::after{
  content:''; position:absolute; top:0; right:50%;
  border-top:1px solid var(--hairline-strong);
  width:50%; height:36px;
}
.org-chart ul li::after{ right:auto; left:50%; border-left:1px solid var(--hairline-strong); }
.org-chart ul li:only-child::after, .org-chart ul li:only-child::before{ display:none; }
.org-chart ul li:only-child{ padding-top:0; }
.org-chart ul li:first-child::before, .org-chart ul li:last-child::after{ border:0 none; }
.org-chart ul li:last-child::before{ border-right:1px solid var(--hairline-strong); }
.org-chart ul ul::before{
  content:''; position:absolute; top:0; left:50%;
  border-left:1px solid var(--hairline-strong); width:0; height:36px;
}
.tree-parents{
  display:inline-flex; gap:18px; align-items:flex-end;
  border:1px solid var(--hairline-strong); background:var(--panel);
  padding:22px 26px;
}
.tree-parents .portrait-frame{ max-width:90px; }
.tree-parents .portrait-frame img{ box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--hairline-strong); }
.tree-parents .portrait-frame::before, .tree-parents .portrait-frame::after{ width:6px; height:6px; }
.tree-parents .portrait-frame::before{ top:-3px; }
.tree-parents .portrait-frame::after{ bottom:-3px; }
.node-label{ font-family: var(--serif-gothic); font-size:22px; margin:14px 0 0; color:var(--ink); }
.node-label a{ color:var(--ink); }
.node-label a:hover{ color: var(--red-bright); }
/* ---------- image-based crest & portraits ---------- */
.brand img.glyph{ width:32px; height:32px; object-fit:cover; border-radius:2px; display:block; }
footer img.glyph{ width:40px; height:40px; object-fit:cover; border-radius:3px; margin:0 auto 14px; display:block; }
.hero img.crest{
  width: 340px; max-width:78vw; height:auto; margin: 0 auto 28px; display:block;
  animation: crest-pulse 5s ease-in-out infinite;
}
@keyframes crest-pulse{
  0%, 100%{ filter: drop-shadow(0 0 34px color-mix(in srgb, var(--sin) 55%, transparent)); }
  50%{ filter: drop-shadow(0 0 58px color-mix(in srgb, var(--sin) 75%, transparent)); }
}
@media (prefers-reduced-motion: reduce){
  .hero img.crest{ animation: none; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--sin) 55%, transparent)); }
}

.portrait-frame{
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}
.portrait-frame::before, .portrait-frame::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px;
  background: var(--sin-bright);
  z-index:2; pointer-events:none;
}
.portrait-frame::before{ top:-4.5px; }
.portrait-frame::after{ bottom:-4.5px; }
.portrait-frame img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; object-position: center;
  display:block;
  background: var(--panel-raised);
  border: 2px solid var(--sin-bright);
  box-shadow: 0 0 0 5px var(--void), 0 0 0 6px var(--hairline-strong);
}
.portrait-frame.round img{ border-radius:6px; }

.member-card .portrait-frame{ max-width:120px; margin-bottom:20px; }
.member-card .portrait-frame img{ box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--hairline-strong); }
.member-card .portrait-frame::before, .member-card .portrait-frame::after{ width:7px; height:7px; }
.member-card .portrait-frame::before{ top:-3.5px; }
.member-card .portrait-frame::after{ bottom:-3.5px; }

.chain-frame{ max-width: 640px; margin: 0 auto; }
.chain-frame img{ width:100%; display:block; border:1px solid var(--hairline-strong); }
.chain-frame figcaption{ text-align:center; color:var(--ink-faint); font-style:italic; font-size:14px; margin-top:16px; }

.tree-image-frame{ max-width: 940px; margin: 0 auto; }
.tree-image-frame img{ width:100%; display:block; border:1px solid var(--hairline-strong); }

/* ---------- coded family tree ---------- */
.tree-chart{
  max-width: 900px; margin: 0 auto; position:relative;
  display:flex; flex-direction:column; align-items:center;
}
.tree-key{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px;
  margin: 0 auto 44px; max-width:640px;
}
.tree-key-item{
  display:flex; align-items:center; gap:9px;
  font-family: var(--serif-utility); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ink-dim);
}
.tree-key-item .dot{
  width:9px; height:9px; flex-shrink:0; transform:rotate(45deg);
  background: var(--key-color, var(--silver-bright));
}
.tree-key-item.head{ --key-color: var(--silver-bright); }
.tree-key-item.blood{ --key-color: var(--red-bright); }
.tree-key-item.chosen{ --key-color: var(--violet-bright); }
.tree-key-item.pending .dot{ background:none; border:1px dashed var(--ink-faint); }

.tree-connector{ width:1px; height:34px; background: var(--hairline-strong); }
.tree-married{
  display:flex; align-items:center; gap:10px; margin:6px 0 2px;
  font-family: var(--serif-utility); letter-spacing:0.2em; text-transform:uppercase;
  font-size:11px; color: var(--ink-faint);
}
.tree-married .line{ width:36px; height:1px; background: var(--hairline-strong); }
.tree-gen-label{
  font-family: var(--serif-utility); letter-spacing:0.25em; text-transform:uppercase;
  font-size:12px; color: var(--ink-faint); margin: 6px 0 22px; text-align:center;
}
.tree-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px; width:100%;
}
.tree-node{
  border:1px solid var(--hairline-strong); border-left: 3px solid var(--key-color, var(--hairline-strong));
  background: var(--panel);
  padding:18px 22px 18px 19px; min-width:190px; max-width:230px; text-align:left;
  text-decoration:none; display:block;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tree-node:hover{
  border-color: var(--key-color, var(--sin-bright)); transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px var(--key-color, var(--sin)); text-decoration:none;
}
.tree-node .name{
  font-family: var(--serif-gothic); font-size:19px; font-weight:400; color: var(--ink); margin:0 0 5px;
}
.tree-node .meta{ font-style:italic; color: var(--ink-dim); font-size:13px; margin:0; line-height:1.4; }
.tree-node.head{ --key-color: var(--silver-bright); }
.tree-node.head .name{ color: var(--silver-bright); }
.tree-node.blood{ --key-color: var(--red-bright); }
.tree-node.chosen{ --key-color: var(--violet-bright); }
.tree-node.pending{
  border-left-style:dashed; border-color: var(--hairline); opacity:0.55;
}
.tree-node.pending .name{ color: var(--ink-dim); }

@media (max-width: 700px){
  .portrait-frame{ max-width:180px; }
}

.tree-line{ width:1px; height:28px; background: var(--hairline-strong); }

/* ---------- three paths (saint / both / sinner) ---------- */
.paths-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:32px;
}
.path-column{
  border:1px solid var(--hairline); border-top:3px solid var(--path-accent, var(--silver-bright));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--path-accent, var(--silver-bright)) 7%, var(--panel)), var(--panel) 220px);
  padding:32px 28px; transition: border-color .25s ease, transform .25s ease;
}
.path-column:hover{
  border-color: var(--path-accent, var(--hairline-strong));
  box-shadow: 0 14px 36px -16px var(--path-accent, transparent);
}
.path-column.saint{ --path-accent: var(--silver-bright); }
.path-column.both{ --path-accent: var(--violet-bright); }
.path-column.sinner{ --path-accent: var(--red-bright); }
.path-icon{ width:34px; height:34px; margin-bottom:16px; color: var(--path-accent, var(--silver-bright)); }
.path-column .path-sub{
  font-family: var(--serif-utility); letter-spacing:0.2em; text-transform:uppercase;
  font-size:12px; color: var(--path-accent, var(--silver-bright)); margin:0 0 8px;
}
.path-column .path-title{ font-family: var(--serif-gothic); font-size:28px; font-weight:400; margin:0 0 12px; color:var(--ink); }
.path-column .path-desc{ color: var(--ink-dim); font-size:14.5px; margin:0 0 26px; }
.path-members{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.path-chip{ display:flex; flex-direction:column; align-items:center; gap:8px; width:78px; text-decoration:none; transition: transform .2s ease; }
.path-chip:hover{ transform: translateY(-3px); }
.path-chip .portrait-frame{ max-width:78px; }
.path-chip .portrait-frame::before, .path-chip .portrait-frame::after{ width:6px; height:6px; }
.path-chip .portrait-frame::before{ top:-3px; }
.path-chip .portrait-frame::after{ bottom:-3px; }
.path-chip span{ font-family: var(--serif-gothic); font-size:14px; color:var(--ink); text-align:center; }
.path-chip:hover span{ color: var(--path-accent, var(--silver-bright)); }
.path-empty{ color: var(--ink-faint); font-style:italic; font-size:14px; margin:0; text-align:center; width:100%; }

/* ---------- lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:200;
  background: rgba(4,3,5,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:40px; opacity:0; transition: opacity .18s ease;
}
.lightbox-overlay.open{ opacity:1; }
.lightbox-overlay img{
  max-width:min(90vw, 720px); max-height:85vh; object-fit:contain;
  border:2px solid var(--hairline-strong);
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  background: var(--panel); border:1px solid var(--hairline-strong); color: var(--ink);
  width:40px; height:40px; font-size:22px; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ color: var(--red-bright); border-color: var(--red-bright); }

.portrait-frame img, .memory-card .media img, .chain-frame img{ cursor: zoom-in; transition: filter .2s ease; }
.portrait-frame img:hover, .memory-card .media img:hover, .chain-frame img:hover{ filter: brightness(1.1); }

.duality-divider{
  display:flex; align-items:center; justify-content:center;
  max-width:280px; margin:36px auto 0;
}
.duality-divider .line{ height:1px; flex:1; }
.duality-divider .line.light{ background: linear-gradient(90deg, transparent, var(--silver-bright)); }
.duality-divider .line.dark{ background: linear-gradient(90deg, var(--red-bright), transparent); }
.duality-divider .gem{
  width:8px; height:8px; margin:0 12px; flex-shrink:0;
  background: var(--ink); transform:rotate(45deg);
  animation: gem-pulse 3s ease-in-out infinite;
  transform-origin:center;
}
@media (prefers-reduced-motion: reduce){
  .duality-divider .gem{ animation:none; }
}
@keyframes gem-pulse{
  0%, 100%{ opacity:0.85; transform: rotate(45deg) scale(1); }
  50%{ opacity:1; transform: rotate(45deg) scale(1.3); }
}

/* ---------- memories gallery ---------- */
.memory-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:26px;
}
.memory-card{
  border:1px solid var(--hairline); background: var(--panel);
  overflow:hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.memory-card:hover{ border-color: var(--sin-bright); transform: translateY(-3px); box-shadow: 0 12px 30px -14px var(--sin); }
.memory-card .media{
  aspect-ratio: 4/3; background: var(--panel-raised); overflow:hidden; position:relative;
}
.memory-card .media img, .memory-card .media video{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.memory-card .media.clip::before{
  content:'▶'; position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%;
  background: rgba(8,8,10,0.7); color: var(--silver-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; pointer-events:none;
}
.memory-card .caption{ padding:18px 20px; }
.memory-card .caption p{ margin:0; color:var(--ink-dim); font-style:italic; font-size:14.5px; }
.memory-card .caption .who{
  font-family: var(--serif-utility); letter-spacing:0.15em; text-transform:uppercase;
  font-size:12px; color: var(--silver); margin:0 0 6px; font-style:normal;
}

/* ---------- login ---------- */
.login-wrap{
  min-height: 70vh; display:flex; align-items:center; justify-content:center;
  padding: 60px 20px;
}
.login-card{
  width:100%; max-width:380px;
  border:1px solid var(--hairline-strong); background: var(--panel);
  padding:48px 36px; text-align:center;
}
.login-card img.crest{ width:80px; height:auto; margin:0 auto 24px; }
.login-card h1{
  font-family: var(--serif-gothic); font-size:34px; font-weight:400; margin:0 0 8px; color:var(--ink);
}
.login-card .sub{ color:var(--ink-dim); font-size:14.5px; margin:0 0 32px; font-style:italic; }
.login-form{ display:flex; flex-direction:column; gap:16px; }
.login-form input[type="password"]{
  width:100%; background: var(--void); border:1px solid var(--hairline-strong);
  color: var(--ink); font-family: var(--serif-body); font-size:16px;
  padding:13px 16px; text-align:center; letter-spacing:0.05em;
}
.login-form input[type="password"]:focus{ outline:1px solid var(--silver-bright); border-color: var(--silver-bright); }
.login-form button{
  background: var(--red-dim); border:1px solid var(--red-bright); color: var(--ink);
  font-family: var(--serif-utility); letter-spacing:0.15em; text-transform:uppercase; font-size:14px;
  padding:13px 16px; cursor:pointer; transition: background .2s ease;
}
.login-form button:hover{ background: var(--red); }
.login-form button:disabled{ opacity:0.5; cursor:not-allowed; }
.login-error{ color: var(--red-bright); font-size:14px; min-height:20px; margin:0; }

/* ---------- add a memory form ---------- */
.memory-form{
  border:1px solid var(--hairline-strong); background: var(--panel);
  padding:32px; max-width:560px; margin:0 auto 56px;
  display:grid; gap:16px;
}
.memory-form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.memory-form label{
  display:block; font-family: var(--serif-utility); letter-spacing:0.12em; text-transform:uppercase;
  font-size:12px; color: var(--silver); margin-bottom:6px;
}
.memory-form input[type="text"], .memory-form input[type="url"], .memory-form select{
  width:100%; background: var(--void); border:1px solid var(--hairline-strong);
  color: var(--ink); font-family: var(--serif-body); font-size:15px; padding:11px 14px;
}
.memory-form input:focus, .memory-form select:focus{ outline:1px solid var(--silver-bright); border-color: var(--silver-bright); }
.memory-form button{
  background: var(--red-dim); border:1px solid var(--red-bright); color: var(--ink);
  font-family: var(--serif-utility); letter-spacing:0.15em; text-transform:uppercase; font-size:14px;
  padding:13px 16px; cursor:pointer; transition: background .2s ease;
}
.memory-form button:hover{ background: var(--red); }
.memory-form button:disabled{ opacity:0.5; cursor:not-allowed; }
.memory-form .form-msg{ font-size:14px; min-height:18px; margin:0; text-align:center; }
.memory-form .form-msg.error{ color: var(--red-bright); }
.memory-form .form-msg.success{ color: var(--envy-bright); }

@media (max-width:600px){
  .memory-form .row{ grid-template-columns:1fr; }
}

.memory-card{ position:relative; }
.memory-card .delete-btn{
  position:absolute; top:10px; left:10px; z-index:2;
  background: rgba(8,8,10,0.75); border:1px solid var(--hairline-strong); color: var(--ink-dim);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 10px; cursor:pointer;
}
.memory-card .delete-btn:hover{ color: var(--red-bright); border-color: var(--red-bright); }
.memory-empty{
  text-align:center; padding:60px 20px; border:1px dashed var(--hairline-strong);
  color: var(--ink-faint); font-style:italic; grid-column: 1 / -1;
}