:root{
  --paper:#FFFFFF;
  --yellow:#FFF200;
  --cyan:#29ABE2;
  --ink:#000000;
  --ink2:#111111;
  --dim:#3A3A3A;
  --blue:#0F9EE0;
  --red:#ED1C24;
  --green:#22B14C;

  /* Type ramp — three voices, each behind a var so any one swaps in a single
     line. Sizes and paddings across the site are tuned to these three faces.
       head — the display voice: the wordmark, hero and page titles
       alt  — the secondary/UI voice: buttons, nav links, pills, badges, labels
       body — running text: paragraphs, dates, meta, footer
     Previous picks kept commented for a one-line revert. */
  --font-head:'Permanent Marker',system-ui,sans-serif;
  /* --font-head:'Archivo Black',system-ui,sans-serif; */
  --font-alt:'Slackey',system-ui,sans-serif;
  --font-body:'Short Stack','Comic Sans MS',ui-rounded,system-ui,sans-serif;
  /* --font-body:'Space Mono',ui-monospace,Menlo,Consolas,monospace; */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cyan);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--red)}
button{font:inherit}

.rr-head{font-family:var(--font-head);text-transform:uppercase}

/* ---------------------------------------------------------- nav header */
.rr-nav{
  /* one ramp drives both the wordmark and the menu button, so they match at desktop
     sizes; the button stops shrinking at a thumb-sized 40px, the wordmark keeps going */
  --rr-nav-size:clamp(40px,6.5vw,52px);
  --rr-mark-size:clamp(19px,6.5vw,52px);
  display:grid;grid-template-columns:var(--rr-nav-size) minmax(0,1fr) var(--rr-nav-size);align-items:center;gap:12px;
  padding:16px 20px;border-bottom:4px solid var(--ink);background:var(--yellow);
  position:sticky;top:0;z-index:20;
}
.rr-nav-logo{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:8px}
.rr-nav-logo img{height:var(--rr-nav-size);width:auto}
/* Permanent Marker's baseline rides low in its em box — nudge the ink back onto the button's centre line */
.rr-nav-logo-text{font-family:var(--font-head);font-size:var(--rr-mark-size);letter-spacing:0.02em;color:var(--red);line-height:1;white-space:nowrap;transform:translateY(-0.04em);
  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000;
}

.rr-menu-toggle{
  grid-column:3;grid-row:1;justify-self:end;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18%;
  width:var(--rr-nav-size);height:var(--rr-nav-size);padding:0;border:2px solid var(--ink);background:var(--paper);
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
@media (hover:hover){
  .rr-menu-toggle:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
}
.rr-menu-toggle span{display:block;width:58%;height:3px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
/* bar centre-to-centre distance = the 18% gap + the 3px bar itself */
.rr-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(var(--rr-nav-size) * 0.18 + 3px)) rotate(45deg)}
.rr-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.rr-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(var(--rr-nav-size) * -0.18 - 3px)) rotate(-45deg)}

.rr-menu{
  position:absolute;top:calc(100% + 10px);right:20px;width:min(220px,calc(100vw - 40px));
  display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  max-height:0;overflow:hidden;opacity:0;transition:max-height .2s ease,opacity .18s ease;
}
.rr-menu.is-open{max-height:220px;opacity:1}
.rr-menu-link{
  font-family:var(--font-alt);font-size:12.5px;letter-spacing:0.01em;text-transform:uppercase;
  padding:14px 16px;border-top:2px solid var(--ink);color:var(--ink);
}
.rr-menu-link:first-child{border-top:none}
.rr-menu-link:hover{background:var(--yellow);color:var(--ink)}

/* pill buttons — used in the menu-less contexts (e.g. archive category filters) */
.rr-nav-btn{
  font-family:var(--font-alt);font-size:11.5px;letter-spacing:0.01em;text-transform:uppercase;
  padding:8px 13px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:transform .12s ease;
}
@media (hover:hover){
  .rr-nav-btn:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
}
.rr-nav-btn:active,.rr-nav-btn.is-active{background:var(--red);color:var(--paper);transform:translate(2px,2px);box-shadow:none}

/* ---------------------------------------------------------- footer */
.rr-foot{
  border-top:4px solid var(--ink);background:var(--paper);
  padding:22px 20px;text-align:center;font-size:12.5px;letter-spacing:0.02em;color:var(--dim);
}
/* Short Stack ships one weight — let the wordmark carry the emphasis instead
   of asking the browser to synthesise a bold */
.rr-foot b{color:var(--ink);font-weight:400;font-family:var(--font-head)}

/* ---------------------------------------------------------- buttons/cards */
.rr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-alt);font-size:13px;letter-spacing:0.01em;text-transform:uppercase;
  padding:14px 20px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
@media (hover:hover){
  .rr-btn:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
}
.rr-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.rr-btn--red{background:var(--red);color:var(--paper)}
.rr-btn--blue{background:var(--blue);color:var(--paper)}
.rr-btn--yellow{background:var(--yellow);color:var(--ink)}

.rr-card{
  background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
}

/* ---------------------------------------------------------- misc */
.rr-badge{
  display:inline-block;font-family:var(--font-alt);font-size:11px;letter-spacing:0.01em;
  padding:2px 7px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);
}

.rr-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

@keyframes rr-wiggle{
  0%,100%{transform:rotate(-2deg)}
  50%{transform:rotate(2deg)}
}

/* ---------------------------------------------------------- phones */
@media (max-width:640px){
  .rr-nav{padding:12px 14px;gap:10px}
  .rr-menu{right:14px}
  .rr-foot{padding:20px 16px}
  .rr-btn{padding:13px 17px;font-size:12px}
}