/* exxyyf — rebuilt from the Readymag original
   palette:
   e  #F60000   x  #FFC505   x  #4723C6
   y  #DA4242   y  #EDD956   f  #4D6EBD
   body text #574F34, accent red #C80000
*/

@font-face {
  /* положи сюда свой файл шрифта из Readymag (hmqz) и он подхватится */
  font-family: 'hmqz';
  src: url('../assets/fonts/hmqz.woff2') format('woff2'),
       url('../assets/fonts/hmqz.woff') format('woff'),
       url('../assets/fonts/hmqz.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --c-e: #F60000;
  --c-x1: #FFC505;
  --c-x2: #4723C6;
  --c-y1: #DA4242;
  --c-y2: #EDD956;
  --c-f: #4D6EBD;
  --ink: #000;
  --body-ink: #574F34;
  --red: #C80000;
  --wordlist: #FFC500;
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'Courier New', Courier, monospace;
  --brand: 'hmqz', 'Courier New', monospace;
  --inter: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #fff; }

body {
  font-family: var(--serif);
  color: var(--body-ink);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.page {
  width: min(1024px, 100%);
  margin: 0 auto;
  padding: 0 20px 60px;
  flex: 1;
}

/* ── wordmark strip ─────────────────────────────── */
.wordmark {
  font-family: var(--brand);
  font-size: clamp(18px, 3.4vw, 35px);
  text-align: center;
  padding: 14px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.wordmark a { text-decoration: none; }
.l-e  { color: var(--c-e); }
.l-x1 { color: var(--c-x1); }
.l-x2 { color: var(--c-x2); }
.l-y1 { color: var(--c-y1); }
.l-y2 { color: var(--c-y2); }
.l-f  { color: var(--c-f); }

/* ── nav ────────────────────────────────────────── */
.nav {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 28px 0 40px;
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  width: 134px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover,
.nav a:focus-visible {
  background: rgba(200, 0, 0, .8);
  color: #fff;
  outline: none;
}
.nav a[aria-current="page"] {
  background: var(--red);
  color: #fff;
  border-radius: 5px;
}

/* vertical variant — home page */
.nav.vertical {
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

/* ── home ───────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: 134px 1fr;
  gap: 60px;
  align-items: start;
  max-width: 780px;
  margin: 70px auto 0;
}
.home-photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  justify-self: end;
}

/* ── side word list (music / links / contacts) ──── */
.wordlist {
  position: absolute;
  left: 8px;
  top: 0;
  font-family: var(--inter);
  font-weight: 318;
  font-variation-settings: 'wght' 318;
  font-size: 50px;
  line-height: 44px;
  letter-spacing: -2px;
  color: var(--wordlist);
  text-decoration: underline;
  user-select: none;
  pointer-events: none;
}
.with-wordlist { position: relative; }

/* ── bio ────────────────────────────────────────── */
.bio-text {
  max-width: 480px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.45;
}
.bio-text p + p { margin-top: 1em; }
.bio-photo {
  width: 164px;
  height: 164px;
  object-fit: cover;
  margin: 56px auto 0;
}

/* ── music ──────────────────────────────────────── */
.tracks {
  display: grid;
  grid-template-columns: repeat(3, 166px);
  gap: 0;
  justify-content: center;
  margin-top: 40px;
}
.tracks iframe,
.track-placeholder {
  width: 166px;
  height: 166px;
  border: 0;
  display: block;
}
.track-placeholder {
  background: repeating-linear-gradient(45deg, #f4f4f4 0 8px, #fff 8px 16px);
}

/* ── links ──────────────────────────────────────── */
.quote {
  font-size: 12px;
  color: var(--c-e);
  text-align: center;
  max-width: 574px;
  margin: 10px auto 30px;
  line-height: 1.6;
}
.links-photo {
  width: 185px;
  margin: 0 auto 40px;
}
.link-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 17px;
}
.link-list a {
  text-decoration: underline;
  color: #0C0C0C;
}
.link-list a:hover { color: var(--red); }

/* ── contacts ───────────────────────────────────── */
.contacts-photo {
  width: 220px;
  margin: 40px auto 60px;
}
.contact-lines {
  font-family: var(--brand);
  font-size: 16px;
  text-align: center;
  line-height: 2;
}
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { color: var(--red); }

/* ── responsive ─────────────────────────────────── */
@media (max-width: 760px) {
  .wordlist { display: none; }
  .home-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 40px;
    margin-top: 40px;
  }
  .nav.vertical { align-items: center; }
  .home-photo { justify-self: center; }
  .tracks { grid-template-columns: repeat(auto-fit, 166px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}