/* The about page tells its story: the opening with the logo mark, then four numbered chapters along a spine. The
   spine lights up from the top as it is read, a small ember dot rides on it at the reading line (sticky at half the window's
   height) and each chapter's node lights as it passes that line. Most chapters are text alone; the first has its
   photo beside the copy and the last one, the company, its facts. */

/* The opening */
.story-open { padding-top: 120px; padding-bottom: 72px; }
.story-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: center; }
.story-head-copy { display: flex; flex-direction: column; gap: 28px; }
.story-kicker { display: inline-flex; align-items: center; font-size: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.about-title { max-width: 8em; }

.mark-wrap { position: relative; display: flex; justify-content: center; isolation: isolate; }
.mark-wrap::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: 480px; height: 480px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--aura-ember), transparent); pointer-events: none; }
.mark .spark { transform-box: fill-box; transform-origin: center; animation: linear infinite both; }
.mark .big { animation-name: rise-big; animation-duration: 3.2s; animation-delay: -.4s; }
.mark .mid { animation-name: rise-mid; animation-duration: 2.6s; animation-delay: -1.5s; }
.mark .small { animation-name: rise-small; animation-duration: 2s; animation-delay: -.9s; }
@keyframes rise-big { 0% { transform: translateY(70px) scale(.45); opacity: 0; } 50% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-70px) scale(.65); opacity: 0; } }
@keyframes rise-mid { 0% { transform: translateY(60px) scale(.45); opacity: 0; } 50% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-60px) scale(.65); opacity: 0; } }
@keyframes rise-small { 0% { transform: translateY(50px) scale(.45); opacity: 0; } 50% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(.65); opacity: 0; } }

/* The spine: the rail sits in the wrap's left gutter edge, the chapters start 96px to its right. */
.story { padding-top: 48px; padding-bottom: 136px; view-timeline-name: --story; }
.story-wrap { position: relative; }
.story-rail { position: absolute; top: 0; bottom: 0; left: 48px; width: 1px; background: var(--line); }
.story-lit { position: absolute; inset: 0; background: var(--ember); transform-origin: 50% 0; }
.story-spark { position: sticky; top: 50vh; display: block; width: 7px; height: 7px; margin-left: -3px; translate: 0 -50%; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 18%, transparent); }

.chapters { list-style: none; margin: 0; padding: 0 0 0 96px; display: flex; flex-direction: column; gap: 168px; }
.chapter { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 80px; align-items: center; }
.chapter-text-only { grid-template-columns: minmax(0, 1fr); }
.chapter-text-only .chapter-copy { max-width: 40em; }
/* The node sits on the rail beside the chapter's middle: the rail's centre is 49px into the wrap, the chapter starts
   at 144px, the node is 16px wide. */
.chapter-node { position: absolute; left: -100.5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--muted); background: var(--bg); }
.chapter-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }
.chapter-tag { display: flex; align-items: baseline; gap: 12px; }
.chapter-n { font-size: 14px; font-weight: 400; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ember); }
.chapter-label { font-size: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chapter-text { font-size: 18px; max-width: 28em; }
.chapter-visual { min-width: 0; }
.chapter-visual .photo { aspect-ratio: 5 / 4; }

.principles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 30em; }
.principles li { display: flex; gap: 14px; align-items: baseline; font-size: 17px; }
.principles li::before { content: ""; flex: 0 0 12px; height: 1.5px; margin-top: .8em; background: var(--ember); }
.principles strong { font-weight: 400; }

.facts { display: flex; flex-direction: column; border-top: 1.5px solid var(--fg); margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 15px; color: var(--muted); }
.facts dd { font-size: 17px; font-weight: 300; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }


/* Scroll-linked motion: the spine fills from the top (the story's own view timeline, from its top reaching the
   reading line to its bottom reaching it) and each node fills when it reaches the line. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story-lit { animation: rv-line-y linear both; animation-timeline: --story; animation-range: cover 50vh cover calc(100% - 50vh); }
    .chapter-node { animation: node-lit linear both; animation-timeline: view(); animation-range: cover 46% cover 52%; }
  }
}
@keyframes node-lit { to { border-color: var(--ember); background: var(--ember); } }

@media (max-width: 900px) {
  .story-open { padding-top: 72px; padding-bottom: 40px; }
  .mark { width: 200px; height: 242px; }
  .mark-wrap::before { width: 320px; height: 320px; }
  .story-rail { left: 16px; }
  .chapters { padding-left: 40px; gap: 104px; }
  .chapter { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 32px; }
  /* On one column the node sits beside the chapter number: the rail's centre is 17px in, the chapter starts at 56px. */
  .chapter-node { left: -44.5px; top: 8px; }
  .chapter-text { font-size: 17px; }
  .facts div { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Phones held upright: a smaller mark under the title and the chapters closer together. */
@media (max-width: 600px) {
  .story-open { padding-top: 56px; padding-bottom: 24px; }
  .story-head { gap: 24px; }
  .mark { width: 150px; height: 182px; }
  .mark-wrap::before { width: 240px; height: 240px; }
  .story { padding-top: 32px; padding-bottom: 80px; }
  .chapters { gap: 72px; }
  .chapter-text, .principles li { font-size: 16px; }
  .facts div { padding: 14px 0; }
  .facts dd { font-size: 16px; }
}