/* PhoneGearDaily: readable editorial hierarchy, shared by every page. */
:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --surface: #f5f5f8;
  --ink: #202028;
  --muted: #62626f;
  --violet: #5936c8;
  --lime: #eee9fc;
  --line: #dedee6;
  --max: 1200px;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-family: var(--ui); font-size: 1rem; line-height: 1.65; }
button, input, select, .cta { font-family: var(--ui); }
a { text-underline-offset: .2em; }
:is(h1,h2,h3) { overflow-wrap: anywhere; text-wrap: pretty; }
.wrap { width: min(var(--max), calc(100% - 64px)); }
.disclosure-bar { background: var(--surface); color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; padding: 8px 20px; }
.masthead { height: auto; min-height: 90px; gap: 20px; padding-block: 20px; flex-wrap: wrap; }
.logo { font-family: 'Archivo Black', 'Arial Black', var(--ui); font-weight: 900; font-size: clamp(1.25rem, 2.8vw, 2rem); letter-spacing: -.045em; gap: 8px; max-width: 100%; }
.logo svg { width: 32px; height: 36px; }
.logo > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }
button, .cta { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .9375rem; line-height: 1.4; padding: 10px 18px; }
button:hover { border-color: var(--violet); }
.search-button { display: inline-flex; align-items: center; gap: 10px; }
.search-button::before { content: ''; width: 14px; height: 14px; border: 1.7px solid currentColor; border-radius: 50%; }
.primary { background: var(--paper); color: var(--ink); border-block: 1px solid var(--line); }
.primary .wrap { height: auto; min-height: 54px; gap: 4px 22px; overflow: visible; white-space: normal; flex-wrap: wrap; padding-block: 4px; }
.primary a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; }
.primary a:hover, .primary a[aria-current="page"] { color: var(--violet); text-decoration: underline; }
.primary a:nth-last-child(-n+3) { color: var(--muted); }
.search-panel { background: var(--surface); border-bottom: 1px solid var(--line); padding: 24px 0; }
.search-row { align-items: start; }
.search-row input { min-width: 0; width: 100%; border: 1px solid var(--muted); border-radius: 10px; background: var(--paper); color: var(--ink); padding: 12px; }
#search-results a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.section { padding-top: 36px; }
.home-intro { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 56px; align-items: center; margin: 0 0 32px; }
.home-intro .intro-label { grid-column: 1 / -1; }
.home-intro .intro-label { color: var(--violet); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; margin-bottom: 12px; }
.home-intro h1 { font: 700 clamp(2rem, 3vw, 2.75rem)/1.12 var(--ui); letter-spacing: -.045em; margin: 0 0 18px; }
.home-intro p { color: var(--muted); font-size: 1.0625rem; max-width: 68ch; }
.home-intro p a { color: var(--ink); text-decoration: underline; }
.section-head { border-top: 1px solid var(--line); padding: 20px 0; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.section-head h1, .section-head h2 { font: 700 1.5rem/1.3 var(--ui); text-transform: none; letter-spacing: -.025em; }
.section-head > a { color: var(--violet); display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.section-head span { color: var(--muted); font-size: .875rem; font-weight: 400; }
.featured { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
.featured .lead { background: var(--surface); border-radius: 18px; overflow: hidden; }
.featured .lead .card-copy { padding: 8px 26px 26px; }
.featured .compact { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 20px; padding-block: 20px; }
.featured .compact:nth-child(2) { padding-top: 0; border-top: 0; }
.card .media { display: block; border-radius: 12px; background: var(--surface); align-self: start; }
.featured .lead .media { border-radius: 0; }
.card img { transition: none; }
.card:hover img { transform: none; }
.featured .lead img { aspect-ratio: 16/10; }
.featured .compact img { aspect-ratio: 4/3; }
.card h2, .card h3 { font: 650 1.375rem/1.3 var(--ui); letter-spacing: -.025em; margin: 5px 0 12px; }
.card h2 a:hover, .card h3 a:hover { text-decoration-thickness: 1px; }
.featured .lead h2, .featured .lead h3 { font-size: clamp(1.625rem, 2.3vw, 2rem); }
.featured .compact h2, .featured .compact h3 { font-size: 1.125rem; }
.card p { color: var(--muted); font-size: .9375rem; }
.card .meta, .meta { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.eyebrow { font-size: .75rem; line-height: 1.5; letter-spacing: .07em; padding-block: 10px; min-height: 38px; margin-top: 2px; }
.meta a { text-decoration: underline; }
.latest { background: var(--surface); color: var(--ink); margin-top: 56px; padding: 20px 0 32px; }
.section-head.inverse { border-color: var(--line); }
.latest .section-head { border-top: 0; }
.latest-grid { gap: 0 48px; }
.latest-grid a { grid-template-columns: 56px minmax(0,1fr); padding: 18px 0; border-color: var(--line); gap: 12px; }
.latest-grid time { font-size: .8125rem; color: var(--muted); }
.latest-grid b { display: none; }
.latest-grid span { font-weight: 600; line-height: 1.45; }
.latest-grid a:hover span { text-decoration: underline; }
.category-module { padding-top: 56px; }
.module-grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.module-lead h2, .module-lead h3 { font-size: 1.75rem; }
.mini h2, .mini h3 { font-size: 1.125rem; }
.guide-band { background: var(--surface); color: var(--ink); margin-top: 64px; padding: 32px 0 48px; }
.guide-grid { gap: 24px; }
.guide-grid .card h2, .guide-grid .card h3 { font-size: 1.0625rem; }
footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding-top: 52px; }
.footer-grid { grid-template-columns: 1.6fr repeat(4,minmax(0,1fr)); gap: 28px; }
.footer-grid .logo { font-size: 1.25rem; }
.footer-grid h3 { color: var(--ink); font-size: .8125rem; letter-spacing: .04em; }
.footer-grid > div > a { padding-block: 10px; min-height: 44px; font-size: .875rem; }
.footer-grid p, .copyright { color: var(--muted); font-size: .8125rem; }
.footer-grid a:hover { text-decoration: underline; }
.copyright { border-color: var(--line); }
.archive, .author-directory, .author-profile { padding-block: 44px 72px; }
.archive-title h1, .info h1, .author-directory > h1, .author-profile h1 { font: 700 clamp(2.25rem,5vw,3.5rem)/1.12 var(--ui); letter-spacing: -.045em; }
.archive-title p, .directory-intro, .author-profile-head p { font-size: 1.125rem; color: var(--muted); }
.archive-lead { border-bottom: 1px solid var(--line); }
.archive-lead .lead { grid-template-columns: 1.1fr 1fr; align-items: center; }
.archive-lead h2, .archive-lead h3 { font-size: clamp(1.75rem,3vw,2.5rem); }
.cards-grid, .cards-grid.three { gap: 40px 30px; }
.article-head { max-width: 960px; padding-top: 40px; }
.breadcrumbs { font-size: .875rem; margin-bottom: 20px; }
.breadcrumbs a { display: inline-block; padding-block: 8px; text-decoration: underline; }
.article-head h1 { font: 700 clamp(2rem,4.5vw,3.5rem)/1.12 var(--ui); letter-spacing: -.04em; }
.dek { color: var(--muted); font-size: clamp(1.125rem,2vw,1.375rem); line-height: 1.55; }
.byline { font-size: .875rem; color: var(--muted); }
.byline a { color: var(--ink); text-decoration: underline; }
.article-hero { width: min(1120px,calc(100% - 64px)); border-radius: 16px; overflow: hidden; background: var(--surface); }
.article-hero img { max-height: 600px; object-fit: contain; }
.article-grid { grid-template-columns: 160px minmax(0, 70ch); gap: 48px; padding-block: 40px; }
.share { border-top: 1px solid var(--line); font-size: .875rem; align-self: start; }
.share a { padding-block: 8px; text-decoration: underline; }
.article-body, .info-body { font-size: 1.1875rem; line-height: 1.8; overflow-wrap: anywhere; }
.article-body h2, .info-body h2 { font: 700 clamp(1.5rem,2.5vw,2rem)/1.25 var(--ui); letter-spacing: -.025em; margin-top: 40px; }
.article-body h3 { font: 650 1.375rem/1.35 var(--ui); }
.article-body a, .info-body a { color: var(--violet); text-decoration: underline; }
.standfirst { font-size: 1.375rem; line-height: 1.6; }
.affiliate-note, .method-note { background: var(--surface); border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0; font-family: var(--ui); font-size: .9375rem; }
.pick-box, .verdict-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; padding: 24px; font-family: var(--ui); }
.verdict-box h2, .pick-box h3 { font: 700 1.625rem/1.3 var(--ui); }
.cta, .article-body a.cta { background: var(--violet); color: var(--paper); border-color: var(--violet); text-decoration: none; }
.comparison, .article-author { font-family: var(--ui); }
.comparison-head, .article-author { border-top: 1px solid var(--line); }
.comparison-head p, .author-card p { color: var(--muted); }
.comparison-table-wrap { margin-inline: 0; border-radius: 10px; background: var(--paper); }
.comparison-table caption { background: var(--ink); color: var(--paper); }
.comparison-table thead th, .comparison-table tbody tr:nth-child(even), .pros-cons > div { background: var(--surface); color: var(--ink); }
.comparison-table { font-size: .875rem; }
.measurement-note, .image-disclaimer, .source-note { font-size: .8125rem!important; }
.product-copy h3 { font: 700 1.5rem/1.3 var(--ui); }
.product-best { background: var(--surface); color: var(--ink); font-size: .8125rem; }
.product-meta, .pros-cons { font-size: .9375rem; }
.author-avatar, .author-avatar.large { box-shadow: none; color: var(--paper); }
.author-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.author-card h2 { font: 700 1.5rem/1.3 var(--ui); }
.author-card a:last-child { text-decoration-color: var(--violet); text-decoration-thickness: 1px; }
.info-body code { background: var(--surface); }
#cable-checker { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-family: var(--ui); }
#cable-checker select { border-radius: 8px; color: var(--ink); background: var(--paper); border-color: var(--muted); }
#cable-checker button { border-radius: 8px; background: var(--violet); border-color: var(--violet); color: var(--paper); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.skip { background: var(--paper); color: var(--ink); border-radius: 8px; }
[id] { scroll-margin-top: 24px; }
@media (max-width: 900px) {
  .home-intro { display: block; }
  .featured { grid-template-columns: 1fr; gap: 20px; }
  .featured .lead { grid-row: auto; }
  .featured .compact { grid-template-columns: minmax(100px,1fr) minmax(0,3fr); }
  .featured .compact:nth-child(2) { padding-top: 20px; border-top: 1px solid var(--line); }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-lead { grid-column: span 2; }
  .guide-grid, .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid > div:first-child { grid-column: span 2; }
  .article-grid { grid-template-columns: minmax(0,1fr); gap: 24px; max-width: 760px; }
  .share { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
  .share b { margin-top: 0; }
  .archive-lead .lead { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 36px); }
  .disclosure-bar { font-size: .75rem; padding-inline: 18px; }
  .masthead { gap: 12px; min-height: 76px; padding-block: 14px; }
  .logo { font-size: 1.25rem; gap: 5px; }
  .logo svg { width: 24px; height: 30px; }
  .search-button { padding-inline: 12px; font-size: .8125rem; }
  .search-button::before { display: none; }
  .primary .wrap { gap: 0 20px; padding-block: 6px; }
  .primary a { font-size: .8125rem; }
  .home-intro { margin: 0 0 28px; }
  .home-intro h1 { font-size: 2rem; }
  .home-intro p { font-size: 1rem; }
  .section { padding-top: 28px; }
  .section-head h1, .section-head h2 { font-size: 1.375rem; }
  .featured .lead .card-copy { padding-inline: 20px; }
  .featured .compact { grid-template-columns: 96px minmax(0,1fr); gap: 16px; }
  .featured .compact h2, .featured .compact h3 { font-size: 1.0625rem; }
  .featured .compact .eyebrow { margin-top: 0; padding-top: 0; min-height: 24px; }
  .latest-grid, .module-grid, .cards-grid, .cards-grid.three { grid-template-columns: minmax(0,1fr); }
  .module-lead { grid-column: auto; }
  .module-grid { gap: 28px; }
  .mini { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; }
  .mini .eyebrow { padding-top: 0; margin-top: 0; min-height: 24px; }
  .guide-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .guide-grid .card { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; }
  .guide-grid .card h2, .guide-grid .card h3 { font-size: 1.125rem; }
  .footer-grid { gap: 24px; }
  .footer-grid > div:first-child { grid-column: span 2; }
  .footer-grid > div:last-child { grid-column: span 2; }
  .article-head h1 { font-size: 2rem; }
  .article-hero { width: calc(100% - 36px); border-radius: 12px; }
  .article-body, .info-body { font-size: 1.125rem; }
  .standfirst { font-size: 1.25rem; }
  .pick-box, .verdict-box { padding: 18px; margin-right: 0; }
  .search-row { flex-wrap: wrap; }
  .search-row input { flex-basis: 70%; }
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #15151a; --surface: #222229; --ink: #f2f2f7; --muted: #b5b5c2; --violet: #b9a6ff; --lime: #29233d; --line: #484852; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-contrast: more) { :root { --muted: var(--ink); --line: var(--ink); } }
@media (forced-colors: active) { button, .cta, input, select { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; } }