/* Dedicated Letters polish. Shared shell, font stack, nav, beta notice and footer remain global. */
body.letters-page .letters-main{
  width:min(92vw, 760px);
  max-width:760px;
  padding-top:clamp(2.1rem, 5vw, 4rem);
}

body.letters-page .letters-index,
body.letters-page .letter-article{
  max-width:var(--reading-measure);
}

body.letters-page .letters-header{
  padding-bottom:1.25rem;
  border-bottom:1px solid #e4e1da;
}

body.letters-page .letters-header h1{
  margin:0 0 0.45rem;
  font-size:clamp(2.7rem, 7.2vw, 3.95rem);
  line-height:0.98;
  letter-spacing:0;
  font-weight:700;
}

body.letter-page .letters-header h1{
  max-width:13ch;
  font-size:clamp(2.05rem, 5.25vw, 3.08rem);
  line-height:1.05;
}

body.letters-page .letters-header .intro{
  margin:0;
  max-width:58ch;
  color:#4f4d48;
  font-size:clamp(1.05rem, 2.2vw, 1.28rem);
  line-height:1.5;
}

body.letter-page .letters-header .intro{
  font-size:1rem;
}

body.letters-page .letters-secondary-note{
  margin:0.8rem 0 0;
  max-width:58ch;
  color:#5f5d57;
  line-height:1.65;
}

body.letters-page .letter-meta,
body.letters-page .letter-index-meta,
body.letters-page .letter-date-line{
  display:block;
  width:auto;
  margin-top:0.55rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#74716a;
  font-size:0.82rem;
  line-height:1.45;
}

body.letters-page .letter-index-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:0;
}

body.letters-page .letter-index-item{
  border-bottom:1px solid #e4e1da;
}

body.letters-page .letter-index-item a{
  display:grid;
  grid-template-columns:3.25rem minmax(0, 1fr) auto;
  gap:1rem 1.15rem;
  align-items:start;
  padding:1.45rem 0;
  color:inherit;
  text-decoration:none;
}

body.letters-page .letter-index-number{
  color:#8a867c;
  font-size:0.86rem;
  line-height:1;
  padding-top:0.3rem;
  font-variant-numeric:tabular-nums;
}

body.letters-page .letter-index-copy{
  display:block;
  min-width:0;
}

body.letters-page .letter-index-title,
body.letters-page .letter-index-subtitle{
  display:block;
}

body.letters-page .letter-index-title{
  color:#111111;
  font-size:1.02rem;
  font-weight:650;
  line-height:1.35;
}

body.letters-page .letter-index-subtitle{
  margin-top:0.14rem;
  color:#5f5d57;
  font-size:0.96rem;
  line-height:1.45;
}

body.letters-page .letter-index-arrow{
  color:#9a968d;
  font-size:1rem;
  line-height:1;
  padding-top:0.24rem;
  transition:color 140ms ease, transform 140ms ease;
}

body.letters-page .letter-index-item a:hover .letter-index-title,
body.letters-page .letter-index-item a:focus-visible .letter-index-title{
  text-decoration:underline;
  text-underline-offset:0.16em;
}

body.letters-page .letter-index-item a:hover .letter-index-arrow,
body.letters-page .letter-index-item a:focus-visible .letter-index-arrow{
  color:#111111;
  transform:translateX(2px);
}

body.letters-page .letter-kicker{
  margin:0 0 0.7rem;
  color:#74716a;
  font-size:0.82rem;
  line-height:1.4;
}

body.letters-page .letter-kicker a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:0.16em;
}

body.letters-page .letter-body{
  padding-top:1.6rem;
}

body.letters-page .letter-body p{
  margin:0 0 1.05rem;
  line-height:1.75;
}

body.letters-page .letter-figure{
  margin:1.65rem 0 1.45rem;
}

body.letters-page .letter-figure img{
  display:block;
  max-width:100%;
  height:auto;
}

body.letters-page .letter-figure figcaption{
  margin-top:0.55rem;
  color:#74716a;
  font-size:0.84rem;
  line-height:1.5;
}

body.letters-page .letter-notes{
  margin-top:2.25rem;
  padding-top:1.05rem;
  border-top:1px solid #d8d4cb;
}

body.letters-page .letter-notes h2{
  margin:0 0 0.6rem;
  font-size:1.02rem;
  line-height:1.35;
}

body.letters-page .letter-notes p{
  margin:0 0 0.9rem;
  color:#4f4d48;
  font-size:0.94rem;
  line-height:1.62;
}

@media (max-width:600px){
  body.letters-page .letters-main{
    width:94%;
    padding-top:2rem;
  }

  body.letters-page .letters-header{
    padding-bottom:1.15rem;
  }

  body.letters-page .letters-header h1{
    font-size:clamp(2.35rem, 15vw, 3.05rem);
  }

  body.letter-page .letters-header h1{
    max-width:none;
    font-size:clamp(1.85rem, 10vw, 2.45rem);
  }

  body.letters-page .letters-header .intro,
  body.letters-page .letters-secondary-note{
    font-size:0.98rem;
  }

  body.letters-page .letter-index-item a{
    grid-template-columns:2.35rem minmax(0, 1fr) auto;
    gap:0.55rem 0.75rem;
    padding:1.25rem 0;
  }

  body.letters-page .letter-index-number{
    font-size:0.8rem;
    padding-top:0.24rem;
  }

  body.letters-page .letter-index-title{
    font-size:0.98rem;
  }

  body.letters-page .letter-index-subtitle{
    font-size:0.92rem;
  }

  body.letters-page .letter-meta,
  body.letters-page .letter-index-meta,
  body.letters-page .letter-date-line{
    font-size:0.78rem;
  }

  body.letters-page .letter-index-arrow{
    padding-top:0.2rem;
  }

  body.letters-page .letter-body p{
    line-height:1.68;
  }
}

html[data-theme="dark"] body.letters-page .letters-header,
html[data-theme="dark"] body.letters-page .letter-index-item,
html[data-theme="dark"] body.letters-page .letter-notes{
  border-color:rgba(255,255,255,0.12);
}

html[data-theme="dark"] body.letters-page .letters-header .intro,
html[data-theme="dark"] body.letters-page .letters-secondary-note,
html[data-theme="dark"] body.letters-page .letter-index-subtitle,
html[data-theme="dark"] body.letters-page .letter-notes p{
  color:#b8b6af;
}

html[data-theme="dark"] body.letters-page .letter-meta,
html[data-theme="dark"] body.letters-page .letter-index-meta,
html[data-theme="dark"] body.letters-page .letter-date-line,
html[data-theme="dark"] body.letters-page .letter-index-number,
html[data-theme="dark"] body.letters-page .letter-kicker,
html[data-theme="dark"] body.letters-page .letter-index-arrow,
html[data-theme="dark"] body.letters-page .letter-figure figcaption{
  color:#96928a;
}

html[data-theme="dark"] body.letters-page .letter-index-title{
  color:#f4f4ef;
}

html[data-theme="dark"] body.letters-page .letter-index-item a:hover .letter-index-arrow,
html[data-theme="dark"] body.letters-page .letter-index-item a:focus-visible .letter-index-arrow{
  color:#f4f4ef;
}