/* ============================================
   Content pages - loaded via front matter `styles: [content]`.
   Covers: long-form reading pages (_layouts/content.html: About, Policies) and the studio
   utility pages with their own markup: /contact/, /news/, /404.html, /velvet-chronicles/.
   Shared pieces (buttons, news cards, .vc-page) live in main.css.
   Readability: the column is WIDE on desktop (--measure, ≈ the page container), Cormorant is
   never small and never dim.
   ============================================ */

/* ---------- 1. Reading column (_layouts/content.html) ---------- */
.content-page { padding: 7rem 6% 5rem; }

.content-page-inner,
.content-page-inner.vl-prose {
  max-width: var(--measure, 68rem);
  margin: 0 auto;
}

.content-page-inner h1 {
  font-family: 'Cormorant', serif;
  font-weight: normal;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

.content-page-inner h2 {
  font-family: 'Cormorant', serif;
  font-weight: normal;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--warm);
  margin: 2.6rem 0 0.8rem;
  text-wrap: balance;
}
/* Gentle section separator: a short warm hairline above each top-level H2. */
.content-page-inner > h2::before {
  content: '';
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-bottom: 0.95rem;
  background: var(--warm);
  opacity: 0.6;
}

.content-page-inner .content-page-intro {
  font-family: 'Geologica', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 1.6rem;
}

.content-page-inner p {
  line-height: 1.7;
  margin: 0 0 1.2rem;
}

.content-page-inner ul {
  margin: 0 0 1.2rem 1.2rem;
  list-style: disc;
}

.content-page-inner li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}
.content-page-inner li::marker { color: var(--warm); }

.content-page-inner strong { color: #efe6dd; }

/* About page logo (pages/about.md, white on transparent): floats beside the H1 + intro on wide
   screens (the H2s clear it); above the H1 on narrower ones. */
.content-page-inner .about-logo {
  float: right;
  width: min(24rem, 36%);
  margin: 0.2rem 0 1.5rem 3rem;
}
.content-page-inner .about-logo img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.94;
  filter: drop-shadow(0 0 26px rgba(212,169,138,0.14));
}
.content-page-inner .about-logo ~ h2 { clear: right; }
@media (max-width: 899px) {
  .content-page-inner .about-logo {
    float: none;
    width: min(18rem, 72%);
    margin: 0 0 1.6rem;
  }
}


/* ---------- 2. Contact (/contact/) - extends CONTACT PAGE in main.css ---------- */
.contact-page { padding: 0 6%; }
.contact-page .contact-inner { padding: 7rem 0 5rem; }
.contact-page .contact-title { font-size: clamp(2.6rem, 5vw, 3.6rem); margin-bottom: 0.7rem; }
.contact-page .contact-sub {
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 1.8rem;
}
.contact-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.contact-methods > * { min-width: 12rem; }
.contact-email { display: inline-flex; justify-content: center; }
/* The email toggle is a <button>: give it the shared vl-btn look at a comfortable width. */
.contact-methods button.vl-btn {
  width: 100%;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.6px;
}
.contact-methods .contact-email-reveal,
.contact-methods .contact-email-reveal:visited {
  color: var(--warm);
  display: inline-block;
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.contact-methods .contact-email-reveal:hover { color: #fff; }
.contact-methods .contact-email-reveal[hidden],
.contact-methods button[hidden] { display: none; }


/* ---------- 3. News (/news/) - extends NEWS CARDS / NEWS PAGE in main.css ---------- */
.vl-news-page .vl-news-list { max-width: var(--measure, 68rem); }
.vl-news-page .vl-news-headline { font-size: clamp(1.5rem, 2.2vw, 1.8rem); }
.vl-news-page .vl-news-date { opacity: 1; }
.vl-news-page .vl-news-desc {
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-card, #ddd5cc);
  line-height: 1.7;
}
.vl-news-page .vl-news-item:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
}


/* ---------- 4. 404 ---------- */
.vl-404 {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.2rem;
  padding: 6rem 6% 4rem;
}
.vl-404-code {
  font-family: 'Cormorant', serif;
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--warm);
  font-weight: normal;
  line-height: 1;
}
.vl-404-msg {
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.5px;
}


/* ---------- 5. Velvet Chronicles (/velvet-chronicles/) - extends .vc-page in main.css ---------- */
/* The first block must clear the absolute site header (like .game-head). */
.vc-page:not(.vc-tail-link) { padding-top: 5.5rem; }
.vc-head p {
  font-weight: 300;
  color: var(--text);
  max-width: 44rem;
}
.vc-main-link { font-size: 0.95rem; }


/* ---------- 6. Phone ---------- */
@media (max-width: 640px) {
  .content-page { padding: 6.2rem 16px 4rem; }
  .content-page-inner h2 { margin-top: 2.2rem; }

  .contact-page { padding: 0 16px; }
  .contact-page .contact-inner { padding: 6.2rem 0 4rem; }
  .contact-methods { flex-direction: column; align-items: stretch; max-width: 18rem; margin: 0 auto; }
  .contact-methods > * { min-width: 0; }
  .contact-email { display: flex; }

  .vl-news-page { padding-left: 16px; padding-right: 16px; }
  .vl-news-page .vl-news-body { padding: 1.2rem 1.2rem 1.3rem; }

  .vl-404 { padding: 6rem 16px 3rem; }
}