:root {
  --ground: #f2ede4; --ui: #121212; --accent: #ff4a1c;
  --paper: #f2ede4; --ink: #121212;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sw: min(680px, max(420px, 42vw));
  --pad: clamp(16px, 2.2vw, 30px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); transition: background-color .8s; }
html.is-dark { color-scheme: dark; }
body { overflow: hidden; font-family: var(--sans); color: var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }
#nav button:focus-visible, .ix-row:focus-visible { border-radius: 8px; }
#dots { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- the corner words */
#top { position: fixed; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; padding: calc(var(--pad) - 6px) calc(var(--pad) - 6px); padding-top: max(calc(var(--pad) - 6px), env(safe-area-inset-top)); pointer-events: none; z-index: 5; }
#top > * { pointer-events: auto; }
#nav { display: flex; gap: 2px; align-items: center; }
#nav button { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 9px; border-radius: 99px; color: var(--ui); opacity: .78; transition: color .35s, opacity .2s, background-color .25s; }
#nav button:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
#snd { display: inline-flex; align-items: center; gap: 7px; }
#snd i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; transition: background-color .2s, transform .2s; }
#snd[aria-pressed="true"] i { background: currentColor; transform: scale(1.15); }
body[data-mode="opening"] #top, body[data-mode="going"] #top { opacity: 0; pointer-events: none; }
#top { transition: opacity .5s; }

/* ---------------------------------------------------------------- the open strip's label */
/* centred at the top or bottom of the open strip, in the project's own ink; the dots part around each line */
#label { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; color: var(--lc, var(--ui)); text-align: center; width: max-content; will-change: transform, opacity; transition: opacity .22s; --rise: 0px; }
#label.is-on { opacity: 1; transition: opacity .5s .06s; }
#label p { margin: 0 auto; width: fit-content; max-width: 100%; transition: transform .6s var(--ease); transform: translateY(var(--rise)); }
#label.is-on p { transform: none; }
#label .cl { font: 500 12.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-bottom: 9px; }
#label .tt { font: 650 clamp(28px, 2.9vw, 46px)/1.02 var(--sans); letter-spacing: -.024em; text-wrap: balance; }
#label .sm { margin-top: 10px; font: 500 clamp(16px, 1.4vw, 20px)/1.3 var(--sans); letter-spacing: -.004em; text-wrap: balance; }
#label .sm:empty, #label .tt:empty { display: none; }
#label.is-name .cl { margin: 0; }
#label.at-top { --rise: -8px; }
#label.at-bottom { --rise: 8px; }
/* a caption beside the band on a tall screen: the project's colour as a single dot before its client */
#label.is-caption .cl::before { content: ""; display: inline-block; width: .72em; height: .72em; border-radius: 50%; background: var(--sig); margin-right: .55em; vertical-align: -.04em; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #label .cl { font-size: 11px; margin-bottom: 6px; }
  #label .tt { font-size: 26px; }
  #label .sm { margin-top: 6px; font-size: 15.5px; }
}
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sr:focus-within { width: auto; height: auto; clip: auto; clip-path: none; left: 16px; top: 16px; padding: 6px; background: var(--paper); z-index: 9; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100vw - 32px); border-radius: 99px; }
.sr button { font: 500 12px/1 var(--mono); padding: 8px 12px; border-radius: 99px; color: var(--ink); }
.sr:focus-within button:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-mode="field"] #dots { cursor: pointer; }

/* the neighbours, at the foot of a project's page */
.cs-next { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ui) 16%, transparent); }
.cs-nb { display: inline-flex; align-items: baseline; gap: 10px; font: 600 15px/1.25 var(--sans); color: var(--ui); text-align: left; padding: 6px 0; min-width: 0; }
.cs-nb.is-next { text-align: right; margin-left: auto; }
.cs-nb span { font: 500 13px/1 var(--mono); opacity: .7; }
.cs-nb b { font-weight: 600; }
.cs-nb:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- the work sheet */
#sheet { position: fixed; top: 0; right: 0; bottom: 0; width: var(--sw); background: var(--ground); color: var(--ui); z-index: 6; transform: translateX(102%); transition: transform .7s var(--ease), background-color .8s, color .8s, visibility 0s .7s; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; box-shadow: -1px 0 0 color-mix(in srgb, var(--ui) 14%, transparent); }
#sheet.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), background-color .8s, color .8s, visibility 0s; }


.sh-x { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ui); color: var(--ground); display: grid; place-items: center; z-index: 2; transition: transform .3s var(--ease); }
.sh-x:hover { transform: scale(1.1) rotate(90deg); }
.sh-x svg, .ov-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sh-body { padding: 0 clamp(20px, 3vw, 40px) 96px; }
.cs-head { padding-top: 34px; margin-bottom: 34px; }
.cs-client { margin: 0 0 12px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.cs-title { margin: 0 0 18px; font: 700 clamp(34px, 3.6vw, 52px)/.98 var(--sans); letter-spacing: -.025em; text-wrap: balance; max-width: 13em; }
.cs-desc { margin: 0; font: 400 17px/1.5 var(--sans); max-width: 34em; opacity: .92; text-wrap: pretty; }
.cs-sec { margin: 0 0 40px; }
.cs-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cs-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.cs-p { margin: 0 0 16px; font: 400 15.5px/1.5 var(--sans); opacity: .88; max-width: 36em; }
.cs-films { display: grid; gap: 18px; }
.cs-films.is-tall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cs-film { margin: 0; }
.cs-frame { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ui) 10%, var(--ground)); }
.cs-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.cs-frame.is-in img { opacity: 1; }
.cs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--ui); transition: transform .35s var(--ease); z-index: 2; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ground) 30%, transparent); }
.cs-play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 17px solid var(--ground); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
button.cs-frame:hover .cs-play { transform: scale(1.12); }
.cs-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-dur { opacity: .65; }
.cs-imgs { display: grid; gap: 12px; margin-top: 6px; }
.cs-row-2, .cs-split { grid-template-columns: repeat(2, 1fr); }
.cs-row-3 { grid-template-columns: repeat(3, 1fr); }
.cs-row-match { grid-template-columns: repeat(2, 1fr); }
.cs-img { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ui) 10%, var(--ground)); }
.cs-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.cs-img.is-in img { opacity: 1; }
.dot-in { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transition: opacity .55s; pointer-events: none; }
.is-in > .dot-in { opacity: 0; }
.cs-audio { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cs-track { display: grid; grid-template-columns: 40px 30px 1fr; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--ui) 16%, transparent); }
.cs-ap { width: 34px; height: 34px; border-radius: 50%; background: var(--ui); position: relative; }
.cs-ap::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--ground); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.cs-track.is-on .cs-ap::after { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; border-left: 4px solid var(--ground); border-right: 4px solid var(--ground); box-sizing: content-box; width: 4px; }
.cs-n { font: 500 11px/1 var(--mono); opacity: .6; }
.cs-at { font: 500 15px/1.3 var(--sans); }
.cs-bar { grid-column: 2 / 4; height: 3px; background: color-mix(in srgb, var(--ui) 14%, transparent); border-radius: 2px; overflow: hidden; display: none; }
.cs-track.is-on .cs-bar { display: block; }
.cs-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.cs-credits .cs-cr { margin: 0; padding: 7px 0; display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--ui) 14%, transparent); font: 400 14.5px/1.4 var(--sans); }
.cs-role { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* ---------------------------------------------------------------- overlays: All work, About */
#index, #about { position: fixed; inset: 0; z-index: 8; background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .45s, transform .6s var(--ease), visibility 0s .6s; }
#index.is-open, #about.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .6s var(--ease), visibility 0s; }
.ov-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--pad) - 4px) var(--pad); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.ov-head h2 { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ov-x { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .3s var(--ease); }
.ov-x:hover { transform: scale(1.1) rotate(90deg); }
.ix-list { max-width: 980px; margin: 0 auto; padding: 4px var(--pad) 80px; columns: 2 320px; column-gap: 48px; }
.ix-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; width: 100%; text-align: left; padding: 13px 0 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); break-inside: avoid; }
.ix-row i { grid-row: 1 / 3; align-self: center; width: 14px; height: 14px; border-radius: 50%; transition: transform .3s var(--ease); }
.ix-row:hover i, .ix-row:focus-visible i { transform: scale(1.5); }
.ix-cl { font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .66; margin-bottom: 4px; }
.ix-ti { font: 600 18px/1.15 var(--sans); letter-spacing: -.01em; }
.ix-row:hover .ix-ti { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ab-body { max-width: 720px; margin: 0 auto; padding: 6vh var(--pad) 80px; }
.ab-name { margin: 0 0 10px; font: 700 clamp(44px, 7vw, 84px)/.95 var(--sans); letter-spacing: -.035em; }
.ab-title { margin: 0 0 22px; font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ab-bio { margin: 0 0 40px; font: 400 21px/1.45 var(--sans); }
.ab-exp { list-style: none; margin: 0 0 40px; padding: 0; }
.ab-exp li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); font: 400 16px/1.35 var(--sans); }
.ab-co { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ab-contact { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ab-contact a { color: inherit; }
body.overlay #top, body.overlay #label { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #nav button { padding: 9px 7px; font-size: 10.5px; }
  #sheet { top: 34vh; left: 0; width: auto; transform: translateY(104%); border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 color-mix(in srgb, var(--ui) 14%, transparent); }
  #sheet.is-open { transform: none; }
  .sh-x { top: 12px; margin: 12px 12px 0 0; }
  .cs-head { padding-top: 22px; }
  .cs-title { font-size: 34px; }
  .cs-row-3 { grid-template-columns: repeat(2, 1fr); }
  body.sheet-open #top { opacity: 1; }
}
@media (max-width: 420px) { #snd span { display: none; } #snd { padding: 9px 10px !important; } #snd i { width: 11px; height: 11px; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01s !important; } }

/* no WebGL: a plain list of the work */
body.no-gl { overflow: auto; }
body.no-gl #dots, body.no-gl #label, body.no-gl #nav-all { display: none; }


/* About opens as a circle from where Mike's dot popped */
#about { opacity: 1; transform: none; clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .6s var(--ease), visibility 0s .6s; }
#about.is-open { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .7s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { #about, #about.is-open { clip-path: none; } }

/* with the work open, the top bar sits over the picture, beside the sheet */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) { body.sheet-open #top { right: var(--sw); transition: right .7s var(--ease); } }