/* ===== K.U.N.S.T. / cunst.network unified theme ===== */
/* Palette + tokens */
:root{
  --bg:#0b0b0c;
  --fg:#eaeaec;
  --muted:#9b9ca1;

  --accent:#ffe04d;        /* primary yellow */
  --accent-2:#ffe37a;      /* stripe yellow */
  --stripe-black:#101014;
  --card:#141416;

  --rule:#1f1f22;          /* subtle borders */
  --ring-fg:rgba(255,255,255,.04);

  --maxw:980px;
}

/* Reset / base */
*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  color:var(--fg);
  background-color:var(--bg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  letter-spacing:.1px;

  /* Subtle header glow + repeating ring motif (SVG data URL) */
  background-image:
    radial-gradient(circle at 50% -120px, var(--ring-fg), transparent 60%),
    url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">\
  <defs>\
    <g id="m">\
      <circle cx="60" cy="60" r="44" fill="none" stroke="%23ffffff" stroke-opacity="0.05" stroke-width="12"/>\
      <circle cx="60" cy="60" r="18" fill="%23ffe04d" fill-opacity="0.06"/>\
    </g>\
  </defs>\
  <use href="%23m"/>\
</svg>');
  background-repeat:no-repeat, repeat;
  background-size:100% 420px, 160px 160px;
}

img{ max-width:100%; height:auto; display:block; }

/* Wrapper */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:18px; }

/* Sticky header w/ blur */
header.site{
  position:sticky; top:0; z-index:10;
  background:rgba(11,11,12,.6);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}

/* Brand mark */
.brand{ display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px; }
.brand .mark{
  width:18px; height:18px; border:4px solid #101014; border-radius:50%;
  outline:6px solid #ffffff;
  background:radial-gradient(var(--accent) 0 40%, transparent 41%);
}

/* Grid + cards */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.two{ grid-column:span 7; }
.side{ grid-column:span 5; }
@media(max-width:860px){ .two,.side{ grid-column:1 / -1; } }

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:18px;
}

/* Headings / text */
h1{ font-size:clamp(32px,6vw,56px); line-height:1.05; margin:0 0 8px; text-transform:none; letter-spacing:.2px; }
h2{ font-size:clamp(22px,3.5vw,28px); margin:0 0 6px; }
p{ margin:0 0 12px; }
.muted{ color:var(--muted); }

/* Links / CTAs */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.cta{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid #2a2a2f; background:#101013; font-weight:600;
  transition:transform .1s ease-in-out;
}
.cta:hover{ transform:translateY(-1px); }

.pill{ padding:6px 10px; border:1px solid #2a2a2f; border-radius:999px; color:var(--muted); font-size:12px; }

/* Hero spacing */
.hero{ padding:64px 18px 24px; }

/* Stripes (construction tape) */
.stripes{
  width:100%; height:18px;
  background:repeating-linear-gradient(
    to right,
    var(--stripe-black) 0 64px,
    var(--accent-2) 64px 128px
  );
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

/* Simple lists + project cards (carryover utilities) */
ul{ list-style:none; padding-left:0; margin-top:1rem; }
ul li{ margin-bottom:.5rem; }

/* Optional yellow rules (carryover) */
.yl{ border:0; border-top:1px solid var(--accent); margin:1.5rem 0; }

/* Dotted divider option */
.yl-dots{
  border:0; margin:1.5rem 0; height:0; position:relative;
}
.yl-dots::before{
  content:""; display:block; height:0;
  border-top:1px dotted var(--accent); opacity:.9;
}

/* Footer */
footer.site{ color:var(--muted); border-top:1px solid var(--rule); margin-top:48px; }

/* Nav */
nav{ display:flex; gap:16px; align-items:center; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){ .cta{ transition:none; } }

/* --- Interactive cards & buttons --- */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card-link{display:block;border:1px solid var(--rule);border-radius:14px;background:var(--card);padding:18px;text-decoration:none;color:inherit;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.card-link h3{margin:0 0 6px}
.card-link p{margin:0;color:var(--muted)}
.card-link:focus-visible,
.card-link:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 24px rgba(255,224,77,.08)}

.btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid #2a2a2f;border-radius:10px;background:#101013;color:var(--fg);font-weight:600;text-decoration:none;transition:transform .1s ease, border-color .12s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-1px);border-color:var(--accent);text-decoration:none}
.btn .arrow{transition:transform .12s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* compact icon */
.icon{width:18px;height:18px;display:inline-block;vertical-align:middle}