:root{
  --nav-y: 52.2vh;
  --text: #111;
  --bg: #fff;
  --nav-width: min(1080px, calc(100vw - 96px));
  --font: Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:11px;
  line-height:1.08;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}

.site-nav{
  position:fixed;
  z-index:1000;
  top:var(--nav-y);
  left:50%;
  width:var(--nav-width);
  transform:translate(-50%,-50%);
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 2.15fr;
  align-items:center;
  pointer-events:none;
}
.site-nav a{
  width:max-content;
  pointer-events:auto;
  white-space:nowrap;
}
.site-nav .instagram{justify-self:end}
.page-home .site-nav .brand,
.page-work .site-nav a[href="work.html"],
.page-about .site-nav a[href="about.html"],
.page-contact .site-nav a[href="contact.html"]{
  text-decoration:underline;
  text-underline-offset:2px;
}

.free-canvas{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
}

/* HOME
   Height is calculated in JS from the lowest visible item, so there is
   no artificial empty scroll area after the last image. */
.home-canvas{min-height:100vh}
.free-item{position:absolute;object-fit:cover}
.h1{left:14.8%;top:10px;width:16.7vw;max-width:230px}
.h2{left:38.7%;top:64px;width:14.6vw;max-width:200px}
.h3{left:69.4%;top:0;width:20vw;max-width:275px}
.h4{left:32.4%;top:232px;width:5vw;max-width:70px}
.h5{left:58.2%;top:182px;width:17.4vw;max-width:238px}
.h6{left:10.6%;top:442px;width:24.8vw;max-width:340px}
.h7{left:41.8%;top:444px;width:22.3vw;max-width:305px}
.h8{left:40.7%;top:607px;width:23vw;max-width:315px}
.h9{left:72.7%;top:398px;width:15vw;max-width:205px}

/* WORK */
.work-canvas{min-height:100vh}
.contact-note{
  position:absolute;left:10.3%;top:116px;width:240px;
}
.contact-note p{margin:0 0 30px}
.quote{
  position:absolute;left:25.2%;top:230px;margin:0;
  font-size:11px;font-weight:400;white-space:nowrap;
}
.project{position:absolute;display:flex;align-items:flex-start;gap:14px}
.project img{flex:none}
.project h2{font-size:11px;font-weight:400;margin:0 0 10px}
.project p{margin:0 0 9px}
.project-copy{width:330px}
.project-1{left:45.2%;top:36px}
.project-1 img{width:136px}
.project-1 .project-copy{width:315px}
.project-2{left:10.5%;top:415px;gap:16px}
.project-2 .project-copy{width:210px}
.project-2 img{width:142px}
.project-3{left:42%;top:538px}
.project-3 img{width:200px}
.project-3 .project-copy{width:335px;margin-top:22px}
.project-4{left:10.9%;top:722px}
.project-4 img{width:177px}
.project-4 .project-copy{width:330px;margin-top:38px}

/* ABOUT */
.about-canvas{height:100vh;min-height:100vh}
.about-top{
  position:absolute;left:12.1%;top:192px;width:437px;
}
.about-top p,.about-bottom-left p,.about-bottom-mid p{margin:0 0 14px}
.about-bottom-left{
  position:absolute;left:8.4%;top:432px;width:205px;
}
.about-bottom-mid{
  position:absolute;left:32.4%;top:492px;width:250px;
}
.portrait-wrap{
  position:absolute;left:53.6%;top:179px;width:336px;margin:0;
}
.portrait-wrap img{width:100%;height:auto}
.portrait-wrap figcaption{
  position:absolute;top:18px;right:-58px;width:165px;
  font-size:9px;line-height:1;
}

/* CONTACT */
.contact-page{min-height:100vh;position:relative}
.contact-card{
  position:absolute;
  left:29.5%;
  top:24.4%;
  font-size:18px;
  line-height:1.02;
}

/* About and Contact are single-screen pages on desktop. */
@media (min-width: 761px){
  .page-about,
  .page-contact{
    height:100vh;
    overflow:hidden;
  }
}

/* MOBILE */
@media (max-width: 760px){
  body{font-size:12px;line-height:1.2}
  :root{--nav-y:auto}
  .site-nav{
    top:0;left:0;transform:none;width:100%;
    padding:14px 16px;
    grid-template-columns:repeat(4,auto) 1fr;
    gap:14px;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid #eee;
  }
  .site-nav .instagram{justify-self:end}

  .free-canvas{
    min-height:0;
    overflow:visible;
    padding:86px 18px 60px;
  }

  .home-canvas{
    display:flex;flex-direction:column;gap:28px;
  }
  .free-item,
  .contact-note,.quote,
  .project,
  .about-top,.about-bottom-left,.about-bottom-mid,.portrait-wrap{
    position:static!important;
    width:auto!important;
    max-width:none!important;
    left:auto!important;top:auto!important;
  }
  .free-item{width:76%!important;margin:0 auto}
  .home-canvas .h2,.home-canvas .h5,.home-canvas .h8{margin-left:20%}
  .home-canvas .h3,.home-canvas .h6,.home-canvas .h9{margin-right:18%}

  .work-canvas{display:flex;flex-direction:column;gap:52px}
  .contact-note{order:-2}
  .quote{order:-1;white-space:normal}
  .project{display:flex;flex-direction:column;gap:14px}
  .project img{width:min(72vw,320px)!important}
  .project-copy{width:100%!important;margin:0!important}
  .project-2 .project-copy{order:2}
  .project-2 img{order:1}

  .about-canvas{display:flex;flex-direction:column;gap:34px}
  .portrait-wrap{order:2;margin:0}
  .portrait-wrap figcaption{position:static;margin-top:8px}
  .about-bottom-left{order:3}
  .about-bottom-mid{order:4}

  .contact-page{padding:100px 18px}
  .contact-card{position:static;font-size:20px;margin-top:12vh}
}


/* === v6 scroll-boundary correction ===
   Home/Work end exactly on a composed final viewport.
   The nav stays fixed; the canvas height is calculated by JS.
*/
.page-home,
.page-work{
  min-height:100vh;
}

.page-home .home-canvas,
.page-work .work-canvas{
  min-height:100vh !important;
  height:auto;
  padding-bottom:0 !important;
}

/* Extra home placeholders used only to build the final composition */
.page-home .h10,
.page-home .h11,
.page-home .h12{
  position:absolute;
  object-fit:cover;
}
.page-home .h10{left:17.5%; top:980px; width:25vw; max-width:360px;}
.page-home .h11{left:62.5%; top:1080px; width:22vw; max-width:310px;}
.page-home .h12{left:43.5%; top:1260px; width:18vw; max-width:255px;}

@media (max-width:760px){
  .page-home .h10,.page-home .h11,.page-home .h12{
    position:static!important;
    width:76%!important;
    max-width:none!important;
    margin:0 auto;
  }
}

/* === v7 HOME — real stills / composed around the fixed navigation === */
@media (min-width:761px){
  .page-home .home-canvas{height:1540px!important;min-height:1540px!important;overflow:hidden;padding:0!important}
  .page-home .free-item{height:auto;max-width:none;object-fit:contain}

  /* opening field: images live clearly above the nav */
  .page-home .h1{left:14.5%;top:12px;width:16.8vw}
  .page-home .h2{left:38.5%;top:58px;width:14.5vw}
  .page-home .h3{left:69.2%;top:4px;width:19.8vw}
  .page-home .h4{left:32.3%;top:236px;width:5.1vw}
  .page-home .h5{left:58.2%;top:184px;width:17.2vw}

  /* after the fixed nav */
  .page-home .h6{left:10.5%;top:445px;width:24.8vw}
  .page-home .h7{left:41.8%;top:446px;width:22.4vw}
  .page-home .h8{left:40.7%;top:610px;width:23vw}
  .page-home .h9{left:72.6%;top:400px;width:15vw}

  /* second movement */
  .page-home .h10{left:15.5%;top:825px;width:25vw}
  .page-home .h11{left:61.5%;top:840px;width:19vw}
  .page-home .h12{left:43%;top:965px;width:17vw}
  .page-home .h13{left:70%;top:1090px;width:18vw}

  /* final viewport: deliberate material above AND below nav, with clear nav band */
  .page-home .h14{left:13%;top:1160px;width:23vw}
  .page-home .h15{left:60%;top:1175px;width:21vw}
  .page-home .h16{left:40%;top:1390px;width:21vw}
}


/* === v8 fine positioning ===
   Reduce overlap between HOME REAL 12 and HOME REAL 14,
   and keep HOME REAL 16 clear of the fixed Instagram link on landing.
*/
.page-home .real-14{
  left: 71.5% !important;
  top: 1460px !important;
  width: 18.5vw !important;
  max-width: 255px !important;
}

.page-home .real-16{
  left: 67.5% !important;
  top: 250px !important;
  width: 14vw !important;
  max-width: 195px !important;
}

@media (max-width:760px){
  .page-home .real-14,
  .page-home .real-16{
    position:static!important;
    width:76%!important;
    max-width:none!important;
    margin:0 auto!important;
  }
}


/* === v9: targeted collision fixes ===
   NOTE: HTML classes h1..h16 are positional slots; the actual filenames are:
   h9  = home-real-16.jpg
   h13 = home-real-12.jpeg
   h15 = home-real-14.jpg
*/

/* Landing: keep home-real-16 completely above the fixed Instagram/nav band. */
@media (min-width:761px){
  .page-home .h9{
    left:72.6% !important;
    top:92px !important;
    width:14vw !important;
    max-width:190px !important;
  }

  /* Separate home-real-14 from home-real-12 instead of merely resizing it. */
  .page-home .h15{
    left:47.5% !important;
    top:1185px !important;
    width:19vw !important;
    max-width:270px !important;
  }
}


/* =========================================================
   v10 HOME — rebuilt composition based on the Readymag refs
   ---------------------------------------------------------
   The previous incremental overrides are intentionally
   superseded here. This creates:
   - no image/image overlaps on desktop
   - a clear white nav band on the landing frame
   - a clear white nav band on the final frame
   - images both above and below the nav at max scroll
   - exactly 1000px of desktop scroll, independent of viewport
   ========================================================= */
@media (min-width:761px){

  .page-home .home-canvas{
    height:calc(100vh + 1000px) !important;
    min-height:calc(100vh + 1000px) !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .page-home .free-item{
    position:absolute !important;
    height:auto !important;
    max-width:none !important;
    object-fit:contain !important;
  }

  /* LANDING — upper constellation */
  .page-home .h1{
    left:14.5% !important;
    top:10px !important;
    width:15.5vw !important;
  }

  .page-home .h2{
    left:38.5% !important;
    top:58px !important;
    width:13.2vw !important;
  }

  .page-home .h3{
    left:69% !important;
    top:0 !important;
    width:19.2vw !important;
  }

  .page-home .h4{
    left:32.3% !important;
    top:220px !important;
    width:4.8vw !important;
  }

  .page-home .h5{
    left:58% !important;
    top:178px !important;
    width:16.2vw !important;
  }

  /* Vertical still on the far right: deliberately ends above Instagram/nav */
  .page-home .h9{
    left:77% !important;
    top:168px !important;
    width:8.2vw !important;
    max-width:112px !important;
  }

  /* LANDING — lower constellation, tied to the fixed nav position */
  .page-home .h6{
    left:10.5% !important;
    top:calc(var(--nav-y) + 55px) !important;
    width:24.5vw !important;
  }

  .page-home .h7{
    left:41.8% !important;
    top:calc(var(--nav-y) + 55px) !important;
    width:21.8vw !important;
  }

  .page-home .h10{
    left:73% !important;
    top:calc(var(--nav-y) + 80px) !important;
    width:13.5vw !important;
  }

  .page-home .h8{
    left:40.7% !important;
    top:calc(var(--nav-y) + 245px) !important;
    width:22.5vw !important;
  }

  /* SECOND MOVEMENT */
  .page-home .h11{
    left:15.8% !important;
    top:calc(var(--nav-y) + 470px) !important;
    width:24vw !important;
  }

  .page-home .h12{
    left:62% !important;
    top:calc(var(--nav-y) + 490px) !important;
    width:19vw !important;
  }

  .page-home .h13{
    left:42% !important;
    top:calc(var(--nav-y) + 680px) !important;
    width:15.5vw !important;
  }

  .page-home .h14{
    left:72% !important;
    top:calc(var(--nav-y) + 690px) !important;
    width:15.5vw !important;
  }

  /* FINAL FRAME — everything above this point finishes before
     the nav reaches it at max scroll. */
  .page-home .h15{
    left:17% !important;
    top:calc(var(--nav-y) + 790px) !important;
    width:18vw !important;
  }

  /* At max scroll the nav sits at document Y = var(--nav-y) + 1000px.
     This still begins BELOW that reserved band. */
  .page-home .h16{
    left:42% !important;
    top:calc(var(--nav-y) + 1055px) !important;
    width:20.5vw !important;
  }
}


/* =========================================================
   v11 HOME — richer final frame
   Keep the nav safe, but preserve a small constellation of
   images above and below it at maximum scroll.
   ========================================================= */
@media (min-width:761px){

  /* At max scroll (1000px), these three remain visible ABOVE the nav. */
  .page-home .h13{
    left:12.5% !important;
    top:calc(var(--nav-y) + 700px) !important;
    width:16vw !important;
  }

  .page-home .h14{
    left:66.5% !important;
    top:calc(var(--nav-y) + 715px) !important;
    width:16vw !important;
  }

  .page-home .h15{
    left:38.5% !important;
    top:calc(var(--nav-y) + 770px) !important;
    width:17.5vw !important;
  }

  /* Two images remain BELOW the nav at max scroll. */
  .page-home .h16{
    left:18% !important;
    top:calc(var(--nav-y) + 1055px) !important;
    width:19vw !important;
  }

  .page-home .h12{
    left:61.5% !important;
    top:calc(var(--nav-y) + 1085px) !important;
    width:19vw !important;
  }
}

/* =========================================================
   v12 WORK — real posters, Readymag-like free composition
   Two projects establish the opening field above the fixed nav;
   the others unfold below it without entering the nav band.
   ========================================================= */
@media (min-width:761px){
  .page-work .work-canvas{
    height:1860px !important;
    min-height:1860px !important;
    overflow:hidden;
    padding:0 !important;
  }
  .page-work .contact-note{left:7.8%;top:58px;width:215px}
  .page-work .project{gap:15px}
  .page-work .project img{height:auto;object-fit:contain;max-width:none}
  .page-work .project h2{line-height:1.12;margin-bottom:9px}
  .page-work .project p{line-height:1.12}

  /* opening field — deliberately asymmetrical, both clear of nav */
  .page-work .project-1{left:34%;top:28px;align-items:flex-start}
  .page-work .project-1 img{width:10.5vw;max-width:150px}
  .page-work .project-1 .project-copy{width:285px;margin-top:18px}

  .page-work .project-2{left:64%;top:92px;align-items:flex-start}
  .page-work .project-2 img{width:12.5vw;max-width:178px;order:1}
  .page-work .project-2 .project-copy{width:235px;order:2;margin-top:14px}

  /* lower field — separate islands rather than a regular grid */
  .page-work .project-3{left:8.5%;top:610px;align-items:flex-start}
  .page-work .project-3 img{width:15vw;max-width:215px}
  .page-work .project-3 .project-copy{width:280px;margin-top:28px}

  .page-work .project-4{left:57%;top:700px;align-items:flex-start}
  .page-work .project-4 img{width:15.5vw;max-width:222px}
  .page-work .project-4 .project-copy{width:275px;margin-top:42px}

  .page-work .project-5{left:11%;top:1015px;align-items:flex-start}
  .page-work .project-5 img{width:17vw;max-width:245px}
  .page-work .project-5 .project-copy{width:300px;margin-top:34px}

  .page-work .project-6{left:55%;top:1480px;align-items:flex-start}
  .page-work .project-6 img{width:16.5vw;max-width:238px}
  .page-work .project-6 .project-copy{width:310px;margin-top:46px}
}

@media (max-width:760px){
  .page-work .project-5,.page-work .project-6{
    position:static!important;
    width:auto!important;
    max-width:none!important;
    left:auto!important;top:auto!important;
  }
}

/* v14 WORK refinements */
.contact-note .screener-contact a{display:inline-block;white-space:nowrap;cursor:pointer}
@media (min-width:761px){
  /* From the Sewers: slightly lower, while remaining safely above the fixed nav band */
  .page-work .project-2{top:125px}
}


/* === v15 ABOUT — wider text field + real portrait === */
@media (min-width:761px){
  .page-about .about-top{left:8.5%;top:150px;width:510px;}
  .page-about .about-bottom-left{left:8.5%;top:405px;width:430px;}
  .page-about .about-bottom-mid{left:39%;top:455px;width:285px;}
  .page-about .portrait-wrap{left:65%;top:125px;width:300px;}
  .page-about .portrait-wrap img{width:100%;height:auto;display:block;}
}

/* === v16 ABOUT — keep the At the centre block clear of the fixed nav === */
@media (min-width:761px){
  .page-about .about-bottom-left{top:58vh;}
}

/* =========================================================
   v17 MOBILE — dedicated iPhone / narrow-screen composition
   Desktop rules above are intentionally left untouched.
   ========================================================= */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{
    font-size:11px;
    line-height:1.16;
    overflow-x:hidden;
  }

  /* Compact fixed navigation: one clean line on iPhone widths. */
  .site-nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    transform:none;
    display:grid;
    grid-template-columns:repeat(5,max-content);
    justify-content:space-between;
    align-items:center;
    gap:7px;
    padding:12px 13px 11px;
    background:rgba(255,255,255,.97);
    border-bottom:0;
    font-size:10px;
    line-height:1;
  }
  .site-nav .instagram{justify-self:auto}

  .free-canvas{
    width:100%;
    padding:65px 0 54px;
    overflow:visible;
  }

  /* ---------- HOME ----------
     Same stills as desktop, but recomposed as a loose vertical sequence.
     Width and offset changes keep the Readymag-like airiness instead of
     turning the page into a uniform mobile gallery. */
  .page-home .home-canvas{
    display:block;
    min-height:0!important;
    height:auto!important;
    padding:64px 0 36px!important;
    overflow:visible!important;
  }
  .page-home .free-item,
  .page-home .h10,.page-home .h11,.page-home .h12,
  .page-home .real-14,.page-home .real-16{
    position:relative!important;
    display:block;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    margin-top:0!important;
  }

  .page-home .h1{width:63%!important;margin:6px 0 66px 10%!important}
  .page-home .h2{width:44%!important;margin:0 9% 82px auto!important}
  .page-home .h3{width:72%!important;margin:0 auto 74px 17%!important}
  .page-home .h4{width:24%!important;margin:0 0 62px 13%!important}
  .page-home .h5{width:58%!important;margin:0 7% 88px auto!important}
  .page-home .h6{width:79%!important;margin:0 auto 78px 5%!important}
  .page-home .h7{width:67%!important;margin:0 4% 68px auto!important}
  .page-home .h8{width:84%!important;margin:0 auto 86px!important}
  .page-home .h9{width:39%!important;margin:0 12% 74px auto!important}
  .page-home .h10{width:55%!important;margin:0 0 92px 8%!important}
  .page-home .h11{width:77%!important;margin:0 6% 74px auto!important}
  .page-home .h12{width:49%!important;margin:0 auto 90px 14%!important}
  .page-home .h13{width:66%!important;margin:0 7% 78px auto!important}
  .page-home .h14{width:46%!important;margin:0 0 84px 10%!important}
  .page-home .h15{width:68%!important;margin:0 8% 82px auto!important}
  .page-home .h16{width:81%!important;margin:0 auto 18px!important}

  /* ---------- WORK ---------- */
  .page-work .work-canvas{
    display:block;
    height:auto!important;
    min-height:0!important;
    padding:72px 17px 70px!important;
    overflow:visible!important;
  }
  .page-work .contact-note,
  .page-work .project,
  .page-work .project-5,.page-work .project-6{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
  }
  .page-work .contact-note{
    margin:0 0 78px 2px;
    width:250px!important;
  }
  .page-work .contact-note p{margin:0 0 23px}
  .contact-note .screener-contact a{white-space:nowrap}

  .page-work .project{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:15px!important;
    margin:0 0 94px;
  }
  .page-work .project img{
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    object-fit:contain!important;
    order:1!important;
  }
  .page-work .project-copy{
    width:88%!important;
    margin:0!important;
    order:2!important;
  }
  .page-work .project h2{font-size:11px;line-height:1.12;margin:0 0 9px}
  .page-work .project p{line-height:1.16;margin:0 0 10px}

  /* Poster scale and horizontal drift vary from project to project. */
  .page-work .project-1{margin-left:11%}
  .page-work .project-1 img{width:45vw!important}
  .page-work .project-1 .project-copy{width:82%!important}

  .page-work .project-2{margin-left:0}
  .page-work .project-2 img{width:56vw!important;margin-left:30%}
  .page-work .project-2 .project-copy{width:88%!important;margin-left:3%!important}

  .page-work .project-3{margin-left:8%}
  .page-work .project-3 img{width:62vw!important}
  .page-work .project-3 .project-copy{width:87%!important}

  .page-work .project-4{margin-left:0}
  .page-work .project-4 img{width:59vw!important;margin-left:29%}
  .page-work .project-4 .project-copy{width:88%!important;margin-left:5%!important}

  .page-work .project-5{margin-left:7%}
  .page-work .project-5 img{width:67vw!important}
  .page-work .project-5 .project-copy{width:88%!important}

  .page-work .project-6{margin-left:0;margin-bottom:10px}
  .page-work .project-6 img{width:62vw!important;margin-left:25%}
  .page-work .project-6 .project-copy{width:90%!important;margin-left:4%!important}

  /* ---------- ABOUT ---------- */
  .page-about,
  .page-contact{
    height:auto;
    overflow-x:hidden;
  }
  .page-about .about-canvas{
    display:flex;
    flex-direction:column;
    gap:0;
    height:auto!important;
    min-height:100vh!important;
    padding:82px 18px 68px!important;
  }
  .page-about .about-top,
  .page-about .about-bottom-left,
  .page-about .about-bottom-mid,
  .page-about .portrait-wrap{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
  }
  .page-about .about-top{
    width:88%!important;
    margin:0 0 58px 1%!important;
    order:1;
  }
  .page-about .portrait-wrap{
    width:72vw!important;
    margin:0 1% 66px auto!important;
    order:2;
  }
  .page-about .portrait-wrap img{width:100%;height:auto}
  .page-about .portrait-wrap figcaption{
    position:static!important;
    width:auto!important;
    margin-top:7px;
    font-size:9px;
    line-height:1.05;
  }
  .page-about .about-bottom-left{
    width:91%!important;
    margin:0 0 64px 3%!important;
    order:3;
  }
  .page-about .about-bottom-mid{
    width:76%!important;
    margin:0 0 0 18%!important;
    order:4;
  }
  .page-about .about-top p,
  .page-about .about-bottom-left p,
  .page-about .about-bottom-mid p{margin:0 0 13px}

  /* ---------- CONTACT ---------- */
  .page-contact .contact-page{
    min-height:100svh;
    padding:62px 18px 30px;
    display:flex;
    align-items:center;
  }
  .page-contact .contact-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    margin:0 0 3vh 15%;
    font-size:18px;
    line-height:1.04;
  }
}

/* Extra safety for very narrow phones. */
@media (max-width:350px){
  .site-nav{font-size:9px;padding-left:9px;padding-right:9px;gap:5px}
  .page-work .work-canvas{padding-left:14px!important;padding-right:14px!important}
}

/* =========================================================
   v18 MOBILE — navigation fixed at the vertical centre,
   matching the desktop behaviour. All other mobile layout
   rules from v17 remain unchanged.
   ========================================================= */
@media (max-width:760px){
  .site-nav{
    top:52.2vh;
    left:50%;
    width:calc(100% - 26px);
    transform:translate(-50%,-50%);
    padding:0;
    background:transparent;
    border:0;
  }
}

/* =========================================================
   v19 MOBILE — keep the fixed central nav clear on landing.
   Preserve the transparent nav and the v18 composition; only
   open a little more white space around the centre line on
   Home and Work so the first image/poster does not sit behind it.
   ========================================================= */
@media (max-width:760px){
  /* HOME: push the second still just below the fixed nav band. */
  .page-home .h1{
    margin-bottom:calc(66px + 15svh)!important;
  }

  /* WORK: keep the opening contact block above, then begin the
     first poster safely below the fixed central navigation. */
  .page-work .project-1{
    margin-top:24svh!important;
  }
}

/* =========================================================
   v20 MOBILE — permanent clear corridor for the fixed nav.
   Images/content may scroll through the centre, but are masked
   by a slim white strip behind the navigation, so text never
   visually overlaps photography/posters on iPhone.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:760px){
  .site-nav::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-13px;
    right:-13px;
    top:50%;
    height:44px;
    transform:translateY(-50%);
    background:#fff;
    pointer-events:none;
  }
  .site-nav{
    isolation:isolate;
  }
}

/* =========================================================
   v21 MOBILE — endpoint-only nav clearance.
   The nav stays transparent and fixed at the centre. During
   scrolling, images/posters may pass behind it. Only the
   landing and final resting positions are kept clear, matching
   the desktop behaviour. Desktop is untouched.
   ========================================================= */
@media (max-width:760px){
  /* Remove the v20 white masking strip completely. */
  .site-nav::before{display:none!important;content:none!important}
  .site-nav{isolation:auto!important;background:transparent!important}

  /* LANDING: keep the centre line clear when the page first opens. */
  .page-home .h1{
    margin-bottom:calc(66px + 24svh)!important;
  }
  .page-work .project-1{
    margin-top:36svh!important;
  }
  .page-about .about-top{
    margin-bottom:calc(58px + 16svh)!important;
  }

  /* FINAL POSITION: reserve only enough tail for the fixed nav
     to come to rest in white space at maximum scroll. Content can
     cross behind the nav at every intermediate scroll position. */
  .page-home .home-canvas{
    padding-bottom:calc(36px + 50svh)!important;
  }
  .page-work .work-canvas{
    padding-bottom:calc(70px + 50svh)!important;
  }
}

/* =========================================================
   v22 MOBILE — About endpoint composition.
   Keep the v21 fixed transparent navigation behaviour, but
   tighten the opening gap between the introductory text and
   portrait. This preserves the same relative final composition
   while making the initial About frame denser, as requested.
   ========================================================= */
@media (max-width:760px){
  .page-about .about-top{
    margin-bottom:24px!important;
  }
}

/* =========================================================
   v23 MOBILE — About tuned to the approved v21 endpoints.
   Shorten only the opening text→portrait pause, then return
   that vertical space after the portrait so the maximum-scroll
   resting frame keeps the fixed nav in the white gap between
   portrait/caption and the following text. No image masking.
   ========================================================= */
@media (max-width:760px){
  .page-about .about-top{
    margin-bottom:calc(58px + 8svh)!important;
  }
  .page-about .portrait-wrap{
    margin-bottom:calc(66px + 8svh)!important;
  }
}

/* v26 — minimal screener request popup */
.modal-open{overflow:hidden}
.mail-panel{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(255,255,255,.74);
}
.mail-panel.is-open{display:flex}
.mail-dialog{
  position:relative;
  width:min(360px,calc(100vw - 48px));
  background:#fff;
  border:1px solid #000;
  padding:24px 26px 22px;
  font:inherit;
}
.mail-dialog h2{
  margin:0 0 24px;
  font-size:11px;
  font-weight:400;
  line-height:1.1;
  text-transform:lowercase;
}
.mail-close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  padding:2px 4px;
  background:transparent;
  color:#000;
  font:inherit;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
#mail-form{display:grid;gap:14px}
#mail-form label{display:grid;gap:5px;font:inherit}
#mail-form label span{opacity:.55}
#mail-form input,
#mail-form select,
#mail-form textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid #000;
  border-radius:0;
  padding:4px 0 5px;
  background:#fff;
  color:#000;
  font:inherit;
  outline:none;
  appearance:none;
}
#mail-form textarea{resize:vertical;min-height:54px}
#mail-form input:focus,
#mail-form select:focus,
#mail-form textarea:focus{border-bottom-width:2px}
.mail-submit{
  justify-self:start;
  border:0;
  padding:0;
  margin-top:4px;
  background:transparent;
  color:#000;
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.mail-status{min-height:1em;margin:0;font:inherit}
.hidden-field{position:absolute!important;left:-9999px!important}

@media (max-width:760px){
  .mail-panel{padding:18px}
  .mail-dialog{width:calc(100vw - 36px);padding:22px 20px 20px}
}


/* =========================================================
   v27 — robust intermediate desktop responsive behaviour.
   Keep the approved wide-desktop composition and dedicated
   mobile layout. Between them, compress each project/about
   island as a unit so resizing the Safari window cannot make
   text and images collide.
   ========================================================= */

/* Mid desktop / laptop widths */
@media (min-width:1101px) and (max-width:1450px){
  :root{--nav-width:calc(100vw - 76px)}

  .page-work .contact-note{left:7%;width:205px}
  .page-work .project{gap:12px}
  .page-work .project-1{left:31%;}
  .page-work .project-1 img{width:9.4vw;max-width:136px}
  .page-work .project-1 .project-copy{width:245px}

  .page-work .project-2{left:66%;}
  .page-work .project-2 img{width:11vw;max-width:160px}
  .page-work .project-2 .project-copy{width:205px}

  .page-work .project-3{left:8%;}
  .page-work .project-3 img{width:14vw;max-width:200px}
  .page-work .project-3 .project-copy{width:250px}

  .page-work .project-4{left:58%;}
  .page-work .project-4 img{width:14vw;max-width:205px}
  .page-work .project-4 .project-copy{width:240px}

  .page-work .project-5{left:10%;}
  .page-work .project-5 img{width:15.5vw;max-width:225px}
  .page-work .project-5 .project-copy{width:260px}

  .page-work .project-6{left:54%;}
  .page-work .project-6 img{width:15vw;max-width:218px}
  .page-work .project-6 .project-copy{width:270px}

  .page-about .about-top{left:7%;width:43vw;max-width:500px}
  .page-about .portrait-wrap{left:68%;width:25vw;max-width:285px}
  .page-about .about-bottom-left{left:7%;width:38vw;max-width:420px}
  .page-about .about-bottom-mid{left:48%;width:24vw;max-width:275px}
}

/* Narrow desktop / small laptop widths, before mobile takes over */
@media (min-width:761px) and (max-width:1100px){
  body{font-size:10px;line-height:1.1}
  :root{--nav-width:calc(100vw - 42px)}
  .site-nav{grid-template-columns:1.15fr 1fr 1fr 1fr 1.55fr}

  .page-work .work-canvas{height:1760px!important;min-height:1760px!important}
  .page-work .contact-note{left:5%;top:48px;width:180px}
  .page-work .contact-note p{margin-bottom:24px}
  .page-work .project{gap:10px}
  .page-work .project h2{font-size:10px}

  .page-work .project-1{left:27%;top:28px}
  .page-work .project-1 img{width:9vw;max-width:100px}
  .page-work .project-1 .project-copy{width:190px;margin-top:10px}

  .page-work .project-2{left:65%;top:115px}
  .page-work .project-2 img{width:10.5vw;max-width:116px}
  .page-work .project-2 .project-copy{width:170px;margin-top:10px}

  .page-work .project-3{left:7%;top:590px}
  .page-work .project-3 img{width:14vw;max-width:154px}
  .page-work .project-3 .project-copy{width:210px;margin-top:22px}

  .page-work .project-4{left:56%;top:685px}
  .page-work .project-4 img{width:14.5vw;max-width:160px}
  .page-work .project-4 .project-copy{width:205px;margin-top:30px}

  .page-work .project-5{left:8%;top:980px}
  .page-work .project-5 img{width:16vw;max-width:176px}
  .page-work .project-5 .project-copy{width:220px;margin-top:26px}

  .page-work .project-6{left:52%;top:1380px}
  .page-work .project-6 img{width:15.5vw;max-width:170px}
  .page-work .project-6 .project-copy{width:225px;margin-top:34px}

  /* About: preserve the free composition but reduce every block
     proportionally instead of letting the portrait cross the text. */
  .page-about .about-top{left:6%;top:115px;width:43vw;max-width:390px}
  .page-about .portrait-wrap{left:64%;top:112px;width:29vw;max-width:270px}
  .page-about .portrait-wrap figcaption{right:auto;left:0;top:calc(100% + 7px);width:190px}
  .page-about .about-bottom-left{left:6%;top:58vh;width:43vw;max-width:390px}
  .page-about .about-bottom-mid{left:53%;top:62vh;width:34vw;max-width:300px}

  /* Home: cap the visual scale slightly so narrow desktop windows
     keep the same islands without accidental image/image collisions. */
  .page-home .free-item{max-width:28vw!important}
  .page-home .h3{width:17.5vw!important}
  .page-home .h6{width:21vw!important}
  .page-home .h7{width:19vw!important}
  .page-home .h8{width:19.5vw!important}
  .page-home .h11{width:21vw!important}
  .page-home .h12{width:17vw!important}
}

/* v28: screener CTA */
.contact-note .screener-contact a{color:#c42020;}

/* =========================================================
   v29 MOBILE — clean fixed-nav resting frames.
   Keep the nav transparent and fixed. Content may cross it while
   scrolling; only the initial Work frame and final About frame are
   given additional breathing room.
   ========================================================= */
@media (max-width:760px){
  /* WORK landing: place the first project decisively below the
     fixed navigation at the initial scroll position. */
  .page-work .project-1{
    margin-top:52svh!important;
  }

  /* ABOUT ending: create a genuine white resting band between the
     biography block and the festivals/residencies block. */
  .page-about .about-bottom-left{
    margin-bottom:calc(64px + 18svh)!important;
  }
}