/* WhiteUI shared chrome — THE single place for header, logo, navbar links,
   breadcrumb, footer and spacing (26 Oct 2026).
   Every page links to this file, so editing here changes the whole site.
   Variable fallbacks cover both stylesheets: template pages use --mute/--acc,
   home-style pages use --muted/--primary. Light footer background is #f2f4f8. */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:var(--bg,#fff);border-bottom:1px solid var(--line,#e3e7ee);z-index:5;margin-bottom:28px}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font:800 22px/1 var(--hd,"Bricolage Grotesque",system-ui,sans-serif);letter-spacing:-.02em;text-decoration:none;color:var(--ink,#1b1f2a)}
.logo i{font-style:normal;color:var(--acc,var(--primary,#673DE6))}
.logo span{color:var(--primary,var(--acc,#673DE6))}
.headlinks{display:flex;gap:22px;align-items:center}
.headlinks a{text-decoration:none;font-weight:600;font-size:15px;color:var(--mute,var(--muted,#5d6577))}
.headlinks a:hover{color:var(--ink,#1b1f2a)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mute,var(--muted,#5d6577));margin:0 0 8px}
.crumb a{text-decoration:none;color:var(--mute,var(--muted,#5d6577))}
.crumb a:hover{color:var(--acc,var(--primary,#673DE6));text-decoration:underline}
.crumb span[aria-current="page"]{color:var(--ink,#1b1f2a);font-weight:700}
.crumb .sep{color:var(--line,#e3e7ee)}
footer{border-top:1px solid var(--line,#e3e7ee);padding:26px 0;color:var(--mute,var(--muted,#5d6577));font-size:14px;margin-top:48px;background:var(--mist,#f2f4f8)}
.footgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:24px;margin-bottom:20px}
.footgrid ul{list-style:none;margin:8px 0 0;padding:0}
.footgrid li{margin:6px 0}
.footgrid a{text-decoration:none;color:var(--mute,var(--muted,#5d6577))}
.footgrid a:hover{color:var(--ink,#1b1f2a)}
.footbase{border-top:1px solid var(--line,#e3e7ee);padding-top:16px;margin:0}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr}.headlinks{gap:14px}}
/* list patterns — homepage, category and subcategory pages (26 Oct 2026) */
.sec{margin-top:44px}
.sec>h2{margin-bottom:16px;font-size:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{display:block;background:var(--mist,#f2f4f8);border:1px solid transparent;border-radius:20px;padding:22px;text-decoration:none;color:var(--ink,#1b1f2a);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--acc,var(--primary,#673DE6));transform:translateY(-2px)}
.card h3{font-size:21px}
.card p{margin:6px 0 14px;color:var(--mute,var(--muted,#5d6577));font-size:15px}
.card .count{font-size:14px;font-weight:600;color:var(--acc,var(--primary,#673DE6))}
.rows{border-top:1px solid var(--line,#e3e7ee)}
.row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line,#e3e7ee);text-decoration:none;color:var(--ink,#1b1f2a)}
.row:hover h3{color:var(--acc,var(--primary,#673DE6))}
.row h3{font-size:19px;transition:color .15s}
.row p{margin:2px 0 0;color:var(--mute,var(--muted,#5d6577));font-size:15px}
.row .go{color:var(--mute,var(--muted,#5d6577));font-size:20px}
.row:hover .go{color:var(--acc,var(--primary,#673DE6))}
.card[hidden], .row[hidden], .sec[hidden]{display:none}
/* font-colour hierarchy (26 Oct 2026) — headings ink, body ink, secondary muted, links accent */
h1,h2,h3{color:var(--ink,#1b1f2a)}
.lede,.lead{color:var(--mute,var(--muted,#5d6577))}
.prose p,.prose li{color:var(--ink,#1b1f2a)}
.prose a{color:var(--acc,var(--primary,#673DE6));text-decoration:underline}
.prose a:hover{text-decoration:underline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--acc:#9B8CFF;--primary:#9B8CFF}
  :root[data-theme="dark"]{--acc:#9B8CFF;--primary:#9B8CFF}
  :root{--acc:#9B8CFF;--primary:#9B8CFF}
}