*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #F2F0EB;
  font-family: 'Source Serif 4', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: #1E1E1C; text-decoration: none; }
a:hover { opacity: 0.55; }
::selection { background: #2A77C5; color: #F2F0EB; }

.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: clamp(36px, 4.6vw, 60px);
}

.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.mark { flex: 0 0 auto; height: 104px; width: auto; display: block; }

.stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: right;
  color: #66635D;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.stamp .r { display: flex; gap: 10px; }
.stamp .sep { color: #C3BFB6; }
.stamp .clocks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 20px; color: #1E1E1C; }
.stamp .grp { display: flex; gap: 8px; }
.stamp .lbl { color: #66635D; }
.stamp .ink { color: #1E1E1C; }

.foot { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 34px); }
.rule { height: 1px; background: #D8D5CE; }
.band { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; }
.said { flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }

h1 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 500;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1;
  letter-spacing: 0.26em;
  color: #1E1E1C;
}

.statement {
  margin: 0;
  max-width: 660px;
  text-wrap: pretty;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-weight: 400;
  font-size: clamp(26px, 3.5vw, 34px);
  line-height: 1.26;
  letter-spacing: -0.021em;
  color: #1E1E1C;
}

.meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #66635D;
}

.cities { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0; line-height: 1.75; }
.cities span { position: relative; }
.cities .near::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: #F33300;
}

.info {
  color: #1E1E1C;
  margin-top: -4px;
  margin-bottom: -17px;
  padding: 15px 0;
  display: inline-flex;
  align-items: center;
}
.info span { padding-bottom: 2px; border-bottom: 1px solid rgba(30, 30, 28, 0.28); }

@media (max-width: 720px) {
  .sheet { gap: 48px; padding: 26px 24px 30px; }
  .head { gap: 20px; }
  .mark { height: 62px; }
  .stamp { gap: 2px; padding-top: 2px; font-size: 13px; }
  .stamp .r { gap: 8px; }
  .foot { gap: 24px; }
  h1 { font-size: 12px; }
  .statement { max-width: none; font-size: 27px; line-height: 1.24; }
  .band { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 6px; }
  .said { gap: 24px; }
  .meta { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-left: 0; gap: 24px; font-size: 13.5px; }
  .cities { align-items: flex-start; text-align: left; gap: 0; padding-left: 14px; }
  .info { margin-top: 0; margin-bottom: -16px; padding: 14px 0 14px 20px; }
}