/* Switzer (Fontshare, free for commercial use), served from this folder so the site does not depend on their CDN */
@font-face { font-family: "Switzer"; src: url("media/fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("media/fonts/Switzer-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --bg: #ffffff;
  --ink: #111111;
  --mute: #6b6b6b;
  --accent: #e01b24; /* red, after the Athletico Paranaense crest (no official hex found; 4.8:1 on white) */
  --line: #e6e6e6;
  --ph: #ececE8;
  --pad: 16px;
  /* GRID: 12 columns (8px gutter, 16px margins), read as THREE FIELDS of four columns: 1-4, 5-8, 9-12.
     Everything starts on a field line: columns 1, 5 and 9. The thumbnails sit on 2-column steps (1, 3, 5, 7) inside fields 1-2;
     the list, the portrait and the third column of every row start on field 3.
     SPACING: one scale in 8px steps; nothing else is used between blocks. */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  --max: 1760px; /* on wide screens the site stops growing here and sits centred, with air on both sides */
  --hdr-top: var(--sp-5); /* above the header, above the pinned info row, and between the sentence and the info row */
  --gap: 8px;
  /* TYPE SYSTEM (after Foucault): one family (Regular 400, Bold 700 for the site name), seven roles; sizes and weights follow the V1. The big roles are tight and
     set in capitals for display; the small ones breathe a little. Change a role here and it changes everywhere. */
  --font-sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fontshare, free for commercial use */
  --type-display:   400 clamp(40px, 8vw, 128px) / 0.8 var(--font-sans);       /* case title (capitals); next case is one step down */
  --statement-size: clamp(30px, 3.5vw, 50px);
  --type-statement: 400 var(--statement-size) / 1 var(--font-sans);             /* home sentence and the case sentence */
  --type-lead:      400 clamp(20px, 2.2vw, 32px) / 1.15 var(--font-sans);     /* about text, case one-liner */
  --type-body:      400 20px / 1.1 var(--font-sans);    /* default text, credits (as in the V1) */
  --type-text:      400 16px / 1.4 var(--font-sans);                          /* case paragraph */
  --type-ui:        400 12px / 1.2 var(--font-sans);                          /* info, captions, footer (12px as in the V1) */
  --type-label:     400 12px / 1.2 var(--font-sans);                          /* small capitals: list, info, header */
  --ls-display: -0.03em; --ls-statement: -0.03em; --ls-lead: -0.02em; --ls-body: 0.01em; --ls-text: 0.01em; --ls-ui: 0.01em; --ls-label: 0.04em;
  --tt-display: uppercase;
  /* motion: blur-in (after Foucault) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --blur-in: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mono { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.mute { color: var(--mute); }

/* layout grid (12 cols, 8px gutter, 16px margins) */
.g { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 0 var(--pad); }
/* small text everywhere = the same capitals as the thumbnail list (after Zeroframe: one small size, tracked, in capitals) */
.sm { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.sm a, .sm span { display: block; color: var(--mute); transition: color 0.2s; }

/* header (sticky, transparent, inverted over whatever scrolls under it) */
.top {
  position: sticky; top: 0; z-index: 20; padding-top: var(--hdr-top); padding-bottom: 16px; align-items: start;
  /* no background: the text inverts against whatever scrolls underneath it */
  --ink: #eee; --mute: #949494; color: var(--ink); /* with the difference blend over white these become #111 and #6b6b6b */
  mix-blend-mode: difference; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.top a { pointer-events: auto; }
.top > * { grid-row: 1; }
.top .logo { grid-column: 1; width: 32px; height: 49px; pointer-events: auto; transition: opacity 0.5s var(--ease), visibility 0s linear 0s; }
.top .logo svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: none; }
/* the mark leaves as soon as the page scrolls, and the info takes its place in the first column (as in the main version) */
.logo-off .top .logo, [data-static] .top .logo { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 0.5s; }
.sm .tl { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tl i { display: block; width: 40px; height: 1px; background: currentColor; flex: none; }
/* header after Oblica: the mark on the left, the menu on column 5, the e-mail on the right edge */
.top nav { grid-column: 10 / -1; display: flex; justify-content: flex-end; gap: 24px; }
/* header: four groups; the first takes the mark's place once it has left */
/* the three blocks sit on the thumbnails' columns 1, 3 and 5: fields 1-2 only, so field 3 stays free above the list */
.top .s1 { grid-column: 1 / span 2; }
.top .s1 .l { color: var(--ink); }
/* the site name and the job title are the two bold lines of the small info (header and the opening row, which is the same text) */
.top .s1 .l, .top .h3 span:first-child, .info .b1 .l, .info .b3 span:first-child { font-weight: 700; }
.top .h3 { grid-column: 3 / span 2; }
.top .h2 { grid-column: 5 / span 2; }
/* the info starts hidden: it lives in the opening row, and moves up into the header once the page scrolls (same behaviour as the main version) */
.top .x {
  opacity: 0; filter: blur(10px); visibility: hidden;
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.scrolled .top .x { opacity: 1; filter: none; visibility: visible; transition-delay: 0.34s; }
.scrolled .top .h2 { transition-delay: 0.4s; }
.scrolled .top .h3 { transition-delay: 0.46s; }
/* leaving: info row first, then the sentence, then the header fills in. Coming back: sentence first, then the row. */
.intro .hero { transition: opacity 0.7s var(--ease-out) 0.1s, filter 0.7s var(--ease-out) 0.1s; }
.scrolled:not([data-static]) .intro .hero { opacity: 0; filter: blur(20px); pointer-events: none; transition-delay: 0.22s; }
.top nav a { color: var(--ink); font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; padding: 0 0 2px; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s, color 0.2s; }
.top nav a[aria-current="page"] { text-decoration-color: currentColor; }
/* the sentence stands on a baseline well above the middle of the screen (38%), so the second row of thumbnails already shows; the info and the thumbnails follow it */
.intro { display: contents; }
/* the sentence is pinned right under the header while the page scrolls, so it fades out where it stands (its box starts at the header's bottom edge: top offset + 49px logo + 16px) */
.hero { position: sticky; top: calc(var(--hdr-top) + 65px); z-index: 1; pointer-events: none; min-height: calc(38svh - var(--hdr-top) - 65px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad); }
.hero h1 { margin: 0; text-transform: uppercase; /* test: the sentence in capitals (delete this property to go back) */ text-wrap: balance; font: var(--type-statement); letter-spacing: var(--ls-statement); animation: blurIn 1s var(--ease-out) 0.1s backwards; }
.hero h1 .o { color: var(--accent); }
/* the info row rises with the page, and when it reaches the top it stays there as the header's info (it is the same text, in the same columns) */
.info { position: sticky; top: var(--hdr-top); z-index: 19; margin-top: var(--hdr-top); align-items: start; --ink: #eee; --mute: #949494; color: var(--ink); mix-blend-mode: difference; animation: blurIn 1s var(--ease-out) 0.3s backwards; }
.info .down { grid-column: 12; grid-row: 1; justify-self: end; margin-top: -3px; color: var(--ink); line-height: 0; }
.info .down svg { display: block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes blurIn { from { opacity: 0; filter: blur(var(--blur-in)); } }
.info .b1, .info .b2, .info .b3 { grid-row: 1; }
.info .b1 { grid-column: 1 / span 2; }
.info .b1 .l { color: var(--mute); }
.info .b3 { grid-column: 3 / span 2; }
.info .b2 { grid-column: 5 / span 2; }
/* the name: the one big thing on the page (after Zeroframe), in capitals; the same size closes the page */
.mark { margin: 0; font: var(--type-display); font-size: clamp(36px, 5vw, 72px); letter-spacing: var(--ls-display); text-transform: var(--tt-display); white-space: nowrap; }
html { scroll-behavior: smooth; }
#work { scroll-margin-top: 72px; }

::selection { background: var(--accent); color: #fff; }

/* work: rows of --n cards; the one under the pointer opens, the others narrow (after Zeroframe, measured at 1440) */
.work {
  --g: 10px;
  --cr: min(48px, 3.33vw); /* card corner */
  --in: 12px; /* glass inset, same on every side */
  --n: 4;
  /* row height = closed card width x 5/4 (a 4:5 card) */
  --rh: min(calc((100vw - 2 * var(--pad) - (var(--n) - 1) * var(--g)) / var(--n) * 1.25), 78svh);
  /* open card = 5:4 (a 4:5 card on its side): width = 1.25 x row height = 1.5625 x closed width */
  --ew: calc((100vw - 2 * var(--pad) - (var(--n) - 1) * var(--g)) / var(--n) * 1.5625);
  padding: 0 var(--pad) 96px; display: flex; flex-direction: column; gap: var(--g);
}
.row { display: flex; gap: var(--g); height: var(--rh); }
.slot { flex: 1 1 0; min-width: 0; transition: flex-grow 0.77s cubic-bezier(0.5, 1, 0.89, 1); pointer-events: none; }
.card {
  display: block; flex: 1 1 0; min-width: 0;
  transition: flex-grow 0.77s cubic-bezier(0.5, 1, 0.89, 1), opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.card.rv { transition: flex-grow 0.77s cubic-bezier(0.5, 1, 0.89, 1), opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out); }
.card.is-on { flex-grow: calc(1.5625 * (var(--n) - 1) / (var(--n) - 1.5625)); }
.card .media {
  position: relative; height: 100%; overflow: hidden;
  border-radius: var(--cr);
  background: var(--ph);
  isolation: isolate;
}
/* media never rescale: a fixed box centred in the card and cropped by it */
.card .media img, .card .media video {
  position: absolute; top: 0; left: 50%; height: 100%; width: max(var(--rh), var(--ew)); max-width: none;
  transform: translateX(-50%); object-fit: cover;
}
.card .media video { opacity: 0; transition: opacity 0.35s var(--ease); }
.card .media video.crop { width: calc(max(var(--rh), var(--ew)) / var(--vc)); height: auto; aspect-ratio: var(--va, 16 / 9); top: var(--vy, 50%); transform: translate(-50%, -50%); }
.card .media video.on { opacity: 1; }
/* framed thumbnails (set per case in data.js): at rest the image is shown whole (full height, 85% of the width instead of 64%);
   opening it grows to the usual cover size, anchored at the chosen vertical focus, with the card's own curve */
.card.framed .media img {
  height: auto; aspect-ratio: 1600 / 1690; object-fit: fill; top: 0;
  width: calc(var(--rh) / 1.0563);
  transition: width 0.77s cubic-bezier(0.5, 1, 0.89, 1), top 0.77s cubic-bezier(0.5, 1, 0.89, 1);
}
.card.framed.is-on .media img { width: max(var(--rh), var(--ew)); top: calc((var(--rh) - max(var(--rh), var(--ew)) * 1.0563) * var(--py, 0.5)); }
.card .media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.1; pointer-events: none; }
.glass {
  position: absolute; z-index: 2; left: var(--in); right: var(--in); bottom: var(--in); overflow: hidden; /* follows the card width while it opens */
  /* concentric with the card: corner = card corner - inset, and the box is exactly two corners tall, so it is a perfect pill
     with the same optical distance (about 21px) from the text to every edge */
  min-height: calc(2 * (var(--cr) - var(--in)));
  padding: 16px calc((var(--cr) - var(--in)) * 0.6);
  display: flex; flex-direction: column; justify-content: center;
  border-radius: calc(var(--cr) - var(--in)); /* concentric with the card */
  color: #fff;
  background: rgba(10, 10, 10, 0.22); /* a little dark so the white text holds on bright photos */
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  opacity: 0; transition: opacity 0.77s cubic-bezier(0.5, 1, 0.89, 1);
}
.glass h2, .glass .n, .glass .m { filter: blur(8px); transition: filter 0.77s cubic-bezier(0.5, 1, 0.89, 1); }
.card.is-on .glass { opacity: 1; }
.card.is-on .glass h2, .card.is-on .glass .n, .card.is-on .glass .m { filter: none; }
.glass h2, .glass p { margin: 0; font: inherit; letter-spacing: inherit; }
.glass .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.glass h2 { min-width: 0; color: #fff; text-box: trim-start cap alphabetic; } /* no leading above the first line */
/* the idea's number, same format as the case page ("02 / 12"): grey like the credits, on the title's row */
.glass .n { flex: none; color: rgba(255, 255, 255, 0.48); font-variant-numeric: tabular-nums; text-box: trim-start cap alphabetic; }
.glass .m { color: rgba(255, 255, 255, 0.48); }
.glass h2, .glass .m { white-space: nowrap; }
.glass .m { display: block; text-box: trim-end cap alphabetic; } /* no leading under the last line */
.glass .m span + span::before { content: "/"; margin: 0 10px; }

/* closing block = the footer of the home (after Zeroframe): the big line, three small columns on the same grid, a base line */
.foot.site-foot { display: block; padding: var(--sp-6) var(--pad) calc(2 * 2 * 14.4px); } /* under the text: twice its height (two lines of 14.4px, 57.6px) */
.site-foot > * { border-top: 1px solid var(--line); padding: var(--sp-2) 0 var(--sp-3); }
.site-foot .cta .mark { display: block; color: var(--ink); font-size: clamp(34px, 8vw, 58px); line-height: 1; white-space: normal; transition: color 0.25s var(--ease); }
.site-foot .cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
/* same columns as the header and the info row: 1 / 4 / 7, and the menu on 10; Experience and Clients sit under the second and third */
.site-foot .f1 { grid-column: 1 / span 4; }
.site-foot .f2 { grid-column: 5 / span 4; }
.site-foot .f3 { grid-column: 9 / span 4; }
/* back to top: the same arrow as the one under the opening (the "down" arrow), pointing up, with the same slow nudge */
.site-foot .f1, .site-foot .f2, .site-foot .f3, .site-foot .totop { grid-row: 1; }
.site-foot .totop { grid-column: 12; justify-self: end; align-self: start; margin-top: -3px; color: var(--ink); line-height: 0; transition: color 0.2s; }
.site-foot .totop svg { display: block; animation: nudgeUp 2.4s ease-in-out infinite; }
@keyframes nudgeUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.site-foot .l { color: var(--ink); font-weight: 700; }
/* the closing: the address as the biggest line (the sentence's size, in capitals, a mailto), then the small facts on the page's fields */
.site-foot > .f-big { padding: var(--sp-3) 0 0; } /* the name and Selected Works are all that is left in the footer: nothing under them but the page's 16 */
.site-foot > .cols { border-top: 0; padding-top: 0; padding-bottom: 0; } /* only the arrow is left in this row: 16 under the name, nothing extra under the arrow (the footer's own 16 closes the page) */
.f-name, .f-sub { display: block; width: fit-content; max-width: 100%; font: var(--type-label); letter-spacing: var(--ls-label); line-height: 1.2; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; } /* the header's size and weights: the address bold, Selected Works regular, both in ink */
.site-foot .f-name { color: var(--ink); font-weight: 700; transition: color 0.2s; }
.site-foot .f1 .l { font-weight: 400; color: var(--mute); }
.site-foot .base { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 0; }
.site-foot .base span { color: var(--mute); }

/* hero enters as one block */
/* blur-in on load (after Foucault): the title first, the supporting block right after */
@keyframes blurIn { from { opacity: 0; filter: blur(var(--blur-in)); } }

/* footer */
.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: clamp(64px, 9vw, 140px) var(--pad) var(--pad);
}
.foot a { color: var(--mute); transition: color 0.2s; }

/* case page */
/* case page: same start line as the home and the about, the credits on the about's column lines, the text stacked, then the media */
.c-top { padding: max(0px, calc(38svh - 2 * var(--statement-size) - var(--hdr-top) - 65px)) var(--pad) 0; }
.c-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.c-idx { grid-column: 12; justify-self: end; white-space: nowrap; margin: 6px 0 0; color: var(--mute); font-variant-numeric: tabular-nums; }
.c-top h1 { grid-column: 1 / span 11; margin: 0; font: var(--type-display); letter-spacing: var(--ls-display); text-transform: var(--tt-display); text-wrap: balance; }
/* the cover: edge to edge, as tall as the screen, no radius; on load it starts covering everything and lowers into place (see main.js) */
.c-hero { position: relative; margin-top: var(--sp-6); }
.c-hero video { display: block; width: 100%; height: 100vh; height: 100svh; object-fit: cover; background: var(--ph); border-radius: 0 0 26px 26px; }
.c-pre body { visibility: hidden; }
.c-lock { overflow: hidden; }
/* text on fields 1-2 (sentence, then the paragraph), the facts on field 3 where the list and the portrait start */
.c-text { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; padding: var(--sp-7) var(--pad) 0; }
/* after Haven: the sentence is big on top, the paragraph right under it on the left; the facts sit small on field 3, where the list starts on the home; all in the full ink */
.c-line { grid-column: 1 / span 8; grid-row: 1; margin: 0; text-wrap: balance; font: var(--type-statement); letter-spacing: var(--ls-statement); color: var(--ink); }
.c-facts { grid-column: 9 / -1; grid-row: 2; margin: calc(var(--sp-5) - 4px) 0 0; color: var(--mute); }
/* laid out like the home list: no rules, 24px rows, a narrow label column and the value right beside it, all in the one grey */
.c-facts .tr { grid-template-columns: 7ch minmax(0, 1fr); column-gap: 14px; padding: 0; line-height: 24px; }
.c-facts .tr .c1, .c-facts .tr .c2 { grid-column: auto; margin: 0; color: var(--mute); }
.c-facts [hidden] { display: none; }
/* the names are one group: tighter lines than the 24px rows (4px above keeps the first line level with its label) */
.c-facts .tr .c2#c-with { line-height: 16px; padding: 4px 0; }
.c-body { grid-column: 1 / span 7; grid-row: 2; margin: var(--sp-5) 0 0; text-wrap: pretty; font: var(--type-text); letter-spacing: var(--ls-text); color: var(--mute); } /* 16px on seven columns, about 100 characters a line; the facts sit on field 3, on the same first line */

.stage { padding: var(--sp-8) var(--pad) 0; display: grid; gap: var(--gap); }
.stage .film { aspect-ratio: 16 / 9; width: 100%; border: 0; background: #111; }
.stage .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-items: start; }
.stage .grid > * { width: 100%; background: var(--ph); }

.next { display: block; margin: var(--sp-8) var(--pad) 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--line); }
.next .label { display: block; margin-bottom: 16px; color: var(--mute); }
.next .t { display: block; font: var(--type-display); font-size: clamp(32px, 6vw, 96px); letter-spacing: var(--ls-display); text-transform: var(--tt-display); color: var(--ink); transition: opacity 0.2s; }
.next:hover .t { opacity: 0.55; }

/* about, option D: one column of text on columns 1-8, the sentence and the story stacked (the three lists then sit side by side underneath), and the portrait on columns 9-11 (not pinned), square like the project media. Breaks: the sentence is capped at 17.2em and the story is balanced, so lines end on phrases ("20k-inhabitant", "director/art" and "a charming" never split). Four gaps only (--a-in 16, --a-par 24, --a-sub 48, --a-part 96; the hairline's padding is 24) and a grey hairline on top of each list. Contact, Experience and Awards stand side by side on the three field lines (columns 1, 5 and 9), label above rows; rows are two columns (first datum, then the second at 11.5em; awards: 20em, 5.4em, project). */
.about { display: block; padding: 0;
  /* the only four gaps used on this page (all from the 8px scale): inside a section (rule to label, label to rows, festival to rows), between paragraphs, between sub-blocks (sentence to story, festival to festival), between the parts (top block to the lists, and list to list when stacked) */
  --a-in: var(--sp-2); /* rule to label is 24 (the 8px of leading above the capitals make it read as 32, the same as label to rows, and festival to rows); rows are 24px apart (16 between capitals); festivals are 48 apart (64 between capitals) */ --a-par: var(--sp-3); --a-sub: var(--sp-5); --a-part: var(--sp-7); }
.a-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; /* the text starts where the home sentence starts */
  padding: max(0px, calc(38svh - 2 * var(--statement-size) - var(--hdr-top) - 65px)) var(--pad) 0; }
.a-main { grid-column: 1 / span 8; grid-row: 1; }
.about .portrait { grid-column: 9 / span 3; grid-row: 1; margin: 0; }
.about .portrait img { width: 100%; border-radius: 0; background: var(--ph); }
.a-lead { max-width: 17.2em; /* 860px at 50px: the breaks fall on the phrases (see the breaks note above) */ margin: 0; font: var(--type-statement); letter-spacing: var(--ls-statement); text-transform: var(--tt-display); text-wrap: balance; }
.a-p1 { max-width: calc((100% - 7 * var(--gap)) / 8 * 6 + 5 * var(--gap)); margin: var(--a-sub) 0 0; font: var(--type-body); line-height: 1.2; letter-spacing: var(--ls-body); text-wrap: balance; }
.nb { white-space: nowrap; }
.a-p1 p { margin: 0; }
.a-p1 p + p { margin-top: var(--a-par); }
.a-block { grid-row: 2; margin: var(--a-part) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); } /* a grey hairline closes every list at the top (the footer's rule, same grey) */
.a-wrap > .a-c1 { grid-column: 1 / span 4; }
.a-wrap > .a-col { grid-column: 5 / span 4; grid-row: 2; } /* Experience and Clients, one under the other */
.a-wrap > .a-c3 { grid-column: 9 / span 4; }
.a-col > .a-block { grid-row: auto; grid-column: auto; }
/* clients: the names in running text, 24px lines like the other lists */
.cl-text { margin: 0; line-height: 24px; color: var(--ink); text-wrap: pretty; }
.cl-text span { display: inline; color: inherit; } /* .sm turns every span into a block; here they run on */ /* the brands run on in one paragraph, separated by commas; each name (with its comma) stays whole */
.a-block .lab { margin: 0 0 var(--a-in); font: inherit; letter-spacing: inherit; line-height: 24px; color: var(--ink); }
.tbl { display: grid; margin: 0; }
.tr { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); padding: 4px 0; }
.tr > * { margin: 0; min-width: 0; }
.tr .c1 { grid-column: 1 / span 4; }
.tr .c2 { grid-column: 5 / span 4; font-variant-numeric: tabular-nums; }
.tr .c3 { grid-column: 5 / span 4; }
/* rows like the home list and the project facts: 24px lines, no rules between rows. Experience: agency on field 2, years on field 3; awards: award on field 2 (three columns), year on the last column of that field, project on field 3 */
.about .tr { padding: 0; line-height: 24px; }
.about .tr { grid-template-columns: 11.5em minmax(0, 1fr); column-gap: var(--sp-3); } /* 24 of air between the columns of every list */
.about .tr .c1, .about .tr .c2, .about .tr .c3 { grid-column: auto; }
.aw-group .tr { grid-template-columns: 20em 3em minmax(0, 1fr); }
.aw-group .tr .c3 { padding: 4px 0; line-height: 16px; text-wrap: balance; } /* a project that needs two lines is set tight (16px steps) so it reads as one item, not two rows; one line still fills the 24px row */
.tr .ink { color: var(--ink); }
.aw-group .tr .c1 { color: var(--ink); } /* the award is in the ink; year and project are grey */
.aw-group + .aw-group { margin-top: var(--a-sub); }
.aw-h { margin: 0 0 var(--a-in); font: inherit; font-weight: 700; letter-spacing: inherit; line-height: 24px; color: var(--ink); } /* the festival names are the one bold thing in the lists: the group title over its rows (the award names are ink too, so only the weight sets them apart) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* motion: one entrance for every element (header, text, media, thumbnails, list, footer): it rises 14px, sharpens from a 6px blur and fades in over 0.9s with a soft ease-out; elements that arrive together follow each other 90ms apart (main.js sets --d) */
:root { --enter-y: 14px; --enter-blur: 6px; --enter-dur: 0.9s; --enter-ease: var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(var(--enter-y)); filter: blur(var(--enter-blur)); } }
@keyframes enterFade { from { opacity: 0; filter: blur(var(--enter-blur)); } }
.rv:not(.in) { opacity: 0; }
.rv.in { animation: enter var(--enter-dur) var(--enter-ease) var(--d, 0s) backwards; }
.top { animation: enterFade var(--enter-dur) var(--enter-ease) backwards; }
@media (prefers-reduced-motion: reduce) {
  .rv:not(.in) { opacity: 1; }
  .rv.in, .top { animation: none; }
  .top .x, .top .logo { transition: none; }
  .glass h2, .glass .n, .glass .m { filter: none; }
  html { scroll-behavior: auto; }
  .card .media video { display: none; }
}
@media (max-width: 1000px) {
  :root { --type-label: 400 12px / 1.2 var(--font-sans); }
  .work { display: grid; grid-template-columns: repeat(2, 1fr); }
  .row { display: contents; }
  .slot { display: none; }
  .card, .card.rv { flex: none; transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out); }
  .work { gap: var(--gap); }
  .card .media { height: auto; aspect-ratio: 7 / 8; }
  .card .media img, .card .media video { left: 0; width: 100%; transform: none; }
  .card.framed .media img, .card.framed.is-on .media img { width: 100%; height: 100%; top: 0; aspect-ratio: auto; object-fit: cover; transition: none; }
  .card .media video.crop { left: 50%; top: 0; width: auto; height: 100%; transform: translateX(-50%); }
  .glass h2, .glass .n, .glass .m { filter: none; }
  .glass h2 { white-space: normal; }
  .glass .m { flex-wrap: wrap; white-space: normal; }
  .glass { width: auto; right: 12px; bottom: 12px; opacity: 1; min-height: 0; padding: 16px; border-radius: 16px; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(20, 20, 20, 0.16)); }
  .card .media { border-radius: 28px; }
  .c-line, .c-facts, .c-body { grid-column: 1 / -1; grid-row: auto; }
  .c-body { margin-top: var(--sp-4); }
  .c-facts { margin-top: var(--sp-4); order: 3; }
  .c-hero { margin-top: var(--sp-4); }
  .c-text { padding-top: var(--sp-6); }
  .c-top { padding-top: 40px; }
  .c-top h1 { grid-column: 1 / span 10; }
  .c-idx { grid-column: 11 / -1; margin-top: 4px; }
  .a-wrap { display: flex; flex-direction: column; align-items: stretch; padding-top: var(--sp-4); }
  .a-main { display: contents; }
  .a-wrap > .a-block, .a-wrap > .a-col { grid-column: auto; grid-row: auto; }
  .a-lead { order: 1; }
  .a-p1 { order: 2; max-width: none; text-wrap: pretty; } /* nine lines here: more than balance can handle, so no orphan instead */
  .about { --a-part: var(--sp-5); --a-sub: var(--sp-4); } /* 48 between the parts and 32 between the sentence, the story and the portrait on small screens (96 and 48 on desktop) */
  .about .portrait { order: 3; position: static; margin-top: var(--a-sub); }
  /* reading order: the text about me, the portrait, then Contact, Experience + Clients, Awards */
  .a-wrap > .a-c1 { order: 4; }
  .a-wrap > .a-col { order: 5; }
  .a-wrap > .a-c3 { order: 6; }
  .a-col > .a-block { order: 0; }
  .a-block { padding-top: var(--sp-2); } /* 16 under the hairline instead of 24 */
  .about .tr { grid-template-columns: 1fr auto; }
  .about .tr .c1 { grid-column: 1; }
  .about .tr .c2 { grid-column: 2; text-align: right; }
  .about .tr .c3, .aw-group .tr .c3 { grid-column: 1 / -1; }
  .aw-group .tr .c1 { grid-column: 1; }
  .aw-group .tr .c2 { grid-column: 2; }
  .aw-group .tr { grid-template-columns: 1fr auto; }
  .aw-group .tr + .tr { margin-top: var(--sp-1); } /* each award is two lines here: air between entries */
}
@media (max-width: 1100px) {
}
@media (max-width: 1000px) {
  .top .s1, .info .b1 { grid-column: 1 / span 4; }
  .top .h3, .info .b3 { grid-column: 5 / span 4; }
  .top .h2, .info .b2 { grid-column: 9 / span 4; }
}
@media (max-width: 800px) {
  .top { position: static; padding-top: 8px; padding-bottom: 0; --ink: #111; --mute: #6b6b6b; mix-blend-mode: normal; pointer-events: auto; }
  .top .x { display: none !important; }
  .logo-off .top .logo, [data-static] .top .logo { opacity: 1; visibility: visible; pointer-events: auto; }
  .scrolled:not([data-static]) .intro .hero,
  .info { position: static; mix-blend-mode: normal; --ink: #111; --mute: #6b6b6b; }
}
@media (max-width: 600px) {
  .work { grid-template-columns: 1fr; }
      .stage .grid { grid-template-columns: 1fr; }
  .intro { min-height: 0; }
  .hero { position: static; min-height: 0; padding-top: 40px; }
  .info { row-gap: 24px; }
  .info .b1, .info .b2, .info .b3 { grid-column: 1 / -1; grid-row: auto; }
  .info .down { display: none; }
  .site-foot .f1, .site-foot .f2, .site-foot .f3 { grid-column: 1 / -1; grid-row: auto; }
  .site-foot .totop { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 0; }
  .site-foot .cols { row-gap: 24px; }
}


/* ===== opening, tied to the scroll (home, wide screens): --p runs from 0 to 1 until the info row reaches the header ===== */
/* the sentence fades out where it stands, over the first 45% of the stretch; the logo leaves a little later (over 67%), before the info row arrives at its corner */
body.scrub:not([data-static]) .intro .hero { opacity: clamp(0, calc(1 - var(--p, 0) * 2.2), 1); filter: blur(calc(var(--p, 0) * 24px)); transition: none; }
/* the arrow would sit under the menu once the row is pinned: it fades first */
body.scrub .info .down { opacity: clamp(0, calc(1 - var(--p, 0) * 3), 1); }
body.scrub .top .logo { opacity: clamp(0, calc(1 - var(--p, 0) * 1.5), 1); visibility: visible; transition: none; }
body.scrub .top .logo { pointer-events: auto; }

/* ===== home option C: sparse mosaic + list (after the Zeroframe "Clients & Partners" section) ===== */
.clients { padding: calc(var(--sp-6) - 8px) var(--pad) 0; /* 8px of it is the mosaic's optical offset: 64px from the info row to the tiles */ display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; scroll-margin-top: 72px; }
/* margin-top: the first capital of the list sits 8px under the top of its line box; the thumbnails start there, so the tops match optically.
   padding-bottom (2 rows of the list, 48px) keeps a little air under the last row before the footer */
.mosaic { --rest: 1; grid-row: 1; grid-column: 1 / span 8; margin-top: 8px; padding-bottom: calc(2 * 24px); display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gap); row-gap: var(--sp-3); }
.tile {
  grid-row: var(--r); grid-column: calc(var(--c) * 2 - 1) / span 2; width: calc(100% - var(--sp-2)); /* 2 columns minus 16px: the left edge sits on the column line, 24px of air to the next tile */ display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12%; background: var(--ph);
}
.tile:not(.in) { opacity: 0; }
/* --rest is the opacity the thumbnails start with (1 = fully lit from the start; 0.4 or 0.2 = dim, lighting up to 1 as the text leaves (--p, set by the scroll code, runs 0 to 1); under the pointer one is always fully lit */
.tile.in { opacity: clamp(var(--rest, 1), calc(var(--rest, 1) + (var(--p, 0) - 0.25) * (1 - var(--rest, 1)) / 0.75), 1); transition: opacity 0.3s var(--ease-out); animation: enter var(--enter-dur) var(--enter-ease) var(--d, 0s) backwards; }
.tile.in.on { opacity: 1; }
/* while one thumbnail is under the pointer, the others go back to the dim level, whatever the scroll position */
@media (hover: hover) { .mosaic.hov .tile.in:not(.on) { opacity: 0.2; } }
@media (hover: none) { .tile.in { opacity: 1; } }
.tile { position: relative; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.tile video.on { opacity: 1; }
.tile video.crop { inset: auto; left: 50%; top: var(--vy, 50%); width: calc(100% / var(--vc)); height: auto; aspect-ratio: var(--va, 16 / 9); transform: translate(-50%, -50%); }
/* one line per case: number, project, client (client sits at the right edge; the agency/year stays on the case page) */
/* the list shares the thumbnails' grid row, so their tops are the same; once the top reaches the header it stays pinned there */
.wlist {
  grid-row: 1; grid-column: 9 / -1; position: sticky; top: calc(var(--hdr-top) + 43px + var(--sp-6) - 8px); /* pinned: the same 56px of air under the info row as when both rest, so contacts and list never read as one block */ list-style: none; margin: 0; padding: 0; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.wlist a { display: grid; grid-template-columns: 2ch auto minmax(0, 1fr); column-gap: 14px; line-height: 24px; color: var(--mute); transition: color 0.3s var(--ease-out); }
.wlist a.on { color: var(--ink); }
.wlist .n { font-variant-numeric: tabular-nums; }
.wlist a.on .t { font-weight: 700; }
.wlist .t, .wlist .k { white-space: nowrap; }
/* client / agency show only on the row under the pointer (or focus), at the right edge */
.wlist .k { text-align: right; color: var(--mute); opacity: 0; filter: blur(6px); transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out); }
.wlist a.on .k { opacity: 1; filter: none; }
.wlist .k i { font-style: normal; margin: 0 8px; }
/* below 1440px the line with agency and year is wider than the list: it ran past the edge of the screen and made the page scroll sideways, so only the client stays */
@media (max-width: 1439px) { .wlist .ay { display: none; } }
@media (max-width: 1000px) {
  .mosaic { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); padding-bottom: 0; margin-top: 0; column-gap: var(--gap); row-gap: var(--gap); }
  .tile { grid-row: auto; grid-column: auto; width: auto; }
  .tile.in { opacity: 1; }
  .clients { padding-top: 40px; }

  .mosaic { grid-column: 1 / -1; grid-row: auto; }
  .wlist { display: none; }
}
@media (prefers-reduced-motion: reduce) { .info .down svg, .site-foot .totop svg { animation: none; } .tile:not(.in) { opacity: 1; } .tile.in { animation: none; transition: opacity 0.2s; } .tile video { display: none; } }


/* ===== the grid, made visible: press G (or open any page with ?grid) ===== */
.gridlines { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 0 var(--pad); }
body.show-grid .gridlines { display: grid; }
.gridlines i { background: rgba(224, 27, 36, 0.07); }
.gridlines i:nth-child(4n + 1) { box-shadow: inset 2px 0 0 rgba(224, 27, 36, 0.6); }


/* ===== case page, option B (case-b.html): after evasanchez.info/project/banjo, in our colours and type. The text is two columns split where the home splits its sentence from the list (between columns 8 and 9): title, sentence and paragraph on the left, the facts on the right; no cover: the film comes right under the text, full width, so it already shows before any scroll; then the films and the gallery as in the main version; then a last screen for the next project ===== */
.vb-intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; padding: max(0px, calc(38svh - 2 * var(--statement-size) - var(--hdr-top) - 65px)) var(--pad) 0; }
.vb-intro h1 { grid-column: 1 / span 8; grid-row: 1; }
.vb-copy { display: contents; }
.vb .c-facts { grid-column: 9 / -1; grid-row: 2; margin: var(--sp-4) 0 0; }
.vb .c-hero { grid-column: 1 / -1; grid-row: 2; margin: var(--sp-5) 0 0; animation: none; }
.vb .c-hero video { height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
/* hierarchy: the title is the home sentence's size (50, capitals); under it three blocks on the three field lines (columns 1, 5 and 9), side by side: the sentence (20, ink), the paragraph (16, grey) and the facts (12 capitals, grey), their first lines level; every block is narrow enough to read in two to six lines.
   Spaces from the 8px scale: 32 title to the blocks, 64 blocks to film, 32 of air on the right of the sentence (balanced break) and 96 on the right of the paragraph, so the paragraph sits nearer the sentence than the facts. */
.vb .c-idx { grid-column: 9 / -1; grid-row: 1; justify-self: end; margin: 6px 0 0; color: var(--mute); font-variant-numeric: tabular-nums; }
.vb-intro h1 { margin: 0; font: var(--type-statement); letter-spacing: var(--ls-statement); text-transform: var(--tt-display); text-wrap: balance; color: var(--ink); }
.vb .c-line { grid-column: 1 / span 4; grid-row: 2; margin: var(--sp-4) 0 0; padding-right: var(--sp-4); font: var(--type-body); line-height: 1.2; letter-spacing: var(--ls-body); color: var(--ink); text-wrap: balance; }
.vb .c-body { white-space: pre-line; grid-column: 5 / span 4; grid-row: 2; margin: var(--sp-4) 0 0; padding-right: var(--sp-7); font: var(--type-text); line-height: 1.5; letter-spacing: var(--ls-text); color: var(--mute); text-wrap: pretty; }
/* weights: all regular (the bold stays in the header's two lines) */
.vb .stage { padding-top: var(--sp-6); gap: var(--sp-3); } /* 24px between the pieces, across and down */
/* the end of a project page, in the same hierarchy as its opening: "Previous" on the left half and "Next" on the right half (the first project has only Next, the last only Previous). Each half is the same piece: the project's own tile (the home's: two columns less 16px, square, 12% corners) on its first two columns; beside it "Previous"/"Next" and the number at the half's right corner along the top, then the title (the home sentence's size, capitals) and its sentence (16, grey), all hung from the top. The whole piece is the link. */
/* one fixed distance from the last piece of the project (128px), then the project's closing rule (the footer's grey), then 48px before the two pieces */
.vb-pn { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; margin: var(--sp-8) var(--pad) 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--line); }
.pn { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--gap); align-items: start; }
.pn[hidden] { display: none; }
.pn-prev { grid-column: 1 / span 6; }
.pn-next { grid-column: 7 / span 6; }
.pn .n-thumb { position: relative; grid-column: 1 / span 2; grid-row: 1 / span 4; width: calc(100% - var(--sp-2)); aspect-ratio: 1; overflow: hidden; border-radius: 12%; background: var(--ph); }
.pn .n-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn .n-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.pn .n-thumb video.on { opacity: 1; }
.pn .n-thumb video.crop { inset: auto; left: 50%; top: var(--vy, 50%); width: calc(100% / var(--vc)); height: auto; aspect-ratio: var(--va, 16 / 9); transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .pn .n-thumb video { display: none; } }
.pn .label { grid-column: 3 / span 2; grid-row: 1; margin: 0; }
.pn .n-idx { grid-column: 5 / span 2; grid-row: 1; justify-self: end; margin: 0; font-variant-numeric: tabular-nums; }
.pn .t { grid-column: 3 / -1; grid-row: 2; margin-top: var(--sp-2); font: var(--type-statement); letter-spacing: var(--ls-statement); text-transform: var(--tt-display); text-wrap: balance; color: var(--mute); transition: color 0.3s var(--ease-out); }
.pn .n-line { grid-column: 3 / -1; grid-row: 3; margin-top: var(--sp-2); font: var(--type-text); line-height: 1.5; letter-spacing: var(--ls-text); text-transform: none; text-wrap: pretty; transition: color 0.3s var(--ease-out); }
/* Previous is the mirror of Next: its text on the left, its tile on the right, so the two tiles meet in the middle of the page and the texts go to the outer edges */
.pn-prev .n-thumb { grid-column: 5 / span 2; }
.pn-prev .label { grid-column: 1 / span 2; }
.pn-prev .n-idx { grid-column: 3 / span 2; margin-right: var(--sp-4); }
.pn-prev .t, .pn-prev .n-line { grid-column: 1 / span 4; padding-right: var(--sp-4); }
/* like the home list: grey at rest, ink under the pointer (or on focus); on touch screens, where there is no hover, the title stays in ink */
.pn:hover .t, .pn:focus-visible .t, .pn:hover .n-line, .pn:focus-visible .n-line { color: var(--ink); }
@media (hover: none) { .pn .t { color: var(--ink); } }
@media (max-width: 1000px) {
  .vb-intro { display: block; padding-top: 40px; }
    .vb .c-idx { justify-self: start; margin: 0 0 var(--sp-2); }
  .vb-copy { display: block; margin-top: var(--sp-3); }
  .vb .c-line { padding-right: 0; margin: 0; }
  .vb .c-body { padding-right: 0; margin: var(--sp-2) 0 0; }
  .vb .c-facts { margin-top: var(--sp-5); }
  .vb .c-hero { margin-top: var(--sp-5); }
  .vb .stage { padding-top: var(--sp-6); }
  .vb-pn { display: block; margin-top: var(--sp-7); }
  .pn { display: block; }
  .pn + .pn { margin-top: var(--sp-6); }
  .pn .n-idx { justify-self: start; margin: var(--sp-1) 0 0; display: block; }
  .pn-prev .t, .pn-prev .n-line { padding-right: 0; }
  .pn-prev .n-idx { margin-right: 0; }
  .pn .n-line { margin-top: var(--sp-2); }
  .pn .n-thumb { width: 50%; margin-top: var(--sp-4); }
}

/* option B, the order of the work as on the current site: rows of one piece (all columns) or two side by side */
.stage .rows { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.stage .mrow { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.stage .mrow > * { width: 100%; background: var(--ph); }
@media (max-width: 600px) { .stage .mrow { grid-template-columns: 1fr; } .stage .mrow > .mblank { display: none; } }

/* a piece with black bars baked into the file: shown cropped to the picture (set per file in data.js, "crops") */
.stage .crop { position: relative; overflow: hidden; background: var(--ph); }
.stage .crop video { position: absolute; left: 0; width: 100%; height: auto; }


/* header text colour */
/* the whole header in black; links turn grey on hover */
.top .sm a, .top .sm span { color: var(--ink); }

/* a line of text between two rows of work (Signs from Life), as on the current site: the sentence size, ink, no tile colour */
.stage .mrow > .mblank { background: none; }
.stage .mrow > .stage-note { margin: var(--sp-5) 0; background: none; font: var(--type-body); line-height: 1.2; letter-spacing: var(--ls-body); color: var(--ink); text-wrap: pretty; max-width: 44em; }


/* ===== wide screens: the whole site (header, page, footer, the grid overlay) is one centred column of at most --max ===== */
.top, main, .foot, .gridlines { max-width: var(--max); margin-left: auto; margin-right: auto; }
.gridlines { left: 0; right: 0; }


/* ===== THE HEADER, ON EVERY PAGE: no mark, no big sentence; all the information sits in the header, always visible ===== */
.top .logo { display: none; }
.top .x, body[data-header] .top .x { opacity: 1; filter: none; visibility: visible; transition: none; }
/* the address and Selected Works on column 1, the role on column 3, the contacts on column 5; field 3 (the list's) stays empty; the menu at the right edge */
.top .s1 { grid-column: 1 / span 2; }
.top .h3 { grid-column: 3 / span 2; }
.top .h2 { grid-column: 5 / span 2; }
/* the home starts straight on the thumbnails, a little under the header */
body[data-header] .clients { padding-top: calc(var(--sp-8) - 8px); }
/* the sentence stays in the page for headings and search, but is not shown */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) {
  .top .s1 { grid-column: 1 / span 4; }
  .top .h3 { grid-column: 5 / span 4; }
  .top .h2 { grid-column: 9 / span 4; }
}
@media (max-width: 800px) {
  /* phones: the address and the menu share the first row, the role and the contacts are stacked under them */
  .top { row-gap: var(--sp-2); }
  .top .x { display: block !important; }
  .top .s1 { grid-column: 1 / span 7; grid-row: 1; }
  .top .h3, .top .h2 { grid-column: 1 / -1; grid-row: auto; }
  .top nav { grid-column: 8 / -1; grid-row: 1; }
  body[data-header] .clients { padding-top: var(--sp-5); }
}


/* ===== keyboard: a skip link (visible only when focused) and one tab stop per project on the home ===== */
.skip { position: absolute; left: var(--pad); top: 8px; z-index: 100; padding: 6px 10px; background: #111; color: #fff; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; transform: translateY(-200%); }
.skip:focus { transform: none; outline-offset: 2px; }


/* ===== hover, one rule: the links of the header and of the footer (and the small links on the pages) turn red; the project list and Previous / Next keep their grey-to-ink change ===== */
@media (hover: hover) {
  .top .sm a:hover, .top nav a:hover, .site-foot a:hover, .foot a:hover, .a-block .sm a:hover, .sm a:hover { color: var(--hover, var(--accent)); }
  .top nav a:hover { text-decoration-color: currentColor; }
}
/* the header is blended with "difference", which turns every colour into its inverse: the inverse of the red shows as the red over white (on phones the header is not blended) */
.top { --hover: #1fe4db; }
@media (max-width: 800px) { .top { --hover: var(--accent); } }


/* ===== About on phones: the sentence in the lead size (20px, capitals) and the story in the text size (16px) instead of 30px and 20px ===== */
@media (max-width: 600px) {
  .a-lead { font: var(--type-lead); letter-spacing: var(--ls-lead); }
  .a-p1 { font: var(--type-text); letter-spacing: var(--ls-text); }
}

/* ===== TEST: bigger thumbnails, tighter spacing (home, wide screens): each tile fills its two columns (8px between tiles, was 24); the rows are 8px apart (was 24); a 16px margin on the right of the mosaic keeps the same 24px to the list ===== */
@media (min-width: 1001px) {
  .mosaic { row-gap: var(--sp-1); padding-right: var(--sp-2); }
  .tile { width: 100%; }
}


/* ===== tablets and phones: the list is hidden, so each thumbnail carries its number and title under it (the same two pieces of text the list shows) ===== */
.tile .cap { display: none; }
@media (max-width: 1000px) {
  .tile { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .tile img { height: auto; aspect-ratio: 1; border-radius: 12%; background: var(--ph); }
  .tile .cap { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); }
  .tile .cap .n { color: var(--mute); }
  .mosaic { row-gap: var(--sp-3); } /* room for the caption between a row and the next */
}


/* ===== TEST: name, role and agency above the list (home, wide screens) =====
   the sentence is the page's heading; it sits on field 3 (columns 9-12), its base 24px above the first row of the list, and scrolls away with the page while the list stays pinned; the name is in the accent colour. Below 1000px (list hidden) it stays in the page as a visually hidden heading. */
.who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-width: 1001px) {
  .clients { position: relative; }
  .who { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; grid-row: 1; grid-column: 9 / -1; align-self: start; transform: translateY(calc(var(--hdr-top) - 4px - var(--who-top, 235px))); /* its first line sits on the header row (the capitals line up with the menu), not just above the list */ font: var(--type-lead); letter-spacing: var(--ls-lead); text-transform: uppercase; color: var(--ink); }
  .who span { display: block; }
}


/* ===== the name block above the list (home, wide screens): pinned where it rests, it fades out in that place after the first scroll; the header is always visible ===== */
@media (min-width: 1001px) {
  .who { position: sticky; top: var(--who-top, 235px); transition: font-size 0.35s var(--ease-out), line-height 0.35s var(--ease-out), letter-spacing 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
  .who .o { font-weight: 700; }
  /* after the first scroll it shrinks, in place, to the header's text size (and its first line drops 4px onto the menu's line) */
  body.hdr-on .who { font-size: 12px; line-height: 1.2; letter-spacing: var(--ls-label); transform: translateY(calc(var(--hdr-top) - var(--who-top, 235px))); }
  /* a page change (body.pg): the change of size is played by main.js (tweenName), even and a little slower than on scroll, so the css does not animate it */
  body.pg .who { transition: none; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
  .who { transition: none; }
}


/* ===== THE HEADER, ON EVERY PAGE: the mark on the left, the menu on the right; the information blocks are no longer in it ===== */
.top .x { display: none !important; }
/* no mark in the header: on wide screens its box stays (invisible) so the pages keep the same height of header; below that it is gone */
.top .logo { display: none; }
@media (min-width: 1001px) {
  .top .logo { display: block; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none; }
}


/* ===== the other pages: the header carries the name block at the size it has on the home after the first scroll (column 9, on the menu's line); hidden below 1001px like the home's ===== */
.hwho { display: none; margin: 0; }
@media (min-width: 1001px) {
  .top .hwho { display: block; grid-column: 9 / -1; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); }
  .hwho span { display: block; }
  .hwho span:first-child { font-weight: 700; }
}


/* ===== header, second part: Selected Works on field 1 and the contacts on field 2 (columns 1 and 5), always visible; the name block on field 3 (column 9) shrinks to their size with the first scroll ===== */
.hsw, .hct { display: none; }
@media (min-width: 1001px) {
  .top .hsw { display: block; grid-column: 1 / span 4; }
  .top .hct { display: flex; flex-direction: column; grid-column: 5 / span 4; }
  /* the list pins under the three lines of the name block, with 48px of air */
  #wlist { top: calc(var(--hdr-top) + 3 * 12px * 1.2 + var(--sp-5)); }
}


/* ===== the name and Selected Works in the header go to the home ===== */
.who a, .hwho a { color: inherit; text-decoration: none; transition: color 0.2s; }
@media (hover: hover) { .who a:hover, .hwho a:hover { color: var(--hover, var(--accent)); } }
/* the links are only as wide as their text, so the empty space beside them is not clickable */
.hsw a, .hct a { width: fit-content; }


/* how the site comes apart and goes back together on a page change: each piece leaves in its turn, from the bottom of the screen up (--out-*), and the next page's pieces come in from the top down (--in-*, used by the entrance while html.soft-in) */
:root { --out-dur: 0.45s; --out-step: 55ms; }
html.soft-in { --enter-y: 28px; --enter-blur: 8px; --enter-dur: 0.9s; }
/* ===== page to page: what is on the screen leaves one piece after the other (opacity and a small lift only, so it stays light), the name block shrinks to its header size, and the next page comes in with its own entrance; the header is never captured or re-drawn, it just stays; from the home to a project the thumbnail itself opens into the first piece of work (and goes back) ===== */
/* leaving (the class is put by main.js on a click on an inner link; --lv is the order of each piece, top to bottom) */
body.leaving { pointer-events: none; }
body.leaving .rv, body.leaving .tile:not(.go) {
  opacity: 0 !important; transform: translateY(-14px) scale(0.97); animation: none !important;
  transition: opacity var(--out-dur) ease-in calc(var(--lv, 0) * var(--out-step)), transform var(--out-dur) cubic-bezier(0.5, 0, 0.75, 0) calc(var(--lv, 0) * var(--out-step));
}
@media (prefers-reduced-motion: no-preference) {
  /* the header is in place from the first frame: it never plays an entrance (it does not change with the pages) */
  .top { animation: none; }
}
/* on the home the name block is the big text of the page, not the header's */
body[data-header] .top .hwho { display: none; }


/* the header's mark: the browser-window logo (the open version in outline: raised tab, the dots outside) takes the place of the address in the first field; one colour, the header's ink, drawn with strokes and no fill, so it works under the blend */
.hsw .mark { display: block; position: relative; width: fit-content; }
.hsw .mark svg { display: block; height: 40px; width: auto; fill: currentColor; color: inherit; stroke: none; font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
/* the mouseover: the outline gives way to the solid black-and-white version, in place (no red on this link) */
.hsw .mark svg { transition: opacity 0.2s var(--ease); }
.hsw .mark .pb { position: absolute; left: 0; top: 0; opacity: 0; }
@media (hover: hover) {
  .top .hsw .mark:hover { color: var(--ink); }
  .hsw .mark:hover .pb { opacity: 1; }
  .hsw .mark:hover .ln { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hsw .mark svg { transition: none; } }


/* ===== MOBILE MENU (1000px and below): a bar on top with the mark on the left and a two-line button on the right; the button opens the menu over the page: Work and About large, the name block and the contacts at the bottom. It is the same nav, name block and contacts the wide header has, only dressed differently ===== */
.mbtn { display: none; }
@media (max-width: 1000px) {
  .top { position: sticky; top: 0; z-index: 40; align-items: center; padding-top: 10px; padding-bottom: 10px; --ink: #111; --mute: #6b6b6b; mix-blend-mode: normal; pointer-events: auto; background: var(--bg); }
  .top .hsw { display: block; grid-column: 1 / span 8; position: relative; z-index: 3; }
  .hsw .mark svg { height: 32px; }
  .mbtn { display: block; grid-column: 12; justify-self: end; position: relative; z-index: 3; width: 44px; height: 44px; margin: -6px -12px -6px 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mbtn span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out); }
  .mbtn span:nth-child(1) { top: 17px; }
  .mbtn span:nth-child(2) { top: 26px; }
  body.menu-open .mbtn span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
  body.menu-open .mbtn span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
  .top nav { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .top nav { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; position: fixed; inset: 0; z-index: 1; padding: 96px var(--pad) 0; background: var(--bg); }
  body.menu-open .top nav a { font: var(--type-statement); letter-spacing: var(--ls-statement); text-transform: uppercase; padding: 0; text-underline-offset: 8px; }
  body.menu-open .top .hwho { display: block; position: fixed; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 43.2px + 24px); z-index: 2; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); }
  body.menu-open .hwho span { display: block; }
  body.menu-open .hwho span:first-child { font-weight: 700; }
  body.menu-open .top .hct { display: flex; flex-direction: column; position: fixed; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 2; }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) { .mbtn span { transition: none; } }


/* ===== hit areas: the small text links of the header and the footer get 24px of height to be tapped or clicked, without moving anything (an invisible strip 5px taller above and below) ===== */
.top nav a, .hwho a, .site-foot .f-name { position: relative; }
.top nav a::after, .hwho a::after, .site-foot .f-name::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
/* the contact links are 24px tall boxes (WCAG 2.2 target size) and the negative margin gives the 5px back, so the lines keep their spacing; the parent is a flex column so the margins do not collapse */
.hct a { padding: 5px 0; margin: -5px 0; }