:root{
  --bg:#101322; --panel:#181c32; --ink:#f8f5ff; --muted:#bcb7d0;
  --line:rgba(255,255,255,.13); --purple:#b995ff; --cyan:#72e7ff; --orange:#ffd078;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 20% 0,#34276d 0,#101322 42%,#0b0d18 100%);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  position:sticky; top:0; z-index:999;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:16px 28px;
  background:rgba(11,13,24,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.contact{display:flex;flex-direction:column;gap:2px}
.contact b{font-size:15px}
.contact a{font-size:13px;color:var(--muted)}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{font-weight:800;color:#f8f5ff}
.nav a.active{color:var(--cyan)}
.wrap{max-width:1120px;margin:auto;padding:54px 22px 80px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.card{
  background:rgba(24,28,50,.92);border:1px solid var(--line);border-radius:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.26);padding:26px;
}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
h1{font-size:clamp(48px,7vw,86px);line-height:.9;margin:0 0 18px;letter-spacing:-.04em}
h2{font-size:30px;margin:0 0 12px}
h3{font-size:20px;margin:0 0 8px}
p{margin:0 0 14px;color:#ebe7ff}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.list{display:grid;gap:14px;margin-top:18px}
.item{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:20px;padding:18px}
.item b{display:block;color:#fff;margin-bottom:5px}
.button{
  display:inline-block;margin-top:8px;color:#0b0d18;background:var(--cyan);
  border-radius:999px;padding:11px 16px;font-weight:850;
}
.button.secondary{background:rgba(255,255,255,.08);color:#f8f5ff;border:1px solid var(--line)}
.thumb{width:100%;border-radius:18px;border:1px solid var(--line);display:block}
.footer{border-top:1px solid var(--line);padding:26px 22px;color:var(--muted);text-align:center}
@media(max-width:900px){
  .site-header{align-items:flex-start;flex-direction:column}
  .hero,.grid{grid-template-columns:1fr}
}


/* Homepage layout: individual single-line specialty pills + readable bullets */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:14px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:14px;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.skill-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.skill-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border:0;
  outline:1px solid rgba(255,255,255,.18);
  outline-offset:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  line-height:1;
}
.skill-chip::before,
.skill-chip::after{
  content:none;
  display:none;
}
.resume-summary-grid{
  margin-top:0;
  align-items:stretch;
}
.resume-summary-grid .item{
  min-height:136px;
}
.resume-summary-grid .item b{
  display:block;
  margin-bottom:10px;
}
.mini-list{
  margin:0;
  padding-left:18px;
  line-height:1.55;
}
.mini-list li{
  margin:0 0 4px;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* FINAL PILL FIX: filled pills only, no border, no outline, no rectangle artifact */
.skill-chip-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.skill-chip-row .skill-chip,
.skill-chip-row .skill-chip:first-child{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 15px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  background-clip:padding-box !important;
  color:var(--muted) !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1 !important;
  text-decoration:none !important;
  appearance:none !important;
}
.skill-chip-row .skill-chip::before,
.skill-chip-row .skill-chip::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}


/* FINAL FLAT SKILL CHIPS
   Uses div.skill-chip instead of span so inherited span/card styling cannot create an inner capsule. */
.skill-chip-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px 14px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.skill-chip-row > .skill-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:34px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 16px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;
  color:var(--muted) !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1 !important;
  text-decoration:none !important;
}
.skill-chip-row > .skill-chip::before,
.skill-chip-row > .skill-chip::after{
  content:none !important;
  display:none !important;
}


/* Homepage final: plain dotted specialties + bullet cards */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:14px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-grid{
  margin-top:0;
  align-items:stretch;
}
.resume-summary-grid .item{
  min-height:136px;
}
.resume-summary-grid .item b{
  display:block;
  margin-bottom:10px;
}
.mini-list{
  margin:0;
  padding-left:18px;
  line-height:1.55;
}
.mini-list li{
  margin:0 0 4px;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Homepage final: vertical summary rows, no bullets */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:16px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-stack{
  display:grid;
  gap:14px;
  margin-top:0;
}
.summary-row{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:20px;
  align-items:start;
}
.summary-row b{
  display:block;
  margin:0;
}
.summary-row span{
  display:block;
  line-height:1.6;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:800px){
  .summary-row{
    grid-template-columns:1fr;
    gap:6px;
  }
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Homepage final: stacked summary blocks */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:16px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-stack{
  display:grid;
  gap:14px;
  margin-top:0;
}
.summary-block{
  display:block;
  padding:18px;
}
.summary-block b{
  display:block;
  margin:0 0 8px;
  color:#fff;
}
.summary-block span{
  display:block;
  line-height:1.6;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Slightly smaller homepage bio/about text */
.bio-copy{
  font-size:16px !important;
  line-height:1.65 !important;
}


/* Force visible spacing between stacked summary cards on live site */
.resume-summary-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:16px !important;
}
.resume-summary-stack > .summary-block{
  display:block !important;
  margin:0 0 16px 0 !important;
}
.resume-summary-stack > .summary-block:last-child{
  margin-bottom:0 !important;
}


/* Clickable home brand */
.contact .brand{
  color:#fff;
  font-weight:800;
  text-decoration:none;
  transition:opacity .18s ease, color .18s ease;
}
.contact .brand:hover,
.contact .brand:focus{
  opacity:.82;
  text-decoration:none;
}


/* Portfolio case study pages */
.portfolio-wrap,
.case-study-wrap{
  padding-top:30px;
}
.portfolio-hero{
  margin-bottom:16px;
}
.portfolio-hero h1,
.case-hero h1{
  margin-bottom:8px;
}
.portfolio-intro{
  max-width:820px;
  font-size:17px;
  line-height:1.65;
}
.eyebrow{
  margin:0 0 6px;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.case-card{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.045);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.case-card:hover,
.case-card:focus{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.065);
  text-decoration:none;
}
.case-card h2{
  margin:0 0 8px;
  font-size:22px;
}
.case-card p{
  margin:0 0 12px;
}
.case-icon{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:900;
  font-size:20px;
  letter-spacing:-.03em;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.case-icon.large{
  width:86px;
  height:86px;
  border-radius:24px;
  font-size:26px;
}
.proto-icon{
  background:linear-gradient(135deg,#7c6dff,#d66fb5);
}
.choices-icon{
  background:linear-gradient(135deg,#7658ff,#ff6cae);
}
.ffxv-icon{
  background:linear-gradient(135deg,#243c70,#c7d4ff);
  color:#fff;
}
.tools-icon{
  background:linear-gradient(135deg,#2bc4a8,#6c6dff);
}
.tag-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
.back-link{
  display:inline-block;
  margin:0 0 14px;
  color:var(--muted);
  font-weight:800;
  text-decoration:none;
}
.back-link:hover,
.back-link:focus{
  color:#fff;
}
.case-hero{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:16px;
}
.case-subtitle{
  margin:0;
  color:var(--muted);
  font-size:19px;
  line-height:1.5;
}
.case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px;
  align-items:start;
}
.case-main h2{
  margin-top:28px;
  margin-bottom:10px;
}
.case-main h2:first-child{
  margin-top:0;
}
.case-main p{
  color:var(--muted);
  line-height:1.72;
}
.case-list{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  line-height:1.7;
}
.case-list li{
  margin-bottom:7px;
}
.case-side{
  display:grid;
  gap:14px;
}
.case-side .item{
  padding:16px;
}
.case-side .item b{
  display:block;
  margin-bottom:8px;
}
@media(max-width:860px){
  .case-grid{
    grid-template-columns:1fr;
  }
  .case-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .case-card,
  .case-hero{
    grid-template-columns:1fr;
  }
}


/* Portfolio app icon updates */
.case-icon.image-icon{
  padding:0;
  overflow:hidden;
  background:transparent;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.case-icon.image-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.app-icon-showcase{
  margin-top:16px;
}
.showcase-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:18px;
  align-items:end;
  margin-bottom:18px;
}
.showcase-head h2{
  margin:0;
}
.showcase-head p{
  margin:0;
  line-height:1.65;
}
.app-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:14px;
}
.app-icon-grid img{
  width:100%;
  aspect-ratio:1 / 1;
  display:block;
  object-fit:cover;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.app-icon-grid img:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 30px rgba(0,0,0,.25);
}
@media(max-width:860px){
  .showcase-head{
    grid-template-columns:1fr;
    align-items:start;
  }
}


/* Portfolio projects section layout */
.portfolio-projects-page .portfolio-hero{
  margin-bottom:16px;
}
.projects-icon-wall{
  margin-bottom:28px;
}
.app-icon-grid-large{
  grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
}
.portfolio-company-section{
  margin-top:28px;
}
.section-heading{
  margin:0 0 14px;
}
.section-heading h2{
  margin:0 0 8px;
}
.section-heading p{
  max-width:820px;
  line-height:1.65;
}
.compact-case-grid{
  margin-top:0;
}
.static-card{
  cursor:default;
}
.static-card:hover{
  transform:none;
}
@media(max-width:860px){
  .app-icon-grid-large{
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  }
}


/* Portfolio icon wall: single neat row with wrapping only when needed */
.app-icon-grid.app-icon-grid-large{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:14px !important;
}
.app-icon-grid.app-icon-grid-large img{
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}
@media(max-width:700px){
  .app-icon-grid.app-icon-grid-large img{
    width:68px !important;
    height:68px !important;
    flex-basis:68px !important;
  }
}


/* Game History icon row: simple heading + icons only */
.game-history-strip{
  margin-bottom:28px;
}
.game-history-strip h2{
  margin:0 0 14px;
}
.game-history-icons{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding:2px 0 8px !important;
  scrollbar-width:thin;
}
.game-history-icons img{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  border-radius:18px !important;
}
@media(min-width:1200px){
  .game-history-icons{
    overflow-x:visible !important;
  }
}
@media(max-width:700px){
  .game-history-icons img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    border-radius:16px !important;
  }
}


/* Portfolio update: remove top hero, make game history icons clickable, add game stubs */
.portfolio-projects-page{
  padding-top:30px;
}
.game-history-strip{
  margin-bottom:28px;
}
.game-history-icons{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding:2px 0 8px !important;
  scrollbar-width:thin;
}
.game-icon-link{
  display:block;
  width:68px;
  height:68px;
  flex:0 0 68px;
  border-radius:18px;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.game-icon-link:hover,
.game-icon-link:focus{
  transform:translateY(-3px);
}
.game-icon-link img,
.game-history-icons img{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  border-radius:18px !important;
  display:block;
}
.game-stub-hero{
  margin-bottom:16px;
}
@media(max-width:700px){
  .game-icon-link,
  .game-icon-link img,
  .game-history-icons img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    border-radius:16px !important;
  }
}


/* Game History icons: smaller and designed to fit in at most 2 rows on desktop */
.game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 56px) !important;
  grid-auto-rows:56px !important;
  gap:10px !important;
  justify-content:start !important;
  align-content:start !important;
  overflow:visible !important;
  padding:2px 0 4px !important;
}
.game-icon-link{
  width:56px !important;
  height:56px !important;
  flex:none !important;
  border-radius:15px !important;
}
.game-icon-link img,
.game-history-icons img{
  width:56px !important;
  height:56px !important;
  flex:none !important;
  border-radius:15px !important;
}
@media(max-width:900px){
  .game-history-icons{
    grid-template-columns:repeat(7, 50px) !important;
    grid-auto-rows:50px !important;
    gap:8px !important;
  }
  .game-icon-link,
  .game-icon-link img,
  .game-history-icons img{
    width:50px !important;
    height:50px !important;
    border-radius:13px !important;
  }
}
@media(max-width:700px){
  .game-history-icons{
    grid-template-columns:repeat(5, 50px) !important;
  }
}


/* Game History icons: true resized icons, not just tighter spacing */
.game-history-strip .game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 52px) !important;
  grid-auto-rows:52px !important;
  gap:10px !important;
  justify-content:start !important;
  align-content:start !important;
  overflow:visible !important;
  padding:2px 0 4px !important;
  max-width:max-content !important;
}

.game-history-strip .game-history-icons .game-icon-link{
  display:block !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  line-height:0 !important;
}

.game-history-strip .game-history-icons .game-icon-link img{
  display:block !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  object-fit:cover !important;
  border-radius:14px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

@media (max-width: 900px){
  .game-history-strip .game-history-icons{
    grid-template-columns:repeat(7, 48px) !important;
    grid-auto-rows:48px !important;
    gap:8px !important;
  }
  .game-history-strip .game-history-icons .game-icon-link,
  .game-history-strip .game-history-icons .game-icon-link img{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    border-radius:12px !important;
  }
}

@media (max-width: 700px){
  .game-history-strip .game-history-icons{
    grid-template-columns:repeat(5, 48px) !important;
  }
}


/* Portfolio: job/company containers instead of per-title cards */
.job-overview-list{
  display:grid;
  gap:16px;
  margin-top:26px;
}
.job-overview-card{
  padding:20px;
}
.job-overview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:10px;
}
.job-overview-head h2{
  margin:0;
}
.job-overview-card p{
  max-width:940px;
  line-height:1.68;
  margin:0 0 12px;
}
.job-overview-link{
  flex:0 0 auto;
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
}
.job-overview-link:hover,
.job-overview-link:focus{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  text-decoration:none;
}
.job-focus-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:700px){
  .job-overview-head{
    display:block;
  }
  .job-overview-link{
    display:inline-block;
    margin-top:10px;
  }
}


/* Corrected portfolio job containers */
.job-overview-list{
  display:grid;
  gap:16px;
  margin-top:26px;
}
.job-overview-card{
  padding:20px;
}
.job-overview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:10px;
}
.job-overview-head h2{
  margin:0;
}
.job-overview-card p{
  max-width:980px;
  line-height:1.68;
  margin:0 0 12px;
}
.job-overview-link{
  flex:0 0 auto;
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
}
.job-overview-link:hover,
.job-overview-link:focus{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  text-decoration:none;
}
.job-focus-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:700px){
  .job-overview-head{
    display:block;
  }
  .job-overview-link{
    display:inline-block;
    margin-top:10px;
  }
}


/* Portfolio job containers: slightly smaller titles */
.job-overview-head h2{
  font-size:22px !important;
  line-height:1.2 !important;
}

@media(max-width:700px){
  .job-overview-head h2{
    font-size:20px !important;
  }
}


/* HARD FIX: constrain Game History app icons on the live site */
main.portfolio-projects-page .game-history-strip .game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 52px) !important;
  grid-auto-rows:52px !important;
  gap:10px !important;
  width:max-content !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:center !important;
  justify-items:center !important;
  padding:2px 0 6px !important;
}

main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
  overflow:hidden !important;
  border-radius:14px !important;
  line-height:0 !important;
}

main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link > img{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}

/* Safety net: any direct images accidentally left in this row still get constrained */
main.portfolio-projects-page .game-history-strip .game-history-icons > img{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:cover !important;
  border-radius:14px !important;
}

@media(max-width:700px){
  main.portfolio-projects-page .game-history-strip .game-history-icons{
    grid-template-columns:repeat(5, 48px) !important;
    grid-auto-rows:48px !important;
    gap:8px !important;
  }
  main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link,
  main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link > img,
  main.portfolio-projects-page .game-history-strip .game-history-icons > img{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    border-radius:12px !important;
  }
}


/* Global section/card buffer polish for homepage + portfolio */
.homepage-wrap .home-overview{
  margin-bottom:22px !important;
}

.homepage-wrap .resume-summary-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:0 !important;
}

.homepage-wrap .resume-summary-stack > .summary-block,
.homepage-wrap .resume-summary-stack > .item{
  margin-bottom:18px !important;
}

.homepage-wrap .resume-summary-stack > .summary-block:last-child,
.homepage-wrap .resume-summary-stack > .item:last-child{
  margin-bottom:0 !important;
}

/* Portfolio spacing between the major rectangular sections */
.portfolio-projects-page .game-history-strip{
  margin-bottom:34px !important;
}

.portfolio-projects-page .job-overview-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:0 !important;
}

.portfolio-projects-page .job-overview-list > .job-overview-card{
  margin-bottom:20px !important;
}

.portfolio-projects-page .job-overview-list > .job-overview-card:last-child{
  margin-bottom:0 !important;
}

/* Also cover older portfolio section/card class names in case any page still uses them */
.portfolio-company-section{
  margin-top:34px !important;
}

.compact-case-grid,
.case-grid{
  gap:20px !important;
}

.case-card,
.card{
  box-sizing:border-box;
}


/* Homepage title: slightly smaller so it fits on one line more often */
.homepage-wrap .home-overview h1{
  font-size:clamp(48px, 6.2vw, 86px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  max-width:1120px !important;
}

/* Clickable home brand with subtle home icon */
.contact .home-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.contact .home-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  line-height:1;
  transform:translateY(-1px);
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  background:rgba(255,255,255,.14);
  color:#fff;
}

@media(max-width:700px){
  .homepage-wrap .home-overview h1{
    font-size:clamp(40px, 11vw, 58px) !important;
  }
}


/* Header home link: subtle inline icon, no badge/box */
.contact .home-brand{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:5px !important;
}
.contact .home-glyph{
  display:inline !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:.9em !important;
  line-height:1 !important;
  transform:none !important;
  opacity:.75 !important;
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  background:transparent !important;
  color:#fff !important;
  opacity:1 !important;
}


/* Header home affordance: visible, readable, and in-flow */
.contact .home-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
}
.contact .home-separator{
  color:var(--muted) !important;
  opacity:.65 !important;
  font-weight:700 !important;
  margin-left:2px !important;
}
.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:inherit !important;
  font-size:13px !important;
  line-height:1 !important;
  opacity:.9 !important;
  transform:none !important;
}
.contact .home-label{
  color:var(--muted) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}
.contact .home-brand:hover .home-label,
.contact .home-brand:focus .home-label,
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  color:#fff !important;
  opacity:1 !important;
}


/* Header home affordance: icon + name on one line, email below in same header area */
.contact{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
}
.contact .home-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1.1 !important;
}
.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:17px !important;
  height:17px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1 !important;
  opacity:.9 !important;
  transform:none !important;
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  color:#fff !important;
  opacity:1 !important;
}
.contact > a[href^="mailto:"]{
  margin-left:24px !important;
}


/* Header alignment fix: keep home icon + name on one clean baseline */
.contact .home-brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.contact .home-brand span{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  min-height:16px !important;
  font-size:15px !important;
  line-height:1 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle !important;
}

.contact > a[href^="mailto:"]{
  display:block !important;
  margin-left:24px !important;
  line-height:1.2 !important;
}


/* Header: remove home icon styling and keep name as clean clickable home link */
.contact .brand{
  display:inline !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1.1 !important;
}
.contact .brand:hover,
.contact .brand:focus{
  opacity:.82 !important;
  text-decoration:none !important;
}
.contact .home-glyph,
.contact .home-separator,
.contact .home-label{
  display:none !important;
}
.contact > a[href^="mailto:"]{
  margin-left:0 !important;
}


/* Match major page headers more closely to the smaller Game History scale */
.homepage-wrap .home-overview h1,
.resume-wrap h1,
.portfolio-wrap h1,
.case-study-wrap h1,
.wrap > .card:first-child h1{
  font-size:clamp(32px, 4vw, 48px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

/* Keep Game History and related section titles in the same visual family */
.game-history-strip h2,
.section-heading h2,
.job-overview-head h2{
  font-size:clamp(24px, 2.6vw, 32px) !important;
  line-height:1.15 !important;
}

@media(max-width:700px){
  .homepage-wrap .home-overview h1,
  .resume-wrap h1,
  .portfolio-wrap h1,
  .case-study-wrap h1,
  .wrap > .card:first-child h1{
    font-size:34px !important;
  }
}


/* Portfolio: expandable job sections */
.experience-highlights{
  margin-top:30px;
}
.experience-highlights > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.experience-card{
  margin-bottom:20px;
  padding:20px;
}
.experience-card:last-child{
  margin-bottom:0;
}
.experience-summary h3{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.2;
}
.experience-focus{
  margin:0 0 10px;
  color:var(--accent);
  font-weight:900;
  line-height:1.45;
}
.experience-summary .muted{
  margin:0 0 14px;
  max-width:980px;
  line-height:1.68;
}
.job-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.job-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.job-details summary::-webkit-details-marker{
  display:none;
}
.job-details summary::before{
  content:"▸";
  display:inline-block;
  color:var(--accent);
  transition:transform .18s ease;
}
.job-details[open] summary::before{
  transform:rotate(90deg);
}
.job-details summary:hover,
.job-details summary:focus{
  color:#fff;
}
.expanded-content{
  margin-top:16px;
  display:grid;
  gap:16px;
}
.expanded-content .case-hero{
  display:none;
}
.expanded-content .case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:16px;
}
.expanded-content .detail-main,
.expanded-content .case-main,
.expanded-content article{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.expanded-content .detail-side,
.expanded-content .case-side{
  display:grid;
  gap:12px;
}
.expanded-content .detail-note,
.expanded-content .item{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}
.expanded-content h2,
.expanded-content h3{
  margin-top:0;
}
.expanded-content p,
.expanded-content li{
  color:var(--muted);
  line-height:1.68;
}
@media(max-width:800px){
  .expanded-content .case-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .experience-summary h3{
    font-size:20px;
  }
}


/* Portfolio expandable sections: plus/minus on the right */
.job-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.job-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  padding:4px 0 !important;
}

.job-details summary::-webkit-details-marker{
  display:none;
}

.job-details summary::before{
  content:none !important;
  display:none !important;
}

.job-details summary::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.job-details[open] summary::after{
  content:"−";
}

.job-details summary:hover,
.job-details summary:focus{
  color:#fff;
}

.job-details summary:hover::after,
.job-details summary:focus::after{
  border-color:rgba(255,255,255,.3);
  color:#fff;
}


/* Portfolio experience format v2:
   Company — Title
   Tags
   General overview
   Expandable details */
.experience-highlights{
  margin-top:30px;
}
.experience-highlights > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.experience-card.format-v2{
  margin-bottom:20px;
  padding:20px;
}
.experience-card.format-v2:last-child{
  margin-bottom:0;
}
.experience-card.format-v2 h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.experience-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.experience-overview{
  max-width:980px;
  line-height:1.68;
  margin:0 0 16px;
}
.job-details.v2-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.job-details.v2-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  padding:4px 0 !important;
}
.job-details.v2-details summary::-webkit-details-marker{
  display:none;
}
.job-details.v2-details summary::before{
  content:none !important;
  display:none !important;
}
.job-details.v2-details summary::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  font-size:18px;
  font-weight:900;
  line-height:1;
}
.job-details.v2-details[open] summary::after{
  content:"−";
}
.job-details.v2-details summary:hover,
.job-details.v2-details summary:focus{
  color:#fff;
}
.job-details.v2-details summary:hover::after,
.job-details.v2-details summary:focus::after{
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
@media(max-width:700px){
  .experience-card.format-v2 h3{
    font-size:20px;
  }
}


/* Portfolio experience format v3: no accordion, project detail buttons */
.experience-card.format-v3{
  margin-bottom:20px;
  padding:20px;
}
.experience-card.format-v3:last-child{
  margin-bottom:0;
}
.experience-card.format-v3 h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.experience-card.format-v3 .experience-overview{
  margin-bottom:16px;
}
.experience-actions{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.project-detail-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.project-detail-button span{
  color:var(--accent);
  font-size:15px;
  line-height:1;
}
.project-detail-button:hover,
.project-detail-button:focus{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.085);
}
@media(max-width:700px){
  .experience-card.format-v3 h3{
    font-size:20px;
  }
  .project-detail-button{
    width:100%;
    justify-content:center;
  }
}


/* Company / game detail page clean layout */
.company-detail-page{
  max-width:1040px;
}

.company-hero-clean{
  padding:28px;
  margin-bottom:22px;
}

.company-hero-clean .eyebrow,
.game-title-block .eyebrow{
  margin:0 0 8px;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.company-hero-clean h1{
  margin:0 0 16px;
  font-size:clamp(34px, 4.5vw, 56px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.company-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
}

.company-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.game-title-block{
  border-top:1px solid var(--line);
  padding-top:22px;
}

.game-title-block h2{
  margin:0 0 8px;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.1;
}

.game-title-block .muted{
  margin:0;
  max-width:820px;
  line-height:1.68;
}

.game-specific-info{
  padding:28px;
}

.game-specific-info h2{
  margin:0 0 20px;
  font-size:clamp(26px, 3vw, 36px);
  line-height:1.1;
}

.info-section{
  padding:18px 0;
  border-top:1px solid var(--line);
}

.info-section:first-of-type{
  border-top:0;
  padding-top:0;
}

.info-section h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
}

.info-section p,
.info-section li{
  color:var(--muted);
  line-height:1.68;
}

.info-section p{
  margin:0;
}

.info-section ul{
  margin:0;
  padding-left:20px;
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  border-top:1px solid var(--line);
}

.info-grid .info-section{
  border-top:0;
  padding:18px 0;
}

@media(max-width:760px){
  .company-hero-clean,
  .game-specific-info{
    padding:20px;
  }

  .info-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .info-grid .info-section + .info-section{
    border-top:1px solid var(--line);
  }
}


/* Portfolio studio experience: studio cards only, no detail buttons yet */
.studio-experience{
  margin-top:30px;
}
.studio-experience > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.studio-card{
  margin-bottom:20px;
  padding:20px;
}
.studio-card:last-child{
  margin-bottom:0;
}
.studio-card h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.studio-card .experience-overview{
  margin:0;
  max-width:980px;
  line-height:1.68;
}
.studio-card .experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.studio-card .experience-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}
@media(max-width:700px){
  .studio-card h3{
    font-size:20px;
  }
}


/* Main subpage back-home link */
.back-home-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.01em;
  transition:color .16s ease, transform .16s ease;
}
.back-home-link:hover,
.back-home-link:focus{
  color:#fff;
  transform:translateX(-2px);
}