/* Keep transparent artwork inside a stable frame at every viewport width. */
.chrono-clock img{width:min(90%,400px);height:auto;max-height:400px;transform-origin:50% 1.3%}
.clock-orbit{width:min(80%,360px);max-height:360px}
.chrono-heading>div>p:not(.eyebrow){font-size:14px;color:#aabbac;margin-top:30px;line-height:1.6}
.chrono-guide-link{display:inline-flex;align-items:center;gap:35px;margin-top:24px;background:#dabc73;color:#0b1e22;padding:14px 20px;border-radius:30px;font-size:9px;font-weight:700;letter-spacing:.04em;transition:background .2s,gap .2s}
.chrono-guide-link:hover{background:#f3e7c9;gap:45px}.chrono-guide-link>span{font-size:20px;line-height:1}
.builder-layout>*{min-width:0}.builder-portrait{width:100%;max-width:640px;justify-self:center;height:auto;aspect-ratio:4/5;max-height:min(72svh,720px);align-self:start}
.builder-portrait>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center bottom;transform:none!important}
.portrait-caption{padding:6px 8px;background:#282c20c9;border-radius:3px;z-index:2}
.builder-copy h2{font-size:clamp(36px,4.5vw,75px)}
.principles.scroll-principles{min-height:var(--principles-height,310px)}
.scroll-principles details{overflow:hidden;box-sizing:border-box;transition:color .25s,background .25s}
.scroll-principles details.is-current{background:#282c2005}
.scroll-principles details.is-current summary{color:var(--olive)}
.scroll-principles details:not(.is-current) summary{color:#727969}
.principle-body{overflow:hidden}
.hero-controls{display:contents}
.hero-controls .scroll-cue{bottom:24px}
.hero-tilt{border:1px solid var(--line);border-radius:30px;background:var(--cream);color:var(--olive);padding:11px 12px;font-size:8px;font-weight:650;text-transform:uppercase}
.hero-tilt[hidden]{display:none}
.hero-tilt[aria-pressed=true]{background:var(--lime)}
.hero-tilt:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
/* The pin clips its track; the section must not become a Safari scroll container. */
.visual-journey.motion-ready{overflow:visible}
.motion-ready .journey-track{will-change:transform}
@media(pointer:coarse) and (min-width:701px){
  .hero-controls{position:absolute;top:240px;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:5}
  .hero-controls .scroll-cue{position:static;transform:none;margin-left:auto;min-height:44px}
  .hero-tilt{min-height:44px}
}
@media(max-width:700px){
  /* Controls stay in the clear space below the title, above the portrait. */
  .hero-controls{position:absolute;top:240px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:5}
  .hero-controls .scroll-cue{position:static;transform:none;margin-left:auto;font-size:7px;gap:8px;flex-shrink:0;min-height:44px}
  .hero-tilt{font-size:7px;padding:10px 9px;min-height:44px}
  .chrono-clock img{height:auto;max-height:320px}.clock-orbit{max-height:260px}
  .chrono-heading>div>p:not(.eyebrow){font-size:11px;margin-top:35px;max-width:235px}
  .chrono-heading>div:first-child{pointer-events:auto}.chrono-guide-link{font-size:8px;padding:12px 16px;gap:25px;margin-top:20px}
  .builder-portrait{aspect-ratio:1;max-height:440px;position:relative;top:0}
  .builder-portrait>img{aspect-ratio:auto;object-position:center bottom}
  .builder-copy h2{font-size:12vw}.portrait-caption{left:15px;bottom:15px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.scroll-principles details{transition:none}}