.document-detail-main { color: var(--color-ink); background: var(--color-canvas); }
.document-detail-hero { display: flex; min-height: 339px; flex-direction: column; align-items: flex-start; gap: 18px; padding: 70px var(--content-inset) 40px; }
.document-detail-breadcrumb { min-width: 0; max-width: 100%; color: var(--color-warm-grey); font-size: var(--font-size-supporting-text); line-height: 17px; letter-spacing: -.01em; }
.document-detail-breadcrumb__desktop, .document-detail-breadcrumb__mobile { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 9px; overflow-wrap: anywhere; }
.document-detail-breadcrumb__mobile { display: none; }
.document-detail-breadcrumb a, .document-detail-breadcrumb__desktop > span, .document-detail-breadcrumb__mobile > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.document-detail-breadcrumb a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms ease-out; }
.document-detail-breadcrumb a:hover, .document-detail-breadcrumb a:focus-visible { text-decoration-color: currentColor; }
.document-detail-hero__title { width: min(100%, 980px); font-family: var(--font-heading); font-size: var(--font-size-h5); font-weight: 300; line-height: 1.1363636; letter-spacing: -.01em; text-wrap: wrap; overflow-wrap: anywhere; }
.document-detail-hero__mobile, .document-detail-meta__mobile { display: none; }
.document-detail-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--color-warm-grey); }
.document-detail-meta__tag { display: inline-flex; min-width: 0; max-width: 100%; min-height: 26px; align-items: center; padding: 6px 12px; border-radius: 6px; background: #efede7; font-size: var(--font-size-caption); font-weight: 500; line-height: 14px; overflow-wrap: anywhere; }
.document-detail-meta__byline { min-width: 0; max-width: 100%; font-size: var(--font-size-supporting-text); line-height: 17px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.document-detail-meta__desktop, .document-detail-meta__mobile { min-width: 0; max-width: 100%; align-items: center; gap: 9px; overflow-wrap: anywhere; }
.document-detail-meta__desktop { display: inline-flex; flex-wrap: wrap; }

.document-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 40px; min-height: 830px; padding: 0 var(--content-inset) 110px; }
.document-detail-preview-wrap { min-width: 0; overflow: hidden; }
.document-detail-preview { display: flex; min-height: 720px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-block: 24px; overflow: hidden; border: 1px solid #dcd8d0; border-radius: 16px; background: #edebe4; }
.document-detail-preview img { flex: none; }
.document-detail-preview p { width: 100%; min-width: 0; padding-inline: 16px; color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: 500; line-height: 15px; letter-spacing: .02em; overflow-wrap: anywhere; text-align: center; }
.document-detail-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 36px; }
.document-detail-card { min-width: 0; padding: 29px 29px 27px; overflow: hidden; border: 1px solid #dcd8d0; border-radius: 18px; background: white; }
.document-detail-card__title { margin-bottom: 22px; font-family: var(--font-heading); font-size: var(--font-size-heading-10); font-weight: 300; line-height: 29px; letter-spacing: -.01em; }
.document-detail-card__list { min-width: 0; }
.document-detail-card__row { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 16px 0; border-bottom: 1px solid #dcd8d0; }
.document-detail-card__row:first-child { padding-top: 0; }
.document-detail-card__row:last-child { border-bottom: 0; }
.document-detail-card__row dt { min-width: 0; color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: 500; line-height: 14px; overflow-wrap: anywhere; }
.document-detail-card__row dd { min-width: 0; color: var(--color-ink); font-size: var(--font-size-supporting-text); line-height: 17px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.document-detail-card__desktop-actions { margin-top: 8px; }
.document-detail-download { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 12px; padding: 9px 9px 9px 24px; border-radius: 999px; background: var(--color-accent); color: #f7f5f0; font-size: var(--font-size-supporting-text); line-height: 17px; letter-spacing: -.01em; transition: transform 180ms ease-out, box-shadow 180ms ease-out; cursor: default; }
.document-detail-download > span:first-child { min-width: 0; overflow-wrap: anywhere; text-align: center; }
.document-detail-download:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(0 33 20 / 12%); }
.document-detail-download__arrow { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: #f7f5f0; }
.document-detail-save { display: flex; width: 100%; min-width: 0; min-height: 45px; align-items: center; justify-content: center; margin-top: 10px; padding: 13px 25px; border: 1px solid #dcd8d0; border-radius: 999px; background: white; color: var(--color-ink); font-size: var(--font-size-supporting-text); line-height: 17px; letter-spacing: -.01em; overflow-wrap: anywhere; text-align: center; cursor: default; }
.document-detail-mobile-actions { display: none; }
.document-detail-related { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.document-detail-related h2 { color: var(--color-warm-grey); font-size: var(--font-size-label-xs); font-weight: 500; line-height: 12px; letter-spacing: .18em; }
.document-detail-related ul { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.document-detail-related li { min-width: 0; }
.document-detail-related button { display: flex; width: 100%; min-height: 47px; min-width: 0; align-items: center; gap: 12px; padding: 14px 17px; border: 1px solid #dcd8d0; border-radius: 12px; background: white; color: var(--color-ink); font-size: var(--font-size-inline-link); line-height: 17px; letter-spacing: -.01em; text-align: left; cursor: default; }
.document-detail-related img { flex: none; }
.document-detail-related span { min-width: 0; overflow-wrap: anywhere; }

html.document-detail-motion-boot .document-detail-breadcrumb,
html.document-detail-motion-boot .document-detail-hero__title,
html.document-detail-motion-boot .document-detail-meta { opacity: 0; visibility: hidden; }
html.document-detail-motion-boot .document-detail-preview:not(.is-ready) img,
html.document-detail-motion-boot .document-detail-preview:not(.is-ready) p { opacity: 0; }
html.document-detail-motion-boot .document-detail-preview:not(.is-ready)::after { content: ""; position: absolute; width: min(45%, 250px); height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent); transform: translateX(-250%); animation: document-detail-shimmer 1s linear infinite; pointer-events: none; }
.document-detail-preview { position: relative; }
@keyframes document-detail-shimmer { to { transform: translateX(250%); } }

@media (max-width: 1366px) {
  .document-detail-hero { padding-inline: 48px; }
  .document-detail-body { padding-inline: 48px; }
}
@media (max-width: 900px) {
  .document-detail-hero { padding-inline: 36px; }
  .document-detail-hero__title { font-size: var(--font-size-heading-compact); }
  .document-detail-body { display: block; padding-inline: 36px; padding-bottom: 72px; }
  .document-detail-preview { min-height: max(360px, calc((100vw - 72px) * .8035714286)); }
  .document-detail-sidebar { margin-top: 28px; }
  .document-detail-card { max-width: 620px; }
  .document-detail-related { max-width: 620px; }
}
@media (max-width: 700px) {
  .document-detail-hero { min-height: 286px; gap: 14px; padding: 52px 24px 24px; }
  .document-detail-breadcrumb { font-size: var(--font-size-caption); line-height: 15px; }
  .document-detail-breadcrumb__desktop, .document-detail-hero__desktop, .document-detail-meta__desktop { display: none; }
  .document-detail-breadcrumb__mobile { display: flex; }
  .document-detail-hero__title { width: 100%; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
  .document-detail-hero__mobile { display: inline; }
  .document-detail-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .document-detail-meta__mobile { display: inline-flex; flex-wrap: wrap; }
  .document-detail-meta__byline { font-size: var(--font-size-caption); line-height: 19px; }
  .document-detail-preview-wrap { padding: 0 24px 28px; }
  .document-detail-preview { min-height: 260px; }
  .document-detail-body { display: block; min-height: 0; padding: 0; }
  .document-detail-sidebar { gap: 0; margin: 0; padding: 0 24px 72px; }
  .document-detail-card { max-width: none; padding: 21px 21px 19px; border-radius: 16px; }
  .document-detail-card__title, .document-detail-card__row--date, .document-detail-card__row--authors, .document-detail-card__desktop-actions, .document-detail-related { display: none; }
  .document-detail-card__row { gap: 6px; padding: 14px 0; }
  .document-detail-card__row:first-child { padding-top: 0; }
  .document-detail-card__row:last-child { padding-bottom: 14px; }
  .document-detail-card__row dt { font-size: var(--font-size-label-xs); line-height: 12px; letter-spacing: .16em; }
  .document-detail-card__row dd { line-height: 22px; letter-spacing: 0; }
  .document-detail-mobile-actions { display: block; margin-top: 14px; }
  .document-detail-mobile-actions__inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; font-size: var(--font-size-supporting-compact); font-weight: 500; line-height: 16px; letter-spacing: -.01em; }
  .document-detail-mobile-actions__inline button { min-width: 0; max-width: 100%; padding: 0; color: var(--color-ink); font: inherit; overflow-wrap: anywhere; text-align: left; cursor: default; }
  html.document-detail-motion-boot .document-detail-sidebar { opacity: 0; visibility: hidden; }
}
@media (max-width: 359px) {
  .document-detail-hero, .document-detail-preview-wrap, .document-detail-sidebar { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .document-detail-download { transition: none; }
  .document-detail-download:hover { transform: none; box-shadow: none; }
  .document-detail-preview::after { animation: none !important; }
}