/*
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.1.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 video{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* 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}
}