/* ============================================================
   go.longevity.science — the family's front door.
   The shared dark slab as the ground, so the hub reads as a lobby rather than
   as a fourth destination. Its whole job is to send people onward, so it says
   almost nothing: no pitch, no dates, no prices. Those live on the pages it
   points at, and repeating them here only makes the visitor read twice.
   No scroll machinery either: family.css for the tokens, analytics and a11y.
   ============================================================ */

:root{ --bg: var(--dark); --fg: var(--mist); --accent: var(--gold2); }
body{ background:var(--dark); color:var(--mist); }

.hub{ min-height:100svh; display:flex; flex-direction:column;
  padding-block:clamp(22px,4vh,40px) clamp(28px,5vh,56px); }
/* .wrap carries margin-inline:auto, and an auto cross-axis margin on a flex item
   cancels the stretch, so each block would shrink to its content and drift to
   the middle. Give the width back and the auto margins go back to centring. */
.hub > *{ width:100%; }

/* ---------- top ---------- */
.hub__top{ display:flex; align-items:baseline; gap:.9rem; }
.hub__brand{ font-family:var(--display); font-weight:900; letter-spacing:.22em; padding-inline-start:.22em;
  font-size:clamp(1rem,1.5vw,1.15rem); color:var(--mist); margin:0; }
.hub__by{ font-size:clamp(.9rem,1.1vw,1rem); color:var(--mist2); }

/* ---------- the three doors ----------
   Equal weight on purpose: the page routes, it does not rank. Centred in the
   viewport so the whole thing reads as one composed screen. */
.doors{ margin-block:auto; padding-block:clamp(2rem,6vh,4.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); align-items:stretch; }
.door{ display:flex; flex-direction:column; background:var(--dark2); border-radius:var(--r); overflow:hidden;
  border:1px solid rgba(241,236,224,.10); color:inherit;
  transition:transform .45s var(--ease), border-color .35s, background .35s; }
.door:hover, .door:focus-visible{ transform:translateY(-4px); border-color:rgba(203,170,93,.45); background:#2B3F45; }
.door:focus-visible{ outline:2px solid var(--gold2); outline-offset:3px; }

.door__img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#16232A; }
.door__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.door:hover .door__img img{ transform:scale(1.04); }

.door__b{ display:flex; flex-direction:column; gap:.5rem; padding:clamp(1.3rem,2.3vw,1.9rem); flex:1; }
.door__n{ font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,2.4vw,2.05rem);
  letter-spacing:-.02em; line-height:1.1; color:#FAF7EE; }
.door__d{ font-size:clamp(1.02rem,1.3vw,1.15rem); line-height:1.6; color:var(--mist2); }

.door__go{ margin-top:auto; padding-top:clamp(1rem,2vw,1.5rem); display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:clamp(1rem,1.25vw,1.1rem); color:#FAF7EE; }
/* the arrow points the way the language runs, so it flips with the document */
.door__go i{ width:1.05em; height:1.05em; flex:none; background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat;
  transform:scaleX(-1); transition:transform .35s var(--ease); }
.door:hover .door__go i{ transform:scaleX(-1) translateX(4px); }
:root{ --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* ---------- foot ---------- */
.hub__foot{ padding-top:clamp(1.2rem,2.5vh,1.8rem); border-top:1px solid rgba(241,236,224,.12);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.8rem clamp(1.2rem,3vw,2.4rem); }
.hub__links{ display:flex; flex-wrap:wrap; gap:.6rem clamp(1rem,2vw,1.6rem); }
.hub__links a{ font-weight:600; font-size:clamp(.98rem,1.2vw,1.08rem); color:var(--mist);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(203,170,93,.5); }
.hub__links a:hover{ text-decoration-color:var(--gold2); }
.hub__credit{ font-size:.9rem; color:var(--mist2); margin:0; }
.hub__credit a{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px){ .doors{ grid-template-columns:1fr; } .door__img{ aspect-ratio:16/9; } }
@media (prefers-reduced-motion:reduce){
  .door, .door__img img, .door__go i{ transition:none; }
  .door:hover{ transform:none; }
  .door:hover .door__img img{ transform:none; }
}