/* ============================================================
   inkhavens portfolio
   ============================================================ */

:root{
  --bg:       #0b0c0f;
  --panel-a:  #222326;
  --panel-b:  #1b1c1f;
  --panel-c:  #141517;
  --panel-d:  #101114;
  --cell:     #101113;
  --line:     #2e2f32;
  --line-2:   #28292b;
  --text:     #ffffff;
  --muted:    #aaabad;
  --maxw:     1110px;
}

*{ padding:0; margin:0; border:0; box-sizing:border-box; }
ul{ list-style:none; }
img{ vertical-align:top; max-width:100%; }
a{ color:inherit; text-decoration:none; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI", Tahoma, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

.panel{
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 15%,var(--panel-c) 74%,var(--panel-d) 100%);
  box-shadow:0 0 36px 6px rgba(0,0,0,.25);
}

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  padding:14px 0; background:#0d0f11; border-bottom:1px solid #292b2d;
}
.header__container{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
.header__box{ display:flex; align-items:baseline; gap:12px; }
.header__logo{ font-weight:bold; font-size:16px; }
.header__caption{ font-family:Consolas,"Courier New",monospace; font-size:14px; color:var(--muted); }
.menu{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.menu a{ font-size:14px; color:var(--muted); transition:color .3s; }
.menu a:hover{ color:var(--text); }

/* ---------- hero ---------- */
.hero{ padding:132px 0 74px; border-bottom:1px solid var(--line-2); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.72fr);
  gap:56px; align-items:start;
}
.hero__eyebrow{
  font-family:Consolas,"Courier New",monospace;
  font-size:13px; color:var(--muted); letter-spacing:.04em; margin-bottom:14px;
}
.hero__eyebrow span{ color:#4a4b4e; padding:0 4px; }
.hero__name{
  font-weight:bold; font-size:clamp(2.6rem,6vw,4.25rem);
  line-height:1; letter-spacing:-.025em; margin-bottom:22px;
}
.hero__pitch{
  font-size:17px; color:var(--muted); line-height:1.7;
  max-width:50ch; margin-bottom:28px;
}
.hero__focus{ display:flex; flex-wrap:wrap; gap:0; }
.hero__focus li{
  font-size:13px; color:var(--muted);
  padding:0 14px; border-left:1px solid #34353a; line-height:1.2;
  margin-bottom:8px;
}
.hero__focus li:first-child{ padding-left:0; border-left:none; }

/* spec sheet */
.spec{ border-top:1px solid #34353a; }
.spec__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line-2);
}
.spec dt{ font-size:13.5px; color:var(--muted); }
.spec dd{ font-size:14.5px; font-weight:bold; font-variant-numeric:tabular-nums; text-align:right; }

.panel__caption{ font-weight:bold; font-size:1.5rem; text-align:center; margin-bottom:14px; }
.panel__caption.sm{ font-size:1rem; text-align:left; margin-bottom:10px; }
.panel__text{ font-size:14px; text-align:center; color:var(--muted); margin-bottom:26px; }

/* ---------- stat cells ---------- */
.grid-5, .grid-4{ display:grid; gap:14px; }
.grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cell{
  border:1px solid #2c2d2f; border-radius:6px; background:var(--cell);
  padding:8px 12px 12px; display:grid; gap:3px; align-content:start;
}
.cell__value{ font-weight:bold; font-size:1.1rem; font-variant-numeric:tabular-nums; line-height:1.3; }
.cell__label{ font-size:13px; color:var(--muted); line-height:1.35; }

/* ---------- sections ---------- */
.section{ padding:56px 0; border-top:1px solid var(--line-2); }
.section:first-of-type{ border-top:none; }
.section__title{ font-weight:bold; font-size:2.25rem; text-align:center; margin-bottom:16px; }
.section__sub{
  font-size:15px; text-align:center; color:var(--muted);
  max-width:64ch; margin:0 auto 40px;
}
.section__title + .games,
.section__title + .groups,
.section__title + .profile{ margin-top:40px; }

/* ---------- profile ---------- */
.profile{ max-width:800px; margin:0 auto; overflow:hidden; }
.profile__banner{ height:150px; background:#0a0a0a; overflow:hidden; border-bottom:1px solid var(--line-2); }
.profile__banner img{ width:100%; height:100%; object-fit:cover; }
.profile__head{ display:flex; align-items:flex-end; gap:18px; padding:0 26px; margin-top:-44px; }
.profile__avatar{
  width:96px; height:96px; flex-shrink:0;
  border:3px solid var(--panel-c); border-radius:12px;
  overflow:hidden; background:#17181b;
}
.profile__avatar img{ width:100%; height:100%; object-fit:cover; }
.profile__avatar.is-empty{ border-style:dashed; border-color:var(--line); }
.profile__id{ padding-bottom:6px; }
.profile__id h3{ font-size:1.5rem; font-weight:bold; line-height:1.25; }
.profile__role{ font-size:14px; color:var(--muted); }
.profile__tags{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 26px 0; }
.profile__tags li{
  font-size:13px; color:var(--muted);
  border:1px solid #2c2d2f; border-radius:20px;
  background:var(--cell); padding:4px 12px;
}
.flag{ font-size:14px; }
.profile__bio{ padding:22px 26px 0; }
.profile__bio p{ color:var(--muted); font-size:15px; margin-bottom:14px; }
.profile__bio p:first-child{ color:var(--text); font-size:16px; }
.profile__bio p:last-child{ margin-bottom:0; }
.profile__skills{ padding:22px 26px 30px; margin-top:22px; border-top:1px solid var(--line-2); }
.bullets{ display:grid; gap:6px; padding-left:20px; }
.bullets li{ font-size:14.5px; color:var(--muted); list-style-type:disc; }

/* ---------- games ---------- */
.games{ display:grid; gap:22px; }
.game{ overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.game__media{ position:relative; min-height:270px; background:#0f1012; border-right:1px solid var(--line-2); }
.game__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.game__body{ padding:24px 26px 28px; display:grid; gap:14px; align-content:start; }
.game__head{ display:flex; align-items:center; gap:13px; }
.game__icon{ width:46px; height:46px; border-radius:8px; border:1px solid #2c2d2f; object-fit:cover; flex-shrink:0; }
.game__head h3{ font-size:1.2rem; font-weight:bold; line-height:1.3; }
.badge{
  display:inline-block; font-size:12px; color:var(--muted);
  border:1px solid #2c2d2f; border-radius:20px; background:var(--cell);
  padding:2px 11px; margin:4px 0 0;
}
.game__body > p{ color:var(--muted); font-size:15px; }
.game__work .panel__caption{ text-align:left; font-size:1rem; margin-bottom:8px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.link{ font-size:14.5px; text-decoration:underline; text-underline-offset:3px; }
.link:hover{ color:var(--muted); }
.updated{
  margin-top:24px; text-align:center; font-size:12.5px; color:var(--muted);
  font-family:Consolas,"Courier New",monospace;
}

/* ---------- work examples ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.work{ overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, transform .3s; }
.work:hover{ border-color:#575759; transform:translateY(-3px); }
.work__media{
  position:relative; aspect-ratio:16/9; background:#0f1012;
  border-bottom:1px solid var(--line-2); overflow:hidden;
}
.work__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.work__flag{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.78); border:1px solid #3a3b3e; border-radius:4px;
  font-size:11.5px; color:var(--muted); padding:3px 9px;
}
.work__body{ padding:20px 22px 24px; display:grid; gap:10px; align-content:start; justify-items:start; }
.work__body h3{ font-size:1.15rem; font-weight:bold; line-height:1.3; }
.work__body > p{ color:var(--muted); font-size:14.5px; }
.work__body .badge{ margin:0; }
.btn{
  font-family:inherit; font-size:14px; color:var(--text);
  border:1px solid #575759; border-radius:22px; background:#27282b;
  padding:8px 20px; cursor:pointer; margin-top:4px;
  transition:background .3s, color .3s, border-color .3s;
}
.btn:hover{ background:#fff; color:#27282b; border-color:#fff; }

/* ---------- modal ---------- */
body.is-locked{ overflow:hidden; }
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.78); }
.modal__dialog{
  position:relative; width:100%; max-width:860px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
}
.modal__close{
  position:absolute; top:10px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:1px solid #3a3b3e; background:rgba(16,17,19,.9);
  color:var(--muted); font-size:22px; line-height:1; cursor:pointer;
  transition:color .25s, border-color .25s;
}
.modal__close:hover{ color:#fff; border-color:#fff; }
.modal__scroll{ overflow-y:auto; padding:26px 30px 32px; }
.modal__title{ font-size:1.6rem; font-weight:bold; line-height:1.25; margin:8px 0 18px; }
.modal__video{
  aspect-ratio:16/9; width:100%; background:#000;
  border:1px solid var(--line-2); border-radius:6px; overflow:hidden; margin-bottom:22px;
}
.modal__video iframe{ width:100%; height:100%; border:0; display:block; }
.modal__block{ margin-bottom:22px; }
.modal__block p{ color:var(--muted); font-size:15px; margin-bottom:12px; }
.modal__block p:last-child{ margin-bottom:0; }
.modal__caption{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin-bottom:10px !important;
}
/* code block */
.code__note{ font-size:13.5px; color:var(--muted); margin-bottom:12px !important; }
.code{
  display:flex; align-items:flex-start;
  border:1px solid var(--line-2); border-radius:6px;
  background:#0a0b0d;
  max-height:440px; overflow:auto;   /* one scroller for both axes */
}
.code[data-noselect]{
  user-select:none; -webkit-user-select:none; -ms-user-select:none;
  -webkit-touch-callout:none;
}
.code pre{
  font-family:Consolas,"Courier New",monospace;
  font-size:13px; line-height:1.62; tab-size:2; margin:0;
}
.code__nums{
  padding:14px 10px 14px 14px; text-align:right; color:#4a4b4e;
  background:#08090b; border-right:1px solid var(--line-2);
  flex:0 0 auto; user-select:none;
  position:sticky; left:0; z-index:1;  /* stays put while scrolling sideways */
}
.code__src{ padding:14px 16px; flex:0 0 auto; color:#d6d8dd; }
.code__src code{ font:inherit; }
.c-com{ color:#6f7480; font-style:italic; }
.c-str{ color:#b6d18a; }
.c-num{ color:#e0a878; }
.c-kw { color:#8aa9e0; }

.shots{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shot img{
  width:100%; max-height:540px; object-fit:contain; object-position:top;
  border:1px solid var(--line-2); border-radius:6px;
  background:#0f1012; display:block;
}
.shot figcaption{ font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5; }

/* ---------- groups ---------- */
.groups{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.group{ display:flex; gap:18px; padding:24px; align-items:flex-start; transition:border-color .3s, transform .3s; }
.group:hover{ border-color:#575759; transform:translateY(-3px); }
.group img{ width:64px; height:64px; border-radius:8px; border:1px solid #2c2d2f; flex-shrink:0; object-fit:cover; }
.group h3{ font-size:1.1rem; font-weight:bold; }
.group p{ color:var(--muted); font-size:14px; }
.group .badge{ margin:5px 0 9px; }
.meta{ font-size:13px; color:var(--muted); margin-top:9px; }

/* ---------- feature ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; max-width:990px; margin:0 auto; }
.feature__media{ position:relative; min-height:260px; background:#000; border-right:1px solid var(--line-2); }
.feature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature__body{ padding:24px 26px 28px; display:grid; gap:13px; align-content:start; }
.feature__body h3{ font-size:1.25rem; font-weight:bold; line-height:1.35; }
.feature__body > p{ color:var(--muted); font-size:15px; }
.feature__body .badge{ justify-self:start; margin:0; }

/* ---------- footer ---------- */
.footer{ background:#000; border-top:1px solid var(--line-2); padding:34px 0 52px; text-align:center; }
.footer__title{ font-weight:bold; font-size:1.5rem; margin-bottom:8px; }
.footer__text{ font-family:Consolas,"Courier New",monospace; font-size:14px; color:var(--muted); margin-bottom:20px; }
.footer__count{
  font-size:13.5px; color:var(--muted); margin-bottom:20px;
  font-variant-numeric:tabular-nums;
}
.footer__count b{ color:var(--text); font-weight:bold; }
.footer__count[hidden]{ display:none; }
.footer__links{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; }
.footer__links a{ font-size:13.5px; color:var(--muted); }
.footer__links a:hover{ color:var(--text); }

/* ---------- responsive ---------- */
@media (max-width:992px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game{ grid-template-columns:1fr; }
  .game__media{ min-height:210px; border-right:none; border-bottom:1px solid var(--line-2); }
  .work-grid{ grid-template-columns:1fr; }
  .groups{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; }
  .feature__media{ min-height:210px; border-right:none; border-bottom:1px solid var(--line-2); }
}
@media (max-width:768px){
  .header__container{ flex-wrap:wrap; gap:12px; }
  .hero{ padding:118px 0 56px; }
  .hero__pitch{ font-size:16px; }
  .grid-5, .grid-4, .grid-3{ grid-template-columns:1fr 1fr; }
  .section__title{ font-size:1.75rem; }
  .profile__head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .profile__banner{ height:120px; }
}
@media (max-width:480px){
  .grid-5, .grid-4, .grid-3{ grid-template-columns:1fr; }
  .profile__bio, .profile__tags, .profile__skills, .profile__head{ padding-left:18px; padding-right:18px; }
  .game__body, .feature__body{ padding:20px 18px 24px; }
  .group{ flex-direction:column; }
  .modal{ padding:10px; }
  .modal__scroll{ padding:22px 18px 26px; }
  .shots{ grid-template-columns:1fr; }
}