/* ==========================================================================
   Governor Mark White — A Texas Retrospective
   Palette drawn from the 1982 campaign materials:
     Campaign Blue  #172473  (sampled from the original logo)
     Midnight       #0E1447
     Archival Paper #F5F2E9
     Ink            #1B1D2B
     Capitol Red    #A3271E  (Texas flag, used sparingly)
   Type:
     Display  Besley (Clarendon slab — sturdy, 1980s Texas newsprint)
     Body     Source Serif 4
     Utility  Archivo, letterspaced caps (echoes "FOR GOVERNOR" on the button)
   ========================================================================== */

:root{
  --blue:#172473;
  --blue-deep:#0E1447;
  --paper:#F5F2E9;
  --paper-dim:#EBE7DA;
  --ink:#1B1D2B;
  --ink-soft:#4A4C5E;
  --red:#A3271E;
  --on-blue-dim:#9BA3D4;
  --rule:#C9C3B0;
  --display:'Besley',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --utility:'Archivo',Helvetica,Arial,sans-serif;
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:1.0625rem;
}

img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--utility);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1rem;
}
.eyebrow.light{color:var(--on-blue-dim)}

h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin-bottom:1.25rem;
}

/* ---------- nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  background:var(--blue-deep);
  padding:.65rem 24px;
  border-bottom:3px solid var(--red);
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.1}
.brand-name{
  font-family:var(--display);font-weight:800;color:#fff;font-size:1.15rem;
}
.brand-sub{
  font-family:var(--utility);font-weight:500;font-size:.58rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--on-blue-dim);
}
.navlinks{display:flex;gap:1.4rem;flex-wrap:wrap}
.navlinks a{
  font-family:var(--utility);font-weight:600;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:#E8E9F4;text-decoration:none;
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.navlinks a:hover,.navlinks a:focus-visible{border-bottom-color:#fff}
a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.intro a:focus-visible,.life a:focus-visible,.gallery a:focus-visible,.archive a:focus-visible{outline-color:var(--blue)}

/* ---------- hero ---------- */
.hero{
  background:var(--blue);
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue) 62%,var(--blue-deep) 100%);
  color:#fff;
  padding:clamp(3rem,7vw,5.5rem) 0 0;
  overflow:hidden;
}
.hero-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:end;
}
.hero-lockup{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(4rem,10.5vw,7.5rem);
  line-height:.92;
  letter-spacing:-.015em;
  color:#fff;
}
.hero-rule{
  width:min(420px,80%);height:4px;background:#fff;margin:1.4rem 0 .9rem;
}
.hero-rule.small{width:120px;height:3px;margin:1.2rem auto}
.hero-forgov{
  font-family:var(--utility);font-weight:600;
  font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.58em;text-transform:uppercase;
  color:var(--on-blue-dim);
  margin-bottom:1.6rem;
}
.hero-lede{
  max-width:46ch;color:#DDE0F2;font-size:1.1rem;margin-bottom:2rem;
}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3.5rem}
.btn{
  font-family:var(--utility);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.5rem;border:2px solid #fff;
  transition:background .15s,color .15s;
}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:transparent;color:#fff}
.btn-ghost{color:#fff}
.btn-ghost:hover{background:#fff;color:var(--blue)}

.hero-photo{position:relative;margin:0}
.hero-photo img{
  width:100%;max-height:560px;object-fit:cover;object-position:top;
  border:6px solid #fff;border-bottom:none;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hero-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(14,20,71,.9));
  color:#DDE0F2;
  font-family:var(--utility);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:2.4rem 1rem .8rem;
}

/* ---------- intro ---------- */
.intro{padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--rule)}
.intro-grid{display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:start}
.intro-portrait img{
  width:100%;border:1px solid var(--rule);
  box-shadow:8px 8px 0 var(--blue);
}
.intro-portrait figcaption,
.ph figcaption{
  font-family:var(--utility);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:.7rem;
}
.intro-copy p{margin-bottom:1rem;max-width:62ch}
.intro-copy em{color:var(--blue);font-weight:600}

/* ---------- ledger timeline ---------- */
.life{padding:clamp(3.5rem,7vw,6rem) 0}
.ledger{list-style:none;margin-top:2.5rem;border-top:3px solid var(--ink)}
.ledger li{
  display:grid;grid-template-columns:180px 1fr;gap:2rem;
  padding:1.6rem 0;border-bottom:1px solid var(--rule);
}
.ledger-year{
  font-family:var(--display);font-weight:800;
  font-size:2rem;line-height:1;color:var(--blue);
}
.ledger-year span{font-size:1.1rem;color:var(--ink-soft);font-weight:700}
.ledger-body h3{
  font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.35rem;
}
.ledger-body p{color:var(--ink-soft);max-width:66ch}

/* ---------- education feature ---------- */
.education{
  background:var(--blue);
  background:linear-gradient(20deg,var(--blue-deep),var(--blue) 55%);
  color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;
}
.edu-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.education h2{color:#fff;max-width:22ch}
.edu-copy p{color:#DDE0F2;margin-bottom:1rem;max-width:58ch}
.edu-quote{
  border-left:5px solid var(--red);
  padding-left:2rem;
}
.edu-quote p{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15;
  margin-bottom:1rem;
}
.edu-quote cite{
  font-family:var(--utility);font-style:normal;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-blue-dim);
}

/* ---------- gallery ---------- */
.gallery{padding:clamp(3.5rem,7vw,6rem) 0}
.photo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2.2rem;
}
.ph{margin:0}
.ph img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--rule);background:var(--paper-dim);
  filter:saturate(.96);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ph img:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(23,36,115,.18)}
.ph.wide{grid-column:span 2}
.ph.button-card img{object-fit:contain;background:#fff;padding:1rem}

/* ---------- archive ---------- */
.archive{
  padding:clamp(3.5rem,7vw,6rem) 0;
  background:var(--paper-dim);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.archive-lede{max-width:60ch;color:var(--ink-soft);margin-bottom:2.2rem}
.archive-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.acard{
  display:flex;flex-direction:column;gap:.55rem;
  background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--blue);
  padding:1.6rem 1.5rem 1.4rem;
  text-decoration:none;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.acard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,36,115,.14)}
.acard-kicker{
  font-family:var(--utility);font-weight:600;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--red);
}
.acard h3{font-family:var(--display);font-weight:700;font-size:1.15rem}
.acard p{font-size:.95rem;color:var(--ink-soft);flex-grow:1}
.acard-go{
  font-family:var(--utility);font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}

/* ---------- memoriam footer ---------- */
.memoriam{
  background:var(--blue-deep);color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;text-align:center;
}
.mem-name{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;
}
.mem-dates{
  font-family:var(--utility);font-weight:600;font-size:.78rem;
  letter-spacing:.4em;color:var(--on-blue-dim);margin-bottom:1rem;
}
.mem-line{color:#C9CDE8;font-size:.98rem;margin-bottom:2.5rem}
.mem-credit{
  font-family:var(--utility);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:#5B639B;
}

/* ---------- achievements ---------- */
.achievements{
  padding:clamp(3.5rem,7vw,6rem) 0;
  background:var(--paper-dim);
  border-top:1px solid var(--rule);
}
.ach-lede{max-width:64ch;color:var(--ink-soft);margin-bottom:2.2rem}
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.ach-card{
  background:var(--paper);border:1px solid var(--rule);
  border-top:4px solid var(--red);
  padding:1.6rem 1.5rem 1.5rem;
}
.ach-card h3{
  font-family:var(--display);font-weight:700;font-size:1.12rem;
  margin-bottom:.55rem;color:var(--blue);
}
.ach-card p{font-size:.95rem;color:var(--ink-soft)}
.ach-note{
  margin-top:2rem;font-size:.95rem;color:var(--ink-soft);
  font-style:italic;max-width:70ch;
}

/* ---------- media archive page ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue) 62%,var(--blue-deep) 100%);
  color:#fff;
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);
}
.page-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.6rem,6.5vw,4.5rem);line-height:1;color:#fff;
}
.page-hero .hero-rule{width:min(320px,70%)}
.page-lede{max-width:64ch;color:#DDE0F2;font-size:1.08rem}

.mcat{padding:clamp(2.8rem,5.5vw,4.5rem) 0;border-bottom:1px solid var(--rule)}
.mcat.alt{background:var(--paper-dim)}
.mcat-head{max-width:70ch;margin-bottom:1.8rem}
.mcat-num{
  font-family:var(--utility);font-weight:600;font-size:.68rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red);
  display:block;margin-bottom:.6rem;
}
.mcat h2{margin-bottom:.7rem}
.mcat-head p{color:var(--ink-soft);margin-bottom:1.4rem}
.btn-blue{
  display:inline-block;
  font-family:var(--utility);font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.8rem 1.4rem;
  background:var(--blue);color:#fff;border:2px solid var(--blue);
  transition:background .15s,color .15s;
}
.btn-blue:hover{background:transparent;color:var(--blue)}

.mlist{
  list-style:none;
  columns:2;column-gap:3rem;
  border-top:3px solid var(--ink);
  padding-top:.4rem;
}
.mlist li{break-inside:avoid;border-bottom:1px solid var(--rule)}
.mlist a{
  display:block;padding:.75rem .2rem;
  color:var(--ink);text-decoration:none;
  font-size:.98rem;
  transition:color .12s,padding-left .12s;
}
.mlist a::before{
  content:"▸";color:var(--red);margin-right:.6rem;font-size:.8rem;
}
.mlist a:hover{color:var(--blue);padding-left:.4rem}

.mem-link{color:#C9CDE8;text-decoration:none;border-bottom:1px solid #5B639B}
.mem-link:hover{color:#fff;border-bottom-color:#fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-inner,.edu-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-photo img{max-height:420px}
  .intro-grid{grid-template-columns:1fr}
  .intro-portrait{max-width:280px}
  .photo-grid,.archive-cards{grid-template-columns:repeat(2,1fr)}
  .ph.wide{grid-column:span 2}
  .ach-grid{grid-template-columns:repeat(2,1fr)}
  .mlist{columns:1}
}
@media (max-width:600px){
  .topnav{flex-direction:column;align-items:flex-start;gap:.5rem}
  .navlinks{gap:.9rem}
  .ledger li{grid-template-columns:1fr;gap:.4rem}
  .photo-grid,.archive-cards,.ach-grid{grid-template-columns:1fr}
  .ph.wide{grid-column:span 1}
}

/* ---------- category jump nav on media page ---------- */
.cat-jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.cat-jump a{
  font-family:var(--utility);font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#E8E9F4;border:1px solid rgba(255,255,255,.35);
  padding:.45rem .85rem;
  transition:background .15s,color .15s;
}
.cat-jump a:hover{background:#fff;color:var(--blue)}

/* ---------- artifact download block ---------- */
.artifact{
  margin-top:2.6rem;
  display:grid;grid-template-columns:1fr 220px;align-items:center;
  background:var(--blue);
  background:linear-gradient(110deg,var(--blue-deep),var(--blue) 60%);
  color:#fff;
  padding:2.2rem 2.4rem;
  gap:2rem;
}
.artifact-kicker{
  font-family:var(--utility);font-weight:600;font-size:.64rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--on-blue-dim);
  display:block;margin-bottom:.7rem;
}
.artifact h3{
  font-family:var(--display);font-weight:800;font-size:1.5rem;
  line-height:1.15;margin-bottom:.8rem;
}
.artifact p{color:#DDE0F2;font-size:.98rem;margin-bottom:1.4rem;max-width:60ch}
.artifact .btn-blue{background:#fff;color:var(--blue);border-color:#fff}
.artifact .btn-blue:hover{background:transparent;color:#fff}
.artifact-seal{
  text-align:center;
  border:2px solid rgba(255,255,255,.4);
  border-radius:50%;
  aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;padding:1rem;
}
.artifact-seal span{font-size:2.6rem;line-height:1;color:#fff}
.artifact-seal p{
  font-family:var(--utility);font-weight:600;font-size:.6rem;
  letter-spacing:.22em;color:var(--on-blue-dim);margin:0;
}
.inline-doc{
  color:var(--blue);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--blue);
}
.inline-doc:hover{color:var(--red);border-bottom-color:var(--red)}
@media (max-width:700px){
  .artifact{grid-template-columns:1fr;padding:1.8rem 1.5rem}
  .artifact-seal{max-width:160px;margin:0 auto}
}

/* ---------- scrapbook ---------- */
.scrapbook{
  margin-top:2.6rem;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;
  padding:2.4rem;
  background:
    radial-gradient(circle at 20% 15%, rgba(23,36,115,.05), transparent 55%),
    var(--paper-dim);
  border:1px solid var(--rule);
}
.sb-page{margin:0;text-align:center}
.sb-page a{display:block;text-decoration:none}
.sb-page img{
  width:100%;max-width:420px;margin:0 auto;
  background:#fff;
  border:1px solid #D8D2BF;
  padding:8px;
  box-shadow:0 6px 18px rgba(27,29,43,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
.sb-page.wide img{max-width:560px}
.tilt-l img{transform:rotate(-1.4deg)}
.tilt-r img{transform:rotate(1.2deg)}
.tilt-l2 img{transform:rotate(-.8deg)}
.tilt-r2 img{transform:rotate(1.6deg)}
.sb-page a:hover img,.sb-page a:focus-visible img{
  transform:rotate(0) translateY(-4px);
  box-shadow:0 14px 30px rgba(23,36,115,.3);
}
.sb-page figcaption{
  font-family:var(--utility);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:1rem;
}
@media (max-width:700px){
  .scrapbook{grid-template-columns:1fr;padding:1.4rem;gap:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  .tilt-l img,.tilt-r img,.tilt-l2 img,.tilt-r2 img{transform:none}
}

/* ---------- retrospective document feature ---------- */
.doc-feature{
  grid-template-columns:260px 1fr;
  align-items:center;
}
.doc-cover{margin:0;text-align:center}
.doc-cover a{display:inline-block;text-decoration:none}
.doc-cover img{
  width:100%;max-width:240px;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.doc-cover a:hover img,.doc-cover a:focus-visible img{transform:translateY(-4px) scale(1.015)}
.doc-cover figcaption{
  font-family:var(--utility);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-blue-dim);
  margin-top:.9rem;
}
.doc-note{
  font-size:.82rem !important;color:var(--on-blue-dim) !important;
  margin-top:.9rem;margin-bottom:0 !important;
}
@media (max-width:700px){
  .doc-feature{grid-template-columns:1fr}
  .doc-cover{margin-bottom:.5rem}
}