/* Self-hosted fonts (Fraunces, Nunito, Caveat), latin + latin-ext, variable weight. */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('/fonts/caveat-normal-latin.woff2') format('woff2');
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 600 800;
	font-display: swap;
	src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('/fonts/fraunces-normal-latin.woff2') format('woff2');
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('/fonts/nunito-normal-latin.woff2') format('woff2');
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
	Zero Pooches Given — stylesheet
	Mobile first. Scrapbook pieces (tape, stickers, notes, torn paper, doodles) are all CSS and inline SVG.
*/

:root {
	--cream: #FFF8F0;
	--cream-deep: #FDEEDC;
	--blush: #F9CDD6;
	--blush-deep: #F4A7B9;
	--lavender: #D6C8F0;
	--lavender-deep: #B9A3E3;
	--buttercup: #FFD97A;
	--mint: #C6EBDD;
	--raspberry: #D8477A;
	--raspberry-deep: #B93362;
	--cocoa: #4A2C22;
	--cocoa-soft: #7A5A4E;
	--paper: #FFFFFF;
	--display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--hand: 'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
	--shadow-sm: 0 2px 6px rgba(74, 44, 34, 0.10);
	--shadow: 0 8px 18px rgba(74, 44, 34, 0.14);
	--shadow-lg: 0 16px 36px rgba(74, 44, 34, 0.18);
	--gutter: 18px;
	--topbar: 56px;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	background: var(--cream);
	background-image: radial-gradient(rgba(74, 44, 34, 0.09) 0.8px, transparent 0.8px);
	background-size: 14px 14px;
	color: var(--cocoa);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--raspberry-deep); } /* deep raspberry reads at 5.4:1 on cream; the lighter raspberry stays for large handwritten links and accents */
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: "SOFT" 100; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
.hand { font-family: var(--hand); line-height: 1.1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 3px; border-radius: 4px; }

.skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--cocoa); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- preview strip (placeholder build) ---------- */
.preview-strip {
	background: repeating-linear-gradient(135deg, var(--buttercup) 0 14px, #FFE9A8 14px 28px);
	color: var(--cocoa); font-size: 0.78rem; font-weight: 800; text-align: center; padding: 6px var(--gutter);
	letter-spacing: 0.02em;
}
.preview-strip[hidden] { display: none; }

/* ---------- top bar ---------- */
.topbar {
	position: sticky; top: 0; z-index: 40;
	height: var(--topbar);
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 0 var(--gutter);
	background: rgba(255, 248, 240, 0.88);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(74, 44, 34, 0.06);
}
.brand {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--display); font-weight: 800; font-variation-settings: "SOFT" 100;
	font-size: 1.05rem; color: var(--cocoa); text-decoration: none; white-space: nowrap;
}
.brand svg { width: 24px; height: 24px; flex-shrink: 0; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar .btn-tiktok { display: none; }
.menu-btn {
	width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
	display: grid; place-items: center; cursor: pointer; margin-right: -8px;
}
.menu-btn span { display: block; width: 22px; height: 2.5px; background: var(--cocoa); border-radius: 2px; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2.5px; background: var(--cocoa); border-radius: 2px; transition: transform .2s ease; }
.menu-btn span::before { top: -7px; } .menu-btn span::after { top: 7px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- full-screen menu ---------- */
.menu {
	position: fixed; inset: 0; z-index: 50;
	background: var(--cream);
	background-image: radial-gradient(rgba(74, 44, 34, 0.09) 0.8px, transparent 0.8px);
	background-size: 14px 14px;
	padding: 18px var(--gutter) 40px;
	overflow-y: auto;
	display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.menu-close { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 1.8rem; line-height: 1; color: var(--cocoa); margin-right: -8px; }
.menu-title { font-family: var(--hand); font-size: 1.5rem; color: var(--cocoa-soft); margin: 26px 0 6px; transform: rotate(-2deg); display: inline-block; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-list a {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--hand); font-size: 2rem; font-weight: 700; color: var(--cocoa); text-decoration: none;
	padding: 8px 6px; border-radius: 12px; line-height: 1;
}
.menu-list a:hover { background: rgba(249, 205, 214, 0.4); }
.menu-list a .doodle { position: static; width: 30px; height: 30px; flex: 0 0 30px; display: inline-block; pointer-events: none; }
.menu-list a .doodle svg { width: 100%; height: 100%; display: block; }
.menu-list a .label { flex: 1 1 auto; min-width: 0; }
.menu-list a .soon {
	font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--buttercup); color: var(--cocoa); padding: 4px 9px; border-radius: 999px; transform: rotate(-6deg);
}
.menu-list a.is-current { color: var(--raspberry); }
.menu-foot { margin-top: auto; padding-top: 30px; display: grid; gap: 12px; justify-items: start; }
.menu-foot .hand { color: var(--cocoa-soft); font-size: 1.2rem; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 800; font-size: 1rem; line-height: 1;
	padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	min-height: 48px;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-tiktok { background: var(--cocoa); color: #fff; box-shadow: 0 8px 20px rgba(74, 44, 34, 0.28); }
.btn-tiktok:hover { background: #3a2119; transform: translateY(-2px) rotate(-1deg); }
.btn-small { padding: 10px 16px; font-size: 0.85rem; min-height: 40px; }
.handlink {
	font-family: var(--hand); font-size: 1.45rem; font-weight: 700; color: var(--raspberry); text-decoration: none;
	border-bottom: 3px solid var(--blush-deep); line-height: 1.05; display: inline-block; padding-bottom: 1px;
	transition: transform .18s ease;
}
.handlink:hover { transform: rotate(-1.5deg); border-bottom-color: var(--raspberry); }

/* ---------- scrapbook pieces ---------- */
.tape {
	position: absolute; width: 64px; height: 20px; z-index: 3;
	background-color: rgba(214, 200, 240, 0.82);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.38) 0 3px, transparent 3px 7px);
	box-shadow: 0 1px 2px rgba(74, 44, 34, 0.12);
	pointer-events: none;
}
.tape-pink { background-color: rgba(249, 205, 214, 0.88); }
.tape-yellow { background-color: rgba(255, 217, 122, 0.88); }
.tape-tl { top: -9px; left: 14px; transform: rotate(-32deg); }
.tape-tr { top: -9px; right: 14px; transform: rotate(32deg); }
.tape-top { top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

.pola {
	position: relative; background: var(--paper); padding: 8px 8px 0; margin: 0;
	box-shadow: var(--shadow); border-radius: 3px;
	display: flex; flex-direction: column;
	transition: transform .28s cubic-bezier(.2,.8,.3,1.1), box-shadow .28s ease;
}
.pola figcaption { margin: 0; }
.pola .pola-img { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; border-radius: 2px; background: var(--blush); position: relative; }
.pola .pola-img picture { position: absolute; inset: 0; display: block; }
.pola .pola-img img, .pola .pola-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* natural proportions: the image sets the height (used by the phone scrapbook) */
.pola.natural .pola-img { flex: none; }
.pola.natural .pola-img picture, .pola.natural .pola-img img, .pola.natural .pola-img video { position: static; height: auto; }
.pola.natural .pola-img video { aspect-ratio: 9 / 16; }
.pola .pola-cap { font-family: var(--hand); font-size: 1.25rem; font-weight: 700; color: var(--cocoa); line-height: 1; padding: 9px 2px 10px; text-align: center; text-wrap: balance; }

.momnote {
	position: relative;
	font-family: var(--hand); font-size: 1.3rem; line-height: 1.12; color: var(--cocoa-soft);
	background: var(--buttercup); padding: 12px 14px 13px; border-radius: 2px;
	box-shadow: 0 8px 16px rgba(74, 44, 34, 0.14);
}
.momnote::before { content: "Mom's Note: "; font-weight: 700; color: var(--cocoa); }
.momnote::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
	border-style: solid; border-width: 0 0 16px 16px; border-color: transparent transparent var(--cream) transparent;
	filter: drop-shadow(-1px -1px 1px rgba(74, 44, 34, 0.12));
}

.torn {
	font-family: var(--hand); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--cocoa);
	background: var(--paper); padding: 13px 16px 14px; box-shadow: var(--shadow-sm);
	clip-path: polygon(0 4%, 6% 0, 15% 3%, 28% 0, 40% 4%, 55% 1%, 68% 4%, 80% 0, 92% 3%, 100% 1%, 100% 96%, 90% 100%, 78% 97%, 64% 100%, 50% 96%, 36% 100%, 22% 97%, 10% 100%, 0 96%);
}
.torn-lav { background: var(--lavender); }
.torn-pink { background: var(--blush); }
.torn-mint { background: var(--mint); }

.sticker {
	position: absolute; z-index: 4;
	display: grid; place-items: center; text-align: center;
	border-radius: 50%; padding: 8px;
	font-family: var(--hand); font-weight: 700; line-height: 0.95; color: #fff; background: var(--raspberry);
	box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(74, 44, 34, 0.16);
	pointer-events: none;
}
.sticker-new { background: var(--buttercup); color: var(--cocoa); }
.sticker-shop { background: var(--lavender-deep); }
.sticker-link { pointer-events: auto; text-decoration: none; }
.sticker-link:hover { transform: scale(1.06) rotate(0deg) !important; }

.mood {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--paper); border: 2px dashed var(--blush-deep); border-radius: 999px;
	padding: 5px 13px 6px; font-family: var(--hand); font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--cocoa);
	box-shadow: var(--shadow-sm);
}
.mood b { font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raspberry-deep); }

.doodle { position: absolute; pointer-events: none; z-index: 1; }
.spark { position: absolute; color: var(--buttercup); pointer-events: none; z-index: 3; animation: twinkle 2.6s ease-in-out infinite; }
.spark svg { width: 100%; height: 100%; display: block; }

/* ---------- layout ---------- */
main { display: block; }
.section { padding: 26px var(--gutter); position: relative; overflow-x: clip; }
.wrap { max-width: 1080px; margin: 0 auto; position: relative; }
.lead-hand {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-family: var(--hand); font-size: 1.75rem; font-weight: 700; color: var(--cocoa); line-height: 1; margin-bottom: 10px;
}
.lead-hand .arrow { width: 44px; height: 26px; color: var(--raspberry); }

/* ---------- hero ---------- */
.hero { padding-top: 16px; padding-bottom: 20px; overflow: hidden; }
.hero .wrap { display: grid; gap: 22px; }
.hero-frame-wrap { position: relative; padding: 14px 10px 10px; }
.hero-frame {
	position: relative; background: var(--paper); padding: 9px 9px 9px;
	box-shadow: var(--shadow-lg); transform: rotate(-2deg); border-radius: 3px;
	max-width: 440px; margin: 0 auto;
}
.hero-photo { aspect-ratio: 4 / 4.7; overflow: hidden; background: var(--blush); border-radius: 2px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hero-hi {
	position: absolute; top: -14px; right: -8px; z-index: 5;
	font-family: var(--hand); font-size: 2rem; font-weight: 700; color: var(--raspberry); transform: rotate(7deg);
	text-shadow: 0 0 8px var(--cream), 0 0 8px var(--cream), 0 0 10px var(--cream);
}
.hero .sticker-proud { width: 92px; height: 92px; right: -16px; bottom: -14px; transform: rotate(10deg); font-size: 1rem; }
.tiara-btn {
	position: absolute; top: -26px; left: 22px; z-index: 6;
	width: 64px; height: 50px; border: 0; background: transparent; cursor: pointer; padding: 0;
	transform: rotate(-12deg); transition: transform .2s ease;
}
.tiara-btn:hover { transform: rotate(-12deg) scale(1.08); }
.tiara-btn svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(74, 44, 34, 0.2)); }
.hero-mood { position: absolute; left: 4px; bottom: 2px; z-index: 5; transform: rotate(-5deg); }
.hero-words { text-align: center; display: grid; gap: 14px; justify-items: center; }
.hero-words h1 { font-size: clamp(2rem, 8.5vw, 3.1rem); font-weight: 800; }
.hero-words h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.hero-words .intro { font-size: 1.02rem; color: var(--cocoa-soft); max-width: 34ch; }
.hero-words .handle { font-family: var(--hand); font-size: 1.25rem; color: var(--cocoa-soft); }

/* ---------- videos ---------- */
.videos { padding-top: 12px; padding-bottom: 10px; }
.video-row {
	display: flex; gap: 14px; overflow-x: auto; padding: 22px 4px 18px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter);
	scrollbar-width: none; list-style: none;
}
.video-row::-webkit-scrollbar { display: none; }
.video-row li { flex: 0 0 150px; scroll-snap-align: start; }
.video-card {
	position: relative; display: block; aspect-ratio: 9 / 15; border-radius: 14px; overflow: visible;
	background: linear-gradient(170deg, var(--lavender), var(--blush));
	box-shadow: var(--shadow); text-decoration: none; color: var(--cocoa);
	transition: transform .18s ease;
}
.video-card:hover { transform: translateY(-3px) rotate(0deg) !important; }
.video-row li:nth-child(odd) .video-card { transform: rotate(-2deg); }
.video-row li:nth-child(even) .video-card { transform: rotate(1.8deg); }
.video-card .play {
	position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
	width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center;
	box-shadow: var(--shadow-sm);
}
.video-card .play svg { width: 18px; height: 18px; color: var(--raspberry); margin-left: 3px; }
.video-card .vcap {
	position: absolute; left: 8px; right: 8px; bottom: 10px;
	font-family: var(--hand); font-size: 1.1rem; font-weight: 700; line-height: 1.05;
	background: rgba(255, 255, 255, 0.9); padding: 5px 8px; border-radius: 6px; text-align: center;
}
.video-card .sticker-new { width: 46px; height: 46px; top: -12px; right: -10px; transform: rotate(12deg); font-size: 0.95rem; }
.video-card.needs-link .play { opacity: 0.55; }
.needs-link-tag {
	position: absolute; top: 10px; left: 8px; right: 8px; z-index: 2;
	font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
	background: rgba(255, 255, 255, 0.92); color: var(--cocoa-soft); border: 1.5px dashed var(--cocoa-soft);
	padding: 4px 6px; border-radius: 6px; text-align: center;
}
.videos .more { text-align: right; margin-top: -4px; }
.videos-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 6px 4px 4px; }
.videos-soon[hidden] { display: none; }
.videos-soon .torn { max-width: 300px; transform: rotate(-1.5deg); }
.videos-soon .torn small { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); margin-top: 6px; line-height: 1.3; }
.videos-soon .coming { font-family: var(--hand); font-size: 1.15rem; color: var(--cocoa-soft); line-height: 1.15; max-width: 260px; }
.videos-soon .coming span { color: var(--cocoa); font-weight: 700; }

/* ---------- collage ---------- */
.collage { padding-top: 10px; }
/* Phones: one staggered column. Polaroids are about 78% wide, alternate left and right, keep natural proportions. */
.scrapbook {
	display: flex; flex-direction: column; gap: 10px;
	position: relative; padding: 14px 0 6px;
}
.scrapbook > .pola, .scrapbook > .momnote { transform: rotate(var(--r, 0deg)); }
.scrapbook > .pola { width: 78%; max-width: 360px; z-index: 2; }
.scrapbook > .pola:nth-child(odd) { align-self: flex-start; margin-left: 3%; }
.scrapbook > .pola:nth-child(even) { align-self: flex-end; margin-right: 3%; }
.scrapbook > .pola + .pola { margin-top: -6px; } /* frames still kiss at the rotated corners, but the next tape and corner stay clear of the caption text above */
.scrapbook > .momnote { width: 72%; max-width: 320px; align-self: center; z-index: 3; margin: 2px 0; }
.scrapbook .pola:hover { z-index: 5; }
.scrapbook .scrap-link { align-self: flex-start; padding: 14px 0 0 4px; }
.slot-1 { --r: -3deg; } .slot-2 { --r: 3deg; } .slot-3 { --r: -2deg; } .slot-4 { --r: 2deg; } .slot-5 { --r: -3deg; }
.slot-6 { --r: 3deg; } .slot-7 { --r: -3deg; } .slot-8 { --r: -4deg; } .slot-9 { --r: 3deg; } .slot-10 { --r: -2deg; }


.video-pola .pola-img { position: relative; }
.video-pola .play-btn {
	position: absolute; inset: 0; width: 100%; border: 0; background: rgba(74, 44, 34, 0.18); cursor: pointer; display: grid; place-items: center;
}
.video-pola .play-btn span { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.video-pola .play-btn svg { width: 22px; height: 22px; color: var(--raspberry); margin-left: 4px; }
.video-pola .play-btn[hidden] { display: none; }

/* ---------- quotes ---------- */
.quotes { padding-top: 24px; }
.quote-wall { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
.quote-wall .torn { max-width: 230px; }
.quote-wall .torn:nth-child(4n+1) { transform: rotate(-2deg); }
.quote-wall .torn:nth-child(4n+2) { transform: rotate(1.5deg); }
.quote-wall .torn:nth-child(4n+3) { transform: rotate(-1deg); }
.quote-wall .torn:nth-child(4n+4) { transform: rotate(2.5deg); }

/* ---------- about ---------- */
.about { padding-top: 30px; }
.about .wrap { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.about .pola { --r: -4deg; transform: rotate(var(--r)); aspect-ratio: 1 / 1.22; max-width: 190px; width: 100%; margin-left: 6px; }
.about .pola .pola-cap { font-size: 1.15rem; white-space: nowrap; }
.about-words .paw { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--raspberry); }
.about-words { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.about-words .lead-hand { margin-bottom: 0; }
.about-words p { color: var(--cocoa-soft); font-size: 0.98rem; max-width: 42ch; }
.about-words .momnote { transform: rotate(-2deg); font-size: 1.15rem; max-width: 300px; }

/* ---------- follow ---------- */
.follow { padding-top: 34px; padding-bottom: 36px; }
.follow-paper {
	position: relative; background: var(--lavender); padding: 26px 20px 24px; text-align: center;
	box-shadow: var(--shadow); transform: rotate(-1deg); max-width: 520px; margin: 0 auto;
	display: grid; gap: 12px; justify-items: center;
}
.follow-paper .tape { background-color: rgba(249, 205, 214, 0.9); }
.follow-paper h2 { font-family: var(--hand); font-size: 2rem; font-weight: 700; }
.follow-paper .small { font-size: 0.9rem; color: var(--cocoa-soft); }
.follow-paper .small a { color: var(--cocoa); font-weight: 800; }
.follow .sticker-shop { width: 92px; height: 92px; right: -14px; top: -30px; transform: rotate(12deg); font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--cocoa); color: var(--cream); padding: 30px var(--gutter) 110px; text-align: center; }
.site-footer .wrap { display: grid; gap: 10px; justify-items: center; }
.site-footer .paws { display: flex; gap: 10px; opacity: 0.45; }
.site-footer .paws svg { width: 22px; height: 22px; }
.site-footer .paws svg:nth-child(even) { transform: rotate(-20deg) translateY(-6px); }
.site-footer .name { font-family: var(--display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 1.3rem; }
.site-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 0.85rem; font-weight: 700; }
.site-footer .links a { color: var(--cream); text-decoration: none; opacity: 0.85; }
.site-footer .links a:hover { opacity: 1; text-decoration: underline; }
.site-footer .qotd { font-family: var(--hand); font-size: 1.35rem; color: var(--blush); max-width: 40ch; margin-top: 6px; }
.site-footer .typed { font-family: var(--hand); font-size: 1.05rem; opacity: 0.7; }
.site-footer .placeholder-note { font-size: 0.72rem; opacity: 0.55; max-width: 44ch; }

/* ---------- floating tiktok pill (phones) ---------- */
.float-tiktok {
	position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	opacity: 0; transform: translateY(90px); pointer-events: none;
	transition: opacity .25s ease, transform .3s ease;
}
.float-tiktok.show { opacity: 1; transform: none; pointer-events: auto; animation: wobble 6s ease-in-out infinite; }

/* ---------- toast ---------- */
.toast {
	position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px);
	z-index: 60; background: var(--buttercup); color: var(--cocoa); font-family: var(--hand); font-size: 1.25rem; font-weight: 700;
	padding: 10px 18px; border-radius: 2px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- hearts burst (tiara easter egg) ---------- */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.burst span {
	position: absolute; left: var(--x); top: var(--y); font-size: var(--s);
	animation: fly 1.3s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d);
	opacity: 0;
}

/* ---------- animation ---------- */
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(18deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 48% { transform: rotate(0); } 52% { transform: rotate(-4deg); } 56% { transform: rotate(4deg); } 60% { transform: rotate(0); } }
@keyframes fly {
	0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--rot)); }
}
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
	.reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- tablet and up ---------- */
@media (min-width: 760px) {
	:root { --gutter: 32px; --topbar: 64px; }
	body { font-size: 17px; }
	.brand { font-size: 1.2rem; }
	.topbar .btn-tiktok { display: inline-flex; }
	.float-tiktok { display: none; }
	.site-footer { padding-bottom: 40px; }

	.hero { padding-top: 28px; padding-bottom: 36px; }
	.hero .wrap { grid-template-columns: minmax(300px, 440px) 1fr; gap: 40px; align-items: center; }
	.hero-words { text-align: left; justify-items: start; }
	.hero-words h1 { font-size: clamp(2.6rem, 4.6vw, 3.6rem); }
	.hero-words .intro { font-size: 1.1rem; max-width: 38ch; }

	.video-row li { flex: 0 0 176px; }

	.scrapbook { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 12px; padding: 16px 10px 8px; }
	.scrapbook > .pola, .scrapbook > .momnote, .scrapbook > .pola:nth-child(odd), .scrapbook > .pola:nth-child(even) { width: auto; max-width: none; margin: 0; align-self: stretch; }
	.scrapbook > .pola + .pola { margin-top: 0; }
	.scrapbook > .momnote { align-self: center; }
	.scrapbook .scrap-link { grid-column: 1 / -1; align-self: center; justify-self: start; padding: 10px 0 0; }
	.scrapbook .pola.natural .pola-img { flex: 1 1 auto; }
	.scrapbook .pola.natural .pola-img picture, .scrapbook .pola.natural .pola-img img, .scrapbook .pola.natural .pola-img video { position: absolute; height: 100%; }
	.slot-1 { grid-column: 1 / 5; grid-row: 1 / 7; --r: -3deg; }
	.slot-2 { grid-column: 5 / 8; grid-row: 3 / 11; --r: 3deg; }
	.slot-3 { grid-column: 7 / 10; grid-row: 1 / 3; --r: 2deg; }
	.slot-4 { grid-column: 8 / 13; grid-row: 2 / 7; --r: -2deg; }
	.slot-5 { grid-column: 9 / 13; grid-row: 8 / 12; --r: 3deg; }
	.slot-6 { grid-column: 1 / 4; grid-row: 8 / 15; --r: -2deg; }
	.slot-7 { grid-column: 5 / 8; grid-row: 11 / 18; --r: 3deg; }
	.slot-8 { grid-column: 8 / 13; grid-row: 12 / 16; --r: -3deg; }
	.slot-9 { grid-column: 8 / 13; grid-row: 16 / 21; --r: 2deg; }
	.slot-10 { grid-column: 1 / 4; grid-row: 15 / 22; --r: 3deg; }
	.scrap-link { grid-row: 19; }
	.scrapbook[data-count="10"] .scrap-link { grid-column: 5 / 8; grid-row: 19 / 22; align-self: end; justify-self: center; padding: 0 0 10px; }

	.about .wrap { grid-template-columns: 200px 1fr; gap: 30px; align-items: center; }
	.about .pola { max-width: 200px; margin-left: 0; }
	.about .pola .pola-cap { font-size: 1.25rem; }
	.follow-paper { padding: 34px 40px 30px; }
}

@media (min-width: 1024px) {
	.hero-words h1 { font-size: 3.8rem; }
	.video-row { justify-content: flex-start; }
	.video-row li { flex: 0 0 190px; }
}

/* =====================================================================
   Meet Poochie page
   ===================================================================== */
.meet-intro { padding-top: 22px; padding-bottom: 10px; }
.meet-intro .wrap { display: grid; gap: 26px; align-items: center; }
.meet-intro .pola { --r: -3deg; transform: rotate(var(--r)); max-width: 340px; margin: 0 auto; width: 100%; }
.meet-intro .pola .pola-img { aspect-ratio: 4 / 5; }
.meet-intro .pola .pola-cap { font-size: 1.35rem; }
.meet-words { display: grid; gap: 14px; justify-items: center; text-align: center; }
.meet-words .kicker { font-family: var(--hand); font-size: 1.6rem; font-weight: 700; color: var(--raspberry); transform: rotate(-2deg); }
.meet-words h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 800; }
.meet-words h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.meet-words p { color: var(--cocoa-soft); font-size: 1.05rem; max-width: 36ch; }

/* essentials strip */
.essentials { padding-top: 18px; }
.essentials .lead-hand { margin-bottom: 14px; }
.ess-notes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; margin-top: 18px; }
.ess-notes .momnote { max-width: 300px; transform: rotate(-1.5deg); }
.ess-notes .torn { max-width: 330px; transform: rotate(1deg); }
.spec-wall { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.spec { font-family: var(--hand); font-size: 1.3rem; line-height: 1.05; padding: 12px 16px 13px; }
.spec b { display: block; font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cocoa-soft); margin-bottom: 4px; }
.spec-wall .torn:nth-child(5n+1) { transform: rotate(-2deg); }
.spec-wall .torn:nth-child(5n+2) { transform: rotate(1.5deg); }
.spec-wall .torn:nth-child(5n+3) { transform: rotate(-1deg); }
.spec-wall .torn:nth-child(5n+4) { transform: rotate(2.5deg); }
.spec-wall .torn:nth-child(5n+5) { transform: rotate(-1.5deg); }

/* chapters */
.chapters { padding-top: 10px; display: grid; gap: 10px; }
.chapter { padding: 22px var(--gutter); position: relative; overflow-x: clip; }
.chapter .wrap { display: grid; gap: 22px; align-items: center; }
.chapter .pola { --r: -3deg; transform: rotate(var(--r)); max-width: 300px; width: 100%; margin: 0 auto; }
.chapter:nth-child(even) .pola { --r: 3deg; }
.chapter .pola .pola-img { aspect-ratio: 4 / 4.4; }
.chapter .pola .pola-img.wide { aspect-ratio: 4 / 3.2; }
.chapter-words { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.chapter-words .lead-hand { margin-bottom: 0; font-size: 1.9rem; }
.chapter-words .lead-hand .num { font-family: var(--body); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raspberry-deep); background: var(--blush); padding: 4px 9px; border-radius: 999px; }
.chapter-words p { color: var(--cocoa); font-size: 1.02rem; max-width: 46ch; }
.chapter-words .momnote { transform: rotate(-2deg); font-size: 1.2rem; max-width: 320px; }
.chapter:nth-child(even) .chapter-words .momnote { transform: rotate(1.5deg); }
.chapter .doodle { opacity: 0.9; }

/* requirements */
.require { padding-top: 26px; }
.require-paper {
	position: relative; background: var(--lavender); padding: 26px 22px 24px; max-width: 560px; margin: 0 auto;
	box-shadow: var(--shadow); transform: rotate(-1deg);
}
.require-paper .lead-hand { margin-bottom: 12px; }
.require-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.require-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--hand); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--cocoa); }
.require-list li .box { flex-shrink: 0; width: 22px; height: 22px; border: 2.5px solid var(--cocoa); border-radius: 5px; background: #fff; display: grid; place-items: center; margin-top: 2px; }
.require-list li .box svg { width: 16px; height: 16px; color: var(--raspberry); }
.require-list li small { font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); display: block; margin-top: 2px; }

/* note from mom */
.from-mom { padding-top: 34px; padding-bottom: 40px; }
.from-mom .wrap { display: grid; gap: 24px; align-items: start; }
/* vintage postcard: cream paper with a faint texture, blush border, stamp and cancellation on the right (below the message on phones) */
.postcard {
	position: relative; width: 100%; max-width: 680px; margin: 0 auto;
	background-color: #FFF6E6;
	background-image:
		repeating-linear-gradient(0deg, rgba(74, 44, 34, 0.028) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(90deg, rgba(74, 44, 34, 0.02) 0 1px, transparent 1px 9px),
		radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.55), transparent 55%),
		radial-gradient(ellipse at 90% 90%, rgba(214, 200, 240, 0.22), transparent 50%);
	border: 3px solid var(--blush); border-radius: 10px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 30px rgba(74, 44, 34, 0.18), 0 2px 6px rgba(74, 44, 34, 0.08);
	transform: rotate(-1.2deg);
	padding: 22px 20px 20px;
	display: grid; gap: 18px;
}
.postcard::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(249, 205, 214, 0.7); border-radius: 7px; pointer-events: none; }
.postcard-message { position: relative; z-index: 1; min-width: 0; }
.postcard h2 { font-family: var(--hand); font-size: 2.1rem; font-weight: 700; color: var(--cocoa); margin: 0 0 10px; line-height: 1; }
.postcard p { font-family: var(--hand); font-size: 1.45rem; line-height: 1.22; color: var(--cocoa); margin: 0 0 12px; max-width: 34ch; }
.postcard p.love { font-size: 1.6rem; color: var(--raspberry-deep); transform: rotate(-1.5deg); display: inline-block; margin-top: 4px; }
.postcard p.love b { font-weight: 700; }
.postcard .sig { font-family: var(--hand); font-size: 1.35rem; color: var(--cocoa-soft); margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.postcard .sig-heart { width: 20px; height: 20px; flex: none; transform: rotate(-12deg) translateY(-2px); }
.postcard-side { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; }
.stamp-corner { position: relative; display: flex; justify-content: flex-end; min-height: 78px; }
.stamp {
	position: relative; width: 60px; height: 72px; display: grid; place-items: center; align-content: center; gap: 2px;
	background: var(--buttercup); color: var(--cocoa); transform: rotate(4deg);
	box-shadow: 0 2px 4px rgba(74, 44, 34, 0.14);
	border: 4px solid #fff; outline: 2px dotted rgba(255, 255, 255, 0.95); outline-offset: -2px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.38) 0.9px, transparent 1px); background-size: 7px 7px;
}
.stamp svg { width: 26px; height: 26px; }
.stamp span { font-family: var(--body); font-size: 0.42rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cocoa-soft); }
.cancel { position: absolute; right: 30px; top: -6px; width: 128px; height: 74px; opacity: 0.55; pointer-events: none; }
.address { display: grid; gap: 15px; padding-top: 4px; }
.address .to { font-family: var(--hand); font-size: 1.3rem; color: var(--cocoa-soft); line-height: 1; }
.address i { display: block; height: 0; border-bottom: 1.5px solid var(--lavender); }
@media (max-width: 759px) {
	.postcard { padding: 20px 16px 18px; }
	.postcard-side { grid-template-columns: 1fr auto; align-items: end; }
	.postcard-side .address { order: -1; align-self: end; padding-bottom: 6px; gap: 12px; }
	.stamp-corner { min-height: 0; }
	.cancel { display: none; }
}
@media (min-width: 760px) {
	.postcard { grid-template-columns: 1fr 190px; gap: 26px; padding: 26px 26px 24px; }
	.postcard-side { border-left: 2px dashed rgba(185, 163, 227, 0.5); padding-left: 22px; }
}
.from-mom .pola { --r: -4deg; transform: rotate(var(--r)); max-width: 220px; margin: 0 auto; width: 100%; }
.from-mom .pola .pola-img { aspect-ratio: 1 / 1.15; }

/* page end */
.meet-end { padding-top: 10px; padding-bottom: 40px; text-align: center; }
.meet-end .wrap { display: grid; gap: 14px; justify-items: center; }
.meet-end .lead-hand { justify-content: center; margin-bottom: 0; }

@media (min-width: 760px) {
	.meet-intro { padding-top: 36px; padding-bottom: 20px; }
	.meet-intro .wrap { grid-template-columns: 360px 1fr; gap: 44px; }
	.meet-words { justify-items: start; text-align: left; }
	.meet-words h1 { font-size: clamp(2.8rem, 4.6vw, 3.8rem); }
	.chapter .wrap { grid-template-columns: 320px 1fr; gap: 44px; }
	.chapter:nth-child(even) .wrap { grid-template-columns: 1fr 320px; }
	.chapter:nth-child(even) .pola { order: 2; }
	.chapter .pola { max-width: 320px; }
	.from-mom .wrap { grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
	.require-paper { padding: 32px 36px 30px; }
}

/* =====================================================================
   Work With Poochie page
   ===================================================================== */
.work-intro { padding-top: 22px; padding-bottom: 8px; }
.work-intro .wrap { display: grid; gap: 24px; align-items: center; }
.work-intro .pola { --r: 3deg; transform: rotate(var(--r)); max-width: 320px; margin: 0 auto; width: 100%; }
.work-intro .pola .pola-img { aspect-ratio: 4 / 3.6; }
.work-words { display: grid; gap: 12px; justify-items: center; text-align: center; }
.work-words .kicker { font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: var(--raspberry); transform: rotate(-2deg); }
.work-words h1 { font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; }
.work-words h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.work-words p { color: var(--cocoa-soft); font-size: 1.02rem; max-width: 44ch; }
.work-words .momnote { transform: rotate(-1.5deg); font-size: 1.15rem; max-width: 320px; }

.fits { padding-top: 16px; }
.fits .lead-hand { margin-bottom: 12px; }
.fit-wall { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.fit { font-family: var(--hand); font-size: 1.3rem; line-height: 1.05; padding: 12px 16px 13px; max-width: 260px; }
.fit small { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); margin-top: 5px; line-height: 1.3; }
.fit-wall .torn:nth-child(4n+1) { transform: rotate(-2deg); }
.fit-wall .torn:nth-child(4n+2) { transform: rotate(1.5deg); }
.fit-wall .torn:nth-child(4n+3) { transform: rotate(-1deg); }
.fit-wall .torn:nth-child(4n+4) { transform: rotate(2deg); }

.contact { padding-top: 30px; padding-bottom: 40px; }
.contact .wrap { display: grid; gap: 26px; align-items: start; }
.contact-side { display: grid; gap: 14px; justify-items: start; }
.contact-side .lead-hand { margin-bottom: 0; }
.contact-side p { color: var(--cocoa-soft); font-size: 0.98rem; max-width: 40ch; }
.contact-side .email-line { font-family: var(--hand); font-size: 1.35rem; color: var(--cocoa); }
.contact-side .email-line a { color: var(--raspberry); text-decoration: none; border-bottom: 3px solid var(--blush-deep); }
.soon-tag {
	display: inline-block; font-family: var(--body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--buttercup); color: var(--cocoa); padding: 6px 12px; border-radius: 999px; transform: rotate(-2deg);
}
.contact-side .pola { --r: -4deg; transform: rotate(var(--r)); max-width: 200px; width: 100%; }
.contact-side .pola .pola-img { aspect-ratio: 1 / 1.1; }

.contact-paper {
	position: relative; background: var(--paper); padding: 26px 20px 24px; box-shadow: var(--shadow); transform: rotate(-0.6deg);
	border-radius: 3px;
}
.contact-paper .tape { top: -10px; }
.contact-form { display: grid; gap: 14px; }
.contact-form[hidden] { display: none; }
.contact-form label { display: grid; gap: 6px; font-family: var(--hand); font-size: 1.3rem; font-weight: 700; color: var(--cocoa); line-height: 1; }
.contact-form input, .contact-form textarea {
	width: 100%; font-family: var(--body); font-size: 1rem; color: var(--cocoa);
	background: var(--cream); border: 2px solid transparent; border-radius: 10px; padding: 12px 14px;
	transition: border-color .15s ease, background .15s ease;
}
.contact-form input:hover, .contact-form textarea:hover { background: var(--cream-deep); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--lavender-deep); background: #fff; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .row { display: grid; gap: 14px; }
.contact-form .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.btn-primary { background: #C9406F; color: #fff; box-shadow: 0 8px 20px rgba(201, 64, 111, 0.3); } /* a touch deeper than raspberry: white text reads at 4.7:1, AA for normal text */
.btn-primary:hover { background: var(--raspberry-deep); transform: translateY(-2px) rotate(-1deg); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.contact-notice { font-family: var(--hand); font-size: 1.15rem; color: var(--cocoa-soft); line-height: 1.15; }
.contact-notice[hidden] { display: none; }
.contact-form .fine { font-size: 0.78rem; color: var(--cocoa-soft); }

@media (min-width: 760px) {
	.work-intro { padding-top: 36px; }
	.work-intro .wrap { grid-template-columns: 1fr 340px; gap: 44px; }
	.work-intro .pola { order: 2; }
	.work-words { justify-items: start; text-align: left; }
	.contact .wrap { grid-template-columns: 300px 1fr; gap: 44px; }
	.contact-paper { padding: 32px 30px 28px; }
	.contact-form .row { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Adventures page
   ===================================================================== */
.adv-intro { padding-top: 22px; padding-bottom: 6px; text-align: center; }
.adv-intro .wrap { display: grid; gap: 10px; justify-items: center; }
.adv-intro .kicker { font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: var(--raspberry); transform: rotate(-2deg); }
.adv-intro h1 { font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; }
.adv-intro h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.adv-intro p { color: var(--cocoa-soft); font-size: 1.02rem; max-width: 40ch; }
.adv-intro .hint { font-family: var(--hand); font-size: 1.15rem; color: var(--cocoa-soft); }

.adventures { padding-top: 14px; padding-bottom: 36px; }
.wall {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44px; grid-auto-flow: dense; gap: 14px 12px;
	padding: 16px 4px 8px; position: relative;
}
.wall-item { transform: rotate(var(--r, 0deg)); min-width: 0; }
.wall .pola { z-index: 1; transition: transform .18s ease; }
.wall .pola:hover { z-index: 4; transform: rotate(0deg) scale(1.03); }
.wall .pola .pola-img { padding: 0; border: 0; margin: 0; cursor: zoom-in; width: 100%; display: block; -webkit-appearance: none; appearance: none; font: inherit; color: inherit; text-align: left; }
.wall .pola .pola-img:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 2px; }
.wall .pola .pola-cap { font-size: 1.1rem; }
.size-big   { grid-column: span 2; grid-row: span 10; }
.size-tall  { grid-column: span 1; grid-row: span 7; }
.size-wide  { grid-column: span 2; grid-row: span 7; }
.size-small { grid-column: span 1; grid-row: span 5; }
.wall-note { grid-column: span 1; grid-row: span 3; align-self: center; z-index: 2; font-size: 1.15rem; }
.wall-note.momnote { padding: 10px 12px 11px; }
.wall-note.torn { padding: 11px 13px 12px; }
.wall-sticker-cell { grid-column: span 1; grid-row: span 3; display: grid; place-items: center; }
.wall-sticker {
	width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px;
	font-family: var(--hand); font-weight: 700; font-size: 1rem; line-height: 0.95; color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(74, 44, 34, 0.16); transform: rotate(var(--r, 0deg));
}
.sticker-raspberry { background: var(--raspberry); }
.sticker-lavender { background: var(--lavender-deep); }
.sticker-buttercup { background: var(--buttercup); color: var(--cocoa); }
.tilt-0 { --r: -3deg; } .tilt-1 { --r: 2.5deg; } .tilt-2 { --r: -1.5deg; } .tilt-3 { --r: 3.5deg; } .tilt-4 { --r: -2.5deg; } .tilt-5 { --r: 1.5deg; }
.wall .doodle { z-index: 0; }

/* lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 80; background: rgba(74, 44, 34, 0.82);
	display: grid; place-items: center; padding: 16px;
}
.lightbox[hidden] { display: none; }
.lb-frame { background: #fff; padding: 10px 10px 0; border-radius: 3px; box-shadow: var(--shadow-lg); max-width: min(92vw, 560px); width: 100%; transform: rotate(-1deg); }
.lb-frame .lb-img { max-height: 70vh; overflow: hidden; border-radius: 2px; background: var(--blush); display: grid; place-items: center; }
.lb-frame .lb-img img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; }
.lb-frame .lb-cap { font-family: var(--hand); font-size: 1.4rem; font-weight: 700; text-align: center; padding: 12px 6px 14px; color: var(--cocoa); line-height: 1; }
.lb-btn {
	position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--cocoa);
	display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); font-size: 1.5rem; line-height: 1;
}
.lb-btn svg { width: 20px; height: 20px; }
#lb-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
#lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
#lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (min-width: 760px) {
	.adv-intro { padding-top: 34px; }
	.wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 20px 18px; padding: 20px 8px 10px; }
	.wall .pola .pola-cap { font-size: 1.2rem; }
	.size-big   { grid-row: span 9; }
	.size-tall  { grid-row: span 7; }
	.size-wide  { grid-row: span 6; }
	.size-small { grid-row: span 5; }
	.wall-note { grid-row: span 3; }
	.wall-sticker-cell { grid-row: span 3; }
	.lb-frame { max-width: 640px; }
	#lb-prev { left: 24px; } #lb-next { right: 24px; }
}
@media (min-width: 1100px) {
	.wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* hide the floating pill while the menu or lightbox is open */
body.menu-open .float-tiktok { display: none; }

/* video card posters (real photos) */
.video-card { overflow: visible; }
.video-card .vposter { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; display: block; }
.video-card .vposter picture, .video-card .vposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card .vposter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,44,34,0) 55%, rgba(74,44,34,0.35) 100%); }
.video-card.needs-link .vposter img { filter: saturate(0.85); }

/* =====================================================================
   Poochie TV page
   ===================================================================== */
.tv-intro { padding-top: 22px; padding-bottom: 8px; }
.tv-intro .wrap { display: grid; gap: 22px; align-items: center; }
.tv-intro .pola { --r: 3deg; transform: rotate(var(--r)); max-width: 320px; margin: 0 auto; width: 100%; }
.tv-intro .pola .pola-img { aspect-ratio: 4 / 4.4; }
.tv-words { display: grid; gap: 12px; justify-items: center; text-align: center; }
.tv-words .kicker { font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: var(--raspberry); transform: rotate(-2deg); }
.tv-words h1 { font-size: clamp(2.1rem, 8vw, 3.2rem); font-weight: 800; }
.tv-words h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.tv-words p { color: var(--cocoa-soft); font-size: 1.02rem; max-width: 40ch; }
.tv-words .momnote { transform: rotate(-1.5deg); font-size: 1.15rem; max-width: 320px; }

.tv-episodes { padding-top: 10px; padding-bottom: 6px; }
.tv-episodes[hidden] { display: none; }
.tv-episodes .video-row { padding-top: 22px; }
.tv-soon { padding-top: 6px; padding-bottom: 6px; }
.tv-soon[hidden] { display: none; }
.tv-soon .torn { max-width: 340px; transform: rotate(-1.5deg); }
.tv-soon .torn small { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); margin-top: 6px; line-height: 1.3; }

.tv-guide { padding-top: 20px; padding-bottom: 36px; }
.tv-guide .lead-hand { margin-bottom: 16px; }
.guide { display: grid; gap: 30px 20px; grid-template-columns: 1fr; }
.channel { display: grid; gap: 12px; align-content: start; justify-items: start; }
.channel .pola { --r: -3deg; transform: rotate(var(--r)); width: 82%; max-width: 320px; }
.channel.tilt-1 .pola, .channel.tilt-3 .pola, .channel.tilt-5 .pola { --r: 2.5deg; justify-self: end; }
.channel .pola .pola-img { aspect-ratio: 4 / 4.2; }
.channel .pola .pola-cap { font-size: 1.3rem; }
.channel-words { display: grid; gap: 8px; justify-items: start; padding: 0 4px; }
.channel-words p { color: var(--cocoa-soft); font-size: 0.95rem; max-width: 36ch; }
.tilt-1 .channel-words, .tilt-3 .channel-words, .tilt-5 .channel-words { justify-self: end; text-align: right; justify-items: end; }

@media (min-width: 760px) {
	.tv-intro { padding-top: 34px; }
	.tv-intro .wrap { grid-template-columns: 1fr 340px; gap: 44px; }
	.tv-intro .pola { order: 2; }
	.tv-words { justify-items: start; text-align: left; }
	.guide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
	.channel .pola, .channel.tilt-1 .pola, .channel.tilt-3 .pola, .channel.tilt-5 .pola { width: 100%; justify-self: start; }
	.tilt-1 .channel-words, .tilt-3 .channel-words, .tilt-5 .channel-words { justify-self: start; text-align: left; justify-items: start; }
	.channel.tilt-1 .pola { --r: 2deg; } .channel.tilt-2 .pola { --r: -1.5deg; } .channel.tilt-3 .pola { --r: 3deg; } .channel.tilt-4 .pola { --r: -2.5deg; } .channel.tilt-5 .pola { --r: 1.5deg; }
}

/* =====================================================================
   The Little Shop (coming soon)
   ===================================================================== */
.shop-intro { padding-top: 22px; padding-bottom: 8px; }
.shop-intro .wrap { display: grid; gap: 22px; align-items: center; }
.shop-intro .pola { --r: -3deg; transform: rotate(var(--r)); max-width: 320px; margin: 0 auto; width: 100%; position: relative; }
.shop-intro .pola .pola-img { aspect-ratio: 4 / 4.6; }
.shop-intro .sticker { width: 96px; height: 96px; right: -16px; top: -22px; transform: rotate(12deg); font-size: 1rem; background: var(--lavender-deep); }
.shop-words { display: grid; gap: 12px; justify-items: center; text-align: center; }
.shop-words .kicker { font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: var(--raspberry); transform: rotate(-2deg); }
.shop-words h1 { font-size: clamp(2.1rem, 8vw, 3.2rem); font-weight: 800; }
.shop-words h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.shop-words p { color: var(--cocoa-soft); font-size: 1.02rem; max-width: 40ch; }
.shop-words .momnote { transform: rotate(-1.5deg); font-size: 1.15rem; max-width: 320px; }

.wishlist { padding-top: 18px; padding-bottom: 10px; }
.wishlist .lead-hand { margin-bottom: 14px; }
.wish-wall { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.wish { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; max-width: 300px; padding: 12px 16px 13px; font-family: var(--hand); font-size: 1.3rem; line-height: 1.05; }
.wish small { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); margin-top: 4px; line-height: 1.3; }
.wish svg { width: 44px; height: 44px; }
.wish-wall .torn:nth-child(4n+1) { transform: rotate(-2deg); }
.wish-wall .torn:nth-child(4n+2) { transform: rotate(1.5deg); }
.wish-wall .torn:nth-child(4n+3) { transform: rotate(-1deg); }
.wish-wall .torn:nth-child(4n+4) { transform: rotate(2deg); }

.shop-qc { padding-top: 26px; padding-bottom: 40px; }
.shop-qc .wrap { display: grid; gap: 22px; align-items: center; }
.shop-qc .pola { --r: 3deg; transform: rotate(var(--r)); max-width: 300px; margin: 0 auto; width: 100%; }
.shop-qc .pola .pola-img { aspect-ratio: 4 / 3.2; }
.shop-qc .qc-words { display: grid; gap: 12px; justify-items: center; text-align: center; }
.shop-qc .qc-words p { color: var(--cocoa-soft); font-size: 1rem; max-width: 40ch; }
.shop-qc .lead-hand { margin-bottom: 0; }

@media (min-width: 760px) {
	.shop-intro { padding-top: 34px; }
	.shop-intro .wrap { grid-template-columns: 340px 1fr; gap: 44px; }
	.shop-words { justify-items: start; text-align: left; }
	.shop-qc .wrap { grid-template-columns: 1fr 300px; gap: 44px; }
	.shop-qc .pola { order: 2; }
	.shop-qc .qc-words { justify-items: start; text-align: left; }
}

/* Poochie TV sneak peeks: real muted clips as moving polaroids */
.tv-peeks { padding-top: 10px; padding-bottom: 6px; }
.tv-peeks[hidden] { display: none; }
.tv-peeks .lead-hand { align-items: baseline; }
.peek-note { font-size: 1rem; font-weight: 600; color: var(--cocoa-soft); }
.peeks { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 12px 6px 6px; }
.peeks .pola { width: 78%; max-width: 320px; transform: rotate(var(--r, -2deg)); }
.peeks .pola:nth-child(even) { justify-self: end; }
.peeks .pola.landscape { width: 92%; max-width: 420px; }
.pola.natural.landscape .pola-img video { aspect-ratio: 16 / 9; }
@media (min-width: 760px) {
	.peeks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 28px; }
	.peeks .pola, .peeks .pola:nth-child(even) { width: 100%; max-width: none; justify-self: stretch; }
	.peeks .pola.landscape { width: 100%; max-width: none; }
}

/* ---------- Meet Poochie additions ---------- */
.spec .say { font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--cocoa-soft); }
.spec time { font-weight: 700; }
.note-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 18px; }
.note-row .momnote { max-width: 420px; transform: rotate(-1.5deg); font-size: 1.2rem; }
.note-row .momnote.alt { transform: rotate(1.5deg); }
.opinions, .tricks, .words { padding-top: 24px; }
.tricks-sub { font-family: var(--hand); font-size: 1.25rem; color: var(--cocoa-soft); margin: -4px 0 14px; line-height: 1.15; }
.badge-wall { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-start; }
.badge {
	display: inline-grid; gap: 2px; justify-items: center; text-align: center;
	font-family: var(--hand); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--cocoa);
	padding: 12px 18px 13px; border-radius: 999px; border: 2.5px solid rgba(74, 44, 34, 0.75);
	box-shadow: 0 0 0 3px #fff, var(--shadow-sm); position: relative;
}
.badge small { font-family: var(--body); font-size: 0.72rem; font-weight: 700; color: var(--cocoa-soft); line-height: 1.2; max-width: 160px; }
.badge::after { content: "★"; position: absolute; top: -12px; right: -6px; color: var(--buttercup); font-size: 1.05rem; text-shadow: 0 0 2px #fff; }
.badge-pink { background: var(--blush); } .badge-lav { background: var(--lavender); } .badge-mint { background: var(--mint); } .badge-yellow { background: var(--buttercup); } .badge-white { background: #fff; border-style: dashed; }
.badge-wall .badge:nth-child(4n+1) { transform: rotate(-3deg); } .badge-wall .badge:nth-child(4n+2) { transform: rotate(2deg); }
.badge-wall .badge:nth-child(4n+3) { transform: rotate(-1deg); } .badge-wall .badge:nth-child(4n+4) { transform: rotate(3deg); }
.talking { padding-top: 26px; }
.talk-paper { position: relative; background: var(--mint); padding: 26px 22px 24px; max-width: 580px; margin: 0 auto; box-shadow: var(--shadow); transform: rotate(1deg); display: grid; gap: 12px; justify-items: start; }
.talk-paper .lead-hand { margin-bottom: 0; }
.talk-paper p { color: var(--cocoa); font-size: 1rem; max-width: 46ch; }
.talk-paper .momnote { transform: rotate(-1.5deg); font-size: 1.15rem; max-width: 340px; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hand); font-size: 0.95rem; font-weight: 700; color: var(--cocoa); line-height: 1; text-align: center; padding: 6px; box-shadow: inset 0 -5px 0 rgba(74, 44, 34, 0.18), 0 4px 8px rgba(74, 44, 34, 0.15); border: 2px solid rgba(74, 44, 34, 0.4); }
.dot-pink { background: var(--blush); } .dot-lav { background: var(--lavender); } .dot-mint { background: #fff; } .dot-yellow { background: var(--buttercup); }

/* ---------- Little Shop concept merch ---------- */
.merch { padding-top: 18px; }
.merch .lead-hand { align-items: baseline; }
.merch-sub { font-size: 1rem; font-weight: 600; color: var(--cocoa-soft); }
.merch-wall { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 12px 4px 4px; }
.merch-card { position: relative; background: #fff; padding: 22px 18px 20px; box-shadow: var(--shadow); border-radius: 4px; display: grid; gap: 8px; justify-items: start; transform: rotate(var(--r, -2deg)); max-width: 420px; width: 92%; }
.merch-card.tilt-1, .merch-card.tilt-3 { justify-self: end; }
.merch-card .tag { position: absolute; top: 12px; right: -8px; font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--buttercup); color: var(--cocoa); padding: 5px 10px; transform: rotate(6deg); box-shadow: var(--shadow-sm); }
.merch-card .box { width: 100%; max-width: 220px; background: var(--cream); border-radius: 10px; padding: 10px; justify-self: center; }
.merch-card .box svg { width: 100%; height: auto; display: block; }
.merch-card h3 { font-family: var(--hand); font-size: 1.7rem; font-weight: 700; color: var(--cocoa); line-height: 1; }
.merch-card p { font-size: 0.98rem; color: var(--cocoa-soft); max-width: 36ch; }
.ribbon { font-family: var(--body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--raspberry); padding: 5px 12px; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); transform: rotate(-2deg); }
.stamp { position: absolute; right: 10px; bottom: 10px; transform: rotate(-12deg); opacity: 0.85; }
.stamp-ring { width: 78px; height: 78px; border-radius: 50%; border: 3px double var(--raspberry-deep); display: grid; place-items: center; gap: 0; color: var(--raspberry-deep); background: rgba(255, 255, 255, 0.6); }
.stamp-text { font-family: var(--body); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; line-height: 1.15; }
.stamp-ring svg { width: 18px; height: 18px; margin-top: -2px; }
.merch-fine { font-size: 0.82rem; color: var(--cocoa-soft); margin-top: 16px; max-width: 60ch; }
@media (min-width: 760px) {
	.merch-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
	.merch-card, .merch-card.tilt-1, .merch-card.tilt-3 { width: 100%; max-width: none; justify-self: stretch; }
	.badge { font-size: 1.6rem; }
	.note-row { gap: 16px 26px; }
}
@media (min-width: 1100px) { .merch-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   Magic: hover lift, glitter, fairy dust, storybook stars
   ===================================================================== */
/* hover lift only on devices with a real pointer */
@media (hover: hover) and (pointer: fine) {
	.pola:hover { transform: rotate(0deg) translateY(-6px) scale(1.02) !important; box-shadow: 0 18px 36px rgba(74, 44, 34, 0.22) !important; z-index: 7 !important; }
	.hero-frame { transition: transform .3s cubic-bezier(.2,.8,.3,1.1), box-shadow .3s ease; }
	.hero-frame:hover { transform: rotate(-2deg) translateY(-5px); box-shadow: 0 26px 50px rgba(74, 44, 34, 0.26); }
	.hero-frame:hover::after { animation: frame-shimmer 1.3s ease-out 1; }
}
.hero-frame { cursor: pointer; }
.hero-frame::after {
	content: ""; position: absolute; inset: -3px; border-radius: 6px; pointer-events: none; opacity: 0;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 22px 8px rgba(225, 197, 250, 0.55), 0 0 40px 14px rgba(243, 169, 198, 0.3);
}
.hero-frame.shimmer::after { animation: frame-shimmer 1.3s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .hero-frame.shimmer::after, .hero-frame:hover::after { animation: none; } }
@keyframes frame-shimmer { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* glitter particles live in one fixed layer that never catches taps */
.glit-layer { position: fixed; inset: 0; pointer-events: none; z-index: 75; overflow: hidden; }
.glit {
	position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--c);
	transform: translate(-50%, -50%) scale(0.3); opacity: 0; will-change: transform, opacity;
	animation: glit-fly var(--t, 1.1s) cubic-bezier(.2,.7,.3,1) var(--d, 0s) forwards;
}
/* a warm tinted glow instead of a white one: white on cream was invisible */
.glit svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 1.5px rgba(185, 51, 98, 0.45)); }
@keyframes glit-fly {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
	14% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.25), calc(-50% + var(--dy) * 0.25)) scale(1.1) rotate(30deg); }
	72% { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.8) rotate(120deg); }
}

/* storybook stars: tiny four-point sparkles (4-10px, the odd 12px accent), mostly still, a few twinkle slowly. They sit under the frames so they never cover a photo. */
.dstar { position: absolute; pointer-events: none; z-index: 1; width: var(--sz, 7px); height: var(--sz, 7px); color: var(--c, #F0B429); opacity: 1; overflow: visible; filter: drop-shadow(0 0 1px rgba(74, 44, 34, 0.28)); }
.dstar.xs { --sz: 5px; } .dstar.sm { --sz: 7px; } .dstar.md { --sz: 12px; }
/* the same five hues, one shade deeper than the pastel fills, so a 5px star still reads against the cream and its dot grid */
.dstar.gold { --c: #F0B429; } .dstar.lav { --c: #A98BDE; } .dstar.pink { --c: #EC86AC; } .dstar.mint { --c: #6FC9A8; } .dstar.white { --c: #FFFFFF; filter: drop-shadow(0 0 1.5px rgba(74, 44, 34, 0.55)); }
.dstar.tw { animation: dstar-twinkle 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes dstar-twinkle { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.dstar.lg-only { display: none; }
@media (min-width: 760px) { .dstar.lg-only { display: block; } }
@media (prefers-reduced-motion: reduce) { .dstar.tw { animation: none; } .glit { display: none; } }

.lead-hand, .hero-mood, .meet-words h1, .adv-intro h1, .tv-words h1, .work-words h1, .shop-words h1, .postcard h2, .shop-intro .sticker, .meet-words, .merch-wall, .guide, .peeks, .wall { position: relative; }
.merch-wall { position: relative; }

/* ---------- pawtograph: Poochie's sign-off in the footer ---------- */
.site-footer .pawtograph { display: grid; justify-items: center; gap: 0; margin-top: 2px; }
.site-footer .pawtograph-mark { width: 104px; height: 56px; display: block; }
.site-footer .pawtograph-cap { font-family: var(--hand); font-size: 1.25rem; color: var(--blush); transform: rotate(-2deg); display: inline-block; margin-top: -4px; }

/* ---------- fan mail ---------- */
.fanmail { padding-top: 30px; padding-bottom: 40px; }
.fanmail .wrap { display: grid; gap: 30px; align-items: start; }
.fan-side { display: grid; gap: 14px; justify-items: start; position: relative; }
.fan-side .lead-hand { margin-bottom: 0; }
.fan-side p { color: var(--cocoa-soft); font-size: 0.98rem; max-width: 40ch; }
.fan-side .momnote { transform: rotate(-1.5deg); font-size: 1.15rem; max-width: 320px; }
.fan-paper { transform: rotate(0.6deg); margin-top: 12px; }
.fan-paper .tape { top: -10px; }
.sticker-mail { width: 74px; height: 74px; top: -30px; right: -8px; background: var(--lavender-deep); transform: rotate(9deg); font-size: 1rem; }
@media (min-width: 760px) {
	.fanmail .wrap { grid-template-columns: 300px 1fr; gap: 44px; }
	.fan-paper { margin-top: 0; }
}

/* ---------- birthday (added by js/site.js on January 15) ---------- */
.bday-banner {
	position: relative; overflow: hidden; background: var(--lavender); color: var(--cocoa);
	padding: 16px var(--gutter) 14px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
}
.bday-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, var(--blush) 0 16px, var(--buttercup) 16px 32px, var(--mint) 32px 48px, var(--paper) 48px 64px); }
.bday-words { display: grid; gap: 2px; max-width: 46ch; position: relative; z-index: 2; }
.bday-words b { font-family: var(--display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 1.25rem; color: var(--raspberry-deep); }
.bday-words span { font-family: var(--hand); font-size: 1.25rem; line-height: 1.1; color: var(--cocoa); }
.bday-hat { width: 30px; height: 38px; flex: none; position: relative; z-index: 2; transform-origin: 50% 100%; transform: rotate(-10deg); animation: bday-wobble 2.6s ease-in-out infinite alternate; }
.bday-hat.flip { transform: rotate(10deg); animation-delay: 1.3s; }
.bday-hat svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(74, 44, 34, 0.18)); }
.bday-hat-hero { position: absolute; right: -8px; top: 24%; width: 46px; height: 58px; z-index: 6; transform-origin: 50% 100%; transform: rotate(16deg); animation: bday-wobble 2.6s ease-in-out infinite alternate; pointer-events: none; }
.bday-hat-hero svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(74, 44, 34, 0.22)); }
@keyframes bday-wobble { from { transform: rotate(-10deg); } to { transform: rotate(-4deg); } }
.bday-hat.flip { animation-name: bday-wobble-r; }
@keyframes bday-wobble-r { from { transform: rotate(10deg); } to { transform: rotate(4deg); } }
.bday-hat-hero { animation-name: bday-wobble-hero; }
@keyframes bday-wobble-hero { from { transform: rotate(16deg); } to { transform: rotate(11deg); } }
@media (min-width: 760px) { .bday-hat { width: 36px; height: 46px; } }

/* ---------- current demands ---------- */
.quote-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.quote-head .lead-hand { margin-bottom: 0; }
.demands {
	position: relative; display: grid; gap: 5px; width: 100%; max-width: 300px;
	background: var(--blush); padding: 16px 16px 14px; box-shadow: var(--shadow-sm); transform: rotate(-1.5deg);
}
.demands .tape { top: -10px; }
.demands b { font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raspberry-deep); }
.demand-text { font-family: var(--hand); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--cocoa); min-height: 2.2em; transition: opacity .35s ease; }
.demand-text.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bday-hat, .bday-hat-hero { animation: none; } .demand-text { transition: none; } }
.lead-hand .dstar { position: absolute; }
.videos .wrap { position: relative; }
/* form outcomes */
.form-result { font-family: var(--hand); font-size: 1.2rem; line-height: 1.15; color: var(--raspberry-deep); margin: 6px 0 0; }
.form-done { display: flex; gap: 12px; align-items: flex-start; background: var(--mint); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); transform: rotate(-0.6deg); }
.form-done svg { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.form-done p { font-family: var(--hand); font-size: 1.35rem; line-height: 1.15; color: var(--cocoa); margin: 0; }
/* 404 page */
.lost { padding-top: 30px; padding-bottom: 44px; }
.lost .wrap { display: grid; gap: 28px; justify-items: center; text-align: center; }
.lost .pola { --r: -4deg; transform: rotate(var(--r)); width: 78%; max-width: 300px; }
.lost .pola .pola-img { aspect-ratio: 1 / 1.25; }
.lost-words { position: relative; display: grid; gap: 14px; justify-items: center; max-width: 520px; }
.lost-words h1 { font-size: clamp(1.7rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.05; }
.lost-words h1 em { font-style: italic; font-weight: 600; color: var(--raspberry); }
.lost-words p { font-size: 1.05rem; color: var(--cocoa-soft); max-width: 40ch; }
.lost-words .momnote { max-width: 320px; transform: rotate(-1.5deg); font-size: 1.15rem; }
.lost-words .btn { margin-top: 6px; }
@media (min-width: 760px) {
	.lost { padding-top: 48px; padding-bottom: 60px; }
	.lost .wrap { grid-template-columns: 260px 1fr; gap: 48px; align-items: center; justify-items: start; text-align: left; }
	.lost .pola { width: 100%; }
	.lost-words { justify-items: start; }
}
/* ---------- Poochie in the Press: a vintage newspaper clipping ---------- */
.press { padding-top: 24px; padding-bottom: 10px; }
.press .wrap { display: grid; gap: 16px; justify-items: start; }
.clipping {
	position: relative; max-width: 440px; width: 100%;
	background-color: #F4ECDC;
	background-image: repeating-linear-gradient(0deg, rgba(74, 44, 34, 0.035) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 15% 20%, rgba(255, 255, 255, 0.5), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(120, 90, 60, 0.12), transparent 55%);
	padding: 18px 20px 16px; transform: rotate(-1.4deg);
	box-shadow: 0 10px 22px rgba(74, 44, 34, 0.16);
	clip-path: polygon(0 1%, 4% 0, 12% 1.5%, 25% 0, 38% 1%, 52% 0, 66% 1.5%, 80% 0, 92% 1%, 100% 0, 100% 99%, 94% 100%, 82% 98.5%, 68% 100%, 54% 99%, 40% 100%, 26% 98.5%, 12% 100%, 0 99%);
	font-family: Georgia, 'Times New Roman', serif; color: #3A2A22;
}
.clipping .tape { top: -8px; }
.clip-mast { display: flex; justify-content: space-between; gap: 12px; border-top: 2px solid #3A2A22; border-bottom: 1px solid #3A2A22; padding: 4px 0; margin-bottom: 10px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.clipping h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; line-height: 1.12; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.clipping p { font-size: 0.92rem; line-height: 1.45; margin: 0 0 8px; }
.clipping .dateline { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }
.clipping .quote { font-style: italic; font-size: 1.02rem; margin-top: 10px; }
.clipping .byline { font-size: 0.78rem; color: #6B5648; margin: 0; }
.press-note { max-width: 320px; transform: rotate(1.2deg); font-size: 1.15rem; }
@media (min-width: 760px) {
	.press .wrap { grid-template-columns: auto 1fr; align-items: end; gap: 30px; }
	.press .lead-hand { grid-column: 1 / -1; }
	.press-note { margin-bottom: 18px; }
}

/* ---------- Easter eggs: award, files, slips, cookie ---------- */
.hand-btn { font-family: var(--hand); font-size: 1.3rem; font-weight: 700; color: var(--raspberry); background: var(--paper); border: 2px dashed var(--blush-deep); border-radius: 999px; padding: 8px 18px; cursor: pointer; transform: rotate(-1.5deg); box-shadow: var(--shadow-sm); line-height: 1; transition: transform .18s ease, box-shadow .18s ease; }
.hand-btn:hover { transform: rotate(0deg) translateY(-2px); box-shadow: var(--shadow); }
.hand-btn[aria-expanded="true"] { background: var(--blush); color: var(--raspberry-deep); }
.slip { position: relative; display: grid; gap: 6px; max-width: 360px; background: var(--paper); border: 1px solid var(--blush); border-top: 6px solid var(--lavender); padding: 14px 44px 14px 16px; box-shadow: var(--shadow); transform: rotate(0.8deg); margin-top: 12px; animation: slip-in .28s ease-out; }
.slip[hidden] { display: none; }
.slip-head { font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cocoa-soft); }
.slip-stamp { position: absolute; right: 14px; top: 34px; font-family: var(--body); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #3C9A6B; border: 2px solid #3C9A6B; border-radius: 4px; padding: 3px 7px; transform: rotate(8deg); opacity: 0.85; background: rgba(255, 255, 255, 0.7); }
.slip-stamp:empty { display: none; }
.slip-stamp.is-denied { color: var(--raspberry-deep); border-color: var(--raspberry-deep); }
.slip-stamp.is-pending { color: #B48A1E; border-color: #B48A1E; }
.slip-text { font-family: var(--hand); font-size: 1.35rem; line-height: 1.15; color: var(--cocoa); margin: 6px 0 0; padding-right: 20px; }
.slip-sig { font-family: var(--hand); font-size: 1.05rem; color: var(--cocoa-soft); line-height: 1.15; }
.slip-sig small { font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.slip-note { font-size: 1.05rem; max-width: 220px; margin-top: 4px; transform: rotate(-2deg); }
.slip-close { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--cream); color: var(--cocoa); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.slip-close:hover { background: var(--blush); }
@keyframes slip-in { from { opacity: 0; transform: rotate(0.8deg) translateY(8px) scale(0.97); } to { opacity: 1; transform: rotate(0.8deg) translateY(0) scale(1); } }
.pet-desk { display: grid; gap: 4px; justify-items: center; margin-top: 10px; }
.complaint-desk { display: grid; gap: 8px; justify-items: start; margin-top: 6px; }
.complaint-desk .hand { font-size: 1.15rem; color: var(--cocoa-soft); }
.complaint-desk .slip { padding-bottom: 18px; }

.award { position: relative; margin: 14px 0 0 10px; width: 100%; max-width: 250px; transform: rotate(3deg); }
.award-nail { position: absolute; left: 50%; top: -14px; width: 8px; height: 8px; border-radius: 50%; background: var(--cocoa-soft); transform: translateX(-50%); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.award-nail::before, .award-nail::after { content: ""; position: absolute; top: 4px; width: 1.5px; height: 24px; background: rgba(74, 44, 34, 0.45); left: 3px; transform-origin: top; }
.award-nail::before { transform: rotate(-48deg); } .award-nail::after { transform: rotate(48deg); }
.award-frame { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; background: #FFF9EC; border: 6px solid #C9A24D; outline: 2px solid #8A6A2A; outline-offset: -8px; padding: 10px 10px 10px 8px; box-shadow: 0 8px 18px rgba(74, 44, 34, 0.18); margin-top: 10px; }
.award-photo { width: 64px; height: 76px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(74,44,34,.2); }
.award-photo picture, .award-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.award-words { display: grid; gap: 2px; }
.award-words b { font-family: var(--body); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8A6A2A; }
.award-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--cocoa); }
.award-line { font-family: var(--hand); font-size: 1rem; line-height: 1.1; color: var(--cocoa-soft); }
.award-words small { font-size: 0.56rem; line-height: 1.2; color: var(--cocoa-soft); }
.award-star { position: absolute; right: -14px; top: -14px; width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(74,44,34,.25)); }

.files { padding-top: 10px; padding-bottom: 10px; }
.files .wrap { display: grid; gap: 14px; justify-items: start; position: relative; }
.paper-file { width: 100%; max-width: 560px; }
.paper-file summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: var(--cream-deep); border-radius: 4px 14px 4px 4px; padding: 10px 16px 10px 12px; box-shadow: var(--shadow-sm); transform: rotate(-1deg); }
.paper-file summary::-webkit-details-marker { display: none; }
.paper-file.record summary { transform: rotate(0.8deg); background: var(--lavender); }
.paper-file summary:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 3px; }
.clip { width: 10px; height: 22px; border: 2px solid var(--cocoa-soft); border-radius: 6px; border-bottom-width: 0; position: relative; top: -6px; }
.file-tab { font-family: var(--hand); font-size: 1.35rem; font-weight: 700; color: var(--cocoa); line-height: 1; }
.file-hint { font-family: var(--body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cocoa-soft); }
.paper-file[open] .file-hint { display: none; }
.file-body { position: relative; margin-top: 10px; background: var(--paper); padding: 22px 22px 18px; box-shadow: var(--shadow); border-radius: 3px; }
.resume-paper { font-family: var(--body); color: var(--cocoa); transform: rotate(0.6deg); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(74, 44, 34, 0.06) 27px 28px); }
.resume-paper header { border-bottom: 2px solid var(--cocoa); padding-bottom: 6px; margin-bottom: 12px; }
.resume-paper h3 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.08em; margin: 0; }
.resume-title { font-family: var(--hand); font-size: 1.25rem; color: var(--raspberry); }
.resume-paper h4 { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cocoa-soft); margin: 12px 0 4px; }
.resume-paper p, .resume-paper li { font-family: var(--hand); font-size: 1.25rem; line-height: 1.15; margin: 0; }
.resume-paper ul { margin: 0; padding-left: 20px; }
.resume-sig { display: block; text-align: right; margin: 6px 24px 0 0; font-family: var(--hand); font-size: 1.9rem; color: var(--raspberry); transform: rotate(-8deg); }
.resume-note { display: inline-block; font-size: 1.05rem; max-width: 280px; margin-top: 14px; transform: rotate(-1.5deg); }
.record-paper { background: #FBF3E4; transform: rotate(-0.6deg); }
.stamp-ink { position: absolute; font-family: var(--body); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border: 3px solid; border-radius: 6px; padding: 4px 10px; opacity: 0.8; pointer-events: none; mix-blend-mode: multiply; }
.stamp-conf { right: 14px; top: 12px; font-size: 0.7rem; color: var(--raspberry-deep); border-color: var(--raspberry-deep); transform: rotate(6deg); }
.stamp-guilty { right: 18px; bottom: 44px; font-size: 1.3rem; color: var(--raspberry-deep); border-color: var(--raspberry-deep); transform: rotate(-14deg); }
.record-top { display: grid; gap: 14px; margin-top: 18px; }
.mugshot { margin: 0; width: 150px; background: #fff; padding: 6px 6px 0; box-shadow: var(--shadow-sm); transform: rotate(-3deg); }
.mug-img { height: 150px; overflow: hidden; background: repeating-linear-gradient(0deg, #eee 0 18px, #ddd 18px 20px); }
.mug-img picture, .mug-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mugshot figcaption { font-family: var(--hand); font-size: 0.95rem; text-align: center; padding: 5px 0 6px; color: var(--cocoa); line-height: 1; }
.record-meta h3 { font-family: var(--body); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }
.record-paper dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 0.85rem; }
.record-paper dt { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; color: var(--cocoa-soft); align-self: center; }
.record-paper dd { margin: 0; font-family: var(--hand); font-size: 1.15rem; line-height: 1.1; }
.fingerprint { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px dashed var(--cocoa-soft); padding: 4px 8px; border-radius: 6px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cocoa-soft); }
.fingerprint svg { width: 22px; height: 22px; color: var(--cocoa); opacity: 0.75; }
.record-paper h4 { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cocoa-soft); margin: 16px 0 4px; }
.record-paper ul { margin: 0; padding-left: 20px; }
.record-paper li { font-family: var(--hand); font-size: 1.25rem; line-height: 1.15; }
.record-paper .verdict { margin-top: 12px; max-width: 420px; }
.file-fine { font-size: 0.72rem; color: var(--cocoa-soft); margin: 14px 0 0; }
@media (min-width: 760px) {
	.record-top { grid-template-columns: 150px 1fr; align-items: start; }
	.files .wrap { grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
	.award { margin-left: 0; }
}
.cookie-joke { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; max-width: 360px; margin: 6px auto 10px; background: var(--paper); border: 2px dashed var(--buttercup); border-radius: 14px; padding: 10px 14px; transform: rotate(-1deg); box-shadow: var(--shadow-sm); text-align: left; }
.cookie { width: 44px; height: 44px; grid-row: 1 / 3; transform: rotate(-12deg); }
.cookie-q { font-family: var(--body); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cocoa-soft); }
.cookie-a { font-family: var(--hand); font-size: 1.15rem; line-height: 1.12; color: var(--cocoa); }
@media (prefers-reduced-motion: reduce) { .slip { animation: none; } .hand-btn, .hand-btn:hover { transition: none; transform: rotate(-1.5deg); } }
.complaint-desk .slip-stamp { position: static; justify-self: start; margin: 2px 0 0; transform: rotate(-4deg); }
.pet-desk .slip-stamp { position: static; justify-self: start; margin: 2px 0 0; transform: rotate(-4deg); }
.contact-form .req { font-style: normal; color: var(--raspberry); }
.contact-form .req-note { font-family: var(--hand); font-size: 1.05rem; color: var(--cocoa-soft); margin: -4px 0 0; }
/* privacy policy page */
.privacy { padding-top: 22px; padding-bottom: 40px; }
.privacy .wrap { max-width: 720px; }
.privacy h1 { font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; margin: 6px 0 4px; }
.privacy h1 em { font-style: italic; color: var(--raspberry); font-weight: 600; }
.privacy .updated { font-family: var(--hand); font-size: 1.15rem; color: var(--cocoa-soft); margin-bottom: 18px; }
.policy { background: var(--paper); padding: 24px 22px; box-shadow: var(--shadow); border-radius: 3px; display: grid; gap: 10px; }
.policy h2 { font-family: var(--hand); font-size: 1.6rem; font-weight: 700; color: var(--cocoa); margin: 10px 0 0; line-height: 1; }
.policy p, .policy li { font-size: 0.98rem; line-height: 1.5; color: var(--cocoa); }
.policy ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* contact line: email · phone */
.contact-sep { margin: 0 10px; color: var(--cocoa-soft); }
.contact-side .email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.site-footer .foot-contact { font-family: var(--body); font-size: 0.82rem; font-weight: 700; margin-top: -2px; }
.site-footer .foot-contact a { color: var(--cream); opacity: 0.85; text-decoration: none; }
.site-footer .foot-contact a:hover { opacity: 1; text-decoration: underline; }
.site-footer .foot-contact .contact-sep { color: var(--blush); opacity: 0.7; }
.site-footer .foot-contact[hidden] { display: none; }