@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sans: Poppins, "Helvetica Neue", Arial, sans-serif;
  --rose: #ffb8bc;
  --dark-rose: #954858;
}
.brand, dialog h2, .intro h1, .index-row strong {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.065em;
}
.brand { gap: 9px; }
.intro h1 { text-transform: uppercase; line-height: .98; }
.intro h1 em {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: lowercase;
  white-space: nowrap;
  letter-spacing: -.065em;
  color: var(--dark-rose);
}
.room-view .intro h1 { font-size: clamp(40px, min(5.45vw, 8dvh), 90px); }
.room-view .intro h1 em { color: var(--rose); }
.room-view .eyebrow { font-weight: 600; letter-spacing: .14em; }
.room-view .eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.mast .contact {
  color: #fff9f0;
  background: #28392d;
  border-color: transparent;
}
.mast .contact:hover { color: #273c2e; background: var(--rose); }
.cta:hover { background: #ffd0ce; color: #26392d; }
.cta svg, .contact svg { transition: transform .2s ease; }
.cta:hover svg { transform: translateX(2px); }
.contact:hover svg { transform: translate(1px,-1px); }
.index-row strong { font-size: clamp(20px, 2.4vw, 32px); }
.index-row:hover { background: #f2e4de; }
.index-row .meta { color: var(--dark-rose); }
dialog h2 { line-height: 1.05; }
.reader-top .meta, .detail-kicker { letter-spacing: .13em; }
.room-view #shelf .hint { font: 400 13px/1.45 var(--sans); }
.room-view #shelf .hint svg { color: var(--rose); }
@media (max-width:720px) {
  .room-view .intro h1 { font-size: clamp(29px, 7.6vw, 55px); }
  .room-view #shelf .hint { font-size: 11px; }
  .brand { font-size: clamp(19px, 4.5vw, 25px); }
}
@media (max-height:590px) {
  .room-view .intro h1 { font-size: clamp(24px, 6.8dvh, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta:hover svg, .contact:hover svg { transform: none; }
}