/* zippr, the making-of page, in the homepage's design language: the same type, colours, header and footer, one
   ordinary column on phones, and no idle motion. Every website and film sits in a grid
   that scrolls with the page: nothing on it scrolls sideways (people's sideways swipes on the old strips sent the
   browser back and forth). Pictures, posters and films load only when they come near (making.js).
   No inline styles in the markup; the only style set from script is a film's poster behind it. */

@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap;}

:root{
  --ground:#8AB6F0;
  --sheet:#FFFFFF;
  --ink:#111827;
  --muted:#4B5566;
  --ink-rgb:17,24,39;
  --accent:#2A50D6;
  --focus:#2242AF;
  --link:#2A50D6;
  --pill-bg:#111827;
  --pill-ink:#FFFFFF;
  --pill-hover:#273244;
  --ai-bg:#EDE8FF;
  --ai-ink:#5530C2;
  /* every other colour on the page, so a palette is only this list */
  --ai-line:#C8BAF6;
  --code:#2A50D6;           /* the pop-up's code colour */
  --on-code:#FFFFFF;
  --free-bg:#E7EBF2;
  --screen:#111827;         /* behind a film until its first frame */
  --shadow-rgb:17,24,39;
  --line:#DCE0E7;
  --line-strong:#6C727D;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --step--1:15px;
  --step-0:clamp(17px,calc(16.63px + 0.095vw),18px);
  --step-1:clamp(19.5px,calc(18.8px + 0.2vw),21.6px);
  --step-2:clamp(22.5px,calc(21.2px + 0.33vw),26px);
  --step-3:clamp(26px,calc(23.9px + 0.5vw),31px);

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:72rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 0 var(--line),0 24px 50px -34px rgba(var(--shadow-rgb),.45);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* a sideways swipe never turns into the browser's back or forward (browsers that honour it: Chrome, Edge, Firefox) */
html{-webkit-text-size-adjust:100%;overscroll-behavior-x:none;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;}
img,video{display:block;max-width:100%;}
img{height:auto;}
ol,ul{list-style:none;}
::selection{background:var(--ink);color:var(--sheet);}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px;}
.shell{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.06;text-wrap:balance;}
h1 span,h2 span{display:block;color:var(--muted);}
section{scroll-margin-top:0;}

/* ---------- header: the wordmark only, as on the homepage ---------- */
.top{position:relative;z-index:5;padding-block:clamp(.6rem,1.4vw,1.1rem);}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:700;
  font-size:var(--step-1);letter-spacing:-.03em;text-decoration:none;}
/* the app's mark, the black rounded square with the white Z, sized with the name (as on the homepage) */
.wordmark .zmark{display:block;flex:none;width:.86em;height:.86em;margin-right:.26em;}

/* ---------- the homepage's buttons and links ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.15rem;border-radius:999px;border:0;
  background:var(--pill-bg);color:var(--pill-ink);font-size:var(--step--1);font-weight:600;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:transform .2s var(--ease),background .2s;}
.pill:hover{background:var(--pill-hover);}
.pill:active{transform:scale(.97);}
.pill-big{min-height:54px;padding:0 1.6rem;font-size:var(--step-0);}
.more{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0;border:0;background:transparent;text-align:left;
  font-weight:600;font-size:var(--step-0);color:var(--link);text-decoration:none;cursor:pointer;}
.more::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);}
.more:hover{text-decoration:underline;text-underline-offset:4px;}
/* the label that says what this page is: a filled chip, read before the headline */
.kicker{display:inline-flex;align-items:center;gap:.55rem;min-height:34px;padding:0 .9rem 0 .75rem;border-radius:999px;
  background:var(--ai-bg);box-shadow:inset 0 0 0 1px var(--ai-line);font-size:var(--step--1);font-weight:700;letter-spacing:.02em;
  color:var(--ai-ink);margin-bottom:clamp(.8rem,2vh,1.2rem);}
.kicker::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}

/* ---------- the sections ---------- */
.mk{position:relative;}
.mk > section{position:relative;}

/* ---------- 1 · who is talking, and what this page is ---------- */
.hero{padding-block:clamp(1rem,4vh,3rem) clamp(2.5rem,8vh,5rem);}
.hero h1{font-size:clamp(2.5rem,calc(1.45rem + 3.4vw),4.6rem);letter-spacing:-.035em;line-height:1.02;max-width:15ch;}
.hero h1 span{margin-top:.1em;}
/* Dot says it, in the homepage's speech bubble */
.speaker{display:flex;align-items:flex-end;gap:clamp(.7rem,2vw,1.1rem);max-width:44rem;margin-top:clamp(1.2rem,3vh,1.8rem);}
.speaker img{flex:none;width:clamp(72px,9vw,118px);}
.speech{position:relative;flex:1;min-width:0;margin-bottom:clamp(.9rem,3vw,1.6rem);padding:1rem 1.2rem;border-radius:20px;background:var(--sheet);
  box-shadow:var(--shadow);font-size:var(--step-1);line-height:1.45;color:var(--ink);text-wrap:pretty;}
.speech::before{content:"";position:absolute;left:-9px;bottom:18px;width:20px;height:20px;background:var(--sheet);transform:rotate(45deg);border-radius:3px;}
/* the way to every prompt in one place (/prompts/) */
.hero-more{margin-top:clamp(1rem,2.5vh,1.5rem);}
/* on a phone the opening fills the first screenful: Dot, large, takes the room the words leave, so its line ends just
   above the screen's edge (the header is 63.2 px on every phone). The next headline starts about a quarter of a screen
   below it: less than a third of a screen of empty ground, and far enough that the two headlines never share a screen */
@media (max-width:639px){
  .hero{padding-bottom:calc(8.25rem + 5svh);}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-height:calc(96svh - 75px);}
  .speaker{flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:.6rem;width:100%;}
  .speaker picture{display:contents;}
  .speaker img{flex:1 1 0;min-height:22svh;width:100%;height:auto;object-fit:contain;object-position:left bottom;}
  .speech{flex:none;margin-bottom:0;}
  .speech::before{left:28px;top:-9px;bottom:auto;}
}

/* ---------- 2 + 4 · the websites and the films: a heading, then a grid ---------- */
.arc,.landed,.end{padding-block:clamp(2.5rem,8vh,5rem);}
.arc h2,.landed h2,.end h2{font-size:clamp(2.2rem,calc(1.3rem + 3.2vw),4.4rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch;}
.arc h2 span,.landed h2 span,.end h2 span{margin-top:.3em;font-size:.56em;letter-spacing:-.02em;line-height:1.15;max-width:26ch;}
.arc-head{max-width:48rem;}
.arc-hint{margin-top:clamp(.8rem,2vh,1.2rem);max-width:46ch;font-size:var(--step-1);line-height:1.45;color:var(--muted);text-wrap:pretty;}
.arc-hint a{color:var(--link);font-weight:600;text-underline-offset:3px;white-space:nowrap;}

/* On a phone, one column: each card is as tall as its content, a tall picture (60% of the screen) then its name, one
   line and its actions, and the next card follows 27% of a screen below. That keeps one picture in view at a time and
   leaves no empty band over a third of the screen, at any screen height. Wider screens keep the grid. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(1.5rem,4vh,2.4rem);align-items:start;}
@media (max-width:639px){
  .grid{row-gap:27svh;}
  .arc-sites .arc-hint,.arc-films .arc-hint{display:none;}
}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem 1.1rem;} .grid-make{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.grid-films,.grid-make,.grid-how{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.8rem 1.25rem;}}
@media (min-width:1024px){.grid-sites{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.8rem 1.25rem;}}

.card{min-width:0;display:flex;flex-direction:column;}
/* the task a link landed on (/making-of/#<task>): a blue ring round its card */
.is-landed{outline:3px solid var(--link);outline-offset:6px;border-radius:16px;}
.meta{display:flex;justify-content:space-between;gap:.5rem;margin-top:.75rem;font-size:var(--step--1);font-weight:700;letter-spacing:.02em;
  line-height:1.3;color:var(--ai-ink);}
.num{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;}
.card .title{margin-top:.35rem;font-family:var(--display);font-weight:600;font-size:var(--step-2);line-height:1.2;letter-spacing:-.015em;text-wrap:balance;}
.grid-make .card .title{margin-top:.8rem;}
.line{margin-top:.3rem;max-width:40ch;font-size:var(--step-0);line-height:1.5;color:var(--muted);text-wrap:pretty;}

/* under each card: one solid "Copy prompt", and beside it a quiet "How it was made" that opens the card's
   breakdown. "Copy prompt" copies the card's prompt exactly (making.js). */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem;margin-top:.85rem;}
.copy{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.2rem;border-radius:999px;background:var(--pill-bg);
  color:var(--pill-ink);font-size:var(--step-0);font-weight:700;white-space:nowrap;transition:background .2s,transform .2s var(--ease);}
.copy:hover{background:var(--pill-hover);}
.copy:active{transform:scale(.97);}
.copy.is-done::before{content:"";width:5px;height:10px;margin:-3px .1rem 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);}
.how{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:var(--step-0);font-weight:600;color:var(--link);white-space:nowrap;}
.how::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);}
.how:hover{text-decoration:underline;text-underline-offset:4px;}
.copy-offscreen{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;}

/* a website card: the page's picture on top; a tap on it opens the breakdown too */
.shot{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--sheet);cursor:pointer;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1),0 20px 40px -26px rgba(var(--shadow-rgb),.6);}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s var(--ease);}
.shot:hover img{transform:scale(1.02);}
/* on a phone a website shows its own phone-size page, as tall as a film (the landed one: see its section) */
@media (max-width:639px){ .shot{width:min(100%,calc(60svh * 390 / 844));aspect-ratio:390/844;} }

/* a film card: the film on top (tap for sound). On a phone a tall film is capped near 60% of the screen, so the card
   fits in one screenful; the three wide films take two columns on wide screens, and a phone leaves them out. */
@media (max-width:639px){ .film:not(.is-land) .film-media{width:min(100%,calc(60svh * 9 / 16));} }
@media (min-width:640px) and (max-width:899px){.film.is-land{grid-column:1 / -1;}}
@media (min-width:900px){.film.is-land{grid-column:span 2;}}
.film-media{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--screen) center/cover no-repeat;
  box-shadow:0 1px 0 var(--line),0 20px 40px -26px rgba(var(--shadow-rgb),.6);cursor:pointer;}
.film-media video{width:100%;height:100%;object-fit:cover;}
.film.is-land .film-media{aspect-ratio:16/9;background-color:#000;}
.film.is-land .film-media video{object-fit:contain;}
/* the three wide films are not shown on a phone at all (making.js neither plays them nor fetches their posters there) */
@media (max-width:639px){ .film.is-land{display:none;} }
/* so a phone counts only the films it shows: 1 / 44 first, where a wider screen counts 1 / 47 */
.num-phone{display:none;}
@media (max-width:639px){ .num-all{display:none;} .num-phone{display:inline;} }
/* the poster also sits behind the video, which stays hidden until its first frame paints (films.js is-waiting) */
.film-media video.is-waiting{opacity:0;}
.snd{position:absolute;right:.45rem;top:.45rem;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:rgba(22,33,58,.78);color:#fff;}
.snd-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.snd-icon{width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url("/making-of/icons/sound-off.svg") center/contain no-repeat;mask:url("/making-of/icons/sound-off.svg") center/contain no-repeat;}
.snd[aria-pressed="true"] .snd-icon{-webkit-mask-image:url("/making-of/icons/sound-on.svg");mask-image:url("/making-of/icons/sound-on.svg");}
.film-media.is-still::after{content:"";position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(22,33,58,.82) url("/making-of/icons/play.svg") 55% 50%/22px no-repeat;pointer-events:none;}

/* ---------- 3 · where it landed ---------- */
.landed-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
/* the outcome is a plain line with its caption, never a quotation: no quote bar, no
   display face, and no card of its own (on a phone a card would be a second thing to look at beside the picture) */
.said{margin-top:clamp(1.1rem,2.6vh,1.5rem);}
.said p{font-size:var(--step-1);line-height:1.45;font-weight:400;text-wrap:pretty;}
.said figcaption{margin-top:.4rem;font-size:var(--step--1);color:var(--muted);}
.landed .acts{margin-top:1.2rem;}
.landed-shot{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--sheet);box-shadow:var(--shadow);cursor:pointer;}
.landed-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;}
@media (max-width:820px){ .landed-grid{grid-template-columns:1fr;} }
/* on a phone: the label, the headline, the picture (the page at phone size), the outcome, then its actions */
@media (max-width:639px){
  .landed-grid{gap:0;}
  .landed-copy{display:contents;}
  .landed .kicker{order:1;justify-self:start;}
  .landed h2{order:2;}
  .landed-shot{order:3;margin-top:1.3rem;width:min(100%,calc(60svh * 390 / 844));aspect-ratio:390/844;}
  .landed .said{order:4;}
  .landed .acts{order:5;}
}

/* ---------- 5 · how we make each one now: the ten how-tos. A picture keeps its own shape (a tall crop, or the whole
   before-and-after), no taller than a film, and on a phone as wide as a film ---------- */
.grid-how .shot{aspect-ratio:auto;}
.grid-how .shot img{height:auto;max-height:60svh;object-position:top left;}
@media (max-width:639px){ .grid-how .shot{width:min(100%,calc(60svh * 9 / 16));aspect-ratio:auto;}
  /* a wider picture (the before-and-after) takes the whole column, so it is nearly as tall as a film and two
     pictures never share a screenful */
  .grid-how .shot.is-wide{width:100%;} }

/* ---------- 6 · the end ---------- */
.end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:clamp(1.5rem,4vh,2.4rem);}

/* ---------- footer: one line, as on the homepage ---------- */
.foot{border-top:1px solid var(--line);padding-block:1.6rem 2.4rem;}
.foot-line{font-size:var(--step--1);color:var(--muted);}

/* =====================================================================================================
   The homepage's new design (design only, no outside asset or word): Bricolage Grotesque headlines,
   set tight with the second line in the accent; the label as small caps in the accent; the wordmark in a tab hanging from a
   cream bar on wider screens; the opening as a rounded tinted card; every website and film on a rounded tile;
   accent pills, quiet links underlined with an arrow.
   ===================================================================================================== */
:root{--two-tone:#2A50D6;--card:#E3EAF7;--card-line:#DCE0E7;--tile-1:#BFD5F4;--tile-2:#FFFFFF;--tile-3:#E3EAF7;--tile-4:#B2CDF3;
  --tile-5:#A5C6F2;--tile-line:#DCE0E7;--top-h:82px;
  --btn:#2F5BEA;--btn-hover:#284DC7;}
/* the page is blue: text straight on it, or on the grid's blue tiles, takes the closest shade of the muted, accent and
   AI colours that reads at 4.5:1 there; the opening's card and Dot's speech keep the colours themselves */
:root{--muted-on-page:#3E4654;--accent-on-page:#203CA0;--ai-ink-on-page:#4B2AAC;
  --muted-own:var(--muted);--link-own:var(--link);--ai-ink-own:var(--ai-ink);}
body{--muted:var(--muted-on-page);--link:var(--accent-on-page);--ai-ink:var(--ai-ink-on-page);}
.hero .hero-copy,.speech{--muted:var(--muted-own);--link:var(--link-own);--ai-ink:var(--ai-ink-own);}
h1,h2,h3{font-weight:700;letter-spacing:-.04em;}
h1 span,h2 span{color:var(--two-tone);}
.hero h1,.arc h2,.landed h2,.end h2{letter-spacing:-.045em;line-height:1.04;}
.arc h2 span,.landed h2 span,.end h2 span{letter-spacing:-.03em;}
.kicker{min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;gap:.6rem;font-size:15px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--link);}
.pill,.copy{font-weight:700;background:var(--btn);color:#FFFFFF;}
.pill:hover,.copy:hover{background:var(--btn-hover);}
.end-actions .pill::after{content:"";flex:none;width:20px;height:14px;margin-left:1rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.how,.more{padding-bottom:.2rem;border-bottom:1px solid currentColor;}
.how:hover,.more:hover{text-decoration:none;border-bottom-width:2px;}
.speech,.speech::before{background:var(--sheet);}
.speech{box-shadow:0 0 0 1px var(--tile-line),0 22px 44px -32px rgba(var(--shadow-rgb),.45);}
.film-media,.shot,.landed-shot{box-shadow:0 0 0 1px var(--tile-line),0 24px 44px -30px rgba(var(--shadow-rgb),.5);}
.snd{background:rgba(var(--ink-rgb),.8);}
.film-media.is-still::after{background-color:rgba(var(--ink-rgb),.82);}
.is-landed{outline-color:var(--link);}
.foot{border-top-color:var(--line);}

/* the opening: a rounded card, tinted */
.hero .hero-copy{position:relative;padding-block:clamp(1.6rem,4vh,3rem);}
.hero .hero-copy::before{content:"";position:absolute;z-index:-1;inset:0 calc(var(--gutter) - 24px);border-radius:36px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-line);}
.hero{position:relative;isolation:isolate;}
@media (max-width:639px){.hero .hero-copy::before{inset:0 calc(var(--gutter) - 12px);border-radius:28px;}}

/* every website and film on a rounded tile, the tiles' fills varied down the grid */
@media (min-width:640px){
  .grid .card{padding:18px 18px 12px;border-radius:25px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--tile-line);}
  .grid .card:nth-child(4n+1){background:var(--tile-5);}
  .grid .card:nth-child(4n+2){background:var(--tile-2);}
  .grid .card:nth-child(4n+3){background:var(--tile-3);}
  .grid .card:nth-child(4n+4){background:var(--tile-4);}
  .grid{row-gap:1.1rem;}
}

/* the sculpted header on wider screens: a pale bar that stays put, the wordmark in a tab hanging from its middle */
@media (min-width:769px){
  .top{position:sticky;top:0;z-index:40;height:var(--top-h);margin:0 24px;padding:0;background:var(--ground);}
  .top .shell{display:flex;justify-content:center;align-items:flex-start;height:100%;max-width:none;padding:0;}
  .top .wordmark{height:calc(var(--top-h) + 4px);padding:0 42px 6px;border-radius:0 0 40px 40px;background:var(--ground);
    font-size:40px;line-height:1;font-weight:700;letter-spacing:-.05em;}
  section{scroll-margin-top:calc(var(--top-h) + 1rem);}
}
@media (max-width:768px){.top .wordmark{font-size:28px;letter-spacing:-.05em;}}
/* a narrow card: "How it was made" wraps inside its card rather than running past it */
.grid .how{white-space:normal;text-align:left;}