:root{
  --void:#000000;
  --ink:#05070B;
  --raise:#0A0D14;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --text:#F2F4F8;
  --dim:#7C8496;
  --faint:#4A5162;
  --ion:#7DE2FF;
  --ok:#5BE6A4;
  --amber:#FFC46B;
  --radius:2px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --micro:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--void);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.55;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:rgba(125,226,255,.22)}
a{color:inherit;text-decoration:none}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 78% -10%, rgba(125,226,255,.05), transparent 62%),
    radial-gradient(800px 600px at 8% 108%, rgba(183,155,255,.045), transparent 60%);
}

/* microtype: mono all-caps label */
.tm,.eyebrow,.src-tag,.arch-date,footer,.sec-title{
  font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}

/* ---------- brand mark (RK monogram, hover = white one-shot 360°) ---------- */
.mark{display:block;width:26px;height:26px;color:#C3C9D4;flex:none;transition:color .3s}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.brand{display:flex;align-items:center;gap:11px}
.brand:hover .mark{color:#FFFFFF}
.mark.spin{animation:markSpin .9s cubic-bezier(.45,.05,.25,1)}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.wordmark{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.34em;padding-left:1px}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:22px;padding:0 24px;height:58px;
  border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20;
  background:rgba(0,0,0,.72);backdrop-filter:blur(20px) saturate(140%);
}
.topbar .tm{color:var(--faint)}
.topbar a.tm:hover{color:var(--text)}
.topbar .grow{margin-left:auto}

/* ---------- layout ---------- */
main{max-width:820px;margin:0 auto;padding:40px 24px 80px}

.date-row{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.date-row h1{font-size:26px;font-weight:600;letter-spacing:-.01em}
.arch{display:flex;align-items:center;gap:10px;margin-left:auto}
.arch button{
  background:none;border:1px solid var(--hair);border-radius:var(--radius);
  color:var(--dim);font:inherit;padding:3px 10px;cursor:pointer;
  transition:border-color .18s,color .18s;
}
.arch button:hover:not(:disabled){border-color:var(--hair-2);color:var(--text)}
.arch button:disabled{opacity:.3;cursor:default}
.arch-date{color:var(--faint)}

/* ---------- topline hero ---------- */
.hero{
  border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--raise);padding:22px 24px;margin-bottom:38px;
}
.hero .eyebrow{color:var(--ion);display:block;margin-bottom:12px}
.hero ul{list-style:none}
.hero li{padding:6px 0 6px 18px;position:relative;color:var(--text)}
.hero li::before{content:"›";position:absolute;left:0;color:var(--ion)}

/* ---------- sections ---------- */
.sec{margin-bottom:38px}
.sec-title{
  color:var(--dim);border-bottom:1px solid var(--hair);
  padding-bottom:8px;margin-bottom:4px;
}
.item{padding:16px 0;border-bottom:1px solid var(--hair)}
.item h3{font-size:16px;font-weight:600;line-height:1.35}
.item h3 a:hover{color:var(--ion)}
.item p{color:var(--dim);margin-top:5px;font-size:14px}
.src-tag{
  display:inline-block;margin-top:8px;color:var(--faint);
  border:1px solid var(--hair);border-radius:var(--radius);padding:1px 7px;
}

/* ---------- empty / error state ---------- */
.empty{
  border:1px dashed var(--hair-2);border-radius:var(--radius);
  padding:60px 24px;text-align:center;color:var(--dim);
}
.empty .eyebrow{color:var(--faint);display:block;margin-bottom:10px}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);color:var(--faint);
  padding:22px 24px;display:flex;flex-wrap:wrap;gap:8px 18px;
  max-width:820px;margin:0 auto;
}

@media (max-width:560px){
  .date-row{flex-wrap:wrap}
  .arch{margin-left:0;width:100%}
}