/* ========= WILLIAMSFAMILY.RED — 70 YEARS OF LIGHT ========= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}

:root{
  --navy-900:#07081b;
  --navy-800:#0e1130;
  --navy-700:#151942;
  --navy-600:#1d2157;
  --coral:#e8645d;
  --coral-soft:#f08e88;
  --gold:#f0c76a;
  --gold-soft:#f5d88f;
  --cream:#fdf9ee;
  --cream-70:rgba(253,249,238,0.7);
  --cream-40:rgba(253,249,238,0.4);
  --cream-15:rgba(253,249,238,0.15);
  --cream-08:rgba(253,249,238,0.08);
  --serif: 'Fraunces', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

body{
  background:var(--navy-900);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ===== SKY ===== */
.sky{
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(240,199,106,0.06), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(232,100,93,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(29,33,87,0.8), transparent 70%),
    linear-gradient(180deg, #05061a 0%, #0a0c26 40%, #07081b 100%);
  z-index:-2;
}
.sky::after{
  /* Starfield — tiny twinkles */
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 15% 18%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 71%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 24%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 83%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 40%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 12%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 9% 58%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 92%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 46%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 69% 60%, #f0c76a 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 76%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 35%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 5%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 11%, #fdf9ee 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 96%, #fdf9ee 50%, transparent 51%);
  opacity:0.7;
  animation: twinkle 8s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.7} 50%{opacity:.35} }

/* Shooting stars */
.shooting-stars{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.shooting-stars span{
  position:absolute; top:-50px; left:-50px;
  width:3px; height:3px; border-radius:50%;
  background:#fdf9ee;
  box-shadow: 0 0 8px 2px rgba(253,249,238,0.6), 0 0 30px 6px rgba(240,199,106,0.3);
}
.shooting-stars span::before{
  content:""; position:absolute;
  top:50%; right:0;
  width:80px; height:1px;
  background: linear-gradient(90deg, rgba(253,249,238,0.9), transparent);
  transform-origin:right center;
}
.shooting-stars span:nth-child(1){ animation: shoot 11s linear infinite; animation-delay: 2s; }
.shooting-stars span:nth-child(2){ animation: shoot 15s linear infinite; animation-delay: 7s; top:10%;}
.shooting-stars span:nth-child(3){ animation: shoot 19s linear infinite; animation-delay: 13s; top:25%;}
@keyframes shoot{
  0%   { transform: translate(0, 0) rotate(35deg); opacity:0; }
  5%   { opacity:1; }
  30%  { opacity:1; }
  40%  { transform: translate(60vw, 45vh) rotate(35deg); opacity:0; }
  100% { transform: translate(60vw, 45vh) rotate(35deg); opacity:0; }
}

/* ===== TYPOGRAPHY ===== */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:12px;
  font-weight:500;
  color:var(--gold);
  margin:0 0 18px;
}
.display{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0 0 28px;
}
.display-sub{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size: clamp(22px, 3vw, 32px);
  color:var(--gold-soft);
  margin:0 0 28px;
}
.display.center, .display-sub.center{ text-align:center; }
.body{
  font-size:18px;
  line-height:1.75;
  color:var(--cream);
  max-width:65ch;
  margin:0 0 20px;
}
.body.center{ margin-left:auto; margin-right:auto; text-align:center; }
.body.subhead{ max-width:50ch; color:var(--cream-70); }
em{ font-style:italic; color:var(--gold-soft); }

/* ===== HERO ===== */
.hero{
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 24px 40px;
  position:relative;
}
.hero-inner{
  text-align:center;
  max-width:720px;
  position:relative;
}
.constellation{
  width: min(82vw, 520px);
  height: auto;
  margin: 0 auto 28px;
  display:block;
  filter: drop-shadow(0 0 40px rgba(240,199,106,0.25));
}
.hero-title{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(52px, 11vw, 112px);
  line-height:0.98;
  letter-spacing:-0.02em;
  margin:0 0 10px;
  color:var(--cream);
}
.hero-title span{ display:inline-block; }
.hero-title span:first-child{
  font-style:italic;
  color:var(--gold);
}
.hero-subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight:400;
  color:var(--coral-soft);
  margin:0 0 42px;
  letter-spacing:0.01em;
}
.hero-blurb{
  font-size:17px;
  line-height:1.75;
  max-width:560px;
  margin: 0 auto;
  color: var(--cream-70);
}
.scroll-hint{
  position:absolute;
  bottom:-80px; left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  text-decoration:none;
  font-size:22px;
  opacity:.7;
  animation: bob 2.4s ease-in-out infinite;
  transition: opacity .2s;
}
.scroll-hint:hover{ opacity:1 }
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* Constellation stars */
.constellation .star{
  fill:var(--gold);
  filter: drop-shadow(0 0 4px var(--gold));
  opacity:0;
  transform-box: fill-box;
  transform-origin: center;
  animation: star-in .8s ease-out forwards;
}
.constellation .star.accent{
  fill: var(--coral-soft);
  filter: drop-shadow(0 0 6px var(--coral));
}
@keyframes star-in{
  0%{ opacity:0; transform: scale(0.1) }
  60%{ opacity:1; transform: scale(1.4) }
  100%{ opacity:.95; transform: scale(1) }
}
.constellation .heart-glow{
  fill: none;
  stroke: rgba(240,199,106,0.18);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 16px rgba(240,199,106,0.35));
}

/* ===== PANELS ===== */
.panel{
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 28px;
  position:relative;
}
.panel:not(:last-of-type)::after{
  content:"";
  display:block;
  width:60px;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 80px auto 0;
  opacity: .5;
}
.section-head{
  text-align:center;
  margin: 0 auto 64px;
  max-width: 720px;
}

.opening .display{ max-width: 20ch; }
.opening .body{ max-width: 62ch; }
.opening .eyebrow{ color:var(--coral); }

/* ===== COUNTER ===== */
.counter{ padding: 48px 28px; }
.counter-card{
  max-width: 520px;
  margin: 0 auto;
  text-align:center;
  padding: 48px 32px;
  border: 1px solid var(--cream-15);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(29,33,87,0.3), rgba(7,8,27,0.3));
  backdrop-filter: blur(8px);
}
.counter-num{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(80px, 16vw, 140px);
  line-height:1;
  color:var(--gold);
  text-shadow: 0 0 40px rgba(240,199,106,0.4);
  margin-bottom: 8px;
}
.counter-label{
  font-family:var(--sans);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin-bottom: 20px;
}
.counter-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size: 19px;
  color: var(--coral-soft);
  margin:0;
}

/* ===== GALLERY ===== */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.gallery-item{
  position:relative;
  aspect-ratio: 1;
  overflow:hidden;
  border-radius: 14px;
  cursor:pointer;
  background: var(--cream-08);
  border: 1px solid var(--cream-08);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.gallery-item:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 48px rgba(240,199,106,0.15);
}
.gallery-item img,
.gallery-item video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.gallery-item .meta{
  position:absolute; inset: auto 0 0 0;
  padding: 10px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(7,8,27,0.85));
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-70);
  display:flex;
  justify-content: space-between;
  font-weight: 500;
}
.gallery-item .meta .who{ color: var(--gold); }

/* Featured wide item — first photo spans 2 cols on large screens */
.gallery-item.wide{ grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
@media (max-width: 720px){
  .gallery-item.wide{ grid-column: span 1; grid-row: span 1; }
}

/* Video indicator */
.gallery-item.video::before{
  content:"▶";
  position:absolute; top:12px; right:14px;
  font-size: 18px;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  z-index:2;
}

/* ===== TRIBUTES ===== */
.tributes{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.tribute-card{
  padding: 32px 30px;
  border: 1px solid var(--cream-15);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(29,33,87,0.3), rgba(14,17,48,0.15));
  position: relative;
}
.tribute-card::before{
  content:"“";
  position:absolute;
  top:-16px; left:18px;
  font-family:var(--serif);
  font-weight:500;
  font-size: 72px;
  line-height:1;
  color: var(--gold);
  opacity: .6;
}
.tribute-card .t-text{
  font-family:var(--serif);
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
  color: var(--cream);
  margin: 0 0 18px;
}
.tribute-card .t-attr{
  font-family:var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.tribute-card.highlight{
  border-color: rgba(240,199,106,0.35);
  background: linear-gradient(180deg, rgba(240,199,106,0.06), rgba(14,17,48,0.15));
}

/* ===== CALL MOM ===== */
.call-panel{ padding: 96px 28px; }
.call-card{
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 36px;
  text-align:center;
  border: 1px solid rgba(240,199,106,0.25);
  border-radius: 28px;
  background: radial-gradient(ellipse at top, rgba(232,100,93,0.12), transparent 70%), linear-gradient(180deg, rgba(29,33,87,0.45), rgba(7,8,27,0.45));
  position: relative;
  overflow:hidden;
}
.call-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(240,199,106,0.12), transparent 60%);
  pointer-events:none;
}
.call-card .eyebrow{ color: var(--coral); }
.pullquote{
  font-family:var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 26px;
  quotes:"“" "”" "‘" "’";
}
.cta-button{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  padding: 16px 34px;
  margin: 14px 0 12px;
  background: var(--coral);
  color: var(--cream);
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 26px rgba(232,100,93,0.35);
  transition: transform .15s, box-shadow .3s, background .2s;
}
.cta-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(232,100,93,0.5);
  background: var(--coral-soft);
}
.cta-ico{ font-size:20px; }
.caption{
  font-size: 12px;
  color: var(--cream-40);
  margin: 8px 0 0;
  font-style:italic;
}

/* ===== OPERATION ===== */
.operation-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.op-card{
  padding: 30px 26px;
  border: 1px solid var(--cream-15);
  border-radius: 16px;
  background: rgba(14,17,48,0.35);
}
.op-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size: 24px;
  color: var(--gold);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.op-card p{
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-70);
  margin: 0 0 14px;
}
.op-card.wink{ border-color: rgba(232,100,93,0.3); }
.op-card.wink h3{ color: var(--coral-soft); }
.op-link{
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.op-link:hover{ color: var(--coral-soft); border-bottom-color: var(--coral-soft); }

/* ===== CLOSING ===== */
.closing-section{
  text-align:center;
  padding: 120px 28px 80px;
}
.closing-section .display{ color: var(--gold); }
.closing-body{
  font-size: 18px;
  line-height: 1.8;
  max-width: 60ch;
  margin: 40px auto;
  color: var(--cream);
}
.sig{
  font-family:var(--serif);
  font-style: italic;
  color: var(--coral-soft);
  margin-top: 32px;
}

/* ===== FOOTER ===== */
.site-foot{
  padding: 48px 28px;
  text-align:center;
  color: var(--cream-40);
  font-size: 13px;
  letter-spacing: 0.1em;
  border-top: 1px solid var(--cream-08);
  margin-top: 60px;
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(5,6,26,0.94);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 32px;
}
.lightbox[aria-hidden="false"]{ display:flex; }
.lb-close{
  position:absolute;
  top: 20px; right: 24px;
  background: none;
  border:1px solid var(--cream-15);
  color: var(--cream);
  width: 44px; height: 44px;
  border-radius:50%;
  cursor:pointer;
  font-size: 24px;
  line-height: 1;
}
.lb-close:hover{ background: var(--cream-08); }
.lb-content{ max-width: 90vw; max-height: 80vh; }
.lb-content img, .lb-content video{
  max-width: 100%; max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display:block;
}
.lb-caption{
  margin-top: 16px;
  color: var(--cream-70);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align:center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px){
  .panel{ padding: 64px 20px; }
  .call-card{ padding: 42px 24px; }
  .tribute-card{ padding: 28px 22px; }
  .counter-card{ padding: 36px 22px; }
}

/* Reduce motion honor */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ========================================================= */
/* ========  V2 ADDITIONS: 70-Things, Archive, Pull  ======== */
/* ========================================================= */

/* Constellation: un-lit stars are dim; "lit" ones glow */
.constellation .star{
  fill: rgba(240,199,106,0.16);
  filter: none;
  opacity: 0.85;
  animation: star-in .8s ease-out forwards;
  transition: fill .6s ease, filter .6s ease;
}
.constellation .star.lit{
  fill: var(--gold);
  filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 14px rgba(240,199,106,0.4));
}
.constellation .star.lit:nth-of-type(7n){
  fill: var(--coral-soft);
  filter: drop-shadow(0 0 7px var(--coral-soft)) drop-shadow(0 0 14px rgba(232,100,93,0.5));
}

/* Hero counter */
.hero-counter{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  margin: 8px auto 28px;
  padding: 14px 34px;
  border: 1px solid var(--cream-15);
  border-radius: 999px;
  background: rgba(7,8,27,0.4);
  backdrop-filter: blur(6px);
}
.hero-count-num{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px rgba(240,199,106,0.35);
}
.hero-count-label{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin-top: 4px;
}

/* Pull quote (Dad's line) */
.pull{
  text-align:center;
  padding: 56px 28px;
  max-width: 900px;
}
.pull-bq{
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.15;
  color: var(--cream);
  margin: 0 auto 18px;
  max-width: 18ch;
  letter-spacing: -0.015em;
  text-shadow: 0 0 40px rgba(240,199,106,0.18);
}
.pull-bq::before{ content:"“"; color: var(--gold); margin-right: 6px; }
.pull-bq::after{ content:"”"; color: var(--gold); margin-left: 6px; }
.pull-attr{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* Section head progress label */
.progress-label{
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin: 18px 0 0;
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.progress-label strong{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.live-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff5a5f;
  box-shadow: 0 0 10px rgba(255,90,95,0.9);
  animation: pulse-dot 1.6s ease-in-out infinite;
  display:inline-block;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.5; transform: scale(0.85); }
}
.live-word{ color: #ff8a8a; letter-spacing: 0.3em; }
.done-word{ color: var(--gold); letter-spacing: 0.3em; }

/* 70-Things grid */
.seventy-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.tri-card{
  position: relative;
  display:flex;
  flex-direction:column;
  border: 1px solid var(--cream-15);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(29,33,87,0.38), rgba(14,17,48,0.2));
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .35s;
}
.tri-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,199,106,0.28);
  border-color: rgba(240,199,106,0.28);
}
.tri-card.has-media{ cursor: pointer; }
.tri-num{
  position:absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  color: var(--navy-900);
  background: var(--gold);
  border-radius: 8px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.tri-media{
  position:relative;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow:hidden;
}
.tri-media img, .tri-media video{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tri-card:hover .tri-media img,
.tri-card:hover .tri-media video{ transform: scale(1.04); }
.tri-vidtag{
  position:absolute;
  top: 12px; right: 12px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 4px 8px;
  background: rgba(7,8,27,0.75);
  color: var(--cream);
  border-radius: 4px;
}
.tri-more{
  position:absolute;
  bottom: 10px; right: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  background: rgba(7,8,27,0.78);
  color: var(--gold);
  border-radius: 999px;
  border: 1px solid rgba(240,199,106,0.35);
}
.tri-body{
  padding: 20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  flex: 1;
}
.tri-text{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream);
  margin: 0;
  white-space: pre-wrap;
}
.tri-card:not(.has-media) .tri-body{
  padding-top: 52px; /* leave room for the number badge when no image */
}
.tri-attr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--cream-08);
}
.tri-who{ color: var(--gold); font-weight: 600; }
.tri-time{ color: var(--cream-40); }
.tri-card.just-arrived{
  animation: new-glow 3.5s ease-out;
}
@keyframes new-glow{
  0%{ box-shadow: 0 0 0 0 rgba(240,199,106,0.7), 0 0 40px rgba(240,199,106,0.5); border-color: var(--gold); }
  100%{ box-shadow: 0 0 0 0 rgba(240,199,106,0); border-color: var(--cream-15); }
}
/* === FEATURED TRIBUTE (Steven's #71 — the miraculous bonus) === */
.tri-card.featured{
  border-color: rgba(240,199,106,0.45);
  overflow: visible;
  z-index: 2;
}
.tri-card.featured .tri-num{
  background: linear-gradient(135deg, var(--gold), var(--coral));
  animation: badge-glow 2s ease-in-out infinite alternate;
}
@keyframes badge-glow{
  0%{ box-shadow: 0 0 8px rgba(240,199,106,0.4); }
  100%{ box-shadow: 0 0 20px rgba(240,199,106,0.8), 0 0 40px rgba(240,199,106,0.3); }
}
.tri-card.featured .tri-media{
  aspect-ratio: 3 / 4;
}
.tri-card.featured .tri-media img{
  object-position: top center;
}
/* Holy lens flare over the photo */
.tri-card.featured .tri-media::after{
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 140%; height: 160%;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255,255,220,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 20%, rgba(240,199,106,0.15) 0%, transparent 40%),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.12) 0%, transparent 35%);
  pointer-events: none;
  z-index: 2;
  animation: lens-flare 6s ease-in-out infinite alternate;
}
@keyframes lens-flare{
  0%{ opacity: 0.6; transform: translate(0, 0) scale(1); }
  50%{ opacity: 1; transform: translate(3px, -2px) scale(1.03); }
  100%{ opacity: 0.7; transform: translate(-2px, 1px) scale(0.98); }
}
/* Heavenly rays radiating from behind the card */
.tri-card.featured::before{
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 300px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(240,199,106,0.06) 8deg,
    transparent 16deg,
    transparent 30deg,
    rgba(240,199,106,0.05) 38deg,
    transparent 46deg,
    transparent 60deg,
    rgba(240,199,106,0.06) 68deg,
    transparent 76deg,
    transparent 90deg,
    rgba(240,199,106,0.05) 98deg,
    transparent 106deg,
    transparent 120deg,
    rgba(240,199,106,0.06) 128deg,
    transparent 136deg,
    transparent 150deg,
    rgba(240,199,106,0.05) 158deg,
    transparent 166deg,
    transparent 180deg,
    rgba(240,199,106,0.06) 188deg,
    transparent 196deg,
    transparent 210deg,
    rgba(240,199,106,0.05) 218deg,
    transparent 226deg,
    transparent 240deg,
    rgba(240,199,106,0.06) 248deg,
    transparent 256deg,
    transparent 270deg,
    rgba(240,199,106,0.05) 278deg,
    transparent 286deg,
    transparent 300deg,
    rgba(240,199,106,0.06) 308deg,
    transparent 316deg,
    transparent 330deg,
    rgba(240,199,106,0.05) 338deg,
    transparent 346deg,
    transparent 360deg
  );
  border-radius: 50%;
  z-index: -1;
  animation: divine-rays 12s linear infinite;
  pointer-events: none;
}
@keyframes divine-rays{
  0%{ transform: translateX(-50%) rotate(0deg) scale(1); opacity: 0.8; }
  50%{ transform: translateX(-50%) rotate(180deg) scale(1.15); opacity: 1; }
  100%{ transform: translateX(-50%) rotate(360deg) scale(1); opacity: 0.8; }
}
/* Floating sparkle particles */
.miracle-sparkle{
  position: absolute;
  bottom: -10px;
  z-index: 5;
  pointer-events: none;
  animation: sparkle-rise linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(240,199,106,0.8));
}
@keyframes sparkle-rise{
  0%{ transform: translateY(0) rotate(0deg) scale(0); opacity: 0; }
  10%{ opacity: 1; transform: translateY(-20px) rotate(30deg) scale(1); }
  50%{ opacity: 0.8; }
  90%{ opacity: 0; }
  100%{ transform: translateY(-350px) rotate(200deg) scale(0.3); opacity: 0; }
}

.seventy-foot{
  text-align:center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-70);
  font-size: 15px;
  max-width: 54ch;
  margin: 56px auto 0;
}

/* Archive grid */
.archive-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.arch-card{
  padding: 28px 28px 22px;
  border: 1px solid var(--cream-15);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14,17,48,0.42), rgba(7,8,27,0.22));
  position:relative;
  transition: border-color .35s;
}
.arch-card::before{
  content:"“";
  position:absolute;
  top: 2px; left: 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  opacity: .45;
}
.arch-card:hover{ border-color: rgba(240,199,106,0.3); }
.arch-card.wide{
  grid-column: span 2;
}
@media (max-width: 720px){ .arch-card.wide{ grid-column: span 1; } }
.arch-text{
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cream);
  margin: 0 0 18px;
  font-style: italic;
}
.arch-card.wide .arch-text{ font-size: 19px; }
.arch-attr{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin: 0;
}
.arch-who{ color: var(--gold); font-weight: 600; }
.arch-yr{ color: var(--coral-soft); }

/* Winks grid */
.winks-head{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--coral-soft);
  margin: 72px 0 24px;
  text-align:center;
}
.winks-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.wink-card{
  padding: 22px 22px 18px;
  border: 1px dashed rgba(232,100,93,0.35);
  border-radius: 12px;
  background: rgba(14,17,48,0.3);
}
.wink-text{
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--cream);
  margin: 0 0 10px;
}
.wink-attr{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-soft);
  margin: 0;
}

/* Reveal animation */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in-view{ opacity: 1; transform: none; }

/* Signature */
.sig{
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral-soft);
  margin-top: 40px;
  font-size: 17px;
  line-height: 1.8;
}
.sig span{
  font-size: 14px;
  color: var(--cream-70);
}
.sig-date{
  display:block;
  margin-top: 8px;
  color: var(--cream-40);
  letter-spacing: 0.12em;
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  font-family: var(--sans);
}

/* Lightbox caption enhancements */
.lb-caption{
  text-transform: none;
  letter-spacing: 0;
  max-width: 60ch;
  margin: 18px auto 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
}
.lb-caption .lb-num{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.lb-caption p{ margin: 0; white-space: pre-wrap; }

/* Mobile tweaks */
@media (max-width: 640px){
  .pull-bq{ font-size: 30px; }
  .tri-body{ padding: 18px 18px 20px; }
  .tri-text{ font-size: 16px; }
  .arch-card{ padding: 24px 22px 18px; }
  .arch-text{ font-size: 15.5px; }
  .hero-count-num{ font-size: 36px; }
}