/* ==========================================================================
   Tino — base
   Reset, type, layout, buttons, sections, cards, app tiles, badges,
   focus and reveal. Nav and footer live in css/nav.css (not here).
   Requires css/tokens.css first.
   ========================================================================== */

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-17);
  line-height: var(--lh-17);
  letter-spacing: var(--tr-17);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0, "cv11" 1;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* :where() keeps this at zero specificity, so a page's one-class rule can pad a list. */
:where(ul[role="list"], ol[role="list"], .list-reset) { list-style: none; padding: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(17, 17, 20, 0.12); color: var(--ink); }   /* never pink: pink means Tino */
.studio ::selection, .on-dark ::selection, .window-shot ::selection { background: rgba(255, 255, 255, 0.18); color: var(--studio-text); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 1000;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill);
  font-size: var(--t-14); font-weight: var(--w-medium);
  transition: top var(--d-2) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ Focus
   The person's focus is ink (studio text on dark). Never pink: pink is Tino. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.studio :focus-visible, .on-dark :focus-visible, .window-shot :focus-visible { outline-color: var(--studio-text); }
.btn:focus-visible, .app-tile:focus-visible, .card-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.studio .btn:focus-visible, .studio .app-tile:focus-visible, .studio .card-link:focus-visible {
  box-shadow: var(--focus-ring-dark);
}

/* ----------------------------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide { max-width: calc(var(--max-wide) + var(--gutter) * 2); }
.wrap-text { max-width: calc(var(--max-text) + var(--gutter) * 2); }

.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.center { text-align: center; }
.center .measure, .measure.center { margin-inline: auto; }
.measure { max-width: 34em; }
.measure-narrow { max-width: 24em; }

.grid { display: grid; gap: var(--grid-gap, var(--s-5)); }
.grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: 1fr; }
@media (max-width: 733px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); --grid-gap: 12px; }
  .grid-5 .app-tile { padding: var(--s-5); border-radius: var(--r-lg); gap: var(--s-3); }
  .grid-5 .app-tile .app-icon { width: 48px; height: 48px; }
}
@media (min-width: 734px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1069px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.hairline { height: 1px; border: 0; margin: 0; background: var(--line); }
.studio .hairline { background: var(--studio-line); }

/* ------------------------------------------------------------------- Type */
.t-80, .t-64, .t-48, .t-32, .t-24 { font-weight: var(--w-semibold); color: var(--ink); text-wrap: balance; }
.t-80 { font-size: var(--t-80); line-height: var(--lh-80); letter-spacing: var(--tr-80); }
.t-64 { font-size: var(--t-64); line-height: var(--lh-64); letter-spacing: var(--tr-64); }
.t-48 { font-size: var(--t-48); line-height: var(--lh-48); letter-spacing: var(--tr-48); }
.t-32 { font-size: var(--t-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }
.t-24 { font-size: var(--t-24); line-height: var(--lh-24); letter-spacing: var(--tr-24); }
.t-19 { font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); }
.t-17 { font-size: var(--t-17); line-height: var(--lh-17); letter-spacing: var(--tr-17); }
.t-14 { font-size: var(--t-14); line-height: var(--lh-14); letter-spacing: var(--tr-14); }
.t-12 { font-size: var(--t-12); line-height: var(--lh-12); letter-spacing: var(--tr-12); }
.lead { font-size: var(--t-24); line-height: var(--lh-24); letter-spacing: var(--tr-24); color: var(--ink-2); font-weight: var(--w-regular); text-wrap: pretty; }
.intro { font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); color: var(--ink-2); text-wrap: pretty; }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-14); line-height: 1.2; font-weight: var(--w-semibold);
  letter-spacing: 0; color: var(--ink);
}
.eyebrow img { width: 24px; height: 24px; }

.w-regular { font-weight: var(--w-regular); }
.w-medium { font-weight: var(--w-medium); }
.w-semibold { font-weight: var(--w-semibold); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
/* Pink text: only for Tino (its name, its action). Auto-switches on dark. */
.pink-text { color: var(--pink-ink); }
.studio .pink-text { color: var(--pink-on-dark); }

/* Headline second line in grey, Apple-style: "Make films. <span class='dim'>By asking.</span>" */
.dim { color: var(--ink-3); }
.studio .dim { color: var(--studio-text-3); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--t-17); line-height: 1; font-weight: var(--w-medium); letter-spacing: -0.01em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--d-2) var(--ease),
    border-color var(--d-2) var(--ease),
    color var(--d-2) var(--ease),
    transform var(--d-2) var(--ease-snap);
}
.btn:active { transform: scale(0.97); }
.btn-sm { --btn-h: 32px; padding: 0 14px; font-size: var(--t-14); }
.btn-lg { --btn-h: 52px; padding: 0 28px; font-size: var(--t-17); }

/* Primary: ink pill. One per view. */
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: #2A2A30; }

/* Secondary: hairline outline */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-4); }

/* Quiet: filled grey, for third-level actions */
.btn-quiet { background: var(--surface-2); color: var(--ink); }
.btn-quiet:hover { background: var(--surface-3); }

/* Link with chevron: "Learn more ›". Ink by default; .tino makes it pink
   ink, only when the link is about Tino itself ("How Tino works"). */
.btn-link {
  display: inline-flex; align-items: center; gap: 0.18em;
  color: var(--ink);
  font-weight: var(--w-medium);
  font-size: inherit;
  border-radius: 4px;
}
.btn-link::after {
  content: "";
  width: 0.5em; height: 0.5em; margin-left: 0.12em;
  border-right: 0.11em solid currentColor; border-top: 0.11em solid currentColor;
  transform: rotate(45deg) translateY(0.02em);
  transition: transform var(--d-2) var(--ease-spring);
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.btn-link:hover::after { transform: translateX(0.14em) rotate(45deg) translateY(0.02em); }
/* Phones and touch screens: a 44px tap target without changing the visual spacing. */
@media (max-width: 733px), (pointer: coarse) {
  .btn-link { position: relative; padding-block: 9px; margin-block: -9px; min-height: 44px; }
  .btn-link::before { content: ""; position: absolute; inset: 0 -6px; }
  /* Inline text links in running copy ("Music, Vector and 3D"): the box grows
     to 44px, the line does not move (vertical padding on inline boxes is not laid out). */
  main :is(p, li) > span > a:not([class]), main :is(p, li) > a:not([class]) { padding-block: 12px; margin-block: -12px; }
}
.btn-link.tino { color: var(--pink-ink); }
.btn-link.tino:hover { color: var(--pink-deep); }

/* Dark-panel variants (applied automatically inside .studio, or with .on-dark) */
.studio .btn-primary, .btn-primary.on-dark { background: var(--studio-text); color: var(--studio-ground); }
.studio .btn-primary:hover, .btn-primary.on-dark:hover { background: var(--white); }
.studio .btn-secondary, .btn-secondary.on-dark { color: var(--studio-text); border-color: var(--studio-line-2); }
.studio .btn-secondary:hover, .btn-secondary.on-dark:hover { background: var(--studio-raised); border-color: rgba(255,255,255,0.22); }
.studio .btn-quiet, .btn-quiet.on-dark { background: var(--studio-raised); color: var(--studio-text); }
.studio .btn-quiet:hover, .btn-quiet.on-dark:hover { background: var(--studio-raised-2); }
.studio .btn-link, .btn-link.on-dark { color: var(--studio-text); }
.studio .btn-link.tino, .btn-link.tino.on-dark { color: var(--pink-on-dark); }

/* Download button: Apple-mark-free, a small down-arrow glyph */
.btn .btn-glyph { width: 16px; height: 16px; flex: none; }

/* -------------------------------------------------------------- Sections */
/* One gap between blocks: sections pad the top only, so neighbours never
   stack their padding. The last section on a page closes with the same gap. */
.section { padding-top: var(--section-y); background: var(--surface); }
:where(main > .section:last-child) { padding-bottom: var(--section-y); }
.section-quiet { background: var(--surface-2); padding-bottom: var(--section-y); }   /* a ground needs both edges */
/* A band (grey ground or dark studio panel) after a plain section needs its own gap
   above it: the section before it pads only its top. The section after a band is
   already spaced by its own padding-top. */
.section:not(.section-quiet) + :is(.studio-band, .section-quiet) { margin-top: var(--section-y); }
.section-tight { padding-top: calc(var(--section-y) * 0.6); }
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--s-4); }

/* Phones read down one left edge. Every section head left-aligns like
   .split-head does once it collapses; only page heroes stay centred.
   (The page-level centred heads are listed here so the rule lives in one place.) */
@media (max-width: 733px) {
  main :is(.section-head.center, .ho-step, .lib-more,
  .mv-head-center, .dk-head-center, .bk-head-center, .mu-head-center, .d3-head-center) {
    text-align: left; margin-inline: 0; max-width: none;
  }
  main :is(.section-head.center, .ho-step, .mv-head-center, .dk-head-center, .bk-head-center, .mu-head-center, .d3-head-center) :is(.intro, .measure, .lead, p) {
    max-width: 100%; margin-inline: 0;
  }
  .ho .ho-step { justify-self: start; }
  .lb-volumes .lb-vol-h { justify-content: flex-start; }
  .proj-files, .proj-files ul { justify-content: flex-start; }
}

/* Studio band: the dark panel that means "you are inside a studio".
   One geometry everywhere: centred, max --band-max (1280), --band-r (32) radius,
   --band-y (120) above and below, #141416 ground. 12px from the viewport edge
   below 1304px; full-bleed and square on phones. Max two per page. */
.studio-band { padding-inline: 0; }
.studio {
  position: relative;
  background: var(--studio-ground);
  color: var(--studio-text);
  padding-block: var(--band-y);
  overflow: hidden;
  isolation: isolate;
}
/* Page panels may restyle what is inside a band, never its edges. */
.studio-band > .studio { padding-block: var(--band-y); }
@media (min-width: 734px) {
  .studio-band { padding-inline: 12px; }
  .studio { border-radius: var(--band-r); max-width: var(--band-max); margin-inline: auto; }
}

/* Pages that draw their band differently join the same geometry.
   index.html: the handoff band is the grid's ::before (static) or .ho-ground
   (scroll-driven), both styled in home.css; they take the band's width, radius
   and vertical padding here. The one-project picture sits in the 1200 column. */
@media (min-width: 734px) {
  .ho .ho-inner::before {
    margin-inline: calc(-1 * min((var(--band-max) - 100%) / 2, (100vw - 100% - 24px) / 2));
    border-radius: var(--band-r);
  }
  .ho .ho-step-b { margin-top: calc(var(--section-y) + var(--band-y)); }
  .ho .ho-b { margin-bottom: var(--band-y); }
  main .ho.is-live .ho-ground {
    left: max(12px, calc((100% - var(--band-max)) / 2));
    right: max(12px, calc((100% - var(--band-max)) / 2));
    border-radius: var(--band-r);
  }
}
.proj-stage.wrap-wide { max-width: calc(var(--max) + var(--gutter) * 2); }
.studio .t-80, .studio .t-64, .studio .t-48, .studio .t-32, .studio .t-24 { color: var(--studio-text); }
.studio .lead, .studio .intro { color: var(--studio-text-2); }
.studio .ink-2 { color: var(--studio-text-2); }
.studio .ink-3 { color: var(--studio-text-3); }
.studio .eyebrow { color: var(--studio-text); }

/* ------------------------------------------------------------------ Cards */
.card {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  overflow: hidden;
}
.card-line { background: var(--surface); border: 1px solid var(--line); }
.card-raised { background: var(--surface); box-shadow: var(--shadow-2); }
.card > * + * { margin-top: var(--s-3); }
@media (max-width: 733px) { .card { padding: var(--s-6); border-radius: var(--r-lg); } }

.card-link { display: block; transition: transform var(--d-3) var(--ease-spring), box-shadow var(--d-3) var(--ease); }
@media (hover: hover) {
  .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
}

.studio .card, .card.on-dark { background: var(--studio-panel); color: var(--studio-text); }
.studio .card-line, .card-line.on-dark { background: var(--studio-ground); border-color: var(--studio-line); }
.studio .card-raised { background: var(--studio-raised); box-shadow: none; }

/* Tino's edits carry a 2px line ([data-tino-line], css/tino.css), never a wash. */

/* -------------------------------------------------------------- App icons */
.app-icon { width: 64px; height: 64px; flex: none; }
.app-icon-sm { width: 32px; height: 32px; }
.app-icon-xs { width: 20px; height: 20px; }
.app-icon-lg { width: 96px; height: 96px; }
.app-icon-xl { width: 128px; height: 128px; }
.app-icon { filter: drop-shadow(0 1px 1px rgba(17,17,20,0.06)) drop-shadow(0 4px 10px rgba(17,17,20,0.06)); }
.studio .app-icon { filter: none; }

/* Studio glyphs (inline svg.sg, drawn by nav.js and inlined in index.html).
   Ink line glyphs on a white tile, like the studios in the app's sidebar. Coming
   studios draw their glyph at 48%. No pink: pink is Tino's alone. The one pink
   moment is the Movie playhead dot while its own link is hovered or focused. */
.sg { display: block; flex: none; overflow: visible; }
.sg-tile { fill: #FFFFFF; stroke: rgba(17, 17, 20, 0.10); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sg-g { fill: none; stroke: var(--ink); stroke-width: 15px; stroke-linecap: round; stroke-linejoin: round; }
.sg-g .sg-dot { fill: var(--ink); stroke: none; transition: fill var(--d-2, 200ms) var(--ease, ease); }
.sg.is-coming .sg-g { opacity: 0.48; }
a:hover > .sg-movie .sg-dot,
a:focus-visible > .sg-movie .sg-dot { fill: var(--pink); }
@media (prefers-reduced-motion: reduce) { .sg-g .sg-dot { transition: none; } }

/* App tile: icon, name, one line, optional badge */
.app-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  min-height: 100%;
  transition: border-color var(--d-2) var(--ease), transform var(--d-3) var(--ease-spring), box-shadow var(--d-3) var(--ease);
}
.app-tile .app-icon { width: 56px; height: 56px; }
.app-tile-name { font-size: var(--t-19); line-height: 1.2; font-weight: var(--w-semibold); letter-spacing: -0.015em; color: var(--ink); }
.app-tile-line { font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink-3); margin-top: 4px; }
.app-tile-foot { margin-top: auto; display: flex; align-items: center; gap: var(--s-2); }
@media (hover: hover) {
  a.app-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.studio .app-tile { background: var(--studio-panel); border-color: var(--studio-line); }
.studio .app-tile-name { color: var(--studio-text); }
.studio .app-tile-line { color: var(--studio-text-2); }

/* Product lockup: "tino Movie" (wordmark + product name in regular weight) */
.lockup { display: inline-flex; align-items: baseline; gap: 0.22em; font-size: var(--t-24); line-height: 1; white-space: nowrap; }
.lockup img { height: 0.94em; width: auto; transform: translateY(0.18em); }
.lockup span { font-weight: var(--w-regular); letter-spacing: -0.03em; }

/* ----------------------------------------------------------------- Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-12); line-height: 1; font-weight: var(--w-medium); letter-spacing: 0.01em;
  color: var(--ink-2); background: var(--surface-2);
  white-space: nowrap;
}
.badge-coming { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge-new { background: var(--ink); color: var(--white); }
.badge-free { background: var(--surface-2); color: var(--ink); }
/* "Tino changed 3 layers": use .tino-toast or .tino-label (css/tino.css). No pink badges. */
.studio .badge { background: var(--studio-raised); color: var(--studio-text-2); }
.studio .badge-coming { background: transparent; color: var(--studio-text-3); box-shadow: inset 0 0 0 1px var(--studio-line-2); }

/* -------------------------------------------------------------- Media */
.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.window-shot { border-radius: 12px; box-shadow: var(--shadow-window); overflow: hidden; background: var(--studio-ground); }
.timecode { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.studio .timecode { color: var(--studio-text-3); }

/* --------------------------------------------------------- Reveal on scroll
   Add .reveal to an element; js/reveal.js adds .is-in when it enters.
   Hidden only once JS has armed the page (html.reveal-ready), so content
   is always visible without JS, in screenshots and with reduced motion. */
.reveal-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(24px); }
.reveal-ready .reveal {
  transition:
    opacity var(--d-4) var(--ease-out),
    transform var(--d-5) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready .reveal.reveal-scale:not(.is-in) { transform: translateY(16px) scale(0.98); }
.is-shot .reveal, .is-shot .reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal:not(.is-in) { opacity: 1; transform: none; }
  .reveal-ready .reveal { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}