/* ==========================================================================
   Legal notice — printer's production sheet
   Imitates a comic-book press board: cream stock, cyan plate marks, crop
   marks, registration targets and a production form along the bottom.
   The sheet carries its own palette instead of the site background tokens,
   because the paper colour is part of the design in both appearances.
   ========================================================================== */

.print-sheet {
	/* The plate marks print in the designmatic corporate blue. The value
	   mirrors --designmaticblue in main.css, whose sRGB fallback there reads
	   as mint green, so it is restated rather than inherited. */
	--ps-corporate: rgb(110, 129, 157);

	--ps-paper: rgb(235, 230, 219);
	--ps-paper-panel: rgba(255, 255, 255, 0.42);
	--ps-mark: rgb(172, 180, 192);
	--ps-mark: color-mix(in srgb, var(--ps-corporate) 52%, var(--ps-paper));
	--ps-mark-strong: var(--ps-corporate);
	/* Body links need more weight against the paper than the marks do. */
	--ps-link: rgb(72, 84, 102);
	--ps-link: color-mix(in srgb, var(--ps-corporate) 62%, rgb(12, 14, 18));
	--ps-ink: rgb(30, 29, 27);
	--ps-ink-soft: rgb(104, 99, 92);
	--ps-accent: rgb(226, 92, 22);
	--ps-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
	--ps-display: "Helvetica Neue", -apple-system, Helvetica, sans-serif;

	/* Inset from the plate keyline to the panels, shared with the production
	   form below so both line up on the same margins. */
	--ps-plate-pad: 1.4rem;

	margin-top: 4.4rem; /* clears the fixed navbar */
	background-color: var(--ps-paper);
	color: var(--ps-ink);
	/* Keeps dismissed call-outs from widening the page as they fly off. */
	overflow: hidden;

	padding-top: 4.4rem;
	padding-bottom: 5.2rem;
	padding-left: max(2.0rem, env(safe-area-inset-left));
	padding-right: max(2.0rem, env(safe-area-inset-right));
}

@supports (color: color(display-p3 1 1 1)) {
	.print-sheet {
		--ps-corporate: color(display-p3 0.431 0.506 0.616);
	}
}

@media (prefers-color-scheme: dark) {
	.print-sheet {
		--ps-paper: rgb(22, 21, 19);
		--ps-paper-panel: rgba(255, 255, 255, 0.04);
		--ps-mark: rgb(86, 124, 158);
		--ps-mark-strong: rgb(126, 174, 214);
		--ps-link: var(--ps-mark-strong);
		--ps-ink: rgb(232, 227, 216);
		--ps-ink-soft: rgb(150, 144, 135);
		--ps-accent: rgb(233, 110, 44);
	}
}

/* --------------------------------------------------------------------------
   Board: left gutter | plate | right gutter, with slug lines above and below
   -------------------------------------------------------------------------- */

.ps-board {
	max-width: 104rem;
	margin: 0 auto;

	display: grid;
	grid-template-columns: 4.4rem minmax(0, 1fr) 4.4rem;
	column-gap: 1.0rem;
	row-gap: 1.0rem;
}

.ps-slug {
	grid-column: 1 / -1;

	display: grid;
	grid-template-columns: 4.4rem minmax(0, 1fr) 4.4rem;
	column-gap: 1.0rem;
	row-gap: 0.7rem;
	align-items: end;
}

.ps-slug--bottom {
	align-items: start;
}

/* Shared type for every printer's annotation on the board. */
.ps-mark-label {
	font-family: var(--ps-mono);
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ps-mark-strong);
	white-space: nowrap;
}

/* The company name keeps its own capitalisation, even where the surrounding
   marks and fields are set in all caps. */
.ps-brand-name,
.ps-fields dd.ps-brand-name {
	text-transform: none;
}

.ps-slug__brand {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	font-size: 1.2rem;
	letter-spacing: 0.24em;
}

.ps-slug__edge {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

/* Below the plate the order flips: dimensions first, then the marks. */
.ps-slug--bottom .ps-slug__brand,
.ps-slug--bottom .ps-slug__edge,
.ps-slug--bottom .ps-registration {
	grid-row: 2;
}

.ps-slug--bottom .ps-dimrow {
	grid-row: 1;
}

/* --------------------------------------------------------------------------
   Registration target and process ink dots
   -------------------------------------------------------------------------- */

.ps-registration {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;

	display: flex;
	align-items: center;
	gap: 1.4rem;
}

/* Process inks flanking the target, as on a press colour bar: cyan and
   magenta lead in, yellow and key follow. */
.ps-inks {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ps-inkdot {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background-color: var(--ps-inkdot);
	/* Hairline keeps the lighter inks, yellow above all, from dissolving into
	   the paper. */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-inkdot) 74%, var(--ps-ink));
}

.ps-inkdot--cyan {
	--ps-inkdot: rgb(0, 158, 224);
}

.ps-inkdot--magenta {
	--ps-inkdot: rgb(226, 0, 122);
}

.ps-inkdot--yellow {
	--ps-inkdot: rgb(254, 221, 0);
}

/* The key plate prints in the same ink as the body copy, so it inverts with
   the paper in dark appearance. */
.ps-inkdot--key {
	--ps-inkdot: var(--ps-ink);
}

@supports (color: color(display-p3 1 1 1)) {
	.ps-inkdot--cyan {
		--ps-inkdot: color(display-p3 0.078 0.616 0.878);
	}

	.ps-inkdot--magenta {
		--ps-inkdot: color(display-p3 0.855 0.0 0.478);
	}

	.ps-inkdot--yellow {
		--ps-inkdot: color(display-p3 0.976 0.867 0.0);
	}
}

.ps-target {
	display: block;
	position: relative;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid var(--ps-mark-strong);
	border-radius: 50%;
}

.ps-target::before,
.ps-target::after {
	content: '';
	position: absolute;
	background-color: var(--ps-mark-strong);
}

.ps-target::before {
	left: 50%;
	top: -0.5rem;
	bottom: -0.5rem;
	width: 1px;
}

.ps-target::after {
	top: 50%;
	left: -0.5rem;
	right: -0.5rem;
	height: 1px;
}

/* --------------------------------------------------------------------------
   Dimension lines: the label sits on its rule, both flush with the edge the
   mark names, and the one solid arrowhead points out at that edge
   -------------------------------------------------------------------------- */

.ps-dimrow {
	grid-column: 2;
	grid-row: 2;

	/* The plate keyline is the trim. The copy area begins one plate padding
	   inside it, so the marks are inset to that edge and line up with the
	   panels they annotate instead of floating over the margin. */
	padding-inline: calc(var(--ps-plate-pad) + 1px);

	display: flex;
	justify-content: space-between;
	gap: 2.4rem;
}

/* The two halves share the copy area between them, so each rule runs the full
   distance from its edge to the middle of the plate. */
.ps-dim {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	flex: 1 1 0;
}

.ps-dim--flip {
	align-items: flex-end;
}

/* Below the plate the marks read the other way up: rule first, label under it,
   so the type stays on the outside of the sheet. */
.ps-slug--bottom .ps-dim {
	flex-direction: column-reverse;
}

.ps-dim__rule {
	position: relative;
	align-self: stretch;
	height: 1px;
	background-color: var(--ps-mark);
}

/* The tip sits on the copy-area edge, directly under where the label starts,
   and points out at it. The open end runs off into the copy area. */
.ps-dim__rule::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 0.4rem solid transparent;
	border-bottom: 0.4rem solid transparent;
	border-right: 0.7rem solid var(--ps-mark-strong);
}

/* Mirrored half: label and tip move to the opposite copy-area edge. */
.ps-dim--flip .ps-dim__rule::after {
	left: auto;
	right: 0;
	border-right: 0;
	border-left: 0.7rem solid var(--ps-mark-strong);
}

/* --------------------------------------------------------------------------
   Side gutters: rotated plate annotations
   -------------------------------------------------------------------------- */

.ps-gutter {
	grid-row: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	/* No inset: the gutter is the plate's own row, so the trim labels start and
	   end flush with the keyline they name. */
	padding: 0;
}

.ps-gutter--left {
	grid-column: 1;
}

.ps-gutter--right {
	grid-column: 3;
}

.ps-gutter .ps-mark-label {
	writing-mode: vertical-rl;
}

.ps-gutter--left .ps-mark-label {
	transform: rotate(180deg);
}

.ps-copyright {
	font-size: 1.1rem;
	letter-spacing: 0.22em;
	color: var(--ps-mark-strong);
}

/* Vertical counterpart of .ps-dim, sized to fill the remaining gutter run: the
   rule runs beside its label rather than through it, tipped towards the trim
   edge it is nearest. */
.ps-vdim {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	min-height: 6rem;
}

/* The lower mark of each pair reads towards the foot of the plate instead. */
.ps-vdim--flip {
	align-items: flex-end;
}

/* Rule nearest the plate, label outside it, as on the right-hand gutter. */
.ps-gutter--left .ps-vdim {
	flex-direction: row-reverse;
}

.ps-vdim__rule {
	position: relative;
	align-self: stretch;
	width: 1px;
	background-color: var(--ps-mark);
}

.ps-vdim__rule::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 0.4rem solid transparent;
	border-right: 0.4rem solid transparent;
	border-bottom: 0.7rem solid var(--ps-mark-strong);
}

.ps-vdim--flip .ps-vdim__rule::after {
	top: auto;
	bottom: 0;
	border-bottom: 0;
	border-top: 0.7rem solid var(--ps-mark-strong);
}

/* --------------------------------------------------------------------------
   Plate: double keyline with crop marks at the corners
   -------------------------------------------------------------------------- */

.ps-plate {
	grid-column: 2;
	grid-row: 2;

	/* Gap between the plate's own keyline and the second one outside it. Named
	   so the crop marks can be placed against that outer line. */
	--ps-keyline-offset: 0.5rem;

	position: relative;
	border: 1px solid var(--ps-mark);
	outline: 1px solid var(--ps-mark);
	outline-offset: var(--ps-keyline-offset);

	padding: var(--ps-plate-pad);

	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

/* Each mark is an L that continues the outer keyline past the corner. Offsets
   are measured from the padding box, so the reach has to clear the 1px border
   as well as the keyline gap; landing short of it would cross both lines.

   The page does not reset box-sizing, so the border has to be counted inside
   the 1.4rem: on content-box the leg would sit a pixel short of the keyline. */
.ps-crop {
	--ps-crop-reach: calc(var(--ps-keyline-offset) + 1px);

	box-sizing: border-box;
	position: absolute;
	width: 1.4rem;
	height: 1.4rem;
	border: 0 solid var(--ps-mark-strong);
}

.ps-crop--tl {
	top: calc(-1.4rem - var(--ps-crop-reach));
	left: calc(-1.4rem - var(--ps-crop-reach));
	border-right-width: 1px;
	border-bottom-width: 1px;
}

.ps-crop--tr {
	top: calc(-1.4rem - var(--ps-crop-reach));
	right: calc(-1.4rem - var(--ps-crop-reach));
	border-left-width: 1px;
	border-bottom-width: 1px;
}

.ps-crop--bl {
	bottom: calc(-1.4rem - var(--ps-crop-reach));
	left: calc(-1.4rem - var(--ps-crop-reach));
	border-right-width: 1px;
	border-top-width: 1px;
}

.ps-crop--br {
	bottom: calc(-1.4rem - var(--ps-crop-reach));
	right: calc(-1.4rem - var(--ps-crop-reach));
	border-left-width: 1px;
	border-top-width: 1px;
}

/* --------------------------------------------------------------------------
   Call-out deck: title cards dealt over the notice, dismissed one by one
   Both treatments share the stack geometry and only differ in lettering:
   .ps-callouts--banner  — skewed slab with an offset accent slab behind
   .ps-callouts--sticker — outlined lettering, no slab
   -------------------------------------------------------------------------- */

.ps-callouts {
	/* Printed stickers: the deck keeps its own ink in both appearances. */
	--ps-callout-olive: rgb(66, 66, 48);
	--ps-callout-cream: rgb(240, 237, 228);
	--ps-callout-black: rgb(0, 0, 0);
	--ps-callout-height: 9.6rem;
	--ps-callout-width: 100%;
	--ps-callout-step-y: 1.5rem;
	--ps-callout-step-x: 1.2rem;
	--ps-callout-bleed: -1.5rem;
	--ps-callout-fly: 22rem;
	/* Nudged on hover; folded into the card transform so it can transition. */
	--ps-callout-lift: 0rem;

	position: absolute;
	top: 3.6rem;
	right: 3.2rem;
	z-index: 3;

	width: 30rem;
	height: calc(var(--ps-callout-height) + 6.4rem);
}

.ps-callouts.is-empty {
	display: none;
}

.ps-callout {
	--i: 0;

	position: absolute;
	top: calc(var(--i) * var(--ps-callout-step-y));
	right: calc(var(--i) * var(--ps-callout-step-x));
	z-index: calc(20 - var(--i));

	width: var(--ps-callout-width);
	height: var(--ps-callout-height);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;

	display: flex;
	align-items: center;

	transform:
		translate(var(--ps-callout-lift), var(--ps-callout-lift))
		rotate(calc((var(--i) - 1.5) * 1.3deg))
		scale(calc(1 - var(--i) * 0.018))
		skewX(var(--ps-callout-skew, 0deg));
	transform-origin: 70% 50%;
	transition:
		top 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
		right 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Only the front card is live; the rest are inert until promoted. */
.ps-callout:disabled {
	cursor: default;
}

.ps-callout:not(:disabled):hover,
.ps-callout:not(:disabled):focus-visible {
	--ps-callout-lift: -0.5rem;
}

.ps-callout:focus-visible {
	outline: 2px dashed var(--ps-accent);
	outline-offset: 0.6rem;
}

/* Flung off the sheet to the upper right. */
.ps-callout.is-out {
	pointer-events: none;
	animation: ps-callout-out 460ms cubic-bezier(0.3, 0.05, 0.4, 1) forwards;
}

@keyframes ps-callout-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform:
			translate(var(--ps-callout-fly), -6rem)
			rotate(calc((var(--i) - 1.5) * 1.3deg + 16deg))
			scale(1.05)
			skewX(var(--ps-callout-skew, 0deg));
	}
}

.ps-callouts__hint {
	position: absolute;
	right: 0.4rem;
	bottom: -1.8rem;
	margin: 0;
	color: var(--ps-mark-strong);
}

/* ---- Variant: banner ---- */

/* Accent slab peeking out from behind the banner. It lives on the button so
   it paints under the banner's own background. */
.ps-callouts--banner .ps-callout::before {
	content: '';
	position: absolute;
	inset: 0.5rem var(--ps-callout-bleed);
	background-color: var(--ps-accent);
	transform: rotate(1.8deg);
}

/* A row, so the accent sits beside the copy and can overhang the slab instead
   of pushing the lines apart. */
.ps-callouts--banner .ps-callout__text {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	padding: 1.4rem 2.0rem 1.6rem;

	font-family: var(--ps-display);
	font-size: clamp(2.0rem, 2.2vw, 2.6rem);
	font-style: italic;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ps-callout-cream);
	background-color: var(--ps-callout-black);
	transform: skewX(-9deg);
}

/* Orange accent with a black comic outline, a step up in size from the copy.
   The short line box keeps the slab from growing around it, and the relative
   offset biases the extra height upward so it only overhangs the top edge —
   the offset does not feed back into layout. */
.ps-callouts--banner .ps-callout__accent {
	flex: 0 0 auto;
	align-self: flex-start;
	position: relative;
	top: -1.95rem;
	font-size: 1.5em;
	line-height: 0.8;
	color: var(--ps-accent);
	/* Centred stroke: half of it sits under the fill, so the width is doubled
	   to read as a comic outline. */
	-webkit-text-stroke: 0.35rem rgb(0, 0, 0);
	paint-order: stroke fill;
}

/* ---- Variant: sticker ---- */

/* The label stock carries the skew and hides the cards below it, so the
   die-cut outline can sit between the stock and the lettering. */
.ps-callouts--sticker .ps-callout {
	--ps-callout-skew: -9deg;

	background-color: var(--ps-callout-cream);
	box-shadow: 0.4rem 0.5rem 0 rgba(30, 29, 27, 0.18);
}

.ps-callouts--sticker .ps-callout__text {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.6rem 1.4rem;

	font-family: var(--ps-display);
	font-size: clamp(2.4rem, 2.9vw, 3.4rem);
	font-style: italic;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ps-callout-olive);
}

/* The same string stroked in label cream and painted behind the letters, so
   the lettering keeps the chunky die-cut contour. */
.ps-callouts--sticker .ps-callout__text::before {
	content: attr(data-text);
	position: absolute;
	top: 0.6rem;
	left: 1.4rem;
	right: 1.4rem;
	z-index: -1;
	color: var(--ps-callout-cream);
	-webkit-text-stroke: 0.8rem var(--ps-callout-cream);
}

.ps-callouts--sticker .ps-callout__accent {
	color: var(--ps-accent);
}

@media (prefers-reduced-motion: reduce) {
	.ps-callout {
		transition: none;
	}

	.ps-callout.is-out {
		animation-duration: 1ms;
	}
}

/* --------------------------------------------------------------------------
   Panels inside the plate
   -------------------------------------------------------------------------- */

.ps-panel {
	position: relative;
	border: 1px solid var(--ps-mark-strong);
	background-color: var(--ps-paper-panel);

	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Caption bar bleeding into the panel edge, like a cover logo strip. */
.ps-panel__caption {
	align-self: flex-start;
	margin: 0;

	font-family: var(--ps-display);
	font-size: clamp(1.8rem, 3.4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ps-paper);
	background-color: var(--ps-accent);
	padding: 0.6rem 1.6rem 0.7rem;
}

.ps-panel__caption--blue {
	align-self: flex-end;
	background-color: var(--ps-mark-strong);
}

/* Title panel: halftone screen behind the wordmark. */
.ps-panel--title {
	justify-content: flex-end;
	gap: 3.2rem;
	padding-top: 4.0rem;
	background-image: radial-gradient(
		var(--ps-mark) 0.09rem,
		transparent 0.09rem
	);
	background-size: 0.9rem 0.9rem;
}

.ps-title-block {
	padding: 0 2.4rem;
}

.ps-title {
	margin: 0;
	font-family: var(--ps-display);
	font-size: clamp(4.2rem, 9vw, 8.4rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ps-ink);
}

.ps-subtitle {
	margin: 1.2rem 0 0;
	max-width: 46rem;
	font-size: 1.6rem;
	line-height: 1.45;
	color: var(--ps-ink-soft);
    font-weight: bold;
}

.ps-stamp {
	display: inline-block;
	margin-top: 2.0rem;
	padding: 0.5rem 1.0rem;
	border: 1px solid var(--ps-accent);
    background-color: var(--ps-paper);

	font-family: var(--ps-mono);
	font-size: 1.0rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ps-accent);
	transform: rotate(-1.5deg);
}

/* --------------------------------------------------------------------------
   Record panel: the § 5 TMG data as a spec table
   -------------------------------------------------------------------------- */

/* Padding lives on the body so the caption bar can bleed to the panel edge. */
.ps-panel__body {
	padding: 2.4rem 2.4rem 2.0rem;
}

.ps-record {
	margin: 0;
	display: grid;
	grid-template-columns: 30rem minmax(0, 1fr);
}

.ps-record dt,
.ps-record dd {
	margin: 0;
	padding: 1.2rem 0;
	border-top: 1px dashed var(--ps-mark);
}

.ps-record dt {
	font-family: var(--ps-mono);
	font-size: 1.0rem;
	font-weight: 500;
	/* Matches the value's first line box so label and value sit on one line. */
	line-height: 2.4rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ps-ink-soft);
}

.ps-record dd {
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--ps-ink);
}

.ps-record dd a {
	display: inline;
	color: var(--ps-link);
	border-bottom: 1px solid var(--ps-mark);
}

.ps-record__note {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--ps-mono);
	font-size: 1.0rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ps-accent);
}

.ps-email {
	display: inline-block;
	height: 2.5rem;
	vertical-align: -0.4rem;
}

@media (prefers-color-scheme: dark) {
	.ps-email {
		filter: invert(1);
	}
}

/* --------------------------------------------------------------------------
   Production form along the bottom of the board
   -------------------------------------------------------------------------- */

.ps-form {
	/* Sits in the plate column, inset by the plate padding plus its keyline,
	   so the fields and the approval box share the panels' margins. */
	grid-column: 2;
	padding: 0 calc(var(--ps-plate-pad) + 1px);
	margin-top: 1.2rem;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.4rem;
}

.ps-fields {
	margin: 0;
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 1.6rem;
	row-gap: 0.7rem;
	align-items: baseline;
}

.ps-fields dt,
.ps-fields dd {
	margin: 0;
}

.ps-fields dd {
	min-width: 12rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--ps-mark);

	font-family: var(--ps-mono);
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ps-ink-soft);
}

.ps-approval {
	display: grid;
	grid-template-columns: minmax(14rem, 1fr);
	border: 1px solid var(--ps-mark);
	border-bottom: 0;
}

.ps-approval__cell {
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid var(--ps-mark);
	text-align: center;
}

.ps-approval__cell--box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12.4rem;
	padding: 0.8rem;
}

/* --------------------------------------------------------------------------
   Approval stamp: the logo struck in bright pink stamp-pad ink
   -------------------------------------------------------------------------- */

.ps-stamp-mark {
	display: block;
	width: 11.0rem;
	height: 11.0rem;

	/* Struck slightly off-square, then roughened so the ink looks pressed on. */
	transform: rotate(-9deg);
	filter: url(#ps-stamp-ink);
	mix-blend-mode: multiply;
	opacity: 0.94;
}

@media (prefers-color-scheme: dark) {
	.ps-stamp-mark {
		/* Multiply would sink the pink into the dark stock. */
		mix-blend-mode: normal;
		opacity: 0.95;
	}
}

/* Filter definitions carry no layout. */
.ps-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Mobile adjustments: drop the gutters, keep the marks
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1068px) {

	/* Less room beside the wordmark, so the deck tucks in tighter. */
	.ps-callouts {
		--ps-callout-height: 8.4rem;
		top: 2.6rem;
		right: 2.4rem;
		width: 25rem;
	}
}

@media screen and (max-width: 767px) {

	.print-sheet {
		padding-top: 3.0rem;
		padding-bottom: 3.6rem;
	}

	/* Relative, not static: the cards still position against the deck. The
	   cards give up width so the stagger and bleed stay inside the plate. */
	.ps-callouts {
		--ps-callout-height: 7.6rem;
		--ps-callout-width: calc(100% - 4.6rem);
		--ps-callout-step-y: 1.1rem;
		--ps-callout-step-x: 0.9rem;
		--ps-callout-bleed: -0.9rem;
		--ps-callout-fly: 16rem;

		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: calc(var(--ps-callout-height) + 6.6rem);
	}

	.ps-callouts__hint {
		bottom: 0.2rem;
	}

	.ps-board,
	.ps-slug {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.ps-gutter {
		display: none;
	}

	.ps-slug__brand,
	.ps-slug__edge,
	.ps-registration,
	.ps-dimrow,
	.ps-plate,
	.ps-form {
		grid-column: 1;
	}

	/* Narrow slugs cannot hold the marks beside the plate name: the target gets
	   a row of its own, below the name in the top slug and below it again in
	   the bottom one, where the dimensions come first. */
	.ps-slug:not(.ps-slug--bottom) .ps-registration {
		grid-row: 2;
	}

	.ps-slug:not(.ps-slug--bottom) .ps-dimrow {
		grid-row: 3;
	}

	.ps-slug--bottom .ps-registration {
		grid-row: 3;
	}

	.ps-inks {
		gap: 0.4rem;
	}

	.ps-dimrow {
		gap: 1.2rem;
	}

	/* Set on the sheet so the production form follows the same inset. */
	.print-sheet {
		--ps-plate-pad: 1.0rem;
	}

	/* Set through the variable so the crop marks stay on the outer keyline. */
	.ps-plate {
		--ps-keyline-offset: 0.4rem;
	}

	.ps-panel--title {
		padding-top: 2.8rem;
		gap: 2.4rem;
	}

	.ps-title-block {
		padding: 0 1.4rem;
	}

	.ps-panel__body {
		padding: 1.6rem 1.4rem;
	}

	.ps-record {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-record dt {
		padding-bottom: 0.2rem;
	}

	.ps-record dd {
		padding-top: 0;
		border-top: 0;
	}

	.ps-form {
		gap: 2.0rem;
	}

	/* Keeps the desktop proportions: the box sizes to its column, it does not
	   stretch across the stacked form. */
	.ps-approval {
		width: 14rem;
		flex: 0 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Actual printing: keep the press marks on paper
   -------------------------------------------------------------------------- */

@media print {

	.print-sheet {
		margin-top: 0;
		padding: 0;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}