/* illustration-project.css — illustration project detailed layout (v1)
   loaded only by static illustration project pages generated from data.js
   --plate-bg is injected per-project from palette */

/* hero: framed plate with a detail crop */
.ill-hero-frame {
  width: 100%;
  background: var(--plate-bg);
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
}

.ill-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--plate-bg);
  background-size: 150%;
  background-position: center 42%;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .ill-hero-frame { padding: 1.25rem 1rem; margin-bottom: 1.5rem; }
  .ill-hero { background-size: 170%; }
}

/* detail crop sample replaces the Aa typography block */
.ill-detail {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: 160%;
  background-position: 40% 40%;
  background-repeat: no-repeat;
  max-width: 150px;
  margin-bottom: 0.75rem;
}

.ill-technique-row { margin-bottom: 0.9rem; }

.ill-technique-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.ill-technique-meta {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.55);
}

.ill-series-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(14,13,11,0.1);
}

.ill-series-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.5);
  margin-bottom: 0.5rem;
}

.ill-series-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
  color: rgba(14,13,11,0.8);
}

/* full plates */
.ill-plate {
  width: 100%;
  background: var(--plate-bg);
  padding: 3rem 2rem;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.ill-plate img {
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  width: auto;
  display: block;
  cursor: zoom-in;
}

/* buy band */
.ill-buy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  background: var(--plate-bg);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0 0;
}
@media (max-width: 700px) {
  .ill-buy { margin-top: 1.5rem; }
}

/* aside breathing room (illustration scope only — overrides case-study.css) */
.cs-aside { margin-top: 2rem; margin-bottom: 0; }

.ill-buy-thumb {
  width: 84px;
  height: 84px;
  background-size: 160%;
  background-position: 40% 40%;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.04);
}

.ill-buy-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ill-buy-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.55);
}

.ill-buy-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ill-buy-meta {
  font-size: 0.78rem;
  color: rgba(14,13,11,0.65);
  line-height: 1.45;
}

.ill-buy-cta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  background: #0E0D0B;
  color: #F4EDE2;
  text-decoration: none;
  white-space: nowrap;
}

.ill-buy-cta:hover { background: #1F1C17; }

@media (max-width: 700px) {
  .ill-buy {
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
  }
  .ill-buy-cta {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* series strip on plate ground */
.ill-series-strip {
  margin: 2rem 0 0;
  background: var(--plate-bg);
  padding: 2.5rem 2rem 3rem;
}

@media (max-width: 700px) {
  .ill-series-strip { margin-top: 1.5rem; }
}

.ill-series-strip-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.55);
  margin-bottom: 1.25rem;
}

.ill-series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ill-series-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: rgba(14,13,11,0.06);
}


/* series-link — italic clickable series name, used inline anywhere a series
   is mentioned. Hover bolds the text without changing layout. */
.series-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(14,13,11,0.18);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s, font-weight 0.15s;
}

.series-link em {
  font-style: italic;
  font-weight: inherit;
}

.series-link:hover {
  color: #0e0d0b;
  border-bottom-color: #0e0d0b;
}

.series-link:hover em {
  font-weight: 700;
}

/* related — neutral white site layer */
.ill-related {
  margin: 2rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid rgba(14,13,11,0.12);
}

.ill-related-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.5);
  margin-bottom: 1.25rem;
}

.ill-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ill-related-grid a { display: block; }

.ill-related-thumb {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #efeae0;
  margin-bottom: 0.6rem;
}

.ill-related-title {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(14,13,11,0.85);
  line-height: 1.3;
}

.ill-related-meta {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.5);
  margin-top: 0.2rem;
}

@media (max-width: 900px) {
  .ill-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .ill-series-strip { padding: 1.75rem 1.25rem 2.25rem; }
}

/* featured-in band — broadcast credit, sits between the buy band and the
   series strip. Mirrors the layout of .ill-buy so the two cards read as a
   paired close (Shop / Watch) before the cross-sell. */
.ill-featured {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  background: #f3f3f0;
  color: #0e0d0b;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0 0;
}

.ill-featured-mark {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(14,13,11,0.2);
  color: #0e0d0b;
  white-space: nowrap;
  text-transform: lowercase;
}

.ill-featured-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ill-featured-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,13,11,0.55);
}

.ill-featured-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0e0d0b;
}

.ill-featured-meta {
  font-size: 0.78rem;
  color: rgba(14,13,11,0.65);
  line-height: 1.45;
}

.ill-featured-cta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  background: #0e0d0b;
  color: #f4ede2;
  text-decoration: none;
  white-space: nowrap;
}

.ill-featured-cta:hover { background: #1f1c17; }

@media (max-width: 700px) {
  .ill-featured {
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
  }
  .ill-featured-cta {
    grid-column: 1 / -1;
    text-align: center;
  }
}