.neighbourhood {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(42px, 5.4vw, 92px);
  padding: clamp(38px, 5vh, 60px) 0 clamp(36px, 5vh, 52px);
}

.neighbourhood .letter {
  justify-self: end;
  max-width: 590px;
  padding-top: clamp(10px, 3vh, 30px);
}

.neighbourhood h1 {
  margin-top: clamp(25px, 3.4vh, 40px);
  font-size: clamp(67px, 7.3vw, 106px);
}

.neighbourhood .lede {
  max-width: 42ch;
}

.neighbourhood .letter-body {
  max-width: 54ch;
}

.neighbourhood .tiny-note {
  max-width: 45ch;
}

.index-sheet {
  position: relative;
  justify-self: start;
  width: 100%;
  max-width: 710px;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(34, 41, 32, .2);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 96% 0%, rgba(155, 118, 79, .07), transparent 34%),
    linear-gradient(151deg, #f3ecdd 0%, #ece4d4 58%, #e5dbc8 100%);
  color: var(--ink);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .4);
  transform: rotate(.22deg);
  display: flex;
  flex-direction: column;
  animation: sheet-in .8s var(--ease) both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(18px) rotate(.55deg); }
  to { opacity: 1; transform: translateY(0) rotate(.22deg); }
}

.index-sheet::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.index-sheet > * { position: relative; z-index: 1; }

.sheet-tape {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 42px;
  width: 104px;
  height: 24px;
  background: rgba(218, 203, 173, .44);
  box-shadow: 0 2px 4px rgba(31, 25, 17, .09);
  transform: rotate(-2.1deg);
  clip-path: polygon(2% 7%, 99% 0, 97% 96%, 1% 100%);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(23, 27, 23, .13);
}

.sheet-head h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}

.sheet-count {
  padding-top: 2px;
  color: var(--ink-faint);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list li { margin: 0; }

.entry {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0 -9px;
  padding: 14px 9px;
  border-bottom: 1px solid rgba(23, 27, 23, .11);
  color: inherit;
  transition: background .2s ease;
}

.entry-list li:last-child .entry { border-bottom: 0; }
.entry:hover { background: rgba(173, 141, 97, .08); }
.entry:focus-visible { outline-offset: -3px; }

.entry-number {
  color: rgba(110, 86, 56, .55);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.35;
}

.entry-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.entry-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.entry-top strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 21px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.entry-kind {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(173, 141, 97, .42);
  border-radius: 999px;
  color: var(--brass-dark);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.entry-description {
  margin-top: 5px;
  color: rgba(23, 27, 23, .55);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.48;
}

.entry-domain {
  margin-top: 5px;
  color: rgba(23, 27, 23, .36);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .015em;
  line-height: 1.35;
}

.entry:hover .entry-top strong,
.entry:hover .entry-domain { color: var(--brass-dark); }

.sheet-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 27, 23, .13);
}

.sheet-foot > span {
  display: block;
  color: rgba(23, 27, 23, .42);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sheet-foot p {
  max-width: 60ch;
  margin: 7px 0 0;
  color: rgba(23, 27, 23, .46);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .neighbourhood {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .neighbourhood .letter {
    justify-self: start;
    max-width: 720px;
    padding-top: 0;
  }

  .index-sheet {
    justify-self: start;
    max-width: 780px;
    transform: none;
    animation: none;
  }
}

@media (max-width: 560px) {
  .neighbourhood { gap: 29px; padding: 30px 0 28px; }
  .neighbourhood h1 { margin-top: 22px; font-size: clamp(59px, 17vw, 82px); }
  .neighbourhood .lede { margin-top: 22px; font-size: 12px; }
  .neighbourhood .letter-body { margin-top: 21px; }
  .neighbourhood .letter-body p { font-size: 14px; line-height: 1.6; }
  .neighbourhood .world-links { margin-top: 23px; }
  .neighbourhood .tiny-note { margin-top: 20px; font-size: 7px; }

  .index-sheet { padding: 22px 16px 18px; }
  .sheet-tape { left: 24px; width: 82px; height: 21px; top: -11px; }
  .sheet-head { gap: 10px; padding-bottom: 15px; }
  .sheet-head h2 { margin-top: 8px; font-size: 30px; }
  .sheet-count { font-size: 7px; letter-spacing: .1em; }

  .entry { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; margin: 0 -8px; padding: 13px 8px; }
  .entry-number { font-size: 11px; }
  .entry-top { gap: 7px; }
  .entry-top strong { font-size: 18px; }
  .entry-kind { font-size: 6px; padding: 1px 5px; }
  .entry-description { font-size: 11.5px; line-height: 1.45; }
  .entry-domain { font-size: 7px; }
  .sheet-foot { margin-top: 16px; padding-top: 12px; }
  .sheet-foot p { font-size: 10.5px; }
}

@media (max-height: 790px) and (min-width: 1001px) {
  .site-shell { padding-top: 15px; padding-bottom: 12px; }
  .site-header { min-height: 36px; }
  .neighbourhood { padding-top: 22px; padding-bottom: 22px; }
  .neighbourhood h1 { margin-top: 24px; font-size: clamp(58px, 7vw, 92px); }
  .neighbourhood .lede { margin-top: 20px; }
  .neighbourhood .letter-body { margin-top: 20px; }
  .neighbourhood .world-links { margin-top: 22px; }
  .neighbourhood .tiny-note { margin-top: 18px; }
  .index-sheet { padding: 22px 26px; }
  .entry { padding-top: 11px; padding-bottom: 11px; }
  .site-footer { min-height: 30px; }
}