/* =====================================================================
   CHAVANS — ARTICLE TEMPLATES (internal detail pages)
   Loads AFTER applied-ai.css (canvas --u = 100vw/1600, nav, type roles,
   CTA buttons, footer). Prefix: .art-

   Two templates live here:
     A. NEWS ARTICLE  (.art-news)   — Announcements + Recognition
        Source: "News 1" PDF/PPTX — a framed reading column between two
        vertical hairlines (x 262.5 → 1311.8 on the 1600 canvas).
     B. CLIENT STORY  (.art-cs)     — Client Stories detail
        Source: live chavans.ai client-story template — title + one-line,
        dark geometric hero panel, five narrative blocks, client quote,
        about the client, closing CTA.

   Every page is the SAME markup with different content → one template
   per type, filled from the CMS (see "Internal Page Templates.md").
===================================================================== */

/* ---------- shared header (white, nav only) ---------- */
.art-head{ background: #fff; color: var(--ink); --h: 130; }
.art-head .search{ color: #000; }

/* ---------- shared meta line ---------- */
.art-meta{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--u) * 12);
  font-family: var(--mono);
  font-size: calc(var(--u) * 13.8);
  line-height: calc(var(--u) * 20);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-75);
}
.art-meta .plus{ position: relative; flex: none; color: var(--ink-85); }
.art-meta i{ width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--grey-65); display: inline-block; }
.art-meta a{ transition: color .2s; }
.art-meta a:hover{ color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   A. NEWS ARTICLE
===================================================================== */
.art-news{
  position: relative;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid #A6A6A6;
  min-height: calc(var(--u) * 820);
  padding: calc(var(--u) * 76) 0 calc(var(--u) * 220);
}
/* News 1 PDF: meta line + light title + body (Calibri-style sans) */
.art-news .art-meta{
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 24);
  color: var(--ink-85); gap: 0;
}
.art-news .art-meta a{ margin-left: .3em; }
.art-news .art-news-t{
  margin-top: calc(var(--u) * 20);
  font-weight: 300;
  font-size: calc(var(--u) * 60);
  line-height: calc(var(--u) * 78);
  letter-spacing: 0;
  color: #000;
}
.art-news .art-body{
  margin-top: calc(var(--u) * 40);
  margin-left: calc(var(--u) * 4);
  width: calc(var(--u) * 940);
  line-height: calc(var(--u) * 24);
  color: var(--ink-85);
}
.art-news .art-body p + p{ margin-top: calc(var(--u) * 24); }
/* white gap + black footer with rounded top (News 1, page 2) */
.art-news-foot{ background: #fff; padding-top: calc(var(--u) * 40); }
.art-news-foot .s-foot{ border-radius: calc(var(--u) * 40) calc(var(--u) * 40) 0 0; }
/* the two framing hairlines from the PDF */
.art-news::before, .art-news::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grey-75);
  transform-origin: top;
}
.art-news::before{ left: calc(var(--u) * 262.5); }
.art-news::after{ left: calc(var(--u) * 1311.8); }

.art-col{
  position: relative;
  margin-left: calc(var(--u) * 312);
  width: calc(var(--u) * 960);
}
.art-news-t{
  margin-top: calc(var(--u) * 26);
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 53.33);           /* 32pt */
  line-height: calc(var(--u) * 64);
  letter-spacing: -0.006em;
  color: var(--ink);
  text-wrap: balance;
}
.art-body{
  margin-top: calc(var(--u) * 56);
  width: calc(var(--u) * 820);
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);           /* 11pt */
  line-height: calc(var(--u) * 28);
  color: var(--ink-75);
}
.art-body p{ text-wrap: pretty; }
.art-body p + p{ margin-top: calc(var(--u) * 26); }

/* recognition badge (optional CMS field) */
.art-badge{
  margin-top: calc(var(--u) * 64);
  display: flex; align-items: center; gap: calc(var(--u) * 28);
  padding-top: calc(var(--u) * 32);
  border-top: 1px solid var(--rsx-rule, #D9D9D9);
  width: calc(var(--u) * 820);
}
.art-badge img{ height: calc(var(--u) * 132); width: auto; }
.art-badge span{
  font-family: var(--mono); font-size: calc(var(--u) * 12.4); line-height: calc(var(--u) * 18);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-50);
  max-width: calc(var(--u) * 300);
}

/* =====================================================================
   B. CLIENT STORY
===================================================================== */
.art-cs{ background: #fff; color: var(--ink); }
.art-cs-wrap{ margin: 0 auto; width: calc(var(--u) * 1280); }

/* hero: title + one-line */
.art-cs-hero{ padding: calc(var(--u) * 92) 0 calc(var(--u) * 56); }
.art-cs-t{
  margin-top: calc(var(--u) * 34);
  max-width: calc(var(--u) * 1120);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 66.67);           /* 40pt */
  line-height: calc(var(--u) * 76);
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
.art-cs-sub{
  margin-top: calc(var(--u) * 30);
  max-width: calc(var(--u) * 820);
  font-family: var(--sans);
  font-size: calc(var(--u) * 23.33);           /* 14pt */
  line-height: calc(var(--u) * 32);
  color: #7F7F7F;
  text-wrap: pretty;
}

/* hero panel — dark geometric composition (one variant per story) */
.art-cs-art{
  position: relative;
  height: calc(var(--u) * 500);
  border-radius: calc(var(--u) * 24);
  background: #262626;
  overflow: hidden;
}
.art-cs-art svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* image variant — supplied artwork, static (no motion, no effects) */
.art-cs-art > img{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }

/* narrative: label column + copy column */
.art-cs-story{ padding: calc(var(--u) * 120) 0 calc(var(--u) * 40); }
.art-blk{
  display: grid;
  grid-template-columns: calc(var(--u) * 380) calc(var(--u) * 760);
  column-gap: calc(var(--u) * 140);
  padding: calc(var(--u) * 44) 0 calc(var(--u) * 56);
  border-top: 1px solid var(--rsx-rule, #D9D9D9);
}
.art-blk-h{
  display: flex; align-items: baseline; gap: calc(var(--u) * 18);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 33.33);           /* 20pt light heading */
  line-height: calc(var(--u) * 40);
  color: var(--ink-85);
}
.art-blk-h b{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(var(--u) * 12.4);
  letter-spacing: 0.04em;
  color: var(--grey-50);
  transform: translateY(calc(var(--u) * -6));
}
.art-blk p{
  font-family: var(--sans);
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 31);
  color: var(--ink-65);
  text-wrap: pretty;
}

/* client quote */
.art-cs-quote{ background: var(--paper); padding: calc(var(--u) * 140) 0 calc(var(--u) * 150); margin-top: calc(var(--u) * 80); }
.art-q{ margin-left: calc(var(--u) * 520); width: calc(var(--u) * 760); }
.art-q blockquote{
  margin: calc(var(--u) * 40) 0 0;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 40);              /* 24pt */
  line-height: calc(var(--u) * 52);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-indent: -0.42em;
  text-wrap: pretty;
}

/* about the client */
.art-cs-about{ padding: calc(var(--u) * 110) 0 calc(var(--u) * 140); }
.art-about{
  display: grid;
  grid-template-columns: calc(var(--u) * 380) calc(var(--u) * 760);
  column-gap: calc(var(--u) * 140);
}
.art-about-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 26.67);
  line-height: calc(var(--u) * 32);
  color: var(--ink-85);
}
.art-about p{
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 28);
  color: #7F7F7F;
  text-wrap: pretty;
}

/* closing CTA (flow version of the shared CTA band) */
.art-cta{
  background: var(--cta); color: #fff;
  padding: calc(var(--u) * 120) 0 calc(var(--u) * 130);
  text-align: center;
}
.art-cta-t{
  margin: 0 auto;
  max-width: calc(var(--u) * 1060);
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 46.67);           /* 28pt */
  line-height: calc(var(--u) * 58);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.art-cta-s{ margin-top: calc(var(--u) * 28); color: var(--grey-65); }
.art-cta-btns{ display: flex; justify-content: center; gap: calc(var(--u) * 21); margin-top: calc(var(--u) * 64); }
.art-cta .btn{
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 22);
  font-family: var(--mono);
  font-size: calc(var(--u) * 14.4);
  letter-spacing: 0.02em;
}
.art-cta .btn .btn-arrow{ width: calc(var(--u) * 29); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.art-cta .btn:hover .btn-arrow{ transform: translateX(calc(var(--u) * 6)); }

/* =====================================================================
   MOTION (html.art-js — progressive, never under reduced motion)
===================================================================== */
.art-js [data-rv]{ opacity: 0; transform: translate3d(0, calc(var(--u) * 26), 0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.art-js [data-rv].is-in{ opacity: 1; transform: none; }
.art-js .art-news::before, .art-js .art-news::after{ transform: scaleY(0); transition: transform 1.6s cubic-bezier(.65,.05,.25,1); }
.art-js .art-news.is-in::before, .art-js .art-news.is-in::after{ transform: none; }
.art-js .art-news.is-in::after{ transition-delay: 120ms; }

/* hero art build: lines draw → accent lands → idle drift */
.art-cs-art .a-line{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.art-js .art-cs-art .a-line{ stroke-dashoffset: 1; }
.art-js .art-cs-art .a-fill{ opacity: 0; transform: translateY(-14px) rotate(45deg); }
.art-cs-art .a-fill{ transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.art-js .art-cs-art.is-in .a-line{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65,.05,.25,1); transition-delay: calc(200ms + var(--i, 0) * 220ms); }
.art-js .art-cs-art.is-in .a-fill{ opacity: 1; transform: rotate(45deg); transition: opacity .6s ease, transform 1s cubic-bezier(.3,1.4,.5,1); transition-delay: 1300ms; }
.art-js .art-cs-art.is-in .a-dot{ animation: artPulse 4s ease-in-out 2.2s infinite; }
@keyframes artPulse{ 0%,100%{ opacity: .35; } 50%{ opacity: .9; } }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .art-head{ padding-bottom: 6vw; }
  .art-meta{ font-size: 0.75rem; line-height: 1.5; gap: 8px; }
  .art-meta .plus{ width: 11px; height: 11px; }
  .art-meta i{ width: 3px; height: 3px; }

  .art-news{ padding: 12vw var(--g) 18vw; min-height: 0; }
  .art-news::before{ left: 3vw; } .art-news::after{ left: auto; right: 3vw; }
  .art-col{ margin: 0; width: auto; padding: 0 2vw; }
  .art-news-t{ font-size: 8.4vw; line-height: 1.14; margin-top: 4vw; }
  .art-body, .art-badge{ width: auto; }
  .art-body{ font-size: 1rem; line-height: 1.6; margin-top: 8vw; }
  .art-body p + p{ margin-top: 1.1rem; }
  .art-badge{ margin-top: 10vw; padding-top: 6vw; gap: 5vw; }
  .art-badge img{ height: 84px; }
  .art-news .art-meta{ font-size: 0.875rem; line-height: 1.4; }
  .art-news .art-news-t{ font-size: 8.6vw; line-height: 1.18; margin-top: 4vw; }
  .art-news .art-body{ width: auto; margin-left: 0; font-size: 1rem; line-height: 1.6; margin-top: 8vw; }
  .art-news-foot{ padding-top: 6vw; }
  .art-news-foot .s-foot{ border-radius: 22px 22px 0 0; }
  .art-badge span{ font-size: 0.6875rem; line-height: 1.5; }

  .art-cs-wrap{ width: auto; padding: 0 var(--g); }
  .art-cs-hero{ padding: 10vw 0 8vw; }
  .art-cs-t{ font-size: 9vw; line-height: 1.12; margin-top: 5vw; }
  .art-cs-sub{ font-size: 1.0625rem; line-height: 1.5; margin-top: 5vw; }
  .art-cs-art{ height: auto; aspect-ratio: 4 / 3; border-radius: 16px; margin: 0 calc(var(--g) * -0.4); }
  .art-cs-story{ padding: 12vw 0 4vw; }
  .art-blk, .art-about{ grid-template-columns: 1fr; row-gap: 4vw; }
  .art-blk{ padding: 7vw 0 9vw; }
  .art-blk-h{ font-size: 6.4vw; line-height: 1.2; gap: 10px; }
  .art-blk-h b{ font-size: 0.6875rem; transform: translateY(-3px); }
  .art-blk p{ font-size: 1rem; line-height: 1.6; }
  .art-cs-quote{ padding: 16vw 0; margin-top: 8vw; }
  .art-q{ margin: 0; width: auto; }
  .art-q blockquote{ font-size: 6.6vw; line-height: 1.3; margin-top: 6vw; }
  .art-cs-about{ padding: 14vw 0 16vw; }
  .art-about-h{ font-size: 5.6vw; line-height: 1.2; }
  .art-about p{ font-size: 1rem; line-height: 1.6; }

  .art-cta{ padding: 18vw var(--g); }
  .art-cta-t{ font-size: 7vw; line-height: 1.22; }
  .art-cta-s{ margin-top: 4vw; }
  .art-cta-btns{ flex-direction: column; gap: 3vw; margin-top: 9vw; }
  .art-cta .btn{ width: auto; height: 60px; justify-content: space-between; padding: 0 22px; font-size: 0.8125rem; border-radius: 12px; }
  .art-cta .btn .btn-arrow{ width: 30px; }
}

@media (prefers-reduced-motion: reduce){
  .art-cta .btn .btn-arrow{ transition: none; }
}