/*! ebooknetworking.net head bundle (base) — built by tools/enw_css_bundle.php. Do not edit: edit the sources below, then rebuild. */

/*! assets/css/style.css · f46e3f4e46a0 · 184197 B · legacy layer: cards, tables, the components nobody has migrated */
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-contain-size:initial;--tw-contain-layout:initial;--tw-contain-paint:initial;--tw-contain-style:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:"Inter", system-ui, Arial, sans-serif;--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:"DM Mono", Consolas, "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-orange-500:oklch(70.5% .213 47.604);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--drop-shadow-lg:0 4px 4px #00000026;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand:#1a7a45;--color-brand-dark:#145c34;--color-brand-light:#e1f5e6;--color-coral:#b5533c;--color-amber:#d4a017;--color-amber-dark:#a67c00;--color-amber-light:#fdf3d9;--color-forest:#2f9e5c;--color-forest-light:#dcf5e3;--color-ocean:#3b5a6b;--color-ocean-dark:#26404d;--color-ocean-light:#e4eef1;--color-ink:#171717}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{scroll-behavior:smooth;overflow-x:clip}body{max-width:100%;overflow-x:clip}:focus-visible{outline-offset:2px;outline:2px solid var(--enw-primary, #1a7a45)}.book-description-text table{border-collapse:collapse;width:100%;font-size:.875rem}.book-description-text td,.book-description-text th{text-align:left;border:1px solid var(--enw-border, #c8e6d0);padding:6px 10px}@media (max-width:640px){.book-description-text table,.book-description-text td,.book-description-text th{box-sizing:border-box;width:100%;display:block}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;overflow-x:clip}body{color:var(--enw-text, #16301f);-webkit-font-smoothing:antialiased;background:var(--enw-surface, #ffffff);font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;overflow-x:clip}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}:focus-visible{outline-offset:3px;border-radius:4px;outline:3px solid var(--enw-accent, #d4a017)}a,button{-webkit-tap-highlight-color:transparent}::selection{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fef3c7)}}@layer components{.sr-only{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ebn-nav{z-index:50;background:linear-gradient(135deg,var(--enw-primary, #1a7a45) 0%,var(--enw-text-muted, #3b5a6b) 100%);position:sticky;top:0;box-shadow:none}.country-pill{align-items:center;gap:var(--spacing);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));cursor:pointer;border-width:2px;border-radius:3.40282e38px;text-decoration-line:none;display:inline-flex}.ebn-pill-hasdata:after{content:"";vertical-align:middle;background:var(--enw-accent, #34d399);border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:3px;display:inline-block}.ebn-pill-queued:after{content:"⏱";margin-left:3px;font-size:9px}.price-badge{-webkit-text-fill-color:transparent;color:var(--enw-ink, #1a7a45);background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-danger, #b5533c));-webkit-background-clip:text;background-clip:text}.btn-buy-gradient{justify-content:center;align-items:center;gap:calc(var(--spacing) * 3);border-radius:var(--radius-xl);padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 4);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-white);background:linear-gradient(135deg,var(--enw-primary, #1a7a45) 0%,var(--enw-text-muted, #3b5a6b) 100%);text-decoration-line:none;transition:all .2s;display:flex;box-shadow:none}.btn-buy-gradient:hover{background:linear-gradient(135deg,var(--enw-header, #145c34) 0%,var(--enw-text-muted, #26404d) 100%);transform:translateY(-1px);box-shadow:none}.book-card-hover{transition:transform .2s,box-shadow .2s}.book-card-hover:hover{transform:translateY(-4px);box-shadow:none}.mob-nav-fixed{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in srgb, var(--enw-surface, #ffffff) 96.9%, transparent);border-top:2px solid var(--enw-border, #c8e6d0);position:fixed;bottom:0;left:0;right:0}.show-mobile{display:none}@media (max-width:768px){.show-mobile{display:flex}.hide-mobile{display:none!important}body{padding-bottom:68px}}nav,.main-nav,.bd-nav{z-index:100;background:var(--enw-surface, #ffffff);border-bottom:3px solid var(--enw-accent, #d4a017);width:100%;position:sticky;top:0;left:0;right:0;box-shadow:none}.bd-nav{display:block}.bd-nav-inner,nav:not(.bd-nav):not(.main-nav),.main-nav{justify-content:space-between;align-items:center;gap:16px;max-width:1400px;height:62px;margin:0 auto;padding:0 24px;display:flex}nav:not(.bd-nav):not(.main-nav){box-sizing:border-box;width:100%}.nav-logo,.bd-logo{color:var(--enw-accent-ink, #d4a017);letter-spacing:-.5px;white-space:nowrap;flex-shrink:0;align-items:center;gap:0;font-family:Inter,sans-serif;font-size:20px;font-weight:800;text-decoration:none;display:flex}.nav-logo-text,.bd-logo span{-webkit-text-fill-color:transparent;color:var(--enw-accent-ink, #d4a017);background:linear-gradient(90deg,var(--enw-text, #171717) 0% 45%,var(--enw-accent, #d4a017) 45% 100%);-webkit-background-clip:text;background-clip:text}.nav-logo-sub{color:var(--enw-text-muted, #64748b);font-size:11px;font-weight:500}.nav-links,.bd-nav-links{flex:1;justify-content:center;align-items:center;gap:0;display:flex}.nav-link,.bd-nav-link{color:var(--enw-text-muted, #334155);white-space:nowrap;border-radius:6px;padding:8px 14px;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .15s}.nav-link:hover,.bd-nav-link:hover{color:var(--enw-ink, #145c34);background:var(--enw-accent-tint, #e1f5e6)}.nav-link.active{color:var(--enw-accent-ink, #d4a017)}.bd-nav-link--deals{color:var(--enw-danger-ink, #b5533c)!important}.nav-link--addbook,.bd-nav-link--addbook{border-radius:8px;padding:7px 14px;box-shadow:none;color:var(--enw-on-accent, #ffffff)!important;background:var(--enw-accent, #059669)!important;font-weight:800!important;transition:all .15s!important}.nav-link--addbook:hover,.bd-nav-link--addbook:hover{box-shadow:none;color:var(--enw-on-accent) !important;background:var(--enw-accent, #047857)!important}.nav-mobile-link--addbook{color:var(--enw-accent-ink, #047857)!important;background:var(--enw-accent-tint, #dcf5e3)!important;font-weight:800!important}.nav-mobile-link--addbook:hover{color:var(--enw-on-accent) !important;background:var(--enw-accent, #059669)!important}.nav-link.pdf-link{color:var(--enw-danger-ink, #dc2626)}.nav-dropdown{position:relative}.nav-dropdown-menu{z-index:200;background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:12px;min-width:200px;padding:8px;display:none;position:absolute;top:calc(100% + 10px);left:0;box-shadow:none}.nav-dropdown:hover .nav-dropdown-menu{z-index:200;background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:12px;min-width:200px;padding:8px;display:none;position:absolute;top:calc(100% + 10px);left:0;box-shadow:none}.nav-dropdown-menu a{color:var(--enw-text-muted, #334155);border-radius:8px;padding:9px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:all .12s}.nav-dropdown-menu a:hover{color:var(--enw-accent-ink, #d4a017);background:color-mix(in srgb, var(--enw-accent, #d4a017) 10.2%, transparent)}.nav-chevron{opacity:.6;margin-left:3px;font-size:10px;font-style:normal;transition:transform .2s;display:inline-block}.nav-dropdown:hover .nav-chevron{transform:rotate(180deg)}.nav-search,.nav-search-form,.bd-nav-search{background:var(--enw-surface-2, #f6f9f6);border:1.5px solid var(--enw-border, #d8e6dc);border-radius:8px;flex-shrink:0;align-items:center;gap:0;transition:border-color .15s;display:flex;overflow:hidden}.nav-search:focus-within,.nav-search-form:focus-within,.bd-nav-search:focus-within{border-color:var(--enw-accent-ink, #d4a017)}.nav-search input,.nav-search-form input,.bd-nav-search input{color:var(--enw-text, #171717);background:0 0;border:none;outline:none;width:200px;padding:8px 12px;font-size:13px}.nav-search input::placeholder,.nav-search-form input::placeholder,.bd-nav-search input::placeholder{color:var(--enw-text-muted, #475569)}.nav-search button,.nav-search-form button,.bd-nav-search button{color:var(--enw-on-accent, #1c1410);cursor:pointer;background:var(--enw-accent, #d4a017);border:none;align-items:center;gap:5px;padding:8px 16px;font-size:13px;font-weight:800;transition:background .15s;display:flex}.nav-search button:hover,.nav-search-form button:hover,.bd-nav-search button:hover{background:var(--enw-accent, #e0b23a)}.bd-nav-search-icon{color:var(--enw-text-muted, #475569);padding-left:10px;font-size:12px}.nav-hamburger,.bd-hamburger{cursor:pointer;color:var(--enw-text-muted, #334155);background:var(--enw-surface-2, #f6f9f6);border:1.5px solid var(--enw-border, #d8e6dc);border-radius:8px;flex-shrink:0;padding:7px 12px;font-size:18px;line-height:1;display:none}.bd-mobile-menu{z-index:200;background:var(--enw-surface, #ffffff);border-bottom:3px solid var(--enw-accent, #d4a017);flex-direction:column;align-items:stretch;max-height:calc(100vh - 65px);margin:0;padding:12px 16px 20px;position:fixed;top:65px;left:0;right:0;overflow-y:auto;box-shadow:none}.nav-links.open{z-index:200;background:var(--enw-surface, #ffffff);border-bottom:3px solid var(--enw-accent, #d4a017);flex-direction:column;align-items:stretch;max-height:calc(100vh - 65px);margin:0;padding:12px 16px 20px;position:fixed;top:65px;left:0;right:0;overflow-y:auto;box-shadow:none;display:flex!important}.nav-links.open .nav-link,.nav-links.open .bd-nav-link,.bd-mobile-menu .bd-mobile-link{color:var(--enw-text-muted, #334155);text-align:center;border-bottom:1px solid var(--enw-border, #f1f5f9);border-radius:10px;padding:14px 20px;font-size:16px;font-weight:600;text-decoration:none;transition:all .15s;display:block}.nav-links.open .nav-link:last-child,.bd-mobile-menu .bd-mobile-link:last-child{border-bottom:none}.nav-links.open .nav-link:hover,.bd-mobile-menu .bd-mobile-link:hover{color:var(--enw-accent-ink, #d4a017);background:color-mix(in srgb, var(--enw-accent, #d4a017) 12.2%, transparent)}.bd-mobile-link--deals{color:var(--enw-danger-ink, #b5533c)!important}.nav-links.open .nav-dropdown-menu{box-shadow:none;background:var(--enw-surface-2, #f8fafc);border:none;border-radius:8px;margin:0 8px 8px;padding:4px;display:flex;position:static}.nav-links.open .nav-dropdown-menu a{text-align:center;color:var(--enw-text-muted, #334155);padding:8px}.nav-links.open .nav-search,.nav-links.open .nav-search-form{display:none}.bd-mobile-search{background:var(--enw-surface-2, #f6f9f6);border:1.5px solid var(--enw-border, #d8e6dc);border-radius:10px;margin-top:14px;display:flex;overflow:hidden}.bd-mobile-search input{color:var(--enw-text, #171717);background:0 0;border:none;outline:none;flex:1;padding:13px 16px;font-size:15px}.bd-mobile-search input::placeholder{color:var(--enw-text-muted, #475569)}.bd-mobile-search button{color:var(--enw-on-accent, #1c1410);cursor:pointer;background:var(--enw-accent, #d4a017);border:none;padding:13px 22px;font-size:14px;font-weight:900;transition:background .15s}.bd-mobile-search button:hover{background:var(--enw-accent, #e0b23a)}@media (max-width:900px){/* The phone menu. These two declarations were the DESKTOP ones (nav shown, hamburger
   hidden) sitting inside a max-width:900px block, which left every page under 900px
   with a squashed nav row and no menu button at all. tools/enw_theme_test.php now
   asserts the collapse so a regenerated sheet cannot bring it back. */
.nav-links,.bd-nav-links,.nav-search,.nav-search-form,.bd-nav-search{display:none}.nav-hamburger,.bd-hamburger{align-items:center;display:flex}.nav-links.open,.bd-mobile-menu{z-index:200;background:var(--enw-surface, #ffffff);border-bottom:3px solid var(--enw-accent, #d4a017);flex-direction:column;align-items:stretch;max-height:calc(100vh - 65px);margin:0;padding:12px 16px 20px;position:fixed;top:65px;left:0;right:0;overflow-y:auto;box-shadow:none}}.nav-mobile-menu{z-index:200;background:var(--enw-surface, #ffffff);border-bottom:3px solid var(--enw-accent, #d4a017);flex-direction:column;align-items:stretch;max-height:calc(100vh - 65px);padding:12px 16px 20px;position:fixed;top:65px;left:0;right:0;overflow-y:auto;box-shadow:none}.nav-mobile-link{color:var(--enw-text-muted, #334155);text-align:center;border-bottom:1px solid var(--enw-border, #f1f5f9);border-radius:10px;padding:14px 20px;font-size:16px;font-weight:600;text-decoration:none;transition:all .15s;display:block}.nav-mobile-link:last-of-type{border-bottom:none}.nav-mobile-link:hover{color:var(--enw-accent-ink, #d4a017);background:color-mix(in srgb, var(--enw-accent, #d4a017) 12.2%, transparent)}.nav-mobile-link--deals{color:var(--enw-danger-ink, #b5533c)}.nav-mobile-search{background:var(--enw-surface-2, #f6f9f6);border:1.5px solid var(--enw-border, #d8e6dc);border-radius:10px;margin-top:14px;display:flex;overflow:hidden}.nav-mobile-search input{color:var(--enw-text, #171717);background:0 0;border:none;outline:none;flex:1;padding:13px 16px;font-size:15px}.nav-mobile-search input::placeholder{color:var(--enw-text-muted, #475569)}.nav-mobile-search button{color:var(--enw-on-accent, #1c1410);cursor:pointer;background:var(--enw-accent, #d4a017);border:none;padding:13px 22px;font-size:14px;font-weight:900}footer,.site-footer,.bd-footer{background:var(--enw-header, #0d1f16);border-top:1px solid var(--enw-border, #16301f);margin-top:80px;padding:64px 24px 0}.footer-inner,.bd-footer-inner{grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;max-width:1400px;margin:0 auto;padding-bottom:48px;display:grid}.footer-brand,.bd-footer-brand{color:var(--enw-on-header, #d4a017);align-items:center;gap:8px;margin-bottom:14px;font-family:Inter,sans-serif;font-size:22px;font-weight:800;display:flex}.footer-desc{color:var(--enw-text-muted, #475569);max-width:320px;margin-bottom:20px;font-size:14px;line-height:1.8}.footer-col h4,.footer-links-heading{text-transform:uppercase;letter-spacing:.14em;color:var(--enw-text-muted, #475569);margin-bottom:18px;font-family:DM Mono,monospace;font-size:10px;font-weight:700}.footer-col a,.footer-links a,.bd-footer-links a{color:var(--enw-text-muted, #64748b);margin-bottom:11px;font-size:14px;text-decoration:none;transition:color .15s;display:block}.footer-col a:hover,.footer-links a:hover,.bd-footer-links a:hover{color:var(--enw-on-header, #d4a017)}.footer-contact,.bd-footer-contact{color:var(--enw-text-muted, #64748b);font-size:14px;line-height:2}.footer-contact strong,.bd-footer-contact strong{color:var(--enw-text-muted, #94a3b8)}.footer-social{gap:10px;margin-top:18px;display:flex}.footer-social a{color:var(--enw-on-header, #64748b);background:var(--enw-header, #16301f);border:1px solid var(--enw-border, #2c4536);border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;font-size:15px;font-style:normal;text-decoration:none;transition:all .15s;display:flex}.footer-social a:hover{color:var(--enw-on-accent, #1c1410);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.footer-bottom,.bd-footer-bottom{text-align:center;color:var(--enw-text-muted, #2c4536);border-top:1px solid var(--enw-border, #16301f);margin:0 -24px;padding:24px;font-family:DM Mono,monospace;font-size:13px}@media (max-width:1024px){.footer-inner,.bd-footer-inner{grid-template-columns:1fr 1fr}.footer-inner>div:first-child,.bd-footer-inner>div:first-child{grid-column:1/-1}}@media (max-width:640px){.footer-inner,.bd-footer-inner{grid-template-columns:1fr;gap:32px}footer,.site-footer,.bd-footer{margin-top:60px;padding:48px 20px 0}.footer-bottom,.bd-footer-bottom{margin:0 -20px}}.dual-hero{display:block}.pdf-hero{text-align:center;background:linear-gradient(160deg,var(--enw-header, #0d1f16) 0%,var(--enw-header, #12291d) 40%,var(--enw-header, #1a4a2e) 100%);flex-direction:column;align-items:center;padding:96px 24px 80px;display:flex;position:relative;overflow:hidden}.pdf-hero:before{content:"";pointer-events:none;background:radial-gradient(80% 50% at 50% 100%,color-mix(in srgb, var(--enw-accent, #d4a017) 12.2%, transparent) 0%,#0000 60%),radial-gradient(circle at 20% 20%,color-mix(in srgb, var(--enw-primary, #1a7a45) 14.9%, transparent) 0%,#0000 40%),radial-gradient(circle at 80% 80%,color-mix(in srgb, var(--enw-text-muted, #3b5a6b) 10.2%, transparent) 0%,#0000 40%);position:absolute;inset:0}.pdf-hero-badge{color:var(--enw-accent-ink, #e0b23a);letter-spacing:.05em;z-index:1;background:color-mix(in srgb, var(--enw-accent, #d4a017) 14.9%, transparent);border:1px solid color-mix(in srgb, var(--enw-accent, #d4a017) 40%, transparent);border-radius:100px;align-items:center;gap:8px;margin-bottom:24px;padding:7px 18px;font-family:DM Mono,monospace;font-size:12px;display:inline-flex;position:relative}.pdf-hero h1{color:var(--enw-on-primary, #ffffff);letter-spacing:-2px;z-index:1;max-width:820px;margin-bottom:18px;font-family:Inter,sans-serif;font-size:clamp(36px,6vw,68px);font-weight:800;line-height:1.05;position:relative}.pdf-hero h1 em{color:var(--enw-accent-ink, #d4a017);font-style:normal}.pdf-hero p{color:var(--enw-text-muted, #94a3b8);z-index:1;max-width:560px;margin-bottom:36px;font-size:18px;line-height:1.7;position:relative}.pdf-search-form{z-index:1;background:var(--enw-surface, #ffffff);border-radius:14px;width:100%;max-width:680px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 4px #d4a0174d}.pdf-search-form input{color:var(--enw-text, #0d1f16);background:0 0;border:none;outline:none;flex:1;padding:18px 24px;font-family:DM Sans,sans-serif;font-size:16px}.pdf-search-form input::placeholder{color:var(--enw-text-muted, #94a3b8)}.pdf-search-form button{color:var(--enw-on-accent, #1c1410);cursor:pointer;white-space:nowrap;background:var(--enw-accent, #d4a017);border:none;align-items:center;gap:8px;padding:18px 32px;font-size:15px;font-weight:900;transition:background .15s;display:flex}.pdf-search-form button:hover{background:var(--enw-accent, #e0b23a)}.pdf-hero-hint{color:var(--enw-text-muted, #475569);z-index:1;margin-top:16px;font-family:DM Mono,monospace;font-size:12px;position:relative}.stats-strip{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);flex-wrap:wrap;display:flex;box-shadow:none}.stat-item{border-right:1px solid var(--enw-border, #f1f5f9);flex-direction:column;flex:1 1 0;align-items:center;min-width:120px;padding:24px 20px;display:flex;position:relative}.stat-item:last-child{border-right:none}.stat-num{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-accent, #d4a017),var(--enw-danger, #ef4444));-webkit-background-clip:text;background-clip:text;font-family:Inter,sans-serif;font-size:32px;font-weight:800;line-height:1}.stat-item:nth-child(2) .stat-num{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-danger, #ec4899));-webkit-background-clip:text;background-clip:text}.stat-item:nth-child(3) .stat-num{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-accent, #059669),var(--enw-text-muted, #3b5a6b));-webkit-background-clip:text;background-clip:text}.stat-item:nth-child(4) .stat-num{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-danger, #b5533c),var(--enw-accent, #eab308));-webkit-background-clip:text;background-clip:text}.stat-item:nth-child(5) .stat-num{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-text-muted, #26404d),var(--enw-primary, #1a7a45));-webkit-background-clip:text;background-clip:text}.stat-num.blue{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-danger, #ec4899));-webkit-background-clip:text;background-clip:text}.stat-label{color:var(--enw-text-muted, #94a3b8);text-align:center;margin-top:6px;font-family:DM Mono,monospace;font-size:11px}.section{padding:64px 0}.section.alt{background:var(--enw-surface-2, #fafafa);border-top:1px solid var(--enw-border, #f1f5f9);border-bottom:1px solid var(--enw-border, #f1f5f9)}.section-inner{max-width:1400px;margin:0 auto;padding:0 24px}.section-hd{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:32px;display:flex}.section-hd h2{color:var(--enw-text, #0d1f16);letter-spacing:-.3px;align-items:center;gap:12px;font-family:Inter,sans-serif;font-size:26px;font-weight:800;display:flex}.section-hd .icon{font-size:24px}.section-hd a{color:var(--enw-ink, #1a7a45);background:var(--enw-accent-tint, #e1f5e6);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:700;text-decoration:none;transition:all .15s}.section-hd a:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45)}.books-shelf{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;display:grid}.book-card{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:14px;flex-direction:column;text-decoration:none;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;display:flex;position:relative;overflow:hidden;box-shadow:none}.book-card:hover{border-color:var(--enw-border, #e2e8f0);transform:translateY(-6px);box-shadow:none}.book-card-img,.book-card-cover{aspect-ratio:2/3;background:var(--enw-surface-2, #f8fafc);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.book-card-img img,.book-card-cover img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.book-card:hover .book-card-img img,.book-card:hover .book-card-cover img{transform:scale(1.04)}.book-card-body{border-top:1px solid var(--enw-on-primary, #f8fafc);flex-direction:column;flex:1;padding:12px;display:flex}.book-card-title{color:var(--enw-text, #0d1f16);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:5px;font-size:12.5px;font-weight:700;line-height:1.4;display:-webkit-box;overflow:hidden}.book-card-title a{color:inherit;text-decoration:none}.book-card-author{color:var(--enw-ink, #1a7a45);white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:11px;font-weight:600;overflow:hidden}.book-card-price{color:var(--enw-on-accent, #ffffff);background:var(--enw-accent, #16a34a);border-radius:6px;align-items:center;gap:4px;width:fit-content;margin-top:4px;padding:3px 8px;font-family:DM Mono,monospace;font-size:12px;font-weight:800;display:inline-flex}.book-card-btn{text-align:center;color:var(--enw-on-accent, #ffffff);background:var(--enw-accent, #059669);border-radius:8px;margin-top:auto;padding:8px;font-size:11px;font-weight:800;text-decoration:none;transition:all .15s;display:block}.book-card-btn:hover{background:var(--enw-accent, #047857);transform:translateY(-1px)}.book-card-new-badge{z-index:1;color:var(--enw-on-danger);letter-spacing:.07em;background:var(--enw-danger, #b5533c);border-radius:6px;padding:3px 8px;font-size:9px;font-weight:800;position:absolute;top:8px;left:8px}.rank-badge{z-index:1;color:var(--enw-on-accent);background:linear-gradient(135deg,var(--enw-accent, #d4a017),var(--enw-danger, #ef4444));border-radius:6px;padding:3px 8px;font-family:DM Mono,monospace;font-size:10px;font-weight:800;position:absolute;top:8px;left:8px}.book-card-cover-fallback{font-size:48px}.book-card-meta{color:var(--enw-text-muted, #64748b);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:11px;overflow:hidden}.book-card-meta a{color:var(--enw-ink, #1a7a45);font-weight:600;text-decoration:none}.book-card-country{color:var(--enw-text-muted, #94a3b8);margin-top:3px;font-family:DM Mono,monospace;font-size:10px}.cat-pills{flex-wrap:wrap;gap:10px;display:flex}.cat-pill{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:100px;align-items:center;gap:8px;padding:10px 20px;font-size:13.5px;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.cat-pill-icon{font-size:17px}.cat-pill-name{font-weight:600}.cat-pill-count{color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:11px}.cat-pill:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017);box-shadow:none}.search-tags{flex-wrap:wrap;gap:8px;display:flex}.search-tag{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:100px;padding:8px 18px;font-size:13px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-block;box-shadow:none}.search-tag:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.entity-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.entity-card{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #f1f5f9);border-radius:14px;align-items:center;gap:16px;padding:18px 20px;text-decoration:none;transition:all .15s;display:flex;box-shadow:none}.entity-card:hover{border-color:var(--enw-accent-ink, #d4a017);transform:translateY(-2px);box-shadow:none}.entity-icon,.entity-avatar{color:var(--enw-on-primary, #ffffff);background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-primary, #1a7a45));border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-family:Inter,sans-serif;font-size:18px;font-weight:800;display:flex;box-shadow:none}.entity-icon.pub-icon,.entity-avatar.pub{background:linear-gradient(135deg,var(--enw-text-muted, #26404d),var(--enw-text-muted, #3b5a6b));box-shadow:none}.entity-info{flex:1;min-width:0}.entity-name{color:var(--enw-text, #0d1f16);white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:700;overflow:hidden}.entity-count{color:var(--enw-text-muted, #94a3b8);margin-top:2px;font-family:DM Mono,monospace;font-size:11px}.entity-arrow{color:var(--enw-border, #cbd5e1);font-size:12px}.feature-banner{text-align:center;background:linear-gradient(135deg,var(--enw-header, #0d1f16) 0%,var(--enw-header, #12291d) 50%,var(--enw-header, #0d1f16) 100%);padding:80px 24px;position:relative;overflow:hidden}.feature-banner:before{content:"";pointer-events:none;background:radial-gradient(60% 80%,color-mix(in srgb, var(--enw-accent, #d4a017) 7.8%, transparent) 0%,#0000 70%);position:absolute;inset:0}.feature-banner h2{color:var(--enw-on-primary, #ffffff);letter-spacing:-1px;margin-bottom:16px;font-family:Inter,sans-serif;font-size:clamp(32px,5vw,48px);font-weight:800;line-height:1.1}.feature-banner h2 em{color:var(--enw-on-primary);font-style:normal}.feature-banner p{color:color-mix(in srgb, var(--enw-on-primary) 82%, transparent);margin-bottom:36px;font-size:16px;line-height:1.8}.feature-btns{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.btn-primary{color:var(--enw-on-accent, #ffffff);background:var(--enw-accent, #059669);border-radius:12px;align-items:center;gap:8px;padding:16px 32px;font-size:15px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.btn-primary:hover{background:var(--enw-accent, #047857);transform:translateY(-1px);box-shadow:none}.btn-secondary{color:var(--enw-text-muted, #94a3b8);background:0 0;border:1.5px solid var(--enw-border, #2c4536);border-radius:12px;align-items:center;gap:8px;padding:16px 32px;font-size:15px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn-secondary:hover{color:var(--enw-on-primary, #ffffff);border-color:var(--enw-text-muted, #94a3b8)}.contact-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.contact-card,.contact-info,.contact-form-wrap{background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:18px;padding:32px;box-shadow:none}.contact-card h3,.contact-info h3,.contact-form-wrap h3{color:var(--enw-text, #0d1f16);margin-bottom:18px;font-family:Inter,sans-serif;font-size:20px;font-weight:800}.contact-card p,.contact-info p{color:var(--enw-text-muted, #475569);margin-bottom:8px;font-size:14px;line-height:1.9}.contact-form{flex-direction:column;gap:12px;display:flex}.contact-form input,.contact-form textarea{color:var(--enw-text, #0d1f16);background:var(--enw-surface-2, #fafafa);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;outline:none;width:100%;padding:13px 16px;font-family:DM Sans,sans-serif;font-size:14px;transition:border-color .15s}.contact-form input:focus,.contact-form textarea:focus{background:var(--enw-surface, #ffffff);border-color:var(--enw-accent-ink, #d4a017);box-shadow:0 0 0 3px #d4a0171a}.contact-form textarea{resize:vertical;height:120px}.contact-form button{color:var(--enw-on-accent);cursor:pointer;background:var(--enw-accent, #d4a017);border:none;border-radius:10px;padding:14px 24px;font-size:15px;font-weight:800;transition:all .15s;box-shadow:none}.contact-form button:hover{background:var(--enw-accent, #e0b23a);transform:translateY(-1px)}.bd-body{color:var(--enw-text, #0d1f16);background:var(--enw-surface-2, #f8fafc);font-family:DM Sans,-apple-system,sans-serif;line-height:1.6;overflow-x:clip}.bd-container{max-width:1200px;margin:0 auto;padding:32px 24px 80px}.bd-breadcrumb a{color:var(--enw-ink, #1a7a45);font-weight:600;text-decoration:none}.bd-breadcrumb a:hover{text-decoration:underline}.bd-bc-sep{color:var(--enw-border, #cbd5e1);margin:0 8px}.bd-bc-current{color:var(--enw-text-muted, #64748b)}.bd-layout{align-items:flex-start;gap:56px;display:flex}.bd-cover-col{flex-shrink:0;width:280px;position:sticky;top:90px}.bd-info-col{flex:1;min-width:0}.bd-cover-link{background:linear-gradient(135deg,var(--enw-surface-2, #f8fafc),var(--enw-surface-2, #f1f5f9));border-radius:16px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;display:block;position:relative;overflow:hidden;box-shadow:none}.bd-cover-link:hover{transform:translateY(-6px)scale(1.02);box-shadow:none}.bd-cover-img{object-fit:contain;width:100%;height:auto;padding:8px;display:block}.bd-cover-overlay{color:var(--enw-on-header, #ffffff);text-align:center;opacity:0;background:linear-gradient(#0000,color-mix(in srgb, var(--enw-header, #0d1f16) 92.2%, transparent));padding:32px 16px 14px;font-size:14px;font-weight:700;transition:opacity .2s;position:absolute;bottom:0;left:0;right:0}.bd-cover-link:hover .bd-cover-overlay{opacity:1}.bd-social{flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;display:flex}.bd-social-btn{color:var(--enw-on-primary, #ffffff);border-radius:9px;justify-content:center;align-items:center;width:38px;height:38px;font-style:normal;text-decoration:none;transition:transform .15s,opacity .15s;display:flex}.bd-social-btn:hover{transform:scale(1.1)}.bd-social-btn--twitter{background:#000}.bd-social-btn--fb{background:#1877f2}.bd-social-btn--li{background:#0a66c2}.bd-qr-btn{color:var(--enw-text-muted, #475569);cursor:pointer;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:9px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.bd-qr-btn:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.bd-qr-panel{background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:12px;align-items:center;gap:14px;margin-top:12px;padding:14px;display:flex}.bd-qr-url{color:var(--enw-text-muted, #94a3b8);word-break:break-all;font-family:DM Mono,monospace;font-size:10px}.bd-title{color:var(--enw-text, #0d1f16);letter-spacing:-.5px;margin-bottom:18px;font-family:Inter,sans-serif;font-size:clamp(22px,3vw,38px);font-weight:800;line-height:1.15}.bd-meta-chips{border-bottom:1px solid var(--enw-border, #f1f5f9);flex-wrap:wrap;gap:20px;margin-bottom:24px;padding-bottom:24px;display:flex}.bd-meta-chip-label{text-transform:uppercase;letter-spacing:.1em;color:var(--enw-text-muted, #94a3b8);margin-bottom:4px;font-family:DM Mono,monospace;font-size:10px;font-weight:700;display:block}.bd-meta-chip-value{border:1.5px solid;border-radius:20px;align-items:center;padding:6px 16px;font-size:13px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.bd-meta-chip-value:hover{transform:translateY(-1px);box-shadow:none}.bd-meta-chip-value--author{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border-color:var(--enw-border, #c8e6d0)}.bd-follow{cursor:pointer;color:var(--enw-accent-ink, #6b4e13);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-accent, #d4a017);border-radius:20px;align-items:center;gap:6px;margin-inline-start:8px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.4;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.bd-follow:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.bd-follow:focus-visible{outline-offset:2px}.bd-follow.is-following{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45)}.bd-follow.is-following:hover{color:var(--enw-on-header, #ffffff);background:var(--enw-header, #145c34);border-color:var(--enw-primary-dark, #145c34)}.bd-follow[aria-busy=true]{opacity:.65;cursor:progress}.bd-follow:disabled{cursor:default;opacity:.65}.bd-meta-chip-value--author:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45)}.bd-meta-chip-value--pub{color:var(--enw-text-muted, #26404d);background:var(--enw-surface-2, #e4eef1);border-color:var(--enw-border, #c8d8de)}.bd-meta-chip-value--pub:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-text-muted, #26404d);border-color:var(--enw-text-muted, #26404d)}.bd-meta-chip-value--cat{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-tint, #f0dfa8)}.bd-meta-chip-value--cat:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.bd-country-switcher{margin-bottom:24px}.bd-country-label{text-transform:uppercase;letter-spacing:.1em;color:var(--enw-text-muted, #94a3b8);align-items:center;gap:6px;margin-bottom:10px;font-family:DM Mono,monospace;font-size:11px;font-weight:700;display:flex}.bd-country-pills{flex-wrap:wrap;gap:6px;display:flex}.bd-pill{cursor:pointer;color:var(--enw-text-muted, #475569);white-space:nowrap;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:20px;align-items:center;gap:5px;padding:7px 14px;font-size:12px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.bd-pill--has-data{color:var(--enw-text-muted, #2c4536);border-color:var(--enw-border, #e2e8f0)}.bd-pill--has-data:after{content:"";background:var(--enw-accent, #10b981);border-radius:50%;width:6px;height:6px;margin-left:3px;display:inline-block}.bd-pill--has-data:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.bd-pill--active{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:800;box-shadow:none}.bd-pill--active:after{content:"";background:#fff6;border-radius:50%;width:6px;height:6px;margin-left:3px;display:inline-block}.bd-pill--active-nodata{color:var(--enw-on-danger);background:var(--enw-danger, #b5533c);border-color:var(--enw-danger-ink, #b5533c)}.bd-pill--queued{color:var(--enw-text-muted, #26404d);background:var(--enw-surface-2, #e4eef1);border-color:var(--enw-border, #c8d8de)}.bd-pill--no-data{opacity:.45;border-style:dashed}.bd-price-box{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:18px;margin-bottom:24px;overflow:hidden;box-shadow:none}.bd-price-box-stripe{background:linear-gradient(90deg,var(--enw-accent, #d4a017) 0%,var(--enw-danger, #ef4444) 35%,var(--enw-primary, #1a7a45) 70%,var(--enw-text-muted, #3b5a6b) 100%);height:5px}.bd-price-box-body{padding:24px 28px}.bd-price-row{flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:22px;display:flex}.bd-price-offer{color:var(--enw-accent-ink, #16a34a);letter-spacing:-1px;font-family:Inter,sans-serif;font-size:52px;font-weight:800;line-height:1}.bd-price-list{color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:20px;text-decoration:line-through}.bd-discount{color:var(--enw-on-danger);background:var(--enw-danger, #dc2626);border-radius:8px;padding:4px 12px;font-family:DM Mono,monospace;font-size:13px;font-weight:800}.bd-currency{color:var(--enw-text-muted, #94a3b8);margin-left:-4px;font-family:DM Mono,monospace;font-size:14px}.bd-buy-btns{flex-wrap:wrap;gap:12px;display:flex}.bd-btn-buy{color:var(--enw-on-primary, #ffffff);letter-spacing:-.2px;background:var(--enw-primary, #1a7a45);border-radius:14px;flex:1;justify-content:center;align-items:center;gap:10px;padding:17px 28px;font-size:16px;font-weight:900;text-decoration:none;transition:all .2s;display:inline-flex;box-shadow:none}.bd-btn-buy:hover{background:var(--enw-header, #145c34);transform:translateY(-1px);box-shadow:none}.bd-btn-used{color:var(--enw-on-primary, #ffffff);background:var(--enw-accent-ink, #a67c00);border:none;border-radius:14px;align-items:center;gap:8px;padding:17px 22px;font-size:14px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.bd-btn-used:hover{background:var(--enw-accent-ink, #8a6300);transform:translateY(-1px);box-shadow:none}.bd-availability{color:var(--enw-accent-ink, #16a34a);align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;display:flex}.bd-no-price-notice{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1.5px solid var(--enw-accent-tint, #f0dfa8);border-radius:12px;margin-top:4px;padding:16px 20px;font-size:14px}.bd-no-price-notice strong{margin-bottom:4px;font-weight:800;display:block}.bd-alt-countries{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.bd-alt-countries a{color:var(--enw-accent-ink, #8a6300);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-accent-tint, #f0dfa8);border-radius:16px;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.bd-alt-countries a:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.bd-specs{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:none}.bd-specs-header{color:var(--enw-on-header, #f8fafc);letter-spacing:.01em;background:var(--enw-header, #0d1f16);align-items:center;gap:8px;padding:14px 22px;font-size:14px;font-weight:700;display:flex}.bd-specs-body{background:var(--enw-surface, #ffffff)}.bd-spec-row{border-bottom:1px solid var(--enw-on-primary, #f8fafc);align-items:baseline;padding:12px 22px;display:flex}.bd-spec-row:last-child{border-bottom:none}.bd-spec-row:nth-child(2n){background:var(--enw-surface-2, #fafafa)}.bd-spec-label{text-transform:uppercase;letter-spacing:.08em;color:var(--enw-text-muted, #94a3b8);flex-shrink:0;width:140px;padding-top:1px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.bd-spec-value{color:var(--enw-text, #16301f);font-size:14px}.bd-spec-value a{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border:1.5px solid var(--enw-border, #c8e6d0);border-radius:20px;align-items:center;padding:5px 14px;font-size:13px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.bd-spec-value a:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);transform:translateY(-1px);box-shadow:none}.bd-spec-row--pub .bd-spec-value a{color:var(--enw-text-muted, #26404d);background:var(--enw-surface-2, #e4eef1);border-color:var(--enw-border, #c8d8de)}.bd-spec-row--pub .bd-spec-value a:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-text-muted, #26404d);border-color:var(--enw-text-muted, #26404d)}.bd-spec-row--cat .bd-spec-value a{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-tint, #f0dfa8)}.bd-spec-row--cat .bd-spec-value a:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.bd-spec-mono{color:var(--enw-text-muted, #475569);background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0);border-radius:8px;padding:3px 10px;font-family:DM Mono,monospace;font-size:13px}.bd-spec-avail{color:var(--enw-accent-ink, #16a34a);font-weight:700}.bd-desc{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:none}.bd-desc-header{color:var(--enw-on-header, #f8fafc);background:var(--enw-header, #16301f);align-items:center;gap:8px;padding:14px 22px;font-size:14px;font-weight:700;display:flex}.bd-desc-body{color:var(--enw-text-muted, #2c4536);padding:22px;font-size:14.5px;line-height:1.85}.bd-desc-body p{margin-bottom:14px}.bd-desc-body p:last-child{margin-bottom:0}.bd-similar{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:none}.bd-similar-header{color:var(--enw-on-header, #f8fafc);background:var(--enw-header, #12291d);align-items:center;gap:8px;padding:14px 22px;font-size:14px;font-weight:700;display:flex}.bd-similar-body{color:var(--enw-text-muted, #2c4536);padding:22px;font-size:14px}.bd-related{margin-top:56px}.bd-related-header{border-radius:14px 14px 0 0;align-items:center;gap:12px;padding:16px 22px;display:flex}.bd-related-header h2{color:var(--enw-on-primary, #ffffff);font-family:Inter,sans-serif;font-size:18px;font-weight:800}.bd-related-icon{font-size:20px}.bd-related-header--cat{background:linear-gradient(135deg,var(--enw-accent-ink, #a67c00),var(--enw-accent, #d4a017))}.bd-related-header--author{background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-accent, #2f9e5c))}.bd-book-grid{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-top:none;border-radius:0 0 14px 14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:20px;display:grid;box-shadow:none}.bd-book-card{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:12px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden;box-shadow:none}.bd-book-card:hover{transform:translateY(-4px);box-shadow:none}.bd-book-card--cat:hover{border-color:var(--enw-accent-tint, #f0dfa8);box-shadow:none}.bd-book-card--author:hover{border-color:var(--enw-border, #c8e6d0);box-shadow:none}.bd-book-card-img{text-align:center;background:var(--enw-surface-2, #fafafa);padding:12px;display:block}.bd-book-card-img img{object-fit:contain;width:100px;height:140px}.bd-book-card-body{flex-direction:column;flex:1;padding:10px 12px;display:flex}.bd-book-card-title{color:var(--enw-text, #0d1f16);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:10px;font-size:12px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.bd-book-card-btn{text-align:center;color:var(--enw-on-danger);background:var(--enw-danger, #b5533c);border-radius:8px;margin-top:auto;padding:8px;font-size:11px;font-weight:800;text-decoration:none;transition:all .15s;display:block}.bd-book-card-btn:hover{background:var(--enw-danger, #8a3f2c);transform:translateY(-1px)}.bd-book-card-btn--author{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45)}.bd-book-card-btn--author:hover{background:var(--enw-primary, #1a7a45)}.bd-donate{text-align:center;margin-top:48px}.bd-donate img{border-radius:12px;max-width:300px;margin:0 auto;box-shadow:none}.bd-arrows{display:none}.bd-float-arrow{z-index:80;color:var(--enw-on-primary, #ffffff);align-items:center;text-decoration:none;transition:all .2s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;transform:translateY(-50%)}.bd-float-arrow--prev{flex-direction:row;left:0}.bd-float-arrow--next{flex-direction:row-reverse;right:0}.bd-float-arrow-icon{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:88px;font-size:26px;font-weight:900;transition:all .2s;display:flex}.bd-float-arrow--prev .bd-float-arrow-icon{border-radius:0 16px 16px 0}.bd-float-arrow--next .bd-float-arrow-icon{border-radius:16px 0 0 16px}.bd-float-arrow:hover .bd-float-arrow-icon{background:var(--enw-accent-ink, #a67c00);width:58px;box-shadow:none}.bd-float-arrow-label{opacity:0;white-space:nowrap;background:var(--enw-header, #1c1410);flex-direction:column;justify-content:center;max-width:0;height:88px;transition:all .25s;display:flex;overflow:hidden}.bd-float-arrow--prev .bd-float-arrow-label{border-radius:0 16px 16px 0;align-items:flex-start}.bd-float-arrow--next .bd-float-arrow-label{border-radius:16px 0 0 16px;align-items:flex-end}.bd-float-arrow:hover .bd-float-arrow-label{opacity:1;max-width:200px;padding:0 16px}.bd-float-arrow-tag{text-transform:uppercase;letter-spacing:.12em;color:var(--enw-accent-ink, #d4a017);margin-bottom:3px;font-family:DM Mono,monospace;font-size:9px;font-weight:800;display:block}.bd-float-arrow-title{color:var(--enw-on-primary, #ffffff);text-overflow:ellipsis;max-width:180px;font-size:12px;font-weight:700;display:block;overflow:hidden}.bd-float-arrow:before{content:"";opacity:.5;background:var(--enw-accent, #d4a017);width:6px;height:40px;transition:opacity .2s;position:absolute;top:50%;transform:translateY(-50%)}.bd-float-arrow--prev:before{border-radius:0 6px 6px 0;left:0}.bd-float-arrow--next:before{border-radius:6px 0 0 6px;right:0}.bd-float-arrow:hover:before{opacity:0}.bd-mob-nav{z-index:90;background:var(--enw-surface, #ffffff);border-top:1px solid var(--enw-border, #e2e8f0);display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:none}.bd-mob-btn{color:var(--enw-text, #0d1f16);flex:1;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;transition:background .15s;display:flex}.bd-mob-btn:active{background:var(--enw-accent-tint, #fdf3d9)}.bd-mob-btn--right{text-align:right;justify-content:flex-end}.bd-mob-btn--disabled{opacity:.3;pointer-events:none}.bd-mob-arrow{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;font-weight:900;line-height:1;display:flex;box-shadow:none}.bd-mob-btn--disabled .bd-mob-arrow{color:var(--enw-text-muted, #94a3b8);box-shadow:none;background:var(--enw-surface-2, #f1f5f9)}.bd-mob-info{flex-direction:column;flex:1;min-width:0;display:flex}.bd-mob-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:10px;font-weight:700}.bd-mob-title{color:var(--enw-text, #0d1f16);white-space:nowrap;text-overflow:ellipsis;max-width:140px;margin-top:2px;font-size:12px;font-weight:700;overflow:hidden}.bd-mob-divider{background:var(--enw-surface-2, #f1f5f9);flex-shrink:0;width:1px;margin:10px 0}.ico{vertical-align:-.125em;fill:currentColor;flex-shrink:0;width:1em;height:1em;display:inline-block}.ico-pdf{color:var(--enw-danger-ink, #dc2626)}.mini-hero{background:linear-gradient(160deg,var(--enw-header, #0d1f16) 0%,var(--enw-header, #16301f) 60%,var(--enw-header, #0d1f16) 100%);border-bottom:3px solid var(--enw-accent, #d4a017);padding:24px 24px 20px;position:relative;overflow:hidden}.mini-hero:before{content:"";pointer-events:none;background:radial-gradient(60% 80% at 50% 100%,color-mix(in srgb, var(--enw-accent, #d4a017) 7.8%, transparent) 0%,#0000 60%);position:absolute;inset:0}.mini-search{background:var(--enw-surface, #ffffff);border-radius:12px;gap:0;max-width:860px;margin:0 auto 12px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 3px #dc262640}.mini-search input{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:none;outline:none;flex:1;padding:16px 20px;font-family:DM Sans,sans-serif;font-size:15px}.mini-search input::placeholder{color:var(--enw-text-muted, #94a3b8)}.mini-search button{color:var(--enw-on-accent);cursor:pointer;white-space:nowrap;background:var(--enw-accent, #d4a017);border:none;align-items:center;gap:8px;padding:16px 28px;font-size:14px;font-weight:900;transition:background .15s;display:flex}.mini-search button:hover{background:var(--enw-accent, #e0b23a)}.results-title{color:#fffc;align-items:center;gap:8px;max-width:860px;margin:0 auto;font-family:Inter,sans-serif;font-size:16px;font-weight:700;display:flex;position:relative}.main-wrap{max-width:960px;margin:0 auto;padding:28px 24px}.pdf-section{border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:32px;overflow:hidden;box-shadow:none}.pdf-section-heading{background:var(--enw-header, #0d1f16);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;display:flex}.pdf-section-heading h2{color:var(--enw-on-primary, #ffffff);align-items:center;gap:8px;font-family:Inter,sans-serif;font-size:17px;font-weight:800;display:flex}.pdf-count{color:var(--enw-on-primary, #ffffff);background:#0003;border-radius:20px;padding:3px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.pdf-link-list{background:var(--enw-surface, #ffffff);flex-direction:column;list-style:none;display:flex}.pdf-link-item{border-bottom:1px solid var(--enw-surface-2, #f7ece8);align-items:center;gap:14px;padding:13px 20px;transition:background .12s;display:flex}.pdf-link-item:last-child{border-bottom:none}.pdf-link-item:hover{background:var(--enw-surface-2, #f7ece8)}.pdf-link-icon{color:var(--enw-on-header);background:var(--enw-header, #16301f);border:1px solid var(--enw-border, #2c4536);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:44px;font-size:20px;display:flex}.pdf-link-info{flex:1;min-width:0}.pdf-link-title{color:var(--enw-text, #0d1f16);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.pdf-link-topic{color:var(--enw-text-muted, #94a3b8);margin-top:2px;font-family:DM Mono,monospace;font-size:11px}.pdf-open-btn{color:var(--enw-on-danger);white-space:nowrap;background:var(--enw-danger, #dc2626);border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.pdf-open-btn:hover{background:var(--enw-danger, #b91c1c);transform:translateY(-1px)}.books-section-heading{background:var(--enw-header, #0d1f16);border-bottom:3px solid var(--enw-accent, #d4a017);border-radius:14px 14px 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;display:flex}.books-section-heading h2{color:var(--enw-on-primary, #ffffff);align-items:center;gap:8px;font-family:Inter,sans-serif;font-size:17px;font-weight:800;display:flex}.books-count{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid color-mix(in srgb, var(--enw-accent, #d4a017) 30.2%, transparent);border-radius:20px;padding:3px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:800}.book-list{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-top:none;border-radius:0 0 14px 14px;flex-direction:column;margin-bottom:36px;list-style:none;display:flex;overflow:hidden;box-shadow:none}.book-item{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);align-items:flex-start;gap:16px;padding:16px 20px;transition:background .12s;display:flex;position:relative;overflow:hidden}.book-item:last-child{border-bottom:none}.book-item:hover{background:var(--enw-surface-2, #f8fafc)}.book-item:before{content:"";transform-origin:bottom;background:var(--enw-accent, #d4a017);width:3px;transition:transform .2s;position:absolute;top:0;bottom:0;left:0;transform:scaleY(0)}.book-item:hover:before{transform:scaleY(1)}.book-cover{border:1px solid var(--enw-border, #e2e8f0);border-radius:8px;flex-shrink:0;overflow:hidden;box-shadow:none}.book-cover img{object-fit:cover;width:64px;height:96px;display:block}.book-info{flex:1;min-width:0}.book-title{color:var(--enw-text, #0d1f16);margin-bottom:5px;font-family:Inter,sans-serif;font-size:15px;font-weight:700;line-height:1.35}.book-title a{color:var(--enw-text, #0d1f16);transition:color .15s}.book-title a:hover{color:var(--enw-accent-ink, #a67c00)}.book-author{color:var(--enw-accent-ink, #a67c00);margin-bottom:3px;font-size:13px;font-weight:600}.book-author a{color:var(--enw-accent-ink, #a67c00)}.book-publisher{color:var(--enw-text-muted, #94a3b8);margin-bottom:8px;font-family:DM Mono,monospace;font-size:11px}.book-price{color:var(--enw-accent-ink, #16a34a);margin-bottom:10px;font-family:Inter,sans-serif;font-size:16px;font-weight:800;display:inline-flex}.book-price.has-price:before{content:""}.book-btn{color:var(--enw-on-accent);background:var(--enw-accent, #059669);border-radius:10px;align-items:center;gap:6px;padding:9px 18px;font-size:12px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.book-btn:hover{background:var(--enw-accent, #047857);transform:translateY(-1px)}.page-btn{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 10px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.page-btn.wide{padding:0 14px}.page-btn:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.page-btn.active,.page-btn.current-page{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:800;box-shadow:none}.page-btn.disabled{opacity:.35;pointer-events:none}.page-ellipsis{text-align:center;color:var(--enw-text-muted, #94a3b8);width:40px}.page-info{text-align:center;color:var(--enw-text-muted, #94a3b8);margin-top:-20px;margin-bottom:24px;font-family:DM Mono,monospace;font-size:13px}.cross-cta{background:var(--enw-header, #0d1f16);border:1px solid var(--enw-border, #16301f);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:48px;padding:28px 32px;display:flex;box-shadow:none}.cross-cta h3{color:var(--enw-on-primary, #ffffff);margin-bottom:4px;font-family:Inter,sans-serif;font-size:20px;font-weight:800}.cross-cta p{color:color-mix(in srgb, var(--enw-on-primary) 82%, transparent);font-size:14px}.cross-cta-form{flex-wrap:wrap;gap:0;display:flex}.cross-cta-form input{color:var(--enw-on-header);background:var(--enw-header, #16301f);border:1.5px solid var(--enw-border, #2c4536);border-right:none;border-radius:10px 0 0 10px;outline:none;width:240px;padding:12px 18px;font-size:14px}.cross-cta-form input::placeholder{color:var(--enw-text-muted, #475569)}.cross-cta-form input:focus{border-color:var(--enw-accent-ink, #d4a017)}.cross-cta-form button{color:var(--enw-on-accent);cursor:pointer;white-space:nowrap;background:var(--enw-accent, #d4a017);border:none;border-radius:0 10px 10px 0;padding:12px 22px;font-size:14px;font-weight:900;transition:background .15s}.cross-cta-form button:hover{background:var(--enw-accent, #e0b23a)}.btn-try{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-radius:12px;align-items:center;gap:8px;padding:13px 28px;font-size:14px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.btn-try:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.empty-state{text-align:center;padding:80px 24px}.empty-state .icon{margin-bottom:24px;font-size:72px;display:block}.empty-state h3{color:var(--enw-text, #0d1f16);margin-bottom:12px;font-family:Inter,sans-serif;font-size:24px;font-weight:800}.empty-state p{color:var(--enw-text-muted, #64748b);max-width:400px;margin:0 auto 28px;font-size:15px}.main-container{max-width:1400px;margin:0 auto;padding:36px 24px}.page-header{box-sizing:border-box;background:linear-gradient(160deg,var(--enw-header, #0d1f16) 0%,var(--enw-header, #12291d) 60%,var(--enw-header, #0d1f16) 100%);border-bottom:4px solid var(--enw-accent, #d4a017);width:100%;padding:48px 24px;position:relative;overflow:hidden}.page-header:before{content:"";pointer-events:none;background:radial-gradient(60% 80% at 50% 100%,color-mix(in srgb, var(--enw-accent, #d4a017) 10.2%, transparent) 0%,#0000 60%);position:absolute;inset:0}.page-header-inner{max-width:1400px;margin:0 auto;position:relative}.page-title{color:var(--enw-on-primary, #ffffff);letter-spacing:-.5px;margin-top:12px;margin-bottom:10px;font-family:Inter,sans-serif;font-size:clamp(28px,4vw,52px);font-weight:800}.page-subtitle{color:var(--enw-text-muted, #64748b);font-size:16px}.breadcrumb{background:color-mix(in srgb, var(--enw-surface, #ffffff) 7.8%, transparent);border:1px solid color-mix(in srgb, var(--enw-border, #e3e8ef) 12.2%, transparent);border-radius:8px;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:4px;padding:8px 14px;font-size:13px;display:inline-flex}.breadcrumb a{color:var(--enw-accent-ink, #d4a017);font-weight:600}.breadcrumb a:hover{color:var(--enw-accent-ink, #e0b23a)}.breadcrumb span{color:color-mix(in srgb, var(--enw-on-primary, #ffffff) 30.2%, transparent);margin:0 8px}.breadcrumb span:last-child{color:#fffc;margin:0;font-weight:600}.results-meta,.books-meta{color:var(--enw-text-muted, #475569);border-bottom:1px solid var(--enw-border, #f1f5f9);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;font-size:14px;display:flex}.results-meta strong,.books-meta strong,.results-count strong,.books-meta-count strong{color:var(--enw-text, #0d1f16);font-weight:700}.count-pill{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8);border-radius:20px;padding:4px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.count-badge{color:var(--enw-ink, #145c34);background:var(--enw-accent-tint, #e1f5e6);border:1px solid var(--enw-border, #a8dab8);border-radius:20px;align-items:center;gap:6px;padding:4px 14px;font-family:DM Mono,monospace;font-size:12px;font-weight:700;display:inline-flex}.kindle-badge{color:var(--enw-accent-ink, #d4a017);background:color-mix(in srgb, var(--enw-accent, #d4a017) 10.2%, transparent);border:1.5px solid color-mix(in srgb, var(--enw-accent, #d4a017) 30.2%, transparent);border-radius:100px;align-items:center;gap:8px;margin-bottom:16px;padding:7px 20px;font-family:DM Mono,monospace;font-size:12px;font-weight:700;display:inline-flex}.kindle-tag{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1.5px solid var(--enw-accent-tint, #f0dfa8);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-block}.kindle-tag:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}
/* The badge is a sibling of a cover that is width:100%, inside a box with
   overflow:hidden and aspect-ratio 2/3. Laid out in flow it is pushed past the
   cover's right edge and clipped away, so the word "Kindle" was never visible on
   any card. Pinned to the cover's corner it does the job a corner badge is for. */
.book-card-img .kindle-tag,.book-card-cover .kindle-tag,.book-cover .kindle-tag{position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:2}.book-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:20px;display:grid}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:48px 0;display:flex}.page-btn,.pagination a,.pagination span{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;justify-content:center;align-items:center;min-width:42px;height:42px;padding:0 12px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.page-btn:hover,.pagination a:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.page-btn.active,.page-btn.current-page,.pagination .current-page{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:800;box-shadow:none}.page-btn.disabled,.pagination .disabled{opacity:.35;pointer-events:none}.page-ellipsis,.pagination .dots{color:var(--enw-text-muted, #94a3b8);box-shadow:none;background:0 0;border-color:#0000}.country-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px;padding:16px 0;display:flex}.country-bar-label{color:var(--enw-text-muted, #94a3b8);text-transform:uppercase;letter-spacing:.1em;margin-right:4px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.country-pill{color:var(--enw-text-muted, #2c4536);white-space:nowrap;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:20px;align-items:center;gap:5px;padding:8px 18px;font-size:13px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.country-pill:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.country-pill.active{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:800;box-shadow:none}.alpha-nav{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:14px;flex-wrap:wrap;gap:5px;margin-bottom:28px;padding:18px;display:flex;box-shadow:none}.alpha-nav a{color:var(--enw-text-muted, #475569);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:9px;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.alpha-nav a:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.alpha-nav a.active,.alpha-nav a.current{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:800}.cat-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.cat-card{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #f1f5f9);border-radius:12px;justify-content:space-between;align-items:center;padding:16px 20px;text-decoration:none;transition:all .15s;display:flex;box-shadow:none}.cat-card:hover{background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017);transform:translate(4px);box-shadow:none}.cat-card-name{color:var(--enw-text, #16301f);font-size:14px;font-weight:600}.cat-card-count{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-radius:12px;padding:3px 10px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.country-section{margin-bottom:52px}.country-section-header,.author-header{border-radius:14px 14px 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;display:flex}.country-section-header{background:linear-gradient(135deg,var(--enw-accent, #059669),var(--enw-accent, #10b981))}.author-header{background:linear-gradient(135deg,var(--enw-primary, #1a7a45),var(--enw-primary, #1a7a45))}.country-section-title,.country-section-header h2,.country-name,.author-name{color:var(--enw-on-accent);align-items:center;gap:10px;font-family:Inter,sans-serif;font-size:18px;font-weight:800;display:flex}.country-section-meta,.count-badge{color:var(--enw-on-primary, #ffffff);background:#0003;border-radius:20px;padding:3px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.country-section .book-grid,.author-block .book-grid{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-top:none;border-radius:0 0 14px 14px;padding:20px;box-shadow:none}.author-block{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:18px;margin-bottom:36px;overflow:hidden;box-shadow:none}.author-link{color:var(--enw-on-primary, #ffffff);background:color-mix(in srgb, var(--enw-surface, #ffffff) 14.9%, transparent);border:1px solid color-mix(in srgb, var(--enw-border, #e3e8ef) 25.1%, transparent);border-radius:20px;align-items:center;gap:6px;padding:7px 18px;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s;display:inline-flex}.author-link:hover{background:color-mix(in srgb, var(--enw-surface, #ffffff) 25.1%, transparent)}.view-all-link{color:#fffc;font-size:13px;font-weight:700;text-decoration:none}.view-all-link:hover{color:var(--enw-on-primary, #ffffff)}.country-flag{font-size:22px}.country-count{color:var(--enw-on-primary, #ffffff);background:#0003;border-radius:20px;padding:3px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.country-anchor-nav{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:14px;flex-wrap:wrap;gap:8px;margin-bottom:32px;padding:18px;display:flex;box-shadow:none}.country-anchor-btn{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:20px;align-items:center;gap:6px;padding:8px 18px;font-size:13px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.country-anchor-btn:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.flag{font-size:18px}.social-links,.footer-social{align-items:center;gap:8px;display:flex}.social-share-btn{color:var(--enw-on-primary, #ffffff);border-radius:9px;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-style:normal;text-decoration:none;transition:transform .15s;display:inline-flex}.social-share-btn:hover{transform:scale(1.1)}.social-share-btn--fb{background:#1877f2}.social-share-btn--tw{background:#000}.social-share-btn--pi{background:#e60023}.social-share-btn--li{background:#0a66c2}.breadcrumb-wrap{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9)}.breadcrumb-inner{max-width:1400px;margin:0 auto;padding:10px 24px}.bd-breadcrumb{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:10px;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:28px;padding:10px 16px;font-size:13px;display:flex;box-shadow:none}.bd-breadcrumb a{color:var(--enw-ink, #1a7a45);font-weight:600;text-decoration:none;transition:color .15s}.bd-breadcrumb a:hover{color:var(--enw-ink, #145c34);text-decoration:underline}.bd-bc-sep{color:var(--enw-border, #d1d5db);margin:0 6px;font-size:11px}.bd-bc-current{color:var(--enw-text-muted, #6b7280);font-weight:500}.filter-bar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px;display:flex}.filter-select{color:var(--enw-text, #0d1f16);cursor:pointer;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:9px;outline:none;padding:9px 14px;font-family:DM Sans,sans-serif;font-size:13px;transition:border-color .15s}.filter-select:focus{border-color:var(--enw-accent-ink, #d4a017)}.tabs-nav{border-bottom:2px solid var(--enw-border, #f1f5f9);margin-bottom:28px;display:flex;overflow-x:auto}.tab-btn{color:var(--enw-text-muted, #64748b);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:3px solid #0000;align-items:center;gap:7px;margin-bottom:-2px;padding:12px 22px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:600;transition:all .15s;display:flex}.tab-btn:hover{color:var(--enw-text, #0d1f16)}.tab-btn.active{color:var(--enw-accent-ink, #d4a017);border-bottom-color:var(--enw-accent-ink, #d4a017)}.tab-badge{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8);border-radius:10px;padding:2px 8px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.tab-btn.active .tab-badge{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.tab-panel{display:none}.tab-panel.active{display:block}.deals-hero{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-danger-tint, #fecdd3);border-radius:18px;align-items:center;gap:20px;margin-bottom:40px;padding:28px 32px;display:flex;box-shadow:none}.deals-hero-icon{flex-shrink:0;font-size:56px}.deals-hero h1,.deals-hero .deals-hero-title{color:var(--enw-text, #0d1f16);margin-bottom:6px;font-family:Inter,sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800}.deals-hero p{color:var(--enw-text-muted, #64748b);max-width:600px;font-size:14px;line-height:1.7}.book-card-prices{flex-wrap:wrap;align-items:baseline;gap:8px;margin:6px 0;display:flex}.price-offer{color:var(--enw-accent-ink, #16a34a);font-family:Inter,sans-serif;font-size:18px;font-weight:800}.price-list{color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:13px;text-decoration:line-through}.discount-badge{color:var(--enw-on-danger);background:var(--enw-danger, #dc2626);border-radius:6px;padding:2px 8px;font-family:DM Mono,monospace;font-size:10px;font-weight:800}.btn-buy{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-radius:9px;flex:1;justify-content:center;align-items:center;gap:5px;padding:8px 14px;font-size:12px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.btn-buy:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.btn-view{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0);border-radius:9px;align-items:center;gap:5px;padding:8px 12px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s;display:inline-flex}.btn-view:hover{background:var(--enw-border, #e2e8f0)}.country-section-header.deals-header{background:linear-gradient(135deg,var(--enw-danger, #dc2626),var(--enw-danger, #ef4444))}.view-all-btn{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-radius:12px;align-items:center;gap:8px;padding:13px 28px;font-size:14px;font-weight:800;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.view-all-btn:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.back-link{color:var(--enw-ink, #1a7a45);align-items:center;gap:6px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.back-bar{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);padding:10px 24px}.hero{text-align:center;background:linear-gradient(160deg,var(--enw-danger, #450a0a) 0%,var(--enw-danger, #7f1d1d) 50%,var(--enw-danger, #991b1b) 100%);border-bottom:4px solid var(--enw-danger, #dc2626);padding:64px 24px;position:relative;overflow:hidden}.hero-inner{max-width:720px;margin:0 auto;position:relative}.hero h1{color:var(--enw-on-primary, #ffffff);letter-spacing:-1px;margin-bottom:14px;font-family:Inter,sans-serif;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.1}.hero h1 span{color:var(--enw-danger-tint, #fca5a5)}.hero-sub{color:color-mix(in srgb, var(--enw-on-primary, #ffffff) 65.1%, transparent);margin-bottom:32px;font-size:16px;line-height:1.7}.hero-badge{color:var(--enw-danger-tint, #fca5a5);background:color-mix(in srgb, var(--enw-danger, #dc2626) 20%, transparent);border:1px solid color-mix(in srgb, var(--enw-danger, #dc2626) 40%, transparent);border-radius:100px;align-items:center;gap:8px;margin-bottom:20px;padding:6px 18px;font-family:DM Mono,monospace;font-size:11px;display:inline-flex}.search-box,.hero-search-form,.pdf-search-form{background:var(--enw-surface, #ffffff);border-radius:12px;width:100%;max-width:680px;margin:0 auto;display:flex;overflow:hidden;box-shadow:0 0 0 3px #dc262633}.search-box input,.hero-search-form input{color:var(--enw-text, #0d1f16);background:0 0;border:none;outline:none;flex:1;padding:17px 22px;font-size:15px}.search-box input::placeholder,.hero-search-form input::placeholder{color:var(--enw-text-muted, #94a3b8)}.search-box button,.hero-search-form button{color:var(--enw-on-danger, #ffffff);cursor:pointer;white-space:nowrap;background:var(--enw-danger, #dc2626);border:none;align-items:center;gap:8px;padding:17px 28px;font-size:15px;font-weight:900;transition:background .15s;display:flex}.search-box button:hover,.hero-search-form button:hover{background:var(--enw-danger, #b91c1c)}.hero-hint,.pdf-hero-hint{color:#fff6;margin-top:14px;font-family:DM Mono,monospace;font-size:11px}.result-card{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);border-left:1px solid var(--enw-border, #e2e8f0);border-right:1px solid var(--enw-border, #e2e8f0);align-items:flex-start;gap:16px;padding:16px 20px;text-decoration:none;transition:background .12s;display:flex}.result-card:first-child{border-top:1px solid var(--enw-border, #e2e8f0);border-radius:14px 14px 0 0}.result-card:last-child{border-bottom:1px solid var(--enw-border, #e2e8f0);border-radius:0 0 14px 14px}.result-card:hover{background:var(--enw-surface-2, #f8fafc)}.result-icon{color:var(--enw-on-header);background:var(--enw-header, #0d1f16);border:1px solid var(--enw-border, #2c4536);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:48px;font-size:20px;display:flex}.result-body{flex:1;min-width:0}.result-topic{color:var(--enw-accent-ink, #a67c00);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;font-family:DM Mono,monospace;font-size:10px;font-weight:700}.result-title{color:var(--enw-text, #0d1f16);margin-bottom:6px;font-family:Inter,sans-serif;font-size:16px;font-weight:700;line-height:1.3}.result-tags{flex-wrap:wrap;gap:5px;display:flex}.result-tag{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8);border-radius:12px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.stats-bar{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);flex-wrap:wrap;gap:0;display:flex;box-shadow:none}.stats-badge{border-right:1px solid var(--enw-border, #f1f5f9);flex-direction:column;flex:auto;align-items:center;padding:20px 40px;display:flex}.stats-badge:last-child{border-right:none}.stats-badge strong{color:var(--enw-danger-ink, #dc2626);font-family:Inter,sans-serif;font-size:28px;font-weight:800;line-height:1}.stats-badge span{color:var(--enw-text-muted, #94a3b8);margin-top:5px;font-family:DM Mono,monospace;font-size:11px}.search-section{text-align:center;background:linear-gradient(135deg,var(--enw-accent, #d4a017),var(--enw-accent-ink, #a67c00));border-radius:20px;margin-top:56px;padding:36px;box-shadow:none}.search-section h2{color:var(--enw-text, #1c1410);margin-bottom:6px;font-family:Inter,sans-serif;font-size:24px;font-weight:900}.search-section p{color:color-mix(in srgb, var(--enw-text, #1c1410) 70.2%, transparent);margin-bottom:24px;font-size:14px}.search-form{background:var(--enw-surface, #ffffff);border-radius:12px;max-width:640px;margin:0 auto;display:flex;overflow:hidden;box-shadow:none}.search-form input{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:none;outline:none;flex:1;padding:16px 20px;font-size:15px}.search-form input::placeholder{color:var(--enw-text-muted, #94a3b8)}.search-form button{color:var(--enw-on-header);cursor:pointer;white-space:nowrap;background:var(--enw-header, #0d1f16);border:none;align-items:center;gap:8px;padding:16px 28px;font-size:14px;font-weight:900;display:flex}.search-form button:hover{background:var(--enw-header, #16301f)}.amp-link{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border-radius:20px;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:600;text-decoration:none;display:flex}.amp-link:hover{background:var(--enw-accent-tint, #e1f5e6)}.section-title{color:var(--enw-text, #0d1f16);border-bottom:2px solid var(--enw-border, #f1f5f9);margin-bottom:20px;padding-bottom:12px;font-family:Inter,sans-serif;font-size:20px;font-weight:800}.book-card-meta-link{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface-2, #f1f5f9);border-radius:8px;padding:2px 8px;font-size:10px;font-weight:600;text-decoration:none;display:inline-block}.quick-pills{flex-wrap:wrap;gap:7px;margin-top:16px;display:flex}.quick-pill{color:color-mix(in srgb, var(--enw-on-primary, #ffffff) 85.1%, transparent);background:color-mix(in srgb, var(--enw-surface, #ffffff) 10.2%, transparent);border:1px solid #fff3;border-radius:20px;align-items:center;gap:5px;padding:5px 14px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s;display:inline-flex}.quick-pill:hover{background:#fff3}.pdf-topic-grid{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.pdf-topic-card{color:var(--enw-text, #0d1f16);background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-radius:14px;align-items:flex-start;gap:12px;padding:16px;text-decoration:none;transition:all .2s;display:flex;box-shadow:none}.pdf-topic-card:hover{border-color:var(--enw-accent-tint, #f0dfa8);transform:translateY(-3px);box-shadow:none}.pdf-topic-icon{color:var(--enw-danger-ink);background:linear-gradient(145deg,var(--enw-danger-ink, #dc2626),var(--enw-danger-tint, #f87171));border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:48px;font-size:18px;font-weight:800;display:flex;position:relative}.pdf-topic-icon:after{content:"PDF";text-align:center;color:#fffc;background:#0003;border-radius:0 0 10px 10px;padding:1px 0;font-size:7px;font-weight:700;position:absolute;bottom:0;left:0;right:0}.pdf-topic-label{color:var(--enw-danger-ink, #dc2626);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;font-family:DM Mono,monospace;font-size:9px;font-weight:700}.pdf-topic-title{color:var(--enw-text, #0d1f16);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.pdf-topic-body{flex:1;min-width:0}.feature-banner-inner{max-width:640px;margin:0 auto;position:relative}#success{color:var(--enw-accent-ink, #16a34a);font-size:14px;font-weight:600}.results-grid{flex-direction:column;display:flex}.recent-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;display:grid}.country-combo-strip{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #f1f5f9);border-left:4px solid var(--enw-primary, #1a7a45);border-radius:16px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px;padding:18px 20px;display:flex;box-shadow:none}.country-combo-label{color:var(--enw-text-muted, #94a3b8);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;flex-shrink:0;align-self:center;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.country-chip{color:var(--enw-text-muted, #2c4536);white-space:nowrap;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:none}.country-chip:hover{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border-color:var(--enw-ink, #1a7a45);transform:translateY(-1px)}.country-chip.active{background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:700;box-shadow:none;color:var(--enw-on-primary, #ffffff)!important}.badge-dot{background:var(--enw-accent, #10b981);border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.results-strip{background:var(--enw-surface-2, #fafafa);border-bottom:1px solid var(--enw-border, #f1f5f9)}.results-strip-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;max-width:1400px;margin:0 auto;padding:12px 24px;display:flex}.results-title{color:var(--enw-text-muted, #475569);font-size:14px}.results-title strong{color:var(--enw-text, #0d1f16);font-weight:700}@media (max-width:1200px){.pdf-topic-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:1024px){.footer-inner,.bd-footer-inner{grid-template-columns:1fr 1fr}.pdf-topic-grid{grid-template-columns:repeat(3,1fr)}.bd-layout{gap:36px}.bd-cover-col{width:240px;position:static}}@media (max-width:900px){.bd-layout{flex-direction:column}.bd-cover-col{width:100%;max-width:280px;margin:0 auto}.bd-float-arrow{display:none}.bd-mob-nav{display:flex}.bd-body,body{padding-bottom:72px}.bd-spec-row{flex-direction:column;gap:2px}.bd-spec-label{width:100%}.contact-grid{grid-template-columns:1fr}.cross-cta-form{flex-direction:column;width:100%}.cross-cta-form input{border-right:1.5px solid var(--enw-border, #2c4536);border-radius:10px;width:100%;margin-bottom:8px}.cross-cta-form button{border-radius:10px;justify-content:center;width:100%}.deals-hero{flex-direction:column;padding:22px 20px}.books-hero{padding:40px 20px}}@media (max-width:768px){.pdf-hero{padding:64px 20px}.stats-strip{flex-wrap:wrap}.stat-item{border-right:1px solid var(--enw-border, #f1f5f9);flex:33%;padding:18px}.section-inner,.main-container{padding:0 20px}.section{padding:48px 0}.pdf-topic-grid{grid-template-columns:repeat(2,1fr)}.book-grid,.books-shelf{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.footer-inner,.bd-footer-inner{grid-template-columns:1fr;gap:28px}footer,.site-footer,.bd-footer{margin-top:56px;padding:48px 20px 0}.bd-container{padding:20px 20px 80px}.bd-breadcrumb{padding:8px 12px;font-size:12px}.bd-price-offer{font-size:40px}.bd-btn-buy{font-size:15px}.page-header{padding:36px 20px 28px}.feature-banner h2{font-size:30px}.search-section{border-radius:14px;padding:28px 20px}.mini-hero{padding:16px 20px}.stats-bar{flex-wrap:wrap}.stats-badge{flex:33%;padding:16px}.main-container{padding:24px 20px}}@media (max-width:480px){.pdf-topic-grid{grid-template-columns:1fr 1fr}.book-grid,.books-shelf{grid-template-columns:repeat(2,1fr)}.stat-item{flex:50%}.cat-grid{grid-template-columns:1fr}}.wrap{grid-template-columns:1fr 320px;align-items:start;gap:32px;max-width:1100px;margin:0 auto;padding:36px 24px 60px;display:grid}.page-hero{text-align:center;background:linear-gradient(160deg,var(--enw-header, #0d1f16) 0%,var(--enw-header, #16301f) 60%,var(--enw-header, #0d1f16) 100%);border-bottom:4px solid var(--enw-accent, #d4a017);padding:40px 24px}.page-hero h1{color:var(--enw-on-primary, #ffffff);letter-spacing:-.5px;margin-bottom:8px;font-family:Inter,sans-serif;font-size:clamp(26px,4vw,42px);font-weight:900}.page-hero h1 em{color:var(--enw-accent-ink, #d4a017);font-style:normal}.page-hero p{color:var(--enw-text-muted, #64748b);font-size:15px}.form-card{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:18px;padding:28px;box-shadow:none}.form-card h2{color:var(--enw-text, #0d1f16);align-items:center;gap:10px;margin-bottom:20px;font-family:Inter,sans-serif;font-size:18px;font-weight:800;display:flex}label{color:var(--enw-text, #374151);letter-spacing:.01em;margin-bottom:6px;font-size:13px;font-weight:700;display:block}label .sub{color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:12px;font-weight:400}textarea#asins{color:var(--enw-text, #0d1f16);resize:vertical;background:var(--enw-surface-2, #fafafa);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:12px;outline:none;width:100%;min-height:120px;padding:14px 16px;font-family:DM Mono,monospace;font-size:13px;line-height:1.7;transition:border-color .15s}textarea#asins:focus{background:var(--enw-surface, #ffffff);border-color:var(--enw-accent-ink, #d4a017);box-shadow:0 0 0 3px #d4a0171a}.asin-count{color:var(--enw-accent-ink, #d4a017);min-height:18px;margin-top:6px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.form-divider{background:var(--enw-surface-2, #f1f5f9);height:1px;margin:20px 0}.cc-small-btns{gap:8px;margin-bottom:12px;display:flex}.cc-ctrl{cursor:pointer;color:var(--enw-text-muted, #475569);background:var(--enw-surface-2, #f8fafc);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:8px;padding:5px 14px;font-family:DM Mono,monospace;font-size:11px;font-weight:700;transition:all .15s}.cc-ctrl:hover{color:var(--enw-text, #0d1f16);background:var(--enw-border, #e2e8f0)}.cc-wrap{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.cc-btn{cursor:pointer;color:var(--enw-text-muted, #475569);-webkit-user-select:none;user-select:none;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;align-items:center;gap:7px;padding:9px 16px;font-size:13px;font-weight:600;transition:all .15s;display:flex;box-shadow:none}.cc-btn:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.cc-btn.selected{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45);font-weight:700;box-shadow:none}.cc-btn .chk{border:1.5px solid;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;transition:all .1s;display:inline-flex}.cc-btn.selected .chk{background:#fff3;border-color:#fff6}#cc-count-label{color:var(--enw-text-muted, #94a3b8);font-family:DM Mono,monospace;font-size:12px}.submit-btn{color:var(--enw-on-primary, #ffffff);cursor:pointer;letter-spacing:-.2px;background:var(--enw-primary, #1a7a45);border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:6px;padding:16px;font-family:Inter,sans-serif;font-size:16px;font-weight:900;transition:all .2s;display:flex;box-shadow:none}.submit-btn:hover{background:var(--enw-header, #145c34);transform:translateY(-1px);box-shadow:none}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.alert{border-radius:12px;align-items:flex-start;gap:10px;margin-bottom:24px;padding:14px 18px;font-size:14px;display:flex}.alert-error{color:var(--enw-danger-ink, #991b1b);background:var(--enw-danger-tint, #fef2f2);border:1px solid var(--enw-danger-tint, #fecaca)}.results{margin-top:28px}.results h3{color:var(--enw-text, #0d1f16);margin-bottom:16px;font-family:Inter,sans-serif;font-size:18px;font-weight:800}.summary-pills{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.spill{border-radius:20px;align-items:center;gap:5px;padding:6px 14px;font-family:DM Mono,monospace;font-size:12px;font-weight:700;display:inline-flex}.spill-green{color:var(--enw-accent-ink, #065f46);background:var(--enw-accent-tint, #f0fdf4);border:1px solid var(--enw-accent-tint, #a7f3d0)}.spill-blue{color:var(--enw-text-muted, #26404d);background:var(--enw-surface-2, #e4eef1);border:1px solid var(--enw-border, #c8d8de)}.spill-yellow{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8)}.spill-red{color:var(--enw-danger-ink, #991b1b);background:var(--enw-danger-tint, #fef2f2);border:1px solid var(--enw-danger-tint, #fecaca)}.tomorrow-box{background:var(--enw-accent-tint, #fdf3d9);border:1.5px solid var(--enw-accent-tint, #f0dfa8);border-radius:14px;align-items:flex-start;gap:14px;margin-bottom:20px;padding:18px 20px;display:flex}.tb-icon{flex-shrink:0;font-size:26px;line-height:1}.tb-body h4{color:var(--enw-accent-ink, #6b4e13);margin-bottom:4px;font-family:Inter,sans-serif;font-size:14px;font-weight:800}.tb-body p{color:var(--enw-accent-ink, #6b4e13);font-size:13px;line-height:1.6}.result-item{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:14px;align-items:flex-start;gap:14px;margin-bottom:10px;padding:16px;transition:all .15s;display:flex;box-shadow:none}.result-item:hover{border-color:var(--enw-border, #cbd5e1);box-shadow:none}.ri-on_site{border-left:4px solid var(--enw-accent, #10b981)}.ri-queued{border-left:4px solid var(--enw-accent, #d4a017)}.ri-already_pending{border-left:4px solid var(--enw-danger, #b5533c)}.ri-error{border-left:4px solid var(--enw-danger, #ef4444)}.ri-cover{object-fit:contain;background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0);border-radius:6px;width:50px;min-width:50px;height:70px}.ri-body{flex:1;min-width:0}.ri-top{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;display:flex}.ri-asin{color:var(--enw-text-muted, #94a3b8);background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0);border-radius:6px;padding:2px 8px;font-family:DM Mono,monospace;font-size:12px}.ri-flag{font-size:16px}.ri-status{white-space:nowrap;border-radius:20px;padding:3px 10px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.st-on_site{color:var(--enw-accent-ink, #065f46);background:var(--enw-accent-tint, #f0fdf4);border:1px solid var(--enw-accent-tint, #a7f3d0)}.st-queued{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8)}.st-already_pending{color:var(--enw-danger-ink, #9a3412);background:var(--enw-danger-tint, #fff7ed);border:1px solid var(--enw-danger-tint, #fed7aa)}.st-error{color:var(--enw-danger-ink, #991b1b);background:var(--enw-danger-tint, #fef2f2);border:1px solid var(--enw-danger-tint, #fecaca)}.ri-title{color:var(--enw-text, #0d1f16);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:14px;font-weight:700;overflow:hidden}.ri-title a{color:var(--enw-ink, #1a7a45);text-decoration:none}.ri-title a:hover{text-decoration:underline}.ri-sub{color:var(--enw-text-muted, #64748b);font-size:12px}.ri-msg{color:var(--enw-text-muted, #94a3b8);margin-top:5px;font-family:DM Mono,monospace;font-size:12px}.ri-links{gap:12px;margin-top:10px;display:flex}.ri-link{border:1px solid;border-radius:8px;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.ri-link-site{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border-color:var(--enw-border, #c8e6d0)}.ri-link-site:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45)}.ri-link-amz{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-tint, #f0dfa8)}.ri-link-amz:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.ri-countries{flex-direction:column;gap:6px;margin-top:12px;display:flex}.ri-country-row{background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #f1f5f9);border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;transition:background .15s;display:flex}.ri-country-row:hover{background:var(--enw-surface-2, #f1f5f9)}.ri-country-label{color:var(--enw-text-muted, #2c4536);align-items:center;gap:6px;min-width:90px;font-size:13px;font-weight:600;display:flex}.ri-country-status{white-space:nowrap;border-radius:10px;padding:2px 9px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.ri-country-msg{color:var(--enw-text-muted, #94a3b8);flex:1;font-family:DM Mono,monospace;font-size:11px}.ri-country-link{white-space:nowrap;border:1px solid;border-radius:8px;align-items:center;gap:4px;margin-left:auto;padding:4px 10px;font-size:11px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.ri-country-link-site{color:var(--enw-accent-ink);background:var(--enw-accent-tint, #e1f5e6);border-color:var(--enw-border, #c8e6d0)}.ri-country-link-site:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45);border-color:var(--enw-ink, #1a7a45)}.ri-country-link-amz{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-tint, #f0dfa8)}.ri-country-link-amz:hover{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-color:var(--enw-accent-ink, #d4a017)}.ri-avail-badge{white-space:nowrap;border-radius:20px;align-items:center;gap:4px;margin-left:auto;padding:3px 10px;font-family:DM Mono,monospace;font-size:11px;font-weight:700;display:inline-flex}.ri-avail-all{color:var(--enw-accent-ink, #065f46);background:var(--enw-accent-tint, #f0fdf4);border:1px solid var(--enw-accent-tint, #a7f3d0)}.ri-avail-some{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border:1px solid var(--enw-accent-tint, #f0dfa8)}.ri-avail-none{color:var(--enw-danger-ink, #991b1b);background:var(--enw-danger-tint, #fef2f2);border:1px solid var(--enw-danger-tint, #fecaca)}.sidebar{flex-direction:column;gap:18px;display:flex}.scard{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;padding:24px;box-shadow:none}.scard--success{background:var(--enw-accent-tint, #f0fdf4);border-color:var(--enw-accent-tint, #a7f3d0)}.scard h3{color:var(--enw-text, #0d1f16);align-items:center;gap:8px;margin-bottom:14px;font-family:Inter,sans-serif;font-size:15px;font-weight:800;display:flex}.scard--success h3{color:var(--enw-accent-ink, #065f46)}.scard p,.scard li{color:var(--enw-text-muted, #64748b);font-size:13px;line-height:1.7}.scard--success p{color:var(--enw-accent-ink, #065f46)}.scard ul{padding-left:18px}.scard ul li{margin-bottom:6px}.scard a{color:var(--enw-ink, #1a7a45);font-weight:600;text-decoration:none}.scard a:hover{text-decoration:underline}.scard--success a{color:var(--enw-accent-ink, #059669)}.step-row{align-items:flex-start;gap:14px;margin-bottom:16px;display:flex}.step-row:last-child{margin-bottom:0}.snum{color:var(--enw-on-header);background:var(--enw-header, #0d1f16);border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;min-width:28px;height:28px;font-family:DM Mono,monospace;font-size:12px;font-weight:700;display:flex}.stext{color:var(--enw-text-muted, #64748b);padding-top:4px;font-size:13px;line-height:1.6}code{background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0);border-radius:5px;padding:1px 6px;font-family:DM Mono,monospace;font-size:11px}.invalid-box{background:var(--enw-danger-tint, #fef2f2);border:1.5px solid var(--enw-danger-tint, #fecaca);border-radius:12px;margin-bottom:20px;padding:14px 18px}.invalid-box h4{color:var(--enw-danger-ink, #991b1b);margin-bottom:8px;font-family:Inter,sans-serif;font-size:13px;font-weight:800}.invalid-list{flex-wrap:wrap;gap:6px;display:flex}.invalid-asin{color:var(--enw-danger-ink, #991b1b);background:var(--enw-surface, #ffffff);border:1px solid var(--enw-danger-tint, #fecaca);border-radius:8px;padding:3px 10px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}@media (max-width:900px){.wrap{grid-template-columns:1fr;gap:24px;padding:24px 16px 48px}.page-hero{padding:32px 20px}}.bd-wishlist-btn{color:var(--enw-text-muted, #475569);cursor:pointer;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:100px;align-items:center;gap:8px;margin:4px 0 20px;padding:10px 20px;font-size:13.5px;font-weight:700;transition:all .15s;display:inline-flex;box-shadow:none}.bd-wishlist-btn:hover{color:var(--enw-accent-ink, #6b4e13);background:var(--enw-accent-tint, #fdf3d9);border-color:var(--enw-accent-ink, #d4a017)}.bd-wishlist-btn--active{color:var(--enw-danger-ink, #8a3f2c);background:var(--enw-surface-2, #f7ece8);border-color:var(--enw-danger-tint, #d9ab97)}.bd-wishlist-btn--active:hover{background:var(--enw-surface-2, #f0ddd4);border-color:var(--enw-danger-ink, #b5533c)}.bd-wishlist-icon{font-size:15px;line-height:1}.bd-reviews{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:none}.bd-reviews-header{color:var(--enw-on-header, #f8fafc);letter-spacing:.01em;background:var(--enw-header, #0d1f16);flex-wrap:wrap;align-items:center;gap:10px;padding:14px 22px;font-size:14px;font-weight:700;display:flex}.bd-reviews-avg{color:var(--enw-on-accent);background:var(--enw-accent, #d4a017);border-radius:20px;padding:3px 12px;font-family:DM Mono,monospace;font-size:12px;font-weight:700}.bd-reviews-avg--empty{color:var(--enw-border, #cbd5e1);background:color-mix(in srgb, var(--enw-surface, #ffffff) 10.2%, transparent)}.bd-login-box{background:var(--enw-surface-2, #fafafa);border-bottom:1px solid var(--enw-border, #f1f5f9);flex-wrap:wrap;align-items:center;gap:10px;padding:12px 22px;font-size:13.5px;display:flex}.bd-login-status{color:var(--enw-text-muted, #2c4536)}.bd-login-status strong{color:var(--enw-text, #0d1f16)}.bd-login-link{cursor:pointer;color:var(--enw-ink, #1a7a45);background:0 0;border:none;padding:0;font-size:13.5px;font-weight:700;text-decoration:underline}.bd-login-link:hover{color:var(--enw-ink, #145c34)}.bd-login-prompt{flex-wrap:wrap;align-items:center;gap:10px;width:100%;display:flex}.bd-login-toggle-btn{color:var(--enw-ink, #1a7a45);cursor:pointer;white-space:nowrap;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-ink, #1a7a45);border-radius:100px;justify-content:center;align-items:center;padding:8px 18px;font-size:13px;font-weight:700;transition:all .15s;display:inline-flex}.bd-login-toggle-btn:hover{color:var(--enw-on-primary, #ffffff);background:var(--enw-primary, #1a7a45)}.bd-login-form{flex-wrap:wrap;align-items:stretch;gap:8px;width:100%;margin-top:8px;display:flex}.bd-login-email{color:var(--enw-text, #0d1f16);box-sizing:border-box;appearance:none;resize:none;background:var(--enw-surface, #ffffff);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;flex:200px;width:100%;height:44px;padding:0 14px;font-family:inherit;font-size:16px;line-height:normal;transition:border-color .15s;display:block}.bd-login-email:focus{border-color:var(--enw-accent-ink, #d4a017);outline:none;box-shadow:0 0 0 3px #d4a0171a}.bd-login-submit{color:var(--enw-on-primary, #ffffff);cursor:pointer;background:var(--enw-primary, #1a7a45);border:none;border-radius:10px;height:44px;min-height:44px;padding:10px 18px;font-size:13.5px;font-weight:800;transition:all .15s;box-shadow:none}.bd-login-submit:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.bd-login-submit:disabled{opacity:.6;cursor:default;transform:none}.bd-login-status-msg{width:100%;margin:4px 0 0;font-size:12.5px}.bd-login-status-msg--ok{color:var(--enw-accent-ink, #16a34a)}.bd-login-status-msg--err{color:var(--enw-danger-ink, #dc2626)}.bd-review-form{border-bottom:1px solid var(--enw-border, #f1f5f9);flex-direction:column;gap:12px;padding:22px;display:flex}.bd-review-stars{align-items:center;gap:4px;display:flex}.bd-star{color:var(--enw-accent-ink, #d4a017);cursor:pointer;background:0 0;border:none;min-width:40px;min-height:40px;padding:2px;font-size:28px;line-height:1}.bd-review-verified-note{color:var(--enw-text-muted, #94a3b8);margin:0;font-size:12.5px}.bd-review-verified-note strong{color:var(--enw-text-muted, #2c4536)}.bd-review-name,.bd-review-textarea{color:var(--enw-text, #0d1f16);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:16px;transition:border-color .15s}.bd-review-name:focus,.bd-review-textarea:focus{border-color:var(--enw-accent-ink, #d4a017);outline:none;box-shadow:0 0 0 3px #d4a0171a}.bd-review-textarea{resize:vertical;min-height:90px}.bd-review-submit{color:var(--enw-on-primary, #ffffff);letter-spacing:-.1px;cursor:pointer;background:var(--enw-primary, #1a7a45);border:none;border-radius:12px;align-self:flex-start;min-height:46px;padding:13px 26px;font-size:14.5px;font-weight:800;transition:all .2s;box-shadow:none}.bd-review-submit:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.bd-review-submit:disabled{opacity:.6;cursor:default;box-shadow:none;transform:none}.bd-review-status{margin:0;font-size:13px}.bd-review-status--ok{color:var(--enw-accent-ink, #16a34a)}.bd-review-status--err{color:var(--enw-danger-ink, #dc2626)}.bd-review-list{padding:6px 22px 22px}.bd-review-empty{color:var(--enw-text-muted, #94a3b8);padding:14px 0;font-size:13.5px}.bd-review-item{border-top:1px solid var(--enw-border, #f1f5f9);padding:16px 0}.bd-review-item:first-child{border-top:none}.bd-review-item-top{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px;display:flex}.bd-review-stars-static{color:var(--enw-accent-ink, #d4a017);letter-spacing:1px;font-size:15px}.bd-review-item .bd-review-name{color:var(--enw-text, #0d1f16);border:none;padding:0;font-size:13.5px;font-weight:700}.bd-review-comment{color:var(--enw-text-muted, #2c4536);white-space:pre-line;margin:0 0 8px;font-size:14.5px;line-height:1.7}.bd-review-report{color:var(--enw-text-muted, #94a3b8);cursor:pointer;background:0 0;border:none;padding:4px 0;font-size:11.5px;transition:color .15s}.bd-review-report:hover{color:var(--enw-danger-ink, #dc2626)}.bd-review-report:disabled{opacity:.6;cursor:default}@media (max-width:640px){.bd-wishlist-btn{justify-content:center;width:100%}.bd-star{min-width:44px;min-height:44px;font-size:32px}.bd-review-submit{text-align:center;width:100%}.bd-login-form{flex-direction:column;align-items:stretch}.bd-login-submit,.bd-login-toggle-btn{width:100%}}.wl-share-box{background:var(--enw-surface, #ffffff);border:1px solid var(--enw-border, #e2e8f0);border-radius:16px;margin-bottom:28px;padding:20px 22px;box-shadow:none}.wl-share-status{color:var(--enw-text-muted, #475569);flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;display:flex}.wl-share-badge{border-radius:20px;padding:4px 12px;font-family:DM Mono,monospace;font-size:11px;font-weight:700}.wl-share-badge--public{color:var(--enw-accent-ink, #065f46);background:var(--enw-accent-tint, #f0fdf4);border:1px solid var(--enw-accent-tint, #a7f3d0)}.wl-share-badge--private{color:var(--enw-text-muted, #475569);background:var(--enw-surface-2, #f8fafc);border:1px solid var(--enw-border, #e2e8f0)}.wl-share-url-row{gap:8px;margin-bottom:10px;display:flex}.wl-share-url-input{color:var(--enw-text-muted, #2c4536);background:var(--enw-surface-2, #f8fafc);border:1.5px solid var(--enw-border, #e2e8f0);border-radius:10px;flex:1;min-width:0;padding:10px 14px;font-family:DM Mono,monospace;font-size:12.5px}.wl-copy-btn{color:var(--enw-on-header);cursor:pointer;white-space:nowrap;background:var(--enw-header, #0d1f16);border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700}.wl-copy-btn:hover{background:var(--enw-header, #16301f)}.wl-make-public-btn{color:var(--enw-on-primary, #ffffff);cursor:pointer;background:var(--enw-primary, #1a7a45);border:none;border-radius:12px;padding:12px 22px;font-size:14px;font-weight:800;transition:all .15s;box-shadow:none}.wl-make-public-btn:hover{background:var(--enw-header, #145c34);transform:translateY(-1px)}.wl-toggle-link{color:var(--enw-text-muted, #94a3b8);cursor:pointer;background:0 0;border:none;padding:0;font-size:12.5px;text-decoration:underline}.wl-toggle-link:hover{color:var(--enw-text-muted, #64748b)}.wl-share-msg{color:var(--enw-danger-ink, #dc2626);margin:8px 0 0;font-size:12.5px}.wl-remove-btn{text-align:center;color:var(--enw-danger-ink, #8a3f2c);cursor:pointer;background:var(--enw-surface-2, #f7ece8);border:1px solid var(--enw-danger-tint, #d9ab97);border-radius:8px;width:100%;margin-top:auto;padding:7px;font-size:11px;font-weight:700;transition:all .15s}.wl-remove-btn:hover{background:var(--enw-surface-2, #f0ddd4)}.wl-remove-btn:disabled{opacity:.5;cursor:default}@media (max-width:640px){.wl-share-url-row{flex-direction:column}.wl-make-public-btn{width:100%}}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.visible\!{visibility:visible!important}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.relative\!{position:relative!important}.static{position:static}.sticky{position:sticky}.top-0{top:0}.top-10{top:calc(var(--spacing) * 10)}.left-0{left:0}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-80{z-index:80}.order-1{order:1}.order-2{order:2}.col-4{grid-column:4}.col-8{grid-column:8}.col-12{grid-column:12}.col-auto{grid-column:auto}.col-span-full{grid-column:1/-1}.float-end{float:inline-end}.float-left{float:left}.float-none{float:none}.float-right{float:right}.float-start{float:inline-start}.clear-both{clear:both}.clear-end{clear:inline-end}.clear-left{clear:left}.clear-none{clear:none}.clear-right{clear:right}.clear-start{clear:inline-start}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-1{margin:var(--spacing)}.m-2{margin:calc(var(--spacing) * 2)}.m-3{margin:calc(var(--spacing) * 3)}.m-61{margin:calc(var(--spacing) * 61)}.m-505{margin:calc(var(--spacing) * 505)}.mx-1{margin-inline:var(--spacing)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing) * 3)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.ms-3{margin-inline-start:calc(var(--spacing) * 3)}.ms-1228{margin-inline-start:calc(var(--spacing) * 1228)}.me-1{margin-inline-end:var(--spacing)}.me-2{margin-inline-end:calc(var(--spacing) * 2)}.me-665{margin-inline-end:calc(var(--spacing) * 665)}.me-2028{margin-inline-end:calc(var(--spacing) * 2028)}.-mt-8{margin-top:calc(var(--spacing) * -8)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mr-0{margin-right:0}.mr-1{margin-right:var(--spacing)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mr-5{margin-right:calc(var(--spacing) * 5)}.mr-auto{margin-right:auto}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.-ml-px{margin-left:-1px}.ml-0{margin-left:0}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.box-content{box-sizing:content-box}.line-clamp-none{-webkit-line-clamp:unset;-webkit-box-orient:horizontal;display:block;overflow:visible}.\!hidden{display:none!important}.\!table{display:table!important}.block{display:block}.block\!{display:block!important}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.grid\!{display:grid!important}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table\!{display:table!important}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.aspect-\[2\/3\]{aspect-ratio:2/3}.aspect-square{aspect-ratio:1}.h-1{height:var(--spacing)}.h-5{height:calc(var(--spacing) * 5)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-48{height:calc(var(--spacing) * 48)}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-32{max-height:calc(var(--spacing) * 32)}.max-h-\[600px\]{max-height:600px}.min-h-\[40px\]{min-height:40px}.min-h-\[50px\]{min-height:50px}.min-h-screen{min-height:100vh}.w-2\/5{width:40%}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-48{width:calc(var(--spacing) * 48)}.w-50{width:calc(var(--spacing) * 50)}.w-75{width:calc(var(--spacing) * 75)}.w-100{width:calc(var(--spacing) * 100)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.caption-top{caption-side:top}.border-collapse{border-collapse:collapse}.border-separate{border-collapse:separate}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.transform\!{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}.transform-cpu{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.transform-gpu{transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.transform-none{transform:none}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-pan-left{--tw-pan-x:pan-left;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pan-right{--tw-pan-x:pan-right;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pan-x{--tw-pan-x:pan-x;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pan-down{--tw-pan-y:pan-down;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pan-up{--tw-pan-y:pan-up;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pan-y{--tw-pan-y:pan-y;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.touch-auto{touch-action:auto}.touch-manipulation{touch-action:manipulation}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.resize-x{resize:horizontal}.resize-y{resize:vertical}.snap-both{scroll-snap-type:both var(--tw-scroll-snap-strictness)}.snap-none{scroll-snap-type:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-y{scroll-snap-type:y var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-proximity{--tw-scroll-snap-strictness:proximity}.snap-align-none{scroll-snap-align:none}.snap-center{scroll-snap-align:center}.snap-end{scroll-snap-align:end}.snap-start{scroll-snap-align:start}.snap-always{scroll-snap-stop:always}.snap-normal{scroll-snap-stop:normal}.list-inside{list-style-position:inside}.list-outside{list-style-position:outside}.list-none{list-style-type:none}.appearance-auto{appearance:auto}.appearance-none{appearance:none}.break-before-all{break-before:all}.break-before-auto{break-before:auto}.break-before-avoid{break-before:avoid}.break-before-avoid-page{break-before:avoid-page}.break-before-column{break-before:column}.break-before-left{break-before:left}.break-before-page{break-before:page}.break-before-right{break-before:right}.break-inside-auto{break-inside:auto}.break-inside-avoid{break-inside:avoid}.break-inside-avoid-column{break-inside:avoid-column}.break-inside-avoid-page{break-inside:avoid-page}.break-after-all{break-after:all}.break-after-auto{break-after:auto}.break-after-avoid{break-after:avoid}.break-after-avoid-page{break-after:avoid-page}.break-after-column{break-after:column}.break-after-left{break-after:left}.break-after-page{break-after:page}.break-after-right{break-after:right}.grid-flow-col{grid-auto-flow:column}.grid-flow-col-dense{grid-auto-flow:column dense}.grid-flow-dense{grid-auto-flow:dense}.grid-flow-row{grid-auto-flow:row}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.place-content-around{place-content:space-around}.place-content-baseline{place-content:baseline start}.place-content-between{place-content:space-between}.place-content-center{place-content:center}.place-content-end{place-content:end}.place-content-evenly{place-content:space-evenly}.place-content-start{place-content:start}.place-content-stretch{place-content:stretch}.place-items-baseline{place-items:baseline}.place-items-center{place-items:center}.place-items-end{place-items:end}.place-items-start{place-items:start}.place-items-stretch{place-items:stretch stretch}.content-around{align-content:space-around}.content-baseline{align-content:baseline}.content-between{align-content:space-between}.content-center{align-content:center}.content-end{align-content:flex-end}.content-evenly{align-content:space-evenly}.content-normal{align-content:normal}.content-start{align-content:flex-start}.content-stretch{align-content:stretch}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-normal{justify-content:normal}.justify-start{justify-content:flex-start}.justify-stretch{justify-content:stretch}.justify-items-center{justify-items:center}.justify-items-end{justify-items:end}.justify-items-start{justify-items:start}.justify-items-stretch{justify-items:stretch}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse:1}.gap-x-6{column-gap:calc(var(--spacing) * 6)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--spacing) * var(--tw-space-x-reverse));margin-inline-end:calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse:1}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-10{row-gap:calc(var(--spacing) * 10)}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}:where(.divide-dashed>:not(:last-child)){--tw-border-style:dashed;border-style:dashed}:where(.divide-dotted>:not(:last-child)){--tw-border-style:dotted;border-style:dotted}:where(.divide-double>:not(:last-child)){--tw-border-style:double;border-style:double}:where(.divide-none>:not(:last-child)){--tw-border-style:none;border-style:none}:where(.divide-solid>:not(:last-child)){--tw-border-style:solid;border-style:solid}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.place-self-auto{place-self:auto}.place-self-center{place-self:center}.place-self-end{place-self:end}.place-self-start{place-self:start}.place-self-stretch{place-self:stretch stretch}.self-auto{align-self:auto}.self-baseline{align-self:baseline}.self-center{align-self:center}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-auto{justify-self:auto}.justify-self-center{justify-self:center}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.justify-self-stretch{justify-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-clip{overflow-x:clip}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-visible{overflow-x:visible}.overflow-y-auto{overflow-y:auto}.overflow-y-clip{overflow-y:clip}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-visible{overflow-y:visible}.overscroll-auto{overscroll-behavior:auto}.overscroll-contain{overscroll-behavior:contain}.overscroll-none{overscroll-behavior:none}.overscroll-x-auto{overscroll-behavior-x:auto}.overscroll-x-contain{overscroll-behavior-x:contain}.overscroll-x-none{overscroll-behavior-x:none}.overscroll-y-auto{overscroll-behavior-y:auto}.overscroll-y-contain{overscroll-behavior-y:contain}.overscroll-y-none{overscroll-behavior-y:none}.scroll-auto{scroll-behavior:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.rounded-tl{border-top-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.rounded-tr{border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-double{--tw-border-style:double;border-style:double}.border-hidden{--tw-border-style:hidden;border-style:hidden}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-amber{border-color:var(--color-amber)}.border-blue-600{border-color:var(--color-blue-600)}.border-brand{border-color:var(--color-brand)}.border-coral{border-color:var(--color-coral)}.border-forest{border-color:var(--color-forest)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-200{border-color:var(--color-green-200)}.border-green-300{border-color:var(--color-green-300)}.border-indigo-300{border-color:var(--color-indigo-300)}.border-ocean{border-color:var(--color-ocean)}.border-purple-300{border-color:var(--color-purple-300)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.border-red-400{border-color:var(--color-red-400)}.border-transparent{border-color:#0000}.border-yellow-200{border-color:var(--color-yellow-200)}.border-yellow-500{border-color:var(--color-yellow-500)}.bg-amber{background-color:var(--color-amber)}.bg-amber-dark{background-color:var(--color-amber-dark)}.bg-amber-light{background-color:var(--color-amber-light)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-brand{background-color:var(--color-brand)}.bg-brand-dark{background-color:var(--color-brand-dark)}.bg-brand-light{background-color:var(--color-brand-light)}.bg-coral{background-color:var(--color-coral)}.bg-forest{background-color:var(--color-forest)}.bg-forest-light{background-color:var(--color-forest-light)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-ink{background-color:var(--color-ink)}.bg-ocean{background-color:var(--color-ocean)}.bg-ocean-dark{background-color:var(--color-ocean-dark)}.bg-ocean-light{background-color:var(--color-ocean-light)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-500{background-color:var(--color-yellow-500)}.box-decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.box-decoration-slice{-webkit-box-decoration-break:slice;box-decoration-break:slice}.decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.decoration-slice{-webkit-box-decoration-break:slice;box-decoration-break:slice}.bg-fixed{background-attachment:fixed}.bg-local{background-attachment:local}.bg-scroll{background-attachment:scroll}.bg-clip-border{background-clip:border-box}.bg-clip-content{background-clip:content-box}.bg-clip-padding{background-clip:padding-box}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat{background-repeat:repeat}.bg-repeat-round{background-repeat:round}.bg-repeat-space{background-repeat:space}.bg-repeat-x{background-repeat:repeat-x}.bg-repeat-y{background-repeat:repeat-y}.bg-origin-border{background-origin:border-box}.bg-origin-content{background-origin:content-box}.bg-origin-padding{background-origin:padding-box}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-11{padding:calc(var(--spacing) * 11)}.p-38{padding:calc(var(--spacing) * 38)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-90{padding-top:calc(var(--spacing) * 90)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-end{text-align:end}.text-justify{text-align:justify}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.align-baseline{vertical-align:baseline}.align-bottom{vertical-align:bottom}.align-middle{vertical-align:middle}.align-sub{vertical-align:sub}.align-super{vertical-align:super}.align-text-bottom{vertical-align:text-bottom}.align-text-top{vertical-align:text-top}.align-top{vertical-align:top}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.text-pretty{text-wrap:pretty}.text-wrap{text-wrap:wrap}.break-normal{overflow-wrap:normal;word-break:normal}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.break-keep{word-break:keep-all}.overflow-ellipsis{text-overflow:ellipsis}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.hyphens-manual{-webkit-hyphens:manual;hyphens:manual}.hyphens-none{-webkit-hyphens:none;hyphens:none}.whitespace-break-spaces{white-space:break-spaces}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber{color:var(--color-amber)}.text-amber-dark{color:var(--color-amber-dark)}.text-blue-200{color:var(--color-blue-200)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-brand{color:var(--color-brand)}.text-coral{color:var(--color-coral)}.text-forest{color:var(--color-forest)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-indigo-700{color:var(--color-indigo-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-ink{color:var(--color-ink)}.text-ocean{color:var(--color-ocean)}.text-ocean-dark{color:var(--color-ocean-dark)}.text-orange-500{color:var(--color-orange-500)}.text-purple-500{color:var(--color-purple-500)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.lowercase\!{text-transform:lowercase!important}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.normal-nums{font-variant-numeric:normal}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.decoration-dashed{text-decoration-style:dashed}.decoration-dotted{text-decoration-style:dotted}.decoration-double{text-decoration-style:double}.decoration-solid{text-decoration-style:solid}.decoration-wavy{text-decoration-style:wavy}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.opacity-0{opacity:0}.bg-blend-color{background-blend-mode:color}.bg-blend-color-burn{background-blend-mode:color-burn}.bg-blend-color-dodge{background-blend-mode:color-dodge}.bg-blend-darken{background-blend-mode:darken}.bg-blend-difference{background-blend-mode:difference}.bg-blend-exclusion{background-blend-mode:exclusion}.bg-blend-hard-light{background-blend-mode:hard-light}.bg-blend-hue{background-blend-mode:hue}.bg-blend-lighten{background-blend-mode:lighten}.bg-blend-luminosity{background-blend-mode:luminosity}.bg-blend-multiply{background-blend-mode:multiply}.bg-blend-normal{background-blend-mode:normal}.bg-blend-overlay{background-blend-mode:overlay}.bg-blend-saturation{background-blend-mode:saturation}.bg-blend-screen{background-blend-mode:screen}.bg-blend-soft-light{background-blend-mode:soft-light}.mix-blend-color{mix-blend-mode:color}.mix-blend-color-burn{mix-blend-mode:color-burn}.mix-blend-color-dodge{mix-blend-mode:color-dodge}.mix-blend-darken{mix-blend-mode:darken}.mix-blend-difference{mix-blend-mode:difference}.mix-blend-exclusion{mix-blend-mode:exclusion}.mix-blend-hard-light{mix-blend-mode:hard-light}.mix-blend-hue{mix-blend-mode:hue}.mix-blend-lighten{mix-blend-mode:lighten}.mix-blend-luminosity{mix-blend-mode:luminosity}.mix-blend-multiply{mix-blend-mode:multiply}.mix-blend-normal{mix-blend-mode:normal}.mix-blend-overlay{mix-blend-mode:overlay}.mix-blend-plus-darker{mix-blend-mode:plus-darker}.mix-blend-plus-lighter{mix-blend-mode:plus-lighter}.mix-blend-saturation{mix-blend-mode:saturation}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-soft-light{mix-blend-mode:soft-light}.shadow{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-card{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-card-hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-glow{--tw-shadow:0 0 32px var(--tw-shadow-color,#1a7a4559);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-glow-coral{--tw-shadow:0 0 24px var(--tw-shadow-color,#b5533c4d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-gray-300{--tw-ring-color:var(--color-gray-300)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.\!filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter-none{filter:none}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-200{transition-delay:.2s}.delay-400{transition-delay:.4s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.contain-inline-size{--tw-contain-size:inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.contain-layout{--tw-contain-layout:layout;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.contain-paint{--tw-contain-paint:paint;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.contain-size{--tw-contain-size:size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.contain-style{--tw-contain-style:style;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.contain-content{contain:content}.contain-none{contain:none}.contain-strict{contain:strict}.forced-color-adjust-auto{forced-color-adjust:auto}.forced-color-adjust-none{forced-color-adjust:none}.outline-dashed{--tw-outline-style:dashed;outline-style:dashed}.outline-dotted{--tw-outline-style:dotted;outline-style:dotted}.outline-double{--tw-outline-style:double;outline-style:double}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-auto{-webkit-user-select:auto;user-select:auto}.select-none{-webkit-user-select:none;user-select:none}.select-text{-webkit-user-select:text;user-select:text}.\[hostname\:port\]{hostname:port}.\[mailto\:captainseb\@wanadoo\.fr\]{mailto:captainseb@wanadoo.fr}.\[mailto\:damonkohler\@yahoo\.com\]{mailto:damonkohler@yahoo.com}.\[mailto\:vncommando\@yahoo\.com\]{mailto:vncommando@yahoo.com}.\[mailto\:yukihiro_o\@infoseek\.jp\]{mailto:yukihiro o@infoseek.jp}.\[program\:ebookpromo\]{program:ebookpromo}:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse:1}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:block:is(:where(.group):hover *){display:block}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-brand:hover{border-color:var(--color-brand)}.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-blue-800:hover{background-color:var(--color-blue-800)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}.hover\:bg-green-200:hover{background-color:var(--color-green-200)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-ocean:hover{background-color:var(--color-ocean)}.hover\:bg-red-200:hover{background-color:var(--color-red-200)}.hover\:bg-red-500:hover{background-color:var(--color-red-500)}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\:bg-yellow-600:hover{background-color:var(--color-yellow-600)}.hover\:text-blue-200:hover{color:var(--color-blue-200)}.hover\:text-blue-400:hover{color:var(--color-blue-400)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:text-brand:hover{color:var(--color-brand)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}.hover\:text-gray-500:hover{color:var(--color-gray-500)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-green-700:hover{color:var(--color-green-700)}.hover\:text-green-800:hover{color:var(--color-green-800)}.hover\:text-purple-800:hover{color:var(--color-purple-800)}.hover\:text-red-700:hover{color:var(--color-red-700)}.hover\:text-red-800:hover{color:var(--color-red-800)}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-yellow-800:hover{color:var(--color-yellow-800)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:z-10:focus{z-index:10}.focus\:border-blue-300:focus{border-color:var(--color-blue-300)}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:ring:focus,.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-green-500:focus{--tw-ring-color:var(--color-green-500)}.focus\:ring-red-400:focus{--tw-ring-color:var(--color-red-400)}.focus\:ring-red-600:focus{--tw-ring-color:var(--color-red-600)}.focus\:ring-white:focus{--tw-ring-color:var(--color-white)}.focus\:ring-yellow-500:focus{--tw-ring-color:var(--color-yellow-500)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus\:ring-inset:focus{--tw-ring-inset:inset}.active\:bg-gray-100:active{background-color:var(--color-gray-100)}.active\:text-gray-500:active{color:var(--color-gray-500)}.active\:text-gray-700:active{color:var(--color-gray-700)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-200:disabled{background-color:var(--color-gray-200)}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\:checked\]\:bg-blue-50:has(:checked){background-color:var(--color-blue-50)}@media (min-width:40rem){.sm\:mr-1{margin-right:var(--spacing)}.sm\:mr-4{margin-right:calc(var(--spacing) * 4)}.sm\:ml-1{margin-left:var(--spacing)}.sm\:ml-2{margin-left:calc(var(--spacing) * 2)}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:h-20{height:calc(var(--spacing) * 20)}.sm\:h-56{height:calc(var(--spacing) * 56)}.sm\:w-12{width:calc(var(--spacing) * 12)}.sm\:w-16{width:calc(var(--spacing) * 16)}.sm\:w-auto{width:auto}.sm\:flex-1{flex:1}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}:where(.sm\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block:0}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.sm\:space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}:where(.sm\:space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)))}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:whitespace-nowrap{white-space:nowrap}}@media (min-width:48rem){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:mt-0{margin-top:0}.md\:mb-0{margin-bottom:0}.md\:ml-2{margin-left:calc(var(--spacing) * 2)}.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-block{display:inline-block}.md\:table-cell{display:table-cell}.md\:table-header-group{display:table-header-group}.md\:h-64{height:calc(var(--spacing) * 64)}.md\:w-1\/3{width:33.3333%}.md\:w-2\/3{width:66.6667%}.md\:w-12{width:calc(var(--spacing) * 12)}.md\:w-auto{width:auto}.md\:min-w-\[600px\]{min-width:600px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:justify-center{justify-content:center}.md\:justify-end{justify-content:flex-end}.md\:justify-start{justify-content:flex-start}:where(.md\:space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)))}.md\:overflow-x-auto{overflow-x:auto}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:p-10{padding:calc(var(--spacing) * 10)}.md\:py-32{padding-block:calc(var(--spacing) * 32)}.md\:text-center{text-align:center}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.md\:whitespace-nowrap{white-space:nowrap}}@media (min-width:64rem){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-start-4{grid-column-start:4}.lg\:w-16{width:calc(var(--spacing) * 16)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.animate-fadeup{animation:none}.book-card-hover:hover,.btn-buy-gradient:hover{transform:none}}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.sr-only{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ico-uni{vertical-align:-.1em;font-style:normal;line-height:1;display:inline-block}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-fadeup{animation:.45s cubic-bezier(.22,1,.36,1) both fadeUp}@media (prefers-reduced-motion:reduce){.animate-fadeup{animation:none}}}@font-face{font-family:Inter;src:url(../fonts/Inter-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/Inter-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/Inter-SemiBold.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/Inter-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/Inter-ExtraBold.woff2)format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/Inter-Black.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:DM Mono;src:url(../fonts/DMMono-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:DM Mono;src:url(../fonts/DMMono-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
/*
 * Syne — the display face the design system has always ASKED for and never
 * declared.
 *
 * --enw-font-display is 'Syne', var(--enw-font), and roughly ninety rules across
 * enw.css, enw-blog.css and style.css name it — every h1, every section heading,
 * every .stat-num, the wordmark. But no stylesheet ever declared an @font-face
 * for the family, so the stack silently resolved to Inter and every heading on
 * the site rendered in the body face. The token has been honest the whole time;
 * the declaration was simply missing, which is the one kind of font bug that
 * looks like a design decision rather than a fault.
 *
 * Three weights, because the rules ask for exactly three: 600 (subheads), 700
 * (the wordmark) and 800/900 (h1, .page-title, .stat-num — the browser picks the
 * closest declared weight, so 800 covers a 900 request).
 */



/*
 * DM Sans — the other undeclared file.
 *
 * style.css names `DM Sans` in several places (the PDF search field, some form
 * controls, a few legacy blocks) and four DM Sans files ship in /assets/fonts,
 * but nothing declared the family either — so those fields have been falling
 * through to a generic sans-serif on every platform. Unlike Syne this is a quiet
 * change by design: it restores the face those rules were written for rather
 * than changing the site's headline voice.
 *
 * The 400-italic face is declared as italic, not as a separate family, so
 * `font-style:italic` on a DM Sans element gets the real italic file instead of
 * a synthesised slant.
 */
@font-face{font-family:DM Sans;src:url(../fonts/DMSans-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:DM Sans;src:url(../fonts/DMSans-Italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:DM Sans;src:url(../fonts/DMSans-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:DM Sans;src:url(../fonts/DMSans-SemiBold.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}.bc-sep{color:var(--enw-border, #d1d5db);margin:0 8px;font-size:12px}.breadcrumb-wrap{background:var(--enw-surface, #ffffff);border-bottom:1px solid var(--enw-border, #f1f5f9);padding:0}.breadcrumb-wrap .breadcrumb-inner{padding:12px 24px}.breadcrumb-wrap .breadcrumb{box-shadow:none;background:0 0;border:none;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;font-size:13px;display:flex}.breadcrumb-wrap .breadcrumb a{color:var(--enw-ink, #1a7a45);font-weight:600;text-decoration:none}.breadcrumb-wrap .breadcrumb a:hover{text-decoration:underline}.breadcrumb-wrap .breadcrumb span:not(.bc-sep){color:var(--enw-text-muted, #64748b);font-weight:500}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-contain-size{syntax:"*";inherits:false}@property --tw-contain-layout{syntax:"*";inherits:false}@property --tw-contain-paint{syntax:"*";inherits:false}@property --tw-contain-style{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}

/* ── The book page's own bottom bar, and the tab bar it was under ─────────
 *
 * `.bd-mob-nav` — Previous/Next book — is a legacy page bar: `position: fixed;
 * bottom: 0; z-index: 90`. The design system's tab bar is fixed to the same
 * edge, is `--enw-tabbar-h` tall and sits at `--enw-z-tabbar` (110). Both were
 * true at once, so on a phone the tab bar painted over all but the top strip of
 * the book page's bar.
 *
 * Measured on the live page at 390×844 before this rule: the bar occupied
 * 770–844 and the tab bar covered 783–844, so 13px of the bar was on screen and
 * the rest of it could not be tapped — `elementFromPoint()` over "Next"
 * returned the tab bar's own link. That is why the phone showed no Previous/
 * Next at all, and it is the half of this that matters most: a hint teaching a
 * swipe is only honest if the visible alternative works too.
 *
 * So the page lifts its own bar clear of the tab bar rather than fighting for
 * the same 60px. The lift is the tab bar's own token plus the iOS safe-area
 * inset, so the two can never drift apart, and the scroll room the tab bar
 * already reserves (`body.enw-has-tabbar`) still covers both.
 */
@media (max-width: 899px) {
  body.enw-has-tabbar .bd-mob-nav {
    inset-block-end: calc(var(--enw-tabbar-h) + var(--enw-safe-bottom));
  }
}

/* ── The book page's swipe hint ───────────────────────────────────────────
 *
 * One line telling a phone that this page can be moved through sideways. It is
 * a child of `.bd-mob-nav`, anchored just above it with `inset-block-end: 100%`,
 * so it sits on the bar's own edge however tall the bar turns out to be — no
 * measured offset, no magic number to drift — and it is only ever on screen
 * where that bar is (`display: none` above 899px).
 *
 * `pointer: coarse` is the second half of the promise enw.js makes: the script
 * asks the identical question before it reveals the element, so a window with a
 * mouse cannot be shown a hint for a gesture it cannot make. The two must agree,
 * and tools/enw_website_test.php checks that they do.
 *
 * It takes no pointer events, which is the rule that matters most here: a hint
 * sitting on a swipeable page must not swallow the swipe it is teaching.
 */
@media (pointer: coarse) {
  .bd-swipe-hint {
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--enw-sp-2, 8px);
    padding: 9px 14px;
    background: var(--enw-header, #0d1f16);
    color: var(--enw-on-header, #ffffff);
    font-family: 'DM Mono', monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
    /* No shadow, deliberately: this site is flat by rule
       (tools/enw_theme_test.php fails on a spreading shadow), and the bar's own
       top border already separates the two. */
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--enw-t-base, 200ms) var(--enw-ease),
                transform var(--enw-t-base, 200ms) var(--enw-ease);
  }

  .bd-swipe-hint.is-shown {
    opacity: 1;
    transform: none;
  }

  /* Both directions, nudged outward: the arrows are the instruction, so they
     point at the two things a swipe can reach. A limited iteration count rather
     than `infinite` — a phone should not animate forever to say something it
     has said in the first five seconds. */
  .bd-swipe-hint__arrow {
    flex: 0 0 auto;
    /*
     * `currentColor`, and the measurement is why.
     *
     * The first version tinted these with `--enw-accent-ink`, which is an ink
     * token and so passed the "no fill colour as text" rule. It was still
     * wrong, and only measuring the pair showed it: on the default palette the
     * strip is `--enw-header` (#1F52C4) and the arrows came out at 1.29:1 —
     * invisible. `--enw-accent` (#16A394) would have been 2.19:1, also under
     * the 3:1 a graphic needs. `--enw-on-header` is 6.9:1, and it is the token
     * the palette sheet pairs with that surface, so taking the strip's own text
     * colour is the one choice that cannot be wrong for any of the nine.
     *
     * The nudge animation is what says "arrow" anyway; the colour has no job
     * beyond being legible. tools/enw_website_test.php holds it here.
     */
    color: currentColor;
    font-size: 13px;
    line-height: 1;
    animation: bd-swipe-nudge-next 1.6s var(--enw-ease-in-out, ease-in-out) 3;
  }

  .bd-swipe-hint__arrow--prev {
    animation-name: bd-swipe-nudge-prev;
  }
}

@keyframes bd-swipe-nudge-next {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

@keyframes bd-swipe-nudge-prev {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}

/* The slide-up and the nudge are the whole instruction; where motion is not
   wanted the hint is simply there, still saying the same words. */
@media (prefers-reduced-motion: reduce) {
  .bd-swipe-hint {
    transition: none;
  }

  .bd-swipe-hint__arrow {
    animation: none;
  }
}

/*! assets/css/enw-palettes.css · cfd38ab9d4d3 · 24593 B · theme tokens: nine palettes, light and dark, no rules */
/*!
 * enw-palettes.css — the website's theme tokens.
 *
 * Every palette here is the Android app's palette of the same name, resolved
 * the same way the app resolves it: the light values are the palette's own
 * colours, and the dark values are derived from them by setting each role to
 * the lightness its job needs at the palette's own hue (see
 * AppColors.resolve in app/lib/theme/app_colors.dart).
 *
 * GENERATED — do not edit by hand. Change a colour in the app, then run:
 *     node tools/enw_palettes.js
 *
 * The nine palettes, in the order the picker shows them.
 */

/* @generated:start — tools/enw_palettes.js, from app/lib/theme/app_colors.dart */

[data-enw-palette='default'] {
  --enw-name: 'Default';
  --enw-bg: #F4F6FA;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #EAF1FF;
  --enw-border: #E3E8EF;
  --enw-text: #1E2A3A;
  --enw-text-muted: #6B7787;
  --enw-primary: #2F6FED;
  --enw-primary-dark: #1F52C4;
  --enw-primary-tint: #EAF1FF;
  --enw-accent: #16A394;
  --enw-accent-tint: #E4F7F4;
  --enw-danger: #E0463E;
  --enw-danger-tint: #FCEBEA;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #117A6F;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='default']:not([data-enw-theme='light']) {
    --enw-name: 'Default';
    --enw-bg: #0E1116;
    --enw-surface: #1B1F27;
    --enw-surface-2: #292E38;
    --enw-border: #383F4C;
    --enw-text: #EBEDEF;
    --enw-text-muted: #A9ADB2;
    --enw-primary: #6997F2;
    --enw-primary-dark: #4676E2;
    --enw-primary-tint: #152951;
    --enw-accent: #81EEE2;
    --enw-accent-tint: #184E48;
    --enw-danger: #E87872;
    --enw-danger-tint: #551F1C;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #81EEE2;
  }
}

[data-enw-palette='default'][data-enw-theme='dark'] {
  --enw-name: 'Default';
  --enw-bg: #0E1116;
  --enw-surface: #1B1F27;
  --enw-surface-2: #292E38;
  --enw-border: #383F4C;
  --enw-text: #EBEDEF;
  --enw-text-muted: #A9ADB2;
  --enw-primary: #6997F2;
  --enw-primary-dark: #4676E2;
  --enw-primary-tint: #152951;
  --enw-accent: #81EEE2;
  --enw-accent-tint: #184E48;
  --enw-danger: #E87872;
  --enw-danger-tint: #551F1C;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #81EEE2;
}

[data-enw-palette='ocean'] {
  --enw-name: 'Ocean';
  --enw-bg: #F0F4F8;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #E0F2FE;
  --enw-border: #D0D9E4;
  --enw-text: #1A2B3C;
  --enw-text-muted: #5A6B7C;
  --enw-primary: #0077B6;
  --enw-primary-dark: #005F8A;
  --enw-primary-tint: #E0F2FE;
  --enw-accent: #0096C7;
  --enw-accent-tint: #CAF0F8;
  --enw-danger: #D62828;
  --enw-danger-tint: #FDE8E8;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #FFFFFF;
  --enw-accent-ink: #007095;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='ocean']:not([data-enw-theme='light']) {
    --enw-name: 'Ocean';
    --enw-bg: #0E1216;
    --enw-surface: #1B2127;
    --enw-surface-2: #293038;
    --enw-border: #39424C;
    --enw-text: #EBEDEF;
    --enw-text-muted: #A7ADB4;
    --enw-primary: #5CC7FF;
    --enw-primary-dark: #29BCFF;
    --enw-primary-tint: #0F3E57;
    --enw-accent: #70DCFF;
    --enw-accent-tint: #0F4557;
    --enw-danger: #E57676;
    --enw-danger-tint: #531D1D;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #70DCFF;
  }
}

[data-enw-palette='ocean'][data-enw-theme='dark'] {
  --enw-name: 'Ocean';
  --enw-bg: #0E1216;
  --enw-surface: #1B2127;
  --enw-surface-2: #293038;
  --enw-border: #39424C;
  --enw-text: #EBEDEF;
  --enw-text-muted: #A7ADB4;
  --enw-primary: #5CC7FF;
  --enw-primary-dark: #29BCFF;
  --enw-primary-tint: #0F3E57;
  --enw-accent: #70DCFF;
  --enw-accent-tint: #0F4557;
  --enw-danger: #E57676;
  --enw-danger-tint: #531D1D;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #70DCFF;
}

[data-enw-palette='forest'] {
  --enw-name: 'Forest';
  --enw-bg: #F0F5F0;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #D8F3DC;
  --enw-border: #C5D5C0;
  --enw-text: #1A2E1A;
  --enw-text-muted: #5A7A5A;
  --enw-primary: #2D6A4F;
  --enw-primary-dark: #1B4332;
  --enw-primary-tint: #D8F3DC;
  --enw-accent: #40916C;
  --enw-accent-tint: #D8F3DC;
  --enw-danger: #BC4749;
  --enw-danger-tint: #FDE8E8;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #FFFFFF;
  --enw-accent-ink: #337456;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='forest']:not([data-enw-theme='light']) {
    --enw-name: 'Forest';
    --enw-bg: #101410;
    --enw-surface: #1E241E;
    --enw-surface-2: #2C342C;
    --enw-border: #3D483D;
    --enw-text: #ECEFEC;
    --enw-text-muted: #A7B4A7;
    --enw-primary: #8CCEB1;
    --enw-primary-dark: #66C19B;
    --enw-primary-tint: #254135;
    --enw-accent: #9CD3BA;
    --enw-accent-tint: #254134;
    --enw-danger: #D38789;
    --enw-danger-tint: #4A2626;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #9CD3BA;
  }
}

[data-enw-palette='forest'][data-enw-theme='dark'] {
  --enw-name: 'Forest';
  --enw-bg: #101410;
  --enw-surface: #1E241E;
  --enw-surface-2: #2C342C;
  --enw-border: #3D483D;
  --enw-text: #ECEFEC;
  --enw-text-muted: #A7B4A7;
  --enw-primary: #8CCEB1;
  --enw-primary-dark: #66C19B;
  --enw-primary-tint: #254135;
  --enw-accent: #9CD3BA;
  --enw-accent-tint: #254134;
  --enw-danger: #D38789;
  --enw-danger-tint: #4A2626;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #9CD3BA;
}

[data-enw-palette='sunset'] {
  --enw-name: 'Sunset';
  --enw-bg: #FFF8F0;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #FDE8E0;
  --enw-border: #F0D8C0;
  --enw-text: #2E1A0A;
  --enw-text-muted: #8A6A4A;
  --enw-primary: #E76F51;
  --enw-primary-dark: #C45535;
  --enw-primary-tint: #FDE8E0;
  --enw-accent: #F4A261;
  --enw-accent-tint: #FFF0E0;
  --enw-danger: #D62828;
  --enw-danger-tint: #FDE8E8;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #FFFFFF;
  --enw-accent-ink: #AF540C;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='sunset']:not([data-enw-theme='light']) {
    --enw-name: 'Sunset';
    --enw-bg: #1D1307;
    --enw-surface: #322211;
    --enw-surface-2: #46311B;
    --enw-border: #5D4428;
    --enw-text: #F1EDEA;
    --enw-text-muted: #BAADA1;
    --enw-primary: #EB8870;
    --enw-primary-dark: #D17256;
    --enw-primary-tint: #4E2318;
    --enw-accent: #F6B079;
    --enw-accent-tint: #522F14;
    --enw-danger: #E57676;
    --enw-danger-tint: #531D1D;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #F6B079;
  }
}

[data-enw-palette='sunset'][data-enw-theme='dark'] {
  --enw-name: 'Sunset';
  --enw-bg: #1D1307;
  --enw-surface: #322211;
  --enw-surface-2: #46311B;
  --enw-border: #5D4428;
  --enw-text: #F1EDEA;
  --enw-text-muted: #BAADA1;
  --enw-primary: #EB8870;
  --enw-primary-dark: #D17256;
  --enw-primary-tint: #4E2318;
  --enw-accent: #F6B079;
  --enw-accent-tint: #522F14;
  --enw-danger: #E57676;
  --enw-danger-tint: #531D1D;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #F6B079;
}

[data-enw-palette='berry'] {
  --enw-name: 'Berry';
  --enw-bg: #F8F0F8;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #F5E6F5;
  --enw-border: #E0C8E0;
  --enw-text: #2A1A2E;
  --enw-text-muted: #7A5A7A;
  --enw-primary: #9B2C8C;
  --enw-primary-dark: #7A1F70;
  --enw-primary-tint: #F5E6F5;
  --enw-accent: #D53F8C;
  --enw-accent-tint: #FDE8F5;
  --enw-danger: #E53E3E;
  --enw-danger-tint: #FDE8E8;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #C02A77;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='berry']:not([data-enw-theme='light']) {
    --enw-name: 'Berry';
    --enw-bg: #160E16;
    --enw-surface: #271B27;
    --enw-surface-2: #382938;
    --enw-border: #4C394C;
    --enw-text: #EEECEF;
    --enw-text-muted: #B4A7B4;
    --enw-primary: #DB80CF;
    --enw-primary-dark: #D454C6;
    --enw-primary-tint: #471F42;
    --enw-accent: #E58AB9;
    --enw-accent-tint: #4A1C34;
    --enw-danger: #EC6F6F;
    --enw-danger-tint: #561A1A;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #E58AB9;
  }
}

[data-enw-palette='berry'][data-enw-theme='dark'] {
  --enw-name: 'Berry';
  --enw-bg: #160E16;
  --enw-surface: #271B27;
  --enw-surface-2: #382938;
  --enw-border: #4C394C;
  --enw-text: #EEECEF;
  --enw-text-muted: #B4A7B4;
  --enw-primary: #DB80CF;
  --enw-primary-dark: #D454C6;
  --enw-primary-tint: #471F42;
  --enw-accent: #E58AB9;
  --enw-accent-tint: #4A1C34;
  --enw-danger: #EC6F6F;
  --enw-danger-tint: #561A1A;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #E58AB9;
}

[data-enw-palette='royal'] {
  --enw-name: 'Royal';
  --enw-bg: #F5F0FF;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #EDE9FE;
  --enw-border: #D4C5F0;
  --enw-text: #1A1040;
  --enw-text-muted: #6A5A8A;
  --enw-primary: #6C3AED;
  --enw-primary-dark: #5028C6;
  --enw-primary-tint: #EDE9FE;
  --enw-accent: #8B5CF6;
  --enw-accent-tint: #EDE9FE;
  --enw-danger: #DC2626;
  --enw-danger-tint: #FEE2E2;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #FFFFFF;
  --enw-accent-ink: #743CF4;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='royal']:not([data-enw-theme='light']) {
    --enw-name: 'Royal';
    --enw-bg: #0E071D;
    --enw-surface: #1C1132;
    --enw-surface-2: #291B46;
    --enw-border: #39285D;
    --enw-text: #EBEAF0;
    --enw-text-muted: #ABA5B6;
    --enw-primary: #8F69F1;
    --enw-primary-dark: #714DDB;
    --enw-primary-tint: #261551;
    --enw-accent: #9F78F8;
    --enw-accent-tint: #271353;
    --enw-danger: #E87272;
    --enw-danger-tint: #541C1C;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #9F78F8;
  }
}

[data-enw-palette='royal'][data-enw-theme='dark'] {
  --enw-name: 'Royal';
  --enw-bg: #0E071D;
  --enw-surface: #1C1132;
  --enw-surface-2: #291B46;
  --enw-border: #39285D;
  --enw-text: #EBEAF0;
  --enw-text-muted: #ABA5B6;
  --enw-primary: #8F69F1;
  --enw-primary-dark: #714DDB;
  --enw-primary-tint: #261551;
  --enw-accent: #9F78F8;
  --enw-accent-tint: #271353;
  --enw-danger: #E87272;
  --enw-danger-tint: #541C1C;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #9F78F8;
}

[data-enw-palette='rose'] {
  --enw-name: 'Rose';
  --enw-bg: #FFF5F5;
  --enw-surface: #FFFFFF;
  --enw-surface-2: #FFE4E6;
  --enw-border: #F0D0D0;
  --enw-text: #2E1A1A;
  --enw-text-muted: #8A5A5A;
  --enw-primary: #E11D48;
  --enw-primary-dark: #BE123C;
  --enw-primary-tint: #FFE4E6;
  --enw-accent: #F43F5E;
  --enw-accent-tint: #FFE4E6;
  --enw-danger: #DC2626;
  --enw-danger-tint: #FEE2E2;
  --enw-on-primary: #FFFFFF;
  --enw-on-accent: #10131A;
  --enw-on-danger: #FFFFFF;
  --enw-accent-ink: #CB0C2C;
}

@media (prefers-color-scheme: dark) {
  [data-enw-palette='rose']:not([data-enw-theme='light']) {
    --enw-name: 'Rose';
    --enw-bg: #1D0707;
    --enw-surface: #321111;
    --enw-surface-2: #461B1B;
    --enw-border: #5D2828;
    --enw-text: #EFECEC;
    --enw-text-muted: #B6A5A5;
    --enw-primary: #EC6E8A;
    --enw-primary-dark: #EC3B67;
    --enw-primary-tint: #4F1724;
    --enw-accent: #F7788E;
    --enw-accent-tint: #53131E;
    --enw-danger: #E87272;
    --enw-danger-tint: #541C1C;
    --enw-on-primary: #10131A;
    --enw-on-accent: #10131A;
    --enw-on-danger: #10131A;
    --enw-accent-ink: #F7788E;
  }
}

[data-enw-palette='rose'][data-enw-theme='dark'] {
  --enw-name: 'Rose';
  --enw-bg: #1D0707;
  --enw-surface: #321111;
  --enw-surface-2: #461B1B;
  --enw-border: #5D2828;
  --enw-text: #EFECEC;
  --enw-text-muted: #B6A5A5;
  --enw-primary: #EC6E8A;
  --enw-primary-dark: #EC3B67;
  --enw-primary-tint: #4F1724;
  --enw-accent: #F7788E;
  --enw-accent-tint: #53131E;
  --enw-danger: #E87272;
  --enw-danger-tint: #541C1C;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #F7788E;
}

[data-enw-palette='midnight'] {
  --enw-name: 'Midnight';
  --enw-bg: #0F172A;
  --enw-surface: #1E293B;
  --enw-surface-2: #243044;
  --enw-border: #334155;
  --enw-text: #E2E8F0;
  --enw-text-muted: #94A3B8;
  --enw-primary: #60A5FA;
  --enw-primary-dark: #3B82F6;
  --enw-primary-tint: #243044;
  --enw-accent: #2DD4BF;
  --enw-accent-tint: #243044;
  --enw-danger: #F87171;
  --enw-danger-tint: #3A2530;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #2DD4BF;
}

[data-enw-palette='dark'] {
  --enw-name: 'Charcoal';
  --enw-bg: #121212;
  --enw-surface: #1E1E1E;
  --enw-surface-2: #2A2A2A;
  --enw-border: #333333;
  --enw-text: #E6E6E6;
  --enw-text-muted: #9A9A9A;
  --enw-primary: #A78BFA;
  --enw-primary-dark: #8B5CF6;
  --enw-primary-tint: #2A2A2A;
  --enw-accent: #22D3EE;
  --enw-accent-tint: #2A2A2A;
  --enw-danger: #EF9A9A;
  --enw-danger-tint: #3A2626;
  --enw-on-primary: #10131A;
  --enw-on-accent: #10131A;
  --enw-on-danger: #10131A;
  --enw-accent-ink: #22D3EE;
}

/* @generated:end */

/*
 * ── The website's own colour roles, and the corrections a dark scheme needs
 *
 * Hand-written, outside the @generated markers on purpose:
 * `node tools/enw_palettes.js` regenerates everything above this line from
 * the app, and cannot overwrite anything below it.
 *
 * The app has no large panel surfaces and never paints brand ink on a brand
 * wash. This site does both — 43 panels and 19 inks — so those are roles of
 * their own here:
 *
 *   --enw-header       a panel surface: a footer, a spec/description/review
 *                      header, a hero, an icon tile. Deep brand colour in a
 *                      light scheme, the scheme's own lifted surface in a
 *                      dark one, because the label on it is light text.
 *
 *   --enw-on-header    that panel's label.
 *
 *   --enw-ink          the brand colour as INK on a wash — a chip, a badge, a
 *                      hovered nav link, a tinted button.
 *
 *   --enw-danger-ink   the same, for destructive text and controls.
 *
 * A token that is a button BACKGROUND is never tuned here. Its label is
 * chosen for that job (near-black on a bright accent), and ink on a wash
 * wants the opposite colour; the two cannot share one value. That is why ink
 * has ink tokens, and why the accents keep the values the app gave them.
 *
 * Each of these is fitted by nudging LIGHTNESS ONLY — hue and saturation
 * untouched, the app's own rule — by the smallest step that clears every
 * pairing it is painted in, in the direction its scheme needs. Several
 * palettes could not carry this site's pairings as generated: Sunset's coral
 * link was 2.62:1 on its own tint, its accent 1.84:1, in the LIGHT scheme.
 *
 * tools/enw_contrast.php measures all of it, resolves these aliases, and
 * fails the build if a pairing drops below its threshold.
 */

/* Light, chosen explicitly. */
[data-enw-palette='default'][data-enw-theme='light'] {
  --enw-header: #1F52C4;
  --enw-on-header: #FFFFFF;
  --enw-ink: #1F52C4;
  --enw-danger-ink: #BE3C35;
  --enw-accent-ink: #11786D;
  --enw-text-muted: #616C7B;
}

[data-enw-palette='ocean'][data-enw-theme='light'] {
  --enw-header: #005F8A;
  --enw-on-header: #FFFFFF;
  --enw-ink: #005F8A;
  --enw-danger-ink: #CB2626;
  --enw-accent-ink: #006F94;
  --enw-text-muted: #5A6B7C;
}

[data-enw-palette='forest'][data-enw-theme='light'] {
  --enw-header: #1B4332;
  --enw-on-header: #FFFFFF;
  --enw-ink: #1B4332;
  --enw-danger-ink: #B34345;
  --enw-accent-ink: #337456;
  --enw-text-muted: #537053;
}

[data-enw-palette='sunset'][data-enw-theme='light'] {
  --enw-header: #BE5233;
  --enw-on-header: #FFFFFF;
  --enw-ink: #AC4B2F;
  --enw-danger-ink: #C92626;
  --enw-accent-ink: #A6500B;
  --enw-text-muted: #806345;
}

[data-enw-palette='berry'][data-enw-theme='light'] {
  --enw-header: #7A1F70;
  --enw-on-header: #FFFFFF;
  --enw-ink: #7A1F70;
  --enw-danger-ink: #BE3333;
  --enw-accent-ink: #BC2975;
  --enw-text-muted: #7A5A7A;
  --enw-on-accent: #000000;
}

[data-enw-palette='royal'][data-enw-theme='light'] {
  --enw-header: #5028C6;
  --enw-on-header: #FFFFFF;
  --enw-ink: #5028C6;
  --enw-danger-ink: #C62222;
  --enw-accent-ink: #743CF4;
  --enw-text-muted: #6A5A8A;
  --enw-on-accent: #000000;
}

[data-enw-palette='rose'][data-enw-theme='light'] {
  --enw-header: #BE123C;
  --enw-on-header: #FFFFFF;
  --enw-ink: #BE123C;
  --enw-danger-ink: #C62222;
  --enw-accent-ink: #CB0C2C;
  --enw-text-muted: #8A5A5A;
}

/* Light, because the operating system says so and nothing was chosen. */
@media (prefers-color-scheme: light) {
  [data-enw-palette='default']:not([data-enw-theme='dark']) {
    --enw-header: #1F52C4;
    --enw-on-header: #FFFFFF;
    --enw-ink: #1F52C4;
    --enw-danger-ink: #BE3C35;
    --enw-accent-ink: #11786D;
    --enw-text-muted: #616C7B;
  }

  [data-enw-palette='ocean']:not([data-enw-theme='dark']) {
    --enw-header: #005F8A;
    --enw-on-header: #FFFFFF;
    --enw-ink: #005F8A;
    --enw-danger-ink: #CB2626;
    --enw-accent-ink: #006F94;
    --enw-text-muted: #5A6B7C;
  }

  [data-enw-palette='forest']:not([data-enw-theme='dark']) {
    --enw-header: #1B4332;
    --enw-on-header: #FFFFFF;
    --enw-ink: #1B4332;
    --enw-danger-ink: #B34345;
    --enw-accent-ink: #337456;
    --enw-text-muted: #537053;
  }

  [data-enw-palette='sunset']:not([data-enw-theme='dark']) {
    --enw-header: #BE5233;
    --enw-on-header: #FFFFFF;
    --enw-ink: #AC4B2F;
    --enw-danger-ink: #C92626;
    --enw-accent-ink: #A6500B;
    --enw-text-muted: #806345;
  }

  [data-enw-palette='berry']:not([data-enw-theme='dark']) {
    --enw-header: #7A1F70;
    --enw-on-header: #FFFFFF;
    --enw-ink: #7A1F70;
    --enw-danger-ink: #BE3333;
    --enw-accent-ink: #BC2975;
    --enw-text-muted: #7A5A7A;
    --enw-on-accent: #000000;
  }

  [data-enw-palette='royal']:not([data-enw-theme='dark']) {
    --enw-header: #5028C6;
    --enw-on-header: #FFFFFF;
    --enw-ink: #5028C6;
    --enw-danger-ink: #C62222;
    --enw-accent-ink: #743CF4;
    --enw-text-muted: #6A5A8A;
    --enw-on-accent: #000000;
  }

  [data-enw-palette='rose']:not([data-enw-theme='dark']) {
    --enw-header: #BE123C;
    --enw-on-header: #FFFFFF;
    --enw-ink: #BE123C;
    --enw-danger-ink: #C62222;
    --enw-accent-ink: #CB0C2C;
    --enw-text-muted: #8A5A5A;
  }
}

/* Dark, chosen explicitly. */
[data-enw-palette='default'][data-enw-theme='dark'] {
  --enw-header: #292E38;
  --enw-on-header: #EBEDEF;
  --enw-ink: #97B7F6;
  --enw-danger-ink: #E87B75;
  --enw-accent-ink: #81EEE2;
  --enw-text-muted: #A9ADB2;
}

[data-enw-palette='ocean'][data-enw-theme='dark'] {
  --enw-header: #293038;
  --enw-on-header: #EBEDEF;
  --enw-ink: #8DD8FF;
  --enw-danger-ink: #E67979;
  --enw-accent-ink: #70DCFF;
  --enw-text-muted: #A7ADB4;
}

[data-enw-palette='forest'][data-enw-theme='dark'] {
  --enw-header: #2C342C;
  --enw-on-header: #ECEFEC;
  --enw-ink: #AFDDC8;
  --enw-danger-ink: #D3888A;
  --enw-accent-ink: #9CD3BA;
  --enw-text-muted: #A7B4A7;
}

[data-enw-palette='sunset'][data-enw-theme='dark'] {
  --enw-header: #46311B;
  --enw-on-header: #F1EDEA;
  --enw-ink: #F1AC9B;
  --enw-danger-ink: #E88484;
  --enw-accent-ink: #F6B079;
  --enw-text-muted: #BAADA1;
}

[data-enw-palette='berry'][data-enw-theme='dark'] {
  --enw-header: #382938;
  --enw-on-header: #EEECEF;
  --enw-ink: #E6A6DD;
  --enw-danger-ink: #ED7373;
  --enw-accent-ink: #E58AB9;
  --enw-text-muted: #B4A7B4;
}

[data-enw-palette='royal'][data-enw-theme='dark'] {
  --enw-header: #291B46;
  --enw-on-header: #EBEAF0;
  --enw-ink: #B196F5;
  --enw-danger-ink: #E97676;
  --enw-accent-ink: #9F78F8;
  --enw-text-muted: #ABA5B6;
}

[data-enw-palette='rose'][data-enw-theme='dark'] {
  --enw-header: #461B1B;
  --enw-on-header: #EFECEC;
  --enw-ink: #F29AAD;
  --enw-danger-ink: #E97676;
  --enw-accent-ink: #F7788E;
  --enw-text-muted: #B6A5A5;
}

/* Dark, because the operating system says so and nothing was chosen. The
   :not() guard is the generated sheet's own, for the same reason: an absent
   theme attribute plus a dark OS is this case, and an explicit light choice
   is not. */
@media (prefers-color-scheme: dark) {
  [data-enw-palette='default']:not([data-enw-theme='light']) {
    --enw-header: #292E38;
    --enw-on-header: #EBEDEF;
    --enw-ink: #97B7F6;
    --enw-danger-ink: #E87B75;
    --enw-accent-ink: #81EEE2;
    --enw-text-muted: #A9ADB2;
  }

  [data-enw-palette='ocean']:not([data-enw-theme='light']) {
    --enw-header: #293038;
    --enw-on-header: #EBEDEF;
    --enw-ink: #8DD8FF;
    --enw-danger-ink: #E67979;
    --enw-accent-ink: #70DCFF;
    --enw-text-muted: #A7ADB4;
  }

  [data-enw-palette='forest']:not([data-enw-theme='light']) {
    --enw-header: #2C342C;
    --enw-on-header: #ECEFEC;
    --enw-ink: #AFDDC8;
    --enw-danger-ink: #D3888A;
    --enw-accent-ink: #9CD3BA;
    --enw-text-muted: #A7B4A7;
  }

  [data-enw-palette='sunset']:not([data-enw-theme='light']) {
    --enw-header: #46311B;
    --enw-on-header: #F1EDEA;
    --enw-ink: #F1AC9B;
    --enw-danger-ink: #E88484;
    --enw-accent-ink: #F6B079;
    --enw-text-muted: #BAADA1;
  }

  [data-enw-palette='berry']:not([data-enw-theme='light']) {
    --enw-header: #382938;
    --enw-on-header: #EEECEF;
    --enw-ink: #E6A6DD;
    --enw-danger-ink: #ED7373;
    --enw-accent-ink: #E58AB9;
    --enw-text-muted: #B4A7B4;
  }

  [data-enw-palette='royal']:not([data-enw-theme='light']) {
    --enw-header: #291B46;
    --enw-on-header: #EBEAF0;
    --enw-ink: #B196F5;
    --enw-danger-ink: #E97676;
    --enw-accent-ink: #9F78F8;
    --enw-text-muted: #ABA5B6;
  }

  [data-enw-palette='rose']:not([data-enw-theme='light']) {
    --enw-header: #461B1B;
    --enw-on-header: #EFECEC;
    --enw-ink: #F29AAD;
    --enw-danger-ink: #E97676;
    --enw-accent-ink: #F7788E;
    --enw-text-muted: #B6A5A5;
  }
}

/* The two palettes that ARE dark: one scheme, whichever way it is reached. */
[data-enw-palette='midnight'] {
  --enw-header: #243044;
  --enw-on-header: #E2E8F0;
  --enw-ink: #90C0FC;
  --enw-danger-ink: #F87171;
  --enw-accent-ink: #2DD4BF;
  --enw-text-muted: #94A3B8;
}

[data-enw-palette='dark'] {
  --enw-header: #2A2A2A;
  --enw-on-header: #E6E6E6;
  --enw-ink: #C1AEFC;
  --enw-danger-ink: #EF9A9A;
  --enw-accent-ink: #22D3EE;
  --enw-text-muted: #9A9A9A;
}

/*
 * And the light-scheme default for the two aliasable roles. In a light scheme
 * they are exactly the values that shipped before this section existed, so
 * nothing about the light theme moves except the corrections above.
 *
 * `:where()` IS WHAT MAKES THAT TRUE, AND ITS ABSENCE WAS A LIVE BUG. This read
 * `[data-enw-palette]`, which is specificity (0,1,0) — exactly what
 * `[data-enw-palette='midnight']` above it is. Placed last, an equal-specificity
 * tie is won by whichever comes later, so this alias did not sit under the
 * explicit blocks, it sat ON TOP of the two palettes whose corrections are
 * single-attribute selectors: midnight and charcoal. Measured in Chrome on the
 * live site, `--enw-ink` resolved to `--enw-primary-dark` (#3B82F6) instead of
 * midnight's own #90C0FC, and to #8B5CF6 instead of charcoal's #C1AEFC — a
 * saturated blue meant for a white background, painted on a black one. The seven
 * palettes with `[data-enw-palette='x'][data-enw-theme='dark']` blocks are
 * (0,2,0) and were never affected, which is why it went unnoticed: only the two
 * dark-only palettes have no second attribute to outrank it with.
 *
 * Every `--enw-ink` and `--enw-danger-ink` consumer was wrong in those two
 * palettes — the search band's links, the drawer's links and the tab bar, and the
 * top bar's hover and current-page states. `:where()` takes the selector's
 * specificity to zero, so this now loses to every declaration above it and still
 * applies wherever nothing else sets the role, which is what the paragraph below
 * always claimed it did.
 */
:where([data-enw-palette]) {
  --enw-ink: var(--enw-primary-dark);
  --enw-danger-ink: var(--enw-danger);
}

/*! assets/css/enw.css · 4d4182f71dbd · 115933 B · the design system, must win over the legacy layer */
/*!
 * enw.css — the website's design system.
 *
 * Hand-written, plain CSS. There is no build step and nothing here needs one:
 * this file is edited and served as-is, and the site's only generated asset is
 * enw-palettes.css beside it (the nine app palettes, from tools/enw_palettes.js).
 *
 * Load order matters and is deliberate:
 *
 *     /assets/css/style.css          the legacy layer — the compiled Tailwind
 *                                    output every existing page already uses.
 *                                    It stays until the last page is migrated.
 *     /assets/css/enw-palettes.css   generated theme tokens (the nine palettes)
 *     /assets/css/enw.css            this file — the design system
 *
 * Everything here is driven by custom properties, so the palette picker changes
 * the whole site by setting two attributes on <html> and nothing else:
 *
 *     <html data-enw-palette="ocean" data-enw-theme="dark">
 *
 * and the server can set them from a cookie, so a returning visitor's first
 * paint is already in their theme. No flash, no layout shift, no reflow.
 *
 * Conventions
 *   · every class this file owns is prefixed `enw-`, and nothing else on the
 *     site uses that prefix — so a page can adopt pieces of this system one at
 *     a time without the page's own CSS fighting it;
 *   · sizes are in rem with fluid clamps for type, so a 5-inch phone and a
 *     27-inch monitor get the same design at different scales;
 *   · logical properties (padding-inline, inset-inline) rather than
 *     left/right, so an RTL locale is a `dir` attribute and not a rewrite;
 *   · `dvh` where the viewport height matters, with `vh` first for browsers
 *     that predate it — mobile toolbars are the classic source of jump;
 *   · nothing animates that is not a transform or an opacity, so scrolling
 *     stays smooth on a cheap Android phone.
 *
 * The last section is a small "bridge": the rules that restyle the legacy
 * chrome (the old <nav>, <footer>, and card markup) so a page that has not
 * been migrated still looks like the new site. It is the only part of this
 * file that overrides rather than adds, and it shrinks as pages move over.
 */

/* ===========================================================================
   1. Non-generated tokens
   =========================================================================== */

:root {
  /* Type ------------------------------------------------------------------ */
  --enw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --enw-font-display: 'Inter', var(--enw-font);
  --enw-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A fluid scale: the small end is for a 320px phone, the large end for a
     desktop, and the ratio between steps stays musical all the way up. */
  --enw-fs-2xs: 0.6875rem;
  --enw-fs-xs: 0.75rem;
  --enw-fs-sm: 0.8125rem;
  --enw-fs-base: 0.9375rem;
  --enw-fs-md: 1rem;
  --enw-fs-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --enw-fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --enw-fs-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --enw-fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --enw-fs-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);

  --enw-lh-tight: 1.15;
  --enw-lh-snug: 1.35;
  --enw-lh-body: 1.6;

  /* Space — a 4px rhythm, named by role rather than by number so a spacing
     decision reads the same in every file. */
  --enw-sp-1: 0.25rem;
  --enw-sp-2: 0.5rem;
  --enw-sp-3: 0.75rem;
  --enw-sp-4: 1rem;
  --enw-sp-5: 1.25rem;
  --enw-sp-6: 1.5rem;
  --enw-sp-8: 2rem;
  --enw-sp-10: 2.5rem;
  --enw-sp-12: 3rem;
  --enw-sp-16: 4rem;
  --enw-sp-20: 5rem;

  /* Shape ----------------------------------------------------------------- */
  --enw-r-xs: 6px;
  --enw-r-sm: 10px;
  --enw-r-md: 14px;
  --enw-r-lg: 20px;

  /* A single component's own corner radius, where a component wants to be
     tunable without inventing a step on the scale above.

     DEFINED, RATHER THAN LEFT TO A FALLBACK. It was read in two rules as
     `var(--enw-radius, 12px)` and defined nowhere, so the fallback was the only
     value it ever had — which is not an error a browser reports. A token that
     never resolves is the exact bug tools/enw_contrast.php catches (enw-app.css
     read a mistyped `--enw-muted` the same way, and its fallback failed in every
     dark theme), so the value lives here and the reads mean something. */
  --enw-radius: 12px;

  /* How far a control shrinks while it is held down — the press half of the
     depth recipe. Read in the `:active` rule for the site's buttons; defined
     here so the read resolves and the gesture is one value to tune. */
  --enw-press-scale: .965;
  --enw-r-xl: 28px;
  --enw-r-pill: 999px;

  /* Elevation — switched off, deliberately, and this is the switch.

     These four tokens were ink at 4-18%: a black shadow under another name, on
     every card, chip and panel. On a site whose pages are already separated by
     hairlines (`--enw-border`) and surface colours, a shadow says nothing and
     costs contrast, so nothing paints one.

     They are kept as tokens rather than deleted so that depth, if it is ever
     wanted again, is four values in one place instead of a hunt through a
     stylesheet. `0 0 #0000` is a transparent zero shadow rather than `none`,
     because a token may be composed into a list — `box-shadow: var(--enw-ring),
     var(--enw-shadow-md)` — and a `none` in that list would poison it and take a
     focus ring down with it. */
  --enw-shadow-sm:0 0 #0000;
  --enw-shadow-md:0 0 #0000;
  --enw-shadow-lg:0 0 #0000;
  --enw-shadow-pop:0 0 #0000;

  /* The ONE value a control sets to get depth — see §4.9 of enw-legacy.css for
     the recipe that spends it.

     The four elevation tokens above are off because a shadow that spreads paints
     outside its box, and a grid of cards each carrying one reads as grime.
     Carried to the end, that leaves a page where nothing looks pressable — the
     Buy button was a coloured rectangle. A key gets its depth from a lit face, a
     shaded face and a bottom edge, all inside the button: paint, not shadow.

     Only the FACE is a token, and the mixes are written out where they are used,
     which is not a style preference — it is the only thing that works. A custom
     property declared on `:root` has its `var()`s substituted *there*, once, when
     it is computed; a descendant that overrides `--enw-key-face` does not
     recompute anything declared above it. Measured in Chrome on the live book
     page: the button's face resolved to `--enw-primary` (#2F6FED) while its
     shading still mixed the `:root` fallback (#16A394), so a blue key was lit
     and edged in teal. Writing the mix in the rule that sets the face is what
     makes the two halves agree. */
  --enw-key-face: var(--enw-accent, #16a394);

  /* Chrome ---------------------------------------------------------------- */
  --enw-topbar-h: 60px;
  --enw-tabbar-h: 60px;
  --enw-drawer-w: 286px;
  --enw-container: 1440px;
  --enw-container-narrow: 760px;
  /* The widest a page's own column may run. enw-pages.css reads this rather
     than a literal 1400px, so the large-screen scale below widens the search
     and detail pages together with the rest of the site. */
  --enw-page: 1400px;
  --enw-safe-top: env(safe-area-inset-top, 0px);
  --enw-safe-bottom: env(safe-area-inset-bottom, 0px);
  --enw-safe-left: env(safe-area-inset-left, 0px);
  --enw-safe-right: env(safe-area-inset-right, 0px);

  /* Motion — one duration per intent, so the whole site feels like one hand. */
  --enw-t-fast: 120ms;
  --enw-t-base: 200ms;
  --enw-t-slow: 320ms;
  --enw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --enw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* The footer used to define its own three tokens here — `--enw-footer-bg`
     was a fixed dark green, so the footer was the same colour under every
     palette. It is a panel like any other and now reads --enw-header for its
     surface and --enw-on-header for its label (see §12), which the palette
     sheet defines per scheme. Nothing defines a --enw-footer-* token here any
     more, on purpose. */

  /* Layers — named, because "z-index: 999" is how a modal ends up behind a
     sticky header nobody remembers adding. */
  --enw-z-base: 1;
  --enw-z-rail: 5;
  --enw-z-topbar: 100;
  --enw-z-tabbar: 110;
  --enw-z-drawer: 200;
  --enw-z-backdrop: 190;
  --enw-z-sheet: 300;
  --enw-z-toast: 400;

  color-scheme: light;
}

[data-enw-theme='dark'] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-enw-theme='light']) {
    color-scheme: dark;
  }
}

/* ===========================================================================
   2. Base
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The address bar on mobile changes the viewport height; keeping the
     horizontal axis clipped stops a wide rail from producing a sideways
     scroll on the whole document. */
  overflow-x: clip;
  background: var(--enw-bg, #f4f6fa);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--enw-bg, #f4f6fa);
  color: var(--enw-text, #1e2a3a);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-base);
  line-height: var(--enw-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* A page with the mobile tab bar reserves the room for it up front, so the
   bar never covers the footer and nothing has to reserve space after load. */
body.enw-has-tabbar {
  padding-block-end: calc(var(--enw-tabbar-h) + var(--enw-safe-bottom));
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

/*
 * These two resets are the *only* rules here that name no class, and they are
 * the ones that have to behave like a reset rather than like a fix.
 *
 * They live in the `base` layer on purpose. This file is otherwise unlayered, so
 * a rule here outranks everything in style.css's layers — and "outranks
 * everything" is exactly wrong for `a { color: inherit }`: it beat every legacy
 * component's *own* colour, so a `.btn-buy` anchored on a primary fill inherits
 * the page's text colour and the label goes light-on-light in one theme and
 * dark-on-dark in the other. Colour is a component's decision; a reset only says
 * "inherit unless something more specific knows better".
 *
 * Being in `base` is enough for both jobs: style.css's own base layer is
 * declared first, so within the layer these still win over it (later file,
 * same layer), while every `@layer components` rule now wins over them.
 */
@layer base {
  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
}

:focus-visible {
  outline: 2px solid var(--enw-primary, #2f6fed);
  outline-offset: 2px;
  border-radius: var(--enw-r-xs);
}

::selection {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-text, #1e2a3a);
}

/* Scrollbars, where the platform lets us have an opinion. */
@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--enw-border, #e3e8ef) transparent;
  }
}

/* ===========================================================================
   3. Layout
   =========================================================================== */

.enw-container {
  width: 100%;
  max-width: var(--enw-container);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}

.enw-container--narrow {
  max-width: var(--enw-container-narrow);
}

.enw-section {
  margin-block: var(--enw-sp-8) var(--enw-sp-12);
}

.enw-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--enw-sp-4);
  margin-block-end: var(--enw-sp-4);
}

.enw-section__title {
  margin: 0;
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight);
}

.enw-section__sub {
  margin: var(--enw-sp-1) 0 0;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm);
}

.enw-section__more {
  flex: none;
  color: var(--enw-ink, #2f6fed);
  font-size: var(--enw-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.enw-section__more:hover {
  text-decoration: underline;
}

/* The shell. */
.enw-shell {
  display: block;
  min-height: 60vh;
}

/* The drawer, pinned beside the page.

   This used to make `.enw-shell` a two-column grid — but the drawer is not a
   child of `.enw-shell` (nav.php prints it before <main>), so the grid had one
   child and two columns, and that child went into the narrow first one: the
   page was squeezed into a 286px strip with an empty column beside it.

   A drawer that is already `position: fixed` needs no grid at all. Pinned, it
   simply stays where it is — no translate, no backdrop — and the body is given
   the room it occupies. The top bar is inside the body, so it starts to the
   right of the drawer and stays sticky against the top of the viewport. */
@media (min-width: 1200px) {
  html[data-enw-sidebar='pinned'] body {
    padding-inline-start: min(88vw, var(--enw-drawer-w));
  }

  html[data-enw-sidebar='pinned'] .enw-drawer {
    transform: none;
    visibility: visible;
    box-shadow: none;
  }

  /* The pin is a text bookmark, not a search engine: the drawer holds a link to
     every page, and on a wide screen it is visible rather than off-canvas. */
  html[data-enw-sidebar='pinned'] .enw-drawer__backdrop,
  html[data-enw-sidebar='pinned'] .enw-drawer__close {
    display: none;
  }
}

/* ===========================================================================
   4. Top bar
   =========================================================================== */

.enw-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--enw-z-topbar);
  padding-block-start: var(--enw-safe-top);
  background: color-mix(in srgb, var(--enw-surface, #fff) 88%, transparent);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Without backdrop-filter (older Android WebView), a translucent bar over
   content is unreadable — so those get an opaque one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .enw-topbar {
    background: var(--enw-surface, #fff);
  }
}

.enw-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-3);
  height: var(--enw-topbar-h);
  /* Without this the bar cannot shrink below its content, so on a 390px phone
     the actions were simply drawn past the right edge and clipped — the last
     control was unreachable, and nothing scrolled to it. */
  min-inline-size: 0;
}

.enw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin-inline-end: var(--enw-sp-2);
  font-family: var(--enw-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.enw-brand__mark {
  /*
   * The tile is a primary fill with the palette's own label for it, and it is
   * deliberately flat.
   *
   * It was a gradient from --enw-primary to --enw-header carrying
   * --enw-on-header, which cannot be right in every scheme: in a dark one the
   * primary is a bright blue (#6997F2) and the panel ink is near-white, so the
   * letter measured 1.57:1 to 3.22:1 across the eight palettes — unreadable,
   * and exactly the "black title on a dark page" nobody can see. No single ink
   * reads on two stops that far apart in lightness, so the tile keeps one fill.
   *
   * --enw-on-primary is chosen by the palette for --enw-primary
   * (AppColors.readableOn), and tools/enw_contrast.php measures that pairing in
   * every palette and both schemes, so this cannot rot. A gradient would: the
   * pairing only has to clear 4.5:1 as it stands, and mixing 10% of the ink into
   * the fill already drops Default's to 3.9:1.
   */
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--enw-on-primary, #fff) 26%, transparent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* The `.net` half of the wordmark keeps the accent colour the old nav used. */
.enw-brand__tld {
  /*
   * The ".net" in the wordmark, deliberately a different colour from the name.
   * It reads --enw-accent-ink rather than --enw-accent because this is *text on
   * a surface*, not a fill: the accent itself is around 2.9:1 on the page
   * background, while its ink is the token the palette derives to clear body
   * text on exactly that surface (tools/enw_palettes.js, `clearing`).
   */
  color: var(--enw-accent-ink, #117a6f);
}

.enw-brand__sub {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-2xs);
  font-weight: 500;
  letter-spacing: 0;
}

/* The bar carries the brand, the search and the actions — and no menu.

   A row of seven section links used to sit here, revealed in stages as the
   viewport widened (700px for the first four, 1120px for the rest). It was the
   drawer's own list drawn a second time, and the two overlapped the search box
   on a laptop: by 1120px the bar wanted about 1300px of content for a 1120px
   screen. The links are still on every page — the drawer prints them, and it
   can be pinned beside the page — so the bar is now what a bar is for. */

/* The search gets a real share of the bar. It is the one control a visitor
   reaches for before anything else, and `flex: 0 1 …` keeps it from squeezing
   the actions on a narrow tablet. */
.enw-topbar .enw-search {
  display: none;
}

@media (min-width: 640px) {
  .enw-topbar .enw-search {
    display: flex;
    flex: 0 1 560px;
    /* It may shrink, but not into nothing: below about 9rem a search field is
       a decoration, and the actions beside it are what a reader needs. */
    min-inline-size: 9rem;
  }
}

/* The wordmark gives way before the controls do.

   Below 560px the mark alone is the brand — the "E" tile is the same on the
   phone, in the app and in the store listing, and the link keeps its aria-label
   — and the bar fits every control it has. This used to trigger at 419px, when
   the bar held one control fewer; a preview at 439px with the account control
   added showed the chip clipped off the right edge, because 439px is wide enough
   to keep the wordmark and too narrow to keep it *and* the controls. */
@media (max-width: 559px) {
  .enw-topbar .enw-brand__name {
    display: none;
  }
}

/* The sidebar toggle, where the sidebar actually does something. The pinned
   layout starts at 1200px (see the drawer section), so a toggle below that is
   a button that changes nothing — which is exactly what it used to be, in the
   drawer's own header, below 700px.

   Scoped to the bar, and spelled `.enw-topbar .enw-only-sidebar`, because a
   bare class loses to `.enw-iconbtn`'s own `display: grid` further down this
   file at equal specificity — which is how the toggle came to be drawn on a
   phone, where it does nothing, and pushed the heart 52px off the screen. */
.enw-topbar .enw-only-sidebar {
  display: none;
}

@media (min-width: 1200px) {
  .enw-topbar .enw-only-sidebar {
    display: inline-flex;
  }
}

/* Scoped to the bar on purpose: `.enw-btn` and `.enw-select` are declared
   later in this file, and at equal specificity the later rule wins — so a bare
   `.enw-topbar__addbook { display:none }` would be overruled by `.enw-btn`. */
.enw-topbar .enw-topbar__country,
.enw-topbar .enw-topbar__addbook {
  display: none;
}

@media (min-width: 900px) {
  .enw-topbar .enw-topbar__country {
    display: block;
  }
}

@media (min-width: 1120px) {
  .enw-topbar .enw-topbar__addbook {
    display: inline-flex;
  }
}

.enw-topbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.enw-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2);
  flex: none;
}

/* Everything in the actions keeps its size at every width — pin, theme, country, the
   heart, Add a book, and the Sign out button itself. Only the account chip is elastic. */
.enw-topbar__actions > :not(.enw-topbar__account) {
  flex: 0 0 auto;
}

/* The account control: who you are and how to leave, in the bar on every page.

   It is a chip rather than a plain link because it carries the reader's own
   name, and a name is what makes "signed in" different from "signed out" at a
   glance — the failure this replaced was a bar that looked identical either way
   and a drawer row that said "Sign in" to a signed-in reader.

   The name is the only elastic part. It is truncated rather than wrapped so a
   long display name cannot make the sticky bar taller on a phone, and below
   640px it is dropped entirely and the icon carries the link — the same rule the
   wordmark follows, and `title` still names the reader on hover. */
.enw-topbar__account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill);
  background: var(--enw-surface-2, #f4f6fa);
  color: var(--enw-text, #111a24);
  font-size: var(--enw-fs-xs);
  font-weight: 600;
  max-inline-size: 11rem;
}

.enw-topbar__account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a phone the name is truncated hard rather than dropped.

   It was `display: none` below 640px, and a preview at 439px showed what that
   actually looks like: a person icon and a stray "3", with nothing on screen
   saying whose account it is — the one question the control exists to answer.
   A 4.5rem cap keeps the first name visible ("Vinay", "Priya") beside the icon,
   and the aria-label on the link carries the full name for anyone the truncation
   or a screen reader hides it from. The chip cannot grow the sticky bar: the name
   is the only elastic part and it cannot wrap. */
@media (max-width: 639px) {
  .enw-topbar__account {
    max-inline-size: 7rem;

    /* Below 640px the bar has no search field to take up the slack — it is hidden, and
       the account chip is the only elastic thing left in the row. So the chip is allowed
       to give, here and only here: it may shrink *past* its own name, because a truncated
       name still answers the question the control exists for while a Sign out button past
       the right edge answers nothing. Measured on a 344px screen (a folded Fold5, the
       narrowest this site is read on): the row's content ended at 346px, two past the
       viewport, and Sign out was clipped.

       Scoped to this breakpoint on purpose, and learned the hard way: above it the search
       field is the elastic element, and a shrinkable group there is squeezed below its
       own content — the rigid children, Sign out among them, then spill out of the group
       and off the screen, which is the same bug wearing a different hat. */
    min-inline-size: 0;
  }

  .enw-topbar__account-name {
    max-inline-size: 4rem;
  }

  .enw-topbar__actions {
    flex: 0 1 auto;
  }

  /* Everything else in the group keeps its size at every width: pin, theme, country, the
     heart, Add a book, and the Sign out button. Only the chip above is elastic. */
  .enw-topbar__actions > :not(.enw-topbar__account) {
    flex: 0 0 auto;
  }
}

/* The narrowest phones: 390px has to hold the menu, the brand mark, the heart,
   the account chip and Sign out, and it does not hold them and the theme toggle.
   The toggle goes — it is in the drawer's footer with all nine palettes and
   Light/Dark/Match system, one tap behind the menu button — and the bar's own gap
   tightens one step. Measured, not guessed: at 480px the row's minimum content is
   about 385px with the toggle in it and about 370px without, against a 390px
   screen. */
@media (max-width: 480px) {
  .enw-topbar .enw-topbar__theme {
    display: none;
  }

  .enw-topbar__inner {
    gap: var(--enw-sp-2);
  }
}

/* And the narrowest of those, which is a folded phone at 344px.

   The row needs about 14px more than 344 gives it, and after the change above the account
   chip is what pays — measured there, the name truncated to 47px of the 58px that
   "vgarg2005" needs. Four gaps at 4px instead of 8px finds 20px, so the name stays whole
   and the chip keeps its size: the two rules together mean the name is never truncated
   for a width a phone can actually be, and the chip's own shrink (above) is the backstop
   that keeps Sign out on screen if one ever does. */
@media (max-width: 400px) {
  .enw-topbar__inner,
  .enw-topbar__actions {
    gap: var(--enw-sp-1);
  }
}

/* The Sign out form is a wrapper, not a layout: the button inside is an
   ordinary .enw-btn, so it matches every other button on the site. */
.enw-topbar__signout {
  display: inline-flex;
  margin: 0;
}

/* A drawer row that is a button — Sign out. A <button> brings a font, a border
   and a background of its own, so all three are reset here; everything else
   comes from .enw-drawer__link, which both shapes share. */
button.enw-drawer__link {
  inline-size: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* ===========================================================================
   4b. The inline list filter — categories, authors, publishers
   ===========================================================================

   Those three pages are letter-indexed lists of names, and a reader usually
   arrives already knowing the name they want. The box filters the rows already
   in the document, so it is instant and needs no request; the server applies
   the same rule to ?q=, so it still works with scripting off.

   Every colour here is a token — the palette decides what it looks like, which
   is the only way one component can serve nine schemes.
   --------------------------------------------------------------------------- */

.enw-filter {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2);
  max-width: 34rem;
  margin-block-end: var(--enw-sp-3);
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  background: var(--enw-surface);
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-radius, 12px);
}

.enw-filter:focus-within {
  border-color: var(--enw-ink);
}

.enw-filter__icon {
  color: var(--enw-text-muted);
  font-size: 0.95rem;
  line-height: 1;
}

.enw-filter__input {
  flex: 1 1 auto;
  /* Without this the field refuses to shrink and pushes the button off a
     phone's screen — the same trap the phone search had. */
  min-inline-size: 0;
  border: 0;
  background: transparent;
  color: var(--enw-text);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.4rem 0;
}

.enw-filter__input:focus {
  outline: none;
}

.enw-filter__input::placeholder {
  color: var(--enw-text-muted);
}

.enw-filter__go {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: calc(var(--enw-radius, 12px) - 5px);
  background: var(--enw-primary);
  color: var(--enw-on-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.enw-filter__count {
  margin-block-end: var(--enw-sp-3);
  font-size: 0.8rem;
  color: var(--enw-text-muted);
  min-block-size: 1.2em; /* the line exists before the count does, so nothing jumps */
}

.enw-filter__none {
  padding: var(--enw-sp-6) var(--enw-sp-4);
  text-align: center;
  color: var(--enw-text-muted);
}

/* One class, two-class specificity: `[hidden]` cannot beat `.cat-card`, whose
   display is set to flex, so the attribute would silently do nothing. */
.is-filtered-out {
  display: none;
}

/* And the same rule again at two classes for the book grids. `.book-card` is also
   `display:flex` and is declared later in this sheet, so a single-class rule loses
   the cascade and the filter would silently do nothing on kindle.php's grid —
   exactly the trap the note above describes, in a second place. */
.book-card.is-filtered-out {
  display: none;
}

/* ===========================================================================
   5. Search
   =========================================================================== */

.enw-search {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 0 1 460px;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill);
  background: var(--enw-bg, #f4f6fa);
  transition: border-color var(--enw-t-fast), box-shadow var(--enw-t-fast);
}

.enw-search:focus-within {
  border-color: var(--enw-ink, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enw-primary, #2f6fed) 18%, transparent);
}

.enw-search__icon {
  flex: none;
  padding-inline-start: 0.7rem;
  color: var(--enw-text-muted, #6b7787);
  font-size: 0.9rem;
  line-height: 1;
}

.enw-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 0;
  background: transparent;
  font-size: var(--enw-fs-base);
}

.enw-search input:focus {
  outline: none;
}

.enw-search button {
  flex: none;
  margin: 3px;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--enw-r-pill);
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--enw-t-fast);
}

.enw-search button:hover {
  background: var(--enw-header, #1f52c4);
}

/* ── The band: a full-width search on a page about one thing ───────────────

   A book page answers one question and then leaves the visitor with nothing to
   ask next: the bar's own box is 560px on a laptop and does not exist at all
   below 640px, which is every phone. Amazon and Flipkart settle it the same way
   — one search row that owns the width of the page, with the scope beside the
   field — and this is that row. On a phone the button drops onto its own line
   under the field, because a 44px tap target is not negotiable; on anything
   wider the three sit on one line, the field taking whatever is left.

   Layout only: the field, the select and the button are the design system's
   own .enw-input / .enw-select / .enw-btn, so this cannot drift from them. */
.enw-searchband {
  background: var(--enw-surface, #fff);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}

.enw-searchband__inner {
  padding-block: var(--enw-sp-3);
}

.enw-searchband form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--enw-sp-2);
  align-items: center;
}

.enw-searchband .enw-searchband__scope {
  grid-column: 1 / -1;
}

@media (min-width: 560px) {
  .enw-searchband form {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .enw-searchband .enw-searchband__scope {
    grid-column: auto;
    inline-size: auto;
    min-inline-size: 9.5rem;
  }
}

.enw-searchband__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enw-sp-1) var(--enw-sp-3);
  margin-block-start: var(--enw-sp-2);
  font-size: var(--enw-fs-sm);
}

.enw-searchband__links a {
  color: var(--enw-text-muted, #6b7787);
  font-weight: 600;
}

.enw-searchband__links a:hover,
.enw-searchband__links a[aria-current='page'] {
  color: var(--enw-ink, #2f6fed);
}

/*
 * On a phone the band is one row: the field and the button, nothing else.
 *
 * Measured on the live book page at 390×844, before this: the band was 155px
 * tall in three rows — the scope select on its own line (45px), the field and
 * button (48px), then the link row (21px) — and the cover did not begin until
 * y=322. That is a fifth of a phone screen spent on the shell before the reader
 * has seen the book they asked for.
 *
 * Two things leave at this width:
 *
 *   · the scope select. It says Books / Authors / Publishers / Categories, and
 *     on a phone it costs a whole row to do it (it is width:100% below 560px).
 *     Nothing is lost by hiding it: with nothing chosen it submits its default,
 *     `tab=books`, which is what the field's own placeholder promises ("Title,
 *     author, ISBN-13 or ASIN…"), and the other three scopes are one tap away in
 *     the drawer, where they already are.
 *   · the link row. Categories / Authors / Publishers / Best deals / Free PDFs is
 *     a second copy of the drawer's own links, on a page whose subject is one
 *     book.
 *
 * The grid template is restored with them, and that is not a detail: the select
 * is what makes it three columns above 560px, and leaving the template alone
 * would put the field in the `auto` column and the button in the `1fr` one — a
 * narrow field with a stretched button. The two rules belong together, and
 * tools/enw_website_test.php asks for both.
 *
 * Above 899px nothing changes: there the band has room for all of it, and a
 * desktop reader has no drawer to fall back on.
 */
@media (max-width: 899px) {
  .enw-searchband form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .enw-searchband .enw-searchband__scope,
  .enw-searchband__links {
    display: none;
  }
}

/* ===========================================================================
   6. Buttons, chips, fields
   =========================================================================== */

.enw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--enw-r-pill);
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font-size: var(--enw-fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--enw-t-fast), box-shadow var(--enw-t-fast), background var(--enw-t-fast);
}

.enw-btn:hover {
  background: var(--enw-header, #1f52c4);
  box-shadow:none;
}

.enw-btn:active {
  transform: translateY(1px);
}

.enw-btn[disabled],
.enw-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.enw-btn--ghost {
  background: transparent;
  border-color: var(--enw-border, #e3e8ef);
  color: var(--enw-text, #1e2a3a);
}

.enw-btn--ghost:hover {
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: var(--enw-ink, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}

.enw-btn--tint {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
}

.enw-btn--tint:hover {
  background: color-mix(in srgb, var(--enw-primary, #2f6fed) 22%, var(--enw-primary-tint, #eaf1ff));
}

.enw-btn--buy {
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent);
}

.enw-btn--buy:hover {
  background: color-mix(in srgb, var(--enw-accent, #16a394) 82%, #000);
}

.enw-btn--danger {
  background: var(--enw-danger, #e0463e);
  color: var(--enw-on-danger, #10131a);
}

.enw-btn--sm {
  padding: 0.4rem 0.8rem;
  font-size: var(--enw-fs-sm);
}

.enw-btn--lg {
  padding: 0.85rem 1.6rem;
  font-size: var(--enw-fs-md);
}

.enw-btn--block {
  display: flex;
  inline-size: 100%;
}

.enw-iconbtn {
  display: inline-grid;
  place-items: center;
  /* 44px is the smallest comfortable touch target; this was 38 and sat in the
     header, the row most often tapped with a thumb. */
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface, #fff);
  color: var(--enw-text, #1e2a3a);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--enw-t-fast), border-color var(--enw-t-fast), color var(--enw-t-fast);
}

.enw-iconbtn:hover {
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: var(--enw-ink, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}

.enw-iconbtn--bare {
  border-color: transparent;
  background: transparent;
}

.enw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill);
  background: var(--enw-surface, #fff);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

a.enw-chip:hover,
.enw-chip--action:hover {
  border-color: var(--enw-ink, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}

.enw-chip[aria-pressed='true'],
.enw-chip.is-on {
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: var(--enw-ink, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}

.enw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--enw-r-xs);
  background: var(--enw-accent-tint, #e4f7f4);
  color: var(--enw-accent-ink, #117a6f);
  font-size: var(--enw-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.enw-badge--new {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
}

.enw-badge--warn {
  background: var(--enw-danger-tint, #fcebea);
  color: var(--enw-danger-ink, #e0463e);
}

.enw-badge--muted {
  background: color-mix(in srgb, var(--enw-border, #e3e8ef) 55%, transparent);
  color: var(--enw-text-muted, #6b7787);
}

.enw-field {
  display: block;
  margin-block-end: var(--enw-sp-4);
}

.enw-field__label {
  display: block;
  margin-block-end: var(--enw-sp-2);
  font-size: var(--enw-fs-sm);
  font-weight: 600;
}

.enw-field__hint {
  margin-block-start: var(--enw-sp-1);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
}

.enw-input,
.enw-select,
.enw-textarea {
  inline-size: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface, #fff);
  font-size: var(--enw-fs-md);
  /* 16px on mobile keeps iOS Safari from zooming the page when a field is
     focused, which is a layout shift nobody asked for. */
  transition: border-color var(--enw-t-fast), box-shadow var(--enw-t-fast);
}

@media (max-width: 480px) {
  .enw-input,
  .enw-select,
  .enw-textarea {
    font-size: 16px;
  }
}

.enw-input:focus,
.enw-select:focus,
.enw-textarea:focus {
  outline: none;
  border-color: var(--enw-ink, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enw-primary, #2f6fed) 16%, transparent);
}

.enw-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.enw-switch input {
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--enw-ink, #2f6fed);
}

/* ===========================================================================
   7. Cards and books
   =========================================================================== */

.enw-card {
  padding: var(--enw-sp-5);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md);
  background: var(--enw-surface, #fff);
  box-shadow:none;
}

.enw-card--pad-lg {
  padding: var(--enw-sp-6);
}

.enw-card--flat {
  box-shadow: none;
}

.enw-card--sponsored {
  border-color: color-mix(in srgb, var(--enw-accent, #16a394) 40%, var(--enw-border, #e3e8ef));
  background: linear-gradient(180deg, var(--enw-accent-tint, #e4f7f4), var(--enw-surface, #fff) 62%);
}

/* ── The feature tiles (includes/enw_feature_sections.php) ────────────────────

   One card per thing the site does: the home page lists all of them, an inner
   page lists the four that fit what the reader is doing. Before this, those
   destinations existed only as small print in the footer.

   A tile is an <a>, so it carries the whole card as one target: an icon square,
   a title and one line of why. `auto-fill` rather than a column count, so the
   same markup is four across a desktop and one across a phone without a media
   query, and the last row is never a lonely three-quarters-empty grid. */
.enw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--enw-sp-4);
}

.enw-tile {
  display: flex;
  gap: var(--enw-sp-3);
  align-items: flex-start;
  padding: var(--enw-sp-4);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md);
  background: var(--enw-surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s var(--enw-ease, ease), background-color 0.15s var(--enw-ease, ease);
}

.enw-tile:hover,
.enw-tile:focus-visible {
  border-color: var(--enw-accent, #16a394);
  background: var(--enw-accent-tint, #e4f7f4);
}

.enw-tile__ico {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border-radius: var(--enw-r-sm);
  background: var(--enw-accent-tint, #e4f7f4);
  color: var(--enw-accent-ink, #0f766e);
}

.enw-tile__body {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.enw-tile__title {
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.enw-tile__text {
  color: var(--enw-muted, #5b6577);
  font-size: var(--enw-fs-sm);
  line-height: var(--enw-lh-body, 1.5);
}

/* ── The how-to (clubs.php, includes/enw_share.php's neighbours) ─────────────

   Four numbered steps. They live in an <ol> because the order is the point — join,
   then add a book, then start one. The badge is a span drawn by the page from the
   loop index (clubs.php), not `counter()` in a ::before: a generated number is
   announced twice by some screen readers and not at all by others, and it cannot
   be seen in the document to check that four steps are numbered 1 to 4.

   `auto-fit` with a 13rem floor: four across a desktop, two across a tablet, and
   one across a phone with no media query — the same trick the tiles use, for the
   same reason. */
.enw-howto {
  margin-block-end: var(--enw-sp-6);
}

.enw-howto__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--enw-sp-3);
  margin: var(--enw-sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.enw-howto__step {
  padding: var(--enw-sp-4);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  background: var(--enw-surface, #fff);
}

.enw-howto__num {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  margin-block-end: var(--enw-sp-2);
  border-radius: 999px;
  background: var(--enw-accent-tint, #e4f7f4);
  color: var(--enw-accent-ink, #0f766e);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
}

.enw-howto__step h3 {
  margin: 0;
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-sm, 0.875rem);
}

.enw-howto__step p {
  margin: var(--enw-sp-1, 2px) 0 0;
  color: var(--enw-muted, #5b6577);
  font-size: var(--enw-fs-sm, 0.875rem);
  line-height: 1.5;
}

/* ── A club's recent activity ─────────────────────────────────────────────────

   One line per event on the list card, a short list on the club page. It is a
   sentence with a date on the end, not a timeline: no avatars, no connector line,
   no "show more" — a reading club's news arrives a book at a time, and anything
   heavier would be furniture around three words.

   `__line` and `__item` share their type size because they are the same sentence
   in two places; the list card is the one that has to stay quiet enough not to
   compete with the club's own name above it. */

.enw-activity {
  margin: var(--enw-sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--enw-sp-2, 0.5rem);
}

.enw-activity__item,
.enw-activity__line {
  margin: 0;
  color: var(--enw-muted, #5b6577);
  font-size: var(--enw-fs-sm, 0.875rem);
  line-height: 1.5;
}

.enw-activity__item {
  padding-block-start: var(--enw-sp-2, 0.5rem);
  border-block-start: 1px solid var(--enw-border, #e3e8ef);
}

.enw-activity__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.enw-activity__who {
  color: var(--enw-text, #111827);
  font-weight: 600;
}

.enw-activity__when {
  white-space: nowrap;
  font-size: var(--enw-fs-xs, 0.75rem);
}

.enw-activity__line {
  margin-block: var(--enw-sp-2, 0.5rem) 0;
}

/* ── The share bar (includes/enw_share.php) ───────────────────────────────────

   The blog has carried these rules in enw-blog.css since it had a share line;
   a club needed them without that sheet, so the base lives here and the blog's
   copy stays as it was. Same pill, same border, same hover behaviour, so the
   two read as one control rather than as two designs.

   `--brand` is what makes a WhatsApp chip green on hover and a LinkedIn chip
   blue: the shape is shared, the colour is per network, and none of it is a
   background fill — a row of four saturated buttons is louder than the club it
   is next to. */
.enw-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
}

.enw-share__label {
  color: var(--enw-muted, #5b6577);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
}

.enw-share__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding-inline: var(--enw-sp-3, 0.75rem);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  background: var(--enw-surface, #fff);
  color: var(--enw-muted, #5b6577);
  font-family: inherit;
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s var(--enw-ease, ease), color 0.15s var(--enw-ease, ease),
              background-color 0.15s var(--enw-ease, ease);
}

.enw-share__link:hover,
.enw-share__link:focus-visible {
  border-color: var(--brand, var(--enw-primary, #2f6fed));
  background: var(--brand-tint, var(--enw-surface, #fff));
  color: var(--brand, var(--enw-primary, #2f6fed));
}

.enw-share__link--wa { --brand: #128c7e; --brand-tint: #e7f8f1; }
.enw-share__link--li { --brand: #0a66c2; --brand-tint: #e8f0fb; }
.enw-share__link--x  { --brand: #111418; --brand-tint: #f1f2f4; }
.enw-share__link--fb { --brand: #1877f2; --brand-tint: #e9f1fe; }

/* The book page's breadcrumb.

   It has no rule of its own in style.css, which is exactly why it was wrong: it
   is styled there only by the generic `nav` bar (`position:sticky; top:0;
   z-index:100; background:surface; border-bottom:3px solid accent`) plus the
   `nav:not(.bd-nav):not(.main-nav)` layout rule (`height:62px;
   justify-content:space-between; padding:0 24px`). Sticky at the top of the
   window with the same z-index as the top bar, and later in the document, it
   painted over the menu when the reader scrolled — the breadcrumbs hiding the
   navigation — while sitting in a 62px band with its crumbs flung to the corners.

   The element is a `<div role="navigation">` now (see book_detail.php), so this
   rule is describing what it should have been rather than fighting for it. */
.bd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--enw-sp-2);
  position: static;
  z-index: auto;
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  margin: 0 0 var(--enw-sp-4);
  padding: 0;
  background: none;
  border: 0;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm);
}

.bd-breadcrumb a {
  color: var(--enw-text-muted, #6b7787);
  text-decoration: none;
}

.bd-breadcrumb a:hover {
  color: var(--enw-text, #10131a);
  text-decoration: underline;
}

.bd-breadcrumb .bd-bc-current {
  color: var(--enw-text, #10131a);
  font-weight: 500;
}

/* `.bd-bc-sep` had no rule anywhere either (`.bc-sep` is a different class used
   by other pages), so the separators sat with no space around them.

   ITS COLOUR WAS `--enw-border` AND THAT IS A BORDER TOKEN, not ink. A border is
   deliberately faint — a hairline that separates without shouting — so painting
   text with it made the `›` between crumbs 1.14:1 on a light page and 1.66:1 on
   a dark one: invisible, and reported as such. The separator is TEXT, so it takes
   the text token that means "quieter than body copy": `--enw-text-muted`, the
   same one `.bd-bc-current` beside it uses. */
.bd-breadcrumb .bd-bc-sep {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
}

/* The country jump bar on recently_added.php — the one `<nav>` left in a shipped
   page, and it *is* meant to stick. The generic rule it would otherwise inherit
   pins it to `top: 0` at z-index 100, which is the top bar's own z-index, so it
   covered the menu in exactly the same way the breadcrumb did. Docked below the
   bar instead, at the rail's z-index, where it can never be on top of it. */
.country-anchor-nav {
  position: sticky;
  inset-block-start: var(--enw-topbar-h, 60px);
  z-index: var(--enw-z-rail, 5);
}

/* A card's own heading. Not an `.enw-section__title`: that one is the page's
   voice (a big display face, clamping), and a title inside a card is the card's.
   Keeping them apart is what stops a card from looking like a new page. */
.enw-card__title {
  margin: 0 0 var(--enw-sp-2);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Breadcrumbs. The site's catalogue pages carry their own (book_detail's
   `.bd-breadcrumb`, drawn differently on purpose — it sits over a cover); the
   account and information pages use this one, so every page in the new shell
   has a trail in the same shape and the same measured contrast.

   It is a `<div role="navigation">`, not a `<nav>`, and that is deliberate:
   style.css styles every bare `<nav>` as a sticky full-width bar with a
   `justify-content: space-between` and a 62px height (its `nav:not(.bd-nav):
   not(.main-nav)` rule, inside a cascade layer). Those declarations arrive
   without a class of mine setting them, so a `<nav>` here renders as three
   crumbs flung to the corners of a 62px white band — which is exactly what it
   did the first time. A role attribute gives a screen reader the same landmark
   and gives style.css nothing to match. */
.enw-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  gap: var(--enw-sp-2);
  margin-block-end: var(--enw-sp-4);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm);
}

.enw-crumbs a {
  color: inherit;
  text-decoration: none;
}

.enw-crumbs a:hover {
  color: var(--enw-text, #10131a);
  text-decoration: underline;
}

/* A list of links (or of label + explanation pairs) inside a card. `.enw-list`
   hangs each item off a marker the palette can see, and every second line is
   `.enw-row__text`'s job, not this class's. */
.enw-list {
  display: grid;
  gap: var(--enw-sp-4);
  margin: var(--enw-sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.enw-list > li {
  display: grid;
  gap: 2px;
  padding-inline-start: var(--enw-sp-4);
  position: relative;
}

.enw-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--enw-primary, #2f6fed);
}

.enw-list a {
  color: var(--enw-text, #10131a);
  text-decoration: none;
}

.enw-list a:hover {
  color: var(--enw-ink, #1f52c4);
  text-decoration: underline;
}

/* A vertical rhythm for an `<aside>` of cards, so the gaps between them are one
   number the page does not have to repeat as an inline style. */
.enw-stack-4 {
  display: grid;
  gap: var(--enw-sp-5);
  align-content: start;
}

/* Book grid: auto-fill means one rule serves a 320px phone (2 columns) and a
   27-inch monitor (7), and nothing in between needs a breakpoint. */
.enw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

@media (min-width: 900px) {
  .enw-grid {
    grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
  }
}

.enw-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
}

/* Two unequal columns — something to do, and something to read beside it.
   `.enw-grid` cannot do this: it distributes as many equal columns as fit, so
   two children on a 1200px screen leave two empty ones. Below 900px the two
   stack, which is also where a form and its help text stop fitting side by
   side anyway. */
.enw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--enw-sp-6);
  align-items: start;
}

@media (min-width: 900px) {
  .enw-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.enw-book {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.enw-book__cover {
  position: relative;
  display: block;
  overflow: hidden;
  /* The single most effective anti-shift rule on a book site: the box exists
     at its final size before the image arrives, so the grid never reflows. */
  aspect-ratio: 2 / 3;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm);
  background: var(--enw-bg, #f4f6fa);
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--enw-surface, #fff) 60%, transparent) 40%,
    transparent 60%
  );
  background-size: 220% 100%;
  animation: enw-shimmer 1.6s linear infinite;
}

.enw-book__cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  /* Fades in when it decodes, so a slow cover does not appear as a hard box. */
  animation: enw-fade var(--enw-t-base) ease both;
}

.enw-book:hover .enw-book__cover img {
  transform: scale(1.03);
}

.enw-book__cover img {
  transition: transform var(--enw-t-slow) var(--enw-ease);
}

.enw-book__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--enw-fs-sm);
  font-weight: 600;
  line-height: var(--enw-lh-snug);
}

.enw-book__meta {
  margin: 0;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enw-book__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: auto;
}

.enw-price {
  font-size: var(--enw-fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.enw-price--none {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
  font-weight: 600;
}

.enw-asin {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-2xs);
  letter-spacing: 0.01em;
}

/* Horizontal rail — the app's "shelf you can flick", on the web. */
.enw-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.125rem, 1fr);
  gap: var(--enw-sp-4);
  padding-block-end: var(--enw-sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.enw-rail > * {
  scroll-snap-align: start;
}

@media (min-width: 700px) {
  .enw-rail {
    grid-auto-columns: minmax(10.5rem, 1fr);
  }
}

/* ===========================================================================
   8. The drawer (sidebar) — one menu, every page
   =========================================================================== */

.enw-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--enw-z-drawer);
  display: flex;
  flex-direction: column;
  inline-size: min(88vw, var(--enw-drawer-w));
  padding-block: calc(var(--enw-sp-4) + var(--enw-safe-top)) var(--enw-sp-4);
  padding-inline: var(--enw-sp-3) var(--enw-sp-3);
  padding-inline-start: calc(var(--enw-sp-3) + var(--enw-safe-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--enw-surface, #fff);
  border-inline-end: 1px solid var(--enw-border, #e3e8ef);
  box-shadow:none;
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--enw-t-slow) var(--enw-ease), visibility var(--enw-t-slow);
}

[dir='rtl'] .enw-drawer {
  transform: translateX(102%);
}

.enw-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.enw-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--enw-z-backdrop);
  background: rgb(10 14 20 / 45%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--enw-t-base), visibility var(--enw-t-base);
}

.enw-drawer__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* The drawer once had a hint of its own here, saying "Swipe from the left edge
   to open the menu". It is gone on purpose: the hint a reader now sees is the
   one a page declares in its own markup (`[data-enw-swipe-hint]`, see enw.js
   §1b), and the only page that declares one is the book page, whose bar is what
   the swipe does. The styles are that page's own — `.bd-swipe-hint` in
   style.css — because the element is a child of its bar and inherits its place
   on the screen from it. */

.enw-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2);
  padding-block-end: var(--enw-sp-3);
  margin-block-end: var(--enw-sp-2);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}

.enw-drawer__group {
  margin-block-start: var(--enw-sp-4);
}

.enw-drawer__group:first-of-type {
  margin-block-start: 0;
}

.enw-drawer__title {
  margin: 0 0 var(--enw-sp-2);
  padding-inline-start: 0.65rem;
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enw-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.enw-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--enw-r-sm);
  color: var(--enw-text, #1e2a3a);
  font-size: var(--enw-fs-base);
  font-weight: 600;
  transition: background var(--enw-t-fast), color var(--enw-t-fast);
}

.enw-drawer__link:hover {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
}

.enw-drawer__link[aria-current='page'] {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
}

.enw-drawer__link--pdf {
  color: var(--enw-danger-ink, #e0463e);
}

.enw-drawer__link--pdf .enw-drawer__ico {
  background: var(--enw-danger-tint, #fcebea);
  color: var(--enw-danger-ink, #e0463e);
}

.enw-drawer__ico {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--enw-bg, #f4f6fa);
  font-size: 0.95rem;
  line-height: 1;
}

.enw-drawer__link[aria-current='page'] .enw-drawer__ico {
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
}

.enw-drawer__count {
  margin-inline-start: auto;
  padding: 0 0.45rem;
  border-radius: var(--enw-r-pill);
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent);
  font-size: var(--enw-fs-2xs);
  font-weight: 700;
}

.enw-drawer__foot {
  margin-block-start: auto;
  padding-block-start: var(--enw-sp-4);
  border-block-start: 1px solid var(--enw-border, #e3e8ef);
}

/* ===========================================================================
   9. Theme picker
   =========================================================================== */

.enw-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.enw-swatch {
  position: relative;
  inline-size: 30px;
  block-size: 30px;
  padding: 0;
  border: 2px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill);
  background: var(--enw-swatch, #fff);
  cursor: pointer;
  transition: transform var(--enw-t-fast), border-color var(--enw-t-fast);
}

.enw-swatch:hover {
  transform: scale(1.08);
}

.enw-swatch[aria-pressed='true'] {
  border-color: var(--enw-text, #1e2a3a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enw-text, #1e2a3a) 14%, transparent);
}

.enw-swatch__dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--enw-r-pill);
  background: var(--enw-swatch-accent, transparent);
  transform: translate(-50%, -50%);
}

/* ===========================================================================
   10. Mobile tab bar
   =========================================================================== */

.enw-tabbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--enw-z-tabbar);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  padding-block-end: var(--enw-safe-bottom);
  background: color-mix(in srgb, var(--enw-surface, #fff) 92%, transparent);
  border-block-start: 1px solid var(--enw-border, #e3e8ef);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .enw-tabbar {
    background: var(--enw-surface, #fff);
  }
}

@media (max-width: 899px) {
  body.enw-has-tabbar .enw-tabbar {
    display: grid;
  }

  body.enw-has-tabbar .enw-drawer {
    padding-block-end: calc(var(--enw-sp-4) + var(--enw-tabbar-h) + var(--enw-safe-bottom));
  }
}

.enw-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  block-size: var(--enw-tabbar-h);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-2xs);
  font-weight: 600;
}

.enw-tabbar a[aria-current='page'] {
  color: var(--enw-ink, #2f6fed);
}

.enw-tabbar__ico {
  font-size: 1.15rem;
  line-height: 1;
}

/* ===========================================================================
   11. Sheet, toast, empty, skeleton
   =========================================================================== */

.enw-sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--enw-z-sheet);
  max-block-size: min(88dvh, 88vh);
  max-block-size: 88dvh;
  padding: var(--enw-sp-5) var(--enw-sp-5) calc(var(--enw-sp-6) + var(--enw-safe-bottom));
  overflow-y: auto;
  background: var(--enw-surface, #fff);
  border-start-start-radius: var(--enw-r-xl);
  border-start-end-radius: var(--enw-r-xl);
  box-shadow:none;
  transform: translateY(101%);
  visibility: hidden;
  transition: transform var(--enw-t-slow) var(--enw-ease), visibility var(--enw-t-slow);
}

.enw-sheet.is-open {
  transform: translateY(0);
  visibility: visible;
}

.enw-sheet__grip {
  inline-size: 42px;
  block-size: 4px;
  margin: 0 auto var(--enw-sp-4);
  border-radius: var(--enw-r-pill);
  background: var(--enw-border, #e3e8ef);
}

.enw-toast {
  position: fixed;
  inset-block-end: calc(var(--enw-sp-5) + var(--enw-safe-bottom));
  inset-inline: 0;
  z-index: var(--enw-z-toast);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.enw-toast__body {
  max-inline-size: min(92vw, 420px);
  padding: 0.7rem 1.1rem;
  border-radius: var(--enw-r-pill);
  background: var(--enw-text, #1e2a3a);
  color: var(--enw-bg, #f4f6fa);
  font-size: var(--enw-fs-sm);
  font-weight: 600;
  box-shadow:none;
  animation: enw-rise var(--enw-t-slow) var(--enw-ease) both;
}

.enw-empty {
  padding: var(--enw-sp-10) var(--enw-sp-5);
  border: 1px dashed var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md);
  color: var(--enw-text-muted, #6b7787);
  text-align: center;
}

.enw-empty__ico {
  display: block;
  margin-block-end: var(--enw-sp-3);
  font-size: 2rem;
}

.enw-skeleton {
  border-radius: var(--enw-r-sm);
  background: linear-gradient(
    100deg,
    var(--enw-bg, #f4f6fa) 30%,
    color-mix(in srgb, var(--enw-border, #e3e8ef) 60%, transparent) 50%,
    var(--enw-bg, #f4f6fa) 70%
  );
  background-size: 220% 100%;
  animation: enw-shimmer 1.4s linear infinite;
}

/* An inbox row, a shelf row, a list row — one shape, three uses. */
.enw-row {
  display: flex;
  align-items: flex-start;
  gap: var(--enw-sp-3);
  padding: var(--enw-sp-4);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}

.enw-row:last-child {
  border-block-end: 0;
}

.enw-row--unread {
  background: var(--enw-primary-tint, #eaf1ff);
}

.enw-row__ico {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border-radius: var(--enw-r-sm);
  background: var(--enw-bg, #f4f6fa);
  font-size: 1.05rem;
}

.enw-row__body {
  min-width: 0;
  flex: 1 1 auto;
}

.enw-row__title {
  margin: 0;
  font-size: var(--enw-fs-base);
  font-weight: 700;
}

.enw-row__text {
  margin: 0.15rem 0 0;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm);
}

.enw-row__when {
  flex: none;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-2xs);
  white-space: nowrap;
}

/* ===========================================================================
   12. Footer
   =========================================================================== */

.enw-footer {
  /*
   * A panel, so it reads the panel roles: --enw-header is the palette's deep
   * brand colour in a light scheme and that scheme's own lifted surface in a
   * dark one, and --enw-on-header is the label chosen to read on it. The three
   * --enw-footer-* tokens this used to read were a fixed dark green, so every
   * palette and both themes painted the same footer.
   */
  margin-block-start: var(--enw-sp-16);
  padding-block: var(--enw-sp-12) var(--enw-sp-6);
  background: var(--enw-header, #12211a);
  color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 82%, transparent);
}

.enw-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enw-sp-8);
}

@media (min-width: 760px) {
  .enw-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--enw-sp-10);
  }
}

.enw-footer__title {
  margin: 0 0 var(--enw-sp-3);
  color: var(--enw-on-header, #fff);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
}

.enw-footer__copy {
  margin: 0;
  max-inline-size: 34ch;
  font-size: var(--enw-fs-sm);
  line-height: var(--enw-lh-body);
}

.enw-footer h4,
.enw-footer__head {
  margin: 0 0 var(--enw-sp-3);
  color: var(--enw-on-header, #fff);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enw-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.enw-footer li + li {
  margin-block-start: var(--enw-sp-2);
}

.enw-footer a {
  font-size: var(--enw-fs-sm);
}

.enw-footer a:hover {
  color: var(--enw-on-header, #fff);
  text-decoration: underline;
}

.enw-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--enw-sp-3);
  margin-block-start: var(--enw-sp-10);
  padding-block-start: var(--enw-sp-5);
  border-block-start: 1px solid color-mix(in srgb, var(--enw-on-header, #cfd8d2) 24%, transparent);
  font-size: var(--enw-fs-xs);
}

/* The AMP twin's button, printed by enw_footer() on any page that has one.

   It sits in the footer's own colours (the footer is a dark band on every
   palette), so it is styled from the on-header/on-accent tokens rather than from
   the surface ones — a chip written with --enw-surface would be a white pill with
   white text here.

   `--promoted` is the reader who sent `Save-Data: on`: the browser has already
   decided this connection is expensive, so the offer is the loud one. Nothing is
   hidden either way — see enw_amp_preferred() for why a button that appears only
   when a script decides your connection is slow is useless to the reader who
   needs it. */
.enw-footer__amp {
  margin-block-start: var(--enw-sp-6);
}

.enw-amp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--enw-sp-2);
  max-inline-size: 100%;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--enw-on-header, #cfd8d2) 34%, transparent);
  border-radius: var(--enw-r-pill);
  color: var(--enw-on-header, #fff);
  font-size: var(--enw-fs-xs);
  font-weight: 700;
  text-decoration: none;
}

.enw-amp-chip:hover {
  border-color: var(--enw-on-header, #fff);
  color: var(--enw-on-header, #fff);
  text-decoration: underline;
}

.enw-amp-chip__note {
  color: color-mix(in srgb, var(--enw-on-header, #cfd8d2) 76%, transparent);
  font-weight: 500;
}

/* A marketed chip on a dark band: the accent colour of the palette, with the
   palette's own on-accent ink, which is the pair the theme test checks. */
.enw-amp-chip--promoted {
  background: var(--enw-accent, #d4a017);
  border-color: var(--enw-accent, #d4a017);
  color: var(--enw-on-accent, #1c1410);
}

.enw-amp-chip--promoted .enw-amp-chip__note {
  color: color-mix(in srgb, var(--enw-on-accent, #1c1410) 78%, transparent);
}

/* The same chip in the top bar.

   The bar is where the catalogue pages can offer it — /cat.html, a book page and
   the /ebooks/ hub write their own <footer>, so the footer chip never reached the
   pages a search result lands on. The bar has less room than a footer does, so the
   compact form drops the explanatory sentence and keeps the two words and the
   bolt, and the whole control only appears once the bar is wide enough to hold it
   (900px, the width at which the market select appears too). Below that the menu
   row carries it, which is the same link from the same helper. */
.enw-topbar .enw-topbar__amp {
  display: none;
}

@media (min-width: 900px) {
  .enw-topbar .enw-topbar__amp {
    display: inline-flex;
  }
}

/*
 * The chip's colours above are the FOOTER's: --enw-on-header is white, which is
 * right on the footer's dark band and invisible on this bar, whose background is
 * --enw-surface mixed 88% — a light translucent strip. So the bar restates the
 * pair it sits on, and the promoted state restates its own.
 *
 * The promoted rule has to name both classes: `.enw-amp-chip--promoted` and
 * `.enw-amp-chip--bar` are each one class, so at equal specificity the later rule
 * wins, and the later rule is this one.
 */
.enw-amp-chip--bar {
  padding: 0.3rem 0.6rem;
  background: var(--enw-surface-2, #f1f3f7);
  border-color: var(--enw-border, #e3e8ef);
  color: var(--enw-text, #1e2a3a);
}

/* The hover tints the chip rather than colouring its text blue: --enw-primary is
   a background/paint token here, and the design system's rule is that text is
   written in an ink token so it stays legible on whatever surface it lands on. */
.enw-amp-chip--bar:hover {
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: var(--enw-primary, #2f6fed);
  color: var(--enw-text, #1e2a3a);
}

.enw-amp-chip--bar .enw-amp-chip__note {
  display: none;
}

.enw-amp-chip--bar.enw-amp-chip--promoted {
  background: var(--enw-accent, #16a394);
  border-color: var(--enw-accent, #16a394);
  color: var(--enw-on-accent, #ffffff);
}

/* The menu row. It is a `.enw-drawer__link` first — same padding, same hover, same
   focus ring as every other row in the menu — and only the promoted state is its
   own, because a row that has been singled out should look singled out. */
.enw-amp-row--promoted {
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-primary-dark, #1f52c4);
  font-weight: 700;
}

.enw-amp-row--promoted .enw-drawer__ico {
  color: var(--enw-primary-dark, #1f52c4);
}

/* ===========================================================================
   13. Utilities
   =========================================================================== */

.enw-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.enw-stack > * + * {
  margin-block-start: var(--enw-sp-4);
}

.enw-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--enw-sp-3);
}

.enw-muted {
  color: var(--enw-text-muted, #6b7787);
}

/* The contact form's honeypot: a field a person cannot see and a bot fills.
   Pushed off-screen rather than `display:none` — a bot that reads styles skips
   what is hidden, but not what is merely somewhere else — and taken out of the
   tab order by its own tabindex, so it is not a keyboard trap either. */
.enw-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enw-nowrap {
  white-space: nowrap;
}

.enw-hide-mobile {
  display: none;
}

@media (min-width: 700px) {
  .enw-hide-mobile {
    display: revert;
  }

  .enw-only-mobile {
    display: none !important;
  }
}

@media (max-width: 699px) {
  .enw-hide-desktop {
    display: none !important;
  }
}

/* ===========================================================================
   14. Bridge — the legacy chrome, restyled
   ---------------------------------------------------------------------------
   These rules make a page that still has the old markup look like the new site
   without editing it. They depend on the legacy class names, so each one goes
   away as its page is migrated.
   =========================================================================== */

body {
  background: var(--enw-bg, #f4f6fa);
  color: var(--enw-text, #1e2a3a);
}

/* The old <nav> had its own palette baked in; the tokens replace it. */
nav:not(.enw-topbar),
.main-nav,
.bd-nav {
  background: var(--enw-surface, #fff);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}

.nav-link.active,
.bd-nav-link.active {
  color: var(--enw-ink, #2f6fed);
  background: var(--enw-primary-tint, #eaf1ff);
}

.nav-logo-text,
.bd-logo span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--enw-text, #1e2a3a);
}

.nav-search,
.nav-search-form,
.bd-nav-search {
  background: var(--enw-bg, #f4f6fa);
  border-color: var(--enw-border, #e3e8ef);
}

.nav-search button,
.nav-search-form button,
.bd-nav-search button,
.nav-mobile-search button {
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
}

footer,
.site-footer,
.bd-footer {
  background: var(--enw-header, #12211a);
  color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 82%, transparent);
}

/* The old country switcher. It used to be an inline <style> block in h2.php,
   which meant every page carried a render-blocking style tag for one <select>;
   the rules live here now, and h3.php still prints the markup for any page that
   has not moved to nav.php yet. The new nav uses .enw-select instead. */
.ebn-country-switch {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  order: 5;
}

.ebn-country-switch select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--enw-border, rgba(0, 0, 0, 0.15));
  border-radius: var(--enw-r-sm, 8px);
  background-color: var(--enw-surface, #fff);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12"><path fill="%23666" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  color: var(--enw-text, #1e293b);
  font-size: var(--enw-fs-sm, 13px);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

@media (max-width: 640px) {
  .ebn-country-switch {
    order: 0;
    margin-inline: 8px auto;
  }

  .ebn-country-switch select {
    padding: 5px 22px 5px 8px;
    font-size: var(--enw-fs-xs, 12px);
  }
}

/* NOTE ON <nav>
   -----
   style.css carries `nav:not(.bd-nav):not(.main-nav){display:flex;height:62px;
   padding:0 24px;position:sticky}` — specificity (0,2,1), which a single class
   cannot outrank however it is written. So the new shell's menus are <aside>
   and <div role="navigation">, which that selector cannot match and which a
   screen reader announces as navigation all the same. Add no <nav> here. */

/* Covers on the legacy cards get the same reserved box, so the older pages
   stop shifting even before they are migrated. */
.book-card img,
.book-cover img,
.bc-img img {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--enw-bg, #f4f6fa);
}

/* ---------------------------------------------------------------------------
   A missing cover, drawn rather than shown as a broken image.

   Roughly one result in five on a common query has no artwork, and those cards
   used to render books/noim.jpg — a white rectangle with faint grey lines which
   reads as a failed load. This panel sits behind the <img> and is what remains
   when the image is removed: a 2:3 plate tinted from the ASIN, with the title
   and author set on it. Deterministic, so a book is always the same colour, and
   it costs no request.
   ------------------------------------------------------------------------- */
.book-card-img,
.book-card .book-cover {
  position: relative;
}

.cover-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  padding: .75rem .7rem .8rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 80% at 20% 0%,
      hsl(var(--cp-h, 210) 46% 46% / .55), transparent 70%),
    linear-gradient(155deg,
      hsl(var(--cp-h, 210) 42% 34%),
      hsl(calc(var(--cp-h, 210) + 22) 46% 19%));
}

.cover-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: .55rem;
  inline-size: 1px;
  background: rgb(255 255 255 / .22);
}

.cover-panel__t {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--enw-font-display, inherit);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.cover-panel__a {
  position: relative;
  color: rgb(255 255 255 / .78);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* The <img> sits above the panel. Its onerror handler removes it, and the panel
   underneath is then the whole cover. */
.book-card-img img,
.book-card .book-cover img {
  position: relative;
  z-index: 1;
}

/* No price in this market: say so in the slot instead of leaving it blank. The
   slot still carries the footer's auto margin, so the buttons stay aligned. */
.book-card-price.is-missing {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm, .875rem);
  font-weight: 600;
}

/* Home rails: two lines of title and a reserved author line, so a card whose
   author the feed left out does not end 16px higher than the one beside it. */
.books-shelf .book-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.books-shelf .book-card-author {
  min-block-size: 1.05em;
}

/* ===========================================================================
   15. Motion and print
   =========================================================================== */

@keyframes enw-shimmer {
  from {
    background-position: 180% 0;
  }

  to {
    background-position: -80% 0;
  }
}

@keyframes enw-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes enw-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .enw-book:hover .enw-book__cover img {
    transform: none;
  }
}

/* Windows high-contrast mode: our translucent surfaces are not ours to keep. */
@media (forced-colors: active) {
  .enw-topbar,
  .enw-tabbar,
  .enw-drawer,
  .enw-sheet {
    background: Canvas;
    border-color: CanvasText;
  }

  .enw-btn,
  .enw-chip {
    border: 1px solid CanvasText;
  }
}

@media print {
  .enw-topbar,
  .enw-tabbar,
  .enw-drawer,
  .enw-drawer__backdrop,
  .enw-sheet,
  .enw-toast {
    display: none !important;
  }

  body {
    background:var(--enw-surface, #ffffff);
    color: #000;
  }
}

/* ==========================================================================
   BUTTON MICRO-INTERACTIONS

   Named once, here, because "a button" on this site is a great many different
   things: an <a> with .btn-primary, an <a> with .book-card-btn, a bare
   <button type="submit"> from the PDF search box, the pager's .page-btn, a
   .bd-follow on a book page. A button that moves when it is pressed should be
   every one of them, and each one should move the same way.

   ── WHY `scale` AND NOT `transform` ───────────────────────────────────────

   Almost every one of these controls already declares a transform on :hover —
   `transform: translateY(-1px)` on .btn-primary, `translateY(-6px)` on a
   .book-card. Writing the press feedback as `transform: scale(.965)` would
   compete with those rules for the same property, and the one that wins would
   be decided by source order rather than by intent. CSS's independent `scale`
   and `translate` properties are separate from `transform`, so they compose:
   a pressed button keeps its hover lift AND shrinks. That is the whole reason
   this block is written with them.

   ── AND WHY THE TRANSITION IS ON :active, NOT ON THE CONTROL ────────────

   Putting `transition: scale .1s` on the base selector would replace the
   `transition: all .15s` that .book-card-btn and friends already carry, and
   their hover colour changes would stop animating. So the transition is
   declared only in the :active state: the press itself is smooth, and the
   release is animated by the transition those rules already have.

   The properties in that :active transition are NOT just `scale`. The design
   system already animates these same controls while pressed — `.book-card-btn
   :active` shifts its background, `.btn-primary:active` flattens its hover
   lift with `transform: none` — and a `transition` shorthand in a winning rule
   REPLACES the whole list, so declaring only `scale` here would have made every
   one of those press effects snap instantly instead of easing. Listing them
   keeps the existing feedback exactly as it was and adds the press on top.

   ── AND WHY THE POINTER-FOLLOW IS A VARIABLE ─────────────────────────────

   .enw-magnetic reads --enw-mag-x/y/s and translates by them. Nothing here
   computes anything: assets/js/enw-anim.js writes those three numbers as the
   pointer moves and the transition below does the easing, so the effect needs
   no animation loop and costs one style recalculation per pointermove. The
   class is added by that script and never appears in a template, which is what
   makes the effect site-wide rather than opt-in — and `data-enw-no-magnetic`
   on any control is the way to opt a specific one back out.

   Both halves are inside `prefers-reduced-motion: no-preference`, because a
   reader who has asked their system for less motion has asked for exactly this
   to not happen. The controls still work; they just stop moving.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :is(
    a.btn-primary,
    a.btn-secondary,
    .btn-primary,
    .btn-secondary,
    .enw-btn,
    .book-card-btn,
    .page-btn,
    .bd-follow,
    .cat-pill,
    .pdf-search-form button,
    .contact-form button,
    .nav-mobile-search button,
    button[type="submit"]
  ):active {
    scale: var(--enw-press-scale, .965);
    transition: scale .1s ease,
                transform .15s ease,
                background-color .15s ease,
                border-color .15s ease,
                color .15s ease;
  }

  /*
   * Pointer-follow. Only the movement lives here: the press feedback above
   * already covers the squeeze, and having two rules set `scale` on the same
   * element would make which one wins a question about specificity rather than
   * intent.
   *
   * `html` is in the selector for one reason, and it is not decoration. This
   * block lives in enw.css, but h2.php loads enw-legacy.css AFTER it — the
   * bridge layer is last on purpose, so that it can repoint the old theme
   * variables — and that file redeclares `.btn-primary`, `.btn-secondary` and
   * `.book-card-btn` with their own `transition`. At equal specificity the later
   * sheet wins, so `.enw-magnetic` alone would lose and the movement would be
   * instant and unsmoothed on exactly the controls this feature exists for.
   * One element in the selector outranks it without depending on load order.
   */
  html .enw-magnetic {
    translate: var(--enw-mag-x, 0px) var(--enw-mag-y, 0px);
    transition: translate .3s cubic-bezier(.22, 1, .36, 1),
                scale .12s ease,
                transform .15s ease,
                background-color .15s ease,
                border-color .15s ease,
                color .15s ease;
    /* The element is being moved on every pointermove; promoting it keeps the
       compositor from repainting its surroundings each time. */
    will-change: translate;
  }
}

/* ===========================================================================
   THE BAR'S MAIN LINKS (added last on purpose — see the note)
   ===========================================================================

   Until now the top bar held no link to anywhere: on a 1440px desktop the whole
   site was behind the menu button. The arithmetic is in nav.php beside the
   markup — 104px spare against the ~250 the links need — so the links are shown
   only once the row genuinely holds them, and only after paying for themselves
   with two controls the drawer already carries at every width.

   WHY 1360 AND NOT 1200, MEASURED. At 1200px the links fit but they fit by
   crushing the one control this bar is for: the search field fell to 144px, about
   fifteen characters, while the row still carried 112px of its own slack. At
   1280 it was 221px (a 114px input). At 1360 it is ~307px and at 1440 381px,
   which is the width the field is actually meant to be read at. A navigation link
   is worth having; it is not worth 200px off the search box.

   THIS BLOCK IS APPENDED, NOT INSERTED, AND THAT IS DELIBERATE. The rules it
   overrides live at line ~2058 (`.enw-topbar .enw-topbar__amp` shown from 900px)
   and line ~652 (`.enw-topbar .enw-topbar__theme` hidden under 480px). All three
   selectors have the same specificity, so the one written LAST wins at any width
   where both match — which is why these must come after them in the file rather
   than beside the rest of the bar's rules near the top.
   ========================================================================= */

.enw-topbar__nav {
  display: none;
}

@media (min-width: 1360px) {
  .enw-topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--enw-sp-4);
    flex: none;
  }

  .enw-topbar__nav a {
    font-size: var(--enw-fs-sm);
    font-weight: 600;
    color: var(--enw-text-muted, #6b7787);
    white-space: nowrap;
  }

  /*
   * HOVER AND THE CURRENT PAGE GET AN *INK* TOKEN, NOT THE BRAND FILL.
   *
   * These two rules shipped with `var(--enw-primary)` — the colour the same bar
   * paints its buttons with — and that is a fill, not a text colour. Measured on
   * the live site at 1440px, that made the current-page link 3.07:1 in Sunset
   * against its own composited bar: below the 4.5:1 floor for text this size, and
   * below what the rest of this file already does. Default sat at 4.51:1 — passing
   * by a hundredth — and Rose, Royal and Ocean within 0.2 of the line.
   *
   * `--enw-ink` is the token this stylesheet uses for "the brand, as text": the
   * searchband's links, the drawer's links and the tab bar all colour their hover
   * and current states with it, and every palette defines it in both schemes and
   * is already measured on `--enw-surface` by tools/enw_contrast.php (4.5:1, worst
   * case 5.52:1 in Sunset light). So this is not a new pairing to trust — it is the
   * pairing the contrast sweep has been asserting all along, on the one nav that had
   * opted out of it. The fallback is the default palette's own ink, matching the
   * muted literal above it, and is only reachable if the token is missing.
   */
  .enw-topbar__nav a:hover,
  .enw-topbar__nav a:focus-visible {
    color: var(--enw-ink, #1F52C4);
  }

  .enw-topbar__nav a[aria-current='page'] {
    color: var(--enw-ink, #1F52C4);
  }

  /* Both are one tap away in the drawer, which prints them at every width. */
  .enw-topbar .enw-topbar__amp,
  .enw-topbar .enw-topbar__theme {
    display: none;
  }
}


/* ── The Android app: the footer badge and the bar's app control ──────────
 *
 * The footer badge is the official "Get it on Google Play" mark, served from
 * this site. It sits above the legal lines, centred, and is deliberately not
 * given a fixed height in CSS: the img carries width/height attributes for
 * layout stability, and this rule only caps it so a footer on a phone does not
 * spend a third of the screen on it.
 */
.enw-footer__app {
  margin: var(--enw-sp-4, 18px) 0 var(--enw-sp-2, 8px);
  text-align: center;
}

.enw-footer__app a {
  display: inline-block;
  line-height: 0;
}

.enw-footer__app img {
  height: 58px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  border: 0;
}

@media (max-width: 480px) {
  .enw-footer__app img {
    height: 48px;
  }
}

/*
 * The bar's app control is the same link as the footer badge, kept in the bar
 * for the desktop widths where the main nav row (.enw-topbar__nav) has not
 * appeared yet. It is an icon button rather than a labelled one because the
 * bar's width is spoken for — the note on .enw-topbar__nav above records the
 * measurements — and an Android glyph needs 40px where a badge needs 150.
 *
 * Gated 1280–1359px, measured: at 1280 the search field still reads at ~159px
 * with this control in the row, and at 1120 the same control leaves it 45px —
 * about six characters, which is not a search box. Below 1280 the drawer
 * carries the link; at 1360 the "Android app" link joins the nav row and this
 * collapses out of the way rather than printing twice.
 */
.enw-topbar .enw-topbar__app {
  display: none;
}

@media (min-width: 1280px) {
  .enw-topbar .enw-topbar__app {
    display: inline-flex;
  }
}

@media (min-width: 1360px) {
  .enw-topbar .enw-topbar__app {
    display: none;
  }
}

/* ===========================================================================
   The signed-in account control: ONE chip, an initial, and Sign out
   ===========================================================================

   The bar's account area used to be two controls — a bordered chip carrying a
   person glyph and the reader's name, and a separate ghost button saying Sign
   out. They answered two halves of one question and paid for two borders, two
   paddings and a gap between them. Here they are one chip: a round avatar with
   the reader's FIRST INITIAL (in capitals) as the link to their account, a
   divider, and Sign out inside the same border. That is the space the admin
   asked to recover, and it comes back to the search field beside it.

   The avatar keeps the palette's own ink pairing: --enw-primary as the fill and
   --enw-on-primary as the letter, the same pairing .enw-brand__mark uses and
   tools/enw_contrast.php measures in every palette and both schemes — so the
   initial cannot end up dark-on-dark in a dark palette. */
.enw-topbar__account-me {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}

.enw-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.enw-topbar__account .enw-topbar__signout {
  margin-inline-start: 0.2rem;
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid var(--enw-border, #e3e8ef);
}

.enw-topbar__signout-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--enw-fs-xs, 0.78rem);
  font-weight: 600;
  color: var(--enw-text-muted, #6b7787);
  cursor: pointer;
  white-space: nowrap;
}

.enw-topbar__signout-btn:hover,
.enw-topbar__signout-btn:focus-visible {
  color: var(--enw-ink, #1F52C4);
  text-decoration: underline;
}

/* On a phone the NAME goes, not the avatar.

   The old rules truncated the name hard below 640px rather than drop it, because
   a lone person glyph said nothing about whose account this was. The avatar does
   now: the initial is the answer, so the name can give the row the width it needs
   for Sign out to stay on screen. */
@media (max-width: 639px) {
  .enw-topbar__account-name {
    display: none;
  }

  .enw-topbar__account {
    max-inline-size: none;
  }
}

/* The brand tile now carries the Android app's own icon (the logo the store
   listing and the phone show), so the image fills the tile's 30px square and
   inherits its radius. The tile keeps its inset ring as the app icon's edge. */
.enw-brand__mark img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

/* ===========================================================================
   The admin's home banner — the rotating strip at the top of `/`
   ===========================================================================

   One colour decision, taken from the app page's own hero: the panel is the
   app's own dark red with a darker stop for depth, and the button is the SAME
   blue gradient the app page's Play button uses — a red field with one blue
   action on it, which is what the app page opens with.

   BOTH HALVES ARE WRITTEN OUT RATHER THAN TAKEN FROM TOKENS, AND THAT IS THE
   POINT. This panel is a deliberate accent BESIDE the palette — the app's brand
   red, the colour of the icon the top bar now carries — not the palette's own
   primary. The first cut did use `--enw-primary`/`--enw-on-primary`, which is
   wrong twice over: the default palette's primary is BLUE (#2F6FED), so there
   was never a red field; and in a dark scheme `--enw-on-primary` flips to
   near-black (#10131A), painting the title 1.09:1 on the dark stop — dark on
   dark in every dark theme. A fixed red field with a fixed white label reads in
   every palette and every scheme, which is what a brand accent should do.

   ROTATION IS AN ENHANCEMENT. With scripting off every slide is printed stacked
   and all of them are read; the script adds `.enw-banner--js`, which is what
   turns the stack into one-at-a-time. Nothing is hidden behind a control a reader
   cannot operate, and the dots only exist once there is something to switch. */

.enw-banner {
  position: relative;
  overflow: hidden;
  margin: 14px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #a11c1c 0%, #7a1414 58%, #3a0a0a 100%);
  background-size: 180% 180%;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(80, 10, 10, .28);
}

/* `html` outranks the token-based fallback in the legacy sheets. */
html .enw-banner {
  background: linear-gradient(135deg, #a11c1c 0%, #7a1414 58%, #3a0a0a 100%);
  color: #ffffff;
}

@media (min-width: 1240px) {
  .enw-banner {
    margin: 18px auto;
    max-width: 1200px;
  }
}

.enw-banner__track {
  position: relative;
}

.enw-banner__slide {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 22px;
  margin: 0;
}

.enw-banner__slide + .enw-banner__slide {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (min-width: 820px) {
  .enw-banner__slide:not(.enw-banner__slide--notext) {
    grid-template-columns: 1.15fr .85fr;
    padding: 30px 36px;
  }
}

.enw-banner__title {
  margin: 0 0 .5rem;
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 800;
  color: inherit;
}

.enw-banner__text {
  margin: 0 0 .45rem;
  font-size: 1rem;
  line-height: 1.5;
  opacity: .96;
  max-width: 52ch;
}

.enw-banner__cta {
  margin: .9rem 0 0;
}

.enw-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(180deg, #1a6fe0, #0b57d0);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: .85rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(11, 87, 208, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}

.enw-banner__btn:hover,
.enw-banner__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(11, 87, 208, .6);
  color: #ffffff;
}

.enw-banner__btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.enw-banner__media {
  display: flex;
  justify-content: center;
}

.enw-banner__media img {
  width: 150px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

/* The dots exist only where the script turned the stack into a carousel. */
.enw-banner__dots {
  display: none;
}

.enw-banner--js .enw-banner__track {
  display: grid;
}

.enw-banner--js .enw-banner__slide {
  grid-area: 1 / 1;
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility .5s ease;
}

.enw-banner--js .enw-banner__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.enw-banner--js .enw-banner__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 0 0 14px;
}

.enw-banner__dot {
  inline-size: 9px;
  block-size: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}

.enw-banner__dot.is-active {
  background: #ffffff;
  inline-size: 22px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .enw-banner__slide {
    transition: none;
  }

  .enw-banner__btn {
    transition: none;
  }
}

/* ===========================================================================
   Contrast: three rules that paint TEXT with a token that is not ink
   ===========================================================================

   Reported from the book page: in every dark palette the "Previous in …" /
   "Next in …" lines and the `›` between breadcrumbs were dark-on-dark, and the
   "No reviews yet" pill was all but invisible. The cause is the same in all
   three, and it is not a palette bug: a token was borrowed from a role that has
   a different job.

     • `--enw-border` is a HAIRLINE. It is meant to be barely there — that is
       what a border is for — so painting the breadcrumb separator and the
       empty-reviews pill with it gives 1.14:1 on a light page and 1.27–1.66:1
       on a dark one. The breadcrumb separator is text on the PAGE, so it takes
       `--enw-text-muted` — the token that already means "quieter than body
       copy" beside it. The empty-reviews pill is text on a `--enw-header`
       PANEL, so it takes that panel's own label, `--enw-on-header`.

     • `.bd-float-arrow-label` is a `--enw-header` panel (a deep brand fill in a
       light scheme, the scheme's lifted surface in a dark one), and its label is
       `--enw-on-header`. The tag and the title instead used `--enw-accent-ink`
       and `--enw-on-primary`. In a LIGHT scheme `--enw-on-primary` is white and
       happened to read — which is exactly why this survived: on the default
       light palette it looked right, and in every dark palette `--enw-on-primary`
       flips to near-black (#10131A) on a dark panel, 1.19:1. The tag was wrong in
       BOTH schemes (accent ink on the brand fill is 1.28:1 in light, 2.4:1 in
       dark). The panel's own label token is the only right answer, and it is what
       `.bd-cover-overlay` beside it already uses.

   These are kept here, at the end of the site's own sheet, rather than edited
   into `style.css`: that file is a large generated legacy sheet, and enw.css is
   the layer this project already uses for exactly this kind of correction (it
   already overrides `.bd-breadcrumb`'s own rules directly above). Selectors are
   written one class deeper than the legacy rules so order cannot decide it. */
.bd-bc-sep,
.bd-breadcrumb .bd-bc-sep {
  color: var(--enw-text-muted, #6b7787);
}

/* The empty-reviews pill sits INSIDE `.bd-reviews-header`, which is a
   `--enw-header` panel with `--enw-on-header` text. The pill washes 10% of the
   surface over that panel, so its label belongs to the panel too — the first
   attempt here used `--enw-text-muted`, which reads on the PAGE but not on the
   panel (1.29:1 on the default light header). `--enw-on-header` is the token
   that means "this panel's label", and it is right in both schemes. */
.bd-reviews-avg.bd-reviews-avg--empty {
  color: var(--enw-on-header, #ffffff);
}

.bd-float-arrow,
.bd-float-arrow .bd-float-arrow-label,
.bd-float-arrow .bd-float-arrow-title {
  color: var(--enw-on-header, #ffffff);
}

.bd-float-arrow .bd-float-arrow-tag {
  color: var(--enw-on-header, #ffffff);
  opacity: .85;
}

/* ===========================================================================
   The two "More Books …" banners: a panel again, not a bright accent
   ===========================================================================

   `.bd-related-header--cat` / `--author` were gradients of the bright ACCENT
   colours with `--enw-on-primary` as the label. Neither half of that pairing is
   about the other: the accent is a BUTTON fill (its label is `--enw-on-accent`,
   near-black), and `--enw-on-primary` is the label for `--enw-primary`. Measured
   on the bright stop, the heading came out 3.13:1 in Default, 3.39 in Ocean,
   3.67 in Rose — white text on a light fill, which is the same failure as dark
   on dark, just the other way round.

   These two rectangles are panel surfaces with a label on them, which is what
   `--enw-header` / `--enw-on-header` are FOR (see their note in
   enw-palettes.css: a footer, a spec/description/review header, a hero, an icon
   tile). So the panel takes the header fill and the header's label, and the two
   variants stay distinguishable by mixing a little of their own accent into the
   far end of the gradient — 22%, small enough that the stop is still a header
   colour rather than an accent. */
.bd-related-header {
  background: var(--enw-header, #0d1f16);
}

.bd-related-header h2 {
  color: var(--enw-on-header, #ffffff);
}

.bd-related-header--cat {
  background: linear-gradient(135deg,
      var(--enw-header, #0d1f16),
      color-mix(in srgb, var(--enw-header, #0d1f16) 88%, var(--enw-accent, #16a394)));
}

.bd-related-header--author {
  background: linear-gradient(135deg,
      var(--enw-header, #0d1f16),
      color-mix(in srgb, var(--enw-header, #0d1f16) 88%, var(--enw-primary, #2f6fed)));
}

/* ===========================================================================
   The same borrowed token, on the panels the first pass did not reach
   ===========================================================================

   Round 4 fixed the book page. This sweep covers the rest of the shell, and it
   is the same mistake repeated: `--enw-on-primary` is the LABEL FOR a
   `--enw-primary` FILL, and in a dark scheme it is near-black (#10131A). It was
   also being used as the label for `--enw-header` PANELS — a hero, the feature
   band, a section head, a crumb row — where the surface is the deep brand in a
   light scheme (so white "happened to" read) and the scheme's lifted surface in
   a dark one (so the label must be the panel's own `--enw-on-header`). On the
   default dark scheme that made the feature band 1.27:1 and the app banner
   1.09:1 — dark ink on a dark surface, i.e. the exact complaint.

   Every selector is written `html …` so it outranks the legacy sheets by
   specificity rather than by load order: h2.php loads enw-legacy.css AFTER this
   file, and several of these rules are mirrored there.

   These are panels, so their labels go to `--enw-on-header`:
     .feature-banner  h2 / em / p        the home "feature band"
     .pdf-hero        h1 / em / p        the pdfs.php red hero
     .page-header     .page-title / .page-subtitle
     .books-section-heading h2, .pdf-section-heading h2, .pdf-count
     .cross-cta       h3 / p             the footer call-to-action
   and the crumb row, which is a translucent wash over the same panels. */

html .feature-banner h2,
html .feature-banner h2 em {
  color: var(--enw-on-header, #ffffff);
}

/* The band's paragraph is full-strength panel label, not a 85% veil: over the
   light Sunset header (#BE5233) an 85% wash measured 3.87:1, and the veil buys
   nothing on a surface this dark in every scheme. */
html .feature-banner p {
  color: var(--enw-on-header, #ffffff);
}

/* The outline button inside the feature band sits ON the panel, so its label is
   the panel's too (it took `--enw-text`, which is dark in every light scheme). */
html .feature-banner .btn-secondary {
  color: var(--enw-on-header, #ffffff);
  border-color: color-mix(in srgb, var(--enw-on-header, #ffffff) 38%, transparent);
}

html .feature-banner .btn-secondary:hover {
  color: var(--enw-on-header, #ffffff);
  background: color-mix(in srgb, var(--enw-on-header, #ffffff) 14%, transparent);
  border-color: var(--enw-on-header, #ffffff);
}

html .books-section-heading h2,
html .pdf-section-heading h2,
html .cross-cta h3 {
  color: var(--enw-on-header, #ffffff);
}

html .cross-cta p {
  color: var(--enw-on-header, #ffffff);
}

html .pdf-count {
  color: var(--enw-on-header, #ffffff);
}

/* The crumb row is NOT on a panel: enw-legacy.css §4.1 strips the head bands to
   the page background and makes the trail transparent. So its separators are
   page text — `--enw-text-muted`, the token for "quieter than body copy" — and
   not the panel label the first cut used (which would have stayed white). */
html .breadcrumb span {
  color: var(--enw-text-muted, #6b7787);
}

html .breadcrumb span:last-child {
  color: var(--enw-text-muted, #6b7787);
}

/* `.btn-primary`'s face is `--enw-key-face` — the ACCENT (see the depth recipe
   in enw-legacy.css §4.5), not `--enw-primary` — but its label was
   `--enw-on-primary`. White on a bright accent measured 3.13:1 on Default and
   2.06 on Sunset; in a dark scheme `--enw-on-primary` flips to near-black on
   the light accent, 1.38:1. The label for this face is `--enw-on-accent`. */
html .btn-primary {
  color: var(--enw-on-accent, #10131a);
}

/* The shopping-bar country links borrowed the brand FILL as ink on its own
   tint (Default 4.01, Sunset 2.62). `--enw-ink` is the brand as text. */
html .ebn-shopping-bar a {
  color: var(--enw-ink, #1f52c4);
}

/* A tiny arrow glyph painted with the HAIRLINE token — on the entity cards on
   the home page and on authors/publishers. Same class of bug as the breadcrumb
   `›`: a border colour is not an ink. */
html .entity-arrow {
  color: var(--enw-text-muted, #6b7787);
}/* The share buttons are fixed brand fills (#000, #1877f2, #0a66c2) whose label
   was `--enw-on-primary`; in a dark scheme that is near-black on black. Their
   label is white in every scheme. */
html .bd-social-btn {
  color: #ffffff;
}

/* ── The three Sunset-light leftovers ────────────────────────────────────
 *
 * Sunset's LIGHT scheme is the only one whose header (#BE5233) is light enough
 * that a small lift on top of it costs the white label its 4.5:1. All three of
 * these sit on a header fill, and all three were lifting it:
 *
 *   `.bd-btn-used` took `--enw-accent-ink` as its BACKGROUND. That token is an
 *   INK — the accent as ink for text. Painted as a solid fill under a
 *   `--enw-on-primary` label it is an amber button with a dark label, 3.46:1 on
 *   its own tint. Its fill is the brand ink instead, so it stays a solid
 *   secondary action, and its label is the token that pairs with a solid brand
 *   fill: white on the dark light-scheme ink, near-black on the light
 *   dark-scheme one.
 *
 *   `.bd-related-header--cat/--author` mixed 12% of their own accent into the
 *   header for depth. On Sunset that lift is what broke the heading on its own
 *   last stop. The tint stays — it is what tells the two banners apart — but it
 *   is mixed into a header darkened by 10% first, so the tint rides on a fill
 *   that has the headroom for it. */
html .bd-btn-used {
  background: var(--enw-ink, #1f52c4);
  color: var(--enw-on-primary, #ffffff);
}

html .bd-btn-used:hover {
  background: color-mix(in srgb, var(--enw-ink, #1f52c4) 84%, #000000);
  color: var(--enw-on-primary, #ffffff);
}

html .bd-related-header--cat {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--enw-header, #0d1f16) 90%, #000000),
      color-mix(in srgb,
          color-mix(in srgb, var(--enw-header, #0d1f16) 88%, var(--enw-accent, #16a394)) 90%,
          #000000));
}

html .bd-related-header--author {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--enw-header, #0d1f16) 90%, #000000),
      color-mix(in srgb,
          color-mix(in srgb, var(--enw-header, #0d1f16) 88%, var(--enw-primary, #2f6fed)) 90%,
          #000000));
}

/* The empty-reviews pill is a `--enw-on-header` label on a 10% white wash of
   its own `--enw-header` panel — and that wash LIGHTENS the panel, which is
   what put Sunset at 3.99:1. The pill goes darker than its panel instead of
   lighter, so the label keeps its headroom in every palette and scheme. */
html .bd-reviews-avg--empty {
  color: var(--enw-on-header, #ffffff);
  background: color-mix(in srgb, var(--enw-header, #0d1f16) 84%, #000000);
}

/* ===========================================================================
   25. Social links (the shared footer)
   ===========================================================================

   LinkedIn and X (Twitter), printed by enw_footer_social() on every page that
   calls enw_footer(). The glyphs are inline SVG — no icon font, no extra
   request — and each link is drawn from the footer band's own tokens, so the
   mark is legible on all eight palettes in both brightnesses: the plate is a
   translucent lift of `--enw-on-header` on the footer's `--enw-header`, and the
   glyph is `--enw-on-header` itself. On hover the plate becomes the brand fill
   with the label that pairs with it (`--enw-on-primary`), which is the depth
   recipe's one moving part — and it is the same pair the buttons use, so a
   palette that passes a button passes this. */
.enw-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin: var(--enw-sp-8) 0 0;
}

.enw-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  color: var(--enw-on-header, #ffffff);
  background: color-mix(in srgb, var(--enw-on-header, #ffffff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--enw-on-header, #ffffff) 24%, transparent);
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.enw-social__link svg {
  display: block;
}

.enw-social__link:hover,
.enw-social__link:focus-visible {
  transform: translateY(-2px);
  color: var(--enw-on-primary, #10131a);
  background: var(--enw-primary);
  border-color: var(--enw-primary);
}

@media (prefers-reduced-motion: reduce) {
  .enw-social__link {
    transition: none;
  }

  .enw-social__link:hover,
  .enw-social__link:focus-visible {
    transform: none;
  }
}

/* ===========================================================================
   17. Large screens — the design grows into the room
   ===========================================================================

   The page column is wide already (enw-contrast.css caps it at 1800px), but
   at a 1920px window its body text is still 15px and its cards still start at
   152px, so a large display shows seven small columns and chrome you have to
   lean in to read. The obvious fix, a root `zoom`, does not work: media
   queries are evaluated against the viewport, not the zoomed layout, so at a
   1300px window a 135% zoom laid the bar out at 861px inside a 1300px canvas
   and clipped "Add a book"/"Sign in" (measured 2026-10-18: 1360px of content
   in 1243px, last control ending at 1445px). Every `min-width` rule goes
   wrong the same way.

   So the scale is applied to size itself, not to the pixels: the root font
   size, which every rem token and every rem track minimum follows (the track
   minimums were converted from px to exactly the same rem for this reason —
   9.5rem is the 152px they used to be at a 16px root). Two steps, each placed
   where the bar still has room, measured on the live search page:

     · 120% at 1300px — the bar's row needs 48px more than it has at 1300px,
       and it finds them by dropping the AMP chip: that is a link to the phone
       edition of the list, and the field it was crowding is the control this
       bar exists for. With the chip present the search fell to its 9rem floor
       and the input to 50px (a magnifier with no room for a query). Without
       it: search 246px, input 123px, nothing over, last action 53px clear of
       the window edge. The chip is untouched below 1300px, where it belongs.

     · 135% at 1500px — 1360px of content against 1452px of bar, with the
       search still at 365px. */
@media (min-width: 1300px) {
  html {
    font-size: 120%;
  }

  :root {
    --enw-topbar-h: 70px;
  }

  /* The AMP edition is the phone edition. At this width its chip costs the
     search field the room the field needs, and the AMP pages keep their own
     links on the book pages and in search results. */
  .enw-topbar .enw-topbar__amp {
    display: none;
  }

  .enw-topbar__inner {
    gap: var(--enw-sp-2);
  }
}

@media (min-width: 1500px) {
  html {
    font-size: 135%;
  }

  :root {
    --enw-topbar-h: 78px;
  }
}

/* A pinned drawer spends 286px on the menu, and below ~1650px that is exactly
   the room the scale needs: at 1303px a pinned page at 120% had the bar 185px
   over its own box. Pinned pages below 1650 therefore keep the previous size,
   and the search gives up the 3rem it gives up at 1300px anyway. Measured
   after the rule: 1303px pinned — 0 over, last control 31px inside the window;
   from 1691px pinned — 135% type, 0 over, six 193px cards. */
@media (min-width: 1200px) and (max-width: 1649px) {
  html[data-enw-sidebar='pinned'] {
    font-size: 100%;
  }

  html[data-enw-sidebar='pinned'] .enw-topbar .enw-search {
    min-inline-size: 6rem;
  }
}

/*! assets/css/enw-legacy.css · f8f5f828ae21 · 47296 B · the bridge: legacy variables repointed at the tokens */
/* ===========================================================================
 * enw-legacy.css — one palette, every page.
 *
 * THE PROBLEM THIS SOLVES
 *
 * The site has two stylesheets and they disagree about colour. `style.css` is
 * the compiled Tailwind layer that everything has always used, and it is full of
 * a fixed palette: a green brand (#1a7a45), a gold accent (#d4a017), an ocean
 * blue (#3b5a6b) and a near-black ink (#171717). The new design system
 * (`enw-palettes.css` + `enw.css`) has no colours of its own at all — it reads
 * nine palettes' worth of tokens, so a reader can pick one in Settings and the
 * theme follows.
 *
 * Which meant a reader who chose "Royal" got a royal header sitting above a
 * green hero, a gold button and a slate card: the chrome changed, the page did
 * not. That is what "every page has a different look" is.
 *
 * HOW IT IS FIXED — AND WHY IT IS THIS FILE AND NOT 400 EDITS
 *
 * Tailwind does not hard-code its colours into its rules; it writes them as
 * custom properties (`--color-brand`, `--color-gray-600`) and every utility
 * references them, so `bg-brand`, `hover:text-brand`, `border-gray-200` and
 * hundreds of others all resolve at paint time. Repointing those properties at
 * the palette therefore recolours every one of those utilities at once, without
 * touching a single class name or rewriting a page.
 *
 * Two facts make that work here, both deliberate:
 *
 *   1. style.css puts its theme variables inside `@layer theme`, and a layered
 *      declaration ALWAYS loses to an unlayered one. This file is unlayered, so
 *      these `:root` values win without `!important`.
 *   2. `h2.php` loads this file last — after style.css, the palettes and
 *      enw.css — so it is the final word on legacy colour.
 *
 * What is left after the variables is a short list of rules that hard-code a hex
 * value instead of using a variable (the old nav's gradient, the footer, the buy
 * button). Those are overridden by name, in the order they appear in the design
 * system, so the two stylesheets agree.
 *
 * TWO LAYERS, ON PURPOSE
 *
 *   §1–§3  colour and type. Every legacy colour follows the palette, everywhere.
 *   §4     shape. Colour alone still left pages looking like a different site —
 *          a green hero band with a gold bar, Syne 900 headings, a green price
 *          chip, square buttons. §4 replaces each of those components with the
 *          design system's own: one page head, one card, one set of pills.
 *   §5     icons that were emoji, given a font that draws them.
 *   §6     AdSense safety — the one section that is not about looks.
 *
 * §4 is the part that makes a catalogue page and the shelves page read as one
 * site rather than two. It obeys two rules: it may only use tokens (so a palette
 * change still moves everything), and it only overrides *presentation* — colour,
 * type, radius, shadow, spacing, grid tracks. No property that decides where an
 * element sits in the flow is touched, because that would move a page's
 * furniture and no palette is worth a broken layout.
 *
 * WHAT THIS FILE MUST NEVER DO
 *
 * The PDF pages carry AdSense auto ads. An ad is not ours to restyle, hide or
 * clip: a hidden or collapsed ad is a policy problem, and a shifted one costs
 * Core Web Vitals. So section 5 does the opposite of the rest of this file — it
 * explicitly leaves ads alone and stops any other rule here from reaching them.
 * The one thing it sets is that an ad is never `display:none` and never clipped.
 *
 * NO BUILD STEP. This is hand-written CSS, loaded as a file. Change a colour,
 * upload one file.
 * ======================================================================== */


/* ===========================================================================
 * 1. The legacy palette, repointed at the theme
 *
 * Every value on the right is a token from enw-palettes.css, so switching the
 * palette in Settings (or the server-side theme cookie, before first paint)
 * repaints all of this. The fallbacks are the design system's own defaults, so
 * a page that somehow loads without the tokens still looks deliberate rather
 * than broken.
 * ======================================================================== */

:root {
  /* The brand scale: the site's green becomes whatever the reader chose. */
  --color-brand:        var(--enw-primary, #4f46e5);
  --color-brand-dark:   var(--enw-primary-dark, #4338ca);
  --color-brand-light:  var(--enw-primary-tint, #eef2ff);

  /* The gold accent becomes the palette's accent (the value the app uses for
     highlights, badges and "in the news" marks). */
  --color-amber:        var(--enw-accent, #4f46e5);
  --color-amber-dark:   var(--enw-accent, #4f46e5);
  --color-amber-light:  var(--enw-accent-tint, #eef2ff);

  /* Coral was the warm second accent — the "Deals" colour. Danger red is the
     token that means the same thing, and it tracks dark mode properly. */
  --color-coral:        var(--enw-danger, #dc2626);

  /* Ocean was used as the second stop of the old gradients. Mapping it onto the
     darker brand keeps those gradients a brand gradient instead of green→blue. */
  --color-ocean:        var(--enw-primary-dark, #4338ca);
  --color-ocean-dark:   var(--enw-primary-dark, #4338ca);
  --color-ocean-light:  var(--enw-primary-tint, #eef2ff);

  --color-forest:       var(--enw-primary, #4f46e5);
  --color-forest-light: var(--enw-primary-tint, #eef2ff);

  --color-ink:          var(--enw-text, #111827);

  /* The neutral scale carries most of the site's text and borders, so it has to
     follow the palette too — otherwise a dark theme gets #64748b body text on a
     #0b1220 page, which is unreadable. */
  --color-gray-50:      var(--enw-surface-2, #f9fafb);
  --color-gray-100:     var(--enw-surface-2, #f3f4f6);
  --color-gray-200:     var(--enw-border, #e5e7eb);
  --color-gray-300:     var(--enw-border, #d1d5db);
  --color-gray-400:     var(--enw-text-muted, #6b7280);
  --color-gray-500:     var(--enw-text-muted, #6b7280);
  --color-gray-600:     var(--enw-text, #374151);
  --color-gray-700:     var(--enw-text, #1f2937);
  --color-gray-800:     var(--enw-text, #111827);
  --color-gray-900:     var(--enw-text, #111827);

  /* Blue and indigo are the site's "informational" scale — badges, links in
     prose, the odd stray button. In a nine-palette theme they are the brand. */
  --color-blue-50:      var(--enw-primary-tint, #eef2ff);
  --color-blue-100:     var(--enw-primary-tint, #eef2ff);
  --color-blue-200:     var(--enw-border, #e5e7eb);
  --color-blue-300:     var(--enw-border, #d1d5db);
  --color-blue-400:     var(--enw-primary, #4f46e5);
  --color-blue-500:     var(--enw-primary, #4f46e5);
  --color-blue-600:     var(--enw-primary, #4f46e5);
  --color-blue-700:     var(--enw-primary-dark, #4338ca);
  --color-blue-800:     var(--enw-primary-dark, #4338ca);

  --color-indigo-100:   var(--enw-primary-tint, #eef2ff);
  --color-indigo-300:   var(--enw-border, #d1d5db);
  --color-indigo-700:   var(--enw-primary-dark, #4338ca);
  --color-indigo-800:   var(--enw-primary-dark, #4338ca);

  /* Green is used for "success" and for the old brand interchangeably; in a
     themed site the first reading is the safe one. */
  --color-green-50:     var(--enw-primary-tint, #eef2ff);
  --color-green-100:    var(--enw-primary-tint, #eef2ff);
  --color-green-200:    var(--enw-primary-tint, #eef2ff);
  --color-green-300:    var(--enw-primary, #4f46e5);
  --color-green-500:    var(--enw-primary, #4f46e5);
  --color-green-600:    var(--enw-primary, #4f46e5);
  --color-green-700:    var(--enw-primary-dark, #4338ca);
  --color-green-800:    var(--enw-primary-dark, #4338ca);
}


/* ===========================================================================
 * 2. The rules that hard-coded a hex instead of using a variable
 *
 * Each one is the legacy twin of a component the design system already has, so
 * they are listed in that order. Only colour and shadow, never geometry: a
 * layout change here would move every page's furniture, which is not what
 * "one palette" asked for.
 * ======================================================================== */

/* The page itself. `style.css` sets a hard white background and #16301f text on
   every legacy page, which no theme can reach. */
body {
  background: var(--enw-bg, #ffffff);
  color: var(--enw-text, #111827);
}

/* Focus and selection: the site's most-visible accessibility colours, and both
   were a fixed green/gold. */
:focus-visible {
  outline-color: var(--enw-ink, #4f46e5);
}

::selection {
  background: var(--enw-primary-tint, #eef2ff);
  color: var(--enw-text, #111827);
}

/* ── The old top bar, for the pages that still carry it ──────────────────── */
.ebn-nav {
  background: linear-gradient(135deg,
    var(--enw-primary, #4f46e5) 0%,
    var(--enw-header, #4338ca) 100%);
  box-shadow:none;
}

nav,
.main-nav,
.bd-nav {
  background: var(--enw-surface, #ffffff);
  border-bottom-color: var(--enw-border, #e5e7eb);
}

.nav-logo,
.bd-logo,
.footer-brand,
.bd-footer-brand,
.nav-logo-text,
.bd-logo span {
  color: var(--enw-on-header, #4f46e5);
}

.nav-logo-text,
.bd-logo span {
  background: linear-gradient(90deg,
    var(--enw-text, #111827) 0% 45%,
    var(--enw-primary, #4f46e5) 45% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.nav-logo-sub {
  color: var(--enw-text-muted, #6b7280);
}

.nav-link,
.bd-nav-link,
.nav-mobile-link,
.bd-mobile-link,
.nav-dropdown-menu a {
  color: var(--enw-text-muted, #6b7280);
}

.nav-link:hover,
.bd-nav-link:hover,
.nav-mobile-link:hover,
.bd-mobile-link:hover,
.footer-col a:hover,
.footer-links a:hover,
.bd-footer-links a:hover {
  color: var(--enw-on-header, #4338ca);
}

.nav-link:hover,
.bd-nav-link:hover {
  background: var(--enw-primary-tint, #eef2ff);
}

.nav-link.active,
.nav-dropdown-menu a:hover {
  color: var(--enw-ink, #4f46e5);
}

.nav-link--deals,
.bd-nav-link--deals,
.bd-mobile-link--deals,
.nav-link.pdf-link {
  color: var(--enw-danger-ink, #dc2626) !important;
}

.nav-link--addbook,
.bd-nav-link--addbook,
.nav-mobile-link--addbook {
  background: var(--enw-primary, #4f46e5) !important;
  color: var(--enw-on-primary, #ffffff) !important;
}

.nav-dropdown-menu,
.nav-links.open,
.bd-mobile-menu,
.nav-mobile-menu {
  background: var(--enw-surface, #ffffff);
  border-color: var(--enw-border, #e5e7eb);
}

.bd-mobile-menu,
.nav-links.open {
  border-bottom-color: var(--enw-border, #e5e7eb);
}

.nav-search,
.nav-search-form,
.bd-nav-search,
.bd-mobile-search,
.nav-mobile-search {
  background: var(--enw-surface-2, #f9fafb);
  border-color: var(--enw-border, #e5e7eb);
}

.nav-search input,
.nav-search-form input,
.bd-nav-search input,
.bd-mobile-search input,
.nav-mobile-search input {
  color: var(--enw-text, #111827);
}

.nav-search button,
.nav-search-form button,
.bd-nav-search button,
.bd-mobile-search button,
.nav-mobile-search button {
  background: var(--enw-primary, #4f46e5);
  color: var(--enw-on-primary, #ffffff);
}

.nav-search button:hover,
.bd-nav-search button:hover,
.bd-mobile-search button:hover {
  background: var(--enw-header, #4338ca);
}

.nav-hamburger,
.bd-hamburger {
  background: var(--enw-surface-2, #f9fafb);
  border-color: var(--enw-border, #e5e7eb);
  color: var(--enw-text, #111827);
}

/* ── Buy buttons and price badges ───────────────────────────────────────── */
.btn-buy-gradient {
  background: linear-gradient(135deg,
    var(--enw-primary, #4f46e5) 0%,
    var(--enw-header, #4338ca) 100%);
  box-shadow:none;
}

.btn-buy-gradient:hover {
  background: linear-gradient(135deg,
    var(--enw-header, #4338ca) 0%,
    var(--enw-header, #4338ca) 100%);
}

.price-badge {
  color: var(--enw-ink, #4f46e5);
  background: linear-gradient(135deg,
    var(--enw-primary, #4f46e5),
    var(--enw-accent, #4f46e5));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* ── The PDF hero, which the home page leads with ─────────────────────────
 *
 * This block used to paint the hero as a brand-gradient band. It no longer
 * does, and deliberately: the site now opens every page with the same plain
 * head the shelves page uses (see §6), so a hero is not a colour of its own —
 * it is the same head with a search box in it. The rule moved to §6 rather than
 * being left here as a second, contradictory opinion. */

/* ── The footer family ──────────────────────────────────────────────────── */
/*
 * The footer is a --enw-header panel, and it has to say so.
 *
 * It used to be a fixed dark green here — `var(--enw-footer-bg, #12211a)`,
 * a token nothing ever defined, so every palette and both themes painted the
 * same colour. Pick Ocean, Rose or Royal and the page changed around a footer
 * that did not, which is the "same colours as before" a reader notices before
 * they notice anything else. This is also the last stylesheet to load, so the
 * fixed value was winning over the panel colour the layers above set.
 *
 * --enw-header is the site's panel surface: the palette's deep brand colour in
 * a light scheme, that scheme's own lifted surface in a dark one (see the
 * website-only section of enw-palettes.css). --enw-on-header is its label, and
 * the muted lines are that label at 82%, which keeps the hierarchy in both
 * schemes without a second token.
 */
footer,
.site-footer,
.bd-footer {
  background: var(--enw-header, #12211a);
  border-top-color: var(--enw-header, #12211a);
}

.footer-desc,
.footer-col a,
.footer-links a,
.bd-footer-links a,
.footer-contact,
.bd-footer-contact {
  color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 82%, transparent);
}

.footer-col h4,
.footer-links-heading,
.footer-contact strong,
.bd-footer-contact strong,
.footer-bottom,
.bd-footer-bottom {
  color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 72%, transparent);
}

.footer-social a {
  background: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 10%, transparent);
  border-color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 26%, transparent);
  color: var(--enw-on-header, #cfd8d2);
}

.footer-social a:hover {
  background: var(--enw-primary, #4f46e5);
  border-color: var(--enw-ink, #4f46e5);
  color: var(--enw-on-primary, #ffffff);
}

.footer-bottom,
.bd-footer-bottom {
  border-top-color: color-mix(in oklab, var(--enw-on-header, #cfd8d2) 22%, transparent);
}

/* ── The mobile bottom bar and breadcrumbs ──────────────────────────────── */
.mob-nav-fixed {
  background: color-mix(in oklab, var(--enw-surface, #ffffff) 96%, transparent);
  border-top-color: var(--enw-border, #e5e7eb);
}

.breadcrumb-wrap {
  background: var(--enw-surface, #ffffff);
  border-bottom-color: var(--enw-border, #e5e7eb);
}

.breadcrumb-wrap .breadcrumb a {
  color: var(--enw-ink, #4f46e5);
}

.breadcrumb-wrap .breadcrumb span:not(.bc-sep),
.bc-sep {
  color: var(--enw-text-muted, #6b7280);
}

/* ── Prose and tables: the two legacy blocks that appear inside articles ── */
.book-description-text td,
.book-description-text th {
  border-color: var(--enw-border, #e5e7eb);
}

.book-description-text table {
  color: var(--enw-text, #111827);
}


/* ===========================================================================
 * 3. Typography and shape
 *
 * Colour alone would still leave a legacy page feeling like a different site:
 * it sets DM Sans while the shell sets Inter, and its controls are square where
 * the design system's are rounded. These three rules converge the controls and
 * the body text; they deliberately do not touch spacing, because moving a
 * page's furniture is not what this file is for.
 * ======================================================================== */

body {
  font-family: var(--enw-font, var(--font-sans, "Inter", system-ui, sans-serif));
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* The new shell styles its own fields. This only reaches the legacy ones, so
   the site's forms stop looking like a different website on the old pages. */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  background: var(--enw-surface, #ffffff);
  border-color: var(--enw-border, #e5e7eb);
  color: var(--enw-text, #111827);
  border-radius: var(--enw-r-sm, 8px);
}

input::placeholder,
textarea::placeholder {
  color: var(--enw-text-muted, #6b7280);
}

input[type="submit"],
button[type="submit"] {
  border-radius: var(--enw-r-sm, 8px);
}

/* Tables are the legacy layer's most common way to show a list, and they carry
   a fixed pale-green border. */
table {
  border-color: var(--enw-border, #e5e7eb);
}

th {
  color: var(--enw-text, #111827);
}

td,
th {
  border-color: var(--enw-border, #e5e7eb);
}


/* ===========================================================================
 * 4. The components, in the design system's shape
 *
 * Colour and type (§1–§3) put every legacy page on the palette. They did not put
 * it on the design system's *shape*, and shape is most of what a page looks
 * like: the catalogue pages still opened with a dark-green band under a 4px gold
 * bar (pdfs.php used a dark-red one), titled a section in Syne 900 in a colour
 * of its own, boxed each book with a green price chip, and squared off every
 * button. That is why one site read as several.
 *
 * Each block below pairs a legacy component with its design-system twin and
 * copies the twin's values from enw.css — the same tokens, the same numbers —
 * so the two layers cannot drift: change the card radius in the design system
 * and the legacy cards move with it.
 *
 * WHAT IS DELIBERATELY NOT HERE
 *
 * Only presentation. No `display`, `position`, `float` or sizing that decides
 * where a block sits in the flow, because each of these components appears in
 * templates behind five million pages and moving their furniture would be a
 * different, much larger job. What changes is what you see: colour, type,
 * radius, shadow, the gap between grid tracks, and which element owns a border.
 * ======================================================================== */

/* ── 4.1 One page head, everywhere ────────────────────────────────────────
 *
 * The site opened pages FIVE different ways, which is the clearest measure of how
 * this looked before: `.page-header` (dark green under a gold bar) on the
 * catalogue families, `.pdf-hero` (dark green, centred) on the home page, `.hero`
 * (dark RED under a red bar) on pdfs.php, `.page-hero` (dark green again, slightly
 * different padding) somewhere else, and `.mini-hero` (dark green, 3px gold bar).
 * None of them exists on the shelves page — it opens with a title on the page
 * background.
 *
 * So all five become that: the page background, a hairline underneath, a
 * display-font title and a muted subtitle. The search box and the badges each
 * page carries stay exactly where they are.
 *
 * The list is checked against the stylesheet by tools/enw_theme_test.php, so a
 * sixth hero family cannot be added quietly and stay green while the rest of the
 * site is plain. */
.page-header,
.hero,
.pdf-hero,
.page-hero,
.mini-hero {
  background: var(--enw-bg, #ffffff);
  color: var(--enw-text, #111827);
  border: 0;
  border-block-end: 1px solid var(--enw-border, #e5e7eb);
  text-align: start;
  align-items: flex-start;
  padding: var(--enw-sp-8, 2rem) clamp(0.75rem, 3vw, 1.5rem) var(--enw-sp-6, 1.5rem);
}

/* The decorative glows that were painted for a dark band. On a light head they
   are two washed-out grey smudges, so they go — and they go by `content: none`
   rather than `display: none`, because this file bans itself from hiding things
   (see §5). A pseudo-element that draws no decoration is a decoration removed;
   `display: none` is a box removed, and one of those is how a page loses a
   paragraph. */
.page-header::before,
.hero::before,
.pdf-hero::before,
.page-hero::before,
.mini-hero::before {
  content: none;
}

.page-header h1,
.hero h1,
.pdf-hero h1,
.page-hero h1,
.mini-hero h1,
.mini-hero h2 {
  margin-block: 0 var(--enw-sp-2);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight);
  color: var(--enw-text, #111827);
  max-inline-size: none;
}

/* The old heads picked their own accent for the emphasised words — gold on the
   home page, a pale red on pdfs.php. Both are the brand now.

   `.pdf-hero h1 span` is in this list for a reason worth keeping: the two pages
   that still write their heading that way — the home page and the PDF hub — use
   <span> rather than <em>, and only `.hero h1 span` below covered a span. So the
   words meant to carry the accent ("PDF Books") were rendered in the same ink as
   the rest of the heading on both of them. The selector is listed rather than the
   markup being rewritten because this is the rule that decides the colour. */
.page-header h1 em,
.hero h1 em,
.pdf-hero h1 em,
.pdf-hero h1 span,
.page-hero h1 em,
.mini-hero h1 em,
.hero h1 span {
  color: var(--enw-ink, #4f46e5);
  font-style: normal;
}

.page-header p,
.hero p,
.pdf-hero p,
.page-hero p,
.mini-hero p,
.hero-sub {
  margin-block: 0;
  color: var(--enw-text-muted, #6b7280);
  font-size: var(--enw-fs-md);
  line-height: var(--enw-lh-body);
  max-inline-size: var(--enw-container-narrow, 760px);
}

/* ── `.deals-hero` is not a band at all ───────────────────────────────────
 *
 * It is a light card — white, an 18px radius, and a PINK border (#fecdd3) that
 * matches no palette the site has. Which makes it the other half of the problem:
 * the bands were the wrong colour, this one is the wrong component. It becomes the
 * design system's card, so the Deals page opens the same way every other page
 * does. */
.deals-hero {
  background: var(--enw-surface, #ffffff);
  border: 1px solid var(--enw-border, #e5e7eb);
  border-radius: var(--enw-r-md);
  box-shadow:none;
  gap: var(--enw-sp-4, 1rem);
}

.deals-hero h1 {
  color: var(--enw-text, #111827);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight);
}

.deals-hero p {
  color: var(--enw-text-muted, #6b7280);
}

/* The badge above the title, in the design system's badge shape and colour. */
.hero-badge,
.pdf-hero-badge {
  color: var(--enw-ink, #4338ca);
  background: var(--enw-primary-tint, #eef2ff);
  border: 1px solid color-mix(in oklab, var(--enw-primary, #4f46e5) 26%, transparent);
  border-radius: var(--enw-r-pill);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-hint,
.pdf-hero-hint {
  color: var(--enw-text-muted, #6b7280);
}

/* The trail inside a page head. It was a translucent white pill with gold links,
   which only worked on a dark band. */
.breadcrumb {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-block-end: var(--enw-sp-2);
  padding: 0;
  font-size: var(--enw-fs-xs);
}

.breadcrumb a {
  color: var(--enw-ink, #4f46e5);
  font-weight: 600;
}

.breadcrumb a:hover {
  color: var(--enw-ink, #4338ca);
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--enw-text-muted, #6b7280);
  margin-inline: var(--enw-sp-1);
}

.breadcrumb span:last-child {
  color: var(--enw-text-muted, #6b7280);
  font-weight: 600;
  margin-inline: 0;
}

/* ── 4.2 Containers ───────────────────────────────────────────────────────
 *
 * Three names, three widths: `.section-inner` 1400/24px, `.main-container`
 * 1400/36px, and the shell's `.enw-container` 1440 with fluid padding. Content
 * that does not line up with the chrome above it is the cheapest way for a page
 * to look like it belongs to another site. */
.container,
.main-container,
.section-inner {
  max-inline-size: var(--enw-container, 1440px);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}

.main-container {
  padding-block: var(--enw-sp-6, 1.5rem);
}

/* ── 4.3 Section headings ─────────────────────────────────────────────────
 *
 * Syne 900 at 26px in a fixed near-black, with the "view all" link as a green
 * pill. The design system sets the same idea in its display face at --enw-fs-xl,
 * weight 700, -0.02em, and makes that link a plain coloured link. */
.section {
  margin-block: var(--enw-sp-8, 2rem) var(--enw-sp-10, 2.5rem);
}

.section-hd {
  align-items: baseline;
  gap: var(--enw-sp-4, 1rem);
  margin-block-end: var(--enw-sp-4, 1rem);
}

.section-hd h2 {
  color: var(--enw-text, #111827);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight);
  gap: var(--enw-sp-2, 0.5rem);
}

/* The emoji that used to sit beside a section title, sized to the new title
   rather than to the old 26px one. */
.section-hd .icon {
  font-size: 1em;
}

.section-hd a {
  color: var(--enw-ink, #4f46e5);
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-size: var(--enw-fs-sm);
  font-weight: 600;
}

.section-hd a:hover {
  color: var(--enw-ink, #4338ca);
  background: transparent;
  text-decoration: underline;
}

/* ── 4.4 Book cards ───────────────────────────────────────────────────────
 *
 * The card keeps its box — that was the decision — but the box becomes the
 * design system's card (surface, hairline, --enw-r-md, --enw-shadow-sm) instead
 * of a fixed white slab with its own radius and an eight-value shadow, and the
 * price stops being a green chip.
 *
 * The cover is the one place a real defect hid: `style.css` pins
 * `.book-cover img` to 64 × 96, which is a thumbnail size that leaked out of a
 * list component into the grid, so a home-page card drew a postage stamp in the
 * corner of its box. Inside a card the image now fills its box. */
.book-card {
  color: var(--enw-text, #111827);
  background: var(--enw-surface, #ffffff);
  border: 1px solid var(--enw-border, #e5e7eb);
  border-radius: var(--enw-r-md);
  box-shadow:none;
  transition: transform var(--enw-t-base) var(--enw-ease),
              box-shadow var(--enw-t-base) var(--enw-ease),
              border-color var(--enw-t-fast);
}

.book-card:hover {
  border-color: color-mix(in oklab, var(--enw-primary, #4f46e5) 34%, var(--enw-border, #e5e7eb));
  box-shadow:none;
  transform: translateY(-2px);
}

.book-card:hover .book-card-img img,
.book-card:hover .book-card-cover img,
.book-card:hover .book-cover img {
  transform: scale(1.03);
}

.book-card-img,
.book-card-cover,
.book-card .book-cover {
  background: var(--enw-bg, #f4f6fa);
}

/* Inside a card the cover inherits the card's own edge, so it does not draw a
   second border and its own radius inside the box. */
.book-card .book-cover {
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.book-card .book-cover img,
.book-card-img img,
.book-card-cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.book-card .book-cover img {
  transition: transform var(--enw-t-slow) var(--enw-ease);
}

.book-card-body {
  border-top-color: var(--enw-border, #e5e7eb);
  padding: var(--enw-sp-3, 0.75rem);
  gap: 0;
}

.book-card-title {
  color: var(--enw-text, #111827);
  font-size: var(--enw-fs-sm);
  font-weight: 600;
  line-height: var(--enw-lh-snug);
  margin-block-end: var(--enw-sp-1, 0.25rem);
}

.book-card-title a {
  color: inherit;
}

.book-card-author {
  color: var(--enw-text-muted, #6b7280);
  font-size: var(--enw-fs-xs);
  font-weight: 500;
  margin-block-end: var(--enw-sp-1, 0.25rem);
}

.book-card-meta {
  color: var(--enw-text-muted, #6b7280);
  font-size: var(--enw-fs-xs);
  margin-block-start: var(--enw-sp-1, 0.25rem);
}

.book-card-meta a {
  color: var(--enw-ink, #4f46e5);
  font-weight: 600;
}

.book-card-country {
  color: var(--enw-text-muted, #6b7280);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-2xs);
}

/* The price was white on green in DM Mono at 12px — a chip, on the theory that a
   price should shout. The design system says a price is bold text with tabular
   figures (`.enw-price`), which is what the app and the shelves page show. */
.book-card-price {
  color: var(--enw-text, #111827);
  background: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--enw-font);
  font-size: var(--enw-fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* A card with no price for this market renders an empty price element. It has no
   content to draw, so the only thing to remove is its spacing — the pin for a
   number that is not there. Hiding it would be a content decision; this is not. */
.book-card-price:empty {
  margin-block: 0;
}

.book-card-btn {
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent);
  border-radius: var(--enw-r-pill);
  margin-block-start: var(--enw-sp-3, 0.75rem);
  padding: 0.4rem 0.8rem;
  font-size: var(--enw-fs-sm);
  font-weight: 700;
  transition: background var(--enw-t-fast), box-shadow var(--enw-t-fast);
}

.book-card-btn:hover {
  background: color-mix(in oklab, var(--enw-accent, #16a394) 85%, var(--enw-text, #111827));
  box-shadow:none;
  transform: none;
}

/* Both legacy grids, on the design system's tracks and gap. */
.books-shelf,
.book-grid {
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

@media (min-width: 900px) {
  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
  }
}

/* Six per rail is one row, not five-and-one. The auto-fill track count is
   decided by the container, and a rail that asks for six books should not leave
   the sixth alone on a second line. The rule lives here, beside the tracks it
   replaces, because this sheet loads after enw.css — a rule up there loses. */
@media (min-width: 1100px) {
  .books-shelf {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* A 320px phone cannot fit two 150px tracks plus the gap, so auto-fill dropped a
   six-book rail to ONE column — six screens of covers per category. Two narrow
   tracks are shorter and still readable. */
@media (max-width: 480px) {
  .books-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 4.5 Buttons ──────────────────────────────────────────────────────────
 *
 * `.btn-primary` was a green slab with a 12px radius and a green glow — the
 * loudest unthemed thing on the page. The design system's button is a pill: solid
 * brand for primary, an outline for secondary, text-only for a bare action. */
.btn,
.btn-primary,
.btn-secondary {
  border-radius: var(--enw-r-pill);
  font-size: var(--enw-fs-base);
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  transition: background var(--enw-t-fast), box-shadow var(--enw-t-fast), transform var(--enw-t-fast);
}

.btn-primary {
  background: var(--enw-primary, #4f46e5);
  color: var(--enw-on-primary, #ffffff);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--enw-header, #4338ca);
  box-shadow:none;
  transform: none;
}

.btn-secondary {
  color: var(--enw-text, #111827);
  background: transparent;
  border: 1px solid var(--enw-border, #e5e7eb);
}

.btn-secondary:hover {
  color: var(--enw-ink, #4338ca);
  background: var(--enw-primary-tint, #eef2ff);
  border-color: var(--enw-ink, #4f46e5);
}

.btn--bare {
  background: transparent;
  border: 0;
  color: var(--enw-ink, #4f46e5);
  padding-inline: var(--enw-sp-2, 0.5rem);
  box-shadow: none;
}

.btn--bare:hover {
  background: var(--enw-primary-tint, #eef2ff);
}

.btn--sm {
  padding: 0.4rem 0.8rem;
  font-size: var(--enw-fs-sm);
}

/* The buy button is the accent, not a brand gradient — the same rule the design
   system's `.enw-btn--buy` follows, so a Buy on the web and a Buy in the app are
   the same colour. */
.btn-buy-gradient {
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent);
  box-shadow: none;
}

.btn-buy-gradient:hover {
  background: color-mix(in oklab, var(--enw-accent, #16a394) 85%, var(--enw-text, #111827));
}

.btn:active,
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px);
}

/* ── 4.6 Result bars, pagination, the shopping bar ────────────────────────
 *
 * Pagination was white boxes with a gold hover and a green current page; the
 * design system's pager is a row of ghost pills with the current page filled in
 * brand. The meta bars are the quiet line above a grid of books. */
.books-meta,
.results-meta {
  color: var(--enw-text-muted, #6b7280);
  border-bottom-color: var(--enw-border, #e5e7eb);
  margin-block-end: var(--enw-sp-4, 1rem);
  font-size: var(--enw-fs-sm);
}

.pagination {
  gap: var(--enw-sp-2, 0.5rem);
  margin-block: var(--enw-sp-8, 2rem);
}

.page-btn,
.pagination a,
.pagination span {
  color: var(--enw-text, #111827);
  background: var(--enw-surface, #ffffff);
  border: 1px solid var(--enw-border, #e5e7eb);
  border-radius: var(--enw-r-pill);
  min-width: 2.5rem;
  height: 2.5rem;
  font-size: var(--enw-fs-sm);
  font-weight: 600;
  box-shadow: none;
}

.page-btn:hover,
.pagination a:hover {
  color: var(--enw-ink, #4338ca);
  background: var(--enw-primary-tint, #eef2ff);
  border-color: var(--enw-ink, #4f46e5);
}

.page-btn.active,
.page-btn.current-page,
.pagination .current-page {
  color: var(--enw-on-primary, #ffffff);
  background: var(--enw-primary, #4f46e5);
  border-color: var(--enw-ink, #4f46e5);
  font-weight: 700;
  box-shadow: none;
}

.ebn-shopping-bar {
  color: var(--enw-text-muted, #6b7280);
  background: var(--enw-surface-2, #f9fafb);
  border-bottom-color: var(--enw-border, #e5e7eb);
}

/* ── 4.7 The search forms the home and PDF pages lead with ────────────────
 *
 * A white box with a 4px gold ring and a black drop shadow is a hero's search
 * form on a dark band. On a light head it should be a field: a pill, a hairline,
 * and a brand button — the shape the shelves page uses for its own search.
 *
 * Three class names do this one job in the legacy stylesheet (`.search-box`,
 * `.hero-search-form`, `.pdf-search-form`), the same three-names-for-one-component
 * pattern as the containers — so all three are listed. The search box on the red
 * pdfs.php hero had its own red button (#dc2626) and its own hover; both are the
 * brand now. */
.search-box,
.hero-search-form,
.pdf-search-form {
  background: var(--enw-surface, #ffffff);
  border: 1px solid var(--enw-border, #e5e7eb);
  border-radius: var(--enw-r-pill);
  box-shadow:none;
  margin-inline: 0;
  max-inline-size: 34rem;
}

/* A flex item will not shrink below its content unless it is told it may, and an
   input's intrinsic width is its default size — about 180px. On a 390px phone that
   is what pushed the submit button off the right edge (measured: button left 259,
   right 409, in a viewport of 390). The field yields, the button keeps its size. */
.search-box input,
.hero-search-form input,
.pdf-search-form input {
  color: var(--enw-text, #111827);
  font-family: var(--enw-font);
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: var(--enw-sp-4, 1rem) var(--enw-sp-5, 1.25rem);
}

.search-box input::placeholder,
.hero-search-form input::placeholder,
.pdf-search-form input::placeholder {
  color: var(--enw-text-muted, #6b7280);
}

.search-box button,
.hero-search-form button,
.pdf-search-form button {
  color: var(--enw-on-primary, #ffffff);
  background: var(--enw-primary, #4f46e5);
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: var(--enw-sp-6, 1.5rem);
  font-size: var(--enw-fs-base);
  font-weight: 700;
}

.search-box button:hover,
.hero-search-form button:hover,
.pdf-search-form button:hover {
  background: var(--enw-header, #4338ca);
}

/* ── 4.8 The legacy search box is a BLOCK, not a hero row ──────────────────
 *
 * style.css's shared rule gives all three names to `display:flex` — correct for
 * `.hero-search-form` and `.pdf-search-form`, whose only children are an input
 * and a button, which is a row. `.search-box` is the other shape: on
 * famous.php and recently_added.php it wraps a heading, a sentence, a form and
 * the Amazon mark, i.e. four BLOCKS that mean to stack. Laid out as a row they
 * sit side by side and run off the card: measured in Chrome at 390px on
 * 23 Sep 2026, the mark's right edge was 478px inside a 355px box in a 390px
 * viewport, so most of it was pushed out of the card and clipped — on the two
 * pages whose search box a reader scrolls to last.
 *
 * So the box is a column here and the form inside it is the row. Nothing about
 * the hero forms changes: this rule names `.search-box` only, which no hero uses.
 */
.search-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--enw-sp-3, 0.75rem);
  /* NOT the pill radius the rule above sets. A pill is the right shape for a
     field one row tall; this box is a titled block nearly 200px deep, and a
     999px radius on it draws a stadium with the sentence and the mark sitting
     outside the white. A block radius is what the other cards on the page use. */
  border-radius: var(--enw-r-lg, 14px);
}

/* The form is the field: input, then button, sharing one hairline. */
.search-box form {
  background: var(--enw-surface, #ffffff);
  border: 1px solid var(--enw-border, #e5e7eb);
  border-radius: var(--enw-r-pill);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.search-box form input {
  border: 0;
}

/* The mark keeps its own size. `stretch` on the column would otherwise widen the
   Amazon logo to the full width of the card — verified in Chrome: 126px became
   353px, which is a worse page than the clipping it replaced. */
.search-box img {
  max-inline-size: 100%;
  height: auto;
  align-self: flex-start;
}


/* ── 4.9 A control is a key, not a rectangle ──────────────────────────────
 *
 * WHY THIS EXISTS
 *
 * The site is flat by rule, and the rule is about smudges: a shadow with an
 * offset or a blur paints outside its own box, and three of them in a row read
 * as grime rather than as depth. tools/enw_shadow_sweep.php enforces exactly
 * that and explains itself ("a shadow that spreads beyond its box … goes").
 *
 * Flatness carried that far has a cost the reader feels without being able to
 * name it: the Buy button was a coloured rectangle, and nothing on a book page
 * looked pressable. So this is the other half of the same rule — a control may
 * have depth, provided it paints that depth INSIDE itself:
 *
 *   face   a 180° gradient, lit at the top and shaded at the bottom. It is
 *          paint, so it casts nothing and the sweep has nothing to remove.
 *   edge   a 2px bottom border in a darker mix of the control's own colour —
 *          the part of a key that meets the surface.
 *   lip    one inset highlight along the top, which is the light catching it.
 *          The sweep keeps inset highlights on purpose and removes only *dark*
 *          insets, so this is the sanctioned way to draw depth rather than a
 *          way round the check.
 *
 * Pressed, the key travels down by its own edge and the edge brightens to the
 * face colour — what a physical key does. Two pixels, and no transition on the
 * travel: a control that animates on tap answers late.
 *
 * `--enw-key-face` is declared per family so every control keeps the colour it
 * already had — the buy button is brand, a card button is accent.
 *
 * The mixes that light and shade that face are written out in the same rule, and
 * that is load-bearing rather than untidy: a custom property's `var()`s are
 * substituted where it is declared. Put them on `:root` and they resolve against
 * the `:root` value of the face, so a component that overrides the face gets lit
 * edges in the wrong colour. Measured on the live book page before this was
 * changed: face #2F6FED with shading mixed from the #16A394 fallback.
 *
 * The AMP tree does not load this file — its pages carry their own `style` block
 * — so the same recipe is written there by `_amp_helpers.php`, and a test holds
 * the two in step.
 *
 * This block sits after §4.4, §4.5 and §4.7 on purpose: those set a plain
 * `background` on these same selectors, and at equal specificity the later rule
 * wins. Moving it earlier in the file would silently switch the depth off. */
.bd-btn-buy,
.book-card-btn,
.btn-primary,
.btn-buy-gradient,
.hero-search-form button,
.pdf-search-form button,
.contact-form button {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--enw-key-face) 86%, white) 0%,
    var(--enw-key-face) 58%,
    color-mix(in oklab, var(--enw-key-face) 82%, black) 100%);
  border-bottom: 2px solid color-mix(in oklab, var(--enw-key-face) 70%, black);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 34%, transparent);
}

/* The families that are not the accent. */
.bd-btn-buy {
  --enw-key-face: var(--enw-primary, #1a7a45);
}

.btn-buy-gradient,
.contact-form button,
.hero-search-form button,
.pdf-search-form button {
  --enw-key-face: var(--enw-primary, #4f46e5);
}

.bd-btn-buy:hover,
.book-card-btn:hover,
.btn-primary:hover,
.btn-buy-gradient:hover,
.hero-search-form button:hover,
.pdf-search-form button:hover,
.contact-form button:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--enw-key-face) 76%, white) 0%,
    color-mix(in oklab, var(--enw-key-face) 94%, black) 100%);
}

/* Down and in: the edge vanishes under the face, which is what a pressed key
   looks like. `transform` rather than a shadow, so the travel is the button and
   not a smudge under it. */
.bd-btn-buy:active,
.book-card-btn:active,
.btn-primary:active,
.btn-buy-gradient:active,
.hero-search-form button:active,
.pdf-search-form button:active,
.contact-form button:active {
  background: color-mix(in oklab, var(--enw-key-face) 82%, black);
  border-bottom-color: color-mix(in oklab, var(--enw-key-face) 82%, black);
  box-shadow: none;
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .bd-btn-buy:active,
  .book-card-btn:active,
  .btn-primary:active,
  .btn-buy-gradient:active,
  .hero-search-form button:active,
  .pdf-search-form button:active,
  .contact-form button:active {
    transform: none;
  }
}


/* ===========================================================================
 * 5. Icons that were emoji
 *
 * The site used emoji as icons (`📄`, `📞`, `💬`, `🛒`) in buttons and badges
 * across fifteen pages. An emoji is drawn by whatever emoji font the visitor's
 * system has, and these spans inherit the body font — DM Sans, which has no
 * emoji glyphs. On a machine with a complete colour-emoji font they render; on
 * one without, the browser falls back to a monochrome symbol font, and a
 * monochrome glyph inheriting `color:#fff` on a light button is invisible. That
 * is a missing icon with nothing missing from the page.
 *
 * Naming the emoji fonts explicitly makes all of them render as colour emoji
 * everywhere, and costs one line per icon. Icons that the shell already draws
 * from its sprite (see nav.php) are used directly instead, and never rely on a
 * font at all.
 * ======================================================================== */

.ico-uni {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;
  font-style: normal;
  font-variant-emoji: emoji;
  line-height: 1;
}

/* The shell's own sprite icon, wherever a page needs one outside the nav. */
.enw-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===========================================================================
 * 6. AdSense safety — the one section that is not about colour
 *
 * The PDF pages carry AdSense auto ads. Auto ads place themselves: Google
 * decides where to insert them, and it does so after the page has loaded. Three
 * things follow, and all three are rules rather than intentions:
 *
 * The one thing this section must survive is §4: it styles cards, grids and
 * headings with unlayered rules, and an ad can sit inside any of those. Every
 * rule below therefore uses `!important` — not as a habit but as the guarantee
 * that restyling a page can never hide, clip or shrink an ad.
 *
 *   · An ad is never hidden and never clipped. `.adsbygoogle` and the ins
 *     element it lives in are explicitly visible and unclipped, so nothing else
 *     in this file — or in enw.css — can accidentally collapse one.
 *   · An ad is never given a fixed height by us. Reserving space for an auto ad
 *     means guessing its size; guess wrong and the page jumps when it fills,
 *     which is the layout shift this site's rebuild was meant to remove. Google's
 *     own snippet handles its own sizing.
 *   · No `contain`, `content-visibility` or transform is applied to an ad's
 *     ancestors by this file, because containment changes how a cross-origin
 *     iframe sizes itself.
 * ======================================================================== */

ins.adsbygoogle,
.adsbygoogle {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin-inline: auto;
}

/* An ad's iframe must be allowed its own width; the legacy sheet constrains
   every image inside a card. */
ins.adsbygoogle iframe,
.adsbygoogle iframe {
  display: block !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* Never let a container that holds an ad hide its overflow — the "sticky
   sidebar ad" and the in-article ad both extend past the column on small
   screens by design. */
body > ins.adsbygoogle,
article ins.adsbygoogle,
.enw-prose ins.adsbygoogle {
  overflow: visible !important;
}

/*! assets/css/enw-clay.css · 09a59713c07b · 5577 B · the clay surface treatment */
/* ===========================================================================
   enw-clay.css — claymorphism layer.

   Loaded last of the shared sheets by h2.php, so it overrides the look of
   surfaces and controls only. It sets no width, padding or font, and every
   colour comes from an existing --enw-* token.

   The shadows are declared ONCE as custom properties, because they are used by
   eight different selectors and in two theme modes. Repeating the literals was
   how the dark rules drifted out of step with the light ones; now a theme is
   one override block, not four selector lists that have to stay identical.

   Selector scope is what a reader actually sees, chosen by counting elements in
   the rendered DOM: .book-card (54 on the homepage) and .cat-pill (102) rather
   than only the design system's own .enw-card, which the catalogue never uses.

   To remove the style, delete the one <link> in h2.php.
   =========================================================================== */

:root {
  /* Two tiers, by size: a big surface takes a wide soft lip, a pill takes a
     narrow one — the same shadow on both smears on the small control. */
  --clay-card:
    inset -6px -8px 14px rgba(0, 0, 0, 0.06),
    inset 6px 8px 14px rgba(255, 255, 255, 0.85),
    0 12px 24px -10px rgba(31, 82, 196, 0.22);
  --clay-card-sm:
    inset -5px -6px 12px rgba(0, 0, 0, 0.05),
    inset 5px 6px 12px rgba(255, 255, 255, 0.8),
    0 10px 20px -10px rgba(31, 82, 196, 0.2);
  --clay-flat:
    inset -4px -5px 10px rgba(0, 0, 0, 0.05),
    inset 4px 5px 10px rgba(255, 255, 255, 0.8);
  --clay-lip:
    inset -3px -4px 8px rgba(0, 0, 0, 0.05),
    inset 3px 4px 8px rgba(255, 255, 255, 0.9),
    0 6px 12px -8px rgba(31, 82, 196, 0.3);
  --clay-btn:
    inset -4px -5px 10px rgba(0, 0, 0, 0.18),
    inset 4px 5px 10px rgba(255, 255, 255, 0.35),
    0 8px 16px -6px rgba(31, 82, 196, 0.45);
  --clay-btn-hover:
    inset -4px -5px 10px rgba(0, 0, 0, 0.18),
    inset 4px 5px 10px rgba(255, 255, 255, 0.35),
    0 12px 20px -6px rgba(31, 82, 196, 0.5);
  --clay-btn-active:
    inset 3px 4px 8px rgba(0, 0, 0, 0.2),
    0 2px 6px -3px rgba(31, 82, 196, 0.4);
  --clay-btn-pressed: inset 3px 4px 8px rgba(0, 0, 0, 0.1);
}

/* On a dark surface the white highlight becomes a bright rim, so it drops to a
   faint lip and the dark edge deepens. The button shadows are not overridden:
   they sit on a filled primary colour that is coloured the same way in both
   modes. */
:root[data-enw-theme='dark'] {
  --clay-card:
    inset -6px -8px 14px rgba(0, 0, 0, 0.35),
    inset 6px 8px 14px rgba(255, 255, 255, 0.05),
    0 12px 24px -10px rgba(0, 0, 0, 0.5);
  --clay-card-sm: var(--clay-card);
  --clay-lip:
    inset -3px -4px 8px rgba(0, 0, 0, 0.3),
    inset 3px 4px 8px rgba(255, 255, 255, 0.06),
    0 6px 12px -8px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-enw-theme='light']) {
    --clay-card:
      inset -6px -8px 14px rgba(0, 0, 0, 0.35),
      inset 6px 8px 14px rgba(255, 255, 255, 0.05),
      0 12px 24px -10px rgba(0, 0, 0, 0.5);
    --clay-card-sm: var(--clay-card);
    --clay-lip:
      inset -3px -4px 8px rgba(0, 0, 0, 0.3),
      inset 3px 4px 8px rgba(255, 255, 255, 0.06),
      0 6px 12px -8px rgba(0, 0, 0, 0.55);
  }
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */

.enw-card,
.book-card {
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--enw-surface, #fff);
  box-shadow: var(--clay-card);
}

.book-card {
  box-shadow: var(--clay-card-sm);
}

.enw-card--flat {
  box-shadow: var(--clay-flat);
}

/* ── Pill controls: chips, category pills, search bar, bordered icon buttons ── */

.enw-chip,
.enw-search,
.enw-iconbtn:not(.enw-iconbtn--bare),
.enw-btn--ghost,
.enw-btn--tint {
  box-shadow: var(--clay-lip);
}

/* Doubled because enw-catalog.css is a page sheet, so it loads AFTER this file
   and resets `.cat-pill { box-shadow: none }` — equally specific, therefore
   winning on order. The repeat out-specifies it without !important. Hover is
   restated because the catalogue zeroes the shadow there too. */
.cat-pill.cat-pill,
.cat-pill.cat-pill:hover {
  box-shadow: var(--clay-lip);
}

/* A 38px square: a corner soft enough to look moulded, not a pill — a 38px
   pill is a circle and reads as a different control. */
.enw-iconbtn:not(.enw-iconbtn--bare) {
  border-radius: 14px;
}

/* .enw-search:focus-within carries its own ring upstream and is more specific
   than the rule above, so the ring still wins while the reader is typing. */

/* ── Buttons ───────────────────────────────────────────────────────────── */

.enw-btn {
  box-shadow: var(--clay-btn);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.enw-btn:hover {
  box-shadow: var(--clay-btn-hover);
  transform: translateY(-1px);
}

.enw-btn:active {
  transform: translateY(1px);
  box-shadow: var(--clay-btn-active);
}

.enw-btn--ghost:active,
.enw-btn--tint:active {
  box-shadow: var(--clay-btn-pressed);
}

.enw-btn[disabled],
.enw-btn[aria-disabled='true'] {
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .enw-btn,
  .enw-btn:hover,
  .enw-btn:active {
    transition: none;
    transform: none;
  }
}

/*! assets/css/enw-catalog.css · 16d809536a69 · 31545 B · catalogue widths and rows; the tail has to beat these */
/*!
 * enw-catalog.css — the catalogue surfaces the design system never grew a
 * component for.
 *
 * Loaded LAST, and only by the pages that still carry the markup it names:
 *
 *   index.php          the home page      .stats-strip / .cat-pills / .search-tags
 *                                          / .contact-grid / .pdf-hero / .feature-banner
 *   ebooks/index.php   a PDF topic page   .pdf-link-list / .book-list
 *   addbook/index.php  the add-a-book page .wrap / .sidebar / .scard / .field
 *   authors.php        an author page      .results-meta
 *   publishers.php     a publisher page    .results-meta
 *   book_detail.php    a book page         §10 only — its radii (§10 explains
 *                                          why the rest of that page is not here)
 *
 * It is wired in through `$ebnExtraCss` (see h2.php), so it lands after the four
 * shared sheets and a page that does not set it does not download it.
 *
 * WHY IT EXISTS
 *
 * `enw-legacy.css` migrated the legacy catalogue to the design system — the book
 * card, the section heading, the shelf grid, the price. It did not migrate
 * everything, and what it left behind is the part that has no counterpart in the
 * design system at all: the statistics strip, the category pill wall, the
 * recent-search chips, the contact cards, the two dark bands, and the entirely
 * separate component sets that `ebooks/index.php` and `addbook/index.php` were
 * written with. Those still paint themselves out of `style.css`, which means
 * they follow the palette but not the design system: five different gradient
 * treatments for one row of numbers, a pill wall that wraps to a ragged edge,
 * and radii on four different scales.
 *
 * THE RULES THIS FILE FOLLOWS
 *
 *   · nothing invents a colour — every value is a palette token, which is what
 *     makes all nine themes work here too;
 *   · nothing hard-codes a size the scales already define — spacing is
 *     `--enw-sp-*`, radii are `--enw-r-*`, type is `--enw-fs-*`;
 *   · every rule is scoped to a component these pages own, so no migrated page
 *     changes appearance because this file exists;
 *   · the flat surfaces stay flat: the design system sets every `--enw-shadow-*`
 *     to `0 0 #0000` on purpose, and a card here does not reintroduce one.
 *
 * MEASURED, AT 1440×900 ON THE LIVE PAGE (palette `Rose`), before this file:
 *
 *   .stats-strip        5 × .stat-num, each with its OWN gradient — gold→red,
 *                       primary→danger, accent→muted, danger→accent,
 *                       muted→primary — four roles mixed into five unrelated
 *                       pairs, and each number painted with
 *                       `-webkit-text-fill-color: transparent` so the ink token
 *                       was replaced by a background-clip.
 *   .cat-pills          1381 × 937px: 102 chips in a wrapping flex row, 163px
 *                       wide and every width different, so the right edge of
 *                       every row was ragged.
 *   .search-tags        20 chips, same wrap, same ragged edge.
 *   .contact-card       radius 18px — not on the scale (6/10/14/20/28/999).
 *   .pdf-search-form    `box-shadow: 0 0 0 4px #d4a0174d` — a hard-coded gold
 *                       ring, the one colour in the hero that ignores the palette.
 *
 * AND ONE THING THE PAGES THEMSELVES GET WRONG
 *
 * The shipped HTML still carries inline `style="color:var(--accent)"` (5 ×),
 * `var(--muted2)` (2 ×), `var(--muted)` and `var(--green)`. **Not one of those
 * four properties is defined anywhere in the four shared sheets** — the
 * declarations are invalid at computed-value time and the colour falls back to
 * whatever it would have inherited. §9 defines them as aliases of the palette
 * roles they were standing in for, which repairs every one of those inline
 * styles without editing four templates to fix four names.
 */

/* ===========================================================================
   1. The statistics strip — one treatment, not five
   ===========================================================================

   `.stats-strip` is a five-cell band under the home hero: a number and a label
   per cell, separated by hairlines. It is the most-read row on the page and the
   least consistent thing on it: five `.stat-num` gradients built from four
   different role tokens, in five arbitrary pairings, none of which relates to
   what the cell means (`5M+ books` and `500+ categories` were different
   colours for no reason a reader can see).

   The design system's answer is already written down: a number is bold text with
   tabular figures (`.enw-price` makes the same argument for a price). So the
   number takes the ink token, the label takes the muted one, and the only
   ornament left is the hairline between cells. */

.stats-strip {
  display: grid;
  /* Every grid in this file uses `minmax(min(<floor>, 100%), 1fr)`, not
     `minmax(<floor>, 1fr)`. A bare floor is a track that CANNOT shrink: below
     it the grid overflows its container instead of collapsing to one column, and
     with `body { overflow-x: clip }` the excess is clipped away rather than
     scrolled to — so a 320px floor inside a 300px phone silently loses 20px of
     the card. `min()` against 100% lets the track give way at the last step and
     changes nothing at any width above the floor. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0;
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  overflow: hidden;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--enw-sp-1, 0.25rem);
  min-inline-size: 0;
  padding: var(--enw-sp-5, 1.25rem) var(--enw-sp-4, 1rem);
  /* The separators are drawn as inset shadows rather than a border on each cell,
     so the cell that lands at the end of a row does not carry a trailing rule
     into the next one when the grid wraps to two rows on a narrow screen. */
  box-shadow: inset 1px 0 0 var(--enw-border, #e3e8ef);
}

.stat-item:first-child {
  box-shadow: none;
}

.stat-num {
  /* style.css paints these with `-webkit-text-fill-color: transparent` and a
     `background-clip: text` gradient, per-child. Both go, along with every
     gradient, so the number is ink again. */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight, 1.15);
  text-align: center;
}

/* The one cell that was given its own class to be a different colour gets the
   accent — the same "this one is the other thing" signal, from a token. */
.stat-num.blue {
  color: var(--enw-accent-ink, #117a6f);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.stat-label {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  letter-spacing: 0.02em;
  line-height: var(--enw-lh-snug, 1.35);
  text-align: center;
}

@media (max-width: 640px) {
  .stat-item {
    box-shadow: inset 0 1px 0 var(--enw-border, #e3e8ef);
  }

  .stat-item:nth-child(-n + 2) {
    box-shadow: none;
  }

  .stat-item:nth-child(odd) {
    box-shadow: inset 1px 0 0 var(--enw-border, #e3e8ef);
  }
}

/* ===========================================================================
   2. The category pills — aligned columns instead of a ragged wall
   ===========================================================================

   102 chips in one wrapping flex row is a wall; wrapping a wall only makes it a
   *ragged* wall, because a flex row sizes each chip to its own text and the last
   chip in every row ends somewhere different from the one above it. Measured:
   1381 × 937px, every chip a different width between roughly 120 and 220px.

   A grid fixes the alignment without touching the content: the template columns
   decide the width, so every chip in a column is identical and every row ends on
   the same edge. The count is `auto-fill` with a small floor, which keeps the
   chip count per row close to what the flex row produced — this is a tidying
   pass, not a decision to show fewer categories. */

.cat-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--enw-sp-2, 0.5rem);
}

.cat-pill {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  /* One height for every chip in the wall. The old row let each chip grow to
     its own line-height, which is a second source of raggedness inside a row. */
  min-block-size: 2.375rem;
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text-muted, #6b7787);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  font-size: var(--enw-fs-sm, 0.8125rem);
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease),
              border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.cat-pill:hover {
  color: var(--enw-text, #10131a);
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
  box-shadow: none;
}

.cat-pill-icon {
  flex: none;
  font-size: var(--enw-fs-md, 1rem);
  line-height: 1;
}

/* The name is the only part allowed to be long, so it is the only part that
   truncates — the count beside it keeps its own width. */
.cat-pill-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cat-pill-count {
  flex: none;
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  font-variant-numeric: tabular-nums;
}

.cat-pill:hover .cat-pill-count {
  color: inherit;
}

/* ===========================================================================
   3. The recent-search chips — the same shape, the same grid
   =========================================================================== */

.search-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--enw-sp-2, 0.5rem);
}

.search-tag {
  display: flex;
  align-items: center;
  min-block-size: 2.375rem;
  padding: 0 var(--enw-sp-4, 1rem);
  /* A search term is a sentence, not a label: it wraps to two lines inside a
     fixed-height chip rather than being cut off at the ellipsis. The chip grows
     for the two-line case and no further. */
  color: var(--enw-text-muted, #6b7787);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
  line-height: var(--enw-lh-snug, 1.35);
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease),
              border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.search-tag:hover {
  color: var(--enw-text, #10131a);
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
}

/* ===========================================================================
   4. The contact cards — on the design system's card, and on its radius scale
   ===========================================================================

   Two cards side by side. `style.css` drew them at 18px, which is not a step on
   the scale the rest of the site uses (6 / 10 / 14 / 20 / 28 / 999), so the one
   page with a contact block had the one radius nothing else had. They are cards,
   so they take the card token. */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--enw-sp-5, 1.25rem);
}

.contact-card,
.contact-info,
.contact-form-wrap {
  padding: var(--enw-sp-6, 1.5rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  box-shadow: none;
}

.contact-card h3,
.contact-info h3,
.contact-form-wrap h3 {
  margin: 0 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contact-card p,
.contact-info p {
  margin: 0 0 var(--enw-sp-2, 0.5rem);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-body, 1.6);
}

.contact-card p strong,
.contact-info p strong {
  color: var(--enw-text, #10131a);
}

/* ===========================================================================
   5. The two dark bands — same geometry, palette-only colour
   ===========================================================================
 *
 * `.pdf-hero` (the Free PDF search band) and `.feature-banner` (the "The
 * World's Books, One Search Away" band) are both full-bleed dark blocks with a
 * centred search box or button pair. Their backgrounds already follow the header
 * tokens, so they recolour with the palette; what does not is the focus ring on
 * the PDF search box — `box-shadow: 0 0 0 4px #d4a0174d`, a hard-coded gold that
 * is the only palette-independent colour left on the home page.
 *
 * The ring is also doubled up with the border, so the box reads as a box inside
 * a box. It becomes a single hairline in the border token plus a primary ring on
 * focus, which is the same treatment every other field on the site gets. */

.pdf-search-form {
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-lg, 20px);
  box-shadow: none;
}

.pdf-search-form:focus-within {
  border-color: var(--enw-primary, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--enw-primary, #2f6fed) 32%, transparent);
}

.pdf-search-form button {
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent, #10131a);
  border-radius: 0 var(--enw-r-lg, 20px) var(--enw-r-lg, 20px) 0;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-search-form button:hover {
  background: color-mix(in oklab, var(--enw-accent, #16a394) 85%, var(--enw-text, #10131a));
}

/* Both bands are promoted to the same two-step radius and the same vertical
   rhythm as a `.section`, so the home page stops changing measure every 400px. */
.pdf-hero {
  border-radius: 0;
  padding: var(--enw-sp-12, 3rem) var(--enw-sp-6, 1.5rem) var(--enw-sp-10, 2.5rem);
}

.feature-banner {
  border-radius: 0;
  padding: var(--enw-sp-12, 3rem) var(--enw-sp-6, 1.5rem);
}

/* ===========================================================================
   6. The ebooks topic page — the PDF download list
   ===========================================================================

   Ninety-nine rows: a PDF glyph, a title with a topic line under it, and an
   "Open PDF" button pushed to the right edge. It is the densest list on the
   site and it had no rules beyond `style.css`, so each row sized itself, the
   button never lined up between rows, and there was no separator to follow.

   The rows become one surface with hairline dividers, a fixed geometry for the
   icon and the button, and the button on the token scale. */

.pdf-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  overflow: hidden;
}

.pdf-link-item {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-4, 1rem);
  padding: var(--enw-sp-3, 0.75rem) var(--enw-sp-4, 1rem);
  box-shadow: inset 0 1px 0 var(--enw-border, #e3e8ef);
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-link-item:first-child {
  box-shadow: none;
}

.pdf-link-item:hover {
  background: var(--enw-surface-2, #eaf1ff);
}

.pdf-link-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--enw-danger, #e0463e);
  background: var(--enw-danger-tint, #fcebea);
  border-radius: var(--enw-r-sm, 10px);
}

.pdf-link-icon .ico {
  inline-size: 1rem;
  block-size: 1rem;
}

.pdf-link-info {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.pdf-link-title {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
  line-height: var(--enw-lh-snug, 1.35);
  /* One line. The full string is still in the element's `title`, which is where
     a 140-character filename belongs — not in the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-link-topic {
  margin-block-start: var(--enw-sp-1, 0.25rem);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-open-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  /* The same floor the rest of the site's small buttons use, so the button
     column lines up from the first row to the last. */
  min-block-size: 2.25rem;
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-sm, 10px);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-open-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

.pdf-open-btn .ico {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}

@media (max-width: 640px) {
  .pdf-link-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pdf-link-info {
    flex-basis: calc(100% - 2.25rem - var(--enw-sp-4, 1rem));
  }

  .pdf-open-btn {
    margin-inline-start: calc(2.25rem + var(--enw-sp-4, 1rem));
  }
}

/* ===========================================================================
   7. The ebooks topic page — the book list
   ===========================================================================

   Thirty-two books below the PDFs: a 64×96 thumbnail, title, author, publisher,
   price, and a "View book" button. Same story as the PDF list — no rules beyond
   `style.css`, so nothing lined up.

   The thumbnail keeps its 64×96 ratio; it is a list, not a card. */

.book-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--enw-sp-3, 0.75rem);
}

.book-item {
  display: flex;
  align-items: flex-start;
  gap: var(--enw-sp-4, 1rem);
  padding: var(--enw-sp-4, 1rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  transition: border-color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.book-item:hover {
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
}

.book-item .book-cover {
  flex: none;
  inline-size: 4rem;
  block-size: 6rem;
  overflow: hidden;
  background: var(--enw-bg, #f4f6fa);
  border-radius: var(--enw-r-sm, 10px);
}

.book-item .book-cover img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.book-item .book-info {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--enw-sp-1, 0.25rem);
}

.book-item .book-title {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 700;
  line-height: var(--enw-lh-snug, 1.35);
  /* Two lines, then ellipsis — the same clamp the book card uses, so a list row
     and a shelf card cannot disagree about how much of a title fits. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-item .book-title a {
  color: inherit;
  text-decoration: none;
}

.book-item .book-title a:hover {
  text-decoration: underline;
}

.book-item .book-author,
.book-item .book-publisher {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-item .book-author a,
.book-item .book-publisher a {
  color: var(--enw-ink, #2f6fed);
  text-decoration: none;
}

.book-item .book-author a:hover,
.book-item .book-publisher a:hover {
  text-decoration: underline;
}

/* The price is bold tabular text, not a chip — the same call `.book-card-price`
   makes, so a price looks the same wherever it is printed. */
.book-item .book-price {
  margin-block-start: var(--enw-sp-1, 0.25rem);
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-md, 1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.book-item .book-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  margin-block-start: var(--enw-sp-2, 0.5rem);
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-sm, 10px);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.book-item .book-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

/* ===========================================================================
   8. The add-a-book page — its own layout, put on the same scales
   ===========================================================================

   `addbook/index.php` was written as a standalone page: a `.wrap` holding a
   `.sidebar` beside the content, `.scard` panels, a numbered `.step-row`, and a
   `.field` form. It sets its own `$ebnExtraCss` (enw-codes.css) and shares none
   of the catalogue classes, so nothing in `enw-legacy.css` reaches it.

   What it needs is not a new design — it is the design system's own values for
   the things it already has: a card, a numbered step, a field, a submit button. */

.wrap {
  max-inline-size: var(--enw-container, 1440px);
  margin-inline: auto;
  padding: var(--enw-sp-6, 1.5rem) clamp(0.75rem, 3vw, 1.5rem) var(--enw-sp-16, 4rem);
}

.sidebar {
  padding: var(--enw-sp-5, 1.25rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
}

.scard {
  padding: var(--enw-sp-5, 1.25rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  box-shadow: none;
}

.scard h3 {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  margin: 0 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The success variant is the same panel with the accent role, which is how the
   design system says "this one went well" everywhere else. */
.scard--success {
  border-color: color-mix(in oklab, var(--enw-accent, #16a394) 40%, var(--enw-border, #e3e8ef));
  background: linear-gradient(180deg, var(--enw-accent-tint, #e4f7f4), var(--enw-surface, #fff) 62%);
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: var(--enw-sp-3, 0.75rem);
  margin-block-start: var(--enw-sp-3, 0.75rem);
}

.snum {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-pill, 999px);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
}

.stext {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-body, 1.6);
}

.stext em {
  color: var(--enw-text, #10131a);
  font-style: normal;
  font-weight: 600;
}

/* The form. `.field`, `.field-hint` and `.submit-btn` had no rule in any sheet,
   so the labels, the inputs and the hint text were all browser defaults sitting
   inside a styled card. */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--enw-sp-2, 0.5rem);
  margin-block-end: var(--enw-sp-5, 1.25rem);
}

.field label {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
}

.field input[type='text'],
.field input[type='email'],
.field textarea,
.field select {
  inline-size: 100%;
  padding: var(--enw-sp-3, 0.75rem) var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  background: var(--enw-bg, #f4f6fa);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm, 10px);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-snug, 1.35);
  transition: border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.field textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--enw-surface, #fff);
  border-color: var(--enw-primary, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--enw-primary, #2f6fed) 32%, transparent);
}

.field-hint {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  line-height: var(--enw-lh-body, 1.6);
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0 var(--enw-sp-6, 1.5rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border: 0;
  border-radius: var(--enw-r-sm, 10px);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-base, 0.9375rem);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.submit-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

/* ===========================================================================
   9. Two repairs to the pages' own inline styles
   ===========================================================================
 *
 * The shipped HTML carries inline `style="color:var(--accent)"` (5 ×),
 * `var(--muted2)` (2 ×), `var(--muted)` and `var(--green)`. None of those four
 * properties is defined in any sheet the site loads, so each declaration is
 * invalid at computed-value time and the colour silently falls back to the
 * inherited one. Defining them here — as the palette roles they were standing in
 * for — repairs all nine inline styles without editing a template.
 *
 * They are scoped to the pages this sheet loads on, and none of the four names
 * is referenced by any other stylesheet, so nothing else can be affected. */

:root {
  --accent: var(--enw-accent);
  --green: var(--enw-accent);
  --muted: var(--enw-text-muted);
  --muted2: var(--enw-text-muted);
}

/* `.results-meta` — the "N books" line above a catalogue grid on the author and
   publisher pages. It had a rule in `enw-legacy.css`, but at the `style.css`
   size, which is the smaller of the two the site uses for the same sentence. */
.results-meta {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   10. The book page — its radii, on the scale
   ===========================================================================
 *
 * `book_detail.php` is the largest un-migrated page on the site: its own `.bd-*`
 * component set is still drawn by `style.css`, and the design system reaches it
 * only through the bridge and a handful of appended fixes in `enw.css` (the
 * breadcrumb, the related-books header, three contrast repairs). Migrating the
 * whole set is a page-sized job of its own and is deliberately NOT attempted
 * here — this file is scoped to the components it names in its own selectors.
 *
 * What IS worth fixing now is the one property the page has drifted furthest on.
 * The design system defines six radii (`--enw-r-xs/sm/md/lg/xl/pill`):
 *
 *     6px   10px   14px   20px   28px   999px
 *
 * Measured on `/books_detail-1944762094.html`, the page paints TEN different
 * border radii, and six of them are on no step of that scale:
 *
 *     .bd-price-box           18px       →  r-md (14px)
 *     .bd-desc / .bd-reviews / .bd-similar / .bd-specs / .bd-cover-link
 *                             16px       →  r-md (14px)
 *     .bd-sim-card            12px       →  r-md (14px)
 *     .bd-social-btn / .bd-qr-btn
 *                              9px       →  r-sm (10px)
 *     .bd-spec-mono            8px       →  r-xs  (6px)
 *     .bd-wishlist-btn / .bd-login-toggle-btn
 *                            100px       →  r-pill (999px)
 *
 * So the book page's panels were all 2px rounder than the design system's card,
 * and its two pill buttons were 100px where every other pill on the site is
 * 999px — the same pill, rounded two different ways depending on the page. Both
 * are 2px-and-visible: a 16px panel beside a 14px card reads as a different
 * component rather than a different module.
 *
 * `.bd-pill`, `.bd-meta-chip-value` and `.bd-follow` are left alone: 20px is
 * `--enw-r-lg`, which is already a step on the scale. `.bd-breadcrumb` is left
 * alone too — `enw.css` has already stripped it back to a plain text trail, so
 * its radius is no longer painted. */

.bd-price-box,
.bd-desc,
.bd-reviews,
.bd-similar,
.bd-specs,
.bd-cover-link {
  border-radius: var(--enw-r-md, 14px);
}

/* The related-books card needs one more class of specificity than the rest of
   this list, and the reason is worth writing down: `book_detail.php` carries its
   OWN `<style id="bd-pro-css">` block — 30 rules, 8,098 bytes, emitted into the
   body *after* this file's `<link>`. For `.bd-sim-card` that block sets the same
   property at the same specificity (one class), so document order decides it and
   the page's own rule wins. Two classes settle it without `!important`.

   (That block is the bigger finding, and it is a separate pass: it paints 24
   hard-coded colours — including eight copies of `#E11D48`, which is the Rose
   palette's `--enw-primary` written out as a literal — so the book page does not
   actually follow the reader's palette. Replacing those literals with the tokens
   they were copied from is not something to bundle into a radii rule.) */
.bd-sim-grid .bd-sim-card,
.bd-sim-shelf .bd-sim-card {
  border-radius: var(--enw-r-md, 14px);
}

.bd-social-btn,
.bd-qr-btn {
  border-radius: var(--enw-r-sm, 10px);
}

.bd-spec-mono {
  border-radius: var(--enw-r-xs, 6px);
}

.bd-wishlist-btn,
.bd-login-toggle-btn {
  border-radius: var(--enw-r-pill, 999px);
}