/* Conteur Studios, Journal (case studies + essays) */
/* Reuse the shared chrome: tokens, nav, footer, mobile menu, grain/aperture, catalog list */
@import url("../offers/offers.css");

/* ─── JOURNAL INDEX ─── */
.jr-hero { padding: 200px 60px 60px; }
.jr-hero-inner { max-width: 1200px; margin: 0 auto; }
.jr-hero .page-title { margin-bottom: 26px; }
.jr-intro { font-size: 15.5px; line-height: 1.85; color: var(--body); max-width: 56ch; }

.jr-filter {
  display: flex; gap: 26px; align-items: baseline; margin-top: 42px;
  border-top: 1px solid var(--border); padding-top: 22px;
}
.jr-filter button {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted); transition: color .3s; position: relative;
}
.jr-filter button::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .3s;
}
.jr-filter button:hover { color: var(--white); }
.jr-filter button.active { color: var(--gold); }
.jr-filter button.active::after { width: 100%; }

.jr-list { padding: 18px 60px 40px; }
.jr-list-inner { max-width: 1200px; margin: 0 auto; list-style: none; }
.jr-row {
  display: grid; grid-template-columns: 168px 1fr auto; gap: 40px; align-items: center;
  padding: 34px 0; border-top: 1px solid var(--border);
  text-decoration: none; transition: opacity .4s;
}
.jr-list-inner li:last-child .jr-row { border-bottom: 1px solid var(--border); }
.jr-thumb { position: relative; width: 168px; height: 112px; overflow: hidden; flex: none; }
.jr-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); opacity: 0.82; transition: opacity .45s, transform 1.2s ease; }
.jr-thumb::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(200,169,110,0.3); pointer-events: none; }
.jr-row:hover .jr-thumb img { opacity: 1; transform: scale(1.05); }
.jr-body .jr-kind {
  font-family: 'Space Grotesk', sans-serif; font-size: 9px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.jr-body .jr-kind::after { content: ''; width: 26px; height: 1px; background: rgba(200,169,110,0.4); }
.jr-body .jr-kind .jr-dot { color: rgba(240,236,228,0.4); letter-spacing: 0.14em; }
.jr-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(27px, 2.6vw, 40px);
  line-height: 1.08; color: var(--white); transition: color .3s; text-wrap: balance; margin-bottom: 12px;
}
.jr-row:hover .jr-title { color: var(--gold); }
.jr-dek { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 60ch; }
.jr-arrow { color: rgba(200,169,110,0.35); display: flex; align-items: center; transition: color .35s, transform .5s; }
.jr-arrow svg { width: 22px; display: block; }
.jr-row:hover .jr-arrow { color: var(--gold); transform: translateX(6px); }
.jr-list-inner > li.is-hidden { display: none; }

/* ─── ARTICLE ─── */
.art-hero { padding: 176px 60px 0; }
.art-hero-inner { max-width: 860px; margin: 0 auto; }
.art-kind {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
}
.art-kind::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
.art-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--white); text-wrap: balance; margin-bottom: 30px;
}
.art-title em { font-style: italic; color: var(--gold); }
.art-dek {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2vw, 27px); line-height: 1.45; color: var(--body);
  max-width: 62ch; text-wrap: pretty; margin-bottom: 34px;
}
.art-meta {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.art-meta .m {
  font-family: 'Space Grotesk', sans-serif; font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); display: flex; gap: 9px; align-items: baseline;
}
.art-meta .m b { font-weight: 400; color: var(--white); letter-spacing: 0.14em; }
.art-meta .m + .m::before { content: ''; }

/* lead figure / video */
.art-figure { padding: 56px 60px 0; }
.art-figure-inner { max-width: 980px; margin: 0 auto; position: relative; }
.art-figure img { width: 100%; height: clamp(300px, 46vw, 520px); object-fit: cover; filter: saturate(0.92); }
.art-figure-inner::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(200,169,110,0.28); pointer-events: none; }
.art-figcaption {
  max-width: 980px; margin: 16px auto 0; font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #0a0807; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame { position: relative; }
.video-frame::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(200,169,110,0.3); pointer-events: none; z-index: 2; }

/* prose */
.art-body { padding: 72px 60px 20px; }
.art-prose { max-width: 660px; margin: 0 auto; }
.art-prose > * + * { margin-top: 26px; }
.art-prose p { font-size: 16.5px; line-height: 1.92; color: var(--body); text-wrap: pretty; }
.art-prose p .lead-cap:first-letter { }
.art-prose .drop {
  float: left; font-family: 'Cormorant Garamond', serif; font-weight: 300; color: var(--gold);
  font-size: 78px; line-height: 0.72; padding: 8px 14px 0 0;
}
.art-prose h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12; letter-spacing: -0.01em; color: var(--white); margin-top: 60px; text-wrap: balance;
}
.art-prose h2 em { font-style: italic; color: var(--gold); }
.art-prose h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin-top: 46px;
}
.art-prose strong { color: var(--white); font-weight: 500; }
.art-prose em { font-style: italic; }
.art-prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(200,169,110,0.4); transition: border-color .3s; }
.art-prose a:hover { border-color: var(--gold); }
.art-prose ul { list-style: none; display: flex; flex-direction: column; gap: 0; }
.art-prose ul li {
  position: relative; padding: 15px 0 15px 26px; border-top: 1px solid var(--border);
  font-size: 15.5px; line-height: 1.7; color: var(--body);
}
.art-prose ul li:last-child { border-bottom: 1px solid var(--border); }
.art-prose ul li::before {
  content: ''; position: absolute; left: 0; top: 22px; width: 9px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M63.26,15.45 A37,37 0 1 0 84.55,36.74 L75.21,40.32 A27,27 0 1 1 59.68,24.79 Z' fill='%23c8a96e'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%23c8a96e'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}

/* pull quote inside prose */
.art-pull {
  margin: 52px auto; max-width: 760px; padding: 6px 0 6px 34px; border-left: 1px solid rgba(200,169,110,0.5);
}
.art-pull p {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(24px, 2.7vw, 34px); line-height: 1.4; color: var(--white); text-wrap: pretty;
}

/* section band (case-study approach) */
.art-band { padding: 20px 60px; }
.art-band-inner {
  max-width: 980px; margin: 40px auto; padding: 60px 64px;
  background: rgba(20,17,14,0.7); border: 1px solid rgba(200,169,110,0.22); position: relative;
}
.art-band-inner .section-label { margin-bottom: 22px; }
.art-band-inner h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.14; color: var(--white); margin-bottom: 22px; text-wrap: balance;
}
.art-band-inner h2 em { font-style: italic; color: var(--gold); }
.art-band-inner p { font-size: 15.5px; line-height: 1.9; color: var(--body); max-width: 62ch; }
.art-band-inner p + p { margin-top: 20px; }

/* testimonial block */
.art-quote { padding: 40px 60px; }
.art-quote-inner { max-width: 860px; margin: 0 auto; text-align: center; padding: 20px 0; }
.art-quote .q-mark {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 30px;
}
.art-quote blockquote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.34; color: var(--white);
  letter-spacing: -0.005em; text-wrap: pretty; margin-bottom: 30px;
}
.art-quote .q-cite { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.art-quote .q-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--white); }
.art-quote .q-role { font-family: 'Space Grotesk', sans-serif; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }

/* CTA + prev/next reuse offer styles; add article CTA */
.art-cta { padding: 70px 60px; }
.art-cta-inner {
  max-width: 980px; margin: 0 auto; background: rgba(20,17,14,0.75);
  border: 1px solid rgba(200,169,110,0.22); padding: 60px 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.art-cta-line { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; color: var(--white); }
.art-cta-line em { font-style: italic; color: var(--gold); }
.art-cta-line small { display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300; color: var(--muted); margin-top: 14px; letter-spacing: 0; }

.art-adjacent { padding: 0 60px 90px; }
.art-adjacent-inner { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--border); padding-top: 28px; }

/* placeholder flag for content pending real input */
.art-pending { outline: 1px dashed rgba(200,169,110,0.45); outline-offset: 8px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .jr-hero, .jr-list, .art-hero, .art-figure, .art-body, .art-band, .art-quote, .art-cta, .art-adjacent {
    padding-left: 28px; padding-right: 28px;
  }
  .jr-hero { padding-top: 150px; }
  .art-hero { padding-top: 132px; }
  .jr-row { grid-template-columns: 120px 1fr; gap: 22px; padding: 26px 0; }
  .jr-thumb { width: 120px; height: 84px; }
  .jr-arrow { display: none; }
  .art-band-inner, .art-cta-inner { padding: 40px 28px; }
  .art-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .jr-hero, .jr-list, .art-hero, .art-figure, .art-body, .art-band, .art-quote, .art-cta, .art-adjacent {
    padding-left: 20px; padding-right: 20px;
  }
  .jr-hero { padding-top: 128px; padding-bottom: 40px; }
  .art-hero { padding-top: 118px; }
  .jr-filter { flex-wrap: wrap; gap: 16px 20px; }
  .jr-row { grid-template-columns: 1fr; gap: 16px; }
  .jr-thumb { width: 100%; height: 190px; }
  .art-figure { padding-top: 40px; }
  .art-prose .drop { font-size: 62px; }
  .art-band-inner, .art-cta-inner { padding: 32px 22px; }
  .art-adjacent-inner { flex-direction: column; gap: 22px; }
}