/*
Theme Name: Analog Laura
Theme URI: https://analoglaura.com
Author: Analog Laura
Author URI: https://analoglaura.com
Description: A WordPress theme for pens, paper & quiet notes. Features a paper-like design with Tailwind CSS and Swup page transitions.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: analog-laura
Tags: blog, custom-design, tailwind, swup
*/

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
  --paper-page:#F5F2F9; --paper-page-top:#EEE8F4; --paper-page-bottom:#FAF9FC; --paper-glow-a:#F2EEF7; --paper-glow-b:#ECE5F2; --paper-glow-c:#EBE3F1; --paper-glow-d:#E4DAEE; --paper-base:#F1ECF6; --paper-grid:rgba(160,150,186,0.26);
  --text-body:#1A1A20; --rule:rgba(200,196,214,0.60); --rule-soft:rgba(200,196,214,0.40); --rule-faint:rgba(200,196,214,0.25); --divider:#D2CFDB; --stack-1:#F1EFF6; --stack-2:#E9E6F0; --shadow-tint:rgba(90,80,120,0.06); --shadow-tint-2:rgba(90,80,120,0.04);
  --accent-ink:#C4B5FD; --accent-review:#FDA4AF; --accent-spread:#93C5FD; --accent-thought:#99F6E4; --accent-coral:#FDBA9E;
  --badge-ink-fg:#6D28D9; --badge-review-fg:#BE185D; --badge-spread-fg:#1D4ED8; --badge-thought-fg:#0F766E; --badge-coral-fg:#B45309;
  --ink-purple:#C4B5FD; --ink-blue:#93C5FD; --ink-teal:#99F6E4; --ink-green:#BBF7D0; --ink-pink:#FBCFE8; --ink-red:#FCA5A5; --ink-brown:#D6BFA8; --ink-neutral:#D4D4D8; --ink-black:#A1A1AA;
}

/* ========================================
   BASE & TYPOGRAPHY
   ======================================== */

body {
	/* Solid page background; the content card carries the gradient. */
	background-color: #FAF9FB;
	color: var(--text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Bookmania for headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'bookmania', serif;
	font-weight: 400;
	font-style: normal;
}

/* Caveat for handwritten accents */
.font-handwritten {
	font-family: 'Caveat', cursive;
	font-size: max(1.35rem, 1.5em);
	font-weight: 400;
	font-style: normal;
	line-height: 1.25;
}

/* Highlighter effect — handwritten accents get a soft marker stroke */
.highlight-review {
	background: linear-gradient(104deg, rgba(253,164,175,0) 0.9%, rgba(253,164,175,0.28) 2.4%, rgba(253,164,175,0.22) 5.8%, rgba(253,164,175,0.28) 93%, rgba(253,164,175,0.15) 96%, rgba(253,164,175,0) 98%);
	padding: 0.1em 0.35em;
	margin: -0.1em -0.2em;
	border-radius: 7.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.highlight-thought {
	background: linear-gradient(104deg, rgba(203,201,214,0) 0.9%, rgba(203,201,214,0.32) 2.4%, rgba(203,201,214,0.25) 5.8%, rgba(203,201,214,0.32) 93%, rgba(203,201,214,0.18) 96%, rgba(203,201,214,0) 98%);
	padding: 0.1em 0.35em;
	margin: -0.1em -0.2em;
	border-radius: 7.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.highlight-ink {
	background: linear-gradient(104deg, rgba(196,181,253,0) 0.9%, rgba(196,181,253,0.32) 2.4%, rgba(196,181,253,0.25) 5.8%, rgba(196,181,253,0.32) 93%, rgba(196,181,253,0.18) 96%, rgba(196,181,253,0) 98%);
	padding: 0.1em 0.35em;
	margin: -0.1em -0.2em;
	border-radius: 7.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.highlight-spread {
	background: linear-gradient(104deg, rgba(153,246,228,0) 0.9%, rgba(153,246,228,0.32) 2.4%, rgba(153,246,228,0.25) 5.8%, rgba(153,246,228,0.32) 93%, rgba(153,246,228,0.18) 96%, rgba(153,246,228,0) 98%);
	padding: 0.1em 0.35em;
	margin: -0.1em -0.2em;
	border-radius: 7.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ========================================
   FILM GRAIN + PAPER FIBER OVERLAY
   ======================================== */

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.032;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Paper fiber texture — subtle repeating fibers */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9998;
	opacity: 0.018;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.15' numOctaves='5' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fiber)'/%3E%3C/svg%3E");
}

/* ========================================
   PAPER CONTAINER
   ======================================== */

.paper-container {
	background-image:
		radial-gradient(circle at 0 0, var(--paper-glow-a) 0, var(--paper-glow-b) 40%, transparent 70%),
		radial-gradient(circle at 100% 100%, var(--paper-glow-c) 0, var(--paper-glow-d) 40%, transparent 70%),
		repeating-linear-gradient(to bottom, transparent 0, transparent 0.5rem, var(--paper-grid) 0.5rem, var(--paper-grid) 0.51rem),
		repeating-linear-gradient(to right, transparent 0, transparent 0.5rem, var(--paper-grid) 0.5rem, var(--paper-grid) 0.51rem);
	background-color: var(--paper-base);
	background-size: 100% 0.5rem, 0.5rem 100%, 0.5rem 0.5rem, 0.5rem 0.5rem;
}

/* Ink blot stain — decorative accent */
.ink-blot {
	position: relative;
}

.ink-blot::after {
	content: '';
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid transparent;
	background: radial-gradient(ellipse at center, var(--shadow-tint) 0%, var(--shadow-tint-2) 55%, transparent 72%);
	box-shadow: none;
	pointer-events: none;
	opacity: 0.7;
	top: var(--blot-top, -10px);
	right: var(--blot-right, -15px);
	transform: rotate(var(--blot-rotate, 15deg));
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sparkle {
	0%, 100% {
		opacity: 0.3;
		transform: scale(0.8) rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: scale(1.2) rotate(15deg);
	}
}

@keyframes sparkle-slow {
	0%, 100% {
		opacity: 0.2;
		transform: scale(0.9);
	}
	33% {
		opacity: 0.8;
		transform: scale(1.1);
	}
	66% {
		opacity: 0.5;
		transform: scale(1);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-3px);
	}
}

@keyframes wiggle {
	0%, 100% { transform: rotate(-1deg); }
	50% { transform: rotate(1deg); }
}

@keyframes tape-settle {
	from {
		transform: rotate(var(--tape-rotate, -2deg)) scale(1.05);
		opacity: 0;
	}
	to {
		transform: rotate(var(--tape-rotate, -2deg)) scale(1);
		opacity: 1;
	}
}

.animate-fade-in-up {
	animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-in-up-1 { animation-delay: 0.1s; }
.animate-fade-in-up-2 { animation-delay: 0.2s; }
.animate-fade-in-up-3 { animation-delay: 0.3s; }
.animate-fade-in-up-4 { animation-delay: 0.4s; }
.animate-fade-in-up-5 { animation-delay: 0.5s; }
.animate-fade-in-up-6 { animation-delay: 0.6s; }

/* ========================================
   SPARKLE & STAR ACCENTS
   ======================================== */

.star-accent {
	display: inline-block;
	font-size: 0.6em;
	vertical-align: middle;
	opacity: 0.5;
	animation: sparkle 3s ease-in-out infinite;
}

.star-accent-slow {
	display: inline-block;
	font-size: 0.55em;
	vertical-align: middle;
	opacity: 0.4;
	animation: sparkle-slow 4s ease-in-out infinite;
}

.sparkle-float {
	display: inline-block;
	animation: float 3s ease-in-out infinite, sparkle 4s ease-in-out infinite;
}

.sparkle-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 0;
	color: var(--divider);
	font-size: 0.5rem;
	letter-spacing: 0.3em;
}

.sparkle-divider::before,
.sparkle-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--rule), transparent);
}

/* ========================================
   SWUP TRANSITIONS
   ======================================== */

.transition-main {
	transition: opacity 0.3s ease-in-out;
}

#swup {
	min-height: 1px;
}

/* Rotating phrase */
#rotating-phrase {
	display: block;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	will-change: opacity, transform;
}

/* ========================================
   BLOG CARDS — STACKED PAPER + DEPTH
   ======================================== */

.blog-card {
	position: relative;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	overflow: visible;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
	/* Stacked paper shadows — looks like pages underneath */
	box-shadow:
		0 1px 3px rgba(0,0,0,0.04),
		0 4px 12px rgba(0,0,0,0.02),
		3px 3px 0 -1px var(--stack-1),
		3px 3px 0 0 var(--rule-soft),
		6px 6px 0 -1px var(--stack-2),
		6px 6px 0 0 var(--rule-faint);
	transform-origin: center center;
	/* Perspective for 3D tilt */
	transform: rotate(var(--card-rotate, 0deg));
	will-change: transform, box-shadow;
}

.blog-card:hover {
	transform: rotate(var(--card-rotate, 0deg)) translateY(-4px) scale(1.008);
	box-shadow:
		0 8px 25px rgba(0,0,0,0.08),
		0 12px 40px rgba(0,0,0,0.04),
		3px 3px 0 -1px var(--stack-1),
		3px 3px 0 0 var(--rule-soft),
		6px 6px 0 -1px var(--stack-2),
		6px 6px 0 0 var(--rule-faint);
}

/* 3D tilt on hover via JS — these get set dynamically */
.blog-card.is-tilting {
	transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
}

/* Dog-eared corner */
.blog-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 28px 28px 0;
	border-color: transparent var(--paper-page) transparent transparent;
	z-index: 2;
	filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.06));
	transition: border-width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The folded part underneath */
.blog-card::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 28px 28px;
	border-color: transparent transparent rgba(0,0,0,0.06) transparent;
	z-index: 1;
	transition: border-width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover::before {
	border-width: 0 34px 34px 0;
}

.blog-card:hover::after {
	border-width: 0 0 34px 34px;
}

/* Scattered desk rotation classes */
.card-tilt-1 { --card-rotate: -0.8deg; }
.card-tilt-2 { --card-rotate: 0.5deg; }
.card-tilt-3 { --card-rotate: -0.3deg; }
.card-tilt-4 { --card-rotate: 0.7deg; }
.card-tilt-5 { --card-rotate: -0.6deg; }
.card-tilt-6 { --card-rotate: 0.4deg; }

.blog-card-review {
	background: linear-gradient(135deg, rgba(255, 241, 242, 0.8), rgba(250, 249, 251, 0.9));
	border-color: rgba(253, 164, 175, 0.3);
}
.blog-card-review:hover { border-color: rgba(253, 164, 175, 0.5); }

.blog-card-thoughts {
	background: linear-gradient(135deg, rgba(240, 253, 250, 0.8), rgba(250, 249, 251, 0.9));
	border-color: rgba(153, 246, 228, 0.3);
}
.blog-card-thoughts:hover { border-color: rgba(153, 246, 228, 0.5); }

.blog-card-ink {
	background: linear-gradient(135deg, rgba(237, 233, 254, 0.55), rgba(250, 249, 251, 0.9));
	border-color: rgba(196, 181, 253, 0.3);
}
.blog-card-ink:hover { border-color: rgba(196, 181, 253, 0.5); }

.blog-card-spread {
	background: linear-gradient(135deg, rgba(219, 234, 254, 0.8), rgba(250, 249, 251, 0.9));
	border-color: rgba(147, 197, 253, 0.35);
}
.blog-card-spread:hover { border-color: rgba(147, 197, 253, 0.55); }

/* ========================================
   BLOG TYPE BADGES
   ======================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	border: 1px solid;
	white-space: nowrap;
}

.badge-review {
	color: var(--badge-review-fg);
	background-color: rgba(255, 228, 230, 0.7);
	border-color: rgba(253, 164, 175, 0.5);
}

.badge-thoughts {
	color: var(--badge-thought-fg);
	background-color: rgba(204, 251, 241, 0.7);
	border-color: rgba(153, 246, 228, 0.5);
}

.badge-ink {
	color: var(--badge-ink-fg);
	background-color: rgba(237, 233, 254, 0.7);
	border-color: rgba(196, 181, 253, 0.5);
}

.badge-spread {
	color: var(--badge-spread-fg);
	background-color: rgba(219, 234, 254, 0.7);
	border-color: rgba(147, 197, 253, 0.5);
}

/* ========================================
   RATING STARS
   ======================================== */

.rating-stars {
	display: inline-flex;
	gap: 0.15rem;
	font-size: 0.85rem;
}

.rating-stars .star-filled {
	color: #f59e0b;
	filter: drop-shadow(0 0 1px rgba(245, 158, 11, 0.3));
}

.rating-stars .star-empty {
	color: #d6d3d1;
}

.rating-stars .star-half {
	position: relative;
	color: #d6d3d1;
}

.rating-stars .star-half::before {
	content: '\2605';
	position: absolute;
	left: 0;
	color: #f59e0b;
	overflow: hidden;
	width: 50%;
	filter: drop-shadow(0 0 1px rgba(245, 158, 11, 0.3));
}

/* ========================================
   SKEUOMORPHIC ELEMENTS
   ======================================== */

/* Washi tape effect */
.washi-tape {
	position: relative;
	padding: 0.5rem 1.25rem;
	background: linear-gradient(135deg, rgba(253, 164, 175, 0.25), rgba(253, 164, 175, 0.15));
	border-top: 1px dashed rgba(253, 164, 175, 0.4);
	border-bottom: 1px dashed rgba(253, 164, 175, 0.4);
	transform: rotate(var(--tape-rotate, -1deg));
}

.washi-tape-teal {
	background: linear-gradient(135deg, rgba(153, 246, 228, 0.2), rgba(153, 246, 228, 0.1));
	border-color: rgba(153, 246, 228, 0.4);
}

.washi-tape-amber {
	background: linear-gradient(135deg, rgba(253, 224, 71, 0.2), rgba(253, 224, 71, 0.12));
	border-color: rgba(253, 224, 71, 0.4);
}

.washi-tape-lavender {
	background: linear-gradient(135deg, rgba(196, 181, 253, 0.2), rgba(196, 181, 253, 0.12));
	border-color: rgba(196, 181, 253, 0.4);
}

/* Sticky note — more tactile with corner curl */
.sticky-note {
	background: linear-gradient(135deg, #fef9c3, #fef3c7);
	border: 1px solid rgba(253, 224, 71, 0.3);
	box-shadow:
		2px 2px 6px rgba(0,0,0,0.06),
		-1px -1px 0 rgba(255,255,255,0.8) inset,
		0 8px 16px -4px rgba(0,0,0,0.08);
	transform: rotate(var(--note-rotate, -1deg));
	padding: 1rem 1.25rem;
	border-radius: 2px;
	position: relative;
}

/* Sticky note curl at bottom-right */
.sticky-note::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #fef3c7 45%, transparent 46%, transparent 56%, rgba(0,0,0,0.04) 57%);
	border-radius: 0 0 0 0;
}

/* Paper clip decoration */
.paper-clip {
	position: absolute;
	top: -6px;
	left: 24px;
	width: 18px;
	height: 40px;
	border: 2px solid #a8a29e;
	border-radius: 0 0 9px 9px;
	border-top: none;
	opacity: 0.5;
}

.paper-clip::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 2px;
	width: 10px;
	height: 20px;
	border: 2px solid #a8a29e;
	border-radius: 5px 5px 0 0;
	border-bottom: none;
}

/* Scotch tape on photos — translucent strip */
.scotch-tape {
	position: absolute;
	z-index: 3;
	width: 60px;
	height: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.18) 100%);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(0.5px);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	opacity: 0.85;
}

.scotch-tape-tl {
	top: -6px;
	left: 12px;
	transform: rotate(-15deg);
}

.scotch-tape-tr {
	top: -6px;
	right: 12px;
	transform: rotate(12deg);
}

.scotch-tape-bl {
	bottom: -6px;
	left: 12px;
	transform: rotate(8deg);
}

.scotch-tape-br {
	bottom: -6px;
	right: 12px;
	transform: rotate(-10deg);
}

/* Notebook holes */
.notebook-holes {
	position: absolute;
	left: 1.5rem;
	top: 0;
	bottom: 0;
	width: 2px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-top: 1.5rem;
}

.notebook-hole {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid rgba(168, 162, 158, 0.4);
	background: rgba(245, 245, 244, 0.8);
	margin-left: -4px;
	flex-shrink: 0;
}

/* Red margin line */
.margin-line {
	position: absolute;
	left: 2.5rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(239, 68, 68, 0.15);
}

/* Ruled lines */
.ruled-lines {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 1.75rem,
		rgba(147, 197, 253, 0.15) 1.75rem,
		rgba(147, 197, 253, 0.15) calc(1.75rem + 1px)
	);
}

/* Stamp effect */
.stamp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.75rem;
	border: 2px solid;
	border-radius: 3px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transform: rotate(-3deg);
	opacity: 0.7;
}

.stamp-pink {
	color: #be185d;
	border-color: #be185d;
}

.stamp-teal {
	color: #0f766e;
	border-color: #0f766e;
}

/* Torn edge effect */
.torn-edge-bottom {
	position: relative;
}

.torn-edge-bottom::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	height: 8px;
	background: inherit;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0,0 Q5,6 10,2 T20,3 T30,1 T40,4 T50,2 T60,3 T70,1 T80,4 T90,2 T100,3 L100,0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0,0 Q5,6 10,2 T20,3 T30,1 T40,4 T50,2 T60,3 T70,1 T80,4 T90,2 T100,3 L100,0 Z' fill='black'/%3E%3C/svg%3E");
	mask-size: 100px 8px;
	-webkit-mask-size: 100px 8px;
}

/* Pencil-drawn underline (hand-drawn SVG wavy line) */
.pencil-underline {
	position: relative;
	display: inline;
}

.pencil-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6'%3E%3Cpath d='M0,3 Q10,0.5 20,3 T40,3 T60,3 T80,3 T100,3 T120,3' fill='none' stroke='%23d6d3d1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 60px 6px;
	opacity: 0.7;
}

.pencil-underline-pink::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6'%3E%3Cpath d='M0,3 Q10,0.5 20,3 T40,3 T60,3 T80,3 T100,3 T120,3' fill='none' stroke='%23fda4af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Ink splatter decorative marks */
.ink-splat {
	position: absolute;
	pointer-events: none;
	opacity: 0.04;
	z-index: 0;
}

.ink-splat::before {
	content: '';
	display: block;
	width: var(--splat-size, 40px);
	height: var(--splat-size, 40px);
	border-radius: 50% 45% 55% 40%;
	background: var(--splat-color, var(--text-body));
	transform: rotate(var(--splat-rotate, 0deg));
}

/* ========================================
   PULL QUOTES
   ======================================== */

.pull-quote {
	position: relative;
	padding: 1.5rem 1.5rem 1.5rem 2.5rem;
	margin: 1.5rem 0;
	border-left: 3px solid rgba(20, 184, 166, 0.4);
	background: linear-gradient(135deg, rgba(240, 253, 250, 0.5), transparent);
	border-radius: 0 0.5rem 0.5rem 0;
}

.pull-quote::before {
	content: '\201C';
	position: absolute;
	left: 0.5rem;
	top: 0.25rem;
	font-family: 'bookmania', Georgia, serif;
	font-size: 3rem;
	color: rgba(20, 184, 166, 0.25);
	line-height: 1;
}

/* ========================================
   INK SWATCH
   ======================================== */

.ink-swatch {
	position: relative;
	width: 100%;
	height: 3.5rem;
	border-radius: 0.375rem;
	border: 1px solid var(--rule-soft);
	overflow: hidden;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.ink-swatch::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
}

/* ========================================
   INK ENTRY ACCENTS (ink_color-driven)
   ======================================== */

.ink-color-purple{--entry-accent:var(--ink-purple)}
.ink-color-blue{--entry-accent:var(--ink-blue)}
.ink-color-teal{--entry-accent:var(--ink-teal)}
.ink-color-green{--entry-accent:var(--ink-green)}
.ink-color-pink{--entry-accent:var(--ink-pink)}
.ink-color-red{--entry-accent:var(--ink-red)}
.ink-color-brown{--entry-accent:var(--ink-brown)}
.ink-color-neutral{--entry-accent:var(--ink-neutral)}
.ink-color-black{--entry-accent:var(--ink-black)}

.ink-card{
	--entry-accent:var(--accent-ink);
	background:#FFFFFF;
	border:1px solid;
	border-color:var(--accent-ink);
	border-color:color-mix(in srgb, var(--entry-accent) 40%, transparent);
}
.ink-card:hover{
	border-color:color-mix(in srgb, var(--entry-accent) 65%, transparent);
}
.ink-chip{
	background-color:var(--entry-accent);
}

/* Keep swatch photos above the film-grain + paper-fiber overlays */
.swatch-photo, .ink-card img, figure img {
	position: relative;
	z-index: 10000;
}

/* ========================================
   BLOG POST CONTENT AREA
   ======================================== */

.blog-content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #44403c;
}

.blog-content p {
	margin-bottom: 1.25rem;
}

.blog-content h2 {
	font-size: 1.5rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	color: var(--text-body);
}

.blog-content h3 {
	font-size: 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--text-body);
}

.blog-content img {
	border-radius: 0.5rem;
	border: 1px solid var(--rule-soft);
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	margin: 1.5rem 0;
}

.blog-content a {
	color: #be185d;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.blog-content a:hover {
	color: #831843;
}

.blog-content ul, .blog-content ol {
	margin: 1rem 0 1.25rem 1.5rem;
	padding-left: 1.25rem;
}
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { list-style: inherit; }

.blog-content li {
	margin-bottom: 0.375rem;
}

.blog-content blockquote {
	padding: 1rem 1.5rem;
	margin: 1.5rem 0;
	border-left: 3px solid rgba(253, 164, 175, 0.4);
	background: rgba(255, 241, 242, 0.3);
	border-radius: 0 0.375rem 0.375rem 0;
	font-style: italic;
	color: #57534e;
}

/* ========================================
   PROS/CONS CARDS (REVIEW)
   ======================================== */

.pros-card {
	background: linear-gradient(135deg, rgba(220, 252, 231, 0.6), rgba(240, 253, 244, 0.4));
	border: 1px solid rgba(134, 239, 172, 0.4);
	border-radius: 0.5rem;
	padding: 1.25rem;
}

.cons-card {
	background: linear-gradient(135deg, rgba(254, 226, 226, 0.5), rgba(255, 241, 242, 0.4));
	border: 1px solid rgba(252, 165, 165, 0.4);
	border-radius: 0.5rem;
	padding: 1.25rem;
}

.pros-card li::before {
	content: '+';
	color: #16a34a;
	font-weight: 700;
	margin-right: 0.5rem;
}

.cons-card li::before {
	content: '\2013';
	color: #dc2626;
	font-weight: 700;
	margin-right: 0.5rem;
}

.pros-card li, .cons-card li {
	list-style: none;
	margin-left: 0;
	padding: 0.25rem 0;
	font-size: 0.9rem;
	color: #44403c;
}

/* ========================================
   VERDICT BOX (REVIEW)
   ======================================== */

.verdict-box {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 241, 242, 0.6), rgba(250, 249, 251, 0.8));
	border: 2px solid rgba(253, 164, 175, 0.3);
	border-radius: 0.75rem;
	padding: 1.5rem;
	overflow: hidden;
}

.verdict-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, #f472b6, #fb923c, #a78bfa);
}

/* ========================================
   JOURNAL SPREAD GALLERY
   ======================================== */

.spread-photo {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid rgba(214, 211, 206, 0.5);
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	aspect-ratio: 4/3;
	background-color: var(--paper-page);
}

.spread-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 0.5rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* ========================================
   NAVIGATION / BREADCRUMBS
   ======================================== */

.breadcrumb-nav {
	font-size: 0.8rem;
	color: #78716c;
}

.breadcrumb-nav a {
	color: #78716c;
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
	color: #be185d;
}

.breadcrumb-nav .separator {
	margin: 0 0.375rem;
	opacity: 0.4;
}

/* ========================================
   NAVIGATION MENU
   ======================================== */

/* Strip default WP menu list styling */
nav ul.menu,
nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul.menu li {
	display: inline-flex;
	align-items: center;
}

nav ul.menu li a {
	color: #57534e;
	text-decoration: none;
	transition: color 0.2s ease;
}

nav ul.menu li a:hover {
	color: var(--text-body);
}

nav ul.menu li.current-menu-item a,
nav ul.menu li.current_page_item a {
	color: var(--text-body);
	font-weight: 500;
}

/* ========================================
   BLOG FILTER TABS
   ======================================== */

.filter-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.375rem 0.875rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
	border: 1px solid rgba(214, 211, 206, 0.5);
	background: rgba(250, 250, 249, 0.8);
	color: #78716c;
	cursor: pointer;
	transition: all 0.2s ease;
}

.filter-tab:hover {
	border-color: rgba(214, 211, 206, 0.8);
	color: #44403c;
}

.filter-tab.active {
	background: var(--text-body);
	color: #fafaf9;
	border-color: var(--text-body);
}

/* ========================================
   READING PROGRESS BAR
   ======================================== */

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(to right, #f472b6, #fb923c);
	z-index: 9998;
	transition: width 0.1s linear;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
	.notebook-holes {
		display: none;
	}
	.margin-line {
		display: none;
	}
	/* Reduce stacked paper on mobile */
	.blog-card {
		box-shadow:
			0 1px 3px rgba(0,0,0,0.04),
			0 4px 12px rgba(0,0,0,0.02),
			2px 2px 0 -1px var(--stack-1),
			2px 2px 0 0 var(--rule-soft);
	}
	.blog-card::before {
		border-width: 0 20px 20px 0;
	}
	.blog-card::after {
		border-width: 0 0 20px 20px;
	}
	/* Reduce tilt on mobile */
	.card-tilt-1, .card-tilt-2, .card-tilt-3,
	.card-tilt-4, .card-tilt-5, .card-tilt-6 {
		--card-rotate: 0deg;
	}
}

/* ── Mobile menu panel ───────────────────────────────────────── */
#mobile-menu-panel ul { width: 100%; }
#mobile-menu-panel li { width: 100%; }
#mobile-menu-panel a {
	display: block;
	width: 100%;
	padding: 0.625rem 0.5rem;
	border-radius: 0.5rem;
	font-family: 'bookmania', Georgia, serif;
	font-size: 1.05rem;
	color: var(--badge-ink-fg);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#mobile-menu-panel a:hover,
#mobile-menu-panel a:focus {
	background-color: color-mix(in srgb, var(--accent-ink) 14%, transparent);
	color: var(--text-body);
}
#mobile-menu-panel .current-menu-item > a,
#mobile-menu-panel .current_page_item > a {
	background-color: color-mix(in srgb, var(--accent-ink) 10%, transparent);
	color: var(--text-body);
}

/* ── Desktop primary nav: make items read clearly as links ──────── */
.site-nav a {
	font-size: 1rem;
	font-family: 'bookmania', Georgia, serif;
	color: var(--badge-ink-fg);
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus {
	color: var(--text-body);
	text-decoration: none;
}
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--text-body);
	font-weight: 500;
}

/* Dot separators between nav items */
.site-nav li { display: flex; align-items: center; }
.site-nav li > a { padding-left: 0.6rem; padding-right: 0.6rem; }
.site-nav li + li::before {
	content: "\2022"; /* • */
	color: color-mix(in srgb, var(--accent-ink) 60%, transparent);
	font-family: Georgia, serif;
	font-size: 0.9em;
	pointer-events: none;
}

/* ── Sticky bar dropdown panel (mobile) — matches header mobile panel ─── */
#sticky-menu-panel ul { width: 100%; }
#sticky-menu-panel li { width: 100%; }
#sticky-menu-panel a {
	display: block;
	width: 100%;
	padding: 0.6rem 0.6rem;
	border-radius: 0.5rem;
	font-family: 'bookmania', Georgia, serif;
	font-size: 1.05rem;
	color: var(--badge-ink-fg);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#sticky-menu-panel a:hover,
#sticky-menu-panel a:focus {
	background-color: color-mix(in srgb, var(--accent-ink) 14%, transparent);
	color: var(--text-body);
}
#sticky-menu-panel .current-menu-item > a,
#sticky-menu-panel .current_page_item > a {
	background-color: color-mix(in srgb, var(--accent-ink) 10%, transparent);
	color: var(--text-body);
}
/* ============================================================
   Retailer CTA button — reusable across review singles.
   Uses theme accent tokens so it matches the design language.
   Added 2026-09-04 (approved by Laura Fowler).
   ============================================================ */
.retailer-button-wrap {
	text-align: center;
	margin: 1.75rem 0;
}
.retailer-button {
	display: inline-block;
	background-color: var(--accent-review, #FDA4AF);
	color: var(--text-body, #1A1A20);
	text-decoration: none;
	font-weight: 600;
	font-family: 'bookmania', serif;
	letter-spacing: .01em;
	padding: 0.75rem 1.75rem;
	border-radius: 9999px;
	border: 1px solid color-mix(in srgb, var(--accent-review) 70%, #000 6%);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-review) 40%, transparent);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.retailer-button:hover,
.retailer-button:focus-visible {
	background-color: color-mix(in srgb, var(--accent-review) 80%, #000 12%);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-review) 50%, transparent);
	color: var(--text-body, #1A1A20);
}
.retailer-button .arrow {
	margin-left: .4rem;
}
/* ============================================================
   Current-setup matrix (about page): role = row, year = column.
   Added 2026-09-04 (approved by Laura). Role + book share a baseline;
   no dotted leaders; consistent rows.
   ============================================================ */
.setup-matrix {
	width: 100%;
}
.setup-row {
	display: grid;
	grid-template-columns: minmax(9rem, 1.1fr) 1.4fr 1.4fr;
	column-gap: 1.25rem;
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--rule-faint, rgba(200,196,214,0.25));
}
.setup-row:last-child {
	border-bottom: none;
}
.setup-head {
	border-bottom: 1px solid var(--rule, rgba(200,196,214,0.6));
	padding-bottom: 0.5rem;
	margin-bottom: 0.15rem;
}
.setup-head .setup-role,
.setup-head .setup-cell {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-body, #1A1A20);
	opacity: 0.55;
	font-family: inherit;
}
.setup-role {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-body, #1A1A20);
	opacity: 0.7;
}
.setup-cell {
	color: var(--text-body, #1A1A20);
	line-height: 1.2;
}

/* Setup matrix visibility (purge-proof; replaces Tailwind hidden/sm:block). */
.setup-mobile { display: none; }
.setup-matrix { display: block; }
@media (max-width: 639px) {
	.setup-matrix { display: none; }
	.setup-mobile { display: block; }
}

/* ============================================================
   Amber (yellow) card + badge variant — added for the About "fun facts"
   card so the four cards vary in color. Approved by Laura 2026-09-04.
   ============================================================ */
.blog-card-coral {
	background: linear-gradient(135deg, rgba(255, 237, 228, 0.85), rgba(250, 249, 251, 0.9));
	border-color: rgba(253, 186, 158, 0.4);
}
.blog-card-coral:hover { border-color: rgba(253, 186, 158, 0.6); }
.badge-coral {
	color: var(--badge-coral-fg);
	background-color: rgba(255, 237, 228, 0.9);
	border-color: rgba(253, 186, 158, 0.6);
}
/* ============================================================
   Green card + badge variant — reserved for a FUTURE post type
   (not yet assigned). Added 2026-09-04 (approved by Laura).
   ============================================================ */
.blog-card-green {
	background: linear-gradient(135deg, rgba(220, 252, 231, 0.8), rgba(250, 249, 251, 0.9));
	border-color: rgba(134, 239, 172, 0.4);
}
.blog-card-green:hover { border-color: rgba(134, 239, 172, 0.6); }
.badge-green {
	color: #15803d;
	background-color: rgba(220, 252, 231, 0.8);
	border-color: rgba(134, 239, 172, 0.6);
}
/* ============================================================
   "What I use" roster list styling. Added 2026-09-04 (approved by Laura).
   Scoped to beat .blog-content ul (disc) on specificity.
   ============================================================ */
.blog-content ul.wiu-list { list-style: none; margin-left: 0; padding-left: 0; }
.blog-content ul.wiu-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--rule-faint, rgba(200,196,214,0.25));
	line-height: 1.4;
	list-style: none;
}
.blog-content ul.wiu-list li:last-child { border-bottom: none; }
.wiu-note {
	color: var(--text-body, #1A1A20);
	opacity: 0.55;
	font-size: 0.9em;
	font-style: italic;
	margin-left: 0.35rem;
}
/* ============================================================
   Hauls entry-type link + chip dot (green). Purge-proof because the
   green Tailwind utilities were absent from the compiled build.
   Added 2026-09-04 (approved by Laura). green = #15803d / #86efac.
   ============================================================ */
.hauls-link { color: #15803d; }
.hauls-link:hover { color: #166534; }
/* the CTA arrow is a rotated box using border-t/border-r; color its border */
.hauls-link-arrow { border-color: #22c55e; }
.hauls-dot { background-color: #4ade80; }
.spread-dot { background-color: #60A5FA; }
/* ============================================================
   Toolkit washi-tape strip on the homepage (links to /what-i-use/).
   Coral/peach so it reads as a meta element, not a post type.
   Added 2026-09-04 (approved by Laura).
   ============================================================ */
.toolkit-tape {
	padding: 0.55rem 1.4rem;
	background: linear-gradient(135deg, rgba(255, 237, 228, 0.55), rgba(253, 186, 158, 0.28));
	border-top: 1px dashed rgba(253, 186, 158, 0.6);
	border-bottom: 1px dashed rgba(253, 186, 158, 0.6);
	text-decoration: none;
	transition: filter 0.2s ease;
}
.toolkit-tape:hover { filter: brightness(0.97); }
.toolkit-tape-text { color: #B45309; }
.toolkit-tape-arrow { border-color: #F97316; }
/* Toolkit review-score links: violet + bold (distinct from the pink product links). Added 2026-09-04. */
.wiu-note a.wiu-review-link {
	color: #6D28D9;
	font-weight: 700;
	text-decoration: none;
}
.wiu-note a.wiu-review-link:hover { color: #5B21B6; }
/* ============================================================
   Search form (search.php + header search). Added 2026-09-04.
   ============================================================ */
.search-input {
	appearance: none;
	border: 1px solid var(--rule, rgba(200,196,214,0.6));
	background: var(--paper-page, #FAF9FB);
	border-radius: 9999px;
	padding: 0.55rem 1.1rem;
	font-size: 0.95rem;
	color: var(--text-body, #1A1A20);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input::placeholder { color: #9CA3AF; }
.search-input:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px rgba(253,164,175,0.25);
}
.search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 9999px;
	color: #fff;
	background: #db2777;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}
.search-submit:hover { background: #be185d; }

/* Header search: a small popover form toggled by the search button. */
.header-search-form {
	display: none;
	align-items: center;
	gap: 0.4rem;
}
.header-search-form.is-open { display: inline-flex; }
.header-search-form .search-input { padding: 0.4rem 0.9rem; font-size: 0.85rem; width: 11rem; }
.header-search-form .search-submit { width: 2rem; height: 2rem; }
/* When a header search form is OPEN, hide the toggle button that opened it
   so there aren't two magnifying glasses (the form has its own submit icon).
   The toggle button is the immediate sibling AFTER the form in both headers. */
.header-search-form.is-open + #sticky-search,
.header-search-form.is-open + #main-header-search {
	display: none;
}
/* Visible × clear/close button inside header search forms. Added 2026-09-04. */
.search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: #9CA3AF;
	cursor: pointer;
	border-radius: 9999px;
	transition: color 0.2s ease, background 0.2s ease;
}
.search-clear:hover {
	color: #4B5563;
	background: rgba(0,0,0,0.05);
}
/* Shared inline text-link style — matches .blog-content a, usable anywhere
   (e.g. the linked "analog laura" in the hero + about story, which live
   OUTSIDE .blog-content). Added 2026-09-04. */
.text-link {
	color: #be185d;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}
.text-link:hover {
	color: #831843;
}
/* Teal variant (footer what-i-use / instagram color-coding). */
.text-link-teal {
	color: #0F766E;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}
.text-link-teal:hover {
	color: #134E4A;
}
/* Footer group divider: subtle vertical rule between page-links and socials.
   Purge-proof. Hidden on mobile (links wrap/stack). Added 2026-09-04. */
.footer-divider {
	display: none;
	width: 1px;
	height: 0.85rem;
	background: rgba(168, 162, 158, 0.55);
	margin: 0 0.25rem;
}
@media (min-width: 640px) {
	.footer-divider { display: inline-block; }
}
/* Footer links: match the top nav (bookmania serif, violet, hover to body).
   Replaces the earlier pink/teal grouped-link footer treatment. 2026-09-04. */
.footer-nav a {
	font-size: 0.95rem;
	font-family: 'bookmania', Georgia, serif;
	color: var(--badge-ink-fg);
	text-decoration: none;
	font-weight: 400;
	transition: color 0.15s ease;
}
.footer-nav a:hover,
.footer-nav a:focus {
	color: var(--text-body);
	text-decoration: none;
}
/* Main-header logo (analog laura mark). Square lilac-swipe PNG; cap the height
   so it reads as a header logo, not a giant block. Added 2026-09-04. */
.site-logo {
	height: 240px;
	width: auto;
	max-width: 100%;
	margin-left: -0.5rem; /* nudge the swipe's left padding back to the edge */
}
@media (min-width: 640px) {
	.site-logo { height: 300px; }
}

/* Rotating phrase: deepen the Caveat pink (script strokes read thin). 2026-09-04 */
#rotating-phrase { color: #D6336C; }
/* Favorites list (About card) — label -> value rows, always visible at ALL widths.
   Split out from .setup-matrix, which is display:none on mobile (that hid the
   whole favorites card on phones). 2026-09-04. */
.favorites-list {
	width: 100%;
	display: block;
}
.favorites-row {
	display: grid;
	grid-template-columns: minmax(6rem, 0.9fr) 1.6fr;
	column-gap: 1rem;
	align-items: baseline;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--rule-faint, rgba(200,196,214,0.25));
}
.favorites-row:last-child { border-bottom: none; }