/* ============================================================
   Cindy & Bob, article page styles
   ============================================================ */

/* Text highlight when selecting (cb.css points to an undefined color, which made selection invisible) */
::selection{background:#D9F36B;color:#241F2E}
::-moz-selection{background:#D9F36B;color:#241F2E}
.article-body,.tldr,.faq,.article-title{-webkit-user-select:text;user-select:text}

.article-hero{padding:34px 0 10px}
.article-hero .wrap,.article-body,.faq{max-width:780px;margin-inline:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.98rem;font-weight:700;color:var(--ink-soft);margin-bottom:16px}
.crumbs a{color:var(--teal-deep)}
.crumbs a:hover{text-decoration:underline}
.article-title{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.3px;margin-bottom:16px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--ink-soft);font-weight:700;font-size:1rem;margin-bottom:24px}
.article-meta .by{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.article-meta .avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;font-size:.95rem}

/* Featured image: fixed wide shape, never taller than the screen allows */
.article-figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);aspect-ratio:1200/630;max-height:440px;width:100%;background:var(--cream-2)}
.article-figure img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.article-figure .ph-band{width:100%;height:100%;display:grid;place-items:center}
.article-figure .ph-band svg{width:90px;height:90px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Body copy */
.article-body{padding-top:6px}
.article-body p{margin:0 0 1.15em}
.article-body h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.2;margin:1.8em 0 .6em}
.article-body h3{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:1.4em 0 .5em}
.article-body ul,.article-body ol{margin:0 0 1.15em 1.3em}
.article-body li{margin-bottom:.4em}
.article-body strong{font-weight:800}

/* Links inside the story: clearly visible and easy to tap */
.article-body p a,.article-body li a,.article-body figcaption a,.faq .a a,.tldr a{color:var(--violet-deep);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.article-body p a:hover,.article-body li a:hover,.faq .a a:hover{color:var(--coral-deep)}

/* The gist box */
.tldr{background:var(--lime-soft);border-left:6px solid var(--lime-deep);border-radius:var(--radius-sm);padding:18px 22px;font-size:1.08rem;margin:10px 0 0}
.tldr strong{display:block;font-family:var(--display);font-weight:600;font-size:1.15rem;margin-bottom:4px}

/* Infographics */
.inline-graphic{margin:1.6em 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.inline-graphic svg,.inline-graphic img{display:block;width:100%;height:auto}
.inline-graphic figcaption{margin-top:12px;text-align:center;font-size:.98rem;color:var(--ink-soft);font-style:italic}

/* FAQ */
.faq{margin-top:40px}
.faq h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,1.95rem);margin-bottom:16px}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:800;list-style:none;position:relative;padding-right:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--violet)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 20px 18px;color:var(--ink-soft)}

/* Video: wide videos fill the column; Shorts are tall and sit side by side */
.video-row{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:1em 0 1.6em}
.video-embed{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow-soft)}
.video-embed.short{aspect-ratio:9/16;width:100%;max-width:320px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.related{padding-top:40px}

@media(max-width:680px){
  .article-hero{padding:22px 0 6px}
  .article-figure{border-radius:var(--radius-sm)}
  .inline-graphic{padding:10px;margin-inline:-2vw}
  .video-embed.short{max-width:300px}
}