/* Masthead: ears, blackletter title, roller bar, dateline. */
.mast { padding-top: 14px; }
.mast-in {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap);
  grid-template-areas: "l r" "m m";
}
.ear {
  margin: 0; padding: 6px 8px; border: 1px solid var(--ink); color: var(--ink-soft);
  font-size: 0.75rem; line-height: 1.25; display: flex; align-items: center; white-space: nowrap;
}
.ear-l { grid-area: l; }
.ear-r { grid-area: r; justify-content: flex-end; text-align: right; }
.ear-x { display: none; }
.masthead {
  grid-area: m; position: relative; margin: 10px 0 8px; text-align: center; line-height: 1.05;
  font-family: var(--black); font-weight: 400; font-size: clamp(3.25rem, 14.5vw, 8.5rem);
}
.mh-t { display: inline-block; padding: 0 0.04em; }
.roller { position: absolute; top: 4%; bottom: 4%; left: 0; width: 3px; background: var(--ink); opacity: 0; }
.mast-rule { margin-bottom: 8px; }
.dateline {
  display: grid; grid-template-columns: 1fr; text-align: center; margin: 0; padding: 6px 0 8px;
  font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1.55; border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.dl-l, .dl-r { display: none; }
.dl-d { display: none; }
.dl-ds::after { content: " ·"; }
@media (min-width: 768px) {
  .mast { padding-top: 24px; }
  .mast-in { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); grid-template-areas: "l m r"; align-items: center; }
  .ear { font-size: var(--fs-label); white-space: normal; align-self: center; padding: 8px 10px; }
  .masthead { margin: 0 0 4px; font-size: clamp(3.5rem, 11vw, 8.25rem); }
  .dateline { font-size: var(--fs-label); }
  .dl-d { display: inline; }
  .dl-ds { display: none; }
  .dl-e::before { content: "· "; }
}
@media (min-width: 1024px) {
  .ear-x { display: inline; }
  .dateline { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .dl-l, .dl-r { display: block; }
  .dl-l { text-align: left; }
  .dl-r { text-align: right; }
}