/* Navigation components */
/* Header */
.ds-header{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--border-subtle)}
.ds-header--sticky{position:sticky;top:0;z-index:50}
.ds-header__inner{display:flex;align-items:center;gap:20px;height:var(--header-h);padding:0 var(--page-pad-lg);max-width:var(--container-max);margin:0 auto}
.ds-header__brand{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-display);font-weight:var(--fw-black);font-size:22px;letter-spacing:-.01em;color:var(--brand);text-decoration:none}
.ds-header__logo{height:44px;width:auto;display:block}
.ds-header__brand-sub{font-family:var(--font-ui);font-weight:var(--fw-black);font-size:12px;letter-spacing:.14em}
.ds-header__nav{display:flex;gap:22px;margin-left:8px}
.ds-header__navlink{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:15px;color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:border-color var(--dur-fast) var(--ease-standard)}
.ds-header__navlink:hover,.ds-header__navlink.is-active{border-color:var(--accent)}
.ds-header__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.ds-header__cta{white-space:nowrap}
.ds-header__menu{display:none}
.ds-header__mascot{width:60px;height:42px;flex:none}
@media(max-width:860px){.ds-header__nav{display:none}.ds-header__menu{display:inline-flex}.ds-header__inner{padding:0 var(--page-pad)}.ds-footer__inner{padding:40px var(--page-pad)}}

/* Sidebar nav */
.ds-sidenav{display:flex;flex-direction:column}
.ds-sidenav__row{display:flex;align-items:center;gap:12px;padding:14px 4px;text-decoration:none;color:var(--ink);border-top:1px dotted var(--border-dotted)}
.ds-sidenav__row:first-child{border-top:0}
.ds-sidenav__ic{display:inline-flex;color:var(--ink)}
.ds-sidenav__text{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.ds-sidenav__label{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:15px;transition:color var(--dur-fast) var(--ease-standard)}
.ds-sidenav__desc{font-family:var(--font-body);font-size:11px;color:var(--text-tertiary)}
.ds-sidenav__arrow{color:var(--cool-500);transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast)}
.ds-sidenav__row:hover .ds-sidenav__arrow{transform:translateX(3px);color:var(--ink)}
.ds-sidenav__row:hover .ds-sidenav__label{color:var(--text-link-hover)}
.ds-sidenav__row.is-active .ds-sidenav__label{color:var(--coral-600)}

/* Tag filter panel */
.ds-filter{display:flex;flex-direction:column;gap:16px;background:var(--surface);border-radius:var(--radius-panel);padding:24px}
.ds-filter__title{font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:var(--ls-tight);font-size:16px;color:var(--ink)}
.ds-filter__group{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start}
.ds-filter__label{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:13px;color:var(--ink);padding-top:5px}
.ds-filter__colon{color:var(--cool-500)}
.ds-filter__tags{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:600px){.ds-filter__group{grid-template-columns:1fr;gap:8px}}

/* Footer */
.ds-footer{background:var(--cool-100);border-top:1px solid var(--border-subtle)}
.ds-footer__inner{max-width:var(--container-max);margin:0 auto;padding:48px var(--page-pad-lg);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ds-footer__tagline{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:16px;color:var(--ink)}
.ds-footer__brand{font-family:var(--font-display);font-weight:var(--fw-black);font-size:26px;color:var(--brand);display:inline-flex;align-items:center;gap:3px}
.ds-footer__logo-img{height:40px;width:auto;display:block}
.ds-footer__brand-sub{font-family:var(--font-ui);font-weight:var(--fw-black);font-size:13px;letter-spacing:.14em}
.ds-footer__desc{font-family:var(--font-body);font-size:12.5px;line-height:1.9;color:var(--text-secondary);max-width:640px}
.ds-footer__nav{display:flex;flex-wrap:wrap;gap:18px}
.ds-footer__nav a{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:14px;color:var(--ink);text-decoration:none}
.ds-footer__nav a:hover{color:var(--text-link-hover)}
.ds-footer__legal{display:flex;flex-wrap:wrap;gap:14px}
.ds-footer__legal a{font-family:var(--font-ui);font-size:11.5px;color:var(--text-tertiary);text-decoration:none}
.ds-footer__legal a:hover{text-decoration:underline;color:var(--ink)}
.ds-footer__lockups{display:flex;align-items:center;gap:20px;margin-top:4px}
.ds-footer__logo{font-family:var(--font-display);font-weight:var(--fw-black);font-size:20px;color:var(--doda-navy)}
.ds-footer__logo--muted{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:13px;color:var(--cool-600)}
.ds-footer__copy{font-family:var(--font-ui);font-size:11px;color:var(--text-tertiary)}

/* Mobile drawer menu */
.ds-drawer{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.45);animation:ds-drawer-fade .2s ease}
.ds-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86%);background:var(--surface);display:flex;flex-direction:column;gap:16px;padding:16px 20px 24px;box-shadow:-12px 0 40px rgba(20,30,60,.25);animation:ds-drawer-slide .25s var(--ease-out)}
@keyframes ds-drawer-fade{from{opacity:0}}
@keyframes ds-drawer-slide{from{transform:translateX(48px);opacity:0}}
.ds-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px dotted var(--border-dotted)}
.ds-drawer__close{border:0;background:var(--cool-100);width:36px;height:36px;border-radius:50%;font:700 18px/1 var(--font-ui);color:var(--ink);cursor:pointer;flex:none}
.ds-drawer__close:hover{background:var(--cool-200)}
.ds-drawer__nav{display:flex;flex-direction:column}
.ds-drawer__nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 2px;font:700 15px/1.3 var(--font-ui);color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--border-dotted)}
.ds-drawer__nav a.is-active,.ds-drawer__nav a:hover{color:var(--blue-600)}
.ds-drawer__arrow{color:var(--blue-500);font-weight:800}
.ds-drawer__cta{margin-top:auto;display:flex}
