@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Patrick+Hand&display=swap');

:root{
  --canvas:#fbfcfb!important;
  --card:#ffffff!important;
  --card-alt:#f5fafb!important;
  --ink:#20272d!important;
  --ink-soft:#46515a!important;
  --ink-mute:#68747c!important;
  --ink-mute2:#7a858c!important;
  --line:rgba(32,39,45,.14)!important;
  --line-2:rgba(32,39,45,.28)!important;
  --line-dark:rgba(32,39,45,.18)!important;
  --header:#ffffff!important;
  --header-ink:#20272d!important;
  --sig:#27b6bd!important;
  --sig-light:#73d8dc!important;
  --sig-label:#168f98!important;
  --cat-loop:#27b6bd!important;
  --cat-hitch:#5f9fd3!important;
  --cat-bend:#e5b93e!important;
  --cat-stopper:#ef7d70!important;
  --cat-fishing:#4fc2a4!important;
  --cat-decor:#9f88cf!important;
  --cat-rope:#d59d54!important;
  --radius:13px!important;
  --shadow:4px 5px 0 rgba(34,49,58,.12)!important;
  --font-display:'Patrick Hand','Comic Sans MS',cursive!important;
  --font-body:'Nunito',system-ui,sans-serif!important;
  --font-mono:'Nunito',system-ui,sans-serif!important;
}

html{background:#fbfcfb}
body{
  font-family:'Nunito',system-ui,sans-serif!important;
  color:var(--ink-soft)!important;
  background-color:#fbfcfb!important;
  background-image:radial-gradient(circle,rgba(76,116,128,.115) 1px,transparent 1.2px)!important;
  background-size:12px 12px!important;
}

h1,h2,h3,.logo,.hero h1,.job-result h3,.kcard h3,.modal h2,.game-copy h2,
.btn-hero,.hdr-cta,.job-btn,.btn-mini,.gbtn,.cta,.btn{
  font-family:'Patrick Hand','Comic Sans MS',cursive!important;
  letter-spacing:.01em!important;
}

h1,h2,.hero h1{position:relative;text-transform:none!important}
.hero h1::after,main>h1::after,.article-head h1::after,.about h2::after{
  content:"";display:block;width:min(260px,70%);height:9px;margin:4px 0 0 8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C70 2 138 12 207 6 C245 3 272 7 297 4' fill='none' stroke='%2320272d' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.utility-bar{
  background:#dff5f6!important;color:#36646a!important;border-bottom:2px dashed rgba(39,182,189,.35)!important;
  font-weight:800!important;letter-spacing:.08em!important;
}
header{
  background:rgba(255,255,255,.94)!important;color:var(--ink)!important;
  border-bottom:2px solid var(--ink)!important;box-shadow:0 3px 0 rgba(39,182,189,.18)!important;
}
.header-in{max-width:1200px!important}
.logo{font-size:1.8rem!important;text-transform:none!important;transform:rotate(-1deg)}
.logo b{color:var(--sig)!important}
nav a{font-family:'Nunito',sans-serif!important;color:var(--ink-soft)!important;font-weight:800!important;border-radius:9px!important}
nav a:hover,nav a:focus-visible,nav a.active{background:#e5f8f8!important;color:#137f87!important}
.hdr-cta,.cta,.btn-solid,.btn-hero.solid,.btn-mini.solid,.gbtn{
  background:var(--sig)!important;color:#fff!important;border:2px solid var(--ink)!important;
  border-radius:10px!important;box-shadow:3px 3px 0 var(--ink)!important;text-transform:none!important;
}
.hdr-cta:hover,.cta:hover,.btn-solid:hover,.btn-hero.solid:hover,.gbtn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)!important}

.hero,.game-sec{
  background:transparent!important;color:var(--ink)!important;
  border-bottom:2px dashed rgba(32,39,45,.24)!important;
}
.hero p.lede,.game-copy>p{color:var(--ink-soft)!important;font-size:1rem!important}
.hero h1 em{color:var(--sig)!important}
.hero-photo-box{
  background:#e6f7f8!important;border:3px solid var(--ink)!important;border-radius:18px 14px 20px 13px!important;
  box-shadow:7px 8px 0 #f6d96d!important;transform:rotate(1deg);overflow:hidden!important;
}
.hero-photo-box img{filter:saturate(.82) contrast(.96)}
.hero-stats{border-top:2px dashed rgba(32,39,45,.28)!important}
.hero-stats div{border-right:2px dashed rgba(32,39,45,.2)!important}
.hero-stats span{color:var(--ink-mute)!important}
.hero-stats b{color:var(--sig-label)!important}
.btn-hero.line,.btn-mini.line,.btn-line{
  color:var(--ink)!important;background:#fff!important;border:2px solid var(--ink)!important;border-radius:10px!important;
}

.eyebrow,.updated,.breadcrumb,.diffline,.count-line,.cat,.tag,.fl,th,td:first-child{
  font-family:'Nunito',sans-serif!important;font-weight:800!important;letter-spacing:.07em!important;
}
.eyebrow .tick{height:3px!important;border-radius:3px!important;background:var(--sig)!important;transform:rotate(-5deg)}

.job-sec,.guide-sec,.blurbs,.about,main,.article,.hero-in,.game-in{position:relative}
.job-result,.kcard,.card,.qcard,.blurbs>.blurb,.modal,.game-card,.article-card{
  background:rgba(255,255,255,.93)!important;border:2px solid var(--ink)!important;
  border-radius:14px 18px 13px 17px!important;box-shadow:var(--shadow)!important;
}
.job-result{border-left:7px solid var(--sig)!important}
.job-btn,.chip,.answer,.ans,.tag,.related a,.backlinks a{
  border:2px solid var(--ink)!important;border-radius:10px 8px 11px 9px!important;background:#fff!important;color:var(--ink)!important;
}
.job-btn.active,.chip.on,.ans:hover,.answer:hover{
  background:#dff5f6!important;color:var(--ink)!important;border-color:var(--ink)!important;box-shadow:2px 2px 0 var(--ink)!important;
}
.kcard{
  transition:transform .18s ease,box-shadow .18s ease!important;overflow:hidden!important;
  min-height:292px!important;
}
.kcard .cat{padding:14px 22px!important}
.kcard h3{margin:22px 22px 3px!important;line-height:1.08!important}
.kcard .aka{margin:0 22px!important;min-height:1.25em!important}
.kcard .blurb{
  margin:17px 22px 20px!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
  line-height:1.65!important;-webkit-line-clamp:3!important;
}
.kcard .meta{
  margin-top:auto!important;padding:15px 22px 18px!important;
  border-top:2px dashed rgba(32,39,45,.18)!important;
}
.kcard:nth-child(3n+1){transform:rotate(-.3deg)}
.kcard:nth-child(3n+2){transform:rotate(.35deg)}
.kcard:hover{transform:translateY(-4px) rotate(0)!important;box-shadow:7px 9px 0 rgba(39,182,189,.25)!important}
.kcard::before{height:7px!important;border-radius:10px 10px 0 0!important}

.game-sec .eyebrow,.game-sec h2,.score b,.score span{color:var(--ink)!important}
.game-card,.qcard{background:#fff!important}
.scoreboard{border-color:rgba(32,39,45,.22)!important}
.score{border-color:rgba(32,39,45,.2)!important}
.hintbtn{color:var(--sig-label)!important}

.blurbs{background:#eef9fa!important;border-top:2px dashed rgba(32,39,45,.2)!important;border-bottom:2px dashed rgba(32,39,45,.2)!important}
.blurbs>.blurb{padding:22px!important}
.about{background:transparent!important}
footer{background:#20272d!important;color:#f7fbfb!important;border-top:7px solid var(--sig)!important}
footer a{color:#9de4e7!important}

main{background:rgba(255,255,255,.5);border-radius:24px}
.rope{height:4px!important;background:none!important;border-top:3px dashed var(--sig)!important;box-shadow:none!important}
.article-head,.hero-card{background:transparent!important}
.card.caution{border-left:8px solid #f2cb4d!important;background:#fff9dc!important}
.card h2,.card h3{color:var(--ink)!important}
.facts tr:nth-child(odd){background:#edf9fa!important}
.facts td{border-color:rgba(32,39,45,.16)!important}
.tag{background:#fff6ca!important}
.related a:hover,.backlinks a:hover{background:#dff5f6!important}

*:focus-visible{outline:3px solid #f2cb4d!important;outline-offset:3px!important}

@media(max-width:700px){
  .header-in{padding:12px 15px!important}.logo{font-size:1.55rem!important}
  .hero{padding-top:28px!important}.hero-photo-box{transform:none}
  .hero-stats div{border-bottom:1px dashed rgba(32,39,45,.2)!important}
  main{border-radius:0}.kcard:nth-child(n){transform:none}
}

@media(prefers-reduced-motion:reduce){.kcard,.hdr-cta,.cta,.gbtn{transition:none!important}}