/* The ImagineMover Blueprint: page layout. Values come from /brand/tokens.css; component styles from
   /brand/components.css. Translated from the approved mockup (docs/blog-mockup/, 2026-10-31). */

a { color: var(--link); }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.bp-skip { position: absolute; left: -9999px; top: 0; padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--ink); }
.bp-skip:focus { left: var(--space-4); z-index: 10; }

/* Header */
.bp-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.bp-nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.bp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-grow: 1; min-height: 44px; }
.bp-brand img { width: 40px; height: 40px; }
.bp-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; }
.bp-gold { color: var(--gold-ink); }
.bp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.bp-links a:not(.im-btn), .bp-menu__panel a:not(.im-btn) { color: var(--ink); text-decoration: none; }
.bp-links a[aria-current="page"]:not(.im-btn), .bp-menu__panel a[aria-current="page"]:not(.im-btn) { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bp-menu { display: none; }
.bp-menu summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--control-border); border-radius: var(--radius-pill); color: var(--ink); cursor: pointer; }
.bp-menu summary::-webkit-details-marker { display: none; }
.bp-menu__panel { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 4px; }
.bp-menu__panel a:not(.im-btn) { display: flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; }
.bp-menu__panel .im-btn { align-self: flex-start; min-height: 44px; }

/* Footer */
.bp-footer { background: var(--navy); color: var(--on-navy); }
.bp-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: space-between; }
.bp-footer__inner > img { width: 200px; height: auto; }
.bp-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.bp-footer a { color: var(--on-navy); }
.bp-footer a:hover { color: var(--gold); }
.bp-footer a:focus-visible { outline-color: var(--gold); }
.bp-footer .bp-gold { color: var(--gold); }
.bp-disclaimer { margin: 0; max-width: 420px; font-size: 14px; line-height: 22px; color: var(--on-navy); }

/* Shared layout */
.bp-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bp-narrow { max-width: 880px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bp-stack-14, .bp-stack-16, .bp-stack-20, .bp-stack-24, .bp-stack-40, .bp-stack-56, .bp-stack-64 { display: flex; flex-direction: column; }
.bp-stack-14 { gap: 14px; } .bp-stack-16 { gap: 16px; } .bp-stack-20 { gap: 20px; } .bp-stack-24 { gap: 24px; }
.bp-stack-40 { gap: 40px; } .bp-stack-56 { gap: 56px; padding-top: 56px; padding-bottom: 64px; } .bp-stack-64 { gap: 64px; }
.bp-pad-64 { padding-top: 64px; padding-bottom: 64px; }
.bp-pad-top-56 { padding-top: 56px; } .bp-pad-top-40 { padding-top: 40px; } .bp-pad-top-32 { padding-top: 32px; }
.bp-pad-bottom-64 { padding-bottom: 64px; }
.bp-pad-56-72 { padding-top: 56px; padding-bottom: 72px; }
.bp-pad-88-72 { padding-top: 88px; padding-bottom: 72px; }
.bp-max-760 { max-width: 760px; }
.bp-m0 { margin: 0; }
.bp-grid-300, .bp-grid-260, .bp-grid-340, .bp-grid-300-16 { display: grid; }
.bp-grid-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.bp-grid-300-16 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bp-grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.bp-grid-340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.bp-card { max-width: none; }
.bp-card .im-card__title a { display: inline-block; }

/* Type */
.bp-display { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 58px; letter-spacing: -0.02em; max-width: 760px; }
.bp-display-48 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
.bp-h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; }
.bp-h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 28px; }
.bp-h-lead { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -0.015em; }
.bp-h-28 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; }
.bp-h-21 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 28px; }
.bp-h-lead a, .bp-h-28 a, .bp-h-21 a { color: var(--ink); text-decoration: none; }
.bp-h-lead a:hover, .bp-h-28 a:hover, .bp-h-21 a:hover { text-decoration: underline; }
.bp-lead { margin: 0; font-size: 19px; line-height: 31px; color: var(--ink-muted); max-width: 640px; }
.bp-dek-21 { margin: 0; font-size: 21px; line-height: 32px; color: var(--ink-muted); }
.bp-dek-17 { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.bp-dek-16 { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.bp-tags .im-tag { min-height: 32px; }

/* Home */
.bp-masthead { border-bottom: 1px solid var(--line-blueprint); }
.bp-masthead__inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.bp-lead-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); background: var(--surface-raised); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-offset); overflow: hidden; }
.bp-lead-story--project { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.bp-lead-story__media { aspect-ratio: auto; min-height: 340px; height: 100%; object-fit: cover; }
.bp-lead-story--project .bp-lead-story__media { min-height: 260px; }
.bp-lead-story__body { padding: 40px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bp-lead-story--project .bp-lead-story__body { padding: 32px; gap: 10px; }
.bp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bp-empty { padding: 32px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.bp-pager { display: flex; gap: 12px; justify-content: space-between; }
.bp-slot { padding: 28px 32px; background: var(--surface-sunken); border-radius: var(--radius-md); }

/* Project tiles */
.bp-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); }
.bp-tile:hover .bp-tile__name { text-decoration: underline; }
.bp-tile__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 26px; }
.bp-tile--big { gap: 10px; padding: 28px; }
.bp-tile--big .bp-tile__name { font-weight: 700; font-size: 24px; line-height: 30px; }
.bp-tile__summary { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.bp-tile--featured { border: 1.5px solid var(--ink); box-shadow: var(--shadow-offset); }

/* Post */
.bp-post__head { max-width: 720px; margin: 0 auto; padding: 56px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.bp-hero { max-width: 1040px; margin: 24px auto 0; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.bp-hero img { width: 100%; border-radius: var(--radius-sm); display: block; }
.bp-hero figcaption, .bp-figure figcaption { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.bp-prose { max-width: 720px; margin: 0 auto; padding: 40px 24px 0; display: flex; flex-direction: column; gap: 24px; font-size: 19px; line-height: 31px; }
.bp-prose > * { margin: 0; }
.bp-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; }
.bp-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 28px; }
.bp-prose .im-rule { margin: 16px 0; }
.bp-prose blockquote { margin: 8px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 32px; }
.bp-prose blockquote p { margin: 0; }
.bp-prose ul, .bp-prose ol { padding-left: 24px; }
.bp-prose li + li { margin-top: 8px; }
.bp-figure { margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.bp-figure img { width: 100%; border-radius: var(--radius-sm); display: block; }
.bp-sources { max-width: none; margin-top: 16px; }
.bp-sources p { margin: 0; font-size: 16px; line-height: 26px; }
.bp-sources p + p { margin-top: 12px; }
.bp-sources .im-sources__licence { margin-top: 16px; font-size: 14px; line-height: 22px; }

/* Project page */
.bp-back { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); align-self: flex-start; min-height: 24px; }
.bp-summary { margin: 0; font-size: 21px; line-height: 33px; color: var(--ink); }
.bp-watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 16px 20px; background: var(--blueprint); border-radius: var(--radius-md); }
.bp-watch__label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-ink); }
.bp-watch__text { font-size: 17px; line-height: 26px; color: var(--ink); flex: 1 1 400px; }
.bp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bp-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: 20px; }
.bp-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.bp-timeline__dot { width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--gold-ink); box-sizing: border-box; }
.bp-timeline__item--first .bp-timeline__dot { background: var(--gold-ink); }
.bp-timeline__line { flex: 1; width: 1.5px; background: var(--line); }
.bp-timeline__entry { display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 36px; }
.bp-timeline__item--first .bp-timeline__entry { padding-bottom: 8px; }
.bp-timeline__text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 6px; }
.bp-timeline__media { width: 176px; border-radius: var(--radius-sm); }

/* About, Sources */
.bp-page { max-width: 720px; margin: 0 auto; padding: 64px 24px 72px; display: flex; flex-direction: column; gap: 24px; font-size: 19px; line-height: 31px; }
.bp-page > p, .bp-page > ul, .bp-page > h2, .bp-page > h3 { margin: 0; }
.bp-page > .bp-page__lead { font-size: 21px; line-height: 33px; color: var(--ink-muted); }
.bp-page > h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; margin-top: 16px; }
.bp-page > h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 28px; margin-bottom: -20px; }
.bp-page ul { padding-left: 24px; display: flex; flex-direction: column; gap: 16px; }
.bp-page .im-rule { margin: 16px 0; }
.bp-stack-56 > .im-rule { margin: 0; }

/* 404 */
.bp-notfound { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.bp-notfound .bp-lead { max-width: 560px; }
.bp-notfound .bp-display-48 { max-width: 640px; }
.bp-notfound__sparkle { width: 56px; height: 56px; fill: var(--gold-ink); }
.bp-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }

.im-btn { min-height: 44px; box-sizing: border-box; }
.im-card__media--placeholder svg { width: 32px; height: 32px; }

/* Phones */
@media (max-width: 760px) {
  .bp-links { display: none; }
  .bp-menu { display: block; }
  .bp-menu[open] { flex-basis: 100%; order: 3; }
  .bp-nav { padding: 12px 16px; gap: 10px; }
  .bp-brand img { width: 36px; height: 36px; }
  .bp-wordmark { font-size: 17px; line-height: 22px; }
  .bp-display { font-size: 40px; line-height: 44px; }
  .bp-display-48 { font-size: 34px; line-height: 38px; }
  .bp-h-lead { font-size: 28px; line-height: 34px; }
  .bp-masthead__inner { padding: 48px 16px 40px; }
  .bp-wrap, .bp-narrow { padding-left: 16px; padding-right: 16px; }
  .bp-lead-story__body { padding: 24px; }
  .bp-lead-story__media { min-height: 220px; }
  .bp-post__head { padding: 32px 16px 16px; }
  .bp-hero { padding: 0 16px; }
  .bp-prose { padding: 32px 16px 0; font-size: 18px; line-height: 29px; }
  .bp-page { padding: 40px 16px 56px; font-size: 18px; line-height: 29px; }
  .bp-timeline__media { width: 100%; }
  .bp-footer__inner > img { width: 170px; }
  .bp-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}