/* Deft Digital Media — Blog page and guide posts (Oct 24, 2026). design-system/DECISIONS.md: studio light, Sunflower as a fill on
   light and text only on obsidian, Geist, contour light, light-double rim on the lens, white 1px glowing rim on dark. Uses home.css
   tokens, light.css (contour, light-double) and work-row.css (closing row, .ddm-ow-sr). Pages: pages/blog.html,
   partials/blog-post.html. Script: scripts/blog.js. Placeholder version: source/archive/blog-placeholder-2026-10-24/. */

/* ---------- Blog page: opening (v2, Oct 24: the guides are listed beside a lens that turns to the one you point at) ---------- */
.ddm-x .ddm-bl-top { position:relative; padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,112px); }
.ddm-x .ddm-bl-digits { opacity:.85; -webkit-mask:radial-gradient(70% 70% at 100% 20%,#000 15%,transparent 100%); mask:radial-gradient(70% 70% at 100% 20%,#000 15%,transparent 100%); }
.ddm-x .ddm-bl-top > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 60%,transparent); mask:linear-gradient(180deg,#000 60%,transparent); }
.ddm-x .ddm-bl-hero .ddm-bl-title { font-size:clamp(2.6rem,4.6vw,4.6rem); max-width:12ch; }
.ddm-x .ddm-bl-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.ddm-x .ddm-bl-title { max-width:14ch; font-size:clamp(2.8rem,5.6vw,5.4rem); line-height:.9; letter-spacing:-.058em; margin-bottom:28px; }
.ddm-x .ddm-bl-title > span { display:block; }
.ddm-x :is(.ddm-bl-title,.ddm-bp-title,.ddm-bl-all-title) .ddm-mark { background-image:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); }
.ddm-x .ddm-bl-title .ddm-mark { white-space:nowrap; }
.ddm-x .ddm-bl-lead { max-width:46ch; margin:0; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); }

/* Lens + guide list */
.ddm-x .ddm-bl-hero-pick { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:center; }
.ddm-x .ddm-bl-lens { position:relative; aspect-ratio:3/4; border-radius:999px; overflow:hidden; background:var(--lens-bg); box-shadow:0 40px 70px -40px rgb(0 0 0/.45); }
.ddm-x .ddm-bl-lens img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; scale:1.08; filter:blur(8px);
  transition:opacity .7s var(--ease), scale 1.1s var(--ease), filter .7s var(--ease); }
.ddm-x .ddm-bl-lens img.is-on { opacity:1; scale:1; filter:none; }
.ddm-x .ddm-bl-rows .ddm-eyebrow { margin-bottom:12px; }
.ddm-x .ddm-bl-rows ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ddm-x .ddm-bl-row { border-bottom:1px solid var(--line); }
.ddm-x .ddm-bl-row a { display:flex; align-items:center; gap:14px; padding:14px 6px 14px 0; transition:padding .45s var(--ease); }
.ddm-x .ddm-bl-row-thumb { display:none; }
.ddm-x .ddm-bl-row-text { display:grid; gap:4px; flex:1; min-width:0; }
.ddm-x .ddm-bl-row small { font:500 .66rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-bl-row b { font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.2; font-weight:600; letter-spacing:-.025em; color:var(--ink-2); transition:color .3s var(--ease); }
.ddm-x .ddm-bl-row .ddm-arrow { opacity:0; translate:-8px 0; transition:opacity .3s var(--ease), translate .45s var(--ease); }
.ddm-x .ddm-bl-row.is-on a { padding-left:10px; }
.ddm-x .ddm-bl-row.is-on b { color:var(--ink); text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:5px; }
.ddm-x .ddm-bl-row.is-on .ddm-arrow { opacity:1; translate:0 0; }

/* Shared meta line: a mono label, then plain text */
.ddm-x .ddm-bl-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0; font:500 .72rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-bl-meta b { font-weight:500; color:var(--ink); padding:5px 9px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-bl-card-go { display:inline-flex; align-items:center; gap:8px; font-weight:500; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:4px; text-underline-offset:6px; transition:text-underline-offset .3s var(--ease); }
.ddm-x .ddm-bl-card-go .ddm-arrow { transition:translate .4s var(--ease); }
/* The whole card is one link laid over it (keeps the light-double orbit running in Chrome, see DECISIONS 5e) */
.ddm-x .ddm-bl-card-link { position:absolute; inset:0; z-index:8; border-radius:inherit; }

/* ---------- Blog page: the client path as the filter (same look as the service pages' path bar, styles/service.css) ---------- */
.ddm-x .ddm-bl-all { position:relative; padding-block:clamp(24px,4vw,56px) 0; }
.ddm-x .ddm-bl-all-title { font-size:clamp(2rem,4vw,3.4rem); margin-bottom:clamp(24px,3vw,36px); }
.ddm-x .ddm-bl-path { margin-bottom:clamp(32px,4vw,52px); }
.ddm-x .ddm-bl-path ol { display:flex; align-items:center; margin:0; padding:6px; list-style:none; border-radius:999px; overflow-x:auto; scrollbar-width:none;
  background:var(--paper); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 24px 48px -32px rgb(0 0 0/.3); }
.ddm-x .ddm-bl-path ol::-webkit-scrollbar { display:none; }
.ddm-x .ddm-bl-path li { display:flex; align-items:center; flex:1 0 auto; }
/* dotted line between steps */
.ddm-x .ddm-bl-path li:not(.is-side)::after { content:""; flex:1 1 auto; min-width:20px; height:2px; margin-inline:8px 12px; border-radius:2px;
  background:radial-gradient(circle,rgb(17 17 17/.26) 1px,transparent 1.4px) 0 50% / 6px 2px repeat-x; }
.ddm-x .ddm-bl-path li:nth-last-child(2) { flex-grow:0; }
.ddm-x .ddm-bl-path li:nth-last-child(2)::after { content:none; }
.ddm-x .ddm-bl-path li.is-side { flex:none; position:relative; }
.ddm-x .ddm-bl-path li.is-side:last-child { margin-left:clamp(10px,2vw,28px); padding-left:clamp(10px,2vw,28px); }
.ddm-x .ddm-bl-path li.is-all { margin-right:clamp(10px,2vw,28px); padding-right:clamp(10px,2vw,28px); }
.ddm-x .ddm-bl-path li.is-side:last-child::before, .ddm-x .ddm-bl-path li.is-all::after { content:""; position:absolute; top:12px; bottom:12px; width:1px;
  background:repeating-linear-gradient(180deg,rgb(17 17 17/.22) 0 3px,transparent 3px 6px); }
.ddm-x .ddm-bl-path li.is-side:last-child::before { left:0; }
.ddm-x .ddm-bl-path li.is-all::after { right:0; left:auto; }
.ddm-x .ddm-bl-path button { display:flex; flex:none; align-items:center; gap:10px; padding:9px 18px 9px 12px; border:0; border-radius:999px; background:none; color:var(--ink);
  font:inherit; text-align:left; white-space:nowrap; cursor:pointer; transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-bl-path button:hover:not(:disabled) { background:rgb(17 17 17/.05); }
.ddm-x .ddm-bl-path button:disabled { cursor:default; opacity:.5; }
.ddm-x .ddm-bl-path i { flex:none; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.28); }
.ddm-x .ddm-bl-path .is-side i { background:transparent; box-shadow:none; border:1.5px dashed rgb(17 17 17/.34); }
.ddm-x .ddm-bl-path span { display:grid; line-height:1.15; }
.ddm-x .ddm-bl-path b { font-size:.9rem; font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-bl-path small { font:500 .64rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-bl-path [aria-pressed="true"] { background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 8px 20px -14px rgb(0 0 0/.45); }
.ddm-x .ddm-bl-path [aria-pressed="true"] i { border:0; background:#fff; box-shadow:0 0 0 3px var(--sun), 0 0 14px 2px rgb(255 199 0/.55); }

/* ---------- Blog page: cards (v2: no boxes; photo and text sit on the page, the photo takes the white rim on hover) ---------- */
.ddm-x .ddm-bl-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(36px,4vw,56px) clamp(18px,2vw,28px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-bl-grid.is-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ddm-x .ddm-bl-grid.is-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ddm-x .ddm-bl-card { position:relative; display:flex; flex-direction:column; border-radius:22px; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.ddm-x .ddm-bl-card[hidden] { display:none; }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-card-go { text-underline-offset:3px; }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-card-go .ddm-arrow { translate:4px 0; }
.ddm-x .ddm-bl-cover { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:22px; background:var(--lens-bg);
  transition:translate .5s var(--ease), box-shadow .5s var(--ease); }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-cover { translate:0 -6px;
  box-shadow:0 0 0 1px #fff, 0 0 1.5px 1px #fff, 0 0 10px rgb(255 255 255/.8), 0 30px 50px -26px rgb(0 0 0/.45); }
.ddm-x .ddm-bl-cover img { width:100%; height:100%; object-fit:cover; transition:scale 1s var(--ease), filter .6s var(--ease); }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-cover > img { scale:1.06; filter:brightness(.82); }
/* The short answer rises over the photo in frosted glass */
.ddm-x .ddm-bl-answer { position:absolute; left:10px; right:10px; bottom:10px; display:grid; gap:8px; padding:16px 18px; border-radius:16px; font-size:.92rem; line-height:1.45; color:var(--ink);
  background:rgb(255 255 255/.72); -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255/.6), 0 16px 30px -18px rgb(0 0 0/.4);
  opacity:0; translate:0 16px; transition:opacity .45s var(--ease), translate .6s var(--ease); }
.ddm-x .ddm-bl-answer small { font:500 .64rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue-ink); }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-answer { opacity:1; translate:0 0; }
@media (hover:none) { .ddm-x .ddm-bl-answer { display:none; } }
/* Project stories: the site in a small browser window on Canvas; the recording plays on hover */
.ddm-x .ddm-bl-cover.is-site { display:flex; flex-direction:column; padding:18px 18px 0; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-bl-card:is(:hover,:focus-within) .ddm-bl-cover.is-site { box-shadow:0 0 0 1px #fff, 0 0 1.5px 1px #fff, 0 0 10px rgb(255 255 255/.8), 0 30px 50px -26px rgb(0 0 0/.45); }
.ddm-x .ddm-bl-screen { position:relative; display:block; flex:1; min-height:0; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-bl-screen :is(img,video) { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.ddm-x .ddm-bl-screen video { opacity:0; transition:opacity .4s var(--ease); }
.ddm-x .ddm-bl-screen video.is-playing { opacity:1; }
.ddm-x .ddm-bl-bar { display:flex; align-items:center; gap:5px; height:24px; padding:0 10px; background:#fff; border-radius:10px 10px 0 0; box-shadow:inset 0 0 0 1px var(--line); font:500 .62rem/1 var(--mono); color:var(--ink-3); }
.ddm-x .ddm-bl-bar i { width:6px; height:6px; border-radius:50%; background:rgb(17 17 17/.16); }
.ddm-x .ddm-bl-bar span { margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ddm-x .ddm-bl-card-text { display:flex; flex-direction:column; gap:12px; flex:1; padding:20px 2px 0; }
.ddm-x .ddm-bl-card-title { font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.1; letter-spacing:-.035em; }
.ddm-x .ddm-bl-card-sum { color:var(--ink-2); font-size:.95rem; line-height:1.5; }
.ddm-x .ddm-bl-card .ddm-bl-card-go { margin-top:auto; padding-top:4px; font-size:.95rem; }
.ddm-x.is-ready .ddm-bl-grid > [data-reveal] { transition-delay:calc(var(--i,0) % 4 * .08s); }

/* ---------- Post: opening ---------- */
.ddm-x .ddm-bp-progress { position:fixed; inset:0 0 auto; z-index:59; height:3px; pointer-events:none; }
.ddm-x:has(.ddm-nav.is-v2) .ddm-bp-progress { display:none; } /* Nav B draws its own reading bar under the nav */
.ddm-x .ddm-bp-progress i { display:block; height:100%; width:100%; background:var(--sun); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
.ddm-x .ddm-bp-top { position:relative; padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(48px,6vw,88px); }
.ddm-x .ddm-bp-digits { opacity:.8; -webkit-mask:radial-gradient(60% 80% at 100% 30%,#000 15%,transparent 100%); mask:radial-gradient(60% 80% at 100% 30%,#000 15%,transparent 100%); }
.ddm-x .ddm-bp-top > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 60%,transparent); mask:linear-gradient(180deg,#000 60%,transparent); }
.ddm-x .ddm-bp-head-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(32px,6vw,96px); align-items:center; }
.ddm-x .ddm-bp-crumb a { text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:4px; }
.ddm-x .ddm-bp-title { font-size:clamp(2.4rem,4.8vw,4.6rem); line-height:.95; letter-spacing:-.055em; margin-bottom:24px; max-width:18ch; }
.ddm-x .ddm-bp-lede { max-width:56ch; font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink-2); margin-bottom:28px; }
.ddm-x .ddm-bp-byline { display:flex; align-items:center; gap:14px; margin:0; font-size:.92rem; color:var(--ink-2); }
.ddm-x .ddm-bp-byline a { color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:4px; }
.ddm-x .ddm-bp-faces { display:flex; flex:none; }
.ddm-x .ddm-bp-faces img { width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--canvas); background:var(--lens-bg); }
.ddm-x .ddm-bp-faces img + img { margin-left:-12px; }
.ddm-x .ddm-bp-lens { margin:0; justify-self:end; width:100%; aspect-ratio:3/4; border-radius:999px; overflow:hidden; background:var(--lens-bg); box-shadow:0 40px 70px -40px rgb(0 0 0/.45); }
.ddm-x .ddm-bp-lens img { width:100%; height:100%; object-fit:cover; }

/* ---------- Post: contents rail + body ---------- */
.ddm-x .ddm-bp-grid { display:grid; grid-template-columns:220px minmax(0,720px); justify-content:space-between; gap:clamp(32px,6vw,120px); padding-block:clamp(24px,3vw,40px) clamp(72px,9vw,128px); }
.ddm-x .ddm-bp-toc { position:sticky; top:calc(var(--nav-h) + 32px); align-self:start; }
.ddm-x .ddm-bp-toc .ddm-eyebrow { margin-bottom:16px; }
.ddm-x .ddm-bp-toc ol { list-style:none; margin:0; padding:0 0 0 2px; display:grid; gap:2px; border-left:1px solid var(--line); }
.ddm-x .ddm-bp-toc a { position:relative; display:block; padding:7px 0 7px 16px; margin-left:-2px; font-size:.9rem; line-height:1.3; color:var(--ink-3); border-left:3px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.ddm-x .ddm-bp-toc a:hover { color:var(--ink); }
.ddm-x .ddm-bp-toc a[aria-current="true"] { color:var(--ink); border-left-color:var(--sun); }

.ddm-x .ddm-bp-body { font-size:1.08rem; line-height:1.7; color:var(--ink); min-width:0; }
.ddm-x .ddm-bp-body > * + * { margin-top:clamp(36px,4vw,52px); }
.ddm-x .ddm-bp-body h2 { font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.05; letter-spacing:-.045em; margin-bottom:18px; }
.ddm-x .ddm-bp-body p { margin:0 0 1.1rem; color:var(--ink-2); }
.ddm-x .ddm-bp-body b { color:var(--ink); font-weight:600; }
.ddm-x .ddm-bp-body p a, .ddm-x .ddm-bp-body li a { color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:4px; }
.ddm-x .ddm-bp-body :is(ul,ol) { margin:0 0 1.1rem; padding-left:1.2em; color:var(--ink-2); }
.ddm-x .ddm-bp-body li { margin-bottom:.55rem; padding-left:.2em; }
.ddm-x .ddm-bp-body li::marker { color:var(--ink-3); }

/* The short answer: first thing under the opening */
.ddm-x .ddm-bp-answer { position:relative; padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px); border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 20px 40px -32px rgb(0 0 0/.35); }
.ddm-x .ddm-bp-answer::before { content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px; border-radius:0 4px 4px 0; background:var(--sun); }
.ddm-x .ddm-bp-answer .ddm-eyebrow { margin-bottom:10px; }
.ddm-x .ddm-bp-answer p:last-child { margin:0; font-size:1.15rem; line-height:1.55; color:var(--ink); }

/* Checklist and numbered steps */
.ddm-x .ddm-bp-body .ddm-bp-check { list-style:none; padding:0; }
.ddm-x .ddm-bp-check li { position:relative; padding-left:34px; }
.ddm-x .ddm-bp-check li::before { content:""; position:absolute; left:0; top:.35em; width:20px; height:20px; border-radius:50%; background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-bp-check li::after { content:""; position:absolute; left:6.5px; top:calc(.35em + 5px); width:6px; height:9px; border:solid var(--ink); border-width:0 2px 2px 0; rotate:40deg; }
.ddm-x .ddm-bp-body .ddm-bp-steps { list-style:none; padding:0; counter-reset:step; }
.ddm-x .ddm-bp-steps li { position:relative; counter-increment:step; padding:0 0 18px 52px; margin:0; }
.ddm-x .ddm-bp-steps li::before { content:counter(step); position:absolute; left:0; top:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid var(--line); font:500 .8rem/1 var(--mono); color:var(--ink); }
.ddm-x .ddm-bp-steps li:not(:last-child)::after { content:""; position:absolute; left:17px; top:40px; bottom:4px; border-left:1px dashed rgb(17 17 17/.22); }

/* Tables scroll sideways on phones instead of squashing */
.ddm-x .ddm-bp-tablewrap { overflow-x:auto; margin:0 0 1.1rem; border-radius:16px; border:1px solid var(--line); background:#fff; }
.ddm-x .ddm-bp-table { width:100%; min-width:560px; border-collapse:collapse; font-size:.95rem; line-height:1.4; }
.ddm-x .ddm-bp-table :is(th,td) { padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.ddm-x .ddm-bp-table tbody tr:last-child :is(th,td) { border-bottom:0; }
.ddm-x .ddm-bp-table thead th { font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--paper); }
.ddm-x .ddm-bp-table tbody th { font-weight:600; color:var(--ink); }
.ddm-x .ddm-bp-table td { color:var(--ink-2); }
.ddm-x .ddm-bp-table.is-plans td:first-of-type { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* A note from us, and quoted texts to copy */
.ddm-x .ddm-bp-note { padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px); border-radius:20px; background:var(--paper); border:1px dashed rgb(17 17 17/.22); }
.ddm-x .ddm-bp-note .ddm-eyebrow { margin-bottom:10px; color:var(--blue-ink); }
.ddm-x .ddm-bp-note p:last-child { margin:0; }
.ddm-x .ddm-bp-quote { display:grid; gap:12px; margin:0 0 1.1rem; }
.ddm-x .ddm-bp-quote p { margin:0; padding:16px 20px; border-radius:18px 18px 18px 4px; background:#fff; border:1px solid var(--line); font-size:1rem; }

/* Quick answers */
.ddm-x .ddm-bp-faq details { border-top:1px solid var(--line); }
.ddm-x .ddm-bp-faq details:last-child { border-bottom:1px solid var(--line); }
.ddm-x .ddm-bp-faq summary { display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; }
.ddm-x .ddm-bp-faq summary::-webkit-details-marker { display:none; }
.ddm-x .ddm-bp-faq summary::after { content:"+"; flex:none; font:400 1.4rem/1 var(--sans); transition:rotate .3s var(--ease); }
.ddm-x .ddm-bp-faq details[open] summary::after { rotate:45deg; }
.ddm-x .ddm-bp-faq details p { margin:0 0 20px; max-width:62ch; }

/* WhatsApp card: a small obsidian card with the white rim (DECISIONS 5e) */
.ddm-x .ddm-bp-cta { position:relative; overflow:hidden; isolation:isolate; padding:clamp(28px,4vw,48px); border-radius:24px; background:var(--obsidian); color:var(--on-dark);
  border:1px solid rgb(255 255 255/.92); box-shadow:0 0 1.5px #fff, 0 0 6px rgb(255 255 255/.4), 0 0 14px rgb(255 255 255/.18), 0 40px 70px -40px rgb(0 0 0/.6); }
.ddm-x .ddm-bp-cta .ddm-digits { opacity:.6; -webkit-mask:radial-gradient(ellipse 60% 90% at 100% 50%,#000 10%,transparent 75%); mask:radial-gradient(ellipse 60% 90% at 100% 50%,#000 10%,transparent 75%); }
.ddm-x .ddm-bp-cta .ddm-grain { mix-blend-mode:overlay; opacity:.5; }
.ddm-x .ddm-bp-cta-in { position:relative; z-index:2; display:grid; gap:14px; justify-items:start; max-width:46ch; }
.ddm-x .ddm-bp-cta .ddm-eyebrow { margin:0; color:var(--on-dark-2); }
.ddm-x .ddm-bp-cta h2 { margin:0; font-size:clamp(1.7rem,2.8vw,2.4rem); color:#fff; }
.ddm-x .ddm-bp-cta p:not(.ddm-eyebrow) { margin:0; color:var(--on-dark-2); }
.ddm-x .ddm-bp-cta .ddm-btn { margin-top:8px; }
.ddm-x .ddm-bp-cta small { font:500 .72rem/1.3 var(--mono); letter-spacing:.06em; color:var(--on-dark-2); }
.ddm-x .ddm-bp-cta :is(a,button):focus-visible { outline-color:#fff; }

/* Keep reading: two cards side by side, photo beside the text */
.ddm-x .ddm-bl-grid.is-two .ddm-bl-card { flex-direction:row; gap:clamp(18px,2vw,28px); }
.ddm-x .ddm-bl-grid.is-two .ddm-bl-cover { flex:0 0 38%; aspect-ratio:4/5; }
.ddm-x .ddm-bl-grid.is-two .ddm-bl-card-text { padding-top:4px; }
.ddm-x .ddm-bp-more { padding-bottom:clamp(16px,3vw,40px); }
.ddm-x .ddm-bp-more-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:clamp(28px,3vw,40px); }
.ddm-x .ddm-bp-more-head h2 { font-size:clamp(2rem,4vw,3.4rem); }
.ddm-x .ddm-bp-more-head .ddm-link { margin-bottom:8px; }

/* ---------- Phones and tablets ---------- */
@media (max-width:1020px) {
  .ddm-x .ddm-bl-hero { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-bl-grid, .ddm-x .ddm-bl-grid.is-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ddm-x .ddm-bp-grid { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-bp-toc { position:static; padding:20px 22px; border-radius:18px; background:var(--paper); border:1px solid var(--line); }
  .ddm-x .ddm-bp-toc ol { border-left:0; padding:0; }
  .ddm-x .ddm-bp-toc a { padding:6px 0; margin:0; border:0; }
}
@media (max-width:760px) {
  .ddm-x .ddm-bl-hero-pick { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-bl-lens { display:none; }
  .ddm-x .ddm-bl-row-thumb { display:block; flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; }
  .ddm-x .ddm-bl-row.is-on a { padding-left:0; }
  .ddm-x .ddm-bl-grid, .ddm-x .ddm-bl-grid.is-two, .ddm-x .ddm-bl-grid.is-four { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-bl-grid:not(.is-two) .ddm-bl-cover { aspect-ratio:16/11; }
  .ddm-x .ddm-bl-grid.is-two .ddm-bl-cover { flex-basis:34%; }
  .ddm-x .ddm-bl-path ol { border-radius:22px; }
  .ddm-x .ddm-bp-head-grid { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-bp-lens { order:-1; justify-self:start; width:min(48%,200px); }
  .ddm-x .ddm-bp-body { font-size:1.02rem; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-bl-card, .ddm-x .ddm-bl-cover, .ddm-x .ddm-bl-cover img, .ddm-x .ddm-bl-lens img, .ddm-x .ddm-bl-answer { transition:none; }
  .ddm-x .ddm-bp-progress { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-bl-answer { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}