* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- Base ---------- */

/* Default is the light index page. Project pages add class="dark" to the body. */
html {
  background: #FFFFFF;
  scrollbar-gutter: stable;
}

body {
  background: #FFFFFF;
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

html:has(body.dark) {
  background: #000000;
}

body.dark {
  background: #000000;
  color: #FFFFFF;
}

/* ---------- Logo ---------- */

/* Pinned top left, stays put while the page scrolls under it */
.logo {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: block;
}

.logo img {
  width: 84px;
  height: auto;
  display: block;
}

/* Logo file is black. Invert it on dark pages so it reads white. */
body.dark .logo img {
  filter: invert(1);
}

/* ---------- About ---------- */

/* Fixed bottom right, mirrors the logo. Expands upward on click */
.about {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10;
  width: 280px;
  max-width: calc(100% - 48px);
  text-align: right;
  color: inherit;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.about-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.about.open .about-text {
  max-height: 400px;
  opacity: 1;
}

.about-text p {
  padding-bottom: 12px;
}

.about-toggle {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Larger invisible tap areas. The padding and margin cancel out,
   so the text stays where it is. */
.about-toggle {
  padding: 12px 16px 20px;
  margin: -12px -16px -20px;
  touch-action: manipulation;
}

.about-text a {
  display: inline-block;
  padding: 12px 16px;
  margin: -12px -16px;
  touch-action: manipulation;
}

/* White box behind the About text, only while open */
.about::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.about.open::before {
  opacity: 1;
}

/* ---------- Landing page ---------- */

/* Images run down the page with margin around and space between */
.stream {
  padding: 96px 96px 96px 96px;
}

.stream a,
.stream img,
.stream video {
  display: block;
}

.stream img,
.stream video {
  width: 100%;
  height: auto;
}

/* Caption under each image. Same on desktop and mobile. */
.work {
  position: relative;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.work-info {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 32px 0;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.work-meta span::after {
  content: ", ";
}

.work-meta span:last-child::after {
  content: "";
}

/* ---------- Hover version, kept for later ----------
   To bring it back: delete the .work-info and .work-meta rules
   above, then uncomment everything between these markers.

.work-info {
  position: absolute;
  bottom: 40px;
  left: -48px;
  width: 340px;
  max-width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 14px 16px;
  background: #FFFFFF;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.work:hover .work-info {
  opacity: 1;
}

.work-meta span {
  display: block;
  line-height: 1.4;
}

---------- end hover version ---------- */

/* Images run one after another with no gap */
.stream > * {
  margin: 0 auto;
}

@media (max-width: 700px) {
  .stream {
    padding: 96px 16px 32px 16px;
  }

  .stream > * {
    margin: 0 auto;
  }
}

/* ---------- Project pages ---------- */

.project {
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* Text column stays pinned while images scroll past */
.project-text {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 96px 24px 24px 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.4;
}

/* Title and meta match the index captions */
.project-text h1,
.project-text .meta {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-text .meta {
  margin-bottom: 24px;
}

.project-text p {
  margin-bottom: 12px;
}

/* Related links at the foot of the text column */
.related {
  margin-top: 24px;
}

.related h2 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Links in the project text column match the About page links */
.related a,
.inquire-text a {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
}

.project-images img,
.project-images video {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: single column, text on top, images below */
@media (max-width: 700px) {
  .project {
    grid-template-columns: 1fr;
  }

  .project-text {
    position: static;
    height: auto;
    padding: 96px 16px 32px 16px;
  }
}

/* ---------- Project index overlay ----------
   Rows reuse .work-info / .work-meta / .work-type,
   so they inherit the caption type styling. */

/* Full width so the scroll bar sits at the window edge.
   Side padding keeps the rows in the 900px centered column. */
.index {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 96px max(0px, calc((100% - 900px) / 2)) 48px;
  background: #fff;
  z-index: 20;
}

body.dark .index {
  background: #000;
}

.index[hidden] {
  display: none;
}

/* Fade the overlay in when it opens */
.index:not([hidden]) {
  animation: index-fade 0.3s ease;
}

@keyframes index-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade out on close. index.js hides the overlay once this ends */
.index.closing {
  animation: index-fade-out 0.3s ease forwards;
}

@keyframes index-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Hover preview on the landing and project page index. Centered
   over the list. Desktop only. */
.index-preview {
  display: none;
}

@media (hover: hover) {
  .index-preview {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%);
    z-index: 25;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .index-preview.show {
    opacity: 1;
  }
}

/* On project pages, center the preview over the image column */
@media (hover: hover) and (min-width: 701px) {
  .project ~ .index-preview {
    left: calc(50% + 140px);
  }
}

.index-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 30;
  background: none;
  border: 0;
  padding: 0;
  font: bold 14px/1.4 Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

/* Landing page: larger Index and About buttons */
body.landing .index-toggle,
body.landing .about-toggle {
  font-size: 16px;
}

body.index-open {
  overflow: hidden;
}

/* Drop the reserved page gutter while the index is open,
   so the index scroll bar takes its place at the edge */
html:has(body.index-open) {
  scrollbar-gutter: auto;
}

body.index-open .logo,
body.index-open .about {
  z-index: 30;
}

/* Each project is two lines:
   NAME ........ CATEGORY
   LOCATION ........ YEAR
   with a line between projects */

.index-row {
  display: block;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.index-row + .index-row {
  border-top: 1px solid currentColor;
}

.index-row .work-info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name type"
    "place year";
  gap: 0 24px;
  padding: 0;
}

.index-row .work-meta {
  display: contents;
}

.index-row .work-meta span::after {
  content: "";
}

.index-row .work-meta span:nth-child(1) {
  grid-area: name;
}

.index-row .work-meta span:nth-child(2) {
  grid-area: place;
}

.index-row .work-meta span:nth-child(3) {
  grid-area: year;
  text-align: right;
}

.index-row .work-type {
  grid-area: type;
  text-align: right;
}

a.index-row:hover .work-meta span:first-child {
  text-decoration: underline;
}

/* On project pages, the index covers the image column */
.project ~ .index {
  left: 280px;
  right: 0;
  padding: 96px 24px 48px 24px;
}

@media (max-width: 700px) {
  .project ~ .index {
    left: 0;
    padding: 96px 16px 48px 16px;
  }
}

/* ---------- Inquire ----------
   Sits at the foot of the project text column.
   Toggle matches the title and meta; email expands below it. */

.inquire {
  margin-top: 24px;
}

.inquire-toggle {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: bold 12px/1.4 Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.inquire-text {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
}

.inquire.open .inquire-text {
  max-height: 100px;
  opacity: 1;
  visibility: visible;
}

.inquire-text a {
  padding-top: 4px;
}

.praise.open .inquire-text {
  max-height: 4000px;
}

.praise .inquire-text p:first-child {
  padding-top: 12px;
}

/* ---------- About page ---------- */

.about-text a {
  color: inherit;
  text-decoration: underline;
}

.about-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 160px 0 96px 0;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.about-intro p {
  margin-bottom: 12px;
}

.about-section {
  margin-top: 48px;
}

.about-section summary {
  list-style: none;
  cursor: pointer;
  text-decoration: underline;
}

.about-section summary::-webkit-details-marker {
  display: none;
}

.about-section[open] summary {
  margin-bottom: 12px;
}

.about-section a {
  color: inherit;
  text-decoration: underline;
}

.person {
  margin-bottom: 24px;
}

.person h3 {
  font-size: inherit;
  font-weight: inherit;
}

/* People: bio text in sentence case, with space between paragraphs */
.person p + p {
  text-transform: none;
  font-weight: normal;
}

.person p + p + p {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .about-main {
    padding: 160px 16px 32px 16px;
  }
}

/* Lazy images fade in when decoded and on screen */
.stream img[loading="lazy"],
.project-images img[loading="lazy"] {
  transition: opacity 0.5s ease;
}

.fade-images .stream img[loading="lazy"]:not(.loaded),
.fade-images .project-images img[loading="lazy"]:not(.loaded) {
  opacity: 0;
}

/* The first image on a project page fades in on arrival */
.project-images > :first-child {
  animation: index-fade 0.5s ease;
}