/* A compact, text-led project index. */
.projects-page .public-main, .projects-page .page-footer { width: min(1120px, 90%); }
.projects-page .public-main { padding-block: 36px 64px; }
.projects-page .page-heading { padding-bottom: 36px; margin-bottom: 0; border-bottom: 0; }
.projects-page h1 { margin: 0; font-size: 48px; letter-spacing: -.04em; }
.projects-page .project-entry {
  position: relative;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 40px;
  padding-block: 26px 0;
  border: 0;
}
.projects-page .project-entry:first-child { padding-top: 0; }
.projects-page .project-entry + .project-entry { margin-top: 36px; padding-top: 30px; }
.projects-page .project-entry + .project-entry::before { content: ''; position: absolute; top: 0; left: 0; width: 36px; height: 2px; background: var(--accent); opacity: .55; }
.projects-page .project-heading { min-width: 0; }
.projects-page .project-heading h2 { margin: 0; color: var(--accent); font-size: 26px; line-height: 1.3; letter-spacing: -.025em; }
.projects-page .project-content { min-width: 0; }
.projects-page .project-content p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.projects-page .project-points {
  margin: 0;
  padding-left: 1.3em;
  max-width: 760px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.projects-page .project-points li + li { margin-top: 5px; }
.projects-page .project-points li::marker { color: var(--accent); }
.projects-page .project-tags { margin: 10px 0 0; gap: 4px 10px; }
.projects-page .tag { padding: 0; border: 0; border-radius: 0; text-transform: none; font-size: 11px; letter-spacing: 0; line-height: 1.6; }
.projects-page .project-metric {
  color: var(--accent);
  font-family: Comfortaa, sans-serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}
.projects-page .project-snapshot-note {
  margin: 24px 0 0;
  color: #5d625a;
  font-size: 13px;
  line-height: 1.6;
}

.projects-page .project-content .project-sources { margin: 14px 0 0; font-size: 12px; line-height: 1.65; }
.project-sources > span { display: block; color: var(--accent); font: 700 11px/1.6 Comfortaa, sans-serif; margin-bottom: 5px; }
.projects-page .project-entry:has(.project-showcase) { row-gap: 8px; }
.project-showcase { grid-column: 2; min-width: 0; scroll-margin-top: 16px; }
.project-showcase.has-overview-control:not([open]) { display: none; }
.project-showcase.has-overview-control > summary[hidden] { display: none; }
.project-showcase[open] { grid-column: 1 / -1; }
.project-showcase > summary, .project-overview-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: max-content; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; list-style: none; text-align: left; font: 500 12px/1.4 'SFMono-Regular', Consolas, monospace; }
.project-overview-toggle { margin-top: 2px; }
.projects-page .project-heading:has(.project-overview-toggle) .project-tags { margin-top: 4px; }
.project-showcase[open] > summary { position: sticky; top: 0; z-index: 5; width: 100%; max-width: none; padding-inline-start: 240px; background: var(--paper); border-bottom: 1px solid #d5cdbf; }
.project-showcase > summary::-webkit-details-marker { display: none; }
.project-showcase > summary:hover > span, .project-overview-toggle:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.project-showcase > summary svg, .project-overview-toggle svg { display: block; box-sizing: content-box; width: 12px; height: 12px; padding: 5px; border: 1px solid #e5c7a9; border-radius: 50%; background: #f3d9bd; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.project-showcase > summary:hover svg, .project-overview-toggle:hover svg { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.project-showcase[open] > summary .story-cue-vertical, .project-overview-toggle[aria-expanded="true"] .story-cue-vertical { display: none; }
.rheos-logo-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 32px); padding-block: 16px 8px; }
.rheos-logo-links a { display: block; transition: opacity .15s ease; }
.rheos-logo-links a:hover { opacity: .8; }
.rheos-logo-links img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.project-story-tools, .project-story-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid #b9b1a5; padding: 8px 0; font: 11px/1.5 'SFMono-Regular', Consolas, monospace; }
.project-story-tools a, .project-story-end button { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; color: var(--accent); }
.project-story-tools a:hover, .project-story-end button:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-story-end { border-top: 0; justify-content: flex-end; }
.project-story-end button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.project-showcase iframe { display: block; width: 100%; height: 720px; border: 0; color-scheme: light; background: #eee8dd; }
.project-showcase [hidden] { display: none; }
.project-showcase.is-gallery .project-story-tools, .project-showcase.is-gallery .project-story-end { display: none; }
.project-gallery-view { position: relative; }
.project-showcase.is-gallery iframe { height: clamp(480px, calc(100svh - 132px), 680px); }
.project-showcase.is-gallery iframe:not([data-ready]) { visibility: hidden; }
.project-gallery-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font: 12px/1.6 'SFMono-Regular', Consolas, monospace; }
.project-gallery-loading a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.project-image-dialog { width: min(1240px, 94vw); max-width: 94vw; max-height: 92vh; padding: 24px; border: 1px solid #b9b1a5; background: var(--paper); color: var(--ink); }
.project-image-dialog::backdrop { background: #292d29cc; }
.project-image-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.projects-page .project-image-dialog h2 { font-size: 18px; margin: 0; }
.project-image-dialog button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid #b9b1a5; background: none; color: var(--accent); cursor: pointer; font: 700 12px Comfortaa, sans-serif; }
.project-image-dialog img { display: block; width: 100%; height: auto; max-height: 66vh; object-fit: contain; }
.project-image-dialog p { font-size: 14px; line-height: 1.6; margin-bottom: 0; }
.projects-page :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }


@media (max-width: 760px) {
  .projects-page .project-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .projects-page .project-entry:has(.project-showcase) { row-gap: 14px; }
  .projects-page .project-entry + .project-entry { margin-top: 30px; padding-top: 28px; }
  .projects-page .public-main { padding-top: 28px; }
  .projects-page h1 { font-size: 38px; }
  .projects-page .project-heading h2 { font-size: 24px; }
  .projects-page .project-tags { margin-top: 6px; }
  .project-showcase, .project-showcase[open] { grid-column: 1; }
  .project-showcase[open] > summary { padding-inline-start: 0; }
}
@media (max-width: 700px) {
  /* Expand the 90% content column without including the browser scrollbar. */
  .project-showcase[open]:not(.project-showcase-logos) { width: calc(100% / .9); margin-inline: calc((100% - 100% / .9) / 2); }
  .project-showcase[open] > summary, .project-story-tools, .project-story-end { padding-inline: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .project-showcase > summary svg, .project-overview-toggle svg, .rheos-logo-links a { transition: none; }
}