/* The first screen follows the supplied 463 × 294 reference composition.
   The live projects retain their own artwork and interfaces. */
:root { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
.grain { opacity: .027; }
.metal-z { transition: transform 220ms var(--ease-out); }
.brand-type {
  background-image: repeating-linear-gradient(175deg, #ffffff06 0 1px, #00000004 1px 2px),
    linear-gradient(112deg, #d1d1d1, #ededed 28%, #c4c4c4 53%, #e4e4e4 78%, #c7c7c7);
}
.gallery-rule { flex: 1; height: 1px; background: #67676744; }
.explore-work {
  flex-shrink: 0; border: 0; padding: 8px 0; background: none;
  color: var(--text); font-size: 17px; font-weight: 500; letter-spacing: -.5px;
  display: inline-flex; gap: 14px; align-items: center; position: relative;
}
.explore-work::after {
  content: ''; position: absolute; height: 2px; width: 45%; background: var(--accent);
  left: 0; bottom: 0; transform-origin: left; transition: transform 160ms var(--ease-out);
}
.explore-work > span { font-size: 23px; }
.project-stage:focus-visible { outline: 1px solid var(--accent); outline-offset: 14px; }
.preview-fallback {
  min-height: 180px; display: grid; align-content: center; justify-content: center;
  gap: 12px; color: var(--text); font-size: 18px; text-align: center;
}
.preview-fallback small { font-size: 11px; color: var(--muted); }
.preview-fallback[hidden] { display: none; }
.detail-inside { margin-top: 28px; }
.detail-inside h3 { font-size: 10px; font-weight: 500; color: var(--text); margin: 0 0 12px; }
.detail-inside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.detail-inside li { font-size: 11px; color: var(--muted); line-height: 1.5; padding-left: 12px; position: relative; }
.detail-inside li::before { content: '/'; color: var(--accent); position: absolute; left: 0; }
.detail-copy { padding-top: 35px; padding-bottom: 35px; }
.detail-preview { position: relative; }
.detail-preview.is-loading::before {
  content: ''; position: absolute; inset: 25px; background: linear-gradient(110deg,#1a1a1a,#232323,#1a1a1a);
}
.detail-preview.is-loading > img { opacity: 0; }
#detail-preview-error { font-size: 13px; max-width: 280px; line-height: 1.8; color: var(--muted); padding: 30px; }
.detail-share { margin-left: auto; gap: 14px; align-items: center; flex-wrap: wrap; }
.detail-share #copy-project {
  width: auto; height: auto; min-height: 38px; padding: 7px 10px;
  background: none; border: 0; border-radius: 0; font-size: 10px; color: var(--muted);
}
#project-copy-status { font-size: 10px; color: var(--text); max-width: 230px; overflow-wrap: anywhere; }
.visit-link { margin-top: 28px; }

@media (min-width: 901px) and (min-aspect-ratio: 6/5) {
  .shell { width: min(1660px, calc(100% - 64px)); }
  .site-header { height: 60px; }
  .site-header .logo { font-size: 24px; letter-spacing: -.9px; }
  .site-header nav { font-size: 12px; gap: 42px; }
  .hero {
    height: calc(100svh - 60px); min-height: 650px; max-height: 1050px;
    position: relative; padding: 0; isolation: isolate;
  }
  .hero::before {
    content: ''; position: absolute; left: -2%; right: -2%; bottom: 5%; height: 15%;
    background: radial-gradient(ellipse at 49% 80%, #a8a8a819, #2222220a 45%, transparent 73%);
    pointer-events: none;
  }
  .brand-scene {
    position: absolute; left: 0; right: 0; top: 4px; height: 36%;
    min-height: 0; max-height: none; display: block; margin: 0;
  }
  .z-wrapper {
    position: absolute; left: -.5%; top: -18%; width: 32%; height: 141%;
    display: block; z-index: 2;
  }
  .metal-z {
    position: absolute; width: 116%; height: 100%; max-height: none;
    object-fit: fill; filter: drop-shadow(0 16px 18px #0006);
  }
  .brand-type {
    position: absolute; left: 29.8%; top: -2.4svh; width: max-content;
    font-size: clamp(180px, 24.15vw, 428px); line-height: .8; letter-spacing: -.075em;
    margin: 0; transform: scaleY(var(--word-stretch, 1.12)); transform-origin: left top;
  }
  .hero-byline {
    position: absolute; top: 35.6%; right: -.5%; width: 29%;
    padding: 0; min-height: 0; display: flex; justify-content: flex-start;
    gap: 18px; align-items: flex-start; z-index: 3;
  }
  .role-line { width: 29px; height: 2px; flex-shrink: 0; margin-top: 12px; }
  .hero-role { font-size: clamp(23px, 2.03vw, 33px); line-height: 1.05; letter-spacing: -.7px; }
  .hero-tagline { margin-top: 8px; font-size: clamp(11px, 1.03vw, 15px); white-space: nowrap; }
  .project-stage {
    position: absolute; left: 0; right: 0; top: 47%; height: 44%;
    min-height: 0; margin: 0; perspective: 1600px;
    --project-width: min(48.7%, calc((100svh - 60px) * .80));
  }
  .stage-light {
    width: 100%; height: 23%; bottom: -2%; left: 0;
    background: radial-gradient(ellipse, #c6c1b12a, transparent 67%);
  }
  .project-card { width: var(--project-width); left: calc(48.75% - var(--project-width) / 2); top: 0; }
  .project-card.is-center { transform: translate3d(0,0,0) rotateY(0) rotateZ(0); }
  .project-card.is-left { transform: translate3d(-71%,14px,-400px) rotateY(12deg) rotateZ(-2deg); opacity: .88; }
  .project-card.is-right { transform: translate3d(82%,24px,-400px) rotateY(-12deg) rotateZ(2deg); opacity: .88; }
  .screen-frame {
    padding: 2px; border: 1px solid #858585; border-radius: 2px;
    background: #262626; box-shadow: 0 15px 25px #000b, 0 2px 0 #d3cdc04d;
  }
  .screen-chrome, .project-caption { display: none; }
  .screen-button { border-radius: 0; }
  .screen-button > img { aspect-ratio: 1.89; object-fit: cover; object-position: top; }
  .screen-button > .glide-shot { object-fit: cover; object-position: top left; background: #161616; }
  .screen-action { bottom: 18px; right: 18px; }
  .gallery-toolbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 66px; min-height: 0;
    padding: 0; border: 0; gap: 28px;
  }
  .about { border-top: 1px solid var(--line); }
}
@media (min-width: 901px) and (min-aspect-ratio: 19/10) {
  .hero { min-height: 640px; }
  .hero-byline { top: 34%; }
  .project-stage { top: 48%; }
  .screen-button > img { aspect-ratio: 2.05; }
}
@media (max-width: 900px) {
  .gallery-rule { display: none; }
  .gallery-toolbar { gap: 15px; }
  .explore-work { order: 3; margin-left: 0; font-size: 14px; }
  .explore-work > span { font-size: 20px; }
  .screen-frame { border-radius: 2px; }
  .detail-share { margin-left: 0; }
  .detail-bottom { flex-wrap: wrap; gap: 10px; }
  .detail-bottom > div:last-child { margin-left: auto; }
}
@media (max-width: 767px) {
  .gallery-toolbar { min-height: 140px; }
  .explore-work { min-height: 44px; }
  .project-caption > button { min-height: 40px; }
  .detail-inside { margin-top: 24px; }
  .detail-bottom { padding-block: 14px; }
  .detail-bottom > span { width: 100%; line-height: 1.6; }
  .detail-share { max-width: calc(100% - 100px); }
  .detail-share #copy-project { min-height: 44px; padding-left: 0; text-align: left; }
  #project-copy-status { font-size: 9px; }
  .preview-fallback { min-height: 160px; font-size: 17px; }
}
@media (hover:hover) and (pointer:fine) {
  .explore-work:hover::after { transform: scaleX(1.35); }
}
@media (prefers-reduced-motion:reduce) {
  .metal-z { transition: none; }
  .brand-type { transform: scaleY(var(--word-stretch,1.12)); }
}



@media (max-width: 767px) {
  .project-stage { min-height: 260px; }
  .site-header nav > a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 767px) {
  .project-stage {
    height: max(260px, calc((100vw - 36px) * .76 / 1.68 + 82px));
    overflow: clip;
    overflow-clip-margin: 18px;
  }
}
@media (max-width: 420px) {
  .project-stage { height: max(260px, calc((100vw - 36px) * .84 / 1.62 + 80px)); }
}
@media (max-width: 400px) {
  .detail-top-label { display: none; }
  #detail-counter { white-space: nowrap; flex-shrink: 0; }
  .detail-top .close-detail { margin-left: auto; }
}