/* Wang Tiles: page layer on top of house-style.css (the house style of the Kinetic Film page).
   Ink ground, paper type, Instrument Sans bold for display lines (the face the loops are labelled in),
   the house serif italic for the accent phrase. Page specific parts are in wang.css. */

@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo-var.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url(fonts/instrument-serif-italic.woff2) format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --gutter: clamp(1rem, 4.2vw, 4.5rem);
  --display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}
html { -webkit-text-size-adjust: 100%; }
main { max-width: 120rem; padding-inline: var(--gutter); }
::selection { background: var(--accent); color: var(--bg); }
section[id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bar { -webkit-backdrop-filter: blur(14px) saturate(1.2); }
/* Three header actions (the house grid assumes four); the house breakpoints shorten the How label */
@media (max-width: 51.25rem) {
  .bar-actions { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.3fr); }
}
@media (max-width: 35rem) {
  .bar-how::after { content: 'How it works'; }
}
@media (max-width: 23.75rem) {
  .bar-how::after { content: 'How'; }
}

/* ---------- Opening ---------- */
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: 'id film' 'intro film';
  align-items: end;
  gap: 1.5rem 3rem;
  padding: 1.5rem 0 2rem;
}
.opening-id { grid-area: id; align-self: start; }
.intro { grid-area: intro; }
/* The film is drawn on the page's --bg, but browsers decode video colour slightly darker, so it
   gets a card edge of its own instead of pretending to be part of the page */
.opening-film { grid-area: film; justify-self: end; width: 100%; max-width: 32rem; margin: 0; }
.opening-film video { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 1rem; background: var(--bg); }
.opening .eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; letter-spacing: 0.14em; }
.opening h1 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wght' 900, 'wdth' 125;
  font-size: clamp(3.4rem, 7.4vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.opening h1 span { display: block; }
.opening h1 .t-2 { color: var(--accent); }
.intro .statement { margin: 0 0 0.625rem; font-size: clamp(1.4rem, 2.1vw, 2.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
.intro .statement em { font: italic 400 1.1em / 1 var(--serif); letter-spacing: -0.01em; }
.intro p.intro-text { max-width: 50rem; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* ---------- How it works ---------- */
.how, .blocks, .get { padding: 3.5rem 0 1rem; border-top: 1px solid var(--line); }
.how-title { margin: 0.75rem 0 0; }
.how .how-steps { margin-top: 1.75rem; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; }
.metric { padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; }
.metric b { display: block; font-family: var(--display); font-variation-settings: 'wght' 900, 'wdth' 112; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; color: var(--accent); }
.metric span { display: block; margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* ---------- Blocks ---------- */
.block-grid { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem 1rem; }
.block-grid li { min-width: 0; }
.block-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; background: #000; }
.block-grid b { display: block; margin-top: 0.65rem; font-family: var(--display); font-variation-settings: 'wght' 800, 'wdth' 112; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.01em; }
.block-grid span { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }

/* ---------- Get ---------- */
.get .how-downloads { margin-top: 1.75rem; }
.get-needs { max-width: 60rem; margin: 1.25rem 0 3rem; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.get-needs b { margin-right: 0.5rem; font: 500 0.6875rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.get-needs a { color: var(--ink); }

/* ---------- Make yours card: dark text on the accent ---------- */
.how-downloads .card-make p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.get-needs a:hover { color: var(--accent); }

/* ---------- Footer: the shared runtime mounts its tool links in [data-exploration-controls]; one rule only ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 5rem;
  padding: 1.375rem var(--gutter); border-top: 1px solid var(--rule); background: var(--exploration-footer-bg);
  font: 400 0.75rem / 1.4 var(--mono); color: var(--muted);
}
.foot-id { letter-spacing: 0.1em; text-transform: uppercase; }
.foot-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
.foot-link:hover { color: var(--accent); }
.foot [data-exploration-controls] { flex: 1 1 20rem; display: flex; justify-content: flex-end; border-top: 0; background: none; }
/* Layout until the shared runtime styles the tool links (it does in production) */
.foot [data-exploration-tools] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.foot [data-exploration-tools] a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); }
@media (max-width: 40rem) { .foot [data-exploration-controls] { justify-content: flex-start; } }

/* ---------- Narrow screens ---------- */
@media (max-width: 68.75rem) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5rem) {
  .opening { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'id' 'film' 'intro'; }
  .opening-film { justify-self: stretch; max-width: none; }
  .how-downloads { grid-template-columns: minmax(0, 1fr) !important; }
  .how .how-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26.25rem) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}