/* Living History: figure landing pages.
   Same palette and typefaces as index.html so the pages and the app feel
   like one place: aubergine wall, brass accents, Bodoni italic headings. */
:root{
  --ink:#e8ddd0;
  --text:#e8ddd0;
  --text-dim:#a99bab;
  --paper:#241521;
  --paper-card:#3d1a2a;
  --rule:#4a3040;
  --seal:#7a2d42;
  --seal-soft:#9c3d54;
  --gold:#c2a578;
  --sapphire-deep:#171b30;
}
*{ box-sizing:border-box; }
html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(194,165,120,0.035) 0px, rgba(194,165,120,0.035) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(-45deg, rgba(194,165,120,0.035) 0px, rgba(194,165,120,0.035) 1px, transparent 1px, transparent 34px);
  color:var(--text);
  font-family:'Crimson Pro', Georgia, serif;
  font-size:18px;
  line-height:1.65;
}
@media (min-width:900px){
  body{
    background-color:var(--sapphire-deep);
    background-image:
      repeating-linear-gradient(45deg, rgba(194,165,120,0.035) 0px, rgba(194,165,120,0.035) 1px, transparent 1px, transparent 34px),
      repeating-linear-gradient(-45deg, rgba(194,165,120,0.035) 0px, rgba(194,165,120,0.035) 1px, transparent 1px, transparent 34px),
      radial-gradient(ellipse at top left, rgba(61,74,120,0.4), transparent 55%);
  }
}
a{ color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:3px; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.page{
  max-width:1100px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}

/* Masthead */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 40px; border-bottom:1px solid var(--rule);
}
.brand{
  font-family:'Cinzel', serif; font-weight:700; font-size:26px; line-height:1; letter-spacing:0.03em;
  text-decoration:none;
  background-image:linear-gradient(180deg, #f3e0ad 0%, #d8b876 28%, #a8763f 62%, #c2a578 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.masthead-link{ font-size:16px; }

.crumbs{
  width:100%; max-width:760px; margin:0 auto; padding:22px 40px 0;
  font-size:14.5px; color:var(--text-dim);
}
.crumbs a{ color:var(--text-dim); }

main{ flex:1; width:100%; max-width:760px; margin:0 auto; padding:18px 40px 72px; }
main.main-wide{ padding-top:44px; }

/* Letterhead: the figure's name plate, echoing the chat header in the app */
.letterhead{ display:flex; align-items:center; gap:22px; margin:14px 0 28px; }
.medallion{
  flex-shrink:0; width:84px; height:84px;
  border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bodoni Moda', serif; font-weight:600; font-style:italic; font-size:28px;
  color:var(--paper-card); background:var(--seal-soft); border:3px solid var(--gold);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.18);
  overflow:hidden;
}
/* Portraits (filled in by portraits.js) sit face-first and fade in once loaded */
.medallion img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  animation:portrait-in 0.25s ease;
}
@keyframes portrait-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .medallion img{ animation:none; } }
h1{
  font-family:'Bodoni Moda', serif; font-style:italic; font-weight:600;
  font-size:46px; line-height:1.06; margin:0 0 8px; color:var(--ink);
}
.years{ margin:0; font-size:17px; }
.role{ margin:0; font-size:17px; font-style:italic; color:var(--text-dim); }

.intro{ font-size:19.5px; line-height:1.7; margin:0 0 30px; max-width:62ch; }

.cta-row{ margin:0; }
.cta{
  display:inline-block; text-decoration:none;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--seal); color:var(--text);
  padding:14px 26px; border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
@media (hover:hover){ .cta:hover{ background:var(--seal-soft); } }

h2{
  font-family:'Bodoni Moda', serif; font-style:italic; font-weight:600;
  font-size:26px; line-height:1.2; margin:56px 0 14px; color:var(--gold);
}
section p{ margin:0 0 14px; max-width:62ch; }

/* Questions: each one opens the app with the question already typed */
.questions{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.questions a{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 2px; border-bottom:1px solid var(--rule); text-decoration:none;
}
.q{ font-style:italic; font-size:19px; line-height:1.45; }
.q-action{ flex-shrink:0; font-size:15px; color:var(--gold); }
@media (hover:hover){
  .questions a:hover .q{ color:var(--gold); }
  .questions a:hover .q-action{ text-decoration:underline; }
}

/* Figure lists (related figures, index page) */
.figure-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:26px;
}
.figure-list a{
  display:flex; align-items:center; gap:12px; padding:13px 2px;
  border-bottom:1px solid var(--rule); text-decoration:none; height:100%;
}
.figure-list .medallion{ width:44px; height:44px; font-size:15px; border-width:2px; }
.figure-text{ min-width:0; }
.figure-name{
  display:block; font-family:'Bodoni Moda', serif; font-style:italic; font-weight:600;
  font-size:17.5px; line-height:1.2; color:var(--ink);
}
.figure-years, .figure-role{ display:block; font-size:14px; line-height:1.35; color:var(--text-dim); }
@media (hover:hover){ .figure-list a:hover .figure-name{ color:var(--gold); } }
.figure-list-wide{ grid-template-columns:repeat(2, minmax(0,1fr)); }
main.main-wide h1{ margin-bottom:18px; }
main.main-wide h2{ margin-top:48px; }
main.main-wide .cta-row{ margin-top:52px; }

.site-footer{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px;
  padding:26px 40px 34px; border-top:1px solid var(--rule); font-size:16px;
}

@media (max-width:760px){
  .masthead{ padding:14px 20px; }
  .brand{ font-size:22px; }
  .crumbs{ padding:18px 20px 0; }
  main{ padding:14px 20px 56px; }
  .letterhead{ gap:16px; align-items:flex-start; }
  .letterhead .medallion{ width:64px; height:64px; font-size:22px; }
  h1{ font-size:34px; }
  .intro{ font-size:18.5px; }
  .figure-list, .figure-list-wide{ grid-template-columns:1fr; }
  .questions a{ flex-direction:column; gap:2px; }
  .cta{ display:block; text-align:center; line-height:1.4; }
  .site-footer{ padding:22px 20px 30px; }
}

/* Legal pages (Terms, Privacy) */
.legal h1{ margin-bottom:10px; }
.legal .updated{ margin:0 0 30px; color:var(--text-dim); font-size:16px; }
.legal h2{ font-size:24px; margin:44px 0 10px; }
.legal p, .legal li{ max-width:66ch; }
.legal ul{ margin:0 0 14px; padding-left:1.3em; }
.legal li{ margin-bottom:6px; }
.legal .toc{ list-style:none; padding:0; columns:2; column-gap:28px; margin:0 0 10px; }
.legal .toc li{ margin-bottom:4px; break-inside:avoid; }
/* Details only you can supply. Replace every one before publishing. */
mark.fill{ background:#c2a578; color:#241521; padding:0 4px; border-radius:2px; font-weight:600; }
@media (max-width:760px){ .legal .toc{ columns:1; } }