@font-face{font-family:'Mango Grotesque';src:url('../fonts/MangoGrotesque-Bold.otf') format('opentype');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--azul);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.pj{--display:'Mango Grotesque','League Gothic',sans-serif;--g:clamp(16px,1.4cqw,24px);
  background:var(--azul);color:#ececec;font-family:'Neue Montreal','Schibsted Grotesk',sans-serif;min-height:100vh;container-type:inline-size;width:100%}
.pj h1,.pj p{margin:0}
.disp{font-family:var(--display);font-weight:400}
.lbl{font-weight:700;font-size:clamp(14px,1.4cqw,22px);line-height:1}

.hd{position:sticky;top:0;z-index:20;background:var(--azul);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:clamp(12px,1.4cqw,22px) var(--g);font-size:clamp(24px,3.2cqw,48px);line-height:1}
.hd a:hover{opacity:.7}
.back{justify-self:start;display:flex;align-items:center;gap:.3em;min-height:44px}
.back svg{display:block;width:.7em;height:auto;transform:rotate(180deg)}
.hd-name{white-space:nowrap}
.hd-c{justify-self:end;min-height:44px;align-items:center}
.hd-desk.hd-c{display:flex}
.hd-mob{display:none}

.hero{background:#ececec;color:var(--azul);padding:clamp(28px,4cqw,64px) var(--g) clamp(20px,2.4cqw,40px);display:flex;flex-direction:column;gap:clamp(24px,4cqw,64px)}
.hero h1{font-size:clamp(64px,13cqw,220px);line-height:.85;text-wrap:balance;max-width:min(36.49ch,100%)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--g);border-top:2px solid var(--azul);padding-top:clamp(12px,1.2cqw,20px)}
.meta>div{display:flex;flex-direction:column;gap:6px}
.meta .k{font-weight:700;font-size:clamp(12px,1cqw,15px);line-height:1}
.meta .v{font-weight:500;font-size:clamp(16px,1.67cqw,26px);line-height:1.1}

.cover{position:relative;background:#ececec;aspect-ratio:16/9;max-height:90vh;width:100%;overflow:hidden}
.cover div{position:absolute;inset:0;background-size:cover;background-position:center}

.intro{padding:clamp(48px,7cqw,120px) var(--g);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,4cqw,64px);align-items:start}
.intro .big{font-size:clamp(48px,8cqw,140px);line-height:.85}
.intro p{font-weight:500;font-size:clamp(18px,2.2cqw,34px);line-height:1.1;text-indent:3em;text-wrap:pretty}

.gal{padding:0 var(--g);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4cqw,20px)}
.slot{position:relative;background:#ececec;overflow:hidden;background-size:cover;background-position:center}
.slot.wide{aspect-ratio:16/9}
.slot.tall{aspect-ratio:4/5}
.gal .wide{grid-column:1/-1}
.slot.empty::after{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--azul);opacity:.45;font-weight:500;font-size:clamp(13px,1.2cqw,18px)}

.rs{padding:clamp(48px,7cqw,120px) var(--g);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,4cqw,64px)}
.rs>div{display:flex;flex-direction:column;gap:clamp(12px,1.4cqw,20px);border-top:2px solid #ececec;padding-top:clamp(12px,1.2cqw,20px)}
.rs p{font-size:clamp(16px,1.67cqw,26px);line-height:1.15;text-wrap:pretty}
.gal2{padding:0 var(--g)}

.next{padding:clamp(48px,7cqw,120px) var(--g) 0}
.next a{display:flex;flex-direction:column;gap:clamp(8px,1cqw,16px);padding:clamp(20px,3cqw,48px);background:#ececec;color:var(--azul);border:2px solid #ececec;transition:background .35s ease,color .35s ease}
.next a:hover{background:var(--azul);color:#ececec}
.nx{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.nx .disp{font-size:clamp(44px,8cqw,140px);line-height:.85;text-wrap:balance}
.nx svg{display:block;width:clamp(36px,7cqw,110px);height:auto;flex-shrink:0}

footer{padding:clamp(48px,7cqw,120px) var(--g) clamp(16px,1.6cqw,28px);display:flex;flex-direction:column;gap:clamp(24px,3cqw,48px)}
.f1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.f1 nav{display:flex;flex-direction:column;font-weight:700;font-size:clamp(16px,2.5cqw,36px);line-height:1.05}
.f1 a:hover,.bar a:hover{opacity:.7}
.mail{font-weight:700;font-size:clamp(16px,2.5cqw,36px);line-height:1;border-bottom:3px solid #ececec;padding-bottom:4px}
footer hr{height:3px;border:0;background:#ececec;margin:0}
.name{text-align:center;font-size:27.5cqw;line-height:.86;white-space:nowrap;overflow:hidden;max-width:100%}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-weight:700;font-size:clamp(12px,2.5cqw,36px);line-height:1}
.bar a{justify-self:end;min-height:44px;display:flex;align-items:center}

@media (max-width:767px){
  .hd-desk{display:none}.hd-desk.hd-c{display:none}
  .hd-mob{display:flex}
  .hero h1{font-size:17cqw;max-width:100%}
  .gal{grid-template-columns:minmax(0,1fr)}
  .name{font-size:27cqw}
}

[hidden]{display:none!important}