/* Holt Universe home page */
/* Holt Universe site styles */
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(../fonts/source-sans-3-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Layout: one night-sky hero holding the family constellation, Pike County ridges along its bottom edge,
   then a quiet row of story cards and a footer. Single dark theme by design: it is a night sky. */
:root{
  --sky-top:#070d1f;
  --sky-mid:#0f1c3d;
  --sky-low:#1b2c57;
  --ridge-1:#22335f;
  --ridge-2:#172548;
  --ridge-3:#0e1834;
  --star:#f4ecd6;
  --gold:#d9a93f;
  --gold-soft:rgba(217,169,63,.35);
  --text:#eef0f7;
  --text-soft:#aab3cc;
  --card:#121f42;
  --card-line:rgba(217,169,63,.28);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sky-top);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}

/* HERO */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%)}
#stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;
  align-items:center;padding-block:56px 170px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.brand img{width:54px;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.brand span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
h1{font-family:var(--display);font-weight:700;font-size:clamp(3rem,7vw,5.6rem);line-height:.95;margin:0 0 18px;text-wrap:balance}
h1 em{display:block;font-style:italic;font-weight:600;color:var(--gold)}
.lede{color:var(--text-soft);font-size:1.12rem;max-width:30em;margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;font-size:1rem;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn-gold{background:var(--gold);color:#121a33}
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-gold:hover::after,.btn-gold:focus-visible::after{left:120%}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--text)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.btn:focus-visible,footer button:focus-visible,.node:focus-visible,.story:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* CONSTELLATION */
.sky-map{position:relative;width:100%;aspect-ratio:1/1;max-width:640px;justify-self:center}
.sky-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.link{stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.75;fill:none;stroke-dasharray:var(--len);stroke-dashoffset:0}
.drawing .link{animation:draw 1.6s ease-out both}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.orbit{fill:none;stroke:rgba(217,169,63,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 6}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;color:var(--text);cursor:pointer;font:inherit;text-decoration:none;width:110px}
.node .ph{width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid var(--gold-soft);
  box-shadow:0 0 0 4px rgba(217,169,63,.08),0 0 22px rgba(244,236,214,.18);transition:transform .35s ease,box-shadow .35s ease,border-color .35s}
.node img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.node .nm{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.1;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.node .dt{font-size:.74rem;color:var(--text-soft);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.node:hover .ph,.node:focus-visible .ph{transform:scale(1.18);border-color:var(--gold);
  box-shadow:0 0 0 6px rgba(217,169,63,.18),0 0 38px rgba(217,169,63,.55)}
.node.twinkle .ph{animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(217,169,63,.08),0 0 18px rgba(244,236,214,.14)}50%{box-shadow:0 0 0 5px rgba(217,169,63,.16),0 0 32px rgba(244,236,214,.32)}}
.center{width:190px}
.center .pair{display:flex}
.center .ph{width:92px;height:92px;border-width:3px;border-color:var(--gold)}
.center .pair .ph+.ph{margin-left:-14px}
.center .nm{font-size:1.3rem}
.center .tag{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}

/* hover card */
.bloom{position:absolute;z-index:5;width:250px;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;background:rgba(14,24,52,.96);border:1px solid var(--card-line);border-radius:14px;
  padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translate(-50%,8px) scale(.96);
  transition:opacity .25s ease,transform .25s ease}
.bloom.show{opacity:1;transform:translate(-50%,0) scale(1)}
.bloom img{width:72px;height:72px;object-fit:cover;border-radius:10px;display:block}
.bloom b{font-family:var(--display);font-size:1.25rem;display:block;line-height:1.1}
.bloom small{color:var(--text-soft);display:block;margin-top:2px}
.bloom span{color:var(--gold);font-size:.85rem;font-weight:600;display:block;margin-top:8px}

/* Onada: a small bright star instead of a photo */
.node.lost .ph.starph{width:40px;height:40px;border:0;background:none;box-shadow:none;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(255,247,220,.9)) drop-shadow(0 0 16px rgba(243,207,110,.6))}
.node.lost .ph.starph{animation:onada 3.8s ease-in-out infinite}
@keyframes onada{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(22deg)}}
.node.lost:hover .ph.starph,.node.lost:focus-visible .ph.starph{transform:scale(1.35);box-shadow:none}
.node.lost .nm{font-style:italic}
.bloom.nostar{grid-template-columns:1fr}
.bloom img[hidden]{display:none}
.starph.sm{width:36px;height:36px;flex:none;display:block;filter:drop-shadow(0 0 6px rgba(255,247,220,.9))}

/* phone list fallback */
.star-list{display:none}

/* RIDGES */
.ridges{position:absolute;left:0;right:0;bottom:-2px;height:220px;z-index:1;pointer-events:none}
.ridges svg{position:absolute;left:-5%;width:110%;bottom:0;height:100%}
.place{position:absolute;right:24px;left:24px;text-align:right;bottom:16px;z-index:3;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(170,179,204,.75)}

/* STORIES */
.stories{background:var(--ridge-3);padding-block:56px 64px}
.stories h2{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.5rem);margin:0 0 6px;text-wrap:balance}
.stories .sub{color:var(--text-soft);margin:0 0 26px}
.story-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.story{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--card);border:1px solid var(--card-line);
  border-radius:14px;padding:22px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.story:hover,.story:focus-visible{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 36px rgba(0,0,0,.4)}
.story .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.story h3{font-family:var(--display);font-size:1.45rem;line-height:1.15;margin:0}
.story p{color:var(--text-soft);margin:0;font-size:.95rem}

/* EMBLEM */
.brand .emblem{border-radius:50%;flex:none;animation:halo 6s ease-in-out infinite}
@keyframes halo{0%,100%{filter:drop-shadow(0 0 4px rgba(243,207,110,.35))}50%{filter:drop-shadow(0 0 14px rgba(243,207,110,.8))}}
.emblems{background:var(--ridge-3);padding-block:56px 8px}
.emblem-feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.logo-full{width:260px;height:auto;max-width:100%;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.emblems h2{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.5rem);margin:0 0 10px}
.emblems p{color:var(--text-soft);font-size:1.1rem;max-width:36em;margin:0}
@media (max-width:860px){.emblem-feature{grid-template-columns:1fr;gap:22px}.logo-full{width:200px}}

footer{background:#060b1a;color:var(--text-soft);font-size:.9rem;border-top:1px solid var(--card-line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px}
footer a,footer button{color:var(--gold);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0}
footer a:hover,footer button:hover{text-decoration:underline}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding-block:40px 150px}
  .sky-map{display:none}
  .star-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:34px}
  .star-list .couple{grid-column:1/-1}
  .sl{display:flex;align-items:center;gap:12px;background:rgba(18,31,66,.82);border:1px solid var(--card-line);border-radius:14px;
    padding:10px;text-decoration:none;min-width:0}
  .sl img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-soft);flex:none}
  .sl .couple-ph{display:flex;flex:none}.sl .couple-ph img+img{margin-left:-10px}
  .sl b{font-family:var(--display);font-size:1.02rem;line-height:1.1;display:block}
  .sl small{color:var(--text-soft);font-size:.74rem}
  .sl div{min-width:0}
  .story-row{grid-template-columns:1fr}
  .ridges{height:160px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}