@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@view-transition { navigation: auto; }

:root {
  --ink: #232323;
  --mute: #8d8d8d;
  --yellow: #ffdd00;       /* the logo is #0022ff with an exclusion blend: 255 - (0,34,255) = #ffdd00 */
  --logo: #0022ff;
  /* ---- Type system: four styles, all in rem so browser zoom (Cmd +/-) scales every one of them ----
     text      body copy, descriptions, nav, résumé lines
     subhead   same size as text, bold
     caption   20% smaller than text
     heading   large display size (10% smaller than the first version), bold */
  --fs-base: 13.266px;
  --fs-text: 1rem;
  --fs-sub: 1rem;
  --fs-cap: .8rem;
  --fs-head: 3.8727rem;
  --fw-text: 340;
  --fw-bold: 700;
  --lh-text: 1.06;
  /* Rule spacing, used everywhere a rule appears: text under a rule sits close, text above it sits a little further away */
  --rule-below: .85rem;
  --rule-above: 1.4rem;
  --m: .85vw;              /* outer margin */
  --c1: 16.51vw;           /* left column: the content edge lines up with the first stem of the wordmark's "I" */
  --c2: 16.5vw;            /* second column */
  --c3: 31.99vw;           /* third column: c1+c2+c3 = 65vw, the wordmark's width, so the right edges line up too */
  --gap: 1vw;
  --side-left: 66.8vw;
  --side-w: 32.45vw;
}

/* Base text size follows the window in coarse steps, so Cmd +/- still scales it proportionally */
@media (max-width: 999px)  { :root { --fs-base: 12.375px; } }
@media (min-width: 1700px) { :root { --fs-base: 16.83px; } }
@media (min-width: 2100px) { :root { --fs-base: 20.79px; } }
@media (min-width: 2600px) { :root { --fs-base: 25.74px; } }

* { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: none; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .15s; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
/* subheads */
h1, h2, h3, b, .role, .contact b, .contents nav a[aria-current], .entry .b, .psec .ptext .b {
  font-size: var(--fs-sub);
  font-weight: var(--fw-bold);
}
::selection { background: var(--yellow); color: #000; }

/* ------------------------------------------------------------------ masthead (fixed, blended) */
.mast {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: exclusion;
  color: #dcdcdc;               /* exclusion flips it to ~#232323 on white */
}
.mast a { pointer-events: auto; }
.mast {
  --wm-top: 2.8vw;
  --wm-w: 32vw;
  --wm-h: calc(var(--wm-w) * 515 / 2000);   /* wordmark.png is 2000 x 515 */
  --gap-logo: 1.364rem;                         /* optical gap between the logo and the text above / below it */
}
.home .mast { --wm-w: 65vw; }
.wordmark {
  position: absolute;
  left: var(--m);
  top: var(--wm-top);
  width: var(--wm-w);
  max-width: none;
}
.role, .tagline, .contact, .about-link { position: absolute; margin: 0; }
.role, .tagline { top: calc(var(--wm-top) - var(--gap-logo) - .74rem); }   /* baseline sits one gap above the logo */
.role { left: calc(var(--m) + var(--c1)); }
.tagline { left: calc(var(--m) + var(--c1) + var(--c2)); }
.contact { left: calc(var(--m) + var(--c1) + var(--c2)); top: 3.1vw; }
.about-link { display: none; left: 17.5vw; }

.home .contact, .home .about-link { top: calc(var(--wm-top) + var(--wm-h) + var(--gap-logo) - .14rem); }   /* cap-top sits one gap below the logo */
.home .about-link { display: block; }
.wm-link { position: fixed; left: var(--m); top: 2.8vw; width: 32vw; height: 8.2vw; z-index: 49; }
.home .wm-link { display: none; }

/* ------------------------------------------------------------------ fixed sidebar */
.side {
  position: fixed;
  top: 0;
  left: var(--side-left);
  width: var(--side-w);
  height: 100vh;
  padding-top: .75vw;
  overflow: hidden;
  z-index: 10;
}
.side-photo img { width: 100%; aspect-ratio: 1.553; object-fit: cover; }
.side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  align-items: start;
}
.profile { margin-top: 1rem; }
.profile .txt p + p { text-indent: 1.1rem; }
.contents { margin-top: var(--rule-above); }
.contents h3, .contents nav { border-top: 1px solid var(--ink); padding-top: var(--rule-below); }
.contents nav a { display: block; }
.contents nav a:hover { color: var(--logo); }
.contents nav .gap { display: block; height: 1.06rem; }
.about .side { padding-top: 1.9vw; }
.about .contents { margin-top: 0; }

/* ------------------------------------------------------------------ main flow */
main { margin-left: var(--m); width: calc(var(--c1) + var(--c2) + var(--c3)); min-height: 100vh; display: flex; flex-direction: column; }
.intro-gap { height: 62vh; }
.title-gap { height: 38vh; }

.num, .big {
  font-size: var(--fs-head);
  font-weight: var(--fw-bold);
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0;
}

/* project block on home */
.proj { margin-bottom: 9vw; scroll-margin-top: 3vw; }
.proj:last-of-type { margin-bottom: 0; }
.phead, .trow {
  display: grid;
  grid-template-columns: var(--c1) var(--c2) var(--c3);
}
.phead { align-items: start; margin-bottom: 1rem; }
.phead .num { grid-column: 1; }
.phead h2 { grid-column: 2; padding-top: .1rem; }
.phead .lead { grid-column: 3; }
.hero { display: block; margin-left: var(--c1); width: calc(var(--c2) + var(--c3)); }
.hero img, .hero video { width: 100%; }
.proj.cropped .hero img, .proj.cropped .hero video { aspect-ratio: 2.04; object-fit: cover; object-position: 50% 42%; }
.trow { margin-top: 1.1vw; align-items: start; }
.tags { grid-column: 1; color: var(--mute); font-size: var(--fs-cap); padding-top: .1rem; }
.masonry {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(3, 10vw) 1fr;
  column-gap: var(--gap);
  width: calc(var(--c2) + var(--c3));
}
.masonry .col { display: flex; flex-direction: column; gap: 2.4vw; }
.thumb { margin: 0; }
.thumb figcaption { color: var(--mute); font-size: var(--fs-cap); margin-top: .35rem; font-weight: var(--fw-text); }
.thumb a, .thumb span { display: block; }
.copy {
  position: absolute;
  margin-left: calc(var(--c1) + 3 * 10vw + 3 * var(--gap));
  width: 15.5vw;
}
.trow { position: relative; }
.copy p + p { text-indent: 1.1rem; }
.copy .more { display: inline-block; margin-top: 1.1rem; }
.copy .more:hover, .phead h2 a:hover, a.num:hover { color: var(--logo); }
.trow .masonry { min-height: 4vw; }

/* ------------------------------------------------------------------ project page */
.ptitle { margin-bottom: var(--rule-above); }
.rule { border: 0; border-top: 1px solid var(--ink); margin: 0 0 var(--rule-below); width: 100%; }
.ptags { color: var(--mute); font-size: var(--fs-cap); margin-bottom: 1.2vw; }
.psec {
  display: grid;
  grid-template-columns: var(--c1) calc(var(--c2) + var(--c3));
  align-items: start;
  margin-bottom: 1vw;
}
.psec .ptext { padding-right: 1.6vw; }
.psec .ptext h3 { margin-bottom: 0; }
.psec .ptext p + p { text-indent: 1.1rem; }
.pmedia { min-width: 0; }
.full, .duo, .half { margin-bottom: var(--gap); }
.full img, .full video { width: 100%; }
.duo { display: flex; gap: var(--gap); align-items: flex-start; }
.duo > img, .duo > video { min-width: 0; width: auto; }
.half { width: calc(50% - var(--gap) / 2); }
.pmedia .duo, .pmedia .full { margin-bottom: 0; }

/* ------------------------------------------------------------------ about */
.about-head { grid-template-columns: var(--c1) var(--c2) var(--c3); margin-bottom: 1.1vw; }
.about-head .big { grid-column: 1; white-space: nowrap; }
.about-head .label { grid-column: 2; padding-top: .1rem; }
.about-head .lead { grid-column: 3; }
.about-head .ind { display: inline-block; text-indent: 1.1rem; }
.wide { margin-left: var(--c1); width: calc(var(--c2) + var(--c3)); margin-bottom: 1.1vw; }
.about-photos { margin-bottom: 5vw; }
.rrow {
  display: grid;
  grid-template-columns: var(--c1) calc(var(--c2) + var(--c3));
  border-top: 1px solid var(--ink);
  padding: var(--rule-below) 0 var(--rule-above);
}
.entry { margin-bottom: 1.35rem; }
.entry:last-child { margin-bottom: 0; }
.entry .d + .d { text-indent: 1.1rem; }
.entry .i { font-style: italic; }
.entry.indent { margin-left: 9.4vw; }

/* ------------------------------------------------------------------ footer */
.foot {
  display: grid;
  grid-template-columns: var(--c1) var(--c2) var(--c3);
  margin-top: auto;
  padding: 5vw 0 var(--m);
  color: var(--mute);
}
.foot .top { grid-column: 1; }
.foot p { grid-column: 2 / 4; }
.foot a:hover { color: var(--logo); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 720px) {
  :root { --fs-base: 13.86px; --fs-head: 3.0909rem; --m: 12px; }
  .mast { position: absolute; height: auto; }
  .wordmark { position: static; display: block; margin: 12px var(--m) 0; width: calc(100vw - 24px); }
  .home .wordmark { width: calc(100vw - 24px); }
  .mast { position: static; mix-blend-mode: normal; color: var(--ink); padding: 0 var(--m) 14px; pointer-events: auto; }
  .wordmark { mix-blend-mode: exclusion; }
  .role, .tagline, .contact, .about-link, .home .about-link, .home .contact { position: static; display: block; margin-top: 10px; }
  .home .about-link { margin-top: 12px; }
  .wm-link { display: none; }
  main { margin: 0; width: 100%; padding: 0 var(--m); }
  .intro-gap { height: 36px; }
  .title-gap { height: 36px; }
  .num, .big { margin-bottom: 8px; }
  .phead, .trow, .about-head, .psec, .rrow, .foot { display: block; }
  .phead h2 { margin: 6px 0; }
  .phead .lead { margin-bottom: 14px; }
  .hero, .wide { margin-left: 0; width: 100%; }
  .tags { margin: 14px 0 8px; }
  .masonry { display: grid; grid-template-columns: 1fr 1fr; width: 100%; column-gap: 10px; }
  .masonry .col { gap: 14px; }
  .masonry .col:nth-child(3) { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .copy { position: static; margin: 16px 0 0; width: 100%; }
  .psec .ptext { padding: 0 0 10px; }
  .ptitle { margin-bottom: 14px; }
  .about-head .lead { margin-top: 10px; }
  .entry.indent { margin-left: 20px; }
  .rrow h3 { margin-bottom: 6px; }
  .proj { margin-bottom: 56px; }
  .duo { gap: 8px; }
  .side {
    position: static; width: 100%; height: auto; padding: 0 var(--m) 40px; overflow: visible;
  }
  .side-photo { margin-bottom: 12px; }
  .side-row { grid-template-columns: 90px 1fr; }
  .about .side { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------ slideshows (Right to Resist) */
.slides { outline: none; }
.slides .stage { position: relative; width: 100%; background: #efefef; cursor: pointer; overflow: hidden; }
.slides .stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; z-index: 0;
}
.slides .stage img.prev { opacity: 1; z-index: 1; }
.slides .stage img.on { opacity: 1; z-index: 2; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .slides .stage img.on { transition: none; } }
.slides:focus-visible .stage { outline: 2px solid var(--ink); outline-offset: 3px; }
.slides .ctl { display: flex; justify-content: space-between; align-items: baseline; margin-top: .45rem; color: var(--mute); font-weight: var(--fw-text); font-size: var(--fs-cap); }
.slides .arrows button {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0 0 0 1.1rem; cursor: pointer; font-size: var(--fs-text); line-height: 1;
}
.slides .arrows button:hover { opacity: .5; }
.full > .slides { width: 100%; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: var(--gap); align-items: start; }
.psec { margin-bottom: var(--gap); }
@media (max-width: 720px) { .trio { gap: 8px; } .psec { margin-bottom: 28px; } }
.psec .ptext p.b { text-indent: 0; }
.psec .ptext p.b + p { text-indent: 0; margin-top: .5rem; }

/* ------------------------------------------------------------------ the four text styles, as classes */
.t-text { font-size: var(--fs-text); font-weight: var(--fw-text); line-height: var(--lh-text); }
.t-sub  { font-size: var(--fs-sub);  font-weight: var(--fw-bold); }
.t-cap  { font-size: var(--fs-cap);  font-weight: var(--fw-text); color: var(--mute); }
.t-head { font-size: var(--fs-head); font-weight: var(--fw-bold); letter-spacing: -.04em; line-height: 1; }

/* reserve space and show a quiet tile while an image arrives */
.thumb img, .thumb video, .hero img, .hero video, .full img, .full video, .duo img, .duo video, .half img, .trio img, .wide img { background: #f1f1f1; }

/* ------------------------------------------------------------------ links: hover and active states */
/* Link text turns the logo blue. The masthead is exclusion-blended, which inverts colours over white,
   so there the source colour is the yellow that blends to that same blue. */
.mast a:hover { color: var(--yellow); }
.contents nav a[aria-current],
.contents nav a[aria-current]:hover { color: var(--logo); }

/* Images that are links fade slightly on hover (shows the white page behind, which reads as a soft grey) */
.thumb img, .thumb video, .hero img, .hero video { transition: opacity .25s; }
.thumb a:hover img, .thumb a:hover video, .hero:hover img, .hero:hover video,
.thumb a:focus-visible img, .hero:focus-visible img { opacity: .78; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the two STFC logo animations are black on white: show them white on black */
video.invert, img.invert { filter: invert(1); background: #fff; }

/* every text section on the project pages starts with a rule: text close under it, the media above a little further away.
   The first section sits right under the title rule, so it has none of its own. */
.psec { border-top: 1px solid var(--ink); margin-top: var(--rule-above); padding-top: var(--rule-below); }
hr.rule + .psec { border-top: 0; margin-top: 0; padding-top: 0; }

/* Hyperyouth: videos autoplay muted; a small speaker button in the bottom-left turns sound on */
.vwrap { position: relative; display: block; min-width: 0; }
.vwrap > video { width: 100%; }
.unmute {
  position: absolute; left: .7rem; bottom: .7rem; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s;
}
.unmute:hover { background: rgba(0, 0, 0, .8); }
.unmute svg { width: 1.2rem; height: 1.2rem; }
.unmute .spk { fill: currentColor; }
.unmute .wave { display: none; }
.unmute[aria-pressed="true"] .wave { display: block; }
.unmute[aria-pressed="true"] .slash { display: none; }

/* transparent PNGs/WebPs sit straight on the white page */
img.alpha { background: none !important; }

/* a plain rule between two groups of media: space above it, the next image close under it (same convention as every rule) */
hr.sep { border: 0; border-top: 1px solid var(--ink); width: 100%; margin: var(--rule-above) 0 var(--rule-below); }

/* ------------------------------------------------------------------ Playground: one screen, no scrolling */
@media (min-width: 721px) {
  html:has(body.pg), body.pg { height: 100%; overflow: hidden; }
  body.pg main { height: 100vh; min-height: 0; }
  body.pg .title-gap { height: calc(2.8vw + 32vw * 515 / 2000 + 1.364rem); flex: none; }   /* logo bottom + the same gap used elsewhere */
  body.pg .ptitle { margin-bottom: var(--rule-below); white-space: nowrap; }
  body.pg .rule { margin-bottom: 0; }
  body.pg .foot { margin-top: 0; padding-top: var(--rule-below); }
  body.pg .foot .top { display: none; }
  body.pg .pg-stage { flex: 1 1 auto; min-height: 0; }
}
.pg-stage { position: relative; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pg-card { position: absolute; margin: 0; cursor: grab; touch-action: none; box-shadow: 0 .3rem 1.2rem rgba(0,0,0,.14); }
.pg-card.drag { cursor: grabbing; box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.22); }
.pg-card img, .pg-card video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; background: none; }
.pg-card.pop { animation: pgpop .22s ease-out; }
@keyframes pgpop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-card.pop { animation: none; } }
@media (max-width: 720px) { .pg-stage { height: 70vh; margin-bottom: 20px; } }