/* v11: a restrained dot field, consistent Lucide icons and the shop footer. */
.hero-copy { position:relative; isolation:isolate; }
.hero-copy::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle,#2183582e 1px,transparent 1.2px); background-size:16px 16px; mask-image:linear-gradient(0deg,#000,transparent 65%); }
.hero-copy[data-dots-ready="true"]::before { display:none; }
.hero-dot-canvas { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.category strong { display:flex; align-items:center; justify-content:center; gap:7px; }
.category strong>svg { width:20px; height:20px; color:var(--primary); }
.nav-wrap .desktop-nav>a>svg { width:17px; height:17px; color:var(--primary); }
.desktop-menu-toggle>svg:first-child { width:18px; height:18px; color:var(--primary); }
.desktop-menu-toggle[aria-expanded="true"]>svg:first-child { transform:none; }
.journal-topic { display:flex; align-items:center; gap:8px; }
.journal-topic>svg { width:18px; height:18px; color:var(--primary); }
.favorite-button.is-favorite svg { color:var(--primary); }
.favorite-button.is-favorite use { filter:drop-shadow(0 0 2px #21835822); }
.endpaper,.footer-panel { background:var(--ink); }
.endpaper-sheet { background:var(--paper); border-radius:0 0 30px 30px; }
.journal-section { padding-bottom:clamp(44px,6vw,90px); }
.site-footer { padding:0; color:var(--ink); background:#e5f3e9; }
.footer-panel { border-radius:0 0 30px 30px; padding:50px 0; color:#f3faf5; }
.footer-main { display:flex; width:min(var(--content-max),calc(100% - var(--page-gutter) * 2)); margin:auto; align-items:flex-start; justify-content:space-between; gap:32px; padding:0; }
.footer-brand { display:block; flex:0 1 auto; }
.footer-brand a { display:inline-flex; min-height:44px; align-items:center; }
.footer-brand img { width:110px; height:auto; filter:brightness(0) invert(1); }
.footer-brand p { margin:5px 0 0; font-size:12px; color:#cee0d3; }
.footer-links { min-width:0; }
.footer-links h2 { margin:0 0 10px; font-size:15px; font-weight:650; color:#fff; }
.footer-links a,.footer-links button { display:flex; align-items:center; gap:9px; min-height:44px; padding:0; font-size:13px; color:#d7e9dc; }
.footer-links :is(a,button)>svg { width:17px; height:17px; color:#a3c9b2; flex-shrink:0; }
.footer-links .cart-count { background:#d6f1df; color:var(--ink); }
.footer-panel :focus-visible { outline:2px solid #fff; outline-offset:3px; }
.footer-bottom { display:flex; width:min(var(--content-max),calc(100% - var(--page-gutter) * 2)); margin-inline:auto; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border:0; color:var(--ink); }
.footer-bottom>div { display:flex; align-items:baseline; gap:14px; }
.footer-bottom p { margin:0; color:var(--chrome-muted); font-size:11px; }
.footer-bottom a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:12px; color:var(--ink); }
.footer-bottom a>svg { width:16px; height:16px; }
@media (hover:hover) and (pointer:fine) {
  .footer-links :is(a,button):hover { color:white; text-decoration:underline; text-underline-offset:5px; }
}
@media (max-width:1100px) and (min-width:901px) { .nav-wrap .desktop-nav>a>svg { display:none; } }
@media (max-width:900px) {
  /* Carry the mint colophon through the reserved dock and phone safe area. */
  body { padding-bottom:0; }
  .footer-bottom { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width:809px) {
  .footer-panel { padding:42px 0; }
  .footer-main { flex-direction:column; align-items:stretch; gap:32px; }
  .footer-brand img { width:94px; }
  .footer-brand p { margin-top:0; }
  .footer-links { align-items:flex-start; }
  .footer-links h2 { margin-bottom:4px; }
  .footer-bottom { flex-wrap:wrap; }
  .footer-bottom>div { flex-wrap:wrap; gap:0 10px; }
  .footer-bottom p { width:auto; order:0; }
}
@media (max-width:700px) {
  .category strong { gap:5px; }
  .category strong>svg { width:17px; height:17px; }
}
