:root{
  --colorTeal:#027B7B;
  --colorMango:#FFC422;
  --colorOrange:#FFA500;
  --colorOrangeStrong:#FF8200;
  --colorRuby:#8B4B53;

  --colorBackground:#0b0f14;
  --colorPanel:#0f151c;
  --colorText:#eaf2f7;
  --colorMuted:rgba(234,242,247,.70);

  --colorLine:rgba(234,242,247,.12);
  --colorTealLine:rgba(2,123,123,.34);

  --radiusCard:6px;
  --radiusPill:6px;
  --radiusTag:4px;
  --radiusLevel:4px;
  --radiusChip:6px;
  --radiusCode:4px;
  --radiusDot:4px;
  --radiusPillDot:4px;
  --radiusSkill:0px;

  --shadowCard:0 3px 8px rgba(0,0,0,.28);

  --layoutMaxWidth:980px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  margin:0;
  font: 15px/1.6 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--colorText);

  background: linear-gradient(180deg, rgba(255,255,255,.008), rgba(0,0,0,0)), var(--colorBackground);
}

::selection{ background: rgba(255,196,34,.22); color: var(--colorText); }

.wrap{
  width:min(var(--layoutMaxWidth), calc(100% - 32px));
  margin:0 auto;
  padding: 34px 0 56px;
}

.top{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  background: rgba(11,15,20,.90);
  border-bottom: 2px solid var(--colorTealLine);
  backdrop-filter: blur(8px);
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  letter-spacing:-.02em;
}

.brand a{
  color: var(--colorText);
  text-decoration: none;
}

.dot{
  width:10px;
  height:10px;
  border-radius: var(--radiusDot);
  background: var(--colorMango);
}

.nav{ display:flex; gap:14px; }
.nav a{
  color: rgba(234,242,247,.80);
  text-decoration:none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover{
  color: var(--colorMango);
  border-bottom-color: rgba(255,196,34,.75);
}

.intro{ padding: 22px 0 6px; }
h1{
  margin:0 0 8px;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.sub{
  margin:0;
  color: var(--colorMuted);
  max-width: 72ch;
}

.meta{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: var(--radiusPill);
  border: 1px solid var(--colorTealLine);
  background: rgba(2,123,123,.045);
  font-size: 12px;
}
.pill .k{
  width:6px;
  height:6px;
  border-radius: var(--radiusPillDot);
  background: var(--colorTeal);
}
.pill strong{ color: var(--colorText); font-weight:800; }

.pill.accent{
  border-color: rgba(255,196,34,.55);
  background: rgba(255,196,34,.05);
}
.pill.accent .k{ background: var(--colorMango); }

.pill.accent2{
  border-color: rgba(139,75,83,.55);
  background: rgba(139,75,83,.06);
}
.pill.accent2 .k{ background: var(--colorRuby); }

section{
  padding: 28px 0;
  border-top: 1px solid var(--colorLine);
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom: 10px;
}

h2{
  margin:0;
  font-size: 13px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(234,242,247,.86);
  position:relative;
  padding-bottom: 6px;
}
h2::after{
  content:"";
  display:block;
  width: 40px;
  height: 2px;
  margin-top: 8px;
  background: rgba(139,75,83,.65);
}

.hint{ color: var(--colorMuted); font-size: 12px; }
code{
  border: 1px solid rgba(255,196,34,.45);
  padding: 1px 6px;
  border-radius: var(--radiusCode);
}

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.card{
  border-radius: var(--radiusCard);
  border: 1px solid rgba(234,242,247,.12);
  background: rgba(15,21,28,.92);
  padding: 12px;
  box-shadow: var(--shadowCard);
  transition: border-color .15s ease, background .15s ease;
}

.card:nth-child(3n+1){ border-color: rgba(2,123,123,.22); }
.card:nth-child(3n+2){ border-color: rgba(139,75,83,.20); }
.card:nth-child(3n+3){ border-color: rgba(255,196,34,.18); }

.card:hover{
  border-color: rgba(255,196,34,.55);
  background: rgba(15,21,28,.98);
}

.card:has(.tag.featured){
  border-color: rgba(255,196,34,.55);
  background:
    linear-gradient(90deg, rgba(255,196,34,.06) 0 100%, rgba(15,21,28,.95) 0),
    rgba(15,21,28,.95);
}

.topline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:baseline;
}
.card h3{
  margin:0;
  font-size: 15px;
  letter-spacing:-.01em;
}
.year{
  font-size: 12px;
  font-weight:800;
  color: rgba(255,196,34,.92);
}

.muted{ color: var(--colorMuted); margin: 8px 0 10px; }

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radiusTag);
  border: 1px solid rgba(139,75,83,.55);
  color: rgba(234,242,247,.86);
  background: rgba(0,0,0,.12);
}
.tag.featured{
  border-color: rgba(255,130,0,.70);
  color: rgba(255,130,0,.95);
}

.links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.links a{
  color: rgba(234,242,247,.90);
  text-decoration:none;
  border-bottom: 1px solid rgba(2,123,123,.55);
  padding-bottom: 1px;
}
.links a:hover{
  color: var(--colorMango);
  border-bottom-color: rgba(255,196,34,.85);
}

.prose{ max-width: 75ch; }
.prose p{ margin: 0 0 10px; }

.list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  max-width: 64ch;
}
.list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 8px 10px;
  border-radius: var(--radiusSkill, var(--radiusCard));
  border: 1px solid rgba(2,123,123,.22);
  background: rgba(2,123,123,.05);
}

.level{
  font-size: 11px;
  font-weight:800;
  color: rgba(18,14,8,.92);
  background: rgba(255,196,34,.92);
  border-radius: var(--radiusLevel);
  padding: 2px 8px;
}

.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chips a{
  text-decoration:none;
  border-radius: var(--radiusChip);
  padding: 5px 10px;
  border: 1px solid rgba(2,123,123,.26);
  background: rgba(2,123,123,.04);
  color: rgba(234,242,247,.90);
}
.chips a:hover{
  color: var(--colorMango);
  border-color: rgba(255,196,34,.55);
}

.foot{
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--colorLine);
  font-size: 12px;
  color: rgba(234,242,247,.58);
}

@media (max-width: 820px){
  .nav{ display:none }
  .cards{ grid-template-columns: 1fr; }
}