/* Dispatch: the article page, the hub, sections, tag and writer pages, and the story card used everywhere.
   A light reading surface built from the homepage's pieces (paper cards, photo boxes, pills, the segmented control).
   Colours come from the :root tokens in style.css, so the pages follow the reader's light or dark setting.
   Hover, everywhere: titles turn orange, arrow circles fill orange, photos ease in 4%. No underlines,
   except a thin, static one under links inside article text, where it helps reading. */

/* ---------- local tokens ---------- */
.dp, .dp-card {
  --dp-paper: #ffffff;
  --dp-edge: rgba(0,0,0,.06);
  --dp-ph: rgba(0,0,0,.05);
  --dp-go: #000000;
  --dp-go-ink: #ffffff;
  --t-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp, :root:not([data-theme="light"]) .dp-card {
    --dp-paper: #0f0f0f;
    --dp-edge: rgba(255,255,255,.09);
    --dp-ph: rgba(255,255,255,.06);
    --dp-go: #F9F9F9;
    --dp-go-ink: #000000;
  }
}
.dp { color: var(--ink); font-size: clamp(14px, calc(.5vw + 6.4px), 24px); }
.dp a { color: inherit; text-decoration: none; }

/* homepage pieces, on a light page */
.dp .hp-paper, .dp-card.hp-paper { background: var(--dp-paper); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05), inset 0 0 0 1px var(--dp-edge); }
.dp .hp-ph, .dp-card .hp-ph { background: var(--dp-ph); }
.dp .hp-ph.is-product { background: #ffffff; }
.dp .sy-go, .dp-card .sy-go { background: var(--dp-go); color: var(--dp-go-ink); }
.dp a:hover .sy-go, .dp a:focus-visible .sy-go, .dp button:hover .sy-go, .dp button:focus-visible .sy-go,
.dp-card:hover .sy-go, .dp-card:has(.dp-card__link:focus-visible) .sy-go { background: #E85002; color: #ffffff; }
.dp a:hover .sy-go svg, .dp a:focus-visible .sy-go svg, .dp-card:hover .sy-go svg, .dp-card:has(.dp-card__link:focus-visible) .sy-go svg { transform: rotate(45deg); }
.dp .hp-pill { color: var(--ink); }
.dp .hp-tagpill { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.dp a.hp-tagpill { transition: color .25s ease; }
.dp a.hp-tagpill:hover, .dp a.hp-tagpill:focus-visible { color: var(--acc-text); }
.dp :focus-visible { outline-color: var(--ink); }

.dp-label { display: block; margin: 0 0 .8em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- page frames ----------
   Every Dispatch page is on the page deck (home.css .pg-*): breadcrumbs on the black, then one card (.pg-sheet) that
   holds the title block (template-parts/page-head.php) and the content on the shared width. The article keeps a
   comfortable reading measure inside it, left-aligned to the shared content edge. */
.dp-art { --dp-fs: clamp(17px, calc(.25vw + 15.5px), 20px); --dp-measure: calc(var(--dp-fs) * 34); }

/* ---------- the story card (template-parts/post-card.php) ---------- */
.dp-card { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.dp-card__ph { position: relative; aspect-ratio: 16 / 10; }
.dp-card__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dp-card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 1.1em 1.05em .8em; }
.dp-card__tag { font-size: var(--t-label); font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dp-card__tag time { letter-spacing: .06em; }
.dp-card__title { margin: .55em 0 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.22; letter-spacing: -0.02em; color: inherit; text-wrap: pretty; transition: color .25s ease; }
.dp-card__link { color: inherit; text-decoration: none; }
.dp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1.75em; }
.dp-card__dek { margin: .7em 0 0; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.dp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; padding-top: 1.3em; }
.dp-card__by { display: flex; flex-direction: column; gap: .2em; min-width: 0; margin: 0; font-size: var(--t-meta); line-height: 1.3; color: var(--ink-3); }
.dp-card__author { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-card .hp-score { z-index: 2; }

.dp-card:hover .dp-card__title, .dp-card:has(.dp-card__link:focus-visible) .dp-card__title, .dp-card__link:focus-visible { color: var(--acc-text); }
.dp-card:hover .hp-ph img, .dp-card:has(.dp-card__link:focus-visible) .hp-ph img { transform: scale(1.04); }
.dp-card:has(.dp-card__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@supports selector(:has(*)) { .dp-card__link:focus-visible { outline: 0; } }

/* the big one: photo beside the text */
.dp-card--lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dp-card--lead .dp-card__ph { aspect-ratio: auto; min-height: 24em; }
.dp-card--lead .dp-card__body { padding: 1.9em 2em 1.2em; }
.dp-card--lead .dp-card__title { margin-top: .75em; font-size: calc(var(--t-h2) * 1.3); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.dp-card--lead .dp-card__dek { margin-top: 1em; max-width: 42ch; font-size: var(--t-lead); line-height: 1.45; }

/* a list row: small square photo beside the headline */
.dp-card--row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 1.1em; align-items: center; padding: 1.05em 0; }
.dp-card--row .dp-card__ph { aspect-ratio: 1; border-radius: .9em; }
.dp-card--row .dp-card__body { padding: 0; }
.dp-card--row .dp-card__title { margin-top: .45em; }
.dp-card--row .dp-card__link::after { border-radius: .9em; }

/* ---------- listing pages: title block, section switcher, top stories, river, pages ---------- */
.dp-head .pg-h1 { overflow-wrap: anywhere; }
/* the section switcher sits in the title block's right-hand column, on the content's right edge */
.dp-head .pg-aside { justify-self: end; max-width: 100%; font-size: 1em; line-height: 1.2; }

/* the section switcher: the homepage's segmented control, made of links */
.dp-seg { flex: none; }
.dp-seg a { position: relative; z-index: 1; display: inline-flex; align-items: center; flex: none; padding: 0 1.4em; border-radius: 999px; color: var(--ink-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; transition: color .25s ease; }
.dp-seg a:hover { color: var(--ink); }
.dp-seg a[aria-current="page"] { background: #C8470A; color: #F9F9F9; box-shadow: 0 2px 10px rgba(200,71,10,.28); }
.dp-seg a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* top stories: the lead across the width (photo beside the text), the next three in a row under it */
.dp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; margin-bottom: 4.5em; }
.dp-top .dp-card--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dp-top.is-solo .dp-card--lead .dp-card__ph { min-height: 28em; }
.dp-side { display: flex; flex-direction: row; padding: .4em 0; }
.dp-side > .dp-card--row { flex: 1 1 0; padding: 1.1em 1.4em; }
.dp-side > .dp-card--row + .dp-card--row { border-left: 1px solid var(--line); }

.dp-more { margin-top: 4.5em; }
.dp-more__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-bottom: 1.75em; }
.dp-more__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
.dp-latest .dp-more__head { margin-bottom: 1.5em; }

.dp-river { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.dp-river--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dp-pages { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1em; margin-top: 3em; }
.dp-pages__step.is-newer { justify-self: start; padding: 0 1.5em 0 .1875em; }
.dp-pages__step.is-older { justify-self: end; }
.dp-pages__step.is-newer .sy-go svg { transform: rotate(-90deg); }
.dp .dp-pages__step.is-newer:hover .sy-go svg, .dp .dp-pages__step.is-newer:focus-visible .sy-go svg { transform: rotate(-135deg); }
.dp-pages__nums { display: flex; align-items: center; gap: .25em; }
.dp-pages__nums .page-numbers { display: inline-grid; place-items: center; min-width: 2.75em; height: 2.75em; padding: 0 .7em; border-radius: 999px; font-size: var(--t-ui); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color .25s ease; }
.dp-pages__nums a.page-numbers:hover, .dp-pages__nums a.page-numbers:focus-visible { color: var(--acc-text); }
.dp-pages__nums .page-numbers.current { background: #C8470A; color: #F9F9F9; }
.dp-pages__nums .page-numbers.dots { min-width: 0; padding: 0 .2em; }

.dp-empty { max-width: 46em; padding: 2.6em 2.8em 2.6em; }
.dp-empty__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-h2) * 1.15); line-height: 1.1; letter-spacing: -0.03em; }
.dp-empty__text { margin: .9em 0 1.8em; max-width: 52ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

/* ---------- the article ---------- */
/* the breadcrumbs end with the headline: one line, cut with an ellipsis where the screen runs out (the padding and
   negative margins keep the 44px tap targets of touch screens inside the clipped box, without moving the text) */
.dp-art .pg-crumbs { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: -12px 0 -12px; padding-top: calc(.6em + 12px); padding-bottom: 12px; }
.dp-art .pg-crumbs { pointer-events: none; }
.dp-art .pg-crumbs a { pointer-events: auto; }
/* the title block at an article size: a bigger headline, a wider standfirst, the byline under it */
.dp-story__head { padding-bottom: 2.6em; }
.dp-story__head .pg-h1 { max-width: 23ch; font-size: clamp(30px, calc(2.6vw + 16px), 68px); overflow-wrap: break-word; }
.dp-story__head .pg-lede { margin-top: .85em; max-width: 54ch; font-size: clamp(18px, calc(.45vw + 14.6px), 23px); }
/* the byline: the dots sit in the gaps; one that would start a new line falls outside the box and is clipped */
.dp-story__head .pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1.3em; overflow: hidden; margin: calc(1.7em - 4px) -4px -4px; padding: 4px; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dp-story__head .pg-meta > span { position: relative; }
.dp-story__head .pg-meta > span + span::before { content: "·"; position: absolute; left: -.8em; }
.dp-story__head .pg-meta a { font-weight: 600; color: var(--ink); transition: color .25s ease; }
.dp-story__head .pg-meta a:hover, .dp-story__head .pg-meta a:focus-visible { color: var(--acc-text); }

.dp-hero { margin: 0 0 clamp(28px, 3vw, 52px); }
.dp-hero__frame { overflow: hidden; border-radius: 1.75em; background: var(--dp-ph); }
.dp-hero__frame img { display: block; width: 100%; height: auto; }
.dp-hero figcaption { display: flex; flex-wrap: wrap; gap: .25em .9em; margin-top: .9em; max-width: 80ch; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); }

.dp-story__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.dp-main { min-width: 0; max-width: var(--dp-measure); }

/* the verdict: score, one line, buy it if / skip it if */
.dp-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4em 2em; align-items: start; max-width: var(--dp-measure); margin: 0 0 2.6em; padding: 1.9em 2.1em; }
.dp-verdict.no-score { grid-template-columns: minmax(0, 1fr); }
.dp-verdict__score { display: grid; place-content: center; width: 6.6em; aspect-ratio: 1; margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); text-align: center; }
.dp-verdict__score b { display: block; font-family: var(--display); font-weight: 500; font-size: 2.6em; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.dp-verdict__score span { display: block; margin-top: .45em; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dp-verdict .dp-label { margin: .3em 0 .7em; }
.dp-verdict__line { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(21px, calc(.7vw + 13.5px), 28px); line-height: 1.2; letter-spacing: -0.022em; text-wrap: pretty; }
.dp-verdict__if { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 1.2em 2em; margin-top: 1.5em; padding-top: 1.35em; border-top: 1px solid var(--line); }
.dp-verdict__if h3 { margin: 0 0 .5em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dp-verdict__if p { margin: 0; font-size: clamp(15px, calc(.15vw + 13.5px), 17px); line-height: 1.45; }
.dp-verdict__how { display: inline-flex; align-items: center; margin-top: 1.5em; padding: .35em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-meta); font-weight: 600; transition: color .25s ease; }
.dp-verdict__how:hover, .dp-verdict__how:focus-visible { color: var(--acc-text); }

/* the phone in the story */
.dp-rail { min-width: 0; max-width: var(--dp-measure); margin: 0 0 2.6em; }
.dp-phone { padding: 1.3em 1.3em 1.2em; color: var(--ink); }
.dp-phone .dp-label { margin-bottom: 1.1em; }
.dp-phone__top { position: relative; display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 1.1em; align-items: center; }
.dp-phone__ph { aspect-ratio: 1; border-radius: 1em; }
.dp-phone__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dp .dp-phone__ph.is-product img { object-fit: contain; padding: 8%; }
.dp-phone__id { min-width: 0; }
.dp-phone__brand { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; font-size: var(--t-label); font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--ink-3); }
.dp-phone__brand .hp-tagpill { padding: .15em .6em; font-size: var(--t-label); letter-spacing: 0; text-transform: none; }
.dp-phone__name { display: block; margin-top: .3em; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.15); line-height: 1.12; letter-spacing: -0.025em; transition: color .25s ease; }
.dp-phone__name::after { content: ""; position: absolute; inset: 0; }
.dp-phone__top:hover .dp-phone__name, .dp-phone__name:focus-visible { color: var(--acc-text); }
.dp-phone__top:hover .hp-ph img { transform: scale(1.04); }
.dp-phone__price { display: grid; gap: .15em; margin: .5em 0 0; }
.dp-phone__price b { font-family: var(--display); font-weight: 500; font-size: var(--t-ui); font-variant-numeric: tabular-nums; }
.dp-phone__price span { font-size: var(--t-meta); line-height: 1.35; color: var(--ink-3); }
.dp-phone__specs { margin: 1.2em 0 0; }
.dp-phone__specs > div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .8em; padding: .65em 0; border-top: 1px solid var(--line); }
.dp-phone__specs dt { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); }
.dp-phone__specs dd { margin: 0; font-size: var(--t-ui); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dp-phone__go { width: 100%; margin-top: 1.1em; }

/* ---------- the story text: Satoshi at a comfortable size and measure, Space Grotesk headings ---------- */
.dp-body { max-width: var(--dp-measure); font-size: var(--dp-fs); line-height: 1.62; color: var(--ink); overflow-wrap: break-word; }
.dp-body > * { margin-top: 0; margin-bottom: 1.15em; }
.dp-body > :last-child { margin-bottom: 0; }
.dp-body h2 { margin: 2.1em 0 .65em; font-family: var(--display); font-weight: 500; font-size: 1.5em; line-height: 1.15; letter-spacing: -0.028em; text-wrap: balance; }
.dp-body h3 { margin: 1.8em 0 .55em; font-family: var(--display); font-weight: 500; font-size: 1.2em; line-height: 1.25; letter-spacing: -0.02em; }
.dp-body h4 { margin: 1.6em 0 .5em; font-family: var(--font); font-size: 1em; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.dp-body h2 + h3 { margin-top: .9em; }
.dp-body strong, .dp-body b { font-weight: 700; }
.dp-body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--acc-text) 60%, transparent); transition: color .25s ease, text-decoration-color .25s ease; }
.dp-body a:hover, .dp-body a:focus-visible { color: var(--acc-text); text-decoration-color: currentColor; }
.dp-body ul, .dp-body ol { padding-left: 1.35em; }
.dp-body li { margin: .45em 0; padding-left: .25em; }
.dp-body li::marker { color: var(--ink-3); }
.dp-body ol > li::marker { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; }
.dp-body li > ul, .dp-body li > ol { margin: .4em 0; }
.dp-body blockquote { margin: 2em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--ink); font-size: 1.08em; line-height: 1.5; }
.dp-body blockquote p { margin: 0 0 .6em; }
.dp-body blockquote p:last-of-type { margin-bottom: 0; }
.dp-body blockquote cite, .dp-body .wp-block-quote cite, .dp-body .wp-block-pullquote cite { display: block; margin-top: .9em; font-size: var(--t-meta); font-style: normal; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.dp-body .wp-block-pullquote { margin: 2em 0; padding: 1.1em 0; border: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: left; }
.dp-body .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.dp-body .wp-block-pullquote p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(24px, calc(1vw + 15px), 34px); line-height: 1.16; letter-spacing: -0.03em; text-wrap: balance; }
.dp-body figure { margin: 2.2em 0; }
.dp-body img { height: auto; border-radius: 1em; }
.dp-body figcaption, .dp-body .wp-element-caption { margin: .8em 0 0; font-size: var(--t-meta); line-height: 1.45; text-align: left; color: var(--ink-3); }
.dp-body hr, .dp-body .wp-block-separator { height: 1px; margin: 2.6em 0; border: 0; background: var(--line-2); opacity: 1; }
.dp-body code { padding: .1em .35em; border-radius: .3em; background: var(--bg-2); font-size: .86em; }
.dp-body pre { overflow-x: auto; padding: 1em 1.2em; border-radius: .8em; background: var(--bg-2); font-size: .82em; line-height: 1.5; }
.dp-body pre code { padding: 0; background: none; }
/* tables: hairlines, tabular numbers, and they scroll sideways on their own when wider than the phone */
.dp-body .wp-block-table { margin: 2.2em 0; padding-bottom: .5em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dp-body table { width: 100%; border-collapse: collapse; font-size: .84em; line-height: 1.45; font-variant-numeric: tabular-nums; }
.dp-body .wp-block-table table { min-width: 30em; }
.dp-body th, .dp-body td, .dp-body .wp-block-table th, .dp-body .wp-block-table td { padding: .8em 1.2em .8em 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dp-body th:last-child, .dp-body td:last-child { padding-right: 0; }
.dp-body thead th, .dp-body .wp-block-table thead { border-bottom: 0; }
.dp-body thead th { vertical-align: bottom; font-family: var(--font); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.dp-body tbody th { font-weight: 600; }
.dp-body .wp-block-table figcaption { position: sticky; left: 0; margin-top: .9em; }
/* embeds: video and social posts fit the column */
.dp-body iframe, .dp-body video, .dp-body embed, .dp-body object { max-width: 100%; border: 0; }
.dp-body .wp-block-embed { margin: 2.2em 0; }
.dp-body .wp-block-embed__wrapper iframe { border-radius: 1em; }
.dp-body > iframe, .dp-body p > iframe, .dp-body .wp-block-embed:not(.wp-has-aspect-ratio) iframe[src*="youtube"], .dp-body .wp-block-embed:not(.wp-has-aspect-ratio) iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1em; }
.dp-body .twitter-tweet, .dp-body .instagram-media { margin-left: auto !important; margin-right: auto !important; }
.dp-body__pages { display: flex; gap: .5em; margin-top: 2em; font-size: var(--t-ui); }

/* the end of the story: Copy link, tags */
.dp-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2em 2em; margin-top: 2.8em; padding-top: 1.8em; border-top: 1px solid var(--line); }
.dp-copy { border: 0; font: inherit; font-size: 1em; color: var(--ink); cursor: pointer; }
.dp-copy .sy-go svg { transform: none !important; }
.dp .dp-copy.is-done .sy-go { background: #E85002; color: #ffffff; }
.dp-tags { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }

/* related phones */
.dp-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.dp-phones > li { display: flex; min-width: 0; }
.dp-mini { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--ink); }
.dp-mini__ph { aspect-ratio: 4 / 3; }
.dp-mini__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dp .dp-mini__ph.is-product img { object-fit: contain; padding: 8%; }
.dp-mini__body { display: flex; flex: 1; flex-direction: column; padding: 1em 1.05em .8em; }
.dp-mini__name { display: block; margin-top: .5em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; transition: color .25s ease; }
.dp-mini__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; padding-top: 1.1em; }
.dp-mini__price { font-size: var(--t-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-mini:hover .dp-mini__name, .dp-mini:focus-visible .dp-mini__name { color: var(--acc-text); }
.dp-mini:hover .hp-ph img, .dp-mini:focus-visible .hp-ph img { transform: scale(1.04); }

/* the switcher needs about 28em: below that it goes under the title, on the left */
@media (max-width: 1100px) {
  .dp-head .pg-head__grid.has-aside { grid-template-columns: minmax(0, 1fr); row-gap: 2em; align-items: start; }
  .dp-head .pg-aside { justify-self: start; }
}

/* ---------- wide screens: the phone card rides beside the story ---------- */
@media (min-width: 1100px) {
  .dp-story__grid.has-rail { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "verdict rail" "main rail"; column-gap: clamp(40px, 4vw, 80px); }
  .dp-story__grid.has-rail > .dp-verdict { grid-area: verdict; }
  .dp-story__grid.has-rail > .dp-main { grid-area: main; }
  .dp-story__grid.has-rail > .dp-rail { grid-area: rail; align-self: start; position: sticky; top: 24px; margin: 0; max-width: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .dp-river { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .dp-rail { margin-bottom: 2.4em; }
  .dp-phone__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6em; }
  .dp-phone__go { width: auto; }
}
@media (max-width: 980px) {
  .dp { font-size: 15px; }
  .dp-story__head { padding-bottom: 2em; }
  .dp-river { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
  .dp-side { flex-direction: column; padding: .4em 1.2em; }
  .dp-side > .dp-card--row { padding: 1em 0; }
  .dp-side > .dp-card--row + .dp-card--row { border-left: 0; border-top: 1px solid var(--line); }
  .dp-top { gap: .75em; margin-bottom: 3.5em; }
  .dp-more { margin-top: 3.5em; }
  .dp-more__head { flex-direction: column; align-items: flex-start; gap: 1.2em; }
  .dp-card--lead .dp-card__ph, .dp-top.is-solo .dp-card--lead .dp-card__ph { min-height: 20em; }
}
@media (min-width: 640px) and (max-width: 980px) {
  .dp-more__head { flex-direction: row; align-items: flex-end; }
}
@media (max-width: 760px) {
  .dp-river--3 { grid-template-columns: minmax(0, 1fr); }
  .dp-top .dp-card--lead, .dp-top.is-solo .dp-card--lead { grid-template-columns: minmax(0, 1fr); }
  .dp-card--lead .dp-card__ph, .dp-top.is-solo .dp-card--lead .dp-card__ph { min-height: 0; aspect-ratio: 16 / 10; }
  .dp-card--lead .dp-card__body { padding: 1.2em 1.1em .9em; }
  .dp-card--lead .dp-card__title { margin-top: .6em; font-size: calc(var(--t-h2) * 1.15); }
  .dp-verdict { grid-template-columns: minmax(0, 1fr); padding: 1.5em 1.4em; }
  .dp-verdict__score { width: auto; aspect-ratio: auto; display: flex; align-items: baseline; gap: .5em; place-content: start; box-shadow: none; text-align: left; }
  .dp-verdict__score span { margin: 0; }
  .dp-verdict .dp-label { margin-top: 0; }
}
@media (max-width: 560px) {
  .dp-river { grid-template-columns: minmax(0, 1fr); }
  .dp-seg a { padding: 0 1em; }
  .dp-phone__specs { display: block; }
  .dp-phone__go { width: 100%; }
  .dp-pages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nums nums" "newer older"; row-gap: 1.2em; }
  .dp-pages__nums { grid-area: nums; justify-self: center; flex-wrap: wrap; justify-content: center; }
  .dp-pages > :first-child { grid-area: newer; }
  .dp-pages > :last-child { grid-area: older; }
  .dp-empty { padding: 1.8em 1.5em; }
  .dp-hero__frame { border-radius: 1.2em; }
}
@media (max-width: 400px) {
  .dp-story__head .pg-h1 { font-size: 30px; }
  .dp-phones { grid-template-columns: minmax(0, 1fr); }
  .dp-verdict { padding: 1.3em 1.2em; }
}
@media (pointer: coarse) {
  .dp-seg a, .dp-pages__nums .page-numbers { min-height: 44px; }
  .dp-seg { height: 52px; }
  .dp-story__head .pg-meta a, .dp-verdict__how { padding-top: .5em; padding-bottom: .5em; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-card:hover .hp-ph img, .dp-card:has(.dp-card__link:focus-visible) .hp-ph img, .dp-mini:hover .hp-ph img, .dp-phone__top:hover .hp-ph img { transform: none; }
}