/* SPACE Studios mockup: shared styles */
  :root {
    --bg: #ffffff;
    --ink: #000000;
    --muted: #707070;
    --rule: #e6e6e6;
    --side: 290px;
    --gap: 20px;
    --pad: 32px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.35;
  }
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- Left column ---------- */
  .side {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--side);
    padding: var(--pad) 20px var(--pad) var(--pad);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .side::-webkit-scrollbar { display: none; }
  .logo { display: block; width: 132px; margin-bottom: 22px; }
  .logo img { display: block; width: 132px; height: auto; }

  /* Logo hover: a disc crosses the logo like an eclipse, inverting what it covers,
     and each letter lifts as the disc passes. The logo is one PNG shown five times,
     each copy clipped to one piece (disc and S, then P, A, C, E). */
  .side { background: var(--bg); isolation: isolate; } /* the backdrop the disc inverts against, past the logo's edges too */
  .mark { display: block; position: relative; }
  .mark img { position: absolute; top: 0; left: 0; }
  .mark img:first-child { position: relative; clip-path: inset(0 64.67% 0 0); }
  .mark img:first-child { transform-origin: 16.33% 50%; }
  /* --at: lift timing in the eclipse. --pass: dip timing in the orbit.
     --dx: distance to the planet's center. --n: stagger in the black hole. */
  .mark .p { clip-path: inset(0 49% 0 35.33%);    transform-origin: 44% 50%; --at: 581ms; --pass: 824ms;  --dx: -27.9%; --n: 0ms; }
  .mark .a { clip-path: inset(0 30.5% 0 51%);     transform-origin: 60% 50%; --at: 678ms; --pass: 905ms;  --dx: -43.7%; --n: 70ms; }
  .mark .c { clip-path: inset(0 14.5% 0 69.5%);   transform-origin: 77% 50%; --at: 787ms; --pass: 994ms;  --dx: -60.7%; --n: 140ms; }
  .mark .e { clip-path: inset(0 0 0 85.5%);       transform-origin: 94% 50%; --at: 909ms; --pass: 1094ms; --dx: -77.5%; --n: 210ms; }
  .mark .eclipse {
    position: absolute; top: 0; left: 0;
    height: 100%; aspect-ratio: 1; border-radius: 50%;
    background: #fff; mix-blend-mode: difference;
    pointer-events: none; visibility: hidden;
  }
  .playing .eclipse { visibility: visible; }

  /* Effect 1: the eclipse crosses the word. */
  .fx-cross .eclipse { animation: eclipse-cross 2000ms both; }
  .fx-cross .p, .fx-cross .a, .fx-cross .c, .fx-cross .e { animation: eclipse-lift 640ms ease-in-out var(--at) both; }

  /* Effect 2: two laps of a tilted oval around the word, smaller on the far side.
     The path is in pixels for the 132px logo. Letters dip on each near pass. */
  .fx-orbit .eclipse {
    offset-path: path("M145.56 1.72 A82 13 -14 1 0 -13.56 41.4 A82 13 -14 1 0 145.56 1.72 Z");
    animation: orbit-path 2800ms linear both, orbit-depth 2800ms ease-in-out both;
  }
  .fx-orbit .p, .fx-orbit .a, .fx-orbit .c, .fx-orbit .e { animation: orbit-dip 1960ms ease-in-out var(--pass) both; }

  /* Effect 3: the letters spiral into the planet, it inverts, and they burst back out. */
  .fx-hole .eclipse { animation: hole-core 2400ms ease-in-out both; }
  .fx-hole img:first-child { animation: hole-gulp 2400ms ease-in-out both; }
  .fx-hole .p, .fx-hole .a, .fx-hole .c, .fx-hole .e { animation: hole-letter 2400ms var(--n) both; }

  @keyframes orbit-path { from { offset-distance: 0%; } to { offset-distance: 200%; } }
  @keyframes orbit-depth {
    0%    { transform: scale(0); }
    12.5% { transform: scale(.5); }
    25%   { transform: scale(.66); }
    37.5% { transform: scale(.95); }
    50%   { transform: scale(.66); }
    62.5% { transform: scale(.5); }
    75%   { transform: scale(.66); }
    87.5% { transform: scale(.95); }
    100%  { transform: scale(0); }
  }
  @keyframes orbit-dip {
    0%, 28.57%, 71.43%, 100% { transform: translateY(0) rotate(0deg); }
    10%, 81.43% { transform: translateY(7%) rotate(3deg); }
    20%, 91.43% { transform: translateY(-2%) rotate(-1deg); }
  }
  @keyframes hole-letter {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
    28%  { transform: translate(calc(var(--dx) * .55), -10%) rotate(-70deg) scale(.7); animation-timing-function: cubic-bezier(.4, .3, .9, .7); }
    38%, 62% { transform: translate(var(--dx), 0) rotate(-240deg) scale(0); animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
    84%  { transform: translate(calc(var(--dx) * -.05), 0) rotate(8deg) scale(1.06); animation-timing-function: ease-in-out; }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  }
  @keyframes hole-core {
    0%, 44% { transform: scale(0); }
    54%, 62% { transform: scale(1); }
    72%, 100% { transform: scale(0); }
  }
  @keyframes hole-gulp {
    0%, 32% { transform: scale(1); }
    42% { transform: scale(1.1); }
    52% { transform: scale(1); }
    62% { transform: scale(.92); }
    70% { transform: scale(1.06); }
    82%, 100% { transform: scale(1); }
  }

  /* Starts past the left edge of the screen, stops just right of the E, then shrinks away. */
  @keyframes eclipse-cross {
    0%   { transform: translateX(-180%) scale(1); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    78%  { transform: translateX(325%) scale(1); }
    82%  { transform: translateX(325%) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
    100% { transform: translateX(325%) scale(0); }
  }
  @keyframes eclipse-lift {
    0%, 100% { transform: none; }
    35% { transform: translateY(-9%) rotate(-4deg); }
    70% { transform: translateY(2%) rotate(1deg); }
  }
  .nav { list-style: none; margin-bottom: 22px; }
  .nav li { margin-bottom: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  .label { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
  .year { display: grid; grid-template-columns: 36px 1fr; margin-bottom: 10px; }
  .year .yr { font-style: italic; font-variant-numeric: tabular-nums; }
  .year ul { list-style: none; }
  .year li { margin-bottom: 1px; white-space: nowrap; }

  /* ---------- Main ---------- */
  main {
    margin-left: var(--side);
    padding: var(--pad) var(--pad) 64px 8px;
    max-width: 1800px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px var(--gap);
  }
  .tile .img {
    display: block; width: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
    background: #f1f1f1;
  }
  .tile.ph .img {
    display: flex; align-items: center; justify-content: center;
    color: #b0b0b0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  }
  .tile figcaption { margin-top: 6px; text-align: left; }
  .tile .t { display: block; font-weight: 700; }
  .tile .m { display: block; }

  section.block {
    border-top: 1px solid var(--rule);
    margin-top: 44px; padding-top: 14px;
  }
  section.block h2 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 10px;
  }
  .about p { max-width: 70ch; font-size: 14px; line-height: 1.5; }
  .block p { margin-bottom: 2px; }
  .note { font-style: italic; }
  .role { font-style: italic; }

  .logos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 36px;
    align-items: center;
    max-width: 980px;
  }
  .logos a { display: flex; align-items: center; justify-content: center; height: 56px; }
  .logos img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .9; }
  .logos a:hover img { opacity: 1; }

  footer { margin-top: 48px; color: var(--muted); }

  /* ---------- Small screens ---------- */
  @media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    :root { --pad: 16px; --gap: 14px; }
    .side { position: static; width: auto; padding: 18px 16px 0; }
    .projects { display: none; }
    .nav { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-bottom: 18px; }
    .logo { margin-bottom: 14px; }
    main { margin-left: 0; padding: 0 16px 48px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
    section.block { margin-top: 36px; }
    .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
    .logos a { height: 44px; }
  }

/* ---------- Project page ---------- */
.grid > a:hover { text-decoration: none; }
.grid > a:hover .t { text-decoration: underline; text-underline-offset: 2px; }
.back { display: inline-block; margin-bottom: 18px; }
.proj-head { margin-bottom: 18px; }
.proj-head h1 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.proj-head .m { margin-top: 2px; }
.hero { display: block; width: 100%; max-height: 78vh; object-fit: contain; object-position: left top; background: #fff; }
.proj-body { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: 32px; margin: 24px 0 32px; }
.proj-body p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.facts { list-style: none; }
.facts li { display: grid; grid-template-columns: 96px 1fr; margin-bottom: 3px; }
.facts .k { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; padding-top: 1px; }
.scope { margin: 6px 0 0 16px; font-size: 14px; line-height: 1.5; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery .wide { grid-column: 1 / -1; }
.next { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; }
@media (max-width: 760px) {
  .proj-body { grid-template-columns: 1fr; gap: 16px; }
  .gallery { grid-template-columns: 1fr; }
}

.year a[aria-current="page"] { font-weight: 700; }

/* ---------- Bold years ---------- */
.year .yr { font-weight: 700; font-style: normal; }

/* ---------- Hover zoom ---------- */
.zoom { display: block; overflow: hidden; }
.zoom img { display: block; transition: transform .6s cubic-bezier(.2,.6,.2,1); will-change: transform; }
.zoom:hover img { transform: scale(1.04); }
.hero-wrap { max-height: 78vh; }
.gallery video { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } .zoom:hover img { transform: none; } }

/* ---------- Team page ---------- */
.team { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.member { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; scroll-margin-top: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.member .face { width: 180px; height: 180px; overflow: hidden; background: #f1f1f1; display: flex; align-items: center; justify-content: center; }
.member .face img { width: 100%; height: 100%; object-fit: cover; }
.ph-face { font-weight: 700; font-size: 20px; color: #9a9a9a; }
.member h3 { font-size: 14px; font-weight: 700; }
.member .bio { font-size: 13px; line-height: 1.45; margin: 6px 0; max-width: 46ch; }
.member .links a { text-decoration: underline; text-underline-offset: 2px; }
.member:target h3 { text-decoration: underline; text-underline-offset: 3px; }
.studio-links { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .member { grid-template-columns: 1fr; gap: 12px; } .member .face { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 360px; } }

/* ---------- v3: background fade, tighter 4x5 grid, pages ---------- */
html { background: #e9e9e9; }
body { background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 45%, #e9e9e9 100%) fixed; min-height: 100vh; }
.grid { gap: 16px 12px; }
.tile figcaption { margin-top: 5px; }
.logos img { filter: brightness(0); }
.logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 30px; max-width: 1100px; }
.logos a { height: 50px; }
.more { margin-top: 8px; }
.btn { display: inline-block; background: #000; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; padding: 11px 18px; border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { background: #333; text-decoration: none; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.intro { font-size: 14px; line-height: 1.5; max-width: 62ch; margin-bottom: 16px; }
.prose { max-width: 70ch; margin-top: 24px; }
.prose .lede { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
.prose h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 8px; }
.prose p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.services { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; max-width: 980px; }
.services li strong { display: block; }
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.process img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.process h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 3px; }
.process p { font-size: 13px; line-height: 1.45; }
.pubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
.pub-ph { aspect-ratio: 16 / 9; background: rgba(0,0,0,.06); margin-bottom: 10px; }
.pub h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.pub p { font-size: 13px; line-height: 1.45; }
.form { display: grid; gap: 14px; max-width: 680px; margin-top: 22px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.form input, .form select, .form textarea { font: 14px Arial, sans-serif; text-transform: none; letter-spacing: 0; padding: 9px 10px; border: 1px solid #c8c8c8; background: #fff; color: #000; border-radius: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #000; outline-offset: -1px; }
.form .btn { justify-self: start; }
.small { font-size: 11px; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .services, .pubs, .process, .form .row { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- v4: 5 x 8 grid, tight captions ---------- */
.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 10px; }
.tile figcaption { margin-top: 3px; line-height: 1.15; }
.tile .t, .tile .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.tile.ph .img { font-size: 10px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } }

.hero { background: transparent; }

/* ---------- v5: plain white, no fade ---------- */
html, body { background: #ffffff; }

/* ---------- v6: Installations / Murals split ---------- */
.work + .work { margin-top: 30px; }
.work-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.projects .label + .year { margin-top: 0; }
.projects .year + .label { margin-top: 20px; }