button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{color:inherit}


:root {
  --black: #090a08;
  --panel: #111310;
  --white: #f0f0e9;
  --muted: #92968e;
  --orange: #ff5a1f;
  --signal: #ff5a1f;
  --blue: #909cff;
  --line: rgba(240, 240, 233, .19);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-x: hidden;
}
body.viewer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; }
::selection { background: var(--blue); color: var(--black); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.route-progress {
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform-origin: left;
  z-index: 100;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(9,10,8,.78);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  left: 0;
  min-height: 64px;
  padding: 0 2vw;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}
.site-mark { font-size: .76rem; font-weight: 800; letter-spacing: -.03em; }
.site-header nav { display: flex; gap: 2rem; }
.site-header nav a, .header-contact {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .07em;
  position: relative;
  text-transform: uppercase;
}
.site-header nav a::after {
  background: currentColor;
  bottom: -.6rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  width: 100%;
}
.site-header nav a:hover::after, .site-header nav a.active::after { transform: scaleX(1); }
.header-contact { justify-self: end; }
.site-footer {
  align-items: center;
  background: var(--black);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 108px;
  padding: 1.5rem 2vw;
}
.site-footer p, .site-footer a {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  margin: 0;
  text-transform: uppercase;
}
.site-footer a:nth-child(2) { justify-self: center; }
.site-footer a:last-child { justify-self: end; }

/* Home */
.home-page {
  --home-bg: var(--black);
  --home-fg: var(--white);
  --home-accent: var(--blue);
  --home-soft: var(--panel);
  background: var(--black);
}
.home-hero {
  background: var(--home-bg);
  color: var(--home-fg);
  min-height: 100svh;
  overflow: hidden;
  padding: 94px 2vw 2vw;
  position: relative;
  transition: background .65s ease, color .65s ease;
}
.home-hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 8vw 8vw;
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  position: absolute;
}
.hero-orbit {
  border: 1px solid color-mix(in srgb, var(--home-fg) 33%, transparent);
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
}
.orbit-one { animation: orbit 16s linear infinite; height: 34vw; right: -10vw; top: 7vw; width: 34vw; }
.orbit-two { animation: orbit 22s linear infinite reverse; bottom: -18vw; height: 38vw; left: 18vw; width: 38vw; }
.hero-orbit::before, .hero-orbit::after {
  background: var(--home-accent);
  border-radius: 50%;
  content: "";
  height: 9px;
  position: absolute;
  width: 9px;
}
.hero-orbit::before { left: 14%; top: 14%; }
.hero-orbit::after { bottom: 3%; right: 29%; }
.home-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  z-index: 3;
}
.home-hero h1 {
  bottom: 20%;
  left: 2vw;
  margin: 0;
  pointer-events: none;
  position: absolute;
  right: 2vw;
  z-index: 5;
}
.home-hero h1 span {
  display: block;
  font-size: clamp(4.2rem, 11.3vw, 12rem);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .72;
}
.home-hero h1 span:last-child {
  color: transparent;
  margin-left: 12vw;
  -webkit-text-stroke: 1.5px var(--home-fg);
}
.home-hero-image {
  animation: hero-image-in .65s both cubic-bezier(.22,1,.36,1);
  height: 66vh;
  overflow: hidden;
  position: absolute;
  right: 8vw;
  top: 14vh;
  width: 52vw;
  z-index: 2;
}
.home-hero-image::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--home-bg) 80%, transparent), transparent 48%),
    linear-gradient(0deg, color-mix(in srgb, var(--home-bg) 70%, transparent), transparent 35%);
  content: "";
  inset: 0;
  position: absolute;
}
.home-hero-image img { height: 100%; object-fit: cover; width: 100%; }
.home-hero-image p {
  bottom: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  left: 1rem;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}
.home-hero-copy {
  align-items: flex-end;
  bottom: 2vw;
  display: flex;
  justify-content: space-between;
  left: 2vw;
  position: absolute;
  right: 2vw;
  z-index: 6;
}
.home-hero-copy p { font-size: .86rem; line-height: 1.5; margin: 0; max-width: 29rem; }
.home-hero-copy a {
  border-bottom: 1px solid currentColor;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  padding-bottom: .45rem;
  text-transform: uppercase;
}
.hero-project-switcher {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  left: 2vw;
  position: absolute;
  top: 28%;
  z-index: 7;
}
.hero-project-switcher button {
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--home-fg) 55%, transparent);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  padding: .25rem 0;
  text-align: left;
  text-transform: uppercase;
  transition: color .25s ease, transform .25s ease;
}
.hero-project-switcher button span { display: inline-block; margin-right: .8rem; width: 1.5rem; }
.hero-project-switcher button:hover, .hero-project-switcher button.active { color: var(--home-fg); transform: translateX(.6rem); }
.hero-project-switcher button.active span { color: var(--home-accent); }

.home-marquee { background: var(--home-accent); color: var(--home-bg); overflow: hidden; transition: background .65s ease, color .65s ease; }
.home-marquee > div { animation: ticker 25s linear infinite; display: flex; padding: .8rem 0; width: max-content; }
.home-marquee span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.home-marquee i { font-size: .7rem; font-style: normal; margin: 0 1.5rem; }

.home-selected { background: var(--white); color: var(--black); padding: 14vh 2vw 16vh; }
.home-section-head {
  align-items: end;
  border-top: 1px solid rgba(9,10,8,.25);
  display: grid;
  gap: 3vw;
  grid-template-columns: .55fr 1.45fr .7fr;
  padding-top: 1rem;
}
.home-section-head > p:first-child, .home-section-head > a {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  margin: 0;
  text-transform: uppercase;
}
.home-section-head h2 { font-size: clamp(3.6rem, 7vw, 8rem); font-weight: 600; letter-spacing: -.075em; line-height: .82; margin: 0; }
.home-section-head > a { border-bottom: 1px solid currentColor; justify-self: end; padding-bottom: .4rem; }
.featured-projects { margin-top: 11vh; }
.featured-project {
  align-items: center;
  background: var(--card-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--card-fg) 22%, transparent);
  color: var(--card-fg);
  display: grid;
  gap: 2vw;
  grid-template-columns: .7fr 1.1fr 1.2fr 1fr .5fr;
  min-height: 35vh;
  overflow: hidden;
  padding: 2.2vw;
  position: relative;
  transition: min-height .5s cubic-bezier(.22,1,.36,1);
}
.featured-project:hover { min-height: 48vh; }
.featured-meta span, .featured-meta p, .featured-project > b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}
.featured-meta span { color: var(--card-accent); display: block; margin-bottom: 2.5rem; }
.featured-project h3 { font-size: clamp(2.6rem, 5.8vw, 7rem); font-weight: 600; letter-spacing: -.075em; line-height: .8; margin: 0; position: relative; z-index: 2; }
.featured-image { height: 25vh; overflow: hidden; transition: height .55s cubic-bezier(.22,1,.36,1), transform .55s ease; }
.featured-project:hover .featured-image { height: 40vh; transform: rotate(-1.5deg); }
.featured-image img { height: 100%; object-fit: cover; transition: transform .8s ease; width: 100%; }
.featured-project:hover .featured-image img { transform: scale(1.035); }
.featured-description { font-size: .78rem; line-height: 1.5; margin: 0; }
.featured-project > b { justify-self: end; }
.featured-project > b span { color: var(--card-accent); font-size: 1rem; margin-left: .5rem; }

.home-notes { background: var(--black); color: var(--white); padding: 14vh 2vw 16vh; }
.notes-heading { border-color: var(--line); color: var(--white); }
.notes-heading > p:last-child { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: 0; max-width: 22rem; }
.home-note-block { display: grid; gap: 5vw; grid-template-columns: .7fr 2.3fr; margin-top: 14vh; min-height: 80vh; }
.note-intro { align-self: start; position: sticky; top: 95px; }
.note-intro > span, .note-intro > a {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  text-transform: uppercase;
}
.note-intro h3 { font-size: clamp(3rem, 5vw, 6rem); letter-spacing: -.07em; line-height: .86; margin: 2rem 0; }
.note-intro p { color: var(--muted); font-size: .82rem; line-height: 1.55; max-width: 24rem; }
.note-intro a { border-bottom: 1px solid currentColor; display: inline-block; margin-top: 2.5rem; padding-bottom: .4rem; }
.preview-stack { min-height: 105vh; position: relative; }
.preview-sheet {
  background: var(--white);
  height: 60vh;
  left: calc(var(--stack-index) * 4%);
  padding: 1rem;
  position: absolute;
  top: calc(var(--stack-index) * 11vh);
  transform: rotate(calc((var(--stack-index) - 2) * 1.2deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  width: 62%;
}
.preview-sheet:hover { transform: rotate(0) translateX(-1rem) scale(1.025); z-index: 5; }
.preview-sheet img { height: calc(100% - 1.5rem); object-fit: contain; width: 100%; }
.preview-sheet span { color: var(--black); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; }
.photo-preview { border-top: 1px solid var(--line); padding-top: 14vh; }
.photo-film { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.photo-film figure { margin: 0; overflow: hidden; }
.photo-film figure:first-child { grid-column: 1 / -1; }
.photo-film figure:nth-child(even) { margin-top: 10vh; }
.photo-film img { height: 58vh; object-fit: cover; transition: filter .4s ease, transform .7s ease; width: 100%; }
.photo-film figure:first-child img { height: 75vh; }
.photo-film figure:hover img { filter: saturate(1.12); transform: scale(1.02); }
.photo-film figcaption { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; padding-top: .5rem; }

.home-about {
  background: var(--blue);
  color: var(--black);
  display: grid;
  gap: 4vw;
  grid-template-columns: .55fr 3.45fr;
  padding: 15vh 2vw;
}
.home-about > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; margin: 0; text-transform: uppercase; }
.home-about h2 { font-size: clamp(3.4rem, 7vw, 8rem); letter-spacing: -.075em; line-height: .84; margin: 0; max-width: 16ch; }
.home-about h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px var(--black); }
.about-copy { border-top: 1px solid rgba(9,10,8,.3); display: grid; gap: 5vw; grid-template-columns: 1fr 1fr; margin-top: 10vh; padding-top: 1rem; }
.about-copy p { font-size: .9rem; line-height: 1.55; margin: 0; max-width: 31rem; }
.home-contact { background: var(--orange); color: var(--black); min-height: 65vh; padding: 9vh 2vw 3vh; }
.home-contact > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; margin: 0; text-transform: uppercase; }
.home-contact > a {
  align-items: flex-end;
  border-bottom: 2px solid currentColor;
  display: flex;
  font-size: clamp(5rem, 13vw, 14rem);
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: -.085em;
  line-height: .75;
  margin-top: 16vh;
  padding-bottom: 1.3rem;
}
.home-contact > a span { font-size: .22em; font-weight: 400; transition: transform .3s ease; }
.home-contact > a:hover span { transform: rotate(45deg); }

/* Project archive */
.projects-intro {
  min-height: 100svh;
  overflow: hidden;
  padding: 96px 2vw 2vw;
  position: relative;
}
.intro-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 7vw 7vw;
  inset: 0;
  position: absolute;
}
.projects-intro > p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  letter-spacing: .07em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
}
.projects-intro h1 {
  bottom: 18%;
  font-size: clamp(5rem, 15vw, 16rem);
  letter-spacing: -.09em;
  line-height: .65;
  margin: 0;
  position: absolute;
  z-index: 2;
}
.projects-intro h1 span { color: transparent; margin-left: 9vw; -webkit-text-stroke: 1.5px var(--white); }
.projects-intro-copy {
  bottom: 2vw;
  display: flex;
  justify-content: space-between;
  left: 2vw;
  position: absolute;
  right: 2vw;
}
.projects-intro-copy p { font-size: .84rem; line-height: 1.5; margin: 0; max-width: 29rem; }
.projects-intro-copy span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; }
.scroll-cue {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  position: absolute;
  right: 2vw;
  text-transform: uppercase;
  top: 23%;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right top;
}
.scroll-cue i { animation: cue 1.8s infinite; background: var(--orange); display: inline-block; height: 1px; margin-right: .7rem; vertical-align: middle; width: 4rem; }
.project-filters {
  background: var(--black);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .8rem 2vw;
  position: sticky;
  scrollbar-width: none;
  top: 64px;
  z-index: 25;
}
.project-filters > p,
.project-filters button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; text-transform: uppercase; white-space: nowrap; }
.project-filters > p { align-self: center; color: var(--orange); margin: 0 1.2rem 0 0; }
.project-filters button { background: transparent; border: 1px solid var(--line); color: var(--white); cursor: pointer; padding: .65rem .8rem; transition: background .25s, border-color .25s, color .25s; }
.project-filters button span { color: var(--orange); margin-left: .55rem; }
.project-filters button:hover,
.project-filters button.active { background: var(--blue); border-color: var(--blue); color: var(--black); }
.project-filters button.active span { color: var(--black); }
.project-sector { scroll-margin-top: 118px; }
.project-sector-heading {
  align-items: end;
  background: var(--black);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3vw;
  grid-template-columns: 3rem minmax(260px, 1.2fr) minmax(240px, .7fr) auto;
  min-height: 42vh;
  padding: 8vh 2vw 3vh;
}
.project-sector-heading > span,
.project-sector-heading > b,
.project-sector-heading > div > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; font-weight: 400; margin: 0; text-transform: uppercase; }
.project-sector-heading > span { color: var(--orange); }
.project-sector-heading > div > p { color: var(--blue); margin-bottom: 1rem; }
.project-sector-heading h2 { font-size: clamp(3rem, 7vw, 8rem); letter-spacing: -.075em; line-height: .8; margin: 0; max-width: 10ch; }
.project-sector-heading > p { font-size: .84rem; line-height: 1.55; margin: 0; max-width: 29rem; }
.project-sector-heading > b { justify-self: end; }
.project-chapter {
  background: var(--chapter-bg);
  color: var(--chapter-fg);
  display: grid;
  gap: 4vw;
  grid-template-columns: minmax(250px, .72fr) 1.8fr;
  min-height: 125vh;
  overflow: hidden;
  padding: 14vh 2vw 16vh;
  position: relative;
  scroll-margin-top: 118px;
}
.chapter-decoration { inset: 0; pointer-events: none; position: absolute; }
.chapter-decoration > span {
  color: color-mix(in srgb, var(--chapter-fg) 7%, transparent);
  font-size: 38vw;
  font-weight: 700;
  letter-spacing: -.12em;
  line-height: .75;
  position: absolute;
  right: -2vw;
  top: -2vw;
}
.chapter-decoration i {
  border: 1px solid color-mix(in srgb, var(--chapter-fg) 28%, transparent);
  border-radius: 50%;
  bottom: 7vh;
  height: 18vw;
  left: 16vw;
  position: absolute;
  width: 18vw;
}
.chapter-decoration i::after { background: var(--chapter-accent); border-radius: 50%; content: ""; height: 10px; left: 16%; position: absolute; top: 8%; width: 10px; }
.chapter-decoration b {
  bottom: 2vw;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 400;
  position: absolute;
  right: 2vw;
}
.chapter-copy { align-self: start; position: sticky; top: 145px; z-index: 2; }
.chapter-label {
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-fg) 28%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  margin: 0 0 2.2rem;
  padding-bottom: 1rem;
  text-transform: uppercase;
}
.chapter-copy h2 { font-size: clamp(3.2rem, 6vw, 7.5rem); letter-spacing: -.08em; line-height: .8; margin: 0; max-width: 8ch; }
.chapter-description { font-size: .84rem; line-height: 1.55; margin: 3rem 0; max-width: 29rem; }
.chapter-copy dl { border-top: 1px solid color-mix(in srgb, var(--chapter-fg) 28%, transparent); margin: 0; }
.chapter-copy dl div { border-bottom: 1px solid color-mix(in srgb, var(--chapter-fg) 28%, transparent); display: grid; gap: 1rem; grid-template-columns: 5rem 1fr; padding: .8rem 0; }
.chapter-copy dt, .chapter-copy dd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; line-height: 1.45; margin: 0; text-transform: uppercase; }
.chapter-copy dt { opacity: .58; }
.chapter-gallery { align-items: start; display: grid; gap: 1.1vw; grid-template-columns: repeat(12, 1fr); position: relative; z-index: 2; }
.chapter-image {
  aspect-ratio: 4 / 3;
  background: var(--chapter-soft);
  border: 0;
  cursor: zoom-in;
  grid-column: span 6;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
}
.chapter-image:first-child { aspect-ratio: 16 / 10; grid-column: 1 / -1; }
.chapter-image img { height: 100%; object-fit: cover; transition: filter .4s ease, transform .8s cubic-bezier(.22,1,.36,1); width: 100%; }
.chapter-image::after { background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 30%); content: ""; inset: 0; position: absolute; }
.chapter-image:hover img { filter: saturate(1.1); transform: scale(1.03); }
.chapter-image span, .chapter-image b {
  bottom: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .5rem;
  font-weight: 400;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}
.chapter-image span { left: .8rem; }
.chapter-image b { opacity: 0; right: .8rem; transform: translateY(5px); transition: opacity .25s, transform .25s; }
.chapter-image:hover b { opacity: 1; transform: translateY(0); }
.chapter-layout-1 .chapter-image:nth-child(2) { aspect-ratio: 4 / 5; grid-column: span 5; }
.chapter-layout-1 .chapter-image:nth-child(3) { grid-column: span 7; margin-top: 10vh; }
.chapter-layout-2 .chapter-image:nth-child(2) { grid-column: span 7; }
.chapter-layout-2 .chapter-image:nth-child(3) { aspect-ratio: 4 / 5; grid-column: span 5; }
#akara .chapter-image:not(:first-child) img,
#kkyemistry-office .chapter-image img,
#graphics .chapter-image img { object-fit: contain; }
.archive-next {
  background: var(--orange);
  color: var(--black);
  min-height: 55vh;
  padding: 10vh 2vw;
}
.archive-next > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; margin: 0; text-transform: uppercase; }
.archive-next div { display: grid; gap: 1rem; margin-top: 12vh; }
.archive-next a { border-bottom: 2px solid currentColor; font-size: clamp(3.8rem, 9vw, 10rem); font-weight: 700; letter-spacing: -.075em; line-height: .9; padding-bottom: .4rem; }

/* Sketchbooks */
.sketches-page { background: var(--white); color: var(--black); }
.sketches-page .site-header {
  background: rgba(240,240,233,.82);
  border-color: rgba(9,10,8,.25);
  color: var(--black);
}
.sketches-intro {
  min-height: 100svh;
  overflow: hidden;
  padding: 96px 2vw 2vw;
  position: relative;
}
.paper-grid {
  background-image:
    linear-gradient(rgba(9,10,8,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,10,8,.1) 1px, transparent 1px);
  background-size: 3vw 3vw;
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
  position: absolute;
}
.sketches-intro > p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  letter-spacing: .07em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
}
.sketches-intro h1 {
  bottom: 18%;
  font-size: clamp(5rem, 15vw, 16rem);
  letter-spacing: -.09em;
  line-height: .65;
  margin: 0;
  position: absolute;
  z-index: 2;
}
.sketches-intro h1 em {
  color: transparent;
  display: block;
  font-style: normal;
  margin-left: 8vw;
  -webkit-text-stroke: 1.5px var(--black);
}
.sketches-intro-copy {
  bottom: 2vw;
  display: flex;
  justify-content: space-between;
  left: 2vw;
  position: absolute;
  right: 2vw;
}
.sketches-intro-copy p { font-size: .84rem; line-height: 1.55; margin: 0; max-width: 30rem; }
.sketches-intro-copy span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; }
.pencil-line {
  border: 1px solid rgba(9,10,8,.4);
  border-radius: 50%;
  height: 33vw;
  position: absolute;
  width: 33vw;
}
.pencil-line::before { background: var(--orange); border-radius: 50%; content: ""; height: 9px; left: 11%; position: absolute; top: 13%; width: 9px; }
.line-a { animation: orbit 21s linear infinite; right: 4vw; top: 13vh; }
.line-b { animation: orbit 28s linear infinite reverse; bottom: -18vw; left: 22vw; }
.hand-note {
  font-family: cursive;
  font-size: 1.2rem;
  position: absolute;
  right: 7vw;
  top: 28vh;
  transform: rotate(-8deg);
}
.sketch-ruler {
  background: var(--orange);
  color: var(--black);
  display: flex;
  height: 58px;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 2vw;
}
.sketch-ruler i { border-left: 1px solid rgba(9,10,8,.65); display: block; height: 16px; position: relative; width: 3.5vw; }
.sketch-ruler i:nth-child(4n+1) { height: 34px; }
.sketch-ruler span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .46rem; font-style: normal; left: .25rem; position: absolute; top: 38px; }
.sketch-index {
  background: var(--white);
  border-bottom: 1px solid rgba(9,10,8,.25);
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding: .8rem 2vw;
  position: sticky;
  scrollbar-width: none;
  top: 64px;
  z-index: 24;
}
.sketch-index a { border: 1px solid rgba(9,10,8,.28); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; padding: .65rem .8rem; text-transform: uppercase; white-space: nowrap; }
.sketch-index a:hover { background: var(--orange); border-color: var(--orange); }
.sketch-ledger { padding: 12vh 2vw 16vh; }
.sketch-ledger > header {
  border-bottom: 1px solid rgba(9,10,8,.3);
  border-top: 1px solid rgba(9,10,8,.3);
  display: flex;
  justify-content: space-between;
  padding: .9rem 0;
}
.sketch-ledger > header p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  margin: 0;
  text-transform: uppercase;
}
.sketch-collection { border-bottom: 1px solid rgba(9,10,8,.25); padding: 12vh 3vw; scroll-margin-top: 124px; }
.sketch-collection:nth-child(odd) { background: rgba(144,156,255,.1); }
.sketch-collection-heading { align-items: end; display: grid; gap: 3vw; grid-template-columns: 3rem minmax(260px, 1.2fr) minmax(220px, .7fr) auto; margin-bottom: 7vh; }
.sketch-collection-heading > span,
.sketch-collection-heading > b,
.sketch-collection-heading > div > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; font-weight: 400; margin: 0; text-transform: uppercase; }
.sketch-collection-heading > span { color: var(--orange); }
.sketch-collection-heading > div > p { opacity: .55; margin-bottom: .8rem; }
.sketch-collection-heading h2 { font-family: Georgia, serif; font-size: clamp(2.4rem, 4.8vw, 5.4rem); font-style: italic; font-weight: 400; letter-spacing: -.045em; line-height: .9; margin: 0; }
.sketch-collection-heading > p { font-size: .84rem; line-height: 1.55; margin: 0; max-width: 24rem; }
.sketch-collection-heading > b { justify-self: end; }
.sketch-collection-grid { display: grid; gap: 1.2vw; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sketch-grid-image {
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--white) 88%, var(--blue));
  border: 0;
  box-shadow: 0 22px 48px rgba(9,10,8,.13);
  cursor: zoom-in;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}
.sketch-grid-image:nth-child(4n+2) { aspect-ratio: 1 / 1; }
.sketch-grid-image img { height: 100%; object-fit: contain; transition: transform .7s ease; width: 100%; }
.sketch-grid-image:hover img { transform: scale(1.025) rotate(-.35deg); }
.sketch-grid-image span,
.sketch-grid-image b {
  bottom: .65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .48rem;
  position: absolute;
  text-transform: uppercase;
}
.sketch-grid-image span { left: .8rem; }
.sketch-grid-image b { font-weight: 400; opacity: 0; right: .8rem; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.sketch-grid-image:hover b { opacity: 1; transform: translateY(0); }
.sketch-end {
  background: var(--blue);
  color: var(--black);
  min-height: 52vh;
  padding: 10vh 2vw;
}
.sketch-end > p { font-family: Georgia, serif; font-size: clamp(2.6rem, 6vw, 7rem); font-style: italic; line-height: .9; margin: 0; max-width: 14ch; }
.sketch-end div { display: flex; gap: 2rem; justify-content: flex-end; margin-top: 10vh; }
.sketch-end a { border-bottom: 1px solid currentColor; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; padding-bottom: .35rem; text-transform: uppercase; }

/* Photography */
.photography-page { background: var(--black); color: var(--white); }
.photo-intro {
  min-height: 100svh;
  overflow: hidden;
  padding: 96px 2vw 2vw;
  position: relative;
}
.photo-grain {
  background-image:
    radial-gradient(rgba(255,255,255,.15) .7px, transparent .7px),
    radial-gradient(rgba(255,255,255,.08) .7px, transparent .7px);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  inset: 0;
  opacity: .26;
  position: absolute;
}
.photo-intro > p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  letter-spacing: .08em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
}
.photo-intro h1 {
  bottom: 18%;
  font-size: clamp(5rem, 15vw, 16rem);
  letter-spacing: -.09em;
  line-height: .65;
  margin: 0;
  position: absolute;
  z-index: 2;
}
.photo-intro h1 span { color: transparent; display: block; margin-left: 8vw; -webkit-text-stroke: 1.5px var(--white); }
.photo-intro-copy {
  bottom: 2vw;
  display: flex;
  justify-content: space-between;
  left: 2vw;
  position: absolute;
  right: 2vw;
}
.photo-intro-copy p { font-size: .84rem; line-height: 1.55; margin: 0; max-width: 30rem; }
.photo-intro-copy span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; }
.aperture {
  border: 1px solid rgba(238,233,221,.25);
  border-radius: 50%;
  position: absolute;
}
.aperture::before, .aperture::after {
  border: 1px solid rgba(238,233,221,.18);
  border-radius: 50%;
  content: "";
  inset: 12%;
  position: absolute;
}
.aperture::after { inset: 28%; }
.aperture-one { animation: orbit 26s linear infinite; height: 38vw; right: 5vw; top: 12vh; width: 38vw; }
.aperture-two { animation: orbit 35s linear infinite reverse; bottom: -20vw; height: 44vw; left: 12vw; width: 44vw; }
.exposure-readout {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  position: absolute;
  right: 2vw;
  top: 30vh;
}
.exposure-readout span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; text-transform: uppercase; }
.contact-strip { background: var(--blue); color: var(--black); overflow: hidden; }
.contact-strip > div { animation: ticker 20s linear infinite; display: flex; padding: .8rem 0; width: max-content; }
.contact-strip span { display: flex; }
.contact-strip b { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.contact-strip i { font-style: normal; margin: 0 1.2rem; }
.photo-index {
  background: var(--black);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding: .8rem 2vw;
  position: sticky;
  scrollbar-width: none;
  top: 64px;
  z-index: 24;
}
.photo-index a { border: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; padding: .65rem .8rem; text-transform: uppercase; white-space: nowrap; }
.photo-index a:hover { background: var(--blue); border-color: var(--blue); color: var(--black); }
.photo-essay { padding: 10vh 2vw 16vh; }
.photo-archive-heading { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: .9rem 0; }
.photo-archive-heading p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; margin: 0; text-transform: uppercase; }
.photo-collection { border-bottom: 1px solid var(--line); padding: 12vh 3vw; scroll-margin-top: 124px; }
.photo-collection:nth-child(odd) { background: rgba(144,156,255,.045); }
.photo-collection-heading { align-items: end; display: grid; gap: 3vw; grid-template-columns: 3rem minmax(260px, 1.2fr) minmax(220px, .7fr) auto; margin-bottom: 7vh; }
.photo-collection-heading > span,
.photo-collection-heading > b,
.photo-collection-heading > div > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52rem; font-weight: 400; margin: 0; text-transform: uppercase; }
.photo-collection-heading > span { color: var(--blue); }
.photo-collection-heading > div > p { color: var(--orange); margin-bottom: .8rem; }
.photo-collection-heading h2 { font-size: clamp(2.7rem, 5vw, 5.8rem); letter-spacing: -.06em; line-height: .86; margin: 0; }
.photo-collection-heading > p { color: var(--muted); font-size: .84rem; line-height: 1.55; margin: 0; max-width: 24rem; }
.photo-collection-heading > b { justify-self: end; }
.photo-collection-grid { display: grid; gap: 1.15vw; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid-image {
  aspect-ratio: 4 / 5;
  background: var(--panel);
  border: 0;
  cursor: zoom-in;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.photo-grid-image:first-child { aspect-ratio: 16 / 10; grid-column: span 2; }
.photo-grid-image:nth-child(4n) { aspect-ratio: 1 / 1; }
.photo-grid-image img { height: 100%; object-fit: cover; transition: filter .45s ease, transform .8s ease; width: 100%; }
.photo-grid-image::after {
  border: 1px solid rgba(255,255,255,.35);
  content: "";
  inset: .8rem;
  pointer-events: none;
  position: absolute;
}
.photo-grid-image:hover img { filter: saturate(1.12); transform: scale(1.025); }
.photo-grid-image > span,
.photo-grid-image > b {
  background: rgba(7,8,7,.8);
  bottom: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .48rem;
  padding: .45rem .55rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}
.photo-grid-image > span { left: .8rem; }
.photo-grid-image > b { font-weight: 400; opacity: 0; right: .8rem; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.photo-grid-image:hover > b { opacity: 1; transform: translateY(0); }
.photo-end { background: var(--orange); color: var(--black); min-height: 55vh; padding: 10vh 2vw; }
.photo-end > p { font-size: clamp(2.8rem, 6vw, 7rem); font-weight: 600; letter-spacing: -.07em; line-height: .86; margin: 0; max-width: 16ch; }
.photo-end div { display: flex; gap: 2rem; justify-content: flex-end; margin-top: 10vh; }
.photo-end a { border-bottom: 1px solid currentColor; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; padding-bottom: .35rem; text-transform: uppercase; }

/* Viewer */
.image-viewer { align-items: center; display: grid; inset: 0; padding: 70px 4vw 60px; position: fixed; z-index: 90; }
.viewer-backdrop { background: rgba(5,6,5,.95); border: 0; cursor: zoom-out; inset: 0; padding: 0; position: absolute; width: 100%; }
.viewer-bar { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; left: 2vw; position: absolute; right: 2vw; top: 22px; z-index: 2; }
.viewer-bar p, .viewer-bar button, .viewer-controls button {
  background: transparent;
  border: 0;
  color: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.viewer-bar p:nth-child(2) { justify-self: center; }
.viewer-bar button { cursor: pointer; justify-self: end; }
.viewer-stage { align-items: center; display: flex; height: 100%; justify-content: center; min-height: 0; position: relative; z-index: 1; }
.viewer-stage img { max-height: calc(100vh - 140px); max-width: 92vw; object-fit: contain; }
.viewer-controls { bottom: 22px; display: flex; justify-content: space-between; left: 2vw; position: absolute; right: 2vw; z-index: 2; }
.viewer-controls button { border-bottom: 1px solid rgba(255,255,255,.5); cursor: pointer; padding-bottom: .35rem; }

[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .75s ease, transform .9s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@keyframes hero-image-in {
  from { clip-path: inset(0 100% 0 0); opacity: .3; transform: translateX(20px); }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
}
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes cue { 50% { transform: scaleX(.35); transform-origin: left; } }

@media (max-width: 900px) {
  .featured-project { grid-template-columns: .5fr 1fr 1.1fr; }
  .featured-description, .featured-project > b { display: none; }
  .project-chapter { gap: 7vh; grid-template-columns: 1fr; }
  .project-sector-heading, .sketch-collection-heading, .photo-collection-heading { grid-template-columns: 3rem 1fr auto; }
  .project-sector-heading > p, .sketch-collection-heading > p, .photo-collection-heading > p { display: none; }
  .sketch-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-copy { display: grid; gap: 1.2rem 3vw; grid-template-columns: 1fr 1fr; position: static; }
  .chapter-label, .chapter-copy h2 { grid-column: 1 / -1; }
  .chapter-description { margin: 1rem 0 0; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .site-header nav { display: none; }
  .header-contact { font-size: .52rem; }
  .home-hero { min-height: 94svh; padding: 84px 1rem 1rem; }
  .home-hero-image { height: 51%; right: 1rem; top: 18%; width: 80vw; }
  .home-hero h1 { bottom: 25%; left: 1rem; right: 1rem; }
  .home-hero h1 span { font-size: clamp(4rem, 18vw, 7rem); line-height: .76; }
  .home-hero h1 span:last-child { margin-left: 4vw; }
  .hero-project-switcher { display: none; }
  .home-hero-copy { bottom: 1rem; left: 1rem; right: 1rem; }
  .home-hero-copy p { max-width: 74%; }
  .home-hero-copy a { font-size: 0; }
  .home-hero-copy a::after { content: "↓"; font-size: 1.2rem; }
  .home-selected, .home-notes { padding-left: 1rem; padding-right: 1rem; }
  .home-section-head { grid-template-columns: 1fr 1fr; }
  .home-section-head h2 { grid-column: 1 / -1; grid-row: 2; margin-top: 2rem; }
  .home-section-head > a { grid-column: 2; grid-row: 1; }
  .notes-heading > p:last-child { display: none; }
  .featured-project {
    align-items: start;
    gap: 1.2rem;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 1.2rem;
  }
  .featured-project:hover { min-height: auto; }
  .featured-meta { display: flex; justify-content: space-between; }
  .featured-meta span { margin: 0; }
  .featured-meta p:last-child { display: none; }
  .featured-project h3 { font-size: clamp(3.5rem, 15vw, 6rem); }
  .featured-image, .featured-project:hover .featured-image { height: 52vh; transform: none; }
  .home-note-block { grid-template-columns: 1fr; }
  .note-intro { position: static; }
  .preview-stack { min-height: 88vh; }
  .preview-sheet { height: 48vh; width: 82%; }
  .photo-film { grid-template-columns: 1fr; }
  .photo-film figure:first-child { grid-column: auto; }
  .photo-film figure:nth-child(even) { margin-top: 0; }
  .photo-film img, .photo-film figure:first-child img { height: 60vh; }
  .home-about { gap: 3rem; grid-template-columns: 1fr; padding: 11vh 1rem; }
  .home-about h2 { font-size: clamp(3.3rem, 14vw, 6rem); }
  .about-copy { gap: 2rem; grid-template-columns: 1fr; }
  .home-contact { padding: 8vh 1rem 3vh; }
  .home-contact > a { font-size: clamp(4rem, 18vw, 7rem); }
  .site-footer { align-items: start; gap: 1.2rem; grid-template-columns: 1fr; padding: 2rem 1rem; }
  .site-footer a:nth-child(2), .site-footer a:last-child { justify-self: start; }
  .projects-intro { min-height: 92svh; padding: 84px 1rem 1rem; }
  .projects-intro h1 { font-size: clamp(4.6rem, 19vw, 8rem); }
  .projects-intro-copy { bottom: 1rem; left: 1rem; right: 1rem; }
  .projects-intro-copy span { display: none; }
  .project-filters { padding-left: 1rem; top: 64px; }
  .project-filters > p { display: none; }
  .project-sector-heading { gap: 1rem; grid-template-columns: 2rem 1fr; min-height: 34vh; padding: 7vh 1rem 3vh; }
  .project-sector-heading > b { grid-column: 2; justify-self: start; }
  .project-chapter { padding: 11vh 1rem 13vh; }
  .chapter-copy { display: block; }
  .chapter-copy h2 { font-size: clamp(3.5rem, 15vw, 6rem); }
  .chapter-description { margin: 2.2rem 0; }
  .chapter-gallery { gap: .6rem; }
  .chapter-image, .chapter-image:first-child,
  .chapter-layout-1 .chapter-image:nth-child(2), .chapter-layout-1 .chapter-image:nth-child(3),
  .chapter-layout-2 .chapter-image:nth-child(2), .chapter-layout-2 .chapter-image:nth-child(3) {
    aspect-ratio: 4 / 3;
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .chapter-image:first-child { aspect-ratio: 1 / 1; }
  .archive-next { padding: 9vh 1rem; }
  .archive-next a { font-size: clamp(3.3rem, 14vw, 6rem); }
  .sketches-intro, .photo-intro { min-height: 92svh; padding: 84px 1rem 1rem; }
  .sketches-intro h1, .photo-intro h1 { font-size: clamp(4.5rem, 19vw, 8rem); }
  .sketches-intro-copy, .photo-intro-copy { bottom: 1rem; left: 1rem; right: 1rem; }
  .sketches-intro-copy span, .photo-intro-copy span, .hand-note, .exposure-readout { display: none; }
  .sketch-ledger, .photo-essay { padding: 9vh 1rem 12vh; }
  .sketch-index { padding-left: 1rem; }
  .sketch-collection { padding: 9vh 0; }
  .sketch-collection-heading { gap: 1rem; grid-template-columns: 2rem 1fr; padding: 0 .5rem; }
  .sketch-collection-heading > b { grid-column: 2; justify-self: start; }
  .sketch-collection-grid { gap: .65rem; grid-template-columns: 1fr; }
  .photo-index { padding-left: 1rem; }
  .photo-collection { padding: 9vh 0; }
  .photo-collection-heading { gap: 1rem; grid-template-columns: 2rem 1fr; padding: 0 .5rem; }
  .photo-collection-heading > b { grid-column: 2; justify-self: start; }
  .photo-collection-grid { gap: .65rem; grid-template-columns: 1fr; }
  .photo-grid-image:first-child, .photo-grid-image:nth-child(4n) { aspect-ratio: 4 / 5; grid-column: auto; }
  .photo-frame, .photo-frame-1, .photo-frame-2, .photo-frame-3 {
    display: block;
    min-height: auto;
    padding: 10vh 0;
  }
  .sketch-grid-image, .sketch-grid-image:nth-child(4n+2) { aspect-ratio: 4 / 5; }
  .sketch-end, .photo-end { padding: 9vh 1rem; }
  .sketch-end div, .photo-end div { justify-content: flex-start; }
  .viewer-bar { grid-template-columns: 1fr 1fr; left: 1rem; right: 1rem; }
  .viewer-bar p:nth-child(2) { display: none; }
  .viewer-controls { left: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Updated collections retain the original portfolio's colour and type system. */
.project-media{min-width:0;position:relative;z-index:2}
.drawing-set{margin:0 0 2.5rem}.drawing-set header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}.drawing-set h3,.process-films h3{font-size:1.1rem;margin:0}.drawing-set header p,.process-films h3 span{font-family:monospace;font-size:.65rem;opacity:.65}
.drawing-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:.5rem}
.drawing-sheet{aspect-ratio:1.4;background:#fff;border:0;box-shadow:0 8px 24px #0003;position:relative;cursor:zoom-in;padding:.8rem;min-width:0;transition:transform .3s,box-shadow .3s;overflow:hidden}
.drawing-sheet img{width:100%;height:100%;object-fit:contain}.drawing-sheet span{position:absolute;bottom:.2rem;left:.4rem;color:#151515;font:10px monospace}.drawing-sheet b{position:absolute;right:.4rem;bottom:.2rem;color:#151515;font:10px monospace;opacity:0}.drawing-sheet:hover b,.drawing-sheet:focus-visible b{opacity:1}
.drawing-collage{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:1.5rem .8rem 2rem}.drawing-collage .drawing-sheet{width:115%;transform:rotate(-4deg);margin-top:-.3rem}.drawing-collage .drawing-sheet:nth-child(3n+2){transform:rotate(3deg) translateY(.9rem)}.drawing-collage .drawing-sheet:nth-child(3n){transform:rotate(-1deg) translateY(-.6rem);width:100%}.drawing-collage .drawing-sheet:hover,.drawing-collage .drawing-sheet:focus-visible{transform:rotate(0) scale(1.1);z-index:4;box-shadow:0 10px 35px #0005}
.updated-gallery .chapter-image{grid-column:span 6;aspect-ratio:4/3;margin:0}.updated-gallery .chapter-image:first-child{grid-column:1/-1;aspect-ratio:16/10}.gallery-toggle{display:block;width:100%;padding:1.1rem;margin-top:1rem;border:1px solid currentColor;background:transparent;font:12px monospace;cursor:pointer}.gallery-toggle:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.process-films{margin-top:2rem}.process-films h3{display:flex;gap:1rem;align-items:center}.film-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.film-tabs button{border:1px solid currentColor;background:transparent;padding:.7rem 1rem;cursor:pointer;font:11px monospace}.film-tabs button[aria-pressed=true]{background:var(--orange);color:#111}.process-films iframe{border:0;width:100%;aspect-ratio:16/9;background:#111}.art-page .sketch-collection{scroll-margin-top:100px}.art-page .sketch-grid-image img{object-fit:contain;background:#e8e7df}
.site-header nav{gap:1.4rem}
@media(max-width:760px){.site-header{height:auto;min-height:78px;padding-top:.6rem;padding-bottom:.6rem;gap:.5rem}.site-header nav{display:flex;grid-column:1/-1;grid-row:2;justify-content:space-between;gap:.5rem;width:100%}.site-header nav a{font-size:.52rem}.header-contact{grid-column:2;grid-row:1}.drawing-set header{display:block}.drawing-collage{grid-template-columns:repeat(2,minmax(0,1fr));padding:1rem .3rem}.drawing-collage .drawing-sheet{width:104%}.updated-gallery .chapter-image{grid-column:span 6;aspect-ratio:1/1}.updated-gallery .chapter-image:first-child{grid-column:1/-1;aspect-ratio:4/3}.drawing-sheet{padding:.3rem}.sketch-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sketch-grid-image,.sketch-grid-image:nth-child(4n+2){aspect-ratio:3/4}.project-chapter{min-height:auto}.chapter-copy h2{max-width:12ch}}

/* Compact project previews and isolated project pages. */
.project-index .projects-intro{min-height:unset;padding-bottom:4rem}
.preview-count{padding:1.5rem 5vw 0;font:.7rem ui-monospace,monospace;text-transform:uppercase;opacity:.6}
.project-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem 2rem;padding:2rem 5vw 7rem}
.project-preview-card{display:block;min-width:0}.project-preview-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:#171914}
.project-preview-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.project-preview-image span{position:absolute;bottom:1rem;right:1rem;padding:.75rem 1rem;background:#f0f0e9;color:#090a08;font-size:.75rem}
.project-preview-card:hover img{transform:scale(1.035)}.project-preview-card:focus-visible{outline:2px solid #ff5a1f;outline-offset:8px}
.project-preview-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:1.25rem;font: .7rem ui-monospace,monospace;text-transform:uppercase;opacity:.65}
.project-preview-card h2{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.055em;line-height:1.1;margin:.6rem 0}.project-preview-card>p{font-size:.85rem;margin:0;opacity:.65}
.project-breadcrumb{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:8rem 5vw 2rem;font-size:.8rem}
.detail-chapter{padding-top:4rem;min-height:60vh}.detail-chapter .chapter-copy h1{font-size:clamp(3.2rem,6vw,7.5rem);letter-spacing:-.07em;line-height:.9;margin:0;overflow-wrap:anywhere}
.project-return{padding:3rem 5vw;font-size:.85rem}.project-return a:hover,.project-breadcrumb a:hover{text-decoration:underline}
@media(max-width:700px){.project-preview-grid{grid-template-columns:1fr;gap:3rem;padding:2rem 5vw 4rem}.project-breadcrumb{padding-top:7rem;flex-wrap:wrap;gap:1rem}.detail-chapter .chapter-copy{position:static}}
@media(prefers-reduced-motion:reduce){.project-preview-image img{transition:none}}
@media(max-width:1100px){.detail-chapter .chapter-copy h1{grid-column:1/-1}}

/* Keep the compact archive heading in document flow at every screen size. */
.project-index .site-header{position:sticky}
.project-index .projects-intro{display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,3rem);min-height:0;padding:clamp(2rem,5vw,4rem) 5vw;overflow:visible}
.project-index .projects-intro h1{position:relative;inset:auto;font-size:clamp(2.75rem,13vw,12rem);line-height:1;letter-spacing:-.065em;margin:0}
.project-index .projects-intro h1 span{margin-left:0;-webkit-text-stroke:1px var(--white)}
.project-index .projects-intro>p{line-height:1.65;max-width:100%;overflow-wrap:anywhere}
.project-index .projects-intro-copy{position:relative;inset:auto;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.project-index .projects-intro-copy p{max-width:32rem}
.project-index .project-filters{top:var(--site-header-height,64px)}
@media(max-width:760px){.project-index .project-filters{top:var(--site-header-height,78px)}.project-index .projects-intro{padding:2rem 1rem;gap:1.5rem}.project-index .projects-intro h1{font-size:clamp(2.4rem,13vw,6rem)}}

.home-page .preview-sheet img{height:100%}

/* Responsive text layout: content owns its height instead of sharing coordinates. */
.site-header{position:sticky}
.site-header nav{min-width:0;flex-wrap:wrap}
.site-header nav a{white-space:nowrap}
.home-hero{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.5rem,3vw,3rem);min-height:0;padding:3rem 5vw;isolation:isolate}
.home-hero .home-kicker{grid-column:1/-1;line-height:1.6}
.home-hero h1{position:relative;inset:auto;grid-column:1/-1;grid-row:2;max-width:100%}
.home-hero h1 span{font-size:clamp(2rem,10.8vw,11rem);line-height:1.04;letter-spacing:-.065em}
.home-hero h1 span:last-child{margin-left:0}
.home-hero-image{position:relative;inset:auto;grid-column:2;grid-row:3;width:100%;height:auto;overflow:visible;animation:none}
.home-hero-image img{height:clamp(280px,52vw,650px);object-fit:cover}
.home-hero-image::after{display:none}
.home-hero-image p{position:relative;inset:auto;padding:.9rem 0 0;line-height:1.6;overflow-wrap:anywhere}
.hero-project-switcher{position:relative;inset:auto;grid-column:1;grid-row:3;align-self:center;gap:1rem}
.hero-project-switcher button{line-height:1.6}
.home-hero-copy{position:relative;inset:auto;grid-column:1/-1;grid-row:4;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.home-hero-copy p{max-width:32rem}
.home-hero-copy a{font-size:.65rem;line-height:1.6}
.home-hero-copy a::after{content:none}
.home-hero-grid,.hero-orbit,.intro-grid,.paper-grid,.photo-grain,.aperture,.pencil-line{pointer-events:none;z-index:0}
.home-hero>*:not(.home-hero-grid):not(.hero-orbit){z-index:1}
.project-index .projects-intro,.sketches-intro,.photo-intro{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.8rem,4vw,3.5rem);min-height:clamp(420px,72svh,900px);padding:3rem 5vw;overflow:hidden}
.project-index .projects-intro h1,.sketches-intro h1,.photo-intro h1{position:relative;inset:auto;font-size:clamp(2.6rem,13vw,12rem);line-height:1.04;letter-spacing:-.065em;margin:0;overflow-wrap:anywhere;max-width:100%}
.projects-intro h1 span,.sketches-intro h1 em,.photo-intro h1 span{margin-left:0}
.projects-intro>p,.sketches-intro>p,.photo-intro>p{line-height:1.7;overflow-wrap:anywhere;z-index:1}
.project-index .projects-intro-copy,.sketches-intro-copy,.photo-intro-copy{position:relative;inset:auto;display:flex;gap:1.5rem;flex-wrap:wrap;line-height:1.6;z-index:1}
.hand-note,.exposure-readout{position:relative;inset:auto;transform:none;line-height:1.5;margin:0;align-self:flex-end}
.project-filters,.project-index .project-filters,.sketch-index,.photo-index{top:var(--site-header-height,64px)}
.project-breadcrumb{padding:2rem 5vw;line-height:1.5;flex-wrap:wrap}
.chapter-copy,.note-intro{top:calc(var(--site-header-height,64px) + 24px)}
.home-section-head>*,.featured-project>*,.home-note-block>*,.home-about>*,.sketch-collection-heading>*,.photo-collection-heading>*,.detail-chapter>*{min-width:0}
.home-section-head h2,.featured-project h3,.note-intro h3,.home-about h2,.sketch-collection-heading h2,.photo-collection-heading h2,.detail-chapter .chapter-copy h1,.sketch-end>p,.photo-end>p{line-height:1.06;overflow-wrap:anywhere}
.home-contact>a{font-size:clamp(2.4rem,11vw,12rem);line-height:1.05;gap:1rem;overflow-wrap:anywhere}
.sketch-end div,.photo-end div{flex-wrap:wrap;row-gap:1.5rem}
.site-footer{gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.site-footer p,.site-footer a{line-height:1.65;overflow-wrap:anywhere}
.sketch-collection,.photo-collection{scroll-margin-top:calc(var(--site-header-height,64px) + 90px)}
.art-page .sketch-collection{scroll-margin-top:calc(var(--site-header-height,64px) + 90px)}
.viewer-bar{gap:1rem;grid-template-columns:minmax(0,1fr) auto auto}
.viewer-bar p{line-height:1.5;overflow-wrap:anywhere}
@media(max-width:1100px){
 .site-header{grid-template-columns:1fr auto;min-height:78px;gap:.65rem;padding:.8rem 1rem}
 .site-header nav{display:flex;grid-column:1/-1;grid-row:2;justify-content:space-between;gap:.75rem;width:100%}
 .header-contact{grid-column:2;grid-row:1}
 .detail-chapter .chapter-copy h1{grid-column:1/-1}
 .featured-project{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
 .featured-project h3{font-size:clamp(2rem,5vw,4rem)}
 .featured-image{grid-column:2;grid-row:1/4;height:100%;min-height:260px}
 .featured-description{grid-column:1}.featured-project>b{grid-column:1;justify-self:start}
}
@media(max-width:760px){
 .site-header nav{column-gap:.65rem;row-gap:.6rem}.site-header nav a{font-size:clamp(.52rem,2.2vw,.7rem)}
 .home-hero{display:flex;flex-direction:column;padding:2rem 1rem;gap:1.8rem}
 .home-hero h1 span{font-size:clamp(2rem,11.5vw,5.5rem);line-height:1.08}
 .home-hero-image{width:100%;height:auto}.home-hero-image img{height:auto;aspect-ratio:4/5}
 .home-hero-copy{gap:1.5rem;display:flex;flex-direction:column}.home-hero-copy p{max-width:100%}
 .home-hero-copy a{font-size:.65rem}.home-hero-copy a::after{content:none}
 .hero-project-switcher{display:none}
 .project-index .projects-intro,.sketches-intro,.photo-intro{min-height:440px;padding:3rem 1rem;gap:2rem}
 .project-index .projects-intro h1,.sketches-intro h1,.photo-intro h1{font-size:clamp(2.5rem,13vw,6rem);line-height:1.08}
 .project-index .projects-intro-copy,.sketches-intro-copy,.photo-intro-copy{display:flex;flex-direction:column;gap:1rem}
 .project-filters,.project-index .project-filters,.sketch-index,.photo-index{top:var(--site-header-height,78px)}
 .project-breadcrumb{padding:1.75rem 1rem}.detail-chapter{padding-top:2rem}
 .detail-chapter .chapter-copy{display:block;position:static}.detail-chapter .chapter-copy h1{font-size:clamp(2.5rem,11vw,5rem);margin:1rem 0}
 .detail-chapter .chapter-copy dl{margin-top:1.5rem}
 .home-section-head h2,.note-intro h3{font-size:clamp(2.4rem,10vw,4.8rem)}
 .featured-project{grid-template-columns:minmax(0,1fr)}.featured-project h3{font-size:clamp(2.5rem,11vw,4rem)}
 .featured-image{grid-column:1;grid-row:auto;min-height:0;height:auto;aspect-ratio:4/3}.featured-project:hover .featured-image{height:auto;transform:none}
 .home-about h2{font-size:clamp(2.4rem,10vw,4.8rem)}
 .site-footer{grid-template-columns:minmax(0,1fr);gap:.8rem}.site-footer a:nth-child(2),.site-footer a:last-child{justify-self:start}
 .viewer-bar{grid-template-columns:minmax(0,1fr) auto}.viewer-bar p:nth-child(2){display:none}
 .process-films h3{flex-wrap:wrap;line-height:1.5}.drawing-set header{line-height:1.5}
}

/* The name intentionally overlaps the hero photograph; captions stay absent. */
.home-hero{display:flex;flex-direction:column;gap:2rem}
.hero-composition{display:grid;grid-template-columns:minmax(0,1fr);position:relative;isolation:isolate;padding-bottom:1rem}
.home-hero .hero-composition>h1{grid-area:1/1;align-self:end;position:relative;inset:auto;width:100%;max-width:100%;margin:0;z-index:3;transform:translateY(.4rem)}
.home-hero .hero-composition>h1 span{font-size:clamp(3rem,10.8vw,11rem);line-height:.98;letter-spacing:-.065em}
.home-hero .hero-composition>h1 span:last-child{margin-left:0}
.hero-composition .home-hero-image{grid-area:1/1;justify-self:end;align-self:start;position:relative;inset:auto;width:68%;height:clamp(400px,68svh,800px);margin:0;z-index:1;overflow:hidden}
.hero-composition .home-hero-image img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.hero-composition .home-hero-image::after{display:block;position:absolute;inset:0;content:'';background:linear-gradient(0deg,rgba(9,10,8,.35),transparent 55%);pointer-events:none}
.hero-composition .hero-project-switcher{grid-area:1/1;align-self:start;justify-self:start;position:relative;inset:auto;margin-top:3rem;max-width:28%;z-index:4}
.home-hero .home-hero-copy{margin-top:1rem}
@media(max-width:760px){
 .hero-composition{width:100%;padding-bottom:.5rem}
 .hero-composition .home-hero-image{width:88%;height:clamp(360px,58svh,600px)}
 .home-hero .hero-composition>h1 span{font-size:clamp(2rem,11.5vw,5.5rem);line-height:1.04}
 .hero-composition .hero-project-switcher{display:none}
 .home-hero .home-hero-copy{margin-top:1rem}
}