/* Page-scoped formal-letter method diagram. Requires frozen v2.3.0 tokens and fonts. */
.fl-letter-map{
  color:var(--ink);
  font:inherit;
  max-inline-size:46rem;
  margin-inline:auto;
  padding-block:clamp(2.5rem, 6vw, 5rem);
}

.fl-letter-map__intro{
  max-inline-size:36rem;
  margin-inline:auto;
  text-align:center;
}

.fl-letter-map__eyebrow,
.fl-letter-map__label,
.fl-letter-map__specimen-label,
.fl-letter-map__pair-label{
  color:var(--ink-meta);
  font-size:var(--fs-meta);
  font-weight:600;
  letter-spacing:0;
  margin:0;
}

.fl-letter-map__title{
  color:var(--ink);
  font-size:clamp(1.55rem, 4vw, 2.25rem);
  font-weight:700;
  line-height:1.45;
  margin:0.5rem 0 0;
}

.fl-letter-map__lede{
  color:var(--ink-soft);
  font-size:var(--fs-body);
  line-height:1.9;
  margin:0.75rem 0 0;
}

.fl-letter-map__figure{
  margin:clamp(1.5rem, 4vw, 2.75rem) 0 0;
}

.fl-letter-map__paper{
  background:var(--slip);
  border:1px solid var(--line-gold);
  list-style:none;
  margin:0;
  padding:clamp(1.1rem, 4vw, 2rem);
}

.fl-letter-map__step{
  border-inline-start:2px solid var(--line-gold);
  margin:0;
  padding-block-end:1.5rem;
  padding-inline-start:1rem;
  position:relative;
}

.fl-letter-map__step + .fl-letter-map__step{
  padding-block-start:1.5rem;
}

.fl-letter-map__step:not(:last-child)::after{
  color:var(--ink-meta);
  content:"↓";
  font-size:1.1rem;
  inset-block-end:-0.82rem;
  inset-inline-start:-0.47rem;
  line-height:1;
  position:absolute;
}

.fl-letter-map__step--closing{
  padding-block-end:0;
}

.fl-letter-map__step-head{
  align-items:flex-start;
  display:flex;
  gap:0.75rem;
}

.fl-letter-map__index{
  align-items:center;
  background:var(--paper);
  block-size:1.8rem;
  border:1px solid var(--ink);
  border-radius:50%;
  color:var(--ink);
  display:inline-flex;
  flex:0 0 auto;
  font-size:var(--fs-meta);
  font-weight:700;
  justify-content:center;
  line-height:1;
}

.fl-letter-map__instruction{
  color:var(--ink);
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.75;
  margin:0.15rem 0 0;
}

.fl-letter-map__pairs{
  display:grid;
  gap:0.85rem;
  margin-block-start:1rem;
}

.fl-letter-map__pair{
  border-block-start:1px solid var(--paper-rule);
  padding-block-start:0.7rem;
}

.fl-letter-map__english,
.fl-letter-map__purpose-line{
  color:var(--ink);
  font-family:var(--font-en);
  font-size:var(--fs-body);
  font-weight:600;
  line-height:var(--lh-en);
  margin:0.35rem 0 0;
  text-align:left;
}

.fl-letter-map__pair-note{
  color:var(--ink-soft);
  font-size:var(--fs-meta);
  margin:0.8rem 0 0;
}

.fl-letter-map__specimen-label{
  margin:0.95rem 0 0;
}

.fl-letter-map__purpose-line{
  border-block-end:2px solid var(--highlighter);
  display:inline-block;
  padding-block-end:0.25rem;
}

.fl-letter-map__markers{
  display:grid;
  gap:0.5rem;
  list-style:none;
  margin:1rem 0 0;
  padding:0;
}

.fl-letter-map__markers li{
  align-items:center;
  color:var(--ink);
  display:flex;
  font-size:var(--fs-body);
  font-weight:600;
  gap:0.55rem;
}

.fl-letter-map__markers li::before{
  color:var(--ink);
  content:"✓";
  font-weight:700;
}

.fl-letter-map__coverage-note,
.fl-letter-map__closing-rule,
.fl-letter-map__caption{
  color:var(--ink-soft);
  font-size:var(--fs-meta);
  line-height:1.8;
}

.fl-letter-map__coverage-note,
.fl-letter-map__closing-rule{
  margin:0.85rem 0 0;
}

.fl-letter-map__closing-rule{
  border-block-start:1px dashed var(--line-dash);
  color:var(--ink);
  font-weight:600;
  padding-block-start:0.85rem;
}

.fl-letter-map__caption{
  margin:0.8rem auto 0;
  max-inline-size:34rem;
  text-align:center;
}

@media (min-width:48rem){
  .fl-letter-map__paper{
    padding:2.25rem 2.5rem;
  }

  .fl-letter-map__step{
    padding-inline-start:1.35rem;
  }

  .fl-letter-map__pairs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.5rem;
  }

  .fl-letter-map__pair + .fl-letter-map__pair{
    border-inline-start:1px solid var(--paper-rule);
    padding-inline-start:1.5rem;
  }

  .fl-letter-map__markers{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0.75rem;
  }

  .fl-letter-map__markers li{
    border-inline-start:1px solid var(--paper-rule);
    padding-inline-start:0.65rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .fl-letter-map *,
  .fl-letter-map *::before,
  .fl-letter-map *::after{
    scroll-behavior:auto;
  }
}

.fl-letter-map__index{inline-size:1.8rem}