/*
  Shared page-block alignment for the 0704 local redesign prep.
  Scope: portfolio shell pages only. Embedded prototypes keep their own UI.
*/

:root {
  --site-bg: #0a0a0a;
  --site-bg-alt: #131313;
  --site-panel: #161616;
  --site-text: #f4f3ee;
  --site-text-muted: #9c9b93;
  --site-text-faint: #5c5b56;
  --site-line: #2a2a2a;
  --site-line-strong: #444442;
  --site-accent: #ff5a1f;
  --site-accent-muted: #c8460f;
  --site-font-display: "Space Grotesk", "Archivo", sans-serif;
  --site-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-font-mono: "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --site-container: 1120px;
  --site-container-wide: 1280px;
  --site-page-x: 32px;
  --site-space-1: 8px;
  --site-space-2: 16px;
  --site-space-3: 24px;
  --site-space-4: 32px;
  --site-space-5: 48px;
  --site-space-6: 64px;
  --site-radius: 0;
  --site-measure: 72ch;
  --site-measure-tight: 58ch;
  --pf-t-hero: 4.5rem;
  --pf-t-h1: 3.5rem;
  --pf-t-h2: 2.375rem;
  --pf-t-h3: 1.4375rem;
  --pf-t-body: 1.0625rem;
  --pf-s7: 6rem;
  --pf-s8: 8rem;
  --pf-section-x: 2.5rem;
}

@media (max-width: 720px) {
  :root {
    --site-page-x: 20px;
    --pf-t-hero: 3rem;
    --pf-t-h1: 2.5rem;
    --pf-t-h2: 2rem;
    --pf-t-h3: 1.25rem;
    --pf-t-body: 1rem;
    --pf-s7: 4rem;
    --pf-s8: 5rem;
    --pf-section-x: 1.25rem;
  }
}

body {
  background: var(--site-bg);
  color: var(--site-text);
  font-size: 16px;
  line-height: 1.62;
}

body,
button,
input,
textarea,
select {
  font-family: var(--site-font-body);
}

h1,
h2,
h3,
.hero-title,
.portfolio-hero-title,
.pf-header__name,
.section-title,
.cs-section-title,
.showcase-card-title,
.portfolio-showcase-nav-card-title {
  font-family: var(--site-font-display);
  letter-spacing: 0 !important;
}

p,
li,
figcaption,
blockquote,
td,
th {
  letter-spacing: 0 !important;
}

p,
li,
blockquote,
figcaption {
  max-width: var(--site-measure);
}

code,
kbd,
samp {
  overflow-wrap: anywhere;
  white-space: normal !important;
}

main svg {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

main table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

main th,
main td {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.95) !important;
  border-bottom: 1px solid var(--site-line) !important;
  backdrop-filter: blur(8px);
}

.site-header > .wrap,
.site-header > .site-header-inner,
.site-header > .pf-container {
  width: 100%;
  max-width: var(--site-container) !important;
  min-height: 64px;
  margin: 0 auto !important;
  padding: 0 var(--site-page-x) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--site-space-3) !important;
}

.site-name {
  color: var(--site-text) !important;
  font-family: var(--site-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--site-space-3) !important;
}

.site-nav a {
  color: var(--site-text-muted) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--site-accent) !important;
}

.wrap,
.portfolio-container,
.pf-container {
  width: 100% !important;
  max-width: var(--site-container) !important;
  box-sizing: border-box !important;
}

main img,
main svg,
figure,
.cs-figure,
.artifact,
.domain-transfer,
.beforeafter,
.card-grid,
.details-list,
.tag-cloud {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main > .sec,
main > .portfolio-section,
.pf-section {
  background: var(--site-bg) !important;
  background-image:
    linear-gradient(rgba(244, 243, 238, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 243, 238, 0.012) 1px, transparent 1px) !important;
  background-size: 100% 24px, 80px 100% !important;
}

main > .sec:nth-of-type(even),
main > .portfolio-section:nth-of-type(even),
.pf-section:nth-of-type(even) {
  background: var(--site-bg-alt) !important;
}

main > .hero,
main > .sec.hero,
main > .hero.sec,
main > .portfolio-showcase-hero,
.pf-header {
  background: var(--site-bg) !important;
  border-bottom: 1px solid var(--site-line) !important;
  padding-top: var(--site-space-6) !important;
  padding-bottom: var(--site-space-6) !important;
}

.hero .wrap,
.portfolio-showcase-hero .portfolio-container,
.pf-header .pf-container {
  display: grid;
  gap: var(--site-space-3);
}

.hero-title,
.portfolio-hero-title,
.pf-header__name {
  max-width: 960px !important;
  color: var(--site-text) !important;
  font-size: 4rem !important;
  line-height: 0.96 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.hero-subtitle,
.hero-title-sub {
  display: block !important;
  color: var(--site-text-muted) !important;
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  margin-top: var(--site-space-2) !important;
}

.hero-lead,
.hero-sub,
.lead,
.portfolio-lead,
.pf-header__summary {
  max-width: var(--site-measure) !important;
  color: var(--site-text) !important;
  font-size: 1.1875rem !important;
  line-height: 1.65 !important;
}

.eyebrow,
.hero-eyebrow,
.portfolio-work-eyebrow,
.pf-header__kicker,
.hero-provenance,
.back,
.cs-back,
.disclosure-chip,
.chip,
.cs-disclosure-chip {
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.hero-provenance,
.back,
.cs-back,
.pf-meta-note {
  color: var(--site-text-muted) !important;
}

.disclosure-chip,
.chip,
.cs-disclosure-chip {
  width: fit-content;
  color: var(--site-accent) !important;
  background: transparent !important;
  border: 1px solid var(--site-accent-muted) !important;
  border-radius: var(--site-radius) !important;
  padding: 7px 11px !important;
}

.recruiter,
.cs-recruiter-blurb,
.pf-copy-block {
  width: 100% !important;
  max-width: var(--site-container) !important;
  margin-top: var(--site-space-4) !important;
  padding: var(--site-space-3) !important;
  background: var(--site-bg-alt) !important;
  border: 1px solid var(--site-line) !important;
  border-left: 2px solid var(--site-accent) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 172px minmax(0, 1fr) auto !important;
  gap: var(--site-space-2) var(--site-space-3) !important;
  align-items: start !important;
}

.recruiter-label,
.cs-recruiter-blurb__label,
.pf-copy-block__label {
  color: var(--site-accent) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.recruiter blockquote,
.cs-recruiter-blurb__text,
.pf-copy-block__text {
  color: var(--site-text) !important;
  font-family: var(--site-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  max-width: var(--site-measure) !important;
  grid-column: 2 / 3 !important;
  grid-row: 1 / span 2 !important;
}

/* Case-study submission-ready summaries are italic; resume copy block stays upright. */
.recruiter blockquote,
.cs-recruiter-blurb__text {
  font-style: italic !important;
}

.copy-btn,
.cs-blurb-copy,
.pf-button {
  border-radius: var(--site-radius) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.recruiter > .copy-btn,
.cs-recruiter-blurb .cs-blurb-copy,
.pf-copy-block > .pf-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  padding: 0.625rem 0.875rem !important;
  color: var(--site-text) !important;
  background: transparent !important;
  border: 1px solid var(--site-line-strong) !important;
}

.cs-recruiter-blurb__footer {
  display: contents !important;
}

.recruiter-micro,
.cs-recruiter-blurb__note {
  grid-column: 2 / 3 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  color: var(--site-text-faint) !important;
  font-family: var(--site-font-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

body.hrdj-page .cs-recruiter-blurb {
  width: 100% !important;
  max-width: var(--site-container) !important;
}

body.hrdj-page .failure-panel .cs-caption {
  color: var(--site-text-muted) !important;
  font-family: var(--site-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  text-transform: none !important;
}

main > .sec[aria-labelledby="role-heading"],
main > .sec:has(.role-grid),
main > .portfolio-section--case-meta {
  background: var(--site-bg-alt) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--site-line) !important;
  padding-top: var(--site-space-5) !important;
  padding-bottom: var(--site-space-5) !important;
}

.role-grid,
.portfolio-role-grid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--site-line) !important;
  border-left: 1px solid var(--site-line) !important;
}

.role-card,
.portfolio-role-card {
  min-height: 100% !important;
  padding: var(--site-space-3) !important;
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--site-line) !important;
  border-bottom: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.role-card h2,
.portfolio-role-card h2 {
  color: var(--site-text) !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: var(--site-space-2) !important;
  text-transform: none !important;
}

body .role-card h2,
body .portfolio-role-card h2,
body.hrdj-page .portfolio-role-card h2 {
  font-family: var(--site-font-display) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.role-card p,
.portfolio-role-card p {
  color: var(--site-text-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

.section-title,
.cs-section-title,
.pf-section h2 {
  color: var(--site-text) !important;
  font-size: 2.625rem !important;
  line-height: 1.06 !important;
  margin-bottom: var(--site-space-4) !important;
}

.narrative,
.cs-narrative,
.about-bio,
.pf-section__intro {
  max-width: var(--site-measure) !important;
}

.narrative p,
.cs-narrative p,
.about-text,
.pf-section p,
.portfolio-details-list li,
.cs-caption,
.artifact-caption,
.artifact-strip figcaption,
.prototype-note,
.instrument-tag,
.metric-box,
.footer-disclosure p {
  color: var(--site-text-muted) !important;
  font-family: var(--site-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cs-caption,
.artifact-caption,
.artifact-strip figcaption,
.prototype-note,
figcaption {
  font-size: 0.875rem !important;
  color: var(--site-text-faint) !important;
}

.footer-disclosure,
.disclosure,
.cs-disclosure,
.scale-note,
.metric-box {
  display: none !important;
}

.card-grid,
.featured-grid,
.more-grid,
.domain-grid,
.failure-panel,
.micro-walkthrough,
.hrdj-proof-path,
.governance,
.pf-metrics,
.pf-portfolio {
  gap: 0 !important;
  border-top: 1px solid var(--site-line) !important;
  border-left: 1px solid var(--site-line) !important;
}

.cs-card,
.callout,
.metric,
.domain-card,
.work-card,
.more-card,
.failure-panel .portfolio-role-card,
.micro-walkthrough .cs-artifact,
.hrdj-proof-path .portfolio-role-card,
.pf-metric,
.pf-project,
.pf-portfolio-note,
.handoff,
.domain-transfer,
.bridge-node,
.decision,
.vignette,
.ba,
.tradeoff,
.process li,
.eco-grid li,
.instrument-card,
.governance-sidebar,
.metric-box {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--site-line) !important;
  border-bottom: 1px solid var(--site-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tag-list,
.tag-cloud,
.work-tags,
.pf-keywords,
.sibling-links,
.cta-row,
.hero-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.tag,
.tag-cloud span,
.work-tag,
.pf-keywords li,
.tradeoff-tag,
.instrument-embed-open,
.sibling-links a,
.cta,
.portfolio-work-tag,
.prototype-badge,
.cs-prototype-badge,
.ba-label,
.handoff-label,
.process-label,
.eco-rel {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 2rem !important;
  padding: 0.375rem 0.625rem !important;
  color: var(--site-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 0 !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.cta--primary {
  color: #0a0a0a !important;
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
}
.cta--primary:hover {
  color: var(--site-text) !important;
  background: var(--site-accent-muted) !important;
  border-color: var(--site-accent-muted) !important;
}

.prototype-label,
.cs-prototype-label {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: var(--site-space-3) !important;
}

.prototype-embed,
.embed-wrap,
.portfolio-embed,
#volatility-surface-prototype,
#signalcare-prototype,
#talent-caryatid-prototype,
#northbridge-prototype,
#incline-trust-prototype,
#clinical-benchmark-embed,
#climate-embed {
  width: min(calc(100vw - 48px), 1440px) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  background: #0d0d0d !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.prototype-embed iframe,
.embed-wrap iframe,
.portfolio-embed iframe {
  display: block !important;
  width: 100% !important;
  min-height: 760px !important;
  border: 0 !important;
}

.portfolio-full-bleed {
  width: 100% !important;
  margin: var(--site-space-4) 0 !important;
  padding: 0 !important;
}

.artifact-strip {
  display: none !important;
}

.case-exit,
main > .sec:has(.contact-band):has(.showcase-nav),
main > .portfolio-section:has(.portfolio-contact-band):has(.portfolio-showcase-nav) {
  background: var(--site-bg) !important;
  border-top: 1px solid var(--site-line) !important;
  padding-top: var(--site-space-5) !important;
  padding-bottom: var(--site-space-5) !important;
}

.contact-band,
.portfolio-contact-band {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--site-space-3) !important;
  margin-bottom: var(--site-space-5) !important;
  padding: var(--site-space-4) !important;
  background: transparent !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.contact-text,
.portfolio-contact-band p,
.pf-footer p {
  color: var(--site-text-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.contact-text a,
.portfolio-contact-band a,
.pf-footer a {
  color: var(--site-accent) !important;
}

.showcase-nav,
.portfolio-showcase-nav {
  margin-top: 0 !important;
  padding-top: var(--site-space-5) !important;
  border-top: 1px solid var(--site-line) !important;
}

.showcase-nav-kicker,
.portfolio-showcase-nav-kicker {
  color: var(--site-text-faint) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin-bottom: var(--site-space-3) !important;
  text-transform: uppercase !important;
}

.showcase-nav-grid,
.portfolio-showcase-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-bottom: var(--site-space-4) !important;
  border-top: 1px solid var(--site-line) !important;
  border-left: 1px solid var(--site-line) !important;
}

.showcase-card,
.portfolio-showcase-nav-card {
  display: block !important;
  min-height: 100% !important;
  padding: var(--site-space-3) !important;
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--site-line) !important;
  border-bottom: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.showcase-card-label,
.portfolio-showcase-nav-card-label {
  display: block !important;
  color: var(--site-text-faint) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin-bottom: var(--site-space-1) !important;
  text-transform: uppercase !important;
}

.showcase-card-title,
.portfolio-showcase-nav-card-title {
  display: block !important;
  color: var(--site-text) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--site-space-1) !important;
}

.showcase-card-desc,
.portfolio-showcase-nav-card-desc {
  display: block !important;
  color: var(--site-text-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--site-space-2) !important;
}

.showcase-card-cta,
.portfolio-showcase-nav-card-cta,
.showcase-home,
.portfolio-showcase-nav-home {
  color: var(--site-accent) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.site-footer,
.pf-footer {
  display: block !important;
  background: var(--site-bg) !important;
  border-top: 1px solid var(--site-line) !important;
  padding: var(--site-space-4) 0 !important;
}

.site-footer .wrap,
.pf-footer .pf-container {
  max-width: var(--site-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--site-page-x) !important;
}

.footer-grid,
.pf-footer .pf-container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--site-space-3) !important;
}

.footer-copy,
.footer-disclosure-label {
  color: var(--site-text-faint) !important;
  font-family: var(--site-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.footer-disclosure {
  max-width: 72ch !important;
}

.footer-disclosure p {
  color: var(--site-text-faint) !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
}

.pf-footer__links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--site-space-2) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 820px) {
  .site-header > .wrap,
  .site-header > .site-header-inner,
  .site-header > .pf-container {
    min-height: 0;
    padding-top: var(--site-space-2) !important;
    padding-bottom: var(--site-space-2) !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .site-nav {
    gap: var(--site-space-2) !important;
  }

  .hero-title,
  .portfolio-hero-title,
  .pf-header__name {
    font-size: 2.625rem !important;
    line-height: 1.05 !important;
  }

  .hero-subtitle,
  .hero-title-sub {
    font-size: 1.125rem !important;
  }

  .hero-lead,
  .hero-sub,
  .lead,
  .portfolio-lead,
  .pf-header__summary {
    font-size: 1.0625rem !important;
  }

  .section-title,
  .cs-section-title,
  .pf-section h2 {
    font-size: 2rem !important;
  }

  .recruiter,
  .cs-recruiter-blurb,
  .pf-copy-block {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: var(--site-space-3) !important;
  }

  .recruiter-label,
  .cs-recruiter-blurb__label,
  .pf-copy-block__label {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .recruiter blockquote,
  .cs-recruiter-blurb__text,
  .pf-copy-block__text {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .recruiter > .copy-btn,
  .cs-recruiter-blurb .cs-blurb-copy,
  .pf-copy-block > .pf-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .recruiter-micro,
  .cs-recruiter-blurb__note {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  .role-grid,
  .portfolio-role-grid,
  .showcase-nav-grid,
  .portfolio-showcase-nav-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-band,
  .portfolio-contact-band {
    align-items: flex-start !important;
    padding: var(--site-space-3) !important;
  }
}

/* ── Shared image lightbox (cs-lightbox.js) ────────────────────────────
   Was previously duplicated inline on hr-dj only; every other case page
   loaded neither this CSS nor the script tag, so the feature (JS lives at
   showcases/pf/cs-lightbox.js) was non-functional site-wide. Centralized
   here so any page just needs the one <script src> tag to get working
   click-to-zoom on its <figure> images. */
figure img { cursor: zoom-in; }
.cs-lb { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(13,14,19,0.94); }
.cs-lb.is-open { display: block; }
.cs-lb__stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.cs-lb__img { position: absolute; top: 50%; left: 50%; max-width: 92vw; max-height: 92vh;
  transform: translate(-50%,-50%) scale(1); transform-origin: center center;
  will-change: transform; user-select: none; -webkit-user-drag: none; }
.cs-lb__img.is-grab { cursor: grab; }
.cs-lb__img.is-grabbing { cursor: grabbing; }
.cs-lb__bar { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.cs-lb__btn { width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(22,24,31,0.92); color: #f5f7fb; font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.cs-lb__btn:hover { background: rgba(34,36,46,0.95); }
.cs-lb__btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.cs-lb__hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; color: #b2b6c2; background: rgba(22,24,31,0.92);
  padding: 6px 12px; border-radius: 999px; z-index: 2; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cs-lb__img { will-change: auto; } }