/* ============================================================
   Insights — the article archive.

   Everything here is scoped to this section. The one shared class
   reused is .page-header, which is EXTENDED (.insights-header,
   .article-header) and never redefined: it dresses seven other
   pages, and a page stylesheet restyling it has broken this site
   before.

   All colour, type and rounding comes from the tokens in
   global.css. No new palette is introduced.
   ============================================================ */

/* ---------- index header ---------- */
.insights-header .header-lead {
    max-width: 46rem;
    margin: 1.25rem auto 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    line-height: 1.7;
}

.insights-count {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

.insights-count .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
}

/* ============================================================
   FEATURED CAROUSEL

   Slides are a FIXED height. Titles here run from six to fifteen
   words and the photographs are every shape; left to size itself
   the block would change height on every rotation, shunting the
   grid below it up and down. The title and excerpt are clamped for
   the same reason.
   ============================================================ */
.fcar {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--brand-dark);
    margin-bottom: 6rem;
}

.fcar-viewport { overflow: hidden; }

.fcar-track {
    display: flex;
    transition: transform .72s var(--ease-out-soft);
    will-change: transform;
}

.fcar-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    height: 500px;
}

.fcar-media {
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
}

.fcar-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stops the photograph fighting the panel where the two meet. */
.fcar-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 70%, rgba(2, 48, 71, .35) 100%);
}

.fcar-panel {
    background: linear-gradient(155deg, #023047 0%, #012A38 100%);
    padding: 3.25rem 3rem 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.fcar-panel::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, .22), transparent 70%);
    top: -130px;
    right: -130px;
}

.fcar-flag {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: var(--radius-full);
    background: rgba(0, 180, 216, .18);
    border: 1px solid rgba(0, 180, 216, .35);
    color: var(--brand-accent);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 1.3rem;
}

.fcar-slide h2 {
    position: relative;
    font-size: clamp(1.45rem, 2.1vw, 1.95rem);
    line-height: 1.26;
    color: var(--white);
    margin-bottom: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fcar-slide h2 a { color: var(--white); text-decoration: none; }
.fcar-slide h2 a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; }

.fcar-slide p {
    position: relative;
    color: rgba(255, 255, 255, .74);
    line-height: 1.7;
    font-size: .95rem;
    margin: 0 0 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fcar-meta {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .67rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 1.5rem;
}

.fcar-meta .sep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
    flex: none;
}

.fcar-go {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--white);
    font-weight: 600;
    font-size: .92rem;
    border-bottom: 2px solid var(--brand-accent);
    padding-bottom: .3rem;
    align-self: flex-start;
    text-decoration: none;
}

.fcar-go .arr { transition: transform .3s var(--ease-out-soft); }
.fcar-go:hover .arr { transform: translateX(6px); }

.fcar-ui {
    position: absolute;
    right: 3rem;
    bottom: 2.1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.fcar-count {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
}

.fcar-count b { color: var(--white); font-weight: 600; }

.fcar-btns { display: flex; gap: .5rem; }

.fcar-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--white);
    font-size: 1rem;
    line-height: 1;
    transition: all .25s var(--ease-out-soft);
}

.fcar-btn:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--bg-dark);
    transform: translateY(-2px);
}

.fcar-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }

/* Dots sit on the image side so they can never collide with the controls. */
.fcar-dots {
    position: absolute;
    left: 2.5rem;
    bottom: 2.25rem;
    z-index: 5;
    display: flex;
    gap: .5rem;
}

.fcar-dot {
    width: 26px; height: 4px;
    border-radius: 99px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .32);
    transition: all .3s;
}

.fcar-dot.on { background: var(--brand-accent); width: 40px; }
.fcar-dot:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; }

.fcar-prog {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px; width: 100%;
    background: rgba(255, 255, 255, .12);
    z-index: 6;
}

.fcar-prog i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-medium), var(--brand-accent));
}

/* 5s dwell — matches the JS timer. Change both together. */
.fcar.is-playing .fcar-prog i { animation: fcar-fill 5s linear forwards; }

@keyframes fcar-fill { from { width: 0; } to { width: 100%; } }

/* A carousel that moves on its own is the clearest possible case for this. */
@media (prefers-reduced-motion: reduce) {
    .fcar-track { transition: none; }
    .fcar.is-playing .fcar-prog i { animation: none; width: 100%; }
}

/* ---------- tiles ---------- */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.insight-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft), border-color .3s;
    height: 100%;
}

.insight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.insight-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

.insight-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-alt);
    flex-shrink: 0;
}

.insight-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease-out-soft);
}

.insight-card:hover .insight-media img { transform: scale(1.05); }

/* The category label.

   It used to float over the bottom-left of the image. That failed on a third
   of the archive: many of these featured images are designed banners with
   their own headline text burned into the artwork, plus one screenshot of a
   printed article, and the label landed squarely on top of the words. A scrim
   would only have muddied the artwork underneath, and moving the label to
   another corner just relocates the same bet.

   In the body it is legible over any image, and it matches the related cards
   on the article page, which already read this way. */
.insight-cat {
    display: block;
    margin-bottom: .55rem;
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.insight-body { padding: 1.5rem 1.5rem 0; flex: 1 1 auto; }

.insight-body h3 {
    font-size: 1.12rem;
    line-height: 1.4;
    margin: 0 0 .65rem;
    color: var(--text-main);
    transition: color .25s;
}

.insight-card:hover .insight-body h3 { color: var(--brand-primary); }

.insight-body p {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight-foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.5rem 1.5rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--text-light);
    text-transform: uppercase;
}

.insight-foot .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.insight-foot .arrow { margin-left: auto; color: var(--brand-primary); transition: transform .25s var(--ease-out-soft); }
.insight-card:hover .insight-foot .arrow { transform: translateX(4px); }

.insights-empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-light);
}

/* ============================================================
   ARTICLE
   ============================================================ */
.ins-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.article-header { text-align: center; padding-bottom: 8.5rem; }

.ins-crumb {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 1.5rem;
}

.ins-crumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ins-crumb a:hover { color: var(--brand-accent); }

.ins-kicker {
    display: inline-block;
    padding: .42rem .95rem;
    border-radius: var(--radius-full);
    background: rgba(0, 180, 216, .18);
    border: 1px solid rgba(0, 180, 216, .4);
    color: var(--brand-accent);
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

.article-header h1 {
    max-width: 52rem;
    margin: 0 auto;
    font-size: clamp(1.9rem, 3.6vw, 3.05rem);
    line-height: 1.16;
    color: var(--white);
}

.ins-byline { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 2.2rem; }

.ins-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-medium), var(--brand-accent));
    color: var(--bg-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.ins-byline-txt { text-align: left; line-height: 1.35; }
.ins-byline-txt .nm { font-weight: 600; font-size: .93rem; color: var(--white); }

.ins-byline-txt .dt {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.ins-hero { max-width: 1020px; margin: -6.5rem auto 0; padding: 0 1.5rem; position: relative; z-index: 2; }
.ins-hero img { width: 100%; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.ins-body {
    max-width: 1180px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 720px);
    gap: 4rem;
    justify-content: center;
}

.ins-rail { position: sticky; top: 100px; align-self: start; }

.ins-rail h4 {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 1rem;
    font-weight: 600;
}

.ins-toc { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 2.5rem; }

.ins-toc a {
    font-size: .86rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-decoration: none;
    padding: .5rem 0 .5rem .9rem;
    border-left: 2px solid var(--border);
    transition: all .2s;
}

.ins-toc a:hover { color: var(--brand-primary); border-left-color: var(--brand-medium); }
.ins-toc a.on { color: var(--brand-primary); border-left-color: var(--brand-primary); font-weight: 600; }

.ins-share { display: flex; gap: .5rem; }

.ins-sbtn {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .25s;
}

.ins-sbtn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); transform: translateY(-2px); }
.ins-sbtn svg { width: 15px; height: 15px; fill: currentColor; }

.ins-takeaways {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.8rem;
    margin: 0 0 2.75rem;
}

.ins-takeaways h4 {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 .9rem;
    font-weight: 700;
}

.ins-takeaways ul { margin: 0; padding-left: 1.1rem; }
.ins-takeaways li { margin-bottom: .55rem; font-size: .94rem; line-height: 1.6; color: var(--text-muted); }
.ins-takeaways li:last-child { margin-bottom: 0; }

/* The one place this site needs a real long-form prose scale. */
.ins-prose { font-size: 1.07rem; line-height: 1.82; color: var(--text-muted); }
.ins-prose p { margin: 0 0 1.5rem; }
.ins-prose > p:first-of-type { font-size: 1.22rem; line-height: 1.72; color: var(--text-main); }

.ins-prose h2 {
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 3.5rem 0 1.3rem;
    color: var(--text-main);
    padding-top: .6rem;
    scroll-margin-top: 100px;
}

.ins-prose h3 { font-size: 1.2rem; line-height: 1.45; margin: 2.4rem 0 .85rem; color: var(--text-main); scroll-margin-top: 100px; }
.ins-prose h4 { font-size: 1.05rem; line-height: 1.5; margin: 2rem 0 .75rem; color: var(--text-main); }
.ins-prose ul, .ins-prose ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.ins-prose li { margin-bottom: .55rem; }
.ins-prose a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.ins-prose a:hover { color: var(--brand-medium); }
.ins-prose strong { color: var(--text-main); }

.ins-prose figure { margin: 2.5rem 0; }
.ins-prose img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; }

.ins-prose figcaption {
    margin-top: .75rem;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-light);
    text-align: center;
}

.ins-author {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 3.5rem;
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.ins-author .ins-avatar { width: 56px; height: 56px; font-size: 1.15rem; }
.ins-author .nm { font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; margin-bottom: .3rem; }
.ins-author p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-light); }

.ins-source {
    margin-top: 1.5rem;
    font-size: .83rem;
    line-height: 1.6;
    color: var(--text-light);
    padding: 1rem 1.2rem;
    background: var(--bg-alt);
    border-radius: var(--radius-md);
}

.ins-source a { color: var(--brand-primary); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
    .ins-body { grid-template-columns: minmax(0, 720px); gap: 0; }
    .ins-rail { display: none; }
}

@media (max-width: 900px) {
    .fcar-slide { grid-template-columns: 1fr; height: auto; }
    .fcar-media { aspect-ratio: 16 / 9; }
    .fcar-panel { padding: 2.25rem 1.75rem 5rem; }
    .fcar-ui { right: 1.75rem; bottom: 1.5rem; }
    .fcar-dots { left: 1.75rem; bottom: 1.6rem; }
    .fcar { margin-bottom: 4rem; }
}

@media (max-width: 640px) {
    .insights-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .ins-hero { margin-top: -3rem; }
    .ins-prose { font-size: 1rem; }
    .ins-prose > p:first-of-type { font-size: 1.1rem; }
    .article-header { padding-bottom: 6rem; }
    .fcar-slide h2 { -webkit-line-clamp: 4; }
}