/* Hallmark · macrostructure: Split Studio · genre: modern-minimal
 * theme: locked KeptPaw product system (docs/design/design.md)
 * nav/footer: existing WordPress theme · imagery: existing approved-source studio art
 * pre-emit critique: P5 H4 E4 S5 R5 V4 */
body.kp-art-detail .epb-content-shell > .wp-block-post-title { display: none; }
body.kp-art-detail .epb-content-shell, body.kp-art-index .epb-content-shell { padding-top: var(--space-xl); }
.kp-art-page, .kp-art-page * { box-sizing: border-box; }
.kp-art-page { max-width: var(--page-shell); margin-inline: auto; color: var(--color-ink-2); }
.kp-art-page :is(h1,h2,h3,p,figure,ul) { margin: 0; }
.kp-art-page :is(h1,h2,h3) { font-family: var(--font-display); font-style: normal; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
.kp-art-page h1 { font-size: clamp(2.75rem, 4.6vw, 4.75rem); letter-spacing: -0.045em; line-height: 1.03; }
.kp-art-page h2 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.13; }
.kp-art-page p { line-height: 1.6; }
.kp-art-page a { text-underline-offset: .22em; }
.kp-art-breadcrumb { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); font-size: var(--text-sm); }
.kp-art-breadcrumb a, .kp-art-breadcrumb span { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.kp-art-breadcrumb span { color: var(--color-muted); }
.kp-art-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(var(--space-lg), 5vw, var(--space-3xl)); align-items: start; }
.kp-art-media { min-width: 0; }
.kp-art-still { display: flex; justify-content: center; background: var(--color-paper); border-radius: var(--radius-lg); overflow: clip; }
.kp-art-still img { display: block; width: 100%; max-height: 760px; height: auto; object-fit: contain; }
.kp-art-media figcaption, .kp-art-source figcaption { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.kp-art-story { display: grid; gap: var(--space-md); padding-top: var(--space-sm); }
.kp-art-type { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.kp-art-lead { font-size: var(--text-lg); color: var(--color-ink); }
.kp-art-disclosure { color: var(--color-muted); font-size: var(--text-sm); }
.kp-art-order { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
body.epb-site .kp-art-page .kp-art-order h2 { font-size: var(--text-md); letter-spacing: -.02em; }
body.epb-site .kp-art-page .kp-art-button { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: var(--space-2xs); min-height: 48px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-base)/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur-micro), transform var(--dur-micro); }
.kp-art-page .kp-art-button:active { transform: scale(.98); }
.kp-art-page .kp-art-button:disabled { opacity: .6; cursor: wait; }
body.epb-site .kp-art-page .kp-art-secondary { background: var(--color-surface); color: var(--color-accent); }
.kp-art-page :is(a,button):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.kp-art-hint { color: var(--color-muted); font-size: var(--text-sm); }
.kp-art-viewer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-md) var(--space-sm); }
.kp-art-viewer-tools > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: var(--text-sm); }
.kp-art-media iframe { display: block; width: 100%; height: 760px; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-surface); }
.kp-art-media [hidden] { display: none !important; }
.kp-art-error { font-size: var(--text-sm); color: var(--color-error); }
.kp-art-source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); align-items: center; gap: var(--space-3xl); padding-block: var(--space-3xl); }
.kp-art-source > div { display: grid; gap: var(--space-md); max-width: 38rem; }
.kp-art-source ul { padding-left: var(--space-md); }
.kp-art-source li { margin-block: var(--space-2xs); }
.kp-art-source figure { justify-self: end; width: min(100%, 380px); }
.kp-art-source img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border-radius: var(--radius-md); }
.kp-art-text-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.kp-art-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.kp-art-section-heading > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.kp-art-section-heading > span { white-space: nowrap; color: var(--color-muted); font-size: var(--text-sm); }
.kp-art-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-lg); }
.kp-art-page .kp-art-tile { display: grid; align-content: start; gap: var(--space-2xs); color: var(--color-ink); text-decoration: none; min-width: 0; }
body.epb-site .kp-art-tile img { display: block; width: 100%; height: 340px; object-fit: contain; background: var(--color-paper); border-radius: var(--radius-md); margin-bottom: var(--space-xs); }
.kp-art-tile strong { font-size: var(--text-md); line-height: 1.25; overflow-wrap: anywhere; }
.kp-art-card-action { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2xs); color: var(--color-accent); white-space: nowrap; font-size: var(--text-sm); }
.kp-art-gallery > p { max-width: 46rem; margin-bottom: var(--space-md); }
.kp-art-collection-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block: var(--space-lg) var(--space-xl); }
.kp-art-collection-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.kp-art-collection { margin-top: var(--space-3xl); scroll-margin-top: 140px; }
.kp-art-gallery .kp-art-grid { row-gap: var(--space-xl); }
.kp-art-gallery-close { display: grid; gap: var(--space-md); margin-top: var(--space-3xl); padding-block: var(--space-xl); }
@media (hover:hover) and (pointer:fine) { body.epb-site .kp-art-page .kp-art-button:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); } .kp-art-tile:hover strong { color: var(--color-accent); } }
@media (max-width:767px) {
  .kp-art-hero, .kp-art-source { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); }
  .kp-art-story { padding-top: 0; }
  .kp-art-page h1 { font-size: clamp(2.5rem,10vw,3.5rem); }
  .kp-art-source { padding-block: var(--space-2xl); }
  .kp-art-source figure { justify-self: start; }
  .kp-art-section-heading { align-items: start; flex-direction: column; gap: var(--space-xs); }
  .kp-art-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
  body.epb-site .kp-art-tile img { height: 260px; }
  .kp-art-tile strong { font-size: var(--text-base); }
  .kp-art-tile .kp-art-type { font-size: var(--text-xs); }
  .kp-art-media iframe { height: 670px; }
  .kp-art-breadcrumb span { display: none; }
}
@media (max-width:374px) { .kp-art-grid { grid-template-columns: minmax(0,1fr); } body.epb-site .kp-art-tile img { height: auto; max-height: 440px; } }
@media (prefers-reduced-motion:reduce) { .kp-art-page .kp-art-button { transition: none; transform: none; } }