/* Mockup page chrome. Nothing here leaks into .weha-sb -- the board below is
 * rendered with the shipped plugin stylesheet, untouched, so what you see is
 * what the plugin does. */

:root { --mk-ink:#191d21; --mk-gray:#63717f; --mk-line:#e8edf1; --mk-blue:#0048fe; }
* { box-sizing: border-box; }
body { margin:0; background:#f4f6f8; color:var(--mk-ink);
       font-family:Manrope, Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; }
.mk-wrap { max-width: 56rem; margin:0 auto; padding: 3rem 1.25rem 5rem; }

.mk-eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700;
              color:var(--mk-blue); margin:0 0 .5rem; }
.mk-top h1 { font-size:2rem; line-height:1.15; margin:0 0 .6rem; font-weight:800; letter-spacing:-.01em; }
.mk-lede { color:var(--mk-gray); max-width:46rem; margin:0 0 1.75rem; line-height:1.6; }

.mk-diag { background:#fff; border:1px solid var(--mk-line); border-left:3px solid #bd272c;
           border-radius:10px; padding:1.25rem 1.5rem; margin-bottom:2.5rem; }
.mk-diag h3 { margin:0 0 .6rem; font-size:1rem; font-weight:800; }
.mk-diag p { margin:0 0 .75rem; color:var(--mk-gray); line-height:1.6; font-size:.95rem; }
.mk-diag ul { margin:0 0 .75rem; padding-left:1.1rem; color:var(--mk-gray); font-size:.95rem; line-height:1.6; }
.mk-diag li { margin-bottom:.35rem; }
.mk-diag strong { color:var(--mk-ink); }
.mk-fix { margin-bottom:0 !important; }

.mk-card { background:#fff; border:1px solid var(--mk-line); border-radius:12px;
           padding:1.5rem 1.5rem 1.75rem; margin-bottom:1.75rem;
           box-shadow:0 1px 2px rgba(25,29,33,.04); }
.mk-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.45rem; }
.mk-key { flex:none; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--mk-blue);
          color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.mk-head h2 { margin:0; font-size:1.12rem; font-weight:800; letter-spacing:-.005em; }
.mk-note { margin:0 0 1.25rem; color:var(--mk-gray); font-size:.93rem; line-height:1.6; max-width:44rem; }
.mk-stage { border:1px dashed var(--mk-line); border-radius:8px; padding:1.5rem 1.5rem .5rem; background:#fff; }
.mk-stage .weha-sb { margin-bottom:1rem; }

.mk-foot { color:var(--mk-gray); font-size:.9rem; text-align:center; margin-top:2.5rem; }

/* ---- wordmark treatments ------------------------------------------------ */

/* A -- exactly what ships today: full artboard, 1.15em, nudged by eye. */
.wm-current { display:inline-block; height:1.15em; width:auto; vertical-align:-.28em; margin-left:.15em; }

/* B/C/D/E/F -- cropped artboard. The artwork's baseline sits 84.94% down the
 * box, so 15.06% of the height hangs below the text baseline. Expressing the
 * shift as a fraction of --h keeps the alignment right at any size. */
.wm-tuned, .wm-large, .wm-credit, .wm-block {
	display:inline-block; width:auto; height:var(--h);
	vertical-align:calc(var(--h) * -0.1506);
	margin-left:.28em;
}
.wm-tuned  { --h:.87em; }   /* caps match the byline's caps exactly */
.wm-large  { --h:1em; }     /* caps 15% above the byline's -- optical match */
.wm-credit { --h:1.15em; }
.wm-block  { --h:1.7em; margin-left:0; }

/* ---- credit line (options D, E, F) -------------------------------------- */

.weha-sb__credit {
	margin:1.4em 0 0;
	padding-top:.9em;
	border-top:1px solid var(--weha-gray-200);
	color:var(--weha-gray-500);
	font-size:.95rem;
}
.weha-sb__credit--right { text-align:right; }
.weha-sb__credit--block { line-height:1.2; }
.weha-sb__credit-kicker {
	display:block;
	text-transform:uppercase;
	letter-spacing:.1em;
	font-size:.7rem;
	font-weight:700;
	color:var(--weha-gray-500);
	margin-bottom:.5em;
}

/* Keeps "powered by [mark]" together on one line, set off by space
 * rather than a bullet. */
.mk-keep { white-space: nowrap; }

/* ---- proposed: credit in the section bar -------------------------------- */

.weha-sb__heading--split { flex-direction: row; gap: 1.25rem; }
.weha-sb__heading--split.align-end   { align-items: flex-end; }
.weha-sb__heading--split.align-start { align-items: flex-start; }

.weha-sb__heading-text {
	display: flex;
	flex-direction: column;
	gap: .1em;
	align-items: flex-start;
	min-width: 0;
}

.weha-sb__heading-credit {
	flex: none;
	font-size: .95rem;
	font-weight: 600;
	color: var(--weha-gray-500);
	white-space: nowrap;
	line-height: 1.2;
}
.wm-head { --h: 1em; display:inline-block; width:auto; height:var(--h);
           vertical-align: calc(var(--h) * -0.1506); margin-left:.28em; }

.mk-diag--calm { border-left-color: #0048fe; }
.mk-diag a { color:#0048fe; }