
:root{--bg:#F4F0E6;--ink:#292929;--gold:#C49A2A;--muted:#737373;--line:#E3E3E3;--night:#1a1714}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Lato,system-ui,sans-serif}
a{color:var(--gold)}a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w{width:min(70rem,calc(100% - 2rem));margin-inline:auto}
.sky{background:radial-gradient(ellipse at 50% 0%,#2a241c 0%,var(--night) 55%);color:var(--bg);padding:2rem 0 3rem;position:relative;overflow:hidden}
.sky h1{font-family:Oswald,sans-serif;font-size:clamp(2.4rem,6vw,4rem);margin:1rem 0;max-width:16ch}
.sky .lede{color:#cfc6b8;max-width:36ch}
.chart{width:100%;height:min(420px,55vw);display:block}
.node{fill:var(--gold);stroke:#F4F0E6;stroke-width:2}
.link{stroke:var(--gold);stroke-opacity:.45;fill:none;stroke-dasharray:4 6}
.label{fill:#F4F0E6;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.log{padding:2rem 0 3rem}
.log h2{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--gold)}
.card{border-left:3px solid var(--gold);padding:.8rem 1rem;margin:.7rem 0;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold)}
.card h2{font-family:Oswald,sans-serif;font-size:1.15rem;margin:0}.card h2 a{color:var(--ink);text-decoration:none}
.meta{color:var(--muted);font-size:.88rem}
.top{display:flex;gap:1rem;justify-content:space-between;padding:1rem 0;align-items:center}
.brand{font-family:Oswald,sans-serif;color:inherit;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.f{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--muted)}.fl{display:flex;gap:1rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.link{stroke-dasharray:0}}

/* MOTION_PACK — deepen (constellation) */
@media (prefers-reduced-motion: no-preference) {
  .link{
    stroke-dasharray:5 8;
    animation:d-orbit 22s linear infinite;
  }
  .link:nth-child(2){animation-duration:26s;animation-direction:reverse}
  .link:nth-child(3){animation-duration:19s}
  .link:nth-child(4){animation-duration:28s;animation-direction:reverse}
  .link:nth-child(5){animation-duration:24s}
  @keyframes d-orbit{to{stroke-dashoffset:-240}}

  .node{
    animation:d-node-pulse 3.5s ease-in-out infinite;
  }
  .node:nth-of-type(odd){animation-delay:.4s}
  @keyframes d-node-pulse{
    0%,100%{filter:drop-shadow(0 0 0 transparent)}
    50%{filter:drop-shadow(0 0 6px rgba(196,154,42,.7))}
  }

  .sky h1,.sky .lede{
    opacity:0;transform:translateY(16px);
    animation:d-rise .75s ease both;
  }
  .sky .lede{animation-delay:.15s}
  @keyframes d-rise{to{opacity:1;transform:none}}

  .chart{
    opacity:0;animation:d-rise .9s .2s ease both;
  }
}

.sky{
  background:
    radial-gradient(ellipse at 50% 0%,#3a3024 0%,#1a1714 58%),
    radial-gradient(circle at 70% 30%, rgba(196,154,42,.08), transparent 40%);
}
.link{stroke-opacity:.55}
.node{
  transition:transform .22s ease, filter .22s ease;
  transform-box:fill-box;transform-origin:center;
}
a:hover .node,a:focus .node{
  transform:scale(1.2);
  filter:drop-shadow(0 0 8px rgba(196,154,42,.85));
}
.card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover,.card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  border-color:var(--gold);
}
button[data-copy]{
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
button[data-copy]:hover,button[data-copy]:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(196,154,42,.35);
  filter:brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .link,.node,.sky h1,.sky .lede,.chart{animation:none!important}
  .sky h1,.sky .lede,.chart{opacity:1!important;transform:none!important}
  .link{stroke-dasharray:0}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
