/* Selected direction B: a spatial, illustrated studio index. */
#destination{display:grid;place-items:center;overflow:auto;background:#f8f1e5;color:#684629;overscroll-behaviour:contain}
.desk-stage{container-type:inline-size;position:relative;width:min(100%,150svh);aspect-ratio:3/2;flex:none;isolation:isolate}
.desk-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.desk-heading{position:absolute;top:5%;left:4.6%;z-index:1}
.desk-heading h1{font-size:clamp(23px,2.1cqw,36px);font-weight:400;line-height:1.2;letter-spacing:.025em;margin:0;color:#614024}
.desk-heading h1 span{font-style:italic;letter-spacing:.045em}
.desk-heading h1:focus{outline:none}
.desk-heading p{font-size:clamp(12px,1cqw,17px);letter-spacing:.08em;margin:12px 0 0;line-height:1.5}
.desk-project{position:absolute;inset:0;color:inherit;text-decoration:none;pointer-events:none;-webkit-tap-highlight-color:transparent}
.project-copy{position:absolute;pointer-events:auto;z-index:2;transition:transform 220ms ease,color 220ms ease}
.project-copy h2{font-weight:400;font-size:clamp(28px,3cqw,52px);line-height:1.15;letter-spacing:-.035em;margin:0 0 .75cqw}
.project-copy p{font-size:clamp(14px,1.32cqw,22px);line-height:1.5;letter-spacing:.01em;margin:0 0 .9cqw}
.project-action{display:inline-flex;align-items:center;gap:.55em;min-height:44px;font-size:clamp(15px,1.4cqw,23px);line-height:1.4;letter-spacing:.025em;position:relative}
.project-action:after{content:"";position:absolute;bottom:6px;left:0;right:0;height:1px;background:currentColor;transform-origin:left;transition:transform 220ms ease,opacity 220ms ease;opacity:.7}
.project-action>span{transition:transform 220ms ease}
.project-colour{inset:34.1% auto auto 2%;width:50%;height:60.9%}
.project-lumi{inset:10% auto auto 52%;width:46%;height:79%}
.project-colour .project-copy{left:58.6%;top:0;width:41%}
.project-lumi .project-copy{left:18.913%;top:77.468%;width:68.478%}
.object-hit{position:absolute;display:block;pointer-events:auto;z-index:1;transition:background 250ms ease;cursor:pointer}
.project-colour .object-hit{left:0;top:26.108%;width:92%;height:73.892%;border-radius:42% 45% 18% 24%}
.project-lumi .object-hit{left:0;top:0;width:100%;height:72.152%;border-radius:18% 24% 20% 18%;transform:rotate(9deg)}
.desk-project:hover .project-copy,.desk-project:focus-visible .project-copy{color:#463019;transform:translateY(-2px)}
.desk-project:hover .project-action>span,.desk-project:focus-visible .project-action>span{transform:translate(3px,-3px)}
.desk-project:hover .project-action:after,.desk-project:focus-visible .project-action:after{opacity:1;transform:scaleX(1.045)}
.desk-project:focus-visible{outline:none}
.desk-project:focus-visible .project-copy{outline:2px solid #987449;outline-offset:10px;border-radius:2px}
.desk-project:active .project-copy{transform:translateY(1px)}
.project-artwork{display:none}
.desk-footer{position:absolute;inset:auto 3.2% 1.1%;display:flex;align-items:center;justify-content:flex-end;gap:4%;font-size:clamp(11px,.85cqw,14px)}
.desk-footer p{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-style:italic;letter-spacing:.08em;white-space:nowrap;color:#836249}
.desk-replay{font-size:clamp(13px,.95cqw,16px);min-height:44px;letter-spacing:.035em;color:#684629}
body[data-state="leaving"] .desk-stage{animation:desk-arrive 580ms cubic-bezier(.2,.65,.3,1) both}
body[data-state="leaving"] .project-copy{animation:caption-arrive 480ms 90ms ease both}
body[data-state="leaving"] .project-lumi .project-copy{animation-delay:150ms}
@keyframes desk-arrive{from{filter:brightness(1.1);opacity:.3;transform:translateY(5px)}to{filter:brightness(1);opacity:1;transform:translateY(0)}}
@keyframes caption-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
body.desk-return #entrance,body.desk-return #match{display:none}
body.desk-return #destination{opacity:1;visibility:visible;transition:none}
body.desk-return .desk-stage,body.desk-return .project-copy{animation:none!important}
@media(max-width:850px),(max-aspect-ratio:4/5){
  #destination{display:block;overflow-y:auto;overflow-x:hidden;background:#f8f1e5}
  .desk-stage{width:100%;max-width:640px;aspect-ratio:auto;margin:auto;padding:0 0 12px}
  .desk-art{display:none}
  .desk-heading{position:relative;top:auto;left:auto;padding:32px 28px 6px}
  .desk-heading h1{font-size:29px}.desk-heading p{font-size:12px;letter-spacing:.045em;margin-top:8px}
  .desk-project{position:relative;display:block;inset:auto;width:auto;height:auto;padding:0 20px 30px;pointer-events:auto}
  .object-hit{display:none}
  .project-artwork{display:block;width:calc(100% + 40px);margin:0 -20px -4px;overflow:hidden;mask-image:radial-gradient(ellipse 76% 77% at 50% 47%,#000 56%,transparent 93%)}
  .project-colour .project-copy,.project-lumi .project-copy{position:relative;left:auto;top:auto;width:auto;margin:0 10px;padding:0;pointer-events:auto}
  .project-copy h2{font-size:32px;line-height:1.2;margin-bottom:8px}
  .project-copy p{font-size:16px;line-height:1.55;margin:0 0 7px;max-width:28em}
  .project-action{font-size:17px;min-height:44px}
  .project-lumi .project-artwork{margin-top:-6px}
  .desk-footer{position:relative;inset:auto;display:flex;justify-content:space-between;gap:12px;margin:0 30px;padding:10px 0 8px;flex-wrap:wrap}
  .desk-footer p{position:static;transform:none;font-size:12px;line-height:44px;letter-spacing:.015em}
  .desk-replay{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.desk-stage,.desk-heading,.project-copy,.project-action>span{animation:none!important;transition:none!important}}