/* ============================================================================
   THE ROYAL DESCENT — illuminated manuscript stylesheet
   ========================================================================== */

:root{
  --parchment:    #e9ddc1;
  --parchment-hi: #f3ead2;
  --parchment-lo: #d8c69e;
  --ink:          #2a2014;
  --ink-soft:     #5a4a34;
  --gold:         #c9a227;
  --gold-hi:      #f6e29a;
  --gold-deep:    #9a7b1e;
  --rubric:       #8a1f1f;   /* the "red" of rubrication */
  --azure:        #1f3a66;   /* lapis blue */
  --shadow:       rgba(40,28,12,0.28);
  --frame-pad:    clamp(40px, 10.5vw, 168px);  /* clears the illuminated border */

  --serif:   'IM Fell English', Georgia, serif;
  --serif-sc:'IM Fell English SC', Georgia, serif;
  --caps:    'Cinzel', 'Times New Roman', serif;
  --deco:    'Cinzel Decorative', 'Cinzel', serif;
  --black:   'UnifrakturMaguntia', 'Cinzel Decorative', serif;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:#cdbb93;
  overflow-x:hidden;
  line-height:1.6;
}
em{ font-style:italic; }
::selection{ background:rgba(138,31,31,0.22); }

/* When JS+GSAP are ready we hide things for reveal; otherwise everything shows */
.gsap-ready [data-reveal]{ opacity:0; }

/* ---------------------------------------------------------------------------
   BACKGROUND  (fixed, layered vellum + parallax)
   ------------------------------------------------------------------------- */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.bg__paper{
  position:absolute; inset:-5%;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--parchment-hi), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, var(--parchment-lo), transparent 55%),
    linear-gradient(180deg, #e7dabd 0%, #e2d2af 45%, #dcc9a0 100%);
}
.bg__grain{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55; mix-blend-mode:multiply; pointer-events:none;
}
.bg__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(60,40,16,.20) 88%, rgba(40,26,8,.4) 100%);
  box-shadow:inset 0 0 220px rgba(50,32,10,.35);
}

/* ---------------------------------------------------------------------------
   ILLUMINATED PAGE BORDER (fixed, painted by art.js)
   ------------------------------------------------------------------------- */
.frame{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.frame__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (max-width:760px){ :root{ --frame-pad: 22px; } }

/* ---------------------------------------------------------------------------
   DYNASTY RAIL  (right-side progress / nav)
   ------------------------------------------------------------------------- */
.rail{
  position:fixed; top:50%; right:clamp(20px, 7vw, 92px); transform:translateY(-50%);
  z-index:40; opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.rail.is-visible{ opacity:1; pointer-events:auto; }
.rail__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.rail__item{ position:relative; display:flex; align-items:center; justify-content:flex-end; cursor:pointer; }
.rail__emblem{
  width:28px; height:32px; display:block; transform-origin:center; opacity:.78;
  filter:drop-shadow(0 2px 3px rgba(40,28,12,.35));
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
.rail__emblem svg{ width:100%; height:100%; display:block; }
.rail__item:hover .rail__emblem{ opacity:1; transform:scale(1.18); }
.rail__item.is-active .rail__emblem{
  opacity:1; transform:scale(1.3);
  filter:drop-shadow(0 0 6px rgba(201,162,39,.85)) drop-shadow(0 2px 3px rgba(40,28,12,.4));
}
.rail__label{
  position:absolute; right:40px; white-space:nowrap;
  font-family:var(--caps); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--parchment-hi);
  padding:4px 10px; border:1px solid var(--gold-deep); border-radius:3px;
  box-shadow:0 4px 14px var(--shadow);
  opacity:0; transform:translateX(8px); transition:all .25s ease; pointer-events:none;
}
.rail__item:hover .rail__label{ opacity:1; transform:translateX(0); }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:96px var(--frame-pad) 40px;
}
.hero__plate{ max-width:760px; }
.hero__rule{ height:26px; margin:0 auto; width:min(420px,80%);
  background:no-repeat center/contain;
}
.hero__rule--top{ margin-bottom:18px; }
.hero__rule--bot{ margin-top:20px; }
.hero__eyebrow{
  font-family:var(--serif-sc); letter-spacing:.42em; text-transform:uppercase;
  font-size:clamp(11px,1.6vw,15px); color:var(--rubric); margin:0 0 6px;
  text-indent:.42em;
}
.hero__title{
  font-family:var(--black);
  font-weight:400; line-height:.9; margin:.05em 0 .15em;
  font-size:clamp(58px,13vw,150px);
  color:#7a5e16;
  background:linear-gradient(176deg,#fff4cf 0%,#e6c45f 22%,#b9881f 42%,#fff0b8 54%,#b9881f 66%,#f1d57e 82%,#9a6f12 100%);
  background-size:100% 260%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,84,12,.45)) drop-shadow(0 5px 9px rgba(60,40,10,.35));
  letter-spacing:.01em;
  animation:goldSheen 7s ease-in-out infinite;
}
@keyframes goldSheen{ 0%,100%{ background-position:50% 0%; } 50%{ background-position:50% 100%; } }

/* gilt twinkle on bezants & blossom centres (gold-leaf shimmer) */
@keyframes twinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.frame .shimmer, .vine .shimmer{ animation:twinkle 3.4s ease-in-out infinite; }
.hero__sub{
  font-family:var(--serif); font-size:clamp(15px,2.3vw,21px);
  color:var(--ink-soft); margin:0 auto; max-width:52ch; line-height:1.7;
}
.hero__sub em{ color:var(--rubric); font-style:italic; }

.preamble{ max-width:600px; margin:54px auto 0; padding:0 8px; }
.preamble__text{
  position:relative; font-size:clamp(15px,2vw,18px); line-height:1.85;
  text-align:justify; hyphens:auto; color:var(--ink);
}
.preamble__text::first-letter{ } /* dropcap handled via ::before below */
.preamble__text[data-dropcap]::before{
  content:attr(data-dropcap);
  float:left; font-family:var(--black); font-weight:400;
  font-size:88px; line-height:.72; margin:6px 14px 0 0; padding:10px 12px 6px;
  color:var(--gold-hi);
  background:
    linear-gradient(135deg,var(--rubric),#5e1414);
  border:2px solid var(--gold);
  box-shadow:0 3px 0 var(--gold-deep), 0 6px 14px var(--shadow), inset 0 0 0 4px rgba(246,226,154,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.scrollcue{
  margin-top:64px; background:none; border:none; cursor:pointer;
  display:inline-flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--ink-soft); font-family:var(--serif-sc);
  letter-spacing:.28em; text-transform:uppercase; font-size:12px;
}
.scrollcue__chev{ width:14px; height:14px; border-right:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5;} 50%{ transform:rotate(45deg) translate(4px,4px); opacity:1;} }

/* ---------------------------------------------------------------------------
   THE SCROLL / LINEAGE
   ------------------------------------------------------------------------- */
.stage{ display:none; position:relative; padding:96px var(--frame-pad) 90px; }
.lineage{
  position:relative; max-width:1080px; margin:0 auto; padding:0 24px;
}

/* central spine */
/* the old straight spine + studs are replaced by the painted vine */
.spine, .node__boss, .node__tendril{ display:none !important; }

/* the central living vine (SVG painted by art.js) */
.vine{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }
.gsap-ready .vine__branch, .gsap-ready .vine__node{ opacity:0; }

/* while measuring node geometry, ignore every reveal transform */
.measuring [data-reveal]{ transform:none !important; }

/* a row in the lineage */
.node{
  position:relative; display:grid; grid-template-columns:1fr 140px 1fr; align-items:center;
  margin:6px 0; min-height:128px; z-index:1;
}
.node__boss{ /* gold stud where the card meets the spine */
  grid-column:2; grid-row:1; justify-self:center; position:relative; width:26px; height:26px; z-index:3;
}
.node__boss::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  border:2px solid #6e5414; box-shadow:0 2px 5px var(--shadow), 0 0 0 4px rgba(233,221,193,.7);
}
.node__boss::after{ content:''; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(110,84,20,.55); }

/* connector tendril from spine to card */
.node__tendril{ position:absolute; top:50%; margin-top:-1.5px; height:3px; z-index:0; width:78px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow:0 1px 2px var(--shadow); transform:scaleX(0);
}
.node--left  .node__tendril{ right:50%; left:auto; transform-origin:right center; }
.node--right .node__tendril{ left:50%;  right:auto; transform-origin:left center; }

/* the monarch card */
.card{
  position:relative; z-index:2; grid-row:1; display:flex; align-items:center; gap:24px;
  background:linear-gradient(177deg, rgba(245,237,216,.95), rgba(230,217,186,.95));
  border:2px solid var(--gold-deep);
  border-radius:4px; padding:17px 24px;
  box-shadow:0 2px 5px rgba(40,28,12,.14);
  cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  width:100%; max-width:400px;
}
.card::before{ /* inner rubric keyline (a hand-ruled double frame) */
  content:''; position:absolute; inset:4px; border:1px solid rgba(138,31,31,.42); border-radius:2px; pointer-events:none;
}
.node--left  .card{ grid-column:1; justify-self:end; flex-direction:row-reverse; text-align:right; }
.node--right .card{ grid-column:3; justify-self:start; }
.card:hover{ transform:translateY(-3px); box-shadow:0 9px 20px rgba(40,28,12,.22); border-color:var(--gold); }
.card:hover .roundel{ transform:rotate(-3deg) scale(1.05); }
.card:focus-visible{ outline:2px solid var(--rubric); outline-offset:3px; }

/* the illuminated roundel (portrait medallion) */
.roundel{
  flex:0 0 auto; width:84px; height:84px; position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.roundel svg{ display:block; width:100%; height:100%; overflow:visible; }
.roundel__mon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-weight:700; color:var(--gold-hi);
  text-shadow:0 1px 2px rgba(0,0,0,.55); pointer-events:none; line-height:1;
  white-space:nowrap; letter-spacing:-.01em;
}

.card__body{ flex:1 1 auto; min-width:0; }
.card__name{
  font-family:var(--caps); font-weight:700; font-size:clamp(17px,2.1vw,22px);
  line-height:1.12; margin:0 0 4px; color:var(--ink);
}
.card__epithet{ font-style:italic; color:var(--rubric); font-size:14px; margin:0 0 8px; }
.card__reign{
  font-family:var(--serif-sc); letter-spacing:.06em; font-size:13px; color:var(--ink-soft);
  display:flex; gap:8px; align-items:baseline;
}
.node--left .card__reign{ justify-content:flex-end; }
.card__house{ font-family:var(--serif-sc); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:8px; }

/* disputed claimants (e.g. Lady Jane Grey) */
.node--disputed .card{ background:linear-gradient(177deg,#e7dcc1,#ddcfa9); opacity:.96; }
.node--disputed .card::before{ border-style:dashed; }
.node--disputed .card__name::after{
  content:'· disputed'; font-family:var(--serif); font-style:italic; font-size:12px;
  letter-spacing:.04em; color:var(--ink-soft); margin-left:8px; text-transform:none;
}
.node--disputed .node__boss::before{ filter:grayscale(.5) brightness(.96); }

/* ---------------------------------------------------------------------------
   DYNASTY BANNER (chapter marker)
   ------------------------------------------------------------------------- */
.banner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; margin:64px auto 40px; padding:0 18px; }
.banner__shield{ width:90px; height:102px; margin:0 auto -22px; position:relative; z-index:3; filter:drop-shadow(0 6px 12px var(--shadow)); }
/* the house heading sits on an opaque illuminated plaque so the vine never
   cuts through the text — the trunk passes behind it, continuing above & below */
.banner__plate{
  position:relative; max-width:min(86vw, 560px);
  background:linear-gradient(177deg, rgba(246,238,219,.99), rgba(231,219,191,.99));
  border:2px solid var(--gold-deep); border-radius:7px;
  padding:32px 46px 18px; text-align:center;
  box-shadow:0 4px 14px rgba(40,28,12,.22);
}
.banner__plate::before{ content:''; position:absolute; inset:5px; border:1px solid rgba(138,31,31,.4); border-radius:4px; pointer-events:none; }
.banner__era{ font-family:var(--serif-sc); letter-spacing:.34em; text-transform:uppercase; font-size:12px; color:var(--rubric); margin:0 0 6px; text-indent:.34em; }
.banner__name{
  font-family:var(--deco); font-weight:900; font-size:clamp(23px,4.1vw,37px); margin:0; color:var(--ink); line-height:1.14;
}
.banner__restored{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:.58em; color:var(--ink-soft); }
.banner__flourish{ color:var(--gold-deep); font-size:17px; margin-top:8px; line-height:1; }

/* ---------------------------------------------------------------------------
   INTERREGNUM (the broken chain)
   ------------------------------------------------------------------------- */
.interregnum{ position:relative; z-index:2; text-align:center; margin:60px auto; max-width:560px; padding:34px 28px; }
.interregnum__card{
  position:relative; background:linear-gradient(177deg,#39362f,#2c2924); color:var(--parchment-hi);
  border:1px solid #6f6852; border-radius:8px; padding:30px 26px;
  box-shadow:0 14px 36px rgba(20,14,4,.5), inset 0 0 0 1px rgba(155,155,136,.2);
}
.interregnum__break{ font-size:30px; color:#9b9b88; letter-spacing:.3em; margin-bottom:10px; }
.interregnum__title{ font-family:var(--deco); font-weight:700; font-size:clamp(22px,3.6vw,30px); margin:0 0 4px; color:#d8cda8; }
.interregnum__years{ font-family:var(--serif-sc); letter-spacing:.18em; color:#b6b095; font-size:13px; margin:0 0 14px; }
.interregnum__text{ font-style:italic; color:#cdc5ab; line-height:1.7; margin:0; }

/* ---------------------------------------------------------------------------
   COLOPHON
   ------------------------------------------------------------------------- */
.colophon{ position:relative; z-index:2; text-align:center; padding:30px 24px 110px; max-width:620px; margin:0 auto; }
.colophon__mark{ font-size:34px; color:var(--rubric); }
.colophon__line{ font-family:var(--deco); font-weight:700; font-size:clamp(20px,3.4vw,28px); color:var(--ink); margin:8px 0 2px; }
.colophon__sub{ font-style:italic; color:var(--ink-soft); margin:0 0 18px; }
.colophon__note{ font-family:var(--serif-sc); letter-spacing:.14em; font-size:12px; color:var(--gold-deep); text-transform:uppercase; }
.colophon__totop{
  margin-top:26px; cursor:pointer; font-family:var(--caps); letter-spacing:.12em; font-size:13px;
  color:var(--ink); background:linear-gradient(177deg,var(--parchment-hi),var(--parchment));
  border:1px solid var(--gold-deep); border-radius:4px; padding:11px 22px;
  box-shadow:0 5px 14px var(--shadow); transition:all .25s ease;
}
.colophon__totop:hover{ box-shadow:0 8px 20px var(--shadow), 0 0 0 1px var(--gold); transform:translateY(-2px); }

/* ---------------------------------------------------------------------------
   MODAL
   ------------------------------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:90; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(28,18,6,.62); backdrop-filter:blur(3px); }
.modal__card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); opacity:0;
  width:min(450px,92vw); text-align:center; padding:42px 38px 34px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--parchment-hi), var(--parchment) 70%);
  border:1px solid var(--gold-deep); border-radius:12px;
  box-shadow:0 30px 70px rgba(20,12,2,.6), inset 0 0 0 1px rgba(255,250,230,.6), inset 0 0 0 6px rgba(154,123,30,.18);
}
.modal.is-open .modal__card{ animation:modalIn .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes modalIn{ to{ opacity:1; transform:translate(-50%,-50%);} }
.modal__x{ position:absolute; top:12px; right:14px; background:none; border:none; cursor:pointer;
  font-size:16px; color:var(--ink-soft); width:30px; height:30px; border-radius:50%; transition:all .2s; z-index:2; }
.modal__x:hover{ background:rgba(138,31,31,.12); color:var(--rubric); }
.modal__emblem{ width:118px; height:132px; margin:0 auto 30px; display:flex; align-items:center; justify-content:center; }
.modal__emblem svg{ width:100%; height:100%; display:block; }
.modal__house{ font-family:var(--serif-sc); letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:var(--gold-deep); margin:0 0 8px; }
.modal__name{ font-family:var(--caps); font-weight:800; font-size:clamp(26px,5vw,36px); margin:0; color:var(--ink); line-height:1.08; }
.modal__epithet{ font-style:italic; color:var(--rubric); font-size:18px; margin:8px 0 12px; }
.modal__reign{ font-family:var(--serif-sc); letter-spacing:.08em; color:var(--ink-soft); margin:0; }
.modal__divider{ color:var(--gold); margin:20px 0; letter-spacing:.4em; }
.modal__fact{ font-size:16px; line-height:1.8; color:var(--ink); margin:0; }
.modal__nav{ display:flex; justify-content:space-between; gap:10px; margin-top:30px; }
.modal__nav button{
  flex:1; cursor:pointer; background:none; border:1px solid var(--gold-deep); border-radius:4px;
  padding:9px 8px; font-family:var(--caps); font-size:12px; color:var(--ink); letter-spacing:.03em;
  transition:all .2s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal__nav button:hover:not(:disabled){ background:rgba(201,162,39,.14); border-color:var(--gold); }
.modal__nav button:disabled{ opacity:.35; cursor:default; }
.modal__prev{ text-align:left; }
.modal__next{ text-align:right; }

/* ---------------------------------------------------------------------------
   RESPONSIVE  — collapse to a single left-aligned column on narrow screens
   ------------------------------------------------------------------------- */
@media (max-width:720px){
  .lineage{ padding:0 16px; }
  .spine{ left:30px; }
  .node{ grid-template-columns:28px 1fr; column-gap:10px; margin:14px 0; min-height:0; }
  .node__boss{ grid-column:1; justify-self:center; }
  .node--left .card, .node--right .card{ grid-column:2; justify-self:start; flex-direction:row; text-align:left; max-width:none; width:100%; }
  .node--left .card__reign{ justify-content:flex-start; }
  .node__tendril{ display:none; }
  .rail{ right:8px; }
  .rail__list{ gap:7px; }
}
@media (max-width:480px){
  .card{ padding:13px 14px; gap:13px; }
  .roundel{ width:66px; height:66px; }
  .preamble__text[data-dropcap]::before{ font-size:66px; }
}

/* ---------------------------------------------------------------------------
   THE SEAM MARKERS (clickable knots on the vine) + the link panel
   ------------------------------------------------------------------------- */
.vine__link{ display:none; pointer-events:auto; cursor:pointer; }   /* shown only on Succession */
.vine__link-hit{ pointer-events:all; fill:transparent; }
.vine__link-seal{ transition:transform .2s ease, filter .2s ease; transform-origin:center; transform-box:fill-box; }
/* hover lifts + gilds the seal but keeps its relationship colour (no fill swap) */
.vine__link:hover .vine__link-seal, .vine__link:focus-visible .vine__link-seal{
  transform:scale(1.5); filter:drop-shadow(0 0 5px rgba(201,162,39,.95));
}
.vine__link:focus-visible{ outline:none; }

/* the panel reuses .modal / .modal__card / .modal__backdrop / .modal__x */
.linkmodal__card{ text-align:center; }
.linkmodal__seam{ font-family:var(--serif-sc); letter-spacing:.24em; text-transform:uppercase; font-size:11px; color:var(--gold-deep); margin:0 0 8px; }
.linkmodal__pair{ font-family:var(--caps); font-weight:700; font-size:clamp(20px,3.6vw,27px); line-height:1.18; margin:0 0 6px; color:var(--ink); }
.linkmodal__pair em{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:.62em; color:var(--rubric); margin:1px 0; }
.linkmodal__block{ text-align:left; margin-top:20px; padding-top:16px; border-top:1px solid rgba(154,123,30,.3); }
.linkmodal__h{ font-family:var(--serif-sc); letter-spacing:.16em; text-transform:uppercase; font-size:11px; color:var(--rubric); margin:0 0 9px; }
.linkmodal__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 9px; }
.linkmodal__text{ font-size:15px; line-height:1.7; color:var(--ink); margin:0; }
.badge{
  font-family:var(--caps); font-size:11.5px; letter-spacing:.04em; font-weight:600;
  color:#fbf3da; background:var(--bc, var(--gold-deep));
  padding:4px 11px; border-radius:11px; border:1px solid rgba(40,28,12,.3);
  box-shadow:0 1px 2px var(--shadow); white-space:nowrap;
  text-shadow:0 1px 1px rgba(22,12,4,.45);   /* keep cream text legible across the ramp */
}
.badge--succ{ color:var(--ink); background:linear-gradient(177deg,#f4ead0,#e3d3ab); border-color:var(--gold-deep); text-shadow:none; }
.badge__note{ font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--ink-soft); }

/* ---- the seam key: a small illuminated plaque teaching the colour ramp --- */
.seamkey{   /* shown only on the Succession page (see mode rules at end) */
  position:relative; z-index:2; display:none;
  max-width:min(90vw, 660px); margin:6px auto 34px; padding:22px 32px 20px;
  background:linear-gradient(177deg, rgba(246,238,219,.97), rgba(231,219,191,.97));
  border:2px solid var(--gold-deep); border-radius:7px;
  box-shadow:0 4px 14px rgba(40,28,12,.18); text-align:center;
}
.seamkey::before{ content:''; position:absolute; inset:5px; border:1px solid rgba(138,31,31,.34); border-radius:4px; pointer-events:none; }
.seamkey__title{ font-family:var(--deco); font-weight:700; font-size:clamp(17px,2.5vw,22px); color:var(--ink); margin:0 0 9px; }
.seamkey__intro{ font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0 auto 16px; max-width:54ch; }
.seamkey__scale{ list-style:none; margin:0 0 13px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; }
.seamkey__item{ display:flex; align-items:center; gap:8px; font-family:var(--caps); font-size:12px; letter-spacing:.03em; color:var(--ink); }
.seamkey__dot{   /* a miniature of the seal: coloured wax, gilt rim, gold lozenge */
  position:relative; width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  background:var(--c); border:1.5px solid var(--gold-deep);
  box-shadow:inset 0 0 0 1px rgba(255,245,210,.4), 0 1px 2px var(--shadow);
}
.seamkey__dot::after{ content:''; position:absolute; inset:5.5px;
  background:var(--gold-hi); border:.5px solid var(--gold-deep); transform:rotate(45deg); }
.seamkey__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  font-family:var(--serif-sc); font-style:italic; letter-spacing:.07em; font-size:12px; color:var(--gold-deep); margin:0; }
.seamkey__arrow{ font-style:normal; letter-spacing:0; color:var(--ink-soft); }
@media (max-width:720px){
  .seamkey{ padding:18px 18px 15px; margin-bottom:24px; }
  .seamkey__scale{ gap:8px 13px; }
}

/* ---------------------------------------------------------------------------
   NAVBAR  (cute centred pill — switches the three pages)
   ------------------------------------------------------------------------- */
.topnav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:3px; padding:6px 9px; border-radius:999px;
  background:linear-gradient(177deg, rgba(246,238,219,.93), rgba(231,219,191,.93));
  border:1px solid var(--gold-deep);
  box-shadow:0 6px 20px rgba(40,28,12,.28), inset 0 0 0 1px rgba(255,250,230,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.topnav__link{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:var(--caps); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 15px; border-radius:999px;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.topnav__link:hover{ color:var(--ink); background:rgba(201,162,39,.14); }
.topnav__link.is-active{ color:#5a3f10; background:rgba(201,162,39,.26); box-shadow:inset 0 0 0 1px rgba(154,123,30,.5); }
.topnav__link:focus-visible{ outline:2px solid var(--rubric); outline-offset:2px; }
.topnav__sep{ color:var(--gold-deep); font-size:8px; opacity:.65; }
@media (max-width:560px){
  .topnav{ top:8px; gap:0; padding:5px 6px; }
  .topnav__link{ padding:6px 9px; font-size:10.5px; letter-spacing:.03em; }
  .topnav__sep{ display:none; }
}

/* ---------------------------------------------------------------------------
   PAGE I · INTRODUCTION
   ------------------------------------------------------------------------- */
.intro{
  display:none; position:relative; min-height:100vh;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:96px var(--frame-pad) 56px;
}
/* if the page is too short to centre without clipping the title under the nav,
   fall back to top-anchored so nothing is cut off */
@media (max-height:880px){ .intro{ justify-content:flex-start; } }
.intro__inner{ max-width:760px; width:100%; }
.intro .hero__title{ font-size:clamp(48px,8.5vw,104px); margin:.04em 0 .12em; }
.intro__lede{
  font-family:var(--serif); font-size:clamp(15px,2vw,19px); line-height:1.8;
  color:var(--ink); max-width:56ch; margin:22px auto 0;
}
.intro__lede em{ color:var(--rubric); font-style:italic; }
.intro__modes{ display:flex; gap:24px; margin-top:36px; justify-content:center; flex-wrap:wrap; }
.intro__mode{
  position:relative; cursor:pointer; text-align:left; width:308px; max-width:84vw;
  display:flex; flex-direction:column; gap:7px; padding:26px 26px 22px;
  background:linear-gradient(177deg, rgba(245,237,216,.96), rgba(230,217,186,.96));
  border:2px solid var(--gold-deep); border-radius:8px;
  box-shadow:0 4px 14px rgba(40,28,12,.18);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.intro__mode::before{ content:''; position:absolute; inset:5px; border:1px solid rgba(138,31,31,.32); border-radius:5px; pointer-events:none; }
.intro__mode:hover{ transform:translateY(-4px); box-shadow:0 13px 28px rgba(40,28,12,.26); border-color:var(--gold); }
.intro__mode:focus-visible{ outline:2px solid var(--rubric); outline-offset:3px; }
.intro__mode-no{ font-family:var(--caps); font-weight:700; font-size:22px; letter-spacing:.12em; line-height:1; color:var(--gold-deep); }
.intro__mode-name{ font-family:var(--caps); font-weight:700; font-size:21px; color:var(--ink); }
.intro__mode-desc{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
.intro__mode-desc em{ color:var(--rubric); font-style:italic; }
.intro__mode-go{ margin-top:5px; font-family:var(--serif-sc); font-style:italic; letter-spacing:.03em; color:var(--rubric); font-size:14px; }
@media (max-width:680px){ .intro__modes{ flex-direction:column; align-items:center; } }

/* ---------------------------------------------------------------------------
   THE TIMELINE — per-mode heading
   ------------------------------------------------------------------------- */
.modehead{ text-align:center; max-width:680px; margin:0 auto 6px; }
.modehead__eyebrow{ font-family:var(--serif-sc); letter-spacing:.34em; text-transform:uppercase; font-size:12px; color:var(--rubric); margin:0 0 6px; text-indent:.34em; }
.modehead__title{
  font-family:var(--black); font-weight:400; font-size:clamp(34px,7vw,60px); line-height:1; margin:0 0 12px; color:#7a5e16;
  background:linear-gradient(176deg,#fff4cf 0%,#e6c45f 26%,#b9881f 50%,#fff0b8 64%,#9a6f12 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 4px rgba(60,40,10,.32));
}
.modehead__sub{ font-family:var(--serif); font-size:clamp(14px,1.8vw,17px); line-height:1.7; color:var(--ink-soft); max-width:52ch; margin:0 auto; }
.modehead__scroll, .modehead__succession{ display:none; }

/* ---------------------------------------------------------------------------
   PAGE SWITCHING  (which page shows, and how the timeline behaves per mode)
   ------------------------------------------------------------------------- */
body[data-mode="intro"] .intro{ display:flex; }
body[data-mode="scroll"] .stage,
body[data-mode="succession"] .stage{ display:block; }

/* the dynasty rail rides along on the timeline pages */
body[data-mode="scroll"] .rail,
body[data-mode="succession"] .rail{ opacity:1; pointer-events:auto; }

/* the right heading + the key appear only where they belong */
body[data-mode="scroll"] .modehead__scroll{ display:block; }
body[data-mode="succession"] .modehead__succession{ display:block; }
body[data-mode="succession"] .seamkey{ display:block; }

/* THE SCROLL: reigns are the interactive element (cards clickable, no seals) */
/* THE SUCCESSION: the seams are — cards fall quiet, seals come alive */
body[data-mode="succession"] .card{ cursor:default; pointer-events:none; }
body[data-mode="succession"] .vine__link{ display:block; animation:sealIn .5s ease both; }
@keyframes sealIn{ from{ opacity:0; } to{ opacity:1; } }
/* strip the vine to its essence: the line + the seals. Leaves, berries & tendrils
   (.vine__foliage) and the dynasty blossoms (.vine__node) drop away, leaving the
   bark trunk, the stems to each reign, and the (enlarged) succession seals. */
body[data-mode="succession"] .vine__foliage,
body[data-mode="succession"] .vine__node{ display:none; }

/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .gsap-ready [data-reveal]{ opacity:1 !important; }
  .gsap-ready .vine__branch, .gsap-ready .vine__node, .gsap-ready .vine__link{ opacity:1 !important; }
}