/* ============================================================
   Cho Cho Industry (CCI) — News article (detail) page styles
   Loads AFTER css/styles.css; reuses tokens, .btn, .tag, .wrap,
   navbar & footer. Editorial, easy-to-read layout on white.
   ============================================================ */

.article{--measure:820px}          /* comfortable reading width */

/* ============================================================
   READING PROGRESS BAR — under the sticky navbar
   ============================================================ */
.reading{position:fixed;top:var(--nav-h);left:0;right:0;height:3px;z-index:40;
  background:transparent;pointer-events:none}
.reading__bar{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cci-blue),var(--gold));transition:width .1s linear}

/* ============================================================
   BREADCRUMB — simple bar under the navbar
   ============================================================ */
.crumbs{background:#fff}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   HERO — editorial, left-aligned: title, deck, meta cluster, image
   ============================================================ */
.ahero{padding:44px 0 0}
/* text column matches the article body width (820); the image below is wider */
.ahero__head{max-width:820px;margin:0 auto;padding:0 var(--pad);text-align:left}

.ahero__title{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(36px,5vw,64px);line-height:1.08;color:var(--ink);margin:0 0 22px;max-width:20ch}
.ahero__deck{font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--ink-soft);
  max-width:680px;margin:0 0 30px}

/* meta cluster — author + tag/date/read time on one row (wraps on mobile) */
.ahero__by{display:flex;align-items:center;flex-wrap:wrap;gap:14px;text-align:left;
  font-size:14px;color:var(--ink-soft)}
.ahero__by-text{line-height:1.35}
.ahero__by strong{color:var(--ink);font-family:"DM Sans",sans-serif}
.ahero__by-sub{display:block;font-size:14px;color:var(--silver)}
.ahero__by-div{width:1px;height:32px;background:var(--line);flex:none}
.ahero__meta{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--silver)}
.ahero__avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;background:var(--cci-blue-50);color:var(--cci-blue);
  font-family:"DM Sans",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.03em}
.ahero__avatar b{color:var(--cci-blue)}

/* hero image + bowl overlapping the RIGHT edge */
.ahero__media{position:relative;max-width:1040px;margin:40px auto 0;padding:0 var(--pad)}
.ahero__img{width:100%;height:clamp(300px,46vw,560px);object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow);display:block}
.ahero__img.ph{background:linear-gradient(135deg,var(--cci-blue-50),var(--tint))}
.ahero__bowl{position:absolute;right:calc(var(--pad) - 26px);left:auto;bottom:-58px;
  width:clamp(140px,20vw,250px);height:auto;transform:rotate(8deg);
  filter:drop-shadow(0 24px 30px rgba(31,26,110,.28));z-index:2}

/* ============================================================
   PROSE — easy-to-read article column
   ============================================================ */
.prose{max-width:var(--measure);margin:0 auto;padding:96px var(--pad) 0}
.prose > p{font-size:18px;line-height:1.8;color:#2c2c34;margin:0 0 26px}
.prose h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:var(--ink);
  margin:44px 0 16px;letter-spacing:-.02em}

/* lead paragraph with a drop cap */
.prose .lead{font-size:20px;line-height:1.7;color:var(--ink);margin-bottom:30px}
.prose .lead::first-letter{float:left;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:74px;line-height:.82;padding:6px 14px 0 0;color:var(--cci-blue)}

/* inline figure */
.prose__fig{margin:38px 0;}
.prose__fig img{width:100%;height:auto;border-radius:var(--r-sm);display:block;
  box-shadow:var(--shadow-sm)}
.prose__fig img.ph{aspect-ratio:16/9;background:linear-gradient(135deg,var(--cci-blue-50),var(--tint))}
.prose__fig figcaption{margin-top:12px;font-size:14px;color:var(--silver);
  text-align:center;font-style:italic}

/* pull quote — breaks slightly wider than the column */
.pullquote{margin:44px -10px;padding:6px 0 6px 28px;border-left:4px solid var(--gold)}
.pullquote p{font-family:"DM Sans",sans-serif;font-weight:600;font-style:italic;
  font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--cci-blue);margin:0}

/* key-takeaways callout */
.callout{background:var(--cci-blue-50);border:1px solid var(--cci-blue-100,#e3e6f6);
  border-radius:var(--r);padding:26px 28px;margin:38px 0}
.callout__label{display:inline-block;font-family:"DM Sans",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--cci-blue);margin-bottom:12px}
.callout ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.callout li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:#2c2c34}
.callout li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--cci-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4 10-10' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:15px;background-repeat:no-repeat;background-position:center}

/* ============================================================
   ARTICLE FOOTER — tags + share, homepage button styling
   ============================================================ */
.article__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:20px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.article__tags{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;color:var(--ink-soft);
  background:var(--tint);border:1px solid var(--line);border-radius:100px;padding:7px 15px;transition:.18s}
.chip:hover{border-color:var(--cci-blue-500);color:var(--cci-blue)}
.article__share{display:flex;align-items:center;gap:10px}
.article__share-lbl{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;color:var(--ink-soft)}
.share-btn{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--cci-blue);
  display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.share-btn:hover{background:var(--cci-blue-700);transform:translateY(-2px)}
.share-btn svg{width:19px;height:19px;fill:#fff;stroke:none}
.share-btn#copyLink svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.article__copied{font-size:14px;color:var(--cci-blue);font-weight:600}

.article__more{margin:40px 0 0}

.article{padding-bottom:100px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:720px){
  .ahero{padding-top:28px}
  .ahero__media{margin-top:30px}
  .ahero__bowl{width:118px;bottom:-34px;right:calc(var(--pad) - 12px);left:auto}
  .ahero__by-div{display:none}
  .prose{padding-top:72px}
  .prose > p{font-size:16px}
  .prose .lead{font-size:18px}
  .prose .lead::first-letter{font-size:60px}
  .pullquote{margin:36px 0}
  .article__foot{flex-direction:column;align-items:flex-start}
  .article{padding-bottom:64px}
}