* { margin:0; padding:0; box-sizing:border-box; }
:root { --bg:#000; --tab-h:34px; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:#fff; font-family:'Space Mono',monospace;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; }

/* ============ HEADER / NAV ============ */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:24px;
  padding:22px 32px;
  pointer-events:none;
}
header > * { pointer-events:auto; }
.brand { line-height:0; display:block; justify-self:start; }
nav { display:flex; gap:10px; align-items:center; justify-content:center; }
nav a { display:block; height:var(--tab-h); transition:opacity .25s; }
nav a:hover { opacity:.62; }
nav a svg { height:var(--tab-h); width:auto; display:block; }
.dots-link { display:block; padding:14px; margin:-14px; }
.dots-link svg { height:18px; width:auto; display:block; opacity:1; transition:opacity .25s; }
.dots-link:hover svg { opacity:.6; }

/* MOTH — 4-frame */
.moth-mark { display:block; position:relative; width:72px; height:72px; }
.moth-mark svg { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; }
.moth-mark svg.moth-f1 { opacity:1; }

/* ============ HOME PAGE ============ */
.home-stage { position:relative; width:100%; min-height:100vh; display:flex;
  align-items:center; justify-content:center; padding:90px 24px 60px; overflow:visible; }
.home-art { width:min(100%, 1600px); height:auto; display:block; overflow:visible; }
.home-art-mobile { display:none; }
#laser { transition: transform 1.5s cubic-bezier(.4,0,.2,1); }

/* ============ CONTACT PAGE ============ */
.contact-stage { position:relative; width:100%; min-height:100vh;
  display:flex; align-items:center;
  padding:100px 0 40px 0; gap:0; max-width:none; margin:0; overflow:hidden; }
.contact-info { padding:36px 28px; background:rgba(0,0,0,.55); border-radius:2px; flex:0 0 280px; margin-left:12%; z-index:2; }
.contact-info .head { width:100%; height:auto; display:block; margin-bottom:32px; }
.contact-info .name { font-size:18px; letter-spacing:.08em; text-transform:uppercase; text-align:center; margin-bottom:8px; }
.contact-info .role { font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  text-align:center; color:rgba(255,255,255,.5); margin-bottom:48px; }
.contact-info .line { font-size:14px; text-align:center; margin-bottom:18px; color:rgba(255,255,255,.85); }
.contact-info .line a { color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; transition:border-color .25s; }
.contact-info .line a:hover { border-bottom-color:rgba(255,255,255,1); }
.contact-art { flex:1; height:auto; display:block; max-height:95vh; margin-left:-60px; }

/* ============ ABOUT PAGE ============ */
.about { max-width:1200px; margin:0 auto; padding:120px 40px 100px; }
.section-head { text-align:center; padding:0 0 30px; }
.section-head .rule { height:1px; background:rgba(255,255,255,.25); max-width:1200px; margin:0 auto; }
.section-head .head-mark { padding:40px 0; display:flex; justify-content:center; }
.section-head .head-mark svg { width:min(300px,56vw); height:auto; display:block; }
.about-body { display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; margin-top:60px; }
.about-photo { width:100%; max-width:280px; height:auto; display:block; border-radius:2px; }
.about-bio { font-size:14px; letter-spacing:.01em; line-height:1.95; color:rgba(255,255,255,.85); text-transform:uppercase; }
.about-bio p { margin-bottom:28px; }
.about-meta { font-size:12px; line-height:1.9; color:rgba(255,255,255,.5); margin-top:8px; }
.about-meta strong { font-weight:700; color:rgba(255,255,255,.78); }

/* ============ WORK PAGE ============ */
.work-head { text-align:center; padding:120px 24px 30px; }
.work-head .rule { height:1px; background:rgba(255,255,255,.25); max-width:1200px; margin:0 auto; }
.work-head .head-mark { padding:40px 0; display:flex; justify-content:center; }
.work-head .head-mark svg { width:min(280px,56vw); height:auto; display:block; }
.case { max-width:1200px; margin:0 auto; padding:50px 24px; }
.case h2 { font-weight:400; font-size:clamp(24px,3vw,36px); letter-spacing:-.005em; }
.case .sub { font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.9);
  margin-top:10px; line-height:1.7; text-transform:uppercase; }
.case .disc { font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.55);
  margin-top:6px; line-height:1.7; text-transform:uppercase; }
.case img.full { width:100%; display:block; margin-top:18px; border-radius:2px; }
.case .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.case .row img { width:100%; height:auto; display:block; border-radius:2px; }
.case .row-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.case .row-3 img { width:100%; height:auto; display:block; border-radius:2px; align-self:start; }
/* row-3-mixed: 2 wide landscapes + 1 portrait that holds aspect */


/* ============ TRIANGLE / ESOTERICA ============ */
.triangle-stage { position:relative; width:100%; min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:90px 24px 60px; }
.triangle-art { width:min(100%, 1600px); height:auto; display:block; }

/* ============ MOBILE ============ */
@media (max-width:760px) {
  :root { --tab-h:18px; }
  header { padding:14px 16px; column-gap:10px; }
  .moth-mark { width:60px; height:60px; }

  /* HOME — swap desktop art for the stacked mobile art, flush to top */
  .home-stage { min-height:auto; align-items:flex-start; justify-content:center; padding:0; }
  .home-art { display:none; }
  .home-art-mobile { display:block; width:100%; height:auto; }

  /* ABOUT — single column, photo centered */
  .about { padding:100px 20px 60px; }
  .about-body { grid-template-columns:1fr; gap:36px; margin-top:48px; }
  .about-photo { margin-left:auto; margin-right:auto; }

  /* CONTACT — stack: info first, illustration large + centered underneath */
  .contact-stage { flex-direction:column; align-items:center; padding:100px 20px 48px; gap:28px; overflow:visible; }
  .contact-info { flex:none; width:100%; max-width:340px; margin-left:0; }
  .contact-art { flex:none; width:100%; max-width:520px; height:auto; max-height:none; margin-left:0; }

  /* WORK — collapse 3-up rows */
  .case .row-3 { grid-template-columns:1fr; }

  /* collapse all inline flex image rows */
  div[style*="display:flex"] { flex-direction:column; }
  div[style*="display:flex"] img { flex:none !important; width:auto !important; max-width:100%; display:block; margin:0 auto; }
}

.case .row-3-mixed { display:grid; grid-template-columns:2fr 2fr 1fr; gap:14px; margin-top:14px; align-items:start; }
.case .row-3-mixed img { width:100%; height:auto; display:block; border-radius:2px; }
@media (max-width:680px) {
  .case .row-3-mixed { grid-template-columns:1fr 1fr; }
  .case .row-3-mixed > :last-child { grid-column:1/-1; max-width:50%; margin:0 auto; }
}