:root {
  --topline-height: 43px;
  --paper: var(--hero-bg);
  --ink: var(--hero-ink);
  --hero-bg: #ffffff;
  --hero-ink: #000000;
  --hero-accent: #333333;
  --hero-accent-2: #444444;
  --hero-accent-3: #555555;
  --gutter: clamp(19px, 4.2vw, 76px);
  --page-edge: max(var(--gutter), calc((100% - 1610px) / 2 + var(--gutter)));
  --media-radius: clamp(12px, 1.45vw, 22px);
  --sans: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--paper); }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; height: auto; border-radius: var(--media-radius); }
figure, p, h1, h2, h3, h4, h5 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 5px; }
.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 15; background: var(--paper); padding: 10px; }
.wrap { width: min(100%, 1610px); margin-inline: auto; padding-inline: var(--gutter); }
main {
  container-type: inline-size;
  --masthead-content-width: calc(100cqi - 2 * max(var(--gutter), calc((100cqi - 1610px) / 2 + var(--gutter))));
  --cue-space: clamp(44px, calc(.26 * var(--masthead-content-width) - 105px), 155px);
  --wordmark-size: min(calc((var(--masthead-content-width) - var(--cue-space)) / 7.51), 16svh, 170px);
  --masthead-top: clamp(9px, 2vh, 21px);
  --masthead-bottom: clamp(9px, 1.2vw, 20px);
  --masthead-nav-size: clamp(.75rem, 1.15vw, .95rem);
  --masthead-nav-gap: clamp(11px, 1.5vw, 20px);
  --masthead-row-height: calc(.92 * var(--wordmark-size));
  --masthead-height: calc(var(--masthead-top) + var(--masthead-bottom) + var(--masthead-nav-gap) +
    1.2 * var(--masthead-nav-size) + var(--masthead-row-height) + 1px);
}
.eyebrow, .topline, .opening-interact, .scroll-cue, figcaption, .case-caption, footer {
  font: 500 .78rem/1.4 var(--sans);
  letter-spacing: -.015em;
}
.topline, .scroll-cue, .masthead nav, .work { text-transform: lowercase; }
.topline {
  position: relative; z-index: 2;
  background: var(--paper); color: var(--hero-ink); display: flex; justify-content: space-between;
  gap: .65rem; min-height: var(--topline-height); align-items: center; padding-inline: var(--page-edge); border-bottom: 1px solid currentColor;
}
.topline .name {
  font-size: clamp(.78rem, 1.55vw, 1.45rem); font-weight: 800; line-height: 1; letter-spacing: -.06em;
  text-transform: none; white-space: nowrap;
}
.topline > span { text-align: end; }
[data-home-opening="line"] .topline { border-bottom-color: transparent; }
[data-home-opening="line"] .topline > * { visibility: hidden; }
[data-home-opening="line"]:not([data-opening-pending]) .topline::after {
  content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: currentColor;
  transform-origin: left center;
  animation: opening-rule 640ms cubic-bezier(.4,.05,.24,1) 130ms both;
}
@keyframes opening-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
[data-home-opening="brand"] .topline > * {
  animation: opening-brand-focus 680ms cubic-bezier(.45,0,.28,1) both;
}
@keyframes opening-brand-focus {
  from { filter: blur(11px); }
  to { filter: blur(0); }
}
.home {
  position: relative; isolation: isolate; scroll-margin-top: var(--topline-height);
  min-height: calc(100svh - var(--topline-height) - var(--masthead-height, 135px));
  padding: clamp(19px, 3vh, 38px) var(--page-edge) clamp(9rem, 34svh, 22rem);
  color: var(--hero-ink);
}
.intro { position: relative; z-index: 2; pointer-events: none; min-width: 0; max-width: min(100%, 24em); font-size: clamp(27px, 3.15vw, 48px); }
.home-text { position: relative; display: grid; font-size: 1em; font-weight: 400; letter-spacing: -.052em; line-height: 1.095; }
.home-copy {
  /* Paint within each wrapped line's font box without changing text layout. */
  background: linear-gradient(
    to bottom,
    transparent .17em,
    var(--paper) .17em calc(100% - .15em),
    transparent calc(100% - .15em)
  );
  pointer-events: auto;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.home-text > span { grid-area: 1 / 1; min-width: 0; }
.home-text > span:first-child { position: relative; isolation: isolate; text-wrap: balance; }
.home-text > span:first-child::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: var(--headline-last-left, 0px);
  top: calc(var(--headline-last-bottom, 0px) - .24em);
  width: var(--headline-last-width, 0px);
  height: .38em;
  background: var(--paper);
  pointer-events: none;
}
.headline-short, .headline-break { display: none; }
@media (min-width: 621px) and (min-height: 500px) {
  .headline-break { display: revert; }
}
[data-type-opening] .home-text:not(.is-typing) > span:first-child { opacity: 0; }
.home-text.is-typing > span:first-child {
  clip-path: polygon(0 0, 100% 0, 100% var(--type-top, 0px),
    var(--type-right, 0px) var(--type-top, 0px),
    var(--type-right, 0px) var(--type-bottom, 0px), 0 var(--type-bottom, 0px));
  animation: opening-copy 230ms ease-out both;
}
@keyframes opening-copy { from { opacity: 0; } to { opacity: 1; } }
.home-text.is-typing::after {
  content: ''; position: absolute;
  top: calc(var(--type-top, 0px) + .13em); left: calc(var(--type-right, 0px) + .06em);
  width: .036em; height: .83em; background: currentColor; pointer-events: none;
  animation: opening-cursor-in 230ms ease-out both;
}
@keyframes opening-cursor-in { from { opacity: 0; } to { opacity: .46; } }
.world-map {
  position: absolute; z-index: 1; isolation: isolate;
  inset: calc(-1 * var(--topline-height)) 0 calc(-1 * var(--masthead-height, 135px));
  pointer-events: none;
}
.world-map canvas, .art-notes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-home-opening]:is([data-home-opening="gather"], [data-home-opening="scatter"]) .world-map > canvas:first-child {
  image-rendering: pixelated;
}
.opening-interact {
  position: absolute; z-index: 5; left: 50%; top: var(--opening-cue-y, 55%);
  translate: -50% -50%; color: var(--ink); pointer-events: none;
}
[data-home-opening]:is([data-home-opening="gather"], [data-home-opening="scatter"]) .opening-interact { visibility: hidden; }
[data-home-opening="cue"] .opening-interact {
  animation: opening-cue-blink 625ms ease-in-out 4;
}
@keyframes opening-cue-blink {
  0%, 6% { opacity: .04; }
  23%, 100% { opacity: 1; }
}
.world-map[data-scattering] .art-note { pointer-events: none; }
.art-notes[data-art-layer="background"] { z-index: 1; }
.world-map canvas[data-art-layer="scene"] { z-index: 2; }
.art-notes[data-art-layer="foreground"] { z-index: 3; }
.art-view { position: absolute; z-index: 0; pointer-events: auto; touch-action: none; cursor: var(--site-cursor-grab, grab); }
.art-view[data-scroll-on-swipe] { touch-action: pan-y; }
.world-map[data-dragging] .art-view { cursor: var(--site-cursor-grabbing, grabbing); }
.art-view:focus-visible { outline-offset: -3px; }
.art-note {
  --note-marker-window: 1.25em;
  position: absolute; pointer-events: auto; left: var(--note-x); top: var(--note-y); translate: -50% -50%;
  font: 500 clamp(.69rem, 1.05vw, .86rem)/1.2 var(--sans);
  text-transform: lowercase; background: var(--paper); color: var(--ink);
  border: 0; padding: .48em .62em; cursor: var(--site-cursor-action, pointer); opacity: var(--note-opacity, 1);
}
.art-note { white-space: nowrap; }
.art-note:not([data-source]) {
  /* Let graph lines reach the square while solid paper covers the words. */
  background: linear-gradient(90deg, transparent var(--note-marker-window), var(--paper) var(--note-marker-window));
}
.art-note-marker {
  position: relative; display: inline-block; width: .38em; height: .38em; background: currentColor;
  vertical-align: .12em; margin-inline-end: .55em;
}
.art-note-word { position: relative; display: inline-block; }
.art-note-word > span {
  position: relative;
  transition: -webkit-text-stroke-width 150ms ease-out;
}
.art-note[data-thought-reached] .art-note-word > span {
  -webkit-text-stroke: .032em currentColor;
}
.art-note:is([data-source], [data-thought-reached]) .art-note-word > span::after {
  content: ""; position: absolute; inset: auto 0 -.17em;
  height: 1px; background: currentColor; pointer-events: none;
}
.art-note[data-thought-reached] .art-note-word > span::after {
  transform-origin: left center;
  animation: draw-thought-underline 220ms ease-out both;
}
@keyframes draw-thought-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.art-note-word[data-reforming] > span { visibility: hidden; }
.art-note-word > .art-word-particles {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  image-rendering: pixelated; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .art-note-word[data-reforming] > span { visibility: visible; }
  .art-note-word > .art-word-particles { display: none; }
}
.art-note-leader {
  /* Expose the connector around the square only. Keep the word on solid paper. */
  position: absolute; inset: 0 auto 0 0; width: var(--note-marker-window);
  overflow: hidden; pointer-events: none; color: var(--ink);
}
.art-note-leader > span {
  position: absolute; top: 0; left: 0; background: currentColor; transform-origin: left center;
}
.art-note:is([data-note-hover], :focus-visible, [aria-pressed="true"]) { opacity: 1; }
.art-note:focus-visible { outline: none; }
.art-note:is([data-note-hover], :focus-visible):not([data-seed-ink]) {
  outline: 1px solid var(--ink);
  outline-offset: 0;
}
.art-note[data-note-hover]:not([data-seed-ink]) .art-note-word > span::after { opacity: 0; }
.art-note-popup { display: none; cursor: var(--site-cursor-arrow, default); }
.art-note[data-note][data-note-open] > .art-note-popup {
  --note-gap: 6px;
  display: block; position: absolute; z-index: 1; pointer-events: none;
  top: calc(100% + var(--note-gap)); left: calc(50% + var(--tip-offset, 0px));
  translate: -50% 0; width: min(185px, 47vw);
  text-align: start; white-space: normal; font: 500 .76rem/1.35 var(--sans);
  box-sizing: border-box; padding: .58rem .69rem;
  color: var(--ink); border: 1px solid transparent;
  background-color: var(--paper);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-origin: border-box;
  background-position: left top, right top, right bottom, left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  animation: draw-note-outline 360ms linear both;
}
.art-note[data-tip-above][data-note-open] > .art-note-popup {
  top: auto; bottom: calc(100% + var(--note-gap));
}
.art-note[data-note-open][data-note-hover] > .art-note-popup { pointer-events: auto; }
/* Keep hover attached while the pointer crosses the gap to the note. */
.art-note[data-note-hover] > .art-note-popup::before {
  content: ""; position: absolute; inset-inline: -1px;
  bottom: calc(100% - 1px); height: calc(var(--note-gap) + 3px);
}
.art-note[data-tip-above][data-note-hover] > .art-note-popup::before {
  top: calc(100% - 1px); bottom: auto;
}
@keyframes draw-note-outline {
  0%   { background-size: 0 1px, 1px 0, 0 1px, 1px 0; }
  30%  { background-size: 100% 1px, 1px 0, 0 1px, 1px 0; }
  50%  { background-size: 100% 1px, 1px 100%, 0 1px, 1px 0; }
  80%  { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
  100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}
.art-note[data-orbit] {
  opacity: 1;
  color: color-mix(in srgb, var(--paper), var(--ink) calc(var(--note-opacity, 1) * 100%));
  z-index: var(--note-depth, 0);
}
.art-note[data-orbit]:is([data-note-hover], :focus-visible):not([aria-pressed="true"]) { color: var(--ink); }
.art-note:is([data-note-hover], :focus-visible, [aria-pressed="true"]) { z-index: 50; }
.art-note[data-note-open] { z-index: 51; }
.art-note[data-question-source][data-forming-source] { opacity: var(--source-visibility, 1); }
.art-note[data-orbit][data-receded] { visibility: hidden; }
.art-note[data-orbit][data-receded]:focus-visible { visibility: visible; }

.art-note[data-orbit][data-receded] { pointer-events: none; }
.scroll-cue {
  position: absolute; left: var(--page-edge); bottom: 2rem; z-index: 2; display: flex; align-items: center; gap: .9rem;
  text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px;
}
.scroll-cue-wide, .scroll-cue-mobile { left: 0; bottom: max(0px, calc(2rem - var(--masthead-bottom) - 1px)); }
.scroll-cue-wide { display: none; background: var(--paper); }
.scroll-cue-mobile {
  display: grid; place-items: center; width: 19px; min-height: 30px; padding: 0; border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .masthead[data-scroll-nudge] .scroll-cue:not([data-up]) .arrow-icon {
    animation: scroll-cue-nudge 900ms ease-in-out infinite;
  }
}
@keyframes scroll-cue-nudge {
  0%, 68%, 100% { translate: 0 0; }
  34% { translate: 0 5px; }
}
@media (min-width: 1100px) {
  .scroll-cue-wide { display: flex; visibility: hidden; }
  .masthead[data-scroll-labeled] .scroll-cue-wide { visibility: inherit; }
  .masthead[data-scroll-labeled] .scroll-cue-mobile { visibility: hidden; }
}
.arrow-icon {
  display: inline-block; position: relative; width: .72em; height: .72em;
  vertical-align: .025em; flex: none; transform: rotate(var(--arrow-angle, 0deg));
}
.arrow-icon::before, .arrow-icon::after { content: ''; position: absolute; }
.arrow-icon::before { inset: 50% 0 auto; border-top: max(1px, .06em) solid currentColor; transform: translateY(-50%); }
.arrow-icon::after {
  width: .43em; height: .43em; top: 50%; right: .045em;
  border-top: max(1px, .06em) solid currentColor; border-right: max(1px, .06em) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.arrow-down-right { --arrow-angle: 45deg; }
.arrow-down { --arrow-angle: 90deg; }
.arrow-up-right { --arrow-angle: -45deg; }
.arrow-up { --arrow-angle: -90deg; }
.arrow-left { --arrow-angle: 180deg; }
.project-arrow[aria-expanded="true"] .arrow-icon { --arrow-angle: 225deg; }
.scroll-cue .arrow-icon { font-size: 1rem; }
@font-face {
  font-family: "World Builder Inter";
  src: url("fonts/Inter-Wordmark.woff") format("woff");
  font-weight: 900;
  font-display: block;
}
/* Keep the navigation aligned with the right edge of the wordmark. */
.masthead {
  position: sticky; top: 0; z-index: 6; display: grid; justify-items: end;
  padding: var(--masthead-top) var(--page-edge) var(--masthead-bottom);
  background: transparent; color: var(--ink); border-bottom: 1px solid currentColor;
  pointer-events: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.masthead[data-stuck] { background: var(--paper); }
.masthead a { pointer-events: auto; }
.masthead-row { position: relative; width: 100%; height: var(--masthead-row-height); }
:is([data-home-opening="line"], [data-home-opening="brand"], [data-home-opening="typing"]) .masthead {
  visibility: hidden;
}
[data-home-opening="identity"] .masthead {
  overflow: clip;
  animation: opening-masthead-rule var(--opening-travel, 850ms) ease-out both;
}
[data-home-opening="identity"] .masthead :is(.masthead-row, nav) {
  animation-duration: var(--opening-travel, 850ms);
  animation-timing-function: cubic-bezier(.30,.05,.27,1);
  animation-fill-mode: both;
}
[data-home-opening="identity"] .masthead .masthead-row { animation-name: opening-rise; }
[data-home-opening="identity"] .masthead nav {
  animation-name: opening-nav;
  animation-delay: var(--opening-travel, 850ms);
  animation-duration: var(--opening-nav-travel, 672ms);
}
@keyframes opening-masthead-rule {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: currentColor; }
}
@keyframes opening-rise {
  from { transform: translate3d(0,clamp(26px,6svh,64px),0); clip-path: inset(0 0 100%); }
  to { transform: translate3d(0,0,0); clip-path: inset(-20px); }
}
@keyframes opening-nav {
  from { opacity: 0; transform: translate3d(clamp(32px,8vw,92px),0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
.masthead nav {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: clamp(13px, 2vw, 27px);
  margin-bottom: var(--masthead-nav-gap);
  font: 500 var(--masthead-nav-size)/1.2 var(--sans);
  letter-spacing: .01em;
}
.masthead nav a { position: relative; isolation: isolate; }
.masthead nav a::before {
  content: ''; position: absolute; z-index: -1; inset: -6px -5px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px transparent;
}
.masthead nav a { text-decoration: none; }
.masthead nav a:is(:active, [data-tap-feedback])::before,
.masthead nav:not([data-touch-nav]) a:focus-visible::before {
  box-shadow: inset 0 0 0 1px currentColor;
}
@media (hover: hover) {
  .masthead nav:not([data-touch-nav]) a:hover::before {
    box-shadow: inset 0 0 0 1px currentColor;
  }
}
.masthead nav[data-touch-nav] a:not(:active, [data-tap-feedback])::before {
  transition: box-shadow 100ms ease-out;
}
.masthead nav a:active {
  text-decoration: underline solid;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.masthead nav a:focus-visible { outline: none; }
.scroll-cue[data-up] .arrow-icon { --arrow-angle: -90deg; }
nav a, footer a { text-decoration: none; }
nav:not(.masthead nav) a:hover, footer a:hover { text-decoration: underline dotted; text-underline-offset: .25em; }
.masthead h1 {
  font: 900 var(--wordmark-size)/.92 "World Builder Inter", var(--sans);
  display: flex; justify-content: flex-end; align-items: baseline; gap: .24em;
  letter-spacing: 0; white-space: nowrap;
  transform: scale(1.004, 1.09); transform-origin: right bottom;
}
/* Margins use the shipped font's outlines, independent of viewport or device. */
.wordmark-word { display: inline-flex; align-items: baseline; }
.wordmark-word > span { flex: none; margin-inline-start: var(--letter-adjust); }
.wordmark-word:nth-child(1) { --letter-adjust: -.02246em; }
.wordmark-word:nth-child(1) > :nth-child(2) { --letter-adjust: -.10664em; }
.wordmark-word:nth-child(1) > :nth-child(3),
.wordmark-word:nth-child(2) > :nth-child(6) { --letter-adjust: -.06905em; }
.wordmark-word:nth-child(1) > :nth-child(4) { --letter-adjust: -.04957em; }
.wordmark-word:nth-child(1) > :nth-child(5),
.wordmark-word:nth-child(2) > :nth-child(5) { --letter-adjust: -.06322em; }
.wordmark-word:nth-child(2) { --letter-adjust: -.08398em; }
.wordmark-word:nth-child(2) > :nth-child(2) { --letter-adjust: -.06515em; }
.wordmark-word:nth-child(2) > :is(:nth-child(3), :nth-child(4)) { --letter-adjust: -.06575em; }
.wordmark-word:nth-child(2) > :nth-child(7) { --letter-adjust: -.07638em; margin-inline-end: -.01270em; }
.work section, .project-row, .work article, #contact { scroll-margin-top: var(--masthead-height, 135px); }
.index { padding-block: clamp(58px, 7vw, 120px); }
.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(2.5rem, 5.5vw, 5.25rem); font-weight: 400; line-height: .99; letter-spacing: -.065em; }
.project-index { list-style: none; padding: 0; margin: 0; border-top: 1px solid currentColor; }
.project-row {
  --row-pad: clamp(16px, 2.25vw, 35px);
  --row-type: clamp(1.7rem, 4vw, 4.35rem);
  position: relative; border-bottom: 1px solid currentColor;
}
.project-preview-toggle {
  display: block; width: 100%; padding: 0; text-align: left; text-transform: inherit; text-decoration: none;
  background: transparent; color: inherit; border: 0; cursor: var(--site-cursor-action, pointer);
}
.project-row-title {
  display: block; padding: var(--row-pad) 3.35rem var(--row-pad) 0;
  font-size: var(--row-type); line-height: 1; letter-spacing: -.065em;
}
.project-arrow {
  position: absolute; top: calc(var(--row-pad) + var(--row-type) / 2); right: 0; translate: 0 -50%;
  display: grid; place-items: center end; padding-inline-end: 2px; min-width: 44px; min-height: 44px; text-decoration: none;
  font-size: clamp(1.2rem, 2.5vw, 2.6rem); line-height: 1;
}
.project-arrow:hover, .project-preview-toggle:hover .project-row-title { text-decoration: underline dotted; text-underline-offset: .19em; }
.project-preview {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.25,.75,.3,1), opacity .23s, visibility .34s;
}
.project-row.has-preview:not(.is-expanded) .project-preview { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.project-preview-content {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center;
  gap: clamp(13px, 4vw, 58px); min-height: 0; overflow: hidden;
}
.project-preview-content img {
  width: auto; height: auto; max-width: 100%; max-height: clamp(145px, 27vw, 275px);
  border-radius: var(--media-radius); margin-bottom: clamp(14px, 2vw, 29px);
}
.project-preview-content .project-preview-mark { max-height: clamp(105px, 15vw, 205px); }
.project-preview-content .flik-preview-mark {
  width: min(100%, 340px); padding: clamp(.8rem, 3vw, 2.1rem); background: #111;
}
.project-preview-copy { display: grid; gap: .45rem; margin-bottom: .85rem; font-size: clamp(.9rem, 1.6vw, 1.35rem); line-height: 1.4; }
.about { border-top: 1px solid currentColor; }
.case { padding-block: clamp(14px, 2.3vw, 33px) clamp(35px, 5vw, 72px); }
.back-projects { display: inline-block; margin-top: clamp(22px, 3vw, 42px); text-underline-offset: .2em; }
.world-text { max-width: 53ch; font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1.5; margin-bottom: 1.5rem; }
.world-reasons h4, .cornell-story h4 { margin-bottom: .65em; font-size: clamp(1.35rem, 2.7vw, 2.45rem); font-weight: 400; letter-spacing: -.055em; }
.world-extension { border-top: 1px solid currentColor; margin-top: clamp(27px, 4vw, 60px); padding-top: clamp(24px, 3vw, 44px); }
.faith-result { margin-bottom: clamp(16px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; }
.faith-result p { font-size: clamp(.95rem, 1.7vw, 1.35rem); }
.faith-result a { margin-top: 0; }
.cornell-sketch { max-width: 480px; }
.case-header { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr); align-items: end; gap: 13px clamp(22px, 7vw, 135px); margin-bottom: clamp(25px, 4vw, 60px); }
.case-header .eyebrow { grid-column: 1/-1; }
.case-header h3 { font-size: clamp(2.15rem, 5.2vw, 5.45rem); line-height: .95; letter-spacing: -.075em; font-weight: 400; }
.about h2 { font-size: clamp(2.65rem, 7.7vw, 8.1rem); line-height: .91; font-weight: 400; letter-spacing: -.075em; overflow-wrap: anywhere; }
.case-lede { max-width: 39ch; font-size: clamp(1rem, 1.6vw, 1.6rem); line-height: 1.42; letter-spacing: -.03em; }
.case-caption { margin-top: 1.2rem; max-width: 90ch; }
.text-link { display: inline-block; margin-top: 1.5rem; font-weight: 600; text-underline-offset: .22em; }
.text-link:hover { text-decoration-style: dotted; }
.art-feature { margin-bottom: clamp(22px, 4vw, 56px); }
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 1.15vw, 17px); }
.art-link { display: flex; aspect-ratio: 1.06; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--media-radius); }
.art-link img { width: auto; height: auto; max-height: 100%; transition: transform .25s; }
.art-link:hover img { transform: scale(1.035); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 4vw, 67px); align-items: center; }
.split p, .case-note p, .about > p:not(.eyebrow) { max-width: 47ch; font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1.55; letter-spacing: -.025em; }
.split .eyebrow { font: 500 .78rem/1.4 var(--sans); letter-spacing: -.015em; margin-bottom: 13px; }
.tab-mark img { width: min(100%, 470px); }
[data-image-viewer] { display: block; width: 100%; border-radius: var(--media-radius); }
.interface-grid { width: min(100%, 760px); align-items: start; }
.interface-grid video { width: 100%; aspect-ratio: 9 / 16; background: #10100e; }
.case-note { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 64px); margin-top: 2.5rem; }
.case-note p { font-size: clamp(.98rem, 1.35vw, 1.24rem); }
.editorial-grid, .film-grid, .people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(8px, 2vw, 29px); align-items: start; }
.editorial-grid img { width: 100%; height: auto; }
.people-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.people-grid img, .people-grid video, .film-grid video { width: 100%; aspect-ratio: 4/5; object-fit: contain; }
.people-grid video, .film-grid video { background: #111; }
.ai-film { margin-top: clamp(32px, 5vw, 75px); padding-top: clamp(30px, 4vw, 66px); border-top: 1px solid; }
.ai-film h5 { font-size: clamp(1.65rem, 4.25vw, 5rem); font-weight: 400; letter-spacing: -.065em; margin-bottom: .7rem; }
.ai-film video, .wide-film video { width: 100%; background: #10100e; }
.wide-film { width: min(100%, 1050px); }
.compost-figure img { width: 100%; max-height: 690px; object-fit: contain; object-position: left center; }
.cornell-mark img { width: min(100%, 640px); }
figcaption { margin-top: .55rem; }
/* Space below the sticky wordmark even when the document is at its lower limit. */
.about { padding-block: clamp(38px, 6vw, 95px) clamp(23px, 4vw, 58px); }
.about h2 { margin-bottom: 1.25rem; }
.about > p:not(.eyebrow) { font-size: clamp(1.1rem, 2.1vw, 2.1rem); max-width: 38ch; }
.about > p + p { margin-top: .9em; }
.contact {
  display: flex; align-items: baseline; column-gap: clamp(12px, 3vw, 38px);
  padding-block: clamp(13px, 2vw, 25px); border-block: 1px solid;
}
.contact .eyebrow { flex: none; }
.contact a { text-underline-offset: .23em; white-space: nowrap; }
.contact a:first-of-type { text-decoration: underline; }
.contact a:last-of-type { margin-inline-start: auto; }
.sign-off { padding-bottom: clamp(18px, 3vw, 42px); }
.art-credits { display: block; width: fit-content; margin-top: .7rem; opacity: .75; }
.sign-off .signature { margin-top: clamp(18px, 3vw, 42px); }
.signature {
  justify-self: start; max-width: 100%; font-size: clamp(1.55rem, 10.1vw, 160px);
  line-height: .88; font-weight: 800; letter-spacing: -.065em; text-transform: none; white-space: nowrap;
}
dialog { padding: 0; border: 0; overflow: visible; background: transparent; max-width: calc(100vw - 42px); max-height: calc(100dvh - 42px); }
dialog::backdrop { background: rgb(15 14 10 / .9); }
dialog img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 42px); }
.close-image { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; cursor: var(--site-cursor-action, pointer); background: var(--paper); color: var(--ink); border: 1px solid; font-size: 1.5rem; }
@media (max-width: 880px) {
  .case-header { grid-template-columns: 1fr; gap: 13px; }
  .case-header .eyebrow { grid-column: auto; }
  .case-lede { max-width: 52ch; }
}
@media (max-width: 620px) {
  main {
    --cue-space: clamp(30px, calc(17px + .045 * var(--masthead-content-width)), 44px);
    --masthead-row-height: max(30px, calc(.92 * var(--wordmark-size)));
  }
  .headline-short { display: inline; }
  .headline-long { display: none; }
  .intro { max-width: 100%; font-size: clamp(25px, 6.7vw, 40px); }
  .scroll-cue-mobile { position: static; align-self: end; margin: 0; }
  .scroll-cue-mobile .arrow-icon { font-size: 1.12rem; }
  .masthead-row { width: 100%; display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: end; gap: 5px; }
  .index { padding-top: 55px; }
}
@media (max-width: 540px) {
  :root { --topline-height: 39px; }
  .topline, .opening-interact { font-size: .58rem; }
  .split, .case-note { grid-template-columns: 1fr; }
  .art-grid, .film-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .film-grid { row-gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .art-note[data-note][data-note-open] > .art-note-popup { animation-name: none; }
}
.tab-site-detail { margin-top: clamp(24px, 4vw, 60px); padding-top: 1.25rem; border-top: 1px solid; align-items: start; }
.tab-site-detail img { width: 100%; height: auto; }
.editorial-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.project-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
@media (max-width: 580px) { .editorial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 1rem; } }

.more-films { margin-top: 1.75rem; border-top: 1px solid; border-bottom: 1px solid; }
.more-films summary { cursor: var(--site-cursor-action, pointer); padding: .95rem 0; font-weight: 600; }
.more-films .film-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 1.4rem; }
.ai-cuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(8px, 1.4vw, 23px); }
@media (max-width: 650px) { .more-films .film-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 1.4rem; } }

.world-contents { display: flex; flex-wrap: wrap; gap: .65rem clamp(13px, 2.5vw, 32px); padding-bottom: 1.4rem; }
.world-contents a { font-size: clamp(.88rem, 1.25vw, 1.08rem); }
.tab-chapter { border-top: 1px solid currentColor; padding-block: clamp(28px, 5vw, 76px); }
.chapter-heading {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 8px clamp(20px, 5vw, 76px); align-items: end; margin-bottom: clamp(16px, 3vw, 38px);
}
.chapter-heading .eyebrow { grid-column: 1/-1; }
.chapter-heading h4 { font-size: clamp(1.8rem, 4.45vw, 5.15rem); line-height: .96; letter-spacing: -.07em; font-weight: 400; }
.chapter-heading > p:last-child { font-size: clamp(1rem, 1.45vw, 1.33rem); line-height: 1.48; max-width: 48ch; }
.world-media { display: grid; gap: clamp(10px, 3vw, 36px); align-items: start; }
.world-media video, .world-media img { width: 100%; height: auto; }
.two-media { grid-template-columns: repeat(2,minmax(0,1fr)); }
.design-sequence { grid-template-columns: repeat(3,minmax(0,1fr)); }
.design-sequence img, .design-sequence video { aspect-ratio: 1.13; object-fit: contain; }
.people-sequence, .interface-sequence { width: min(100%, 830px); }
.world-detail { border-top: 1px solid currentColor; margin-top: clamp(17px, 3vw, 39px); }
.world-detail > summary { padding: 1rem 0; cursor: var(--site-cursor-action, pointer); font-weight: 550; }
.edition-toolbar, .edition-controls { display: flex; align-items: center; gap: .65rem; }
.edition-toolbar { justify-content: space-between; padding-block: .65rem; }
.edition-controls button {
  min-width: 39px; min-height: 39px; background: transparent; color: inherit; border: 1px solid currentColor; cursor: var(--site-cursor-action, pointer);
}
.edition-controls button:disabled { opacity: .42; cursor: var(--site-cursor-arrow, default); }
.edition-position { font-variant-numeric: tabular-nums; font-size: .83rem; white-space: nowrap; }
.edition-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(66%, 360px); gap: clamp(8px, 1.4vw, 20px);
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
  padding-bottom: .8rem;
}
.edition-strip figure { scroll-snap-align: start; }
.edition-strip img, .edition-strip video { display: block; width: 100%; aspect-ratio: 4/5; object-fit: contain; }
@media (max-width: 700px) {
  .chapter-heading { grid-template-columns: 1fr; }
  .chapter-heading .eyebrow { grid-column: auto; }
  .edition-strip { grid-auto-columns: 78%; }
}
@media (max-width: 460px) {
  .project-preview-content { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); }
  .project-preview-content img { max-height: clamp(103px, 37vw, 164px); }
  .design-sequence { grid-template-columns: 1fr; }
  .edition-toolbar { font-size: .8rem; }
}

.project-preview-content { display: block; }

.case-opening-text {
  max-width: 50ch;
  margin-bottom: clamp(25px, 5vw, 70px);
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  line-height: 1.5;
}
.case-opening-text > p + p { margin-top: 1em; }
.case-opening-text > .text-link { margin-top: 1em; }
#case-faith > p.case-opening-text .text-link { margin-top: 0; }
.case-artwork { width: min(100%, 440px); }
.case-artwork img { width: 100%; }
.case .cornell-story { margin-bottom: clamp(28px, 5vw, 72px); }

/* Case study manuscript: editorial spreads within the existing project rows. */
.manuscript-header {
  grid-template-columns: minmax(0, 1fr) minmax(11rem, .29fr);
  align-items: end;
  margin-bottom: clamp(22px, 3.3vw, 49px);
}
.manuscript-header h3 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.65vw, 4.85rem);
  line-height: 1;
  overflow-wrap: break-word;
}
.case-role {
  max-width: 31ch;
  font-size: clamp(.84rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  padding-bottom: .17rem;
}
.manuscript-opening {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(18px, 5vw, 86px);
  margin-bottom: clamp(32px, 6vw, 93px);
  align-items: start;
}
.manuscript-intro { grid-column: 2; }
.manuscript-opening-art { align-items: center; }
.manuscript-copy {
  max-width: 65ch;
  font-size: clamp(1rem, 1.35vw, 1.27rem);
  line-height: 1.62;
}
.manuscript-copy p + p { margin-top: .9em; }
.manuscript-intro { font-size: clamp(1.06rem, 1.65vw, 1.52rem); line-height: 1.51; }
.manuscript-spread {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 4.5vw, 76px);
}
.manuscript-stage { font-size: .86rem; line-height: 1.4; margin-bottom: .65rem; }
.manuscript-chapter h4 {
  font-size: clamp(1.65rem, 3.12vw, 3.45rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.055em;
}
.manuscript-evidence { margin-top: clamp(20px, 3.6vw, 50px); }
.manuscript-evidence > figure:not(.wide-film) { max-width: min(100%, 640px); }
.manuscript-evidence > figure img { height: auto; }
.manuscript-evidence [id] { scroll-margin-top: var(--masthead-height, 135px); }
.manuscript-evidence .wide-film + .compost-detail { margin-top: clamp(21px, 4vw, 58px); }
.manuscript-evidence .world-detail:last-child { margin-bottom: 0; }
.manuscript-evidence .art-grid figcaption { margin-top: .55em; }
.manuscript-evidence .art-grid .art-link { width: 100%; }
.manuscript-chapter .manuscript-evidence .text-link:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .manuscript-header, .manuscript-opening, .manuscript-spread { grid-template-columns: minmax(0, 1fr); }
  .manuscript-intro { grid-column: 1; }
  .case-role { max-width: 44ch; }
  .manuscript-opening-art { grid-template-columns: minmax(0, 1fr); }
  .manuscript-opening-art .case-artwork { order: 1; }
  .manuscript-evidence .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.case:has(.manuscript-header) { text-transform: none; }
.manuscript-evidence figure a[data-image-viewer] { display: block; }
.evidence-gallery {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(16px,3.2vw,45px);
  align-items: start;
}
.evidence-gallery figure img { width: 100%; height: auto; }
.evidence-gallery .wide-film { width: 100%; }
.evidence-gallery figcaption { max-width: 55ch; line-height: 1.4; }
.evidence-iteration { align-items: center; }
.evidence-cirkular { align-items: center; }
.evidence-cirkular figure:nth-child(2) { max-width: 420px; margin-inline: auto; }
.evidence-cirkular figure:nth-child(3) { max-width: 370px; margin-inline: auto; }
.evidence-culture { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: center; }
.evidence-culture + .compost-detail { margin-top: clamp(24px,4.6vw,64px); }
.evidence-archive figure:last-child { grid-column: 1 / -1; width: min(100%,750px); }
.cornell-redesign {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(20px,4vw,67px);
  margin-inline: auto;
  padding: clamp(16px,4vw,48px);
  background: #eae5d9;
  color: #292c26;
  border-radius: var(--media-radius);
}
.cornell-redesign h5 { font-size: clamp(1.55rem,3vw,3.1rem); line-height: 1; letter-spacing: -.055em; font-weight: 400; }
.cornell-redesign iframe { display: block; width: 100%; max-width: 515px; height: 690px; border: 1px solid #c8c1b1; border-radius: 8px; background: #f2ede4; }
@media (max-width: 720px) {
  .cornell-redesign { grid-template-columns: 1fr; padding: 12px; }
  .cornell-redesign > div { padding: 8px 4px; }
  .manuscript-opening-art .case-artwork { order: -1; width: min(100%, 320px); }
}
@media (max-width: 565px) {
  .evidence-gallery { grid-template-columns: minmax(0,1fr); }
}

.original-frames {
  margin-block: clamp(22px,4vw,54px);
  scroll-margin-top: var(--masthead-height,135px);
}
.original-frames h5 {
  font-size: clamp(1.36rem,2.6vw,2.7rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.045em;
  margin-bottom: .95em;
}
.original-frame-grid {
  display: grid;
  grid-template-columns: .65fr 1fr 1.15fr;
  gap: clamp(10px,2.5vw,36px);
  align-items: start;
}
.original-frame-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  object-position: top left;
}
.original-frame-grid figcaption { max-width: 27ch; }
#digital-compost-originals .original-frame-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
#digital-compost-originals .original-frame-grid img { max-height: 430px; }
@media (max-width: 560px) {
  .original-frame-grid { grid-template-columns: .7fr 1fr; }
  .original-frame-grid figure:last-child { grid-column: 1 / -1; }
  #digital-compost-originals .original-frame-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #digital-compost-originals .original-frame-grid figure:last-child { grid-column: auto; }
}

.cirkular-feature { margin-bottom: clamp(27px,5vw,80px); }
.cirkular-feature, .cirkular-final, .cirkular-manifesto { scroll-margin-top: var(--masthead-height,135px); }
.cirkular-site-film video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--media-radius);
  background: #15180b;
}
.cirkular-site-credit, .cirkular-manifesto {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: clamp(14px,4vw,58px);
}
.cirkular-site-credit { margin-top: clamp(18px,3.5vw,44px); }
.cirkular-site-credit h4, .cirkular-final h5 {
  font-size: clamp(1.65rem,3.2vw,3.9rem);
  line-height: 1.01;
  font-weight: 400;
  letter-spacing: -.06em;
}
.cirkular-final {
  padding: clamp(16px,4vw,54px);
  background: #edfcce;
  color: #18220e;
  border-radius: var(--media-radius);
}
.cirkular-final header { margin-bottom: clamp(18px,3.3vw,42px); }
.cirkular-final-grid { grid-template-columns: 1.55fr 1fr; align-items: center; }
.cirkular-final-grid.has-alternatives { grid-template-columns: 1.6fr 1fr .85fr; }
.cirkular-final-grid img { max-height: 460px; object-fit: contain; object-position: left center; }
.cirkular-final-grid a { display: block; }
.cirkular-final .project-links { margin-top: .8rem; }
.cirkular-archive .evidence-early-shopping { margin-top: clamp(14px,2.8vw,36px); }
.cirkular-manifesto { align-items: center; margin-bottom: clamp(24px,4vw,60px); }
.cirkular-manifesto figure { max-width: 390px; }
.cirkular-manifesto img { display: block; width: 100%; height: auto; }
.cirkular-manifesto blockquote {
  font-size: clamp(1.4rem,3vw,3.2rem);
  max-width: 27ch;
  line-height: 1.17;
  letter-spacing: -.038em;
  margin: 0;
}
@media (max-width:720px) {
  .cirkular-site-credit, .cirkular-manifesto { grid-template-columns: 1fr; }
  .cirkular-final-grid, .cirkular-final-grid.has-alternatives { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cirkular-final-grid.has-alternatives figure:first-child { grid-column: 1 / -1; }
}
@media (max-width:460px) {
  .cirkular-final-grid { grid-template-columns: 1fr; }
}

/* Transform-only label movement avoids per-frame layout on mobile Safari. */
.world-map[data-renderer="webgl2"] .art-note {
  left:0; top:0; translate:none;
  transform:translate3d(var(--note-x),var(--note-y),0) translate(-50%,-50%);
  will-change:transform;
}
.render-stats { position:absolute;bottom:110px;left:12px;right:12px;z-index:10;pointer-events:none;
  font:10px/1.3 monospace;background:var(--paper);color:var(--ink);padding:8px;overflow-wrap:anywhere; }


.art-note[data-question-source] {opacity:1}
.art-note[data-seed-ink] {
  isolation: isolate;
  background: var(--paper);
}
.art-note-seed-face {
  position: absolute; inset: 0; padding: inherit;
  color: var(--paper); background: var(--ink); pointer-events: none;
}
.art-note[data-seed-ink="release"] > .art-note-seed-face {
  animation: seed-ink-retract 420ms cubic-bezier(.30,.05,.27,1) 70ms both;
}
@keyframes seed-ink-retract {
  from { clip-path: inset(0); }
  to { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .art-note[data-seed-ink="release"] > .art-note-seed-face { animation: none; clip-path: inset(0 100% 0 0); }
}