/* ============================================================
   Lizania Cruz — portfolio (placeholder edition)
   Print / editorial language: light warm-white paper, hairline rules,
   Urbanist (geometric sans) + IBM Plex Mono (labels).
   ============================================================ */

:root {
  --paper: #faf9f6;          /* light warm white */
  --ink:   #161412;          /* near-black */
  --ink-2: #56504a;          /* muted */
  --rule:  #1614121a;        /* hairline */
  --rule-strong: #161412;
  --accent: #b4321f;         /* editorial red */
  --pane-gap: 0;
  --stroke: 1px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(300px, 38%) 1fr;
  background: var(--paper);
  color: var(--ink);
  font-family: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono, .masthead__nav, .index-list, .colophon, .meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- panes ---------- */
.pane { height: 100vh; overflow-y: auto; }

.pane--index {
  border-right: var(--stroke) solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.25rem;
}

.pane--detail { padding: 0; overflow-x: clip; } /* contain the info slide-in */
.pane--detail:focus { outline: none; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 2px solid var(--rule-strong); padding-bottom: 1.1rem; }

/* mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle::after { content: "Menu +"; }
body.nav-open .nav-toggle::after { content: "Close ×"; }

.masthead__name {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: .96;
  letter-spacing: -.01em;
}
.masthead__name a { color: inherit; text-decoration: none; }

.masthead__role {
  margin: .55rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.masthead__nav {
  margin-top: 1.1rem;
  display: flex;
  gap: 1.4rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.masthead__nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- project index ---------- */
.index-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: .25rem;
}
.index-group__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 .15rem;
}
/* the stroke separating single pieces from series */
.index-divider {
  border-top: 2px solid var(--rule-strong);
  margin: 1.4rem 0;
}
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.index-item {
  border-bottom: 1px solid var(--rule);
}
.index-item__btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .85rem .25rem .8rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem;
  color: var(--ink);
  font-family: "Urbanist", sans-serif;
}
.index-item__num {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  color: var(--ink-2);
  padding-top: .15rem;
}
.index-item__title {
  font-size: 1.18rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  transition: transform .18s ease;
}
.index-item__date {
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.index-item__btn:hover .index-item__title { transform: translateX(6px); }
.index-item__btn:hover .index-item__num { color: var(--accent); }

.index-item.is-active .index-item__title {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.index-item.is-active .index-item__num { color: var(--accent); }

/* series items: small ↗ marker, and active state when its page is open */
.index-item__go {
  font-family: "IBM Plex Mono", monospace;
  font-size: .62em;
  vertical-align: .35em;
  color: var(--ink-2);
  margin-left: .35em;
}
.index-item__btn:hover .index-item__go { color: var(--accent); }
.index-item.is-series-open .index-item__title { font-style: italic; }
.index-item.is-series-open .index-item__num,
.index-item.is-series-open .index-item__go { color: var(--accent); }

/* ---------- colophon ---------- */
.colophon {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .62rem;
  letter-spacing: .03em;
  color: var(--ink-2);
}

/* barely-visible designer signature, bottom-right of the viewport */
.signature {
  position: fixed;
  right: 1rem;
  bottom: .7rem;
  z-index: 2;
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .54rem;
  letter-spacing: .14em;
  color: var(--ink);
  opacity: .16;
}

/* ============================================================
   DETAIL pane content
   ============================================================ */
.detail__inner { max-width: 1100px; }

/* running header strip */
.detail-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  padding: .6rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* prev/next browsing arrows in the strip (replaces the project number) */
.strip-nav { display: inline-flex; gap: 1.1rem; align-items: center; flex-shrink: 0; }
.strip-nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 .15rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
}
.strip-nav__btn:hover:not(:disabled) { color: var(--accent); }
.strip-nav__btn:disabled { opacity: .25; cursor: default; }

.detail-body { padding: 2.5rem 2.5rem 5rem; position: relative; }

/* project header */
.proj-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}
.proj-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 16ch;
}
.proj-meta {
  margin: 1rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.proj-summary {
  margin: 1.6rem 0 0;
  font-size: 1.45rem;
  line-height: 1.35;
  max-width: 54ch; /* wider measure → longer lines, less vertical space for the images */
  text-wrap: pretty;
}

/* ---------- research links (inline source terms) ---------- */
.rlink {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 .04em;
  cursor: pointer;
  border-bottom: 1.5px dotted var(--accent);
  transition: background .15s ease;
}
.rlink::after {
  content: "\2197";              /* ↗ */
  font-family: "IBM Plex Mono", monospace;
  font-size: .62em;
  vertical-align: .5em;
  color: var(--accent);
  margin-left: .08em;
}
.rlink:hover { background: #b4321f18; }
.rlink.is-open { background: var(--accent); color: var(--paper); border-bottom-color: var(--accent); }
.rlink.is-open::after { color: var(--paper); }

/* ---------- floating source window: overlays content below, no reflow ---------- */
.proj-head { min-width: 0; }

/* framed scrollable source window — floats over the whole site, draggable +
   resizable, multiple can be open at once. JS sets left/top/width/height. */
.research-panel {
  position: fixed;
  z-index: 30;
  min-width: 300px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong); /* match the info-column divider */
  background: #fff;
  overflow: hidden;
}
.research-panel.dragging { user-select: none; }
.research-panel.dragging .rp-frame { pointer-events: none; } /* keep mouse events during drag/resize */
.rp-head { cursor: move; }
.rp-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 4;
  background: linear-gradient(135deg, transparent 0 48%, #16141240 48% 54%, transparent 54% 72%, #16141240 72% 78%, transparent 78%);
}
.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
.rp-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rp-source {
  font-family: "IBM Plex Mono", monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.rp-term { font-size: 1.02rem; font-weight: 600; line-height: 1; }
.rp-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.rp-open, .rp-close {
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.rp-open:hover, .rp-close:hover { color: var(--accent); }
.rp-close { font-size: 1rem; line-height: 1; }
.rp-framewrap { position: relative; flex: 1; min-height: 0; background: #fff; }
.rp-frame { width: 100%; height: 100%; border: 0; display: block; }
.rp-fallback {
  position: absolute; inset: 0; display: none;
  flex-direction: column; gap: .8rem; align-items: flex-start; justify-content: center;
  padding: 2rem; background: var(--paper);
  font-family: "IBM Plex Mono", monospace; font-size: .74rem; line-height: 1.6; color: var(--ink-2);
}
.rp-framewrap.blocked .rp-fallback { display: flex; }
.rp-fallback a { color: var(--accent); }
.rp-url {
  font-family: "IBM Plex Mono", monospace; font-size: .56rem;
  color: var(--ink-2); padding: .35rem .85rem; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--paper);
}

/* rule with marginalia */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.4rem 0 1.6rem;
  border-top: 1px solid var(--rule-strong);
  padding-top: .5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* image plates */
.plates { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(12, 1fr); }
.plate { margin: 0; grid-column: span 6; }
.plate--wide { grid-column: span 12; }
.plate--lead { grid-column: span 12; }
.plate img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule-strong);
  background: #ddd8cf;
}
.plate figcaption {
  margin-top: .5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem;
  letter-spacing: .03em;
  color: var(--ink-2);
}

/* prev / next */
.proj-nav {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid var(--rule-strong);
  padding-top: 1rem;
}
.proj-nav button {
  background: none; border: 0; cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.proj-nav button:hover { color: var(--accent); }
.proj-nav button[disabled] { opacity: .3; cursor: default; }

/* ---------- home / landing (index open, nothing selected) ---------- */
.home { max-width: 60ch; }
.home-title {
  margin: .2rem 0 0;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.home-hint {
  margin: 1.8rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- cover / about / recent ---------- */
.cover { padding: 0; }
.cover__plate { border-bottom: 1px solid var(--rule-strong); }
.cover__plate img { width: 100%; height: 56vh; object-fit: cover; display: block; filter: grayscale(.15); }

.prose { max-width: 56ch; }
.prose p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.1rem; }
.prose .lead { font-size: 1.5rem; line-height: 1.35; }

.section-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 2.4rem 0 .8rem;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: .4rem;
}
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li {
  padding: .55rem 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.3;
}
.list-inline {
  font-family: "IBM Plex Mono", monospace; font-size: .8rem;
  color: var(--ink-2); line-height: 1.9;
}

/* ---------- bio page ---------- */
.bio { max-width: 1100px; }
.bio-portrait { margin: 0 0 2rem; }
.bio-portrait img {
  width: 100%;
  max-height: 56vh;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-strong);
  background: #ddd8cf;
  filter: grayscale(.12);
}
.bio-portrait figcaption {
  margin-top: .5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem; letter-spacing: .03em; color: var(--ink-2);
}
.bio-statement {
  margin: 1.2rem 0 0;
  font-size: 1.55rem;
  line-height: 1.42;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---------- view changes ---------- */
/* Project / detail-pane swaps are INSTANT (no animation).
   Only the left info column (on series pages) slides in. */
.series-info { animation: infoSlide .38s cubic-bezier(.2, .7, .2, 1); }
@keyframes infoSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   SERIES PAGE — a distinct full-screen "other page" for a series
   ============================================================ */
.series-page {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overflow-x: clip; /* contain the info slide-in */
  background: var(--paper); /* opaque from frame 1 — instantly hides the page underneath */
}
/* the overlay appears instantly (opaque bg); only the left info column slides in */
.series-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 2.5rem;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-strong);
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.series-back {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.series-back:hover { color: var(--accent); }
.series-running { flex: 1; text-align: center; }

/* prev/next SERIES browsing — arrows flank the count in the header (desktop) */
.series-strip { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.series-strip__btn {
  background: none; border: 0; cursor: pointer; padding: 0 .15rem;
  font-family: "IBM Plex Mono", monospace; font-size: 1rem; line-height: 1; color: var(--ink);
}
.series-strip__btn:hover:not(:disabled) { color: var(--accent); }
.series-strip__btn:disabled { opacity: .25; cursor: default; }
/* bottom series-browsing bar — only shown (and anchored) on mobile */
.series-nav { display: none; }

/* body: thin info rail (left) + fitted-image viewer (right) */
.series-body {
  display: flex;
  height: calc(100vh - 44px);
}
/* the left column: heading (top) + foot (bottom) */
.series-rail {
  flex: 0 0 clamp(230px, 24%, 340px); /* thinner than the main menu (~38%) */
  border-right: 1px solid var(--rule-strong);
  padding: 2.2rem 1.6rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.series-info { min-width: 0; }
.series-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .9rem;
}
.series-title {
  margin: 0;
  font-weight: 600; /* match .proj-title */
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.series-dates {
  margin: 1rem 0 0; /* match .proj-meta */
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2);
}
.series-summary {
  margin: 1.6rem 0 0; /* match .proj-summary rhythm */
  font-size: 1.1rem;
  line-height: 1.35;
}
/* foot of the rail: description of the current image, then Other series */
.series-info__foot { margin-top: auto; padding-top: 1.6rem; }
.series-caption {
  display: block;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-strong);
}
.series-caption__no {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .5rem;
}
.series-caption__cap {
  display: block;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}
/* ---- fitted-image viewer + aspect-adaptive carousel ---- */
.series-viewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column; /* default = landscape; switches to row for portrait */
  height: 100%;
  gap: 1px;
  background: var(--rule-strong); /* the 1px gap reads as a hairline divider */
}
.series-viewer.is-landscape { flex-direction: column; } /* image on top, carousel underneath */
.series-viewer.is-portrait { flex-direction: row; }     /* image left, carousel down the side */

.series-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--paper);
}
/* both images fill the stage (1.6rem breathing room); crossfade via opacity.
   img is a replaced element, so it needs explicit width/height — insets alone
   don't constrain it and it would overflow onto the carousel. */
.series-main {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  width: calc(100% - 3.2rem);
  height: calc(100% - 3.2rem);
  object-fit: contain;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.series-main.is-front { opacity: 1; }
.series-stage__counter {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  background: var(--paper);
  padding: .15rem .4rem;
}

.series-carousel {
  background: var(--paper);
  display: flex;
  gap: .55rem;
  padding: .6rem;
  scrollbar-width: thin;
}
.series-viewer.is-landscape .series-carousel {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  height: 124px;
  align-items: stretch;
}
.series-viewer.is-portrait .series-carousel {
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  width: 150px;
}
.series-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rule);
  background: #ddd8cf;
  cursor: pointer;
  overflow: hidden;
  opacity: .62;
  transition: opacity .15s ease;
}
.series-viewer.is-landscape .series-thumb { height: 100%; width: 150px; }
.series-viewer.is-portrait .series-thumb { width: 100%; height: 96px; }
.series-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-thumb:hover { opacity: .85; }
.series-thumb.is-current { opacity: 1; border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.series-more {
  margin-top: auto; /* pin to the bottom of the info rail */
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.series-more__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: .2rem;
}
.series-more__link {
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: "Urbanist", sans-serif; font-size: 1.05rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
  border-bottom: 1px solid transparent;
}
.series-more__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- responsive: stack to single column ---------- */
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }
  .pane { height: auto; overflow: visible; }
  .pane--index { border-right: 0; border-bottom: 2px solid var(--rule-strong); padding-bottom: .9rem; }
  .plate, .plate--wide, .plate--lead { grid-column: span 12; }

  /* project content matches the series spacing (1.25rem gutters) */
  .detail-strip { position: static; padding-left: 1.25rem; padding-right: 1.25rem; }
  .detail-body { padding: 1.5rem 1.25rem 5.75rem; } /* clear the fixed nav bar below */

  /* browsing arrows anchored to the bottom — the project reads as a scrollable
     window with the plates scrolling above a persistent prev/next bar */
  .proj-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    margin: 0;
    padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 2px solid var(--rule-strong);
  }

  /* no active-item underline in the mobile menu (nothing is "open" yet) */
  .index-item.is-active .index-item__title { text-decoration: none; font-style: normal; }

  /* collapse the menu while viewing content — show just the name + a toggle */
  .masthead { position: relative; border-bottom: 0; padding-bottom: 0; }
  .nav-toggle { display: block; position: absolute; top: .35rem; right: 0; }
  .masthead__role,
  .masthead__nav,
  .index-stack,
  .colophon { display: none; }
  body.nav-open .masthead { border-bottom: 2px solid var(--rule-strong); padding-bottom: 1.1rem; }
  body.nav-open .masthead__role { display: block; }
  body.nav-open .masthead__nav { display: flex; }
  body.nav-open .index-stack { display: flex; }
  body.nav-open .colophon { display: flex; }
  /* opening the menu expands it in place and pushes the current project down
     (it stays below, same page) — just hide the fixed prev/next bar so it
     doesn't float over the open menu */
  body.nav-open .proj-nav { display: none; }

  .series-top { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* rethought mobile series: one scrollable column, image-forward.
     Flatten BOTH the rail and the viewer so info / image / caption / carousel
     become siblings and can be ordered freely — this lets the caption sit
     directly under the image (not stranded below the carousel). */
  .series-body { flex-direction: column; height: auto; }
  .series-rail,
  .series-viewer,
  .series-viewer.is-landscape,
  .series-viewer.is-portrait { display: contents; }

  .series-info { order: 1; padding: 1.4rem 1.25rem 1rem; }

  /* hero image: full-width, sized to a landscape frame so the image fills it
     edge-to-edge (object-fit: contain → no crop, no letterbox bands) */
  .series-stage {
    order: 2;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
  }
  .series-main { top: 0; left: 0; width: 100%; height: 100%; }
  .series-stage__counter { left: 1rem; bottom: 1rem; } /* number stays on the image */

  /* caption tied right under the image — no divider, no "Other series" */
  .series-info__foot { order: 3; margin: 0; padding: .85rem 1.25rem .9rem; }
  .series-caption { border-top: 0; padding-top: 0; }
  .series-caption__no { display: none; } /* the number already shows on the image */
  .series-caption__cap { font-size: 1rem; color: var(--ink-2); line-height: 1.4; }
  .series-more { display: none; }

  /* thumbnail strip last */
  .series-carousel,
  .series-viewer.is-landscape .series-carousel,
  .series-viewer.is-portrait .series-carousel {
    order: 4;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    width: auto;
    height: 84px;
    align-items: stretch;
    border-top: 1px solid var(--rule-strong);
  }
  .series-thumb,
  .series-viewer.is-landscape .series-thumb,
  .series-viewer.is-portrait .series-thumb { height: 100%; width: 108px; }

  /* series heading/paragraph match the project sizes on mobile */
  .series-title { font-size: clamp(1.6rem, 6vw, 1.9rem); }
  .series-summary { font-size: 1.15rem; line-height: 1.4; }

  /* series browsing on mobile: hide the cramped header arrows, anchor a bottom
     bar exactly like the project's prev/next (moves between series) */
  .series-strip__btn { display: none; }
  .series-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    justify-content: space-between;
    padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 2px solid var(--rule-strong);
  }
  .series-nav button {
    background: none; border: 0; cursor: pointer;
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  }
  .series-nav button:hover { color: var(--accent); }
  .series-nav button[disabled] { opacity: .3; cursor: default; }
  /* clear the fixed bar so the carousel isn't hidden behind it */
  .series-body { padding-bottom: 4.25rem; }

  /* project (detail-pane) header + paragraph: ~20% smaller on mobile */
  .proj-title { font-size: clamp(1.6rem, 6vw, 1.9rem); }     /* was clamp(2.2rem, 5vw, 4rem) → 2.2rem floor */
  .proj-summary { font-size: 1.15rem; line-height: 1.4; }    /* was 1.45rem */
  .bio-statement { font-size: 1.2rem; line-height: 1.45; }   /* keep the About paragraph in step */
}