.orrery-page { background: #fff; }
.orrery-page .site-header { color: #fff; max-width: none; }
.orrery-world { --studio-inset: clamp(24px,4.8vw,100px); position: relative; z-index: 1; color: #f4f4f4; background: #050505; }
.orrery-world [hidden] { display: none !important; }
.orrery-world h1,.orrery-world h2 { font-weight: 400; }
.orrery-world p { font-size: clamp(19px,1.6vw,25px); line-height: 1.5; letter-spacing: -.025em; }
.orrery-world a { text-underline-offset: .25em; }
/* Composite small type in grayscale as well, avoiding colored LCD edge pixels. */
.orrery-world p,.orrery-world a,.orrery-world button,.orrery-page .site-header { filter: grayscale(1); }
.orrery-motion-sequence { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); padding-inline: var(--studio-inset); align-items: start; }
.orrery-story { grid-column: 1/-1; grid-row: 1; min-width: 0; pointer-events: none; }
.orrery-story a { pointer-events: auto; }
.orrery-opening { min-height: 100svh; padding-block: clamp(110px,14svh,160px) clamp(45px,8svh,100px); display: flex; flex-direction: column; align-items: start; }
.orrery-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; margin-bottom: clamp(38px,6svh,75px); }
.orrery-hero-title { position: relative; z-index: 2; }
.orrery-hero-title h1 { font-size: min(17.4vw,26svh,340px); line-height: .95; letter-spacing: -.075em; }
.orrery-hero-title h1>span { display: block; }
.orrery-hero-title h1>span+span { font-size: .63em; line-height: 1.1; letter-spacing: -.075em; margin-top: .12em; margin-left: .04em; }
.orrery-world .orrery-history { margin-top: auto; padding-top: 45px; font-size: 18px; line-height: 1.6; letter-spacing: -.018em; }
.orrery-history span { display: block; }
.orrery-history span+span { color: #929292; }
.orrery-character { position: sticky; grid-column: 7/-1; grid-row: 1; z-index: 1; top: 100px; height: calc(100svh - 150px); min-height: 470px; width: calc(100% + 4vw); margin-left: -1vw; touch-action: pan-y; outline-offset: -10px; }
.orrery-character canvas,.orrery-character-drawing { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: grayscale(1); }
.orrery-character canvas,.orrery-material-stage canvas { opacity: 0; }
.orrery-character.is-ready canvas,.orrery-material-stage.is-ready canvas { opacity: 1; }
.orrery-character.is-ready .orrery-character-drawing,.orrery-material-stage.is-ready .orrery-material-drawing { opacity: 0; pointer-events: none; }
.orrery-axes { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.orrery-character.is-ready .orrery-axes { opacity: 1; }
.orrery-axes span { position: absolute; font-size: 11px; color: #888; transform: translate(-50%,-50%); }
.orrery-movement { width: 43%; min-height: 78svh; display: flex; flex-direction: column; justify-content: center; align-items: start; padding-block: 70px 130px; }
.orrery-movement h2 { font-size: clamp(48px,6vw,116px); line-height: 1.08; letter-spacing: -.065em; }
.orrery-movement p { margin-top: 32px; max-width: 29ch; color: #aaa; }
.orrery-materials { position: relative; padding-top: clamp(80px,9vw,180px); }
.orrery-materials h2 { position: relative; z-index: 2; padding-inline: var(--studio-inset); font-size: clamp(72px,13.3vw,260px); line-height: 1.02; letter-spacing: -.075em; pointer-events: none; }
.orrery-material-room { position: relative; margin-top: -3vw; }
.orrery-material-stage { position: relative; height: clamp(420px,75svh,940px); background: #050505; touch-action: pan-y; outline-offset: -10px; }
.orrery-material-stage canvas,.orrery-material-drawing { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: grayscale(1); }
.orrery-material-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#050505,transparent 12%,transparent 82%,#050505); }
.orrery-material-picker { position: absolute; z-index: 2; right: var(--studio-inset); bottom: 20px; display: flex; gap: clamp(24px,3vw,48px); }
.orrery-material-picker button { min-height: 48px; padding: 8px 0; background: none; border: 0; font-size: clamp(20px,2vw,30px); line-height: 1.4; letter-spacing: -.035em; color: #777; }
.orrery-material-picker button[aria-pressed=true] { color: #fff; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.orrery-material-picker button:hover { color: #fff; }
.orrery-world .orrery-shader-copy { padding: 28px var(--studio-inset) 0; color: #a0a0a0; }
.orrery-production { padding: clamp(130px,17vw,330px) var(--studio-inset) clamp(100px,12vw,230px); }
.orrery-tool-composition { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px 0; align-items: start; }
.orrery-world .orrery-tool-blender { grid-column: 1/9; grid-row: 1; font-size: clamp(62px,12vw,230px); line-height: 1.05; letter-spacing: -.07em; }
.orrery-world .orrery-tool-unreal { grid-column: 7/-1; grid-row: 2; font-size: clamp(62px,10vw,190px); line-height: 1.05; letter-spacing: -.07em; color: #a3a3a3; }
.orrery-world .orrery-tool-copy { grid-column: 1/6; grid-row: 2; align-self: end; max-width: 26ch; padding-bottom: 5px; color: #9a9a9a; font-size: clamp(18px,1.5vw,25px); }
.orrery-tool-composition h2 { grid-column: 3/-1; grid-row: 3; font-size: clamp(115px,26vw,500px); line-height: 1; letter-spacing: -.08em; margin-top: 18px; }
.orrery-closing { padding: clamp(80px,9vw,170px) var(--studio-inset) clamp(90px,11vw,220px); }
.orrery-closing h2 { display: flex; gap: .05em; align-items: baseline; font-size: clamp(70px,15.5vw,300px); line-height: 1.1; letter-spacing: -.075em; white-space: nowrap; }
.orrery-closing h2>span:nth-child(2) { color: #555; font-size: .6em; align-self: center; margin-inline: .1em; }
.orrery-closing>p { margin-top: 45px; max-width: 37ch; margin-left: auto; color: #a0a0a0; }
.orrery-closing p a { color: #fff; text-decoration: underline; }
.orrery-page .contact { position: relative; z-index: 0; background: #fff; color: #111; }
@media(max-width:1100px) and (min-width:801px) and (min-height:601px) {
  .orrery-hero-title h1 { font-size: 17vw; }
  .orrery-movement h2 { font-size: 5.7vw; }
  .orrery-world .orrery-history { font-size: 17px; }
  .orrery-character { grid-column: 6/-1; }
}
@media(max-width:800px), (max-height:600px) {
  .orrery-world { --studio-inset: clamp(22px,5vw,40px); }
  .orrery-motion-sequence { display: flex; flex-direction: column; padding-inline: var(--studio-inset); }
  .orrery-story { display: contents; }
  .orrery-opening { order: 0; min-height: 0; width: 100%; padding-block: 110px 0; }
  .orrery-back { margin-bottom: 38px; font-size: 17px; }
  .orrery-hero-title h1 { font-size: clamp(76px,25.5vw,200px); line-height: .97; }
  .orrery-hero-title h1>span+span { font-size: .61em; margin-top: .14em; }
  .orrery-world .orrery-history { padding-top: 0; margin-top: 28px; font-size: 16px; }
  .orrery-character { order: 1; position: relative; top: auto; width: calc(100% + 8vw); margin: -12px -4vw 0; height: min(116vw,680px); min-height: 370px; }
  .orrery-movement { order: 2; width: 100%; min-height: 0; padding-block: 45px 80px; }
  .orrery-movement h2 { font-size: clamp(48px,11vw,80px); }
  .orrery-movement p { margin-top: 25px; max-width: 32ch; }
  .orrery-world p { font-size: 20px; }
  .orrery-materials { padding-top: 50px; }
  .orrery-materials h2 { font-size: clamp(66px,18.5vw,145px); }
  .orrery-material-room { margin-top: 0; }
  .orrery-material-stage { height: clamp(360px,63svh,640px); }
  .orrery-material-picker { right: auto; left: var(--studio-inset); bottom: 0; gap: 28px; }
  .orrery-material-picker button { font-size: 22px; }
  .orrery-world .orrery-shader-copy { padding-top: 25px; font-size: 18px; }
  .orrery-production { padding-block: 130px 110px; }
  .orrery-tool-composition { gap: 25px 0; }
  .orrery-world .orrery-tool-blender { font-size: 19vw; grid-column: 1/-1; }
  .orrery-world .orrery-tool-unreal { font-size: 18vw; grid-column: 5/-1; }
  .orrery-world .orrery-tool-copy { grid-column: 1/-1; grid-row: 4; font-size: 18px; padding-top: 22px; }
  .orrery-tool-composition h2 { grid-column: 2/-1; font-size: 31vw; margin-top: 4px; }
  .orrery-closing { padding-block: 45px 90px; }
  .orrery-closing h2 { font-size: 15.8vw; }
  .orrery-closing>p { margin-top: 35px; font-size: 20px; max-width: 28ch; }
}
@media(max-width:350px) {
  .orrery-world { --studio-inset: 20px; }
  .orrery-world p,.orrery-closing>p { font-size: 19px; }
  .orrery-world .orrery-history { font-size: 15px; }
  .orrery-hero-title h1 { font-size: 25vw; }
  .orrery-character { min-height: 330px; }
  .orrery-movement h2 { font-size: 42px; }
  .orrery-material-picker { gap: 24px; }
  .orrery-material-picker button { font-size: 20px; }
  .orrery-closing h2 { font-size: 15vw; }
}
@media(prefers-reduced-motion:reduce) {
  .orrery-character { position: relative; top: auto; }
  .orrery-world *, .orrery-world *::before,.orrery-world *::after { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* Homepage ink interactions, with white ink on this page's black ground. */
.orrery-page .nav-ink-default,.orrery-page .nav-ink-fill { color: #fff; }
.orrery-page .nav-ink-alternate { color: #777; }