/* LUNARTECH Academy: Our Story (/about/our-story), generated by tools/our-story/build.mjs. Pure black, white type, the home page's fonts (Inter 300, Geist 300), no grey and no lines.
   One picture and the story. The ring stays on the left and turns as you read (js/lunartech-our-story.js); the story passes on the right, one part at a time. On phones the ring sits above the text.
   The header's glass is shared (lunartech-header-hero.css): don't restyle it here, and no blend modes on this page, because they stop it blurring. Nothing here uses 100vw, so the page never scrolls sideways. */

html:has(body.os-body) { background-color: #000; }
body.os-body { --os-gut: clamp(20px, 6vw, 110px); margin: 0; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.os-body ::selection { background: #fff; color: #000; }

.os-main { position: relative; display: block; overflow-x: clip; background-color: #000; color: #fff; font-family: 'Inter', sans-serif; font-weight: 300; }
.os-main :focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

.os-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 6rem); padding: 0 var(--os-gut); }

/* ---------- The ring ---------- */

.os-art { position: sticky; top: 0; display: flex; align-self: start; align-items: center; justify-content: center; height: 100vh; height: 100svh; overflow: clip; }
.os-ring { display: block; width: min(100%, 94vh); max-width: none; height: auto; transform-origin: 50% 50%; will-change: transform; }

/* ---------- The story ---------- */

.os-text { min-width: 0; }
.os-open, .os-part { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.os-open { min-height: 100vh; min-height: 100svh; padding: 6rem 0 3rem; }
.os-part { min-height: 72vh; padding: 3rem 0; }
.os-part:last-child { padding-bottom: 7rem; }

.os-main h1.os-title { margin: 0 0 1.4rem; font-family: 'Inter', sans-serif; font-size: clamp(2.8rem, 4.4vw, 4.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; color: #fff; text-transform: none; }
.os-main h2.os-h { max-width: 15em; margin: 0 0 1.5rem; font-family: 'Inter', sans-serif; font-size: clamp(1.75rem, 2.7vw, 2.8rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.018em; color: #fff; text-transform: none; }
.os-main p.os-p { max-width: 35rem; margin: 0; font-family: 'Geist', sans-serif; font-size: clamp(16px, 1.15vw, 18px); font-weight: 300; line-height: 1.65; letter-spacing: 0; color: #fff; }
.os-main p.os-p + p.os-p { margin-top: 1.1em; }

.os-main a.os-link { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-underline-offset 0.25s ease; }
.os-main a.os-link:hover { color: #fff; text-underline-offset: 0.34em; }

/* ---------- The home page's numbers, in the story's column ---------- */

.os-body .os-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem) 2rem; max-width: 35rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.os-body .os-metrics .lt-metric { gap: 0.6rem; }
.os-body .os-metrics .lt-metric-num { font-family: 'Inter', sans-serif; font-size: clamp(2.4rem, 3.2vw, 3.4rem); color: #fff; }
.os-body .os-metrics .lt-metric-desc { max-width: 26ch; font-family: 'Geist', sans-serif; font-size: 14px; line-height: 1.55; color: #fff; }

/* ---------- Arriving: each part once, as it comes into view. Set only by the script, and only for parts still below the screen, so nothing is ever hidden without it. ---------- */

.os-reveal { transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.os-reveal.is-wait { opacity: 0; transform: translateY(18px); }

/* ---------- Phones and small tablets: the ring above the text ---------- */

@media (max-width: 899px) {
  .os-story { display: block; }
  .os-art { position: relative; height: auto; margin: 4.5rem 0 0; } /* the picture's own black margin is the gap to the title; a negative margin here would cover it */
  .os-ring { width: min(100%, 62vh); }
  .os-open { min-height: 0; padding: 0 0 4.5rem; }
  .os-part { min-height: 0; padding: 0 0 4.5rem; }
  .os-part:last-child { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .os-reveal { transition: none; }
}