/* ==========================================================================
   made-with.html: Made with Tino
   Header, shape filter, a justified grid of ten live films, closing.
   The grid is light. Opening a film steps inside: the page goes from white
   to black around it (dark only ever means "inside a studio").
   ========================================================================== */

/* ----------------------------------------------------------------- Header */
.mw-head { padding-top: clamp(64px, 9vw, 128px); }
.mw-h1 { max-width: 12em; }
.mw-sub { max-width: 32em; margin-top: 20px; }

.mw-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.mw-bar-end { display: flex; align-items: center; gap: 20px; min-width: 0; }
.mw-silent { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.34; color: var(--ink-3); }
.mw-silent svg { width: 14px; height: 14px; flex: none; }

/* Segmented control, macOS-like: a grey track, the chosen segment raised */
.mw-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-pill); }
.mw-seg-btn {
  position: relative; height: 32px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font-size: var(--t-14); font-weight: var(--w-medium); letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease-snap);
}
.mw-seg-btn:hover { color: var(--ink); }
.mw-seg-btn:active { transform: scale(0.97); }
.mw-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 0.5px rgba(17, 17, 20, 0.08), 0 1px 3px rgba(17, 17, 20, 0.10); }
.mw-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mw-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ------------------------------------------------------------------- Grid
   js/made-with.js sets each card's width so every row fills the measure at one
   shared poster height. Without JS, the flex fallback gets close. */
.mw-films { padding-top: 40px; padding-bottom: calc(var(--section-y) * 0.7); }
.mw-grid {
  --gap: 24px; --row-gap: 56px;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--row-gap) var(--gap);
  list-style: none; margin: 0; padding: 0;
  transition: opacity 220ms var(--ease), transform 420ms var(--ease-out);
}
.mw-card { flex: var(--ar) 1 calc(var(--ar) * 300px); min-width: 0; }
.mw-grid.is-laid .mw-card { flex: none; }
.mw-grid.is-leaving { opacity: 0; transform: translateY(6px); transition-duration: 160ms, 160ms; }
.mw-card figure { margin: 0; }

/* The film: live on the app's engine (js/film.js), the poster until it plays */
.mw-frame {
  position: relative;
  aspect-ratio: var(--ar);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  transform: translateZ(0);
  transition: transform 520ms var(--spring, var(--ease-spring)), box-shadow 320ms var(--ease), opacity 160ms linear;
}
.mw-frame::after {   /* a hairline inside the edge, so pale films (Iris & Theo, Deckle) hold their shape on white */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 20, 0.07);
}
.mw-film { position: absolute; inset: 0; }
.mw-film > .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mw-card.is-out .mw-frame { opacity: 0; transition: none; }

/* The whole picture opens the film; the controls sit above it */
.mw-open {
  position: absolute; inset: 0; z-index: 1;
  border: 0; padding: 0; margin: 0; background: transparent;
  cursor: zoom-in; border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mw-open:focus-visible { outline: none; }
.mw-frame:has(.mw-open:focus-visible) { box-shadow: var(--focus-ring); }

@media (hover: hover) {
  .mw-card:hover .mw-frame { transform: translateY(-4px); box-shadow: var(--shadow-3); }
}

/* The player bar: play, scrub, time. Dark glass, white marks: the visitor's controls, never pink. */
.mw-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 28px 12px 12px;
  background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.42));
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms var(--ease), transform 320ms cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.mw-card:hover .mw-hud, .mw-card:focus-within .mw-hud, .mw-hud:has(.is-drag) { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .mw-hud { opacity: 1; transform: none; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .mw-card.is-live .mw-hud { opacity: 1; transform: none; pointer-events: auto; } }

.mw-play {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(17, 17, 20, 0.56); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease-snap), background-color var(--d-2) var(--ease);
}
.mw-play svg { width: 13px; height: 13px; }
.mw-play:hover { background: rgba(17, 17, 20, 0.72); }
.mw-play:active { transform: scale(0.92); }
.mw-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }

.mw-scrub {
  flex: 1 1 auto; min-width: 0; height: 24px;
  display: flex; align-items: center;
  cursor: pointer; touch-action: none; border-radius: 4px;
}
.mw-scrub-track {
  position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.34);
  transition: transform 200ms var(--ease);
}
.mw-scrub:hover .mw-scrub-track, .mw-scrub.is-drag .mw-scrub-track, .mw-scrub:focus-visible .mw-scrub-track { transform: scaleY(1.67); }
.mw-scrub-fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.mw-scrub:focus-visible { outline: 2px solid #fff; outline-offset: 0; }

.mw-tc {
  flex: none; font-size: 11px; line-height: 1; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Captions */
.mw-card figcaption { padding-top: 16px; padding-right: 4px; }
.mw-cap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mw-title { font-size: 15px; line-height: 1.33; font-weight: var(--w-semibold); letter-spacing: -0.012em; color: var(--ink); }
.mw-meta { font-size: 12px; line-height: 1.33; color: var(--ink-3); white-space: nowrap; }
.mw-line { margin-top: 6px; max-width: 34em; font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink-3); }

/* The brief, set like the sentence you would type to Tino */
.mw-prompt {
  width: fit-content; max-width: min(34em, 100%);
  margin-top: 12px; padding: 10px 12px 11px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 13px; line-height: 1.46; color: var(--ink-2);
}
.mw-prompt-k { display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink-3); }
.mw-prompt q { quotes: "\201C" "\201D"; }
.mw-prompt q::before { margin-left: -0.42em; }

.mw-note { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-14); color: var(--ink-3); }

/* -------------------------------------------------------------- Closing */
.mw-close { padding-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 1.1); }
.mw-close-icon { margin: 0 auto 28px; }
.mw-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 32px; }
.mw-actions .btn-link { font-size: var(--t-17); }
.mw-free { margin-top: 18px; font-size: var(--t-14); color: var(--ink-3); }

/* ===================================================== Step inside: .mws
   A full-window dialog. The ground fades from transparent to the studio well
   while the film flies from its card to the stage. */
html.mws-lock { overflow: hidden; }
.mws {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--studio-text);
  overflow: hidden;
}
.mws[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.mws::backdrop { background: transparent; }
.mws-ground { position: absolute; inset: 0; z-index: -1; background: #0E0E10; }

.mws-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 56px; padding: 0 20px;
}
.mws-back, .mws-step, .mws-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; padding: 0; background: transparent; color: var(--studio-text-2);
  font: inherit; font-size: 14px; font-weight: var(--w-medium);
  cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-1) var(--ease), background-color var(--d-2) var(--ease), transform var(--d-1) var(--ease-snap);
}
.mws-back { justify-self: start; height: 32px; padding: 0 12px 0 6px; }
.mws-back svg, .mws-step svg { width: 16px; height: 16px; }
.mws-back:hover, .mws-step:hover { color: var(--studio-text); background: var(--studio-raised); }
.mws-back:active, .mws-step:active, .mws-play:active { transform: scale(0.94); }
.mws-back:focus-visible, .mws-step:focus-visible, .mws-play:focus-visible, .mws-tl:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.mws-doc { text-align: center; line-height: 1.2; min-width: 0; }
.mws-doc b { display: block; font-size: 14px; font-weight: var(--w-semibold); letter-spacing: -0.008em; color: var(--studio-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mws-doc small { display: block; margin-top: 2px; font-size: 12px; color: var(--studio-text-3); }
.mws-nav { justify-self: end; display: flex; gap: 2px; }
.mws-step { width: 32px; height: 32px; }

.mws-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 8px 24px; overflow: hidden; }
.mws-frame {
  position: relative; overflow: hidden;
  border-radius: 10px; background: #000;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10), 0 30px 80px rgba(0, 0, 0, 0.5);
  transform-origin: 0 0; will-change: transform;
}
.mws-film { position: absolute; inset: 0; }
.mws-film > .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mws-snap { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; transition: opacity 360ms var(--ease); pointer-events: none; }
.mws-snap.is-gone { opacity: 0; }

.mws-lower {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 12px 24px max(20px, env(safe-area-inset-bottom));
}
.mws-transport { display: flex; align-items: center; gap: 14px; }
.mws-play { width: 36px; height: 36px; border-radius: 50%; background: var(--studio-raised); color: var(--studio-text); }
.mws-play:hover { background: var(--studio-raised-2); }
.mws-play svg { width: 14px; height: 14px; }
.mws-play:disabled { opacity: 0.4; cursor: default; }
.mws-readout { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.mws-readout b { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--studio-text); font-variant-numeric: tabular-nums; }
.mws-readout small { font-size: 13px; color: var(--studio-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mws-silent { margin-left: auto; font-size: 12px; color: var(--studio-text-3); text-align: right; }

/* The film's own shots, from its markers, and your playhead (white, never pink) */
.mws-tl { position: relative; margin-top: 14px; padding: 6px 0; cursor: pointer; touch-action: none; border-radius: 8px; }
.mws-shots { display: flex; gap: 2px; height: 40px; }
.mws-shot {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; padding: 0 10px;
  border-radius: 5px; background: var(--studio-panel);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  transition: background-color 200ms var(--ease);
}
.mws-shot b { font-size: 12px; font-weight: var(--w-medium); color: var(--studio-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms var(--ease); }
.mws-shot.is-on { background: var(--studio-raised); }
.mws-shot.is-on b { color: var(--studio-text); }
.mws-ph {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  pointer-events: none; will-change: transform;
}
.mws-ph::before { content: ""; position: absolute; left: -0.75px; top: 0; bottom: 0; width: 1.5px; background: #fff; border-radius: 1px; }
.mws-ph::after { content: ""; position: absolute; left: -5px; top: -2px; width: 10px; height: 10px; border-radius: 2px 2px 5px 5px; background: #fff; }

.mws-info { display: flex; align-items: flex-start; gap: 16px 32px; margin-top: 16px; }
.mws-line { flex: 1 1 auto; max-width: 36em; font-size: 14px; line-height: 1.45; color: var(--studio-text-2); }
.mws-prompt {
  flex: 0 1 auto; max-width: 30em; padding: 9px 12px 10px;
  border-radius: var(--r-sm); background: var(--studio-panel);
  font-size: 13px; line-height: 1.46; color: var(--studio-text);
}
.mws-prompt .mw-prompt-k { color: var(--studio-text-3); }
.mws-prompt q { quotes: "\201C" "\201D"; }
.mws-stillnote { display: none; font-size: 13px; color: var(--studio-text-2); }
.mws.is-still .mws-play, .mws.is-still .mws-readout, .mws.is-still .mws-silent { display: none; }
.mws.is-still .mws-stillnote { display: block; }
.mws.is-still .mws-transport { min-height: 36px; }
.mws.is-still .mws-tl { cursor: default; }
.mws.is-still .mws-ph { opacity: 0; }

/* ------------------------------------------------------------ Tablet */
@media (max-width: 1068px) { .mw-grid { --gap: 20px; --row-gap: 48px; } }
@media (max-width: 900px) { .mw-silent { display: none; } }

/* ------------------------------------------------------------- Phone */
@media (max-width: 733px) {
  .mw-head { padding-top: 48px; }
  .mw-sub { margin-top: 16px; }
  .mw-bar { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 36px; padding-bottom: 16px; }
  .mw-bar-end { justify-content: space-between; }
  .mw-silent { display: flex; }
  .mw-seg { display: flex; }
  .mw-seg-btn { flex: 1 1 0; padding: 0 8px; }
  .mw-films { padding-top: 28px; }
  .mw-grid { --gap: 12px; --row-gap: 36px; }
  .mw-card { flex-basis: calc(var(--ar) * 200px); }
  .mw-frame { border-radius: var(--r-sm); }
  .mw-hud { padding: 20px 8px 8px; gap: 8px; }
  .mw-card.is-pair .mw-tc { display: none; }
  .mw-card figcaption { padding-top: 12px; padding-right: 0; }
  .mw-title { font-size: 14px; }
  .mw-cap-head { display: block; }
  .mw-meta { display: block; margin-top: 2px; font-size: 11px; }
  .mw-card.is-pair .mw-prompt { display: none; }
  .mw-line { font-size: 13px; line-height: 1.42; margin-top: 4px; }
  .mw-prompt { font-size: 12.5px; padding: 9px 10px 10px; margin-top: 10px; }
  .mw-note { margin-top: 48px; }
  .mw-actions { flex-direction: column; gap: 18px; }

  .mws-bar { height: 52px; padding: 0 8px; }
  .mws-back { padding-right: 8px; }
  .mws-stage { padding: 4px 16px; }
  .mws-frame { border-radius: 8px; }
  .mws-lower { padding: 10px 16px max(16px, env(safe-area-inset-bottom)); }
  .mws-silent { display: none; }
  .mws-shots { height: 34px; }
  .mws-shot { padding: 0 6px; }
  .mws-shot b { font-size: 11px; }
  .mws-info { flex-direction: column; gap: 10px; margin-top: 12px; }
  .mws-line { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-grid, .mw-grid.is-leaving { transition: none; transform: none; }
  .mw-card:hover .mw-frame { transform: none; }
  .mw-hud { transition: opacity 200ms linear; transform: none; }
}

/* -------------------------------------------------------- Phone, 600 and under
   One control set on every live tile, in the same place: a 32px play/pause in the bottom-left corner, the scrubber
   beside it, always shown. No timecode on the tile (it lives in the studio view), and nothing at the top, where these
   films keep their titles and stickers. Every tile takes its own film's aspect ratio (js/made-with.js pairs
   vertical with vertical; squares and wide films take the row). */
@media (max-width: 600px) {
  .mw-hud {
    gap: 8px; padding: 24px 10px 10px 8px;
    opacity: 1; transform: none; pointer-events: auto;
    background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.36));
  }
  .mw-play { width: 32px; height: 32px; }
  .mw-play svg { width: 12px; height: 12px; }
  .mw-tc { display: none; }
  .mw-scrub { height: 32px; }
  .mw-card.is-pair .mw-prompt { display: none; }
}

/* A film that isn't live on the site yet: a quiet tag, never a play button that does nothing */
.mw-still-tag { height: 18px; padding: 0 7px; font-size: 11px; align-self: center; }
@media (max-width: 733px) { .mw-still-tag { margin-top: 6px; } }