/* muse — SalonCosmetic. Салонний журнал / lookbook: Playfair Display як
   типографіка обкладинки + PT Sans у тексті, теракота на теплому папері.
   Підпис системи: «обкладинка номера» — центрована велика типографіка,
   фото-банер на всю ширину і зміст номера колонками рубрик. */

/* службова смуга: пісочна заливка без ліній (у catalog — темна, у velvet — папір з волосяню) */
.utility-bar {
  background: var(--soft); color: var(--mute);
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.utility-bar .wrap {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.utility-bar a { color: var(--accent); text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; }

.site-header { background: var(--bg); border-bottom: var(--rule-w) solid var(--rule); }
.brand { font-weight: 700; }

/* обкладинка: центрована типографіка номера */
.cover { text-align: center; padding: 3.4rem 0 2.4rem; }
.cover-eyebrow {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--accent); margin: 0 0 1.2rem;
}
.cover h1 {
  font-size: var(--step-display); font-weight: 700;
  line-height: var(--lh-display); margin: 0 auto; max-width: 16em;
}
.cover-lede {
  color: var(--mute); max-width: 38em; margin: 1.4rem auto 0; font-size: 1.08rem;
}

/* фото-банер на всю ширину з підписом, як розворот lookbook */
.cover-banner { margin: 0; }
.cover-banner img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
}
.cover-banner figcaption {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 0.6rem; padding-bottom: 0.6rem;
  border-bottom: var(--rule-w) solid var(--rule);
  color: var(--mute); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--track-label);
}

/* «у цьому номері»: колонки рубрик з матеріалами, як зміст журналу */
.issue { padding: 2.8rem 0 1rem; }
.issue-title {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--mute); font-family: var(--font-body); margin: 0 0 2rem;
}
.issue-columns {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.issue-col { border-top: 2px solid var(--ink); padding-top: 1rem; min-width: 0; }
.issue-col h2 { margin: 0 0 0.9rem; font-size: 1.35rem; font-weight: 700; }
.issue-col h2 a { color: inherit; text-decoration: none; }
.issue-col h2 a:hover { color: var(--accent); }
.issue-col ul { list-style: none; margin: 0; padding: 0; }
.issue-col li { padding: 0.55rem 0; border-bottom: var(--rule-w) solid var(--rule); }
.issue-col li:last-child { border-bottom: 0; }
.issue-col li a {
  color: inherit; text-decoration: none; font-size: 0.94rem; line-height: 1.4;
}
.issue-col li a:hover { color: var(--accent); }

/* свіжі матеріали: editorial-стрічка з великими серіфними заголовками */
.editorial-list { list-style: none; margin: 0; padding: 0; }
.editorial-list li {
  padding: 1.8rem 0; border-bottom: var(--rule-w) solid var(--rule);
}
.editorial-list li:last-child { border-bottom: 0; }
.editorial-meta {
  margin: 0 0 0.5rem; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent);
}
.editorial-meta time { color: var(--mute); font-weight: 400; }
.editorial-list h3 { margin: 0; font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.editorial-list h3 a { color: inherit; text-decoration: none; }
.editorial-list h3 a:hover { color: var(--accent); }
.editorial-desc { margin: 0.6rem 0 0; color: var(--mute); max-width: var(--measure); }

/* стаття */
.article-head h1 { font-weight: 700; }
.prose h2 { font-weight: 700; }
.takeaways { border: var(--rule-w) solid var(--rule); }

/* списки рубрик/авторів — editorial-стрічка */
.feed-list .entry { padding: 1.8rem 0; }
.feed-list .entry-title { font-size: 1.45rem; font-weight: 700; }

/* ── футер-колофон: центрований, як вихідні дані журналу (Gate 43) ─────── */
.colophon-footer {
  background: var(--soft); border-top: 2px solid var(--ink);
  text-align: center;
}
.colophon-brand { margin: 0; }
.colophon-brand a {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  color: var(--ink); text-decoration: none;
}
.colophon-brand a:hover { color: var(--accent); text-decoration: none; }
.colophon-nav {
  display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.colophon-nav a {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--ink);
}
.colophon-nav a:hover { color: var(--accent); text-decoration: none; }
.colophon-editors {
  margin: 1.4rem auto 0; padding-top: 1.1rem; max-width: 44em;
  border-top: var(--rule-w) solid var(--rule);
  color: var(--mute); font-size: 0.9rem; line-height: 1.8;
}
.colophon-editors p { margin: 0; }
.colophon-tail { margin: 1.2rem 0 0; color: var(--mute); font-size: 0.8rem; }

@media (max-width: 900px) {
  .issue-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-banner img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .issue-columns { grid-template-columns: 1fr; }
  .cover { padding: 2.2rem 0 1.6rem; }
  .cover-banner img { aspect-ratio: 4 / 3; }
}