/* Technology page: the page-top render and the spine of three scenes.
   The dark shell, the lead block and the research list come from assets/dark/site.css. */
.tech-main { position: relative; }

/* page top: the render lives in the hero only; it fades to paper at the hero's foot and fades
   away as the hero scrolls off. The veil and fall-off are CSS, so they cost the canvas nothing */
.tech-hero { position: relative; display: grid; place-items: center; min-height: 82vh; min-height: 82svh; padding: 96px 24px 64px; text-align: center; }
.threads { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.threads canvas { display: block; width: 100%; height: 100%; }
.threads::before, .threads::after { content: ""; position: absolute; inset: 0; }
.threads::before { background: radial-gradient(ellipse 48% 30% at 50% 50%, rgba(var(--paper-rgb), .88) 0%, rgba(var(--paper-rgb), .62) 55%, rgba(var(--paper-rgb), 0) 100%); }
.threads::after { background: linear-gradient(to bottom, rgba(var(--paper-rgb), 0) 58%, var(--paper) 96%), radial-gradient(ellipse 80% 78% at 50% 50%, rgba(var(--paper-rgb), 0) 45%, rgba(var(--paper-rgb), .72) 100%); }
.hero-copy { position: relative; z-index: 1; }
.tech-hero h1 { max-width: 28ch; margin: 0 auto; font-size: clamp(38px, 5vw, 76px); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; text-shadow: 0 0 40px rgba(var(--paper-rgb), .9); }

/* the intro heading breaks into two lines, as on Dunia */
@media (min-width: 901px) { .tech-page .lead-head { max-width: 230px; } }

/* scenes appear out of the paper */
.js .frame.rise { transform: none; transition: opacity 1.4s ease; }

/* the spine: a sticky index on the left, the three scenes on the right */
.spine { display: grid; grid-template-columns: 240px 1fr; gap: 48px; width: var(--col); margin: 0 auto; padding: 40px 0 48px; }
.spine-index { position: sticky; top: 120px; align-self: start; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.spine-index a { display: flex; font-family: var(--display); align-items: center; gap: 16px; color: rgba(var(--ink-rgb), .28); font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-decoration: none; transition: color .4s ease; }
.spine-index a::before { content: ""; width: 0; height: 1px; background: var(--ink); transition: width .4s ease; }
.spine-index a:hover { color: rgba(var(--ink-rgb), .6); }
.spine-index a.is-active { color: var(--ink); }
.spine-index a.is-active::before { width: 28px; }
.spine-index a:focus-visible { outline: 1px solid var(--purple); outline-offset: 4px; }
.spine-body { display: grid; gap: 200px; }
.part { display: grid; gap: 40px; scroll-margin-top: 96px; }
.part-label { display: none; margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.frame { margin: 0; }
.frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 600; }
.spine-caption { max-width: 560px; margin: 0 0 0 96px; color: var(--soft); font-size: 15px; line-height: 1.6; }

/* the research list follows the spine closely, and the footer follows it */
.spine + .list { padding-top: 80px; padding-bottom: 112px; }

@media (max-width: 900px) {
  .spine { grid-template-columns: 1fr; gap: 32px; }
  .spine-index { display: none; }
  .spine-body { gap: 140px; }
  .part { gap: 24px; }
  .part-label { display: block; }
  .spine-caption { margin-left: 0; padding-left: 0; }
  .spine + .list { padding-top: 20px; padding-bottom: 80px; }
}
/* phones: the scenes run to the screen edges and stand taller, seen through a camera (phone.js) */
@media (max-width: 700px) {
  .frame { margin-inline: -24px; }
  .frame canvas { aspect-ratio: 10 / 13; }
}
@media (prefers-reduced-motion: reduce) {
  .js .frame.rise { opacity: 1; transition: none; }
  .spine-index a, .spine-index a::before { transition: none; }
}