@font-face {font-family:"MaccabiBlock";src:url("./fonts/MaccabiBlock-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:block;}
@font-face {
  font-family: "Funnel Display";
  src: url("./fonts/FunnelDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: light;
  --page-background: #d8d8d8;
  --page-foreground: #000;
  --edge-inset: 16px;
  font-family: "Funnel Display", sans-serif;
  color: var(--page-foreground);
  background: var(--page-background);
}

* { box-sizing: border-box; }
body { margin: 0; }

#scene { position:absolute; inset:0; display:block; width:100%; height:100%; cursor:grab; touch-action:none; outline:none; }
#scene.is-dragging {cursor:grabbing;}
#scene:focus-visible {outline:1px solid #888;outline-offset:-6px;}
#scene-status {position:fixed;z-index:11;top:calc(50% + 70px);left:0;width:100%;text-align:center;font-size:11px;letter-spacing:.06em;color:#666;}
#scene-status[hidden] {display:none;}
#project-dots {position:absolute;z-index:3;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;}
#project-dots[hidden] {display:none;}
.project-dot {display:grid;place-items:center;width:28px;height:28px;padding:0;background:none;border:0;border-radius:50%;cursor:pointer;}
.project-dot::after {content:"";width:6px;height:6px;border-radius:50%;background:#9e9e9e;transition:background .25s,transform .25s,box-shadow .25s;}
.project-dot[aria-current="true"]::after {background:var(--dot-color);transform:scale(1.35);box-shadow:none;}
.project-dot:hover::after {background:var(--dot-color);}
.project-dot:focus-visible {outline:1px solid #555;outline-offset:1px;}
.identity,.corner-lines,.contact,.about {z-index:2;}
.identity,.corner-lines,.contact,.about,#project-dots {transition:opacity .45s;}
body:not([data-phase="ready"]):not([data-view="project"]) .identity,body:not([data-phase="ready"]):not([data-view="project"]) .corner-lines,body:not([data-phase="ready"]):not([data-view="project"]) .contact,body:not([data-phase="ready"]):not([data-view="project"]) .about,body:not([data-phase="ready"]):not([data-view="project"]) #project-dots {opacity:0;visibility:hidden;pointer-events:none;}
.no-script {position:absolute;top:50%;width:100%;text-align:center;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Reference: 1470 × 956. Figma's corner constraints keep the insets
   and typography fixed while the empty central area absorbs resizing. */
.homepage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.identity {
  position: absolute;
  top: var(--edge-inset);
  left: var(--edge-inset);
  display: flex;
  align-items: center;
  gap: 4px;
}

.identity-mark { display: block; flex: none; }

.label {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.corner-lines {
  position: absolute;
  top: var(--edge-inset);
  right: var(--edge-inset);
  width: 48px;
  height: 16px;
}

/* The exported asset includes 0.5px of stroke beyond each side. */
.corner-lines img { display: block; position: relative; left: -0.5px; }

.contact { position: absolute; left: var(--edge-inset); bottom: var(--edge-inset); }
.about { position: absolute; right: var(--edge-inset); bottom: var(--edge-inset); text-align: right; }

/* Match Funnel Display's cap-height trim on browsers without CSS text-box. */
@supports not (text-box-trim: trim-both) {
  .label { line-height: 16px; transform: translateY(-1px); }
}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

#scene.is-cube-hover {cursor:pointer;}

#project-page {position:fixed;inset:0;overflow:hidden;background:var(--project-color);outline:none;}
#project-page[hidden],#home-link[hidden],#cube-tooltip[hidden],#arrange-label[hidden] {display:none;}
#home-link {position:fixed;z-index:4;top:var(--edge-inset);left:var(--edge-inset);color:inherit;text-decoration:none;}
#home-link:hover {text-decoration:underline;text-underline-offset:4px;}
#home-link:focus-visible {outline:1px solid currentColor;outline-offset:6px;}
#cube-tooltip {position:fixed;z-index:8;width:clamp(180px,24vw,300px);height:min(260px,36vh);pointer-events:none;transform:rotate(15deg);transform-origin:top left;}
.cube-cover {user-select:none;display:block;width:100%;height:100%;object-fit:contain;}
.cube-cover[hidden] {display:none;}
body[data-view="entering"] #project-dots {opacity:0;pointer-events:none;}
body[data-view="project"] #scene,body[data-view="project"] .corner-lines,body[data-view="project"] #project-dots,body[data-view="project"] #scene-status {visibility:hidden;pointer-events:none;}
body[data-view="entering"] #scene {cursor:progress;}

body[data-view="entering"] #project-page {pointer-events:none;}

body[data-view="project"] .identity,body[data-view="project"] .contact,body[data-view="project"] .about {display:none;}
#arrange-label {position:fixed;z-index:4;top:var(--edge-inset);right:var(--edge-inset);}
body[data-view="project"] #home-link,body[data-view="project"] #arrange-label {color:#fff;mix-blend-mode:difference;}
.project-strip {position:absolute;inset:0;overflow:auto;overscroll-behavior:none;scrollbar-width:none;outline:none;touch-action:pan-x pan-y pinch-zoom;cursor:grab;user-select:none;overflow-anchor:none;--gallery-zoom:1;}
.project-track {display:flex;gap:calc(5px * var(--gallery-zoom));width:max-content;min-width:100%;height:calc(100dvh * var(--gallery-zoom));margin-top:max(0px,calc(50dvh * (1 - var(--gallery-zoom))));}
.project-strip.is-panning,.project-strip.is-panning * {cursor:grabbing!important;}
.project-strip::-webkit-scrollbar {display:none;}
.project-sheet {position:relative;flex:0 0 auto;margin:0;height:100%;width:calc(100dvh * var(--page-ratio) * var(--gallery-zoom));}
.project-sheet img {position:relative;display:block;width:100%;height:100%;max-width:none;object-fit:contain;user-select:none;}
.page-placeholder {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;white-space:nowrap;}
.page-placeholder button {font:inherit;border:0;padding:10px 14px;cursor:pointer;}
body[data-view="entering"] .project-strip {visibility:hidden;}

/* The corner labels follow the same fade as the cube-face number. */
body:is([data-view="entering"],[data-view="leaving"]) :is(.identity,.corner-lines,.contact,.about) {opacity:var(--home-label-opacity,0);transition:none;pointer-events:none;}
body[data-view="project"] :is(#home-link,#arrange-label) {animation:project-label-in .7s ease-out both;}
body[data-view="project"] .project-strip {animation:project-slide-in .9s cubic-bezier(.22,.75,.18,1) both;}
body[data-view="leaving"] :is(#home-link,#arrange-label) {animation:project-label-out .4s ease-in both;pointer-events:none;color:#fff;mix-blend-mode:difference;}
body[data-view="leaving"] .project-strip {animation:project-slide-out .65s cubic-bezier(.55,0,.78,.35) both;pointer-events:none;}
body[data-view="leaving"] #project-page {pointer-events:none;}
body[data-view="leaving"] #project-dots {opacity:var(--home-label-opacity,0);pointer-events:none;}
.project-ending {flex:0 0 calc(clamp(240px,32vw,480px) * var(--gallery-zoom));height:100%;display:grid;place-items:center;}
.project-back {font-size:calc(clamp(36px,5vw,72px) * var(--gallery-zoom));font-weight:700;color:#000;text-decoration:none;}
.project-back:hover {text-decoration:underline;text-underline-offset:.15em;}
.project-back:focus-visible {outline:2px solid currentColor;outline-offset:12px;}
@keyframes project-label-in {from{opacity:0;}to{opacity:1;}}
@keyframes project-label-out {from{opacity:1;}to{opacity:0;}}
@keyframes project-slide-in {from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes project-slide-out {from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;}}

#project-page[data-project="modele"] .project-back {color:#fff;}

/* Empty content surfaces, ready for the supplied contact/about copy. */
.corner-trigger {font-family:inherit;padding:0;border:0;background:none;color:inherit;cursor:pointer;z-index:6;}
.corner-trigger:hover {text-decoration:underline;text-underline-offset:5px;}
.corner-trigger:focus-visible {outline:1px solid currentColor;outline-offset:6px;}
.corner-popup {position:fixed;z-index:5;bottom:-52px;width:clamp(240px,28vw,420px);height:clamp(240px,34vh,340px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(22px) scale(.94);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;--panel-sway-x:0deg;--panel-sway-y:0deg;}
.corner-popup-left {left:-38px;transform-origin:bottom left;--panel-y:13deg;--panel-z:-3deg;}
.corner-popup-right {right:-38px;transform-origin:bottom right;--panel-y:-13deg;--panel-z:3deg;}
.corner-popup[data-open="true"] {opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:0s;}
.corner-panel {width:100%;height:100%;background:#000;color:#fff;transform:perspective(950px) rotateX(calc(10deg + var(--panel-sway-x))) rotateY(calc(var(--panel-y) + var(--panel-sway-y))) rotateZ(var(--panel-z));transform-origin:center;}
.corner-popup[data-open="true"] .corner-panel {pointer-events:auto;}
.corner-panel-content {height:100%;padding:28px;overflow:auto;font-size:18px;line-height:1.45;}
body:not([data-view="home"]) .corner-popup,body:not([data-phase="ready"]) .corner-popup {opacity:0;visibility:hidden;pointer-events:none;}
body:not([data-view="home"]) .corner-popup .corner-panel {pointer-events:none;}
@media(max-width:699px){.corner-popup{width:min(360px,calc(100vw - 64px));height:min(290px,44dvh);bottom:-42px;}}

.corner-trigger[aria-expanded="true"] {color:#fff;}

/* Hover cover: the final pose stays clockwise; the entrance unwinds counterclockwise. */
#cube-tooltip {border:8px solid #000;border-radius:8px;background:#000;overflow:hidden;transform-origin:50% 0;animation:cover-unfold .38s cubic-bezier(.2,.8,.2,1) both;}
@keyframes cover-unfold {from{opacity:0;transform:rotate(35deg) scale(.78);}to{opacity:1;transform:rotate(15deg) scale(1);}}
#arrange-label {padding:0;border:0;background:none;font-family:inherit;color:inherit;cursor:pointer;}
#arrange-label:hover {text-decoration:underline;text-underline-offset:4px;}
#arrange-label:focus-visible {outline:1px solid currentColor;outline-offset:6px;}
.project-strip[data-arrangement="vertical"] .project-track {flex-direction:column;min-width:0;width:calc(100vw * var(--gallery-zoom));height:max-content;min-height:100%;margin-top:0;margin-left:max(0px,calc(50vw * (1 - var(--gallery-zoom))));}
.project-strip[data-arrangement="vertical"] .project-sheet {width:100%;height:calc(100vw * var(--gallery-zoom) / var(--page-ratio));}
.project-strip[data-arrangement="vertical"] .project-ending {flex:0 0 auto;width:100%;height:calc(40dvh * var(--gallery-zoom));}

.corner-popup {width:min(600px,48vw,80dvh);height:auto;aspect-ratio:1;bottom:-60px;}
.corner-popup-left {left:-38px;}
.corner-popup-right {right:-38px;}
.corner-panel {aspect-ratio:1;container-type:inline-size;}
.corner-panel-content {position:relative;height:100%;padding:0;overflow:hidden;font-size:4cqw;line-height:1.08;}
.corner-panel-content a {color:inherit;text-decoration:none;}
.corner-panel-content a:hover {text-decoration:underline;}
.panel-close {position:absolute;z-index:2;top:3.333%;right:3.333%;width:9.083%;height:9.083%;padding:0;border:0;background:none;cursor:pointer;}
.panel-close img {display:block;width:100%;height:100%;}
.panel-close:focus-visible {outline:1px solid #fff;outline-offset:5px;}
.contact-details {position:absolute;left:11.434%;top:19.473%;display:grid;grid-template-columns:29.522cqw auto;row-gap:.7cqw;line-height:1.08;}
.contact-codes {position:absolute;left:11.434%;right:3.333%;top:37.28%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.333cqw;}
.contact-codes figure {margin:0;}
.contact-codes figcaption {margin-bottom:2cqw;white-space:nowrap;}
.contact-codes img {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}
.about-portrait {position:absolute;left:0;top:25.479%;width:53.141%;height:auto;transform:scaleX(-1);}
.about-details {position:absolute;left:18.076%;top:3.333%;display:grid;grid-template-columns:27.047cqw auto;line-height:4.333cqw;white-space:nowrap;}
.about-details .college-row {margin-top:3.573cqw;}
.about-details .skills-row {margin-top:4.24cqw;}
#about-panel .panel-close {left:3.333%;right:auto;width:9.083%;height:9.083%;}
#about-panel .panel-close img {transform:scaleX(-1);left:0;}
.corner-trigger[aria-expanded="true"] {opacity:0;visibility:hidden;pointer-events:none;}
@media(max-width:699px){.corner-popup{width:min(600px,94vw,80dvh);height:auto;bottom:-40px;}.corner-popup-left{left:-22px;}.corner-popup-right{right:-22px;}}

#music-player {position:fixed;z-index:7;left:auto;right:var(--edge-inset);top:calc(var(--edge-inset) - 6px);width:48px;height:30px;padding:6px 0;border:0;background:none;color:#000;cursor:pointer;transition:opacity .4s;}
body:not([data-phase="ready"]) #music-player {opacity:0;visibility:hidden;}
body:is([data-view="project"],[data-view="leaving"]) #music-player {color:#fff;mix-blend-mode:difference;}
#music-player:focus-visible {outline:1px solid currentColor;outline-offset:3px;}
.music-wave {display:flex;align-items:center;justify-content:space-between;height:18px;}
.music-wave i {display:block;width:2px;height:5px;background:currentColor;border-radius:2px;transform-origin:center;}
.music-wave i:nth-child(2),.music-wave i:nth-child(6){height:10px;}
.music-wave i:nth-child(3),.music-wave i:nth-child(5){height:15px;}
.music-wave i:nth-child(4){height:18px;}
#music-player[data-state="playing"] i {animation:music-wave .8s ease-in-out infinite alternate;}
.music-wave i:nth-child(2n){animation-delay:-.3s!important;}
.music-wave i:nth-child(3n){animation-delay:-.6s!important;}
@keyframes music-wave {from{transform:scaleY(.35);}to{transform:scaleY(1);}}
/* Keep the return arrow and long college name on-screen while the lower corner remains cropped. */
.corner-popup-right {right:16px;}
@media(max-width:699px){.corner-popup-right{right:18px;width:min(600px,90vw,80dvh);}}

#splash-loading {position:fixed;z-index:3;left:50%;top:calc(50% + 52px);margin:0;transform:translateX(-50%);font-size:14px;font-weight:700;line-height:1;letter-spacing:.04em;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;}
body[data-phase="loading"]:not([data-view="project"]) #splash-loading {opacity:1;visibility:visible;animation:loading-blink 1s ease-in-out infinite;transition:none;}
@keyframes loading-blink {0%,100%{opacity:.2;}50%{opacity:1;}}