/* =========================================================================
   The Pookote Tharavad — heritage stylesheet
   Plain CSS, no build step, no web-font dependency (uses durable system serifs).
   Palette: aged cream paper · deep maroon · antique gold.
   ========================================================================= */

:root{
  --paper:      #f6efdf;   /* page background  */
  --paper-2:    #fbf6ea;   /* card / panel     */
  --ink:        #3a3026;   /* body text        */
  --ink-soft:   #5d5141;   /* secondary text   */
  --muted:      #8a7c66;   /* captions, notes  */
  --maroon:     #6e201c;   /* headings         */
  --maroon-dk:  #531713;
  --gold:       #b3892f;   /* accents, rules   */
  --gold-soft:  #d8c187;
  --line:       #ddceb0;   /* hairline borders */
  --shadow:     0 8px 28px rgba(60,40,20,.16);
  --maxw:       760px;     /* reading column   */
  --serif:      "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --display:    "Hoefler Text", "Iowan Old Style", Palatino, Georgia, serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* subtle paper texture from layered gradients (no image dependency) */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(179,137,47,.05), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(110,32,28,.04), transparent 55%);
  background-attachment:fixed;
}

/* ----------------------------- TOP NAV ---------------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.55rem clamp(1rem,4vw,2.5rem);
  background:rgba(83,23,19,.97);
  border-bottom:2px solid var(--gold);
  color:var(--gold-soft);
}
.brand{
  font-family:var(--display);
  font-size:1.15rem; letter-spacing:.04em;
  color:#f3e6c8; text-decoration:none; font-weight:600; white-space:nowrap;
}
.nav{ margin-left:auto; display:flex; gap:1.35rem; flex-wrap:wrap; }
.nav a{
  color:#e9d9b6; text-decoration:none; font-size:.92rem;
  letter-spacing:.03em; padding:.2rem 0; border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--gold); }
.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--gold); color:var(--gold-soft);
  font-size:1.25rem; line-height:1; padding:.25rem .55rem; border-radius:4px; cursor:pointer;
}

/* ------------------------------- HERO ----------------------------------- */
.hero{ position:relative; height:min(86vh,720px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center 38%;
  transform:scale(1.04); filter:sepia(.18) saturate(.92) brightness(.96);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(40,18,12,.55) 0%, rgba(40,18,12,.30) 40%, rgba(40,18,12,.72) 100%);
}
.hero-text{ position:relative; text-align:center; color:#f7ecd2; padding:1.5rem; max-width:880px; }
.hero .kicker{
  font-size:.8rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-soft); margin:0 0 1rem;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.6rem,8vw,5.2rem); line-height:1.02; margin:0;
  font-weight:600; letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.hero .subtitle{ font-size:clamp(1.05rem,2.6vw,1.5rem); font-style:italic; color:#f0e2c4; margin:1rem 0 .4rem; }
.hero .byline{ font-size:.95rem; letter-spacing:.04em; color:#dcc89c; margin:.2rem 0 0; }
.scroll-cue{
  display:inline-block; margin-top:2.2rem; font-size:1.8rem;
  color:var(--gold-soft); text-decoration:none; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ------------------------------ LAYOUT ---------------------------------- */
main{ display:block; }
section.prose{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2.2rem,6vw,4rem) clamp(1.15rem,5vw,1.5rem);
}
.prose p{ margin:0 0 1.15rem; }
.lead{
  font-size:1.42rem; line-height:1.6; font-style:italic; color:var(--maroon-dk);
  text-align:center; max-width:42ch; margin:0 auto 1rem;
}
.intro{ padding-top:clamp(2.5rem,7vw,4.5rem); }
.muted{ color:var(--ink-soft); }
.small{ font-size:.92rem; }
.mt{ margin-top:3rem; }

/* ----------------------------- HEADINGS --------------------------------- */
h2{
  font-family:var(--display);
  color:var(--maroon);
  font-size:clamp(1.7rem,4.5vw,2.4rem);
  line-height:1.15; font-weight:600;
  margin:.4rem 0 1.4rem; text-align:center;
}
h2 .ornament{ display:block; color:var(--gold); font-size:1.1rem; margin-bottom:.45rem; }
h3{
  font-family:var(--display); color:var(--maroon-dk);
  font-size:1.42rem; font-weight:600;
  margin:2.4rem 0 .9rem; padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
}
h4{ font-family:var(--display); color:var(--maroon-dk); margin:0 0 .4rem; font-size:1.15rem; }

/* divider flourish under each section */
section.prose + section.prose{ border-top:1px solid var(--line); }

/* ------------------------- SOURCE / CITATIONS --------------------------- */
.source-cite{
  font-size:.92rem; font-style:italic; color:var(--muted);
  border-left:3px solid var(--gold-soft); padding-left:.9rem; margin:0 0 1.4rem;
}

/* ----------------------------- NOTE CARD -------------------------------- */
.note-card{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:6px; padding:1.2rem 1.4rem; margin:2rem 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.note-card h4{ color:var(--maroon); }
.note-card p{ margin:0; font-size:1rem; color:var(--ink-soft); line-height:1.6; }

/* --------------------------- DOCUMENT LINK ------------------------------ */
.doc-link{ margin:1.1rem 0 .2rem; text-align:center; }
.doc-link a{
  display:inline-block; text-decoration:none;
  font-family:var(--display); font-size:1.02rem; letter-spacing:.01em;
  color:#f3e6c8; background:var(--maroon);
  padding:.6rem 1.3rem; border-radius:5px; border:1px solid var(--maroon-dk);
  box-shadow:var(--shadow); transition:background .2s, transform .15s;
}
.doc-link a:hover{ background:var(--maroon-dk); transform:translateY(-1px); }

/* ----------------------------- BLOCKQUOTE ------------------------------- */
blockquote{
  margin:1.8rem 0; padding:1.1rem 1.5rem;
  background:var(--paper-2); border-left:4px solid var(--maroon);
  font-style:italic; font-size:1.15rem; color:var(--maroon-dk); border-radius:0 6px 6px 0;
}
blockquote cite{ display:block; margin-top:.7rem; font-size:.9rem; font-style:normal; color:var(--muted); }

/* ------------------------------- TABLE ---------------------------------- */
.table-wrap{ overflow-x:auto; margin:1.5rem 0; }
table.ledger{
  width:100%; border-collapse:collapse; font-size:1rem; background:var(--paper-2);
  border:1px solid var(--line);
}
table.ledger th{
  text-align:left; background:var(--maroon); color:var(--gold-soft);
  font-family:var(--display); font-weight:600; letter-spacing:.02em;
  padding:.6rem .9rem;
}
table.ledger td{ padding:.55rem .9rem; border-top:1px solid var(--line); vertical-align:top; }
table.ledger td:last-child{ white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; color:var(--maroon-dk); }
table.ledger tbody tr:nth-child(even){ background:rgba(179,137,47,.06); }

/* ------------------------------ FIGURES --------------------------------- */
figure.fig{ margin:1.8rem 0; }
figure.fig img{
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
figcaption{
  margin-top:.55rem; font-size:.9rem; font-style:italic; color:var(--muted);
  text-align:center; line-height:1.45;
}
/* float side figures on wide screens */
@media(min-width:720px){
  figure.fig-right{ float:right; width:46%; margin:.4rem 0 1.2rem 1.8rem; }
  figure.fig-left{ float:left; width:46%; margin:.4rem 1.8rem 1.2rem 0; }
}
figure.fig-wide{ margin:2rem 0; }

/* photo frame treatment */
.fig img, .gallery img{ filter:saturate(.96); }

/* ------------------------------ GALLERY --------------------------------- */
.gallery{ display:grid; gap:1rem; margin:1.6rem 0 .5rem; clear:both; }
.gallery-2{ grid-template-columns:repeat(2,1fr); }
.gallery-3{ grid-template-columns:repeat(3,1fr); }
.gallery-4{ grid-template-columns:repeat(4,1fr); }
.gallery figure{ margin:0; }
.gallery a{ display:block; overflow:hidden; border-radius:4px; border:1px solid var(--line); box-shadow:var(--shadow); }
.gallery img{
  display:block; width:100%; height:170px; object-fit:cover;
  transition:transform .45s ease;
}
.gallery a:hover img{ transform:scale(1.06); }
.gallery figcaption{ margin-top:.45rem; font-size:.82rem; }
/* charts and archive: show whole image, not cropped */
.gallery.charts img,
.gallery.archive img{ height:150px; object-fit:contain; background:#fff; padding:4px; }

/* ----------------------------- LINEAGE ---------------------------------- */
ol.lineage{
  list-style:none; counter-reset:gen; max-width:30rem; margin:1.2rem auto 2rem; padding:0;
}
ol.lineage li{
  counter-increment:gen; position:relative;
  padding:.5rem 0 .5rem 3.2rem;
  font-size:1.2rem; font-family:var(--display); color:var(--maroon-dk);
}
ol.lineage li::before{
  content:counter(gen); position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--maroon); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-family:var(--serif);
}
ol.lineage li:not(:last-child)::after{
  content:""; position:absolute; left:1.05rem; top:calc(50% + 1.05rem);
  height:calc(100% - 1.05rem); width:2px; background:var(--gold-soft);
}
.lineage-note{ font-family:var(--serif); font-size:.82rem; font-style:italic; color:var(--muted); }

/* ------------------------------- STATS ---------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin:1.4rem 0; }
.stat{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:1rem .5rem; text-align:center;
}
.stat .num{ display:block; font-family:var(--display); font-size:2rem; color:var(--maroon); line-height:1; }
.stat .lbl{ display:block; margin-top:.35rem; font-size:.82rem; color:var(--ink-soft); }

/* ------------------------------- ELDERS --------------------------------- */
.elders{ display:grid; gap:1rem; margin:1.4rem 0; }
.elder{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:1.1rem 1.3rem; border-left:4px solid var(--gold);
}
.elder h4{ color:var(--maroon); display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.elder .yr{ font-family:var(--serif); font-size:.85rem; font-style:italic; color:var(--muted); font-weight:normal; }
.elder p{ margin:0; font-size:1rem; color:var(--ink-soft); line-height:1.55; }

/* --------------------------- ACKNOWLEDGEMENT ---------------------------- */
.ack{ text-align:center; }
.ack-quote{
  background:none; border:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; font-size:1.3rem; padding:2rem 1rem; color:var(--maroon-dk); max-width:46ch; margin:0 auto;
}
.ack-quote cite{ text-align:center; }

/* ------------------------------- FOOTER --------------------------------- */
.site-foot{
  background:var(--maroon-dk); color:#e9d9b6; text-align:center;
  padding:2.6rem 1.4rem 2.2rem; margin-top:2rem; border-top:3px solid var(--gold);
}
.site-foot p{ margin:.35rem 0; }
.foot-orn{ color:var(--gold); font-size:1.4rem; margin-bottom:.6rem; }
.site-foot .small{ color:#cbb489; font-size:.86rem; line-height:1.6; max-width:60ch; margin:.6rem auto; }
.back-top{ color:var(--gold-soft); text-decoration:none; font-size:.9rem; }
.back-top:hover{ color:#fff; }

/* ------------------------------ LIGHTBOX -------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; padding:2rem;
  background:rgba(28,14,10,.94);
}
.lightbox[hidden]{ display:none; }
.lb-img{ max-width:95vw; max-height:82vh; border:3px solid var(--gold-soft); border-radius:3px; box-shadow:0 10px 50px rgba(0,0,0,.6); }
.lb-cap{ color:#e9d9b6; font-style:italic; font-size:.95rem; text-align:center; margin:0; max-width:60ch; }
.lb-close{
  position:absolute; top:1rem; right:1.4rem;
  background:none; border:none; color:#e9d9b6; font-size:2.6rem; line-height:1; cursor:pointer;
}
.lb-close:hover{ color:#fff; }

/* ----------------------------- RESPONSIVE ------------------------------- */
@media(max-width:880px){
  .gallery-4{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:680px){
  body{ font-size:1.08rem; }
  .nav{ display:none; position:absolute; top:100%; right:0; left:0;
        flex-direction:column; gap:0; background:rgba(83,23,19,.99);
        border-bottom:2px solid var(--gold); padding:.4rem 0; }
  .nav.open{ display:flex; }
  .nav a{ padding:.7rem 1.6rem; border-bottom:1px solid rgba(216,193,135,.15); }
  .nav-toggle{ display:inline-block; }
  .gallery-2, .gallery-3, .gallery-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .gallery img{ height:130px; }
  figure.fig-right, figure.fig-left{ float:none; width:100%; margin:1.6rem 0; }
}
@media(max-width:420px){
  .gallery img{ height:115px; }
}

/* ------------------------- MOTION / PRINT ------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}