/* Project pages reuse the portfolio's type, colors, spacing, and controls. */
.loading-screen { display: none; }
.site-loading body > :not(.loading-screen) { visibility: hidden; }
.site-loading .loading-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  background: var(--canvas);
}
/* From Uiverse.io by alexruix */
.loader { width: 48px; height: 48px; margin: auto; position: relative; }
.loader::before {
  content: '';
  width: 48px;
  height: 5px;
  background: #f0808050;
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 50%;
  animation: shadow324 .5s linear infinite;
}
.loader::after {
  content: '';
  width: 100%;
  height: 100%;
  background: #f08080;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  animation: jump7456 .5s linear infinite;
}
@keyframes jump7456 {
  15% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px) rotate(22.5deg); }
  50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
  75% { transform: translateY(9px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
}
@keyframes shadow324 {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.2, 1); }
}

.projects-grid-section {
  width: min(calc(100% - 1.5rem), var(--page-max));
  margin: .75rem auto;
  padding: clamp(2.7rem, 4.5vw, 4.5rem) var(--pad);
  border: 1px solid #5b7f7b;
  border-radius: var(--radius-island);
  background: var(--canvas) url("media/work-water.webp") center / cover;
}
.projects-grid-section .work-heading { margin-bottom: clamp(1.6rem, 2.8vw, 2.8rem); }
.projects-grid-section .work-heading h2 { white-space: normal; text-wrap: balance; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.project-grid-card {
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 1.8vw, 1.65rem);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--cream);
  color: var(--canvas);
  box-shadow: 0 9px 0 rgb(0 0 0 / .22), 0 18px 38px rgb(0 0 0 / .17);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.project-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 0 rgb(0 0 0 / .2), 0 24px 42px rgb(0 0 0 / .22);
}
.project-grid-card:focus-visible { outline-color: var(--yellow); }
.project-card-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: flex-start; gap: .55rem; }
.project-card-top .kicker { padding-top: .45rem; }
.project-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 32px;
  padding: .28rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--tone-gold);
  color: #453812;
  font: 700 .8rem/1.1 var(--mono);
  white-space: nowrap;
}
.project-status.status-live { background: var(--tone-green); color: #263d29; }
.project-status.status-active { background: var(--tone-blue); color: #213c49; }
.project-status.status-in-progress { background: var(--tone-peach); color: #523421; }
.project-status.status-archived { background: var(--tone-lavender); color: #3f3050; }
.project-card-name {
  display: block;
  margin-top: 1.15rem;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.project-card-summary { display: block; margin-top: .8rem; color: var(--muted-light); line-height: 1.45; }
.project-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.15rem; }
.project-tags li {
  padding: .42rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--tone-gold);
  color: #453812;
  font: 650 .82rem/1.2 var(--mono);
}
.project-tags li:nth-child(4n + 1) { background: var(--tone-green); color: #263d29; }
.project-tags li:nth-child(4n + 2) { background: var(--tone-blue); color: #213c49; }
.project-tags li:nth-child(4n + 3) { background: var(--tone-peach); color: #523421; }

.project-detail-header {
  position: relative;
  z-index: 20;
  width: min(calc(100% - 1rem), 1260px);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: .65rem auto 0;
  padding: .46rem;
  border: 1px solid #625c54;
  border-radius: 1.6rem;
  background-color: rgb(36 37 37 / .94);
  background-image: radial-gradient(circle, rgb(251 241 199 / .08) 1px, transparent 1px);
  background-size: 5px 5px;
  box-shadow: 0 10px 0 rgb(12 13 13 / .28), 0 18px 42px rgb(0 0 0 / .3);
}
.project-detail-header .text-link { min-height: 48px; color: var(--cream); }
.project-detail-main { width: min(calc(100% - 1.5rem), var(--page-max)); margin: .75rem auto 3rem; }
.project-detail-hero {
  padding: clamp(2.7rem, 5vw, 5rem) var(--pad);
  border: 1px solid #5b7f7b;
  border-radius: var(--radius-island);
  background: var(--canvas) url("media/work-water.webp") center / cover;
}
.project-detail-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.project-detail-title-row h1 {
  max-width: 18ch;
  font-size: clamp(3rem, 7vw, 7rem);
  overflow-wrap: anywhere;
}
.project-detail-summary { max-width: 62ch; margin-top: 1.2rem; color: var(--cream-soft); font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.project-detail-hero .project-tags { margin-top: 1.3rem; }
.project-detail-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.65rem; }
.project-detail-links .text-link { color: var(--cream); }
.project-link-note { padding: .7rem .9rem; border: 1px solid var(--dark-line); border-radius: var(--radius-pill); color: var(--cream-deep); font: 650 .9rem/1.4 var(--mono); }
.project-detail-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.project-detail-section {
  min-width: 0;
  padding: clamp(1.35rem, 2.5vw, 2.5rem);
  border-radius: var(--radius-card);
  background: var(--cream-soft);
  color: var(--canvas);
}
.project-detail-section:nth-child(2) { background: var(--cream); }
.project-detail-section:nth-child(3) { grid-column: 1 / -1; background: var(--tone-blue); }
.project-detail-section h2 {
  margin-top: .9rem;
  font-size: clamp(2rem, 3.6vw, 3.65rem);
  font-weight: 820;
  line-height: .95;
  letter-spacing: -.032em;
}
.project-detail-section > p:last-of-type { max-width: 72ch; margin-top: 1rem; line-height: 1.55; }
.project-architecture {
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-card);
  background: var(--canvas-soft);
  color: var(--cream);
}
.project-flow { display: flex; gap: 1.35rem; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.project-flow li { position: relative; flex: 1 1 0; min-width: 0; min-height: 72px; display: grid; place-items: center; padding: .65rem; border: 2px solid #514139; border-radius: .85rem; background: var(--cream-soft); color: var(--canvas); font: 700 clamp(.68rem, .85vw, .88rem)/1.25 var(--mono); text-align: center; overflow-wrap: anywhere; }
.project-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -1.1rem; top: 50%; color: var(--yellow); font: 800 1.3rem/1 var(--mono); transform: translateY(-50%); }
.project-architecture--image { padding: .45rem; }
.project-architecture--image a { display: block; border-radius: .8rem; overflow: hidden; }
.project-architecture--image a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.project-architecture--image img { display: block; width: 100%; max-height: min(45svh, 430px); object-fit: contain; }
.project-architecture--image figcaption { margin-top: .4rem; color: var(--cream-deep); font: 650 .72rem/1.3 var(--mono); text-align: center; }
.project-gallery-section { grid-column: 1 / -1; background: var(--canvas-soft); color: var(--cream); }
.project-gallery-section .kicker { color: var(--yellow); }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.project-shot { min-width: 0; }
.project-shot-frame {
  position: relative;
  min-height: 240px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-card);
  background: #121416;
}
.project-shot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
  color: var(--cream);
  text-align: center;
}
.project-shot-empty > span, .project-shot-empty small { color: var(--cream-deep); font: 650 .85rem/1.3 var(--mono); }
.project-shot-empty strong { max-width: 28ch; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.1; }
.project-shot-frame img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 180ms var(--ease-out); }
.project-shot-frame.is-loaded img { opacity: 1; }
.project-shot-frame.is-loaded .project-shot-empty { display: none; }
.project-shot figcaption { padding: .55rem .25rem; color: var(--cream-deep); font-size: .9rem; }
.project-bottom-back { margin: 1.4rem 0 0; color: var(--cream); }

@media (max-width: 1000px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .projects-grid-section, .project-detail-main { width: calc(100% - 2rem); }
  .projects-grid-section, .project-detail-hero { padding: 1.75rem 1rem; }
  .projects-grid, .project-detail-content, .project-gallery { grid-template-columns: 1fr; }
  .project-grid-card { min-height: 250px; }
  .project-detail-header { min-height: 58px; border-radius: 1.35rem; }
  .project-detail-header .wordmark-code { display: none; }
  .project-detail-header .wordmark strong { font-size: .875rem; }
  .project-detail-header .text-link { min-height: 44px; padding: .55rem .65rem; font-size: .88rem; }
  .project-detail-title-row h1 { font-size: clamp(2.7rem, 12vw, 4.65rem); }
  .project-detail-section { padding: 1.25rem; }
  .project-shot-frame { min-height: 200px; }
}
@media (max-width: 380px) {
  .project-detail-header .wordmark { padding-inline: .4rem; }
  .project-detail-header .wordmark strong { max-width: 6.6rem; overflow: hidden; text-overflow: ellipsis; }
}

/* Keep the projects grid within one viewport with balanced homepage gutters. */
html:has(body.home-page) { scrollbar-gutter: stable both-edges; }
.home-page { --page-max: 1480px; --pad: clamp(1.25rem, 3.5vw, 3.5rem); }
.home-page :where(.about, .atlas, .projects-grid-section, .operations, .decisions, .resume, footer) {
  width: min(calc(100% - clamp(3.5rem, 9vw, 11rem)), var(--page-max));
}
.projects-grid-section {
  position: relative;
  height: auto;
  min-height: 0;
  scroll-margin-top: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 1.4rem;
  padding: clamp(1.15rem, 2vw, 2rem);
  background-image: radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(7 10 11 / .42) 100%), url("media/work-water.webp");
}
.projects-grid-section .work-heading { margin: 0; padding: .35rem .7rem; box-shadow: none; }
.projects-grid-section .work-heading h2 { font-size: clamp(1.9rem, 3vw, 3.1rem); }
.projects-grid-section .work-heading > p:last-child { font-size: .95rem; }
.projects-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); align-content: start; gap: .35rem; min-height: 0; }
.project-grid-card { grid-column: span 2; }
.project-grid-card { position: relative; min-height: 0; height: auto; align-self: stretch; padding: .7rem; overflow: visible; border-color: transparent; box-shadow: 0 4px 0 rgb(0 0 0 / .16), 0 12px 23px rgb(0 0 0 / .13); transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.project-grid-card:is(:hover, :focus-within) { transform: translateY(-2px); box-shadow: 0 7px 0 rgb(0 0 0 / .14), 0 17px 26px rgb(0 0 0 / .18); }
.project-grid-card:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }
.project-card-cover { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.project-card-cover:focus-visible { position: absolute; outline: none; box-shadow: none; }
.project-card-arrow { position: absolute; z-index: 2; right: .7rem; bottom: .7rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--tone-blue); color: #213c49; font: 750 1rem/1 var(--mono); }
.project-card-arrow:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cream); }
.project-margin-note { display: none; }
.project-card-dates { color: #765817; }
.project-card-top .kicker { font-size: .7rem; }
.project-card-title-row { min-width: 0; display: flex; align-items: center; gap: .4rem; margin-top: .55rem; }
.project-card-title-row .project-card-name { min-width: 0; flex: 1; margin: 0; }
.project-card-title-row .project-status { flex: 0 0 auto; }
.project-icon-frame {
  flex: 0 0 auto;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--yellow);
  border-radius: .5rem;
  background: var(--canvas-soft);
  box-shadow: inset 0 0 0 1px rgb(250 189 47 / .18);
}
.project-icon-frame--dark { background: #1d2021; }
.project-icon-frame img { width: 100%; height: 100%; object-fit: cover; }
.project-detail-title-row .project-icon-frame { width: 3.6rem; height: 3.6rem; border-width: 2px; border-radius: 1rem; }
.project-grid-card .project-status { min-height: 24px; padding: .18rem .5rem; font-size: .85rem; }
.project-card-thumb {
  position: relative;
  flex: 0 0 auto;
  height: clamp(66px, 12svh, 120px);
  display: block;
  margin-top: .55rem;
  overflow: hidden;
  border-radius: .95rem;
  background: var(--canvas-soft);
  color: var(--cream);
}
.project-card-thumb > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.project-card-name { font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.05; }
.project-card-summary { margin-top: .3rem; font-size: .85rem; line-height: 1.25; }
.project-grid-card .project-tags { gap: .2rem; margin-top: .45rem; padding-right: 2rem; }
.project-grid-card .project-tags li { padding: .18rem .38rem; font-size: .85rem; }

@media (min-width: 1401px) {
  .project-margin-note { position: absolute; top: 20%; display: flex; align-items: center; gap: 1.6rem; color: rgb(250 189 47 / .15); font: 650 .75rem/1 var(--mono); white-space: nowrap; writing-mode: vertical-rl; pointer-events: none; }
  .project-margin-note-left { left: -1.5rem; transform: rotate(180deg); }
  .project-margin-note-right { right: -1.5rem; }
}
@media (min-width: 1600px) {
  .project-margin-note-left { left: -3.4rem; }
  .project-margin-note-right { right: -3.4rem; }
}

@media (min-width: 951px) and (max-height: 760px) {
  .project-card-thumb { height: clamp(58px, 9svh, 84px); }
  .project-grid-card { padding: .55rem; }
  .project-card-arrow { right: .55rem; bottom: .55rem; }
  .project-grid-card .project-tags li:nth-child(n + 3) { display: none; }
}
section#work { scroll-margin-top: 0; }

/* Detail pages use one viewport and swap the four content panels in place. */
.project-tabs-ready, .project-tabs-ready body.project-detail-page { width: 100%; height: 100%; overflow: hidden; }
.project-tabs-ready body.project-detail-page { height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.project-detail-header { margin-top: .5rem; min-height: 54px; padding: .28rem; }
.project-detail-header .wordmark { min-height: 42px; }
.project-detail-header .text-link { min-height: 42px; padding: .5rem .8rem; }
.project-tabs-ready .project-detail-main {
  width: min(calc(100% - clamp(3.5rem, 8vw, 10rem)), 1280px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, .38fr) minmax(0, .62fr);
  gap: .7rem;
  margin: .7rem auto;
}
.project-detail-hero { min-height: 0; padding: clamp(1.2rem, 2.5vw, 2.5rem); overflow: hidden; }
.project-detail-title-row h1 { font-size: clamp(2.4rem, 3vw, 3.1rem); }
.project-detail-summary { margin-top: .9rem; font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.4; }
.project-detail-hero .project-tags { margin-top: .95rem; }
.project-detail-links { margin-top: 1rem; }
.project-detail-content { min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: .55rem; margin: 0; }
.project-detail-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; padding: .3rem; border: 1px solid #625c54; border-radius: 1.3rem; background: var(--canvas-soft); }
.project-detail-tabs button { min-width: 0; min-height: 42px; padding: .5rem .35rem; border: 0; border-radius: 1rem; background: transparent; color: var(--cream); font: 700 .78rem/1.1 var(--mono); cursor: pointer; }
.project-detail-tabs button:hover { background: rgb(251 241 199 / .1); }
.project-detail-tabs button[aria-selected="true"] { background: var(--tone-gold); color: #453812; }
.project-detail-tabs button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.project-tabs-ready .project-detail-section { grid-column: 1; grid-row: 2; align-self: start; min-height: 0; max-height: 100%; display: block; padding: clamp(1rem, 2vw, 2rem); overflow: auto; }
.project-tabs-ready .project-detail-section[hidden] { display: none; }
.project-overview-banner { width: 100%; aspect-ratio: 8 / 3; max-height: min(27svh, 230px); margin-top: 1rem; border-radius: 1rem; object-fit: cover; }
.project-detail-section:nth-child(2), #panel-what { background: var(--cream-soft); }
#panel-how { background: var(--cream); }
#panel-problem { background: var(--tone-blue); }
.project-tabs-ready #panel-gallery { background: var(--canvas-soft); color: var(--cream); }
.project-detail-section h2 { margin-top: .5rem; font-size: clamp(1.8rem, 3vw, 3rem); }
.project-detail-section > p:last-of-type { margin-top: .7rem; font-size: clamp(.88rem, 1.1vw, 1rem); line-height: 1.42; }
.project-architecture { margin-top: .8rem; padding: .55rem; }
.project-tabs-ready .project-gallery-section { align-self: stretch; display: flex; flex-direction: column; }
.project-tabs-ready .project-gallery { min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .55rem; margin-top: .6rem; }
.project-tabs-ready .project-shot { min-height: 0; display: flex; flex-direction: column; }
.project-tabs-ready .project-shot-frame { min-height: 0; flex: 1; aspect-ratio: auto; border-radius: 1rem; }
.project-tabs-ready .project-shot figcaption { padding: .25rem 0 0; font-size: .72rem; line-height: 1.15; }
.project-tabs-ready .project-shot-empty { gap: .3rem; padding: .45rem; }
.project-tabs-ready .project-shot-empty strong { font-size: clamp(.9rem, 1.3vw, 1.3rem); }
.project-tabs-ready .project-shot-empty > span, .project-tabs-ready .project-shot-empty small { font-size: .65rem; }

@media (max-width: 950px) {
  .projects-grid-section { padding: 1rem; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); align-content: start; gap: .45rem; }
  .project-grid-card, .project-grid-card:nth-child(n) { grid-column: auto; }
  .project-grid-card { display: grid; grid-template-columns: 80px minmax(0, 1fr) 44px; grid-template-rows: repeat(4, auto); column-gap: .55rem; align-content: center; padding: .45rem; }
  .project-card-thumb { grid-column: 1; grid-row: 1 / 5; height: 100%; min-height: 58px; margin: 0; }
  .project-card-top, .project-card-title-row, .project-card-summary, .project-grid-card .project-tags { grid-column: 2; }
  .project-card-top { grid-row: 1; }
  .project-card-top .kicker { display: block; padding-top: .2rem; font-size: .6rem; }
  .project-card-title-row { grid-row: 2; margin: .1rem 0; }
  .project-card-name { font-size: 1rem; }
  .project-card-summary { grid-row: 3; margin: 0; font-size: .85rem; white-space: normal; }
  .project-grid-card .project-tags { grid-row: 4; margin-top: .2rem; }
  .project-grid-card .project-tags li { font-size: .85rem; }
  .project-card-arrow { position: relative; grid-column: 3; grid-row: 1 / 5; align-self: center; justify-self: center; width: 44px; height: 44px; right: auto; bottom: auto; font-size: .85rem; box-shadow: inset 0 0 0 7px var(--cream); }
  .project-tabs-ready .project-detail-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: .45rem; }
  .project-detail-hero { padding: .9rem 1rem; }
  .project-detail-hero .eyebrow { margin-bottom: .3rem; font-size: .7rem; }
  .project-detail-title-row h1 { font-size: clamp(2rem, 5vw, 3rem); }
  .project-detail-summary { margin-top: .4rem; font-size: .85rem; }
  .project-detail-hero .project-tags { margin-top: .5rem; }
  .project-detail-hero .project-tags li { padding: .25rem .5rem; font-size: .68rem; }
  .project-detail-links { margin-top: .5rem; }
  .project-detail-links :is(.text-link, .button-link, .project-link-note) { min-height: 30px; padding: .28rem .55rem; font-size: .7rem; }
}

@media (max-width: 600px) {
  .home-page { min-width: 0; }
  .home-page :where(.about, .atlas, .projects-grid-section, .operations, .decisions, .resume, footer) { width: calc(100% - 2.5rem); }
  .projects-grid-section { min-height: 0; grid-template-rows: auto auto; gap: .75rem; padding: .55rem; border-radius: 1.6rem; }
  .projects-grid-section .work-heading { display: block; padding: .3rem .45rem; box-shadow: none; }
  .projects-grid-section .work-heading .kicker, .projects-grid-section .work-heading > p:last-child { display: none; }
  .projects-grid-section .work-heading h2 { font-size: 1.4rem; }
  .projects-grid { grid-template-columns: 1fr; grid-template-rows: repeat(8, auto); gap: .2rem; }
  .project-grid-card { grid-template-columns: minmax(42px, 9svh) minmax(0, 1fr) 44px; grid-template-rows: repeat(4, auto); column-gap: .35rem; border-radius: .7rem; padding: .3rem; box-shadow: none; }
  .project-card-thumb { grid-row: 1 / 5; min-height: 0; border-radius: .55rem; }
  .project-detail-title-row .project-icon-frame { width: 2rem; height: 2rem; border-radius: .55rem; }
  .project-overview-banner { margin-top: .5rem; border-radius: .7rem; }
  .project-card-top { grid-row: 1; justify-content: flex-start; }
  .project-card-top .kicker { padding: 0; font-size: .52rem; }
  .project-grid-card .project-status { min-height: 0; padding: .14rem .34rem; font-size: .85rem; }
  .project-card-title-row { grid-row: 2; gap: .4rem; margin: 0; padding-right: 0; }
  .project-card-name { max-width: 100%; font-size: .86rem; white-space: normal; overflow-wrap: anywhere; }
  .project-card-summary { grid-row: 3; max-width: 100%; font-size: .85rem; }
  .project-grid-card .project-tags { grid-row: 4; gap: .12rem; margin-top: .12rem; padding-right: 0; overflow: visible; white-space: normal; }
  .project-grid-card .project-tags li { padding: .12rem .28rem; font-size: .85rem; }
  .project-grid-card .project-tags li:nth-child(n + 3) { display: none; }
  .project-card-arrow { width: 44px; height: 44px; font-size: .85rem; }

  .project-detail-header { width: calc(100% - .6rem); min-height: 44px; margin-top: .3rem; padding: .2rem; border-radius: 1rem; }
  .project-detail-header .wordmark { min-height: 36px; }
  .project-detail-header .text-link { min-height: 36px; padding: .25rem .55rem; font-size: .72rem; }
  .project-tabs-ready .project-detail-main { width: calc(100% - .6rem); margin: .3rem auto; }
  .project-detail-hero { padding: .65rem .8rem; border-radius: 1.2rem; }
  .project-detail-title-row { gap: .4rem; }
  .project-detail-title-row h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .project-detail-title-row .project-status { min-height: 22px; padding: .18rem .42rem; font-size: .6rem; }
  .project-detail-summary { margin-top: .25rem; font-size: .72rem; line-height: 1.2; }
  .project-detail-hero .project-tags { gap: .16rem; margin-top: .3rem; }
  .project-detail-hero .project-tags li { padding: .14rem .32rem; font-size: .56rem; }
  .project-detail-links { margin-top: .3rem; }
  .project-detail-links :is(.text-link, .button-link, .project-link-note) { min-height: 26px; padding: .18rem .4rem; font-size: .6rem; }
  .project-detail-tabs { gap: .12rem; padding: .2rem; border-radius: .9rem; }
  .project-detail-tabs button { min-height: 32px; padding: .2rem .1rem; border-radius: .65rem; font-size: .57rem; }
  .project-tabs-ready .project-detail-section { padding: .65rem .8rem; border-radius: 1.2rem; }
  .project-detail-section .kicker { font-size: .65rem; }
  .project-detail-section h2 { margin-top: .25rem; font-size: clamp(1.35rem, 5vw, 1.8rem); }
  .project-detail-section > p:last-of-type { margin-top: .4rem; font-size: clamp(.72rem, 2.75vw, .84rem); line-height: 1.3; }
  .project-architecture { margin-top: .45rem; padding: .45rem; border-radius: .8rem; }
  .project-flow { flex-direction: column; align-items: stretch; gap: .65rem; }
  .project-flow li { min-height: 32px; padding: .25rem .5rem; border-width: 1px; border-radius: .5rem; font-size: .67rem; }
  .project-flow li:not(:last-child)::after { content: "↓"; left: 50%; right: auto; top: auto; bottom: -.72rem; font-size: .8rem; transform: translateX(-50%); }
  .project-architecture--image img { max-height: min(31svh, 260px); }
  .project-architecture--image figcaption { font-size: .6rem; }
  .project-tabs-ready .project-gallery { gap: .25rem; margin-top: .4rem; }
  .project-tabs-ready .project-shot-frame { border-radius: .6rem; }
  .project-tabs-ready .project-shot figcaption { font-size: .6rem; }
  .project-tabs-ready .project-shot-empty strong { font-size: .7rem; }
  .project-tabs-ready .project-shot-empty > span, .project-tabs-ready .project-shot-empty small { font-size: .5rem; }
}

@media (max-width: 360px) and (max-height: 620px) {
  .project-architecture { margin-top: .2rem; padding: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loader::before, .loader::after { animation: none; }
  .project-grid-card, .project-card-arrow, .project-card-thumb img, .project-shot-frame img { transition: none; }
}

/* Detail pages share the site's dither textures and keep the reading area quiet. */
.project-detail-page {
  --detail-panel: var(--canvas-soft);
  --detail-text: var(--cream);
  --detail-muted: var(--cream-deep);
  --detail-line: rgb(251 241 199 / .17);
  --detail-outer-radius: 28px;
  --detail-inner-radius: 12px;
  --detail-label-size: .78rem;
  --detail-body-size: 1.0625rem;
  --detail-headline-size: 2rem;
  --detail-shadow: 0 12px 32px rgb(0 0 0 / .18);
  min-height: 100svh;
  color: var(--detail-text);
}
.project-detail-page :where(img, picture) { max-width: 100%; }
.project-detail-page img { height: auto; }
.project-detail-page :where(a, button):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: none;
}
.project-detail-header {
  position: sticky;
  top: 8px;
  z-index: 30;
  width: min(calc(100% - 32px), var(--page-max));
  border: 1px solid var(--detail-line);
  background-color: var(--canvas);
  background-image: linear-gradient(rgb(29 32 33 / .86), rgb(29 32 33 / .9)), url("media/work-water.webp");
  background-size: cover;
  background-position: center;
  box-shadow: var(--detail-shadow);
}
.project-detail-header .text-link:hover { color: var(--yellow); }
.project-detail-main {
  width: min(calc(100% - 32px), var(--page-max));
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 16px auto 64px;
}
.project-detail-sidebar {
  min-width: 0;
  position: sticky;
  top: 96px;
  overflow: hidden;
  border: 1px solid var(--detail-line);
  border-radius: var(--detail-outer-radius);
  background: var(--detail-panel);
}
.project-detail-sidebar.is-tall { position: relative; top: auto; }
.project-detail-hero {
  position: static;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.project-detail-hero-band {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background-color: var(--project-texture-tint, var(--canvas));
  background-image: linear-gradient(to bottom, rgb(29 32 33 / .67), rgb(29 32 33 / .84) 58%, var(--detail-panel)), var(--project-texture, url("media/work-water.webp"));
  background-size: cover;
  background-position: center;
}
.project-detail-hero-band .eyebrow,
.project-detail-section .kicker,
.project-detail-stats h2,
.project-detail-stack h2,
.project-flow-lane h3 {
  color: var(--detail-muted);
  font: 600 var(--detail-label-size)/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-detail-title-row { flex-wrap: wrap; align-items: center; gap: 8px; }
.project-detail-title-row .project-icon-frame { border-color: var(--detail-line); box-shadow: none; }
.project-detail-title-row h1 {
  max-width: 100%;
  color: var(--detail-text);
  font-size: 2.5rem;
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.02em;
  overflow-wrap: normal;
  word-break: normal;
}
.project-detail-title-row .project-status {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--detail-line);
  background: rgb(29 32 33 / .9);
  color: var(--detail-text);
  font: 600 var(--detail-label-size)/1.2 var(--mono);
}
.project-detail-summary { max-width: 34ch; margin-top: 12px; color: var(--detail-text); font-size: var(--detail-body-size); line-height: 1.6; }
.project-detail-hero-body { display: block; padding: 16px 24px 0; }
.project-detail-hero-body:empty { display: none; }
.project-detail-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.project-detail-links .button-link {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--yellow);
  color: var(--canvas);
  box-shadow: none;
}
.project-detail-links .button-link:hover { transform: translateY(-2px); box-shadow: var(--detail-shadow); }
.project-detail-links .button-link:active { transform: translateY(0); }
.project-detail-links .text-link { color: var(--detail-text); font-size: var(--detail-label-size); }
.project-detail-links .text-link:hover { color: var(--yellow); }
.project-link-note { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); }
.project-detail-extras { display: grid; gap: 24px; padding: 24px; }
.project-detail-extras:empty { display: none; }
.project-detail-stats, .project-detail-stack, .project-detail-adjacent { padding: 0; border: 0; }
.project-detail-stats h2, .project-detail-stack h2 { margin-bottom: 12px; }
.project-detail-stats dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.project-detail-stats dl > div { min-width: 0; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: start; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.project-detail-stats dd { margin: 0; color: var(--detail-text); font: 650 var(--detail-headline-size)/1.05 var(--sans); font-variant-numeric: tabular-nums; }
.project-detail-stats dt { color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); }
.project-detail-stack dl { display: grid; gap: 8px; }
.project-detail-stack dl > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
.project-detail-stack dt { color: var(--detail-muted); font: 600 var(--detail-label-size)/1.5 var(--mono); }
.project-detail-stack dd { min-width: 0; margin: 0; color: var(--detail-text); font-size: .875rem; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
.project-stack-item { white-space: nowrap; }
.project-detail-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-detail-adjacent a { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.project-detail-adjacent a:last-child { grid-column: 2; text-align: right; }
.project-detail-adjacent span { color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); }
.project-detail-adjacent strong { color: var(--detail-text); font-size: .875rem; font-weight: 600; line-height: 1.4; overflow-wrap: normal; }
.project-detail-adjacent a:hover strong { color: var(--yellow); }
.project-detail-adjacent a:hover:first-child span { transform: translateX(-4px); }
.project-detail-adjacent a:hover:last-child span { transform: translateX(4px); }
.project-detail-adjacent span { transition: transform 150ms ease-out; }
.project-detail-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.project-detail-tabs {
  position: sticky;
  top: 96px;
  z-index: 20;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--detail-line);
  border-radius: var(--detail-inner-radius);
  background: var(--canvas);
  scrollbar-width: thin;
}
.project-detail-tabs a {
  flex: 1 0 auto;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--detail-muted);
  font: 600 var(--detail-label-size)/1.2 var(--mono);
  white-space: nowrap;
  transition: color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.project-detail-tabs a:hover { color: var(--detail-text); transform: translateY(-2px); }
.project-detail-tabs a:active { transform: translateY(0); }
.project-detail-tabs a.is-active { border-color: var(--yellow); color: var(--detail-text); }
.project-detail-section {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--detail-line);
  border-radius: var(--detail-outer-radius);
  background: var(--detail-panel);
  color: var(--detail-text);
  scroll-margin-top: 168px;
}
.project-detail-section + .project-detail-section { margin-top: 32px; }
.project-detail-section:nth-child(n) { grid-column: auto; background: var(--detail-panel); }
.project-detail-section h2 {
  margin-top: 0;
  color: var(--detail-text);
  font-size: var(--detail-headline-size);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.project-detail-section > p:not(.kicker) { max-width: 68ch; margin-top: 16px; color: var(--detail-text); font-size: var(--detail-body-size); line-height: 1.6; }
.project-detail-section > p.project-problem-summary { font-weight: 600; }
.project-detail-section > p.project-problem-outcome { margin-top: 24px; }
.project-overview-banner { display: block; width: 100%; height: auto; max-height: 220px; aspect-ratio: 8 / 3; margin: 24px 0 0; border-radius: var(--detail-inner-radius); object-fit: cover; object-position: center bottom; }
.project-architecture { display: grid; gap: 24px; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--detail-text); }
.project-flow-lane { min-width: 0; }
.project-flow-lane h3 { margin-bottom: 12px; }
.project-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.project-flow li {
  position: relative;
  flex: 0 1 auto;
  min-width: min(180px, 100%);
  max-width: min(220px, 100%);
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--detail-line);
  border-radius: var(--detail-inner-radius);
  background: transparent;
  color: var(--detail-muted);
  font: 600 var(--detail-label-size)/1.45 var(--mono);
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.project-flow li::after, .project-flow li:not(:last-child)::after { content: none; }
.project-flow-lane--flow .project-flow li.has-next-in-row::after { content: "→"; position: absolute; left: calc(100% + 8px); right: auto; top: 50%; color: var(--detail-muted); font: 600 1rem/1 var(--mono); transform: translateY(-50%); opacity: .75; }
.project-flow-lane--none .project-flow { gap: 8px; }
.project-flow-lane--none .project-flow li { min-width: 0; min-height: 40px; max-width: 100%; padding: 8px 12px; border-radius: var(--radius-pill); }
.project-architecture--image a { display: block; max-width: 100%; overflow: hidden; border-radius: var(--detail-inner-radius); }
.project-architecture--image img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.project-architecture--image figcaption { margin-top: 8px; color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); }
.project-gallery-section .kicker { color: var(--detail-muted); }
.project-gallery { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.project-gallery-featured {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--detail-inner-radius);
  background: var(--canvas);
  cursor: zoom-in;
}
.project-gallery-featured picture, .project-gallery-featured .project-gallery-ghost { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-gallery-featured picture img, .project-gallery-blur { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-gallery-featured picture img { transition: transform 150ms ease-out; }
.project-gallery-featured:hover picture img { transform: scale(1.01); }
.project-gallery-featured:active picture img { transform: scale(1); }
.project-gallery-featured .project-gallery-blur { position: absolute; inset: 0; filter: blur(12px); transform: scale(1.04); }
.project-gallery-featured .project-gallery-ghost { z-index: 2; transition: opacity 150ms ease-out; }
.project-gallery-featured .project-gallery-ghost.is-leaving { opacity: 0; }
.project-gallery-caption { min-width: 0; display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.project-gallery-caption strong { color: var(--detail-text); font-size: var(--detail-body-size); font-weight: 650; }
.project-gallery-caption p { max-width: 68ch; margin-top: 4px; color: var(--detail-muted); font-size: .875rem; line-height: 1.6; }
.project-gallery-caption > span { flex: 0 0 auto; color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.project-gallery-thumbs { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.project-gallery-thumb { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: var(--detail-inner-radius); background: var(--canvas); cursor: pointer; transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out; }
.project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-gallery-thumb.is-active { border-color: var(--yellow); }
.project-gallery-thumb:hover { transform: translateY(-2px); box-shadow: var(--detail-shadow); }
.project-gallery-thumb:active { transform: translateY(0); box-shadow: none; }
.project-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; overflow: auto; border: 0; border-radius: 0; background: rgb(29 32 33 / .96); color: var(--detail-text); }
.project-lightbox::backdrop { background: rgb(29 32 33 / .88); backdrop-filter: blur(8px); }
.project-lightbox-shell { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.project-lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-lightbox-counter { color: var(--detail-muted); font: 600 var(--detail-label-size)/1.4 var(--mono); }
.project-lightbox button { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 4px; border: 1px solid var(--detail-line); border-radius: var(--radius-pill); background: var(--canvas-soft); color: var(--detail-text); cursor: pointer; transition: transform 150ms ease-out, color 150ms ease-out; }
.project-lightbox button:hover { color: var(--yellow); transform: translateY(-2px); }
.project-lightbox button:active { transform: translateY(0); }
.project-lightbox button:disabled { opacity: .5; cursor: default; }
.project-lightbox-close { position: static; width: 44px; height: 44px; font-size: 1.5rem; }
.project-lightbox-stage { min-height: 0; flex: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 16px; }
.project-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 176px); justify-self: center; object-fit: contain; }
.project-lightbox-caption { max-width: 68ch; align-self: center; text-align: center; }
.project-lightbox-caption strong { color: var(--detail-text); font-size: var(--detail-body-size); }
.project-lightbox-caption p { color: var(--detail-muted); font-size: .875rem; line-height: 1.6; }
.project-lightbox-open { overflow: hidden; }
@media (max-width: 950px) {
  .project-detail-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .project-detail-sidebar { display: contents; }
  .project-detail-hero { grid-row: 1; overflow: hidden; border: 1px solid var(--detail-line); border-radius: var(--detail-outer-radius); background: var(--detail-panel); }
  .project-detail-hero-band { min-height: 0; padding: 20px; }
  .project-detail-hero-body { padding: 0 20px 20px; }
  .project-detail-content { grid-row: 2; }
  .project-detail-extras { grid-row: 3; padding: 24px; border: 1px solid var(--detail-line); border-radius: var(--detail-outer-radius); background: var(--detail-panel); }
  .project-detail-tabs { top: 88px; }
  .project-detail-section { padding: 24px; }
}
@media (max-width: 600px) {
  .project-detail-header { top: 4px; width: calc(100% - 16px); min-height: 58px; }
  .project-detail-main { width: calc(100% - 16px); margin: 16px auto 48px; }
  .project-detail-hero-band { padding: 20px; }
  .project-detail-title-row h1 { font-size: 2rem; }
  .project-detail-summary { font-size: 1rem; }
  .project-detail-tabs { top: 72px; gap: 4px; }
  .project-detail-tabs a { min-height: 40px; padding: 8px 12px; }
  .project-detail-section { padding: 20px; scroll-margin-top: 136px; }
  .project-detail-section h2 { font-size: 1.75rem; }
  .project-detail-section > p:not(.kicker) { font-size: 1.0625rem; }
  .project-overview-banner { max-height: 220px; }
  .project-flow li { min-width: min(180px, 100%); }
  .project-gallery-thumbs { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
  .project-gallery-thumb { flex: 0 0 44%; scroll-snap-align: start; }
  .project-lightbox { padding: 16px; }
  .project-lightbox-stage { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 4px; }
  .project-lightbox-stage button { min-width: 36px; min-height: 44px; }
  .project-lightbox-stage img { max-height: calc(100dvh - 160px); }
}
@media (prefers-reduced-motion: reduce) {
  .project-detail-page, .project-detail-page * { scroll-behavior: auto !important; }
  .project-detail-page :where(a, button, img, picture) { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .project-gallery-featured .project-gallery-ghost { transition: opacity 150ms ease-out !important; }
}