/* Passytee portfolio — design "A · Index".
   Layout: name + intro, Shorts row, filter row, Coming soon / Out now lists, latest video. */
:root{
  --bg:#F1F2F4; --fg:#14161B; --muted:#5B616D; --line:#D3D6DC; --chip:#E4E6EA;
  --accent:#2747F5; --obg:#2747F5; --solo:#0B8559;
  --display:"Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0F1115; --fg:#ECEEF2; --muted:#98A0AC; --line:#272B33; --chip:#1F232A;
  --accent:#8E9EFF; --obg:#8E9EFF; --solo:#4CD3A0; color-scheme:dark; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:15px; line-height:1.5; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; }
.page{ max-width:1160px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:48px 72px; display:flex; flex-direction:column; gap:40px; }

/* hero */
.hero{ display:flex; flex-direction:column; gap:14px; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0; }
h1{ margin:0; font-family:var(--display); line-height:.9; font-size:clamp(64px,13vw,168px); font-weight:800; font-stretch:125%; letter-spacing:-.035em; text-transform:uppercase; }
.intro{ margin:0; max-width:56ch; font-size:18px; color:var(--muted); }
.intro b{ color:var(--fg); font-weight:600; }
.hero-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.link{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-weight:600; font-size:14px; }
.link svg{ width:18px; height:18px; fill:currentColor; }
.link:hover{ border-color:var(--fg); }
.next{ font-family:var(--mono); font-size:13px; color:var(--muted); }
.next b{ color:var(--accent); font-weight:500; }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filters button{ font:inherit; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.filters button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.filters button .n{ opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums; }
button:focus-visible,a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* game lists */
.shelf{ display:flex; flex-direction:column; gap:18px; }
.shelf h2{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.shelf h2 .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.games{ display:grid; border-top:1px solid var(--fg); }
.game{ display:grid; grid-template-columns:220px minmax(0,1fr) 190px; gap:28px; align-items:center; padding-block:18px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; min-width:0; }
.art{ display:block; width:100%; max-width:100%; aspect-ratio:460/215; object-fit:cover; background:var(--chip); border-radius:3px; filter:grayscale(1) contrast(1.05); transition:filter .25s; }
.game:hover .art{ filter:none; }
.info{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.name{ margin:0; font-family:var(--display); text-wrap:balance; font-size:clamp(22px,2.6vw,32px); font-weight:750; font-stretch:112%; letter-spacing:-.015em; line-height:1.05; transition:color .2s; }
.game:hover .name{ color:var(--accent); }
.blurb{ margin:0; color:var(--muted); font-size:14px; }
.side{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; text-align:right; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.tag{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.tag.obg{ color:var(--obg); } .tag.solo{ color:var(--solo); } .tag.role{ color:var(--muted); }
.meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.cta{ color:var(--fg); font-weight:500; }
.empty{ color:var(--muted); margin:0; padding-block:18px; }

/* Oh Baby Blocks has no Steam capsule: drawn one */
.blocks-art{ position:relative; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(4,1fr); gap:4px; padding:10px; background:#2B2340; overflow:hidden; }
.blocks-art i{ border-radius:5px; }
.blocks-art span{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-stretch:110%; font-size:clamp(16px,2vw,22px); color:#fff; text-shadow:0 2px 0 #2B2340,0 0 16px #2B2340; }

@media (max-width:760px){
  .game{ grid-template-columns:120px minmax(0,1fr); gap:14px; }
  .side{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; text-align:left; }
  .tags{ justify-content:flex-start; }
  .blurb{ display:none; }
}

/* YouTube */
.yt .sub{ margin-left:auto; font-family:var(--body); font-size:14px; font-weight:700; color:var(--accent); text-decoration:none; letter-spacing:0; text-transform:none; }
.yt img{ filter:grayscale(1); transition:filter .25s; }
.yt a:hover img{ filter:none; }
.shorts{ display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:thin; }
.short{ scroll-snap-align:start; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; min-width:0; }
.sthumb{ position:relative; display:block; }
.short img{ display:block; width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:var(--chip); }
.views{ position:absolute; left:8px; bottom:8px; color:#fff; font-size:12px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.st{ margin:0; font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:center; text-decoration:none; color:inherit; }
.thumb{ position:relative; display:block; }
.vid img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; background:var(--chip); }
.play{ position:absolute; left:50%; top:50%; width:64px; height:44px; margin:-22px 0 0 -32px; border-radius:12px; background:#FF0033; display:grid; place-items:center; }
.play::before{ content:""; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.dur{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.8); color:#fff; font-family:var(--mono); font-size:12px; padding:2px 6px; border-radius:4px; }
.vinfo{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.vt{ margin:0; font-family:var(--display); font-size:clamp(22px,2.4vw,30px); line-height:1.1; text-wrap:balance; font-weight:750; font-stretch:112%; letter-spacing:-.015em; }
.vstat{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.short:hover .st,.vid:hover .vt{ color:var(--accent); }
@media (max-width:700px){ .vid{ grid-template-columns:minmax(0,1fr); gap:14px; } .shorts{ grid-auto-columns:140px; } }

footer{ font-family:var(--mono); font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }