/*
Theme Name: Carnet de Bord
Theme URI: https://noirmat.studio
Author: NOIRMAT
Author URI: https://noirmat.studio
Description: Carnet de voyage en papier collé : fiches pastel, ruban adhésif, photos façon polaroïd et titres manuscrits. Un article par jour, regroupé par voyage, pensé pour être lu confortablement sur mobile.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: carnet-de-bord
*/

/* ---------- Fonts (self-hosted: no third party call on the visitor side) ---------- */
@font-face {
	font-family: 'Caveat';
	src: url('fonts/caveat-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Caveat';
	src: url('fonts/caveat-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Patrick Hand';
	src: url('fonts/patrick-hand-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Patrick Hand';
	src: url('fonts/patrick-hand-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variables ---------- */
:root {
	--cdb-paper: #f2ece0;
	--cdb-card: #fdfaf3;
	--cdb-ink: #3f4a3c;
	--cdb-ink-soft: #7f7c6d;
	--cdb-accent: #74855c;
	--cdb-stitch: #cabfa7;
	--cdb-tape: rgba(211, 194, 158, 0.55);
	--cdb-marker: #e6dcc0;
	--cdb-radius: 3px;

	--cdb-font-script: 'Caveat', 'Bradley Hand', cursive;
	--cdb-font-hand: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;
	--cdb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Textures, drawn by the browser rather than downloaded. Each is
	   desaturated so it adds grain without tinting what sits under it. */
	--cdb-grain-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
	--cdb-grain-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.26'/%3E%3C/svg%3E");
	/* Faint on purpose: this one is laid over photos at full strength, with
	   the photo corners, so its opacity is baked in rather than applied to
	   the whole layer. */
	--cdb-grain-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.14'/%3E%3C/svg%3E");
	/* Slightly stretched noise reads as paper fibre. Kept short and faint:
	   drawn out any further it turns into visible horizontal banding. */
	--cdb-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E");
}

/* Each voyage card picks its own pastel, like a different sheet of paper. */
.cdb-voyage:nth-of-type(6n + 1) { --cdb-note: #dfe6d2; }
.cdb-voyage:nth-of-type(6n + 2) { --cdb-note: #f3dee0; }
.cdb-voyage:nth-of-type(6n + 3) { --cdb-note: #f8eed0; }
.cdb-voyage:nth-of-type(6n + 4) { --cdb-note: #e4dded; }
.cdb-voyage:nth-of-type(6n + 5) { --cdb-note: #dceae2; }
.cdb-voyage:nth-of-type(6n)     { --cdb-note: #dce5ec; }

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;
	margin: 0;
	color: var(--cdb-ink);
	font-family: var(--cdb-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;

	background-color: var(--cdb-paper);
	background-image:
		radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.5), transparent 55%),
		radial-gradient(circle at 85% 85%, rgba(184, 164, 128, 0.26), transparent 60%),
		var(--cdb-fiber),
		var(--cdb-grain-page);
	/* Deliberately not `fixed`: a fixed background forces the whole page
	   background to be repainted on every scroll frame, and with noise
	   textures on top of it Safari drops frames badly. */
	background-attachment: scroll;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cdb-accent);
	text-decoration: none;
}

a:hover {
	color: var(--cdb-ink);
}

.cdb-wrap {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Tape ----------
   Several rolls, used in turn, so no two pieces sit quite alike. */
.cdb-tape::before {
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	width: 116px;
	height: 27px;
	transform: translateX(-50%) rotate(-2.4deg);
	background-color: var(--cdb-tape);
	background-image: var(--cdb-grain-card);
	box-shadow: 0 1px 3px rgba(70, 58, 38, 0.09);
	z-index: 2;
}

/* kraft, off to the left */
.cdb-tape:nth-of-type(4n + 2)::before {
	left: 16%;
	top: -15px;
	width: 104px;
	transform: rotate(-11deg);
}

/* green gingham, to the right */
.cdb-tape:nth-of-type(4n + 3)::before {
	left: auto;
	right: 12%;
	top: -14px;
	width: 108px;
	transform: rotate(8deg);
	background-color: rgba(176, 197, 155, 0.62);
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 6px, transparent 6px 12px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 6px, transparent 6px 12px);
}

/* candy stripes, centred but tilted the other way */
.cdb-tape:nth-of-type(4n)::before {
	width: 122px;
	transform: translateX(-50%) rotate(3.5deg);
	background-color: rgba(226, 190, 190, 0.6);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.55) 0 5px,
		transparent 5px 10px
	);
}

/* ---------- Spiral binding ----------
   Article sheets are torn from a notebook rather than taped down. */
.cdb-spiral {
	padding-top: 46px;
}

.cdb-spiral::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 26px;
	right: 26px;
	height: 16px;
	background-image: radial-gradient(
		ellipse 6px 7px at 10px 8px,
		rgba(74, 62, 44, 0.42) 0 99%,
		transparent 99%
	);
	background-size: 38px 16px;
	z-index: 2;
}

/* the wire loops, sitting over each hole */
.cdb-spiral::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 26px;
	right: 26px;
	height: 18px;
	background-image: linear-gradient(
		to right,
		transparent 4px,
		rgba(150, 138, 118, 0.85) 4px 16px,
		transparent 16px
	);
	background-size: 38px 18px;
	border-radius: 2px;
	z-index: 3;
}

/* ---------- Marginalia ----------
   Behind the content (z-index -1) and out in the margins, so a doodle can
   never sit on a word. Hidden as soon as the margins get too narrow. */
.cdb-doodles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.cdb-doodle {
	position: absolute;
	stroke: var(--cdb-stitch);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.6;
}

.cdb-doodle-solid {
	fill: var(--cdb-stitch);
	stroke: none;
}

.cdb-doodle-trail {
	stroke-width: 1.4;
}

/* Spread down the page, alternating sides. Offsets are measured from the
   middle so the marks follow the column instead of the window edges. */
.cdb-doodle--heart-a {
	top: 7%;
	left: calc(50% + 374px);
	width: 26px;
	height: 26px;
	transform: rotate(-10deg);
}

.cdb-doodle--sprig {
	top: 15%;
	left: calc(50% - 432px);
	width: 40px;
	height: 90px;
	transform: rotate(5deg);
}

.cdb-doodle--swirl {
	top: 28%;
	left: calc(50% + 356px);
	width: 120px;
	height: 60px;
}

.cdb-doodle--spark {
	top: 38%;
	left: calc(50% - 402px);
	width: 34px;
	height: 34px;
}

.cdb-doodle--camera {
	top: 47%;
	left: calc(50% + 366px);
	width: 48px;
	height: 38px;
	transform: rotate(-7deg);
}

.cdb-doodle--heart-b {
	top: 58%;
	left: calc(50% - 394px);
	width: 20px;
	height: 20px;
	transform: rotate(14deg);
}

.cdb-doodle--plane-2 {
	top: 68%;
	left: calc(50% + 350px);
	width: 140px;
	height: 70px;
}

.cdb-doodle--dots {
	top: 79%;
	left: calc(50% - 414px);
	width: 60px;
	height: 60px;
}

.cdb-doodle--suitcase {
	top: 88%;
	left: calc(50% + 368px);
	width: 44px;
	height: 40px;
	transform: rotate(6deg);
}

/* ---------- Header ---------- */
.cdb-header {
	position: relative;
	padding: 64px 0 36px;
	text-align: center;
}

/* A little flight drawn in the margin, as in a school notebook. */
.cdb-plane {
	position: absolute;
	top: 26px;
	left: -8px;
	width: 160px;
	height: 72px;
	pointer-events: none;
}

.cdb-plane-trail {
	stroke: var(--cdb-stitch);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.cdb-plane-body {
	fill: var(--cdb-ink-soft);
	opacity: 0.75;
}

.cdb-site-title {
	margin: 0;
	font-family: var(--cdb-font-script);
	font-size: 58px;
	font-weight: 700;
	line-height: 1.05;
}

.cdb-site-title a {
	color: var(--cdb-ink);
	background: linear-gradient(180deg, transparent 14%, var(--cdb-marker) 14%, var(--cdb-marker) 78%, transparent 78%);
	padding: 0 20px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.cdb-site-tagline {
	margin: 14px 0 0;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 20px;
	letter-spacing: 0.02em;
}

/* ---------- Menu of voyages ---------- */
.cdb-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px dashed var(--cdb-stitch);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
}

.cdb-nav a {
	color: var(--cdb-ink-soft);
	padding: 1px 8px;
}

.cdb-nav a:hover {
	color: var(--cdb-ink);
}

.cdb-nav a.is-current {
	color: var(--cdb-ink);
	background: linear-gradient(180deg, transparent 16%, var(--cdb-marker) 16%, var(--cdb-marker) 84%, transparent 84%);
}

/* ---------- Voyage list (home) ---------- */
.cdb-voyages {
	display: grid;
	gap: 62px;
	margin: 16px 0 72px;
}

.cdb-voyage {
	position: relative;
	background-color: var(--cdb-note, var(--cdb-card));
	background-image: var(--cdb-grain-card);
	padding: 34px 30px 30px;
	border-radius: var(--cdb-radius);
	box-shadow:
		0 10px 26px rgba(70, 58, 38, 0.13),
		inset 0 0 44px rgba(96, 78, 50, 0.07);
}

/* Postmark, struck in the empty lower corner of the note. It used to sit at
   the top, where the kraft corner of the photo ran straight through it. */
.cdb-stamp {
	position: absolute;
	right: 14px;
	bottom: 16px;
	width: 76px;
	height: 76px;
	transform: rotate(13deg);
	opacity: 0.5;
	z-index: 3;
	pointer-events: none;
}

/* Each voyage gets its own ink, so a run of them reads like a passport. */
.cdb-stamp {
	color: #a9553f;
}

.cdb-stamp--1 {
	color: #46697c;
}

.cdb-stamp--2 {
	color: #6a7a44;
}

.cdb-stamp circle,
.cdb-stamp ellipse,
.cdb-stamp rect {
	stroke: currentColor;
}

.cdb-stamp text {
	fill: currentColor;
	font-family: var(--cdb-font-hand);
}

.cdb-stamp-year {
	font-size: 25px;
}

.cdb-stamp-label {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cdb-voyage:nth-of-type(odd) {
	transform: rotate(-0.7deg);
}

.cdb-voyage:nth-of-type(even) {
	transform: rotate(0.6deg);
}

/* The photo is a polaroid dropped on the note, tilted the other way. */
.cdb-voyage-cover {
	position: relative;
	display: block;
	background-color: #fffefb;
	background-image: var(--cdb-grain-card);
	padding: 11px 11px 38px;
	box-shadow: 0 6px 16px rgba(70, 58, 38, 0.16);
	transform: rotate(1deg);
}

/* ---------- Mounted photos ----------
   Every print on the site is mounted the same way: kraft corners holding the
   board, and print grain over the picture. Only the scale changes, through
   --cdb-corner and the inset of the grain, which has to match each board's
   own padding. */
.cdb-voyage-cover,
.cdb-entry-cover,
.cdb-entry-content .wp-block-image,
.cdb-sibling-photo {
	position: relative;
}

/* Print grain, kept strictly inside the picture so it reads as paper rather
   than a screen. Plain alpha, no mix-blend-mode: blending against what is
   painted behind an element keeps the compositor busy while scrolling. */
.cdb-voyage-cover::before,
.cdb-entry-cover::before,
.cdb-entry-content .wp-block-image::before,
.cdb-sibling-photo::before {
	content: '';
	position: absolute;
	inset: var(--cdb-board, 11px 11px 38px);
	background-image: var(--cdb-grain-photo);
	pointer-events: none;
}

/* Kraft photo corners: pockets glued to the page, with the print tucked in.
   They straddle the edge on purpose, running from over the picture out onto
   the white board and onto the card behind, which is why the box is pushed
   past the frame instead of being clipped to the image.

   Aligned on the board, not on the picture: a corner holds the print itself,
   so the bottom pair belongs on the edge of the white card, not floating
   halfway up the writing band. */
.cdb-voyage-cover::after,
.cdb-entry-cover::after,
.cdb-entry-content .wp-block-image::after,
.cdb-sibling-photo::after {
	content: '';
	position: absolute;
	inset: -3px;
	--cdb-corner-ink: rgba(160, 133, 90, 0.88);
	--cdb-corner-run: calc(var(--cdb-corner, 36px) * 0.56);
	background-image:
		linear-gradient(135deg, var(--cdb-corner-ink) 0 var(--cdb-corner-run), transparent var(--cdb-corner-run)),
		linear-gradient(225deg, var(--cdb-corner-ink) 0 var(--cdb-corner-run), transparent var(--cdb-corner-run)),
		linear-gradient(45deg, var(--cdb-corner-ink) 0 var(--cdb-corner-run), transparent var(--cdb-corner-run)),
		linear-gradient(315deg, var(--cdb-corner-ink) 0 var(--cdb-corner-run), transparent var(--cdb-corner-run));
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-size: var(--cdb-corner, 36px) var(--cdb-corner, 36px);
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Smaller prints get smaller corners, or they would swallow the picture. */
.cdb-entry-content .wp-block-image {
	--cdb-corner: 30px;
	--cdb-board: 11px 11px 28px;
}

.cdb-sibling-photo {
	--cdb-corner: 22px;
	--cdb-board: 6px 6px 16px;
}

/* Written on the white band of the polaroid, by hand and never quite level. */
.cdb-photo-note {
	position: absolute;
	/* clear of the two bottom corners, which now reach the board's edge */
	left: 34px;
	right: 34px;
	bottom: 9px;
	z-index: 2;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	transform: rotate(-0.8deg);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cdb-voyage:nth-of-type(even) .cdb-voyage-cover {
	transform: rotate(-1.1deg);
}

.cdb-voyage-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Without a photo the name leads the card, so it needs no top gap. */
.cdb-voyage-cover + .cdb-voyage-name {
	margin-top: 30px;
}

.cdb-voyage-name {
	margin: 4px 0 6px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
}

.cdb-voyage-name a {
	color: var(--cdb-ink);
	border-bottom: 2px solid rgba(63, 74, 60, 0.25);
}

.cdb-voyage-name a:hover {
	border-bottom-color: var(--cdb-ink);
}

.cdb-voyage-meta {
	margin: 0;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 18px;
}

.cdb-voyage-sep {
	margin: 0 8px;
	opacity: 0.55;
}

.cdb-voyage-desc {
	margin: 12px 0 0;
	color: var(--cdb-ink-soft);
	font-size: 16px;
}

/* Space kept on the right so no line ever runs under the postmark. */
.cdb-voyage .cdb-voyage-name,
.cdb-voyage .cdb-voyage-meta,
.cdb-voyage .cdb-voyage-desc {
	padding-right: 96px;
}

/* ---------- Voyage header (archive) ---------- */
.cdb-voyage-header {
	padding: 8px 0 52px;
	text-align: center;
}

.cdb-voyage-title {
	margin: 0 0 10px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.1;
}

.cdb-voyage-header .cdb-voyage-desc {
	margin-top: 12px;
	font-family: var(--cdb-font-hand);
	font-size: 18px;
}

/* ---------- Entry: one day, on its own sheet ---------- */
.cdb-entry {
	position: relative;
	background-color: var(--cdb-card);
	background-image: var(--cdb-grain-card);
	padding: 38px 32px 34px;
	margin-bottom: 62px;
	border-radius: var(--cdb-radius);
	box-shadow:
		0 10px 26px rgba(70, 58, 38, 0.13),
		inset 0 0 48px rgba(96, 78, 50, 0.06);
}

.cdb-entry:nth-of-type(odd) {
	transform: rotate(-0.45deg);
}

.cdb-entry:nth-of-type(even) {
	transform: rotate(0.4deg);
}

.cdb-entry-cover {
	position: relative;
	display: block;
	background-color: #fffefb;
	background-image: var(--cdb-grain-card);
	padding: 11px 11px 38px;
	box-shadow: 0 6px 16px rgba(70, 58, 38, 0.16);
	transform: rotate(0.9deg);
}

.cdb-entry:nth-of-type(even) .cdb-entry-cover {
	transform: rotate(-1deg);
}

.cdb-entry-cover img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cdb-entry-body {
	padding-top: 30px;
}

/* Which day of the trip this is: the spine of a travel diary. */
.cdb-day {
	display: inline-block;
	margin-bottom: 10px;
	padding: 1px 13px 2px;
	border: 1.5px solid var(--cdb-accent);
	border-radius: 999px;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 16px;
	line-height: 1.45;
	transform: rotate(-1.4deg);
}

.cdb-entry-date {
	display: block;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 18px;
	margin-bottom: 4px;
}

.cdb-entry-date a {
	color: var(--cdb-accent);
	border-bottom: 1px dashed currentColor;
}

.cdb-entry-title {
	margin: 0 0 18px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
}

.cdb-entry-title a {
	color: var(--cdb-ink);
}

.cdb-entry-title a:hover {
	color: var(--cdb-accent);
}

/* Read button on the feed thumbnails. */
.cdb-read {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 24px;
	border: 2px solid var(--cdb-accent);
	border-radius: 999px;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
	line-height: 1.5;
	transform: rotate(-0.8deg);
}

.cdb-read:hover,
.cdb-read:focus {
	background: var(--cdb-accent);
	color: #fff;
}

.cdb-entry-content {
	font-size: 17px;
}

.cdb-entry-content p {
	margin: 0 0 20px;
}

.cdb-entry-content > p:last-child {
	margin-bottom: 0;
}

/* Photos inside the story are polaroids too, alternately tilted. */
.cdb-entry-content figure {
	margin: 30px 0;
}

.cdb-entry-content .wp-block-image {
	background-color: #fffefb;
	background-image: var(--cdb-grain-card);
	padding: 11px 11px 28px;
	box-shadow: 0 6px 16px rgba(70, 58, 38, 0.16);
	transform: rotate(-1deg);
	width: fit-content;
	max-width: 100%;
}

.cdb-entry-content .wp-block-image:nth-of-type(even) {
	transform: rotate(1.2deg);
}

.cdb-entry-content .wp-block-image figcaption {
	/* Lifted above the grain layer: a caption sits below the picture, and the
	   overlay cannot know how tall it is, so it would otherwise run over it. */
	position: relative;
	z-index: 1;
	margin: 12px 4px 0;
	padding: 0 18px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 17px;
	text-align: center;
}

.cdb-entry-content .wp-block-gallery {
	margin: 30px 0;
}

/* WordPress lays galleries out with flex, which stretches whatever is left
   over on the last row: four photos in three columns gives three thumbnails
   and one banner. A grid keeps every tile the same size whatever the count. */
.cdb-entry-content .wp-block-gallery .blocks-gallery-grid,
.cdb-entry-content .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(var(--cdb-cols, 2), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdb-entry-content .wp-block-gallery.columns-1 { --cdb-cols: 1; }
.cdb-entry-content .wp-block-gallery.columns-2 { --cdb-cols: 2; }

/* Past three across, a holiday photo on a phone is a postage stamp. */
.cdb-entry-content .wp-block-gallery.columns-3,
.cdb-entry-content .wp-block-gallery.columns-4,
.cdb-entry-content .wp-block-gallery.columns-5,
.cdb-entry-content .wp-block-gallery.columns-6,
.cdb-entry-content .wp-block-gallery.columns-7,
.cdb-entry-content .wp-block-gallery.columns-8 { --cdb-cols: 3; }

/* Core sizes these items with a percentage width meant for its own flex
   layout. Left alone, that percentage now resolves against the grid track
   and shrinks each photo to a third of its cell, so this selector carries
   one extra class to outrank it. */
.cdb-entry .cdb-entry-content .wp-block-gallery .blocks-gallery-item {
	width: auto;
	margin: 0;
	padding: 0;
}

/* Inside a gallery the grid decides the size, so the board sits flush and
   square: shrinking it or tilting it would break the alignment. */
.cdb-entry-content .wp-block-gallery figure {
	margin: 0;
}

/* A phone shoots both ways up. Cropping every tile to one shape is what
   keeps a mixed batch from looking like a broken staircase. */
.cdb-entry-content .wp-block-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cdb-entry-content .wp-block-gallery .wp-block-image {
	--cdb-corner: 24px;
	--cdb-board: 8px;
	width: auto;
	padding: 8px;
	transform: none;
	box-shadow: 0 5px 14px rgba(70, 58, 38, 0.16);
}

.cdb-entry-content .alignwide,
.cdb-entry-content .alignfull {
	margin-left: -32px;
	margin-right: -32px;
	max-width: none;
}

/* ---------- Map ---------- */
.cdb-map-frame {
	position: relative;
	margin: 0 0 62px;
	padding: 16px 16px 18px;
	background-color: #fffdf8;
	background-image: var(--cdb-grain-card);
	border-radius: var(--cdb-radius);
	box-shadow:
		0 10px 26px rgba(70, 58, 38, 0.13),
		inset 0 0 44px rgba(96, 78, 50, 0.06);
	transform: rotate(-0.5deg);
}

/* Inside an article the map is a keepsake, not a headline. */
.cdb-map-frame--entry {
	margin: 34px 0 0;
	transform: rotate(0.6deg);
}

.cdb-map-holder {
	position: relative;
}

.cdb-map {
	display: block;
	width: 100%;
	height: auto;
	background: #eef3f6;
	border-radius: 2px;
}

.cdb-compass {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 46px;
	height: 46px;
	opacity: 0.42;
	pointer-events: none;
	/* The frame is tilted, so the needle is straightened against it:
	   north has to read vertical on screen, not vertical on the paper. */
	transform: rotate(0.5deg);
}

.cdb-map-frame--entry .cdb-compass {
	transform: rotate(-0.6deg);
}

.cdb-compass circle {
	stroke: var(--cdb-ink);
}

.cdb-compass path {
	fill: var(--cdb-ink);
}

.cdb-compass-flat {
	opacity: 0.4;
}

.cdb-compass-n {
	fill: var(--cdb-ink);
	font-family: var(--cdb-font-hand);
	font-size: 17px;
}

.cdb-map-route {
	stroke: var(--cdb-accent);
	stroke-linecap: round;
	opacity: 0.85;
}

.cdb-map-dot {
	fill: #c2543f;
	stroke: #fff;
}

.cdb-map-legend {
	margin-top: 12px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 18px;
	text-align: center;
}

/* ---------- Single post: the day before, the day after ---------- */
.cdb-siblings {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 46px 0 38px;
}

.cdb-sibling {
	display: block;
	background-color: var(--cdb-card);
	background-image: var(--cdb-grain-card);
	padding: 18px 18px 20px;
	border-radius: var(--cdb-radius);
	box-shadow:
		0 8px 20px rgba(70, 58, 38, 0.12),
		inset 0 0 36px rgba(96, 78, 50, 0.06);
	color: var(--cdb-ink);
}

.cdb-sibling-prev {
	transform: rotate(-0.6deg);
}

/* Keep the next day on the right even when there is no previous one. */
.cdb-sibling-next {
	grid-column: 2;
	text-align: right;
	transform: rotate(0.5deg);
}

.cdb-sibling:hover {
	color: var(--cdb-ink);
	box-shadow: 0 12px 26px rgba(70, 58, 38, 0.18);
}

.cdb-sibling-label {
	display: block;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 18px;
	margin-bottom: 12px;
}

.cdb-sibling-photo {
	display: block;
	background-color: #fffefb;
	background-image: var(--cdb-grain-card);
	padding: 6px 6px 16px;
	margin-bottom: 14px;
	box-shadow: 0 4px 12px rgba(70, 58, 38, 0.16);
}

.cdb-sibling-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.cdb-sibling-date {
	display: block;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 16px;
}

.cdb-sibling-title {
	display: block;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
}

/* ---------- Single post ---------- */
.cdb-back-link {
	display: inline-block;
	margin: 4px 0 0;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
}

.cdb-back-link:hover {
	color: var(--cdb-accent);
}

/* ---------- Pagination ---------- */
.cdb-pagination {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 72px;
	padding-top: 34px;
	border-top: 1px dashed var(--cdb-stitch);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
}

.cdb-pagination a {
	color: var(--cdb-ink-soft);
}

.cdb-pagination a:hover {
	color: var(--cdb-accent);
}

/* ---------- Empty state ---------- */
.cdb-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 20px;
}

/* ---------- Footer ---------- */
.cdb-footer {
	text-align: center;
	padding: 26px 0 70px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 17px;
}

.cdb-footer::before {
	content: '♡';
	display: block;
	margin-bottom: 14px;
	color: var(--cdb-stitch);
	font-size: 20px;
}

/* Below this width the header is too narrow for the doodle to stay clear
   of the title, and a plane flying through the words reads as a bug. */
@media (max-width: 780px) {
	.cdb-plane {
		display: none;
	}
}

/* Past this width there is no outer margin left to draw in, so the marks
   move to the very edges of the page, shrink, and the column gives up a
   little width to make room. The widest ones bleed off the side rather
   than being dropped. */
@media (max-width: 1040px) {
	.cdb-wrap {
		padding: 0 34px;
	}

	.cdb-doodle {
		opacity: 0.5;
	}

	.cdb-doodle--heart-a {
		top: 6%;
		left: auto;
		right: 5px;
		width: 21px;
		height: 21px;
	}

	.cdb-doodle--sprig {
		top: 14%;
		left: 3px;
		width: 21px;
		height: 47px;
	}

	.cdb-doodle--swirl {
		top: 26%;
		left: auto;
		right: -20px;
		width: 58px;
		height: 29px;
	}

	.cdb-doodle--spark {
		top: 36%;
		left: 4px;
		width: 25px;
		height: 25px;
	}

	.cdb-doodle--camera {
		top: 45%;
		left: auto;
		right: 3px;
		width: 29px;
		height: 23px;
	}

	.cdb-doodle--heart-b {
		top: 56%;
		left: 6px;
		width: 18px;
		height: 18px;
	}

	.cdb-doodle--plane-2 {
		top: 66%;
		left: auto;
		right: -26px;
		width: 66px;
		height: 33px;
	}

	.cdb-doodle--dots {
		top: 77%;
		left: -5px;
		width: 33px;
		height: 33px;
	}

	.cdb-doodle--suitcase {
		top: 87%;
		left: auto;
		right: 4px;
		width: 27px;
		height: 25px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.cdb-header {
		padding: 44px 0 28px;
	}

	.cdb-site-title {
		font-size: 44px;
	}

	.cdb-site-tagline,
	.cdb-nav {
		font-size: 18px;
	}

	.cdb-voyages {
		gap: 48px;
	}

	.cdb-voyage,
	.cdb-entry {
		padding-left: 20px;
		padding-right: 20px;
	}

	.cdb-spiral::before,
	.cdb-spiral::after {
		left: 18px;
		right: 18px;
	}

	.cdb-stamp {
		width: 60px;
		height: 60px;
		right: 8px;
		bottom: 12px;
	}

	.cdb-voyage .cdb-voyage-name,
	.cdb-voyage .cdb-voyage-meta,
	.cdb-voyage .cdb-voyage-desc {
		padding-right: 72px;
	}

	.cdb-voyage-name,
	.cdb-entry-title {
		font-size: 31px;
	}

	.cdb-voyage-title {
		font-size: 37px;
	}

	.cdb-entry-content .alignwide,
	.cdb-entry-content .alignfull {
		margin-left: -20px;
		margin-right: -20px;
	}

	.cdb-siblings {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Two across is the most a phone can show without turning holiday
	   photos into thumbnails. Same specificity as the columns-N rules
	   above, and later in the file, so it wins. */
	.cdb-entry .cdb-entry-content .wp-block-gallery {
		--cdb-cols: 2;
	}

	.cdb-sibling-next {
		grid-column: auto;
		text-align: left;
	}
}

/* Tilting is decorative; drop it when the reader asks for calmer motion. */
@media (prefers-reduced-motion: reduce) {
	.cdb-voyage,
	.cdb-entry,
	.cdb-voyage-cover,
	.cdb-entry-cover,
	.cdb-entry-content .wp-block-image {
		transform: none;
	}
}

/* ---------- The gate ---------- */
.cdb-gate {
	max-width: 420px;
	margin: 0 auto;
	padding: 90px 24px 60px;
	text-align: center;
}

.cdb-gate-title {
	margin: 0 0 18px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.1;
}

.cdb-gate-note {
	margin: 0 0 26px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
}

.cdb-gate-error {
	margin: 0 0 20px;
	padding: 8px 16px;
	border: 1.5px solid #b06a52;
	border-radius: var(--cdb-radius);
	color: #93503b;
	font-family: var(--cdb-font-hand);
	font-size: 18px;
	transform: rotate(-0.6deg);
}

.cdb-gate-form {
	background-color: var(--cdb-card);
	background-image: var(--cdb-grain-card);
	padding: 26px 24px 28px;
	border-radius: var(--cdb-radius);
	box-shadow:
		0 10px 26px rgba(70, 58, 38, 0.13),
		inset 0 0 40px rgba(96, 78, 50, 0.06);
	transform: rotate(-0.5deg);
}

.cdb-gate-form label {
	display: block;
	margin-bottom: 10px;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 18px;
}

.cdb-gate-form input {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--cdb-stitch);
	border-radius: var(--cdb-radius);
	background: #fffefb;
	color: var(--cdb-ink);
	font-family: var(--cdb-font-body);
	font-size: 17px;
}

.cdb-gate-form input:focus {
	outline: 2px solid var(--cdb-accent);
	outline-offset: 1px;
}

.cdb-gate-form button {
	margin-top: 18px;
	padding: 8px 30px;
	border: 2px solid var(--cdb-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
	cursor: pointer;
	transform: rotate(-0.8deg);
}

.cdb-gate-form button:hover,
.cdb-gate-form button:focus {
	background: var(--cdb-accent);
	color: #fff;
}

/* ---------- Comments ---------- */
.cdb-comments {
	margin: 46px 0 8px;
	padding-top: 36px;
	border-top: 1px dashed var(--cdb-stitch);
}

.cdb-comments-title {
	margin: 0 0 26px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 30px;
}

.cdb-comment-list,
.cdb-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdb-comment-list .children {
	margin: 16px 0 0 26px;
}

.cdb-comment-body {
	position: relative;
	margin-bottom: 18px;
	padding: 18px 20px 16px;
	background-color: var(--cdb-card);
	background-image: var(--cdb-grain-card);
	border-radius: var(--cdb-radius);
	box-shadow: 0 6px 16px rgba(70, 58, 38, 0.1);
}

.cdb-comment:nth-of-type(odd) > .cdb-comment-body {
	transform: rotate(-0.4deg);
}

.cdb-comment:nth-of-type(even) > .cdb-comment-body {
	transform: rotate(0.35deg);
}

.cdb-comment-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.cdb-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	font-family: var(--cdb-font-script);
	font-size: 24px;
	color: var(--cdb-ink);
	transform: rotate(-3deg);
}

.cdb-avatar--0 { background: #dfe6d2; }
.cdb-avatar--1 { background: #f3dee0; }
.cdb-avatar--2 { background: #f8eed0; }
.cdb-avatar--3 { background: #e4dded; }
.cdb-avatar--4 { background: #dceae2; }
.cdb-avatar--5 { background: #dce5ec; }

.cdb-comment-author {
	display: block;
	font-family: var(--cdb-font-script);
	font-size: 23px;
	line-height: 1.15;
}

.cdb-comment-date {
	display: block;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 15px;
}

.cdb-comment-text p {
	margin: 0 0 10px;
}

.cdb-comment-text p:last-child {
	margin-bottom: 0;
}

.cdb-comment-pending {
	margin: 0 0 10px;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 16px;
}

.cdb-comment-reply {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--cdb-font-hand);
	font-size: 16px;
}

/* ---------- Comment form ---------- */
.comment-respond {
	margin-top: 30px;
	padding: 24px 22px 26px;
	background-color: var(--cdb-card);
	background-image: var(--cdb-grain-card);
	border-radius: var(--cdb-radius);
	box-shadow:
		0 8px 20px rgba(70, 58, 38, 0.11),
		inset 0 0 40px rgba(96, 78, 50, 0.06);
	transform: rotate(0.4deg);
}

.comment-reply-title {
	margin: 0 0 6px;
	font-family: var(--cdb-font-script);
	font-weight: 700;
	font-size: 27px;
}

.cdb-comment-notes,
.comment-form-cookies-consent label {
	color: var(--cdb-ink-soft);
	font-size: 15px;
}

.comment-respond label {
	display: block;
	margin-bottom: 6px;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 17px;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea {
	width: 100%;
	padding: 9px 13px;
	border: 1.5px solid var(--cdb-stitch);
	border-radius: var(--cdb-radius);
	background: #fffefb;
	color: var(--cdb-ink);
	font-family: var(--cdb-font-body);
	font-size: 17px;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	outline: 2px solid var(--cdb-accent);
	outline-offset: 1px;
}

.comment-respond .cdb-comment-submit {
	margin-top: 4px;
	padding: 8px 30px;
	border: 2px solid var(--cdb-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--cdb-accent);
	font-family: var(--cdb-font-hand);
	font-size: 19px;
	cursor: pointer;
	transform: rotate(-0.8deg);
}

.comment-respond .cdb-comment-submit:hover,
.comment-respond .cdb-comment-submit:focus {
	background: var(--cdb-accent);
	color: #fff;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form-cookies-consent input {
	margin-top: 5px;
}

/* The honeypot: out of sight for people, still filled in by robots. */
.cdb-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Viewing a photo full size ---------- */
.cdb-zoomable {
	cursor: zoom-in;
}

.cdb-zoomable:focus-visible {
	outline: 3px solid var(--cdb-accent);
	outline-offset: 3px;
}

body.cdb-lightbox-open {
	overflow: hidden;
}

.cdb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Wide side padding so the board never covers the arrows. */
	padding: 24px 84px;
	background-color: rgba(38, 33, 25, 0.92);
	background-image: var(--cdb-grain-page);
}

.cdb-lightbox[hidden] {
	display: none;
}

/* The photo is mounted, like everywhere else on the site. */
.cdb-lightbox-board {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	padding: 14px 14px 16px;
	background-color: #fffefb;
	background-image: var(--cdb-grain-card);
	border-radius: var(--cdb-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	transform: rotate(-0.5deg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cdb-lightbox-board img {
	max-width: 100%;
	/* leaves room for the frame and the caption */
	max-height: calc(100vh - 130px);
	width: auto;
	margin: 0 auto;
	object-fit: contain;
}

.cdb-lightbox-board figcaption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	color: var(--cdb-ink-soft);
	font-family: var(--cdb-font-hand);
	font-size: 17px;
	text-align: center;
}

.cdb-lightbox-count {
	color: var(--cdb-stitch);
	font-size: 15px;
}

.cdb-lightbox button {
	position: absolute;
	background: rgba(255, 254, 251, 0.92);
	border: none;
	border-radius: 999px;
	color: var(--cdb-ink);
	font-family: var(--cdb-font-hand);
	cursor: pointer;
	line-height: 1;
}

.cdb-lightbox button:hover,
.cdb-lightbox button:focus-visible {
	background: #fff;
	outline: 2px solid var(--cdb-accent);
	outline-offset: 2px;
}

.cdb-lightbox-close {
	top: 16px;
	right: 16px;
	width: 46px;
	height: 46px;
	font-size: 28px;
}

.cdb-lightbox-prev,
.cdb-lightbox-next {
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	font-size: 22px;
}

.cdb-lightbox-prev { left: 16px; }
.cdb-lightbox-next { right: 16px; }

.cdb-lightbox button[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.cdb-lightbox {
		/* Arrows drop to the bottom on a phone, so the sides come back. */
		padding: 12px 12px 76px;
	}

	.cdb-lightbox-board {
		padding: 10px 10px 12px;
	}

	.cdb-lightbox-board img {
		max-height: calc(100vh - 150px);
	}

	/* Out of the way of the photo: thumb-height, not mid-screen. */
	.cdb-lightbox-prev,
	.cdb-lightbox-next {
		top: auto;
		bottom: 18px;
		margin-top: 0;
	}
}

/* Signature, discreet enough not to sit next to the family's own name. */
.cdb-credit {
	margin: 6px 0 0;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.cdb-credit a {
	color: var(--cdb-ink-soft);
	border-bottom: 1px dashed var(--cdb-stitch);
}

.cdb-credit a:hover,
.cdb-credit a:focus {
	color: var(--cdb-accent);
	border-bottom-color: var(--cdb-accent);
}