/**
 * Chestnut Memory Wall
 *
 * Typography is inherited from the theme, same decision as the risk checker.
 * A memorial page is the last place to be loading two webfonts over 4G or
 * adding a third-party font host to the privacy notice.
 *
 * The design problem here is that "post-it wall" has an obvious literal
 * reading — cork texture, neon yellow squares, a pin graphic — and that
 * reading is wrong for the content. These notes are about dead men. The
 * reference that works is not an office wall; it is the board of cards in a
 * hospital corridor, or the notes left at a bench. So: muted paper stock,
 * a barely-there tilt, translucent tape rather than drawing-pin clipart, and
 * shadows soft enough to read as paper rather than as UI cards.
 *
 * All the boldness is spent on the notes. Everything around them is quiet.
 */

.cmw {
	--cmw-ink: #33271e;
	--cmw-primary: #5a2e19;
	--cmw-board: #efe9e0;

	--cmw-paper-1: #fdf6e4;
	--cmw-paper-2: #eef1e6;
	--cmw-paper-3: #f8ece9;
	--cmw-paper-4: #e9eef1;
	--cmw-paper-5: #f6f0e8;

	--cmw-rule: color-mix( in srgb, var( --cmw-ink ) 16%, transparent );
	--cmw-quiet: color-mix( in srgb, var( --cmw-ink ) 62%, transparent );
	--cmw-tilt: 0deg;

	color: var( --cmw-ink );
	font: inherit;
	line-height: 1.55;
	text-align: left;
}

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

/* ---- shared type --------------------------------------------------- */

.cmw__heading {
	margin: 0 0 0.6rem;
	font-size: clamp( 1.5rem, 4vw, 2.1rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var( --cmw-ink );
}

.cmw__prose > *:first-child { margin-top: 0; }
.cmw__prose > *:last-child { margin-bottom: 0; }

.cmw__prose p,
.cmw__prose ul {
	margin: 0 0 0.85rem;
	max-width: 60ch;
}

.cmw__intro {
	max-width: 40rem;
	margin: 0 auto 2rem;
	text-align: center;
}

.cmw__intro .cmw__prose p {
	margin-left: auto;
	margin-right: auto;
}

/* ---- the board ------------------------------------------------------ */

/* Multi-column rather than grid, deliberately. A grid lines the notes up in
   rows, which is exactly the thing a real board does not do. Columns let the
   notes stack at their natural heights and stagger against each other. */

.cmw__board {
	margin: 0;
	padding: 1.75rem 1.25rem 1rem;
	list-style: none;
	background: var( --cmw-board );
	border-radius: 2px;

	columns: 1;
	column-gap: 1.25rem;
}

@media ( min-width: 34rem ) {
	.cmw__board {
		columns: 2;
		padding: 2.25rem 1.75rem 1.5rem;
	}
}

@media ( min-width: 56rem ) {
	.cmw__board {
		columns: 3;
		column-gap: 1.75rem;
	}
}

/* ---- a note --------------------------------------------------------- */

.cmw__note {
	break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 1.5rem;
	padding-top: 0.5rem; /* room for the tape to overhang */
}

.cmw__note-inner {
	position: relative;
	padding: 1.5rem 1.25rem 1.1rem;
	background: var( --cmw-paper-1 );
	transform: rotate( var( --cmw-tilt ) );
	transform-origin: 50% 0;

	/* Two shadows: a tight contact edge where the paper meets the board,
	   and a wider soft one for the lift. One shadow alone reads as a UI
	   card; two read as a physical object. */
	box-shadow:
		0 1px 1px color-mix( in srgb, var( --cmw-ink ) 12%, transparent ),
		0 6px 14px -6px color-mix( in srgb, var( --cmw-ink ) 28%, transparent );

	transition: transform 160ms ease, box-shadow 160ms ease;
}

.cmw__note--paper-1 .cmw__note-inner { background: var( --cmw-paper-1 ); }
.cmw__note--paper-2 .cmw__note-inner { background: var( --cmw-paper-2 ); }
.cmw__note--paper-3 .cmw__note-inner { background: var( --cmw-paper-3 ); }
.cmw__note--paper-4 .cmw__note-inner { background: var( --cmw-paper-4 ); }
.cmw__note--paper-5 .cmw__note-inner { background: var( --cmw-paper-5 ); }

/* Tape. Counter-rotated, so it looks like the tape went on straight and the
   note ended up slightly crooked underneath it — which is what happens. */
.cmw__note-inner::before {
	content: "";
	position: absolute;
	top: -0.55rem;
	left: 50%;
	width: 4.5rem;
	height: 1.1rem;
	transform: translateX( -50% ) rotate( calc( var( --cmw-tilt ) * -1 ) );
	background: color-mix( in srgb, #ffffff 55%, transparent );
	border-left: 1px solid color-mix( in srgb, var( --cmw-ink ) 8%, transparent );
	border-right: 1px solid color-mix( in srgb, var( --cmw-ink ) 8%, transparent );
	box-shadow: 0 1px 2px color-mix( in srgb, var( --cmw-ink ) 10%, transparent );
}

/* Straightening on hover or keyboard focus is not decoration — tilted text
   is measurably harder to read, so the interaction pays for itself. */
.cmw__note-inner:hover,
.cmw__note:focus-within .cmw__note-inner {
	transform: rotate( 0deg ) translateY( -2px );
	box-shadow:
		0 1px 1px color-mix( in srgb, var( --cmw-ink ) 12%, transparent ),
		0 12px 22px -8px color-mix( in srgb, var( --cmw-ink ) 32%, transparent );
}

.cmw__note-name {
	margin: 0 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid color-mix( in srgb, var( --cmw-ink ) 14%, transparent );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var( --cmw-primary );
	overflow-wrap: break-word;
}

.cmw__note-message {
	font-size: 1rem;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.cmw__note-message p {
	margin: 0 0 0.7rem;
}

.cmw__note-message p:last-child {
	margin-bottom: 0;
}

.cmw__note-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-top: 1rem;
	padding-top: 0.6rem;
	border-top: 1px solid color-mix( in srgb, var( --cmw-ink ) 10%, transparent );
}

.cmw__note-from {
	font-size: 0.9375rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

.cmw__note-date {
	font-size: 0.8125rem;
	color: var( --cmw-quiet );
}

/* Optional handwritten treatment. Off by default — see the note on the
   Appearance tab. Kept to the message only; names and dates stay legible. */
.cmw__board--hand .cmw__note-message {
	font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;
	font-size: 1.125rem;
	line-height: 1.5;
}

/* ---- board furniture ------------------------------------------------ */

.cmw__count,
.cmw__more {
	margin: 1rem 0 0;
	text-align: center;
}

.cmw__count {
	font-size: 0.875rem;
	color: var( --cmw-quiet );
}

.cmw__empty {
	margin: 0;
	padding: 3rem 1.5rem;
	background: var( --cmw-board );
	border-radius: 2px;
	text-align: center;
	font-size: 1.0625rem;
	color: var( --cmw-quiet );
}

.cmw__donate,
.cmw__removal {
	margin: 1.5rem auto 0;
	max-width: 40rem;
	text-align: center;
	font-size: 0.875rem;
	color: var( --cmw-quiet );
	line-height: 1.6;
}

.cmw__donate {
	font-size: 1rem;
	font-weight: 600;
	color: var( --cmw-primary );
}

/* ---- the form ------------------------------------------------------- */

/* The form is a blank note. That is the one place beyond the wall itself
   where the metaphor earns its keep: you are filling in the card you are
   about to pin up. It sits square rather than tilted, because form fields
   at an angle are a usability joke on a phone. */

.cmw__form-wrap,
.cmw__thanks {
	position: relative;
	max-width: 34rem;
	margin: 3rem auto 0;
	padding: 2.25rem 1.75rem 1.75rem;
	background: var( --cmw-paper-1 );
	box-shadow:
		0 1px 1px color-mix( in srgb, var( --cmw-ink ) 12%, transparent ),
		0 8px 18px -8px color-mix( in srgb, var( --cmw-ink ) 28%, transparent );
	scroll-margin-top: 2rem;
}

.cmw__form-wrap::before,
.cmw__thanks::before {
	content: "";
	position: absolute;
	top: -0.55rem;
	left: 50%;
	width: 5.5rem;
	height: 1.1rem;
	transform: translateX( -50% );
	background: color-mix( in srgb, #ffffff 55%, transparent );
	border-left: 1px solid color-mix( in srgb, var( --cmw-ink ) 8%, transparent );
	border-right: 1px solid color-mix( in srgb, var( --cmw-ink ) 8%, transparent );
	box-shadow: 0 1px 2px color-mix( in srgb, var( --cmw-ink ) 10%, transparent );
}

.cmw__form-wrap:focus,
.cmw__thanks:focus {
	outline: none;
}

@media ( max-width: 30rem ) {
	.cmw__form-wrap,
	.cmw__thanks {
		padding: 2rem 1.15rem 1.5rem;
	}
}

.cmw__field {
	margin: 0 0 1.35rem;
}

.cmw__label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.cmw__hint {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: var( --cmw-quiet );
}

.cmw__error {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #a4262c;
}

.cmw__input {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.7rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	color: var( --cmw-ink );
	background: #fff;
	border: 1px solid color-mix( in srgb, var( --cmw-ink ) 35%, transparent );
	border-radius: 2px;
}

.cmw__input:focus-visible {
	outline: 3px solid var( --cmw-primary );
	outline-offset: 1px;
	border-color: var( --cmw-primary );
}

.cmw__input[aria-invalid="true"] {
	border-color: #a4262c;
	border-width: 2px;
}

.cmw__textarea {
	resize: vertical;
	min-height: 8rem;
	line-height: 1.55;
}

.cmw__counter {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	text-align: right;
	color: var( --cmw-quiet );
}

.cmw__counter.is-close {
	color: #a4262c;
	font-weight: 600;
}

.cmw__check {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.cmw__check input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var( --cmw-primary );
}

.cmw__check input:focus-visible {
	outline: 3px solid var( --cmw-primary );
	outline-offset: 2px;
}

.cmw__submit {
	margin: 1.5rem 0 0;
}

.cmw__note-privacy {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --cmw-quiet );
}

.cmw__alert {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border-left: 3px solid #a4262c;
	background: color-mix( in srgb, #a4262c 7%, transparent );
	font-size: 0.9375rem;
	font-weight: 600;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.cmw__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- buttons -------------------------------------------------------- */

.cmw__btn {
	display: inline-block;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
}

.cmw__btn--primary {
	padding: 0.85rem 1.5rem;
	border: 1px solid var( --cmw-primary );
	background: var( --cmw-primary );
	color: #fff;
}

.cmw__btn--primary:hover,
.cmw__btn--primary:focus {
	background: color-mix( in srgb, var( --cmw-primary ) 85%, #000 );
	color: #fff;
}

.cmw__btn--quiet {
	padding: 0.7rem 0;
	border: 0;
	background: none;
	color: var( --cmw-primary );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmw__btn:focus-visible {
	outline: 3px solid var( --cmw-primary );
	outline-offset: 2px;
}

/* ---- support box ---------------------------------------------------- */

.cmw__support {
	max-width: 34rem;
	margin: 1.75rem auto 0;
	padding: 1.15rem 1.35rem;
	border: 1px solid var( --cmw-rule );
	border-left: 3px solid var( --cmw-primary );
	border-radius: 2px;
	font-size: 0.9375rem;
}

.cmw__support .cmw__prose p {
	margin-bottom: 0.7rem;
}

.cmw__support .cmw__prose p:last-child {
	margin-bottom: 0;
}

/* ---- reduced motion and print ---------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.cmw__note-inner {
		transition: none;
	}
	.cmw__note-inner:hover,
	.cmw__note:focus-within .cmw__note-inner {
		transform: rotate( var( --cmw-tilt ) );
	}
}

@media print {
	.cmw__board {
		columns: 2;
		background: none;
		padding: 0;
	}
	.cmw__note-inner {
		transform: none;
		box-shadow: none;
		border: 1px solid #999;
	}
	.cmw__note-inner::before,
	.cmw__form-wrap,
	.cmw__thanks,
	.cmw__more,
	.cmw__support {
		display: none;
	}
}

/* Forced-colours mode strips the paper tints, so the notes need a real
   border to stay separable from each other. */
@media ( forced-colors: active ) {
	.cmw__note-inner {
		border: 1px solid CanvasText;
	}
	.cmw__note-inner::before {
		display: none;
	}
}