/* colors.css */
:root{
/* Brand */
--yellow:#FFD400;--yellow-deep:#F2B705;--yellow-soft:#FFF1B3;--yellow-tint:#FFF8D6;
--pink:#F72585;--pink-deep:#D1146B;--pink-soft:#FFB8D9;--pink-tint:#FFE4F0;
/* Neutrals (warm) */
--cream:#FFF8EE;--kraft:#E8DBC5;--kraft-deep:#D9C7A9;--cream-2:#F8EFE2;--sand:#EADFCF;--cocoa:#6B4E3A;--ink:#1A1412;--ink-2:#3D322C;--ink-3:#7A6A60;--white:#FFFFFF;
/* Semantic */
--success:#2E9E6B;--success-tint:#CDEFDD;--warning:#F2B705;--warning-tint:#FFF1B3;--danger:#D6284A;--danger-tint:#FFD9E0;--info:#3B6FD9;--info-tint:#DCE6FB;
/* Aliases */
--bg:var(--cream);--bg-raised:var(--white);--bg-sunken:var(--cream-2);--bg-inverse:var(--ink);
--text-body:var(--ink);--text-muted:var(--ink-3);--text-inverse:var(--cream);--text-on-yellow:var(--ink);--text-on-pink:var(--white);
--accent:var(--pink);--accent-hover:var(--pink-deep);--accent-2:var(--yellow);--accent-2-hover:var(--yellow-deep);
--highlight:var(--yellow);--highlight-alt:var(--pink-soft);
--border:rgba(26,20,18,.12);--border-strong:var(--ink);
--surface-card:var(--white);--surface-caption:rgba(26,20,18,.82);
--link:var(--pink-deep);--link-hover:var(--ink);
}
/* typography.css */
:root{
--font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;
--font-hand:"Shantell Sans","Comic Neue","Segoe Print",cursive;
--font-mono:ui-monospace,"SF Mono",Menlo,monospace;
/* Display serif: tall, tight, italic for emphasis */
--text-display-xl:clamp(56px,7vw,112px);--text-display-l:clamp(44px,5vw,80px);--text-display-m:clamp(32px,3.5vw,56px);
--lh-display:.95;/* @kind other */--ls-display:-.02em;
/* Grotesk headlines: heavy, uppercase */
--text-headline-l:40px;--text-headline-m:28px;--text-headline-s:20px;--lh-headline:1;/* @kind other */--ls-headline:-.03em;
/* Eyebrow / label */
--text-eyebrow:12px;--ls-eyebrow:.18em;
/* Marker headlines: handwritten caps, chunky, slight tilt */
--text-marker-l:96px;--text-marker-m:64px;--lh-marker:1.05;/* @kind other */--ls-marker:.01em;
/* Body */
--text-body-l:20px;--text-body:16px;--text-body-s:14px;--text-caption:12px;--lh-body:1.5;/* @kind other */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;
}
body{font-family:var(--font-sans);color:var(--text-body);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--link)}a:hover{color:var(--link-hover)}
/* spacing.css */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--gutter:var(--space-5);--page-max:1200px;--measure:62ch;--post-size:1080px;
/* Component sizing */
--control-h-s:36px;--control-h-m:44px;--control-h-l:56px;--control-px:20px;
}
/* effects.css */
:root{
/* Radii: pills for controls, soft for cards, square for highlight blocks */
--radius-none:0;--radius-s:6px;--radius-m:12px;--radius-l:20px;--radius-xl:28px;--radius-pill:999px;
/* Shadows: mostly flat; one soft lift for floating cards */
--shadow-none:none;--shadow-card:0 1px 2px rgba(26,20,18,.06),0 8px 24px rgba(107,78,58,.10);--shadow-float:0 16px 40px rgba(26,20,18,.18);
/* Hard offset shadow used on sticker-style elements */
--shadow-sticker:4px 4px 0 var(--ink);
/* Motion */
--ease-out:cubic-bezier(.2,.8,.2,1);/* @kind other */--ease-spring:cubic-bezier(.34,1.56,.64,1);/* @kind other */--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:400ms;/* @kind other */
/* Photo protection: darken from bottom */
--scrim:linear-gradient(180deg,rgba(26,20,18,0) 40%,rgba(26,20,18,.55) 100%);/* @kind other */
/* Paper grain overlay for kraft/cream slides (multiply) */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");/* @kind other */
/* Photo darkening for text-over-photo lists */
--dim:rgba(26,20,18,.42);
--tilt-1:-2deg;/* @kind other */--tilt-2:1.5deg;/* @kind other */
--border-w:1px;--border-w-strong:2px;
}

/* Page */
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:#FFF8EE;color:#1A1412;overflow-x:hidden}
*{box-sizing:border-box}
a{color:#D1146B}a:hover{color:#1A1412}
summary::-webkit-details-marker{display:none}
img{max-width:100%}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-l);padding:0 28px;border-radius:var(--radius-pill);border:2px solid transparent;background:var(--pink);color:#fff;font:var(--weight-semibold) 18px/1 var(--font-sans);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--pink-deep)}
.btn:active{transform:scale(.98)}
.btn-full{width:100%}
a:focus-visible .btn{outline:3px solid var(--yellow);outline-offset:2px}
/* Quote cards */
.qcard:hover{transform:rotate(0deg) scale(1.04)!important}
/* Moving strip */
@keyframes hwgMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-track{display:flex;width:max-content;white-space:nowrap;font:800 clamp(18px,2vw,24px)/1 var(--font-sans);letter-spacing:-.02em;text-transform:uppercase;animation:hwgMarquee 32s linear infinite}
.mq-item{display:inline-flex;align-items:center;gap:28px;padding-right:28px}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}