.page-main{
  padding:clamp(18px,1.8vw,30px) 2px 8px;
}

.page-title{
  margin:7px 0 10px;
  max-width:18ch;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(2.4rem,3.6vw,6rem);
  line-height:1;
  letter-spacing:-.03em;
  transform:rotate(-.35deg);
}

.lede{
  max-width:72ch;
  font-size:clamp(.9rem,.18vw + .86rem,1.08rem);
}

.detail-header{
  display:grid;
  grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);
  gap:clamp(14px,1.2vw,22px);
  align-items:start;
}

.detail-panel{
  min-width:0;
  padding:clamp(12px,1vw,18px);
}

.detail-panel:nth-child(1){
  transform:rotate(-.2deg);
}

.detail-panel:nth-child(2){
  transform:rotate(.18deg);
}

.detail-panel .thumb{
  aspect-ratio:4/3;
}

.detail-list{
  margin:0;
  padding-left:1.1rem;
}

.timeline{
  display:grid;
  gap:10px;
}

.timeline-item{
  border-left:2px solid var(--ink);
  padding:4px 0 5px 12px;
}

.timeline-item:nth-child(2n){
  margin-left:5px;
}

.filters{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:11px 0 17px;
}

.filter{
  border-bottom:1px solid var(--ink);
  padding:3px 4px;
  font:clamp(9px,.08vw + 9px,11px) Arial,sans-serif;
  text-transform:uppercase;
}

.atlas-layout{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr);
  gap:clamp(14px,1.2vw,22px);
}

.map-panel{
  padding:clamp(10px,.8vw,14px);
  transform:rotate(-.15deg);
}

.map-panel img{
  width:100%;
  border:1.5px solid var(--ink);
}

.location{
  padding:8px 0;
  border-bottom:1px dashed #777;
}

.archive-item{
  padding:clamp(10px,.8vw,15px);
  margin-bottom:12px;
}

.archive-item:nth-child(2n){
  margin-left:8px;
  transform:rotate(.15deg);
}

.support-option{
  padding:clamp(12px,1vw,18px);
}

/* Mobile */
@media(max-width:760px){
  .page-title{
    max-width:none;
    font-size:clamp(2.4rem,13vw,4rem);
  }

  .detail-header,
  .atlas-layout{
    grid-template-columns:1fr;
  }

  .detail-panel:nth-child(1),
  .detail-panel:nth-child(2){
    transform:none;
  }
}

/* Tablet and small desktop */
@media(min-width:761px) and (max-width:1100px){
  .detail-header{
    grid-template-columns:.95fr 1.05fr;
  }

  .atlas-layout{
    grid-template-columns:1.5fr .9fr;
  }
}

/* Ultrawide */
@media(min-width:2200px){
  .detail-header{
    grid-template-columns:minmax(620px,.9fr) minmax(780px,1.1fr);
  }

  .atlas-layout{
    grid-template-columns:minmax(0,2fr) minmax(420px,.75fr);
  }

  .page-title{
    font-size:5.6rem;
  }
}