:root{
  --ink:#000;
  --paper:#fff;
  --muted:#4b4b4b;
  --rule:#000;
  --page-gutter:clamp(5px,1.3vw,28px);
  --page-max:2100px;
  --content-pad:clamp(10px,1.4vw,24px);
  --section-gap:clamp(18px,2.1vw,34px);
  --card-gap:clamp(10px,1vw,18px);
  --tilt-a:-0.35deg;
  --tilt-b:0.45deg;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-width:280px;
  color:var(--ink);
  background:
    linear-gradient(#fff,#fff),
    repeating-linear-gradient(
      0deg,
      transparent 0 29px,
      rgba(0,0,0,.025) 30px 31px
    );
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(14px,.33vw + 11px,18px);
  line-height:1.45;
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
select{
  font:inherit;
}

.page-shell{
  width:min(calc(100% - (var(--page-gutter) * 2)),var(--page-max));
  margin:clamp(8px,1vw,18px) auto clamp(22px,2vw,42px);
  padding:var(--content-pad);
  border:2px solid var(--ink);
  border-radius:2px 6px 3px 5px;
  transform:rotate(.03deg);
}

#site-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:clamp(12px,1.6vw,28px);
  border-bottom:2px solid var(--ink);
  padding:3px 2px 12px;
}

.brand{
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(1.25rem,1vw + .9rem,2.05rem);
  font-weight:700;
  letter-spacing:.01em;
  transform:rotate(-1deg);
  white-space:nowrap;
}

.nav{
  display:flex;
  gap:clamp(8px,1vw,18px);
  flex-wrap:wrap;
  justify-content:flex-end;
  font:700 clamp(.68rem,.12vw + .66rem,.85rem)/1.2 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.nav a:nth-child(2n){
  transform:rotate(.5deg);
}

.nav a:nth-child(2n+1){
  transform:rotate(-.35deg);
}

.nav a[aria-current="page"]{
  text-decoration:underline 2px;
  text-underline-offset:4px;
}

#site-footer{
  margin-top:clamp(28px,2.4vw,50px);
  border-top:2px solid var(--ink);
  padding:11px 2px 1px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font:clamp(10px,.12vw + 9px,13px) Arial,sans-serif;
}

.dev-banner{
  width:min(calc(100% - (var(--page-gutter) * 2)),var(--page-max));
  margin:clamp(7px,.8vw,14px) auto -3px;
  padding:5px 9px;
  border-left:3px solid #000;
  font:700 clamp(10px,.1vw + 9px,12px) Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.07em;
  transform:rotate(-.18deg);
}

.hidden{
  display:none!important;
}

.handwritten{
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
}

.mono{
  font:clamp(11px,.12vw + 10px,14px)/1.45 Consolas,"Courier New",monospace;
}

.muted{
  color:var(--muted);
}

.sketch{
  position:relative;
  border:2px solid var(--ink);
  border-radius:2px 5px 3px 6px;
  background:#fff;
}

.sketch::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:4px -4px -4px 4px;
  border-right:1px solid rgba(0,0,0,.25);
  border-bottom:1px solid rgba(0,0,0,.25);
}

.card{
  min-width:0;
  padding:clamp(10px,.8vw,16px);
  transition:none;
}

.card:nth-child(3n+1){
  transform:rotate(var(--tilt-a));
}

.card:nth-child(3n+2){
  transform:rotate(var(--tilt-b));
}

.card:nth-child(3n){
  transform:rotate(-.1deg);
}

.card:hover{
  transform:translateY(-1px) rotate(0deg);
  text-decoration:none;
}

.thumb{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1.5px solid var(--ink);
  background:#fff;
  filter:grayscale(1) contrast(1.12);
}

.pill{
  display:inline-block;
  margin-bottom:7px;
  padding:2px 6px 1px;
  border:1px solid var(--ink);
  font:700 clamp(8px,.08vw + 8px,10px) Arial,sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.test-pill{
  border-style:dashed;
}

.btn{
  display:inline-block;
  margin:5px 7px 3px 0;
  padding:clamp(7px,.55vw,10px) clamp(9px,.7vw,14px);
  border:1.5px solid var(--ink);
  background:#fff;
  font:700 clamp(10px,.08vw + 10px,12px) Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  transform:rotate(-.3deg);
}

.btn:nth-of-type(2n){
  transform:rotate(.35deg);
}

.btn:hover{
  text-decoration:none;
  background:#000;
  color:#fff;
}

.primary{
  background:#000;
  color:#fff;
}

.section-heading{
  position:relative;
  margin:var(--section-gap) 0 clamp(11px,.8vw,16px);
  padding:0 0 8px 2px;
  border-bottom:2px solid var(--ink);
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(1.25rem,.6vw + 1rem,2rem);
  font-weight:700;
  transform:rotate(-.15deg);
}

.section-heading::after{
  content:"";
  position:absolute;
  left:7%;
  right:0;
  bottom:-5px;
  border-bottom:1px solid rgba(0,0,0,.45);
  transform:rotate(.25deg);
}

.grid{
  display:grid;
  gap:var(--card-gap);
}

.grid-2{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
}

.grid-3{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}

.grid-4{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}

.meta{
  display:flex;
  gap:8px 12px;
  flex-wrap:wrap;
  font:clamp(10px,.1vw + 9px,13px) Arial,sans-serif;
  color:#333;
}

.stat{
  border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:7px 8px 5px;
  text-align:left;
  font:clamp(9px,.08vw + 9px,11px) Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.stat strong{
  display:block;
  margin-bottom:1px;
  font:700 clamp(1.25rem,.55vw + 1rem,1.8rem) "Segoe Print","Comic Sans MS",cursive;
}

.loading,
.empty-state,
.error-state{
  margin:28px 0;
  padding:clamp(18px,2vw,32px);
  border:2px dashed var(--ink);
  text-align:center;
  transform:rotate(.15deg);
}

/* Small mobile */
@media(max-width:480px){
  :root{
    --page-gutter:5px;
    --content-pad:10px;
    --card-gap:10px;
  }

  body{
    font-size:14px;
  }

  .page-shell{
    margin-top:6px;
  }

  #site-header{
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
  }

  .nav{
    justify-content:flex-start;
    gap:8px 12px;
  }

  .brand{
    white-space:normal;
  }

  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }
}

/* Large mobile and tablet */
@media(min-width:481px) and (max-width:900px){
  #site-header{
    grid-template-columns:1fr;
    align-items:start;
  }

  .nav{
    justify-content:flex-start;
  }

  .grid-3,
  .grid-4{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  }
}

/* Desktop */
@media(min-width:1200px){
  :root{
    --page-gutter:22px;
    --content-pad:22px;
    --card-gap:18px;
  }

  .grid-3{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  }
}

/* Wide desktop */
@media(min-width:1600px){
  :root{
    --page-max:1700px;
  }

  .grid-3{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
}

/* Ultrawide */
@media(min-width:2200px){
  :root{
    --page-max:2100px;
    --content-pad:28px;
    --card-gap:22px;
  }

  body{
    font-size:18px;
  }

  .grid-3{
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  }
}