/* ═══════════════════════════════════════════════════════════════════════════
   DIAMOND INTENT PAGES (/diamonds/...)

   These are public answer pages, so they open differently from the Finder: the
   Finder's hero is centred because it has exactly one thing to do, whereas this
   one is left-aligned and leads with a number, because the reader arrived with
   a question and the answer should be the first thing they read - not a search
   box they have already used elsewhere.

   Everything else is deliberately the same surface: the same navy field, the
   same dark "tray" that cut-out stones sit on, the same EB Garamond display
   face. A visitor who lands here from Google and then opens /diamond-finder/
   should not feel they have changed sites.

   Tokens are inherited in value from diamond-finder.css rather than imported,
   because the two stylesheets are loaded independently and a shared file would
   be a third thing to keep in sync for no benefit at this size.
   ═══════════════════════════════════════════════════════════════════════════ */

.tdpi {
    --tdpi-navy-900: #0d1b2c;
    --tdpi-navy-800: #14263c;
    --tdpi-navy-700: #1c3450;
    --tdpi-navy: #254264;
    --tdpi-gold: #c9a227;
    --tdpi-gold-soft: #e3cd8a;
    --tdpi-ink: #0f1720;
    --tdpi-body: #4b5663;
    --tdpi-muted: #6b7684;
    --tdpi-line: #e6e9ee;
    --tdpi-bg-soft: #f7f8fa;
    display: block;
}

/* ── BREADCRUMBS ───────────────────────────────────────────────────────────
   These live INSIDE the dark hero. The site header is position:absolute with
   z-index 1000 over the first 61px of the page, so a breadcrumb rendered above
   the hero is drawn underneath it and is simply invisible - which is what
   happened on the first build of this page. Keeping them in the hero also
   avoids a thin white band above the dark field, which looked like a rendering
   seam rather than a deliberate strip. */
.tdpi-crumbs { margin: 0 0 26px; }
.tdpi-crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    list-style: none; margin: 0; padding: 0;
    font-size: 12.5px; color: #8497ae;
}
.tdpi-crumbs li { display: flex; align-items: center; gap: 7px; }
.tdpi-crumbs li + li::before { content: "/"; color: #4d617d; }
.tdpi-crumbs a { color: #8497ae; text-decoration: none; border-bottom: 1px solid transparent; }
.tdpi-crumbs a:hover { color: #dce6f2; border-bottom-color: rgba(220,230,242,.4); }
.tdpi-crumbs [aria-current] { color: #dce6f2; }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.tdpi-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(130% 150% at 18% 0%, #1c3450 0%, #14263c 48%, #0d1b2c 100%);
    /* Top padding clears the absolutely-positioned 61px site header. */
    padding: 82px 20px 56px;
}

/* Two columns from 1000px up. At full desktop width a single left-aligned
   column left the right half of a very tall dark field completely empty, which
   read as an unfinished layout rather than as restraint. The right column is
   not decoration: it is the actual first stone this page recommends, at the
   size it deserves. */
.tdpi-hero__top {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px;
    align-items: center;
}
@media (min-width: 1000px) {
    .tdpi-hero__top { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 48px; }
}
.tdpi-hero__copy { min-width: 0; }

/* ── LEAD STONE ────────────────────────────────────────────────────────── */
.tdpi-lead {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 14px; text-decoration: none; padding: 8px;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tdpi-lead:hover { transform: translateY(-5px); }
/* A pool of light under the stone so it reads as lit on a surface rather than
   pasted onto the gradient. */
.tdpi-lead__glow {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
    width: 88%; aspect-ratio: 1/1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(150,195,255,.20) 0%, rgba(150,195,255,.06) 45%, transparent 70%);
    filter: blur(6px);
}
.tdpi-lead__img {
    position: relative; display: block;
    width: min(320px, 74vw); height: auto; max-height: 320px; object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(150,190,240,.22));
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.tdpi-lead:hover .tdpi-lead__img { transform: scale(1.04); }
.tdpi-lead__cap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.tdpi-lead__k {
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8ea1b8;
}
.tdpi-lead__v {
    font-family: 'EB Garamond', Georgia, serif; font-size: 30px; line-height: 1.1;
    color: #fff; font-variant-numeric: tabular-nums;
}
.tdpi-lead__n { font-size: 12.5px; color: #9fb0c6; }
/* The same slow dispersion sweep as the Finder hero, weighted to the left so it
   sits behind the headline rather than behind a centred search field. */
.tdpi-hero::before {
    content: ""; position: absolute; inset: -40% -20% auto -25%; height: 135%;
    background:
        radial-gradient(38% 42% at 20% 28%, rgba(120,190,255,.18) 0%, transparent 70%),
        radial-gradient(30% 36% at 70% 18%, rgba(201,162,39,.13) 0%, transparent 70%),
        radial-gradient(44% 44% at 46% 72%, rgba(160,130,255,.11) 0%, transparent 72%);
    filter: blur(30px); z-index: -1; pointer-events: none;
    animation: tdpi-drift 24s ease-in-out infinite alternate;
}
@keyframes tdpi-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
.tdpi-hero__inner { max-width: 1120px; margin: 0 auto; }

.tdpi-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tdpi-gold-soft); margin: 0 0 16px;
}
.tdpi-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--tdpi-gold);
    box-shadow: 0 0 0 3px rgba(201,162,39,.18);
    animation: tdpi-pulse 2.8s ease-in-out infinite;
}
@keyframes tdpi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.tdpi-h1 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(31px, 4.6vw, 52px); line-height: 1.1; font-weight: 500;
    color: #fff; margin: 0 0 16px; letter-spacing: -.4px; max-width: 17ch;
}
.tdpi-lede {
    font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.68;
    color: #b9c6d6; margin: 0; max-width: 68ch;
}

/* ── THE QUICK ANSWER ──────────────────────────────────────────────────────
   The reason the page exists, given the weight that implies. Numbers are
   tabular so the row stays optically aligned as inventory moves. Every cell is
   conditionally rendered server-side: a suppressed statistic leaves a narrower
   row rather than an empty box, which is why this is a flexible grid and not a
   fixed four-column one. */
.tdpi-answer {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; margin: 34px 0 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 26px 54px -30px rgba(0,0,0,.75);
}
.tdpi-answer__cell {
    display: flex; flex-direction: column; gap: 5px;
    padding: 22px 22px 20px;
    background: linear-gradient(180deg, rgba(28,52,80,.72) 0%, rgba(18,34,54,.72) 100%);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tdpi-answer__k {
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #90a4bd;
}
.tdpi-answer__v {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(25px, 2.7vw, 33px); line-height: 1.12; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.tdpi-answer__sep { color: #7f93ad; margin: 0 3px; }
.tdpi-answer__n { font-size: 12px; line-height: 1.45; color: #8ea1b8; }

.tdpi-hero__note {
    font-size: 13px; line-height: 1.72; color: #92a4ba; margin: 0; max-width: 78ch;
}

/* ── RESULTS ───────────────────────────────────────────────────────────── */
.tdpi-results { padding: 62px 20px 56px; }
.tdpi-results__inner { max-width: 1120px; margin: 0 auto; }

.tdpi-sechead { margin-bottom: 26px; }
.tdpi-sechead h2 {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(25px, 3vw, 33px);
    color: var(--tdpi-navy); margin: 0 0 8px; font-weight: 500;
}
.tdpi-sechead p { font-size: 14.5px; line-height: 1.65; color: var(--tdpi-body); margin: 0; max-width: 74ch; }

.tdpi-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 15px;
}
.tdpi-item {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--tdpi-line); border-radius: 14px; background: #fff;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tdpi-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(13,27,44,.34);
    border-color: #c8d3e0;
}
/* Same dark tray as the brief cards. The stones arrive background-free from
   /ai-search/stone.php, so a light tile would waste the cut-out and leave white
   stones washed out against near-white. */
.tdpi-item__media {
    position: relative; display: block; aspect-ratio: 1/1;
    background:
        radial-gradient(115% 85% at 50% 0%, rgba(120,160,215,.18) 0%, rgba(120,160,215,0) 62%),
        linear-gradient(168deg, #22364f 0%, #16273c 58%, #121f31 100%);
}
.tdpi-item__img {
    width: 100%; height: 100%; object-fit: contain; display: block; padding: 14px;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(150,190,240,.16));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tdpi-item:hover .tdpi-item__img { transform: scale(1.06); }

/* Natural / Lab-Grown on every card, never only on one of the two. The hero
   states how many of each are below; an unlabelled card would make that claim
   uncheckable. Quiet by design - it is a fact, not a badge. */
.tdpi-item__type {
    position: absolute; top: 8px; left: 8px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 999px;
    backdrop-filter: saturate(140%) blur(3px); -webkit-backdrop-filter: saturate(140%) blur(3px);
}
.tdpi-item__type.is-nat {
    background: rgba(255,255,255,.16); color: #eaf1fa;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.tdpi-item__type.is-lab {
    background: rgba(122,169,232,.26); color: #dbe9fb;
    box-shadow: inset 0 0 0 1px rgba(150,190,240,.38);
}

.tdpi-item__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px 14px; }
.tdpi-item__title { font-size: 13.5px; font-weight: 700; color: var(--tdpi-navy); line-height: 1.3; }
.tdpi-item__specs { font-size: 11.5px; color: var(--tdpi-muted); }
.tdpi-item__price {
    font-size: 16px; font-weight: 700; color: var(--tdpi-ink);
    font-variant-numeric: tabular-nums; margin-top: 5px;
}

.tdpi-results__foot {
    font-size: 12.5px; line-height: 1.7; color: var(--tdpi-muted);
    margin: 22px 0 0; max-width: 82ch;
}
.tdpi-results__foot a { color: var(--tdpi-navy); }

.tdpi-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.tdpi-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 700;
    text-decoration: none; border: 1px solid var(--tdpi-line);
    color: var(--tdpi-navy); background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.tdpi-btn:hover { transform: translateY(-2px); border-color: #c3d0e0; box-shadow: 0 12px 26px -14px rgba(13,27,44,.4); }
.tdpi-btn--primary {
    background: var(--tdpi-navy); border-color: var(--tdpi-navy); color: #fff;
}
.tdpi-btn--primary:hover { background: #1c3450; color: #fff; }

/* ── BUYING GUIDANCE ───────────────────────────────────────────────────── */
.tdpi-guide { background: var(--tdpi-bg-soft); border-top: 1px solid var(--tdpi-line); padding: 62px 20px; }
.tdpi-guide__inner { max-width: 1120px; margin: 0 auto; }
.tdpi-guide__inner > h2 {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(25px, 3vw, 33px);
    color: var(--tdpi-navy); margin: 0 0 30px; font-weight: 500;
}
.tdpi-guide__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.tdpi-guide__item { position: relative; padding-top: 30px; border-top: 1px solid #dfe4ea; }
.tdpi-guide__num {
    position: absolute; top: 0; left: 0;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    color: var(--tdpi-gold); font-variant-numeric: tabular-nums;
}
.tdpi-guide__item h3 {
    font-size: 16.5px; line-height: 1.34; font-weight: 700;
    color: var(--tdpi-ink); margin: 0 0 9px;
}
.tdpi-guide__item p { font-size: 14px; line-height: 1.72; color: var(--tdpi-body); margin: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.tdpi-faq { padding: 62px 20px; }
/* Container matches every other section (1120px, same left edge) while the
   accordion keeps an 820px reading measure inside it. Centring the whole block
   instead put this heading ~150px right of "What to know before you buy"
   directly above it, which read as a broken grid rather than as emphasis. */
.tdpi-faq__inner { max-width: 1120px; margin: 0 auto; }
.tdpi-faq__inner > h2 {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(25px, 3vw, 33px);
    color: var(--tdpi-navy); margin: 0 0 22px; font-weight: 500;
}
.tdpi-faq__item { border-bottom: 1px solid var(--tdpi-line); max-width: 860px; }
.tdpi-faq__item summary {
    list-style: none; cursor: pointer; padding: 17px 34px 17px 0; position: relative;
    font-size: 15.5px; font-weight: 700; color: var(--tdpi-ink); line-height: 1.45;
}
.tdpi-faq__item summary::-webkit-details-marker { display: none; }
.tdpi-faq__item summary::after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--tdpi-muted); border-bottom: 2px solid var(--tdpi-muted);
    transform: rotate(45deg); transition: transform .22s ease;
}
.tdpi-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.tdpi-faq__item summary:hover { color: var(--tdpi-navy); }
.tdpi-faq__a { padding: 0 0 19px; }
.tdpi-faq__a p { font-size: 14.5px; line-height: 1.75; color: var(--tdpi-body); margin: 0; }

/* ── RELATED / DISCOVERY GRAPH ─────────────────────────────────────────── */
.tdpi-related { background: var(--tdpi-bg-soft); border-top: 1px solid var(--tdpi-line); padding: 58px 20px 64px; }
.tdpi-related__inner { max-width: 1120px; margin: 0 auto; }
.tdpi-related__inner > h2 {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(23px, 2.6vw, 29px);
    color: var(--tdpi-navy); margin: 0 0 22px; font-weight: 500;
}
.tdpi-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 15px; }
.tdpi-rel {
    display: flex; flex-direction: column; gap: 9px;
    padding: 20px 20px 18px; background: #fff;
    border: 1px solid var(--tdpi-line); border-radius: 14px; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tdpi-rel:hover { transform: translateY(-3px); border-color: #c3d0e0; box-shadow: 0 16px 32px -18px rgba(13,27,44,.36); }
.tdpi-rel__h { font-size: 15.5px; font-weight: 700; color: var(--tdpi-navy); line-height: 1.34; }
.tdpi-rel__q {
    font-family: 'EB Garamond', Georgia, serif; font-size: 15px;
    color: var(--tdpi-muted); line-height: 1.45; flex: 1;
}
.tdpi-rel__cta { font-size: 12.5px; font-weight: 700; color: var(--tdpi-gold); letter-spacing: .01em; }
.tdpi-related__more { font-size: 13.5px; color: var(--tdpi-muted); margin: 22px 0 0; line-height: 1.9; }
.tdpi-related__more a { color: var(--tdpi-navy); }

/* ── INDEX PAGE (/diamonds/) ───────────────────────────────────────────── */
.tdpi-hero--index .tdpi-h1 { max-width: 20ch; }
.tdpi-index { padding: 62px 20px 70px; }
.tdpi-index__inner { max-width: 1120px; margin: 0 auto; }
.tdpi-index__h {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(25px, 3vw, 33px);
    color: var(--tdpi-navy); margin: 0 0 26px; font-weight: 500;
}
.tdpi-index__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.tdpi-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--tdpi-line); border-radius: 16px;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.tdpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(13,27,44,.42);
    border-color: #c3d0e0;
}
/* One continuous tray, full-bleed, exactly as on the Finder's brief cards. */
.tdpi-card__stage {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: center; gap: 8px; padding: 22px 18px 24px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,160,215,.20) 0%, rgba(120,160,215,0) 62%),
        linear-gradient(168deg, #22364f 0%, #16273c 58%, #121f31 100%);
}
.tdpi-card__stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
}
/* Square slots so every stone is judged inside the same optical box - without
   it a wide emerald sprawls next to an undersized round and the silhouette
   difference reads as a layout bug rather than as shape. */
.tdpi-card__slot { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1/1; }
.tdpi-card__img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 7px 9px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(150,190,240,.18));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tdpi-card:hover .tdpi-card__img { transform: translateY(-4px) scale(1.05); }
.tdpi-card__slot:nth-child(2) .tdpi-card__img { transition-delay: .035s; }
.tdpi-card__slot:nth-child(3) .tdpi-card__img { transition-delay: .07s; }
.tdpi-card__slot:nth-child(4) .tdpi-card__img { transition-delay: .105s; }

.tdpi-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 17px; flex: 1; }
.tdpi-card__h { font-size: 16px; font-weight: 700; color: var(--tdpi-navy); line-height: 1.32; }
.tdpi-card__q {
    font-family: 'EB Garamond', Georgia, serif; font-size: 15.5px; line-height: 1.4;
    color: var(--tdpi-muted); flex: 1;
}
.tdpi-card__foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--tdpi-line);
}
.tdpi-card__meta { font-size: 12.5px; color: var(--tdpi-muted); }
.tdpi-card__meta strong { color: var(--tdpi-ink); font-variant-numeric: tabular-nums; }
.tdpi-card__cta { font-size: 12.5px; font-weight: 700; color: var(--tdpi-gold); white-space: nowrap; }
.tdpi-index__note {
    font-size: 13.5px; line-height: 1.8; color: var(--tdpi-muted);
    margin: 28px 0 0; max-width: 76ch;
}
.tdpi-index__note a { color: var(--tdpi-navy); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Still has to clear the absolutely-positioned site header. */
    .tdpi-hero { padding: 74px 18px 40px; }
    .tdpi-crumbs { margin-bottom: 18px; }
    .tdpi-hero__top { gap: 26px; }
    .tdpi-lead { order: -1; }   /* the stone leads on a phone, then the words */
    .tdpi-lead__img { width: min(216px, 58vw); max-height: 216px; }
    .tdpi-lead__v { font-size: 25px; }
    .tdpi-h1 { max-width: none; }
    .tdpi-answer { grid-template-columns: repeat(2, 1fr); margin: 26px 0 18px; }
    .tdpi-answer__cell { padding: 16px 15px 15px; }
    .tdpi-answer__v { font-size: 23px; }
    .tdpi-results, .tdpi-guide, .tdpi-faq, .tdpi-related, .tdpi-index { padding: 44px 18px; }
    .tdpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tdpi-actions .tdpi-btn { flex: 1 1 100%; }
    .tdpi-guide__grid { gap: 22px; }
}
@media (max-width: 400px) {
    /* One number per row rather than two cramped ones - a price range that wraps
       mid-figure is worse than a taller block. */
    .tdpi-answer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .tdpi-hero::before, .tdpi-dot { animation: none; }
    .tdpi-item, .tdpi-item__img, .tdpi-card, .tdpi-card__img, .tdpi-rel, .tdpi-btn,
    .tdpi-faq__item summary::after { transition: none; }
    .tdpi-item:hover, .tdpi-card:hover, .tdpi-rel:hover, .tdpi-btn:hover { transform: none; }
    .tdpi-item:hover .tdpi-item__img, .tdpi-card:hover .tdpi-card__img { transform: none; }
}

/* Intent pages carry real photographs now too - same reasoning and the same
   measured grey as the finder's result tiles. See diamond-finder.css. */
.tdpi-item__media { aspect-ratio: 757 / 600; background: #c6c6c7; }
.tdpi-item__img { padding: 0; object-fit: contain; filter: none; }
.tdpi-item__type {
    background: rgba(22, 35, 58, .82); color: #fff; border-color: rgba(255,255,255,.18);
}
/* The lead stone renders up to 320px on the dark hero, far too large to hide a
   keying defect - so it is a photograph on its own light card rather than a
   floating cut-out. */
.tdpi-lead__img {
    background: #c6c6c7;
    border-radius: 16px;
    padding: 0;
    filter: none;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .42);
}