/* Krillion Answers — poster/sticker style
   cream base, thick ink outlines, offset shadows, lemon-green / sky-blue / bright-yellow accents */

:root{
  --cream:#FBF4DC;
  --ink:#161412;
  --paper:#FFFDF6;
  --green:#C6F135;
  --blue:#7BD5F5;
  --yellow:#FFD23F;
  --orange:#FF9A3D;
  --purple:#B79CFF;
  --pink:#FF9EC4;
  --deep:#0E3A53;
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Maru Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%}
a{color:var(--deep)}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:3px solid var(--ink);
}
.site-head .wrap{display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap}
.logo{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink);
  font-weight:800;font-size:20px;letter-spacing:.2px;
}
.logo .dot{
  width:16px;height:16px;border-radius:50%;
  background:var(--blue);border:3px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.site-head nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.site-head nav a{
  text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;
  padding:6px 12px;border:2.5px solid transparent;border-radius:999px;
}
.site-head nav a:hover{border-color:var(--ink);background:var(--paper)}
.site-head nav a.play{background:var(--green);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}

/* ---------- sticker primitives ---------- */
.card{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--ink);
  padding:26px;
  margin:26px 0;
}
.btn{
  display:inline-block;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:17px;
  padding:12px 22px;border:3px solid var(--ink);border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .08s ease,box-shadow .08s ease;
  background:var(--green);
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.blue{background:var(--blue)}
.btn.yellow{background:var(--yellow)}
.btn.deep{background:var(--deep);color:#fff}
.btn.sm{font-size:14px;padding:8px 16px;box-shadow:4px 4px 0 var(--ink)}

.chip{
  display:inline-block;font-weight:700;font-size:13px;
  padding:3px 12px;border:2.5px solid var(--ink);border-radius:999px;
  background:var(--paper);
}

/* ---------- hero ---------- */
.hero{text-align:center;padding:56px 0 8px}
.hero .badge{
  display:inline-block;font-weight:800;font-size:13px;letter-spacing:1.5px;
  background:var(--yellow);border:3px solid var(--ink);border-radius:999px;
  padding:5px 16px;box-shadow:4px 4px 0 var(--ink);margin-bottom:18px;
}
.hero h1{
  font-size:clamp(34px,6vw,58px);line-height:1.08;margin:0 0 14px;font-weight:800;
}
.hero h1 .hl{
  background:var(--blue);padding:0 12px;border:3px solid var(--ink);
  border-radius:14px;box-shadow:5px 5px 0 var(--ink);display:inline-block;
}
.hero p.sub{font-size:18px;max-width:620px;margin:0 auto 26px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* quick facts */
.facts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}
.facts .chip{background:var(--paper);font-size:14px;padding:6px 14px}
.facts .chip b{margin-left:6px}

/* ---------- tier colors ---------- */
.t-plankton{background:var(--green)}
.t-clever{background:var(--blue)}
.t-schooler{background:var(--yellow)}
.t-rare{background:var(--orange)}
.t-deepcut{background:var(--purple)}
.t-krillion{background:var(--pink)}

/* ---------- answer pages ---------- */
.date-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:34px 0 4px}
.date-head h1{font-size:clamp(26px,4.5vw,38px);margin:0;font-weight:800}
.date-head .dive{font-size:14px;font-weight:700;opacity:.75}

.prompt{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:7px 7px 0 var(--ink);padding:20px 22px;margin:20px 0;
}
.prompt h2{
  font-size:18px;margin:0 0 12px;display:flex;gap:10px;align-items:flex-start;font-weight:800;
}
.prompt h2 .num{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:3px solid var(--ink);background:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:3px 3px 0 var(--ink);
}
.prompt .cat{font-weight:600;font-size:13px;opacity:.7;margin:0 0 10px}

details.reveal{border:2.5px dashed var(--ink);border-radius:14px;padding:0;overflow:hidden}
details.reveal>summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:12px 16px;font-weight:800;font-size:15px;
  display:flex;align-items:center;gap:10px;background:var(--cream);
}
details.reveal>summary::-webkit-details-marker{display:none}
details.reveal>summary::after{
  content:"show";margin-left:auto;font-size:12px;font-weight:700;
  border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--paper);
}
details.reveal[open]>summary::after{content:"hide"}
details.reveal .body{padding:14px 16px;border-top:2.5px dashed var(--ink)}

.tier-label{
  display:inline-block;font-size:13px;font-weight:800;
  border:2.5px solid var(--ink);border-radius:999px;padding:3px 12px;margin:14px 0 8px;
}
.tier-label .pts{opacity:.75;font-weight:700;margin-left:6px}
ul.answers{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.answers li{
  border:2.5px solid var(--ink);border-radius:12px;padding:5px 12px;
  font-weight:700;font-size:14.5px;box-shadow:3px 3px 0 var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
ul.answers li .p{
  font-size:11.5px;font-weight:800;background:var(--paper);
  border:2px solid var(--ink);border-radius:999px;padding:0 7px;
}
ul.answers li.star{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- generic content ---------- */
h2.sec{font-size:24px;margin:38px 0 6px;font-weight:800}
h2.sec .u{box-shadow:inset 0 -10px 0 var(--yellow)}
table.tier-table{width:100%;border-collapse:separate;border-spacing:0;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper)}
table.tier-table th,table.tier-table td{padding:10px 14px;text-align:left;border-bottom:2px solid var(--ink)}
table.tier-table tr:last-child td{border-bottom:none}
table.tier-table th{background:var(--deep);color:#fff;font-size:13px;letter-spacing:.5px}
table.tier-table td .tier-label{margin:0}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.step{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--ink);padding:18px;
}
.step .n{
  width:36px;height:36px;border-radius:50%;border:3px solid var(--ink);
  background:var(--green);display:flex;align-items:center;justify-content:center;
  font-weight:800;box-shadow:3px 3px 0 var(--ink);margin-bottom:10px;
}
.step h3{margin:0 0 6px;font-size:16px;font-weight:800}
.step p{margin:0;font-size:14px}

ul.ticks{padding-left:0;list-style:none}
ul.ticks li{padding-left:30px;position:relative;margin:10px 0}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  background:var(--green);border:2.5px solid var(--ink);border-radius:5px;
}

/* archive list */
.archive-list{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.archive-item{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--ink);
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);padding:14px 18px;font-weight:700;
}
.archive-item:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.archive-item .row{display:flex;align-items:center;gap:14px}
.archive-item .d{font-size:17px;font-weight:800}
.archive-item .meta{margin-left:auto;font-size:13px;opacity:.7;font-weight:600;white-space:nowrap}
.archive-item .prompts{font-size:13px;font-weight:600;opacity:.78;line-height:1.6}

/* month groups in the archive */
details.month{
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);margin:16px 0;padding:0 18px 4px;
}
details.month>summary{
  cursor:pointer;font-weight:800;padding:14px 0;font-size:19px;list-style:none;
  display:flex;align-items:baseline;gap:10px;
}
details.month>summary::-webkit-details-marker{display:none}
details.month>summary::before{content:"+";font-weight:800}
details.month[open]>summary::before{content:"\2212"}
details.month>summary h2{font-size:19px;margin:0;font-weight:800}
details.month>summary .count{font-size:13px;opacity:.65;font-weight:700;margin-left:auto}
details.month .archive-list{margin:8px 0 16px;gap:10px}

/* faq */
details.faq{background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);margin:14px 0;padding:0 18px}
details.faq>summary{cursor:pointer;font-weight:800;padding:14px 0;font-size:16px;list-style:none}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::before{content:"+";display:inline-block;margin-right:10px;font-weight:800}
details.faq[open]>summary::before{content:"–"}
details.faq p{margin:0 0 14px}

/* footer */
.site-foot{border-top:3px solid var(--ink);margin-top:56px;background:var(--deep);color:#EAF4FB}
.site-foot .wrap{padding:34px 20px 44px}
.site-foot a{color:var(--blue)}
.site-foot .fine{font-size:13px;opacity:.85;max-width:720px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-weight:700}

/* source credit line inside article bodies (outside the footer) */
main p.fine{font-size:13px;line-height:1.65;opacity:.8;max-width:760px;margin:16px 0 0}
main p.fine a{text-decoration:underline}

.notice{
  border:3px solid var(--ink);border-radius:14px;background:var(--yellow);
  box-shadow:5px 5px 0 var(--ink);padding:12px 18px;font-weight:700;font-size:14px;margin:18px 0;
}

.breadcrumb{font-size:13px;font-weight:700;margin:22px 0 0;opacity:.8}
.breadcrumb a{text-decoration:none}

@media(max-width:640px){
  .steps{grid-template-columns:1fr}
  .card{padding:20px}
  .site-head nav{margin-left:0}
}