/* PW-08: MediaKit detail pair only. No global styles or product controls. */
.mk-page { --mk-muted: #425d6c; --mk-line: #b1c6d2; color: var(--deep-blue); font-size: 1rem; }
.mk-page [id] { scroll-margin-top: 24px; }
.mk-page h1,
.mk-page h2,
.mk-page h3 { font-family: 'Montserrat', sans-serif; overflow-wrap: anywhere; hyphens: manual; }
.mk-page h1 { margin: 0 0 24px; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.mk-page h2 { max-width: 32ch; margin: 0 0 24px; font-size: clamp(1.75rem, 2.3vw, 2rem); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.mk-page h3 { margin: 0 0 12px; font-size: 1.1875rem; font-weight: 600; line-height: 1.45; }
.mk-page p { max-width: 72ch; margin: 0 0 16px; line-height: 1.75; }
.mk-page p:last-child { margin-bottom: 0; }
.mk-page a { overflow-wrap: anywhere; }
.mk-page a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.mk-page .mk-kicker { margin-bottom: 16px; color: var(--mk-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mk-hero { padding: 64px 0 0; }
.mk-hero-grid,
.mk-use-grid,
.mk-update-grid,
.mk-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: center; }
.mk-use-grid > .mk-intro,
.mk-access-grid > .mk-intro { grid-column: 2; grid-row: 1; }
.mk-use-grid > .mk-figure,
.mk-access-grid > .mk-figure { grid-column: 1; grid-row: 1; justify-self: start; }
.mk-page .mk-lead { max-width: 68ch; margin: 0; font-size: 1.125rem; }
.mk-page .mk-definition { margin: 20px 0 0; color: var(--mk-muted); }
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.mk-primary { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 28px; background: var(--action-orange); color: var(--deep-blue); font-weight: 700; line-height: 1.5; text-decoration: none; }
.mk-primary:hover { background: #FF7A2F; }
.mk-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; color: inherit; font-weight: 600; line-height: 1.5; text-underline-offset: 4px; }
.mk-link:hover { text-decoration-thickness: 2px; }
.mk-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--mk-line); }
.mk-nav a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; color: inherit; font-weight: 600; line-height: 1.5; text-decoration: none; }
.mk-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mk-chapter { padding: 80px 0; }
.mk-related,
.mk-next { padding: 64px 0; }
.mk-chapter .mk-kicker { margin-bottom: 12px; font-size: .875rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.mk-hero-grid > *,
.mk-use-grid > *,
.mk-update-grid > *,
.mk-access-grid > *,
.mk-related-grid > * { min-width: 0; }
.mk-figure { width: 100%; max-width: 600px; margin: 0; justify-self: end; }
.mk-figure img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mk-figure figcaption { margin-top: 12px; color: var(--mk-muted); font-size: .8125rem; line-height: 1.6; }
.mk-use { background: var(--ice-blue); }
.mk-steps { display: grid; gap: 16px; margin: 24px 0 0; padding-left: 24px; }
.mk-steps h3 { margin-bottom: 4px; font-size: 1.0625rem; }
.mk-steps li { padding-left: 12px; }
.mk-steps li::marker { color: var(--mk-muted); font-weight: 600; }
.mk-example { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mk-line); }
.mk-page .mk-example-label { margin-bottom: 12px; font-size: .8125rem; font-weight: 600; color: var(--mk-muted); }
.mk-page .mk-note { margin-top: 24px; color: var(--mk-muted); font-size: .875rem; }
.mk-access { --mk-muted: #c9dce6; --mk-line: #657e8e; background: var(--deep-blue); color: var(--white); }
.mk-options { margin: 32px 0 0; }
.mk-options > div + div { margin-top: 24px; }
.mk-options dt { margin-bottom: 8px; font-weight: 700; line-height: 1.5; }
.mk-options dd { margin: 0; line-height: 1.75; }
.mk-rights { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--mk-line); }
.mk-page .mk-rights p { max-width: 88ch; color: var(--mk-muted); }
.mk-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.mk-next { background: var(--ice-blue); }
@media (max-width: 1024px) {
  .mk-hero-grid,
  .mk-use-grid,
  .mk-update-grid,
  .mk-access-grid { column-gap: 32px; }
}
@media (max-width: 800px) {
  .mk-hero { padding-top: 48px; }
  .mk-chapter,
  .mk-related,
  .mk-next { padding: 48px 0; }
  .mk-hero-grid,
  .mk-use-grid,
  .mk-update-grid,
  .mk-access-grid,
  .mk-related-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mk-use-grid > .mk-intro,
  .mk-access-grid > .mk-intro,
  .mk-use-grid > .mk-figure,
  .mk-access-grid > .mk-figure { grid-column: auto; grid-row: auto; }
  .mk-figure,
  .mk-use-grid > .mk-figure,
  .mk-access-grid > .mk-figure { justify-self: center; }
  .mk-nav { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 32px; }
}
@media (max-width: 480px) {
  .mk-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Media-led compositions: the same three selected files, with live text. */
.mk-art { container-type: inline-size; padding: 5%; background: var(--ice-blue); color: var(--deep-blue); border-radius: 7px; }
.mk-art-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: clamp(.75rem, 2.6cqw, 1rem); font-weight: 600; line-height: 1.4; }
.mk-art-count { flex: none; border: 1px solid #adc2cf; border-radius: 99px; padding: 3px 9px; font-size: clamp(.6875rem, 2cqw, .8125rem); font-weight: 400; }
.mk-art-media { margin: 24px 0 20px; }
.mk-art-card { position: relative; min-width: 0; border-radius: 4px; background: var(--white); color: var(--deep-blue); }
.mk-art-format { font-size: clamp(.625rem, 1.8cqw, .8125rem); font-weight: 600; line-height: 1.3; }
.mk-art-name { display: block; padding: 8px 10px; font-size: clamp(.6875rem, 2cqw, .875rem); font-weight: 600; line-height: 1.35; background: var(--white); border-radius: 0 0 4px 4px; }
.mk-art-play { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(30px, 9cqw, 52px); height: clamp(30px, 9cqw, 52px); padding-left: .13em; border: 1px solid #ffffffb3; border-radius: 50%; background: var(--deep-blue); color: var(--white); font-size: clamp(14px, 3cqw, 22px); }
.mk-art-link { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--deep-blue); color: var(--white); border-radius: 5px; }
.mk-art-link-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--deep-blue); background: var(--signal-lime, #b7ff3c); font-size: 24px; }
.mk-art-link strong { display: block; font-size: clamp(.75rem, 2.3cqw, .9375rem); font-weight: 600; line-height: 1.4; }
.mk-art-link div > span { display: block; margin-top: 4px; color: #c8dce8; font-size: clamp(.625rem, 1.8cqw, .75rem); line-height: 1.5; }
.mk-art-paper-copy { min-width: 0; }
.mk-art-paper-kicker { display: block; font-size: clamp(.5rem, 1.3cqw, .625rem); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.mk-art-paper strong { display: block; font-family: 'Montserrat', sans-serif; font-size: clamp(.75rem, 2.4cqw, 1rem); font-weight: 500; line-height: 1.3; margin: 5px 0 10px; overflow-wrap: anywhere; }
.mk-art .mk-art-paper p { font-size: clamp(.5625rem, 1.5cqw, .75rem); line-height: 1.55; margin: 0; }
/* Recipient collection: every card has a real content row and a separate filename row. */
.mk-art--collection .mk-art-media { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; align-items: stretch; }
.mk-art--collection .mk-art-product { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.mk-art--collection .mk-art-product > img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; background: #efe7db; border-radius: 4px 4px 0 0; flex: 1; min-height: 0; }
.mk-art--collection .mk-art-product > .mk-art-format,
.mk-art--collection .mk-art-video > .mk-art-format { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 3px 5px; background: var(--white); border-radius: 3px; }
.mk-art--collection .mk-art-video { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: end; }
.mk-art--collection .mk-art-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 69% center; border-radius: 4px; }
.mk-art--collection .mk-art-video > .mk-art-name { position: relative; width: 100%; }
.mk-art--collection .mk-art-pdf { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; }
.mk-art--collection .mk-art-pdf > .mk-art-format { padding: 8px 10px 0; }
.mk-art--collection .mk-art-paper { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; align-items: center; padding: 10px; flex: 1; }
.mk-art--collection .mk-art-paper > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #efe7db; border-radius: 2px; }
/* Intro fan: same files, overlapping only where they do not hide the file identities. */
.mk-art--fan .mk-art-media { position: relative; height: 52cqw; margin: 18cqw 0 9cqw; }
.mk-art--fan .mk-art-card { position: absolute; width: 40%; height: 100%; border: 3px solid var(--white); display: flex; flex-direction: column; box-shadow: 0 8px 18px #03213d1f; }
.mk-art--fan .mk-art-card > .mk-art-format { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 5px; background: var(--white); border-radius: 3px; }
.mk-art--fan .mk-art-card > img { height: 0; flex: 1; min-height: 0; object-fit: cover; border-radius: 2px 2px 0 0; }
.mk-art--fan .mk-art-product { left: 0; transform: rotate(-10deg); transform-origin: bottom right; z-index: 1; }
.mk-art--fan .mk-art-product > img { object-fit: contain; background: #efe7db; }
.mk-art--fan .mk-art-video { left: 30%; transform: rotate(2deg) translateY(-8%); z-index: 3; }
.mk-art--fan .mk-art-video > img { object-position: 68% center; }
.mk-art--fan .mk-art-pdf { right: 0; transform: rotate(12deg); z-index: 2; }
.mk-art--fan .mk-art-pdf > .mk-art-format { left: auto; right: 8px; }
.mk-art--fan .mk-art-paper { min-height: 0; flex: 1; padding: 17% 7% 4% 23%; display: flex; flex-direction: column; text-align: right; }
.mk-art--fan .mk-art-paper > img { min-height: 0; flex: 1; height: 0; margin-top: 6px; object-fit: contain; background: #efe7db; border-radius: 2px; }
.mk-art--fan .mk-art-paper strong { margin-bottom: 4px; }
.mk-art--fan .mk-art-paper p { display: none; }
.mk-art--fan .mk-art-pdf > .mk-art-name { text-align: right; }
@container (max-width: 380px) {
  .mk-art--collection .mk-art-media { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mk-art--collection .mk-art-video { grid-row: 1; }
  .mk-art--collection .mk-art-product > img { aspect-ratio: 1; }
  .mk-art--collection .mk-art-pdf { grid-column: 1 / -1; }
  .mk-art--collection .mk-art-paper { grid-template-columns: 1.5fr 1fr; padding-top: 6px; }
  .mk-art--collection .mk-art-paper > img { max-height: 100px; }
  .mk-art--collection .mk-art-paper strong { font-size: 1rem; }
  .mk-art--collection .mk-art-paper-kicker { font-size: .625rem; }
  .mk-art--collection .mk-art-paper p { font-size: .6875rem; }
  .mk-art--collection .mk-art-pdf > .mk-art-name { padding-top: 3px; }
  .mk-art-link { padding: 12px; gap: 8px; }
  .mk-art-link-icon { width: 30px; height: 30px; font-size: 20px; }
  .mk-art--fan .mk-art-name { padding: 6px; font-size: .625rem; }
}