/* ═══════════════════════════════════════════════════════════════
   HUBERT SHUPTRINE — THE SOUTH BEHELD · A LIVING ARCHIVE
   hubert.art · Estate stylesheet · MMXXVI
   Palette: deep pine, cream paper, gold leaf, rust accent
   ═══════════════════════════════════════════════════════════════ */

:root {
  --deep: #161B17;        /* deep pine black   */
  --deep2: #10140F;       /* deeper            */
  --paper: #F4EFE4;       /* cream paper       */
  --paper2: #EDE7D8;      /* darker cream      */
  --mat: #EAE3D3;         /* matte board       */
  --ink: #23281F;         /* ink green-black   */
  --brown: #6B5F4A;       /* warm brown        */
  --tan: #B8AB8D;         /* tan               */
  --cream: #E8DFCB;       /* cream text        */
  --gold: #B58B3C;        /* gold leaf         */
  --rust: #9C4A2F;        /* rust accent       */
  --sage: #7A8471;        /* sage green        */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  background: var(--deep);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--deep); }

/* ─── PROGRESS BAR ─── */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--gold); z-index: 1000;
  transition: width 0.08s linear;
}

/* ─── NAV ─── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(16,20,17,0.92), rgba(16,20,17,0.75) 70%, rgba(16,20,17,0));
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
}
#nav.solid {
  background: rgba(16,20,17,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(181,139,60,0.25);
}
#nav .brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; letter-spacing: 0.06em; color: var(--paper);
  white-space: nowrap;
}
#nav .brand span { color: var(--gold); }
#nav ul {
  display: flex; gap: clamp(14px, 2.6vw, 34px); list-style: none;
}
#nav ul a {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; opacity: 0.82;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
#nav ul a:hover { opacity: 1; border-color: var(--gold); }
#nav ul a.active { opacity: 1; border-color: var(--gold); color: #fff; }
@media (max-width: 900px) { #nav ul { display: none; } }

/* ─── SHEETS (photobook pages) ─── */
.sheet { position: relative; overflow: hidden; }
.sheet.pad { padding: clamp(64px, 11vh, 130px) 0; }
.sheet.light { background: var(--paper); color: var(--ink); }
.sheet.dark  { background: var(--deep);  color: var(--cream); }
.sheet.matte { background: var(--mat); color: var(--ink); }
.sheet img[src^="img/"] { max-width: 100%; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 6vw, 5.5rem);
}
.wrap.full-figure { max-width: 1280px; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; color: inherit; line-height: 1.08;
}
.sheet.light h2, .sheet.matte h2 { color: var(--ink); }
.sheet.dark h2 { color: var(--paper); }
h2 { font-size: clamp(30px, 4.2vw, 48px); }
h3 {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 10px;
}

.kicker {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 18px;
}
.sheet.dark .kicker { color: var(--gold); }

.body {
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.78; color: var(--ink);
}
.sheet.dark .body { color: var(--cream); }
.body + .body { margin-top: 1.1em; }
.body strong { font-weight: 600; }
.body em { font-style: italic; }

.bigquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 32px);
  line-height: 1.42; color: var(--cream);
}
.attrib {
  margin-top: 16px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--tan);
}

.rule {
  width: 64px; height: 2px; background: var(--gold);
  margin: 26px 0;
}

/* ─── LAYOUTS ─── */
.split {
  display: flex; gap: clamp(28px, 4.5vw, 70px); align-items: center;
}
.split.rev { flex-direction: row-reverse; }
@media (max-width: 860px) { .split { flex-direction: column !important; } }

.two-col {
  columns: 2; column-gap: clamp(28px, 4vw, 56px); margin-top: 26px;
  orphans: 2; widows: 2;
}
.two-col .body { break-inside: avoid; }
@media (max-width: 860px) {
  .two-col { columns: 1; }
  .two-col .body + .body { margin-top: 1.1em; }
}

/* ─── STATS ─── */
.stats {
  border-left: 2px solid var(--gold);
  padding-left: clamp(16px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 20px;
}
.stat .n {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1;
  color: var(--rust); font-weight: 600;
}
.stat .l {
  margin-top: 5px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brown); line-height: 1.5;
}

/* ─── TIMELINE ─── */
.tl { margin-top: 38px; border-top: 1px solid #D9D0BC; }
.ev {
  display: flex; gap: 26px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid #D9D0BC;
}
.ev .y {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; color: var(--rust); font-weight: 600;
  min-width: 74px;
}
.ev .d { font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* ─── RESEARCHER'S NOTE ─── */
.rnote {
  margin-top: 30px;
  background: rgba(154, 74, 42, 0.06);
  border-left: 3px solid var(--rust);
  padding: 16px 20px;
  font-size: 14px; line-height: 1.65; color: #5A4A38;
  font-style: italic;
}

/* ─── FIGURES & PLATES ─── */
figure.plate img {
  width: 100%; display: block;
  box-shadow: 0 18px 46px rgba(22, 27, 23, 0.22);
}
figcaption, figcaption.cap {
  margin-top: 12px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--brown);
  line-height: 1.6;
}
figcaption.cap { font-size: 12px; }

.full-figure img {
  width: 100%; display: block;
  box-shadow: 0 24px 60px rgba(22, 27, 23, 0.28);
}
.capline {
  margin-top: 16px;
  display: flex; justify-content: space-between; gap: 26px;
  flex-wrap: wrap;
}
.capline .t { font-size: 14.5px; color: var(--ink); max-width: 720px; line-height: 1.55; }
.capline .m {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brown); white-space: nowrap;
}

/* ─── SITTERS GRID ─── */
.grid3 {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
}
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } }
.grid3 img {
  width: 100%; display: block;
  box-shadow: 0 14px 36px rgba(22, 27, 23, 0.2);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.grid3 figure:hover img {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(22, 27, 23, 0.3);
}

/* ─── MUSEUM LIST ─── */
.museums {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px; background: #D9D0BC;
  border: 1px solid #D9D0BC;
}
.museums div {
  background: var(--paper);
  padding: 13px 16px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}

/* ─── CONTENTS ─── */
.toc {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px);
}
@media (max-width: 860px) { .toc { grid-template-columns: 1fr; } }
.toc ul { list-style: none; margin-bottom: 26px; }
.toc li a {
  display: block; padding: 9px 0;
  border-bottom: 1px solid #D9D0BC;
  font-family: 'Source Serif 4', serif;
  font-size: 15.5px; color: var(--ink); text-decoration: none;
  transition: padding-left 0.25s ease, color 0.25s;
}
.toc li a:hover { padding-left: 10px; color: var(--rust); }
.toc .yrs {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11px; letter-spacing: 0.14em; color: var(--tan);
  margin-left: 8px;
}

/* ─── FADE-IN ─── */
.fade {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── COVER SCROLL HINT ─── */
@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.sheet .bigquote em { font-style: italic; }