/* smal.work
   One column, set like a good letter. One line and one pink dot. */

@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-latin-ext.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --paper: #f7f6f2;
  --frame: #eeece5;
  --ink: #1c1c1a;
  --muted: #6d6d66;
  --line: rgba(28, 28, 26, .12);
  --hair: #8d8d85;
  --pink: #e6a0bc;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --glide: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 19px/1.6 var(--serif); font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.page { max-width: 688px; margin: 0 auto; padding: 0 24px; }

/* links: a quiet underline that darkens on hover */
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 26, .3); transition: text-decoration-color .2s; }
.u:hover { text-decoration-color: currentColor; }
.small { font: 400 15px/1.6 var(--sans); font-variant-numeric: lining-nums; }
.label { font: 500 12px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: lining-nums; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }

/* numbers still to fill in */
.ph { background: linear-gradient(transparent 55%, rgba(230, 160, 188, .8) 55%); }

/* ---------- the line and the dot ---------- */
.mark { position: relative; z-index: 3; height: 1px; margin: clamp(64px, 13vh, 128px) 0 56px; }
.mark .rule { position: absolute; inset: 0; background: var(--hair); opacity: .7; transform-origin: 0 50%; transition: transform 1s var(--glide); }
.mark b { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border-radius: 50%; background: var(--pink); will-change: transform; }
/* as you read, the dot moves down to the line above each part, and a soft ring marks where it lands */
.mark .ring { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border: 1px solid var(--pink); border-radius: 50%; opacity: 0; pointer-events: none; }
.mark .ring.go { animation: ripple 1.1s var(--ease); }
@keyframes ripple { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 3.4; } }
.head, .next .label { transition: color .6s ease; }
.head.here, .next.here .label { color: var(--ink); }
/* the first visit: a bird flies in and folds into the dot, then the line runs out from it */
.bird { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
.arriving .mark[data-play] b { opacity: 0; animation: arrive 0s linear 3.5s forwards; }
.arriving .mark[data-play] .rule { transform: scaleX(0); animation: ruled 0s linear 3.5s forwards; }
@keyframes ruled { to { transform: none; } }

/* the words arrive after the bird lands; if the script never runs, they arrive anyway */
.fade, .page > section, .page > footer { transition: opacity 1s ease, transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.page > section, .page > footer { --d: .45s; }
.arriving .fade, .arriving .page > section, .arriving .page > footer { opacity: 0; transform: translateY(8px); animation: arrive 0s linear 3.5s forwards; }
@keyframes arrive { to { opacity: 1; transform: none; } }

/* ---------- hello ---------- */
h1 { font-size: clamp(36px, 5vw, 48px); line-height: 1.1; letter-spacing: -.015em; }
h1 em { display: block; margin-top: .195em; font-size: .64em; line-height: 1.25; letter-spacing: 0; color: var(--muted); }
/* a small square photo before the name, standing on the baseline; black and white, it opens large and into colour */
.nw { white-space: nowrap; }
.face { display: block; width: 1.75em; height: 1.75em; margin: 0 0 .32em; padding: 0; border: 0; border-radius: 2px; overflow: hidden; font: inherit; background: var(--frame); cursor: zoom-in; transition: transform .5s var(--ease); }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.face:hover { transform: scale(1.04); }
.face:focus-visible { outline: 1.5px solid var(--pink); outline-offset: 3px; }
@media (min-width: 900px) {   /* wide screens: the photo hangs in the margin, from the top of the F to the foot of the descenders in the line below */
  h1 { position: relative; }
  .face { position: absolute; left: -2.371em; top: .0604em; width: 1.8706em; height: 1.8706em; margin: 0; }
}
html.photo-open { overflow: hidden; }
.photo { --fw: min(400px, 84vw, 46vh); position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; place-items: safe center; overflow-y: auto; padding: 24px; background: rgba(247, 246, 242, 0); cursor: zoom-out; transition: background-color .6s ease; }
.photo.open { background: var(--paper); }
.photo-card { display: grid; gap: 26px; }
.photo-frame { position: relative; width: var(--fw); aspect-ratio: 1; border-radius: 1px; transform-origin: 0 0; transition: transform .8s var(--ease), border-radius .8s var(--ease); }
.photo.open .photo-frame { border-radius: 4px; }
.photo-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.7143); transform-origin: 46.5% 37.25%; transition: filter 1.2s ease .25s, transform 1s var(--ease); }
.photo.open .photo-frame img { filter: none; transform: none; }
.photo-close { position: absolute; top: 20px; right: 24px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: 400 14px/1 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 26, .3); cursor: pointer; opacity: 0; transition: opacity .4s ease .3s; }
.photo.open .photo-close { opacity: 1; }
.photo-close:focus-visible, .view-close:focus-visible, .film-close:focus-visible { outline: 1.5px solid var(--pink); outline-offset: 4px; border-radius: 2px; }
/* a little more about him, drawn the way he draws: one line, one arc, the pink dot; then two sentences */
.photo-note { width: var(--fw); cursor: auto; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .3s var(--ease); }
.photo.open .photo-note { opacity: 1; transform: none; transition: opacity .7s ease .5s, transform .9s var(--ease) .5s; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sky { display: block; width: 100%; height: auto; overflow: visible; }
.sky .ln { fill: none; stroke: var(--hair); stroke-width: 1; }
.sky .sun { fill: var(--pink); transform-box: fill-box; transform-origin: center; }
.sky .bird { fill: none; stroke: #5f5f58; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.note-text { max-width: 30em; margin-top: 26px; font: 400 16.5px/1.65 var(--serif); letter-spacing: .005em; color: #2e2e2b; text-wrap: pretty; }
.note-text + .note-text { margin-top: 10px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {   /* the line draws in like a pen, the dot settles on it, the birds come into view */
  .sky .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s .25s; }
  .photo.open .sky .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .55s; }
  .sky .sun { opacity: 0; transform: scale(.4); transition: opacity 0s .25s, transform 0s .25s; }
  .photo.open .sky .sun { opacity: 1; transform: none; transition: opacity .5s ease 1.4s, transform .7s cubic-bezier(.34, 1.56, .64, 1) 1.4s; }
  .sky .flock { opacity: 0; transition: opacity 0s .25s; }
  .photo.open .sky .flock { opacity: 1; transition: opacity 1.4s ease .9s; }
}
@media (min-width: 880px) {   /* wide screens: the photo and the note side by side */
  .photo { --fw: min(420px, 44vw, 66vh); }
  .photo-card { grid-template-columns: var(--fw) 330px; gap: 64px; align-items: center; }
  .photo-note { width: 330px; }
  .note-text { font-size: 17px; }
}
.facts { display: grid; gap: 7px; font: 400 13.5px/1.45 var(--sans); color: var(--ink); }
.facts li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.facts li:last-child { padding-bottom: 0; border-bottom: 0; }
.facts span { color: var(--muted); }

.intro { margin-top: 28px; }
.meta { margin-top: 26px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; }

/* ---------- sections: a hairline, a small label, then the content ---------- */
section { margin-top: clamp(104px, 16vh, 152px); }
.head { margin-bottom: 32px; padding-top: 16px; border-top: 1px solid var(--line); }

.work article + article { margin-top: 104px; }
.work h3 { margin-top: 8px; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
.work article > p:not(.label) { margin-top: 12px; }
.work figure { margin-top: 32px; }
@media (min-width: 900px) { .work figure, .shot, .pics { margin-left: -48px; margin-right: -48px; } }

/* the prototypes, as line drawings. The real screen only appears inside a case study. */
.sketch { display: block; border-radius: 4px; background: var(--frame); }
.sketch a { display: block; border-radius: inherit; }
.sk { display: block; width: 100%; height: auto; }
.sk .s { fill: none; stroke: var(--hair); stroke-width: var(--sw, 1.3); stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.sk .p { fill: var(--pink); }
.sk image { opacity: 1; }
.sketch a:hover .s { stroke: #5f5f58; }
.js .sk .s { transition: stroke-dashoffset 1.4s var(--ease), stroke .3s ease; transition-delay: var(--i, 0s), 0s; }
.js .sk:not(.in) .s { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sk .p { transition: opacity .6s ease 1.1s; }
.js .sk:not(.in) .p { opacity: 0; }
.js .sk image { transition: opacity 1.2s ease 1.5s; }
.js .sk:not(.in) image { opacity: 0; }
/* if the script never runs (no .ok), everything shows after a few seconds anyway */
.js:not(.ok) .sk:not(.in) .s { animation: drawn 0s linear 4s forwards; }
.js:not(.ok) .sk:not(.in) .p { animation: arrive 0s linear 4s forwards; }
.js:not(.ok) .sk:not(.in) image { animation: arrive 0s linear 4.5s forwards; }
@keyframes drawn { to { stroke-dashoffset: 0; } }

/* ---------- top: one quiet button that plays How I work ---------- */
.top { display: flex; justify-content: flex-end; padding-top: 28px; }
.play { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer; }
.play .pi { position: relative; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; transition: background-color .25s ease; }
.play .pi::after { content: ''; position: absolute; left: 11px; top: 8.5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ink); transition: border-color .25s ease; }
.play:hover .pi { background: var(--ink); }
.play:hover .pi::after { border-left-color: var(--paper); }
.play .muted { font-weight: 400; }
.inline-play { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* ---------- the film: How I work, in about 25 seconds ---------- */
html.film-open { overflow: hidden; }
.film {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 22px;
  padding: 24px clamp(20px, 4vw, 48px) 28px; background: var(--paper); opacity: 0; transition: opacity .35s ease;
}
.film[hidden] { display: none; }
.film.open { opacity: 1; }
.film-top { display: flex; justify-content: space-between; align-items: center; }
.film-close { padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.film-stage { position: relative; align-self: center; justify-self: center; width: min(100%, 900px, calc((100vh - 320px) * 1.6)); aspect-ratio: 16 / 10; }
.film-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-labels span {
  position: absolute; left: 0; top: 0; font: 400 var(--fs, 13px)/1.2 var(--sans); letter-spacing: .01em; color: var(--muted); white-space: nowrap;
  opacity: 0; filter: blur(3px); transition: opacity 1s ease, filter 1s ease, transform 1.4s var(--ease);
}
.film-labels span.on { opacity: 1; filter: none; }
.film-labels span.dim { opacity: .4; }
.film-labels span.ink { color: var(--ink); }

/* captions: the words arrive one after another */
.film-cap { justify-self: center; width: 100%; max-width: 38em; min-height: 7em; text-align: center; }
.cap-step { min-height: 1.6em; margin-bottom: 10px; opacity: 0; transition: opacity .6s ease; }
.cap-main { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.32; letter-spacing: -.003em; text-wrap: balance; }
.cap-main .w { display: inline-block; opacity: 0; transform: translateY(.25em); filter: blur(4px); transition: opacity 1s ease, transform 1.1s var(--ease), filter 1s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.cap-sub { margin-top: 16px; color: var(--muted); font-size: 16px; font-style: italic; opacity: 0; transform: translateY(4px); transition: opacity 1s ease .6s, transform 1.1s var(--ease) .6s; }
.film-cap.in .cap-step, .film-cap.in .cap-sub { opacity: 1; transform: none; }
.film-cap.in .cap-main .w { opacity: 1; transform: none; filter: none; }
.film-cap.out > * { opacity: 0 !important; transition: opacity .5s ease !important; }
.cap-end { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; opacity: 0; transition: opacity .8s ease .9s; }
.film-cap.end .cap-end { display: flex; }
.film-cap.end.in .cap-end { opacity: 1; }
.cap-end .go { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); text-decoration: none; transition: transform .3s var(--ease); }
.cap-end .go:hover { transform: translateY(-1px); }
/* the end card breathes: more air between the lines, and the chapters step back */
.film-cap.end { margin-bottom: 36px; }
.film-cap.end .cap-sub { margin-top: 16px; }
.film-cap.end .cap-end { margin-top: 44px; }
.film.ended .film-nav [data-scene] { opacity: .4; transition: opacity .6s ease, color .3s; }
.film.ended .film-nav [data-scene]:hover { opacity: 1; }

/* chapters, with a thin line that fills as each one plays */
.film-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.film-nav [data-scene] { position: relative; padding: 4px 0 7px; border: 0; background: none; color: var(--muted); font: 500 10.5px/1.6 var(--sans); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: color .3s; }
.film-nav [data-scene] i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film-nav [data-scene]:hover, .film-nav [data-scene][aria-current] { color: var(--ink); }
.film-toggle { min-width: 4.5em; padding: 4px 0; border: 0; background: none; color: var(--ink); font: 400 12.5px/1.6 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 26, .3); cursor: pointer; }
.film-toggle:hover { text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .film { gap: 12px; padding: 18px 20px 22px; }
  .film-stage { width: 100%; }
  .film-cap { min-height: 9.5em; }
  .cap-sub { font-size: 15px; }
  .film-nav { gap: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { .film, .film * { transition: none !important; } }
.work .res { margin-top: 18px; }
.more { display: inline-block; margin-top: 8px; }
.also { margin-top: 88px; color: var(--muted); }
.also a { transition: color .2s ease, text-decoration-color .2s; }
.also a:hover { color: var(--ink); }
/* a small picture of the project follows the pointer over its name */
.peek { position: fixed; left: 0; top: 0; z-index: 50; width: 128px; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.peek img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--frame); box-shadow: 0 18px 30px -22px rgba(28, 28, 26, .55); scale: .92; transition: scale .4s var(--ease); }
.peek.on { opacity: 1; }
.peek.on img { scale: 1; }

.list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list li:first-child { padding-top: 0; }
.list .y { font: 400 14px/1.6 var(--sans); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.list em { color: var(--muted); }
.list + p { margin-top: 20px; }

/* earlier years, opened on request: a quiet row with a plus that turns into a minus */
.earlier-btn { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--muted); font: 400 15px/1.6 var(--sans); text-align: left; cursor: pointer; transition: color .2s ease; }
.earlier-btn[hidden] { display: none; }
.earlier-btn:hover, .earlier-btn[aria-expanded="true"] { color: var(--ink); }
.earlier-btn i { position: relative; width: 11px; height: 11px; }
.earlier-btn i::before, .earlier-btn i::after { content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 1px; background: currentColor; transition: transform .45s var(--ease); }
.earlier-btn i::after { transform: rotate(90deg); }
.earlier-btn[aria-expanded="true"] i::after { transform: rotate(180deg); }
.earlier { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .7s var(--ease); }
.earlier > div { min-height: 0; overflow: hidden; }
.earlier.shut { grid-template-rows: 0fr; }
.earlier .lead { padding: 22px 0 18px; font-style: italic; }
.earlier .d { display: block; margin-top: 4px; font: 400 15px/1.55 var(--sans); color: var(--muted); font-variant-numeric: lining-nums; }
.earlier .lead, .earlier li { transition: opacity .6s ease, transform .8s var(--ease); transition-delay: calc(.12s + var(--k, 0) * 80ms); }
.earlier li:nth-child(1) { --k: 1; }
.earlier li:nth-child(2) { --k: 2; }
.earlier li:nth-child(3) { --k: 3; }
.earlier.shut .lead, .earlier.shut li { opacity: 0; transform: translateY(8px); transition-duration: .25s; transition-delay: 0s; }
.earlier + p { margin-top: 20px; }

blockquote p { font: italic 400 26px/1.4 var(--serif); letter-spacing: -.005em; text-indent: -.42em; }
.who { margin-top: 18px; }
/* in their words: one voice at a time; a name brings its quote in, word by word */
.quotes { position: relative; transition: height .6s var(--ease); }
.quote { margin: 0; }
.quote + .quote { margin-top: 36px; }
.quotes blockquote p { font-size: 24px; }
.quote-nav { display: none; }
.js .quote:not(.on) { position: absolute; top: 0; left: 0; right: 0; margin: 0; visibility: hidden; }
.js .quote-nav { position: relative; display: flex; gap: 24px; margin-top: 28px; }
.quote-nav button { padding: 4px 0 10px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; transition: color .3s ease; }
.quote-nav button:hover, .quote-nav button[aria-pressed="true"] { color: var(--ink); }
.quote-dot { position: absolute; left: 0; bottom: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); transform: translateX(var(--x, 0)); transition: transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.js .quote .w { display: inline-block; text-indent: 0; opacity: 0; transform: translateY(.3em); filter: blur(2px); transition: opacity .7s ease, transform .9s var(--ease), filter .7s ease; transition-delay: calc(var(--i, 0) * 14ms); }
.js .quote.in .w { opacity: 1; transform: none; filter: none; }
.js .quote .who { opacity: 0; transition: opacity .6s ease; }
.js .quote.in .who { opacity: 1; transition-delay: calc(var(--n, 0) * 14ms + .25s); }
.js .quote.out .w, .js .quote.out .who { opacity: 0; transition: opacity .25s ease; transition-delay: 0s; }

.drawings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.drawings img { width: 100%; }

.contact .cta { font-size: clamp(32px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.contact .mail { display: inline-block; font-size: 26px; }
/* the email, with a one-click copy */
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; }
.copy { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .3s var(--ease); }
.copy:hover { color: var(--ink); border-color: rgba(28, 28, 26, .35); }
.copy:active { transform: scale(.94); }
.copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.copy .sheets { transition: opacity .25s ease; }
.copy .tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease); }
.copy.done { color: var(--ink); }
.copy.done .sheets { opacity: 0; }
.copy.done .tick { stroke-dashoffset: 0; transition-delay: .1s; }
.copied { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; font: 400 13px/1 var(--sans); color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.copy.done .copied { opacity: 1; }
footer { margin: clamp(120px, 18vh, 168px) 0 56px; }

/* ---------- the sign-off: a last line. The dot lands on it, then leaves again as the bird ---------- */
.sign { margin-bottom: 0; padding: 22px 0 64px; border-top: 1px solid var(--line); }
.sign .bye { font-size: 22px; line-height: 1.3; font-style: italic; }
.sign-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 40px; color: var(--muted); }
.sign-row a { margin-left: auto; color: var(--ink); }
@media (max-width: 600px) { .sign-row a { margin-left: 0; } }

/* ---------- case studies ---------- */
.back { display: inline-block; margin-top: 40px; }
.case-page .mark { margin-top: 56px; }
.case-head h1 { margin-top: 10px; }
.case-head h1 + p { margin-top: 24px; }
.facts { margin-top: 32px; border-top: 1px solid var(--line); }
.facts li:first-child { padding-top: 11px; }
.shot { margin-top: 56px; }
.shot + .res { margin-top: 18px; }
/* the pictures on a case study: one large, four small; each opens larger */
.pics { margin-top: 56px; }
.pics + .res { margin-top: 18px; }
.pic { display: block; overflow: hidden; border-radius: 4px; background: var(--frame); cursor: zoom-in; }
.pic img { width: 100%; transition: transform .8s var(--ease); }
.pic:hover img { transform: scale(1.025); }
.pics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
html.view-open { overflow: hidden; }
.view { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 16px; padding: 64px 24px 20px; background: rgba(247, 246, 242, 0); cursor: zoom-out; transition: background-color .4s ease; }
.view.open { background: rgba(247, 246, 242, .97); }
.view-img { max-width: min(1440px, 100%); max-height: 100%; width: auto; height: auto; border-radius: 4px; background: var(--frame); opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .6s var(--ease); }
.view.open .view-img.ready { opacity: 1; transform: none; }
.view-bar { display: grid; justify-items: center; gap: 12px; cursor: auto; opacity: 0; transition: opacity .3s ease; }
.view.open .view-bar { opacity: 1; transition-delay: .15s; }
.view-cap { max-width: 560px; min-height: 1.45em; font: italic 400 17px/1.45 var(--serif); color: var(--muted); text-align: center; text-wrap: balance; }
.view-nav { display: flex; align-items: center; gap: 18px; font: 400 13px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.view-nav button { padding: 8px 10px; border: 0; background: none; color: var(--ink); font: 400 18px/1 var(--sans); cursor: pointer; }
.view-nav button:hover { color: var(--muted); }
.view-close { position: absolute; top: 20px; right: 24px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: 400 14px/1 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 26, .3); cursor: pointer; opacity: 0; transition: opacity .3s ease; }
.view.open .view-close { opacity: 1; }
.chapter { margin-top: 96px; }
.chapter h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.chapter p + p { margin-top: 1em; }
.note { margin-top: 20px; font-style: italic; }
.note b { margin-right: 8px; font: 500 12px/1.6 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.next { margin-top: 112px; padding-top: 16px; border-top: 1px solid var(--line); }
.next a { display: inline-block; margin-top: 6px; font-size: 30px; text-decoration: none; }
.next a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- other works: a title, one line, the pictures ---------- */
.show-head h1 { margin-top: 10px; }
.show-head .sub { margin-top: 20px; color: var(--muted); }
.gallery { display: grid; gap: 14px; margin-top: 52px; }
.gallery .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gallery img { width: 100%; border-radius: 4px; background: var(--frame); }
@media (min-width: 900px) { .gallery { margin-left: -48px; margin-right: -48px; } }
.out { margin-top: 24px; }
.js .gallery img, .js .pics .pic { transition: opacity .9s ease, transform 1.1s var(--ease); }
.js .gallery img:not(.in), .js .pics .pic:not(.in) { opacity: 0; transform: translateY(14px); }
.js:not(.ok) .gallery img:not(.in), .js:not(.ok) .pics .pic:not(.in) { animation: arrive 0s linear 3s forwards; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  .page { padding: 0 22px; }
  .work h3 { font-size: 26px; }
  blockquote p { font-size: 23px; }
  .list li, .earlier-btn { grid-template-columns: 76px minmax(0, 1fr); }
  .drawings { gap: 10px; }
  .gallery, .gallery .two { gap: 10px; }
  .pics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .quotes blockquote p { font-size: 21px; }
  .view { padding: 60px 16px 16px; }
  .view-cap { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fade, .page > section, .page > footer, .mark b, .mark .rule, figure a img { transition: none !important; }
  .earlier, .earlier .lead, .earlier li, .earlier-btn i::before, .earlier-btn i::after, .gallery img, .peek, .peek img, .head, .next .label { transition: none !important; }
  .face, .photo, .photo-frame, .photo-frame img, .photo-close, .photo-note, .copy, .copy .sheets, .copy .tick, .copied { transition: none !important; }
  .pic, .pic img, .view, .view-img, .view-bar, .view-close { transition: none !important; }
  .quotes, .quote .w, .quote .who, .quote-dot { transition: none !important; }
  .mark .ring.go { animation: none; }
}

/* ---------- two small secrets ---------- */
html.egg-open { overflow: hidden; }
/* type “source”: the page turns over and shows its back, annotated like the back of a drawing */
.verso { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; place-items: safe center; overflow-y: auto; padding: 24px; background: rgba(236, 234, 227, 0); perspective: 1600px; transition: background-color .5s ease; }
.verso.open { background: rgba(236, 234, 227, .92); }
.verso-card { position: relative; width: min(560px, 100%); padding: 44px 48px 34px; background: #fbfaf7; box-shadow: 0 1px 2px rgba(28, 28, 26, .06), 0 22px 60px -24px rgba(28, 28, 26, .28); opacity: 0; transform: rotateY(-88deg); transition: transform .8s var(--ease), opacity .35s ease; }
.verso.open .verso-card { opacity: 1; transform: none; }
.verso h2 { margin-top: 10px; font: italic 400 30px/1.15 var(--serif); }
.verso h2 b { display: inline-block; width: .19em; height: .19em; margin-left: .05em; border-radius: 50%; background: var(--pink); }
.verso-doodle { position: absolute; top: 34px; right: 40px; width: 46px; height: 28px; overflow: visible; }
.verso-doodle path { fill: none; stroke: #5f5f58; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.verso-facts { margin: 26px 0 0; }
.verso-facts div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.verso-facts dt { font: 500 10.5px/2.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.verso-facts dd { margin: 0; font: 400 16px/1.5 var(--serif); }
.verso-facts i { display: inline-block; width: .72em; height: .72em; margin: 0 .25em 0 .1em; border-radius: 50%; vertical-align: -.06em; box-shadow: inset 0 0 0 1px rgba(28, 28, 26, .16); }
.verso .label.notes { margin-top: 30px; }
.verso-notes { margin-top: 10px; counter-reset: n; }
.verso-notes li { position: relative; padding-left: 26px; font: italic 400 17px/1.5 var(--serif); counter-increment: n; opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(.6s + var(--i, 0) * 110ms); }
.verso-notes li::before { content: counter(n); position: absolute; left: 0; top: .32em; font: 400 11px/1 var(--sans); color: var(--hair); font-variant-numeric: lining-nums; }
.verso-notes li + li { margin-top: 3px; }
.verso.open .verso-notes li { opacity: 1; transform: none; }
.verso-sign { margin-top: 20px; font: italic 400 18px/1 var(--serif); text-align: right; }
.verso-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 20px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.verso-turn { padding: 2px 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 26, .3); cursor: pointer; }
.verso-turn:focus-visible { outline: 1.5px solid var(--pink); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 600px) {
  .verso-card { padding: 34px 24px 26px; }
  .verso h2 { font-size: 26px; }
  .verso-doodle { top: 26px; right: 22px; }
  .verso-facts div { grid-template-columns: 64px minmax(0, 1fr); }
}
/* ↑ ↑ ↓ ↓ ← → ← → B A: the page empties to a sheet of paper and a new drawing draws itself, in the manner of his */
.blank { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; align-content: center; background: var(--paper); opacity: 0; cursor: pointer; transition: opacity .7s ease; }
.blank.open { opacity: 1; }
.blank svg { display: block; width: min(88vw, 760px); height: auto; overflow: visible; }
.blank .ink { fill: none; stroke: #3d3d3a; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.blank.open .ink { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t, 1s) cubic-bezier(.45, .05, .35, 1) var(--d, 0s); }
.blank-cap { margin-top: 18px; text-align: center; font: 400 11px/1 var(--sans); letter-spacing: .05em; color: #5f5f58; opacity: 0; transition: opacity 1.2s ease var(--d, 0s); }
.blank-cap b { display: inline-block; width: 4px; height: 4px; margin-left: 2px; border-radius: 50%; background: var(--pink); }
.blank.open .blank-cap { opacity: 1; }
.blank-hint { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font: 400 12.5px/1 var(--sans); color: var(--muted); opacity: 0; transition: opacity .8s ease var(--d, 0s); }
.blank.open .blank-hint { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .verso, .verso-card, .verso-notes li, .blank, .blank .ink, .blank-cap, .blank-hint { transition: none !important; }
}

/* printed, it reads like a one-page CV */
@media print {
  body { background: #fff; font-size: 10.5pt; line-height: 1.5; }
  .page { max-width: none; padding: 0; }
  .mark, .top, .film, .inline-play, .work figure, .shot, .pics, .view, .drawings, .more, .back, .next, .bird, .peek, .earlier-btn, .gallery, .face, .photo { display: none !important; }
  .earlier { display: block; }
  .earlier .lead, .earlier li { opacity: 1 !important; transform: none !important; }
  .quotes { height: auto !important; }
  .quote { position: static !important; visibility: visible !important; }
  .quote + .quote { margin-top: 14pt !important; }
  .quote .w, .quote .who { opacity: 1 !important; transform: none !important; filter: none !important; }
  .quote-nav { display: none !important; }
  section { margin-top: 18pt; break-inside: avoid; }
  .work article + article { margin-top: 12pt; }
  .work h3 { font-size: 14pt; }
  h1 { font-size: 22pt; }
  .contact .cta { font-size: 16pt; }
  .contact .mail { font-size: 12pt; margin-top: 6pt; }
  footer { margin: 18pt 0 0; }
  a { text-decoration: none; }
  .ph { background: none; }
}
.chapter .head { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .sk .s, .sk .p, .sk image { transition: none !important; } }
.film-stage .tk.card { white-space: normal; }

/* ---------- Job Tracker, told inside its own drawing ---------- */
.st-fig { position: relative; padding-bottom: 46px; }   /* the caption lives in its own band, under the drawing */
.sk .d { fill: none; stroke: var(--hair); stroke-width: var(--sw, 1.3); stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.sketch a:hover .d { stroke: #5f5f58; }
.jt-tab { fill: var(--hair); opacity: 0; transition: opacity 1.2s ease; }
.jt-svg.board .jt-tab { opacity: .22; }

/* every stroke that moves is drawn in, like a pen */
.jt-svg .ip, .jt-svg .box, .jt-svg .tx, .jt-svg .spark, .jt-svg .ty0, .jt-svg .ty, .jt-svg .btn, .jt-svg .btxt, .jt-svg .ok { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jt-card .ip { transition: stroke-dashoffset 1s var(--ease); }
.jt-card.drawn .ip { stroke-dashoffset: 0; }
.jt-card .box { fill: var(--frame); transition: stroke-dashoffset 1.1s var(--ease); }
.jt-card .tx { transition: stroke-dashoffset .8s var(--ease) .45s; }
.jt-card .tx + .tx { transition-delay: .62s; }
.jt-card.boxed .box, .jt-card.boxed .tx { stroke-dashoffset: 0; }
.jt-card .lift { fill: none; stroke: var(--hair); stroke-width: var(--sw, 1.3); opacity: 0; transition: opacity .35s ease; }
.jt-card.lifted .lift { opacity: .35; }

.jt-dot { fill: var(--pink); }
.jt-ring { fill: none; stroke: var(--pink); stroke-width: var(--sw, 1.3); opacity: 0; }
.jt-cur path { fill: var(--paper); stroke: var(--ink); stroke-width: var(--sw, 1.3); stroke-linejoin: round; }
.jt-cur { opacity: 0; transition: opacity .5s ease; }
.jt-cur.on { opacity: 1; }

.jt-ai .panel { fill: var(--paper); }
.jt-ai .spark, .jt-ai .ty0 { transition: stroke-dashoffset .7s var(--ease); }
.jt-ai.titled .spark, .jt-ai.titled .ty0 { stroke-dashoffset: 0; }
.jt-ai .btn, .jt-ai .btxt { transition: stroke-dashoffset .8s var(--ease), fill .3s ease, opacity .3s ease; }
.jt-ai.buttons .btn, .jt-ai.buttons .btxt { stroke-dashoffset: 0; }
.jt-ai .send { fill: transparent; }
.jt-ai.pressed .send { fill: rgba(141, 141, 133, .22); }
.jt-ai.sent .sendtxt { opacity: 0; }
.jt-ai .ok { transition: stroke-dashoffset .45s var(--ease) .1s; }
.jt-ai.sent .ok { stroke-dashoffset: 0; }
.jt-caret { stroke: var(--ink); stroke-width: var(--sw, 1.3); opacity: 0; }

/* the caption, word by word */
.st-cap { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; padding: 0 24px; text-align: center; text-wrap: balance; font: 400 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--muted); pointer-events: none; }
.st-cap .w { display: inline-block; opacity: 0; transform: translateY(4px); filter: blur(3px); transition: opacity .6s ease, transform .7s var(--ease), filter .6s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.st-cap.in .w { opacity: 1; transform: none; filter: none; }
.st-replay { position: absolute; right: 14px; top: 12px; padding: 4px 2px;   /* top corner, so it never meets the caption */ border: 0; background: none; color: var(--muted); font: 400 13px/1 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(28, 28, 26, .25); }
.st-replay:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 600px) { .st-fig { padding-bottom: 40px; } .st-cap { font-size: 12px; bottom: 13px; padding: 0 14px; } .st-replay { top: 8px; right: 10px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .jt-svg *, .st-cap .w { transition: none !important; } }

/* shared by the three stories: a fingertip, its ripple, the pink dot */
.st-touch { fill: rgba(28, 28, 26, .06); stroke: rgba(28, 28, 26, .45); stroke-width: var(--sw, 1.3); opacity: 0; }
.st-ring { fill: none; stroke: rgba(28, 28, 26, .5); stroke-width: var(--sw, 1.3); opacity: 0; }
.st-ring.pink { stroke: var(--pink); }
.st-dot { fill: var(--pink); }

/* Shopbox */
.sb-pill { fill: var(--hair); opacity: 0; transition: opacity 1s ease; }
.sb-svg.calm .sb-pill { opacity: .25; }
.sb-tile .tl { fill: var(--frame); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.sb-tile .ip { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) .3s; }
.sb-tile.drawn .tl, .sb-tile.drawn .ip { stroke-dashoffset: 0; }
.sb-row .rn, .sb-row .rp { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease); }
.sb-row .rp { transition-delay: .15s; }
.sb-row.on .rn, .sb-row.on .rp { stroke-dashoffset: 0; }
.sb-q { fill: var(--ink); opacity: 0; transition: opacity .3s ease; }
.sb-row.two .sb-q { opacity: .75; }
.sb-payfill { fill: var(--hair); opacity: 0; transition: opacity .25s ease; }
.sb-svg.pressing .sb-payfill { opacity: .22; }
.sb-ok { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease), opacity .4s ease; }
.sb-svg.paid .sb-ok { stroke-dashoffset: 0; }
.sb-svg.cleared .sb-ok { opacity: 0; }

/* GymBro */
.gb-grid { opacity: 0; transition: opacity .8s ease; }
.gb-svg.chart .gb-grid { opacity: .5; }
.gb-svg.arrow .gb-grid { opacity: 0; }
.gb-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.gb-svg.chart .gb-line { stroke-dashoffset: 0; }
.gb-halo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .5s; }
.gb-svg.arrow .gb-halo { stroke-dashoffset: 0; }
.gb-check * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease); }
.gb-check path { transition-delay: .25s; }
.gb-check.on * { stroke-dashoffset: 0; }
.gb-day { fill: transparent; stroke: var(--hair); stroke-width: var(--sw, 1.3); opacity: 0; transition: fill .4s ease, stroke .4s ease, opacity .6s ease; }
.gb-svg.week .gb-day { opacity: 1; }
.gb-day.on { fill: var(--ink); stroke: var(--ink); }
.gb-day.on.last { fill: var(--pink); stroke: var(--pink); }