/* base.css: shared by every page (colours, header, bag drawer, sign-in box, ticker, toast). Page styles live in their own file. */
:root{--ink:#2B3360;--mut:#73768A;--bg:#E7E7E4;--band:#3F4C80;--gh:min(46vh,40vw);--gw:calc(var(--gh)*.75);--e:cubic-bezier(.22,.8,.18,1);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cpath d='M27 15a3 3 0 1 1 3 3v3l12 8q2 1 0 2H12q-2-1 0-2l12-8' fill='none' stroke='%232B3360' stroke-opacity='.09'/%3E%3C/svg%3E");font:400 14px 'Instrument Sans',system-ui,sans-serif;color:var(--ink);}
button{font:inherit;color:inherit}
.fx{transition:filter .6s,opacity .6s,transform .6s}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 28px;z-index:3}
header>*{display:flex}
.nav{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;cursor:pointer;padding:6px 0}
.logo{font:400 30px/.85 Yellowtail,cursive;flex-direction:row;align-items:center;gap:9px;text-decoration:none;color:#142F4E}
.logo .brand-emblem{display:block;width:38px;height:34px;object-fit:contain;flex:0 0 auto;filter:brightness(0) saturate(100%) invert(15%) sepia(29%) saturate(1500%) hue-rotate(174deg) brightness(92%) contrast(95%)}
.r{justify-content:flex-end;align-items:center;gap:22px}
#bag{position:relative;background:none;border:0;cursor:pointer;padding:4px;display:flex}
#cnt{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--ink);color:#fff;font:600 10px/16px 'Instrument Sans',sans-serif;text-align:center}
#bag.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.28)}}
a.nav{text-decoration:none;color:var(--ink)}
a.pill{display:inline-block;text-decoration:none;color:var(--ink)}
/* pages that scroll normally (everything except the rail) */
body.scroll{min-height:100vh}
body.scroll header{background:rgba(231,231,228,.93);backdrop-filter:blur(6px)}
.pill{border:1px solid var(--ink);background:none;border-radius:999px;padding:11px 22px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.pill:hover:not([aria-disabled=true]){background:var(--ink);color:var(--bg)}
.pill:focus-visible,.ar:focus-visible,.sz button:focus-visible,.sws button:focus-visible,.nav:focus-visible,#bag:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tk{position:fixed;left:0;right:0;bottom:0;height:40px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--band);color:#fff;overflow:hidden;display:flex;align-items:center;transition:opacity .5s;z-index:2}
.tr{display:flex;white-space:nowrap;animation:mq 45s linear infinite;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tr span{padding-right:2.2em}
@keyframes mq{to{transform:translateX(-50%)}}
.st{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:3px 9px;font-weight:500}
.st.l{color:#9a3b2b}.st.d{color:var(--mut)}
.dl{font-size:12px}
.dl{margin:0}
#toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.35s;z-index:10;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
.dr{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);box-sizing:border-box;background:var(--bg);box-shadow:-20px 0 40px rgba(43,51,96,.18);z-index:8;transform:translateX(104%);transition:transform .5s var(--e);overflow:auto;padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px))}
.dr{visibility:hidden;box-shadow:none;transition:transform .5s var(--e),visibility 0s .5s,box-shadow .5s}
.dr.on{transform:none;visibility:visible;box-shadow:-20px 0 40px rgba(43,51,96,.18);transition:transform .5s var(--e),box-shadow .5s}
.dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:16px}
.ci{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(43,51,96,.15)}
.ci small{display:block;color:var(--mut);margin-top:2px}
.qc{display:flex;align-items:center;gap:8px}
.qc button{width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);background:none;cursor:pointer;line-height:1}
.pp{font-weight:600;min-width:64px;text-align:right}
.tt{display:flex;justify-content:space-between;padding:6px 0}
.tt.big{font-weight:600;font-size:16px;border-top:1px solid rgba(43,51,96,.15);margin-top:6px;padding-top:12px}
.fm{display:grid;gap:10px;margin:16px 0}
.fm input,.fm textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.6);border:1px solid rgba(43,51,96,.3);border-radius:8px;padding:11px 12px;width:100%;box-sizing:border-box;resize:none}
.msg{background:rgba(43,51,96,.08);border-radius:8px;padding:12px;line-height:1.45}
.pill[aria-disabled=true]{opacity:.5;pointer-events:none}
#db .pill{width:100%}
/* sign-in box */
.au{position:fixed;inset:0;background:rgba(43,51,96,.35);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:12;padding:16px}
.au[hidden]{display:none}
.ab{background:var(--bg);border-radius:14px;padding:24px;width:min(400px,100%);max-height:100%;overflow:auto;position:relative;box-shadow:0 24px 60px rgba(43,51,96,.3);animation:rise .4s var(--e)}
.ab h2{margin:0 0 6px;font:italic 500 22px 'Instrument Sans',sans-serif}
.ab .ax{position:absolute;top:14px;right:16px}
.mt{color:var(--mut);line-height:1.5}
.au:not(.su) .sn{display:none}
.ck{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--mut)}
.ck input{width:auto;margin-top:2px}
.ab .pill{width:100%;margin-bottom:8px}
/* small shared pieces */
.sf{display:flex;gap:10px;margin:12px 0 22px;align-items:center;flex-wrap:wrap}
.sf button:not(.nav){border:1px solid var(--ink);background:none;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sf button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.or{border:1px solid rgba(43,51,96,.2);border-radius:12px;padding:14px;margin-bottom:12px;background:rgba(255,255,255,.4)}
.oh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ol{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.ol.big{border-top:1px solid rgba(43,51,96,.15);margin-top:6px;padding-top:8px;font-weight:600}
/* page change animation */
body{animation:fi .35s ease}
@keyframes fi{from{opacity:0}}
body.leave{opacity:0;transition:opacity .18s}
@view-transition{navigation:auto}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:700px){header{padding:12px 18px}.logo{font-size:26px}.logo .brand-emblem{width:32px;height:29px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* Griffin shared footer */
.site-footer{background:var(--ink);color:#fff;padding:42px 5vw 24px;margin-top:70px}
.site-footer-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}
.site-footer-brand{font:400 34px Yellowtail,cursive;color:#fff;text-decoration:none}
.site-footer p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.72);margin:10px 0}
.site-footer h3{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:5px 0 17px;color:#fff}
.site-footer a:not(.site-footer-brand){display:block;width:fit-content;color:rgba(255,255,255,.78);font-size:13px;text-decoration:none;margin:11px 0}
.site-footer a:hover{color:#fff}
.site-footer-bottom{max-width:1200px;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.site-footer-bottom p{font-size:11px;margin:0}
@media(max-width:700px){.site-footer{padding:35px 24px 22px}.site-footer-inner{grid-template-columns:1fr 1fr;gap:28px}.site-footer-brand-col{grid-column:1/-1}}