/* Shared project presentation. The direct Back to Projects link identifies the
   existing detail-page shell, including sites mounted under /cv. This keeps the
   stylesheet independent of the compiled app and out of blog/other page views. */
.relative:has(> a[href$="/projects"]) {
  --project-glass: rgba(255,255,255,.76);
  --project-glass-soft: rgba(255,255,255,.47);
  --project-glass-inset: rgba(247,247,247,.66);
  --project-glass-border: rgba(89,89,89,.18);
  --project-glass-shadow: 0 18px 55px -32px rgba(41,41,41,.28), inset 0 1px 0 rgba(255,255,255,.9);
  --project-glass-blur: blur(16px) saturate(115%);
  --project-glow-a: rgba(162,162,162,.16);
  --project-glow-b: rgba(175,175,175,.12);
  --project-muted: var(--text-secondary,#525252);
  --project-caption: var(--text-secondary,#525252);
  isolation: isolate;
}
.dark .relative:has(> a[href$="/projects"]) {
  --project-glass: rgba(30,30,30,.82);
  --project-glass-soft: rgba(34,34,34,.62);
  --project-glass-inset: rgba(55,55,55,.6);
  --project-glass-border: rgba(192,192,192,.22);
  --project-glass-shadow: 0 22px 60px -32px rgba(0,0,0,.65), inset 0 1px 0 rgba(229,229,229,.1);
  --project-glow-a: rgba(121,121,121,.13);
  --project-glow-b: rgba(136,136,136,.1);
  --project-muted: #ccc;
  --project-caption: #bbb;
}
.relative:has(> a[href$="/projects"]) > div > .mb-6:has(> .flex > h1) {
  padding: clamp(18px,3vw,30px);
  border: 1px solid var(--project-glass-border);
  border-radius: 24px;
  background: var(--project-glass);
  box-shadow: var(--project-glass-shadow);
  -webkit-backdrop-filter: var(--project-glass-blur);
  backdrop-filter: var(--project-glass-blur);
}
.relative:has(> a[href$="/projects"]) > div > div:has(> img) {
  border-radius: 24px;
  border: 1px solid var(--project-glass-border);
  height: auto;
  aspect-ratio: 2 / 1;
  background: #080808;
  box-shadow: var(--project-glass-shadow);
}
.relative:has(> a[href$="/projects"]) :is(.case-study-shell,.folio) {
  --case-study-text: var(--text-primary,#171717);
  --case-study-bg: transparent;
  --case-study-surface: var(--project-glass);
  --case-study-surface-2: var(--project-glass-inset);
  --case-study-surface-3: var(--project-glass-soft);
  --case-study-border: var(--project-glass-border);
  --case-study-border-strong: var(--project-glass-border);
  --case-study-muted: var(--project-muted);
  --case-study-eyebrow: var(--project-caption);
  --case-study-header: var(--project-glass);
  --case-study-radial-1: var(--project-glow-a);
  --case-study-radial-2: var(--project-glow-b);
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  background: radial-gradient(ellipse at 8% 4%,var(--project-glow-a),transparent 42%), radial-gradient(ellipse at 96% 28%,var(--project-glow-b),transparent 45%);
}
.relative:has(> a[href$="/projects"]) .case-study-bg {
  /* Keep legacy fixed decorative backgrounds inside their own story. */
  position: absolute !important;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.relative:has(> a[href$="/projects"]) :is(.case-study-panel,.folio-intro,.folio-model,.folio-results>div,.folio-decision,.folio-measure) {
  border: 1px solid var(--project-glass-border);
  background: var(--project-glass);
  box-shadow: var(--project-glass-shadow);
  -webkit-backdrop-filter: var(--project-glass-blur);
  backdrop-filter: var(--project-glass-blur);
}
.relative:has(> a[href$="/projects"]) :is(.case-study-subpanel,.case-study-pill,.case-study-chip) {
  border-color: var(--project-glass-border);
  background: var(--project-glass-inset);
}
.relative:has(> a[href$="/projects"]) :is(.case-study-header,.folio-nav) {
  background: var(--project-glass);
  border: 1px solid var(--project-glass-border);
  border-radius: 22px;
  box-shadow: var(--project-glass-shadow);
  -webkit-backdrop-filter: var(--project-glass-blur);
  backdrop-filter: var(--project-glass-blur);
}
.relative:has(> a[href$="/projects"]) .case-study-header>div { flex-wrap:wrap; gap:18px; }
.relative:has(> a[href$="/projects"]) .case-study-header>div>div { flex:1 0 200px; }
.relative:has(> a[href$="/projects"]) .case-study-header nav { flex-wrap:wrap; min-width:0; }
.relative:has(> a[href$="/projects"]) .case-study-shell .case-study-eyebrow { color:var(--project-caption); }
.relative:has(> a[href$="/projects"]) :is(.case-study-shell,.folio) a:focus-visible,
.relative:has(> a[href$="/projects"]) :is(.case-study-shell,.folio) button:focus-visible { outline:2px solid var(--text-primary);outline-offset:4px; }
@media(max-width:700px) {
  .relative:has(> a[href$="/projects"]) > div > .mb-6:has(> .flex > h1)>.flex { flex-wrap:wrap; }
  .relative:has(> a[href$="/projects"]) > div > .mb-6:has(> .flex > h1) h1 { font-size:24px;line-height:1.25; }
  .relative:has(> a[href$="/projects"]) { --project-glass-blur:blur(9px) saturate(110%); }
  .relative:has(> a[href$="/projects"]) .case-study-header { position:relative;top:auto; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .relative:has(> a[href$="/projects"]) { --project-glass:var(--bg-elevated,#fff); --project-glass-inset:var(--bg-secondary,#fafafa); }
}
@media(prefers-reduced-transparency:reduce), print {
  .relative:has(> a[href$="/projects"]) { --project-glass:var(--bg-elevated,#fff); --project-glass-inset:var(--bg-secondary,#fafafa); --project-glass-blur:none; --project-glass-shadow:none; }
}
@media(prefers-reduced-motion:reduce) {
  .relative:has(> a[href$="/projects"]) *, .relative:has(> a[href$="/projects"]) *::before, .relative:has(> a[href$="/projects"]) *::after { animation:none!important; transition:none!important; }
}

/* Neutral page chrome; images and artwork retain their original colors. */
.relative:has(> a[href$="/projects"]) { --text-primary:#171717; --text-secondary:#525252; --border-color:#dedede; }
.dark .relative:has(> a[href$="/projects"]) { --text-primary:#fafafa; --text-secondary:#c4c4c4; --border-color:#444; }
.relative:has(> a[href$="/projects"]) .folio { --folio-accent:var(--text-primary)!important; }
.relative:has(> a[href$="/projects"]) .folio-options button[aria-pressed=true] { background:var(--text-primary);color:var(--bg-primary,#fff);border-color:var(--text-primary); }
.relative:has(> a[href$="/projects"]) img,
a[href*="/projects/"] img { filter:none; }
.relative:has(> a[href$="/projects"]) > div > div:has(> img) img { object-fit:contain; }
a[href*="/projects/"]:not(.recent-project-card) > div:has(> img[src*="portfolio-cover-"]) { height:auto;aspect-ratio:2 / 1;background:#080808; }
a[href*="/projects/"] img[src*="portfolio-cover-"] { object-fit:contain; }
.relative:has(> a[href$="/projects"]) > div > div:has(> img[src*="portfolio-cover-"]) > .absolute,
a[href*="/projects/"] > div:has(> img[src*="portfolio-cover-"]) > .absolute { background:none; }
@media(max-width:700px) {
  a[href*="/projects/"] .flex:has(> h3) { flex-wrap:wrap; }
  a[href*="/projects/"] .flex>h3 { flex-basis:100%; }
}

/* Image color is intentional, including profile imagery outside project pages. */
.minimal-about-image img,.minimal-about-image:hover img { filter:none; }
.relative:has(> a[href$="/projects"]) .folio img { filter:none!important; }

/* Recent cards own their media geometry; cover aspect ratios must not size grid columns.
   Mirrors the shared frontend rules so this correction can ship without a JS rebuild. */
.recent-project-media { position:relative;min-width:0;width:100%;overflow:hidden;align-self:stretch; }
.recent-project-media img { position:absolute;inset:0;display:block;width:100%;height:100%; }
.recent-project-media:has(> img[src*="portfolio-cover-"]) { background:#080808; }
@media(min-width:768px) {
  .recent-projects:not(.warm-recent-projects) .recent-project-card { grid-template-columns:15rem minmax(0,1fr); }
}