/* =========================================================
   HOME — index.html (loaded after base.css)
   1. Biography + shared link hover
   2. Section switching (one section shown at a time)
   3. Writing — major books (thumbnails + carousels)
   4. Writing — collective books + articles
   5. Exhibiting
   6. Lecturing + Convening (archive grids)
   ========================================================= */


/* 1. Biography + shared link hover
   ========================================================= */
.website-design-credit {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

/* Text links in every section lose their underline and blur on hover. */
.writing-actions a:hover,
.writing-row-action a:hover,
.major-book-links a:hover,
.exhibition-description a:hover,
.exhibition-links a:hover,
.exhibition-iteration-panel a:hover,
.archive-main a:hover,
.archive-meta a:hover,
.lecture-grid .lecture-actions a:hover,
.convening-extra a:hover {
  text-decoration: none;
  filter: blur(1px);
}

/* Shared click zones of every carousel: left half = previous, right half = next. */
.major-book-carousel,
.exhibition-carousel {
  outline: none;
  cursor: e-resize;
}

.major-book-carousel.is-previous-zone,
.exhibition-carousel.is-previous-zone {
  cursor: w-resize;
}

.major-book-carousel.has-single-image,
.exhibition-carousel.has-single-image {
  cursor: default;
}


/* 2. Section switching
   ========================================================= */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.page-section.is-active {
  display: block;
}

.page-section.is-visible {
  opacity: 1;
}

/* First paint, before home.js runs: show the section named in the address
   (html[data-section] is set by js/preferences.js, removed by home.js). */
html[data-section="home"] .page-section[data-section="home"],
html[data-section="writing"] .page-section[data-section="writing"],
html[data-section="exhibiting"] .page-section[data-section="exhibiting"],
html[data-section="lecturing"] .page-section[data-section="lecturing"],
html[data-section="teaching"] .page-section[data-section="teaching"],
html[data-section="convening"] .page-section[data-section="convening"],
html[data-section="mentoring"] .page-section[data-section="mentoring"] {
  display: block;
  opacity: 1;
}

.page-section.is-leaving {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.theme-nav a.is-current-section {
  transform: skewX(-10deg);
}

@media (prefers-reduced-motion: reduce) {
  .page-section {
    transition: none;
  }
}


/* 3. Writing — major books
   ========================================================= */

/* Sticky row of covers */
.major-book-thumbnails {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--fg);
}

.major-book-thumbnail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 1 72px;
  min-width: 56px;
  height: 60px;
  text-decoration: none !important;
}

.major-book-thumbnail img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  filter: drop-shadow(var(--shadow-small));
  transition: transform 0.35s ease;
}

.major-book-thumbnail:hover img,
.major-book-thumbnail:focus-visible img {
  transform: scale(0.93);
}

.major-book-thumbnail:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

/* One book */
.major-book {
  border-bottom: 1px solid var(--fg);
}

.major-book-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 30px;
  align-items: baseline;
  margin: 0 0 30px;
  padding-top: 15px;
}

.major-book-title {
  max-width: 900px;
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
  text-align: left;
}

.major-book-year {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
  text-align: right;
}

.major-book-carousel {
  position: relative;
  width: 100%;
  min-height: clamp(285px, 42vw, 495px);
  margin: 0 0 30px;
  user-select: none;
}

.major-book-stage {
  position: relative;
  width: 100%;
  height: clamp(285px, 42vw, 480px);
}

.major-book-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.major-book-slide.is-active {
  opacity: 1;
}

.major-book-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 100%;
  /* Grey (multiplied) with the shadow; colour, same shadow, on hover (only the
     colour is animated: the shadow is drawn once). */
  filter: grayscale(100%);
  box-shadow: var(--shadow);
  mix-blend-mode: multiply;
  transition: filter var(--colour-fade);
}

.major-book-carousel:hover .major-book-slide img,
.major-book-carousel:focus-visible .major-book-slide img {
  filter: grayscale(0%);
  mix-blend-mode: normal;
}

.major-book-description {
  margin: 0 0 30px;
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
  letter-spacing: -0.01em;
}

.major-book-description p {
  padding: 0 0 var(--paragraph-gap);
  font-size: inherit;
  line-height: inherit;
}

.major-book-description p:last-child {
  padding-bottom: 0;
}

.major-book-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 6vw, 90px);
  margin: 0 0 15px;
}

.major-book-column {
  min-width: 0;
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.major-book-column > div {
  margin-bottom: 2px;
}

.major-book-spaced {
  margin-top: 1.25em;
}


.major-book-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.25em;
}

@media screen and (max-width: 700px) {
  .major-book-thumbnails {
    gap: 10px;
    padding: 10px 0;
  }

  .major-book-thumbnail {
    flex-basis: 58px;
    min-width: 48px;
    height: 50px;
  }

  .major-book-header { gap: 15px; }
  .major-book-carousel { min-height: 263px; }
  .major-book-stage { height: 263px; }
  .major-book-information { grid-template-columns: 1fr; gap: 24px; }
}


/* 4. Writing — collective books + articles
   ========================================================= */

/* Collective books: two-column grid of cover + citation */
.writing-books--secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.writing-books--secondary .writing-book {
  display: grid;
  grid-template-columns: minmax(55px, auto) minmax(125px, 0.8fr) minmax(0, 1.4fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
  min-height: 390px;
  padding: 20px 24px 24px;
  box-shadow:
    1px 0 0 var(--fg),
    0 1px 0 var(--fg);
}

.writing-books--secondary .writing-book-date,
.writing-books--secondary .writing-citation,
.writing-books--secondary .writing-actions {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.writing-books--secondary .writing-cover {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 280px;
}

.writing-books--secondary .writing-cover a {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.writing-books--secondary .writing-cover img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  /* Grey (multiplied) with the shadow; colour, same shadow, on hover (only the
     colour is animated: the shadow is drawn once). */
  filter: grayscale(100%);
  box-shadow: var(--shadow);
  mix-blend-mode: multiply;
  transition: filter var(--colour-fade);
}

.writing-books--secondary .writing-cover a:hover img,
.writing-books--secondary .writing-cover a:focus-visible img {
  filter: grayscale(0%);
  mix-blend-mode: normal;
}

.writing-books--secondary .writing-cover a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

.writing-books--secondary .writing-book-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.writing-actions {
  margin-top: auto;
  padding-top: 18px;
}

/* Articles: date / title + citation / link */
.writing-library {
  margin-bottom: 15px;
}

.writing-articles {
  display: grid;
  grid-template-columns: 1fr;
}

.writing-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.7fr) minmax(0, 3.1fr) minmax(90px, 0.65fr);
  gap: 30px;
  padding: 15px 0;
  border-top: 1px solid var(--fg);
}

.writing-row-main {
  min-width: 0;
}

.writing-row-action {
  text-align: right;
}

.writing-title {
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading-text);
}

.writing-row-date,
.writing-row-action,
.writing-citation {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.writing-citation {
  margin-top: 12px;
}

.writing-row-main .writing-citation {
  margin-top: 8px;
}

/* One column: on narrow screens, or when home.js finds that enlarged text
   no longer fits in two (data-columns="1"). */
.writing-books--secondary[data-columns="1"] {
  grid-template-columns: 1fr;
}

.writing-books--secondary[data-columns="1"] .writing-book {
  min-height: 0;
}

@media screen and (max-width: 900px) {
  .writing-books--secondary {
    grid-template-columns: 1fr;
  }

  .writing-books--secondary .writing-book {
    min-height: 0;
  }
}

@media screen and (max-width: 640px) {
  /* Covers sit flush left: let their drop shadow spill into the margin. */
  .writing-books--secondary {
    overflow: visible;
  }

  .writing-books--secondary .writing-book {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 22px;
    box-shadow: 0 1px 0 var(--fg);
  }

  .writing-books--secondary .writing-cover {
    width: min(190px, 70vw);
    height: 260px;
    justify-content: flex-start;
  }

  .writing-books--secondary .writing-actions {
    margin-top: 4px;
    padding-top: 10px;
  }

  .writing-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .writing-row-action {
    text-align: left;
  }
}


/* 5. Exhibiting
   A project = header, carousel (or single image), description + facts,
   and for travelling exhibitions an accordion of iterations.
   ========================================================= */
.exhibition-projects {
  margin-bottom: 15px;
}

.exhibition-project {
  padding: 18px 0 30px;
  border-bottom: 1px solid var(--fg);
}

.exhibition-project:last-child {
  border-bottom: none;
}

.exhibition-project-header {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(0, 2fr) minmax(210px, 1fr);
  gap: 30px;
  align-items: start;
}

.exhibition-project-year,
.exhibition-iteration-button {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.exhibition-project-title {
  min-width: 0;
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
  text-align: left;
}

.exhibition-project-meta {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
  text-align: right;
}

/* Carousel (height is refined by JS to the active image's ratio) */
.exhibition-carousel {
  position: relative;
  width: 100%;
  margin-top: 18px;
}

.exhibition-carousel-stage {
  position: relative;
  width: 100%;
  height: clamp(260px, 46vw, 720px);
  overflow: hidden;
  background: var(--bg);
}

.exhibition-slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.exhibition-slide.is-active {
  display: flex;
}

.exhibition-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.exhibition-carousel-footer {
  max-width: 100%;
  padding-top: 7px;
  font-size: calc(var(--size-note) * var(--text-scale));
  line-height: var(--leading);
  text-align: center;
}

/* Single image instead of a carousel */
.exhibition-single-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
}

.exhibition-single-visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 720px);
  object-fit: contain;
}

/* Description + facts */
.exhibition-project-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr);
  gap: 30px;
  padding-top: 18px;
}

.exhibition-project--text-only .exhibition-project-body {
  padding-top: 14px;
}

.exhibition-description p {
  padding: 0 0 var(--paragraph-gap);
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
}

.exhibition-description p:last-child {
  padding-bottom: 0;
}

.exhibition-facts,
.exhibition-links {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.exhibition-facts > div + div {
  margin-top: 2px;
}

.exhibition-facts > .exhibition-facts-spaced {
  margin-top: 1.25em;
}

/* Names in credits (books + exhibitions): dotted underline, as they are not links. */
.credit-name {
  text-decoration: underline dotted 1.5px;
  text-underline-offset: 0.15em;
}


.exhibition-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Travelling exhibitions: iteration accordion */
.exhibition-iterations {
  margin-top: 18px;
}

.exhibition-iteration-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.1em;
  gap: 24px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1.5px dotted var(--fg);
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.exhibition-iteration-button:first-of-type {
  border-top: none;
}

.exhibition-iteration-button::after {
  content: "+";
  text-align: right;
}

.exhibition-iteration-button.is-active::after {
  content: "−";
}

.exhibition-iteration-button span:last-child {
  text-align: right;
  white-space: nowrap;
}

.exhibition-iteration-button:hover span:first-child,
.exhibition-iteration-button:focus-visible span:first-child,
.exhibition-iteration-button.is-active span:first-child {
  transform: skewX(-10deg);
  transform-origin: left center;
}

.exhibition-iteration-button:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

.exhibition-iteration-panels {
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.exhibition-iteration-panel {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.exhibition-iteration-panel p {
  padding: 6px 0 0;
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

@media screen and (max-width: 860px) {
  .exhibition-project-header {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px 20px;
  }

  .exhibition-project-title {
    grid-column: 2;
  }

  .exhibition-project-year {
    grid-column: 1;
    grid-row: 1;
  }

  .exhibition-project-meta {
    grid-column: 2;
    text-align: left;
  }

  .exhibition-carousel-stage {
    height: clamp(240px, 62vw, 560px);
  }

  .exhibition-project-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .exhibition-iteration-button {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .exhibition-iteration-button span:last-child {
    text-align: left;
    white-space: normal;
  }
}

@media screen and (max-width: 640px) {
  .exhibition-iteration-button {
    grid-template-columns: minmax(0, 1fr) 1.1em;
    gap: 8px 12px;
  }

  .exhibition-iteration-button span:first-child {
    grid-column: 1;
  }

  .exhibition-iteration-button span:last-child {
    grid-column: 1;
  }

  .exhibition-iteration-button::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }
}

@media screen and (max-width: 600px) {
  .exhibition-project {
    padding: 15px 0 24px;
  }

  .exhibition-project-header {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .exhibition-project-title,
  .exhibition-project-year,
  .exhibition-project-meta {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .exhibition-carousel-stage {
    height: min(68vh, 92vw);
  }

  .exhibition-single-visual img {
    max-height: min(68vh, 620px);
  }
}


/* 6. Lecturing + Convening (archive grids)
   Row = date | main | meta. Convening adds a poster + programme.
   ========================================================= */
.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 15px;
}

.archive-entry {
  display: grid;
  grid-template-columns: minmax(105px, 0.7fr) minmax(0, 2.4fr) minmax(170px, 1fr);
  gap: 30px;
  padding: 15px 0;
  border-bottom: 1px solid var(--fg);
}

.archive-grid > .archive-entry:last-child {
  border-bottom: none;
}

.archive-entry-featured {
  padding-top: 24px;
  padding-bottom: 24px;
}

.archive-entry h2 {
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
  text-align: left;
}

.archive-entry p {
  padding: 8px 0 0;
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.archive-date,
.archive-meta {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.archive-meta {
  text-align: right;
}

/* Lecturing: keeps 18.5px links on mobile too. */
.lecture-grid .lecture-actions {
  font-size: calc(var(--size-meta) * var(--text-scale));
}

/* Convening: on desktop, title/location share row 1 and description/poster
   share row 2. display: contents lets the nested blocks join the same grid. */
.convening-grid .archive-entry {
  grid-template-columns: minmax(90px, 0.55fr) minmax(0, 2fr) minmax(210px, 1fr);
  grid-template-rows: auto auto;
  gap: 0 30px;
  align-items: start;
}

.convening-grid .archive-date {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: calc(var(--size-meta) * var(--text-scale));
}

.convening-grid .archive-main,
.convening-grid .archive-side {
  display: contents;
}

.convening-grid .archive-main h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 14px;
  line-height: var(--leading);
}

.convening-grid .convening-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.convening-grid .convening-body > p {
  padding: var(--paragraph-gap) 0 0;
  font-size: calc(var(--size-text) * var(--text-scale));
  line-height: var(--leading);
}

.convening-grid .convening-body > p:first-of-type {
  padding-top: 0;
}

.convening-grid .archive-meta {
  font-size: calc(var(--size-meta) * var(--text-scale));
}

.convening-grid .archive-meta-desktop {
  grid-column: 3;
  grid-row: 1;
  margin: 0 0 14px;
}

.convening-grid .convening-side-body {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
}

/* Poster: shown in the side column on desktop, inside the text on tablet/mobile. */
.convening-grid .archive-meta-responsive,
.convening-grid .archive-visual-responsive {
  display: none;
}

.archive-visual {
  min-width: 0;
}

.convening-grid .archive-visual a {
  display: block;
}


.convening-grid .archive-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.convening-grid .archive-visual-desktop.is-portrait {
  width: min(100%, 260px);
  margin-left: auto;
  margin-right: auto;
}

/* Credits + external links */
.convening-extra {
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.convening-extra-desktop {
  margin-top: 10px;
  text-align: right;
}

.convening-extra-responsive {
  display: none;
  margin-top: 18px;
}

.convening-extra .convening-credit + a,
.convening-extra .convening-credit + .convening-credit,
.convening-extra a + a {
  display: block;
  margin-top: 6px;
}

.convening-extra a {
  text-underline-offset: 0.08em;
}

/* Programme: time | session */
.convening-program {
  margin-top: 18px;
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.convening-program .program-day {
  padding-top: 10px;
}

.convening-program .program-day:first-child {
  padding-top: 0;
}

.convening-program .program-day + .program-day {
  margin-top: 10px;
  border-top: 1.5px dotted var(--fg);
}

/* Day labels are sometimes <span>s: force them onto their own line. */
.convening-program .program-label {
  display: block;
  margin-bottom: 4px;
}

.convening-program .program-day > .program-label {
  margin-bottom: 6px;
}

.convening-program .program-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

.convening-program .program-row + .program-row {
  margin-top: 5px;
}

.convening-program .program-time {
  white-space: nowrap;
}

.convening-program .program-info {
  min-width: 0;
}

/* Tablet: one content column after the date. The poster sits above the
   description, credits/Preview move to the very bottom. */
@media screen and (max-width: 860px) {
  .convening-grid .archive-entry {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 8px 20px;
  }

  .convening-grid .archive-date {
    grid-column: 1;
    grid-row: 1;
  }

  .convening-grid .archive-main {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .convening-grid .archive-main h2 {
    margin-bottom: 0;
  }

  .convening-grid .convening-body {
    display: block;
  }

  .convening-grid .archive-side {
    display: none;
  }

  .convening-grid .archive-meta-responsive {
    display: block;
    margin-top: 5px;
    text-align: left;
  }

  .convening-grid .archive-visual-responsive {
    display: block;
    width: min(100%, 560px);
    margin: 16px auto 10px;
  }

  .convening-grid .archive-visual-responsive.is-portrait {
    width: min(72%, 420px);
  }

  .convening-extra-responsive {
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 760px) {
  .archive-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .archive-meta {
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
  .convening-grid .archive-entry {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 15px 0 24px;
  }

  .convening-grid .archive-date,
  .convening-grid .archive-main {
    grid-column: 1;
    grid-row: auto;
  }

  .convening-grid .archive-visual-responsive {
    width: min(92%, 460px);
    margin: 14px auto 9px;
  }

  .convening-grid .archive-visual-responsive.is-portrait {
    width: min(76%, 360px);
  }

  .convening-program .program-row {
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 14px;
  }
}