/* Fluid layout and input-aware scenes. Loaded last on every page. */
html {
  max-width: 100%;
  overflow-x: clip
}
body {
  min-width: 0
}
img, canvas, svg {
  max-width: 100%
}
main {
  min-width: 0
}
section {
  scroll-margin-top: 80px
}
.section > * {
  min-width: 0
}
.about-grid > *, .contact-grid > *, .story-row > *, .persona-hero > *, .project-detail-body > * {
  min-width: 0
}
p, a, h1, h2, h3 {
  overflow-wrap: break-word
}
button, a, input, select, textarea {
  touch-action: manipulation
}
.header-tools #motion {
  width: 44px;
  height: 44px
}
.hero-container {
  pointer-events: none
}
.hero-container a, .hero-container button {
  pointer-events: auto
}
.hero-main {
  max-width: 760px
}
.workspace-layer {
  position: absolute;
  inset: -2%;
  background: url(assets/workspace-banner.webp) center/cover no-repeat;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(1.04);
  will-change: transform
}
.workspace-silver {
  filter: grayscale(1) brightness(.7)
}
.workspace-blue {
  clip-path: circle(var(--reveal-size, 0px) at var(--mouse-x, 70%) var(--mouse-y, 45%));
  filter: saturate(1.35) brightness(1.1);
  transition: clip-path .3s
}
.hero.reveal-all .workspace-blue {
  clip-path: circle(150% at 50% 50%)
}
.hero-shade {
  background: linear-gradient(90deg, #03060ccc, transparent 85%), linear-gradient(0deg, #05060a, transparent 35%)
}
.hero-container {
  padding-block: 145px 150px
}
.hero-description {
  color: #c4ccda
}
.hero-lower {
  max-width: 720px
}
.banner-controls {
  position: absolute;
  z-index: 6;
  bottom: 36px;
  right: 8%;
  display: flex;
  align-items: center;
  gap: 22px
}
.banner-controls button {
  border: 1px solid #8ca8cc88;
  background: #06111bd9;
  padding: 14px 18px;
  font: 9px var(--space);
  letter-spacing: 1px;
  min-height: 44px
}
.banner-controls span {
  font-size: 8px;
  letter-spacing: 2px;
  color: #8e9fb6
}
.hero .scroll-cue {
  left: 9%;
  transform: none;
  bottom: 32px
}
.portrait-display {
  height: auto;
  aspect-ratio: 2/3;
  max-height: 650px
}
.portrait-display > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none
}
.portrait-display:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(#0008, transparent 25% 70%, #000b)
}
.portrait-display .hud-top {
  position: relative;
  z-index: 4
}
.portrait-halo {
  display: none
}
.persona-portrait {
  height: auto;
  aspect-ratio: 2/3;
  max-height: 700px;
  overflow: hidden;
  border: 1px solid var(--line)
}
.persona-portrait img {
  object-fit: cover
}
.persona-portrait > span {
  background: #02060cc9;
  padding: 18px;
  z-index: 2
}
.hero-info {
  flex-wrap: wrap
}
.email-link {
  max-width: 100%;
  overflow-wrap: anywhere
}
#contact-form input, #contact-form select, #contact-form textarea {
  font-size: 16px;
  min-height: 48px
}
.navigation {
  overflow-y: auto;
  overscroll-behavior: contain
}
.nav-shell {
  height: auto
}
.nav-grid nav > a {
  min-height: 48px
}
.detail-dialog {
  overflow-wrap: anywhere
}
.laptop-sequence {
  height: 300svh;
  position: relative;
  background: #03060b
}
.laptop-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 65%, #163b663d, transparent 60%)
}
.build-heading {
  text-align: center;
  position: absolute;
  top: 8%;
  z-index: 2
}
.build-heading .eyebrow {
  font-size: 9px;
  letter-spacing: 3px;
  color: #8fadc9
}
.build-heading h2 {
  font: 600 clamp(30px, 4.5vw, 66px)/1.1 var(--orbit);
  margin: 20px 0
}
.build-heading p {
  font: 10px var(--space);
  letter-spacing: 2px;
  color: #95b5df
}
.laptop-scene {
  width: min(66vw, 850px);
  perspective: 1500px;
  aspect-ratio: 1.65;
  margin-top: 160px
}
.laptop-device {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateY(10%) scale(var(--laptop-scale, 1));
  transform-style: preserve-3d
}
.laptop-lid {
  position: absolute;
  inset: 0;
  border: 2px solid #b7c0ca;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(145deg, #17202b, #89919e);
  transform-origin: 50% 100%;
  transform: rotateX(var(--lid-angle, -82deg));
  transform-style: preserve-3d;
  box-shadow: 0 0 55px #489afa18
}
.laptop-screen {
  position: absolute;
  inset: 9px 9px 14px;
  background: #07101b;
  border-radius: 9px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(2px);
  display: flex;
  flex-direction: column
}
.lid-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 40px var(--orbit);
  color: #cdd4df;
  transform: rotateY(180deg) translateZ(2px);
  backface-visibility: hidden
}
.editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: #182437;
  color: #abbad0;
  font: 9px monospace
}
.editor-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f94b5
}
.editor-bar i:first-child {
  background: #da7f88
}
.editor-bar span {
  margin-left: 12px
}
.editor-code {
  white-space: pre-wrap;
  overflow: hidden;
  flex: 1;
  margin: 0;
  padding: 22px;
  font: clamp(10px, 1.1vw, 16px)/1.7 monospace;
  color: #abd1ff
}
.terminal {
  padding: 12px 22px;
  border-top: 1px solid #31435d;
  font: 10px monospace;
  color: #7186a5
}
.terminal p {
  font: 12px/1.7 monospace;
  color: #99d8bb;
  margin-top: 8px
}
.compile-track {
  height: 2px;
  background: #172d45;
  margin-top: 12px
}
.compile-track i {
  display: block;
  background: #8bbfff;
  height: 100%;
  width: var(--compile, 0%)
}
.screen-result {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, #2d5484, #081422 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: var(--result, 0)
}
.screen-result > span {
  font: 9px monospace;
  color: #a8e4cb
}
.screen-result strong {
  font: 600 clamp(22px, 4vw, 58px)/1.2 var(--orbit);
  margin: 20px 0;
  color: #e4efff
}
.screen-result small {
  font: 8px monospace;
  letter-spacing: 2px;
  color: #97b7db
}
.laptop-base {
  position: absolute;
  top: 100%;
  left: -4%;
  width: 108%;
  height: 20%;
  background: linear-gradient(#919aa7, #424c5a 40%, #a7b1bf 42%, #171f2a 80%);
  transform-origin: top;
  transform: rotateX(62deg);
  border-radius: 2px 2px 25px 25px;
  border: 1px solid #a8b3c3;
  box-shadow: 0 45px 60px #0008
}
.keyboard {
  height: 40%;
  margin: 3% 12% 0;
  background: repeating-linear-gradient(90deg, transparent 0 5%, #6a7485 5% 5.5%), repeating-linear-gradient(#131b27 0 25%, #6a7485 25% 28%);
  border-radius: 4px
}
.trackpad {
  width: 22%;
  height: 26%;
  margin: 1% auto;
  border: 1px solid #626e80;
  border-radius: 4px
}
.build-bottom {
  position: absolute;
  bottom: 5%;
  left: 8%;
  right: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}
.build-bottom > span {
  font-size: 8px;
  letter-spacing: 2px;
  color: #8f9fb7
}
.build-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #152033
}
.build-progress i {
  display: block;
  height: 100%;
  width: var(--build-progress, 0%);
  background: var(--cyan)
}
@media(min-width:1800px) {
  .hero-container {
    max-width: 1600px
  }
  .laptop-scene {
    width: min(55vw, 950px)
  }
}
@media(max-width:1000px) {
  .section {
    padding-inline: 5%
  }
  .hero-info {
    gap: 20px
  }
  .banner-controls span {
    display: none
  }
  .persona-hero {
    gap: 30px
  }
  .hero-main {
    max-width: 620px
  }
  .hero h1 {
    font-size: clamp(38px, 7vw, 70px)
  }
  .laptop-scene {
    width: 80vw
  }
  .build-heading {
    top: 9%
  }
}
@media(max-width:900px) {
  .section-dock, .social-rail, .metrics-rail {
    display: none
  }
  .project-scroll {
    height: auto !important
  }
  .project-stage {
    height: 640px;
    min-height: 0;
    position: relative;
    top: auto
  }
  .project-stack {
    top: 12%;
    bottom: 30%
  }
  .project-card {
    width: 84%;
    height: 100%
  }
  .project-current {
    left: 8%;
    right: 8%;
    bottom: 14%;
    gap: 20px
  }
  .project-controls {
    bottom: 5%
  }
  .project-scroll-hint {
    display: none
  }
  .about-grid, .contact-grid, .experience-grid {
    grid-template-columns: minmax(0, 1fr)
  }
  .contact-grid {
    gap: 36px
  }
  .persona-hero {
    grid-template-columns: 1fr 1fr
  }
  .persona-intro .page-heading h1 {
    font-size: clamp(26px, 4.4vw, 40px)
  }
  .skills-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
  }
  .skills-stage {
    height: auto;
    min-height: 0
  }
  .skill-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 112px;
    padding: 20px
  }
  .skill-node.filtered-out {
    display: none
  }
  .skills-body {
    opacity: .18;
    max-height: 100%
  }
  .node-line, .node-dot {
    display: none
  }
  .skills-caption {
    position: relative;
    margin-top: 25px
  }
  .experience-queue {
    display: flex;
    flex-direction: column
  }
  .service-full-grid {
    gap: 18px
  }
  .gallery-toolbar {
    align-items: stretch
  }
  .hero-subtitle {
    max-width: 500px
  }
  .hero-lower {
    max-width: 600px
  }
  .hero-info {
    gap: 14px
  }
  .laptop-sticky {
    min-height: 560px
  }
  .laptop-scene {
    margin-top: 150px
  }
}
@media(max-width:600px) {
  .hero {
    min-height: 100svh;
    align-items: flex-start
  }
  .hero-container {
    padding: 125px 20px 155px
  }
  .hero-main {
    padding: 0
  }
  .hero h1 {
    font-size: clamp(32px, 9.5vw, 54px)
  }
  .hero-subtitle {
    font-size: 12px;
    max-width: 100%;
    letter-spacing: .02em
  }
  .hero-description {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.7
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px
  }
  .hero-actions .cyber-button {
    flex: 1;
    min-width: 125px;
    font-size: 10px
  }
  .hero-lower {
    gap: 15px;
    margin-top: 32px
  }
  .circle-link {
    width: 85px;
    height: 85px
  }
  .circle-link > span {
    width: 46px;
    height: 46px
  }
  .hero-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 0;
    background: #0207119c;
    padding: 12px
  }
  .hero-info p, .hero-info a {
    font-size: 11px
  }
  .hero-info small {
    font-size: 8px
  }
  .workspace-layer {
    background-position: 65% center
  }
  .workspace-silver {
    filter: grayscale(1) brightness(.5)
  }
  .hero-shade {
    background: linear-gradient(90deg, #02060ace, #03081140), linear-gradient(0deg, #05060a, transparent 55%)
  }
  .banner-controls {
    bottom: 65px;
    left: 20px;
    right: auto
  }
  .banner-controls button {
    font-size: 9px
  }
  .hero .scroll-cue {
    bottom: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 14px
  }
  .hero .scroll-cue b {
    font-size: 16px
  }
  .section {
    padding: 64px 20px
  }
  .page-heading {
    padding-inline: 20px
  }
  .section-title h2 {
    font-size: clamp(25px, 8vw, 42px)
  }
  .about-visual {
    display: block
  }
  .portrait-display {
    max-height: none
  }
  .about-copy h3 {
    font-size: clamp(23px, 6.7vw, 32px)
  }
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .about-stats span {
    font-size: 9px
  }
  .expertise-cards {
    grid-template-columns: 1fr
  }
  .expertise-card h5 {
    font-size: 12px
  }
  .expertise-card p {
    font-size: 13px
  }
  .skills-filter {
    margin-inline: -20px;
    padding-inline: 20px
  }
  .skills-filter button {
    min-height: 44px;
    font-size: 10px
  }
  .skill-node {
    padding: 16px 12px
  }
  .skill-node b {
    font-size: 12px
  }
  .skill-node small {
    font-size: 8px
  }
  .skill-node-copy > span {
    font-size: 8px
  }
  .skills-caption {
    flex-wrap: wrap;
    gap: 10px
  }
  .project-stage {
    height: 550px
  }
  .project-current {
    bottom: 14%;
    flex-wrap: wrap;
    gap: 10px
  }
  .project-current h3 {
    font-size: 13px
  }
  .project-current .cyber-button {
    min-height: 44px;
    font-size: 9px
  }
  .project-controls button {
    min-width: 44px;
    min-height: 44px
  }
  .card-caption {
    font-size: 18px
  }
  .hold-label {
    font-size: 8px
  }
  .archive-wrap {
    padding-inline: 20px
  }
  .archive summary {
    gap: 12px;
    flex-wrap: wrap
  }
  .archive summary > span + span {
    white-space: normal
  }
  .credentials-grid, .service-full-grid, .project-gallery, .project-detail-body, .story-row, .persona-hero {
    grid-template-columns: minmax(0, 1fr)
  }
  .persona-hero {
    padding: 115px 20px 55px
  }
  .persona-intro .page-heading h1 {
    font-size: clamp(28px, 8vw, 40px)
  }
  .persona-portrait {
    height: auto;
    margin-top: 10px;
    width: 100%;
    max-height: none
  }
  .service-full {
    padding: 25px
  }
  .gallery-info h2, .project-type-art strong {
    overflow-wrap: anywhere
  }
  .project-detail .page-heading h1 {
    font-size: clamp(26px, 8vw, 40px)
  }
  .project-detail-wordmark {
    padding: 70px 16px;
    overflow-wrap: anywhere
  }
  .story-label {
    gap: 15px;
    flex-wrap: wrap
  }
  .story-tags {
    flex-wrap: wrap
  }
  .giant-word {
    max-width: 100%;
    overflow: hidden;
    margin-inline: 0
  }
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .beyond-stage {
    max-width: 100%
  }
  .beyond-stage h2 {
    font-size: clamp(26px, 8.5vw, 38px)
  }
  .beyond-card {
    width: 90%
  }
  .contact-copy h3 {
    font-size: clamp(24px, 7.5vw, 32px)
  }
  .email-link {
    font-size: clamp(16px, 5vw, 21px)
  }
  #contact-form {
    padding: 22px 16px
  }
  .form-heading {
    flex-wrap: wrap;
    gap: 12px
  }
  .contact-socials a, .contact-socials button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 10px
  }
  .nav-shell {
    padding: 92px 20px 30px
  }
  .nav-caption, .nav-footer {
    flex-wrap: wrap;
    gap: 14px
  }
  .nav-grid nav > a {
    font-size: clamp(22px, 7vw, 30px);
    padding: 12px 0;
    min-height: 48px
  }
  .nav-grid aside {
    display: none
  }
  .nav-close-fixed {
    width: 44px;
    height: 44px
  }
  .whatsapp-widget {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom))
  }
  footer {
    padding: 30px 20px 100px;
    flex-direction: column;
    gap: 20px
  }
  footer nav {
    flex-wrap: wrap;
    gap: 12px 24px
  }
  footer nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 10px
  }
  footer > a {
    margin-left: 0
  }
  .laptop-sequence {
    height: 240svh
  }
  .laptop-sticky {
    min-height: 500px
  }
  .build-heading {
    top: 11%;
    padding: 0 20px
  }
  .build-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.5px
  }
  .build-heading h2 {
    font-size: 32px
  }
  .build-heading p {
    font-size: 8px
  }
  .laptop-scene {
    width: 89vw;
    margin-top: 90px
  }
  .laptop-lid {
    border-radius: 9px 9px 3px 3px
  }
  .laptop-screen {
    inset: 5px 5px 8px;
    border-radius: 4px
  }
  .editor-bar {
    padding: 7px;
    font-size: 7px
  }
  .editor-code {
    padding: 10px;
    font-size: 9px;
    line-height: 1.5
  }
  .terminal {
    padding: 7px 10px;
    font-size: 7px
  }
  .terminal p {
    font-size: 8px
  }
  .compile-track {
    margin-top: 5px
  }
  .screen-result > span {
    font-size: 7px
  }
  .screen-result strong {
    font-size: 25px;
    margin: 12px 0
  }
  .screen-result small {
    font-size: 6px;
    letter-spacing: 1px
  }
  .build-bottom {
    bottom: 7%;
    left: 20px;
    right: 20px;
    flex-direction: column;
    gap: 15px
  }
  .build-bottom > span {
    font-size: 7px
  }
  .build-bottom .cyber-button {
    font-size: 9px
  }
  .section-marquee {
    max-width: 100%;
    overflow: hidden
  }
}
@media(max-width:360px) {
  .hero-lower .circle-link {
    display: none
  }
  .hero-info {
    grid-template-columns: 1fr 1fr
  }
  .hero-info > div:last-child {
    display: none
  }
  .skills-map {
    grid-template-columns: 1fr
  }
  .tools-grid {
    grid-template-columns: 1fr
  }
  .header-tools {
    gap: 6px
  }
  .sound-control {
    left: 44%
  }
  .project-current {
    left: 5%;
    right: 5%
  }
}
@media(max-height:560px) and (orientation:landscape) {
  .hero {
    min-height: 700px
  }
  .laptop-sticky {
    min-height: 0
  }
  .build-heading {
    top: 8%;
    left: 5%;
    text-align: left;
    width: 30%
  }
  .build-heading h2 {
    font-size: 25px
  }
  .build-heading .eyebrow {
    font-size: 7px
  }
  .laptop-scene {
    width: 48vw;
    margin: 0 0 30px 32%
  }
  .build-bottom {
    bottom: 5%;
    flex-direction: row
  }
  .nav-shell {
    padding-top: 75px
  }
  .nav-grid nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 30px
  }
  .nav-grid nav > a {
    font-size: 20px
  }
  .nav-grid aside {
    display: none
  }
}
.paused .workspace-layer {
  transform: none
}
.paused .laptop-sequence {
  height: auto
}
.paused .laptop-sticky {
  position: relative;
  height: 850px
}
.paused .laptop-lid {
  transform: rotateX(0deg)
}
.paused .screen-result {
  opacity: 1
}
.paused .build-bottom > span {
  visibility: hidden
}
@media(prefers-reduced-motion:reduce) {
  .workspace-layer {
    transform: none
  }
  .laptop-sequence {
    height: auto
  }
  .laptop-sticky {
    position: relative;
    height: 850px
  }
  .laptop-lid {
    transform: none
  }
  .screen-result {
    opacity: 1
  }
}