/* 04 / ORBIT — an architectural poster and a circular exhibition stage. */
body[data-concept=orbit] {
  --paper: #f3f5ee;
  --ink: #202823;
  --muted: #525e50;
  --accent: #526d13;
  --line: #bfc8b2;
  --scene: #e5eadb;
  --lime: #d3ed70;
}
[data-concept=orbit] .masthead { background: #f3f5eef5; border-bottom-color: #20282322; }
[data-concept=orbit] .brand svg { color: var(--ink); }
[data-concept=orbit] .concept-nav a[aria-current] { background: var(--lime); border-color: transparent; }
.orbit-hero { min-height: 880px; height: 110svh; max-height: 1250px; overflow: hidden; background: var(--paper); }
.orbit-topline { position: absolute; top: calc(var(--header) + 30px); inset-inline: var(--gutter); display: flex; justify-content: space-between; }
.orbit-word { position: absolute; top: calc(var(--header) + 42px); left: calc(var(--gutter) - 13px); font-size: clamp(12rem,29vw,34rem); font-weight: 600; line-height: .82; letter-spacing: -.09em; color: #283a27; user-select: none; }
.orbit-window { position: absolute; width: min(54vw,780px); aspect-ratio: 1; right: 6%; top: 20%; border-radius: 50%; overflow: hidden; background: #dce3d2; box-shadow: 0 0 0 1px #f3f5ee; }
.orbit-window img { object-position: center; }
.orbit-window::after { content: ''; position: absolute; inset: 0; border: 1px solid #17271620; border-radius: 50%; pointer-events: none; }
.orbit-caption { position: absolute; right: var(--gutter); top: calc(var(--header) + 100px); display: grid; gap: 4px; text-align: right; color: var(--muted); }
.orbit-caption>span:last-child { font-size: .75rem; }
.orbit-copy { position: absolute; left: var(--gutter); bottom: 135px; max-width: 720px; z-index: 3; }
.orbit-copy .eyebrow { margin-bottom: 18px; font-size: .875rem; }
.orbit-copy h1 { font-size: clamp(3.5rem,6.2vw,7rem); letter-spacing: -.067em; line-height: .98; font-weight: 500; }
.orbit-copy h1 em { font-family: Georgia,'Times New Roman',serif; font-style: italic; font-weight: 400; color: var(--ink); }
.orbit-enter { position: absolute; right: var(--gutter); bottom: 132px; width: 177px; height: 177px; padding: 30px; border-radius: 50%; background: var(--lime); display: flex; flex-direction: column; justify-content: space-between; font-size: 1rem; line-height: 1.3; z-index: 4; transition: background .25s, transform .25s; }
.orbit-enter>span:last-child { align-self: flex-end; font-size: 2rem; }
.orbit-enter:hover { background: #c4e953; transform: rotate(-7deg); }
.orbit-baseline { position: absolute; bottom: 30px; inset-inline: var(--gutter); border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; gap: 30px; font-size: .875rem; }
.orbit-baseline>a { display: flex; align-items: center; gap: 30px; }
.orbit-baseline>a>span { font-size: 1.3rem; }
[data-concept=orbit] .experience { height: 250svh; }
[data-concept=orbit] .experience__sticky { background: var(--scene); }
[data-concept=orbit] .experience__title { top: 165px; max-width: none; left: var(--gutter); }
[data-concept=orbit] .experience__title h2 { font-size: clamp(3rem,5vw,5.5rem); }
[data-concept=orbit] .experience__title h2 em { font-family: Georgia,'Times New Roman',serif; font-weight: 400; }
[data-concept=orbit] .experience__title p { max-width: 210px; }
[data-concept=orbit] .stage { inset: 145px 0 195px 22%; }
[data-concept=orbit] .cfg { justify-content: flex-end; }
[data-concept=orbit] .seg { border: none; background: #f6f8f0; }
[data-concept=orbit] .seg button[aria-pressed=true] { background: #303b2b; color: #e5f1c6; }
[data-concept=orbit] .experience__progress i { background: #718e2b; }
@media(min-width:1800px) {
 .orbit-window { right: 12%; top: 18%; width: min(52vw,900px); }
 .orbit-word { font-size: 32rem; }
}
@media(max-width:1180px) {
 .orbit-window { width: 64vw; right: 2%; top: 23%; }
 .orbit-copy { bottom: 160px; }
 .orbit-copy h1 { font-size: 6.8vw; }
 .orbit-enter { width: 145px; height: 145px; padding: 24px; bottom: 155px; font-size: .875rem; }
 [data-concept=orbit] .stage { left: 14%; }
}
@media(max-width:800px) {
 .orbit-hero { min-height: 1010px; height: 110svh; }
 .orbit-word { top: 187px; font-size: 29vw; left: 18px; }
 .orbit-topline { top: 148px; }
 .orbit-window { width: 74vw; right: -2%; top: 260px; }
 .orbit-caption { top: 310px; left: var(--gutter); right: auto; text-align: left; }
 .orbit-caption .mono { max-width: 90px; }
 .orbit-caption>span:last-child { max-width: 95px; }
 .orbit-copy { bottom: 148px; }
 .orbit-copy h1 { font-size: 4.2rem; }
 .orbit-copy .eyebrow { max-width: 190px; }
 .orbit-enter { width: 112px; height: 112px; right: 28px; bottom: 318px; padding: 20px; font-size: .75rem; }
 .orbit-enter>span:last-child { font-size: 1.6rem; }
 .orbit-baseline>span { max-width: 220px; }
 [data-concept=orbit] .experience__title { top: 205px; }
 [data-concept=orbit] .experience__title h2 { font-size: 3rem; }
 [data-concept=orbit] .stage { inset: 285px 0 240px; }
 [data-concept=orbit] .cfg { justify-content: center; }
}
@media(max-width:560px) {
 .orbit-hero { min-height: 1010px; height: auto; max-height: none; }
 .orbit-topline { top: 146px; }
 .orbit-topline .mono { font-size: .75rem; }
 .orbit-word { top: 198px; font-size: 29vw; left: 18px; }
 .orbit-window { width: 90vw; right: -8%; top: 320px; }
 .orbit-caption { top: 294px; inset-inline: var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
 .orbit-caption .mono, .orbit-caption>span:last-child { max-width: none; font-size: .75rem; }
 .orbit-copy { bottom: 148px; right: var(--gutter); }
 .orbit-copy h1 { font-size: clamp(2.7rem,10.3vw,3.7rem); line-height: 1.02; }
 .orbit-copy .eyebrow { font-size: .75rem; margin-bottom: 16px; max-width: none; }
 .orbit-enter { width: 103px; height: 103px; left: 22px; right: auto; top: 535px; bottom: auto; }
 .orbit-baseline { bottom: 30px; font-size: .75rem; gap: 20px; align-items: start; }
 .orbit-baseline>span { max-width: 140px; }
 .orbit-baseline>a { max-width: 150px; gap: 15px; }
 [data-concept=orbit] .experience__title { top: 208px; }
 [data-concept=orbit] .experience__title h2 { font-size: 2.8rem; }
 [data-concept=orbit] .stage { inset: 315px -3% 260px; }
}
@media(max-height:760px), (prefers-reduced-motion:reduce) {
 [data-concept=orbit] .experience { height: auto; }
}
[data-concept=orbit] .experience.is-static { height: auto; }
[data-concept=orbit] .experience.is-static .stage { inset: 330px var(--gutter) 120px; }