/* Open Badges site: the Kusto Advent theme (red + silver glitter, midnight navy). */
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 700; font-display: swap; src: url("fonts/fraunces-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 900; font-display: swap; src: url("fonts/fraunces-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  --k-navy-0: #080c28;
  --k-navy-1: #121b4d;
  --k-navy-2: #1b2a66;
  --k-navy-3: #22357f;
  --k-red: #b3182f;
  --k-red-hi: #d93450;
  --k-red-deep: #7a0b1f;
  --k-red-ink: #5a0614;
  --k-silver: #cfd5e2;
  --k-silver-hi: #f5f7fc;
  --k-silver-lo: #7d879b;
  --k-snow: #e6eaf3;
  --k-green: #2fa86a;
  --k-green-hi: #5dff9e;
  --k-cyan: #9fe2ff;
  --k-gold: #ffd86b;
  --k-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --k-font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --k-glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.97 0 0 0 0 1 0 0 0 16 -10.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
  --k-red-glitter: var(--k-glitter),
    linear-gradient(135deg, var(--k-red-hi) 0%, var(--k-red) 22%, var(--k-red-deep) 44%, #c41f3a 62%, #8c0f25 80%, #d42a44 100%);
  --k-silver-grad: linear-gradient(165deg, #ffffff 0%, var(--k-silver) 22%, var(--k-silver-lo) 46%, var(--k-silver-hi) 64%, #9aa3b5 84%, #ffffff 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--k-navy-0); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 16px/1.6 var(--k-font-body);
  color: var(--k-snow);
  background:
    radial-gradient(circle, rgba(225,235,255,.55) 0 1px, transparent 1.5px) 0 0 / 90px 90px,
    radial-gradient(circle, rgba(225,235,255,.35) 0 .8px, transparent 1.3px) 37px 51px / 130px 110px,
    radial-gradient(circle, rgba(225,235,255,.25) 0 1.2px, transparent 1.8px) 71px 13px / 170px 150px,
    radial-gradient(ellipse at 50% 0%, var(--k-navy-3) 0%, var(--k-navy-1) 45%, var(--k-navy-0) 85%) fixed;
  background-color: var(--k-navy-0);
}
a { color: var(--k-cyan); text-decoration: none; }
a:hover { color: #ffffff; }
::selection { background: var(--k-red); color: #fff; }
h1, h2, h3 { font-family: var(--k-font-display); font-weight: 900; letter-spacing: .01em; color: #ffffff; margin: 0; }
code, .k-mono { font-family: var(--k-font-mono); }

/* Header: navy bar with a string of fairy lights */
.k-header {
  position: relative;
  padding: .7rem 1.25rem;
  background: rgba(8, 12, 40, .92);
  border-bottom: 1px solid rgba(207, 213, 226, .35);
}
.k-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px; height: 8px;
  background:
    radial-gradient(circle, #ff4d6d 0 2.5px, transparent 3.5px) 0 50% / 36px 8px repeat-x,
    radial-gradient(circle, var(--k-green-hi) 0 2.5px, transparent 3.5px) 18px 50% / 36px 8px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 120, 140, .7));
}
.k-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--k-font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: .02em;
}
.k-brand .kusto-elf { width: 34px; height: 37px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.k-brand-text {
  color: transparent;
  background: var(--k-glitter), var(--k-silver-grad);
  -webkit-background-clip: text; background-clip: text;
}

/* Red glitter ribbon with twinkling stars */
.k-ribbon {
  position: relative;
  overflow: hidden;
  padding: 2.4rem 1.25rem;
  text-align: center;
  background: var(--k-red-glitter);
  border-bottom: 2px solid rgba(255,255,255,.75);
  box-shadow: inset 0 -10px 24px rgba(60, 0, 10, .35);
}
.k-ribbon::before,
.k-ribbon::after {
  content: "";
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px;
  background: #ffffff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: .9;
  animation: k-twinkle 2.8s ease-in-out infinite;
}
.k-ribbon::before { left: max(4%, calc(50% - 400px)); }
.k-ribbon::after { right: max(4%, calc(50% - 400px)); animation-delay: 1.2s; }
.k-ribbon h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  text-shadow: 0 3px 0 var(--k-red-ink), 0 0 18px rgba(255, 210, 220, .35);
}
.k-ribbon p { margin: .35rem 0 0; color: rgba(255,255,255,.88); }
@keyframes k-twinkle { 0%, 100% { transform: scale(.75) rotate(0deg); opacity: .55; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .k-ribbon::before, .k-ribbon::after { animation: none; } }

main { flex: 1 0 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }

/* Advent door card */
.k-card {
  position: relative;
  padding: 2rem;
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(225,235,255,.18) 0 .8px, transparent 1.3px) 0 0 / 14px 14px,
    linear-gradient(160deg, var(--k-navy-3), var(--k-navy-1));
  box-shadow: 0 0 0 1.5px rgba(207, 213, 226, .45), 0 10px 24px rgba(0, 0, 0, .35);
}
.k-card::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1.5px dashed rgba(207, 213, 226, .35);
  border-radius: 9px;
  pointer-events: none;
}
.k-card > * { position: relative; }
.k-card + .k-card { margin-top: 1.5rem; }
.k-card h2 { font-size: 1.35rem; margin: 1.6rem 0 .5rem; }

.k-hero { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.k-hero img {
  width: 180px; height: 180px; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.k-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: .35rem 0; }
.k-muted { color: rgba(230, 234, 243, .7); }

.k-status {
  display: inline-block;
  padding: .15rem .75rem;
  border-radius: 999px;
  font-family: var(--k-font-mono); font-weight: 700; font-size: .8rem;
  color: var(--k-green-hi);
  background: rgba(8, 12, 40, .6);
  border: 1px solid var(--k-green);
}
.k-status.revoked { color: #ff8a9b; border-color: #ff4d6d; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 1.6rem 0 0; }
dt { color: rgba(230, 234, 243, .66); }
dd { margin: 0; overflow-wrap: anywhere; }
dd.k-mono { color: var(--k-gold); }

.k-btns { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.k-btn {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: .6rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--k-glitter), var(--k-red);
  border: 1px solid rgba(255,255,255,.55);
  text-shadow: 0 1px 0 var(--k-red-ink);
}
.k-btn:hover { color: #ffffff; background: var(--k-glitter), var(--k-red-hi); border-color: #ffffff; }
.k-btn.alt { color: var(--k-navy-0); background: var(--k-silver); border-color: #ffffff; text-shadow: none; }
.k-btn.alt:hover { background: #ffffff; }

.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.k-list li { display: flex; gap: 1rem; align-items: center; }
.k-list img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.k-list strong { font-family: var(--k-font-display); font-size: 1.15rem; color: #ffffff; }

footer {
  flex-shrink: 0;
  padding: 1.25rem;
  text-align: center;
  font-size: .85rem;
  color: rgba(230, 234, 243, .66);
  border-top: 1px solid rgba(207, 213, 226, .18);
}

@media (max-width: 560px) {
  .k-card { padding: 1.5rem; }
  .k-hero { justify-content: center; text-align: center; }
  dl { grid-template-columns: 1fr; gap: .1rem; }
  dd { margin-bottom: .6rem; }
}