/* styles.css */
:root{--paper:#e9e6de;--ink:#161614;--muted:#6e6b63;--line:rgba(22,22,20,.25);--serif:Georgia,"Times New Roman",serif;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}button,a{color:inherit}a{text-decoration:none}button{font:inherit}.loader{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:opacity .7s,visibility .7s}.loader span{font-family:var(--serif);font-size:42px;font-style:italic}.loaded .loader{opacity:0;visibility:hidden}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;padding:18px 24px;display:flex;align-items:flex-start;justify-content:space-between;color:#fff;mix-blend-mode:difference;text-transform:uppercase;letter-spacing:.13em;font-size:10px}.brand{display:grid;gap:1px}.brand span{opacity:.6}.site-header nav{display:flex;gap:24px}.site-header a{border-bottom:1px solid transparent}.site-header a:hover{border-color:currentColor}.menu-button{display:none;background:none;border:0;color:inherit;text-transform:uppercase;letter-spacing:.13em;font-size:10px}.hero{position:relative;min-height:100svh;color:#fff;overflow:hidden;background:#171313}.hero-art{position:absolute;inset:0;background:radial-gradient(circle at 64% 35%,#c17847 0,#75422e 18%,#2c2522 47%,#0b0c0e 78%)}.hero-art:after,.project-art:after,.dialog-art:after{content:"";position:absolute;inset:0;opacity:.24;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.hero-art span{position:absolute;width:34vw;height:75vh;right:20%;top:9%;border:1px solid rgba(255,255,255,.25);border-radius:50%;transform:rotate(-15deg);filter:blur(1px)}.hero-copy{position:relative;z-index:1;min-height:100svh;padding:120px 24px 30px;display:flex;flex-direction:column;justify-content:flex-end}.kicker{margin:0 0 18px;text-transform:uppercase;letter-spacing:.15em;font-size:10px}.hero h1,.about h2,.contact h2,.dialog-title{margin:0;font:400 clamp(60px,11vw,170px)/.82 var(--serif);letter-spacing:-.075em}.hero h1 em,.about h2 em,.contact h2 em{font-weight:400}.hero-bottom{margin-top:38px;display:flex;align-items:end;justify-content:space-between;gap:40px}.hero-bottom p{max-width:470px;margin:0;font-size:clamp(15px,1.6vw,21px)}.circle-link{width:52px;height:52px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;font-size:18px;transition:.25s}.circle-link:hover{background:#fff;color:#111}.work,.about,.contact{padding:110px 24px}.section-title{padding-bottom:13px;margin-bottom:42px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;font-size:10px}.section-title h2{margin:0;font:inherit}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:70px 18px}.project{grid-column:span 5;padding:0;border:0;background:none;text-align:left;cursor:pointer}.project:nth-child(4n+2),.project:nth-child(4n+3){grid-column:span 6}.project-wide{grid-column:3/span 8}.project-art{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:radial-gradient(circle at 63% 40%,var(--c),var(--b) 32%,var(--a) 75%)}.project-art:before{content:"";position:absolute;inset:10%;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:50%;transform:rotate(18deg);transition:transform .7s}.project-art i{position:absolute;z-index:2;left:12px;top:10px;color:#fff;font-size:9px;font-style:normal;letter-spacing:.12em}.project-info{display:flex;justify-content:space-between;gap:20px;padding-top:13px}.project-info strong{font:400 clamp(21px,2.7vw,36px)/1 var(--serif);letter-spacing:-.035em}.project-info small{max-width:150px;color:var(--muted);text-transform:uppercase;text-align:right;letter-spacing:.1em;font-size:8px}.project:hover .project-art:before{transform:rotate(30deg) scale(1.12)}.project:hover .project-art{filter:brightness(.84)}.about{background:var(--ink);color:var(--paper)}.about-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:70px}.about h2{font-size:clamp(64px,10vw,150px)}.about-copy{max-width:790px}.about-copy p{margin:0 0 28px}.large-copy{font:400 clamp(25px,3.5vw,52px)/1.08 var(--serif);letter-spacing:-.04em}.pills{display:flex;flex-wrap:wrap;gap:7px}.pills span{padding:7px 10px;border:1px solid rgba(255,255,255,.3);border-radius:99px;text-transform:uppercase;font-size:8px;letter-spacing:.1em}.contact{min-height:85svh;display:flex;flex-direction:column;justify-content:space-between}.contact h2{font-size:clamp(58px,10vw,150px)}.contact-row{display:flex;justify-content:space-between;gap:40px;padding-top:18px;margin-top:80px;border-top:1px solid var(--line)}.contact-row p{max-width:390px;margin:0}.contact-row div{display:grid;justify-items:end;gap:3px;font-size:clamp(18px,2.4vw,32px)}.contact-row a{border-bottom:1px solid currentColor}footer{padding:17px 24px;display:flex;justify-content:space-between;border-top:1px solid var(--line);text-transform:uppercase;font-size:9px;letter-spacing:.12em}footer div{display:flex;gap:18px}.project-dialog{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#fff;background:#121210}.project-dialog::backdrop{background:#121210}.dialog-close{position:fixed;z-index:3;right:20px;top:18px;padding:8px 12px;border:1px solid rgba(255,255,255,.4);border-radius:99px;color:#fff;background:rgba(0,0,0,.3);text-transform:uppercase;font-size:9px;letter-spacing:.12em;cursor:pointer}.dialog-art{position:relative;height:60vh;background:radial-gradient(circle at 60% 42%,var(--c),var(--b) 34%,var(--a) 76%)}.dialog-art span{position:absolute;width:35vw;height:43vh;left:33%;top:8%;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:50%;transform:rotate(24deg)}.dialog-copy{padding:70px 24px 100px}.dialog-title{max-width:1000px;font-size:clamp(54px,9vw,130px)}.dialog-intro{max-width:670px;margin:38px 0;font-size:clamp(18px,2.2vw,28px)}.dialog-credits{max-width:670px;margin:0 0 42px;border-top:1px solid rgba(255,255,255,.25)}.dialog-credits div{display:grid;grid-template-columns:150px 1fr;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.15)}.dialog-credits dt{color:#aaa;text-transform:uppercase;font-size:9px;letter-spacing:.12em}.dialog-credits dd{margin:0}.text-link{border-bottom:1px solid currentColor}.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}@media(max-width:760px){.site-header{padding:15px 16px}.site-header nav{display:none;position:fixed;inset:0;background:#111;color:#fff;mix-blend-mode:normal;place-content:center;gap:22px;text-align:center;font:400 42px var(--serif)}.site-header nav.open{display:grid}.menu-button{display:block;position:relative;z-index:2}.hero-copy{padding:100px 16px 22px}.hero h1{font-size:clamp(57px,19vw,90px)}.hero-bottom{display:block}.circle-link{margin-top:25px}.work,.about,.contact{padding:78px 16px}.project-grid{display:block}.project{width:100%;margin-bottom:48px}.project-info{display:block}.project-info small{display:block;margin-top:7px;text-align:left}.about-grid{display:block}.about h2{margin-bottom:42px}.contact{min-height:75svh}.contact-row{display:block}.contact-row div{justify-items:start;margin-top:35px;font-size:18px}footer{padding:16px;display:block}footer div{margin-top:8px}.dialog-art{height:44vh}.dialog-copy{padding:55px 16px}.dialog-credits div{grid-template-columns:100px 1fr}}

/* single-page.css */
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#fff;font-family:Arial,Helvetica,sans-serif}.viewer{position:relative;width:100%;height:100svh;overflow:hidden;background:#111}.viewer-image{position:absolute;inset:-3%;overflow:hidden;background:radial-gradient(circle at calc(62% + var(--mx,0%)) calc(38% + var(--my,0%)),var(--c),var(--b) 32%,var(--a) 76%);transition:opacity .4s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),background .7s}.viewer-image:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 30%,transparent 60%,rgba(0,0,0,.72))}.viewer-image:after{content:"";position:absolute;z-index:3;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");animation:grain .2s steps(2) infinite}.viewer.changing .viewer-image{opacity:.15;transform:scale(1.06) rotate(.3deg)}.art-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);border-radius:50%;mix-blend-mode:screen;opacity:.5;transition:border-color .7s}.orbit-one{width:48vw;height:72vh;left:29%;top:9%;animation:orbit 18s linear infinite}.orbit-two{width:27vw;height:50vh;left:39%;top:18%;animation:orbitBack 13s linear infinite}.art-light{position:absolute;width:34vw;height:34vw;right:-6vw;top:-10vw;border-radius:50%;background:var(--c);opacity:.12;filter:blur(35px);animation:breathe 7s ease-in-out infinite}.viewer-header{position:absolute;z-index:4;top:0;left:0;width:100%;padding:19px 24px;display:flex;justify-content:space-between;align-items:flex-start;text-transform:uppercase;font-size:9px;letter-spacing:.13em}.identity{display:grid;gap:2px;color:#fff;text-decoration:none}.identity span{opacity:.65}.info-button,.info-close{padding:0;border:0;color:#fff;background:none;text-transform:uppercase;font-size:9px;letter-spacing:.13em;cursor:pointer}.project-copy{position:absolute;z-index:3;left:24px;right:24px;bottom:130px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;transition:opacity .25s,transform .45s}.viewer.changing .project-copy{opacity:0;transform:translateY(18px)}.project-number,.project-meta p{margin:0 0 8px;text-transform:uppercase;font-size:8px;letter-spacing:.13em}.project-copy h1{max-width:900px;margin:0;overflow:hidden;font:400 clamp(52px,8vw,125px)/.86 Georgia,"Times New Roman",serif;letter-spacing:-.065em}.project-copy h1 span{display:block;animation:titleIn .75s cubic-bezier(.2,.75,.2,1)}.project-meta{display:grid;justify-items:end;text-align:right}.original-link{margin-top:8px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.65);text-transform:uppercase;font-size:8px;letter-spacing:.13em}.project-switcher{position:absolute;z-index:4;left:0;bottom:0;width:100%;height:92px;display:flex;overflow-x:auto;overscroll-behavior-x:contain;background:rgba(9,9,9,.66);backdrop-filter:blur(18px);scrollbar-width:none}.project-switcher::-webkit-scrollbar{display:none}.project-choice{position:relative;flex:1 0 135px;padding:15px 15px 13px;border:0;border-right:1px solid rgba(255,255,255,.13);color:#fff;background:transparent;text-align:left;cursor:pointer;transition:background .2s,transform .3s}.project-choice span{display:block;margin-bottom:22px;opacity:.45;font-size:8px;letter-spacing:.12em}.project-choice strong{font-weight:400;text-transform:uppercase;font-size:8px;letter-spacing:.12em;white-space:nowrap}.project-choice:after{content:"";position:absolute;left:0;right:100%;top:0;height:2px;background:#fff;transition:right .45s}.project-choice:hover,.project-choice.active{background:rgba(255,255,255,.08)}.project-choice:hover{transform:translateY(-3px)}.project-choice.active:after{right:0}.progress-line{position:absolute;z-index:5;left:0;right:0;bottom:92px;height:1px;background:rgba(255,255,255,.15)}.progress-line span{display:block;width:10%;height:1px;background:#fff;transition:transform .65s cubic-bezier(.2,.75,.2,1)}.info-panel{position:absolute;z-index:6;top:0;right:0;width:min(520px,100%);height:100%;padding:22px 24px 35px;display:flex;flex-direction:column;justify-content:space-between;color:#171714;background:#e9e6de;transform:translateX(100%);transition:transform .55s cubic-bezier(.7,0,.2,1)}.info-panel.open{transform:none}.info-close{align-self:flex-end;color:#171714}.info-panel a{display:block;width:max-content;color:#171714;text-decoration:none;border-bottom:1px solid currentColor}.label{margin:0 0 20px;text-transform:uppercase;font-size:8px;letter-spacing:.13em}.info-intro{margin:0 0 25px;font:400 clamp(28px,3.5vw,48px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.04em}.info-panel div>p:last-child{max-width:430px}.cursor{position:fixed;z-index:20;left:0;top:0;width:54px;height:54px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s,background .2s;mix-blend-mode:difference}.cursor span{text-transform:uppercase;font-size:7px;letter-spacing:.12em}.cursor.visible{opacity:1}.cursor.active{width:72px;height:72px;background:#fff;color:#111}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes orbitBack{to{transform:rotate(-360deg)}}@keyframes breathe{50%{transform:scale(1.25);opacity:.2}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(1%,-1%)}50%{transform:translate(-1%,1%)}75%{transform:translate(1%,1%)}}@keyframes titleIn{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}@media(max-width:760px){.viewer-header{padding:15px 14px}.project-copy{left:14px;right:14px;bottom:106px;display:block}.project-copy h1{font-size:clamp(43px,14vw,68px)}.project-meta{display:none}.project-number{margin-bottom:6px}.project-switcher{height:78px}.project-choice{flex-basis:112px;padding:11px}.project-choice span{margin-bottom:17px}.info-panel{padding:17px 16px 25px}.progress-line{bottom:78px}.cursor{display:none}.orbit-one{width:90vw;height:58vh;left:4%;top:15%}.orbit-two{width:55vw;height:36vh;left:25%;top:25%}}

/* identity-fixes.css */
.identity {
  gap: 5px;
}

.identity strong {
  font: 400 clamp(22px, 3vw, 46px) / .9 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  text-transform: none;
}

.identity span {
  opacity: .75;
}

.project-copy h1 {
  max-width: 1050px;
  margin: 0 -10px -14px;
  padding: 0 10px 18px;
  line-height: .98;
}

.progress-line span {
  width: 14.2857%;
}

/* about-art.css */
.info-panel {
  width: min(760px, 100%);
  padding: 22px 26px 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(161, 86, 54, .22), transparent 33%),
    #e9e6de;
}

.info-panel::before {
  content: "";
  position: absolute;
  width: 55vh;
  height: 55vh;
  right: -25vh;
  top: 18vh;
  border: 1px solid rgba(23, 23, 20, .18);
  border-radius: 50%;
  transition: transform 1.2s cubic-bezier(.2, .75, .2, 1);
}

.info-panel.open::before {
  transform: translateX(-12vh) rotate(25deg);
}

.info-mark {
  position: absolute;
  right: 18px;
  bottom: -45px;
  color: rgba(23, 23, 20, .055);
  font: italic 400 clamp(190px, 28vw, 360px) / 1 Georgia, "Times New Roman", serif;
  letter-spacing: -.12em;
  pointer-events: none;
}

.info-main,
.info-contact,
.info-close {
  position: relative;
  z-index: 1;
}

.info-main {
  margin-top: auto;
  margin-bottom: auto;
}

.info-portrait {
  width: clamp(118px, 17vw, 165px);
  aspect-ratio: 1;
  margin: 0 0 22px;
  overflow: hidden;
  background: #171714;
}

.info-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 38%;
  filter: grayscale(1) contrast(1.06);
}

.info-intro {
  margin: 0 0 28px;
  font: 400 clamp(48px, 6vw, 92px) / .88 Georgia, "Times New Roman", serif;
  letter-spacing: -.07em;
}

.info-intro em {
  font-weight: 400;
}

.info-body {
  max-width: 520px;
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.55;
}

.info-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 590px;
}

.info-disciplines span {
  padding: 6px 9px;
  border: 1px solid rgba(23, 23, 20, .3);
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 7px;
  letter-spacing: .13em;
}

.info-contact {
  padding-top: 13px;
  border-top: 1px solid rgba(23, 23, 20, .24);
}

.info-contact div {
  display: flex;
  gap: 22px;
}

.info-contact a {
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .13em;
}

.info-panel.open .info-main,
.info-panel.open .info-contact {
  animation: infoIn .8s .18s both cubic-bezier(.2, .75, .2, 1);
}

.info-panel.open .info-contact {
  animation-delay: .28s;
}

@keyframes infoIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .info-panel {
    padding: 17px 16px 20px;
  }

  .info-portrait {
    width: 112px;
    margin-bottom: 16px;
  }

  .info-intro {
    font-size: clamp(46px, 16vw, 70px);
  }

  .info-body {
    font-size: 13px;
  }

  .info-contact div {
    gap: 14px;
  }
}

/* raised-project-meta-and-credits.css */
@media (min-width: 761px) {
  .project-meta,
  .viewer.loverboy-active .project-meta {
    bottom: 34px;
  }

  .credits-button {
    bottom: 146px;
  }

  .credits-close {
    bottom: 54px;
  }
}

/* cinematic-info-portrait-final.css */
.info-panel {
  isolation: isolate;
  background:
    linear-gradient(90deg, #e9e6de 0%, rgba(233,230,222,.98) 48%, rgba(233,230,222,.62) 72%, rgba(233,230,222,.35) 100%),
    #e9e6de;
}

.info-portrait {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 34%;
  width: auto;
  height: auto;
  margin: 0;
  display: block !important;
  border-radius: 0;
  background:
    linear-gradient(90deg, #e9e6de 0%, rgba(233,230,222,.7) 28%, rgba(233,230,222,.08) 68%, rgba(233,230,222,.18) 100%),
    linear-gradient(0deg, rgba(233,230,222,.45), transparent 35%),
    url("media/Ruben_Info.jpg") 54% 42% / cover no-repeat;
  filter: grayscale(1) contrast(1.08);
  opacity: .48;
  transform: scale(1.035);
  transform-origin: 60% 45%;
  transition: opacity .65s ease, transform 7s cubic-bezier(.2,.65,.2,1);
  pointer-events: none;
}

.info-panel.open .info-portrait {
  opacity: .62;
  transform: scale(1);
}

.info-panel::before {
  background: none !important;
  opacity: 0 !important;
}

.info-main,
.info-contact,
.info-close {
  position: relative;
  z-index: 1;
}

.info-mark {
  display: none;
}

@media (max-width: 760px) {
  .info-panel {
    background:
      linear-gradient(180deg, rgba(233,230,222,.65) 0%, #e9e6de 42%, #e9e6de 100%),
      #e9e6de;
  }

  .info-portrait {
    inset: 0 0 auto;
    width: auto;
    height: 44vh;
    background:
      linear-gradient(180deg, rgba(233,230,222,.15) 0%, rgba(233,230,222,.3) 55%, #e9e6de 100%),
      url("media/Ruben_Info.jpg") 52% 38% / cover no-repeat;
    opacity: .4;
  }

  .info-panel.open .info-portrait {
    opacity: .52;
  }
}

/* restrained-info-portrait.css */
.info-panel {
  background:
    radial-gradient(circle at 85% 15%, rgba(161,86,54,.16), transparent 34%),
    #e9e6de;
}

.info-portrait {
  position: absolute;
  z-index: 1;
  inset: 76px 26px auto auto;
  width: clamp(120px, 16vw, 175px);
  height: clamp(170px, 23vw, 245px);
  margin: 0;
  display: block !important;
  overflow: hidden;
  border-radius: 0;
  background: none;
  filter: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s .18s ease, transform .65s .18s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

.info-panel.open .info-portrait {
  opacity: .72;
  transform: none;
}

.info-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 54% 38%;
  filter: grayscale(1) contrast(1.06);
}

.info-main {
  padding-right: clamp(130px, 18vw, 200px);
}

.info-mark {
  display: block;
}

@media (max-width: 760px) {
  .info-panel {
    background:
      radial-gradient(circle at 85% 10%, rgba(161,86,54,.13), transparent 30%),
      #e9e6de;
  }

  .info-portrait {
    inset: 62px 16px auto auto;
    width: 92px;
    height: 128px;
  }

  .info-panel.open .info-portrait {
    opacity: .62;
  }

  .info-main {
    padding-right: 0;
  }
}

/* integrated-info-portrait.css */
.info-portrait {
  inset: 0 0 0 auto;
  width: 34%;
  height: 100%;
  opacity: 0;
  transform: translateX(12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 28%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 28%, #000 70%);
}

.info-panel.open .info-portrait {
  opacity: .32;
  transform: none;
}

.info-portrait img {
  object-position: 55% 40%;
}

.info-main {
  padding-right: 0;
}

/* full-info-photo.css */
.info-panel {
  isolation: isolate;
  background: #e9e6de;
}

.info-full-photo {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 66%;
  background: url("media/Ruben_Info.jpg") 50% 0 / 100% auto no-repeat;
  filter: grayscale(1) contrast(1.04);
  opacity: .75;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 68% 79%, 36% 73%, 0 82%);
  pointer-events: none;
}

.info-full-photo::after {
  display: none;
}

.info-panel::after {
  content: "";
  position: absolute;
  z-index: .5;
  left: 0;
  right: 0;
  top: calc(66% - 220px);
  height: 95px;
  background:
    linear-gradient(176deg, transparent 0 48%, rgba(16,24,23,.2) 48.5%, transparent 49.2%),
    linear-gradient(184deg, transparent 0 61%, rgba(183,255,74,.42) 61.3%, transparent 61.7%);
  pointer-events: none;
}

.info-main,
.info-contact,
.info-close {
  position: relative;
  z-index: 1;
}

.info-main {
  margin-top: 40vh;
}

.info-mark {
  display: none;
}

@media (max-width: 760px) {
  .info-full-photo {
    height: 58%;
    background: url("media/Ruben_Info.jpg") 50% 0 / 100% auto no-repeat;
  }

  .info-main {
    margin-top: 32vh;
  }

  .info-panel::after {
    top: calc(58% - 170px);
    height: 78px;
  }
}

@media (max-width: 760px) {
  .info-portrait {
    inset: 0 0 0 auto;
    width: 42%;
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, #000 100%);
  }

  .info-panel.open .info-portrait {
    opacity: .2;
  }
}

/* clean-info-final.css */
.info-panel {
  background:
    radial-gradient(circle at 85% 15%, rgba(161,86,54,.16), transparent 34%),
    #e9e6de;
}

.info-mark {
  display: block;
}

.info-main {
  padding-right: 0;
}

/* cinematic-info-portrait.css */
.info-panel {
  isolation: isolate;
  background:
    linear-gradient(90deg, #e9e6de 0%, rgba(233,230,222,.98) 48%, rgba(233,230,222,.62) 72%, rgba(233,230,222,.35) 100%),
    #e9e6de;
}

.info-portrait {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 34%;
  display: block !important;
  background:
    linear-gradient(90deg, #e9e6de 0%, rgba(233,230,222,.7) 28%, rgba(233,230,222,.08) 68%, rgba(233,230,222,.18) 100%),
    linear-gradient(0deg, rgba(233,230,222,.45), transparent 35%),
    url("media/Ruben_Info.jpg") 54% 42% / cover no-repeat;
  filter: grayscale(1) contrast(1.08);
  opacity: .48;
  transform: scale(1.035);
  transform-origin: 60% 45%;
  transition: opacity .65s ease, transform 7s cubic-bezier(.2,.65,.2,1);
  pointer-events: none;
}

.info-panel.open .info-portrait {
  opacity: .62;
  transform: scale(1);
}

.info-panel::before {
  background: none !important;
  opacity: 0 !important;
}

.info-main,
.info-contact,
.info-close {
  position: relative;
  z-index: 1;
}

.info-mark {
  display: none;
}

.info-body {
  text-shadow: 0 1px 16px rgba(233,230,222,.75);
}

@media (max-width: 760px) {
  .info-panel {
    background:
      linear-gradient(180deg, rgba(233,230,222,.65) 0%, #e9e6de 42%, #e9e6de 100%),
      #e9e6de;
  }

  .info-portrait {
    inset: 0 0 auto;
    height: 44vh;
    background:
      linear-gradient(180deg, rgba(233,230,222,.15) 0%, rgba(233,230,222,.3) 55%, #e9e6de 100%),
      url("media/Ruben_Info.jpg") 52% 38% / cover no-repeat;
    opacity: .4;
  }

  .info-panel.open .info-portrait {
    opacity: .52;
  }
}

/* mobile-scale-up.css */
@media (max-width: 760px) {
  .identity > strong {
    font-size: 26px !important;
  }

  .identity .role-switch {
    font-size: 8px !important;
    letter-spacing: .11em !important;
  }

  .info-button,
  .info-close {
    font-size: 9px !important;
  }

  .project-copy {
    bottom: 106px;
  }

  .project-copy h1,
  .viewer.loverboy-active .project-copy h1 {
    font-size: clamp(46px, 14vw, 66px);
    line-height: .93;
  }

  .project-number {
    font-size: 9px;
  }

  .project-switcher {
    height: 84px;
  }

  .project-choice {
    flex-basis: 106px;
    min-width: 106px;
    padding: 12px 10px;
  }

  .project-choice span,
  .project-choice strong {
    font-size: 9px;
  }

  .project-choice span {
    margin-bottom: 16px;
  }

  .progress-line {
    bottom: 84px;
  }

  .info-intro {
    font-size: clamp(50px, 16vw, 72px);
  }

  .info-body {
    font-size: 14px;
  }

  .info-disciplines span,
  .info-contact a {
    font-size: 8px;
  }
}

/* player.css */
.film-player {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #fff;
  background: #050505;
}

.viewer-image {
  cursor: pointer;
}

.film-player::backdrop {
  background: #050505;
}

.player-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.player-video,
.player-frame {
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.film-player.has-video .player-video,
.film-player.has-frame .player-frame {
  display: block;
}

.player-fallback {
  max-width: 750px;
  padding: 24px;
  text-align: center;
}

.film-player.has-video .player-fallback,
.film-player.has-frame .player-fallback {
  display: none;
}

.player-fallback h2 {
  margin: 0 0 35px;
  font: 400 clamp(38px, 6vw, 85px) / .95 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}

.player-original {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .13em;
}

.player-close,
.player-title {
  position: fixed;
  z-index: 3;
  color: #fff;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .13em;
}

.player-close {
  right: 20px;
  top: 18px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 99px;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}

.player-title {
  left: 20px;
  bottom: 18px;
  margin: 0;
}

/* media-support.css */
.viewer-image {
  background-image:
    var(--project-image, none),
    radial-gradient(
      circle at calc(62% + var(--mx, 0%)) calc(38% + var(--my, 0%)),
      var(--c),
      var(--b) 32%,
      var(--a) 76%
    );
  background-size: cover;
  background-position: center;
}

/* interaction-fixes.css */
.title-play {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.title-play:hover span {
  opacity: .72;
}

.project-switcher {
  padding-right: 0;
}

.info-panel {
  position: fixed;
}

.cursor span {
  opacity: 0;
  transition: opacity .18s ease;
}

.cursor.video-zone span {
  opacity: 1;
}

/* two-sided.css */
.identity {
  width: max-content;
}

.role-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 1;
}

.role-switch .role-active {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  opacity: 1;
}

.role-switch .role-divider {
  opacity: .35;
}

.role-switch a {
  color: inherit;
  text-decoration: none;
  opacity: .48;
  transition: opacity .2s;
}

.role-switch a:hover {
  opacity: 1;
}

.filmmaker-view .viewer-image {
  background-image:
    var(--project-image, none),
    linear-gradient(125deg, var(--a), var(--b) 52%, var(--c));
}

.filmmaker-view .art-orbit {
  border-radius: 0;
  transform: rotate(35deg);
}

.filmmaker-view .project-copy h1 {
  max-width: 1150px;
}

.filmmaker-view .progress-line span {
  width: 25%;
}

@media (max-width: 760px) {
  .role-switch {
    gap: 5px;
    font-size: 7px;
  }
}

/* performance.css */
/* Performance pass: retain the cinematic look without continuous heavy repaints. */
.viewer-image {
  inset: -1%;
  transition: opacity .3s ease, transform .55s ease, background .45s ease;
  will-change: opacity, transform;
}

.viewer-image::after {
  opacity: .12;
  animation: none;
}

.art-light {
  display: none;
}

.art-orbit {
  animation-play-state: paused;
  opacity: .3;
}

.project-switcher {
  background: rgba(9, 9, 9, .88);
  backdrop-filter: none;
}

.viewer.changing .viewer-image {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .orbit-one {
    animation: orbit 45s linear infinite;
  }

  .orbit-two {
    animation: orbitBack 38s linear infinite;
  }
}

@media (max-width: 999px), (prefers-reduced-motion: reduce) {
  .art-orbit {
    animation: none !important;
  }
}

/* shared-header.css */
/* Shared header geometry for seamless page switching. */
.viewer-header,
body > header {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  padding: 19px 24px 0;
  display: block;
  color: #fff;
  mix-blend-mode: difference;
}

.identity,
.name-block {
  position: absolute;
  top: 19px;
  left: 24px;
  display: grid;
  gap: 9px;
  width: max-content;
}

.identity > strong,
.name-block .name {
  display: block;
  margin: 0;
  font: 400 clamp(22px, 3vw, 46px) / .9 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  text-transform: none;
}

.identity .role-switch,
.name-block nav {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 15px;
  margin: 0;
  font: 400 9px / 1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.identity .role-switch a,
.name-block nav a {
  opacity: .48;
}

.identity .role-active,
.name-block nav strong {
  padding: 0 0 3px;
  border-bottom: 1px solid currentColor;
  font: inherit;
  opacity: 1;
}

.identity .role-divider,
.name-block nav span {
  opacity: .35;
}

.role-switch .role-paused {
  opacity: .48;
  cursor: default;
}

.info-button,
.list-info-button {
  position: fixed;
  z-index: 13;
  top: 19px;
  right: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: none;
  mix-blend-mode: difference;
  font: 400 9px / 1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
}

@media (max-width: 760px) {
  .viewer-header,
  body > header {
    height: 70px;
    padding: 15px 14px 0;
  }

  .identity,
  .name-block {
    top: 15px;
    left: 14px;
  }

  .identity > strong,
  .name-block .name {
    font-size: 22px;
  }

  .identity .role-switch,
  .name-block nav {
    gap: 5px;
    font-size: 7px;
  }

  .info-button,
  .list-info-button {
    top: 15px;
    right: 14px;
  }
}

/* luxury-entry.css */
/* Subtle, shared entrance animation. */
@keyframes luxuryFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes luxuryFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes luxuryImageIn {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body:not(.entry-ready) .identity,
body:not(.entry-ready) .name-block,
body:not(.entry-ready) .info-button,
body:not(.entry-ready) .list-info-button,
body:not(.entry-ready) .project-copy,
body:not(.entry-ready) .project-switcher,
body:not(.entry-ready) .intro h1,
body:not(.entry-ready) .specialism-copy,
body:not(.entry-ready) .role-filters,
body:not(.entry-ready) .list-project,
body:not(.entry-ready) footer {
  opacity: 0;
}

body.entry-ready .identity,
body.entry-ready .name-block {
  animation: luxuryFadeUp .8s .08s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .info-button,
body.entry-ready .list-info-button {
  animation: luxuryFade .7s .25s both ease;
}

body.entry-ready .viewer-image {
  animation: luxuryImageIn 1.15s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .project-copy,
body.entry-ready .intro h1 {
  animation: luxuryFadeUp .9s .22s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .specialism-copy {
  animation: luxuryFadeUp .85s .38s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .project-switcher,
body.entry-ready .role-filters {
  animation: luxuryFadeUp .8s .48s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .list-project {
  animation: luxuryFadeUp .7s both cubic-bezier(.2, .75, .2, 1);
}

body.entry-ready .list-project:nth-of-type(2) { animation-delay: .15s; }
body.entry-ready .list-project:nth-of-type(3) { animation-delay: .20s; }
body.entry-ready .list-project:nth-of-type(4) { animation-delay: .25s; }
body.entry-ready .list-project:nth-of-type(n+5) { animation-delay: .30s; }

body.entry-ready footer {
  animation: luxuryFade .8s .45s both ease;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.entry-ready) *,
  body.entry-ready * {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* modern.css */
/* Optional modern visual direction. Add ?modern=1 to preview. */
body.modern {
  --modern-bg: #d9e1df;
  --modern-ink: #101817;
  --modern-accent: #b7ff4a;
  --modern-blue: #536dff;
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

body.modern .viewer {
  background: #101817;
}

body.modern .viewer-image {
  background-image:
    var(--project-image, none),
    linear-gradient(128deg, var(--a), var(--b) 53%, var(--c));
}

body.modern .viewer-image::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), transparent 35%, rgba(0,0,0,.64)),
    repeating-linear-gradient(90deg, transparent 0 24.8%, rgba(255,255,255,.06) 25%);
}

/* accessibility-polish.css */
:focus-visible {
  outline: 2px solid var(--unified-accent, #b7ff4a);
  outline-offset: 6px;
}

.original-link[hidden] {
  display: none;
}

body.modern .art-orbit {
  border-radius: 0;
  border-color: rgba(183,255,74,.55);
  transform: rotate(32deg);
}

body.modern .identity > strong,
body.modern .project-copy h1 {
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.06em;
}

body.modern .identity > strong {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -.045em;
}

body.modern .project-copy h1 {
  max-width: 1100px;
  line-height: .88;
}

body.modern .project-number {
  color: var(--modern-accent);
}

body.modern .project-switcher {
  background: rgba(16,24,23,.92);
}

body.modern .project-choice.active::after,
body.modern .progress-line span {
  background: var(--modern-accent);
}

body.modern .project-choice:hover,
body.modern .project-choice.active {
  background: rgba(183,255,74,.1);
}

body.modern .circle-link,
body.modern .info-button {
  color: var(--modern-accent);
}

body.modern .info-panel {
  color: var(--modern-ink);
  background:
    linear-gradient(135deg, rgba(83,109,255,.18), transparent 42%),
    var(--modern-bg);
}

body.modern .info-intro {
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.055em;
}

body.modern .role-switch,
body.modern .project-number,
body.modern .project-meta,
body.modern .project-choice,
body.modern .info-button {
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

body.modern .info-disciplines span {
  border-radius: 0;
  border-color: var(--modern-ink);
}

body.modern .cursor {
  border-color: var(--modern-accent);
}

body.modern .cursor.active {
  background: var(--modern-accent);
}

/* shared-modern-header.css */
.identity > strong,
.name-block .name {
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(22px, 3vw, 46px) !important;
  font-weight: 600 !important;
  line-height: .9 !important;
  letter-spacing: -.045em !important;
}

.identity .role-switch,
.name-block nav,
.info-button,
.list-info-button {
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
}

@media (max-width: 760px) {
  .identity > strong,
  .name-block .name {
    font-size: 22px !important;
  }

  .identity .role-switch,
  .name-block nav {
    font-size: 7px !important;
  }
}

/* photo-display.css */
.viewer-image {
  background-repeat: no-repeat;
}

.viewer-image::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 32%, transparent 58%, rgba(0,0,0,.78)),
    linear-gradient(90deg, rgba(0,0,0,.16), transparent 42%);
}

.viewer-image .art-orbit,
.viewer-image .art-light {
  opacity: .16;
}

/* header-color-fix.css */
.viewer-header,
.identity,
.identity > strong,
.identity .role-switch,
.identity .role-switch a,
.info-button {
  color: #fff !important;
  mix-blend-mode: normal !important;
}

.identity .role-switch a {
  opacity: .6;
}

/* project-preview.css */
.project-preview {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}

.viewer.has-preview .project-preview {
  opacity: 1;
}

.viewer.has-preview .viewer-image {
  background-image:
    var(--project-image, none),
    radial-gradient(
      circle at calc(62% + var(--mx, 0%)) calc(38% + var(--my, 0%)),
      var(--c),
      var(--b) 32%,
      var(--a) 76%
    );
}

.viewer.has-preview .viewer-image::before,
.viewer.has-preview .viewer-image::after {
  z-index: 2;
}

.viewer.has-preview .art-orbit,
.viewer.has-preview .art-light {
  z-index: 1;
}

/* role-switch-graphic.css */
.role-switch a,
.name-block nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  line-height: 1;
}

.role-switch a::after,
.name-block nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  border: 0;
  border-radius: 0;
  opacity: .8;
  overflow: hidden;
  background: linear-gradient(90deg,rgba(255,255,255,.22) 0 38%,var(--unified-accent,#b7ff4a) 48% 60%,rgba(255,255,255,.22) 70% 100%);
  background-size: 260% 100%;
  animation: roleLine 2.2s infinite linear;
  transition: opacity .25s,transform .25s;
}

.role-switch a:hover::after,
.name-block nav a:hover::after {
  opacity: 1;
  transform: scaleX(1.08);
}

@keyframes roleLine {
  from { background-position: 100% 0; }
  to { background-position: -160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .role-switch a::after,
  .name-block nav a::after {
    animation: none;
  }
}

/* title-lines.css */
.project-copy h1 span {
  white-space: pre-line;
}

/* loverboy-title.css */
.viewer.loverboy-active .project-copy h1 {
  max-width: calc(100vw - 48px);
}

.viewer.loverboy-active .project-copy h1 span {
  white-space: pre;
}

.viewer.loverboy-active .project-copy {
  display: block;
}

.viewer.loverboy-active .project-meta {
  position: absolute;
  right: 0;
  bottom: -2px;
}

/* consistent-project-meta-position.css */
@media (min-width: 761px) {
  .project-meta,
  .viewer.loverboy-active .project-meta {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 760px) {
  .viewer.loverboy-active .project-copy h1 {
    max-width: calc(100vw - 28px);
  }

  .viewer.loverboy-active .project-meta {
    display: none;
  }
}

/* mobile-polish.css */
@media (max-width: 760px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  .viewer-header,
  body > header {
    height: 76px;
  }

  .identity,
  .name-block {
    max-width: calc(100vw - 85px);
  }

  .identity > strong,
  .name-block .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .identity .role-switch,
  .name-block nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .project-copy {
    bottom: 100px;
  }

  .project-copy h1,
  .viewer.loverboy-active .project-copy h1 {
    max-width: calc(100vw - 28px);
    margin-bottom: -8px;
    padding-bottom: 12px;
    font-size: clamp(38px, 12.5vw, 58px);
    line-height: .94;
  }

  .project-switcher {
    height: 76px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .project-choice {
    flex-basis: 118px;
    min-width: 118px;
    scroll-snap-align: start;
  }

  .project-choice span {
    margin-bottom: 14px;
  }

  .progress-line {
    bottom: 76px;
  }

  .info-panel,
  .list-info-panel {
    width: 100%;
    max-width: none;
  }

  .info-main {
    overflow-y: auto;
  }

  .info-contact div,
  .list-info-contact {
    flex-wrap: wrap;
  }

  .film-player,
  .grid-player {
    width: 100vw;
    height: 100dvh;
  }

  .player-fallback h2 {
    font-size: clamp(34px, 11vw, 55px);
  }

  .intro {
    min-height: 100svh;
  }

  .intro h1 {
    bottom: 190px;
    max-width: calc(100vw - 28px);
    font-size: clamp(40px, 12.5vw, 62px);
    line-height: .94;
  }

  .specialism-copy {
    bottom: 92px;
    max-width: calc(100vw - 28px) !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .project-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  .role-filters {
    gap: 18px;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
  }

  .role-filters button {
    scroll-snap-align: start;
  }

  .list-project {
    padding: 22px 0;
  }

  .list-project:hover {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }

  .list-project strong {
    font-size: clamp(22px, 7vw, 30px);
  }

  .list-project p {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .identity > strong,
  .name-block .name {
    font-size: 19px !important;
  }

  .identity .role-switch,
  .name-block nav {
    font-size: 6px !important;
    letter-spacing: .1em !important;
  }

  .info-button,
  .list-info-button {
    font-size: 7px !important;
  }
}

/* info-overlap-fix.css */
body.info-is-open .info-button,
body.info-is-open .list-info-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.info-button,
.list-info-button {
  transition: opacity .2s ease;
}

.info-close,
.list-info-close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 30;
  pointer-events: auto;
}

.info-panel,
.list-info-panel {
  z-index: 40;
}

@media (max-width: 760px) {
  .info-close,
  .list-info-close {
    top: 17px;
    right: 16px;
  }
}

/* clean-cinematography.css */
.viewer-image::after,
.viewer-image .art-orbit,
.viewer-image .art-light {
  display: none !important;
}

.viewer-image::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 30%, transparent 60%, rgba(0,0,0,.72));
}

body.modern .viewer-image::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 30%, transparent 60%, rgba(0,0,0,.72));
}

/* clean-poster-to-video-transition.css */
.project-preview {
  transition: none;
  background: transparent;
}

.project-preview {
  z-index: 1;
}

.viewer.has-preview .project-preview {
  animation: previewIn .42s both ease-out;
}

.viewer.content-entering .project-copy > div,
.viewer.content-entering .project-number {
  animation: mobileCopyIn .52s both cubic-bezier(.2,.75,.2,1);
}

.viewer.content-entering .project-number {
  animation-delay: .06s;
}

@keyframes previewIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobileCopyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* project-fade.css */
.project-transition {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: #080b0b;
  opacity: 0;
  transition: opacity .24s ease;
}

.viewer.changing .project-transition {
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  .project-transition {
    display: none;
  }
}

/* reduced-motion-info-panel-fix.css */
.info-panel {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%) !important;
}

.info-panel.open {
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .info-panel:not(.open) {
    transform: translateX(100%) !important;
  }

  .info-panel.open {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .info-panel {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
  }

  .info-close {
    position: fixed;
    top: max(17px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 100;
    min-width: 52px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
}

/* mobile-scale-up-more.css */
@media (max-width: 760px) {
  .identity > strong {
    font-size: 30px !important;
  }

  .identity .role-switch {
    font-size: 9px !important;
  }

  .project-copy {
    bottom: 118px;
  }

  .project-copy h1,
  .viewer.loverboy-active .project-copy h1 {
    font-size: clamp(52px, 16vw, 76px);
  }

  .project-number {
    font-size: 10px;
  }

  .project-switcher {
    height: 94px;
  }

  .project-choice {
    flex-basis: 116px;
    min-width: 116px;
    padding: 14px 11px;
  }

  .project-choice span,
  .project-choice strong {
    font-size: 10px;
  }

  .progress-line {
    bottom: 94px;
  }
}

/* mobile-swipe-portfolio.css */
.swipe-hint,
.mobile-contact-slide {
  display: none;
}

@media (max-width: 760px) {
  .project-switcher,
  .progress-line {
    display: none;
  }

  .project-copy {
    bottom: 62px;
  }

  .swipe-hint {
    position: absolute;
    z-index: 5;
    right: 16px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: .14em;
    transition: opacity .3s;
  }

  .swipe-hint i {
    position: relative;
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,.3);
  }

  .swipe-hint i::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    animation: swipeArrow 1.6s infinite ease-in-out;
  }

  .mobile-contact-slide {
    position: absolute;
    z-index: 8;
    inset: 0;
    padding: 105px 16px 28px;
    flex-direction: column;
    color: #e7ece9;
    background:
      radial-gradient(circle at 80% 20%, rgba(183,255,74,.14), transparent 30%),
      #101817;
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.2,.75,.2,1);
  }

  .viewer.contact-active .mobile-contact-slide {
    display: flex;
    transform: none;
  }

  .viewer.contact-active .project-copy,
  .viewer.contact-active .swipe-hint,
  .viewer.contact-active .viewer-image {
    opacity: 0;
  }

  .mobile-contact-label {
    margin: 0;
    color: #b7ff4a;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .mobile-contact-slide h2 {
    margin: auto 0 30px;
    font: 600 clamp(56px, 17vw, 82px) / .9 "Montserrat", sans-serif;
    letter-spacing: -.075em;
  }

  .mobile-contact-slide h2 em {
    font-weight: 400;
  }

  .mobile-contact-slide > p:not(.mobile-contact-label) {
    max-width: 320px;
    margin: 0 0 28px;
    color: #a9b3af;
    font-size: 14px;
  }

  .mobile-contact-slide div {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(231,236,233,.22);
  }

  .mobile-contact-slide a {
    border-bottom: 1px solid #b7ff4a;
    font-size: 18px;
  }

  .swipe-back {
    margin-top: 30px;
    color: #89948f;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: .14em;
  }
}

@keyframes swipeArrow {
  0%,100% { transform: translateX(-8px) rotate(45deg); opacity: .3; }
  50% { transform: translateX(0) rotate(45deg); opacity: 1; }
}

@media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
  .project-switcher,
  .progress-line {
    display: none !important;
  }

  .project-copy {
    bottom: 62px;
  }

  .swipe-hint {
    display: flex;
  }

  .identity > strong {
    font-size: 23px !important;
  }

  .identity .role-switch {
    font-size: 7px !important;
    letter-spacing: .1em !important;
  }

  .info-button {
    font-size: 9px !important;
  }

  .project-copy h1,
  .viewer.loverboy-active .project-copy h1 {
    font-size: clamp(40px, 12vw, 58px);
    line-height: .95;
  }

  .viewer.loverboy-active .project-copy {
    left: 14px;
    right: 14px;
  }

  .viewer.loverboy-active .project-copy h1 {
    max-width: calc(100vw - 28px);
    overflow: visible;
    white-space: normal;
  }

  .viewer.loverboy-active .project-copy h1 span {
    white-space: pre-line;
  }

  .project-number {
    font-size: 8px;
  }

  .mobile-contact-slide {
    position: absolute;
    z-index: 8;
    inset: 0;
    padding: 105px 16px 28px;
    flex-direction: column;
    color: #e7ece9;
    background:
      radial-gradient(circle at 80% 20%, rgba(183,255,74,.14), transparent 30%),
      #101817;
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.2,.75,.2,1);
  }

  .viewer.contact-active .mobile-contact-slide {
    display: flex;
    transform: none;
  }

  .viewer.contact-active .project-copy,
  .viewer.contact-active .swipe-hint,
  .viewer.contact-active .viewer-image {
    opacity: 0;
  }

  .mobile-contact-label {
    margin: 0;
    color: #b7ff4a;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .mobile-contact-slide h2 {
    margin: auto 0 30px;
    font: 600 clamp(56px, 17vw, 82px) / .9 "Montserrat", sans-serif;
    letter-spacing: -.075em;
  }

  .mobile-contact-slide h2 em {
    font-weight: 400;
  }

  .mobile-contact-slide > p:not(.mobile-contact-label) {
    max-width: 320px;
    margin: 0 0 28px;
    color: #a9b3af;
    font-size: 14px;
  }

  .mobile-contact-slide div {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(231,236,233,.22);
  }

  .mobile-contact-slide a {
    border-bottom: 1px solid #b7ff4a;
    font-size: 18px;
  }

  .swipe-back {
    margin-top: 30px;
    color: #89948f;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: .14em;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none !important;
  }
}

/* mobile-type-rebalance.css */
@media (max-width: 760px) {
  .identity > strong {
    font-size: 23px !important;
  }

  .identity .role-switch {
    font-size: 7px !important;
    letter-spacing: .1em !important;
  }

  .project-copy h1,
  .viewer.loverboy-active .project-copy h1 {
    font-size: clamp(40px, 12vw, 58px);
    line-height: .95;
  }

  .project-number {
    font-size: 8px;
  }
}

/* viewport-fallbacks.css */
.viewer,
.film-player {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

/* mobile-project-navigation.css */
@media (max-width: 760px) {
  .project-switcher {
    padding-right: 0;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
  }

  .project-choice {
    flex: 0 0 96px;
    min-width: 96px;
    padding: 11px 9px;
    scroll-snap-align: center;
  }

  .project-choice strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .project-choice:first-child {
    scroll-snap-align: start;
  }

  .project-choice:last-child {
    scroll-snap-align: end;
  }
}

/* final-transition-and-panel-alignment.css */
.viewer-image {
  --project-image: none !important;
  background: #080808 !important;
}

.info-panel[hidden] {
  display: none !important;
}

.info-close {
  top: 19px;
  right: 24px;
  font-family: "Montserrat", "Gotham", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .13em;
}

.viewer.content-entering .project-copy > div {
  animation: mobileCopyIn .52s both cubic-bezier(.2,.75,.2,1);
}

.viewer.changing .viewer-image {
  opacity: 1;
  transform: scale(1.015);
}

.viewer.changing .project-copy {
  opacity: 1;
  transform: none;
}

.viewer.changing .project-transition {
  opacity: .5;
}

/* unified-project-transition.css */
.project-preview {
  animation: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto;
}

.viewer.has-preview .project-preview {
  animation: none !important;
  opacity: 1 !important;
}

.project-copy {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .28s ease-in-out !important;
  will-change: opacity;
}

.viewer.changing .project-copy {
  opacity: 0 !important;
  transform: none !important;
}

.viewer-image,
.viewer.changing .viewer-image {
  opacity: 1;
  transform: none;
}

.project-transition {
  z-index: 3;
  background: #050505;
  opacity: 0;
  transition: opacity .28s ease-in-out;
  will-change: opacity;
}

.viewer.changing .project-transition {
  opacity: 1;
}

.viewer.content-entering .project-copy > div,
.viewer.content-entering .project-number {
  animation: none;
}

/* stable-project-switch.css */
.project-transition {
  display: none !important;
}

.project-preview,
.viewer.has-preview .project-preview {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

.project-preview.active,
.viewer.has-preview .project-preview.active {
  opacity: 1 !important;
}

.project-copy,
.viewer.changing .project-copy,
.project-copy h1 span,
.viewer.content-entering .project-copy > div,
.viewer.content-entering .project-number {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 760px), (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
  .viewer.loverboy-active .project-copy,
  .viewer.loverboy-active .project-copy > div,
  .viewer.loverboy-active .project-copy h1,
  .viewer.loverboy-active .title-play {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    overflow: visible;
  }

  .viewer.loverboy-active .project-copy h1 span {
    white-space: pre-line;
  }

  .viewer.loverboy-active .project-copy h1 {
    font-size: clamp(34px, 9.3vw, 48px);
    line-height: .98;
  }

  .info-close {
    top: 0;
    right: 0;
    min-width: 0;
    min-height: 44px;
    padding: 15px 14px;
    display: block;
  }
}

/* smooth-crossfade-and-info-photo.css */
.project-preview,
.viewer.has-preview .project-preview {
  opacity: 0 !important;
  transition: opacity .24s ease-out !important;
  will-change: opacity;
}

.project-preview.active,
.viewer.has-preview .project-preview.active {
  opacity: 1 !important;
}

.project-copy {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .16s ease-out, transform .22s ease-out !important;
  will-change: opacity, transform;
}

.viewer.project-changing .project-copy {
  opacity: 0 !important;
  transform: translateY(7px) !important;
}

.info-portrait {
  display: block !important;
}

.info-panel::before {
  width: 55vh;
  height: 55vh;
  right: -25vh;
  top: 18vh;
  border-color: rgba(23,23,20,.28);
  background: url("media/Ruben_Info.jpg") 54% 38% / cover no-repeat;
  opacity: .38;
  filter: grayscale(1) contrast(1.06);
}

.info-panel.open::before {
  transform: translateX(-12vh);
}

@media (max-width: 760px) {
  .info-panel::before {
    width: 250px;
    height: 250px;
    right: -105px;
    top: 88px;
  }
}

/* fade-through-black.css */
.project-preview,
.viewer.has-preview .project-preview {
  opacity: 0 !important;
  transition: opacity .22s ease-in-out !important;
  will-change: opacity;
}

.project-preview.active,
.viewer.has-preview .project-preview.active {
  opacity: 1 !important;
}

.viewer.project-changing .project-preview,
.viewer.project-changing .project-preview.active {
  opacity: 0 !important;
}

.project-copy {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .18s ease-in-out !important;
}

.viewer.project-changing .project-copy {
  opacity: 0 !important;
  transform: none !important;
}

.info-panel::before {
  background: none !important;
  opacity: 1;
  filter: none;
}

/* project-credits.css */
.credits-button {
  position: fixed;
  z-index: 6;
  right: 24px;
  bottom: 112px;
  display: block;
  width: max-content;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.65);
  background: none;
  cursor: pointer;
}

.credits-button::marker,
.credits-button::-webkit-details-marker {
  display: none;
  content: "";
}

.credits-disclosure[open] > .credits-button,
.credits-is-open .info-button {
  opacity: 0;
  pointer-events: none;
}

.credits-disclosure[open] > .credits-button {
  display: none !important;
  visibility: hidden !important;
}

.credits-is-open .swipe-hint {
  display: none !important;
}

.credits-panel {
  position: fixed;
  z-index: 5;
  inset: 0 0 92px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: #fff;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .28s ease;
}

.credits-panel.open {
  opacity: 1;
}

.credits-close {
  position: fixed;
  z-index: 7;
  right: 24px;
  bottom: 20px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.65);
  color: #fff;
  background: none;
  text-transform: uppercase;
  font: 500 9px/1 "Montserrat","Gotham","Avenir Next","Helvetica Neue",Arial,sans-serif;
  letter-spacing: .13em;
  cursor: pointer;
}

.credits-content {
  width: min(680px,100%);
  max-height: calc(100vh - 150px);
  padding-bottom: 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}

.credits-title {
  max-width: 500px;
  margin: 0 0 30px;
  white-space: pre-line;
  font: 500 clamp(26px,3vw,44px)/1.02 "Montserrat","Gotham","Avenir Next","Helvetica Neue",Arial,sans-serif;
  letter-spacing: -.045em;
}

.credits-list {
  display: grid;
  grid-template-columns: minmax(145px,.7fr) 1fr;
  gap: 9px 22px;
  margin: 0;
  font: 500 9px/1.5 "Montserrat","Gotham","Avenir Next","Helvetica Neue",Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.credits-list dt {
  opacity: .48;
}

.credits-list dd {
  margin: 0;
}

.credits-list .credit-empty {
  opacity: .28;
}

.credits-list .credit-highlight {
  color: #b7ff4a;
}

@media (max-width: 760px) {
  .project-meta {
    display: grid;
    right: 14px !important;
    bottom: 4px !important;
  }

  .project-meta > p {
    display: none;
  }

  .credits-panel {
    inset: 0 0 78px;
    padding: 16px 14px;
    justify-content: flex-start;
  }

  .credits-button {
    left: auto;
    right: 14px;
    bottom: 32px;
  }

  .credits-close {
    right: 14px;
    bottom: 1px;
  }

  .credits-content {
    max-height: calc(100svh - 125px);
    padding-bottom: 22px;
  }

  .credits-title {
    margin-bottom: 24px;
    font-size: clamp(25px,8vw,36px);
  }

  .credits-list {
    grid-template-columns: 125px 1fr;
    gap: 8px 14px;
  }
}

/* raised-project-meta-and-credits-final.css */
@media (min-width: 761px) {
  .project-meta,
  .viewer.loverboy-active .project-meta {
    bottom: 34px;
  }

  .credits-button {
    bottom: 146px;
  }

  .credits-close {
    bottom: 54px;
  }
}

/* Keep the raised photo edge clear of the info copy. */
@media (min-width: 761px) {
  .info-main {
    margin-top: 51vh;
  }
}

@media (max-width: 760px) {
  .info-main {
    margin-top: 43vh;
  }
}

/* Full-screen info portrait with a soft fade into the panel background. */
.info-full-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 0;
  background-size: cover;
  clip-path: none;
  transform: none;
}

.info-full-photo::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    rgba(233, 230, 222, .22) 30%,
    rgba(233, 230, 222, .78) 48%,
    #e9e6de 66%,
    #e9e6de 100%
  );
  pointer-events: none;
}

.info-panel::after {
  display: none;
}

@media (max-width: 760px) {
  .info-full-photo {
    width: 100%;
    height: 100%;
    background-position: 50% 0;
    background-size: cover;
  }

}

/* Keep preview video edges fixed to the viewport. */
.viewer-image {
  inset: 0;
  transform: none !important;
}

.project-preview,
.viewer.has-preview .project-preview,
.viewer.project-changing .project-preview {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
}

/* Odeaur uses the same full-cover preview treatment as every project. */
.viewer.odeaur-active .project-preview,
.viewer.odeaur-active.has-preview .project-preview,
.viewer.odeaur-active.project-changing .project-preview {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Compact mobile credits and keep them below the identity. */
@media (max-width: 760px) {
  .credits-panel {
    inset: 88px 0 0;
    padding: 12px 14px 16px;
    justify-content: flex-start;
  }

  .credits-content {
    width: 100%;
    max-height: calc(100svh - 130px);
    padding-bottom: 36px;
  }

  .credits-title {
    margin-bottom: 16px;
    font-size: clamp(19px, 6vw, 27px);
  }

  .credits-list {
    grid-template-columns: 104px 1fr;
    gap: 5px 10px;
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .1em;
  }

  .credits-close {
    right: 14px;
    bottom: 32px;
    font-size: 7px;
  }
}

/* Lift the mobile project title and matching credits controls together. */
@media (max-width: 760px) {
  .project-copy {
    bottom: 86px !important;
  }

  .credits-button,
  .credits-close {
    right: 14px !important;
    bottom: 56px !important;
  }
}

/* Center mobile credits with readable typography. */
@media (max-width: 760px) {
  .credits-panel {
    inset: 76px 0 0;
    padding: 10px 14px 12px;
    align-items: center;
    justify-content: center;
  }

  .credits-content {
    max-height: none;
    overflow: visible;
    padding-bottom: 44px;
  }

  .credits-content .label {
    margin-bottom: 18px;
    font-size: 8px;
  }

  .credits-title {
    margin-bottom: 20px;
    font-size: clamp(23px, 7vw, 34px);
    line-height: 1.02;
  }

  .credits-list {
    grid-template-columns: 118px 1fr;
    gap: 7px 12px;
    font-size: 8px;
    line-height: 1.35;
    letter-spacing: .11em;
  }

  .credits-close {
    bottom: 56px !important;
  }

  .info-panel {
    padding: 14px 16px 14px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .info-main {
    margin-top: 34vh !important;
    margin-bottom: 0;
  }

  .info-main .label,
  .info-contact .label {
    margin-bottom: 10px;
    font-size: 7px;
  }

  .info-intro {
    margin-bottom: 16px;
    font-size: clamp(34px, 13vw, 52px) !important;
    line-height: .9;
  }

  .info-body {
    max-width: 100%;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.35;
  }

  .info-disciplines {
    gap: 4px;
  }

  .info-disciplines span {
    padding: 4px 6px;
    font-size: 6px;
  }

  .info-contact {
    margin-top: auto;
    padding-top: 10px;
  }

  .info-contact div {
    gap: 14px;
  }

  .info-contact a {
    font-size: 7px;
  }
}