/* =========================================================
   Joshua Rivera Camacho — portfolio
   Built from Figma "Portfolio Page Templates".
   The Figma frames are drawn on a 2560px-wide canvas, so every
   size below is written as calc(var(--s) * <figma px>). --s is
   the scale from Figma pixels to screen pixels: 0.5 on a 1280px
   screen, 0.75 on a 1920px+ screen.
   ========================================================= */

/* M+ 1m (self-hosted, Latin-only subset — the full files are ~1.8 MB each) */
@font-face { font-family: "M+ 1m"; font-weight: 300; font-display: swap; src: url("../fonts/mplus-1m-light.woff2") format("woff2"); }
@font-face { font-family: "M+ 1m"; font-weight: 400; font-display: swap; src: url("../fonts/mplus-1m-regular.woff2") format("woff2"); }
@font-face { font-family: "M+ 1m"; font-weight: 500; font-display: swap; src: url("../fonts/mplus-1m-medium.woff2") format("woff2"); }

:root {
  --s: clamp(0.5px, calc(100vw / 2560), 0.75px);

  /* Colors (from Figma) */
  --ink: #000;
  --muted: #999;
  --accent: #597188;   /* blue-gray masthead text */
  --panel: #f7f8f9;    /* masthead / info panels */
  --button: #f2f2f2;   /* back-to-top button */
  --placeholder: #d9d9d9;
  --bg: #fff;

  --radius: calc(var(--s) * 20);
  --font: "M+ 1m", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- Page grid ----------
   Figma columns on the 2560 canvas: sidebar 0–600, content 600–2160,
   right gutter (back-to-top button) 2160–2560.                     */
.page {
  display: grid;
  grid-template-columns: 600fr 1760fr 200fr;
  width: min(100%, 1920px);   /* 100% (not 100vw) so a Windows scrollbar never adds a horizontal scroll */
  margin: 0 auto;
  min-height: 100vh;
}
.page--project { grid-template-columns: 621fr 1785fr 154fr; }

/* ---------- Sidebar ----------
   The sidebar uses its own scale so the whole menu always fits on
   screen: it shrinks with the window width like the rest of the page,
   and also with the window height (the full menu is ~1300 Figma px
   tall), whichever is smaller.                                       */
.sidebar {
  --s: max(0.35px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100vh / 1300)));
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;               /* safety net for extremely short windows */
  scrollbar-width: none;
  padding: calc(var(--s) * 75) 0 calc(var(--s) * 60) calc(var(--s) * 75);
}
@supports (height: 100dvh) {
  .sidebar {
    --s: max(0.35px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100dvh / 1300)));
    height: 100dvh;
  }
}
.sidebar::-webkit-scrollbar { display: none; }

.name {
  display: block;
  font-size: calc(var(--s) * 50);
  line-height: calc(var(--s) * 50);
  font-weight: 400;
}

.nav { margin-top: calc(var(--s) * 51); }
.nav__link {
  display: block;
  font-size: calc(var(--s) * 40);
  line-height: calc(var(--s) * 64);
  color: var(--muted);
  transition: color .15s;
}
.nav__link:first-child { line-height: calc(var(--s) * 50); }
.nav__link:hover, .nav__link.is-current { color: var(--ink); }

.project-list {
  list-style: none;
  margin: calc(var(--s) * 4) 0 0;
  padding: 0;
  max-width: calc(var(--s) * 289);
}
.project-list li { margin-bottom: calc(var(--s) * 15); }
.project-list li:last-child { margin-bottom: 0; }
.project-list a {
  display: block;
  font-size: calc(var(--s) * 24);
  line-height: calc(var(--s) * 36);
  color: var(--muted);
  transition: color .15s;
}
.project-list a:hover, .project-list a.is-current { color: var(--ink); }

.socials {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) * 32);
  margin-top: calc(var(--s) * 7);
}
.socials a { opacity: .4; transition: opacity .15s; display: block; }
.socials a:hover { opacity: 1; }
.socials img { display: block; height: calc(var(--s) * 17); width: auto; }

/* Project-page sidebar: section index + "Return to..." */
.section-index {
  margin-top: calc(var(--s) * 22);
  width: calc(var(--s) * 360);
  background: var(--panel);
  border-radius: var(--radius);
  padding: calc(var(--s) * 78) calc(var(--s) * 27);
}
.section-index a {
  display: block;
  font-size: calc(var(--s) * 32);
  line-height: calc(var(--s) * 46);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.section-index a + a { margin-top: calc(var(--s) * 50); }
.section-index a.is-active { color: var(--ink); }

.return {
  width: calc(var(--s) * 360);
  margin-top: calc(var(--s) * 37);
  font-size: calc(var(--s) * 32);
  line-height: calc(var(--s) * 40);
}
.return__links { text-align: right; margin-top: calc(var(--s) * 25); }
.return__links a { display: block; color: var(--muted); margin-bottom: calc(var(--s) * 20); }
.return__links a:last-child { margin-bottom: 0; }
.return__links a:hover { color: var(--ink); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: max(calc(var(--s) * 47), calc((100vw - min(100vw, 1920px)) / 2 + var(--s) * 47));
  bottom: calc(var(--s) * 34);
  width: calc(var(--s) * 107);
  height: calc(var(--s) * 106);
  border: 0;
  border-radius: var(--radius);
  background: var(--button);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top svg { width: calc(var(--s) * 37); height: calc(var(--s) * 63); }

/* ---------- Masthead (light panel at the top of each page) ---------- */
.masthead {
  background: var(--panel);
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: calc(var(--s) * 394);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--s) * 60) calc(var(--s) * 147);
  text-align: center;
  color: var(--accent);
  font-size: calc(var(--s) * 32);
  line-height: calc(var(--s) * 60);
}
/* More Projects: text sits higher to make room for the sort buttons */
.masthead--more { min-height: calc(var(--s) * 465); justify-content: flex-start; padding-top: calc(var(--s) * 136); padding-bottom: calc(var(--s) * 74); }
.masthead h1 { font: inherit; }

.toggle {
  display: flex;
  gap: calc(var(--s) * 28);
  margin-top: calc(var(--s) * 37);
}
.toggle a {
  width: calc(var(--s) * 292);
  height: calc(var(--s) * 98);
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--radius);
  color: var(--accent);
  transition: background .15s, color .15s;
}
.toggle a:hover { color: var(--ink); }
.toggle a.is-current { color: var(--ink); box-shadow: inset 0 0 0 calc(var(--s) * 3) var(--accent); }

/* ---------- Media placeholders ----------
   Every image slot is a .media box. Drop an <img> inside it and the
   gray placeholder disappears behind the photo.                    */
.media {
  position: relative;
  background: var(--placeholder);
  border-radius: var(--radius);
  overflow: hidden;
}
.media > img, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Selected Work grid (homepage) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--s) * 17);
  margin: calc(var(--s) * 17) 0 calc(var(--s) * 17);
}
/* Three-column variant (index-3col.html) */
.work-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) * 11);
  margin-top: calc(var(--s) * 8);
}
.card {
  aspect-ratio: 1;
  display: block;
  color: var(--ink);
}
.card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(var(--s) * 50);
  transition: opacity .25s, background .25s;
}
.card__title { font-size: calc(var(--s) * 48); line-height: 1.25; margin-bottom: calc(var(--s) * 30); font-weight: 400; }
.card__blurb { font-size: calc(var(--s) * 20); line-height: calc(var(--s) * 35); }
.card__meta {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--s) * 15);
  text-align: center;
  font-size: calc(var(--s) * 20);
  line-height: calc(var(--s) * 35);
}
/* With a photo, text appears on hover over a light veil */
.card.has-image .card__overlay,
.card.has-image .card__meta { opacity: 0; }
.card.has-image:hover .card__overlay,
.card.has-image:focus-visible .card__overlay { opacity: 1; background: rgba(255,255,255,.85); }
.card.has-image:hover .card__meta { opacity: 1; z-index: 1; }
.card:hover .media, .card .media { transition: transform .3s; }

/* ---------- More Projects grid ---------- */
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--s) * 12);
  row-gap: calc(var(--s) * 28);
  margin: calc(var(--s) * 12) 0 calc(var(--s) * 120);
}
.more-card .media { aspect-ratio: 1; }
.more-card .card__title { font-size: calc(var(--s) * 40); }
.more-card .card__blurb, .more-card .card__meta { font-size: calc(var(--s) * 16); }
.more-card .card__blurb { font-style: italic; color: var(--accent); }
.more-card__caption {
  margin-top: calc(var(--s) * 11);
  text-align: center;
  font-size: calc(var(--s) * 20);
  line-height: calc(var(--s) * 30);
}
.more-card.has-image .card__overlay, .more-card.has-image .card__meta { opacity: 0; }
.more-card.has-image:hover .card__overlay { opacity: 1; background: rgba(255,255,255,.85); }
.more-card.has-image:hover .card__meta { opacity: 1; z-index: 1; }

/* ---------- About ---------- */
.about-photos {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--s) * 428));
  justify-content: center;
  gap: calc(var(--s) * 19);
  margin-top: calc(var(--s) * 21);
}
.about-photos .media { aspect-ratio: 1; }
.about-text {
  margin-top: calc(var(--s) * 30);
  text-align: center;
  font-size: calc(var(--s) * 30);
  line-height: calc(var(--s) * 46);
}
.about-text p + p { margin-top: calc(var(--s) * 20); }
.about-links {
  display: flex;
  justify-content: center;
  gap: calc(var(--s) * 40);
  margin: calc(var(--s) * 52) 0 calc(var(--s) * 120);
}
.about-links a {
  height: calc(var(--s) * 85);
  min-width: calc(var(--s) * 123);
  padding: 0 calc(var(--s) * 40);
  display: grid;
  place-items: center;
  background: var(--placeholder);
  border-radius: var(--radius);
  font-size: calc(var(--s) * 36);
  transition: background .15s;
}
.about-links a:hover { background: #c8c8c8; }
.about-links img { height: calc(var(--s) * 34); width: auto; }

/* ---------- Project page ---------- */
.project { padding-bottom: calc(var(--s) * 200); }
.project__title {
  font-size: calc(var(--s) * 50);
  line-height: 1;
  font-weight: 400;
  padding-top: calc(var(--s) * 70);
  margin-bottom: calc(var(--s) * 8);
}
.project__hero {
  display: grid;
  grid-template-columns: 934fr 812fr;
  gap: calc(var(--s) * 39);
}
.project__hero > .media { aspect-ratio: 1; }
.project__info {
  background: var(--panel);
  border-radius: var(--radius);
  padding: calc(var(--s) * 40) calc(var(--s) * 61);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  color: var(--accent);
  font-size: calc(var(--s) * 30);
  line-height: 1.6;            /* em-based so the panel scales as one when text is resized to fit */
  overflow: hidden;
}
.project__hero { align-items: start; }
.project__info p + p { margin-top: 1.4em; }

.project__summary {
  margin: calc(var(--s) * 50) 0 calc(var(--s) * 60);
  text-align: center;
  font-size: calc(var(--s) * 30);
  line-height: calc(var(--s) * 55);
}

.project section { scroll-margin-top: calc(var(--s) * 60); }
.project section:not(#overview) { max-width: calc(var(--s) * 1746); }
.project h2 {
  font-size: calc(var(--s) * 50);
  line-height: calc(var(--s) * 60);
  font-weight: 400;
  margin: calc(var(--s) * 100) 0 calc(var(--s) * 30);
}
.project section:first-of-type h2 { margin-top: 0; }
.project h3 {
  font-size: calc(var(--s) * 40);
  line-height: calc(var(--s) * 60);
  font-weight: 400;
  margin: calc(var(--s) * 56) 0 0;
}
.body-text, .project section > p {
  font-size: calc(var(--s) * 30);
  line-height: calc(var(--s) * 45);
}

/* Design decision rows: 800 image + 872 text, sides alternate */
.decision {
  display: grid;
  grid-template-columns: 800fr 872fr;
  gap: calc(var(--s) * 74);
  align-items: center;
}
.decision > .media { aspect-ratio: 1; }
.decision--flip { grid-template-columns: 872fr 800fr; }
.decision--flip > .media { order: 2; }

/* Outcome gallery: rows of 3 / 2 / 4 */
.gallery { display: grid; gap: calc(var(--s) * 20); margin-top: calc(var(--s) * 40); }
.gallery__row { display: grid; gap: calc(var(--s) * 20); }
.gallery__row--2 { grid-template-columns: repeat(2, 1fr); }
.gallery__row--3 { grid-template-columns: repeat(3, 1fr); }
.gallery__row--4 { grid-template-columns: repeat(4, 1fr); }
.gallery .media { height: calc(var(--s) * 374); }


/* ---------- About page: always fits on one screen ---------- */
.page--about main {
  --s: max(0.3px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100vh / 1330)));
  height: 100vh;
  display: flex;
  flex-direction: column;
}
@supports (height: 100dvh) {
  .page--about main {
    --s: max(0.3px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100dvh / 1330)));
    height: 100dvh;
  }
}
.masthead--about { min-height: calc(var(--s) * 250); font-size: calc(var(--s) * 36); }
.page--about .about-links { margin-bottom: 0; }


/* ---------- Project page content from the spreadsheet ---------- */
.project__summary { text-align: center; }
.summary-text { font-size: calc(var(--s) * 30); line-height: calc(var(--s) * 55); }
.summary-text + .summary-text { margin-top: calc(var(--s) * 30); }
.project section .body-text + .body-text,
.project section .body-list + .body-text,
.project section .body-text + .body-list,
.project section .equation + .body-text,
.project section .body-text + .equation { margin-top: calc(var(--s) * 25); }
.body-list, .outcome-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: calc(var(--s) * 30);
  line-height: calc(var(--s) * 45);
}
.body-list li + li, .outcome-list li + li { margin-top: calc(var(--s) * 12); }
.equation {
  font-size: calc(var(--s) * 28);
  line-height: calc(var(--s) * 45);
  color: var(--accent);
  background: var(--panel);
  border-radius: calc(var(--radius) / 2);
  padding: calc(var(--s) * 12) calc(var(--s) * 20);
  display: inline-block;
}
.decision__text { align-self: center; }
details.code { margin-top: calc(var(--s) * 30); }
details.code summary {
  cursor: pointer;
  color: var(--accent);
  font-size: calc(var(--s) * 26);
  text-decoration: underline;
  text-underline-offset: .15em;
}
details.code pre {
  margin: calc(var(--s) * 15) 0 0;
  max-height: calc(var(--s) * 900);
  overflow: auto;
  background: var(--panel);
  border-radius: calc(var(--radius) / 2);
  padding: calc(var(--s) * 25);
  font-size: calc(var(--s) * 20);
  line-height: 1.45;
}
.info__label { opacity: .65; margin-right: .5em; }
.info__label--head { margin-right: 0; }
.footnote { font-size: calc(var(--s) * 22); line-height: calc(var(--s) * 34); color: var(--muted); margin-top: calc(var(--s) * 8); }
.decision > * { min-width: 0; }
/* Draft notes from the sheet ([NEEDS INPUT], [CONFIRM]) — easy to spot, remove before publishing */
.todo { background: #fff3a8; color: #8a5a00; border-radius: 3px; padding: 0 .2em; }

/* Project sidebar has one more entry (Room for Improvement), so it scales against a taller menu */
.page--project .sidebar { --s: max(0.35px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100vh / 1400))); }
@supports (height: 100dvh) {
  .page--project .sidebar { --s: max(0.35px, min(clamp(0.5px, calc(100vw / 2560), 0.75px), calc(100dvh / 1400))); }
}


/* ---------- Equation callouts ---------- */
.eq {
  margin: calc(var(--s) * 30) 0 0;
  background: var(--panel);
  border-radius: calc(var(--radius) / 2);
  padding: calc(var(--s) * 24) calc(var(--s) * 30);
  color: var(--accent);
}
.eq__label { font-size: calc(var(--s) * 22); line-height: 1.4; opacity: .75; }
.eq__math {
  font-size: calc(var(--s) * 34);
  line-height: 1.5;
  color: var(--ink);
  margin: calc(var(--s) * 8) 0 calc(var(--s) * 14);
  overflow-wrap: anywhere;   /* long lines wrap instead of showing a scrollbar */
}
.eq__math sub, .eq__math sup, .eq__vars sub, .eq__vars sup { font-size: .68em; }
.eq__vars {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: calc(var(--s) * 24);
  row-gap: calc(var(--s) * 6);
  margin: 0;
  font-size: calc(var(--s) * 24);
  line-height: 1.45;
}
.eq__vars dt { margin: 0; color: var(--ink); }
.eq__vars dd { margin: 0; }
.eq__vars var { font-style: italic; }
.eq__val { opacity: .75; white-space: nowrap; }
/* Stacked fractions in equation boxes */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .2em; line-height: 1.25; }
.frac__num { padding: 0 .25em .12em; border-bottom: max(1px, .045em) solid currentColor; }
.frac__den { padding: .12em .25em 0; }
.frac .frac { font-size: .82em; }
.fence { display: inline-block; font-size: 1.9em; line-height: 1; vertical-align: middle; font-weight: 300; transform: translateY(-.06em); }
.frac .fence { font-size: 1.5em; }
.eq__math { line-height: 1.6; }
.eq__res { display: inline-block; }
.eq__step { display: inline-block; }
.eq__align { display: inline-grid; grid-template-columns: auto auto; column-gap: .35em; row-gap: .25em; align-items: center; }
.eq__align > .eq__lhs { justify-self: end; }
/* YubbaYubba: four equations, so smaller text in a two-column grid */
body[data-slug="yubbayubba"] .eq { padding: calc(var(--s) * 18) calc(var(--s) * 24); }
body[data-slug="yubbayubba"] .eq__label { font-size: calc(var(--s) * 19); }
body[data-slug="yubbayubba"] .eq__math { font-size: calc(var(--s) * 27); }
body[data-slug="yubbayubba"] .eq__vars { font-size: calc(var(--s) * 20); }
.eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 18); margin-top: calc(var(--s) * 30); align-items: stretch; }
.eq-grid > .eq, .eq-grid > .eq + .eq { margin: 0; }

.eq + .eq { margin-top: calc(var(--s) * 18); }


/* ---------- Project images ---------- */
.media--contain { background: #fff; box-shadow: inset 0 0 0 1px #e8eaec; }
.media--contain > img, .media--contain > video { object-fit: contain; padding: 4%; }
.decision > .media { aspect-ratio: 1; align-self: center; }
.decision--textonly { grid-template-columns: 1fr; }
.decision--textonly .decision__text { max-width: none; }
.gallery__row--flex { display: flex; gap: calc(var(--s) * 20); }
.gallery__row--flex .gallery__item { height: auto; min-width: 0; }
.gallery .media.gallery__item { height: auto; }
.project .media img, .project .media video { cursor: zoom-in; }

/* Lightbox: click any project image to see it full size */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 22, 25, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw; cursor: zoom-out;
}
.lightbox img, .lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }

/* =========================================================
   Phone / small tablet: sidebar becomes a top header
   ========================================================= */
/* ---------- Per-page layouts (set in tools/images.json) ---------- */
.media-rows { display: grid; gap: calc(var(--s) * 20); margin-top: calc(var(--s) * 30); grid-template-columns: minmax(0, 1fr); }
.project__summary + .media-rows { margin-top: calc(var(--s) * 40); }
.section-split { display: grid; column-gap: calc(var(--s) * 95); align-items: start; }
.section-split > section { min-width: 0; }
.section-split { margin-top: calc(var(--s) * 100); }
.media-groups { display: flex; gap: calc(var(--s) * 40); }
.media-group { min-width: 0; }
.media-group__label { font-size: calc(var(--s) * 26); color: var(--accent); margin: 0 0 calc(var(--s) * 12); }
.decision-segments { display: grid; gap: calc(var(--s) * 30); }
.seg--split { display: grid; gap: calc(var(--s) * 64); align-items: start; }
.seg__col { min-width: 0; display: grid; gap: calc(var(--s) * 20); align-content: start; }
.seg .media-rows { margin-top: 0; }
.seg__eq > .eq { margin: 0; }
.seg__eq > .eq + .eq { margin-top: calc(var(--s) * 18); }
.media-stack { display: flex; flex-direction: column; gap: calc(var(--s) * 20); min-width: 0; }
.media__label { position: absolute; inset: 0; display: grid; place-items: center; color: #888; font-size: calc(var(--s) * 22); text-align: center; padding: 1em; }
.media-note { font-size: calc(var(--s) * 22); color: var(--accent); opacity: .8; margin-top: calc(var(--s) * 12); }
.project .section-split > section > h2 { margin-top: 0; }
.decision-stack > .decision__text { max-width: none; }
.media-pair { display: grid; grid-template-columns: 853fr 872fr; gap: calc(var(--s) * 20); align-items: center; }
.media-pair__pic { display: flex; justify-content: center; }
.media-pair__pic > .media { width: 60%; }
.media-pair__eq > .eq { margin: 0; }
.media-pair__eq > .eq + .eq { margin-top: calc(var(--s) * 18); }
.decision-tall { display: grid; grid-template-columns: 521fr 1166fr; gap: calc(var(--s) * 36); align-items: stretch; }
.decision-tall > .media { align-self: start; }
.decision-tall__side { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--s) * 30); min-width: 0; }
.decision-tall__side > .media-rows { margin-top: 0; }

/* ---------- Sound toggle on videos with "sound": true ---------- */
.media__sound {
  all: unset; position: absolute; right: calc(var(--s) * 18); bottom: calc(var(--s) * 18); z-index: 2; cursor: pointer;
  width: max(34px, calc(var(--s) * 56)); height: max(34px, calc(var(--s) * 56)); border-radius: 50%;
  background: rgba(20, 22, 25, .55); display: grid; place-items: center; transition: background .2s;
}
.media__sound:hover, .media__sound:focus-visible { background: rgba(20, 22, 25, .8); }
.media__sound svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media__sound .spk { fill: #fff; }
.media__sound .on { display: none; }
.media__sound[aria-pressed="true"] .on { display: inline; }
.media__sound[aria-pressed="true"] .off { display: none; }

/* ---------- More Projects viewer ---------- */
button.more-card { all: unset; display: flex; flex-direction: column; justify-content: flex-start; cursor: pointer; box-sizing: border-box; }
button.more-card:focus-visible .media { outline: 2px solid var(--accent); outline-offset: 3px; }
.media--contain { background: var(--panel); }
.media--contain > img { object-fit: contain; padding: 6%; }
.more-card__count {
  position: absolute; top: calc(var(--s) * 14); right: calc(var(--s) * 14); z-index: 2;
  display: inline-flex; align-items: center; gap: calc(var(--s) * 7);
  padding: calc(var(--s) * 5) calc(var(--s) * 11); border-radius: 999px;
  background: rgba(255,255,255,.88); color: var(--ink); font-size: calc(var(--s) * 18); line-height: 1.2;
}
.more-card__count svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.3; }
.more-card--viewer:hover .more-card__count { opacity: 0; }
html.viewer-open { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 100; background: #15171a; color: #fff;
  display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: minmax(0, 1fr) auto;
  padding: 28px 12px 18px;
}
.viewer__stage { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
.viewer__stage > img, .viewer__stage > video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.viewer__stage.is-cutout > img { background: none; }
.viewer__nav, .viewer__close { all: unset; cursor: pointer; color: #fff; opacity: .75; text-align: center; }
.viewer__nav:hover, .viewer__close:hover, .viewer__nav:focus-visible, .viewer__close:focus-visible { opacity: 1; }
.viewer__nav { grid-row: 1; align-self: center; font-size: 64px; line-height: 1; padding: 10px 0; }
.viewer__nav--prev { grid-column: 1; }
.viewer__nav--next { grid-column: 3; }
.viewer--single .viewer__nav { visibility: hidden; }
.viewer__close { position: absolute; top: 10px; right: 18px; font-size: 40px; line-height: 1; z-index: 1; }
.viewer__info { grid-column: 1 / -1; grid-row: 2; max-width: 900px; width: 100%; margin: 14px auto 0; text-align: center; }
.viewer__title { font-size: 20px; margin: 0; }
.viewer__date { color: #9aa7b4; margin-left: .8em; font-size: 15px; }
.viewer__material { font-size: 13px; font-style: italic; color: #9aa7b4; margin: 4px 0 0; }
.viewer__caption { font-size: 14px; line-height: 1.6; color: #c9d0d7; margin: 6px 0 0; }
.viewer__thumbs { display: flex; gap: 8px; justify-content: center; margin-top: 12px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.viewer__thumbs button { all: unset; cursor: pointer; position: relative; flex: 0 0 56px; height: 56px; border-radius: 6px; overflow: hidden; opacity: .45; outline: 2px solid transparent; background: #333; }
.viewer__thumbs button.is-current { opacity: 1; outline-color: #fff; }
.viewer__thumbs button:focus-visible { opacity: 1; outline-color: #9aa7b4; }
.viewer__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer__play { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }

@media (max-width: 820px) {
  .more-card__count { top: 6px; right: 6px; font-size: 11px; padding: 2px 7px; gap: 4px; }
  .viewer { grid-template-columns: 0 1fr 0; padding: 44px 8px 12px; }
  .viewer__nav { display: none; }
  .viewer__title { font-size: 16px; }
  .viewer__caption { font-size: 12px; }
  .viewer__thumbs { justify-content: flex-start; }
  .viewer__thumbs button { flex-basis: 44px; height: 44px; }
  .section-split, .media-pair, .decision-tall { display: block; }
  .section-split > section + section { margin-top: 40px; }
  .section-split { margin-top: 50px; }
  .media-pair__pic > .media { width: 100%; }
  .media-pair__eq { margin-top: 12px; }
  .decision-tall > .media { max-width: 60%; margin: 0 auto 16px; }
  .media-rows { gap: 8px; }
  .seg--split { display: block; }
  .seg--split .seg__col + .seg__col { margin-top: 16px; }
  .media-groups { flex-direction: column; gap: 14px; }
  .media-group__label { font-size: 13px; margin-bottom: 6px; }
  .media-rows .gallery__row--flex { flex-wrap: nowrap; gap: 6px; }
  .media-rows .gallery__row--flex .gallery__item { flex: var(--ar) 1 0 !important; min-width: 0; }
  :root { --s: 0.5px; }

  .page, .page--project { display: block; width: 100%; }
  .page--about main { height: auto; }

  .sidebar {
    position: static;
    height: auto;
    padding: 24px 16px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }
  .name { font-size: 30px; line-height: 32px; }
  .nav { margin: 0; display: flex; flex-wrap: wrap; gap: 0 14px; width: 100%; }
  .nav__link { font-size: 17px; line-height: 30px; }
  .nav__link:first-child { line-height: 30px; }
  .project-list, .section-index { display: none; }
  /* Project pages: keep "Return to..." as a compact row of links */
  .return { width: 100%; margin: 0; font-size: 0; line-height: 0; }
  .return__links { text-align: left; margin: 0; display: flex; gap: 14px; }
  .return__links a { font-size: 15px; line-height: 26px; margin: 0; }
  .socials { margin: 0; position: absolute; top: 28px; right: 16px; }
  .socials img { height: 9px; width: auto; }

  main { padding: 0 16px; }
  .masthead { min-height: 0; padding: 28px 18px; font-size: 15px; line-height: 24px; }
  .toggle a { width: 130px; height: 44px; border-radius: 10px; }
  .toggle { gap: 12px; margin-top: 18px; }

  .work-grid { grid-template-columns: 1fr; gap: 10px; }
  .work-grid--3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .work-grid--3 .card__title { font-size: 16px; line-height: 20px; margin-bottom: 0; }
  .work-grid--3 .card__blurb { display: none; }
  .work-grid--3 .card.has-image .card__overlay { padding: 0 8px 26px; }
  .work-grid--3 .card__meta { bottom: 6px; font-size: 11px; }
  .card__title { font-size: 28px; line-height: 32px; margin-bottom: 10px; }
  .card__blurb { font-size: 13px; line-height: 20px; }
  .card__meta { font-size: 12px; }
  .card.has-image .card__overlay, .card.has-image .card__meta { opacity: 1; }
  .card.has-image .card__overlay { background: linear-gradient(to top, rgba(255,255,255,.86) 0, rgba(255,255,255,.62) 26%, rgba(255,255,255,0) 50%); justify-content: flex-end; padding-bottom: 36px; }

  .more-grid { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .more-card .card__title { font-size: 18px; line-height: 22px; }
  .more-card__caption { font-size: 12px; line-height: 18px; }

  .about-photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .about-text { font-size: 15px; line-height: 24px; text-align: left; }
  .about-links a { height: 44px; min-width: 56px; padding: 0 16px; font-size: 16px; border-radius: 10px; }
  .about-links img { height: 16px; width: auto; }

  .project__title { font-size: 44px; padding-top: 12px; margin-bottom: 14px; }
  .project__hero { grid-template-columns: 1fr; gap: 10px; }
  .project__info { text-align: left; font-size: 14px; line-height: 24px; padding: 18px; }
  .project__info p + p { margin-top: 12px; }
  .project__summary { text-align: left; font-size: 15px; line-height: 26px; margin: 28px 0; }
  .project h2 { font-size: 26px; line-height: 32px; margin: 40px 0 10px; }
  .project h3 { font-size: 20px; line-height: 28px; margin-top: 24px; }
  .body-text, .project section > p, .summary-text, .body-list, .outcome-list { font-size: 15px; line-height: 24px; }
  .equation { font-size: 13px; line-height: 22px; }
  .eq { padding: 12px 14px; }
  .eq-grid { grid-template-columns: 1fr; gap: 10px; }
  .eq__label { font-size: 11px; }
  .eq__math { font-size: 16px; }
  .eq__vars { font-size: 12px; column-gap: 10px; }
  .eq__val { white-space: normal; }
  details.code summary { font-size: 13px; }
  details.code pre { font-size: 11px; }
  .decision, .decision--flip { grid-template-columns: 1fr; gap: 10px; }
  .decision--flip > .media { order: 0; }
  .gallery__row--3, .gallery__row--4 { grid-template-columns: 1fr 1fr; }
  .gallery .media { height: 160px; }
  .gallery__row--flex { flex-wrap: wrap; gap: 8px; }
  .gallery__row--flex .gallery__item { flex: 1 1 45% !important; height: auto; }

  .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 12px; }
  .to-top svg { width: 18px; height: 30px; }
}