/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 0;
}
.project-carousel {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.intro-more-toggle {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:root {
  --bg: #f5f3ee;
  --text: #1a1a18;
  --text-light: #8a7e72;
  --accent: #1a1a18;
  --font-display: 'Cormorant', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* iOS Safari inflates text in landscape ("text autosizing") when a block is
     wide relative to the viewport. It hits the project descriptions hardest,
     because the collaboration and quotes blocks are pinned to 345px / 380px
     and stay narrow, so they are boosted less or not at all. 100% keeps the
     sizes actually set here. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
.project-credits a {
  cursor: pointer;
}
:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 3px;
}
/* =====================
   TABLE OF CONTENTS
   ===================== */
#toc {
  padding: 5rem 2rem 4rem;
  text-align: center;
}
.toc-inner {
  display: block;
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
.toc-block {
  margin-bottom: 3.5rem;
}
.toc-block--link {
  margin-bottom: 1.75rem;
}
.toc-category {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 2rem;
}
a.toc-category-link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}
a.toc-category-link:hover {
  color: var(--text);
  opacity: 0.75;
}
.toc-list {
  list-style: none;
}
.toc-list li {
  margin-bottom: 1.75rem;
}
.toc-list li a {
  display: flex;
  gap: 1.75rem;
  align-items: baseline;
}
.toc-list li a:hover .toc-title {
  opacity: 0.72;
}
.toc-num {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--text-light);
  min-width: 1.8rem;
  padding-top: 0.3rem;
}
.toc-titles {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.toc-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.85vw, 1.45rem);
  color: var(--text);
  transition: opacity 0.2s;
  line-height: 1.1;
}
.toc-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  color: #6b5d52;
  line-height: 1.2;
}
.toc-project-list {
  display: block;
  font-variant-caps: all-small-caps;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-light);
  margin-top: 0.3rem;
  margin-left: calc(1.8rem + 1.75rem);
}
.toc-about {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  transition: opacity 0.2s;
}
.toc-about:hover {
  opacity: 0.72;
}
/* =====================
   PROJECT SECTIONS
   ===================== */
.project-section {
  padding: 4rem 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.project-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(26,26,24,0.25);
  padding-bottom: 1.5rem;
}
.project-title-divider {
  width: 256px;
  max-width: 100%;
  margin: 1.5rem auto 4rem;
  height: 1px;
  background: linear-gradient(to right, transparent 0, rgba(26,26,24,0.25) 6px, rgba(26,26,24,0.25) calc(100% - 6px), transparent 100%);
}
.project-number {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--text-light);
  text-transform: uppercase;
  flex-shrink: 0;
}
.project-header-titles {
  text-align: left;
}
.project-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  width: fit-content;
}
.project-title-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.0rem, 1.65vw, 1.2rem);
  color: #6b5d52;
  margin-top: 0.5rem;
  line-height: 1.3;
}
.project-subtitle-meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.65rem;
}
.project-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
/* Project text */
.project-text {
  padding-top: 0.5rem;
}
.project-description {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #817468;
  margin-bottom: 2rem;
  text-align: justify;
  text-justify: inter-word;
  /* Finnish compounds are long; without hyphenation justify opens rivers.
     Relies on the lang attributes being correct. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.about-image {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 190px;
}
.about-portrait {
  width: 100%;
  height: auto;
  display: block;
}
.about-portrait--flip {
  transform: scaleY(-1);
}
.other-work-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 0;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.other-work-toggle:hover {
  color: var(--text);
}
/* =====================
   ABOUT
   ===================== */
.about-section {
  max-width: 880px !important;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 6rem;
}
.about-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: start;
}
.about-description {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.8;
  color: #817468;
  margin-bottom: 2.5rem;
  margin-top: 1.5rem;
}
/* =====================
   FOOTER
   ===================== */
footer {
  padding: 4rem 2.5rem;
  background-color: #fcefed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.footer-name {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a3b30;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
/* =====================
   LIGHTBOX
   ===================== */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 9, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* visibility:hidden also removes the close button from the tab order.
     opacity alone left it focusable while the lightbox was shut. */
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
#lightbox.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}
#lightbox-close {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  background: none;
  border: none;
  color: rgba(245, 243, 238, 0.5);
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 2;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
}
#lightbox-close:hover {
  color: rgba(245, 243, 238, 1);
}
#lightbox-prev,
#lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(245, 243, 238, 0.5);
  font-size: 1.2rem;
  z-index: 2;
  padding: 1rem 1.5rem;
  transition: color 0.2s;
  display: none;
}
#lightbox-prev { left: 0; }
#lightbox-next { right: 0; }
#lightbox-prev:hover,
#lightbox-next:hover {
  color: rgba(245, 243, 238, 1);
}
#lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}
#lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
#lightbox-content iframe {
  width: 82vw;
  height: 88vh;
  border: none;
  background: var(--bg);
}
.pdf-fallback {
  color: rgba(245, 243, 238, 0.7);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(245, 243, 238, 0.3);
  padding-bottom: 0.2rem;
}
/* =====================
   FADE IN ANIMATIONS
   ===================== */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* =====================
   BACK TO TOP
   ===================== */
.back-to-top {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.6rem;
  margin-bottom: 1.2rem;
  transition: color 0.2s;
}
.back-to-top:hover {
  color: var(--text);
}
/* =====================
   SANDBOX / KOKEILU
   ===================== */
/* Thumbnail gallery (option B) */
.thumb-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.thumb-gallery-main {
  width: 100%;
  aspect-ratio: 4/3;
  background: #e4dfd8;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}
.thumb-gallery-main:hover img {
  opacity: 0.9;
}
.thumb-gallery-strip {
  display: flex;
  gap: 0.35rem;
}
.thumb-gallery-item {
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: #e4dfd8;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.thumb-gallery-item.active,
.thumb-gallery-item:hover {
  opacity: 1;
}
.thumb-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* B2: Natural height */
.thumb-gallery-main--natural {
  aspect-ratio: unset;
  height: auto;
  align-items: flex-start;
}
.thumb-gallery-main--natural img {
  width: 100%;
  height: auto;
  object-fit: unset;
}
/* B3: Orientation-aware */
.thumb-gallery-main--adaptive {
  transition: aspect-ratio 0.25s ease;
}
.thumb-gallery-main--adaptive.landscape {
  aspect-ratio: 4 / 3;
}
.thumb-gallery-main--adaptive.portrait {
  aspect-ratio: 3 / 4;
}
.thumb-gallery-main--adaptive img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Header thumbnail strip */
.header-thumb {
  width: 44px;
  height: 44px;
  background: #ddd8d0;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.header-thumb:hover {
  opacity: 0.65;
}
.header-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =====================
   HERO GALLERY (option F)
   ===================== */
.project-body--hero-g {
  grid-template-columns: 1.5fr 1fr;
}
.project-text--hero-g {
  padding-top: calc(44px + 0.75rem);
}
.hero-strip {
  display: flex;
  gap: 0.35rem;
}
.hero-strip-item {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  cursor: pointer;
  background: #e4dfd8;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.hero-strip-item.active,
.hero-strip-item:hover { opacity: 1; }
.hero-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-strip-item--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2520;
}
.hero-main {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #e4dfd8;
  overflow: hidden;
  cursor: pointer;
}
.hero-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.hero-main:hover img { opacity: 0.92; }
.header-thumb.active {
  opacity: 1;
  outline: 1px solid rgba(26, 26, 24, 0.35);
  outline-offset: 2px;
}
.header-thumb--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2520;
}
/* =====================
   FULL-WIDTH GALLERY (options D & E)
   ===================== */
.full-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.full-gallery--with-text {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.full-gallery-media {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.full-gallery-main {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #e4dfd8;
  overflow: hidden;
  cursor: pointer;
}
.full-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.full-gallery-main:hover img { opacity: 0.92; }
.full-gallery-strip {
  display: flex;
  gap: 0.35rem;
}
.full-gallery-item {
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: #e4dfd8;
  opacity: 1;
  transition: opacity 0.2s;
}
.full-gallery-item:hover { opacity: 0.6; }
.full-gallery-item.active { opacity: 1; }
.full-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.full-gallery-item--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2520;
}
.full-gallery-text {
  padding-top: 0.5rem;
}
/* =====================
   EDITORIAL IMAGE GALLERY (no cropping)
   ===================== */
.img-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* =====================
   SMALL THUMBNAIL STRIPS
   ===================== */
.full-gallery-strip--sm .full-gallery-item {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
.thumb-gallery-strip--sm .thumb-gallery-item {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
/* =====================
   IMAGE CAPTIONS
   ===================== */
.project-link-note {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-top: 1rem;
  font-style: italic;
}
.project-credits {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-light);
  margin-top: 1.5rem;
  text-align: left;
}
.headline_pr {
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--text-light);
  text-align: center;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}
.carousel-slide-meta {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.9rem;
  text-align: center;
  line-height: 2;
}
.credit-role {
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-right: 0.5em;
}
.image-caption {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-top: 0.4rem;
  font-style: italic;
}
/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 768px) {
  .project-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .toc-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }
}
@media (max-width: 480px) {
  .project-section {
    padding: 5rem 1.5rem;
  }
  .collab-photographer {
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    margin-left: 0.25rem;
  }
  .project-description, .about-description {
    font-size: 0.8rem;
  }
  /* object-fit is handled by the .showing-frame rule below, not per-breakpoint */
}

@media (max-width: 768px) {
  /* Drop out of grid entirely rather than collapsing to one column. Project III
     pins its cells to explicit rows (grid-template-rows + grid-row on the
     wrappers) to keep each description and its credits together on desktop;
     forcing one column left those rows in place and the layout escaped the
     viewport. display:block makes every grid property inert, so the cells
     simply stack in document order: Finnish, then English, then credits.
     Desktop is untouched. */
  .two-col-grid, .about-body {
    display: block !important;
  }
  /* !important is needed: in Nimetön laji the grid children are the paragraphs
     themselves, and they carry an inline margin:0 for the desktop grid, which
     would otherwise win and leave Finnish and English touching. */
  .two-col-grid > *, .about-body > * {
    margin-bottom: 2rem !important;
  }
  .two-col-grid > *:last-child, .about-body > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* Solo image: caption aligns to image left edge */
.solo-image-section .thumb-gallery-main--natural { width: 100% !important; height: auto !important; display: block !important; }
.solo-image-section .thumb-gallery-main--natural img { width: 100% !important; height: auto !important; max-height: none !important; }

/* Solo caption: not italic, body font like credits */
.solo-image-section .image-caption { font-style: italic !important; font-family: var(--font-display) !important; font-size: 0.9rem !important; letter-spacing: 0.02em !important; text-align: left !important; padding-left: 10px !important; }
#tinkering .image-caption { text-align: left !important; padding-left: 10px !important; }

/* === WILD intro/TOC refinements === */
/* Reduce TOC section vertical padding (gaps handled by hairlines now) */
#toc { padding: 0.5rem 2rem 2rem !important; }
/* TOC items slightly smaller, Finnish name most */
#toc .toc-title { font-size: clamp(0.8rem, 1.5vw, 1.18rem) !important; }
#toc .toc-subtitle { font-size: 0.9rem !important; }
#toc .toc-num { font-size: 0.9rem !important; }

/* =====================
   COLLAB SLIDESHOW (In Collaboration + project galleries)
   shared classes replacing repeated inline styles
   ===================== */
.collab-slideshow {
  position: relative;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 3840 / 2160;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}
.collab-photographer {
  position: absolute;
  top: 0;
  margin-left: 0.5rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.55);
  pointer-events: none;
}
.collab-caption {
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  padding-left: 0 !important;
}
.collab-video-btn {
  display: block;
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.collab-slideshow-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 1.6s ease;
}


/* =====================================================
   PAGE-LEVEL OVERRIDES
   (moved from an inline <style> block in index.html's <head>
   during cleanup; kept in original order so cascade behaviour
   is unchanged since these still load after the rules above)
   ===================================================== */
    .project-body, .project-body--hero-g, .full-gallery--with-text { display: block !important; }
    .project-text, .project-text--hero-g, .full-gallery-text { margin-top: 0.5rem !important; width: 100%; max-width: 440px; margin-left: auto !important; margin-right: auto !important; }
    .toc-list li { margin-bottom: 1.3rem !important; }
    .toc-titles { gap: 0.22rem !important; }
    .toc-title { font-size: clamp(0.85rem, 1.65vw, 1.3rem) !important; }
    #toc { padding-top: 0 !important; padding-bottom: 0.5rem !important; }
    #toc .toc-block--link { margin-bottom: 0.5rem !important; }
    .toc-category { margin-bottom: 1.6rem !important; }
    .toc-block { margin-bottom: 2.5rem !important; }
    .project-header { margin-bottom: 1.5rem !important; width: fit-content; }
    .thumb-gallery { gap: 0.1rem !important; }
    /* Non-carousel galleries: image, caption, thumbnails, then arrows below */
    .project-media .thumb-gallery { display: flex; flex-direction: column; }
    .project-media .thumb-gallery .gallery-nav-wrap { display: contents !important; }
    .project-media .thumb-gallery .thumb-gallery-main { order: 1; }
    .project-media .thumb-gallery .image-caption { order: 2; }
    .project-media .thumb-gallery > .thumb-gallery-strip { order: 3; }
    .project-media .thumb-gallery .gallery-arrow-row { order: 4; }

    .headline { font-size: clamp(2.85rem, 3.8vw, 3.1rem) !important; font-style: normal !important; }
    .project-divider { width: 440px; max-width: 100%; margin: 4.5rem auto 0.8rem; height: 1px; background: linear-gradient(to right, transparent 0, rgba(26,26,24,0.15) 6px, rgba(26,26,24,0.15) calc(100% - 6px), transparent 100%); }
    @keyframes bgcycle {
      0%   { background-color: #ffffff; }
      20%  { background-color: #ffffff; }
      40%  { background-color: #fef2ef; }
      50%  { background-color: #faeee4; }
      58%  { background-color: #faf9f7; }
      100% { background-color: #ffffff; }
    }
    body { background-color: #ffffff; animation: bgcycle 240s linear infinite; }
    /* Colour cycle runs only on the content below the word-cloud */
    .bg-cycle { background-color: #ffffff; animation: bgcycle 240s linear infinite; }
    .ow-thumb { flex:1; aspect-ratio:1/1; background:#ddd8d0; cursor:pointer; overflow:hidden; opacity:0.55; transition:opacity 0.2s; }
    .ow-thumb.active, .ow-thumb:hover { opacity: 1; }
    .ow-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .commissioned-sub-header { text-align: center; margin-bottom: 0; }
    .commissioned-sub-header h3 { font-family: var(--font-display); font-style: normal; font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: #665a4f; margin-bottom: 0.3rem; }
    .commissioned-sub-header p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.0rem, 1.65vw, 1.2rem); color: #6b5d52; letter-spacing: normal; text-transform: none; }
    .commissioned-sub-section { margin-bottom: 6rem; }
    .commissioned-sub-section:last-of-type { margin-bottom: 0; }
    #commissioned .commissioned-sub-section > .project-header { border-bottom: 1px solid rgba(26,26,24,0.25) !important; margin-bottom: 2rem !important; }
    #commissioned .commissioned-sub-section > .project-header .project-title { font-size: clamp(1.1rem, 2vw, 1.7rem) !important; }
    #commissioned .other-work-item { padding-left: 0; }
    #commissioned .other-work-item .project-header { border-bottom: none !important; margin-bottom: 0.5rem !important; padding-bottom: 0 !important; }
    #commissioned .other-work-item .thumb-gallery { margin-top: 1rem; }
    #commissioned .other-work-item .project-title { font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important; }
    .cv-section-head { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); margin: 1.8rem 0 0.6rem; }
    .cv-table { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; }
    .cv-table td { font-family: var(--font-body); font-size: 0.79rem; line-height: 1.45; color: #6b5d52; padding: 0.15rem 0; vertical-align: top; }
    .cv-table td:first-child { width: 6rem; min-width: 6rem; color: var(--text-light); font-size: 0.78rem; padding-right: 1.2rem; white-space: nowrap; vertical-align: top; }
    .cv-toggle:hover { color: var(--text) !important; }
    #landing video { object-fit: cover !important; }
    footer { background-color: #fcefed !important; padding: 4rem 2.5rem 6rem !important; margin-top: 0 !important; position: relative; }
    .headline_pr { padding: 3rem 0 1.2rem !important; font-size: 1rem !important; letter-spacing: 0.22em !important; color: var(--text-light) !important; text-align: center !important; font-family: var(--font-body) !important; font-style: normal !important; font-weight: 400 !important; text-transform: uppercase !important; }
    .thumb-gallery-strip, .full-gallery-strip, .hero-strip { margin-bottom: 0.25rem !important; justify-content: center !important; width: 100% !important; }
    .thumb-gallery-strip--sm { align-self: flex-start; }
    .thumb-gallery-strip, .full-gallery-strip { flex-wrap: wrap !important; }
    .image-caption { font-size: 0.9rem !important; margin-top: 0.95rem !important; margin-bottom: 0.4rem !important; font-family: var(--font-display) !important; font-style: italic !important; letter-spacing: 0.02em !important; min-height: 1.2em; text-align: center !important; padding-left: 0 !important; box-sizing: border-box !important; }

    .gallery-nav-wrap { display: block; align-self: flex-start; }
    .gallery-arrow-row { display: flex; justify-content: center !important; gap: 2.5rem; padding: 0.05rem 0; }
    .gallery-arrow { background: none; border: none; cursor: pointer; font-size: 1.8rem; color: rgba(26,26,24,0.3); line-height: 1; font-family: Georgia, serif; padding: 0.2rem 0.5rem; transition: color 0.2s; }
    .gallery-arrow:hover { color: rgba(26,26,24,0.75); }
    /* Fixed frame for gallery images: portrait & landscape both fit inside the
       same set height (capped shorter so nav arrows stay near the fold). */
    .thumb-gallery-main--natural {
      background: none !important; overflow: hidden;
      display: flex !important; align-items: center !important; justify-content: center !important;
      height: 56vh; width: 100%;
    }
    .thumb-gallery-main--natural img {
      width: auto !important; height: auto; max-height: 56vh; max-width: 100%;
      object-fit: contain; display: block; margin: 0 auto;
    }
    /* Strip aligns to the same width as the main image, centred */
    .thumb-gallery-strip--sm { width: 100% !important; max-width: 100% !important; justify-content: center !important; margin: 0 auto 0.4rem !important; }
    .about-section { padding-top: 2rem !important; width: 640px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-bottom: 2.5rem !important; }
    .about-description { margin-top: 0 !important; }
    .full-gallery-media, .project-body--hero-g .project-media, .project-body .project-media { width: 120%; margin-left: -10%; }
    /* Portrait/natural galleries: same wide breakout as full-gallery, kept centred */
    .project-body .project-media:has(.thumb-gallery--natural) { width: 120%; margin-left: -10%; }
    .thumb-gallery--natural { width: 100%; margin: 0 auto; }
    .project-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; font-style: normal !important; color: #665a4f !important; }
    #project-1 .project-title, #project-2 .project-title, #project-3 .project-title,
    #project-4 .project-title, #project-5 .project-title, #commissioned-header .project-title {
      font-size: clamp(1.12rem, 1.85vw, 1.45rem) !important;
      color: #665a4f !important;
    }
    .toc-title { font-style: normal !important; }
    #project-1 .project-header, #project-2 .project-header, #project-3 .project-header,
    #project-4 .project-header, #project-5 .project-header {
      flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
      width: 120%; margin-left: -10%; box-sizing: border-box;
      border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important;
    }
    #project-1 .project-header *, #project-2 .project-header *, #project-3 .project-header *,
    #project-4 .project-header *, #project-5 .project-header * { text-align: center !important; }
    #project-1 .project-title, #project-2 .project-title, #project-3 .project-title,
    #project-4 .project-title, #project-5 .project-title { width: auto !important; margin: 0 auto !important; }
    #project-1 .project-title-sub, #project-2 .project-title-sub, #project-3 .project-title-sub,
    #project-4 .project-title-sub, #project-5 .project-title-sub { margin-top: 0.2rem !important; }
    #project-1 .project-text, #project-2 .project-text, #project-3 .project-text,
    #project-4 .project-text, #project-5 .project-text { margin-top: 2.6rem !important; }
    .about-numeral { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: var(--text-light); display: block; margin-bottom: 0.2rem; line-height: 1; }
    #toc { background: none; }
    /* --- Carousel: arrow gap + vertically centred image --- */
    .project-carousel { position: relative; }
    /* The whole image block gets a fixed tall frame so every slide's image
       is vertically centred within the same height, portrait or landscape. */
    .carousel-slide .thumb-gallery {
      min-height: 62vh;
      display: flex !important;
      flex-direction: column;
      justify-content: center !important;
    }
    /* Flatten the nav wrap so image, thumbnails and arrows order together */
    .carousel-slide .gallery-nav-wrap { display: contents !important; }
    .carousel-slide .thumb-gallery-main--natural { order: 1 !important; }
    .carousel-slide .image-caption { order: 2 !important; text-align: center !important; }
    .carousel-slide .collab-caption { order: unset !important; text-align: center !important; margin-top: 0.95rem !important; padding-left: 0 !important; }
    .carousel-slide .project-divider { margin-top: 3rem !important; }
    .carousel-slide .thumb-gallery > .thumb-gallery-strip { order: 3 !important; margin-top: 0.6rem !important; margin-bottom: 0.6rem !important; }
    .carousel-slide .gallery-arrow-row { order: 4 !important; margin: 0 !important; padding: 0.05rem 0 !important; }
    .carousel-slide .thumb-gallery-main--natural {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 1 1 auto;
      width: 100% !important;
    }
    .carousel-slide .thumb-gallery-main--natural img {
      max-height: 58vh; width: auto !important; height: auto; object-fit: contain; margin: 0 auto !important;
    }
    /* Image + caption share a shrink-to-image block so the caption's left edge
       lines up with the image's left edge (block itself stays centred). */
    .media-caption-block { width: fit-content; max-width: 100%; margin: 0 auto; }
    .media-caption-block .image-caption { text-align: left !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .carousel-slide .media-caption-block { order: 1 !important; display: flex; flex-direction: column; }
    /* A tad more breathing room below the arrows before the description */
    .carousel-slide > .project-text { margin-top: 1.6rem !important; }
    .carousel-nav {
      display: flex; align-items: center; justify-content: center; gap: 0.8rem;
      margin-top: 0.4rem; font-family: var(--font-body);
    }
    .commissioned-sub-section .project-title-divider { margin-bottom: 1.8rem; }
    #commissioned-header {
      flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; width: auto;
    }
    #commissioned-header .project-header-titles { text-align: center; }
    #commissioned-header .project-title { width: auto; margin: 0 auto; }
    .carousel-btn {
      background: none; border: none; cursor: pointer; font-size: 1.4rem;
      color: rgba(26,26,24,0.4); line-height: 1; font-family: Georgia, serif; font-weight: 300;
      transition: color 0.2s;
      min-width: 44px; min-height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .carousel-btn:hover { color: rgba(26,26,24,0.8); }
    .carousel-counter {
      font-size: 0.9rem; letter-spacing: 0.14em; color: var(--text-light); min-width: 3.5rem; text-align: center;
    }
    /* Per-slide title block so each carousel item announces itself */
    .carousel-slide-head { margin: 0 auto 1.2rem; text-align: center; width: 640px; max-width: 100%; }
    .carousel-item-title {
      font-family: var(--font-display); font-style: normal; font-weight: 300;
      font-size: 1.35rem; line-height: 1.15; color: #6b5d52;
    }
    .carousel-item-sub {
      font-family: var(--font-display); font-style: italic; font-weight: 300;
      font-size: 1.35rem; color: #6b5d52; line-height: 1.2;
    }
    .carousel-slide-meta {
      font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-light); margin-top: 0.9rem; text-align: center;
      line-height: 1.8;
    }
    /* Thumbnails: single row when there's space, wrap naturally when narrower */
    .full-gallery-strip--sm, .thumb-gallery-strip--sm { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; flex-wrap: wrap !important; }
    .full-gallery-media .full-gallery-strip { margin-top: 1.1rem !important; margin-bottom: 1.4rem !important; }
    .project-media .thumb-gallery > .thumb-gallery-strip { margin-top: 1.1rem !important; margin-bottom: 1.4rem !important; }
    /* Uniform gap between gallery arrows and body text across all projects */
    .project-body .project-text, .full-gallery--with-text .project-text { padding-top: 0 !important; margin-top: 1.6rem !important; }
    /* Read-more toggle (project long text) */
    .read-more-toggle { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); padding: 0; margin: 0.4rem 0 1.2rem; transition: color 0.2s; }
    .read-more-toggle:hover { color: var(--text); }
    .read-more-content[hidden] { display: none; }
    /* === Fixed bg video shows through side stripes === */
    html, body { background: transparent !important; }
    .bg-cycle { position: relative; z-index: 1; }
    footer { position: relative; z-index: 1; }
    /* Intro holds fixed proportions; snaps narrower only at breakpoints */
    @media (max-width: 640px) {
      .bg-cycle { margin: 30px 24px 0 !important; }
      .intro-wide { width: 300px !important; }
      .intro-narrow { width: 270px !important; }
      .collab-slideshow { width: 100% !important; }
    }
    @media (max-width: 380px) {
      .bg-cycle { margin: 20px 14px 0 !important; }
      .intro-wide, .intro-narrow { width: 92% !important; }
    }
    /* Thumbnail strip: wrap onto next row after 7 thumbnails */
    .full-gallery-strip--sm, .thumb-gallery-strip--sm {
      flex-wrap: wrap !important;
      max-width: 342px !important;
      margin-left: auto !important; margin-right: auto !important;
      row-gap: 0.35rem;
    }

/* =====================
   COLLAPSIBLE ESITYKSET/CREDITS (materials + exhibitions, with more/close)
   ===================== */
.credits-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.credits-clamp.open { -webkit-line-clamp: unset; display: block; overflow: visible; }
.credits-more-btn, .credits-close-btn {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light);
  padding: 0.3rem 0 0; transition: color 0.2s; display: inline-block;
}
.credits-more-btn:hover, .credits-close-btn:hover { color: var(--text); }
.credits-close-btn { display: none; }
.credits-close-btn.show { display: inline-block; }

/* index2 test: gradient mask on the bg-sheet — solid where the widest images live (~85%
   of the sheet's width), fading toward the outer edges where content never reaches anyway */
#bg-sheet {
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0.92) 0%, rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%, rgba(0,0,0,0.92) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0.92) 0%, rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%, rgba(0,0,0,0.92) 100%);
}

/* =====================
   CODA CONTROLS
   Moved out of inline styles so a media query can reach them. The container
   keeps only inline opacity, which the IntersectionObserver animates.
   ===================== */
#coda-controls {
  position: fixed;
  bottom: 2rem;
  right: 3.5rem;
  display: flex;
  gap: 1.8rem;
  align-items: center;
  z-index: 5;
  transition: opacity 0.8s ease;
}
.coda-btn {
  background: none;
  border: none;
  color: rgba(245, 243, 238, 0.85);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  transition: color 0.2s;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.coda-btn:hover { color: rgba(245, 243, 238, 1); }

/* Three labelled buttons at 1.8rem gaps overflow a phone screen. */
@media (max-width: 620px) {
  #coda-controls {
    right: 1.25rem;
    left: 1.25rem;
    bottom: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.4rem;
  }
  .coda-btn { font-size: 0.58rem; letter-spacing: 0.12em; }
}


/* =====================
   REDUCED MOTION
   Honour the OS-level setting: no fades, no drifts, no auto-playing video,
   no background colour cycle. Content stays fully visible and reachable.
   ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
  #lightbox { transition: none !important; }
  /* Keep visibility toggles instant rather than zero-duration-delayed. */
  #lightbox { transition: opacity 0.001ms, visibility 0s !important; }
}

/* =====================
   ENGLISH TEXT IN THE COLLABORATIVE SECTIONS
   Set italic to distinguish it from the Finnish. Work titles inside then go
   roman: the print convention for a title within italic text, and the only way
   they stay legible as titles.
   ===================== */
.en-italic { font-style: italic; }
.en-italic em,
.en-italic cite { font-style: normal; }


/* =====================
   MOBILE CORRECTIONS
   ===================== */

/* Background video: fills the ground while still, so no black surround.
   While playing it switches to the whole frame, so the image stays readable. */
/* Shown before the video has any frames to draw, and behind the letterbox
   bars while it plays on a phone. A dusty pale rose rather than black — it
   sits with the paper of the sheet instead of punching a hole behind it. */
#bg-video { object-fit: cover; transition: none; background: #e8dcd8; }
/* Desktop keeps the video filling the ground at all times. Only on narrow
   screens does playing switch to the whole frame, where cover crops it past
   recognition. */
@media (max-width: 768px) {
  /* Letterboxed while playing, so the bars are visible — paper rather than
     black, so the video reads as sitting on the page instead of in a box. */
  #bg-video.showing-frame { object-fit: contain; background: var(--bg); }
}

/* The quotes column sat flush to the sheet edges while every other section
   is inset. Match the section padding. */
.quotes-section { padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box; }

/* Portraits: centre the column rather than letting it hang left. */
@media (max-width: 768px) {
  .about-image { margin-left: auto !important; margin-right: auto !important; }
  .about-body { justify-items: center; }
}

/* Photographer credits run vertically beside the image. At phone width they
   were competing with the artwork; drop them right down. They are repeated in
   the lightbox, so legibility here is not load-bearing. */
@media (max-width: 620px) {
  .collab-photographer {
    font-size: 0.32rem !important;
    letter-spacing: 0.06em !important;
    margin-left: 0.15rem !important;
    opacity: 0.55;
  }
}

/* Intro image: the gap under the word cloud used to come from two literal
   <br> tags inside the image container. Those are gone, so the space is set
   here instead — as margin on the section, where it belongs, and at every
   width rather than only on phones. */
.solo-image-section { margin-top: 3rem !important; }
@media (max-width: 620px) {
  .solo-image-section { margin-top: 1.6rem !important; }
}

/* Belt and braces for the play/pause glyphs: even with U+FE0E some iOS builds
   reach for the emoji font first. Naming text fonts explicitly keeps them as
   type rather than as a coloured sticker. */
.collab-video-btn, .coda-btn {
  font-variant-emoji: text;
}

/* =====================================================
   MOBILE: NOTHING WIDER THAN THE SCREEN
   The desktop layout deliberately breaks images out 20% wider than their
   column. At phone width the column is already the full sheet, so that
   breakout pushes the document wider than the viewport — and once the page
   can scroll sideways, every justified paragraph is laid out to the wider
   box and runs off the right edge.
   ===================================================== */
@media (max-width: 768px) {

  /* 1. Cancel the breakout. This is the root cause. */
  .full-gallery-media,
  .project-body--hero-g .project-media,
  .project-body .project-media,
  .project-body .project-media:has(.thumb-gallery--natural) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* 2. No text column may exceed its container, whatever the container is. */
  .project-text,
  .project-text--hero-g,
  .full-gallery-text,
  .project-description,
  .project-credits,
  .about-description,
  .collab-caption,
  .image-caption {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 3. Headers stay shrink-wrapped (width: fit-content); the cap only stops
        a long uppercase meta line escaping the viewport. */
  .project-header {
    max-width: 100% !important;
  }

  /* 4. Long unbreakable strings — the email address, URLs — force a minimum
        width on their container. overflow-wrap alone breaks only where a word
        genuinely cannot fit; word-break would also split Finnish compounds at
        arbitrary points, so it is deliberately not used. */
  .project-description,
  .project-credits,
  .about-description,
  .cv-table td,
  .colophon {
    overflow-wrap: break-word;
  }
}


/* =====================================================
   MOBILE: HEADER CENTRING AND TOP SPACE
   ===================================================== */
@media (max-width: 768px) {
  /* Projects I–V give their headers the same 120% breakout the images use,
     which on a phone makes the header wider than the screen and shifts it
     10% left — so the centred title reads as off-centre and the meta line
     gets clipped. Cancel it here as we do for .project-media. */
  #project-1 .project-header, #project-2 .project-header, #project-3 .project-header,
  #project-4 .project-header, #project-5 .project-header {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* 11rem of air above the word cloud is a lot of a phone screen. */
  .intro-topspace { height: 4rem !important; }
}

/* Fallback shown by the onerror on the intro and outro images. Without a rule
   the placeholder was an invisible empty box, so a missing file looked like a
   layout bug rather than a gap. */
.img-placeholder {
  display: block;
  width: 100%;
  background: rgba(138, 126, 114, 0.08);
  border: 1px solid rgba(138, 126, 114, 0.18);
}


/* =====================================================
   MOBILE CORRECTIONS, ROUND 2
   ===================================================== */
@media (max-width: 768px) {
  /* The coda controls were white for sitting over a dark video. On phones the
     video letterboxes against paper, so white vanished. Match the body text. */
  .coda-btn {
    color: var(--text-light) !important;
    text-shadow: none !important;
  }
  .coda-btn:hover { color: var(--text) !important; }

  /* .word-cloud-section is a fixed 345px that collapses to max-width:100% on a
     phone — so it sits flush to the sheet edge while every project section is
     inset by 1.5rem. Give it the same inset. Affects the opening word cloud
     and the In Collaboration introduction, which share this class. */
  .word-cloud-section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
  }
}

/* =====================================================
   PHONE IN LANDSCAPE
   A sideways iPhone reports ~850–930px wide, so every max-width: 768px rule
   above switches off and it gets the desktop layout on a phone-sized screen.
   Targeting orientation + height catches it regardless of pixel width: a
   phone held sideways is always short, a laptop never is.
   ===================================================== */
@media (orientation: landscape) and (max-height: 520px) {

  /* Bio: two columns, portraits left, text right — as on desktop. The
     centring applied for portrait orientation would otherwise persist. */
  .about-body {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 2.5rem !important;
    align-items: start;
    justify-items: start !important;
  }
  .about-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 150px;
  }
  .about-body > * { margin-bottom: 0 !important; }

  /* The video fills the screen in landscape, so the controls sit on the
     footage rather than on paper — off-white with a shadow, as on desktop.
     This overrides the brown set for portrait above. */
  .coda-btn {
    color: rgba(245, 243, 238, 0.85) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  }
  .coda-btn:hover { color: rgba(245, 243, 238, 1) !important; }

  /* Fill the screen while playing. The portrait rule letterboxes to keep the
     whole frame visible on a tall narrow screen; sideways the aspect already
     matches, so contain would only add bars. */
  #bg-video,
  #bg-video.showing-frame {
    object-fit: cover !important;
  }

  /* The controls sit low on an already short screen; lift them clear. */
  #coda-controls {
    bottom: 1rem;
    right: 2rem;
    gap: 1.4rem;
  }
}