/* South Park shell: the top bar on every yyp.ovh page (source: yyp_portal/assets/sp-shell.css).
   Also loaded on self-styled archive pages, so every rule is scoped to #sp-bar except the page offset.
   No images here: some archive pages only allow map tiles as images. Night colours: sp-shell-night.css. */
@font-face{font-family:"SP Rye";src:url(/assets/fonts/rye-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SP Nunito";src:url(/assets/fonts/nunito-normal-200-1000.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"SP Nunito";src:url(/assets/fonts/nunito-italic-200-1000.woff2) format("woff2");font-weight:200 1000;font-style:italic;font-display:swap}
@font-face{font-family:"SP Plex Mono";src:url(/assets/fonts/plexmono-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SP Plex Mono";src:url(/assets/fonts/plexmono-normal-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{--spb-h:64px;--sp-height:var(--spb-h);
  --spb-bg:#ffffff;--spb-ink:#1d1d22;--spb-muted:#3c3f48;--spb-line:#1d1d22;--spb-hover:#e8f6fa;
  --spb-wood:#b98d68;--spb-wood-dark:#3a2418}
html body{padding-top:var(--spb-h)!important}
html{scroll-padding-top:calc(var(--spb-h) + 18px)}
/* Headers baked into older pages are replaced by #sp-bar. */
#sp-header{display:none!important}

#sp-bar,#sp-bar *{box-sizing:border-box;margin:0;font-style:normal;text-transform:none;letter-spacing:normal;line-height:1.2;text-shadow:none}
#sp-bar{position:fixed;top:0;left:0;right:0;height:var(--spb-h);z-index:2147483000;display:flex;align-items:center;gap:22px;padding:0 22px 0 18px;
  background:var(--spb-bg);border-bottom:3px solid var(--spb-line);
  font:800 14px/1.2 "SP Nunito","Nunito","Segoe UI",system-ui,sans-serif;color:var(--spb-ink);-webkit-font-smoothing:antialiased}
#sp-bar a{color:inherit;text-decoration:none;border:0;background:none;box-shadow:none}
#sp-bar svg{display:inline-block;flex:none}

/* the wooden South Park sign */
#sp-bar .spb-brand{position:relative;display:flex;align-items:center;flex:none;height:100%;padding:0 6px}
#sp-bar .spb-sign{position:relative;display:grid;justify-items:center;padding:4px 9px 3px;border:2px solid var(--spb-wood-dark);border-radius:3px;
  background:var(--spb-wood) repeating-linear-gradient(180deg,transparent 0 10px,rgba(58,36,24,.28) 10px 11px);
  color:var(--spb-wood-dark);font:400 15px/1 "SP Rye","Rye",Georgia,serif;letter-spacing:.04em;text-transform:uppercase;
  transform:rotate(-3deg);box-shadow:2px 3px 0 var(--spb-wood-dark);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#sp-bar .spb-sign span{display:block;line-height:1.02;text-transform:uppercase;letter-spacing:.04em}
#sp-bar .spb-brand:hover .spb-sign{transform:rotate(2deg) scale(1.04)}

/* section tabs: each section wears its character's colour */
#sp-bar .spb-nav{display:flex;align-items:center;gap:3px;flex:1;min-width:0}
#sp-bar .spb-nav a{--c:#92d6e6;--on:#1d1d22;position:relative;display:inline-flex;align-items:center;padding:7px 11px;border:2px solid transparent;border-radius:999px;
  color:var(--spb-muted);white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
#sp-bar .spb-nav a[data-s=home]{--c:#92d6e6}
#sp-bar .spb-nav a[data-s=study]{--c:#4e61a2;--on:#fff}
#sp-bar .spb-nav a[data-s=schools]{--c:#ff81ea}
#sp-bar .spb-nav a[data-s=travel]{--c:#ff7a1f}
#sp-bar .spb-nav a[data-s=auctions]{--c:#d72043;--on:#fff}
#sp-bar .spb-nav a[data-s=work]{--c:#3fa9a8}
#sp-bar .spb-nav a[data-s=accounting]{--c:#a95cc0;--on:#fff}
#sp-bar .spb-nav a[data-s=chemistry]{--c:#55c421}
#sp-bar .spb-nav a[data-s=ib]{--c:#fee505}
#sp-bar .spb-nav a:hover{color:var(--spb-ink);background:var(--spb-hover);transform:translateY(-1px)}
#sp-bar .spb-nav a[aria-current=page]{color:var(--on);background:var(--c);border-color:var(--spb-line);box-shadow:2px 2px 0 var(--spb-line)}
#sp-bar .spb-ext svg{width:9px;height:9px;margin-left:4px;opacity:.6}
#sp-bar .spb-acct{display:flex;align-items:center;gap:2px;flex:none}
#sp-bar .spb-acct a{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:2px solid transparent;border-radius:999px;color:var(--spb-muted);white-space:nowrap;transition:background-color .15s,color .15s}
#sp-bar .spb-acct a:hover{color:var(--spb-ink);background:var(--spb-hover)}
#sp-bar .spb-acct a[aria-current=page]{color:#1d1d22;background:#ff81ea;border-color:var(--spb-line);box-shadow:2px 2px 0 var(--spb-line)}
#sp-bar .spb-theme svg{width:15px;height:15px}
#sp-bar .spb-acct .spb-to-light{display:none}
#sp-bar .spb-acct .spb-out{margin-left:6px;border-color:var(--spb-line);box-shadow:2px 2px 0 var(--spb-line);color:var(--spb-ink)}
#sp-bar .spb-acct .spb-out:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--spb-line)}
#sp-bar a:focus-visible{outline:3px solid #ff7a1f;outline-offset:2px}

@media (max-width:1180px){
  #sp-bar{gap:12px;padding:0 12px}
  #sp-bar .spb-nav a{padding:6px 8px}
  #sp-bar .spb-lbl{display:none}
}
@media (max-width:900px){
  :root{--spb-h:112px}
  #sp-bar{display:grid;grid-template-columns:1fr auto;grid-template-rows:60px 49px;gap:0 8px;padding:0 10px 0 12px}
  #sp-bar .spb-nav{grid-column:1/-1;grid-row:2;align-self:stretch;overflow-x:auto;scrollbar-width:none;margin:0 -10px 0 -12px;padding:0 30px 0 8px;
    border-top:2px dashed rgba(29,29,34,.18);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  #sp-bar .spb-nav::-webkit-scrollbar{display:none}
  #sp-bar .spb-acct{grid-column:2;grid-row:1}
  #sp-bar .spb-acct a{padding:7px 8px}
}
@media print{#sp-bar{display:none!important}html body{padding-top:0!important}}
@media (prefers-reduced-motion:reduce){#sp-bar *{transition:none!important}}
