/* Purpose-built homepage art direction: clean stage, brighter card imagery. */
.view-home {
  background: linear-gradient(90deg, rgba(5, 7, 9, .52), rgba(5, 7, 9, .2)), url('/assets/home-background-v2.web.webp') center / cover fixed;
}

/* Dedicated portfolio backdrop; keep it local to ADV so the personal archive stays quiet. */
.interior-view { background-attachment: scroll; }
#portfolio-view { background: linear-gradient(90deg, rgba(5, 7, 9, .86), rgba(5, 7, 9, .56)), url('/assets/portfolio-background-v2.jpg') center / cover no-repeat; }
#portfolio-view::after { background: linear-gradient(90deg, rgba(5, 7, 9, .2), rgba(5, 7, 9, .7)); }

.menu-card {
  background: rgba(8, 10, 13, .28);
  color: var(--text);
}

.menu-card .card-index {
  color: var(--blue);
}

.menu-card h2 {
  color: #eef1f4;
}

.menu-card p {
  color: #cad0d7;
}

.home-cards {
  max-width: 1120px;
  gap: clamp(12px, 1.5vw, 22px);
}

.menu-card {
  min-height: 0;
  height: clamp(340px, 34vw, 500px);
  aspect-ratio: auto;
}

.menu-card::before {
  background: linear-gradient(180deg, transparent 24%, rgba(4, 6, 8, .84) 100%), var(--card-image) center / cover;
  filter: saturate(.72) brightness(.82);
}

.menu-card:hover::before,
.menu-card.is-selected::before {
  filter: saturate(.9) brightness(.96);
}

.personal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.personal-category-menu { width: min(1500px, calc(100% - 64px)); margin: 0 auto; padding: 7vh 0 7rem; }
.personal-category-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.personal-category-heading h1 { margin:10px 0 0; font-size:clamp(3rem, 8vw, 8rem); line-height:.82; letter-spacing:-.095em; }
.personal-category-heading > .mono { color:var(--muted); font-size:.72rem; letter-spacing:.12em; }
.personal-category-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; padding-top:30px; }
.personal-category-card { position:relative; min-height:clamp(280px, 34vw, 480px); border:1px solid var(--line); padding:18px; background:#0c1014 var(--category-image) center / cover no-repeat; color:var(--text); text-align:left; overflow:hidden; cursor:pointer; isolation:isolate; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.personal-category-card::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(4,6,8,.08) 20%, rgba(4,6,8,.9) 100%); }
.personal-category-card::after { content:""; position:absolute; top:18px; right:18px; color:var(--blue); font:1.2rem/1 var(--mono); opacity:.8; }
.personal-category-card:hover, .personal-category-card:focus-visible { transform:translateY(-4px); border-color:#d3e4fb; box-shadow:0 0 0 1px rgba(169,201,242,.3), 0 16px 42px rgba(0,0,0,.28); }
.category-card-index { position:relative; z-index:1; color:var(--blue); font:12px/1 var(--mono); letter-spacing:.12em; }
.category-card-copy { position:absolute; z-index:1; left:18px; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; }
.category-card-copy strong { font-size:clamp(1.2rem, 2vw, 2.4rem); line-height:.9; letter-spacing:-.07em; }
.category-card-copy small { color:#c2cbd5; font:11px/1 var(--mono); letter-spacing:.12em; }
.archive-toolbar-left { display:flex; align-items:center; gap:14px; min-width:0; }
.archive-back-button { border:0; background:none; color:var(--muted); padding:10px 0; font:500 .7rem/1 var(--mono); letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.archive-back-button:hover { color:var(--text); }

.personal-card {
  min-height: clamp(300px, 30vw, 480px);
}

/* Keep labels readable over both bright and dark source artwork. */
.menu-card .card-content,
.personal-card-copy,
.gallery-caption {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .95);
}

.personal-card::after {
  background: linear-gradient(180deg, rgba(3, 5, 8, .04) 24%, rgba(3, 5, 8, .94) 100%);
}

.personal-card h2,
.personal-card p,
.personal-card p b {
  color: #fff;
}

.personal-card p {
  opacity: .96;
}

.gallery-frame video {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #050607;
}

.gallery-frame video[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .view-home {
    background-attachment: scroll;
  }

  .home-cards {
    gap: 12px;
  }

  .menu-card {
    flex: 0 0 min(80vw, 360px);
    height: min(62vh, 430px);
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .personal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .personal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Personal archive: editorial player/index system */
.personal-archive-shell { width: min(1600px, calc(100% - 64px)); margin: 0 auto; }
.archive-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-bottom:1px solid var(--line); padding:24px 0 18px; }
.archive-heading h1 { margin:8px 0 0; letter-spacing:.12em; }
.archive-counter { color:var(--accent); font:500 clamp(1.4rem, 3vw, 2.8rem)/1 var(--mono); letter-spacing:.12em; white-space:nowrap; }
.archive-toolbar { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:18px 0 24px; border-bottom:1px solid var(--line); }
.archive-filters { display:flex; flex-wrap:wrap; gap:8px; }
.archive-filter-button, .archive-mode-button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:10px 16px; font:500 .7rem/1 var(--mono); letter-spacing:.16em; cursor:pointer; }
.archive-filter-button:hover, .archive-filter-button.is-active, .archive-mode-button:hover, .archive-mode-button.is-active { color:var(--text); border-color:var(--accent); }
.archive-view-switch { display:flex; align-items:center; gap:8px; color:var(--muted); font:500 .65rem/1 var(--mono); letter-spacing:.16em; white-space:nowrap; }
.archive-view-switch .archive-mode-button { padding:9px 12px; }
.personal-archive-content { min-height:520px; padding:34px 0 60px; }
.archive-player { display:grid; grid-template-columns:minmax(0, 1fr) 180px; gap:22px 32px; }
.archive-player-stage { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(240px, .8fr); gap:30px; border:1px solid var(--line); padding:18px; }
.archive-main-media { position:relative; min-height:420px; border:1px solid var(--line); background:#080b0e; padding:0; cursor:pointer; overflow:hidden; }
.archive-main-media img { display:block; width:100%; height:100%; min-height:420px; object-fit:cover; }
.wordmark { display:inline-flex; align-items:center; gap:10px; letter-spacing:.02em; }
.wordmark-logo { display:block; width:34px; height:34px; object-fit:contain; }
.footer-brand { display:inline-flex; align-items:center; gap:10px; }
.footer-brand-black { display:block; width:30px; height:30px; object-fit:contain; background:#fff; }
.archive-video-frame { position:relative; min-height:420px; border:1px solid var(--line); background:#030507; overflow:hidden; }
.archive-main-video { display:block; width:100%; height:100%; min-height:420px; object-fit:contain; background:#030507; }
.archive-video-viewer-button { position:absolute; right:14px; bottom:14px; border:1px solid rgba(224,238,255,.8); background:rgba(4,8,12,.78); color:#fff; padding:12px 14px; font:500 .65rem/1 var(--mono); letter-spacing:.14em; cursor:pointer; }
.archive-video-viewer-button:hover { border-color:var(--accent); color:var(--accent); }
.archive-main-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%); border:1px solid rgba(224,238,255,.8); padding:16px 20px; color:#fff; background:rgba(4,8,12,.7); font:500 .72rem/1 var(--mono); letter-spacing:.2em; }
.archive-player-caption { align-self:end; padding:12px 12px 6px 0; }
.archive-player-caption h2 { margin:14px 0 12px; font-size:clamp(1.8rem, 4vw, 4.8rem); letter-spacing:.08em; }
.archive-player-caption p { max-width:34ch; color:var(--muted); line-height:1.7; }
.archive-player-nav { display:flex; justify-content:space-between; align-items:center; grid-column:1 / -1; }
.archive-player-nav button { border:0; border-top:1px solid var(--line); background:none; color:var(--text); padding:14px 0; font:500 .7rem/1 var(--mono); letter-spacing:.15em; cursor:pointer; }
.archive-player-nav button:hover { color:var(--accent); }
.archive-thumbnails { grid-column:1 / -1; display:grid; grid-template-columns:repeat(7, minmax(80px, 1fr)); gap:8px; overflow:auto; }
.archive-thumb { border:1px solid var(--line); padding:0; background:#080b0e; cursor:pointer; aspect-ratio:16/9; min-width:88px; }
.archive-thumb.is-active { border-color:var(--accent); }
.archive-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.archive-thumb video, .archive-item-media video { width:100%; height:100%; object-fit:cover; display:block; background:#030507; }
.archive-index { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; border-top:1px solid var(--line); }
.archive-item { display:grid; grid-template-columns:minmax(180px, 1.5fr) minmax(150px, 1fr); gap:20px; align-items:center; border:0; border-bottom:1px solid var(--line); padding:18px 0; background:none; color:var(--text); text-align:left; cursor:pointer; }
.archive-item:hover .archive-item-copy strong { color:var(--accent); }
.archive-item-media { position:relative; aspect-ratio:16/9; min-width:0; overflow:hidden; background:#090c10; border:1px solid var(--line); }
.archive-item-media img { width:100%; height:100%; object-fit:cover; display:block; }
.archive-item-copy { display:flex; flex-direction:column; gap:8px; min-width:0; }
.archive-item-copy strong { font:500 1rem/1.2 var(--mono); letter-spacing:.08em; }
.archive-item-copy span, .archive-item-copy small { color:var(--muted); font: .7rem/1.4 var(--mono); letter-spacing:.1em; }
.archive-item-copy small { color:var(--text); }
.archive-play-mark { position:absolute; z-index:1; right:10px; bottom:10px; color:#fff; font-size:.8rem; }
.cover-art-index { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; border-top:0; }
.cover-art-index .archive-item { display:block; border:1px solid var(--line); padding:0; }
.cover-art-index .archive-item-copy { padding:14px; min-height:90px; }
.cover-art-index .archive-item-media { border:0; aspect-ratio:4/3; }
.media-viewer { position:fixed; z-index:100; inset:0; display:grid; place-items:center; background:rgba(4,7,10,.96); padding:28px; }
.media-viewer[hidden] { display:none; }
.viewer-frame { width:min(1500px, 100%); max-height:calc(100vh - 56px); overflow:auto; border:1px solid var(--line); background:#080b0e; padding:18px; }
.modal-close { position:fixed; top:18px; right:22px; z-index:2; border:0; background:none; color:var(--text); font:500 1rem/1 var(--mono); cursor:pointer; }
.modal-close { top:clamp(14px, 2vw, 28px); right:clamp(14px, 2vw, 28px); width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(238,241,244,.8); border-radius:50%; background:rgba(8,10,13,.82); color:#fff; font:700 2rem/1 Arial, sans-serif; text-shadow:0 0 12px rgba(255,255,255,.5); box-shadow:0 0 0 4px rgba(8,10,13,.45), 0 8px 30px rgba(0,0,0,.35); backdrop-filter:blur(8px); transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.modal-close:hover, .modal-close:focus-visible { transform:scale(1.08); border-color:#fff; background:rgba(167,68,60,.92); color:#fff; }
.viewer-topline, .viewer-nav, .viewer-details { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.viewer-topline { border-bottom:1px solid var(--line); padding-bottom:14px; color:var(--accent); }
.viewer-media-wrap { position:relative; margin:18px 0; border:1px solid var(--line); background:#030507; }
.viewer-media-wrap img, .viewer-media-wrap video { display:block; width:100%; max-height:68vh; min-height:300px; object-fit:contain; background:#030507; }
.viewer-media-wrap video[hidden], .viewer-video-controls[hidden] { display:none !important; }
.viewer-video-controls { display:flex; align-items:center; gap:12px; padding:10px 12px; border-top:1px solid var(--line); }
.viewer-video-controls button { border:1px solid var(--line); background:transparent; color:var(--text); padding:8px 10px; font:500 .65rem/1 var(--mono); cursor:pointer; }
.viewer-video-controls button:hover { border-color:var(--accent); color:var(--accent); }
.viewer-video-controls input { flex:1; accent-color:var(--accent); }
.viewer-nav { border-bottom:1px solid var(--line); padding:4px 0 18px; }
.viewer-nav button { border:0; background:none; color:var(--text); font:500 .68rem/1 var(--mono); letter-spacing:.12em; cursor:pointer; }
.viewer-nav button:hover { color:var(--accent); }
.viewer-title { text-align:center; }
.viewer-title strong, .viewer-title span { display:block; }
.viewer-title strong { letter-spacing:.14em; }
.viewer-title span { margin-top:8px; color:var(--muted); }
.viewer-details { justify-content:center; padding-top:18px; }
.viewer-details > span { min-width:150px; padding:0 18px; border-right:1px solid var(--line); text-align:center; }
.viewer-details > span:last-child { border-right:0; }
.viewer-details small, .viewer-details b { display:block; font:500 .62rem/1.5 var(--mono); letter-spacing:.14em; }
.viewer-details small { color:var(--muted); margin-bottom:7px; }
@media (max-width: 980px) { .personal-archive-shell { width:min(100% - 32px, 760px); } .archive-toolbar { align-items:flex-start; flex-direction:column; } .archive-player-stage { grid-template-columns:1fr; } .archive-player-caption { padding:0; } .archive-index { grid-template-columns:1fr; } .cover-art-index { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .personal-category-menu { width:calc(100% - 24px); padding:7vh 0 4rem; } .personal-category-heading { align-items:flex-start; flex-direction:column; } .personal-category-heading h1 { font-size:clamp(3rem, 16vw, 6rem); } .personal-category-grid { grid-template-columns:1fr 1fr; gap:12px; } .personal-category-card { min-height:56vw; } .personal-category-card:first-child { grid-column:span 2; min-height:66vw; } .personal-archive-shell { width:calc(100% - 24px); } .archive-heading { align-items:flex-start; flex-direction:column; } .archive-toolbar-left { width:100%; align-items:flex-start; flex-direction:column; gap:4px; } .archive-filters { flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding-bottom:4px; } .archive-filter-button { flex:0 0 auto; } .archive-view-switch { width:100%; } .archive-view-switch .archive-mode-button { flex:1; } .archive-player-stage { padding:10px; } .archive-main-media, .archive-main-media img, .archive-video-frame, .archive-main-video { min-height:240px; } .archive-thumbnails { grid-template-columns:repeat(3, minmax(90px, 1fr)); } .archive-item { grid-template-columns:1fr; gap:12px; } .cover-art-index { grid-template-columns:1fr; } .media-viewer { padding:12px; } .viewer-frame { padding:12px; max-height:calc(100vh - 24px); } .viewer-media-wrap img, .viewer-media-wrap video { min-height:220px; max-height:58vh; } .viewer-video-controls { flex-wrap:wrap; } .viewer-video-controls input { order:3; flex-basis:100%; } .viewer-nav { align-items:stretch; flex-wrap:wrap; } .viewer-title { order:-1; flex-basis:100%; } .viewer-details { justify-content:stretch; flex-wrap:wrap; } .viewer-details > span { flex:1 1 45%; min-width:0; border-bottom:1px solid var(--line); border-right:0; padding:10px 4px; } .modal-close { width:46px; height:46px; font-size:1.8rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

@font-face { font-family:"Akira Expanded"; src:url('/assets/fonts/akira-expanded.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue"; src:url('/assets/fonts/helvetica-neue-roman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue"; src:url('/assets/fonts/helvetica-neue-medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue"; src:url('/assets/fonts/helvetica-neue-bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue"; src:url('/assets/fonts/helvetica-neue-italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
:root { --title:"Helvetica Neue",Helvetica,Arial,sans-serif; --sans:"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"Helvetica Neue",Helvetica,Arial,sans-serif; }
body, button, input, textarea, select { font-family:var(--sans); }
.menu-card h2, .page-heading h1, .personal-category-heading h1, .archive-heading h1,
.archive-player-caption h2, .case-title, .game-start h1, .game-complete h1,
.boot-mark, .game-message, .project-card .brand, .personal-category-card strong {
  font-family:var(--title); font-weight:400; letter-spacing:.015em;
}

/* Editorial media sequence: case study, boards, content, credits. */
.case-media-group{display:flex;flex-direction:column;gap:clamp(18px,3vw,44px)}
.case-media-group + .case-media-group{margin-top:clamp(3.5rem,7vw,7rem);padding-top:1.25rem}
.case-media-heading{display:flex;align-items:center;gap:1rem}
.case-media-heading .eyebrow{color:var(--blue);font-weight:500;letter-spacing:.14em}
.case-media-label{margin:0;color:var(--muted);font:11px var(--mono);letter-spacing:.12em}

/* LinkedIn CTA in the ADV portfolio header. */
.linkedin-portfolio-cta{display:flex;flex-direction:column;gap:.55rem;align-self:flex-end;min-width:205px;padding:1rem 1.15rem;border:1px solid var(--blue);background:rgba(171,200,238,.08);color:var(--text);text-decoration:none;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.linkedin-portfolio-cta span{color:var(--blue);font:11px var(--mono);letter-spacing:.12em}
.linkedin-portfolio-cta strong{font:500 14px var(--mono);letter-spacing:.04em}
.linkedin-portfolio-cta:hover,.linkedin-portfolio-cta:focus-visible{background:rgba(171,200,238,.18);border-color:#e1edfb;transform:translateY(-2px)}
@media(max-width:980px){.linkedin-portfolio-cta{align-self:flex-start;margin-top:1rem}}
@media(max-width:640px){.linkedin-portfolio-cta{width:100%;min-width:0;margin-top:1.4rem}.case-media-group + .case-media-group{margin-top:3rem}}

/* Portfolio heading: keep the title optically balanced beside the supporting copy and CTA. */
.page-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,22ch) minmax(205px,230px);align-items:end;gap:clamp(1.5rem,4vw,5rem)}
.page-heading>div{min-width:0}
.page-heading h1{font-size:clamp(3.3rem,5.7vw,6.2rem);white-space:nowrap;letter-spacing:-.045em}
.page-heading .heading-note{max-width:22ch;margin:0;text-align:left}
.page-heading .linkedin-portfolio-cta{margin-top:0}
@media(max-width:980px){.page-heading{grid-template-columns:minmax(0,1fr) minmax(205px,230px);gap:1.5rem}.page-heading>div{grid-column:1/-1}.page-heading .heading-note{grid-column:1}.page-heading .linkedin-portfolio-cta{grid-column:2;grid-row:2;align-self:end}}
@media(max-width:640px){.page-heading{display:block}.page-heading h1{font-size:clamp(2.8rem,13vw,5rem);white-space:normal;letter-spacing:-.035em}.page-heading .heading-note{margin-top:1.6rem}.page-heading .linkedin-portfolio-cta{margin-top:1.4rem}}
.archive-player-caption h2, .project-card .brand, .personal-category-card strong { line-height:1.05; }
.archive-main-media { cursor:default; }
.archive-keyboard-hint { color:var(--muted); font:500 .68rem/1 var(--mono); letter-spacing:.15em; white-space:nowrap; }
.portfolio-character-guide { grid-column:1 / -1; display:flex; align-items:center; gap:20px; min-height:132px; border:1px solid var(--line); padding:14px 24px; background:linear-gradient(90deg,rgba(15,20,25,.96),rgba(15,20,25,.58)); }
.portfolio-character-guide img { display:block; width:72px; height:104px; object-fit:contain; image-rendering:pixelated; }
.portfolio-character-guide p { margin:8px 0 0; color:var(--text); font:500 clamp(.85rem,1.4vw,1.15rem)/1.35 var(--mono); letter-spacing:.08em; }
.case-role-guide { display:flex; align-items:center; gap:22px; width:min(720px,100%); margin:42px 0 0; padding:16px 22px; border:1px solid var(--line); background:rgba(15,20,25,.82); }
.case-role-guide img { display:block; width:84px; height:118px; object-fit:contain; image-rendering:pixelated; }
.case-role-guide strong { display:block; margin-top:10px; font:500 clamp(.85rem,1.5vw,1.15rem)/1.4 var(--mono); letter-spacing:.08em; }
.case-role-guide strong { max-width:58ch; letter-spacing:.015em; }
@media (max-width:640px) {
  .archive-keyboard-hint { font-size:.58rem; }
  .portfolio-character-guide { padding:12px 16px; gap:14px; }
  .portfolio-character-guide img { width:58px; height:88px; }
  .case-role-guide { gap:15px; padding:12px 15px; }
  .case-role-guide img { width:64px; height:96px; }
}

/* Asset-led refresh: keep the existing navigation and page structure intact. */
.view-home { background:linear-gradient(90deg,rgba(5,7,9,.72),rgba(5,7,9,.34)),url('/assets/studio/creative-room.web.webp') center/cover fixed; }
body, h1, h2, h3, h4, h5, h6, p, button, input, textarea, select, .heading-note, .gallery-caption, .viewer-title { text-align:left; }
.game-start, .game-complete, .boot-screen { text-align:left; align-items:flex-start; }
.heading-note { text-align:left; }
.page-heading h1, .personal-category-heading h1 { max-width:100%; overflow-wrap:anywhere; }
@media(max-width:640px){.view-home{background-attachment:scroll;}}
@media(max-width:640px){.page-heading h1{font-size:clamp(2.2rem,12vw,4rem);line-height:.95;}.page-heading,.portfolio-grid,.personal-category-menu{max-width:100%;}}

/* Keep the expanded display face inside its cards on large screens. */
.menu-card .card-content,.category-card-copy{max-width:100%;}
.menu-card h2{font-size:clamp(1.15rem,2.1vw,2.8rem);max-width:100%;overflow-wrap:anywhere;word-break:normal;}
.category-card-copy strong{font-size:clamp(1.05rem,1.45vw,1.7rem);max-width:100%;overflow-wrap:anywhere;word-break:normal;}

/* Home cards: dedicated room-inspired assets, one visual language with three distinct subjects. */
.menu-card::before{background:linear-gradient(180deg,rgba(6,14,16,.08) 18%,rgba(6,14,16,.94) 100%),var(--card-image) center/cover no-repeat;filter:saturate(.82) brightness(.72);}
.menu-card[data-menu="portfolio"]::before,
.menu-card[data-menu="play"]::before,
.menu-card[data-menu="personal"]::before{background-position:center;}
.menu-card:hover::before,.menu-card.is-selected::before{filter:saturate(1) brightness(.88);}

/* Behance-like case studies: cover first, then a clear editorial media sequence. */
.behance-hero{grid-template-columns:1fr;gap:28px;align-items:start;}
.behance-hero .case-hero-copy{max-width:980px;}
.behance-hero .case-visual{aspect-ratio:16/7;filter:brightness(.78) saturate(.82);}
.behance-media-stack{display:flex;flex-direction:column;gap:clamp(18px,3vw,44px);margin-top:5rem;}
.behance-media-stack .case-media-item img{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain;filter:none;}
.behance-media-stack .case-media-item video{width:100%;aspect-ratio:16/9;filter:none;}
.case-project-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6rem;border-top:1px solid var(--line);padding-top:16px;}
.case-project-link{appearance:none;text-align:left;min-height:118px;padding:20px;border:1px solid var(--line);background:rgba(15,20,25,.72);color:var(--text);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.case-project-link:hover,.case-project-link:focus-visible{background:rgba(41,52,65,.72);border-color:#d3e4fb;transform:translateY(-2px);}
.case-project-link span{display:block;color:var(--blue);font:11px var(--mono);letter-spacing:.1em;}
.case-project-link strong{display:block;margin-top:18px;font:500 clamp(.95rem,1.6vw,1.35rem)/1.05 var(--title);letter-spacing:.01em;}
.case-project-next{text-align:right;}
.portfolio-character-guide,.case-role-guide{transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.portfolio-character-guide:hover,.portfolio-character-guide:focus-visible,.case-role-guide:hover,.case-role-guide:focus-visible{border-color:#d3e4fb;background:linear-gradient(90deg,rgba(25,34,43,.98),rgba(15,20,25,.7));transform:translateY(-2px);}
.character-sprite{display:block;width:84px;height:126px;flex:0 0 auto;background-image:url('/assets/player-animations.web.webp');background-repeat:no-repeat;background-size:1008px 672px;background-position:0 0;image-rendering:pixelated;}
.portfolio-character-guide .character-sprite{width:72px;height:108px;background-size:864px 576px;}
@media (max-width:640px){
  .behance-hero .case-visual{aspect-ratio:16/10;}
  .case-project-nav{grid-template-columns:1fr;gap:12px;margin-top:4rem;}
  .case-project-next{text-align:left;}
  .portfolio-character-guide .character-sprite{width:58px;height:87px;background-size:696px 464px;}
  .case-role-guide .character-sprite{width:64px;height:96px;background-size:768px 512px;}
}

/* Shared console navigation and first-visit introduction. */
.site-header{align-items:flex-start;flex-wrap:wrap;row-gap:14px;}
.site-header{align-items:center;}
.site-header .wordmark{display:inline-flex;align-items:center;gap:12px;line-height:1;}
.site-header .wordmark-logo{display:block;flex:0 0 auto;}
.site-header>div{display:flex;align-items:center;gap:20px;}
.site-header .site-nav,.site-header .header-status{align-self:center;}
.site-nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,24px);margin-left:auto;}
.site-nav button,.footer-social a,.social-pending,.intro-replay{appearance:none;border:0;background:none;color:#b9c5d2;padding:.35rem 0;font:500 10px/1 var(--mono);letter-spacing:.1em;cursor:pointer;text-decoration:none;white-space:nowrap;}
.site-nav button:hover,.site-nav button:focus-visible,.footer-social a:hover,.footer-social a:focus-visible,.intro-replay:hover,.intro-replay:focus-visible{color:var(--text);}
.site-nav button::before{content:"/ ";color:var(--blue);opacity:0;transition:opacity .18s ease;}
.site-nav button:hover::before,.site-nav button:focus-visible::before{opacity:1;}
.home-intro{max-width:980px;margin-bottom:clamp(2rem,4vw,3.5rem);}
.home-intro h1{font-family:var(--title);font-size:clamp(2.6rem,6.6vw,7.5rem);line-height:.9;letter-spacing:.01em;color:#f1f4f7;margin:14px 0 8px;}
.home-role{margin:0;color:#c4d6e8;font:500 clamp(1rem,1.6vw,1.4rem)/1 var(--mono);letter-spacing:.15em;}
.home-prompt{display:block;margin-top:28px;color:var(--muted);font:500 10px/1 var(--mono);letter-spacing:.16em;}
.card-open{display:block;margin-top:16px;color:var(--blue);font:500 10px/1 var(--mono);letter-spacing:.12em;opacity:.85;}
.home-footer{gap:18px;flex-wrap:wrap;}
.footer-brand,.footer-social{display:flex;align-items:center;gap:16px;}
.footer-social{margin-left:auto;}
.social-pending{color:#65717e;cursor:default;}
.intro-replay{color:var(--blue);}

.intro-view{background:radial-gradient(circle at 70% 30%,rgba(101,137,174,.2),transparent 28%),linear-gradient(135deg,#07090c,#151b22 52%,#080a0d);overflow:hidden;}
.intro-topbar,.intro-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 6vw;color:var(--muted);}
.intro-topbar{border-bottom:1px solid rgba(219,226,235,.14);}
.intro-stage{position:relative;min-height:calc(100vh - 132px);display:flex;align-items:center;justify-content:center;padding:6vh 6vw 10vh;outline:0;cursor:pointer;isolation:isolate;}
.intro-scanlines{position:absolute;inset:0;z-index:-1;opacity:.28;background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:100% 5px;pointer-events:none;}
.intro-system-mark{position:absolute;top:9%;left:6vw;display:flex;flex-direction:column;gap:10px;color:#bdcad8;}
.intro-system-mark strong{font:400 clamp(1.8rem,4vw,4rem)/.9 var(--title);color:#edf2f7;letter-spacing:.02em;}
.intro-system-mark small{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--muted);}
.intro-character{position:absolute;left:clamp(8vw,18vw,22vw);bottom:13%;width:126px;height:189px;animation:intro-enter 1.05s cubic-bezier(.2,.78,.22,1) both;filter:drop-shadow(0 20px 18px rgba(0,0,0,.45));}
.intro-sprite{width:126px;height:189px;background-size:1512px 1008px;}
.intro-dialogue{position:relative;width:min(760px,100%);margin-left:clamp(130px,20vw,260px);margin-top:15vh;padding:28px 32px;border:1px solid rgba(219,226,235,.38);background:linear-gradient(130deg,rgba(13,18,24,.94),rgba(15,22,30,.74));box-shadow:20px 20px 0 rgba(0,0,0,.18);}
.intro-dialogue::before{content:"";position:absolute;left:-18px;bottom:32px;width:18px;height:18px;border-left:1px solid rgba(219,226,235,.38);border-bottom:1px solid rgba(219,226,235,.38);background:#10171f;transform:skewX(-35deg);}
.intro-dialogue h1{font:400 clamp(1.2rem,2vw,1.8rem)/1 var(--title);letter-spacing:.02em;color:#eff3f6;margin:14px 0 20px;}
.intro-dialogue p{margin:0;min-height:78px;color:#dbe3eb;font:500 clamp(1.05rem,1.8vw,1.4rem)/1.45 var(--sans);}
.intro-dialogue p span{display:block;}
.intro-next{margin:24px 0 0;}
.intro-choices{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);width:min(780px,88vw);text-align:center;}
.intro-choices>div{display:flex;justify-content:center;gap:12px;margin-top:14px;}
.secondary-button{appearance:none;border:1px solid rgba(219,226,235,.4);background:rgba(255,255,255,.03);color:#e8eef4;padding:1rem 1.5rem;font:500 11px/1 var(--mono);letter-spacing:.08em;cursor:pointer;}
.secondary-button:hover,.secondary-button:focus-visible{background:rgba(173,205,239,.12);border-color:#d3e4fb;}
.intro-footer{position:absolute;left:0;right:0;bottom:0;}
@keyframes intro-enter{from{opacity:0;transform:translate3d(-110px,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.context-route{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0;color:var(--blue);font:500 11px/1 var(--mono);letter-spacing:.12em;text-decoration:none;}
.project-card{display:block;text-decoration:none;}
.context-route:hover,.context-route:focus-visible{color:var(--text);}
.context-route span{font-size:1.2rem;}
.context-route-personal{width:min(1500px,calc(100% - 64px));margin:0 auto;padding-bottom:0;border-top:0;}
.play-header{position:absolute;top:0;left:0;right:0;z-index:10;}
.play-view .boot-screen,.play-view .game-start,.play-view .game-complete{padding-top:130px;}
.game-credit{margin:0 0 18px;color:var(--blue);font:11px var(--mono);letter-spacing:.1em;}
.intro-view.is-final .intro-stage{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:clamp(250px,30vh,360px);}
.intro-view.is-final .intro-dialogue{margin-top:0;}
.intro-view.is-final .intro-choices{position:relative;left:auto;bottom:auto;transform:none;width:min(760px,calc(100% - clamp(130px,20vw,260px)));margin:18px 0 0 clamp(130px,20vw,260px);text-align:left;}
.intro-view.is-final .intro-choices>div{justify-content:flex-start;}

@media (max-width:980px){
  .site-nav{order:3;width:100%;overflow-x:auto;margin-left:0;padding-bottom:4px;}
  .site-nav button{flex:0 0 auto;}
  .home-header .header-status{display:none;}
  .intro-system-mark{top:6%;}
  .intro-character{left:8vw;bottom:12%;}
  .intro-dialogue{margin-left:14vw;}
}
@media (max-width:640px){
  .site-header{padding-left:5vw;padding-right:5vw;}
  .site-nav{gap:18px;}
  .site-nav button{font-size:9px;}
  .home-stage{padding-top:5vh;}
  .home-intro h1{font-size:clamp(2.45rem,12vw,4.5rem);}
  .home-prompt{margin-top:20px;}
  .home-cards{display:grid;grid-template-columns:1fr;overflow:visible;width:100%;margin:0;gap:12px;}
  .menu-card{width:100%;height:45vh;min-height:245px;}
  .home-footer{align-items:flex-start;padding-top:8px;}
  .footer-social{order:3;width:100%;margin-left:0;gap:13px;overflow-x:auto;}
  .intro-topbar,.intro-footer{padding-left:5vw;padding-right:5vw;}
  .intro-topbar{font-size:9px;}
  .intro-stage{min-height:calc(100vh - 120px);padding:32vh 5vw 15vh;align-items:flex-end;}
  .intro-system-mark{left:5vw;top:7%;}
  .intro-system-mark strong{font-size:2rem;}
  .intro-character{left:8vw;bottom:auto;top:19%;transform:scale(.82);transform-origin:left bottom;}
  .intro-dialogue{width:100%;margin:0;padding:20px 18px;}
  .intro-dialogue::before{left:35px;bottom:auto;top:-12px;transform:rotate(135deg) skewX(-35deg);}
  .intro-dialogue p{min-height:120px;font-size:1rem;}
  .intro-choices{position:static;transform:none;width:100%;margin-top:16px;}
  .intro-choices>div{flex-direction:column;}
  .intro-choices .primary-button,.intro-choices .secondary-button{width:100%;margin:0;}
  .intro-footer{font-size:9px;}
  .context-route-personal{width:calc(100% - 10vw);}
  .play-view .boot-screen,.play-view .game-start,.play-view .game-complete{padding-top:112px;}
  .intro-view.is-final .intro-stage{padding-top:32vh;}
  .intro-view.is-final .intro-dialogue{margin:0;}
  .intro-view.is-final .intro-choices{width:100%;margin:16px 0 0;text-align:center;}
  .intro-view.is-final .intro-choices>div{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.intro-character{animation:none;}.menu-card,.intro-dialogue{transition:none;}}

/* Final route selection: keep both actions on one aligned baseline and give the character its own clear space. */
@media (min-width:641px){
  .intro-view.is-final .intro-choices>div{align-items:stretch;gap:16px;}
  .intro-view.is-final .intro-choices .primary-button,
  .intro-view.is-final .intro-choices .secondary-button{margin:0;min-width:180px;min-height:72px;}
  .intro-view.is-final .intro-character{left:clamp(5vw,13vw,11rem);}
}
@media (max-width:640px){
  .intro-view.is-final .intro-stage{padding-left:28vw;padding-right:5vw;padding-top:20vh;}
  .intro-view.is-final .intro-character{left:-4vw;top:21vh;bottom:auto;transform:scale(.62);z-index:1;}
}

/* Keep project authors visible without interrupting the visual case-study flow. */
.case-credits { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.case-credits span { display:block; margin-bottom:.5rem; color:var(--blue); font:700 .62rem/1 var(--mono); letter-spacing:.12em; }
.case-credits strong { display:block; color:#b7c2ce; font:500 .72rem/1.5 var(--mono); letter-spacing:.02em; overflow-wrap:anywhere; }

/* Keep the top utility bar clean: no decorative role label or separator line. */
.site-header .site-nav::after { content:none !important; display:none !important; }
.site-header { border-bottom:0 !important; }

/* Home text grid: keep the intro and the menu cards on one shared left edge. */
#home-view .home-stage { align-items:flex-start; }
#home-view .home-intro,
#home-view .home-cards { width:min(1120px,100%); max-width:1120px; margin-left:0; margin-right:0; }
#home-view .menu-card { text-align:left; }
#home-view .menu-card .card-content { width:100%; }

/* Persistent back control for interior pages. */
.site-header { position:relative; }
.header-back-button {
  position:absolute;
  left:clamp(12px,1.6vw,26px);
  top:50%;
  z-index:4;
  transform:translateY(-50%);
  appearance:none;
  border:0;
  padding:.35rem .45rem;
  background:transparent;
  color:var(--blue);
  font:600 1.05rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  cursor:pointer;
  transition:color .2s ease,transform .2s ease;
}
.header-back-button:hover,
.header-back-button:focus-visible { color:var(--text); transform:translate(-2px,-50%); }
.interior-header .wordmark,
.play-header .wordmark { margin-left:clamp(1.8rem,2.6vw,3rem); }
@media (max-width:700px) {
  .header-back-button { left:8px; }
  .interior-header .wordmark,
  .play-header .wordmark { margin-left:1.45rem; }
}

/* Shared spacing scale for the home rhythm. */
#home-view .home-stage { gap:clamp(32px,3vw,48px); }
#home-view .home-intro { margin-bottom:0; }
#home-view .home-cards { gap:clamp(16px,1.5vw,22px); padding-bottom:0; }
#home-view .home-footer { padding-bottom:32px; }
@media (max-width:640px) {
  #home-view .home-stage { gap:32px; padding-top:32px; padding-bottom:32px; }
  #home-view .home-cards { gap:16px; }
  #home-view .home-footer { padding-top:0; padding-bottom:24px; }
}
/* Publish marker: keep the complete visual asset bundle attached to this layout revision. */

/* Minimal intro: center the character and greeting, with one route into the main menu. */
.intro-topbar,.intro-footer,.intro-system-mark,.intro-choices{display:none!important;}
.intro-stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:clamp(72px,10vh,120px) 5vw 8vh;cursor:default;}
.intro-character{position:relative;left:auto;bottom:auto;flex:0 0 auto;width:126px;height:189px;animation:intro-enter 1.05s cubic-bezier(.2,.78,.22,1) both;}
.intro-dialogue{position:relative;width:min(680px,100%);margin:0;padding:28px 32px;text-align:center;}
.intro-dialogue::before{left:50%;bottom:auto;top:-10px;transform:translateX(-50%) rotate(135deg) skewX(-35deg);}
.intro-dialogue h1{margin:0;color:#eff3f6;font:500 clamp(1.25rem,2.2vw,1.9rem)/1.25 var(--sans);letter-spacing:.01em;}
.intro-next{margin:24px auto 0;display:inline-flex;}
@media (max-width:640px){
  .intro-stage{min-height:100svh;padding:72px 5vw 8vh;gap:14px;}
  .intro-character{transform:scale(.82);transform-origin:center bottom;margin-bottom:-28px;}
  .intro-dialogue{width:100%;padding:22px 18px;}
  .intro-dialogue h1{font-size:1.15rem;}
}

/* Mobile play mode: a dedicated handheld shell inspired by the GBA. */
@media (max-width: 640px) {
  .game-wrap { min-height: 100svh; padding: 108px 0 300px; overflow: hidden; }
  .game-topbar { width: calc(100% - 28px); padding: 0 0 10px; font-size: 10px; }
  .mobile-game-exit { border: 1px solid rgba(255,255,255,.32); border-radius: 4px; padding: 6px 8px; background: rgba(255,255,255,.06); color: #eee7ff; font: 700 10px/1 var(--mono); }
  #game-canvas { width: calc(100% - 20px); max-width: none; border: 8px solid #252532; border-radius: 13px; box-shadow: 0 0 0 2px #747287, 0 6px 0 #17171f, 0 12px 30px rgba(0,0,0,.42); image-rendering: pixelated; }
  .game-bottom { display: none; }
  .touch-controls { position: fixed; inset: auto 0 0; height: 274px; padding: 17px 24px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; z-index: 10; overflow: hidden; border-radius: 34px 34px 0 0; border: 1px solid rgba(255,255,255,.42); border-bottom: 0; background: linear-gradient(145deg,#7650d2 0%,#5934b1 44%,#44258f 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.32), inset 0 -12px 22px rgba(25,10,67,.25), 0 -13px 34px rgba(0,0,0,.4); }
  .touch-controls::before { content: ""; position: absolute; inset: 7px 8px auto; height: 1px; background: rgba(255,255,255,.22); pointer-events: none; }
  .touch-controls::after { content: ""; position: absolute; left: 50%; top: 42px; width: 70px; height: 5px; border-radius: 99px; transform: translateX(-50%); background: rgba(31,15,82,.45); box-shadow: 0 1px 0 rgba(255,255,255,.18); }
  .gba-shell-mark { position: relative; align-self: center; display: flex; align-items: baseline; gap: 5px; margin-top: 1px; color: rgba(247,242,255,.94); font: 700 9px/1 var(--sans); letter-spacing: .08em; text-shadow: 0 1px 1px rgba(23,12,61,.45); }
  .gba-shell-mark b { font-size: 12px; font-style: italic; letter-spacing: -.04em; }
  .gba-shell-mark i { font: 7px/1 var(--mono); letter-spacing: .08em; opacity: .72; }
  .gba-control-row { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 8px 8px; }
  .gba-dpad { position: relative; width: 144px; height: 144px; flex: 0 0 144px; filter: drop-shadow(0 5px 2px rgba(28,13,72,.5)); }
  .gba-dir { position: absolute; z-index: 1; width: 48px; height: 48px; padding: 0; border: 1px solid #a4a3b6; background: linear-gradient(145deg,#3d3d4a,#252530); color: #aaa9b9; font: 700 17px/1 var(--sans); touch-action: none; -webkit-tap-highlight-color: transparent; }
  .gba-up { top: 0; left: 48px; border-radius: 9px 9px 2px 2px; }
  .gba-left { top: 48px; left: 0; border-radius: 9px 2px 2px 9px; }
  .gba-right { top: 48px; right: 0; border-radius: 2px 9px 9px 2px; }
  .gba-down { bottom: 0; left: 48px; border-radius: 2px 2px 9px 9px; }
  .gba-dpad-center { position: absolute; z-index: 2; left: 48px; top: 48px; width: 48px; height: 48px; pointer-events: none; background: linear-gradient(145deg,#32323f,#282832); box-shadow: inset 0 1px 3px rgba(0,0,0,.52); }
  .gba-action-keys { position: relative; width: 138px; height: 116px; flex: 0 0 138px; }
  .gba-action { position: absolute; width: 58px; height: 58px; border: 1px solid rgba(30,19,68,.5); border-radius: 50%; background: linear-gradient(145deg,#312149,#29183e); color: #e9dafa; box-shadow: inset 0 3px 4px rgba(255,255,255,.2), 0 5px 2px rgba(28,13,72,.56); font: 700 19px/1 var(--sans); touch-action: none; -webkit-tap-highlight-color: transparent; }
  .gba-b { left: 0; bottom: 0; }
  .gba-a { right: 0; top: 0; }
  .gba-dir:active, .gba-dir.is-pressed { transform: translateY(2px); background: #22222c; color: white; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
  .gba-action:active, .gba-action.is-pressed { transform: translateY(3px); background: #211331; box-shadow: inset 0 3px 6px rgba(0,0,0,.55); }
  .gba-system-keys { display: flex; align-items: center; justify-content: center; gap: 10px; height: 18px; color: rgba(237,227,255,.64); font: 700 8px/1 var(--sans); letter-spacing: .13em; }
  .gba-system-keys span { display: grid; place-items: center; min-width: 48px; height: 13px; border-radius: 99px; background: #30234f; box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.35); }
  .gba-system-keys i { width: 13px; }
}
@media (max-width: 360px) {
  .touch-controls { height: 254px; padding-left: 17px; padding-right: 17px; }
  .gba-dpad { transform: scale(.88); transform-origin: left center; margin-right: -16px; }
  .gba-action-keys { transform: scale(.9); transform-origin: right center; margin-left: -12px; }
}
@media (min-width: 641px) { .touch-controls { display: none !important; } .mobile-game-exit { display:none; } }

/* Rebuilt mobile layout: the game and controller are one handheld, not two separate panels. */
@media (max-width: 640px) {
  .play-view:has(#game-wrap:not([hidden])) { min-height: 100svh; background: radial-gradient(circle at 50% 0%,#9d77ef 0%,#6842c3 33%,#3f217f 100%); }
  .play-view:has(#game-wrap:not([hidden]))::before,
  .play-view:has(#game-wrap:not([hidden])) .play-header { display: none; }
  .play-view:has(#game-wrap:not([hidden])) .app-noise { opacity: .055; }
  .game-wrap { min-height: 100svh; padding: max(18px, env(safe-area-inset-top)) 15px max(18px, env(safe-area-inset-bottom)); background: transparent; display: flex; flex-direction: column; overflow: hidden; }
  .game-topbar { width: 100%; padding: 2px 5px 12px; color: #f7f0ff; font-size: 10px; text-shadow: 0 1px 1px rgba(38,16,86,.55); }
  .game-topbar #time-counter { margin-left: auto; }
  .mobile-game-exit { margin-left: 10px; border-color: rgba(255,255,255,.48); background: rgba(40,20,91,.36); color: #fff; }
  #game-canvas { width: 100%; max-width: none; margin: 0; border: 8px solid #252432; border-radius: 11px; box-shadow: 0 0 0 2px rgba(245,239,255,.75), 0 7px 0 rgba(44,22,94,.4), inset 0 0 0 2px #101019; background:#111; }
  .touch-controls { position: relative; inset: auto; width: 100%; height: 236px; min-height: 236px; margin: 12px 0 0; padding: 8px 14px max(10px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .touch-controls::before, .touch-controls::after { display: none; }
  .gba-shell-mark { margin-top: 0; color: rgba(255,255,255,.9); }
  .gba-control-row { padding: 6px 6px 1px; }
  .gba-dpad { width: 132px; height: 132px; flex-basis: 132px; }
  .gba-dir { width: 44px; height: 44px; }
  .gba-up { left: 44px; }.gba-left { top:44px; }.gba-right { top:44px; }.gba-down { left:44px; }
  .gba-dpad-center { left:44px; top:44px; width:44px; height:44px; }
  .gba-action-keys { width: 126px; height: 106px; flex-basis:126px; }
  .gba-action { width:54px; height:54px; }
  .gba-system-keys { height: 14px; margin-top: -2px; }
  .gba-system-keys span { height: 12px; }
  .game-bottom { display:none; }
}

/* Controller refinement: compact molded GBA controls. */
@media (max-width: 640px) {
  .gba-control-row { padding: 10px 16px 2px; }
  .gba-dpad { width: 118px; height: 118px; flex-basis: 118px; filter: drop-shadow(0 3px 1px rgba(39,20,88,.44)); }
  .gba-dir { width: 39px; height: 39px; border: 0; border-radius: 2px; background: linear-gradient(145deg,#72717c,#45444e 55%,#35343d); color: #d0cfd6; font-size: 13px; box-shadow: inset 1px 1px 1px rgba(255,255,255,.45), inset -1px -1px 2px rgba(0,0,0,.34); }
  .gba-up { top: 0; left: 39px; border-radius: 4px 4px 1px 1px; }
  .gba-left { top: 39px; left: 0; border-radius: 4px 1px 1px 4px; }
  .gba-right { top: 39px; right: 1px; border-radius: 1px 4px 4px 1px; }
  .gba-down { bottom: 1px; left: 39px; border-radius: 1px 1px 4px 4px; }
  .gba-dpad-center { left: 39px; top: 39px; width: 39px; height: 39px; background: linear-gradient(145deg,#64636e,#3d3c46); box-shadow: inset 1px 1px 1px rgba(255,255,255,.24), inset -1px -1px 2px rgba(0,0,0,.38); }
  .gba-action-keys { width: 112px; height: 86px; flex-basis:112px; transform: rotate(-17deg); }
  .gba-action { width: 46px; height: 46px; border: 1px solid rgba(68,45,119,.36); background: linear-gradient(145deg,#f3f0f4,#c5c0c8 58%,#aaa5b0); color: #7755b6; box-shadow: inset 1px 2px 2px rgba(255,255,255,.94), inset -1px -2px 2px rgba(68,55,82,.22), 0 3px 2px rgba(47,24,96,.42); font-size: 16px; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
  .gba-b { left: 3px; bottom: 4px; }.gba-a { right: 3px; top: 3px; }
  .gba-action:active, .gba-action.is-pressed { background: #aaa4af; color:#60459a; transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(57,41,74,.35); }
  .gba-dir:active, .gba-dir.is-pressed { background: #35343e; transform: translateY(1px); }
}

/* Override the legacy touch-button rule that was forcing circular buttons. */
@media (max-width: 640px) {
  .touch-controls .gba-dir { width:39px; height:39px; min-width:0; min-height:0; border:0; border-radius:2px; background:linear-gradient(145deg,#777681,#484751 55%,#37363f); color:#d9d8df; font-size:13px; line-height:39px; box-shadow:inset 1px 1px 1px rgba(255,255,255,.4),inset -1px -1px 2px rgba(0,0,0,.3),0 3px 1px rgba(40,19,88,.35); }
  .touch-controls .gba-up { top:0; left:39px; border-radius:4px 4px 1px 1px; }
  .touch-controls .gba-left { top:39px; left:0; border-radius:4px 1px 1px 4px; }
  .touch-controls .gba-right { top:39px; right:1px; border-radius:1px 4px 4px 1px; }
  .touch-controls .gba-down { bottom:1px; left:39px; border-radius:1px 1px 4px 4px; }
  .touch-controls .gba-action { width:46px; height:46px; min-width:0; min-height:0; border:1px solid rgba(68,45,119,.36); border-radius:50%; background:linear-gradient(145deg,#f3f0f4,#c5c0c8 58%,#aaa5b0); color:#7755b6; font-size:16px; line-height:46px; box-shadow:inset 1px 2px 2px rgba(255,255,255,.94),inset -1px -2px 2px rgba(68,55,82,.22),0 3px 2px rgba(47,24,96,.42); }
  .touch-controls .gba-dir.is-pressed,.touch-controls .gba-dir:active { transform:translateY(1px); background:#35343e; }
  .touch-controls .gba-action.is-pressed,.touch-controls .gba-action:active { transform:translateY(2px); background:#aaa4af; }
}


/* Keep game feedback inside the game display and centre the controller glyphs. */
.game-screen { position:relative; max-width:min(1800px,94vw); width:100%; margin:0 auto; }
.game-screen #game-canvas { max-width:none; width:100%; margin:0; }
.game-screen .game-message { position:absolute; inset:0; display:grid; place-items:center; padding:1rem; text-align:center; background:rgba(7,9,13,.72); }
.game-screen .game-message[hidden] { display:none!important; }
@media (max-width:640px) {
  .game-screen { width:calc(100% - 20px); max-width:none; }
  .game-screen #game-canvas { width:100%; }
  .touch-controls .gba-dir,.touch-controls .gba-action { display:grid; place-items:center; padding:0; line-height:1; text-indent:0; }
}

@media (max-width:640px) {
  .game-screen .game-message { font-size:clamp(1rem,5.2vw,1.45rem); line-height:1.05; letter-spacing:-.04em; }
}

/* Recruiter fast lane and scannable project metadata. */
.header-contact {
  flex:0 0 auto;
  border:1px solid rgba(171,200,238,.62);
  padding:.62rem .78rem;
  color:var(--text);
  background:rgba(171,200,238,.08);
  text-decoration:none;
  font:700 .68rem/1 var(--mono);
  letter-spacing:.11em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.header-contact:hover,.header-contact:focus-visible { background:rgba(171,200,238,.2);border-color:#edf5ff;transform:translateY(-2px); }
.project-card-content { display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-right:34px; }
.project-role { display:block;max-width:100%;margin-bottom:3px;padding:5px 7px;border:1px solid rgba(171,200,238,.48);background:rgba(7,10,14,.72);color:#d9eaff;font:700 .6rem/1.2 var(--mono);letter-spacing:.08em; }
.project-card .project-name { margin-top:0;white-space:pre-line; }

.case-scanline { display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;margin:1.5rem 0 1.25rem;border:1px solid var(--line);background:rgba(171,200,238,.045); }
.case-scanline>div { min-width:0;padding:14px 16px;border-right:1px solid var(--line); }
.case-scanline>div:last-child { border-right:0; }
.case-scanline span { display:block;margin-bottom:7px;color:var(--blue);font:700 .62rem/1 var(--mono);letter-spacing:.12em; }
.case-scanline strong { display:block;color:var(--text);font:700 .72rem/1.45 var(--mono);letter-spacing:.035em;overflow-wrap:anywhere; }
.case-media-description { display:grid;gap:7px;padding:14px 0 0;color:var(--muted);font:.82rem/1.5 var(--mono); }
.case-media-description strong { color:var(--text);font-size:.8rem;letter-spacing:.04em; }
.case-media-description span { max-width:72ch; }

/* Personal archive: the collection can be scanned as a grid or viewed editorially. */
.personal-category-card em { display:block;max-width:28ch;margin-top:9px;color:#d5dce5;font:normal .76rem/1.4 var(--mono);letter-spacing:.02em;text-wrap:balance; }
.personal-category-card small { display:block;margin-top:10px; }
.archive-series[hidden] { display:none!important; }
.archive-series { padding-left:10px;border-left:1px solid var(--line); }
.archive-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.archive-grid .archive-item { display:block;min-width:0;border:1px solid var(--line);padding:0;background:rgba(10,14,18,.72);transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.archive-grid .archive-item:hover,.archive-grid .archive-item:focus-visible { transform:translateY(-3px);border-color:#d3e4fb;background:rgba(24,31,39,.92); }
.archive-grid .archive-item-media { display:block;border:0;border-bottom:1px solid var(--line);aspect-ratio:1/1; }
.archive-grid .archive-item-copy { display:flex;min-height:112px;padding:13px;gap:6px; }
.archive-grid .archive-item-copy strong { font-size:.82rem; }
.archive-grid .archive-item-copy span,.archive-grid .archive-item-copy small { font-size:.62rem; }
.archive-view-switch { margin-left:auto; }

/* Personal works is deliberately visual-first: category, grid, then a single focused viewer. */
.simple-archive-toolbar { justify-content:flex-start; padding-bottom:18px; }
.personal-category-card em { display:none; }
.personal-category-card small { margin-top:8px; color:var(--blue); }
.archive-grid .archive-item-copy { min-height:76px; }
.archive-grid .archive-item-copy span { display:none; }

/* A single black utility bar keeps the navigation legible and consistent on every page. */
.site-header {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-areas:"brand nav contact" "crumb crumb crumb";
  align-items:center;
  column-gap:28px;
  row-gap:15px;
  padding:20px 6vw 15px;
  background:#030303;
  border-bottom:1px solid rgba(238,241,244,.16);
}
.site-header > div { display:contents; }
.site-header .wordmark { grid-area:brand; display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }
.site-header .crumb { grid-area:crumb; margin:0; padding-top:2px; }
.site-header .site-nav { grid-area:nav; justify-self:end; margin:0; }
.site-header .site-nav::after { content:"—  ART DIRECTOR"; margin-left:18px; color:#b6c0cc; font:500 .72rem/1 var(--mono); letter-spacing:.12em; white-space:nowrap; }
.site-header .header-contact { grid-area:contact; margin:0; }
.home-header { grid-template-areas:"brand nav contact"; }

@media (max-width:640px) {
  .site-header {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand contact" "nav nav";
    column-gap:9px;
    row-gap:12px;
    padding:14px 5vw 10px;
  }
  .site-header > div { display:contents; }
  .site-header .wordmark { grid-area:brand; }
  .site-header .crumb { display:none; }
  .site-header .site-nav { grid-area:nav; justify-self:stretch; }
  .site-header .site-nav::after { display:none; }
  .site-header .header-contact { grid-area:contact; }
  .home-header { grid-template-areas:"brand contact" "nav nav"; }
}

/* One high-contrast console focus treatment across every custom control. */
:where(a,button,[tabindex]):focus-visible { outline:3px solid #f2f7ff!important;outline-offset:3px!important;box-shadow:0 0 0 6px rgba(78,126,184,.62)!important; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.game-start .text-button { display:block;margin:.35rem auto;padding:.65rem; }

@media (max-width:1100px) {
  .site-header { align-items:center; }
  .header-contact { margin-left:auto; }
  .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .header-contact { order:2;margin-left:auto; }
  .site-nav { order:3; }
  .case-scanline { grid-template-columns:1fr; }
  .case-scanline>div { border-right:0;border-bottom:1px solid var(--line); }
  .case-scanline>div:last-child { border-bottom:0; }
  .archive-toolbar { gap:14px; }
  .archive-view-switch { order:3;margin-left:0; }
  .archive-keyboard-hint { display:none; }
  .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
}

@media (max-width:640px) {
  .site-header { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:9px;row-gap:12px;padding:18px 5vw 0; }
  .site-header>div { grid-column:1;grid-row:1;min-width:0; }
  .site-header .wordmark { grid-column:1;grid-row:1;min-width:0; }
  .site-header .wordmark span { display:none; }
  .site-header .crumb { display:none; }
  .header-contact,.home-header .header-contact { position:static;grid-column:2;grid-row:1;order:initial;margin:0;padding:.55rem .65rem;font-size:.62rem; }
  .site-header .site-nav { grid-column:1/-1;grid-row:2;order:initial;width:100%;margin:0;padding:0 0 6px; }
  .personal-category-card em { font-size:.7rem;line-height:1.32; }
  .personal-category-heading h1 { font-size:clamp(2.7rem,13.5vw,4.7rem);line-height:.9;overflow-wrap:normal;word-break:normal; }
  .boot-mark { max-width:100%;font-size:clamp(2rem,10.5vw,2.8rem);line-height:.9; }
  .archive-series { width:100%;padding:8px 0 0;border-left:0;border-top:1px solid var(--line); }
  .archive-grid .archive-item-copy { min-height:96px;padding:10px; }
  .archive-grid .archive-item-copy small { display:none; }
  .game-wrap { overflow:auto;overscroll-behavior:contain; }
  .gba-control-row { gap:18px;padding:8px 6px 2px; }
  .gba-dpad { width:144px;height:144px;flex:0 0 144px; }
  .gba-dpad::before,.gba-dpad::after { content:"";position:absolute;z-index:0;background:linear-gradient(145deg,#6f6e79,#41404a 58%,#33323b);box-shadow:inset 1px 1px 1px rgba(255,255,255,.35),inset -1px -1px 2px rgba(0,0,0,.35); }
  .gba-dpad::before { left:48px;top:0;width:48px;height:144px;border-radius:6px; }
  .gba-dpad::after { left:0;top:48px;width:144px;height:48px;border-radius:6px; }
  .touch-controls .gba-dir { z-index:3;width:48px;height:48px;min-width:48px;min-height:48px;line-height:1; }
  .touch-controls .gba-left { left:0;top:48px;border-radius:6px 2px 2px 6px; }
  .touch-controls .gba-right { right:0;top:48px;border-radius:2px 6px 6px 2px; }
  .gba-dpad-center { z-index:4;left:48px;top:48px;width:48px;height:48px;border-radius:2px; }
  .touch-controls .gba-action { width:52px;height:52px;min-width:52px;min-height:52px; }
  .gba-action-keys { width:122px;height:100px;flex-basis:122px; }
  .gba-b { opacity:.72; }
}

@media (max-width:370px) {
  .gba-control-row { gap:10px;padding-left:2px;padding-right:2px; }
  .gba-dpad { width:132px;height:132px;flex-basis:132px;transform:none;margin:0; }
  .gba-dpad::before { left:44px;width:44px;height:132px; }
  .gba-dpad::after { top:44px;width:132px;height:44px; }
  .touch-controls .gba-dir { width:44px;height:44px;min-width:44px;min-height:44px; }
  .touch-controls .gba-left { top:44px; }
  .touch-controls .gba-right { top:44px; }
  .gba-dpad-center { left:44px;top:44px;width:44px;height:44px; }
  .gba-action-keys { transform:rotate(-17deg);margin:0; }
}

@media (max-width:640px) and (orientation:landscape) {
  .game-wrap { min-height:auto;padding:10px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); }
  .game-screen { width:min(64vw,680px); }
  .touch-controls { min-height:178px;height:178px;margin-top:6px; }
  .gba-shell-mark,.gba-system-keys { display:none; }
  .gba-control-row { padding-top:0; }
}

/* Personal archive: a quiet, photo-first library with full-screen viewing on tap. */
.archive-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
.archive-grid .archive-item { position:relative; display:block; aspect-ratio:1; min-width:0; overflow:hidden; border:0; padding:0; background:#090909; transform:none; }
.archive-grid .archive-item:hover,.archive-grid .archive-item:focus-visible { transform:none; border:0; background:#090909; outline:2px solid var(--blue); outline-offset:-2px; }
.archive-grid .archive-item-media { display:block; width:100%; height:100%; aspect-ratio:auto; border:0; }
.archive-grid .archive-item-media img,.archive-grid .archive-item-media video { display:block; width:100%; height:100%; object-fit:cover; }
.archive-grid .archive-item-copy { display:none; }
@media (max-width:900px) { .archive-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:640px) { .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; } }

/* Portfolio Rush attract screen: the real canvas stays behind the entry choices. */
.play-view:has(.game-attract-mode) { min-height:100svh; overflow:hidden; background:#06101d; }
.play-view:has(.game-attract-mode)::before { z-index:1; background:linear-gradient(90deg,rgba(2,8,16,.96) 0%,rgba(3,10,20,.86) 31%,rgba(4,12,22,.42) 54%,rgba(4,10,18,.05) 78%); }
.play-view .game-wrap.game-attract-mode { position:absolute; inset:0; z-index:0; display:block; min-height:100svh; padding:0; overflow:hidden; pointer-events:none; }
.game-attract-mode .game-topbar,.game-attract-mode .game-bottom,.game-attract-mode .touch-controls { display:none!important; }
.game-attract-mode .game-screen { position:absolute; left:50%; top:50%; width:max(100vw,177.78svh); max-width:none; height:max(100svh,56.25vw); transform:translate(-50%,-50%); }
.game-attract-mode #game-canvas { display:block; width:100%; height:100%; max-width:none; border:0; margin:0; image-rendering:auto; }
.play-view .game-start { position:relative; z-index:2; min-height:100svh; width:100%; padding:clamp(118px,15vh,180px) 6vw 5vh; align-items:flex-start; justify-content:center; text-align:left; }
.game-start-content { width:min(46vw,680px); }
.game-start .start-kicker { margin:0 0 clamp(22px,3vh,36px); color:#8eb9ea; font:500 clamp(.76rem,1vw,.94rem)/1 var(--mono); letter-spacing:.22em; }
.game-start h1 { max-width:8.6ch; margin:0; color:#f4f7fb; font-size:clamp(3.2rem,6.2vw,7.8rem); line-height:.84; letter-spacing:-.025em; text-wrap:balance; }
.game-start > .game-start-content > p { max-width:36rem; margin:clamp(22px,3vh,38px) 0 0; color:#e3eaf4; font:400 clamp(1rem,1.55vw,1.38rem)/1.35 var(--sans); letter-spacing:.025em; }
.game-start-actions { display:flex; width:min(350px,100%); flex-direction:column; align-items:stretch; gap:12px; margin-top:clamp(30px,4.8vh,58px); }
.game-start .primary-button,.game-start .start-secondary { width:100%; min-height:68px; margin:0; padding:0 26px; border:1px solid rgba(237,244,251,.8); font:700 clamp(.75rem,1vw,.92rem)/1 var(--mono); letter-spacing:.18em; text-align:center; }
.game-start .primary-button { background:#f0f4f8; color:#07101b; box-shadow:0 0 22px rgba(154,201,247,.34); }
.game-start .primary-button:hover { background:#fff; transform:translateY(-2px); }
.game-start .start-secondary { background:rgba(6,15,28,.1); color:#f0f4f8; }
.game-start .start-secondary:hover { background:rgba(235,244,253,.14); }
.game-start .start-back { align-self:flex-start; margin:14px 0 0; padding:8px 0; color:#a9c6e6; font:500 clamp(.68rem,.9vw,.8rem)/1 var(--mono); letter-spacing:.16em; }
.game-start .start-back:hover { color:#fff; }
@media (max-width:900px) { .play-view .game-start { padding-left:5vw; padding-right:5vw; } .game-start-content { width:min(60vw,580px); } .game-start h1 { font-size:clamp(3rem,8.8vw,5.6rem); } }
@media (max-width:640px) { .play-view:has(.game-attract-mode)::before { background:linear-gradient(90deg,rgba(2,8,16,.92),rgba(3,10,20,.63) 68%,rgba(4,10,18,.22)); } .game-attract-mode .game-screen { width:max(177.78svh,112vw); height:max(100svh,63vw); left:62%; } .play-view .game-start { padding:clamp(108px,16vh,132px) 7vw 28px; justify-content:flex-start; } .game-start-content { width:min(80vw,470px); } .game-start h1 { font-size:clamp(2.85rem,13vw,4.65rem); } .game-start > .game-start-content > p { max-width:24rem; font-size:1rem; } .game-start-actions { width:min(100%,330px); margin-top:30px; gap:10px; } .game-start .primary-button,.game-start .start-secondary { min-height:58px; } }

/* The intermediate game screen is a clean transition, without the attract-mode level behind it. */
.play-view #game-start { background:#080a0d; }
.play-view #game-start::before,
.play-view #game-start::after { display:none; }

/* Typographic scale: one regular, one interface weight, and one emphasis weight. */
:root { --weight-regular:400; --weight-interface:500; --weight-emphasis:700; }
body { font-weight:var(--weight-regular); }
.wordmark,
.header-contact,
.project-role,
.case-scanline strong,
.case-media-description strong,
.case-project-link strong,
.gba-shell-mark,
.gba-dir,
.gba-action,
.gba-system-keys,
.mobile-game-exit { font-weight:var(--weight-emphasis); }
.site-nav button,
.footer-social a,
.social-pending,
.intro-replay,
.text-button,
.back-button,
.header-status,
.eyebrow,
.crumb,
.mono,
.case-kicker,
.case-meta,
.case-meta span,
.case-section h2,
.case-foot,
.case-media-heading .eyebrow,
.case-media-label,
.archive-keyboard-hint,
.game-credit,
.start-kicker,
.game-topbar,
.game-bottom,
.start-back,
.home-role,
.home-prompt,
.card-open,
.intro-system-mark small,
.intro-topbar,
.intro-footer { font-weight:var(--weight-interface); }
.intro-dialogue p,
.game-start > .game-start-content > p,
.case-lead,
.case-section p,
.heading-note,
.personal-card p,
.menu-card p,
.next-objective,
.case-media-description,
.personal-category-card em { font-weight:var(--weight-regular); }
.menu-card h2,
.page-heading h1,
.personal-category-heading h1,
.archive-heading h1,
.archive-player-caption h2,
.case-title,
.game-start h1,
.game-complete h1,
.boot-mark,
.game-message,
.project-card .brand,
.personal-category-card strong,
.category-card-copy strong,
.intro-system-mark strong,
.intro-dialogue h1 { font-weight:var(--weight-regular); }
.linkedin-portfolio-cta strong,
.portfolio-character-guide p,
.case-role-guide strong,
.archive-grid .archive-item-copy strong,
.result-grid strong { font-weight:var(--weight-emphasis); }
.archive-counter,
.archive-item-copy strong,
.viewer-details b { font-weight:var(--weight-emphasis); }
.archive-back-button,
.archive-filter-button,
.archive-mode-button,
.archive-view-switch,
.archive-video-viewer-button,
.archive-main-play,
.archive-player-nav button,
.modal-close,
.viewer-video-controls button,
.viewer-nav button,
.viewer-details small,
.site-header .site-nav::after,
.secondary-button,
.context-route { font-weight:var(--weight-interface); }

/* Editorial layout polish: consistent grid rhythm, controlled type breaks and a
   replay action that is discoverable before the long home-card sequence. */
.home-intro-replay { display:block; margin:1.25rem 0 0; padding:0; color:var(--blue); font:500 10px/1 var(--mono); letter-spacing:.14em; }
.home-intro-replay:hover,.home-intro-replay:focus-visible { color:var(--text); }
.portfolio-grid { gap:clamp(12px,1.4vw,22px); }
.project-card { min-height:0; aspect-ratio:4/3; }
.game-start-content { width:min(52vw,760px); }
.game-start h1 { max-width:none; white-space:nowrap; }
@media (max-width:900px) {
  .game-start-content { width:min(68vw,560px); }
  .game-start h1 { font-size:clamp(2.9rem,8.2vw,5.6rem); }
}
@media (max-width:640px) {
  .site-nav { scrollbar-width:none; }
  .site-nav::-webkit-scrollbar { display:none; }
  .game-start-content { width:min(86vw,470px); }
  .game-start h1 { font-size:clamp(2.35rem,11.5vw,4.65rem); line-height:.88; }
  .page-heading h1 { width:100%; max-width:100%; font-size:clamp(2.4rem,10.5vw,5rem); letter-spacing:-.02em; overflow-wrap:normal; }
  .personal-category-heading h1 { width:100%; max-width:100%; font-size:clamp(2.55rem,12vw,4.7rem); letter-spacing:-.02em; overflow-wrap:normal; }
  .home-intro-replay { margin-top:1rem; }
}
@media (max-width:319px) {
  body { min-width:0; }
  .site-header { padding-left:12px; padding-right:12px; }
  .game-start-content { width:calc(100vw - 32px); }
  .game-start h1 { font-size:clamp(2rem,11vw,3.2rem); }
}

/* Keep the console wordmark together on wide screens; restore fluid wrapping
   on narrow devices so the title never creates horizontal overflow. */
@media (min-width:641px) {
  .home-intro { max-width:100%; }
  .home-intro h1 { white-space:nowrap; letter-spacing:-.035em; }
}

/* Behance-inspired project index: image-led cards, compact metadata and a
   curated rhythm instead of a uniform catalogue wall. */
#portfolio-view .page-heading { max-width:1500px; margin:0 auto; padding-left:6vw; padding-right:6vw; }
#portfolio-view .portfolio-heading-note { max-width:28ch; }
#portfolio-view .portfolio-grid { grid-template-columns:repeat(12,minmax(0,1fr)); max-width:1500px; margin:0 auto; gap:18px; }
#portfolio-view .project-card { grid-column:span 3; min-height:0; aspect-ratio:4/3; border-radius:3px; }
#portfolio-view .project-card:nth-child(1) { grid-column:span 6; aspect-ratio:16/9; }
#portfolio-view .project-card:nth-child(2),
#portfolio-view .project-card:nth-child(3) { grid-column:span 3; }
#portfolio-view .project-card:nth-child(4) { grid-column:span 4; aspect-ratio:5/4; }
#portfolio-view .project-card:nth-child(5) { grid-column:span 4; aspect-ratio:5/4; }
#portfolio-view .project-card:nth-child(6),
#portfolio-view .project-card:nth-child(7) { grid-column:span 2; aspect-ratio:4/5; }
#portfolio-view .project-card-content { inset:auto 18px 16px; }
#portfolio-view .project-role { margin-bottom:2px; padding:4px 6px; font-size:.58rem; opacity:.9; }
#portfolio-view .project-open { display:block; margin-top:7px; color:var(--blue); font:500 .58rem/1 var(--mono); letter-spacing:.1em; opacity:0; transform:translateY(5px); transition:opacity .2s ease,transform .2s ease; }
#portfolio-view .project-card:hover .project-open,
#portfolio-view .project-card:focus-visible .project-open { opacity:1; transform:none; }

@media (max-width:980px) {
  #portfolio-view .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #portfolio-view .project-card,
  #portfolio-view .project-card:nth-child(n) { grid-column:span 1; aspect-ratio:4/3; }
  #portfolio-view .project-card:first-child { grid-column:span 2; aspect-ratio:16/9; }
}

@media (max-width:640px) {
  #portfolio-view .page-heading { padding-left:5vw; padding-right:5vw; }
  #portfolio-view .portfolio-heading-note { max-width:none; }
  #portfolio-view .portfolio-grid { display:grid; grid-template-columns:1fr; }
  #portfolio-view .project-card,
  #portfolio-view .project-card:first-child { grid-column:span 1; aspect-ratio:4/3; }
  #portfolio-view .project-open { opacity:1; transform:none; }
}

/* Reference-aligned work index: simple image-led covers, title below, and a
   consistent rhythm. The project page carries the editorial detail. */
#portfolio-view .portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,52px) clamp(14px,2vw,30px); max-width:1500px; }
#portfolio-view .project-card,
#portfolio-view .project-card:nth-child(n) { grid-column:auto; aspect-ratio:auto; min-height:0; border:0; border-radius:0; overflow:visible; background:transparent; transform:none; box-shadow:none; }
#portfolio-view .project-card img { position:relative; inset:auto; display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; filter:none; border:1px solid rgba(211,222,234,.2); transform:none; }
#portfolio-view .project-card::after { display:none; }
#portfolio-view .project-card:hover,
#portfolio-view .project-card:focus-visible { transform:none; border-color:transparent; box-shadow:none; }
#portfolio-view .project-card:hover img,
#portfolio-view .project-card:focus-visible img { filter:brightness(.82); transform:none; border-color:#d3e4fb; }
#portfolio-view .project-card-content { position:relative; inset:auto; display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:12px 0 0; }
#portfolio-view .project-card .project-role { grid-column:1/-1; order:0; margin:0; padding:0; border:0; background:none; color:var(--blue); font-size:.58rem; letter-spacing:.1em; }
#portfolio-view .project-card .brand { grid-column:1; order:1; margin:0; color:var(--text); font-size:clamp(1rem,1.35vw,1.25rem); line-height:1; }
#portfolio-view .project-card .project-name { grid-column:1; order:2; margin:3px 0 0; color:var(--muted); font-size:.7rem; line-height:1.25; }
#portfolio-view .project-card .project-no { position:static; grid-column:2; grid-row:2/4; align-self:start; order:3; color:var(--muted); font-size:.65rem; }
#portfolio-view .project-card .project-open { display:none; }
#portfolio-view .portfolio-heading-note { max-width:30ch; }

/* Behance / Adobe Portfolio-style project detail: metadata and narrative sit
   around a clean vertical media sequence, with related work at the end. */
#case-view .case-content { max-width:1240px; padding-top:clamp(3rem,7vw,7rem); }
#case-view .behance-hero { grid-template-columns:minmax(0,.82fr) minmax(0,1.38fr); gap:clamp(2rem,6vw,6rem); align-items:end; border-bottom:0; padding-bottom:0; }
#case-view .behance-hero .case-hero-copy { max-width:42rem; }
#case-view .case-kicker { color:var(--blue); font-size:.68rem; letter-spacing:.12em; }
#case-view .case-title { white-space:pre-line; font-size:clamp(3.6rem,7vw,8rem); line-height:.84; margin:.85rem 0 1.5rem; }
#case-view .case-hero-facts { display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem; margin-top:2.4rem; }
#case-view .case-my-role { width:min(100%, 36rem); padding:1.15rem 1.3rem 1.25rem; border:1px solid var(--line); background:rgba(255,255,255,.025); }
#case-view .case-my-role span,
#case-view .case-my-year span { display:block; color:var(--blue); font:700 .68rem/1 var(--mono); letter-spacing:.12em; margin-bottom:.8rem; }
#case-view .case-my-role strong { display:block; color:var(--text); font:700 clamp(1rem,1.6vw,1.35rem)/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:-.025em; }
#case-view .case-my-year { width:100%; padding-top:1rem; border-top:1px solid var(--line); }
#case-view .case-my-year strong { display:block; color:#b7c2ce; font:700 1.05rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif; }
#case-view .case-hero-facts .case-award-tag { margin:0; }
#case-view .behance-hero .case-visual { aspect-ratio:4/3; filter:none; border:0; }
#case-view .case-project-actions { display:flex; gap:10px; margin-top:2rem; }
#case-view .case-project-action { appearance:none; border:1px solid var(--line); background:transparent; color:var(--text); padding:.75rem 1rem; font:600 .62rem/1 var(--mono); letter-spacing:.1em; cursor:pointer; }
#case-view .case-project-action:hover { border-color:var(--blue); color:var(--blue); }
#case-view .case-project-description { max-width:720px; margin:clamp(3rem,8vw,8rem) 0 0; }
#case-view .case-project-description p { color:#d8dde2; font-size:clamp(1.05rem,1.8vw,1.45rem); line-height:1.45; margin:0 0 1.25rem; }
#case-view .case-project-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:3rem; padding:1.2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#case-view .case-project-details span,
#case-view .case-project-credits .eyebrow { display:block; color:var(--muted); font: .6rem/1 var(--mono); letter-spacing:.11em; margin-bottom:.65rem; }
#case-view .case-project-details strong { display:block; color:var(--text); font:500 .76rem/1.35 var(--mono); }
#case-view .case-project-story { max-width:720px; margin:clamp(3rem,7vw,6rem) 0 0; }
#case-view .case-project-story section { margin-bottom:2.8rem; }
#case-view .case-project-story .eyebrow { display:block; margin-bottom:.8rem; color:var(--blue); }
#case-view .case-project-story p { margin:0; color:#cbd3dc; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.45; }
#case-view .behance-media-stack { margin-top:clamp(3rem,7vw,7rem); gap:clamp(18px,3vw,46px); }
#case-view .behance-media-stack .case-media-group { margin:0; }
#case-view .behance-media-stack .case-media-item { margin:0; }
#case-view .behance-media-stack .case-media-item img,
#case-view .behance-media-stack .case-media-item video { display:block; width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; border:0; filter:none; }
#case-view .case-project-credits { max-width:720px; margin:clamp(3rem,7vw,7rem) 0 0; padding-top:1.2rem; border-top:1px solid var(--line); }
#case-view .case-project-credits p { margin:.45rem 0; color:#aeb8c3; font: .82rem/1.45 var(--mono); }
#case-view .case-related-heading { margin-top:clamp(4rem,9vw,9rem); padding-top:1.2rem; border-top:1px solid var(--line); color:var(--blue); font: .66rem/1 var(--mono); letter-spacing:.12em; }
#case-view .case-project-nav { margin-top:1rem; border-top:0; padding-top:0; }

@media (max-width:980px) {
  #portfolio-view .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #case-view .behance-hero { grid-template-columns:1fr; gap:2rem; }
  #case-view .behance-hero .case-visual { order:-1; aspect-ratio:16/10; }
  #case-view .case-project-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  #portfolio-view .portfolio-grid { grid-template-columns:1fr; gap:32px; }
  #portfolio-view .project-card img { aspect-ratio:4/3; }
  #case-view .case-content { padding-top:3rem; }
  #case-view .case-title { font-size:clamp(3rem,15vw,6rem); }
  #case-view .case-project-description { margin-top:3rem; }
  #case-view .case-project-details { grid-template-columns:1fr 1fr; gap:1.2rem .8rem; }
  #case-view .case-project-action { flex:1; }
}

/* Final type scale for the cleaner reference-led composition. */
#portfolio-view .page-heading h1 { font-size:clamp(2.8rem,5.8vw,6.4rem); line-height:.88; font-weight:600; letter-spacing:-.075em; }
#portfolio-view .project-card .project-role { font-size:.56rem; font-weight:500; letter-spacing:.09em; }
#portfolio-view .project-card .brand { font-size:clamp(.95rem,1.2vw,1.15rem); font-weight:600; letter-spacing:-.035em; }
#portfolio-view .project-card .project-name { font-size:.68rem; font-weight:400; letter-spacing:.02em; }
#portfolio-view .project-card .project-no { font-size:.62rem; font-weight:400; }
#case-view .case-title { max-width:100%; font-size:clamp(2.5rem,3.25vw,4rem); font-weight:600; letter-spacing:-.08em; overflow-wrap:normal; }
#case-content.project-04 .case-title { white-space:nowrap; }
#case-view .case-kicker { font-size:.62rem; font-weight:500; }
#case-view .case-project-description p { font-size:clamp(1rem,1.45vw,1.25rem); font-weight:400; line-height:1.5; }
#case-view .case-project-details strong { font-size:.68rem; font-weight:500; }
#case-view .case-project-story p { font-size:clamp(.98rem,1.25vw,1.15rem); font-weight:400; line-height:1.52; }
#case-view .case-project-credits p { font-size:.72rem; font-weight:400; }
#case-view .case-related-heading { font-size:.6rem; font-weight:500; }

/* Helvetica Bold is the display face; regular Helvetica stays reserved for
   descriptions, navigation and supporting metadata. */
.wordmark,
.home-intro h1,
.page-heading h1,
.menu-card h2,
.personal-card h2,
.case-title,
.boot-mark,
.game-start h1,
.game-complete h1 { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700; }
#portfolio-view .project-card .brand,
#case-view .case-project-action,
#case-view .case-project-details strong { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700; }
#portfolio-view .page-heading h1,
#case-view .case-title,
.view-home .home-intro h1 { font-weight:700; }

/* Neutral page background sampled from the supplied reference (#111111). */
#case-view.case-view { background:#111111; }
#case-view.case-view::before,
#case-view.case-view::after { background:none; }
@media (max-width:640px) {
  #portfolio-view .page-heading h1 { font-size:clamp(2.6rem,13vw,4.8rem); }
  #case-view .case-title { font-size:clamp(2.8rem,13vw,5.2rem); }
  #case-view .case-project-description p { font-size:1rem; }
}

/* Final responsive layout pass: balanced creativity index, readable navigation,
   quiet personal backgrounds and media-safe archive tiles. */
#portfolio-view .interior-header,
#personal-view .interior-header,
#case-view .interior-header {
  position:sticky;
  top:0;
  z-index:10;
}

#personal-view {
  background:#111111;
}
#personal-view::before,
#personal-view::after {
  background:none;
}

#personal-view .personal-category-menu,
#personal-view .personal-archive-shell {
  width:min(1500px, calc(100% - 64px));
}
#personal-view .personal-category-grid {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 24px);
}
#personal-view .personal-category-card {
  min-height:clamp(220px, 24vw, 360px);
}
#personal-view .personal-category-heading h1 {
  max-width:100%;
}

#personal-view .archive-grid .archive-item-media video {
  object-fit:contain;
  background:#080808;
}

@media (max-width:980px) {
  #personal-view .personal-category-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  #personal-view .personal-category-menu,
  #personal-view .personal-archive-shell {
    width:calc(100% - 24px);
  }
  #personal-view .personal-category-menu {
    padding-top:5vh;
    padding-bottom:4rem;
  }
  #personal-view .personal-category-heading {
    gap:14px;
    padding-bottom:18px;
  }
  #personal-view .personal-category-grid {
    gap:10px;
    padding-top:20px;
  }
  #personal-view .personal-category-card {
    min-height:44vw;
  }
  #personal-view .personal-category-card:first-child {
    min-height:54vw;
  }
  #personal-view .personal-category-card::after {
    top:12px;
    right:12px;
  }
  #personal-view .category-card-copy {
    left:12px;
    right:12px;
    bottom:12px;
  }
  .site-header .site-nav {
    gap:14px;
    padding-bottom:8px;
  }
  .site-header .site-nav button {
    font-size:11px;
    line-height:1.1;
    letter-spacing:.08em;
  }
}

/* Home text grid: keep the intro and the menu cards on one shared left edge. */
#home-view .home-stage { align-items:flex-start; }
#home-view .home-intro,
#home-view .home-cards { width:min(1120px,100%); max-width:1120px; margin-left:0; margin-right:0; }
#home-view .menu-card { text-align:left; }
#home-view .menu-card .card-content { width:100%; }