/* Landing intro: who I am on the left, a compact Laff Studios card on the right. */
.intro-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin:22px 0 6px}
/* style.css gives every section a top margin; the intro row handles its own spacing. */
.intro-row>section.about-card{margin-top:0}
.about-card{display:flex;gap:22px;align-items:flex-start;padding:22px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--soft) 82%,transparent);backdrop-filter:blur(10px);box-shadow:0 18px 40px -28px #000}
.about-photo{flex-shrink:0;width:112px;height:112px;border-radius:26px;object-fit:cover;border:3px solid color-mix(in srgb,var(--green) 45%,transparent);box-shadow:0 12px 26px -14px #000;transition:transform .45s cubic-bezier(.34,1.56,.64,1),border-radius .45s}
.about-photo:hover{transform:rotate(-3deg) scale(1.03);border-radius:50%}
.about-copy{flex:1 1 0;min-width:220px}

/* Right column: Laff Studios card on top, newest devlog post below it (added by app.js). */
.intro-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.intro-side>.studio-mini{flex:0 0 auto}
.intro-side>section#devlog-teaser{flex:1;display:flex;margin:0}
.intro-side .devlog-teaser{flex:1;grid-template-columns:1fr;align-content:space-between;justify-items:start;padding:20px}
.intro-side .devlog-teaser-cta{grid-column:1/-1}
.about-copy h1{margin:4px 0 0;font-size:clamp(26px,4vw,34px);line-height:1.15}
.about-role{margin:4px 0 10px;font-size:13px;font-weight:650;color:var(--green)}
.about-bio{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--text)}
.about-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.about-facts li{padding:4px 11px;border-radius:20px;border:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.about-cv{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--green)}
.about-cv span{transition:transform .3s}.about-cv:hover span{transform:translateX(4px)}

/* Mini game strip along the bottom of the about card. */
.about-card{flex-wrap:wrap}
.mini-game{flex:1 0 100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.mini-game-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.mini-game-tabs{display:flex;flex-wrap:wrap;gap:6px}
.mini-game-tabs button{padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;font-weight:650;transition:background .25s,color .25s,border-color .25s}
.mini-game-tabs button:hover{color:var(--text);border-color:var(--green)}
.mini-game-tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#0b1422}
.mini-game-modes{display:inline-flex;padding:3px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--soft) 60%,transparent)}
.mini-game-modes[hidden]{display:none}
.mini-game-modes button{padding:4px 11px;border:0;border-radius:16px;background:transparent;color:var(--muted);font-size:11.5px;font-weight:650;transition:background .25s,color .25s}
.mini-game-modes button[aria-pressed="true"]{background:#ffb347;color:#1a1206}
.mini-game-best{margin-left:auto;font-size:12px;color:var(--muted)}.mini-game-best b{color:var(--text);font-size:14px}
.mini-game-hint{margin:8px 0 0!important;font-size:12px;color:var(--muted)}
.mini-game-canvas{display:block;width:100%;height:260px;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-radius:14px;background:color-mix(in srgb,var(--green) 6%,transparent);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.mini-game-canvas:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Laff Studios: always dark, since the logo is white on transparent. */
@property --studio-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.studio-mini{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px;border-radius:20px;background:linear-gradient(140deg,#0b0c10,#15171e 60%,#1a1422);color:#eef1f7;box-shadow:0 18px 40px -26px #000;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.studio-mini::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:conic-gradient(from var(--studio-angle),#ffb34755,#ff5f8a66,#62d8d055,#ffb34755);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:studio-spin 10s linear infinite}
.studio-mini::after{content:"";position:absolute;z-index:-2;width:220px;height:220px;right:-80px;top:-110px;border-radius:50%;background:radial-gradient(circle,#ff5f8a30,transparent 65%)}
@keyframes studio-spin{to{--studio-angle:360deg}}
.studio-mini:hover{transform:translateY(-3px)}
.studio-mini-logo{display:block;max-width:150px;margin-bottom:6px}
.studio-mini-logo img{display:block;width:100%;height:auto}
.studio-mini .eyebrow{color:#ffb347;font-weight:700}
.studio-mini-text{font-size:12.5px;line-height:1.6;color:#c9d0dc}
.studio-mini-link{margin-top:4px;font-size:12px;font-weight:700;color:#fff}
.studio-mini:focus-visible{outline:3px solid #ffb347;outline-offset:3px}

@media(max-width:760px){.intro-row{grid-template-columns:1fr}}
/* Phones: the intro card already opens the page, so "About" leaves room for the devlog link. */
.brand{white-space:nowrap}
@media(max-width:480px){nav a[href="#about"]{display:none}}
/* Phones: stack the card. No wrapping here: in a column, wrap would push the mini game into a second column off-screen. */
@media(max-width:520px){.about-card{flex-direction:column;flex-wrap:nowrap;align-items:center;text-align:center;padding:20px 16px}.about-card>.mini-game{align-self:stretch;width:100%;text-align:left}.about-card>.about-copy{flex:none;width:100%;min-width:0}.about-facts{justify-content:center}.about-photo{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.studio-mini::before{animation:none}}

/* Project: Respawn spans the grid: cover beside the text on wide screens. */
.wide-card{grid-column:1/-1}
@media(min-width:651px){
 .game-card.wide-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:4px}
 .wide-card .cover-link{height:100%}
 .wide-card .game-visual{height:100%;min-height:300px;aspect-ratio:auto}
}