/* Shared styling for the Kaeth'Ghora lore pages. Palette sampled from the clan crest sheet. */
:root{
  --void:#08090A; --panel:#101218;
  --edge:rgba(193,181,163,.13); --edge-lit:rgba(193,181,163,.32);
  --bone:#C1B5A3; --bone-lit:#E8DBC9;
  --crimson:#762528; --crimson-lit:#A93B44; --crimson-glow:#F6A2A3;
  --teal:#387375; --teal-lit:#42A3B6; --teal-glow:#C5FFFF;
  --icy:#2872B4; --icy-lit:#8BD5FF;
  --ink:#C1B5A3; --ink-dim:rgba(193,181,163,.80); --ink-faint:rgba(193,181,163,.58);
  /* --echo is registered with @property on the pages that animate it */
  --shell:min(940px, 100% - 2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .28s cubic-bezier(.22,.61,.36,1) both; }
::view-transition-new(root){ animation:vt-in .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes vt-out{ to{ opacity:0; transform:scale(.985); } }
@keyframes vt-in { from{ opacity:0; transform:scale(1.012); } }

*{ box-sizing:border-box; margin:0; padding:0; }
img{ display:block; max-width:100%; height:auto; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  min-height:100svh; background:var(--void); color:var(--ink);
  font-family:"Spectral", Georgia, serif; font-weight:300;
  font-size:clamp(15.5px,.5vw+14px,17px); line-height:1.72;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 76% at 50% 108%, rgba(56,115,117,.20) 0%, transparent 62%),
    radial-gradient(80% 52% at 6% 4%,    rgba(118,37,40,.17)  0%, transparent 60%),
    radial-gradient(80% 58% at 97% 18%,  rgba(40,114,180,.13) 0%, transparent 62%),
    linear-gradient(178deg,#08090A 0%,#0a0c10 46%,#08090A 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
#mist{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.page{ position:relative; z-index:2; width:var(--shell); margin-inline:auto; padding:clamp(.9rem,2.2vh,1.4rem) 0 clamp(3rem,8vh,5rem); }
h1,h2,h3{ font-family:"Cinzel", Georgia, serif; font-weight:600; line-height:1.16; color:var(--bone-lit); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--icy-lit); outline-offset:3px; border-radius:3px; }

/* back to the tree */
.back{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:"Cinzel",serif; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); padding:.55rem 1rem; border:1px solid var(--edge);
  transition:.35s var(--ease);
}
.back:hover{ color:var(--bone-lit); border-color:var(--edge-lit); }

.head{ display:grid; gap:.7rem; justify-items:center; text-align:center; margin:clamp(1.1rem,3vh,1.8rem) 0 clamp(1.8rem,4.5vh,2.6rem); }
.head h1{ font-size:clamp(1.5rem,4.4vw,2.3rem); letter-spacing:.14em; }
.head p{ color:var(--ink-dim); max-width:44rem; }
.kicker{ font-family:"Cinzel",serif; font-size:.7rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-faint); }
.gem{ width:11px; height:11px; transform:rotate(45deg); border-radius:1px;
  background:linear-gradient(135deg,var(--crimson-glow),var(--crimson) 58%,#4a1416);
  box-shadow:0 0 14px rgba(169,59,68,.55); }
hr.rule{ height:1px; border:0; margin:clamp(2.5rem,7vh,4rem) 0;
  background:linear-gradient(90deg,transparent,var(--edge-lit) 22%,var(--edge-lit) 78%,transparent); }
.foot{ margin-top:clamp(2.5rem,7vh,4rem); text-align:center; display:grid; gap:1.2rem; justify-items:center; }
.foot-maxim{ font-family:"Cinzel",serif; font-size:clamp(.8rem,2.4vw,1.05rem); letter-spacing:.28em; text-transform:uppercase; color:var(--bone); }

/* reveal */
.rv{ opacity:0; transform:translateY(20px) scale(.99); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
/* children of a staggered block arrive one after another rather than all at once */
.stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .62s var(--ease), transform .62s var(--ease); }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > :nth-child(1){ transition-delay:.04s } .stagger.in > :nth-child(2){ transition-delay:.11s }
.stagger.in > :nth-child(3){ transition-delay:.18s } .stagger.in > :nth-child(4){ transition-delay:.25s }
.stagger.in > :nth-child(5){ transition-delay:.32s } .stagger.in > :nth-child(6){ transition-delay:.39s }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rv, .stagger > *{ opacity:1; transform:none; }
}