* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: calc(2.4rem * var(--h1-scale, var(--heading-scale, 1))); letter-spacing: var(--h1-tracking, var(--heading-tracking, normal)); text-transform: var(--h1-transform, var(--heading-transform, none)); }
h2 { font-size: calc(1.8rem * var(--h2-scale, var(--heading-scale, 1))); letter-spacing: var(--h2-tracking, var(--heading-tracking, normal)); text-transform: var(--h2-transform, var(--heading-transform, none)); }
h3 { font-size: calc(1.4rem * var(--h3-scale, var(--heading-scale, 1))); letter-spacing: var(--h3-tracking, var(--heading-tracking, normal)); text-transform: var(--h3-transform, var(--heading-transform, none)); }
h4 { font-size: calc(1.2rem * var(--h4-scale, var(--heading-scale, 1))); letter-spacing: var(--h4-tracking, var(--heading-tracking, normal)); text-transform: var(--h4-transform, var(--heading-transform, none)); }
h5 { font-size: calc(1rem * var(--h5-scale, var(--heading-scale, 1))); letter-spacing: var(--h5-tracking, var(--heading-tracking, normal)); text-transform: var(--h5-transform, var(--heading-transform, none)); }
h6 { font-size: calc(0.875rem * var(--h6-scale, var(--heading-scale, 1))); letter-spacing: var(--h6-tracking, var(--heading-tracking, normal)); text-transform: var(--h6-transform, var(--heading-transform, none)); }
a { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
main { max-width: var(--content-width); margin: 0 auto; padding: calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 4); flex: 1 0 auto; }

/* Header / footer */
.site-header, .site-footer {
  display: flex; flex-wrap: wrap; gap: var(--space-unit);
  align-items: baseline; justify-content: space-between;
  max-width: var(--content-width); margin: 0 auto;
  padding: var(--space-unit);
}
.site-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-text); text-decoration: none; }
.site-brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-brand :where(img) { max-height: 2.5rem; width: auto; border-radius: 0; }
.site-header.brand-center { justify-content: center; }
.site-header.brand-right { flex-direction: row-reverse; }

.site-footer .footer-nav, .site-footer .footer-social { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 0.75); }
.footer-signup { display: flex; flex-direction: column; gap: calc(var(--space-unit) * 0.5); }
.footer-signup-heading { margin: 0; }
.footer-signup form { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 0.5); }
.footer-signup input[type="email"] {
  flex: 1 1 12rem; min-width: 0;
  padding: calc(var(--space-unit) * 0.5);
  border: 1px solid var(--color-muted); border-radius: var(--radius);
  background: var(--color-bg); color: var(--color-text);
}
.footer-signup button {
  background: var(--color-accent); color: var(--color-accent-contrast);
  border: 0; border-radius: var(--radius); font-weight: 700; cursor: pointer;
  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
}
.footer-credit { font-size: 0.9rem; color: var(--color-muted); }
.footer-credit :first-child { margin: 0; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 0.75); }
.site-header nav a, .site-footer nav a { color: var(--color-text); text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--color-accent); }
.site-footer { border-top: 1px solid var(--color-surface); margin-top: calc(var(--space-unit) * 2); font-size: 0.9rem; color: var(--color-muted); }

/* Footer background bands (TASK-51). Default: .footer-inner is layout-transparent
   so the footer renders exactly as the rules above. With a band, the footer goes
   full-bleed and .footer-inner becomes the centered content container. */
.footer-inner { display: contents; }
.site-footer.footer-bg-surface,
.site-footer.footer-bg-accent,
.site-footer.footer-bg-inverted {
  display: block;
  width: 100vw;
  max-width: none;
  margin: calc(var(--space-unit) * 2) 0 0 calc(50% - 50vw);
  border-top: 0;
  padding: calc(var(--space-unit) * 2) var(--space-unit);
}
.site-footer.footer-bg-surface .footer-inner,
.site-footer.footer-bg-accent .footer-inner,
.site-footer.footer-bg-inverted .footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit);
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--content-width);
  margin: 0 auto;
}
.site-footer.footer-bg-surface { background: var(--color-surface); }
.site-footer.footer-bg-accent { background: var(--color-accent); color: var(--color-accent-contrast); }
.site-footer.footer-bg-inverted { background: var(--color-text); color: var(--color-bg); }
.site-footer.footer-bg-accent .footer-nav a,
.site-footer.footer-bg-accent .footer-social a,
.site-footer.footer-bg-accent .footer-credit,
.site-footer.footer-bg-accent .footer-credit a {
  color: var(--color-accent-contrast);
}
.site-footer.footer-bg-inverted .footer-nav a,
.site-footer.footer-bg-inverted .footer-social a,
.site-footer.footer-bg-inverted .footer-credit,
.site-footer.footer-bg-inverted .footer-credit a {
  color: var(--color-bg);
}

/* Blocks */
.block-heading {
  margin-top: calc(var(--space-unit) * 2);
  font-size: calc(1.6rem * var(--h-heading-scale, var(--heading-scale, 1)));
  letter-spacing: var(--h-heading-tracking, var(--heading-tracking, normal));
  text-transform: var(--h-heading-transform, var(--heading-transform, none));
}
.block-heading.is-display {
  font-size: calc(2.6rem * var(--h-display-scale, var(--heading-scale, 1)));
  letter-spacing: var(--h-display-tracking, var(--heading-tracking, normal));
  text-transform: var(--h-display-transform, var(--heading-transform, none));
}
.block-heading.is-eyebrow {
  font-size: calc(0.8rem * var(--h-eyebrow-scale, var(--heading-scale, 1)));
  letter-spacing: var(--h-eyebrow-tracking, var(--heading-tracking, 0.12em));
  text-transform: var(--h-eyebrow-transform, uppercase);
  color: var(--color-muted);
  font-weight: 600;
}
.block-text :first-child { margin-top: 0; }
/* Text width as a fraction of the baseline content width; centered in the content area */
.block-text.width-75 { max-width: calc(var(--content-width) * 0.75); margin-inline: auto; }
.block-text.width-66 { max-width: calc(var(--content-width) * 0.66); margin-inline: auto; }
.block-text.width-50 { max-width: calc(var(--content-width) * 0.5); margin-inline: auto; }
.block-image figcaption { color: var(--color-muted); font-size: 0.9rem; }
.block-gallery { display: grid; gap: var(--space-unit); }
.block-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-faq details { background: var(--color-surface); border-radius: var(--radius); padding: calc(var(--space-unit) * 0.75); margin-bottom: calc(var(--space-unit) * 0.5); }
.block-faq summary { font-weight: 700; cursor: pointer; }
.block-cta { background: var(--color-surface); border-radius: var(--radius); padding: calc(var(--space-unit) * 1.5); text-align: center; margin: calc(var(--space-unit) * 2) 0; }
.block-cta .button {
  display: inline-block; background: var(--color-accent); color: var(--color-accent-contrast);
  padding: calc(var(--space-unit) * 0.5) var(--space-unit); border-radius: var(--radius); text-decoration: none; font-weight: 700;
}

/* Block layout utilities (alignment + background) — declared after block rules so background wins over .block-cta */
.align-center { text-align: center; }
.align-right { text-align: right; }
.block-bg-surface, .block-bg-accent {
  padding: calc(var(--space-unit) * 1.5);
  border-radius: var(--radius);
}
.block-bg-surface { background: var(--color-surface); }
.block-bg-accent { background: var(--color-accent); color: var(--color-accent-contrast); }
.block-bg-accent a, .block-bg-accent .block-heading { color: var(--color-accent-contrast); }

/* Hero block — full-bleed split (text panel + image) */
.block-hero {
  display: flex; flex-wrap: wrap; align-items: stretch;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: calc(var(--space-unit) * 2); margin-bottom: calc(var(--space-unit) * 2);
}
.block-hero .hero-panel {
  flex: 1 1 50%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-unit);
  padding: calc(var(--space-unit) * 3);
}
.block-hero .hero-eyebrow, .block-hero .hero-headline { margin: 0; }
.block-hero .hero-media { flex: 1 1 50%; margin: 0; display: flex; flex-direction: column; }
.block-hero .hero-media :where(picture, img) { width: 100%; }
.block-hero .hero-media picture { flex: 1 1 auto; min-height: 0; display: block; }
.block-hero .hero-media img { height: 100%; object-fit: cover; }
.block-hero .hero-media figcaption {
  color: var(--color-muted); font-size: 0.9rem;
  padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 3);
}
.block-hero.ratio-40-60 .hero-panel { flex-basis: 40%; }
.block-hero.ratio-40-60 .hero-media { flex-basis: 60%; }
.block-hero.ratio-60-40 .hero-panel { flex-basis: 60%; }
.block-hero.ratio-60-40 .hero-media { flex-basis: 40%; }
.block-hero.image-left .hero-media { order: -1; }

/* Two-column image + text */
.block-columns {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--space-unit) * 2);
  margin: calc(var(--space-unit) * 2) 0;
}
.block-columns .col-media, .block-columns .col-text {
  flex: 1 1 calc(50% - var(--space-unit) * 2);
}
.block-columns .col-media { margin: 0; }
.block-columns.ratio-40-60 .col-media { flex-basis: calc(40% - var(--space-unit) * 2); }
.block-columns.ratio-40-60 .col-text { flex-basis: calc(60% - var(--space-unit) * 2); }
.block-columns.ratio-60-40 .col-media { flex-basis: calc(60% - var(--space-unit) * 2); }
.block-columns.ratio-60-40 .col-text { flex-basis: calc(40% - var(--space-unit) * 2); }
.block-columns.image-left .col-media { order: -1; }
.block-columns.valign-top { align-items: flex-start; }
.block-columns.valign-bottom { align-items: flex-end; }

/* Credits / metadata (label + content rows) */
.block-credits { margin: calc(var(--space-unit) * 2) 0; }
.block-credits .credit-row {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-unit);
  align-items: start;
  padding: calc(var(--space-unit) * 0.75) 0;
  border-top: 1px solid var(--color-surface);
}
.block-credits dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--heading-tracking, 0.08em);
  color: var(--color-muted);
}
.block-credits dd { margin: 0; display: flex; flex-direction: column; gap: calc(var(--space-unit) * 0.25); }

@media (max-width: 760px) {
  .block-hero { flex-direction: column; }
  .block-hero .hero-panel, .block-hero .hero-media { flex-basis: auto; }
  .block-columns .col-media, .block-columns .col-text { flex-basis: 100%; }
  .block-credits .credit-row { grid-template-columns: 1fr; gap: calc(var(--space-unit) * 0.25); }
}

/* Listings (blog posts, portfolio projects) */
.listing { list-style: none; padding: 0; }
.listing li { margin-bottom: calc(var(--space-unit) * 1.5); }
.listing time { color: var(--color-muted); font-size: 0.9rem; display: block; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-unit); list-style: none; padding: 0; }
.project-grid a { text-decoration: none; color: var(--color-text); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-unit); margin-top: calc(var(--space-unit) * 2); }
.pagination a { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.pagination .is-disabled { color: var(--color-muted); }
.pagination-status { color: var(--color-muted); font-size: 0.9rem; }

/* Docs layout */
.docs-layout { display: flex; gap: calc(var(--space-unit) * 2); max-width: calc(var(--content-width) + 16rem); margin: 0 auto; padding: var(--space-unit); }
.docs-sidebar { flex: 0 0 13rem; }
.docs-sidebar ul { list-style: none; padding: 0; }
.docs-sidebar a { display: block; padding: calc(var(--space-unit) * 0.25) 0; color: var(--color-text); text-decoration: none; }
.docs-sidebar a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
.docs-content { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .block-gallery.cols-3, .block-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .docs-layout { flex-direction: column; }
}

.block-gallery a { display: block; line-height: 0; cursor: zoom-in; }
.pswp__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem; text-align: center;
  color: #fff; font-size: 0.875rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pswp__caption:empty { display: none; }