/* ================================================================
   Hello-Archi(R) — Architecture Studio
   article.css
   Article detail page only. No full-bleed photo hero: a centred title
   block (headline → author by-line → date), a featured grayscale image,
   then the body copy set in monospace. Reuses shared .hero/.cta/footer
   from base.css.
   Split from the original styles.css. Loaded on the article page
   (after base.css).
   ================================================================ */

.article {
  background: var(--black);
  color: var(--white);
  /* Top padding clears the fixed header; bottom eases into the CTA. */
  padding-block: clamp(120px, 16vh, 200px) clamp(70px, 10vw, 130px);
}
/* Centred reading column. Generous side margins come from .container's
   gutter on top of this max-width. */
.article__inner {
  max-width: 820px;
  margin-inline: auto;
}

/* ---- Title block: headline → author by-line → date ------------- */
.article-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.article-head__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 18ch;
  margin-inline: auto;
  /* Fade/slide in on load */
  opacity: 0;
  transform: translateY(22px);
  animation: articleHeadIn 0.9s var(--ease) 0.15s forwards;
}

/* Author line — small round avatar + "Author: Name" */
.article-head__byline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: clamp(22px, 3.5vw, 34px);
  font-size: 1rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(16px);
  animation: articleHeadIn 0.9s var(--ease) 0.32s forwards;
}
.article-head__avatar {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #1c1c1c;
}
.article-head__author { color: var(--white); }

/* Date — mono, muted, sits just below the by-line. */
.article-head__date {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--grey-light);
  opacity: 0;
  transform: translateY(14px);
  animation: articleHeadIn 0.9s var(--ease) 0.45s forwards;
}

@keyframes articleHeadIn {
  to { opacity: 1; transform: none; }
}

/* ---- Featured image: rounded, contained, grayscale ------------- */
.article-figure {
  margin: 0 0 clamp(46px, 7vw, 84px);
  overflow: hidden;
  border-radius: 14px;
}
.article-figure__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #1c1c1c;
  filter: grayscale(100%);    /* high-contrast monochrome, like the reference */
}

/* ---- Body copy — monospace, matching the reference ------------- */
.article__lead,
.article__block p {
  font-family: var(--font-mono);
}
/* Lead paragraph — sets the tone for the piece. */
.article__lead {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  color: var(--beige);
  margin-bottom: clamp(36px, 5vw, 60px);
}

/* Each themed block: a subhead above a readable body paragraph. */
.article__block + .article__block { margin-top: clamp(34px, 5vw, 56px); }
.article__subhead {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: clamp(12px, 1.8vw, 20px);
}
.article__block p {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.85;          /* airy mono leading */
  color: var(--beige);        /* off-white body copy, softer than the heads */
}

/* "View other Articles +" — right-aligned, reuses the shared .proj-back
   link styling (contrasting underline; the "+" rotates on hover). */
.article__footrow {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(50px, 8vw, 96px);
}

@media (max-width: 600px) {
  .article-head__title { max-width: 15ch; }
}

@media (prefers-reduced-motion: reduce) {
  .article-head__title,
  .article-head__byline,
  .article-head__date { animation: none; opacity: 1; transform: none; }
}