/* Seed2Table — Links
   Brand base from the seed2table-web-design tokens; mobile-first (390px), column capped at 560px. */

@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lora-v37-latin-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-v20-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-v20-latin-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-v20-latin-700.woff2) format("woff2")}

:root{
  --charcoal:#07090b; --charcoal-2:#0c1116; --charcoal-3:#121a24;
  --gold:#d3b26f; --gold-2:#e2c88d; --gold-dim:#8b6f2e;
  --cream:#faf7f0; --cream-2:#e9e3d4; --muted:#a9a598;
  --hair:rgba(250,247,240,.14);
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --col:560px;
  --gutter:clamp(16px,5vw,24px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--charcoal)}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--charcoal);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
a{color:inherit}

.col{width:100%;max-width:calc(var(--col) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
main.col{flex:1;padding-top:clamp(40px,10vw,72px);padding-bottom:40px}

/* a11y */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;margin:0;padding:10px 14px;
  background:var(--charcoal-2);color:var(--cream);border:1px solid var(--gold);border-radius:4px;z-index:10}

/* header */
.hero{text-align:center;margin-bottom:28px}
.brand{margin:0 auto 14px;font-family:var(--serif);font-weight:500;font-size:clamp(34px,9vw,42px);line-height:1.1;letter-spacing:-.01em;color:var(--cream)}
.brand.has-logo{width:fit-content;line-height:0}
.brand img{height:56px;width:auto}
.tagline{font-family:var(--serif);font-weight:500;font-size:clamp(18px,5vw,22px);line-height:1.35;
  color:var(--cream-2);margin:0 auto 20px;max-width:30ch}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);display:inline-block}
.kicker::before{content:"// ";color:var(--gold-dim)}

/* sections */
.links{min-height:420px} /* reserve space so links.json landing doesn't shift the footer */
.group+.group{margin-top:28px}
.group-title{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.group-title::before{content:"// ";color:var(--gold-dim)}
.list{display:grid;gap:12px}

/* link cards — ghost by default */
.card{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;
  padding:16px 18px;border-radius:6px;text-decoration:none;
  background:var(--charcoal-2);color:var(--cream);border:1px solid var(--hair);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.card-label{font-weight:600;font-size:16px;line-height:1.3}
.card-sub{font-size:13.5px;color:var(--muted);line-height:1.35}
.arrow{flex:none;font-size:18px;line-height:1;color:var(--gold);transition:transform .3s var(--ease)}
a.card:hover,a.card:focus-visible{border-color:var(--gold)}
a.card:hover .arrow,a.card:focus-visible .arrow{transform:translateX(4px)}
a.card:hover .card-label,a.card:focus-visible .card-label{color:var(--gold-2)}

/* featured — .btn-gold with the slow shimmer sweep */
.card.btn-gold{background:var(--gold);border-color:var(--gold);color:#1a1305}
.card.btn-gold .card-sub{color:#3b2e12}
.card.btn-gold .arrow{color:#1a1305}
a.card.btn-gold:hover,a.card.btn-gold:focus-visible{background:var(--gold-2);border-color:var(--gold-2)}
a.card.btn-gold:hover .card-label,a.card.btn-gold:focus-visible .card-label{color:#1a1305}
a.card.btn-gold:focus-visible{outline-color:var(--cream)}
.card.btn-gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%) skewX(-12deg);animation:shimmer 4.6s var(--ease) infinite}
@keyframes shimmer{0%,82%{transform:translateX(-120%) skewX(-12deg)}92%,100%{transform:translateX(220%) skewX(-12deg)}}


/* social row */
.social{margin-top:36px}
.social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.social-row a{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--hair);color:var(--cream);background:var(--charcoal-2);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.social-row a:hover,.social-row a:focus-visible{border-color:var(--gold);color:var(--gold-2)}
.social-row svg{width:20px;height:20px}

/* footer */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--hair);padding:28px 0 clamp(64px,16vw,110px);text-align:center}
.foot-inner{position:relative;z-index:1}
.contact{margin:0 0 6px;font-size:15px}
.contact a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s var(--ease),color .3s var(--ease)}
.contact a:hover,.contact a:focus-visible{color:var(--gold-2);border-color:var(--gold)}
.copy{margin:0;font-size:13px;color:var(--muted)}
.skyline-band{position:absolute;left:0;right:0;bottom:0;pointer-events:none;opacity:.14}
.skyline-band img{width:100%;height:auto}

.noscript{color:var(--cream-2);text-align:center}

/* entry reveal */
.reveal{opacity:0;transform:translateY(12px);animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .card.btn-gold::after{display:none}
  .reveal{opacity:1;transform:none}
  a.card:hover .arrow,a.card:focus-visible .arrow{transform:none}
}
