:root{
    --void:#120E1A;
    --panel:#1B1526;
    --panel-2:#221A30;
    --hair:rgba(245,241,234,0.08);
    --ink:#F5F1EA;
    --ink-dim:#B8AFC4;

    --arts-1:#E4123A;
    --arts-2:#D4A017;
    --shrine-1:#6B3FA0;
    --shrine-2:#E8536B;
    --vanguard-1:#FF6FA8;
    --vanguard-2:#45D9E8;
    --doggy-1:#F2A65A;
    --doggy-2:#FFD9A0;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--void);
    color:var(--ink);
    font-family:'Nunito', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3, .display{
    font-family:'Anton', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.01em;
    margin:0;
  }

  .mono{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    backdrop-filter: blur(10px);
    background:rgba(18,14,26,0.72);
    border-bottom:1px solid var(--hair);
  }
  .nav-inner{
    max-width:1180px;
    margin:0 auto;
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-logo{
    font-family:'Anton', sans-serif;
    font-size:20px;
    letter-spacing:0.02em;
    text-decoration:none;
  }
  .nav-logo .x{color:var(--arts-1);}
  .nav-links{
    display:flex;
    gap:28px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--ink-dim);
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 0;
    border-bottom:2px solid transparent;
    transition:color 0.2s, border-color 0.2s;
  }
  .nav-links a:hover, .nav-links a.active{color:var(--ink);}
  .nav-dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
  .nav-links a[data-c="arts"].active{border-color:var(--arts-1);}
  .nav-links a[data-c="shrine"].active{border-color:var(--shrine-2);}
  .nav-links a[data-c="vanguard"].active{border-color:var(--vanguard-1);}
  .nav-links a[data-c="doggy"].active{border-color:var(--doggy-1);}
  .nav-cta{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-decoration:none;
    color:var(--void);
    background:var(--ink);
    padding:9px 16px;
    border-radius:2px;
    white-space:nowrap;
  }
  @media (max-width:860px){
    .nav-links{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 24px 80px;
    overflow:hidden;
  }
  .hero-bands{
    position:absolute;
    inset:0;
    display:flex;
    z-index:0;
  }
  .band{
    flex:1;
    height:100%;
    opacity:0.5;
    filter:blur(60px);
    animation:drift 14s ease-in-out infinite;
  }
  .band.b1{background:radial-gradient(ellipse at 30% 40%, var(--arts-1), transparent 70%); animation-delay:0s;}
  .band.b2{background:radial-gradient(ellipse at 60% 60%, var(--shrine-1), transparent 70%); animation-delay:2s;}
  .band.b3{background:radial-gradient(ellipse at 40% 50%, var(--vanguard-1), transparent 70%); animation-delay:4s;}
  .band.b4{background:radial-gradient(ellipse at 60% 40%, var(--doggy-1), transparent 70%); animation-delay:6s;}
  @keyframes drift{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-24px) scale(1.08);}
  }
  .hero-grain{
    position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 0%, var(--void) 78%);
    z-index:1;
  }
  .hero-content{position:relative; z-index:2;}
  .hero-eyebrow{
    font-size:12px;
    color:var(--ink-dim);
    margin-bottom:22px;
  }
  .hero-title{
    font-size:clamp(56px, 13vw, 148px);
    line-height:0.92;
    background:linear-gradient(90deg, var(--arts-1), var(--shrine-2) 33%, var(--vanguard-1) 66%, var(--doggy-1));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:6px;
  }
  .hero-vs{
    display:inline-block;
    font-size:clamp(18px, 3vw, 26px);
    color:var(--ink-dim);
    letter-spacing:0.3em;
    margin:18px 0;
  }
  .hero-sub{
    max-width:560px;
    margin:0 auto;
    font-size:18px;
    line-height:1.6;
    color:var(--ink-dim);
    font-weight:600;
  }
  .hero-roster{
    display:flex;
    gap:14px;
    justify-content:center;
    margin-top:44px;
    flex-wrap:wrap;
  }
  .chip{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.05em;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--hair);
    color:var(--ink-dim);
    text-decoration:none;
    transition:transform 0.2s, border-color 0.2s, color 0.2s;
  }
  .chip:hover{transform:translateY(-2px); color:var(--ink);}
  .chip.c-arts:hover{border-color:var(--arts-1);}
  .chip.c-shrine:hover{border-color:var(--shrine-2);}
  .chip.c-vanguard:hover{border-color:var(--vanguard-1);}
  .chip.c-doggy:hover{border-color:var(--doggy-1);}

  .scroll-cue{
    position:absolute;
    bottom:36px; left:50%;
    transform:translateX(-50%);
    width:1px; height:52px;
    background:linear-gradient(var(--ink-dim), transparent);
    z-index:2;
  }

  /* ---------- GAME SECTIONS ---------- */
  section.game{
    padding:130px 0;
    position:relative;
    border-top:1px solid var(--hair);
  }
  .game-grid{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap:64px;
    align-items:center;
  }
  .game.reverse .game-grid{direction:rtl;}
  .game.reverse .game-grid > *{direction:ltr;}
  @media (max-width:900px){
    .game-grid{grid-template-columns:1fr; direction:ltr !important;}
    .game-grid > *{direction:ltr !important;}
  }

  .game-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    padding:6px 12px;
    border-radius:999px;
    margin-bottom:22px;
  }
  .game-eyebrow .dot{width:6px; height:6px; border-radius:50%;}

  .game-title{
    font-size:clamp(34px, 5vw, 56px);
    line-height:1.02;
    margin-bottom:20px;
  }
  .game-hook{
    font-family:'Nunito', sans-serif;
    font-weight:800;
    font-size:19px;
    margin-bottom:18px;
  }
  .game-desc{
    color:var(--ink-dim);
    font-size:16px;
    line-height:1.75;
    max-width:46ch;
    margin-bottom:32px;
  }

  .tape{
    border-top:1px solid var(--hair);
    padding-top:20px;
  }
  .tape-row{
    display:flex;
    gap:16px;
    padding:9px 0;
    font-size:13px;
    border-bottom:1px solid var(--hair);
  }
  .tape-row:last-child{border-bottom:none;}
  .tape-label{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--ink-dim);
    width:110px;
    flex-shrink:0;
    letter-spacing:0.05em;
  }
  .tape-value{font-weight:700;}

  .game-media{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:16/10.5;
    opacity:0;
    transform:translateY(28px) scale(0.98);
    transition:opacity 0.8s ease, transform 0.8s ease;
  }
  .game-media.in-view{opacity:1; transform:translateY(0) scale(1);}
  .game-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .media-frame{
    position:absolute; inset:0;
    box-shadow: inset 0 0 0 1px var(--hair);
    pointer-events:none;
  }

  /* Arts of Versus */
  .eyebrow-arts{background:rgba(228,18,58,0.12); color:#FFB0C0;}
  .eyebrow-arts .dot{background:var(--arts-1);}
  .title-arts{color:var(--ink); text-shadow:0 0 30px rgba(228,18,58,0.35);}
  .hook-arts{color:var(--arts-2);}

  /* Eternal Shrine */
  .eyebrow-shrine{background:rgba(107,63,160,0.16); color:#D9C2FF;}
  .eyebrow-shrine .dot{background:var(--shrine-1);}
  .title-shrine{color:var(--ink); text-shadow:0 0 30px rgba(232,83,107,0.3);}
  .hook-shrine{color:var(--shrine-2);}

  /* Project Vanguard */
  .eyebrow-vanguard{background:rgba(255,111,168,0.14); color:#FFC7DE;}
  .eyebrow-vanguard .dot{background:var(--vanguard-1);}
  .title-vanguard{color:var(--ink); text-shadow:0 0 30px rgba(69,217,232,0.28);}
  .hook-vanguard{color:var(--vanguard-2);}

  /* Doggy Worlds */
  .eyebrow-doggy{background:rgba(242,166,90,0.16); color:#FFDCAE;}
  .eyebrow-doggy .dot{background:var(--doggy-1);}
  .title-doggy{color:var(--ink); text-shadow:0 0 30px rgba(242,166,90,0.3);}
  .hook-doggy{color:var(--doggy-1);}

  /* ---------- Illustrated concept panels (Vanguard / Doggy) ---------- */
  .concept-panel{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .concept-tag{
    position:absolute;
    bottom:14px; left:14px;
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:0.08em;
    color:rgba(245,241,234,0.55);
    background:rgba(0,0,0,0.35);
    padding:4px 9px;
    border-radius:3px;
  }

  /* ---------- BIO / ABOUT ---------- */
  section.bio{
    padding:130px 0;
    border-top:1px solid var(--hair);
    background:linear-gradient(180deg, transparent, rgba(245,241,234,0.02), transparent);
  }
  .bio-grid{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap:64px;
    align-items:start;
  }
  @media (max-width:900px){
    .bio-grid{grid-template-columns:1fr;}
  }
  .bio-photos{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .bio-photo-main{
    border-radius:6px;
    overflow:hidden;
    filter:grayscale(0.25) contrast(1.05);
    box-shadow:0 0 0 1px var(--hair);
  }
  .bio-photo-young{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    border:1px solid var(--hair);
    border-radius:6px;
  }
  .bio-photo-young img{
    width:64px; height:64px;
    object-fit:cover;
    border-radius:4px;
    flex-shrink:0;
  }
  .bio-photo-young span{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--ink-dim);
    line-height:1.5;
  }
  .bio-title{
    font-size:clamp(30px, 5vw, 48px);
    margin-bottom:22px;
  }
  .bio-text p{
    color:var(--ink-dim);
    font-size:16px;
    line-height:1.8;
    margin:0 0 18px;
  }
  .bio-quote{
    font-family:'Anton', sans-serif;
    text-transform:none;
    font-size:22px;
    color:var(--ink);
    border-left:3px solid var(--arts-1);
    padding-left:18px;
    margin:28px 0 0;
    line-height:1.4;
  }
  .sketch-strip-wrap{
    margin-top:64px;
  }
  .sketch-strip-label{
    font-size:11px;
    color:var(--ink-dim);
    margin-bottom:16px;
  }
  .sketch-strip{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
  }
  @media (max-width:900px){
    .sketch-strip{grid-template-columns:repeat(2, 1fr); }
  }
  .sketch-item{
    aspect-ratio:3/4;
    border-radius:4px;
    overflow:hidden;
    border:1px solid var(--hair);
    background:#EDE8DE;
  }
  .sketch-item img{
    width:100%; height:100%;
    object-fit:cover;
    filter:sepia(0.15) contrast(1.02);
    transition:transform 0.4s ease;
  }
  .sketch-item:hover img{transform:scale(1.05);}

  /* ---------- ROSTER / CONTACT ---------- */
  section.roster{
    padding:140px 0 100px;
    text-align:center;
    border-top:1px solid var(--hair);
    position:relative;
    overflow:hidden;
  }
  .roster-glow{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 30%, rgba(228,18,58,0.10), transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(69,217,232,0.10), transparent 40%),
      radial-gradient(circle at 50% 80%, rgba(242,166,90,0.10), transparent 45%);
    z-index:0;
  }
  .roster-inner{position:relative; z-index:1;}
  .roster h2{
    font-size:clamp(32px, 6vw, 64px);
    margin-bottom:18px;
  }
  .roster p{
    color:var(--ink-dim);
    max-width:480px;
    margin:0 auto 40px;
    font-size:16px;
    line-height:1.7;
  }
  .contact-row{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .contact-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    padding:14px 26px;
    border-radius:4px;
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    letter-spacing:0.04em;
    transition:transform 0.2s;
  }
  .contact-btn:hover{transform:translateY(-2px);}
  .contact-btn.primary{background:var(--ink); color:var(--void); font-weight:700;}
  .contact-btn.secondary{border:1px solid var(--hair); color:var(--ink);}

  footer{
    padding:30px 0 40px;
    text-align:center;
    color:var(--ink-dim);
    font-size:12px;
    border-top:1px solid var(--hair);
  }

  ::selection{background:var(--arts-1); color:var(--ink);}

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
  }

/* ---------- GAME PAGE (progress/devlog subpages) ---------- */
.back-link{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-decoration:none;
  color:var(--ink-dim);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color 0.2s;
}
.back-link:hover{color:var(--ink);}

.page-hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:flex-end;
  padding:140px 0 60px;
  overflow:hidden;
  border-bottom:1px solid var(--hair);
}
.page-hero-bg{
  position:absolute; inset:0;
  z-index:0;
  opacity:0.55;
  filter:blur(70px);
}
.page-hero-grain{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--void) 100%);
  z-index:1;
}
.page-hero-content{position:relative; z-index:2; width:100%;}

.stage-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--hair);
  margin-bottom:22px;
}
.stage-badge .pulse{
  width:7px; height:7px;
  border-radius:50%;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

.page-title{
  font-size:clamp(40px, 8vw, 88px);
  line-height:0.98;
  margin-bottom:14px;
}
.page-hook{
  font-size:18px;
  font-weight:800;
  max-width:52ch;
}

section.page-body{
  padding:90px 0;
  border-bottom:1px solid var(--hair);
}
section.page-body:last-of-type{border-bottom:none;}
.section-label{
  font-size:11px;
  color:var(--ink-dim);
  margin-bottom:18px;
}
.section-heading{
  font-size:clamp(26px, 4vw, 38px);
  margin-bottom:24px;
}

.overview-text{
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.8;
  max-width:62ch;
  margin-bottom:36px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
@media (max-width:700px){
  .gallery-grid{grid-template-columns:1fr;}
}
.gallery-item{
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:0 0 0 1px var(--hair);
  position:relative;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
}
.gallery-caption{
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
}

.devlog-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.devlog-entry{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:24px;
  padding:22px 0;
  border-top:1px solid var(--hair);
}
.devlog-entry:last-child{border-bottom:1px solid var(--hair);}
@media (max-width:700px){
  .devlog-entry{grid-template-columns:1fr; gap:6px;}
}
.devlog-date{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:0.04em;
}
.devlog-body p{
  margin:0;
  color:var(--ink-dim);
  font-size:15px;
  line-height:1.7;
}
.devlog-body strong{color:var(--ink);}

.placeholder-note{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-dim);
  border:1px dashed var(--hair);
  border-radius:6px;
  padding:16px 18px;
  line-height:1.6;
}

.video-embed-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--hair);
}
.video-embed-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ---------- CHARACTER ROSTER ---------- */
.character-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
@media (max-width:700px){
  .character-grid{grid-template-columns:1fr;}
}
.character-card{
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
}
.character-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top;
}
.character-card-body{
  padding:20px 22px 24px;
}
.character-name{
  font-size:24px;
  margin-bottom:6px;
}
.character-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:0.04em;
  margin-bottom:14px;
}
.character-desc{
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.7;
}

/* ---------- CONCEPT ROSTER (grid gallery, unnamed WIP characters) ---------- */
.concept-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .concept-grid{grid-template-columns:repeat(2, 1fr);}
}
.concept-card{
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  background:var(--panel);
}
.concept-card-imgs{
  display:flex;
}
.concept-card-imgs img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top;
  flex:1;
}
.concept-card-label{
  padding:10px 12px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-dim);
}
.concept-card-label strong{
  display:block;
  color:var(--ink);
  font-size:13px;
  margin-bottom:2px;
  text-transform:none;
  letter-spacing:0;
}

.stage-preview{
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--hair);
  position:relative;
}
.stage-preview img{width:100%; display:block;}
.stage-preview-tag{
  position:absolute;
  bottom:14px; left:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  background:rgba(0,0,0,0.5);
  padding:6px 12px;
  border-radius:3px;
}

/* ---------- EPISODE GRID (Family x Project) ---------- */
.episode-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:20px;
}
@media (max-width:900px){
  .episode-grid{grid-template-columns:repeat(2, 1fr);}
}
.episode-card{
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  background:var(--panel);
  transition:transform 0.2s, border-color 0.2s;
  display:block;
}
.episode-card:hover{transform:translateY(-3px); border-color:rgba(245,241,234,0.25);}
.episode-thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}
.episode-thumb img{
  width:100%; height:100%;
  object-fit:cover;
}
.episode-thumb .play-badge{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  color:rgba(245,241,234,0.9);
  background:rgba(0,0,0,0.15);
  opacity:0;
  transition:opacity 0.2s;
}
.episode-card:hover .play-badge{opacity:1;}
.episode-label{
  padding:10px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.03em;
}
.episode-card.finale{
  grid-column:span 2;
}
@media (max-width:900px){
  .episode-card.finale{grid-column:span 2;}
}

/* ---------- PORTFOLIO PAGE ---------- */
.portfolio-hero{
  padding:160px 0 60px;
  border-bottom:1px solid var(--hair);
}
.portfolio-tagline{
  font-size:18px;
  color:var(--ink-dim);
  font-weight:800;
  max-width:52ch;
  margin-top:10px;
}
.skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.skill-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.04em;
  padding:8px 14px;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--ink-dim);
}
.portfolio-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
@media (max-width:800px){
  .portfolio-grid-2{grid-template-columns:1fr;}
}
.work-card{
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
}
.work-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.work-card-body{padding:20px 22px 24px;}
.work-card-body h3{font-size:22px; margin-bottom:8px;}
.work-card-body p{color:var(--ink-dim); font-size:14px; line-height:1.7; margin-bottom:14px;}
.work-card-links{display:flex; gap:10px; flex-wrap:wrap;}
.work-card-links a{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--hair);
  padding:7px 12px;
  border-radius:4px;
}
.mini-art-strip{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  margin-top:20px;
}
@media (max-width:700px){
  .mini-art-strip{grid-template-columns:repeat(3, 1fr);}
}
.mini-art-strip img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:4px;
  border:1px solid var(--hair);
}

/* ---------- ENGINE BADGE ---------- */
.engine-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:14px;
  vertical-align:middle;
}
.engine-badge img{
  height:22px;
  width:auto;
  display:block;
  opacity:0.9;
}

/* ---------- FAMILY X PROJECT (crossover brawler) ---------- */
:root{
  --family-1:#E8B923;
  --family-2:#7A2E8C;
}
.eyebrow-family{background:rgba(232,185,35,0.14); color:#F5DFA0;}
.eyebrow-family .dot{background:var(--family-1);}
.title-family{color:var(--ink); text-shadow:0 0 30px rgba(122,46,140,0.35);}
.hook-family{color:var(--family-1);}