/* Keep layout fixed: only transform moves and scales the signature. */
:root { --site-max-width: 1440px; --body-copy-width: 280px; --site-edge: max(24px, calc((100vw - var(--site-max-width)) / 2 + 24px)); color-scheme: light; background: #fff; color: #151515; }
* { box-sizing: border-box; }
body { margin: 0; }
a { -webkit-tap-highlight-color: transparent; }
main { max-width: var(--site-max-width); margin-inline: auto; position: relative; min-height: 100svh; overflow: hidden; }
.hero {
  min-height: 100svh;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.about-copy {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, var(--body-copy-width));
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 112px 0;

}
.about-copy,
.index-project p {
  font-family: "Geist", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.04em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 48px; }
.about-content.reveal-pending { opacity: 0; transform: perspective(1200px) translate3d(0, 32px, -40px) rotateX(-18deg); }
.about-content {
  transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg);
  transform-origin: center top;
  backface-visibility: hidden;
  transition: opacity 800ms cubic-bezier(.22, 1, .36, 1), transform 1100ms cubic-bezier(.22, 1, .36, 1);
}
.about-copy a { color: inherit; text-underline-offset: 3px; }
.hero-portrait {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(280px, calc(100vw - 96px), calc(100svh - 200px));
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  transition: opacity 750ms cubic-bezier(.4, 0, .2, 1), transform 750ms cubic-bezier(.4, 0, .2, 1);
}
.hero-portrait.is-muted { opacity: .05; }
.portrait-pending .hero-portrait {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 18px));
  transition: none;
}
.signature {
  position: fixed;
  z-index: 3;
  /* White difference-blends to black on white and inverts darker content. */
  color: #fff;
  mix-blend-mode: difference;
  top: 32px;
  left: 32px;
  width: 240px;
  transform-origin: top left;
}
.signature svg { display: block; width: 100%; height: auto; overflow: visible; }
.signature.is-entering {
  will-change: transform;
  animation: settle 750ms cubic-bezier(.4, 0, .2, 1) 2.25s both;
}
.signature.is-entering path, .signature.is-writing path {
  stroke-dasharray: 1 1;
  animation: write-signature 840ms cubic-bezier(.3, 0, .65, 1) both;
}
.signature.is-entering path + path, .signature.is-writing path + path { animation-duration: 1.26s; animation-delay: 840ms; }
@keyframes write-signature {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes settle {
  from { transform: translate3d(var(--start-x), var(--start-y), 0) scale(1); }
  to { transform: translate3d(0, 0, 0) scale(var(--end-scale)); }
}
/* Desktop motion follows a sampled curve defined in entrance.js. */
@media (min-width: 601px) {
  .signature.is-entering { animation: none; }
}
@media (max-width: 899px) {
  .signature { top: max(24px, env(safe-area-inset-top)); left: 24px; }
}
@media (max-width: 600px) {
  .signature { left: calc(50% - 94.5px); width: 189px; }
  /* Stay centered in a stable viewport when mobile browser controls collapse. */
  .hero-portrait { top: 50svh; }
}
@media (prefers-reduced-motion: reduce) {
  .signature.is-entering, .signature.is-entering path, .signature.is-writing path { animation: none; will-change: auto; }
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.site-nav {
  color: #fff;
  mix-blend-mode: difference;
  position: fixed;
  z-index: 2;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: normal;
  text-align: right;
  transition: opacity 300ms ease-out;
}
.site-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.site-nav a[href], a.signature[href] { cursor: pointer; }
.site-nav a:nth-child(1) { --nav-order: 0; }
.site-nav a:nth-child(2) { --nav-order: 1; }
.site-nav a:nth-child(3) { --nav-order: 2; }
.site-nav a:nth-child(4) { --nav-order: 3; }
.site-nav a:nth-child(5) { --nav-order: 4; }
.site-nav a { position: relative; }
.nav-label { position: relative; display: inline-block; }
.nav-entering .nav-label {
  animation: nav-flow-in 500ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--nav-order) * 70ms);
}
@keyframes nav-flow-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { opacity: .6; }
}
.site-nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.nav-pending .site-nav { opacity: 0; visibility: hidden; transition: none; }
@media (max-width: 600px) {
  .site-nav {
    /* Blend the links inside the frosted panel without inverting the panel. */
    mix-blend-mode: normal;
    top: auto;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    line-height: 16px;
    gap: 16px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 0 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: none;
    transition: opacity 300ms ease-out, box-shadow 250ms ease;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav.has-content-behind { box-shadow: 0 8px 28px rgba(0, 0, 0, .08); }
  .site-nav a { mix-blend-mode: difference; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; }
  .site-nav a:focus-visible { outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
  .hero-portrait, .about-content { transition: none; }
  .nav-entering .nav-label { animation: none; }
}

/* Shared page transitions keep navigation between Tony and Work quiet. */
html { scrollbar-gutter: stable; }
body.page-leaving { pointer-events: none; }


@keyframes page-arrive { from { opacity: 0; } to { opacity: 1; } }

.work-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 72px 52px;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 180px 24px 120px;
}
.work-still { margin: 0; max-width: 100%; text-align: center; }
.still-open {
  display: block;
  width: auto;
  max-width: 100%;
  border: 0;
  padding: 0;
  margin: 0 auto;
  background: none;
  color: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.work-gallery .still-open { width: 84%; aspect-ratio: 1; }
.still-open img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.work-still figcaption {
  max-width: 280px;
  margin: 20px auto 0;
  font: 300 12px/16px "Geist Mono", monospace;
  text-transform: uppercase;
}
.work-still { opacity: 1; transform: translate3d(0, 0, 0); }
.work-still.is-pending { opacity: 0; transform: translate3d(0, 22px, 0); }
.still-open:focus, .still-detail:focus, .detail-close:focus { outline: none; }
.still-open:focus-visible { filter: brightness(.9); }
.detail-close:focus-visible { text-decoration: underline; }
.still-detail.pointer-opened .detail-close:focus,
.still-open.pointer-focused:focus { outline: none; }

.still-detail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 350ms ease, backdrop-filter 450ms ease;
  touch-action: none;
  cursor: zoom-out;
}
.still-detail::backdrop { background: transparent; }
.still-detail.is-open { background: rgba(255, 255, 255, .76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.detail-image { position: absolute; object-fit: contain; transform-origin: top left; user-select: none; -webkit-user-drag: none; touch-action: none; will-change: transform; }
.detail-close {
  position: absolute;
  z-index: 1;
  top: max(24px, env(safe-area-inset-top));
  right: 24px;
  padding: 12px;
  border: 0;
  background: none;
  color: #151515;
  font: 300 12px/16px "Geist Mono", monospace;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.still-detail.is-open .detail-close { opacity: 1; }
body.detail-open { overflow: hidden; }
@media (max-width: 600px) {
  .work-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 144px 24px 80px; gap: 36px 20px; }
  .detail-close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body, .work-still, .still-detail, .detail-close { transition: none; }
  .internal-arrival main, .internal-arrival .hero-portrait, .work-page .site-nav { animation: none; }
}

.signature:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.portrait-pending .work-still { opacity: 0; transform: translate3d(0, 18px, 0); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .signature.is-writing path { animation: none; }
}

/* Full-screen translucent white Elsewhere overlay. */
.elsewhere-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 24px;
  border: 0; background: rgba(255, 255, 255, .92); overflow: auto;
}
.elsewhere-dialog[open] { display: flex; align-items: center; justify-content: center; }
.elsewhere-dialog::backdrop { background: transparent; }
.elsewhere-panel {
  width: min(180px, 100%); padding: 24px 8px;
}
.elsewhere-panel ul { display: flex; flex-direction: column; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.elsewhere-panel a {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; min-height: 24px; color: #151515; text-decoration: none;
  font: 400 13px/20px 'Geist Mono', monospace; text-transform: uppercase;
}
.elsewhere-panel svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 6; stroke-linejoin: round; }
.elsewhere-panel a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.elsewhere-open { overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .elsewhere-panel a:hover { opacity: .6; } }
.elsewhere-panel a[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  .elsewhere-dialog { padding: 16px; }
  .elsewhere-panel a { min-height: 32px; }
}

.elsewhere-dialog:focus { outline: none; }

.site-nav a[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }

@media (max-width: 360px) { .site-nav { font-size: 12px; } }

/* Prevent native touch and keyboard scrolling during the initial signature. */
html.entrance-locked, body.entrance-locked { overflow: hidden; overscroll-behavior: none; touch-action: none; }

/* Align the fixed header with the centered 1440px content area. */
@media (min-width: 601px) {
  .signature { top: 24px; left: var(--site-edge); width: 240px; }
  .site-nav { top: 24px; right: var(--site-edge); }
  .site-nav a:nth-child(2) { --nav-order: 0; }
  .site-nav a:nth-child(3) { --nav-order: 1; }
  .site-nav a:nth-child(4) { --nav-order: 2; }
}

/* The signature links home at every breakpoint. */
.site-nav a:first-child { display: none; }

/* Arrival resets must override native snap and smooth scrolling. */
html.page-position-resetting { scroll-snap-type: none !important; scroll-behavior: auto !important; }

.home-exploring { width: min(var(--body-copy-width), calc(100% - 48px)); margin: 0 auto; padding: 48px 0 144px; border-top: 1px solid #e5e5e2; text-align: center; }
.home-exploring h2 { margin: 0 0 24px; font: 400 11px/20px 'Geist Mono', monospace; text-transform: uppercase; }
.home-exploring p { margin: 0; font: 400 16px/24px 'Geist', sans-serif; letter-spacing: -.04em; }
.home-exploring a { display: inline-block; margin-top: 28px; color: inherit; text-decoration: none; font: 400 11px/20px 'Geist Mono', monospace; text-transform: uppercase; }
.home-exploring a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Independent translation preserves the signature's entrance and write-on motion. */
.site-nav, .signature { transition: translate 550ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease; }
.navigation-hidden .site-nav, .navigation-hidden .signature { translate: 0 calc(-100% - 48px); }
@media(max-width: 600px) { .navigation-hidden .site-nav { translate: 0 calc(100% + 48px); } }
@media(prefers-reduced-motion: reduce) { .site-nav, .signature { transition: none; } }

/* Shared text actions: restrained monospace labels and bracketed symbols. */
.elsewhere-panel a, .home-exploring a, .story-link, .story-panel-close, .detail-close {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 12px/20px 'Geist Mono', monospace; letter-spacing: normal;
  text-transform: uppercase; text-decoration: none;
}
.action-symbol { flex: none; white-space: nowrap; font: inherit; }

/* Consistent page endings. */
.home-exploring, .work-gallery { padding-bottom: 24px; }

/* Give action symbols the same 20px height as their text line. */
.action-symbol { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 20px; }

/* A shared drawing box aligns icons optically with the label's cap height. */
.action-icon, .elsewhere-panel .action-icon {
  display: block; flex: 0 0 16px; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Touch controls should not flash a selection box or select their label. */
button, [role="button"], summary, .elsewhere-panel a, .home-exploring a {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: none) and (pointer: coarse) {
  button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible),
  summary:focus:not(:focus-visible) { outline: none; box-shadow: none; }
}

.work-still figcaption { text-align: left; }

.elsewhere-panel ul { align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto; }
.elsewhere-panel a { justify-content: flex-start; text-align: left; }

.work-still figcaption { text-align: center; }
.elsewhere-panel ul { align-items: center; }
.elsewhere-panel a { justify-content: center; text-align: center; }
.site-nav a[href="#elsewhere"]:focus { outline: none; }
.site-nav a[href="#elsewhere"]:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.about-copy { text-align: center; }