/* =====================================================================
   THE FABULOUS FLEXMORES — SHARED STYLESHEET
   Used by both index.html and bios.html so that a change made once
   (colors, type sizes, spacing) applies to the whole site. Each page
   keeps its own <style> block underneath this for page-specific
   sections (Hero/Roadmap/About/Contact on index.html; Directory/
   People Hero/Vitals/Documents/Photo cards on bios.html).
   ===================================================================== */

:root{
  /* dark / ink register — opens the site, matches lilyflexmore.co.uk */
  --ink:        #0a0806;
  --ink-mid:    #141210;
  --ink-soft:   #1c1914;
  --ivory:      #f7f1e3;
  --ivory-dark: #e8ddc8;
  --brass:      #c9973a;
  --brass-light:#d4aa4a;

  /* warm / cream register — reserved for later chapters, matches riseofthelionesses */
  --cream:          #f5f0e8;
  --cream-dark:     #ede6d6;
  --burgundy:       #6b1f2a;
  --burgundy-dark:  #4a1219;
  --burgundy-light: #8b2f3d;
  --gold:           #b8922a;
  --gold-light:     #d4aa4a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory-dark);
  font-family:'IM Fell English',serif;
  font-size:1.3rem;
  line-height:1.9;
}
a{color:inherit;}
img{max-width:100%;display:block;}

::selection{background:rgba(201,151,58,0.35);color:var(--ivory);}

/* ===== NAV ===== */
header.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,8,6,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(201,151,58,0.2);
  padding:0.9rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.8rem;
}
.brand{display:flex;align-items:center;gap:0.7rem;text-decoration:none;}
.brand img{width:36px;height:36px;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:1.35rem;color:var(--brass-light);}
.brand-sub{font-family:'Josefin Sans',sans-serif;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory-dark);opacity:0.6;}
nav.chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;}
nav.chapters a{
  font-family:'Josefin Sans',sans-serif;font-size:1rem;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ivory-dark);opacity:0.75;transition:opacity 0.2s,color 0.2s;
  white-space:nowrap;
}
nav.chapters a:hover{opacity:1;color:var(--brass-light);}

/* ===== SECTION SCAFFOLD ===== */
section.chapter{padding:5rem 1.5rem;}
.chapter-inner{max-width:1360px;margin:0 auto;}
.chapter-header{text-align:center;margin-bottom:3.5rem;}
.chapter-eyebrow{
  font-family:'Josefin Sans',sans-serif;font-size:0.68rem;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--brass);opacity:0.75;margin-bottom:0.8rem;
}
.chapter-title{
  font-family:'Playfair Display',serif;font-weight:700;font-style:italic;
  font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ivory);line-height:1.2;margin:0 0 0.6rem;
}
.chapter-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.7rem;color:var(--ivory-dark);opacity:0.75;
}

.lede{font-size:2.1rem;line-height:2.25;color:var(--ivory);margin-bottom:2.5rem;}
.lede strong{color:var(--brass-light);font-weight:600;}

.beat{margin-bottom:3rem;}
.beat-title{
  font-family:'Cinzel',serif;font-weight:600;font-size:0.95rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--brass-light);margin-bottom:1rem;padding-bottom:0.6rem;border-bottom:1px solid rgba(201,151,58,0.2);
}
.beat p{font-family:'IM Fell English',serif;font-size:2.1rem;line-height:2.25;margin:0 0 1.2em;color:var(--ivory-dark);}
.beat p:last-child{margin-bottom:0;}
.beat strong{color:var(--ivory);}
.beat em{color:var(--brass-light);font-style:italic;}

.pull{
  margin:2.2rem 0;padding:1.5rem 1.8rem;border-left:3px solid var(--brass);
  background:rgba(201,151,58,0.05);
}
.pull p{
  font-family:'Playfair Display',serif;font-style:italic;font-size:1.75rem;
  color:var(--brass-light);line-height:1.9;margin:0;
}

.quote-block{
  margin:2.2rem 0;padding:1.6rem 2rem;background:var(--ink-soft);border:1px solid rgba(201,151,58,0.15);
}
.quote-block p{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.85rem;line-height:2.05;
  color:var(--ivory);margin:0 0 0.8rem;
}
.quote-block cite{
  font-family:'Josefin Sans',sans-serif;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--brass);opacity:0.75;font-style:normal;
}

.open-q{
  margin:1.6rem 0;padding:1.2rem 1.6rem;border:1px dashed rgba(201,151,58,0.3);
  font-family:'IM Fell English',serif;font-style:italic;font-size:1.9rem;line-height:2.1;color:var(--ivory-dark);opacity:0.9;
}
.open-q .tag{
  display:block;font-family:'Josefin Sans',sans-serif;font-style:normal;font-size:0.62rem;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--brass);opacity:0.8;margin-bottom:0.5rem;
}

.divider{
  width:60px;height:1px;background:linear-gradient(to right,transparent,rgba(201,151,58,0.5),transparent);
  margin:3rem auto;
}

/* ===== FOOTER ===== */
footer{
  background:var(--burgundy-dark);color:var(--cream);
  padding:3.5rem 1.5rem 2.5rem;text-align:center;
}
footer .foot-links{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;}
footer .foot-links a{
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  text-decoration:none;color:var(--gold-light);border-bottom:1px solid transparent;transition:border-color 0.2s;
}
footer .foot-links a:hover{border-color:var(--gold-light);}
footer .foot-credit{
  font-family:'Libre Baskerville',serif;font-style:italic;font-size:0.85rem;color:rgba(245,240,232,0.55);
  line-height:1.8;max-width:560px;margin:0 auto;
}

/* ===== SKIP LINK (accessibility) ===== */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;z-index:200;
  background:var(--ink);color:var(--ivory);padding:0.7rem 1.2rem;
  font-family:'Josefin Sans',sans-serif;font-size:0.85rem;letter-spacing:0.05em;
  border:1px solid var(--brass);text-decoration:none;
}

@media (max-width:640px){
  nav.chapters{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    gap:1.1rem;-webkit-overflow-scrolling:touch;padding-bottom:0.2rem;
  }
  nav.chapters a{font-size:0.85rem;}
  section.chapter{padding:3.5rem 1.2rem;}
  .beat-title{font-size:0.85rem;}
  .beat p{font-size:1.75rem;line-height:2.1;}
  .lede{font-size:1.75rem;line-height:2.15;}
  .pull p{font-size:1.55rem;line-height:1.9;}
  .quote-block{padding:1.3rem 1.4rem;}
  .quote-block p{font-size:1.6rem;line-height:2;}
  .chapter-sub{font-size:1.45rem;}
  .open-q{font-size:1.6rem;line-height:1.95;}
}