:root {
  --header-h: 50px; /* fallback */
  --handle-w: 40px; /* closed slide-in handle width so #selection-bar can resolve it */
  --offgrid-left: 8px;    /* fixed left margin for left counter */
  --offgrid-right: 8px;   /* base right margin; JS adds slide-in visible width to this */
  --side-gap: 8px;
  --fab-size: 40px;
  --fab-edge-gap: 12px; /* distance from viewport edges */

  /* main theme colors */
  --main-bg-color: #fffaf5;
  --main-bg-color-dark: #171717;
  --main-font-color: #1d1d1d;
  --main-font-color-dark: #fff;
  --main-outline-color: #1d1d1d;
  --main-outline-color-dark: #fff;
  --main-light-font-color: #333;
  --main-light-font-color-dark: #fff;
  --main-light-outline-color: #E0E0E0;
  --main-light-outline-color-dark: #757575;
  --main-bright-bg-color: #fff;
  --main-bright-bg-color-dark: #171717;
  --object-text-border-color: #4c4741;
  --object-text-border-color-dark: #a0a0a0;
  --main-button-outline-color: #1d1d1d;
  --main-button-outline-color-dark: #a0a0a0;
  --main-button-inactive-font-color: #999;
  --main-button-inactive-font-color-dark: #757575;
  --main-button-inactive-outline-color: #ccc;
  --main-button-inactive-outline-color-dark: #5e5e5e;

  /* SIZE: bump this to make the burger larger */
  --burger-width: 34px;               /* ← change this to the size you want */
  --burger-height: calc(var(--burger-width) * 0.7142857); /* 20/28 keeps viewBox ratio */
  
  /* idle offset for middle bar and subtle hover distances */
  --burger-offset: 3px;   /* middle starts 3px to the right */
  --hover-mid-left: 1px;  /* on hover: middle ends 1px to the right (i.e., moves left from +3px -> +1px) */
  --hover-top-right: 1px; /* top nudges right by 1px */
  --hover-bot-right: 0.5px; /* bottom nudges right by 0.5px */
  /* NEW: thickness control (increase these for thicker lines) */
  --burger-bar-thickness: 1.3px;   /* ← tweak this */
  --burger-bar-radius:    0.65px;  /* corner radius to match thickness/2 */
  --nav-icon-size: 18px;
  --slidein-icon-size: 12px;
  --icon-slidein-closed: url('img/icons/arrow_counter_10x12px.svg');
  --icon-slidein-open:   url('img/icons/close.svg');
  --icon-detail-close:   url('img/icons/close.svg');

  /* Sidebar toggle icon config */
  --section-icon-size: 8px; /* chevron size */
  --icon-section-toggle: url('img/icons/arrow_expand.svg');
  /* override this if you want a fixed color instead of current text color */
  --section-toggle-icon-color: initial; /* e.g., var(--main-light-font-color) */

  --prepage-bg-image: url("img/prescreen-bg.svg"); /* adjust path if needed */
  --prepage-bg-size: 80%;
  --prepage-bg-opacity: 0.05;                      /* tweak to taste */
}

:root[data-theme="dark"] {
  --main-bg-color: var(--main-bg-color-dark);
  --main-font-color: var(--main-font-color-dark);
  --main-outline-color: var(--main-outline-color-dark);
  --main-light-font-color: var(--main-light-font-color-dark);
  --main-light-outline-color: var(--main-light-outline-color-dark);
  --main-bright-bg-color: var(--main-bright-bg-color-dark);
  --object-text-border-color: var(--object-text-border-color-dark);
  --main-button-outline-color: var(--main-button-outline-color-dark);
  --main-button-inactive-font-color: var(--main-button-inactive-font-color-dark);
  --main-button-inactive-outline-color: var(--main-button-inactive-outline-color-dark);
}

* {
    margin: 0;
    padding: 0;
  }

  html { font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif; }

  body {
    overflow-x: hidden;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
  }

  /* ================= Prepage / Splash Screen ================= */

  .prepage {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--main-bg-color);
    color: var(--main-font-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 28px;
    opacity: 1;
    transition: opacity 400ms ease;
  }

  .prepage::before {
    content: "";
    position: absolute;
    inset: 0;              /* fill the prepage container */
    margin: auto;          /* combined with width/height centers it */
    width: var(--prepage-bg-size);
    height: var(--prepage-bg-size);

    background-image: var(--prepage-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    opacity: var(--prepage-bg-opacity); /* affects only the SVG layer */
    pointer-events: none;               /* don’t block clicks */
    z-index: -1;
  }

  body.has-prepage {
    overflow: hidden;
  }

  /* Top row: "funded by" + logos centered together */
  .prepage-top {
    display: flex;
    justify-content: center;   /* centers text + logos as a unit */
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    opacity: 0.9;
  }

  .prepage-funded-logos {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .prepage-funded-logos img {
    height: 28px;
    width: auto;
  }

  /* Center hero block */
  .prepage-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-top: -4vh; /* slight optical centering */
  }

  /* Use ONLY the font sizes from gallery title box */
  .prepage-headline {
    font-size: 4.5em;   /* matches .title-box h2 size */ 
    line-height: 0.9;
    margin: 0;
    font-style: italic;
  }

  .prepage-subline {
    font-size: 1.5em; /* matches .title-box h3 size */
    line-height: 1.3;
    margin: 0;
    margin-top: 10px;
    font-weight: 200;
  }

  .prepage-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
  }

  /* neutralize global .button margin-top in this context */
  #prepage .button {
    margin-top: 0;
  }

  .prepage-mobile-message {
    display: none;               /* hidden by default (desktop) */
    font-size: 0.95em;
    text-align: center;
    max-width: 260px;
    line-height: 1.4;
  }
  
  @media (max-width: 768px) {
    .prepage-actions {
      flex-direction: column;
      align-items: center;
    }
  
    /* On mobile: hide both buttons */
    .prepage-actions .button {
      display: none;
    }
  
    /* On mobile: show the "Coming soon to mobile" text */
    .prepage-actions .prepage-mobile-message {
      display: block;
    }
  }  

  /* Bottom row: left text pinned left, logos centered independent */
  .prepage-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 0.95em;
    opacity: 0.9;
  }

  .prepage-collab-text {
    justify-self: start;
  }

  .prepage-collab-logos {
    justify-self: center;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .prepage-collab-logos img {
    height: 24px;
    width: auto;
  }

  /* Step 1: fade out */
  .prepage.is-fading {
    opacity: 0;
    pointer-events: none;
  }

  /* Step 2: remove from layout after fade */
  .prepage.is-hidden {
    display: none;
  }

  /* small-screen safety */
  @media (max-width: 700px) {
    .prepage-headline { font-size: 2.8em; }
    .prepage-subline  { font-size: 1.3em; }
  }

  .header-center, h1, h2, h3, object, .wide-content .gallery-box .column .item.text, .vertical-content .topics {
    font-family: "Noto Serif Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }

  #workspace {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    overflow: hidden;         /* prevent native scroll; panning stays JS-only */
  }

  #grid {
    /*border: 1px solid green;*/
    position: absolute;
    top: 0px;
    left: 0px;
    will-change: left, top; cursor: grab;
    overscroll-behavior: none;  /* no scroll chaining to page */
    touch-action: none;         /* no touch panning/zooming by browser */
  }

  #grid.dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none; /* Safari */
  }
  
  #grid.dragging * {
    user-select: none;
    -webkit-user-select: none; /* Safari */
  }  

  .object {
    position: absolute;
    box-sizing: border-box;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    /*background-repeat: 'no-repeat';*/
    overflow: visible;
    z-index: 1;
    transition: transform 0.5s ease, width 0.4s ease, height 0.4s ease;
  }

  .object.audio {
    background-color: transparent;
  }

  /* During zoom, keep width/height animated but freeze transform animations */
  body.zooming #grid .object {
    transition: width 0.4s ease, height 0.4s ease !important; /* no transform here */
  }

  .object.is-detail { z-index: 1000; }

    /* Fade the small content (children except .detail-panel) */
  .object.detail-fade-out > :not(.detail-panel) {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* Center text objects without affecting font-fitting geometry */
  #grid .object[data-type="text"],
  #grid .object.text {
    display: flex;               /* create a flex formatting context */
    align-items: center;         /* vertical centering */
    justify-content: center;     /* horizontal centering */
    text-align: center;          /* center multi-line text */
  }

    /* Grid view: reuse gallery text styling */
  #grid .object.text {
    box-sizing: border-box;               /* keep absolute size even with padding */
    border: 1px solid var(--object-text-border-color);
    padding: 20px;
    background-color: var(--main-bright-bg-color);

    /* use plain Noto Serif (not Display) */
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: var(--main-font-color);
  }

  #grid .object.text .detail-panel .detail-date-inline, #grid .object.text .detail-panel .detail-group {
    font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
  }

  #grid .object.text .scaling-text {
    display: block;
    min-width: 0; /* let the span shrink within the flex card */
    max-width: 100%;
    white-space: normal;
    /* word-break: break-word; */
    hyphens: auto;
    line-height: 1.3;
  }

  /* Grid text overflow fallback: show burger icon instead of unreadable text */
  #grid .object.text .text-placeholder-icon {
    display: none;        /* hidden by default */
    width: 40%;
    max-width: 60px;      /* optional: keep it from getting too large */
    height: auto;
  }

  /* When the text is too small to be useful, hide the text and show the icon */
  #grid .object.text.text-too-small .scaling-text {
    opacity: 0;
    pointer-events: none;
  }

  #grid .object.text.text-too-small .text-placeholder-icon {
    display: block;
  }

  /* WaveSurfer in grid audio tiles */
  #grid .object.audio .wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px; /* matches WS height */
  }

  /* Override tile wave positioning when inside inline detail panel */
  #grid .object.audio .detail-panel .detail-media.audio .wave {
    position: static;   /* undo absolute bottom pinning */
    left: auto;
    bottom: auto;
    width: 100%;
    height: 70px;       /* detail-panel height */
  }

  /* If your tiles can be very short, keep controls on top of content */
  #grid .object.audio {
    overflow: hidden;
  }

    /* Detail panel overlay inside the expanded card */
  .detail-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto auto auto;
    gap: 12px;
    padding: 40px;
    background-color: var(--main-bright-bg-color);
    border: 1px solid var(--object-text-border-color); /* ← add this line */
    opacity: 0;
    z-index: 10;
    transition: opacity 0.25s ease;
    overflow: hidden;
  }

  #grid .object.text .detail-panel {
    border: none;
  }

  /* default detail description (media) stays as is */

  /* text objects: bigger title-like text */
  .detail-panel.detail-text-object .detail-description {
    font-size: 0.8rem;       /* or 1.05rem */
    line-height: 1.3;
  }

  .detail-panel.portrait {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    column-gap: 28px; /* or 32px, pick your taste */
    align-items: start;
  }

  /* media column on the left, full height */
  .detail-panel.portrait .detail-media {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* info on the right */
  .detail-panel.portrait .detail-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-items: flex-start;
    text-align: left;
  }

  /* date + group left in portrait */
  .detail-panel.portrait .detail-date,
  .detail-panel.portrait .detail-group {
    text-align: left;
  }

  /* tags left in portrait */
  .detail-panel.portrait .detail-tags {
    justify-content: flex-start;
  }

  /* link left in portrait */
  .detail-panel.portrait .detail-link {
    justify-content: flex-start;
    text-align: left;
  }

  /* keep the close button in the corner */
  .detail-panel.portrait .detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .detail-panel.visible { opacity: 1; }

  .detail-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-font-color);
  }
  
  /* New: draw close icon from currentColor */
  .detail-close::before {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon-detail-close) no-repeat center / contain;
            mask: var(--icon-detail-close) no-repeat center / contain;
  }

  .detail-date, .detail-group {
    text-align: center;
    font-size: 0.6rem;
    font-style: normal;
    color: var(--main-light-font-color);
  }

  /* default: non-portrait → top date visible */
  .detail-date-top {
    text-align: center;
    font-size: 0.6rem;
    font-style: normal;
    color: var(--main-light-font-color);
    margin-bottom: 10px;
  }

  .detail-date-inline {
    display: none;
  }

  /* portrait → hide top, show inline in right column */
  .detail-panel.portrait .detail-date-top {
    display: none;
  }

  .detail-panel.portrait .detail-date-inline {
    display: block;
    text-align: left;
    font-size: 0.6rem;
    font-style: normal;
    color: var(--main-light-font-color);
    margin-bottom: 8px;
  }

  .detail-group {
    text-transform: uppercase;
  }

  .detail-description {
    font-size: 0.9rem;
    line-height: 1.35;
    /* match left alignment you introduced */
    text-align: center;
    font-family: "Noto Serif", serif; /* same as text objects */
  }
  .detail-panel.portrait .detail-description {
    text-align: left;
  }
  
  .detail-media {
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  .detail-media img, .detail-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

    /* Inline images inside the detail text/info column */
  .detail-inline-image {
    max-width: 100%;      /* don’t let the wrapper exceed its column */
    margin: 1rem 0;       /* optional: spacing similar to paragraphs */
    padding-right: 100px;
  }

  .detail-inline-image img {
    display: block;
    max-width: 100%;      /* cap width to whatever space the column has */
    height: auto;         /* keep aspect ratio */
  }

  /* YouTube embeds inside content sections */
  .content-section .yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
  }

  .content-section .yt-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  
  .detail-text {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 8px;
    text-align: center;
  }
  
  .detail-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0;
    margin-top: 10px;
  }
  
  .detail-tags li {
    font-size: 0.65rem;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 4px 8px;
    background-color: var(--main-bright-bg-color);
  }
  
  .detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;   /* ← center horizontally */
    gap: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--main-font-color);
    text-align: center;
    margin-top: 10px;
    font-size: 0.8em;
    font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
  }
  
  .detail-link-icon {
    display: block;
    width: 20px;
    height: 10px;
  }

  /* Right-column wrapper for meta/info (date, group, tags, link) */
  .detail-panel .detail-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Let the media stretch to fill its column (and center its content as before) */
  .detail-panel.portrait .detail-media {
    display: flex;
    align-items: flex-start;  /* top */
    justify-content: flex-start;
  }

  /* Keep images/videos contained */
  .detail-panel .detail-media img,
  .detail-panel .detail-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

    /* WaveSurfer inside inline detail panels (expanded grid cards) */
  .detail-panel .detail-media.audio .wave {
    width: 100%;
    height: 70px;  /* matches detail page WaveSurfer height */
  }

  .object-glow {
    position: absolute;
    inset: -2px;                 /* extends a little outside the card */
    pointer-events: none;
    z-index: 0;
    border-radius: 6px;
  
    /* knobs */
    --ring: 2px;                 /* ring thickness */
    --glow-opacity: 0.55;        /* ring opacity */
    --glow-blur: 6px;            /* ring blur */
    --halo-opacity: 0.8;        /* outer halo opacity */
    --halo-blur: 16px;           /* outer halo blur */
    mix-blend-mode: screen;      /* “light” the content instead of tinting it */
    filter: blur(var(--halo-blur));
    opacity: var(--halo-opacity);
  }
  
  /* soft outer halo */
  .object-glow::before {
    content: "";
    position: absolute;
    inset: -2px;                /* expand beyond the ring */
    border-radius: inherit;
    background: var(--glow);
    pointer-events: none;
    padding: calc(var(--ring) + 8px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }  

/* Safari fallback for object glows:
   use the conic gradient as a multi-color border image.
   No blur, no mask, no blend-mode. */
   html.is-safari .object-glow {
    inset: 0;                      /* align to card edges */
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  
    /* kill heavy effects */
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    box-shadow: none;
  
    /* multi-color border from the existing --glow gradient */
    border: 2px solid transparent;
    border-image: var(--glow) 1;
  }
  
  /* Safari: we don’t need the masked halo pseudo element at all */
  html.is-safari .object-glow::before {
    content: none;
  }  
  
#controls {
  position: fixed;
  left: 0;
  bottom: 0;
}

/* Floating stacks live inside #workspace so they respect the header */
.fab-stack {
  position: absolute;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1200; /* above grid + detail panel; overlay menu still wins */
}

#fab-top-left { top: var(--fab-edge-gap); }
#fab-bottom-left { display: none; bottom: var(--fab-edge-gap); }

/* Circular buttons */
.fab {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  border: 1px solid var(--main-outline-color);
  background: var(--main-bright-bg-color);
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 2px rgba(0,0,0,.12);
  cursor: pointer;
  color: var(--main-font-color);
  box-sizing: border-box; /* ensure same outer size for button + div */
}

.fab svg,
.fab img {
  width: 18px;   /* was 22 */
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  display: block;             /* NEW */
  justify-self: center;       /* NEW */
  align-self: center;         /* NEW */
}

.fab.fab-lg {
  width: var(--fab-size);
  height: var(--fab-size);
}

.fab.fab-lg svg,
.fab.fab-lg img {
  width: 20px;   /* was 26 */
  height: 20px;
  display: block;             /* NEW */
  justify-self: center;       /* NEW */
  align-self: center;         /* NEW */
}

.fab:hover { box-shadow: 2px 3px 4px rgba(0,0,0,.18); }
.fab:active { transform: scale(0.98); }

/* Optional: show a pressed state when in that mode */
.fab.is-active { background: var(--main-bg-color); }

#main {
  height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid var(--main-outline-color);
  color: var(--main-font-color);
}

.header-left {
  font-size: 0.9em;
}

.header-center {
  font-size: 1.2em;
  position: absolute;
  left: 50%;
  font-style: italic;
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
}

.header-right {
  display: flex;
  justify-content: flex-end;
}

.header-right img {
  width: 25px;
  height: 25px;
}

/* Typewriter caret for header-left */
#header-left.typing {
  position: relative;
}

#header-left.typing::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -2px;           /* tiny gap after the last letter */
  width: 1px;
  height: 1.1em;
  animation: headerCaretBlink 1s steps(1) infinite;
  opacity: 1;
}

@keyframes headerCaretBlink { 50% { opacity: 0; } }

/* If user prefers reduced motion, no blinking */
@media (prefers-reduced-motion: reduce) {
  #header-left.typing::after { animation: none; }
}

#content {
  position: relative;
}

.scroll-container-horizontal {
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;

}

.scroll-container-vertical {
  width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
}

.scroll-container-horizontal,
.scroll-container-vertical {
  transition: opacity 0.4s ease;
  opacity: 0;
  display: none;
}

.scroll-container-horizontal.active,
.scroll-container-vertical.active {
  opacity: 1;
  display: block;
}

#content-back-button {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1200;
}

#content-back-button svg {
  width: 26px;
  height: 26px;
}

/* Optional: if you want the vector-effect tweak, keep only this part */
#content-back-button svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
}

/* Text-to-speech FAB on detail page (stacked under back button like #gallery-ungroup) */
#content-tts-button {
  position: absolute;
  top: calc(var(--fab-edge-gap) + var(--fab-size) + 9px);  /* same vertical offset as #gallery-ungroup */
  left: var(--fab-edge-gap);                               /* same X as back button / ungroup button */
  z-index: 1200;
}

/* When hidden, remove from layout */
#content-tts-button[hidden] {
  display: none !important;
}

/* TTS icon states */
#content-tts-button .tts-icon--pause {
  display: none; /* default: only speaker visible */
}

#content-tts-button.is-playing .tts-icon--speaker {
  display: none;
}

#content-tts-button.is-playing .tts-icon--pause {
  display: block;
}

/* Ungroup button inside the group gallery header */
#gallery-ungroup {
  position: absolute;
  top: calc(var(--fab-edge-gap) + var(--fab-size) + 9px);      /* under the back button (35px high + gap) */
  left: var(--fab-edge-gap);
  z-index: 1200;
  display: none;  /* hidden by default, see rule below */
}

/* Only show this control in the GROUP gallery, not the ad-hoc tag gallery */
body.in-group-gallery:not(.in-adhoc-gallery) #gallery-ungroup {
  display: grid;  /* same as .fab */
}

.wide-content, .vertical-content {
  display: flex;
  height: calc(100dvh - var(--header-h));
}

#detail-content {
  height: calc(100dvh - var(--header-h));/* viewport minus dynamic header */
}

#detail-content.active {
  display: grid;
  grid-template-rows: auto 1fr;
}

#detail-content .vertical-content {
  display: flex;
  height: 100%;
}

.wide-content .title-box {
  min-width: 85vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding-left: 25vw;
  padding-right: 10vw;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
  align-items: center;
}

.wide-content .title-box.visible {
  opacity: 1;
  transform: translateY(0);
}

.wide-content .title-box h2 {
  font-size: 5em;
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

.wide-content .title-box h3 {
  font-size: 1.9em;
  line-height: 1.3;
  margin-top: 30px;
}

/* Ad-hoc tag gallery: title chips with a removable "X" */
#group-gallery .title-box h2 .adhoc-title-tag {
  position: relative;
  display: inline-block;
  padding-right: 0.6em;       /* space for the X */
  cursor: pointer;
}

#group-gallery .title-box h2 .adhoc-title-tag-label {
  display: inline-block;
}

#group-gallery .title-box h2 .adhoc-title-tag-close {
  position: absolute;
  top: 0;                     /* "top right end" of the tag text */
  right: 0;
  border: none;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.wide-content .title-box h2, .wide-content .title-box h3 {
  font-style: italic;
}

.wide-content .title-box .button {
  margin-top: 60px;
}

.button {
  padding: 6px 12px;
  border: 1px solid var(--main-button-outline-color);
  display: inline-flex;
  width: auto;
  max-width: max-content;
  text-decoration: none;
  color: var(--main-font-color);
  align-items: center;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  background-color: var(--main-bg-color);
}
.button:hover {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.button .text {
  font-size: 0.8em;
}

.button .icon {
  margin-left: 20px;
}

.project-type {
  font-size: 0.6em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 20px;
  display: inline-block;
}

.wide-content .gallery-box {
  display: flex;
  padding-right: 120px;
}

.wide-content .gallery-box .column {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wide-content .gallery-box .column .item, #related-objects .item {
  margin-top: auto;
  margin-bottom: auto;
  opacity: 0;
  cursor: pointer;
  transition: opacity 3s, transform 3s;
}

.wide-content .gallery-box .column .item.visible, #related-objects .item.visible {
  opacity: 1;
}

/* size for GALLERY text tiles only */
.wide-content .gallery-box .column .item.text {
  width: 150px;
  height: 100px;
}

/* shared look for both gallery + strip (no width here) */
.wide-content .gallery-box .column .item.text,
#related-objects .item.text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--object-text-border-color);
  padding: 20px;
  background-color: var(--main-bright-bg-color);
}

.wide-content .gallery-box .column .item.text .scaling-text, #related-objects .item .scaling-text {
  text-align: center;
  display: block;
  max-width: 100%;
  white-space: normal;
  /*word-break: break-word;*/
  hyphens: auto;
  line-height: 1.1;
}

.wide-content .gallery-box .column .item.waveform, #related-objects .item.waveform {
  width: 60%;
}

#group-gallery { display: none; }
#group-gallery.active { display: block; }
#group-gallery .item.audio .wave { width: 100%; height: 50px; }

#slide-ins {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 1400;
}

#slide-ins.visible {
  transform: translateX(0);
}

.slide-in {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  width: 40px;
  transition: width 0.4s ease;
  background-color: var(--main-bg-color);
  box-sizing: border-box;
}

/* CONTENT slide-ins: animate max-width so we keep smooth opening
   while still using flex to avoid pushing handles off-screen */
#slide-ins .slide-in:not([data-mode="menu"]) {
  width: auto;                /* don't lock to 40px via width */
  max-width: 40px;            /* collapsed = handle only */
  transition: max-width 0.4s ease;
  overflow: hidden;           /* hide body during expansion */
}

/* Collapsed content slide-ins: keep layout for animation, but hide & unfocus content */
#slide-ins .slide-in:not([data-mode="menu"]):not(.expanded) > .vertical-content {
  visibility: hidden;
  pointer-events: none;
}

/* Expanded content slide-ins: show content normally */
#slide-ins .slide-in:not([data-mode="menu"]).expanded > .vertical-content {
  visibility: visible;
  pointer-events: auto;
}

/* Non-menu slide-ins (content sidebars):
expand to the remaining space so handles stay visible,
and pin the expanded panel to the right edge. */
#slide-ins .slide-in:not([data-mode="menu"]).expanded {
  flex: 1 1 auto;    /* take leftover width, not full strip */
  max-width: 100dvw;          /* grow up to viewport */
}

/* Expanded size uses the computed width cap */
#slide-ins .slide-in[data-mode="menu"].expanded {
  width: auto;                            /* override any .expanded { width:100% } */
  max-width: var(--slidein-exp-width);    /* animate this from 40px → target */
}

#slide-ins .slide-in[data-mode="menu"] .vertical-content,
#slide-ins .slide-in.menu-mode .vertical-content { /* fallback if you used a class */
  padding-left: 20px;
}

.slide-in-handle {
  border-left: 1px solid var(--main-outline-color);
  border-top: none;
  border-bottom: none;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide-in-handle .close-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  background: none;
  border: none;
  color: var(--main-font-color);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Draw icon with mask so it inherits currentColor (works in dark mode) */
.slide-in-handle .close-btn::before {
  content: "";
  width: var(--slidein-icon-size);
  height: var(--slidein-icon-size);
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icon-slidein-closed) no-repeat center / contain;
          mask: var(--icon-slidein-closed) no-repeat center / contain;
  /* Keep legacy visual: arrow is rotated 180deg by default */
  transform: rotate(180deg);
}

/* When the slide-in is expanded, show "close" icon */
#slide-ins .slide-in.expanded .close-btn::before {
  -webkit-mask-image: var(--icon-slidein-open);
          mask-image: var(--icon-slidein-open);
  transform: none;
}

.slide-in-handle .vertical-text {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--main-font-color);
}

#slide-ins #tags-visible {
  margin-top: 25px;
  margin-bottom: 0;
}

.vertical-content {
  width: 100%;
  flex-direction: column;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 0.4s ease;
  box-sizing: border-box;
  padding-bottom: 55px;
}
.vertical-content {
  opacity: 1;
}

.vertical-content.visible {
  opacity: 1;
}

.vertical-content p {
  padding: 0 100px;
  font-size: 0.9em;
  line-height: 2em;
  margin-bottom: 20px;
}

.vertical-content .right h3 {
  padding: 0 100px;
  font-size: 1.5em;
  margin-top: 50px;
  padding-bottom: 20px;
}

.vertical-content .right h4 {
  padding-bottom: 20px;
}

.vertical-content .right blockquote {
  font-style: italic;
  font-size: 0.9em;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 50px;
  padding-right: 120px;
  line-height: 2em;
}

.vertical-content .right img {
  margin-top: 30px;
  padding-left: 20px;
}

#detail-content .vertical-content {
  position: relative;               /* so absolutely-positioned children have a ref */
  width: calc(100% - 120px);
  --vc-pad-left: 100px;             /* keep this in sync with your design */
  --vc-pad-right: 0px;              /* set if you ever add right padding */
  padding-left: var(--vc-pad-left);
}

#detail-content .vertical-content .detail-nav-arrows {
  position: sticky;
  /* Vertically center relative to the visible height of #detail-content */
  top: 50%;
  z-index: 10;
  pointer-events: none;                         /* wrapper ignores clicks */

  /* stretch the rail beyond the content box into the paddings */
  margin-left: calc(-1 * var(--vc-pad-left));
  margin-right: calc(-1 * var(--vc-pad-right));
  width: calc(100% + var(--vc-pad-left) + var(--vc-pad-right));

  /* let children absolutely position without shifting layout */
  height: 0;                                    /* no extra flow height */
}

/* Counter chips, pinned left/right, rotated */
#detail-content .vertical-content .detail-nav-arrow {
  position: absolute;
  top: 0;
  pointer-events: auto;
  /* strip the chip look */
  padding: 0;
  display: inline-flex;     /* pre-rotation layout */
  flex-direction: row;      /* row → appears as a vertical stack after 90° rotation */
  align-items: center;
  justify-content: center;
  gap: 5px;                 /* space between icon and counter */
  /* keep your text styling */
  font-size: 0.6em;
  font-style: italic;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
}

/* Keep them on their sides even if the other hides */
#detail-content .vertical-content .detail-nav-arrow.prev {
  left: 35px;
  width: 60px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  user-select: none;     /* avoid selecting the “x / y” text */
}
#detail-content .vertical-content .detail-nav-arrow.next {
  right: 0;
  width: 60px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  user-select: none;
}

#detail-content .vertical-content .detail-nav-arrow.next::before, #detail-content .vertical-content .detail-nav-arrow.prev::after {
  content: "";
  display: block;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  background: currentColor;             /* icon color */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* NEXT: show › and cancel parent’s +90° (so it points →) */
#detail-content .vertical-content .detail-nav-arrow.next::before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>');
  transform: rotate(-90deg); /* cancels parent's +90deg */
}

/* PREV: show ‹ and cancel parent’s -90° (so it points ←) */
#detail-content .vertical-content .detail-nav-arrow.prev::after {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>');
  transform: rotate(90deg);  /* cancels parent's -90deg */
}

/* When JS sets btn.hidden = true, don’t collapse layout */
#detail-content .vertical-content .detail-nav-arrow[hidden] {
  display: none !important;         /* the other one won’t move because it’s absolute */
}

/* === Related Objects horizontal strip (detail page) ======================= */
#related-objects.related-strip {
  display: flex;
  flex-wrap: nowrap;         /* single row */
  align-items: center;       /* vertical centering of children */
  gap: 12px;
  overflow-x: auto;          /* horizontal pan */
  overflow-y: hidden;
  padding-bottom: 8px;       /* avoid scrollbar overlay */
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

/* Keep each tile’s intrinsic width; don’t let flex shrink them to 0 */
#related-objects.related-strip > .item {
  flex: 0 0 auto;
}

/* Reuse gallery "item" visuals but limit height inside the strip */
#related-objects img.item,
#related-objects video.item {
  height: auto !important;           /* override any inline sizes */
  width: auto !important;
  max-height: 150px !important;      /* cap media */
  display: block;
}

/* Text items: keep to strip height and center their content */
#related-objects .item.text {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;          /* override the gallery’s fixed width */
  flex: 0 0 auto;       /* don’t grow/shrink; size to content */
}

/* Audio items are ~50px tall; center them vertically in the 150px strip */
#related-objects .item.audio {
  display: flex;
  align-items: center;
}

/* Same sizing for waves inside the related strip */
#related-objects .item.audio .wave {
  width: 100%;
  height: 50px;
}

/* Make items feel clickable */
#related-objects .item {
  cursor: pointer;
}

/* Media hero in the detail view */
#detail-content video.hero-media,
#detail-content audio.hero-media {
  width: 100%;
  max-width: 100%;
}

/* WaveSurfer on the detail page (match gallery look) */
#detail-content .detail-media.audio .wave {
  width: 100%;
  height: 70px; /* keep in sync with DETAIL_WS_CONFIG.height */
}

/* Primary slot: keep the media centered */
#detail-content #detail-primary {
  display: block;                /* normal flow, no implicit centering */
  margin-bottom: 50px;
}
  
#detail-content #detail-primary h1 {
  text-align: left;              /* headline left-aligned */
  margin: 0 0 1rem 0;
}

/* Limit the frame so mega-wide assets don’t span too far */
#detail-content #detail-primary > figure {
    margin: 0;
    width: min(100%, var(--detail-media-max-w, 1000px)); /* definite width */
    box-sizing: border-box;
  }

/* The hero media itself:
   - never exceeds the column width
   - never exceeds a portion of the viewport height
   - preserves aspect ratio automatically
*/
#detail-content .hero-media {
  display: block;
  max-width: 100%;
  max-height: var(--detail-media-max-h, 70vh);   /* cap height responsively */
  width: auto;
  height: auto;
  object-fit: contain;                           /* safe for video; harmless for img */
  background: var(--main-bright-bg-color);;
}

/* Make video/audio controls span the frame width */
#detail-content video.hero-media,
#detail-content audio.hero-media {
  width: 100%;
  max-width: 100%;
}

/* Landscape images/videos: full width of the column */
#detail-content #detail-primary .detail-media.landscape .hero-media {
  width: 100%;
  margin: 0;
}

/* Portrait images/videos: centered, not stretched full width */
#detail-content #detail-primary .detail-media.portrait .hero-media {
  width: auto;
  max-width: min(70%, 800px);   /* tweak to taste */
  margin: 0 auto;
}

#slide-ins .vertical-content {
  padding-left: 50px;
  padding-right: 50px;
}

#slide-ins h2 {
  font-size: 1.5em;
  line-height: 1.1;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 0;
}

.content-header {
  text-align: right;
  padding: 20px 50px 20px 0;
  width: calc(100% - 120px);
  box-sizing: border-box;
}

.location {
  border: 1px solid var(--main-outline-color);
  border-radius: 14px;
  padding: 8px 8px 8px 22px;
  font-size: 0.6em;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-image: url('img/location-pin.svg');
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 12px 12px;
}

.vertical-content h1 {
  font-size: 3em;
  font-style: italic;
}

.vertical-content .topics {
  margin-top: 40px;
  font-size: 0.8em;
  font-style: italic;
}

.section-content .right .topics {
  margin-top: 0;
}

.section-content .right .topics, .section-content .right .flex-table {
  padding: 0 100px;
}

.section-content .flex-table {
  margin-bottom: 50px;
}

.vertical-content .topics li {
  display: inline-block;
  padding-right: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  border-right: 1px solid var(--main-outline-color);
}
.vertical-content .topics li:last-child {
  border: none;
}

.flex-table {
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* spacing between rows */
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
}

.flex-table .row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem; /* space between label and value */
}

.flex-table .label {
  width: 120px;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  flex-shrink: 0;
}

.flex-table .value {
  font-size: 0.9em;
}

/* Detail: description block (for media objects) */
.detail-description-block {
  padding: 0 100px;
  margin-bottom: 50px;
}

.right .detail-description-block > h3 {
  /* mimic the label styling used in the flex-table */
  color: var(--main-font-color);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0;
}

.right .detail-description-block > p {
  margin: 0; /* keep it tight under the title */
  color: var(--main-light-font-color);
  padding: 0;
}

.content-section {
  /*height: 100%;*/
  color: var(--main-font-color);
  border-bottom: 1px solid var(--main-outline-color);
  padding-top: 20px;
  box-sizing: border-box;
}

.content-section .section-header h2 {
  font-style: italic;
}

.content-section .section-content {
  height: 100%;
}

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

/* sidebar accordion must be allowed to collapse */
#discover-connections .content-section .section-content {
  height: auto;
}

/* collapsed = 0, open = scrollable */
#discover-connections .content-section.collapsible .section-content {
  max-height: 0;
  overflow: hidden;
}

#discover-connections .content-section.collapsible.is-open .section-content {
  overflow-y: auto;
}

/* Discover Connections → Project list */
#discover-connections .dc-projects-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 5px;
}

#discover-connections .dc-project-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;          /* spacing between items */
  cursor: pointer;
}

#discover-connections .dc-project-radio {
  width: 14px;
  height: 14px;
  border: 1px solid var(--main-outline-color);
  border-radius: 9999px;
  flex: 0 0 14px;
  position: relative;
}

#discover-connections .dc-project-item.is-selected .dc-project-radio::after,
#discover-connections .dc-project-item:hover .dc-project-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--main-outline-color);
  border-radius: 9999px;
}

#discover-connections .dc-project-text strong {
  display: block;
  font-size: 0.82rem;            /* reduced font */
  line-height: 1.2;
}

#discover-connections .dc-project-subtitle {
  font-size: 0.72rem;            /* smaller subtitle */
  line-height: 1.25;
  opacity: 0.85;
}

.content-section.multi-column .section-content {
  display: flex;
}

.content-section .left {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}

.content-section .right {
  padding-top: 20px;
  max-width: 50%;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.content-section.sub-section .left {
  width: 30%;
}

.content-section.sub-section .right {
  max-width: 70%;
}

.content-section.sub-section .right p {
  padding-left: 0;
}

.content-section h3 {
  font-size: 1em;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

/* Animate content height */
.content-section.collapsible .section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

#discover-connections .content-section.collapsible.is-open .section-content {
  overflow-y: auto;
}

/* Little separation between sections (optional) */
.content-section + .content-section { margin-top: 12px; }

.content-section ul {
  margin-bottom: 40px;
}

.content-section .detail-content ul {
  font-size: 0.9em;
  padding: 0 100px;
  margin-left: 20px;
  list-style: disc;
}
.content-section .detail-content ul li {
  margin-bottom: 10px;
}

/* Clickable footnote markers (superscript digits) */
.detail-footnote-ref {
  cursor: pointer;
}

.detail-footnote-ref:hover {
  text-decoration: underline;
}

.content-section .detail-content .detail-footnotes {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--main-light-outline-color);
}

/* Make header a flex row so the chevron can sit at the far right */
.content-section.collapsible h3,
.content-section.collapsible .section-header {
  display: flex;
  align-items: center;
}

/* sidebar section expand/collapse icon (mask-based, inherits currentColor) */
.content-section.collapsible h3::after,
.content-section.collapsible .section-header::after {
  content: '';
  margin-left: auto;
  width: var(--section-icon-size, 8px);
  height: var(--section-icon-size, 8px);
  display: inline-block;

  /* fill color = current text color by default, configurable via --section-toggle-icon-color */
  background-color: var(--section-toggle-icon-color, currentColor);

  /* use the same asset as a mask so it can be tinted */
  -webkit-mask: var(--icon-section-toggle, url('img/icons/arrow_expand.svg')) no-repeat center / contain;
          mask: var(--icon-section-toggle, url('img/icons/arrow_expand.svg')) no-repeat center / contain;

  transition: transform .2s ease;
  /* closed = SVG as-is (points right) */
}

/* open = opposite direction of the SVG (right → left) */
.content-section.collapsible.is-open h3::after,
.content-section.collapsible.is-open .section-header::after {
  transform: rotate(180deg);
}

/* Expanded width = handle + computed content width */
#slide-ins .slide-in[data-mode="menu"].expanded {
  width: auto; /* override any 100% leftovers */
  max-width: calc(var(--handle-w) + var(--slidein-exp-width));
}

/* Handle column: fixed */
#slide-ins .slide-in[data-mode="menu"] .slide-in-handle {
  flex: 0 0 var(--handle-w);
  width: var(--handle-w);
}

/* =========================
   FIXED SELECTED TAGS BAR
   ========================= */

#selection-bar {
  position: fixed;
  left: 0;
  right: var(--slideins-visible, 0px); /* ← subtracts live sidebar width */
  bottom: 0;
  height: var(--header-h);                /* same height as header */
  background: var(--main-bg-color);                    /* same background as header */
  display: grid;                          /* toggled via .show */
  align-items: center;
  justify-content: center;                /* center the pills horizontally */
  padding: 0 12px;
  z-index: 1300;                          /* above counters/FAB, below overlay menu */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s ease, opacity .4s ease;
  
  /* layout lives on the base state now (not only when .show) */
  grid-template-columns: 1fr auto 1fr;  /* [spacer] [tags] [actions] */
  align-items: center;
}
#selection-bar.show { 
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Use gallery's .button style in the selection bar, but no big top margin */
#selection-bar .button { 
  margin-top: 0;        /* gallery's .button has margin-top:60px; not wanted here */
  background: var(--main-bg-color);
}
#selection-bar .button:hover {
  cursor: pointer;
}

#selection-bar .tags {                /* center column */
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#selection-bar .tags li {
  display: inline-flex;
  align-items: center;                    /* vertical centering */
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--main-bright-bg-color);
  cursor: pointer;                        /* entire pill is clickable to remove */
  user-select: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
}
#selection-bar .tags li .x {
  font-weight: 700;
  line-height: 1;
}

#selection-bar .sb-actions {          /* right column */
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
}

/* When selection bar is visible, push up bottom overlays by its height */
#workspace.has-selection-bar #offgrid-bottom { bottom: calc(8px + var(--header-h)); transition: bottom .4s ease;}
#workspace.has-selection-bar #fab-bottom-left { bottom: calc(var(--fab-edge-gap) + var(--header-h)); transition: bottom .4s ease;}

/* ====== TWO-COLUMN MENU BODY ====== */
#slide-ins .slide-in[data-mode="menu"] {
  /* your smart target from before (tweak as needed) */
  --slidein-exp-width: clamp(var(--slidein-min), var(--slidein-target), var(--slidein-viewport-cap));

  /* animate max-width, not width */
  max-width: var(--handle-w);  /* collapsed = just the handle */
  transition: max-width 0.4s ease;

  display: flex;
  width: auto;
  max-width: var(--handle-w);              /* collapsed */
  transition: max-width .4s ease;
  overflow: hidden;
  --handle-w: 40px;
  --slidein-target: 550px;
  --slidein-min: 320px;
  --slidein-edge-gap: 24px;
  --viewport-cap: calc(100dvw - var(--slidein-edge-gap));

  /* main column width after clamps */
  --main-w: clamp(var(--slidein-min), var(--slidein-target), var(--viewport-cap));

  /* secondary panel targets (tweak as needed) */
  --secondary-target: 420px;
  --secondary-min: 260px;

  /* remaining space available for the secondary (never exceed viewport) */
  --secondary-cap: calc(var(--viewport-cap) - var(--handle-w) - var(--main-w));
  --secondary-w: clamp(var(--secondary-min), var(--secondary-target), var(--secondary-cap));
}

#slide-ins .slide-in[data-mode="menu"].expanded {
  /* expanded width with only main panel visible */
  max-width: calc(var(--handle-w) + var(--main-w));
}

/* When secondary is open, add its width too */
#slide-ins .slide-in[data-mode="menu"].expanded.secondary-open {
  max-width: calc(var(--handle-w) + var(--secondary-w) + var(--main-w));
}

/* Handle column fixed */
#slide-ins .slide-in[data-mode="menu"] .slide-in-handle {
  flex: 0 0 var(--handle-w);
  width: var(--handle-w);
}

/* Body is always flex; we hide it via visibility/pointer-events for collapsed state */
#slide-ins .slide-in[data-mode="menu"] .slide-in-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* Collapsed menu slide-ins: keep layout for animation, but hide & unfocus content */
#slide-ins .slide-in[data-mode="menu"]:not(.expanded) .slide-in-body {
  visibility: hidden;
  pointer-events: none;
}

/* Expanded menu slide-ins: show content normally */
#slide-ins .slide-in[data-mode="menu"].expanded .slide-in-body {
  visibility: visible;
  pointer-events: auto;
}

/* Secondary panel: animates width; hidden at 0 */
#slide-ins .slide-in[data-mode="menu"] .secondary-pane {
  width: 0;
  flex: 0 0 auto;
  overflow: hidden;
  transition: width .35s ease;
  padding: 0; /* gets padding only when open (see below) */
  box-sizing: border-box;   /* 👈 add this */
}

/* When open, secondary takes its computed width */
#slide-ins .slide-in[data-mode="menu"].secondary-open .secondary-pane {
  width: var(--secondary-w);
  padding: 25px 30px 0px 30px;
  /* allow long content to scroll */
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges; /* matches main column behavior */
  -webkit-overflow-scrolling: touch;   /* smoother on iOS */
}

#slide-ins .slide-in[data-mode="menu"] .vertical-content {
  /* was: flex: 1 1 auto; min-width: var(--main-w); ... */
  flex: 0 0 var(--main-w);
  width: var(--main-w);
  min-width: var(--main-w);
  max-width: var(--main-w);
  max-height: 100%;
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-gutter: stable both-edges; /* no right-edge nudge when scrollbar appears */
}

/* Slide-ins can be hidden per mode (menu vs content) */
#slide-ins .slide-in.is-hidden {
  display: none;
}

/* Simple typography for secondary pane */
.secondary-pane h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.secondary-pane p { margin: 0 0 12px; line-height: 1.6; font-size: .9rem; }

/* Content + sticky footer inside secondary pane */
.secondary-pane-content {
  padding-bottom: 16px; /* small buffer above the footer */
}

.secondary-pane-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--main-bg-color);
}

.secondary-pane .back {
  display: inline-flex; 
  align-items: center; gap: .4rem;
  padding: 6px 10px; 
  border: 1px solid var(--main-outline-color); 
  border-radius: 999px; 
  background: var(--main-bright-bg-color); 
  cursor: pointer;
  margin-bottom: 10px;
  font-size: .75rem;
}

/* Themes list */
.themes-list {
  list-style: none;
  padding: 10px 0 0;
  display: grid;
  gap: 15px;
}

/* Row button with tiny circular icon + label */
.themes-list .theme-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 0;           /* minimal target padding, no visible box */
  cursor: pointer;
  line-height: 1.1;
}

.themes-list .theme-icon {
  /* size */
  width: 15px;
  height: 15px;

  /* same visual tokens as .fab */
  background: var(--main-bright-bg-color);
  border: 1px solid var(--main-outline-color);
  border-radius: 50%;
  color: var(--main-font-color);
  box-shadow: 2px 2px 0px rgba(0,0,0,.12);

  /* center the "?" cleanly */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;      /* keeps the "?" crisp at 15x15 */
  line-height: 1;
  user-select: none;
}

/* Match .fab hover/active behavior */
.themes-list .theme-link:hover .theme-icon {
  box-shadow: 2px 3px 4px rgba(0,0,0,.18);
}
.themes-list .theme-link:active .theme-icon {
  transform: scale(0.98);
}

.themes-list .theme-label {
  margin-left: 20px;
  text-decoration: none;    /* default */
  color: var(--main-font-color);
}

/* Active state: underline label */
.theme-item.active .theme-label, .theme-item .theme-label:hover {
  text-decoration: underline;
}

#themes-group-select { margin-top: 6px; }

/* Secondary pane: match background + light separator to its right */
#slide-ins .slide-in[data-mode="menu"] .secondary-pane{
  background: var(--main-bg-color);
  border-left: 1px solid var(--main-light-outline-color);  /* separator between secondary and main */
  border-right: 1px solid var(--main-light-outline-color);  /* separator between secondary and main */
}


#slide-ins .slide-in[data-mode="menu"] .content-section {
  border-bottom: none;
}

/* START TAGS */

.tags {
  list-style: none; /* Remove default list styling */
  padding: 0;
  display: flex;
  gap: 8px; /* Spacing between tags */
  flex-wrap: wrap; /* Allow wrapping if too many tags */
}

.tags li {
  font-size: 0.5em;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid var(--main-button-outline-color);
  padding: 6px 10px;
  border-radius: 16px; /* Rounded corners */
  cursor: pointer;
  transition: background-color 0.2s;
  display: inline-block; /* Ensures button-like appearance */
  background-color: var(--main-bright-bg-color);
  letter-spacing: 0.06em;
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); /* ← added */
}

/* Slide-in tags: unselectable in AND mode */
.tags li.disabled {
  opacity: 0.45;
  border-color: var(--main-button-inactive-outline-color) !important;
  color: var(--main-button-inactive-font-color) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  pointer-events: none; /* no mouse/touch */
  outline: none;        /* if they somehow get focus, don’t show focus ring */
}

.tags li:hover {
  background-color: #EED9C4; /* Darker blue on hover */
}

.tag-button {
  display: inline-block;
  margin: 5px 5px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid #ccc; /* will be overridden inline */
  background-color: white;
  color: #555; /* default text color */
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Tag match toggle: 2 icons + separator */
.tag-match-toggle {
  position: sticky;
  bottom: 0;                 /* or top: 0; */
  padding: 8px 0;
  background: var(--main-bg-color);  /* so tags don’t show through */
  z-index: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* 10px between icon and separator, and separator and icon */
  margin: 10px 0 0 0;
  color: var(--main-outline-color);
}

.tag-mode-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--main-font-color);
}

.tag-mode-btn :is(img, svg) {
  width: 22px;
  height: 22px;
  display: block;
  opacity: .4;            /* non-selected */
  color: var(--main-font-color);
}

.tag-mode-btn.is-selected :is(img, svg) {
  opacity: 1;             /* selected */
  color: var(--main-font-color);
}

.tag-match-toggle .tag-mode-separator, .theme-toggle .tag-mode-separator {
  width: 1px;
  height: 18px;
  background: var(--main-outline-color);
  flex: 0 0 1px;
}

/* Text variant of the two-way toggle used in the header */
.header-right .tag-match-toggle { margin-right: 12px; } /* space before burger */
.tag-mode-btn .txt { opacity: .4; font-size: 0.85rem; }
.tag-mode-btn.is-selected .txt { opacity: 1; font-weight: 600; }

/* Theme toggle uses same structure as tag-match toggle, but with text */
.theme-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--main-outline-color); margin-right: 5px; }
.theme-toggle .tag-mode-btn { color: var(--main-font-color); }
.theme-toggle .tag-mode-btn .txt { opacity: .4; font-size: 0.8rem; font-weight: normal }
.theme-toggle .tag-mode-btn.is-selected .txt { opacity: 1; }

/* Spacing & titles for grouped tags */
.tag-group-block { margin-top: 16px; }
.tag-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 10px 0 6px;
  color: #555;
}

/* Group switcher row under the visible tag list */
.tag-group-switch {
  margin-top: 8px;
  margin-bottom: 8px;          /* override generic .content-section ul margin */
  font-size: 0.85rem;
  color: var(--main-font-color);
  list-style: none;            /* remove bullets */
  padding: 0;
  margin-left: 0;
  display: inline-flex;        /* lay items out horizontally */
  flex-wrap: wrap;             /* allow wrapping if they don’t fit in one line */
}

ul.tag-group-switch {
  margin-bottom: 0;
}

.tag-group-switch li {
  display: inline-flex;
  align-items: center;
  padding-right: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-right: 1px solid var(--main-outline-color); /* separator */
}

.tag-group-switch li:last-child {
  border-right: none;          /* no separator after the last item */
  margin-right: 0;
  padding-right: 0;
}

.tag-group-switch .group-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.tag-group-switch .group-btn:hover {
  text-decoration: underline;
}

.tag-group-switch .group-btn.is-active {
  font-weight: 600;
  text-decoration: underline;
}

/* END TAGS */

/* START OVERLAY MENU */

#overlay-menu {
  position: fixed;
  top: var(--header-h);
  left: 0; 
  right: 0; 
  bottom: 0;
  background: var(--main-bg-color);
  color: var(--main-font-color);
  z-index: 9999;
  display: none;
  flex-direction: column;
  padding: 0px 10px 60px 100px;
}

#overlay-menu.active {
  display: flex;
}

.overlay-content {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding: 60px 0;
}

.main-menu {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 4em;
  margin-top: 100px;
}

.menu-item {
  cursor: pointer;
  font-weight: 300;
}

.menu-item:hover {
  font-weight: 500;
}

.menu-item.active {
  font-weight: 500;
  position: relative;
}

.menu-item.active::before {
  content: "— ";
  margin-right: 10px;
}

.sub-menu {
  flex: 1;
  font-size: 2em;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sub-menu div:hover {
  font-weight: 700;
}

.sub-menu div {
  cursor: pointer;
  font-weight: 200;
}

.sub-menu div.active {
  font-weight: 700;
  position: relative;
}

.sub-menu div.active::before {
  content: "— ";
  margin-right: 10px;
}

.overlay-footer {
  display: flex;
  gap: 20px;
  font-size: 0.9em;
  justify-content: start;
}

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

/* END OVERLAY MENU */


/* INVISIBLE OBJECTS COUNTERS */

.count-invisible-objects {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding: 6px;
  font-size: 0.5em;
  border-radius: 10px;
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}

.count-invisible-objects .value {
  font-style: italic;
}

/* Grid-specific placement (keeps demo styles intact) */
#grid-shell .count-invisible-objects { 
  z-index: 1100;                 /* above grid elements */
  /*box-shadow: 0 1px 3px rgba(0,0,0,.06);*/
}
  
/* Top / Bottom centered (no rotation). Explicitly unset conflicting edges. */
#workspace .count-invisible-objects.top    { top: 8px;    bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
#workspace .count-invisible-objects.bottom { top: auto;   bottom: 8px;  left: 50%; right: auto; transform: translateX(-50%); }

/* Left / Right vertically centered (rotate like in the demo). Explicitly unset conflicting edges. */

/* The right badge sits to the LEFT of the slide-in width + 8px. */
#workspace { --slideins-width: 0px; } /* default */
  
/* Optional: fade when zero to reduce clutter */
#workspace .count-invisible-objects[aria-hidden="true"] { opacity: 0; pointer-events: none; }
#group-gallery > .count-invisible-objects[aria-hidden="true"] { opacity: 0; pointer-events: none; }


/* Keep slashes neutral and let per-tag numbers inherit tag color */
#workspace .count-invisible-objects .breakdown .sep { color: inherit; opacity: .9; margin: 0 .25em; }
#workspace .count-invisible-objects .breakdown .tag-count { font-style: italic; }

/* === FINAL side-counter layout & styling (matches top/bottom) === */

/* OUTER anchors: fixed gap via left/right, vertical centering only; no rotation or styling here */

/* Rotate only the inner wrapper so the anchor distance stays constant */

/* === Gallery side counters (match top/bottom look; fixed 8px edge gap) === */
.count-invisible-objects.left,
.count-invisible-objects.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /* no rotation on the outer */
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  z-index: 1100;
}

.count-invisible-objects.left  { left: 8px;  right: auto; }
.count-invisible-objects.right { right: 8px; left:  auto; }

/* INNER wrapper: rotate + SAME visual style as top/bottom counters */
.count-invisible-objects.left  .rot,
.count-invisible-objects.right .rot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--main-bg-color);          /* same as top/bottom */
  border-radius: 10px;           /* same radius */
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Ensure a hard space between number and the trailing label inside rotated counters */
#workspace .count-invisible-objects .rot .value::after,
#group-gallery > .count-invisible-objects .rot .value::after {
  content: "\00a0"; /* NBSP */
}

.count-invisible-objects.left  .rot {
  transform-origin: top left !important;
  transform: translateX(var(--side-gap)) rotate(-90deg) translateX(-50%) !important;
}

.count-invisible-objects.right .rot {
  transform-origin: top right !important;
  transform: translateX(calc(-1 * (var(--side-gap, 8px) + var(--slideins-visible, 0px)))) rotate(90deg) translateX(50%) !important;
}

/* Side counters: add a small gap between the number and the default "Elements" word */
#workspace .count-invisible-objects .rot .value,
#group-gallery > .count-invisible-objects .rot .value {
  margin-right: 0.3em;
}

/* When a breakdown is rendered, we don’t need extra margin before the “/ …” */
#workspace .count-invisible-objects .rot.has-breakdown .value,
#group-gallery > .count-invisible-objects .rot.has-breakdown .value {
  margin-right: 0;
}

#workspace .count-invisible-objects .breakdown .tag-dot {
  margin-left: .15em;   /* small breathing room after number */
  font-weight: 700;     /* match the visual emphasis of counts */
}

/* Make counters feel clickable */
#workspace .count-invisible-objects .offgrid-total,
#workspace .count-invisible-objects .offgrid-seg {
  cursor: pointer;
}

#workspace .count-invisible-objects .offgrid-seg.is-zero {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

#workspace .count-invisible-objects,
#group-gallery > .count-invisible-objects {
  font-family: "Noto Serif", serif !important;
  font-style: italic !important;
  font-weight: 400; /* adjust to 700 if you want bolder numbers/text */
  font-size: 9px;
}

#detail-content .detail-nav-arrows .detail-nav-arrow {
  font-family: "Noto Serif", serif !important;
  font-style: italic !important;
}

/* quick visual cue when a target is chosen */
.offgrid-highlight {
  outline: 3px solid var(--offgrid-highlight-color, magenta);
  outline-offset: 2px;
  animation: offgridPulse .9s ease-out 1;
}
@keyframes offgridPulse {
  0% { outline-color: transparent; }
  30% { outline-color: var(--offgrid-highlight-color, magenta); }
  100% { outline-color: transparent; }
}

/* === Ken Burns (pan + subtle zoom) === */
.kb-wrap { position: relative; overflow: hidden; }
.kb-img  { display:block; width:100%; height:100%; object-fit:cover; transform-origin:center; will-change: transform; }

/* Animate only on hover (or focus for keyboard users) */
.kb-wrap:hover .kb-img,
.kb-wrap:focus-within .kb-img {
  animation: kb-pan var(--kb-duration, 12s) linear infinite alternate;
}

@keyframes kb-pan {
  from {
    transform:
      translate(var(--kb-x0, 0%), var(--kb-y0, 0%))
      scale(var(--kb-s0, 1.06));
  }
  to {
    transform:
      translate(var(--kb-x1, 0%), var(--kb-y1, 0%))
      scale(var(--kb-s1, 1.12));
  }
}

/* Accessibility: disable motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kb-img.kb-anim {
    animation: none !important;
    transform: none !important;
  }
}

.menu-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--header-fg, var(--main-font-color));     /* currentColor for bars */
  /* avoid global hover “boldening” or filters */
  font-weight: 400;
  filter: none;
}

.burger { overflow: visible; }


/* Rect bars: use fill only; never scale → thickness stays constant */
.burger--rect .bar {
  fill: currentColor;
  stroke: none;
  height: var(--burger-bar-thickness); /* ← thickness here */
  rx: var(--burger-bar-radius);        /* rounded ends that match */
  transform: translateX(0);             /* base transform */
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  shape-rendering: crispEdges;          /* crisp 1px edges */
}

/* Middle bar offset (your look) */
.burger .bar--mid { transform: translateX(var(--burger-offset)); }

/* Hover (reverse): middle moves slightly LEFT; top/bottom slightly RIGHT */
.menu-trigger:hover .burger--rect .bar--mid { transform: translateX(var(--hover-mid-left)); }
.menu-trigger:hover .burger--rect .bar--top { transform: translateX(var(--hover-top-right)); }
.menu-trigger:hover .burger--rect .bar--bot { transform: translateX(var(--hover-bot-right)); }

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  .burger--rect .bar { transition: none; }
}

/* Size you already had for the header-right area */
.header-right { display: flex; justify-content: flex-end; }
.header-right .menu-trigger svg {
  width: var(--burger-width);
  height: var(--burger-height);
}

/* Close button in the main header (hidden by default) */
.header-right .header-close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  display: none;                 /* shown only in menu-open mode */
  place-items: center;
  cursor: pointer;
  color: var(--header-fg, var(--main-font-color));
}
.header-right .header-close::before {
  content: '';
  display: block;
  /* square icon roughly matching the burger’s visual weight */
  width: var(--burger-height);
  height: var(--burger-height);
  background: currentColor;
  -webkit-mask: var(--icon-detail-close) no-repeat center / contain;
          mask: var(--icon-detail-close) no-repeat center / contain;
}

/* Overlay state toggles the header controls */
body.menu-open .header-right .menu-trigger { display: none; }
body.menu-open .header-right .theme-toggle { display: none; }
body.menu-open .header-right .header-close { display: inline-grid; }

/* === Research text page === */
.text-subpage { display: none; }              /* follow your .active toggling convention */
.text-subpage.active { display: block; }

.text-subpage .text-page {
  padding: 80px 200px 0 200px;                        /* 150 top/bottom, 100 left/right */
  box-sizing: border-box;
  width: 100%;
}

.slide-in .text-page h2 {
  font-size: 2em;
}

.slide-in .text-page p {
  padding: 0;
}

/* Typography */
.text-subpage h2 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 500;
  font-size: 0.9em;
  margin: 0 0 20px;
  color: var(--main-light-font-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.text-subpage h1 {
  font-family: "Noto Serif", serif;            /* you already load this family in <head> */
  font-size: 2.5em;
  line-height: 1.1;
  margin: 0 0 30px;
}

.text-subpage p {
  font-family: "Albert Sans", sans-serif;
  font-size: 1.2em;
  margin: 0 0 20px;
  padding: 0;
}
.text-subpage p:last-of-type { margin-bottom: 0; }

/* Reset list + arrow bullets rotated 90° */
.text-subpage ul.arrow-list {
  list-style: none;
  padding: 0;
  margin: 50px 0 0;
}
.text-subpage ul.arrow-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  font-size: 1.2em;
}
.text-subpage ul.arrow-list li a {
  text-decoration: none;
  color: var(--main-font-color);
}
.text-subpage ul.arrow-list li:last-child { margin-bottom: 0; }
.text-subpage ul.arrow-list li::before {
  content: "";
  width: 14px;
  height: 16px;
  background: url('img/icons/arrow_counter_10x12px.svg') no-repeat center/contain;
  transform: rotate(90deg);
}

/* Stack rows vertically */
.text-page .two-col-table {
  display: grid;
  grid-template-columns: 1fr; /* one column = rows under each other */
  row-gap: 24px;
  margin-top: 100px;
}

.slide-in .text-page .two-col-table {
  margin-top: 50px;
}

.slide-in .text-page h1 {
  font-size: 2em;
}

/* Each row: two columns side by side */
.text-page .two-col-row {
  display: grid;
  grid-template-columns: 25% 60%;
  column-gap: 15%;   /* remaining 15% becomes the gutter */
  align-items: start;
}

.text-page .two-col-row .left h3 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 500;
  font-size: 0.9em;
  margin: 0;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.text-page .two-col-row .right p {
  font-family: "Albert Sans", sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  margin: 0 0 12px;
}
.text-page .two-col-row .right p:last-child { margin-bottom: 0; }

/* ================= Our Team / Authors subpage ================= */

.text-subpage .authors-accordion {
  margin-top: 0px;
}

/* Make author sections collapsible (reuse global collapsible rules) */
.text-subpage .author-section {
  padding-top: 0; /* tighter; header already provides spacing */
}

/* Header look + clickability */
.text-subpage .author-section .section-header {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 22px 0;
}

.text-subpage .author-section .author-name {
  font-family: "Noto Serif Display", serif;
  font-size: 1.6em;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Team subpage: animate height + fade content in nicely */
#subpage-team .author-section.collapsible .section-content {
  max-height: 0;
  overflow: hidden;

  opacity: 0;                 /* NEW: hidden while collapsed */
  transition:
    max-height .35s ease,
    opacity .2s ease;         /* NEW */
}

/* When open: fade in slightly AFTER height starts expanding */
#subpage-team .author-section.collapsible.is-open .section-content {
  overflow: visible;
  opacity: 1;                 /* NEW */

  transition-delay:
    0ms,                      /* max-height: no delay */
    120ms;                    /* opacity: small delay for nicer feel */
}

/* Author meta */
.text-subpage .author-meta .position-dept {
  font-size: 1em;
  margin-bottom: 8px;
}
.text-subpage .author-meta .institution {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
  color: var(--main-light-font-color);
}
.text-subpage .author-meta .location-icon {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* Square author photo */
.text-subpage .author-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--main-bright-bg-color);
  overflow: hidden;
  margin-bottom: 40px;
}
.text-subpage .author-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Further reading block at bottom of subpages */
.subpage-further-reading {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--main-light-outline-color);
}

.subpage-further-reading h3 {
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans",
    sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 25px 0;
  color: var(--main-font-color);
}

.subpage-further-reading > p {
  margin-bottom: 20px !important;
}

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

/* List layout: arrow on left, text on right */
.further-reading-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.further-reading-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.further-reading-list li:last-child {
  margin-bottom: 0;
}

/* Arrow icon column */
.further-reading-icon {
  margin-top: 4px;
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.further-reading-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.further-reading-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.further-reading-title {
  font-family: "Albert Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  color: var(--main-font-color);
}

.further-reading-title:hover {
  text-decoration: underline;
}

.further-reading-subline {
  font-size: 0.9em;
  color: var(--main-light-font-color);
}

#subpage-team .people-heading {
  margin-top: 80px;   /* tweak value as you like */
  margin-bottom: 20px;
}

/* Team subpage only: remove global chevron on h3,
  keep only the far-right chevron on .section-header */
#subpage-team .author-section.collapsible h3::after {
  content: none !important;
}

#subpage-team .two-col-table {
  margin-top: 50px;
}

#subpage-team .two-col-row .left {
  width: 80%;
}

#subpage-team .right img {
  margin-top: 0;
  padding-left: 0;
}

/* Team subpage only: don't inherit global 50% right-column limit */
#subpage-team .two-col-row .right {
  padding-top: 0;
  max-width: none;
  width: auto;
  height: auto;
  overflow: visible;
  padding-top: 0; /* optional: avoids extra top padding in rows */
}

/* === Scroll-up CTA (generic for any .text-subpage) === */
.scroll-up-cta {
  display: flex;
  justify-content: center;
  margin: 64px 0 0 0;
}

.scroll-up {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-font-color);
  font: inherit;                 /* use page font */
}

.scroll-up:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 4px;
}

.scroll-up .icon svg {
  width: 18px;                   /* tweak to taste */
  height: 22px;
  display: block;
  transform: rotate(-90deg);     /* arrow points UP */
}

.scroll-up .label {
  font-size: 0.9em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#section-notes, #section-references {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid var(--main-font-color);
}

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

.related-theme-item {
  margin-bottom: 50px;
}
.related-theme-item:last-child {
  margin-bottom: 0;
}