/* Shared navigation in the existing paper/ink world; red is the requested accent. */
:root{--route-accent:#bb1b18;--route-cover:#526f9e;--tile-hover:#365f91;--route-ease:cubic-bezier(.23,1,.32,1);--preview-frame:#526f9e}
.ra-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;min-height:76px;padding:10px clamp(16px,2vw,40px);border-bottom:1px solid var(--rule,#a9b8c9);background:var(--paper,#fafbf9);color:var(--ink,#172b42)}
.ra-brand{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;font:600 38px/1 'Barlow Condensed',Arial,sans-serif;letter-spacing:-.03em;text-decoration:none;color:inherit}
.ra-brand span{color:var(--route-accent)}
.ra-desktop{display:flex;align-items:center;justify-content:flex-end;flex:1;gap:clamp(12px,1.3vw,24px);min-width:0}
.ra-desktop a,.ra-language a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none;white-space:nowrap;color:inherit}
.ra-desktop a[aria-current=page],.ra-language a[aria-current=page]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.ra-language{display:flex;gap:10px;flex-shrink:0}
.ra-language a{font-size:12px;min-width:32px;justify-content:center}
.ra-mobile{display:none}
.ra-topbar a:focus-visible,.ra-mobile summary:focus-visible{outline:3px solid var(--route-accent);outline-offset:3px}
.has-topbar .brand-opening{padding-top:0!important}
.has-topbar .skip-link{z-index:110}
.has-topbar [id]{scroll-margin-top:100px}
.category-tile{position:relative;isolation:isolate}
.category-tile-preview{display:none;position:fixed;left:16px;top:100px;z-index:5;pointer-events:none;width:min(var(--preview-size,320px),calc((100dvh - 120px) * var(--preview-ratio,1.33333333)),calc(100vw - 48px));aspect-ratio:var(--preview-ratio,4/3);opacity:0;transform:translateY(8px) rotate(2deg);transition:transform 180ms var(--route-ease),opacity 150ms ease;border:2px solid var(--preview-frame);box-shadow:8px 10px 0 var(--preview-frame);background:var(--ink)}
.category-tile-preview img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
@media(hover:hover) and (pointer:fine){
 .ra-desktop a:hover,.ra-language a:hover{color:var(--route-accent)}
 .category-tile-preview{display:block}
 .category-tile:hover,.category-tile:focus-visible{z-index:6;background:var(--tile-hover);color:var(--paper);border-color:var(--preview-frame)}
 .category-tile.preview-ready:hover .category-tile-preview,.category-tile.preview-ready:focus-visible .category-tile-preview{opacity:1;transform:translateY(0) rotate(2deg)}
 .category-tile:focus-visible .category-tile-preview{transition:none}
}
.route-curtain{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:var(--route-cover);color:var(--paper,#fafbf9);pointer-events:none;transform:translateX(-101%);visibility:hidden;transition:none}
.route-curtain span{font:600 clamp(2rem,7vw,6rem)/1.05 'Barlow Condensed',Arial,sans-serif;max-width:24ch;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.route-leaving .route-curtain{visibility:visible;pointer-events:auto;transform:translateX(0);transition:transform 220ms var(--route-ease)}
.route-covered .route-curtain{visibility:visible;pointer-events:auto;transform:translateX(0);transition:none}
.route-covered.route-revealing .route-curtain{animation:route-reveal 240ms var(--route-ease) both}
@keyframes route-reveal{from{transform:translateX(0)}to{transform:translateX(101%);visibility:hidden}}
@media(max-width:1150px){
 .ra-topbar{min-height:68px;gap:18px}
 .ra-desktop{display:none}
 .ra-mobile{display:block;margin-left:auto}
 .ra-mobile summary{display:list-item;align-content:center;min-height:44px;cursor:pointer;font-size:15px;padding:0 8px}
 .ra-mobile>nav{position:absolute;right:16px;top:calc(100% + 1px);display:grid;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 96px);overflow:auto;background:var(--paper);border:1px solid var(--rule);padding:12px 20px;box-shadow:0 12px 24px #0a162828}
 .ra-mobile:not([open])>nav{display:none}
 .ra-mobile nav a{display:flex;align-items:center;min-height:44px;padding-block:8px;font-size:17px;text-decoration:none;border-bottom:1px solid var(--rule);color:var(--ink)}
 .ra-mobile nav a:last-child{border:0}
 .ra-brand{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
 .category-tile-preview{transition:none;transform:translateY(0)!important}
 .route-curtain{display:none}
}
@media(max-width:480px){.ra-topbar{gap:12px}.ra-brand{font-size:30px}.ra-language{gap:2px}.ra-language a{min-width:36px}}
