/* Projects: project list (left) and one scrollable project pane (right). The list and pane carry earthy
   accents from the Swing Arm City footage (--earth-* tokens); the nav and site-wide layout stay as they are.
   Text sits left and pictures right. Within a project, every picture except the hero and the CAD render
   shares one 4:3 frame (--frame-w); the render is a little larger. */

.pane {
  /* The uniform picture size: CAM captures, photos between setups, and extra photos */
  --frame-w: clamp(280px, calc((100vw - var(--list-w)) * 0.42), 520px);
}

/* ---------- Project list ---------- */

.plist {
  display: flex;
  flex-direction: column;
}

.plist__link {
  display: block;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--clear);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.plist__title,
.plist__context {
  display: block;
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.plist__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.plist__context {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Hover (and keyboard focus): a sandstone wash, a sand edge, and the name grows and slides a touch */
.plist__link:hover,
.plist__link:focus-visible {
  background: var(--plist-hover-bg);
  border-left-color: var(--earth-line);
}

/* The selected project keeps the highlight */
.plist__link[aria-current] {
  background: var(--plist-current-bg);
  border-left-color: var(--earth-sand);
}

.plist__link:hover .plist__title,
.plist__link:focus-visible .plist__title,
.plist__link[aria-current] .plist__title {
  transform: translateX(6px) scale(1.05);
}

.plist__link:hover .plist__context,
.plist__link:focus-visible .plist__context,
.plist__link[aria-current] .plist__context {
  transform: translateX(6px);
  color: var(--earth-sky-text);
}

.plist__link:focus-visible {
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .plist__title,
  .plist__context {
    transition: none;
  }
}

/* ---------- Overview: title and subtitle, summary, then the spec table beside the hero ---------- */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the pane's width, never what the hero would like */
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter) var(--space-4);
}

.overview__head {
  text-align: center;
}

.overview__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* A short sand-to-sandstone bar under the title */
.overview__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(to right, var(--earth-sand), var(--earth-rock));
}

.overview__context {
  margin-top: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--earth-sky-text);
}

/* As wide as the pane allows, so it takes as few lines as it can */
.overview__summary {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
  color: var(--text-muted);
}

.overview__row {
  display: grid;
  gap: var(--space-5);
  width: 100%;
  margin: var(--space-2) auto 0;
}

/* Narrow panes: the hero sits above the table */
.overview__hero {
  order: -1;
}

.overview__hero img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* Key and value columns line up across rows; the borders run under both */
.specs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-self: start;
  border-top: 1px solid var(--earth-line);
}

.specs__row {
  display: contents;
}

.specs dt,
.specs dd {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.specs dt {
  padding-right: var(--space-3);
  color: var(--earth-text);
}

.specs dd {
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* Below 1024 px the table spans the pane, so a value wraps only when the pane is too narrow for it */

/*
 * 1024 px and wider: the overview fills the pane's first screen. Heading and summary sit on top, the
 * arrow at the bottom, and the table-and-hero row takes all the height in between. The table is only as
 * wide as its one-line values; the hero takes the rest of the width and shows whole (never cropped).
 */
@media (min-width: 1024px) {
  /* Landscape heroes are limited by width, so the overview keeps narrow side margins */
  .overview {
    min-height: var(--pane-h);
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-2);
  }

  .overview__title::after {
    margin-top: var(--space-2);
  }

  .overview__context {
    margin-top: var(--space-2);
  }

  /* Table and hero sit together, centered as a pair. The hero is as tall as the row and as wide as its
     shape allows; when the pane is too narrow for that, it gives up width and draws smaller, whole. */
  .overview__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-1);
  }

  .specs {
    flex: none;
    align-self: center;
  }

  .specs dd {
    white-space: nowrap;
  }

  /* Wide (landscape) heroes are limited by width: a compact table, one size smaller, gives them the room */
  .overview__row--wide .specs dt {
    padding-right: 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }

  .overview__row--wide .specs dd {
    font-size: 0.8125rem;
  }

  /* Tall (portrait) heroes stop short of the full row height, so they don't tower over the overview.
     Their table keeps the regular type and a steady width. */
  .overview__row--tall {
    gap: var(--space-5);
  }

  .overview__row--tall .specs {
    min-width: 22rem;
  }

  .overview__hero {
    order: 0;
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    min-height: 16rem;
    aspect-ratio: var(--hero-ar, 4 / 3);
  }

  .overview__row--tall .overview__hero {
    height: 85%;
  }

  .overview__hero .zoom {
    position: absolute;
    inset: 0;
  }

  .overview__hero img {
    height: 100%;
    max-height: none;
  }
}

/* ---------- Arrow down to the CAD render and CAM ---------- */

.pnext {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--earth-text);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.pnext:hover,
.pnext:focus-visible {
  opacity: 1;
  color: var(--text);
}

.pnext[hidden] {
  display: none;
}

/* The copy pinned to the bottom edge while the real arrow is still below the visible area */
.pnext--pinned {
  position: fixed;
  z-index: 20;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--pnext-float-bg);
  box-shadow: var(--pnext-float-shadow);
  opacity: 1;
}

.pnext__icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .pnext__icon {
    animation: pnext-nudge 2.4s var(--ease-in-out) infinite;
  }
}

@keyframes pnext-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(5px); }
}

/* ---------- Sections ---------- */

.pblock {
  padding: var(--space-6) var(--gutter);
}

.phead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.phead::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  background: linear-gradient(to right, var(--earth-sand), var(--earth-rock));
}

.ptext-bold {
  font-weight: 700;
  color: var(--earth-text);
}

/* ---------- Pictures: the uniform 4:3 frame, filled edge to edge ---------- */

.pframe {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--frame-bg);
  outline: 1px solid var(--clear);
  outline-offset: 3px;
  transition: outline-color var(--dur-med) var(--ease-out);
}

.pframe:hover {
  outline-color: var(--earth-line);
}

.pframe .zoom {
  height: 100%;
}

.pframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- CAD render: caption left, render right ---------- */

.prender {
  display: grid;
  gap: var(--space-4);
}

.prender__media {
  order: -1;
  width: calc(var(--frame-w) * 1.3);
  max-width: 100%;
}

.prender__caption {
  max-width: var(--measure);
  color: var(--text-muted);
}

@media (min-width: 1100px) {
  .prender {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    align-items: center;
  }

  .prender__media {
    order: 0;
  }
}

/* ---------- CAM: one row per setup, table left, capture right with its caption underneath ---------- */

.cam__note {
  max-width: var(--measure);
  font-size: var(--fs-sm);
  color: var(--earth-sky-text);
}

.cam__note + .cam__note {
  margin-top: var(--space-1);
}

.setups {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.setup {
  display: grid;
  gap: var(--space-4);
}

.setup + .setup {
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.setup__body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--earth-sand);
}

.setup--photo .setup__body {
  border-left-color: var(--earth-sky);
}

.setup__media {
  width: var(--frame-w);
  max-width: 100%;
}

.setup__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.setup__caption {
  max-width: var(--measure);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.setup__media .setup__caption {
  margin-top: var(--space-3);
}

.ops-wrap {
  overflow-x: auto;
}

.ops {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ops th,
.ops td {
  padding: 7px var(--space-4) 7px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

.ops thead th {
  color: var(--earth-text);
  border-bottom-color: var(--earth-line);
}

.ops tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.ops tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.ops tbody tr:hover {
  background: var(--earth-surface);
}

@media (min-width: 1100px) {
  .setup {
    grid-template-columns: minmax(0, 1fr) var(--frame-w);
    gap: var(--space-6);
    align-items: start;
  }
}

/* Stacked rows read title, picture, caption, then the table */
@media (max-width: 1099.98px) {
  .setup__body {
    display: contents;
  }

  .setup__title {
    order: 0;
  }

  .setup__media {
    order: 1;
  }

  .setup__body > .setup__caption {
    order: 2;
  }

  .ops-wrap {
    order: 3;
  }
}

/* ---------- Extra photos: side by side at the frame size, captions lined up ---------- */

.pgrid {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-5);
}

.pfig {
  flex: 0 1 var(--frame-w);
  min-width: 0;
}

.photos__group {
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.phead + .photos__group {
  margin-top: 0;
}

/* ---------- Wide screens: the page does not scroll; the two panes do ---------- */

@media (min-width: 768px) {
  .plist {
    overflow: hidden;
    padding-block: var(--space-4);
  }

  .plist__items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  /* Centered under the project pane, not the whole window */
  .pnext--pinned {
    left: calc(var(--list-w) + (100vw - var(--list-w)) / 2);
  }
}

/* ---------- Phones: a sticky strip of titles; the project flows below ---------- */

@media (max-width: 767.98px) {
  .pane {
    --frame-w: 100%;
  }

  .plist {
    position: sticky;
    top: var(--nav-h);
    z-index: 10;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }

  .plist__items {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .plist__items::-webkit-scrollbar {
    display: none;
  }

  .plist__link {
    padding: var(--space-3) var(--space-4);
    border-left: 0;
    border-bottom: 3px solid var(--clear);
    white-space: nowrap;
  }

  .plist__link:hover,
  .plist__link:focus-visible {
    border-bottom-color: var(--earth-line);
  }

  .plist__link[aria-current] {
    border-bottom-color: var(--earth-sand);
  }

  .plist__title {
    font-size: var(--fs-sm);
    transform-origin: center;
  }

  .plist__link:hover .plist__title,
  .plist__link:focus-visible .plist__title,
  .plist__link[aria-current] .plist__title {
    transform: scale(1.06);
  }

  .plist__context {
    display: none;
  }

  .overview__title {
    font-size: var(--fs-xl);
  }

  .overview__context {
    font-size: var(--fs-md);
  }

  /* Land below the sticky nav and strip */
  .pblock {
    scroll-margin-top: calc(var(--nav-h) + 48px);
  }

}