@font-face {
  font-family: Manrope;
  src: url('/assets/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  font: 100%/1.62 Manrope, system-ui, sans-serif;
  font-synthesis: none;
  color: #fff8ec;
  background: #1a223a;
  color-scheme: dark;
  --paper: #fff8ec;
  --muted: #dcdbe7;
  --accent: #ffd0a0;
  --line: #eee3d539;
  --gutter: clamp(1rem, 4.4vw, 4.5rem);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header: calc(4.6rem + var(--safe-top));
  --bottom: calc(1.15rem + var(--safe-bottom));
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, dl, dd { margin: 0; }
button, summary { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, #flight-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#flight-stage:focus-visible { outline-offset: -4px; }
::selection { background: #ffce9d; color: #202339; }
[hidden] { display: none !important; }
.wrap { width: min(94rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not(.symbols) { width: 1.18rem; height: 1.18rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: fixed; z-index: 12; top: .7rem; left: .7rem; padding: .55rem 1rem; color: #192035; background: var(--paper); transform: translateY(-180%); }
.skip:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 4; background: #192033; }
.header-row { min-height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: var(--safe-top); border-bottom: 1px solid var(--line); }
.brand, .language { min-height: 44px; display: inline-flex; align-items: center; width: fit-content; }
.brand img { display: block; width: clamp(6.3rem, 9.5vw, 8.6rem); height: auto; }
.header-tools { justify-self: end; display: flex; align-items: center; gap: .25rem; }
.language { min-width: 44px; justify-content: center; font-size: .875rem; font-weight: 760; }
.route { display: flex; align-items: center; gap: .2rem; padding-inline: .3rem; border: 1px solid #fff3; border-radius: 9px; background: #12182bc9; }
.route a { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding-inline: clamp(.6rem, 1.3vw, 1.2rem); color: #f1ebef; font-size: .875rem; font-weight: 700; border-radius: 6px; letter-spacing: .006em; }
.route a[aria-current] { color: var(--accent); background: #ffdbb925; }
.route a:hover, .language:hover { color: var(--accent); }

.world { min-height: clamp(18rem, 52svh, 36rem); position: relative; overflow: hidden; isolation: isolate; --poster: url('/assets/island-launch.webp'); --phone: url('/assets/island-launch-phone.webp'); }
.world[data-view="1"] { --poster: url('/assets/island-portfolio.webp'); --phone: url('/assets/island-portfolio-phone.webp'); }
.world[data-view="2"] { --poster: url('/assets/island-about.webp'); --phone: url('/assets/island-about-phone.webp'); }
.world[data-view="3"] { --poster: url('/assets/island-contact.webp'); --phone: url('/assets/island-contact-phone.webp'); }
[data-theme="night"] .world { --poster: url('/assets/night-launch.webp'); --phone: url('/assets/night-launch-phone.webp'); }
[data-theme="night"] .world[data-view="1"] { --poster: url('/assets/night-portfolio.webp'); --phone: url('/assets/night-portfolio-phone.webp'); }
[data-theme="night"] .world[data-view="2"] { --poster: url('/assets/night-about.webp'); --phone: url('/assets/night-about-phone.webp'); }
[data-theme="night"] .world[data-view="3"] { --poster: url('/assets/night-contact.webp'); --phone: url('/assets/night-contact-phone.webp'); }
.world::before, #world-canvas, .world-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.world::before { content: ''; background: var(--poster) center / cover no-repeat, #303955; }
#world-canvas { display: block; visibility: hidden; touch-action: pinch-zoom; }
.world-shade { pointer-events: none; background: linear-gradient(180deg, #131929bd, transparent 21%, transparent 77%, #131929bd); }
[data-world="live"] .world::before { content: none; }
[data-world="live"] #world-canvas { visibility: visible; cursor: grab; }
[data-world="live"] #world-canvas.is-selectable { cursor: pointer; }
[data-world="live"] #world-canvas.is-dragging { cursor: grabbing; }
.scene-target { position: absolute; inset: var(--header) 0 var(--bottom); border: 0; background: transparent; cursor: pointer; }
.scene-target:focus-visible { outline-offset: -4px; }
.island-panel { background: #1a2136; color: var(--paper); }
.island { padding: clamp(1.2rem, 3vw, 2.15rem); }
.island-panel:not([data-open]) .island + .island { border-top: 1px solid var(--line); }
.panel-tools { display: flex; align-items: center; justify-content: end; padding: .75rem .75rem 0; }
.panel-content { min-height: 0; }
h1, h2 { font-weight: 780; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
h1, .island h2 { font-size: clamp(2rem, 3.35vw, 3.4rem); }
.island h1:focus, .island h2:focus { outline: none; }
.lede { color: var(--muted); max-width: 40ch; font-size: clamp(1rem, 1.2vw, 1.105rem); margin-top: .75rem; text-wrap: pretty; }
.action { min-height: 48px; display: inline-flex; align-items: center; gap: .8rem; padding: .55rem .85rem; margin-top: 1.15rem; font-size: .9375rem; font-weight: 780; color: #211d2d; background: #ffe3c9; border-radius: 4px; }
.action:hover { background: #ffce9d; }
.projects { margin-top: 1.15rem; border-top: 1px solid var(--line); }
.projects details { border-bottom: 1px solid var(--line); }
.projects summary { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding-block: .55rem; min-height: 51px; cursor: pointer; list-style: none; }
.projects summary::-webkit-details-marker { display: none; }
.projects summary:hover, .projects details[open] summary { color: var(--accent); }
.projects summary strong, .projects summary small { display: block; line-height: 1.35; }
.projects summary small { font-size: .8125rem; color: var(--muted); margin-top: .08rem; }
.projects details[open] summary svg { transform: rotate(90deg); }
.project-body { color: var(--muted); padding: .2rem 0 .8rem; }
.project-body > p { font-size: .9375rem; }
.project-body a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: .22rem; font-size: .875rem; }
.preview-controls { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.preview-controls button, .copy-email { border: 1px solid var(--line); background: #252f49; min-height: 44px; padding: .3rem .6rem; font-size: .8125rem; font-weight: 740; cursor: pointer; border-radius: 4px; }
.preview-controls button[aria-pressed="true"], .preview-controls button:hover, .copy-email:hover { background: #ffe3c9; color: #211d2d; }
.preview-output { padding: .52rem .65rem; margin-top: .45rem; font-size: .875rem; border-radius: 4px; background: #2a3754; color: #fff; }
.preview-output time { color: #ffdfb6; font-variant-numeric: tabular-nums; }
.still-preview { background: #255a69; }
.still-preview[data-palette="grove"] { background: #41562c; }
.still-preview[data-palette="night"] { background: #4c3564; }
.studio-disciplines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; border-top: 1px solid var(--line); padding-top: .75rem; margin-top: 1.15rem; }
.studio-disciplines dt { font-weight: 780; color: var(--accent); }
.studio-disciplines dd { font-size: .875rem; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-top: 1.15rem; }
.contact-actions .action { margin: 0; }
.copy-email { min-width: 48px; display: grid; place-items: center; }
.copy-status { margin-top: .4rem; font-size: .8125rem; color: var(--accent); }

[data-interface] body { overflow: hidden; }
[data-interface] .site-header { position: fixed; inset: 0 0 auto; background: transparent; }
[data-interface] #flight-stage, [data-interface] .world { position: fixed; inset: 0; }
[data-interface] .island-panel {
  position: absolute;
  z-index: 2;
  top: calc(var(--header) + .85rem);
  right: var(--gutter);
  width: min(26rem, 42vw);
  max-height: calc(100% - var(--header) - var(--bottom) - .85rem);
  display: flex;
  flex-direction: column;
  border: 1px solid #e7d8ca42;
  border-radius: 14px;
  background: #181f32f7;
}
[data-interface] .island-panel:not([data-open]) { display: none; }
[data-interface] .panel-content { overflow: auto; overscroll-behavior: contain; scrollbar-color: #726579 transparent; }
[data-interface] .island { padding-top: .25rem; }
.legacy-anchor { display: block; height: 0; }

.icon-control { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: .45rem; border: 0; border-radius: 7px; background: transparent; color: var(--paper); cursor: pointer; touch-action: manipulation; }
.icon-control:hover, .icon-control:active { background: #f8debf23; color: var(--accent); }
.theme-toggle { border: 1px solid #fff3; background: #12182bc9; }
.theme-toggle[aria-pressed="true"] { color: #ffdeae; }
.flight-hint { position: fixed; z-index: 3; inset: auto 0 var(--bottom); margin-inline: auto; width: fit-content; max-width: min(31rem, 100% - 2 * var(--gutter)); display: flex; align-items: center; gap: .6rem; padding: .54rem .75rem; border: 1px solid #fff3; border-radius: 8px; background: #131a2ded; color: #f3edf0; font-size: .875rem; font-weight: 640; line-height: 1.42; pointer-events: none; }
.flight-hint svg { color: #ffe1b9; }
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-touch { display: inline; }
  .hint-pointer { display: none; }
}

@media (max-width: 43rem) {
  :root { --header: calc(6.6rem + var(--safe-top)); --bottom: calc(.85rem + var(--safe-bottom)); }
  .header-row { grid-template-columns: 1fr auto; grid-template-rows: 3.25rem auto; gap: .18rem .75rem; padding-bottom: .32rem; }
  .header-row .route { grid-row: 2; grid-column: 1 / -1; justify-content: space-around; }
  .world::before { background-image: var(--phone); }
  .route a { padding-inline: .42rem; font-size: .8125rem; }
  [data-interface] .island-panel { inset: auto var(--gutter) var(--bottom); width: auto; max-height: min(49dvh, 100dvh - var(--header) - var(--bottom) - .85rem); }
}
@media (max-height: 29rem) and (orientation: landscape) {
  [data-interface] .island-panel { top: calc(var(--header) + .3rem); bottom: var(--bottom); }
  .island { padding-bottom: .8rem; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-interface] .island-panel[data-open] { animation: land 250ms var(--ease-out) both; }
  @keyframes land { from { opacity: 0; transform: translateY(.55rem); } }
}
@media (prefers-reduced-motion: reduce) {
  [data-interface] .island-panel[data-open] { animation: none; }
}