/* Studio: who we are, how we got here, what we hold to, where the apps run. The tall sections hold a sticky
   stage that the scroll scrubs through (js/pages/studio.js); with reduced motion they read as plain sections. */
.st-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.still .st-sticky { position: static; height: auto; overflow: visible; }

/* 1. who we are, and the six apps on an arc that swings round as you scroll */
.st-hero { height: 175vh; }
.st-hero .st-sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 7vh, 72px); padding-top: 72px; }
.st-hero-in { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.st-title { font-size: clamp(64px, 8.6vw, 150px); }
.st-title span { display: inline-block; }
.st-hero .lead { max-width: 660px; }
.st-arc { position: relative; height: 178px; list-style: none; perspective: 1500px; perspective-origin: 50% 20%; }
.st-arc li { position: absolute; left: 50%; top: 0; width: 140px; margin-left: -70px; }
.st-arc a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.st-arc img { width: 104px; height: 104px; border-radius: 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); transition: transform 0.25s; }
.st-arc a:hover img { transform: translateY(-4px); }
.st-arc b { font-size: 15px; font-weight: 700; }
.st-arc small { font-size: 12.5px; color: var(--ink-3); }
.still .st-hero { height: auto; }
.still .st-arc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; height: auto; }
.still .st-arc li { position: static; margin: 0; }

/* 2. how we got here: the year rolls like a counter, its story beside it, a rail of years underneath */
.st-years { height: 430vh; }
.st-years-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto; column-gap: clamp(40px, 6vw, 120px); height: 100%; padding: 120px 0 64px; }
.st-years-in > .kick { grid-column: 1 / -1; }
.st-year { position: relative; align-self: center; height: 1.04em; overflow: hidden; font-size: clamp(110px, 14.5vw, 250px); font-weight: 840; font-stretch: 125%; line-height: 1; letter-spacing: -0.05em; }
.st-year span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.st-chapters { position: relative; align-self: stretch; list-style: none; }
.st-chapters li { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.st-chapters h3 { font-size: clamp(32px, 3.3vw, 54px); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -0.03em; }
.st-chapters p { max-width: 30em; margin-top: 16px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); text-wrap: pretty; }
.st-chapters .quiet h3 { color: var(--ink-2); }
.st-icons { display: flex; gap: 12px; margin-top: 26px; }
.st-icons img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.st-rail { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 18px; border-top: 1px solid var(--line); }
.st-rail-fill { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.st-rail span { font-size: 14px; font-weight: 650; color: var(--ink-3); }
.st-rail span.on { color: var(--ink); }
.still .st-years { height: auto; }
.still .st-year, .still .st-rail { display: none; }
.still .st-chapters { display: grid; gap: 48px; height: auto; }
.still .st-chapters li { position: static; }
.still .st-chapters h3 .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }

/* 3. what we hold to: one statement lights at a time, its reason beside it */
.st-hold { height: 360vh; }
.st-hold-in { display: flex; flex-direction: column; justify-content: center; gap: 30px; height: 100%; padding-top: 72px; }
.st-hold-list { display: grid; gap: clamp(12px, 2.4vh, 26px); list-style: none; }
.st-hold-list li { --lit: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(32px, 5vw, 90px); }
.st-hold-list h3 { font-size: clamp(36px, 4.4vw, 78px); opacity: calc(0.16 + 0.84 * var(--lit)); }
.st-hold-list p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); text-wrap: pretty; opacity: calc(var(--lit) * var(--lit)); transform: translateX(calc((1 - var(--lit)) * 16px)); }
.still .st-hold { height: auto; }
.still .st-hold-list li { --lit: 1; }

/* 4. where each app runs */
.st-matrix { margin-top: 60px; }
.st-key { display: flex; align-items: center; gap: 10px; margin: 18px 0 30px; font-size: 14px; color: var(--ink-2); }
.st-key .st-ring { margin-left: 18px; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { padding: 16px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.st-table thead th { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.st-table tbody th { text-align: left; font-size: 17px; font-weight: 700; white-space: nowrap; }
.st-table tbody th img { display: inline-block; width: 34px; height: 34px; margin-right: 14px; border-radius: 8px; vertical-align: middle; }
.st-dot, .st-ring, .st-none { display: inline-block; vertical-align: middle; }
.st-dot, .st-ring { width: 14px; height: 14px; border-radius: 50%; }
.st-dot { background: var(--ink); }
.st-ring { box-shadow: inset 0 0 0 2px rgba(var(--ink-rgb), 0.55); }
.st-none { width: 10px; height: 2px; border-radius: 1px; background: rgba(var(--ink-rgb), 0.16); }
/* each row's marks pop in from left to right as the row comes up */
.js .st-table td > i { transform: scale(clamp(0, calc(var(--in, 1) * 2.2 - var(--c) * 0.18), 1)); }

/* 5. write to us */
.st-write { margin-top: 140px; }
.st-card { display: flex; flex-direction: column; gap: 18px; padding: clamp(32px, 4vw, 60px); border-radius: 32px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--line); }
.st-card .lead { max-width: 560px; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.st-card address { font-size: 14px; font-style: normal; color: var(--ink-3); }

/* ——— phones and tablets held upright: one column, each scrubbed section composed for a tall screen ——— */
@media (max-width: 900px) and (orientation: portrait) {
  .st-sticky { height: 100vh; height: 100svh; }
  /* the years: the numeral rolls above its story, the rail of years under them */
  .st-years-in { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: calc(env(safe-area-inset-top, 0px) + 84px) 0 calc(env(safe-area-inset-bottom, 0px) + 36px); }
  .st-year { align-self: auto; flex: none; font-size: clamp(64px, 19vw, 150px); }
  .st-chapters { flex: none; height: clamp(240px, 34vh, 340px); }
  .st-chapters h3 { font-size: clamp(28px, 7.6vw, 48px); }
  .st-chapters p { margin-top: 12px; font-size: clamp(16px, 2.2vw, 19px); max-width: 34em; }
  .st-icons { gap: 10px; margin-top: 18px; }
  .st-icons img { width: 46px; height: 46px; border-radius: 11px; }
  .st-rail { margin-top: auto; }
  /* what we hold to: the four statements in a column; the reason for the one lit appears under them all */
  .st-hold-in { gap: 22px; padding-top: calc(env(safe-area-inset-top, 0px) + 72px); }
  .st-hold-list { position: relative; gap: clamp(10px, 2vh, 18px); padding-bottom: clamp(150px, 22vh, 210px); }
  .st-hold-list li { display: block; }
  .st-hold-list h3 { font-size: clamp(30px, 8.4vw, 56px); }
  .st-hold-list p {
    position: absolute; left: 0; right: 0; bottom: 0; min-height: clamp(130px, 19vh, 190px);
    font-size: clamp(16px, 2.3vw, 19px); transform: translateY(calc((1 - var(--lit)) * 14px));
    /* one reason at a time: each shows only while its statement is the one lit */
    opacity: clamp(0, calc((var(--lit) - 0.5) * 2), 1);
  }
  .still .st-hold-list { padding-bottom: 0; }
  .still .st-hold-list p { position: static; min-height: 0; opacity: 1; transform: none; margin-top: 8px; }
}

@media (max-width: 760px) {
  /* who we are: a smaller arc of icons that swings round under the title */
  .st-hero .st-sticky { gap: clamp(28px, 5vh, 48px); padding-top: 56px; }
  .st-hero-in { gap: 16px; }
  .st-title { font-size: clamp(46px, 13.6vw, 72px); }
  .st-hero .lead { max-width: 34ch; }
  .st-arc { height: 112px; perspective: 900px; }
  .st-arc li { width: 80px; margin-left: -40px; }
  .st-arc a { gap: 6px; }
  .st-arc img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
  .st-arc b { font-size: 12.5px; }
  .st-arc small { display: none; }
  .st-arc a:hover img { transform: none; }
  .still .st-arc li { width: 72px; }

  /* where each app runs: one row per app, a column per platform with its short name */
  .st-matrix { margin-top: 48px; }
  .st-key { flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 18px; font-size: 13px; }
  .st-key .st-ring { margin-left: 10px; }
  .st-table { table-layout: fixed; }
  .st-table th, .st-table td { padding: 13px 0; }
  .st-table thead th { font-size: 11.5px; letter-spacing: -0.02em; }
  .st-table thead th:first-child { width: 29%; }
  .st-table .ph-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-table tbody th { font-size: 13.5px; }
  .st-table tbody th img { width: 26px; height: 26px; margin-right: 8px; border-radius: 6px; }
  .st-dot, .st-ring { width: 12px; height: 12px; }

  .st-write { margin-top: 84px; }
  .st-card { padding: 26px 22px; border-radius: 26px; }
  .st-actions { gap: 16px; }
}