/**
 * Debt Clock Responsive.
 *
 * Layout breakpoints are MEDIA queries. Typography uses container queries.
 *
 * Note for future maintainers: the query container is `.dcr`, NOT
 * `.dcr__box`. An element cannot be restyled by a container query it
 * itself establishes, so putting the container on `.dcr__box` silently
 * killed every `.dcr__box` rule inside `@container` — which is what broke
 * the mobile stacking order in 2.0.0.
 */

@font-face {
	font-family: 'DCR Condensed';
	src: url('../fonts/HelveticaNeue-CondensedBold.woff2') format('woff2'),
		url('../fonts/HelveticaNeue-CondensedBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	/* block, not swap: digit cells are sized in `ch`, so a metric swap
	   would reflow the whole odometer mid-roll. */
	font-display: block;
}

.dcr {
	--dcr-max-width: 1280px;
	--dcr-ink: #111;
	--dcr-accent: #10294a;
	--dcr-panel: #f6f6f6;
	--dcr-counter-bg: #000;
	--dcr-counter-ink: #fff;
	--dcr-radius: 42px;
	--dcr-roll: 260ms;
	/* Mobile image crop. Larger second number = more of the baby shown. */
	--dcr-crop: 708 / 660;

	width: 100%;
	padding: 40px 20px;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: dcrwrap;
}

.dcr *,
.dcr *::before,
.dcr *::after {
	box-sizing: border-box;
}

.dcr__box {
	position: relative;
	max-width: var(--dcr-max-width);
	margin: 0 auto;
	background: #fff;
	border: 4px solid var(--dcr-ink);
	border-radius: var(--dcr-radius);
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Left column                                                         */
/* ------------------------------------------------------------------ */

.dcr__main {
	position: relative;
	z-index: 5;
	width: 66%;
	padding: 35px 0 30px 20px;
}

.dcr--no-image .dcr__main {
	width: 100%;
	padding-right: 20px;
}

.dcr__title {
	margin: 0 0 18px;
	color: #000;
	font-size: clamp(30px, 3vw, 58px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.dcr__panel {
	width:110%;
	padding: 22px 0 28px;
	background: var(--dcr-panel);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dcr__label {
	margin: 0 18px 12px 26px;
	color: var(--dcr-accent);
	font-size: clamp(16px, 1.5vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
}

.dcr__label--second {
	margin-top: 15px;
}

/* ------------------------------------------------------------------ */
/* Counter / odometer                                                  */
/* ------------------------------------------------------------------ */

.dcr__counter {
	display: block;
	padding: 8px 18px 10px;
	background: var(--dcr-counter-bg);
	color: var(--dcr-counter-ink);
}

.dcr__digits {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	font-family: 'DCR Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(28px, 5.3vw, 102px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
}

/* One character cell. Digits get a scrolling reel; symbols don't. */
.dcr__cell {
	display: block;
	flex: 0 0 auto;
	width: 1ch;
	height: 1em;
	overflow: hidden;
	text-align: center;
}

.dcr__cell--comma {
	width: 0.45ch;
}

.dcr__cell--sym {
	line-height: 1em;
}

/**
 * The reel: 0-9 plus a trailing duplicate 0 so a 9 -> 0 carry rolls
 * FORWARD (downwards) like a real odometer instead of spinning backwards.
 * After the carry lands on index 10 the JS snaps it to index 0 with the
 * transition suppressed.
 */
.dcr__reel {
	display: block;
	will-change: transform;
	transform: translateY(calc(var(--dcr-d, 0) * -1em));
	transition: transform var(--dcr-roll) cubic-bezier(0.33, 1, 0.4, 1);
}

.dcr__reel > span {
	display: block;
	height: 1em;
	line-height: 1em;
}

/* Digits turning over faster than the eye can follow are snapped rather
   than animated — transitioning them just produces jitter, and a hard
   snap at frame rate reads as the blur a real odometer gives you. */
.dcr__cell--fast .dcr__reel,
.dcr__reel.is-snapping {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.dcr__reel {
		transition: none;
	}
}

/* Abbreviated caption under a counter. */
.dcr__abbr {
	margin: 6px 18px 0 26px;
	color: var(--dcr-accent);
	font-size: clamp(13px, 1.1vw, 24px);
	font-weight: 700;
	opacity: 0.75;
	text-align: right;
}

.dcr__footer {
	margin-top: 35px;
	color: var(--dcr-accent);
	font-size: clamp(24px, 2.5vw, 62px);
	font-weight: 900;
	line-height: 1.1;
	text-align: center;
}

.dcr__copyright {
	margin-top: 25px;
	font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Figure                                                              */
/* ------------------------------------------------------------------ */

.dcr__figure {
	position: absolute;
	right: -60px;
	bottom: -5px;
	z-index: 2;
	width: 42%;
}

.dcr__imgwrap {
	display: block;
}

.dcr__img {
	display: block;
	width: 100%;
	height: auto;
}

.dcr .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Typography sized to the container, not the viewport                 */
/* ------------------------------------------------------------------ */

@container dcrwrap (min-width: 0px) {

	.dcr__title {
		font-size: clamp(24px, 4.3cqi, 58px);
	}

	.dcr__label {
		font-size: clamp(14px, 2.1cqi, 34px);
	}

	/* Sized so the widest realistic string stays inside the 66% column. */
	.dcr__digits {
		font-size: clamp(20px, 7.4cqi, 102px);
	}

	.dcr__abbr {
		font-size: clamp(12px, 1.5cqi, 24px);
	}

	.dcr__footer {
		font-size: clamp(20px, 3.7cqi, 62px);
	}
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {

	.dcr__main {
		width: 74%;
		padding: 40px 0 34px 32px;
	}

	.dcr__figure {
		width: 42%;
		right: -70px;
	}

	.dcr__panel {
		width: 95%;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — image on top, cropped to a fixed ratio                     */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {

	.dcr {
		padding: 10px 0;
	}

	.dcr__box {
		display: flex;
		flex-direction: column;
		border-radius: 26px;
	}

	.dcr__figure {
		order: -1;
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.dcr__imgwrap {
		width: 65%;
		max-width: 340px;
		margin: 0 auto;
		aspect-ratio: var(--dcr-crop);
		overflow: hidden;
	}

	.dcr__main {
		order: 0;
		width: 100%;
		padding: 0 15px 20px;
		background: #fff;
	}

	.dcr--no-image .dcr__main {
		padding: 0 15px 20px;
	}

	.dcr__title {
		margin: 0 0 14px;
		padding-top: 4px;
		font-size: clamp(22px, 7vw, 38px);
	}

	.dcr__panel {
		width: 100%;
		padding: 15px 0;
	}

	.dcr__label {
		margin: 0 12px 10px 14px;
		font-size: clamp(13px, 4vw, 22px);
	}

	.dcr__abbr {
		margin: 5px 12px 0 14px;
	}

	.dcr__counter {
		padding: 10px 12px;
	}

	.dcr__digits {
		font-size: clamp(18px, 8.4vw, 52px);
	}

	.dcr__footer {
		margin-top: 22px;
		font-size: clamp(18px, 6vw, 36px);
	}

	.dcr__copyright {
		font-size: 14px;
		text-align: center;
	}
}

/* Container-query type sizing is disabled below the mobile breakpoint so
   the vw rules above win — the container is full-bleed there anyway. */
@container dcrwrap (max-width: 768px) {

	.dcr__digits {
		font-size: clamp(18px, 8.4cqi, 52px);
	}

	.dcr__title {
		font-size: clamp(22px, 6.8cqi, 38px);
	}

	.dcr__label {
		font-size: clamp(13px, 3.8cqi, 22px);
	}

	.dcr__footer {
		font-size: clamp(18px, 5.8cqi, 36px);
	}
}

/* ------------------------------------------------------------------ */

@media print {

	.dcr__box {
		border-color: #000;
		box-shadow: none;
	}

	.dcr__counter {
		background: #000 !important;
		color: #fff !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ==================================================================== */
/* Billboard variant — the figure breaks out above the top border.      */
/*                                                                      */
/* Rebuilt from a real bordered box plus a transparent cutout, rather   */
/* than the flattened JPG mockup: the border stays a CSS border (so it  */
/* scales and matches), the page background shows through, and the      */
/* counters remain live text rather than pixels.                        */
/*                                                                      */
/* How the pop-out works: the figure is absolutely positioned with BOTH */
/* top and bottom set, so its height is (100% + rise) of the box and it */
/* is anchored to the bottom edge. Percentage top/bottom resolve        */
/* against the containing block's height, so the overhang stays         */
/* proportional however tall the box grows. Width comes from            */
/* aspect-ratio, so the cutout is never distorted.                      */
/* ==================================================================== */

.dcr--billboard {
	/* How far the head rises above the top border, as a share of box
	   height. The client's mockup is ~11%. */
	--dcr-rise: 11%;
	/* Flush to the border. The cutout is trimmed to its opaque bounding
	   box, so 0 really is 0 — no invisible padding to fake a gap. */
	--dcr-fig-right: 0px;
	--dcr-fig-ratio: 633 / 1208;
	--dcr-crop: 633 / 780;
}

@media (min-width: 769px) {

	/* The box must stop clipping or there is nothing to break out of.
	   The border still paints; only the clip is lifted. */
	.dcr--billboard .dcr__box {
		overflow: visible;
	}

	.dcr--billboard .dcr__figure {
		top: calc(-1 * var(--dcr-rise));
		right: var(--dcr-fig-right);
		bottom: 0;
		left: auto;
		width: auto;
		aspect-ratio: var(--dcr-fig-ratio);
		/* Above the box border, so the baby occludes the frame the way a
		   billboard cut-out does. */
		z-index: 6;
	}

	.dcr--billboard .dcr__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
	}

	/* Give the head somewhere to go, so it can't collide with whatever
	   sits above the clock. */
	.dcr--billboard {
		padding-top: 90px;
	}

	/* Slightly narrower text column: the cutout is wider than the inset
	   version and sits further into the box. */
	.dcr--billboard .dcr__main {
		width: 62%;
	}
}

/* Fallback for browsers without aspect-ratio: fixed width, no distortion
   (object-fit still preserves the cutout's proportions). */
@supports not (aspect-ratio: 1) {

	@media (min-width: 769px) {

		.dcr--billboard .dcr__figure {
			width: 32%;
		}
	}
}

/* Mobile keeps the stacked layout — a head breaking out of a full-bleed
   card has nothing to break out of, and would collide with the heading. */
@media (max-width: 768px) {

	.dcr--billboard {
		padding-top: 10px;
	}

	.dcr--billboard .dcr__figure {
		top: auto;
		aspect-ratio: auto;
	}
}