:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #100a20;
  color: #fff8ee;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 48% 5%, #29164a, transparent 55%); }
a { color: inherit; }
a:focus-visible { outline: 3px solid #ffdf79; outline-offset: 5px; }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.top { border-bottom: 1px solid #422e64; background: #100a20; }
.top-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-weight: 900; text-decoration: none; line-height: 1.1; }
.brand small { display: block; margin-top: 4px; color: #ffdf79; font-size: .57rem; letter-spacing: .1em; }
.home, .action, .status { padding: 11px 16px; border-radius: 100px; font-weight: 750; font-size: .9rem; }
.home { border: 1px solid #7759a4; text-decoration: none; }
.home:hover { background: #29164a; }
.intro { max-width: 760px; padding-block: clamp(46px, 8vw, 94px) 38px; }
.eyebrow, .category, .card-index { font-size: .7rem; letter-spacing: .13em; font-weight: 800; }
.eyebrow { color: #ffdf79; margin: 0 0 12px; }
h1 { font-size: clamp(2.65rem, 8vw, 6rem); letter-spacing: -.055em; line-height: 1; margin: 0; }
h1 em { color: #ffdf79; font-style: normal; }
.lead { color: #ded3ee; font-size: clamp(1rem, 2vw, 1.2rem); max-width: 600px; line-height: 1.65; margin: 18px 0 0; }
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  --accent: #dec1ff;
  --panel: #211338;
  display: flex;
  flex-direction: column;
  border: 1px solid #503771;
  border-radius: 22px;
  background: #1a112d;
  overflow: hidden;
}
.widgets { --accent: #ffdf79; --panel: #30233f; border-color: #83653b; }
.editing { --accent: #ffc5d8; --panel: #341b3b; }
.art { position: relative; display: grid; place-items: center; min-height: 122px; background: var(--panel); color: var(--accent); }
.art svg { width: min(68%, 200px); height: 96px; }
.card-index { position: absolute; top: 14px; left: 16px; }
.card-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; }
.category { color: var(--accent); margin: 0 0 7px; }
h2 { font-size: clamp(1.35rem, 2.7vw, 1.8rem); line-height: 1.15; margin: 0; }
.card-content > p:not(.category) { line-height: 1.6; color: #ded3ee; margin: 12px 0 20px; }
.action, .status { margin-top: auto; display: inline-flex; min-height: 44px; align-items: center; }
.action { background: var(--accent); color: #1a112d; text-decoration: none; }
.action:hover { background: #fff8ee; }
.status { border: 1px solid #765779; color: #ffc5d8; }
.footer { padding-block: 40px 28px; color: #c9badc; font-size: .84rem; }
@media (max-width: 760px) {
  .projects { grid-template-columns: 1fr; }
  .card { display: grid; grid-template-columns: minmax(92px, 30%) minmax(0, 1fr); }
  .art svg { width: 90%; }
}
@media (max-width: 420px) {
  .wrap { width: calc(100% - 28px); }
  .card-content { padding: 15px; }
  .action, .status { padding-inline: 11px; }
}