/*
Theme Name: VPVA NEXT
Theme URI: https://vpva.pt/
Author: VPVA
Description: Custom VPVA portfolio theme based on the approved v4.12 frontend.
Version: 0.18.0
Text Domain: vpva-next
*/

:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#79756e;
  --header-h:74px;
  --pad:28px;
  --row-side:30px;
  --text-col-offset:8px;
  --row-h:clamp(430px,57vh,560px);
  --row-expanded-h:min(84vh,calc(100vh - var(--header-h) - 28px));
  --row-gap:22px;
  --item-gap:20px;
  --info-w:245px;
  --note-w:205px;
  --arrow-box:64px;
  --arrow-offset:-28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body{min-height:100vh;background:#fff;overflow-y:scroll;overflow-x:hidden}
a,button{font:inherit;color:inherit;text-decoration:none;background:none;border:0;padding:0}
button{cursor:pointer}
img,video{display:block;max-width:none}

.page-shell{background:#fff;min-height:100vh}

/* Premium vertical-motion effect.
   The first stage is intentionally tiny, then it eases to the full 2% zoom-out
   without ever returning to 100% in between. The transform origin is set by JS
   to the visible viewport centre, preventing the apparent vertical jump. */
#projects{
  --scroll-origin-y:50vh;
  transform:scale(1);
  transform-origin:50% var(--scroll-origin-y);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#projects.scroll-zoom-stage1{
  transform:scale(.997);
  transition-duration:.16s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
#projects.scroll-zoom-stage2{
  transform:scale(.988);
  transition-duration:.72s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--header-h);
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:0;box-shadow:none
}
.brand{position:absolute;left:calc(var(--pad) + var(--row-side) + var(--text-col-offset));top:50%;transform:translateY(-50%);width:94px;height:33px;display:block}
.brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.main-nav{display:flex;gap:42px;align-items:center;justify-content:center}
.nav-link,.lang-toggle button{text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:#8a867f;padding:7px 0 6px;white-space:nowrap}
.nav-link.active,.lang-toggle button.active{color:#111;font-weight:600;border-bottom:1px solid #111}
.lang-toggle{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
.lang-toggle span{width:1px;height:12px;background:#c4c0b9;display:block}
.view-panel{display:none}.view-panel.active{display:block}

main,.project-list{background:#fff}
main{padding-top:var(--header-h)}
.project-list{padding:8px var(--pad) 48px;display:flex;flex-direction:column;gap:var(--row-gap)}
.project-row{position:relative;height:var(--row-h);transition:height .35s ease,margin .35s ease}
.project-row.expanded{height:var(--row-expanded-h)}
.row-shell{position:relative;height:100%;padding:0 var(--row-side)}
.row-arrow{
  position:absolute;top:0;z-index:8;outline:none;user-select:none;-webkit-user-select:none;
  width:var(--arrow-box);height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:64px;line-height:1;color:#111;opacity:.92;
  transition:opacity .18s ease;background:transparent;
  cursor:pointer;
}
/* The pseudo-element extends the invisible click target from the visible arrow
   all the way to the browser edge without moving the arrow itself. */
.row-arrow::before{
  content:'';position:absolute;top:0;bottom:0;width:calc(var(--pad) + 18px);background:transparent;
}
.row-arrow.prev::before{right:100%}
.row-arrow.next::before{left:100%}
.row-arrow:hover{opacity:1}
.row-arrow:active{cursor:pointer}
.row-arrow:focus,.row-arrow:focus-visible{outline:none;box-shadow:none}
.row-arrow:disabled{opacity:.18;cursor:default}
.row-arrow:disabled::before{cursor:default}
.row-arrow.prev{left:var(--arrow-offset)}.row-arrow.next{right:var(--arrow-offset)}
.track-viewport{height:100%;overflow:hidden}
.project-track{height:100%;display:flex;align-items:stretch;gap:var(--item-gap);overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;background:#fff;touch-action:pan-y}
.project-track::-webkit-scrollbar{display:none}
.project-track.dragging,.project-track.dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.track-piece{flex:0 0 auto;height:100%}

.project-info{width:var(--info-w);height:100%;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;padding:20px 30px 20px var(--text-col-offset);background:#fff}
.project-number{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6f6b65;margin-bottom:12px}
.project-number::after{content:'';display:block;width:22px;height:1px;background:#8b8780;margin-top:10px}
.project-title{margin:0 0 16px;font-size:22px;line-height:1.08;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.project-location{margin:0 0 28px;font-size:10px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#7f7b74}
.project-intro{margin:0;font-size:12px;line-height:1.72;color:#66625c;max-width:22ch}

/* Images stay visually clean. On hover we use the familiar pointing hand and
   reveal only a subtle + in the lower-right corner. Expanded imagery uses a
   custom × cursor instead. */
.media-card{position:relative;width:calc(var(--row-h-local,var(--row-h))*var(--ar,1.45));height:100%;overflow:hidden;background:#ddd;border:0;display:block;transition:transform .24s ease,opacity .24s ease;cursor:pointer}
.media-card,.media-card *{cursor:pointer!important}
.media-card img,.media-card video{width:100%;height:100%;object-fit:cover;background:#111;pointer-events:none}
.media-card:hover{transform:translateY(-1px)}
.media-card::after{
  content:'';position:absolute;right:18px;bottom:14px;z-index:3;
  width:64px;height:64px;
  opacity:0;transform:translateY(2px);transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
  background:
    linear-gradient(#fff,#fff) center/1px 42px no-repeat,
    linear-gradient(#fff,#fff) center/42px 1px no-repeat;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.22)) drop-shadow(0 0 6px rgba(0,0,0,.10));
}
.media-card:hover::after{opacity:1;transform:translateY(0)}

.project-row:not(.expanded) .media-card::after{
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%) scale(.96);
}
.project-row:not(.expanded) .media-card:hover::after{
  transform:translate(-50%,-50%) scale(1);
}
.project-row.expanded .media-card,.project-row.expanded .media-card *{cursor:none!important}
.project-row.expanded .media-card::after{content:'';opacity:0}
.project-row.expanded .media-card:hover::after{transform:none}

.editorial-note{width:var(--note-w);height:100%;flex:0 0 auto;display:flex;align-items:center;padding:22px 24px;background:#fff}
.editorial-note p{margin:0;font-size:12px;line-height:1.78;color:#68645e;max-width:21ch}
.editorial-note p::before{content:'';display:block;width:18px;height:1px;background:#9b978f;margin-bottom:18px}

.project-row.expanded .media-card{width:calc(var(--row-expanded-h)*var(--ar,1.45))}
.project-row.expanded .project-info{width:calc(var(--info-w) + 12px)}
.project-row.expanded .editorial-note{width:calc(var(--note-w) + 8px)}

/* Fine custom × cursor, used only while an image is expanded. */
.media-cursor{
  position:fixed;left:0;top:0;z-index:1000;
  width:45px;height:45px;display:none;
  pointer-events:none;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.18));
}
.media-cursor.visible{display:block}
.media-cursor span,.media-cursor i{display:none}
.media-cursor::before,.media-cursor::after{
  content:'';position:absolute;left:50%;top:50%;
  width:27px;height:1px;background:#fff;
  transform-origin:center;
}
.media-cursor::before{transform:translate(-50%,-50%)}
.media-cursor::after{transform:translate(-50%,-50%) rotate(90deg)}
.media-cursor.close-state::before{transform:translate(-50%,-50%) rotate(45deg)}
.media-cursor.close-state::after{transform:translate(-50%,-50%) rotate(-45deg)}

.info-panel{min-height:calc(100vh - var(--header-h));padding:70px var(--pad);background:#fff}
.info-wrap{max-width:780px}.info-wrap h1{margin:0 0 18px;font-size:44px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}.info-wrap p{margin:0;max-width:520px;color:#68645d;line-height:1.7;font-size:14px}

@media(max-width:1200px){
  :root{--pad:24px;--row-side:24px;--info-w:215px;--note-w:185px;--item-gap:18px;--row-h:clamp(390px,52vh,510px);--arrow-box:60px;--arrow-offset:-22px}
  .main-nav{gap:26px}.project-title{font-size:19px}
}
@media(max-width:900px){
  :root{--header-h:70px;--pad:18px;--row-side:22px;--info-w:185px;--note-w:170px;--item-gap:14px;--row-h:clamp(310px,42vh,430px);--row-gap:18px;--arrow-box:54px;--arrow-offset:-18px}
  .brand{width:76px;height:28px}.main-nav{gap:18px}.nav-link{font-size:8.5px}.project-title{font-size:17px}.project-intro,.editorial-note p{font-size:11px}.row-shell{padding:0 var(--row-side)}.row-arrow{font-size:34px}
}
@media(max-width:680px){
  :root{--row-h:250px;--row-expanded-h:72vh;--row-side:18px;--info-w:150px;--note-w:145px;--item-gap:12px;--row-gap:16px}
  .lang-toggle{display:none}.main-nav{position:absolute;left:110px;right:18px;justify-content:flex-start;overflow-x:auto;gap:16px}.row-shell{padding:0 var(--row-side)}.project-info{padding-right:15px}.project-intro{display:none}.editorial-note p{font-size:10px}
}


/* v3.1 — the cover is a true landing state: no active navigation and no page scrollbar. */
html.intro-active,
body.intro-active{overflow:hidden!important;height:100%}
body.intro-active .nav-link,
body.intro-active .nav-link.active{color:#8a867f;font-weight:400;border-bottom-color:transparent}

/* Preview direction for Animations, Virtual Tour and Studio. */
.content-panel{min-height:calc(100vh - var(--header-h));background:#fff}
.showcase-list{padding:8px var(--pad) 56px;display:flex;flex-direction:column;gap:24px}
.animations-page .showcase-list,
.virtual-page .showcase-list{padding-top:8px;padding-bottom:8px;gap:10px}
.showcase-row{min-height:clamp(470px,67vh,690px);display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:stretch}
.showcase-meta{padding:34px 30px 30px calc(var(--row-side) + var(--text-col-offset));display:flex;flex-direction:column;justify-content:center}
.showcase-number,.studio-label{font-size:10px;letter-spacing:.18em;color:#77736d;text-transform:uppercase}
.showcase-number::after,.studio-label::after{content:'';display:block;width:22px;height:1px;background:#8b8780;margin-top:10px}
.showcase-meta h1{margin:14px 0 10px;font-size:23px;line-height:1.08;font-weight:500;letter-spacing:.10em;text-transform:uppercase}
.showcase-kicker{margin:0 0 26px!important;font-size:10px!important;letter-spacing:.13em;text-transform:uppercase;color:#837f78!important}
.showcase-meta p{margin:0;max-width:24ch;font-size:12px;line-height:1.72;color:#65615b}
.showcase-media{margin:0;min-width:0;overflow:hidden;background:#111}
.showcase-media img,.showcase-media video{width:100%;height:100%;object-fit:cover}
.showcase-row{position:relative}
.showcase-down-arrow{position:absolute;left:50%;top:auto;bottom:auto;transform:translate(-50%,-50%) rotate(90deg);z-index:9;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:#111;background:transparent;border:0;font-size:42px;line-height:1;opacity:.92;cursor:pointer;transition:opacity .18s ease,transform .18s ease}
.showcase-down-arrow:hover{opacity:1;transform:translate(-50%,-50%) rotate(90deg) translateY(1px)}
.showcase-down-arrow:focus,.showcase-down-arrow:focus-visible{outline:none;box-shadow:none}
.showcase-down-arrow span{display:block;transform:translateY(1px)}
.text-cta{width:max-content;margin-top:28px;padding-bottom:5px;border-bottom:1px solid #111;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.tour-media{position:relative}.tour-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:31px;font-weight:300;letter-spacing:.08em;text-shadow:0 1px 12px rgba(0,0,0,.22);pointer-events:none}
.studio-grid{padding:8px var(--pad) 58px;display:grid;grid-template-columns:minmax(260px,.38fr) minmax(0,1fr);gap:24px;align-items:stretch}
.studio-copy{min-height:clamp(480px,67vh,690px);padding:52px 48px 42px calc(var(--row-side) + var(--text-col-offset));display:flex;flex-direction:column;justify-content:center}
.studio-copy h1{margin:18px 0 24px;max-width:13ch;font-size:clamp(30px,3.1vw,55px);line-height:1.02;font-weight:400;letter-spacing:-.025em}
.studio-copy p{margin:0;max-width:39ch;font-size:13px;line-height:1.75;color:#625e58}
.studio-image{margin:0;min-height:clamp(480px,67vh,690px);overflow:hidden;background:#eee}.studio-image img{width:100%;height:100%;object-fit:cover}
.studio-image-secondary{grid-column:1}.studio-contact{grid-column:2;padding-left:56px}.studio-contact h2{margin:18px 0 22px;font-size:28px;line-height:1.1;font-weight:400;letter-spacing:.04em}.studio-small{margin-top:34px!important;font-size:11px!important;color:#86817a!important}
@media(max-width:900px){.showcase-row{grid-template-columns:190px minmax(0,1fr);min-height:54vh}.showcase-meta{padding-left:18px;padding-right:18px}.showcase-meta h1{font-size:18px}.studio-grid{grid-template-columns:210px minmax(0,1fr)}.studio-copy{padding-left:18px;padding-right:24px}.studio-copy h1{font-size:32px}}
@media(max-width:680px){.showcase-row{grid-template-columns:1fr;min-height:auto}.showcase-meta{min-height:240px}.showcase-media{height:58vh}.studio-grid{grid-template-columns:1fr}.studio-copy,.studio-image{min-height:52vh}.studio-image-secondary,.studio-contact{grid-column:1}}

/* v2.9 — cover entry + fixed project information in normal mode */
body.intro-active{overflow:hidden}
body.intro-active main{visibility:hidden}
body.intro-active .nav-link.active{border-bottom-color:transparent;font-weight:400}
body.intro-active .site-header{background:transparent}
.site-intro{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;
  background:#fff;opacity:1;transition:opacity .42s cubic-bezier(.22,.61,.36,1);
}
.site-intro.leaving{opacity:0;pointer-events:none}
.site-intro.hidden{display:none}
.intro-enter{
  width:100%;height:100%;display:block;overflow:hidden;background:#111;
  cursor:default;outline:none;
}
.intro-enter.intro-hot-zone{cursor:pointer}
.intro-enter{position:relative}
.intro-poster-wrap{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.intro-poster,.intro-enter video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.intro-poster{z-index:1;opacity:1;transition:opacity .38s cubic-bezier(.22,.61,.36,1)}
.intro-enter video{z-index:2;opacity:0;transition:opacity .38s cubic-bezier(.22,.61,.36,1)}
.intro-enter.video-ready video{opacity:1}
.intro-enter.video-ready .intro-poster{opacity:0}

/* In the regular projects view the project title/info is anchored to the left
   and only the images move. Once a row is enlarged, that title returns to the
   horizontal sequence, preserving the existing enlarged-row behaviour. */
.row-shell{padding:0}
.project-info-fixed{
  position:absolute;left:var(--row-side);top:0;bottom:0;z-index:5;
  width:var(--info-w);
}
.project-info-inline{display:none}
.track-viewport{
  position:absolute;top:0;bottom:0;
  left:calc(var(--row-side) + var(--info-w) + var(--item-gap));
  right:var(--row-side);
  height:auto;
}
.project-row.expanded .project-info-fixed{display:none}
.project-row.expanded .project-info-inline{display:flex}
.project-row.expanded .track-viewport{left:var(--row-side);right:var(--row-side)}

/* There is no editorial text block between the project images in this version. */
.editorial-note{display:none!important}

@media(max-width:900px){
  .project-info-fixed{left:var(--row-side)}
  .track-viewport{left:calc(var(--row-side) + var(--info-w) + var(--item-gap));right:var(--row-side)}
  .project-row.expanded .track-viewport{left:var(--row-side);right:var(--row-side)}
}

/* v3.5 — refined media sections + studio content */
.animations-page .showcase-row,
.virtual-page .showcase-row{
  min-height:calc(100vh - var(--header-h) - 18px);
  align-items:center;
  scroll-margin-top:8px;
}
.animations-page .experience-media,
.virtual-page .experience-media{
  position:relative;
  min-width:0;
  min-height:0;
  margin:clamp(30px,3.2vw,52px) clamp(38px,4.1vw,70px) clamp(30px,3.2vw,52px) clamp(28px,3vw,52px);
  overflow:hidden;
  background:#050505;
}
.experience-media video,
.experience-media iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.video-experience video{
  object-fit:cover;
  pointer-events:none;
}
.tour-experience iframe{background:#111}

.experience-fullscreen,
.experience-close,
.tour-close{
  position:absolute;
  z-index:12;
  border:0;
  background:transparent;
  color:#fff;
  padding:0;
}
.experience-fullscreen{
  right:18px;
  bottom:18px;
  width:28px;
  height:28px;
  cursor:pointer;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.fullscreen-glyph{position:absolute;inset:4px}
.fullscreen-glyph::before,
.fullscreen-glyph::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(#fff,#fff) left top/7px 1px no-repeat,
    linear-gradient(#fff,#fff) left top/1px 7px no-repeat,
    linear-gradient(#fff,#fff) right top/7px 1px no-repeat,
    linear-gradient(#fff,#fff) right top/1px 7px no-repeat,
    linear-gradient(#fff,#fff) left bottom/7px 1px no-repeat,
    linear-gradient(#fff,#fff) left bottom/1px 7px no-repeat,
    linear-gradient(#fff,#fff) right bottom/7px 1px no-repeat,
    linear-gradient(#fff,#fff) right bottom/1px 7px no-repeat;
}
.experience-close,
.tour-close{
  display:none;
  right:18px;
  bottom:18px;
  width:34px;
  height:34px;
  cursor:pointer;
  transition:opacity .22s ease;
  overflow:hidden;
  text-indent:-9999px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.experience-close::before,
.experience-close::after,
.tour-close::before,
.tour-close::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:27px;
  height:1px;
  background:#fff;
  transform-origin:center;
}
.experience-close::before,
.tour-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.experience-close::after,
.tour-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.experience-media.is-fullscreen,
.experience-media:fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  z-index:1000;
  background:#000;
}
.video-experience.is-fullscreen video,
.video-experience:fullscreen video{
  width:100%;height:100%;object-fit:contain;pointer-events:auto;background:#000;
}
.tour-experience.is-fullscreen iframe,
.tour-experience:fullscreen iframe{width:100%;height:100%;background:#fff}
.experience-media.is-fullscreen .experience-fullscreen,
.experience-media:fullscreen .experience-fullscreen{display:none}
.tour-experience.is-fullscreen .tour-close,
.tour-experience:fullscreen .tour-close{display:block}
.tour-experience .tour-close{opacity:1}
.video-experience .experience-close{display:none}
.video-experience.is-fullscreen .experience-close,
.video-experience:fullscreen .experience-close{
  display:block;
  opacity:1;
}
.video-experience.controls-hidden .experience-close{opacity:0;pointer-events:none}

/* Virtual tour landing becomes less panoramic and more square, while fullscreen stays untouched. */
.virtual-page .experience-media{
  width:min(94%, 1080px);
  aspect-ratio:1.42 / 1;
  height:auto;
  justify-self:center;
  align-self:center;
  margin-top:clamp(30px,3.2vw,52px);
  margin-bottom:clamp(30px,3.2vw,52px);
  margin-left:auto;
  margin-right:auto;
}
.virtual-page .experience-media iframe{
  width:100%;
  height:100%;
}

/* Studio: ABOUT is one continuous text block; only VPVA is bold. */
.studio-about-body{margin-top:18px;max-width:34ch}
.studio-about-body p{
  margin:0 0 1.05em!important;
  max-width:none!important;
  font-size:12px!important;
  line-height:1.75!important;
  letter-spacing:0;
  color:#625e58!important;
  font-weight:400;
}
.studio-about-body strong{font:inherit;font-weight:700}
.studio-direct-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-top:68px;
}
.studio-direct-contact a{
  color:#625e58;
  font-size:12px;
  line-height:1.55;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.studio-direct-contact a:hover{border-bottom-color:#625e58}
.studio-services{padding-left:56px}
.services-list{
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
  row-gap:8px;
  max-width:620px;
}
.services-list li{
  font-size:12px;
  line-height:1.45;
  color:#625e58;
}

@media(max-width:900px){
  .animations-page .experience-media,
  .virtual-page .experience-media{margin:24px 28px}
  .studio-services{padding-left:24px}
  .services-list{grid-template-columns:1fr}
}
@media(max-width:680px){
  .animations-page .experience-media,
  .virtual-page .experience-media{margin:0}
  .animations-page .experience-media{height:58vh}
  .virtual-page .experience-media{width:100%;aspect-ratio:1.12 / 1;height:auto;margin-left:auto;margin-right:auto}
  .studio-about-body p{font-size:12px!important}
}


/* v4.0 refinements */
.studio-contact-label{margin-bottom:18px;color:#77736d}
.studio-contact-label::after{margin-top:10px}

/* The drag interaction is deliberately free: arrows still snap/centre, dragging never does. */
.project-track.dragging{scroll-behavior:auto!important}

/* First mobile pass: same identity, reorganised for touch instead of simply shrinking desktop. */
@media(max-width:720px){
  :root{
    --header-h:96px;
    --pad:14px;
    --row-side:14px;
    --info-w:118px;
    --item-gap:10px;
    --row-gap:14px;
    --row-h:clamp(280px,46svh,380px);
    --row-expanded-h:min(76svh,calc(100svh - var(--header-h) - 16px));
    --arrow-box:42px;
    --arrow-offset:-10px;
  }

  .site-header{height:var(--header-h);align-items:flex-start}
  .brand{left:16px;top:14px;transform:none;width:78px;height:28px}
  .lang-toggle{display:flex;right:16px;top:18px;transform:none;gap:8px}
  .lang-toggle button{font-size:9px}
  .main-nav{
    left:16px;right:16px;top:53px;position:absolute;transform:none;
    justify-content:flex-start;gap:22px;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;padding-bottom:4px;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .nav-link{font-size:9px;flex:0 0 auto}
  main{padding-top:var(--header-h)}

  .project-list{padding:8px 14px 30px}
  .project-info-fixed{left:var(--row-side);width:var(--info-w)}
  .project-info{padding:16px 12px 16px 0}
  .project-title{font-size:14px;line-height:1.12;margin-bottom:10px}
  .project-location{font-size:8.5px;margin-bottom:0}
  .project-number{font-size:8.5px;margin-bottom:8px}
  .project-intro{display:none}
  .track-viewport{left:calc(var(--row-side) + var(--info-w) + var(--item-gap));right:var(--row-side)}
  .project-row.expanded .track-viewport{left:var(--row-side);right:var(--row-side)}
  .row-arrow{font-size:30px}
  .media-card::after{width:50px;height:50px;background:linear-gradient(#fff,#fff) center/1px 32px no-repeat,linear-gradient(#fff,#fff) center/32px 1px no-repeat}

  .animations-page .showcase-list,
  .virtual-page .showcase-list{padding:4px 14px 8px;gap:8px}
  .animations-page .showcase-row,
  .virtual-page .showcase-row{
    min-height:calc(100svh - var(--header-h) - 8px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:8px;
    align-content:start;
  }
  .showcase-meta{min-height:0;padding:18px 8px 8px}
  .showcase-meta h1{font-size:17px;margin:10px 0 7px}
  .showcase-kicker{margin-bottom:10px!important}
  .showcase-meta p{font-size:11px;line-height:1.55;max-width:36ch}
  .animations-page .experience-media,
  .virtual-page .experience-media{margin:0 auto 64px;width:100%;max-width:none;align-self:start}
  .animations-page .experience-media{aspect-ratio:16/9;height:auto}
  .virtual-page .experience-media{aspect-ratio:1.12/1;height:auto}
  .animations-page .experience-media video{width:100%;height:100%;object-fit:cover}
  .showcase-down-arrow{width:42px;height:42px;font-size:36px}

  .studio-grid{padding:4px 14px 36px;grid-template-columns:1fr;gap:14px}
  .studio-copy{min-height:auto;padding:34px 8px}
  .studio-about-body{max-width:42ch}
  .studio-direct-contact{margin-top:52px}
  .studio-image{min-height:0;aspect-ratio:4/3}
  .studio-image-secondary,.studio-contact,.studio-services{grid-column:1}
  .studio-services{padding-left:8px}
  .services-list{grid-template-columns:1fr;margin-top:16px;row-gap:7px}
}

/* v4.6 — reference-style view switch, equal top/bottom rhythm and lightbox cursor navigation */
.project-view-toggle{
  position:absolute;
  z-index:2;
  top:50%;
  left:calc(var(--pad) + var(--row-side) + var(--info-w) + var(--item-gap));
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  height:30px;
}
.project-view-toggle[hidden]{display:none!important}
.project-view-button{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  opacity:.28;
  cursor:pointer;
  transition:opacity .16s ease;
}
.project-view-button:hover{opacity:.64}
.project-view-button.active{opacity:1}
.project-view-button:focus,.project-view-button:focus-visible{outline:none;box-shadow:none}
.view-icon{display:block;position:relative;width:20px;height:18px}
/* Reference icon: one upright frame. */
.view-icon-frame::before{
  content:'';position:absolute;left:6px;top:1px;width:9px;height:16px;border:1px solid currentColor;
}
/* Reference icon: three horizontal lines. */
.view-icon-list{
  background:
    linear-gradient(currentColor,currentColor) center 3px/19px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center 9px/19px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center 15px/19px 1px no-repeat;
}

/* The large-project view follows the Artefactory-style rhythm: almost full-page
   width, a constant side margin and one large project image at a time. */
#projects[data-project-view="covers"]{
  transform:none!important;
  transition:none!important;
  will-change:auto;
}
.project-cover-list{
  --cover-side:clamp(4px,.55vw,9px);
  --cover-gap:0px;
  display:none;
  padding:8px var(--cover-side) 64px;
  background:#fff;
}
#projects[data-project-view="covers"] .project-list{display:none}
#projects[data-project-view="covers"] .project-cover-list{display:block}
.cover-project{
  position:relative;
  height:var(--cover-section-h,calc(100vh - var(--header-h) - 78px));
  margin:0 0 var(--cover-gap);
}
.cover-project:last-child{margin-bottom:0}
.cover-project-sticky{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  width:100%;
  height:calc(var(--cover-stage-h,70vh) + 26px);
  background:#fff;
}
.project-cover-card{
  width:100%;
  height:var(--cover-stage-h,70vh);
  display:block;
  position:relative;
  overflow:hidden;
  background:#f4f4f2;
  border:0;
  padding:0;
  cursor:pointer;
}
.project-cover-card,.project-cover-card *{cursor:pointer!important}
.project-cover-card img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  transform:translate3d(0,0,0);
  will-change:transform;
  pointer-events:none;
}
.cover-project-caption{
  height:var(--cover-caption-h,var(--header-h));
  display:flex;align-items:flex-start;gap:8px;margin-top:0;padding-top:9px;font-size:10px;line-height:1.25;color:#69655f;
  letter-spacing:.01em;background:#fff;
}
.cover-project-number{font-size:9px;letter-spacing:.14em;color:#918c84}
.cover-project-title{color:#111;font-weight:600}
.cover-project-meta{color:#77736d}


.project-view-toggle{display:none!important}
#projectCoverList{display:none!important}

html.project-fullscreen-open,
body.project-fullscreen-open{overflow:hidden!important;height:100%}
.project-fullscreen{
  position:fixed;inset:0;z-index:2000;display:none;background:#fff;overflow:hidden;
}
.project-fullscreen.open{display:block}
.project-fullscreen-bar{
  position:fixed;left:0;right:0;top:0;height:0;z-index:20;background:transparent;pointer-events:none;
}
.project-fullscreen-stage{position:absolute;inset:0;background:#fff}
.project-fullscreen-info{display:none!important}
.project-fullscreen-viewport{
  position:absolute;inset:0;overflow:hidden;background:#fff;z-index:2;
}
.project-fullscreen-track{
  height:100vh;display:flex;align-items:stretch;gap:16px;overflow:hidden;background:#fff;
  touch-action:pan-y;scroll-behavior:auto;cursor:zoom-in;
}
.project-fullscreen-track.dragging,.project-fullscreen-track.dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.fs-media-card{
  position:relative;flex:0 0 auto;height:100vh;
  width:min(100vw,calc(100vh * var(--ar,1.45)));
  overflow:hidden;background:#fff;border:0;display:flex;align-items:center;justify-content:center;
  cursor:zoom-in!important;
}
.fs-media-card,.fs-media-card *{cursor:zoom-in!important}
.fs-media-card img{
  display:block;width:100%;height:100%;object-fit:contain;background:#fff;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.project-fullscreen-arrow{
  position:fixed;top:50%;z-index:12;width:54px;height:92px;display:flex;align-items:center;justify-content:center;
  transform:translateY(-50%);font-size:58px;line-height:1;color:#111;background:transparent;border:0;cursor:pointer;
  text-shadow:0 0 2px rgba(255,255,255,.85),0 0 8px rgba(255,255,255,.65);
}
.project-fullscreen-arrow.prev{left:18px}
.project-fullscreen-arrow.next{right:18px}
.project-fullscreen-arrow[hidden]{display:none!important}
.project-fullscreen-arrow:focus,.project-fullscreen-arrow:focus-visible{outline:none;box-shadow:none}
.project-fullscreen-close{
  position:fixed;right:18px;top:16px;z-index:21;width:44px;height:44px;overflow:hidden;text-indent:-9999px;
  background:transparent;border:0;cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.72));
}
.project-fullscreen-close::before,.project-fullscreen-close::after{
  content:'';position:absolute;left:50%;top:50%;width:27px;height:1px;background:#111;transform-origin:center;
}
.project-fullscreen-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.project-fullscreen-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.project-zoom-layer{
  position:absolute;inset:0;background:#fff;display:none;z-index:8;overflow:hidden;
}
.project-zoom-layer.open{display:block}
.project-zoom-media{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;cursor:zoom-out!important;background:#fff}
.project-zoom-media.dragging{cursor:grabbing!important}
.project-zoom-scroll-spacer{position:relative;width:1px;min-height:100%;pointer-events:none}
.project-zoom-media img{
  position:absolute;left:0;top:0;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;
  cursor:zoom-out!important;
}
.project-zoom-media.dragging img{cursor:grabbing!important}

@media(max-width:720px){
  .project-fullscreen-arrow{width:44px;height:72px;font-size:46px}
  .project-fullscreen-arrow.prev{left:8px}.project-fullscreen-arrow.next{right:8px}
  .project-fullscreen-close{right:10px;top:10px;width:40px;height:40px}
  .project-fullscreen-track{gap:10px}
}

/* Up is always in the white gap above its media; down is always below. */
.showcase-nav-arrow{
  position:absolute;left:50%;z-index:9;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:#111;background:transparent;border:0;font-size:42px;line-height:1;opacity:.92;cursor:pointer;transition:opacity .18s ease;
}
.showcase-nav-arrow.down{transform:translate(-50%,-50%) rotate(90deg)}
.showcase-nav-arrow.up{transform:translate(-50%,-50%) rotate(-90deg)}
.showcase-nav-arrow[hidden]{display:none!important}
.showcase-nav-arrow:hover{opacity:1}
.showcase-nav-arrow:focus,.showcase-nav-arrow:focus-visible{outline:none;box-shadow:none}
.showcase-nav-arrow span{display:block;transform:translateY(1px)}

.studio-address{
  margin:13px 0 0;font-style:normal;color:#625e58;font-size:12px;line-height:1.55;
}

@media(max-width:1200px){
  .project-view-toggle{left:calc(var(--pad) + var(--row-side) + var(--info-w) + var(--item-gap))}
}

@media(max-width:900px){
  .project-view-toggle{left:calc(var(--pad) + var(--row-side) + var(--info-w) + var(--item-gap))}
  .project-cover-list{--cover-side:clamp(4px,.7vw,9px)}
}

@media(max-width:720px){
  .project-view-toggle{left:calc(var(--pad) + var(--row-side) + var(--info-w) + var(--item-gap));gap:6px;height:24px}
  .project-view-button{width:22px;height:22px}
  .view-icon{transform:scale(.9)}
  .project-cover-list{--cover-side:6px;padding-top:6px;padding-bottom:42px}
  .cover-project{margin-bottom:0}
  .cover-project-caption{margin-top:7px;font-size:9px;gap:6px;flex-wrap:wrap}
  .project-lightbox-arrow{width:48px;height:78px;font-size:48px}
  .project-lightbox-arrow.prev{left:8px}.project-lightbox-arrow.next{right:8px}
  .project-lightbox-close{right:10px;top:10px;width:40px;height:40px}
  .showcase-nav-arrow{width:42px;height:42px;font-size:36px}
  .studio-address{font-size:12px}
}




/* v0.2 — mobile-only layout pass. Desktop behaviour above 720px is unchanged. */
@media(max-width:720px){
  /* Mobile enters directly in Projects: never show the landscape cover video. */
  html.intro-active,
  body.intro-active{overflow-y:auto!important;height:auto!important}
  body.intro-active main{visibility:visible!important}
  body.intro-active .site-intro{display:none!important}
  body.intro-active .site-header{background:#fff!important}
  body.intro-active .nav-link.active{color:#111!important;font-weight:600!important;border-bottom-color:#111!important}

  /* Projects: one full-width invisible square per image, with project title below. */
  #projects{transform:none!important;transition:none!important}
  .project-list{
    padding:8px 0 36px;
    gap:28px;
  }
  .project-row,
  .project-row.expanded{
    height:auto!important;
    min-height:0;
    margin:0;
  }
  .row-shell{
    position:relative;
    height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
  }
  .track-viewport,
  .project-row.expanded .track-viewport{
    position:relative;
    order:1;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    height:100vw;
    overflow:hidden;
  }
  .project-track{
    width:100%;
    height:100%;
    gap:0;
    align-items:stretch;
    overflow-x:hidden;
    overflow-y:hidden;
    touch-action:pan-y;
    scrollbar-width:none;
  }
  .project-track::-webkit-scrollbar{display:none}
  .project-info-inline{display:none!important}
  .project-info-fixed,
  .project-row.expanded .project-info-fixed{
    position:relative;
    order:2;
    display:flex!important;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    height:124px;
    min-height:124px;
    padding:18px 24px 10px;
    justify-content:flex-start;
  }
  .project-info-fixed .project-number{font-size:9px;margin-bottom:8px}
  .project-info-fixed .project-number::after{width:20px;margin-top:8px}
  .project-info-fixed .project-title{font-size:17px;line-height:1.08;margin:8px 0 8px;max-width:22ch}
  .project-info-fixed .project-location{font-size:9px;line-height:1.35;margin:0}
  .project-info-fixed .project-intro{display:none!important}
  .media-card,
  .project-row.expanded .media-card{
    flex:0 0 100%;
    width:100%!important;
    height:100%!important;
    background:#fff;
    transform:none!important;
  }
  .media-card img,
  .media-card video{
    width:100%;
    height:100%;
    object-fit:contain!important;
    background:#fff;
  }
  .row-arrow{
    top:0;
    width:44px;
    height:100vw;
    font-size:42px;
    z-index:9;
  }
  .row-arrow.prev{left:2px}
  .row-arrow.next{right:2px}
  .row-arrow::before{display:none}

  /* Animations / Virtual Tour: first item starts below the fixed header, so its title is never hidden. */
  .animations-page .showcase-list,
  .virtual-page .showcase-list{
    padding:8px 14px 8px;
    gap:8px;
  }
  .animations-page .showcase-row,
  .virtual-page .showcase-row{
    scroll-margin-top:calc(var(--header-h) + 12px);
  }
  .showcase-meta{
    padding-top:20px;
  }

  /* Give 3DVista a portrait viewport on phones. This matches its own mobile layout
     much more closely and prevents the minimap from dominating the embedded tour. */
  .virtual-page .experience-media{
    width:100%!important;
    max-width:none!important;
    height:min(74svh,calc(100vw * 1.55))!important;
    min-height:520px;
    aspect-ratio:auto!important;
    margin:0 auto 64px!important;
  }
  .virtual-page .experience-media iframe{
    width:100%!important;
    height:100%!important;
  }
}


/* v0.3 — touch/mobile refinements. Desktop (>720px with a mouse) remains unchanged. */

/* Native horizontal finger scrolling is substantially more reliable than a
   synthetic pointer drag on touch devices. Desktop mouse dragging is untouched. */
@media (pointer:coarse){
  .project-track{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain;
  }
}

/* Give embedded 3DVista tours a larger internal viewport on touch devices.
   The iframe is rendered larger and scaled back into the same visible frame;
   3DVista therefore keeps its minimap/UI compact instead of blowing it up. */
@media (pointer:coarse) and (max-width:1100px){
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    position:absolute;
    left:0;
    top:0;
    width:150%!important;
    height:150%!important;
    transform:scale(.6666667);
    transform-origin:0 0;
  }
  .virtual-page .experience-media.is-fullscreen iframe,
  .virtual-page .experience-media:fullscreen iframe{
    position:static;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}

@media(max-width:720px){
  /* PROJECTS — the image lives in the invisible square, but horizontal images
     sit on its bottom edge. Any unused height is therefore above the image, so
     the title always reads as belonging to the image immediately above it. */
  .project-list{gap:20px}
  .project-track{scroll-behavior:auto}
  .media-card img,
  .media-card video{object-position:center bottom!important}
  .project-info-fixed,
  .project-row.expanded .project-info-fixed{
    height:108px;
    min-height:108px;
    padding:10px 24px 8px;
  }
  .project-info-fixed .project-number{margin-bottom:5px}
  .project-info-fixed .project-number::after{margin-top:6px}
  .project-info-fixed .project-title{margin:6px 0 7px}

  /* SHOWCASE NAV — keep the return arrow in the clean top transition zone,
     never inside the title/kicker/copy. JS places its exact top coordinate. */
  .showcase-nav-arrow.up{z-index:14}

  /* VIRTUAL TOUR — a deliberately shorter visible frame leaves a real white
     touch area underneath. The iframe itself keeps all interaction; the free
     area + arrow let the page move to the next tour without fighting 3DVista. */
  .virtual-page .showcase-row{
    min-height:calc(100svh - var(--header-h) - 8px);
    padding-bottom:104px;
  }
  .virtual-page .experience-media{
    position:relative;
    width:100%!important;
    max-width:none!important;
    height:clamp(320px,42svh,410px)!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:0 auto!important;
    align-self:start;
    overflow:hidden;
  }
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    position:absolute;
    left:0;
    top:0;
    width:200%!important;
    height:200%!important;
    transform:scale(.5);
    transform-origin:0 0;
  }
  .virtual-page .experience-media.is-fullscreen iframe,
  .virtual-page .experience-media:fullscreen iframe{
    position:static;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}


/* v0.4 — mobile navigation precision. Desktop layout is intentionally untouched. */
@media(max-width:720px){
  /* Project arrows follow the centre of the actually visible image rather than
     the centre of the invisible square that contains it. JS supplies the top
     position for the current image. */
  .row-arrow{
    height:64px!important;
    top:var(--vpva-mobile-arrow-y,50%);
    transform:translateY(-50%);
  }

  /* Previous-item arrow gets its own clean transition band. The project itself
     begins slightly lower, keeping the arrow clearly separate from the number/title. */
  .animations-page .showcase-row.has-up-nav .showcase-meta,
  .virtual-page .showcase-row.has-up-nav .showcase-meta{
    padding-top:62px;
  }

  /* Embedded tours work much better when 3DVista receives a genuinely landscape
     viewport. Keep a generous white area below for page swiping and the next arrow. */
  .virtual-page .experience-media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16 / 9!important;
    margin:0 auto 86px!important;
    overflow:hidden;
  }
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    transform-origin:center!important;
  }
}

/* The same iframe correction is safe on touch tablets and avoids forcing the
   tour into an artificial oversized internal viewport. Mouse/desktop is unchanged. */
@media (pointer:coarse) and (min-width:721px) and (max-width:1100px){
  .virtual-page .experience-media:not(.is-fullscreen){
    aspect-ratio:16 / 9!important;
    height:auto!important;
    min-height:0!important;
  }
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}


/* v0.5 — mobile image paging / overlay alignment only. Desktop is untouched. */
@media(max-width:720px){
  /* The + belongs to the visible image, not to the invisible square that contains it. */
  .project-row:not(.expanded) .media-card::after{
    top:var(--vpva-mobile-arrow-y,50%)!important;
  }
}


/* v0.6 — site-side 3DVista workaround for touch mobile/tablet only.
   The visible frame stays compact, but the tour itself is rendered in a much
   larger internal landscape viewport and then scaled back down. This keeps
   3DVista's own skin/floorplan proportions closer to the working desktop view
   without changing the tour export. Fullscreen remains true 1:1. */
@media (pointer:coarse) and (max-width:1100px){
  .virtual-page .experience-media:not(.is-fullscreen){
    position:relative!important;
    overflow:hidden!important;
    background:#111!important;
  }
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    position:absolute!important;
    left:0!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    border:0!important;
    transform-origin:0 0!important;
  }
  .virtual-page .experience-media.is-fullscreen iframe,
  .virtual-page .experience-media:fullscreen iframe{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}

/* Phones: roughly 3.2x the visible viewport internally. */
@media (pointer:coarse) and (max-width:720px){
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    width:320%!important;
    height:320%!important;
    transform:scale(.3125)!important;
  }
}

/* Touch tablets: enough internal room to preserve the desktop-style skin,
   without making controls unnecessarily tiny. */
@media (pointer:coarse) and (min-width:721px) and (max-width:1100px){
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    width:200%!important;
    height:200%!important;
    transform:scale(.5)!important;
  }
}


/* v0.7 — phone/tablet only. Desktop is deliberately untouched. */
.tour-mobile-preview{display:none}

@media (pointer:coarse) and (max-width:1100px){
  /* Projects: every card is exactly one visual viewport. No neighbouring sliver
     remains after arrow navigation; free finger dragging remains native. */
  .project-track .media-card{
    box-sizing:border-box!important;
    flex:0 0 var(--vpva-touch-card-width,100%)!important;
    width:var(--vpva-touch-card-width,100%)!important;
    min-width:var(--vpva-touch-card-width,100%)!important;
    max-width:var(--vpva-touch-card-width,100%)!important;
    padding:0!important;
    margin:0!important;
  }

  /* Mobile/tablet tour landing is a clean, non-interactive preview. The real
     3DVista viewer is only exposed after entering fullscreen, where its own
     responsive skin already behaves correctly. */
  .virtual-page .experience-media:not(.is-fullscreen){
    aspect-ratio:16 / 9!important;
    height:auto!important;
    min-height:0!important;
    background:#111!important;
    overflow:hidden!important;
  }
  .virtual-page .experience-media:not(.is-fullscreen) iframe{
    visibility:hidden!important;
    pointer-events:none!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
  .tour-mobile-preview{
    display:flex;
    position:absolute;
    inset:0;
    z-index:5;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#111;
    color:#fff;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
  }
  .tour-mobile-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }
  .tour-mobile-preview-label{
    font-size:10px;
    line-height:1;
    letter-spacing:.16em;
    font-weight:500;
  }
  .virtual-page .experience-media:not(.is-fullscreen) .experience-fullscreen{
    z-index:7;
  }
  .virtual-page .experience-media.is-fullscreen .tour-mobile-preview,
  .virtual-page .experience-media:fullscreen .tour-mobile-preview{
    display:none!important;
  }
  .virtual-page .experience-media.is-fullscreen iframe,
  .virtual-page .experience-media:fullscreen iframe{
    visibility:visible!important;
    pointer-events:auto!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}

@media(max-width:720px){
  /* Tiny optical correction: the plus is centred on the visible image rather
     than appearing a few pixels high. */
  .project-row:not(.expanded) .media-card::after{
    top:calc(var(--vpva-mobile-arrow-y,50%) + 5px)!important;
  }
}


/* v0.8 — final mobile/tablet project paging + fullscreen arrow optical centering.
   Desktop remains untouched. */
@media(max-width:720px){
  /* JS writes the exact visible viewport width here. This avoids browser
     percentage/rounding drift that could reveal a sliver of the next image
     after arrow navigation. Free finger swiping remains unchanged. */
  .project-row{--vpva-mobile-card-width:100%;}
  .project-track .media-card{
    flex:0 0 var(--vpva-mobile-card-width)!important;
    width:var(--vpva-mobile-card-width)!important;
    min-width:var(--vpva-mobile-card-width)!important;
    max-width:var(--vpva-mobile-card-width)!important;
  }
}

@media (pointer:coarse) and (max-width:1100px){
  /* Mobile/tablet optical centre. On browser viewports with visible top chrome,
     50% reads too high; lower the chevrons to the centre of the visible image. */
  .project-fullscreen-arrow{top:calc(50% + 30px)!important;}
}

/* v0.9 — exact mobile arrow paging landing + corrected fullscreen chevron centre. Desktop unchanged. */


/* v0.10 — native snap is enabled only while a touch-device arrow navigation is running.
   Manual finger swiping remains free because JS removes .arrow-snapping at the end.
   Desktop is untouched. */
@media (pointer:coarse) and (max-width:1100px){
  .project-track.arrow-snapping{
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
  }
  .project-track.arrow-snapping .media-card{
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
}


/* v0.12 — mobile project rhythm + touch fullscreen final mode.
   Desktop is deliberately untouched. */
@media(max-width:720px){
  /* The visible media frame follows the current image height instead of keeping
     unused white space from an invisible square. The title sits directly below
     the image and every project has the same real gap before the next image. */
  .project-list{
    gap:46px!important;
    padding-bottom:46px!important;
  }
  .project-row,
  .project-row.expanded{
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }
  .row-shell{height:auto!important;}
  .track-viewport,
  .project-row.expanded .track-viewport{
    height:var(--vpva-touch-media-h,100vw)!important;
    transition:height .18s ease;
  }
  .project-track{height:100%!important;}
  .project-track .media-card,
  .project-row.expanded .media-card{
    height:100%!important;
  }
  .project-info-fixed,
  .project-row.expanded .project-info-fixed{
    flex:0 0 108px!important;
    height:108px!important;
    min-height:108px!important;
  }
}

@media (pointer:coarse) and (max-width:1100px){
  /* Fullscreen is the final image view on touch devices. Desktop keeps the
     original second-stage/native-size zoom behaviour. */
  .project-fullscreen .fs-media-card,
  .project-fullscreen .fs-media-card *{cursor:default!important;}
  .project-zoom-layer{display:none!important;}
}


/* v0.13 — compact-touch paging/loading fixes and desktop showcase/cover refinements. */
@media (pointer:coarse) and (max-width:1100px){
  /* Phones/tablets enter directly in Projects; the desktop cover is not fetched. */
  html.intro-active,
  body.intro-active{overflow-y:auto!important;height:auto!important}
  body.intro-active main{visibility:visible!important}
  body.intro-active .site-intro{display:none!important}
  body.intro-active .site-header{background:#fff!important}
  body.intro-active .nav-link.active{color:#111!important;font-weight:600!important;border-bottom-color:#111!important}

  /* Exactly one fullscreen image owns the viewport. Native finger movement stays
     free; JS settles to the nearest image only after momentum has finished. */
  .project-fullscreen-track{
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .project-fullscreen-track::-webkit-scrollbar{display:none}
  .project-fullscreen .fs-media-card{
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
  }
}


/* v0.14 — restore the approved touch Projects tape and stabilise desktop films. */
@media (min-width:1101px), (min-width:721px) and (pointer:fine){
  /* Animation files must never determine their own landing height from delayed
     video metadata. All desktop animation stages use the approved 16:9 frame. */
  .animations-page .experience-media:not(.is-fullscreen){
    aspect-ratio:16 / 9;
    height:auto;
    align-self:center;
  }
}

@media (pointer:coarse) and (max-width:1100px){
  /* Regular Projects: one continuous tape. Every item in a project has exactly
     the same height; its width follows the original aspect ratio, with no crop.
     This removes the empty 100vw slide boxes that created white gaps mid-swipe. */
  .project-track{
    gap:0!important;
    scroll-snap-type:none!important;
  }
  .project-track .media-card,
  .project-row.expanded .media-card{
    box-sizing:border-box!important;
    flex:0 0 var(--vpva-touch-card-w,auto)!important;
    width:var(--vpva-touch-card-w,auto)!important;
    min-width:var(--vpva-touch-card-w,0)!important;
    max-width:none!important;
    height:100%!important;
    padding:0!important;
    margin:0!important;
  }
  .project-track .media-card img,
  .project-track .media-card video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
  }
}

@media(max-width:720px){
  .track-viewport,
  .project-row.expanded .track-viewport{
    height:var(--vpva-touch-media-h,100vw)!important;
    transition:none!important;
  }
  .row-arrow{height:var(--vpva-touch-media-h,100vw)!important;}
}


/* v0.15 — mobile-only Project height consistency + exact arrow centring.
   Desktop and touch fullscreen are deliberately untouched. */
@media(max-width:720px){
  /* One shared visual height for every Project, independent of the images that
     happen to belong to that row. Width continues to follow each image ratio. */
  .project-row{
    --vpva-touch-media-h:clamp(250px,60vw,310px);
  }
}


/* v0.16 — mobile Project first-image edge alignment only.
   First image starts flush with the left edge; all other approved behaviour is unchanged. */


/* v0.17 — mobile fullscreen-only interaction refinement.
   Fullscreen slides no longer follow a one-finger drag: a completed horizontal
   swipe changes directly to the adjacent image. A two-finger pinch temporarily
   magnifies the current image and returns to the approved fullscreen fit when
   the gesture ends. Desktop and regular Projects are unchanged. */
@media (pointer:coarse) and (max-width:1100px){
  .project-fullscreen-track{
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:auto!important;
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  .project-fullscreen .fs-media-card img{
    transform:scale(1);
    will-change:transform;
  }
}


/* v0.18 — desktop-only animation height guard.
   On unusually wide/short desktop viewports a 16:9 film can otherwise consume
   the white transition bands. JS applies the cap only when a real row measures
   too tight, so already-approved desktop layouts remain unchanged. */
@media (min-width:1101px), (min-width:721px) and (pointer:fine){
  .animations-page .experience-media.vpva-desktop-height-capped:not(.is-fullscreen){
    width:var(--vpva-animation-fit-w)!important;
    max-width:calc(100% - 72px)!important;
    height:auto!important;
    aspect-ratio:16 / 9!important;
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}