/* The studio's own pages (Studio, Support, Contact): the film page's type, ink and nav, on ordinary scrolling
   pages. Motion here follows the scroll too (js/pages/scroll.js); nothing moves on its own. */

body.page { background: #060607; min-height: 100vh; }
.page .nav { background: linear-gradient(#060607 0%, rgba(6, 6, 7, 0.86) 62%, rgba(6, 6, 7, 0)); }
.nav nav a[aria-current="page"] { color: var(--ink); background: var(--chip); }

.wrap { width: min(1200px, 100% - 2 * clamp(28px, 6.4vw, 120px)); margin: 0 auto; }
.page-main { padding-top: 72px; }

/* type */
.kick { display: block; font-size: 13px; font-weight: 680; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.display { font-weight: 830; font-stretch: 125%; letter-spacing: -0.038em; line-height: 0.95; text-wrap: balance; }
.display .soft { color: rgba(var(--ink-rgb), 0.5); }
.h1 { font-size: clamp(54px, 6.6vw, 112px); }
.h2 { font-size: clamp(38px, 4.4vw, 72px); }
.lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 420; text-wrap: pretty; }
.lead b { color: var(--ink); font-weight: 680; }

/* rising into view, by scroll (see scroll.js: --in goes 0 → 1 as the element enters); without script, or
   with reduced motion, everything simply shows */
.js [data-rise] { opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 26px)); }
@media (prefers-reduced-motion: reduce) { .js [data-rise] { opacity: 1; transform: none; } }

/* buttons and links */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15.5px; font-weight: 650; background: var(--ink); color: var(--thumb-ink); transition: transform 0.2s; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: var(--chip); }
.link { color: var(--ink); font-weight: 620; text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), 0.3); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--ink); }

/* the footer, as on the film page */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 0 34px; margin-top: 120px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot nav a { color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }

/* app chips (support filter, contact app picker) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 7px; border-radius: 999px; font-size: 14.5px; font-weight: 620; color: var(--ink-2); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.chip img { width: 28px; height: 28px; border-radius: 7px; }
.chip.plain { padding-left: 16px; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"], .chip:has(input:checked) { color: var(--thumb-ink); background: var(--ink); box-shadow: none; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ——— phones: the same studio, sized for a hand. Everything below applies to narrow windows only. ——— */
@media (max-width: 760px) {
  :root { --px: max(20px, env(safe-area-inset-left, 0px)); --px-r: max(20px, env(safe-area-inset-right, 0px)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  body { -webkit-tap-highlight-color: transparent; }
  .nav { height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--px-r) 0 var(--px); }
  .nav-mark { gap: 9px; font-size: 16px; min-height: 44px; }
  .nav nav { gap: 0; margin-right: -10px; }
  .nav nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 11px; font-size: 14px; }
  .page-main { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .wrap { width: auto; margin: 0 var(--px-r) 0 var(--px); }
  .h1 { font-size: clamp(40px, 11.4vw, 60px); }
  .h2 { font-size: clamp(32px, 8.6vw, 44px); }
  .lead { font-size: 16.5px; }
  .kick { font-size: 12px; }
  .btn { height: 50px; padding: 0 22px; }
  .btn:hover, .btn.ghost:hover { transform: none; }
  .foot { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 72px; padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
  .foot nav { gap: 2px 18px; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 36px; }
  .chip { height: 44px; }
}
@media (max-width: 380px) {
  .nav nav a { padding: 0 8px; font-size: 13.5px; }
}