/* The showcase band. Site tokens only: same accent, same rectangular buttons at
   radius 8, same type scale. Nothing here restates the site button. */

/* No space of its own on top: the section it sits in supplies the page's rhythm, the
   same one every other section uses. The space underneath is the gap before the red
   newsletter band, and it asks for that same number rather than inventing one. */
.bgwsc { padding: 0 0 var(--bgw-gap, clamp(48px, 6vw, 120px)); }
.bgwsc-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.bgwsc-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.bgwsc-eb {
	font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--accent, #9b2f2c); margin: 0 0 8px;
}
.bgwsc-h {
	font-family: 'Fraunces', Georgia, serif; font-weight: 600;
	font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; margin: 0;
	color: var(--text, #1a1714);
}
.bgwsc-flag {
	display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 5px;
	font-size: 10px; letter-spacing: .14em;
	border: 1px solid var(--accent, #9b2f2c); color: var(--accent, #9b2f2c);
}

/* Nothing else on this site puts an arrow in a box. The only 38px square controls it
   has are the reader's borderless tool buttons (.bgwr-ftool): same size, radius 9, no
   border, sitting back at .78 and taking a surface tint on hover. These are drawn the
   same way. The flex centring is the part that was missing: a glyph in a fixed box
   sits on its own baseline and lands low unless the box centres it. */
.bgwsc-ctl { display: flex; gap: 4px; }
.bgwsc-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9px;
	font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
	background: none; color: var(--text, #1a1714); opacity: .78;
	transition: opacity .2s, background .2s, color .2s;
}
.bgwsc-arrow:hover {
	opacity: 1; color: var(--accent, #9b2f2c);
	background: var(--surface, rgba(26,23,20,.05));
}
.bgwsc-arrow:focus-visible { outline: 2px solid var(--accent, #9b2f2c); outline-offset: 2px; }

/* One slide showing, the rest out of the flow entirely so nothing below jumps. */
/* The words start at the top of the picture beside them and stay there. Centring them
   made the whole left column ride up and down as one slide's screen came out taller
   than the last, so the eyebrow landed somewhere different every seven seconds. */
/* Every slide sits in the same grid cell, so the carousel is always as tall as its
   tallest slide and the newsletter below it never moves as the thing turns. The ones
   not showing are hidden rather than removed: visibility:hidden also takes their links
   out of the tab order, which display:none did too. */
.bgwsc-track { display: grid; }
.bgwsc-slide {
	grid-area: 1 / 1;
	display: grid; grid-template-columns: 1fr 1.2fr; gap: 46px; align-items: start;
	visibility: hidden; pointer-events: none;
}
.bgwsc-slide.is-on { visibility: visible; pointer-events: auto; }

.bgwsc-t {
	font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px;
	line-height: 1.16; margin: 0 0 12px; color: var(--text, #1a1714);
}
.bgwsc-b { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--text2, #4a443d); max-width: 35em; }


/* The feature run. Small, dense, and set apart from the prose so it reads as a list of
   what the thing does rather than more sentences to get through. */
.bgwsc-feat {
	list-style: none; margin: 0 0 16px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px; max-width: 35em;
}
.bgwsc-feat li {
	font-size: 11.5px; line-height: 1; padding: 6px 10px; border-radius: 6px;
	color: var(--text2, #4a443d);
	background: var(--surface, rgba(26,23,20,.05));
	border: 1px solid var(--line2, rgba(26,23,20,.10));
}
.bgwsc-feat li.is-ai {
	display: inline-flex; align-items: center;
	border-color: color-mix(in srgb, var(--accent, #9b2f2c) 32%, transparent);
	color: var(--text, #1a1714);
}
.bgwsc-feat li.is-ai .bgwu-ai { margin-left: 4px; vertical-align: 0; }

/* The picture, and the line that goes under it. */
.bgwsc-side { display: flex; flex-direction: column; align-self: stretch; }
.bgwsc-cap {
	margin: 16px 0 0; text-align: center;
	font-family: 'Fraunces', Georgia, serif; font-size: 17px; line-height: 1.3;
	color: var(--text, #1a1714);
}
/* Every picture stands in a box of the same height: the box is the TALLEST drawing
   plus its padding, so no drawing may exceed 546px. Anything a single slide gains
   above that makes all five taller, which is never that slide's call to make. The box
   is 578 and it stays there. */
.bgwsc-plate {
	background: var(--bg2, #eae4d9); border: 1px solid var(--line2, rgba(26,23,20,.14));
	border-radius: 16px; padding: 8.5px 11px; flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column; gap: 12px;
}
/* The drawing fills the box rather than floating in the middle of it. Making the plate
   taller and centring a small picture inside it just grew the border. */
.bgwsc-plate > * { flex: 1 1 auto; min-height: 0; }
.bgwsc-win { display: flex; flex-direction: column; }
.bgwsc-wb { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* The journal's own drawing, scaled up to fill the same box. Its type is authored at
   9px for a small panel on its landing page; here it has room. */
.bgwsc-plate .bgwdl-frame { display: flex; flex-direction: column; height: 100%; }
.bgwsc-plate .bgwdl-ui { flex: 1 1 auto; font-size: 12px; grid-template-columns: 156px minmax(0,1fr) 182px; }
.bgwsc-plate .bgwdl-ui-doc h4 { font-size: 20px; }
.bgwsc-plate .bgwdl-ui-photos img { height: 86px; }
.bgwsc-plate .bgwdl-chrome { padding: 11px 15px; }
.bgwsc-plate .bgwdl-url { font-size: 11.5px; }

/* the window chrome every drawn screen sits in */
.bgwsc-win {
	background: var(--bg, #f3efe7); border: 1px solid var(--line2, rgba(26,23,20,.14));
	border-radius: 12px; overflow: hidden; box-shadow: 0 16px 34px rgba(26,23,20,.09);
}
.bgwsc-winbar {
	display: flex; align-items: center; gap: 6px; padding: 9px 12px;
	border-bottom: 1px solid var(--line2, rgba(26,23,20,.14));
	background: var(--surface, rgba(26,23,20,.05));
}
.bgwsc-winbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2, rgba(26,23,20,.16)); display: block; }
/* Drawn to match the journal's own chrome (.bgwdl-chrome), so every window on the
   carousel is the same object: three dots, then the label in a soft pill. */
.bgwsc-winbar span {
	margin-left: 10px; padding: 3px 10px; border-radius: 20px;
	font-size: 10.5px; letter-spacing: .06em; text-transform: none;
	color: var(--text2, #4a443d); opacity: .78;
	background: color-mix(in srgb, currentColor 7%, transparent);
}
.bgwsc-wb { padding: 16px; }
.bgwsc-k {
	font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--text2, #4a443d);
}

/* the test report */
.bgwsc-hero { background: #423e37; color: #f6f1e7; border-radius: 16px; padding: 14px 16px; }
.bgwsc-kick { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .62; }
.bgwsc-score {
	display: flex; align-items: center; gap: 14px; margin: 10px 0 14px;
	background: rgba(246,241,231,.10); border-radius: 11px; padding: 11px 14px;
}
.bgwsc-score b {
	font-family: 'Fraunces', Georgia, serif; font-size: 32px; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bgwsc-score b i { font-style: normal; font-size: 12px; opacity: .6; margin-left: 2px; }
.bgwsc-score div { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .72; line-height: 1.55; }
.bgwsc-hero h4 {
	font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px;
	line-height: 1.2; margin: 0 0 12px; color: #f6f1e7;
}
.bgwsc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.bgwsc-pills span {
	font-size: 10px; padding: 4px 9px; border-radius: 6px;
	border: 1px solid rgba(246,241,231,.28); opacity: .85;
}

.bgwsc-map {
	display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px;
	background: var(--bg, #f7f4ec); border: 1px solid var(--line2, rgba(26,23,20,.14));
	border-radius: 12px; padding: 14px;
}
.bgwsc-mapt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bgwsc-mapt b { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-variant-numeric: tabular-nums; }
.bgwsc-mapt i {
	font-style: normal; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
	color: var(--text2, #4a443d); text-align: right;
}
.bgwsc-mapsub { font-size: 10.5px; color: var(--text2, #4a443d); margin: 2px 0 8px; }
.bgwsc-grid line { stroke: var(--line, rgba(26,23,20,.10)); }
.bgwsc-bars rect { fill: var(--muted, #cabfb0); opacity: .55; }
.bgwsc-curve { stroke: #4d2522; stroke-width: 1.6; }
.bgwsc-mark { stroke: #4d2522; stroke-width: 1.4; }
.bgwsc-you { fill: #4d2522; }
.bgwsc-ax text { fill: var(--text2, #4a443d); }
.bgwsc-bands h5 { font-family: 'Fraunces', Georgia, serif; font-size: 15px; margin: 3px 0 8px; font-weight: 600; }
.bgwsc-bands p {
	display: grid; grid-template-columns: 42px 1fr; gap: 7px; margin: 0 0 3px;
	padding: 3px 6px; border-radius: 5px; font-size: 10px;
	color: var(--text2, #4a443d); font-variant-numeric: tabular-nums;
}
.bgwsc-bands p.is-on { background: #4d2522; color: #fff; }

/* ---------- the journal, drawn as the three panes the app really has ---------- */
/* The rail has to hold a journal name and its count without eating either. At 96px it
   was truncating every name to two letters. */
.bgwsc-app { display: grid; grid-template-columns: 120px 152px 1fr; gap: 0; margin: -16px; }
.bgwsc-rail, .bgwsc-entries {
	padding: 12px 10px; border-right: 1px solid var(--line2, rgba(26,23,20,.12));
	background: var(--surface, rgba(26,23,20,.04));
}
.bgwsc-doc { padding: 12px 14px; min-width: 0; }

.bgwsc-j {
	display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px;
	font-size: 11px; color: var(--text2, #4a443d); margin-top: 4px;
}
.bgwsc-j.is-on { background: var(--bg, #f3efe7); font-weight: 600; color: var(--text, #1a1714); }
.bgwsc-j i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bgwsc-j b { font-weight: inherit; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgwsc-j u { text-decoration: none; opacity: .55; font-size: 10px; font-variant-numeric: tabular-nums; }
.bgwsc-onthis {
	margin-top: 6px; padding: 7px 8px; border-radius: 7px; background: var(--bg, #f3efe7);
	font-size: 10px; line-height: 1.45; color: var(--text2, #4a443d);
}
.bgwsc-onthis b { display: block; color: var(--accent, #9b2f2c); font-size: 11px; }

.bgwsc-it { padding: 7px 7px 8px; border-radius: 7px; margin-top: 3px; position: relative; }
.bgwsc-it.is-on { background: var(--bg, #f3efe7); }
.bgwsc-it .d { display: block; font-size: 9.5px; color: var(--text2, #4a443d); opacity: .8; }
.bgwsc-it .t {
	display: block; font-size: 11.5px; line-height: 1.3; color: var(--text, #1a1714); margin-top: 1px;
}
.bgwsc-it .l {
	display: block; height: 4px; border-radius: 3px; margin-top: 5px; width: 76%;
	background: var(--line2, rgba(26,23,20,.10));
}
.bgwsc-it .m {
	position: absolute; right: 7px; bottom: 8px; width: 14px; height: 14px; border-radius: 3px;
	background: color-mix(in srgb, var(--accent, #9b2f2c) 32%, transparent);
}

.bgwsc-bar {
	display: flex; gap: 5px; padding-bottom: 9px; margin-bottom: 9px;
	border-bottom: 1px solid var(--line2, rgba(26,23,20,.10));
}
.bgwsc-bar i {
	width: 20px; height: 20px; border-radius: 5px;
	background: var(--surface, rgba(26,23,20,.06));
	border: 1px solid var(--line2, rgba(26,23,20,.08));
}
.bgwsc-date {
	display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--text2, #4a443d); opacity: .8;
}
.bgwsc-h4 {
	margin: 3px 0 9px; font-family: 'Fraunces', Georgia, serif; font-size: 16px;
	color: var(--text, #1a1714);
}
.bgwsc-strip { display: flex; gap: 5px; margin: 11px 0 0; }
.bgwsc-strip span {
	flex: 1; height: 40px; border-radius: 5px;
	background: color-mix(in srgb, var(--accent, #9b2f2c) 22%, transparent);
}
.bgwsc-strip span:nth-child(2) { background: color-mix(in srgb, var(--accent, #9b2f2c) 40%, transparent); }
.bgwsc-strip span:nth-child(3) { background: color-mix(in srgb, var(--accent, #9b2f2c) 30%, transparent); }
.bgwsc-wave { display: flex; align-items: center; gap: 2px; margin-top: 11px; }
.bgwsc-wave i {
	width: 3px; border-radius: 2px; background: var(--accent, #9b2f2c); opacity: .55;
}
.bgwsc-wave i:nth-child(3n)   { height: 15px; }
.bgwsc-wave i:nth-child(3n+1) { height: 8px; }
.bgwsc-wave i:nth-child(3n+2) { height: 20px; }
.bgwsc-wave b {
	margin-left: 7px; font-size: 10px; font-weight: 400; color: var(--text2, #4a443d);
	font-variant-numeric: tabular-nums;
}

.bgwsc-line { height: 7px; border-radius: 4px; background: var(--surface, rgba(26,23,20,.06)); margin: 8px 0; }
.bgwsc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.bgwsc-cal span { aspect-ratio: 1; border-radius: 4px; background: var(--surface, rgba(26,23,20,.06)); }
.bgwsc-run { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin-top: 8px; }
.bgwsc-run span { aspect-ratio: 1; border-radius: 3px; background: var(--surface, rgba(26,23,20,.06)); }
.bgwsc-chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.bgwsc-chips span {
	font-size: 10.5px; padding: 3px 8px; border-radius: 20px;
	border: 1px solid var(--line2, rgba(26,23,20,.14)); color: var(--text2, #4a443d);
}
.bgwsc-q { font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin: 6px 0 16px; }
.bgwsc-typed {
	border: 1px solid var(--line2, rgba(26,23,20,.14)); border-radius: 8px;
	padding: 11px 12px; font-size: 13.5px; color: var(--text2, #4a443d);
}
.bgwsc-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.bgwsc-acard {
	border: 1px solid var(--line2, rgba(26,23,20,.14)); border-radius: 9px;
	padding: 11px 13px; background: var(--bg, #f3efe7);
}
.bgwsc-acard span { font-family: 'Fraunces', Georgia, serif; font-size: 12px; color: var(--accent, #9b2f2c); }
.bgwsc-acard p { font-family: 'Fraunces', Georgia, serif; font-size: 14.5px; margin: 2px 0 0; }

.bgwsc-trail { stroke: var(--line2, rgba(26,23,20,.22)); }
.bgwsc-done { fill: var(--accent, #9b2f2c); }
.bgwsc-todo { fill: var(--bg, #f3efe7); stroke: var(--line2, rgba(26,23,20,.3)); }
.bgwsc-flagpath { fill: var(--accent, #9b2f2c); }

.bgwsc-dots { display: flex; gap: 7px; justify-content: center; margin-top: 30px; }
.bgwsc-dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--line2, rgba(26,23,20,.2));
}
.bgwsc-dot.is-on { background: var(--accent, #9b2f2c); width: 24px; border-radius: 4px; }

@media (max-width: 860px) {
	.bgwsc-slide { grid-template-columns: 1fr; gap: 26px; }
	/* the journals rail is the first thing to go: the entries and the page matter more */
	.bgwsc-app { grid-template-columns: 130px 1fr; }
	.bgwsc-rail { display: none; }
	.bgwsc-map, .bgwsc-jrow { grid-template-columns: 1fr; }
	.bgwsc-head { align-items: flex-start; }
}


/* ---------- the practice screen ---------- */
.bgwsc-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bgwsc-phead em {
	font-style: normal; font-size: 10.5px; padding: 3px 9px; border-radius: 20px;
	border: 1px solid var(--line2, rgba(26,23,20,.14)); color: var(--text2, #4a443d); flex: none;
}
.bgwsc-psub { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--text2, #4a443d); }
.bgwsc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bgwsc-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; }
.bgwsc-steps b {
	width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
	justify-content: center; font-size: 10px; font-weight: 600;
	background: color-mix(in srgb, var(--accent, #9b2f2c) 14%, transparent);
	color: var(--accent, #9b2f2c);
}
.bgwsc-steps span { font-size: 12px; line-height: 1.5; color: var(--text, #1a1714); }
.bgwsc-ask {
	margin-top: 10px; padding: 8px 11px; border-radius: 8px;
	border-left: 3px solid var(--accent, #9b2f2c);
	background: var(--surface, rgba(26,23,20,.05));
	font-family: 'Fraunces', Georgia, serif; font-size: 13.5px; line-height: 1.4;
}
.bgwsc-hist { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.bgwsc-hrow {
	display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
	padding: 7px 9px; border-radius: 7px; background: var(--surface, rgba(26,23,20,.04));
	font-size: 11px;
}
.bgwsc-hrow time { color: var(--text2, #4a443d); opacity: .8; }
.bgwsc-hrow span { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--accent, #9b2f2c); }
.bgwsc-hrow b { font-weight: 400; color: var(--text, #1a1714); }
.bgwsc-hrow u { text-decoration: none; font-size: 10px; color: var(--text2, #4a443d); opacity: .7; }

/* ---------- the course stages ---------- */
.bgwsc-stages {
	list-style: none; margin: 12px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px;
}
.bgwsc-stages li { display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: baseline; }
.bgwsc-stages b {
	font-family: 'Fraunces', Georgia, serif; font-size: 11px; color: var(--accent, #9b2f2c);
}
.bgwsc-stages span { font-size: 11.5px; line-height: 1.4; color: var(--text, #1a1714); }
.bgwsc-stages li.is-shut span { opacity: .5; }

/* ---------- the field guide ---------- */
.bgwsc-pathrow {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 10px;
}
.bgwsc-paths { display: flex; flex-wrap: wrap; gap: 5px; }
.bgwsc-paths span {
	font-size: 10.5px; padding: 4px 9px; border-radius: 20px;
	border: 1px solid var(--line2, rgba(26,23,20,.14)); color: var(--text2, #4a443d);
}
.bgwsc-paths span.is-on {
	background: var(--dark, #423e37); border-color: var(--dark, #423e37); color: #f6f1e7;
}
.bgwsc-found { flex: none; padding-top: 4px; font-size: 11px; color: var(--text2, #4a443d); white-space: nowrap; }
.bgwsc-found b { font-family: 'Fraunces', Georgia, serif; font-size: 14px; color: var(--accent, #9b2f2c); }

@media (max-width: 860px) {
	.bgwsc-plate { min-height: 0; }
	.bgwsc-stages { grid-template-columns: 1fr; }
}


/* ---------- filling the box, per drawing ---------- */
.bgwsc-hero { flex: 0 0 auto; }
.bgwsc-map { flex: 1 1 auto; align-content: start; }
.bgwsc-map svg { height: auto; min-height: 130px; }

/* the practice and the field guide push their last block to the floor of the box */
.bgwsc-hist, .bgwsc-stack { margin-top: auto; }
.bgwsc-stack { gap: 11px; }
.bgwsc-acard { padding: 13px 15px; }
.bgwsc-acard p { font-size: 15.5px; }
.bgwsc-typed { font-size: 14px; padding: 10px 13px; }

/* the course map gets the height it was never given */
.bgwsc-doc-map svg, .bgwsc-win .bgwsc-wb > svg { height: auto; min-height: 190px; }
.bgwsc-stages { margin-top: auto; padding-top: 12px; }

/* the practice reads a size up now that it has the room */
.bgwsc-steps span { font-size: 13px; }
.bgwsc-psub { font-size: 13px; }
.bgwsc-ask { font-size: 15px; }
.bgwsc-h4 { font-size: 18px; }


/* ---------- what got added to each drawing ---------- */
.bgwsc-routes { display: flex; flex-wrap: wrap; gap: 5px; }
.bgwsc-routes span {
	font-size: 10.5px; padding: 5px 10px; border-radius: 20px;
	border: 1px solid var(--line2, rgba(26,23,20,.14)); color: var(--text2, #4a443d);
}
.bgwsc-routes span.is-on {
	background: var(--dark, #423e37); border-color: var(--dark, #423e37); color: #f6f1e7;
}
.bgwsc-foot { margin-top: auto; }
.bgwsc-plan {
	display: flex; align-items: baseline; gap: 9px; padding-bottom: 10px; margin-bottom: 10px;
	border-bottom: 1px solid var(--line2, rgba(26,23,20,.10));
}
.bgwsc-plan b { font-size: 11.5px; font-weight: 400; color: var(--text, #1a1714); }
.bgwsc-toggles { display: flex; gap: 16px; margin-top: 12px; }
.bgwsc-toggles label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text2, #4a443d); }
.bgwsc-toggles i {
	width: 24px; height: 14px; border-radius: 20px; position: relative; flex: none;
	background: var(--line2, rgba(26,23,20,.16));
}
.bgwsc-toggles i::after {
	content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
	border-radius: 50%; background: var(--bg, #f3efe7);
}
.bgwsc-toggles i.on { background: var(--accent, #9b2f2c); }
.bgwsc-toggles i.on::after { left: auto; right: 2px; }
.bgwsc-register {
	margin-top: auto; padding: 12px 14px; border-radius: 9px;
	border: 1px dashed var(--line2, rgba(26,23,20,.22));
	background: var(--surface, rgba(26,23,20,.04));
}
.bgwsc-register p {
	margin: 5px 0 9px; font-family: 'Fraunces', Georgia, serif; font-size: 13.5px;
	line-height: 1.35; color: var(--text, #1a1714);
}
.bgwsc-register em { display: block; margin-top: 9px; font-style: normal; font-size: 10.5px; color: var(--accent, #9b2f2c); }
.bgwsc-acard u {
	display: block; margin-top: 6px; text-decoration: none; font-family: 'Inter', sans-serif;
	font-size: 11px; color: var(--accent, #9b2f2c);
}
.bgwsc-typed { display: flex; align-items: center; justify-content: space-between; }
.bgwsc-typed i {
	width: 22px; height: 22px; border-radius: 6px; flex: none;
	background: color-mix(in srgb, var(--accent, #9b2f2c) 16%, transparent);
}


/* ---------- the course tracks ---------- */
.bgwsc-tracks { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; flex: 1 1 auto; }
.bgwsc-trk {
	display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: start;
	padding: 11px 13px; border-radius: 9px;
	border: 1px solid var(--line2, rgba(26,23,20,.12));
	background: var(--bg, #f3efe7);
}
.bgwsc-trk > span {
	font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: var(--accent, #9b2f2c);
}
.bgwsc-trk small {
	display: block; font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
	color: var(--text2, #4a443d); opacity: .75;
}
.bgwsc-trk b {
	display: block; margin: 2px 0 3px; font-family: 'Fraunces', Georgia, serif;
	font-size: 14.5px; font-weight: 600; color: var(--text, #1a1714);
}
.bgwsc-trk p { margin: 0 0 5px; font-size: 11.5px; line-height: 1.45; color: var(--text2, #4a443d); }
.bgwsc-trk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bgwsc-trk li {
	position: relative; padding-left: 12px; font-size: 11px; line-height: 1.45;
	color: var(--text2, #4a443d);
}
.bgwsc-trk li::before {
	content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px;
	border-radius: 50%; background: color-mix(in srgb, var(--accent, #9b2f2c) 45%, transparent);
}
.bgwsc-trk em {
	font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent, #9b2f2c); white-space: nowrap; padding-top: 3px;
}


/* ---------- the articles index, using the theme's own cards ---------- */
.bgwsc-series { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 8px; }
.bgwsc-series .bgw-jblock-head { margin: 0 0 6px; }
.bgwsc-series .bgw-jblock-titleline { align-items: baseline; }
.bgwsc-series .bgw-jblock-titleline { display: flex; align-items: baseline; gap: 10px; }
.bgwsc-series .bgw-jblock-titleline h2 {
	margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600;
	color: var(--text, #1a1714);
}
.bgwsc-series .bgw-series-count {
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent, #9b2f2c);
}
.bgwsc-series .bgw-readmore {
	display: inline-block; margin-top: 3px; font-size: 11.5px; color: var(--accent, #9b2f2c);
	text-decoration: none;
}
/* Two cards side by side, sized for the plate rather than for a full page. */
/* Three across under each series heading, the way the index runs them. */
.bgwsc-series .bgw-grid-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bgwsc-series .bgw-card { font-size: 12px; }
.bgwsc-series .bgw-card-body { padding: 5px 9px 6px; }
/* The illustration is the point of these cards, but it has to leave room for two of
   them plus the series header inside the same box as every other drawing. */
.bgwsc-series .bgw-card-thumb { display: block; height: 34px; overflow: hidden; }
.bgwsc-series .bgw-card-thumb img { height: 100%; width: 100%; object-fit: cover; display: block; }
/* Two lines of teaser. On the real page a card can run as long as it likes; in here
   the two cards have to end level with each other and inside the box. */
.bgwsc-series .bgw-card p {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin-bottom: 0;
}
.bgwsc-series .bgw-jblock-titleline h2 { font-size: 17px; }
.bgwsc-series .bgw-card-shell { padding-bottom: 0; }

.bgwsc-series .bgw-card h3 { font-size: 11.5px; line-height: 1.25; margin: 2px 0 0; }
.bgwsc-series .bgw-card p { font-size: 10.5px; line-height: 1.4; }
/* one line, so a date does not cost two */
.bgwsc-series .bgw-card .k { font-size: 8.5px; letter-spacing: .06em; white-space: nowrap; }
/* Where an article has also gone out on X, Medium or Substack, the card says so, the
   way it does on the index. Not every article has been syndicated, so the line sits at
   the bottom of the card and the cards stay level with each other whether or not they
   carry one. */
.bgwsc-series .bgw-card-shell { display: flex; flex-direction: column; }
.bgwsc-series .bgwpn-links {
	margin-top: auto; padding: 4px 9px 5px; font-size: 8.5px; gap: 3px;
	color: var(--text2, #4a443d);
}
.bgwsc-series .bgwpn-links a { font-size: 8.5px; }
/* The bookmark button belongs to a logged-in reader, not to a picture of the page. */
.bgwsc-series .bgwaf-button { display: none; }


/* The report hero sits inside the window like every other drawing now, so it keeps its
   colour but loses the outer radius it needed when it was the whole picture. */
.bgwsc-wb > .bgwsc-hero { border-radius: 12px; }
.bgwsc-wb > .bgwsc-routes { margin-bottom: 12px; }


/* Two series stacked, which is what the index actually looks like. */

.bgwsc-series .bgwsc-jblock .bgw-jblock-head { margin: 0 0 7px; }
/* The teaser goes on the page itself; three cards across a small window need the
   headline to be readable more than they need two lines of preview. */
.bgwsc-series .bgw-card p { display: none; }


.bgwsc-wb > .bgwsc-paths { margin: 8px 0 2px; }


/* Six cards in three narrow columns: a headline that runs long and a syndication line
   that names three places both wrap, and two wrapped lines on two rows is what pushed
   this slide past the others. Both are held to a fixed number of lines. */
.bgwsc-series .bgw-card h3 {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bgwsc-series .bgwpn-links {
	display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bgwsc-series .bgwpn-links span, .bgwsc-series .bgwpn-links a { display: inline; }