/* =============================================
   DESIGN TOKENS
   ============================================= */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-strong: #000000;
  --color-text-muted: #999999;
  --color-link: #111111;
  --color-link-hover: #000000;
  --color-link-visited: #c0c0c0;
  --color-rule: rgba(0, 0, 0, 0.12);
  --color-rule-hover: rgba(0, 0, 0, 0.3);
  --color-overlay: rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-family: 'IBM Plex Mono', 'Courier New', monospace;
  --font-size-base: 11px;
  --font-size-small: 10px;
  --font-size-xs: 9.5px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --line-height: 1.35;
  --line-height-tight: 1.2;
  --letter-spacing: 0em;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =============================================
   RESET & BASE
   ============================================= */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  background-color: var(--color-bg);
}

::selection {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text-strong);
}


/* =============================================
   TWO-COLUMN LAYOUT
   ============================================= */

.layout {
  display: flex;
  min-height: 100vh;
}

.layout__left {
  width: 36%;
  min-width: 240px;
  max-width: 440px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 28px 24px 28px 20px;
  /* Thin, transparent scrollbar (Firefox) so it doesn't thicken the divider. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.layout__right {
  flex: 1;
  min-width: 0;
  padding: 28px 24px;
  overflow-x: auto;
  border-left: 1px solid var(--color-rule);
}


/* =============================================
   HEADER (left column)
   ============================================= */

.site__header {
  margin-bottom: 28px;
}

.site__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: var(--line-height-tight);
}

.site__contact {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.site__contact a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site__contact a:hover {
  color: var(--color-text-strong);
}


/* =============================================
   BIO
   ============================================= */

.bio p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 18px;
}

.bio p:last-of-type {
  margin-bottom: 0;
}

.bio a.project-link {
  color: inherit;
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-hover);
  transition: border-color var(--transition-fast);
  cursor: pointer;
}

.bio a.project-link:hover {
  border-color: var(--color-text-strong);
}

.bio a.project-link:visited {
  color: inherit;
}

.bio__toggle {
  display: inline-block;
  margin-top: 20px;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.bio__toggle:hover {
  color: var(--color-text);
}

.bio__toggle--back {
  margin-top: 0;
  margin-bottom: 20px;
  display: block;
}


/* =============================================
   TYPE LIST & TOPIC LIST
   ============================================= */

.type-list,
.topic-list {
  list-style: none;
  padding: 0;
}

.type-list {
  margin-top: 26px;
  padding-left: 3ch;
}

.topic-list {
  margin-top: 4px;
  padding-left: 6ch;
}

.type-list li,
.topic-list li {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}


/* =============================================
   ACTIVITY LIST — CONTROLS
   ============================================= */

.activities__controls {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-group__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.custom-select {
  position: relative;
}

.custom-select__trigger {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 2px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color var(--transition-fast);
}

.custom-select__trigger::after {
  content: '▾';
  font-size: 8px;
  color: var(--color-text-muted);
  line-height: 1;
}

.custom-select__trigger:hover {
  border-color: var(--color-text-muted);
}

.custom-select__trigger[aria-expanded="true"] {
  border-color: var(--color-text);
}

.custom-select__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 200;
  margin-top: 1px;
}

.custom-select__dropdown.is-open {
  display: block;
}

.custom-select__option {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.custom-select__option:hover {
  background: rgba(0, 0, 0, 0.05);
}

.custom-select__option[aria-selected="true"] {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-medium);
}

.activities__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}


/* =============================================
   ACTIVITY TABLE
   ============================================= */

.activities__table {
  width: 100%;
  border-collapse: collapse;
}

.activities__table thead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.activities__table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.activities__table th:hover {
  color: var(--color-text-strong);
}

.activities__table th.sort-active {
  color: var(--color-text-strong);
}

.sort-arrow {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.6em;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

th:hover .sort-arrow { opacity: 0.4; }
th.sort-active .sort-arrow { opacity: 1; }
th.sort-desc .sort-arrow { transform: rotate(180deg); }

/* Column widths */
.col-title { width: 39%; }
.col-type  { width: 16%; }
.col-venue { width: 28%; }
.col-year  { width: 10%; text-align: right; padding-right: 6px; }
.col-link  { width: 7%;  text-align: right; }

/* Rows */
.activities__table tbody tr {
  border-bottom: 1px solid var(--color-rule);
  transition: background-color var(--transition-fast);
}

.activities__table tbody tr.has-desc {
  cursor: pointer;
}

.activities__table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.018);
}

.activities__table tbody tr.hidden {
  display: none;
}

.activities__table td {
  font-size: var(--font-size-base);
  padding: 3px 0;
  vertical-align: baseline;
  color: var(--color-text);
}

.activities__table td:last-child,
.activities__table td.col-year,
.activities__table td.col-link {
  text-align: right;
}

.activities__table td a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.activities__table td a:hover { color: var(--color-link-hover); }
.activities__table td a:visited { color: inherit; }

.activity-type,
.activity-venue,
.activity-year {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.activity-year {
  font-feature-settings: "tnum";
}

/* Expand button (+/−) */
.expand-btn {
  display: inline-block;
  margin-left: 0.5ch;
  cursor: pointer;
  color: #666;
  font-size: var(--font-size-base);
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  transition: color var(--transition-fast);
}

.expand-btn:hover {
  color: var(--color-text-strong);
}

/* Expanded info row */
.info-row {
  display: none;
}

.info-row.is-open {
  display: table-row;
}

.info-row td {
  padding: 6px 0 14px 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

.info-row__content {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: #666;
  white-space: normal;
  text-align: left;
}

.info-row__content a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--transition-fast);
}

.info-row__content a:hover {
  color: var(--color-text-strong);
  border-color: var(--color-text-muted);
}

.info-row__label {
  display: block;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

/* Link labels: READ / WATCH (5th column) */
.activity-link {
  font-size: var(--font-size-xs);
  letter-spacing: 0.07em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.activity-link:hover {
  color: var(--color-text-strong);
}

.activities__table td a.activity-link:visited {
  color: inherit;
  border-color: currentColor;
}


/* =============================================
   MODAL / POP-UP
   ============================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  width: fit-content;
  min-width: 300px;
  max-width: min(90vw, 820px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(10px) scale(0.98);
  transition: transform var(--transition-slow);
}

/* Scrollable content area; the close button stays pinned to .modal */
.modal__body {
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0; /* allow the flex item to shrink so overflow-y can scroll */
}

.modal-overlay.is-active .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  z-index: 1;
}

.modal__close:hover { color: var(--color-text-strong); }

.modal__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  margin-bottom: 20px;
  padding-right: 28px;
  line-height: var(--line-height-tight);
}

/* Slideshow */
.slideshow {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

.slideshow__track {
  position: relative;
  width: 100%;
  overflow: visible;
  padding-bottom: 14px;
}

.slideshow__slide { display: none; width: 100%; }
.slideshow__slide.is-active { display: block; }
.slideshow__slide--text { padding: 8px 0 20px; }
.slideshow__slide > img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 780px);
  max-height: calc(76vh - 130px);
  margin: 0 auto;
}

.framed-wrapper {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.framed-wrapper > img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 780px);
  max-height: calc(76vh - 130px);
}

.framed-wrapper--small > img {
  max-width: min(60vw, 600px);
  max-height: calc(55vh - 130px);
}

.framed-wrapper > img,
.slideshow__slide > img.is-framed {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: -5px 0 7px -2px rgba(0, 0, 0, 0.09), 0 5px 7px -2px rgba(0, 0, 0, 0.09);
}

/* Spread wrapper: centers image, draws sharp CSS center line */
.spread-wrapper {
  display: block;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.spread-wrapper::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.13);
  pointer-events: none;
  z-index: 1;
}

.spread-wrapper > img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(62vw, 620px);
  max-height: calc(64vh - 130px);
}

.spread-wrapper > img.is-framed {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: -5px 0 7px -2px rgba(0, 0, 0, 0.09), 0 5px 7px -2px rgba(0, 0, 0, 0.09);
}

/* Paired slide: document (back) + photo (front) */
.slide-pair {
  position: relative;
  width: min(78vw, 780px);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

.slide-pair__back {
  position: absolute;
  left: 14%;
  bottom: 6%;
  height: 76%;
  width: auto;
  border: 1px solid rgba(0, 0, 0, 0.20);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.slide-pair__front {
  position: absolute;
  left: 44%;
  bottom: 4%;
  width: 42%;
  height: auto;
  box-shadow: 4px 6px 8px -2px rgba(0, 0, 0, 0.14);
}

.slideshow__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.slideshow__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  padding: 3px 0;
  transition: color var(--transition-fast);
  user-select: none;
}

.slideshow__btn:hover { color: var(--color-text-strong); }
.slideshow__btn:disabled { opacity: 0.25; cursor: default; }

.slideshow__counter {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-feature-settings: "tnum";
}

.modal__description {
  font-size: var(--font-size-small);
  line-height: 1.55;
  color: var(--color-text);
}

.modal__section-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.modal__section-name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  margin-bottom: 4px;
  line-height: var(--line-height-tight);
}

.modal__credits {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}

.modal__description-text {
  font-size: var(--font-size-small);
  line-height: 1.55;
  color: var(--color-text);
}

.modal__caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 860px) {
  .layout {
    flex-direction: column;
  }

  .layout__left {
    width: 100%;
    max-width: none;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-rule);
    padding: 20px 16px;
  }

  .layout__right {
    padding: 20px 16px;
  }

  .activities__table thead {
    display: none;
  }

  .activities__table,
  .activities__table tbody {
    display: block;
  }

  /* Each activity fills the row edge-to-edge and stays dense:
        line 1    Title .................... ↗  Year
        line 2+   type · venue venue venue …   (wraps to the left edge)
     Normal block flow lets type + venue read as a single inline run that
     always returns to the left edge; year and link are pinned top-right. */
  .activities__table tbody tr:not(.info-row) {
    display: block;
    position: relative;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .activities__table tbody td {
    display: inline;
    padding: 0;
  }

  /* Title — its own line; right padding leaves room for year only */
  .activities__table tbody td:first-child {
    display: block;
    padding-right: 3.2em;
  }

  /* Year — pinned to the top-right corner of the activity */
  .activities__table td.activity-year {
    position: absolute;
    top: 6px;
    right: 0;
    text-align: right;
    white-space: nowrap;
  }

  /* READ/WATCH — flows inline after venue on line 2, not pinned top-right */
  .activities__table td.col-link {
    position: static;
    display: inline;
    text-align: left;
  }

  .activities__table td.col-link:not(:empty)::before {
    content: "·";
    margin: 0 0.45em;
    color: var(--color-text-muted);
  }

  /* type · venue — one inline run that wraps to the left edge.
     The type is italicised so it stays distinct from the venue. */
  .activities__table td.activity-type {
    font-style: italic;
    white-space: nowrap;
  }

  .activities__table td.activity-venue::before {
    content: "·";
    margin: 0 0.45em;
    color: var(--color-text-muted);
  }

  /* Keep descriptions collapsed on mobile — reveal on tap, like the desktop. */
  .activities__table tr.info-row {
    display: none;
    padding: 0;
    border-bottom: none;
  }

  .activities__table tr.info-row.is-open {
    display: block;
  }

  /* The opened description spans the full width below its activity,
     framed by a rule below as on the desktop */
  .activities__table tbody tr.info-row td {
    display: block;
    padding: 4px 0 12px 0;
  }

  /* Larger, comfortable tap target for the +/− toggle on touch screens */
  .expand-btn {
    padding: 2px 6px;
    margin-left: 0.25ch;
  }

  .modal {
    width: 92%;
    max-width: 92vw;
    max-height: 85vh;
  }

  .modal__body {
    padding: 16px;
  }

  /* Keep media comfortably within the smaller mobile pop-up;
     long text scrolls inside .modal__body. */
  .slideshow__slide > img,
  .framed-wrapper > img,
  .spread-wrapper > img {
    max-width: 82vw;
    max-height: 60vh;
  }

  .slide-pair {
    width: 82vw;
  }
}


/* =============================================
   SCROLLBAR (left column + modal)
   ============================================= */

.layout__left::-webkit-scrollbar {
  width: 3px;
}

.layout__left::-webkit-scrollbar-track {
  background: transparent;
}

/* Transparent by default so the scrollbar never sits flush against the
   column divider and reads as a thicker grey line; revealed on hover. */
.layout__left::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 1px;
}

.layout__left:hover::-webkit-scrollbar-thumb {
  background: var(--color-rule);
}

.layout__left::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}


/* =============================================
   NO-JS FALLBACK
   ============================================= */

noscript {
  display: block;
  padding: 20px;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}