.cx-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

:root{
  --blue: #0F2A43;
  --blue-mid: #3D6C93;
  --blue-pale: #C7D6E2;
  --ink: #14120F;
  --paper: #F5F1E9;
  --paper2: #EFE9DC;
  --stone: #B6AE9F;
  --stone-dark: #7A7364;
  --terra: #B9683F;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vignette: radial-gradient(ellipse at 50% 45%, transparent 65%, rgba(2,14,26,.22) 100%);
  --maxw: 930px;
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image: var(--vignette), var(--grain);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 180px 180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--blue); color:var(--paper);
  font-family:'Familjen Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}

/* ---------- Nav ---------- */
.cx-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:28px; padding-bottom:28px;
  padding-left:max(40px, calc((100% - var(--maxw))/2 + 40px));
  padding-right:max(40px, calc((100% - var(--maxw))/2 + 40px));
}
.cx-nav::before{
  content:''; position:absolute; top:0; left:0; right:0; height:170px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(15,42,67,.55) 0%,
    rgba(15,42,67,.42) 30%,
    rgba(15,42,67,.24) 55%,
    rgba(15,42,67,.1) 78%,
    rgba(15,42,67,0) 100%);
}
.cx-logo{font-family:'Fraunces'; font-weight:300; font-size:22px; letter-spacing:-.01em; color:var(--paper);}
.cx-links{display:flex; align-items:center; gap:32px;}
.cx-links a{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); opacity:.8; transition:opacity .2s;
}
.cx-links a:hover{opacity:1;}
.cx-links .cx-cta{opacity:1; border:1px solid var(--paper); padding:9px 18px;}

.cx-menu-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px; width:36px; height:36px; color:var(--paper);
}
.cx-menu-toggle span{
  display:block; width:5px; height:5px; border-radius:50%; background:currentColor;
  transition:width .3s ease, height .3s ease, border-radius .3s ease, opacity .3s ease, color .3s ease;
}
.cx-menu-toggle.active{color:var(--terra);}
.cx-menu-toggle.active span:nth-child(1){width:4px; height:20px; border-radius:2px;}
.cx-menu-toggle.active span:nth-child(2){width:4px; height:0; opacity:0;}

.cx-header-right{display:flex; align-items:center; gap:22px;}
.cx-lang-switch{display:flex; align-items:center; gap:10px;}
.cx-lang-switch a{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper); opacity:.5; transition:opacity .2s, color .2s;
}
.cx-lang-switch a:hover{opacity:.85;}
.cx-lang-switch a.active{opacity:1; color:var(--terra);}
.cx-mobile-lang-switch{flex-direction:row; gap:20px; padding:20px 20px 4px 20px;}

.cx-mobile-nav{
  display:none; flex-direction:column; position:fixed; top:0; left:0; right:0; z-index:98;
  background:var(--blue); padding-top:88px; border-bottom:1px solid rgba(245,241,233,.14);
  box-shadow:0 20px 40px rgba(2,14,26,.35);
}
.cx-mobile-nav.open{display:flex;}
.cx-mobile-nav a{
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); opacity:.85; padding:18px 20px; border-bottom:1px solid rgba(245,241,233,.1);
}
.cx-mobile-nav a.cx-cta{opacity:1; color:var(--terra);}

/* ---------- Hero slideshow ---------- */
.cx-hero{position:relative; width:100%; height:100vh; overflow:hidden; background:var(--blue);}
.cx-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  pointer-events:none;
}
.cx-slide.active{opacity:1; pointer-events:auto;}
.cx-slide video, .cx-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cx-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,42,67,.8) 0%, rgba(15,42,67,.2) 38%, rgba(15,42,67,0) 60%);
}
.cx-slide-caption{
  position:absolute; left:40px; right:40px; bottom:26%; z-index:2;
}
.cx-slide-caption .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-pale); margin:0 0 12px 0; display:block;
}
.cx-slide-caption h2{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(22px,2.8vw,42px);
  line-height:1.1; margin:0; max-width:640px; color:var(--paper);
}
.cx-slide-caption h2 a{color:inherit; transition:opacity .2s;}
.cx-slide-caption h2 a:hover{opacity:.7;}

/* dots */
.cx-dots{
  position:absolute; right:40px; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:14px;
}
.cx-dot{
  width:5px; height:5px; border-radius:50%; background:rgba(245,241,233,.35);
  border:0; padding:0; cursor:pointer; transition:background .3s, height .3s, width .3s;
}
.cx-dot.active{background:var(--paper); width:3px; height:26px; border-radius:2px;}

.cx-scroll-hint{
  position:absolute; left:50%; bottom:64px; z-index:3; transform:translateX(-50%);
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); opacity:.7; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:opacity .2s;
}
.cx-scroll-hint:hover{opacity:1;}
.cx-scroll-arrow{animation:cxArrowBounce 1.6s ease-in-out infinite;}
@keyframes cxArrowBounce{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}

/* ---------- Teaser grid below the fold ---------- */
.cx-more{padding:70px 0 110px 0; background:var(--paper); color:var(--ink);}
.cx-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--blue);}
.cx-cell{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--blue);}
.cx-cell img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.cx-cell:hover img{transform:scale(1.05);}
.cx-cell-label{
  position:absolute; left:20px; bottom:20px; z-index:2;
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
}
.cx-cell::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,42,67,.7), transparent 55%);}
.cx-more-link{
  margin-top:60px; display:inline-block;
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); border-bottom:1px solid var(--blue); padding-bottom:4px;
}

/* ---------- Catalog (list + sidebar filter + hover video preview) ---------- */
.cx-preview-bg{position:fixed; inset:0; z-index:0; background:var(--blue); pointer-events:none;}
.cx-preview-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease; transform:scale(1);
}
.cx-preview-bg video.active{opacity:.45; animation:cxPreviewZoom 14s ease-in-out infinite alternate;}
.cx-preview-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease; transform:scale(1);
}
.cx-preview-bg img.active{opacity:.45; animation:cxPreviewZoom 14s ease-in-out infinite alternate;}
@keyframes cxPreviewZoom{
  0%{transform:scale(1);}
  100%{transform:scale(1.06);}
}
.cx-preview-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,42,67,.55), rgba(15,42,67,.82));}
.cx-catalog{position:relative; z-index:1; padding:150px 0 110px 0; min-height:100vh;}
.cx-catalog-grid{display:grid; grid-template-columns:180px 1fr; gap:60px;}
.cx-filters{display:flex; flex-direction:column; gap:16px; position:sticky; top:150px; align-self:start;}
.cx-filter{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(245,241,233,.45); text-align:left; background:none; border:0; padding:0; cursor:pointer;
}
.cx-filter.active{color:var(--terra);}
.cx-proj-list{display:flex; flex-direction:column;}
.cx-proj-item{
  display:block; padding:14px 0; border-bottom:1px solid rgba(245,241,233,.14);
}
.cx-proj-item[hidden]{display:none;}
.cx-proj-cat-title{display:none;}
.cx-proj-name{
  display:block; font-family:'Fraunces'; font-weight:300; font-size:clamp(22px,3.2vw,42px);
  color:var(--paper); transition:color .25s;
}
.cx-proj-item:hover .cx-proj-name{color:var(--terra);}
.cx-proj-tags{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.cx-proj-tags span{
  font-family:'IBM Plex Mono'; font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(245,241,233,.55); border:1px solid rgba(245,241,233,.25); padding:3px 8px;
}
.cx-proj-thumb{display:none;}
.cx-proj-text{display:contents;}

/* ---------- Project detail page ---------- */
.cx-project-hero{position:relative; width:100%; height:88vh; overflow:hidden; background:var(--blue);}
.cx-project-hero video, .cx-project-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cx-project-hero.photo-only img{animation:cxKenBurns 16s ease-in-out infinite alternate;}
@keyframes cxKenBurns{0%{transform:scale(1);}100%{transform:scale(1.08);}}
.cx-project-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,42,67,.85) 0%, rgba(15,42,67,.15) 40%, rgba(15,42,67,0) 62%);
}
.cx-project-caption{
  position:absolute; bottom:56px; z-index:2;
  left:max(40px, calc((100% - var(--maxw))/2 + 40px));
  right:max(40px, calc((100% - var(--maxw))/2 + 40px));
}
.cx-project-caption .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-pale); margin:0 0 12px 0; display:block;
}
.cx-project-caption h1{
  font-family:'Fraunces'; font-weight:300; font-size:42px;
  line-height:1.05; margin:0; max-width:820px; color:var(--paper);
}
.cx-project-caption .cx-proj-tags{margin-top:16px;}
.cx-project-body{padding:80px 0 0 0; background:var(--blue); max-width:var(--maxw); margin:0 auto;}
.cx-project-body .wrap{max-width:760px; margin:0; padding-left:40px;}
.cx-project-desc{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(15px,1.3vw,18px);
  line-height:1.6; color:var(--paper); max-width:600px; margin:0 0 20px 0;
}
.cx-project-credit{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em;
  color:var(--blue-pale); opacity:.8;
}
.cx-project-back{
  position:fixed; left:40px; bottom:40px; z-index:50;
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); opacity:.75; mix-blend-mode:difference;
}
.cx-project-back:hover{opacity:1;}

.cx-project-switch{
  max-width:var(--maxw); margin:0 auto; padding:40px 40px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  border-top:1px solid rgba(245,241,233,.14); background:var(--blue);
}
.cx-switch-link{display:flex; flex-direction:column; gap:5px; max-width:45%;}
.cx-switch-link.next{align-items:flex-end; text-align:right;}
.cx-switch-link .dir{
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-pale); opacity:.7;
}
.cx-switch-link .name{
  font-family:'Fraunces'; font-weight:300; font-size:16px;
  color:var(--paper); transition:opacity .2s;
}
.cx-switch-link:hover .name{opacity:.7;}

@media (max-width:900px){
  .cx-project-switch{padding:24px 20px; gap:12px;}
  .cx-switch-link{max-width:48%;}
  .cx-project-hero{height:70vh;}
  .cx-project-caption{left:20px; right:20px; bottom:36px;}
  .cx-project-caption h1{font-size:30px;}
  .cx-project-body .wrap{margin:0; padding-left:20px; padding-right:20px;}
  .cx-project-back{left:20px; bottom:20px;}
}

@media (max-width:700px){
  .cx-catalog{padding-top:120px;}
  .cx-catalog-grid{grid-template-columns:1fr; gap:0;}
  .cx-filters{display:none;}
  .cx-proj-item[hidden]{display:flex;}
  .cx-proj-item{display:flex; align-items:center; gap:14px;}
  .cx-proj-thumb{
    display:block; width:52px; height:52px; border-radius:8px; object-fit:cover;
    flex-shrink:0;
  }
  .cx-proj-text{display:block;}
  .cx-proj-cat-title{
    display:block; margin-top:44px; padding-top:24px;
    border-top:1px solid rgba(245,241,233,.16);
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--terra);
  }
  .cx-proj-list .cx-proj-cat-title:first-child{margin-top:0; padding-top:0; border-top:0;}
}

/* ---------- Project media (ordered video/photo blocks, same layout logic as Web) ---------- */
.cx-project-media{max-width:var(--maxw); margin:0 auto; padding:56px 40px 100px 40px; background:var(--blue);}
.cx-project-media > * + *{margin-top:56px;}

.cx-video-full{display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; justify-content:center;}
.cx-video-wrap{flex:1 1 100%; width:100%;}
.cx-video-full .cx-video-wrap:has(.vertical){width:300px; max-width:100%; flex:0 1 300px;}
.cx-video-full-fill{justify-content:stretch;}
.cx-video-full-fill .cx-video-wrap:has(.vertical){width:auto; min-width:220px; max-width:none; flex:1 1 0;}
@media (max-width:700px){
  .cx-video-full-fill .cx-video-wrap:has(.vertical){flex:1 1 100%;}
}
.cx-video-full-4{display:grid; grid-template-columns:repeat(4,1fr); gap:2px;}
.cx-video-full-4 .cx-video-wrap,
.cx-video-full-4 .cx-video-wrap:has(.vertical){width:auto; max-width:none; flex:none;}
@media (max-width:900px){
  .cx-video-full-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .cx-video-full-4{grid-template-columns:1fr;}
}

.cx-video-card{
  position:relative; aspect-ratio:16/9; cursor:pointer; overflow:hidden; background:var(--blue);
}
.cx-video-card.vertical{aspect-ratio:9/16;}
.cx-video-card img{width:100%; height:100%; object-fit:cover; display:block;}
.cx-video-card .veil{position:absolute; inset:0; background:rgba(15,42,67,.32); transition:background .25s;}
.cx-video-card:hover .veil{background:rgba(15,42,67,.12);}
.cx-video-card .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--paper); transition:transform .25s;
}
.cx-video-card:hover .play{transform:scale(1.08);}
.cx-video-card iframe{width:100%; height:100%; border:0; position:absolute; inset:0;}

.cx-project-gallery{
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
}
.cx-project-gallery img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in;}
@media (max-width:900px){
  .cx-project-media{padding:40px 20px 70px 20px;}
  .cx-project-gallery{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(15,42,67,.97);
  display:flex; align-items:center; justify-content:center; cursor:zoom-out;
}
.lightbox img{max-width:88vw; max-height:86vh; object-fit:contain; cursor:default;}
.lightbox-close{
  position:absolute; top:24px; right:32px; background:none; border:0;
  color:var(--paper); font-size:36px; cursor:pointer; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:0;
  color:var(--paper); cursor:pointer; padding:20px; opacity:.7;
}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:10px;}
.lightbox-next{right:10px;}
.cx-project-gallery img{cursor:zoom-in;}

/* ---------- Qui som ---------- */
.cx-about-hero{padding:170px 0 90px 0; background:var(--blue);}
.cx-about-hero .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-pale); display:block; margin:0 0 18px 0;
}
.cx-about-hero h1{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(24px,3.2vw,42px);
  line-height:1.15; margin:0 0 40px 0; width:100%; color:var(--paper);
}
.cx-about-lead{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(15px,1.2vw,17px);
  line-height:1.6; color:var(--blue-pale); max-width:580px; margin:0 0 16px 0;
}
.cx-about-lead a{border-bottom:1px solid transparent; transition:border-color .2s;}
.cx-about-lead a:hover{border-bottom-color:var(--paper);}
.cx-about-grid{display:grid; grid-template-columns:1fr 260px; gap:50px; align-items:start;}
.cx-about-text .cx-about-lead:last-child{margin-bottom:0;}
.cx-about-photo{width:100%;}
.cx-about-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:0% 22%; display:block;}

.cx-values{padding:90px 0; background:var(--paper); color:var(--ink);}
.cx-values .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone-dark); display:block; margin:0 0 14px 0;
}
.cx-values h2{font-family:'Fraunces'; font-weight:300; font-size:clamp(26px,3vw,40px); margin:0 0 50px 0;}
.cx-values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px;}
.cx-value-item .num{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--terra); display:block; margin-bottom:14px;
}
.cx-value-item h4{font-family:'Fraunces'; font-weight:400; font-size:19px; margin:0 0 10px 0;}
.cx-value-item p{font-size:14px; line-height:1.55; color:var(--stone-dark); margin:0;}

.cx-making{padding:90px 0 110px 0; background:var(--paper); color:var(--ink);}
.cx-making .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone-dark); display:block; margin:0 0 14px 0;
}
.cx-making h2{font-family:'Fraunces'; font-weight:300; font-size:clamp(26px,3vw,40px); margin:0 0 40px 0;}
.cx-making-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cx-making-grid img{width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; cursor:zoom-in;}

@media (max-width:900px){
  .cx-about-hero{padding:120px 0 60px 0;}
  .cx-values-grid{grid-template-columns:repeat(2,1fr); gap:32px;}
  .cx-making-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Contact ---------- */
.cx-contact{padding:120px 0; background:var(--blue);}
.cx-contact .cx-cat{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-pale); display:block; margin:0 0 16px 0;
}
.cx-contact h2{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(28px,3.6vw,48px);
  line-height:1.1; margin:0 0 18px 0; max-width:640px; color:var(--paper);
}
.cx-contact .cx-lead{
  font-family:'Fraunces'; font-weight:300; font-size:19px; color:var(--blue-pale);
  max-width:560px; margin:0 0 60px 0;
}
.cx-contact-grid{max-width:none;}
.cx-contact-info{display:flex; align-items:stretch;}
.cx-contact-info .row{
  padding:0 40px; margin:0; border-right:1px solid rgba(245,241,233,.2);
  display:flex; flex-direction:column; justify-content:center;
}
.cx-contact-info .row:first-child{padding-left:0;}
.cx-contact-info .row:last-child{border-right:0;}
.cx-contact-info .lab{
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-pale); opacity:.7; margin-bottom:6px;
}
.cx-contact-info .val{font-family:'Familjen Grotesk'; font-size:16px; color:var(--paper); white-space:nowrap;}
.cx-contact-info a.val{border-bottom:1px solid transparent; transition:border-color .2s;}
.cx-contact-info a.val:hover{border-bottom-color:var(--paper);}

@media (max-width:900px){
  .cx-contact{padding:80px 0;}
  .cx-contact-info{flex-direction:column; align-items:flex-start;}
  .cx-contact-info .row{
    padding:16px 0; width:100%; border-right:0; border-bottom:1px solid rgba(245,241,233,.14);
  }
  .cx-contact-info .row:first-child{padding-left:0;}
  .cx-contact-info .row:last-child{border-bottom:0;}
}

/* ---------- Footer ---------- */
.cx-foot{padding:16px 0; background:var(--paper); color:var(--stone-dark); border-top:1px solid rgba(15,42,67,.12);}
.cx-foot .wrap{display:flex; align-items:center; justify-content:space-between;}
.cx-foot-mono{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em;}

@media (max-width:900px){
  .cx-nav{padding:20px;}
  .cx-links{display:none;}
  .cx-header-right .cx-lang-switch{display:none;}
  .cx-menu-toggle{display:flex;}
  .wrap{padding:0 20px;}
  .cx-slide-caption{left:20px; right:20px; bottom:max(170px, calc(170px + env(safe-area-inset-bottom, 0px))); flex-direction:column; align-items:flex-start; gap:14px;}
  .cx-slide-credit{text-align:left;}
  .cx-dots{right:16px;}
  .cx-scroll-hint{display:none;}
  .cx-grid{grid-template-columns:repeat(2,1fr);}
  .cx-foot .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
  .cx-about-grid{grid-template-columns:1fr; gap:36px;}
  .cx-about-photo{max-width:360px; margin:0 auto;}
}

/* ---------- Easter egg: overscroll camera mascot ---------- */
body.cx-bounce{animation:cxBodyBounce 1.3s cubic-bezier(.22,.85,.3,1.15);}
@keyframes cxBodyBounce{
  0%{transform:translateY(0);}
  28%{transform:translateY(96px);}
  52%{transform:translateY(62px);}
  74%{transform:translateY(82px);}
  100%{transform:translateY(0);}
}

.cx-camera-mascot{
  position:fixed; top:10px; left:50%; z-index:9999;
  transform:translate(-50%, -110px) scale(.55) rotate(-6deg);
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 6px 16px rgba(2,14,26,.4));
  transition:transform .9s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
.cx-camera-mascot.enter{
  transform:translate(-50%, 34px) scale(1) rotate(0deg);
  opacity:1;
}
.cx-camera-mascot.leave{
  transform:translate(-50%, -90px) scale(.65) rotate(6deg);
  opacity:0;
  transition:transform .65s cubic-bezier(.5,0,.75,0), opacity .55s ease;
}
.cx-cam-leg{transform-box:fill-box; transform-origin:center; animation:cxLegWiggle 1s ease-in-out infinite;}
.cx-cam-leg-r{animation-delay:.15s;}
@keyframes cxLegWiggle{
  0%, 100%{transform:translateY(0) scaleY(1);}
  50%{transform:translateY(-1.5px) scaleY(.85);}
}
.cx-cam-lens{transform-box:fill-box; transform-origin:center; transition:transform .12s ease;}
.cx-camera-mascot.shutter .cx-cam-lens{transform:scaleY(.15);}
.cx-cam-pupil{transform-box:fill-box; transform-origin:center; animation:cxEyeLook 1.8s ease-in-out infinite;}
.cx-cam-pupil-r{animation-delay:.2s;}
@keyframes cxEyeLook{
  0%, 100%{transform:translateX(0);}
  50%{transform:translateX(1.4px);}
}
.cx-cam-lid{opacity:0; transition:opacity .08s ease;}
.cx-camera-mascot.shutter .cx-cam-lid{opacity:1;}
.cx-cam-flash-burst{
  transform-box:fill-box; transform-origin:center;
  fill:#fff; opacity:0;
}
.cx-camera-mascot.shutter .cx-cam-flash-burst{
  animation:cxLensFlash .7s ease-out forwards;
}
@keyframes cxLensFlash{
  0%{opacity:0; transform:scale(1);}
  25%{opacity:1; transform:scale(4.5);}
  100%{opacity:0; transform:scale(9);}
}

.cx-flash-white-soft{
  position:fixed; inset:0; z-index:9998; background:#fff; opacity:0; pointer-events:none;
}
.cx-flash-white-soft.pulse{animation:cxSoftFlash .6s ease-out;}
@keyframes cxSoftFlash{
  0%{opacity:0;}
  28%{opacity:.3;}
  100%{opacity:0;}
}

/* ---------- Project pages: paper (off-white) theme, catalog stays blue ---------- */
body.cx-page-project{background:var(--paper); color:var(--ink);}
body.cx-page-project .cx-project-body{background:var(--paper);}
body.cx-page-project .cx-project-desc{color:var(--ink);}
body.cx-page-project .cx-project-credit{color:var(--stone-dark);}
body.cx-page-project .cx-project-media{background:var(--paper);}
body.cx-page-project .cx-project-switch{
  background:var(--paper);
  border-top:1px solid rgba(15,42,67,.14);
}
body.cx-page-project .cx-switch-link .dir{color:var(--stone-dark); opacity:.85;}
body.cx-page-project .cx-switch-link .name{color:var(--ink);}
