* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #f7f3eb; color: #30372f; font-family: Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; }
.hero {
  position: relative;
  min-height: max(100svh, 66.6667vw);
  background: #f7f3eb url('assets/domika-home.png') center top / 100% auto no-repeat;
}
.mobile-header, .mobile-title { display: none; }
/* The source image contains the title and rule. Quotes sit just below the rule, in the open sky. */
.quotation {
  position: absolute;
  top: 23.5vw;
  left: 27%;
  width: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.quotation blockquote {
  margin: 0;
  max-width: 100%;
  font-size: clamp(17px, 1.52vw, 25px);
  font-weight: normal;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.quotation blockquote.long { font-size: clamp(15px, 1.24vw, 20px); }
.translation {
  margin: 0;
  color: #7d7d77;
  font-size: clamp(12px, 1.04vw, 17px);
  font-style: italic;
  line-height: 1.35;
  text-wrap: balance;
}
.translation:empty { display: none; }
.attribution {
  margin: 7px 0 0;
  color: #888780;
  font: 10px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}
.quotation button {
  margin-top: 3px;
  padding: 4px 12px;
  background: transparent;
  border: 0;
  color: #a26839;
  font-size: 17px;
  cursor: pointer;
  opacity: .7;
}
.quotation button:hover, .quotation button:focus-visible { opacity: 1; }
.quotation button:focus-visible { outline: 2px solid #b46d52; outline-offset: 2px; border-radius: 5px; }
/* Mobile: a dedicated crop retains the entire kitten, including paws and ears. */
.mobile-scene { display: none; }
@media (max-width: 650px) {
  .hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: #f7f3eb;
  }
  .mobile-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 0;
  }
  .logo { font-size: 31px; font-style: italic; }
  .logo span, .mobile-title h1 span { color: #aa653d; }
  .langs { color: #777; font: 10px Arial, sans-serif; letter-spacing: 2px; }
  .mobile-title { display: block; text-align: center; padding: 24px 12px 0; }
  .mobile-title p { color: #777; font: 9px Arial, sans-serif; letter-spacing: 2.5px; }
  .mobile-title h1 { margin: 14px 0 0; font-size: clamp(39px, 9.5vw, 61px); line-height: 1.05; font-weight: normal; }
  .rule { display: block; width: 45px; height: 1px; margin: 20px auto 0; background: #ad6635; }
  .quotation {
    position: static;
    width: min(100%, 520px);
    padding: 20px 20px 12px;
    gap: 7px;
    flex: 0 0 auto;
  }
  .quotation blockquote { font-size: clamp(18px, 4.7vw, 24px); }
  .quotation blockquote.long { font-size: clamp(16px, 4vw, 19px); }
  .translation { font-size: 14px; }
  .attribution { font-size: 9px; letter-spacing: 2px; }
  .mobile-scene {
    display: block;
    width: min(100%, 650px);
    aspect-ratio: 1 / 1.08;
    margin-top: auto;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .mobile-scene img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 50%;
  }
}
@media (max-width: 380px) {
  .mobile-header { padding: 15px 16px 0; }
  .mobile-title { padding-top: 16px; }
  .quotation { padding: 15px 14px 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }