/* Letters from George — slideshow deck. "Museum Light" aesthetic. */
:root{
  --paper:#f7f5f0; --ink:#23262b; --muted:#6b6155; --soft:#8d8475;
  --accent:#9a7b3f; --line:#e4ddcd; --dark:#15161a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--dark);color:var(--ink);
  font-family:var(--serif);-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ---- deck + slide framing -------------------------------------------------*/
.deck{position:fixed;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;display:none;
  padding:6vh 9vw;background:var(--paper);
  align-items:center;justify-content:center;text-align:center;
  animation:fade .55s ease both}
.slide.active{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slide{animation:none}}
.slide>div{width:100%;max-width:1180px}

/* full-bleed bg layer, shared. Decorative slides (dividers/quotes) crop to fill
   with a soft sepia; letters' scans and the photographs show WHOLE, never zoomed. */
.slide[data-dark] .bg{position:absolute;inset:0;background-position:center}
.kind-divider .bg,.kind-quote .bg{background-size:cover;filter:sepia(.18) saturate(.92)}

/* ---- type -----------------------------------------------------------------*/
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;margin:.2em 0;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;margin:.1em 0 .35em;font-weight:600}
.eyebrow,.kicker{font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.28em;font-size:clamp(.7rem,1vw,.85rem);color:var(--accent);
  margin:0 0 .4em;font-weight:600}
.subtitle{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.5;color:var(--muted);
  max-width:48ch;margin:.6em auto 0}
.body{font-size:clamp(1.15rem,1.85vw,1.7rem);line-height:1.62}
.body p{margin:0 0 .7em}
.body p:last-child{margin-bottom:0}
em{color:#5a513f}
strong{color:var(--ink)}

/* ---- title ----------------------------------------------------------------*/
.s-title .portrait{width:clamp(150px,17vh,230px);height:clamp(150px,17vh,230px);
  object-fit:cover;object-position:top;border-radius:50%;
  border:6px solid #fff;box-shadow:0 10px 40px rgba(0,0,0,.22);
  filter:sepia(.16);margin-bottom:1.2rem}
.s-title .eyebrow{color:var(--soft)}

/* ---- divider (dark, optional photo bg) ------------------------------------*/
.kind-divider{background:var(--dark);color:#f4f1ea;padding:0}
.s-divider{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.s-divider .bg{opacity:.42}
.s-divider .divider-inner{position:relative;z-index:1;padding:6vh 9vw;max-width:1100px}
.s-divider h2{color:#fff;font-size:clamp(2.2rem,5vw,4rem)}
.s-divider .kicker{color:#d7b877}
.s-divider .subtitle{color:#d9d3c7}
.s-divider.has-bg h2{text-shadow:0 2px 24px rgba(0,0,0,.5)}

/* ---- prose ----------------------------------------------------------------*/
.s-prose{display:flex;gap:5vw;align-items:center;text-align:left}
.s-prose.layout-text{justify-content:center;text-align:left}
.s-prose.layout-text .prose-text{max-width:60ch;margin:0 auto}
.s-prose .prose-text{flex:1.1}
.s-prose .prose-fig{flex:.9;margin:0}
.s-prose .prose-fig img{width:100%;border-radius:8px;
  box-shadow:0 14px 44px rgba(0,0,0,.22);filter:sepia(.12)}
.s-prose figcaption{font-family:var(--sans);font-size:.85rem;color:var(--soft);
  margin-top:.7rem;text-align:center}
@media (max-width:880px){.s-prose{flex-direction:column;text-align:left}}

/* ---- quote ----------------------------------------------------------------*/
.kind-quote{background:var(--dark);color:#f4f1ea;padding:0}
.s-quote{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.s-quote .bg{opacity:.30}
.s-quote blockquote{position:relative;z-index:1;margin:0;padding:0 9vw;max-width:1100px}
.s-quote p{font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.32;font-style:italic;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.s-quote footer{font-family:var(--sans);font-style:normal;margin-top:1.4rem;
  color:#d7b877;font-size:clamp(.95rem,1.4vw,1.2rem);letter-spacing:.04em}

/* ---- people intro ---------------------------------------------------------*/
.s-people h2{margin-bottom:.1em}
.people-row{display:flex;gap:clamp(1rem,3vw,2.6rem);justify-content:center;
  margin-top:2.2rem;flex-wrap:wrap}
.people-row figure{margin:0;width:clamp(180px,22vw,260px);
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.12)}
.people-row img{width:100%;height:clamp(200px,26vh,300px);object-fit:cover;
  object-position:top center;filter:sepia(.12)}
.people-row figcaption{padding:1rem 1.1rem;text-align:left}
.p-name{display:block;font-size:1.35rem;font-weight:600}
.p-meta{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin:.25rem 0 .5rem}
.p-note{display:block;font-size:1rem;color:var(--muted);line-height:1.4}

/* ---- letter context -------------------------------------------------------*/
.s-context h2{font-size:clamp(2rem,4.5vw,3.4rem);color:var(--ink)}
.s-context .ctx-line{font-size:clamp(1.1rem,1.8vw,1.5rem);margin:.3em 0}
.s-context .place{color:var(--accent)}
.s-context .to{color:var(--muted);font-style:italic;margin-left:.5em}
.s-context .teaser{font-style:italic;color:var(--muted);max-width:46ch;
  margin:1.4em auto 0;font-size:clamp(1.05rem,1.6vw,1.35rem);
  padding-top:1.2em;border-top:1px solid var(--line);display:inline-block}

/* ---- letter text ----------------------------------------------------------*/
.s-letter{position:relative;text-align:left;max-width:62ch;margin:0 auto}
.s-letter .transcript{font-size:clamp(1.15rem,1.95vw,1.7rem);line-height:1.62}
.s-letter .transcript p{margin:0 0 .7em}
.s-letter .page-count{position:absolute;top:-3.2rem;right:0;font-family:var(--sans);
  font-size:.8rem;letter-spacing:.12em;color:var(--soft)}
.s-letter .ltr-foot{font-family:var(--sans);font-size:.8rem;color:var(--soft);
  margin-top:1.6rem;letter-spacing:.04em}
.uncertain{border-bottom:1px dotted #b59; color:inherit}
.illegible{color:#a08; font-style:italic}
.s-letter blockquote{border-left:3px solid var(--line);margin:1em 0;padding:.2em 1.2em;
  color:var(--muted);font-style:italic;font-size:.9em}

/* ---- scans (full-bleed image, contained) ----------------------------------*/
.kind-letter_scan{background:#11100e;padding:0}
.s-scan{position:absolute;inset:0}
.s-scan .bg{background-size:contain;background-repeat:no-repeat;
  background-position:center;filter:none}
.scan-cap,.s-photo figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--sans);font-size:clamp(.82rem,1.2vw,1rem);color:#f4f1ea;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  padding:3rem 2rem 1.4rem;text-align:center;line-height:1.45}
.scan-cap{font-style:italic;letter-spacing:.08em}

/* ---- callout --------------------------------------------------------------*/
.s-callout{display:flex;align-items:center;justify-content:center}
.callout-card{max-width:64ch;background:#fbf3df;border:1px solid #e7d6ab;
  border-left:6px solid var(--accent);border-radius:10px;padding:2.2rem 2.6rem;
  text-align:left;box-shadow:0 12px 34px rgba(0,0,0,.1)}
.callout-mark{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;color:var(--accent);font-weight:700;display:block;margin-bottom:.8rem}
.callout-card .body{font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.55}

/* ---- photo (full-bleed) ---------------------------------------------------*/
.kind-photo{background:var(--dark);padding:0}
.s-photo{position:absolute;inset:0}
.s-photo .bg{background-size:contain;background-repeat:no-repeat;background-position:center}
.s-photo .photo-tag{display:block;font-style:italic;color:#d7b877;margin-bottom:.2rem}

/* ---- medals ---------------------------------------------------------------*/
.s-medal img{max-height:54vh;border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);background:#fff;padding:.5rem}
.s-medal.featured img{max-height:62vh}
.s-medal figcaption{font-size:clamp(1rem,1.5vw,1.3rem);color:var(--muted);
  max-width:52ch;margin:1.4rem auto 0;line-height:1.5}

/* ---- chrome: progress, hud, nav, hint, menu, resume -----------------------*/
/* inconspicuous "back to the main site" link, top-left of every slide.
   Themed per slide (light vs dark) so it's always legible but never loud. */
.home-link{position:fixed;top:.45rem;left:.8rem;z-index:45;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.06em;text-decoration:none;color:var(--soft);
  opacity:.72;padding:.45rem .7rem;transition:opacity .2s,color .3s}
.home-link:hover{opacity:1;text-decoration:underline}
body.dark .home-link{color:#cfc8ba;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(0,0,0,.12);z-index:40}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.hud{position:fixed;bottom:1.5rem;left:1.4rem;z-index:41;font-family:var(--sans);
  color:#bbb;mix-blend-mode:difference;opacity:.85}
.hud-count{font-size:.78rem;letter-spacing:.05em}

/* bottom chapter bar: a breadcrumb (month-year · location) over a clickable
   chapter timeline whose segment widths track each chapter's length. */
.botbar{position:fixed;left:0;right:0;bottom:0;z-index:39;
  padding-bottom:.4rem;background:linear-gradient(transparent,rgba(0,0,0,.05));
  pointer-events:none}
.slide[data-dark] ~ .botbar{} /* (kept for clarity; per-slide theming via JS) */
.chapterbar{text-align:center;font-family:var(--sans);margin:0 0 .35rem;
  letter-spacing:.04em;transition:color .4s}
.cb-when{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:700}
.cb-sep{margin:0 .55em;color:var(--soft);opacity:.6}
.cb-chapter{font-size:.92rem;color:var(--muted)}
.cb-sep.hide{display:none}
.timeline{display:flex;gap:2px;width:min(1180px,92vw);margin:0 auto;
  height:18px;align-items:flex-end;pointer-events:auto}
.seg{position:relative;height:5px;border:none;padding:0;border-radius:3px;
  background:rgba(0,0,0,.16);cursor:pointer;transition:height .18s,background .18s;overflow:visible}
.seg:hover{height:11px;background:var(--accent)}
.seg.active{height:11px;background:var(--accent)}
.seg .seg-label{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.68rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:.12rem .5rem;border-radius:4px;
  opacity:0;transition:opacity .15s;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.seg:hover .seg-label{opacity:1}
/* dark slides: lighten the bar so it stays legible over photos/dividers */
body.dark .cb-when{color:#d7b877}
body.dark .cb-chapter{color:#cfc8ba}
body.dark .seg{background:rgba(255,255,255,.28)}
body.dark .seg.active,body.dark .seg:hover{background:#d7b877}
.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:40;
  border:none;background:transparent;color:var(--soft);font-size:3rem;
  cursor:pointer;padding:0 1rem;opacity:.35;transition:opacity .2s;font-family:var(--sans);
  mix-blend-mode:difference;line-height:1}
.nav-arrow:hover{opacity:.9}
.nav-arrow.prev{left:.3rem}.nav-arrow.next{right:.3rem}
.hint{position:fixed;bottom:1.1rem;right:1.4rem;z-index:40;font-family:var(--sans);
  font-size:.78rem;color:#999;transition:opacity .8s;mix-blend-mode:difference}
.hint.gone{opacity:0;pointer-events:none}
.menu,.resume{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;background:rgba(16,16,20,.78);backdrop-filter:blur(3px)}
.menu[hidden],.resume[hidden]{display:none}
.menu-card,.resume-card{background:var(--paper);color:var(--ink);border-radius:14px;
  padding:2rem 2.4rem;max-width:560px;width:90%;max-height:82vh;overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.menu-card h3{margin:0 0 1rem;color:var(--accent);font-size:1.4rem}
.menu-card ul{list-style:none;margin:0;padding:0;
  columns:2;column-gap:1.4rem}
.menu-card li{break-inside:avoid;margin:0 0 .2rem}
.menu-card button{width:100%;text-align:left;background:none;border:none;
  font-family:var(--serif);font-size:1.02rem;color:var(--ink);padding:.4rem .5rem;
  border-radius:6px;cursor:pointer}
.menu-card button:hover{background:#efe7d6;color:var(--accent)}
.menu-close{font-family:var(--sans);font-size:.75rem;color:var(--soft);
  text-align:center;margin:1.2rem 0 0}
.resume-card{text-align:center}
.resume-card p{font-size:1.2rem;margin:0 0 1.3rem}
.resume-card button{font-family:var(--sans);font-size:1rem;padding:.6rem 1.4rem;
  margin:0 .4rem;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.resume-card button.ghost{background:transparent;color:var(--muted);
  border:1px solid var(--line)}
@media (max-width:620px){.menu-card ul{columns:1}}