/* Self-hosted El Messiri; SIL Open Font License in assets/fonts/. */
@font-face {
  font-family: "El Messiri Web";
  src: url("assets/fonts/ElMessiri-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #424a3c;
  color: #efeee5;
  font-family: "El Messiri Web", "Geeza Pro", Tahoma, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 41px clamp(24px, 4.375vw, 90px) 44px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-header, .page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 20px;
  line-height: 1.6;
}

.page-header { border-bottom: 1px solid currentColor; padding-bottom: 24px; }
.page-footer { border-top: 1px solid currentColor; padding-top: 22px; justify-content: flex-end; }
.site-label { font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 40px; }
.language-label { white-space: nowrap; }
.language-label, .year { font-size: 18px; line-height: 32px; }
.language-label [lang="en"], .year { font-family: Georgia, "Times New Roman", serif; }
.year { letter-spacing: 1px; }

main { display: grid; place-items: center; min-width: 0; padding-block: 64px; }
.composition { display: flex; align-items: center; gap: 28px; max-width: 100%; }
h1 { margin: 0; font-size: clamp(32px, 3vw, 48px); font-weight: 400; line-height: 1.5; text-align: center; }
.phrase-intro, .phrase-rest { display: block; white-space: nowrap; }
.artistic-line { display: block; flex: 0 0 100px; width: 100px; height: 420px; }

@media (max-width: 900px) {
  .composition { gap: 20px; }
  .artistic-line { flex-basis: 72px; width: 72px; height: 302px; }
}

@media (max-width: 600px) {
  body { padding-block: 28px; }
  .page-header, .page-footer { font-size: 16px; gap: 16px; }
  .site-label { font-size: 18px; line-height: 32px; }
  .language-label, .year { font-size: 14px; line-height: 25.6px; }
  .page-header { padding-bottom: 18px; }
  .page-footer { padding-top: 18px; }
  main { padding-block: 48px; }
  .composition { gap: 12px; width: auto; }
  h1 { flex: 0 1 auto; min-width: 0; font-size: clamp(20px, 6vw, 26px); text-align: center; }
  .phrase-intro, .phrase-rest { display: block; }
  .artistic-line { flex-basis: 48px; width: 48px; height: 260px; }
}

@media (max-height: 500px) and (min-width: 601px) {
  body { padding-block: 20px; }
  main { padding-block: 24px; }
  .artistic-line { height: 190px; flex-basis: 46px; width: 46px; }
}