/* =====================================================================
 * PH SIM Registration — Design layer (2026-07-31)
 * Loaded AFTER psr.css. psr.css supplies structure; this file supplies
 * layout correction, elevation, rhythm and interaction polish.
 *
 * Why this exists:
 *  1. Kadence nests three padded containers (.wrap 16 + .content-container 24
 *     + .entry-content-wrap 24). On a 375px phone that left a 279px reading
 *     column — 26% of the screen spent on gutters.
 *  2. psr.css defines a generic `.wrap` rule which collides with Kadence's own
 *     <main class="wrap kt-clear">, double-applying padding and a max-width.
 *  3. Nothing in the original sheet had elevation, hover states, or heading
 *     top-margins, so every page read as one flat undifferentiated column.
 * ===================================================================== */

:root {
  /* Elevation — layered, low-opacity, tuned for white/near-white surfaces */
  --e-1: 0 1px 2px rgb(15 23 42 / 5%), 0 1px 3px rgb(15 23 42 / 6%);
  --e-2: 0 2px 4px rgb(15 23 42 / 5%), 0 4px 12px rgb(15 23 42 / 7%);
  --e-3: 0 4px 8px rgb(15 23 42 / 6%), 0 12px 28px rgb(15 23 42 / 10%);
  --ring: 0 0 0 3px rgb(3 105 161 / 14%);

  --gutter: 16px;
  --measure: 720px;   /* comfortable reading column */
  --shell: 1140px;    /* full-width sections */

  --sp-section: 48px; /* space between page sections */
  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --sp-section: 64px; }
}

/* =====================================================================
 * 1. LAYOUT — one gutter, not three
 * ===================================================================== */

/* Neutralise the psr `.wrap` rule where it lands on Kadence's <main>. */
main.wrap,
main.wrap.kt-clear {
  max-width: none;
  padding: 0;
  margin: 0;
}

.content-container.site-container {
  max-width: var(--shell);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Kadence boxes the entry and then pads it again — collapse that. */
.entry.content-bg.single-entry,
.entry.content-bg {
  margin-left: 0;
  margin-right: 0;
  box-shadow: none;
  border-radius: 0;
}

.entry-content-wrap {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .entry.content-bg.single-entry {
    border-radius: 14px;
    box-shadow: var(--e-1);
  }
  .entry-content-wrap { padding: 8px 32px 32px; }
}

/* Reading measure: text stays narrow, structural blocks may go wider. */
.entry-content > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.entry-content > .network-selector,
.entry-content > .quick-links,
.entry-content > .how-it-works,
.entry-content > .latest-updates,
.entry-content > .compare-pages,
.entry-content > .id-preview,
.entry-content > .final-cta,
.entry-content > .comparison-wrap,
.entry-content > .table-wrap {
  max-width: var(--shell);
}

/* Kill horizontal overflow from wide tables without squashing them. */
.comparison-wrap,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* =====================================================================
 * 2. TYPOGRAPHY — hierarchy and vertical rhythm
 * Headings previously had margin-top:0, so sections ran together.
 * ===================================================================== */

.entry-content h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 84px; /* anchor links clear the sticky header */
}
.entry-content h3 {
  font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.3rem);
  line-height: 1.3;
  font-weight: 650;
  margin: 1.8em 0 0.5em;
  scroll-margin-top: 84px;
}
.entry-content h4 {
  font-size: 1.02rem;
  font-weight: 650;
  margin: 1.5em 0 0.4em;
}
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

/* A quiet rule above each H2 gives the page visible section breaks. */
.entry-content h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--c-primary);
  opacity: .85;
}
.entry-content .faq h2::after,
.entry-content h2.no-rule::after { display: none; }

.entry-content p {
  margin: 0 0 1.15em;
  line-height: 1.72;
}
.entry-content ul,
.entry-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.entry-content li { margin-bottom: .5em; line-height: 1.65; }
.entry-content li::marker { color: var(--c-text-3); }

/* Inline links: readable, obviously clickable, not shouty. */
.entry-content p > a,
.entry-content li > a {
  color: var(--c-primary-dk);
  text-decoration: underline;
  text-decoration-color: rgb(3 105 161 / 35%);
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.entry-content p > a:hover,
.entry-content li > a:hover {
  color: var(--c-primary);
  text-decoration-color: currentColor;
}

/* Lead paragraph — the AEO answer block, should feel like a summary. */
.entry-content p.lead {
  font-size: clamp(1.03rem, 1rem + .3vw, 1.14rem);
  line-height: 1.62;
  color: var(--c-text);
  margin-bottom: 1.5em;
}

/* =====================================================================
 * 3. SECTIONS
 * ===================================================================== */

.entry-content > section { margin: var(--sp-section) auto; }
.entry-content > section:first-child { margin-top: 8px; }

.network-selector,
.quick-links,
.how-it-works,
.latest-updates,
.compare-pages,
.id-preview {
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.network-selector > h2,
.quick-links > h2,
.how-it-works > h2,
.latest-updates > h2,
.compare-pages > h2,
.id-preview > h2 { margin-top: 0; }

/* =====================================================================
 * 4. CARDS — the main complaint. Elevation + hover + proportion.
 * ===================================================================== */

.network-grid { gap: 12px; }
@media (min-width: 560px) { .network-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .network-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.network-card,
.quick-card,
.related-grid a,
.compare-item,
.home-updates a {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--e-1);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease);
  will-change: transform;
}
.network-card:hover,
.quick-card:hover,
.related-grid a:hover,
.compare-item:hover,
.home-updates a:hover {
  transform: translateY(-2px);
  box-shadow: var(--e-3);
  border-color: rgb(3 105 161 / 45%);
}
.network-card:focus-visible,
.quick-card:focus-visible,
.related-grid a:focus-visible,
.home-updates a:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: var(--e-2), var(--ring);
}

/* Network card.
   The markup renders a .chip AND a <strong> containing the same carrier name
   ("Globe"/"Globe"), which pushed every tile to ~153px and made the picker
   1,300px tall on a phone. The chip is kept in the DOM (the :has() accent
   rules below key off it) but hidden — the coloured top edge already carries
   the carrier identity, so the tile only needs name + portal hint. */
.entry-content .network-card,
.network-selector .network-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 14px 14px 13px;
  min-height: 0;
}
/* psr.css already sets `.network-card .chip { display: inline-flex }` at the
   same specificity, and LiteSpeed's CSS combining makes source order
   unreliable — so this override is deliberately more specific. */
.entry-content .network-card .chip,
.network-selector .network-card .chip { display: none !important; }
.network-card strong {
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--c-text);
  font-weight: 650;
}
.network-card > span:last-child {
  font-size: .74rem;
  color: var(--c-text-3);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* Carrier accent as a top edge rather than a heavy border. */
.network-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--accent, var(--c-primary));
  opacity: .9;
}
.network-card:has(.chip-globe), .network-card:has(.globe)  { --accent: var(--c-globe); }
.network-card:has(.chip-smart), .network-card:has(.smart)  { --accent: var(--c-smart); }
.network-card:has(.chip-dito),  .network-card:has(.dito)   { --accent: var(--c-dito); }
.network-card:has(.chip-tm),    .network-card:has(.tm)     { --accent: var(--c-tm); }
.network-card:has(.chip-tnt),   .network-card:has(.tnt)    { --accent: var(--c-tnt); }
.network-card:has(.chip-sun),   .network-card:has(.sun)    { --accent: var(--c-sun); }
.network-card:has(.chip-gomo),  .network-card:has(.gomo)   { --accent: var(--c-gomo); }

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: rgb(3 105 161 / 10%);
  color: var(--c-primary-dk);
}

.quick-card,
.related-grid a,
.home-updates a {
  display: block;
  padding: 16px 18px;
}
.quick-card strong,
.related-grid a strong { font-size: 1rem; font-weight: 650; }

.related-grid { gap: 12px; }
.related-grid a { color: var(--c-text); }
.related-grid a span { color: var(--c-text-2); font-size: .87rem; line-height: 1.5; }

/* =====================================================================
 * 5. STEPS — a real timeline, not a bullet list
 * ===================================================================== */

.steps { position: relative; list-style: none; padding-left: 0; margin: 28px 0; counter-reset: psr-step; }

.steps > li.step {
  position: relative;
  list-style: none;
  padding: 0 0 30px 56px;
  counter-increment: psr-step;
}
.steps > li.step::before {
  content: counter(psr-step);
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--e-1);
  z-index: 1;
}
/* Connector line between step markers. */
.steps > li.step::after {
  content: "";
  position: absolute;
  left: 18.5px; top: 40px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--c-border), rgb(226 232 240 / 25%));
}
.steps > li.step:last-child { padding-bottom: 4px; }
.steps > li.step:last-child::after { display: none; }
.steps > li.step > h3 { margin: 6px 0 .45em; font-size: 1.08rem; }

/* Screenshot placeholders were 375px tall and dominated every guide.
   Cap them until real captures land. */
.step-figure { margin: 14px 0 0; }
.step-figure .placeholder {
  min-height: 96px;
  max-height: 150px;
  font-size: .8rem;
}
.step-figure figcaption {
  font-size: .78rem;
  color: var(--c-text-3);
  margin-top: 6px;
  line-height: 1.45;
}

/* =====================================================================
 * 6. CALLOUTS, TOC, FAQ
 * ===================================================================== */

.info {
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: .95rem;
  line-height: 1.6;
  border-left: 4px solid var(--c-primary);
  box-shadow: var(--e-1);
}
.info-note { border-left-color: var(--c-primary); }
.info-warn { border-left-color: var(--c-warn-bd); }
.info-err  { border-left-color: var(--c-err-bd); }
.info-ok   { border-left-color: var(--c-ok-bd); }
.info p:last-child { margin-bottom: 0; }

.taglish {
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--e-1);
  border-left: 4px solid var(--c-primary);
}
.taglish-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-primary-dk);
  margin: 0 0 6px;
}
.taglish p:last-child { margin-bottom: 0; }

.toc {
  border-radius: 14px;
  box-shadow: var(--e-1);
  padding: 4px 18px;
}
.toc summary {
  padding: 14px 0;
  font-size: .95rem;
  letter-spacing: .01em;
}
.toc[open] summary { border-bottom: 1px solid var(--c-border); margin-bottom: 10px; }
.toc ol { padding-left: 1.1em; margin-bottom: 14px; }
.toc li { margin-bottom: 0; }
.toc a {
  display: block;
  min-height: 0;
  line-height: 1.45;
  padding: 9px 0;
  font-size: .93rem;
  color: var(--c-text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover { color: var(--c-primary-dk); text-decoration: underline; }

/* FAQ accordion */
.entry-content details:not(.toc) {
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--e-1);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.entry-content details:not(.toc):hover { border-color: rgb(3 105 161 / 35%); }
.entry-content details:not(.toc)[open] { box-shadow: var(--e-2); }
.entry-content details:not(.toc) > summary {
  padding: 15px 28px 15px 0;
  font-weight: 620;
  font-size: .98rem;
  line-height: 1.45;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.entry-content details:not(.toc) > summary::-webkit-details-marker { display: none; }
.entry-content details:not(.toc) > summary::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-text-3);
  border-bottom: 2px solid var(--c-text-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.entry-content details:not(.toc)[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.faq-body { padding: 0 0 15px; font-size: .95rem; line-height: 1.65; color: var(--c-text-2); }
.faq-body p:last-child { margin-bottom: 0; }

/* =====================================================================
 * 7. BUTTONS + PORTAL CTA
 * ===================================================================== */

.btn, .btn-primary, .btn-go, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 650;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s var(--ease);
}
.btn-go, .btn-primary { box-shadow: var(--e-2); }
.btn-go:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--e-3); }
.btn-go:active, .btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
}
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary-dk); }

.btn-row, .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
@media (max-width: 480px) {
  .btn-row > .btn, .hero-actions > .btn,
  .btn-row > a, .hero-actions > a { flex: 1 1 100%; }
}

.portal-cta {
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--e-2);
  border: 1px solid rgb(4 120 87 / 25%);
  background: linear-gradient(180deg, #f2fbf7, #ecfdf5);
}
.portal-meta { font-size: .82rem; color: var(--c-text-2); line-height: 1.5; margin-top: 10px; }

/* =====================================================================
 * 8. AUTHOR, SOURCES, TRUST BAR
 * ===================================================================== */

.author-box {
  border-radius: 14px;
  box-shadow: var(--e-1);
  padding: 20px;
  gap: 18px;
  align-items: flex-start;
}
.author-avatar { box-shadow: var(--e-1); font-size: 1.05rem; letter-spacing: .02em; }
.author-box h3 { margin: 0 0 6px; font-size: 1.02rem; }
.author-box p { line-height: 1.6; }

.sources { border-top: 1px solid var(--c-border); padding-top: 16px; margin-top: 32px; }
.sources ul { padding-left: 1.15em; }
.sources li { margin-bottom: .4em; }

.trust-bar.psr-trust-bar {
  font-size: .8rem;
  letter-spacing: .01em;
  padding: 9px 16px;
  line-height: 1.45;
}

/* =====================================================================
 * 9. TOOLS
 * ===================================================================== */

.tool-card {
  border-radius: 16px;
  box-shadow: var(--e-2);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}
.tool-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
@media (min-width: 560px) { .tool-options { grid-template-columns: repeat(3, 1fr); } }
.tool-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 13px;
  border: 1.5px solid var(--c-border);
  border-radius: 11px;
  cursor: pointer;
  font-size: .93rem;
  font-weight: 550;
  background: var(--c-bg);
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              box-shadow .16s var(--ease);
}
.tool-option:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.tool-option:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
  box-shadow: var(--ring);
}
.tool-option input { accent-color: var(--c-primary); width: 18px; height: 18px; flex-shrink: 0; }
.tool-result { margin-top: 6px; }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* =====================================================================
 * 10. HEADER / NAV / FOOTER
 * ===================================================================== */

.site-header, #masthead {
  box-shadow: var(--e-1);
  border-bottom: 1px solid var(--c-border);
}
.site-branding a, .brand, .site-title a {
  font-weight: 750;
  letter-spacing: -.015em;
}
.main-navigation a, .header-navigation a {
  font-weight: 550;
  transition: color .16s var(--ease);
}
.main-navigation a:hover, .header-navigation a:hover { color: var(--c-primary); }

/* Kadence mobile drawer: give it room to breathe. */
.mobile-navigation a, .drawer-inner .menu-item a {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.site-footer p { line-height: 1.65; font-size: .9rem; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
 * 11. MOTION
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .network-card:hover, .quick-card:hover, .related-grid a:hover,
  .btn-go:hover, .btn-primary:hover { transform: none; }
}

/* =====================================================================
 * 12. GRID DENSITY — mobile was stacking everything one-per-row
 * .quick-grid rendered a single 293px column, so 11 tiles = 1,256px of
 * scrolling. The card markup also emits an empty <p></p> (a dropped icon
 * slot) which added dead vertical space to every tile.
 * ===================================================================== */

.entry-content .quick-grid,
.entry-content .home-updates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 700px) {
  .entry-content .quick-grid,
  .entry-content .home-updates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .entry-content .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.entry-content .quick-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 15px;
}
/* Empty paragraph slots left by the importer. */
.entry-content .quick-card p:empty,
.entry-content .network-card p:empty,
.entry-content .related-grid a p:empty { display: none; }

.entry-content .quick-card h3 {
  margin: 0;
  font-size: .96rem;
  line-height: 1.3;
  font-weight: 650;
  color: var(--c-text);
}
.entry-content .quick-card p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--c-text-2);
}
.entry-content .quick-card time {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-primary-dk);
}

/* Requirements checklist: two columns even on small screens. */
.entry-content .id-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  list-style: none;
  padding-left: 0;
}
@media (max-width: 420px) {
  .entry-content .id-checklist { grid-template-columns: 1fr; }
}
.entry-content .id-checklist li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 0;
  font-size: .92rem;
  line-height: 1.45;
}
.entry-content .id-checklist li::before {
  content: "";
  position: absolute;
  left: 4px; top: .42em;
  width: 6px; height: 11px;
  border-right: 2px solid var(--c-go);
  border-bottom: 2px solid var(--c-go);
  transform: rotate(45deg);
}

/* "How it works" numbered steps — compact row cards. */
.entry-content .how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}
@media (min-width: 700px) {
  .entry-content .how-steps { grid-template-columns: repeat(3, 1fr); }
}
.entry-content .how-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--e-1);
  margin: 0;
}
.entry-content .how-num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-content .how-step h3 { margin: 0 0 3px; font-size: .96rem; }
.entry-content .how-step p { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--c-text-2); }

/* Hero: tighten the stack so the network picker is reachable sooner. */
.entry-content .home-hero { padding: 4px 0 0; }
.entry-content .home-hero h1 {
  font-size: clamp(1.55rem, 1.2rem + 1.9vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
}
.entry-content .home-hero .dek,
.entry-content .home-hero > p {
  font-size: clamp(.97rem, .94rem + .3vw, 1.08rem);
  line-height: 1.6;
  color: var(--c-text-2);
  margin-bottom: 1em;
}

/* Compare strip */
.entry-content .compare-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}
@media (min-width: 640px) {
  .entry-content .compare-strip { grid-template-columns: repeat(2, 1fr); }
}
.entry-content .compare-item {
  display: block;
  padding: 15px 16px;
  margin: 0;
}

/* =====================================================================
 * 13. FINAL TYPOGRAPHY POLISH
 * Desktop measured ~85 characters per line (comfortable is 65-75), and the
 * page H1 (32px) sat almost level with H2 (29.6px), flattening the hierarchy.
 * ===================================================================== */

:root { --measure: 680px; }

/* Page/post title lives in Kadence's hero, outside .entry-content. */
.entry-title,
.entry-header .entry-title,
h1.entry-title {
  font-size: clamp(1.65rem, 1.25rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 750;
  margin-bottom: .35em;
}

/* Hero block spacing on guides. */
.entry-hero-container-inner .entry-header,
.page-hero-section .entry-header { padding-block: clamp(16px, 3vw, 32px); }

/* Post meta row under the title. */
.entry-meta, .entry-taxonomies {
  font-size: .84rem;
  color: var(--c-text-3);
}
.entry-meta a, .entry-taxonomies a {
  color: var(--c-text-2);
  text-decoration: none;
  font-weight: 550;
}
.entry-meta a:hover, .entry-taxonomies a:hover { color: var(--c-primary); text-decoration: underline; }

/* Keep the long-form column comfortable on very wide screens. */
@media (min-width: 1280px) {
  .entry-content > * { max-width: var(--measure); }
}