/* Real application captures. Layout may move; the supplied image pixels do not. */
:root {
  --project-frame-rim:4px;
  --project-frame-radius:7px;
  --project-screen-radius:3px;
  --project-frame-ratio:16/10;
  --project-frame-matte:#10151c;
  --project-frame-material:linear-gradient(138deg,#c3c9d1 0%,#4d5662 7%,#202731 37%,#78818c 77%,#343c47 100%);
  --project-frame-shadow:0 18px 29px -12px #000c;
}
.laptop-device>.laptop-live-screen { position:absolute; left:15.30%; top:7.8125%; width:70.53%; height:69.434%; overflow:hidden; background:#05070a; border-radius:0; isolation:isolate; pointer-events:none; }
.laptop-live-screen>video { display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:#05070a; border:0; pointer-events:none; }
.laptop-live-screen>video::-webkit-media-controls { display:none!important; }
.archive-item:first-child { grid-column:auto; }
.archive-grid.is-single { grid-template-columns:repeat(2,minmax(0,1fr)); }
.archive-item:not(.game-project) .archive-media img { width:100%; height:auto; aspect-ratio:16/10; max-height:none; object-fit:contain; filter:none; opacity:1; background:#101216; margin:0; }
.row-preview img { width:100%; height:100%; object-fit:contain; filter:none; opacity:1; }
.real-project-case .case-header { padding-bottom:40px; }
.case-project-context { display:flex; gap:16px 42px; flex-wrap:wrap; align-items:baseline; margin-top:30px; color:var(--muted); font-size:14px; line-height:1.6; }
.case-project-context .text-link { font-size:14px; color:var(--ink); }
.real-case-cover { width:min(100%,1080px); margin:0 auto; }
.real-case-cover .zoom-media { display:block; width:100%; background:transparent; }
.real-case-cover .zoom-media>img { display:block; width:100%; height:auto; aspect-ratio:16/10; max-height:none; object-fit:contain; filter:none; opacity:1; background:#101216; }
.real-case-cover .zoom-media>.capture-action { position:static; display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:16px 0 0; min-height:44px; font-size:13px; }
.real-case-cover figcaption { margin:0; font-size:13px; }
.real-project-case .case-overview .statement { font-size:clamp(22px,2vw,29px); line-height:1.55; }
.real-project-case .case-takeaway .statement { font-size:clamp(22px,2vw,29px); line-height:1.55; max-width:55ch; }
.quick-dialog:has(.product-preview),.quick-dialog:has(.product-lightbox) { width:900px; }
.product-preview .quick-image,.product-lightbox .quick-image { display:block; width:100%; height:auto; aspect-ratio:16/10; max-height:none; object-fit:contain; background:#101216; }
.case-contributions { background:#0d1014; }
.contributions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:54px 8vw; }
.contributions-grid h3 { font-size:clamp(22px,2vw,30px); line-height:1.25; margin-bottom:16px; }
.contributions-grid p { color:var(--muted); font-size:17px; line-height:1.75; max-width:55ch; }
.capture-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 32px; }
.capture-grid figure { min-width:0; margin:0; }
.capture-grid figure:last-child:nth-child(odd) { grid-column:auto; }
.capture-media { display:block; width:100%; text-align:left; background:transparent; padding:0; }
.capture-media>img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; background:#101216; border-radius:6px; filter:none; opacity:1; }
.capture-grid figure:last-child:nth-child(odd) img { aspect-ratio:16/10; max-height:none; background:#101216; }
.project-fallback>a:not(.game-project)>img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; }
.menu-preview>img,.next-project>img:not([src*="/games/"]) { aspect-ratio:16/10; object-fit:contain; background:#101216; }
.capture-media>.capture-action { display:flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; font-size:13px; color:var(--muted); }
.capture-media>.capture-action .icon { width:16px; height:16px; }
.capture-media:hover>.capture-action { color:var(--ink); text-decoration:underline; text-underline-offset:6px; }
.capture-grid figcaption { margin-top:8px; font-size:18px; line-height:1.4; }
.case-roadmap { display:grid; grid-template-columns:1fr 1.3fr; gap:8vw; background:#0d1014; }
.case-roadmap h2 { font-size:clamp(32px,4vw,58px); line-height:1.1; margin-bottom:22px; }
.case-roadmap p { font-size:16px; color:var(--muted); line-height:1.7; max-width:30ch; }
.case-roadmap ul { display:grid; gap:22px; padding-left:22px; font-size:20px; line-height:1.5; }
.technical-skills { background:#0b0d10; }
.skill-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 5vw; }
.skill-group { min-width:0; }
.skill-group h3 { font-size:24px; line-height:1.2; margin-bottom:20px; }
.skill-group .tech-list { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; font-size:16px; line-height:1.7; }
.skill-group .tech-list li { padding:0; border:0; background:none; border-radius:0; }
.about-manifesto>div>p+p { margin-top:24px; line-height:1.75; }
.case-header .case-meta dd { overflow-wrap:anywhere; }
/* Selected Saten Metal: one material and aperture for every web source. */
.project-frame,.zoom-media>.project-frame {
  position:relative; display:block; width:100%; min-width:0; isolation:isolate;
  padding:var(--project-frame-rim); border-radius:var(--project-frame-radius);
  background:var(--project-frame-material); box-shadow:var(--project-frame-shadow); overflow:hidden;
}
.project-frame::before,.project-frame::after { display:none; }
.project-frame>.frame-screen { position:relative; display:block; width:100%; aspect-ratio:var(--project-frame-ratio); background:var(--project-frame-matte); border-radius:var(--project-screen-radius); overflow:hidden; }
.project-frame>.frame-screen>img { display:block; width:100%; height:100%; max-height:none; margin:0; border:0; border-radius:0; object-fit:contain; object-position:center; background:transparent; filter:none; opacity:1; mix-blend-mode:normal; box-shadow:none; }
.project-fallback>a>.project-frame { display:block; margin:0; font-size:inherit; }
.archive-item:not(.game-project) .archive-media .project-frame img { height:100%; background:transparent; }
.archive-media:hover .project-frame img { transform:none; }
/* The archive game keeps its supplied phone artwork, seated on the gallery's clear stand. */
.archive-item.game-project .archive-media { display:grid; place-items:center; width:100%; aspect-ratio:var(--project-frame-ratio); padding:0; background:transparent; border-radius:0; overflow:visible; }
.archive-item.game-project .archive-phone-display { position:relative; isolation:isolate; width:auto; height:100%; max-height:500px; max-width:100%; aspect-ratio:21/25; margin:0; }
.archive-item.game-project .archive-phone-display>.archive-phone-image { position:absolute; z-index:1; left:50%; bottom:7%; display:block; width:auto; height:92%; max-width:60%; margin:0; padding:0; border:0; border-radius:0; object-fit:contain; background:transparent; box-shadow:none; filter:none; opacity:1; transform:translateX(-50%); transition:none; }
.archive-item.game-project .archive-phone-display>.archive-phone-stand { position:absolute; z-index:0; left:0; bottom:3%; display:block; width:100%; height:auto; max-width:none; margin:0; padding:0; border:0; border-radius:0; object-fit:contain; background:transparent; box-shadow:none; filter:none; opacity:1; transform:none; transition:none; pointer-events:none; }
.real-case-cover .zoom-media>.project-frame { position:relative; inset:auto; display:block; opacity:1; padding:var(--project-frame-rim); font-size:inherit; }
.real-case-cover .zoom-media:hover>.project-frame,.real-case-cover .zoom-media:focus-visible>.project-frame { opacity:1; }
.product-preview>.project-frame,.product-lightbox>.project-frame { margin-top:26px; }
.product-preview .project-frame .quick-image,.product-lightbox .project-frame .quick-image { height:100%; margin:0; background:transparent; }
.row-preview { aspect-ratio:auto; }
.row-preview>.project-frame { box-shadow:var(--project-frame-shadow); }
.row-preview>.row-preview-stand { display:none; }
.game-row-preview {
  --preview-phone-width:min(165px,calc(30svh - 30px));
  width:calc(var(--preview-phone-width) * 1.5); padding-bottom:20px;
  background:transparent; box-shadow:none;
}
.game-row-preview>.project-frame {
  position:relative; z-index:2; width:var(--preview-phone-width); margin-inline:auto;
  padding:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
.game-row-preview>.project-frame>.frame-screen {
  aspect-ratio:var(--preview-media-ratio,941/1672); border-radius:0; background:transparent; overflow:visible;
}
.game-row-preview>.project-frame>.frame-screen>img { height:auto; }
.game-row-preview>.row-preview-stand { display:block; bottom:0; height:26px; box-shadow:0 14px 20px -8px #0009; }
.game-row-preview>.row-preview-stand::before { inset:0 0 18px; }
.game-row-preview>.row-preview-stand::after { inset:3px 18% 9px; }
.next-project { grid-template-columns:minmax(0,1fr) auto clamp(280px,26vw,480px); }
.next-project>.project-frame { width:100%; min-width:0; transform:rotate(-6deg); }
.next-project>.project-frame>.frame-screen>img { width:100%; height:100%; max-height:none; transform:none; }
@media(max-width:1000px) { .skill-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .archive-item.game-project .archive-media { aspect-ratio:1; max-height:420px; }
  .case-project-context { display:grid; gap:10px; font-size:13px; margin-top:24px; }
  .contributions-grid,.capture-grid,.case-roadmap,.skill-groups { grid-template-columns:1fr; gap:36px; }
  .contributions-grid p { font-size:16px; }
  .capture-grid figure:last-child:nth-child(odd) { grid-column:auto; }
  .capture-media>img { aspect-ratio:16/10; }
  .archive-grid.is-single { grid-template-columns:1fr; }
  .capture-grid figcaption { font-size:17px; }
  .skill-group h3 { font-size:22px; margin-bottom:14px; }
  .skill-group .tech-list { font-size:15px; }
  .case-roadmap ul { font-size:18px; }
  .real-case-cover .zoom-media>img { max-height:none; }
  .next-project { grid-template-columns:minmax(0,1fr) auto; }
  .next-project>.project-frame { display:none; }
}

/* Let the compact home introduction wrap inside narrow phone screens. */
.approach>div { min-width:0; }
@media(max-width:700px) { .approach { grid-template-columns:minmax(0,1fr); } .approach-title { flex-wrap:wrap; row-gap:18px; } }

.contact-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#contact-form .submit-button:disabled { opacity:.55; cursor:wait; }
#contact-status[data-state="error"] { color:#efb6ac; }
#contact-status[data-state="success"] { color:#b8d8cc; }