/* Maya Maple — site styles
Derived from maya-maple-website-preview.html, which remains the design reference.
Deliberate changes from the preview are marked CHANGED. */
:root{
--bg:#FCEFEA;--bg2:#F7E1E7;--surface:#FFFFFF;--ink:#4A3A3E;--card-ink:#4A3A3E;--ink-soft:#98787E;--card-ink-soft:#98787E;
--primary:#C96487;--primary-ink:#fff;--accent:#B99BDA;--line:#EAD3D8;--header-bg:rgba(252,239,234,.9);
--shadow:0 18px 40px -26px rgba(150,80,105,.5);--radius:22px;
/* CHANGED: lets dark themes restore the cover mockups' 3D read. See .book img. */
--book-glow:none;
/* Subtle pink halo on buttons, tinted by whichever theme is active. */
--btn-glow:0 6px 14px -8px var(--primary), 0 0 16px -5px var(--primary);
--btn-glow-hover:0 6px 14px -8px var(--primary), 0 0 22px -4px var(--primary);
--primary-strong:#DE7095;
--primary-strong:color-mix(in srgb, var(--primary) 65%, #C2185B);
}
/* ---- Light ---- */
[data-theme="lavender"]{--bg:#F1ECFA;--bg2:#E7DDF6;--surface:#FFFFFF;--ink:#3D3550;--card-ink:#3D3550;--ink-soft:#7C7291;--card-ink-soft:#7C7291;--primary:#8368B8;--accent:#EEA9C0;--line:#D9CBEF;--header-bg:rgba(241,236,250,.9);--shadow:0 18px 40px -26px rgba(95,70,140,.5)}
[data-theme="peach"]{--bg:#FFF1E8;--bg2:#FEE1D0;--surface:#FFFFFF;--ink:#4A3A36;--card-ink:#4A3A36;--ink-soft:#9C8175;--card-ink-soft:#9C8175;--primary:#D96E86;--accent:#F3B79A;--line:#F4D6C6;--header-bg:rgba(255,241,232,.9);--shadow:0 18px 40px -26px rgba(180,110,110,.45)}
[data-theme="mint"]{--bg:#EAF6EE;--bg2:#D8EEE0;--surface:#FFFFFF;--ink:#37473E;--card-ink:#37473E;--ink-soft:#6E8A79;--card-ink-soft:#6E8A79;--primary:#CE6E8A;--accent:#F0D08A;--line:#CFE6D8;--header-bg:rgba(234,246,238,.9);--shadow:0 18px 40px -26px rgba(70,120,95,.4)}
[data-theme="butter"]{--bg:#FDF4DE;--bg2:#FBEAC6;--surface:#FFFFFF;--ink:#4A4232;--card-ink:#4A4232;--ink-soft:#9C8E6B;--card-ink-soft:#9C8E6B;--primary:#E58AA0;--accent:#8FBF9E;--line:#F1E2BE;--header-bg:rgba(253,244,222,.9);--shadow:0 18px 40px -26px rgba(180,150,90,.4)}
[data-theme="rose"]{--bg:#FDEBEF;--bg2:#FAD8E0;--surface:#FFFFFF;--ink:#4A343C;--card-ink:#4A343C;--ink-soft:#9E7C86;--card-ink-soft:#9E7C86;--primary:#D65C86;--primary-ink:#fff;--accent:#C9A2D6;--line:#F2D2DB;--header-bg:rgba(253,235,239,.9);--shadow:0 18px 40px -26px rgba(170,70,110,.45)}
[data-theme="lilac"]{--bg:#F0EDF7;--bg2:#E3DCF1;--surface:#FFFFFF;--ink:#413A52;--card-ink:#413A52;--ink-soft:#847B98;--card-ink-soft:#847B98;--primary:#9B7BC0;--primary-ink:#fff;--accent:#E6A9C6;--line:#DBD2EC;--header-bg:rgba(240,237,247,.9);--shadow:0 18px 40px -26px rgba(110,90,150,.45)}
[data-theme="cotton"]{--bg:#FBEEF5;--bg2:#E6ECFB;--surface:#FFFFFF;--ink:#463A4A;--card-ink:#463A4A;--ink-soft:#948394;--card-ink-soft:#948394;--primary:#C86FA6;--primary-ink:#fff;--accent:#8FB4E0;--line:#EFD6E6;--header-bg:rgba(251,238,245,.9);--shadow:0 18px 40px -26px rgba(150,90,140,.4)}
[data-theme="sky"]{--bg:#EAF1FB;--bg2:#D8E6F6;--surface:#FFFFFF;--ink:#33404F;--card-ink:#33404F;--ink-soft:#74869B;--card-ink-soft:#74869B;--primary:#6E86CC;--primary-ink:#fff;--accent:#EAA6C0;--line:#D3E0F0;--header-bg:rgba(234,241,251,.9);--shadow:0 18px 40px -26px rgba(70,110,170,.4)}
[data-theme="vanilla"]{--bg:#FBF6EC;--bg2:#F4ECDB;--surface:#FFFFFF;--ink:#48413A;--card-ink:#48413A;--ink-soft:#9A8E7C;--card-ink-soft:#9A8E7C;--primary:#D2748C;--primary-ink:#fff;--accent:#E3B57E;--line:#ECE2CE;--header-bg:rgba(251,246,236,.9);--shadow:0 18px 40px -26px rgba(150,120,90,.4)}
[data-theme="sage"]{--bg:#EEF2E8;--bg2:#DFE8D4;--surface:#FFFFFF;--ink:#3F4A3A;--card-ink:#3F4A3A;--ink-soft:#7C8A72;--card-ink-soft:#7C8A72;--primary:#CE7A88;--primary-ink:#fff;--accent:#E6C58C;--line:#DBE5D0;--header-bg:rgba(238,242,232,.9);--shadow:0 18px 40px -26px rgba(90,110,80,.4)}
[data-theme="seafoam"]{--bg:#E6F4F0;--bg2:#D2ECE5;--surface:#FFFFFF;--ink:#334A48;--card-ink:#334A48;--ink-soft:#6F8C88;--card-ink-soft:#6F8C88;--primary:#E4899B;--primary-ink:#fff;--accent:#F1CE9A;--line:#CFE7E0;--header-bg:rgba(230,244,240,.9);--shadow:0 18px 40px -26px rgba(70,120,110,.38)}
[data-theme="periwinkle"]{--bg:#ECEEFA;--bg2:#DEE2F5;--surface:#FFFFFF;--ink:#3A3B52;--card-ink:#3A3B52;--ink-soft:#7C7E96;--card-ink-soft:#7C7E96;--primary:#E293AE;--primary-ink:#fff;--accent:#F1C69E;--line:#D7DAF0;--header-bg:rgba(236,238,250,.9);--shadow:0 18px 40px -26px rgba(90,95,160,.38)}
[data-theme="mauve"]{--bg:#F2EBEE;--bg2:#E7D9DE;--surface:#FFFFFF;--ink:#453A40;--card-ink:#453A40;--ink-soft:#948089;--card-ink-soft:#948089;--primary:#B5718C;--primary-ink:#fff;--accent:#A9BCA6;--line:#E6D6DC;--header-bg:rgba(242,235,238,.9);--shadow:0 18px 40px -26px rgba(140,90,110,.4)}
[data-theme="greige"]{--bg:#F4F0E9;--bg2:#EAE2D5;--surface:#FFFFFF;--ink:#463F37;--card-ink:#463F37;--ink-soft:#988E7E;--card-ink-soft:#988E7E;--primary:#D0788E;--primary-ink:#fff;--accent:#A9BCA6;--line:#E8DFD2;--header-bg:rgba(244,240,233,.9);--shadow:0 18px 40px -26px rgba(140,120,95,.38)}
/* ---- Deep: CHANGED, new. Sits between the dark themes and the mid ones —
about a third of the way up — keeping the dark themes' saturation while
lifting the background enough for the covers' drop shadow to read. ---- */
[data-theme="plumdeep"]{--bg:#3B3143;--bg2:#31273A;--surface:#FBF0EA;--ink:#F2E7E1;--card-ink:#4A3A3E;--ink-soft:#C6B4C2;--card-ink-soft:#8C7681;--primary:#E89AAE;--primary-ink:#3A2A33;--accent:#E8C48D;--line:rgba(232,196,141,.26);--header-bg:rgba(59,49,67,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
/* The chosen palette. Text runs brighter than the other themes and the panel is
toned down from cream. --header-bg deliberately equals --bg: only the hero and
blurb bands carry the darker --bg2 tone; the top bar and footer match the page. */
[data-theme="duskrosedeep"]{--bg:#473541;--bg2:#3C2C37;--surface:#F3E4DE;--ink:#FFFAF8;--card-ink:#3E2F35;--ink-soft:#F2E7EC;--card-ink-soft:#5F4A55;--primary:#EEA0B4;--primary-ink:#33232C;--accent:#EBC79A;--line:rgba(238,160,180,.30);--header-bg:rgba(71,53,65,.92);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
[data-theme="berrydeep"]{--bg:#412F3B;--bg2:#372732;--surface:#FBF0EA;--ink:#F3E6EC;--card-ink:#43303A;--ink-soft:#CBB0BE;--card-ink-soft:#8B7480;--primary:#E98AA8;--primary-ink:#3A2530;--accent:#D9A7C9;--line:rgba(233,138,168,.22);--header-bg:rgba(65,47,59,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
[data-theme="navydeep"]{--bg:#36364D;--bg2:#2C2C40;--surface:#FBF1EA;--ink:#E9E7F2;--card-ink:#3A3A4E;--ink-soft:#B6B4CC;--card-ink-soft:#77748C;--primary:#E9A6C0;--primary-ink:#2E2A3A;--accent:#A9C0E8;--line:rgba(233,166,192,.22);--header-bg:rgba(54,54,77,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.55)}
/* ---- Dark ---- */
[data-theme="plum"]{--bg:#2C2333;--bg2:#241B2D;--surface:#FBF0EA;--ink:#F2E7E1;--card-ink:#4A3A3E;--ink-soft:#C6B4C2;--card-ink-soft:#8C7681;--primary:#E89AAE;--primary-ink:#3A2A33;--accent:#E8C48D;--line:rgba(232,196,141,.28);--header-bg:rgba(44,35,51,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
[data-theme="duskrose"]{--bg:#3A2A34;--bg2:#31232C;--surface:#FBF0EA;--ink:#F3E7E1;--card-ink:#4A3A3E;--ink-soft:#C9B4C0;--card-ink-soft:#8C7681;--primary:#EEA0B4;--primary-ink:#3A2A33;--accent:#EBC79A;--line:rgba(238,160,180,.26);--header-bg:rgba(58,42,52,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
[data-theme="berry"]{--bg:#33222E;--bg2:#2A1C26;--surface:#FBF0EA;--ink:#F3E6EC;--card-ink:#43303A;--ink-soft:#CBB0BE;--card-ink-soft:#8B7480;--primary:#E98AA8;--primary-ink:#3A2530;--accent:#D9A7C9;--line:rgba(233,138,168,.24);--header-bg:rgba(51,34,46,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.6)}
[data-theme="teal"]{--bg:#243A3C;--bg2:#1D2F31;--surface:#FBF3EA;--ink:#E7F0EC;--card-ink:#33443F;--ink-soft:#AFC7C0;--card-ink-soft:#6E8A83;--primary:#EFA0B0;--primary-ink:#2A3A38;--accent:#E8C48D;--line:rgba(239,160,176,.22);--header-bg:rgba(36,58,60,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.55)}
[data-theme="navy"]{--bg:#2A2A3F;--bg2:#212132;--surface:#FBF1EA;--ink:#E9E7F2;--card-ink:#3A3A4E;--ink-soft:#B6B4CC;--card-ink-soft:#77748C;--primary:#E9A6C0;--primary-ink:#2E2A3A;--accent:#A9C0E8;--line:rgba(233,166,192,.22);--header-bg:rgba(42,42,63,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.55)}
[data-theme="cocoa"]{--bg:#3A2E27;--bg2:#31261F;--surface:#FBF2E8;--ink:#F1E7DD;--card-ink:#463A30;--ink-soft:#C9B7A6;--card-ink-soft:#8C7A68;--primary:#E9A6A0;--primary-ink:#3A2A24;--accent:#E8C48D;--line:rgba(233,166,160,.22);--header-bg:rgba(58,46,39,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.55)}
[data-theme="slate"]{--bg:#3A3446;--bg2:#302B3B;--surface:#FBF1F1;--ink:#EDE7F0;--card-ink:#40384C;--ink-soft:#BEB4CC;--card-ink-soft:#7E748C;--primary:#D9A6E6;--primary-ink:#332A3A;--accent:#EFB0C4;--line:rgba(217,166,230,.22);--header-bg:rgba(58,52,70,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.55)}
/* ---- Medium ---- */
[data-theme="rosewood"]{--bg:#614E57;--bg2:#524049;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#F0A6B8;--primary-ink:#3A2E36;--accent:#EAC79A;--line:rgba(255,244,240,.15);--header-bg:rgba(97,78,87,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="wine"]{--bg:#594D62;--bg2:#4B3F53;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#E9A6C8;--primary-ink:#3A2E36;--accent:#C9A7E0;--line:rgba(255,244,240,.15);--header-bg:rgba(89,77,98,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="violet"]{--bg:#544E68;--bg2:#464059;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#D9A6EE;--primary-ink:#3A2E36;--accent:#F0B4C8;--line:rgba(255,244,240,.15);--header-bg:rgba(84,78,104,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="mauvegrey"]{--bg:#5C5463;--bg2:#4E4654;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#EFA6C0;--primary-ink:#3A2E36;--accent:#B9C0E0;--line:rgba(255,244,240,.15);--header-bg:rgba(92,84,99,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="berrymid"]{--bg:#634E58;--bg2:#54404A;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#F09AB0;--primary-ink:#3A2E36;--accent:#E6C58C;--line:rgba(255,244,240,.15);--header-bg:rgba(99,78,88,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="dustyteal"]{--bg:#4A5C5E;--bg2:#3E4E50;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#F0A6B4;--primary-ink:#3A2E36;--accent:#E8C48D;--line:rgba(255,244,240,.15);--header-bg:rgba(74,92,94,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="steelblue"]{--bg:#50596E;--bg2:#434B5E;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#EFA8C2;--primary-ink:#3A2E36;--accent:#B9C6E6;--line:rgba(255,244,240,.15);--header-bg:rgba(80,89,110,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="moss"]{--bg:#555B44;--bg2:#484D39;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#EFA6B4;--primary-ink:#3A2E36;--accent:#E6C58C;--line:rgba(255,244,240,.15);--header-bg:rgba(85,91,68,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="cocoamid"]{--bg:#5B4E44;--bg2:#4C4139;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#EFA8A2;--primary-ink:#3A2E36;--accent:#E8C48D;--line:rgba(255,244,240,.15);--header-bg:rgba(91,78,68,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="slatelight"]{--bg:#524C5D;--bg2:#453F4F;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#DDA8EA;--primary-ink:#3A2E36;--accent:#F0B4C6;--line:rgba(255,244,240,.15);--header-bg:rgba(82,76,93,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="plumlight"]{--bg:#564A60;--bg2:#493E52;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#E89AAE;--primary-ink:#3A2E36;--accent:#E8C48D;--line:rgba(255,244,240,.15);--header-bg:rgba(86,74,96,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="duskroselight"]{--bg:#5E4A58;--bg2:#4F3E4A;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#EEA0B4;--primary-ink:#3A2E36;--accent:#EBC79A;--line:rgba(255,244,240,.15);--header-bg:rgba(94,74,88,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="berrylight"]{--bg:#5C4854;--bg2:#4E3C47;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#E98AA8;--primary-ink:#3A2E36;--accent:#D9A7C9;--line:rgba(255,244,240,.15);--header-bg:rgba(92,72,84,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
[data-theme="navylight"]{--bg:#4C4C68;--bg2:#40405A;--surface:#FBF1EA;--ink:#F2E9E3;--card-ink:#45383E;--ink-soft:#C8BAC2;--card-ink-soft:#897983;--primary:#E9A6C0;--primary-ink:#3A2E36;--accent:#A9C0E8;--line:rgba(255,244,240,.15);--header-bg:rgba(76,76,104,.9);--shadow:0 20px 44px -24px rgba(0,0,0,.5)}
/* Dark-background themes. The light halo that was here is off by default — the
owner preferred the covers' own shading — and is now opt-in via body.glow. */
[data-theme="plum"],[data-theme="duskrose"],[data-theme="berry"],[data-theme="teal"],[data-theme="navy"],[data-theme="cocoa"],[data-theme="slate"],
[data-theme="plumdeep"],[data-theme="duskrosedeep"],[data-theme="berrydeep"],[data-theme="navydeep"],
[data-theme="rosewood"],[data-theme="wine"],[data-theme="violet"],[data-theme="mauvegrey"],[data-theme="berrymid"],[data-theme="dustyteal"],[data-theme="steelblue"],[data-theme="moss"],[data-theme="cocoamid"],[data-theme="slatelight"],[data-theme="plumlight"],[data-theme="duskroselight"],[data-theme="berrylight"],[data-theme="navylight"]{
/* Toned back from 1 — with more shapes in the mix the layer read as clutter. */
--doodle-opacity:.62;
/* The wordmark's own keyline is white and baked into the PNG. This ring sits
outside it in the theme's pink, which is what the old faint glow read as once
it blended with the background. Zero blur keeps it crisp. */
--logo-lift:drop-shadow(1.3px 0 0 var(--primary)) drop-shadow(-1.3px 0 0 var(--primary)) drop-shadow(0 1.3px 0 var(--primary)) drop-shadow(0 -1.3px 0 var(--primary));
/* Soft dark halo, echoing the outline on the logo, so headings and captions sit
clearly above the doodles instead of tangling with them. */
--text-halo:0 1px 2px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden;transition:background .4s,color .4s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* CHANGED: the preview never reset the UA's `figure{margin:1em 40px}`, which added
80px to every book and forced "New Releases" to wrap to 2+1 at every width. */
figure{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 1.5rem}
.wrap.narrow{max-width:640px}
/* CHANGED: 1560 -> 1760, so the book rows use more of a wide screen. */
.wrap.wide{max-width:1760px;padding:0 2rem}
.section{padding:clamp(2.6rem,6vw,4.6rem) 0;position:relative}
.page{position:relative;z-index:1}
.doodles{position:fixed;inset:0;width:100%;height:100%;z-index:0;color:var(--line);opacity:var(--doodle-opacity,.5);pointer-events:none}
/* The header is sticky and 69px tall, so a jump to #gift would otherwise park the
heading underneath it. Offsets the landing point by the header plus a little
breathing room. */
section[id]{scroll-margin-top:88px}
@media(max-width:680px){section[id]{scroll-margin-top:76px}}
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .4s}
.header-inner{max-width:1320px;margin:0 auto;padding:.7rem 1.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.site-header nav a{font-weight:800;font-size:1.04rem;color:var(--ink);opacity:1;padding:.3rem 0;border-bottom:2px solid transparent;text-shadow:var(--text-halo,none)}
.site-header nav a:hover{color:var(--primary);border-bottom-color:var(--primary)}
.brand{justify-self:center}
.brand img{height:46px;width:auto;filter:var(--logo-lift,none)}
/* CHANGED: the hero and the blurb are the two tinted bands, and they now share
one padding so they read as a matched pair rather than two arbitrary heights.
The hero used to be lopsided — 4rem above the text against 2.6rem below — which
left the heading sitting low in its own band, close to the books and far from
the logo. Equal padding centres it. */
/* Equal padding is not the same as looking centred. A 46px heading carries ~18px
of leading above its capitals while the small paragraph below has ~5px under its
baseline, so identical padding still leaves 13px more visible space on top — the
lopsidedness you see rather than the one the box model reports. --hero-lead is
taken off the top and added to the bottom, which balances the text to the eye and
leaves the band exactly as tall. It is a share of the heading's own size, so it
tracks the clamp down to mobile instead of over-correcting there. */
:root{
--band-pad:clamp(1.7rem,3.6vw,2.4rem);
--hero-h1:clamp(1.9rem,4.2vw,2.9rem);
/* Half the imbalance, not all of it: taking it off the top *and* adding it to
the bottom moves the text by this much and so closes twice this much of gap. */
--hero-lead:calc(var(--hero-h1) * .14);
/* Decorative rule beside section titles and either side of the hero heart.
Held at full strength against the text and faded only over the outer half.
A gradient running from transparent across the whole length reads as washed
out, because it reaches full colour at the very last pixel. */
--rule:color-mix(in srgb, var(--primary) 72%, transparent);
/* Its own colour rather than --primary, which is too soft to carry a 17px
shape against the plum. This is the one accent meant to pop. Being a
literal, it does not follow a theme change — fine while the theme is
locked, but it is the thing to revisit if the palette ever moves. */
--heart:#FF8FAE;
}
.hero-rule{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.42rem 0 .4rem}
.hero-rule .rule{height:2px;flex:0 1 118px;border-radius:2px}
.title-rule{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:0 0 2.2rem}
/* flex-basis rather than a fixed width, so a short title and a long one end up
the same overall width and the rules absorb the difference. */
.title-rule .rule{height:2px;flex:1 1 auto;min-width:0;max-width:128px;border-radius:2px}
.title-rule .section-title{margin:0;white-space:nowrap}
.rule.l{background:linear-gradient(90deg,transparent,var(--rule) 55%,var(--rule))}
.rule.r{background:linear-gradient(270deg,transparent,var(--rule) 55%,var(--rule))}
.hero-heart{width:17px;height:17px;flex:0 0 auto;display:block;color:var(--heart)}
/* The rules have little room left once a title and two gaps are placed on a
narrow screen, so the gaps close before the rules vanish entirely. */
@media(max-width:520px){
.title-rule{gap:.7rem}
.hero-rule{gap:.55rem}
}
.hero{background:linear-gradient(165deg,var(--bg),var(--bg2));text-align:center;padding:calc(var(--band-pad) - var(--hero-lead)) 0 calc(var(--band-pad) + var(--hero-lead));transition:background .4s}
/* Margin-top must stay 0: anything here adds space above the text with nothing
matching it below, which is what made the band off-centre in the first place. */
/* Bottom margin is 0 because the divider below carries the gap. Without that,
the two stack and the heart floats away from the title it belongs to. */
.hero h1{font-family:'Fredoka',sans-serif;font-weight:600;font-size:var(--hero-h1);margin:0;letter-spacing:-.01em;text-shadow:var(--text-halo,none)}
.hero p{color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.22rem);margin:0;text-shadow:var(--text-halo,none)}
/* The gift page uses the same hero without a divider, so a paragraph sitting
directly after the heading restores the gap the h1 gave up. */
.hero h1 + p{margin-top:.5rem}
/* CHANGED: larger, plus the dark halo so it reads over the doodle layer. */
.section-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.75rem,3.4vw,2.5rem);text-align:center;margin:0 0 2.2rem;letter-spacing:-.01em;text-shadow:var(--text-halo,none)}
/* CHANGED: two full section paddings stacked put 147px between the book rows.
Tightened between them only; spacing above New Releases and below the second
row is untouched, so the hero and the blurb band keep their breathing room. */
/* CHANGED: tightened so the covers arrive sooner. The full section padding put
74px of empty page above the first title on desktop, and the title, its rule
and the row below were spaced like separate blocks rather than one heading
and what it introduces. The covers are what a visitor came to see. */
.section--books{padding-top:clamp(1.5rem,2.6vw,2.4rem);padding-bottom:clamp(1rem,2vw,1.5rem)}
/* Small on purpose: each cover image carries ~35px of transparent space above the
book for its tilt and shadow, so the visible gap is far larger than this. */
.section--books .title-rule{margin-bottom:.5rem}
/* Every cover image has 8.3% of its height empty above the book, room for the
tilt and shadow. The covers are square and margin percentages resolve against
the width, so -6% cancels most of it at every screen size, leaving a little
air for the hover lift. */
.section--books .book .shot{margin-top:-6%}
/* The book section's full bottom padding stacked on the "More to Color" row's
own top padding left 111px between the gallery and the next title. Trimmed to
match the gap between the two rows on the homepage. */
.section--book{padding-bottom:clamp(.5rem,.8vw,.6rem)}
.section--books + .section--books{padding-top:clamp(1rem,2vw,1.5rem);padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.book-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(0.8rem,1.5vw,1.7rem);align-items:end}
/* CHANGED: max 470 -> 540, to use the extra width rather than just adding margin. */
.book{display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 auto;width:clamp(280px,30vw,540px);transition:transform .2s}
.book .shot{width:100%;transition:transform .25s ease-out}
.book:hover .shot{transform:translateY(-10px) scale(1.018)}
/* CHANGED: reinforces the shadow already baked into the mockups — same direction
(down and right), small offset and blur so it deepens rather than lengthens. */
.book img{width:100%;height:auto;filter:var(--book-shadow,drop-shadow(5px 6px 5px rgba(0,0,0,.28)))}
body.glow .book img{filter:drop-shadow(0 2px 3px rgba(255,238,244,.30)) drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.book figcaption{display:flex;flex-direction:column;align-items:center;text-align:center}
/* CHANGED: 1.18 -> 1.5rem. margin-top .9 -> .25rem: the cover PNGs already carry
~12px of transparent padding below the shadow, so .9rem read as a wide gap. */
.book-name{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem;color:var(--ink);margin-top:.25rem;transition:color .2s;text-shadow:var(--text-halo,none)}
.book-cta{display:inline-block;margin-top:.6rem;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;color:var(--primary-ink);background:var(--primary);padding:.62rem 1.45rem;border-radius:999px;box-shadow:var(--btn-glow);transition:filter .15s,transform .15s,box-shadow .15s}
.book-cta:hover{box-shadow:var(--btn-glow-hover)}
.book-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.book:hover .book-name{color:var(--primary)}
body.borders .book{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1rem 1.3rem;box-shadow:0 10px 26px -20px rgba(60,40,55,.5)}
body.borders .book-name{color:var(--card-ink)}
/* CHANGED: was loose text on the page background and read as an afterthought.
Now its own band, mirroring the hero's darker gradient. */
/* CHANGED: was taking the full .section padding, which made this band half again
as tall as the hero for three lines of text. Shares the hero's padding now. */
.blurb{text-align:center;padding:var(--band-pad) 0;background:linear-gradient(165deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.blurb p{color:var(--ink);font-size:1.2rem;max-width:48ch;margin:0 auto;line-height:1.6;text-shadow:var(--text-halo,none)}
.gift-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:740px;margin:0 auto;text-align:center;padding:clamp(1.8rem,5vw,3rem);transition:background .4s}
.gift-panel h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--card-ink);margin:0 0 .6rem}
.gift-panel .lead{color:var(--card-ink-soft);max-width:46ch;margin:0 auto 1.5rem;font-size:1.12rem;line-height:1.55}
.gift-form{display:flex;gap:.7rem;max-width:520px;margin:0 auto;flex-wrap:wrap}
.gift-form input{flex:1;min-width:180px;padding:.85rem 1.1rem;border-radius:999px;border:2px solid var(--card-ink-soft);background:var(--surface);color:var(--card-ink);font-family:inherit;font-size:1.02rem}
.gift-form input::placeholder{color:var(--card-ink-soft);opacity:1}
.gift-form input:focus{outline:none;border-color:var(--primary)}
.btn{border:none;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;padding:.85rem 1.6rem;border-radius:999px;background:var(--primary);color:var(--primary-ink);box-shadow:var(--btn-glow);transition:filter .15s,transform .15s,box-shadow .15s}
.btn:hover{box-shadow:var(--btn-glow-hover)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn[disabled]{opacity:.65;cursor:default;transform:none}
.gift-form .btn{flex:none}
/* Once the fields wrap onto their own lines on a phone, the button spans the row
too. At its natural width it sat at the start of the wrapped row and looked
unfinished, on the form QR-code visitors land on. */
@media(max-width:560px){.gift-form .btn{flex:1 1 100%}}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:.9rem auto 0;max-width:44ch;font-size:.92rem;color:var(--card-ink);min-height:1.2em}
.form-msg.error{color:#C0392B}
/* Only takes space once it has something to say. Reserved permanently, it made
both form cards 32px heavier at the bottom than the top. The element stays in
the DOM, so the live region is still announced. */
.form-msg:empty{margin:0;min-height:0}
[data-theme="plum"] .form-msg.error,[data-theme="duskrose"] .form-msg.error,[data-theme="berry"] .form-msg.error,[data-theme="teal"] .form-msg.error,[data-theme="navy"] .form-msg.error,[data-theme="cocoa"] .form-msg.error,[data-theme="slate"] .form-msg.error{color:#C0392B}
/* Only takes space once it has something to say. Reserved permanently, it made
both form cards 32px heavier at the bottom than the top. The element stays in
the DOM, so the live region is still announced. */
.form-msg:empty{margin:0;min-height:0}
.gift-done h2{margin-bottom:.4rem}
/* CHANGED: --bg2 -> --bg. Only the hero and blurb bands carry the darker tone. */
.site-footer{background:var(--bg);border-top:1px solid var(--line);transition:background .4s;text-align:center;padding:2.4rem 1.5rem 1.4rem}
.footer-logo{height:38px;width:auto;margin:0 auto 1rem;filter:var(--logo-lift,none)}
.footer-nav{display:flex;gap:1.4rem;justify-content:center;font-weight:700;margin-bottom:1rem}
.footer-nav a{color:var(--ink);opacity:.85;text-shadow:var(--text-halo,none)}
.footer-nav a:hover{opacity:1;color:var(--primary)}
.footer-bottom{color:var(--ink-soft);font-size:.85rem;border-top:1px solid var(--line);padding-top:1rem;max-width:600px;margin:0 auto}
/* Not yet listed on Amazon. Same geometry as the buy buttons so unreleased
pages match released ones, but muted and without the glow, so it reads as a
status label rather than a button that does nothing when pressed. */
.book-cta--soon{background:transparent;color:var(--ink-soft);border:2px dashed var(--line);box-shadow:none;cursor:default}
/* Staging-only theme picker. Absent from production once showThemePicker is off. */
.controls{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:200;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px -12px rgba(0,0,0,.4);padding:.5rem .6rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;max-width:94vw;max-height:44vh;overflow:auto}
.ctrl-group{display:flex;gap:.3rem;align-items:center}
.ctrl-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--card-ink-soft);margin-right:.15rem}
.controls button{border:1px solid var(--line);background:var(--bg);color:var(--card-ink);font-family:inherit;font-weight:700;font-size:.78rem;padding:.4rem .7rem;border-radius:999px;cursor:pointer}
.controls button.active{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.controls .divider{width:1px;height:26px;background:var(--line)}
/* Cookie consent — only rendered when a GA measurement ID is configured. */
.consent-bar{position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(0,0,0,.5);padding:1rem 1.2rem;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
.consent-bar p{margin:0;color:var(--card-ink);font-size:.9rem;max-width:60ch}
.consent-bar .btn{padding:.6rem 1.2rem;font-size:.9rem}
.consent-bar .btn.ghost{background:transparent;color:var(--card-ink);border:1px solid var(--line)}
/* CHANGED: the preview's mobile rules set grid-template-columns on a flex row, so
they did nothing. Books now go two-up on tablets and one-up on phones. */
@media(max-width:1100px){.book{width:clamp(260px,44vw,420px)}}
@media(max-width:680px){.book{width:min(340px,86vw)}.brand img{height:38px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.book:hover .shot{transform:none}}
.legal h2{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.15rem;margin:1.8rem 0 .4rem}
.legal p{color:var(--ink-soft);margin:0 0 .6rem;line-height:1.6}
.legal ul{color:var(--ink-soft);margin:0 0 .6rem;padding-left:1.2rem;line-height:1.6}
.legal li{margin:0 0 .3rem}
.legal a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent)}
/* Sits above the opening paragraph, so it reads as a stamp on the document
rather than as the first thing the page wants to tell you. */
.legal-date{font-size:.9rem;opacity:.75;margin:0 0 1.4rem!important}
/* ---- Book detail page ------------------------------------------------- */
.book-page{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,4rem);align-items:start}
/* Gallery. Fixed square stage with object-fit:contain, so interior pages of any
proportion sit correctly without the layout jumping between slides.
CHANGED: absolute slides rather than a grid. As a grid the column sized itself
from content, so the stage rendered ~150px narrower than its column. */
#gallery{padding:0 58px}
.gal-stage{position:relative;aspect-ratio:1;width:100%;max-width:660px;margin:0 auto}
.gal-slide{position:absolute;inset:0;display:none}
.gal-slide.is-on{display:block}
.gal-slide img{object-position:top center}
.gal-slide img{width:100%;height:100%;object-fit:contain;filter:var(--book-shadow,drop-shadow(5px 6px 5px rgba(0,0,0,.28)))}
/* Interiors are mockups with their own shadow already rendered in, so the slide
shadow would stack a second one on the same silhouette. Covers are flat artwork
and still need it. */
.gal-slide--interior img{filter:none}
/* Sits over the interior artwork so a right-click targets a link, not an image.
Below .gal-nav's z-index so the arrows stay clickable once they move inside the
stage on narrow screens. */
.gal-guard{position:absolute;inset:0;z-index:1;display:block;cursor:default}
.gal-slide img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Interiors and their thumbnails are painted as backgrounds rather than ![]()
elements, so there is no image node for a context menu to offer saving. The
cover slide is still a real ![]()
— it is marketing and meant to travel. */
.gal-art{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain}
.gal-thumb-art{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:cover}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;cursor:pointer;width:52px;height:52px;border-radius:999px;background:var(--surface);border:2px solid var(--primary-strong);color:var(--primary-strong);font-size:2.1rem;line-height:0;padding-bottom:4px;display:grid;place-items:center;box-shadow:0 0 16px -4px var(--primary-strong),0 8px 20px -10px rgba(0,0,0,.6);transition:background .15s,color .15s,transform .15s}
.gal-nav:hover{background:var(--primary-strong);color:var(--surface);transform:translateY(-50%) scale(1.07)}
.gal-prev{left:-58px}
.gal-next{right:-58px}
.gal-count{text-align:center;color:var(--ink-soft);font-size:.86rem;margin-top:.35rem;text-shadow:var(--text-halo,none)}
/* justify-content centres the thumbs inside this box, but the box itself had no
auto margin, so it sat left-aligned in the wider column while the stage above it
was centred — which is what pulled the strip off to the left. */
.gal-thumbs{display:flex;gap:.375rem;justify-content:center;flex-wrap:wrap;margin-top:.55rem;max-width:680px;margin-inline:auto}
/* Sized by the room available rather than fixed, so the row never wraps. A fixed
width only fits one column width: the gallery column is 660 on a wide screen but
~600 at 1400px, where five 130px thumbs overflow and the last one drops to a row
of its own. Flexing from a small basis up to a cap keeps them on one line at any
width, and as large as will fit. */
.gal-thumb{position:relative;flex:1 1 92px;width:auto;max-width:130px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:3px solid transparent;opacity:1;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer;background:none;padding:0}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb:hover{border-color:var(--line);transform:translateY(-2px)}
.gal-thumb.is-on{border-color:var(--primary-strong);box-shadow:0 0 14px -2px var(--primary-strong)}
.book-detail h1{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;margin:-.45rem 0 1.2rem;letter-spacing:-.01em;text-shadow:var(--text-halo,none)}
/* .btn sets no display, so as a ('Coming soon') it stayed inline and the
bottom margin did nothing, letting the description crowd it. */
.buy-group{display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;margin:0 0 1.7rem}
.book-detail .buy{display:inline-block;font-size:1.02rem;padding:.72rem 1.8rem;margin:0;text-align:center;
background:var(--surface);color:var(--primary-strong);border:2px solid var(--primary-strong);
box-shadow:0 0 16px -4px var(--primary-strong),0 8px 20px -12px rgba(0,0,0,.6)}
.book-detail .buy:hover{background:var(--primary-strong);color:var(--surface);box-shadow:0 0 22px -3px var(--primary-strong)}
.book-detail .desc{color:var(--ink);font-size:1.14rem;line-height:1.6;text-shadow:var(--text-halo,none)}
.book-detail .desc p{margin:0 0 .75rem}
.book-detail .desc ul{margin:.2rem 0 .9rem;padding-left:1.15rem}
.book-detail .desc li{margin:0 0 .3rem}
.aplus{margin-top:clamp(2.5rem,5vw,4rem)}
.aplus img{width:100%;height:auto;border-radius:var(--radius);margin-bottom:1.5rem}
@media(max-width:1150px){
#gallery{padding:0}
.gal-prev{left:0}
.gal-next{right:0}
}
@media(max-width:900px){
.book-page{grid-template-columns:1fr;gap:2rem}
.gal-thumb{flex-basis:48px;max-width:96px}
}
.book-detail .desc b,.book-detail .desc strong{font-weight:800}
/* ---- Contact form ------------------------------------------------------ */
/* The contact intro carries more weight than the gift panel's, since it is the
whole reason the page exists. Slightly larger, and narrower so it still breaks
into comfortable lines at the bigger size. */
.gift-panel .lead.contact-lead{font-size:1.26rem;line-height:1.6;max-width:40ch;margin-bottom:1.7rem}
.contact-form{display:flex;flex-direction:column;gap:.8rem;max-width:520px;margin:0 auto}
.contact-form input,.contact-form textarea{width:100%;padding:.85rem 1.1rem;border-radius:18px;border:2px solid var(--card-ink-soft);background:var(--surface);color:var(--card-ink);font-family:inherit;font-size:1.02rem}
.contact-form input{border-radius:999px}
.contact-form textarea{resize:vertical;min-height:140px;line-height:1.5}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--card-ink-soft);opacity:1}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--primary-strong)}
.contact-form .btn{align-self:center;margin-top:.3rem;padding:.85rem 2.2rem}
.opt-in{display:flex;align-items:center;gap:.6rem;color:var(--card-ink-soft);font-size:.95rem;text-align:left;cursor:pointer}
.opt-in input{width:auto;accent-color:var(--primary-strong);flex:none;transform:scale(1.15)}
/* ---------- free gift download page ------------------------------------
Reachable only from the gift email. Styled as part of the site rather than a
file listing, because it is the first thing a new subscriber sees. */
.gift-all{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.gift-all--top{margin:0 0 2.2rem}
.gift-all--bottom{margin:2.4rem 0 0}
/* Borrowed wholesale from the Amazon buy buttons on the book pages, so the two
places on the site that ask you to go and get something look the same.
Outlined at rest, filled on hover. */
.gift-all .btn{background:var(--surface);color:var(--primary-strong);
border:2px solid var(--primary-strong);
box-shadow:0 0 16px -4px var(--primary-strong),0 8px 20px -12px rgba(0,0,0,.6)}
.gift-all .btn:hover{background:var(--primary-strong);color:var(--surface);
box-shadow:0 0 22px -3px var(--primary-strong)}
/* CHANGED: was five across. These are detailed line drawings and at a fifth of
the page the detail was gone, which defeats the point of showing them at all.
Four gives about 27% more width per card. */
.gift-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.gift-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.gift-grid{grid-template-columns:repeat(2,1fr)}}
.gift-card{margin:0;background:var(--card,#FFFAF8);border:1px solid var(--line);
border-radius:16px;padding:.6rem;display:flex;flex-direction:column;gap:.5rem}
/* The artwork is black on white and must stay on white to be legible, whatever
the page theme is doing behind it. */
.gift-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
background:#fff;border-radius:10px}
.gift-card figcaption{text-align:center;font-weight:800;font-size:.92rem;
color:var(--card-ink,#33232C);line-height:1.3}
.gift-card-links{display:flex;gap:.4rem;margin-top:auto}
.gift-card-links a{flex:1;text-align:center;font-size:.8rem;font-weight:800;
padding:.5rem .3rem;border-radius:999px;text-decoration:none;
background:var(--primary);color:var(--primary-ink);border:2px solid transparent;
transition:filter .15s,transform .15s,box-shadow .15s,border-color .15s}
/* Transparent keeps an unfilled body — it reads as the format it stands for.
CHANGED: 1px of --line was almost invisible against the cream card, so the
button looked like unstyled text. 2px of the card's own ink at low strength
stays quiet but is actually a button. */
.gift-card-links a:last-child{background:transparent;color:var(--card-ink,#33232C);
border-color:color-mix(in srgb, var(--card-ink,#33232C) 30%, transparent)}
/* Both buttons take the same lift as every other button on the site, so hovering
the unfilled one is as obvious as hovering the filled one. */
.gift-card-links a:hover{filter:brightness(1.05);transform:translateY(-1px);
box-shadow:var(--btn-glow-hover)}
.gift-card-links a:last-child:hover{
border-color:color-mix(in srgb, var(--primary) 70%, transparent)}
/* ---------- heart motif beyond the hero, and book page structure --------- */
/* The hero's divider at card scale, under the signup and contact headings. */
.card-rule{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.1rem 0 .85rem}
.card-rule .rule{height:2px;flex:0 1 84px;border-radius:2px}
.card-rule .hero-heart{width:15px;height:15px}
.gift-panel h2:has(+ .card-rule){margin-bottom:0}
/* Heart bullets in place of browser discs, in the hero heart's colour. A mask
rather than an inline SVG so the markup from books.json stays untouched. */
.book-detail .desc ul{list-style:none;padding-left:0}
.book-detail .desc li{position:relative;padding-left:1.5rem}
.book-detail .desc li::before{content:'';position:absolute;left:0;top:.42em;width:.85rem;height:.85rem;
background:var(--heart);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2020S4%2014%204%208.8C4%206.1%206%204%208.4%204%2010%204%2011.3%205%2012%206.2%2012.7%205%2014%204%2015.6%204%2018%204%2020%206.1%2020%208.8%2020%2014%2012%2020%2012%2020Z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2020S4%2014%204%208.8C4%206.1%206%204%208.4%204%2010%204%2011.3%205%2012%206.2%2012.7%205%2014%204%2015.6%204%2018%204%2020%206.1%2020%208.8%2020%2014%2012%2020%2012%2020Z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* The description's own subheadings, in the heading face. */
.book-detail .desc .desc-sub{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.32rem;
line-height:1.25;color:var(--ink);margin:1.35rem 0 .5rem;text-shadow:var(--text-halo,none)}
.book-detail .desc .desc-sub:first-child{margin-top:.2rem}
/* "More to Color" on book pages: smaller covers, four across. Top-aligned, since
the shared row aligns by the bottom edge and a wrapped name staggers covers. */
.book-row--sm{align-items:start}
.book-row--sm .book{width:clamp(200px,19vw,300px)}
@media(max-width:680px){
.book-row--sm .book{width:calc(50% - .5rem)}
/* ~170px per title with two across; scaled so names fit. Homepage untouched. */
.book-row--sm .book-name{font-size:1.12rem;text-wrap:balance}
}