/* Single project layout — one column, centered, max-width 720px.
   Reuses tokens, typography and the link/hr/em rules from components.css.
   The .single-project-page body class is added by single-project.php so
   nothing here leaks into the front page. */

/* Override the desktop `html, body { height: 100%; overflow: hidden }`
   from layout.css — single-project pages are a regular vertical scroll.
   The html element must be included: the viewport scrollbar belongs to
   it, and overriding only body left the page unscrollable at desktop
   widths (responsive.css already restores both below 1024px). This
   stylesheet is enqueued only on is_singular('project'), so the bare
   `html` selector cannot leak into other views. */
html {
  height: auto;
  overflow: auto;
}

body.single-project-page {
  height: auto;
  overflow: auto;
}

.single-project {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--col-padding);
}

.single-project__back {
  margin: 0 0 var(--space-xl);
}

.single-project__back a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 0.2em;
}

.single-project__back a:hover {
  text-decoration-color: var(--color-link);
}

.single-project__article > * + * {
  margin-top: var(--space-lg);
}

.single-project__title {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.single-project__subtitle {
  /* TinyMCE ships <p>-wrapped content; reset their default margins so the
     vertical-rhythm rule above (`> * + *`) controls spacing. */
}

.single-project__subtitle p {
  margin: 0;
}

.single-project__media {
  margin: 0;
}

.single-project__media img {
  display: block;
  width: 100%;
  height: auto;
}

.single-project__description p {
  margin: 0;
}

.single-project__description > p + p {
  margin-top: var(--space-md);
}

/* Viewport scrollbar — same visual pattern as the home columns (see
   layout.css): 6px gutter always reserved (no layout shift), track and
   thumb transparent at rest, thumb at --color-text-muted when revealed,
   --color-text-tertiary under the pointer. Reveal here is SCROLL-triggered
   (html.is-scrolling, toggled by main.js with a 1s decay) instead of the
   columns' :hover — :hover on html spans the whole page and would keep
   the thumb permanently visible. */
html {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html::-webkit-scrollbar {
  width: 6px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

html.is-scrolling {
  scrollbar-color: var(--color-text-muted) transparent;
}
html.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
}
html.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}