@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 750; font-display: swap; src: url("/archivo-latin.woff2") format("woff2"); }
:root {
  color-scheme: light; --paper: #fff; --ink: #171717; --edge: clamp(22px, 4vw, 56px); --ease-out: cubic-bezier(.22, 1, .36, 1);
  font-family: "Avenir Next", "Archivo", sans-serif; font-synthesis: none; color: var(--ink); background: var(--paper);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body, h1, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 0; background: transparent; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, [role="slider"]:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { color: var(--paper); background: var(--ink); }
.stage { position: relative; isolation: isolate; width: 100%; min-height: 320px; height: 100vh; height: 100dvh; }
.card, .entry { position: absolute; inset: 0; }
.card { font-size: 16px; line-height: 1.35; }
.corner { position: absolute; }
.identity, .work { top: max(var(--edge), env(safe-area-inset-top)); }
.identity, .place { left: max(var(--edge), env(safe-area-inset-left)); }
.work, .contact { right: max(var(--edge), env(safe-area-inset-right)); }
.place, .contact { bottom: max(var(--edge), env(safe-area-inset-bottom)); }
.identity { max-width: calc(50% - var(--edge)); font-size: inherit; font-weight: 500; }
.identity button { padding: 0; min-height: 44px; text-align: left; line-height: inherit; }
.identity button:hover, .identity button:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.work { text-align: right; }
.work p { font-size: 12px; color: #626262; }
.card a { min-height: 44px; display: inline-flex; align-items: center; gap: .4em; color: inherit; text-decoration: none; }
.card a:hover, .card a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.card a svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.place { display: flex; align-items: center; min-height: 44px; }
.object-study { position: absolute; width: min(58vw, 460px, 65dvh); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.object-control { width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: 8px; }
.object-control:active { cursor: grabbing; }
.object-control[data-pointer-focus="true"]:focus { outline: none; }
.object-control canvas { display: block; width: 100%; height: 100%; }
.object-pause { position: absolute; top: 100%; left: calc(50% - 22px); width: 44px; height: 44px; padding: 13px; opacity: .55; }
.object-pause:hover, .object-pause:focus-visible { opacity: 1; }
.object-pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; }
.play-mark, [data-paused="true"] .pause-mark { display: none; }
[data-paused="true"] .play-mark { display: block; }
.entry { z-index: 2; overflow: hidden; background: var(--paper); --angle: 8deg; --alignment: 24px; --dwell: 0; }
.black-field { position: absolute; width: 300vmax; height: 200vmax; top: 50%; left: calc(50% - 150vmax); background: var(--ink); transform-origin: 50% 0; transform: rotate(var(--angle)); }
[data-mode="desktop"][data-phase="entry"] .black-field { transform: translateY(100dvh); }
.orbit-control { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); padding: 0; }
.orbit { display: block; width: 240px; height: 240px; overflow: visible; }
.orbit-center { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .3; }
.orb.filled { fill: var(--ink); }
.orb.outline { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.orbit-control:focus-visible { outline-offset: 10px; }
[data-mode="mobile"] .orbit-control, [data-mode="desktop"] .level-ui { display: none; }
.level-marks { position: absolute; top: 50%; left: 50%; width: 64px; height: 0; transform: translateX(-50%); color: #fff; mix-blend-mode: difference; z-index: 3; pointer-events: none; }
.level-marks i { position: absolute; top: 0; width: 28px; height: 1px; background: currentColor; opacity: calc(.5 + var(--dwell) * .5); }
.alignment-left { left: 0; transform: translateY(var(--alignment)); }
.alignment-right { right: 0; transform: translateY(calc(-1 * var(--alignment))); }
.sensor-start, .level-control { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; padding: 0; touch-action: none; }
.sensor-start { cursor: pointer; }
.level-control { cursor: ew-resize; }
.sensor-start:focus-visible, .level-control:focus-visible { outline: 2px solid #fff; outline-offset: -12px; mix-blend-mode: difference; }
.skip, .use-touch { position: absolute; bottom: max(var(--edge), env(safe-area-inset-bottom)); z-index: 5; width: 44px; height: 44px; padding: 11px; }
.skip { right: max(var(--edge), env(safe-area-inset-right)); }
.use-touch { left: max(var(--edge), env(safe-area-inset-left)); }
.skip svg, .use-touch svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; }
[data-mode="mobile"] .skip, .use-touch { color: #fff; mix-blend-mode: difference; }
.signature { position: absolute; inset: 0; color: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; font-size: clamp(64px, 12vw, 144px); font-weight: 500; line-height: .95; letter-spacing: -.06em; }
.signature span { position: absolute; left: 50%; transform: translateX(-50%); }
.given { bottom: calc(50% + 16px); }
.surname { top: calc(50% + 16px); }
.shutter { position: absolute; left: 0; width: 100%; height: 50%; background: var(--ink); display: none; }
.upper { top: 0; } .lower { bottom: 0; }
[data-phase="locked"] .black-field { transform: rotate(0deg); transition: transform 240ms var(--ease-out); }
[data-phase="locked"] .level-marks { opacity: 0; transition: opacity 550ms 100ms; }
html:not([data-phase="entry"]) .orbit-control, html:not([data-phase="entry"]) .sensor-start,
html:not([data-phase="entry"]) .skip, html:not([data-phase="entry"]) .use-touch { visibility: hidden; }
[data-phase="signature"] .black-field { transform: rotate(0deg); }
[data-phase="signature"] .signature { opacity: 1; transition: opacity 450ms var(--ease-out); }
html:not([data-phase="entry"]):not([data-phase="locked"]) .level-ui { visibility: hidden; }
[data-phase="blackout"] .black-field { transform: translateY(-50dvh); transition: transform 650ms cubic-bezier(.76, 0, .24, 1); }
[data-phase="blackout"] .signature { opacity: 1; }
[data-phase="blackout"] .given { opacity: 0; transition: opacity 250ms; }
[data-phase="blackout"] .surname { transform: translate(-50%, calc(-50% - 16px)); transition: transform 650ms var(--ease-out); }
:is([data-phase="aperture"], [data-phase="opening"], [data-phase="landing"]) .entry { background: transparent; pointer-events: none; }
:is([data-phase="aperture"], [data-phase="opening"], [data-phase="landing"]) .black-field { visibility: hidden; }
:is([data-phase="aperture"], [data-phase="opening"], [data-phase="landing"]) .signature { opacity: 0; }
:is([data-phase="aperture"], [data-phase="opening"], [data-phase="landing"]) .shutter { display: block; }
:is([data-phase="opening"], [data-phase="landing"]) .upper { transform: translateY(-100%); transition: transform 1300ms cubic-bezier(.76, 0, .24, 1); }
:is([data-phase="opening"], [data-phase="landing"]) .lower { transform: translateY(100%); transition: transform 1300ms cubic-bezier(.76, 0, .24, 1); }
:is([data-phase="aperture"], [data-phase="opening"]) .corner, :is([data-phase="aperture"], [data-phase="opening"]) .object-pause { opacity: 0; }
[data-phase="landing"] .corner, [data-phase="landing"] .object-pause { animation: arrive 500ms var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .object-study { width: min(78vw, 360px, 58dvh); } }
@media (max-width: 360px) { :root { --edge: 20px; } .card { font-size: 15px; } }
@media (max-height: 480px) { .signature { font-size: 64px; } .orbit-control { transform: translate(-50%, -50%) scale(.8); } .object-study { width: min(42vw, 58dvh); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .entry { forced-color-adjust: none; } .card { background: Canvas; color: CanvasText; } .card .work p { color: CanvasText; } }